/* The avatar set. Arrows: the source rule of every Quadro design (style_cs.css .changeAvatar, div.arrLeft/Right),
   one for all four here. The absolute arrows keep the flex's centre as their static place, so the margins put them
   from the picture's middle beside its edges, whatever the picture's size or when it loads (owner 2026-11-13: a
   left:12px from the box's edge put the flipped arrow's 17px glyph some 30px into the picture). sylv.css keeps
   Sylvania's own margins, mobile.css narrows the arrows with its own sizes; z-index keeps them above neighbouring blocks. */
body[data-rift-view=rift] .changeAvatar{position:relative;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;margin:0}
body[data-rift-view=rift] :is(.arrLeft,.arrRight){position:absolute;z-index:3;width:40px;height:55px;cursor:pointer;background:url(https://upforme.ru/uploads/001b/d9/4a/2/895591.png) no-repeat;opacity:.7;transition:opacity .3s ease}
body[data-rift-view=rift] .arrLeft{order:-1;margin:auto 0 auto -226px;transform:scale(-1,1)}
body[data-rift-view=rift] .arrRight{margin:auto -6px auto 218px}
body[data-rift-view=rift] :is(.arrLeft,.arrRight):focus-visible{opacity:1;outline:2px solid currentColor}
body[data-rift-view=rift] :is(.arrLeft,.arrRight):is(:hover,:focus-visible){opacity:1;background-image:url(https://upforme.ru/uploads/001b/d9/4a/2/523850.png)}
/* Choosing: thumbnails as radio buttons, the set with its buttons, the topics. */
.rift-avatar-choice,.rift-avatar-set{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 14px}
.rift-avatar-choice label{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;font-weight:normal}
.rift-avatar-choice :is(img,.rift-avatar-random span){width:70px;height:100px;object-fit:cover;border:2px solid transparent;border-radius:5px}
.rift-avatar-choice .rift-avatar-random span{display:flex;align-items:center;text-align:center;box-sizing:border-box;padding:4px;border-color:#73817e6e}
.rift-avatar-choice input{position:absolute;opacity:0}
.rift-avatar-choice input:checked+:is(img,span){border-color:currentColor}
.rift-avatar-choice input:focus-visible+:is(img,span){outline:2px solid currentColor;outline-offset:2px}
.rift-avatar-set figure{display:flex;flex-direction:column;align-items:center;gap:4px;margin:0;width:110px}
/* .rift-chars-face: the profile's public characters (accounts.css) take the set's thumbnail. */
:is(.rift-avatar-set,.rift-chars-face) img{width:70px;height:100px;object-fit:cover;border-radius:5px}
.rift-avatar-set button{width:100%}
.rift-avatar-rules{margin:0 0 14px;border-collapse:collapse}
.rift-avatar-rules td{padding:4px 10px 4px 0;vertical-align:middle}
.rift-avatar-rules img{width:35px;height:50px;object-fit:cover;border-radius:3px}
.rift-avatar-topic{margin:20px 18px}