/* #region 📦 GLOBAL RESET */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
/* #endregion */

/* #region Fonts */
    @import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Quicksand&family=Libre+Barcode+39&display=swap');

    @font-face {
        font-family: 'Tangerine';
        src: url('/_content/imsuShared/fonts/Tangerine-Regular.woff2') format('woff2'), url('/_content/imsuShared/fonts/Tangerine-Regular.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'Tangerine';
        src: url('/_content/imsuShared/fonts/Tangerine-Bold.ttf') format('truetype');
        font-weight: bold;
        font-style: normal;
    }

    @font-face {
        font-family: 'BarCode';
        src: url('/_content/imsuShared/fonts/CodeLogitogo.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

@font-face {
    font-family: 'Quicksand';
    src: url('/_content/imsuShared/fonts/Quicksand-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
/* #endregion */

/* #region HTML / Body */
    html {
        position: relative;
        min-height: 100%;
    }

body {
    font-family: 'Quicksand' !important;
    font-weight: 400;
}
/* #endregion */

/* #region Accordion */
    .accordion-button {
        background-color: #003300;
        color: white;
    }

        .accordion-button.collapsed {
            background-color: #f8f9fa;
            color: #003300;
        }

    .accordion-body a {
        display: block;
    }
/* #endregion */

/* #region Forms */
#formContent {
    background-color: #B8E3E9;
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    background: #fff;
    position: relative;
    -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
    box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
    text-align: center;
}

#formFooter {
    background-color: #B8E3E9;
    border-top: 1px solid #dce8f1;
    text-align: center;
    -webkit-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
}

/* Form Elements Styles*/
.simple-form {
    margin: auto;
}

    .simple-form input {
        width: 90%;
        border: 1px solid #eee;
        border-left: 0.2vw solid;
        border-radius: 0.4vw;
        transition: border-color .5s ease-out;
        box-shadow: 0px 0px 0.50em #d9d9d9;
        -moz-border-radius: 0.125em;
        -webkit-border-radius: 0.125em;
        -moz-box-shadow: 0px 0px 0.50em #d9d9d9;
        -webkit-box-shadow: 0px 0px 0.50em #d9d9d9
    }

        .simple-form input:optional {
            border-left-color: #999;
        }

        .simple-form input:required {
            border-left-color: palegreen;
        }

        .simple-form input:invalid {
            border-left-color: salmon;
        }

        .simple-form input[type=button], input[type="file"], input[type=reset], input[type=submit] {
            border: none;
            color: white;
            text-decoration: none;
            font-weight: bold;
            font-size: 1.5vh;
            margin: 2px;
            cursor: pointer;
            display: inline;
            width: 90%;
            box-shadow: 0px 0px 0.50em #d9d9d9;
            -moz-border-radius: 0.125em;
            -webkit-border-radius: 0.125em;
            -moz-box-shadow: 0px 0px 0.50em #d9d9d9;
            -webkit-box-shadow: 0px 0px 0.50em #d9d9d9
        }

            .simple-form input[type="radio"], input[type=submit]:hover {
                background-color: palegoldenrod;
                color: #454141;
            }

        .simple-form input::-webkit-input-placeholder {
            color: #454141;
            padding: 1vw;
            font-size: 1vw;
        }

    .simple-form hr {
        margin: 2px;
        border-color: powderblue;
        width: 90%;
    }

    .simple-form table, th, td {
        border: 0.1vw dotted powderblue;
    }

    .simple-form select {
        color: #454141;
        text-decoration: none;
        font-weight: bold;
        font-size: 1.5vh;
        margin: 2px;
        width: 90%;
        border-left: 0.2vw solid;
        border-color: salmon;
        border-radius: 0.1vw;
    }

        .simple-form select:optional {
            border-left-color: #999;
        }

        .simple-form select:required {
            border-left-color: palegreen;
        }

        .simple-form select:invalid {
            border-left-color: salmon;
        }

    .simple-form label {
        color: #9B9B9B;
        padding-left: 1vw;
        font-size: 0.9vw;
    }

    /* Image Styles*/
    .simple-form img {
        margin: 0px auto;
    }

        .simple-form img.Layout {
            height: 95%;
            width: 95%;
        }

    .simple-form img_header {
        width: 80%;
        height: auto
    }

    /* Better style on light background */
    .simple-form imgshadow {
        padding: 0.250em;
        border: 1px solid #777777;
        margin-top: 0.313em;
        -moz-box-shadow: 0px 0px 0.188em #666666;
        -webkit-box-shadow: 0px 0px 0.188em #666666;
        box-shadow: 0px 0px 0.313em #666666;
    }

    .simple-form img_left { /* Image sticks to the left */
        width: auto;
        float: left;
        margin: 0.313em 0.938em 0.313em 0.313em;
    }

    .simple-form img-circle {
        border-radius: 50%;
    }

    .simple-form centerIt {
        vertical-align: middle;
        text-align: center;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        display: flex;
    }
/* #endregion */

/* #region Objects */
/* Style Button*/
.style_Btn {
    background-color: #56baed;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    -webkit-box-shadow: 0 10px 15px 0 rgba(95,186,233,0.4);
    box-shadow: 0 10px 15px 0 rgba(95,186,233,0.4);
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 2px 2px 2px 2px;
    margin: 2px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}


/* FORM TYPOGRAPHY*/

input[type=button], input[type=submit], input[type=reset] {
    background-color: #56baed;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    -webkit-box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
    box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

    input[type=button]:active, input[type=submit]:active, input[type=reset]:active {
        -moz-transform: scale(0.95);
        -webkit-transform: scale(0.95);
        -o-transform: scale(0.95);
        -ms-transform: scale(0.95);
        transform: scale(0.95);
    }

input[type=text], input[type=password] {
    background-color: #f6f6f6;
    border: none;
    color: #0d0d0d;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border: 2px solid #f6f6f6;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
}

    input[type=text]:focus, input[type=password]:focus {
    }

input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
}
/* #endregion */

/* #region Boxes */
    .shadow_Box {
        text-align: center;
        box-shadow: 0px 0px 0.50em #d9d9d9;
        -moz-border-radius: 0.125em;
        -webkit-border-radius: 0.125em;
        -moz-box-shadow: 0px 0px 0.50em #d9d9d9;
        -webkit-box-shadow: 0px 0px 0.50em #d9d9d9
    }

    .box_Div {
        text-align: center;
        background-color: ghostwhite;
        border: 0.1vw solid powderblue;
        border-radius: 0.2vw;
        box-shadow: 0px 0px 0.50em #d9d9d9;
        -moz-border-radius: 0.125em;
        -webkit-border-radius: 0.125em;
        -moz-box-shadow: 0px 0px 0.50em #d9d9d9;
        -webkit-box-shadow: 0px 0px 0.50em #d9d9d9
    }

    .div_wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .div_Header {
        /* Content Section */
        text-align: center;
        color: ghostwhite;
        /* Border Section */
        border: 0.1vw solid powderblue;
        padding: 0.5vw;
        margin: auto;
        border-radius: 0.5vw;
        /* Shadow Section */
        box-shadow: 0px 0px 0.50em #d9d9d9;
        -moz-border-radius: 0.125em;
        -webkit-border-radius: 0.125em;
        -moz-box-shadow: 0px 0px 0.50em #d9d9d9;
        -webkit-box-shadow: 0px 0px 0.50em #d9d9d9
    }

    .div_Panel {
        /* Content Section */
        text-align: center;
        background-color: white;
        overflow: auto;
        /* Border Section */
        border: 0.1vw solid darkkhaki;
        padding: 0.4vw;
        margin: auto;
        border-radius: 0.4vw;
        /* Shadow Section */
        box-shadow: 0px 0px 0.50em #d9d9d9;
        -moz-border-radius: 0.125em;
        -webkit-border-radius: 0.125em;
        -moz-box-shadow: 0px 0px 0.50em #d9d9d9;
        -webkit-box-shadow: 0px 0px 0.50em #d9d9d9
    }

    div.container4 {
        position: relative
    }

        div.container4 p {
            background: yellow;
            position: absolute;
            transform: translate(-50%, -50%)
        }

    .centerIt {
        vertical-align: middle;
        text-align: center;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        display: block;
    }

    /* The alert message box */
    .failed {
        background-color: #f44336; /* Red */
        color: white;
    }

    /* The alert message box */
    .success {
        background-color: #006600; /* Green */
        color: white;
    }

    /* Label Alert Options*/
    .alertData {
        color: ghostwhite;
        letter-spacing: 0.03em;
    }

    /* Box Wrapper - Div or Panel*/
    .wrapper {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }

    /* The close button */
    .closebtn {
        color: white;
        float: right;
        cursor: pointer;
        transition: 0.3s;
    }

        /* When moving the mouse over the close button */
        .closebtn:hover {
            color: black;
        }

    .mod_Label {
        text-align: center
    }
/* #endregion */

/* #region Effects */
    /* ---------------------- Effects Declarations --------------------- */

    /*==================================================
     * Effect 1
     * ===============================================*/
    .effect1 {
        -webkit-box-shadow: 0 0.625em 0.375em -0.375em #777;
        -moz-box-shadow: 0 0.625em 0.375em -0.375em #777;
        box-shadow: 0 0.625em 0.375em -0.375em #777;
    }

    /*==================================================
     * Effect 2
     * ===============================================*/
    .effect2 {
        position: relative;
    }

        .effect2:before, .effect2:after {
            z-index: -1;
            position: absolute;
            content: "";
            bottom: 10.313em;
            left: 0.625em;
            width: 50%;
            top: 80%;
            max-width: 18.75em;
            background: #777;
            -webkit-box-shadow: 0 10.313em 0.625em #777;
            -moz-box-shadow: 0 10.313em 0.625em #777;
            box-shadow: 0 10.313em 0.625em #777;
            -webkit-transform: rotate(-3deg);
            -moz-transform: rotate(-3deg);
            -o-transform: rotate(-3deg);
            -ms-transform: rotate(-3deg);
            transform: rotate(-3deg);
        }

        .effect2:after {
            -webkit-transform: rotate(3deg);
            -moz-transform: rotate(3deg);
            -o-transform: rotate(3deg);
            -ms-transform: rotate(3deg);
            transform: rotate(3deg);
            right: 0.625em;
            left: auto;
        }

    /*==================================================
     * Effect 3
     * ===============================================*/
    .effect3 {
        position: relative;
    }

        .effect3:before {
            z-index: -1;
            position: absolute;
            content: "";
            bottom: 10.313em;
            left: 0.625em;
            width: 50%;
            top: 80%;
            max-width: 18.75em;
            background: #777;
            -webkit-box-shadow: 0 10.313em 0.625em #777;
            -moz-box-shadow: 0 10.313em 0.625em #777;
            box-shadow: 0 10.313em 0.625em #777;
            -webkit-transform: rotate(-3deg);
            -moz-transform: rotate(-3deg);
            -o-transform: rotate(-3deg);
            -ms-transform: rotate(-3deg);
            transform: rotate(-3deg);
        }

    /*==================================================
     * Effect 4
     * ===============================================*/
    .effect4 {
        position: relative;
    }

        .effect4:after {
            z-index: -1;
            position: absolute;
            content: "";
            bottom: 0.938em;
            right: 0.625em;
            left: auto;
            width: 50%;
            top: 80%;
            max-width: 18.75em;
            background: #777;
            -webkit-box-shadow: 0 0.938em 0.625em #777;
            -moz-box-shadow: 0 0.938em 0.625em #777;
            box-shadow: 0 0.938em 0.625em #777;
            -webkit-transform: rotate(3deg);
            -moz-transform: rotate(3deg);
            -o-transform: rotate(3deg);
            -ms-transform: rotate(3deg);
            transform: rotate(3deg);
        }

    /*==================================================
     * Effect 5
     * ===============================================*/
    .effect5 {
        position: relative;
    }

        .effect5:before, .effect5:after {
            z-index: -1;
            position: absolute;
            content: "";
            bottom: 1.565em;
            left: 0.625em;
            width: 50%;
            top: 80%;
            max-width: 18.75em;
            background: #777;
            -webkit-box-shadow: 0 2.191em 1.25em #777;
            -moz-box-shadow: 0 2.191em 1.25em #777;
            box-shadow: 0 2.191em 1.25em #777;
            -webkit-transform: rotate(-8deg);
            -moz-transform: rotate(-8deg);
            -o-transform: rotate(-8deg);
            -ms-transform: rotate(-8deg);
            transform: rotate(-8deg);
        }

        .effect5:after {
            -webkit-transform: rotate(8deg);
            -moz-transform: rotate(8deg);
            -o-transform: rotate(8deg);
            -ms-transform: rotate(8deg);
            transform: rotate(8deg);
            right: 0.625em;
            left: auto;
        }

    /*==================================================
     * Effect 6
     * ===============================================*/
    .effect6 {
        position: relative;
        -webkit-box-shadow: 0 1px 0.250em rgba(0, 0, 0, 0.3), 0 0 2.5em rgba(0, 0, 0, 0.1) inset;
        -moz-box-shadow: 0 1px 0.250em rgba(0, 0, 0, 0.3), 0 0 2.5em rgba(0, 0, 0, 0.1) inset;
        box-shadow: 0 1px 0.250em rgba(0, 0, 0, 0.3), 0 0 2.5em rgba(0, 0, 0, 0.1) inset;
    }

        .effect6:before, .effect6:after {
            content: "";
            position: absolute;
            z-index: -1;
            -webkit-box-shadow: 0 0 1.25em rgba(0,0,0,0.8);
            -moz-box-shadow: 0 0 1.25em rgba(0,0,0,0.8);
            box-shadow: 0 0 1.25em rgba(0,0,0,0.8);
            top: 50%;
            bottom: 0;
            left: 0.625em;
            right: 0.625em;
            -moz-border-radius: 100px / 0.625em;
            border-radius: 100px / 0.625em;
        }

        .effect6:after {
            right: 0.625em;
            left: auto;
            -webkit-transform: skew(8deg) rotate(3deg);
            -moz-transform: skew(8deg) rotate(3deg);
            -ms-transform: skew(8deg) rotate(3deg);
            -o-transform: skew(8deg) rotate(3deg);
            transform: skew(8deg) rotate(3deg);
        }

    /*==================================================
     * Effect 7
     * ===============================================*/
    .effect7 {
        position: relative;
        -webkit-box-shadow: 0 1px 0.250em rgba(0, 0, 0, 0.3), 0 0 2.5em rgba(0, 0, 0, 0.1) inset;
        -moz-box-shadow: 0 1px 0.250em rgba(0, 0, 0, 0.3), 0 0 2.5em rgba(0, 0, 0, 0.1) inset;
        box-shadow: 0 1px 0.250em rgba(0, 0, 0, 0.3), 0 0 2.5em rgba(0, 0, 0, 0.1) inset;
    }

        .effect7:before, .effect7:after {
            content: "";
            position: absolute;
            z-index: -1;
            -webkit-box-shadow: 0 0 1.25em rgba(0,0,0,0.8);
            -moz-box-shadow: 0 0 1.25em rgba(0,0,0,0.8);
            box-shadow: 0 0 1.25em rgba(0,0,0,0.8);
            top: 0;
            bottom: 0;
            left: 0.625em;
            right: 0.625em;
            -moz-border-radius: 6.25em / 0.625em;
            border-radius: 6.25em / 0.625em;
        }

        .effect7:after {
            right: 0.625em;
            left: auto;
            -webkit-transform: skew(8deg) rotate(3deg);
            -moz-transform: skew(8deg) rotate(3deg);
            -ms-transform: skew(8deg) rotate(3deg);
            -o-transform: skew(8deg) rotate(3deg);
            transform: skew(8deg) rotate(3deg);
        }

    /*==================================================
     * Effect 8
     * ===============================================*/
    .effect8 {
        position: relative;
        -webkit-box-shadow: 0 1px 0.250em rgba(0, 0, 0, 0.3), 0 0 2.5em rgba(0, 0, 0, 0.1) inset;
        -moz-box-shadow: 0 1px 0.250em rgba(0, 0, 0, 0.3), 0 0 2.5em rgba(0, 0, 0, 0.1) inset;
        box-shadow: 0 1px 0.250em rgba(0, 0, 0, 0.3), 0 0 2.5em rgba(0, 0, 0, 0.1) inset;
    }

        .effect8:before, .effect8:after {
            content: "";
            position: absolute;
            z-index: -1;
            -webkit-box-shadow: 0 0 1.25em rgba(0,0,0,0.8);
            -moz-box-shadow: 0 0 1.25em rgba(0,0,0,0.8);
            box-shadow: 0 0 1.25em rgba(0,0,0,0.8);
            top: 0.625em;
            bottom: 0.625em;
            left: 0;
            right: 0;
            -moz-border-radius: 100px / 0.625em;
            border-radius: 100px / 0.625em;
        }

        .effect8:after {
            right: 0.625em;
            left: auto;
            -webkit-transform: skew(8deg) rotate(3deg);
            -moz-transform: skew(8deg) rotate(3deg);
            -ms-transform: skew(8deg) rotate(3deg);
            -o-transform: skew(8deg) rotate(3deg);
            transform: skew(8deg) rotate(3deg);
        }


    /* ------------------ End of Effects Declarations ------------------ */

    /* ------------------ Begin of ANIMATIONS Declarations ------------------ */

    /* Simple CSS3 Fade-in-down Animation */
    .fadeInDown {
        -webkit-animation-name: fadeInDown;
        animation-name: fadeInDown;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }

    @-webkit-keyframes fadeInDown {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
        }

        100% {
            opacity: 1;
            -webkit-transform: none;
            transform: none;
        }
    }

    @keyframes fadeInDown {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
        }

        100% {
            opacity: 1;
            -webkit-transform: none;
            transform: none;
        }
    }

    /* Simple CSS3 Fade-in Animation */
    @-webkit-keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-moz-keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .fadeIn {
        opacity: 0;
        -webkit-animation: fadeIn ease-in 1;
        -moz-animation: fadeIn ease-in 1;
        animation: fadeIn ease-in 1;
        -webkit-animation-fill-mode: forwards;
        -moz-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        -webkit-animation-duration: 1s;
        -moz-animation-duration: 1s;
        animation-duration: 1s;
    }

        .fadeIn.first {
            -webkit-animation-delay: 0.4s;
            -moz-animation-delay: 0.4s;
            animation-delay: 0.4s;
        }

        .fadeIn.second {
            -webkit-animation-delay: 0.6s;
            -moz-animation-delay: 0.6s;
            animation-delay: 0.6s;
        }

        .fadeIn.third {
            -webkit-animation-delay: 0.8s;
            -moz-animation-delay: 0.8s;
            animation-delay: 0.8s;
        }

        .fadeIn.fourth {
            -webkit-animation-delay: 1s;
            -moz-animation-delay: 1s;
            animation-delay: 1s;
        }

    /* Simple CSS3 Fade-in Animation */
    .underlineHover:after {
        display: block;
        left: 0;
        bottom: -10px;
        width: 0;
        height: 2px;
        background-color: #56baed;
        content: "";
        transition: width 0.2s;
    }

    .underlineHover:hover {
        color: #0d0d0d;
    }

        .underlineHover:hover:after {
            width: 100%;
        }

    /* ------------------ End of ANIMATIONS Declarations ------------------ */
/* #endregion */

/* #region Paper Sizes */
    /* A4 Portrait View */
    .a4-portrait {
        width: 210mm;
        height: 297mm;
        background: white;
        margin: auto;
        padding: 20mm;
        box-shadow: 0 0 5px rgba(0,0,0,0.1);
    }

    /* A4 Landscape View */
    .a4-landscape {
        width: 297mm;
        height: 210mm;
        background: white;
        margin: auto;
        padding: 20mm;
        box-shadow: 0 0 5px rgba(0,0,0,0.1);
    }

    /* Print - handle both */
    @media print {
        .a4-portrait {
            box-shadow: none;
        }

        .a4-landscape {
            box-shadow: none;
        }

        @page {
            size: A4 portrait; /* This is global and will affect the full document */
            margin: 20mm;
        }

        .landscape-mode {
            page: landscapePage;
        }
    }

/* Define named page setup (for multi-page print targets) */
@page landscapePage {
    size: A4 landscape;
    margin: 20mm;
}

    
/* #endregion */

/* #region Media Sizes */
    @media (min-width: 768px) {
        html {
            font-size: 14px;
        }
    }
/* #endregion */

.scrollable-content {
    max-height: 50vh; /* or whatever height you want */
    overflow-y: auto; /* enables vertical scroll */
    overflow-x: hidden; /* optional: hides horizontal scroll */
}

/* Make the main viewport split scroll smoothly */
.vh-100-minus-nav {
    min-height: calc(100vh - 0px);
}
/* adjust if you have a fixed navbar height */

.btn-outline-white {
    color: white;
    border-color: white;
}

    .btn-outline-white:hover {
        color: #000;
        background-color: white;
        border-color: white;
    }

:root {
    --imo-green: #1c7c3a; /* primary */
    --imo-green-2: #155f2d; /* darker accent */
}

.payslip-header .brand-logo {
    width: 56px;
    height: 56px;
    object-fit: contain
}

.payslip-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1rem;
    border-bottom: 4px solid #e8f1ec
}

    .payslip-brand .brand-title {
        font-weight: 800;
        letter-spacing: .02em
    }

.payslip-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--imo-green);
    color: #fff;
    font-weight: 600;
    padding: .5rem 1rem
}

    .payslip-strip .year-badge {
        background: #fff;
        color: var(--imo-green-2);
        padding: .15rem .6rem;
        border-radius: 999px;
        font-weight: 700
    }

.payslip-card {
    display: grid;
    gap: 1rem;
    align-items: start;
    grid-template-columns: 260px 1fr 140px;
    padding: 1rem
}

    .payslip-card .profile {
        display: flex;
        gap: .75rem;
        align-items: center
    }

        .payslip-card .profile img {
            width: 72px;
            height: 72px;
            border-radius: .5rem;
            object-fit: cover;
            border: 2px solid #e8f1ec
        }

    .payslip-card .info th {
        width: 160px
    }

    .payslip-card .info th, .payslip-card .info td {
        padding: .35rem .5rem;
        vertical-align: top
    }

    .payslip-card .qr {
        display: flex;
        justify-content: flex-start
    }

        .payslip-card .qr .qrbox {
            width: 112px;
            height: 112px;
            border: 1px dashed #cfe6d7;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: .5rem;
            background: #fafdfb
        }

/* #region Resize all Elements */
 
/* -------------------- Apply to Desktop --------------------- */
@media only screen and (min-width: 768px) and (max-width: 992px) {

    html {
        font-size: 14px;
    }

    body {
        padding-left: 5vw;
        padding-right: 5vw;
        padding-top: 5vh;
        padding-bottom: 5vh
    }

    .body_Panel {
    }

    .text_padding {
        padding-left: 0.75vw;
        padding-right: 0.75vw;
        padding-top: 0.15vh;
        padding-bottom: 0.15vh
    }

    .container_padding {
        padding-left: 5vw;
        padding-right: 5vw;
        padding-top: 2.5vh;
        padding-bottom: 2.5vh
    }

    .scroll {
        max-height: 30vh;
        overflow-y: auto;
        padding-bottom: 15px
    }


    .gridrow:nth-child(odd) {
    }

    .gridrow:nth-child(even) {
    }

    .label {
        top: 19vmin;
        left: 46%;
        font-size: 2.5vmin;
    }

    .fa-good {
    }

    .fa-bad {
    }

    .th_text {
        padding: 0.05in;
        font-size: 14px;
    }

    .td_text {
        padding: 0.01in;
        font-size: 12px;
    }

    .place_Div {
    }

    img {
    }

    .style_Link {
        font-size: 1vw;
    }

    .qck_Links {
        font-size: 14px;
    }

    a {
        font-size: 2vh;
        padding-right: 0.1vh !important;
        padding-left: 0.1vh !important;
    }


    .my_Watermark {
        width: 50vh;
        height: 50vh;
        top: 50%;
        left: 55%;
    }

    .grid-container {
        display: grid;
        grid-template-columns: 0.2fr 0.8fr;
        grid-gap: 2px;
        width: 100%;
    }

    .float-container {
        padding: 4vw;
    }

    .float-child {
        float: left;
        padding: 4vw;
    }


    /* Slideshow container */
    .slideshow-container {
        max-width: 1000px;
        position: relative;
        margin: auto;
    }

    /* Caption text */
    .text {
        font-size: 15px;
        padding: 8px 12px;
        bottom: 8px;
        width: 100%;
    }

    /* Number text (1/3 etc) */
    .numbertext {
        font-size: 12px;
        padding: 8px 12px;
        top: 0;
    }

    /* The dots/bullets/indicators */
    .dot {
        height: 15px;
        width: 15px;
        margin: 0 2px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
    }

    .pay_Naira {
        width: 1vh;
        height: 1vh;
    }

    .input, .btn {
        font-size: 1.52vh;
        min-height: 3.17vh;
        max-height: 4.44vh;
        padding: 0.25vh 0.64vh;
        border-radius: 0.64vh 0.64vh 0.64vh 0.64vh;
        margin: 0.25vh;
    }

    input[type=button], input[type=submit], input[type=reset] {
        padding: 0.64vh 1vh;
        margin: 0.64vh 1.25vh 0.64vh 1.25vh;
        min-width: 85%;
    }

    input[type=text], input[type=password] {
        padding: 0.64vh 1vh;
        margin: 0.64vh 1.25vh 0.64vh 1.25vh;
        min-width: 85%;
    }

    /* Box Wrapper - Div or Panel*/
    .wrapper {
        width: 100%;
        min-height: 100%;
        padding: 2.53vh;
    }

    .closebtn {
        margin-left: 15px;
    }

    /* Style Button*/
    .style_Btn {
        border: none;
        padding: 0.25vh;
        width: 8vw;
    }

    .mod_Label {
        margin: 0px auto;
    }

    /* The alert message box - success */
    .failed {
        padding: 0.64vh;
        margin-bottom: 0.64vh;
        border-radius: 0.64vh;
    }

    /* The alert message box - failed */
    .success {
        padding: 0.64vh;
        margin-bottom: 0.64vh;
        border-radius: 0.64vh;
    }

    div.container4 {
        height: 20.3vh;
    }

        div.container4 p {
            margin: 0;
            top: 50%;
            left: 50%;
            margin-right: -50%;
        }

    .box_Div {
        width: 95%;
        padding: 0.4vw;
        margin: auto;
    }

    #formContent {
        padding: 3.8vh;
        width: 90%;
        max-width: 57vh;
        padding: 0px;
    }

    #formFooter {
        padding: 3.17vh;
    }

    .shadow_Box {
        margin: auto;
        padding-top: 1.27vh;
        padding-bottom: 1.27vh;
    }

    .circular--portrait {
        position: relative;
        width: 10vh;
        height: 10vh;
        overflow: hidden;
        border-radius: 50%;
    }

        .circular--portrait img {
            width: 100%;
            height: auto;
        }

    .circular--landscape {
        display: inline-block;
        position: relative;
        width: 10vh;
        height: 10vh;
        overflow: hidden;
        border-radius: 50%;
    }

        .circular--landscape img {
            width: auto;
            height: 100%;
            margin-left: -50px;
        }

    * {
    }

    .mySlides {
    }

    .active {
    }

    /* Fading animation */
    .fade {
    }



    /* -------------------- Sizer for IMSG CSS --------------------- */

    .div_About {
        height: 160px;
        width: 95%;
    }

    .div_Government {
        height: 160px;
        padding: 0.2vw;
    }

    .div_Citizens {
        height: 160px;
        width: 95%;
    }

    .div_Instagram {
        max-height: 360px;
        width: 95%;
    }

    .div_Businesses {
        height: 80px;
        padding: 0.4vw;
    }

    .div_Location {
        height: 160px;
        width: 95%;
    }

    .div_Help {
        height: 160px;
        width: 95%;
    }

    .hd_Government {
        min-height: 20px;
        width: 100%;
    }

    .hd_About {
        min-height: 30px;
        width: 95%;
    }

    .hd_Citizens {
        min-height: 30px;
        width: 95%;
    }

    .hd_Instagram {
        min-height: 30px;
        width: 95%;
    }

    .hd_Facebook {
        min-height: 30px;
        width: 95%;
    }

    .div_Facebook {
        height: 220px;
        width: 95%;
    }

    .div_News {
        height: 100px;
        width: 98%;
    }

    .div_Online {
        height: auto;
        padding: 0.4vw;
    }

    .div_Residents {
        height: 80px;
        padding: 0.4vw;
    }

    .div_Services {
        height: 120px;
        padding: 0.1vw;
    }

    .div_Twitter {
        height: 220px;
        width: 95%;
    }

    .hd_Businesses {
        min-height: 20px;
        width: 100%;
    }

    .hd_Location {
        min-height: 30px;
        width: 95%;
    }

    .hd_Help {
        min-height: 30px;
        width: 95%;
    }

    .hd_News {
        min-height: 20px;
        width: 98%;
    }

    .hd_Online {
        min-height: 20px;
        width: 100%;
    }


    .hd_Residents {
        min-height: 20px;
        width: 100%;
    }


    .hd_Services {
        min-height: 20px;
        width: 100%;
    }

    .hd_Twitter {
        min-height: 20px;
        width: 100%;
    }


    .a_Services {
    }


    .mapouter {
        height: 200px;
        width: 100%;
    }

    .gmap_canvas {
        height: 200px;
        width: 100%;
    }
}



/* #endregion */

/* #region Carousel */
.carousel-description {
    height: 7vh;
    margin-top: 3vh;
    background-color: rgba(0, 0, 0, 0.75); /* 75% opacity black */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1rem;
}
/* #endregion */

/* #region tabs */
    .nav-tabs .nav-link{
    border: none;
    border-bottom: 3px solid transparent;
    color: #333;
    font-weight: 500;
    border-radius: 0;
    }

    .nav-tabs .nav-link:hover {
        color: #0d6efd;
    }

    .nav-tabs .nav-link.active {
        border-bottom: 3px solid #0d6efd;
        color: #0d6efd;
        font-weight: 600;
    }
/* #endregion */

/* #region Drop_Down */
/* Fix dropdowns rendering horizontally */
    /* Keep navbar link spacing sane */
    .navbar .nav-link {
        padding: .5rem 1rem; /* restore Bootstrap defaults */
    }

    /* Ensure dropdown items stack and have normal padding */
    .dropdown-menu .dropdown-item {
        display: block;
        padding: .25rem 1rem !important;
        white-space: nowrap;
    }

    .navbar.navbar-dark .nav-link {
        color: #fff;
    }

    .navbar.navbar-dark .nav-link:hover,
    .navbar.navbar-dark .nav-link:focus {
        color: #fff;
        opacity: .85;
    }
/* #endregion */