@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Handlee&display=swap');

:root {
    --bs-body-font-family: 'Ubuntu', sans-serif;
    --swiper-navigation-size: 22px !important;
    --swiper-theme-color: var(--bs-dark) !important;
    --sidebar-width: 70px;
}

html, body {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    --bs-body-font-size: 16px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
        --bs-body-font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}

.handwrite {
    font-family: 'Handlee', cursive;
}

.fw-medium {
    font-weight: 500;
}

/* Sidebar */

#body-wrapper {
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#main-wrapper.sidebar-show > #body-wrapper {
    margin-left: 0;
}

#offcanvasMenu {
    background-color: var(--bs-body-bg);
}

#main-wrapper.sidebar-show > #sidebar {
    margin-left: calc(var(--sidebar-width) * -1);
}

#sidebar {
    min-width: var(--sidebar-width);
    max-width: var(--sidebar-width);
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    position: fixed;
    top: 0;
    height: 100%;
    z-index: 20;
}

    #sidebar .scroll-sidebar {
        overflow-y: auto;
        padding: 0 24px;
        height: calc(100vh - 80px);
    }

        #sidebar .scroll-sidebar::-webkit-scrollbar {
            width: 5px;
            height: 8px;
            background-color: transparent;
        }

        #sidebar .scroll-sidebar::-webkit-scrollbar-thumb {
            background: transparent;
            border-radius: 8px;
        }

        #sidebar .scroll-sidebar:hover::-webkit-scrollbar-thumb {
            background: #888;
        }

@media (min-width: 768px) {
    #main-wrapper > #body-wrapper {
        margin-left: var(--sidebar-width) !important;
    }

    #main-wrapper > #sidebar {
        margin-left: 0 !important;
    }
}

/* End Sidebar */

/* Navbar */

#main-nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    padding: 1rem;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#btnMenu {
    display: block;
}

@media (min-width: 768px) {
    #main-nav {
        left: var(--sidebar-width);
    }

    #btnMenu {
        display: none;
    }
}

/* End Navbar*/

#mobile-menu a {
    padding-top: .75rem;
    padding-bottom: .75rem;
    border-radius: 6px;
    margin: 2px 0;
}

    #mobile-menu a:first-child {
        margin-top: 0px;
    }

    #mobile-menu a:last-child {
        margin-bottom: 0px;
    }

/*.grid-game > .grid-game-letter:first-child {
    margin-top: 0px !important;
    background-color: red !important;
}*/

.grid-game > :nth-child(2).grid-game-letter {
    margin-top: 1rem !important;
}

a,
button,
img {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    -webkit-user-drag: none;
    user-select: none; /* Standard */
    user-drag: none;
}

.no-selection {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    user-select: none; /* Standard */
}

button:focus {
    outline: none !important;
    box-shadow: none !important;
}

.no-outline:focus {
    outline: none !important;
    box-shadow: none !important;
}

.lh-0 {
    line-height: 0;
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list-group-item {
    border: none;
    font-weight: 500;
}

.btn-standard {
    min-width: 160px;
}

.dw-450 {
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
}

.fs-8px {
    font-size: 8px;
}

.fs-9px {
    font-size: 9px;
}

.fs-10px {
    font-size: 10px;
}

.fs-12px {
    font-size: 12px;
}

.boardgames-bg {
    background-image: radial-gradient( circle 343px at 46.3% 47.5%, rgba(242,242,242,1) 0%, rgba(241,241,241,1) 72.9% );
}

.va-tb {
    vertical-align: text-bottom;
}

td, th {
    vertical-align: middle;
}

tr.tr-no-border > td {
    border-bottom: 0 !important;
}

.drop-shadow {
    -webkit-filter: drop-shadow(0 2px 2px rgba(0,0,0,.25));
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.25));
}

.bg-absurdity {
    background: url(/images/backgrounds/absurdity.png) repeat;
}

.bg-debut-light {
    background: url(/images/backgrounds/debut-light.png) repeat;
}

.ball {
    position: fixed;
    border-radius: 100%;
    opacity: 0.7;
    z-index: -1;
}

.blur-sm {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.blur-lg {
    background: rgba(255,255,255,0.8);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}

.no-outline {
    outline: none !important;
    box-shadow: none !important;
}

.progress {
    width: 30px;
    height: 5px;
}

.img-brand {
    width: auto;
    height: 30px;
    /*padding-top: 3px*/
}

.score-card {
    background-image: linear-gradient(rgb(255 255 255 / 75%), rgb(255 255 255 / 75%)), url('/images/backgrounds/inflicted.png');
}

.score-card.score-card-hover {
    transition: background-color ease .3s, box-shadow ease .3s;
}

    .score-card.score-card-hover:hover {
        box-shadow: 0 15px 22px -10px rgba(31, 31, 31, 0.5) !important;
    }

.game-card-pad-adj-not {
    margin: -0.5rem;
}

.game-card-pad-adj {
    padding: .5rem;
}

.game-img {
    height: 140px;
    object-fit: cover;
}

.game-card .game-img {
    transform-origin: center;
    transform: scale(1);
    -webkit-transition: transform 2s ease;
    -moz-transition: transform 2s ease;
    -o-transition: transform 2s ease;
    -ms-transition: transform 2s ease;
    transition: transform 2s ease;
}

.game-card:hover .game-img {
    -webkit-transform: scale(1.15);
    -moz-transform: scale(1.15);
    -ms-transform: scale(1.15);
    -o-transform: scale(1.15);
    transform: scale(1.15);
}

.game-card .game-link {
    background-color: #00000080;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    height: 60px;
}

@media (min-width: 768px) {
    .game-img {
        height: 180px;
    }

    .game-card .card {
        -webkit-transition: box-shadow .4s ease;
        -moz-transition: box-shadow .4s ease;
        -o-transition: box-shadow .4s ease;
        -ms-transition: box-shadow .4s ease;
        transition: box-shadow .4s ease;
    }

    .game-card:hover .card {
        box-shadow: 0 15px 10px -10px rgba(31, 31, 31, 0.5) !important;
    }

    .game-card .game-link {
        -webkit-transition: background-color ease .2s, height ease .2s, border-radius ease .2s;
        -moz-transition: background-color ease .2s, height ease .2s, border-radius ease .2s;
        -o-transition: background-color ease .2s, height ease .2s, border-radius ease .2s;
        -ms-transition: background-color ease .2s, height ease .2s, border-radius ease .2s;
        transition: background-color ease .2s, height ease .2s, border-radius ease .2s;
    }

    .game-card:hover .game-link {
        height: 100%;
        background-color: #000000b2;
        border-top-left-radius: var(--bs-border-radius) !important;
        border-top-right-radius: var(--bs-border-radius) !important;
    }
}

.card-tile {
    color: #fff;
    min-width: 110px;
}

@media (min-width: 576px) {
    .card-tile {
        min-width: 120px;
    }
}

#imgMobile {
    max-height: 40vh;
}

@media (min-width: 992px) {
    #imgMobile {
        max-height: 60vh;
    }
}

/* Loader */
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: #ffffff99;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.5s ease;
    transition: opacity 0.25s ease;
}

    #loader.fadeIn {
        opacity: 1;
        visibility: visible;
    }

/* End Loader */

/* Navbar Toggler */

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
}

.navbar-toggler {
    border: none;
    display: block;
    background: transparent !important;
}

    .navbar-toggler:hover {
        background: transparent !important;
    }

    .navbar-toggler .icon-bar {
        width: 22px;
        height: 2px;
        display: block;
        border-radius: 1px;
        background-color: var(--bs-body-color);
        -webkit-transition: all 0.2s;
        transition: all 0.2s;
    }

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

    .navbar-toggler.minus.collapsed .icon-bar:nth-of-type(1) {
        transform: translate3d(0,0,0) rotate(0deg);
    }

    .navbar-toggler.minus.collapsed .icon-bar:nth-of-type(2) {
        transform: translate3d(0,0,0) rotate(0deg);
    }

    .navbar-toggler.minus.collapsed .icon-bar:nth-of-type(3) {
        transform: translate3d(0,0,0) rotate(0deg);
    }

    .navbar-toggler.minus .icon-bar:nth-of-type(1) {
        transform: translate3d(0,6px,0);
    }

    .navbar-toggler.minus .icon-bar:nth-of-type(3) {
        transform: translate3d(0,-6px,0);
    }

/* End Navbar Toggler */

/* DevExtreme */

.dx-widget {
    font-family: var(--bs-body-font-family) !important;
    font-size: var(--bs-body-font-size) !important;
}

/* End DevExtreme */

/* Radio Button */

label.radio-card {
    cursor: pointer;
    width: 100%;
}

    label.radio-card .card-content-wrapper {
        background: #fff;
        border-radius: 5px;
        min-height: 100px;
        padding: 15px;
        display: grid;
        box-shadow: 0 2px 4px 0 rgba(219, 215, 215, 0.04);
        transition: 200ms linear;
    }

    label.radio-card .check-icon {
        width: 20px;
        height: 20px;
        display: inline-block;
        border: solid 2px #e3e3e3;
        border-radius: 50%;
        transition: 200ms linear;
        position: relative;
    }

        label.radio-card .check-icon:before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.93552 4.58423C0.890286 4.53718 0.854262 4.48209 0.829309 4.42179C0.779553 4.28741 0.779553 4.13965 0.829309 4.00527C0.853759 3.94471 0.889842 3.88952 0.93552 3.84283L1.68941 3.12018C1.73378 3.06821 1.7893 3.02692 1.85185 2.99939C1.91206 2.97215 1.97736 2.95796 2.04345 2.95774C2.11507 2.95635 2.18613 2.97056 2.2517 2.99939C2.31652 3.02822 2.3752 3.06922 2.42456 3.12018L4.69872 5.39851L9.58026 0.516971C9.62828 0.466328 9.68554 0.42533 9.74895 0.396182C9.81468 0.367844 9.88563 0.353653 9.95721 0.354531C10.0244 0.354903 10.0907 0.369582 10.1517 0.397592C10.2128 0.425602 10.2672 0.466298 10.3112 0.516971L11.0651 1.25003C11.1108 1.29672 11.1469 1.35191 11.1713 1.41247C11.2211 1.54686 11.2211 1.69461 11.1713 1.82899C11.1464 1.88929 11.1104 1.94439 11.0651 1.99143L5.06525 7.96007C5.02054 8.0122 4.96514 8.0541 4.90281 8.08294C4.76944 8.13802 4.61967 8.13802 4.4863 8.08294C4.42397 8.0541 4.36857 8.0122 4.32386 7.96007L0.93552 4.58423Z' fill='white'/%3E%3C/svg%3E%0A");
            background-repeat: no-repeat;
            background-size: 12px;
            background-position: center center;
            transform: scale(1.6);
            transition: 200ms linear;
            opacity: 0;
        }

    label.radio-card input[type=radio] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

        label.radio-card input[type=radio]:checked + .card-content-wrapper {
            box-shadow: 0 2px 4px 0 rgba(219, 215, 215, 0.5), 0 0 0 2px #3057d5;
        }

            label.radio-card input[type=radio]:checked + .card-content-wrapper .check-icon {
                background: #3057d5;
                border-color: #3057d5;
                transform: scale(1.2);
            }

                label.radio-card input[type=radio]:checked + .card-content-wrapper .check-icon:before {
                    transform: scale(1);
                    opacity: 1;
                }

        label.radio-card input[type=radio]:focus + .card-content-wrapper .check-icon {
            box-shadow: 0 0 0 4px rgba(48, 86, 213, 0.2);
            border-color: #3056d5;
        }

/* End Radio Button */

/* Ranking */

.badge-ranking {
    border: 3px solid var(--bs-body-bg);
    width: 30px;
    height: 30px;
    color: var(--bs-dark);
    background-color: #f1eeee;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.50) 0%, rgba(0,0,0,0.50) 100%), radial-gradient(at 50% 0%, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.50) 50%);
    background-blend-mode: soft-light,screen;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.badge-ranking-1 {
    background-color: #f7de6a !important;
}

.badge-ranking-2 {
    background-color: #dfdcd8 !important;
}

.badge-ranking-3 {
    background-color: #cdb291 !important;
}

/* Validation */

.dx-form-validation-summary {
    margin-top: 1rem;
}

.validation-summary-errors ul {
    list-style: none;
    padding-left: 0;
}

.validation-summary-errors > ul > li {
    color: #f74d61;
    -webkit-text-size-adjust: none;
    print-color-adjust: exact;
    font-weight: 400;
    font-size: 14px;
    font-family: "Helvetica Neue","Segoe UI",helvetica,verdana,sans-serif;
    line-height: 1.35715;
    border-bottom: 1px dashed;
    display: inline-block;
}

/* End Validation */

/* Offcanvas */

.offcanvas.offcanvas-bottom {
    height: unset;
}

.offcanvas-body::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 12px;
}

.offcanvas-body::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.0);
}

.offcanvas-body::-webkit-scrollbar-thumb {
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.3);
    transition: all .2s ease;
}

    .offcanvas-body::-webkit-scrollbar-thumb:hover {
        border: 2px solid rgba(0, 0, 0, 0);
        background-color: rgba(0, 0, 0, 0.4);
    }

    .offcanvas-body::-webkit-scrollbar-thumb:active {
        border: 2px solid rgba(0, 0, 0, 0);
        background-color: rgba(0, 0, 0, 0.4);
    }

/* End Offcanvas */

/* Animations */

.blinking {
    -webkit-animation: 1s blink ease infinite;
    -moz-animation: 1s blink ease infinite;
    -ms-animation: 1s blink ease infinite;
    -o-animation: 1s blink ease infinite;
    animation: 1s blink ease infinite;
}

@keyframes blink {
    from, to {
        opacity: 0.2;
    }

    50% {
        opacity: 1;
    }
}

@-moz-keyframes blink {
    from, to {
        opacity: 0.2;
    }

    50% {
        opacity: 1;
    }
}

@-webkit-keyframes blink {
    from, to {
        opacity: 0.2;
    }

    50% {
        opacity: 1;
    }
}

@-ms-keyframes blink {
    from, to {
        opacity: 0.2;
    }

    50% {
        opacity: 1;
    }
}

@-o-keyframes blink {
    from, to {
        opacity: 0.2;
    }

    50% {
        opacity: 1;
    }
}

/* End Animations */