/* FrontEnd Template Guide PT. BMN */
/* Base Template */
/* v0.1 */

/* SMALL DEVICES */
@media only screen and (min-width: 599.98px){
    /* CONTENT */
    .container-x {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }

    /* CAROUSEL */
    .thumb {
        width: 100px;
        height: 100px;
    }

    .image-banner {
        padding-top: 70px !important;
    }

}

/* MEDIUM DEVICES */
@media only screen and (min-width: 767.98px){
    /* VIEW */
    .view-xl{display: none;}
    .view-md{display: block;}
    .view-sm{display: none;}

    /* FOOTER */
    .footer-sm{display: none;}
    .footer-md{display: block;}
    .footer-xl{display: none;}

    /* CHECKOUT */
    .checkout-container{
        bottom: unset;
        top: 80px;
        border: 1px solid var(--grey-50);
        box-shadow: unset;
    }

    .checkout-price-container{
        display: flex;
        align-items: center;
    }

    .checkout-price{
        padding-left: 10px;
    }

    .btn-checkout-mobile{
        display: none;
    }

    .btn-checkout-medium{
        display: block;
    }

    /* CAROUSEL */
    .carousel-container{
        padding-top: 170px;
    }

    .img-success{
        width: 50%;
    }

    /* QRCODE  */
    .qrcode canvas, .qrcode img {
        width: 50% !important;
        height: auto !important;
    }

    /* PROFILE */
    .img-ticket{
        width: auto;
        max-width: 100px;
    }
}

/* LARGE DEVICES */
@media only screen and (min-width: 931.98px){
    /* CAROUSEL */
    .carousel-container{
        display: flex;
        justify-content: space-between;
        flex-direction: row-reverse;
        gap: 10px;
    }

    .carousel{
        width: 84%;
    }

    .carousel-inner{
        width: 50%;
    }

    .thumb-wrapper{
        width: 16%;
        overflow-x: none;
        overflow-y: auto;
        white-space: nowrap;
        display: flex;
        flex-direction: column;
        aspect-ratio: 16/9;
        height: auto;
        background-size: cover;
        gap: 10px;
    }

    .thumb {
        width: 100%;
        height: auto;
    }

    .img-success{
        width: 40%;
    }
}
@media only screen and (min-width: 963.98px){
    /* CONTENT */
    .container-x {
        padding-left: 80px !important;
        padding-right: 80px !important;
    }

    .container-y {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    /* CAROUSEL */
    .carousel-container{
        padding-top: 150px !important;
    }
}
@media only screen and (min-width: 991.98px){
    /* VIEW */
    .view-xl{display: block;}
    .view-md{display: none;}
    .view-sm{display: none;}
}
@media only screen and (min-width: 1199.98px){
    /* FONT SIZE */
    .text-xl{font-size: 26px !important;}
    .text-md{font-size: 22px !important;}
    .text-sm{font-size: 20px !important;}
    .text-xs{font-size: 18px !important;}
    .text-xs-1x{font-size: 16px !important;}
    .text-xs-2x{font-size: 14px !important;}
    .text-xs-3x{font-size: 12px !important;}

    /* FOOTER */
    .footer-sm{display: none;}
    .footer-md{display: none;}
    .footer-xl{display: block;}

    .img-success{
        width: 30%;
    }

    /* QRCODE  */
    .qrcode canvas, .qrcode img {
        width: 25% !important;
        height: auto !important;
    }
}
@media only screen and (min-width: 1279.98px){}
@media only screen and (min-width: 1365.98px){}
@media only screen and (min-width: 1439.98px){


    .image-banner {
        padding-top: 170px !important;
    }

    /* CONTENT */
    .container-x {
        padding-left: 140px !important;
        padding-right: 140px !important;
    }

    /* HEADER */
    .text-xl.text-heading {
        font-size: 52px !important;
    }
}
@media only screen and (min-width: 1535.98px){}
@media only screen and (min-width: 1599.98px){}
@media only screen and (min-width: 1919.98px){

    .image-banner {
        padding-top: 10%!important;
    }

    /* VIEW */
    .container-x {
        padding-left: 200px !important;
        padding-right: 200px !important;
    }

    /* FONT SIZE */
    .text-xl{font-size: 26px !important;}
    .text-md{font-size: 24px !important;}
    .text-sm{font-size: 22px !important;}
    .text-xs{font-size: 20px !important;}
    .text-xs-1x{font-size: 18px !important;}
    .text-xs-2x{font-size: 16px !important;}
    .text-xs-3x{font-size: 14px !important;}
}