/*!**********************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/utils/onboarding/onboarding_wizard.css ***!
  \**********************************************************************************************/
.onboarding-wizard {
    max-width: 37.5rem;
    margin: 0 auto;
    padding: 1.25rem;

    & i.bi {
        justify-content: center;
    }
}

.skiptranslate {
    display: none !important;
}

.step-indicator {
    margin-bottom: 1.875rem;
}

.progress-bar {
    width: 100%;
    height: 0.5rem;
    background-color: var(--low-contrast-color);
    border-radius: 0.25rem;
    overflow: hidden;
    margin-bottom: 0.625rem;
}

.progress {
    height: 100%;
    background: var(--progress-bar-bg-fill-color);
    border-radius: 0.25rem;
    transition: width 0.3s ease;
}

.step-info {
    text-align: center;
    font-size: 0.875rem;
    color: var(--secondary-text-color);
    font-weight: 500;
}

.step-content {
    margin-bottom: 1.875rem;
    min-height: 18.75rem;
}

.step-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-text-color);
    margin-bottom: 0.625rem;
    text-align: center;
}

.step-description {
    font-size: 1rem;
    color: var(--secondary-text-color);
    text-align: center;
    margin-bottom: 1.875rem;
    line-height: 1.5;
}

.navigation-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.9375rem;
    margin-bottom: 1rem;
}

.back-button,
.skip-button,
.next-button {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 5rem;
}

.back-button {
    background-color: var(--secondary-bg-color);
    color: var(--secondary-text-color);
}

.back-button:hover {
    background-color: var(--primary-hover-color);
}

.skip-button {
    background-color: transparent;
    color: var(--secondary-text-color);
    border: 0.0625rem solid var(--primary-border-color);
}

.skip-button:hover {
    background-color: var(--secondary-bg-color);
}

.next-button {
    background-color: var(--success-bg-color);
    color: var(--primary-text-color);
    margin-left: auto;
}

.next-button:hover {
    background-color: var(--primary-hover-color);
}

.next-button:disabled {
    background-color: var(--low-contrast-color);
    cursor: not-allowed;
}

/* OTP Step Styles */
.otp-step {
    text-align: center;
}

.otp-inputs {
    display: flex;
    justify-content: center;
    gap: 0.625rem;
    margin: 1.875rem 0;
}

.phone-verification {
    display: flex;
    flex-direction: column;
}

.otp_input {
    width: 3.125rem;
    height: 3.125rem;
    text-align: center;
    font-size: 1.25rem;
    font-weight: bold;
    border: 0.125rem solid var(--primary-border-color);
    border-radius: 0.5rem;
    background-color: var(--light-bg-color);
    transition: border-color 0.2s ease;
}

.otp_input:focus {
    outline: none;
    border-color: var(--success-bg-color);
    box-shadow: 0 0 0 0.1875rem var(--progressbar-bg-color);
}

/* Google Contacts Step Styles */
.google-contacts-step,
.notifications-step {
    text-align: center;
}

.step-icon {
    font-size: 3rem;
    color: var(--success-bg-color);
    margin-bottom: 1.25rem;
    display: block;
}

.google-contacts-step ul,
.notifications-step ul {
    text-align: left;
    max-width: 25rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.google-contacts-step li,
.notifications-step li {
    padding: 0.625rem 0;
    border-bottom: 0.0625rem solid var(--primary-border-color);
    position: relative;
    padding-left: 1.5625rem;
}

.google-contacts-step li:before,
.notifications-step li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--success-bg-color);
    font-weight: bold;
}

.google-contacts-step li:last-child,
.notifications-step li:last-child {
    border-bottom: none;
}

/* Interests Step Styles */
.interests-step {
    max-height: 25rem;
    overflow-y: auto;
}

.topics-container {
    text-align: left;
}

.interests-step .topics-container>div {
    margin-bottom: 1.25rem;
    border: 0.0625rem solid var(--primary-border-color);
    border-radius: 0.5rem;
    padding: 0.5rem;
}

.interests-step .topics-container .sub-topics {
    padding: 0.9375rem;
}

.interests-step .topics-container .sub-topics label {
    display: block;
    padding: 0.5rem 0;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--secondary-text-color);
    transition: color 0.2s ease;
}

.interests-step .topics-container .sub-topics label:hover {
    color: var(--success-bg-color);
}

.interests-step .topics-container input[type='checkbox'] {
    margin-right: 0.625rem;
    transform: scale(1.1);
}

/* Mobile Responsive */
@media (orientation: portrait) {
    .onboarding-wizard {
        padding: 0.9375rem;
    }

    .step-title {
        font-size: 1.25rem;
    }

    .step-description {
        font-size: 0.875rem;
    }

    .navigation-buttons {
        flex-direction: row-reverse;
        gap: 0.625rem;
    }

    .back-button,
    .skip-button,
    .next-button {
        width: 100%;
        order: 2;
    }

    .next-button {
        order: 1;
        margin-left: 0;
    }

    .otp-inputs {
        gap: 0.5rem;
    }

    .otp_input {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.125rem;
    }

    .step-content {
        min-height: 15.625rem;
    }

    .interests-step {
        max-height: 18.75rem;
    }
}

.phone_verification_step {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.onboarding-wizard>.step-content>.language-step {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.language-selector {
    padding: 0.5rem 1rem;
    border: 0.0625rem solid var(--primary-border-color);
    color: var(--primary-text-color);
    border-radius: 0.5rem;
    background: black;
}

.ai_post_confirmation_step_content_wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1rem;
}

.ai_post_confirmation_step_content_wrapper .title {
    font-size: 1.5rem;
    color: var(--primary-text-color);
    text-align: center;
}

.ai_post_confirmation_step_content_wrapper .button_wrapper {
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.button_wrapper>.choice_button label {
    padding: 0.5rem;
    border-radius: 0.5rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--primary-text-color);
    border: 0.1rem solid var(--secondary-text-color);
    background: transparent;
    border: 0.1rem solid var(--secondary-text-color);
    transition: border-color 0.2s ease, color 0.2s ease;
}

.button_wrapper>.choice_button input[type='radio']:checked+label {
    background: transparent;
    border-color: var(--primary-accent-color);
    color: white;
}

.description hr {
    border: none;
    margin-left: 1rem;
}
/*!****************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/body.css ***!
  \****************************************************************/
:root {
    --fg-color: #c1c1c1;
    --dull-bg: #000;
    --font-weight: 300;
    --dark-feed-color: #10203f;
    --chat-color: #182848;
    --msg-bg-color: #061126;
    --notification-box-color: #afb3bb;
    --dark-bg-color: #131f38;
    --pink: 312deg;
    --green: 70deg;
    --yellow: 60deg;
    --orange: 40deg;
    --teal: 167deg;
    --blue: 220deg;
    --red: 0deg;
    --vh: 1vh;
    --my-bg-color: hsl(var(--blue) 50% 19%);

    font-size: max(16px, min(1vw, 1.6vh));
    font-family: var(--default-font);

    --navigation-color: hsl(var(--blue) 80% 10%);

    /* color variables */
    --home-icon-dark-color: #f08bff;
    --cyan-color: cyan;
    --primary-color-value: 220deg;
    --secondary-color-value: 221deg;
    --primary-color: hsl(0deg 1% 6%);
    --secondary-color: hsl(0deg 1% 10%);
    --low-contrast-color: hsl(0deg 1% 20%);
    --primary-bg-color: var(--primary-color);
    --secondary-bg-color: var(--secondary-color);
    --low-contrast-bg-color: var(--low-contrast-color);
    --primary-hover-color: var(--low-contrast-color);
    --dark-hover-color: var(--primary-color);
    --primary-button-color: var(--low-contrast-color);
    --primary-border-color: var(--low-contrast-color);
    --dropdown-bg-color: hsl(0deg 1% 15%);
    --secondary-border-color: #c1c1c1;
    --primary-accent-color: hsl(293deg 76% 32%);
    --primary-accent-light-color: hsl(293deg 76% 25%);
    --light-bg-color: #fff;
    --light-input-bg-color: #e9f5f5;
    --logo-color-cyan: hsl(186deg 100% 45%);
    --logo-color-yellow: hsl(50deg 100% 50%);
    --logo-color-dark-pink: hsl(293deg 76% 32%);
    --logo-color-light-pink: hsl(326deg 75% 50%);
    --icon-color: #a69f93;
    --secondary-icon-color: #821491;
    --primary-text-color: #fff;
    --secondary-text-color: #c1c1c1;
    --landscape-dynamic-width: min(100%, 50rem);
    --ai-post-text-color: rgb(255, 255, 255);
    --contrast-accent-light-color: #2a2a40;
    --input-accent-color: #363956;
    --level-up-text-color: hsl(16.11deg 100% 65.69%);
    /*	
	--primary-bg-color :linear-gradient(hsl(var(--blue) 80% 10%),hsl(var(--blue) 70% 8%)); 
	--secondary-bg-color :hsl(var(--primary-color-value) 50% 20%); 
	*/
    --fill-like-button-color: var(--logo-color-yellow);
    --fill-comment-button-color: var(--logo-color-cyan);
    --post-bg-color: var(--secondary-bg-color);
    --my-mandli-member-bg-color: var(--low-contrast-bg-color);
    --about-mandli-members-bg-color: var(--secondary-bg-color);
    --chat-bg-color: linear-gradient(#3a3a68, var(--my-bg-color));
    --chat-toolbar-bg-color: #131f38;
    --chat-input-container-bg-color: #182848;
    --chat-input-container-text-color: #fff;
    --chat-input-border-color: rgb(255 255 255 / 50%);
    --chat-send-button-border-color: rgb(255 255 255 / 50%);
    --chat-send-button-bg-color: #061126;
    --chat-input-placeholder-text-color: #fff;
    --mobile-chat-list-bg-color: var(--primary-bg-color);
    --mobile-chat-list-border-color: rgb(255 255 255 / 50%);
    --mobile-new-chat-icon-color: var(--icon-color);
    --full-screen-chat-bg-color: hsl(var(--blue) 50% 19%);
    --chat-mini-window-border-color: rgb(255 255 255 / 50%);
    --chat-mini-window-toolbar-bg-color: var(--primary-bg-color);
    --chat-mini-window-toolbar-text-color: rgb(255 255 255 / 70%);
    --chat-others-bg-color: #10203f;
    --chat-mine-bg-color: rgb(255 255 255 / 70%);
    --chat-mine-text-color: rgb(0 0 0 / 90%);
    --link-hover-color: #a6dcff;
    --chat-mine-link-color: #10203f;
    --chat-image-border-color: rgb(255 255 255 / 30%);
    --blinking-border-color: hsl(var(--pink) 100% 40%);
    --group-user-name-text-color: #553a68;
    --toolbar-button-hover-bg-color: var(--primary-hover-color);
    --toolbar-button-hover-border-color: var(--primary-hover-color);
    --chat-div-bg-hover-color: var(--primary-hover-color);
    --chat-date-border-color: rgb(255 255 255 / 20%);
    --circle-profile-area-bg-color: var(--low-contrast-bg-color);
    --select-connections-bg-color: #757b88;
    --ellipsis-three-dot-color: var(--icon-color);

    /* --create-buttons-border-color: var(--icon-color); */
    --circle-img-border-color: rgb(255 255 255 / 16%);
    --odd-bg-color: var(--secondary-bg-color);
    --even-bg-color: var(--primary-bg-color);
    --comment-border-color: rgb(255 255 255 / 20%);
    --disable-comment-bg-color: #10203f;
    --disable-comment-text-color: lightskyblue;
    --not-preferred-text-color: #fff;
    --preferred-button-text-color: yellow;
    --preferred-button-bg-color: hsl(var(--green) 80% 20%);
    --connection-bg-color: #131f38;
    --connection-image-border-color: rgb(255 255 255 / 30%);
    --selector-input-bg-color: hsl(var(--blue) 0% 60%);
    --selector-input-text-color: #fff;
    --selector-added-border-color: rgb(255 255 255 / 30%);
    --copy-url-border-color: rgb(255 255 255 / 20%);
    --url-input-bg-color: #c1c1c1;
    --create-new-link-border-color: rgb(255 255 255 / 50%);
    --navigation-bar-bg-color: var(--secondary-bg-color);
    --landscape-icons-hover-text-color: var(--icon-color);
    --landscape-icons-hover-bg-color: var(--primary-hover-color);
    --landscape-home-label-text-color: #fff;
    --landscape-search-bar-bg-color: transparent;
    --landscape-search-bar-text-color: #c1c1c1;
    --landscape-search-bar-border-color: rgb(255 255 255 / 20%);
    --feature-bg-color: #03022a;
    --feature-border-color: rgb(255 255 255 / 20%);
    --feature-hover-bg-color: #020115;
    --create-post-bg-color: transparent;
    --create-post-button-bg-color: #bcbcbc;
    --create-post-button-border-color: rgb(255 255 255 / 40%);
    --user-profile-pic-border-color: rgb(255 255 255 / 8%);
    --spoiler-bg-color: #f1f1f1;
    --spoiler-text-color: #f1f1f1;
    --portrait-home-label-text-color: #fff;
    --attach-link-bg-color: #000;
    --large-logo-bg-color: #03022a;
    --signup-area-border-color: rgb(255 255 255 / 10%);
    --signup-area-text-color: #424756;
    --signup-area-bg-color: #c1c3cb;
    --login-signup-form-border-color: rgb(255 255 255 / 20%);
    --login-signup-button-bg-color: rgb(26 137 23 / 100%);
    --login-signup-button-border-color: rgb(255 255 255 / 10%);
    --login-signup-button-text-color: #fff;
    --login-signup-button-hover-bg-color: rgb(15 115 12 / 100%);
    --login-signup-button-hover-text-color: #cfcc0e;
    --import-contacts-border-color: rgb(255 255 255 / 30%);
    --alert-error-bg-color: hsl(var(--red) 50% 20%);
    --alert-error-text-color: #fff;
    --success-bg-color: darkgreen;
    --discard-image-button-border-color: #c51515;
    --loading-border-color: linear-gradient(hsl(var(--green) 100% 50%) 20%, hsl(var(--pink) 100% 50%) 80%, hsl(var(--blue) 100% 50%) 100%);
    --loading-image-bg-color: #111;
    --cropper-buttons-bg-color: hsl(var(--blue) 80% 5%);
    --install-button-text-color: hsl(var(--blue) 80% 50%);
    --link-color: #a6dcff;
    --pre-bg-color: #000;
    --mandli-details-bg-color: var(--low-contrast-bg-color);
    --mandli-ellipsis-button-hover-bg-color: #000;
    --alert-message-text-color: red;
    --mandli-details-border-color: var(--primary-border-color);
    --mandli-image-border-color: rgb(255 255 255 / 16%);
    --mandli-name-hover-bg-color: var(--primary-hover-color);
    --bottom-navigation-border-color: rgb(255 255 255 / 50%);
    --bottom-navigation-bg-color: var(--primary-bg-color);
    --top-navigation-bg-color: var(--primary-bg-color);
    --portrait-navigation-icon-border-color: var(--icon-color);
    --create-post-icon-color: var(--icon-color);
    --portrait-navigation-icon-hover-bg-color: #10203f;
    --navigation-icon-text-color: var(--icon-color);
    --landing-page-about-option-bg-color: hsl(var(--blue) 80% 10%);
    --landing-page-signup-option-bg-color: #c1c3cb;
    --landing-page-signup-option-text-color: #424756;
    --features-tab-bg-color: hsl(220deg 80% 10%);
    --notification-popup-border-color: rgb(255 255 255 / 20%);
    --notification-box-text-color: var(--secondary-text-color);
    --follow-option-bg-color: hsl(var(--blue) 80% 5%);
    --connection-notification-img-border-color: hsl(var(--blue) 80% 19%);
    --connection-notification-reason-text-color: hsl(var(--orange) 50% 60%);
    --notification-sender-name-text-color: hsl(var(--orange) 50% 50%);
    --connection-request-message-border-color: rgb(255 255 255 / 30%);
    --connection-request-message-text-color: cadetblue;
    --dropdown-border-color: hsl(var(--orange) 50% 30%);
    --popup-bg-color: hsl(var(--blue) 80% 10%);
    --popup-border-color: rgb(255 255 255 / 40%);
    --popup-title-bg-color: hsl(var(--blue) 80% 5%);
    --popup-title-border-color: rgb(255 255 255 / 30%);
    --popup-button-bg-color: #131f38;
    --popup-button-text-color: var(--icon-color);
    --popup-input-bg-color: linear-gradient(hsl(var(--blue) 50% 25%) 20%, hsl(var(--blue) 50% 16%));
    --popup-input-text-color: #c1c1c1;
    --popup-input-border-color: rgb(255 255 255 / 20%);
    --post-profile-pic-border-color: rgb(255 255 255 / 16%);
    --post-text-color: #ffffff;
    --post-border-color: hsl(249 30% 35%);
    --side-bar-mandli-border-color: hsl(249 25% 27%);
    --post-top-border-color: rgb(255 255 255 / 60%);
    --post-profile-name-text-color: hsl(var(--blue) 30% 95%);
    --post-image-border-color: rgb(255 255 255 / 20%);
    --button-text-color: var(--icon-color);
    --post-button-border-color: rgb(255 255 255 / 20%);
    --button-hover-bg-color: var(--primary-hover-color);
    --post-content-text-color: rgb(255 255 255 / 90%);
    --read-label-text-color: hsl(var(--blue) 70% 85%);
    --edit-profile-heading-border-color: rgb(255 255 255 30%);
    --labelled-input-bg-color: #182848;
    --labelled-input-border-color: rgb(255 255 255 / 30%);
    --recommendation-popup-bg-color: #000;
    --portrait-search-container-bg-color: #061126;
    --portrait-search-input-bg-color: #061126;
    --portrait-search-input-text-color: #c1c1c1;
    --portrait-search-icon-bg-color: #061126;
    --mandli-importance-input-bg-color: hsl(var(--blue) 70% 30%);
    --mandli-importance-text-color: #fff;
    --settings-form-button-text-color: #c1c1c1;
    --setting-form-submit-button-text-color: yellow;
    --editor-images-border-color: var(--icon-color);
    --editor-images-bg-color: #131f38;
    --editor-image-border-color: rgb(255 255 255 / 50%);
    --no-importance-text-color: green;
    --low-importance-text-color: greenyellow;
    --medium-importance-text-color: yellow;
    --high-importance-text-color: orangered;
    --extreme-importance-text-color: red;
    --custom-importance-text-color: lightskyblue;
    --editor-title-border-color: #757b88;
    --editor-close-icon-bg-color: #10203f;
    --editor-close-icon-border-color: rgb(255 255 255 / 30%);
    --form-title-border-color: #131f38;
    --formatting-button-bg-color: #10203f;
    --portrait-editor-border-color: #757b88;
    --formatting-options-button-border-color: #757b88;
    --selected-tab-label-text-color: var(--icon-color);
    --selected-tab-label-border-color: var(--icon-color);
    --unselected-tab-label-border-color: #757b88;
    --urgency-point-input-text-color: var(--icon-color);
    --urgency-point-input-border-color: #aa84bc;
    --post-textarea-bg-color: #131f38;
    --post-textarea-text-color: #fff;
    --preview-input-tab-border-color: #757b88;
    --preview-tab-bg-color: #131f38;
    --post-image-area-border-color: var(--icon-color);
    --post-image-area-text-color: var(--icon-color);
    --post-comment-option-bg-color: #131f38;
    --slide-content-footnote-text-color: hsl(var(--blue) 5% 5%);
    --update-form-label-bg-color: #061126;
    --update-form-input-border-color: rgb(255 255 255 / 30%);
    --update-form-image-bg-color: 0;
    --change-image-icon-border-color: var(--icon-color);
    --circle-privacy-select-bg-color: #061126;
    --circle-privacy-select-text-color: yellow;
    --friends-selector-bg-color: #061126;
    --active-tab-bg-color: hsl(243.53deg 100% 86.67%);

    /*	--profile-circle-bg-color: hsl(var(--blue) 80% 10%); */
    --profile-circle-text-color: hsl(60deg 70% 40%);
    --profile-circle-followed-text-color: rgb(255 255 255 / 25%);
    --profile-circle-follow-button-border-color: rgb(255 255 255 / 10%);
    --profile-circle-follow-button-bg-color: hsl(var(--blue) 80% 20%);
    --profile-circle-follow-button-text-color: #fff;
    --user-image-bg-color: linear-gradient(#13a913, #087cae);
    --user-image-border-color: #061126;
    --generic-button-bg-color: var(--primary-button-color);
    --generic-button-text-color: var(--primary-text-color);
    --generic-button-hover-bg-color: var(--primary-hover-color);
    --user-info-bg-color: var(--low-contrast-bg-color);
    --user-profile-heading-text-color: hsl(var(--blue) 10% 80%);
    --user-profile-heading-bg-color: var(--secondary-bg-color);
    --user-experience-bg-color: hsl(var(--blue) 80% 10%);
    --vertical-ellipsis-bg-color: #10203f;
    --vertical-ellipsis-border-color: rgb(255 255 255 / 30%);
    --vertical-ellipsis-label-text-color: var(--icon-color);
    --vertical-ellipsis-button-text-color: var(--icon-color);
    --recommendation-editor-textarea-bg-color: hsl(var(--blue) 0% 60%);
    --recommendation-editor-textarea-text-color: #fff;
    --connect-form-input-bg-color: hsl(var(--blue) 80% 5%);
    --connect-form-input-text-color: #fff;
    --portrait-user-info-border-color: rgb(255 255 255 / 12%);
    --landscape-user-info-border-color: rgb(255 255 255 / 12%);
    --user-experience-date-text-color: gray;
    --mandli-name-heading-color: yellow;
    --progressbar-bg-color: rgba(138, 43, 226, 0.2);
    --progress-bar-bg-fill-color: linear-gradient(90deg, #8a2be2, #ff69b4);
    --partial-read-post-color: linear-gradient(#ffffff, #f4a1ff);
    --new-post-for-user-color: linear-gradient(to right, #ff2900, #ff5e00, #ff914d);

    /*	--user-experience-description-bg-color: hsl(var(--blue) 50% 10%);
	--user-experience-hover-bg-color: var(--primary-hover-color);
	--user-profile-bg-color: hsl(var(--blue) 80% 11%); */
    --recommender-text-color: hsl(var(--blue) 50% 19%);
    --recommender-hover-text-color: hsl(var(--blue) 50% 19%);
    --recommendation-msg-text-color: hsl(var(--blue) 50% 19%);
    --recommendation-msg-container-bg-color: rgb(255 255 255 / 80%);
    --recommendation-msg-container-border-color: rgb(255 255 255 / 40%);
    --reject-button: red;
    --reject-button-bg: #000;
    --approve-button: green;
    --approve-button-bg: #000;

    /* font-family-variables */
    --default-font: Arial, roboto, sans-serif;
    --short-text-font: nunito, sans-serif;
    --tag-line-font: alkatra, cursive;
    --code-tag-font: monospace;
    --formatting-button-font: georgia, cursive;
    --ai-post-font: ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, sans-serif, Segoe UI Emoji, Segoe UI Symbol;
    --ai-post-heading-font: Poppins, sans-serif;

    /* line-height-variables */
    --long-text-line-height: 1.3rem;
    --tutorial-line-height: 2.4rem;

    /* border-radius-variables */
    --one-br: 1rem;
    --two-br: 2rem;
    --three-br: 3rem;
    --half-br: 0.5rem;
    --three-fourth-br: 0.75rem;
    --one-fourth-br: 0.25rem;
    --round-image-br: 50%;
    --connection-name-circle-br: 0.3rem;
    --code-tag-index-br: 0.3rem;
    --posts-content-br: 0.3rem;
    --user-friend-selector-br: 10%;
    --attach-link-index-br: 10px;
    --logo-large-index-br: 30%;
    --notification-count-br: 30%;
    --login-input-index-br: 0.4rem;
    --top-right-aligned-br: 2rem 2rem 0;
    --top-left-aligned-br: 2rem 2rem 0;
    --bottom-right-aligned-br: 2rem 0 2rem 2rem;
    --bottom-left-aligned-br: 0 2rem 2rem;
    --posts-image-br: 0.35rem;
    --labelled-input-profile-update-br: 0.2rem;
    --follow-button-user-profile-br: 0.4rem;
    --vertical-ellipsis-container-br: 0.5rem 0 0 0.5rem;
    --vertical-ellipsis-dropdown-button-br: 0 0.5rem 0.5rem 0;

    /* box-shadow-variables */
    --chat-mini-window-bs: 0 0 0.6rem black;
    --others-chat-bs: 0 0 0.1rem var(--msg-bg-color);
    --mine-chat-bs: 0 0 0.15rem black;

    /*	--circle-profile-area-bs: 0 0 0.1rem; */
    --circle-metadata-button-bs: 0 0 0.25rem black;
    --user-friend-selector-bs: 0.2rem 0.2rem 0.2rem var(--dull-bg); /* 3  */
    --features-bs: 0.1rem 0.1rem 0.1rem var(--dull-bg);
    --title-signup-bs: 0 0 1rem black;
    --cropper-view-box-bs: 0 0 0 1px #39f;
    --labelled-input-bs: 0 0 0.4rem #000;
    --post-images-text-editor-bs: 0 0 0.5rem black; /* 2 */
    --recommendation-msg-container-bs: 0 0.4rem 0.5rem #000;
    --vertical-ellipsis-bs: 0 0 0.2rem black;
    --mini-description-border-color: #fff;
    --mini-description-bg-color: #10203f;
    --notification-popup-bs: 0 0.75rem 1.5rem 0 rgb(0 0 0 / 60%);
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--fg-color);
    height: calc(100vh - 16px);
    height: calc(var(--vh) * 100);
    box-sizing: border-box;
    width: calc(100vw - 16px);
    font-weight: var(--font-weight);
    max-width: 100vw;
    min-width: 100vw;
    margin: 0;
    font-family: var(--default-font);
    background: var(--primary-bg-color);
}

[hidden],
.hidden,
input[type='radio']:not(:checked).both_radio + .foldable,
input[type='checkbox']:not(:checked).fold_control + .foldable,
input:not(:checked) + label + .foldable {
    display: none !important;
}

@media (orientation: landscape) {
    input[type='radio']:not(:checked).landscape_radio + input[type='radio'].portrait_radio + .foldable {
        display: none !important;
    }
}

@media (orientation: portrait) {
    input[type='radio']:not(:checked).portrait_radio + .foldable {
        display: none !important;
    }

    input[type='checkbox']:not(:checked).portrait_checkbox + .foldable {
        display: none !important;
    }
}

*,
::before,
::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.comment_button {
    color: var(--fill-comment-button-color);
}

.like_button {
    color: var(--fill-like-button-color);
}

/*!*********************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/chat/chat.css ***!
  \*********************************************************************/
:root {
    --group-chat-text-color: white;
    --group-chat-name-input-border-color: hsl(293, 45%, 38%);
    --add-chat-icon-color: hsl(293, 40%, 50%);
    --initial-chat-header-border-color: hsl(293, 35%, 38%);
    --chat-header-heading-text-color: hsl(293, 35%, 85%);
    --reactions-count-section-text-color: white;
    --reaction-delete-icon-color: hsl(0deg 72% 61%);
    --recent-emojis-container-with-add-button-border-color: black;
    --mobile-reaction-container-icons-color: white;
    --highlight-reaction-bg: rgba(255, 255, 0, 0.2);
    --chat-file-meta-text-color: #667781;
    --contrast-accent-dark-color: #000022;
}

@keyframes highlight_pulse {
    0% {
        background-color: transparent;
    }

    50% {
        background-color: var(--highlight-reaction-bg);
    }

    100% {
        background-color: transparent;
    }
}

.highlight_reaction {
    animation: highlight_pulse 2s ease-in-out;
    border-radius: var(--half-br);
}

@media (orientation: portrait) {
    #chat_area {
        grid-area: main_area;
        padding: 0.5rem;
        margin: 0;
        max-height: calc(100 * var(--vh) - 3.5rem);
        overscroll-behavior: none;
    }

    .full_screen > .chat_mini_window_chat_content {
        max-height: calc(100 * var(--vh) - 6rem);
    }

    .chat_mini_window_chat_content .date {
        font-size: 0.6rem;
    }

    .chat_mini_window_toolbar {
        min-width: 100%;
        background: var(--dropdown-bg-color);
        min-height: 2.6rem;
    }

    .chat_mini_window.full_screen {
        border: 0;
    }

    div.chat_mini_window_input_div {
        grid-area: text_input;
        display: flex;
        background: #3e3e5f;
        align-items: flex-end;
        border-radius: 1rem;
        margin-bottom: 0.25rem;
        padding: 0.5rem 0.75rem;
    }

    .chat_mini_window_input_textarea_div {
        font-size: 1rem;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        width: 100%;
    }

    .full_screen > .chat_mini_window_chat_footer > div.chat_mini_window_input_div > .chat_mini_window_input_textarea_div > textarea {
        border: solid;
        border-radius: var(--half-br);
        border-width: 0.08rem;
        min-width: 100%;
        font-size: 1rem;
        font-family: var(--default-font);
        /* min-height: 3rem;
        padding-top: 0.5rem; */
        padding-left: 0.5rem;
        resize: none;
        outline: none;
        background: var(--low-contrast-bg-color);
        color: var(--primary-text-color);
    }

    #mobile_chat_area {
        display: flex;
        gap: 5vw;
        align-items: center;
        background: var(--primary-bg-color);
        padding-left: 3vw;
        min-width: 100%;
        max-width: 100%;
        padding-bottom: 0.25rem;
        padding-top: 0.25rem;
        position: sticky;
        top: -1px;
        transition: transform 0.3s ease-in-out;
        z-index: 30;
        box-shadow: var(--post-bg-color) 0.1rem 0.1rem 0.1rem;
    }

    /* When chat bar should slide out (hide) */
    #mobile_chat_area.hide {
        transform: translateY(-100%);
        box-shadow: none;
    }

    /* When chat bar is visible (slides in smoothly) */
    #mobile_chat_area.show {
        transform: translateY(0);
    }

    .mobile_new_chat,
    .mobile_bar_chat_div {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .mobile_chat_bar {
        display: flex;
        max-width: 100%;
        gap: 5vw;
        overflow-x: scroll;
    }

    .mobile_new_chat {
        color: var(--primary-text-color);
    }

    .mobile_new_chat > div {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile_new_chat > div > label {
        margin: 0;
        border: solid;
        padding: 0.5rem 0.7rem;
        border-width: 0.1rem;
        font-size: 1.5rem;
        border-radius: var(--one-br);
    }

    .mobile_bar_chat_name {
        display: flex;
        align-items: flex-start;
    }

    .mobile_new_chat > p,
    .mobile_bar_chat_name > label {
        margin: 0;
        font-size: 0.6rem;
        font-family: var(--tag-line-font);
        text-wrap: nowrap;
    }
}

#full_screen_chat_area {
    grid-area: main_area;
    overflow-y: scroll;
}

@media (orientation: landscape) {
    #chat_area {
        grid-area: chat;
        max-height: calc(100 * var(--vh) - 3rem);
        overflow-y: scroll;
        padding: 0.5rem;
    }

    .full_screen > .chat_mini_window_chat_content {
        max-height: calc(100 * var(--vh) - 6rem);
        padding-right: 0.8rem;
        padding-left: 0.8rem;
    }

    .chat_mini_window_chat_content .date {
        font-size: 0.8rem;
    }

    div.chat_mini_window_input_div {
        grid-area: text_input;
        display: flex;
        background: #3e3e5f;
        align-items: flex-end;
        border-radius: 1rem;
        margin-bottom: 0.25rem;
        padding: 0.5rem;
    }

    div.chat_mini_window_input_div > div.chat_mini_window_input_textarea_div > textarea {
        border-radius: var(--one-fourth-br);
        min-width: 100%;
        max-height: 5.56rem;
        overflow-y: auto;
        font-size: 0.85rem;
        font-family: var(--default-font);
        background: transparent;
        color: var(--primary-text-color);
        border: none;
        outline: none;
        resize: none;
        font-family: var(--ai-post-font);
        animation: constant-pulse 0.1s ease-in-out infinite;
    }

    @keyframes fast-constant {
        0%,
        100% {
            caret-color: #fff;
        }

        50% {
            caret-color: transparent;
        }
    }
}

#chat_area {
    display: flex;
    flex-direction: column;
    gap: 0.34rem;
    padding: 0.5rem;
    box-sizing: border-box;
    overscroll-behavior: none;
    overflow-y: scroll;
    background: black;
    width: 100%;
}

@media (orientation: landscape) {
    #chat_area {
        padding-inline: 1rem;
    }
}

#pop_screen_chat_area {
    position: fixed;
    display: flex;
    flex-direction: row;
    bottom: 0%;
    right: 0%;
    z-index: 20;
    min-height: 50%;
    max-height: 50%;
    justify-content: flex-end;
    pointer-events: none;
}

.chat_mini_window {
    position: relative;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    display: flex;
    flex-direction: column;
    min-width: 25rem;
    min-height: 100%;
    max-width: 25rem;
    margin-left: 1rem;
    margin-right: 0.5rem;
    max-height: 100%;
    overscroll-behavior: none;
    overflow: hidden;
    pointer-events: initial;
    background-image: url(https://tellect.in/images/chat_background.png);
}

.chat_mini_window.minimized {
    max-height: 3rem;
    min-height: 3rem;
    align-self: flex-end;
}

.chat_mini_window_toolbar {
    flex: 0 0 3rem;
    min-width: 100%;
    max-width: 100%;
    padding: 0 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--contrast-accent-light-color);
    z-index: 1;
    /* Keep toolbar above other content */

    & .chat_back_button {
        margin-right: 0.5rem;
    }

    & .bi::before {
        font-weight: 900;
    }
}

.chat_mini_window_toolbar .toolbar_user_container {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    color: var(--primary-text-color);
    overflow: hidden;
    width: 100%;
}

.chat_mini_window_toolbar .toolbar_user_container:hover {
    text-decoration: underline;
}

.chat_meet_button {
    margin-right: 0.5rem;
}

.chat_mini_window_toolbar .toolbar_user_container img {
    height: 2.5rem;
    width: 2.5rem;
    border-radius: var(--round-image-br);
    border: 0.2rem solid var(--primary-border-color);
}

.chat_mini_window_toolbar .toolbar_user_container p {
    max-width: 60%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.chat_mini_window_toolbar_buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.chat_mini_window_chat_content {
    flex: 1 1 auto;
    display: flex;
    gap: 0.15rem;
    flex-direction: column;
    color: var(--primary-text-color);
    align-items: flex-start;
    /* background: var(--secondary-bg-color); */
    font-size: 1rem;
    padding: 0.25rem 0;
    overscroll-behavior: none;
    overflow-y: auto;
    max-width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    & .date_floater {
        position: absolute;
        top: 3rem;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 0.5rem;
        z-index: 999;

        & p {
            background: var(--contrast-accent-light-color);
            font-size: 0.6rem;
            padding: 0.25rem;
            border-radius: 0.5rem;
        }
    }
}

.chat_mini_window_chat_content .text_container blockquote {
    margin-bottom: 1rem;
}

.chat_mini_window_input_div {
    flex: 0 0 auto;
    position: relative;
    padding: 0 0.5rem;
    gap: 0.75rem;
    /* min-height: 4.5rem; */
    /* max-height: 30vh;  Limit maximum height */
    overflow-y: auto;
    /* Make input area scrollable when content is large */
    background: #3e3e5f;
}

.chat_mini_window_chat_footer .chat_mini_window_reply_area {
    position: relative;
    background: var(--input-accent-color);
    padding: 0.5rem;
    border-radius: var(--half-br);
    max-height: 20vh;
    overflow-y: auto;
}

.chat_mini_window_chat_footer .chat_mini_window_reply_area .reply_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.2rem;
    gap: 0.5rem;
}

.chat_mini_window_chat_footer .chat_mini_window_reply_area .reply_container .text_container {
    background: var(--contrast-accent-light-color);
    border-radius: var(--half-br);
    width: 95%;
    padding: 0.2rem;
}

.chat_mini_window_chat_footer .chat_mini_window_reply_area .reply_container .text_container img {
    max-height: 3rem;
}

.chat_mini_window_chat_footer .chat_mini_window_reply_area .reply_container .text_container * {
    font-size: 0.8875rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media (orientation: landscape) {
    .others:hover .reaction_button,
    .mine:hover .reaction_button {
        display: block;
    }
}

.others.with_reaction .time,
.mine.with_reaction .time {
    padding-bottom: 0.3rem;
}

.mine p.time,
.others p.time {
    margin: 0;
    opacity: 0.5;
    font-size: 0.6rem;
    padding-top: 0.2rem;
    display: flex;
    flex-direction: column-reverse;
    align-self: flex-end;
    padding-left: 0.25rem;
    margin-top: -0.25rem;
}

a:hover {
    color: var(--link-hover-color);
    cursor: pointer;
}

.others .text_container,
.mine .text_container {
    cursor: text;
    border-radius: var(--half-br);
    padding: 0.1rem 0.5rem;
    position: relative;
    z-index: 0;
    min-width: 20%;
    max-width: 75%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    touch-action: pan-y;
    margin-top: 0.2rem;
}

.text_container .name_and_content_container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.message_dropdown_button {
    position: absolute;
    top: 0;
    right: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 0 0.5rem 0 0.5rem;
    z-index: 10;
    color: var(--primary-text-color);
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.others .text_container .message_dropdown_button {
    background: var(--contrast-accent-light-color);
}

.mine .text_container .message_dropdown_button {
    background: var(--primary-accent-light-color);
}

.text_container:hover .message_dropdown_button {
    opacity: 1;
}

.message_dropdown_button:hover {
    background: rgba(0, 0, 0, 0.15);
}

.message_dropdown_button i {
    font-size: 1rem;
}

.others .text_container > div,
.mine .text_container > div {
    overflow: scroll;
    width: 100%;
    position: relative;
    display: flex;
}

.others .text_container div > img,
.mine .text_container div > img {
    max-height: 25rem;
    max-width: 87%;
    cursor: pointer;
}

.message_reply > img {
    max-height: 5rem;
    max-width: 100%;
    cursor: pointer;
}

.image_preview_popup {
    display: flex;
    align-items: center;
    justify-content: center;
}

.image_preview_popup img {
    max-width: 100%;
    max-height: 80vh;
}

.others .text_container {
    background-color: var(--contrast-accent-light-color);
}

.mine .text_container {
    background: var(--primary-accent-light-color);
}

.chat_mini_window p {
    margin: 0.2rem 0;
}

.mine .text_container .text,
.others .text_container .text {
    width: 100%;
}

.message_expired,
.message_deleted {
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 0.1rem;
}

.message_reactions_container {
    display: flex;
    flex-direction: row;
    background: var(--attach-link-section-input-border-color);
    border-radius: 1rem;
    padding: 0.01rem 0.5rem;
    gap: 0.2rem;
    border: 0.01rem solid black;
    cursor: pointer;
}

.mine {
    /* margin-top: 0.2rem; */
    padding-right: 0.8rem;
    max-width: 100%;
    min-width: 100%;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 0.5rem;
    position: relative;

    .reaction_dropdown {
        position: absolute;
        right: 1rem;
        bottom: -1rem;
    }
}

.others.with_reaction,
.mine.with_reaction {
    margin-bottom: 1rem;
    /* or adjust based on your design */
}

.others,
.mine {
    .reaction_button {
        cursor: pointer;
        display: none;
    }
}

.others {
    /* margin-top: 0.2rem; */
    padding-left: 0.8rem;
    max-width: 100%;
    min-width: 100%;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    position: relative;

    .reaction_dropdown {
        position: absolute;
        bottom: -1rem;
        left: 1rem;
    }

    .reaction_dropdown_group_chat {
        position: absolute;
        bottom: -1rem;
        left: 3rem;
    }
}

.chat_context_menu {
    background: var(--dropdown-bg-color);
    font-family: var(--default-font);
}

.mine .chat_image_download_button,
.others .chat_image_download_button {
    align-self: center;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--low-contrast-bg-color);
    color: var(--primary-text-color);
    text-decoration: none;
}

.mine .text_container .message_reply,
.others .text_container .message_reply {
    max-width: 100%;
    border-radius: var(--half-br);
    padding: 0.3rem;
    margin-bottom: 0.4rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.mine .text_container .message_reply {
    background: #461147;
}

.others .text_container .message_reply {
    background: var(--contrast-accent-dark-color);
}

.sender_style_0 .group_user_name {
    color: #43b7ff;
}

.sender_style_1 .group_user_name {
    color: #43fff9;
}

.sender_style_2 .group_user_name {
    color: #43ff8b;
}

.sender_style_3 .group_user_name {
    color: #95e695;
}

.chat_mini_window_chat_content .text_container * {
    font-size: 0.8875rem;
}

.chat_mini_window_chat_content .mine.styled_name .text_container:before {
    content: ' ';
    border: 1rem solid transparent;
    border-radius: var(--one-fourth-br);
    position: absolute;
    top: 0;
    right: -0.5rem;
    z-index: -1;
    border-top-color: var(--primary-accent-light-color);
}

.chat_mini_window_chat_content .others.styled_name .text_container:before {
    content: ' ';
    border: 1rem solid transparent;
    border-radius: var(--one-fourth-br);
    position: absolute;
    top: 0;
    left: -0.5rem;
    z-index: -1;
    border-top-color: var(--contrast-accent-light-color);
}

.chat_mini_window_chat_content .not_styled_name .text_container .group_user_name,
.chat_mini_window_chat_content .not_styled_name .user_image_container img {
    display: none;
}

div.blocked_chat_div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: solid;
    border-width: 0.01rem;
    border-color: var(--primary-border-color);
    border-radius: var(--half-br);
}

div.blocked_chat_div > div {
    display: flex;
    align-items: center;
    min-width: 20%;
    gap: 1rem;
}

div.blocked_chat_image > img,
div.mobile_bar_chat_image > img {
    border-radius: var(--round-image-br);
    border: solid;
    border-width: 0.2rem;
    border-color: var(--primary-border-color);
}

div.mobile_bar_chat_image {
    display: flex;
    align-items: flex-end;
}

div.mobile_bar_chat_image > img {
    max-width: 10vw;
    min-width: 10vw;
}

div.blocked_chat_image > img {
    max-width: 3rem;
}

.has_unread_messages img {
    animation-name: blinking;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

@keyframes blinking {
    50% {
        border-color: var(--primary-accent-color);
    }
}

.has_unread_messages {
    font-weight: bold;
}

.group .others .user_image_container {
    height: 2rem;
    width: 2rem;
}

.group .others .user_image_container > img {
    width: 2rem;
    height: 2rem;
    border-radius: var(--round-image-br);
    cursor: pointer;
}

.group_user_name {
    margin-bottom: 0.2rem;
    font-size: 0.8rem;
    line-height: 1.375rem;
    padding: 0 0.2rem;
}

.others .text_container .group_user_name:hover {
    cursor: pointer;
    text-decoration: underline;
}

.minimize_button,
.maximize_button,
.chat_close_button {
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.5rem;
    width: 1.5rem;
    cursor: pointer;
}

.minimize_button:hover,
.maximize_button:hover,
.chat_close_button:hover {
    background: var(--primary-hover-color);
}

#chat_area .sidebar_card {
    width: 100%;
    box-sizing: border-box;
}

@media (orientation: portrait) {
    .others .reaction_button,
    .mine .reaction_button {
        display: none;
    }

    .text_container * {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }
}

.blocked_chat_div:hover {
    background: var(--primary-hover-color);
}

.chat_header_icons > i,
.chat_header_icons > label > i {
    cursor: pointer;
}

.chat_dropdown_content > label {
    padding: 0.5rem;
    cursor: pointer;
}

#chat_sidebar_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem 0.5rem 1rem;
    width: 100%;
    box-sizing: border-box;
    order: -1000000;
}

.chat_header_divider {
    height: 0.125rem;
    min-height: 2px;
    background: linear-gradient(90deg, var(--sidebar-card-blue), var(--sidebar-card-violet));
    margin: 0.25rem 1rem 0.75rem 1rem;
    border: none;
    order: -999999;
    flex-shrink: 0;
}

.chat_sidebar_title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--sidebar-card-text-hi);
    margin: 0;
}

.chat_sidebar_actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chat_action_btn,
.menu_dropdown_btn {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        transform 200ms ease,
        background 200ms ease,
        box-shadow 200ms ease,
        border-color 200ms ease,
        color 200ms ease;
    border: none;
    box-sizing: border-box;
}

.chat_action_btn.gradient_btn {
    background: linear-gradient(135deg, var(--sidebar-card-blue), var(--sidebar-card-violet));
    color: var(--sidebar-card-white);
}

.menu_dropdown_btn {
    background: var(--sidebar-card-img-fallback-bg);
    border: 0.0625rem solid var(--sidebar-card-stroke);
    color: var(--sidebar-card-text-mid);
}

@media (hover: hover) {
    .chat_action_btn.gradient_btn:hover {
        transform: translateY(-0.0625rem);
        box-shadow:
            0 0 0 0.0625rem color-mix(in srgb, var(--sidebar-card-blue) 8%, transparent),
            0 0.25rem 1rem -0.25rem rgba(var(--sidebar-card-accent-rgb), 0.38);
        filter: brightness(1.15);
    }

    .menu_dropdown_btn:hover {
        background: var(--sidebar-card-unread);
        border-color: rgba(var(--sidebar-card-accent-rgb), 0.18);
        color: var(--sidebar-card-text-hi);
        transform: translateY(-0.0625rem);
    }
}

.chat_action_btn.gradient_btn:active,
.menu_dropdown_btn:active {
    transform: translateY(0) scale(0.95);
    box-shadow: none;
}

.chat_action_btn i,
.menu_dropdown_btn i {
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

select#chat_connections {
    min-width: 100%;
}

#create_new_chat_selection_form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 100%;
}

.chat_mini_window.full_screen {
    min-width: 100%;
    max-width: 100%;
    margin: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.chat_mini_window.full_screen .chat_mini_window_toolbar_buttons {
    display: none;
}

.text * {
    overflow-wrap: anywhere;
    flex: 6;
}

.chat_mini_window_chat_content .date {
    margin: 0.15rem 0;
    min-width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 0.1rem;
    border-width: 0.01rem;
    border-color: var(--primary-border-color);

    & p {
        background: var(--contrast-accent-light-color);
        font-size: 0.6rem;
        padding: 0.25rem;
        border-radius: 0.5rem;
        color: var(--primary-text-color);
    }
}

.full_screen > .chat_mini_window_chat_content {
    max-height: calc(100 * var(--vh) - 6rem);
}

/* @media (orientation: portrait) {
    .chat_mini_window_input_div {
        max-height: 40vh;  More height in portrait
    }

    .chat_mini_window_input_textarea_div textarea {
        max-height: 30vh; 
    }
} */

.chat_mini_window_input_div,
.chat_mini_window_input_textarea_div textarea {
    transition: max-height 0.2s ease-out;
}

.chat_mini_window_input_textarea_div {
    border-radius: var(--half-br);
    width: 100%;
    font-size: 1rem;
    font-family: var(--default-font);
    /* min-height: 3rem; */
    /* max-height: 20vh; */
    /* Limit maximum height */
    /* padding-top: 0.5rem; */
    resize: none;
    outline: none;
    border: none;
    color: var(--primary-text-color);
    overflow-y: auto;
    display: flex;
    align-items: flex-end;
    /* Make textarea scrollable */
}

.full_screen > .chat_mini_window_chat_footer > div.chat_mini_window_input_div > .chat_mini_window_input_textarea_div > textarea {
    border-radius: var(--half-br);
    max-height: 4.94rem;
    overflow-y: auto;
    min-width: 100%;
    font-size: 0.85rem;
    font-family: var(--default-font);
    /* min-height: 3rem; */
    /* padding-top: 0.5rem; */
    resize: none;
    outline: none;
    border: none;
    color: var(--primary-text-color);
    background: transparent;
}

.chat_name {
    display: flex;
    justify-content: space-between;
}

div.mobile_bar_chat_image > p {
    display: none;
}

div.has_unread_messages > div.mobile_bar_chat_image {
    position: relative;
}

div.has_unread_messages > div.mobile_bar_chat_image > p {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    font-size: 0.6rem;
    margin: 0;
}

div.chat_buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem;
}

div.chat_buttons button {
    min-width: 5rem;
    min-height: 2rem;
}

div.chat_buttons input {
    flex-grow: 0.5;
    min-height: 2rem;
    background: transparent;
    border: none;
    border: 0.01rem solid var(--group-chat-name-input-border-color);
    border-radius: 1rem;
    padding: 0.5rem;
    max-width: none;
    color: var(--group-chat-text-color);
}

div.chat_buttons input:focus {
    outline: none;
}

.chat_images_container {
    display: flex;
    gap: 0.5rem;
    max-height: min(90vh, 20rem);
    overflow: scroll;
    flex-wrap: wrap;
}

.send_chat_image_container {
    padding: 1.5rem 2.5rem;
    border-radius: 1rem;
}

.send_chat_image_container img.chat_image {
    max-width: 10rem;
    max-height: 10rem;
}

.chat_mini_window_input_div .send_button,
.chat_mini_window_input_div .add_image_button span {
    /* font-size: 1.5rem; */
    cursor: pointer;
}

/*.chat_mini_window_input_div .chat_send_button {
    padding: 0.3rem;
}*/

.add_image_button,
.attachment_button,
.emoji_button {
    cursor: pointer;
    flex-shrink: 0;
    margin-bottom: 0;
    align-self: center;
}

.chat_members_list {
    list-style-type: none;
}

.chat_members_list .chat_member {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.chat_members_list .chat_member img {
    border-radius: var(--round-image-br);
    border: 0.2rem solid var(--primary-border-color);
    height: 2.5rem;
    width: 2.5rem;
}

.context_menu {
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column;
    background: var(--dropdown-bg-color);
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
    min-width: 7rem;
    gap: 0;
}

.context_menu_item {
    padding: 0.4rem 1rem;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--primary-text-color);
    width: 100%;
}

.context_menu_item:hover {
    background: var(--secondary-bg-color);
}

.context_menu_item.delete_option:hover {
    color: #c54747;
    background: #452424;
}

.context_menu_item i {
    font-size: 1.1rem;
    opacity: 0.7;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (orientation: portrait) {
    .chat_mini_window_chat_content .mine,
    .chat_mini_window_chat_content .others,
    .chat_mini_window_chat_content .date,
    .chat_mini_window_chat_content p.time {
        user-select: none;
    }

    .chat_scroll {
        overflow-y: scroll;
    }

    .chat_mini_window_input_div .emoji_button {
        display: none;
    }
}

.block_message_warning {
    font-size: 0.8rem;
    font-style: italic;
}

.add_group_chat_member {
    margin-bottom: 1rem;
}

.emoji-picker__wrapper {
    z-index: 20;
}

.reactions_count_section {
    width: 100%;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--reactions-count-section-text-color);
    padding: 0.5rem;
}

.user_reaction {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0.2rem 0.5rem;
    width: 100%;

    .self_reaction,
    .message_reaction {
        display: flex;
        flex-direction: row-reverse;
        gap: 0.5rem;
        align-items: center;
        margin-left: 1.5rem;

        i {
            color: var(--reaction-delete-icon-color);
            cursor: pointer;
        }
    }

    .user_profile_and_reaction {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
        width: 100%;

        .user_name_and_profile {
            display: flex;
            flex-direction: row;
            gap: 0.5rem;
            align-items: center;
        }
    }
}

.message_reaction_count {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 500;
}

.user_profile_photo_chat_reaction_section {
    width: 2rem;
    height: 2rem;
    border-radius: var(--round-image-br);
    border: 0.1rem solid var(--primary-border-color);
}

.message_content p {
    line-height: 1.2rem;
}

.message_content p.read_label {
    margin-top: 0.5rem;
}

.message_dropdown_options_icons {
    display: flex;
    flex-direction: row !important;
    gap: 1rem;
    border-radius: 2rem !important;
    border: 0.1rem solid var(--recent-emojis-container-with-add-button-border-color);
    font-size: 1.3rem;
    align-items: center;
    padding: 0.5rem 0.7rem;
    cursor: pointer;
    color: var(---mobile-reaction-container-icons-color);
}

.recent_emojis_container_with_add_button {
    display: flex;
    flex-direction: row !important;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem;
    border-radius: 2rem !important;
    border: 0.1rem solid var(--recent-emojis-container-with-add-button-border-color);
    font-size: 1.5rem;

    .emojis_section_scrollable {
        display: flex;
        max-width: 10rem;
        overflow-x: scroll;
        gap: 0.5rem;
        scrollbar-width: none;
        cursor: pointer;
    }

    .add_emoji_plus_icon {
        cursor: pointer;
        color: var(---mobile-reaction-container-icons-color);
    }
}

.morph_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    color: white;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
}

.morph_btn.loading {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: 50%;
}

.morph_btn .btn_text {
    transition: opacity 0.2s ease;
}

.morph_btn.loading .btn_text {
    opacity: 0;
}

.spinner {
    position: absolute;
    width: 1.25rem;
    height: 1.25rem;
    border: 0.125rem solid white;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.morph_btn.loading .spinner {
    opacity: 1;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.files_container {
    margin-bottom: 0.3rem;
}

.chat_file_iframe_preview {
    border: none;
    background: var(--group-chat-text-color);
    height: -webkit-fill-available;
    scrollbar-width: none;
    overflow-y: hidden;
}

.send_btn_wrapper {
    margin-top: 1rem;
    display: flex;
    justify-content: end;
}

.file_icon_chat_card {
    font-size: 1.5rem;
}

.file_name_label {
    font-weight: 600;
    font-size: 14px;
    margin-top: 8px;
    color: var(--recent-emojis-container-with-add-button-border-color);
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 5px;
    text-align: center;
}

.no_preview_available_text {
    font-size: 12px;
    color: var(--chat-file-meta-text-color);
    display: block;
    margin-top: 4px;
}

.file_upload_preview_wrapper {
    height: 315px;
    width: -webkit-fill-available;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#preview_el_id {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    background-color: var(--group-chat-text-color);
    border-radius: 8px;
}

.uploaded_file_card {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: var(--group-chat-text-color);
    border: 1px solid var(--group-chat-text-color);
    border-radius: 10px;
    color: var(--chat-file-meta-text-color);
    width: 100%;
    max-width: 350px;
    min-width: 200px;
    overflow: hidden;
    cursor: default;
    user-select: none;
}

.file_name_row {
    color: var(--group-chat-text-color);
}

.file_meta_row,
.col_file_icon,
.col_download_icon {
    color: var(--chat-file-meta-text-color);
}

.col_file_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    background-color: var(--group-chat-text-color);
    font-size: 2rem;
    color: var(--chat-file-meta-text-color);
}

.col_details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    padding: 10px 12px;
    min-width: 0;
}

.file_name_row {
    font-weight: 600;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--recent-emojis-container-with-add-button-border-color);
}

.file_meta_row {
    font-size: 10px;
    color: var(--chat-file-meta-text-color);
    margin-top: 2px;
}

.col_download_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    font-size: 1.8rem;
    color: var(--chat-file-meta-text-color);
    border-left: 1px solid var(--group-chat-text-color);
}

.uploaded_file_card.has_thumb {
    flex-direction: column;
    align-items: stretch;
    background-color: var(--recent-emojis-container-with-add-button-border-color);
    border: none;
}

.file_thumb_container {
    width: 100%;
    height: 140px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--recent-emojis-container-with-add-button-border-color);
}

.file_card_thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
}

.uploaded_file_card_body {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: var(--group-chat-text-color);
    padding: 2px 0;
}

.uploaded_file_card.has_thumb .file_name_row {
    color: var(--recent-emojis-container-with-add-button-border-color);
}

.uploaded_file_card.has_thumb .file_meta_row,
.uploaded_file_card.has_thumb .col_file_icon {
    color: var(--chat-file-meta-text-color);
}

.edit_history > .popup_container {
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-height: 25rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.03);
}

.edit_history > .popup_container::-webkit-scrollbar {
    width: 6px;
}

.edit_history > .popup_container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 3px;
}

.edit_history > .popup_container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.edit_history > .popup_container::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

.edit_history > .popup_container > .empty_history_text {
    text-align: center;
    color: var(--secondary-text-color);
    padding: 2rem 0;
    font-size: 0.95rem;
}

.edit_history > .popup_container > .item {
    background: rgba(255, 255, 255, 0.05);
    border: 0.0625rem solid var(--primary-border-color);
    border-left: 0.25rem solid var(--attach-link-section-input-border-color);
    border-radius: 0.5rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        border-left-color 0.2s ease;
}

.edit_history > .popup_container > .item:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.2);
    border-left-color: var(--home-icon-dark-color);
}

.edit_history > .popup_container > .item > .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.08);
    padding-bottom: 0.5rem;
}

.edit_history > .popup_container > .item > .header > .heading {
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--active-tab-bg-color);
    letter-spacing: 0.05em;
}

.edit_history > .popup_container > .item > .header > .time {
    font-size: 0.75rem;
    color: var(--secondary-text-color);
    opacity: 0.8;
}

.edit_history > .popup_container > .item > .text {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.95rem;
    line-height: 1.5rem;
    color: var(--primary-text-color);
}

/*!**********************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/posts/like.css ***!
  \**********************************************************************/
.likes_list {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 0.5rem;
}

.likes_list_user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.likes_list_user img {
    max-width: 3rem;
    max-height: 3rem;
    border-radius: 50%;
    border: 0.2rem solid var(--primary-border-color);
}

/*!***************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/friend_selector.css ***!
  \***************************************************************************/
:root {
    --selected-user-chip-cross-icon-color: hsl(293, 45%, 38%);
    --name-selector-border-color: hsl(293, 45%, 38%);
}

.user {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    max-width: 100%;
    align-items: center;
    padding: 0.5rem 1rem;
    color: black;
    background: var(--about-mandli-members-bg-color);
    border-radius: 0.75rem;
}

@media (orientation: landscape) {
    #search_results .user {
        max-width: 60%;
        align-items: center;
    }
}

.user img {
    max-width: 3rem;
    max-height: 3rem;
    border: solid;
    border-width: 0.2rem;
    border-color: var(--primary-border-color);
    border-radius: var(--round-image-br);
}

.user:hover {
    cursor: pointer;
    background: var(--primary-hover-color);
}

#search_results .search_text_description {
    font-size: 1.2rem;
    display: flex;
    align-items: center;
}

#search_results .search_text_description .search_string {
    font-weight: bold;
    margin-left: 0.5rem;
    color: var(--primary-text-color);
}

.inline {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    border-radius: var(--half-br);
    align-items: center;
}

.inline img {
    max-width: 1rem;
    max-height: 1rem;
    border-radius: var(--round-image-br);
}

.friends_selector {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-width: 100%;
}

.selector_input {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.selector_input input {
    background: transparent;
    min-height: 2rem;
    padding: 0.5rem;
    color: var(--primary-text-color);
    border: none;
    outline: none;
    border-bottom: 0.01rem solid var(--name-selector-border-color);
}

.selector_input > .already_added {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 1rem;
    overflow: scroll;
    max-height: 8rem;
    padding-top: 0.5rem;
}

.selector_input > .already_added > .inline {
    border: solid;
    border-width: 0.01rem;
    border-color: var(--primary-border-color);
    border-radius: var(--one-br);
    padding: 0.2rem 0.5rem;
    background: var(--primary-bg-color);
    cursor: pointer;
}

.user .tag_line {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    min-width: 100%;
    font-size: 0.7rem;
    font-family: var(--tag-line-font);
    white-space: nowrap;
}

.invited_members,
.friends_selector > .list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1rem 0.5rem;
    overflow: scroll;
    max-height: 20rem;
    min-height: 20rem;
}

.invited_members {
    min-height: 0;
}

.user .text {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    overflow: hidden;
    padding-top: 0.2rem;
    flex: 1;
    color: var(--primary-text-color);
}

.selected_user_cross_icon {
    color: var(--selected-user-chip-cross-icon-color);
}

/*!*****************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/vertical_ellipsis.css ***!
  \*****************************************************************************/
.vertical_ellipsis_container {
    display: inline-flex;
    vertical-align: middle;
    height: 100%;
}

.vertical_ellipsis_container > * {
    border-radius: 0;
}

.vertical_ellipsis_container > *:first-child {
    border-radius: var(--one-fourth-br) 0 0 var(--one-fourth-br);
}

.vertical_ellipsis_container > *:last-child {
    border-radius: 0 var(--one-fourth-br) var(--one-fourth-br) 0;
}

.vertical_ellipsis_container > label.not_preferred > div {
    display: flex;
    align-self: center;
    justify-content: center;
}
.vertical_ellipsis_container > label.not_preferred i.bi {
    display: flex;
}

/*!*******************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/user/profile_update.css ***!
  \*******************************************************************************/
:root {
    --profile-picture-border-color: white;
    --edit-profile-picture-icon-color: #9c67d1;
    --edit-profile-picture-icon-background-color: white;
    --edit-profile-picture-icon-wrapper-box-shadow-color: rgba(0, 0, 0, 0.3);
    --labelled-input--text-color: white;
    --experience-count-text-color: white;
    --radio-label-text-color: white;
    --radio-label-wrapper-active-background-color: white;
}

@media (orientation: landscape) {
    div#edit_profile {
        margin-left: 1.5rem;
    }

    .experience_from_fields_wrapper {
        display: flex;
        flex-direction: column;
        padding-left: 1.3rem;
    }
}

div #edit_profile {
    grid-area: main_area;
    overflow: scroll;
    padding-top: 1rem;
}

.edit_profile_heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 2rem;
    padding-right: 1rem;
    color: var(--formatting-button-font-color);
}

.add_experiences_icon {
    margin-left: 1rem;
    cursor: pointer;
}

div #profile_update {
    display: flex;
    flex-direction: column;
}

div.labelled_input {
    display: flex;
    flex-direction: row;
    margin: 0.5rem;
    margin-left: 1rem;
    font-size: 0.8rem;
    align-items: center;
    font-weight: bold;
    gap: 1rem;
}

div.labelled_textarea {
    display: flex;
    flex-direction: row;
    padding: 0.5rem 0;
    padding-right: 0.5rem;
    margin-left: 1rem;
    font-size: 0.8rem;
    align-items: flex-start;
    font-weight: bold;
    gap: 1rem;
}

div#edit_profile_image {
    display: flex;
    flex-flow: row;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}

.profile_pic_edit_wrapper {
    position: relative;
}

#profile_pic {
    border-radius: var(--round-image-br);
    max-height: 6rem;
    max-width: 6rem;
    border: 0.1rem solid var(--profile-picture-border-color);
}

.edit_profile_picture_icon {
    position: absolute;
    bottom: 3%;
    color: var(--edit-profile-picture-icon-color);
    background: var(--edit-profile-picture-icon-background-color);
    padding: 0.3rem;
    border-radius: 50%;
    font-size: 1.1rem;
    right: 0.125rem;
    cursor: pointer;
    box-shadow: 0px 2px 8px var(--edit-profile-picture-icon-wrapper-box-shadow-color);
    transition: box-shadow 0.2s ease;
}

input [type='text'],
input [type='date'] {
    max-width: 50%;
}

div .labelled_input input {
    width: 100%;
    background: transparent;
    color: var(--labelled-input--text-color);
    border: none;
    border-bottom: 0.01rem solid var(--attach-link-section-input-border-color);
    padding: 0.5rem;
    background: transparent;
    font-weight: 600;
}

div .labelled_textarea textarea {
    width: 100%;
    background: transparent;
    color: var(--labelled-input--text-color);
    border: none;
    border: 0.01rem solid var(--attach-link-section-input-border-color);
    border-radius: 0.5rem;
    padding: 0.5rem;
    background: transparent;
    font-weight: 600;
}

div .labelled_input input:focus,
div .labelled_textarea textarea:focus {
    outline: none;
}

div .labelled_input > label,
div .labelled_textarea > label {
    min-width: 6rem;
    opacity: 0.8;
    font-size: 0.9rem;
    color: var(--chat-header-heading-text-color);
}

div .labelled_textarea > label {
    margin-top: 0.5rem;
}

.experience_form_wrapper {
    display: flex;
    flex-direction: column;
    padding-bottom: 1rem;
}

.section_count_and_delete_button_wrapper {
    display: flex;
    justify-content: space-between;
    padding-right: 1.5rem;
    align-items: center;
    margin-bottom: 0.9rem;
}

.section_count_and_delete_button_wrapper .delete_icon {
    font-size: 1.2rem;
    cursor: pointer;
}

.edit_profile_submit_button_wrapper {
    display: flex;
    justify-content: center;
}

.experience_count {
    font-size: 1rem;
    font-weight: 500;
    color: var(--experience-count-text-color);
    letter-spacing: 0.3px;
    width: fit-content;
}

.radio_label_input_group_wrapper {
    display: flex;
    flex-direction: row;
    gap: 0.7rem;

    .radio_label_wrapper {
        display: flex;
        border: 0.01rem solid var(--attach-link-section-input-border-color);
        border-radius: 1rem;
        align-items: center;
        padding: 0.5rem 0.7rem;
        font-size: 0.9rem;
        color: var(--radio-label-text-color);
        cursor: pointer;
    }

    .radio_label_wrapper.active {
        color: var(--attach-link-section-input-border-color);
        background: var(--radio-label-wrapper-active-background-color);
        font-weight: 600;
    }
}

div#experiences_div {
    overflow: auto;
}

#create_profile_update_button {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

#add_experiences_button {
    margin-bottom: 1rem;
}

@media (orientation: portrait) {
    div #edit_profile {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .experience_details_textarea {
        max-width: 15rem;
        max-height: 5rem;
    }

    .edit_profile_heading {
        display: flex;
        justify-content: space-between;
        width: 100%;
        font-size: 1.4rem;
        color: var(--formatting-button-font-color);
    }

    .radio_label_input_group_wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.7rem;
        padding-bottom: 1rem;

        .radio_label_wrapper {
            display: flex;
            justify-content: center;
            max-width: 15rem;
            font-size: 0.8rem;
            width: 100%;
        }
    }
}

/*!************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/user_profile.css ***!
  \************************************************************************/
div#user_profile {
    grid-area: main_area;
    max-height: 100%;
    display: flex;
    padding-left: 1rem;
    padding-right: 1rem;
    flex-flow: column;
    overflow-y: scroll;
    align-items: center;
    width: 100%;
}

#user_profile_about_me {
    padding: 1rem;
}

#user_profile .circle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.5rem;
    gap: 0.5rem;
    cursor: pointer;
    box-sizing: border-box;
    width: 100%;
    border-bottom: 0.01rem solid var(--dropdown-bg-color);
}

#user_profile .circle:last-child {
    border-bottom: none;
}

#user_profile .circle .image_container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    width: 2rem;
    margin-block: 0.5rem;
}
#user_profile .circle .mini_image {
    height: 2rem;
    width: 2rem;
    border: 0.01rem solid var(--primary-border-color);
    border-radius: var(--round-image-br);
}

#user_profile .circle .circle_display_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

#user_profile .circle .circle_display_header .image_name_container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#user_profile .circle .circle_name {
    font-size: 1.1rem;
    font-weight: bold;
    font-family: var(--short-text-font);
    max-width: fit-content;
    border-radius: var(--one-br);
    padding: 0 0.1rem;
    margin: 0;
}

#user_profile .circle .about {
    grid-area: about;
    font-size: 0.9rem;
    margin: 0;
    padding-left: 0.1rem;
}

div#user_details_div {
    grid-area: user_div;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

div#user_details_info_div {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.user_info_name {
    font-size: 1.4rem;
    font-weight: 800;
}

.user_info_address {
    font-size: 0.9rem;
    opacity: 0.7;
}

.user_info_address p {
    margin: 0.1rem;
}

.update_form_image > .form_image,
img.user_info_image {
    width: 10rem;
    height: 10rem;
    border-radius: var(--round-image-br);
    padding: 0.5rem;
    border: 0.25rem solid var(--user-image-border-color);
    background: var(--user-image-bg-color);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

img.user_info_image:hover {
    transform: scale(1.05);
}

#user_info_image_container {
    position: relative;
}

#user_flair_container .user_flair {
    position: absolute;
    right: 5%;
    bottom: 5%;
    padding: 0.5rem;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

#user_flair_container .user_flair:hover {
    transform: scale(1.2) rotate(5deg);
}

div#user_profile_buttons {
    grid-area: buttons;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    font-weight: bold;
    flex-flow: row wrap;
    max-height: 2rem;
}

.connect_button_container {
    display: flex;
    gap: 0.5rem;
}

.not_preferred {
    padding: 0.5rem 1rem;
    box-sizing: border-box;
    border: 0.01rem solid transparent;
    cursor: pointer;
    background: var(--low-contrast-color);
    color: var(--primary-text-color);
    border-radius: var(--one-fourth-br);
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirmation_popup_button {
    background: none;
    border: 0.0625rem solid var(--primary-accent-color);
    color: var(--primary-accent-color);
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    font-weight: bold;
}

.signup_flow {
    background: none;
    border: 0.0625rem solid var(--low-contrast-color);
    color: var(--low-contrast-color);
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}

.preferred:disabled {
    cursor: not-allowed;
    background: var(--low-contrast-color);
}

.preferred {
    padding: 0.5rem 1rem;
    cursor: pointer;
    border: 0.01rem solid transparent;
    background: var(--primary-accent-color);
    border-radius: var(--one-fourth-br);
    font-weight: bold;
    color: var(--primary-text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.preferred,
.signup_flow {
    font-size: 1rem;
    font-weight: bolder;
}

.preferred:hover {
    background: var(--primary-accent-light-color);
}

.not_preferred:hover {
    border-color: currentcolor;
}

@media (orientation: portrait) {
    div#user_profile_buttons {
        justify-content: center;
    }
}

div#user_profile_connection_button_div {
    display: flex;
    flex-flow: column wrap;
}

div#user_profile_nuke_message {
    grid-area: nuke_message;
    display: flex;
    justify-content: flex-end;
    justify-content: center;
    align-items: center;
    margin: 0.5rem;
}

.generic_button {
    min-width: 10rem;
    max-width: 10rem;
    background: var(--generic-button-bg-color);
    color: var(--generic-button-text-color);
    border-radius: var(--half-br);
    min-height: 2rem;
    max-height: 2rem;
    font-weight: 500;
}

div#tag_line_div {
    grid-area: tag_line;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

div#tag_line_div p {
    font-family: var(--tag-line-font);
    font-size: 1.7rem;
    color: #fff;
    font-style: italic;
    line-height: 1.4;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    margin: 0;
}

.user_profile_heading_div {
    backdrop-filter: blur(12px);
    border-radius: var(--one-br);
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin: 1.5rem 0;
    width: 100%;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

#user_profile h3 {
    font-size: 1.1rem;
    margin: 0;
    padding: 0.75rem 1rem;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-family: var(--ai-post-heading-font);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
}

div#user_profile_recommendation {
    grid-area: recommendation;
    display: flex;
    flex-direction: row;
    place-content: center center;
}

div.recommendation_msg_div {
    display: flex;
    flex-direction: column;
    place-content: center center;
    gap: 0.3rem;
    margin: 1rem;
    padding: 0 2rem;
    box-shadow: var(--recommendation-msg-container-bs);
    border-radius: var(--half-br);
    background: var(--about-mandli-members-bg-color);
}

@media (orientation: landscape) {
    div.recommendation_msg_div {
        max-width: 50%;
    }
}

.recommendation_msg {
    font-size: 1.1rem;
}

.recommender {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.recommender img {
    max-width: 1rem;
    max-height: 1rem;
    border-radius: var(--round-image-br);
}

.recommender:hover {
    cursor: pointer;
    text-decoration: underline;
}

#user_profile .experience:last-child,
#user_profile .circle:last-child {
    border-radius: 0 0 0.5rem 0.5rem;
}



@media (orientation: landscape) {
#user_profile .experience .heading,
#user_profile_generics .generic_item .heading {
    display: grid;
    grid-template:
        'expando organization stack' 
        'expando title date' /3rem auto auto;
    border-radius: var(--one-br);
}
}

#user_profile .experience .organization,
#user_profile_generics .generic_item .organization {
    grid-area: organization;
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.02em;
}
#user_profile .experience .heading .tech_stack_tags {
	grid-area: stack;
}

#user_profile .experience .heading .expando,
#user_profile_generics .generic_item .heading .expando {
    grid-area: expando;
    font-size: 1rem;
}

#user_profile_feed_posts {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: var(--landscape-dynamic-width);
}

#user_profile hr {
    min-width: 98%;
}

.circle_members_div,
#user_profile_about_me,
#user_profile_circles,
#user_profile_testimonials,
#user_profile_buffs,
#user_profile_experiences,
#user_profile_skills,
#user_profile_projects,
#user_profile_generics,
#user_profile_honors {
    display: flex;
    flex-direction: column;
    background: transparent;
    padding: 0.5rem 1rem;
    gap: 1.25rem;
}

/* Skills Grid */
.skill_category {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    margin: 0.5rem 0;
}

.skill_category_title {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 100%;
    max-width: 14rem;
}

.skill_tags_container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.skill_tag {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.9);
    padding: 0.35rem 1rem;
    border-radius: 2rem;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


/* Honors Badge */
.rank_score_badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.75rem;
    color: #fff;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 700;
    margin-top: 0.5rem;
    text-transform: uppercase;
}

#user_profile .experience .title,
#user_profile_generics .generic_item .title {
    grid-area: title;
}

#user_profile .experience .desc_tags_div {
    display: flex;
    flex-direction: column;
    padding-left: 3rem;
    padding-top: 1rem;
}

#user_profile .experience .title,
#user_profile_generics .generic_item .title {
    grid-area: title;
}

#user_profile_honors .honor_div {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#user_profile_honors .honor_div .title {
    font-size: 1.2rem;
    font-weight: bold;
}

#user_profile_honors .honor_div .issuer_date_div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.9rem;
    opacity: 0.7;
}

#user_profile_generics .generic_item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.3s ease;
    cursor: default;
}

#user_profile_generics .generic_item:last-child {
    border-bottom: none;
}

#user_profile_generics .generic_item:hover {
    background: rgba(255, 255, 255, 0.01);
}

#user_profile_generics .generic_item .heading {
    cursor: pointer;
    padding: 0.5rem 0;
}

#user_profile_generics .generic_item .title {
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 0.1rem;
}

.generic_content {
    margin: 1.25rem 0 0.5rem 2.5rem;
    padding: 1.25rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0.75rem;
    border-left: 0.2rem solid var(--primary-accent-color);
    animation: experienceSlideDown 0.4s ease-out;
}

.generic_content .description {
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
}

#user_profile_generics .generic_item .live_demo_link {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

@media (orientation: landscape) {
	#user_profile .experience .tech_stack_tags, 
    #user_profile .experience .date,
    #user_profile_generics .generic_item .live_demo_link {
        display: flex;
        justify-content: flex-end;
		text-align: end;
    }
}

.generic_button:hover {
    background: var(--generic-button-hover-bg-color);

    /*	border-color: var(--generic-button-hover-border-color); */
    cursor: pointer;
}

.channel_info_name_label {
    margin-bottom: 1rem;
}

@media (orientation: landscape) {
    div#user_info {
        display: grid;
        grid-template:
            'user_div tag_line'
            'user_div social_links'
            'user_div buttons'
            'nuke_message nuke_message'
            'recommendation recommendation' / 15rem auto;
        gap: 1.5rem;
        padding: 1rem;
        border: 0.01rem solid rgba(255, 255, 255, 0.1);
        border-radius: var(--one-br);
        margin: 2rem;
        width: 100%;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    }

    #user_info_social_links {
        justify-content: flex-start;
        padding: 0;
    }
}

@media (orientation: portrait) {
    div#user_info {
        padding: 1rem;
        display: grid;
        grid-template:
            'user_div'
            'tag_line'
            'social_links'
            'buttons'
            'nuke_message'
            'recommendation';
        gap: 0.5rem;
        border: 0.01rem solid rgba(255, 255, 255, 0.1);
        border-radius: var(--one-br);
        margin: 1.5rem 0;
        text-align: center;
    }

    #user_info_social_links {
        justify-content: center;
    }

    #user_profile h3 {
        font-size: 1.2rem;
    }

    #user_profile .experience .title,
    #user_profile_generics .generic_item .title {
        font-size: 0.9rem;
    }
}

.connect_form {
    align-items: flex-start;
    padding: 1rem;
}

.connect_form textarea {
    color: var(--primary-text-color);
    background: var(--secondary-bg-color);
    min-width: 100%;
    padding: 0.5rem;
    box-sizing: border-box;
    font-family: var(--default-font);
    border-radius: 0.5rem;
}

.connection_preferences > * {
    padding: 0.5rem;
    border-bottom: 0.01rem solid var(--primary-border-color);
}

.connection_preferences > *:last-child {
    border: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.follow_options .sub_section label:not(:first-child) {
    padding-left: 1rem;
}

.connection_preferences label {
    display: flex;
    align-items: center;
    margin: 0.5rem 0.5rem 0.5rem 0;
    font-size: 0.9rem;
}

.connection_preferences .text_input_label {
    justify-content: space-between;
}

.recommendation_editor {
    align-items: center;
    min-width: 100%;
}

.recommendation_editor .footnote {
    text-align: center;
    font-size: 0.6rem;
    opacity: 0.5;
}

.recommendation_editor form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 100%;
    align-items: center;
}

.recommendation_editor form textarea {
    min-width: 80%;
    outline: none;
    border: none;
    border-radius: var(--two-br);
    padding: 1rem;
    background: var(--recommendation-editor-textarea-bg-color);
    color: var(--recommendation-editor-textarea-text-color);
}

form.preferences_form {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    gap: 1rem;
}

form.preferences_form label {
    display: flex;
}

.child_sub_section {
    margin: 0.5rem 0 0.5rem 1rem;
}

.connect_button {
    font-size: 0.9rem;
}

.profile_buff,
.testimonial {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-bottom: solid;
    border-width: 0.01rem;
    border-color: var(--primary-border-color);
}

.profile_buff:last-child {
    border-bottom: none;
}

.testimonial:last-child {
    border-bottom: none;
}

.testimonial .metadata {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 0.5rem;
}

.testimonial .buttons {
    display: flex;
    gap: 1rem;
}

.testimonial .profile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.testimonial .profile:hover {
    text-decoration: underline;
}

.testimonial .profile > label {
    font-weight: bold;
    cursor: pointer;
}

.profile_buff img,
.testimonial img {
    max-width: 1.5rem;
    max-height: 1.5rem;
    border-radius: var(--round-image-br);
}

.testimonial .text p {
    margin: 0;
    margin-bottom: 0.5rem;
}

.profile_buff .buff {
    border: none;
    background: none;
    flex-direction: row;
    align-items: center;
    padding: 0;
    margin-bottom: 0.5rem;
}

.profile_buff .buff .text {
    text-align: start;
}

.profile_buff .sender {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
}

.profile_buff .sender > span {
    display: flex;
    gap: 0.25rem;
}

.profile_buff .sender img:hover,
.profile_buff .sender > span:hover {
    cursor: pointer;
}

.nuke_button {
    background: #b60808;
    border: none;
    outline: none;
    color: white;
    font-weight: bold;
    border-radius: 0.25rem;
    cursor: pointer;
}

.nuke_button:hover {
    opacity: 0.8;
}

#user_profile_circles_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#user_profile_circles_header h3 {
    background: transparent;
    border: none;
}

#user_profile_circles_header .circle_header_buttons {
    display: flex;
    align-items: center;
    margin-right: 0.4rem;
    margin-bottom: 0.1rem;
}

#user_profile_circles_header .circle_header_buttons > label {
    border-radius: 50%;
    padding: 0.25rem 0.5rem;
    border: solid;
    border-width: 0.01rem;
    border-color: var(--chat-date-border-color);
}

#user_profile_circles_header .add_circle {
    font-weight: bold;
    background: var(--chat-date-border-color);
    margin-right: 0.4rem;
    padding: 0.25rem 0.5rem;
}

#user_read_level_info_div {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 1rem;

    & .user_info_read_level_header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
    }

    & .circle_details {
        display: flex;
        justify-content: center;
        margin-top: 0.5rem;
        gap: 0.5rem;
        align-items: center;

        & p {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: unset;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            line-height: 1rem;
        }

        & img {
            width: 1.3rem;
            height: 1.3rem;
        }
    }

    & .user_level_card_container {
        display: flex;
        justify-content: space-evenly;
        margin-top: 0.5rem;
        gap: 0.5rem;

        & .read_level_card {
            backdrop-filter: blur(12px);
            border-radius: var(--half-br);
            border: var(--post-border-color) solid 0.01rem;
            background: var(--secondary-color);
            padding: 0.5rem;
            transition:
                transform 0.3s ease,
                box-shadow 0.3s ease;
            width: 33%;
            display: flex;
            flex-direction: column;
            gap: 0.3rem;

            &:hover {
                transform: translateY(-5px);
                box-shadow: 0 8px 16px rgba(138, 43, 226, 0.3);
            }

            & .read_level_details {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                justify-content: center;
                & p {
                    font-family: var(--tag-line-font);
                    font-size: 1rem;
                    color: #fff;
                    font-style: normal;
                }
            }
        }
    }

    & .progress-container {
        display: flex;
        gap: 0.3rem;
        margin-top: 0.5rem;
        align-items: center;

        & .pregress-text {
            font-size: x-small;
        }
    }

    & .progress-bar {
        position: relative;
        margin-bottom: 0;
        width: 100%;
        height: 0.5rem;
        background-color: var(--progressbar-bg-color);
        border-radius: 1rem;
        overflow: visible;
    }

    & .progress-fill {
        background: var(--progress-bar-bg-fill-color);
        height: 100%;
        border-radius: 1.25rem;
        transition: width 0.6s ease-in-out;
        font-size: x-small;
        font-weight: bolder;
        min-width: 20%;
        display: flex;
        align-items: center;

        & text {
            margin-left: 0.2rem;
        }
    }

    & .min-max-labels {
        display: flex;
        justify-content: flex-end;
        width: 100%;
        font-size: 0.7rem;
        color: var(--primary-text-color);
        opacity: 0.8;
        position: relative;
    }

    & .max-label {
        position: relative;
    }

    & p {
        margin: 0;
        font-family: var(--tag-line-font);
        color: var(--primary-text-color);
        font-style: normal;
    }
}

.read_level_icon {
    padding: 0.15rem 0.4rem;
    background: linear-gradient(to right, #ffcc70, #ffb347);
    color: #3b2e05;
    font-weight: bold;
    font-size: 1rem;
    border-radius: 20px;
    position: relative;
    font-size: small;
}
.article_view {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.default_article_view {
    background: var(--primary-bg-color);
    border: 0.01rem solid var(--post-dropdown-border-color);
    padding: 0.5rem;
    border-radius: 0.5rem;
    color: white;
}

#user_activity_log {
    width: 100%;
}

.activity_logs_chart_wrapper {
    display: flex;
    justify-content: center;
    background: var(--secondary-color);
    width: 100%;
    max-height: 25rem;
    padding: 0.5rem;
}

.social_links_container {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    padding: 1rem 0;
    grid-area: social_links;
}

.social_link_icon {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 0.01rem solid rgba(255, 255, 255, 0.1);
}

.social_link_icon:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.3);
}

.social_link_icon i {
    transition: transform 0.3s ease;
}

.social_link_icon:hover i {
    transform: rotate(5deg);
}

.project_item {
    border-bottom: 0.01rem solid rgba(255, 255, 255, 0.08);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.project_item:last-child {
    border-bottom: none;
}

.project_header {
    display: flex;
    cursor: pointer;
    gap: 1.25rem;
    width: 100%;
}

.project_header .expando {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    color: rgba(255, 255, 255, 0.4);
}

.project_item:hover .project_header .expando {
    background: rgba(255, 255, 255, 0.1);
    color: var(--primary-accent-color);
}

.project_fold_control:checked + .project_header .expando .bi-chevron-right {
    display: none;
}

.project_fold_control:not(:checked) + .project_header .expando .bi-chevron-down {
    display: none;
}

.project_info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.project_name_link_div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.project_name {
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0;
    font-family: var(--ai-post-heading-font);
    letter-spacing: -0.5px;
}

.live_demo_link a {
    color: #a6dcff;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    background: rgba(166, 220, 255, 0.1);
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.live_demo_link a:hover {
    background: rgba(166, 220, 255, 0.2);
    transform: translateX(3px);
}


.project_role {
    font-size: 0.9rem;
    color: var(--primary-accent-color);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.project_info .skill_tags_container {
    margin: 0.5rem 0;
    gap: 0.4rem;
}

.project_info .skill_tag {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
}

.org_name_span {
    align-items: center;
    display: flex;
    gap: 0.5rem;
}

.org_live_link {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.3s ease;
}

.org_live_link i {
    font-size: 1.25rem;
    color: var(--add-chat-icon-color);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.org_live_link:hover i {
    transform: translateY(-3px) scale(1.1);
    opacity: 1;
}

.experience > .heading > .live_demo_link {
    margin-top: 0.5rem;
}

.project_content {
    margin-top: 1.25rem;
    padding: 1.25rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0.75rem;
    border-left: 0.2rem solid var(--primary-accent-color);
    animation: projectSlideDown 0.4s ease-out;
}

@keyframes projectSlideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.project_content .description {
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    font-family: var(--ai-post-font);
}

.project_content .description p {
    margin: 0;
}

#user_profile .experience {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.3s ease;
    cursor: default;
}

#user_profile .experience:hover {
    background: rgba(255, 255, 255, 0.01);
}

.experience_content {
    margin: 1.25rem 0 0.5rem 2.5rem;
    padding: 1.25rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0.75rem;
    border-left: 0.2rem solid var(--primary-accent-color);
    animation: experienceSlideDown 0.4s ease-out;
}

@keyframes experienceSlideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.experience_content .description {
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
}

.experience_content .description p {
    margin: 0 0 1rem 0;
}

.experience_content .description p:last-child {
    margin-bottom: 0;
}

.experience_content .description ul {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0;
}

.experience_content .description li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
}

.experience_content .description li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6rem;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--primary-accent-color);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--primary-accent-color);
}

.experience_content .description li:last-child {
    margin-bottom: 0;
}

#user_profile .experience .skill_tag {
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
    border-radius: 0.5rem;
    color: rgba(255, 255, 255, 0.8);
}

#user_profile .experience .heading {
    cursor: pointer;
    padding: 0.5rem 0;
}

#user_profile .experience:last-child {
    border-bottom: none;
}

#user_profile .experience .title {
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 0.1rem;
}

#user_profile .experience .date {
    font-size: 0.85rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.5rem;
}

#user_profile .experience .tech_stack_tags {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
}

@media only screen and (orientation: portrait) {
    div#user_profile_channels,
    div#user_profile_circles {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .user_level_card_container {
        flex-direction: column;
        width: 100%;
        align-items: center;
    }

    .read_level_card {
        width: 90% !important;
    }

    .social_links_container {
        padding: 0;
        margin-bottom: 0.5rem;
    }

    #user_profile .experience .desc_tags_div {
        padding-left: 1.5rem;
    }

    #user_profile_honors .honor_div .title {
        font-size: 1rem;
        font-weight: bold;
    }

    #user_profile_honors .honor_div .issuer_date_div {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 0.5rem;
        font-size: 0.9rem;
        opacity: 0.7;
    }

    #user_profile_generics .generic_item .title {
        font-size: 1rem;
        font-weight: bold;
        margin-bottom: 0.5rem;
    }

    .generic_content {
        margin-left: 0.5rem;
        padding: 1rem;
    }
    
    .generic_content .description {
        font-size: 0.9rem;
    }

    .project_item {
        padding: 0.5rem;
    }

    .skill_category_title {
        max-width: 8rem;
        min-width: 8rem;
    }

    .skill_tag {
        padding: 0.35rem 0.75rem;
    }

    .org_name_span {
        font-size: 1.2rem;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 0.5rem;
    }

    .org_live_link i {
        font-size: 1.4rem;
    }

    .experience_content {
        margin-left: 0.5rem;
        padding: 1rem;
    }
    
    .experience_content .description {
        font-size: 0.9rem;
    }

    #user_profile .experience .title {
        margin-bottom: 0.5rem;
    }
}
/*!*************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/update_forms/update_forms.css ***!
  \*************************************************************************************/
#update_forms {
    grid-area: main_area;
    overflow: scroll;
}

.update_forms {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 1rem;
}

.update_forms > form {
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    min-width: 100%;
    max-width: 100%;
}

.update_forms > form > .details {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.update_forms > form > .details > label {
    padding: 0.25rem;
    max-width: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.8;
    font-size: 0.9rem;
}

.update_forms > form > label {
    margin-bottom: 1rem;
    opacity: 0.8;
}
.update_forms > form > .details > textarea,
.update_forms > form > .details > input {
    background: var(--low-contrast-bg-color);
    border: 0;
    outline: none;
    color: var(--primary-text-color);
    padding: 0.5rem;
    margin-top: 0.5rem;
    font-size: 1rem;
    font-family: var(--default-font);
    border-radius: var(--one-fourth-br);
}

.update_forms > form > .details > textarea {
    min-height: 4rem;
    resize: none;
}

.update_forms_title {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    font-weight: bold;
}

.update_form_image {
    position: relative;
}

.update_form_image > .form_image {
    padding: 0.1rem;
    background: var(--update-form-image-bg-color);
    border-color: var(--primary-border-color);
    border-width: 0.2rem;
    min-width: 5rem;
    max-width: 5rem;
    max-height: 5rem;
}

.change_image {
    border: solid;
    border-radius: var(--one-fourth-br);
    border-width: 0.01rem;
    border-color: var(--primary-border-color);
    position: absolute;
    z-index: 10;
    height: 1.125rem;
    width: 1.125rem;
    bottom: 0;
    right: 0;
}

.update_forms_icons {
    display: flex;
    flex-direction: column;
}

.update_forms_icons > label {
    margin-top: 1rem;
}

.circle_privacy {
    max-width: 5rem;
    padding: 0.25rem;
    border-radius: var(--one-fourth-br);
    outline: none;
}

.update_forms > form > .friends_selector {
    margin-top: 2rem;
    border-radius: var(--one-fourth-br);
    margin-bottom: 1rem;
    border: 0.01rem solid var(--primary-border-color);
}

.update_forms > form > .friends_selector > .list {
    max-height: 15rem;
}

.update_forms > form > .friends_selector > .selector_input {
    padding-left: 0;
}

.update_forms > form > .friends_selector > .selector_input input {
    padding-left: 0.4rem;
}

.circle_privacy,
.change_image {
    cursor: pointer;
}

.update_forms > form > button {
    align-self: center;
    margin: 0.5rem;
}

.update_form_buttons {
    display: flex;
    justify-content: center;
    min-height: 2rem;
    margin-bottom: 1rem;
}

/*!******************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/notifications/notification_box.css ***!
  \******************************************************************************************/
:root {
    --profile-card-icon-purple-bg: rgba(147, 51, 234, 0.18);
    --profile-card-icon-gold-bg: rgba(234, 179, 8, 0.18);
    --profile-card-icon-violet-bg: rgba(168, 85, 247, 0.18);
    --profile-card-icon-blue-bg: rgba(14, 165, 233, 0.18);
    --profile-card-icon-orange-bg: rgba(249, 115, 22, 0.18);
    --profile-card-icon-green-bg: rgba(34, 197, 94, 0.18);
    --profile-card-icon-cyan-bg: rgba(6, 182, 212, 0.18);
    --profile-card-icon-indigo-bg: rgba(99, 102, 241, 0.18);
    --profile-card-icon-amber-bg: rgba(217, 119, 6, 0.18);
    --profile-card-icon-red-bg: rgba(239, 68, 68, 0.18);
    --profile-card-icon-cyan-color: #22d3ee;
    --profile-card-icon-indigo-color: #a5b4fc;
    --profile-card-icon-green-color: #4ade80;
    --profile-card-icon-gold-color: #facc15;
}

@media (orientation: landscape) {
    #notification_popup {
        grid-area: notification;
        max-height: calc(100 * var(--vh) - 3rem);
        overflow: scroll;
        min-width: 100%;
        background-color: var(--secondary-bg-color);
        margin-bottom: 0;
        margin-right: 0.5rem;
        box-shadow: var(--notification-popup-bs);
        border: solid;
        border-width: 0.01rem;
        border-color: var(--primary-border-color);
    }
}

#notification_popup:has(#landscape_profile_navigation_notification:checked),
#notification_popup:has(#portrait_profile_navigation_notification:checked) {
    background-color: var(--mandli-black);
}

#profile_navigation_notification_box {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.5rem;
    margin: 0;
    min-height: 100%;
    max-height: none;
    overflow-y: visible;
    background-color: var(--mandli-black);
    border-radius: 0;
}

.notification_box {
    position: relative;
    color: var(--notification-box-text-color);
    border-radius: var(--three-fourth-br);
    padding: 0.25rem;
    margin: 0.5rem;
}

.circle_notification {
    margin-bottom: 1rem;
    border-radius: var(--half-br);
    display: flex;
    align-items: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border: solid;
    border-width: 0.01rem;
    border-color: var(--primary-border-color);
}

@media (orientation: portrait) {
    .circle_notification,
    .connection_notification_message,
    .notification_message {
        background-color: var(--secondary-bg-color);
    }
}

.connection_notification_message,
.notification_message {
    justify-content: flex-start;
}

@media (hover: hover) {

    .circle_notification:hover,
    .mandli_name:hover,
    .trending_circle_name:hover {
        cursor: pointer;
        background: var(--mandli-name-hover-bg-color);
    }
}

.mandli_name > div > label,
.notification_message .reason_post:hover,
.notification_message .user_name:hover,
.notification_message .notification_message_image:hover {
    cursor: pointer;
}

div.notification_message_div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 0.5rem;
}

.notification_time {
    font-size: 0.8rem;
    color: var(--primary-text-color);
    opacity: 0.7;
    display: flex;
    justify-content: flex-end;
    padding-right: 0.5rem;
}

div.notification_image_message_wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.5rem;
}

div.notification_image_message_wrapper.verify_phone,
div.notification_image_message_wrapper.task_pending {
    align-items: center;
}

div.notification_image_message_wrapper.verify_phone .user_flair,
div.notification_image_message_wrapper.task_pending .user_flair {
    font-size: 2rem;
    border-radius: 50%;
    padding: 0.2rem;
}

.notification_user_image_container {
    padding: 0 0 0.25rem 0.5rem;
    font-size: 0.9rem;
}

.notification_user_image_container .bi-diagram-3-fill,
.notification_user_image_container .bi-chat-right-text-fill,
.notification_user_image_container .bi-at {
    color: #00cfe6;
}

.notification_user_image_container .bi-lightbulb-fill {
    color: #ffd500;
}

.notification_user_image_container .bi-at {
    color: #ff0000;
}

.notification_user_image_container i {
    position: absolute;
    left: 0;
    bottom: 0;
}

img.notification_message_image {
    border-radius: var(--round-image-br);
    max-width: 2rem;
    max-height: 2rem;
}

.connection_notification_message {
    flex-direction: column;
    align-items: flex-start;
    padding-left: 1rem;
    padding-right: 1rem;
}

div .notification_buttons {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    justify-content: space-around;
    min-width: 100%;
}

.notification_activity_log_button_wrapper {
    display: flex;
    justify-content: flex-end;
}

.log_activity_button {
    font-size: 0.8rem;
}

.follow_options {
    padding: 1rem;
    font-size: 0.9rem;
}

.follow_options > * {
    padding: 1rem 0;
    border-bottom: 0.01rem solid var(--primary-border-color);
}

.follow_options > *:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.follow_options > *:last-child {
    border: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.follow_options label {
    display: flex;
    align-items: center;
}

.notification_message_text > .user_name {
    color: var(--primary-text-color);
    font-size: 1rem;
}

.notification_message.bumped_back .notification_message_text,
.notification_message.fist_bumped .notification_message_text {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 80%;
}

.notification_message_text .notification_emoji_container {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1rem;
}

.notification_message_text .notification_emoji_container .preferred {
    font-size: 1rem;
    border-radius: 0.5rem;
}

.bumped_back_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
}

.notification_nudge_button {
    border: solid;
    border-width: 0.01rem;
    border-color: var(--blinking-border-color);
}

.notification_nudge_button:hover {
    background-color: var(--blinking-bg-color);
}

.nudged_back_emoji_container {
    font-size: 0.9rem !important;
}

.update_circle_settings_labelled_input,
.follow_circle_settings_labelled_input {
    justify-content: space-around;
    border: 0;
    padding: 0;
    flex-direction: row;
    font-size: 0.8rem;
    display: grid;
    grid-template-areas: 'label input .';
    grid-template-columns: 8rem 2rem 1fr;
    margin-bottom: 1rem;
}

.update_circle_settings_label,
.follow_circle_settings_label {
    grid-area: label;
}

.update_circle_settings_input,
.follow_circle_settings_input {
    grid-area: input;
}

.allow_images_forwards_div {
    border: 0;
    padding: 0;
}

div.follow_comments_div {
    gap: 0.1rem;
}

div.follow_connections_circle_checkbox {
    margin-right: 0;
}

div.follow_wall_circle_checkbox {
    margin-right: 0;
}

.notification_message_text {
    font-size: 0.9rem;
    opacity: 0.9;
}

.mandli_buff_counter,
.mandli_counter,
.notifications_count {
    background-color: red;
    color: white;
    border-radius: var(--notification-count-br);
    font-size: 0.6rem;
    z-index: 1;
    font-weight: bold;
    opacity: 0.8;
    max-height: 0.8rem;
    padding: 0.05rem 0.2rem;
}

.mandli_counter {
    position: absolute;
    top: 5%;
    left: 2%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.mandli_buff_counter {
    background-color: transparent;
    position: absolute;
    bottom: 10%;
    left: 0.5%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 1rem;
    opacity: 1;
}

.notifications_count {
    position: absolute;
    top: -0.2rem;
    right: -0.4rem;
}

@media (orientation: Portrait) {
    .notifications_count {
        top: none;
        right: none;
    }
}

.connection_request_message {
    border: solid;
    border-width: 0.01rem;
    border-radius: var(--half-br);
    align-self: center;
    margin-top: 1rem;
    border-color: var(--connection-request-message-border-color);
}

.connection_notification_message > p {
    margin: 0;
    margin-top: 1rem;
    padding: 1rem;
    background-color: var(--primary-border-color);
    border-radius: 0.25rem;
    min-width: 100%;
}

.connection_request_message > p {
    font-size: 1rem;
    color: var(--connection-request-message-text-color);
    margin: 0.5rem;
}

.circles_name {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.circles_name > div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.circle_notification > p {
    margin: 0;
    margin-bottom: 1rem;
}

.circle_notification_box {
    padding: 0.25rem;
    margin: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: scroll;
}

.circle_notification_box > hr {
    min-width: 100%;
}

.circle_names > p {
    margin-top: 0.5rem;
}

.notifications_section {
    display: flex;
    flex-direction: column;
    max-height: calc(100 * var(--vh) - 3rem);
    overflow-y: scroll;
}

#games {
    background-color: var(--landscape-navigation-bar-background-color);
    height: 100%;
    min-height: 100%;
    gap: 0.34rem;
    padding: 0.5rem;
    box-sizing: border-box;
}

#games .chat_sidebar_header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.75rem 1rem 0.5rem 1rem;
    width: 100%;
    box-sizing: border-box;
}

#games .chat_sidebar_title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.05rem;
    text-align: center;
    background: linear-gradient(135deg, var(--sidebar-card-blue), var(--sidebar-card-violet), var(--sidebar-card-pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

/* Scoped Game Card Soft Crystal Styling & Left Accent Bar */
#games .sidebar_card {
    position: relative;
    overflow: hidden;
}

#games .sidebar_card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.625rem;
    bottom: 0.625rem;
    width: 0.125rem;
    border-radius: 0.125rem;
    opacity: 0.8;
    background: var(--game-card-accent);
    box-shadow: 0 0 0.5rem 0 color-mix(in srgb, var(--game-card-accent) 40%, transparent);
    transition: all 0.2s ease;
}

#games .sidebar_card .sidebar_card_image_container {
    background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--game-card-accent) 14%, transparent), color-mix(in srgb, var(--game-card-accent) 2%, transparent));
    border: 0.0625rem solid color-mix(in srgb, var(--game-card-accent) 25%, transparent);
    box-shadow:
        0 0 0.75rem -0.25rem color-mix(in srgb, var(--game-card-accent) 20%, transparent),
        inset 0 0 0.5rem 0 color-mix(in srgb, var(--game-card-accent) 8%, transparent);
}

#games .sidebar_card .sidebar_card_image_container > i,
#games .sidebar_card .sidebar_card_image_container > .noto_emojis,
#games .sidebar_card .sidebar_card_image_container svg {
    color: var(--game-card-accent);
}

#my_connections_button {
    --game-card-accent: var(--game-accent-amber);
}

#rps_profile_button {
    --game-card-accent: var(--game-accent-cyan);
}

#rps_squared_profile_button {
    --game-card-accent: var(--game-accent-violet);
}

#mathracer_button {
    --game-card-accent: var(--game-accent-rose);
}

#equizzle_button {
    --game-card-accent: var(--game-accent-magenta);
}

#wordnet {
    --game-card-accent: var(--game-accent-blue);
}

#games .sidebar_card:hover .sidebar_card_image_container {
    background:
        linear-gradient(var(--sidebar-card-img-bg), var(--sidebar-card-img-bg)) padding-box,
        conic-gradient(from 220deg, var(--sidebar-card-blue), var(--sidebar-card-violet), var(--sidebar-card-pink), var(--sidebar-card-blue)) border-box;
    border-color: transparent;
    box-shadow: 0 0 0.875rem -0.125rem rgba(var(--sidebar-card-accent-rgb), 0.35);
}

#clear_notification_button {
    align-self: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 0 0.75rem;
    border: 0;
}

.connection_notification_message > div {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.profile_notification {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-bottom: 0.01rem solid var(--primary-border-color);
    transition: background-color 0.3s ease-in-out;
    color: white;
}

.profile_notification:hover {
    background-color: var(--primary-bg-color);
}

.profile_navigation_icon {
    font-size: 1.5rem;
    padding: 0.25rem;
    background: #000;
    border-radius: 50%;
    margin: 0.5rem 1rem 0.5rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#notification_popup:has(#landscape_profile_navigation_notification:checked),
#notification_popup:has(#portrait_profile_navigation_notification:checked) {
    background-color: var(--mandli-black);
}

#profile_navigation_notification_box {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.5rem;
    margin: 0;
    min-height: 100%;
    max-height: none;
    overflow-y: visible;
    background-color: var(--mandli-black);
    border-radius: 0;

    .profile_card_user_info {
        padding: 0.95rem 1rem;
        min-height: 4.25rem;
        margin-bottom: 0.45rem;
        border-radius: 1.15rem;
        border-color: rgba(var(--sidebar-card-accent-rgb), 0.22);

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

        .sidebar_card_name {
            font-size: 1.05rem;
            font-weight: 700;
            margin-bottom: 0.2rem;
        }

        .misc_data {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            font-size: 0.825rem;
            color: var(--sidebar-card-text-mid);
        }

        .friends_counter {
            display: flex;
            align-items: center;
            gap: 0.2rem;

            i,
            svg {
                color: var(--sidebar-card-violet);
                font-size: 0.9rem;
            }
        }
    }

    .profile_section_group {
        display: flex;
        flex-direction: column;
        margin-top: 0.25rem;

        .sidebar_card {
            padding: 0.35rem 0.65rem;
            min-height: 2.7rem;
            border-radius: 0.85rem;
        }

        .sidebar_card_image_container {
            width: 2.15rem;
            height: 2.15rem;
            border-radius: 0.65rem;
            margin-right: 0.6rem;
            flex-shrink: 0;
            border: none;
        }
    }

    .profile_section_title {
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.06rem;
        color: var(--sidebar-card-text-low);
        margin: 0.4rem 0 0.45rem 0.35rem;
        display: block;
        text-transform: uppercase;
    }

    .profile_activity_grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.45rem;
    }

    .profile_card_list_group {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }

    .sidebar_card_image_container {
        > i {
            font-size: 1rem;
        }

        &.icon_purple {
            background: var(--profile-card-icon-purple-bg);
            > i {
                color: var(--violet-light);
            }
        }
        &.icon_gold {
            background: var(--profile-card-icon-gold-bg);
            > i {
                color: var(--profile-card-icon-gold-color);
            }
        }
        &.icon_violet {
            background: var(--profile-card-icon-violet-bg);
            > i {
                color: var(--sidebar-card-violet);
            }
        }
        &.icon_blue {
            background: var(--profile-card-icon-blue-bg);
            > i {
                color: var(--sidebar-card-blue);
            }
        }
        &.icon_orange {
            background: var(--profile-card-icon-orange-bg);
            > i {
                color: var(--sidebar-card-btn-text);
            }
        }
        &.icon_green {
            background: var(--profile-card-icon-green-bg);
            > i {
                color: var(--profile-card-icon-green-color);
            }
        }
        &.icon_cyan {
            background: var(--profile-card-icon-cyan-bg);
            > i {
                color: var(--profile-card-icon-cyan-color);
            }
        }
        &.icon_indigo {
            background: var(--profile-card-icon-indigo-bg);
            > i {
                color: var(--profile-card-icon-indigo-color);
            }
        }
        &.icon_amber {
            background: var(--profile-card-icon-amber-bg);
            > i {
                color: var(--sidebar-card-btn-text);
            }
        }
        &.icon_red {
            background: var(--profile-card-icon-red-bg);
            > i {
                color: var(--sidebar-card-red);
            }
        }
    }

    .profile_chevron_icon {
        font-size: 0.85rem;
        color: var(--sidebar-card-text-low);
        margin-left: auto;
        transition:
            color 0.2s ease,
            transform 0.2s ease;
    }

    .sidebar_card:hover .profile_chevron_icon {
        color: var(--sidebar-card-text-hi);
        transform: translateX(0.125rem);
    }
}

.misc_data span.friends_counter i.bi-person-fill {
    -webkit-background-clip: text;
    color: transparent;
    background-position-y: -0%;
    background-image: linear-gradient(#f08bff, cyan);
    font-size: 1rem;
}

.invite_notification_wrapper {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background: var(--secondary-bg-color);
    gap: 0.5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-end;
    padding: 0.5rem;
    border: solid;
    border-width: 0.01rem;
    border-color: var(--primary-border-color);
    border-inline-width: 0.01rem;

    .notification_message {
        border: none;
        margin-bottom: 0;
        padding: 0;
    }
}

.notification_message {
    position: relative;
    margin-bottom: 1rem;
    display: flex;
    align-items: end;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border: solid;
    border-width: 0.01rem;
    border-color: var(--primary-border-color);
    border-inline-width: 0.01rem;
}

span.notification_dot {
    padding: 0.2rem 0.2rem;
    border-radius: 50%;
    top: 0.2rem;
    right: unset;
    left: 0.3rem;
}

.notification_message.tagged_in_comment,
.notification_message.tagged_in_post {
    border-inline-color: #ff0000;
}

.notification_message.mental_growth_activity_kudos,
.notification_message.liked,
.notification_message.comment_liked {
    border-inline-color: #ffd500;
}

.notification_message.mandli_post {
    border-inline-color: #2bff00;
}
.notification_message.mathracer_ack{
    border-inline-color: #70b1f3;
}

.invite_notification_wrapper.mental_growth_activity_log,
.notification_message.commented,
.notification_message.comment_approval,
.notification_message.comment_replied,
.notification_message.testimonial_approval,
.notification_message.testimonial_approved,
.notification_message.suggestion,
.notification_message.recommendation_request,
.notification_message.recommendation_accepted,
.notification_message.accepted {
    border-inline-color: #37fbce;
}

.invite_notification_wrapper.request,
.invite_notification_wrapper.invited_to_circle {
    border-inline-color: #37fbce;
}

.invite_notification_wrapper.invited_to_mandli {
    border-inline-color: #2bff00;
}

.notification_message.mental_growth_log_reminder,
.notification_message.rock_paper_scissors,
.notification_message.fist_bumped,
.notification_message.bumped_back,
.notification_message.streak_alert,
.notification_message.task_pending {
    border-inline-color: #ffffff;
}

.notification_message.buff_hint,
.notification_message.buff_guessed,
.notification_message.buff_party,
.notification_message.seconded_buff,
.notification_message.who_got_buffed_guessed {
    border-inline-color: #ff4500;
}

.action_string {
    user-select: none;
}

.action_string:hover {
    cursor: pointer;
    user-select: none;
}

@media (orientation: portrait) {
    .action_string {
        line-break: anywhere;
    }
}

.notifications_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.no_notifications_content {
    display: flex;
    justify-content: center;
    font-style: italic;
    padding: 1rem;
}

i.notification_message_image {
    font-size: 2rem;
}

.notification_actions .rps_squared_reply_button_wrapper,
.notification_actions .rps_squared_show_result_button_wrapper {
    display: flex;
    justify-content: end;
}

.notification_actions .rps_squared_show_result_button_wrapper .release_button {
    margin-top: 0.5rem;
}

.equizzle_invite > .notification_buttons {
    display: flex;
    justify-content: center;
}

.mental_growth_log_reminder .highlight,
.mental_growth_kudos_notification .highlight {
    font-weight: 600;
    color: var(--active-tab-bg-color);
}

.mental_growth_send_kudos {
    font-size: 0.8rem;
    display: flex;
    justify-content: flex-end;
}

.fade-out {
    opacity: 0;
    transition: opacity 300ms ease;
}

.grouped_users_popup {
    background: #1f1f1f;
    color: white;
    border: 1px solid var(--primary-border-color);
    border-radius: 8px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
    padding: 8px;
    z-index: 9999;
    min-width: 180px;
    max-width: calc(100vw - 16px);
    max-height: 250px;
    overflow-y: auto;
    box-sizing: border-box;
}

.grouped_user_row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 8px;
    cursor: pointer;
    color: white;
    white-space: nowrap;
}

.grouped_user_row:hover {
    background: var(--secondary-bg-color);
}

.grouped_user_row .user_name {
    color: var(--primary-text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.grouped_user_image {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}

.grouped_notification_others {
    cursor: pointer;
    color: var(--active-tab-bg-color);
    font-weight: 600;
}

.grouped_notification_others:hover {
    text-decoration: underline;
}

.dropdown .grouped_users_popup.child {
    align-items: flex;
    align-items: stretch;
}

.rps_history_popup {
    min-width: 220px;
    padding: 12px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.rps_no_history {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 16px;
    color: var(--secondary_text_color, #777);
    font-size: 14px;
    font-style: italic;
}

.notification_image_message_wrapper {
    position: relative;
}

.rps_history_dropdown {
    margin-top: 0.2rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.rps_history_label {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--active-tab-bg-color);
    padding: 4px;
    border-radius: 6px;
    white-space: nowrap;
    margin-top: 0.7rem;
}

.rps_history_label:hover {
    background-color: rgba(0, 0, 0, 0.05);
    text-decoration: underline;
}

.rps_history_result {
    display: grid;
    grid-template-columns: 60px 40px 40px;
    align-items: center;
    column-gap: 12px;
    width: 100%;
}

.rps_history_result span:first-child {
    width: 60px;
    text-align: left;
}

.rps_history_result svg,
.rps_history_result img {
    width: 28px;
    height: 28px;
}

.rps_result_won span:first-child {
    color: #2e9d45;
    font-weight: 600;
}

.rps_result_lost span:first-child {
    color: red;
    font-weight: 600;
}

.rps_history_result,
.rps_result_won,
.rps_result_lost {
    background: transparent;
}

.rps_action_row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rps_history_title {
    font-weight: 600;
    margin-bottom: 10px;
    text-align: center;
}

/*!**************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/recommendation.css ***!
  \**************************************************************************/
#recommendation_popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    background-color: var(--recommendation-popup-bg-color);
    padding: 2rem;
    border-radius: var(--one-br);
}

/*!********************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/settings.css ***!
  \********************************************************************/
#settings {
    grid-area: main_area;
    overflow: scroll;
    max-height: calc(100 * var(--vh) - 3.5rem);
}

input[name='post_reach_order'],
select.mandli_importance {
    padding: 0.25rem 0.75rem;
    border-radius: var(--one-fourth-br);
    text-align: right;
    margin-left: 0.5rem;
    background: var(--primary-bg-color);
    color: var(--primary-text-color);
    border-color: var(--post-dropdown-border-color);
    min-width: 5rem;
    width: 8rem;
    text-align: center;
}

input[name='post_reach_order'] {
    text-align: center;
    border: solid;
    border-width: 0.01rem;
    border-color: var(--post-dropdown-border-color);
    background: var(--primary-bg-color);
    width: 8rem;
}

#settings_title {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#settings .settings_buttons_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

#settings .settings_buttons_container .import_google_contacts,
#settings .settings_buttons_container button {
    min-width: 20rem;
    min-height: 3rem;
    font-size: 1rem;
    cursor: pointer;
}
#settings .settings_buttons_container .import_google_contacts {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: var(--low-contrast-color);
}
#settings .settings_buttons_container .import_google_contacts img {
    max-height: 2rem;
    max-width: 2rem;
    margin-right: 1rem;
}
#settings_form div.circles {
    display: flex;
    justify-content: space-between;
}
form.circles_selector_form div.circles_selector {
    padding: 1rem;
}

#settings_form {
    & .language-selection {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.625rem;
    }

    & .language-selector {
        max-width: 8rem;
    }
}

.language-selection {
    & .choices {
        min-width: 8rem;
        border-radius: 0.25rem;
        border: 0.01rem solid var(--post-dropdown-border-color);
    }
    & .choices__inner {
        background: var(--primary-bg-color);
        color: var(--primary-text-color);
        border: none;
        padding: 0.5rem;
        min-height: auto;
    }

    & .choices__input {
        background-color: black;
        color: var(--primary-text-color);
    }

    & .choices__list {
        background: var(--primary-bg-color);
    }

    & .is-active {
        background: black;
    }
}

.mandli_importance {
    min-width: 8rem;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted,
.choices[data-type*='select-one'] .choices__input {
    background-color: var(--low-contrast-bg-color);
    color: var(--primary-text-color);
}

/* .connection_preferences {
    & .dropdown_content {
        width: 8rem;
    }

    & .default_article_view {
        width: 8rem;
        border-radius: 0.25rem;
    }
} */

/*!************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/confirmation.css ***!
  \************************************************************************/
.confirmation_popup {
    padding: 1rem;
    box-sizing: border-box;
}

.confirmation_popup .buttons {
    display: flex;
    justify-content: space-around;
    margin-top: 1rem;
}

.confirmation_popup .buttons button {
    font-size: 0.9rem;
    min-width: fit-content;
}

/*!***********************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/popup/popup.css ***!
  \***********************************************************************/
.dropdown {
    grid-area: content;
    z-index: 25;
}

.dropdown .child {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--dropdown-bg-color);
    border-radius: 0.5rem;
    box-shadow:
        0 0.25rem 0.15rem 0 var(--primary-bg-color),
        0 0.25rem 1rem 0 var(--primary-bg-color);
}

.context_menu label {
    cursor: pointer;
}

.popup .popup_title {
    font-size: 1.1rem;
    padding-bottom: 1rem;
    font-weight: bold;
    color: var(--primary-text-color);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.tingle-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    visibility: hidden;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    background: var(--primary-bg-color);
    opacity: 0;
}

@supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
    .tingle-modal {
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }
}

.tingle-modal--confirm .tingle-modal-box {
    text-align: center;
}

.tingle-modal--noOverlayClose {
    cursor: default;
}

.tingle-modal--noClose .tingle-modal__close {
    display: none;
}

.tingle-modal__close {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
    padding: 0;
    width: 1.5rem;
    background-color: transparent;
    color: var(--primary-text-color);
    cursor: pointer;
    border: 0.1rem solid;
    border-radius: 1rem;
    padding: 0.4rem;
}

.tingle-modal__close svg * {
    fill: currentcolor;
}

.tingle-modal__closeLabel {
    display: none;
}

.tingle-modal__close:hover {
    color: #fff;
}

.tingle-modal-box {
    position: relative;
    flex-shrink: 0;
    margin-top: auto;
    margin-bottom: auto;
    width: 60%;
    border-radius: 4px;
    background: var(--dropdown-bg-color);
    opacity: 1;
    cursor: auto;
    will-change: transform, opacity;
    max-height: 90%;
    border-radius: 1rem;
}

.tingle-modal-box__content {
    padding: 1rem;
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    border-radius: 1rem;
    background: black;
}

.tingle-modal-box__footer {
    padding: 1.5rem 2rem;
    width: auto;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    cursor: auto;
}

.tingle-modal-box__footer::after {
    display: table;
    clear: both;
    content: '';
}

.tingle-modal-box__footer--sticky {
    position: fixed;
    bottom: -200px;
    z-index: 10001;
    opacity: 1;
    transition: bottom 0.3s ease-in-out 0.3s;
}

.tingle-enabled {
    position: fixed;
    right: 0;
    left: 0;
    overflow: hidden;
}

.tingle-modal--visible .tingle-modal-box__footer {
    bottom: 0;
}

.tingle-modal--visible {
    visibility: visible;
    opacity: 1;
}

.tingle-modal--visible .tingle-modal-box {
    animation: scale 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes scale {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.tingle-modal-box::-webkit-scrollbar {
    display: initial;
    width: 0.2rem;
    height: 0.5rem;
    background-color: var(--primary-border-color);
    border-radius: 1rem;
}

.tingle-modal-box::-webkit-scrollbar-thumb {
    background: var(--secondary-bg-color);
    border-radius: 1rem;
}

@media (orientation: portrait) or (max-width: 800px) {
    .tingle-modal-box {
        max-height: 100%;
        width: 96%;
    }

    .tingle-modal__close {
        top: 0.5rem;
        right: 0.5rem;
        height: 1.5rem;
        width: 1.5rem;
    }
}

/*!********************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/tutorial.css ***!
  \********************************************************************/
@media (orientation: landscape) {
    .tutorial .swiper-slide .slide_content {
        margin: 2rem 10rem 3rem;
        max-width: 50rem;
    }
}

@media (orientation: portrait) {
    .tutorial .swiper-slide .slide_content {
        margin: 0.5rem 2rem;
        max-width: 50rem;
    }
}

.slide_content {
    overflow-y: scroll;
    max-height: 80vh;
    line-height: var(--long-text-line-height);
}

.slide_content details {
    margin: 1rem 0;
    font-size: 0.9rem;
    border-radius: var(--one-br);
    background: var(--tutorial-details-bg-color);
    padding: 0.5rem 1rem;
}

.slide_content summary {
    padding-bottom: 1rem 0.5rem;
}

.slide_content .footnote {
    font-size: 0.8rem;
    color: var(--slide-content-footnote-text-color);
}

.tutorial .swiper-slide li {
    margin-bottom: 0.3rem;
}

.tutorial .thanks .slide_content {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-top: 5rem;
    line-height: var(--tutorial-line-height);
}

/*!***************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/generate_invite.css ***!
  \***************************************************************************/
@media (orientation: portrait) {
    .copy_url {
        flex-direction: column;
    }

    .create_new_link > form {
        flex-direction: column;
        gap: 1rem;
    }

    .url_div {
        margin-right: 0;
        padding-left: 0;
    }
}

@media (orientation: landscape) {
    .url_div {
        margin-right: 2rem;
        padding-left: 0.5rem;
    }
}

.existing_links {
    overflow: scroll;
}

.popup > div.invite_box {
    padding: 1rem;
    overflow: scroll;
    box-sizing: border-box;
}

.copy_url {
    display: flex;
    justify-content: space-between;
    border: solid;
    border-width: 0.01rem;
    border-radius: var(--half-br);
    border-color: var(--secondary-border-color);
    padding: 1rem;
    margin-bottom: 1rem;
}

.url_div {
    display: flex;
    flex-direction: column;
    flex-grow: 0.8;
}

.url_div > input {
    border: 0;
    padding: 0.5rem;
    background: var(--secondary-bg-color);
    border-radius: var(--one-fourth-br);
    color: var(--primary-text-color);
}

.url_div > p {
    font-size: 0.8rem;
    margin-bottom: 0;
    padding-left: 0.5rem;
}

div.copy_url_button {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-grow: 0.1;
    padding-top: 0.5rem;
}

@media (orientation: portrait) {
    div.copy_url_button {
        margin-top: 0.5rem;
        justify-content: space-evenly;
    }
}

div.copy_url_button > button {
    min-width: 5rem;
    min-height: 0;
}

.create_new_link > form > label {
    font-size: 0.8rem;
}

.create_new_link > form > label > input {
    max-width: 4rem;
    text-align: center;
    margin-left: 2rem;
    padding: 0.5rem 1rem;
    background: var(--low-contrast-bg-color);
    color: var(--primary-text-color);
    border: 0.01rem solid var(--secondary-border-color);
    border-radius: var(--one-fourth-br);
}

.create_new_link {
    border: solid;
    padding: 1rem;
    border-width: 0.01rem;
    border-radius: var(--half-br);
    margin-top: 2rem;
    border-color: var(--secondary-border-color);
}

.create_new_link > form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/*!***********************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/posts/posts.css ***!
  \***********************************************************************/
:root {
    --first-read-post-popup-trophy-icon-gradient: linear-gradient(90deg, #ffdab9, #ffb347, #ff8c00);
    --first-post-read-confetti-content-wrapper-background-color: white;
    --first-post-read-confetti-content-wrapper-background-gradient: linear-gradient(to bottom right, #ffe3e3, #fdf6ec, #e4f1fe);
    --new-comments-count-background-color: red;
    --new-comments-count-text-color: white;
    --book-title-color: #eeeeee;
    --book-author-color: #aaaaaa;
    --book-buy-button-bg-color: #f0c14b;
    --book-buy-button-text-color: #111;
    --book-buy-button-border-color: #a88734;
    --book-viewer-border-color: #ccc;
    --book-toolbar-btn-border-color: #444;
    --book-toolbar-btn-text-color: #ccc;
    --book-toolbar-btn-hover-bg-color: #333;
    --book-toolbar-btn-hover-text-color: #fff;
    --book-preview-failed-text-color: #888;
    --book-icon-flair-bg-color: #2c2c2c;
    --book-icon-flair-border-color: #444;
    --book-icon-flair-text-color: #aaa;
}

.post {
    display: grid;
    grid-template:
        'header'
        'tags'
        'content'
        'buttons'
        'comment_area';
    color: var(--post-text-color);
    margin-top: 0.8rem;
    margin-bottom: 0.8rem;
    border-radius: var(--half-br);
    padding: 0.5rem 0.75rem;
    grid-template-rows: auto auto 1fr 2rem auto;
    border: solid;
    border-width: 0.01rem;
    border-color: var(--post-border-color);
    box-sizing: border-box;
    width: 100%;
}

@media (orientation: portrait) {

    .my_mandli_members>div>div>img,
    .post>.header .profile_pic {
        max-width: 1.5rem;
        max-height: 1.5rem;
        border-radius: var(--round-image-br);
        border: solid;
        border-width: 0.1rem;
        border-color: var(--primary-border-color);
    }

    .post>.header {
        padding-top: 0.15rem;
        padding-bottom: 0.15rem;
    }
}

.post>.header {
    grid-area: header;
    display: flex;
    align-items: center;
    padding: 0.3rem;
}

.ai_post_mode_selector_wrapper {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 0.5rem;
    margin-left: auto;
}

.ai_post_mode_selector_swiper {
    width: 12rem;
    display: block;

    .ai_post_mode_slide {
        padding: 0.5rem;
        font-size: 0.85rem;
        font-weight: 500;
        text-align: center;
        cursor: pointer;
    }

    .ai_post_mode_next,
    .ai_post_mode_prev {
        color: var(--quick-post-initial-div-border-color);
    }

    .ai_post_mode_prev:after,
    .swiper-rtl .ai_post_mode_next:after,
    .ai_post_mode_next:after,
    .swiper-rtl .ai_post_mode_prev:after {
        font-size: 1rem;
    }
}

.ai_post_mode_single_toggle {
    display: none;
}

@media (orientation: portrait) {
    .ai_post_mode_selector_swiper {
        display: none;
    }

    .ai_post_mode_single_toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        background: linear-gradient(135deg,
                rgba(139, 92, 246, 0.12),
                rgba(192, 132, 252, 0.12));
        border: 0.05rem solid rgba(168, 85, 247, 0.25);
        border-radius: 2rem;
        padding: 0.35rem 0.85rem;
        font-size: 0.8rem;
        font-weight: 700;
        color: #F2F0EF;
        box-shadow: 0 2px 8px rgba(139, 92, 246, 0.05);
        transition: all 0.25s ease-in-out;
        outline: none;
    }

    .ai_post_mode_single_toggle:hover {
        background: linear-gradient(135deg,
                rgba(139, 92, 246, 0.20),
                rgba(192, 132, 252, 0.20));
        border-color: rgba(168, 85, 247, 0.45);
        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.1);
    }

    .ai_post_mode_single_toggle:active {
        transform: scale(0.96);
    }

    .ai_post_mode_single_toggle_chevron {
        display: inline-flex;
        font-size: 0.9rem;
        opacity: 0.95;
        color: color-mix(in srgb, #F2F0EF 80%, #a855f7);
        transition: transform 0.4s ease-in-out;
        align-items: center;
    }

    .ai_post_mode_text {
        display: none;
    }

    .ai_post_mode_selector_swiper {
        width: 5rem;
    }
}

.post>.tags {
    grid-area: tags;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    flex-wrap: wrap;
}

.post>.header>.header_content {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
}

.post>.header>.header_content>.name_time {
    display: flex;
    margin-right: 0.5rem;
    margin-left: 0.5rem;
}

.comment>.header>.header_content>.name_time>.post_time::before,
.post>.header>.header_content>.name_time>.post_time::before {
    content: ' ';
    display: block;
    height: 0.2rem;
    width: 0.2rem;
    border-radius: 50%;
    background: currentColor;
    margin: 0 0.4rem;
}

.post>.header .post_time {
    margin: 0;
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    color: var(--selector-input-bg-color);
}

@media (orientation: portrait) {
    .post>.header .profile_pic {
        display: flex;
        align-self: center;
        max-width: 3rem;
        max-height: 3rem;
    }

    .post>.header .post_time {
        font-size: 0.8rem;
    }

    .post>.header>.header_content>.name_time {
        margin-top: 0.25rem;
    }
}

.ai_user_image {
    width: 3rem !important;
    height: 3rem !important;

    & #ai_animated-shape {
        scale: 2.4;
        transform-origin: center;
    }
}

@media (orientation: landscape) {

    .my_mandli_members div>img,
    .post>.header .profile_pic {
        width: 3rem;
        height: 3rem;
        border-radius: var(--round-image-br);
        border: solid;
        border-width: 0.2rem;
        border-color: var(--primary-border-color);
        cursor: pointer;
    }
}

.reasons>.feed>.profile_name,
.post>.header>.header_content>.name_time>.profile_name {
    margin: 0;
    color: var(--primary-text-color);
    cursor: pointer;
}

.post>.header>.header_content>.name_time>.profile_name {
    font-size: 1rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@media (orientation: portrait) {
    .post>.header>.header_content>.name_time>.profile_name {
        font-size: 0.9rem;
    }

    .reasons>.feed {
        display: flex;
        align-items: center;
    }

    .post>.header>.header_content>.reasons>.circles {
        max-width: 120px;
    }
}

.post>.header>.header_content>.reasons {
    display: flex;
    font-size: 0.8rem;
    margin-left: 0.5rem;
    gap: 0.5rem;
    color: var(--secondary-text-color);
    align-items: center;
}

.post>.header>.header_content>.new_post_icon,
.post>.header>.header_content>.bi-eye {
    margin-left: 0.5rem;
}

.new_post_icon {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--new-post-for-user-color);
    animation: bounce 1s ease-in-out infinite;
}

.partially {
    opacity: 0.5;
    background: var(--partial-read-post-color);
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-40px);
    }
}

@media (orientation: portrait) {
    .post>.header>.reasons {
        padding-top: 0;
        font-size: 0.7rem;
    }
}

.post>.content>.text {
    font-size: 1rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 0.5rem;
}

.post>.content>.text>p {
    padding-left: 0.5rem;
    line-height: 1.5rem;
    margin-bottom: 0.2rem;
    margin-top: 0.2rem;
}

.post>.content>.text>ul {
    margin-top: 0.1rem;
}

.comment>.content>.text>p br,
.post>.content>.text>p br {
    display: block;
    height: 0.5rem;
    content: 'A';
}

@media (orientation: landscape) {
    .post>.content>.text>p+p {
        margin-top: 0.9rem;
        /* line-height: var(--long-text-line-height); */
    }
}

.post>.content>.images {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 1rem;
}

@media (orientation: portrait) {
    .post>.content>.images {
        padding: 1rem;
        padding-bottom: 0;
    }
}

@media (orientation: landscape) {
    .post>.content>.images {
        padding: 1rem 3rem;
    }
}

.post>.content>.images>img:hover {
    cursor: pointer;
}

.buttons {
    display: flex;
    align-items: center;
    color: var(--button-text-color);
    grid-area: buttons;
}

.post>.buttons {
    justify-content: space-between;
    font-size: 1rem;
}

.post>.buttons>.like_button>.share_post_button {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: #2effb9;
}

.post>.buttons>.like_button.like_share {
    flex-direction: column;
}

.post>.buttons>.like_button.like_share>.share_timer {
    min-height: 0.1rem;
    background: currentColor;
    transition: width 1s linear;
}

.post>.buttons>label {
    flex-grow: 1;
}

.post>.buttons>.share_button {
    color: #2effb9;
}

.buttons>* {
    display: flex;
    justify-content: center;
    flex-basis: 25%;
    align-items: center;
    padding: 0.5rem;
    border-radius: 0.4rem;
    box-sizing: border-box;
    height: 100%;
}

.buttons label:hover {
    background: var(--button-hover-bg-color);
    cursor: pointer;
}

.post>.buttons img {
    max-width: 1.4rem;
    max-height: 1.4rem;
}

.image_toggle_checkbox,
.image_toggle_checkbox:checked~.empty,
.image_toggle_checkbox:not(:checked)~.fill {
    display: none;
}

.image_toggle_checkbox,
.image_toggle_checkbox:checked~.comment_icon_with_counter .empty,
.image_toggle_checkbox:not(:checked)~.comment_icon_with_counter .fill {
    display: none;
}

.post>.content {
    grid-area: content;
    padding-top: 0.5rem;
    color: var(--post-content-text-color);
    border-radius: var(--posts-content-br);
    width: 100%;
    overflow: scroll;
}

.post>.comments_section>.comment_editor {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ellipsis .ellipsis_content {
    padding: 0.5rem;
}

.ellipsis button {
    margin: 0.5rem;
}

.report_options {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.report_options label {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 40%;
}

.report_options_div div.details {
    margin-top: 2rem;
}

.generic_popup>.remove_button {
    display: flex;
    justify-content: flex-end;
}

.generic_popup>.remove_button>span,
#text_editor>.text_editor_close_button {
    border-radius: var(--round-image-br);
    background: #3e3939;
    margin: 1rem;
    margin-bottom: 0;
    padding: 0.5rem;
    font-size: 0.6rem;
}

.metadata_mandli_name:hover,
.post>.header>.header_content>.reasons .circle_name:hover {
    cursor: pointer;
}

#post_area {
    grid-area: main_area;
    padding: 0.5rem;
    overflow: scroll;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

#post_area .post_container {
    width: var(--landscape-dynamic-width);
}

.post>.content>.text a {
    color: #a6dcff;
}

#unhide_hidden_posts:checked~* #unhide_posts,
#unhide_hidden_posts:not(:checked)~* #hide_hidden_posts,
#unhide_hidden_posts:not(:checked)~* .hidden_post {
    display: none !important;
}

.mandli_about h1,
.mandli_about h2,
.about_mandli h1,
.about_mandli h2,
#mandli h1:not(.quick_post_heading),
#mandli h2,
.post h1,
.post h2 {
    font-size: 1rem;
    margin-bottom: 1rem;
}

.mandli_about h3,
.about_mandli h3,
.post h3,
#mandli h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.read_label {
    cursor: pointer;
    color: var(--read-label-text-color) !important;
    font-style: italic;
    padding-left: 0.5rem;
    text-align: right;
    margin-bottom: 0rem !important;
}

.comment_icon_with_counter {
    position: relative;
}

.buttons label span {
    margin-left: 0.2rem;
}

.buttons .ellipsis {
    font-size: 1rem;
}

.approval_buttons,
.rejected .buttons,
.pending_approval .buttons {
    display: none;
}

.rejected .approval_buttons,
.pending_approval .approval_buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    flex-basis: 45%;
    grid-area: buttons;
    color: var(--icon-color);
}

.approval_buttons>label {
    padding: 0.5rem;
    min-width: 45%;
    text-align: center;
}

.approval_buttons>label.approve_button {
    color: var(--approve-button);
    background: var(--approve-button-bg);
}

.approval_buttons>label.reject_button {
    color: var(--reject-button);
    background: var(--reject-button-bg);
}

.approval_buttons>label:hover {
    background: var(--button-hover-bg-color);
    cursor: pointer;
}

.rejected .approval_buttons .not_approved_message,
.pending_approval .approval_buttons .approval_pending_message {
    font-size: 0.8rem;
}

.post .tags {
    display: flex;
    gap: 1rem;
}

.post .tags>span {
    border-radius: 0.5rem;
    color: var(--logo-color-cyan);
    padding: 0.4rem 0.8rem;
    background-color: hsl(186deg, 81%, 16%);
}

.post .tags>span:hover {
    cursor: pointer;
}

.read_by_popup>div {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0.5rem 0;
}

.read_by_popup>div>div>.user_image {
    height: 3rem;
    width: 3rem;
    border-radius: 50%;
    border: 0.2rem solid var(--primary-border-color);
    cursor: pointer;
}

.read_by_popup>div>.user_full_name {
    cursor: pointer;
}

.instagram_iframe_container {
    width: min(100%, 30rem);
}

.instagram_iframe_container iframe {
    width: 100%;
    height: 700px;
}

.instagram_iframe_container.portrait iframe {
    height: 500px;
}

.youtube_iframe_container {
    position: relative;
    padding-bottom: max(35%, 15rem);
    width: min(100%, 30rem);
    border-radius: 0.5rem;
    overflow: hidden;
}

.youtube_iframe_container iframe {
    position: absolute;
    left: 0;
    top: 0;
}

.content_images_container,
.youtube_videos_container {
    margin: 0.5rem 0;
}

.content_image_swiper_slide,
.instagram_swiper_slide,
.youtube_swiper_slide {
    display: flex;
    justify-content: center;
}

@media (orientation: landscape) {
    .content_images_container .content_image_swiper_slide img {
        max-height: 40rem;
        max-width: 90%;
        border: solid;
    }
}

.content_image_preview_popup {
    display: flex;
    align-items: center;
    justify-content: center;
}

.content_images_container .swiper-pagination,
.instagram_videos_container .swiper-pagination,
.youtube_videos_container .swiper-pagination {
    position: relative;
    bottom: 0;
    top: 0;
    margin-top: 0.25rem;
}

.content_images_container .swiper-pagination .swiper-pagination-bullet,
.instagram_videos_container .swiper-pagination .swiper-pagination-bullet,
.youtube_videos_container .swiper-pagination .swiper-pagination-bullet {
    background: white;
    opacity: 1;
}

.content_images_container .swiper-pagination .swiper-pagination-bullet-active,
.instagram_videos_container .swiper-pagination .swiper-pagination-bullet-active,
.youtube_videos_container .swiper-pagination .swiper-pagination-bullet-active {
    background: var(--primary-accent-color);
}

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

.swiper-wrapper {
    align-items: center;
}

.swiper-button-next,
.swiper-button-prev {
    color: var(--primary-accent-color);
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after,
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
    font-size: 2rem;
}

.google_upload_buttons {
    overflow: hidden;
}

.google_upload_buttons>label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    min-width: 100%;
    cursor: pointer;
    transition: background-color 100ms ease-in-out;
}

.google_upload_buttons>label:hover {
    background: var(--secondary-bg-color);
}

@media (orientation: portrait) {

    .swiper-button-next,
    .swiper-button-prev {
        display: none;
    }

    .ai_post_mode_next,
    .ai_post_mode_prev {
        display: flex;
    }

    .content_images_container .content_image_swiper_slide img {
        width: 100%;
        max-height: 80dvh;
        border: none;
        border-radius: 0.25rem;
    }
}

.ai_post {
    & .text>h2 {
        font-family: var(--ai-post-heading-font);
        background: var(--ai-post-heading-color-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-align: center;
        max-width: fit-content;
        align-self: center;
        border-bottom: 1px solid;
    }

    & .text>p {
        font-family: var(--ai-post-font);
        color: var(--ai-post-text-color);
    }
}

.read_level_flair {
    & img {
        width: 2rem;
        margin-top: -0.5rem;
    }
}

.flair-container {
    cursor: pointer;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    position: relative;
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    perspective: 1000px;

    & .user_flair {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    & .user_flair,
    & .read_level_flair {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        transform-style: preserve-3d;
        transition: transform 0.6s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.source_post_deleted {
    display: flex;
    flex-direction: row;
    border-radius: 0.5rem;
    gap: 0.5rem;
    padding: 1rem;
    border: solid;
    border-width: 0.01rem;
    border-color: var(--post-border-color);
}

.ai_achievement_popup {
    padding: 1rem;

    & .animation_task_message {
        padding: 2rem;
        font-size: 1.1rem;
        font-weight: 800;
        color: var(--level-up-text-color);
    }
}

#read_posts {
    padding: 1rem;
}

#read_post_container {
    width: 100%;
}

.first_post_read_confetti_content_wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
    color: var(--primary-accent-color);
    background: var(--first-post-read-confetti-content-wrapper-background-gradient);
    border: 0.1rem solid var(--primary-accent-color);
    border-radius: 0.5rem;

    .first_post_read_confetti_content_user_profile_and_name_wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;

        .first_post_read_confetti_content_user_profile_photo {
            width: 5rem;
            height: 5rem;
            border-radius: var(--round-image-br);
        }

        .first_post_read_confetti_content_user_name {
            font-size: 1.2rem;
            font-weight: bold;
        }
    }

    .first_post_read_confetti_content_read_text {
        font-size: 1.2rem;
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        align-items: flex-start;
        text-align: center;
        font-style: italic;
        font-family: Georgia, 'Times New Roman', Times, serif;
    }

    .first_post_read_confetti_content_trophy_icon {
        background-image: var(--first-read-post-popup-trophy-icon-gradient);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        font-size: 1.5rem;
    }
}

.files_list_wrapper {
    display: flex;
    padding: 0.5rem;
    flex-flow: row;
    flex-wrap: wrap;
    padding-top: 1rem;
    overflow: scroll;
    gap: 1rem;
}

.file_preview_wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    background: var(--copy-url-border-color);
    padding: 0.5rem;
    border-radius: 0.5rem;
    width: 100%;
    max-width: 20rem;
}

.file_type_meta_wrapper {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.file_preview_wrapper>.file_type_meta_wrapper>div>.file_icon {
    font-size: 2rem;
}

.file_preview_wrapper>.download_icon {
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem;
    border: 0.1rem solid;
    border-radius: 50%;
}

.file_preview_wrapper>.file_type_meta_wrapper>.file_info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 13rem;
}

.file_preview_wrapper>.file_type_meta_wrapper>.file_info>.file_name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 0;
    font-size: 0.9rem;
}

.file_preview_wrapper .file_info>.file_meta {
    font-size: 0.7rem;
    opacity: 0.7;
}

.book_preview_container {
    /* width: 100%; */
    min-width: 86%;
    max-width: 100%;
    margin-top: 0.625rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.book_title {
    margin: 0.625rem 0 0.3125rem 0;
    text-align: center;
    color: var(--book-title-color);
    margin-bottom: 0 !important;
}

.book_author {
    margin: 0 0 0.9375rem 0;
    text-align: center;
    color: var(--book-author-color);
}

.book_viewer_wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    height: 32.25rem;
    overflow: hidden;
    border: 0.0625rem solid var(--book-viewer-border-color);
    border-radius: 0.25rem;
}

.book_viewer_wrapper .loader_overlay {
    position: absolute;
    border-radius: 0.25rem;
}

.book_viewer {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(100% + 2.5rem) !important;
    /* Extra height to push default bottom bar out of view */
    border: none !important;
    background-color: #ffffff !important;
    filter: invert(1) hue-rotate(180deg) contrast(1.4) brightness(0.9) !important;
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
    z-index: 1;
}

.book_custom_toolbar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background-color: var(--card-bg-color, #1e1e1e);
    border-bottom: 0.0625rem solid var(--book-viewer-border-color);
    border-radius: 0.25rem 0.25rem 0 0;
    width: 100%;
    box-sizing: border-box;
}

.book_toolbar_btn {
    background: transparent;
    border: 0.0625rem solid var(--book-toolbar-btn-border-color);
    color: var(--book-toolbar-btn-text-color);
    border-radius: 0.25rem;
    padding: 0.375rem 0.625rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.2s,
        color 0.2s;
    flex-shrink: 1;
    min-width: 0;
}

.book_toolbar_btn:hover {
    background: var(--book-toolbar-btn-hover-bg-color);
    color: var(--book-toolbar-btn-hover-text-color);
}

.book_viewer_failed {
    border: none;
    height: auto;
}

.book_preview_failed_text {
    padding: 1.25rem;
    text-align: center;
    color: var(--book-preview-failed-text-color);
}

.book_powered_by {
    font-size: 0.7rem;
    color: var(--book-author-color);
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    opacity: 0.6;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    text-align: center;
}

.book_post_icon_flair {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--book-icon-flair-bg-color);
    border-radius: 50%;
    border: 0.0625rem solid var(--book-icon-flair-border-color);
    margin-left: 0.375rem;
    font-size: 0.6875rem;
    color: var(--book-icon-flair-text-color);
}

.book_viewer iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}

.book_preview_container.fullscreen_mode {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    background-color: #121212;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    box-sizing: border-box;
}

.book_preview_container.fullscreen_mode .book_title,
.book_preview_container.fullscreen_mode .book_author,
.book_preview_container.fullscreen_mode .book_powered_by {
    display: none !important;
}

.book_preview_container.fullscreen_mode .book_custom_toolbar {
    border-radius: 0;
}

.book_preview_container.fullscreen_mode .book_viewer_wrapper {
    width: 90%;
    max-width: 56.25rem;
    /* 900px */
    flex: 1;
    height: 0;
    background-color: #1c1c1c;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 0.25rem;
}

@media (max-width: 48rem) {
    .book_preview_container.fullscreen_mode {
        padding: 0;
    }

    .book_preview_container.fullscreen_mode .book_viewer_wrapper {
        width: 100%;
        max-width: 100%;
        height: 100% !important;
        margin-top: 0 !important;
        border-radius: 0;
    }
}
/*!*********************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/feed/feed.css ***!
  \*********************************************************************/
:root {
    /* Feed CTA Styling Variables */
    --feed-cta-container-bg-start: rgba(20, 20, 20, 0.45);
    --feed-cta-container-bg-end: rgba(10, 10, 10, 0.65);
    --feed-cta-purple-border: rgba(168, 85, 247, 0.22);
    --feed-cta-shadow-color: rgba(168, 85, 247, 0.04);

    --feed-cta-divider-color: rgba(255, 255, 255, 0.07);

    --feed-cta-glass-bg: rgba(255, 255, 255, 0.03);
    --feed-cta-glass-border: rgba(255, 255, 255, 0.08);
    --feed-cta-glass-inner-glow: rgba(255, 255, 255, 0.03);
    --feed-cta-glass-hover-bg: rgba(255, 255, 255, 0.08);

    --feed-cta-danger-hover-bg: rgba(239, 68, 68, 0.08);
    --feed-cta-danger-hover-border: rgba(239, 68, 68, 0.25);
    --feed-cta-danger-color: #ef4444;
    --feed-cta-danger-text: #f87171;
    --feed-cta-danger-card-bg: rgba(239, 68, 68, 0.15);
    --feed-cta-danger-border-glow: rgba(239, 68, 68, 0.2);
    --feed-cta-danger-shadow: rgba(239, 68, 68, 0.2);

    --feed-cta-card-bg: rgba(255, 255, 255, 0.02);
    --feed-cta-card-border: rgba(255, 255, 255, 0.05);
    --feed-cta-card-hover-bg: rgba(255, 255, 255, 0.04);
    --feed-cta-card-hover-border: rgba(168, 85, 247, 0.35);

    --feed-cta-shadow-dark: rgba(0, 0, 0, 0.3);
    --feed-cta-shadow-light: rgba(0, 0, 0, 0.1);
    --feed-cta-card-shadow-purple: rgba(168, 85, 247, 0.12);
    --feed-cta-badge-bg: rgba(168, 85, 247, 0.15);

    --feed-cta-btn-border: rgba(168, 85, 247, 0.3);
    --feed-cta-btn-bg: rgba(168, 85, 247, 0.08);
    --feed-cta-btn-text: #d8b4fe;
    --feed-cta-btn-shadow-purple: rgba(124, 58, 237, 0.35);

    --feed-cta-purple-accent: #a855f7;
    --feed-cta-purple-deep: #7c3aed;
    --feed-cta-purple-light: #c084fc;
    --feed-cta-purple-medium: #8b5cf6;
    --feed-cta-play-btn-shadow: rgba(124, 58, 237, 0.3);
    --feed-cta-play-btn-hover-shadow: rgba(124, 58, 237, 0.4);

    --feed-cta-success-bg: rgba(34, 197, 94, 0.15);
    --feed-cta-success-border: #22c55e;
    --feed-cta-success-text: #4ade80;
    --feed-cta-success-shadow: rgba(34, 197, 94, 0.2);

    /* Clean Variables for CTA Colors */
    --feed-cta-white: #ffffff;
    --feed-cta-black: #000000;
    --feed-cta-pill-border: rgba(255, 255, 255, 0.85);
    --feed-cta-math-success-bg: #054000;
    --feed-cta-math-success-border: #28a745;
    --feed-cta-math-success-shadow: rgba(40, 167, 69, 0.6);
    --feed-cta-math-danger-bg: #721c24;
    --feed-cta-math-danger-border: #dc3545;
    --feed-cta-math-danger-shadow: rgba(220, 53, 69, 0.6);
    --feed-cta-odd-badge-bg-start: rgba(160, 80, 255, 0.25);
    --feed-cta-odd-badge-bg-end: rgba(120, 50, 220, 0.35);
    --feed-cta-odd-badge-border: rgba(175, 100, 255, 0.5);
    --feed-cta-odd-badge-text: #d8b4fe;
    --feed-cta-odd-badge-shadow: rgba(160, 80, 255, 0.35);
}

@media (orientation: landscape) {
    #feed_area {
        grid-area: feed;
        font-size: 0.8rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: var(--landscape-dynamic-width);
    }

    #importance_slider_mandli_tag,
    #importance_slider_tag {
        margin-bottom: 1rem;
        font-weight: bold;
        padding-left: 0.5rem;
        margin-top: 0.25rem;
    }
}

/* Feed CTA Container (replaces a post space) */
.feed_cta {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
}

.feed_cta > .container {
    background: linear-gradient(135deg, var(--feed-cta-container-bg-start) 0%, var(--feed-cta-container-bg-end) 100%);
    border: 1px solid var(--feed-cta-purple-border);
    border-radius: var(--half-br);
    padding: 1.2rem;
    margin: 0.8rem 0;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    position: relative;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 8px 32px 0 var(--feed-cta-shadow-color),
        inset 0 1px 1px var(--feed-cta-glass-inner-glow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Header */
.feed_cta .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--feed-cta-divider-color);
    padding-bottom: 0.6rem;
}

.feed_cta .title {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--primary-text-color);
}

.feed_cta .dismiss_all {
    background: var(--feed-cta-glass-bg);
    border: 1px solid var(--feed-cta-glass-border);
    color: var(--secondary-text-color);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 0.5rem;
    padding: 6px 12px;
    transition: all 180ms ease;
}

.feed_cta .dismiss_all:hover {
    background: var(--feed-cta-danger-hover-bg);
    border-color: var(--feed-cta-danger-hover-border);
    color: var(--feed-cta-danger-color);
}

/* Carousel */
.feed_cta .carousel {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding: 0.5rem 0.2rem;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0.2rem;
}

/* Custom Scrollbar for Carousel */
.feed_cta .carousel::-webkit-scrollbar {
    height: 4px;
}
.feed_cta .carousel::-webkit-scrollbar-track {
    background: transparent;
}
.feed_cta .carousel::-webkit-scrollbar-thumb {
    background: var(--post-border-color);
    border-radius: 2px;
}

/* Carousel Cards */
.feed_cta .card {
    flex: 1 0 11rem;
    max-width: 100%;
    background: var(--feed-cta-card-bg);
    border: 1px solid var(--feed-cta-card-border);
    border-radius: var(--half-br);
    padding: 1.2rem 1rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    box-sizing: border-box;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}

.feed_cta .info {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

@media (max-width: 768px) {
    .feed_cta .carousel {
        gap: 0.6rem;
        padding-right: 0.5rem;
    }
    /* Slider layout for 3+ cards */
    .feed_cta .card {
        flex: 0 0 calc(45% - 0.3rem);
        min-width: calc(45% - 0.3rem);
    }
    /* Exactly 2 cards: fill container 50% each */
    .feed_cta .carousel > .card:first-child:nth-last-child(2),
    .feed_cta .carousel > .card:first-child:nth-last-child(2) ~ .card {
        flex: 1 1 calc(50% - 0.3rem);
        min-width: calc(50% - 0.3rem);
        max-width: calc(50% - 0.3rem);
    }
    /* Exactly 1 card: fill 100% width */
    .feed_cta .carousel > .card:first-child:nth-last-child(1) {
        flex: 1 1 100%;
        min-width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 580px) {
    .feed_cta > .container {
        padding: 0.8rem;
    }
}

.feed_cta .card:hover {
    transform: translateY(-4px);
    background: var(--feed-cta-card-hover-bg);
    border-color: var(--feed-cta-card-hover-border);
    box-shadow:
        0 12px 24px var(--feed-cta-shadow-dark),
        0 0 15px var(--feed-cta-card-shadow-purple);
}

.feed_cta .dismiss {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    background: var(--feed-cta-glass-bg);
    border: 1px solid var(--feed-cta-card-border);
    color: var(--secondary-text-color);
    cursor: pointer;
    font-size: 0.8rem;
    width: 1.2rem;
    height: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.feed_cta .dismiss:hover {
    background: var(--feed-cta-danger-card-bg);
    color: var(--feed-cta-danger-color);
    border-color: var(--feed-cta-danger-border-glow);
}

.feed_cta .card .user_image_container {
    width: 4rem;
    height: 4rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid var(--primary-border-color);
    box-sizing: border-box;
}

.feed_cta .card .user_image_container .user_image,
.feed_cta .card .user_image_container .avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: none;
    object-fit: cover;
    flex-shrink: 0;
    box-sizing: border-box;
    margin-bottom: 0;
}

.feed_cta .name {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--primary-text-color);
    margin-bottom: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    cursor: pointer;
}

.feed_cta .name:hover {
    text-decoration: underline;
}

.feed_cta .subtitle {
    font-size: 0.75rem;
    line-height: 1.25rem;
    color: var(--secondary-text-color);
    margin-bottom: 0.8rem;
    height: 2.5rem;
    max-height: 2.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    width: 100%;
    word-break: break-word;
}

.feed_cta .subtitle.clickable,
.feed_cta .profile_pic,
.feed_cta .avatar {
    cursor: pointer;
    max-width: -webkit-fill-available;
    max-width: 100%;
}

.feed_cta.fading_out,
.feed_cta .fading_out {
    opacity: 0;
}

.feed_cta .card.dismissing {
    opacity: 0;
    transform: scale(0.8);
}

.feed_cta {
    width: 100%;
}

.feed_cta .btn_wrapper .connect_button,
.feed_cta .btn {
    width: 100%;
    padding: 0.45rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 6px;
    text-align: center;
    box-sizing: border-box;
    border: 1px solid var(--feed-cta-btn-border);
    background: var(--feed-cta-btn-bg);
    color: var(--feed-cta-btn-text);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.feed_cta .btn:disabled,
.feed_cta .connect_button:disabled {
    cursor: default;
    pointer-events: none;
    opacity: 0.7;
}

.feed_cta .btn_wrapper .connect_button:hover,
.feed_cta .btn:hover {
    background: linear-gradient(135deg, var(--feed-cta-purple-accent) 0%, var(--feed-cta-purple-deep) 100%);
    border-color: transparent;
    color: var(--feed-cta-white);
    box-shadow: 0 4px 12px var(--feed-cta-btn-shadow-purple);
}

.feed_cta .btn_wrapper .vertical_ellipsis_container {
    width: 100%;
}

/* Math Racer & Wordnet CTA Styles */
.feed_cta.mathracer_cta,
.feed_cta.wordnet_cta {
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--primary-bg-color);
    border: 1px solid var(--post-border-color);
    border-radius: var(--half-br);
}

.feed_cta .mathracer_content {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    align-items: center;
    width: 100%;
}

.feed_cta.mathracer_cta .mcq {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 1.2rem;
}

.feed_cta.mathracer_cta .question {
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--feed-cta-white);
    text-align: center;
    width: 100%;
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
}

.feed_cta.mathracer_cta .question_expr {
    font-size: 2rem;
    color: var(--feed-cta-white);
}

.feed_cta.mathracer_cta ol.mcq_options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 2rem;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.feed_cta.mathracer_cta ol.mcq_options > li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.feed_cta.mathracer_cta ol.mcq_options > li > input {
    display: none;
}

.feed_cta.mathracer_cta ol.mcq_options > li > label.option_content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 50px;
    padding: 0.5rem 1rem;
    font-size: clamp(1.1rem, 3.5vw, 1.6rem);
    font-weight: 500;
    color: var(--feed-cta-white);
    background-color: var(--feed-cta-black);
    border: 1.5px solid var(--feed-cta-pill-border);
    border-radius: 3rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 10px var(--feed-cta-shadow-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.feed_cta.mathracer_cta ol.mcq_options > li > label.option_content:hover {
    border-color: var(--feed-cta-white);
    transform: translateY(-2px);
    box-shadow: 0 0 12px var(--feed-cta-glass-border);
}

.feed_cta.mathracer_cta ol.mcq_options > li > label.option_content.correct_answer {
    background-color: var(--feed-cta-math-success-bg);
    border-color: var(--feed-cta-math-success-border);
    color: var(--feed-cta-white);
    box-shadow: 0 0 14px var(--feed-cta-math-success-shadow);
}

.feed_cta.mathracer_cta ol.mcq_options > li > label.option_content.wrong_answer {
    background-color: var(--feed-cta-math-danger-bg);
    border-color: var(--feed-cta-math-danger-border);
    color: var(--feed-cta-white);
    box-shadow: 0 0 14px var(--feed-cta-math-danger-shadow);
}

.feed_cta .odd_one_out_badge {
    color: var(--feed-cta-odd-badge-text);
    padding: 0.3rem 0.85rem;
    font-size: 0.8rem;
    border-radius: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.feed_cta.wordnet_cta .wordnet_game {
    padding: 0;
    background: none;
    width: 100%;
    gap: 1rem;
}

.feed_cta.wordnet_cta .options_grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
    justify-content: center;
    width: 100%;
    max-width: 440px;
    margin: 0.5rem auto 0 auto;
}

.feed_cta.wordnet_cta .word_chip {
    width: 100%;
    min-height: 50px;
    padding: 0.5rem 0.5rem;
    font-size: clamp(0.85rem, 2.5vw, 1.05rem);
    font-weight: 600;
    margin-top: 0;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
}

.feed_cta.wordnet_cta .question {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.6rem;
    width: 100%;
    margin-bottom: 0.5rem;
}

.feed_cta.wordnet_cta .question_expr {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--primary-text-color);
    text-align: center;
}

.feed_cta .header_group {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.feed_cta .reload_btn {
    background: none;
    border: none;
    color: var(--secondary-text-color);
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0.7;
    transition:
        transform 0.3s ease,
        opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
}

.feed_cta .reload_btn:hover {
    opacity: 1;
    color: var(--primary-accent-color);
    transform: rotate(180deg);
}

.feed_cta .options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

@media (max-width: 480px) {
    .feed_cta .options {
        grid-template-columns: 1fr;
    }

    .feed_cta.wordnet_cta,
    .feed_cta.mathracer_cta {
        padding: 0.8rem 0.5rem;
    }

    .feed_cta.mathracer_cta ol.mcq_options {
        gap: 0.8rem 1rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .feed_cta.wordnet_cta .options_grid {
        gap: 0.8rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 0.4rem;
    }

    .feed_cta.wordnet_cta .word_chip {
        padding: 0.5rem 0.38rem;
        font-size: clamp(0.78rem, 3.5vw, 0.95rem);
        min-height: 46px;
    }
}

.feed_cta .option_btn {
    padding: 0.75rem 1.2rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-text-color);
    background: var(--feed-cta-glass-bg);
    border: 1px solid var(--feed-cta-glass-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    box-shadow: 0 2px 4px var(--feed-cta-shadow-light);
}

.feed_cta .option_btn:hover:not(:disabled) {
    background: var(--feed-cta-glass-hover-bg);
    border-color: var(--feed-cta-purple-accent);
    transform: translateY(-1px);
}

.feed_cta .option_btn:active:not(:disabled) {
    transform: translateY(0);
}

.feed_cta .option_btn.selected_correct {
    background: var(--feed-cta-success-bg);
    border-color: var(--feed-cta-success-border);
    color: var(--feed-cta-success-text);
    box-shadow: 0 0 10px var(--feed-cta-success-shadow);
}

.feed_cta .option_btn.selected_wrong {
    background: var(--feed-cta-danger-card-bg);
    border-color: var(--feed-cta-danger-color);
    color: var(--feed-cta-danger-text);
    box-shadow: 0 0 10px var(--feed-cta-danger-shadow);
}

.feed_cta .option_btn:disabled {
    cursor: default;
    opacity: 0.6;
}

.feed_cta .play_btn {
    padding: 0.6rem 1.6rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, var(--feed-cta-purple-accent) 0%, var(--feed-cta-purple-deep) 100%);
    color: var(--feed-cta-white);
    box-shadow: 0 4px 12px var(--feed-cta-play-btn-shadow);
    transition: all 0.2s ease;
    align-self: center;
}

.feed_cta .play_btn:hover {
    background: linear-gradient(135deg, var(--feed-cta-purple-light) 0%, var(--feed-cta-purple-medium) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--feed-cta-play-btn-hover-shadow);
}

.feed_cta .play_btn:active {
    transform: translateY(0);
}

.feed_cta .feedback {
    font-size: 1rem;
    font-weight: 600;
    min-height: 1.2rem;
    align-self: center;
    letter-spacing: 0.01em;
}

.feed_cta .feedback.correct {
    color: var(--feed-cta-success-text);
}

.feed_cta .feedback.wrong {
    color: var(--feed-cta-danger-text);
}

/*!**************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/posts/comments.css ***!
  \**************************************************************************/
:root {
    --comment-post-button-text-color: white;
    --dummy-textarea-view-text-color: hsl(0deg 1% 40%);
    --comment-level-0-border-color: #74ddba;
    --comment-level-1-border-color: #fff240;
    --comment-level-2-border-color: #e983c7;
    --deleted-comment-text-color: white;
    --comment-separator-border-color: #e983c7;
    --comment-reply-border-left-color: white;
    --even-comment-reply-content-background-color: hsl(0deg 0.15% 17.22%);
    --unread-comment-background-color: hsl(186deg 100% 8%);
}

.post .comments_div {
    grid-area: comment_area;
}

.comment {
    position: relative;
    padding-top: 0.3rem;
    padding-left: 0.3rem;
    margin-top: 0.3rem;
    border-left: solid;
    border-width: 0.05rem;
    border-color: var(--primary-border-color);
    display: grid;
    grid-template:
        'header' 1.5rem
        'content' 1fr 'buttons' 2rem
        'editor' auto
        'comment_area' auto;
}

@media (orientation: landscape) {
    .comment .comment {
        margin-left: 0.3rem;
    }
}

.comment > .header {
    grid-area: header;
    display: flex;
    align-items: center;
}

.comment > .content > .text {
    padding: 0.5rem 1rem 0.5rem 1rem;
    font-size: 1rem;
    width: 100%;
}

.comment > .content > .text > p {
    margin: 0;
    padding-left: 0.5rem;
}

@media (orientation: landscape) {
    .comment > .content > .text > p {
        margin-bottom: 0.9rem;
        line-height: var(--long-text-line-height);
    }
}

.comment.level_0 {
    border-color: var(--comment-level-0-border-color);
}

.comment.level_1 {
    border-color: var(--comment-level-1-border-color);
}

.comment.level_2 {
    border-color: var(--comment-level-2-border-color);
}

.comment > .header > .profile_name,
.comment > .header > .header_content > .name_time > .profile_name,
.comment > .header > .header_content > .name_time > .post_time {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.comment > .header > .header_content > .name_time > .post_time {
    display: flex;
    align-items: center;
}

.comment > .header > .header_content > .name_time {
    opacity: 0.7;
    margin: 0;
    font-size: 0.8rem;
    color: var(--post-profile-name-text-color);
    display: flex;
    align-items: flex-end;
}

.comment .content {
    grid-area: content;
    position: relative;
    overflow: scroll;
}

.comment .deleted {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.3rem;
    font-style: italic;
    width: fit-content;
    padding: 0.3rem 0.5rem;
    margin: 0 0 0.5rem 0.5rem;
    background: var(--low-contrast-bg-color);
    border-radius: 0.5rem;
    color: var(--deleted-comment-text-color);
}

.comment .content .images {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.comment .content .images img {
    max-width: min(100%, 15rem);
    padding: 0.5rem 0;
    cursor: pointer;
}

.comment > .buttons img {
    max-width: 1.1rem;
    max-height: 1.1rem;
}

.comment > .comment_editor {
    grid-area: editor;
}

.comment > .comments_div {
    grid-area: comment_area;
}

.comment_editor {
    min-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.comment_section_initial_div {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    width: 100%;
}

.dummy_textarea_view {
    display: flex;
    align-items: center;
    width: 100%;
    background: var(--secondary-bg-color);
    border-radius: 1.5rem;
    padding: 0 0.75rem;
    justify-content: space-between;
    color: var(--dummy-textarea-view-text-color);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 550;
}

.user_profile_with_textarea {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.textarea_cta_container {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    background: var(--primary-bg-color);
    border-radius: 1rem;
    padding: 0 0.5rem 0.5rem;
    border: 0.01rem solid var(--attach-link-section-input-border-color);
    margin-top: 0.5rem;
}

.comments_section > .comments_area > .comment_editor > .textarea_cta_container > textarea {
    min-height: 4rem;
}

.comment_section_post_view {
    width: 100%;
    background: var(--primary-bg-color);
}

.textarea_cta_container > textarea {
    min-height: 2rem;
    height: auto;
    width: 100%;
    outline: none;
    border-radius: 1.125rem;
    box-sizing: border-box;
    padding: 0.5rem;
    background: inherit;
    color: inherit;
    border: none;
    resize: none;
}

.textarea_cta_container > .comment_submit_container {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

.image_speech_locale_icons_wrapper {
    display: flex;
    flex-direction: row;
    gap: 0.3rem;
    align-items: center;
}

.user_profile_photo_comment_section {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: var(--round-image-br);
    border: 0.2rem solid var(--primary-border-color);
}

.comment_submit_container .add_image_button {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0.3rem 0.5rem;
}

.comment_post_button {
    display: flex;
    border: none;
    color: var(--comment-post-button-text-color);
    align-items: center;
    background: var(--primary-accent-color);
    padding: 0.5rem;
    cursor: pointer;
}

.comment_submit_container_visible_in_portrait {
    display: none;
}

.comment_editor > button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-top: 0.5rem;
    margin-right: 0.3rem;
    margin-left: 1rem;
}

.comment .comment_level_count {
    display: none;
}

.comment.no_comment_portrait_space {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
}

.comment.no_comment_portrait_space .comment_level_count {
    position: absolute;
    left: -1.5rem;
    top: 3rem;
    background: var(--primary-bg-color);
    height: 1.5rem;
    width: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 25%;
    cursor: pointer;
    border: 0.01rem solid var(--primary-border-color);
    box-shadow:
        0 0.25rem 0.15rem 0 var(--primary-bg-color),
        0 0.25rem 1rem 0 var(--primary-bg-color);
}

.flash_comment_box {
    background: var(--primary-accent-color) !important;
}

@media (orientation: portrait) {
    .comments_section > .comments_area > .comment_editor {
        flex-direction: column;
    }

    .comments_section > .comments_area > .comment_editor > textarea {
        min-width: 80%;
    }

    .comment > .content > .text {
        padding: 0.5rem 0 0;
        font-size: 1rem;
    }

    .textarea_cta_container > .comment_submit_container {
        display: none;
    }

    .user_profile_photo_comment_section {
        width: 2.2rem;
        height: 2.2rem;
        border-radius: var(--round-image-br);
        border: 0.1rem solid var(--primary-border-color);
    }

    .comment_submit_container_visible_in_portrait {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        padding-left: 0.3rem;
        border-bottom: 0.01rem solid var(--primary-border-color);
        padding-bottom: 0.4rem;
    }
}

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

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

.comment > .header .profile_pic {
    border-radius: var(--round-image-br);
    max-width: 1.5rem;
    max-height: 1.5rem;
}

.comment > .header > .header_content > .name_time {
    display: flex;
    align-items: center;
    margin-right: 0.5rem;
    margin-left: 0.5rem;
}

.comments_area {
    display: flex;
    flex-direction: column;
    min-width: 100%;
}

.swiper {
    max-height: 100%;
    max-width: 100%;
    touch-action: pinch-zoom;
}

.swiper_image {
    max-height: 80vh;
    max-width: 100%;
}

.swiper_image_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    max-height: 100%;
}

.swiper-slide {
    min-height: 100%;
    min-width: 100%;
}

.disable_comment {
    background: var(--primary-bg-color);
    display: flex;
    font-size: 0.9rem;
    justify-content: center;
    padding: 1rem;
    align-items: center;
    color: var(--primary-text-color);
}

.comment_preference_label {
    padding: 1rem;
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.edit_comment_buttons {
    display: flex;
    gap: 1rem;
    flex-direction: column;
}

.comment_separator {
    border-bottom: 1px solid var(--comment-separator-border-color);
}

.comment_reply {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-left: 0.5rem;
    font-size: 0.9rem;
    cursor: pointer;
    border-left: 0.2rem solid var(--comment-reply-border-left-color);
    overflow: hidden;
    flex-wrap: nowrap;
    text-wrap: nowrap;
    text-overflow: ellipsis;
}

.odd > .content > .comment_reply {
    background: var(--primary-bg-color);
}
.even > .content > .comment_reply {
    background: var(--even-comment-reply-content-background-color);
}

.comment_editor > .edit_comment_section_wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
    background: var(--primary-bg-color);
    padding-top: 0.5rem;

    .edit_comment_section {
        display: flex;
        flex-direction: column;
        width: 100%;
        box-sizing: border-box;
        background: var(--primary-bg-color);
        border-radius: 1rem;
        border: 0.01rem solid var(--attach-link-section-input-border-color);
        padding: 0 0.5rem 0.5rem;
    }

    .edit_comment_textarea {
        min-height: 2rem;
        height: auto;
        width: 100%;
        outline: none;
        border-radius: 1.125rem;
        box-sizing: border-box;
        padding: 0.5rem;
        background: inherit;
        color: inherit;
        border: none;
        resize: none;
    }

    .edit_comment_buttons {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 0.5rem;
    }

    .edit_comment_submit_button {
        font-size: 0.833rem;
    }
}

@media (orientation: portrait) {
    .comment_editor > .edit_comment_section_wrapper {
        .edit_comment_submit_button {
            font-size: 0.6875rem;
        }
    }
}

.unread_comment {
    background: var(--unread-comment-background-color);
}

.new_comments_dot {
    position: absolute;
    background: var(--fill-comment-button-color);
    padding: 0.2rem 0.2rem;
    border-radius: 50%;
    top: -0.3rem;
    left: -0.6rem;
}

/*!*****************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/posts/text_editor.css ***!
  \*****************************************************************************/
:root {
    --text-editor-preview-warning-text-color: #666666;
    --post-title-context-name-color: linear-gradient(90deg, #d59dd6, #aa84bc, #816bb2);
    --post-text-area-border-color: #4a3f64;
    --post-submit-button-color: #a11acf;
    --post-submit-button-text-color: #ffffff;
    --formatting-buttons-gradient-color: linear-gradient(45deg, #816bb2, #d9c2e9);
    --mic-pulse-enable-animation-red-color: rgba(255, 0, 0, 0.5);
    --mic-pulse-enable-animation-dark-red-color: rgba(255, 0, 0, 0);
    --mic-deafault-state-animation-purple-color: #816bb2;
    --mic-deafault-state-animation-blue-color: #3498db;
    --mic-deafault-state-animation-teal-color: #16a085;
    --mic-deafault-state-animation-dark-green-color: #2c4a0d;
    --buy-urgency-points-button-background-color: #fff;
    --buy-urgency-points-button-text-color: #816bb2;
    --rendered-tagged-member-text-color: skyblue;
    --write-and-preview-button-selected-text-and-border-color: #d9c2e9;
    --post-textarea-font-color: #ffffff;
    --post-textarea-placeholder-text-color: #b68fd7;
    --write-and-preview-button-unselected-text-color: #ffffff;
    --post-dropdown-border-color: #4a3f64;
    --formatting-button-label-border-color: #4a3f64;
    --formatting-button-font-color: #d9c2e9;
    --circle-selector-icon-gradient-color: linear-gradient(90deg, #d59dd6, #aa84bc, #816bb2);
    --setting-selector-icon-gradient-color: linear-gradient(90deg, #94819c, #86738d, #78657e);
    --attach-link-section-input-border-color: #4a3f64;
    --attach-link-section-input-text-color: #ffffff;
    --text-editor-lavender-accent: #c084fc;
    --formatting-dropdown-bg-color: #18181b;
}

.files_area > .images,
.files_area > .files {
    display: flex;
    padding: 0.5rem;
    flex-flow: row;
    flex-wrap: wrap;
    padding-top: 1rem;
    overflow: scroll;
    max-height: 20rem;
}

@media (orientation: landscape) {
    .files_area > .images {
        gap: 2rem;
    }

    .files_area > .files {
        gap: 1rem;
    }
}

@media (orientation: portrait) {
    .files_area > .images {
        gap: 1.5rem;
    }

    .files_area > .files {
        gap: 0.75rem;
    }
}

.files_area > .images .post_image {
    box-shadow: var(--post-images-text-editor-bs);
    max-width: 10rem;
    max-height: 10rem;
    border-color: var(--editor-image-border-color);
}

.no_importance {
    color: var(--no-importance-text-color);
    font-weight: bold;
}

.low_importance {
    color: var(--low-importance-text-color);
    font-weight: bold;
}

.medium_importance {
    color: var(--medium-importance-text-color);
    font-weight: bold;
}

.high_importance {
    color: var(--high-importance-text-color);
    font-weight: bold;
}

.extreme_importance {
    color: var(--extreme-importance-text-color);
    font-weight: bold;
}

.text_editor_area .user_profile_with_name {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.text_editor_area .user_profile_with_name > span {
    margin-right: 0.5rem;
}

.text_editor_area > .text_editor_title {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    justify-content: start;
}

@media (orientation: portrait) {
    .text_editor_area > .text_editor_title {
        padding-top: 0.5rem;
        min-width: 100%;
        gap: 1.2rem;
    }

    .text_editor_area .user_profile_with_name {
        padding-left: 1rem;
    }

    .text_editor_area .user_profile_with_name .user_profile_with_post_button {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        align-items: center;
    }
}

.text_editor_title > label {
    font-size: 1rem;
}

@media (orientation: portrait) {
    .text_editor_title > label {
        margin-left: 1rem;
        margin-right: 1rem;
        flex-grow: 1;
    }

    .text_editor_title > .back_button {
        margin-left: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .text_editor_title > .back_button > i.bi {
        font-size: 1.5rem;
    }
}

.title_action + span {
    font-family: var(--short-text-font);
}

.text_editor_area > label.dropdown_content {
    align-self: flex-start;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.circle_selector_option_label {
    display: flex;
    align-items: center;
    margin: 0.5rem 0.5rem 0.5rem 0;
    font-size: 0.9rem;
    gap: 1rem;
}

.dropdown_content {
    .bi-diagram-3-fill {
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        background-position-y: -0%;
        background-image: var(--circle-selector-icon-gradient-color);
    }

    .bi-shield-fill-check {
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        background-position-y: -0%;
        background-image: var(--setting-selector-icon-gradient-color);
    }
}

@media (orientation: portrait) {
    .text_editor_area > label.dropdown_content {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
}

.form_title {
    margin: 0;
    margin-left: 0.5rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid color-mix(in srgb, var(--text-editor-lavender-accent) 25%, transparent);
    border-radius: 0.5rem;
    max-width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: color-mix(in srgb, var(--text-editor-lavender-accent) 2%, transparent);
    color: color-mix(in srgb, var(--primary-text-color) 85%, transparent);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;

    i {
        font-size: 0.95rem;
        color: var(--text-editor-lavender-accent);
        transition: all 0.2s ease;
    }
}

.formatting_buttons {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.75rem;
    background: color-mix(in srgb, var(--primary-text-color) 2%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-text-color) 5%, transparent);
    border-radius: 0.75rem;
    margin-bottom: 0.75rem;
    width: 100%;
    box-sizing: border-box;
}

.formatting_btn_stacked {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem 0.25rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    color: color-mix(in srgb, var(--primary-text-color) 55%, transparent);
    min-width: 0;
    position: relative;
    border: 1px solid transparent;
}

.formatting_btn_icon_container {
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.formatting_btn_icon {
    font-size: 1.05rem;
    display: block;
}

.formatting_btn_text_icon {
    font-size: 0.95rem;
    font-weight: bold;
}

.spoiler_icon_text {
    font-weight: bold;
    font-size: 0.85rem;
}

.formatting_btn_label {
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.desktop_label {
    display: inline;
}

.mobile_label {
    display: none;
}

.formatting_more_btn {
    display: none;

    &.show .formatting_more_dropdown {
        display: flex;
    }

    .formatting_more_dropdown {
        position: absolute;
        top: 105%;
        left: 50%;
        transform: translateX(-50%);
        background: var(--formatting-dropdown-bg-color);
        border: 1px solid color-mix(in srgb, var(--primary-text-color) 10%, transparent);
        box-shadow: 0 0.625rem 1.5625rem -0.3125rem rgba(0, 0, 0, 0.5);
        border-radius: 0.5rem;
        padding: 0.4rem;
        z-index: 100;
        display: none;
        flex-direction: column;
        min-width: 7.5rem;
        gap: 0.2rem;

        .dropdown_item {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.5rem 0.75rem;
            border-radius: 0.375rem;
            color: color-mix(in srgb, var(--primary-text-color) 70%, transparent);
            font-size: 0.85rem;
            transition: all 0.15s ease;
            cursor: pointer;
            white-space: nowrap;

            &:hover {
                background: color-mix(in srgb, var(--primary-text-color) 8%, transparent);
                color: var(--primary-text-color);
            }

            .dropdown_item_icon {
                font-size: 1rem;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 1.25rem;
            }

            .dropdown_item_label {
                font-weight: 500;
            }
        }
    }
}

.textarea_wrapper {
    display: flex;
    flex-direction: column;
    border: 1px solid color-mix(in srgb, var(--primary-text-color) 8%, transparent);
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--dull-bg) 20%, transparent);
    overflow: hidden;
    margin-bottom: 1rem;
    transition: all 0.25s ease;
    border-color: var(--post-dropdown-border-color);

    &:focus-within {
        border-color: var(--text-editor-lavender-accent);
        box-shadow: 0 0 0.75rem color-mix(in srgb, var(--text-editor-lavender-accent) 15%, transparent);
    }

    textarea {
        border: none;
        background: transparent;
        padding: 1rem;
        color: var(--primary-text-color);
        outline: none;
        resize: none;
        min-height: 15rem;
        max-height: 15rem;
        box-shadow: none;

        &::placeholder {
            color: var(--text-editor-lavender-accent);
            opacity: 1;
        }
    }
}

.textarea_footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid color-mix(in srgb, var(--primary-text-color) 5%, transparent);
    background: color-mix(in srgb, var(--primary-text-color) 1%, transparent);
}

.footer_action_chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem;
    background: color-mix(in srgb, var(--text-editor-lavender-accent) 3%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-editor-lavender-accent) 25%, transparent);
    border-radius: 0.5rem;
    color: color-mix(in srgb, var(--primary-text-color) 85%, transparent);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;

    input[type='file'] {
        display: none;
    }

    .footer_chip_text {
        font-weight: 500;
    }
}

@media (max-width: 767px) {
    .formatting_buttons {
        gap: 0.25rem;
        padding: 0.5rem;
    }

    .formatting_btn_stacked.format_secondary {
        display: none;
    }

    .formatting_more_btn {
        display: flex;
    }

    .desktop_label {
        display: none;
    }

    .mobile_label {
        display: inline;
    }

    .formatting_btn_stacked {
        padding: 0.4rem 0.1rem;
    }

    .formatting_btn_label {
        font-size: 0.7rem;
    }

    .textarea_footer {
        justify-content: flex-end;
        padding: 0.5rem 0.75rem;
        gap: 0.5rem;
    }

    .footer_action_chip.emoji_action_chip {
        display: none;
    }
}

.text_editor_input {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.text_editor_user_profile_photo {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: var(--round-image-br);
    border: 0.2rem solid var(--primary-border-color);
    margin-left: 0.3rem;
}

@media (orientation: landscape) {
    .text_editor {
        padding-top: 1rem;
        margin-left: 1rem;
        margin-right: 1rem;
    }

    form.hidden + .text_editor {
        padding-top: 2rem;
    }
}

@media (orientation: portrait) {
    .text_editor {
        padding-top: 1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    form.hidden + .text_editor {
        border: 0;
    }

    .text_editor > .tab_selector {
        display: flex;
        flex-direction: row;
    }
}

.text_editor > .tab_selector {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin-bottom: 1rem;
}

.speech_to_text_container {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.speech_to_text_container label,
.speech_to_text_container button,
.tab_selector .speech_and_formatting_button label {
    color: inherit;
    padding: 0.3rem 0.3rem;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    height: 100%;
    background: transparent;
}

.quick-post-visibility-selector {
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.post_comment_setting_options_wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.8rem;
    width: 100%;
}

.post_comment_setting_options_wrapper .comment_setting_options_wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.post_setting_wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.75rem;
}

.quick-post-circle-selector-label,
.quick-post-setting-option-label {
    font-weight: bold;
}

.quick-post-visibility-selector-option {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tab_selector .speech_and_formatting_button label > p {
    margin: 0;
    border-bottom: solid;
    padding: 0 0.3rem;
}

.preview_placeholder {
    font-size: 1rem;
    font-weight: bolder;
    color: var(--text-editor-preview-warning-text-color);
}

.text_editor > .tab_selector > div {
    display: flex;
    gap: 0.7rem;
}

.speech_to_text_button {
    border: none;
    font-size: 1rem;
    transition: color 0.3s ease;
}

.speech_to_text_button.enabled {
    border-radius: 0.75rem;
    animation: micPulse 1.5s infinite;
}

@keyframes micPulse {
    0% {
        box-shadow: 0 0 0 0 var(--mic-pulse-enable-animation-red-color);
    }

    70% {
        box-shadow: 0 0 0 0.4rem var(--mic-pulse-enable-animation-dark-red-color);
    }

    100% {
        box-shadow: 0 0 0 0 var(--mic-pulse-enable-animation-dark-red-color);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.text_editor > .tab_selector > .write_and_preview_button_container > label {
    padding: 0.6rem 1.2rem;
    box-sizing: border-box;
    min-width: 6.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    border-radius: 9999px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border: 1px solid color-mix(in srgb, var(--text-editor-lavender-accent) 25%, transparent);
}

.tab_icon {
    font-size: 1.1rem;
    display: flex;
    align-items: center;
}

.tab_selector_radio:checked + label {
    color: var(--text-editor-lavender-accent);
    background: color-mix(in srgb, var(--text-editor-lavender-accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-editor-lavender-accent) 40%, transparent);
    box-shadow: 0 0 0.75rem color-mix(in srgb, var(--text-editor-lavender-accent) 15%, transparent);
    font-weight: 600;
}

.tab_selector_radio:not(:checked) + label {
    color: color-mix(in srgb, var(--primary-text-color) 40%, transparent);
    background: color-mix(in srgb, var(--primary-text-color) 3%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-text-color) 5%, transparent);
}

.tab_selector_radio:not(:checked) + label:hover {
    color: color-mix(in srgb, var(--primary-text-color) 70%, transparent);
    background: color-mix(in srgb, var(--primary-text-color) 7%, transparent);
    border-color: color-mix(in srgb, var(--primary-text-color) 10%, transparent);
}

.text_editor_form {
    padding: 1.5rem;
    min-width: 5rem;
    margin-left: 1rem;
    margin-bottom: 2rem;
}

.circle_selector_form {
    padding: 0.75rem;
}

.attach_link_section {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 200;
    background-color: var(--attach-link-bg-color);
    padding: 20px;
    border-radius: var(--attach-link-index-br);
    display: flex;
    flex-direction: column;
    gap: 1rem;

    input,
    button {
        padding: 0.5rem;
        background: transparent;
        color: var(--attach-link-section-input-text-color);
        border: none;
        border: 0.01rem solid var(--attach-link-section-input-border-color);
        border-radius: 0.5rem;
    }
}

.attach_link_section input:focus {
    outline: none;
}

.attach_link_label_input_wrapper {
    display: flex;
    flex-direction: row;
    gap: 0.7rem;
}

.attach_link_section > label,
.attach_link_section > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.attach_link_section > input:focus {
    outline: none;
}

@media (orientation: portrait) {
    .text_editor_form {
        margin-bottom: 2rem;
    }

    .attach_link_label_input_wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.7rem;
    }

    .attach_link_section > label,
    .attach_link_section > div {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }
}

.text_editor_mandli {
    display: flex;
    justify-content: space-between;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

@media (orientation: portrait) {
    .text_editor_mandli {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        padding-left: 0.75rem;
    }

    .tab_selector {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .speech_and_formatting_button {
        display: flex;
        flex-direction: row;
        justify-content: end;
        align-items: center;
    }
}

.text_editor_mandli > .mandli_balance {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-right: 1rem;
}

.text_editor_mandli > .mandli_balance > input {
    max-width: 3rem;
    text-align: center;
    background: 0;
    color: var(--urgency-point-input-text-color);
    font-weight: bold;
    border-radius: var(--one-fourth-br);
    border: solid;
    border-width: 0.01rem;
    border-color: var(--urgency-point-input-border-color);
    padding: 0.25rem 0.3rem;
    outline: none;
}

.text_editor_form > label {
    display: flex;
    justify-content: space-between;
    min-width: 100%;
    padding: 0.25rem 0.5rem;
}

.text_editor_form > label:hover,
.form_title:hover,
.text_editor > .tab_selector > label:hover,
.text_editor > .tab_selector > div > label:hover,
.files_area > label {
    cursor: pointer;
}

.input_tab > textarea {
    min-height: 15rem;
    max-height: 15rem;
    background: transparent;
    padding: 0.5rem;
    min-width: calc(100% - 1rem);
    border-width: 0.01rem;
    border-radius: var(--half-br);
    border-color: var(--post-text-area-border-color);
    color: var(--post-textarea-font-color);
    font-size: 1rem;
    resize: none;
    font-family: var(--ai-post-font);
    line-height: 1.5rem;
}

.input_tab > textarea::placeholder {
    color: var(--text-editor-lavender-accent);
}

@media (orientation: portrait) {
    .input_tab > textarea {
        min-height: 15rem;
    }
}

.input_tab > textarea:focus {
    outline: 0;
}

.preview_tab,
.input_tab {
    margin-bottom: 1rem;
    border: solid;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.input_tab {
    border: none;
}

strong.long {
    color: #d5d527;
}

strong.short {
    color: yellow;
}

.preview_tab {
    padding: 0.5rem;
    overflow: scroll;
    max-height: 20rem;
    border-width: 0.01rem;
    border-radius: var(--half-br);
    border-color: var(--post-text-area-border-color);
}

.custom_radio:checked {
    display: none;
}

.custom_radio + input {
    min-width: 3rem;
    text-align: center;
}

.poll_area,
.files_area {
    display: flex;
    flex-direction: column;
    margin-top: 2rem;
    margin-left: 1rem;
    margin-right: 1rem;
}

@media (orientation: portrait) {
    .files_area {
        margin-top: 0.5rem;
        min-width: 0;
    }
}

.files_area > label {
    align-self: center;
    font-weight: bold;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    display: flex;
    align-items: center;
}

.files_area > label > .plus_icon {
    border-radius: var(--round-image-br);
    border: solid;
    border-width: 0.01rem;
    margin-right: 0.5rem;
    height: 2rem;
    width: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.post_submit_button {
    display: flex;
    justify-content: flex-end;
    margin-right: 1rem;
    align-items: center;

    button {
        min-width: 6.5rem;
        padding: 0.55rem 1.75rem;
        background: linear-gradient(135deg, var(--primary-accent-light-color) 0%, var(--primary-accent-color) 100%);
        border: 1px solid color-mix(in srgb, var(--primary-text-color) 15%, transparent);
        border-radius: 0.5rem;
        font-weight: 600;
        font-size: 0.95rem;
        color: var(--primary-text-color);
        cursor: pointer;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--primary-accent-color) 15%, transparent);
        outline: none;
    }
}

/* Consolidated Hover States for touched elements */
@media (hover: hover) {
    .form_title:hover,
    .formatting_btn_stacked:hover,
    .footer_action_chip:hover {
        background: color-mix(in srgb, var(--text-editor-lavender-accent) 8%, transparent);
    }

    .form_title:hover,
    .formatting_btn_stacked:hover {
        color: var(--text-editor-lavender-accent);
    }

    .form_title:hover {
        border-color: color-mix(in srgb, var(--text-editor-lavender-accent) 45%, transparent);
    }

    .formatting_btn_stacked:hover {
        border-color: color-mix(in srgb, var(--text-editor-lavender-accent) 25%, transparent);
    }

    .footer_action_chip:hover {
        border-color: color-mix(in srgb, var(--text-editor-lavender-accent) 40%, transparent);
        color: var(--primary-text-color);
    }

    .form_title:hover i {
        color: color-mix(in srgb, var(--text-editor-lavender-accent) 80%, var(--primary-text-color));
    }

    .post_submit_button button:hover {
        background: linear-gradient(135deg, var(--primary-accent-color) 0%, var(--primary-accent-light-color) 100%);
        box-shadow: 0 0.375rem 1rem color-mix(in srgb, var(--primary-accent-color) 35%, transparent);
        transform: translateY(-1px);
    }
}

/* Consolidated Active States for touched elements */
.form_title:active,
.formatting_btn_stacked:active,
.footer_action_chip:active {
    background: color-mix(in srgb, var(--text-editor-lavender-accent) 15%, transparent);
}

.form_title:active,
.formatting_btn_stacked:active {
    color: var(--text-editor-lavender-accent);
}

.form_title:active {
    border-color: color-mix(in srgb, var(--text-editor-lavender-accent) 55%, transparent);
}

.formatting_btn_stacked:active {
    border-color: color-mix(in srgb, var(--text-editor-lavender-accent) 30%, transparent);
}

.footer_action_chip:active {
    border-color: color-mix(in srgb, var(--text-editor-lavender-accent) 50%, transparent);
    color: var(--primary-text-color);
}

.post_submit_button button:active {
    background: var(--primary-accent-color);
    box-shadow: 0 0.125rem 0.375rem color-mix(in srgb, var(--primary-accent-color) 20%, transparent);
    transform: translateY(1px);
}

@media (orientation: landscape) {
    .post_submit_button {
        margin-top: 2rem;
    }
}

@media (orientation: landscape) {
    #create_post_area {
        grid-area: main_area;
        max-height: calc(100 * var(--vh) - 3rem);
        overflow: scroll;
    }

    .text_editor_area {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 2rem;
        padding: 1rem;
        border: 0.0625rem solid var(--secondary-bg-color);
        border-radius: 0.5rem;
    }
}

@media (orientation: portrait) {
    #portrait_text_editor {
        min-width: 100%;
        max-width: 100%;
    }

    .text_editor_area {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .top_bar_wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0.7rem;
        padding-bottom: 0;
    }
}

.text_editor_circle_form {
    margin: 0;
    padding: 1rem;
}

.post_options {
    margin-top: 1rem;
}

.post_comment_options {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    justify-content: space-between;
}

.post_options > .post_comment_options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.comment_options_dropdown_wrapper {
    display: flex;
    width: fit-content;
}

@media (orientation: portrait) {
    .post_options {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 0 1rem;
        margin-bottom: 1rem;
    }

    .post_comment_options {
        justify-content: space-between;
        flex-direction: column;
        margin-left: 1rem;
    }

    .post_options > .post_comment_options {
        margin-top: 1rem;
    }
}

.post_comment_options > label {
    display: flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    gap: 1rem;
}

label.show_locale_selector select {
    max-width: 10rem;
    background: var(--primary-bg-color);
    color: var(--primary-text-color);
    outline: none;
    border: none;
}

label.show_locale_selector select.locale_selector_wrt_context {
    max-width: 4rem;
}

.show_locale_selector i,
.hide_locale_selector select {
    display: none;
}

.text_editor_area .text_editor_comment_preference {
    margin: 1rem 0 0 1rem;
    padding-bottom: 0.5rem;
    display: flex;
    gap: 0.5rem;
}

.post_options .dropdown_container {
    display: flex;
    gap: 1rem;
}

.post_options .dropdown_container .not_preferred {
    max-height: 2rem;
}

@media (orientation: portrait) {
    .post_options .dropdown_container {
        display: flex;
        justify-content: space-between;
        gap: 0;
    }

    .post_comment_options > label {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.9rem;
        padding: 0;
    }

    label.show_locale_selector select {
        max-width: 4rem;
    }
}

.friend_selector_dropdown {
    position: absolute;
    z-index: 100;
    background: var(--low-contrast-color);
    height: 30%;
    padding: 0.5rem;
    border-radius: var(--half-br);
}

.friend_selector_dropdown > div {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    overflow: scroll;
}

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

.mirror_element {
    min-height: 15rem;
    max-height: 15rem;
    background: transparent;
    padding: 0.5rem;
    border-radius: var(--half-br);
    min-width: calc(100% - 1rem);
    border: 0;
    color: var(--secondary-text-color);
    font-size: 1rem;
    resize: none;
    background-image: initial;
    background-color: transparent;
    border-color: initial;
    color: var(--darkreader-text--secondary-text-color);
}

.rendered_tagged_member {
    color: var(--rendered-tagged-member-text-color);
    cursor: pointer;
}

.buy_urgency_points_button {
    font-size: 1rem;
    border: none;
    font-weight: bold;
    padding: 0;
    background: transparent;
    color: var(--buy-urgency-points-button-text-color);
    cursor: pointer;
}

.file_upload_preview_wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.file_upload_preview_wrapper iframe {
    width: 100%;
    height: 75dvh;
    border: none;
    border-radius: 0.75rem;
}

.no_preview_available_wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bottom-navigation-bg-color);
    padding: 1.5rem 2.5rem;
    border-radius: 1rem;
    gap: 1.5rem;
    opacity: 0.7;
}

.text_file_preview {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 28rem;
    padding: 0.75rem;
    border: 0.01rem solid var(--attach-link-section-input-border-color);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.file_size_preview_text_wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.file_size_preview_text_wrapper .no_preview_available_text {
    font-size: 1.25rem;
}

.file_size_preview_text_wrapper .file_size_text {
    font-size: 1rem;
}

.no_preview_available_wrapper i {
    font-size: 3.5rem;
}

.files_area > .files > .post_file_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    background: var(--about-mandli-members-bg-color);
    padding: 0.5rem;
    width: fit-content;
    border-radius: 0.5rem;
    width: 100%;
    max-width: 20rem;
}

.files_area > .files > .post_file_container > .file_type_meta_wrapper {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.files_area > .files > .post_file_container > .file_type_meta_wrapper > div > .file_icon {
    font-size: 2rem;
}

.files_area > .files > .post_file_container > .remove_icon {
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem;
}

.files_area > .files > .post_file_container > .remove_icon:hover {
    background: var(--approve-button-bg);
    border-radius: 0.5rem;
}

.files_area > .files > .post_file_container > .file_type_meta_wrapper > .file_info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 13rem;
}

.files_area > .files > .post_file_container > .file_type_meta_wrapper > .file_info > .file_name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 0;
    font-size: 0.9rem;
}

.files_area > .files > .post_file_container > .file_type_meta_wrapper > .file_info > .file_meta {
    font-size: 0.7rem;
    opacity: 0.8;
}

.repost_preview_wrapper {
    margin-top: 1rem;
    margin-bottom: 1rem;
    pointer-events: none;
    user-select: none;
}

/*!*******************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/mobile_user_profile.css ***!
  \*******************************************************************************/
@media (orientation: portrait) {
    #user_profile h3 {
        text-align: center;
    }

    #user_profile .experience .heading {
		display: grid;
        grid-template:
            'expando organization'
            'expando title'
			'expando stack' 
            'expando date'/ 2rem auto;
    }
	#user_profile .experience .organization{
		grid-area: organization;
		font-size: 1.4rem;
		font-weight: bold;
	}
    #user_profile .experience .date {
		text-align: end;
    }

    #user_profile .experience .description {
        padding-left: 1rem;
    }

    div#user_profile {
        max-height: calc(100 * var(--vh) - 5rem);
    }

    label.channel_info_name_label:hover {
        cursor: pointer;
        font-size: 1.1rem;
    }

    .user_profile_content {
        padding-left: 1rem;
    }

    div#tag_line_div p {
        font-size: 1rem;
    }

    #user_info_address {
        font-size: 0.7rem;
    }

    #user_info_name {
        font-size: 1rem;
    }

    .generic_button {
        min-width: 7rem;
        min-height: 1.5rem;
    }

    div#user_profile_channels,
    div#user_profile_circles {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}

/*!************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/sidebar_card.css ***!
  \************************************************************************/
:root {
    --sidebar-card-bg-elevated: var(--mandli-bg-elevated, #0f1218);
    --sidebar-card-stroke: var(--mandli-stroke, #1e222c);
    --sidebar-card-unread: var(--mandli-card-unread, #141926);
    --sidebar-card-text-hi: var(--mandli-text-hi, #f1f2f6);
    --sidebar-card-text-mid: var(--theme-text-mid, #9ba1b0);
    --sidebar-card-text-low: var(--theme-text-low, #565c6b);
    --sidebar-card-blue: var(--theme-blue, #5b8cff);
    --sidebar-card-violet: var(--theme-violet, #9b7bff);
    --sidebar-card-pink: var(--mandli-pink, #e38cff);
    --sidebar-card-img-bg: var(--mandli-img-bg, #23283a);
    --sidebar-card-img-fallback-bg: var(--mandli-img-fallback-bg, #161a24);
    --sidebar-card-accent-rgb: var(--theme-accent-rgb, 123, 133, 255);
    --sidebar-card-red: var(--mandli-red, #ff0000);
    --sidebar-card-red-rgb: var(--mandli-red-rgb, 255, 0, 0);
    --sidebar-card-glow: var(--mandli-glow, 0 0 0 0.0625rem rgba(82, 89, 167, 0.22), 0 0.5rem 1.75rem -0.5rem rgba(52, 85, 161, 0.35), 0 0 2.5rem -0.75rem rgba(98, 73, 175, 0.3));
    --sidebar-card-white: var(--theme-white, #ffffff);
    --sidebar-card-icon-bg: var(--mandli-icon-bg, #1e2230);
    --sidebar-card-shadow-color: var(--mandli-shadow-color, rgba(0, 0, 0, 0.4));
    --sidebar-card-text-unread: var(--mandli-text-unread, #b7c2f5);
    --sidebar-card-btn-border: var(--mandli-btn-border, #2b3140);
    --sidebar-card-btn-text: var(--mandli-btn-text, #e4a73b);
}

.sidebar_card {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: var(--sidebar-card-bg-elevated);
    border: 0.0625rem solid var(--sidebar-card-stroke);
    border-radius: 0.8rem;
    padding: 0.45rem 0.75rem;
    box-sizing: border-box;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
    cursor: pointer;
    box-shadow: none;
}

.sidebar_card.mandli_name:has(.sidebar_card_badge),
.sidebar_card.has_unread_messages {
    background: var(--sidebar-card-bg-elevated);
    border: 0.0625rem solid rgba(var(--sidebar-card-accent-rgb), 0.18);
    box-shadow: var(--sidebar-card-glow);
}

.sidebar_card.notification_message {
    margin-bottom: 0;
    align-items: center;
    border: 0.0625rem solid var(--sidebar-card-stroke);
    border-inline-width: 0.0625rem;
    padding: 0.45rem 0.75rem;
}

.sidebar_card .sidebar_card_image_container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.125rem;
    height: 3.125rem;
    border-radius: 1rem;
    box-sizing: border-box;
    border: 0.15rem solid transparent;
    background:
        linear-gradient(var(--sidebar-card-img-bg), var(--sidebar-card-img-bg)) padding-box,
        linear-gradient(var(--sidebar-card-img-bg), var(--sidebar-card-img-bg)) border-box;
    transition: background 0.2s ease;
    margin-right: 0.625rem;
}

.sidebar_card.mandli_name:has(.sidebar_card_badge) .sidebar_card_image_container,
.sidebar_card.has_unread_messages .sidebar_card_image_container {
    background:
        linear-gradient(var(--sidebar-card-img-bg), var(--sidebar-card-img-bg)) padding-box,
        conic-gradient(from 220deg, var(--sidebar-card-blue), var(--sidebar-card-violet), var(--sidebar-card-pink), var(--sidebar-card-blue)) border-box;
}

.sidebar_card .sidebar_card_image_container > img {
    width: 100%;
    height: 100%;
    border-radius: 0.85rem;
    object-fit: cover;
    background: transparent;
    border: none;
}

.sidebar_card .sidebar_card_image_container > i {
    font-size: 1.15rem;
    color: var(--sidebar-card-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, transform 0.2s ease;
}

.sidebar_card .sidebar_card_image_container > img.default_profile_pic,
.sidebar_card .sidebar_card_image_container > img.default_user_icon {
    padding: 0;
    border-radius: 0.85rem;
    background: transparent;
}

.sidebar_card .sidebar_card_image_container > i,
.sidebar_card .sidebar_card_image_container > .noto_emojis {
    font-size: 1.25rem;
    color: var(--sidebar-card-blue);
}

.sidebar_card .sidebar_card_image_container .rock_paper_scissors_button {
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.sidebar_card .sidebar_card_image_container .sidebar_card_type_icon {
    position: absolute;
    bottom: -0.1875rem;
    right: -0.1875rem;
    background: var(--sidebar-card-icon-bg);
    border: 0.0625rem solid var(--sidebar-card-stroke);
    color: var(--sidebar-card-blue);
    border-radius: 50%;
    width: 1.125rem;
    height: 1.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    box-shadow: 0 0.125rem 0.25rem var(--sidebar-card-shadow-color);
    z-index: 1;
}

.sidebar_card .sidebar_card_content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex: 1;
    min-width: 0;
    width: auto;
}

.sidebar_card .sidebar_card_name {
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--sidebar-card-text-hi);
    letter-spacing: -0.01rem;
    margin-bottom: 0.25rem;
    text-align: left;
    width: 100%;
    transition:
        color 0.2s ease,
        font-weight 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar_card.mandli_name:has(.sidebar_card_badge) .sidebar_card_name,
.sidebar_card.has_unread_messages .sidebar_card_name {
    color: var(--sidebar-card-text-hi);
    font-weight: 700;
}

.sidebar_card:active .sidebar_card_name {
    color: var(--sidebar-card-text-hi);
    font-weight: 700;
}

.sidebar_card .sidebar_card_text {
    font-size: 0.78125rem;
    font-weight: 500;
    color: var(--sidebar-card-text-mid);
    margin-bottom: 0.1875rem;
    text-align: left;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 1;
    width: 100%;
}

.sidebar_card .sidebar_card_text * {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    white-space: nowrap;
    display: inline;
}

.sidebar_card .sidebar_card_icon {
    font-size: 0.72rem;
    margin-right: 0.25rem;
    vertical-align: -0.06rem;
    display: inline-block;
    line-height: 1;
}

.sidebar_card.mandli_name:has(.sidebar_card_badge) .sidebar_card_text,
.sidebar_card.has_unread_messages .sidebar_card_text {
    color: var(--sidebar-card-text-unread);
}

.sidebar_card:active .sidebar_card_text {
    color: var(--sidebar-card-text-unread);
}

.sidebar_card .sidebar_card_time {
    position: absolute;
    bottom: 0.1rem;
    right: 0.75rem;
    font-size: 0.65625rem;
    color: var(--sidebar-card-text-low);
    font-weight: 500;
    text-align: right;
    margin-top: 0;
    opacity: 1;
}

.sidebar_card .sidebar_card_badge {
    display: none;
    position: absolute;
    top: calc(50% - 1.85rem);
    left: 0.25rem;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.25rem;
    border-radius: 0.5625rem;
    background: linear-gradient(135deg, var(--sidebar-card-blue), var(--sidebar-card-violet));
    color: var(--sidebar-card-white);
    font-size: 0.625rem;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 0 0.1875rem var(--sidebar-card-unread),
        0 0 0.75rem -0.125rem rgba(var(--sidebar-card-accent-rgb), 0.8);
    z-index: 2;
    max-height: none;
    opacity: 1;
}

.sidebar_card.has_unread_messages .sidebar_card_badge,
.sidebar_card.mandli_name .sidebar_card_badge {
    display: flex;
}

.sidebar_card .sidebar_card_buff_badge {
    position: absolute;
    top: calc(50% - 1.2rem);
    right: 0.625rem;
    left: auto;
    bottom: auto;
    min-width: 0.75rem;
    height: 0.75rem;
    padding: 0 0.15rem;
    border-radius: 0.1875rem;
    background: var(--sidebar-card-red);
    color: var(--sidebar-card-white);
    font-size: 0.55rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 0 0.08rem var(--sidebar-card-unread),
        0 0 0.5rem -0.125rem rgba(var(--sidebar-card-red-rgb), 0.8);
    z-index: 2;
    max-height: none;
    opacity: 1;
}

.sidebar_card .sidebar_card_actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.sidebar_card .sidebar_card_actions > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.1875rem;
    padding: 0.375rem 0.75rem;
    border-radius: 1.25rem;
    background: var(--sidebar-card-bg-elevated);
    border: 0.0625rem solid var(--sidebar-card-btn-border);
    color: var(--sidebar-card-btn-text);
    font-size: 0.6875rem;
    font-weight: 700;
    font-family: 'Sora', sans-serif;
    letter-spacing: 0.01rem;
    white-space: nowrap;
    outline: none;
    cursor: pointer;
    box-sizing: border-box;
    min-width: unset;
    pointer-events: all;
}

.sidebar_card .sidebar_card_actions > button::before {
    content: '🔥';
    font-size: 0.6875rem;
}

@media (hover: hover) {
    .sidebar_card:hover {
        background: var(--sidebar-card-unread);
        border-color: rgba(var(--sidebar-card-accent-rgb), 0.18);
        box-shadow: var(--sidebar-card-glow);
    }
    .sidebar_card.mandli_name:has(.sidebar_card_badge):hover,
    .sidebar_card.has_unread_messages:hover {
        background: var(--sidebar-card-unread);
    }
    .sidebar_card:hover .sidebar_card_image_container {
        background:
            linear-gradient(var(--sidebar-card-img-bg), var(--sidebar-card-img-bg)) padding-box,
            conic-gradient(from 220deg, var(--sidebar-card-blue), var(--sidebar-card-violet), var(--sidebar-card-pink), var(--sidebar-card-blue)) border-box;
    }
    .sidebar_card:hover .sidebar_card_name {
        color: var(--sidebar-card-text-hi);
        font-weight: 700;
    }
    .sidebar_card:hover .sidebar_card_text {
        color: var(--sidebar-card-text-unread);
    }
    .sidebar_card:hover .sidebar_card_image_container > i {
        color: var(--sidebar-card-text-hi);
    }
}

.sidebar_create_btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    align-self: stretch;
    max-width: none;
    min-width: 0;
    width: auto;
    padding: 0.8125rem 1rem;
    border-radius: 0.875rem;
    background: var(--sidebar-card-bg-elevated);
    border: 0.0625rem solid var(--sidebar-card-stroke);
    color: var(--sidebar-card-white);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition:
        border-color 200ms ease,
        box-shadow 200ms ease,
        transform 200ms ease,
        background 200ms ease;
    margin-bottom: 1rem;
    justify-content: center;
    box-sizing: border-box;
}

.sidebar_create_btn .sidebar_create_badge {
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 0.4375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--sidebar-card-blue), var(--sidebar-card-violet));
    flex-shrink: 0;
}

.sidebar_create_btn .sidebar_create_badge i {
    font-size: 0.75rem;
    color: var(--sidebar-card-white);
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (hover: hover) {
    .sidebar_create_btn:hover {
        border-color: color-mix(in srgb, var(--sidebar-card-blue) 55%, transparent);
        box-shadow:
            0 0 0 0.0625rem color-mix(in srgb, var(--sidebar-card-blue) 8%, transparent),
            0 0.5rem 1.5rem -0.5rem rgba(var(--sidebar-card-accent-rgb), 0.38);
        transform: translateY(-0.0625rem);
        background: var(--sidebar-card-unread);
    }
}

.sidebar_create_btn:active {
    transform: translateY(0) scale(0.985);
    box-shadow: none;
    background: var(--sidebar-card-unread);
}

.sidebar_create_btn:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 0.125rem #000000,
        0 0 0 0.25rem var(--sidebar-card-blue);
}

/*!******************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/mandli.css ***!
  \******************************************************************/
:root {
    --mandli-bg-elevated: #0f1218;
    --mandli-card-read: #12151c;
    --mandli-card-unread: #141926;
    --mandli-stroke: #1e222c;
    --mandli-stroke-soft: rgba(35, 40, 51, 0.25);
    --mandli-text-hi: #f1f2f6;
    --mandli-text-mid: #9ba1b0;
    --mandli-text-low: #565c6b;
    --mandli-glow: 0 0 0 0.0625rem rgba(82, 89, 167, 0.22), 0 0.5rem 1.75rem -0.5rem rgba(52, 85, 161, 0.35), 0 0 2.5rem -0.75rem rgba(98, 73, 175, 0.3);
    --mandli-black: #000000;
    --mandli-white: #ffffff;
    --mandli-img-bg: #23283a;
    --mandli-pink: #e38cff;
    --mandli-img-fallback-bg: #161a24;
    --mandli-icon-bg: #1e2230;
    --mandli-text-unread: #b7c2f5;
    --mandli-btn-border: #2b3140;
    --mandli-btn-text: #e4a73b;
    --mandli-shadow-color: rgba(0, 0, 0, 0.4);
    --mandli-red: #ff0000;
    --mandli-red-rgb: 255, 0, 0;
    --mandli-hairline: rgba(255, 255, 255, 0.07);
    --mandli-hairline-strong: rgba(255, 255, 255, 0.12);
    --mandli-hover-bg: #1d1d24;
    --mandli-active-bg: #131316;
}

@media (orientation: landscape) {
    div#mandli {
        grid-area: main_area;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }

    #importance_slider_mandli_tag,
    #importance_slider_tag {
        margin: 0;
        font-size: 0.8rem;
    }

    .mandli_details {
        box-shadow: 0 0.1rem 0 black;
        border-radius: 0;
    }
}

@media (orientation: portrait) {
    div#mandli {
        grid-area: main_area;
        display: flex;
        flex-direction: column;
    }

    .mandli_details_image {
        grid-area: mandli_image;
        display: flex;
        align-items: center;
    }

    .mandli_details_name > p {
        font-size: 1.5rem;
        margin: 0;
    }

    #importance_slider_mandli_tag,
    #importance_slider_tag {
        margin: 0;
        font-size: 0.6rem;
        display: flex;
        justify-content: center;
    }

    input[type='checkbox']:checked.portrait_checkbox + #bottom_navigation_create_post_button,
    input[type='checkbox']:not(:checked).portrait_checkbox + #bottom_navigation_create_post_button + #bottom_navigation_create_mandli_post_button {
        display: none;
    }

    .mandli_scroll_area {
        max-height: calc(100 * var(--vh) - 13rem);
    }
    .mandli_scroll_area.no_tab_selector {
        max-height: calc(100 * var(--vh) - 11rem);
    }

    .without_chat_bar .mandli_scroll_area {
        max-height: calc(100 * var(--vh) - 10.5rem);
    }
}

.mandli_header .bi-list,
.mandli_header > .back_button > .bi-arrow-left {
    font-size: 1.2rem;
}
@keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}

input[type='radio']:not(:checked)#radio_join_mandli ~ .mandli_scroll_area > #mandli_about,
input[type='radio']:checked#radio_join_mandli ~ .mandli_scroll_area > #mandli_feed > #importance_slider,
input[type='radio']:checked#radio_join_mandli ~ .mandli_scroll_area > #mandli_feed > #importance_slider_tag,
input[type='radio']:checked#radio_join_mandli ~ .mandli_scroll_area > #mandli_feed > #search_aliases_mandli,
input[type='radio']:checked#radio_join_mandli ~ .mandli_scroll_area > #mandli_create_post {
    display: none;
}

.mandli_about .read_label {
    margin-top: 0;
    margin-bottom: 0;
}
.background_border {
    position: relative;
    z-index: 0;
    border-radius: 0.2rem;
    overflow: hidden;
    padding: 0.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    font-weight: bold;

    &::before {
        content: '';
        position: absolute;
        z-index: -2;
        left: -50%;
        top: -50%;
        width: 200%;
        height: 200%;
        background-color: #399953;
        background-repeat: no-repeat;
        background-size:
            50% 50%,
            50% 50%;
        background-position:
            0 0,
            100% 0,
            100% 100%,
            0 100%;
        background-image: linear-gradient(#ffe20b, #ffe20b), linear-gradient(#ff41b1, #ff41b1), linear-gradient(#3cecff, #3cecff), linear-gradient(#3eff37, #3eff37);
        animation: rotate 4s linear infinite;
    }
}

.background_border::hover {
    animation: none;
}

#join_mandli_button {
    font-size: 1rem;
    font-weight: bold;
    height: fit-content;
    background: black;
    border-radius: 0.2rem;
    padding: 0.5rem 1rem;
}

#landscape_mandli_name_div h4 {
    margin: 0.5rem;
    margin-top: 1rem;
    color: var(--mandli-name-heading-color);
}

#create_mandli {
    grid-area: main_area;
    padding-top: 0.5rem;
    padding-left: 1rem;
}

span#portrait_mandli_notification_dot,
span#landscape_mandli_notification_dot {
    padding: 0.2rem 0.2rem;
    border-radius: 50%;
    top: -10%;
    right: -20%;
}

.select_members_mandli {
    padding: 1rem;
    display: flex;
    gap: 1rem;
}

.mandli_details {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--primary-text-color);
    padding: 0.5rem;
    background-color: var(--dropdown-bg-color);
    box-shadow: 0 0.1rem 0 black;
    border-radius: 0;
    z-index: 1;
}

.mandli_details > div.mandli_header {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

.mandli_details_metadata {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    justify-content: center;
    min-width: 100%;
}

.mandli_profile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.mini_image_container,
.circle_name > .image_container,
.mandli_details_metadata > .image_container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.1rem;
    border-radius: var(--round-image-br);
}

.mini_image_container,
.image_container > img {
    border: solid;
    border-color: var(--primary-border-color);
    border-radius: var(--round-image-br);
}

.mini_image_container {
    border-width: 0.01rem;
    padding: 0;
}

.image_container {
    border-width: 0.2rem;
}

.image_container > img {
    max-height: 2rem;
    min-height: 2rem;
    max-width: 2rem;
    min-width: 2rem;
}

.mini_image_container > img.mini_image {
    border-radius: var(--round-image-br);
    min-height: 2.5rem;
    min-width: 2.5rem;
    max-width: 2.5rem;
    max-height: 2.5rem;
}

@media (orientation: portrait) {
    .image_container > img {
        max-height: 2rem;
        min-height: 2rem;
        max-width: 2rem;
        min-width: 2rem;
    }
}
.mandli_meet_button {
    color: inherit;
}

.mandli_ellipsis_buttons > * {
    padding: 0.3rem;
}

.mandli_ellipsis_buttons > label.ellipsis > div {
    display: flex;
}

.mandli_ellipsis_buttons > *:hover {
    background: var(--primary-bg-color);
    border-radius: 0.2rem;
}

.mandli_details_name {
    display: flex;
    justify-content: center;
    align-items: center;
}

.circle_name > label,
.mandli_details_name > p {
    font-family: var(--short-text-font);
    font-weight: bold;
    font-size: 1.6rem;
    margin: 0;
    /* padding-left: 0.8rem;*/
}

@media (orientation: portrait) {
    .circle_name > label,
    .mandli_details_name > p {
        font-size: 1.4rem;
        text-align: center;
    }
}

.mandli_ellipsis_buttons {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: var(--secondary-text-color);
}

#search_aliases_mandli label:hover,
.create_tag_popup > .options_selector label:hover,
.mandli_ellipsis_buttons > .ellipsis:hover {
    cursor: pointer;
}

#landscape_mandli_name_div {
    padding: 0.5rem;
    margin: 0;
    height: 100%;
    min-height: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background-color: var(--landscape-navigation-bar-background-color);
}



.trending_circle_name {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    padding-left: 1rem;
    padding-right: 0.5rem;
    border-bottom-width: 0.01rem;
    border-bottom-color: var(--side-bar-mandli-border-color);
    margin-bottom: 0;
    border-right: none;
    border-left: none;
    border-top: none;
}

.trending_circle_name > .circle_image_container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--round-image-br);
    border: solid;
    border-width: 0.15rem;
    border-color: var(--quick-post-initial-div-border-color);
}

.trending_circle_name > .image_container > .circle_type_icon {
    position: absolute;
    bottom: 0;
    right: 0;
    color: hsl(0deg, 0, 50%);
}

.trending_circle_name > .circle_image_container > img {
    max-width: 3rem;
    min-width: 3rem;
    border-radius: var(--round-image-br);
}

.trending_circle_name > .circle_image_container > img {
    border-radius: 0 !important;
    padding: 0.5rem;
}

.trending_circles,
.trending_mandlis {
    /* margin-bottom: 3rem;
    border: solid;
    border-width: 0.5px;
    border-color: var(--post-border-color);
    padding: 1rem;
    border-radius: 1rem; */

    & .trending_circles_label,
    & .trending_mandlis_label {
        background: var(--quick-post-initial-div-text-color-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    /* & .trending_mandlis_list,
    .trending_circles_list {
        margin-top: 1rem;
    } */
}

img.default_profile_pic {
    border-radius: 0 !important;
    padding: 0.5rem;
}

img.default_user_icon {
    padding: 0.25rem;
}

.image_container > .default_profile_pic {
    border: none !important;
}

.trending_circle_name > .name {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.trending_circle_name > .name > label {
    line-height: 1.4rem;
}

.trending_circle_name > div.buttons_container {
    pointer-events: none;
}

.trending_circle_name > .buttons_container > button {
    outline: none;
    padding: 0.25rem;
    border-radius: 1rem;
    background: hsl(0deg 0% 0%);
    font-weight: bold;
    color: white;
    border: solid;
    border-width: 0.01rem;
    border-color: darkslategray;
    min-width: 5rem;
    pointer-events: all;
}

#importance_slider_mandli,
#importance_slider {
    min-width: 100%;
}

@media (orientation: portrait) {
    #importance_slider_mandli,
    #importance_slider {
        min-width: 80%;
        margin-left: 10%;
        margin-right: 10%;
    }
}

#mandli_create_post_button {
    display: flex;
    align-items: center;
    padding-left: 1rem;
}

.mandli_subscription_form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    min-width: 80%;
}

.mandli_subscription_form > button {
    align-self: flex-end;
    min-width: 5rem;
    margin-top: 2rem;
    min-height: 1.5rem;
}

.mandli_subscription_form > label {
    display: flex;
    min-width: 100%;
    align-items: center;
    justify-content: space-between;
}

.mandli_details > button {
    align-self: center;
    margin-right: 1rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    min-height: 2.5rem;
}

.alert_message,
#create_circle_message,
#create_mandli_message {
    color: var(--alert-message-text-color);
}

.mandli_details_about > .text {
    margin: 0;
    margin: 0.75rem;
    line-height: var(--long-text-line-height);
}

.ellipsis_content,
.mandli_ellipsis,
.comment_dropdown_buttons {
    gap: 0.5rem;
    padding: 0.5rem;
    margin-left: 0.5rem;
}

.ellipsis_content > .circle_button,
.ellipsis_content > .post_button,
.mandli_ellipsis > .mandli_buttons,
.difficulty_content > .post_button,
.circle_ellipsis > div,
.profile_ellipsis div,
.comment_dropdown_buttons > div {
    padding: 0.5rem 0.75rem;
    border-radius: var(--half-br);
    width: 100%;
    display: flex;
    justify-content: flex-start;
    cursor: pointer;
}
.ellipsis_content > .post_button > a {
    text-decoration: none;
    color: inherit; /* optional: keeps parent text color */
}
.difficulty_content > .post_button {
    gap: 0.5rem;
    align-items: center;
}

#search_aliases_mandli label:hover {
    background: var(--low-contrast-color);
}

.create_tag_popup > .options_selector label:hover,
.ellipsis_content > .circle_button:hover,
.ellipsis_content > .post_button:hover,
.mandli_ellipsis > .mandli_buttons:hover,
.difficulty_content > .post_button:hover,
.circle_ellipsis > div:hover,
.profile_ellipsis div:hover,
.comment_dropdown_buttons > div:hover {
    background: var(--primary-bg-color);
}

.difficulty_content {
    padding: 0.5rem;
    gap: 0.5rem;
    display: flex;
    align-items: flex-start;
}

#mandli_feed {
    display: flex;
    flex-direction: column;
}

#mandli_buffs,
.mandli_scroll_area,
.circle_scroll_area {
    overflow-y: scroll;
    width: var(--landscape-dynamic-width);
}

.mandli_scroll_area {
    padding: 1rem;
}

@media (orientation: landscape) {
    #mandli_buffs,
    .mandli_scroll_area,
    .circle_scroll_area {
        max-height: calc(100 * var(--vh) - 9rem);
    }
    #mandli_about,
    .mandli_details,
    #mandli_tab_selector {
        width: var(--landscape-dynamic-width);
    }

    #mandli_feed {
        width: 100%;
    }

    #mandli_feed > div {
        max-width: 100%;
        min-width: 95%;
    }

    #importance_slider {
        min-width: 100%;
    }
}

@media (orientation: portrait) {
    #importance_slider {
        min-width: 80%;
        margin-left: 10%;
        margin-right: 10%;
    }

    input[type='checkbox']:checked.portrait_checkbox + #bottom_navigation_create_post_button,
    input[type='checkbox']:not(:checked).portrait_checkbox + #bottom_navigation_create_post_button + #bottom_navigation_create_mandli_post_button {
        display: none;
    }
}

.create_tag_popup > .options_selector {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

.create_tag_popup > .options_selector label {
    border: 0.01rem solid var(--post-dropdown-border-color);
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    font-weight: 600;
}

.selection_area > div > select,
.selection_area > div > input,
.selection_area > input {
    padding: 0.5rem;
    border-radius: 0.5rem;
    background: transparent;
    border: none;
    color: white;
    font-weight: 600;
    border: 0.01rem solid var(--post-dropdown-border-color);
}

.selection_area > div > .alias_hint {
    padding-top: 0.3rem;
    display: flex;
    font-size: 0.8rem;
    gap: 0.3rem;
    color: var(--secondary-border-color);
    padding-left: 0.5rem;
}

.selection_area > div > select:focus,
.selection_area > div > input:focus,
.selection_area > input:focus {
    outline: none;
}

#search_aliases_mandli {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.5rem;
}

.slash {
    margin-right: 0.5rem;
    font-weight: bold;
}

#search_aliases_mandli select {
    min-width: 40%;
    min-height: 1.5rem;
    border-radius: 0.5rem;
    background: var(--primary-bg-color);
    padding: 0.5rem;
    outline: 0;
    color: var(--primary-text-color);
    border: 0.01rem solid var(--primary-border-color);
    font-size: 1rem;
}

.create_tag_popup > .alias_page form,
.create_tag_popup > .tag_page form,
form.add_tag {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

form.add_tag > div > select {
    font-weight: 600;
    padding: 0.5rem;
    border-radius: 0.5rem;
    border: 0.01rem solid var(--post-dropdown-border-color);
}

form.add_tag > div > select:focus {
    outline: none;
}

.create_tag_popup > .alias_page .selection_area,
.create_tag_popup > .tag_page .selection_area {
    display: flex;
    gap: 1rem;
}

.create_tag_popup > .alias_page .selection_area {
    gap: 0.5rem;
}

@media (orientation: portrait) {
    #search_aliases_mandli select {
        min-width: 80%;
    }
    .create_tag_popup > .alias_page .selection_area,
    .create_tag_popup > .tag_page .selection_area {
        flex-direction: column;
        gap: 1rem;
    }
}

#fetch_mandli_buffs_label {
    display: flex;
    align-items: stretch;
    gap: 0.2rem;
    position: relative;
}

#mandli_buffs_counter {
    position: absolute;
    top: 0%;
    right: 5%;
    font-size: 0.6rem;
    color: white;
    padding: 0.1rem 0.2rem;
    background: red;
    border-bottom-right-radius: 0.2rem;
    border-bottom-left-radius: 0.2rem;
}

/*
#search_aliases_mandli > div{
display: flex;
flex-direction: column;
align-items:center;
position: absolute;
z-index: 10;
top: 100%;
min-width: 40%;
max-height: 10rem;
overflow: scroll;
background: var(--primary-bg-color);
border-radius: 0.5rem;
box-shadow: 0rem 0.25rem 0.5rem black;	
padding-top: 0.5rem;
}

#search_aliases_mandli input{
min-width: 40%;
min-height: 1.5rem;
border-radius: var(--two-br);
background: var(--primary-bg-color);
padding: 0.5rem;
padding-left: 1rem;
outline: 0;
color: var(--primary-text-color);
border: 0.01rem solid var(--primary-border-color);
font-size: 1rem;
}


#search_aliases_mandli label{
padding: 0.25rem;
border: solid;
margin: 0.25rem;
border-width: 0.01rem;
border-color: var(--primary-border-color);
min-width: 80%;
text-align: center;
border-radius: 0.5rem;
}

#search_aliases_mandli label.search_aliases_mandli_popup{
min-width: none;
border: none;
border-radius: none;
}
 */

.importance_slider[type='range'][value='1'] ~ .importance_0,
.importance_slider[type='range'][value='2'] ~ .importance_0,
.importance_slider[type='range'][value='2'] ~ .importance_1,
.importance_slider[type='range'][value='3'] ~ .importance_0,
.importance_slider[type='range'][value='3'] ~ .importance_1,
.importance_slider[type='range'][value='3'] ~ .importance_2,
.importance_slider[type='range'][value='4'] ~ .importance_0,
.importance_slider[type='range'][value='4'] ~ .importance_1,
.importance_slider[type='range'][value='4'] ~ .importance_2,
.importance_slider[type='range'][value='4'] ~ .importance_3 {
    display: none;
}

#my_mandlis,
.trending_mandlis_list {
    display: flex;
    flex-direction: column;
    gap: 0.34rem;
    padding: 0.5rem;
    box-sizing: border-box;
    width: 100%;
}


#mandli_feed_default_container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
    text-align: center;
    border: 0.01rem solid var(--post-border-color);
    padding: 1rem;
    border-radius: 0.5rem;
}

#mandli_feed_default_container .title {
    font-size: 1.2rem;
    font-weight: bold;
}

#mandli_feed_default_container .description {
    color: var(--secondary-text-color);
    font-size: 0.9rem;
}
#mandli_feed_default_container .description .highlight {
    font-weight: bold;
    font-size: 1rem;
    background: var(--quick-post-initial-div-text-color-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/*!************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/about_mandli.css ***!
  \************************************************************************/
div.about_mandli {
    grid-area: main_area;
    margin: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    overflow: scroll;
}

.my_mandli_members {
    overflow: scroll;
}

.connect_button_container {
    display: flex;
}

.mandli_header > .back_button:hover,
.about_mandli > .mandli_details > .back_button:hover,
.my_mandli_members > div:hover {
    cursor: pointer;
    background: var(--primary-bg-color);
}

.about_mandli_members {
    background: var(--secondary-bg-color);
    border-radius: var(--half-br);
    min-width: 100%;
}

@media (orientation: landscape) {
    .about_mandli_members {
        min-width: 70%;
        max-width: 70%;
    }
}

.about_mandli > .mandli_details {
    display: flex;
    flex-direction: column;
}

.about_mandli > .mandli_details > .back_button {
    border-radius: 0.5rem;
    padding: 0.25rem 0.5rem;
    padding-bottom: 0;
    padding-top: 0;
}

.mandli_header > .back_button {
    border-radius: 0.5rem;
    padding: 0.5rem;
}

.about_mandli > .mandli_details > .back_button {
    align-self: flex-start;
}

.about_mandli > .mandli_details > .back_button > .bi-arrow-left {
    font-size: 1.5rem;
}
.about_mandli > .mandli_details > .text {
    margin-top: 0.5rem;
}

.about_mandli > .mandli_details > p {
    margin: 0.5rem;
}

.about_mandli_heading {
    display: flex;
    justify-content: center;
    padding: 0.3rem 0.5rem;
    border-radius: var(--half-br);
    opacity: 0.8;
    font-size: 1.2rem;
}

.my_mandli_members > div {
    display: flex;
    align-items: center;
    margin: 1rem 0.5rem;
    background: var(--dropdown-bg-color);
    padding: 0.5rem;
    border-radius: var(--half-br);
}

@media (orientation: landscape) {
    .my_mandli_members > div {
        padding: 0.5rem 1rem;
    }
}

.my_mandli_members > div > .member_details {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-grow: 1;
}

.my_mandli_members > div > .member_details > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.my_mandli_members > div > .member_details > div > p {
    margin: 0;
    padding: 0;
}

.is_moderator {
    font-size: 0.75rem;
}

/*!*************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/search/search.css ***!
  \*************************************************************************/
:root {
    --search-category-chip-text-color: white;
    --search-category-chip-active-background-color: white;
    --mobile-search-back-icon-text-color: white;
    --search-background-color: hsl(0deg 4.41% 18.09%);
    --mobile-search-input-div-box-shadow-color1: rgba(255, 0, 150, 0.5);
    --mobile-search-input-div-box-shadow-color2: rgba(0, 200, 255, 0.3);
}
#mobile_search_results,
#search_results {
    display: flex;
    flex-direction: column;
    overflow: scroll;
}

#mobile_search_results > .user {
    align-items: center;
    margin-top: 1rem;
}

#search_results {
    grid-area: main_area;
    gap: 1rem;
}

.search_heading_options_wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.search_tab_category_options {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;

    .search_category_chip {
        border: 0.1rem solid var(--attach-link-section-input-border-color);
        color: var(--search-category-chip-text-color);
        border-radius: 1rem;
        padding: 0.4rem 1rem;
        cursor: pointer;
    }

    .search_category_chip.active {
        background: var(--search-category-chip-active-background-color);
        border: 0.1rem solid var(--attach-link-section-input-border-color);
        color: var(--attach-link-section-input-border-color);
        font-weight: 600;
    }
}

#mobile_search_results {
    width: 95%;
    flex-shrink: 0;
    max-height: calc(100vh - 8.785rem);
    padding-bottom: 1rem;
}

#search_results_category_wise {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: scroll;
    padding-bottom: 1rem;
}

#mobile_search {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1rem;
}

@media (orientation: Portrait) {
    #search_results {
        margin-left: 1rem;
        margin-top: 1rem;
        margin-right: 1rem;
    }

    .empty_search {
        padding-top: 1rem;
        align-self: center;
    }

    .search_tab_category_options {
        padding-top: 1.5rem;
        padding-bottom: 1rem;
    }
}

@media (orientation: Landscape) {
    #search_results {
        margin-left: 2rem;
        margin-top: 2rem;
        margin-right: 2rem;
    }
}

@media (orientation: portrait) {
    #mobile_search {
        position: fixed;
        top: 0;
        bottom: 0;
        min-width: 100%;
        max-width: 100%;
        background: var(--primary-bg-color);
        margin-top: 0;
    }
}

#mobile_search_input_div {
    width: 100%;
    display: flex;
    gap: 1.5rem;
    padding: 1rem 0.5rem;
    box-shadow:
        0 0 15px 3px var(--mobile-search-input-div-box-shadow-color1),
        0 0 30px 6px var(--mobile-search-input-div-box-shadow-color2);
}

#mobile_search_input_div > input {
    min-width: 60%;
    min-height: 1.5rem;
    padding: 0.3rem;
    border: 0;
    background: var(--primary-bg-color);
    color: var(--primary-text-color);
    flex-grow: 0.8;
    font-size: 1rem;
    padding-left: 1rem;
}

#mobile_search_input_div > input:focus {
    outline: 0;
}

#mobile_search_input_div > #mobile_search_back_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    font-size: 1.5rem;
    color: var(--mobile-search-back-icon-text-color);
    background: var(--search-background-color);
    border-radius: 50%;
    padding: 0.4rem;
}

#mobile_search_input_div > .search_form {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: 80%;
}

#mobile_search_input_div > .search_form > input {
    background: var(--search-background-color);
    color: var(--mobile-search-back-icon-text-color);
    width: 100%;
    font-size: 0.9rem;
    padding: 0.3rem;
    border: none;
    border-radius: 2rem;
    padding-left: 0.75rem;
}

#mobile_search_input_div > .search_form > input:focus {
    outline: none;
}

.signup_profile_popup > div > img,
#mobile_search_input_div > div > img {
    min-width: 1.5rem;
    min-height: 1.5rem;
}

#search_results > .headers > .selected {
    text-decoration: underline;
}

#landscape_navigation_search_form > .search_form {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    border-radius: 0.5rem;
    gap: 0.5rem;
}

#landscape_navigation_search_bar {
    border: none;
    border-radius: 50%;
    background: var(--search-background-color);
}

#landscape_navigation_search_bar:focus {
    border: 0.1rem solid var(--quick-post-initial-div-border-color);
}

.search_profile > .user_image_container > img {
    min-width: 3rem;
    max-width: 3rem;
}

#mobile_search_results .metadata,
#mobile_search_results .mutual_friend,
#search_results .metadata,
#search_results .mutual_friend {
    font-size: 0.8rem;
    color: var(--bottom-navigation-border-color);
}

.search_owner {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: var(--secondary-text-color);
}

.search_owner > img {
    max-width: 1.25rem;
    max-height: 1.25rem;
    border-radius: 50%;
    border-width: 0.01rem;
}

/*!**************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/circle/circles.css ***!
  \**************************************************************************/
div#circle {
    grid-area: main_area;
    padding: 1rem;
    max-height: calc(100 * var(--vh) - 4.5rem);
    overflow: scroll;
    display: flex;
    flex-direction: column;
}

@media (orientation: portrait) {
    div#circle_name_div {
        padding: 0.75rem;
    }
}

div#circle_profile_area {
    display: flex;
    justify-content: center;
    background: var(--dropdown-bg-color);
    border-radius: var(--half-br);
    flex-direction: column;
    padding: 1rem;
    color: var(--primary-text-color);
}

@media (orientation: landscape) {
    div#circle {
        align-items: center;
    }

    div#circle_profile_area {
        width: var(--landscape-dynamic-width);
    }
}

div#circle_follow_unfollow_information {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-right: 1rem;
    margin-left: 1rem;
    margin-bottom: 1rem;
}

div.circle_profile {
    display: flex;
    justify-content: center;
    align-items: center;
}

div.circle_profile > div.circle_name {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: calc(100% - 1rem);
    gap: 0.5rem;
}

option.connection_name {
    margin-top: 0.5rem;
    border-radius: var(--connection-name-circle-br);
    padding-left: 1rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.circle_about > label {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    line-height: var(--long-text-line-height);
}

#follow_circle {
    display: flex;
    align-items: center;
}

#follow_circle_button {
    margin-left: 1rem;
}

#follow_circle_settings_summary {
    font-size: 0.8rem;
    opacity: 0.5;
}

#delete_circle {
    align-self: flex-end;
    margin: 1rem;
}

div#delete_circle_confirmation_buttons {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

button#delete_circle_button_yes {
    min-width: 4rem;
}

button#delete_circle_button_no {
    margin-left: 1rem;
    min-width: 4rem;
}

@media (orientation: landscape) {
    .create_circle_form {
        margin: 1rem;
        padding: 2rem;
        padding-top: 0;
    }

    .create_circle_form > button {
        margin-left: 1rem;
        margin-top: 2rem;
    }

    .create_circle_form div {
        margin-bottom: 2rem;
    }

    .create_circle_form_label {
        display: flex;
        margin-left: 1rem;
    }
}

@media (orientation: portrait) {
    .create_circle_form {
        margin: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    .create_circle_form .labelled_input > label {
        min-width: 0;
    }

    .create_circle_form > button {
        margin-left: 1rem;
        margin-top: 2rem;
        align-self: flex-start;
    }

    .create_circle_form_label {
        display: flex;
        margin-left: 1rem;
        align-self: center;
    }
}

#circle_feed_area {
    margin-top: 1rem;
}

@media (orientation: landscape) {
    #circle_feed_area {
        width: var(--landscape-dynamic-width);
        justify-content: center;
    }

    #my_circle_posts {
        min-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #my_circle_posts > div {
        min-width: 100%;
        max-width: 100%;
    }
}

.circle_buttons {
    display: flex;
    justify-content: center;
}

form.unfollow {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

form.unfollow > button {
    max-width: 8rem;
}

.circle_ellipsis {
    align-self: flex-start;
    display: flex;
}

.circle_ellipsis > label {
    padding: 0.25rem;
    cursor: pointer;
}

.circle_ellipsis > label:hover {
    background: var(--primary-bg-color);
}

.circle_notification {
    margin-top: 1rem;
    padding: 0.5rem 0.75rem;
}

.create_chat,
.create_mandli,
.create_circle {
    margin-bottom: 1rem;
    border: solid;
    border-width: 0.01rem;
    border-color: var(--secondary-text-color);
    color: var(--secondary-text-color);
    margin-top: 0;
    padding: 0.75rem 1rem;
    border-radius: var(--half-br);
    cursor: pointer;
    display: flex;
    justify-content: center;
    max-width: 13rem;
    min-width: 13rem;
}

.create_chat:hover,
.create_mandli:hover,
.create_circle:hover {
    background: var(--low-contrast-bg-color);
}

.friend_selector_dropdown .profile_pic,
.mutual_friend_list .profile_pic,
.friend_suggestion .profile_pic,
.circle_notification > img {
    max-width: 3rem;
    min-width: 3rem;
    border-radius: var(--round-image-br);
    padding: 0.1rem;
    border: solid;
    border-width: 0.2rem;
    border-color: var(--circle-img-border-color);
}

.circle_details {
    padding-left: 1rem;
    flex-grow: 1;
}

.circle_details > p {
    margin: 0;
    margin-bottom: 0.25rem;
    font-weight: bold;
}

.circle_metadata {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

#games,
#my_mandlis,
#my_circles,
#trending_mandlis {
    min-width: 100%;
}

.circle_metadata > label {
    font-size: 0.8rem;
    opacity: 0.6;
}

.circle_metadata > .buttons {
    align-self: flex-end;
    display: flex;
    gap: 1rem;
}

.circle_metadata > .buttons > button {
    min-width: 4rem;
    box-shadow: var(--circle-metadata-button-bs);
    border: 0;
}

#search_aliases_circle {
    max-width: 100%;
    min-width: 95%;
}

#search_aliases_circle {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.5rem;
}

#search_aliases_circle select {
    min-width: 40%;
    min-height: 1.5rem;
    border-radius: 0.5rem;
    background: var(--primary-bg-color);
    padding: 0.5rem;
    outline: 0;
    color: var(--primary-text-color);
    border: 0.01rem solid var(--primary-border-color);
    font-size: 1rem;
}

@media (orientation: portrait) {
    .circle_metadata {
        gap: 2rem;
    }

    .circle_metadata > .buttons > button {
        min-height: 1.5rem;
    }

    .circle_notification > img {
        max-width: 2.5rem;
        min-width: 2.5rem;
    }

    #search_aliases_circle select {
        min-width: 80%;
    }
}

#read_unread_div.with_read_button {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    padding-top: 0.75rem;
}

#read_unread_div.without_read_button {
    display: flex;
    justify-content: center;
    padding-top: 0.75rem;
}

/*!***********************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/user/friend_suggestions.css ***!
  \***********************************************************************************/
#mobile_friend_suggestion {
    min-width: 100%;
    overflow: scroll;
    margin-top: 1rem;
    flex-grow: 1;
    position: relative;
}

.friend_suggestion_area {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

.friend_suggestion > div.remove_button {
    position: absolute;
    top: 0;
    left: 0;
    color: #888;
    font-size: 0.7rem;
    padding: 0.2rem;
    border-radius: 30%;
    border: solid;
    border-width: 0.01rem;
    border-radius: 0.5rem;
    border-color: var(--primary-border-color);
}

.friend_suggestion .connect_button {
    font-size: 1.5rem;
    font-weight: normal;
}
.friend_suggestion > div.remove_button:hover {
    cursor: pointer;
}

.friend_suggestion_area > span {
    margin: 0.5rem;
    font-family: var(--short-text-font);
    font-size: 1.1rem;
    font-weight: bold;
}

div.friend_suggestion {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border: solid;
    border-width: 0.01rem;
    border-radius: 0.5rem;
    color: var(--primary-text-color);
    border-color: var(--primary-border-color);
    background: var(--primary-bg-color);
    padding: 0.5rem 1rem;
    min-width: 95%;
}

div.friend_suggestion div.details {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    cursor: pointer;
}

div.friend_suggestion div.name {
    display: flex;
    flex-direction: column;
    margin-left: 1rem;
}

div.friend_suggestion div.suggestion_buttons {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
}

div.friend_suggestion span.mutual_friend {
    margin-top: 0.2rem;
    font-size: 0.8rem;
    opacity: 0.8;
    color: var(--secondary-text-color);
}

.mutual_friend_list .profile_pic,
div.friend_suggestion .profile_pic {
    min-width: 3.5rem;
    max-width: 3.5rem;
}

div.friend_suggestion .suggestion_buttons button,
div.friend_suggestion .suggestion_buttons label {
    font-size: 0.8rem;
}

.mutual_friend_list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mutual_friend_list > div {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mutual_friend:hover {
    cursor: pointer;
    text-decoration: underline;
}

.friend_suggestion .name,
.mutual_friend_list .name,
.mutual_friend_list > div:hover {
    cursor: pointer;
}

/*!*****************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/index.css ***!
  \*****************************************************************/
:root {
    --background-gradient: linear-gradient(to bottom right, #1e1e2f, #0f0f17);
    --not-logged-in-header-background-color: rgba(15, 15, 23, 0.9);
    --not-logged-in-header-box-shadow: rgba(0, 0, 0, 0.4);
    --ai-post-heading-color-gradient: linear-gradient(90deg, #ffe20b, #ff7cc9, #3cecff);
    --read-story-post-button-text-color-gradient: linear-gradient(90deg, #ffd12a, #ffb547, #ff9863, #ff7b80, #ff5e9d);
    --top-navigation-label-background-gradient: linear-gradient(90deg, #ffe20b, #ff41b1, #3cecff, #3eff37);
    --animated-hr-background-color: #ffffff;
    --word-container-span-text-color: #ffffff;
    --quick-post-heading-text-color: #ffffff;
    --quick-post-expand-button-text-color: #ffffff;
    --quick-post-container-textarea-text-color: #ffffff;
    --quick-post-placeholder-color: #a78bfa80;
    --quick-post-extender-left-text-color: #d1d5db;
    --quick-post-attach-button-text-color: #ffffff;
    --quick-post-submit-button-text-color: #ffffff;
    --share-support-url-div-textarea-text-color: #ffffff;
    --tune-icon-color: #ffffff;
    --quick-post-input-expand-icon-hover-color: #ffffff;
    --form-group-input-border-color: #000000;
    --form-group-input-text-color: #000000;
    --form-field-input-text-color: #000000;
    --forgot-password-email-input-text-color: #000000;
    --forgot-password-email-input-border-color: #000000;
    --landscape-navigation-bar-background-color: #000000;
    --quick-post-background-color: #000000;
    --share-support-url-div-textarea-background-color: #000000;
    --confetti_container-text-color: green;
    --landscape-navigation-trending-button-icon-color: cyan;
    --landscape-navigation-buffs-button-icon-color: orange;
    --landscape-navigation-notification-button-icon-color: #b1b4fb;
    --landscape-navigation-home-button-icon-color: #f4a1ff;
    --ios-share-icon-color: rgb(0, 122, 255);
    --tagline-text-color: #204293;
    --adjective-span-text-color: #f2fa05;
    --landscape-navigation-mandli-button-icon-color: #fff400;
    --blockquote-border-color: rgb(255 255 255 / 80%);
    --house-door-icon-fill-gradient: linear-gradient(#ffffff, #f4a1ff);
    --fire-icon-gradient: linear-gradient(red, orange);
    --mandli-icon-gradient: linear-gradient(#00f900, #fff400);
    --game-icon-gradient: linear-gradient(#f08bff, cyan);
    --bel-icon-gradient: linear-gradient(#6156ff, #ffffff);
    --quick-post-initial-div-text-color-gradient: linear-gradient(90deg, #e5e0ff, #eec7ff, #e09afe);
    --quick-post-initial-div-typping-dots-color: #e3a3ff;
    --quick-post-initial-div-border-color: #c0b5ff;
    --not-logged-in-header-height: 4.75rem;
    --toggle-switch-slider-background-color: #ccc;
    --toggle-switch-slider-before-background-color: #fff;
    --violet-light: #c084fc;
    --violet-medium: #8b5cf6;
    --backdrop-bg: rgba(0, 0, 0, 0.6);
    --action-sheet-bg: #0b0914;
    --action-sheet-border: rgba(139, 92, 246, 0.4);
    --action-sheet-shadow: rgba(139, 92, 246, 0.2);
    --action-sheet-divider-bg: #b5b1bd;
    --action-sheet-subtitle-color: #94a3b8;

    /* Generic Theme Colors */
    --theme-blue: #5b8cff;
    --theme-violet: #9b7bff;
    --theme-accent-rgb: 123, 133, 255;
    --theme-text-mid: #9ba1b0;
    --theme-white: #ffffff;
    --theme-track-bg: #0f0f13;
    --theme-hairline: rgba(255, 255, 255, 0.07);
    --theme-hover-text: #c9c8d4;

    /* Game Icon Theme Accent Colors */
    --game-accent-amber: #f59e0b;
    --game-accent-cyan: #06b6d4;
    --game-accent-violet: #a855f7;
    --game-accent-rose: #f43f5e;
    --game-accent-magenta: #d946ef;
    --game-accent-blue: #3b82f6;
}

.change_background_color {
    background: var(--tingle-modal_wihtout_singup_post_read_background-gradient) !important;
}

.signup_popup_on_post_read_wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: flex-start;
    align-items: flex-start;
    font-family: var(--signup-popup-on-post-read-font-family);

    .signup_popup_title {
        font-size: 2.5rem;
        color: var(--primary-accent-color);
        font-weight: 600;
    }

    .signup_popup_content_wrapper {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        font-size: 1.2rem;
        font-weight: 400;
        line-height: 1.5;
        color: var(--signup-popup-on-post-read-content-color);
    }

    .signup_popup_content_wrapper span:nth-child(3) {
        font-size: 1.3rem;
        font-weight: 500;
        line-height: 1.4;
    }

    .signup_popup_content_wrapper span:nth-child(4) {
        font-size: 1.15rem;
        line-height: 1.5;
        font-weight: 600;
        margin-top: 1rem;
    }

    .signup_popup_buttons_wrapper {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        width: 100%;
        justify-content: flex-end;
        margin-top: 1rem;
        font-weight: 600;
        font-size: 1rem;

        .read_another_story_button {
            padding: 0.5rem 1rem;
            background: transparent;
            border: none;
            color: var(--primary-accent-color);
            cursor: pointer;
            border: 0.01rem solid var(--primary-accent-color);
            border-radius: 0.75rem;
            font-weight: 600;
        }

        .read_another_story_button:hover {
            background: var(--primary-accent-color);
            color: var(--primary-text-color);
        }

        .signup_button {
            padding: 0.5rem 1rem;
            background: var(--primary-accent-color);
            color: var(--primary-text-color);
            border: none;
            border-radius: 0.75rem;
            cursor: pointer;
            font-weight: bold;
            transition: background-color 0.2s ease-in-out;
        }
    }
}

@media (orientation: portrait) {
    .signup_popup_on_post_read_wrapper {
        .signup_popup_title {
            font-size: 1.7rem;
        }

        .signup_popup_buttons_wrapper {
            display: flex;
            justify-content: space-between;

            .read_another_story_button {
                border: 0.1rem solid var(--primary-accent-color);
                font-weight: 600;
            }

            .signup_button {
                font-weight: 600;
                font-size: 0.8rem;
            }
        }
    }
}

#not_logged_in {
    font-family: 'Inter', sans-serif;
    background: var(--background-gradient);
    color: var(--light-bg-color);
    overflow-x: hidden;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login_signup_popup_container {
    height: 100%;
    width: 100%;
    z-index: 200;
    background: var(--landing-page-section-content-background-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
}

.login_signup_popup {
    width: 50rem;
    height: 40rem;
    background-color: var(--light-bg-color);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    border-radius: 0.625rem;
    overflow: hidden;
    position: relative;
}

#login_signup_popup_close_button {
    position: absolute;
    right: 0.7rem;
    top: 0.7rem;
    height: 1rem;
    width: 1rem;
    cursor: pointer;
}

#login_signup_popup_close_button::after,
#login_signup_popup_close_button::before {
    position: absolute;
    content: '';
    height: 2px;
    width: 100%;
    top: 50%;
    left: 0;
    margin-top: -1px;
    background: var(--secondary-text-color);
    border-radius: 100%;
    transition: background 0.2s;
}

#login_signup_popup_close_button::before {
    transform: rotate(45deg);
}

#login_signup_popup_close_button::after {
    transform: rotate(-45deg);
}

.login_signup_popup_left {
    height: 100%;
    width: 50%;
    background-color: var(--primary-accent-color);
    position: relative;
}

.login_signup_popup_left_image {
    width: 100%;
}

.login_signup_popup_left_animation_wrapper {
    padding: 0 2rem;
    position: absolute;
    bottom: 2rem;
    left: 0;
    right: 0;
}

.animated-hr {
    width: 100%;
    height: 0.5rem;
    background-color: var(--animated-hr-background-color);
    border: none;
    margin: 10px 0;
    margin-bottom: 1rem;
    animation: hrAnimation 5s infinite alternate ease-in-out;
    transform-origin: left;
    text-align: left;
}

@keyframes hrAnimation {
    0% {
        width: 0;
    }

    50% {
        width: 25%;
    }

    100% {
        width: 0;
    }
}

.word-container {
    position: relative;
    /* Important to position children absolutely inside */
    height: 40px;
    font-size: 24px;
    font-weight: 700;
    line-height: 40px;
    text-align: start;
    overflow: hidden;
}

.word-container span {
    position: absolute;
    /* Make all spans overlap */
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    color: var(--word-container-span-text-color);
    animation: fadeWord 25s linear infinite;
}

.word-container span:nth-child(1) {
    animation-delay: 0s;
}

.word-container span:nth-child(2) {
    animation-delay: 5s;
}

.word-container span:nth-child(3) {
    animation-delay: 10s;
}

.word-container span:nth-child(4) {
    animation-delay: 15s;
}

.word-container span:nth-child(5) {
    animation-delay: 20s;
}

@keyframes fadeWord {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    20% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.login_signup_popup_right {
    height: 100%;
    width: 50%;
    box-sizing: border-box;
    padding: 5.5rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.forgot_pass_popup {
    padding: 10.5rem 1rem;
}

.login_signup_popup_right h2 {
    font-size: 2rem;
}

.or_partition {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    margin: 1rem 0;
}

.or_partition .or_left_hr,
.or_partition .or_right_hr {
    border: 0.01rem solid var(--low-contrast-color);
    width: 33%;
}

#google_oauth_button {
    width: 19.5rem;
    height: 2.5rem;
    margin: 0;
}

#login_button {
    height: 2.5rem;
    border-radius: 0.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    width: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.apple-signin-btn {
    background: #000000;
    color: #ffffff;
    border: none;
    border-radius: 0.25rem;
    height: 2.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    cursor: pointer;
    width: 100%;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.apple-signin-btn:hover {
    background: #111111;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.apple-signin-btn svg.apple-logo-svg {
    margin-right: 2px;
}

#login_content_container,
#signup_content_container,
#forgot_password_content_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 85%;
}

.forgot_password_pop_content_wrapper {
    gap: 1.25rem;
}

#signup_content_container h3 {
    margin: 0 !important;
    margin-top: 0.5rem !important;
}

#login_form,
#forgot_password,
#signup_form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 1rem;
    margin-top: 1rem;
}

.form__group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 0.5rem;

    .iti {
        width: 100%;
    }

    input {
        border-bottom: 1px var(--form-group-input-border-color) solid;
        background: none;
        padding: 0.5rem;
        color: var(--form-group-input-text-color);
    }

    label {
        display: none;
    }
}

.form__field {
    font-family: inherit;
    width: 100%;
    outline: 0;
    padding: 0.5rem 1rem;
    background: var(--light-input-bg-color);
    transition: border-color 0.2s;
    border: 0;
    color: var(--form-field-input-text-color);
}

#forgot_password_email {
    font-family: inherit;
    width: 100%;
    outline: 0;
    transition: border-color 0.2s;
    border-bottom: 1px var(--forgot-password-email-input-border-color) solid;
    background: none;
    padding: 0.5rem 0;
    color: var(--forgot-password-email-input-text-color);
}

.login_signup_form_label,
.youtube_form_label {
    font-size: 0.8rem;
    margin: 0.3rem 0;
}

@media (orientation: landscape) {
    #login_signup_button {
        padding: 0.75rem 1.5rem;
        border-radius: 1rem;
    }
}

.welcome_back_sign_up_now_wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: flex-start;
    font-size: 0.875rem;
    gap: 0.25rem;
    font-weight: 500;
    margin-bottom: 1.25rem;

    .welcome_text_login {
        font-size: 1.5rem;
        margin-bottom: 0.25rem;
        font-weight: 500;
    }

    .sign_up_now_button {
        color: var(--primary-accent-color);
        font-weight: 600;
        cursor: pointer;
    }

    .sign_up_now_button:hover {
        text-decoration: underline;
    }
}

.forgot_password_link {
    display: block !important;
    font-size: 0.8rem;
    color: var(--primary-accent-color);
    margin-top: 0.4rem;
    font-weight: 500;
    cursor: pointer;
}

.forgot_password_link:hover {
    text-decoration: underline;
}

.login_and_with_google_button_wrapper {
    display: flex;
    flex-direction: column;
    width: 19.5rem;
    max-width: 400px;
    min-width: 200px;
    margin: 0 auto;
    gap: 0.75rem;
}

.login_and_with_google_button_wrapper > button,
.login_and_with_google_button_wrapper > div {
    border-radius: 0.25rem;
}

.signup_button_container,
.forgot_password_button_container,
.forgot_password_and_signup_container {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-direction: column;

    button,
    label {
        width: 100%;
        border-radius: 1rem;
    }
}

.signup_button_container > *,
.forgot_password_button_container > * {
    flex: 1;
}

.forgot_password_heading_wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.3rem;

    .reset_password_heading {
        font-size: 1.5rem;
        font-weight: bolder;
    }

    .reset_password_subheading {
        font-size: 0.8rem;
    }
}

#login_form p {
    font-size: 0.8rem;
    margin: 1rem auto;
}

#login_form p a {
    color: var(--primary-accent-color);
    text-decoration: none;
}

#login_form p a:hover {
    text-decoration: underline;
    cursor: pointer;
}

@media (orientation: portrait) or (max-width: 800px) {
    .login_signup_popup_right {
        width: 100%;
    }

    .login_signup_popup {
        margin: 0 1rem;
    }

    #login_content_container,
    #signup_content_container,
    #forgot_password_content_container {
        width: 100%;
    }

    .login_signup_popup_left {
        display: none;
    }

    .login_signup_popup_right h2 {
        font-size: 1.5rem;
    }
}

#not_logged_in_post,
#not_logged_in_mandli,
#not_logged_in_circle {
    min-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 5rem;
    padding-inline: 0.5rem;
}

#not_logged_in_mandli .mandli_details,
#not_logged_in_circle .circle_details {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--primary-text-color);
    padding: 0.5rem;
    background-color: var(--dropdown-bg-color);
    border-radius: 0;
    z-index: 1;
}

#not_logged_in_circle .circle_profile {
    flex-direction: column;
}

@media (orientation: landscape) {
    #not_logged_in_mandli > div,
    #not_logged_in_circle > div {
        min-width: 60%;
        max-width: 60%;
    }

    #not_logged_in_post > .post_container {
        min-width: 60%;
        max-width: 60%;
    }
}

@media (orientation: portrait) {
    #not_logged_in_mandli > div {
        min-width: 100%;
        max-width: 100%;
    }
}

#logged_in {
    min-width: 100%;
    max-width: 100%;
    height: 100%;
}

@media ((orientation: landscape) and (min-width: 800px)) {
    .centered {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #tab_selector_full_screen_chat_label,
    #tab_selector_chat_area_label,
    #tab_selector_full_screen_chat:not(:checked) ~ #tab_selectors {
        display: none;
    }

    .hide_in_landscape {
        display: none;
    }

    #main_section {
        display: grid;
        grid-template:
            'navigation_bar navigation_bar navigation_bar' 3rem
            'chat main_area notification' 1fr;
        min-height: 100vh;
        min-height: calc(100 * var(--vh));
        max-height: calc(100 * var(--vh));
        margin: inherit;
        min-width: 100%;
        max-width: 100%;
        grid-template-columns: 20rem auto 22rem;
    }

    #landscape_navigation_bar {
        grid-area: navigation_bar;
        z-index: 50;
        display: flex;
        flex-direction: row;
        background: var(--landscape-navigation-bar-background-color);
        border-bottom: solid;
        border-color: var(--notification-popup-border-color);
        border-width: 0.1rem;
    }

    #create_post_and_feed_area,
    #read_posts,
    #mathracer {
        grid-area: main_area;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-left: 2rem;
        padding-right: 2rem;
        overflow-y: scroll;
        max-height: calc(100vh - 3.5rem);
        max-height: calc(100 * var(--vh) - 3rem);
        padding: 0.5rem;
    }

    #activity_area {
        grid-area: main_area;
        overflow-y: scroll;
        max-height: calc(100vh - 3.5rem);
        max-height: calc(100 * var(--vh) - 3rem);
    }

    #landscape_navigation_home_icon {
        flex-grow: 0.5;
        display: flex;
        flex-direction: center;
        align-items: center;
        margin-left: 2rem;
    }

    #landscape_navigation_search_form {
        flex-grow: 6;
        display: flex;
        gap: 0.5rem;
    }

    #landscape_navigation_circles_button,
    #landscape_navigation_connection_button,
    #landscape_navigation_home_button,
    #landscape_navigation_games_button,
    #activity_logs,
    #landscape_navigation_buffs_button,
    #landscape_navigation_mandli_button {
        flex-grow: 1;
    }

    #landscape_navigation_notification_button {
        flex-grow: 0.75;
    }

    #landscape_profile_navigation {
        flex-grow: 1.5;
        margin-right: 2rem;
    }

    #landscape_mandli_name_div {
        flex-grow: 1;
    }

    .profile_navigation {
        min-width: 2rem;
        min-height: 2rem;
        border-radius: var(--round-image-br);
    }

    .landscape_icons_div {
        display: flex;
        flex-direction: column;
    }

    .landscape_icons_div > span {
        display: flex;
        position: relative;
    }

    .landscape_icons_div:hover {
        cursor: pointer;
        color: var(--landscape-icons-hover-text-color);
        background: var(--landscape-icons-hover-bg-color);
    }

    #landscape_navigation_home_label_div {
        min-height: 100%;
        display: flex;
    }

    #landscape_navigation_home_icon_image {
        max-width: 3rem;
        max-height: 2.2rem;
    }

    #landscape_navigation_search_bar {
        min-height: 1.5rem;
        border-radius: var(--two-br);
        padding: 0.5rem;
        padding-left: 1rem;
        outline: none;
        color: var(--primary-text-color);
        border: 0.01rem solid var(--primary-border-color);
        font-size: 1rem;
        width: 18rem;
    }

    #features > li {
        min-width: 30rem;
    }

    #not_logged_in > .footer {
        grid-area: footer;
        display: flex;
        justify-content: flex-end;
    }

    #not_logged_in > .footer > a {
        font-size: 0.6rem;
        margin: 0 3rem;
    }
}

#features {
    grid-area: features;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    min-height: 80%;
    margin-right: 2rem;
    align-items: center;
}

#features > li {
    background-color: var(--feature-bg-color);
    border-radius: var(--three-br);
    padding: 1rem;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    display: flex;
    flex-direction: column;
    min-width: 18rem;
    max-width: 30rem;
    box-shadow: var(--features-bs);
    border: solid;
    border-width: 0.01rem;
    border-color: var(--feature-border-color);
    font-size: 1rem;
}

#features > li:hover {
    background-color: var(--feature-hover-bg-color);
    cursor: pointer;
}

#features label.feature {
    font-size: 1.5rem;
    min-width: 100%;
    padding: 0.1rem;
    display: flex;
    align-items: center;
}

#title_div {
    grid-area: title;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

h1 {
    /* display: flex; */
    justify-content: center;
    margin: 0;
    font-size: 4rem;
}

h2 {
    display: flex;
    /* justify-content: center; */
    font-size: 1.3rem;
    margin: 0;
    padding-bottom: 0.2em;
}

b {
    font-weight: bold;
}

span#adjective {
    font-style: bold-italic;
    color: var(--adjective-span-text-color);
}

#circle_create_post_area,
#mandli_create_post,
#feed_quick_post {
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
    /*padding: 0.5rem;*/
}

.quick_post {
    display: flex;
    width: var(--landscape-dynamic-width);

    .quick_post_header_textarea_footer_wrapper {
        display: flex;
        flex-direction: column;
        width: var(--landscape-dynamic-width);
        padding: 0.7rem;
        gap: 0.5rem;
        border: 0.0625rem solid var(--quick-post-initial-div-border-color);
        border-radius: 1rem;
        background: var(--quick-post-background-color);
        margin-bottom: 0.7rem;
    }

    .quick_post_submit_button {
        border: none;
        outline: none;
        background: var(--primary-accent-color);
        padding: 0.5rem 1rem;
        border-radius: 0.25rem;
        font-weight: bold;
        color: var(--quick-post-submit-button-text-color);
        cursor: pointer;
        transition: background-color 100ms ease-in-out;
    }

    .quick_post_header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .quick_post_header_left {
            display: flex;
            align-items: center;
            gap: 0.5rem;

            .quick_post_header_icon_container {
                display: flex;
                align-items: center;
                justify-content: center;
                background: var(--primary-accent-color);
                border-radius: var(--round-image-br);
                width: 2.2rem;
                height: 2.2rem;
                flex-shrink: 0;

                i {
                    font-size: 1.1rem;
                    color: #e5d1fa;
                }
            }

            .quick_post_header_text {
                display: flex;
                flex-direction: column;
                gap: 0.1rem;

                .quick_post_heading {
                    display: block;
                    font-size: 1rem;
                    font-weight: bold;
                    color: var(--quick-post-heading-text-color);
                    margin: 0;
                }

                .quick_post_subtitle {
                    font-size: 0.8rem;
                    color: var(--secondary-text-color);
                }
            }
        }
    }

    .quick_post_container {
        display: flex;

        textarea {
            min-width: 100%;
            max-width: 100%;
            min-height: 5rem;
            outline: none;
            color: var(--quick-post-container-textarea-text-color);
            background: var(--primary-bg-color);
            padding: 0.8rem 0.8rem;
            margin-bottom: 0.5rem;
            border: 0.1rem solid var(--post-dropdown-border-color);
            border-radius: 0.25rem;
            font-family: var(--default-font);
            &::placeholder {
                color: var(--quick-post-placeholder-color);
            }
        }
    }

    .quick_post_footer {
        display: flex;
        align-items: center;
        width: 100%;
        gap: 0.5rem;

        .quick_post_attach_button {
            padding: 0.5rem;
            cursor: pointer;
            border-radius: 0.25rem;
            color: var(--quick-post-attach-button-text-color);
            background: var(--low-contrast-color);
            transition: background-color 100ms ease-in-out;

            &:hover {
                background: var(--primary-bg-color);
            }
        }

        .quick_post_submit_button {
            margin-left: auto;
            min-width: 6.5rem;
            padding: 0.55rem 1.75rem;
            background: linear-gradient(135deg, var(--primary-accent-light-color) 0%, var(--primary-accent-color) 100%);
            border: 1px solid color-mix(in srgb, var(--primary-text-color) 15%, transparent);
            border-radius: 0.5rem;
            font-weight: 600;
            font-size: 0.95rem;
            color: var(--primary-text-color);
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--primary-accent-color) 15%, transparent);
            outline: none;

            &:hover {
                background: linear-gradient(135deg, var(--primary-accent-color) 0%, var(--primary-accent-light-color) 100%);
                box-shadow: 0 0.375rem 1rem color-mix(in srgb, var(--primary-accent-color) 35%, transparent);
                transform: translateY(-1px);
            }

            &:active {
                background: var(--primary-accent-color);
                box-shadow: 0 0.125rem 0.375rem color-mix(in srgb, var(--primary-accent-color) 20%, transparent);
                transform: translateY(1px);
            }
        }
    }

    .quick_post_option_extender_section {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem 1rem;

        .quick_post_option_extender_left {
            display: flex;
            align-items: flex-start;
            gap: 0.5rem;
            font-size: 0.85rem;
            color: var(--quick-post-extender-left-text-color);

            .quick_post_option_extender_left_icon {
                flex-shrink: 0;
            }

            .quick_post_option_extender_left_text {
                line-height: 1.25rem;
            }
        }

        .quick_post_option_extender_right {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--text-editor-lavender-accent);
            white-space: nowrap;
            transition: color 0.2s ease;
            cursor: pointer;

            &:hover {
                color: var(--primary-accent-light-color);
            }

            i {
                font-size: 0.85rem;
                display: flex;
                align-items: center;
            }
        }
    }
}

.quick_post .quick_post_initial_div {
    display: flex;
    flex-direction: row;
    gap: 0.8rem;
    align-items: center;
    position: relative;
    min-width: 100%;
    min-height: 5rem;
    outline: none;
    background: var(--primary-bg-color);
    padding: 0.8rem 0.8rem;
    border: none;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
    border: 0.0625rem solid var(--quick-post-initial-div-border-color);
    border-radius: 1rem;
    font-family: var(--default-font);
    cursor: pointer;
    margin-top: 0.5rem;
}

.user_profile_photo {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: var(--round-image-br);
    border: 0.2rem solid var(--primary-border-color);
}

.quick_post .quick_post_initial_div .quick_post_initial_div_text_section {
    background: var(--quick-post-initial-div-text-color-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: bold;
}

/* Typing dots */
.quick_post .quick_post_initial_div .typing-indicator {
    position: absolute;
    bottom: 1rem;
    right: 1.2rem;
    display: flex;
    gap: 0.2rem;
    opacity: 1;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.typing-indicator span {
    width: 5px;
    height: 5px;
    background: var(--quick-post-initial-div-typping-dots-color);
    border-radius: 50%;
    animation: bounce 1.2s infinite ease-in-out;
}

.typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes bounce {
    0%,
    80%,
    100% {
        transform: translateY(0);
        opacity: 0.6;
    }

    40% {
        transform: translateY(-5px);
        opacity: 1;
    }
}

.phone_number_submit_button {
    border: none;
    outline: none;
    background: var(--primary-accent-color);
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    font-weight: bold;
    color: var(--quick-post-submit-button-text-color);
    cursor: pointer;
    transition: background-color 100ms ease-in-out;

    &:hover {
        background: var(--primary-accent-light-color);
    }
}

.user_profile_details {
    padding: 0.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.user_profile_pic {
    max-width: 3rem;
    max-height: 3rem;
    border-radius: var(--round-image-br);
    padding: 0.1rem;
    border: solid;
    border-width: 0.2rem;
    border-color: var(--user-profile-pic-border-color);
}

.navigation_icons {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-text-color);
    cursor: pointer;
}

i.bi-house-door-fill {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-position-y: -0%;
    background-image: var(--house-door-icon-fill-gradient);
}

i.bi-fire {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-position-y: -0%;
    background-image: var(--fire-icon-gradient);
}

i.bi-boxes {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-position-y: -0%;
    background-image: var(--mandli-icon-gradient);
}

i.bi-controller {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-position-y: -0%;
    background-image: var(--game-icon-gradient);
}

i.bi-activity {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-position-y: -0%;
    background-image: linear-gradient(135deg, var(--violet-light) 0%, var(--violet-medium) 100%);
}

#chat_icon i.bi-chat-left-text-fill,
i.bi-bell-fill {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-position-y: -0%;
    background-image: var(--bel-icon-gradient);
}

#landscape_navigation_games_button .navigation_icons_label {
    color: var(--landscape-navigation-trending-button-icon-color);
}

#activity_logs .navigation_icons_label {
    color: var(--violet-light);
}

#bottom_navigation_mandli_button .navigation_icons_label,
#landscape_navigation_mandli_button .navigation_icons_label {
    color: var(--landscape-navigation-mandli-button-icon-color);
}

#bottom_navigation_buffs_button .navigation_icons_label,
#landscape_navigation_buffs_button .navigation_icons_label {
    color: var(--landscape-navigation-buffs-button-icon-color);
}

#bottom_navigation_chat_button .navigation_icons_label,
#landscape_navigation_notification_button .navigation_icons_label {
    color: var(--landscape-navigation-notification-button-icon-color);
}

#bottom_navigation_home_button .navigation_icons_label,
#landscape_navigation_home_button .navigation_icons_label {
    color: var(--landscape-navigation-home-button-icon-color);
}

@media (orientation: landscape) {
    .navigation_icons i.bi::before {
        font-size: 1.3rem;
        -webkit-text-stroke: 0.01rem;
    }

    .quick_post {
        .quick_post_header {
            .quick_post_header_left {
                gap: 0.75rem;

                .quick_post_header_icon_container {
                    width: 2.5rem;
                    height: 2.5rem;

                    i {
                        font-size: 1.25rem;
                    }
                }

                .quick_post_header_text {
                    .quick_post_heading {
                        font-size: 1.1rem;
                    }

                    .quick_post_subtitle {
                        font-size: 0.85rem;
                    }
                }
            }
        }
    }
}

@media (orientation: portrait) {
    .quick_post {
        .quick_post_option_extender_section {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.75rem;

            .quick_post_option_extender_right {
                align-self: center;
            }
        }
    }
}

.navigation_icons_label {
    color: var(--primary-text-color);
    font-size: 0.8rem;
    font-weight: bold;
}

.VIpgJd-ZVi9od-aZ2wEe-wOHMyf {
    display: none;
}

#menu_bar_title {
    grid-area: title;
}

.spoiler {
    background-color: var(--spoiler-bg-color);
    color: var(--spoiler-text-color);
    cursor: pointer;
    border-radius: 0.4rem;
}

.nav_logo_container p,
#landscape_navigation_home_label,
#top_navigation_home_label {
    margin: 0;
    font-size: 1.3rem;
    font-weight: bold;
    color: transparent;
    background: var(--top-navigation-label-background-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: flex;
    align-items: center;
}

@media (orientation: landscape) {
    .nav_logo_container p,
    #landscape_navigation_home_label {
        font-size: 1.5rem;
    }
}

.cropper_image {
    width: fit-content;
    height: fit-content;
    max-height: 70vh;
}

.cropper_image img {
    max-width: 100%;
}

.popup_buttons {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    align-items: center;
}

.rotate_input_button_wrapper {
    display: flex;
    justify-content: center;
    padding: 1rem;
    gap: 1rem;

    input {
        padding: 0.3rem 0.5rem;
        border-radius: 0.75rem;
    }

    input:focus {
        outline: none;
    }

    button {
        padding: 0.3rem 0.5rem;
        border-radius: 0.75rem;
        font-weight: 600;
    }
}

.save_cancel_button_wrapper {
    display: flex;
    justify-content: center;
    gap: 0.75rem;

    button {
        border-radius: 0.75rem;
        font-weight: 600;
    }
}

#tab_selector_full_screen_chat:not(:checked) ~ #full_screen_chat_area,
#tab_selector_feed:not(:checked) ~ #create_post,
#tab_selector_feed:not(:checked) ~ #feed_area {
    display: none;
}

div#logo_about_area {
    grid-area: logo;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

div#logo_large {
    border-radius: var(--round-image-br);
    background-color: var(--large-logo-bg-color);
    padding: 3rem;
}

div#logo_large img {
    border-radius: var(--logo-large-index-br);
    max-width: 15rem;
    max-height: 15rem;
}

div#title_signup {
    border-left: solid;
    border-color: var(--signup-area-border-color);
    padding-left: 1rem;
    padding-right: 1rem;
    display: grid;
    grid-template: 'title' 1fr 'welcome' 6rem 'login_signup' 2fr;
    color: var(--signup-area-text-color);
    background: var(--signup-area-bg-color);
    box-shadow: var(--title-signup-bs);
}

@media (orientation: landscape) {
    div#title_signup {
        padding-left: 2rem;
        min-width: 25rem;
    }
}

.welcome {
    grid-area: welcome;
    font-size: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#tagline {
    color: var(--tagline-text-color);
    font-family: var(--tag-line-font);
    font-weight: 500;
}

#login_signup_area {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    min-width: 100%;
}

#login_signup_area form {
    min-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: solid;
    border-width: 0.01rem;
    border-color: var(--login-signup-form-border-color);
    border-radius: var(--one-fourth-br);
    padding: 2rem;
}

#login_signup_area input[type='text'],
#login_signup_area input[type='email'],
#login_signup_area input[type='password'] {
    padding: 1rem 1.3rem;
    border-radius: var(--login-input-index-br);
    min-width: 70%;
    margin: 1rem;
    border-width: 0;
    opacity: 0.9;
    font-size: 1rem;
}

#login_signup_area .login_signup_form_label {
    align-self: flex-start;
    font-size: 1.5rem;
}

#not_logged_in_mandli .header button {
    border-radius: var(--login-input-index-br);
    border: solid;
    border-color: var(--login-signup-button-border-color);
    box-shadow: var(--user-friend-selector-bs);
    padding: 1rem;
    margin: 0;
    cursor: pointer;
    font-size: 1rem;
    background-color: var(--login-signup-button-bg-color);
    font-weight: 700;
    color: var(--login-signup-button-text-color);
    min-width: 50%;
}

::-webkit-scrollbar {
    display: none;
}

div.signup_google_contacts {
    overflow: scroll;
    max-height: 40rem;
}

div.signup_google_contacts div.content {
    border: solid;
    border-color: var(--import-contacts-border-color);
    border-radius: var(--two-br);
    padding: 2rem;
}

.alert,
.error {
    background: var(--alert-error-bg-color);
    color: var(--alert-error-text-color);
    padding: 1rem;
}

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

.send_chat_image_container,
.post_image_container {
    position: relative;
    display: inline-block;
}

.send_chat_image_container > span,
.post_image_container > span {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.2rem;
    cursor: pointer;
    font-weight: bold;
    border: solid;
    border-color: var(--discard-image-button-border-color);
    font-size: 0.3rem;
    border-width: 0.01rem;
    margin-top: 0.3rem;
    margin-right: 1rem;
}

.user_preferences_form .labelled_input,
#connect_popup_form .labelled_input {
    display: flex;
    justify-content: space-between;
}

.user_preferences_form .button,
#connect_popup_form details,
#connect_popup_form button {
    margin-top: 2rem;
}

#rock_paper_scissors_area,
#my_connections,
#rps_squared_area {
    grid-area: main_area;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: scroll;
}

#rps_squared_selector {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#rps_squared_description {
    padding: 1.5rem;
    background: var(--secondary-bg-color);
    border-radius: 0.5rem;
    max-width: 700px;
    margin: 1.5rem auto;
    color: #eee;
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    padding-bottom: 0;
}

#rps_squared_description ul {
    list-style: none;
    padding-left: 0;
}

#rps_squared_description ul li {
    display: flex;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
}

#rps_squared_description ul li::before {
    content: '☞';
    font-size: 1.2rem;
    line-height: 1;
}

#rps_squared_description ul .keyword {
    font-weight: 600;
    color: orange;
}

#rps_squared_description .good_luck {
    font-weight: 600;
    font-size: 1.1rem;
    color: #ffcc33;
    width: 100%;
    display: flex;
    justify-content: center;
}

@media (orientation: Portrait) {
    #rock_paper_scissors_area,
    #my_connections,
    #rps_squared_area {
        margin: 1rem;
    }

    #rps_squared_description {
        padding: 1rem;
        margin: 1rem auto;
    }

    #rps_squared_description h2 {
        font-size: 1.2rem;
    }

    #rps_squared_description ul li {
        display: flex;
        align-items: baseline;
        font-size: 0.895rem;
    }
}

@media (orientation: Landscape) {
    #rock_paper_scissors_area,
    #my_connections,
    #rps_squared_area {
        margin: 2rem;
    }
}

#features span {
    padding-right: 1rem;
}

#loading .container {
    position: relative;
    display: inline-block;
}

#loading .container::before {
    content: '';
    position: absolute;
    inset: -5px;
    background: var(--loading-border-color);
    border-radius: var(--round-image-br);
    animation: rotate-border 4s linear infinite;
    z-index: -1;
}

@keyframes rotate-border {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#loading .loading_image_container {
    background: var(--loading-image-bg-color);
    padding: 25px;
    border-radius: var(--round-image-br);
}

#loading .container img {
    display: block;
    max-width: 200px;
    max-height: 200px;
}

#loading {
    display: flex;
    align-items: center;
    min-height: 100%;
}

.share_support {
    padding: 1rem;
}

.share_support > .url_div {
    display: flex;
    flex-direction: row;
    min-width: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin: 0;
    gap: 0.5rem;
    align-items: baseline;
}

.share_support > .url_div textarea {
    width: 100%;
    background: var(--share-support-url-div-textarea-background-color);
    color: var(--ai-post-font);
    height: 6rem;
    resize: none;
    padding: 1rem;
    border: none;
    border: 0.01rem solid var(--attach-link-section-input-border-color);
    font-weight: 600;
    border-radius: 0.5rem;
}

.cropper_buttons {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    background: var(--cropper-buttons-bg-color);
}

a {
    color: var(--link-color);
}

/* Html Parser css */
pre {
    margin: 0;
    margin-left: 0.5rem;
    margin-bottom: 0.5rem;
    margin-right: 0.5rem;
    background: var(--pre-bg-color);
    padding: 0.25rem;
    padding-left: 0.5rem;
    border-radius: var(--code-tag-index-br);
    font-family: var(--code-tag-font);
    overflow: scroll;
}

/* Html Parser css */
blockquote {
    border-left: solid;
    border-color: var(--blockquote-border-color);
    border-width: 0.2rem;
    margin: 0;
    padding: 0 0.5rem;
    margin-left: 0.5rem;
}

.text > ol > li {
    margin-bottom: 0.5rem;
}

.blur {
    filter: blur(0.5rem);
}

.buffs_tutorial,
#circles_mini_description,
#mandli_mini_description {
    display: flex;
    flex-direction: column;
    border: 0.0625rem solid var(--sidebar-card-stroke);
    border-radius: 0.8rem;
    padding: 0.75rem;
    background: var(--sidebar-card-bg-elevated);
    font-family: 'Sora', sans-serif;
    color: var(--sidebar-card-text-mid);
    font-size: 0.8125rem;
    line-height: 1.4;
    margin-bottom: 1rem;
    box-sizing: border-box;
}

.buffs_tutorial > h1,
#circles_mini_description > h1,
#mandli_mini_description > h1 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--sidebar-card-text-hi);
    margin-top: 0;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: center;
}

.buffs_tutorial > p,
#circles_mini_description > p,
#mandli_mini_description > p {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
    color: var(--sidebar-card-text-mid);
}

.buffs_tutorial details,
#circles_mini_description details,
#mandli_mini_description details {
    border-radius: 0.5rem;
    border: 0.0625rem solid var(--sidebar-card-stroke);
    background: color-mix(in srgb, var(--sidebar-card-bg-elevated) 40%, transparent);
    margin-bottom: 0.5rem;
    padding: 0 0.75rem;
    transition: all 0.2s ease;
}

.buffs_tutorial details[open],
#circles_mini_description details[open],
#mandli_mini_description details[open] {
    border-color: rgba(var(--sidebar-card-accent-rgb), 0.18);
    box-shadow: var(--sidebar-card-glow);
    padding-bottom: 0.75rem;
}

.buffs_tutorial details summary,
#circles_mini_description details summary,
#mandli_mini_description details summary {
    padding: 0.625rem 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sidebar-card-text-hi);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    margin: 0;
}

.buffs_tutorial details summary::-webkit-details-marker,
#circles_mini_description details summary::-webkit-details-marker,
#mandli_mini_description details summary::-webkit-details-marker {
    display: none;
}

.buffs_tutorial details summary::after,
#circles_mini_description details summary::after,
#mandli_mini_description details summary::after {
    content: '\F282';
    font-family: 'bootstrap-icons';
    font-size: 0.75rem;
    color: var(--sidebar-card-text-mid);
    transition: transform 0.2s ease;
}

.buffs_tutorial details[open] summary::after,
#circles_mini_description details[open] summary::after,
#mandli_mini_description details[open] summary::after {
    transform: rotate(90deg);
    color: var(--sidebar-card-text-hi);
}

.buffs_tutorial details hr,
#circles_mini_description details hr,
#mandli_mini_description details hr {
    border: none;
    border-top: 0.0625rem solid var(--sidebar-card-stroke);
    margin: 0 0 0.5rem 0;
}

.play_store_icons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
}

.play_store_icons img {
    max-width: 7rem;
}

.ios_share {
    color: var(--ios-share-icon-color);
}

#install_button_on_signin {
    color: var(--primary-text-color);
    border-radius: var(--one-fourth-br);
    font-size: 0.8rem;
    background-color: var(--secondary-bg-color);
    border: solid;
    border-color: var(--icon-color);
    border-width: 0.01rem;
    padding: 0.25rem 0.5rem;
    text-decoration: none;
}

.signup_profile_popup > .user {
    display: flex;
    align-items: center;
}

.signup_profile_popup > p {
    margin-top: 0;
    line-height: 1.5rem;
}

.tune_icon {
    color: var(--tune-icon-color);
    background: var(--tune-icon-color);
    border-radius: 50%;
}

/* If not then icons will have more height than width making it inconsistent */
i.bi {
    display: flex;
}

.trending_popup_message i.bi {
    display: inline;
}

.confetti_container {
    display: flex;
    padding: 1rem;
    align-items: center;
    color: var(--confetti_container-text-color);
    font-weight: bold;
    font-size: 1.2rem;
    justify-content: center;
}

.message_div {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-weight: 500;
}

.iti__dropdown-content {
    background-color: var(--primary-bg-color);
    color: var(--primary-text-color);
}

.form_labelled_input {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}

.toggle_switch_wrapper {
    display: flex;
    align-items: center;
}

.toggle_switch {
    display: inline-block;
    height: 0.5rem;
    position: relative;
    width: 2rem;
}

.toggle_switch input {
    display: none;
}

.toggle_switch_slider {
    background-color: var(--toggle-switch-slider-background-color);
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: 0.4s;
}

.toggle_switch_slider:before {
    background-color: var(--toggle-switch-slider-before-background-color);
    bottom: -0.25rem;
    content: '';
    height: 1rem;
    position: absolute;
    transition: 0.4s;
    width: 1rem;
}

input:checked + .toggle_switch_slider {
    background-color: var(--primary-accent-color);
}

input:checked + .toggle_switch_slider:before {
    transform: translateX(1.25rem);
}

.toggle_switch_slider.round {
    border-radius: 2.125rem;
}

.toggle_switch_slider.round:before {
    border-radius: 50%;
}


#activity_logging_area {
    padding: 0.5rem 1rem;
}

#view_friends_activity_area h3 {
    font-size: 1rem;
    padding: 1rem;
    color: var(--primary-accent-color);
    font-style: italic;
}

/* Skeleton styles */
.skeleton {
    background: #374151;
    background-size: 400% 100%;
    animation: animate_pulse 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.sidebar_chat_skeleton,
.people_you_know_skeleton {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.sidebar_chat_skeleton .single_chat_item,
.people_you_know_skeleton .single_people_item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.7rem;
    margin: 0.5rem;
    border: 0.0625rem solid #374151;
    padding: 0.5rem 0.75rem;
    border-radius: var(--half-br);
}

.people_you_know_skeleton .single_people_item .name_mutual_count_wrapper {
    display: flex;
    width: 100%;
    flex-direction: column;
}

.people_you_know_skeleton .single_people_item .plus_icon_wrapper {
    display: flex;
    width: 20%;
    height: 2.5rem;
    border-radius: 0.25rem;
}

.mobile_chat_bar_skeleton {
    display: flex;
    gap: 1rem;
}

.skeleton_quick_post {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: 5rem;
    gap: 0.8rem;
    align-items: center;
    border: 0.0625rem solid #374151;
    padding: 0.8rem 0.8rem;
    border-radius: 1rem;
    margin-bottom: 1.3rem;
}

.skeleton_avatar {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: var(--round-image-br);
}

.skeleton_avatar.chat {
    width: 3.8rem;
}

.skeleton_line {
    height: 0.75rem;
    margin: 0.5rem 0;
    width: 100%;
}

.skeleton_line.short {
    height: 0.6rem;
    width: 45%;
}

.skeleton_line.xshort {
    height: 0.55rem;
    width: 30%;
}

.skeleton_line.name {
    height: 0.45rem;
}

.feed_posts_skeleton {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1.6rem;
}

.skeleton_post {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 8px;
    border: 0.01rem solid #374151;
    border-radius: var(--half-br);
    padding: 0.5rem 0.75rem;
}

.skeleton_post .post_header {
    display: flex;
    align-items: center;
    padding: 0.3rem;
    gap: 0.5rem;
}

.skeleton_post .post_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0.5rem;
    gap: 0.25rem;
}

.skeleton_post .post_content .image_skeleton {
    display: flex;
    width: 50%;
    height: 15rem;
    border-radius: 0.25rem;
}

@keyframes animate_pulse {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

.new-feature-badge {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--new-post-for-user-color);
    animation: bounce 1s ease-in-out infinite;
    margin-left: 0.4rem;
}

@keyframes bounce {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-40px);
    }
}

.dragging {
    outline: 0.2rem solid var(--primary-accent-color) !important;
}

/* Mobile Bottom Sheet Action Drawer & Backdrop */
.mobile_action_sheet_backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--backdrop-bg);
    z-index: 45;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease-in-out;
}

.mobile_action_sheet_backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

.mobile_action_sheet {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 3rem;
    background: var(--action-sheet-bg);
    border-top: 0.09375rem solid var(--action-sheet-border);
    border-radius: 1.25rem 1.25rem 0 0;
    z-index: 48;
    padding: 1.8rem 1.5rem;
    box-shadow: 0 -0.5rem 1.875rem var(--action-sheet-shadow);
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
    transition:
        transform 0.3s cubic-bezier(0.1, 0.76, 0.55, 0.94),
        opacity 0.25s ease-in-out;
    flex-direction: column;
    gap: 1.2rem;
    align-items: center;

    &.active {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .header {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .title {
        font-size: 1.25rem;
        font-weight: 800;
        color: var(--primary-text-color);
        margin: 0;
        margin-bottom: 0.4rem;
        letter-spacing: 0.03125rem;
    }

    .divider {
        width: 2.2rem;
        height: 0.1875rem;
        background: var(--action-sheet-divider-bg);
        border-radius: 0.125rem;
        margin-bottom: 0.6rem;
    }

    .subtitle {
        font-size: 0.9rem;
        color: var(--action-sheet-subtitle-color);
        margin: 0;
    }

    .buttons {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
        width: 100%;

        .select_action_btn {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 0.6rem;
            padding: 0.8rem 1.5rem;
            font-size: 1rem;
            font-weight: 700;
            color: var(--primary-text-color);
            background: var(--primary-accent-color);
            border: 0.0625rem solid transparent;
            border-radius: 0.625rem;
            cursor: pointer;
            transition: all 0.2s ease-in-out;
            width: 100%;
            box-shadow: 0 0.25rem 0.625rem color-mix(in srgb, var(--primary-accent-color) 15%, transparent);
            box-sizing: border-box;

            &:hover {
                background: var(--primary-accent-light-color);
            }

            i {
                font-size: 1.15rem;
            }
        }
    }
}

/* Plus icon transition to X */
#bottom_navigation_create_post_button .portrait_create_post {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

#bottom_navigation_create_post_button.bottom_navigation_create_post_active .portrait_create_post {
    transform: rotate(135deg);
}

/* Reusable Tab Selector Track */
.unified_tab_selector_header {
    position: relative;
    display: flex;
    background: var(--theme-track-bg);
    border: 0.0625rem solid var(--theme-hairline);
    border-radius: 0.8125rem;
    padding: 0.25rem;
    gap: 0.125rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    box-sizing: border-box;
    align-items: stretch;
    justify-content: center;
}

/* Reusable Sliding Background Pill */
.unified_tab_pill {
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    height: calc(100% - 0.5rem);
    width: calc(50% - 0.375rem);
    border-radius: 0.625rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--theme-blue) 22%, transparent), color-mix(in srgb, var(--theme-violet) 14%, transparent));
    border: 0.0625rem solid color-mix(in srgb, var(--theme-blue) 55%, transparent);
    box-shadow:
        0 0 1rem -0.125rem rgba(var(--theme-accent-rgb), 0.38),
        inset 0 0 0 0.0625rem rgba(var(--theme-accent-rgb), 0.05);
    transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
    box-sizing: border-box;
}

/* Reusable Tab Labels */
.unified_tab_selector_header > label {
    position: relative;
    z-index: 1;
    flex: 1;
    border: none;
    background: transparent;
    padding: 0.5625rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-text-mid);
    cursor: pointer;
    border-radius: 0.625rem;
    transition: color 200ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    white-space: nowrap;
    margin: 0;
}

.unified_tab_selector_header > label:hover {
    color: var(--theme-hover-text);
}

/* Active Label State */
:root:has(#my_mandlis_selector_radio:checked) .my_mandli_label,
:root:has(#trending_mandli_selector_radio:checked) .trending_mandli_label,
:root:has(#my_buffs_selector_radio:checked) .my_buffs_label,
:root:has(#friends_buffs_selector_radio:checked) .friends_buffs_label,
:root:has(#mandli_posts_selector:checked) .mandli_posts_label,
:root:has(#mandli_buffs_selector:checked) .mandli_buffs_label,
:root:has(#view_friends_activity_radio:checked) .friends_activity_label,
:root:has(#log_your_activity_radio:checked) .log_activity_label {
    color: var(--theme-white);
    font-weight: 600;
}

/* Pill Sliding Transformations */
:root:has(#my_mandlis_selector_radio:checked) .mandli_tab_pill,
:root:has(#my_buffs_selector_radio:checked) .buffs_tab_pill,
:root:has(#mandli_posts_selector:checked) .mandli_inner_tab_pill,
:root:has(#view_friends_activity_radio:checked) .activity_tab_pill {
    transform: translateX(0);
}

:root:has(#trending_mandli_selector_radio:checked) .mandli_tab_pill,
:root:has(#friends_buffs_selector_radio:checked) .buffs_tab_pill,
:root:has(#mandli_buffs_selector:checked) .mandli_inner_tab_pill,
:root:has(#log_your_activity_radio:checked) .activity_tab_pill {
    transform: translateX(calc(100% + 0.25rem));
}

/*!************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/landing_page.css ***!
  \************************************************************************/
:root {
    --landing-page-video-box-shadow-color: #5c1361;
    --read-story-post-button-border-color: #fac6be;
    --tingle-modal_wihtout_singup_post_read_background-gradient: linear-gradient(45deg, #e0e0ff, #d9d9ff, #ab7996 100%);
    --signup-popup-on-post-read-font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    --signup-popup-on-post-read-title-color: #264653;
    --signup-popup-on-post-read-content-color: #ffffff;
    --landing-page-section-content-background-gradient: linear-gradient(to bottom right, #0f0f17, #1e1e2f);
    --landing-page-section-content-video-container-border: grey;
    --landing-page-subheading-text-heading-color: linear-gradient(90deg, #ffe20b, #ff41b1, #3cecff);
    --landing-page-subheading-text-paragraph-color: #ccc;

    /* Custom landing/login page brand colors (defined once as R, G, B channels) */
    --landing-accent-pink: 255, 0, 122;
    --landing-accent-purple: 171, 0, 255;
    --landing-accent-cyan: 0, 240, 255;
    --landing-accent-blue: 0, 114, 255;
    --login-button-bg: 138, 0, 230;
    --login-button-hover-bg: rgb(163, 26, 255);

    /* Extra landing page brand colors */
    --landing-accent-orange: 255, 123, 0;
    --landing-accent-violet: 138, 43, 226;

    /* Phone device styling colors */
    --phone-button-color: #726798;
    --phone-bg-color: #000000;
    --phone-border-color: #1c1829;
    --phone-outer-reflection-color: #1c182b;
    --phone-shadow-edge-color: #0f0d1a;
    --phone-glow-color: var(--landing-accent-violet);
    --phone-lens-color-inner: #101c38;
    --phone-lens-color-outer: #080d1a;
    --phone-screen-bg: #27273d;
    --phone-card-bg-dark: rgba(10, 8, 20, 0.85);
    --phone-bottom-nav-bg: rgba(8, 6, 16, 0.96);

    /* Pedestal styling colors */
    --pedestal-side-color-1: #090518;
    --pedestal-side-color-2: #170d35;
    --pedestal-side-color-3: #2a195e;
    --pedestal-top-color-1: #1b123d;
    --pedestal-top-color-2: #0d091f;
    --pedestal-upper-side-color-1: #0d0922;
    --pedestal-upper-side-color-2: #20144c;
    --pedestal-upper-side-color-3: #35227c;
    --pedestal-upper-top-color-1: #23184e;
    --pedestal-upper-top-color-2: #110b27;
    --pedestal-upper-accent-pink: #ff00ff;
}

#not_logged_in {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;

    & *,
    & *:focus,
    & *:active,
    & *:focus-visible {
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    & .not_logged_in_header {
        padding: 1rem 4rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        background-color: var(--not-logged-in-header-background-color);
        backdrop-filter: blur(0.625rem);
        -webkit-backdrop-filter: blur(0.625rem);
        box-shadow: 0 0.125rem 0.625rem var(--not-logged-in-header-box-shadow);
        animation: slideDown 1s ease forwards;
    }

    & #login_signup_button {
        background: rgb(var(--login-button-bg));
        color: #ffffff;
        border: none;
        font-weight: 600;
        transition: all 0.3s ease;
        padding: 0.6rem 1.6rem;
        border-radius: 1rem;
        box-shadow: 0 0.25rem 0.9375rem rgba(var(--login-button-bg), 0.3);

        &:hover {
            background: var(--login-button-hover-bg);
            box-shadow: 0 0.375rem 1.25rem rgba(var(--login-button-bg), 0.5);
            transform: translateY(-0.0625rem);
        }
    }

    & #landing_page {
        display: flex;
        flex-direction: column;
        width: 100%;
        flex: 1;
        overflow: scroll;
    }
}

.landing_page_content {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    position: relative;

    & canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        pointer-events: none;
        z-index: 0;
    }

    & section {
        scroll-snap-align: center;
        position: relative;
        z-index: 1;
        height: calc(100dvh - var(--not-logged-in-header-height));
    }

    & .snap_id_1_section {
        background: var(--landing-page-section-content-background-gradient);
    }

    & .section_content_1_inner_wrapper {
        display: flex;
        flex-direction: column;
        min-height: 100%;
        justify-content: center;
    }

    & .user_testimonials_swiper {
        width: 100%;
        max-width: 50rem;

        & .user_testimonials {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            text-align: center !important;
            font-size: 0.9rem !important;
            font-style: italic !important;
            font-weight: 500 !important;
            color: #ffffff !important;
            line-height: 1.35 !important;
            padding: 0 !important;
            cursor: pointer;
            box-sizing: border-box;
            width: 100% !important;

            & span {
                display: block !important;
                font-size: 0.72rem !important;
                font-style: normal !important;
                font-weight: 400 !important;
                color: rgba(255, 255, 255, 0.5) !important;
                margin-top: 0.25rem !important;
                letter-spacing: 0.05em;
                text-transform: none;
            }
        }

        & .swiper-slide {
            opacity: 0 !important;
            pointer-events: none;
            transition: opacity 0.4s ease-in-out !important;

            &.swiper-slide-active {
                opacity: 1 !important;
                pointer-events: auto;
            }
        }

        & .swiper-pagination {
            display: none !important;
        }
    }

    & .section_content {
        padding: 2rem 4rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        min-width: 100%;
        min-height: 100%;

        & img {
            padding: 0.5rem;
            width: 50%;
        }

        & .video_container {
            flex-grow: 2;
            text-align: center;

            & video {
                width: 18rem;
                height: 38rem;
                border-radius: 1.25rem;
                box-shadow: 0 0 4rem 0 var(--landing-page-video-box-shadow-color);
            }
        }

        & .section_content_first_page {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: 2rem;
            min-height: auto;
            height: auto;
            flex-grow: 1;
            padding: 1rem 4rem 0 4rem;
        }

        & .hero_left_content {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.8rem;
            width: 32.5%;
            text-align: left;
            z-index: 2;
        }

        & .why_tellect_badge {
            display: inline-flex;
            align-items: center;
            padding: 0.4rem 1.1rem;
            font-size: 0.78rem;
            font-weight: 700;
            color: #ffffff;
            border: 0.0625rem solid rgba(var(--landing-accent-purple), 0.55);
            border-radius: 1.25rem;
            box-shadow: 0 0 0.9375rem rgba(var(--landing-accent-purple), 0.35);
            margin-bottom: 0.8rem;
            letter-spacing: 0.05em;
            transition: all 0.3s ease;

            &::before {
                content: '✦';
                margin-right: 0.375rem;
                color: rgb(var(--landing-accent-pink));
                font-size: 0.9rem;
                text-shadow: 0 0 0.5rem rgba(var(--landing-accent-pink), 0.8);
                display: inline-block;
            }
        }

        & .hero_main_heading {
            font-size: 3.2rem;
            font-weight: 800;
            line-height: 1.15;
            margin: 0;
            letter-spacing: -0.02em;
        }

        & .heading_gradient_pink {
            background: linear-gradient(135deg, rgb(var(--landing-accent-pink)) 0%, rgb(var(--landing-accent-purple)) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 800;
        }

        & .heading_gradient_blue {
            background: linear-gradient(135deg, rgb(var(--landing-accent-cyan)) 0%, rgb(var(--landing-accent-blue)) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 800;
        }

        & .hero_sub_heading_text {
            font-size: 1.15rem;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.7);
            margin: 0;
        }

        & .hero_features_list {
            list-style: none;
            padding: 0;
            margin: 0;
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 0.6rem;

            & li {
                display: flex;
                align-items: center;
                gap: 0.8rem;
                padding-bottom: 0.5rem;
                border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.07);
                width: 100%;
                transition: all 0.3s ease;

                &:last-child {
                    border-bottom: none;
                }

                &:hover {
                    transform: translateX(0.375rem);

                    & .feature_icon_container {
                        transform: scale(1.1);
                        border-color: rgba(255, 255, 255, 0.3);
                        box-shadow: 0 0 0.9375rem rgba(var(--landing-accent-cyan), 0.3);
                    }
                }
            }
        }

        & .feature_icon_container {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 2.2rem;
            height: 2.2rem;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.03);
            border: 0.09375rem solid rgba(255, 255, 255, 0.1);
            color: #ffffff;
            font-size: 1rem;
            box-shadow: 0 0 0.625rem rgba(var(--landing-accent-purple), 0.15);
            transition: all 0.3s ease;
        }

        & .feature_item_1 .feature_icon_container {
            color: rgb(var(--landing-accent-pink));
            border-color: rgba(var(--landing-accent-pink), 0.4);
            box-shadow: 0 0 0.75rem rgba(var(--landing-accent-pink), 0.25);
        }

        & .feature_item_2 .feature_icon_container,
        & .feature_item_3 .feature_icon_container {
            color: rgb(var(--landing-accent-purple));
            border-color: rgba(var(--landing-accent-purple), 0.4);
            box-shadow: 0 0 0.75rem rgba(var(--landing-accent-purple), 0.25);
        }

        & .feature_item_4 .feature_icon_container {
            color: rgb(var(--landing-accent-blue));
            border-color: rgba(var(--landing-accent-blue), 0.4);
            box-shadow: 0 0 0.75rem rgba(var(--landing-accent-blue), 0.25);
        }

        & .feature_item_5 .feature_icon_container,
        & .feature_item_6 .feature_icon_container {
            color: rgb(var(--landing-accent-cyan));
            border-color: rgba(var(--landing-accent-cyan), 0.4);
            box-shadow: 0 0 0.75rem rgba(var(--landing-accent-cyan), 0.25);
        }

        & .feature_text {
            font-size: 1.05rem;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.85);
            line-height: 1.4;
        }

        & .highlight_pink {
            color: rgb(var(--landing-accent-pink));
            font-weight: 600;
        }

        & .highlight_purple {
            color: rgb(var(--landing-accent-purple));
            font-weight: 600;
        }

        & .highlight_blue {
            color: rgb(var(--landing-accent-cyan));
            font-weight: 600;
        }

        & .subheading_text {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            width: 60%;

            &.main {
                align-items: center;
            }

            & h1,
            & h2 {
                font-size: 2.5rem;
                background: var(--top-navigation-label-background-gradient);
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
                overflow: hidden;
                clip-path: inset(0 100% 0 0);
            }

            & h2 {
                margin-bottom: 1rem;
            }

            & h1 {
                font-size: 3rem;
                text-align: center;
            }

            & p {
                font-size: 1.1rem;
                line-height: 1.3;
                color: var(--landing-page-subheading-text-paragraph-color);
                overflow: hidden;
                clip-path: inset(0 0 100% 0);
            }
        }

        & .full_width_heading {
            display: none;
            width: 100%;
        }

        & .read_story_sign_up_label {
            font-size: 0.75rem;
            text-align: center;
            opacity: 0.9;
        }
    }

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

    & .typewriter-animate {
        & h1,
        & h2 {
            animation: revealText 1.5s steps(40, end) forwards;
        }

        & p {
            animation: revealText 1.5s steps(60, end) 1.5s forwards;
        }

        & span {
            animation: revealText 1.5s steps(60, end) infinite forwards;
        }
    }

    & .landing_home_container {
        position: relative;
        min-height: 100vh;
    }

    & .landing_title_container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;

        & .landing_title {
            font-size: 6rem;
        }

        & .landing_tagline {
            font-size: 1.9rem;
            margin: 0;
        }

        & #landing_tagline_ai {
            text-decoration: line-through;
            font-weight: 600;
        }
    }

    & .landing_image_container {
        position: relative;
        z-index: 0;
        margin-bottom: 2rem;

        &::before {
            content: '';
            position: absolute;
            inset: -0.3125rem;
            background: var(--loading-border-color);
            border-radius: var(--round-image-br);
            z-index: -1;
        }

        & .loading_image_container {
            background: var(--loading-image-bg-color);
            padding: 1.5625rem;
            border-radius: var(--round-image-br);
        }

        & img {
            display: block;
            max-width: 12.5rem;
            max-height: 12.5rem;
        }
    }

    & .landing_assist_arrow_down {
        height: 5rem;
        position: absolute;
        left: 50%;
        bottom: -5%;
        transform: translate(-50%, -50%);
        width: 2.1rem;
        cursor: pointer;
    }

    & .landing_assist_arrow {
        position: absolute;
        width: 2.1rem;
        height: 0.48rem;
        opacity: 0;
        transform: scale(0.3);
        animation: move-arrow 3s ease-out infinite;

        &:first-child {
            animation: move-arrow 3s ease-out 1s infinite;
        }

        &:nth-child(2) {
            animation: move-arrow 3s ease-out 2s infinite;
        }

        &::before,
        &::after {
            content: '';
            position: absolute;
            top: 0;
            height: 100%;
            width: 50%;
            background: var(--primary-text-color);
        }

        &::before {
            left: 0;
            transform: skewY(30deg);
        }

        &::after {
            right: 0;
            width: 50%;
            transform: skewY(-30deg);
        }
    }

    & .testimonial_container_with_wreaths {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
        margin: 0.5rem auto 0;
        width: 100%;
        max-width: 50rem;
        z-index: 2;
    }

    & .laurel_wreath {
        width: 2.5rem;
        height: 5rem;
        color: rgba(var(--landing-accent-pink), 0.7);
        filter: drop-shadow(0 0 0.625rem rgba(var(--landing-accent-pink), 0.4));
        flex-shrink: 0;
        opacity: 0.8;
    }

    & .right_wreath {
        transform: scaleX(-1);
    }

    & .testimonial_wrapper {
        flex-grow: 1;
    }

    & .bottom_decor_waves {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 7.5rem;
        pointer-events: none;
        z-index: 0;
        overflow: hidden;

        & svg {
            position: absolute;
            bottom: -0.625rem;
            left: 0;
            width: 100%;
            height: 100%;
            filter: drop-shadow(0 0 0.9375rem rgba(var(--landing-accent-purple), 0.5));
            animation: waveFlow 8s ease-in-out infinite alternate;
        }
    }

    & .phone_mockup_container {
        position: relative;
        width: 30%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 2;
        padding-bottom: 10rem; /* space for the pedestal stand and testimonial with beautiful gap */

        &::before {
            content: '';
            position: absolute;
            left: calc(50% - 10.5625rem); /* aligned to edge of 19.375rem + 1.375rem border device */
            top: 8.125rem;
            width: 0.1875rem;
            height: 1.5625rem;
            background: var(--phone-button-color);
            border-radius: 0.125rem 0 0 0.125rem;
            box-shadow:
                0 0.0625rem 0.125rem rgba(0, 0, 0, 0.5),
                0 2.8125rem 0 var(--phone-button-color),
                0 2.875rem 0.125rem rgba(0, 0, 0, 0.5),
                0 5.9375rem 0 var(--phone-button-color),
                0 6rem 0.125rem rgba(0, 0, 0, 0.5); /* action button + volume up + volume down with separate drop shadows */
            z-index: 1;
        }

        &::after {
            content: '';
            position: absolute;
            right: calc(50% - 10.5625rem);
            top: 11.5625rem;
            width: 0.1875rem;
            height: 3.125rem;
            background: var(--phone-button-color);
            border-radius: 0 0.125rem 0.125rem 0;
            box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.5);
            z-index: 1;
        }
    }

    & .phone_device {
        width: 19.375rem;
        height: 38.125rem;
        background: var(--phone-bg-color); /* Pitch black background to block stars/lines */
        border: 0.6875rem solid var(--phone-border-color); /* dark premium titanium border */
        border-radius: 2.5rem;
        box-shadow:
            /* Highly-defined outer metallic edge reflection */
            0 0 0 0.0625rem var(--phone-button-color),
            0 0 0 0.15625rem var(--phone-outer-reflection-color),
            0 0 0 0.21875rem var(--phone-shadow-edge-color),
            /* Glow and shadows */ 0 1.5625rem 4.0625rem rgba(0, 0, 0, 0.9),
            0 0 1.875rem rgba(var(--phone-glow-color), 0.4),
            /* Inner glass bezel reflection */ inset 0 0 0 0.09375rem rgba(255, 255, 255, 0.1);
        overflow: hidden;
        position: relative;
        display: flex;
        flex-direction: column;
        z-index: 2;
        transition:
            transform 0.3s ease,
            box-shadow 0.3s ease;

        &:hover {
            transform: translateY(-0.3125rem);
            box-shadow:
                0 0 0 0.0625rem var(--phone-button-color),
                0 0 0 0.15625rem var(--phone-outer-reflection-color),
                0 0 0 0.21875rem var(--phone-shadow-edge-color),
                0 1.875rem 4.375rem rgba(0, 0, 0, 0.95),
                0 0 2.5rem rgba(var(--phone-glow-color), 0.55),
                inset 0 0 0 0.09375rem rgba(255, 255, 255, 0.15);
        }
    }

    & .phone_dynamic_island {
        width: 5.9375rem;
        height: 1.5625rem;
        background: #000000;
        border: 0.03125rem solid rgba(255, 255, 255, 0.08);
        box-shadow:
            0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.8),
            inset 0 -0.0625rem 0.0625rem rgba(255, 255, 255, 0.05);
        border-radius: 0.8125rem;
        position: absolute;
        top: 0.6875rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 0.875rem;
        box-sizing: border-box;

        &::before {
            content: '';
            width: 0.4375rem;
            height: 0.4375rem;
            background: radial-gradient(circle, var(--phone-lens-color-inner) 20%, var(--phone-lens-color-outer) 60%, #000000 100%);
            border-radius: 50%;
            border: 0.03125rem solid rgba(255, 255, 255, 0.15);
            box-shadow: inset 0 0.0625rem 0.0625rem rgba(255, 255, 255, 0.3);
            display: block;
        }
    }

    & .phone_screen {
        padding: 2.625rem 0.875rem 0.875rem 0.875rem;
        display: flex;
        flex-direction: column;
        height: 100%;
        box-sizing: border-box;
        background: var(--phone-screen-bg);
    }

    & .phone_app_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
    }

    & .phone_logo {
        font-size: 1.15rem;
        font-weight: 800;
        background: linear-gradient(to right, rgb(var(--landing-accent-orange)), rgb(var(--landing-accent-pink)), rgb(var(--landing-accent-cyan)));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    & .phone_bell_icon {
        color: rgba(255, 255, 255, 0.85);
        font-size: 1.05rem;
        cursor: pointer;
    }

    & .phone_features_ticker {
        display: none;
        margin-bottom: 0.75rem;
        width: 100%;
        text-align: center;

        & .why_tellect_badge {
            margin: 0 auto 0.625rem auto;
        }
    }

    & .ticker_items_container {
        position: relative;
        height: 4.0625rem;
        width: 100%;
        overflow: hidden;
    }

    & .ticker_item {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        opacity: 0;
        transform: translateY(0.9375rem);
        transition:
            opacity 0.3s ease,
            transform 0.3s ease;
        display: flex;
        align-items: center;
        gap: 0.8rem;
        pointer-events: none;
        text-align: left;

        &.active {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        & .feature_icon_container {
            width: 1.6rem;
            height: 1.6rem;
            font-size: 0.75rem;
            background: rgba(255, 255, 255, 0.03);
            border: 0.0625rem solid rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            flex-shrink: 0;
        }

        & .feature_text {
            font-size: 0.82rem;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.85);
            line-height: 1.35;
        }
    }

    & .phone_action_cards {
        display: flex;
        flex-direction: column;
        gap: 0.875rem;
        margin-bottom: 1.5rem;
    }

    & .phone_card {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.25rem 1.125rem;
        border-radius: 1rem;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        box-sizing: border-box;

        &:hover {
            transform: translateY(-0.1875rem) scale(1.02);
        }
    }

    & .read_stories_card {
        background: linear-gradient(135deg, rgba(var(--phone-glow-color), 0.15) 0%, var(--phone-card-bg-dark) 100%);
        border: 0.0625rem solid rgba(var(--landing-accent-purple), 0.45);
        box-shadow:
            0 0.5rem 1.25rem rgba(0, 0, 0, 0.4),
            inset 0 0 0.75rem rgba(var(--landing-accent-purple), 0.12);

        & .phone_card_icon {
            color: rgb(var(--landing-accent-purple));
            filter: drop-shadow(0 0 0.5rem rgba(var(--landing-accent-purple), 0.6));
        }

        &:hover {
            & .phone_card_icon {
                filter: drop-shadow(0 0 0.75rem rgba(var(--landing-accent-purple), 0.95));
            }
        }
    }

    & .play_games_card {
        background: linear-gradient(135deg, rgba(var(--landing-accent-blue), 0.15) 0%, var(--phone-card-bg-dark) 100%);
        border: 0.0625rem solid rgba(var(--landing-accent-blue), 0.45);
        box-shadow:
            0 0.5rem 1.25rem rgba(0, 0, 0, 0.4),
            inset 0 0 0.75rem rgba(var(--landing-accent-blue), 0.12);

        & .phone_card_icon {
            color: rgb(var(--landing-accent-cyan));
            filter: drop-shadow(0 0 0.5rem rgba(var(--landing-accent-cyan), 0.6));
        }

        &:hover {
            & .phone_card_icon {
                filter: drop-shadow(0 0 0.75rem rgba(var(--landing-accent-cyan), 0.95));
            }
        }
    }

    & .phone_card_content {
        text-align: left;

        & h3 {
            font-size: 1.05rem;
            font-weight: 700;
            margin: 0 0 0.3125rem 0;
            color: #ffffff;
        }

        & p {
            font-size: 0.75rem;
            color: rgba(255, 255, 255, 0.55);
            margin: 0;
            line-height: 1.3;
        }
    }

    & .phone_card_icon {
        font-size: 2.3rem;
        opacity: 0.95;
        transition: filter 0.3s ease;
    }

    & .phone_activity_section {
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
        margin-bottom: auto;
        text-align: left;

        & h3 {
            font-size: 0.95rem;
            font-weight: 700;
            color: #ffffff;
            margin: 0 0 0.25rem 0;
        }
    }

    & .phone_stats_not_logged_in_wrapper {
        display: none;
    }

    & .phone_activity_grid {
        display: flex;
        gap: 0.75rem;
    }

    & .phone_activity_item {
        flex: 1;
        min-width: 0;
        padding: 0.875rem 0.5rem;
        background: rgba(255, 255, 255, 0.03);
        border: 0.0625rem solid rgba(255, 255, 255, 0.08);
        border-radius: 0.75rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;

        &:first-child {
            & .activity_value {
                color: var(--landing-accent-pink);
            }
        }

        &:last-child {
            & .activity_value {
                color: var(--landing-accent-cyan);
            }

            & i {
                color: var(--landing-accent-cyan);
                font-size: 1.15rem;
            }
        }
    }

    & .activity_label {
        font-size: 0.95rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.5);
    }

    & .activity_value_row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.375rem;
        min-width: 0;

        & .activity_value {
            font-size: 1.2rem;
            font-weight: 800;
            letter-spacing: -0.03em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
            min-width: 0;
        }
    }

    & .phone_bottom_nav {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 0.625rem 0 1rem 0;
        border-top: 0.0625rem solid rgba(255, 255, 255, 0.08);
        margin: 0 -0.875rem -0.875rem -0.875rem;
        background: var(--phone-bottom-nav-bg);
        backdrop-filter: blur(0.9375rem);

        & .nav_item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.1875rem;
            color: rgba(255, 255, 255, 0.4);
            font-size: 0.65rem;
            cursor: pointer;
            transition: color 0.3s ease;

            & i {
                font-size: 1.15rem;
            }

            &.active {
                color: var(--landing-accent-pink);
            }
        }
    }

    & .pedestal_stand {
        position: absolute;
        bottom: 7.8125rem; /* lifted up to give room for the quotes and gap below */
        width: 25.625rem;
        height: 3.75rem; /* total structure baseline height container */
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
    }

    & .pedestal_lower {
        position: absolute;
        bottom: 0;
        width: 25.625rem;
        height: 1.5rem;
        z-index: 1;

        & .pedestal_side {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                to right,
                var(--pedestal-side-color-1) 0%,
                var(--pedestal-side-color-2) 25%,
                var(--pedestal-side-color-3) 50%,
                var(--pedestal-side-color-2) 75%,
                var(--pedestal-side-color-1) 100%
            );
            border-radius: 0 0 50% 50% / 0 0 1.5rem 1.5rem;
            box-shadow:
                0 0.9375rem 2.1875rem rgba(0, 0, 0, 0.95),
                0 0 1.5625rem rgba(var(--landing-accent-purple), 0.5),
                /* Bright pink-cyan bottom neon glow stroke */ inset 0 -0.25rem 0.5rem rgba(var(--landing-accent-purple), 0.95),
                inset 0 -0.09375rem 0.1875rem rgb(var(--landing-accent-cyan));
            z-index: 1;
        }

        & .pedestal_top {
            position: absolute;
            top: -1.625rem; /* offset by half of ellipse height to sit on top of side face */
            left: 0;
            width: 100%;
            height: 3.25rem;
            background: radial-gradient(ellipse at center, var(--pedestal-top-color-1) 0%, var(--pedestal-top-color-2) 100%);
            border: 0.0625rem solid rgba(255, 255, 255, 0.12);
            border-radius: 50%;
            box-shadow: inset 0 0 0.75rem rgba(var(--landing-accent-purple), 0.5);
            z-index: 2;
        }
    }

    & .pedestal_upper {
        position: absolute;
        bottom: 1.5rem; /* rests on lower tier top */
        width: 21.875rem;
        height: 1.25rem;
        left: 1.875rem; /* centered */
        z-index: 2;

        & .pedestal_side {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                to right,
                var(--pedestal-upper-side-color-1) 0%,
                var(--pedestal-upper-side-color-2) 25%,
                var(--pedestal-upper-side-color-3) 50%,
                var(--pedestal-upper-side-color-2) 75%,
                var(--pedestal-upper-side-color-1) 100%
            );
            border-radius: 0 0 50% 50% / 0 0 1.25rem 1.25rem;
            box-shadow:
                inset 0 -0.1875rem 0.375rem rgba(var(--landing-accent-purple), 0.9),
                inset 0 -0.0625rem 0.125rem var(--pedestal-upper-accent-pink);
            z-index: 1;
        }

        & .pedestal_top {
            position: absolute;
            top: -1.375rem;
            left: 0;
            width: 100%;
            height: 2.75rem;
            background: radial-gradient(ellipse at center, var(--pedestal-upper-top-color-1) 0%, var(--pedestal-upper-top-color-2) 100%);
            border: 0.0625rem solid rgba(255, 255, 255, 0.15);
            border-radius: 50%;
            box-shadow: inset 0 0 0.625rem rgba(var(--landing-accent-purple), 0.6);
            z-index: 2;

            &::after {
                content: '';
                position: absolute;
                top: 0.375rem;
                left: 0.9375rem;
                right: 0.9375rem;
                bottom: 0.375rem;
                border: 0.0625rem dashed rgba(var(--landing-accent-cyan), 0.45);
                border-radius: 50%;
                filter: blur(0.03125rem);
                z-index: 3;
            }
        }
    }

    & .phone_testimonial {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        margin-top: 0.625rem;
        width: 100%;
        z-index: 2;
        position: absolute;
        bottom: 0.9375rem; /* placed lower down, creating a beautiful gap below the pedestal */

        & .laurel_wreath {
            width: 1.5rem;
            height: 3.75rem;
            color: rgba(var(--landing-accent-purple-rgb), 0.85);
            filter: drop-shadow(0 0 0.5rem rgba(var(--landing-accent-purple-rgb), 0.6));
            flex-shrink: 0;
            transition:
                color 0.3s ease,
                filter 0.3s ease;
        }

        & #users_testimonial_landing_page {
            width: 20rem;
            overflow: hidden;
        }
    }

    & .stat_indicator {
        width: 2.2rem;
        height: 0.1875rem;
        border-radius: 0.125rem;
        margin: 0.6rem auto 0 auto;
    }

    & .pink_indicator {
        background: rgb(var(--landing-accent-pink));
        box-shadow: 0 0 0.625rem rgba(var(--landing-accent-pink), 0.5);
    }

    & .blue_indicator {
        background: rgb(var(--landing-accent-cyan));
        box-shadow: 0 0 0.625rem rgba(var(--landing-accent-cyan), 0.5);
    }

    & .stats_not_logged_in_wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 32.5%;
        z-index: 2;
    }

    & .stats_glass_card {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 1.8rem;
        width: 100%;
        max-width: 25rem;
        background: rgba(13, 11, 28, 0.6);
        border: 0.0625rem solid rgba(255, 255, 255, 0.08);
        border-radius: 1.5rem;
        padding: 2.2rem 2rem;
        backdrop-filter: blur(0.9375rem);
        -webkit-backdrop-filter: blur(0.9375rem);
        box-shadow:
            0 1.25rem 2.5rem rgba(0, 0, 0, 0.4),
            inset 0 0 0.9375rem rgba(255, 255, 255, 0.02);
        transition:
            transform 0.3s ease,
            border-color 0.3s ease;

        &:hover {
            border-color: rgba(255, 0, 122, 0.25);
        }

        & .stats_cta_buttons button.preferred {
            height: 3rem;
            width: auto;
            flex: 1;
        }
    }

    & .stats_columns {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    & .stat_column_item {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
    }

    & .stat_label {
        font-size: 0.72rem;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.5);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        text-align: center;
    }

    & .stat_divider {
        width: 0.0625rem;
        height: 3.5rem;
        background: rgba(255, 255, 255, 0.08);
    }

    & .read_post_count,
    & .total_games_played {
        font-size: 2.5rem;
        font-weight: 800;
        line-height: 1.2;
        margin-top: 0.5rem;
        display: inline-block;
        transition:
            transform 0.3s ease,
            filter 0.3s ease;

        &.updated {
            transform: scale(1.15);
            filter: brightness(1.3);
        }
    }

    & .read_post_count {
        background: linear-gradient(135deg, rgb(var(--landing-accent-pink)) 0%, rgb(var(--landing-accent-purple)) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 0 1.5625rem rgba(var(--landing-accent-pink), 0.2);
    }

    & .total_games_played {
        background: linear-gradient(135deg, rgb(var(--landing-accent-cyan)) 0%, rgb(var(--landing-accent-blue)) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 0 1.5625rem rgba(var(--landing-accent-cyan), 0.2);
    }

    & .stats_cta_buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        width: 100%;

        & button,
        & .play_game_button_options_wrapper label {
            height: 3rem;
            border-radius: 0.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.95rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border: none;
            gap: 0.5rem;
            width: 100%;
            animation: verticalReveal 1.2s ease-out forwards;
        }
    }

    & .read_story_button {
        background: linear-gradient(135deg, rgb(var(--landing-accent-violet)) 0%, rgb(var(--landing-accent-pink)) 100%);
        color: #ffffff;
        box-shadow: 0 0.25rem 0.9375rem rgba(var(--landing-accent-pink), 0.3);

        &:hover {
            transform: translateY(-0.125rem);
            box-shadow: 0 0.375rem 1.25rem rgba(var(--landing-accent-pink), 0.5);
        }
    }

    & .play_game_button_options_wrapper {
        position: relative;
        width: 100%;

        & label {
            background: linear-gradient(135deg, rgb(var(--landing-accent-blue)) 0%, rgb(var(--landing-accent-cyan)) 100%);
            color: #ffffff;
            box-shadow: 0 0.25rem 0.9375rem rgba(var(--landing-accent-cyan), 0.3);

            &:hover {
                transform: translateY(-0.125rem);
                box-shadow: 0 0.375rem 1.25rem rgba(var(--landing-accent-cyan), 0.5);
            }
        }

        & .games_list {
            opacity: 0;
            display: none;
            transform: scale(0.9);
            transform-origin: top center;
            transition:
                opacity 0.3s ease,
                transform 0.3s ease;
            pointer-events: none;
            position: absolute;
            width: 100%;
            z-index: 10;
            left: 0;
            top: calc(100% + 0.5rem);
            background: rgba(13, 11, 28, 0.95);
            border: 0.0625rem solid rgba(255, 255, 255, 0.15);
            border-radius: 0.75rem;
            box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.6);
        }

        & input:checked ~ .games_list {
            display: flex;
            opacity: 1;
            transform: scale(1);
            pointer-events: auto;
            flex-direction: column;
            cursor: pointer;
        }
    }

    & .game_label {
        display: flex;
        gap: 1rem;
        padding: 0.75rem 1rem;
        align-items: center;
        font-weight: 600;
        color: #ffffff;
        transition:
            background-color 0.2s ease,
            border-radius 0.2s ease;

        &:hover {
            background: rgba(255, 255, 255, 0.08);
            border-radius: 0.5rem;
        }
    }

    & .read_story_sign_up_label {
        font-size: 0.78rem;
        color: rgba(255, 255, 255, 0.4);
        text-align: center;
        margin: 0;
        display: block;
        width: 100%;
    }
}

@keyframes cursorClick {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    30% {
        transform: translate(6.25rem, 0.3125rem) scale(1);
    }

    40% {
        transform: translate(6.25rem, 0.3125rem) scale(0.8);
    }

    45% {
        transform: translate(6.25rem, 0.3125rem) scale(1);
    }

    50% {
        opacity: 1;
    }

    60% {
        opacity: 0;
        transform: translate(6.25rem, 0.3125rem) scale(1);
    }

    100% {
        opacity: 0;
    }
}

@keyframes buttonClick {
    30% {
        transform: scale(1);
    }

    40% {
        transform: scale(0.95);
    }

    45% {
        transform: scale(1);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes revealText {
    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes waveFlow {
    0% {
        transform: translateY(0) scaleY(1);
    }
    100% {
        transform: translateY(0.5rem) scaleY(1.04);
    }
}

@keyframes badgePulse {
    0% {
        box-shadow:
            0 0 0.625rem rgba(var(--landing-accent-purple), 0.35),
            inset 0 0 0.375rem rgba(var(--landing-accent-pink), 0.1);
        border-color: rgba(var(--landing-accent-purple), 0.55);
    }
    100% {
        box-shadow:
            0 0 1.25rem rgba(var(--landing-accent-pink), 0.65),
            inset 0 0 0.625rem rgba(var(--landing-accent-purple), 0.25);
        border-color: rgba(var(--landing-accent-pink), 0.75);
    }
}

@keyframes move-arrow {
    25% {
        opacity: 1;
    }

    33.3% {
        opacity: 1;
        transform: translateY(2.28rem);
    }

    66.6% {
        opacity: 1;
        transform: translateY(3.12rem);
    }

    100% {
        opacity: 0;
        transform: translateY(4.8rem) scale(0.5);
    }
}

@keyframes verticalReveal {
    0% {
        opacity: 0;
        max-height: 0;
        transform: translateY(-0.625rem);
    }

    100% {
        opacity: 1;
        max-height: 4rem;
        transform: translateY(0);
    }
}

@media (max-width: 64rem) or (orientation: portrait) {
    .landing_page_content .stats_glass_card {
        padding: 1.2rem 1rem;
        gap: 0.8rem;
        max-width: 100%;
    }

    .landing_page_content .stats_not_logged_in_wrapper {
        display: none;
    }

    .landing_page_content .phone_testimonial {
        display: flex;
        position: relative;
        bottom: auto;
        margin-top: 1.875rem;
        margin-bottom: 1.25rem;
        z-index: 2;
    }

    .landing_page_content .phone_testimonial .user_testimonials span {
        font-size: 0.8rem !important;
    }

    .landing_page_content .phone_testimonial .user_testimonials {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
    }

    .landing_page_content .phone_testimonial #users_testimonial_landing_page {
        width: 20rem;
    }

    /* placed lower down, creating a beautiful gap below the pedestal */
    .landing_page_content .phone_testimonial .laurel_wreath {
        width: 1.5rem;
        height: 3.75rem;
    }

    .landing_page_content .pedestal_stand {
        display: none;
    }

    .landing_page_content .phone_bottom_nav {
        display: none;
    }

    .landing_page_content .phone_stats_not_logged_in_wrapper .read_story_sign_up_label {
        font-size: 0.7rem;
        margin-top: 0.1rem;
    }

    .landing_page_content .phone_stats_not_logged_in_wrapper .stats_cta_buttons button,
    .landing_page_content .phone_stats_not_logged_in_wrapper .stats_cta_buttons .play_game_button_options_wrapper label {
        height: 2.6rem;
        font-size: 0.85rem;
        border-radius: 0.6rem;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .landing_page_content .phone_stats_not_logged_in_wrapper .stats_cta_buttons {
        gap: 0.8rem;
    }

    .landing_page_content .phone_stats_not_logged_in_wrapper .stat_divider {
        height: 2.2rem;
    }

    .landing_page_content .phone_stats_not_logged_in_wrapper .stat_label {
        font-size: 0.65rem;
    }

    .landing_page_content .phone_stats_not_logged_in_wrapper .read_post_count,
    .landing_page_content .phone_stats_not_logged_in_wrapper .total_games_played {
        font-size: 1.7rem;
    }

    .landing_page_content .phone_stats_not_logged_in_wrapper {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
        margin-top: 1rem;
        text-align: center;
    }

    .landing_page_content .phone_activity_section {
        display: none;
    }

    .landing_page_content .phone_card_icon {
        font-size: 1.5rem;
    }

    .landing_page_content .phone_card_content p {
        font-size: 0.72rem;
    }

    .landing_page_content .phone_card_content h3 {
        font-size: 0.95rem;
        margin-bottom: 0.1875rem;
    }

    .landing_page_content .phone_card {
        padding: 0.75rem 0.875rem;
        border-radius: 0.875rem;
    }

    .landing_page_content .phone_action_cards {
        gap: 0.625rem;
        margin-bottom: 1rem;
    }

    .landing_page_content .ticker_item .feature_text {
        font-size: 0.82rem;
    }

    .landing_page_content .ticker_item .feature_icon_container {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.8rem;
    }

    .landing_page_content .ticker_items_container {
        height: 3.25rem;
    }

    .landing_page_content .phone_features_ticker {
        display: block;
        margin-bottom: 0.625rem;
    }

    .landing_page_content .phone_features_ticker .why_tellect_badge {
        font-size: 0.8rem;
        padding: 0.25rem 0.625rem;
        margin-bottom: 0.5rem;
    }

    .landing_page_content .phone_app_header {
        display: none;
    }

    .landing_page_content .phone_screen {
        padding: 1.5rem 1.25rem 1.5rem 1.25rem;
        background: rgba(255, 255, 255, 0.03);
        border: 0.0625rem solid rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(1.25rem);
        border-radius: 1.5rem;
        width: 100%;
        box-sizing: border-box;
        height: auto;
    }

    .landing_page_content .phone_dynamic_island {
        display: none;
    }

    .landing_page_content .phone_device {
        width: 100%;
        max-width: 100%;
        height: auto;
        border: none;
        border-radius: 1.4375rem;
        box-shadow: none;
        background: transparent;
        overflow: visible;
    }

    .landing_page_content .phone_mockup_container {
        width: 100%;
        max-width: 30rem;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        padding-bottom: 0;
        transform: none;
        height: auto;
        margin-bottom: 0;

        &::before,
        &::after {
            display: none;
        }
    }

    .landing_page_content .testimonial_container_with_wreaths {
        display: none;
    }

    .landing_page_content .landing_assist_arrow_down {
        bottom: 1.2rem;
        transform: translateX(-50%);
        height: 4rem;
    }

    .landing_page_content .reverse {
        flex-direction: column;
    }

    .landing_page_content .section_content .subheading_text p {
        font-size: 0.9rem;
        line-height: 1.4;
        text-align: center;
    }

    .landing_page_content .section_content .subheading_text h1,
    .landing_page_content .section_content .subheading_text h2 {
        font-size: 1.8rem;
        line-height: 1.2;
        text-align: center;
        margin-bottom: 0.8rem;
    }

    .landing_page_content .section_content .hero_left_content {
        display: none;
    }

    .landing_page_content .section_content .section_content_first_page {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1.5rem;
        padding: 2rem 1rem 4rem 1rem;
    }

    .landing_page_content .section_content .video_container {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 1rem;
    }

    .landing_page_content .section_content .video_container video {
        width: min(12.5rem, 40vw);
        height: auto;
        max-width: 85%;
    }

    .landing_page_content .section_content.first {
        justify-content: flex-start;
    }

    .landing_page_content .section_content {
        padding: 1rem;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        gap: 0.5rem;
    }
}

@media (orientation: portrait) {
    .landing_page_content .read_story_sign_up_label {
        font-size: 0.7rem;
    }

    .landing_page_content .stats_cta_buttons button,
    .landing_page_content .stats_cta_buttons .play_game_button_options_wrapper label {
        font-size: 0.85rem;
        height: 2.5rem;
    }

    .landing_page_content .stats_cta_buttons {
        gap: 0.6rem;
    }

    .landing_page_content .read_post_count,
    .landing_page_content .total_games_played {
        font-size: 1.6rem;
    }

    .landing_page_content .stat_divider {
        height: 2.5rem;
    }

    .landing_page_content .section_content .read_story_sign_up_label {
        font-size: 0.7rem;
    }

    .landing_page_content .section_content .feature_text {
        font-size: 0.82rem;
        text-align: left;
    }

    .landing_page_content .section_content .feature_icon_container {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.75rem;
    }

    .landing_page_content .section_content .hero_features_list li {
        padding-bottom: 0.4rem;
        gap: 0.75rem;
    }

    .landing_page_content .section_content .hero_features_list {
        gap: 0.5rem;
    }

    .landing_page_content .section_content .hero_sub_heading_text {
        font-size: 0.95rem;
        margin: 0;
    }

    .landing_page_content .section_content .hero_main_heading {
        font-size: 2rem;
        line-height: 1.1;
    }

    .landing_page_content .section_content .why_tellect_badge {
        padding: 0.25rem 0.8rem;
        font-size: 0.75rem;
    }

    .landing_page_content .section_content .hero_left_content {
        display: none;
    }

    .landing_page_content .section_content .section_content_first_page {
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
        padding: 1.2rem 1.5rem 0.5rem 1.5rem;
    }

    .landing_page_content .section_content .video_container video {
        height: 50%;
        width: 50%;
    }

    .landing_page_content .section_content_1_inner_wrapper {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        min-height: 100%;
    }

    .landing_page_content section {
        height: auto;
        min-height: calc(100dvh - var(--not-logged-in-header-height));
        overflow: visible;
    }

    #not_logged_in #login_signup_button {
        padding: 0.5rem 1rem;
        border-radius: 1rem;
    }

    #not_logged_in .not_logged_in_header {
        padding: 1rem;
    }
}

@media (max-width: 64rem) and (max-height: 46.875rem), (orientation: portrait) and (max-height: 46.875rem) {
    .landing_page_content .phone_testimonial {
        margin-top: 0.75rem;
        margin-bottom: 0.5rem;
    }

    .landing_page_content .phone_testimonial .user_testimonials span {
        font-size: 0.65rem !important;
    }

    .landing_page_content .phone_testimonial .user_testimonials {
        font-size: 0.72rem !important;
        line-height: 1.3 !important;
    }

    .landing_page_content .phone_testimonial #users_testimonial_landing_page {
        width: 16.875rem;
    }

    /* placed lower down, creating a beautiful gap below the pedestal */
    .landing_page_content .phone_testimonial .laurel_wreath {
        width: 1.125rem;
        height: 3rem;
    }

    .landing_page_content .phone_stats_not_logged_in_wrapper .read_story_sign_up_label {
        font-size: 0.65rem;
        margin-top: 0;
    }

    .landing_page_content .phone_stats_not_logged_in_wrapper .stats_cta_buttons button,
    .landing_page_content .phone_stats_not_logged_in_wrapper .stats_cta_buttons .play_game_button_options_wrapper label {
        height: 2.3rem;
        font-size: 0.8rem;
        border-radius: 0.5rem;
    }

    .landing_page_content .phone_stats_not_logged_in_wrapper .stats_cta_buttons {
        gap: 0.6rem;
    }

    .landing_page_content .phone_stats_not_logged_in_wrapper .stat_divider {
        height: 2rem;
    }

    .landing_page_content .phone_stats_not_logged_in_wrapper .stat_label {
        font-size: 0.6rem;
    }

    .landing_page_content .phone_stats_not_logged_in_wrapper .read_post_count,
    .landing_page_content .phone_stats_not_logged_in_wrapper .total_games_played {
        font-size: 1.4rem;
    }

    .landing_page_content .phone_stats_not_logged_in_wrapper {
        gap: 0.6rem;
        margin-top: 0.6rem;
    }

    .landing_page_content .phone_card_icon {
        font-size: 1.3rem;
    }

    .landing_page_content .phone_card_content p {
        font-size: 0.65rem;
    }

    .landing_page_content .phone_card_content h3 {
        font-size: 0.82rem;
        margin-bottom: 0.125rem;
    }

    .landing_page_content .phone_card {
        padding: 0.5rem 0.625rem;
        border-radius: 0.75rem;
    }

    .landing_page_content .phone_action_cards {
        gap: 0.375rem;
        margin-bottom: 0.5rem;
    }

    .landing_page_content .ticker_item .feature_text {
        font-size: 0.72rem;
    }

    .landing_page_content .ticker_item .feature_icon_container {
        width: 1.25rem;
        height: 1.25rem;
        font-size: 0.7rem;
    }

    .landing_page_content .ticker_items_container {
        height: 2.375rem;
    }

    .landing_page_content .phone_features_ticker {
        margin-bottom: 0.375rem;
    }

    .landing_page_content .phone_features_ticker .why_tellect_badge {
        font-size: 0.7rem;
        padding: 0.1875rem 0.5rem;
        margin-bottom: 0.375rem;
    }

    .landing_page_content .phone_screen {
        padding: 0.875rem 0.875rem 0.875rem 0.875rem;
    }

    .landing_page_content .landing_assist_arrow_down {
        bottom: 0.8rem;
        height: 3rem;
    }

    .landing_page_content .section_content .subheading_text p {
        font-size: 0.78rem;
    }

    .landing_page_content .section_content .subheading_text h1,
    .landing_page_content .section_content .subheading_text h2 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }

    .landing_page_content .section_content .section_content_first_page {
        gap: 0.8rem;
        padding: 1.5rem 1rem 3.5rem 1rem;
    }

    .landing_page_content .section_content .video_container {
        margin-top: 0.6rem;
    }

    .landing_page_content .section_content .video_container video {
        width: min(11rem, 37vw);
        max-width: 80%;
    }
}

/*!************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/mobile_index.css ***!
  \************************************************************************/
:root {
    --portrait-navigation-activity-icon-glow: rgba(192, 132, 252, 0.6);
    --portrait-navigation-games-icon-color: #38bdf8;
    --portrait-navigation-games-icon-glow: rgba(56, 189, 248, 0.6);
    --portrait-navigation-profile-border: #c084fc;
    --portrait-navigation-profile-glow: rgba(192, 132, 252, 0.4);
    --portrait-navigation-button-border: rgba(255, 255, 255, 0.08);
    --portrait-navigation-button-bg: rgba(255, 255, 255, 0.03);
    --portrait-navigation-button-shadow: rgba(255, 255, 255, 0.05);
    --portrait-navigation-notification-icon-color: #ffffff;
    --portrait-navigation-notification-icon-glow: rgba(255, 255, 255, 0.3);
    --portrait-navigation-separator-color: rgba(255, 255, 255, 0.15);
}

@media (orientation: portrait) or (max-width: 800px) {
    .centered {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #landing_page {
        display: flex;
        flex-direction: column;
        min-width: 100%;
    }

    #landing_page > .footer {
        display: flex;
        justify-content: space-around;
        font-size: 0.8rem;
    }

    div#logo_about_area {
        display: none;
    }

    #main_section {
        display: grid;
        height: 100%;
        max-height: calc(100 * var(--vh));
        box-sizing: border-box;
        min-width: 100%;
        max-width: 100%;
    }

    .with_chat_bar {
        grid-template:
            'top_navigation' 2.8rem
            'main_area' 1fr
            'bottom_navigation' 3.5rem;
        grid-template-columns: 100%;
    }

    .chat_open {
        grid-template: 'top_navigation' 3.5rem 'main_area' 1fr 'bottom_navigation' 0rem !important;
        grid-template-columns: 100% !important;
    }

    .without_chat_bar {
        grid-template:
            'top_navigation' 3.5rem
            'main_area' 1fr
            'bottom_navigation' 3rem;
        grid-template-columns: 100%;
    }

    #bottom_navigation {
        grid-area: bottom_navigation;
        display: flex;
        flex-flow: row;
        justify-content: center;
        padding: 0;
        border-top: solid;
        border-color: var(--secondary-border-color);
        border-width: 0.12rem;
        min-width: 100%;
        background: var(--primary-bg-color);
        z-index: 50;
    }

    #portrait_top_bar {
        min-width: 100%;
        grid-area: top_navigation;
        z-index: 50;
    }
    #top_navigation {
        padding: 0.25rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-width: 100%;
        background: var(--top-navigation-bg-color);
        padding-top: 0.5rem;
    }

    #top_navigation_home_label {
        margin-left: 0.5rem;
    }

    #bottom_navigation .portrait_navigation_icons {
        min-width: 20%;
        padding-top: 0.5rem;
        padding-bottom: 0.25rem;
    }

    #top_navigation .portrait_navigation_icons {
        min-width: 2rem;
        min-height: 2rem;
        border: solid;
        border-radius: var(--round-image-br);
        border-width: 0.01rem;
        border-color: var(--primary-text-color);
        position: relative;
    }

    #create_post_and_feed_area,
    #read_posts,
    #mathracer,
    #equizzle {
        grid-area: main_area;
        overscroll-behavior: none;
        overflow-y: scroll;
        max-height: calc(100 * var(--vh) - 3.5rem);
        padding: 0 0.5rem;
    }

    #activity_area {
        grid-area: main_area;
        overflow-y: scroll;
        max-height: calc(100 * var(--vh) - 3.5rem);
    }

    #view_friends_activity_area,
    #activity_logging_area {
        max-height: calc(100 * var(--vh) - 10rem);
        overflow-y: scroll;
    }

    #bottom_navigation_circles_button {
        margin: 0;
    }

    .portrait_create_post {
        font-size: 2rem;
        border-radius: var(--round-image-br);
        min-width: 2rem;
        min-height: 2rem;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(180deg, #ffe20b, #ff41b1 60%);
        color: hsl(291.63deg 100% 13.85%);
        font-weight: bold;
    }

    .hide_in_portrait_mode {
        display: none !important;
    }

    #tab_selectors,
    #pop_screen_chat_area,
    #top_navigation_search_form,
    #top_navigation_home_icon_image,
    #tab_selector_full_screen_chat_label,
    #tab_selector_chat_area:not(:checked) ~ #chat_area {
        display: none;
    }

    .portrait_navigation_icons {
        display: flex;
        flex-flow: column;
        justify-content: center;
    }

    .portrait_navigation_icons:hover {
        background: var(--primary-hover-color);
    }

    .top_navigation_icons {
        height: 1rem;
        width: 1rem;
    }

    .navigation_icons_label {
        border-color: var(--primary-text-color);
        font-size: 0.8rem;
    }

    #profile_navigation_label img {
        width: 2rem;
        height: 2rem;
        border-radius: var(--round-image-br);
    }

    #create_circle {
        grid-area: main_area;
    }

    .landing_page_options {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .landing_page_options label {
        padding: 1rem;
        flex-grow: 1;
        border-radius: var(--half-br);
        display: flex;
        justify-content: center;
    }

    .landing_page_options > input.about_selector:checked + label {
        background: var(--landing-page-about-option-bg-color);
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        border-top-right-radius: 0;
        font-weight: bold;
    }

    .landing_page_options > input.signup_selector:checked + label {
        background: var(--landing-page-signup-option-bg-color);
        color: var(--landing-page-signup-option-text-color);
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
        font-weight: bold;
    }

    #features {
        padding: 1rem;
        margin: 0;
        background: var(--features-tab-bg-color);
        min-height: 95%;
    }

    div#title_signup {
        box-shadow: none;
        min-height: 100%;
    }

    .features_logo > img {
        border-radius: var(--round-image-br);
        max-width: 4rem;
        border: solid;
        border-width: 0.01rem;
        border-color: rgb(255 255 255/ 40%);
    }

    .iphone {
        min-height: calc(100 * var(--vh) - 1.5rem) !important;
        max-height: calc(100 * var(--vh) - 1.5rem) !important;
    }

    .remove_touch_event {
        touch-action: none;
    }

    #mandli_icon {
        position: relative;
    }
    #not_logged_in_mandli .mandli_scroll_area,
    #not_logged_in_cirle .circle_scroll_area {
        max-height: calc(100 * var(--vh) - 10rem);
    }
    #bottom_navigation_buffs_button > span {
        position: relative;
    }

    i.bi-bell-fill {
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        background-position-y: -0%;
        background-image: linear-gradient(#ffffff, #6156ff);
    }

    #top_navigation .top_navigation_actions_capsule {
        display: flex;
        flex-direction: row;
        align-items: center;
        background: transparent;
        border: none;
        box-shadow: none;
        gap: 0.6rem;
        padding: 0;
        margin-right: 0.5rem;

        .portrait_navigation_icons.capsule_item {
            border: 0.05rem solid var(--portrait-navigation-button-border);
            border-radius: 0.7rem;
            background: var(--portrait-navigation-button-bg);
            min-width: 2.2rem;
            min-height: 2.2rem;
            width: 2.2rem;
            height: 2.2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            margin: 0;
            position: relative;
            box-shadow: inset 0 0.05rem 0.05rem var(--portrait-navigation-button-shadow);
        }

        #top_navigation_activity_button i {
            font-size: 1.2rem;
            filter: drop-shadow(0rem 0rem 0.35rem var(--portrait-navigation-activity-icon-glow));
        }

        #top_navigation_games_button i {
            color: var(--portrait-navigation-games-icon-color);
            font-size: 1.2rem;
            filter: drop-shadow(0 0 0.35rem var(--portrait-navigation-games-icon-glow));
        }

        #notification_icon i {
            color: var(--portrait-navigation-notification-icon-color);
            font-size: 1.15rem;
            filter: drop-shadow(0 0 0.2rem var(--portrait-navigation-notification-icon-glow));
        }

        #portrait_notification_count {
            position: absolute;
            top: -0.2rem;
            right: -0.2rem;
        }

        #profile_navigation_label {
            border: none;
            background: transparent;
            box-shadow: none;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                left: -0.3rem;
                top: 20%;
                height: 60%;
                width: 0.05rem;
                background: var(--portrait-navigation-separator-color);
            }

            img,
            .profile_navigation {
                width: 2.2rem;
                height: 2.2rem;
                border-radius: 50%;
                border: 0.08rem solid var(--portrait-navigation-profile-border);
                box-shadow: 0 0 0.4rem var(--portrait-navigation-profile-glow);
                object-fit: cover;
            }
        }
    }

    .mobile_feed_search_container {
        width: 100%;
        padding: 0.5rem 0.5rem;
        box-sizing: border-box;

        .search_bar {
            display: flex;
            align-items: center;
            background: var(--primary-bg-color);
            border: 0.0625rem solid var(--quick-post-initial-div-border-color);
            border-radius: 1rem;
            padding: 0.65rem 0.9rem;
            gap: 0.6rem;
            cursor: pointer;
            box-shadow: 0 0.125rem 0.6rem rgba(192, 181, 255, 0.12);
            transition:
                border-color 0.2s ease,
                box-shadow 0.2s ease;
        }

        .search_bar:hover {
            border-color: var(--landscape-navigation-notification-button-icon-color);
            box-shadow: 0 0.125rem 0.8rem rgba(177, 180, 251, 0.25);
        }

        .search_icon {
            color: var(--quick-post-initial-div-border-color);
            font-size: 1.1rem;
            display: flex;
            align-items: center;
        }

        .search_input {
            background: transparent;
            border: none;
            outline: none;
            color: var(--primary-text-color);
            font-size: 0.95rem;
            width: 100%;
            cursor: pointer;
        }

        .search_input::placeholder {
            color: var(--quick-post-placeholder-color);
            font-size: 0.9rem;
        }
    }

    .quick_post {
        padding: 0 0.5rem;
        margin-top: 0.5rem;
    }
}

/*!***********************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/mobile_body.css ***!
  \***********************************************************************/
@media (orientation: portrait) {
    :root {
        font-size: max(16px, min(2.5vw, 1.4vh));
        font-size: max(16px, min(2.5vw, calc(1.4 * var(--vh))));
    }

    body {
        height: calc(100 * var(--vh));
        max-height: calc(100 * var(--vh)); /* Use dynamic viewport units */
        width: 100%;
    }
}

/*!***********************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/mobile_feed.css ***!
  \***********************************************************************/
@media (orientation: portrait) {
    #feed_area {
        font-size: 1rem;
        max-width: 100%;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/*!*************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/notifications/mobile_notification_box.css ***!
  \*************************************************************************************************/
@media (orientation: portrait) {
    #notification_popup {
        grid-area: main_area;
        overscroll-behavior: none;
        overflow: scroll;
    }
}

/*!***************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/posts/hide_from.css ***!
  \***************************************************************************/
.hide_members_area {
    height: 95%;
}

.hide_members_tab2 {
    max-height: 100%;
    display: flex;
    flex-direction: column;
}

.hide_members_list_name {
    font-size: 1.2rem;
}

.candidates_selector {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    background: var(--about-mandli-members-bg-color);
}

.candidates_selector + .buttons_div {
    display: flex;
    justify-content: space-between;
    margin-top: 1.25rem;
}
.candidates_selector > div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
}
.candidates_selector + .buttons_div > div {
    display: flex;
}

.candidates_selector_header {
    display: flex;
    flex-direction: row;
    gap: 0.8rem;
    align-items: center;
}

.candidates_selector_header > div,
.candidates_selector > div > label {
    display: flex;
    justify-content: space-between;
    /* min-width: 25%; */
}

.candidates_selector_header > div {
    justify-content: center;
    text-decoration: underline;
}

.candidates_selector_header > span {
    font-weight: bold;
}

.candidates_selector_header {
    display: flex;
    margin-bottom: 1rem;
    font-weight: bold;
}

.hidden_members_list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-left: 1rem;
}

.hidden_members_list > label {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.hidden_members_list > label > input {
    margin: 0;
}

.hidden_members_list + button {
    margin-top: 2rem;
    padding-left: 1rem;
}

.candidates_selector_header > span:hover,
.hidden_members_list > label:hover {
    cursor: pointer;
}

.username_input_create_list_button_wrapper {
    display: flex;
    flex-direction: row;
    gap: 1rem;

    input {
        padding: 0.5rem 1rem;
        border-radius: var(--one-fourth-br);
        border: none;
        min-width: 18rem;
    }

    input:focus {
        outline: none;
    }
}

@media (orientation: portrait) {
    .candidates_selector > div {
        padding-right: 1rem;
    }

    .candidates_selector + .buttons_div {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .username_input_create_list_button_wrapper {
        display: flex;
        flex-direction: column;
        gap: 1rem;

        input {
            padding: 0.5rem 1rem;
            border-radius: var(--one-fourth-br);
            border: none;
        }

        input:focus {
            outline: none;
        }
    }
}

/*!*****************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/icons.css ***!
  \*****************************************************************/
.meet_button {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
}

.youtube_button,
.google_meet_button,
.drive_button {
    background: none;
    border: none;
    display: flex;
    cursor: pointer;
    padding: 0;
    height: 1.25rem;
    width: 1.25rem;
}
.youtube_button img,
.google_meet_button img,
.drive_button img {
    height: 100%;
    width: 100%;
}

.youtube_button:disabled,
.google_meet_button:disabled,
.drive_button:disabled {
    filter: grayscale(1);
}

/*!*********************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/posts/forward_content.css ***!
  \*********************************************************************************/
.forward_content {
    height: 95%;
}
.forward_content_tab1 {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
}

.forward_content_tab1 > label {
    border: solid;
    border-width: 0.01rem;
    padding: 0.25rem 0.5rem;
    background: var(--primary-bg-color);
    border-radius: 0.5rem;
    border-color: var(--primary-border-color);
    box-shadow: 0.05rem 0 0 black;
    font-weight: bold;
}

.forward_content_tab2 {
    height: 100%;
    overflow-y: scroll;
    scroll-behavior: smooth;
}
.mandli_selector {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mandli_selector > label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--about-mandli-members-bg-color);
    padding: 1rem;
    border-bottom: solid;
    border-color: var(--primary-color);
}

.mandli_selector > label > img {
    max-width: 2rem;
    max-height: 2rem;
    border-radius: 50%;
}

/*!***********************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/buffs/buffs.css ***!
  \***********************************************************************/
/* css for buff section */
/* This includes my buffs and friends buffs */
@media (orientation: landscape) {
    div#buffs_section {
        min-width: 100% !important;
        position: relative;
        min-height: 100%;
        background-color: black;
    }
}

#buffs_section {
    height: 100%;
}

div.buffs_area {
    display: flex;
    flex-direction: column;
    min-width: 100%;
    overflow: scroll;
    padding: 0.5rem;
    gap: 0.34rem;
    box-sizing: border-box;
    padding-bottom: 2rem;
}

div.buffs_buttons {
    z-index: 10;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 100%;
    bottom: 5rem;
    pointer-events: none;
    gap: 1rem;
}

@media (orientation: landscape) {
    div.buffs_area {
        max-height: calc(100 * var(--vh) - 6rem);
    }

    div.buffs_buttons {
        min-width: var(--landscape-dynamic-width);
        bottom: 2rem;
    }
}

div.guess_friends_buff > div.buff_container.sidebar_card,
div.buff.sidebar_card {
    display: flex;
    min-width: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0.625rem 0.75rem;
    gap: 0.4rem;
    box-sizing: border-box;
    cursor: default;
}

div.buff.sidebar_card:has(.notification_dot) {
    background: var(--sidebar-card-bg-elevated);
    border: 0.0625rem solid rgba(var(--sidebar-card-accent-rgb), 0.18);
    box-shadow: var(--sidebar-card-glow);
}

#send_buff {
    cursor: pointer;
}

div.buff_container > div.metadata,
div.buff > div.metadata {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--sidebar-card-text-low);
    font-size: 0.8125rem;
}

div.buff > div.metadata > label.time {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--sidebar-card-text-low);
    font-size: 0.75rem;
}

div.guess_friends_buff div.receiver,
div.metadata > div.receiver {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

div.send_buff_options img,
div.receiver > img {
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    object-fit: cover;
}

div.receiver .bi-fire {
    display: inline-block;
    color: orangered;
    font-size: 1.5rem;
}

div.receiver .username {
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    color: var(--sidebar-card-text-hi);
}

div.my_buff div.receiver .username {
    font-weight: normal;
}

div.receiver .sender {
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    color: var(--sidebar-card-blue);
}

div.send_buff_text p {
    display: flex;
    justify-content: center;
    font-family: 'Quicksand', sans-serif;
    font-weight: bold;
    color: white;
    text-align: center;
}

div.buff_container > div.text,
div.buff > div.text {
    display: flex;
    justify-content: center;
    font-family: 'Sora', sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--sidebar-card-text-hi);
    text-align: center;
    line-height: 1.4;
    padding: 0.15rem 0;
}

div.buff.sidebar_card > div.guess_buttons,
div.buff.sidebar_card > div.share_remind_buttons,
div.buff_container.sidebar_card > div.guess_buttons,
div.buff_container.sidebar_card > div.share_remind_buttons {
    margin-top: 0;
}

/* css for send buff section */
div.send_buff_game {
    background: var(--approve-button-bg);
    border-radius: 0.5rem;
    min-width: 100%;
}

div.send_buff_text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
}

div.send_buff_text p {
    font-size: 1.1rem;
}

div.send_buff_actions {
    display: flex;
    padding: 1rem;
    justify-content: space-between;
    align-items: center;
    color: var(--selector-input-bg-color);
    font-size: 0.8rem;
}

div.send_buff_submit_button_container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem;
    justify-content: center;
}

div.send_buff_submit_button_container > button {
    padding: 0.5rem 3rem;
}

@media (orientation: portrait) {
    div.send_buff_submit_button_container {
        justify-content: flex-end;
    }
}

.send_buff_option.selected_option {
    border-color: var(--primary-accent-color);
}

div.send_buff_actions > span {
    display: flex;
    gap: 0.5rem;
    cursor: pointer;
}

div.send_buff_actions > span i {
    display: inline;
}

div.send_buff_options {
    display: flex;
    flex-direction: column;
    min-width: 100%;
}

div.send_buff_options > div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: solid;
    border-width: 0.01rem;
    border-color: var(--primary-border-color);
    border-radius: 0.25rem;
    margin: 0.5rem;
    margin-bottom: 0;
    padding: 0.75rem 0.5rem;
    background: var(--about-mandli-members-bg-color);
}

div.send_buff_game .tag_line {
    white-space: inherit;
}

div.second_buff_button_container,
div.share_remind_buttons,
div.guess_buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* Guess Friends Buff*/

div.guess_friends_buff {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

div.guess_friends_buff > div.heading {
    font-size: 1.1rem;
    display: flex;
    justify-content: center;
}

div.guess_friends_buff > div.input_fields {
    display: flex;
    justify-content: center;
    gap: 1rem;
    max-width: 100%;
    overflow: scroll;
}

div.guess_friends_buff > div.input_fields > input {
    border: none;
    background: var(--secondary-bg-color);
    outline: none;
    min-width: 2rem;
    max-width: 2rem;
    max-width: 2rem;
    min-height: 2rem;
    border: solid;
    border-width: 0.01rem;
    border-color: var(--primary-text-color);
    color: var(--primary-text-color);
    caret-color: var(--primary-text-color);
    text-align: center;
    font-size: 1.2rem;
    border-radius: 0.25rem;
}

.already_guessed,
.correct_guess,
.incorrect_guess {
    display: flex;
    justify-content: center;
}

.already_guessed {
    color: var(--medium-importance-text-color);
}

.correct_guess {
    color: var(--low-importance-text-color);
}

.incorrect_guess {
    color: var(--extreme-importance-text-color);
}

/* HINTS AREA */
.hint {
    display: flex;
    justify-content: center;
    color: yellow;
}

.hint + span {
    font-weight: bold;
}

.hints_area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--secondary-bg-color);
    padding: 1rem;
    border-radius: 0.25rem;
}

.hints_area p {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.hints_area > .heading {
    display: flex;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 1rem;
}

.hints_area > .hints {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hints_area > .hints p {
    margin-bottom: 0;
}

.hints_area > .hints .guessed_letter {
    font-size: 1.2rem;
    font-weight: bold;
}

.flash_buff_box {
    border: solid !important;
    border-color: var(--primary-accent-color) !important;
}

.time .bi-check2-circle {
    color: green;
}

div#mandli_buffs_buttons > button,
button#send_buff_timer_reset,
button#send_buff {
    pointer-events: all;
}

.mandli_name > .buttons_container > button.mandli_box_border,
.box_border {
    cursor: pointer;
    border-radius: 2rem;
    min-height: 2.5rem;
    font-weight: bold;
    place-content: center;
    color: white;
    text-shadow: 0 1px 0 #000;
    --border-color-1: #ff41b1;
    --border-color-2: #3cecff;

    --border-angle: 0turn;
    --main-bg: conic-gradient(from var(--border-angle), #000, #000);

    border: solid 5px transparent;
    --gradient-border: conic-gradient(from var(--border-angle), transparent 25%, var(--border-color-1), var(--border-color-2) 99%, transparent);
    background:
        var(--main-bg) padding-box,
        var(--gradient-border) border-box,
        var(--main-bg) border-box;
    background-position: center center;
    -webkit-animation: bg-spin 3s linear infinite;
    animation: bg-spin 3s linear infinite;
    padding: 0.8rem 2rem;
    box-shadow: 0 0 0.5rem var(--secondary-border-color);
}

@-webkit-keyframes bg-spin {
    to {
        --border-angle: 1turn;
    }
}

@keyframes bg-spin {
    to {
        --border-angle: 1turn;
    }
}

.mandli_name > .buttons_container > button.mandli_box_border {
    padding: 0.25rem;
    box-shadow: none;
    min-height: 0;
    border-radius: 1rem;
    border-width: 0.2rem;

    --border-color-1: #ff00ba;
    --border-color-2: #00ffba;
    --gradient-border: conic-gradient(from var(--border-angle), var(--border-color-1), var(--border-color-2));
}

.box_border:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

@property --border-angle {
    syntax: '<angle>';
    inherits: true;
    initial-value: 0turn;
}

.receiver .num_user_guessed,
.receiver .sender {
    font-weight: bold;
}

.receiver .num_user_guessed:hover,
.receiver .sender:hover {
    cursor: pointer;
    text-decoration: underline;
}

.buff_guessed_user {
    display: flex;
    align-items: center;
    color: #ffffff;
}

.buffs_tutorial {
    order: -1000000;
}

.connections_warning {
    background: black;
    padding: 2rem;
    font-weight: bold;
}

@media (orientation: portrait) {
    .mandli_buff_without_chat_bar,
    .buff_without_chat_bar {
        max-height: calc(100 * var(--vh) - 8.5rem);
    }

    .mandli_buff_with_chat_bar,
    .buff_with_chat_bar {
        max-height: calc(100 * var(--vh) - 14rem);
    }
}

div#mandli_buffs_area {
    display: flex;
    flex-direction: column;
    min-width: 100%;
    padding: 0.5rem;
    gap: 0.34rem;
    box-sizing: border-box;
    min-height: 100%;
}

.buff_hint_text {
    color: yellow;
    text-align: center;
    padding-top: 0.5rem;
}

.wrong_guesses_container,
.correct_guesses_container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: bold;
}

.correct_guesses_container .correct_guess_char {
    color: #00ff00;
}

.wrong_guesses_container .wrong_guess_char {
    color: #ff0000;
}

.bingo_message_text {
    color: #00ff00;
}

#send_buff_timer_reset {
    cursor: pointer;
    height: 3rem;
    width: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border-radius: 50%;
    background: #000000;
    color: #ffffff;
    border: none;
    box-shadow: 0rem 0rem 0.5rem 0rem white;
}

.timer_reset_button {
    font-size: 1.25rem;
    border: none;
    border-radius: 0.1rem;
    align-self: stretch;
    background: black;
    color: white;
    cursor: pointer;
}

button.change_buff_button {
    font-size: 1.5rem;
    padding: 0.1rem;
    border: 0;
    border-radius: 50%;
    background: none;
    color: white;
    cursor: pointer;
}

.launch_buff_party {
    display: flex;
    justify-content: center;
    padding: 1rem;
}

.friends_buff .all_letters_guessed_message_container {
    color: white;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.25rem;
}

.friends_buff .all_letters_guessed_message_container .all_letters_guessed_text {
    font-size: 0.9rem;
}

.friends_buff .all_letters_guessed_message_container .all_letters_guessed_icon {
    color: green;
    font-size: 1.25rem;
}

div.custom_buff {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

div.custom_buff button {
    float: right;
}

div.custom_buff label {
    font-size: 0.9rem;
    opacity: 0.8;
    align-self: end;
}

div.custom_buff input {
    background: var(--about-mandli-members-bg-color);
    border: none;
    padding: 0.5rem;
    color: white;
    font-size: 1rem;
    outline: none;
    border-radius: 0.25rem;
    font-family: 'Quicksand', sans-serif;
}

button.share_buff_button,
button.second_buff_button,
button.remind_buff_button {
    padding: 0.375rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--sidebar-card-bg-elevated);
    border: 0.0625rem solid var(--sidebar-card-btn-border);
    color: var(--sidebar-card-btn-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

div.guess_buttons > button,
.launch_buff_party > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 1rem;
    border-radius: 1.25rem;
    font-family: 'Sora', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    border: 0.0625rem solid var(--sidebar-card-btn-border);
    background: var(--sidebar-card-bg-elevated);
    color: var(--sidebar-card-btn-text);
    transition: all 0.2s ease;
    outline: none;
    overflow: hidden;
}

div.guess_buttons > button.preferred,
.launch_buff_party > button.preferred {
    border: none;
    padding: 0.5125rem 1.0625rem;
    background: linear-gradient(135deg, var(--sidebar-card-blue), var(--sidebar-card-violet));
    color: var(--sidebar-card-white);
}

div.guess_friends_buff .friends_selector .list .user .user_image_container {
    pointer-events: none;

}

div.guess_buttons > button.not_preferred,
.launch_buff_party > button.not_preferred {
    border-color: var(--sidebar-card-stroke);
    background: transparent;
    color: var(--sidebar-card-text-low);
}

div.guess_buttons > button.timer_reset_button {
    width: 2.125rem;
    height: 2.125rem;
    padding: 0;
    border-radius: 50%;
}

.launch_buff_party > button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

@media (hover: hover) {
    button.share_buff_button:hover {
        background: color-mix(in srgb, var(--sidebar-card-blue) 12%, transparent);
        border-color: var(--sidebar-card-blue);
        color: var(--sidebar-card-blue);
    }

    button.remind_buff_button:hover {
        background: color-mix(in srgb, var(--sidebar-card-pink) 12%, transparent);
        border-color: var(--sidebar-card-pink);
        color: var(--sidebar-card-pink);
    }

    button.second_buff_button:hover {
        background: color-mix(in srgb, var(--sidebar-card-violet) 12%, transparent);
        border-color: var(--sidebar-card-violet);
        color: var(--sidebar-card-violet);
    }

    div.guess_buttons > button.preferred:hover,
    .launch_buff_party > button.preferred:hover {
        background: linear-gradient(135deg, var(--sidebar-card-blue), var(--sidebar-card-violet));
        box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(var(--sidebar-card-accent-rgb), 0.38);
        transform: translateY(-0.0625rem);
    }

    div.guess_buttons > button.preferred:active,
    .launch_buff_party > button.preferred:active {
        transform: translateY(0) scale(0.985);
        box-shadow: none;
    }

    div.guess_buttons > button.not_preferred:hover,
    .launch_buff_party > button.not_preferred:hover {
        border-color: var(--sidebar-card-blue);
        background: color-mix(in srgb, var(--sidebar-card-blue) 10%, transparent);
        color: var(--sidebar-card-text-hi);
    }
}

/*!***********************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/utils/gamification/game.css ***!
  \***********************************************************************************/
:root {
    --explorer-primary: #ffe20b;
    --explorer-secondary: #000;
    --seeker-primary: #ff41b1;
    --seeker-secondary: #fff;
    --preacher-primary: #3cecff;
    --preacher-secondary: #000;
    --master-primary: #a995fa;
    --master-secondary: #000;
    --sage-primary: #fff;
    --sage-secondary: #000;
}

#achievements {
    grid-area: main_area;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: white;
    margin-top: 1rem;
    width: 100%;
    max-height: calc(100 * var(--vh) - 3rem);
    overflow-y: scroll;
}

#achievements .achievement_heading {
    font-size: 2rem;
}

#achievement_levels {
    width: 100%;
    display: flex;
    flex: 0 0 fit-content;
}

#achievement_levels #achievement_levels_container {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    padding: 0 1rem;
    overflow: scroll;
}

.animation_level_up .level,
.animation_task .level,
#achievement_levels .level {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 7rem;
    border-radius: 0.5rem;
    position: relative;
    cursor: pointer;
}

.animation_level_up .level .level_status_icon,
.animation_task .level .level_status_icon,
#achievement_levels .level .level_status_icon {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
}

.animation_level_up .level .level_banner,
.animation_task .level .level_banner,
#achievement_levels .level .level_banner {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    padding: 0.25rem;
    position: relative;
}

.animation_level_up .level .level_banner .level_status_icon,
.animation_task .level .level_banner .level_status_icon,
#achievement_levels .level .level_banner .level_status_icon {
    position: absolute;
    font-size: 1rem;
    top: 1%;
    right: 1%;
}

.animation_level_up .level .level_text,
.animation_task .level .level_text,
#achievement_levels .level .level_text {
    position: relative;
    padding: 0.5rem;
    margin: 0;
    display: flex;
    justify-content: center;
    font-weight: bold;
}

.animation_level_up .level.current_selected,
.animation_task .level.current_selected,
#achievement_levels .level.current_selected {
    padding: 0.5rem 0.5rem 0 0.5rem;
}

#achievement_tasks_container {
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

#achievement_tasks {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 1rem;
}

#achievement_tasks .achievement_task {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
    padding: 0.25rem;
    border-radius: 2.75rem;
    cursor: pointer;
}

#achievement_tasks .achievement_task .achievement_task_icon {
    padding: 0.5rem;
    border-radius: 50%;
    font-size: 1.25rem;
}

#achievement_tasks .achievement_task.complete {
    border: 0.1rem solid #cfff6c;
}

#achievement_tasks .achievement_task.complete .achievement_task_icon {
    color: #cfff6c;
}

#achievement_tasks .achievement_task.explorer.incomplete .achievement_task_icon {
    color: var(--explorer-primary);
}

#achievement_tasks .achievement_task.seeker.incomplete .achievement_task_icon {
    color: var(--seeker-primary);
}

#achievement_tasks .achievement_task.preacher.incomplete .achievement_task_icon {
    color: var(--preacher-primary);
}

#achievement_tasks .achievement_task.master.incomplete .achievement_task_icon {
    color: var(--master-primary);
}

#achievement_tasks .achievement_task.sage.incomplete .achievement_task_icon {
    color: var(--sage-primary);
}

#achievement_tasks .achievement_task .bi-info-circle-fill {
    font-size: 1.25rem;
    margin-left: auto;
    padding: 0.5rem;
}

#achievement_tasks .achievement_task .achievement_task_text {
    margin: 0;
    padding-right: 0.5rem;
}

@media (orientation: landscape) {
    #achievement_levels {
        width: 100%;
        display: flex;
        justify-content: center;
        overflow: scroll;
    }
}

@keyframes growIn {
    25% {
        transform: scale(0.25);
        opacity: 0;
    }
    50% {
        transform: scale(0.5);
        opacity: 0.5;
    }
    75% {
        transform: scale(0.75);
        opacity: 0.75;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

#animation_container {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    backdrop-filter: blur(6rem);
    -webkit-backdrop-filter: blur(2rem);
    border-radius: 1rem;
    padding: 2rem;
    z-index: 100;
    gap: 1rem;
    animation: growIn 0.4s ease-out forwards;
    transform-origin: center;
}

#animation_container .animation_task_message {
    padding: 2rem;
    font-size: 1.1rem;
}

.animation_level_up .forward_icon {
    font-size: 4rem;
}

.animation_task {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.animation_level_up {
    display: flex;
    align-items: center;
    justify-content: center;
}

.level .level_status_icon.incomplete {
    color: red;
}

.level.explorer {
    color: var(--explorer-primary);
    border: 0.1rem solid var(--explorer-primary);
}

.level.seeker {
    color: var(--seeker-primary);
    border: 0.1rem solid var(--seeker-primary);
}

.level.preacher {
    color: var(--preacher-primary);
    border: 0.1rem solid var(--preacher-primary);
}

.level.master {
    color: var(--master-primary);
    border: 0.1rem solid var(--master-primary);
}

.level.sage {
    color: var(--sage-primary);
    border: 0.1rem solid var(--sage-primary);
}

.level.explorer.current_selected {
    background: var(--explorer-primary);
    color: var(--explorer-secondary);
}

.level.seeker.current_selected {
    background: var(--seeker-primary);
    color: var(--seeker-secondary);
}

.level.preacher.current_selected {
    background: var(--preacher-primary);
    color: var(--preacher-secondary);
}

.level.master.current_selected {
    background: var(--master-primary);
    color: var(--master-secondary);
}

.level.sage.current_selected {
    background: var(--sage-primary);
    color: var(--sage-secondary);
}

.achievement_task.explorer.incomplete {
    border: 0.1rem solid var(--explorer-primary);
}

.achievement_task.seeker.incomplete {
    border: 0.1rem solid var(--seeker-primary);
}

.achievement_task.preacher.incomplete {
    border: 0.1rem solid var(--preacher-primary);
}

.achievement_task.master.incomplete {
    border: 0.1rem solid var(--master-primary);
}

.achievement_task.sage.incomplete {
    border: 0.1rem solid var(--sage-primary);
}

.user_flair {
    border-radius: 50%;
    padding: 0.2rem;
    cursor: pointer;
}

.user_flair.explorer {
    background: var(--explorer-primary);
    color: var(--explorer-secondary);
}

.user_flair.seeker {
    background: var(--seeker-primary);
    color: var(--seeker-secondary);
}

.user_flair.preacher {
    background: var(--preacher-primary);
    color: var(--preacher-secondary);
}

.user_flair.master {
    background: var(--master-primary);
    color: var(--master-secondary);
}

.user_flair.sage {
    background: var(--sage-primary);
    color: var(--sage-secondary);
}

#animation_container .animation_close_button {
    position: absolute;
    font-size: 2rem;
    right: 1.5%;
    top: 1.5%;
    cursor: pointer;
}

@media (orientation: portrait) {
    #animation_container .animation_close_button {
        right: 1%;
        top: 1%;
    }
}

/*!*********************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/user/user.css ***!
  \*********************************************************************/
.user_image_container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user_image_container .user_flair {
    position: absolute;
    right: 0;
    bottom: 0;
    border-radius: 50%;
}

.comment > .header .user_image_container {
    font-size: 0.8rem;
}

.chimes_profile_button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    font-size: 1rem;
    background: #297329;
    border-radius: 0.25rem;
    color: white;
    font-weight: bold;
    border: none;
}

.social_links_container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.social_links_container a {
    text-decoration: none;
}

/*!**************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/user/fist_bump.css ***!
  \**************************************************************************/
.post > .header button.fist_bumps {
    font-size: 1.5rem;
    height: 2rem;
    padding: 0 0.5rem;
}

.comment > .header > label.dropdown_content.button,
.comment > .header > .fist_bumps {
    margin: 0 0.5rem 0 auto;
}

.notification_message_text.fist_bumps_notification {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

button.fist_bumps {
    gap: 0.2rem;
}

button.fist_bumps .streak {
    font-size: 1rem;
}

.noto_emoji {
    font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
}

/*!*************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/chimes/chimes.css ***!
  \*************************************************************************/
.chimes_awarded_toast {
    background: rgb(77, 146, 77);
}

.chimes_awarded_data {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.spend_chimes_confirmation_buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
}

.chimes_container {
    display: flex;
    align-items: center;
    gap: 0.1rem;
}

.bi-music-note-beamed {
    background: linear-gradient(90deg, #00ff0d, #ffe20b);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/*!*****************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/phone.css ***!
  \*****************************************************************/
input.otp_input {
    max-width: 2em;
    text-align: center;
    font-size: 1.2rem;
}
div.inputs {
    display: flex;
    gap: 1em;
    justify-content: center;
}

.iti input {
    padding: 0.5rem;
    font-size: 0.875rem;
    font-weight: inherit;
}
.phone_number_popup {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.phone_number_popup button.phone_number_submit_button {
    margin-top: 0.5rem;
}

.phone_number_popup button.phone_number_submit_button:disabled {
    background-color: #3a3a3c;
    color: #8e8e93;
    cursor: not-allowed;
    opacity: 0.6;
}

.otp_checkbox_container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--primary-text-color, #fff);
    cursor: pointer;
}

.otp_checkbox_container input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    cursor: pointer;
}

.otp_checkbox_container label {
    cursor: pointer;
    user-select: none;
}


/*!********************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/user/rock_paper_scissors/rock_paper_scissors.css ***!
  \********************************************************************************************************/
.dropdown .rps_buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem;
    border-radius: 3rem;
    background: #000;
}

.rock_paper_scissors_button {
    cursor: pointer;
    background: #000;
    padding: 0.5rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.rps_result svg.rock,
.rps_buttons .rock_button,
.rock_paper_scissors_button svg.rock {
    color: #00ffff;
}

.rps_result svg.paper,
.rps_buttons .paper_button,
.rock_paper_scissors_button svg.paper {
    color: darkorange;
}

.rps_result svg.scissors,
.rps_buttons .scissors_button,
.rock_paper_scissors_button svg.scissors {
    color: yellow;
}

.rps_buttons button {
    border-radius: 50%;
    padding: 0.5rem;
    border: none;
    cursor: pointer;
    background: transparent;
    color: white;
}

.rps_result,
.rps_buttons {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: white;
}

.rps_result svg,
.rock_paper_scissors_button svg,
.rps_buttons button svg {
    height: 1.5rem;
    width: 1.5rem;
}

.comment > .header > label.dropdown_content.button svg {
    height: 1rem;
    width: 1rem;
}

.dropdown .rps_buttons button:hover {
    background: #1b1b35;
}

svg {
    display: block;
}

.notification_message.rock_paper_scissors .winner_release_div {
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    justify-content: space-between;
}

.notification_message .notification_actions {
    width: 100%;
}

.notification_message.rock_paper_scissors .winner_release_div:has(button.release_button) {
    justify-content: flex-end;
}

.notification_message.rock_paper_scissors .rps_buttons {
    margin-top: 0.5rem;
}

.notification_message.rock_paper_scissors .rps_buttons button {
    background: #000;
}

.notification_message.rock_paper_scissors .play_again_button {
    font-size: 0.8rem;
}

.rock_paper_scissors_animation_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.rock_paper_scissors_animation_container h1 {
    color: transparent;
    background: linear-gradient(90deg, #ffe20b, #ff41b1, #3cecff, #3eff37);
    background-clip: text;
    -webkit-background-clip: text;
    margin-bottom: 2rem;
}

.rock_paper_scissors_animation_container .rock_paper_scissors_win_animation {
    display: flex;
    position: relative;
    height: 3rem;
    width: 100%;
    max-width: 15rem;
}

.rock_paper_scissors_animation_container .user_stats_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.rock_paper_scissors_animation_container .user_stats_container .user_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.rock_paper_scissors_animation_container .user_stats_container .score_span {
    font-weight: bold;
    font-size: 1.5rem;
    color: #fff;
    padding: 0 0.5rem;
}

.rock_paper_scissors_animation_container .user_stats_container .user_container.winner {
    color: #44d644;
}

.rock_paper_scissors_animation_container .user_stats_container .user_container.loser {
    color: red;
}

.rock_paper_scissors_animation_container .user_stats_container .user_container img {
    height: 4rem;
    width: 4rem;
    border: 0.2rem solid currentColor;
    border-radius: 50%;
}

.rock_paper_scissors_animation_container .user_stats_container .user_container .user_name {
    font-weight: bold;
}

.rock_paper_scissors_animation_container .rock_paper_scissors_win_animation .winner {
    color: #44d644;
}

.rock_paper_scissors_animation_container .rock_paper_scissors_win_animation .loser {
    color: red;
}

.rock_paper_scissors_animation_container .rock_paper_scissors_win_animation .winner,
.rock_paper_scissors_animation_container .rock_paper_scissors_win_animation .loser {
    position: absolute;
    height: 3rem;
    width: 3rem;
}

.rock_paper_scissors_animation_container .rock_paper_scissors_win_animation .loser {
    right: 0;
}

.rock_paper_scissors_animation_container .rock_paper_scissors_win_animation .winner.move {
    transition: transform 1.5s;
    transform: translateX(4.5rem);
}

.rock_paper_scissors_animation_container .rock_paper_scissors_win_animation .loser.move {
    transition: transform 1.5s;
    transform: translateX(-4.5rem);
}

.rock_paper_scissors_animation_container .rock_paper_scissors_win_animation .loser.fade {
    animation: blinkTwiceFade 2s forwards;
}

@media (orientation: portrait) {
     .rock_paper_scissors_animation_container .rock_paper_scissors_win_animation .winner.move {
        transition: transform 1.5s;
        transform: translateX(3.25rem);
    }

    .rock_paper_scissors_animation_container .rock_paper_scissors_win_animation .loser.move {
        transition: transform 1.5s;
        transform: translateX(-3.25rem);
    }

    .rock_paper_scissors_animation_container .user_stats_container .score_span {
        font-size: 1.25rem;
    }
}

@keyframes blinkTwiceFade {
    0% {
        opacity: 1;
    }

    20% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    60% {
        opacity: 0;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/*!****************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/user/rps_squared/rps_squared.css ***!
  \****************************************************************************************/
.rps_square_popup_content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rps_square_choice {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    gap: 1rem;
    font-family: var(--ai-post-font);

    span {
        font-size: 1.25rem;
        color: var(--formatting-button-font-color);
        font-weight: 700;
        text-align: center;
    }
}

.rps_square_start_game_button {
    display: flex;
    align-items: center;
    background: hsl(292.7, 73.1%, 39.4%);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.875rem;
    box-shadow: 0 0 0.5rem rgba(186, 123, 249, 0.6);
    transition: 0.2s ease;
}

.rps_square_start_game_button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 0.5rem rgba(186, 123, 249, 0.9);
}

.rps_square_tingle_modal {
    border-radius: 1rem;
    background: linear-gradient(45deg, #b0b8c6, #d8d8da, #f0f4f7, #fafafa) !important;
    width: 30%;
    color: black;
    border: none;
}

.submit_button {
    opacity: 0;
    transform: scale(0.8);
    transition:
        opacity 0.4s ease,
        transform 0.3s ease;
    pointer-events: none;
}

.submit_button.visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.rps_square_buttons {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    justify-items: center;

    label {
        display: flex;
        flex-direction: column;
        align-items: center;
        border: 0.2rem solid var(--preview-input-tab-border-color);
        border-radius: 0.5rem;
        padding: 1rem;
        cursor: pointer;
        justify-content: end;
    }

    input[type='radio']:checked + label {
        background: linear-gradient(135deg, #8ebfc8, #eadbc1, #d59dd6);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
        border: 0.2rem solid var(--primary-accent-color);
        border-radius: 0.5rem;
    }
    input[type='radio']:checked + label .interaction_name {
        color: var(--primary-accent-color);
    }
}

.icon_button_wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    .interaction_button {
        svg {
            width: 2rem;
            height: 2rem;
            fill: currentColor;
            transition: transform 0.3s ease;
        }

        i {
            font-size: 2rem;
            color: inherit;
            transition: transform 0.3s ease;
        }
    }

    .icon-fire {
        color: #ff8c42;
    }
    .icon-earth {
        color: #a2cc0f;
    }
    .icon-water {
        color: #3fa9f5;
    }

    .icon-mage {
        color: #8c5fdf;
    }

    .icon-hulk {
        color: #4caf50;
    }

    .icon-droid {
        color: #00c853;
    }

    .icon-droid,
    .icon-hulk,
    .icon-mage {
        svg {
            width: 3rem;
            height: 3rem;
        }
    }

    .interaction_name {
        font-size: 1.15rem;
        color: #ffffff;
    }
}

.icon_button_wrapper:hover {
    svg,
    i {
        transform: scale(1.2);
    }
}

.rps_square_buttons button {
    background: transparent;
    box-shadow: none;
    border: none;
    cursor: pointer;
}

.selected_item_section {
    display: flex;
    justify-content: space-around;
    align-items: center;

    .icon_wrapper {
        display: flex;
        gap: 1rem;
        align-items: center;

        svg {
            width: 1.5rem;
            height: 1.5rem;
        }
    }

    .edit_buttton {
        padding: 0.5rem;
        border: 0.01rem solid #ffdfd3;
        border-radius: 0.5rem;
        cursor: pointer;
    }
}

.rps_square_winner_release_div {
    display: flex;
    gap: 1rem;
    padding-top: 0.75rem;
}

.rps_square_winner_release_div .versus_svg {
    height: 2rem;
    width: 2rem;
}

.with_release_button {
    align-items: flex-end;
}

.notification_actions:has(button.release_button) {
    justify-content: flex-end;
}

.rps_square_game_result_div {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-top: 0.5rem;
}
.rps_square_game_result_div .result_title_play_again_wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.rps_square_game_result_div .result_title_play_again_wrapper .rps_square_play_again_button {
    font-size: 0.8rem;
}

.rps_square_selected_choices_div {
    display: flex;
    gap: 1rem;
    align-items: center;

    .rps_square_choices_div {
        display: flex;
        gap: 0.5rem;

        .icon_button_wrapper {
            display: flex;
            flex-direction: column;
            gap: 0rem;
            align-items: center;
            .interaction_button {
                svg {
                    width: 1.5rem;
                    height: 1.5rem;
                    fill: currentColor;
                }

                i {
                    font-size: 1.5rem;
                    color: inherit;
                }
            }

            .icon-fire {
                color: #ff8c42;
            }
            .icon-earth {
                color: #a2cc0f;
            }
            .icon-water {
                color: #3fa9f5;
            }

            .icon-mage {
                color: #8c5fdf;
            }

            .icon-hulk {
                color: #4caf50;
            }

            .icon-droid {
                color: #00c853;
            }

            .icon-fire,
            .icon-earth,
            .icon-water,
            .icon-mage,
            .icon-hulk,
            .icon-droid {
                background: none;
                border: none;
            }

            .interaction_name {
                color: white;
                font-size: 0.85rem;
            }
        }

        .icon_button_wrapper:hover {
            svg,
            i {
                transform: scale(1);
            }
        }
    }
}

.rps_square_win_animation_wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.rps_square_win_animation_wrapper h1 {
    color: transparent;
    background: linear-gradient(90deg, #ffe20b, #ff41b1, #3cecff, #3eff37);
    background-clip: text;
    -webkit-background-clip: text;
    margin-bottom: 2rem;
}

.rps_square_win_animation_wrapper .rps_square_win_animation {
    display: flex;
    position: relative;
    height: 3rem;
    width: 100%;
    max-width: 20rem;
}

.rps_square_win_animation_wrapper .user_stats_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.5rem;
}

.rps_square_win_animation_wrapper .user_stats_container .user_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.rps_square_win_animation_wrapper .user_stats_container .score_span {
    font-weight: bold;
    font-size: 1.5rem;
    color: #fff;
}

.rps_square_win_animation_wrapper .user_stats_container .user_container.winner {
    color: #44d644;
}

.rps_square_win_animation_wrapper .user_stats_container .user_container.loser {
    color: red;
}

.rps_square_win_animation_wrapper .user_stats_container .user_container img {
    height: 4rem;
    width: 4rem;
    border: 0.2rem solid currentColor;
    border-radius: 50%;
}

.rps_square_win_animation_wrapper .user_stats_container .user_container .user_name {
    font-weight: bold;
}

.rps_square_win_animation_wrapper .rps_square_win_animation .winner {
    color: #44d644;
}

.rps_square_win_animation_wrapper .rps_square_win_animation .loser {
    color: red;
}

.rps_square_win_animation_wrapper .rps_square_win_animation .winner,
.rps_square_win_animation_wrapper .rps_square_win_animation .loser {
    position: absolute;
    height: 3rem;
    width: 3rem;
}

.rps_square_win_animation_wrapper .rps_square_win_animation .loser {
    right: 0;
}

.rps_square_win_animation_wrapper .rps_square_win_animation .winner.move {
    transition: transform 1.5s;
    transform: translateX(0.5rem);
}

.rps_square_win_animation_wrapper .rps_square_win_animation .loser.move {
    transition: transform 1.5s;
    transform: translateX(-2.5rem);
}

.rps_square_win_animation_wrapper .rps_square_win_animation .loser.fade {
    animation: blinkTwiceFade 2s forwards;
}

.rps_square_win_animation .icon_button_wrapper .interaction_button svg {
    width: 2.5rem !important;
    height: 2.5rem !important;
    fill: currentColor;
}

.rps_square_win_animation .icon_button_wrapper .interaction_button i {
    font-size: 2.5rem !important;
    color: inherit;
}
.rps_square_win_animation .icon_button_wrapper .interaction_name {
    font-size: 1.25rem !important;
}

.rps_squared_result_text {
    display: block;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    max-width: 20rem;
    padding: 12px 16px;
    border-radius: 12px;
    background: #1e1e2f;
    color: #f1f1f1;
    animation: popupFade 0.4s ease-out;
}

.rps_highlight {
    font-weight: bold;
    padding: 0.5px 2px;
}

.fire_text {
    color: #ff8c42;
}
.earth_text {
    color: #a2cc0f;
}
.water_text {
    color: #3fa9f5;
}

.mage_text {
    color: #8c5fdf;
}

.hulk_text {
    color: #4caf50;
}

.droid_text {
    color: #84878c;
}

.drawn_case_notification {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    max-width: 13rem;
    padding-top: 0.5rem;
}
.drawn_case_notification .rps_squared_result_text {
    display: block;
    font-size: 0.85rem;
    line-height: 1.5;
    text-align: start;
    border-radius: 12px;
    padding: 0;
    font-weight: 600;
    color: whitesmoke;
    word-break: normal;
    background: none;
    animation: popupFade 0.4s ease-out;
}

.rps_square_lost_draw_tingle_modal {
    border-radius: 1rem;
    background: linear-gradient(to bottom right, #ffe3e3, #fdf6ec, #e4f1fe) !important;
    width: 30%;
    color: black;
    border: none;
}

.lost_draw_result_pop_div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.lost_draw_result_pop_div .heading {
    font-size: 1.25rem;
    color: #ffffff;
}

.lost_draw_result_pop_div .description {
    text-align: center;
    color: var(--primary-accent-color);
}

@keyframes popupFade {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.heartbeat_overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5rem);
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.heartbeat_icon {
    font-size: 6rem;
    color: #e63946;
    background: radial-gradient(circle at 30% 30%, #ff4c4c 0%, #b71c1c 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 6px 12px rgba(0, 0, 0, 0.2);
    animation: heartbeat 0.85s ease-in-out infinite;
}

@keyframes heartbeat {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    25% {
        transform: scale(1.2);
        opacity: 0.9;
    }
    50% {
        transform: scale(1.5);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .rps_square_popup_content {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .rps_square_tingle_modal,
    .rps_square_lost_draw_tingle_modal {
        width: 100%;
        padding: 0;
    }

    .rps_square_choice {
        padding: 0;
    }

    .rps_square_game_result_div {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        padding-top: 0.5rem;
    }

    .drawn_case_notification {
        max-width: 15rem;
    }

    .rps_square_win_animation_wrapper .rps_square_win_animation .winner.move {
        transition: transform 1.5s;
        transform: translateX(3rem);
    }

    .rps_square_win_animation_wrapper .rps_square_win_animation .loser.move {
        transition: transform 1.5s;
        transform: translateX(-3rem);
    }

    .rps_square_win_animation .icon_button_wrapper .interaction_button svg {
        width: 1.75rem !important;
        height: 1.75rem !important;
        fill: currentColor;
    }

    .rps_square_win_animation .icon_button_wrapper .interaction_button i {
        font-size: 1.75rem !important;
        color: inherit;
    }
    .rps_square_win_animation .icon_button_wrapper .interaction_name {
        font-size: 1rem !important;
    }

    .victory_heading {
        font-size: 3rem;
    }
}

/*!******************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/utils/gamification/description_popup/description_popup.css ***!
  \******************************************************************************************************************/
ul.task_description_popup {
    margin: 0;
    color: white;
}

ul.task_description_popup li {
    line-height: 2rem;
    font-weight: 500;
}

ul.task_description_popup li .redirect_icon {
    cursor: pointer;
    margin-inline: 0.25rem;
}

ul.task_description_popup li i.bi-list {
    font-size: 1.5rem;
}

ul.task_description_popup li i.bi-arrows-fullscreen {
    margin-inline: 0.25rem;
}

.task_description_popup li span {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}

/*!*************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/topics/topics.css ***!
  \*************************************************************************/
/* Popup container - Reddit style */
.interests-container {
    width: 100%;
    max-width: 43.75rem;
    margin: 0 auto;
    border-radius: 0.5rem;
    box-shadow: 0rem 0.125rem 0.625rem rgba(0, 0, 0, 0.1);
    text-align: left;
    animation: fadeIn 0.3s ease-in-out;
    max-height: 100%;
    overflow-y: auto;
    padding: 1.25rem;
    position: relative;
    color: white;

    & .highlight {
        font-weight: bold;
    }
}

#interests {
    grid-area: main_area;
    height: calc(var(--vh) * 100 - 7rem);
}

@media screen and (orientation: landscape) {
    #interests {
        height: calc(var(--vh) * 100 - 3rem);
    }
}

#interests .interests-container {
    height: 100%;
}

.interests-header {
    width: var(--landscape-dynamic-width);
    display: flex;
    justify-content: center;
    background: var(--dropdown-bg-color);
    flex-direction: column;
    padding: 1rem;
    color: var(--primary-text-color);
    border-bottom: 0.2rem solid;

    & p {
        text-align: center;
    }
}
/* Popup title */
.interests-container > h2 {
    font-size: 1.8rem;
    margin: 1.25rem 0 0.625rem;
    font-weight: 600;
    text-align: center;
}

.interests-container > p {
    font-size: 1rem;
    margin: 0;
    color: white;
    text-align: center;
}

/* Category container */
.base-topic {
    margin-bottom: 1.875rem;
    padding: 0;
    text-align: left;
}

/* Category title */
.base-topic h3 {
    font-size: 1.1rem;
    margin-bottom: 0.9375rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    background: var(--quick-post-initial-div-text-color-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Sub-topic container */
.sub-topic {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    padding: 0;
}

.base-topic-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Hide the actual checkboxes */
.sub-topic input[type='checkbox'] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Style for the selectable text blocks - Reddit pill style */
.sub-topic label {
    display: inline-block;
    cursor: pointer;
    user-select: none;
    margin: 0;
    padding: 0;
}

.sub-topic label span {
    display: inline-block;
    padding: 0.5rem 1rem;
    color: var(--fg-color);
    border-radius: 0.5rem;
    font-size: 0.9rem;
    border: none;
    font-weight: 400;
    border: 0.15rem solid var(--primary-border-color);
}

/* Hover effect for text blocks */
.sub-topic label:hover span {
    transform: translateY(-0.15rem);
}

.sub-topic input[type='checkbox']:checked + span {
    color: white;
    border: 0.15rem solid var(--primary-accent-light-color);
    background: hsl(293deg 89.24% 8.4%);
}

.interests-container button {
    width: 100%;
    background: rgb(255 255 255 / 30%);
    color: #ccc;
    border: none;
    padding: 0.75rem 1.5625rem;
    font-size: 1rem;
    border-radius: 1.25rem;
    cursor: pointer;
    margin-top: 1.25rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.interests-container button.active {
    background: var(--primary-accent-color);
    color: white;
}

/*continue button for update hover */
.interests-container button.active:hover {
    background: var(--primary-accent-light-color);
}

/* Button hover */
.interests-container button:hover {
    background: var(--primary-accent-light-color);
}

/* Footer message - only show when no interests are selected */
.interests-container button:not(.active)::before {
    display: block;
    text-align: center;
    color: #ccc;
    font-size: 0.9rem;
    margin-bottom: 0.625rem;
}

.tingle-modal {
    background: transparent;
}

/* Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-1.25rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive adjustments */
@media (max-width: 48rem) {
    .interests-container {
        width: 95%;
        padding: 0.9375rem;
    }

    .sub-topic {
        gap: 0.5rem;
    }

    .sub-topic label span {
        padding: 0.375rem 0.75rem;
        font-size: 0.85rem;
    }

    .base-topic h3 {
        font-size: 1rem;
    }
}

/*!*******************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/mathracer/mathracer.css ***!
  \*******************************************************************************/
/* Color variables */
:root {
    --reports-game-card-background: linear-gradient(145deg, rgba(20, 20, 30, 0.95), rgba(10, 10, 20, 0.95));
    --reports-game-card-border: 1px solid rgba(160, 80, 255, 0.25);
    --reports-game-card-box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    --reports-game-card-hover-slected-border-color: #bfbbff;
    --reports-game-card-hover-box-shadow: 0 0 14px rgba(194, 102, 255, 0.35), 0 0 28px rgba(194, 102, 255, 0.18);
    --reports-game-card-selected-box-shadow: 0 0 18px rgba(213, 128, 255, 0.45), 0 0 32px rgba(213, 128, 255, 0.2);
    --reports-game-card-selected-background: linear-gradient(145deg, rgba(35, 20, 50, 0.98), rgba(15, 10, 25, 0.98));
    --reports-game-headers-color: #e3cbe6;
    --reports-game-context-background: rgba(77, 163, 255, 0.12);
    --reports-game-context-color: #7ec3ff;
    --reports-game-context-border: 1px solid rgba(126, 195, 255, 0.3);
    --reports-game-detail-label-color: #9aa0aa;
    --reports-game-detail-value-color: #ffffff;
    --reports-game-card-footer-border-top: 1px solid rgba(255, 255, 255, 0.08);
    --reports-game-card-footer-color: #9a9a9a;
    --reports-game-card-footer-game-created-by-color: #b0b0b0;
    --reports-game-score-property-label-player-header-time-value-answer-incorrect-background: #1a2038;
    --reports-game-score-property-label-player-header-color: #ffffff;
}
.dark {
    background-color: #222;
    color: #e6e6e6;
    border-color: #e6e6e6;
}

#mathracer {
    background-color: hsl(249deg 81.83% 2.68%);
}

.mathracer_count_down {
    position: absolute;
    width: 100%;
    height: 100%;
    color: white;
    font-size: larger;
    backdrop-filter: blur(5rem);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2rem;

    .count_down_time {
        font-size: 5rem;
        opacity: 0;
        transform: scale(0.5);
        animation: pop 0.8s ease-in-out forwards;
    }
}
@keyframes pop {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    30% {
        opacity: 1;
        transform: scale(1.2);
    }
    60% {
        transform: scale(1.4);
    }
    80% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

:root:has(#menu_expander:checked) #expanders label[for='menu_expander'],
:root:has(#about_expander:checked) #expanders label[for='about_expander'],
:root:has(#play_expander:checked) #expanders label[for='play_expander'],
:root:has(#game_report_expander:checked) #expanders label[for='game_report_expander'],
:root:has(#daily_challenge_expander:checked) #expanders label[for='daily_challenge_expander'] {
    color: var(--active-tab-bg-color);
    font-size: 1.1rem;
    box-shadow: 0px 0px 6px 0px;
    background: black;
}

#mathracer_container {
    width: 100%;
    padding: 1rem;
    background-color: hsl(249deg 81.83% 2.68%);
    border-radius: 1rem;

    .light {
        background-color: #e6e6e6;
        color: #222;
        border-color: #222;
    }

    li {
        list-style-type: none;
    }

    input[type='radio'] {
        margin-bottom: 0.625rem;
    }

    .success {
        color: lightgreen;
    }
    .failure {
        color: red;
    }
    .error {
        background-color: darkred;
    }
    .chat {
        color: var(--active-tab-bg-color);
    }

    .labelled_input {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    #create_new_game_button {
        width: 100%;
    }

    #join_game {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            'left right'
            'bottom bottom';
    }

    #ask_select_div {
        display: grid;
        margin: auto;
        width: 100%;
        grid-gap: 3vh;
        grid-template-columns: 1fr 2fr;
        grid-template-areas: 'user card';
    }

    #card_select {
        grid-area: card;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 'suit denomination';
    }

    #declare_div,
    #turn_change_div,
    #action_select_div,
    #message_div,
    #login_signup_area {
        margin: auto;
        width: 100%;
        text-align: center;
    }

    #play_area {
        display: grid;
        width: 100%;
        grid-template-columns: 1fr 4fr;
        grid-template-areas:
            'cards our_turn'
            'cards our_turn'
            'team our_turn';
    }

    /* Base container styling */
    #mathracer_container {
        width: 100%;
        margin: 1rem;

        /* Toolbar with proper nesting */
        & #tool_bar {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            width: 100%;

            & #expanders {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                width: 60%;
            }

            & #timer {
                text-align: right;
                background-color: var(--active-tab-bg-color) green;
            }
        }

        /* Main area with nested styles */
        & #mathracer_main_area {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            background-color: var(--bg-color);
            flex-grow: 100;

            /* About section */
            & #about {
                display: flex;
                justify-content: space-between;
                flex-direction: column;
                padding: 2rem;
                flex-grow: 10;

                & #about_content {
                    display: flex;
                    flex-direction: column;
                }
            }

            /* Questions section with deep nesting */
            & #questions {
                display: flex;
                justify-content: space-around;
                flex-flow: column nowrap;
                flex-grow: 10;
                height: inherit;
                padding: 0;
                min-width: 100%;
                margin-left: 0;

                & > input,
                & li.problem {
                    display: none;
                }

                /* Question item styling */
                & li.problem {
                    list-style-type: none;

                    /* Subjective question styling */
                    &.subjective_question {
                        & .problem_statement {
                            & .problem_statement_text {
                                text-align: center;
                                font-size: 1.5rem;

                                &.normal_size {
                                    font-size: 1rem;
                                }
                            }
                        }

                        & .subjective_answer {
                            & .subjective_answer_text {
                                padding: 0.2rem 0.3rem;
                                font-size: 3rem;
                                max-width: 3rem;
                            }
                        }
                    }

                    /* MCQ question styling */
                    & .mcq {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        min-width: 100%;

                        & .mcq_options {
                            display: flex;
                            flex-flow: row wrap;
                            align-items: center;
                            justify-content: space-around;
                            min-width: 100%;
                            padding: 1rem 0;

                            & > li {
                                display: flex;
                                justify-content: center;
                                flex-basis: 45%;

                                & > input {
                                    display: none;

                                    &:checked ~ label {
                                        background-color: #054000;
                                        color: var(--active-tab-bg-color);
                                    }

                                    &.selected_wrong ~ label {
                                        background-color: darkred;
                                        color: var(--active-tab-bg-color);
                                    }
                                }

                                & > label {
                                    display: flex;
                                    flex-direction: row;
                                    justify-content: center;
                                    align-items: center;
                                    text-align: center;
                                    border-radius: 3rem;
                                    background-color: var(--bg-color);
                                    margin-bottom: 0.3rem;
                                    padding-left: 0.2rem;
                                    padding-right: 0.2rem;

                                    &.marker {
                                        opacity: 0.1;
                                    }

                                    &.option_content {
                                        border: solid;
                                        background-color: var(--dull-bg);
                                        min-width: 10rem;
                                        padding: 1rem;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        /* Visual representations with nesting */
        & .visual_representation {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-flow: row wrap;
            font-size: 1.8rem;

            & .visual_representation_item {
                flex-basis: 19%;
                display: flex;
                justify-content: space-evenly;
                flex-flow: row wrap;
                min-width: 5rem;
                max-width: 6rem;
                padding: 0.3rem;

                & .visual_representation_element {
                    display: flex;
                    justify-content: center;
                }
            }

            &.visual_representation_multi {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
            }
        }

        /* Configuration styling with proper nesting */
        & .config_input {
            display: flex;
            flex-flow: row wrap;
            align-items: center;
            justify-content: flex-start;
            margin-bottom: 1rem;

            & .config {
                display: none;

                & .individual_config_input {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;

                    & > label {
                        padding-right: 1rem;
                        padding-left: 1rem;
                    }
                }
            }

            & input:checked ~ .config {
                display: flex;
                flex-direction: column;
                margin-bottom: 0.2rem;
            }

            & input:checked + label.action_select {
                padding-bottom: 1rem;
            }
        }

        /* Responsive styles with proper nesting */
        @media (orientation: portrait) {
            & .visual_representation_multi {
                flex-direction: column;
            }

            & .visual_representation {
                font-size: calc(var(--vhdynamic) * 4);
            }

            & .config {
                flex-basis: 90%;
                background-color: var(--dull-bg);
            }

            & .normal_size {
                font-size: 1rem;
            }

            & .quad_font {
                font-size: 2.8rem;
            }

            & .quad_mcq,
            & .double_font {
                font-size: 1.4rem;
            }

            & .double_mcq {
                font-size: 0.9rem;
            }
        }
    }

    .input:checked + label.easy_level,
    .input:checked + label.medium_level,
    .input:checked + label.hard_level {
        border-bottom: 0.2rem solid var(--active-tab-bg-color);
        color: var(--active-tab-bg-color);
    }

    /* State classes remain at root level */
    .dark {
        background-color: #222;
        color: #e6e6e6;
        border-color: #e6e6e6;
    }

    .light {
        background-color: #e6e6e6;
        color: #222;
        border-color: #222;
    }

    .success {
        color: lightgreen;
    }

    .failure {
        color: red;
    }

    .error {
        background-color: darkred;
    }

    .chat {
        color: var(--active-tab-bg-color);
    }

    .hidden {
        display: none !important;
    }
    .message_item:not(:last-child) {
        animation: fadeout 1s 1;
        -webkit-animation: fadeout 1s 1;
        animation-fill-mode: forwards;

        animation-delay: 60s;
        -webkit-animation-delay: 60s; /* Safari and Chrome */
        -webkit-animation-fill-mode: forwards;
    }
}

@media (max-width: 1000px) {
    * {
        max-height: 999999px;
    }
    #mathracer_container {
        #join_game {
            display: grid;
            grid-template-columns: 1fr;
            grid-gap: 1vh;
            grid-template-areas:
                'left'
                'bottom'
                'right';
        }
        /* We were trying to make the fold expander look clickable */
        .fold_expander {
            border: solid;
            background-color: #211;
            color: #ffffff;
            width: 10rem;
            border-color: #300;
        }

        input:not(:checked) + .foldable {
            display: none;
        }

        #play_area {
            display: grid;
            grid-template-columns: 1fr;
            grid-gap: 1vh;
            width: 100%;
            grid-template-areas:
                'team'
                'cards'
                'turn'
                'our_turn'
                'our_turn'
                'our_turn';
        }
    }
}

@keyframes fadeout {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        max-height: 0rem;
    }
}
@-webkit-keyframes fadeout {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        max-height: 0rem;
    }
}

#mathracer_container {
    .header {
        grid-area: header;
        text-align: center;
        margin: auto;
    }

    .main_area {
        grid-area: main_area;
    }

    .footer {
        grid-area: footer;
        margin: auto;
        font-size: x-small;
    }

    .message {
        /*	grid-area: 1/1/2/3;
	 *	*/
        grid-area: message;
        margin: auto;
    }
    #chat {
        /*	grid-area: 1/1/2/3;
	 *	*/
        grid-area: chat;
        width: 100%;
        display: grid;
        grid-gap: 5vh;
        grid-template-columns: 7fr 1fr 1fr 1fr;
        margin: auto;
    }

    #join_existing_game_div {
        grid-area: left;
        margin: auto;
    }
    #create_new_game_div {
        grid-area: right;
        margin: auto;
    }

    #team_select_div {
        grid-area: bottom;
        margin: auto;
    }

    #suit_select {
        grid-area: suit;
        margin: auto;
    }

    #user_select {
        grid-area: user;
        margin: auto;
    }
    #denomination_select {
        grid-area: denomination;
        margin: auto;
    }

    .our_team {
        grid-area: team;
        margin: auto;
    }

    .cards {
        grid-area: cards;
        margin: auto;
    }

    #our_turn_div {
        grid-area: our_turn;
        margin: auto;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 7fr 1fr;
    }

    #submit_action_button {
        grid-row: 3/4;
    }

    #chat_message {
        padding: 0.3125rem 0.3125rem 0.3125rem 1.25rem;
    }

    .hidden {
        display: none !important;
    }
}

:root {
    /* [dark-mode="on"] by default */
    --bg-color: #121212;
    --fg-color: #e6e6e6;
    --dull-bg: #000;
    --font-weight: 300;
}

:root[dark-mode='off'] {
    --bg-color: #e6e6e6;
    --fg-color: #000;
    --dull-bg: #fff;
    --font-weight: 350;
}

#mathracer_container {
    input {
        font-size: 1rem;
    }

    button {
        font-size: 1rem;
    }

    details {
        margin-bottom: 1rem;
    }

    details details {
        padding-left: 3rem;
    }

    #game_config {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
    }

    #main_menu {
        padding: 1rem;
        width: 100%;
    }

    .config_input {
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        align-items: flex-start;
        margin-bottom: 1rem;
        margin-top: 1rem;
    }

    .config_input:has(input.nonsubmitable:checked) {
        border: 0.01rem solid var(--active-tab-bg-color);
        border-radius: 1rem;
    }

    #mathracer_main_area {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 1rem;
        flex-grow: 100;
    }

    h1 {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 3rem;
        margin: 1rem;
    }

    div.config {
        display: none;
    }

    #about {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        padding: 2rem;
        flex-grow: 10;
    }

    footer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #about_content {
        display: flex;
        flex-direction: column;
    }

    #create_single_player,
    #create_multi_player {
        padding: 1rem;
        border-radius: 1rem;
    }

    label.expander {
        cursor: pointer;
        margin-top: 0.5rem;
        align-items: center;
        border: 0.01rem solid var(--attach-link-section-input-border-color);
        border-radius: 1rem;
        color: black;
        display: flex;
        flex-direction: row;
        font-size: 1rem;
        padding: 0.5rem 1rem;
        justify-content: center;
        background-color: var(--active-tab-bg-color);
        gap: 0.5rem;
    }

    .subjective_answer {
        padding: 0.2rem 1rem;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        width: 100%;
        height: 3rem;
        align-items: center;
    }

    .subjective_answer > button {
        padding: 0.2rem 0.3rem;
        font-size: 1rem;
        margin-left: 0.2rem;
        margin-right: 0.2rem;
        height: fit-content;
    }

    input.subjective_answer_text {
        padding: 0.2rem 0.3rem;
        font-size: 1rem;
        max-width: 10rem;
        border-radius: 2rem;
    }

    input[type='number'] {
        max-width: 10rem;
        padding: 0.5rem;
        font-size: 0.75rem;
        min-width: 8rem;
    }

    .individual_config_input {
        input[type='number'] {
            max-width: 4rem;
            font-size: 0.85rem;
            min-width: 3rem;
            padding: 0.3rem;
        }
    }

    input[type='radio'],
    input[type='checkbox'] {
        width: 1.25rem;
        height: 1.25rem;
        cursor: pointer;
    }

    div.mcq {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-width: 100%;
    }

    ol.mcq_options {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: space-around;
        min-width: 100%;
        padding: 1rem 0;
        gap: 0.5rem;
    }

    ol.mcq_options > li {
        display: flex;
        justify-content: center;
        flex-basis: 45%;
    }

    ol.mcq_options > li > input {
        display: none;
    }

    ol.mcq_options > li > label {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        text-align: center;
        border-radius: 3rem;
        background-color: var(--bg-color);
        margin-bottom: 0.3rem;
        padding-left: 0.2rem;
        padding-right: 0.2rem;
    }

    ol.mcq_options > li > label.marker {
        opacity: 0.1;
    }

    ol.mcq_options > li > label.option_content {
        border: solid;
        background-color: var(--dull-bg);
        min-width: 10rem;
        padding: 1rem;
        font-size: 2.5rem;
    }

    ol.mcq_options ~ button {
        padding: 0.3rem 1rem 0.1rem;
    }

    input:checked + label.action_select {
        background: var(--radio-label-wrapper-active-background-color);
        color: var(--attach-link-section-input-border-color);
        font-weight: 600;

        svg {
            color: var(--attach-link-section-input-border-color);
        }
    }

    ol.mcq_options > li > input:checked ~ label {
        background-color: #054000;
        color: var(--active-tab-bg-color);
    }

    ol.mcq_options > li > input:checked ~ label.marker {
        opacity: 0.3;
    }

    ol.mcq_options > li > input.selected_wrong ~ label {
        display: flex;
        background-color: darkred;
        color: var(--active-tab-bg-color);
    }

    #toolbar label {
        box-shadow: 0.3125rem 0.3125rem 0.3125rem var(--bg-color);
        margin-bottom: 1rem;
        background-color: var(--dull-bg);
        position: fixed;
        width: 100%;
    }

    #about label {
        box-shadow: 0.3125rem 0.3125rem 0.3125rem var(--dull-bg);
        margin-top: 1rem;
        text-align: center;
    }

    input:checked ~ div.config {
        display: flex;
        flex-direction: column;
        margin-bottom: 0.2rem;
        gap: 1rem;
        margin: 0.5rem;
        padding: 0.5rem;
        border-radius: 1rem;
        flex-basis: 90%;
    }

    .individual_config_input {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0.25rem;
    }

    #play_area {
        display: flex;
        flex-grow: 10;
        justify-content: center;
        flex-direction: column;
        min-width: 100%;
    }

    #create_game_config {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: flex-start;
    }

    .game_heading {
        font-size: 2rem;
        color: var(--active-tab-bg-color);
    }

    #create_game_config label.action_select {
        display: flex;
        flex-direction: column;
        padding: 0.5rem;
        gap: 0.5rem;
        width: 100%;
        max-height: 4.875rem;

        span {
            font-size: 1.3rem;
        }

        svg {
            width: 2.5rem;
            height: 2.5rem;
        }

        i {
            font-size: 2rem;
            font-weight: 600;
        }
    }

    .create {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        margin-top: 1rem;
        padding: 0.5rem 1rem;
        border: none;
        background: var(--primary-accent-color);
        font-size: 1.2rem;
        border-radius: 1rem;
        cursor: pointer;
        color: white;
    }

    #custom_config {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
        width: 100%;
    }

    summary {
        cursor: pointer;
    }

    input:checked + #main_content {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        min-width: 100%;
        flex-grow: 10;
        height: inherit;
        margin: 0;
    }

    .double_mcq,
    .double_font {
        font-size: 1.8rem;
    }

    .quad_mcq,
    .quad_font {
        font-size: 4rem;
    }

    .play_area_header {
        display: flex;
        justify-content: space-between;
    }

    .play_area_header .play_area_back_button {
        cursor: pointer;
    }

    #questions {
        display: flex;
        justify-content: space-around;
        flex-flow: column nowrap;
        flex-grow: 10;
        height: inherit;
        padding: 0;
        min-width: 100%;
        margin-left: 0;
        max-width: 100%;
    }

    #questions > input,
    li.problem {
        display: none;
    }

    #display_all:checked ~ #questions > li.problem,
    #display_wrong:not(:checked) ~ #questions > input:checked + li.problem {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 100%;
        flex-grow: 10;
        height: 100%;
        padding: 1rem 0;
        min-width: 100%;
        margin-left: 0;
    }

    li.correct_answer {
        border: 0.1rem solid #3e7b3e;
        border-radius: 1rem;
        margin-bottom: 1rem;
        pointer-events: none;
        user-select: none;
        .preferred {
            display: none;
        }
    }

    #expanders {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 60%;
    }

    #tool_bar {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 1rem;
    }

    #math_racer_timer {
        align-self: end;
    }

    .game_time_config {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 1rem;
        gap: 0.5rem;
    }

    .hidden {
        display: none !important;
    }

    #select_join_game:not(:checked) ~ #multi_player_join,
    #multi_player_select:not(:checked) ~ #multi_player_config,
    #menu_expander:not(:checked) ~ #main_menu,
    #about_expander:not(:checked) ~ #about,
    #play_expander:not(:checked) ~ #play_area,
    #play_expander:not(:checked) ~ #timer,
    input[name='main_area_display']:not(:checked) + *,
    input[name='play_area_display']:not(:checked) + *,
    #daily_challenge_expander:not(:checked) ~ #daily_challenges_container,
    #user_name_prompt,
    #auxilliary_options_expander:not(:checked) ~ #auxilliary_options {
        display: none;
    }

    input[name='play_area_display']:checked + #single_player_finished,
    input[name='play_area_display']:checked + #player_finished {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    input[name='play_area_display']:checked + #single_player_finished > label.expander,
    input[name='play_area_display']:checked + #single_player_finished > button,
    input[name='play_area_display']:checked + #player_finished > label.expander,
    input[name='play_area_display']:checked + #player_finished > button {
        margin: 1rem;
    }

    #arity {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        width: 100%;
        margin-bottom: 1rem;
    }

    #multi_player_game_created_expander:checked ~ #user_name_prompt:not(.hidden),
    #multi_player_game_joined_expander:checked ~ #user_name_prompt:not(.hidden) {
        display: flex;
        flex-direction: column;
    }

    .problem_statement_text {
        text-align: center;
        font-size: 1.5rem;
    }

    .visual_representation {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: row wrap;
        font-size: 1.8rem;
        padding: 1rem;
    }

    .visual_representation_item {
        display: contents;
        justify-content: space-evenly;
        min-width: 5rem;
        max-width: 6rem;
        padding: 0.3rem;
    }

    .visual_representation_element {
        display: flex;
        justify-content: center;
    }

    .visual_representation_multi {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    #join_game_url,
    #start_multi_player_game {
        width: 100%;
    }

    .strike-through {
        opacity: 0.1;
    }

    /* label.navigator.active {
        color: var(--active-tab-bg-color);
        font-size: 1.1rem;
        box-shadow: 0px 0px 6px 0px;
        background: black;
    } */

    .difficulty_levels {
        display: flex;
        flex-direction: column;
        align-items: center;

        input[type='radio']:checked + label {
            background: var(--radio-label-wrapper-active-background-color);
            color: var(--attach-link-section-input-border-color);
            font-weight: 600;
        }

        label {
            cursor: pointer;
            margin-top: 0.5rem;
            align-items: center;
            border: 0.01rem solid var(--attach-link-section-input-border-color);
            border-radius: 1rem;
            color: var(--radio-label-text-color);
            display: flex;
            font-size: 0.9rem;
            padding: 0.5rem 0.7rem;
            justify-content: center;
            background-color: var(--secondary-bg-color);
        }

        .difficulty_options_wrapper {
            display: flex;
            flex-direction: row;
            gap: 1rem;
            padding-bottom: 1rem;
        }
    }

    .config_input {
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        align-items: flex-start;
        margin-bottom: 1rem;
        margin-top: 1rem;
    }

    .config_input:has(input.nonsubmitable:checked) {
        color: #fff;
        border: 2px solid #302251; /* soft vibrant border */
        border-radius: 1rem;
        box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3); /* soft glow */
        transform: scale(1.02); /* slight pop effect */
        transition: all 0.3s ease;

        .config {
            label {
                font-weight: 600;
                color: var(--active-tab-bg-color);
            }
        }
    }

    .game_mode_chip {
        background: var(--dropdown-bg-color);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    input:checked + label.game_mode_chip {
        color: var(--attach-link-section-input-border-color);
        font-weight: 600;

        svg {
            color: var(--attach-link-section-input-border-color);
        }
    }

    .action_select {
        cursor: pointer;
        align-items: center;
        border-radius: 1rem;
        color: var(--radio-label-text-color);
        display: flex;
        font-size: 0.9rem;
        padding: 0.5rem 0.7rem;
        justify-content: center;
        background-color: var(--secondary-bg-color);
    }

    .navigator {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0.1rem 1rem;
        flex-grow: 1;
        border: 0.01rem solid transparent;
        cursor: pointer;
        background: var(--secondary-bg-color);
        border-radius: 16px;
        transition:
            background-color 0.3s,
            color 0.3s;
        margin: 0 4px;
    }

    .single_line_constraint {
        white-space: nowrap;
    }

    .sp_game_finished_menu {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        justify-content: center;
        align-items: center;

        & .play_again_button {
            cursor: pointer;
            margin-top: 0.5rem;
            align-items: center;
            border: 0.01rem solid var(--attach-link-section-input-border-color);
            border-radius: 1rem;
            color: black;
            display: flex;
            flex-direction: row;
            font-size: 1rem;
            padding: 0.5rem 1rem;
            justify-content: center;
            background-color: var(--active-tab-bg-color);
            gap: 0.5rem;
            font-family: inherit;
        }
    }

    .sp_game_finished_buttons,
    .sp_game_finished_share {
        display: flex;
        gap: 0.5rem;
        justify-content: center;
        align-items: center;
        padding-top: 0.5rem;

        & button {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            background: transparent;
            border: none;
            color: white;
            border: 0.01rem solid var(--connection-image-border-color);
            border-radius: 1rem;
            cursor: pointer;

            i {
                color: var(--active-tab-bg-color);
            }
        }
    }

    .mathracer_note {
        display: flex;
        justify-content: center;
        align-items: center;
        & p {
            font-size: 0.8rem;
            margin-bottom: 1rem;
            text-align: center;
            padding: 0.5rem;
            color: var(--primary-text-color);
            border: 0.1rem solid var(--post-border-color);
            border-radius: 1rem;
        }

        .highlight_note {
            color: yellow;
        }
    }
}

.mathracer_friend_selector {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#not_logged_in_mathracer {
    width: 50%;
    background: hsl(249deg 81.83% 2.68%);
}

@media (orientation: portrait) {
    .visual_representation_multi {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .visual_representation {
        font-size: calc(var(--vhdynamic) * 4);
    }

    .normal_size {
        font-size: 1rem;
    }

    .quad_font {
        font-size: 2.8rem;
    }

    .quad_mcq,
    .double_font {
        font-size: 1.4rem;
    }

    .double_mcq {
        font-size: 0.9rem;
    }

    #mathracer_container {
        #custom_config {
            display: grid;
            grid-template-columns: repeat(1, minmax(0, 1fr));
            gap: 0.75rem;
            width: 100%;
            padding: 0 1rem;
        }

        .game_heading {
            font-size: 1.3rem;
            color: var(--active-tab-bg-color);
        }

        .create {
            padding: 0.3rem 1rem;
            font-size: 1rem;
        }

        #expanders {
            display: grid;
            width: 100%;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1rem;
        }
    }

    #not_logged_in_mathracer {
        width: 100%;
        height: 100%;
        background: hsl(249deg 81.83% 2.68%);
    }
}

.mathracer_initial_popup {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;

    .initial_popup_input {
        display: flex;
        gap: 1rem;
        align-items: center;
        justify-content: center;

        .player_name_input {
            background: transparent;
            border: none;
            border-bottom: 0.1rem solid var(--attach-link-section-input-border-color);
            padding: 0.5rem;
            font-weight: 600;
            color: white;
        }
        .player_name_input:focus {
            outline: none;
        }
    }

    .start_game_button {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        margin-top: 1rem;
        padding: 0.4rem 0.8rem;
        border: none;
        background: var(--active-tab-bg-color);
        font-size: 1rem;
        border-radius: 1rem;
        cursor: pointer;
        color: black;
    }
}

.mathracer_confetti_content_wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
    color: var(--primary-accent-color);
    background: black;
    border-radius: 0.5rem;

    .mathracer_achievement_wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;

        .mathracer_confetti_user_profile_photo {
            width: 4rem;
            height: 4rem;
            border-radius: var(--round-image-br);
            border: solid;
            border-width: 0.2rem;
            border-color: var(--primary-border-color);
        }

        .mathracer_confetti_user_name {
            font-size: 1.2rem;
            font-weight: bold;
        }
    }

    .mathracer_confetti_text {
        font-size: 1.2rem;
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        align-items: flex-start;
        text-align: center;
        font-style: italic;
        font-family: Georgia, 'Times New Roman', Times, serif;
        color: var(--primary-text-color);
    }

    .mathracer_confetti_icon {
        background-image: var(--first-read-post-popup-trophy-icon-gradient);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        font-size: 1.5rem;
    }
}

/*!****************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/mathracer/report.css ***!
  \****************************************************************************/
/* Game Report Styles */
#game_report_container,
#sp_game_finished_report {
    .report-container {
        padding: 20px;
        max-width: 1200px;
        margin: 0 auto;
    }

    .report-header {
        text-align: center;
        margin-bottom: 30px;
    }

    .report-title {
        font-size: 2rem;
        font-weight: bold;
        color: #333;
        margin-bottom: 10px;
    }

    .report-subtitle {
        font-size: 1.1rem;
        color: #666;
    }
    /* Games Grid */
    .games-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));

        gap: 24px;
        margin-bottom: 30px;
    }

    /* Game Card */
    .game-card {
        background: var(--reports-game-card-background);
        border: var(--reports-game-card-border);
        border-radius: 18px;
        padding: 22px;
        cursor: pointer;
        transition:
            transform 0.25s ease,
            box-shadow 0.25s ease,
            border-color 0.25s ease;
        backdrop-filter: blur(10px);
        box-shadow: var(--reports-game-card-box-shadow);
        position: relative;
        overflow: hidden;
    }

    .game-card:hover {
        transform: translateY(-6px) scale(1.01);
        border-color: var(--reports-game-card-hover-slected-border-color);
        box-shadow: var(--reports-game-card-hover-box-shadow);
    }

    .game-card.selected {
        border-color: var(--reports-game-card-hover-slected-border-color);
        box-shadow: var(--reports-game-card-selected-box-shadow);
        background: var(--reports-game-card-selected-background);
    }

    /* Header */
    .game-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 18px;
    }

    /* Game ID */
    .game-id {
        font-size: 1.35rem;
        font-weight: 700;
        letter-spacing: 0.5px;
        color: var(--reports-game-headers-color);
    }

    /* Context Wrapper */
    .game-context-wrapper {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        margin-left: 5px;

        .bi-share-fill {
            color: var(--reports-game-headers-color);
            font-size: 1rem;
            transition: transform 0.2s ease;
        }

        .bi-share-fill:hover {
            transform: scale(1.15);
        }
    }

    /* Context Badge */
    .game-context {
        background: var(--reports-game-context-background);
        color: var(--reports-game-context-color);
        border: var(--reports-game-context-border);
        padding: 3px 12px;
        border-radius: 999px;
        font-size: 0.82rem;
        font-weight: 600;
        text-transform: capitalize;
        letter-spacing: 0.3px;
    }

    /* Details */
    .game-details {
        margin-bottom: 18px;
    }

    .game-detail-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        font-size: 0.92rem;
    }

    .game-detail-label {
        color: var(--reports-game-detail-label-color);
        font-weight: 500;
    }

    .game-detail-value {
        color: var(--reports-game-detail-value-color);
        font-weight: 600;
    }

    /* Footer */
    .card_footer {
        font-size: 0.82rem;
        color: var(--reports-game-card-footer-color);
        text-align: center;
        border-top: var(--reports-game-card-footer-border-top);
        padding-top: 12px;
        .game-created-by {
            color: var(--reports-game-card-footer-game-created-by-color);
            padding-top: 0.35rem;
        }
    }
    .game-created-date {
        padding-top: 0.2rem;
    }

    /* Loading and Error States */
    .loading-message {
        text-align: center;
        padding: 40px;
        font-size: 1.1rem;
        color: #666;
    }

    .error-message {
        text-align: center;
        padding: 40px;
        font-size: 1.1rem;
        color: #d32f2f;
        background: #ffebee;
        border-radius: 8px;
        margin: 20px 0;
    }

    .no-games-message {
        text-align: center;
        padding: 60px 20px;
        font-size: 1.2rem;
        color: #666;
        background: #f9f9f9;
        border-radius: 12px;
        border: 2px dashed #ddd;
    }

    /* Score Report Section */
    .score-report-section {
        margin: 15px 0 0 0;
        padding: 0;
        background: #f8f9ff;
        border-radius: 8px;
        border: 1px solid #e3f2fd;
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transition: all 0.4s ease-out;
        transform: translateY(-10px);
    }

    .score-report-section.open {
        max-height: 2000px;
        opacity: 1;
        padding: 15px;
        transform: translateY(0);
        margin: 15px 0;
    }

    .score-report-section.closing {
        max-height: 0;
        opacity: 0;
        padding: 0;
        margin: 15px 0 0 0;
        transform: translateY(-10px);
        transition: all 0.3s ease-in;
    }

    .score-report-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2px solid var(--reports-game-headers-color);
    }

    .score-report-title {
        font-size: 1rem;
        font-weight: bold;
        color: var(--reports-game-headers-color);
        margin: 0;
    }

    .close-report-btn {
        border: 1px solid;
        padding: 0.1rem 0.4rem;
        border-radius: 5rem;
        cursor: pointer;
        font-size: 0.7rem;
        transition: background 0.3s ease;
    }

    .close-report-btn:hover {
        background: #d86666;
        color: #fff;
    }

    /* Score Table */
    .score-table {
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        overflow: hidden;
        margin-top: 15px;
    }

    .score-header-row,
    .score-data-row {
        display: flex;
        border-bottom: 1px solid #e0e0e0;
    }

    .score-header-row {
        & .user_image_container {
            justify-content: center;
            width: 100%;
            padding: 0.2rem;

            & .player-profile-photo {
                height: 2rem;
                border-radius: var(--round-image-br);
            }
        }
    }

    .score-data-row {
        & .user_image_container {
            justify-content: center;
            width: 100%;
            padding: 0.2rem;

            & .player-profile-photo {
                height: 1.5rem;
                border-radius: var(--round-image-br);
            }
        }
    }

    .score-header-row:last-child,
    .score-data-row:last-child {
        border-bottom: none;
    }

    .score-property-header,
    .score-property-label {
        flex: 0 0 120px;
        padding: 12px;
        background: var(--reports-game-score-property-label-player-header-time-value-answer-incorrect-background);
        font-weight: 600;
        color: var(--reports-game-score-property-label-player-header-color);
        font-size: 0.9rem;
        border-right: 1px solid #e0e0e0;
        display: flex;
        align-items: center;
    }

    .score-property-label {
        flex-direction: column;

        & .score-player-name {
            font-size: 0.6rem;
            text-align: center;
        }
    }

    .score-player-header,
    .score-value-cell {
        flex: 1;
        padding: 12px;
        text-align: center;
        font-size: 0.9rem;
        border-right: 1px solid #e0e0e0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .score-player-header:last-child,
    .score-value-cell:last-child {
        border-right: none;
    }

    .score-player-header {
        background: var(--reports-game-score-property-label-player-header-time-value-answer-incorrect-background);
        font-weight: 600;
        color: var(--reports-game-score-property-label-player-header-color);
        font-size: 0.85rem;
    }

    .score-data-row:nth-child(even) {
        background: #fafafa;
    }

    .score-data-row:hover {
        background: #f0f8ff;
    }

    /* Score value styling */
    .score-value {
        font-weight: bold;
        color: #007bff;
    }

    .time-value {
        color: #ff9800;
        background-color: var(--reports-game-score-property-label-player-header-time-value-answer-incorrect-background);
    }

    .answers-correct {
        color: #4caf50;
    }

    .answers-incorrect {
        color: #f44336;
        background-color: var(--reports-game-score-property-label-player-header-time-value-answer-incorrect-background);
    }

    /* No Attempts Message */
    .no-attempts-message {
        text-align: center;
        padding: 40px;
        font-size: 1.1rem;
        color: #666;
        background: #f9f9f9;
        border-radius: 8px;
        border: 2px dashed #ddd;
        margin: 20px 0;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .report-container {
            padding: 15px;
        }

        .games-grid {
            grid-template-columns: 1fr;
            gap: 15px;
        }

        .game-card {
            padding: 15px;
        }

        .report-title {
            font-size: 1.5rem;
        }

        .score-report-section.open {
            padding: 15px;
        }

        .score-report-header {
            gap: 10px;
            text-align: center;
            padding: 0.5rem;
        }

        /* Adjust table layout for smaller screens */
        .score-property-header,
        .score-property-label {
            flex: 0 0 100px;
            font-size: 0.8rem;
            padding: 10px;
        }

        .score-player-header,
        .score-value-cell {
            font-size: 0.8rem;
            padding: 10px;
        }
    }

    @media (max-width: 480px) {
        .game-card-header {
            gap: 10px;
            text-align: center;
        }
        .game-id {
            font-size: 1.2rem;
        }

        .game-detail-item {
            flex-direction: column;
            gap: 4px;
        }

        .score-property-header,
        .score-property-label {
            flex: 0 0 80px;
            font-size: 0.75rem;
            padding: 8px;
        }

        .score-player-header,
        .score-value-cell {
            font-size: 0.75rem;
            padding: 8px;
        }

        .score-player-header {
            font-size: 0.7rem;
        }
    }

    /* Animation for loading */
    @keyframes pulse {
        0% {
            opacity: 0.6;
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0.6;
        }
    }

    .loading-message {
        animation: pulse 1.5s ease-in-out infinite;
    }
}

@media (min-width: 769px) {
    #game_report_container .games-grid {
        grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
        gap: 2rem;
    }

    #game_report_container .score-property-header,
    #game_report_container .score-property-label {
        flex: 0 0 10rem;
    }
}

/*!*************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/mathracer/daily_challenge.css ***!
  \*************************************************************************************/
.game-card-daily-challenge {
    background: var(--reports-game-card-background);
    border: var(--reports-game-card-border);
    border-radius: 18px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.challenge_date_div {
    text-align: center;
    font-size: 1.5rem;
    padding-bottom: 1rem;
    font-weight: 800;
}

.games-grid-daily-challenge {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.game-difficulty {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--reports-game-headers-color);
}

.game-card-daily-challenge:hover {
    transform: translateY(-2px);
    border-color: var(--reports-game-card-hover-slected-border-color);
    box-shadow: var(--reports-game-card-hover-box-shadow);
}

.game-id-div {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--reports-game-headers-color);
}

.game-card-header-daily-challenge {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.game-context-wrapper-daily-challenge {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    .bi-share-fill {
        color: var(--primary-bg-color);
    }
}

.game-id-daily-challenge {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--reports-game-headers-color);
}

.game-context-daily-challenge {
    background: var(--reports-game-context-background);
    color: var(--reports-game-context-color);
    border: var(--reports-game-context-border);
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.3px;
}

.game-card-body-daily-challenge {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Score Report Section */
.score-report-section {
    margin: 15px 0 0 0;
    padding: 0;
    background: #f8f9ff;
    border-radius: 8px;
    border: 1px solid #e3f2fd;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: all 0.4s ease-out;
    transform: translateY(-10px);
}

.score-report-section.open {
    max-height: 2000px;
    opacity: 1;
    padding: 15px;
    transform: translateY(0);
    margin: 15px 0;
}

.score-report-section.closing {
    max-height: 0;
    opacity: 0;
    padding: 0;
    margin: 15px 0 0 0;
    transform: translateY(-10px);
    transition: all 0.3s ease-in;
}

.score-report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #f0f0f0;
}

.score-report-title {
    font-size: 1rem;
    font-weight: bold;
    color: #333;
    margin: 0;
}

.score-table {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 15px;
}

.score-property-label {
    flex-direction: column;
}

.score-property-header,
.score-property-label {
    flex: 0 0 120px;
    padding: 12px;
    background: #f5f5f5;
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
    border-right: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    text-align: center;
}

.score-header-row,
.score-data-row {
    display: flex;
    border-bottom: 1px solid #e0e0e0;
}

.score-player-header,
.score-value-cell {
    flex: 1;
    padding: 12px;
    text-align: center;
    font-size: 0.9rem;
    border-right: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #007bff;
    font-weight: 600;
}

.score-player-header:last-child,
.score-value-cell:last-child {
    border-right: none;
}

.score-property-label {
    flex: 0 0 120px;
    padding: 12px;
    background: #f5f5f5;
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
    border-right: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
}

.score-data-row {
    & .user_image_container {
        justify-content: center;
        width: 100%;
        padding: 0.2rem;
    }
}

.score-value-cell {
    flex: 1;
    padding: 12px;
    text-align: center;
    font-size: 0.9rem;
    border-right: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.answers-incorrect {
    color: #f44336;
}

.score-value-cell:last-child {
    border-right: none;
}

.player-profile-photo {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--round-image-br);
}

.daily-challenge-subtitle {
    font-size: 1rem;
    color: #666;
    text-align: center;
}
/*!**************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/equizzle/style.css ***!
  \**************************************************************************/
/* ===============================
   Equizzle Container & Grid
   =============================== */
.equizzle-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
    padding: 1rem;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.equizzle-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    max-width: 30rem;
}

.equizzle-row {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.equizzle-tile {
    width: 3rem;
    height: 3rem;
    border: 0.0625rem solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: var(--dropdown-bg-color);
    border-radius: 0.4rem;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
    color: var(--primary-text-color);
    text-align: center;
}

.equizzle-tile.active-tile:focus {
    border-color: var(--active-tab-bg-color);
    box-shadow: 0 0 0.3rem var(--active-tab-bg-color);
    border-width: 0.15rem;
    outline: none;
}

.equizzle-tile.black,
.equizzle-key.black {
    background: #000;
    color: #fff;
}

.equizzle-tile.green,
.equizzle-key.green {
    background: #028900;
    color: #fff;
}

.equizzle-tile.purple,
.equizzle-key.purple {
    background: var(--primary-accent-color);
    color: #fff;
}

/* ===============================
   Winner & Loser Containers
   =============================== */
.winner_container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    font-size: 1.4rem;
    font-weight: bold;
    margin-top: 1rem;
    animation: popIn 0.4s ease;
    position: relative;
    margin-bottom: 2rem;
    animation: pop 0.6s ease-out forwards;
    flex-direction: column;
    text-align: center;
}

.trophy_icon {
    font-size: 4rem;
    background-image: var(--first-read-post-popup-trophy-icon-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    flex-shrink: 0;
    animation: bounce 1s infinite;
}

.winner_message {
    display: block;
    font-size: 1.8rem;
    font-weight: bold;
    margin-top: 1rem;
    text-shadow: 0 0 0.5rem hsl(var(--level-up-text-color) 100% 50%);
    max-width: 60%;
}

@keyframes popIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.loser_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 1rem 1.5rem;
    border-radius: 1rem;
    font-size: 1rem;
    font-weight: bold;
    margin-top: 1rem;
    animation: shake 0.4s ease;
}

.loser_icon {
    font-size: 5rem;
    background-image: linear-gradient(135deg, #ffdab9, #ffb347, #ff8c00);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    flex-shrink: 0;
}

@keyframes shake {
    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-0.3125rem);
    }

    /* -5px */
    50% {
        transform: translateX(0.3125rem);
    }

    /* 5px */
    75% {
        transform: translateX(-0.3125rem);
    }
}

/* ===============================
   Header
   =============================== */
#equizzle, 
#not_logged_in_equizzle {
    width: 100%;
    max-width: var(--landscape-dynamic-width);
    margin: 2rem auto;
    border-radius: 1rem;
    overflow: hidden;
    background: var(--primary-bg-color);
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.4);
    /* 8px 20px */
    color: var(--primary-text-color);
}

.equizzle_header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 1.5rem;
    background: var(--dropdown-bg-color);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem 1rem 0 0;
    font-weight: 600;
    font-size: 1.4rem;
    letter-spacing: 0.03125rem;
}

.equizzle_header .equizzle_logo {
    color: hsl(292.7, 73.1%, 39.4%);
}

.equizzle_header #equizzle_tutorial_button {
    cursor: pointer;
}

.equizzle_logo {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    padding: 0.6rem;
    font-size: 1.3rem;
    color: white;
    transition:
        transform 0.25s ease,
        color 0.25s ease;
}

.equizzle_logo:hover {
    transform: rotate(15deg) scale(1.1);
}

.equizzle_title {
    flex-grow: 1;
}

.game_area {
    padding: 2rem;
    text-align: center;
    background: var(--primary-bg-color);
    min-height: 12rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--secondary-text-color);
    height: 100%;
}

/* ===============================
   Keyboard
   =============================== */
.equizzle-keyboard {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--secondary-bg-color);
    border-radius: 1rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3);
    width: 35rem;
}

.equizzle-keyboard .first-row,
.equizzle-keyboard .second-row {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 0.5rem;
}

.equizzle-keyboard .second-row .equizzle-key.enter {
    grid-column: span 2;
}

.equizzle-keyboard .second-row .equizzle-key.backspace {
    grid-column: span 1;
}

.equizzle-key {
    min-height: 3.2rem;
    border-radius: 0.5rem;
    border: none;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--light-bg-color);
    color: #000;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
    text-align: center;
}

.equizzle-key:hover {
    transform: translateY(-0.125rem);
    box-shadow: 0 0.375rem 0.75rem rgba(0, 0, 0, 0.25);
}

.equizzle-key:active {
    transform: translateY(0.0625rem);
    box-shadow: inset 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
}

.equizzle-key.enter {
    background: var(--logo-color-cyan);
    color: var(--primary-text-color);
}

.equizzle-key.backspace {
    background: var(--logo-color-dark-pink);
    color: #fff;
    font-size: 1rem;
}

.equizzle-key.enter-key {
    grid-column: span 3;
}

.equizzle-key.backspace-key {
    grid-column: span 2;
}

/* ===============================
   Results area & Buttons
   =============================== */
.results_area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 2rem;
    color: var(--primary-accent-color);
    overflow: hidden;
    gap: 4rem;
    border-radius: 0 0 1rem 1rem;
    /* background: linear-gradient(115deg, hsl(186deg 100% 9.92%), hsl(293deg 79.15% 19.42%)); */
    background: linear-gradient(to bottom right, #ffe3e3, #fdf6ec, #e4f1fe);
    /* height: 100%; */
}

.buttons_div {
    display: flex;
    gap: 2rem;
}

.buttons_div button {
    padding: 0.5rem;
    font-size: 1rem;
    border: none;
    border-radius: 1rem;
    cursor: pointer;
    background: var(--primary-accent-color);
    transition:
        transform 0.2s,
        background-color 0.2s;
    display: flex;
    gap: 1rem;
    align-items: center;
    padding-right: 1rem;
}

.buttons_div button:hover {
    transform: scale(1.1);
}

.play_again, .invite_friends, .share_invite {
    /* background-color: hsl(var(--green) 70% 40%); */
    color: var(--primary-text-color);
}

/* ===============================
   Animations & Confetti
   =============================== */
@keyframes bounce {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-0.625rem);
    }

    /* -10px */
}

@keyframes pop {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.confetti {
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
}

.confetti::before,
.confetti::after {
    content: '';
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    background-color: hsl(var(--pink) 80% 60%);
    animation: confetti-fall 2s linear infinite;
    opacity: 0.8;
    top: 0;
    left: 0;
    transform: translateX(-50%);
    border-radius: 0.2rem;
}

.confetti::before {
    background-color: hsl(var(--yellow) 80% 50%);
    animation-delay: 0s;
}

.confetti::after {
    background-color: hsl(var(--green) 70% 40%);
    animation-delay: 0.5s;
}

@keyframes confetti-fall {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }

    25% {
        transform: translate(2rem, 4rem) rotate(90deg);
    }

    50% {
        transform: translate(-2rem, 8rem) rotate(180deg);
    }

    75% {
        transform: translate(3rem, 12rem) rotate(270deg);
    }

    100% {
        transform: translate(-3rem, 16rem) rotate(360deg);
        opacity: 0;
    }
}

/* ===============================
   Responsive adjustments
   =============================== */
@media (max-width: 768px) and (orientation: portrait) {
    #equizzle,
	#not_logged_in_equizzle {
        margin: 0;
        border-radius: 0;
        padding: 0;
    }
    .equizzle-grid {
        gap: 0;
    }

    .equizzle-container {
        padding: 0;
        gap: 1rem;
        justify-content: space-between;
    }

    .equizzle-row {
        padding: 1rem;
        padding-bottom: 0rem;
    }
    .game_area {
        padding: 0;
        max-height: calc(100 * var(--vh) - 10rem);
        overflow-y: auto;
    }

    .equizzle_header {
        padding: 0.5rem 1rem;
        border-radius: 0.25rem 0.25rem 0 0;
    }

    .equizzle-tile {
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
    }

    .equizzle-keyboard {
        width: 100%;
        gap: 0.75rem;
    }

    .equizzle-key {
        min-height: 2rem;
    }

    .equizzle-keyboard .first-row,
    .equizzle-keyboard .second-row {
        grid-template-columns: repeat(5, 1fr);
        gap: 0.75rem;
    }

    .winner_container {
        padding: 0;
    }

    .winner_message {
        max-width: none;
    }

    .buttons_div {
        flex-direction: column;
        width: 100%;
    }

    .buttons_div button {
        justify-content: center;
    }
}

@media (min-width: 769px) and (orientation: landscape) {
    .equizzle-keyboard {
        width: 35rem;
    }
}

.correct_answer {
    padding: 1rem;
    /* background: var(--secondary-bg-color); */
    /* font-size: 0.9rem; */
    font-size: 1rem;
    border-radius: 0.5rem;
    /* color: wheat; */
    box-shadow: 0 0 0.5rem var(--primary-accent-color);
}

.loser_message {
    text-align: center;
    font-size: 1.5rem;
}

/*TUTORIAL*/

/* Tutorial Container */
.tutorial-container {
    background: var(--primary-bg-color);
    color: var(--primary-text-color);
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.4);
    max-width: 35rem;
    margin-top: 0;
    margin: 2rem auto;
    overflow: hidden;
    font-size: 1rem;
    line-height: 1.5;
    animation: pop 0.5s ease-out;
}

/* Header */
.tutorial-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--selector-added-border-color);
    /* background: linear-gradient(
    115deg,
    hsl(186deg 100% 9.92%),
    hsl(293deg 79.15% 19.42%)
  ); */
    padding: 1rem 1.5rem;
    font-size: 1.3rem;
    font-weight: bold;
}

.tutorial-title .highlight {
    color: var(--active-tab-bg-color);
}

.tutorial-close {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--primary-text-color);
    transition: transform 0.2s;
}

.tutorial-close:hover {
    transform: scale(1.2);
    color: var(--logo-color-yellow);
}

/* Body */
.tutorial-body {
    padding: 1.5rem;
}

.rules-title {
    margin: 1rem 0 0.5rem;
    font-size: 1.1rem;
    color: var(--logo-color-cyan);
}

.rules-list {
    list-style: disc;
    padding-left: 1.2rem;
    margin-bottom: 1.5rem;
}

.rules-list li {
    margin-bottom: 0.5rem;
}

/* Examples */
.tutorial-example {
    margin: 1rem 0;
}

.example-text {
    font-size: 0.9rem;
    color: var(--secondary-text-color);
    margin-top: 0.5rem;
}

/*!***************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/mental_growth/mental_growth.css ***!
  \***************************************************************************************/
:root {
    /* Mental Growth tokens */
    --streak-orange-light: #fb923c;
    --streak-orange-dark: #f97316;
    --streak-orange-bg: rgba(249, 115, 22, 0.08);
    --streak-orange-border: rgba(249, 115, 22, 0.25);
    --streak-orange-hover-bg: rgba(249, 115, 22, 0.15);
    --streak-orange-hover-border: rgba(249, 115, 22, 0.5);
    --streak-orange-shadow: rgba(249, 115, 22, 0.08);
    --streak-orange-hover-shadow: rgba(249, 115, 22, 0.2);
    --streak-orange-pill-bg: rgba(249, 115, 22, 0.05);
    --streak-orange-pill-border: rgba(249, 115, 22, 0.15);
    --streak-orange-pill-hover-bg: rgba(249, 115, 22, 0.1);
    --streak-orange-pill-hover-border: rgba(249, 115, 22, 0.3);
    --streak-orange-flicker-shadow-1: rgba(249, 115, 22, 0.4);
    --streak-orange-flicker-shadow-2: rgba(249, 115, 22, 0.7);
    --streak-orange-pill-active-bg: rgba(249, 115, 22, 0.2);
    --streak-orange-pill-active-border: rgba(249, 115, 22, 0.6);
    --streak-orange-pill-active-shadow: rgba(249, 115, 22, 0.25);
    --violet-extra-light: #a78bfa;
    --violet-shadow-light: rgba(192, 132, 252, 0.15);
    --violet-badge-bg: rgba(139, 92, 246, 0.12);
    --violet-badge-border: rgba(139, 92, 246, 0.15);
    --violet-hover-bg-light: rgba(139, 92, 246, 0.08);
    --violet-hover-border-light: rgba(139, 92, 246, 0.3);
    --violet-hover-shadow-light: rgba(139, 92, 246, 0.1);
    --violet-active-border: rgba(139, 92, 246, 0.8);
    --violet-active-shadow: rgba(139, 92, 246, 0.15);
    --violet-custom-card-bg: rgba(139, 92, 246, 0.05);
    --violet-custom-card-hover-border: rgba(139, 92, 246, 0.6);
    --text-slate-light: #e2e8f0;
    --text-slate-extra-light: #f1f5f9;
    --breadcrumb-bg: rgba(168, 85, 247, 0.06);
    --breadcrumb-border-color: rgba(168, 85, 247, 0.6);
    --title-muted-white: rgba(255, 255, 255, 0.45);
    --card-bg-ultra-light: rgba(255, 255, 255, 0.03);
    --card-border-ultra-light: rgba(255, 255, 255, 0.06);
    --card-border-hover-light: rgba(255, 255, 255, 0.12);
    --card-border-quick-light: rgba(255, 255, 255, 0.08);
    --border-bottom-divider: rgba(255, 255, 255, 0.08);
}

.root_wrapper {
    border: 0.1rem solid var(--attach-link-section-input-border-color);
    border-radius: 1rem;
    padding: 1rem;
}

.duration_input,
.book_name_input {
    background: var(--primary-bg-color);
    outline: none;
    border: 0.2rem solid var(--primary-bg-color);
    color: var(--primary-text-color);
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    max-width: 12rem;
    border-radius: 0.5rem;
}

.duration_input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

#activity_logging_area {
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 0.0625rem solid var(--border-bottom-divider);
        padding-bottom: 0.75rem;
        margin-bottom: 1.25rem;
        width: 100%;
    }

    .header_left {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        min-width: 0;
    }

    .header_right {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }
}

@keyframes flameFlicker {
    0%,
    100% {
        transform: scale(1) translateY(0);
        filter: drop-shadow(0 0 0.125rem var(--streak-orange-flicker-shadow-1));
    }
    50% {
        transform: scale(1.08) translateY(-0.0625rem);
        filter: drop-shadow(0 0 0.3125rem var(--streak-orange-flicker-shadow-2));
    }
}

#activity_logging_area {
    .streak_badge {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        background: var(--streak-orange-bg);
        border: 0.0625rem solid var(--streak-orange-border);
        border-radius: 1.25rem;
        padding: 0.3rem 0.75rem;
        box-shadow: 0 0.125rem 0.5rem var(--streak-orange-shadow);
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        user-select: none;

        &:hover {
            background: var(--streak-orange-hover-bg);
            border-color: var(--streak-orange-hover-border);
            box-shadow: 0 0.25rem 0.9375rem var(--streak-orange-hover-shadow);
            transform: translateY(-0.0625rem);
        }
    }

    .streak_flame {
        width: 0.85rem;
        height: 0.85rem;
        flex-shrink: 0;
        animation: flameFlicker 1.8s infinite ease-in-out;
    }

    .streak_badge_text {
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--streak-orange-light);
    }

    /* Horizontal Scrollable Streaks Strip */
    .streaks_strip {
        display: flex;
        gap: 0.5rem;
        overflow-x: auto;
        white-space: nowrap;
        padding: 0.25rem 0.5rem 0.75rem 0.5rem;
        margin-bottom: 1rem;
        width: 100%;
        scrollbar-width: none;
        max-height: 6.25rem;
        opacity: 1;
        transition:
            max-height 0.3s ease,
            opacity 0.3s ease,
            margin-bottom 0.3s ease,
            padding 0.3s ease;

        &::-webkit-scrollbar {
            display: none;
        }

        &.collapsed {
            max-height: 0;
            opacity: 0;
            margin-bottom: 0;
            padding-top: 0;
            padding-bottom: 0;
            overflow: hidden;
        }
    }

    .streak_pill {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        background: var(--streak-orange-pill-bg);
        border: 0.0625rem solid var(--streak-orange-pill-border);
        border-radius: 1.25rem;
        padding: 0.3rem 0.6rem;
        flex-shrink: 0;
        font-size: 0.75rem;
        color: var(--text-slate-light);
        transition: all 0.2s ease;
        user-select: none;

        &:hover {
            background: var(--streak-orange-pill-hover-bg);
            border-color: var(--streak-orange-pill-hover-border);
            transform: translateY(-0.0625rem);
        }
    }

    .streak_pill_icon {
        font-size: 0.8rem;
    }

    .streak_pill_text {
        font-weight: 600;
    }

    .header_icon {
        font-size: 1.35rem;
        color: var(--violet-light);
        display: inline-block;
        flex-shrink: 0;
        line-height: 1;
        filter: drop-shadow(0 0.125rem 0.25rem var(--violet-shadow-light));
    }

    .header_text {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        align-items: flex-start;
        min-width: 0;
    }

    .header_title {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--primary-text-color);
        margin: 0;
        line-height: 1.2;
        white-space: nowrap;

        .purple_highlight {
            color: var(--violet-extra-light);
            background: linear-gradient(135deg, var(--violet-extra-light) 0%, var(--violet-medium) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }

    .header_subtitle {
        font-size: 0.75rem;
        color: var(--action-sheet-subtitle-color);
        margin: 0;
        line-height: 1.4;
    }

    .stay_motivated_text {
        white-space: nowrap;
    }

    @media (min-width: 50.0625rem) {
        .header {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            padding-bottom: 1rem;
            margin-bottom: 1.5rem;
        }
        .header_left {
            gap: 1rem;
        }
        .header_right {
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }
        .streak_badge {
            gap: 0.5rem;
            padding: 0.35rem 0.85rem;
        }
        .streak_flame {
            width: 1rem;
            height: 1rem;
        }
        .streak_badge_text {
            font-size: 0.8rem;
        }
        .header_icon {
            font-size: 1.6rem;
        }
        .header_text {
            gap: 0.25rem;
        }
        .header_title {
            font-size: 1.25rem;
        }
        .header_subtitle {
            font-size: 0.85rem;
        }
    }

    .log_wrapper {
        display: flex;
        gap: 1rem;
    }

    .radio_group_heading_wrapper {
        display: flex;
        flex-direction: column;
        margin-top: 1.5rem;
    }

    .log_container {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        margin-top: 1rem;
    }

    .selects_container {
        display: flex;
        flex-direction: column;
        overflow: scroll;
    }

    .logging_hierarchy {
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--violet-light);
        margin-bottom: 0.8rem;
        padding: 0.6rem 0.85rem;
        background: var(--breadcrumb-bg);
        border-radius: 0.625rem;
        border-left: 0.1875rem solid var(--breadcrumb-border-color);
        width: fit-content;
        max-width: 100%;
        box-sizing: border-box;
        white-space: normal;
        word-break: break-word;
    }
}

#activity_logging_area .streak_pill {
    cursor: pointer;
}

#activity_logging_area .streak_pill.active {
    background: var(--streak-orange-pill-active-bg);
    border-color: var(--streak-orange-pill-active-border);
    box-shadow: 0rem 0.25rem 0.75rem var(--streak-orange-pill-active-shadow);
}

.selects_container .radio_group:nth-child(2) {
    margin-left: 1rem;
}

.selects_container .radio_group:nth-child(3) {
    margin-left: 2rem;
}

.radio_group {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.radio_group label {
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.radio_group label .bi-check2 {
    padding-left: 0.5rem;
}

.radio_group label:not(:has(input:checked)) .bi-check2 {
    display: none;
}

.radio_group label:has(input:checked) {
    background: var(--radio-label-wrapper-active-background-color);
    color: var(--attach-link-section-input-border-color);
    font-weight: 600;
    padding-left: 0;
}

.show_reading_book_name_input_wrapper,
.friend_selector_container {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    align-items: center;
}

.duration_log_container {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    flex-direction: column;
}

.duration_log_container .time_label_input {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
}

.submit_button_wrapper {
    display: flex;
    justify-content: center;
}

.submit_button_wrapper button {
    width: 12rem;
}

.duration_log_container .time_div_title,
.show_reading_book_name_input_wrapper span,
.friend_selector_container span,
.selected_friend_div_wrapper span {
    color: var(--active-tab-bg-color);
}

.duration_log_container .time_string {
    font-weight: 600;
    margin-left: 0.5rem;
    color: var(--primary-text-color);
}

.duration_log_container .time_label_input {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}
.preset_times_container {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.preset_time_button {
    background: hsla(0, 0%, 100%, 0.06);
    border: 1px solid hsla(0, 0%, 100%, 0.1);
    border-radius: 2rem;
    color: var(--primary-text-color);
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    cursor: pointer;
    border: 0.1rem solid transparent;
    transition: border 0.2s ease-in-out;
}

.preset_time_button:hover {
    border: 0.1rem solid currentColor;
}

.preset_time_button.active {
    background: var(--violet-badge-bg);
    border-color: var(--violet-active-border);
    box-shadow: 0 0.25rem 0.75rem var(--violet-active-shadow);
}

.activity_logged_confetti {
    color: transparent;
    background: linear-gradient(90deg, #ffe20b, #ff41b1, #3cecff, #3eff37);
    background-clip: text;
    -webkit-background-clip: text;
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
}

.selected_friend_div_wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-size: 0.95rem;
}

.selected_friend_div_wrapper .friend_list {
    color: #fff;
    font-weight: 400;
}

.selected_friend_div_wrapper .button_wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.selected_friend_div_wrapper .button_wrapper .friend_list_update_button {
    background-color: var(--primary-accent-color);
    border: none;
    border-radius: 6px;
    padding: 0.4rem 0.9rem;
    color: #fff;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

#view_friends_activity_area {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}

.single_row_wrapper {
    background: linear-gradient(135deg, #1b1b1b 0%, #232323 100%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    padding: 10px 14px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: #dcdcdc;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.single_row_wrapper .image_name_wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.single_row_wrapper img {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    cursor: pointer;
}

.single_row_wrapper .name_activity_wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.single_row_wrapper .name_activity_wrapper .user_name {
    font-weight: 600;
}

.single_row_wrapper .name_activity_wrapper .activity_details {
    color: #aaa;
    font-size: 13px;
}

.friends_activity_list {
    padding: 0.5rem 1rem;
}

.friends_activity_list .root_activity_name {
    cursor: pointer;
}

.friends_activity_list hr {
    padding: 0.5rem;
    border-radius: 1rem;
    max-height: 20rem;
    overflow-y: scroll;
}

.kudos_sent_badge {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 14px;
    background: rgba(244, 112, 244, 0.15);
    color: #c77dff;
    font-weight: 600;
    text-align: center;
    cursor: not-allowed;
    animation: beat 2.4s infinite linear;
}

@keyframes beat {
    0% {
        opacity: 1;
        scale: 1;
    }
    50% {
        opacity: 0.7;
        scale: 0.9;
    }
    100% {
        opacity: 1;
        scale: 1;
    }
}

#activity_logging_area {
    .recent_section {
        margin-bottom: 1.5rem;
        display: flex;
        flex-direction: column;
    }

    .section_title {
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--title-muted-white);
        margin-bottom: 0.5rem;
        padding-left: 0.25rem;
    }

    .recent_strip {
        display: flex;
        gap: 0.65rem;
        overflow-x: auto;
        white-space: nowrap;
        padding: 0.25rem 0.25rem 0.65rem 0.25rem;
        scrollbar-width: none;
        width: 100%;

        &::-webkit-scrollbar {
            display: none;
        }
    }

    .recent_card {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        background: var(--card-bg-ultra-light);
        border: 0.0625rem solid var(--card-border-ultra-light);
        border-radius: 0.75rem;
        padding: 0.5rem 0.75rem;
        min-width: 9.6875rem;
        flex-shrink: 0;
        transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;

        &:hover {
            background: var(--card-border-ultra-light);
            border-color: var(--card-border-hover-light);
            transform: translateY(-0.09375rem);
        }

        &.active {
            background: var(--violet-badge-bg);
            border-color: var(--violet-active-border);
            box-shadow: 0 0.25rem 0.75rem var(--violet-active-shadow);
        }
    }

    .recent_card_left {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        min-width: 0;
    }

    .recent_card_emoji {
        font-size: 1.15rem;
        flex-shrink: 0;
    }

    .recent_card_info {
        display: flex;
        flex-direction: column;
        gap: 0.08rem;
        min-width: 0;
        align-items: flex-start;
    }

    .recent_card_name {
        font-size: 0.76rem;
        font-weight: 700;
        color: var(--primary-text-color);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .recent_card_time {
        font-size: 0.62rem;
        color: var(--action-sheet-subtitle-color);
    }

    .recent_card_right {
        display: flex;
        align-items: center;
        padding-left: 0.6rem;
    }

    .recent_card_duration {
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--violet-extra-light);
        background: var(--violet-badge-bg);
        border: 0.0625rem solid var(--violet-badge-border);
        padding: 0.18rem 0.45rem;
        border-radius: 0.375rem;
        white-space: nowrap;
    }

    .quick_section {
        margin-top: 1rem;
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        width: 100%;
    }

    .quick_grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.6rem;
        width: 100%;
    }

    .quick_card {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        padding: 0.65rem 0.8rem;
        background: var(--card-bg-ultra-light);
        border: 0.0625rem solid var(--card-border-quick-light);
        border-radius: 0.75rem;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

        &:hover {
            background: var(--violet-hover-bg-light);
            border-color: var(--violet-hover-border-light);
            transform: translateY(-0.125rem);
            box-shadow: 0 0.25rem 0.75rem var(--violet-hover-shadow-light);
        }

        &.active {
            background: var(--violet-badge-bg);
            border-color: var(--violet-active-border);
            box-shadow: 0 0.25rem 0.75rem var(--violet-active-shadow);
        }

        &.quick_card_custom {
            background: var(--violet-custom-card-bg);
            border: 0.0625rem dashed var(--violet-hover-border-light);

            &:hover {
                background: var(--violet-badge-bg);
                border-style: solid;
                border-color: var(--violet-custom-card-hover-border);
            }
        }
    }

    .quick_card_emoji {
        font-size: 1.15rem;
        flex-shrink: 0;
    }

    .quick_card_name {
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--text-slate-extra-light);
    }

    @media screen and (max-width: 768px) {
        .selects_container {
            display: flex;
            gap: 0;
            overflow: scroll;
        }

        .radio_group {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));

            label {
                font-size: 0.8rem;
            }
        }

        .duration_log_container,
        .show_reading_book_name_input_wrapper,
        .friend_selector_container {
            display: flex;
            flex-direction: column;
            align-items: start;
            padding: 0;
            gap: 0.25rem;
        }

        .duration_log_container .time_label_input {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            align-items: start;
            margin-bottom: 0.75rem;
        }
        .selects_container .radio_group:not(:first-child) {
            margin-left: 0;
        }

        .single_row_wrapper img {
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            cursor: pointer;
        }

        .kudos_button {
            font-size: 0.75rem;
            font-weight: bolder;
            padding: 0.5rem;
        }

        /* Mobile Quick Grid & Cards (Base Mobile Layout - targets short screens like iPhone SE) */
        .quick_grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.45rem;
        }
        .quick_card {
            padding: 0.55rem 0.65rem;
            gap: 0.45rem;
        }
        .quick_card_name {
            font-size: 0.76rem;
        }
        .header {
            padding-bottom: 0.5rem;
            margin-bottom: 0.25rem;
        }
        .streaks_strip {
            margin-bottom: 0;
        }
        .recent_strip {
            padding: 0.25rem;
        }
        .recent_section {
            margin-bottom: 1rem;
            margin-top: 0.75rem;
        }

        /* Tall mobile screens overrides (e.g., iPhone 14 Pro Max, height >= 50rem) */
        @media (min-height: 50rem) {
            .root_wrapper {
                min-height: calc(100 * var(--vh) - 11rem);
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                padding: 1.25rem;
                box-sizing: border-box;
            }
            .header {
                padding-bottom: 0.85rem;
                margin-bottom: 1rem;
            }
            .recent_section {
                margin-bottom: 1.5rem;
                margin-top: 1rem;
            }
            .recent_strip {
                padding: 0.4rem 0.25rem;
                gap: 0.8rem;
            }
            .recent_card {
                padding: 0.75rem 1rem;
            }
            .recent_card_name {
                font-size: 0.85rem;
            }
            .recent_card_duration {
                font-size: 0.76rem;
                padding: 0.22rem 0.55rem;
            }
            .quick_section {
                margin-top: 1.25rem;
                gap: 0.8rem;
            }
            .quick_grid {
                gap: 0.75rem;
            }
            .quick_card {
                padding: 0.95rem 1.1rem;
                gap: 0.75rem;
            }
            .quick_card_name {
                font-size: 0.92rem;
            }
            .quick_card_emoji {
                font-size: 1.3rem;
            }
            .streaks_strip {
                margin-bottom: 0.85rem;
                padding: 0.25rem 0.5rem 0.85rem 0.5rem;
            }
            .streak_pill {
                padding: 0.45rem 0.8rem;
                font-size: 0.85rem;
            }
            .streak_pill_icon {
                font-size: 0.95rem;
            }
        }
        .logging_hierarchy {
            font-size: 0.76rem;
            padding: 0.5rem 0.75rem;
        }
    }

    @media screen and (min-width: 48.0625rem) {
        /* Title size */
        .section_title {
            font-size: 0.82rem;
            margin-bottom: 0.75rem;
        }

        /* Streaks */
        .streaks_strip {
            flex-wrap: wrap;
            gap: 0.75rem;
            padding: 0.4rem 0.5rem 1rem 0.5rem;
        }
        .streak_pill {
            padding: 0.55rem 1.1rem;
            font-size: 0.88rem;
            border-radius: 1.5rem;
            flex-grow: 1;
            justify-content: center;
            max-width: calc(25% - 0.75rem);
            min-width: 10rem;
        }
        .streak_pill_icon {
            font-size: 1rem;
        }

        /* Recent Activities */
        .recent_strip {
            flex-wrap: wrap;
            gap: 0.85rem;
            padding: 0.4rem 0.25rem 1rem 0.25rem;
        }
        .recent_card {
            padding: 0.75rem 1.1rem;
            flex-grow: 1;
            min-width: 11.25rem;
            max-width: calc(33.333% - 0.85rem);
            border-radius: 0.875rem;
        }
        .recent_card_name {
            font-size: 0.92rem;
        }
        .recent_card_time {
            font-size: 0.74rem;
        }
        .recent_card_duration {
            font-size: 0.8rem;
            padding: 0.25rem 0.6rem;
        }
        .recent_card_emoji {
            font-size: 1.3rem;
        }

        /* Quick Activities */
        .quick_grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.85rem;
        }
        .quick_card {
            padding: 0.9rem 1.2rem;
            gap: 0.75rem;
            border-radius: 0.875rem;
        }
        .quick_card_emoji {
            font-size: 1.35rem;
        }
        .quick_card_name {
            font-size: 0.92rem;
        }
    }
}

/*!*****************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/posts/polls/polls.css ***!
  \*****************************************************************************/
/* ---------------- Container ---------------- */

.create_poll_container {
    width: 100%;
    border-radius: 12px;
    padding: 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

/* ---------------- Question ---------------- */

.poll_question_wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.poll_question_title {
    font-size: 0.875rem;
}

.poll_question_textarea {
    width: 100%;
    min-height: 72px;
    resize: vertical;
    padding: 10px 12px;
    border-radius: 8px;
    border: 0.01rem solid #2a2a2a;
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
    outline: none;
    background: transparent;
}

/* ---------------- Options ---------------- */

.poll_options_container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.poll_option_wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 0.5rem;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    background: #0f0f0f;
    border: 1px solid #1f1f1f;
}

.poll_option_input {
    width: 100%;
    background: transparent;
    outline: none;
    border: none;
    color: #fff;
    font-size: 0.875rem;
}

.poll_option_remove_btn {
    color: var(--primary-accent-color);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    margin-right: 0.5rem;
}

/* ---------------- Add Option ---------------- */

.poll_add_option_btn {
    align-self: flex-start;
    border: 0.01rem dashed #3a3a3a;
    background: transparent;
    color: var(--primary-accent-color);
    border-radius: 1.35rem;
    padding: 0.375rem 0.875rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 700;
}

.poll_add_option_btn:hover {
    background: #fff;
}
/* ---------------- Expiry ---------------- */

.poll_expiry_container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 1rem 0;
}

.poll_expiry_container label {
    font-size: 0.875rem;
}

.poll_expiry_input {
    width: fit-content;
    padding: 6px 10px;
    border-radius: 0.4rem;
    border: 0.01rem solid #2a2a2a;
    color: #fff;
    font-size: 0.875rem;
    outline: none;
    background: transparent;
}

/* ---------------- Actions ---------------- */

.poll_actions_container {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 6px;
}

.poll_cancel_btn {
    background: transparent;
    border: 0.01rem solid #2a2a2a;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    padding: 0.5rem 0.875rem;
    font-weight: 500;
    color: #666;
    cursor: pointer;
}

.poll_create_btn {
    background: var(--primary-accent-color);
    box-shadow: 0 0 0 1px rgba(155, 92, 255, 0.3);
    border: none;
    padding: 0.5rem 0.875rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
}

.poll_create_btn:disabled {
    background: #c7c7c7;
    cursor: not-allowed;
}

.poll_display_wrapper {
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 1rem;
    border: 0.01rem solid var(--post-text-area-border-color);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.poll_display_wrapper > .poll_icons_wrapper {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    gap: 0.5rem;
}

.poll_icons_wrapper > .poll_edit_icon {
    cursor: pointer;
    color: #888;
}

.poll_icons_wrapper > .poll_delete_icon {
    cursor: pointer;
    color: red;
}

.poll_icons_wrapper > .poll_edit_icon:hover,
.poll_icons_wrapper > .poll_delete_icon:hover {
    font-size: 1.1rem;
}
.poll_display_question {
    font-size: 1rem;
}

.poll_display_options_wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.poll_display_option {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    background: #0f0f0f;
    border: 0.01rem solid #2a2a2a;
}

.poll_display_option:hover {
    background: #737171;
    color: #ffffff;
}

.poll_votes_days_left_wrapper {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.85rem;
    font-style: italic;
    font-weight: 600;
}

.poll_option_row {
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
    margin-bottom: 0.5rem;
    background: #f1f1f1;
    color: #0f0f0f;
    cursor: pointer;
}

.poll_option_fill {
    position: absolute;
    inset: 0;
    background: #4f8cff;
    opacity: 0.2;
    width: 0%;
    transition: width 0.4s ease;
}

.poll_option_content {
    position: relative;
    z-index: 1;
    padding: 0.625rem 0.75rem;
    display: flex;
    justify-content: space-between;
    font-weight: 500;
}

.poll_option_clickable:hover {
    background: #e8eefc;
}

.poll_show_votes_wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.poll_view_votes_button {
    color: var(--add-chat-icon-color);
    font-weight: 600;
    cursor: pointer;
}

.voters_list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.voter_profile_pic {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: var(--round-image-br);
    border: 0.2rem solid var(--primary-border-color);
}

.option_block {
    margin-bottom: 1.25rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    padding: 0.875rem;
}

.option_header {
    display: flex;
    gap: 1rem;
    align-items: center;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.option_text {
    color: var(--primary-accent-color);
}

.vote_count {
    font-size: 0.75rem;
    opacity: 0.7;
}

.voter_row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 6px 0;
}

/*!*************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/hiring/talent_pool_update.css ***!
  \*************************************************************************************/
:root {
    --tp-accent-glow: rgba(60, 236, 255, 0.2);
    --tp-glass-bg: rgba(255, 255, 255, 0.03);
    --tp-glass-border: rgba(255, 255, 255, 0.08);
}

#talent_pool {
    grid-area: main_area;
    overflow: scroll;
    max-height: calc(100 * var(--vh) - 3.5rem);
    margin: 0rem auto;
}

.career_profile_form {
    display: flex;
    flex-direction: column;
    gap: 0.9375rem;
    padding: 1.25rem;
    max-width: 37.5rem;
    margin: 0;
}

.career_profile_form h2 {
    margin-bottom: 1.25rem;
}

/* Custom group classes to avoid inheriting display: none from global .form__group */
.tp_group {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
    margin-bottom: 1.25rem;
    width: 100%;
}

.tp_label {
    color: var(--primary-text-color, #ffffff);
    font-size: 1.1rem;
    font-weight: 500;
    display: block;
    margin-bottom: 0.9375rem;
    text-align: center;
}

.career_profile_form .form__field {
    background: var(--primary-bg-color, #000000);
    color: var(--primary-text-color, #ffffff);
    border: 0.0625rem solid var(--post-dropdown-border-color, #333333);
    padding: 0.5rem;
    border-radius: 0.25rem;
    width: 100%;
    color-scheme: dark;
}

.talent_pool_swiper {
    width: 100%;
    min-height: 15.625rem;
}

.talent_pool_swiper .swiper-slide {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.25rem 2.5rem;
    box-sizing: border-box;
}

.talent_pool_swiper .swiper-button-next,
.talent_pool_swiper .swiper-button-prev,
.talent_pool_swiper .swiper-button-next::after,
.talent_pool_swiper .swiper-button-prev::after {
    color: #ffffff;
    transform: scale(0.7);
    opacity: 0.8;
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after,
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
    font-size: 1.25rem;
}

.talent_pool_swiper .swiper-button-next,
.talent_pool_swiper .swiper-button-prev {
    display: flex;
    z-index: 9999;
}

.talent_pool_swiper .swiper-button-next {
    right: 0.3125rem;
}

.talent_pool_swiper .swiper-button-prev {
    left: 0.3125rem;
}

.talent_pool_swiper .swiper-button-next:hover,
.talent_pool_swiper .swiper-button-prev:hover {
    opacity: 1;
}

.talent_pool_details_swiper .swiper-pagination .swiper-pagination-bullet {
    background: #ffffff;
}

.talent_pool_details_swiper .swiper-pagination .swiper-pagination-bullet-active {
    background: var(--primary-accent-color);
}

.talent_pool_swiper .swiper-button-next,
.talent_pool_swiper .swiper-button-prev {
    color: var(--primary-accent-color);
    transform: scale(0.7);
    opacity: 0.8;
}

.talent_pool_swiper .swiper-button-next:hover,
.talent_pool_swiper .swiper-button-prev:hover {
    opacity: 1;
}

.talent_pool_inner_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    margin: 0 auto;
    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(0.625rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tp_header {
    margin-bottom: 2rem;
}

.tp_header h2 {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #fff 0%, var(--primary-accent-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.03125rem;
}

.tp_badge {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--primary-accent-color);
}

.tp_subtitle {
    color: var(--secondary_text_color, #888);
    font-size: 1.05rem;
    max-width: 31.25rem;
    margin: 0 auto;
    line-height: 1.5;
}

.tp_upload_group {
    background: var(--tp-glass-bg);
    border-radius: 1rem;
    padding: 2rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tp_upload_group:hover {
    transform: translateY(-0.125rem);
    box-shadow:
        0 0.9375rem 2.5rem rgba(0, 0, 0, 0.3),
        0 0 1.25rem var(--tp-accent-glow);
}

.custom_file_upload {
    position: relative;
    width: 100%;
    margin-top: 1rem;
}

.hidden_file_input {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.upload_ui {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    border: 0.125rem dashed var(--tp-glass-border);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.01);
    transition: all 0.3s ease;
    text-align: center;
}

.upload_ui i {
    font-size: 3rem;
    color: var(--primary-accent-color);
    margin-bottom: 1rem;
    transition: transform 0.3s ease;
}

.upload_ui span {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #eee;
}

.upload_ui small {
    color: #666;
    font-size: 0.85rem;
}

.custom_file_upload:hover .upload_ui {
    border-color: var(--primary-accent-color);
    background: rgba(60, 236, 255, 0.05);
}

.custom_file_upload:hover .upload_ui i {
    transform: translateY(-0.3125rem);
}

.upload_ui.file_selected {
    border-style: solid;
    border-color: var(--primary-accent-color);
    background: rgba(60, 236, 255, 0.08);
}

.resume_status_info {
    display: flex;
	flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #ffffff;
    justify-content: center;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0.5rem;
}

.preferences_list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    width: 100%;
}

.preferences_list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.8rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--tp-glass-border);
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    transition: background 0.3s ease;
    justify-content: space-between;
}

.preferences_list li .icon_title_wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 17rem;
}

.preferences_list li:hover {
    background: rgba(255, 255, 255, 0.04);
}

.preferences_list li i {
    color: var(--primary-accent-color);
    font-size: 0.95rem;
    width: 1.25rem;
    display: flex;
    justify-content: center;
}

.preferences_list li strong {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 6.5rem;
}

.preferences_list li span.val {
    color: #fff;
    font-weight: 500;
    font-size: 0.95rem;
}

.preferences_list_footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #555;
}

.resume_status_info span {
    font-weight: 600;
}

.resume_status_info i {
    font-size: 1rem;
}

.talent_pool_swiper {
    padding: 1.25rem 0 3.125rem 0;
}

.talent_pool_swiper .tp_group {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.talent_pool_swiper .form__field {
    background: rgba(255, 255, 255, 0.05);
    border: 0.0625rem solid var(--tp-glass-border);
    padding: 0.75rem 1rem;
    font-size: 1.1rem;
    transition: all 0.2s ease;
}

.talent_pool_swiper .form__field:focus {
    border-color: var(--primary-accent-color);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0.9375rem var(--tp-accent-glow);
    outline: none;
}

.tp_submit_button {
    margin-top: 0.8rem;
    gap: 0.5rem;
}

.career_profile_popup_content {
    background: var(--primary-bg-color, #000);
    border-radius: 1.25rem;
    padding: 0.625rem;
    width: 100%;
    max-width: 31.25rem;
    margin: 0 auto;
}

.talent_pool_details_swiper {
    width: 100%;
    padding: 1.875rem 0 3.75rem 0;
}

.talent_pool_details_swiper .swiper-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 2.5rem;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.talent_pool_details_swiper .swiper-slide-active {
    opacity: 1;
}

.slide_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 1rem;
    text-align: center;
    padding: 1rem 0;
}

.slide_icon {
    width: 4rem;
    height: 4rem;
    background: rgba(60, 236, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.0625rem solid rgba(60, 236, 255, 0.2);
    box-shadow: 0 0 1.25rem rgba(60, 236, 255, 0.1);
    animation: pulseIcon 2s infinite;
}

@keyframes pulseIcon {
    0% {
        box-shadow: 0 0 0 0 rgba(60, 236, 255, 0.4);
    }
    70% {
        box-shadow: 0 0 0 0.9375rem rgba(60, 236, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(60, 236, 255, 0);
    }
}

.slide_icon i {
    font-size: 2rem;
    color: var(--tp-accent);
}

.popup_group {
    width: 100%;
    align-items: center;
}

.popup_group .form__field {
    text-align: center;
    font-size: 1rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    max-width: 15rem;
}

.final_slide {
    gap: 2.1875rem;
}

.consent_card {
    background: rgba(255, 255, 255, 0.03);
    border: 0.0625rem solid var(--tp-glass-border);
    border-radius: 1rem;
    padding: 1.25rem;
    width: 90%;
    transition: all 0.3s ease;
}

.consent_card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(60, 236, 255, 0.3);
}

.custom_checkbox_container {
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 2.8125rem;
    cursor: pointer;
    font-size: 1.05rem;
    user-select: none;
    color: #ddd;
    line-height: 1.4;
    text-align: left;
}

.custom_checkbox_container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 1.25rem;
    width: 1.25rem;
    background-color: rgba(255, 255, 255, 0.1);
    border: 0.125rem solid var(--tp-glass-border);
    border-radius: 0.5rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom_checkbox_container:hover input ~ .checkmark {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: var(--primary-accent-color);
}

.custom_checkbox_container input:checked ~ .checkmark {
    background-color: var(--primary-accent-color);
    border-color: var(--primary-accent-color);
    box-shadow: 0 0 0.9375rem var(--tp-accent-glow);
}

.checkmark:after {
    content: '';
    position: absolute;
    display: none;
    left: 0.3rem;
    width: 0.45rem;
    height: 0.85rem;
    border: solid white;
    border-width: 0 0.1875rem 0.1875rem 0;
    transform: rotate(45deg);
}

.custom_checkbox_container input:checked ~ .checkmark:after {
    display: block;
}

@media (orientation: portrait) {
    .tp_header {
        margin-bottom: 1rem;
        text-align: center;
    }

    .tp_header h2 {
        font-size: 1.5rem;
    }

    .tp_header p {
        font-size: 0.9rem;
    }

    .tp_badge {
        font-size: 0.75rem;
    }

    .upload_ui {
        padding: 2rem 1rem;
    }

    .tp_upload_group {
        padding: 1rem;
    }

    .talent_pool_inner_container {
        padding: 1rem;
    }

    .career_profile_form {
        padding: 0;
    }

    .preferences_list li .icon_title_wrapper {
        max-width: 10rem;
    }

    .preferences_list li strong {
        font-size: 0.7rem;
    }

    .preferences_list li span.val  {
        font-size: 0.8rem;
    }
}

.tp_note {
    font-size: 0.8rem;
    color: var(--secondary_text_color, #888);
    margin-top: 0.5rem;
    font-style: italic;
    opacity: 0.8;
}

/*!***************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/wordnet/wordnet.css ***!
  \***************************************************************************/
#wordnet_area {
    grid-area: main_area;
    max-height: calc(100 * var(--vh) - 1rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    overflow: hidden;
    margin-top: 1rem;
    margin-right: 1rem;
    background: linear-gradient(135deg, #000000, #191919, #1f1e1e);
    font-family: 'Nunito', sans-serif;
}

.landing_page_wordnet {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100dvh;
    gap: 1rem;
    padding: 1rem;
    border-radius: 0.75rem;
}

.landing_page_wordnet > .heading {
    font-size: 3rem;
    color: var(--primary-text-color);
}

.landing_page_wordnet > .tag_line {
    font-size: 1rem;
    color: var(--primary-text-color);
    text-align: center;
    max-width: 600px;
}

.landing_page_wordnet > button {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.grade_list {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.grade_options > label {
    align-items: center;
    background-color: var(--secondary-bg-color);
    border: 0.01rem solid var(--attach-link-section-input-border-color);
    border-radius: 1rem;
    color: var(--radio-label-text-color);
    cursor: pointer;
    display: flex;
    font-size: 0.9rem;
    justify-content: center;
    margin-top: 0.5rem;
    padding: 0.5rem 0.7rem;
}

.grade_options > input[type='radio']:checked + label {
    background: var(--radio-label-wrapper-active-background-color);
    color: var(--attach-link-section-input-border-color);
    font-weight: 600;
}

.hidden {
    display: none;
}

.wordnet_round_count_input {
    display: flex;
    gap: 1rem;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.wordnet_round_count_input > input {
    padding: 0.5rem;
    color: white;
    background: transparent;
    border: 0.01rem solid var(--attach-link-section-input-border-color);
    border-radius: 0.5rem;
}

.wordnet_game {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 1rem;
    padding: 2rem;
    text-align: center;
    background: radial-gradient(
        circle at center,
        rgba(124, 58, 237, 0.08),
        transparent 60%
    );
}

.options_grid {
    display: grid;
    grid-template-columns: repeat(2, 180px);
    gap: 1.25rem;
    justify-content: center;
    margin-top: 1.875rem;
    animation: bounceIn 0.4s ease;
}

.options_grid.disabled {
    pointer-events: none;
}

.word_chip {
    align-items: center;
    background-color: var(--secondary-bg-color);
    border: 0.01rem solid var(--attach-link-section-input-border-color);
    border-radius: 1rem;
    color: var(--radio-label-text-color);
    cursor: pointer;
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
    padding: 0.7rem 0.5rem;
}

.word_chip:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.75rem 1.5625rem rgba(0,0,0,0.25)
}

.word_chip.selected {
    background: var(--radio-label-wrapper-active-background-color);
    color: var(--attach-link-section-input-border-color);
    font-weight: 600;
}

.word_chip.correct {
    background: green;
    border-color: green;
    color: white;
}

.word_chip.wrong {
    background: #9b1212;
    border-color: #9b1212;
    color: white;
}

.thank_you_card_with_score {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    padding: 2rem;
    animation: fadeInScale 0.5s ease-out;
}

.result_content {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2rem;
    padding: 3rem;
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.result_icon_wrapper {
    font-size: 5rem;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.2));
    animation: bounce 2s infinite ease-in-out;
}

.result_title {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(to right, #fff, #aaa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -1px;
}

.score_display {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1rem 0;
}

.score_value {
    font-size: 4.5rem;
    font-weight: 900;
    line-height: 1;
    color: var(--attach-link-section-input-border-color);
}

.score_value span {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 400;
}

.score_label {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.5rem;
}

.result_message {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    max-width: 300px;
    line-height: 1.4;
}

.result_actions {
    margin-top: 1rem;
    width: 100%;
}

.play_again_btn {
    width: 100%;
    padding: 1rem 2rem;
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: 1rem;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.play_again_btn:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.game_footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding-top: 1rem;
}

.progress_bar_bg {
    width: 100%;
    height: 0.75rem;
    background-color: #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    margin: 20px 0;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}

.progress_bar_fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #4caf50, #81c784);
    border-radius: 0.625rem;
    transition: width 0.5s ease-in-out;
    box-shadow: 0 1px 5px rgba(76, 175, 80, 0.4);
}

@keyframes bounceIn {
    0% { transform: translateY(20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@media (orientation: portrait) {

    #wordnet_area {
        margin-right: 0;
    }
    
    .grade_list {
        display: grid;
        grid-template-columns: repeat(2, 180px);
        gap: 1.5rem;
        justify-content: center;
        margin-top: 1rem;
    }

    .wordnet_round_count_input > input {
        font-size: 1rem;
    }
}

/*!*******************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/utils/loader/loader.css ***!
  \*******************************************************************************/
.loader_overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.loader_message {
    color: white;
    font-size: 1.1rem;
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    font-family: 'Inter', sans-serif;
    animation: fadeIn 0.5s ease-out;
    margin-top: 1rem;
}

/* Gradient ring */
.outer_layer {
    background-image: linear-gradient(rgb(186, 66, 255) 35%, rgb(0, 225, 255));
    width: 100px;
    height: 100px;
    animation: spin 1s linear infinite;
    text-align: center;
    border-radius: 50px;
    filter: blur(1px);
    box-shadow:
        0px -5px 20px 0px rgb(186, 66, 255),
        0px 5px 20px 0px rgb(0, 225, 255);
}

.spinner_circle {
    background-color: rgb(36, 36, 36);
    width: 100px;
    height: 100px;
    border-radius: 50px;
    filter: blur(10px);
}

/* Animations */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/*!***********************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/leaderboard/leaderboard.css ***!
  \***********************************************************************************/
:root {
    /* Color Palette */
    --leaderboard-white: #ffffff;
    --leaderboard-yellow: #ffe20b;
    --leaderboard-pink: #ff7cc9;
    --leaderboard-cyan: #3cecff;
    --leaderboard-muted-fg: #8892b0;
    --leaderboard-danger: #ff6b6b;
    --leaderboard-light-fg: #e2e8f0;
    --leaderboard-dark-bg: #111111;
    --leaderboard-tab-color: #a0aec0;
    --leaderboard-stats-label-color: #718096;
    --leaderboard-dark-gray: #4a5568;
    --leaderboard-success: #4ade80;
    --leaderboard-charcoal: #111111;

    /* Chime Colors */
    --leaderboard-chime-green-light: #d4ff80;
    --leaderboard-chime-green: #a6ff4d;

    /* Alpha/RGBA overlays */
    --leaderboard-white-2: rgba(255, 255, 255, 0.02);
    --leaderboard-white-3: rgba(255, 255, 255, 0.03);
    --leaderboard-white-5: rgba(255, 255, 255, 0.05);
    --leaderboard-white-6: rgba(255, 255, 255, 0.06);
    --leaderboard-white-8: rgba(255, 255, 255, 0.08);
    --leaderboard-white-10: rgba(255, 255, 255, 0.1);
    --leaderboard-black-40: rgba(0, 0, 0, 0.4);
    --leaderboard-black-25: rgba(0, 0, 0, 0.25);
    --leaderboard-black-30: rgba(0, 0, 0, 0.3);

    /* Specific overrides/combos */
    --leaderboard-danger-20: rgba(255, 107, 107, 0.2);
    --leaderboard-danger-10: rgba(255, 107, 107, 0.1);
    --leaderboard-danger-25: rgba(255, 107, 107, 0.25);
    --leaderboard-yellow-pink-cyan: linear-gradient(90deg, var(--leaderboard-yellow), var(--leaderboard-pink), var(--leaderboard-cyan));
    --leaderboard-logo-glow: rgba(255, 124, 201, 0.12);
    --leaderboard-chime-glow: rgba(166, 255, 77, 0.15);
    --leaderboard-shadow-tabs: rgba(0, 0, 0, 0.15);
    --leaderboard-gradient-dark-overlay: rgba(17, 17, 17, 0.95);

    /* Medal Colors */
    --leaderboard-medal-gold: #ffd700;
    --leaderboard-medal-silver: #c0c0c0;
    --leaderboard-medal-bronze: #cd7f32;
    --leaderboard-medal-text: #000000;
}

#leaderboard {
    grid-area: main_area;
    overflow-y: auto;
    padding: 1.5rem;
    color: var(--leaderboard-white);
    font-family: 'Inter', sans-serif;
}

#leaderboard,
.rps_tab_content_container,
#rock_paper_scissors_area {
    .stats_group {
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }

    .group_bullet {
        display: inline;
    }

    .tabs {
        display: flex;
        gap: 0.75rem;
        background: var(--leaderboard-white-3);
        padding: 0.35rem;
        border-radius: 2rem;
        border: 0.0625rem solid var(--leaderboard-white-5);
        width: fit-content;
        margin: 0 auto 0.5rem auto;
        backdrop-filter: blur(0.625rem);
    }

    .tab_btn {
        background: transparent;
        border: 0.0625rem solid transparent;
        color: var(--leaderboard-tab-color);
        font-family: inherit;
        font-size: 0.95rem;
        font-weight: 600;
        padding: 0.6rem 1.25rem;
        border-radius: 1.5rem;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        display: flex;
        align-items: center;
        gap: 0.5rem;

        &:hover {
            color: var(--leaderboard-white);
            background: var(--leaderboard-white-5);
        }

        &.active {
            color: var(--leaderboard-white);
            background: var(--leaderboard-white-10);
            box-shadow: 0 0.25rem 0.75rem var(--leaderboard-shadow-tabs);
            border-color: var(--leaderboard-white-8);
        }

        &:focus {
            outline: none;
        }
    }

    .loading,
    .error,
    .empty {
        text-align: center;
        padding: 3rem;
        font-size: 1.2rem;
        color: var(--leaderboard-muted-fg);
        background: var(--leaderboard-white-2);
        border-radius: 1rem;
        border: 0.0625rem solid var(--leaderboard-white-5);
        backdrop-filter: blur(0.625rem);
    }

    .error {
        color: var(--leaderboard-danger);
        border-color: var(--leaderboard-danger-20);
    }

    .participation_notice {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem 1.25rem;
        background: linear-gradient(135deg, var(--leaderboard-danger-10) 0%, var(--leaderboard-white-2) 100%);
        border: 0.0625rem solid var(--leaderboard-danger-25);
        border-radius: 1rem;
        color: var(--leaderboard-light-fg);
        margin-bottom: 0.75rem;
        font-size: 0.95rem;
        line-height: 1.4;
        backdrop-filter: blur(0.625rem);
    }

    .notice_icon {
        font-size: 1.5rem;
        color: var(--leaderboard-danger);
        flex-shrink: 0;
        display: flex;
        align-items: center;
    }

    .notice_text {
        flex-grow: 1;
    }

    .notice_btn {
        background: linear-gradient(90deg, var(--leaderboard-pink), var(--leaderboard-cyan));
        border: none;
        color: var(--leaderboard-charcoal);
        font-weight: 700;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap;

        &:hover {
            opacity: 0.9;
            transform: translateY(-0.0625rem);
        }
    }

    .inner_container {
        max-width: 55rem;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .header_grid {
        display: grid;
        grid-template-columns: 1fr 17.5rem;
        gap: 2rem;
        align-items: center;
        margin-bottom: 0.5rem;
    }

    .header_left {
        display: flex;
        align-items: center;
        gap: 1.5rem;
    }

    .game_logo {
        width: 6.2rem;
        height: 6.2rem;
        border-radius: 50%;
        background: radial-gradient(circle, var(--leaderboard-white-3) 0%, var(--leaderboard-black-40) 100%);
        border: 0.1875rem solid transparent;
        background-image: linear-gradient(var(--leaderboard-gradient-dark-overlay), var(--leaderboard-gradient-dark-overlay)), var(--leaderboard-yellow-pink-cyan);
        background-origin: border-box;
        background-clip: padding-box, border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 1.5625rem var(--leaderboard-logo-glow);
        flex-shrink: 0;
        position: relative;

        &.chime_logo {
            box-shadow: 0 0 1.5625rem var(--leaderboard-chime-glow);
            background-image:
                linear-gradient(var(--leaderboard-gradient-dark-overlay), var(--leaderboard-gradient-dark-overlay)),
                linear-gradient(135deg, var(--leaderboard-chime-green-light), var(--leaderboard-chime-green));

            svg {
                width: 100%;
                height: 100%;
            }
        }
    }

    .game_logo_icon {
        position: absolute;
        width: 1.75rem;
        height: 1.75rem;
    }

    .game_logo_rock {
        top: 20%;
        left: 20%;
        color: var(--leaderboard-yellow);
        transform: rotate(-30deg);
    }

    .game_logo_paper {
        top: 20%;
        left: 55%;
        color: var(--leaderboard-pink);
        transform: rotate(30deg);
    }

    .game_logo_scissors {
        top: 52%;
        left: 37.5%;
        color: var(--leaderboard-cyan);
        transform: rotate(180deg);
    }

    .fallback_emoji {
        font-size: 2rem;
    }

    .title_container {
        flex-grow: 1;
    }

    .title {
        font-size: 2.1rem;
        font-weight: 800;
        margin: 0 0 0.5rem 0;
        background: var(--leaderboard-yellow-pink-cyan);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        letter-spacing: -0.02em;
    }

    .description {
        font-size: 1rem;
        line-height: 1.45;
        color: var(--leaderboard-tab-color);
        margin: 0;
    }

    .personal_card {
        background: var(--leaderboard-white-2);
        border: 0.0625rem solid var(--leaderboard-white-6);
        border-radius: 1rem;
        padding: 1.25rem;
        box-shadow: 0 0.5rem 2rem var(--leaderboard-black-25);
        backdrop-filter: blur(0.625rem);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .personal_card_title {
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--leaderboard-stats-label-color);
        margin-bottom: 0.35rem;
    }

    .personal_card_value {
        font-size: 2.3rem;
        font-weight: 800;
        line-height: 1.1;
        background: linear-gradient(135deg, var(--leaderboard-yellow), var(--leaderboard-pink));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .personal_card_label {
        font-size: 0.8rem;
        color: var(--leaderboard-stats-label-color);
        margin-bottom: 0.85rem;
    }

    .personal_card_stats {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        width: 100%;
        border-top: 0.0625rem solid var(--leaderboard-white-5);
        padding-top: 0.75rem;
    }

    .personal_stat_col {
        display: flex;
        flex-direction: column;
        align-items: center;

        &:not(:last-child) {
            border-right: 0.0625rem solid var(--leaderboard-white-5);
        }
    }

    .personal_stat_value {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--leaderboard-white);
        margin-bottom: 0.1rem;
    }

    .personal_stat_label {
        font-size: 0.75rem;
        color: var(--leaderboard-stats-label-color);
    }

    .subheader {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 0.0625rem solid var(--leaderboard-white-5);
        padding-bottom: 0.75rem;
        margin-top: 0.5rem;
    }

    .subheader_title {
        font-size: 1.15rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--leaderboard-light-fg);
    }

    .subheader_meta {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.85rem;
        color: var(--leaderboard-stats-label-color);
    }

    .refresh_btn {
        background: transparent;
        border: none;
        color: var(--leaderboard-stats-label-color);
        cursor: pointer;
        font-size: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.25rem;
        border-radius: 0.25rem;
        transition: all 0.2s ease;

        &:hover {
            color: var(--leaderboard-white);
            transform: rotate(180deg);
        }
    }

    .list {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .row {
        display: flex;
        align-items: center;
        padding: 1rem 1.25rem;
        background: var(--leaderboard-white-3);
        border: 0.0625rem solid var(--leaderboard-white-5);
        border-radius: 1rem;
        transition: all 0.2s ease-in-out;
        backdrop-filter: blur(0.625rem);
        cursor: pointer;

        &:hover {
            background: var(--leaderboard-white-5);
            border-color: var(--leaderboard-white-10);
            transform: translateY(-0.125rem);
            box-shadow: 0 0.25rem 1.25rem var(--leaderboard-black-25);
        }
    }

    .medal_wrapper {
        width: 3.5rem;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .medal {
        width: 2.2rem;
        height: 2.2rem;
        filter: drop-shadow(0 0.125rem 0.375rem var(--leaderboard-black-30));

        &.medal_emoji_fallback {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
        }

        &.medal_fallback {
            .medal_fallback_circle {
                fill: var(--medal-color, var(--leaderboard-medal-gold));
            }

            .medal_fallback_text {
                font-weight: bold;
                font-size: 16px;
                text-anchor: middle;
                fill: var(--leaderboard-medal-text);
            }

            &.gold {
                --medal-color: var(--leaderboard-medal-gold);
            }

            &.silver {
                --medal-color: var(--leaderboard-medal-silver);
            }

            &.bronze {
                --medal-color: var(--leaderboard-medal-bronze);
            }
        }
    }

    .rank_number {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--leaderboard-dark-gray);
        width: 2.2rem;
        text-align: center;
    }

    .avatar_container {
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 1.25rem;
        cursor: pointer;
        flex-shrink: 0;
        border: 0.125rem solid var(--leaderboard-white-10);

        .avatar {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .user_details {
        flex-grow: 1;
        cursor: pointer;
        min-width: 0;
    }

    .user_name {
        font-size: 1.15rem;
        font-weight: 600;
        color: var(--leaderboard-white);
        margin-bottom: 0.15rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        &:hover {
            text-decoration: underline;
        }
    }

    .user_sub {
        font-size: 0.9rem;
        color: var(--leaderboard-stats-label-color);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .row_stats {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        font-size: 0.85rem;
        color: var(--leaderboard-stats-label-color);
        margin-top: 0.35rem;
        flex-wrap: wrap;

        .bullet {
            color: var(--leaderboard-dark-gray);
            margin: 0 0.15rem;
        }
    }

    .stat_win {
        color: var(--leaderboard-success);
        font-weight: 600;
    }

    .stat_loss {
        color: var(--leaderboard-danger);
        font-weight: 600;
    }

    .row_right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        flex-shrink: 0;
        margin-left: 1rem;
    }

    .rating_value {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--leaderboard-cyan);
    }

    .rating_label {
        font-size: 0.8rem;
        color: var(--leaderboard-stats-label-color);
        margin-top: -0.1rem;
    }

    .rating_change {
        font-size: 0.8rem;
        font-weight: 600;
        margin-top: 0.35rem;
        display: flex;
        align-items: center;
        gap: 0.15rem;

        &.change_up {
            color: var(--leaderboard-success);
        }

        &.change_down {
            color: var(--leaderboard-danger);
        }

        &.change_neutral {
            color: var(--leaderboard-stats-label-color);
        }
    }

    .view_more_container {
        display: flex;
        justify-content: center;
        margin-top: 1rem;
    }

    .view_more_btn {
        background: var(--leaderboard-white-3);
        border: 0.0625rem solid var(--leaderboard-white-5);
        color: var(--leaderboard-tab-color);
        font-size: 0.9rem;
        font-weight: 600;
        padding: 0.5rem 1.25rem;
        border-radius: 1.5rem;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 0.4rem;

        &:hover {
            background: var(--leaderboard-white-6);
            color: var(--leaderboard-white);
            border-color: var(--leaderboard-white-10);
        }

        &:focus {
            outline: none;
        }
    }

    .footer_info {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.8rem;
        color: var(--leaderboard-dark-gray);
        margin-top: 1.5rem;
        border-top: 0.0625rem solid var(--leaderboard-white-3);
        padding-top: 1rem;
    }
}

.rps_tab_content_container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#rock_paper_scissors_area .tabs {
    margin: 0 auto 1.5rem auto;
}

/*!******************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/leaderboard/leaderboard_mobile.css ***!
  \******************************************************************************************/
@media (max-width: 768px) {
    #leaderboard {
        padding: 1rem;
    }

    .rps_tab_content_container {
        padding: 1rem 0;
    }

    #leaderboard,
    .rps_tab_content_container,
    #rock_paper_scissors_area {
        .header_grid {
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }

        .header_left {
            flex-direction: column;
            text-align: center;
            gap: 1rem;
        }

        .title {
            font-size: 1.8rem;
        }

        .description {
            font-size: 0.95rem;
        }

        .list {
            gap: 0.5rem;
        }

        .row {
            padding: 0.75rem 1rem;
        }

        .medal_wrapper {
            width: 2.8rem;
        }

        .medal {
            width: 1.8rem;
            height: 1.8rem;
        }

        .rank_number {
            width: 1.8rem;
            font-size: 1.1rem;
        }

        .avatar_container {
            width: 2.5rem;
            height: 2.5rem;
            margin-right: 0.75rem;
        }

        .user_name {
            font-size: 1rem;
        }

        .user_sub {
            font-size: 0.8rem;
        }

        .row_stats {
            font-size: 0.75rem;
        }

        .rating_value {
            font-size: 1.1rem;
        }

        .rating_label {
            font-size: 0.75rem;
        }
    }
}

@media (max-width: 480px) {
    #leaderboard,
    .rps_tab_content_container,
    #rock_paper_scissors_area {
        .row {
            padding: 0.6rem 0.65rem;
        }

        .medal_wrapper {
            width: 2.2rem;
        }

        .rank_number {
            width: 1.5rem;
            font-size: 1rem;
        }

        .avatar_container {
            width: 2.2rem;
            height: 2.2rem;
            margin-right: 0.5rem;
        }

        .user_name {
            font-size: 0.95rem;
        }

        .row_stats {
            font-size: 0.7rem;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.15rem;

            .group_bullet {
                display: none;
            }
        }

        .row_right {
            margin-left: 0.5rem;
        }

        .rating_value {
            font-size: 1.05rem;
        }

        .rating_label {
            font-size: 0.7rem;
        }
    }
}

/*!***********************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/mental_growth/scorecard.css ***!
  \***********************************************************************************/
:root {
    /* Color Palette */
    --leaderboard-white: #ffffff;
    --leaderboard-yellow: #ffe20b;
    --leaderboard-pink: #ff7cc9;
    --leaderboard-cyan: #3cecff;
    --leaderboard-muted-fg: #8892b0;
    --leaderboard-danger: #ff6b6b;
    --leaderboard-light-fg: #e2e8f0;
    --leaderboard-dark-bg: #111111;
    --leaderboard-tab-color: #a0aec0;
    --leaderboard-stats-label-color: #718096;
    --leaderboard-dark-gray: #4a5568;
    --leaderboard-success: #4ade80;
    --leaderboard-charcoal: #111111;
    --leaderboard-orange: #ffa500;

    /* Chime Colors */
    --leaderboard-chime-green-light: #d4ff80;
    --leaderboard-chime-green: #a6ff4d;

    /* Alpha/RGBA overlays */
    --leaderboard-white-2: rgba(255, 255, 255, 0.02);
    --leaderboard-white-3: rgba(255, 255, 255, 0.03);
    --leaderboard-white-5: rgba(255, 255, 255, 0.05);
    --leaderboard-white-6: rgba(255, 255, 255, 0.06);
    --leaderboard-white-8: rgba(255, 255, 255, 0.08);
    --leaderboard-white-10: rgba(255, 255, 255, 0.1);
    --leaderboard-black-40: rgba(0, 0, 0, 0.4);
    --leaderboard-black-25: rgba(0, 0, 0, 0.25);
    --leaderboard-black-30: rgba(0, 0, 0, 0.3);

    /* Specific overrides/combos */
    --leaderboard-danger-20: rgba(255, 107, 107, 0.2);
    --leaderboard-danger-10: rgba(255, 107, 107, 0.1);
    --leaderboard-danger-25: rgba(255, 107, 107, 0.25);
    --leaderboard-yellow-pink-cyan: linear-gradient(90deg, var(--leaderboard-yellow), var(--leaderboard-pink), var(--leaderboard-cyan));
    --leaderboard-logo-glow: rgba(255, 124, 201, 0.12);
    --leaderboard-chime-glow: rgba(166, 255, 77, 0.15);
    --leaderboard-shadow-tabs: rgba(0, 0, 0, 0.15);
    --leaderboard-gradient-dark-overlay: rgba(17, 17, 17, 0.95);

    /* Medal Colors */
    --leaderboard-medal-gold: #ffd700;
    --leaderboard-medal-silver: #c0c0c0;
    --leaderboard-medal-bronze: #cd7f32;
    --leaderboard-medal-text: #000000;
}

#leaderboard {
    grid-area: main_area;
    overflow-y: auto;
    padding: 1.5rem;
    color: var(--leaderboard-white);
    font-family: 'Inter', sans-serif;
}

#view_friends_activity_area {
    .stats_group {
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }

    .stats_streak_count {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        font-weight: bold;
        color: var(--leaderboard-orange);
    }

    .group_bullet {
        display: inline;
    }

    .tabs {
        display: flex;
        gap: 0.75rem;
        background: var(--leaderboard-white-3);
        padding: 0.35rem;
        border-radius: 2rem;
        border: 0.0625rem solid var(--leaderboard-white-5);
        width: fit-content;
        margin: 0 auto 0.5rem auto;
        backdrop-filter: blur(0.625rem);
    }

    .tab_btn {
        background: transparent;
        border: 0.0625rem solid transparent;
        color: var(--leaderboard-tab-color);
        font-family: inherit;
        font-size: 0.95rem;
        font-weight: 600;
        padding: 0.6rem 1.25rem;
        border-radius: 1.5rem;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        display: flex;
        align-items: center;
        gap: 0.5rem;

        &:hover {
            color: var(--leaderboard-white);
            background: var(--leaderboard-white-5);
        }

        &.active {
            color: var(--leaderboard-white);
            background: var(--leaderboard-white-10);
            box-shadow: 0 0.25rem 0.75rem var(--leaderboard-shadow-tabs);
            border-color: var(--leaderboard-white-8);
        }

        &:focus {
            outline: none;
        }
    }

    .loading,
    .error,
    .empty {
        text-align: center;
        padding: 3rem;
        font-size: 1.2rem;
        color: var(--leaderboard-muted-fg);
        background: var(--leaderboard-white-2);
        border-radius: 1rem;
        border: 0.0625rem solid var(--leaderboard-white-5);
        backdrop-filter: blur(0.625rem);
    }

    .error {
        color: var(--leaderboard-danger);
        border-color: var(--leaderboard-danger-20);
    }

    .participation_notice {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem 1.25rem;
        background: linear-gradient(135deg, var(--leaderboard-danger-10) 0%, var(--leaderboard-white-2) 100%);
        border: 0.0625rem solid var(--leaderboard-danger-25);
        border-radius: 1rem;
        color: var(--leaderboard-light-fg);
        margin-bottom: 0.75rem;
        font-size: 0.95rem;
        line-height: 1.4;
        backdrop-filter: blur(0.625rem);
    }

    .notice_icon {
        font-size: 1.5rem;
        color: var(--leaderboard-danger);
        flex-shrink: 0;
        display: flex;
        align-items: center;
    }

    .notice_text {
        flex-grow: 1;
    }

    .notice_btn {
        background: linear-gradient(90deg, var(--leaderboard-pink), var(--leaderboard-cyan));
        border: none;
        color: var(--leaderboard-charcoal);
        font-weight: 700;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap;

        &:hover {
            opacity: 0.9;
            transform: translateY(-0.0625rem);
        }
    }

    .inner_container {
        max-width: 55rem;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .header_grid {
        display: grid;
        grid-template-columns: 1fr 17.5rem;
        gap: 2rem;
        align-items: center;
        margin-bottom: 0.5rem;
    }

    .header_left {
        display: flex;
        align-items: center;
        gap: 1.5rem;
    }

    .title_container {
        flex-grow: 1;
    }

    .title {
        font-size: 2.1rem;
        font-weight: 800;
        margin: 0 0 0.5rem 0;
        background: var(--leaderboard-yellow-pink-cyan);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        letter-spacing: -0.02em;
    }

    .description {
        font-size: 1rem;
        line-height: 1.45;
        color: var(--leaderboard-tab-color);
        margin: 0;
    }

    .personal_card {
        background: var(--leaderboard-white-2);
        border: 0.0625rem solid var(--leaderboard-white-6);
        border-radius: 1rem;
        padding: 1.25rem;
        box-shadow: 0 0.5rem 2rem var(--leaderboard-black-25);
        backdrop-filter: blur(0.625rem);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .personal_card_title {
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--leaderboard-stats-label-color);
        margin-bottom: 0.35rem;
    }

    .personal_card_value {
        font-size: 2.3rem;
        font-weight: 800;
        line-height: 1.1;
        background: linear-gradient(135deg, var(--leaderboard-yellow), var(--leaderboard-pink));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .personal_card_label {
        font-size: 0.8rem;
        color: var(--leaderboard-stats-label-color);
        margin-bottom: 0.85rem;
    }

    .personal_card_stats {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        width: 100%;
        border-top: 0.0625rem solid var(--leaderboard-white-5);
        padding-top: 0.75rem;
    }

    .personal_stat_col {
        display: flex;
        flex-direction: column;
        align-items: center;

        &:not(:last-child) {
            border-right: 0.0625rem solid var(--leaderboard-white-5);
        }
    }

    .personal_stat_value {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--leaderboard-white);
        margin-bottom: 0.1rem;
    }

    .personal_stat_label {
        font-size: 0.75rem;
        color: var(--leaderboard-stats-label-color);
    }

    .subheader {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 0.0625rem solid var(--leaderboard-white-5);
        padding-bottom: 0.75rem;
        margin-top: 0.5rem;
    }

    .subheader_title {
        font-size: 1.15rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--leaderboard-light-fg);
    }

    .subheader_meta {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.85rem;
        color: var(--leaderboard-stats-label-color);
    }

    .refresh_btn {
        background: transparent;
        border: none;
        color: var(--leaderboard-stats-label-color);
        cursor: pointer;
        font-size: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.25rem;
        border-radius: 0.25rem;
        transition: all 0.2s ease;

        &:hover {
            color: var(--leaderboard-white);
            transform: rotate(180deg);
        }
    }

    .list {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .row {
        display: flex;
        align-items: center;
        padding: 1rem 0.2rem;
        background: var(--leaderboard-white-3);
        border: 0.0625rem solid var(--leaderboard-white-5);
        border-radius: 1rem;
        transition: all 0.2s ease-in-out;
        backdrop-filter: blur(0.625rem);
        cursor: pointer;

        &:hover {
            background: var(--leaderboard-white-5);
            border-color: var(--leaderboard-white-10);
            transform: translateY(-0.125rem);
            box-shadow: 0 0.25rem 1.25rem var(--leaderboard-black-25);
        }
    }

    .medal_wrapper {
        width: fit-content;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .medal {
        width: 2.2rem;
        height: 2.2rem;
        filter: drop-shadow(0 0.125rem 0.375rem var(--leaderboard-black-30));

        &.medal_emoji_fallback {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
        }

        &.medal_fallback {
            .medal_fallback_circle {
                fill: var(--medal-color, var(--leaderboard-medal-gold));
            }

            .medal_fallback_text {
                font-weight: bold;
                font-size: 16px;
                text-anchor: middle;
                fill: var(--leaderboard-medal-text);
            }

            &.gold {
                --medal-color: var(--leaderboard-medal-gold);
            }

            &.silver {
                --medal-color: var(--leaderboard-medal-silver);
            }

            &.bronze {
                --medal-color: var(--leaderboard-medal-bronze);
            }
        }
    }

    .rank_number {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--leaderboard-dark-gray);
        width: 2.2rem;
        text-align: center;
    }

    .avatar_container {
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 1.25rem;
        cursor: pointer;
        flex-shrink: 0;
        border: 0.125rem solid var(--leaderboard-white-10);

        .avatar {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .user_details {
        flex-grow: 1;
        cursor: pointer;
        min-width: 0;
    }

    .user_name {
        font-size: 1.15rem;
        font-weight: 600;
        color: var(--leaderboard-white);
        margin-bottom: 0.15rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        &:hover {
            text-decoration: underline;
        }
    }

    .user_sub {
        font-size: 0.9rem;
        color: var(--leaderboard-stats-label-color);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .row_stats {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        font-size: 0.85rem;
        color: var(--leaderboard-stats-label-color);
        margin-top: 0.35rem;
        flex-wrap: wrap;

        .bullet {
            color: var(--leaderboard-dark-gray);
            margin: 0 0.15rem;
        }
    }

    .stat_win {
        color: var(--leaderboard-success);
        font-weight: 600;
    }

    .stat_loss {
        color: var(--leaderboard-danger);
        font-weight: 600;
    }

    .row_right {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-shrink: 0;
        margin-left: 1rem;
        margin-right: 0.3rem;
    }

    .rating_value {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--leaderboard-cyan);
    }

    .rating_label {
        font-size: 0.8rem;
        color: var(--leaderboard-stats-label-color);
        margin-top: -0.1rem;
    }

    .rating_change {
        font-size: 0.8rem;
        font-weight: 600;
        margin-top: 0.35rem;
        display: flex;
        align-items: center;
        gap: 0.15rem;

        &.change_up {
            color: var(--leaderboard-success);
        }

        &.change_down {
            color: var(--leaderboard-danger);
        }

        &.change_neutral {
            color: var(--leaderboard-stats-label-color);
        }
    }

    .view_more_container {
        display: flex;
        justify-content: center;
        margin-top: 1rem;
    }

    .view_more_btn {
        background: var(--leaderboard-white-3);
        border: 0.0625rem solid var(--leaderboard-white-5);
        color: var(--leaderboard-tab-color);
        font-size: 0.9rem;
        font-weight: 600;
        padding: 0.5rem 1.25rem;
        border-radius: 1.5rem;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 0.4rem;

        &:hover {
            background: var(--leaderboard-white-6);
            color: var(--leaderboard-white);
            border-color: var(--leaderboard-white-10);
        }

        &:focus {
            outline: none;
        }
    }

    .footer_info {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.8rem;
        color: var(--leaderboard-dark-gray);
        margin-top: 1.5rem;
        border-top: 0.0625rem solid var(--leaderboard-white-3);
        padding-top: 1rem;
    }
}

.view_friends_activity_area {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#activity_area .tabs {
    margin: 0 auto 1.5rem auto;
}

/*# sourceMappingURL=index.css.map*/