#logo
{
    background: #6d071a;
    background: -moz-linear-gradient(left,#6d071a 0%,#880820 100%);
    background-color: rgba(0, 0, 0, 0);
    background: -webkit-gradient(left top,right top,color-stop(0%,#6d071a),color-stop(100%,#880820));
    background: -webkit-linear-gradient(left,#6d071a 0%,#880820 100%);
    background-color: rgba(0, 0, 0, 0);
    background: -o-linear-gradient(left,#6d071a 0%,#880820 100%);
    background: -ms-linear-gradient(left,#6d071a 0%,#880820 100%);
    background: linear-gradient(to right,#6d071a 0%,#880820 100%);
    background-color: rgba(0, 0, 0, 0);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6d071a',endColorstr='#880820',GradientType=1);
}

body
{
    background-color:#ffffff;
}

/* Header */
#header_wrapper
{
    height:40px;        
}

header
{    
    position:fixed;    
    height:40px;
    
    background-color:#0e2304;
    
    box-shadow: 0 3px 3px rgba(0,0,0,0.3);
}

#logo a
{
    display:block;
    height:40px;
   
    background: url("../images/logo_province.png");
    background-position: 0 50%;
    background-size: auto 90%;
    background-repeat: no-repeat;   
   
    line-height:40px;
   
    padding-left:40px;
   
    font-size: 1rem;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;   
    text-decoration: none;
}

#hamburger_menu_trigger
{
    float:right;
    color:#ffffff;
    font-weight:bold;
    cursor: pointer;
    
    display:none;
}

#hamburger_menu_trigger img
{
    width:36px;
    height:36px;
}

/* Navigation principale de gauche */

#nav_wrapper
{
    min-height:calc(100vh - 40px);    
    background-color:#0e2304;    
}

/* Mot d'accueil dans le menu */
#nav_wrapper div.greeting
{
    text-align:center;
}

#nav_wrapper div.greeting p:first-child
{
    color: #61bb95;
}

#nav_wrapper div.greeting p:last-child
{
    font-style:italic;
    font-size:90%;
}

/* Menu principal de gauche */

#nav_wrapper nav
{
    position:fixed;    
}

#nav_wrapper nav ul
{
    padding:0.75em;  
    
    border-top:1px solid #6d071a;
    border-bottom:1px solid #6d071a;
    
    list-style-type:none;
}

#nav_wrapper nav ul li
{
    list-style-type: none;
    
    background-repeat: no-repeat;
    background-position-y: center;

    margin-top:20px;
    margin-bottom:20px;    
    
    padding-left: 30px;
    
    line-height:24px;
}

/* Puces administration */

#nav_wrapper nav ul li.dashboard
{
    background-image: url('../images/google-material.io/ic_dashboard_white_24px.svg');
}

#nav_wrapper nav ul li.membres-ecole
{
    background-image: url('../images/google-material.io/ic_supervisor_account_white_24px.svg');
}

#nav_wrapper nav ul li.stagiaires
{
    background-image: url('../images/google-material.io/ic_school_white_24px.svg');
}

#nav_wrapper nav ul li.maitres-stage
{
    background-image: url('../images/google-material.io/ic_restaurant_white_24px.svg');
}

#nav_wrapper nav ul li.stages
{
    background-image: url('../images/google-material.io/ic_business_center_white_24px.svg');
}

#nav_wrapper nav ul li.visites-de-stages
{
    background-image: url('../images/google-material.io/ic_directions_walk_white_24px.svg');
}

/* Puces stagiaires */

#nav_wrapper nav ul li.mon_carnet
{
    background-image: url('../images/google-material.io/ic_book_white_24px.svg');
}

#nav_wrapper nav ul li.carnet_export_pdf
{
    background-image:url('../images/google-material.io/ic_file_download_white_24px.svg');
}

#nav_wrapper nav ul li.appel-a-l-aide
{
    background-image:url('../images/google-material.io/ic_notifications_active_white_24px.svg');
}

#nav_wrapper nav ol
{
    padding-left:2em;
}

#nav_wrapper nav ul li,
#nav_wrapper nav a,
#nav_wrapper nav a:visited
{
    color:#fff;
    text-overflow: ellipsis;
}

main
{    
    /* Et on centre les éléments verticalement */
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    
    -ms-flex-align: flex-start;
    -webkit-align-items: flex-start;
    -webkit-box-align: flex-start;

    /* Vertical */
    /* align-items: center; */
    align-items: flex-start;
    
    /* Horizontal */
    /* justify-content: center; */
}

#main_content_wrapper
{
    /*
    border-color:#CCCCCC;
    border-style:solid;
    border-radius: 10px;
    border-width:1px;
    */
    
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: flex-start;
    -webkit-align-items: flex-start;
    -webkit-box-align: flex-start;    
    align-items: flex-start;
    
    flex-grow:1;
    
    flex-direction: column;
    
    width:100%;
    height:100%;
}

main ::selection {
    color:#ffffff;
    background-color:#74071C;    
}
main ::-moz-selection {
    color:#ffffff;
    background-color:#74071C;    
}

main a,
main a:visited
{
    color:#428bca;
}

#main_head
{
    padding-bottom: 20px;
    padding-left: 75px;
    /* padding-top: 20px; */
    
    width:100%;
    
    margin-bottom: 10px;
    border-bottom: #ededed 1px solid;
    /* box-shadow: 0 3px 3px rgba(0,0,0,0.3);   */
    
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 70px auto;    
}

#main_head h1
{
    margin-bottom:0;
}

#main_head ol
{
    list-style-type:none;

    padding:0;
    margin:0;
}

#main_head ol li
{
    display:inline-block;
}

#main_head ol li + li:before {
  font-weight:bold;
  content:'|';
}

#main_head ol li:last-child a
{
    text-decoration:none;
    color:#363636;
}

#main_head.identification
{
    background-image: url('../images/google-material.io/ic_fingerprint_black_48px.svg');
}

#main_head.stage_decouverte
{
    background-image: url('../images/google-material.io/ic_looks_black_48px.svg');
}

#main_head.resume_hebdomadaire
{
    background-image: url('../images/google-material.io/ic_date_range_black_48px.svg');
}

#main_head.auto-evaluation-fin-de-stage
{
    background-image: url('../images/google-material.io/ic_assignment_turned_in_black_48px.svg');
}

#main_head.resolution-de-problematiques
{
    background-image: url('../images/google-material.io/ic_flash_on_black_48px.svg');
}

#main_head.dashboard
{
    background-image: url('../images/google-material.io/ic_dashboard_black_48px.svg');
}

#main_head.stages
{
    background-image: url('../images/google-material.io/ic_business_center_black_48px.svg');
}

#main_head.alertes
{
    background-image: url('../images/google-material.io/ic_notifications_active_black_48px.svg');
}

#main_head.membres-ecole
{
    background-image: url('../images/google-material.io/ic_supervisor_account_black_48px.svg');
}

#main_head.stagiaires
{
    background-image: url('../images/google-material.io/ic_school_black_48px.svg');
}

#main_head.maitres-stage
{
    background-image: url('../images/google-material.io/ic_restaurant_black_48px.svg');
}

#main_head.visites
{
    background-image: url('../images/google-material.io/ic_directions_walk_black_48px.svg');
}


h1, h2, h3, h4
{
    font-family: 'Roboto', sans-serif;
    font-weight:300;
    color:#6d071a;
}

body
{
    font-family: 'Open Sans', sans-serif;
    font-size:1.3rem;
    color:#363636;
}

/* GENERIC MESSAGES : DEBUT */

div.msgbox
{
    padding: .75rem 1.25rem;
    
    margin-bottom: 1rem;
    
    border: 1px solid;
    border-radius: .25rem;
}

div.msgbox.info
{
    background-color: #d9edf7;
    border-color: #bcdff1;
    color: #31708f;
}

div.msgbox.ok
{
    background-color: #dff0d8;
    border-color: #d0e9c6;
    color: #3c763d;    
}

div.msgbox.warning
{
    background-color: #fcf8e3;
    border-color: #faf2cc;
    color: #8a6d3b;
}

div.msgbox.error
{
    background-color: #f2dede;
    border-color: #ebcccc;
    color: #a94442;

    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    animation-iteration-count: 2;
}

@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}

/* GENERIC MESSAGES : FIN */


/* GENERIC FORM : DEBUT */



form
{
}

form h1,
form h2,
form h3,
form h4
{
    color:#B90C2C; 
    border-bottom:1px solid #B90C2C;
}

div.form_item
{
  clear:both;
  
  padding:1px;
  
  margin-bottom:1px;
  
  display:table;  
  width:100%;
}

div.form_item label
{
  display:table-cell;
  
  width:30%;
  /*max-width:200px;*/
  
  font-weight:600;  
  vertical-align:top;
  text-align:right;
  
  padding-right:0.75rem;
}

div.form_item label.question_obligatoire:before
{
    color: red;
    content: '*';    
}

div.form_item div.input_wrapper
{
  display:table-cell;
  width:70%;
}

div.form_item div.input_group input
{
    margin-right:0.4rem;
}

div.form_item p.input_helper,
div.form_item div.input_helper
{  
  font-size:70%; 
  font-style:italic;
  
  margin-top:2px;
  margin-bottom:0px;  
  
  color:#656565;
}

div.form_item .input_helper span.avertissement
{
  color:#a94442;
}

div.form_item input[type="text"],
div.form_item input[type="number"],
div.form_item input[type="password"],
div.form_item input[type="email"],
div.form_item input[type="url"],
div.form_item textarea,
div.form_item select
{
  border:1px solid #c0c0c0;
  background:#f5f5f5;
}

div.form_item textarea
{
  display:block;
  margin-top:0;
  width:85%;
  max-width:400px;
  
  /* Override KNACSS setting */
  font-size: 100%;
  
  /* Enable textarea resize */
  overflow: auto;
  resize:vertical;
}

div.form_item textarea:focus
{
  border: 1px solid #dddddd;
}

@media (max-width:575px) {

    div.form_item
    {
        display:block;
        width:auto;        
    }
    
    div.form_item label
    {
        display:block;
        width:auto;
        text-align:left;
    }
    
    div.form_item div.input_wrapper
    {
        display:block;
        width:auto;
        text-align:left;
    }    
    
    div.form_item textarea
    {
        width:100%;
        max-width:none;
    }
}


/* GENERIC FORM : FIN */

table.listing thead th
{
    color:#6d071a;
    
    vertical-align:middle;
    text-align:left;
}

table.listing tbody tr:nth-child(even)
{
    background-color: #fff;
}

table.listing tbody tr:nth-child(odd)
{
    background-color: #dce3e6;
}

table.listing tbody tr:hover
{
    background-image: repeating-linear-gradient(135deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px);
}

table.listing tbody tr:nth-child(even):hover
{
    background-color:#f0f0f0;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px);
}

table.listing tbody .anomalie
{
    color: #a94442;
    font-weight:bold;    
}

#login_wrapper
{        
    align-self: center;
    margin:auto;
 
    padding:0;
    
    width:100%;
    max-width:750px;
    
    border-color:#CCCCCC;
    border-style:solid;
    border-radius: 10px;
    border-width:1px;    
    
    box-shadow: 10px 10px 40px -1px rgba(166,166,166,1);
    
    /* Lui-même conteneur flex pour ses enfants */
    display: flex;
    flex-direction:row;
}

#login_wrapper .cartouche
{
    background: #6d071a;
    background: -moz-linear-gradient(left,#6d071a 0%,#880820 100%);
    background-color: rgba(0, 0, 0, 0);
    background: -webkit-gradient(left top,right top,color-stop(0%,#6d071a),color-stop(100%,#880820));
    background: -webkit-linear-gradient(left,#6d071a 0%,#880820 100%);
    background-color: rgba(0, 0, 0, 0);
    background: -o-linear-gradient(left,#6d071a 0%,#880820 100%);
    background: -ms-linear-gradient(left,#6d071a 0%,#880820 100%);
    background: linear-gradient(to right,#6d071a 0%,#880820 100%);
    background-color: rgba(0, 0, 0, 0);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6d071a',endColorstr='#880820',GradientType=1);

    width:30%;
    
    /* Lui-même conteneur flex pour ses enfants */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#login_wrapper .cartouche img
{
    width:80%;

    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
}

@media (max-width:700px) {
    #login_wrapper .cartouche
    {
        display:none;
    }
}

#login_wrapper .login_main
{
    padding:2rem;
    
    width:100%;
}

#login_wrapper .login_main img
{
    width:60%;
    float:right;
    
    -webkit-animation: fadein_slidein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein_slidein 1s; /* Firefox < 16 */
        -ms-animation: fadein_slidein 1s; /* Internet Explorer */
         -o-animation: fadein_slidein 1s; /* Opera < 12.1 */
            animation: fadein_slidein 1s;
}

@media (max-width:575px) {
    #login_wrapper img
    {
        width:85%;
    }
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadein_slidein {
    from { opacity: 0;margin-right:-5%; }
    to   { opacity: 1;margin-right:0; }
}

#login_wrapper div.login_main_content_wrapper
{    
    margin-top:10px;
    
    padding-top:5px;
    padding-bottom:5px;
    
    border-top:1px solid #CCCCCC;
    /* border-bottom:1px solid #CCCCCC;*/
}

#login_wrapper .password_lost
{
    font-size:90%;
    white-space: nowrap;
}

#login_wrapper .password_lost a,
#login_wrapper .password_lost a:visited
{
    color:#428bca;
}


/* Surcharges pour les pages du carnet : DEBUT */
form.ehpn_rapport,
#ehpn_rapport_view
{
    width:100%;
}

form.ehpn_rapport .groupe_niveau3,
#ehpn_rapport_view .groupe_niveau3
{
    columns:2;
}

form.ehpn_rapport .choix_precision_wrapper,
#ehpn_rapport_view .choix_precision_wrapper
{
    margin-left:12px;
}

form.ehpn_rapport .groupe_niveau3 div.form_item:nth-child(odd),
#ehpn_rapport_view .groupe_niveau3 div.form_item:nth-child(odd)
{
    background: #ffffff;
}

form.ehpn_rapport .groupe_niveau3 div.form_item:nth-child(even),
#ehpn_rapport_view .groupe_niveau3 div.form_item:nth-child(even)
{
    background: #f9f9f9;
}

@media (max-width:1100px) {

    /* Pour la mise en page via columns */
    form.ehpn_rapport .groupe_niveau3,
    #ehpn_rapport_view .groupe_niveau3
    {
        columns:1;
    }
}

/* Surcharges pour les pages du carnet : FIN */

/* Surcharges pour le formulaire d'identification du stage */

form#identification_maj
{
    width:100%;
}

form#identification_maj div.grid-7 div
{
    flex-shrink: 0;
}

form#identification_maj label[for^="conge_hebdo_j"]
{
    text-align:left;
    font-weight:normal;
    text-overflow: ellipsis;
}


/* Mon Carnet : DEBUT */

#mon_carnet .resume_wrapper
{
    margin-bottom: 1rem;
}

#mon_carnet .resume
{
    padding: .75rem 1.25rem;
    padding-right:15%;        
    
    border: 1px solid;
    border-radius: .25rem;        
    
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 15% auto;
    
    height:100%;
    min-height:125px;
}

#mon_carnet .resume.identification
{    
    background-image: url('../images/google-material.io/ic_fingerprint_white_48px.svg');
    
    background-color: #d9edf7;
    border-color: #bcdff1;
    color: #31708f;    
}

#mon_carnet .resume.stage
{    
    background-image: url('../images/google-material.io/ic_place_white_48px.svg');
    
    background-color: #d9edf7;
    border-color: #bcdff1;
    color: #31708f;    
}

#mon_carnet .resume.decouverte
{
    background-image: url('../images/google-material.io/ic_looks_white_48px.svg');
}

#mon_carnet .resume.hebdo
{
    background-image: url('../images/google-material.io/ic_date_range_white_48px.svg');
}

#mon_carnet .resume.auto-evaluation-fin-de-stage
{
    background-image: url('../images/google-material.io/ic_assignment_turned_in_white_48px.svg');
}

#mon_carnet .resume.resolution-de-problematiques
{
    background-image: url('../images/google-material.io/ic_flash_on_white_48px.svg');
}

#mon_carnet .resume.rempli
{
    background-color: #dff0d8;
    border-color: #d0e9c6;
    color: #3c763d;
}

#mon_carnet .resume.vide_pas_application
{
    color:#363636;
    
    border-color:#9B9B9B;
    background-color:#EEEEEE;        
}

#mon_carnet .resume.vide_pas_application h2
{
    color:#363636;
}

#mon_carnet .resume.vide_pas_application p
{
    font-style:italic;
}

#mon_carnet .resume.vide_facultatif
{
    background-color: #fcf8e3;
    border-color: #faf2cc;
    color: #8a6d3b;    
}

#mon_carnet .resume.vide_obligatoire
{
    background-color: #f2dede;
    border-color: #ebcccc;
    color: #a94442;    
}

/* Mon Carnet : FIN */


/* Tableau de bord : DEBUT */

table.listing_stages
{
    table-layout:auto;
}

table.listing_stages tbody tr.stage_en_alerte
{
    color: #a94442;
    font-weight:bold;
}

table.listing_stages tbody tr.stage_en_alerte:nth-child(even)
{
    background-color: #edd2d2;    
}

table.listing_stages tbody tr.stage_en_alerte:nth-child(odd)
{
    background-color: #f2dede;    
}

table.listing_stages tbody tr.stage_en_alerte a,
table.listing_stages tbody tr.stage_en_alerte a:visited
{
    font-weight:normal;
}

/* Tableau de bord : FIN */


/* Liste des alertes : DEBUT */

table.listing_alertes
{
    table-layout:auto;
}

table.listing_alertes tbody tr.alerte_en_cours
{
    color: #a94442;
    font-weight:bold;
}

table.listing_alertes tbody tr.alerte_en_cours:nth-child(even)
{
    background-color: #edd2d2;    
}

table.listing_alertes tbody tr.alerte_en_cours:nth-child(odd)
{
    background-color: #f2dede;    
}

table.listing_alertes tbody tr.alerte_en_cours a,
table.listing_alertes tbody tr.alerte_en_cours a:visited
{
    font-weight:normal;
}

/* Liste des alertes : FIN */

/* Affichage d'une alerte de stage : DEBUT */

#stage_alerte
{
    width:100%;
    max-width:1140px;
}

#stage_alerte h2
{
    margin-bottom:10px;
}

#stage_alerte .synthese,
#stage_alerte .stage_alerte_detail
{
    padding:5px;    
    margin:5px;
    
    background-color:#f7f7f7;
}

#stage_alerte .stage_alerte_actions,
#stage_alerte .stage_alerte_options
{
    margin-top:10px;
    padding-top:10px;
    
    border-top: #ededed 1px solid;
}

/* Affichage d'une alerte de stage : FIN */


/* Listing des stagiaires : DEBUT */

table#stagiaires.listing
{
    table-layout:auto;
}

/* Listing des stagiaires : FIN */


/* Listing des maîtres de stage : DEBUT */

table#maitres_stage.listing
{
    table-layout:auto;
}

/* Listing des maîtres de stage : FIN */

/* Visites de stage : DEBUT */


.stage_synthese > div
{
    padding:5px;    
    margin:5px;
    
    background-color:#f7f7f7;
}

/* Visites de stage : FIN */


@media (max-width:575px) {
        
    /* On cache le menu latéral dès que l'écran est trop petit (smartphone, par ex.) */
    #nav_wrapper
    {
        display:block !important; /* On utilise le !important pour surcharger le !important de KNACSS */
        min-height:0;
    }
    
    #nav_wrapper.mobilemenu_hidden
    {
        display:none !important; /* On utilise le !important pour surcharger le !important de KNACSS */
    }
    
    #nav_wrapper.mobilemenu_visible
    {
        position: fixed;
        width: 100% !important;
    }
    
    #nav_wrapper nav
    {
        position:static;
        width: auto !important;
    }
    
    #nav_wrapper nav ul
    {
        list-style-type:none;

        padding:0;

        border-top-style:none;
        border-bottom-style:none;
    }
    
    #nav_wrapper nav ul li
    {
        margin:0.75rem;
    }
    
    #nav_wrapper nav a
    {
        display:block;                
        padding:0.25rem;
        
        background-color:#415637; /* 20% plus clair que le background de #nav_wrapper */
    } 

    #hamburger_menu_trigger
    {        
        display:block;
    }    
}