@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

#windowConnect {
    position: relative;
}

#windowCreneaux {
    position:relative;
    height:100%;
}

.iconeMediClic_ConnexionPage {
    position: absolute;
    width: 120px;
    height: 120px;
    top: -90px;
    left: -18px;
    transition: 0.25s;
}

    .iconeMediClic_ConnexionPage.invisible {
        transform:scale(0);
        transition:0.25s;
    }

.iconeMediClic_CreneauxPage {
    position:absolute;
    width: 120px;
    height: 120px;
    top: -90px;
    left: -18px;
    transition:0.25s;
}

    .iconeMediClic_CreneauxPage.invisible {
        transform:scale(0);
        transition:0.25s;
    }

.titleBienvenueMediClic_ConnexionPage {
    margin-left: 90px;
    position: relative;
    top: -15px;
    font-size:19px !important;
    text-align:left !important;
}

.titleBienvenueMediClic_CreneauxPage {
    margin-left: 90px;
    position: relative;
    top: -15px;
    font-size:19px !important;
    text-align:left !important;
}

.content_title_CreneauxConsultation_CreneauxPage {
    color:#4368F7;
    border-bottom:1px solid #999;
    text-align:center;
    padding-top: 15px;
    padding-bottom: 15px;
}

.content_title_CreneauxConsultation_ConnexionPage {
    color:#4368F7;
    border-bottom:1px solid #999;
    text-align:center;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-bottom:20px;
}

#content_selected_creneauxConsultation_ConnexionPage {
    font-weight:600;
    margin-top:10px;
}

#content_selected_creneauxConsultation_ConnexionPage .dateheure_creneauxconsultation_ConnexionPage{
    color:#4368F7;
}

#content_selected_creneauxConsultation_ConnexionPage .dateheure_creneauxconsultation_ConnexionPage .icone_creneauxConsultation_ConnexionPage{
    font-size:15px;
    cursor:pointer;
}

#content_selected_creneauxConsultation_ConnexionPage .lieu_creneauxconsultation_ConnexionPage{
    color:#4368F7;
}

#content_selected_creneauxConsultation_ConnexionPage .lieu_creneauxconsultation_ConnexionPage .icone_creneauxConsultation_ConnexionPage{
    font-size:16px;
}


#content_selected_creneauxConsultation_ConnexionPage .icone_creneauxConsultation_ConnexionPage {
    display:inline-block;
    color:#888;
    margin-left:10px;
}

.header_commune_CreneauxPage {
    text-align:left;
    width:98%;
    margin-left:auto;
    margin-right:auto;
    margin-top:20px;
}

    .header_commune_CreneauxPage:not(:first-of-type) {
        margin-top:40px;
    }

.content_content_commune_adresse_CreneauxPage {
    display:inline-block;
    width:90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.content_iconeMap_header_commune_CreneauxPage {
    display:none;
    float:right;
}

.content_commune_adresse_CreneauxPage {
    color: #000;
    font-weight: bold;
    border-radius: 4px;
    padding: 5px;
    font-size: 17px;
}

.content_jour_creneaux_commune_CreneauxPage {
    margin-bottom:10px;
}

.content_adresse_cabinet_CreneauxPage {
    color: #626262;
    font-weight:normal;
}

.title_jour_creneaux_commune_CreneauxPage {
    text-align:center;
    height:36px;
    color:#4368F7;
    background-color:#F2F2F2;
    line-height:40px;
    font-size:16px;
}

.corp_jour_creneaux_commune_CreneauxPage {
    display:grid;
    grid-template-columns: repeat(6, 1fr);
}

.un_creneaux_commune_CreneauxPage {
    display:inline-block;
    border:1px solid #F2F2F2;
    text-align:center;
    padding:7px;
    cursor:pointer;
    background-color:white;
    transition:0.25s;
    font-size:15px;
    font-weight:bold;
}

    .un_creneaux_commune_CreneauxPage:hover {
        background-color:#EEE;
    }

    .un_creneaux_commune_CreneauxPage.active {
        background-color: #CB297B;
        color: white;
    }

.btSuivant_CreneauxPage {
    width: 140px !important;
    height: 45px;
    line-height: 18px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px !important;
    box-shadow:0px 3px 9px -4.5px #212121;
}

.btGoToConnexion_CreneauxPage {
    color:#4368F7;
    padding-top:20px;
    border-top:1px solid #999;
    margin-top:30px;
    text-align:center;
    cursor:pointer;
    transition:0.25s;
}

    .btGoToConnexion_CreneauxPage:hover {
        color:#869fff;
    }

#content_nbCreneauxDispo_ConnexionPage {
    cursor: pointer;
    transition: 0.25s;
    margin-top: 8px;
    font-size: 19px;
    text-transform: uppercase;
    color: #970F52;
}

    #content_nbCreneauxDispo_ConnexionPage:hover {
        opacity:0.7;
    }

.content_num_creneauxDipo_ConnexionPage {
    border: 1px solid #970F52;
    border-radius:6px;
    padding: 5px 6px;
}

.bold { font-weight: 700; }

.medium, .split .right label { font-weight: 500; }

.regular { font-weight: 400; }

.italic { font-style: italic; }

.text-underline { text-decoration: underline; }

.blue { color: #4D73F8; }

.center { text-align: center; }

.btnSubmit {
    margin-top: 10px;
    color: white;
    background-color: #4368F7;/*background: linear-gradient(to bottom, #4368F7 0%, #3352C2 60%);*/ width: 100%;
    text-align: center;
    padding: 15px 0;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: 0px 5px 12px -6px black;
    border-radius: 5px;
    transition: 0.25s;
    font-size: 20px;
    outline:none;
}

    .btnSubmit:hover {
        background-color: #3352C2;
        /*box-shadow:0px 0px 10px black;*/
    }

    .btnSubmit:active { box-shadow: 0px 0px 2px black; }


body, html, img, a { margin: 0; padding: 0; border: none; text-decoration: none; }


html, body { height: 100%; }

body { font-family: Roboto, sans-serif; color: #626262; font-size: 16px; }

header { position: fixed; top: 0; left: 0; width: 100%; padding: 20px 30px; overflow: auto; z-index: 2; box-sizing: border-box; }
    header a:first-child { float: left; color: #626262; font-size: 22px; }
    header a:last-child { float: right; }

    header.fixed { background-color: #fff; -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.42); -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.42); box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.42); }




.split { height: 100%; display: flex; flex-direction: row; }
    .split .left { overflow: hidden; /*position: relative;*/ position: fixed; z-index: 0; height: 100%; flex: 1; max-height: 1025px; width:100%; }
        .split .left > img { height: 100%; }
        .split .left > div { color: #000092; bottom: 15px; left: 30px; line-height: 1; font-size: 28px; }
            .split .left > div span { font-size: 20px; }
            .split .left > div > p { margin-top: 0px; }
            .split .left > div > img { margin-bottom: 10px !important; }
    .split .right { margin: auto; padding: 0 20px; background-color: #FFF9; z-index: 1; width: 550px; max-width: 50%; border-radius: 5px; box-shadow: 0px 0px 10px -4px black; backdrop-filter:blur(10px); }
    .split .right.ecranConnexion { width: 650px; max-width:initial; }
    

.informationSOS { position: fixed !important; margin-bottom: 15px; color: #23429a !important; }
    .informationSOS p { text-align: center; font-size: 15px !important; }
    .informationSOS .iconeSOS2 { margin-bottom: 0px !important; }
#teldirect {margin-left:auto;margin-right:auto;text-align:center;font-size:20px; margin-bottom: 3px;cursor:pointer; }
    #teldirect a {color: #23429a; }
    #teldirect i {margin-right:2px; }

.grecaptcha-badge {
    bottom: 100px !important;
}

.divLostToken { text-align: center; cursor: pointer; color: #00a8ff; margin-bottom: 15px; }

.full-bg .split .left { flex: none; }

.lblErreur { display: none !important; }
.lblErreurActive { color: red !important; font-weight: bold !important; font-size: 15px !important; margin-top: -15px; }

.digitJeton { display: inline-block !important; width: calc(100% / 7) !important; height: 70px; text-align: center; margin-right: 2.5%; font-size: 30px !important; }

    .digitJeton:last-of-type { margin-right: 0; }


.split .right { padding-top: 10px; padding-bottom: 50px; }
    .split .right form, .split .right p, .split .right > div { padding: 0 10px; }
    .split .right h1 { font-size: 36px; color: #5E5E5E; text-align: center; }
    .split .right p { color: #626262; }
    .split .right .bold { font-size: 20px; }
    .split .right label { display: block; font-size: 12px; color: #929292; padding-bottom: 5px; }
    .split .right input { display: block; /*padding: 15px;*/ padding: 10px 15px; font-size: 20px; font-family: Roboto, sans-serif; border: 1px solid #626262; width: 100%; box-sizing: border-box; margin-bottom: 20px; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
    .split .right .forgotten { text-align: center; margin-top: 25px; }
        .split .right .forgotten a { color: #929292; text-decoration: underline; font-size: 12px; }


/* Validation du formulaire */
input:valid {
    @extend .glyphicon;
    @extend .glyphicon-ok;
    padding-left: 30px;
}

.errorPassword { margin-top: 15px; text-align: center; color: red !important; }

.ecranConnexion { display: none; }

.bonjour_ConnexionPage {
    font-weight:600;
    font-size:22px;
}

.soustitre_bonjour_ConnexionPage {
    margin-top:10px;
    margin-bottom:10px;
    font-size:18px;
}

.content_content_creneaux_commune_CreneauxPage {
    overflow-y: auto;
    height: 500px;
}

.informationSOS p span{
	color:#23429a ;
}


.cc_banner{
    font-size: 11px !important;
    margin-bottom: 25px !important;
}

#franceconnect_form {
    margin-top:20px;
    text-align:center;
}
    #franceconnect_form #btnFranceConnect {
        cursor:pointer; 
    }
    #franceconnect_form .franceconnect_info {
        font-weight:bold;
        font-size:15px;
    }
     #franceconnect_form .franceconnect_link {
        font-size:13px;
        margin-top:8px;
        text-decoration:none;
        cursor:pointer;
        color: #4368f7;
        width:200px;
        margin-left:auto;
        margin-right:auto;
    }
     #franceconnect_form .franceconnect_link:hover {
        text-decoration:underline;
    }
    .franceconnect_ou {
        font-size:20px;
        font-weight:bold;
        margin-top:15px;
        margin-bottom:15px;
        text-align:center;
        border-top: 1px solid #999;
        padding-top:10px !important;
    }

#localconnect_form {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

#localconnect_form #localconnect_dejainscrit {
    padding-left: 20px;
    padding-right: 15px;
    width:50%;
}

.separateur {
    margin-left: 15px;
    margin-right: 15px;
    width: 1px;
    background: #999;
    height: 200px;
    margin-top: 40px;
}

#localconnect_form #localconnect_premiereconnexion {
    text-align: center;
    padding-left: 15px;
    padding-right: 20px;
}

    #localconnect_form #localconnect_dejainscrit h2 {
        margin-top:0px;
    }

.input_login {
    border: 0px !important;
    background-color: #EEE;
    border-radius: 5px;
    font-size: 15px !important;
    padding: 7px 15px !important;
}

.validIdentifiants {
    width: 150px !important;
    height: 45px !important;
    line-height: 15px !important;
    font-size: 18px !important;
}

.titlePartConnect {
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    font-size:16px !important;
}

.goToCreationCompte {
    width: 185px !important;
    font-size: 18px !important;
    height: 50px !important;
    line-height: 20px !important;
}

#mdpOublier{
    color:#4368f7 !important;
}

#emailSendTo {
    font-weight: bold;
    font-size: 18px;
}






@media screen and (max-height: 800px) {
    .informationSOS { top: 109px; left: 46px; }
}

@media screen and (max-width: 1980px) {ri
    .full-bg .split .left { flex: 1; }
}

@media screen and (max-width: 1281px) {
    body { font-size: 14px; }

    header a:first-child { font-size: 20px; }

    .split .right { width: 450px; }
    .split .left > div { font-size: 26px; }
        .split .left > div span { font-size: 18px; }
    .split .full-bg .split .left { flex: none; }
}

@media screen and (max-width: 679px) {
    .cc_banner{
        font-size: 13px !important;
        margin-bottom: 40px !important;
    }
}

@media screen and (max-width: 960px) {
    .split .left { width: 50%; }
    .split .right { min-width: 0; width: 50%; padding: 0 20px; box-sizing: border-box; }
        .split .right.ecranConnexion {
            padding-top:10px;
            padding-bottom:20px;
        }
}

@media screen and (max-width: 800px) {

    header { background-color: white; }

    body, .split { height: auto; }

    .split { padding-top: 50px; padding-bottom: 170px;}
        .split .left { display: none; }
        .split .right { width: 100%; max-width: 100%; padding: 0 10px; box-sizing: border-box; box-shadow: none; background-color:transparent; }

        
    .iconeMediClic_ConnexionPage {
        display:none;
    }

    .iconeMediClic_CreneauxPage {
        display:none;
    }

    .right > div.forgotten { padding-bottom: 10px; }

    .imgBackground {
        filter:blur(17px);
    }

    .split .right input {
        background-color: #FFFB;
        border: 0px;
        border-radius: 7px;
        color:#626262;
        box-shadow: 0px 3px 15px -11px black;
        outline: none;
    }

    .split .right label {
        color:#444;
    }

    .titleBienvenueMediClic_ConnexionPage {
        display:none;
    }

    .contentMessageToken {
        background-color: #FFFB;
        color: #444;
        padding: 18px 0px;
        border-radius: 12px;
    }

        .contentMessageToken div {
            color:#444 !important;
        }

    .bold {
        color: #444;
    }

    .split .right p {
        color:#444;
    }

    #mdpOublier {
        color:#4368f7 !important;
    }

    .labelBackgroundForMobileScreen {
        background-color: white;
        padding: 6px 15px !important;
        display: inline-block;
        border-radius: 7px;
    }
}

@media screen and (max-width: 1281px) {
    .right h1 { font-size: 34px; }
    .right .bold { font-size: 18px; }
    .right label { font-size: 10px; }
    .right input { padding: 12px; }
    .right #submit { font-size: 18px; margin-top: 15px; }
    .right .forgotten { margin-top: 20px; }
        .right .forgotten a { font-size: 10px; }
}

@media screen and (max-width: 960px) {
    .right h1 { font-size: 30px; }
    .right .bold { font-size: 16px; }
    .right label { font-size: 10px; }
    .right input { padding: 12px; }
    .right #submit { /*font-size: 16px;*/ margin-top: 15px; }
    .right .forgotten { margin-top: 20px; }
        .right .forgotten a { font-size: 10px; }
}

@media screen and (max-width: 615px) {
    #franceconnect_form {
        background-color: #FFFFFF77;
        border-radius: 15px;
        padding: 11px 20px;
    }
    #franceconnect_form .franceconnect_info {
        font-size:12px;
    }
    #btnFranceConnect {
        width:155px;
        height:40px;
    }
    .franceconnect_ou {
        font-size:15px;
        border-top:none;
    }
    #localconnect_form {
        flex-direction:column;
    }
    .separateur {
        display:none;
    }
    #localconnect_form #localconnect_dejainscrit {
        width:auto;
        background-color: #FFFFFF77;
        border-radius: 15px;
        padding: 11px 20px;
    }
    .titlePartConnect {
        text-align:left;
    }
    #localconnect_form #localconnect_premiereconnexion {
        margin-top:10px;
        background-color: #FFFFFF77;
        border-radius: 15px;
        padding: 11px 20px;
    }
    .franceconnect_ou {
        margin-top:5px;
        margin-bottom:5px;
    }
    .validIdentifiants {
        margin-top:0px !important;
        width: 130px !important;
        height: 35px !important;
        line-height: 5px !important;
        font-size: 15px !important;
    }
    .split .right .forgotten {
        margin-top: 10px;
    }
    #mdpOublier{
        color:#4368f7 !important;
    }
    #localconnect_dejainscrit label {
        padding-bottom:0px;
    }
    #localconnect_dejainscrit .input_login {
        margin-bottom:15px;
    }
    .goToCreationCompte {
        margin-top: 0px !important;
    }
}

@media screen and (max-width: 500px) {
    .titleBienvenueMediClic_ConnexionPage {
        display:none;
    }

    .titleBienvenueMediClic_CreneauxPage {
        display:none;
    }

    .content_title_CreneauxConsultation_ConnexionPage {
        margin-top:20px;
    }

    .content_title_CreneauxConsultation_CreneauxPage {
        margin-top:20px;
    }
}



@media screen and (max-width: 400px) {
    .corp_jour_creneaux_commune_CreneauxPage {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media screen and (max-width: 270px) {
    .corp_jour_creneaux_commune_CreneauxPage {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* -------- HEIGHT DIV FOR CRENEAUX DISPONIBLE ------------- */

@media screen and (max-width: 800px) {
    .content_content_creneaux_commune_CreneauxPage {
        height:auto;
        overflow-y:auto;
    }

    .btGoToConnexion_CreneauxPage {
        margin-bottom:60px;
    }
}

@media screen and (max-height: 950px) and (min-width: 800px) {
    .content_content_creneaux_commune_CreneauxPage {
        height: 400px;
    }
}

@media screen and (max-height: 850px) and (min-width: 800px) {
    .content_content_creneaux_commune_CreneauxPage {
        height: 300px;
    }
}

@media screen and (max-height: 750px) and (min-width: 800px) {
    .content_content_creneaux_commune_CreneauxPage {
        height: 200px;
    }
}

@media screen and (max-height: 650px) and (min-width: 800px) {
    .content_title_CreneauxConsultation_CreneauxPage {
        display:none;
    }
}