.g-5, .gx-1 {
    --bs-gutter-x: 0.5rem;
}


body {
    background-color: #72ce64;
}


.bg-grey {
    background-color: #363636 !important;
}

.bg-black {
    background-color: #000000 !important;
}

.bg-green {
    background-color: #72ce64 !important;
}

.text-black{
    color: #000000;
}

.bg-black span.font-weight-bold{
    color: #ffffff;
}

#main {
    border: none !important;
    background-color: unset;
}

#main, .draw_id_container, .time_container {
    padding: 12px;
}

.section-2 #main{
    padding: 4px !important;
}

.card-header{
    background-color: unset;
}


.font-weight-500{
    font-weight: 500 !important;
}


.navbar-dark .navbar-nav .nav-link{
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 600;
}

.single-table td{
    text-align: center;
}

.single-table td div{
    font-size: 22px;
    height: 40px;
    line-height: 40px;
}

.single-table .on {
    height: 40px;
    line-height: 40px;
    width: 40px;
}

.page-home .single-table .on {
    display: inline-block;
}


.grid-col-5{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.grid-col-5 .d-flex{
    justify-content: space-around;
    align-content: center;
    align-items: center;
}


.grid-col-5 .d-flex .number{
    width: 36px;
    height: 36px;
    line-height: 20px;
    font-size: 14px;
}


.container-fluid.app-main-container{
    padding: 0;
}


.section-2 .text-black,
.header .text-black{
    color: #000000 !important;
}


.page-header h3{
    text-transform: uppercase;
    text-align: center;
    font-family: atypical;
    font-size: 3.5rem;
    line-height: 3rem;
    font-weight: 900;
    padding-right: 15px;
    padding-left: 15px;
}

#suggest .small-tables{
    height: 350px;
}

#suggest td div{
    height: 40px;
    line-height: 40px;
}

#suggest td div.on {
    width: 40px;
    display: inline-block;
}


.table-numbers tr td a{
    background: #dc3545;
    color: #ffffff;
    display: inline-block;
    text-align: center;
    border-radius: 100%;
    width: 34px;
    height: 34px;
    line-height: 34px;
    margin: 0 0.25rem;
    font-weight: 500;
    font-size: 20px;

}

.bg-black-title {
    line-height: 13px;
    display: inline-block;
}
.bg-yellow-title{
    background: #FFBA1F;
    color: #000;
    font-weight: 800;
    font-size: 14px;
    padding: 2px 4px;
}

.bg-red-title{
    background: #C62C18;
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    padding: 6px 4px;
    margin-bottom: 4px;
}

body{
    font-family: 'Manrope', sans-serif !important;
}

strong{
    font-weight: 900;
}

.overflow-hidden{
    overflow: hidden;
}

.allDraws td:nth-child(1),
.allDraws td:nth-child(2),
.allDraws td:nth-child(3){
    background-color: white;
}

.allDraws.rounded{
    border-radius: 16px !important;
    border-spacing: 3px;
}

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


.fixed-table tr th,
.fixed-table tr td{
    font-size: 14px;
}


#main {
    width: 484.75px;
}


.card{
    background-color: transparent;
}



.bg-black .grid-col-5 span.font-weight-bold {
    width: 40px;
    text-align: center;
}


.alert-dark {
    background-color: #e9e9e9;
}


.fixed-top {
    width: 100%;
}

footer {
    width: 100%;
}



.app-main-container {
    min-height: auto;
}

.page-terms,
.page-cookies{
    padding: 2.5rem !important;
    margin: 5rem auto 2rem;
}


.lh-1 {
    line-height: 20px;
}

.page-rules .alert-warning,
.page-faq .alert-warning{
    font-size: 18px;
    color: #000000;
    background-color: #f1f1f1;
    border-color: #f1f1f1;
    font-weight: 500 !important;
}
.page-rules .card-body,
.page-faq .card-body{
    font-weight: 500 !important;
}


.last-x-draws .small-table-container .special {
    color: #fff !important;
}


/*ΚΛΗΡΩΘΗΚΑΝ ΣΗΜΕΡΑ*/
div.bonus_statistics{width: 99%; top: 0.45vw; position:relative; display: flex;}
div.bonus_left_col{width: 45%;}
div.bonus_right_col{width: 55%; right: 0.7vw; top:-0.1vw; position: relative;}
/**********************************************************************************************************************************************************************************************************************************/

div.bonus_logo{margin-top: 0.6vw; text-align: center;}
div.bonus_logo img{height: 4vw;}
div.bonus_title span{left: 0.5vw; position: relative;}
/**********************************************************************************************************************************************************************************************************************************/

/*BONUS STATISTICS LEFT COL*/
div.bonus_draw_container{background: #000; padding:0.4vw;display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;}
div.bonus_row{display: flex; justify-content: space-around;}
div.bonus_row div.bonus_numb{    
    font-size: 22px;
    width: 40px;
    height: 40px;
    line-height: 40px; 
    font-size:0.85vw; 
    color: #FFF; 
    opacity: 0.5; 
    text-align: center; 
    border-radius: 100%;
    margin:0.13vw;
}
div.bonus_row div.bonus_repeats{background: #C2001D; opacity: 1; font-size:22px;}
div.bonus_row div.bonus_repeats div, div.bonus_row div.bonus_numb div{
    position: relative;     
    top: -42px;
    font-size: 18px;
    line-height: 14px;
    text-align: right; 
    color: #FFC200;
    font-weight: 600;
}
/**********************************************************************************************************************************************************************************************************************************/

/*BONUS DELAYS AND OCCURENCES*/

div.bonus_title{left: 0.5vw;}


div#bonus_delays{
    display: flex;
    justify-content: space-around;
    background: #000;
}

div#bonus_delays .bonus_cell .bonus_ball{color: #000;}

div.bonus_cell{
    display: inline-flex; 
    width: auto; 
    padding: 0.3vw 0; 
    text-align: center; 
    justify-content:center; 
    color: #FFF;
}

div.bonus_cell div.delays_numb, 
div.bonus_cell div.occurrences_numb{
    width: 40px;
    height: 40px;
    font-weight: 500;
    font-size: 22px;
    line-height: 40px;
    margin: 0 8px;
}

div.bonus_cell div.bonus_ball, 
div#bonus_occurrences div.bonus_ball{
    width: 40px;
    height: 40px;
    font-weight: 500;
    font-size: 22px;
    line-height: 40px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
div.bonus_cell div.bonus_ball{background: #FFFF00;font-weight: 700;}
div#bonus_occurrences div.bonus_ball{background: #E20613;}
div#bonus_occurrences {display: flex;justify-content: space-around;background: #000;}
/**********************************************************************************************************************************************************************************************************************************/



@media (max-width: 575.98px) {
    .col-xs-1 { flex: 0 0 8.33333%; max-width: 8.33333%; }
    .col-xs-2 { flex: 0 0 16.66667%; max-width: 16.66667%; }
    .col-xs-3 { flex: 0 0 25%; max-width: 25%; }
    .col-xs-4 { flex: 0 0 33.33333%; max-width: 33.33333%; }
    .col-xs-5 { flex: 0 0 41.66667%; max-width: 41.66667%; }
    .col-xs-6 { flex: 0 0 50%; max-width: 50%; }
    .col-xs-7 { flex: 0 0 58.33333%; max-width: 58.33333%; }
    .col-xs-8 { flex: 0 0 66.66667%; max-width: 66.66667%; }
    .col-xs-9 { flex: 0 0 75%; max-width: 75%; }
    .col-xs-10 { flex: 0 0 83.33333%; max-width: 83.33333%; }
    .col-xs-11 { flex: 0 0 91.66667%; max-width: 91.66667%; }
    .col-xs-12 { flex: 0 0 100%; max-width: 100%; }

    #main {
        width: 100%;
    }

    .row{
        margin: 0 !important;
    }

    .pl-r-0 {
        padding-left: 0 !important;
    }

    .pr-r-0 {
        padding-right: 0 !important;
    }

    .px-r-0 {
        padding: 0 !important;
    }

    .navbar .navigation-logo{
        opacity: 1;
        visibility: visible;
        height: auto;
        transition: all 0.15s ease-in-out 0s;

    }

    .navbar.open .navigation-logo{
        opacity: 0;
        visibility: hidden;
        height: 0;

    }

    .navbar.open .navigation-menu{
        flex: 0 0 100%;
        max-width: 100%;

    }

    .navbar:not(.open) .navbar-collapse{
        display: none;

    }

    .collapse{
        overflow: hidden;
        transition: all 0.15s ease-in-out 0s;
    }

    .collapse:not(.show) {

        opacity: 0;
        visibility: hidden;
        height: 0;
        max-height: 0;
    }

    .collapse.show {
        /* display: block; */
        opacity: 1;
        visibility: visible;
        height: 100%;
        max-height: 100%;
    }

    footer .text-left,
    footer .text-right,
    footer .justify-content-start {
        text-align: center !important;
        justify-content: center !important;
    }


    .navigation-menu{
        justify-content: center;
        align-items: end !important;
        flex-direction: column;
    }

    .navigation-menu .navbar-collapse{
        width: 100%;
    }

    .navigation-menu .btn-group{
        flex-direction: column;
    }

    .page-last-draw .single-table{
        table-layout: auto;
    }
    
    .modal-content{
        width: calc(100% - 24px) !important;
    }
    
    .grid-col-5 .d-flex .number {
        width: 36px;
        height: 36px;
        line-height: 20px;
        font-size: 14px;
    }
    
    .bg-black .grid-col-5 span.font-weight-bold {
        width: 26px;
        font-size: 14px;
    }
    
    .draw tr {
        height: 37px;
    }

    .single-table .on {
        height: 28px;
        line-height: 28px;
        width: 28px;
        font-size: 14px;
        font-weight: 600;
    }
    .single-table td div {
        font-size: 16px;
        height: 28px;
        line-height: 28px;
    }

    .repeated-numbers{
        padding: 0 2rem;
    }

    .repeated-numbers .number-times{
        width: 50%;

    }

    .allDraws {
        padding: 0 1.25rem;
    }

    .page-statistics .section-3 .statistics-tables {
        flex-direction: column;
    }
    
    .page-home .section-3 .col-lg-12{
/*        padding-left: unset !important;*/
        padding-right: unset !important;
    }


    .page-home .section-2 .col-auto{
        padding-left: 0 !important;
    }


    .mobile-w-100{
        width: 100% !important;
    }

    .nav-items-lang{
        padding: 1rem 0 !important;
        justify-content: center !important;
    }
    
    .drawn-numbers-history{
        min-width: 1100px !important;
    }

    div.bonus_statistics{
        width: 100%;
        top: 0;
        padding-left: 0 !important;
    }

    /*.last-x-draws {*/
    /*    min-width: 100%;*/
    /*    overflow-x: scroll;*/
    /*}*/

    /*.last-x-draws .main-table > tbody{*/
    /*    display: flex;*/
    /*    flex-direction: column;*/
    /*}*/

    /*.last-x-draws .main-table > tbody{*/
    /*    display: flex;*/
    /*    flex-direction: column;*/
    /*}*/

    /*.last-x-draws .main-table > tbody > tr{*/
    /*    display: flex;*/
    /*    flex-direction: column;*/
    /*}*/

    /*.last-x-draws .main-table > tbody > tr > td{*/
    /*    width: fit-content;*/
    /*}*/

    .page-header h3 {
        font-size: 2.5rem;
        line-height: 2rem;
        padding-left: 0 !important;
        margin-bottom: 0.938rem !important;
    }

    #suggest{
        width: 100%;
    }

    #suggest td div {
        height: 28px;
        line-height: 28px;
        /*        width: calc(100vw / 17);*/
        width: 28px;
    }

    #suggest td div.on {
        /*        width: calc(100vw / 17);*/
        width: 28px;
    }
    
    .table-numbers tr td a{
        width: 22px;
        /*        width: calc(100vw / 17);*/
        height: 22px;
        line-height: 22px;
        margin: 0 1px;
        font-weight: 500;
        font-size: 14px;
    }

    .page-today-suggestions{
        padding: 0 28px;
    }


    .drawn-numbers-history .main-table,
    .last-x-draws .main-table > tbody > tr > td,
    .small-tables {
        width: 100%;
    }
    .last-x-draws .main-table > tbody > tr{
        margin-top: 0;
    }

    .small-tables {
        /*height: 250px;*/
    }
    
    .navbar-nav .dropdown-menu {
        border: none;
    }

    .small-table-container{
        margin-bottom: 1rem;
    }

    .page-terms, .page-cookies {
        margin: -1rem auto -1rem;
    }
    
    
    .bonus_statistics .col-lg-6 {
        padding-left: unset !important;
        padding-right: unset !important;
    }

    div.bonus_row div.bonus_repeats{
        width: 36px;
        height: 36px;
        line-height: 36px;
        font-size: 14px;
    }
    div.bonus_row div.bonus_numb{
/*        width: 36px;
        height: 36px;
        line-height: 36px;
        font-size: 14px;*/
        width: 28px;
        height: 28px;
        line-height: 28px;
        font-size: 14px;
        margin: 2px 0;
    }
    
    div.bonus_cell div.delays_numb, 
    div.bonus_cell div.occurrences_numb {
/*        width: 20px;
        height: 36px;
        line-height: 36px;
        font-size: 14px;*/

        width: 22px;
        height: 28px;
        line-height: 28px;
        font-size: 14px;
        margin: 0 4px;
    }
    
    div.bonus_cell div.bonus_ball, 
    div#bonus_occurrences div.bonus_ball{
/*        width: 36px;
        height: 36px;
        line-height: 36px;
        font-size: 14px;*/

        width: 28px;
        height: 28px;
        line-height: 28px;
        font-size: 14px;


    }
    
    div.bonus_row div.bonus_repeats div, 
    div.bonus_row div.bonus_numb div {
        top: -30px;
        font-size: 12px;
        line-height: 10px;
    }

    .border-light.table-numbers{
        margin-bottom: 1.5rem;
        border-spacing: 1px
    }

}


@media (min-width: 768px){
    .css-gn25k8.css-gn25k8 img {
        height: 100px !important;
        OBJECT-FIT: CONTAIN;
    }
}