/* =========================
   ВЕРХНЯЯ ЧАСТЬ
   reset / base / header / layout
   ========================= */

*{background:transparent;margin:0;padding:0;outline:none;border:1px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
ol,ul{list-style:none}
blockquote,q{quotes:none}
table{border-collapse:collapse;border-spacing:0}
input,select{vertical-align:middle}
article,aside,figure,figure img,hgroup,header,nav,section,main{display:block}
body{font:15px Arial,sans-serif;line-height:normal;padding:0;margin:0;color:var(--tt);background-image:linear-gradient(to bottom,#EEE,#ff9800);height:100%;width:100%;font-weight:400}
img{max-width:100%}
.clr{clear:both}
.clearfix:after{content:"";display:table;clear:both}
a{color:var(--tt);text-decoration:none}
a:hover,a:focus{color:#355b88;text-decoration:none}
h1,h2,h3,h4,h5{font-weight:500;font-size:19px;color:#444}
.sub-title h1{margin-bottom:15px;font-size:24px;font-weight:700}
button,input{font-family:'Tahoma'!important}

/*.pagi-load a,.up-second li a,.usp-edit a,.qq-upload-button,button:not(.color-btn):not([class*=fr]),html input[type="button"],input[type="reset"],input[type="submit"],.meta-fav a,.usp-btn a{padding:0 20px;display:inline-block;height:40px;line-height:40px;border-radius:20px;cursor:pointer;background-color:#607D8B;color:#fff;text-align:center;font-weight:700;font-size:16px}*/
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
button[disabled],input[disabled]{cursor:default}
/*.button:hover,.up-second li a:hover,.usp-edit a:hover,.qq-upload-button:hover,.pagi-load a:hover,.usp-btn a:hover,button:not(.color-btn):hover,html input[type="button"]:hover,input[type="reset"]:hover,input[type="submit"]:hover,.meta-fav a:hover{background-color:#527383;line-height:40px;font-size:16px}*/
button:active,html input[type="button"]:active,input[type="reset"]:active,input[type="submit"]:active{box-shadow:inset 0 1px 4px 0 rgba(0,0,0,0.1)}
input[type="submit"].bbcodes,input[type="button"].bbcodes,input.bbcodes,.ui-button{font-size:12px!important;height:30px!important;line-height:30px!important;padding:0 10px;border-radius:3px}
input[type="text"],input[type="password"]{display:block;width:100%;height:40px;line-height:40px;padding:0 15px;color:#000;background-color:#f8f8f8;border-radius:4px;-webkit-appearance:none;box-shadow:0 0 0 1px #EDEDED,inset 1px 1px 3px 0 rgba(0,0,0,0.1);font-size:16px}
input:focus::-webkit-input-placeholder{color:transparent}
input:focus::-moz-placeholder{color:transparent}
input:focus:-moz-placeholder{color:transparent}
input:focus:-ms-input-placeholder{color:transparent}
select{height:40px;border:1px solid #e3e3e3;background-color:#FFF}
textarea{display:block;width:100%;padding:10px;border:1px solid #e3e3e3;background-color:#F8F8F8;border-radius:0;overflow:auto;vertical-align:top;resize:vertical;box-shadow:0 0 0 1px #EDEDED,inset 1px 1px 3px 0 rgba(0,0,0,0.1)}

.img-box,.img-wide,.img-resp,.img-resp-v,.img-resp-sq{overflow:hidden;position:relative;background-color:#000}
.img-resp{padding-top:57%}
.img-resp-v{padding-top:145%}
.img-resp-sq{padding-top:100%}
.img-box img,.img-resp img,.img-resp-v img,.img-resp-sq img{width:100%;min-height:100%;display:block}
.img-resp img,.img-resp-v img,.img-resp-sq img{position:absolute;left:0;top:0}
.img-wide img{width:100%;display:block}
.img-square img{width:150%;max-width:150%;margin-left:-25%}
.nowrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

button,.th-img{transition:all .3s}
.button,.sc-title,.mask{transition:color .3s,background-color .3s,opacity .3s}
.sp-inner-content{display:none!important}
.ps-link{cursor:pointer}
.icon-l .fa{margin-right:10px}
.icon-r .fa{margin-left:10px}
.head-login-link {
display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 35px;
    max-width: 180px;
    padding: 0 10px;
    border: 2px solid #03A9F4;
    border-radius: 14px;
    background: #fff;
    color: #2d466b;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    margin-right: 15px;
}
.fx-row{display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between}
.fx-center{-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center}
.fx-between{-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between}
.fx-stretch{-ms-flex-align:stretch;-webkit-align-items:stretch;align-items:stretch}
.fx-top{-ms-flex-align:start;-webkit-align-items:flex-start;align-items:flex-start}
.fx-middle{-ms-flex-align:center;-webkit-align-items:center;align-items:center}
.fx-bottom{-ms-flex-align:end;-webkit-align-items:flex-end;align-items:flex-end}
.fx-col{display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}
.fx-wrap{-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap}
.fx-left{-ms-flex-pack:start;-webkit-justify-content:start;justify-content:start}
.fx-start{-webkit-justify-content:flex-start;justify-content:flex-start}
.fx-first{-ms-flex-order:-1;-webkit-order:-1;order:-1}
.fx-last{-ms-flex-order:10;-webkit-order:10;order:10}
.fx-1{-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%;min-width:50px}

b,strong{font-weight:700}
.hmenu a:hover,a:hover,.col-side a:hover,.short:hover .short-desc,.speedbar a:hover{text-decoration:underline}

.wrap{min-width:320px;overflow:hidden;position:relative}
.center{max-width:1100px;margin:0 auto;position:relative;z-index:20}

@media screen and (min-width:1220px){.header{height:70px}}
.header{background-color:#00424a;position:relative}
.cols{padding:10px 0}
.col-side{width:320px;margin-right:10px}
.col-main{min-height:50vh}
.logo{width:200px;height:65px;display:block;overflow:hidden}
.hmenu{text-align:left;font-weight:700;font-size:.9em}
.hmenu li{display:inline-block;vertical-align:top;margin:0 0 0 40px}

.rand{border-radius:10px;margin-left:20px;width:270px;font-size:14px;padding:0 10px}
.search-wrap{position:relative;padding:10px;width:620px}
.search-box{width:100%;position:relative}
.search-box input,.search-box input:focus{width:100%;padding:0 60px 0 20px;background-color:#fff;box-shadow:0 0 0 1px #e3e3e3;color:#000;border-radius:10px;height:40px;line-height:40px}
.search-box button{position:absolute;right:0;top:0;z-index:10;width:40px;padding:0!important;height:40px!important;line-height:40px!important;background:transparent!important;color:#00BCD4!important}
.search-box input:not(:focus)::-webkit-input-placeholder{color:#000;font-size:12px}
.search-box input:not(:focus)::-moz-placeholder{color:#000;font-size:12px}
.search-box input:not(:focus):-moz-placeholder{color:#000;font-size:12px}
.search-box input:not(:focus):-ms-input-placeholder{color:#000;font-size:12px}

.ftmenu li{margin:0 20px 5px 0;display:inline-block;font-weight:700}
.ftmenu a{color:#fff}
.ftdesc{opacity:.7}
.ftdesc-a{color:#fff}
.ftdesc-a:hover{color:#fff;text-decoration:none!important}

.side-box{background-color:#fff;padding:5px;overflow:hidden;margin-bottom:10px}
.side-box + .side-box{margin-top:20px}
.side-bt{font-weight:700;font-size:18px;border-bottom:1px solid #e3e3e3;margin:0 -20px 20px;padding:0 20px 20px}
.side-nav a{display:block;margin-bottom:15px}
.side-nav a:before{content:"\f061";font-family:'FontAwesome';color:#b3e0b6;width:30px;display:inline-block;vertical-align:middle;position:relative;top:-2px}

.popular{border-bottom:1px dotted #ccc;overflow:hidden;padding:7px;line-height:1.5}
.popular:hover{background:rgba(0,0,0,0.05)}
.side-box .img{background-size:cover!important;width:32px;height:32px;margin-right:10px;display:inline-block;float:left;margin-top:1px}
.popular-desc:hover{text-decoration:none!important}
.popular-desc{font-size:13px;display:block;position:relative;padding-left:20px}
.popular-descx:before{content:"\f001";font-family:'FontAwesome';color:#FF5722;width:30px;display:inline-block;vertical-align:middle;position:absolute;left:0;top:0;font-size:14px}
.popular-title{opacity:.5;margin-bottom:10px}

.btn-menu{display:none}
.side-panel{width:260px;height:100%;overflow-x:hidden;overflow-y:auto;background-color:#fff;padding:20px;z-index:888;position:fixed;left:-280px;top:0;transition:left .4s;-webkit-transition:left .4s}
.side-panel.active{left:0}
.close-overlay{width:100%;height:100%;background-color:rgba(0,0,0,0.5);position:fixed;left:0;top:0;z-index:887;display:none}
.btn-close{cursor:pointer;display:block;left:280px;top:-40px;position:fixed;z-index:888;width:40px;height:40px;line-height:40px;text-align:center;font-size:18px;background-color:#6c9bd3;color:#fff;transition:top .4s;-webkit-transition:top .4s}
.btn-close.active{top:0}
.side-panel .hmenu{display:block;margin-bottom:15px;text-align:left}
.side-panel .hmenu > li{width:100%;margin-left:0}
.side-panel .hmenu > li > a{border-bottom:1px solid #e3e3e3;border-right:0;height:40px;line-height:40px}
.side-panel .to-mob{margin-bottom:0}
.side-panel .side-box{padding:0;-webkit-box-shadow:none;box-shadow:none}

@media screen and (max-width:1220px){
    .center{max-width:1000px}
    .hmenu,.col-side{display:none}
    .cols{display:block}
    .search-wrap{margin-left:10px;margin-right:10px;width:100%}
    .col-main{padding-left:10px;padding-right:10px}
    .btn-menu{cursor:pointer;display:block;color:#fff;border-radius:25px;width:40px;height:40px;line-height:40px;text-align:center;font-size:14px;background-color:#607D8B;margin-right:10px}
}
@media screen and (max-width:950px){.center{max-width:768px}}
@media screen and (max-width:760px){
    .center{max-width:640px}
    .rand{margin-left:10px;width:auto}
}
@media screen and (max-width:590px){.center{max-width:480px}}
@media screen and (max-width:470px){
    .center22{max-width:320px}
    .search-wrap{display:block;width:100%}
    .rand{width:100%;margin:10px 0 0}
}
.playlist-add {
    width:34px;
    height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    border:1px solid #d5d5d5;
    background:#fff;
    cursor:pointer;
    margin-left:8px;
    flex-shrink:0;
    color:#2d2d2d;
    font-size:20px;
    font-weight:700;
    line-height:1;
    transition:all .2s ease;
}
.playlist-add__symbol { display:block; line-height:1; transform: translateY(-1px); }
.playlist-add:hover { border-color:#2a65ad; color:#2a65ad; }
.playlist-add--active {
    border-color:#2a65ad;
    background:#2a65ad;
    color:#fff;
}
/* Только мобильная версия. Десктоп не затрагивается */
.header__mobile{display:none}
.header__desktop{display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-ms-flex-align:center;-webkit-align-items:center;align-items:center}

@media screen and (max-width: 768px) {
    .header__desktop{display:none!important}
    .header__mobile{display:block;padding:10px 10px 12px}

    .header__top {
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
    }

    .logo {
        width:170px;
        height:auto;
        display:block;
    }

    .logo img {
        width:100%;
        height:auto;
        display:block;
    }

    .header__mobile .btn-menu {
        margin-right:0;
        margin-left:auto;
        flex:0 0 auto;
        cursor:pointer;
        display:block;
        color:#fff;
        border-radius:25px;
        width:40px;
        height:40px;
        line-height:40px;
        text-align:center;
        font-size:14px;
        background-color:#607D8B;
    }

    .header__search-row {
        display:flex;
        align-items:center;
        gap:8px;
        margin-top:12px;
    }

    .header__search-row--guest {
        flex-wrap:nowrap;
    }

    .header__search-row--guest .search-wrap,
    .header__search-row--auth .search-wrap {
        flex:1 1 auto;
        min-width:0;
        width:auto;
        margin:0;
        padding:0;
    }

    .header__mobile .search-box {
        width:100%;
        position:relative;
    }

    .header__mobile .search-box input,
    .header__mobile .search-box input:focus {
        width:100%;
        height:40px;
        line-height:40px;
        padding:0 54px 0 16px;
    }

    .header__mobile .search-box button {
        width:40px;
        height:40px!important;
        line-height:40px!important;
    }

    .header__mobile .head-login-link {
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:40px;
        min-width:40px;
        height:40px;
        min-height:40px;
        padding:0;
        border-radius:50%;
        margin:0;
        flex:0 0 40px;
    }

    .head-login-link__icon {
        display:block;
        font-size:17px;
        line-height:1;
    }

    .head-login-link__text {
        display:none;
    }

    .header__profile-row {
        display:flex;
        justify-content:center;
        margin-top:8px;
    }

    .head-profile--header {
        display:inline-block;
        max-width:100%;
    }

    .head-profile--header .head-profile__trigger {
        min-height:38px;
        max-width:230px;
        padding:0 16px;
        margin-right:0;
        justify-content:center;
    }

    .head-profile--header .head-profile__name {
        max-width:170px;
        text-align:center;
    }

    .head-profile--header .head-profile__menu {
        left:50%;
        transform:translateX(-50%);
        min-width:210px;
    }
}
.app-toast-container {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    pointer-events: none;
}

.app-toast {
    width: 360px;
    max-width: calc(100vw - 24px);
    opacity: 0;
    transform: translateY(120px);
    transition: transform .35s ease, opacity .35s ease;
    pointer-events: auto;
}

.app-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.app-toast.is-hiding {
    opacity: 0;
    transform: translateY(120px);
}

.app-toast__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 16px 46px 16px 16px;
    border-radius: 18px;
    background: #0d4f57;
    color: #fff;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .22);
    border: 1px solid rgba(255, 255, 255, .10);
}

.app-toast--success .app-toast__inner {
    background: linear-gradient(135deg, #0c5d52 0%, #12806f 100%);
}

.app-toast--warning .app-toast__inner {
    background: linear-gradient(135deg, #7f6500 0%, #9e7e00 100%);
}

.app-toast--error .app-toast__inner {
    background: linear-gradient(135deg, #7a2230 0%, #b33146 100%);
}

.app-toast__icon {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    position: relative;
    background: rgba(255, 255, 255, .16);
}

.app-toast__icon:before,
.app-toast__icon:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
}

.app-toast--success .app-toast__icon:before {
    width: 10px;
    height: 2px;
    transform: translate(-7px, 2px) rotate(45deg);
}

.app-toast--success .app-toast__icon:after {
    width: 14px;
    height: 2px;
    transform: translate(1px, -1px) rotate(-45deg);
}

.app-toast--warning .app-toast__icon:before,
.app-toast--error .app-toast__icon:before {
    width: 2px;
    height: 9px;
    margin-top: -2px;
}

.app-toast--warning .app-toast__icon:after,
.app-toast--error .app-toast__icon:after {
    width: 2px;
    height: 2px;
    margin-top: 7px;
}

.app-toast__text {
    flex: 1 1 auto;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 600;
}

.app-toast__close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 28px;
    height: 28px;
    border: 0;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 18px;
    line-height: 28px;
    cursor: pointer;
}

.app-toast__close:hover {
    background: rgba(255, 255, 255, .20);
}

@media (max-width: 767px) {
    .app-toast-container {
        right: 12px;
        left: 12px;
        bottom: 12px;
        align-items: stretch;
    }

    .app-toast {
        width: auto;
        max-width: none;
    }

    .app-toast__inner {
        min-height: 58px;
        padding: 14px 42px 14px 14px;
        border-radius: 16px;
    }

    .app-toast__text {
        font-size: 13px;
    }
}