:root {
    --bg-red: #C00;
    --fg-red: #C00;

    --fg-borders: #555;
    --bg-buttons: light-dark(#49f, #6de35a);
    --fg-buttons-alt: #EEE;

    --fg-body: light-dark(#555, #AAA);
    --bg-body: light-dark(#FFF, #282828);

    --bg-content: light-dark(#EEE, #121212);

    --bg-marked: light-dark(#EDD, #600);
    --bg-verified: light-dark(#DED, #b3f0a2);

    --fg-verified: light-dark(#0A0, #6de35a);
    --bg-verified-even: ligth-dark(#CDC, #565);
    --bg-selected: light-dark(#CCC, #555);
    --bg-selected-photo: light-dark(#FFF, #555);
    --bg-disabled: #999;

    --fg-link-color: light-dark(#903030,#6de35a);
    --fg-link-color-visited: light-dark(#B99, #b3d0b2);
    --fg-link-color-hover: light-dark(#C00, #0dd910);

    --fg-on-colored: light-dark(#FFF, #000);
    --fg-marker: light-dark(#FFF, #000);

    --bg-tdd-even: light-dark(#DDD,#282828);

    --target-width: 99;

}

BODY{line-height:1.3;margin:0;font-family:'Roboto',sans-serif;font-size:1.4vw;font-weight:300;color:var(--fg-body);background-color:var(--bg-body);text-align:center}
TABLE{border:0;text-align:left;width:100%;vertical-align:top;padding:0px;border-spacing:0px}
TD{padding:0.4vw;vertical-align:top}
TD.prev, TD.empt{height:8.85vw;min-height:8.85vw;width:15vw;min-width:15vw;text-align:center;padding:0;font-size:0;vertical-align:middle}
TD.prev:hover{background-color:var(--bg-selected);cursor:pointer}
TD.badt{background-color:var(--bg-red)}
TD.gift{background-color:#090}
TD.curt{background-color:var(--bg-selected-photo)}
TH{background-color:var(--bg-tdd-even);vertical-align:top;text-align:right;font-weight:inherit}
H1,H2,H5{font-size:inherit;font-weight:bold;margin:0}
H3{display:inline;font-size:inherit}
.he{display:inline-block;font-weight:inherit}
A{color:var(--fg-link-color);text-decoration:none}
A:hover{color:var(--fg-link-color-hover) !important; text-decoration:underline}
A:visited{color:var(--fg-link-color-visited)}
P{margin:1vw 0 1vw 0;text-align:justify}
P:first-letter{margin-left:1vw}

BR.cb{clear:both}
.mobile-only{display:none}
.desktop-only{display:block}

IMG{border:solid 0.1vw var(--fg-borders);margin:0px;max-width:100%}
IMG.big{height:auto}
IMG.prev{width:auto}
.prev{height:8.3vw;min-height:8.3vw;max-width:15vw}
IMG.nop{border:0;vertical-align:text-bottom;width:3vw;height:3vw;margin-right:0.6vw;}
.fts{max-height:92vh;width:auto}
IMG.x100{float:left;margin-right:0.6vw;object-fit:cover;object-position:50% 0;min-width:8.3vw}
.x100{vertical-align:top;background-repeat:no-repeat;background-size:100%;height:8.3vw;width:8.3vw}
.content{min-height:81vh;vertical-align:top;text-align:left;padding:1vw 0.5vw;background-color:var(--bg-content);word-break:break-word}
.w100{width:29vw;vertical-align:top}
.w100-photo{width:26vw;}
.w100-select{width:30vw;}
.w100-left {width:16vw;display:inline-block;text-align:left}

.tdd TD, .tdd TH{padding:2px 2px 2px 0;word-break:break-word;text-align:right;vertical-align:top}
.tdd TH{position:sticky;top:0px;}
.tdd TH:nth-child(n){min-width:5vw;}
.tdd TH:nth-child(1), .tdd TD:nth-child(1){min-width:50vw;text-align:left}
.tdd TH:nth-child(2){min-width:11vw;}
.tdd TH:nth-child(4){min-width:8vw;}
.tdd TH:nth-child(7), .tdd TD:nth-child(7){min-width:12vw;padding-right:0px}
.tdd TH:nth-child(8), .tdd TD:nth-child(8){display:none}
.tdd TR:nth-child(even){background-color:var(--bg-tdd-even)}
.tdd TR:hover{background-color:var(--bg-selected) !important;}

.send {font-size:3.5vw !important;min-width:4vw}

.marked{background-color:var(--bg-marked)}
.verified-icon{color:var(--fg-verified)}
.elite-icon{color:#DF723D}

.marker {
    border-radius: 15px;
    border: solid 1px var(--fg-marker);
    margin-right: 3px;
    padding: 1px 4px 1px 2px;
    color: var(--fg-marker) !important;
    display:inline-block;
    line-height:1;
    font-weight: 300 !important;
}

.marker-verified {
    background-color: var(--fg-verified);
}

.marker-elite {
    background-color: #DF723D;
}

.marker-ai {
    background-color: #866;
}

.marker-disabled {
    filter: grayscale();
}

/*
TR.verified:nth-child(even){background-color:var(--bg-verified-even)}
*/

.header, .footer, .announce {min-height:2vw;height:2vw;padding:1vw 0.5vw;vertical-align:middle;}
.header {border-bottom:0.1vw solid var(--fg-borders);display:flex;}
.footer {border-top:0.1vw solid var(--fg-borders);text-align:right;}

.header-title {flex:2;text-align:left;white-space:nowrap;overflow:hidden;}

.header-members{flex:0 0 15vw;text-align:right}
.album-description{text-align:justify}

.topmenu {text-align:right;padding-bottom:1vw}
.topmenu A, .header A, .footer A{padding-left:1vw;color:var(--fg-link-color)}
.header-title A, .footer A{padding:0;}
A.header-title:visited {color:var(--fg-body)}

.main-desc{float:left;width:84vw}

.announce{border-bottom: 0.1vw solid var(--fg-borders);color:var(--fg-on-colored);background-color:var(--bg-red)}
A.announce,A.announce:hover{color:var(--fg-on-colored) !important;border:none;padding:0px}

FORM{margin:0px}
.form-header {width:14vw;display:inline-block;text-align:left}
.search-str {width:49vw}

i {
    font-family:'Material Symbols Outlined';
    font-weight:normal;
    font-style:normal;
    font-size:1.4vw;
    letter-spacing:normal;
    text-transform:none;
    display:inline-block;
    white-space:nowrap;
    word-wrap:normal;
    direction:ltr;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    vertical-align:top !important;
}

.filled {
    font-variation-settings: 'FILL' 1;
}

.mi-b{font-size:6.4vw !important;color:var(--fg-body);float:left;margin:0 1.3vw;}
.mi-b:hover {text-decoration:none}

textarea,select,input{font-family:inherit;font-size:inherit;font-weight:inherit;text-decoration:none;border:solid 0.1vw var(--fg-borders);border-radius:3px;margin:0 0 0.2vw 0;vertical-align:baseline;padding:0px;padding-left:2px}
input[type=file]{border:0}
input[type=checkbox],input[type=radio]{border:0;transform:scale(1.5);vertical-align:middle;accent-color:var(--bg-buttons)}
input[type=button],input[type=submit]{padding: 0.1em 0.4em;color:var(--fg-on-colored);background-color:var(--bg-buttons)}
input[type=text],input[type=password],textarea{padding: 0.2vw 0.4vw}
input:disabled{background-color:var(--bg-disabled)}
.commentado{height:3.6vw;width:60vw}

.tomato{color:var(--fg-red) !important;}
.tomato-button{background-color:var(--fg-red) !important;color:var(--fg-buttons-alt) !important;font-weight:400}

.x50{height:4vw;width:4vw;min-width:4vw;background-size:100%;background-repeat:no-repeat;vertical-align:top;object-fit: cover;object-position: 50% 0;}

.nologo{background-image:image-set('../images/nologo.webp' type('image/webp'),'../images/nologo.jpg' type('image/jpg'))}

.reco{width:calc(98vw/6);height:calc(98vw/6);object-fit:cover;object-position:50% 0;}
.recot {float:left;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(99vw/6);}

iframe {height:18.6vw;border:none;width:100vw;display:block}
.mem-info{width:45%;float:left;}
.mem-about{width:31.6vw;height:9.9vw}

.halfeditor {display:inline-block;width:49%;vertical-align:top;text-align:left}

.front-ul{margin:0px}

div.x50{padding:0 1vw 1vw 0}
div.comm{padding:0;vertical-align:top;text-align:left;}

.selected1{background-color:var(--bg-selected) !important;}

.form-data{width:22vw}
.form-data-short{width:14vw}

@media (prefers-color-scheme: dark) {
    IMG.nop {filter:grayscale()}
}

@media only screen and (max-width: 768px) {
    .reco{width:16.16vw;height:16.16vw}
    .recot {max-width:16.53vw;}

    iframe {height:20.5vw}

    BODY{font-size:3vw}

    IMG.nop{width:5vw;height:5vw;}
    IMG.x100{min-width:14vw}

    div.comm{word-wrap:break-word;max-width:80vw;}
    .form-header{width:28vw}
    .form-data{width:45vw}
    .form-data-short{width:22vw}
    .search-str{width:38vw}
    .search-cat{width:32vw}
    .commentado{height:8.7vw;}
    .x50{height:9vw;width:9vw;min-width:9vw}
    .topmenu A{padding:0 1vw;}
    .header-members{flex:0 0 30vw}
    .header, .footer, .announce {min-height:3.66vw;padding:1.66vw;}
    textarea,select,input {border-radius:2px}
    .footer (min-height:252px)

    .content{padding-top:1.66vw;min-height:76vh;}

    .album-description{display:none;}

    .mobile-only{display:block}
    .mobile-padded{padding-top:1.66vw}
    .desktop-only{display:none !important}

    .hamburger{background-color:var(--bg-red);color:#FFF;float:left;text-align:left;}
    .hamburger-menu {z-index:1;position:absolute;border-bottom:0.1vw solid var(--fg-borders);border-right:0.1vw solid var(--fg-borders);background-color:var(--bg-body);color:var(--fg-body);padding: 2vw;}
    .hamburger-menu A {color:var(--fg-body)}
    .hamburger-menu A:first-letter{text-transform:uppercase}

    .send {font-size:7.5vw !important;min-width:8vw}

    input[type=checkbox],input[type=radio]{transform:none}

    UL{padding-left:20px}
    .x100{height:14vw;width:14vw;min-width:14vw}
    .halfeditor{width:100%;vertical-align:top;text-align:left}
    .footer{text-align:center;}
    .material-icons{font-size:3vw;padding:0 1px}
    i {font-size:3vw;padding:0 1px}
    .mi-b{font-size:11vw !important;margin:0 1.6vw}
    .tdd TH:nth-child(n){min-width:7vw}
    .tdd TH:nth-child(1), .tdd TD:nth-child(1){min-width:44vw;text-align:left}
    .tdd TH:nth-child(2){min-width:21vw}
    .tdd TH:nth-child(8), .tdd TD:nth-child(8){min-width:30vw;text-align:left;display:table-cell;padding-right:0px}
    .tdd TH:nth-child(3), .tdd TD:nth-child(3), .tdd TH:nth-child(4), .tdd TD:nth-child(4), .tdd TH:nth-child(5), .tdd TD:nth-child(5), .tdd TH:nth-child(6), .tdd TD:nth-child(6), .tdd TH:nth-child(7), .tdd TD:nth-child(7) {display:none}
    .tdd-total{font-size:0}
    .mem-info{width:100%;}
    .mem-about{width:45vw;}
    .w100{width:54vw;}
    .w100-select{width:55vw;}
    .w100-photo{width:48vw;}
    .w100-left{width:38vw;}
    .fts{max-height:52.5vh;}
    .prev {
        height:15.4vw;
        width:15.4vw !important;
        object-fit:cover;
        object-position: 50% 0;
        max-width:15.4vw;
    }
    TD.prev{padding:1px}
    IMG.curt{border:solid 0.1vw #FFF}
    .main-desc{width:66vw}
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: fallback;
    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fCRc4AMP6lbBP.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: fallback;
    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fABc4AMP6lbBP.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: fallback;
    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: fallback;
    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: fallback;
    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: fallback;
    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v271/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsLjBuVY.woff2) format('woff2');
}