::-webkit-scrollbar {
    width: 6px;
}

/* Track */
::-webkit-scrollbar-track,
progress::-webkit-progress-bar {
    background: #ddd;
}

progress::-webkit-progress-value {
    background: rgb(17, 24, 39, .5);
}

.dark ::-webkit-scrollbar-track {
    background: #111827;
    border-radius: 20px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #aaa;
}

.dark ::-webkit-scrollbar-thumb {
    background: #303e53;
    border-radius: 20px;

}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: rgb(159, 169, 193, .8);
}

body {
    color: #333;
    font-family: "Amaranth";
    font-weight: normal;
    letter-spacing: .6px;
}


.text-primary {
    color: #2E3271;
}

.dark .text-primary {
    color: #9ca3af;
}

.sidebar li:hover img:not(.active-icon),
.sidebar img.active-icon
/* .active img */

    {
    display: none;
}

.sidebar li:hover img.active-icon,
.sidebar .active img.active-icon {
    display: block;
}

.sidebar li:hover a>span,
.sidebar li.active a>span {
    color: #dc2626;
    border-color: #dc2626;
    transition: all .1s ease-in-out 0s;
}

@media screen and (min-width:1024px) {

    [dir="rtl"] .lg\:left-40 {
        right: 10rem;
        left: auto;
    }

    [dir="rtl"] .float-right {
        float: left;
    }

    [dir="rtl"] .lg\:ml-60 {
        margin-left: 0;
        margin-right: 15rem;
    }

    [dir="rtl"] .md\:before\:ml-\[8\.75rem\]::before {
        margin-right: 8.75rem;
        margin-left: 0;
    }

    [dir="rtl"] .md\:ml-44 {
        margin-left: 0;
        margin-right: 11rem;
    }
}

@media screen and (max-width:1024px) {
    .sidebar {
        /* margin-top: 50px; */
        position: fixed;
        z-index: 9999;
    }

    ul#menu-ul {
        max-height: calc(100vh - 60px) !important;
    }
}

li.active {
    color: #dc2626
}

.active>.show-active {
    display: block;
}

.show-on-hover {
    visibility: hidden;
    opacity: 0;
    z-index: 0;
}

.show-child:hover .show-on-hover {
    visibility: visible;
    opacity: 1;
    z-index: 99;
}

.bg-img {
    filter: blur(20px);
    /* Adjust the blur radius as needed */
    opacity: 0.9;
    background: black;
    transform: scale(2);
    /* Doubles the size */
}

.artist-overlay {
    height: 150%;
    z-index: 9;
    opacity: .4;
}

.truncate-text {

    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* For modern browsers that support line-clamp */
    display: -webkit-box;
    /*-webkit-line-clamp: 2; /* Number of lines to display */
    -webkit-box-orient: vertical;
    /* Fallback for browsers that do not support line-clamp */
    max-height: calc(1.4em * 2);
    /* Approximate line height * number of lines */
}








/* Circle Audio Player */
.audio__slider.rs-control,
.rs-container {
    max-width: 50px;
    max-height: 50px;
}

.audio__controls {
    direction: ltr;
}

.slide__audio {
    position: relative;
    /* background: black; */
    width: 50px;
    top: 20%;
    /* margin: 0 auto; */
}

.audio__controls {
    height: 50px;
    width: 50px;
    position: relative;
}

.slide__audio .slide__audio-player {
    display: none;
}

.audio__slider {
    position: absolute;
    z-index: 3;
}

.audio__slider::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border: 3px solid rgba(0, 0, 0, 0.3);
    border-radius: 100%;
    position: absolute;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.audio__slider .rs-container {
    position: relative;
}

.audio__slider .rs-bar {
    top: 50%;
}

.audio__slider .rs-tooltip {
    display: none;
}

.rs-control {
    position: relative;
    outline: 0 none;
}

.rs-container {
    position: relative;
}

.rs-control *,
.rs-control *:before,
.rs-control *:after {
    box-sizing: border-box;
}

.rs-animation .rs-transition {
    transition: all 0.5s linear 0s;
}

.rs-bar {
    transform-origin: 100% 50%;
}

.rs-control .rs-split .rs-path,
.rs-control .rs-overlay1,
.rs-control .rs-overlay2 {
    transform-origin: 50% 100%;
}

.rs-control .rs-overlay {
    transform-origin: 100% 100%;
}

.rs-control.rs-error {
    border: 1px dotted;
    text-align: center;
}

.rs-inner-container {
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.rs-block {
    height: 100%;
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    overflow: hidden;
    z-index: 3;
}

.rs-block .rs-inner {
    border-radius: 1000px;
    display: block;
    height: 100%;
    width: 100%;
    position: relative;
}

.rs-bar {
    position: absolute;
    height: 0;
    z-index: 10;
}

.rs-bar .rs-seperator {
    height: 0;
    border-bottom: medium none;
    display: block;
    float: left;
}

.full .rs-bar,
.half .rs-bar {
    width: 50%;
}

.full .rs-bar,
.half.left .rs-bar,
.half.right .rs-bar {
    top: 50%;
}

.bottom .rs-bar {
    top: 0;
}

.half.right .rs-bar,
.quarter.right .rs-bar {
    right: 100%;
}

.rs-handle.rs-move {
    cursor: move;
}

.rs-readonly .rs-handle.rs-move {
    cursor: default;
}

.rs-path {
    display: block;
    height: 100%;
    width: 100%;
}

.rs-split .rs-path {
    border-radius: 1000px 1000px 0 0;
    overflow: hidden;
    height: 50%;
    position: absolute;
    top: 0;
    z-index: 2;
}

.rs-tooltip {
    text-align: center;
    position: absolute;
    cursor: default;
    border: 1px solid transparent;
    z-index: 10;
}

.rs-handle {
    border-radius: 1000px;
    outline: 0 none;
    float: left;
}

.rs-handle.rs-handle-square {
    border-radius: 0;
}

.paused .rs-handle,
.playing .rs-handle,
.active .rs-handle {
    background-color: #0c2;
}

.rs-handle {
    background-color: #838383;
}

.slide__audio #circle {
    position: absolute;
    top: 25px;
    left: 25px;
    bottom: 0;
    stroke: #dc2626;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 4;
}

.play-pause {
    position: absolute;
    left: 25px;
    top: 25px;
    z-index: 3;
    width: 30px;
    height: 30px;
    background: transparent !important;
    cursor: pointer;
    transform: translate(-50%, -50%);
    border: 0;
    padding: 0;
    margin: 0;
}

.play-pause:focus {
    outline: none;
}

.play-pause::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../svg/play.svg);
    background-size: 45%;
    /* background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAZdJREFUeNrs29FNQjEYBlAgDuAIuAFugBvgBrABTiBOgE4AGzgCbCAbwAayAbZJb0KMT77wt/ecpO/39qP9CqGDAQAAAAAAAAAAAAAA8A+Xy2WWxr2ZiBPILo1jGlOzESeQzmcaY7MSJ5DsO42lmYkTSOcrjYkZihNIZ630YwVyKaU/M1txAunsWir9UQPvkI/GuVtWPsoxVsjv0p9aIXHkE9iu5tIfNbrI8neWXPpzgcSRV8imttJvOZDr0j/WUvp9CKTzWsMPln0KJBuX0t9ELf2+BdKZl21sKZBYpb8upT8RSMBv+hG2MYFclX4JZioQBPKHtzQeh8Ph/pYPcSeHQQ7gJQVxsEJu61yCeIoSRp9XyLaEcY72YH0L5JTG4tY9YcsqpZ2CeIgcRl9WyL6sipNj7+1Le1FK+1TLQ7cayHsaeXva1vbgrW1Zh3J62tf6Aq0EkrenjxTEqvYXaSGQqkq75Q7JATzXVtpV8mfregJxHSFIIC7sBArElbYggbj0GSgQ16IBAAAAAAAAAAAAACCsHwEGACfr+SLf7BaJAAAAAElFTkSuQmCC"); */
    /* background-size: 150%; */
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.seekbar {
    stroke-width: 6;
}

.playing .seekbar {
    visibility: visible;
}

.playing .play-pause::after {
    content: none;
}

.playing .play-pause::before {
    opacity: 1;
}

.equalizer {
    height: 50px;
    width: 30px;
    transform: rotate(180deg);
    left: 10px;
    top: 5px;
    position: absolute;
    transform-origin: center;
    opacity: 0;
}

.playing .equalizer {
    opacity: 1;
}

.equalizer-group {
    width: 100%;
    height: 100%;
    display: block;
    transform-origin: center;
}

.bar {
    fill: #0c2;
    width: 5px;
    -webkit-animation: equalize 1.25s steps(25, end) 0s infinite;
    animation: equalize 1.25s steps(25, end) 0s infinite;
    transform-origin: center;
    position: relative;
    margin-top: -50px;
}

.bar:nth-child(1) {
    -webkit-animation-duration: 1.9s;
    animation-duration: 1.9s;
    transform: translate(5px, 50%);
}

.bar:nth-child(2) {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    transform: translate(25%, 50%);
}

.bar:nth-child(3) {
    -webkit-animation-duration: 2.3s;
    animation-duration: 2.3s;
    transform: translate(50%, 50%);
}

.bar:nth-child(4) {
    -webkit-animation-duration: 2.4s;
    animation-duration: 2.4s;
    transform: translate(75%, 50%);
}

.bar:nth-child(5) {
    -webkit-animation-duration: 2.1s;
    animation-duration: 2.1s;
    transform: translate(95%, 50%);
}

@-webkit-keyframes equalize {
    0% {
        height: 10px;
        margin-top: -10px;
    }

    4% {
        height: 5px;
        margin-top: -5px;
    }

    8% {
        height: 40px;
        margin-top: -40px;
    }

    12% {
        height: 30px;
        margin-top: -30px;
    }

    16% {
        height: 20px;
        margin-top: -20px;
    }

    20% {
        height: 30px;
        margin-top: -30px;
    }

    24% {
        height: 40px;
        margin-top: -40px;
    }

    28% {
        height: 10px;
        margin-top: -10px;
    }

    32% {
        height: 40px;
        margin-top: -40px;
    }

    36% {
        height: 10px;
        margin-top: -10px;
    }

    40% {
        height: 20px;
        margin-top: -20px;
    }

    44% {
        height: 40px;
        margin-top: -40px;
    }

    48% {
        height: 15px;
        margin-top: -15px;
    }

    52% {
        height: 30px;
        margin-top: -30px;
    }

    56% {
        height: 10px;
        margin-top: -10px;
    }

    60% {
        height: 30px;
        margin-top: -30px;
    }

    64% {
        height: 35px;
        margin-top: -35px;
    }

    68% {
        height: 15px;
        margin-top: -15px;
    }

    72% {
        height: 5px;
        margin-top: -5px;
    }

    76% {
        height: 45px;
        margin-top: -45px;
    }

    80% {
        height: 25px;
        margin-top: -25px;
    }

    84% {
        height: 5px;
        margin-top: -5px;
    }

    88% {
        height: 50px;
        margin-top: -50px;
    }

    92% {
        height: 30px;
        margin-top: -30px;
    }

    96% {
        height: 50px;
        margin-top: -50px;
    }

    100% {
        height: 25px;
        margin-top: -25px;
    }
}

@keyframes equalize {
    0% {
        height: 10px;
        margin-top: -10px;
    }

    4% {
        height: 5px;
        margin-top: -5px;
    }

    8% {
        height: 40px;
        margin-top: -40px;
    }

    12% {
        height: 30px;
        margin-top: -30px;
    }

    16% {
        height: 20px;
        margin-top: -20px;
    }

    20% {
        height: 30px;
        margin-top: -30px;
    }

    24% {
        height: 40px;
        margin-top: -40px;
    }

    28% {
        height: 10px;
        margin-top: -10px;
    }

    32% {
        height: 40px;
        margin-top: -40px;
    }

    36% {
        height: 10px;
        margin-top: -10px;
    }

    40% {
        height: 20px;
        margin-top: -20px;
    }

    44% {
        height: 40px;
        margin-top: -40px;
    }

    48% {
        height: 15px;
        margin-top: -15px;
    }

    52% {
        height: 30px;
        margin-top: -30px;
    }

    56% {
        height: 10px;
        margin-top: -10px;
    }

    60% {
        height: 30px;
        margin-top: -30px;
    }

    64% {
        height: 35px;
        margin-top: -35px;
    }

    68% {
        height: 15px;
        margin-top: -15px;
    }

    72% {
        height: 5px;
        margin-top: -5px;
    }

    76% {
        height: 45px;
        margin-top: -45px;
    }

    80% {
        height: 25px;
        margin-top: -25px;
    }

    84% {
        height: 5px;
        margin-top: -5px;
    }

    88% {
        height: 50px;
        margin-top: -50px;
    }

    92% {
        height: 30px;
        margin-top: -30px;
    }

    96% {
        height: 50px;
        margin-top: -50px;
    }

    100% {
        height: 25px;
        margin-top: -25px;
    }
}







.channel-slider {
    display: flex;
    animation: slide infinite linear;
    /* Adjust duration as needed */
}

.channel-slider>div {
    width: 100%;
    /* Adjust image size */
    height: auto;
    /* Adjust image size */
}

@keyframes slide {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-95%);
    }
}


.playing-slider {
    display: flex;
    width: max-content;
    animation: slide2 infinite linear;
    /* Adjust duration as needed */
    animation-duration: 5s;
}

.playing-slider>div {
    width: 100%;
    /* Adjust image size */
    height: auto;
    /* Adjust image size */
}

@keyframes slide2 {
    0% {
        transform: translateX(0%);
    }

    50% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}

























/** 
* Carousel styles
*/
.carousel-container {
    position: relative;
    width: 100%;
    /* Adjust as needed */

}

.carousel {
    display: flex;
    transition: all 0.5s ease;
    /* Transition for smooth animation */
}

.slide {
    flex: 0 0 30%;
    /* Display two slides at a time */
    box-sizing: border-box;
    margin: .8%;
    opacity: 0;
    transition: all 0.5s ease-in-out;
    display: none;
}

.slide.active {
    opacity: 1;
}

.carousel-container[data-count="2"] .slide {
    flex: 0 0 50%;
    /* Display two slides at a time */
    margin: .2%;
}

.carousel-container[data-count="4"] .slide {
    flex: 0 0 24%;
    /* Display two slides at a time */
    margin: .2%;
}

.carousel-container[data-count="5"] .slide {
    flex: 0 0 19%;
    /* Display two slides at a time */
    margin: .2%;
}

.carousel-container[data-count="6"] .slide {
    flex: 0 0 15.4%;
    /* Display two slides at a time */
    margin: .2%;
}


.loader {
    display: none;
}

.loader.show {
    display: block;
}



.blurFilter {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    opacity: 1;
}














/**
* 3D Card
*/

.pCard_card {
    width: 100%;
    min-height: 500px;
    margin: 0 auto;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
}

/****************
Back
****************/

.pCard_card .pCard_back {
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    margin-top: -139px;
    font-weight: 600;
    z-index: 1;


}

.pCard_card .pCard_back a {
    text-decoration: none;
}

/****************
UP
****************/

.pCard_card:not(.pCard_on):hover .pCard_up {
    height: calc(100% - 120px);
}

.pCard_card:not(.pCard_on):hover .pCard_up::after {
    height: 200px;
}

.pCard_card .pCard_up {
    position: absolute;
    width: 100%;
    /* height: calc(100% - 120px); */
    height: 100%;
    background-position: 50%;
    background-size: cover;
    z-index: 3;
    text-align: center;
    -webkit-border-top-left-radius: 30px;
    -moz-border-top-left-radius: 30px;
    -ms-border-top-left-radius: 30px;
    -o-border-top-left-radius: 30px;
    border-top-left-radius: 30px;
    -webkit-border-top-right-radius: 30px;
    -moz-border-top-right-radius: 30px;
    -ms-border-top-right-radius: 30px;
    -o-border-top-right-radius: 30px;
    border-top-right-radius: 30px;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;

}

.dark .pCard_on .pCard_down,
.dark .pCard_on .pCard_up {
    box-shadow: 0 0 30px rgba(0, 0, 0, .3);
}

.pCard_on .pCard_up {
    height: 100px;
    box-shadow: 0 0 30px #CFD8DC;
}

.pCard_card .pCard_up::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 80%;
    bottom: 0;
    z-index: -1;
    background: rgb(0, 13, 36);
    background: linear-gradient(0deg, rgba(0, 13, 36, 0.8519782913165266) 0%, rgba(0, 13, 36, 0) 100%);

    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}

.pCard_card .pCard_up .pCard_text {
    position: absolute;
    top: 250px;
    left: 0;
    right: 0;
    color: #f1f7f9;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}

.pCard_on .pCard_up .pCard_text {
    top: 20px;
}

.pCard_card .pCard_up .pCard_text h2 {
    margin: 0;
    font-size: 25px;
    font-weight: 600;
}

.pCard_card .pCard_up .pCard_text p {
    margin: 0;
    font-size: 16px;
    color: #E3F1F5;
}

.pCard_card .pCard_up .pCard_add {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    background-color: #ed145b;
    -webkit-box-shadow: 0px 5px 24px 0px rgba(0, 0, 0, 0.43);
    -moz-box-shadow: 0px 5px 24px 0px rgba(0, 0, 0, 0.43);
    -ms-box-shadow: 0px 5px 24px 0px rgba(0, 0, 0, 0.43);
    -o-box-shadow: 0px 5px 24px 0px rgba(0, 0, 0, 0.43);
    box-shadow: 0px 5px 24px 0px rgba(0, 0, 0, 0.43);
    position: absolute;
    top: 350px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 65px;
    height: 65px;
    cursor: pointer;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.pCard_card.pCard_on .pCard_up .pCard_text h2 {
    font-size: 20px;
}

.pCard_on .pCard_up .pCard_add {
    -webkit-transform: rotate(360deg) scale(.7);
    -moz-transform: rotate(360deg) scale(.7);
    -ms-transform: rotate(360deg) scale(.7);
    -o-transform: rotate(360deg) scale(.7);
    transform: rotate(360deg) scale(.7);
    margin: 30px auto 0 auto;
}

/****************
Down
****************/

.dark .pCard_card,
.dark .pCard_card .pCard_down {
    background-color: #111827;
}

.pCard_card .pCard_down {
    background-color: #fff;
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 140px;
    z-index: 2;
    -webkit-border-bottom-left-radius: 30px;
    -moz-border-bottom-left-radius: 30px;
    -ms-border-bottom-left-radius: 30px;
    -o-border-bottom-left-radius: 30px;
    border-bottom-left-radius: 30px;
    -webkit-border-bottom-right-radius: 30px;
    -moz-border-bottom-right-radius: 30px;
    -ms-border-bottom-right-radius: 30px;
    -o-border-bottom-right-radius: 30px;
    border-bottom-right-radius: 30px;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}

.pCard_on .pCard_down {
    height: 80px;
    -webkit-box-shadow: 0 0 30px #CFD8DC;
    -moz-box-shadow: 0 0 30px #CFD8DC;
    -ms-box-shadow: 0 0 30px #CFD8DC;
    -o-box-shadow: 0 0 30px #CFD8DC;
    box-shadow: 0 0 30px #CFD8DC;

}

.pCard_card .pCard_down div {
    width: 33.333%;
    float: left;
    text-align: center;
    margin-top: 60px;
    font-size: 18px;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}

.pCard_on .pCard_down div {
    margin-top: 10px;
}

.pCard_card .pCard_down div p:first-of-type {
    color: #68818c;
    margin-bottom: 5px;
}

.pCard_card .pCard_down div p:last-of-type {
    color: #334750;
    font-weight: 700;
    margin-top: 0;
}

.pCard_card .pCard_back a i {
    margin: 10px;
    padding: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    -ms-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.pCard_card .pCard_back a i:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

.pCard_card .pCard_back a:nth-of-type(1) i {
    color: #3B5998;
    border: 2px solid #3B5998;
}


.pCard_card .pCard_back a:nth-of-type(2) i {
    color: #0077B5;
    border: 2px solid #0077B5;
}

.pCard_card .pCard_back a:nth-of-type(3) i {
    color: #1769FF;
    border: 2px solid #1769FF;
}

.pCard_card .pCard_back a:nth-of-type(4) i {
    color: #000000;
    border: 2px solid #000000;
}

.pCard_card .pCard_back a:nth-of-type(5) i {
    color: #EB5E95;
    border: 2px solid #EB5E95;
}

.pCard_card .pCard_back a:nth-of-type(6) i {
    color: #3F729B;
    border: 2px solid #3F729B;
}


.pCard_card .pCard_up .pCard_add i {
    color: white;
    font-size: 38px;
    line-height: 88px;
}

.gradient-overlay {
    background: linear-gradient(180deg, rgba(0, 13, 36, 0.8519782913165266) 0%, rgba(0, 13, 36, 0) 100%);
}

.gradient-top-overlay {
    background: linear-gradient(0deg, rgba(0, 13, 36, 0.8519782913165266) 0%, rgba(0, 13, 36, 0) 50%);
}



.hs {
    display: flex;
    overflow-x: scroll;
    justify-content: space-between;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
    -webkit-overflow-scrolling: touch;
    margin: 0 -20px;
    direction: ltr;
}

.hs__header {
    display: flex;
    align-items: center;
    width: 100%;
}

.hs__headline {
    flex: 1;
}

.hs__arrows {
    align-self: center;
    display: flex;
    direction: ltr;
}

.dark .hs__arrows .arrow.disabled:before,
.hs__arrows .arrow:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    content: "";
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTUgOSI+Cgk8cGF0aCBmaWxsPSIjMzMzMzMzIiBkPSJNNy44NjcgOC41NzRsLTcuMjItNy4yMi43MDctLjcwOEw3Ljg2NyA3LjE2IDE0LjA1Ljk4bC43MDYuNzA3Ii8+Cjwvc3ZnPgo=");
    background-size: cover;
    filter: brightness(1);
    width: 22px;
    height: 12px;
    cursor: pointer;
}

.dark .hs__arrows .arrow:not(.disabled):before,
.hs__arrows .arrow.disabled:before {
    filter: brightness(5);
}

.hs__arrows .arrow.arrow-prev:before {
    transform: rotate(90deg);
    margin-right: 10px;
}

.hs__arrows .arrow.arrow-next:before {
    transform: rotate(-90deg);
}

div[data-count="4"] .hs__item,
div[data-count="3"] .hs__item {
    max-width: 320px;
}

.hs__item {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: calc(100% / 3 - (10px * 2) - (20px / 3));
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

[data-count="2"] .hs__item {
    flex-basis: calc(100% / 2 - (10px * 2) - (20px / 3));
}

[data-count="3"] .hs__item {
    flex-basis: calc(100% / 3 - (10px * 2) - (20px / 3));
}

[data-count="1"] .hs__item {
    flex-basis: calc(100% / 1 - (10px * 2) - (20px / 3));
}

[data-count="4"] .hs__item {
    flex-basis: calc(100% / 4 - (10px * 2) - (20px / 4));
}

[data-count="5"] .hs__item {
    flex-basis: calc(100% / 5 - (10px * 2) - (20px / 4));
}

@media only screen and (max-width: 990px) {
    .hs__item {
        flex-basis: calc(100% / 1 - (10px * 2) - (20px / 3));
    }

    [data-count="3"] .hs__item,
    [data-count="2"] .hs__item {
        flex-basis: calc(100% / 1 - (10px * 2) - (20px / 3));
    }

    [data-count="4"] .hs__item {
        flex-basis: calc(100% / 2 - (10px * 2) - (20px / 3));
    }

    [data-count="5"] .hs__item {
        flex-basis: calc(100% / 2 - (10px * 2) - (20px / 3));
    }

}

.hs__item:last-child:after {
    content: "";
    display: block;
    position: absolute;
    width: 10px;
    height: 1px;
    right: calc(10px * 2 * -1);
}

.hs__item:first-child {
    margin-left: calc(10px * 2);
}

.hs__item__description {
    z-index: 1;
    align-self: flex-start;
    margin: 10px 0;
}

.hs__item__subtitle {
    color: #aaa;
    display: block;
}

.hs__item__image__wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
}

.hs__item__image {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

@media only screen and (min-width: 990px) {
    .hs__wrapper {
        overflow: hidden;
    }
}

@media (hover: none) and (pointer: coarse) {
    .hs__wrapper .hs__arrows {
        display: none;
    }

}

.scroll-transition {
    left: 0;
    animation: scroll 10s linear 1s infinite;
}

@keyframes scroll {
    100% {
        left: -120%;
    }
}




/* Create a custom radio button */
.checkmark {
    top: 0;
    left: 0;
    min-height: 20px;
    min-width: 20px;
    background-color: #eee;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
label:hover input~.checkmark {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
label input:checked~.checkmark {
    background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
label input:checked~.checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
label .checkmark:after {
    top: 8px;
    left: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}
















/**
Side Calendar range 
*/

.fc-day-today {
    background: #FFF !important;
    border: none !important;

}

.dark .fc-day-today {
    background: #111827 !important;
}

.dark .fc-theme-standard td,
.dark .fc-theme-standard th,
.dark .fc .fc-scrollgrid-liquid {
    border-color: #1f2937;
}

output {
    display: grid;
}

@supports (line-height: tan(45deg)) {
    body {
        --trig: none;
    }
}

@supports (color: color-mix(in lch, red 1%, tan)) {
    body {
        --cmix: none;
    }
}

/* ===== SLIDER WRAPPER WITH VISUAL TRACK & GLOW ===== */
.wrap {
    --rng: calc(var(--max) - var(--min));
    /* range between max and min values */
    --prg: calc((var(--val) - var(--min))/var(--rng));
    /* decimal progress */
    --prc: calc(var(--prg)*100%);
    /* percentage progress */
    --pos: calc(var(--val)*1rem);
    /* position from 1st ruler line (from val = min) */
    grid-gap: 1.25rem;
    /* space out ruler, track, thumb, output value */
    grid-template-columns: max-content 0.1875rem 1.25rem max-content;
    place-self: center;
    /* put in the middle of body grid cell along both axes */
    color: #f43e75;
    /*fallback  */
    font: 1em trebuchet ms, ubuntu, verdana, arial, sans-serif;
    transition: 0.35s;
    /* focus/ hover transition */
    /* make sepia only when range input not focused */
    /* making up visual track & glow */
    /* ----- Glow ----- */
    /* ----- Visual track ----- */
}

@supports (color: color-mix(in lch, red 1%, tan)) {
    .wrap {
        /* if color-mix is supported */
        color: color-mix(in lch, #f43e75 var(--prc), #daff47);
    }
}

.wrap:not(:focus-within):not(:hover) {
    filter: sepia(1);
}

.wrap::before,
.wrap::after {
    --pos-x: calc(100% + 1.875rem);
    /* x position of middle rounding circle centre */
    --pos-y: calc(var(--pos) + 7.4375rem);
    /* y position considering vertical overflow  */
    grid-area: 1/1/span 1/span 2;
    /* cover first two columns */
    place-self: center end;
    /* attach to middle right of rightmost cell they cover */
    z-index: 1;
    /* both on top of ruler */
    width: 5.5625rem;
    /* make it wide enough to contain the glow */
    height: calc(100% + 2*7.4375rem);
    /* long enough to contain the glow at min/ max */
    transform: scaley(-1);
    /* ugh... maybe I could have flipped the gradients instead */
    content: "";
}

.wrap::before {
    --sl: transparent calc(100% + -.5px), red calc(100% + .5px);
    /* mask gradient stop list */
    background: radial-gradient(circle 7.4375rem at var(--pos-x) var(--pos-y), currentcolor 4.0625rem, transparent);
    /* how mask compositing works:
* https://css-tricks.com/mask-compositing-the-crash-course/ */
    mask: radial-gradient(circle 4.25rem at var(--pos-x) var(--pos-y), var(--sl)) subtract, radial-gradient(circle 4.4375rem at 0 0, var(--sl)) 100% calc(var(--pos-y) + -1*5.9686681932rem)/4.4375rem 2.9199240082rem no-repeat add, radial-gradient(circle 4.4375rem at 0 100%, var(--sl)) 100% calc(var(--pos-y) + 3.048744185rem)/4.4375rem 2.9199240082rem no-repeat;
}

.wrap::after {
    --sl:
        /* mask gradient stop list */
        transparent calc(4.25rem + -.5px),
        red calc(4.25rem + .5px) calc(100% + -.5px),
        transparent calc(100% + .5px);
    background: linear-gradient(currentcolor calc(var(--pos-y) + 6rem), transparent calc(var(--pos-y) + 2*6rem)) #666;
    mask: linear-gradient(red calc(var(--pos-y) + -1*5.9686681932rem + .5px), transparent 0 calc(var(--pos-y) + 5.9686681932rem + -.5px), red 0) 100%/0.1875rem 100%, radial-gradient(circle 4.4375rem at var(--pos-x), var(--sl)) 100% calc(var(--pos-y) + -1*3.048744185rem + -.5px)/100% calc(2*3.048744185rem + 1px), radial-gradient(circle 4.4375rem at 0 0, var(--sl)) 100% calc(var(--pos-y) + -1*5.9686681932rem)/4.4375rem 2.9199240082rem, radial-gradient(circle 4.4375rem at 0 100%, var(--sl)) 100% calc(var(--pos-y) + 3.048744185rem)/4.4375rem 2.9199240082rem;
    mask-repeat: no-repeat;
}

/* ===== SLIDER WITH VALUE ===== */
.wrap [type=range] {
    --sel: 0;
    /* initial selection status: false (0) */
    place-self: center;
    /* put it in middle of grid cell along both directions */
    /* length based on ruler & thumb dimensions */
    width: calc(var(--max)*1rem + 6rem);
    height: 1.25rem;
    transform: rotate(-90deg);
    /* we have no better options for vertical sliders */
    background: transparent;
    /* get rid of default white in WebKit */
    font: inherit;
    /* override default 13.333px, ugh */
    cursor: pointer;
    /* make it obvious it's interactive */
    /* looks ugly AND ***we've already set focus styles*** */
    /* change selection status to true (1) */
    /* set track & thumb styles */
    /* ----- Value display ----- */
}

.wrap [type=range],
.wrap [type=range]::-webkit-slider-runnable-track,
.wrap [type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
}

.wrap [type=range]:focus {
    outline: none;
}

.wrap [type=range]:hover,
.wrap [type=range]:focus {
    --sel: 1;
}

.wrap [type=range]::-webkit-slider-runnable-track {
    height: 100%;
}

.wrap [type=range]::-moz-range-track {
    height: 100%;
}

.wrap [type=range]::-webkit-slider-thumb {
    /* only add a top margin if the m flag is non-zero */
    margin-top: -2.375rem;
    /* we use --sel to flip between normal & hover/ focus styles
* detailed explanation 
* https://css-tricks.com/dry-switching-with-css-variables-the-difference-of-one-declaration/ */
    --shl: 0 0 0 calc((1 - .375*var(--sel))*1rem)
        /* slightly decrease spread in hover/ focus case */
        hsla(0, 0%, 19%, var(--sel))
        /* non-zero shadow alpha only in hover/ focus case */
    ;
    box-sizing: border-box;
    border: none;
    /* get rid of Firefox border */
    padding: 0.625rem;
    /* to add space around bg limited to content-box */
    width: 6rem;
    height: 6rem;
    /* aspect-ratio: 1 doesn't work here in Firefox */
    border-radius: 50%;
    box-shadow: 0 0 0.5px black, inset 0 0 1px 1px rgba(255, 255, 255, 0.05), inset var(--shl), inset 0 0 0 calc(.5*0.42*(6rem + -2*0.625rem) + 0.625rem) #1f1f1f, 0.25rem -0.25rem 0.25rem #2a2a2a, -0.25rem 0.25rem 0.75rem #090909, var(--shl), 0.75rem -0.75rem 0.75rem #2a2a2a, -0.75rem 0.75rem 1.25rem #090909;
    background: repeating-conic-gradient(from 60deg, transparent 0%, silver 1deg 59deg, transparent 60deg 50%) 0/42% 100% space content-box #1f1f1f;
    transition: box-shadow 0.35s;
    cursor: ns-resize;
}

.wrap [type=range]::-moz-range-thumb {
    /* only add a top margin if the m flag is non-zero */
    /* we use --sel to flip between normal & hover/ focus styles
* detailed explanation 
* https://css-tricks.com/dry-switching-with-css-variables-the-difference-of-one-declaration/ */
    --shl: 0 0 0 calc((1 - .375*var(--sel))*1rem)
        /* slightly decrease spread in hover/ focus case */
        hsla(0, 0%, 19%, var(--sel))
        /* non-zero shadow alpha only in hover/ focus case */
    ;
    box-sizing: border-box;
    border: none;
    /* get rid of Firefox border */
    padding: 0.625rem;
    /* to add space around bg limited to content-box */
    width: 6rem;
    height: 6rem;
    /* aspect-ratio: 1 doesn't work here in Firefox */
    border-radius: 50%;
    box-shadow: 0 0 0.5px black, inset 0 0 1px 1px rgba(255, 255, 255, 0.05), inset var(--shl), inset 0 0 0 calc(.5*0.42*(6rem + -2*0.625rem) + 0.625rem) #1f1f1f, 0.25rem -0.25rem 0.25rem #2a2a2a, -0.25rem 0.25rem 0.75rem #090909, var(--shl), 0.75rem -0.75rem 0.75rem #2a2a2a, -0.75rem 0.75rem 1.25rem #090909;
    background: repeating-conic-gradient(from 60deg, transparent 0%, silver 1deg 59deg, transparent 60deg 50%) 0/42% 100% space content-box #1f1f1f;
    transition: box-shadow 0.35s;
    cursor: ns-resize;
}

.wrap [type=range]+output {
    place-self: end;
    /* put it in bottom right corner of grid cell it's in */
    place-content: center;
    /* place its content in the middle along both directions */
    margin-left: 0.25em;
    /* space it out a bit from oversized thumb on its left */
    width: 1.25em;
    /* make it wide enough to accommodate all possible values */
    aspect-ratio: 1;
    /* make it square */
    transform: translatey(calc(50% - var(--pos)));
    /* move vertically with slider value */
    font-size: 6.25rem;
    /* blow up font size */
    font-weight: 100;
    /* ends up too thick, make it thinner */
    line-height: 1.25;
    /* now why the fuck didn't I just use the shorthand here */
    counter-reset: val var(--val);
    /* set counter to slider value */
    /* in order to be able to use its (numeric integer) value for the ::after */
    /* content: var(--val) works only if --val is string */
}

.wrap [type=range]+output::after {
    content: counter(val);
}

/* ===== RULER ===== */
datalist {
    grid-area: 1/1;
    /* occupy cell at intersection between 1st row & 1st column */
    /* make its gri have max value + 1 rows (because 1st value is 0) of unit height */
    grid-template-rows: repeat(calc(var(--max) + 1), 1rem);
    margin: -0.5rem 0;
    display: grid;
}

datalist option {
    /* absolute value of difference between the datalist option index idx & current slider value val 
* https://css-tricks.com/using-absolute-value-sign-rounding-and-modulo-in-css-today/ */
    --abs: max(var(--val) - var(--idx), var(--idx) - var(--val));
    --rel: calc(var(--abs)/6);
    /* relative value to number of ruler marks affected */
    --sel: max(0, 1 - var(--rel)*var(--rel));
    /* try to compensate for no trig with circular dist */
    --off: calc(var(--sel)*-2.375rem);
    /* thumb-caused offset */
    grid-row: calc(var(--max) + 1 - var(--idx));
    /* visually reverse row order */
    align-self: center;
    /* ensure big text is vertically in the middle of containing cells */
    padding-right: 0.75em;
    /* leave space for ruler marks */
    transform: translate(var(--off));
    /* apply thumb caused offset via transform */
    background: linear-gradient(hsl(0, 0%, var(--lum, 32%)) 0 0) 100%/0.5em 2px no-repeat;
    /* text alpha depends on distance from thumb */
    color: hsla(0, 0%, 13%, calc(1 - .0625*var(--abs)));
    font-size: 2rem;
    text-align: right;
    transition: 0.2s ease-out;
    /* make major ruler markings brighter */
}

@supports (top: calc(sin(5deg)*1px)) {
    datalist option {
        /* if we have trigonometry in CSS */
        --sel: max(0, 1 - var(--rel));
        /* linear selection value */
        /* make the ruler mark distribution around thumb follow a cos wave */
        --off: calc(.5*(1 - cos(var(--sel)*180deg))*-2.375rem);
    }
}

datalist option[label] {
    --lum: 90%;
}

/* ===== SUPPORT INFO BOXES ===== */
.range-info {
    grid-gap: 0.625rem;
    /* some space between boxes if there are more */
    position: fixed;
    /* take out of document flow */
    z-index: 2;
    /* on top of everything else */
    inset: auto 0 0;
    /* attach to parent's padind-box edges except top */
    padding: 0.625rem;
    /* set padding equal to gap */
    font: clamp(.625em, 2.5vw, 1.25em)/1.25 trebuchet ms, ubuntu, verdana, arial, sans-serif;
}

.range-info .box {
    margin: 0;
    /* override browser default */
    border-left: solid 5px var(--c0, #dc3055);
    padding: inherit;
    /* pad info boxes as well */
    background: var(--c1, #851d40);
    color: white;
    /* modify palette for warn */
}

.range-info .box--warn {
    --c0: #fd8721;
    --c1: #c34915;
}

.range-info .box--list {
    display: var(--list);
}

.range-info .box--trig {
    display: var(--trig);
}

.range-info .box--cmix {
    display: var(--cmix);
}

.range-info code,
.range-info kbd {
    padding: 2px;
    background: rgba(0, 0, 0, 0.2);
    font: 1.1em/1.2 ubuntu mono, consolas, monaco, monospace;
}










/**
Station card 
*/
.course {
    border-radius: 10px;
    display: flex;
    max-width: 100%;
    margin: 0 10px;
    overflow: hidden;
}

.course h6 {
    opacity: 0.6;
    margin: 0;
    text-transform: uppercase;
}

.course h2 {
    letter-spacing: 1px;
    margin: 10px 0;
}

.course-preview {
    background-color: #2A265F;
    color: #fff;
    padding: 20px;
    max-width: 250px;
}

.course-preview a {
    color: #fff;
    display: inline-block;
    font-size: 12px;
    opacity: 0.6;
    margin-top: 20px;
    text-decoration: none;
}

.course-info {
    padding: 20px;
    position: relative;
    width: 100%;
}

.progress-container {
    position: absolute;
    right: 80px;
    text-align: right;
    width: 175px;
}

.progress-container .progress {
    background-color: #ddd;
    border-radius: 3px;
    height: 5px;
    width: 100%;
}

.progress-container .progress > span {
    border-radius: 3px;
    background-color: #2A265F;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 5px;
}

.progress-text {
    font-size: 14px;
    opacity: 0.6;
    letter-spacing: 1px;
    position: relative;
}

[dir="rtl"] .filter-arrow {
    transform: rotate(180deg);
}

[dir="rtl"] .left-\[16px\] {
    right: 16px;
}

[dir="rtl"] .lg\:left-\[100\%\] {
    right: 100%;
    left: auto;
}

[dir="rtl"] .right-\[-60px\] {
    right: auto;
    left: -60px;
}

[dir="rtl"] .course-info .btn {
    right: auto;
    left: 30px;
}

.course-info .btn {
    background-color: #2A265F;
    border: 0;
    border-radius: 50px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 16px;
    padding: 15px;
    position: absolute;
    bottom: 20px;
    right: 30px;
    letter-spacing: 1px;
}

#calendar {
    max-width: 900px;
    margin: 40px auto;
}







/**
Tooltip
*/

/* Tooltip text */
.tooltiptext {
    visibility: hidden;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 10px;
    border-radius: 6px;

    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 50%;
    margin-left: -60px;
}

.tooltiptext.left {
    padding: 5px 10px;
    border-radius: 6px;
    top: 0;
    right: 100%;
    margin: 0 auto;
    min-width: fit-content;
    margin-left: auto;
    left: auto;

}

.tooltiptext.right {
    padding: 5px 10px;
    border-radius: 6px;
    top: 100%;
    left: 100%;
    margin: 0 auto;
    min-width: fit-content;
    margin-left: auto;
    right: auto;

}

.tooltiptext.wide {
    left: 25%;
}

/* Show the tooltip text when you mouse over the tooltip container */
*:hover>.tooltiptext {
    visibility: visible;
}




/*
Animated borders Card
*/
.animated-border-card {
    position: relative;
    width: 100%;
    height: 250px;
    border-radius: 14px;
    z-index: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.animated-border-card .bg {
    position: absolute;
    top: 5px;
    left: 5px;
    width: calc(100% - 10px);
    height: 240px;
    z-index: 2;
    backdrop-filter: blur(24px);
    border-radius: 10px;
    overflow: hidden;
    outline: 2px solid white;
}

.dark .animated-border-card .bg {
    outline-color: #1f2937;
}

.animated-border-card .blob {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: #ff0000;
    opacity: 1;
    filter: blur(12px);
    animation: blob-bounce 5s infinite ease;
}

@keyframes blob-bounce {
    0% {
        transform: translate(-100%, -100%) translate3d(0, 0, 0);
    }

    25% {
        transform: translate(-100%, -100%) translate3d(100%, 0, 0);
    }

    50% {
        transform: translate(-100%, -100%) translate3d(100%, 100%, 0);
    }

    75% {
        transform: translate(-100%, -100%) translate3d(0, 100%, 0);
    }

    100% {
        transform: translate(-100%, -100%) translate3d(0, 0, 0);
    }
}





/**
Videos Box with colored Border 
*/
/* From Uiverse.io by LightAndy1 */
.package {
    border-radius: 30px;
    transition: 0.2s ease-in-out;
}

div[data-count="4"] .package {
    max-width: 280px;
}

div[data-count="3"] .package {
    max-width: 350px;
}

.package:hover .save {
    transition: 0.2s ease-in-out;
    border-radius: 10px;
    margin: 20px;
    width: 30px;
    height: 30px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.package .img {
    width: 100%;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    background: linear-gradient(#e66465, #9198e5);
    display: flex;
    align-items: top;
    justify-content: right;
    background-size: cover;
    background-position: center;
}


.package .text {
    margin: 20px;
    display: flex;
    flex-direction: column;
    align-items: space-around;
}

.package .save .svg {
    transition: 0.2s ease-in-out;
    width: 15px;
    height: 15px;
}

.package .icon-box {
    margin-top: 15px;
    width: 70%;
    padding: 10px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: left;
}

.package .icon-box svg {
    width: 17px;
}

.package .card:hover {
    cursor: pointer;
}

.package .save:hover .svg {
    fill: #ced8de;
}









/**
Video Player
*/
#progress {
    height: 8px;
    background-color: rgba(0, 0, 0, .5);
}

#customControls {
    display: none;
}

:fullscreen video.hidden {
    display: block !important;
}

:fullscreen #videoCanvas {
    display: none;
}

:fullscreen #my-video {
    display: block !important;
}

:fullscreen #videoContainer {
    width: 100vw;
    height: 100vh;
    position: relative;
}

/* Custom controls styling */
#video-controls {
    direction: ltr;
}

:fullscreen #video-controls img {
    filter: brightness(5);
}

:fullscreen #video-controls {
    padding: 15px;
    color: #f30;
    position: absolute;
    bottom: 0px !important;
    left: 0;
    right: 0;
    width: 100vw !important;
    display: flex;
    gap: 10px;
    background: linear-gradient(0deg, rgba(0, 13, 36, 0.8519782913165266) 0%, rgba(0, 13, 36, 0) 100%);
    opacity: 0;
    z-index: 9;
    transition: all .3s ease-in-out 0s;

    /* transform: translateX(-50%); */
}

/* Show controls on hover */
:fullscreen #video-controls:hover {
    opacity: 1;
}

:fullscreen #videoContainer:hover #video-controls {
    display: flex;
}

/* Make sure the video fits the entire screen in fullscreen */
:fullscreen video {
    width: 100vw;
    height: 100vh;
    object-fit: contain;
}


















/**
Multi-select 
*/
.multi-select {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    position: relative;
    width: 100%;
    user-select: none;
}

.multi-select .multi-select-header {
    border: 1px solid #374151;
    padding: 7px 30px 7px 12px;
    overflow: hidden;
    gap: 7px;
    min-height: 45px;
}

.multi-select .multi-select-header::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23949ba3' viewBox='0 0 16 16'%3E%3Cpath d='M8 13.1l-8-8 2.1-2.2 5.9 5.9 5.9-5.9 2.1 2.2z'/%3E%3C/svg%3E");
    height: 12px;
    width: 12px;
}

.multi-select .multi-select-header.multi-select-header-active {
    border-color: #c1c9d0;
}

.multi-select .multi-select-header.multi-select-header-active::after {
    transform: translateY(-50%) rotate(180deg);
}

.multi-select .multi-select-header.multi-select-header-active+.multi-select-options {
    display: flex;
}

.multi-select .multi-select-header .multi-select-header-placeholder {
    color: #65727e;
}

.dark .multi-select .multi-select-header .multi-select-header-option {
    background-color: #1f2937;
}

.multi-select .multi-select-header .multi-select-header-option {
    display: inline-flex;
    align-items: center;
    background-color: #f3f4f7;
    font-size: 14px;
    padding: 3px 8px;
    border-radius: 5px;
}

.multi-select .multi-select-header .multi-select-header-max {
    font-size: 14px;
    color: #65727e;
}

.multi-select .multi-select-options {
    display: none;
    box-sizing: border-box;
    flex-flow: wrap;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 999;
    margin-top: 5px;
    padding: 5px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}

.dark .multi-select .multi-select-options {
    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}

.multi-select .multi-select-options::-webkit-scrollbar {
    width: 5px;
}

.multi-select .multi-select-options::-webkit-scrollbar-track {
    background: #f0f1f3;
}

.multi-select .multi-select-options::-webkit-scrollbar-thumb {
    background: #cdcfd1;
}

.multi-select .multi-select-options::-webkit-scrollbar-thumb:hover {
    background: #b2b6b9;
}

.multi-select .multi-select-options .multi-select-option,
.multi-select .multi-select-options .multi-select-all {
    padding: 4px 12px;
    height: 42px;
}

.multi-select .multi-select-options .multi-select-option .multi-select-option-radio,
.multi-select .multi-select-options .multi-select-all .multi-select-option-radio {
    margin-right: 14px;
    height: 16px;
    width: 16px;
    border: 1px solid #374151;
    border-radius: 4px;
}

.multi-select .multi-select-options .multi-select-option .multi-select-option-text,
.multi-select .multi-select-options .multi-select-all .multi-select-option-text {
    box-sizing: border-box;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
    font-size: 16px;
    line-height: 20px;
}

.multi-select .multi-select-options .multi-select-option.multi-select-selected .multi-select-option-radio,
.multi-select .multi-select-options .multi-select-all.multi-select-selected .multi-select-option-radio {
    border-color: #303e53;
    background-color: #303e53;
}

.multi-select .multi-select-options .multi-select-option.multi-select-selected .multi-select-option-radio::after,
.multi-select .multi-select-options .multi-select-all.multi-select-selected .multi-select-option-radio::after {
    content: "";
    display: block;
    width: 3px;
    height: 7px;
    margin: 0.12em 0 0 0.27em;
    border: solid #374151;
    border-width: 0 0.15em 0.15em 0;
    transform: rotate(45deg);
}

.multi-select .multi-select-options .multi-select-option.multi-select-selected .multi-select-option-text,
.multi-select .multi-select-options .multi-select-all.multi-select-selected .multi-select-option-text {
    color: #fdba74;
}

.multi-select .multi-select-options .multi-select-option:hover,
.multi-select .multi-select-options .multi-select-option:active,
.multi-select .multi-select-options .multi-select-all:hover,
.multi-select .multi-select-options .multi-select-all:active {
    background-color: #f3f4f7;
}

.multi-select .multi-select-options .multi-select-all {
    border-bottom: 1px solid #374151;
    border-radius: 0;
}

.multi-select .multi-select-options .multi-select-search {
    padding: 7px 10px;
    border: 1px solid #374151;
    border-radius: 5px;
    margin: 10px 10px 5px 10px;
    width: 100%;
    outline: none;
    font-size: 16px;
    ;
    background-color: rgba(0, 0, 0, .1);
}

.multi-select .multi-select-options .multi-select-search::placeholder {
    color: #b2b5b9;
}

.multi-select .multi-select-header,
.multi-select .multi-select-option,
.multi-select .multi-select-all {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    align-items: center;
    border-radius: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 16px;
}









/** 
Shorts
*/
.shorts .short-video-container {
    position: fixed;
    top: 0;
    width: calc(100% - 230px);
    height: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}

[dir="rtl"] .shorts .short-video-container {
    left: 0;
}

[dir="rtl"] .border-r {
    border-right-width: 0px;
    border-left-width: 1px;
}

[dir="rtl"] .lg\:text-left,
[dir="rtl"] .text-left {
    text-align: right;
}

@media (max-width: 767px) {
    .shorts .short-video-container {
        margin-left: 0;
        width: 100%;
    }

    body .shorts .user-info {
        width: 100%;
        padding: 20px 20px 50px 20px
    }

    body .shorts .user-info::before {
        width: 110%;
        left: -25px;
    }
}


.shorts .video-item {
    position: relative;
    width: 100%;
    height: 100vh;
    scroll-snap-align: start;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.shorts .background-blur {
    position: absolute;
    top: -100px;
    left: -100px;
    width: 150%;
    height: 150%;
    background-size: cover;
    background-position: center;
    filter: blur(50px);
    opacity: 1;
}

.shorts .active .background-blur {
    animation: blur 3s ease 0s;
    -webkit-animation: blur 3s ease 0s;
    -moz-animation: blur 3s ease 0s;
}

@keyframes blur {
    0% {

        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);
        -o-filter: blur(0px);
        -ms-filter: blur(0px);
    }

    100% {
        -webkit-filter: blur(50px);
        -moz-filter: blur(50px);
        -o-filter: blur(50px);
        -ms-filter: blur(50px);
    }
}



.shorts .content-wrapper {
    width: 100%;
    height: 80%;
    z-index: 1;
}

.shorts .user-info {
    width: 300px;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.shorts .user-profile {
    display: flex;
    align-items: center;
}

.shorts .user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 15px;
}

.shorts .username {
    font-size: 18px;
    font-weight: bold;
}

.shorts .video-info {
    margin-top: 20px;
}

.shorts .video-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

.shorts .video-description {
    font-size: 16px;
    line-height: 1.5;
}

.shorts .video-wrapper {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.shorts video {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    /* box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); */
}

.shorts .action-buttons {
    position: absolute;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.shorts .action-button {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    cursor: pointer;
}

.shorts .action-button img {
    width: 20px;
    height: 20px;
}

.shorts .user-info::before {
    content: " ";
    background: white;
    display: block;
    filter: blur(10px) brightness(.3);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: .5;
    left: 0;
    top: 0;
}

.dark .shorts .user-info::before {
    background: #111827;
}






/**
Custom stats for Studio
*/
body .ui {
    margin: 0 auto;
    margin-top: 50px;
    box-shadow: none;
}

body .ui ul {
    margin: 0px 30px 10px 0px;
    padding: 0;
    list-style-type: none;
    font-size: 11px;
    font-weight: 400;
    line-height: 20px;
}

body .ui .drop {
    z-index: -3;
    opacity: 0;
    width: 100%;
    height: 10px;
    position: absolute;
    bottom: 0;
    padding: 12px 30px 21px 30px;
    transition-property: bottom, opacity;
    transition-duration: 0.3s;
}


body .ui_box {
    transform: scale(.8);
    transition-property: transform, background;
    transition-duration: 0.3s;
}

body .ui_box:hover {
    transform: scale(1);
    transition-property: transform, background;
    transition-duration: 0.3s;
    position: relative;
    z-index: 1;
}


.ui_box:hover>.drop {
    transition-property: bottom, opacity;
    transition-duration: 0.3s;
    bottom: -35px;
    opacity: 1;
}

.ui_box:hover>.drop .arrow {
    transition-property: transform;
    transition-duration: 1s;
    transform: rotate(765deg);
}

.ui_box .arrow {
    width: 4px;
    height: 4px;
    transition-property: transform;
    transition-duration: 1s;
    transform: rotate(45deg);
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border-top: 1px solid #CDEAD3;
    border-right: 1px solid #CDEAD3;
    float: right;
    position: relative;
    top: -24px;
    right: 0px;
}

@-webkit-keyframes bar {
    from {
        width: 0px;
    }

    to {
        width: 58%;
    }
}

@keyframes bar {
    from {
        width: 0px;
    }

    to {
        width: 58%;
    }
}

@-webkit-keyframes bar2 {
    from {
        width: 0px;
    }

    to {
        width: 78%;
    }
}

@keyframes bar2 {
    from {
        width: 0px;
    }

    to {
        width: 78%;
    }
}

@-webkit-keyframes graph {
    from {
        height: 0px;
    }

    to {
        height: 20px;
    }
}

@keyframes graph {
    from {
        height: 0px;
    }

    to {
        height: 20px;
    }
}

@-webkit-keyframes graph2 {
    from {
        height: 0px;
    }

    to {
        height: 30px;
    }
}

@keyframes graph2 {
    from {
        height: 0px;
    }

    to {
        height: 30px;
    }
}

@-webkit-keyframes graph3 {
    from {
        height: 0px;
    }

    to {
        height: 24px;
    }
}

@keyframes graph3 {
    from {
        height: 0px;
    }

    to {
        height: 24px;
    }
}

@-webkit-keyframes graph4 {
    from {
        height: 0px;
    }

    to {
        height: 13px;
    }
}

@keyframes graph4 {
    from {
        height: 0px;
    }

    to {
        height: 13px;
    }
}

[lang="en"] .right-\[-60px\] {
    right: -60px;
}


















/**
* Movie slider
*/
#movie-slider-container .movie-slider {
    width: 200px;
    height: 300px;
    list-style-type: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    background-position: center;
    background-size: cover;
    border-radius: 20px;
    box-shadow: 0 20px 30px rgba(255, 255, 255, 0.3) inset;
    transition: transform 0.1s, left 0.75s, top 0.75s, width 0.75s, height 0.75s;

    &:nth-child(1),
    &:nth-child(2) {
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        transform: none;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
    }

    &:nth-child(3) {
        left: 50%;
    }

    &:nth-child(4) {
        left: calc(50% + 220px);
    }

    &:nth-child(5) {
        left: calc(50% + 440px);
    }

    &:nth-child(6) {
        left: calc(50% + 660px);
        opacity: 0;
    }
}

#movie-slider-container .content {
    width: min(30vw, 400px);
    position: absolute;
    top: 50%;
    left: 3rem;
    transform: translateY(-50%);
    color: white;
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
    opacity: 0;
    display: none;

    & .title {
        text-transform: uppercase;
    }

    & .description {
        line-height: 1.7;
        margin: 1rem 0 1.5rem;
    }

    & button {
        width: fit-content;
        background-color: rgba(0, 0, 0, 0.1);
        color: white;
        border: 2px solid white;
        border-radius: 0.25rem;
        padding: 0.75rem;
        cursor: pointer;
    }
}

#movie-slider-container .movie-slider:nth-of-type(2) .content {
    display: block;
    animation: show 0.75s ease-in-out 0.3s forwards;
}

@keyframes show {
    0% {
        filter: blur(5px);
        transform: translateY(calc(-50% + 75px));
    }

    100% {
        opacity: 1;
        filter: blur(0);
    }
}

#movie-slider-container .nav {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    user-select: none;

    & .btn {
        background-color: rgba(255, 255, 255, 0.5);
        color: rgba(0, 0, 0, 0.7);
        border: 2px solid rgba(0, 0, 0, 0.6);
        margin: 0 0.25rem;
        padding: 0.75rem;
        border-radius: 50%;
        cursor: pointer;

        &:hover {
            background-color: rgba(255, 255, 255, 0.3);
        }
    }
}

@media (width > 650px) and (width < 900px) {
    #movie-slider-container .content {
        & .title {
            font-size: 1rem;
        }

        & .description {
            font-size: 0.7rem;
        }

        & button {
            font-size: 0.7rem;
        }
    }

    #movie-slider-container .movie-slider {
        width: 160px;
        height: 270px;

        &:nth-child(3) {
            left: 50%;
        }

        &:nth-child(4) {
            left: calc(50% + 170px);
        }

        &:nth-child(5) {
            left: calc(50% + 340px);
        }

        &:nth-child(6) {
            left: calc(50% + 510px);
            opacity: 0;
        }
    }
}

@media (width < 650px) {
    .shorts .video-title {
        font-size: 18px;
    }
    #movie-slider-container .content {
        & .title {
            font-size: 0.9rem;
        }

        & .description {
            font-size: 0.65rem;
        }

        & button {
            font-size: 0.7rem;
        }
    }

    #movie-slider-container .movie-slider {
        width: 130px;
        height: 220px;

        &:nth-child(3) {
            left: 50%;
        }

        &:nth-child(4) {
            left: calc(50% + 140px);
        }

        &:nth-child(5) {
            left: calc(50% + 280px);
        }

        &:nth-child(6) {
            left: calc(50% + 420px);
            opacity: 0;
        }
    }
}







/**
* Dark mode switch
*/
/* From Uiverse.io by abdullah-sameh */

.darkswitch {
    --toggle-size: 1;
}

.darkswitch *,
.darkswitch *::after,
*::before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.darkswitch {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 170px;
    height: 90px;
    background-color: #b7cecc;
    position: relative;
    border-radius: 999px;
    -webkit-transition: .4s;
    -o-transition: .4s;
    transition: .4s;
    cursor: pointer;
    -webkit-transform: scale(var(--toggle-size));
    -ms-transform: scale(var(--toggle-size));
    transform: scale(var(--toggle-size));
}

.moons {
    position: absolute;
    width: 100px;
    height: 65px;
    overflow: hidden;
    top: 0;
    left: -10px;
}

.moons .star {
    position: absolute;
    width: 1px;
    height: 1px;
    top: 45px;
    left: 30px;
    border-radius: 999px;
    background-color: #ffffff;
}

.moons .star.star-1 {
    top: 100%;
    left: 75px;
    -webkit-transition: .2s;
    -o-transition: .2s;
    transition: .2s;
}

.moons .star.star-2 {
    top: 100%;
    left: 65px;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
}

.moons .star.star-3 {
    top: 100%;
    left: 85px;
    -webkit-transition: .4s;
    -o-transition: .4s;
    transition: .4s;
}

.moons .star.star-4 {
    top: 100%;
    left: 60px;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}

.moons .star.star-5 {
    top: 100%;
    left: 44px;
    -webkit-transition: .6s;
    -o-transition: .6s;
    transition: .6s;
}

.moons .first-moon {
    position: absolute;
    -webkit-transition: .4s;
    -o-transition: .4s;
    transition: .4s;
    width: 30px;
    height: 30px;
    top: 100%;
    left: 30px;
    background-color: #e0d6d6;
    border-radius: 999px;
}

.moons::before,
.moons::after {
    -webkit-transition: .6s;
    -o-transition: .6s;
    transition: .6s;
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #dde4e6;
    border-radius: 999px;
    top: 100%;
    left: 70px;
}

.moons::after {
    width: 5px;
    height: 5px;
    left: 81px;
    -webkit-transition: .8s;
    -o-transition: .8s;
    transition: .8s;
}

.sand {
    position: absolute;
    width: 100%;
    height: 45px;
    bottom: 0px;
    left: 0;
    border-radius: 0 0 999px 999px;
    overflow: hidden;
}

.suns {
    position: absolute;
    border-radius: 1in;
    width: 40px;
    height: 40px;
    top: 10px;
    right: 30px;
    box-shadow: 0 0 15px #EAB308;
    -webkit-box-shadow: 0 0 15px #EAB308;
    background-color: #EAB308;
    -webkit-transition: .6s;
    -o-transition: .6s;
    transition: .6s;
}

.sand::before {
    position: absolute;
    width: 100%;
    height: 25px;
    bottom: 0px;
    left: 0;
    content: "";
    background-color: #fff;
    border-radius: 0 0 999px 999px;
}

.dark .sand::before {
    background-color: #192031;
}

.bb8 {
    position: absolute;
    left: -18%;
    width: 140px;
    -webkit-transform: scale(0.45);
    -ms-transform: scale(0.45);
    transform: scale(0.45);
    -webkit-transition: left .4s;
    -o-transition: left .4s;
    transition: left .4s;
}

label .switch-slider {
    display: none;
}

.antennas {
    position: absolute;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    left: 28%;
}

.antenna {
    background: #e0d2be;
    position: absolute;
    width: 2px;
}

.antenna.short {
    height: 20px;
    top: -65px;
    left: 50px;
}

.antenna.long {
    border-top: 6px solid #020204;
    border-bottom: 6px solid #020204;
    height: 36px;
    top: -80px;
    left: 56px;
}

.head {
    -webkit-transition: -webkit-transform .4s;
    transition: -webkit-transform .4s;
    -o-transition: transform .4s;
    transition: transform .4s, -webkit-transform .4s;
    background-color: ghostwhite;
    border-radius: 90px 90px 25px 25px;
    -moz-border-radius: 90px 90px 25px 25px;
    -webkit-border-radius: 90px 90px 25px 25px;
    height: 63px;
    margin-left: -45px;
    overflow: hidden;
    position: absolute;
    width: 95px;
    z-index: 1;
    top: -56px;
    left: 56%;
}

.head .stripe {
    position: absolute;
    width: 100%;
}

.head .stripe.one {
    background: #7699B7;
    height: 7px;
    opacity: 0.8;
    z-index: 1;
    top: 3px;
}

.head .stripe.two {
    background: #CD7640;
    height: 4px;
    top: 14px;
}

.head .stripe.three {
    background: #999;
    height: 4px;
    opacity: 0.5;
    bottom: 3px;
}

.head .stripe.detail {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 200px;
    bottom: 7px;
    left: -38%;
    -webkit-transition: left 0.4s;
    -o-transition: left 0.4s;
    transition: left 0.4s;
}

.head .detail {
    height: 7px;
}

.head .detail.zero {
    background-color: #CD7640;
    width: 2%;
    margin-left: 3px;
}

.head .detail.one {
    background-color: #CD7640;
    width: 8%;
    margin-left: 3px;
}

.head .detail.two {
    background-color: #CD7640;
    width: 6%;
    margin-left: 5px;
}

.head .detail.three {
    background-color: #CD7640;
    width: 4%;
    margin-left: 45px;
    height: 5px;
    margin-top: 2px;
}

.head .detail.four {
    background-color: #CD7640;
    width: 10%;
    margin-left: 4px;
}

.head .detail.five {
    background-color: #CD7640;
    width: 2%;
    margin-left: 3px;
}

.head .eyes {
    display: inline-block;
    height: 100%;
    position: absolute;
    width: 100%;
    -webkit-transition: left 0.4s;
    -o-transition: left 0.4s;
    transition: left 0.4s;
    left: 22%;
}

.head .eye {
    border-radius: 50%;
    display: block;
    position: absolute;
}

.head .eye.one {
    background: #020204;
    border: 4px solid lightgray;
    height: 30px;
    width: 30px;
    top: 12px;
    left: 12%;
}

.head .eye.one:after {
    background: white;
    border-radius: 50%;
    content: "";
    display: block;
    height: 3px;
    position: absolute;
    width: 3px;
    top: 4px;
    right: 4px;
}

.head .eye.two {
    background-color: lightgrey;
    border: 1px solid #020204;
    height: 16px;
    width: 16px;
    top: 30px;
    left: 40%;
}

.head .eye.two:after {
    background: #020204;
    border-radius: 50%;
    content: "";
    display: block;
    height: 10px;
    position: absolute;
    width: 10px;
    top: 2px;
    left: 2px;
}

.ball {
    background-color: ghostwhite;
    border-radius: 50%;
    height: 165px;
    overflow: hidden;
    position: relative;
    width: 165px;
    -webkit-transition: -webkit-transform .4s;
    transition: -webkit-transform .4s;
    -o-transition: transform .4s;
    transition: transform .4s, -webkit-transform .4s;
}

.lines {
    border: 2px solid #B19669;
    border-radius: 50%;
    height: 400px;
    opacity: 0.6;
    position: absolute;
    width: 400px;
}

.lines.two {
    top: -10px;
    left: -250px;
}

.ring {
    background: #CD7640;
    border-radius: 50%;
    height: 70px;
    margin-left: -35px;
    position: absolute;
    width: 70px;
}

.ring:after {
    background-color: ghostwhite;
    border-radius: 50%;
    content: "";
    display: block;
    height: 73%;
    margin-top: -36%;
    margin-left: -36%;
    position: absolute;
    width: 73%;
    top: 50%;
    left: 50%;
}

.ring.one {
    margin-left: -40px;
    height: 90px;
    width: 100px;
    top: 2%;
    left: 42%;
}

.ring.two {
    height: 40px;
    width: 80px;
    -ms-transform: rotate(50deg);
    -webkit-transform: rotate(50deg);
    transform: rotate(50deg);
    top: 65%;
    left: 8%;
}

.ring.two:after {
    top: 100%;
}

.ring.three {
    height: 37px;
    width: 80px;
    -ms-transform: rotate(-50deg);
    -webkit-transform: rotate(-50deg);
    transform: rotate(-50deg);
    top: 68%;
    left: 84%;
}

.ring.three:after {
    top: 110%;
}

label .switch-shadow {
    background: #3A271C;
    -webkit-box-shadow: 5px 0 50px #3A271C;
    box-shadow: 5px 0 50px #3A271C;
    border-radius: 50%;
    height: 23.3333333333px;
    opacity: 0.25;
    position: absolute;
    width: 110px;
    left: 28px;
    z-index: -1;
    bottom: -8px;
}

/* actions */

.switch-slider:checked+.darkswitch .bb8 {
    left: 29%;
}

.switch-slider:checked+.darkswitch .bb8 .ball {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.switch-slider:hover+.darkswitch .bb8 .eyes {
    left: 60%;
}

.switch-slider:checked:hover+.darkswitch .bb8 .eyes {
    left: -20%;
}

.switch-slider:active+.darkswitch .bb8 .head {
    -webkit-transform: translate(35px, 3px) rotateZ(17deg);
    -ms-transform: translate(35px, 3px) rotate(17deg);
    transform: translate(30px, 3px) rotateZ(17deg);
}

.switch-slider:checked:active+.darkswitch .bb8 .head {
    -webkit-transform: translate(-35px, 6px) rotateZ(-17deg);
    -ms-transform: translate(-35px, 6px) rotate(-17deg);
    transform: translate(-35px, 6px) rotateZ(-17deg);
}

.switch-slider:active+.darkswitch .antennas {
    -webkit-transform: translate(35px, -20px) rotateZ(17deg);
    -ms-transform: translate(35px, -20px) rotate(17deg);
    transform: translate(35px, -20px) rotateZ(17deg);
}

.switch-slider:active:not(:hover)+.darkswitch .antennas {
    -webkit-transform: translate(35px, -10px) rotateZ(17deg);
    -ms-transform: translate(35px, -10px) rotate(17deg);
    transform: translate(35px, -10px) rotateZ(17deg);
}

.switch-slider:checked:active+.darkswitch .antennas {
    -webkit-transform: translate(-35px, 10px) rotateZ(-17deg);
    -ms-transform: translate(-35px, 10px) rotate(-17deg);
    transform: translate(-35px, 15px) rotateZ(-17deg);
}

.switch-slider:checked:active:not(:hover)+.darkswitch .antennas {
    -webkit-transform: translate(-30px, 20px) rotateZ(-17deg);
    -ms-transform: translate(-30px, 20px) rotate(-17deg);
    transform: translate(-25px, 25px) rotateZ(-17deg);
}

.switch-slider:hover+.darkswitch .antennas,
.switch-slider:checked+.darkswitch .antennas {
    left: 6%;
}

.switch-slider:hover+.darkswitch .stripe.detail,
.switch-slider:checked+.darkswitch .stripe.detail {
    left: 0;
}

.switch-slider:checked:hover+.darkswitch .antennas {
    left: 28%;
}

.switch-slider:checked:hover+.darkswitch .stripe.detail {
    left: -38%;
}

.switch-slider:checked+.darkswitch {
    background-color: #112350;
}

.switch-slider:checked+.darkswitch .suns {
    top: 50px;
}

.switch-slider:checked+.darkswitch .moons .first-moon {
    top: 15px;
    -webkit-box-shadow: 0 0 10px #B8CCCD;
    box-shadow: 0 0 10px #B8CCCD;
}

.switch-slider:checked+.darkswitch .moons::after {
    top: 38px;
    -webkit-box-shadow: 0 0 15px #B8CCCD;
    box-shadow: 0 0 15px #B8CCCD;
}

.switch-slider:checked+.darkswitch .moons::before {
    top: 34px;
    -webkit-box-shadow: 0 0 15px #B8CCCD;
    box-shadow: 0 0 15px #B8CCCD;
}

.switch-slider:checked+.darkswitch .moons .star {
    -webkit-box-shadow: 0 0 20px 2px #fff;
    box-shadow: 0 0 20px 2px #fff;
}

.switch-slider:checked+.darkswitch .moons .star.star-1 {
    top: 20px;
}

.switch-slider:checked+.darkswitch .moons .star.star-2 {
    top: 15px;
}

.switch-slider:checked+.darkswitch .moons .star.star-3 {
    top: 15px;
}

.switch-slider:checked+.darkswitch .moons .star.star-4 {
    top: 45px;
}

.switch-slider:checked+.darkswitch .moons .star.star-5 {
    top: 53px;
}








/**
* Video pictures on hover
*/

.video-image-item {
    position: relative;
    width: 100%;
    height: 100%;
    /* Adjust this to your image height */
}

.video-image-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Show only the first image by default */
.video-image-item img:first-child {
    opacity: 1;
}

/* Hover animation to cycle through images */
.video-image-item:hover>img {
    animation: image-switch 5s steps(1) infinite;
}

/* Keyframes to switch between images */
@keyframes image-switch {
    0% {
        opacity: 1;
    }

    10% {
        opacity: 0;
    }

    20% {
        opacity: 0;
    }

    30% {
        opacity: 0;
    }

    40% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    60% {
        opacity: 0;
    }

    70% {
        opacity: 0;
    }

    80% {
        opacity: 0;
    }

    90% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Additional images to cycle through (adjust percentages if you have more) */
.video-image-item:hover img:nth-child(2) {
    animation-delay: 0.50s;
}

.video-image-item:hover img:nth-child(3) {
    animation-delay: 1s;
}

.video-image-item:hover img:nth-child(4) {
    animation-delay: 1.50s;
}

.video-image-item:hover img:nth-child(5) {
    animation-delay: 2s;
}

.video-image-item:hover img:nth-child(6) {
    animation-delay: 2.50s;
}

.video-image-item:hover img:nth-child(7) {
    animation-delay: 3s;
}

.video-image-item:hover img:nth-child(8) {
    animation-delay: 3.50s;
}

.video-image-item:hover img:nth-child(9) {
    animation-delay: 4s;
}

.video-image-item:hover img:nth-child(10) {
    animation-delay: 4.5s;
}









.before\:bg-no-repeat::before {
    content: var(--tw-content);
    background-repeat: no-repeat;
}
.before\:bg-top::before {
    content: var(--tw-content);
    background-position: top;
}
.before\:bg-contain::before {
    content: var(--tw-content);
    background-size: contain;
}
.before\:bg-\[url\(\'\.\.\/\.\.\/assets\/svg\/component\/banner-bg-gray\.svg\'\)\]::before {
    content: var(--tw-content);
    background-image: url(../../assets/svg/component/banner-bg-gray.svg);
}
.before\:w-2\/3::before {
    content: var(--tw-content);
    width: 66.666667%;
}
.before\:h-full::before {
    content: var(--tw-content);
    height: 100%;
}
.before\:z-0::before {
    content: var(--tw-content);
    z-index: 0;
}
.before\:top-0::before {
    content: var(--tw-content);
    top: 0px;
}
.before\:start-0::before {
    content: var(--tw-content);
    inset-inline-start: 0px;
}
.before\:absolute::before {
    content: var(--tw-content);
    position: absolute;
}






/**
Updates CSS
*/
.package {
    position: relative;
    z-index: 99;
}