:root {
    --m-color: #E30A17;
    --s-color: #FF9F1C;
    --link1-color: #9D00FF;
    --link2-color: #9500ff;
    --text-color: #111111;
    --bg-color: #ebecf0be;
    --dark-bg-color: #151515;
    --light-color: #EBECF0;
    /* --dark-bg-color: #02020A; */
    --btn-m-color: #6916a5;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.container-content {
    background-image: url('/assets/bg2.jpg');
    /* Full height */

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.main-text-color {
    color: var(--m-color);
}

.title {
    font-family: "Karla", serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.title.main-text-color.page-title {
    font-weight: 900;
    text-transform: uppercase;
}

body {
    font-family: "Inconsolata", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 14px;
    color: var(--text-color);
    background-color: #000;
}

body::before {
    content: '';
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    z-index: -100;
    /* background-image: url('/assets/bg5.jpg'); */
    background:
        linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
        linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
        linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
        linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
        linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
        linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
    background-color: #131313;
    background-size: 20px 20px;

}
.about-page-row {
    background-color: var(--dark-bg-color);
}
.container-logo .nav-link {
    color: var(--light-color);

}

.container-content .navbar-nav {
    background-color: var(--dark-bg-color);
}

.container-content .nav-link {
    color: var(--light-color);
}

.nav-link {
    font-size: larger;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
    color: var(--m-color);
}

.main-content {
    background-color: var(--light-color);
}

.content-live-draw .col-live-draw {
    color: var(--light-color);
    background: #ED213A;
    background: -webkit-linear-gradient(to bottom, #93291E, #ED213A);
    background: linear-gradient(to bottom, #93291E, #ED213A);
}

.content-live-draw .col-live-draw .title {
    background-color: #232526;
    color: var(--light-color);
    border-radius: 3px;
}

.content-live-draw .col-live-draw .live-draw-title {
    font-weight: 800;
}

.live-draw-prize {
    /* background: #232526;
    background: -webkit-linear-gradient(to left, #414345, #232526);
    background: linear-gradient(to left, #414345, #232526); */
    background: #ECE9E6;
    background: -webkit-linear-gradient(to bottom, #FFFFFF, #ECE9E6);
    background: linear-gradient(to bottom, #FFFFFF, #ECE9E6);
}

.live-draw-other {
    background-color: #232526;
    background-color: var(--bg-color);
}

.other-prize-number {
    color: var(--text-color);
    font-size: large;
    font-weight: 700;
}

.jackpot {
    color: var(--light-color);
    background-color: var(--dark-bg-color);
}

.jackpot .jackpot-amount {
    font-size: 2.5rem;
    font-weight: 800;
}

.jackpot .jackpot-date {
    font-size: large;
    font-weight: 700;
}

.recent-date-draw {
    color: var(--light-color);
    background:
        radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0,
        radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px,
        radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0,
        radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px,
        radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0,
        radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px,
        radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0,
        radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px,
        linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0,
        linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0;
    background-color: #300;
    background-size: 100px 100px;
    font-size: larger;
    font-weight: 700;
}



.recent-result .main-prize-title {
    color: var(--light-color);
    background: #ED213A;
    background: -webkit-linear-gradient(to bottom, #93291E, #ED213A);
    background: linear-gradient(to bottom, #93291E, #ED213A);
    text-align: center;
    font-size: x-large;
    font-weight: 800;
    border-top: 3px solid white;
}

.recent-result .main-prize-number {
    color: var(--m-color);
    font-size: xx-large;
    font-weight: 800;
    text-align: center;
}


.recent-result {
    background: #F2F3F4;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #E2E2E2, #F2F3F4);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #E2E2E2, #F2F3F4);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.recent-result .row {
    border: 1px solid var(--m-color);

}

.recent-result .recent-other-title {
    font-size: larger;
    font-weight: 700;
    border-top: 3px solid var(--m-color);
    background-color: var(--dark-bg-color);
    color: var(--light-color);
}

.container-footer {
    text-align: center;
    color: var(--light-color);
    font-size: large;
    border-top: 3px solid var(--m-color);
}



.clock {
    margin: 1rem auto;
}

.clock-container {
    border-radius: 5px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1), 0 15px 20px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    /* flex-wrap: wrap; */
}

.clock-col {
    flex: 20%;
    max-width: 200px;
    text-align: center;
    background: var(--m-color);
    /* background: linear-gradient(180deg, #006ea2 0%, #014e73 100%); */
}



.clock-timer {
    font-size: 3rem;
    /* padding: 50px 0; */
    color: var(--light-color);
    box-shadow: 0 -5px 5px -5px #333;
}

.clock-label {
    text-transform: uppercase;
    font-size: 1.3rem;
    padding: 20px 0;
    margin: 0;
    background: var(--dark-bg-color);
    color: var(--light-color);
    font-weight: 900;
    /* background: linear-gradient(180deg, #02496b 0%, #006ea2 100%); */
    border-top: 1px solid #013e5b;
}

.clock-label.label-days {
    background: #e91e63;
    background: linear-gradient(0deg, #c91c57 0%, #9e1845 100%);
    border-top: 1px solid #a31847;
}


.page-navigation-link nav {
    width: 100%;
}

.page-navigation-link .pagination {
    display: flex;
    justify-content: space-around;
    .page-item.disabled {
        .page-link {
            background: var(--bg-color);
            color: var(--s-color);
        }
    }
    .page-item {
        .page-link {
            background-color: var(--dark-bg-color);
            color: var(--m-color);
            font-weight: 700;

            &:hover {
                background: var(--light-color);
                color: var(--m-dark-color);
            }
        }
    }
}














.bg-row-title {
    background-color: rgba(89, 52, 152, 0.502);
}

.home-subtitle {
    color: var(--light-color);
}

.btn-m-color {
    background-color: var(--btn-m-color);
    color: var(--light-color);
}



#menu-navbar {
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#menu-navbar .navbar-nav {
    background: var(--s-color);
    background: linear-gradient(to bottom, var(--s-color), var(--m-color)) padding-box, linear-gradient(to bottom, var(--s-color), var(--m-color));
    border: 10px solid transparent;
    border-radius: 10px;
}

#menu-navbar .navbar-nav .nav-item.active {
    background: linear-gradient(to bottom, #fff7d5, #d9ad4b);
    border: 1px solid #26446b;
}

#menu-navbar .navbar-nav .nav-item.active i {
    color: #333;
}

#menu-navbar .navbar-nav .nav-item.active a.nav-link {
    color: #583498;
}

#menu-navbar .navbar-nav .nav-item {
    background: var(--s-color);
    background: linear-gradient(to bottom, var(--s-color), var(--m-color));


    border-radius: 10px;
    min-width: auto;
    max-width: none;
    min-height: auto;
    max-height: none;
    font-weight: bold;
}

#menu-navbar .navbar-nav .nav-item a.nav-link {
    color: #fff;
}

.nav-link {
    font-weight: bolder;
}

.latest-result-container {}

.latest-result-container .latest-result-row {
    text-align: center;
    background: var(--s-color);
    background: linear-gradient(to bottom, var(--s-color), var(--m-color));
    /* background: linear-gradient(to bottom, #fff7d5, #d9ad4b); */
    border-radius: 10px;
    color: #fff;
}

.results-page-row {
    text-align: center;
    background: var(--s-color);
    background: linear-gradient(to bottom, var(--s-color), var(--m-color));
    /* background: linear-gradient(to bottom, #fff7d5, #d9ad4b); */
    border-radius: 10px;
    color: #fff;
}


.latest-result-container .latest-result-row .result-date {
    background: radial-gradient(ellipse at center, #fff7d5 25%, #d9ad4b 100%);
    box-shadow: #fff7d5 0 0 35px inset;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    font-weight: bolder;
    padding: 5px 5px 15px;
    border-right: 5px dashed #9d9d9d;
    line-height: 1;
    color: var(--s-color);
}

.latest-result-container .latest-result-row .result-date .result-date-title {
    text-transform: capitalize;
    text-align: center;
    background-color: #111b2e80;
    border-radius: 10px;
    box-shadow: #ffffff78 3px 2px 5px;
    font-size: 1.25rem;
    color: #fffff5;
}

.latest-result-container .latest-result-row .result-date .result-date-month {
    font-size: 2rem;
    text-transform: uppercase;
}

.latest-result-container .latest-result-row .result-date .result-date-day {
    font-size: 3.75rem;
}

.latest-result-container .latest-result-row .result-date .result-date-year {
    font-size: 2.5rem;
}

.latest-result-container .latest-result-row .result-prize-wraper {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: rgba(245, 250, 255, 0.85);
}

.latest-result-container .latest-result-row .result-prize-wraper .result-prize-title {
    color: var(--m-color);
}

.latest-result-container .latest-result-row .result-prize-wraper .result-prize-first-title {
    font-size: 2rem;
    font-weight: bolder;
}

.latest-result-container .latest-result-row .result-prize-wraper .result-prize-second-third-wraper .result-prize-second-third-row .result-prize-second-third-col .result-prize-title {
    font-size: 1.5rem;
    font-weight: bolder;
    /* color: var(--m-color); */
}


.latest-result-container .latest-result-row .result-prize-wraper .result-prize {
    color: #fff;
}

.result-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, #7d4bd9 0%, #583498 100%);
    position: relative;
    margin: 0 5px;
}

.results-page.result-circle {
    width: 35px;
    height: 35px;
}

.results-page.result-circle span {
    font-size: 1.2rem;
    color: var(--light-color);
}

.result-circle span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.75rem;
    font-weight: bold;
}

.result-circle span::before {
    content: "";
    position: absolute;
    bottom: -9px;
    left: 0;
    right: 0;
    width: auto;
    height: 5px;
    border-radius: 50%;
    background-color: #000;
    filter: blur(3px);
}

.result-circle span::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 15px;
    height: 10px;
    margin: 0 auto;
    background-color: rgb(225 225 225 / 24%);
    border-radius: 50px;
}

.latest-result-container .latest-result-row .result-prize-wraper .result-prize-second-third-wraper .result-prize-second-third-row .result-prize-second-third-col {
    border-top: 4px solid var(--s-color);
}

.result-circle-second-third {
    width: 2vw;
    height: 2vw;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, var(--m-color) 0%, #111b2e 100%);
    position: relative;
    margin: 0 5px;
}

.result-circle-second-third span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;

}

.result-circle-second-third span::before {
    content: "";
    position: absolute;
    bottom: -9px;
    left: 0;
    right: 0;
    width: auto;
    height: 5px;
    border-radius: 50%;
    background-color: #000;
    filter: blur(3px);
}

.result-circle-second-third span::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 0;
    right: 0;
    width: 15px;
    height: 10px;
    margin: 0 auto;
    background-color: rgb(225 225 225 / 24%);
    border-radius: 50px;
}

.footer-container {
    border-top: 3px solid #d9ad4b;
    background-color: rgb(225 225 225 / 24%);
    color: #d9ad4b;
    font-size: 1.25rem;
    padding: 1rem 0;
}

.footer-container .footer-motto {
    font-size: 1.5rem;
    color: white;
    font-weight: bolder;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.result-prize-second-third-wraper div.result-prize-second-third-col:first-child {
    border-right: 2px solid var(--s-color);
}

.result-prize-second-third-wraper div.result-prize-second-third-col:last-child {
    border-left: 2px solid var(--s-color);
}

.link-color {
    color: var(--link1-color);
}

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

.m-bg-color {
    background-color: var(--bg-color);
}



.d-bg-color {
    background-color: var(--dark-bg-color);
    color: var(--light-color);
}

/* .page-navigation-link div nav {
    display: flex;
    justify-content: space-around;
    padding-bottom: 10px;
    z-index: 1000;
} */

.relative.inline-flex.items-center.px-4.py-2.text-sm.font-medium.text-gray-500.bg-white.border.border-gray-300.cursor-default.leading-5.rounded-md.select-none {
    border: 1px solid var(--gray) !important;
    background-color: rgba(255, 255, 255, 0.57) !important;
    color: var(--light-color);
    display: block;
    border-radius: 5px;
}

.page-navigation-link div nav span button {
    border: 1px solid var(--dark-blue) !important;
    background-color: rgba(89, 52, 152, 0.7) !important;
    color: var(--light-color);
    border-radius: 5px;
}

@media (max-width: 575.98px) {
    .container-content>.container:nth-child(1) {
        background:
            linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
            linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
            linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
            linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
            linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
            linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
        background-color: #131313;
        background-size: 20px 20px;
        margin-bottom: 10px;
    }
    .main-content .title.jackpot {
        margin-top: 20px;
    }
    .recent-result .main-prize-number {
        font-size: x-large;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {}

@media (min-width: 768px) and (max-width: 991.98px) {}