@font-face {
    src: url('../fonts/baloo-2/Baloo2-Regular.ttf') format('truetype');
    font-family: 'Baloo2';
    font-style: normal;
    font-weight: 100 500;
}

@font-face {
    src: url('../fonts/baloo-2/Baloo2-Medium.ttf') format('truetype');
    font-family: 'Baloo2';
    font-style: normal;
    font-weight: 600 700;
    font-display: swap; /* Best practice for performance */
}


@font-face {
    src: url('../fonts/baloo-2/Baloo2-Bold.ttf') format('truetype');
    font-family: 'Baloo2';
    font-style: normal;
    font-weight: 800;
}

@font-face {
    src: url('../fonts/baloo-2/Baloo2-ExtraBold.ttf') format('truetype');
    font-family: 'Baloo2';
    font-style: normal;
    font-weight: 900;
    
}

/* ========================== */

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: normal;
    src: local('Rubik Regular'), url('../fonts/Rubik/Rubik-Regular.ttf');
}


@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: thin;
    src: local('Rubik Thin'), url('../fonts/Rubik/Rubik-Thin.ttf');
}


@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: lighter;
    src: local('Rubik Light'), url('../fonts/Rubik/Rubik-Light.ttf');
}


@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: bold;
    src: local('Rubik Bold'), url('../fonts/Rubik/Rubik-Bold.ttf');
}

/* #### Generated By: http://font.download #### */

body{
    font-family: "Baloo2" !important;
}

body .select2-container--classic .select2-selection--single,body .select2-container--classic .select2-selection--single .select2-selection__arrow,body .select2-container--classic .select2-selection--single .select2-selection__rendered,body .select2-container--default .select2-selection--multiple,body .select2-container--default .select2-selection--single,body .select2-container--default .select2-selection--single .select2-selection__arrow,body .select2-container--default .select2-selection--single .select2-selection__rendered{border-color:var(--bs-border-color);color:var(--bs-body-color);height:40px;line-height:40px;color:#67757c;}
.select2-results__option{
    color:#67757c;
}
/* html { scroll-behavior: smooth; }
:root {scroll-behavior: smooth;} */
#app{
    background-image: url('../../assets/images/bg-pemenang.jpg');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top;
    background-color: #fbcc62;
}

.wrapper-filter{
    background-color: #1134f3;
}

.wrapper-filter .form-floating>label{
    padding-top: .5rem;
    padding-bottom: .5rem;
}
.wrapper-filter .btn{
    border-radius: 15px;
}
.wrapper-filter .form-floating>.form-control{
    padding-top: 1.2rem;
    padding-bottom: .5rem;
    height: calc(2.5rem + calc(var(--bs-border-width)* 2));
    min-height: calc(2.5rem + calc(var(--bs-border-width)* 2));
    font-size: .9rem;
    border-radius: 15px;
}
.wrapper-filter .form-floating>.form-control:focus~label{
    transform: scale(.65) translateY(-.5rem) translateX(.15rem);
}

.row-result-filter{
    color: #0206ab;
}

.wrapper-grand-prize{
    background-image: url('../../assets/images/bg-prize-winner.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 0 -8px;
}
.wrapper-grand-prize img{
    /* max-width: 80%; */
    height: 81px;
    max-height: 81px;
}
.wrapper-grand-prize:nth-child(1) img{
    height: 81px;
    max-height: 81px;
}
.text-remain{
    background-color: #1134f3;
}
.wrapper-list{
    overflow: hidden;
}

.wrapper-list small{
    font-size: .675rem;
}

.wrapper-kol-prize .list-group-item{
    border: none;
    padding: 3px !important;
    padding-left: 6px !important;
}

.wrapper-kol-prize .content-kol{
    background-color: #1134f3;
}
.wrapper-direct-prize .content-kol{
    background-color: #1134f3;
}
.wrapper-direct-prize .list-group-item{
    border: none;
    padding: 1px !important;
    padding-left: 2px !important;
    font-size: 12px;
}
.wrapper-kol-prize ul li{
    font-size: .7rem;
}
.wrapper-kol-prize ul li number{
    display: inline !important;
}
.wrapper-kol-prize ul li span{
    display: block;
    font-size: 1rem;
}

.wrapper-list-modal{
    max-height: 50dvh;
    overflow-y: scroll;
}
.wrapper-list-modal .item-winner{
    line-height: 1.1;
    border-bottom: solid grey 1px;
    border-right: solid grey 1px;
}

.wrapper-list-modal .item-winner:nth-child(-n + 4){
    border-top: solid grey 1px;
}

.wrapper-list-modal .item-winner:nth-child(4n+1){
    border-left: solid grey 1px;
}

.wrapper-list-modal .item-winner span{
    font-size: .675rem;
}

.content-winner-modal{
    max-height: 80dvh;
    overflow: hidden;
}

.jscroll-inner{
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: 0;
    margin-right: 0;
    margin-left: 0;
    border-top: solid grey 1px !important;
    border-left: solid grey 1px;
    padding: 0;
}


@media (max-width: 576px) {

    .header-title img{
        width: 100%;
    }
    .container-kol > div > img{
        width: 100%;
    }
}

@media (max-width: 768px) {
    .header-title img{
        width: 100%;
    }
    .container-kol > div > img{
        width: 100%;
    }

    .navbar-brand a img{
        width: 30%;
    }
}