/* === header === */

:root {
    --sp-header-bg-color: #1b1b21;
    /* --sp-navbar-height: 4.75rem; */
    /* --sp-navbar-height: 3.5rem; */
    /* --sp-navbar-height: 2.5rem; */
    --sp-navbar-height: 3.0rem;
    --sp-menu-border-color: #36353b;
    /* --sp-menu-height: 2.0rem; */
    --sp-menu-height: 2.5rem;
    --sp-menu-grad-deg: 180deg;
    --sp-menu-grad-top: 30%;
    --sp-menu-grad-bottom: calc(100% - var(--sp-menu-grad-top));
}

#page {
    margin-top: calc(var(--sp-navbar-height) + var(--sp-menu-height) + 1.5rem);
}

@media screen and (min-width:381px) {
    #page {
        margin-top: calc(var(--sp-navbar-height) + var(--sp-menu-height) + 1.5rem);
    }
}

header {
    background-color: var(--sp-header-bg-color);
}

.navbar {
    min-height: var(--sp-navbar-height);
    /* --bs-navbar-padding-y: 0.5rem; */
    --bs-navbar-padding-y: 2px;
}

header .navbar img {
    max-width: 10rem;
}

/* .menu {
    border-top: 1px solid var(--sp-menu-border-color);
    height: var(--sp-menu-height);
} */

.menu ul {
    overflow-x: scroll;
}

@media screen and (min-width:576px) {
    .menu ul {
        overflow-x: hidden;
    }
    .menu ul li figure {
        padding: 5px 5px 4px 5px !important;   
    }
}

@media screen and (max-width:575.98px) {
    :root {
        --sp-menu-height: 35px;
    }
    #page {
        margin-top: calc(var(--sp-navbar-height) + var(--sp-menu-height) + 1.5rem);
    }
    .menu ul li {
        /* flex: 1 1 0; */
        min-width: 9rem;
    }
}


.menu ul li {
    flex: 1 1 0;
    /* min-width: 9rem; */
}

.menu ul li a {
    text-decoration: none;
}

.menu ul li figure {
    color: #c7c7c7;
    font-size: 15px;
    font-weight: 400;
    /* padding: 5px 5px 0px 5px; */
    padding: 8px 8px 8px 8px;
    /* height: 50px; */
}

.menu ul li figure img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    opacity: 0.7;
}

.menu .active figure img {
    opacity: 1;
}

.menu .active figure {
    color: #f2f2f2;
    font-weight: 600;
}

/* .menu li:not(.active)::after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background: #fff;
    transform: scaleX(0);
    transform-origin: bottom left;
    transition: transform 0.25s ease-out;
}

.menu li:not(.active):hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
} */

/* .menu .active:after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background: #fff;
} */

/* .menu ul li {
    display: block;
    margin-left: auto;
    margin-right: auto;
} */

.menu ul li {
    max-width: 200px !important;
}

.menu ul .item__latest.active {
    /* background: #0855b3;
    background: #034ca5;
    background: #52a4ec;
    background: #9b59b6; */
    background: #a0297b;
}

.menu ul .item__live-poker.active {
    /* background: #da4453; */
    background: #a0297b;
}

.menu ul .item__events.active {
    /* background: #f3c302; */
    background: #a0297b;
}

.menu ul .item__reviews.active {
    /* background: #7b87b2; */
    background: #a0297b;
}

.menu ul .item__rooms.active {
    /* background: #2ebf91; */
    background: #a0297b;
}

.menu ul .item__latest {
    background: linear-gradient(var(--sp-menu-grad-deg), var(--sp-header-bg-color) var(--sp-menu-grad-top), #65267F var(--sp-menu-grad-bottom));
}

.menu ul .item__live-poker {
    background: linear-gradient(var(--sp-menu-grad-deg), var(--sp-header-bg-color) var(--sp-menu-grad-top), #532730 var(--sp-menu-grad-bottom));
    /* background: linear-gradient(var(--sp-menu-grad-deg), var(--sp-header-bg-color) var(--sp-menu-grad-top), var(--sp-header-bg-color) 30%, #532730 var(--sp-menu-grad-bottom)); */
}

.menu ul .item__events {
    background: linear-gradient(var(--sp-menu-grad-deg), var(--sp-header-bg-color) var(--sp-menu-grad-top), #493e19 var(--sp-menu-grad-bottom));
}

.menu ul .item__reviews {
    background: linear-gradient(var(--sp-menu-grad-deg), var(--sp-header-bg-color) var(--sp-menu-grad-top), #383b4c var(--sp-menu-grad-bottom));
}

.menu ul .item__rooms {
    background: linear-gradient(var(--sp-menu-grad-deg), var(--sp-header-bg-color) var(--sp-menu-grad-top), #214c42 var(--sp-menu-grad-bottom));
}

/* .my__test {
    border: 1px solid #205fb6;
    border-radius: 5px;
} */