/*-----Media Query-----*/
@media screen and (max-width: 319px) {
    * {
        display: none !important;
    }

    body {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: white !important;
    }

    body:before {
        content: 'Try in Big Screen!';
        color: #1d2124;
        font-weight: 600;
    }
}


/*Landscape*/
/* Mobile Devices */
@media (max-height: 575px) and (max-width: 1024px) and (orientation: landscape) {

}

/* Mobile Devices */
@media screen and (min-width: 320px) and (max-width: 575px) {
    .f-xs-10{font-size: 10px !important;}
    .f-xs-12{font-size: 12px !important;}
    .f-xs-14{font-size: 14px !important;}
    .f-xs-16{font-size: 16px !important;}
    .f-xs-18{font-size: 18px !important;}
    .f-xs-20{font-size: 20px !important;}
    .f-xs-22{font-size: 22px !important;}
    .f-xs-24{font-size: 24px !important;}
    .f-xs-26{font-size: 26px !important;}
    .f-xs-28{font-size: 28px !important;}
    .f-xs-30{font-size: 30px !important;}
    .f-xs-32{font-size: 32px !important;}
    .f-xs-34{font-size: 34px !important;}
    .f-xs-36{font-size: 36px !important;}
    .f-xs-38{font-size: 38px !important;}
}

/* Small Devices, Tablets */
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .f-sm-10{font-size: 10px !important;}
    .f-sm-12{font-size: 12px !important;}
    .f-sm-14{font-size: 14px !important;}
    .f-sm-16{font-size: 16px !important;}
    .f-sm-18{font-size: 18px !important;}
    .f-sm-20{font-size: 20px !important;}
    .f-sm-22{font-size: 22px !important;}
    .f-sm-24{font-size: 24px !important;}
    .f-sm-26{font-size: 26px !important;}
    .f-sm-28{font-size: 28px !important;}
    .f-sm-30{font-size: 30px !important;}
    .f-sm-32{font-size: 32px !important;}
    .f-sm-34{font-size: 34px !important;}
    .f-sm-36{font-size: 36px !important;}
    .f-sm-38{font-size: 38px !important;}
}

/* Medium Devices, Desktops */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .f-md-10{font-size: 10px !important;}
    .f-md-12{font-size: 12px !important;}
    .f-md-14{font-size: 14px !important;}
    .f-md-16{font-size: 16px !important;}
    .f-md-18{font-size: 18px !important;}
    .f-md-20{font-size: 20px !important;}
    .f-md-22{font-size: 22px !important;}
    .f-md-24{font-size: 24px !important;}
    .f-md-26{font-size: 26px !important;}
    .f-md-28{font-size: 28px !important;}
    .f-md-30{font-size: 30px !important;}
    .f-md-32{font-size: 32px !important;}
    .f-md-34{font-size: 34px !important;}
    .f-md-36{font-size: 36px !important;}
    .f-md-38{font-size: 38px !important;}
}

/* Large Devices, Tablets / Desktops */
@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .f-lg-10{font-size: 10px !important;}
    .f-lg-12{font-size: 12px !important;}
    .f-lg-14{font-size: 14px !important;}
    .f-lg-16{font-size: 16px !important;}
    .f-lg-18{font-size: 18px !important;}
    .f-lg-20{font-size: 20px !important;}
    .f-lg-22{font-size: 22px !important;}
    .f-lg-24{font-size: 24px !important;}
    .f-lg-26{font-size: 26px !important;}
    .f-lg-28{font-size: 28px !important;}
    .f-lg-30{font-size: 30px !important;}
    .f-lg-32{font-size: 32px !important;}
    .f-lg-34{font-size: 34px !important;}
    .f-lg-36{font-size: 36px !important;}
    .f-lg-38{font-size: 38px !important;}
}


@media (min-width: 1200px)  and (max-width: 1365px) {
    .f-lg-10{font-size: 10px !important;}
    .f-lg-12{font-size: 12px !important;}
    .f-lg-14{font-size: 14px !important;}
    .f-lg-16{font-size: 16px !important;}
    .f-lg-18{font-size: 18px !important;}
    .f-lg-20{font-size: 20px !important;}
    .f-lg-22{font-size: 22px !important;}
    .f-lg-24{font-size: 24px !important;}
    .f-lg-26{font-size: 26px !important;}
    .f-lg-28{font-size: 28px !important;}
    .f-lg-30{font-size: 30px !important;}
    .f-lg-32{font-size: 32px !important;}
    .f-lg-34{font-size: 34px !important;}
    .f-lg-36{font-size: 36px !important;}
    .f-lg-38{font-size: 38px !important;}

    .logged-user-name {
        max-width: 6ch;
    }
}

/* (1366x768) Desktop OLD */
@media (min-width: 1366px)  and (max-width: 1399px) {
    .f-lg-10{font-size: 10px !important;}
    .f-lg-12{font-size: 12px !important;}
    .f-lg-14{font-size: 14px !important;}
    .f-lg-16{font-size: 16px !important;}
    .f-lg-18{font-size: 18px !important;}
    .f-lg-20{font-size: 20px !important;}
    .f-lg-22{font-size: 22px !important;}
    .f-lg-24{font-size: 24px !important;}
    .f-lg-26{font-size: 26px !important;}
    .f-lg-28{font-size: 28px !important;}
    .f-lg-30{font-size: 30px !important;}
    .f-lg-32{font-size: 32px !important;}
    .f-lg-34{font-size: 34px !important;}
    .f-lg-36{font-size: 36px !important;}
    .f-lg-38{font-size: 38px !important;}
}

/* Mac Book */
@media only screen and (min-width: 1400px) and (max-width: 1800px) {
    .f-xl-10{font-size: 10px !important;}
    .f-xl-12{font-size: 12px !important;}
    .f-xl-14{font-size: 14px !important;}
    .f-xl-16{font-size: 16px !important;}
    .f-xl-18{font-size: 18px !important;}
    .f-xl-20{font-size: 20px !important;}
    .f-xl-22{font-size: 22px !important;}
    .f-xl-24{font-size: 24px !important;}
    .f-xl-26{font-size: 26px !important;}
    .f-xl-28{font-size: 28px !important;}
    .f-xl-30{font-size: 30px !important;}
    .f-xl-32{font-size: 32px !important;}
    .f-xl-34{font-size: 34px !important;}
    .f-xl-36{font-size: 36px !important;}
    .f-xl-38{font-size: 38px !important;}
}

/* Laptop / Desktop New */
@media only screen and (min-width: 1920px) and (max-width: 2400px) {
    .f-xl-10{font-size: 10px !important;}
    .f-xl-12{font-size: 12px !important;}
    .f-xl-14{font-size: 14px !important;}
    .f-xl-16{font-size: 16px !important;}
    .f-xl-18{font-size: 18px !important;}
    .f-xl-20{font-size: 20px !important;}
    .f-xl-22{font-size: 22px !important;}
    .f-xl-24{font-size: 24px !important;}
    .f-xl-26{font-size: 26px !important;}
    .f-xl-28{font-size: 28px !important;}
    .f-xl-30{font-size: 30px !important;}
    .f-xl-32{font-size: 32px !important;}
    .f-xl-34{font-size: 34px !important;}
    .f-xl-36{font-size: 36px !important;}
    .f-xl-38{font-size: 38px !important;}
}

/* 2K / 4K Laptop / Desktop*/
@media (min-width: 2500px) {
    .f-xl-10{font-size: 10px !important;}
    .f-xl-12{font-size: 12px !important;}
    .f-xl-14{font-size: 14px !important;}
    .f-xl-16{font-size: 16px !important;}
    .f-xl-18{font-size: 18px !important;}
    .f-xl-20{font-size: 20px !important;}
    .f-xl-22{font-size: 22px !important;}
    .f-xl-24{font-size: 24px !important;}
    .f-xl-26{font-size: 26px !important;}
    .f-xl-28{font-size: 28px !important;}
    .f-xl-30{font-size: 30px !important;}
    .f-xl-32{font-size: 32px !important;}
    .f-xl-34{font-size: 34px !important;}
    .f-xl-36{font-size: 36px !important;}
    .f-xl-38{font-size: 38px !important;}
}