/* feuille de style Ninegate
 * METICE 2020 - Académie de la Réunion
 * --
 * DSI4
 */

/* Teintes en fonction du profil utilisateur */

/* eleves #VERT #169B62
 * dark : #3b8211
 * light : #dffdcf
 */

/* ====== ESSAI D'UN MODE REDUIT ======= */
.header.reduit {
    height: 50px !important;
    overflow-y: hidden;
}
.header.reduit .nav.navbar-top-links.navbar-right > li a {font-size: 1.5em; }

.header .title img {transition:margin-left 0.1s ease;  }
.header.reduit #logo {
        /* remplacer l'image en définissant une image de background */
        /* et en positionnant un padding de la largeur de l'image */
        display: block;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        background: var(--logo) no-repeat;
        width: 62px; /* Width of new image */
        height: 23px !important; /* Height of new image */
        padding-left: 62px; /* Equal to width of new image */
        margin-top: 21px;
        margin-left: 11px;
        margin-right: 10px;
    }

.header.reduit small {
    top: 25px !important;
    font-size: 0.5em;
}

.header.reduit > a.title > span {
    line-height: 25px !important;
    transition:line-height 0.5s ease;
    font-size: 0.9em;
    margin-top: 4px;
    padding-left: 0px !important;
}

.header.reduit .avatar {height: 25px; }

.header.reduit #navbar-nameuser
{
    top: 14px;
    right: 210px;
}

/* ===================== FIN MODE REDUIT ==========================*/

/* fix defaut d'affichage sur toogle switch */
body, .slick .slicksubtitle, .slick .slicklink { height: 30px;}
body {
    background: linear-gradient(180deg, var(--main), white,50%);
}

#navbar-nameuser a {
    color: var(--main, #004d9a) !important;
}

body.eleves, body.grp-National_1, body.grp-eleves {
    --colorbody: #ffffff;
    --main: #169b62;
    --mainR: 22;
    --mainG: 155;
    --mainB: 98;
    --dark: #006930;
    --darkR: 0;
    --darkG: 105;
    --darkB: 48;
    --light: #48cd94;
    --lightR: 72;
    --lightG: 205;
    --lightB: 148;
    --heightheader: 150;
}

/* responsables #MAUVE #7D4E5B
 */

body.responsables, body.grp-National_2,body.grp-responsables  {
    --colorbody: #ffffff;
    --main: #7d4e5b;
    --mainR: 125;
    --mainG: 78;
    --mainB: 91;
    --dark: #4b1c29;
    --darkR: 75;
    --darkG: 28;
    --darkB: 41;
    --light: #af7f8d;
    --lightR: 175;
    --lightG: 128;
    --lightB: 141;
    --heightheader: 150;
}


/* professeurs, enseignants1d #BLEU1 #5770BE  */
body.professeurs, body.enseignants1d, body.grp-National_3, body.grp-professeurs {
    --colorbody: #ffffff;
    --main: #5770be;
    --mainR: 87;
    --mainG: 112;
    --mainB: 190;
    --dark: #253e8c;
    --darkR: 37;
    --darkG: 62;
    --darkB: 140;
    --light: #89a2f0;
    --lightR: 137;
    --lightG: 162;
    --lightB: 240;
    --heightheader: 150;
}

/* administratifs, admin #ORANGE #FF6F4C  */
body.administratifs, body.admin, body.grp-National_4 , body.grp-National_5, body.grp-National_6 , body.grp-administratifs,    {
    --colorbody: #ffffff;
    --main: #ff6f4c;
    --mainR: 255;
    --mainG: 111;
    --mainB: 76;
    --dark: #cd3d1a;
    --darkR: 205;
    --darkG: 61;
    --darkB: 26;
    --light: #ffa17e;
    --lightR: 255;
    --lightG: 161;
    --lightB: 126;
    --heightheader: 150;
}

/* PersAcad #BLEU2 #484d7a */
body.PersAcad, body.grp-National_7, body.grp-PersAcad {
    --colorbody: #ffffff;
    --main: #484d7a;
    --mainR: 72;
    --mainG: 77;
    --mainB: 122;
    --dark: #161b48;
    --darkR: 22;
    --darkG: 27;
    --darkB: 72;
    --light: #7a7fac;
    --lightR: 122;
    --lightG: 127;
    --lightB: 172;
    --heightheader: 150;
}

/* Cartouche header Métice - région académique La Réunion */

div.header {
    background: white !important;
    /*background-image: linear-gradient(45deg, white 200px, var(--light));
    background-position-x: 300px;
    background-repeat: no-repeat;*/
}


@media all and (min-width: 768px)
{
    #logo {
        height: 130px !important;
        float: left !important;
        top: -10px !important;
        left: 0px !important;
        position: relative !important;
    }
}

@media all and (max-width: 600px)
{
    .navbar-brand {
        width: 24em;
        overflow: hidden;
        height: 2.6em;
    }
}

@media all and (min-width: 601px) and (max-width: 767px)
{
    .navbar-brand {
        width: 28em;
        height: 2.6em;
    }
}


@media all and (max-width: 767px)
{
    nav.navbarsmall {
        background: white !important;
    }

    .navbarsmall .navbar-brand {
        color: black !important;
        font-family: var(--fontfacetitle);
    }

    #logo {
        float: left !important;
        top: 0px !important;
        left: 0px !important;
        position: relative !important;
    }
    .navbarsmall {
        height: 50px !important;
        overflow-y: hidden;
    }
    .navbarsmall .nav.navbar-top-links.navbar-right > li a {font-size: 1.5em; }

    .navbarsmall .title img { margin-left:-300px !important;}
    .navbarsmall small {
        top: 18px !important;
        font-size: 0.5em;
    }

    .nav.navbar-top-links.navbar-left li {
        display: block;
    }

    .navbarsmall a.navbar-brand {
        line-height: 27px !important;
        transition:line-height 0.5s ease;
        font-size: 1.3em;
        margin-left: -90px;
        margin-top: -3px;
    }

    #logo {
        /* remplacer l'image en définissant une image de background */
        /* et en positionnant un padding de la largeur de l'image */
        display: block;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        background: var(--logo) no-repeat;
        width: 62px; /* Width of new image */
        height: 23px !important; /* Height of new image */
        padding-left: 62px; /* Equal to width of new image */
        margin-top: -1px;
        margin-left: 86px;
        margin-right: 14px;
    }
    .navbarsmall .avatar {height: 25px; }
}


.container-fluid #logo { display: none; }

.header .avatar {height: 32px; }

.header .title {
    font-size: 30px !important;
}

div.header > a.title > span {
    color: black !important;
    line-height: 114px !important;
    padding-left: 20px !important;
}

.header small {
    /* font-size: 16px !important; */
    font-size: initial;
    top: 24px !important;
    margin-left: 3px !important;
    font-family: var(--fontfacebody) !important;
}

/* reprise des couleurs sur les icones d'action */

.nav.navbar-top-links.navbar-right > li a {
    color: var(--main, #337ab7) !important;
    font-size: 2.0em;
    padding-top: 9px;
}
.nav.navbar-top-links.navbar-right > li a:hover {
    color: var(--fontcolorhover, white) !important;
    background: var(--light, black) !important;
    border-radius: 5px;
    padding-top: 1px;
}

/* 
 * mise à jour du thème pour le bandeau escamotable #31431 
 */

    nav.navbarsmall {
        background: white !important;
    }

    .navbarsmall .navbar-brand {
        color: black !important;
        font-family: var(--fontfacetitle);
    }

    .navbarsmall #logo {
        float: left !important;
        top: 0px !important;
        left: 0px !important;
        position: relative !important;
    }
    .navbarsmall {
        height: 50px !important;
        overflow-y: hidden;
    }
    .navbarsmall .nav.navbar-top-links.navbar-right > li a {font-size: 1.5em; }

    .navbarsmall .title img { margin-left:-300px !important;}
    .navbarsmall small {
        top: 18px !important;
        font-size: 0.5em;
    }

    .navbarsmall .nav.navbar-top-links.navbar-left li {
        display: block;
    }

    .navbarsmall a.navbar-brand {
        line-height: 27px !important;
        transition:line-height 0.5s ease;
        font-size: 1.3em;
        margin-left: -90px;
        margin-top: -3px;
    }

    .navbarsmall #logo {
        /* remplacer l'image en définissant une image de background */
        /* et en positionnant un padding de la largeur de l'image */
        display: block;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        background: var(--logo) no-repeat;
        width: 62px; /* Width of new image */
        height: 23px !important; /* Height of new image */
        padding-left: 62px; /* Equal to width of new image */
        margin-top: -1px;
        margin-left: 86px;
        margin-right: 14px;
    }
    .navbarsmall .avatar {height: 25px; }
