@font-face {
    font-family: "OpenSans-Regular";
    src: url("../font/OpenSans-Regular.woff2") format("woff2"),
    url("../font/OpenSans-Regular.woff") format("woff");
}

@font-face {
    font-family: "OpenSans-Bold";
    src: url("../font/OpenSans-Bold.woff2") format("woff2"),
    url("../font/OpenSans-Bold.woff") format("woff");
}

@font-face {
    font-family: "OpenSans-Light";
    src: url("../font/OpenSans-Light.woff2") format("woff2"),
    url("../font/OpenSans-Light.woff") format("woff");
}

@font-face {
    font-family: "OpenSans-SemiBold";
    src: url("../font/OpenSans-SemiBold.woff2") format("woff2"),
    url("../font/OpenSans-SemiBold.woff") format("woff");
}


@font-face {
    font-family: "PTSerif-Caption";
    src: url("../font/PTF55F.woff") format("woff2"),
    url("../font/PTF55F.woff2") format("woff");
}

body{
    background-color: #f7f7f7 !important;
}
.instance{
    font-family: 'OpenSans-Regular';
    font-size: 34px;
    line-height: 1.35;
    text-align: left;
    color: #202f5e;
    margin-bottom: 27px;
}
.approvi{
    font-family: 'OpenSans-Regular';
    font-size: 16px;
    line-height: 1.56;
    text-align: left;
    color: #202f5e;
    margin-bottom: 7px;

}
.contentElement{
    margin-top: 50px;
}
.glyphicon{
    width: 24px;
    height: 24px;
    border: solid 1px #1daaf1;
    border-radius: 100%;
    line-height: 1.3 !important;
    text-align: center !important;
    top: -2px !important;
    margin-right: 4px;
}
.glyphicon-minus:before {
    width: 12px;
    height: 12px;
    color: #1daaf1;
}
.glyphicon-plus:before {
    width: 12px;
    height: 12px;
    color: #1daaf1;
}
.btnColsp{
    font-family: 'OpenSans-Regular';
    font-size: 14px;
    line-height: 2;
    letter-spacing: normal;
    color: #1daaf1 !important;
    padding-left: 0 !important;
}
.btn.focus, .btn:focus {
    box-shadow: none !important;
}
.MoyPay{
    font-family: 'OpenSans-SemiBold';
    font-size: 16px;
    line-height: 1.33;
    color: #005b81;
    margin-bottom: 0;
}
.MonCarte{
    font-family: 'OpenSans-Regular';
    font-size: 14px;
    line-height: 2;
    color: #668da7;
}
.contentElement{
    padding-right: 10px;
}
.contentLogo{
    padding: 15px 35px 20px 15px;
    border-radius: 5px;
    width: 100%;
    border: solid 1px #acbfcc;
    margin-top: 10px;
    margin-bottom: 28px;
}
.blockLogo{
    width: 90px;
    height: 90px;
    border-radius: 5px;
    background-color: #f4f7fa;
    display: flex;
    align-items: center;
}
.blockLogo img{
    margin: auto !important;
}
.espaClient{
    font-family: 'OpenSans-Regular';
    font-size: 16px;
    font-weight: 600;
    color: #005b81;
}
.meilleureExperience{
    font-size: 18px;
    color: #668da7;
    margin-bottom: 30px;
}
.bourse{
    font-style: italic;
}
.btnModif{
    border-radius: 5px !important;
    border: 1px solid  #668da7 !important;
    background-color: #ffffff;
    font-family: 'OpenSans-Regular';
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1daaf1 !important;
    padding: 10px 20px;
    margin-right: 20px;
}
.ellipse-6 {
    width: 40px;
    height: 40px;
    background-color: #f3b009;
    border-right: 1px solid #f3b009;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#ellipse-7 {
    background-color: #00dd87;
    border-right: 1px solid #00dd87;
}
.avantage{
    font-family: 'OpenSans-Regular';
    font-size: 16px;
    font-weight: 600;
    color: #d39700;
    padding-top: 7px;
    padding-left: 10px;
    margin-bottom: 27px;

}
.dispa{
    display: flex;
}
.serve{
    font-family: 'OpenSans-Regular';
    font-size: 16px;
    color: #202f5e;
    padding-right: 10px;
}
.pays{
    font-weight: 600;
    color: #668da7;
}
#avantage1{
    color: #00dd87;
}
.parte{
    font-family: 'OpenSans-Regular';
    font-size: 18px;
    color: #202f5e;
}
.garenti{
    font-family: 'OpenSans-Regular';
    font-size: 16px;
    font-weight: 300;
    font-style: italic;
    line-height: 1.56;
    color: #005b81;
}
.wordd{
    opacity: 0.6;
}
.contentElement{
    max-height: 90vh;
}
.oneBlock{
    border-top: solid 2px #acbfcc;
    padding-top: 27px;
    margin-top: 5px;
}
.versement{
    font-family: 'OpenSans-Regular';
    font-size: 34px;
    color: #202f5e;
}
.numb{
    width: 40px;
    height: 40px;
    border: solid 1px #668da791;
    background-color: #fff;
    border-radius: 100%;
    font-family: 'OpenSans-Regular';
    font-size: 24px;
    color: #668da791;
    text-align: center;
    display: grid;
    align-items: center;
    margin-bottom: 13px;
}
.numbActive{
    border: solid 1px #1daaf1;
    background-color: #1daaf1;
    color: #ffffff;
}
.depo{
    font-family: 'OpenSans-Regular';
    font-size: 16px;
    color: #668da791;

}
.depoActive{
    color: #1daaf1;
}
.borde{
    border-top: 2px solid #d0d7dc;
    position: relative;
    top: 20px;
    min-width: 130px;
    margin-left: -6px;
}
.parcourElement{
    display: inline-block;
}
.elementCente{
    margin-bottom: 8px;
}
.depot{
    font-family: 'OpenSans-Regular';
    font-size: 16px;
    margin-bottom: 15px;
    color: #202f5e;
}
.me{
    color: #1daaf1;

}
.compte{
    color: #668da7;
}
.btntoggleModif{
    border-radius: 30px;
    border: solid 1px #ffffff;
    background-color: #00dd87;
    padding: 4px !important;
}
.modifBtn{
    font-family: 'OpenSans-Regular';
    font-size: 16px !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.btn-toggle .active {
    border-color: #ffffff !important;
    border-radius: 30px;
    background-color: #ffffff !important;
    color: #005b81 !important;
    font-size: 16px !important;
}
.btn-toggle .autre, .active {
    border-radius: 30px !important;
    font-size: 16px !important;
}
.bordeElement{
    border-top: 1px solid #d0d7dc;
    border-bottom: 1px solid #d0d7dc;
    padding-top: 25px;
    padding-bottom: 30px;
    margin-bottom: 20px;
}


.numCompte{
    font-family: 'OpenSans-Regular';
    font-size: 16px;
    font-weight: 600;
    color: #202f5e;
}
.formModif{
    border-radius: 5px !important;
    border: solid 1px #668da7 !important;
    background-color: #ffffff !important;
    display: flex !important;
    flex-wrap: nowrap !important;
}
.cfa{
    color: #668da7;
}
.btn-subModif{
    width: 230px;
    height: 50px;
    border-radius: 5px;
    border: 1px solid #acbfcc !important;
    background-color: #acbfcc !important;
    color: #fff !important;
}
.elementBtn{
    margin-top: 45px;
    margin-bottom: 15px;
}
.transaction{
    font-family: 'OpenSans-Regular';
    font-size: 13px;
    color: #668da7;
}
.oblig{
    font-family: 'OpenSans-Regular';
    font-size: 16px;
    color: #1daaf1;
}
.toggle-color{
    background-color: #f3b009;
}
.bourseElement{
    font-family: 'OpenSans-Regular';
    font-size: 10px;
    color: #668da7;
    position: relative;
    bottom: -10px;
    float: right;
    left: 4px;
}
.clientIden{
    font-family: 'OpenSans-Regular';
    font-size: 13px;
    color: #005b81;
}
.freePoint{
    display: flex;
    align-items: center;
    padding-right: 20px;
}
.point{
    width: 5px;
    height: 5px;
    background-color: #acbfcc;
    border: 1px solid #acbfcc;
    border-radius: 100%;
    margin-left: 10px;
    margin-top: -28px;
}
.nom{
    font-family: 'OpenSans-Regular';
    font-size: 16px;
    font-weight: 600;
    color: #005b81;
    margin-bottom: 6px;
    padding-left: 15px;
}
.compteInvesti{
    font-family: 'OpenSans-Regular';
    font-size: 16px;
    color: #668da7;
    padding-left: 15px;
}
.numCompte{
    font-family: 'OpenSans-Regular';
    font-size: 16px;
    color: #005b81;
    margin-bottom: 3px !important;
    padding-bottom: 10px;
}
.effecte{
    font-family: 'OpenSans-Regular';
    font-size: 16px;
    color: #202f5e;
    border-bottom: 1px solid #d0d7dc;
    padding-bottom: 15px;
    margin-top: -5px;
}
.me{
    font-family: 'OpenSans-Regular';
    font-size: 16px;

}
.souhait{
    font-family: 'OpenSans-Regular';
    font-size: 16px;
    font-weight: 600;
    color: #202f5e;
}
.modifColor{
    font-size: 16px;
    background: white !important;
    font-family: 'OpenSans-Regular' !important;
    color: #668da7 !important;
}
.blockPayement{
    background: #ffffff;
    border: solid 1px #668da7;
    border-radius: 5px !important;
}
.dispaJus{
    display: flex;
    justify-content: space-between;
}
.total{
    font-family: 'OpenSans-Regular';
    font-size: 18px;
    font-weight: 600;
    color: #202f5e;
}
.blockPayement{
    margin-top: 30px;
}
.montant{
    font-size: 22px;
    font-weight: 600;
    color: #005b81;
}
.cfa2{
    font-family: 'OpenSans-Regular';
    font-size: 14px;
    color: #668da7;
}
.blockTotal{
    padding: 17px 22px 0px;
}
.blockMontant{
    padding: 12px 22px;
    border-top: 1px solid #acbfcc;
    border-bottom: 1px solid #acbfcc;
    background: #fafafa;
}
.montantDepot{
    font-family: 'OpenSans-Regular';
    font-size: 16px;
    color: #668da7;
    margin-bottom: 0px;
}
.numbdepot{
    font-family: 'OpenSans-Regular';
    font-size: 18px;
    color: #005b81;
    margin-bottom: 0;
}
.franc{
    font-family: 'OpenSans-Regular';
    font-size: 14px;
    color: #1daaf1;
}
.descativeNumb{
    border: solid 1px #00dd87;
    background-color: #00dd87;
    color: #ffffff;
}
.descativedepot{
    color: #00dd87;
}
.elementPadding{
    max-height: 100vh;
    overflow: scroll;
}
.contentFirst{
    padding-left: 16%;
    padding-right: 18%;
}
.paddingSpace{
    margin-bottom: 100px;
}
.cgbourse{
    font-family: 'OpenSans-Bold';
    position: absolute;
    left: 30px;
    top: 30px;
    width: 50%;
}
.carousel-indicators li{
    width: 6px !important;
    height: 6px !important;
    border-radius: 100% !important;
}
.carousel-indicators {

    bottom: 40px !important;
     left: unset !important;
}
.conomi{
    font-size: 20px;
    font-style: italic;
    color: #ffffff;
    font-family: 'TSerif-Caption';
}
.helene{
    font-size: 18px;
    color: #ffffff;
}
.ensembleCo{
    padding-left: 20px;
    padding-right: 20px;
    position: absolute;
    bottom: 0;
}
.modal {
    position: absolute;
    top: 45% !important;
    left: 7% !important;
}
.confe {
    font-family: 'OpenSans-Regular';
    font-size: 17px;
    color: #202f5e;
    font-weight: 600;
}
.confe span {
    color: #1daaf1;
    margin-left: 8px;
}
.code {
    font-family: 'OpenSans-Regular';
    font-size: 16px;
    color: #005b81;
}
.codeNumb{
    font-weight: 600;
}
.Procdure {
    font-family: 'OpenSans-Regular';
    font-size: 12px;
    color: #668da7;
}
.annule{
    font-family: 'OpenSans-Regular';
    font-size: 14px !important;
    font-weight: bold !important;
    color: #1daaf1 !important;
}
.modal-header {
    border-bottom: unset !important;
}
.modal-body{
    padding-left: 65px !important;
    padding-right: 65px !important;
}
.proceBlock{
    display: block;
    position: relative;
    bottom: 0;
}
.modal-content{
    height: 290px !important;
}
.confirme{
    font-family: 'OpenSans-Regular';
    font-size: 16px;
    font-weight: 600;
    color: #00dd87;
}
.annuleCroix{
    right: 10px;
    border: unset;
    position: absolute;
    color: #668da7;
    top: 5px;
    font-size: 25px !important;
    opacity: 0.6;
}
.circle {
    border-radius: 100%;
    box-shadow: none;
    border: 2px solid #00dd87;

}
.date{
    font-family: 'OpenSans-Regular';
    font-size: 16px;
    color: #668da7;
}
.avenue{
    font-family: 'OpenSans-Regular';
    font-size: 15px;
    color: #668da7;
    margin-bottom: 50px;
    max-width: 150px;

}
.arti{
    font-family: 'OpenSans-Regular';
    font-size: 16px;
    color: #202f5e;
    margin-bottom: 7px;
    font-weight: 600;
}
.VerseCompte{
    background-color: #ebebeb;
    padding: 30px 0px 15px 32px;
    margin-right: -20px;
    margin-left: -32px;
}
.blockPayeLogo{
    padding: 30px 0px 28px 21px;
    margin-right: -32px;
    margin-left: -10px;
    background-color: #f4f7fa;
    position: relative;
    top: 21px;
}
.omNumb{
    position: relative;
    margin-top: 130px;
    margin-bottom: 13px;
    max-width: 100%;
}
#serigne{
    margin-bottom: 15px;
}
#two{
    position: relative;
    z-index: 111;
}
#cheikh{
   max-width: unset;
}
#compteVerse{
    margin-bottom: 12px;
    padding-top: 11px;
}
#depotTwo{
    right: 16px;
    position: relative;
}
#depoTree{
    right: 26px;
    position: relative;
}
.payeDaye{
    font-family: 'OpenSans-Regular';
    font-size: 18px;
    font-weight: 600;
    color: #202f5e;
    margin-bottom: 1px;
    margin-top: 7px;
}
.inputCre{
    border-bottom: 1px solid #acbfcc;
    margin: -32px;
    padding: 43px 30px 10px 32px;
}
.fixeOm{
    font-size: 14px;
    color: #668da7;
}
.montantPaye{
    font-size: 20px;
    font-weight: 600;
    opacity: 0.8;
    color: #005b81;
    margin-bottom: 1px;
    margin-top: 7px;
}
.cardTer{
    border: 1px solid #acbfcc !important;
    margin-bottom: 60px;
}
.cardTer .card-header {
    border-bottom: 1px solid #acbfcc;
    background-color: #ffffff;
    padding: 25px 20px;
}
.btnwit{
    width: 48%;
}
.btnwit button{
    padding: 14px 0px;
    border-radius: 5px;
    width: 100%;
    font-weight: 600;
    background: transparent;
}
.btnTelecharge{
    border: solid 1px #668da7;
    color: #1daaf1;
}
.btnTermine{
    background-color: #1daaf1;
    border: solid 1px #1daaf1;
    color: #ffffff;
}
.marginElement{
    margin-bottom: 30px;
}
.glyphiconCercle {
    width: 65px;
    height: 65px;
    border: solid 1px #00dd87;
    margin-bottom: 15px;
}
.payments_child{
    display: contents !important;
}
.dd-options[aria-hidden="false"] {
    display: flex !important;
    flex-wrap: wrap !important;
}
.dd-click-off-close{
    width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding-bottom: 20px !important;
}
.demo-content{
    width: 100%;
}
.dd-option {
    display: block;
    width: 25% !important;
    text-align: center;
    margin-top: 20px;
}dd-open
 .dd-opene {
     display: flex !important;
     flex-wrap: wrap !important;
 }
.dd-option-image, .dd-selected-image {
    vertical-align: middle;
    float: unset !important;
    margin-right: 5px;

}
.mobileMoney {
    font-family: 'OpenSans-Regular';
    font-size: 14px;
    color: #668da7;
    width: 50%;
    padding-left: 20px;
    margin-top: 10px;
}
.transe{
    position: absolute;
    top: 47%;
    width: 100%;
}
.transe{
    position: absolute;
}
.MobCarte{
    position: absolute;
}
.dd-selected-description-truncated{
    padding-top: 0px !important;
}
.dd-open .dd-options{
    display: flex !important;
    flex-wrap: wrap !important;
}
.dd-selected{
    font-family: 'OpenSans-Regular';
    font-size: 16px;
    color: #668da7;
    background: #ffffffd6;
    border: none !important;
}
.input-group-prepend {
     margin-right: 0px !important;
}
.dd-selected:focus{
    outline: unset !important;
}
.waree{
    padding-bottom: 30px;
}
.worde{
    margin-top: 10px;
}
.btnMmodif{
    width: 198px;
    font-family: 'OpenSans-Regular';
    border-radius: 5px !important;
    background-color: #1daaf1 !important;
    font-size: 18px !important;
}
.divElement{
    margin-top: 40px;
}
.wordeLine{
    margin-top: 40px;
}
.bordeImg{
    border-radius: 100%;
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-color: white;
}
.wordVV{
    padding-top: 30px;
    text-align: center;
}
.wordVV img{
    width: 23%;
    margin-bottom: 10px;
}
.tell{
    padding-bottom: 15px;
}
.proceBlock {
    bottom: 15px;
}
.bourseBl{
    margin-bottom: 13px;
}
.mobile{
    display: none !important;
}
.imgLeft{
    width: 4%;
    position: absolute;
    top: 65px;
    left: 80px;
}
.TwoBlock{
    margin-top: 37px;
}
.elementTop{
    margin-top: 40px;
    margin-bottom: 30px;
}
.retourA{
    font-family: 'OpenSans-Regular';
    font-weight: 600;
    color: #668da7;
}
.flecheDroite{
    width: 16px;
    left: 6px;
    top: -1px;
    position: relative;
}
.form-group {
    margin-bottom: 30px !important;
}
.form1{
    margin-top: 28px;
}
.form-control{
    padding: 1.4rem 1.1rem !important;
    color: #668da7;
}
.form-control::placeholder{
    color: #668da7 !important;
}
.elementParcour{
    padding-bottom: 1px;
}
.bordeElement{
    margin-bottom: 10px;
}
.card-body {
    padding: 2rem !important;
}
.contentPay {
    position: absolute;
    top: 50%;
    left: 30%;
    display: flex;
}

.logoImage {
    background: white;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    text-align: center;
    padding-top: 3px;
    position: relative;
    top: 15px;
    left: -10px;
}
.bottomElement{
    margin-bottom: 8px;
}
.spaceElement {
    width: 30px;
}
.carousel-inner::after{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(255,255,255,0) 65%, rgba(0,0,0,1) 100%);
}
.btnwitt{
    padding: 14px 0px !important;
    border: 1px solid #1daaf1 !important;
    width: 48%;
    border-radius: 5px !important;
    background-color: #1daaf1 !important;
    color: #ffffff !important;
}
.termm{
    width: 48%;
    background-color: #1daaf1 !important;
}
.btnwitt a{

}
.elementImg{
    position: relative;
    top: 11px;
}
.retourA:focus{
    color: #1daaf1 !important;
}
.retourA:hover{
    color: #1daaf1 !important;
}