/**************************************************************************************************************************/
/*                                                       FONTS                                                            */
/**************************************************************************************************************************/

/* AJOUT DE LA POLICE OPEN SANS COMME LE SITE Kelio */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format('woff2');
    unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFW50bbck.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/**************************************************************************************************************************/
/*                                                     CONTAINER                                                          */
/**************************************************************************************************************************/

.container{
    width:810px;
    margin:0 auto;
    border: 1px solid #f1f1f1;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
    padding: 20px;
    font-family:"Open Sans", serif;
}

/**************************************************************************************************************************/
/*                                                   TITRE / TEXTS                                                        */
/**************************************************************************************************************************/

h3
{
    font-size: 16px;
}

h4
{
    width:852px;
    margin-left: -21px;
    font-size: 20px;
    color: white;
    background-color: #23b8da;
    padding:16px 0;
    font-weight:lighter;
}

.font-bold
{
    font-weight: bold;
}

.fs-11px
{
    font-size: 11px;
}

.fs-13px
{
    font-size: 13px;
}

.fs-14px
{
    font-size: 14px;
}

.fs-15px
{
    font-size: 15px;
}

.text-center
{
    text-align: center;
}

.text-4d4d4d
{
    color: #4d4d4d
}

/**************************************************************************************************************************/
/*                                                        MARGIN                                                          */
/**************************************************************************************************************************/

.mt-0{margin-top:0!important}
.mt-1{margin-top:.25rem!important}
.mt-2{margin-top:.5rem!important}
.mt-3{margin-top:1rem!important}
.mt-4{margin-top:1.5rem!important}
.mt-5{margin-top:3rem!important}

.mb-0{margin-bottom:0!important}
.mb-1{margin-bottom:.25rem!important}
.mb-2{margin-bottom:.5rem!important}
.mb-3{margin-bottom:1rem!important}
.mb-4{margin-bottom:1.5rem!important}
.mb-5{margin-bottom:3rem!important}

.ms-3{margin-left:1rem!important}

.me-3{margin-right:1rem!important}

/**************************************************************************************************************************/
/*                                                        WIDTH                                                           */
/**************************************************************************************************************************/

.w-50 { width: 50%; }
.w-65 { width: 65%; }
.w-100 { width: 100%; }

/**************************************************************************************************************************/
/*                                                        TABLE                                                           */
/**************************************************************************************************************************/

table
{
    border: 0;
    /*width: 100%;*/
    max-width: 100%;
    margin-bottom: 20px;
    border-collapse:collapse;
    font-family: "Open Sans", serif;
}

th, td
{
    padding: 8px;
    line-height: 1.5rem;
    vertical-align: top;
}

th
{
    font-size: 15px;
    color: #FFFFFF;
    background-color: #4d4d4d;
    text-align: center;
}

td
{
    border-top: 1px solid #ddd;
    font-size: 14px;
}

/**************************************************************************************************************************/
/*                                                        FORM                                                            */
/**************************************************************************************************************************/

form
{
    width:100%;
    font-family: "Open Sans", serif;
}

.btn
{
    display: inline-block;
    border: 0;
    padding: 12px 18px;
    margin-bottom: 0;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
    color: #FFFFFF;
}

.btn-skyblue
{
    color: white;
    background-color: #23b8da;
}

.btn-skyblue:hover,
.btn-skyblue:focus
{
 background: #1b7c96 !important;
}

.form-control, .form-select
{
    display:block;
    width:100%;
    line-height:1.5;
    color:#212529;
    border:1px solid #ced4da;
    border-radius:.375rem;
    padding:.375rem .75rem;
    transition:border-color .20s ease-in-out,box-shadow .20s ease-in-out;
}

.form-control:focus
{
    border-color:#86b7fe;
    outline:0;
    box-shadow:0 0 0 .25rem rgba(13,110,253,.25);
}

.form-control::-moz-placeholder
{
    color:#6c757d;
    opacity:1;
}

.form-control::placeholder
{
    color:#6c757d;
    opacity:1;
}




/**************************************************************************************************************************/
/*                                                   RADIO BUTTONS                                                        */
/**************************************************************************************************************************/


/* GESTION DES BOUTONS RADIO */
[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label
{
    position: relative;
    padding-left: 28px;
    margin-left: 10px;
    margin-right: -15px;
    cursor: pointer;
    display: inline-block;
    color: #666;
}
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    border-radius: 100%;
    background: #fff;
}
[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
    content: '';
    width: 12px;
    height: 12px;
    background: #4d4d4d;
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
[type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
[type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

/**************************************************************************************************************************/
/*                                                       DISPLAY                                                          */
/**************************************************************************************************************************/

.d-none
{
    display: none;
}

.d-flex
{
    display: flex;
}

.flex-column
{
    flex-direction: column;
}

.justify-content-center
{
    justify-content: center;
}

/**************************************************************************************************************************/
/*                                                    BACKGROUND                                                          */
/**************************************************************************************************************************/


.bg-white
{
    background-color: #FFFFFF;
}

.bg-d5d8dc
{
    background-color: #d5d8dc;
}

.bg-f2f4f4
{
    background-color: #F2F4F4;
}


/**************************************************************************************************************************/
/*                                                       ALERT                                                             */
/**************************************************************************************************************************/

.alert
{
    border:1px solid transparent;
    position:relative;
    padding:1rem 1rem;
    margin-bottom:1rem;
    border-radius:0.375rem;
}

.alert-success
{
    color:#0f5132;
    background-color:#d1e7dd;
    border-color:#badbcc;
}

.alert-danger
{
    color:#842029;
    background-color:#f8d7da;
    border-color:#f5c2c7;
}

.alert-warning
{
    color:#664d03;
    background-color:#fff3cd;
    border-color:#ffecb5;
}



/**************************************************************************************************************************/
/*                                                       AVANT                                                          */
/**************************************************************************************************************************/


/*.style1 { font-family: "Open Sans", serif; font-size: 13px; }*/
/*.style2 { font-family: "Open Sans", serif; font-size: 11px; }*/
/*.texte {  font-family:"Open Sans", serif; font-size: 13px; color: #4d4d4d}*/
/*.CellTitre {  font-family: "Open Sans", serif; font-size: 15px; color: #FFFFFF; background-color: #4d4d4d; text-align: center;}*/
/*.CellPair {  font-family: "Open Sans", serif; font-size: 14px; color: #000069; background-color: #FFD584;  padding-left: 5px; }*/
/*.CellImpair {  font-family: "Open Sans", serif; font-size: 14px; color: #000069; background-color: #E5E6EA;  padding-left: 5px;  }*/

/*.LignePair {*/
/*    color: black;*/
/*    background:  #d5d8dc !important;*/
/*    font-family: "Open Sans", serif;*/
/*    font-size: 14px;*/
/*}*/

/*.LigneImpair {*/
/*    color: black;*/
/*    background: #F2F4F4 !important;*/
/*    font-family: "Open Sans", serif;*/
/*    font-size: 14px;*/
/*}*/