/* CSS Document */

html,
body {
    height: 100%;
    margin: 0px;
    padding: 0px;
}

@font-face {
    font-family: "FrutigerLTW01-45Light";
    src: url("../webfonts/7d3671fc-8c26-459c-98e1-997c4f6c8c93.eot?#iefix");
    src:
        url("../webfonts/7d3671fc-8c26-459c-98e1-997c4f6c8c93.eot?#iefix") format("eot"),
        url("../webfonts/4fb89ed5-baf5-425f-aba4-46e8c2c3aabe.woff2") format("woff2"),
        url("../webfonts/2a004a53-ac5c-43b3-9eeb-9f74ae4c1609.woff") format("woff"),
        url("../webfonts/74d53f3b-1683-4d5a-a556-e13f6553cdf0.ttf") format("truetype"),
        url("../webfonts/3f5a5b87-e71e-4544-be0c-da4daa132710.svg#3f5a5b87-e71e-4544-be0c-da4daa132710") format("svg");
}

@font-face {
    font-family: "FrutigerLTW01_65Bold";

    src: url("../webfonts/fbd7c0fb-f004-4e83-81d2-1d400413a873.eot?#iefix");
    src:
        url("../webfonts/fbd7c0fb-f004-4e83-81d2-1d400413a873.eot?#iefix") format("eot"),
        url("../webfonts/6e7f04cb-3b30-43a5-b79d-25b4c1178700.woff2") format("woff2"),
        url("../webfonts/9aa32a81-1124-4c43-b3db-15bfb1f7aed2.woff") format("woff"),
        url("../webfonts/6faffbf4-f8e8-4817-b24b-a390e166be7e.ttf") format("truetype"),
        url("../webfonts/fc09de64-de25-425e-90dc-a0cae29b02c4.svg#fc09de64-de25-425e-90dc-a0cae29b02c4") format("svg");
}

* {
    font-family: "FrutigerLTW01-45Light", serif;
    color: var(--main-color-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Raleway", sans-serif;
    color: var(--main-color);
}
h1 {
    font-weight: 900;
    margin-bottom: 35px;
}

h2 {
    font-size: 26px;
    font-weight: 900;
    margin-bottom: 25px;
    margin-top: 0px;
    color: var(--main-color);
}

h3 {
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 25px;
    margin-top: 0px;
    color: var(--main-color);
}
h4 {
    font-size: 20px;
    color: var(--main-color);
    font-weight: 600;
    text-transform: uppercase;
}

.textAnimation h2 {
    margin-bottom: 15px;
}

h5 {
    font-family: "FrutigerLTW01_65Bold";
    color: var(--main-color);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
}

p,
.menuPlat h6,
ol,
label,
ul {
    font-size: 18px;
}
strong,
strong span {
    font-family: "FrutigerLTW01_65Bold";

    font-weight: 600;
}
/*----------------------------------*/
/*----------------------------------*/
/*----------------------------------*/
/* Commun */
a {
    color: var(--main-color);
}
a:hover {
    text-decoration: none;
}
.lightgrey {
    background-color: rgb(241, 244, 246);
    transition: all 0.2s ease-in-out 0s;
}

.sousTitre {
    height: 2px;
    background-color: rgb(200, 200, 200);
    margin-bottom: 35px;
}

.egourmetBtn {
    font-size: 18px;
    font-weight: 600;
    border-radius: 37px;
    background-color: var(--main-color);
    color: #fff;
    display: block;
    text-align: center;
    padding: 10px;
    width: 100%;
    line-height: 20px;
    margin-top: 30px;
    transition: all 0.2s ease-in-out 0s;
    border: 2px solid var(--main-color);
}

.egourmetBtn:hover {
    font-size: 18px;
    font-weight: 600;
    border-radius: 37px;
    background-color: #ffffff;
    color: rgb(49, 49, 49);
    display: block;
    text-align: center;
    padding: 10px;
    width: 100%;
    line-height: 20px;
    margin-top: 30px;
    transition: all 0.2s ease-in-out 0s;
    border: 2px solid var(--main-color);
}

.caption,
.modeDePaiement p,
.modeDePaiement p sup {
    font-size: 14px;
    color: var(--main-color-text);
    opacity: 60%;
}

sup,
.modeDePaiement p sup {
    font-size: 10px;
}

.subArt {
    font-size: 16px;
    color: var(--main-color-text);
    opacity: 60%;
}

.header {
    border-bottom: 3px solid var(--main-color);
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 1000;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 8px 0;
    .title {
        display: flex;
        align-items:flex-start;
        justify-content:flex-start;
        h2 {
            margin-bottom: 0;
        }   
    }
    
}


.logo img{
    max-height: 50px;
}


.homebtn {
        display: flex;
        align-items:flex-end;
        justify-content:flex-end;
}


.securitylog {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.contact,
.changepassword,
.historique,
.myhome {
    height: 100dvh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.historique,.myhome {
    .boxLog {
        min-height: 330px;
        max-height: calc(100dvh - 100px);
        .list {
            height: calc(100dvh - 200px);
            margin-top: 20px;
            overflow-y: scroll;
            scrollbar-width: thin;
            scrollbar-color: var(--main-color) var(--neutral-extra-light);
            &::-webkit-scrollbar {
                width: 3px;
            }
            &::-webkit-scrollbar-track {
                background: var(--neutral-extra-light); /* Couleur du fond de la scrollbar */
            }
        }
    }
}
.addsolde {
    height: 100dvh;
    margin-top: 100px;
}
.spacerHead {
    padding-top: 100px;
}

.containTransHome {
    padding-top: 30px;
    padding-bottom: 30px;
    border-bottom: 3px solid var(--main-color);
    max-width: 600px;
    margin: 0 auto;
}

.containTransHome:nth-child(odd) {
    background-color: var(--neutral-extra-light);
}

.choixEntreprise {
    padding-top: 25px;
    padding-bottom: 25px;
    cursor: pointer;
    background-color: var(--neutral-extra-light);
    border: 1px solid #e1e1e1;
    margin-bottom: 25px;
}

.falsepassword,.emailFalse,.falsepsw {
    display: none;
}

.badge-customer {
    background-color: var(--neutral-extra-light);
    border-radius: 4px;
    padding: 25px;
}

.transaction-utilities {
    margin-top: 15px;
}

.footer {
    background-color: var(--neutral-extra-light);
    padding: 40px 20px 20px 20px;
    font-size: 16px;
    margin-top: 50px;
}

#from,
#to {
    width: 90%;
    float: right;
}

.form-control {
    border: none;
    background-color: #ffffff;
    border-bottom: 1px solid #c8c8c8;
    border-radius: 0px;
    -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    padding: 6px 0px;
}

.ui-datepicker-trigger {
    float: right;
    width: 10%;
    cursor: pointer;
}

#frameRefillBalance {
    width: 100%;
    height: 600px;
    border: none;
}

.boxLog .warning,
.boxLog .mdp {
    width: 90%;
    float: left;
}
.glyphicon-eye-close {
    width: 10%;
    margin-top: 10px;
    cursor: pointer;
}

.oldpswd,
.is-mail,
.is-snumber,
.ask-number,
.ask-pass,
.ask-ready {
    display: none;
}

.no-id-pass,.successtpass, .waitpass {
    display: none;
}

@media only screen and (max-width: 1024px) {
    .header {
        flex-direction: column;
        .logo {
            height: 50px;
            padding: 8px 0;
            img {
                height: 100%;
                margin: 0 auto;
            }
        }
        .title {
            h2 {
                text-align: center;
                font-size: 20px;
            }
        }
    }
    .contact,
    .changepassword,
    .historique,.myhome {
        height: unset;
        flex-direction: column;
        .contact-bloc {
            margin-top: 30px;
        }
        .boxLog {
            margin-top: 30px;
            min-height: unset;
            max-height: unset;
            .list{
                height: unset;
            }
        }
    }
    .addsolde {
        margin-top: 80px;
    }
}


.print-receipt{
    width: 100%;
}

.flex-end-nav{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.flex-end-nav div{
    margin-left: 15px;
    
}
.flex-end-nav div p{
    margin-bottom: 0px;
    font-size:15px;
    margin-top: 5px;
}

.nav-home-svg{
     width: 20px;
  height: 20px;
    margin-top: 3px;
}
.switch-lng{
    cursor:pointer;
}