/* this will replace styles.css eventually */

/*==================================================
    Variables and Root Definitions
==================================================*/
:root {
    --bs-heading-color: white;
    /* --bs-body-color: white; */
    --bs-border-color: var(--purple2);
    --bs-modal-color: black;
    --bs-link-color: var(--purple3);

    --body: #19052e;
    --body-rgb: rgb(25, 5, 46);
    --primary: #2F0857;
    --primary-rgb: rgb(47, 8, 87);
    --bs-primary: var(--primary);
    --bs-primary-rgb: 47, 8, 87;
    --secondary: #00031c;
    --secondary-rgb: rgb(0, 3, 28);
    --tertiary: #22063e;
    --tertiary-rgb: rgb(34, 6, 62);

    --footer-color: #161934;
    --footer-color-rgb: rgb(22, 25, 52);

    --btn-color2: #619bff;
    --btn-color2-rgb: rgb(97, 155, 255);
    --btn-color4: #eeBf21;
    --btn-color4-rgb: rgb(238, 191, 33);

    --yellow: #f3e035;
    --yellow-rgb: rgb(243, 224, 53);
    --blue: #24b1ee;
    --blue-rgb: rgb(36, 177, 238);
    --green: #2ecc71;
    --green-rgb: rgb(46, 204, 113);

    --purple1: #9e61ff;
    --purple1-rgb: rgb(158, 97, 255);
    --purple2: #6c52ee;
    --purple2-rgb: rgb(108, 82, 238);
    --purple3: #4F2BC2;
    --purple3-rgb: rgb(79, 43, 194);

    --danger1: #dc3545;
    --danger1-rgb: rgb(220, 53, 69);
    --danger2: #a71d2a;
    --danger2-rgb: rgb(167, 29, 42);
    --danger-gradient: #c0a1aa;
    --danger-gradient-rgb: rgb(192, 161, 170);

    --galaxy:
        linear-gradient(250deg,
            var(--purple1) 10%,
            rgba(142, 97, 255, 0) 33%),
        radial-gradient(82% 280% at -17% -92%,
            var(--btn-color2) 29%,
            rgba(205, 219, 248, 0) 70%),
        var(--purple2);

    --galaxy-danger:
        linear-gradient(250deg,
            var(--danger1) 10%,
            rgba(220, 53, 69, 0) 33%),
        radial-gradient(82% 280% at -17% -92%,
            var(--danger-gradient) 29%,
            rgba(192, 161, 170, 0) 70%),
        var(--danger2);

    /* Content Type Colors */
    --video: var(--purple3);
    --game: var(--purple1);
    --activity: var(--orange);
    --resource: var(--danger1);
    --book: var(--green);

    /* Hover Shadow Colors */
    --hover-shadow-galaxy: rgba(158, 97, 255, 0.5);
    --hover-shadow-galaxy-danger: rgba(220, 53, 69, 0.5);

    --orange: #f4941b;
    --orange-rgb: rgb(244, 148, 27);

    --border-width: 3px;
    --border-style: solid;
    --border-radius: 15px;

    --border-faded-color: #292c41;
    --border-faded-color-rgb: rgb(41, 44, 65);
    --border-faded-full: var(--border-width) var(--border-style) var(--border-faded-color);
    
    --border-active-color: var(--purple2);
    --border-active-full: var(--border-width) var(--border-style) var(--border-active-color);

    --border-card-color: var(--purple1);
    --border-card-full: var(--border-width) var(--border-style) var(--border-card-color);

    --faded: #bbbbbb;
    --faded-rgb: rgb(161, 160, 161);

    --switch-icon-purple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%236c52ee'/%3E%3C/svg%3E");
    --switch-icon-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='white'/%3E%3C/svg%3E");

    /* Font */
    --metro: 'Metropolitano', sans-serif;
    --roboto: 'Roboto', sans-serif;
    --robotoslab: 'Roboto Slab', sans-serif;
}



/*==================================================
    Fonts
==================================================*/
/* @font-face {
    font-family: 'Metropolitano';
    src: url('../fonts/Metropolitano.ttf') format('truetype'),
        url('../fonts/Metropolitano.woff2') format('woff2');
} */

/* Metropolitano Thin */
@font-face {
    font-family: 'Metropolitano';
    font-style: normal;
    font-weight: 100;
    src: url('../fonts/metropolitano/Metropolitano-Thin.ttf') format('truetype');
}

@font-face {
    font-family: 'Metropolitano';
    font-style: italic;
    font-weight: 100;
    src: url('../fonts/metropolitano/Metropolitano-ThinItalic.ttf') format('truetype');
}

/* Metropolitano Light */
@font-face {
    font-family: 'Metropolitano';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/metropolitano/Metropolitano-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Metropolitano';
    font-style: italic;
    font-weight: 300;
    src: url('../fonts/metropolitano/Metropolitano-LightItalic.ttf') format('truetype');
}

/* Metropolitano Regular */
@font-face {
    font-family: 'Metropolitano';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/metropolitano/Metropolitano-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Metropolitano';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/metropolitano/Metropolitano-Italic.ttf') format('truetype');
}

/* Metropolitano Medium */
@font-face {
    font-family: 'Metropolitano';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/metropolitano/Metropolitano-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Metropolitano';
    font-style: italic;
    font-weight: 500;
    src: url('../fonts/metropolitano/Metropolitano-MediumItalic.ttf') format('truetype');
}

/* Metropolitano Bold */
@font-face {
    font-family: 'Metropolitano';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/metropolitano/Metropolitano-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Metropolitano';
    font-style: italic;
    font-weight: 700;
    src: url('../fonts/metropolitano/Metropolitano-BoldItalic.ttf') format('truetype');
}

/* Metropolitano Black */
@font-face {
    font-family: 'Metropolitano';
    font-style: normal;
    font-weight: 900;
    src: url('../fonts/metropolitano/Metropolitano-Black.ttf') format('truetype');
}

@font-face {
    font-family: 'Metropolitano';
    font-style: italic;
    font-weight: 900;
    src: url('../fonts/metropolitano/Metropolitano-BlackItalic.ttf') format('truetype');
}  



/*==================================================
    Global Styling
==================================================*/
body {
    font-family: var(--robotoslab);
    color: white;
    background-color: var(--body);
}

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

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

.border-dark {
    border-color: rgba(var(--purple2-rgb), var(--bs-border-opacity)) !important;
}

.border-bottom {
    border-bottom: rgba(var(--purple2-rgb), var(--bs-border-opacity)) !important;
}

hr.hr-galaxy {
    border: 0;
    border-top: 3px solid var(--border-active-color);
    border-radius: var(--border-radius) 0 var(--border-radius) 0;
    margin: 20px 0;
    opacity: 1;
}

.img-fluid {
    border-radius: var(--border-radius) !important;
}

.rounded,
.img-thumbnail {
    border-radius: 1.5em !important;
}

.img-thumbnail {
    border: var(--bs-border-width) solid var(--purple2);
}

.figure-caption {
    color: white;
}



/*==================================================
    Utilities
==================================================*/
.notouch {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
    cursor: default;
}

.notouch::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0);
    z-index: 10;
}

.z-1 { z-index: 1; }
.z-2 { z-index: 2; }
.z-3 { z-index: 3; }
.z-4 { z-index: 4; }
.z-5 { z-index: 5; }



/*==================================================
    Animations
==================================================*/
.rotate-180 {
    transform: rotate(180deg);
    transition: transform 0.3s;
}

.spinner-grow {
    background-color: var(--purple2);
}



/*==================================================
    Scrollbar
==================================================*/

/* Chrome / Webkit */
* {
    scrollbar-color: var(--purple2) var(--body);
}

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

::-webkit-scrollbar-track {
    background: var(--body) !important;
}

::-webkit-scrollbar-thumb {
    background: var(--galaxy) !important;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: white !important;
    box-shadow: 0px 15px 40px -8px rgba(158, 97, 255, 0.5);
}

/* specifically do not style the intl-tel-input dropdown scrollbar the same way */
.iti__country-list {
    scrollbar-color: var(--purple2) transparent !important;
    scrollbar-width: auto !important;
}

.iti__country-list::-webkit-scrollbar {
    width: 12px;
}

.iti__country-list::-webkit-scrollbar-track {
    background: transparent !important;
}

.iti__country-list::-webkit-scrollbar-thumb {
    background: var(--galaxy) !important;
    border-radius: 6px !important;
}

.iti__country-list::-webkit-scrollbar-thumb:hover {
    background: white !important;
    box-shadow: 0px 15px 40px -8px rgba(158, 97, 255, 0.5) !important;
}

.iti__tel-input {
    height: 100%;
}

/* Specifically for the form validation message under the field */
.form-group:has(.iti__tel-input.is-invalid) .invalid-feedback {
    display: block;
}

.form-group:has(.form-check-input.is-invalid) .invalid-feedback {
    display: block;
}


/*==================================================
    Typography
==================================================*/
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6,
a,
label,
.form-text {
    font-family: var(--metro);
}

textarea[name="htmlContent"] {
    font-family: monospace;
    font-size: .80em !important;
}

.text-bg-info {
    color: white !important;
}

.post-link {
    font-size: 13px;
    color: var(--faded);
}

.dashed {
    border-bottom: 3px dashed var(--purple2);
}

/* default wrapper */
.username-scroll-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    height: 1.5em;
}

.username-responsive {
    font-size: clamp(0.75rem, 1vw, 1rem);
    white-space: nowrap;
    display: inline-block;
    transition: transform 0.3s ease;
}

/* only scroll on hover if we have the .username-scroll-animate class */
.username-scroll-wrapper:hover .username-responsive.username-scroll-animate,
.startexploring-btn:hover .username-scroll-wrapper .username-responsive.username-scroll-animate {
    animation: scroll-username 7s linear infinite;
}

@keyframes scroll-username {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}



/*==================================================
    Buttons
==================================================*/
.btn {
    --bs-btn-font-family: var(--metro);
    font-family: var(--metro);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: .2s ease;
}

.btn.btn-primary {
    background: var(--galaxy) !important;
    padding: 13px 26px;
    font-size: 15px;
    line-height: 20px;
}

.btn.btn-primary:hover {
    color: white;
    box-shadow: 0px 15px 40px -8px var(--hover-shadow-galaxy);
    transform: translateY(-3px);
}

.btn.disabled {
    color: white;
}

.btn-group .btn-galaxy-bright-sm {
    background: var(--purple2) !important;
}

.btn-group .btn-galaxy-bright-sm:hover {
    background: white !important;
    transform: unset;
}

.user-action.action-set {
    color: white;
    background: var(--galaxy);
    border: var(--border-active-full);
}

.user-action.action-unset {
    color: white;
    background: unset;
    border: var(--border-active-full);
}

.user-action.action-set:hover {
    color: var(--body);
    background: white;
    border-color: white;
}

.user-action.action-unset:hover {
    color: var(--body);
    background: white;
    border-color: white;
}

.exit-btn {
    width: 38px;
    height: 38px;
    background: var(--purple2);
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.3s ease, transform 0.2s ease;
    border: none;
    font-size: 20px;
}

.exit-btn:hover {
    background: white;
    color: var(--body);
    transform: scale(1.1);
}



/*==================================================
    Tooltips
==================================================*/
.tooltip.tooltip-galaxy .tooltip-inner {
    background-color: var(--body);
    border: var(--border-active-full);
    border-radius: var(--border-radius);
}

.tooltip.tooltip-galaxy .tooltip-arrow {
    display: none;
}

.tooltip.tooltip-galaxy.show {
    opacity: 1;
}

.tooltip.tooltip-ignore-events {
    pointer-events: none;
}

.tooltip.tooltip-galaxy {
    z-index: 100000;
}



/*==================================================
    Popovers
==================================================*/
.popover.popover-galaxy {
    --bs-popover-border-color: var(--border-active-color);
    /* if you want a non‑1px width, uncomment & adjust:
    --bs-popover-border-width: 1px;
    */
    --bs-popover-bg: var(--body);
    --bs-popover-body-color: white;
    --bs-popover-border-radius: var(--border-radius);
    --bs-popover-border-width: var(--border-width);
    --bs-popover-inner-border-radius: var(--border-radius);
    --bs-popover-body-padding-x: 1rem;
    --bs-popover-body-padding-y: 0.5rem;
}

.popover.popover-galaxy .popover-arrow {
    display: none;
}

.popover.popover-galaxy.show {
    opacity: 1;
}



/*==================================================
    GContent Cards

    Example (Video):
        <a 
            class="gcontent card" 
            href="{LINK}" 
            data-bs-toggle="tooltip" 
            data-bs-title="{TITLE - the full title will be shown with a tooltip}" 
            data-bs-placement="bottom" 
            data-bs-custom-class="tooltip-galaxy"
        >
            <div class="ribbon video-bg">
                <i class="fa-solid fa-play-circle"></i>
            </div>
            <img class="card-img-top" src="{THUMBNAIL_URL}">
            <div class="card-title-body">
                <h6 class="card-title">
                    {TITLE - will be truncated automatically beyond 2 lines}
                </h6>
            </div>
        </a>

    Example (Resource - downloadable on click; includes download count):
        <a 
            class="gcontent card download-link text-center" 
            href="javascript:void();" 
            data-ruuid="{RESOURCE_UUID}" // this allows the resource to be downloaded on click.
            data-bs-toggle="tooltip" 
            data-bs-title="{TITLE - the full title will be shown with a tooltip}"
            data-bs-placement="bottom" 
            data-bs-custom-class="tooltip-galaxy"
        >
            <div class="ribbon resource-bg">
                <i class="fa-solid fa-chalkboard-user"></i>
            </div>
            <div class="downloads">
                {DOWNLOAD_COUNT} <i class="fa-solid fa-download"></i>
            </div>
            <img class="card-img-top" src="{THUMBNAIL_URL}">
            <div class="card-title-body">
                <h6 class="card-title">
                    {TITLE - will be truncated automatically beyond 2 lines}
                </h6>
            </div>
        </a>
==================================================*/
.gcontent.card {
    width: 100%;
    height: 13.5rem;
    background: unset;
    border: none;
    border-radius: 1rem;
    transition: 0.2s ease all;
    position: relative;
    display: flex;
    flex-direction: column;
}

.gcontent.card:hover {
    transform: scale(1.05);
}

.gcontent.card:hover .card-title-body {
    background: white;
    box-shadow: 0px 0px 25px 3px var(--hover-shadow-galaxy);
}

.gcontent.card:hover .card-title {
    color: var(--body);
}

.gcontent.card .card-img-top {  
    width: 100%;
    height: calc(100% - 3rem); /* image takes up remaining height */
    object-fit: cover;
}

.gcontent.card .card-title-body {
    height: 3rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background: var(--galaxy);
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    padding: 0 5%;
}

.gcontent.card .card-title {
    text-align: center;
    margin-bottom: 0;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2; /* allow up to 2 lines before truncating */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.splide {
    max-width: 100%;
}

.splide__track { 
    padding-top: 10px;
    padding-bottom: 10px;
}

.splide__track .gcontent.card {
    width: 100%;
    height: auto;
}

.splide__track .gcontent.card .card-img-top {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.grid {
    display: grid;
    /* column-gap: 10px;
    row-gap: 10px; */
    padding-bottom: 20px;
}

.grid-sm-dynamic {
    /* grid-template-columns: repeat(4, 1fr); */
    grid-template-columns: repeat(auto-fit, minmax(min(100%/3, max(150px, 100%/9)), 1fr));
}
.grid-sm-dynamic .card {
    margin: 10px;
}

.grid-lg-dynamic {
    width: 100%;
    padding-left: 3%;
    padding-right: 3%;
    
    grid-template-columns: repeat(auto-fit, minmax(min(100%/3, max(300px, 100%/5)), 1fr)); /* 3 - 5 columns ; 300px per grid item max until at 5 columns */
    grid-template-rows: [row1-start] auto [row1-end] auto;
}

.grid-home {
    width: 100%;
    padding-left: 3%;
    padding-right: 3%;
    grid-template-columns: repeat(auto-fit, minmax(min(100%/2, max(300px, 100%/4)), 1fr)); /* home grid should be 4x2 on wide monitors, 2x4 on narrow */
    grid-template-rows: [row1-start] auto [row1-end] auto;
}

.grid-item {
    width: 100%;
    max-width: 1200px;
}
.grid-item .card {
    width: 100%;
    height: 100%;
    background: unset;
    outline: 4px solid !important;
    outline-color: var(--purple1) !important;
    border-radius: var(--border-radius);
    transition: 0.2s ease all;
    position: relative;
    display: flex;
    flex-direction: column;
} 
.grid-item .card:hover {
    animation: 1s infinite shake-weak;
}
.grid-item .card .card-img-top {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.grid-item .card .card-div {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.grid-item .card .card-title-body {
    width: 100%;
    height: 3rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: left;
    color: white;
    border-top: 0;
    padding: 0 5%;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

.grid-item .card .card-title {
    width: 90%;
    text-align: left;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* allow up to 2 line before truncating */
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--galaxy);
} 

.large-grid-item {
    grid-column-end: span 2;
    grid-row-end: span 2;
} 

.wide-grid-item {
    grid-column-end: span 2;
    max-width: none;
} 

.grid-item .icon-container {
    width: 3rem;
    height: 3rem;
    color: white;
    /* background-color: var(--purple3); */
    border: 4px solid white;
    border-radius: 100%;
    position: absolute;
    bottom: 20px;
    padding-top: 10px;
    right: 2%;
    z-index:99;
}

.icon {
    display: inline-block;
    width: 100%;
    height: 100%;
    text-align: center;
    align-items: center;
}

.grid-sub-nav {
    list-style-type: none;
    background-color: var(--tertiary);
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
    height: 150px;

    display: flex;
    justify-content: space-evenly;
    padding: 15px 0;

    overflow-x: clip;

    font-size: smaller;
    font-weight: bold;
}
.grid-sub-nav-thumbnail-img {
    min-height: 100px;
    min-width: 100px;
    max-width: 100px;
    max-height: 100px;
    object-fit: cover;
    border-radius: 50%;
} 
.grid-sub-nav-item {
    transition: all 0.3s ease;
}



/*==================================================
    Peripherals
==================================================*/
.ribbon {
    position: absolute;
    top: -3px;
    left: -3px;
    z-index: 2;
    color: #fff;
    padding: 10px;
    border-radius: 1rem 5px 25px 5px;
    font-size: 20px;
    width: 50px;
    height: 50px;
    text-align: center;
}

.video-color {
    color: var(--video);
}
.video-bg {
    background-color: var(--video);
}

.game-color {
    color: var(--game);
}
.game-bg {
    background-color: var(--game);
}

.activity-color {
    color: var(--activity);
}
.activity-bg {
    background-color: var(--activity);
}

.resource-color {
    color: var(--resource);
}
.resource-bg {
    background-color: var(--resource);
}

.book-color {
    color: var(--book);
}
.book-bg {
    background-color: var(--book);
}

.downloads {
    position: absolute;
    top: -3px;
    right: -3px;
    z-index: 2;
    color: #fff;
    padding: 10px;
    border-radius: 5px 1rem 5px 25px;
    font-size: 14px;
    width: auto;
    min-width: 50px;
    height: 50px;
    background: var(--galaxy);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.downloads i {
    margin-left: 5px;
}

@keyframes shake-weak {
    0% {
        rotate: 0.0010turn;
    }
    50% {
        rotate: -0.0010turn;
    }
    100% {
        rotate: 0.0010turn;
    }
}

@keyframes shake-strong {
    0% {
        rotate: 0.0100turn;
    }
    50% {
        rotate: -0.0100turn;
    }
    100% {
        rotate: 0.0100turn;
    }
}



/*==================================================
    Forms
==================================================*/
.form-text {
    color: white;
}

.form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='white' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    border: var(--bs-border-width) solid var(--border-faded-color);
}

.form-check-input {
    border: var(--bs-border-width) solid var(--border-faded-color);
}

.form-check-input:checked {
    background-color: var(--purple2) !important;
    border-color: var(--purple2);
}

.form-check-input:checked:focus {
    border-color: var(--purple2);
}

input.form-check-input {
    border-style: solid;
}

.form-switch .form-check-input,
.form-switch .form-check-input:focus {
    background-image: var(--switch-icon-purple);
    border: var(--border-active-full);
}

.form-switch .form-check-input:checked,
.form-switch .form-check-input:checked:focus {
    background-image: var(--switch-icon-white);
    border: var(--border-active-full);
}

.form-control,
.form-select,
.form-check-input {
    background-color: unset;
}

.form-control {
    color: white;
    border: var(--bs-border-width) solid var(--border-faded-color)
}

.form-control:focus,
.form-select:focus {
    color: white;
    background-color: unset;
    border-color: var(--purple2);
    box-shadow: unset;
}

.form-control:disabled {
    background-color: unset;
}

.form-select:disabled {
    background-color: unset;
    color: var(--border-faded-color);
}

.form-check-input:focus {
    border-color: var(--border-faded-color);
    box-shadow: unset;
}

input[type="file"]::file-selector-button,
.form-control[type="file"]::file-selector-button {
    color: white;
    background-color: var(--purple2);
    cursor: pointer;
}

input[type="file"]:hover::file-selector-button,
.form-control[type="file"]:hover::file-selector-button {
    color: var(--body) !important;
    background-color: white !important;
}

input[type="file"]:disabled::file-selector-button,
.form-control[type="file"]:disabled::file-selector-button {
    color: white !important;
    background-color: var(--purple2) !important;
    opacity: .5;
}

input[type="file"]:disabled:hover::file-selector-button,
.form-control[type="file"]:disabled:hover::file-selector-button {
    color: white !important;
    background-color: var(--purple2) !important;
    opacity: .5;
}

input[type="file"]:disabled::placeholder,
.form-control[type="file"]:disabled::placeholder {
    color: blue;
    background-color: var(--purple2) !important;
    opacity: .5;
}

.form-range {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    margin: 20px 0;
    background: transparent;
    outline: none;
}

.form-range::-webkit-slider-runnable-track {
    height: 8px;
    background: var(--border-faded-color);
    border: none;
    border-radius: 4px;
}

.form-range::-moz-range-track {
    height: 8px;
    background: var(--border-faded-color);
    border: none;
    border-radius: 4px;
}

.form-range::-ms-track {
    height: 8px;
    background: var(--border-faded-color);
    border: none;
    border-radius: 4px;
}

.form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--purple2);
    border-radius: 50%;
    cursor: pointer;
    margin-top: -6px;
    transition: background 0.3s ease, box-shadow 0.3s ease;
    border: none;
}

.form-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--purple2);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease, box-shadow 0.3s ease;
    border: none;
}

.form-range::-ms-thumb {
    width: 20px;
    height: 20px;
    background: var(--purple2);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease, box-shadow 0.3s ease;
    border: none;
}

.form-range:focus {
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}

input[type="range"]:focus::-webkit-slider-thumb {
    box-shadow: none !important;
}

input[type="range"]:focus::-moz-range-thumb {
    box-shadow: none !important;
}

input[type="range"]:focus::-ms-thumb {
    box-shadow: none !important;
}

input[type="range"]:active::-webkit-slider-thumb {
    background: white;
    color: white;
}

input[type="range"]:active::-moz-range-thumb {
    background: white;
    color: white;
}

input[type="range"]:active::-ms-thumb {
    background: white;
    color: white;
}

.form-range::-ms-track {
    background: transparent;
    border: none;
    box-shadow: none;
}

.form-select {
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="5" viewBox="0 0 10 5"><path fill="%23ffffff" d="M0 0l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 5px;
    color: white
}

.form-select option {
    background-color: var(--body);
    color: white;
}

.form-select option:checked {
    background-color: white;
    color: var(--body);
    box-shadow: 0 0 10px 100px white inset;
}

.form-select option:hover {
    background-color: white;
    color: var(--body);
    box-shadow: 0 0 10px 100px white inset;
}

.input-group-text {
    color: white;
    background: unset;
    border: var(--border-faded-full);
}

.input-group-text:active,
.input-group-text:focus,
.input-group-text:hover {
    color: var(--body);
    background: white;
    border: white;
}



/*==================================================
    Dropdowns
==================================================*/
/* General Dropdown Styling */
.galaxy-dropdown .dropdown-menu {
    background: rgba(25, 5, 46, 0.75);
    border: var(--border-active-full);
    border-radius: var(--border-radius);
    min-width: 210px;
    padding: 0;
    left: 0;
    z-index: 1000;
} 

.galaxy-dropdown .dropdown-menu.right {
    right: 0;
    left: unset;
}

.galaxy-dropdown .dropdown-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: var(--border-radius);
    z-index: -1;
}

.galaxy-dropdown .dropdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-family: var(--metro);
    font-size: 15px;
    padding: 12px 20px;
    text-decoration: none;
    transition: color 0.3s, background-color 0.3s;
}

.galaxy-dropdown .dropdown-item:not(.dropdown-toggle)::after {
    content: none;
}

.galaxy-dropdown .dropdown-item i {
    font-size: 16px;
    color: white;
    transition: color 0.3s;
}

.galaxy-dropdown .dropdown-item:hover,
.galaxy-dropdown .dropdown-item:focus {
    color: var(--purple1);
    background-color: transparent;
}

.galaxy-dropdown .dropdown-item:hover i {
    color: var(--purple1);
}

.galaxy-dropdown-submenu {
    position: relative;
    transition: 0.3s all;
}

.galaxy-dropdown-submenu > .dropdown-menu {
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
}

.galaxy-dropdown-submenu:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    display: block;
}

.galaxy-dropdown-submenu .dropdown-menu .dropdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    color: white;
    font-size: 14px;
    text-decoration: none;
}

.galaxy-dropdown-submenu .dropdown-menu .dropdown-item i {
    font-size: 16px;
    color: white;
}

.galaxy-dropdown-submenu .dropdown-menu .dropdown-item:hover {
    color: var(--purple1);
    background-color: transparent;
}

.galaxy-dropdown-submenu .dropdown-menu .dropdown-item:hover i {
    color: var(--purple1);
}

.galaxy-dropdown .dropdown-item .item-text,
.galaxy-dropdown-submenu .dropdown-item .item-text {
    transition: margin-left 0.3s ease;
}

.galaxy-dropdown-submenu .dropdown-item:hover .item-text {
    margin-left: 5px;
}

.dropdown-item .item-icon {
    font-size: 16px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Username Section */
.galaxy-dropdown .username-item {
    background: var(--galaxy);
    color: white;
    font-weight: bold;
    display: flex;
    align-items: center;
    border-radius: 10px 10px 0 0;
}

.galaxy-dropdown .username-link {
    display: flex;
    align-items: center;
    color: white;
    text-decoration: none;
    width: 100%;
    height: 100%;
    padding: 10px 20px;
    transition: none;
}

.galaxy-dropdown .username-link i {
    font-size: 16px;
    color: white;
    margin-right: 10px;
}

.galaxy-dropdown .username-link:hover {
    color: white;
    background-color: var(--galaxy);
}

.galaxy-dropdown .username-link:hover i {
    color: white;
}

.galaxy-dropdown .dropdown-item:hover,
.galaxy-dropdown .dropdown-item:focus {
    background-color: transparent !important;
    color: var(--purple1) !important;
}

/* Avatar Styling */
.avatar {
    border-radius: 50%;
    max-width: 30px;
    max-height: 30px;
}

.avatar-md {
    border-radius: 50%;
    max-width: 60px;
    max-height: 60px;
}

.avatar-lg {
    border-radius: 50%;
    max-width: 90px;
    max-height: 90px;
}

.avatar-xl {
    border-radius: 50%;
    width: 150px;
    height: 150px;
}



/*==================================================
    intl-tele-input
==================================================*/
.iti__search-input {
    border-radius: var(--border-radius);
    height: 50px;
    padding: 10px;
}

.iti--inline-dropdown .iti__dropdown-content {
    border-radius: var(--border-radius);
}



/*==================================================
    Content List Groups
==================================================*/
.content-list-group {
    border: var(--border-active-full);
    border-radius: var(--border-radius);
}

.content-list-group .list-group-item {
    line-height: 30px;
    color: white;
    background: unset;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.content-list-group .list-group-item .flex-grow-1 {
    overflow: hidden;
}

.content-list-group .list-group-item h5,
.content-list-group .list-group-item p {
    color: inherit;
}

.content-list-group .list-group-item.active {
    background: var(--galaxy);
}

.content-list-group .list-group-item-action.active,
.content-list-group .list-group-item-action:hover {
    color: var(--primary);
    background: white !important;
    box-shadow: 0px 15px 40px -8px rgba(158, 97, 255, 0.5);
}

.content-list-group .thumbnail-img {
    width: auto;
    height: 100%;
    max-width: 150px;
    object-fit: cover;
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
    margin-left: auto;
}



/*==================================================
    Modals
==================================================*/
.modal-content:not(.modal-light .modal-content) {
    color: white;
    background: var(--body);
    border: var(--border-active-full);
    border-radius: var(--border-radius);
}

.modal-light {
    color: black !important;
}

.modal-light .form-control,
.modal-light .form-control:focus,
.modal-light .form-select:focus {
    color: #212529 !important
}

.modal-light input:-webkit-autofill, 
.modal-light input:-webkit-autofill:hover, 
.modal-light input:-webkit-autofill:focus, 
.modal-light input:-webkit-autofill:active {
    -webkit-text-fill-color: black !important;   
}

.modal-header .close-modal {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: white;
    transition: 0.2s ease all;
}

.modal-header .close-modal:hover {
    color: var(--purple2);
}



/*==================================================
    Modals
==================================================*/
.card {
    border: var(--border-active-full);
    border-radius: var(--border-radius);
    background-color: unset;
}

.card-border-none {
    border: none;
}

.card-circle {
    border-radius: 50%;
}

.card-header:first-child {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}



/*==================================================
    Communication
==================================================*/
.swal2-popup {
    border: var(--border-active-full);
    border-radius: var(--border-radius);
    background: var(--body);
    color: white;
}

.swal2-styled.swal2-confirm,
.swal2-styled.swal2-confirm:focus,
.swal2-styled.swal2-confirm:active {
    border: var(--border-active-full);
    border-radius: var(--border-radius);
    background-color: transparent !important;
    box-shadow: none;
    color: white;
}

.swal2-styled.swal2-confirm:hover {
    background: white !important;
    color: var(--body);
}

.swal2-styled.swal2-cancel,
.swal2-styled.swal2-cancel:focus,
.swal2-styled.swal2-cancel:active {
    border: var(--border-active-full);
    border-radius: var(--border-radius);
    background-color: transparent !important;
    box-shadow: none;
    color: white;
}

.swal2-styled.swal2-cancel:hover {
    background: white !important;
    color: var(--body);
}

.swal2-file,
.swal2-input,
.swal2-textarea {
    border: var(--border-faded-full);
    border-radius: var(--border-radius);
    background-color: transparent !important;
    box-shadow: none;
    color: white;
}

.swal2-file:focus,
.swal2-input:focus,
.swal2-textarea:focus {
    border-color: var(--border-active-color);
    box-shadow: none;
}



/*==================================================
    Miscellaneous
==================================================*/
.badge.status-badge {
    width: 100%;
    max-width: 125px;
}

.category-chip {
    display: inline-block;
    color: white;
    background: var(--galaxy);
    border-radius: 9px;
    padding: 0.35rem 0.85rem;
    margin: 0.25rem;
    font-size: 0.9rem;
    line-height: 1.4;
    position: relative;
}

.filter-chip {
    display: inline-block;
    color: white;
    background: unset;
    border: var(--border-active-full);
    border-radius: 9px;
    padding: 0.35rem 0.85rem;
    margin: 0.25rem;
    font-size: 0.9rem;
    line-height: 1.4;
    position: relative;
    cursor: pointer;
    user-select: none;
}

.filter-chip:hover,
.filter-chip.active:hover {
    color: var(--body);
    background: white !important;
    border-color: transparent !important;
}

/* video */
.filter-chip[data-type="1"] {
    border-color: var(--purple3);
}
.filter-chip[data-type="1"].active {
    background: var(--purple3);
}

/* game */
.filter-chip[data-type="2"] {
    border-color: var(--purple1);
}
.filter-chip[data-type="2"].active {
    background: var(--purple1);
}

/* activity */
.filter-chip[data-type="3"] {
    border-color: var(--orange);
}
.filter-chip[data-type="3"].active {
    background: var(--orange);
}

/* resource */
.filter-chip[data-type="4"] {
    border-color: var(--danger1);
}
.filter-chip[data-type="4"].active {
    background: var(--danger1);
}

/* book */
.filter-chip[data-type="5"] {
    border-color: var(--green);
}
.filter-chip[data-type="5"].active {
    background: var(--green);
}

.mark,
mark {
    color: white;
    background-color: var(--purple2);
}

.time-tip {
	border-bottom: 1px dashed;
	cursor: default;
}