:root {
    --my-black: #0000004f;
    --my-white: #eeeeee;
    --nba-orange: #f26d00;
    --background-color: #26262D;
    --navbar-black: #161619;

    /* New color */
    --high-purple: #8B1AE7;
    --low-purple: #E6007E;

    /* teams colors (https://teamcolorcodes.com/nba-team-color-codes/) */
    --1610612737: linear-gradient(135deg, #e03a3e, #c1d32f, #26282a);
    /* 'ATL' */
    --1610612738: linear-gradient(135deg, #007a33, #ba9653, #963821);
    /* 'BOS' */
    --1610612739: linear-gradient(135deg, #860038, #041e42, #fdbb30);
    /* 'CLE' */
    --1610612740: linear-gradient(135deg, #0c2340, #c8102e, #85714d);
    /* 'NOP' */
    --1610612741: linear-gradient(135deg, #ce1141, #000000);
    /* 'CHI' */
    --1610612742: linear-gradient(135deg, #00538c, #002b5e, #b8c4ca);
    /* 'DAL' */
    --1610612743: linear-gradient(135deg, #0e2240, #fec524, #8b2131, #1d428a);
    /* 'DEN' */
    --1610612744: linear-gradient(135deg, #1d428a, #ffc72c);
    /* 'GSW' */
    --1610612745: linear-gradient(135deg, #ce1141, #000000, #c4ced4);
    /* 'HOU' */
    --1610612746: linear-gradient(135deg, #c8102e, #1d428a, #bec0c2);
    /* 'LAC' */
    --1610612747: linear-gradient(135deg, #552583, #f9a01b, #000000);
    /* 'LAL' */
    --1610612748: linear-gradient(135deg, #98002e, #f9a01b, #000000);
    /* 'MIA' */
    --1610612749: linear-gradient(135deg, #00471b, #eee1c6, #0077c0, #000000);
    /* 'MIL' */
    --1610612750: linear-gradient(135deg, #0c2340, #236192, #9ea2a2, #78be20);
    /* 'MIN' */
    --1610612751: linear-gradient(135deg, #000000, #ffffff);
    /* 'BKN' */
    --1610612752: linear-gradient(135deg, #006bb6, #f58426, #bec0c2, #000000);
    /* 'NYK' */
    --1610612753: linear-gradient(135deg, #0077c0, #c4ced4, #000000);
    /* 'ORL' */
    --1610612754: linear-gradient(135deg, #002d62, #fdbb30, #bec0c2);
    /* 'IND' */
    --1610612755: linear-gradient(135deg, #006bb6, #ed174c, #002b5c, #c4ced4);
    /* 'PHI' */
    --1610612756: linear-gradient(135deg, #1d1160, #e56020, #000000, #63727a, #F9AD1B, #b95915, #BEC0C2);
    /* 'PHX' */
    --1610612757: linear-gradient(135deg, #E03A3E, #000000);
    /* 'POR' */
    --1610612758: linear-gradient(135deg, #5A2D81, #63727A, #000000);
    /* 'SAC' */
    --1610612759: linear-gradient(135deg, #C4CED4, #000000);
    /* 'SAS' */
    --1610612760: linear-gradient(135deg, #007AC1, #EF3B24, #002D62, #FDBB30);
    /* 'OKC' */
    --1610612761: linear-gradient(135deg, #CE1141, #000000, #A1A1A4, #B4975A);
    /* 'TOR' */
    --1610612762: linear-gradient(135deg, #002B5C, #00471B, #F9A01B);
    /* 'UTA' */
    --1610612763: linear-gradient(135deg, #5D76A9, #12173F, #F5B112, #707271);
    /* 'MEM' */
    --1610612764: linear-gradient(135deg, #002B5C, #E31837, #C4CED4);
    /* 'WAS' */
    --1610612765: linear-gradient(135deg, #C8102E, #1D42BA, #BEC0C2, #002D62);
    /* 'DET' */
    --1610612766: linear-gradient(135deg, #1D1160, #00788C, #A1A1A4);
    /* 'CHA' */
    /* End teams colors */

    /* Bracket properties on mobile */
    --qdt-width: 100px;
    --qdt-height: 80px;
    --qdt-margin-top: 6px;
    --qdt-margin-bottom: 6px;
    --qdt-margin-right: 50px;
    --qdt-border: 2px;
    --qdt-background: #161619;
    --qdt-box-shadow: 0 0 20px 2px #0e0e0e;
    --qdt-font-family: "Bayon", sans-serif;
    --qdt-font-size: 20px;
    --qdt-font-weight: 400;
    /* End Bracket properties */

    /* Fonts */
    --chakra: "Chakra Petch", sans-serif;
    --chakra-title: normal normal 700 25px "Chakra Petch", sans-serif;
    --bayon: "Bayon", sans-serif;
    --dm-sans: "DM Sans", sans-serif;
}

/* Bracket properties on large screen */
@media screen and (min-width: 768px) {
    :root {
        --qdt-width: 160px;
        --qdt-height: 100px;
        --qdt-margin-top: 12px;
        --qdt-margin-bottom: 12px;
        --qdt-margin-right: 80px;
        --qdt-border: 2px;
    }
}

/* End Bracket properties */

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

@font-face {
    font-family: Nautilus;
    src: url("fonts/Nautilus.otf") format("opentype");
}

.js-disabled {
    position: absolute;
    top: 55px;
    left: 10%;
    right: 10%;
    width: 80%;
    /* height: 100px; */
    background-color: rgb(255, 0, 0);
    border: 2px solid white;
    border-radius: 25px;
    box-shadow: var(--qdt-box-shadow);
    z-index: 1000;
}

.js-disabled p {
    margin: 20px;
}

/* Disable top border in table that comes from CSS */
.table>tbody>tr>td {
    border-top: none !important;
}

/* Head */

/* Head end */

/* Body */
body {
    background-color: #26262D;
    font-family: var(--dm-sans);
    font-size: 20px;
    color: #eeeeee;
    user-select: none;
}

/* Hide scollbar mantaining functionality */
body::-webkit-scrollbar {
    /* chrome, safari, opera */
    display: none;
}

body {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

h1,
h2 {
    font-size: 25px;
    /* font-family: 'Nautilus', 'PT Serif', cursive; */
    font-family: "Chakra Petch", sans-serif;
    font-weight: 700;
    font-style: italic;
}

h3 {
    font-size: 20px;
    font-family: "Bayon", sans-serif;
    font-weight: 400;
}

.section-title {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.section-title>span {
    margin-right: 10px;
}

.section-title::after {
    background: white;
    height: 2px;
    flex: 1;
    content: '';
}

/* Invert calendar color (https://stackoverflow.com/questions/62162645/change-color-of-calendar-icon-in-html-date-input) */
::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

/* Body end */

/* Navbar */

.mynavbar {
    height: 55px;
    z-index: 50;
    /* overflow: hidden; */
    position: fixed;
    top: 0;
    width: 100%;
    /* font-size: .875rem; */
    background-color: #161619;
    border-color: #161619;
    border-radius: 0;
}

.mynavbar .container {
    padding-left: 0px;
    padding-right: 0px;
}

@media (min-width: 768px) {
    .mynavbar .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

.main {
    margin-top: 55px;
}

.brand {
    float: left;
    height: 50px;
    padding: 7px 20px;
    font-size: 18px;
    line-height: 20px;
}

.brand>img {
    display: block;
    vertical-align: middle;
}

.navbar-header {
    height: 55px !important;
}

.hamburger {
    position: relative;
    float: left;
    display: block;
    /* margin-left: 15px; */
    padding: 9px 10px;
    margin-top: 10px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

.hamburger .icon-bar {
    background-color: #eeeeee;
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
}

.hamburger .icon-bar+.icon-bar {
    margin-top: 4px;
}

.mynavbar-right {
    float: right;
    position: relative;
    display: block;
}

.mynavbar-right .profile-pic-border {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    margin-top: 7px;
}

@media (min-width: 768px) {
    .mynavbar-right .profile-pic-border {
        margin-right: 0;
    }
}

.mynavbar-right .profile-pic-border>.profile-pic {
    max-width: 33px;
    min-width: 33px;
    min-height: 35px;
    max-height: 35px;
    height: auto;
    width: auto;
    border-radius: 20%;
}

.mynavbar-right>img {
    width: 35px;
    height: 35px;
    margin-top: 10px;
    margin-right: 10px;
}

.mynavbar-right>img.no-profile-pic {
    width: 40px;
    height: 40px;
    margin-top: 7px;
}

.mynavbar-right>img.fp-logo {
    margin-right: 5px;
}

.sidenav {
    height: 100%;
    /* 100% Full-height */
    width: 0;
    /* 0 width - change this with JavaScript */
    position: fixed;
    /* Stay in place */
    z-index: 51;
    /* Stay on top */
    top: 0;
    /* Stay at the top */
    left: 0;
    background-color: black;
    /* Black*/
    overflow-x: hidden;
    /* Disable horizontal scroll */
    padding-top: 60px;
    /* Place content 60px from the top */
    transition: 0.5s;
    /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 5px;
    text-decoration: none;
    font-size: 25px;
    color: #eeeeee;
    display: block;
    transition: 0.3s;
    font: var(--chakra-title);
    /* width: calc(100% - 29px); */
    display: flex;
    align-items: center;
}

@media (min-width: 768px) {
    .sidenav a {
        padding-left: 32px;
    }
}

.sidenav a>img {
    min-height: 40px;
    min-width: 40px;
    max-width: 40px;
    max-height: 40px;
    width: auto;
    height: auto;
    padding-bottom: 0;
}

.sidenav a>span {
    margin-left: 10px;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
    /* color: #f1f1f1; */
    background-image: linear-gradient(to right, var(--high-purple), var(--low-purple));
}

/* .sidenav a:hover:after {
    content: " ";
    position: absolute;
    background: linear-gradient(45deg, transparent 50%, #f39200 50%);;
    width: calc(56px / 1.4142135623730950488016887242097);
    height: calc(56px / 1.4142135623730950488016887242097);
    right: 10px;
    transform: rotate(45deg);
} */

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    font-size: 36px;
    padding-left: 10px;
}

.sidenav .closebtn:hover {
    color: #f1f1f1;
    background-image: none;
}

.sidenav .closebtn:hover:after {
    content: none;
}

@media (min-width: 768px) {
    .sidenav .closebtn {
        /* 25px is 10px hamburger padding-left + 15 px container padding-left */
        left: calc(((100vw - 750px)/2) + 25px);
        padding-left: 0px;
    }
}

@media (min-width: 992px) {
    .sidenav .closebtn {
        /* 25px is 10px hamburger padding-left + 15 px container padding-left */
        left: calc(((100vw - 970px)/2) + 25px);
        padding-left: 0px;
    }
}

@media (min-width: 1200px) {
    .sidenav .closebtn {
        /* 25px is 10px hamburger padding-left + 15 px container padding-left */
        left: calc(((100vw - (1170px))/2) + 25px);
        padding-left: 0px;
    }
}

/* .navbar .container {
    height: 55px;
}

.navbar-collapse {
    background-color: #161619;
    font-size: 17px;
} */

/* div.navbar-collapse {
    height: 55px!important;
} */

.dropdown-menu {
    background-color: #161619;
    color: #eeeeee;
}

.dropdown-menu .divider {
    background-color: #e5e5e533;
}

.dropdown-menu>li>a {
    color: #eeeeee;
}

.navbar-nav>.open>a {
    border-radius: 5px;
}

.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
    color: #eeeeee;
}

.navbar-default .navbar-nav .open .dropdown-menu>li>a {
    color: #cccccc;
}

.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover {
    background-color: #999;
}

.navbar-header {
    height: 75px;
}

ul.nav.navbar-nav {
    margin-top: 10px;
}

#logo-scritta {
    max-width: 200px;
    max-height: 40px;
    width: auto;
    height: auto;
}

/* .profile-badge {
    border-radius: 50%;
    width: 40px;
} */

.profile-notification-hamburger {
    position: absolute;
    top: 1px;
    right: 3px;
    padding: 0px 7px;
    border-radius: 50%;
    background: var(--low-purple);
    width: 12px;
    height: 12px;
}

.profile-notification {
    /* display: none; */
    position: absolute;
    top: 1px;
    right: 8px;
    padding: 0px 7px;
    border-radius: 50%;
    background: var(--low-purple);
    margin-top: 10px;
    margin-right: 2px;
    height: 12px;
    width: 12px;
}

.profile-notification.fp-logo {
    right: 0;
    padding: 0px 5px;
    height: 9px;
    width: 9px;
}

/* 
@media only screen and (max-width : 768px) {
    .profile-notification-hamburger {
        display: inline;
    }
} */

/* Navbar End */

/* Alert (flash message) */

/* Alert End*/
.alert {
    position: absolute;
    margin-top: 10px;
    width: 90%;
    left: 5%;
    z-index: 10;
}

.alert-info {
    animation: hide-gradually;
    animation-duration: 4s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}

@media (min-width: 768px) {
    .alert {
        width: 80%;
        left: 10%;
    }
}

@keyframes hide-gradually {
    0% {
        opacity: 1
    }

    25% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        display: none;
        z-index: -1;
    }
}

.alert>span {
    font-size: 23px;
}

/* Login/Signup/Reset */
div.login,
div.reset,
div.signup {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

div.login>input,
div.reset>input,
div.signup>input {
    border-radius: 10px;
    border: 1px solid white;
    width: 300px;
    height: 40px;
    background-color: #161619;
    margin-bottom: 5px;
    font-family: var(--dm-sans);
    padding-left: 10px;
    box-shadow: 0 0 20px 2px #0e0e0e !important;
}

div.login>label,
div.reset>label,
div.signup>label {
    font-family: var(--dm-sans);
    margin: 0;
    margin-bottom: 10px;
}

div.login>label[for="remember_me"] {
    margin: 0;
    font-size: 15px;
}

/* Chrome changes background color when using autofill */
.login>input:-webkit-autofill,
.login>input:-webkit-autofill:hover,
.login>input:-webkit-autofill:focus,
.login>input:-webkit-autofill:active,
.reset>input:-webkit-autofill,
.reset>input:-webkit-autofill:hover,
.reset>input:-webkit-autofill:focus,
.reset>input:-webkit-autofill:active,
.signup>input:-webkit-autofill,
.signup>input:-webkit-autofill:hover,
.signup>input:-webkit-autofill:focus,
.signup>input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #161619 inset, 0 0 20px 2px #0e0e0e !important;
}

/* Change text in autofill textbox */
.login>input:-webkit-autofill,
.reset>input:-webkit-autofill,
.signup>input:-webkit-autofill {
    -webkit-text-fill-color: white !important;
}

div.login.remember-me {
    flex-direction: row;
}

.login.remember-me>input {
    height: 15px;
    margin: 0;
    align-self: center;
    width: auto;
    margin-right: 10px;
    accent-color: var(--low-purple);
}

.login-submit,
.signup-submit {
    width: 150px;
}

.profile-btn.login-btn {
    border-radius: 12px;
}

.reset-submit {
    width: 300px;
}

p.login,
p.reset,
p.submit {
    font-family: var(--dm-sans);
}

/* Login/Signup/Reset End */

/* Avatar */
.league-avatar>img {
    border: 1px solid black;
    border-radius: 10px;
    margin-right: 5px;
    width: 75%;
    max-width: 256px;
}

.avatar>img {
    /* border: 10px solid #f26d00; */
    border-style: solid;
    border-width: 10px;
    border-image: linear-gradient(45deg, #e9431b, #f39200);
    border-radius: 10px;
    margin-right: 5px;
    width: 256px;
    height: 256px;
    max-width: 256px;
}

/* Avatar End */

/* AdminFunction */
#admin-function-table {
    width: 50%;
    color: #eeeeee;
}

#admin-function-table tr {
    border: 1px solid black;
}

#admin-function-table tr>th {
    text-align: center;
    color: #161619;
    background-color: #22CEB7;
}

#admin-function-table tr>td {
    background-color: grey;
}

#admin-function-table tr>td>p {
    margin: 5px;
}

#admin-function-table tr>td>p>a {
    text-decoration: none;
    color: #161619;
}

/* AdminFunction End */

/* User */
/** User Profile **/
.user-profile {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* grid-template-rows: 0.5fr 0.3fr repeat(3, 1fr); */
    grid-auto-rows: max-content;
    grid-template-areas:
        "picture picture userinfo "
        "buttons buttons buttons"
        "bracket bracket bracket"
        "bracket bracket bracket"
        "bracket bracket bracket";
    column-gap: 20px;
    row-gap: 15px;
}

@media only screen and (min-width : 768px) {
    .user-profile {
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas:
            "picture userinfo buttons "
            "bracket bracket bracket"
            "bracket bracket bracket"
            "bracket bracket bracket"
            "bracket bracket bracket";
    }
}

.user-profile .pic {
    grid-area: picture;
    grid-column: 1 / 2;
    display: grid;
    padding-top: 20px;
    place-self: center;
    /* margin-bottom: 10px; */
    /* margin-top: 10px; */
    padding-bottom: 10px;
}

.user-profile .user-info {
    grid-area: userinfo;
    grid-column: 2 / 3;
    column-gap: 20px;
    place-self: center;
}

@media only screen and (min-width : 768px) {
    .user-profile .user-info {
        place-self: center start;
    }
}

.user-profile .user-info>h1 {
    margin-top: 0;
    margin-bottom: 0;
}

@media only screen and (min-width : 768px) {
    .user-profile .user-info>h1 {
        font-size: 42px;
    }
}

#last-seen {
    font-family: var(--dm-sans);
    font-weight: 200;
    font-size: 12px;
    margin-top: 10px;
    margin-bottom: 0;
}


.user-profile .user-info #about-me {
    overflow-wrap: break-word;
    font-family: var(--dm-sans);
    font-size: 13px;
}

.user-profile .buttons {
    grid-area: buttons;
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    justify-content: stretch;
}

@media only screen and (min-width : 768px) {
    .user-profile .buttons {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: auto;
        margin-bottom: 0;
        margin-top: 20px;
    }
}

.user-profile .buttons.admin {
    grid-area: buttons;
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: max-content;
    justify-content: stretch;
    width: 90%;
}

@media only screen and (min-width : 768px) {
    .user-profile .bonus.admin {
        width: 90%;
    }
}

.user-profile .bracket {
    grid-area: bracket;
}

.user-profile .bracket>h1 {
    margin-top: 10px;
}

.user-profile .bracket .row-border {
    border-top: 1px solid #eeeeee;
    /* grid-row: 1;
    grid-column: 1 / 3; */
}

/* .bkg-img {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
} */

.profile-pic-border {
    background-image: linear-gradient(to top, var(--high-purple), var(--low-purple));
    border-radius: 20%;
    width: 220px;
    height: 220px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.profile-pic {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    border-radius: 20%;
    /* border: 10px solid #f26d00; */
    /* position: absolute; */
    /* bottom: -15px; */
    /* left: 15px; */
}

@media only screen and (min-width : 768px) {
    .profile-pic {
        width: 256px;
        height: 256px;
    }

    .profile-pic-border {
        width: 280px;
        height: 280px;
    }
}

.profile-btn {
    width: 90%;
    margin-bottom: 10px;
    background-color: #161619;
    color: #eeeeee;
    box-shadow: 5px 5px black;
    border: none;
    padding: 6px 12px;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    place-self: center;
    border-radius: 5px;
    font-family: var(--dm-sans);
    font-size: 14px;
}

@media only screen and (min-width : 768px) {
    .profile-btn {
        width: 70%;
        text-wrap: balance;
    }
}

.profile-btn:hover {
    background-image: linear-gradient(to right, var(--high-purple), var(--low-purple));
    color: #eeeeee;
    text-decoration: none;
    transition: background-imgage .5s ease;
    -webkit-transition: background-image .5s ease;
}

.profile-btn:focus {
    text-decoration: none;
    color: #eeeeee;
}

.profile-btn:active {
    box-shadow: 2px 2px black;
    transform: translateY(4px);
}

.profile-btn.disable {
    color: #999;
    cursor: not-allowed;
}

.profile-btn.disable:hover {
    text-decoration: none;
    background-image: none;
}

.profile-btn.disable:focus {
    text-decoration: none;
    color: #999;
}

.profile-btn.disable:active {
    box-shadow: 5px 5px black;
    transform: none;
    text-decoration: none;
}

.profile-btn.popup {
    position: relative;
}

.profile-btn.popup:hover .profile-btn-popup {
    visibility: visible;
    opacity: 1;
}

.profile-btn .profile-btn-popup {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.profile-btn .profile-btn-popup::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/** User Profile End **/

/** UserBracket **/
#user-bracket {
    font-size: 16px;
}

.ub-table {
    float: left;
    /* margin-bottom: 30px; */
    width: 90%;
}

@media only screen and (max-width : 768px) {
    .ub-table {
        width: 100%;
    }
}

.ub-table.final {
    margin-top: 0px;
    margin-bottom: 0px;
    width: 100%;
}

.ub-table .final {
    /* float: left; */
    /* margin-bottom: 30px; */
    width: 30%;
}

.ub-table .final-text {
    text-align: right;
    padding: 3%;
}

@media only screen and (max-width : 768px) {
    .ub-table .final-text {
        padding: 2px;
    }
}

/* .ub-table .final-text>b {
    text-shadow: 4px 4px #0000007d;
} */

.ub-table .final-text>p {
    text-shadow: 4px 4px #0000007d;
    font-weight: 700;
    display: inline-block;
    margin-right: -2px;
}

.ub-table .final-text>img {
    width: 40px;
    height: 40px;
    filter: drop-shadow(4px 4px #0000007d);
    position: relative;
    z-index: -1;
}

.ub-table>thead>tr>th {
    text-align: left;
    text-shadow: 4px 4px #0000007d;
}

.ub-table>tbody>tr>td {
    width: 30%;
}

.ub-table>tbody>tr>td>div {
    margin-bottom: 10px;
}

.ub-table>caption {
    color: #cccccc;
    font-weight: 700;
    text-align: left;
}

.td-final {
    float: left;
    width: 30%;
}

.td-final>div>ul {
    list-style-type: none;
    display: inline-block;
    margin: 1%;
    padding-left: 5%;
}

[id^="quadrant-"][id$="-result"] {
    color: black;
    overflow: hidden;
    text-align: center;
}

/* Set color to white in edit bracket */
.result.edit-bracket>[id^="quadrant-"][id$="-result"] {
    color: white;
}

/* Set checkbox color to low-purple in edit bracket */
input[id^="quadrant-"][id*="-select-"][type="radio"] {
    accent-color: var(--low-purple);
}

[id^="quadrant-"][id$="-result"] option:hover,
[id^="quadrant-"][id$="-result"] option:checked,
[id^="quadrant-"][id$="-result"] option:active,
[id^="quadrant-"][id$="-result"] option:focus {
    background: linear-gradient(var(--low-purple), var(--low-purple));
    width: 30px;
}

#bonus {
    width: 100%;
}

.bonus>label {
    color: #cccccc;
    font-weight: 400;
    font-family: 'Courier New', Courier, monospace;
}

.bonus>select {
    color: black;
}

#ub_submit_btn {
    color: black;
}

.quadrant {
    width: 65%;
    margin: 5px;
    background-color: #0000004f;
    /* border: 1px solid transparent; */
    border-radius: 10px;
    border-collapse: separate;
    overflow: hidden;

    height: 90px;
    box-shadow: 5px 5px black;
    position: relative;
}

@media only screen and (max-width : 768px) {
    .quadrant {
        width: 85%;
    }
}

.quadrant>tbody>tr:nth-child(odd)>td {
    border-bottom: 1px solid white;
}

/* .quadrant:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    box-shadow: 10px 10px black;
} */

.team-font {
    /* font-family: monospace, monospace; */
    font-family: 'Courier New', Courier, monospace;
    float: left;
    /* background-color: #0000004f; */
    min-height: 50%;
    width: 80%;
    padding-left: 15%;
    font-weight: 700;

    height: 100%;
    padding-top: 12px;
}

@media only screen and (max-width : 991px) {
    .team-font {
        width: 75%;
        padding-left: 5%;
    }
}

@media only screen and (max-width : 768px) {
    .team-font {
        width: 70%;
        padding-left: 5%;
    }
}

.team-font.ub-quadrant {
    border: 1px solid white;
    margin: 5px;
    width: 95%;
}

.team-logo {
    width: 45px;
}

.team-logo-img {
    width: 35px;
    height: 35px;
    /* border-radius: 20px; */
    padding-top: 2px;
    /* padding-left: 10px; */
    margin-left: 10px;
    /* background-color: white; */
}

@media only screen and (max-width : 768px) {
    .team-logo-img {
        margin-left: 5px;
    }
}

.team-result {
    width: 20%;
    float: right;
    text-align: center;
    background-color: grey;

    height: 100%;
    text-align: center;
    padding-top: 10px;
}

@media only screen and (max-width : 991px) {
    .team-result {
        width: 25%;
    }
}

@media only screen and (max-width : 768px) {
    .team-result {
        width: 30%;
    }
}

.radio-teams label[for^="quadrant-"] {
    /* font-family: monospace, monospace; */
    /* color: #a19b98; */
    color: #cccccc;
}

.bonus-under-over-radio {
    padding-left: 10%;

}

.radio-teams>label {
    font-weight: 400;
}

/** UserBracket end **/

/** UserBracketNEW **/
#user-bracket {
    overflow-y: scroll;
}

#user-bracket::-webkit-scrollbar {
    /* chrome, safari, opera */
    display: none;
}

#user-bracket {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.bracket {
    display: flex;
    flex-direction: row;
    position: relative;
    user-select: none;
}

.bracket-column {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: space-around;
}

.match {
    display: flex;
    flex-direction: column;
    position: relative;
    min-width: var(--qdt-width);
    max-width: var(--qdt-width);
    height: var(--qdt-height);
    margin: var(--qdt-margin-top) var(--qdt-margin-right) var(--qdt-margin-bottom) 0;
    background: var(--qdt-background);
    border-radius: 10px;
    border: var(--qdt-border) solid white;
    box-shadow: 0 0 20px 2px #0e0e0e;
}

.team {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    /*   background: green; */
    position: relative;
    /*   border: 1px solid black; */
}

.team:nth-child(odd)::after {
    content: "";
    position: absolute;
    left: 10%;
    bottom: 0;
    height: 1px;
    border: 1px solid #999;
    width: 80%;
}

.team input {
    margin: 0;
    margin-left: 5px;
    margin-right: 5px;
}

.team p {
    margin: 0;
    color: white;
    font-size: 20px;
    font-family: var(--qdt-font-family);
}

.team p>label {
    margin-bottom: 0;
}

.user-choice {
    position: absolute;
    display: flex;
    width: calc(var(--qdt-width));
    height: calc(var(--qdt-height)/2);
    left: calc(var(--qdt-width)/2 + 5px);
    top: 25%;
    align-items: center;
    margin-left: 5px;
    /*   justify-content: flex-end; */
    /*   border: 1px solid white; */
}

.user-choice .bonus {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid black;
    width: 30px;
    height: 30px;
    margin: 2px;
    z-index: 1;
    border-radius: 25%;
    background-image: linear-gradient(to top, grey, grey);
    border: 2px solid white;
    /* box-shadow: var(--qdt-box-shadow); */
}

.user-choice .bonus input {
    display: none;
}

.user-choice .bonus [class$="-bonus"] {
    height: 20px;
}

@media screen and (min-width: 768px) {
    .user-choice .bonus [class$="-bonus"] {
        width: 25px;
        height: 22px;
    }
}

.match-lines {
    display: block;
    position: absolute;
    top: 50%;
    right: 0px;
    margin-top: 0px;
    z-index: -1;
}

.match-lines .line {
    background: white;
    position: absolute;
}

.match-lines .line.one {
    height: 1px;
    /*   width: calc((var(--qdt-width)/4) - 5px); */
    width: calc(var(--qdt-width)/4);
}

/* .match-lines .line.rounded {
  border: 1px solid;
  border-color: white white transparent transparent;
  width: 5px;
  height: 5px;
  background: transparent;
  border-radius: 0 50% 0 0;
  left: calc((var(--qdt-width)/4) - 6px);
} */

.match-lines .line.two {
    /*   height: calc( ( var(--qdt-height)/2 + var(--qdt-margin-top) + var(--qdt-border) ) - 5px); */
    height: calc(var(--qdt-height)/2 + var(--qdt-margin-top) + var(--qdt-border));
    width: 1px;
    /*   top: 5px; */
    left: calc(var(--qdt-width)/4);
}

.match-lines.next {
    left: calc(0px - (var(--qdt-margin-right)/2) - (var(--qdt-border)));
}

.bracket-column:first-child .match-lines.next {
    display: none;
}

.match:nth-child(even) .match-lines .line.two {
    transform: translate(0, -100%);
    /*   top: -5px; */
}

/* .match:nth-child(even) .match-lines .line.rounded {
  transform: rotate(90deg);
  top: -6px
} */

.bracket-column:nth-child(2) .match-lines .line.two {
    height: calc((var(--qdt-height)/2 + var(--qdt-margin-top) + var(--qdt-border)) * 2);
}

.bracket-column:nth-child(3) .match-lines .line.one {
    display: none;
}

.bracket-column:nth-child(3) .match-lines.next .line.one {
    display: block;
}

.bracket-column:nth-child(3) .match-lines .line.two {
    height: calc((var(--qdt-height)/2 + var(--qdt-margin-top) + var(--qdt-border)) * 4);
    left: calc(0px - (var(--qdt-width)/2));
}

#bracket-west .bracket-column:nth-child(3) .match-lines .line.two {
    transform: translate(0, -100%);
}

/* FINAL */
.bracket-column.final {
    position: absolute;
    /* left: calc((var(--qdt-width) + (var(--qdt-width)/4) + 1px) * 2 + ((var(--qdt-width)/4) * 2 ) + 50px); */
    left: calc((var(--qdt-width) + (var(--qdt-width)/4) + 1px) * 2 + ((var(--qdt-width)/4) * 2) + 15px);
    bottom: calc(((var(--qdt-height) + var(--qdt-margin-bottom)) * 4) + (var(--qdt-margin-top) * 3) - (var(--qdt-height) / 2) + 29px);
}

p.bracket-result {
    margin-left: auto;
    margin-right: 5px;
}

@media screen and (min-width: 768px) {
    .match {
        border-radius: 15px;
    }


    .team input {
        margin: 0;
        margin-left: 10px;
    }

    .team p {
        margin: 0;
        margin-left: 15px;
        color: white;
        font-size: 20px;
    }

    .user-choice {
        width: calc(var(--qdt-width)/2);
        left: calc(var(--qdt-width)/2 + 20px);
        /* justify-content: flex-end; */
        margin-left: 0;
    }

    .user-choice .result {
        margin-right: 5px;
    }

    p.bracket-result {
        margin-left: auto;
        margin-right: 10px;
    }
}

.bonus-div {
    display: none;
}

#ub-submit-btn input {
    width: 200px;
    height: 50px;
    background-image: url('save.svg');
    background-size: 32px 32px;
    background-repeat: no-repeat;
    background-position: 7px 7px;
    padding-left: 32px;
    border-radius: 10px;
    margin-top: 40px;
    margin-bottom: 20px;
    background-color: var(--qdt-background);
    color: #eeeeee;
    box-shadow: var(--qdt-box-shadow);
    border: 2px solid white;
    text-align: center;
    white-space: nowrap;
    user-select: none;
}

#ub-submit-btn input:hover {
    background: url('save.svg') no-repeat 7px 7px/32px 32px, linear-gradient(to right, var(--high-purple), var(--low-purple));
    transition: background-imgage .5s ease;
    -webkit-transition: background-image .5s ease;
    border: none;
}

#user-bonus {
    /* display: flex; */
    margin-bottom: 20px;
    margin-top: 20px;
}

.bonus-quadrant {
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(to right, var(--high-purple), var(--low-purple));
    width: 100%;
    box-shadow: var(--qdt-box-shadow);
    border-radius: 15px;
}

.bonus-row {
    display: flex;
    flex-direction: row;
    font-family: var(--dm-sans);
    font-weight: 400;
    justify-content: space-between;
}

.bonus-row .bonus-title {
    margin-left: 50px;
}

.bonus-row .bonus-value {
    margin-right: 100px;
}

.bonus-row:nth-child(2) {
    border-top: .5px solid rgba(255, 255, 255, 0.377);
    border-bottom: .5px solid rgba(255, 255, 255, 0.377);
}

@media only screen and (min-width : 768px) {
    .bonus-quadrant {
        width: 50%;
    }

    .bonus-row .bonus-title {
        margin-left: 25px;
    }

    .bonus-row .bonus-value {
        margin-right: 50px;
    }
}

/** UserBracketNEW end **/

/** UserTicket **/
.user-ticket-modal {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    z-index: 11;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: auto;
    background-color: black;
    background-color: rgba(0, 0, 0, 0.4);
    transition: visibility 0s, opacity .3s ease-in;
}

.user-ticket-content {
    position: relative;
    background-color: #161619;
    margin: 25% auto;
    padding: 20px;
    border-radius: 5%;
    border: 2px solid white;
    width: 65vw;
    height: 40vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.user-ticket-img {
    width: 150px;
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.user-ticket-img img {
    width: 70px;
    height: 70px;
    margin-bottom: 30px;
}

.ticket-number p {
    text-align: center;
}

@media screen and (min-width: 768px) {
    .user-ticket-modal {
        overflow: hidden;
    }

    .user-ticket-content {
        margin: 15% auto;
        border-radius: 5%;
        width: 450px;
        height: 50vh;
    }

    .user-ticket-img img {
        height: 100px;
        width: 100px;
    }
}

/** UserTicket end **/
/* User */

/* PlayIn */
#playin-div {
    display: flex;
    flex-direction: column;
    margin-top: 50px;
    font-family: var(--dm-sans);
    font-weight: 300;
}

#playin-submit>.profile-btn {
    margin-top: 20px;
    width: 30%;
}

/* PlayIn End*/

/* Flash Prediction */
#flash-prediction-modal {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
    transition: visibility 0s, opacity .3s ease-in;
}

.flash-prediction-content {
    background-color: #161619;
    border-radius: 10px;
    position: relative;
    margin: 100px auto;
    padding: 20px;
    width: 80vw;
    border: 2px solid white;
}

@media screen and (min-width: 768px) {
    .flash-prediction-content {
        width: 50vw;
    }
}

div.fp-page {
    margin-bottom: 35px;
}

div.fp-page.new-fp {
    background-image: linear-gradient(to right, var(--high-purple), var(--low-purple));
    padding: 20px;
    border-radius: 10px;
}

div.fp-page>.flash-prediction-content {
    margin: 20px auto;
}

.close-btn {
    background-color: #161619;
    border: none;
    font-size: 36px;
    line-height: 0;
    position: absolute;
    top: 15px;
    right: 5px;
}

.close-btn>span:hover {
    color: var(--low-purple);
}

#poll-count {
    float: right;
    font-weight: 700;
    position: relative;
    right: 3%;
}

.answer-form-div {
    margin-left: 10px;
}

div.fp-answer {
    display: flex;
}

.fp-radio[id^="answer-"] {
    width: 20px;
    height: 20px;
    -webkit-appearance: none;
    appearance: none;
    /* padding: 0.5em; */
    border-radius: 25%;
    /* border: 1px solid white; */
    margin-right: 10px;
    /* height: 80%; */
    background-color: white;
}

.fp-radio[id^="answer-"]:checked {
    background-color: var(--low-purple);
    border: 2px solid white;
}

div#fp-buttons {
    display: flex;
    flex-direction: row;
    width: 40%;
    margin-top: 10px;
}

@media screen and (min-width: 768px) {
    div.fp-buttons {
        width: 30%;
    }
}

#fp-poll-id {
    width: 0;
    height: 0;
}

.profile-btn.answer-fp {
    background-image: linear-gradient(to right, var(--high-purple), var(--low-purple));
    margin-right: 10px;
}

.profile-btn.skip-fp {
    border: 2px double transparent;
    background-image: linear-gradient(#161619, #161619), linear-gradient(var(--high-purple), var(--low-purple));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    padding: 4px 12px;
}

.flash-prediction {
    width: 100%;
    table-layout: fixed;
}

#flash-prediction>img {
    width: 35px;
    height: 40px;
    filter: drop-shadow(4px 4px #0000007d);
}

/* #flash-prediction {
    font-size: 25px;
    color: #eeeeee;
    text-align: center;
    animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
    from {
      text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
    }

    to {
      text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
    }
} */

.statistics {
    font-style: italic;
}

#fp-valid-until {
    text-align: right;
    font-style: italic;
    font-size: smaller;
    margin: 2px;
    margin-right: 15px;
    padding-bottom: 10px;
}

#div-poll-text {
    border: 2px solid white;
    border-radius: 5px;
    margin-bottom: 10px;
    background-color: #161619;
    box-shadow: 0 0 20px 2px #0e0e0e;
    border-radius: 10px;
    margin-bottom: 10px;
    position: relative;
    width: 95%;
    left: 2.5%;
}

div.fp-title-section {
    display: flex;
    justify-content: space-between;
}

.poll-title {
    /* text-align: center; */
    margin-top: 5px;
    margin-bottom: 15px;
    font-family: var(--bayon);
    font-weight: 400;
    position: relative;
    left: 3%;
    width: 80%;
    display: inline;
}

div.flash-prediction.answered-poll {
    border: 2px solid white;
    border-radius: 15px;
    background-color: #161619;
    margin-bottom: 20px;
}

table.flash-prediction.answered-poll {
    margin: 20px;
    width: 90%;
}

.answered-poll .poll-title {
    left: 0;
}

.poll-text {
    margin: 5px;
    padding: 5px;
    font-family: var(--dm-sans);
    font-weight: 300;
    font-style: normal;
}

.poll-result:hover {
    background-color: transparent;
}

.poll-result table {
    width: 100%;
}

.poll-answer,
.progress-pct {
    font-family: var(--dm-sans);
    font-weight: 600;
}

.progress {
    position: relative;
    width: 100%;
    box-shadow: var(--qdt-box-shadow);
}

@media screen and (min-width: 768px) {
    .progress {
        width: 50%;
    }
}

.progress span {
    position: absolute;
    display: block;
    width: 100%;
    color: black;
    text-align: center;
    bottom: .5px;
}

.progress-bar.user-answer {
    /* background-color: #f26d00; */
    background-image: linear-gradient(to right, var(--high-purple), var(--low-purple));
}

.progress-bar {
    /* background-color: #BCCCCA; */
    background-image: linear-gradient(to right, #5e5e5e, #c7c7c7);
    border: 1px solid white;
    border-radius: 5px;
}

.poll-hidden {
    display: none;
}

.poll-hidden div.statistics {
    border: 1px solid white;
    border-radius: 15px;
    margin-bottom: 20px;
}

.poll-hidden div.statistics div {
    margin: 10px;
}

.show-hide-poll {
    cursor: pointer;
    font-family: var(--dm-sans);
    font-weight: 300;
    font-style: normal;
}

.show-poll-img {
    cursor: pointer;
    width: 25px;
    height: 25px;
}

.show-poll-img.collapse-img {
    transform: rotateX(180deg);
}

.row.answer-form-div {
    margin-left: 20px;
    margin-bottom: 10px;
}

.fp-points {
    position: relative;
    left: 2.5%;
    font-family: var(--dm-sans);
    font-weight: 300;
    font-style: normal;
}

.fp-points {
    color: #aaa !important;
}

.fp-points span {
    text-decoration: underline;
}

.fp-points>img {
    width: 20px;
    height: 20px;
    filter: drop-shadow(4px 4px #0000007d);
    margin-right: 5px;
}

input[id^="answer-"][type="radio"] {
    accent-color: var(--low-purple);
}

.radio label {
    font-family: var(--dm-sans);
    font-weight: 300;
    font-style: normal;
    word-wrap: break-word;
}

/* Flash Prediction end*/

/* Flash Prediction Result */
.poll-result .poll-title {
    text-align: left;
}

.poll-result .fp-points {
    left: 0%;
    margin-left: 10px;
}

/* Flash Prediction Result end */

/* Standing */
#standings {
    border: 1px solid #999;
}

#standings>thead {
    background-color: #161619;
    color: #eeeeee;
}

#standings>tbody>tr:nth-child(odd)>td,
#standings>tbody>tr:nth-child(odd)>th {
    background-color: #3a3a44;
    color: #eeeeee;
}

#standings>tbody>tr:nth-child(even)>td,
#standings>tbody>tr:nth-child(even)>th {
    background-color: #44444f;
    color: #eeeeee;
}

.td-standings {
    width: 14%;
}


.td-standings.position {
    width: 5%;
}

.td-standings[class$=-points] {
    width: 1%
}

.td-standings.last-bracket-update {
    font-size: 18px;
}

.th-standings {
    width: 14%;
}


/* Standing keys */
#standing-keys {
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(to right, var(--high-purple), var(--low-purple));
    width: 100%;
    box-shadow: 0 0 20px 2px #1b1b1b;
    border-radius: 15px;
    margin-bottom: 20px;
}

.standing-keys-container {
    box-shadow: var(--qdt-box-shadow);
}

.standing.keys {
    display: flex;
    flex-direction: row;
    font-family: var(--dm-sans);
    font-weight: 400;
    justify-content: space-between;
}

.standing.keys .text {
    margin-left: 50px;
}

.standing.keys .val {
    margin-right: 30px;
}

.teams-standings-header-stats .desktop {
    display: none;
}

.standing.keys {
    border-bottom: .5px solid rgba(255, 255, 255, 0.377);
}

.standing.keys:last-child {
    border-bottom: none;
}

.standing.keys.no-border-mobile {
    border-bottom: none;
}

#standing-keys .standing.keys.desktop {
    display: none;
}


@media only screen and (min-width : 768px) {
    #standing-keys {
        width: 50%;
    }

    .teams-standings-header-stats .desktop {
        display: block;
    }

    .standing-keys-title.mobile {
        display: none;
    }

    #standing-keys.mobile {
        display: none;
    }

    .teams-standings-header-stats .mobile {
        display: none;
    }

    #standing-keys .standing.keys.mobile {
        display: none;
    }

    #standing-keys .standing.keys.desktop {
        display: flex;
    }

    .standing.keys.no-border-mobile {
        border-bottom: .5px solid rgba(255, 255, 255, 0.377);
    }
}

/* #standings-key {
    margin-bottom: 20px;
}

#standings-key-table {
    width: 60%;
    border: none;
}

@media only screen and (min-width : 768px) {
    #standings-key-table {
        width: 30%;
        border: none;
    }
}

#standings-key-table>thead>tr>th {
    text-shadow: 4px 4px #0000007d;
    width: 100%;
}

#standings-key-table>tbody {
    box-shadow: 5px 5px black;
    background-image: linear-gradient(to right, #e9431b, #f39200);
}

.tr-standing-key {
    border: 1px solid black;
    color: #161619;
}

.td-standing-key {
    width: 20%;
    padding-left: 5px;
    padding-right: 10px;
    font-style: italic;
    font-size: 17.5px;
}

.td-standing-value {
    width: 80%;
    padding-right: 10px;
    font-size: 15px;
    border-left: 1px solid black;
    padding-left: 5px;
} */

#standings {
    color: #161619;
}

/* add grid space for premium user indication
    in user standings but not in teams standings */
.teams-standings-header.users-standings .teams-standings-header-team {
    grid-template-columns: 20% 10% auto;
}

/* same as above */
.teams-standings-row.users-standings .team-name {
    grid-template-columns: 20% 10% auto;
}

span.premium-user-standings {
    width: 20px;
}

.premium-user-logo>img {
    width: 20px;
    height: 20px;
}

/* Standing End */

/* Add League */

#edit-league {
    margin-top: 25px;
}

.edit-league-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: max-content;
    margin-bottom: 30px;
    row-gap: 20px;
    grid-template-areas:
        "pic"
        "league-info"
        "save"
        "settings";
}

@media only screen and (min-width : 956px) {
    .edit-league-grid {
        grid-template-areas:
            "pic league-info"
            "save settings";
        column-gap: 50px;
    }
}

.edit-league-grid .league-pic-border {
    position: relative;
}

.edit-league-grid #league-name {
    font: var(--chakra-title);
    text-align: left;
    background-color: #161619;
    border: 1px solid white;
    border-radius: 10px;
    width: 300px;
    text-indent: 20px;
}

.league-pic-border {
    background-image: linear-gradient(to top, var(--high-purple), var(--low-purple));
    border-radius: 20%;
    width: 220px;
    height: 220px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.league-pic {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    border-radius: 20%;
    /* border: 10px solid #f26d00; */
    /* position: absolute; */
    /* bottom: -15px; */
    /* left: 15px; */
}

@media only screen and (min-width : 768px) {
    .league-pic {
        width: 256px;
        height: 256px;
    }

    .league-pic-border {
        width: 280px;
        height: 280px;
    }

    .edit-league-grid .edit-league-info {
        grid-area: league-info
    }

    .edit-league-grid #league-name {
        width: 500px;
        font-size: 42px;
    }
}

p.edit-league-manifest {
    margin-top: 30px;
}

.edit-league-grid #league-manifest {
    font-family: var(--dm-sans);
    width: 300px;
    height: 200px;
    background-color: #161619;
    border: 1px solid white;
    border-radius: 10px;
    padding: 10px;
}

@media only screen and (min-width : 768px) {
    .edit-league-grid #league-manifest {
        width: 500px;
    }
}

.edit-league-grid .edit-league-settings {
    grid-area: settings;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}

.edit-league-info p {
    font-family: var(--dm-sans);
    font-weight: 700;
}

.edit-league-settings label {
    margin-bottom: 0;
}

/* .edit-league-settings div {
    height: 50px;
} */

.edit-league-grid #edit-league-max-users {
    font-size: 15px;
    text-align: center;
    background-color: #161619;
    border: 1px solid white;
    border-radius: 10px;
    width: 50px;
    height: 40px;
    margin-left: 10px;
    user-select: none;
}

#edit-bracket-deadline {
    font-size: 15px;
    text-align: center;
    background-color: #161619;
    border: 1px solid white;
    border-radius: 10px;
    width: 220px;
    height: 40px;
    margin-left: 10px;
    display: inline;
    color: currentColor;
    user-select: none;
}

#edit-league-save {
    grid-area: save;
    width: 200px;
    height: 50px;
    background-image: url('save.svg');
    background-size: 32px 32px;
    background-repeat: no-repeat;
    background-position: 7px 7px;
    padding-left: 32px;
    border-radius: 10px;
    margin-bottom: 20px;
    background-color: #0000004f;
    color: #eeeeee;
    box-shadow: 5px 5px black;
    border: none;
    text-align: center;
    white-space: nowrap;
    user-select: none;
}

#edit-league-save:hover {
    background: url('save.svg') no-repeat 7px 7px/32px 32px, linear-gradient(to right, var(--low-purple), var(--high-purple));
    transition: background-imgage .5s ease;
    -webkit-transition: background-image .5s ease;
    border: none;
}

#edit-league-save:active {
    box-shadow: 2px 2px black;
    transform: translateY(4px);
}

/* Add League End */

/* LeagueStanding */
#league-standing-title {
    margin-bottom: 20px;
}

#league-standing {
    border: none;
}

#league-standing td {
    /* padding: 10px; */
    text-align: right;
}

#league-standing .league-name {
    text-align: left;
}

#league-standing .league-name>a:hover,
#league-standing .league-name>a:focus,
#league-standing .league-name>a:visited,
#league-standing .league-name>a:active {
    text-decoration: none;
}

.league-standing-avatar {
    border: 1px solid black;
    border-radius: 10px;
    margin-right: 5px;
    width: 35px;
    height: 35px;
}

#league-standing th {
    /* padding: 10px; */
    text-align: right;
}

/* Change stripe color
#league-standing>tbody>tr:nth-child(odd)>td,
#league-standing>tbody>tr:nth-child(odd)>th {
   background-color: red;
}
*/

/* LeagueStanding End */

/* League */
.league-profile {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: max-content;
    grid-template-areas:
        "pic info"
        "join .";
    column-gap: 20px;
    row-gap: 15px;
}

@media only screen and (min-width : 768px) {
    .league-profile {
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas:
            "pic pic info"
            ". . join";
    }
}

.league-avatar {
    grid-area: pic;
}

.league-info {
    grid-area: info;
    place-self: center;
}

.league-info .title-info {
    font-family: var(--bayon);
}

.league-join {
    grid-area: join;
    place-self: center;
}

.join-button {
    display: flex;
    width: 200px;
    height: 60px;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    border-radius: 20px;
}

.league-avatar {
    grid-area: pic;
    grid-column: 1 / 2;
    display: grid;
    padding-top: 20px;
    place-self: center;
    padding-bottom: 10px;
}

/* .join-button {
    border: 1px solid black;
    border-radius: 10px;
    background-color: grey;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    color: white;
    padding: 10px;
    margin-top: 20px;
    margin-bottom: 10px;
} */

/* League End */

/* popup */
#overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    background: #999;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    z-index: 100;
}

#popup {
    position: absolute;
    top: 50%;
    left: 50%;
    background: #fff;
    width: 250px;
    height: 250px;
    margin-left: -125px;
    /*Half the value of width to center div*/
    margin-top: -125px;
    /*Half the value of height to center div*/
    z-index: 200;
    border: 1px solid black;
    border-radius: 5px;
}

#popupCloseButton {
    background-color: #fff;
    border: 3px solid #999;
    border-radius: 50px;
    cursor: pointer;
    display: inline-block;
    font-family: monospace;
    font-weight: bold;
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 30px;
    line-height: 25px;
    width: 30px;
    height: 30px;
    text-align: center;
}

#popupCloseButton:hover {
    background-color: #ccc;
}

/* popup end */

/* Notifications */
.notification {
    background-color: #161619;
    border: 2px solid white;
    border-radius: 15px;
    margin-bottom: 10px;
}

.notification-body {
    display: flex;
    flex-direction: column;
    min-height: 110px;
    height: auto;
    justify-content: space-between;
    padding: 10px;
}

*[id^="point-notification-"] {
    font-family: var(--dm-sans);
}

.notification.unread {
    background-image: linear-gradient(to right, var(--low-purple), var(--high-purple));
    border: none;
}

.notification small.notification-time>span {
    padding: 3px;
    border-radius: 5px;
    float: right;
}

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

.next-notification,
.prev-notification {
    background-color: #161619;
    width: 120px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    font-family: var(--dm-sans);
    box-shadow: 5px 5px black;
    font-size: 20px;
}

.next-notification a,
.prev-notification a {
    color: #eeeeee;
    text-decoration: none;
}

/* notification end /*

/* release notes */
#release-note-table {
    font-family: monospace, monospace;
}

.new-updates {
    display: none;
    position: relative;
    width: 20px;
    height: 20px;
    top: -4px;
    left: 4px;
}

/* release notes end */

/* error */
.error {
    font-style: bold;
    color: red;
}

/* error end /*

/* Admin Function */

/* Answer */
.answer>textarea {
    width: 50%;
    height: 4em;
}

.remove-answer-img {
    width: 20px;
    height: 20px;
}

.add-answer-img {
    width: 20px;
    height: 20px;
}

#stats-img {
    cursor: pointer;
}

/* Answer end */

/* Add Poll */
#poll-form {
    color: #161619;
}

#poll-form label {
    color: #cccccc;
}

/* Add Poll end */

/* Current Bracket */
#bracket label {
    margin: 0;
}

#bracket select {
    border: none;
    color: #161619;
}

#bracket input[id="submit"] {
    color: #161619;
}

/* Current Bracket end */

/* Bracket/Fee Deadline */
#deadline-form {
    display: none;
    margin-top: 20px;
    width: 80%;
}

@media only screen and (min-width : 768px) {
    #deadline-form {
        width: 40%;
    }
}

#deadline-form input {
    background-color: #161619;
    color: white;
    border: 2px solid white;
    border-radius: 10px;
    padding: 10px;
    margin: 0;
    height: 50px;
}

#deadline-form input#submit {
    border: none;
    margin-top: 20px;
    width: 40%;
}

/* Bracket/Fee Deadline end */


/* Admin Function end */

/* Statistics */

/* Scoreboard */
#scoreboard-bar {
    margin-top: 55px;
    width: 100%;
    height: 45px;
    background-image: linear-gradient(to right, var(--high-purple), var(--low-purple));
    margin-left: 0px;
    margin-right: 0px;
    display: flex;
}

#scoreboard-bar>.container {
    display: flex;
    align-items: center;
}

@media only screen and (max-width : 768px) {
    #scoreboard-bar>.container {
        width: 100%;
    }
}

#scoreboard-bar>.container>div#select-league-div {
    margin: 0;
    flex-grow: 2;
    font-family: var(--dm-sans);
    font-weight: bold;
    font-style: italic;
}

#scoreboard-bar #select-league {
    padding: 0px 8px;
    border-radius: 7px;
    font-size: 18px;
    min-width: 150px;
    max-width: 200px;
    /* position: relative;
    left: 15px; */
    /*  temp disable dropdown arrow.
        TO BE REMOVED when selection league
        contains more leagues,
        that is, when users will be able to create
        their own league.
    */
    -moz-appearance: none;
    -webkit-appearance: none;
}

/*  temp disable dropdown arrow.
    TO BE REMOVED when selection league
    contains more leagues,
    that is, when users will be able to create
    their own league.
*/
#scoreboard-bar #select-league::-ms-expand {
    display: none
}

/* #scoreboard-bar #select-league .verified-league {
    background-image: url('verifiedicon.svg');
    background-repeat: no-repeat;
    background-size: 10px 10px;
    background-position: right center;
} */

#show-hide-text {
    font-size: 16px;
    font-family: var(--dm-sans);
    font-weight: 400;
}

#scoreboard-bar>.container>.show-hide-result>label {
    margin-bottom: 0;
    margin-right: 5px;
}

.scoreboard-body.no-match {
    text-align: center;
}

.no-match-scheduled {
    overflow-wrap: break-word;
    white-space: break-spaces;
    display: block;
    margin-top: 30px;
}

.switch {
    position: relative;
    /* display: inline-block; */
    width: 60px;
    height: 30px;
    float: right;
    margin: 0;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #161619;
    /* -webkit-transition: .4s; */
    /* transition: .4s; */
}

.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:not(:checked)+.slider {
    /* background-color: #2196F3; */
    background-image: linear-gradient(to right, var(--high-purple), var(--low-purple));
}

input:focus+.slider {
    /* box-shadow: 0 0 1px #2196F3; */
}

input:not(:checked)+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border: 2px solid white;
    border-radius: 30px;
}

.slider.round:before {
    border-radius: 50%;
}

#todays-games {
    margin-top: -35px;
}

#scoreboard {
    width: 100%;
    /* margin-top: -35px; */
    height: 170px;
    overflow-y: scroll;
    white-space: nowrap;
    cursor: grab;
}

/* Hide scollbar mantaining functionality */
#scoreboard::-webkit-scrollbar {
    /* chrome, safari, opera */
    display: none;
}

#scoreboard {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

#game-date {
    display: none !important;
}

.scoreboard-match {
    position: relative;
    background-color: #161619;
    width: 190px;
    height: 150px;
    border-radius: 10px;
    box-shadow: var(--qdt-box-shadow);
    border: 2px solid white;
    /* display: none; */
    margin-left: 5px;
    display: inline-block;
    user-select: none;
    margin-right: 5px;
    font-family: var(--bayon);
    font-size: 300;
}

.scoreboar-header {
    height: 20%;
}

.scoreboard-series-game-number {
    position: absolute;
    margin: 0;
    top: 3px;
    left: 5px;
}

.scoreboard-game-status-text {
    position: absolute;
    /* float: right; */
    top: 3px;
    right: 7px;
    margin: 0;
}

.scoreboard-game-status-text,
.scoreboard-series-game-number {
    font-size: 13px;
}

.scoreboard-boby {
    height: 60%;
}

.away-team>img {
    top: 32px;
    left: 5px;
}

.away-team .tricode {
    position: absolute;
    top: 35.5px;
    left: 55px;
}

.away-team .score {
    position: absolute;
    top: 35.5px;
    right: 15px;
}

/* .away-team::after {
    content : "";
    position: absolute;
    left: 10%;
    bottom: 0;
    height: 1px;
    border: 1px solid #999;
    width: 80%;
} */

.home-team>img {
    top: 78px;
    left: 5px;
}

.home-team .tricode {
    position: absolute;
    top: 81.5px;
    left: 55px;
}

.home-team .score {
    position: absolute;
    top: 81.5px;
    right: 15px;
}

.tricode,
.score {
    font-size: 20px;
    margin: 0;
}

#show-hide-val {
    display: none;
}

.score.hide-result span {
    display: none;
}

.user-bracket .score.hide-result span {
    display: block;
}

.score.hide-result::after {
    content: "- -"
}

.bracket-result.score.hide-result::after {
    content: "-"
}

.user-bracket .bracket-result.score.hide-result::after {
    content: ""
}

.home-logo-img,
.away-logo-img {
    position: absolute;
    width: 35px;
    height: 35px;
    /* avoid user to select or drag logo images */
    user-select: none;
    -webkit-user-drag: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.game-status {
    display: none !important;
}

.game-time-utc {
    display: none !important;
}

.series-text {
    display: none !important;
}

.series-text-val {
    color: #999;
    position: absolute;
    font-size: 14px;
    /* left: 105px;
    left: 68.16px; */
    left: 65px;
    top: 115px;
}

.live-match {
    background-color: red;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    margin-right: 3px;
    display: inline-block;
    display: none;
    animation: liveMatch 2s linear infinite;
}

@keyframes liveMatch {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0;
    }
}

.prev-game,
.next-game {
    cursor: pointer;
    /* position: absolute; */
    top: 140px;
    width: auto;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

a.prev-game.disable,
a.next-game.disable {
    cursor: not-allowed;
    text-decoration: none;
    color: white;
}

/* a.prev-game:hover,
a.prev-game:focus,
a.next-game:hover,
a.next-game:focus {
    color: white;
    text-decoration: none;
} */

.next-game {
    margin-left: 20px;
    border-radius: 3px 0 0 3px;
}

/* .prev-game {
    margin-right: 20px;
}  */
/* Scoreboard end */

/* Statistics end */

/* Edit profile */
/* .edit-profile {
    display: flex;
    flex-direction: column;
    width: 50%;
    // row-gap: 20px;
} */

.edit-profile>input {
    color: #161619;
}

.edit-profile>p {
    font-size: 15px;
}

.edit-profile-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: max-content;
    margin-bottom: 30px;
    row-gap: 20px;
    margin-top: 25px;
}

@media only screen and (min-width : 956px) {
    .edit-profile-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr;
        column-gap: 50px;
    }
}

.edit-profile-grid .profile-pic-border {
    position: relative;
}

#edit-pic-label {
    display: flex;
    justify-content: center;
    /* background-image: linear-gradient(to right, var(--high-purple), var(--low-purple)); */
    background-color: #161619;
    border-radius: 10px;
    width: 50px;
    height: 50px;
    position: absolute;
    bottom: -5px;
    right: -5px;
    margin: 0;
    cursor: pointer;
    box-shadow: 4px 4px black;
}

#edit-pencil-img {
    width: 32px;
    height: 32px;
    position: relative;
    /* padding: 2px; */
    align-self: center;
}

.edit-profile-grid #username {
    text-align: left;
    background-color: #26262D;
    border: 1px solid white;
    border-radius: 10px;
    width: 300px;
    text-indent: 20px;
}

.edit-user-info p {
    font-family: var(--dm-sans);
    font-weight: 700;
}

.edit-user-info #username {
    font: var(--chakra-title);
    font-style: italic;
    background-color: #161619;
}

p.edit-about-me {
    margin-top: 30px;
}

.edit-profile-grid #about-me {
    width: 300px;
    height: 200px;
    background-color: #161619;
    border: 1px solid white;
    border-radius: 10px;
    padding: 10px;
    font-family: var(--dm-sans);
}

@media only screen and (min-width : 768px) {
    .edit-profile-grid #username {
        width: 500px;
        font-size: 42px;
    }

    .edit-profile-grid #about-me {
        width: 500px;
    }
}

#edit-profile-save {
    width: 200px;
    height: 50px;
    background-image: url('save.svg');
    background-size: 32px 32px;
    background-repeat: no-repeat;
    background-position: 7px 7px;
    padding-left: 32px;
    border-radius: 10px;
    margin-bottom: 20px;
    background-color: #0000004f;
    color: #eeeeee;
    box-shadow: 5px 5px black;
    border: none;
    text-align: center;
    white-space: nowrap;
    user-select: none;
}

#edit-profile-save:hover {
    background: url('save.svg') no-repeat 7px 7px/32px 32px, linear-gradient(to right, var(--high-purple), var(--low-purple));
    transition: background-imgage .5s ease;
    -webkit-transition: background-image .5s ease;
    border: none;
}

#edit-profile-save:active {
    box-shadow: 2px 2px black;
    transform: translateY(4px);
}

/* Edit profile end */

/* Teams Standings */
.teams-standings-header {
    display: grid;
    grid-template-areas:
        "team stats";
    grid-template-columns: 70% 25% auto;
    grid-template-rows: auto;
    top: 55px;
    background-image: linear-gradient(to right, var(--high-purple), var(--low-purple));
    color: white;
    border-radius: 15px;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 5px 5px black;
    font-family: var(--chakra);
    font-weight: 700;
    /* border: 1px solid white; */
    box-shadow: var(--qdt-box-shadow);
}

.teams-standings-header.users-standings {
    grid-template-columns: 70% auto;
}

.teams-standings-header-team {
    padding-left: 10px;
    grid-area: team;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 20% auto;
    align-items: center;
}

.teams-standings-header>* {
    /* font-weight: bold; */
}

.teams-standings-header-stats {
    display: flex;
    grid-area: stats;
    align-items: center;
    padding-right: 10px;
}

.teams-standings-header-stats>div {
    width: 40%;
    text-align: right;
}

.teams-standings-header-stats .hidden-stats,
.teams-standings-row .hidden-stats {
    display: none;
}

.teams-standings-row .hidden-stats.hidden-text {
    color: rgba(0, 0, 0, 0);
    font-size: 15px;
    word-spacing: 100vw;
}

.teams-standings {
    display: flex;
    flex-direction: column;
}

.teams-standings-row {
    position: relative;
    display: grid;
    border-radius: 15px;
    margin-bottom: 10px;
    user-select: none;
    grid-template-rows: auto;
    background-color: var(--qdt-background);
    color: var(--my-white);
    box-shadow: 5px 5px black;
    align-items: center;
    padding: 10px;
    /* scroll-snap-align: start none; */
    font-family: var(--dm-sans);
    font-weight: 300;

    cursor: pointer;
}

.teams-standings-row:hover {
    background-image: linear-gradient(to right, var(--high-purple), var(--low-purple));
    color: var(--my-white);
    text-decoration: none;
    transition: background-imgage .5s ease;
    -webkit-transition: background-image .5s ease;
}

.teams-standings-row:focus {
    text-decoration: none;
    color: var(--my-white);
}

.teams-standings-row:active {
    box-shadow: 2px 2px black;
    transform: translateY(4px);
}

/* Teams-temp: To be removed when teams statistics are available */
.teams-standings-row.teams-temp {
    cursor: unset;
}

.teams-standings-row.teams-temp:hover {
    background-image: none;
    color: var(--my-white);
    text-decoration: none;
}

.teams-standings-row.teams-temp:active {
    transform: none;
    box-shadow: 5px 5px black;
}

/* Teams-temp */

.teams-standings-row.qualified::after,
.teams-standings-row.play-in::after {
    position: absolute;
    /* z-index: -1; */
    top: 0;
    right: 0;
    border-radius: 0 15px 15px 0;
    width: 2%;
    height: 100%;
    content: "";
}

.teams-standings-row.qualified::after {
    background-color: var(--high-purple);
}

.teams-standings-row.play-in::after {
    background-color: var(--low-purple);
}

.team-info {
    padding-left: 10px;
}

.teams-standings-row {
    grid-template-areas:
        "team stats";
    grid-template-columns: 70% auto;
    /* border: 1px solid white;
    box-shadow: var(--qdt-box-shadow); */
}

.value.hidden-stats.lbu {
    font-size: 15px;
    word-spacing: 100vw;
}

.team-name {
    grid-area: team;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 20% auto;
    align-items: center;
}

.team-name.leagues-standings {
    grid-template-columns: auto;
}

.team-name p {
    margin: 0;
}

.team-name a {
    color: white;
    font-family: var(--chakra);
    /* text-decoration: underline; */
    /* text-decoration-thickness: .5px; */
}

.team-name.leagues-standings a {
    text-decoration: none;
}

.team-name.leagues-standings span {
    /* text-decoration: underline; */
    /* text-decoration-thickness: .5px; */
}

.teams-standings-row .stats {
    grid-area: stats;
    display: flex;
    align-items: center;
    padding-right: 10px;
}

.teams-standings-row .stats .value,
.teams-standings-header-stats>span {
    width: 40%;
    text-align: right;
}

.teams-standings-row .stats .value>p,
.teams-standings-header-stats>div>p {
    margin: 0;
}

/* For large screen other than mobile */
@media only screen and (min-width : 768px) {

    #teams-standing-east,
    #teams-standing-west {
        width: 100%
    }

    .teams-standings-header-stats .hidden-stats,
    .teams-standings-row .hidden-stats {
        display: block;
    }


    .teams-standings-header {
        grid-template-columns: 40% 57% auto;
    }

    .teams-standings-header.users-standings {
        grid-template-columns: 40% auto;
    }

    .teams-standings-header-stats {
        grid-area: stats;
        display: flex;
        align-items: center;
        padding-right: 5px;
    }

    .teams-standings-header-stats>span {
        width: 20%;
        text-align: right;
    }

    .teams-standings-row {
        grid-template-areas:
            "team stats";
        grid-template-columns: 40% 57% auto;
    }

    .teams-standings-row.users-standings {
        grid-template-columns: 40% auto;
    }

    .teams-standings-row .stats,
    .teams-standings-header-stats {
        /* padding-right: 20px; */
    }

    .teams-standings-row.qualified::after,
    .teams-standings-row.play-in::after {
        width: 1%;
    }
}

/* Teams Standings end */

/* Donors Standings */
.donors-standings {}

.donors-standings .teams-standings-header.users-standings,
.donors-standings .teams-standings-row {
    grid-template-areas: "team";
    grid-template-columns: auto;
}

/* .donors-standings .teams-standings-header-team span[title="Username"] {
    text-align: center;
} */

/* .donors-standings .team-name p.donor-name {
    text-align: center;
} */

@media only screen and (min-width : 768px) {
    .donors-standings {
        width: 30%;
    }

    .donors-standings .teams-standings-header.users-standings,
    .donors-standings .teams-standings-row {
        grid-template-areas: "team";
        grid-template-columns: auto;
    }
}

/* Donors Standings End */

/* Help */
.get-help {
    font-family: var(--dm-sans);
    font-weight: 300;
}

/* Help end*/

/**** FANTA ****/

/* Players selection */

#big3-selection {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    height: 400px;
    margin-bottom: 30px;
    margin-top: 20px;
}

.player-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    height: 100%;
    text-align: center;
    background-image: linear-gradient(to right, #e9431b, #f39200);
    border: none;
    border-radius: 5px;
    place-self: center;
    box-shadow: 5px 5px black;
    /* margin: auto; */
}

.player-box.selected {
    border: 4px solid rgb(7, 172, 228);
}

.player-box p {
    font-size: 40px;
    word-break: break-word;
}

#big3-value {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 10px;
}

#big3-value-text {
    text-align: right;
    margin-right: 5px;
}

#big3-value-num {
    margin-left: 5px;
}

#search-bar {
    width: 40%;
    display: inline;
}

#submit-search {
    width: 30%;
    margin-bottom: 10px;
    background-color: #0000004f;
    color: #eeeeee;
    box-shadow: 5px 5px black;
    border: none;
    padding: 6px 12px;
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    place-self: center;
    border-radius: 5px;
}

#submit-search:hover {
    background-image: linear-gradient(to right, #e9431b, #f39200);
    color: #eeeeee;
    text-decoration: none;
    transition: background-imgage .5s ease;
    -webkit-transition: background-image .5s ease;
}

#submit-search:focus {
    text-decoration: none;
    color: #eeeeee;
}

#submit-search.disable {
    color: #999;
    cursor: not-allowed;
}

#submit-search:active {
    box-shadow: 2px 2px black;
    transform: translateY(4px);
}

#players-stat-header {
    display: grid;
    grid-template-areas:
        "player val .";
    grid-template-columns: 60% 35% 5%;
    grid-template-rows: auto;
    position: sticky;
    top: 55px;
    background-color: var(--nba-orange);
    color: white;
    border-radius: 5px;
    z-index: 10;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 5px 5px black;
    font-family: monospace;
}

#players-stat-header>* {
    display: inline;
    align-items: center;
    font-weight: bold;
}

#header-player {
    grid-area: player;
    place-self: center;
}

#header-value {
    grid-area: val;
    place-self: center;
}

#header-stats {
    display: none;
}

/* #players-stats {
    position: relative;
}

#player-list-inner {
    overflow-x: scroll;
}

#players-list {
    border: 1px solid #999;
}

#players-list>thead th {
    background-color: #161619;
    color: #eeeeee;
}
  -- /*
#players-list>thead>tr .fixed {
    position: absolute;
} --

#players-list>tbody>tr:nth-child(odd) td,
#players-list>tbody>tr:nth-child(odd) th {
    background-color: #3a3a44;
    color: #eeeeee;
}

#players-list>tbody>tr:nth-child(even) td,
#players-list>tbody>tr:nth-child(even) th {
    background-color: #44444f;
    color: #eeeeee;
}

.td-players-list {
    width: 14%;
}


.td-players-list.position {
    width: 5%;
}

.th-players-list {
    width: 14%;
}

.player-row.disabled {
    display: none;
}

-- /* td.td-players {
    position: relative;
} --

#players-list tr>th:first-child,
#players-list tr>td:first-child {
  position: sticky;
  left: 0;
} */


#players-stats {
    display: flex;
    flex-direction: column;
    /* overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-padding-top: 104px;
    height: 100%; */
}

.player-selection-card {
    display: grid;
    /* border: 1px solid black; */
    border-radius: 15px;
    margin-bottom: 10px;
    /* cursor: pointer; */
    user-select: none;
    grid-template-areas:
        "player val add";
    grid-template-columns: 55% 30% 15%;
    grid-template-rows: auto;
    background-color: var(--my-black);
    color: var(--my-white);
    box-shadow: 5px 5px black;
    align-items: center;
    z-index: 0;
    /* scroll-snap-align: start none; */
}

.player-selection-card.selected {
    position: sticky;
    z-index: 15;
    background-color: black;
    /* border-radius: 0px; */
}

.player-prefs {
    grid-area: add;
    display: flex;
    gap: 10px;
    justify-content: center;
}

.pin-player {
    font-size: 32px;
    position: relative;
    bottom: .1em;
    cursor: pointer;
}

.select-player {
    color: rgb(146, 0, 0);
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    margin-right: 3px;
}

.select-player.disabled {
    cursor: not-allowed;
    color: green;
    opacity: 0.7;
}


/* .player-stat.player-info {
    grid-area: player;
    display: grid;
    margin-left: 10px;
    grid-template-areas:
        "player player player player"
        "stat stat stat stat"
        "stat stat stat stat";
} */
.player-stat.player-info {
    padding-left: 20px;
}

.player-name {
    grid-area: player;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 20% auto;
    align-items: center;
}

.player-name p {
    margin: 0;
}

.player-name .player-team-jer-logo {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin-right: 10px;
    display: table;
    opacity: 0.7;
    /* padding-left: 5px; */
}

.player-name .player-team-jer-logo .jer-num {
    display: table-cell;
    color: black;
    font-size: 15px;
    margin: 0 auto;
    height: 100%;
    width: 20px;
    vertical-align: middle;
    text-align: center;
}

.player-stat-val {
    display: none;
}

/* For large screen other than mobile */
@media only screen and (min-width : 768px) {
    #players-stat-header {
        grid-template-areas:
            "player stats val .";
        grid-template-columns: 30% 40% 20% 10%;
    }

    #header-stats {
        grid-area: stats;
        display: flex;
        justify-content: right;
        gap: 35px;
    }

    .player-selection-card {
        grid-template-areas:
            "player stats val add";
        grid-template-columns: 30% 40% 20% 10%;
    }

    /* .player-stat-val {
        grid-area: stats;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
    } */

    .player-stat-val {
        grid-area: stats;
        display: flex;
        align-items: center;
    }

    .player-stat-val>div {
        text-align: right;
        width: 20%;
    }

    .player-stat-val>div>p {
        margin: 0;
    }

    .select-player {
        margin-right: 0;
    }
}

.player-stat.player-val {
    grid-area: val;
    place-self: center;
    font-size: 32px;
}

.player-stat-label {
    font-weight: bold;
    display: block;
}

/* Players selection */
/* Achievements */
.achievements-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 25px;
    row-gap: 30px;
    column-gap: 10px;
}

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

.achievement-box {
    /* position: relative; */
    display: flex;
    flex-direction: column;
    width: 130px;
    height: 130px;
    background-color: #161619;
    border: 2px solid white;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    box-shadow: var(--qdt-box-shadow);
}

.achievement .trophy {
    width: 40px;
    height: 40px;
}

.achievement .trophy.trophy-image {
    width: 50%;
    height: 50%;
}


.achievement-name,
.achievement-desc {
    font-family: "DM Sans", sans-serif;
    text-align: center;
}

.achievement-progress {
    /* position: absolute; */
    width: 60%;
    height: 16px;
    background-color: #f5f5f5;
    border-radius: 7px;
    margin-top: 20px;
    bottom: 10px;
}

.progress-data {
    height: 100%;
    width: 0;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    border: 1px solid #f5f5f5;
    border-radius: 7px;
    float: left;
    background-image: linear-gradient(to right, var(--high-purple), var(--low-purple));
    /* transition: width 5s ease-in; */
    max-width: 100%;
}

.progress-data span {
    position: absolute;
    width: 100%;
    text-align: center;
    color: black;
    display: block;
    font-family: var(--dm-sans);
}

.achievement-box-modal {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: auto;
    background-color: black;
    background-color: rgba(0, 0, 0, 0.4);
    transition: visibility 0s, opacity .3s ease-in;
}

.achievement-box-content {
    position: relative;
    background-color: #161619;
    margin: 25% auto;
    padding: 20px;
    border-radius: 5%;
    border: 2px solid white;
    width: 65vw;
    height: 40vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.achievement-box-content .achievement-img-box {
    width: 150px;
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.achievement-box-content .trophy {
    width: 70px;
    height: 70px;
    margin-bottom: 30px;
}

.achievement-box-content .trophy {
    width: 100%;
    height: 80%;
}

.achievement-box-modal .achievement-progress {
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
    bottom: auto;
}

.achievement-box-modal .achievement-name {
    margin-top: 10px;
}

@media screen and (min-width: 768px) {
    .achievement-box {
        height: 250px;
        width: 250px;
    }

    .achievement-box-modal {
        overflow: hidden;
    }

    .achievement-box-content {
        margin: 15% auto;
        border-radius: 5%;
        width: 450px;
        height: 50vh;
    }

    .achievement-progress {
        bottom: 25px;
    }

    .achievement .trophy {
        height: 100px;
        width: 100px;
    }

    .achievement-box-content .trophy {
        height: 140px;
        width: 140px;
    }

    .achievement-box-modal .achievement-progress {
        position: relative;
        height: 30px;
        bottom: auto;
        border-radius: 12px;
    }

    .achievement-box-modal .progress-data {
        font-size: 18px;
        line-height: 30px;
        border-radius: 12px;
    }
}

/* Achievements End */

/* AddTicket */
.ticket-form input,
select {
    background-color: #161619;
    color: white;
    border: 2px solid white;
    border-radius: 10px;
    padding: 10px;
    margin: 0;
}

.submit .profile-btn {
    border: none;
    margin-top: 30px;
    margin-bottom: 20px;
}

.add-user-ticket {
    display: flex;
    flex-direction: column;
}

.add-user-ticket div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media screen and (min-width: 768px) {
    .add-user-ticket div {
        width: 40%;
    }
}

div.add-donation::after,
div.satispay::after,
div.add-payment::after {
    content: "";
    flex: auto;
}

div.add-donation input,
div.satispay input,
div.add-payment input {
    margin-left: 30px;
}

div.user-donation-amount,
div.user-fee-payment-amount,
div.user-bracket-completed {
    position: relative;
    left: 5%;
    font-size: 17px;
}

div.user-bracket-completed {
    margin-top: 10px;
}

div.user-donation-amount {
    margin-bottom: 30px;
}

div.user-fee-payment-amount {
    flex-direction: column;
    align-items: start;
}

div.user-donation-amount p,
div.user-fee-payment-amount p,
div.user-bracket-completed p {
    margin-bottom: 0;
}

#new-donation,
#fee-payment {
    position: relative;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity .3s ease-in;
    left: 5%;
    display: grid;
    /* grid-template-columns: 1fr; */
    border: 5px solid transparent;
    /* border-radius: 10px; */
    width: 400px;
}

#new-donation {
    border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
    border-image-slice: 1;
    grid-template-areas:
        "donation"
        "submit";
}

#fee-payment {
    border-color: var(--low-purple);
    grid-template-areas:
        "payment"
        "submit";
}

.fee-not-paid {
    color: red;
}

#new-donation .donation {
    grid-area: donation;
    margin: 10px;
    width: 90%;
}

#new-donation .donation .amount {
    display: flex;
    width: 100%;
}

#new-donation .donation .amount input {
    width: 100px;
}

#new-donation .submit {
    grid-area: submit;
    place-self: center;
}

#new-donation .donation .user {
    display: none !important;
}

#fee-payment .payment {
    display: flex;
    flex-direction: column;
    grid-area: payment;
    margin: 20px 20px 0 20px;
    width: 90%;
}

#fee-payment .payment-time {
    margin: 10px;
    width: 100%;
}

#fee-payment .payment .amount {
    display: flex;
    width: 100%;
}

#fee-payment .payment .amount input {
    width: 100px;
}

#fee-payment .payment .payment-time input {
    width: 200px;
}

#fee-payment .submit {
    grid-area: submit;
    place-self: center;
}

#fee-payment .payment .user {
    display: none !important;
}

div.ticket {
    justify-content: unset;
}

div.ticket label {
    margin-right: 100px;
}

div.ticket input {
    width: 100px;
}

.additional-ticket {
    margin-left: 10px;
    color: var(--low-purple);
}

#user-ticket {
    color: rgb(158, 158, 158);
    margin-left: 20px;
}

/* AddTicket end */