@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@100;300;400;500;600;700;800&family=Open+Sans:wght@300;400;500;700&display=swap');
@import url('jquery.multiselect.css');
a,
button {
    cursor: pointer;
}

body {
/*
    background-color: #f3afc6;
    background-image: url(../img/bg.jpg);
*/
    font-family: 'Fira Sans', sans-serif;
    background-repeat: repeat-y;
    background-size: cover;
    background-attachment: fixed;
}

.container-my {
    margin: 30px auto;
    max-width: 1150px;
    background: #fff;
    padding: 20px;
    box-shadow: 1px 1px 9px 3px rgb(0 0 0 / 8%);
    position: relative;
}
@media (max-width: 1270px) {
    .container-my{
        width: 100%;
        max-width: initial;
    }
}

.header-bg {
    background: #f03d6c;
    background-image: url(../img/header_bg.jpg);
    background-position: center;
    background-size: cover;
    height: 177px;
    position: relative;
    margin: -20px;
    margin-bottom: 20px;
    width: calc(100% + 40px);
}

.header-bg a {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.header_title {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -3rem;
}

.header_title a {
    position: absolute;
    z-index: 1000;
    text-decoration: none;
    color: #b99696;
/*
    left: 0;
    top: 0;
*/
    width: 100%;
    height: 100%;
    font-size: 1rem;
    padding: 1rem;
    line-height: normal;
}

.header_title a b {
    font-size: 1.1rem;
    color: #e58854;
}

.header-sub {
    padding: 10px;
    background: #FAFAFA;
    border-radius: 6px;
}

.header-sub.add {
    text-align: center;
    margin: -20px;
    padding: 20px 0;
    border-bottom: 1px solid #dadada;
    border-radius: 0;
}

.filter-item {
    /* d-flex flex-column align-items-center */
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    margin-right: 8px;
}

.filter-item:last-child {
    margin-right: 0;
}

.filter-item select,
.filter-item .btn,
.filter-item .form-control {
    margin-top: .25rem;
    width: auto;
}

.filter-item .btn {
    height: 37px;
    white-space: nowrap;
}

.filter-item .search {
    display: flex;
    align-items: center;
    width: 14.8rem;
    margin-right: 0.3rem;
    justify-content: center;
}

.filter-item input#clear_search {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
    border: 0;
    z-index: 1000;
    opacity: 0.4;
    background-image: url(/assets/img/cross-in-a-circle.png);
    background-color: transparent;
    background-size: 1.3rem;
    background-position: center;
    background-repeat: no-repeat;
}

.filter-item input#clear_search:hover {
    opacity: 0.8;
}

.items {
    margin-top: 10px;
}

.btn-purple {
    background: #412C84;
    color: white !important;
    font-weight: bold;
    font-size: 16px;
    width: 176px;
    margin-left: -8px;
}

.btn-pink {
    background-color: rgb(230, 103, 175);
    color: white !important;
    font-weight: bold;
    font-size: 16px;
    width: 176px;
    /* rgb(230, 103, 175) */
}



.posts {
    width: 100%;
}

.posts thead {
    background: #fff;
}

.posts tbody {
    border-top: 0 !important;
    font-family: 'Open Sans', sans-serif;
}

.posts tbody a {
    color: #000;
    font-weight: normal;
    text-transform: uppercase;
    text-decoration: none;
}

.posts img:not(.sex) {
    width: 16px;
    height: 16px;
    margin-left: 5px;
    margin-right: 2px;
}

.posts thead img {
    width: 24px !important;
    height: 24px !important;
}

.posts thead .text-center {
    width: 5%;
}

.posts tbody td {
    text-align: center;
}

.posts tbody td:first-child {
    text-align: left;
}

.posts .newdate {
    background: #fff;
}

.posts .newdate td {
    text-align: center !important;
    font-weight: bold;
    font-size: 14px;
}
.posts .vip{
    background: #FBDDF0;
}
.posts .vip.super-vip {
    background: rgb(181, 249, 143);
}

.posts a.attached::before{
    content: '';
    background: url(../img/attach.png);
    width: 16px;
    height: 16px;
    background-size: 16px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 2px;
}

#theme-details h1 {
    font-size: 1.5rem;
}

#post-details h1 {
    display: inline;
    font-size: 1rem;
}

#post-details h2 {
    display: inline;
    font-size: 1rem;
    font-weight: normal;
}

footer {
    background: #000;
    padding: 20px;
    margin: -20px;
    margin-top: 30px;
}

footer span {
    color: #818181;
}

footer a {
    text-decoration: none;
    color: #fff !important;
}

.email {
    background: transparent;
    text-align: center;
    margin-top: -20px;
    box-shadow: none;
}

.email a {
    text-decoration: none;
    color: #000 !important;
}

footer a:hover,
.email a:hover {
    text-decoration: underline;
}


/* pagination */
#pagination{
    display: flex;
    justify-content: center;
}
.paginationjs-page a,
.paginationjs-prev a,
.paginationjs-next a,
.paginationjs-ellipsis a {
    position: relative;
    display: block;
    padding: 0.5rem 0.85rem;
    margin-left: 0;
    line-height: 1.25;
    text-decoration: none;
    color: #000;
    background-color: #fff;
    border: 1px solid #dee2e6;
    transition: .2s ease background-color, .2s ease box-shadow;
}

.paginationjs-page a:hover,
.paginationjs-prev a:hover,
.paginationjs-next a:hover,
.paginationjs-ellipsis a:hover {
    z-index: 2;
    background-color: #e9ecef;
    border-color: #dee2e6;
}

.paginationjs-prev.disabled a,
.paginationjs-next.disabled a {
    pointer-events: none;
    cursor: auto;
    color: #999;
}

.paginationjs-prev a {
    margin-left: 0;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

.paginationjs-next a {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}

.paginationjs-page a:active, .paginationjs-page a:focus {
    z-index: 3;
    outline: 0;
    -webkit-box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.25);
    box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.25);
}

.paginationjs-page.active a {
    z-index: 3;
    background-color: #E3174C;
    border-color: transparent;
    color: #fff !important;
}

/* pagination */
.about-post{
    margin: 20px 0;
    margin-top: 40px;
}
.about-post .btn svg{
    height: 20px;
    margin-right: 5px;
}
.about-post .btn{
    align-items: center;
    padding: 5px 10px;
    display: flex;
    margin-bottom: 20px;
}

#edit-post-form .ms-options-wrap, #edit-post-form .ms-options {
    width: 100% !important;
}
#edit-post-form .col-sm-10 {
    width: 86%;
}
#edit-post-form label.col-sm-2.col-form-label {
    text-transform: none;
    font-weight: bold;
    width: 14%;
}
.about-post .btn-info::before{
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z'%3E%3C/path%3E%3C/svg%3E");
    width: 20px;
    height: 20px;
    background-size: 20px;
    position: relative;
    top: -3px;
    margin-right: 5px;
    margin-left: -5px;
    transition: .2s ease transform;
}
.about-post .btn-info:hover::before{
    transform: translateX(-2px);
}
.description{
    margin: 15px 0;
    padding: 15px;
    background: #fafafa;
    border: 1px solid #e7e7e7;
    text-overflow: ellipsis;
    overflow: hidden;
    word-wrap: break-word;
    border-radius: 5px;
    white-space: break-spaces;
}

.header-sub[data-type="add-header"], #post-detail{
    display: none;
}

.ms-options {
    width: 600px !important;
    padding: 15px;
    position: absolute !important;
    background: white;
}
.ms-options-wrap{
    position: relative;
    /*width: 135px;*/
    margin-top: 3px;
}

.ms-options-wrap>button{
    cursor: inherit !important;
    padding: 0.375rem 30px 0.375rem 0.75rem !important;
    font-size: 16px !important;
    height: 38px;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;

    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}
.ms-options-wrap>button:focus{
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
}
.ms-options ul{
    margin: -10px !important;
    gap: 5px !important;
}
.ms-options-wrap>button>span{
    color: #000;
}
.ms-options-wrap>.ms-options>ul label:hover{
    border-color: #cbcbcb;
}
.ms-options-wrap>.ms-options>ul label{
    border-radius: 4px;
    border: 1px solid transparent;
}
.ms-options-wrap>.ms-options>ul input[type=checkbox]{
    top: 9px;
}
.ms-options-wrap>button:after{
    display: none;
}

.add-post-image,
.add-post-video {
    background-color: #e6e6e6;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 250px;
    position: relative;
    cursor: pointer;
    border-radius: 10px;
    border: 1px solid #b6b6b6;
    transition: .2s ease background-color;
}
.add-post-image:hover,
.add-post-video:hover {
    background-color: #dadada;
}
.add-post-image:before {
    content: 'Выбрать фото';
    text-transform: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #b0b0b0;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0px 4px 8px 5px rgba(0, 0, 0, 0.06);
    transition: .2s ease background-color;
}
.add-post-video:before {
    content: 'Выбрать видео';
    text-transform: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #b0b0b0;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0px 4px 8px 5px rgba(0, 0, 0, 0.06);
    transition: .2s ease background-color;
}
.add-post-image:after,
.add-post-video:after {
    content: attr(data-name);
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: #fff;
    padding: 0px 10px;
    border-radius: 4px;
    box-shadow: 0px 4px 8px 5px rgb(0 0 0 / 6%);
    font-size: 13px;
}
.add-post-image.loaded::before{
    content: 'Поменять фото';
    background: #fff;
    left: 85px;
    top: 30px;
}
.add-post-video.loaded::before{
    content: 'Поменять видео';
    background: #fff;
    left: 85px;
    top: 30px;
}
.add-post-image:hover::before,
.add-post-video:hover::before {
    background-color: #fff;
}
a[data-fancybox] img{
    height: 200px;
}
.about-post .image-description{
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 29px;
    overflow: hidden;
}
@media (max-width: 1000px) {
    .header-sub-flex{
        flex-direction: column;
    }
    .ms-options-wrap{
        width: 100%;
    }
    .filter-item .btn{
        /*width: 100%;*/
        justify-content: center;
    }
}
.logout{
    position: fixed;
    right: 10px;
    top: 10px;
    background: #e3174c;
    padding: 3px;
    border-radius: 5px;
    box-shadow: 1px 1px 4px 3px rgb(0 0 0 / 12%);
    transition: .2s ease background-color;
}
.logout:hover{
    background: #ff1e58;
}
.logout::after{
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M16,17V14H9V10H16V7L21,12L16,17M14,2A2,2 0 0,1 16,4V6H14V4H5V20H14V18H16V20A2,2 0 0,1 14,22H5A2,2 0 0,1 3,20V4A2,2 0 0,1 5,2H14Z'%3E%3C/path%3E%3C/svg%3E");
    background-size: 20px;
    width: 20px;
    height: 20px;
    display: block;
}
/* .eula-text{

} */
.eula-text ul{
    list-style: none;
    padding-left: 10px;
}
.eula-text ul li{
    margin-bottom: 10px;
}
.eula-text h4{
    margin-bottom: 20px;
}
.eula-text h5{
    margin: 20px 0;
}

#select-metro{
    height: 38px;
    width: 135px;
    position: relative;
    overflow: hidden;
}
#select-metro:before {
    content: 'Выбрано: 0';
    position: absolute;
    background: #fff;
    margin: -6px -11px;
    width: calc(100% - 3px);
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    padding: 0.375rem 30px 0.375rem 0.70rem !important;
    border-radius: 0.25rem;
}
#select-metro:after {
    content: '';
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 16px 12px;
    display: block;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 12px;
}

.select-visible-posts-wrapper{
    width: 200px;
    display: inline-block;
    margin-left: 2px;
}
.select-visible-posts-wrapper select{
    background-color: #0dcaf0;
    color: #000;
}
.select-visible-posts-wrapper:not(.from-forum) select{
    background: #412c84;
    color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

.playicon {
    width: 50px;
    height: 50px;
    position: absolute;
    background-image: url(../img/play.png);
    background-size: contain;
}

#forum-link {
    animation: color 1.5s ease-in-out infinite;
    transition: background-color 1s linear;
}

@keyframes color {
    0% {background-color: #412c84;}
    50% {background-color: #dc3545;}
    100% {background-color: #412c84;}
}

div.filter-panel  {
    margin-top: 2rem;
}

div.filter-panel fieldset {
    border-radius: 1rem;
}

div.filter-panel fieldset div.filter-body {
    /*display: none;*/
}

div.filter-panel fieldset.open {
    border: solid #f66 0.2rem;
    padding: 1rem;
}

div.filter-panel fieldset legend {
    float: inherit;
    width: inherit;
    margin-bottom: inherit;
    line-height: inherit;
    font-weight: 500;
    font-style: italic;
    cursor: pointer;
    letter-spacing: 0.1rem;
    border-radius: 1rem;
    color: #fff;
    background-color: yellow;
    background: linear-gradient(to right, #dc3545, #412c84);
    /*text-align: left;*/
    margin: auto;
    padding: 0 0.4rem;
}

div.filter-panel fieldset legend:hover {
    background: linear-gradient(to right, #ff3545, #412cff);
}

ul.filter_links {
    list-style-type: none;
    padding: 0;
    margin: 0 0 0 4rem;
}

ul.filter_links li {
    text-align: left;
    line-height: 1.7rem;
}

ul.filter_links li span {
    font-weight: 600;
    color: #969;
    margin: 0 0 0 1rem;
}

ul.filter_links li a {
    color: #454;
    text-decoration: none;
    background: transparent;
    padding: 0.1rem 1rem;
    border-radius: 1rem;
}

ul.filter_links li a:hover {
    color: #fff;
    /*text-decoration: underline;*/
    background: linear-gradient(to right, #d00f, #00df);
}

div.filters_container {
    line-height: 2rem;
}

/*Всплывающее окно*/

/*Всплывающее окно*/

span.show_selector {
    border: solid 0.05rem #f99;
    border-radius: 0.3rem;
    margin: 0 0.8rem 0 0;
    padding: 0.2rem 0;
    background-color: #00ff5314;
    white-space: nowrap;
    cursor: pointer;
}

span.selected_item {
    white-space: nowrap;
}

span.selected_item_group {
    white-space: normal; !important;
}

span.shadow_tag {
    display: none;
}

span.filter_name {
    white-space: nowrap;
    background: linear-gradient(to right, #ff3545, #412cff);
    color: #fff;
    /*font-style: italic;*/
    font-weight: 400;
    border-radius: 0.4rem;
    padding: 0.3rem 0.8rem;
}

span.filter_name:hover {
    background: linear-gradient(to right, #dc3545, #412c84);
}

span.show_selector span.tags_panel a {
    border: solid #5a3c3cb0 0.05rem;
    border-radius: 0.4rem;
    color: #413d3d;
    margin: 0;
    text-decoration: none;
    padding: 0.1rem 0.4rem;
    background: linear-gradient(to top, #d0d0d0b8, #ffb4da8c);
}

span.show_selector span.tags_panel a:hover {
    color: #303;
    background: linear-gradient(to top, #d0d0d0ff, #ffb4daff);
}

span.show_selector span.tags_panel a.tag_on {
    background: linear-gradient(to top, #1fb887, #820a47);
    color: #fff;
}

span.show_selector span.tags_panel a.tag_on:hover {
    background: linear-gradient(to top, #1f9887, #620a47);
    color: #fff;
}

a.list_selected_item {
    color: #f00 !important;
}

a.list_selected_item:hover {
    color: #fff !important;
    background: #f66 !important;
}
.form_select_filter {
    display: inline;
    /* width: 100%; */
    cursor: pointer;
    width: 10rem !important;
/*    width: inherit !important;
*/    /* padding: .375rem 2.25rem .375rem .75rem; */
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    /* border: 1px solid #ced4da; */
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

section .ajax_content {
    /*position: relative;*/
}

div.headers {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 200;
    /*border: solid #00f 0.1rem;*/
    color: #fff;
}

div.headers h1 {
    font-size: 1.3rem;
    font-family:  'Fira Sans', sans-serif;
    color: #fff;
}

div.headers h2 {
    font-size: 1rem;
    font-family:  'Fira Sans', sans-serif;
    color: #fff;
}

/* tags slider */
.search-tags-slider {
    margin: 0 30px;
}
.search-tags-slider a {
    display: inline-block;
    background: #f1f1f1;
    padding: 8px 16px;
    border-radius: 20px;
    margin-right: 20px; 
    text-decoration: none;
    color: #333;
    font-size: 14px;
    white-space: nowrap;
  }

  .search-tags-slider a:last-child {
    margin-right: 0;
  }

  .search-tags-slider .slick-prev,
  .search-tags-slider .slick-next {
    border-radius: 50%;                     
    width: 30px;
    height: 30px;
    z-index: 1;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.search-tags-slider .slick-prev:before,
.search-tags-slider .slick-next:before {
    color: #dc3545 !important;              
    font-size: 20px;
    opacity: 1;
    line-height: 1;
}

.search-tags-slider .slick-prev {
  left: -40px; 
}

.search-tags-slider .slick-next {
  right: -40px; 
}