body {
    margin: 0;
    padding: 0;
    width: 100% !important;
    height: 100vh;
}

header {
    width: 100% !important;
    padding: 20px;
    height: 150px;
    background-image: url("../img/ISF.png");
    background-size: cover;
    background-position: center;
    margin: 0 0 20px;
    text-align: center;
}
header > img {
    border-radius: 50%;
    border: double 2px gainsboro;
}

header > label {
    font-family: "Montserrat";
    font-weight: bold;
    color: dimgray;
    text-align: center;
    display: block;
    font-size: 3em;
    margin: 10px 0 0;
}

.justifie{
    text-align: justify;
}

.form-select{
    font-size: 12px !important;
    margin: -10px 0 0;
    border-radius: 3px !important;
}

input {
    font-weight: unset !important;
    font-size: 12px !important;
}

.mt5 { /* Margin-top -5px*/
    margin-top: -5px ;
}
.mt10 { /* Margin-top -10px*/
    margin-top: -10px ;
}

.form-select:focus, input:focus{
    border: solid 1px transparent !important;
    background-color: #f1f1f1 !important;
}

.form-select:first-of-type {
    margin-top: -5px;
}

.erreur {
    background-color: red !important;
    animation: cligner 1s infinite;
}
@keyframes cligner {
    0% { opacity: 100%; }
    50% { opacity: 50%; }
    100% { opacity: 100%; }
}





/* CSS qui était intéger au fichier HTML de base */

::-webkit-scrollbar {
     width: 8px;
 }
/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
} @import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');
*{margin: 0;padding: 0;box-sizing: border-box;list-style: none;font-family: 'Montserrat', sans-serif}body{padding: 5px}p{margin: 0%}.container{max-width: 900px;margin: 20px auto;overflow: hidden}.box-1{max-width: 450px;padding: 10px 40px;user-select: none}.box-1 img.pic{width: 20px;height: 20px;object-fit: cover}.box-1 img.mobile-pic{width: 100%;height: 200px;object-fit: cover}.box-1 .name{font-size: 11px;font-weight: 600}.dis{font-size: 12px;font-weight: 500}.box-2{max-width: 450px;padding: 10px 40px}.box-2 .box-inner-2 input.form-control{font-size: 12px;font-weight: 600}.box-2 .box-inner-2 .inputWithIcon{position: relative}.box-2 .box-inner-2 .inputWithIcon span{position: absolute;left: 15px;top: 8px}.box-2 .box-inner-2 .inputWithcheck{position: relative}.box-2 .box-inner-2 .inputWithcheck span{position: absolute;width: 20px;height: 20px;border-radius: 50%;background-color: green;font-size: 12px;color: white;display: flex;justify-content: center;align-items: center;right: 15px;top: 6px}.form-control:focus, .form-select:focus{box-shadow: none;outline: none;border: 1px solid #7700ff}.border:focus-within{border: 1px solid #7700ff !important}.box-2 .card-atm .form-control{border: none;box-shadow: none}.form-select{border-radius: 0;border-top-left-radius: 10px;border-top-right-radius: 10px}.address .form-control.zip{border-radius: 0;border-bottom-left-radius: 10px}.address .form-control.state{border-radius: 0;border-bottom-right-radius: 10px}.box-2 .box-inner-2 .btn.btn-outline-primary{width: 120px;padding: 10px;font-size: 11px;padding: 0% !important;display: flex;align-items: center;border: none;border-radius: 0;background-color: whitesmoke;color: black;font-weight: 600}.box-2 .box-inner-2 .btn.btn-primary{background-color: #7700ff;color: whitesmoke;font-size: 14px;display: flex;align-items: center;font-weight: 600;justify-content: center;border: none;padding: 10px}.box-2 .box-inner-2 .btn.btn-primary:hover{background-color: #7a34ca}.box-2 .box-inner-2 .btn.btn-primary .fas{font-size: 13px !important;color: whitesmoke}.carousel-indicators [data-bs-target]{width: 10px;height: 10px;border-radius: 50%}.carousel-inner{width: 100%;height: 200px}.carousel-item img{object-fit: cover;height: 100%}.carousel-control-prev{transform: translateX(-50%);opacity: 1}.carousel-control-prev:hover .fas.fa-arrow-left{transform: translateX(-5px)}.carousel-control-next{transform: translateX(50%);opacity: 1}.carousel-control-next:hover .fas.fa-arrow-right{transform: translateX(5px)}.fas.fa-arrow-left, .fas.fa-arrow-right{font-size: 0.8rem;transition: all .2s ease}.icon{width: 30px;height: 30px;background-color: #f8f9fa;color: black;display: flex;align-items: center;justify-content: center;border-radius: 50%;transform-origin: center;opacity: 1}.fas.fa-times{color: red}.fas, .fab{color: #6d6c6d}::placeholder{font-size: 12px}.couponCode{text-transform: uppercase;font-size: 0.7rem}#code{pointer-events: none;font-weight: 600}.close{cursor: pointer}.info{transform: translateX(-500px);animation: moving 1.5s;animation-fill-mode: forwards}.updates{transform: translateX(-500px);animation: moving 1.7s;animation-fill-mode: forwards}.different{transform: translateX(-500px);animation: moving 1.9s;animation-fill-mode: forwards}.black{transform: translateX(-500px);animation: moving 2.1s;animation-fill-mode: forwards}.white{transform: translateX(-500px);animation: moving 2.3s;animation-fill-mode: forwards}.pastel{transform: translateX(-500px);animation: moving 2.5s;animation-fill-mode: forwards}.footer{transform: translateX(-500px);animation: moving 2.6s;animation-fill-mode: forwards}@keyframes moving{0%{opacity: 0;transform: translateX(-500px)}100%{opacity: 1;transform: translateX(0px)}}.box-2{transform: translateY(-500px);animation: img-top 2.5s;animation-fill-mode: forwards}.user{transform: translateY(-500px);animation: img-top 2.5s;animation-fill-mode: forwards}.userdetails{transform: translateY(-500px);animation: img-top 2.0s;animation-fill-mode: forwards}.imgdetails{transform: translateY(-500px);animation: img-top 1.5s;animation-fill-mode: forwards}@keyframes img-top{0%{opacity: 0;transform: translateY(-500px)}100%{opacity: 1;transform: translateY(0px)}}@media (max-width:768px){.container{max-width: 700px;margin: 10px auto}.box-1, .box-2{max-width: 600px;padding: 20px 90px;margin: 20px auto}.box-2{transform: translateX(-500px);animation: box-side 2.6s;animation-fill-mode: forwards}@keyframes box-side{0%{opacity: 0;transform: translateX(-500px)}100%{opacity: 1;transform: translateX(0px)}}}@media (max-width:426px){.box-1, .box-2{max-width: 400px;padding: 20px 10px}::placeholder{font-size: 9px}}