@font-face {
    font-family: 'SanaSans';
    src: url("./fonts/SanaSansAlt-Regular.woff") format("woff"), url("./fonts/SanaSansAlt-Regular.otf") format("opentype");

}
body, html {
font-family: 'SanaSans'!important;
}
/*GENERIQUE*/
.color-ambiance-1 {color: #428bca!important;}
.color-ambiance-2 {color: #231f20!important;}

.landing .extranet-form .form {width: 60%!important;margin-bottom: 2rem!important;  border-radius: 4px!important; box-shadow: 0 0 20px 0 rgba(43,51,54,0.15);}
.landing .bg-landing-right .link-return {width: 60%!important; color: #ffffff!important;}
.landing footer .link {color: #ffffff!important;}
.link {color: #428bca; font-size: 0.7rem;}
.link:hover {color: #2a6496; text-decoration:none;}
a:hover {text-decoration:none!important;}
label{margin-bottom:0!important;}
.landing .extranet-form .form .form-group {position: relative; min-height: 4.2rem;}
.mb-5{margin-bottom:0rem!important;}
.link-landing a:hover {color: #fff;}
.img-fluid.cursor-pointer:hover {opacity: 0.8;}
.landing .bg-landing-right .content-choice {display: flex; margin-top: 15vh; align-items: center; height: 70vh; flex-wrap: wrap;}
.img-fluid{max-width:4.5rem;}
footer .menu-langue option {color: #231f20!important;}
.cnil.mb-4 {color: #ffffff!important;}
.btn{border-radius:25px!important; padding: .375rem 1.25rem!important;
}
button.btn.btn-outline-secondary {
    border-radius: inherit!important;
    padding: 0.375rem 0.750rem!important;}
app-widget-dashboard-link .cursor-pointer  {
    float: left;
    padding: 0 1.5rem!important;
}
app-widget-dashboard-link .cursor-pointer .ml-2{
    float: none!important;
}
.cursor-pointer{text-align: center!important;}

@media (min-width: 481px) and (max-width: 767px){
    app-widget-dashboard-link .cursor-pointer {
    padding: 0rem 0rem!important;}
    app-widget-dashboard-link .cursor-pointer .ml-2{
        float:right!important;
    }
    .cursor-pointer{text-align: left!important;}
}

/*lANDING*/
.color-button-landing {background-color: #ffc905; color: #ffffff;}
.color-button-landing:hover {background-color: #b0000b; color: #cec8c8!important;transition:0.8s;}
.color-text-landing {color: #000000}
.bg-landing-left {background-image: url("img/logo_laposte.png");background-size: 75% auto;background-color: white}
.bg-landing-right {background-image: url("img/background_laposte.jpg"); background-position: unset!important;}
/*.bg-opacity {background: repeating-linear-gradient(-45deg, rgba(35,31,32,0.7), rgba(35,31,32,0.75) 5px, rgba(35,31,32,0.6) 5px, rgba(35,31,32,0.55) 10px);}*/
.border-color-landing {border-left:6px solid  #ffc905;}
.landing .bg-landing-right .card-landing .card-title span {color: #20458f;}
.landing .bg-landing-right .card-landing {
    border-radius: 4px!important; box-shadow: 0 0 20px 0 rgba(43,51,54,0.15);
}


/*ESPACE CLIENT*/
.espace-client .header .logo {
    background-image: url("img/logo-ec.png");
    /*background-size: 40% auto;*/
    margin-left: 0;
}
.espace-client .welcome-block {
    background-color: rgba(97, 183, 217, 0.15);
    color: #20458f;
}
.espace-client .welcome-block .picture {
    background: url("img/welcome-block-background.jpg") 0 0 no-repeat;
    width: 481px;
    background-size: contain;
    border-radius: 0.25rem;
}
.espace-client .welcome-block .text ul {
    color: #231f20;
    padding-left: 9%;
}
.espace-client .welcome-block .text ul li:before {
    content: "•";
    vertical-align: middle;
    font-size: 2rem;
    color: #231f20;
    margin-right: 0.5rem;
}
.menu-content .menu .nav li a {
    border-right: 4px solid #fff;
}
.menu-content .menu .nav li a.active {
    color: #20458f;
    border-right: 4px solid #20458f;
}

.menu-content-horizontal .menu-horizontal .nav li a {
    border-top: 4px solid #fff;
}
.menu-content-horizontal .menu-horizontal .nav li a.active {
    color: #20458f;
    border-top: 4px solid #20458f;
}

.logo-user {
    color: #20458f!important;
    border: 2px solid #20458f!important;
}
.logo-user:hover {
    background-color: #20458f!important;
    color: #ffffff!important;
}

.light.solde-du {
    border:1px solid #20458f!important;
}
.light.solde-du .card-header {
    position: relative;
    background-color:#20458f;
    border-bottom: none;
}
.light.solde-du .card-header .solde{
    color:#ffffff;
}
.light.solde-du .card-header .text{
    color:#ffffff;
    font-size: 1rem;
    margin-top: 1.2rem;
}
.light.solde-du .card-header:before {
    content: "\f24e";
    position: absolute;
    font-family:"Font Awesome 5 Free";
    color:#ffffff;
    font-weight: 900;
    font-size: 60px;
    opacity: 0.5;
    left: 10px;
    top:-2px;
}
.light.solde-du .card-footer {
    border-top: none;
    font-size: 0.8rem;
    cursor: pointer;
    color: #20458f;
}

.welcome .welcome-header {
    background: url("img/welcome-block-background_large.jpg") center top no-repeat;
    background-size: cover;
}

.welcome .welcome-footer {
    color: #20458f!important;
}

/*FORMULAIRE*/
.color-form {background-color: rgba(255,255,255,0.85); color:#20458f;}
.color-button-form {background-color:#ffc905; color: #ffffff;transition:0.8s;}
.color-button-form:hover {background-color: #b0000b; color: #cec8c8;}
.color-input-form {border-bottom: 1px dotted #91a0ad!important; color:#91a0ad!important;}

/*LINK*/
.link {color: #428bca; font-size: 0.8rem;}
.link:hover {color: #2a6496;}
.link-return:hover {color: #ffffff!important;
    -webkit-animation: retour 1s ease;
    animation: retour 1s ease;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;}

/*Footer*/
footer .menu-langue {color:#231f20;}
footer .link {color: #fff; font-size: 0.6rem!important;}
footer .link:hover {color: #cec8c8!important;}

/*!* responsive *!*/
@media (min-width: 320px) and (max-width: 991.98px) {
    .color-text-landing {color: #000000;}
    .header-landing {background-image: url("img/logo-ec.png");}
    /*.landing .bg-landing-right .bg-opacity {background-color: rgba(255, 255, 255, 0.75);}*/
    .landing .bg-landing-right .card-landing .card-title span {color: #20458f;}
    footer .link {color:#ffffff;}
}
@media (max-width: 420px){
    .bg-landing-right {background-image: url("img/background_laposte_mobile.jpg");}
}
@media (max-width: 991.98px){
    .landing .bg-landing-right .extranet-form .form { width: 100%!important;}
    .img-fluid.cursor-pointer { filter: brightness(5000%);}
    footer .menu-langue { color: #ffffff;}
    .landing .bg-landing-right .header-landing {height: 89px;}
    /*.link {color: #ffffff!important;}*/
    .link:hover{color: #2a6496!important;}
    /*.color-ambiance-2 {color: #ffffff!important;}*/
    .landing .extranet-form .form .input-group-append .view-password {
        color: #ffffff;}
    .landing .extranet-form .form .form-group input {background-color: rgba(255, 255, 255, 0.85);
        padding-left: 0.7rem!important;}
    .landing .bg-landing-right .content-choice {
        margin-bottom: 0rem; }
    .landing .bg-landing-right .content-choice {display: flex; margin-top: 2vh; align-items: center; height: 100vh; flex-wrap: wrap;}
    .landing .bg-landing-right .link-landing {
        padding-left: 1.5rem!important;
        margin-top: 1.5rem!important;
    }
    footer{
        background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.6));
    }
    .landing .bg-landing-right .link-return {
        color: #000!important;
    }
    .landing .bg-landing-right .extranet-form .form .title {
        text-align: center;
    }
    .landing .bg-landing-right .extranet-form .form {
        background-color: rgba(255, 255, 255, 0.85)!important;
        margin-top: 4.5rem;
    }
}

@media (max-device-width: 1024px) and (min-device-width: 768px){
    .landing .bg-landing-right .extranet-form .form {width: 75%;}
}

@media (max-width: 575.98px){
    footer .img-fluid {max-width: 3.8rem!important;}
    .welcome .welcome-header {
        background: url("img/welcome-block-background_small.jpg") center no-repeat;
        background-size: cover;
    }
}
@media (max-width: 767.98px){
    footer .img-fluid {max-width: 4rem!important;}
}
@media (max-width: 991.98px){
    footer .img-fluid {max-width: 4.5rem!important;}
}
@media (max-width: 812px) and (orientation: landscape){
    .landing .bg-landing-right .content-choice {height: auto;}
}

@-webkit-keyframes retour
{
    15%
    {
        -webkit-transform: translateX(-6px);
        transform: translateX(-6px);
    }
    30%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    50%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    65%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    80%
    {
        -webkit-transform: translateX(1px);
        transform: translateX(1px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes suivant
{
    15%
    {
        -webkit-transform: translateX(-6px);
        transform: translateX(-6px);
    }
    30%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    50%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    65%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    80%
    {
        -webkit-transform: translateX(1px);
        transform: translateX(1px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

/*couleur
red: #ffc905
green: #20458f
 */