:root {
    --theme-color: #6c6cee;
    --theme-sub-color: #648ff5;
    --theme-color-1: #5072FF19;
    --theme-color-2: #5072FF4D;
    --theme-color-3: #5072FF66;
    --theme-color-5: #5072FF7F;
    --main-color: #4e5358;
    --main-gd: linear-gradient(135deg, var(--theme-color) 10%, var(--theme-sub-color) 100%);
    --rev-main-color: #f5f6f7;
    --avatar-shadow: rgba(187, 187, 187, 0.5);
    --tooltip-bg: rgba(50, 51, 53, 0.88);
    --text-keep: #fefefe;
    --text-white: #ffffff;
    --text-black: #4e5358;
    --muted-color: #777;
    --muted-2-color: #999;
    --muted-3-color: #b1b1b1;
    --muted-light-color: #eeeeee;
    --muted-light2-color: rgba(238, 238, 238, 0.5);
    --body-bg-color: #f5f6f7;
    --main-bg-color: #fff;
    --muted-medium-color: #ebebeb;
    --main-shadow: 0 0 #0000, 0 0 #0000, 0 15px 20px -5px rgb(0 0 0 / 5%), 0 6px 8px -5px rgb(0 0 0 / 5%);
    --main-shadow2: rgba(116, 116, 116, 0.15);
    --theme-shadow: inset 0 0 4px var(--theme-color-bg), 0 4px 6px -1px var(--theme-color-bg), 0 2px 4px -2px var(--theme-color-bg);
    --main-radius: 8px;
    --slim-radius: 5px;
    --thin-radius: 3px;
    --main-max-width: 1200px;
    --header-max-width: 1200px;
    --blur-bg: rgba(246, 246, 246, 0.5);
    --blur-bg-2: rgba(246, 246, 246, 0.7);
    --blur-bg-3: rgba(246, 246, 246, 0.88);
    --main-blur-bg: rgba(246, 246, 246, 0.7);
    --dim-bg: rgba(255, 255, 255, 0.25);
    --key-color: #333;
    --main-border-color: rgba(119, 119, 119, 0.2);
    --second-border-color: #e3e8f7;
    --muted-border-color: rgba(0, 0, 0, 0.03);
    --main-border: 1px solid var(--main-border-color);
    --muted-box-color: rgba(245, 245, 245, 0.8);
    --muted-box-color-2: rgba(245, 245, 245, 0.5);
    --music-shadow-border: 0 0 rgb(0 0 0 / 0), 0 0 rgb(0 0 0 / 0), 0 2px 12px -2px rgb(0 0 0 / .12), 0 3px 6px -3px rgb(0 0 0 / .1);
    --music-shadow-2: inset 0 0 4px rgba(0, 0, 0, .04), 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .05);
    --header-bg: rgba(255, 255, 255, 0.7);
    --card-bg: rgba(255, 255, 255, 0.8);
    --menu-bg-color: rgba(255, 255, 255, 0.5);
    --posts-grid-scale: 100%;
    --posts-list-scale: 70%;
    --log-cover-scale: 35%;
    --main-margin: 0.938rem;
    --main-margin-5: calc(var(--main-margin) - 5px);
    --bg-white: #fff;
    --blur: saturate(180%) blur(8px);
    --blur2: saturate(5) blur(8px);
    --bs-body-font-size: 0.875rem;
    --bs-body-font-weight: 500;
    --main-radius-2: var(--main-radius) 0 var(--main-radius) 0;
    --main-radius-3: 0 var(--main-radius) 0 var(--main-radius)
}

.dark {
    --key-color: #f8fafc;
    --main-color: #f5f6f7;
    --tooltip-bg: rgba(246, 246, 246, 0.88);
    --rev-main-color: #4e5358;
    --muted-color: #b4b6bb;
    --muted-2-color: #888a8f;
    --muted-3-color: #636469;
    --muted-light-color: #333333;
    --muted-light2-color: rgba(51, 51, 51, 0.5);
    --muted-medium-color: #3a3a3a;
    --body-bg-color: #212121;
    --main-bg-color: #2a2a2b;
    --avatar-shadow: rgba(59, 59, 59, 0.16);
    --main-shadow: 0 1px 2px 0 rgb(34 36 38 / 15%);
    --main-shadow2: rgba(0, 0, 0, 0.3);
    --active-bg: rgba(24, 24, 24, 0.3);
    --blur-bg: rgba(50, 51, 53, 0.5);
    --blur-bg-2: rgba(50, 51, 53, 0.7);
    --blur-bg-3: rgba(50, 51, 53, 0.88);
    --dim-bg: rgba(33, 33, 33, 0.25);
    --main-blur-bg: rgba(50, 51, 53, 0.7);
    --header-bg: rgba(60, 60, 60, 0.7);
    --card-bg: rgba(60, 60, 60, 0.8);
    --menu-bg-color: rgba(75, 75, 75, 0.5);
    --main-border-color: rgba(114, 114, 114, 0.25);
    --second-border-color: #42444a;
    --muted-border-color: rgba(90, 90, 90, 0.2);
    --muted2-border-color: rgba(184, 184, 184, 0.02);
    --muted-box-color: rgba(52, 52, 52, 0.8);
    --muted-box-color-2: rgba(52, 52, 52, 0.5);
    --music-shadow-2: inset 0 0 4px rgba(18, 18, 18, .2), 0 4px 6px -1px rgb(18 18 18 / .5), 0 2px 4px -2px rgb(18 18 18 / .2)
}

[data-bs-theme=dark] {}

.ete-enhance-fps {
    --card-bg: rgba(255, 255, 255, 0.9)
}

.dark .ete-enhance-fps {
    --card-bg: rgba(60, 60, 60, 0.9)
}

::-moz-selection {
    background-color: var(--theme-color-5);
    border-radius: var(--main-radius);
    color: var(--text-white)
}

::selection {
    background-color: var(--theme-color-5);
    border-radius: var(--main-radius);
    color: var(--text-white)
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px
}

::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background-clip: padding-box;
    background-color: var(--theme-sub-color);
    background-image: -webkit-linear-gradient(45deg, hsla(0, 0%, 100%, .4) 25%, transparent 0, transparent 50%, hsla(0, 0%, 100%, .4) 0, hsla(0, 0%, 100%, .4) 75%, transparent 0, transparent)
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--theme-color)
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background-color: rgba(73, 177, 245, .2);
    display: none
}

::-webkit-scrollbar-track-piece {
    display: none
}

::-webkit-scrollbar-corner {
    background: rgba(0, 0, 0, 0)
}

[disabled] {
    cursor: no-drop !important
}

* {
    scrollbar-width: thin;
    letter-spacing: 0.01rem
}

html,
body {
    scroll-behavior: smooth
}

body {
    background: var(--body-bg-color)
}

body.ete-enhance-fps {
    --blur-bg: #ffffff;
    --blur-bg-2: #fff;
    --blur-bg-3: #fff;
    --header-bg: #fff
}

[data-bs-theme="dark"] body.ete-enhance-fps {
    --blur-bg: #2a2a2b;
    --blur-bg-2: #2a2a2b;
    --blur-bg-3: #2a2a2b;
    --header-bg: #2a2a2b
}

body.ete-enhance-fps * {
    -webkit-backdrop-filter: unset !important;
    backdrop-filter: unset !important
}

button {
    background: none;
    border: none;
    cursor: pointer;
    transition: all .2s
}

button:active:not(button.no-down:active, .modal-footer-box button) {
    transform: translateY(3px)
}

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

a:hover .h1,
a:hover .h2,
a:hover .h3,
a:hover .h4,
a:hover .h5,
a:hover .h6,
a:hover h1,
a:hover h2,
a:hover h3,
a:hover h4,
a:hover h5,
a:hover h6 {
    color: var(--theme-color);
    transition: color .3s
}

a[href] {
    transition: all .3s
}

a[href]:not(a.keep-color):hover {
    color: var(--theme-color)
}

ul {
    list-style: none;
    padding: 0
}

dl,
ol,
ul {
    margin: 0
}

ul.use-style {
    list-style: disc
}

ul.use-style li {
    margin-left: 1rem
}

p {
    margin-bottom: var(--main-margin-5)
}

.lh-normal {
    line-height: normal
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: normal !important
}

.cur-a {
    cursor: auto
}

.cur-p {
    cursor: pointer
}

.cur-d {
    cursor: default
}

#main-wrapper {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 100vh
}

.page-wrapper {
    width: 100%;
    transition: .2s ease-in
}

.page-wrapper .container-fluid,
.page-wrapper .container-lg,
.page-wrapper .container-md,
.page-wrapper .container-sm,
.page-wrapper .container-xl,
.page-wrapper .container-xxl {
    transition: .2s ease-in
}

.body-wrapper {
    min-height: calc(100% - 102px);
    margin-top: calc(102px + var(--main-margin) * 2);
    margin-bottom: var(--main-margin);
    margin-left: var(--main-margin);
    margin-right: var(--main-margin)
}

.body-wrapper.header_full {
    margin-top: calc(102px + var(--main-margin))
}

.body-wrapper .container-lg,
.body-wrapper .container-md,
.body-wrapper .container-sm,
.body-wrapper .container-xl,
.body-wrapper .container-xxl {
    padding: 30px
}

@media (max-width:991px) {

    .body-wrapper .container-lg,
    .body-wrapper .container-md,
    .body-wrapper .container-sm,
    .body-wrapper .container-xl,
    .body-wrapper .container-xxl {
        padding: 15px
    }
}

@media (max-width:992px) {
    .body-wrapper {
        margin-top: calc(52px + var(--main-margin) * 2)
    }

    .body-wrapper.header_full {
        margin-top: calc(52px + var(--main-margin))
    }
}

@media (min-width:1200px) {

    .body-wrapper>.container-lg,
    .body-wrapper>.container-md,
    .body-wrapper>.container-sm,
    .body-wrapper>.container-xl,
    .body-wrapper>.container-xxl {
        padding-top: 30px !important
    }
}

.main-min-height {
    min-height: calc(100vh - 200px)
}

.mg-unset {
    margin: unset !important
}

.mg-main {
    margin: var(--main-margin) !important
}

.mg-main-5 {
    margin: var(--main-margin-5) !important
}

.mg0 {
    margin: 0 !important
}

.mg3 {
    margin: 3px !important
}

.mg8 {
    margin: 8px !important
}

.mg6 {
    margin: 6px !important
}

.mg10 {
    margin: 10px !important
}

.mg15 {
    margin: 15px !important
}

.mg20 {
    margin: 20px !important
}

.mr-auto {
    margin-right: auto !important
}

.mr-main {
    margin-right: var(--main-margin) !important
}

.mr-main-n {
    margin-right: calc(-1 * var(--main-margin)) !important
}

.mr0 {
    margin-right: 0 !important
}

.mr1 {
    margin-right: 1px !important
}

.mr2 {
    margin-right: 2px !important
}

.mr3 {
    margin-right: 3px !important
}

.mr8 {
    margin-right: 8px !important
}

.mr6 {
    margin-right: 6px !important
}

.mr10 {
    margin-right: 10px !important
}

.mr15 {
    margin-right: 15px !important
}

.mrn10 {
    margin-right: -10px !important
}

.mr20 {
    margin-right: 20px !important
}

.mr30 {
    margin-right: 30px !important
}

.ml-auto {
    margin-left: auto !important
}

.ml-main {
    margin-left: var(--main-margin) !important
}

.ml-main-5 {
    margin-left: calc(var(--main-margin) - 5px) !important
}

.ml-main-n {
    margin-left: calc(-1 * var(--main-margin)) !important
}

.ml0 {
    margin-left: 0 !important
}

.ml3 {
    margin-left: 3px !important
}

.mln3 {
    margin-left: -3px !important
}

.ml6 {
    margin-left: 6px !important
}

.ml10 {
    margin-left: 10px !important
}

.ml15 {
    margin-left: 15px !important
}

.ml20 {
    margin-left: 20px !important
}

.mt-main {
    margin-top: var(--main-margin) !important
}

.mt-main-5 {
    margin-top: var(--main-margin-5) !important
}

.mt0 {
    margin-top: 0 !important
}

.mt3 {
    margin-top: 3px !important
}

.mt5 {
    margin-top: 5px !important
}

.mt6 {
    margin-top: 6px !important
}

.mt10 {
    margin-top: 10px !important
}

.mtn2 {
    margin-top: -2px !important
}

.mtn10 {
    margin-top: -10px !important
}

.mt15 {
    margin-top: 15px !important
}

.mt20 {
    margin-top: 20px !important
}

.mt30 {
    margin-top: 30px !important
}

.mt60 {
    margin-top: 60px !important
}

@media (max-width:991px) {
    .mt-sm-main {
        margin-top: var(--main-margin) !important
    }

    .mt-sm-main-5 {
        margin-top: var(--main-margin-5) !important
    }
}

@media (max-width:767px) {
    .mt-xs-main {
        margin-top: var(--main-margin) !important
    }

    .mt-xs-main-5 {
        margin-top: var(--main-margin-5) !important
    }
}

.mb-main {
    margin-bottom: var(--main-margin) !important
}

.mb-main-5 {
    margin-bottom: var(--main-margin-5) !important
}

.mb0 {
    margin-bottom: 0 !important
}

.mb3 {
    margin-bottom: 3px !important
}

.mb6 {
    margin-bottom: 6px !important
}

.mbn6 {
    margin-bottom: -6px !important
}

.mb10 {
    margin-bottom: 10px !important
}

.mb15 {
    margin-bottom: 15px !important
}

.mb20 {
    margin-bottom: 20px !important
}

.mb30 {
    margin-bottom: 30px !important
}

.mb50 {
    margin-bottom: 50px !important
}

.mb60 {
    margin-bottom: 60px !important
}

.mb80 {
    margin-bottom: 80px !important
}

.mb90 {
    margin-bottom: 90px !important
}

.mlra {
    margin-left: auto !important;
    margin-right: auto !important
}

.mlrn6 {
    margin: 0 -6px !important
}

.pd0 {
    padding: 0 !important
}

.pr0 {
    padding-right: 0 !important
}

.pd1 {
    padding: 1px !important
}

.pd3 {
    padding: 3px !important
}

.pd5 {
    padding: 5px !important
}

.pd6 {
    padding: 6px !important
}

.pd8 {
    padding: 8px !important
}

.pd10 {
    padding: 10px !important
}

.pd15 {
    padding: 15px !important
}

.pd20 {
    padding: 20px !important
}

.pd30 {
    padding: 20px !important
}

.pd60 {
    padding: 20px !important
}

.pd-main {
    padding: var(--main-margin) !important
}

.pd-main-5 {
    padding: var(--main-margin-5) !important
}

.pt10 {
    padding-top: 10px !important
}

.pt-main {
    padding-top: var(--main-margin) !important
}

.pt-main-5 {
    padding-top: var(--main-margin-5) !important
}

.pb0 {
    padding-bottom: 0 !important
}

.pb10 {
    padding-bottom: 10px !important
}

.pb15 {
    padding-bottom: 15px !important
}

.pb20 {
    padding-bottom: 20px !important
}

.pb25 {
    padding-bottom: 25px !important
}

.pb30 {
    padding-bottom: 30px !important
}

.pb-main {
    padding-bottom: var(--main-margin) !important
}

.pb-main-5 {
    padding-bottom: var(--main-margin-5) !important
}

.pl-main {
    padding-left: var(--main-margin) !important
}

.pl-main-5 {
    padding-left: var(--main-margin-5) !important
}

.pr-main {
    padding-right: var(--main-margin) !important
}

.pr-main-5 {
    padding-right: var(--main-margin-5) !important
}

.pr0 {
    padding-right: 0 !important
}

.pr1 {
    padding-right: 1px !important
}

.pr3 {
    padding-right: 3px !important
}

.pr5 {
    padding-right: 5px !important
}

.pr6 {
    padding-right: 6px !important
}

.pr10 {
    padding-right: 10px !important
}

.pr15 {
    padding-right: 15px !important
}

.pr20 {
    padding-right: 20px !important
}

.pr-main {
    padding-right: var(--main-margin) !important
}

.pr20 {
    padding-right: 20px !important
}

.pl0 {
    padding-left: 0 !important
}

.pl1 {
    padding-left: 1px !important
}

.pl3 {
    padding-left: 3px !important
}

.pl5 {
    padding-left: 5px !important
}

.pl6 {
    padding-left: 6px !important
}

.pl10 {
    padding-left: 10px !important
}

.pl15 {
    padding-left: 15px !important
}

.pl20 {
    padding-left: 20px !important
}

@media (min-width:992px) {
    .pl-lg-main {
        padding-left: var(--main-margin) !important
    }

    .pr-lg-main {
        padding-right: var(--main-margin) !important
    }
}

@media (max-width:767px) {
    .pl-xs-main {
        padding-left: var(--main-margin) !important
    }

    .pr-xs-main {
        padding-right: var(--main-margin) !important
    }
}

.gap1 {
    gap: 1px !important
}

.gap3 {
    gap: 3px !important
}

.gap5 {
    gap: 5px !important
}

.gap6 {
    gap: 6px !important
}

.gap8 {
    gap: 8px !important
}

.gap10 {
    gap: 10px !important
}

.gap15 {
    gap: 15px !important
}

.gap-main {
    gap: var(--main-margin) !important
}

.gap-main-5 {
    gap: var(--main-margin-5) !important
}

.wd-10 {
    width: 10%
}

.wd-15 {
    width: 15%
}

.wd-20 {
    width: 20%
}

.wd-25 {
    width: 25%
}

.wd-30 {
    width: 30%
}

.wd-33 {
    width: 33.33333333%
}

.wd-35 {
    width: 35%
}

.wd-40 {
    width: 40%
}

.wd-45 {
    width: 45%
}

.wd-50 {
    width: 50%
}

.wd-65 {
    width: 65%
}

.wd-66 {
    width: 66.66666667%
}

.wd-70 {
    width: 70%
}

.wd-75 {
    width: 75%
}

.wd-80 {
    width: 80%
}

.wd-90 {
    width: 90%
}

.wd-100 {
    width: 100%
}

@media (max-width:991px) {
    .wd-sm-25 {
        width: 25%
    }

    .wd-sm-30 {
        width: 30%
    }

    .wd-sm-50 {
        width: 50%
    }

    .wd-sm-60 {
        width: 60%
    }

    .wd-sm-65 {
        width: 65%
    }

    .wd-sm-70 {
        width: 70%
    }

    .wd-sm-75 {
        width: 75%
    }

    .wd-sm-100 {
        width: 100%
    }
}

@media (max-width:767px) {
    .wd-xs-25 {
        width: 25%
    }

    .wd-xs-30 {
        width: 30%
    }

    .wd-xs-50 {
        width: 50%
    }

    .wd-xs-70 {
        width: 70%
    }

    .wd-xs-75 {
        width: 75%
    }

    .wd-xs-100 {
        width: 100%
    }
}

.fit-content {
    width: fit-content !important
}

@media (min-width:992px) {
    .fit-lg-content {
        width: fit-content
    }
}

@media (max-width:768px) {
    .fit-sm-content {
        width: fit-content
    }
}

.text-left {
    text-align: left
}

.text-right {
    text-align: right
}

.text-ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis
}

.text-ellipsia {
    /* display: -webkit-box; */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis
}

.text-ellipsis-2,
.text-ellipsis-3,
.text-ellipsis-5 {
    line-height: 1.4em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis
}

.text-ellipsis-5 img {
    max-width: 1.5em;
    max-height: 1.5em
}

.text-ellipsis-2 {
    -webkit-line-clamp: 2
}

.text-ellipsis-3 {
    -webkit-line-clamp: 3
}

.text-ellipsis-5 {
    -webkit-line-clamp: 5
}

.text-start {
    text-align: left !important
}

.text-end {
    text-align: right !important
}

.wd-b-all {
    word-break: break-all
}

.wd-k-all {
    word-break: keep-all
}

.relative {
    position: relative !important
}

.absolute {
    position: absolute !important
}

.absolute-100 {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 2
}

.absolute-center {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    width: 100%
}

.top-auto {
    top: auto !important
}

.bottom-auto {
    bottom: auto !important
}

.start-auto {
    left: auto !important
}

.end-auto {
    right: auto !important
}

.grid {
    display: grid
}

.grid.g-c-1 {
    grid-template-columns: 100%
}

.grid.g-c-2 {
    grid-template-columns: repeat(2, 1fr)
}

.grid.g-c-3 {
    grid-template-columns: repeat(3, 1fr)
}

.grid.g-c-4 {
    grid-template-columns: repeat(4, 1fr)
}

.grid.g-c-5 {
    grid-template-columns: repeat(5, 1fr)
}

.grid.g-c-6 {
    grid-template-columns: repeat(6, 1fr)
}

.grid.g-c-100 {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    grid-auto-flow: row
}

.grid.g-c-150 {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-auto-flow: row
}

.grid.g-c-200 {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-flow: row
}

.grid.g-c-250 {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-auto-flow: row
}

.grid.g-c-300 {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-auto-flow: row
}

@media (max-width:991px) {
    .grid.g-c-sm-1 {
        grid-template-columns: 100%
    }

    .grid.g-c-sm-2 {
        grid-template-columns: repeat(2, 1fr)
    }

    .grid.g-c-sm-3 {
        grid-template-columns: repeat(3, 1fr)
    }

    .grid.g-c-sm-4 {
        grid-template-columns: repeat(4, 1fr)
    }
}

@media (max-width:767px) {
    .grid.g-c-xs-1 {
        grid-template-columns: 100%
    }

    .grid.g-c-xs-2 {
        grid-template-columns: repeat(2, 1fr)
    }

    .grid.g-c-xs-3 {
        grid-template-columns: repeat(3, 1fr)
    }

    .grid.g-c-xs-4 {
        grid-template-columns: repeat(4, 1fr)
    }
}

.flex {
    display: flex !important
}

.flex.wrap {
    flex-wrap: wrap !important
}

@media (max-width:767px) {
    .flex-m-column {
        flex-direction: column !important
    }
}

.flex.as,
.as {
    align-items: flex-start !important
}

.flex.alc,
.alc {
    align-items: center !important
}

.flex.ae,
.ae {
    align-items: flex-end !important
}

.flex.js,
.js {
    justify-content: flex-start !important
}

.flex.jsa,
.jsa {
    justify-content: space-around !important
}

.flex.jsb,
.jsb {
    justify-content: space-between !important
}

.flex.jc,
.jc {
    justify-content: center !important
}

.flex.je,
.je {
    justify-content: end !important
}

.flex .grow1 {
    flex-grow: 1 !important
}

.flex .shrink0 {
    flex-shrink: 0 !important
}

.flex .flex0 {
    flex: none !important
}

.flex .flex1 {
    flex: auto !important;
    overflow: hidden !important
}

.flex .flex-auto {
    flex: auto !important
}

.flex-fill {
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important
}

.flex-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.row {
    --bs-gutter-x: var(--main-margin);
    --bs-gutter-y: 0
}

@media (max-width:767px) {
    .row {
        --bs-gutter-y: var(--main-margin)
    }
}

.list-inline>li {
    vertical-align: middle;
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px
}

.ete-block,
.ete-block-main,
.ete-block-main-5 {
    position: relative;
    color: var(--main-color);
    box-shadow: var(--main-shadow);
    background: var(--main-bg-color);
    border-radius: var(--main-radius);
    -webkit-transition: 0.2s;
    transition: 0.2s
}

.ete-block-main {
    padding: var(--main-margin)
}

.ete-block-main-5 {
    padding: var(--main-margin-5)
}

.ete-table {
    border-radius: var(--main-radius);
    -webkit-transition: 0.2s;
    transition: 0.2s;
    border: 1px solid var(--muted-border-color)
}

.ete-table .head {
    display: flex
}

.ete-table .head .item {
    background: var(--muted-box-color)
}

.ete-table .item {
    font-size: 0.813rem;
    padding: var(--main-margin-5)
}

.ete-table .item:first-child {
    border-radius: var(--main-radius) 0 0 0
}

.ete-table .item:last-child {
    border-right: 0;
    border-radius: 0 var(--main-radius) 0 0
}

.ete-table .list li {
    display: flex;
    align-items: center;
    border-top: 1px solid var(--muted-border-color)
}

.flex-m-column {
    display: flex
}

@media (max-width:767px) {
    .flex-m-column {
        flex-direction: column
    }
}

.main-border-color {
    background: var(--main-border-color)
}

.main-border {
    border: 1px solid var(--main-border-color)
}

.main-border-clear {
    border: 1px solid var(--menu-bg-color)
}

.main-border-top {
    border-top: 1px solid var(--main-border-color)
}

.main-dash-border-top {
    border-bottom: 1px solid var(--main-border-color)
}

.main-border-clear-top {
    border-top: 1px solid var(--menu-bg-color)
}

.main-border-bottom {
    border-bottom: 1px solid var(--main-border-color)
}

.main-dash-border-bottom {
    border-bottom: 1px solid var(--main-border-color)
}

.main-border-clear-bottom {
    border-bottom: 1px solid var(--menu-bg-color)
}

.main-border-left {
    border-left: 1px solid var(--main-border-color)
}

.main-border-right {
    border-right: 1px solid var(--main-border-color)
}

.muted-border {
    border: 1px solid var(--muted-border-color)
}

.muted-border-2 {
    border: 2px solid var(--muted-border-color)
}

.muted-border-top {
    border-top: 1px solid var(--muted-border-color)
}

.muted-border-bottom {
    border-bottom: 1px solid var(--muted-border-color)
}

.muted-border-left {
    border-left: 1px solid var(--muted-border-color)
}

.muted-border-right {
    border-right: 1px solid var(--muted-border-color)
}

.menu-border {
    border: 1px solid var(--menu-bg-color)
}

.menu-border-top {
    border-top: 1px solid var(--menu-bg-color)
}

.menu-border-bottom {
    border-bottom: 1px solid var(--menu-bg-color)
}

.menu-border-left {
    border-left: 1px solid var(--menu-bg-color)
}

.menu-border-right {
    border-right: 1px solid var(--menu-bg-color)
}

.radius-cover,
.fit-cover,
.box-img,
.avatar {
    width: 100%;
    height: 100%;
    transition: ease-in-out .3s;
    overflow: hidden;
    -o-object-fit: cover;
    object-fit: cover;
    z-index: 1
}

.avatar {
    box-shadow: var(--music-shadow-border)
}

img.fit-cover {
    border-radius: var(--main-radius)
}

.no-radius {
    border-radius: 0 !important
}

.main-radius {
    border-radius: var(--main-radius) !important
}

.main-right-radius {
    border-radius: 0 var(--main-radius) var(--main-radius) 0 !important
}

.main-top-radius {
    border-radius: var(--main-radius) var(--main-radius) 0 0 !important
}

.main-left-radius {
    border-radius: var(--main-radius) 0 0 var(--main-radius) !important
}

.main-bottom-radius {
    border-radius: 0 0 var(--main-radius) var(--main-radius) !important
}

.slim-radius {
    border-radius: var(--slim-radius) !important
}

.radius,
.all-radius {
    border-radius: 10rem !important
}

.radius-50 {
    border-radius: 50% !important
}

.main-shadow {
    box-shadow: 0 0 10px var(--main-shadow2)
}

.main-shadow-mini {
    box-shadow: 0 0 3px var(--main-shadow2)
}

.music-shadow {
    box-shadow: var(--music-shadow-border)
}

.theme-color {
    color: var(--theme-color) !important
}

.key-color {
    color: var(--key-color) !important
}

.muted-color,
.muted-color * {
    color: var(--muted-color) !important
}

.muted-2-color,
.muted-2-color * {
    color: var(--muted-2-color) !important
}

.muted-3-color,
.muted-3-color * {
    color: var(--muted-3-color) !important
}

.main-color {
    color: var(--main-color) !important
}

.main-black {
    color: var(--text-black)
}

.main-color-rev {
    color: var(--rev-main-color) !important
}

.light-color {
    color: #eee
}

.gray-color {
    color: #ddd
}

.dark-color {
    color: #333
}

.body-bg {
    background: var(--body-bg-color) !important
}

.main-bg {
    background: var(--main-bg-color) !important
}

.muted-bg {
    background: var(--muted-box-color) !important
}

.blur-bg {
    background: var(--blur-bg) !important
}

.main-blur {
    will-change: transform;
    backdrop-filter: var(--blur)
}

.none,
.hide {
    display: none !important
}

.hide-ele {
    display: none
}

.max-vh3 {
    max-height: 30vh
}

.max-vh5 {
    max-height: 50vh
}

.max-vh7 {
    max-height: 70vh
}

.max-vh8 {
    max-height: 80vh
}

.max-vh9 {
    max-height: 90vh
}

.max-vh10 {
    max-height: 100vh
}

.mh-n100 {
    max-height: calc(100vh - 100px)
}

.h-n150 {
    height: calc(100vh - 150px)
}

.h-n280 {
    height: calc(100vh - 280px)
}

.h-n80 {
    height: calc(100vh - 80px)
}

.px12 {
    font-size: 12px
}

.px13 {
    font-size: 13px
}

.px14 {
    font-size: 14px
}

.px15 {
    font-size: 15px
}

.px16 {
    font-size: 16px
}

.px18 {
    font-size: 18px
}

.rem625 {
    font-size: .625rem !important
}

.rem10 {
    font-size: .625rem !important
}

.rem12 {
    font-size: .75rem !important
}

.rem13 {
    font-size: .813rem !important
}

.rem14 {
    font-size: .875rem !important
}

.rem15 {
    font-size: .938rem !important
}

.rem16 {
    font-size: 1rem !important
}

.rem17 {
    font-size: 1.063rem !important
}

.rem18 {
    font-size: 1.125rem !important
}

.rem19 {
    font-size: 1.188rem !important
}

.rem20 {
    font-size: 1.25rem !important
}

.rem21 {
    font-size: 1.313rem !important
}

.rem22 {
    font-size: 1.375rem !important
}

.rem23 {
    font-size: 1.438rem !important
}

.rem24 {
    font-size: 1.5rem !important
}

.rem25 {
    font-size: 1.563rem !important
}

.rem26 {
    font-size: 1.625rem !important
}

.rem28 {
    font-size: 1.75rem !important
}

.rem30 {
    font-size: 1.875rem !important
}

.em10 {
    font-size: 1em
}

.em12 {
    font-size: 1.2em
}

.em14 {
    font-size: 1.4em
}

.em16 {
    font-size: 1.6em
}

.em1x {
    font-size: 1em
}

.em2x {
    font-size: 2em
}

.em3x {
    font-size: 3em
}

.em4x {
    font-size: 4em
}

.em09 {
    font-size: .9em
}

.opacity-p1 {
    opacity: 0.1
}

.opacity-p2 {
    opacity: 0.2
}

.opacity-p3 {
    opacity: 0.3
}

.opacity-p4 {
    opacity: 0.4
}

.opacity-p5 {
    opacity: 0.5
}

.opacity-p6 {
    opacity: 0.6
}

.opacity-p7 {
    opacity: 0.7
}

.opacity-p8 {
    opacity: 0.8
}

.opacity-p9 {
    opacity: 0.9
}

.pull-right {
    float: right
}

.pull-left {
    float: left
}

.scroll-x,
.scroll-y {
    -webkit-overflow-scrolling: touch;
    overflow: hidden;
    overflow-x: auto
}

.scroll-x {
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap
}

.scroll-y {
    overflow-x: hidden;
    overflow-y: auto
}

.no-scrollbar,
.mini-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: thin
}

.mini-scrollbar::-webkit-scrollbar {
    width: 3px;
    height: 3px
}

.mini-scrollbar::-webkit-scrollbar-track {
    border-radius: 10px
}

.mini-scrollbar::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0)
}

.mini-scrollbar:hover::-webkit-scrollbar-thumb {
    background: rgba(146, 146, 146, 0.3)
}

.mini-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(145, 145, 145, 0.7)
}

.mini-scrollbar::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(146, 146, 146, 0.1)
}

.no-scrollbar::-webkit-scrollbar {
    display: none
}

.no-scrollbar {
    scrollbar-width: none
}

@media (min-width:992px) {
    .no-scrollbar {
        -ms-overflow-style: none !important;
        scrollbar-width: thin !important
    }

    .no-scrollbar::-webkit-scrollbar {
        width: 1px;
        height: 1px
    }

    .no-scrollbar::-webkit-scrollbar-track {
        border-radius: 10px
    }

    .no-scrollbar::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: rgba(0, 0, 0, 0)
    }

    .no-scrollbar:hover::-webkit-scrollbar-thumb {
        background: rgba(146, 146, 146, 0.3)
    }

    .no-scrollbar::-webkit-scrollbar-thumb:hover {
        background: rgba(145, 145, 145, 0.7)
    }

    .no-scrollbar::-webkit-scrollbar-thumb:window-inactive {
        background: rgba(146, 146, 146, 0.1)
    }

    .no-scrollbar::-webkit-scrollbar {
        display: unset
    }
}

svg,
.svg-icon img {
    height: 1rem;
    width: 1rem;
    overflow: hidden
}

.img-fluid {
    max-width: 100%;
    height: auto
}

.lazyloaded {
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
    transform: unset;
    transition: .3s;
    --lazy-animation: lazy_blur
}

img.lazyloaded {
    -webkit-animation: var(--lazy-animation) .5s;
    animation: var(--lazy-animation) .5s
}

@-webkit-keyframes lazy_blur {
    0% {
        -webkit-filter: blur(5px);
        filter: blur(5px)
    }

    100% {
        -webkit-filter: blur(0);
        filter: blur(0)
    }
}

@keyframes lazy_blur {
    0% {
        -webkit-filter: blur(5px);
        filter: blur(5px)
    }

    100% {
        -webkit-filter: blur(0);
        filter: blur(0)
    }
}

@-webkit-keyframes lazy_fade {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes lazy_fade {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-webkit-keyframes lazy_scale {
    0% {
        transform: scale(1.1)
    }

    80% {
        transform: unset
    }
}

@keyframes lazy_scale {
    0% {
        transform: scale(1.1)
    }

    80% {
        transform: unset
    }
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
    position: relative;
    border: 1px dashed var(--theme-color);
    width: calc(100% - 4px);
    opacity: 0.9
}

hr:before {
    position: absolute;
    top: -10px;
    left: 5%;
    color: var(--theme-color);
    font-family: 'remixicon' !important;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: '\f0c1';
    font-size: 1.25rem;
    line-height: 1;
    z-index: 1;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out
}

hr:hover:before {
    left: calc(95% - 20px)
}

.limit-height {
    min-height: 128px;
    max-height: 200px
}

.limit-height-content {
    position: relative;
    overflow: auto
}

.limit-height-content.hh-100,
.hh-100 {
    max-height: 100px
}

.limit-height-content.hh-200,
.hh-200 {
    max-height: 200px
}

.limit-height-content.hh-300,
.hh-300 {
    max-height: 300px
}

.limit-height-content.hh-400,
.hh-400 {
    max-height: 400px
}

.limit-height-content.hh-500,
.hh-500 {
    max-height: 500px
}

.ete-title {
    position: relative;
    font-size: 1rem;
    font-weight: 500;
    margin: 0 0 var(--main-margin);
    padding: 0 0 0 12px
}

.ete-title:before {
    background: linear-gradient(to top, var(--theme-sub-color), var(--theme-color));
    box-shadow: 1px 1px 3px -1px var(--theme-color);
    border-radius: var(--main-radius);
    content: "";
    height: calc(100% - 5px);
    left: 0;
    position: absolute;
    top: 12%;
    width: 4px
}

.muted-box {
    position: relative;
    background: var(--muted-box-color);
    border-radius: var(--main-radius);
    padding: var(--main-margin)
}

.body-bg-box {
    position: relative;
    background: var(--body-bg-color);
    border-radius: var(--main-radius);
    padding: var(--main-margin)
}

.main-bg-box {
    position: relative;
    background: var(--main-bg-color);
    border-radius: var(--main-radius);
    padding: var(--main-margin)
}

@media (max-width:767px) {
    .hidden-xs {
        display: none !important
    }

    .hidden-mobile {
        display: none !important
    }
}

@media (min-width:768px) and (max-width:1023px) {

    .hidden-sm,
    .hidden-tablet {
        display: none !important
    }
}

@media (min-width:1024px) and (max-width:1199px) {
    .hidden-md {
        display: none !important
    }
}

@media (min-width:1200px) {
    .hidden-lg {
        display: none !important
    }
}

.logo img {
    height: 30px
}

.header-user .user-img img {
    height: 40px;
    width: 40px;
    background: var(--muted-box-color)
}

@media (min-width:1200px) {
    .header-user .user-img img {
        border: 2px solid var(--muted-box-color)
    }
}

.logo-side-menus {
    min-width: 500px;
    white-space: nowrap;
    margin-right: var(--main-margin)
}

.logo-side-menus>div {
    padding: 10px
}

.logo-side-menus>div .badge,
.header-nav .badge,
.badge.ab {
    position: absolute;
    top: 0;
    right: -12px;
    font-size: 0.7rem;
    max-width: 55px;
    --bs-badge-border-radius: 5px 5px 5px 0
}

.badge.ab {
    top: -10px
}

.badge.ab.n-wd {
    max-width: unset
}

.header-nav .badge {
    top: -10px
}