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

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

/* #region Fonts */

@font-face {
    font-family: 'Tangerine';
    src: url('../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('../fonts/Tangerine-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

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

@font-face {
    font-family: 'Quicksand';
    src: url('../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', sans-serif !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], .simple-form input[type="file"], .simple-form input[type=reset], .simple-form input[type=submit] {
            border: none;
            color: white;
            text-decoration: none;
            font-weight: bold;
            font-size: 1.25vh;
            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"], .simple-form 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, .simple-form th, .simple-form td {
        border: 0.1vw dotted powderblue;
    }

    .simple-form select {
        color: #454141;
        text-decoration: none;
        font-weight: bold;
        font-size: 1.25vh;
        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: 1.25vh;
    }

    /* 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;
}

/* SideBar Styles*/
.sidebar {
    height: 35vh;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, #002b5c 0%, #003b7a 100%);
    color: white;
    padding-top: 0.5rem;
    overflow-y: auto;
}

    .sidebar .nav-link {
        color: #e0e0e0;
        font-weight: 500;
    }

        .sidebar .nav-link:hover,
        .sidebar .nav-link.active {
            background-color: rgba(255, 255, 255, 0.15);
            color: #ffffff;
            border-radius: 8px;
        }

.sidebar-content {
    background-color: #f8f9fa;
    color: #222;
}

.sidebar .sidebar-header {
    text-align: center;
    margin-bottom: 1rem;
}

    .sidebar .sidebar-header img {
        width: 60px;
    }

    .sidebar .sidebar-header h5 {
        font-size: 1vh;
        margin-top: 0.25rem;
    }

/* 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;
    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;
}

/* #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
    }

    .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
    }

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

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

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

    .style_Link {
        font-size: 0.8vh;
    }

    .qck_Links {
        font-size: 14px;
    }

    a {
        font-size: 0.8vh;
        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: 1.25vh;
        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.25vh;
        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 {
        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;
        }

    /* Fading animation */

    /* -------------------- 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%;
    }

    .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: 1.25vh;
}
/* #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 */

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@media (max-width: 576px) {
    .cart-panel {
        width: 100vw;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* #region Scrollable Content Box */
.content-box {
    width: 100%;
    max-height: 45vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #adb5bd #f8f9fa;
}
/* #endregion */

/* #region Contact Tabs */

#contactTabs {
    gap: 0.25rem;
}

    #contactTabs .nav-link {
        color: #333;
        font-size: 0.9rem;
        padding: 0.65rem 0.85rem;
        border: 1px solid transparent;
        white-space: nowrap;
    }

        #contactTabs .nav-link:hover {
            color: #0d6efd;
            background-color: #f8f9fa;
        }

        #contactTabs .nav-link.active {
            color: #0d6efd;
            font-weight: 600;
            background-color: #fff;
            border-color: #dee2e6 #dee2e6 #fff;
            border-bottom: 3px solid #0d6efd;
        }

/* #endregion */

/* =====================================================
IMSG CITIZENS' FEEDBACK - ACKNOWLEDGEMENT
===================================================== */

.imsg-acknowledgement {
    max-width: 850px;
    margin: 0 auto 1.5rem;
    background: #ffffff;
    border: 1px solid #e4e9e6;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .06);
    color: #25352e;
}

/* HEADER */

.imsg-ack-header {
    background: linear-gradient( 135deg, #126a47 0%, #0c4e35 100% );
    color: #ffffff;
    padding: 32px 20px;
}

.imsg-ack-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .15);
    border: 2px solid rgba(255, 255, 255, .6);
    font-size: 2.3rem;
}

.imsg-ack-subtitle {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: 1.4px;
    opacity: .85;
}

/* BODY */

.imsg-ack-body {
    padding: 32px;
}

.imsg-ack-greeting {
    color: #126a47;
    margin-bottom: 18px;
}

.imsg-ack-message {
    font-size: 1.05rem;
    line-height: 1.85;
    color: #45534c;
}

/* REFERENCE */

.imsg-ack-reference {
    margin: 24px 0;
    padding: 15px 20px;
    border: 1px dashed #b5cfc1;
    border-radius: 10px;
    background: #f3faf6;
    text-align: center;
}

    .imsg-ack-reference span {
        display: block;
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: 1px;
        color: #647a6d;
        margin-bottom: 5px;
    }

    .imsg-ack-reference strong {
        font-size: 1.15rem;
        color: #126a47;
        overflow-wrap: anywhere;
    }

/* CONTACT PANEL */

.imsg-ack-contact {
    margin-top: 25px;
    padding: 22px;
    background: #f7f9f8;
    border: 1px solid #e6eeea;
    border-radius: 12px;
}

.imsg-ack-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: #126a47;
    margin-bottom: 10px;
}

.imsg-ack-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: white;
    border: 1px solid #e5ebe7;
    border-radius: 9px;
    min-height: 80px;
}

.imsg-ack-contact-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #e5f2ea;
    color: #126a47;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.imsg-ack-contact-item small {
    display: block;
    color: #75837a;
    font-size: .75rem;
    margin-bottom: 3px;
}

/* NEXT STEPS */

.imsg-ack-next {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #eef5fb;
    border-left: 4px solid #4087bd;
    padding: 18px;
    border-radius: 8px;
    margin-top: 24px;
    color: #314b60;
    line-height: 1.7;
}

    .imsg-ack-next > i {
        color: #4087bd;
        font-size: 1.3rem;
        flex-shrink: 0;
    }

/* DATE */

.imsg-ack-date {
    text-align: center;
    font-size: .8rem;
    color: #7a8680;
    margin-top: 25px;
}

/* CLOSING */

.imsg-ack-closing {
    margin-top: 28px;
    padding: 22px 18px;
    text-align: center;
    border-top: 1px solid #e7ece9;
    color: #637168;
}

    .imsg-ack-closing > i {
        display: block;
        font-size: 1.5rem;
        color: #b2c7ba;
        margin-bottom: 8px;
    }

    .imsg-ack-closing p {
        font-style: italic;
        line-height: 1.7;
        margin-bottom: 12px;
    }

    .imsg-ack-closing strong {
        color: #126a47;
        font-size: .9rem;
    }

/* RESPONSIVE */

@media (max-width: 576px) {
    .imsg-ack-body {
        padding: 20px 16px;
    }

    .imsg-ack-header {
        padding: 25px 15px;
    }

    .imsg-ack-contact {
        padding: 15px;
    }
}

/* PRINT */

@media print {
    .imsg-acknowledgement {
        box-shadow: none;
        border: 1px solid #ccc;
        max-width: 100%;
    }

    .imsg-ack-header {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .imsg-ack-body .btn {
        display: none !important;
    }
}