@import url('bootstrap.min.css');

@font-face {
    font-family: Lato-Regular;
    src: url(../fonts/Montserrat/Montserrat-VariableFont_wght.ttf);
}

@font-face {
    font-family: Lato-Regular2;
    src: url(../fonts/Lato/Lato-Regular.ttf);
}

:root {
    --percent-registration-progess: 0;
    --bg-primary: #ffffff;
    --bg-secondary: #1a539f;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--bg-secondary);
}

#simulation-locality-map {
    height: 450px;
    width: 100%;
}

body {
    background: #f4f4f4;
    letter-spacing: 1px;
    font-family: 'Lato-Regular', sans-serif;
    overflow-y: hidden;
    overflow-x: hidden;
}

    body *:focus {
        outline: none !important;
    }

.main-menu-menu .nav-sidebar .header.active-menu {
    border-left-color: #fff;
}

.main-body {
    padding-left: 2.2%;
    padding-right: 2.2%;
    height: 100%;
}


.login-body {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}


.login-bg {
    position: absolute;
    background: url(../images/home-bg-2.jpg) no-repeat center fixed;
    background-size: cover;
    height: 100%;
    width: 100%;
    z-index: -1;
}

.bg-image {
    background: url(../images/SansSouci.jpg) no-repeat center fixed;
    background-size: cover;
}


#imgs-preview .img-box {
    display: inline-block;
    margin-bottom: 10px;
}

    #imgs-preview .img-box .button-box {
        transform: translate(10px, -32px);
    }


#imgs-preview img {
    height: 125px;
    width: 125px;
    margin-left: 4px;
    margin-right: 4px;
    object-fit: cover;
}

#profile-photo-preview img, #logo-preview img {
    object-fit: cover;
}

.navbar-left-box {
    width: 18%;
    height: 100%;
    background-color: var(--bg-secondary);
    transition: 0.3s;
    box-shadow: 0 0 10px #bdbdbd;
}


.navbar-right-box {
    width: 82%;
    height: 50px;
    box-shadow: 0 0 10px var(--bg-secondary);
    display: flex;
    flex-direction: row;
}

#btn-iconify-main-menu {
    line-height: 2.5;
    color: #1c223d;
    background: transparent;
    font-size: 2rem;
    font-weight: normal;
    border: none;
    height: 50px;
}


/* Menu bar render and animation start*/

.menu-icon {
    width: 30px;
    height: 25px;
    position: relative;
    cursor: pointer;
}

.bar {
    width: 100%;
    height: 3px;
    background-color: var(--bg-secondary);
    position: absolute;
    transition: all 0.3s ease; /* Controls the speed of the morph */
}

    /* Default vertical spacing */
    .bar:nth-child(1) {
        top: 0;
    }

    .bar:nth-child(2) {
        top: 10px;
        width: 80%;
    }

    .bar:nth-child(3) {
        top: 20px;
    }

.modal-header {
    position: relative;
}

    .modal-header .close {
        height: 40px;
        width: 40px;
        background: red;
        position: absolute;
        top: 2px;
        right: 0;
        border-top-right-radius: 3px;
    }

/*File Drop zone*/

.drop-zone {
    width: 80%;
    margin: 0 auto;
    padding: 40px 20px;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    background-color: #f8fafc;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

    /* État lors du survol d'un fichier */
    .drop-zone.drag-over {
        border-color: #0ea5e9;
        background-color: #f0f9ff;
        transform: scale(1.01);
    }

.drop-icon {
    width: 48px;
    height: 48px;
    color: #64748b;
    margin-bottom: 12px;
}

.drop-zone p {
    margin: 0;
    font-size: 15px;
    color: #334155;
}

    .drop-zone p span {
        color: #0ea5e9;
        font-weight: 600;
        text-decoration: underline;
    }


.file-info {
    margin-top: 15px;
    font-weight: 500;
    color: #0f172a;
}

/*File Drop zone*/

/*Uploaded File info card*/

.file-info {
    display: flex;
    border-radius: 5px;
    background: #fff;
    box-shadow: 2px 1px 7px 1px #c2c2c2;
    width: 80%;
    min-width: 320px;
    margin: 0 auto;
    margin-top: 10px;
    padding: 5px;
}

    .file-info .file-type-icon {
        width: 60px;
    }

    .file-info .file-name {
        font-weight: 600;
        display: inline-block;
        width: 100%;
        text-align: left;
        font-size: 12px;
    }

    .file-info .file-size {
        font-weight: normal;
        display: inline-block;
        width: 100%;
        text-align: left;
        font-size: 12px;
    }

    .file-info .file-delete-btn {
        cursor: pointer;
    }

.navbar-nav {
    margin: unset;
}

#main-menu-resume-box .progress-container {
    position: relative;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#main-menu-resume-box .progress-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-100deg);
}

#main-menu-resume-box .circle-bg {
    fill: none;
    stroke: #e9ecef;
    stroke-width: 18;
}

#main-menu-resume-box .circle-progress {
    fill: none;
    stroke: #209a14;
    stroke-width: 15;
    stroke-linecap: round;
    stroke-dasharray: 565.48;
    stroke-dashoffset: calc(565.48 * (1 - (var(--percent-registration-progess) / 100)));
    transition: stroke-dashoffset 0.6s ease-in-out;
}

#main-menu-resume-box .percentage-text {
    position: absolute;
    font-size: 2.5rem;
    font-weight: 700;
    color: #a2cbef;
    user-select: none;
}

.goal-reached-badge {
    position: absolute;
    z-index: 100;
    width: 95%;
    display: flex;
    justify-content: center;
}

    .goal-reached-badge img {
        width: 30vh;
        transform: translateY(10vh);
    }

.goal-reached-ribon {
    text-align: center;
    transform: translateY(-30vh);
    width: 95%;
}

    .goal-reached-ribon img {
        height: 23vh;
        width: 80%;
        margin: 0 auto;
    }

.goal-reached-ribon h3{
    width: 60%;
    color: #fff;
    margin: 0 auto;
    transform: translateY(-19vh);
    font-size: 2rem;
}

/*
        Celebration Box
    */

.celebration-container{
    transition: ease-in-out 2s;
}

.celebration-box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    margin: 0;
    color: #fff;
    font-family: Arial, sans-serif;
    text-align: center;
    flex-direction: column;
    position: absolute;
    z-index: 1035;
    background: #000928e8;
}

    .celebration-box h2{
        font-size: 2rem;
    }

    .celebration-box .celebration-badge {
        width: 200px;
        cursor: pointer;
        animation: entrance 1s ease-out forwards;
        filter: drop-shadow(0 0 15px rgba(255, 204, 0, 0.4));
    }

@keyframes entrance {
    0% {
        opacity: 0;
        transform: scale(0.2) translateY(50px);
    }

    70% {
        transform: scale(1.1) translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}


    /*Uploaded File info card*/
    @media (min-width: 768px) {
        .search-navbar {
        margin-left: 4%;
    }

    .navbar-brand {
        font-family: Helvetica,Arial,sans-serif !important;
        font-size: 1.2rem !important;
    }

    .body-content {
        left: 18.1%;
        width: 81.8%;
    }

    .main-menu {
        /* Set padding to keep content from hitting the edges */
        width: 18%;
        display: block !important;
        transition: width ease 0.3s;
    }

    #btn-main-menu {
        display: none;
    }

    .side-nav-header {
        height: 40px;
        padding-left: 16px;
        padding-top: 10px;
        padding-bottom: 15px;
        border-bottom: 1px solid #e6e6f6;
        margin-bottom: 40px;
    }

    .navbar-nav > li > a {
        padding-bottom: 10px;
    }

    .navbar-collapse.collapse {
        overflow-y: auto !important;
    }

    .header-buttons {
        float: right;
    }

    .header-filter-control {
        margin-left: 200px;
    }


    .iconify-side-menu > .nav-sidebar > .header {
        width: 50px !important;
        height: 40px !important;
        overflow: hidden !important;
    }

    .iconified .navbar-left-box {
        width: 50px;
    }

    .iconified .navbar-right-box {
        width: 100%;
    }


    .iconified .navbar-left-box .navbar-header {
        width: unset !important;
    }

        .iconified .navbar-left-box .navbar-header a img {
            height: unset !important;
            width: 50px !important;
        }

    .iconified .navbar-left-box

    .iconify-side-menu {
        width: 50px !important;
        overflow: hidden !important;
        border: none;
    }

    .iconify-side-menu > .btn-iconify-main-menu {
        width: 50px !important;
        overflow: hidden !important;
        transition: width ease 0.3s;
    }

    .maximize-body-content-width {
        width: 96.3%;
        left: 50px;
    }

        .maximize-body-content-width > .indicator {
            width: 96.3%;
            left: 50px;
        }

    .pn-container {
        position: absolute !important;
        width: 98% !important;
        height: 75% !important;
    }

    .pn {
        height: 100% !important;
    }

    .show-on-mobile {
        display: none !important;
    }

    .hide-on-mobile {
        display: inline;
    }

    .notif-icon.sm {
        display: none !important;
    }

    .notif-icon.md {
        display: block;
    }

    .current-user-info.sm {
        display: none !important;
    }

    .current-user-info.md {
        display: block;
    }

    .xs-full-width {
        width: auto;
    }

    .left-pan {
        width: 100%;
        transform: translateY(-70px);
    }

    .right-pan {
        background: rgba(255,255,255, 0.1);
        backdrop-filter: blur(1px);
        -webkit-backdrop-filter: blur(1px);
    }
}

@media (max-width: 920px) {

    .search-navbar {
        display: none !important;
    }

    .navbar-right {
        display: inline !important;
    }
}

@media (max-width: 480px) {
    .login-container .left-section {
        padding: 30px 20px 10px 20px;
    }

        .login-container .left-section p {
            display: none;
        }

    .login-container .options {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .login-container .login-card h2 {
        font-size: 24px;
    }
}


@media (max-width: 440px) {

    .show-on-mobile .PhotoCitoyenPreview img {
        height: 150px !important;
    }

    .header-body {
        display: flex;
        flex-direction: column;
    }

        .header-body > * {
            width: 100%;
        }

        .header-body form {
            display: flex;
            flex-direction: column;
        }

        .header-body .pull-right {
            float: none !important;
            text-align: right !important;
        }

        .header-body .header-buttons {
            text-align: right !important;
        }

    .file-info {
        min-width: unset;
        width: 98%;
    }

    .header-body form > div, .header-body form button {
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .header-body form .input-group .form-control {
        height: 39.6px !important;
    }

    #detail-employe-modal .modal-body .photo-profil {
        text-align: center;
    }

    .header-body p {
        margin-bottom: 8px;
    }

    .header-body {
        padding-bottom: 8px;
    }

    .body-content, .main-menu, .modal {
        font-size: 1.25rem;
    }

    .login-form {
        padding: 0 !important;
    }

    .password-strong-tooltip > .glyphicon-play {
        left: 10px !important;
        transform: rotate(90deg) !important;
        bottom: -32%;
        margin-top: 60% !important;
    }

    .navbar-right {
        font-size: 1rem;
    }

    .login-block {
        width: 80% !important;
    }

    .xs-full-width {
        width: 100%;
        margin-bottom: 8px !important;
    }

    .open-sm .dropdown-menu {
        transform: translateX(-72%);
    }

    .open-sm.usrsm .dropdown-menu {
        transform: translateX(-80%);
    }

    .left-pan {
        transform: translateY(-70px);
        height: 130px;
    }

        .left-pan .app-info {
            display: none !important;
        }

        .left-pan .credit-info {
            display: none !important;
        }

    .right-pan {
        transform: none;
        padding-top: 30px;
        backdrop-filter: blur(3px) brightness(1.3);
        -webkit-backdrop-filter: blur(3px) brightness(1.3);
    }

    .login-block {
        max-height: 60%;
    }

    .dropdown.sm {
        margin-right: 10px;
        padding: 8px;
    }


    .notif-icon.sm {
        padding: 0;
    }

    .current-user-info.sm {
        padding: 0;
    }

    .header-body > p {
        width: 100%;
        text-align: justify;
        font-size: 1.3rem;
    }

    .header-body .param-control div {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .header-body .header-buttons {
        width: 100%;
        margin-top: 8px;
        padding-top: 5px;
        border-top: 1px solid lightgrey;
    }

    #modal-dialog-message.modal.in .modal-dialog {
        transform: translateY(50%);
    }

    .s-o-m-t {
        display: block !important;
        padding-bottom: 5px;
        margin-bottom: 5px;
    }

    .h-o-m-t {
        display: none;
    }

    .indicator {
        font-size: 1.2rem;
    }

    .action-button-collapse {
        right: 0;
    }

    .nav .dropdown > a:focus, .nav .dropdown > a:hover {
        background: transparent !important;
    }

    #statut-projet-search-param-box {
        width: 100% !important;
    }
}


@media (max-width: 768px) {

    .goal-reached-badge img {
        width: 20vh;
    }

    .home-welcome-text p {
        font-size: 2rem !important;
        font-weight: 600 !important;
    }

    .goal-reached-ribon img {
        width: 98%;
        height: 15vh;
    }

    .goal-reached-ribon h3 {
        font-size: 1rem;
        transform: translateY(-13vh);
        width: 75%;
    }

    #main-menu-excel-info-box {
        height: 24% !important;
    }

    .navbar-left-box > .navbar-header > a img {
        height: unset !important;
        width: 100%;
    }

    .navbar-right-box .navbar-right {
        width: 50px;
    }
    /* Login page*/
    .login-container {
        flex-direction: column;
        min-height: auto;
        padding: unset !important;
    }

        .login-container .left-section {
            padding: 40px 25px 5px 25px;
            text-align: center;
            align-items: center;
        }

            .login-container .left-section h1 {
                font-size: 28px;
            }

            .login-container .left-section h3 {
                font-size: 12px;
                margin-bottom: 0;
            }

            .login-container .left-section h4 {
                font-size: 10px;
                margin-bottom: 0;
            }

            .login-container .left-section p {
                font-size: 12px;
                max-width: 100%;
            }

    .logo-1 img {
        height: 70px !important;
    }

    .logo-2 img {
        height: 40px !important;
    }

    .login-container .right-section {
        padding: 20px 20px 40px 20px;
    }

    .login-container .login-card {
        padding: 30px 20px;
        min-height: unset !important;
    }

    /* Login page*/

    .password-strong-tooltip {
        left: 50% !important;
    }

        .password-strong-tooltip > .glyphicon-play {
            right: unset !important;
            left: -13px;
            transform: rotate(-180deg);
            margin-top: 100% !important;
        }


    .notif-icon.sm {
        display: block !important;
    }

    .notif-icon.md {
        display: none;
    }

    .current-user-info.sm {
        display: block !important;
    }

    .current-user-info.md {
        display: none;
    }

    #datatable_wrapper .row:first-child {
        display: none;
    }

    #datatableMS_wrapper .row:first-child {
        display: none;
    }

    .modal-body {
        padding: 5% !important;
    }

    input,
    select,
    textarea {
        max-width: 100%;
    }

    .table-responsive {
        border: none;
    }

        .table-responsive::-webkit-scrollbar {
            height: 1px;
        }

        .table-responsive::-webkit-scrollbar-thumb {
        }


    .body-content::-webkit-scrollbar {
        display: none;
    }

    .page-scroll-content::-webkit-scrollbar {
        width: 1px;
    }

    .navbar {
        height: 50px;
    }

    .body-content {
        left: 0;
        width: 100%;
    }

    .indicator {
        left: 0 !important;
        width: 100% !important;
    }


    .choose-institution-form {
        width: 55% !important;
        margin: 0 auto !important;
    }

    .navbar-brand {
        font-size: 1rem !important;
    }

    #btn-main-menu {
        display: inline;
    }

    .main-menu {
        display: none;
        max-width: 70%;
        min-width: 30%;
        z-index: 200;
        left: 0 !important;
        margin: 0 !important;
        min-height: 93% !important;
        max-height: 93% !important;
    }

        .main-menu.menu-open {
            display: block;
        }

        .main-menu > .main-menu-menu {
            margin-top: 0 !important;
        }

    .btn-iconify-main-menu {
        display: none !important;
    }

    .user-info-header {
        position: relative;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center;
        bottom: 0 !important;
        margin-top: 50px !important;
    }

    .user-avatar {
        position: relative;
        margin: 0 auto;
        float: none !important;
        clear: both;
    }

    .user-profil-login-info {
        position: relative;
        margin: 0 auto;
        width: 100%;
        float: none !important;
        clear: both;
        max-width: inherit !important;
    }

    .user-profil-header {
        margin-left: -4.1% !important;
        margin-right: -4.1% !important;
    }

    .pn-container {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        margin-left: 0;
        margin-right: 0;
    }

    .pn {
        height: auto !important;
    }

    #ddl-dir-ser-sec-modal {
        width: 48%;
        margin-left: 5px;
    }

    .show-on-mobile {
        display: inline !important;
    }

    .hide-on-mobile {
        display: none;
    }

    .show-table-on-mobile {
        display: block !important;
    }

    .hide-table-on-mobile {
        display: none !important;
    }
}

@media (min-width: 992px) {
    #ddl-dir-ser-sec-modal {
        width: 30%;
    }
}


.s-o-m-t {
    display: none;
}

.disabled-control {
    background-color: #dadada !important;
    pointer-events: none;
}

.open-sm > .dropdown-menu {
    display: block;
}


.body-content {
    position: absolute;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 3%;
    background-color: #fff;
    float: right;
    height: 100%;
    overflow-y: auto;
    transition: 0.3s;
    border-top: 1px solid #e6e6f6;
    padding-top: 50px;
}

.page-scroll-content {
    position: absolute;
    width: 95%;
    height: 79%;
    overflow-y: auto;
    overflow-x: hidden;
}

.main-menu {
    position: absolute;
    float: left;
    left: 0;
    height: 100%;
    overflow-y: hidden !important;
    transition: 0.3s;
    color: black;
    background-color: var(--bg-secondary);
}

    .main-menu > .main-menu-menu {
        position: relative;
        min-height: 50%;
        height: 50%;
        overflow-y: auto !important;
        background-color: var(--bg-secondary);
        padding-top: 100px;
    }

.main-menu-menu li a {
    color: #fff;
}

.nav > li > a:focus, .nav > li > a:hover {
    background-color: transparent;
}

.nav > li.header:hover {
    border-left: 4px solid #fff;
}

.btn-iconify-main-menu {
    display: block;
    height: 42px;
    border-bottom: 1px solid lightgrey;
    margin: 0;
    background: #f4f4f4;
    z-index: 40;
}

    .btn-iconify-main-menu > #btn-iconify-main-menu {
        margin-left: 15px;
        padding: 0;
        padding-top: 2px;
    }



.other-module > ul {
    background: #0078d7;
}

    .other-module > ul > li > a {
        font-family: Arial;
        color: #ffffff;
        font-weight: bold;
    }

        .other-module > ul > li > a:hover {
            color: #0078d7;
        }

.hide-other-module {
    display: none;
}

button:focus, .btn:focus {
    border: none !important;
    outline: none !important;
}

.other-module-disabled {
    background: #f4f4f4 !important;
}

    .other-module-disabled > li > a {
        color: #b2b2b2 !important;
    }

    .other-module-disabled:hover, .other-module-disabled > li:hover, .other-module-disabled:hover, .other-module-disabled > li:focus {
        background: #f4f4f4 !important;
    }

    .other-module-disabled > li > a:hover, .other-module-disabled > li > a:focus {
        color: #b2b2b2 !important;
        background: #f4f4f4 !important;
        cursor: not-allowed !important;
    }

.login-block {
    position: relative;
    min-height: 400px;
    width: 400px;
    margin: 0 auto;
    transform: translateY(30%);
    background: url("../images/maron-inconnu.jpg") no-repeat center;
    background-size: cover;
    border-radius: 8px;
    border: 1px solid #1c223d;
}

.input-search:focus {
    border: none !important;
    outline: none !important;
}

.login-form {
    width: 100%;
    margin: auto;
    position: relative;
    padding-top: 10%;
    min-height: 180px;
}

    .login-form .form-control {
        width: 100%;
    }

.nav-sidebar li.header {
    width: 100%;
    font-weight: normal;
    font-size: 14px;
    border-left: 4px solid transparent;
}

    .nav-sidebar li.header .chevron {
        float: right;
    }

.main-menu .nav-sub {
    padding-left: 20px;
    color: black;
}


.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
    color: #fff;
    background-color: #14182b;
}

.side-nav-header {
    top: 3vmax;
    position: fixed;
    font-size: 14px;
    width: 14.9%;
    height: 50px;
    padding-top: 15px;
    background-color: #f4f4f4;
    border-bottom: 1px solid #e6e6f6;
}

    .side-nav-header a:hover,
    .side-nav-header a:focus {
        text-decoration: none;
    }


.show {
    display: block !important;
}

.pn .dataTables_wrapper .row, .pn-2 .dataTables_wrapper .row {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}


    .pn .dataTables_wrapper .row .col-sm-12, .pn-2 .dataTables_wrapper .row .col-sm-12 {
        padding-left: 0;
        padding-right: 0;
    }

#datatableModalMS_wrapper .row:last-child div {
    width: 100%;
}

    #datatableModalMS_wrapper .row:last-child div .dataTables_info {
        text-align: center;
    }

.blur {
    filter: blur(3px);
    background-size: cover;
}


::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}


::-webkit-scrollbar-thumb {
    background: var(--bg-secondary);
    border-radius: 50px;
}

.main-menu-menu {
    scrollbar-color: #fff var(--bg-secondary) !important;
}

thead.bg-success {
    background-color: #cee7ff !important;
}

#logo-preview, #profile-photo-preview {
    text-align: center;
}


    #logo-preview img, #profile-photo-preview img {
        border: 1px solid lightgrey;
        padding: 2px;
    }

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

dd, dt {
    line-height: 30px;
}

.indicator {
    z-index: 100;
    min-height: 40px;
    position: fixed;
    left: 18%;
    width: 82%;
    padding: 10px;
    font-weight: 600;
    border-bottom: 1px solid lightgrey;
    background-color: #f4f4f4;
    transition: 0.3s;
}

.header-body {
    position: relative;
    display: block;
    min-height: 40px;
    margin-top: 50px;
    font-size: 14px;
    font-weight: 600;
    padding-right: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #C1C8D3;
}

    .header-body .star {
        font-size: 16px;
    }

    .header-body > p {
        margin: 0 !important;
    }

.navbar-header a b,
.navbar-header span,
.dropdown-toggle span,
.btn-danger a,
.btn-success a,
.btn-warning a,
.btn-info a {
    color: #fff;
}

.left-pan .icon {
    background: url(../images/unlock-icon-4.png) no-repeat center;
    background-size: cover;
    width: 120px;
    height: 120px;
    display: block;
    margin: 0 auto;
    border-radius: 50%;
}

.left-pan .app-info {
    display: block;
    text-align: center;
    color: #1c223d;
    text-shadow: 0px 0px 5px #fff;
    transform: translateY(40px);
    backdrop-filter: blur(6px);
}

    .left-pan .app-info .app-name {
        display: block;
        font-size: 2rem;
    }


.cart-row {
    color: whitesmoke;
}

.login-link {
    float: right;
}


.user-profil-header {
    background: url(../images/main-banner-2.png) no-repeat center;
    background-size: cover;
    padding: 1.5%;
    margin-left: -3.5%;
    margin-right: -3.5%;
    border-bottom: 1px solid #e6e6f6;
    margin-bottom: 80px;
}

.welcome-text {
    font-size: 3rem;
    font-weight: bold;
    color: #fff;
    letter-spacing: 2px;
    font-family: Calibri, Corbel;
    text-shadow: 20px 6px 2px #000000;
}

.user-avatar {
    float: left;
}

    .user-avatar img {
        border: solid 4px white;
        border-radius: 100px;
        box-shadow: inset 10px black;
        background: silver;
    }

.user-profil-login-info {
    position: relative;
    max-width: 320px;
    color: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.5rem;
    letter-spacing: 2px;
    float: right;
}

.user-info-header {
    position: relative;
    max-width: 500px;
    margin-right: 20px;
    bottom: -50px;
    margin-top: -40px;
}

.panel-personal-info {
    position: relative;
    width: 75%;
    margin: 0 auto;
    border: 1px solid #b1b1b1;
    border-radius: 10px;
}

.navbar-right > ul > li > a:hover, .navbar-right > ul > li > a:focus {
    background: #14182b !important;
}


.institution-welcome {
    background: rgba(0, 118, 214, 0.6);
    width: 80%;
    margin: 0 auto;
    margin-top: 20%;
    border-radius: 20px;
    padding: 3%;
}

.modal {
    transition: ease-in-out 0.5s;
}

.choose-institution-form {
    min-height: 8vmax;
    padding: 20px;
    width: 380px;
    margin: 0 auto;
    border-radius: 10px;
    border: 1px solid #b1b1b1;
    background: whitesmoke;
}

.modal-header > h4 {
    color: #fff;
}

.tax-employe-panel-container {
    position: absolute;
    width: 98%;
    min-height: 78%;
}

    .tax-employe-panel-container .panel-body, .pending-employe-panel-container .panel-body {
        min-height: 31vmax;
    }

#datatable-employee-pending_wrapper .row:first-child, #datatable-employee-pending_wrapperr .row:last-child, #datatable-employee-reintegrate_wrapper .row:first-child, #datatable-employee-reintegrate_wrapperr .row:last-child {
    padding: 10px;
}

#datatable-employee-reintegrate_filter {
    margin-left: -20px;
}


.table-fixed-head-foot thead, .table-fixed-head-foot tfoot, .table-fixed-head-foot tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}


    .table-fixed-head-foot tbody tr td {
        word-break: break-word;
    }

.table-fixed-head-foot tbody {
    display: block;
    overflow-y: auto;
}


.multiselect {
    display: block;
    width: 100%;
    text-align: left;
}



.multiselect-selected-text {
    width: 98% !important;
    word-wrap: break-word;
    color: #000000 !important;
}

.multiselect-native-select .btn-group {
    width: 100%;
    word-wrap: break-word;
}


.multiselect-container {
    max-height: 15vmax !important;
    overflow-y: auto !important;
}

.password-strong-tooltip {
    display: none;
    position: absolute;
    min-height: 10px;
    background: rgba(0, 0, 0, 0.82);
    z-index: 1000;
    border-radius: 5px;
    left: -24%;
    top: 50px
}

    .password-strong-tooltip > .glyphicon-play {
        position: absolute;
        vertical-align: middle;
        right: -12px;
        margin-top: 60%;
    }

    .password-strong-tooltip > ul {
        padding-left: 0;
    }

        .password-strong-tooltip > ul li {
            padding: 8px;
            color: wheat;
            list-style: none;
            font-size: 1.3rem;
            font-weight: normal;
        }

.password-strong-tooltip-item-bg-success {
    background: #22b000;
}

tbody > tr.odd.selected > .sorting_1, tbody > tr.even.selected > .sorting_1 {
    background: none !important;
}

tbody > tr > td {
    color: black !important
}

tbody > tr > .selected, .odd.selected {
    background: #e2f1fc !important;
}

.even.selected {
    background: #e2f1fc !important;
}

tbody td.select-checkbox {
    color: black !important
}

table.dataTable tbody td.select-checkbox,
table.dataTable tbody th.select-checkbox,
table.dataTable thead th.select-checkbox {
    position: relative;
}

    table.dataTable tbody td.select-checkbox:before, table.dataTable tbody td.select-checkbox:after,
    table.dataTable tbody th.select-checkbox:before,
    table.dataTable thead th.select-checkbox:before,
    table.dataTable thead th.select-checkbox:after,
    table.dataTable tbody th.select-checkbox:after {
        display: block;
        position: absolute;
        top: 1.2em;
        left: 50%;
        width: 12px;
        height: 12px;
        box-sizing: border-box;
    }

    table.dataTable tbody td.select-checkbox:before,
    table.dataTable tbody th.select-checkbox:before,
    table.dataTable thead th.select-checkbox:before {
        content: ' ';
        margin-top: -6px;
        margin-left: -6px;
        border: 1px solid black;
        border-radius: 3px;
    }


table.dataTable tr th.selected.select-checkbox:after {
    content: '\2714';
    margin-top: -11px;
    margin-left: -4px;
    text-align: center;
    text-shadow: 1px 1px #B0BED9, -1px -1px #B0BED9, 1px -1px #B0BED9, -1px 1px #B0BED9;
}



#overlay-loading {
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(255,255,255,0.98);
    transition: 1s 0.4s;
    align-content: center;
}


.overlay-loading {
    position: absolute;
    z-index: 1040;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(255,255,255,0.5);
    transition: 1s 0.4s;
    align-content: center;
}

    .overlay-loading img {
        display: block;
        position: absolute;
        top: 45%;
        left: 45%;
    }

.ly-overlay-loading {
    background: rgba(255,255,255,0.98);
}

    .ly-overlay-loading img {
        top: 45%;
        left: 45%;
    }

.form-overlay-loading {
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 15px;
}

    .form-overlay-loading img {
        display: block;
        position: absolute;
        top: 40%;
        left: 41%;
    }

#seach-employe-emb-form input:first-child {
    background: #1090f5;
}

#seach-employe-emb-form .input-group-addon {
    border: 1px solid #1090f5;
}

#seach-employe-emb-form input:first-child:hover, #seach-employe-emb-form input:first-child:focus {
    outline: none;
    box-shadow: none;
}

#search-candidat-ninu-form input:first-child {
    background: #1090f5;
}

#search-candidat-ninu-form .input-group-addon {
    border: 1px solid #1090f5;
}

#search-candidat-ninu-form input:first-child:hover, #search-candidat-ninu-form input:first-child:focus {
    outline: none;
    box-shadow: none;
}



.show-second-prenom, .show-phone-2, .show-second-email, .show-localite-id-box, .show-section-communale-id-box, .show-circonscription-id-box, .show-commune-id-box, .show-commune-naissance-box, .show-emp-contact-localite-id-box, .plus-projet-zone-cible {
    right: 0;
    position: absolute;
    transform: translateY(240%);
    margin-right: 20px;
    border-radius: 50px;
    z-index: 200;
    color: #12b000;
}

    .show-second-prenom:hover, .show-phone-2:hover, .show-second-email:hover, .show-localite-id-box:hover, .show-section-communale-id-box:hover, .show-circonscription-id-box:hover, .show-commune-id-box:hover, .show-commune-naissance-box:hover, .show-emp-contact-localite-id-box:hover {
        cursor: pointer;
        color: #313131;
    }

#second-prenom, #phone-2, #second-email, #localite-id-box, #section-communale-id-box, #commune-naissance-box, #emp-contact-localite-id-box, #projet-zone-cible-selection-box, #statut-projet-search-param-box {
    position: absolute;
    z-index: 210;
    background: whitesmoke;
    width: 90%;
    padding: 10px;
    border-radius: 5px;
}

#ddl-dir-ser-sec-modal {
    position: absolute;
    background: #c1e5ff;
    border-radius: 5px;
    z-index: 300;
    margin-left: 10px;
    padding: 0;
}

#statut-projet-search-param-box {
    width: 25%;
    font-weight: normal;
}

    #statut-projet-search-param-box label {
        font-weight: bold;
        font-size: 1.23rem;
    }

#localite-id-box {
    top: -585%;
    background: #c1e5ff;
    padding: 0;
}

#section-communale-id-box {
    top: -30%;
    background: #c1e5ff;
    padding: 0;
}

#show-circonscription-id-box {
    top: -30%;
    background: #c1e5ff;
    padding: 0;
}

#commune-id-box {
    top: -250%;
    background: #c1e5ff;
    padding: 0;
}


#Profil-Employe-Form #localite-id-box {
    top: -120%;
    background: #c1e5ff;
    padding: 0;
}

#Add-Mouvement-Form #localite-id-box {
    top: -140%;
    background: #c1e5ff;
    padding: 0;
}

#commune-naissance-box {
    top: -370%;
    background: #c1e5ff;
    padding: 0;
}

#emp-contact-localite-id-box {
    top: -405%;
    background: #c1e5ff;
    padding: 0;
}

    #ddl-dir-ser-sec-modal .glyphicon-remove:hover, #localite-id-box .glyphicon-remove:hover, #section-communale-id-box .glyphicon-remove:hover, #show-circonscription-id-box .glyphicon-remove:hover, #commune-id-box .glyphicon-remove:hover, #emp-contact-localite-id-box .glyphicon-remove:hover {
        cursor: pointer;
        color: #ed4643;
    }

    #ddl-dir-ser-sec-modal .form-control, #localite-id-box .form-control, #section-communale-id-box .form-control, #commune-id-box .form-control, #emp-contact-localite-id-box .form-control {
        border: 1px solid #bdbdbd;
    }



#Create-Candidat-Form #commune-id-box, #Edit-Candidat-Form #commune-id-box {
    position: absolute;
    z-index: 210;
    background: #c1e5ff;
    width: 50%;
    padding: 0px;
    border-radius: 5px;
}

#Create-Centre-Vote-Form #section-communale-id-box, #Edit-Centre-Vote-Form #section-communale-id-box {
    position: absolute;
    z-index: 210;
    background: #c1e5ff;
    width: 40%;
    padding: 0px;
    border-radius: 5px;
}

#Create-Centre-Vote-Form #circonscription-id-box, #Edit-Centre-Vote-Form #circonscription-id-box {
    position: absolute;
    z-index: 210;
    background: #c1e5ff;
    width: 40%;
    padding: 0px;
    border-radius: 5px;
}


.action-button-collapse {
    position: fixed;
    z-index: 300;
    background: #f2f2f2;
    padding: 8px;
    border-radius: 5px;
    border: 1px solid lightgrey;
    margin: 0 auto;
    margin-top: -7.6%;
    min-width: 140px;
}

    .action-button-collapse button {
        display: block;
        margin-bottom: 8px;
        width: 100%;
    }


.view-action-button-collapse-pressed {
    background-color: #9c5d04;
}

.stretch-out-on-hover:hover {
    letter-spacing: 2px;
    transition: letter-spacing linear 0.3s;
}

.notification-dropdown li ul li a:hover {
    background: #d4e5ed;
}

tr.disabled, .pointer-evt {
    pointer-events: none;
}

.button-processing {
    pointer-events: none;
    filter: grayscale(100%);
}

    .button-processing .loader {
        display: inline-block !important;
        animation: spin 0.8s linear infinite;
    }

.modal-header {
    background: var(--bg-secondary) !important;
}


.nav .open > a, .nav .open > a:focus, .nav .open > a:hover, .nav .dropdown > a:focus, .nav .dropdown > a:hover {
    background-color: transparent;
}

#progress {
    width: 100%;
    background-color: grey;
}

#bar-generate-polling-place-elector {
    width: 0%;
    height: 20px;
    background-color: green;
    text-align: center;
    line-height: 20px;
    color: white;
}

/*
    Nofication Bell Animation
*/
.bell-ring-animation {
    animation: ring 1.5s infinite linear;
}


@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes ring {
    0% {
        transform: rotate(-10deg);
    }

    12.5% {
        transform: rotate(15deg);
    }

    25% {
        transform: rotate(-20deg);
    }

    37.5% {
        transform: rotate(30deg);
    }

    50% {
        transform: rotate(10deg);
    }

    62.5% {
        transform: rotate(-20deg);
    }

    75% {
        transform: rotate(15deg);
    }

    100% {
        transform: rotate(-15deg);
    }
}


/* Pure CSS (SCSS) Bootstrap compatible circular progress bar
*/
.progress {
    width: 150px;
    height: 150px;
    line-height: 150px;
    background: none;
    margin: 0 auto;
    box-shadow: none;
    position: relative;
}

    .progress:after {
        content: "";
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 7px solid #eee;
        position: absolute;
        top: 0;
        left: 0;
    }

    .progress > span {
        width: 50%;
        height: 100%;
        overflow: hidden;
        position: absolute;
        top: 0;
        z-index: 1;
    }

    .progress .progress-left {
        left: 0;
    }

    .progress .progress-bar {
        width: 100%;
        height: 100%;
        background: none;
        border-width: 7px;
        border-style: solid;
        position: absolute;
        top: 0;
        border-color: #ffb43e;
    }

    .progress .progress-left .progress-bar {
        left: 100%;
        border-top-right-radius: 75px;
        border-bottom-right-radius: 75px;
        border-left: 0;
        -webkit-transform-origin: center left;
        transform-origin: center left;
    }

    .progress .progress-right {
        right: 0;
    }

        .progress .progress-right .progress-bar {
            left: -100%;
            border-top-left-radius: 75px;
            border-bottom-left-radius: 75px;
            border-right: 0;
            -webkit-transform-origin: center right;
            transform-origin: center right;
        }

    .progress .progress-value {
        display: flex;
        border-radius: 50%;
        font-size: 36px;
        text-align: center;
        line-height: 20px;
        align-items: center;
        justify-content: center;
        height: 100%;
        font-weight: 300;
    }

        .progress .progress-value div {
            margin-top: 10px;
        }

        .progress .progress-value span {
            font-size: 12px;
            text-transform: uppercase;
        }

    /* This for loop creates the 	necessary css animation names 
Due to the split circle of progress-left and progress right, we must use the animations on each side. 
*/
    .progress[data-percentage="1"] .progress-right .progress-bar {
        animation: loading-1 1.5s linear forwards;
    }

    .progress[data-percentage="1"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="2"] .progress-right .progress-bar {
        animation: loading-2 1.5s linear forwards;
    }

    .progress[data-percentage="2"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="3"] .progress-right .progress-bar {
        animation: loading-3 1.5s linear forwards;
    }

    .progress[data-percentage="3"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="4"] .progress-right .progress-bar {
        animation: loading-4 1.5s linear forwards;
    }

    .progress[data-percentage="4"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="5"] .progress-right .progress-bar {
        animation: loading-5 1.5s linear forwards;
    }

    .progress[data-percentage="5"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="6"] .progress-right .progress-bar {
        animation: loading-6 1.5s linear forwards;
    }

    .progress[data-percentage="6"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="7"] .progress-right .progress-bar {
        animation: loading-7 1.5s linear forwards;
    }

    .progress[data-percentage="7"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="8"] .progress-right .progress-bar {
        animation: loading-8 1.5s linear forwards;
    }

    .progress[data-percentage="8"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="9"] .progress-right .progress-bar {
        animation: loading-9 1.5s linear forwards;
    }

    .progress[data-percentage="9"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="10"] .progress-right .progress-bar {
        animation: loading-10 1.5s linear forwards;
    }

    .progress[data-percentage="10"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="11"] .progress-right .progress-bar {
        animation: loading-11 1.5s linear forwards;
    }

    .progress[data-percentage="11"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="12"] .progress-right .progress-bar {
        animation: loading-12 1.5s linear forwards;
    }

    .progress[data-percentage="12"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="13"] .progress-right .progress-bar {
        animation: loading-13 1.5s linear forwards;
    }

    .progress[data-percentage="13"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="14"] .progress-right .progress-bar {
        animation: loading-14 1.5s linear forwards;
    }

    .progress[data-percentage="14"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="15"] .progress-right .progress-bar {
        animation: loading-15 1.5s linear forwards;
    }

    .progress[data-percentage="15"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="16"] .progress-right .progress-bar {
        animation: loading-16 1.5s linear forwards;
    }

    .progress[data-percentage="16"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="17"] .progress-right .progress-bar {
        animation: loading-17 1.5s linear forwards;
    }

    .progress[data-percentage="17"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="18"] .progress-right .progress-bar {
        animation: loading-18 1.5s linear forwards;
    }

    .progress[data-percentage="18"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="19"] .progress-right .progress-bar {
        animation: loading-19 1.5s linear forwards;
    }

    .progress[data-percentage="19"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="20"] .progress-right .progress-bar {
        animation: loading-20 1.5s linear forwards;
    }

    .progress[data-percentage="20"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="21"] .progress-right .progress-bar {
        animation: loading-21 1.5s linear forwards;
    }

    .progress[data-percentage="21"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="22"] .progress-right .progress-bar {
        animation: loading-22 1.5s linear forwards;
    }

    .progress[data-percentage="22"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="23"] .progress-right .progress-bar {
        animation: loading-23 1.5s linear forwards;
    }

    .progress[data-percentage="23"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="24"] .progress-right .progress-bar {
        animation: loading-24 1.5s linear forwards;
    }

    .progress[data-percentage="24"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="25"] .progress-right .progress-bar {
        animation: loading-25 1.5s linear forwards;
    }

    .progress[data-percentage="25"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="26"] .progress-right .progress-bar {
        animation: loading-26 1.5s linear forwards;
    }

    .progress[data-percentage="26"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="27"] .progress-right .progress-bar {
        animation: loading-27 1.5s linear forwards;
    }

    .progress[data-percentage="27"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="28"] .progress-right .progress-bar {
        animation: loading-28 1.5s linear forwards;
    }

    .progress[data-percentage="28"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="29"] .progress-right .progress-bar {
        animation: loading-29 1.5s linear forwards;
    }

    .progress[data-percentage="29"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="30"] .progress-right .progress-bar {
        animation: loading-30 1.5s linear forwards;
    }

    .progress[data-percentage="30"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="31"] .progress-right .progress-bar {
        animation: loading-31 1.5s linear forwards;
    }

    .progress[data-percentage="31"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="32"] .progress-right .progress-bar {
        animation: loading-32 1.5s linear forwards;
    }

    .progress[data-percentage="32"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="33"] .progress-right .progress-bar {
        animation: loading-33 1.5s linear forwards;
    }

    .progress[data-percentage="33"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="34"] .progress-right .progress-bar {
        animation: loading-34 1.5s linear forwards;
    }

    .progress[data-percentage="34"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="35"] .progress-right .progress-bar {
        animation: loading-35 1.5s linear forwards;
    }

    .progress[data-percentage="35"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="36"] .progress-right .progress-bar {
        animation: loading-36 1.5s linear forwards;
    }

    .progress[data-percentage="36"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="37"] .progress-right .progress-bar {
        animation: loading-37 1.5s linear forwards;
    }

    .progress[data-percentage="37"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="38"] .progress-right .progress-bar {
        animation: loading-38 1.5s linear forwards;
    }

    .progress[data-percentage="38"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="39"] .progress-right .progress-bar {
        animation: loading-39 1.5s linear forwards;
    }

    .progress[data-percentage="39"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="40"] .progress-right .progress-bar {
        animation: loading-40 1.5s linear forwards;
    }

    .progress[data-percentage="40"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="41"] .progress-right .progress-bar {
        animation: loading-41 1.5s linear forwards;
    }

    .progress[data-percentage="41"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="42"] .progress-right .progress-bar {
        animation: loading-42 1.5s linear forwards;
    }

    .progress[data-percentage="42"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="43"] .progress-right .progress-bar {
        animation: loading-43 1.5s linear forwards;
    }

    .progress[data-percentage="43"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="44"] .progress-right .progress-bar {
        animation: loading-44 1.5s linear forwards;
    }

    .progress[data-percentage="44"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="45"] .progress-right .progress-bar {
        animation: loading-45 1.5s linear forwards;
    }

    .progress[data-percentage="45"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="46"] .progress-right .progress-bar {
        animation: loading-46 1.5s linear forwards;
    }

    .progress[data-percentage="46"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="47"] .progress-right .progress-bar {
        animation: loading-47 1.5s linear forwards;
    }

    .progress[data-percentage="47"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="48"] .progress-right .progress-bar {
        animation: loading-48 1.5s linear forwards;
    }

    .progress[data-percentage="48"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="49"] .progress-right .progress-bar {
        animation: loading-49 1.5s linear forwards;
    }

    .progress[data-percentage="49"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="50"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="50"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="51"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="51"] .progress-left .progress-bar {
        animation: loading-1 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="52"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="52"] .progress-left .progress-bar {
        animation: loading-2 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="53"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="53"] .progress-left .progress-bar {
        animation: loading-3 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="54"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="54"] .progress-left .progress-bar {
        animation: loading-4 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="55"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="55"] .progress-left .progress-bar {
        animation: loading-5 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="56"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="56"] .progress-left .progress-bar {
        animation: loading-6 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="57"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="57"] .progress-left .progress-bar {
        animation: loading-7 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="58"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="58"] .progress-left .progress-bar {
        animation: loading-8 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="59"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="59"] .progress-left .progress-bar {
        animation: loading-9 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="60"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="60"] .progress-left .progress-bar {
        animation: loading-10 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="61"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="61"] .progress-left .progress-bar {
        animation: loading-11 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="62"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="62"] .progress-left .progress-bar {
        animation: loading-12 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="63"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="63"] .progress-left .progress-bar {
        animation: loading-13 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="64"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="64"] .progress-left .progress-bar {
        animation: loading-14 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="65"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="65"] .progress-left .progress-bar {
        animation: loading-15 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="66"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="66"] .progress-left .progress-bar {
        animation: loading-16 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="67"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="67"] .progress-left .progress-bar {
        animation: loading-17 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="68"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="68"] .progress-left .progress-bar {
        animation: loading-18 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="69"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="69"] .progress-left .progress-bar {
        animation: loading-19 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="70"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="70"] .progress-left .progress-bar {
        animation: loading-20 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="71"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="71"] .progress-left .progress-bar {
        animation: loading-21 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="72"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="72"] .progress-left .progress-bar {
        animation: loading-22 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="73"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="73"] .progress-left .progress-bar {
        animation: loading-23 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="74"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="74"] .progress-left .progress-bar {
        animation: loading-24 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="75"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="75"] .progress-left .progress-bar {
        animation: loading-25 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="76"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="76"] .progress-left .progress-bar {
        animation: loading-26 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="77"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="77"] .progress-left .progress-bar {
        animation: loading-27 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="78"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="78"] .progress-left .progress-bar {
        animation: loading-28 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="79"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="79"] .progress-left .progress-bar {
        animation: loading-29 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="80"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="80"] .progress-left .progress-bar {
        animation: loading-30 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="81"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="81"] .progress-left .progress-bar {
        animation: loading-31 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="82"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="82"] .progress-left .progress-bar {
        animation: loading-32 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="83"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="83"] .progress-left .progress-bar {
        animation: loading-33 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="84"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="84"] .progress-left .progress-bar {
        animation: loading-34 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="85"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="85"] .progress-left .progress-bar {
        animation: loading-35 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="86"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="86"] .progress-left .progress-bar {
        animation: loading-36 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="87"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="87"] .progress-left .progress-bar {
        animation: loading-37 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="88"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="88"] .progress-left .progress-bar {
        animation: loading-38 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="89"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="89"] .progress-left .progress-bar {
        animation: loading-39 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="90"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="90"] .progress-left .progress-bar {
        animation: loading-40 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="91"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="91"] .progress-left .progress-bar {
        animation: loading-41 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="92"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="92"] .progress-left .progress-bar {
        animation: loading-42 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="93"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="93"] .progress-left .progress-bar {
        animation: loading-43 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="94"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="94"] .progress-left .progress-bar {
        animation: loading-44 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="95"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="95"] .progress-left .progress-bar {
        animation: loading-45 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="96"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="96"] .progress-left .progress-bar {
        animation: loading-46 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="97"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="97"] .progress-left .progress-bar {
        animation: loading-47 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="98"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="98"] .progress-left .progress-bar {
        animation: loading-48 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="99"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="99"] .progress-left .progress-bar {
        animation: loading-49 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="100"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="100"] .progress-left .progress-bar {
        animation: loading-50 1.5s linear forwards 1.5s;
    }

@keyframes loading-1 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(3.6);
        transform: rotate(3.6deg);
    }
}

@keyframes loading-2 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(7.2);
        transform: rotate(7.2deg);
    }
}

@keyframes loading-3 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(10.8);
        transform: rotate(10.8deg);
    }
}

@keyframes loading-4 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(14.4);
        transform: rotate(14.4deg);
    }
}

@keyframes loading-5 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(18);
        transform: rotate(18deg);
    }
}

@keyframes loading-6 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(21.6);
        transform: rotate(21.6deg);
    }
}

@keyframes loading-7 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(25.2);
        transform: rotate(25.2deg);
    }
}

@keyframes loading-8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(28.8);
        transform: rotate(28.8deg);
    }
}

@keyframes loading-9 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(32.4);
        transform: rotate(32.4deg);
    }
}

@keyframes loading-10 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(36);
        transform: rotate(36deg);
    }
}

@keyframes loading-11 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(39.6);
        transform: rotate(39.6deg);
    }
}

@keyframes loading-12 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(43.2);
        transform: rotate(43.2deg);
    }
}

@keyframes loading-13 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(46.8);
        transform: rotate(46.8deg);
    }
}

@keyframes loading-14 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(50.4);
        transform: rotate(50.4deg);
    }
}

@keyframes loading-15 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(54);
        transform: rotate(54deg);
    }
}

@keyframes loading-16 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(57.6);
        transform: rotate(57.6deg);
    }
}

@keyframes loading-17 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(61.2);
        transform: rotate(61.2deg);
    }
}

@keyframes loading-18 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(64.8);
        transform: rotate(64.8deg);
    }
}

@keyframes loading-19 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(68.4);
        transform: rotate(68.4deg);
    }
}

@keyframes loading-20 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(72);
        transform: rotate(72deg);
    }
}

@keyframes loading-21 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(75.6);
        transform: rotate(75.6deg);
    }
}

@keyframes loading-22 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(79.2);
        transform: rotate(79.2deg);
    }
}

@keyframes loading-23 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(82.8);
        transform: rotate(82.8deg);
    }
}

@keyframes loading-24 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(86.4);
        transform: rotate(86.4deg);
    }
}

@keyframes loading-25 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(90);
        transform: rotate(90deg);
    }
}

@keyframes loading-26 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(93.6);
        transform: rotate(93.6deg);
    }
}

@keyframes loading-27 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(97.2);
        transform: rotate(97.2deg);
    }
}

@keyframes loading-28 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(100.8);
        transform: rotate(100.8deg);
    }
}

@keyframes loading-29 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(104.4);
        transform: rotate(104.4deg);
    }
}

@keyframes loading-30 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(108);
        transform: rotate(108deg);
    }
}

@keyframes loading-31 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(111.6);
        transform: rotate(111.6deg);
    }
}

@keyframes loading-32 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(115.2);
        transform: rotate(115.2deg);
    }
}

@keyframes loading-33 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(118.8);
        transform: rotate(118.8deg);
    }
}

@keyframes loading-34 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(122.4);
        transform: rotate(122.4deg);
    }
}

@keyframes loading-35 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(126);
        transform: rotate(126deg);
    }
}

@keyframes loading-36 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(129.6);
        transform: rotate(129.6deg);
    }
}

@keyframes loading-37 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(133.2);
        transform: rotate(133.2deg);
    }
}

@keyframes loading-38 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(136.8);
        transform: rotate(136.8deg);
    }
}

@keyframes loading-39 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(140.4);
        transform: rotate(140.4deg);
    }
}

@keyframes loading-40 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(144);
        transform: rotate(144deg);
    }
}

@keyframes loading-41 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(147.6);
        transform: rotate(147.6deg);
    }
}

@keyframes loading-42 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(151.2);
        transform: rotate(151.2deg);
    }
}

@keyframes loading-43 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(154.8);
        transform: rotate(154.8deg);
    }
}

@keyframes loading-44 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(158.4);
        transform: rotate(158.4deg);
    }
}

@keyframes loading-45 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(162);
        transform: rotate(162deg);
    }
}

@keyframes loading-46 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(165.6);
        transform: rotate(165.6deg);
    }
}

@keyframes loading-47 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(169.2);
        transform: rotate(169.2deg);
    }
}

@keyframes loading-48 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(172.8);
        transform: rotate(172.8deg);
    }
}

@keyframes loading-49 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(176.4);
        transform: rotate(176.4deg);
    }
}

@keyframes loading-50 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(180);
        transform: rotate(180deg);
    }
}

.progress {
    margin-bottom: 1em;
}

.date-input-white::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

.speech-msg {
    width: 100%;
    margin-top: 20px;
    max-width: 120px;
    background-image: url('../images/speech.png');
    background-image: url('image.jpg');
    background-size: cover;
    background-position: center;
    min-height: 300px;
    color: white;
    padding: 20px;
    background-size: 100%;
    height: 120px;
    margin-top: -40px
}

.banner {
    position: relative;
}

.bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.content {
    position: relative;
    z-index: 2;
    color: white;
}