/*      Importing the fonts there if they are not loaded from the html they will be loaded from there       */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;700&family=Poppins:wght@300;400;700&display=swap');

:root {
    --green: #13bc13;
    --blue: #1497de;
    --blue-opacity: rgba(20,151,222,0.3);
    --red: #de4214;
    --text-color-dark: #404040;
    --text-color-light: #9d9d9d;
    --orange: #FF7F00;
}

html {
    overflow-x: hidden;
}

body {
    font-family: 'Kanit', sans-serif;
    overflow-x: hidden;
    border: 8px solid #FFFFFF;
}

a {
    text-decoration: none;
}

.page-container {
    background: #f8f8f8;
    /* margin: 8px; */
    /* min-height: 100vh; */
    border-radius: 10px;
    min-height: 98vh;
    border-radius: 10px;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

/*      Utilities      */

.paragraph-text {
    font-family: 'Poppins', sans-serif;
    font-weight: normal;
    font-size: 15px;
    line-height: 24px;
    text-align: center;
    color: var(--text-color-dark);
}

.heading-dark {
    font-family: Kanit;
    font-weight: 500;
    font-size: 30px;
    line-height: 24px;
    text-align: center;
    color: var(--text-color-dark);
}

.color-green {
    color: var(--green) !important;
}

.color-red {
    color: var(--red) !important;
}

.color-blue {
    color: var(--blue) !important;
}

.color-text-light {
    color: var(--text-color-light) !important;
}

.bold-link {
    font-weight: bold;
    color: #13BC13;
}

    .bold-link:hover {
        color: var(--blue);
    }


.game-end-header {
    font-size: 18px;
    font-family: Poppins, sans-serif;
}

.gameEndButtons {
    font-size: 18px;
    font-family: Kanit, sans-serif;
    font-weight: 500;
}

    .gameEndButtons:hover {
        background: var(--green);
    }

.featureText {
    display: block;
    color: #404040;
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 5px;
}
/* Buttons */
.btn-primary {
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 1.5rem;
    margin: 0 4px;
    border-radius: 20px;
    background: linear-gradient(90deg, var(--blue) 20%, var(--green) 100%);
    filter: drop-shadow(0px 0px 30px rgba(0, 0, 0, 0.15));
    transition: 0.3s;
}

    .btn-primary:hover {
        background: linear-gradient(90deg, var(--green) 80%, var(--green) 100%);
    }

.btn-light {
    /* max-width: 147px; */
    padding: 8px 1rem;
    cursor: pointer;
    /* width: 100%; */
    /*height: 40px;*/
    border-radius: 20px;
    background: #fff;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.15);
    font-family: Kanit, sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    text-align: center;
    color: var(--text-color-dark);
    /* white-space: pre; */
    transition: all 0.3s linear;
}

    .btn-light:hover {
        background: linear-gradient(90deg, var(--blue) 20%, var(--green) 100%);
        color: #ffffff;
    }

.btn-danger {
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 1.5rem;
    margin: 0 4px;
    border-radius: 20px;
    background: linear-gradient(90deg, var(--red) 20%, var(--orange) 100%);
    filter: drop-shadow(0px 0px 30px rgba(0, 0, 0, 0.15));
    transition: 0.3s;
}

    .btn-danger:hover {
        background: linear-gradient(90deg, var(--orange) 80%, var(--orange) 100%);
    }

.btn-warning {
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 1.5rem;
    margin: 0 4px;
    border-radius: 20px;
    background: #fff;
    filter: drop-shadow(0px 0px 30px rgba(0, 0, 0, 0.15));
    transition: 0.3s;
}

    .btn-warning:hover {
        background: linear-gradient(90deg, var(--blue) 20%, var(--green) 100%);
    }

button.btn.btn-warning:hover {
    border: black solid 2px;
}
/*  --------------------------------------------   */

/*         Header Styles - Start Mobile           */

/*  --------------------------------------------   */

.logo {
    border-radius: 0px 0px 30px 30px;
    padding: 10px 1.5rem 20px 1.5rem;
}


/*.logo {
    border-radius: 0px 0px 30px 30px;
    padding: 10px 0px 0px 0px;
    overflow: hidden;
}*/

.logo-img {
    width: 136.58px;
    height: auto;
}

.right-nav-items {
    padding: 10px 8px 20px 8px;
}

.score-mobile {
    padding: 15px 8px 26px 8px;
}

.number-container {
    width: 35px;
    height: 35px;
    border-radius: 4px;
    background: var(--green);
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.15);
    font-family: Kanit, sans-serif;
    font-weight: bold;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    margin: 0 2px;
    color: #fff;
    /*border-radius: 4px;
    background: var(--green);
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.15);
    font-family: Kanit, sans-serif;
    font-weight: bold;
    font-size: 24px;
    line-height: 24px;
    text-align: center;
    margin: 0 2px;
    color: #fff;
    padding: 10px;*/
}

.ytd-number-container {
    padding: 10px;
    height: 35px;
    border-radius: 4px;
    background: var(--green);
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.15);
    font-family: Kanit, sans-serif;
    font-weight: bold;
    font-size: 25px;
    line-height: 24px;
    margin: 0 2px;
    color: #fff;
    min-width: 50px;
}

.points-available {
    font-family: Kanit, sans-serif;
    font-weight: 500;
    font-size: 9px;
    line-height: 24px;
    text-align: left;
    color: var(--text-color-dark);
    position: absolute;
    bottom: -10px;
    left: 7px;
}

.score-available {
    font-family: Kanit, sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 24px;
    text-align: left;
    color: var(--text-color-dark);
    position: absolute;
    bottom: -10px;
    left: 7px;
}

.menu {
}

    .menu[aria-expanded="true"] + .dropdown-menu {
        width: 100vw !important;
        /*width: 103vw !important;*/
        height: calc(100vh - 70px) !important;
        background: #f8f8f8 !important;
        top: 15px !important;
        flex-direction: column;
        display: flex !important;
        align-items: center !important;
        grid-gap: 1.5rem !important;
    }

    .menu[aria-expanded="false"] + .dropdown-menu {
        /*transform: translateX(100%);*/
        transition: all .3s linear;
        /*display: block;*/
        /*top: 100%;*/
    }

    .menu[aria-expanded="true"] + .dropdown-menu {
        /*transform: translateX(0%);*/
        /*transition: all .3s linear;*/
    }

    .menu[aria-expanded="false"]::before {
        content: "Menu";
        font-family: Kanit, sans-serif;
        font-weight: 500;
        font-size: 15px;
        line-height: 24px;
        text-align: center;
        color: #fff;
        display: none;
    }

    .menu[aria-expanded="true"]::before {
        content: "Close";
        font-family: Kanit, sans-serif;
        font-weight: 500;
        font-size: 15px;
        line-height: 24px;
        text-align: center;
        color: #fff;
        display: none;
    }

    .menu[aria-expanded="true"] img {
        content: url("/assets/closeIcon.svg");
    }

    .menu[aria-expanded="close"] img {
        content: url("/assets/menuIcon.svg");
    }

.menu-icon {
    margin-left: 0;
}

.menuIcon {
    margin-bottom: 5px;
}

.badgeImage {
    position: absolute;
    top: 15px;
}

.scoreDiv {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.scoreAvailable {
    font-size: 20px;
    font-weight: 500;
}

#availableScore {
    font-size: 75px;
    font-weight: 600;
}

.menu-text {
    font-family: Kanit, sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    text-align: center;
    color: #fff;
    display: none;
}

.score-available-menu {
    border: solid 2px var(--green);
    width: 90%;
    height: 20%;
    border-radius: 15px;
    color: var(--green);
}

.menu-card-container {
    width: 93%;
}

.menu-card {
    border-radius: 15px;
    width: 45%;
    margin: 2.5%;
    height: 90px;
    background: linear-gradient(270deg, var(--blue) 50%, var(--green) 150%);
    color: #FFFFFF;
    font-size: 15px;
    cursor: pointer;
    display: grid;
    align-items: center;
    justify-items: start;
    align-content: center;
    padding: 5%;
}

.menu-card-title {
    font-size: 20px;
    line-height: 1;
}

.dropdown-item {
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 24px;
    width: 250px !important;
    /*width: 100% !important;*/
    line-height: 24px;
    /*text-align: right;*/
    text-align: center;
    justify-content: center !important;
    padding: 12px 1.5rem !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 25px !important;
    /*width: min-content !important;*/
    /*padding: 8px 1.5rem;*/
    margin-left: auto !important;
    transition: background-color .3s linear !important;
    margin-bottom: 10px !important;
}

    .dropdown-item:hover {
        background: #404040 !important;
        /*background: 0 0px 30 rgba(0, 0, 0, 0.15) !important;*/
    }

    .dropdown-item .share-icon {
        content: url("/assets/shareIconWhite.svg");
    }

    .dropdown-item .stats-icon {
        content: url("/assets/statusIconWhite.svg");
    }

    .dropdown-item .privacy-policy-icon {
        content: url("/assets/privacyPolicyIconWhite.svg");
    }

    .dropdown-item .user-feedback-icon {
        content: url("/assets/userFeedbackIconWhite.svg");
        max-width: 22.54px;
    }

.c-input {
    width: 100%;
    font-family: 'Poppins', sans-serif;
    font-weight: normal;
    font-size: 15px;
    line-height: 24px;
    text-align: left;
    padding: 8px 1rem;
    border-radius: 5px;
    padding-right: 2.2rem;
}

.c-input-error {
    color: var(--red);
    border: 1px solid #de4214;
}

.c-input-success {
    color: var(--green);
    border: 1px solid var(--green);
}

.c-input-normal {
    border: 1px solid var(--text-color-dark);
}

.c-input:focus {
    outline: none;
    border: 1px solid var(--blue);
    -webkit-box-shadow: 0px 0px 15px 0px var(--blue-opacity);
    box-shadow: 0px 0px 15px 0px var(--blue-opacity);
}

.input-icon-container {
    position: absolute;
}

.enter-icon-container {
    background: var(--text-color-dark);
    border-radius: 3px;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    right: -8px !important;
    transition: background-color .3s linear;
}

    .enter-icon-container:hover {
        background: var(--blue);
    }

.enter-icon-img {
    width: 15px;
}

.attempts-section {
    padding: 2rem 0;
}

.attempts-heading {
    font-family: Kanit;
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    text-align: center;
    margin-bottom: 13px;
    color: var(--blue);
}

.footer {
    padding: 4rem 0 0 0;
    /* bottom: 0;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%); */
}

.footer-text {
    font-family: 'Poppins', sans-serif;
    font-weight: normal;
    font-size: 12px;
    line-height: 24px;
    text-align: center;
    color: var(--text-color-light);
}


.mobileViewSection {
    display: none;
}
/*  --------------------------------------------   */

/*         Header Styles - End Mobile              */

/*  --------------------------------------------   */

/*  --------------------------------------------   */

/*   Hero section Styles - Start Mobile            */

/*  --------------------------------------------   */

.sports-trivia-heading {
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    color: var(--text-color-dark);
    white-space: nowrap;
}

.hand-icon-container {
    padding: 8px;
    background: #fff;
    border-radius: 5px;
    width: 28px;
    height: 28px;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.15);
}

.sports-trivia-desc {
    font-family: 'Poppins', sans-serif;
    font-weight: normal;
    font-size: 15px;
    line-height: 24px;
    text-align: center;
    color: var(--text-color-light);
    max-width: 100%;
}

.blue-heading {
    font-family: Kanit;
    font-weight: 500;
    font-size: 30px;
    line-height: 24px;
    text-align: center;
    color: var(--blue);
    line-height: 1.2;
}

/*  --------------------------------------------   */

/*   Input section Styles - Start Mobile            */

/*  --------------------------------------------   */

/* width */
.card-container::-webkit-scrollbar {
    width: 8px;
    border-radius: 100px;
    height: 380px;
    display: none;
}

/* Track */
.card-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 100px;
}

/* Handle */
.card-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 100px;
}

    /* Handle on hover */
    .card-container::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

.card-container {
    /*    max-width: 860px;
    width: 100%;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.05);
    margin: auto;
    padding: 24px 16px;
    margin-top: 32px;
    max-height: 511px;
    overflow-y: auto;*/

    max-width: 960px;
    width: 100%;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.05);
    margin: auto;
    padding: 24px 16px;
    margin-top: 32px;
}

::-webkit-scrollbar {
    width: 8px;
    display: none;
}

    ::-webkit-scrollbar:horizontal {
        height: 10px;
    }

::-webkit-scrollbar-track {
    background-color: #E5E5E5;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #404040;
}

.list-number {
    font-family: Kanit;
    font-weight: bold;
    font-size: 15px;
    line-height: 20px;
    text-align: left;
    color: var(--blue);
    margin-right: 4px;
}

.list-desc {
    font-family: Kanit;
    font-weight: normal;
    font-size: 18px;
    line-height: 20px;
    text-align: left;
    width: 100%;
    color: var(--text-color-dark);
}

.wrongAnswer {
    background: #ff00001a;
    color: red;
    padding: 2px 7px;
    width: fit-content;
    border-radius: 7px;
    font-size: 14px;
    margin: -5px 10px 10px 10px;
}

/*  --------------------------------------------   */

/*    Gameplay Results Modal - Start Mobile         */

/*  --------------------------------------------   */

.modal {
    background: #000000ca;
    padding-right: 0 !important;
}

.modal-dialog {
    max-width: 700px !important;
    /* width: 100%; */
}

.modal-content {
    border-radius: 10px !important;
    padding: 10px;
    /*max-width: 98%;*/
    margin: 0 auto;
}

.modal-body {
    background: #f8f8f8;
    border-radius: 10px !important;
    padding: 30px 0.5rem;
}

.modal-logo {
    max-width: 120px;
    margin: 10px auto;
}

.gameplay-modal {
}

.chuckle-brozen-img {
}

.modal-cta-btn {
    min-width: 100px;
}

.modal-close-icon {
    cursor: pointer;
}

/*  --------------------------------------------   */

/*    User Feedback Modal -  Mobile Start         */

/*  --------------------------------------------   */

.userFeedback-modal {
    padding: 2.5rem 0;
}

.feedback-icon {
    width: 115px;
    height: 80px;
    border-radius: 10px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 2rem;
}

    .feedback-icon:hover {
        background-color: #13bc13;
    }

/*  --------------------------------------------   */

/*    User Feedback Modal -  Mobile End         */

/*  --------------------------------------------   */


/*  --------------------------------------------   */

/*   My stats Modal -  Mobile Start         */

/*  --------------------------------------------   */

.table {
    border-collapse: separate;
    border-spacing: 0 15px;
    border-radius: 10px;
}


    .table > :not(:last-child) > :last-child > * {
        border-bottom: none !important;
    }

    .table > :not(caption) > * > * {
        border-bottom: none !important;
    }

.table-row {
    background: white !important;
    padding: 0 1rem;
}

td {
    padding: 4px !important;
}

    /*// Set border-radius on the top-left and bottom-left of the first table data on the table row*/
    td:first-child,
    th:first-child {
        border-radius: 17px 0 0 17px;
    }

    /*// Set border-radius on the top-right and bottom-right of the last table data on the table row*/
    td:last-child,
    th:last-child {
        border-radius: 0 17px 17px 0;
    }

.my-stats-modal {
    padding: 1rem 0;
}

.table-entry {
    font-size: 12px;
    font-family: Popins, sans-serif;
    text-align: center;
    color: var(--text-color-dark);
}

.table-stats {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
}

.table-stats-item {
    display: flex;
    /*grid-template-columns: auto 1fr;*/
    align-items: center;
    justify-content: center;
    grid-gap: 1rem;
    background: white;
    padding: 6px;
    border-radius: 10px !important;
}

.table-stats-img-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.table-stats-heading {
    font-size: 20px;
    font-weight: bold;
}

.suffix {
    font-size: 12px;
    position: relative;
    top: -6px;
}

/*  --------------------------------------------   */

/*    My stats Modal  -  Mobile Start         */

/*  --------------------------------------------   */

/*  --------------------------------------------   */

/*          Gameplay-End -  Mobile End            */

/*  --------------------------------------------   */

.gameplay__end-desc-text {
    max-width: 530px;
    margin: auto;
}

/*  --------------------------------------------   */

/*    User Feedback Result Modal -  Desktop Start         */

/*  --------------------------------------------   */

.userFeedbackResult-modal {
}

.feedback-result-icon {
}

.feedback-result-progress-container {
    width: 100%;
    max-width: 310px;
}

.feedback-result-progress {
    border-radius: 20px;
    background-color: #fff;
}

.progress-bar {
    background: linear-gradient(to right, #13bc13 0%, #1497de 100%);
}

.fail-progress-bar {
    background: linear-gradient(90deg, var(--orange) 10%, var(--red) 100%) !important;
}

.feedback-result-progress-value {
    width: 48px;
    text-align: left;
}

.newpoints-available {
    font-size: 20px !important;
    position: relative !important;
    bottom: -5px !important;
    left: 0 !important;
    text-align: center !important;
    width: inherit !important;
}

.right-nav-items .score-available.newone {
    left: -10px !important;
}

.chuckInfo {
    text-align: center;
    margin-top: 30px;
}

.archive-info {
    color: #000;
    font-weight: 500;
    font-size: 13px;
    margin-top: 10px;
    width: 100%;
    background: #f8f8f8;
}
/*For Native Toast */
.native-toast {
    position: fixed;
    background-color: rgba(50,50,50,0.8);
    border-radius: 3px;
    color: #fff;
    text-align: center;
    padding: 10px 12px;
    opacity: 0;
    z-index: 99999;
    transition: opacity 0.25s, top 0.25s, bottom 0.25s, -webkit-transform 0.25s;
    transition: transform 0.25s, opacity 0.25s, top 0.25s, bottom 0.25s;
    transition: transform 0.25s, opacity 0.25s, top 0.25s, bottom 0.25s, -webkit-transform 0.25s;
    box-sizing: border-box;
    max-width: 18rem;
}

.native-toast-north {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    top: -50px;
}

    .native-toast-north.native-toast-shown {
        opacity: 1;
        top: 50px;
    }

        .native-toast-north.native-toast-shown.native-toast-edge {
            top: 0;
        }

.native-toast-north-west {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    top: -50px;
    left: 50px;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

    .native-toast-north-west.native-toast-shown {
        opacity: 1;
        top: 50px;
    }

        .native-toast-north-west.native-toast-shown.native-toast-edge {
            top: 0;
        }

.native-toast-north-east {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    top: -50px;
    left: auto;
    right: 50px;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

    .native-toast-north-east.native-toast-shown {
        opacity: 1;
        top: 50px;
    }

        .native-toast-north-east.native-toast-shown.native-toast-edge {
            top: 0;
        }

.native-toast-south {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: -50px;
}

    .native-toast-south.native-toast-shown {
        opacity: 1;
        bottom: 50px;
    }

        .native-toast-south.native-toast-shown.native-toast-edge {
            bottom: 0;
        }

.native-toast-south-west {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: -50px;
    left: 50px;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

    .native-toast-south-west.native-toast-shown {
        opacity: 1;
        bottom: 50px;
    }

        .native-toast-south-west.native-toast-shown.native-toast-edge {
            bottom: 0;
        }

.native-toast-south-east {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: -50px;
    left: auto;
    right: 50px;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

    .native-toast-south-east.native-toast-shown {
        opacity: 1;
        bottom: 50px;
    }

        .native-toast-south-east.native-toast-shown.native-toast-edge {
            bottom: 0;
        }

.native-toast-center {
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    bottom: -50px;
}

    .native-toast-center.native-toast-shown {
        opacity: 1;
        bottom: 50%;
    }

.native-toast-west {
    left: 50px;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    bottom: -50px;
}

    .native-toast-west.native-toast-shown {
        opacity: 1;
        bottom: 50%;
    }

.native-toast-east {
    left: auto;
    right: 50px;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    bottom: -50px;
}

    .native-toast-east.native-toast-shown {
        opacity: 1;
        bottom: 50%;
    }

.native-toast-edge {
    border-radius: 0;
    max-width: 100%;
    width: 100%;
    text-align: left;
    left: 0;
    -webkit-transform: none;
    transform: none;
}

.native-toast-error {
    background-color: #ff3d3d;
    color: #fff;
}

.native-toast-success {
    background-color: #62a465;
    color: #fff;
}

.native-toast-warning {
    background-color: #ffb618;
    color: #fff;
}

.native-toast-info {
    background-color: #67daff;
    color: #fff;
}

[class^='native-toast-icon-'] {
    vertical-align: middle;
    margin-right: 5px;
}

    [class^='native-toast-icon-'] svg {
        width: 16px;
        height: 16px;
    }

.s-input {
    border-radius: 5px !important;
    margin-top: -10px;
    font-family: 'Poppins';
    font-size: 18px;
}

.blazored-typeahead {
    border: unset !important;
}

.s-input .blazored-typeahead__input {
    border: 1px solid var(--blue) !important;
    touch-action: manipulation;
}

.blazored-typeahead__input-mask {
    color: #000000;
}

.s-input .blazored-typeahead__input::-webkit-input-placeholder {
    color: #000000;
}

.s-input .blazored-typeahead__input:focus {
    outline: none !important;
    border: 1px solid var(--blue) !important;
    -webkit-box-shadow: 0px 0px 15px 0px var(--blue-opacity) !important;
    box-shadow: 0px 0px 15px 0px var(--blue-opacity) !important;
}

.s-input .blazored-typeahead:focus-within {
    box-shadow: unset !important;
}

.s-input .blazored-typeahead__input-mask-wrapper--disabled {
    background-color: #fafafa !important;
    color: unset !important;
    cursor: default;
}

/* .s-input .blazored-typeahead__clear {
            margin-right: 35px !important;
        }*/
/*.s-input .blazored-typeahead {
    border: 2px solid #212121 !important;
}*/
.s-input .blazored-typeahead.modified {
    border: 1px solid #bfbfbf !important;
}

.score-display {
    display: block !important;
    margin-top: 10px !important;
    left: 20%;
}

#score {
    left: 10%;
}



.btn-submit {
    width: 100px;
    /*font-size: 17px;
    border-radius: 20px;
    height: 40px;
    margin-bottom: auto;*/
    text-align: center;
    font-family: Kanit;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
    margin-left: auto;
    background: #1497DE 0% 0% no-repeat padding-box;
    /*box-shadow: 0px 0px 30px #00000026;*/
    border-radius: 20px;
    opacity: 1;
    height: 30px;
    padding-top: 1px;
}

    .btn-submit:hover {
        background: linear-gradient(90deg, var(--green) 80%, var(--green) 100%);
        color: white;
    }


.skipButton {
    top: 520px;
    left: 560px;
    width: 100px;
    /* UI Properties */
    /*background: #9D9D9D 0% 0% no-repeat padding-box;*/
    /* box-shadow: 0px 0px 30px #00000026;*/
    /*border-radius: 20px;*/
    opacity: 1;
    text-align: center;
    /*font: normal normal medium 15px/24px Kanit;*/
    font-family: Kanit;
    letter-spacing: 0px;
    color: #1497DE;
    border: 1px solid #1497DE;
    border-radius: 20px;
    opacity: 1;
    height: 30px;
    padding-top: 1px;
}

    .skipButton:hover {
        background: #DE4214;
        color: white;
    }

.skip_submit_container {
    display: flex;
    margin-top: 10px;
    margin-bottom: 10px;
}



.stateShare {
    display: flex;
    gap: 20px;
    justify-content: center;
    /*margin-top: 10px;
    margin-bottom: 10px;*/
}

.left-0 {
    left: 0 !important;
}

.card-container-child {
    padding: 24px 16px 0px;
    /*max-height: 511px;*/
    /*overflow-y: auto;*/
}

.blazored-typeahead__results {
    position: unset !important;
}

.container-title {
    width: 222px;
    height: 30px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border-radius: 10px;
    opacity: 1;
    color: #1497DE;
    text-transform: capitalize;
    opacity: 1;
    text-align: center;
    font-weight: 600;
    margin-left: auto;
    margin-right: auto;
    /* top: -10px !important; */
    margin-top: -60px;
    padding: 3px;
    display: flex;
    justify-content: center;
}


.finalScoreBoard {
    width: 330px;
    padding-bottom: 15px;
    margin: 0 auto;
    border-radius: 10px;
    border: 1px solid #F0F0F0;
}

.attributeImage {
    width: 50px;
    height: 50px;
}

@keyframes verticalJump {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0); /* Starting and ending position */
    }
    40% {
        transform: translateY(-8px); /* Jump up */
    }
    60% {
        transform: translateY(8px); /* Jump down */
    }
}

.loading-container {
    display: inline-flex; /* Use inline-flex to keep items in the same line */
    align-items: center; /* Center items vertically */
}

.static-text {
    margin-right: 5px; /* Adjust spacing between "Loading" and dots */
}

.jumping-dots {
    overflow: hidden; /* Hide overflow to prevent any layout issues */
}

.jumping-dots span {
    display: inline-block; /* Display dots inline-block */
    width: 10px; /* Dot width */
    height: 10px; /* Dot height */
    background-color: #000; /* Dot color */
    border-radius: 50%; /* Make dots round */
    margin: 0 3px; /* Adjust spacing between dots */
}

.jumping-dots1{
    animation: verticalJump 1.1s infinite;
}
.jumping-dots2{
    animation: verticalJump 1.2s infinite;
}
.jumping-dots3{
    animation: verticalJump 1.3s infinite;
}

.card-title-m {
    border-radius: 10px;
    position: relative;
}

    .card-title-m .container-title {
        font-weight: 600;
        background: #ffffff 0% 0% no-repeat padding-box;
        display: flex;
        padding: 10px;
        /* background: white; */
        margin: 10px auto -13px auto;
        position: relative;
    }

.webViewSection {
    padding-top: 0px;
}

.mobile-scrolling-card {
    margin-top: 0px;
    z-index: 1;
}

.desktop-right-menu {
    width: 500px !important;
}

.gameMode {
    left: 31px !important;
}


.mobile_game_end_text {
    display: none;
}

.desktop_game_end_text {
    display: block;
}

/* Archive Calendar Style */
#currentMonth {
    color: var(--blue);
    font-weight: 500;
}

.calendar {
    width: 260px;
    font-size: 16px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin: auto;
    box-sizing: border-box;
    padding: 15px 6px 0px 6px;
    background: #fff;
    border-radius: 15px;
    user-select: none;
    justify-items: center;
}

.calendar-container {
    width: 325px;
    margin: auto;
    background: #fff;
    border-radius: 15px;
    padding: 20px 10px;
}

.calendar-header {
    display: flex;
    justify-content: center;
    font-size: 22px;
}

.disabledDay {
    color: gray;
}

.newDay {
    height: 30px;
    width: 30px;
    text-align: center;
    border-radius: 50%;
    margin: 12px 0px;
    display: flex;
}

.isRemaining {
    background: var(--blue);
    border-radius: 50%;
    color: white;
}

    .isRemaining:hover {
        background: linear-gradient(215deg, var(--blue) 20%, var(--green) 100%);
        cursor: pointer;
    }

.number {
    margin: auto;
    font-weight: 500;
}

.isWon {
    box-shadow: 0 0 1px var(--green);
    color: var(--green);
    display: block
}

    .isWon .number, .isLost .number, .disabledDay .number {
        font-weight: 100;
        opacity: 0.8;
    }

.isLost {
    box-shadow: 0 0 1px var(--red);
    color: var(--red);
    display: block;
}

.score {
    border-radius: 5px;
    /* border: 1px solid #37bd29; */
    color: white;
    height: 19px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}

.winScore {
    background: var(--green);
}

.lostScore {
    background: black;
}

.remaining {
    color: white;
    font-weight: bolder;
}

    .remaining::before {
        content: '';
        border-radius: 50%;
        background-color: #3997dd;
    }

    .remaining::after {
        content: '';
    }

.titleContainer {
    width: 280px;
    margin: auto;
    background-color: #ffffff;
    border-radius: 5px;
    padding: 10px;
    background-color: #e9e9e9;
}

.calendar-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 255px;
    flex-direction: row;
    margin: auto;
}

.titleDays {
    width: 260px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 0px 6px;
    text-align: center;
    margin-top: 10px;
    font-weight: 500;
}

.calendar-title .arrow {
    cursor: pointer;
    width: 15px;
}

    .calendar-title .arrow svg:hover {
        fill: var(--green);
    }

.calendar-title .disabledArrow {
    width: 15px;
    cursor: not-allowed;
}

.indicatorSection {
    display: flex;
    font-size: 12px;
    justify-content: space-around;
}

.circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    /* margin: 10px; */
    display: inline-block;
}

.red-border {
    border: 1px solid var(--red);
}

.green-border {
    border: 1px solid var(--green);
}

.blue-fill {
    background-color: var(--blue);
}

.randomPick {
    display: flex;
    margin: auto;
    width: 325px;
    flex-direction: column;
    align-items: center;
    margin-top: 25px;
}

.randomPickBtn {
    border: 2px solid var(--blue);
    border-radius: 20px;
    margin-top: 10px;
    width: 100%;
    color: var(--blue);
    display: flex;
    justify-content: center;
    align-items: center;
}

    .randomPickBtn:hover {
        background-color: var(--blue);
        color: white;
    }

.leagueSection {
    font-size: 13px;
    opacity: 1;
    padding: 10px;
    display: flex;
    align-items: center;
}

.leagueDropdown {
    box-shadow: 0 0 6px 0px #00000052;
    border-radius: 3px;
    padding: 4px 6px;
    font-size: 10px;
    width: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.leagueOption {
    position: absolute;
    box-shadow: 0 0 6px 0px #00000052;
    margin-top: 10px;
    width: 100px;
    display: grid;
    justify-items: center;
    background-color: white;
    border-radius: 3px;
    padding: 0 8px;
    z-index: 9;
}

.league {
    border-bottom: 1px solid #eeeeee;
    cursor: pointer;
    width: 100%;
    padding: 3px;
    text-align: center;
    font-size: 12px;
}

    .league:hover {
        color: var(--green);
    }

.random {
    background-image: url('../assets/hint-archive/random-blue.svg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 15px;
    width: 17px;
}

.randomPickBtn:hover .random {
    background-image: url('../assets/hint-archive/random-white.svg');
}


/* Game Mode Style */

.toggle-switch {
    width: 50px;
    height: 25px;
    background-color: #363636;
    border-radius: 12.5px;
    position: relative;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
}

.modeName {
    /* UI Properties */
    text-align: center;
    letter-spacing: 0px;
    color: #404040;
    text-transform: capitalize;
    opacity: 1;
    width: max-content;
    font-size: 12px;
}

.toggle-switch.checked {
    background-color: #1497DE;
}

.toggle-handle {
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 2.5px;
    left: 2.5px;
    transition: transform 0.3s;
}

.toggle-switch.checked .toggle-handle {
    transform: translateX(25px);
}

.gameModeDiv {
    /*display: flex !important;*/
    /* max-width: 147px; */
    padding: 8px 1rem;
    width: 110px;
    /*height: 40px;*/
    border-radius: 20px;
    background: #fff;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.15);
    font-family: Kanit, sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    text-align: center;
    color: var(--text-color-dark);
    /* white-space: pre; */
    transition: all 0.3s linear;
    padding-top: 20px;
}

.nonClickable {
    pointer-events: none;
}

.mobileHr {
    display: none;
}

/* Snack Bar Style */
#archiveSnackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    /*background-color: #FF7276; /* Black background color */
    background: linear-gradient(90deg, var(--red) 10%, var(--orange) 100%);
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    left: 36%; /* Center the snackbar */
    bottom: 40px; /* 30px from the bottom */
    border-radius: 30px
}

    /* Show the snackbar when clicking on a button (class added with JavaScript) */
    #archiveSnackbar.show {
        visibility: visible; /* Show the snackbar */
        /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
          However, delay the fade out process for 2.5 seconds */
        -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }



#snackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    background: linear-gradient(90deg, var(--red) 10%, var(--orange) 100%);
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    left: 36%; /* Center the snackbar */
    bottom: 40px; /* 30px from the bottom */
    border-radius: 30px;
}

    /* Show the snackbar when clicking on a button (class added with JavaScript) */
    #snackbar.show {
        visibility: visible; /* Show the snackbar */
        /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
        -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }

#snackbarHeader {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    background: linear-gradient(90deg, var(--red) 10%, var(--orange) 100%);
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    left: 36%; /* Center the snackbar */
    bottom: 40px; /* 30px from the bottom */
    border-radius: 30px;
}

    /* Show the snackbar when clicking on a button (class added with JavaScript) */
    #snackbarHeader.show {
        visibility: visible; /* Show the snackbar */
        /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
        -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }

#successSnackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    background: #1497DE;
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar */
    bottom: 40px; /* 30px from the bottom */
    border-radius: 30px;
}

    /* Show the snackbar when clicking on a button (class added with JavaScript) */
    #successSnackbar.show {
        visibility: visible; /* Show the snackbar */
        /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
      However, delay the fade out process for 2.5 seconds */
        -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }

#unSuccessSnackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    background: linear-gradient(90deg, var(--red) 10%, var(--orange) 100%);
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar */
    bottom: 40px; /* 30px from the bottom */
    border-radius: 30px;
}

    /* Show the snackbar when clicking on a button (class added with JavaScript) */
    #unSuccessSnackbar.show {
        visibility: visible; /* Show the snackbar */
        /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
      However, delay the fade out process for 2.5 seconds */
        -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }
/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}


/* Attributes Styles */

.leagueAttributes {
    width: 49%;
    margin-left: 0;
    margin-right: 0;
    min-height: 145px;
}

.teamAttributes {
    width: 49%;
    margin-left: 0;
    margin-right: 0;
    min-height: 145px;
}

.container {
    max-width: 960px;
    padding: 0;
    justify-content: space-between;
}

.leagueLogo {
    border: 1px dashed #E5E5E5;
    border-radius: 5px;
    opacity: 1;
    width: 70px;
    height: 70px;
    padding: 10px;
    margin: 0px 5px;
}

.incorrectAttribute {
    border: solid 1px red !important;
}

.correctAttribute {
    border: solid 1px green !important
}

.teamLogo {
    border: 1px dashed #E5E5E5;
    border-radius: 5px;
    opacity: 1;
    width: 70px;
    height: 70px;
    padding: 10px;
    margin: 0px 5px;
}

.defaultLogo {
    opacity: 0.5 !important;
}

.correctHighlight {
    background-color: #13BC13;
    border-radius: 5px;
    position: absolute;
    top: 45%;
    width: 8.33%;
    height: 4px;
}

.incorrectHighlight {
    background: #ff00001a;
    border-radius: 5px;
    position: absolute;
    top: 45%;
    width: 8.33%;
    height: 4px;
}

.marker {
    position: absolute;
    width: 1px;
    height: 6px;
    background-color: #E5E5E5;
}

span.decadeSpan.centurySpan.correctDecade {
    left: -25px;
}

span.decadeSpan.centurySpan.incorrectDecade {
    left: -25px;
}

.decadeStart {
    Color: #707070;
    letter-spacing: 0px;
    font-size: 17px;
    background-color: black;
    padding: 4px;
    border-radius: 10px;
}

.decadeSpan {
    position: absolute;
    top: 10px;
    font-family: Kanit;
    color: #9D9D9D;
    opacity: 0.2;
    font-size: 12px;
    font-family: Kanit;
    left: -7px;
}

.centurySpan {
    color: #707070;
    opacity: 1;
    font-size: 18px;
    font-family: Kanit;
    top: 7px;
    left: -20px;
}

span.decadeSpan.centurySpan.incorrectDecade {
    left: -30px;
}

.decadeBar {
    position: absolute;
    top: 45%;
    left: 0;
    width: 100%;
    border-bottom: 4px solid #E5E5E5;
}

.decadeBarInitializer {
    position: absolute;
    top: 40%;
    /* left: 0; */
    width: 93%;
    justify-content: center;
    display: flex;
    color: #E5E5E5;
    border: 1px #E5E5E5 dashed;
    /* margin: auto; */
    padding: 5px;
    font-size: 15px;
    border-radius: 5px;
}

.decadeContainer {
    color: #707070;
    position: relative;
    width: 848px;
}

.correctDecade {
    background: #13bc131a;
    box-shadow: 0px 0px 30px #0000000D;
    border-radius: 5px;
    color: #13bc13 !important;
    padding: 0 5px;
    opacity: 1 !important;
    left: -14px;
}

.incorrectDecade {
    background: #ff00001a;
    box-shadow: 0px 0px 30px #0000000D;
    border-radius: 5px;
    color: #FF0000 !important;
    padding: 0 5px;
    opacity: 1 !important;
    left: -14px;
}

.calendarModal {
    max-height: 90% !important;
}

.modal-content {
    padding: 10px !important;
}

.welcomeHeaderLogo {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    margin-top: -15px;
}

.modalTitle {
    font-size: 26px;
    font-family: Kanit;
    text-align: center;
    font-weight: 500;
}

.welcomeModalTitle {
    text-align: center;
    font-weight: 600;
    margin: 15px 0px;
}

.welcomeModal {
    font-family: 'Poppins';
}

.overlayImage {
    width: 100%;
    border-radius: 12px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.helpIconClass {
    display: grid;
    justify-content: center;
    margin-top: 10px;
    /*width: 100;*/
    align-items: center;
}

.helpNoteClass {
    display: grid;
    align-content: space-evenly;
    margin-left: 15px;
}

.decade {
    position: absolute;
    width: 8.33%;
    height: 4px;
}

    .decade.lastDecade {
        top: 45%;
    }

.attributeStatus {
    display: grid;
    justify-content: space-around;
}

.title_text_size {
    font-size: 25px;
    font-weight: unset;
    margin-bottom: 15px;
    font-family: 'Kanit';
}

.emailValue {
    border-radius: 20px;
    padding: 5px;
    padding-left: 10px;
}

.top-sticky-content-sec {
    margin-left: 0px;
    margin-right: 0px;
}

.btn-primary.btn-header.menu.show {
    background: #404040;
}

.overLayHeader {
    display: flex;
    justify-content: space-between;
    margin: 10px;
}

.decadeInfo {
    margin-right: -15px;
}

@media only screen and (min-width: 1200px) {
    .score-available-menu {
        display: none;
    }
}

@media only screen and (min-width: 992px) {
    /*  --------------------------------------------   */
    /*     Header Styles - Start- Desktop              */
    /*  --------------------------------------------   */



    .card-container {
        padding: 40px 32px;
    }

    .points-available {
        font-size: 12px;
        bottom: -0.7rem;
        left: 31.5px;
    }



    .logo {
        border-radius: 0px 0px 50px 50px;
        padding: 15px 3rem 26px 3rem;
    }

    /*.logo {
        border-radius: 0px 0px 50px 50px;
        padding: 15px 0px 0px 0px;
        overflow: hidden;
    }*/

    .logo-img {
        width: 209.07px;
        height: auto;
    }

    .right-nav-items {
        padding: 15px 8px 26px 8px;
    }

    .menu {
        padding: 8px 1.5rem;
    }

    .menu-text {
        display: block;
    }

    .menu[aria-expanded="false"]::before {
        display: block;
    }

    .menu[aria-expanded="true"]::before {
        display: block;
    }

    .menu-icon {
        margin-left: 8px;
    }

    /*    Desktop Menu Styles for desktop  */
    .menu[aria-expanded="true"] + .dropdown-menu {
        width: 430px !important;
        height: auto !important;
        /* background: transparent !important; */
        top: 0 !important;
        flex-direction: column;
        display: flex !important;
        justify-content: center !important;
        /* align-items: flex-end !important;*/
        grid-gap: 0 !important;
        /*border: none !important;*/
        flex-wrap: wrap;
        align-content: space-around;
    }

    .how-to-play-mobile {
        display: none !important;
    }

    .dropdown-item {
        font-family: "Kanit", sans-serif;
        font-weight: 500;
        font-size: 15px;
        line-height: 24px;
        text-align: right;
        color: var(--text-color-dark);
        width: min-content !important;
        padding: 8px 1.5rem;
        margin-left: auto !important;
    }

        .dropdown-item:hover,
        .dropdown-item:focus,
        .dropdown-item:active {
            /*width: 97px;*/
            /*height: 37px;*/
            /*border-radius: 18.5px;*/
            background: #fff;
            box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.15);
        }

    .dropdown-item {
        font-family: "Kanit", sans-serif;
        font-weight: 500;
        font-size: 15px !important;
        width: unset !important;
        /*width: 100% !important;*/
        line-height: 24px;
        /*text-align: right;*/
        text-align: center;
        justify-content: center !important;
        padding: 12px 1.5rem !important;
        color: var(--text-color-dark) !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 25px !important;
        /*width: min-content !important;*/
        /*padding: 8px 1.5rem;*/
        margin-left: auto !important;
        transition: background-color .3s linear !important;
    }

        .dropdown-item:hover {
            /* background: transparent !important; */
            background: #FFFFFF !important;
        }

        .dropdown-item .share-icon {
            content: url("/assets/shareIcon.svg");
        }

        .dropdown-item .stats-icon {
            content: url("/assets/statusIcon.svg");
        }

        .dropdown-item .privacy-policy-icon {
            content: url("/assets/privacyPolicyIcon.svg");
        }

        .dropdown-item .user-feedback-icon {
            content: url("/assets/userFeedbackIcon.svg");
            max-width: 22.54px;
        }

    .score-available-menu {
        display: none;
    }
    /*  --------------------------------------------   */
    /*            Header Styles - End                  */
    /*  --------------------------------------------   */

}

@media only screen and (max-width: 992px) {
    /* :: -webkit-scrollbar {
        display: none !important;
    }

    .score-available {
        display: none;
    }

    .card-container {
        max-width: 960px;
        width: 100%;
        background: unset !important;
        border-radius: 10px;
        box-shadow: unset !important;
        margin: auto;
        padding: 24px 16px;
        margin-top: 32px;
    }

    .card-container-child {
        padding: unset !important;
    }

    .btn-submit, .skipButton {
        width: 100%;
        margin: 2px 0 2px 0;
    }

    .skip_submit_container {
        display: block;
    }

    .webViewSection {
        display: none;
    }

    .mobileViewSection {
        display: block;
    }

    .mobileView {
        position: fixed;
        bottom: 0;
        width: 90%;
    }

    .mobileBoard {
        position: absolute;
        top: 25%;
        height: 535px;
        overflow-x: auto;
        width: 89%;
        margin-top: 60px;
    }

    .mobile-card-margin {
        margin-top: 0px !important;
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
        margin: 0px;
        justify-content: flex-start !important;
        font-size: 15px;
    }

        .mobile-card-margin::-webkit-scrollbar {
            display: none !important;
        }

    .attempts-section {
        position: relative;
    }

        .attempts-section h4 {
            display: none;
        }

        .attempts-section .attempts-section-mobile-fix {
            position: fixed;
            display: flex !important;
            flex-direction: column !important;
            align-items: flex-end;
            top: 40%;
            right: 8px;
            background: #fff !important;
            padding: 6px;
            border-radius: 7px 0px 0px 7px;
        }

    .leagueAttributes {
        padding: 10px 0px;
        background: #fff !important;
        margin-top: 0px;
        padding: 5px 10px 10px 10px;
        min-height: 116px !important;
    }

    .teamAttributes {
        width: 48% !important;
        margin-left: 0;
        margin-right: 0;
        padding: 10px 0px;
        background: #fff !important;
        margin-top: 0px;
        padding: 5px 10px 10px 10px;
        min-height: 116px !important;
    }*/

    .mobile-card-container {
        /* max-width: 955px !important; */
        display: flex !important;
        justify-content: space-evenly !important;
        flex-wrap: wrap;
        margin-top: 20px;
    }

    .d-flex.justify-content-center.mobile-card-margin .leagueLogo:first-child {
        margin-left: auto !important;
    }

    .d-flex.justify-content-center.mobile-card-margin .leagueLogo:last-child {
        margin-right: auto !important;
    }


    .d-flex.justify-content-center.mobile-card-margin .teamLogo:first-child {
        margin-left: auto !important;
    }

    .d-flex.justify-content-center.mobile-card-margin .teamLogo:last-child {
        margin-right: auto !important;
    }

    .leagueAttributes .container-title {
        width: auto;
        height: auto;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 10px;
        opacity: 1;
        color: #1497DE;
        text-transform: capitalize;
        opacity: 1;
        text-align: center;
        font-weight: 600;
        margin-left: auto;
        margin-right: auto;
        /* top: -10px !important; */
        margin-top: 0;
        padding: 1px;
        display: flex;
        justify-content: center;
        font-size: 17px;
    }

    .teamAttributes .container-title {
        width: auto;
        height: auto;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 10px;
        opacity: 1;
        color: #1497DE;
        text-transform: capitalize;
        opacity: 1;
        text-align: center;
        font-weight: 600;
        margin-left: auto;
        margin-right: auto;
        /* top: -10px !important; */
        margin-top: 0;
        padding: 1px;
        display: flex;
        justify-content: center;
        font-size: 17px;
    }

    .mobile-scrolling-card {
        position: absolute;
        height: auto;
        /*overflow-x: scroll;*/
        padding-left: 16px;
        background: white !important;
        width: 80%;
        margin-top: 0;
        /* float: right; */
        right: 0;
    }

        .mobile-scrolling-card .container-title {
            width: 12%;
            height: auto;
            background: #FFFFFF 0% 0% no-repeat padding-box;
            border-radius: 0;
            opacity: 1;
            color: #1497DE;
            position: fixed;
            text-transform: capitalize;
            opacity: 1;
            text-align: left;
            font-weight: 600;
            top: 25.5%;
            margin-left: auto;
            left: 6%;
            margin-right: auto;
            /* top: -10px !important; */
            margin-top: 0;
            padding: 4px;
            display: flex;
            justify-content: center;
            z-index: 999;
        }

        .mobile-scrolling-card::-webkit-scrollbar {
            width: 0 !important;
            display: none;
        }

    .decadeContainer {
        color: #707070;
        position: relative;
        margin-top: 4px;
        margin-bottom: 16px;
    }

    .marker {
        height: 8px;
    }

    .decadeSpan {
        position: absolute;
        top: 10px;
        font-family: Kanit;
        color: #9D9D9D;
        opacity: 2.2;
        font-size: 14px;
        font-family: Kanit;
    }

    .decadeContainer {
        color: #707070;
        position: relative;
        margin-top: 0px !important;
    }

    .blazored-typeahead__results {
        max-height: 180px !important;
    }

    .blazored-typeahead {
        border: unset !important;
    }

    .c-input-error {
        border: unset;
    }

    .c-input-success {
        border: unset;
    }

    .s-input .blazored-typeahead .modified {
        border: unset !important;
    }

    .s-input .blazored-typeahead__input-mask-wrapper--disabled {
        background-color: #f8f8f8 !important;
    }

    .attributeImage {
        width: 30px;
        height: 30px;
    }

    .leagueLogo, .teamLogo {
        width: 50px !important;
        height: 50px !important;
        margin: 0px 5px 10px 5px !important;
    }

    .logoInitializer {
        width: 50px !important;
        height: 50px !important;
        margin: 0px 5px 10px 5px !important;
    }

    .card-title-m .container-title {
        width: 20%;
        background: #ffffff 0% 0% no-repeat padding-box;
        position: absolute;
        border-radius: 10px 0px 0px 10px;
        color: #1497DE;
        text-transform: capitalize;
        opacity: 1;
        text-align: center;
        font-weight: 500;
        height: auto;
        padding-left: 0;
        padding: 8px;
        z-index: 1;
        top: -10px;
        font-size: 16px;
        left: 0%;
        text-align: justify;
    }

    .card-title-m {
        border-radius: 10px;
        position: relative;
        margin: 15px 0px;
        background: #fff !important;
        height: 64px;
    }

    .decadeContainer {
        left: 5%;
    }

    /*  .centeredClue {
        top: 35% !important;
    }
*/
    .givenAnswer {
        padding: 0px 7px;
        margin-bottom: 0px;
        background-color: bisque;
        border-radius: 5px;
    }

    .desktop-right-menu {
        width: unset !important;
    }
}

@media only screen and (max-width: 767px) {
    .layOutInfo {
        display: none !important;
    }

    :: -webkit-scrollbar {
        display: none !important;
    }

    .score-available {
        display: none;
    }

    .card-container {
        max-width: 960px;
        width: 100%;
        background: unset !important;
        border-radius: 10px;
        box-shadow: unset !important;
        margin: auto;
        padding: 24px 16px;
        margin-top: 32px;
    }

    .card-container-child {
        padding: unset !important;
        width: 100%;
    }

    .btn-submit, .skipButton {
        width: 100%;
        margin: 2px 0 2px 0;
    }

    .skip_submit_container {
        display: block;
        margin-right: 16px;
    }

    .webViewSection {
        display: none;
    }

    .mobileViewSection {
        display: block;
    }

    .mobileView {
        position: fixed;
        bottom: 0;
        width: 90%;
    }

    .submitStickyBtn.mobileView {
        width: 100%
    }

    .mobileBoard {
        position: absolute;
        top: 25%;
        height: 535px;
        overflow-x: auto;
        width: 89%;
        margin-top: 60px;
    }

    .mobile-card-margin {
        margin-top: 0px !important;
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
        margin: 0px;
        justify-content: flex-start !important;
        font-size: 15px;
    }

        .mobile-card-margin::-webkit-scrollbar {
            display: none !important;
        }


    .attempts-section {
        display: none;
    }

        .attempts-section h4 {
            display: none;
        }

        .attempts-section .attempts-section-mobile-fix {
            position: fixed;
            display: flex !important;
            flex-direction: column !important;
            align-items: flex-end;
            top: 40%;
            right: 0px;
            background: #fff !important;
            padding: 6px;
            border-radius: 7px 0px 0px 7px;
        }

    .leagueAttributes {
        padding: 10px 0px;
        background: #fff !important;
        margin-top: 0px;
        padding: 5px 10px 10px 10px;
        min-height: 103px !important;
    }

    .teamAttributes {
        width: 48% !important;
        margin-left: 0;
        margin-right: 0;
        padding: 10px 0px;
        background: #fff !important;
        margin-top: 0px;
        padding: 5px 10px 10px 10px;
        min-height: 103px !important;
    }

    .mobile-card-container {
        /* max-width: 955px !important; */
        display: flex !important;
        justify-content: space-evenly !important;
        flex-wrap: wrap;
        margin-top: 20px;
    }

    .d-flex.justify-content-center.mobile-card-margin .leagueLogo:first-child {
        margin-left: auto !important;
    }

    .d-flex.justify-content-center.mobile-card-margin .leagueLogo:last-child {
        margin-right: auto !important;
    }


    .d-flex.justify-content-center.mobile-card-margin .teamLogo:first-child {
        margin-left: auto !important;
    }

    .d-flex.justify-content-center.mobile-card-margin .teamLogo:last-child {
        margin-right: auto !important;
    }

    .leagueAttributes .container-title {
        width: auto;
        height: auto;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 10px;
        opacity: 1;
        color: #1497DE;
        text-transform: capitalize;
        opacity: 1;
        text-align: center;
        font-weight: 500;
        margin-left: auto;
        margin-right: auto;
        /* top: -10px !important; */
        margin-top: 0;
        padding: 1px;
        display: flex;
        justify-content: center;
    }

    .teamAttributes .container-title {
        width: auto;
        height: auto;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 10px;
        opacity: 1;
        color: #1497DE;
        text-transform: capitalize;
        opacity: 1;
        text-align: center;
        font-weight: 500;
        margin-left: auto;
        margin-right: auto;
        /* top: -10px !important; */
        margin-top: 0;
        padding: 1px;
        display: flex;
        justify-content: center;
    }

    .mobile-scrolling-card {
        position: absolute;
        height: auto;
        overflow-x: scroll;
        padding-left: 16px;
        background: white !important;
        width: 80%;
        margin-top: 0;
        /* float: right; */
        right: 0;
        /*height: -webkit-fill-available;*/
    }

        .mobile-scrolling-card .container-title {
            width: 12%;
            height: auto;
            background: #FFFFFF 0% 0% no-repeat padding-box;
            border-radius: 0;
            opacity: 1;
            color: #1497DE;
            position: fixed;
            text-transform: capitalize;
            opacity: 1;
            text-align: left;
            font-weight: 600;
            top: 25.5%;
            margin-left: auto;
            left: 6%;
            margin-right: auto;
            /* top: -10px !important; */
            margin-top: 0;
            padding: 4px;
            display: flex;
            justify-content: center;
            z-index: 999;
        }

        .mobile-scrolling-card::-webkit-scrollbar {
            width: 0 !important;
            display: none;
        }

    .decadeContainer {
        color: #707070;
        position: relative;
        margin-top: 4px;
        margin-bottom: 16px;
    }

    .marker {
        height: 8px;
    }

    .decadeSpan {
        position: absolute;
        top: 10px;
        font-family: Kanit;
        color: #9D9D9D;
        opacity: 2.2;
        font-size: 14px;
        font-family: Kanit;
    }

    span.decadeSpan.centurySpan.incorrectDecade {
        left: -25px;
    }

    .decadeContainer {
        color: #707070;
        position: relative;
        margin-top: 0px !important;
    }

    .guessPlayer {
        display: none;
    }

    .blazored-typeahead__results {
        max-height: 180px !important;
    }

    .blazored-typeahead {
        border: unset !important;
    }

    .c-input-error {
        border: unset;
    }

    .c-input-success {
        border: unset;
    }

    .s-input .blazored-typeahead .modified {
        border: unset !important;
    }

    .s-input .blazored-typeahead__input-mask-wrapper--disabled {
        background-color: #f8f8f8 !important;
    }

    .attributeImage {
        width: 30px;
        height: 30px;
    }

    .leagueLogo, .teamLogo {
        width: 50px !important;
        height: 50px !important;
        margin: 0px 5px 10px 5px !important;
    }

    .logoInitializer {
        width: 50px !important;
        height: 50px !important;
        margin: 0px 5px 10px 5px !important;
    }

    .card-title-m .container-title {
        width: 20%;
        background: #ffffff 0% 0% no-repeat padding-box;
        position: absolute;
        border-radius: 10px 0px 0px 10px;
        color: #1497DE;
        text-transform: capitalize;
        opacity: 1;
        text-align: center;
        font-weight: 500;
        height: auto;
        padding-left: 0;
        padding: 8px;
        z-index: 1;
        top: -10px;
        font-size: 16px;
        left: 0%;
        text-align: justify;
        margin-left: 3px;
        line-height: 20px;
        margin-top: 13px;
    }

    .card-title-m {
        border-radius: 10px;
        position: relative;
        margin: 15px 0px;
        background: #fff !important;
        height: 64px;
        margin-right: 14px;
    }

    .decadeContainer {
        left: 5%;
    }

    .btn-submit {
        height: 50px !important;
        margin-bottom: 10px;
        border-radius: 25px;
    }

    .footer-text {
        display: none;
    }

    .centeredClue {
        top: 35% !important;
    }

    .givenAnswer {
        padding: 0px 7px;
        margin-bottom: 0px;
        background-color: bisque;
        border-radius: 5px;
    }

    .desktop-right-menu {
        width: unset !important;
    }

    .menu-icon img {
        margin-top: -2px;
    }

    #dropdownMenuButton {
        padding: 2px 17px;
        margin: 0 4px;
        border-radius: 20px;
    }

    .logo {
        padding: 6px 1.5rem 16px 1.5rem;
    }

    .logo-img {
        width: 110.58px;
        height: auto;
    }



    .container.top-sticky-content-sec.row {
        margin-top: 16px;
        margin-left: 0 !important;
    }

    header.position-relative {
        position: fixed !important;
        top: 0;
        width: 100%;
        z-index: 999;
    }

    section.px-2.px-sm-4.sticky-info-sec {
        position: fixed;
        top: 60px;
        z-index: 9;
        width: 100%;
    }

    body {
        border: none;
    }

    .active-decades {
        margin: 5px 0 !important;
    }

    section.px-2.px-sm-4.CLueSection {
        margin-top: 240px;
    }

    #score {
        left: 15px;
        position: fixed !important;
        top: -8px !important;
    }

    section.px-2.px-sm-4.CLueSection {
        margin-top: 10px;
        position: fixed;
        top: 240px;
        bottom: 0 !important;
        /* height: auto; */
        /* min-height: 50vh; */
        /* max-height: 57vh; */
        overflow: scroll;
        z-index: 1;
        /*width: 95%;*/
        width: 100%;
        /*height: calc(100vh - 320px);*/
        margin-bottom: 80px;
    }

        section.px-2.px-sm-4.CLueSection.centeredClue {
            top: 37% !important;
            /*height: calc(100vh - 70%);*/
        }

    .hardGameClues {
        top: 65px !important;
    }

    .d-flex.justify-content-center.align-items-center.gap-1.attempts-section-mobile-fix.hardGameClues {
        top: 67px !important;
    }

    .cardDetail {
        margin-top: 0 !important;
    }

    .container.d-flex.top-sticky-content-sec.row .col-md-6.col-sm-6.card-container.leagueAttributes {
        width: 50%;
    }

    .CLueSection .card-container.d-flex.flex-column {
        margin-top: 0;
        padding-top: 10px;
    }

    .card-container-child:only-child .clueBox {
    }

    .centeredClue .card-container.d-flex.flex-column.cardDetail {
        margin-right: 16px;
        /*height: calc(100vh - 635px);*/
        display: flex !important;
        align-items: center;
        justify-content: space-around;
    }

    .centeredClue {
        bottom: auto;
        width: 100%;
    }


    .active-right .decadeBarInitializer {
        top: 14%;
        padding: 0px;
        min-height: 45px;
        align-items: center;
    }

    /* for modals */
    .modal-dialog-scrollable .modal-content {
        max-height: 70%;
        overflow: hidden;
    }

    .modalTitle {
        font-size: 22px;
    }

    .modalDetails {
        font-size: 15px;
    }

    .active-decade.card-container {
        padding: 9.5px 12px !important;
        background: #ffffff !important;
        display: flex;
        font-weight: 400 !important;
        align-items: center;
        margin-top: 5px;
    }

        .active-decade.card-container .title-box {
            transform: none;
            left: auto;
            position: relative;
            top: 0;
        }

        .active-decade.card-container .title {
            padding: 0;
            font-size: 16px;
            font-weight: 500;
            text-align: left;
            line-height: 18px;
        }

        .active-decade.card-container .active-right-section {
            width: 100%;
            overflow-x: scroll;
            padding-left: 16px;
            height: auto;
            /*margin-top: 13px;*/
        }

    .emptyDecades {
        padding: 0 !important;
    }

    .active-right-section .decadeContainer {
        padding: 0 !important;
        margin-left: 0 !important;
        margin-bottom: 31px;
    }

    /*td:nth-child(odd) {*/
    /* width: 12%;*/
    /*display: flex !important;
        justify-content: center;
    }*/
}

@media only screen and (min-width: 768px) {
    .table-stats {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 1rem;
    }

    td {
        padding: 8px !important;
    }

    .table-entry {
        font-size: 17px;
    }

    .modal-content {
        padding: 20px !important;
    }
}

@media (max-width: 768px) {
    #score {
        left: 15px;
    }

    .mobile_game_end_text {
        display: block;
        margin-top: 15px;
        font-size: 18px;
        font-family: 'POPPINS';
    }

    .desktop_game_end_text {
        display: none;
    }

    .result-container {
        width: 100%;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.05);
        margin: auto;
        padding: 24px 10px;
        margin-top: 20px;
    }

    .finalScoreBoard {
        margin: 15px auto;
        width: fit-content;
        padding: 0 15px 15px 15px;
    }

    .chuckle-brozen-img {
        margin: 0px auto;
        margin-top: -50px;
    }

    .badgeLogo {
        width: 60px;
    }

    .footer {
        display: none;
    }

    .scrollableClues {
        margin-top: 20px !important;
    }

    .desktopHr {
        display: none;
    }

    .mobileHr {
        display: block;
    }

    .gameEndButtons {
        font-size: 16px;
        padding: 8px 10px;
    }

    .archive-info {
        position: fixed;
        top: 50px;
        margin-top: unset !important;
        width: 100%;
    }
}

@media only screen and (min-width: 576px) {
    /* utils */

    .paragraph-text-sm {
        font-size: 14px;
    }

    .paragraph-text {
        font-size: 18px;
    }

    .sports-trivia-heading {
        font-size: 22px;
    }

    .sports-trivia-desc {
        font-size: 18px;
        max-width: 580px;
    }

    .c-input {
        font-size: 16px;
    }

    .list-number {
        font-size: 18px;
    }

    .wrongAnswer {
        font-size: 14px;
    }

    .modal-body {
        padding: 30px 1.5rem;
    }

    .userFeedback-modal {
        padding: 5rem 0;
    }

    .feedback-icon {
        width: 63px;
        height: 63px;
    }

    .score-display {
        display: block !important;
    }
}

@media(max-width: 420px) {
    /*  .card-container {
        font-size: 10px;
    }*/

    .wrongAnswer {
        font-size: 14px;
    }

    .skipButton {
        font-size: 18px;
    }

    /*    .card-title-m .container-title {
        line-height: 18px;
    }*/

    .mobile-card-margin {
        font-size: 10px !important;
    }

    .menu-card {
        font-size: 15px;
    }

    .attributeIcons {
        margin: -5px 10px 10px 10px;
        display: flex !important;
        gap: 5px;
    }

    .answerWithAttribute {
        display: flex;
        justify-content: space-between;
        padding-right: 10px;
    }
}

@media only screen and (max-width: 320px) {
    /*.card-container {*/
    /*width: 80%;*/
    /*max-width: 200px;
    }*/

    .dropdown-item {
        font-size: 22px !important;
        width: 220px !important;
    }

    #score {
        left: 0px !important;
    }

    .logo {
        border-radius: 0px 0px 30px 30px;
        padding: 6px 16px 10px 16px;
    }

    .logo-img {
        width: 100px;
        height: auto;
    }

    .right-nav-items {
        padding: 5px 2px 5px 2px;
    }

    .btn-primary {
        /*        border: none;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;*/
        padding: 6px 16px;
        /*margin: 0 4px;
        border-radius: 20px;
        background: linear-gradient(90deg, var(--blue) 20%, var(--green) 100%);
        filter: drop-shadow(0px 0px 30px rgba(0, 0, 0, 0.15));
        transition: 0.3s;*/
    }

    .score-available {
        font-family: Kanit, sans-serif;
        font-weight: 500;
        font-size: 12px;
        line-height: 13px;
        text-align: center;
        color: var(--text-color-dark);
        position: absolute;
        bottom: -10px;
        left: 7px;
        word-break: break-word;
        width: 74px !important;
        padding-top: 4px;
    }

    .top-0 {
        top: 5px !important;
    }

    #infoImage {
        height: 15px !important;
    }

    .gameEndButtons {
        font-size: 16px;
        padding: 8px 10px;
    }
}

@media (max-width: 320px) {
    .btn-submit {
        /*width: 65px;*/
        font-size: 14px;
        border-radius: 20px;
    }

    /*  .s-input .blazored-typeahead__clear {
        margin-right: 50px !important;
    }*/

    .skipButton {
        /*width: 40px !important;*/
        font-size: 12px;
        height: 20px
    }
}

@media (min-width: 300px) and (max-width: 400px) {
    .gameEndButtons {
        font-size: 14px !important;
    }
}

.active-decade {
    /* padding-top: 116px; */
}

.newdecadeBarInitializer {
    justify-content: center;
    display: flex;
    color: #E5E5E5;
    border: 1px #E5E5E5 dashed;
    /* margin: auto; */
    padding: 5px;
    font-size: 15px;
    border-radius: 5px;
}

.active-decade.card-container {
    padding-top: 0;
    /*font-weight: 600;*/
    background: #ffffff 0% 0% no-repeat padding-box;
    padding: 0;
    position: relative;
}

.active-right-section .decadeContainer {
    padding: 40px 32px;
    margin-left: 35px;
}

.emptyDecades {
    padding: 22px 25px;
}

.title {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border-radius: 10px;
    color: #1497DE;
    text-transform: capitalize;
    opacity: 1;
    display: inline-block;
    font-weight: 600;
    padding: 3px 54px;
    /* top: -25px; */
    text-align: center;
    /* position: relative; */
}

.title-box {
    top: 0;
    transform: translate(-50%, -50%);
    left: 50%;
    text-align: center;
    position: absolute;
}

.gif-container {
    /* width: 100%;
    display: flex;
    margin-bottom: 25px;
    justify-content: center;*/
    width: 60%;
    display: flex;
    margin: auto;
    margin-bottom: 25px;
    justify-content: center;
    position: relative;
}

.gif {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0px 20px 20px -10px black;
}

.d-list-item {
    display: list-item;
}

.card {
    width: 22%;
    margin-left: 10px;
    padding: 5px;
    border: 0px;
    background: white;
    height: 65px;
}

.totalPoints {
    margin-left: 10px;
    margin-right: 10px;
    padding: 10px;
    border-radius: 10px;
    background: white;
    height: 75px;
}

.allCards {
    margin-left: auto;
    margin-top: 10px;
}

.bt_Points {
    font-size: 17px !important;
}

.title_text_size {
    font-size: 25px;
    font-weight: unset;
    margin-bottom: 15px;
    font-family: 'Kanit';
}

.cardLable {
    margin-bottom: 0px !important;
    margin-top: auto;
    font-weight: bold;
}

.Guess {
    margin-top: 20px;
    margin-bottom: 15px;
}

.bottomTitle {
    font-size: 13px;
    color: grey
}

.Curr_Streak {
    color: #FF7F00;
}

.Long_Streak {
    color: #13BC13;
}

.Game_Played {
    color: #1497DE;
}

.Win_Rate {
    color: #404040;
}


.dayStats {
    display: flex;
    justify-content: center;
    margin: 0px 0px 20px 0px;
    font-family: 'Poppins';
    font-size: 18px;
    color: gray;
}

.ytdPoints {
    font-size: 30px;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
}

.triangle-right {
    width: 0;
    height: 0;
    position: absolute;
    margin-left: -60px;
    margin-top: 5px;
    border-top: 7px solid transparent;
    border-radius: 5px;
    border-left: 30px solid #1497de;
    border-bottom: 7px solid transparent;
}

.fail-triangle {
    border-left: 30px solid var(--red);
}

.correctClue {
    color: var(--green);
}

.failClue {
    color: var(--red);
}

.clueListTitle {
    justify-content: center;
    display: flex;
    font-size: 20px;
    margin-bottom: 10px;
}

.clue-foam-finger {
    position: absolute;
    margin-left: -60px;
    transform: scaleX(-1) rotate(270deg);
}

.poweredby-gif {
    width: 100px;
    /* bottom: 100px; */
    position: absolute;
    bottom: 0;
    right: 0;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
}


.urlSeeder {
    width: 1px;
    height: 1px;
    display: none;
}

@media only screen and (max-width: 465px) {
    .card {
        width: 45%;
        margin-bottom: 10px
    }

    .dayStats {
        margin: 0px 0px 15px 0px;
        /*font-size: 15px;*/
    }

    .stateShare {
        gap: 0px;
    }

    .poweredby-gif {
        width: 60px;
    }

    .ytdPoints {
        font-size: 18px;
    }

    .ytd-number-container {
        padding: 5px;
        height: 30px;
        font-size: 20px;
        min-width: 40px;
    }
}


.blazored-typeahead__active-item {
    background-color: unset !important;
    border-top: unset !important;
    border-bottom: unset !important;
    color: unset !important;
    cursor: unset !important;
}

    .blazored-typeahead__active-item:hover, .blazored-typeahead__result:hover, .blazored-typeahead__result:focus {
        background-color: #007bff !important;
        border-top: 1px solid #007bff !important;
        border-bottom: 1px solid #007bff !important;
        color: #fff !important;
        cursor: pointer !important;
    }


.attributeIcons {
    display: none;
}


.outlast-preview-container {
    cursor:pointer;
    width: 80%;
    padding: 10px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    margin: auto;
    /*margin-bottom: 20px;*/
    justify-content: center;
    position: relative;
    background: #000000;
    align-items: center;
}


.mb-26{
    margin-bottom: 26px;
}

.mb-10{
    margin-bottom: 10px;
}