/* festral) */
@import url('https://fonts.googleapis.com/css2?family=Lora&family=Open+Sans&family=PT+Sans&family=PT+Serif&family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css?family=Muli:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

@font-face {
    font-family: "DuoDunkel"; 
    src: url("../../fonts/Dunkel/DuoDunkel.ttf") format("truetype"); 
    font-style: normal; 
    font-weight: 400; 
  } 

  @font-face {
    font-family: "D3Biscuitism"; 
    src: url("../../fonts/D3/D3Biscuitism.ttf") format("truetype"); 
    font-style: normal; 
    font-weight: 400; 
  } 

/*
font-family: 'Inter', sans-serif;
font-family: 'Noto', sans-serif;
font-family: 'Muli', sans-serif;
font-family: 'Lora', sans-serif;
font-family: 'Roboto', sans-serif;
font-family:  Arial, 'Helvetica CY', 'Nimbus Sans L', sans-serif;
    color: #3f4044; /фон
    color: #5c5d61; /блок
    color: #b1b1b2; /текст

*/

:root {
/* --main-width: 1200px; */
--main-width: 100%;
--max-w: 100ww;
--max-h: 100vh;
--box-w: 1240px;
--head-h: 64px;
--sidebar-l: 200px;
--sidebar-r: 200px;

/* color */
--main-bg: #E5F0FF;
--main-bg-alt: #eeeeee;
--main-div: white;
--main-div-alt: white;

--main-bg-dark: #181818;
--main-bg-dark-alt: #333030;
--main-div-dark: #494949;
--main-div-dark-alt: #212121;

--bg-primary: #fe521a;
--bg-primary-500: #f25122;

--bg-secondary: #776AF1;
--bg-secondary-100: #6583fe;
--bg-secondary-500: #776AF1;
--bg-secondary-800: #2626bc;

--bg-alt: #8a1dd7;
--bg-errs: red;
--bg-warn: yellow;
--bg-done: green;

/* line-height*/
--lh-normal: normal;
--lh-0: 0px;
--lh-100: calc(100% *1.4);

/* color */
--color-zag: #373737;
--color-text: #161414;
--color-p: #3f3f3f;
--color-text-invert: #ffffff;
--color-div: #636363;
--color-primary: #ffa500;
--color-secondary: #776AF1;
--color-alt: #8a1dd7;
--color-errs: red;
--color-warn: yellow;
--color-done: green;

/* numer */
--start-num: 15px;

/* font-family */
--font-main: 'Montserrat';
--font-main-alt: 'Roboto', sans-serif;


/* font-size */
--fz-em: 10px;
--fz-info: 12px;
--fz-text: 14px;
--fz-name: 18px;
--fz-zag: 36px;

/* gradient */
--grd-main: linear-gradient(134.67deg, #dddddd 3.33%, #f9f9f9 100%);
--grd-main-color: linear-gradient(315deg, #4943AA, #7872D6);

/* shadow */
 --shadow-0: 0px 0px 0px rgb(0 0 0 / 0%);
 --shadow-10: 0px 0px 10px rgb(0 0 0 / 10%);
 --shadow-15: 0px 0px 15px rgb(0 0 0 / 15%);
 --shadow-hover: 0px 0px 20px rgb(0 0 0 / 20%);

 --box-shadow-l: 0px 0px 10px rgb(135 135 135 / 50%);
 --box-shadow-d: 0px 0px 15px #00000065;

 /* border-radius */
 --br-main: 8px;
 --br-alt: 15px;
 --br0: 0px;
 --br4: 4px;
 --br8: 0px;
 --br10: 10px;
 --br15: 15px;
 --br30: 30px;
 --br100: 100px;
 --borderWidth: 5px;

 /* rem */
--rem: 16;

 /* margin */

 /* filter */
 --fill-violet: invert(49%) sepia(89%) saturate(2249%) hue-rotate(221deg) brightness(98%) contrast(95%);
 --fill-white: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(500%);
 --fill-orange: invert(79%) sepia(31%) saturate(7475%) hue-rotate(1deg) brightness(105%) contrast(102%);
 --fill-black: invert(0%) sepia(0%) saturate(9%) hue-rotate(239deg) brightness(100%) contrast(100%);
 --fill-gold: ;
 --fill-silver: ;
 --fill-bronze: ;
}

@keyframes dropdown {
    0% {
      opacity: 0;
      margin-top: 20px;
    }
    50% {
        margin-top: 10px;
    }
    100% {
      opacity: 1;
      margin-top: 0px;
    }
}

@keyframes spin {
    0% {
      transform: translate3d(0, -50px, 0);
    }
    50% {
      transform: translate3d(0, 40px, 0);
    }
    100% {
      transform: translate3d(0, -50px, 0);
    }
}

@keyframes icon-scale {
	0% {
		font-size: 16px;
	}
	50% {
		font-size: 20px;
	}
	100% {
		font-size: 16px;
	}
}

@keyframes icon-top {
    0% {
      margin-top: 20px;
      opacity: 1;
    }
    20% {
        margin-top: 40px;
        opacity: 0;
    }
    30% {
        margin-top: -40px;
        opacity: 0;
    }
    100% {
        margin-top: 0px;
        opacity: 1;
    }
}

@keyframes icon-right {
    0% {
      margin-left: 40px;
      margin-right: 0px;
      opacity: 1;
    }
    20% {
        margin-left: 50px;
        margin-right: 0px;
        opacity: 0;
    }
    30% {
        margin-left: 0px;
        margin-right: -50px;
        opacity: 0;
    }
    100% {
        margin-left: 0px;
        margin-right: 0px;
        opacity: 1;
    }
}

@keyframes animatedgradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes jenres-icon2 {
    from {
      opacity: 1;
      visibility: visible;
    }
    to {
      opacity: 0;
      visibility: hidden;
    }
}

@keyframes jenres-icon {
    0% {
        top: 65px;
    }
    100%{
        top: 0;
    }
}

@keyframes blinker {
    from { opacity: 1.0; }
    to { opacity: 0.0; }
}
   
@-webkit-keyframes blinker {
    from { opacity: 1.0; }
    to { opacity: 0.0; }
}
  
@keyframes blinker {  
    50% {
        opacity: 0;
    }
}

.blink{
    animation: blinker 2s linear infinite;
}


.rot {
    animation: 2s linear 0s normal none infinite running rot;
    -webkit-animation: 2s linear 0s normal none infinite running rot;
}
@keyframes rot {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rot {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*scrollbar*/
::-webkit-scrollbar {
    width: 5px;
    height: 3px;
}
  
::-webkit-scrollbar:hover {
    width: 10px;
    z-index: 1;
} 

::-webkit-scrollbar-track {
    /* box-shadow: inset 0 0 5px rgb(0, 0, 0); */
    background-color: rgba(109, 109, 109, 0.484);
}

::-webkit-scrollbar-thumb {
    background-color: var(--bg-secondary);
    outline: 0px solid rgb(0, 0, 0);
    border-radius: 6px;
    cursor: pointer;
}

::-webkit-scrollbar-thumb:hover{
    background: var(--grd-main-color);
}

/* */
body {
    width: 100%;
    min-height: 100%;
    min-width: 320px;
	
    font-family: var(--font-main-alt);
    font-size: 14.6px;
    font-weight: 400;
    line-height: normal;
    color: black;

    padding: 0px;
    margin: 0px;
    
    position: relative;
    display: block !important;

    background-color: var(--main-div);
    background-image: url('/images/main-bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6{
    font-family: var(--font-main);
    font-size: inherit;
    font-weight: inherit;
    position: relative;
    margin: 0px;
}

.h1, .h2, .h3{
    font-size: calc(100% + 10px);
    font-weight: 700;
    display: flex;
    align-items: center;
    position: relative;
}

.one-line, .one-line a, .one-line a > h1, .one-line a > h2, .one-line a > h3, .one-line a > h4{
    -webkit-line-clamp: 1 !important;
}

.two-line, .two-line a, .two-line a > h1, .two-line a > h2, .two-line a > h3, .two-line a > h4{
    -webkit-line-clamp: 2 !important;
}

.three-line, .three-line a, .three-line a > h1, .three-line a > h2, .three-line a > h3, .three-line a > h4{
    -webkit-line-clamp: 3 !important;
}

.show-mob{
    display: none !important;
}

.r-dot {
    margin: 0px 0px 0px -3px;
}

.micons{
    transition: all 0.35s;
}

.micons:hover{
    transition: all 0.35s;
}

.anim-arrow{
    display: flex;
    align-items: center;
    gap: 0px;
    cursor: pointer;
}

.anim-arrow span{
    font-size: calc(100% - 5px);
    margin-left: 0px;
    line-height: 0;
    transition: 0.2s all ease-out;
}

.anim-arrow:hover span{
    margin-left: 5px;
}

.no-view{
    visibility: hidden;
    height: 0px;
    width: 0px;
    margin: 0px;
    margin: 0px;
    display: none !important;
}

.strike-list{
    padding: 15px;
    background-color: #00000012;
    gap: 10px;
    display: flex;
    flex-direction: column;
    border-radius: var(--main-alt);
}

.triangle{
    position: absolute;
    top: 5px;
    right: 15px;
    font-size: calc(100% + 15px);
    z-index: 0;
    color: var(--color-text-invert);
}

.star-wrapper{
    display: flex;
    gap: 4px;
    font-size: 16px;
}

.rates-item{
    display: flex;
    gap: 5px;
}

.fi-sr-star{
    color: #ff5400;
}

.w100{
    width: 100%;
}

.w50{
    width: 50%;
}

.w33{
    width: 33.33333%;
}

.w20{
    width: 20%;
}

.add-likes{
    color: var(--bg-primary) !important;
    opacity: 1 !important;
}

.dot-var{
    display: flex;
}

.dott{
    background-color: var(--bg-primary);
    padding: 4px;
    border-radius: 50%;
    display: none;
}

.col-rev{
    flex-direction: column-reverse !important;
}

.fbtw{
    width: 100% !important;
    justify-content: space-between !important;
}

.sticky{
    position: sticky;
    top: 58px;
    background-color: var(--main-div);
    z-index: 1;
    margin: 0px 0px 0px -15px;
    width: calc(100% + 30px);
    padding: 10px 15px;
}

.not-save{
    position: sticky !important;
    bottom: 5px;
    flex: 1;
    background-color: var(--main-div);
    width: 100%;
}

/* z-index */
.i0{
    z-index: 0;
}


.x2col{
    display: flex;
    gap: 15px;
}

.x2col > div{
    width: calc((100% / 2) - 5px) !important;
}

.f3f4{
    background: linear-gradient(0deg, #3d3d3d, #7074ad, #3d3d3d) !important;
    color: white  !important;
}

.d-flex{
    display: flex;
}

.d-wrap{
    flex-wrap: wrap;
}

.gap, .gap-10, .gap-15{
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.gap-5{
    gap: 5px;
}

.gap-10{
    gap: 10px;
}

.gap-15{
    gap: 15px;
}

.apps-icon{
    display: flex;
    gap: 5px;
    flex-direction: column;
}

.apps-icon a{
    flex: 1;
    background-color: black;
    border-radius: 12px;

    border: 2px solid #776af1;
    box-shadow: var(--box-shadow-l);
    position: relative;
}

.apps-icon a img{
    border-radius: inherit;
}

.apps-icon.min{
    flex-direction: row;
    gap: 5px;
}

.apps-icon a.qr-ls{

}

.apps-icon .qr-ls div{
    display: none;
}

.apps-icon .qr-ls:hover div{
    display: flex;
    position: absolute;
    right: 0px;
    bottom: 35px;
    width: calc(var(--sidebar-r) - 30px);
    border-radius: 15px;
    padding: 10px;
    background-color: #ffffff;
    border: 4px solid;
}

.social-btn{
    display: flex;
    gap: 5px;
}

.social-btn img{

}

.fi-ss-cross-small:before {
    font-size: calc(100% - 5px);
    font-weight: bold;
    transition: 0.2s all ease-out;
}

.fi-ss-cross-small:hover:before {
    transform: rotate(90deg);
}

.full{
    width: 100%;
}

.full > button{
    width: 100%;
}

.mask{
    display: none;
    z-index: 2;
}

.mask:before{
    content: '';
    position: absolute;
    /* background-color: #00000024; */
    /* background: linear-gradient(90deg, #000000a3, #00000029); */
    background-color: #0000006e;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}


.tab-content{
    width: 100%;
}

.gap-15{
    gap: 15px;
}

img{
    width: 100%;
}

a{
    text-decoration: none;
    color: inherit;
}

a:hover{
    color: inherit;
}

a > img{
    opacity: 1 !important;
}

a.btn{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: var(--br-main);
    width: fit-content;
}

a.btn:hover{
    opacity: 0.8;
}

p{
    line-height: calc(100% + 5px);
    letter-spacing: 0.2px;
    margin: 0px;
    /* opacity: 0.8; */
    word-break: break-word;
    color: #000000d4;
}

p a{
    text-decoration: underline;
}

.white p{
    color: white;
}

p.white{
      color: white;  
}

b, strong{
    font-weight: 500;
}

em{
    font-size: calc(100% - 3px);
    font-weight: normal;
    opacity: 0.8;
}

ul, ol{
    margin: 0px;
    padding: 0px;
    width: auto;
}

li{
    list-style: none;
}

ol li {
    list-style: decimal;
    margin-left: 25px;
    margin-bottom: 5px;
}

i.fi{
    line-height: 0;
}

.mt-15{
    margin-top: var(--start-num);
}

#wrapper{
    width: 100%;
    max-width: 100%;
    display: flex !important;
    flex-wrap: wrap;
    background-color: inherit;
    margin: 0 auto;

    height: 100%;
    min-height: 100vh;
}

.box-wrapper #wrapper{
    max-width: var(--box-w) !important;
    width: 100%;
}

.rotate-x i{
    transform: rotate(45deg);
}

.bg-img{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.bg-full{
    width: calc(100% + 30px);
    margin: -15px 0px 0px -15px;
}

.row-reverse{
    flex-direction: row-reverse;
}

.zzzzzzz{
    display: flex;
    gap: 15px;
}

.zzzzzzz > div{
    flex: 1;
    max-width: 100%;
    min-width: 0;
}

.zzzzzzz > div:nth-child(1){
    flex: 1;
}

.zzzzzzz > div:nth-child(2){
    flex: 6;
}

.list-checks li{
    align-items: center;
    display: flex;
    font-weight: 400;
}

.list-checks li > i{
    margin-right: 5px;
}

.ul-column{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    height: fit-content;
}

.ul-column > li{
    width: 100%;
    display: flex;
    position: relative;
    align-items: center;
    transition: 0.4s all ease-out;
}

.ul-column > li:after{
    opacity: 0;
}

.ul-column > li:hover:after{
    content: '';
    padding: 3px;
    position: absolute;
    left: 0;
    background-color: var(--bg-secondary);
    border-radius: 50%;
    opacity: 1;
}

.ul-column > li.zag{
    margin: 0px;
}

.ul-column > li > a{
    padding: 0px;
    width: 100%;
    color: inherit;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    transition: 0.4s all ease-out;
}

.ul-column > li > a > div{
    padding: 0px 8px;
    border-radius: var(--br-main);
    font-size: 14px;
}

.ul-column > li:hover > a > div{
    background-color: var(--bg-secondary);
    color: white;
}

.ul-column > li > a > span{
    border-radius: var(--br-main);
    display: flex;
    align-items: center;
    flex: 1;
    transition: 0.3s all ease-in;
    margin-left: 0;
    padding-right: 5px;
}

.ul-column > li:hover > a > span{
    margin-left: 10px;
}

.ul-column.three > li{
    width: calc(33% - 15px);
}

.ul-list-book-sales{
    padding-left: 25px;
}

.ul-list-book-sales li{
    list-style: auto;
    padding: 4px 0px;
}

.ul-list-book-sales li > a{
    font-weight: 600;
}

.main-ul-menu{
    display: flex;
    gap: 10px;
    font-weight: 500;
    padding: 15px;
    border-radius: 15px;
    box-shadow: var(--shadow-15);
    justify-content: space-around;
    margin-bottom: -20px;
    overflow: auto;
}

.main-ul-menu li{

}

.main-ul-menu li > a{
    padding: 0px 0px;
    gap: 7px;
    display: flex;
    align-items: center;
    opacity: 0.7;
}

.main-ul-menu li > a > i{
    font-size: 18px;
}

.main-ul-menu li > a:hover{
    opacity: 1;
}

.btn-item{
    gap: 5px;
}

.btn-item b, .btn-item .r-dot{
    display: none;
    gap: 5px;
}

.btn-item a{
    padding: 4px 6px;
    border-radius: var(--br-alt);
    font-size: calc(100% - 2px);
    background-color: #eeeeee;
}

.btn-item a:hover{
    background-color: var(--bg-secondary);
    color: white;
    opacity: 1;
}

/* accordion */
.accordion-item{
    color: black;
}

.accordion-button{
    color: inherit;
    background: var(--main-div);
}

.accordion-button:not(.collapsed){
    color: inherit;
    font-weight: 600; 
}

.page-item.disabled .page-link {
    color: inherit;
    pointer-events: none;
    background-color: inherit;
    border-color: transparent;
}

/*  */
.offcanvas{
    background-color: var(--main-bg);
}

.offcanvas-header {
    position: relative;
    background-color: var(--main-div);
}

.offcanvas-body{
    background-color: var(--main-bg);
    padding: 15px;
    overflow-y: auto;
    gap: 15px;
    display: flex;
    flex-direction: column;
}

.offcanvas-header h2, .offcanvas-header h4, .offcanvas-header h5{
    font-weight: 800;
}

.offcanvas-start .offcanvas-header {
    padding: 15px 15px;
}

.offcanvas-start .offcanvas-header > button{
    background-color: var(--bg-secondary);
    color: white;
}

.fi{
    font-family: 'uicons-regular-rounded';
}


.videocover{

}

.videocover .video-element{
    position: absolute;
    z-index: -1;
    display: none;
}

.videocover:hover{

}

.videocover:hover img{
    position: absolute;
    z-index: -1;
}

.videocover:hover .video-element{
    position: relative;
    z-index: auto;
    display: flex;
}

.video-element {
    width: -webkit-fill-available;
    max-width: 100%;
    background: black;
    object-fit: cover;

    border-radius: inherit;
    overflow: auto;
}

.video-element video{
    width: -webkit-fill-available;
    max-width: inherit;
    object-fit: cover;
}

/*  */
.mobile-menu-icon{
    display: flex;
}

.noscroll{
    overflow: hidden;  
}

.no-scroll{
    overflow: hidden;
}

.mobile-only{
    display: none !important;
}

.pc-only{
    display: flex !important;
}

.in-web{
    display: flex;
}

.in-app{
    display: none;
}

.space-between{
    display: flex;
    justify-content: space-between;
    gap: 5px;
}

.space-between > div{
    display: flex;
    align-items: center;
}

.space-between > div.cnt-d-column{
    display: flex;
    align-items: start;
    flex-direction: column;
    gap: 10px;
}


.space-between > div > button{

}

.showin{
    display: flex !important;
    transition: all 0.4s ease-in-out;
    height: auto;
}

.hidein{
    display: none !important;
    transition: all 0.4s ease-in;
    height: 0px;
}

.z-auto{
    z-index: auto;
}

.bluring{
    filter: blur(15px);    
}

.in-mask:before {
    content: "";
    width: 100%;
    height: 100%;
    background: #00000036;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    position: absolute;
    z-index: 1;
    transition: all 200ms ease;
    filter: blur(0px);
}

.in-mask-mob:before {
    content: "";
    width: 100vw;
    height: 100%;
    background: #0000005c;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 5;
    transition: all 200ms ease;
    display: none;
}

.mask-mobile:before {
    content: "";
    width: 100vw;
    height: 100%;
    background: #0000005c;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 5;
    transition: all 200ms ease;
    display: none;
}

.in-mask header, .mbtm-m header{
    z-index: auto !important;
}

.in-mask .mobile-bottom, .mbtm-m .mobile-bottom{
    display: none !important;
}

/* anim-menu */
.anim-menu{
    width: fit-content;
    display: flex;
    height: 44px;
    border-radius: 30px;
    overflow: hidden;
    padding: 2px;
    gap: 2px;
}

.anim-menu > a{
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    height: 100%;
    display: flex;
    border-radius: inherit;
    overflow: hidden;
    align-items: center;
    justify-content: left;
    background-color: #ffffff;
    transition: all 400ms ease-in-out;
    cursor: pointer;
}

.anim-menu > a > i{
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    display: flex;
    border-radius: inherit; 
    align-items: center;
    justify-content: center;
}


.anim-menu > a > div{
    position: relative;
    width: 0px;
    opacity: 0;
    padding: 0px 10px 0px 0px;
    margin: 0 0px 0 -10px;
    overflow: hidden;
    transition: all 200ms ease;
}

.anim-menu > a > div > span{
    width: max-content;
    display: flex;
    flex-wrap: nowrap;
}

.anim-menu > a:hover{
    width: 150px;
    background-color: var(--bg-secondary);
    color: white !important;
    max-width: fit-content;
    gap: 5px;
    flex: auto;
}

.anim-menu a:hover > div{
    width: 100%;
    opacity: 1;
}

/* header */
.header {
    display: flex;
    position: sticky;
    top: 0;
    left: 0;
    flex:1;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1;
    padding: 15px;
    max-height: var(--head-h);
    gap: 20px;
    justify-content: space-between;
    align-items: center;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    align-items: center;
}

.search-open .header-left {
    display: none;
}

.header-center {
    flex: 1;
    display: flex;
    justify-content: end;
}

.reader-body .header-center{
    justify-content: center;
}

.logo{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo img{
    width: 100%;
    height: 44px;
    border-radius: 6px;
}

.logo-img{
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
}

.logo:hover .logo-img img{
    animation: icon-top 0.4s;
}

.logo-name{
    flex-direction: column;
    display: flex;
    gap: 1px;
}

.logo:hover{
    color: white;
}

.logo-name > span{
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 1.5px;
}

.logo-name em{
    font-size: 10px;
    font-style: normal;
    font-weight: normal;
}

.catalog-btn {
    background-color: var(--bg-secondary) !important;
    color: white;
    padding: 10px 20px;
    height: 44px;
}

.catalog-btn:hover, .menu-open .catalog-btn, .menu-open .catalog-btn:hover  {
    background: var(--bg-primary) !important;
    color: white;
}

.catalog-btn i{
    font-size: calc(100% + 3px);
}

.search-form{
    display: flex;
    flex: 1;
    max-width: 500px;
    position: relative;
    z-index: 2;
    transition: 0.3s ease-in;
    align-items: center;
    border: 0px solid transparent;
    padding-right: 2px;
    background-color: var(--main-bg);
}

.search-open .search-form{
    max-width: 100%;
    border: 2px solid var(--bg-secondary);
    border-radius: var(--br-alt);
    width: 100% !important;
    min-width: 100% !important;
}

.search-input {
    width: 100%;
    padding: 10px 15px;
    border: 0px solid transparent;
    border-radius: var(--br-alt);
    font-size: calc(100% + 1px);
    outline: none;
    transition: all 0.3s;
    height: 44px;
    background-color: var(--main-bg);
}


.search-btn {
    position: absolute;
    right: 0px;
    top: 0px;
    background-color: var(--bg-secondary);
    color: white;
    border: none;
    border-radius: var(--br-alt);
    padding: 10px 15px;
    cursor: pointer;
    height: 100%;
}

.search-form:hover .search-btn{
    color: white;
    opacity: 0.7;
}

.search-form .b-search-find{
    border-radius: calc(var(--br-main) + 4px);
}

.search-form:hover .search-btn:hover{
    opacity: 1;
}

.search-btn-close{
    box-shadow: var(--shadow-0);
    padding: 10px;
    height: 30px;
    width: 30px;
    margin-right: 5px;
    background-color: transparent;
}

.search-btn-close:hover{
    box-shadow: var(--shadow-0);
    background-color: transparent;
}

.h-search-result{
    width: calc(100% - 30px);
    position: absolute;
    top: calc(var(--head-h) + 15px);
    left: 15px;
    z-index: 1;
    background: var(--main-div);
    border-radius: var(--main-alt);
    padding: 15px;
    max-height: calc(100vh - 100px);
    display: none;
}

.search-open .h-search-result{
    display: flex;
    width: calc(100% - var(--sidebar-r) - 30px);
    border-radius: var(--br-main);
    justify-content: center;
}

.h-search-result .content_tab{
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow: auto;
}

.item-bottom-search{
    position: sticky;
    bottom: 0;
    align-items: center;
    justify-content: center;
    text-align: center;
    display: flex;
    background: linear-gradient(1deg, var(--main-div), transparent);
}

.h-search-result .content_tab .sticky{
    top:0;
}

.h-search .tab-content>.active {
    max-height: 450px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.header-right {
    display: flex;
    gap: 2px;
    align-items: center;
    width: calc(var(--sidebar-r) - 30px);
    justify-content: end;
}

.reader-body .header-right {
    width: fit-content;
}

.header-icon {
    color: #333;
    font-size: 20px;
    cursor: pointer;
    position: relative;
    width: 44px;
    height: 44px;
    padding: 15px;
}

.cart-count {
    position: absolute;
    top: 0px;
    right: 0px;
    background: var(--bg-secondary);
    color: white;
    border-radius: var(--br-alt);
    width: auto;
    height: 18px;
    font-size: calc(100% - 3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5.63px;
}

.h-user{
    display: flex;
    justify-content: end;
    gap: 5px;
    padding: 0px 20px;
    position: sticky;
    z-index: 4;
    margin-top: -50px;
    top: 0;
}

/* Каталог меню */
.catalog-menu {
    position: sticky;
    background: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 0px;
    z-index: 2;
    display: none;
    width: var(--box-w);
    height: 70vh;
    top: var(--head-h);
    margin-left: -200px;
}

.catalog-menu::-webkit-scrollbar, .submenu::-webkit-scrollbar {
    width: 0px;
    border-radius: 15px
}

.catalog-menu.active {
    display: block;
}

.catalog-menu-list {
    list-style: none;
    height: 100%;
    background-color: #191818;
    width: var(--sidebar-l);
    padding: 15px 0px;
}

.catalog-menu-item {
    width: 100%;
    padding: 0px 15px;
}

.catalog-menu-item.active > a{
    background: var(--bg-secondary);
}

.catalog-menu-link {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    color: white;
    text-decoration: none;
    transition: all 0.3s;
    border-radius: var(--br-alt);
    gap: 10px;
}

.catalog-menu-item:hover > a {
    background: var(--bg-secondary);
    color: white;
}

.catalog-menu-link > span{
    flex: 1;
}

.catalog-menu-link .fi-rr-angle-right{
    font-size: 12px;
}

.catalog-menu-head{
    height: var(--head-h);
    display: none;
    padding: 15px;
    gap: 15px;
    justify-content: space-between;
    align-items: center;
    font-size: calc(100% + 4px);
    font-weight: 700;
    background-color: var(--bg-secondary);
    color: white;
}

.catalog-menu-head button{
    background-color: transparent;
    color: white;
    font-size: 14px;
}

.submenu{
    position: absolute;
    top: 0;
    width: -webkit-fill-available;
    height: -webkit-fill-available;
    background: white;
    border-radius: 0;
    display: none;
    padding: 20px;
    left: var(--sidebar-l);
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    overflow: auto;
    gap: 15px;
}

.submenu.active{
    display: flex;
}

.submenu > div.elements{
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: calc(33% - 15px);
}

.submenu > div.elements.max{
   min-width: 100%; 
}

.elements.max > ul{
    display: flex;
    flex-wrap: wrap;
    column-gap: 15px;
}

.elements.max > ul > li{
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: calc(33% - 15px);
    max-width: calc(33% - 30px); 
}

.elements a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    margin-left: 0px;
    transition: 0.s all ease-in;
}

.elements li:hover > a{
    margin-left: 5px;
}

.elements a > span{
    flex: 1;
}

.elements a > div{
    border-radius: var(--br-alt);
    min-width: 18px;
    height: 18px;
    padding: 0px 5px;
    font-size: calc(100% - 2px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.elements li:hover > a > div{
    background: var(--bg-secondary);
    color: white;
}

.elements a > i{
    font-size: calc(100% - 4px);;
}

.submenu .catalog-menu-head{
    flex-direction: row-reverse;
    min-width: 100%;
    justify-content: flex-end;
}

.catalog-menu-item:hover .submenu{
    display: flex;
}

.submenu-title {
    font-weight: bold;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}

.submenu-list {
    list-style: none;
}

.submenu-item {
    margin-bottom: 10px;
}

.submenu-link {
    opacity: 0.7;
    text-decoration: none;
    transition: color 0.3s;
}

.submenu-link:hover {
    opacity: 1;
}

/* Затемнение фона */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.overlay.active {
    display: block;
    opacity: 1;
}

/* Мобильная версия */
.mobile-menu-toggle {
    display: none;
    font-size: 24px;
    cursor: pointer;
    z-index: 1002;
}

.mobile-search-toggle {
    display: none;
    font-size: 20px;
    cursor: pointer;
    width: 44px;
    height: 44px;
    box-shadow: var(--shadow-0);
}

.search-open .header,
.menu-open .header{
    z-index: 2;
}

.menu-open .header .header-right,
.menu-open .header .header-center{
    display: none;
}

.search-open .header .header-right{
    visibility: hidden;
}

/* l-sidebar */
.l-sidebar {
    width: var(--sidebar-l);
    min-height: 100%;
    background: var(--main-bg-dark-alt);
    color: white;
    padding: 15px;
}

.l-sidebar > div {
    display: flex;
    position: sticky;
    top: 15px;
    gap: 15px;
    width: 100%;
    overflow-y: auto;
    background: var(--main-bg-dark-alt);
    flex-direction: column;
}

.l-sidebar-app{
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px 0px;
}

.l-sidebar-app img{
    width: 105px;
    height: auto;
    border-radius: 10px;
    padding: 3px;
    background-color: white;
    box-shadow: var(--shadow-d);
    border: 3px solid var(--bg-secondary);
}

/* r-sidebar */
.r-sidebar{
    width: var(--sidebar-r);
    display: flex;
    flex-direction: column;
    gap: 35px;
    flex-shrink: 0;
    margin-top: -5px;
    background-color: var(--main-bg);
    padding: 25px 15px 15px;
}

.r-sidebar .div-item{
    box-shadow: var(--shadow-0);
    background-color: transparent;
    border-radius: 0;
    padding: 0;
}

.r-sidebar .min .item-name{
    font-size: 12px;
}

.r-sidebar .card-user{
    overflow: hidden;
    gap: 5px;
}


.r-sidebar .mini{
    gap: 10px;
    display: flex;
    flex-direction: column;
}

.r-sidebar .mini .card-book .item-descr{
    display: none;
}

.r-sidebar .mini .card-book .item-name > a > h3{
    word-break: break-all;
}

.r-sidebar .item-user-images{
    width: 36px;
    height: 36px;
}

.r-sidebar .banner-contest{
    border-radius: 15px;
    overflow: hidden;
    max-width: 210px;
    margin: 0px auto;
}

.r-sidebar .card-user .item-number, 
.r-sidebar .card-user .item-bottom, 
.r-sidebar .card-user .item-end{
    display: none;
}

.rsb-zag{
    margin: 0px 0px 5px;
    display: flex;
    gap: 5px;
    height: max-content;
    /* 
    flex-direction: row-reverse;
    justify-content: space-between;
    background-color: #776af1;
    padding: 5px 15px 5px 15px;
    border-radius: 8px;
    color: white;
    left: -15px;
    position: relative;
    width: calc(100% + 15px); 
    */
}

.rsb-zag img{
    width: 20px;
    /* margin-right: -5px; */
}

.r-sidebar h5{
    font-size: calc(100% + 1px);
    font-weight: 600;
    margin: 0px;
}

.r-sidebar-action, .r-sidebar-action button{
    width: 100%;
}

.r-sidebar-action button:hover{
    color: white;
    background-color: var(--bg-primary);
}

.div-sticky{
    position: sticky;
    top: calc(var(--head-h) + 15px);
    z-index: 1;
}

.r-sidebar .item-user-info{
    text-align: left !important;
    margin: 0px !important;
    padding: 0px !important;
}


/* my-progress */
.my-progress {

}

.my-progress .progress-name{
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.my-progress .progress-name > div{
    width: fit-content;
    display: flex;
    gap: 3px;
}

/* navi */
.navi{
    width: 100%;
    height: calc(100vh - 90px);
    overflow-y: auto;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    position: sticky;
    top: 5px;
}

.navi .lk, .navi .site{
    width: 100%;
} 

body.side-lk .navi.lk,
body.side-site .navi.site{
    display: flex;
}

body.side-lk .l-sidebar .site,
body.side-site .l-sidebar .lk{
    display: none;
}

.navi .form-switch .form-check-input{
    height: 18px !important;
    min-width: 28px;
}

.navi::-webkit-scrollbar {
    width: 0px;
    border-radius: 15px
}

.navi-level, .nav-drop{
    width: 100%;
    gap: 0px;
    display: flex;
    flex-direction: column;
}

.header-drop-menu .zag{
    padding: 5px 0px 0px;
    font-size: calc(100% + px);
    opacity: 0.5;
    font-weight: 600;
}

.navi-level i, .nav-drop i{
    line-height: 0;
    font-size: calc(100% + 2px);
}

.navi-level i.fi-rr-angle-right, 
.nav-drop i.fi-rr-angle-right{
    font-size: calc(100% - 4px);
}

.navi-level span, 
.navi div, .navi em{
    line-height: normal;
}

.navi-level span{
    flex: 1;
}

.navi-level > li, 
.nav-drop > li{
    width: 100%;
    font-weight: 500;
    position: relative;
}

.navi-level > li > a, 
.nav-drop > li > a{
    display: flex;
    padding: 10px 0px 10px 5px;
    align-items: center;
    border-right: 2px solid transparent;
    gap: 5px;
    opacity: 0.8;
    border-radius: var(--br-alt);
    width: 100%;
}

.navi-level > li > a > span, 
.nav-drop > li > a > span{
    width: 100%;
    transition: 0.2s all ease-out;
}

.navi-level > li > a:hover, 
.nav-drop > li > a:hover{
    opacity: 1;
}

.nav-drop > li > a:hover{

}

.navi-level > li > a:hover > span, 
.nav-drop > li > a:hover > span{
    opacity: 1;
    margin-left: 2px;
}

.navi-level > li > a.active, 
.navi-level > li:hover a.active{
    opacity: 1;
    border: 0px;
}

.navi-level > li > a.active .dot-var .fi, 
.navi-level > li:hover a.active .dot-var .fi{
    display: none;
}

.navi-level > li > a.active .dot-var .dott, 
.navi-level > li:hover a.active .dot-var .dott{
    display: flex;
}

.navi-level > li.zag {
    padding: 0px 0px 15px;
    font-size: calc(100% + 0px);
}

.navi-level.no-style > li > a{
    padding: 10px 0px;
    flex: 1;
}

.navi-level .navi-level-body{
    display: none;
    position: absolute;
    bottom: 36px;
    height: fit-content;
    padding: 8px 0px;
    background-color: black;
    border-radius: var(--br-alt);
    width: 100%;
    transition: 0.3s all ease-out;
}

.navi-level > li:hover .navi-level-body{
    display: flex;
    position: absolute;
}

.navi-level.drop > li > a > i.fi-rr-angle-right{
    transition: 0.2s all ease-out;
}

.navi-level.drop > li:hover > a > i.fi-rr-angle-right{
    transform: rotate(-90deg);
}


.navi-level-body .navi-level > li > a{
    padding: 5px 10px;
}


.nav-drop.grid{
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0px;
}

.nav-drop.grid > li{
    width: calc((100% / 4) - 0px);
}

.nav-drop.grid > li > a{
    flex-direction: column;
    padding: 5px 10px;
    gap: 5px;
    /* border: 2px solid transparent; */
    opacity: 0.6;
}

.nav-drop.grid > li:hover > a{
    /* border-color: var(--bg-secondary); */
    opacity: 1;
}

.nav-drop.grid > li > a > i{
    font-size: calc(100% + 4px);
}

.noicon i{
    display: none;
}

/*  */
.navi-level .anim-menu{
    height: 36px;
    position: relative;
}

.navi-level .anim-menu > a{
    background-color: inherit;
    z-index: 0;
}

.navi-level .anim-menu > a:hover{
    left: 0;
    background-color: red;
    position: relative;
}

/* tab-menu */
.tab-menu{
    width: 100%;
}

.tab-menu li{
    width: fit-content;
}

.tab-menu a{
    padding: 10px 15px;
    opacity: 0.5;
    line-height: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    font-weight: 600;
    background-color: transparent;
    border-color: transparent;
    border-style: solid;
    border-width: 0 0 5px 0;
}

.tab-menu span{
    width: 100%;
    line-height: normal;
    flex-wrap: nowrap;
    display: flex;
    gap: 4px;
}

.tab-menu a.active{
    border-color: var(--bg-secondary);
    opacity: 1;
}

.tab-menu a:hover{
    opacity: 1;
}

.tab-content > .active {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* header-drop */
.header-drop{
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.header-drop > a{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 6px;
    height: 44px;
    width: 44px;
    font-size: 20px;
    opacity: 0.5;
    align-items: center;
    justify-content: center;
    border-radius: var(--br-alt);
}

.header-drop > a > img{
    width: 30px;
    height: 30px;
    border-radius: var(--br-main);
    opacity: 1;
}

.header-drop > a > span{
    font-size: calc(100% - 0px);
    font-weight: 500;
}

.header-drop:hover > a{
    /* background-color: var(--bg-secondary);
    color: white; */
    opacity: 1;
}

.header-drop:hover > a::before{
    content: '';
    height: 30px;
    position: absolute;
    bottom: -20px;
    width: 100%;
    background-color: #ff000000;
    right: 0;
    z-index: 10;
}

.header-drop-menu{
    position: absolute;
    z-index: 2;
    width: 200px;
    animation: dropdown 200ms ease-in-out forwards;
    display: none;
    flex-direction: column;
    background-color: var(--main-div);
    border-radius: var(--main-alt);
    border-top: 3px solid var(--bg-secondary);
    box-shadow: var(--shadow-l);
    top: 50px;
    gap: 10px;
    padding: 10px;
    border-radius: var(--br-alt);
}

.header-drop:hover .header-drop-menu{
    display: flex;
}

.header-drop-menu.login-panel{
    right: 0;
}

.header-drop-menu.login-panel .triangle{
    right: 5px;
}

.header-drop:nth-last-child(1) .header-drop-menu{
    right: -10px;
}

.header-drop-menu .triangle{
    font-size: 30px;
    color: var(--bg-secondary);
    top: -20px;
    right: calc(50% - 14px);
    z-index: 0;
    transform: rotate(180deg);
}

.header-drop:nth-last-child(1) .header-drop-menu .triangle{
    right: 12px;
}

.header-drop-menu.activated{
    display: flex;
}


/* main-content */
.contents{
    position: relative;
    display: flex;
    z-index: 0;
    margin: 0px auto 0;
    min-height: 100vh;
    max-width: calc(100% - var(--sidebar-l));
    width: 1040px;
    flex-direction: column;
    z-index: auto;
}

.box-wrapper .contents{
    width: calc(100% - var(--sidebar-l));
    /* margin-left: var(--sidebar-l); */
}

/* mobile-bottom-nav */

.mbm-container{
    height: 60px;
    width: 100%;
    background: transparent;
    display: flex;
}

.mobile-bottom{
    width: 100%;
    height: 60px;
    background-color: var(--main-div);
    display: none;
}

.mobile-bottom-nav{
    width: 100%;
    height: var(--head-h);
    background-color: var(--main-div);
    position: fixed;
    z-index: 1;
    bottom: 0;
    top: auto;
    transition: 0.2s ease-in;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0px;
    box-shadow: 0px 0px 0px #00000078;
    margin: 0px 0px 0px 0px;
    /* padding: 10px 0px; */
}

.search-open .mobile-bottom-nav, 
.menu-open .mobile-bottom-nav, 
.drop-open .mobile-bottom-nav, 
.mtab-open .mobile-bottom-nav,
.user-panel-open .mobile-bottom-nav
{
    display: none;
    margin: 0px 0px -100vh 0px;
}

.mobile-bottom-nav > a{
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px 0px;
    height: auto;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    position: relative;
    gap: 5px;
}

.mobile-bottom-nav > a.active{
    opacity: 1;
}

.mobile-bottom-nav > a .new-notify{
    padding: 3px;
    border: 0px;
    right: 30px;
    top: -3px;
}

.mobile-bottom-nav > a img{
    width: 20px;
    margin: -4px 0px -1px;
    border-radius: 9px;
    border: 2px solid white;
    align-items: center;
    display: flex;
}

.mobile-bottom-nav > a span{
    font-size: calc(100% - 2px);
    line-height: initial;
    text-align: center;
}

.mobile-bottom-nav > a i,
.mobile-bottom-nav > a span{
    opacity: 0.6;
}

.mobile-bottom-nav > a:hover i, 
.mobile-bottom-nav > .active i{
    color: var(--bg-secondary);
    opacity: 1;
}

/* tabs */

.content_tab{
    width: 100%;
}

.tab-link{
    display: flex;
    align-items: center;
    position: relative;
    width: max-content;
    font-size: calc(100% - 0px);
}

.tab-link > i {
    margin-right: 4px;
}

.tab-link:before{
    content: '';
    width: 100%;
    position: absolute;
    height: 2px;
    background: transparent;
    bottom: 0;
    left: 0;
}

.tab-link.active{
    background: orange;
    color: var(--color-text-invert);
}

.tab-link.active .label{
    background: #00000026;
}

.tab-link.active:before{
    background: black;
}

/*  */
.item-bookmark{
    position: relative;
}

.item-bookmark_nav{
    display: none;
    position: absolute;
    top: 30px;
    left: 0;
    width: max-content;
    background: white;
    padding: 5px;
    height: fit-content;
    flex-direction: column;
    box-shadow: var(--box-shadow-l);
    border-radius: var(--br-alt);
}

.item-bookmark_nav.active{
    display: flex;
}

.item-bookmark_nav span{
    display: flex;
    padding: 4px 0px;
}

.content img {
    width: unset;
}

.border-c-primary {
    border-color: #fe521a !important;
}

/* banner */

.b-coockie{
    width: 100%;
    position: fixed;
    z-index: 5;
    left: 0;
    right: 0;
    bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 15px;
    margin: 0px auto;
    display: flex;
    justify-content: center;
    color: white;
    font-size: 14px;
}

.b-coockie form{
    background: linear-gradient(45deg, #3f3c3c, #3a61ff);
    padding: 15px;
    display: flex;
    box-shadow: var(--box-shadow-l);
    border-radius: var(--br-main);
    max-width: 1015px;
    width: 100%;

    gap: 15px;
    justify-content: space-between;
    align-items: center;
}

.box-wrapper .b-coockie{
    max-width: var(--box-w);
    width: 100%;
}

.box-wrapper .b-coockie{
    padding-left: calc(var(--sidebar-l) + 15px);
    padding-right: 15px;
    justify-content: flex-start;
}

.box-wrapper .b-coockie form{
    max-width: calc(100% - ((var(--sidebar-l) * 1)));
}

.b-coockie_btn {

}


.b-apps{
    color: white;
    position: fixed;
    top: 0;
    bottom: 0;
    height: 100%;
    z-index: 3;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 430px;
    margin: 0px auto;
    left: 0;
    right: 0;
    width: 100%;
}

.b-apps:before{
    content: '';
    background: rgb(0 0 0 / 79%);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.b-apps_close{
    position: fixed;
    top: 20px;
    right: 20px;
}

.b-apps_close button{
    height: 40px;
    border-radius: 40px;
}

.b-apps.card-alert .item-images{
    max-height: 65%;
    width: 360px;
    margin-bottom: 20px;
}

.qr-app{
    width: 120px;
    border-radius: var(--br-alt);
    box-shadow: var(--box-shadow-l);
    background-color: #ffffff;
    padding: 0px 0px;
    overflow: hidden;
}

.qr-app img{
    width: 100%;
    max-width: 100%;
}

.b-apps .qr-app{
    position: absolute;
}

.b-apps.card-alert img{
    width: -webkit-fill-available;
    max-width: 300px;
}

.b-apps.card-alert .item-center{
    max-width: 380px;
}

.app-body{
    max-width: 600px;
    align-items: center;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.qr-app-none{
    padding: 0px;
    border: 0px;
    background: transparent;
    color: inherit;
    text-decoration: underline;
    margin-top: 10px;
}

/* sidebar-mini */
.l-min .h-logo, .l-min  .l-sidebar, .l-min  .navi, .l-min .l-sidebar-fake{
    width: 75px;
}

.l-min .h-logo-name, .l-min  .navi-level > li > a > span, .l-min  .navi-level > li > a > div{
    display: none !important;
}

.l-min .top-jenres{
    margin-left: -90px;
}

/* colors */
.colors{

}

.colors div:nth-child(1) .item, .colors .item:nth-child(1){
    background: linear-gradient(to left, #835fef, #682df7) !important;
    color: #fff;
}

.colors div:nth-child(2) .item, .colors .item:nth-child(2){
    background: linear-gradient(45deg, #f93a5a, #f7778c) !important;
    color: #fff;
}

.colors div:nth-child(3) .item, .colors .item:nth-child(3){
    background: linear-gradient(to left, #48d6a8, #029666) !important;
    color: #fff;
}

.colors div:nth-child(4) .item, .colors .item:nth-child(4){
    background: linear-gradient(to left, #efa65f, #f76a2d) !important;
    color: #fff;
}

.colors div:nth-child(5) .item, .colors .item:nth-child(5){
    background: linear-gradient(to left, #5fa2ef, #2d69f7) !important;
    color: #fff;
}

.colors div:nth-child(6) .item, .colors .item:nth-child(6){
    background: linear-gradient(186deg, #ff0000a1, #ffffff) !important;
}

.colors div:nth-child(7) .item, .colors div:nth-child(7){
    background: linear-gradient(186deg, #ff0000a1, #ffffff) !important;
}

.colors div:nth-child(8) .item, .colors .item:nth-child(8){
    background: linear-gradient(186deg, #ff0000a1, #ffffff) !important;
}

.colors div:nth-child(9) .item, .colors .item:nth-child(9){
    background: linear-gradient(186deg, #ff0000a1, #ffffff) !important;
}

.colors div:nth-child(10) .item, .colors div:nth-child(10){
    background: linear-gradient(186deg, #ff0000a1, #ffffff) !important;
}

.colors div:nth-child(11) .item, .colors .item:nth-child(11){
    background: linear-gradient(186deg, #ff0000a1, #ffffff) !important;
}

.colors div:nth-child(12) .item, .colors .item:nth-child(12){
    background: linear-gradient(186deg, #ff0000a1, #ffffff) !important;
}

.ajax-load-slider {
    min-height: 300px;
}

.skeleton-card {
    width: 154px;
    height: 295px;
    background: #f0f0f0;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}

.skeleton-image {
    height: 234px;
    background: #e0e0e0;
}

.skeleton-text {
    height: 14px;
    background: #e0e0e0;
    margin: 8px;
    border-radius: 4px;
}

.skeleton-text.short { width: 60%; }

.skeleton-card::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    100% { transform: translateX(100%); }
}