/** CSS générale pour les applis basées sur le FW Spring **/

/* barre de scroll vertical toujours présente, pour éviter le décalage des éléments centrés lorsque la scrollbar apparait/disparait d'une page à l'autre, ou au sein d'une page avec des éléments déployables */
html {
    overflow-y: scroll;
}

@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,300,700);
/* body couvrant toute la page, sinon pb avec select2 : le clic en dehors du body ne ferme pas la boite d'options */
body {
    height: 100%;
    width: 100%;
    /*position: relative;*/ /* Attention position:relative sur le body fait bugger select2 sur des pages avec scroll lorsque le select2 est en bas de page */
    font-family: 'Roboto', sans-serif;
}
/* interdiction du padding right sur le body, sinon l'ouverture d'un modal bootstrap ajoute un padding-right:17px qui décale le background vers la gauche */
body {
    padding-right: 0px !important;
}

div#logo {
	/*margin-right: 50px;*/
}

/* ajout d'une règle sur la taille du container principal pour les écrans larges, les règles du grid.scss de BS4 s'arretant à 1200 px de large */
@media (min-width: 1600px) {
    .container {
        max-width: 1480px;
    }
}


ul {
    text-align: left;
}
/** Accentuation des arrondis des card (défaut 0.25rem) */
.card {
    border-radius : .50rem;
}

/** ombres sur les cards */
.card:not(.scei-subcard) {
    -webkit-box-shadow: 1.5px 1.5px 3px 1.5px rgba(0,0,0,0.3);
    -moz-box-shadow: 1.5px 1.5px 3px 1.5px rgba(0,0,0,0.3);
    box-shadow: 1.5px 1.5px 3px 1.5px rgba(0,0,0,0.3);
}

.hide {
    display: none;
}

.scei-subcard {
     margin-top: 1.5rem;
     margin-left: 1rem;
     margin-right: 1rem;
 }

.scei-subcard:first-child {
    margin-top:0.5rem;
}


.scei-subcard .card-header {
   /* border-bottom: 0px;*/
}

/* définition du card header scei, en reprenant le style de card-header bootstrap et en le personnalisant */

.scei-card-header:first-child {
    border-radius: calc(.50rem - 1px) calc(.50rem - 1px) 0 0;
}
.scei-card-header {
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    background-color: rgba(0,0,0,.03);
    border-bottom: 1px solid rgba(0,0,0,.125);
    /* personnalisation */
    /*background-color: #4682B4;*/
    /*color: white;*/
    background-color: rgba(70,130,168,0.55); /** notation hexa avec transparence #4682a88c ne fonctionne pas sous IE11 - conversion tool https://kilianvalkhof.com/2016/css-html/css-hexadecimal-colors-with-transparency-a-conversion-tool/ */
    color: black;
    border-radius: .25rem;
    font-size: 18px;
}

/* définition du card scei, avec une bordure de couleur, et un header reprenant en partie le style du card header scei */
.scei-card {
    border : 1px solid rgba(70,130,168,0.71);
}

.scei-card>.card-header {
    background-color: rgba(70,130,168,0.55); /** notation hexa avec transparence #4682a88c ne fonctionne pas sous IE11 - conversion tool https://kilianvalkhof.com/2016/css-html/css-hexadecimal-colors-with-transparency-a-conversion-tool/ */
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(0,0,0,.125);
    color: black;
    font-size: 17px;
}

.scei-card-header-small {
    padding: .25rem 1.25rem;
    margin-bottom: 0;
    background-color: #f7f7f7;
    border-bottom: 1px solid #dfdfdf;
    color: black;
    border-radius: .25rem;
    font-size: 16px;
}
.scei-subcard-small {
    margin-top: 0.8rem;
    margin-left: 2rem;
    margin-right: 2rem;
}


.scei-form-label {
    /*text-align: right;*/
    padding-top: 0.45rem;
}
.scei-form-input {
    text-align: left;
}

/** Bloc d'information avec icone */
.scei-bloc-info {
    display: inline-block;
    text-align: left;
    padding-left: 2.8rem;
    padding-top: 0.2rem;
    padding-right: 0.4rem;
    padding-bottom: 0.3rem;
    color: #0a4650;
    background-color: rgba(208, 236, 241, 0.76); /** notation hexa avec transparence #d1ecf1c2 ne fonctionne pas sous IE11 - conversion tool https://kilianvalkhof.com/2016/css-html/css-hexadecimal-colors-with-transparency-a-conversion-tool/ */
    border: 1px solid #b2d6dc;
    border-radius: .25rem;
    font-size: 0.9rem;
    position:relative;
    margin-top:0.1rem;
    margin-bottom:0.4rem;
    line-height: 1rem;
}

.scei-bloc-info:before {
    content: "\f05a";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position:absolute;
    left:0.7rem;
    /*top:0.15rem;*/
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
}

.scei-bloc-warning {
    display: inline-block;
    text-align: left;
    padding-left: 2.8rem;
    padding-top: 0.2rem;
    padding-right: 0.4rem;
    padding-bottom: 0.3rem;
    color: #735b33;
    background-color: #fcf8e3;
    border: 1px solid #e1cba2;
    border-radius: .25rem;
    font-size: 0.9rem;
    position:relative;
    margin-top:0.1rem;
    margin-bottom:0.4rem;
    line-height: 1rem;
}

.scei-bloc-warning:before {
    content: "\f071";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position:absolute;
    left:0.7rem;
    /*top:0.15rem;*/
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
}

.scei-bloc-danger {
     display: inline-block;
     text-align: left;
     padding-left: 2.8rem;
     padding-top: 0.2rem;
     padding-right: 0.4rem;
     padding-bottom: 0.3rem;
     color: #733f41;
     background-color: #fcdee0;
     border: 1px solid #e1b6a3;
     border-radius: .25rem;
     font-size: 0.9rem;
     position:relative;
     margin-top:0.1rem;
     margin-bottom:0.4rem;
     line-height: 1rem;
 }

.scei-bloc-danger:before {
    content: "\f06a";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position:absolute;
    left:0.7rem;
    /*top:0.15rem;*/
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
}

.scei-bloc-success {
    display: inline-block;
    text-align: left;
    padding-left: 2.8rem;
    padding-top: 0.2rem;
    padding-right: 0.4rem;
    padding-bottom: 0.3rem;
    color: #49734e;
    background-color: #e9fce3;
    border: 1px solid #bee1b0;
    border-radius: .25rem;
    font-size: 0.9rem;
    position:relative;
    margin-top:0.1rem;
    margin-bottom:0.4rem;
    line-height: 1rem;
}

.scei-bloc-success:before {
    content: "\f058";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position:absolute;
    left:0.7rem;
    /*top:0.15rem;*/
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
}

#containerContenu {
    padding-bottom: 0.5rem;
}

#containerContenu .form-group {
    margin-bottom: 0.5rem; /* écart par défaut de Bootstrap =1rem, un peu trop grand */
}

[data-toggle="tooltip"]:hover {
    cursor: pointer;
}
.tooltip-inner ul {
    margin-bottom: 0;
    padding-left: 1.25rem;
}

.label-danger:before {
    font-family: FontAwesome;
    content: "\f071";
    padding-right: 5px;
}

#alerteSucces {
    font-size: 18px;
}

/*.alerteFixe {*/
/*    position: fixed!important;*/
/*    left: 0px;top: 2px;*/
/*    width:100%;*/
/*    z-index:2000;*/
/*    text-align: center;*/
/*    margin-top:0;*/
/*    box-shadow: 2px 2px 4px 2px rgba(0,0,0,0.3);*/
/*}*/

.alerteFixeTop {
    position: fixed!important;
    left: 0px;top: 0px;
    width:100%;
    z-index:2000;
    text-align: center;
    margin-top:0;
    box-shadow: 2px 2px 4px 2px rgba(0,0,0,0.3);
}
.alerteFixeMiddle {
    position: fixed!important;
    left: 48%;top: 48%;transform: translate(-50%, -50%);
    z-index:2000;
    box-shadow: 2px 2px 4px 2px rgba(0,0,0,0.3);
}
.alerteFixeBottom {
    position: fixed!important;
    left: 0;bottom: 0;
    width:100%;
    z-index:2000;
    text-align: center;
    margin-bottom:0;
    box-shadow: 2px 2px 4px 2px rgba(0,0,0,0.3);
}

/** ajout de boutons xs (extra small) */
.btn-group-xs > .btn, .btn-xs {
    padding: .25rem .4rem;
    font-size: .875rem;
    line-height: .5;
    border-radius: .2rem;
}

/** pour désactiver des liens/boutons */
a.disabled, a[disabled], button.disabled {
    pointer-events: none;
}
a.disabled:hover, button.disabled:hover {
    cursor: default;
}

/** curseur "lien" sur les liens boutons, meme s'ils n'ont pas de href **/
a.btn:hover {
    cursor: pointer;
}



/** Evite le scrolling vers le haut à l'ouverture d'un modal cf. https://stackoverflow.com/a/40219496 **/
body.modal-open {
    overflow: visible;
    position: absolute;
    width: 100%;
    height:100%;
}

/** Fond spécifique site de test : affiche un motif "SITE DE TEST" répété pour que l'utilisateur en soit conscient **/
.fondSiteTest {
    pointer-events: none;
    background-image: url(../img/siteDeTest.png);
    background-repeat : repeat;
    position: absolute;
    top: 80px;
    bottom: 0;
    height:auto;
    left: 0;
    right: 0;
    width: auto;
    z-index: 10000;
    opacity: 0.2;
}
@media print {
    .fondSiteTest {display:none;}
}

/** ligne de séparation avec texte centré ou à gauche : comme un <hr> avec un texte **/
.separateurTexteCentre,.separateurTexteGauche {
    display: flex;
    align-items: center;
    text-align: center;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.separateurTexteCentre::before, .separateurTexteCentre::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid rgba(0,0,0,.1);
}

.separateurTexteGauche::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid rgba(0,0,0,.1);
}
.separateurTexteCentre::before, .separateurTexteGauche::before {
    margin-right: .3em;
}
.separateurTexteCentre::after,.separateurTexteGauche::after {
    margin-left: .3em;
}

td .separateurTexteCentre:first-child , div .separateurTexteCentre:first-child {
    margin-top: 0px;
}