@charset "UTF-8";

html, body {
    color:#000000;
    font-family: "museo-sans", sans-serif;
    font-weight:300;
}

h1, h2 {
    font-weight:900;
}
h3, h4, h5, h6 {
    font-weight:300;
}


@media (max-width: 768px) {
    h1 {
        font-size: 1.75em;
    }
    h2 {
        font-size: 1.25em;
    }
    h3 {
        font-size: 1.05em;
    }
}

@media (min-width: 768px) {
    h1 {
        font-size: 2.25em;
    }
    h2 {
        font-size: 1.5em;
    }
    h3 {
        font-size: 1.35em;
    }
}

hr {
    border-top:1px solid #768297;
}

.footer {
    border-top:1px solid #768297;
    font-size:.85em;
}

#headerbar {
    background-color: #45c0ef;
    height:.9em;
}

.badge-langues {
  color: #fff;
  background-color: #45c0ef;

  padding: 0 1.5em .75em 1.5em;

  font-size: 75%;

  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;

  border-radius:0;
  border-bottom-left-radius: .7rem;
  border-bottom-right-radius: .7rem;

  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.badge-langues a {
    color:white;
}

.badge-langues a.active {
    color:white;
    font-weight:700;
}

#banner {
    background: rgb(73,193,239);
    background: linear-gradient(0deg, rgba(73,193,239,1) 0%, rgba(43,109,143,1) 58%, rgba(26,47,81,1) 100%);
    color:white;
}

/* Forms */
#form h2{
    color:#1a2f51;
}
.formentions,
.mentionsvapsm {
    font-size:.85em;
}

.form-control{
    border-radius:0;
    border-color:#000000;
}

.error {
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #dc3545;
  font-family: "museo-sans", sans-serif;
  font-weight: 500;
}

.error a {
  color: #dc3545;
  text-decoration:underline;
}

.form-check-label,
label,
.mentionsvap {
    color:#1a2f51;
    font-weight:500;
}

.titrementions {
    color:#1a2f51;
    font-weight:900;
    font-size:1.1em;
}

.mentionsvapsm,
.mentionspharm {
    color:#1a2f51;
}
.example {
    font-weight: 300;
    /*font-style: italic;*/
    font-size: .9rem;
}

/* Modal */
.modal-content h3 {
    color:#1a2f51;
    font-weight:900;
}

/* Buttons */
.btn_blue {  

    width: 54px;  
    height: 54px; 

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 1rem;
    -webkit-appearance: none;

    color: white;

    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem; /* 125% */
    background-color:#43c8f4;
    border: 1px solid transparent;
    border-radius: 50%;
    text-decoration: none;

    transition: background-color 1s;
}  

.btn_blue:hover {
    background-color: #18365d;
}

.btn_blue_flc {  

    /*display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    */
    padding: 0.5rem 1.75rem;
    -webkit-appearance: none;

    color: white;

    font-size: 1.15rem;
    font-style: normal;
    font-family: "museo-sans", sans-serif;
    font-weight:700;
    line-height: 1.25rem; /* 125% */
    background-color:#43c8f4;
    border: 1px solid transparent;
    border-radius: 1rem;
    text-decoration: none;

    transition: background-color 1s;
}  

.btn_blue_flc:hover {
    background-color: #18365d;
    text-decoration: none;
    color: white;
}

.btn_gradient {
    background-color:#3386ac;
    background: linear-gradient(360deg, #3386ac, #30a6d7, rgba(68,190,236,1));
    /*display: flex;*/
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: .9rem 2rem;
    -webkit-appearance: none;
    
    font-family: "museo-sans", sans-serif;
    font-weight:700;
    color: white;
    font-size: 1.15rem;
    font-style: normal;
    line-height: 1.5rem; /* 125% */
    
    border: none;
    border-radius: .5rem;
    text-decoration: none;

    transition: background-color 1s;
}

.btn_gradient.btn_sm {
    padding: .5rem 1rem;
    font-size: 1rem;
}

.btn_gradient:hover {
    background: linear-gradient(360deg, #3386ac, #18365d, rgba(68,190,236,1));
    color: white;
}

.btn_white {  

        padding: .5rem 1rem;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    -webkit-appearance: none;

    color: white;

    font-size: 1rem;
     font-family: "museo-sans", sans-serif;
    font-style: normal;
       font-weight:700;
    line-height: 1.5rem; /* 125% */
    background-color:#18365d;
    border: 2px solid #18365d;
    border-radius: .5rem;
    text-decoration: none;

    transition: background-color 1s;
}  

.btn_white:hover {
    background-color: white;
    color:#18365d;
}

/* OTP */
.otp-form .otp-field {
	display: inline-block;
	width: auto;
	height: 4rem;
	font-size: 2rem;
	line-height: 4rem;
	text-align: center;
	border: 1px solid #7f7f7f;
	outline: none;
    padding:0;
    max-width:90%;
    margin:0 auto;
    letter-spacing: .5rem;
}

.otp-form .otp-field:focus {
	border-color: #18365d;
}

/* Virtual Card*/

#card .header {
    border-top-left-radius: .75em;
    border-top-right-radius:.75em;
    background-color:#44bfed;
    color:white;
    font-family: "museo-sans", sans-serif;
    font-weight:700;
    padding:.5em 0;
    font-size:1.25em;
}
#card .body {
    border-bottom-left-radius: .75em;
    border-bottom-right-radius: .75em;
    background-color:#defbff;
    font-family: "museo-sans", sans-serif;
    font-weight:300;
}

#card .entete {
    font-family: "museo-sans", sans-serif;
    font-weight:700;
}