html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

/* footer */
footer.border-top.footer.text-muted {
    font-size: 13px;
}

/*tab navigation*/
.login-logout-card .card-header {
    padding: 0px 0px 12px 0px;
}

.login-logout-card ul.nav-tabs {
    margin: 0px 0px -12px 0px;
}

.login-logout-card li.nav-item {
    width: 50%;
}

.login-logout-card a.nav-link {
    font-size: 1rem;
    color: #495057;
    text-align: center;
    padding: 1rem;
}

.login-logout-card .card-body {
    padding: 10px 20px;
}

button.btn.btn-danger.removebtn {
    margin-top: 1.5rem;
    font-size: 12px;
}

.text-danger.field-validation-error {
    font-size: 12px;
}

/* home page */
.landing-page header {
    min-height: 80px;
    display: flex;
}

    .landing-page header .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .landing-page header .logo {
        color: #5d5d5d;
        font-style: italic;
        text-transform: uppercase;
        font-size: 20px;
    }

    .landing-page header .links {
        display: flex;
        align-items: center;
    }

        .landing-page header .links li {
            margin-left: 30px;
            color: #5d5d5d;
            cursor: pointer;
            transition: .3s;
        }

            .landing-page header .links li:last-child {
                border-radius: 20px;
                padding: 10px 20px;
                color: #FFF;
                background-color: #6c63ff;
            }

            .landing-page header .links li:not(:last-child):hover {
                color: #6c63ff;
            }

.landing-page .content .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*gap: 140px;*/
    gap: 10px;
    min-height: calc(90vh - 80px);
}

.landing-page .content .info h1 {
    color: #5d5d5d;
    font-size: 44px;
}

.landing-page .content .info p {
    margin: 0;
    line-height: 1.6;
    font-size: 15px;
    color: #5d5d5d;
}

.landing-page .content .info button {
    border: 0;
    border-radius: 20px;
    padding: 12px 30px;
    margin-top: 30px;
    cursor: pointer;
    color: #FFF;
    /*background-color: #6c63ff;*/
    background-color: #DC143C;
}

.landing-page .content .image img {
    max-width: 100%;
}

.landing-page .content .info h1.welcome {
    font-size: 38px;
    margin-bottom: 0px;
}

@media (max-width: 768px) {
    .landing-page .content .container {
        display: block;
        align-items: center;
        justify-content: space-between;
        gap: 140px;
        min-height: calc(90vh - 80px);
        padding: 20px;
    }

    .landing-page .content .image img {
        max-width: 100%;
        padding-top: 20px;
        margin-top: -50px;
    }

    .landing-page header .logo {
        font-size: 18px;
    }

    .landing-page header .links li {
        margin-left: 10px;
        font-size: 14px;
    }

        .landing-page header .links li:last-child {
            padding: 8px 16px;
        }

    .landing-page .content .info h1 {
        font-size: 26px!important;
        text-align: center;
    }

    .landing-page .content .info p {
        margin: 0;
        line-height: 1.6;
        font-size: 15px;
        color: #5d5d5d;
        text-align: center;
    }

    .landing-page .content .info p {
        font-size: 14px;
    }

    .landing-page .content .info button {
        border: 0;
        border-radius: 20px;
        padding: 12px 30px;
        margin: 30px auto; /* Center the button horizontally */
        cursor: pointer;
        color: #FFF;
        background-color: #DC143C;
        display: block;
    }

    button#policy-button {
        width: 200px!important;
        margin-bottom: -20px !important;
    }

    footer.border-top.footer.text-muted {
        font-size: 12px;
        text-align: center;
    }
}

/* register form */
/* Media query for screens with a maximum width of 768px */
@media (max-width: 768px) {
    button.btn.btn-danger.removebtn {
        margin-top: 0;
        margin-bottom: 15px;
    }

    button.btn.btn-primary.addbtn {
        margin-bottom: 0;
    }
}

/* Media query for iPhone 6/7/8 and similar sized devices */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
    /* Adjust styles for iPhone 6/7/8 and similar sized devices */
    .col-5.mt-5 {
        margin-bottom: 1rem !important;
        margin-top: 0 !important;
        width: 90%;
    }

    /* Additional styles for iPhone 6/7/8 and similar sized devices */
}

/* Media query for Android devices */
@media only screen and (min-device-width: 360px) and (max-device-width: 640px) and (-webkit-min-device-pixel-ratio: 3) {
    /* Adjust styles for Android-sized devices */
    .col-5.mt-5 {
        margin-bottom: 1rem !important;
        margin-top: 0 !important;
        width: 90%;
    }

    /* Additional styles for Android-sized devices */
}

/* Media query for tablets */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
    /* Adjust styles for tablets */
    .col-5.mt-5 {
        margin-bottom: 2rem !important;
        margin-top: 0.5rem !important;
        width: 90%;
    }

    /* Additional styles for tablets */
}

/* Media query for smaller screen phones like iPhone SE */
@media only screen and (max-width: 375px) and (max-height: 667px) {
    /* Adjust styles for smaller screen phones */
    .col-5.mt-5 {
        margin-bottom: 1rem !important;
        margin-top: 0.5rem !important;
        width: 90%;
    }

    /* Additional styles for smaller screen phones */
}

/****/
/*** Foreign Worker GatePass ***/
/****/

/* Media query for tablet screens */
@media (max-width: 768px) {
    .card.application-history {
        width: 90%; /* Make cards full-width on smaller screens */
    }

    .card-list.application-history {
        justify-content: start !important;
    }
}


/* Media query for phone screens */
@media only screen and (max-device-width: 375px) {
    .card.application-history {
        width: 45%; /* Adjust as needed for the best visual appearance */
    }

    .card-list.application-history {
        justify-content: center !important;
    }

    h1.title.application-history {
        padding-left: 1.5rem;
        font-size: 19px !important;
    }

    p.p-staffid {
        margin-top: 2px;
        font-size: 14px!important;
    }

    p.label.application-history {
        padding-left: 1.5rem;
    }

    .card-body p.application-history {
        margin: 0 0 10px;
        font-size: 14px!important;
    }
}

/* Media query for iPhones */
@media (min-width: 375px) and (max-width: 490px) {
    .card.application-history {
        width: 100%; /* Adjust as needed for the best visual appearance */
    }

    .card-list.application-history {
        justify-content: center !important;
    }

    h1.title.application-history {
        padding-left: 1.5rem;
        font-size: 19px !important;
    }

    p.label.application-history {
        padding-left: 1.5rem;
    }
}

/** For Index.cshtml **/
/* For laptops and desktops */
@media only screen and (min-width: 992px) {
    .modal-content, .fwmodal-content {
        width: 60%;
        height: 600px;
    }

    .close-button, .fwclose-button {
        top: 10px;
        font-size: 28px;
        font-weight: bold;
        position: absolute;
    }
}

/* For tablets */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .modal-content, .fwmodal-content {
        width: 70%;
        height: 500px;
    }
}

/* For smaller tablets and large smartphones */
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .modal-content, .fwmodal-content {
        width: 80%;
        height: 400px;
    }
}

/* For small smartphones */
@media only screen and (max-width: 575px) {
    img.logo {
        width: 150px!important;
    }

    .modal-content, .fwmodal-content {
        width: 92% !important;
        height: 530px !important;
        margin: 0px 0px 0px 0px !important;
        padding: 15px !important;
    }

    .modal-content.reg {
        width: 92% !important;
        height: 288px !important;
        margin: 0px 0px 0px 0px !important;
        padding: 15px !important;
    }

    .close-button, .fwclose-button {
        top: 5px !important;
        left: 17px !important;
        font-size: 22px !important;
    }

    h2 {
        font-size: 17px!important;
    }

    label.text-label-modal {
        margin-top: 18px !important;
        margin-bottom: 11px !important;
        font-size: 13px !important;
    }

    .checkbox-container, .fwcheckbox-container {
        display: flex;
        align-items: center;
    }

    .checkbox-container input, .fwcheckbox-container input {
        margin-right: 10px;
        /*margin-top: -18px;*/
        margin-top: 0px;
    }

    .checkbox-container label, .fwcheckbox-container label {
        margin-bottom: 0;
        font-size: 13px !important;
    }

    .modal-buttons, .fwmodal-buttons {
        margin-top: 10px;
        margin-bottom: 5px;
        text-align: center;
    }

    .modal-buttons button,
    .fwmodal-buttons button {
        float: none !important;
        margin: 0 2px !important;
        display: inline-block !important;
    }
}

/* Additional styles for very small screens (e.g., iOS and Android) */
@media only screen and (max-width: 320px) {
    .modal-content, .fwmodal-content {
        width: 95%;
        height: 250px;
    }

    .close-button, .fwclose-button {
        top: 3px; /* Adjust the top position for very small screens */
        font-size: 20px; /* Adjust the font size for very small screens */
    }
}

@media only screen and (min-width: 768px) {
    /* Styles for tablets and larger screens (laptop, desktop) */
    #image-container-fw {
        max-width: 600px; /* Adjust the maximum width as needed */
    }
}

@media only screen and (min-width: 992px) {
    /* Styles for larger screens (desktop) */
    #image-container-fw {
        max-width: 800px; /* Adjust the maximum width as needed */
    }
}

@media only screen and (min-width: 1200px) {
    /* Styles for extra-large screens (large desktop) */
    #image-container-fw {
        max-width: 100%; /* Adjust the maximum width as needed */
    }
/*
    .custom-table {
        width: 230% !important;
    }*/
}

@media only screen and (max-width: 767px) {
    /* Styles for smaller screens (iOS devices, Android devices) */
    #image-container-fw {
        max-width: 100%; /* Allow the container to take full width */
        max-height: 250px !important;
    }
}

@media (max-width: 767px) {
    .image-container-regForm {
        max-width: 100%; /* Adjust the maximum width for mobile */
        height: auto; /* Allow the height to adjust proportionally */
        overflow-y: auto; /* Enable vertical scrolling if needed */
        border: 1px solid #e9ecef;
    }

    .image-container-regForm img {
        width: 100%; /* Make images fill the container width */
        height: auto; /* Maintain aspect ratio */
        margin-bottom: 10px; /* Optional margin between images */
    }

    input.btn.btn-primary {
        margin-top: 10px!important;
    }

    input#withinOneMonthPass {
        margin-left: -27px !important;
    }

    label#radiobtnlabel {
        margin-left: -5px !important;
    }

    @media screen and (min-width: 1024px) and (min-height: 1320px) {
        /* iPad Pro */
        .custom-table { 
            width: 230%!important;
        }
    }

    @media screen and (min-width: 1024px) and (max-height: 1310px) {
        /* Laptop */
        .custom-table {
            width: 230% !important;
        }
    }

    @media only screen and (max-width: 1920px) {
        /* Styles for smaller screens (iOS devices, Android devices) */
        .custom-table {
            width: 200% !important;
        }
    }
}

/* training */

@media (max-width: 768px) {
    #toast-container > div {
        width: 90% !important; /* Adjust width for smaller screens */
        max-width: 55% !important;
        margin-left: 17.5%;
    }

    .progress {
        width: 100%;
    }
}