* {
    box-sizing: border-box;
}

.centre{
    text-align: center;
}

.br{
    border: 1px solid black;
}

.bh{
    border-top: 1px solid black;
}

.bd{
    border-right: 1px solid black;
}

.bb{
    border-bottom: 1px solid black;
}

.bg{
    border-left: 1px solid black;
}

.complet{
    width: 100%;
}

div#cadresuperieur div#soustitre div{
    
}

div#cadreinferieur div#soustitre div{
    
}

.flex-container {
    display: flex;
    flex-direction: row;
    font-size: 25px;
    text-align: left;
}

.flex-container-centre {
    display: flex;
    flex-direction: row;
    font-size: 18px;
}

.flex-mini-container {
    display: flex;
    flex-direction: row;
    font-size: 10px;
    text-align: center;
}

.flex-item{
    border-color: #98D1FA;
    padding-bottom: 8px;
    flex: 14.3%;
    font-size: 16px;
}

div#cadresuperieur, div#cadresupgauche, div#cadresupdroit, div#cadresupcentral, div#titre{
    border-color: #98D1FA;
}

.flex-mini-item{
    border-color: #98D1FA;
    flex: 14.3%;
}

.flex-elem-g{
/*    background-color: Khaki;   */
    padding: 10px;
    flex: 15%;
}

.flex-elem-c{
/*    background-color: Khaki;   */
    padding: 10px;
    flex: 70%;
}

.flex-elem-d{
/*    background-color: Khaki;   */
    padding: 10px;
    flex: 15%;
}

.flex-elem-gr{
/*    background-color: Khaki;   */
    padding: 10px;
    flex: 35%;
}

.flex-elem-cr{
/*    background-color: Khaki;   */
    flex: 30%;
    vertical-align: text-top;
}
div.flex-elem-cr a{
    margin-left: auto !important;
    margin-right: auto !important;
    width: 82px;
}

.flex-elem-dr{
/*    background-color: Khaki;   */
    padding: 10px;
    flex: 35%;
}
/*
.flex-item + .flex-item {
    border-left:none;
    border-top:none;
}
*/
.titre{
    background-color: Lavender;
    font-size: 30px;
    font-weight: bold;
    color: #337AB7;
    text-align: center;
}

.mini-titre{
    background-color: Lavender;
    font-size: 16px;
    font-weight: bold;
    color: #337AB7;
}
.iconemtm{
    height: 40px;
}
.untiers{
    width: 30%;
}
.deuxtiers{
    width: 69%;
}

/* valable pour tous les écrans inférieurs à 1050px */
@media all and (max-width: 1050px){
    .flex-container {
        flex-direction: column;
    }
}
/* valable pour tous les écrans inférieurs à 1050px */
@media all and (max-width: 1050px){
    body{
        font-size: 250%;
    }
    div#cadremdpoublie{
        font-size: 80%;
    }
    .flex-item {
        border-color: #98D1FA;
        padding-bottom: 8px;
        flex: 14.3%;
        font-size: 250%;
    }
    #cadrelibident {
        text-transform: uppercase !important;
        font-family: var;
        font-weight: bold;
        font-size: 42px;
        padding-left: 120px;
        color: #003962;
    }
    .btn{
        font-size: 100%!important;
    }
    .hg{
        font-size: 100%;
    }
    .titre, div.objetcentre label{
        font-size: 250%;
    }
    div#cadresupcentral h6{
        font-size: 100%;
        color:#007BFF;
    }
    div#cadresupcentral{
        text-align: center;
    }
    div.objetcentre {
        margin: 0 auto;
        width: 100%;
    }
    div#cadrerecherchecentral form input{
        width: 75%;
        display: inline-block;
/*        height: 75px;*/
        font-size: 100%;
    }
    .imagederoulemenu{
        height: 80px;
    }
    .btnevntcreer, .btnevntcreerdesactive, .btnevntdetails, .btnevntpiecejointe, .btnevntpiecejointedesactive, 
    .btnevntduplication, .btnevntduplicationdesactive, .btnevntmodification, .btnevntmodificationdesactive{
        background-size: 116px 116px;
        width: 120px;
        height: 120px;
    }

    form#auth input[type="text"], form#auth input[type="password"],
    form#motdepasse input[type="text"], form#motdepasse input[type="password"]{
        border: 1px solid #cbcfcf;
        -webkit-box-shadow:0px 2px 2px #7B7C7C;
        -moz-box-shadow:0px 2px 2px #7B7C7C;
        box-shadow:0px 2px 2px #7B7C7C;
    }
    form#affichageparmois select, form#affichageparannee select{
        height: 60px;
        font-size: 250%;
    }
    div#cadresuperieurdebienvenue {
        background-color: #525252;
        height: 100%;
        margin-bottom: -20px;
    }
    form#auth input, form#auth button,
    form#motdepasse input, form#motdepasse button{
        height: 125px;
    }
    /* On cache l'entête avec les deux calendriers */
    div#cadresuperieur{
        display: none;
    }
    /* On reaffiche l'entête caché des petits écrans */
    div#cadresuperieurcache{
        display: flex;
    }
    /* xxx */
    form#auth label, form#auth input, form#auth button,
    form#motdepasse label, form#motdepasse input, form#motdepasse button{
        display: flex;
        width: 100% !important;        
    }
    div#cadrelibident, button#logon_valider, div#cadremdpoublie{
        padding-left: 0px !important;
    }
    form#auth button, form#motdepasse button{
        display: inline-block;
        margin-top: 48px;
        margin-left: 0px !important;
    }
    /*
    nav#menusuperieur{
        font-size: 28px;
    }
    */
    div#navbarSupportedContent{
        padding: 50px 0;
    }
    nav#menusuperieur button{
        height: 180px;
        width: 212px;
    }
    .navbar-toggler-icon {
        width: 180px;
        height: 180px;
    }
    div#cadrelogon{
        margin: 280px 0 0 0;
        width: 100%;
    }
    div.cadreboutoninferieur{
        font-size: 100%;
    }
    td span.cadreboutonmajstatut{        
        font-weight: bold;
        font-size: 250%;
    }
    .modal-dialog {
        max-width: 96%;
        margin: 1.75rem auto;
    }
    div#piecejointe div input, div#piecejointe div label, div#cadresaisirunevenement div#cadeutilisateurspartagersuperieur input,
    div#cadresaisirunevenement div#cadeutilisateurspartagersuperieur label, div#cadresaisirunevenement div#cadeutilisateurspartagersuperieur select{
        width: 100%;
        height: 60px;
        font-size: 100%;
    }
    div#cadresaisirunevenement div#cadeutilisateurspartagersuperieur textarea{
	width: 100%;
        height: 120px;
        font-size: 100%;
    }
    .logosuperieur {
        height: 110px;
        margin-top: -2px;
    }
    div#cadreselectionnerevenementspartages label {
        color: #495057;
        width: 90%;
    }
    div#cadreselectionnerevenementspartages input[type="radio"]{
        -ms-transform: scale(3); /* IE 9 */
        -webkit-transform: scale(3); /* Chrome, Safari, Opera */
        transform: scale(3);
    }
    form#formchoixcalutil select {
        width: 100%;
    }
    .hgj {
        position: static;
        display: inline-block;
        vertical-align: top;
        margin-left: 0;
        margin-top: 0;
        border-right: 1px solid #FFFFFF;
        border-bottom: 1px solid #FFFFFF;
        font-size: 80px;
        padding: 2px 2px 0 2px;
        color: #FFFFFF;
        font-weight: bold;
    }
    div#recherche_evenement div{
        display: flex;
        flex-direction: row;
        font-size: 38px;
        text-align: left;
    }
    div#recherche_evenement div:first-child {
        width: 99%;
        height: 100px;
    }
    div#recherche_evenement div:nth-child(0n+2) {
        width: 99%;
        height: 100px;
    }
    div#recherche_evenement div:nth-child(0n+3) {
        width: 99%;
        height: 100px;
    }
    div#recherche_evenement div:nth-child(0n+4) {
        width: 99%;
        height: 100px;
    }
    div#recherche_evenement div:nth-child(0n+5) {
        width: 99%;
        height: 100px;
    } 
    div#recherche_evenement div:nth-child(0n+6) {
        width: 99%;
        height: 100px;
    }    
    div#recherche_evenement div:first-child label,
    div#recherche_evenement div:nth-child(0n+2) label,
    div#recherche_evenement div:nth-child(0n+3) label,
    div#recherche_evenement div:nth-child(0n+4) label,
    div#recherche_evenement div:nth-child(0n+5) label {
        width: 220px;
        height: 100%;
    }
    div#recherche_evenement div:nth-child(0n+6) button {
        width: 100%;
        height: 100%;
        margin: 8px 0 2px 180px;
    }   
    div#recherche_evenement div:first-child input,
    div#recherche_evenement div:nth-child(0n+2) select,
    div#recherche_evenement div:nth-child(0n+3) select,
    div#recherche_evenement div:nth-child(0n+4) select,
    div#recherche_evenement div:nth-child(0n+5) select {
        height: 100%;
    }
    .icobdpage, .icohdpage {
        font-size: 128px;
    }
    div#hdp{
        display: block;
    }
    div#cadreindexindex, div#cadreindexdetails, div#cadreindexjournee, div#cadreindexrecherche, div#cadreindexsupprimerpiecejointe, 
    div#cadreevenementdupliquer
    {
        min-height: 300px;
        margin-top: 520px;
    }    
    div#cadreevenementmodifier, div#cadreevenementajouterpiecejointe, div#cadreevenementdupliquer
    {
        min-height: 300px;
        margin-top: 320px;
    }
    div#cadrestatutindex, div#cadrestatutcreer, div#cadrestatutmodifier, div#cadrestatutsupprimer, div#cadrestatutdetails,
    div#cadresocietecreer, div#cadresocietedetails, div#cadresocieteindex, div#cadresocietemodifier, div#cadresocietesupprimer, 
    div#cadrelogindex, 
    div#cadreutilisateurcreer, div#cadreutilisateurindex, div#cadreutilisateurmodifier, div#cadreutilisateurmodifiermdp, div#cadreutilisateurreinitialisermotdepasse, div#cadreutilisateursupprimer, div#cadreutilisateurvoir, 
    div#cadreprofilcreer, div#cadreprofilindex, div#cadreprofilmodifier, div#cadreprofilsupprimer,
    div#cadremessageerreur, 
    div#cadreuploadtest,
    div#cadreindexvoirevenementsdelanne,
    div#cadreauthmotdepasseoublie
    {
        min-height: 300px;
        margin-top: 320px;
    }
    div#cadreformmdpoublie{
        margin: 0;
        text-align: left;
        width: 100%;
    }    
    div#cadre_form_utilisateur label, div#cadremodifierutilisateur label, div#cadre_form_profil label {
        display: block;
    }
    div#cadre_form_utilisateur form input, div#cadre_form_utilisateur form select, 
    div#cadre_form_profil form input, 
    div#cadre_form_societe form input, div#cadre_form_societe form select, div#cadre_form_societe form textarea {
        width: 100%;
    }
    .iconerecherche{
        width: 180px;
    }
    .styleiconeprive {
        height: 100px;
    }
    div#cadremodifierunevenement input{
        height: 80px;
        font-size: large;
    }
    .styleiconepartage{
        height: 120px;
    }
    .testfontbaisley{        
        color: #007bff;
        font-size: 70px;
        font-family: auto;
    }    
    .liste_partage{
        color: #70d900;
        font-size: 50px;
        font-weight: bold;
    }    
    .iconemt{
        height: 120px;
        margin-top: 10px;
    }
}
/* valable pour tous les écrans supérieurs à 1051px */
@media all and (min-width: 1051px){
    /* On cache l'entête caché pour les grands écrans */
    div#cadresuperieurcache{
        display: none;
    }
}

/* ############################################################# */

/* valable pour tous les écrans supérieures à 960px *
@media screen and (min-width:960px){
    .flex-container {
        flex-direction: row;
    }
}
* valable pour tous les écrans supérieures à 960px *
@media screen and (min-width: 960px){
    * On reaffiche l'entête avec les deux calendriers *
    div#cadresuperieur{
        display: flex;
    }
    * On cache l'entête caché des petits écrans *
    div#cadresuperieurcache{
        display: none;
    }
}
*/