@import '_theme.less';




.tabs{

    .tabs-header{
        padding-left: 0px;
        padding-right: 0px;

        .tab{
            padding: 10px;
            cursor: pointer;
            text-align: center;
            color: @C1XL;

            border-top-left-radius: 0.5rem;
            border-top-right-radius: 0.5rem;
            //  U L B R
            border-style: solid;
            border-width: 1px;
            border-color: @C1XXL @C1XXL @C1 @C1XXL;

            &:hover{
                border-color: @C1XL @C1XL @C1 @C1XL;
                text-decoration: underline;
            }

            &.active{
                border-color:  @C1  @C1 white  @C1;
                color: @C1;
                &:hover{
                    //   border-color: @C1  @C1 @C1XL  @C1;
                    text-decoration: inherit;
                }
            }

        }

    }

    .tabs-content{
        border-style: solid;
        border-width: 1px;
        border-color: white @C1 @C1 @C1;
        padding: 20px;
        padding-top: 30px;

        .tab-help{
            border: 1px solid @C1;
            background-color:  @C1XXL;
            padding: 10px;
            color:@C1;
        }
    }

}







.zx-help{

    background-color: @C1XXL;
    border: 2px solid @C1;
    font-size: 0.9em;
    legend{
        color:@C1;
        font-size: 1.1em;
        font-weight: bold;
        text-decoration: underline;
    }
}



.zx-todo{
    background-color: rgb(255,222,222);
    border: 2px solid red;
    font-size: 0.9em;
    legend{
        color:red;
        font-size: 1.1em;
        font-weight: bold;
        text-decoration: underline;
    }
}






//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ TABLE

table{

    .sortColAsc{
        background-color: cyan;
    }

    .sortColDsc{
        background-color: yellow;
    }

    ul{
        margin-bottom: 0px !important;
        li{
            margin-left: -15px;
        }
    }
}

.table-sortable th{     cursor: pointer; }

.table-xs{
    th{
        //color:blue;
        font-size:0.8em;
        // font-weight: normal;
        padding: 2px !important;
        padding-right: 5px !important;
        margin: 0px !important;
    }
    td{
        //   color:red;
        padding: 2px !important;
        margin: 0px !important;
    }
    td{
        //   color:red;
        padding: 2px !important;
        margin: 0px !important;
    }
}

tbody tr:hover {        
    background-color: @tr-hover !important; 
    // border-top: 1px solid @C1 !important;
    //  border-top: inherit;

    td{
        //  border-top: inherit;
        border-bottom: 1px solid @C1 !important;
        //   border-top: 1px solid @C1 !important;
        // font-weight: bold;
    }

}





//■■■■■■■■■■■■■■■■■■■■■■■   #container-global / .page

#container-global{
    padding:2px;
    margin-top:@page-top;
    margin-bottom: 50px;    //:: Pour la debug bar
    //  background-color: red;


    .page{
        margin-left: 0px;
        margin-right: 0px;
        //   background-color:cyan;
        padding:10px;

        &.page-admin{
            background-color: rgb(255,200,200);
        }

        .page-header{
            margin-bottom: 15px;
            padding-bottom: 15px;            
            border-bottom:  3px solid @C1;

            //   background-color: lightgreen;
            .page-titre{
                //   background-color: lightsalmon;
                font-size: 1.8em;
                font-weight: bold;
                color: @C1;


                .page-sous-titre{
                    //     background-color: lightsteelblue;
                    // color: blue;
                    font-size: 0.8em;
                    font-weight: normal;

                }    
            }
        }


        .cadre{
            border: 3px solid @C1;
            border-radius: 5px;
            margin-bottom: 10px;
            padding-top: 15px;
            padding-bottom: 15px;

            .cadre-header{
                margin-bottom: 10px;

                .cadre-header-title{
                    font-size: 1.4em;
                    font-weight: bold;
                    color: @C1;
                }
            }
        }

    }
}


//■■■■■■■■■■■■■■■■■■■■■■■   #navbar_header

#navbar_header{
    background-color:@navbar-bg; 
    height: @navbar-height !important;

    .navbar-dark, .navbar-nav, .nav-link {
        color: white !important;
    }




    #siteIcone{
        height: 30px;
    }

    #userAvatar{
        height: 50px;
        ///////////////////    border: 2px solid @C1;
    }
    /*
    .avatar {
        vertical-align: middle;
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
    */

    .navbar-brand{
        font-size: 0.8em;
    }
    .nav-link{
        font-size: 0.8em;
    }

    .dropdown-item {

        &.admin{
            color:red;
            ::after {
                content: "admin";
                border-radius: 5px;
                padding: 2px;
                padding-left: 3px;
                padding-right: 3px;
                //  border: 1px solid black;
                margin-left: 5px;
                margin-right: 3px;
                color:white;
                background-color: red;
                font-size: 0.8em;
            }
        }
        &.soon{
            color:darkorange;
            text-decoration: line-through;
            ::after {
                content: "prochainement";
                border-radius: 5px;
                padding: 5px;
                //  border: 1px solid black;
                margin-left: 5px;
                margin-right: 3px;
                color:white;
                font-weight: normal;
                background-color: darkorange;
            }
        }
    }
}


//■■■■■■■■■■■■■■■■■■■■■■■   MyBootstrap !!!


.row{       margin: 0px;        }
.hidden{    display: none;      }
.btn{       cursor: pointer;    }
.cursor-pointer{        cursor: pointer;    }

.btn-group-xs > .btn, .btn-xs {
    padding: .25rem .4rem;
    font-size: .875rem;
    line-height: .5;
    border-radius: .2rem;
}


.dble-clickable{
    color: @C1;
    cursor: pointer;  
    &:hover{
        font-style: italic;
        text-decoration: underline;
    }
}





//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■    XXXXXXXXXXXXXXXXXXX

#eleve-table{
    font-size: 0.8em;
    padding:0px;
    th{
        font-size: 0.9em;

        &.th-attribut{
            background-color: lightskyblue;
        }
    }
    //  background-color: yellow;


    tr{
        // background-color: lightgreen !important;
        &[actif="0"]{
            background-color: rgb(255,200,200);
        }

        .att_OK{        background-color: lightgreen;        }
        .att_NON{       background-color: rgb(230,130,130);        }
        .att_Autorise{  background-color: rgb(180,255,200);        }
        .att_Refuse{    background-color: rgb(255,200,200);        }
        .att_DP{        background-color: rgb(255,255,0);        }
        .att_EXT{       background-color: rgb(255,120,200);        }
        .att_1{       background-color: rgb(140,140,140);        }
        .att_2{       background-color: rgb(230,130,130);        }
        .att_3{       background-color: rgb(0,255,0);        }

        .att_loading{
            background-color: pink;
        }
    }
}

.cellAttribut[valeur="Oui"]{
    background-color: lightgreen;
}


#eleve-table{

}

//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■    POSTAGES


#postes_select_fancybox{
    text-align: center;

    //  background-color: green;
    //  width: 80%;
    .zone_groupe_btn_poste {
        background-color: #f0f0f0;
        margin: 5px;
        padding: 5px;
        display: inline-block;
        vertical-align: top;
        text-align: center;
    }

    .bt_poste_selected{
        //   color: blue !important;
        font-weight: bold;
        font-size: 1.2em;
    }
}

#table_horaires_recap{
    .duree{
        color: blue;
    }
    .infos{
        color: green;
    }
}

#horaire_user_form{
    background-color: cyan;
    .erreur{
        color:red;
        display: none;
    }
}


.horaire_finished{
    color:red;
}

//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■    XXXXXXXXX



.formulaire{
    background-color: lightcyan;

}



fieldset {
    display: block;
    margin-inline-start: 2px;
    margin-inline-end: 2px;
    padding-block-start: 0.35em;
    padding-inline-start: 0.75em;
    padding-inline-end: 0.75em;
    padding-block-end: 0.625em;
    min-inline-size: min-content;
    border-width: 2px;
    border-style: groove;
    border-color: threedface;
    border-image: initial;
    legend{        
        font-size: 1.0em;
        font-weight: bold;
    }
}

//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■    XXXXXXXXXXXXXXXXXXX

#materiel-filtres, #eleve-filtres{
    margin-bottom: 15px;
    padding-bottom: 15px;            
    border-bottom:  1px solid @C1;
    // background-color: yellow;


    .ui-state-active{
        //   border: 1px solid #003eff;
        background: @C1 !important;
        // font-weight: normal;
        color: #ffffff;
    }

    .fieldset{
        margin: 2px;
        padding: 3px;
        border: 1px solid black;
        .labelFiltreGenre{
            padding:2px;
        }

        .fieldsetLabel{
            color: @C1; 
        }

        legend {
            background-color: @C1;
            color: white;
            padding: 2px;
            font-size: 0.8em;
            border: 1px solid black;
        }
    }

}


#table-postages{
    .tr_current_periode{
        //color:red;   
        //  background-color: orange;
        td{
            border: 3px solid green;
            background-color: rgb(200,255,200);
        }

        .postage{
            // font-weight: bold;
            //    border: 2px solid red;
        }


    }

    .poste-description{
        border: 2px inset white;
        // margin:3px;
        font-size: 0.8em;
    }
}


.cmzTodo{
    background-color: rgb(255,200,200);
    font-size: 0.8em;
}

.cmz-help{
    background-color: rgb(200,200,255);
    font-size: 0.8em;
    padding: 3px;
}


.photo-eleve{
    width: 100px;     
    border: 1px solid @C1;
    padding: 3px;
    margin: 2px;
    &[actif="0"]{
        background-color: rgb(200,100,100); 
    }
    &:hover{
        background-color: @tr-hover;
    }

    .nom-prenom{
        font-size: 0.7em;
    }
}

//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■    PAGES
//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■    PAGES
//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■    PAGES
//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■    PAGES


#page-accueil{

    font-size: 0.9em;

    #siteIcone{
        height: 50px;
    }
    .card{
        margin: 5px;

    }
    .card-title{
        color:@C1;

    }

    .card-subtitle{
        margin-top: 10px;
    }


    .card-text{
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid @C1;
    }

    .card-admin-only{
        .card-title{
            color:red;

        }
    }


    #card-calendrier{
        .evenements{
            //  background-color: cyan;
            .evenement{
                //  background-color: yellow;
                //  margin: 2px;
                border-bottom: 1px solid @C1;
                .jour{
                    color: @C1;
                    font-size: 0.8em;
                }
            }

        }

    }



}



#pageTutos, #page-tuto-show{

    section{
        background-color: lightgrey;
        margin-bottom: 40px;
        padding: 10px;
    }

    .forVieSco, 
    .forTice,  
    .forProf{           
        font-weight: normal;   
        padding: 3px;
        font-size: 0.8em;
        margin-left: 5px;
        border-radius: 20px;
        color:black;
    }

    .forVieSco{            background-color: greenyellow;        }
    .forTice{            background-color: red;        }
    .forProf{            background-color: lightskyblue;        }

    .tuto{
        /* background-color: rgb(200,200,200);*/
        margin: 5px;
    }


    .tuto .tuto_title{
        // font-size : 1.12em;
        /* font-weight: bold;*/
        background-color: @C1L; //rgb(100,200,100);
        color:white;
        padding:3px;
        cursor: pointer;
    }

    .tuto_content{
        /*font-size : 1.5em;*/
        padding:10px;
        border: 1px solid @C1;
        background-color: rgb(240,240,255);
    }


    .tuto_content h2{
        font-size: 1.2em;
        font-weight: bold;
        color: rgb(80,150,80);
        margin-bottom: 20px;
    }


    b{
        color: rgb(80,150,80);
    }


}


#page-user-index{
    // background-color: lightskyblue !important;

    #user-table{
        font-size: 0.8em;
        padding:0px;
        th{
            font-size: 0.9em;
        }
        //  background-color: yellow;
        tr{
            // background-color: lightgreen !important;
            &[actif="0"]{
                background-color: rgb(255,200,200);
            }
        }

        .userAvatar{
            height: 30px;
            ///////////////////    border: 2px solid @C1;
        }
    }

    [genre-vs="1"]{        background-color: rgb(200,255,200);    }
    [genre-prof="1"]{        background-color: rgb(222,222,255);    }
}


#page-user-roles{
    // background-color: lightskyblue !important;

    #user-roles-table{
        background-color: rgb(233,255,222);
        //   font-size: 0.8em;
        //  padding:0px;
        th{
            //    font-size: 0.9em;
        }
        //  background-color: yellow;
        tr{
            // background-color: lightgreen !important;
            &[actif="0"]{
                background-color: rgb(255,200,200);
            }
        }
    }

}


#page-classe-show{

    // seuelemnet pour la liste des user
    ul{
        margin-bottom: 40px;
    }
}






//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■    FIN PAGES
//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■    FIN PAGES
//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■    FIN PAGES
//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■    FIN PAGES



//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■    floatBarsG Loader

#floatBarsG{
    position:relative;
    width:234px;
    height:28px;
    margin:auto;
}

.floatBarsG{
    position:absolute;
    top:0;
    background-color:@C1;
    width:28px;
    height:28px;
    animation-name:bounce_floatBarsG;
    -o-animation-name:bounce_floatBarsG;
    -ms-animation-name:bounce_floatBarsG;
    -webkit-animation-name:bounce_floatBarsG;
    -moz-animation-name:bounce_floatBarsG;
    animation-duration:0.905s;
    -o-animation-duration:0.905s;
    -ms-animation-duration:0.905s;
    -webkit-animation-duration:0.905s;
    -moz-animation-duration:0.905s;
    animation-iteration-count:infinite;
    -o-animation-iteration-count:infinite;
    -ms-animation-iteration-count:infinite;
    -webkit-animation-iteration-count:infinite;
    -moz-animation-iteration-count:infinite;
    animation-direction:normal;
    -o-animation-direction:normal;
    -ms-animation-direction:normal;
    -webkit-animation-direction:normal;
    -moz-animation-direction:normal;
    transform:scale(.3);
    -o-transform:scale(.3);
    -ms-transform:scale(.3);
    -webkit-transform:scale(.3);
    -moz-transform:scale(.3);
}

#floatBarsG_1{
    left:0;
    animation-delay:0.366s;
    -o-animation-delay:0.366s;
    -ms-animation-delay:0.366s;
    -webkit-animation-delay:0.366s;
    -moz-animation-delay:0.366s;
}

#floatBarsG_2{
    left:29px;
    animation-delay:0.4525s;
    -o-animation-delay:0.4525s;
    -ms-animation-delay:0.4525s;
    -webkit-animation-delay:0.4525s;
    -moz-animation-delay:0.4525s;
}

#floatBarsG_3{
    left:58px;
    animation-delay:0.549s;
    -o-animation-delay:0.549s;
    -ms-animation-delay:0.549s;
    -webkit-animation-delay:0.549s;
    -moz-animation-delay:0.549s;
}

#floatBarsG_4{
    left:88px;
    animation-delay:0.6355s;
    -o-animation-delay:0.6355s;
    -ms-animation-delay:0.6355s;
    -webkit-animation-delay:0.6355s;
    -moz-animation-delay:0.6355s;
}

#floatBarsG_5{
    left:117px;
    animation-delay:0.732s;
    -o-animation-delay:0.732s;
    -ms-animation-delay:0.732s;
    -webkit-animation-delay:0.732s;
    -moz-animation-delay:0.732s;
}

#floatBarsG_6{
    left:146px;
    animation-delay:0.8185s;
    -o-animation-delay:0.8185s;
    -ms-animation-delay:0.8185s;
    -webkit-animation-delay:0.8185s;
    -moz-animation-delay:0.8185s;
}

#floatBarsG_7{
    left:175px;
    animation-delay:0.905s;
    -o-animation-delay:0.905s;
    -ms-animation-delay:0.905s;
    -webkit-animation-delay:0.905s;
    -moz-animation-delay:0.905s;
}

#floatBarsG_8{
    left:205px;
    animation-delay:1.0015s;
    -o-animation-delay:1.0015s;
    -ms-animation-delay:1.0015s;
    -webkit-animation-delay:1.0015s;
    -moz-animation-delay:1.0015s;
}



@keyframes bounce_floatBarsG{
    0%{
        transform:scale(1);
        background-color:@C1;
    }

    100%{
        transform:scale(.3);
        background-color:rgb(255,255,255);
    }
}

@-o-keyframes bounce_floatBarsG{
    0%{
        -o-transform:scale(1);
        background-color:@C1;
    }

    100%{
        -o-transform:scale(.3);
        background-color:rgb(255,255,255);
    }
}

@-ms-keyframes bounce_floatBarsG{
    0%{
        -ms-transform:scale(1);
        background-color:rgb@C1;
    }

    100%{
        -ms-transform:scale(.3);
        background-color:rgb(255,255,255);
    }
}

@-webkit-keyframes bounce_floatBarsG{
    0%{
        -webkit-transform:scale(1);
        background-color:rgb@C1;
    }

    100%{
        -webkit-transform:scale(.3);
        background-color:rgb(255,255,255);
    }
}

@-moz-keyframes bounce_floatBarsG{
    0%{
        -moz-transform:scale(1);
        background-color:rgb@C1;
    }

    100%{
        -moz-transform:scale(.3);
        background-color:rgb(255,255,255);
    }
}