/* bleu foncé : rgb(30,94,170)  #1E5EAA*/
/* vert bouton : rgb(48,181,201) #30B5C9*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap');

@font-face {
    font-family: 'breezi';
    src: url('../fonts/breezi_font-webfont.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LiberationMono-Regular';
    src: url('../fonts/LiberationMono-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

* {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 1.0em;
    transition: 250ms;
    background: transparent;
    background-color: transparent;
}

b, strong {
    font-weight: 600
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    color: black;
    background-color: #F0F0EB;
}

div {
    margin: 0;
    padding: 0;
    vertical-align: text-top;
}

a {
    padding: 0 2px;
    color: white;
    background-color: #30B5C9;
    border: 1px solid #30B5C9;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
}

a:hover {
    color: #30B5C9;
    border-radius: 0;
    background-color: white;
}

.mailto:hover {
    cursor: url('../img/enveloppe_cur.png'), pointer;
}

p {
    line-height: 1.0em;
    margin: 0;
    text-align: left;
}

h1 {
    font-size: 1.6em;
    font-weight: 700;
    text-align: left;
    line-height: 1em;
    color: white
}

h2 {
    font-size: 1.4em;
    font-weight: 400;
    text-align: right;
    font-style: italic;
}

h3 {
    font-size: 1.2em;
    font-weight: 700;
    text-align: center;
    margin: 0;
}

h4 {
    font-size: 1.1em;
    font-weight: 400;
    text-align: center;
    margin: 0;
    font-style: italic;
}

ul {
    text-align: left;
}

hr {
    border-color: #1E5EAA
}

.textCenter {
    text-align: center;
}

.hide {
    display: none;
}

.containerFlex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
    padding: 0 1em 0 1em;
}

.containerFlex > div {
    flex: auto;
    border-radius: 10px;
    margin: 10px 5px 0 5px;
    padding: 5px 10px 10px 10px;
    background: #EEE;
}

/************* LOGO *************/
#logo {
    display: inline-block;
    margin: 0;
    padding: 5px 0 0;
    text-align: center;
    font-family: 'breezi';
    font-size: 1.5em;
    line-height: 0.6em;
    background-color: rgba(0, 0, 0, 0)
}

/************* SPLASH *************/
#splashfirst {
    background-color: #F0F0EB;
    color: #30B5C9;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -30%);
    opacity: 0.2;
    transition: 0ms
}

#splashfirst #logo {
    transition: 0ms
}

/************** HEAD **************/
header {
    height: 42px;
    width: 100%;
    color: #555;
    display: block;
    padding: 0;
    overflow: auto;
    position: fixed;
    z-index: 105;
    border-bottom: 2px solid grey;
    background-image: linear-gradient(97deg, rgba(30, 77, 158, 0.8), rgba(56, 101, 174, 0.8) 21%, rgba(147, 185, 229, 0.8));
}

header div {
    display: block;
    float: left;
    color: white
}

header #headerHome {
    color: white
}

header .headerA {
    background: #4b71b2;
    border : 0px;
}

header #headerImgWaiting {
    visibility: hidden;
}

header #headerTitre {
    font-size: 1.6em;
    font-weight: 700;
    padding-top: 2px;
    color: white
}

header #headerTools {
    float: right;
    color: #000;
    color: black
}

header img {
    padding: 5px;
    vertical-align: bottom;
    height: 32px;
}

header img:hover {
    background-color: #F0F0EB;
}

header #headerTools i {
    padding: 6px 5px;
}

header #headerTools i:hover {
    background-color: #F0F0EB;
}

header #login {
    font-size: .8em;
}

/************** CONTENU  **************/
main {
    display: inline-block;
    padding: 5px 0 1em;
    text-align: center;
    width: 100%;
    margin-top: 60px;
    margin-bottom: 1.5em;
}

/********FOOTER************/
footer {
    height: 1.5em;
    position: fixed;
    bottom: 0;
    background-color: #F0F0EB;
    margin: 0;
    text-align: center;
    width: 100%;
    border-top: 1px solid #EEE;
    z-index: 100;
}

.footerLogo {
    font-family: 'breezi';
    font-size: 1.2em;
    padding: 0 6px 0 3px;
}

.footerText {
    vertical-align: top;
}

/************** MENU OU FIL D'ARIANE **************/
menu {
    z-index: 100;
    width: 100%;
    margin: 45px 0 40px;
    display: block;
    padding: 2px 0 0;
    text-align: center;
    position: fixed;
    background-color: #F0F0EB;
}

menu div {
    display: inline-block;
    border-bottom: 2px solid grey;
    padding: 0 50px;
    vertical-align: bottom;
}

menu div img {
    margin-bottom: 2px;
    padding: 2px;
    vertical-align: middle;
    background-color: #F0F0EB;
}

menu div nav {
    display: inline-block;
    margin-bottom: 2px;
    border-radius: 10px;
    padding: 2px 15px;
    font-style: italic;
}

menu div nav.before {
    background-color: #30B5C9;
}

menu div nav.actif {
    background-color: #1E5EAA;
    color: #F0F0EB;
    font-weight: bold;
    font-style: normal;
}

menu div nav.after {
    background-color: #AAA;
}

menu ul {
    display: inline-block;
    padding: 0;
}

menu ul li {
    background-color: #30B5C9;
    border-radius: 5px;
    padding: 0 1em;
    margin: 0 0.25em;
    color: white;
    display: inline-block;
    cursor: pointer;
}

menu ul li.actif {
    background-color: #1E5EAA;
    cursor: auto;
}

menu ul.mnuMain {
    padding: 0 50px;
    vertical-align: bottom;
    border-bottom: 2px solid grey;
    font-size: 1.1em;
}

menu ul.mnuMain li:hover, menu ul.mnuMain li.actif {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    padding-bottom: 10px;
    color: #F0F0EB;
}

menu ul.mnuSub {
    margin-top: -2px;
    padding: 0 50px;
    vertical-align: top;
    border-top: 2px solid grey;
    border-bottom: 1px solid grey;
}

menu ul.mnuSub li:hover, menu ul.mnuSub li.actif {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    padding-top: 10px;
    color: #F0F0EB;
}

/************** popup *****************/
#dialogDiv {
    display: none;
}

/************** boutons **************/
.bouton {
    border: 1px solid grey;
    padding: 0px;
    margin: 10px;
    vertical-align: middle;
    display: inline-block;
    cursor: pointer;
    border-radius: 5px 10px 0 10px;
}

.boutonTitre {
    font-size: 1.2em;
    font-weight: 400;
    text-align: center;
    height: 24px;
    width: 160px;
    border-bottom: 1px solid grey;
}

.bouton:hover {
    background-color: #F0F0EB;
    color: #F0F0EB;
    border-radius: 10px 0px 10px 5px;
    border-color: #30B5C9
}

.bouton:hover > .boutonTitre {
    border-bottom: 1px solid #30B5C9;
}

.boutonImg {
    height: 64px;
    margin: 0;
    border-radius: 5px 10px 0 10px;
}

.boutonSousTitre {
    height: 68px;
    margin: 0;
    line-height: 60px;
}

.boutonSousTitre span {
    display: inline-block;
    vertical-align: middle;
    line-height: 1em;
    margin: 0;
    width: 140px;
}

button {
    background-color: #30B5C9;
    border: 1px solid #30B5C9;
    color: #F0F0EB;
    padding: 0px 2px;
    margin: 5px 15px;
    width: 150px;
    vertical-align: middle;
    display: inline-block;
    cursor: pointer;
    border-radius: 5px 10px 0 10px;
}

button.trespetit {
    width: 30px;
    margin: 2px;
    font-size: 75%
}

button.double {
    width: 300px;
}

button.petit {
    width: 75px;
    margin: 5px;
}

button:hover {
    background-color: #F0F0EB;
    color: #30B5C9;
    border-radius: 10px 0px 10px 5px;
}

button .button_icone {
    float: left;
    width: 25px;
    text-align: center
}

button .button_text {
    float: left;
    text-align: left
}

/************** box **************/
.box .box-label, .box-wod .box-label {
    font-size: 1.4em;
    font-weight: 700;
    text-align: center;
    color: #1E5EAA
}

.box > input[type=checkbox] {
    position: absolute;
    top: -9999px;
}

.box > input[type=checkbox]:checked ~ .box-content {
    display: block;
}

.box > input[type=checkbox]:checked ~ .box-label {
    border: none;
}

.box > input[type=checkbox]:checked ~ .box-label:before {
    content: '\f146';
    font-weight: 400;
}

.box > input[type=checkbox]:checked ~ .box-label:after {
    content: '';
    margin-left: 1.1em;
}

.box .box-label {
    border-bottom: 1px dashed grey;
}

.box .box-label:before {
    font: normal normal normal 1em;
    display: inline-block;
    text-decoration: inherit;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0fe";
    margin-right: 0.5em;
}

.box .box-label:after {
    content: '...';
    margin-left: 0.5em;
}

.box .box-label:hover:before {
    content: '\f055';
}

.box .box-content {
    display: none
}

/************ style couleur génériques ************/
.ecritureV {
    color: #00A030;
}

.ecritureR {
    color: #D00030;
}

.ecritureViolet {
    color: #6600A0;
}

.ecritureB {
    color: #000000;
}

.ecritureW {
    color: #FFFFFF;
}

.ecritureOR {
    color: #FCD21C;
}

.ecritureRouge {
    color: #FFA0A0;
}

.ecritureOrange {
    color: #ED7F10;
}

.ecritureGris {
    color: grey;
}

.fondGris {
    background-color: #EEE;
}

.fondGrisFonce {
    background-color: #444;
}

.fondRouge {
    background-color: #FFA0A0 !important;
}

.fondBleu {
    background-color: rgb(160, 217, 255);
}

.fondJaune {
    background-color: Khaki !important;
}

.fondRougeFonce {
    background-color: crimson;
}

.fondOrange {
    background-color: orange;
}

.fondVert {
    background-color: #A0F0A0 !important;;
}

.fondViolet {
    background-color: #CCC0DA;
}

.fondTransparant {
    background-color: rgba(0, 0, 0, 0);
}

.fondBlanc {
    background-color: #F0F0EB;
}

.italic {
    font-style: italic;
}

.plusPetit {
    font-size: 75%
}

/************ onglets latéraux ******/
.ongletLateral {
    position: fixed;
    top: 60px;
    width: 900px;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0);
    transition-duration: 0.2s;
}

#ongletLateralL {
    left: -880px;
}

#ongletLateralR {
    right: -880px;
}

.ongletLateralContent {
    width: 850px;
    background-color: #EEEEEE;
    height: 800px;
    border: 0px;
    margin: 0;
    padding: 15px;
    text-align: center;
    overflow: auto;
}

#ongletLateralContentL {
    border-radius: 0px 15px 15px 0px;
}

#ongletLateralContentR {
    border-radius: 15px 0px 0px 15px;
    margin-left: 20px;
}

.ongletLateralControl {
    position: absolute;
    width: 30px;
    background-color: #30B5C9;
    top: 15px;
    border: 1px solid #30B5C9;
    color: #F0F0EB;
    border-radius: 0 8px 8px 0;
    height: 50px;
    padding: 30px 5px 0 0;
    text-align: right;
}

.ongletLateralControl:hover {
    background-color: #F0F0EB;
    color: #30B5C9;
}

#ongletLateralControlL {
    right: 0;
}

#ongletLateralControlR {
    left: 0;
    -moz-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

/************** pièces jointes ********/
#piecesjointes {
    border: 1px solid black;
    border-radius: 5px;
    padding-top: 5px;
}

#piecesjointes table {
    border-collapse: separate;
    border-spacing: 0px 1px;
    border: 1px solid black;
    margin: 10px 10px 0 10px;
}

#piecesjointes thead {
    display: none
}

#piecesjointes td {
    border: 0;
}

#piecesjointes_btnOpenAdd, #piecesjointes_btnUpload {
    background-color: RGB(0, 0, 0, 0);
    color: black;
    width: auto;
    padding: 2px 15px;
    margin-left: 40%
}

#piecesjointes_btnUpload {
    background-color: #30B5C9;
    color: black
}

#piecesjointes_btnOpenAdd:hover, #piecesjointes_btnUpload:hover {
    color: #30B5C9;
    background-color: #F0F0EB;
}


/****** Div erreur */
.divError {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
    width: 540px;
    margin: 0 auto;
    position: relative;
    padding: 5px;
    border-radius: 4px;
    margin-bottom: 10px;
}

/****** Div success */
.divSuccess {
    border: 1px solid green;
    width: 540px;
    margin: 0 auto;
    position: relative;
    padding: 5px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.nonDecoHref {
    background-color: #ECFF72 !important;
    color: blue;
}


.colorRed {
    color: red;
}


.mainCorps {
    width: 100%;

}

.pageCorps {
    width: 100%;
    display: inline-block;
}

/**************************


 */

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 2; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}


/*******************************************************************
******************  FRAMEWORK ANDY
********************************************************************/
@media only screen and (min-width: 1201px) {

    .containerPage {
        display: inline-block;
        width: 100%;
    }

    .inline {
        display: inline-block;
    }

    .rowPage {
        display: inline-block;
        width: 95%;
        border: 1px grey solid;
        margin-top: 5px;
        border-radius: 10px;
        padding-bottom: 140px;
    }

    .rowPageNoMarge {
        display: inline-block;
        width: 95%;
        border: 1px grey solid;
        margin-top: 5px;
        border-radius: 10px;
        padding-bottom: 10px;
    }

    .rowPageNoBorder {
        display: inline-block;
        width: 95%;
        margin-top: 5px;
        border-radius: 10px;
        padding-bottom: 140px;
    }

    .pad20 {
        display: inline-block;
        width: 95%;
        border: 1px grey solid;
        margin-top: 5px;
        border-radius: 10px;
        padding-bottom: 200px !important;
    }

    .div5 {
        margin-top: 10px;
        width: 5% !important;
        display: inline-block;
    }


    .div15 {
        margin-top: 10px;
        width: 15% !important;
        display: inline-block;
    }

    .div60 {
        margin-top: 10px;
        width: 60%;
        display: inline-block;
    }

    .div65 {
        margin-top: 10px;
        width: 65%;
        display: inline-block;
    }

    .div70 {
        margin-top: 10px;
        width: 70%;
        display: inline-block;
    }

    .div75 {
        margin-top: 10px;
        width: 75%;
        display: inline-block;
    }

    .div80 {
        margin-top: 10px;
        margin-left: 5px;
        width: 79%;
        display: inline-block;
    }

    .div100 {
        margin-top: 10px;
        width: 99%;
        display: inline-block;
    }


    .div45 {
        margin-top: 10px;
        width: 45% !important;
        display: inline-block;
    }

    .div40 {
        margin-top: 10px;
        width: 40% !important;
        display: inline-block;
    }

    .div30 {
        margin-top: 10px;
        width: 30% !important;
        display: inline-block;
    }

    .div35 {
        margin-top: 10px;
        width: 35% !important;
        display: inline-block;
    }

    .div50 {
        margin-top: 10px;
        width: 50% !important;
        display: inline-block;
    }

    .div20 {
        margin-top: 10px;
        width: 19.8% !important;
        display: inline-block;
    }

    .div25 {
        margin-top: 10px;
        width: 25% !important;
        display: inline-block;
    }


    .margin10 {
        margin-left: 10% !important;
        display: inline-block;
    }

    .margin5 {
        margin-left: 5%;
        display: inline-block;
    }

    .margin5_bottom {
        margin-bottom: 5px;
    }

    .decorationDiv {
        background-color: lightgrey;
    }

    .borderRight {
        border-right: 2px grey solid;
    }

    /*************
    ****
    *************/
    .spanRouge {
        background-color: #FF0000;
        padding-left: 5px;
        padding-right: 5px;
    }

    .spanVert {
        background-color: #BCCF42;
        padding-left: 5px;
        padding-right: 5px;

    }

    .spanOrange {
        background-color: orange;
        padding-left: 5px;
        padding-right: 5px;
    }

}

/****************** icone trad **************/
.iconeTrad {
    cursor: pointer;
    background: url("https://mycommun.didactic.fr/zzr/img/trad.png") no-repeat;
    width: 27px;
    height: 32px;
    display: inline-block;
}

.iconeTrad:hover {
    background: url("https://mycommun.didactic.fr/zzr/img/tradorange.png") no-repeat;
}