@import url(http://fonts.googleapis.com/css?family=Roboto:400);
body {
    background-color:#fff;
    -webkit-font-smoothing: antialiased;
    font: normal 14px Roboto,arial,sans-serif;
    /*border-left:3px solid #E97018;
    border-right:3px solid #E97018;*/
    /*height: 100%;*/
    /*height: 100vh;*/
    overflow: auto;
}

#thtab, .thtab {
    background-color: #E97018!important;
    color: #FFF!important;
    border-bottom:2px solid black!important;
}

#thtabPale, .thtabPale {
    background-color: #FFA868;
    color: #FFF;
    border-bottom:2px solid black;
}

.borderBottomBlack {
    border-bottom:2px solid black;
}

#thtabBleuPale, .thtabBleuPale {
    background-color: #70CBFA;
    color: #FFF;
    border-bottom:2px solid black;
}

#thtabVertPale, .thtabVertPale {
    background-color: #ADE1A8;
    color: #FFF;
    border-bottom:2px solid black;
}

#thtabNoirPale, .thtabNoirPale {
    background-color: #8E8E8E;
    color: #FFF;
    border-bottom:2px solid black;
}

.thLink {
    color: #FFFFFF;
    text-decoration: none;
}

.thLink:hover {
    color: #369;
    text-decoration: none;
}

.menuLingevresHaut {
    background: linear-gradient(#575757,#000000,#575757);
    color: #ffffff;
    height: 20px;
}

.menuLingevres {
    background-color: #E97018;
    color: #ffffff;
    border-bottom:2px solid black;
}


.menuLingevresBas {
    background: linear-gradient(#E97018, #723602);
    height: 20px;
    margin-bottom:30px;
}

.menuLingevresTitreNom {
    background-color: #E97018;
    color: #000000;
    font-weight: bold;
    text-decoration: none;
    font-size: xx-large;
}

a {
    text-decoration: none;
}

.menuLingevresTitre {
    text-decoration: none;
    color: #ffffff;
    font-weight: bold;
    font-family: 'Alegreya', Helvetica, Arial, sans-serif;
    margin-left:15px;
}

.menuLingevresTitre:hover, .menuLingevresTitreNom:hover{
    color: #000000;
}

.titrePage {
    //background: linear-gradient(#575757,#000000,#575757);
    /*background-color: #BBBBBB;*/
    color: #E97018;
    border-radius: 15px;
}
.titrePageHaut {
    /*background: linear-gradient(#FFFFFF,#575757);
    color: #ffffff;
    height: 5px;
    margin-top: 100px;*/
    margin-top: 50px;
    /*padding-bottom: 200px;*/
    background: linear-gradient(white, white) padding-box,
    linear-gradient(to bottom, #E97018,white) border-box;
    border-radius: 20px;
    border: 4px solid transparent;
    height:100%;


}

.btn-primary {
    background:#E97018!important;
    border:#E97018!important;
}

.text-orange {
    color:#E97018!important;
}

.ligneErreur
{
    background:#CB1111;
    color: #FFFFFF!important;
}

.ligneErreurProbable
{
    background:#E2B64B;
    color: #FFFFFF!important;
}

/* checkbox glissante*/
input[type="checkbox"].demo5 {
    display: none;
}
input[type="checkbox"].demo5 + label {
    box-sizing: border-box;
    display: inline-block;
    width: 3rem;
    height: 1.5rem;
    border-radius: 1.5rem;
    padding:2px;
    background-color: #c0ceda ;
    transition: all 0.5s ;
    margin-left:30%;
}
input[type="checkbox"].demo5 + label::before {
    box-sizing: border-box;
    display: block;
    content: "";
    height: calc(1.5rem - 4px);
    width: calc(1.5rem - 4px);
    border-radius: 50%;
    background-color: #fff;
    transition: all 0.5s ;
}
input[type="checkbox"].demo5:checked + label {
    background-color: #3A8F41 ;
}
input[type="checkbox"].demo5:checked + label::before {
    margin-left: 1.5rem ;
}

.flashit{
    color:#8D8F3A;
    -webkit-animation: flash linear 1s infinite;
    animation: flash linear 1s infinite;
}
@-webkit-keyframes flash {
    0% { opacity: 1; }
    50% { opacity: .1; }
    100% { opacity: 1; }
}
@keyframes flash {
    0% { opacity: 1; }
    50% { opacity: .1; }
    100% { opacity: 1; }
}

#buttonValideJustif
{
    position: fixed;
    top:25%;
    left:47%;
    display: none;

    padding-top:15px;
    padding-bottom:15px;
    padding-left: 25px;
    padding-right:25px;
}

.nbrLigne
{
    color: #E97018;
    font-size: large;
}


#ui-id-1
{
    color:black;
}

#div1 {
    width: 350px;
    height: 70px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}

.userList {
    padding: 5px;
    /*margin-left: 2px;
    margin-right: 2px;
    margin-top: 5px;*/
    border: 2px white solid;
    font-size: 28px;
}

.select2-container {
    width: 100% !important;
    padding: 0;
}
.select2-container--open{
    z-index:9999999
}



.upload-area{
    width: 70%;
    height: 200px;
    border: 2px solid lightgray;
    border-radius: 3px;
    margin: 0 auto;
    margin-top: 10px;
    text-align: center;
    overflow: auto;
}

.upload-area:hover{
    cursor: pointer;
}

.upload-area h1{
    text-align: center;
    font-weight: normal;
    font-family: sans-serif;
    line-height: 50px;
    color: darkslategray;
}

#file{
    display: none;
}

/* Thumbnail */
.thumbnail{
    width: 80px;
    height: 80px;
    padding: 2px;
    border: 2px solid lightgray;
    border-radius: 3px;
    float: left;
}

.size{
    font-size:12px;
}

/*planning*/

.draggable-item {
    padding: 10px;
    margin-bottom: 5px;
    cursor: move;
}
.droppable-area {
    width: 500px;
    height: 200px;
    border: 1px double #ccc;
    padding: 10px;
    margin-bottom: 10px;
}


.dashedTop
{
    border-top: 1px dashed #ccc;
}
.dashedRight
{
    border-right: 1px dashed #ccc;
}

.fixedHeader tbody{
    overflow:auto;
    height:200px;
    width:100%;
}
.fixedHeader thead tr{
}

.planningAbsence
{
    background-color: #E97018;
    color: #FFF;
}


.tableFixHead          { overflow-y: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; }
.tableFixHead tbody thNom { position: sticky; left: 0; }




/* Just common table stuff. Really. */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }

.cursorPoint:hover{
    cursor: pointer;
}


/* checkbox glissante*/
input[type="checkbox"].demo5 {
    display: none;
}
input[type="checkbox"].demo5 + label {
    box-sizing: border-box;
    display: inline-block;
    width: 3rem;
    height: 1.5rem;
    border-radius: 1.5rem;
    padding:2px;
    background-color: #c0ceda ;
    transition: all 0.5s ;
    margin-left:30%;
}
input[type="checkbox"].demo5 + label::before {
    box-sizing: border-box;
    display: block;
    content: "";
    height: calc(1.5rem - 4px);
    width: calc(1.5rem - 4px);
    border-radius: 50%;
    background-color: #fff;
    transition: all 0.5s ;
}
input[type="checkbox"].demo5:checked + label {
    background-color: #369 ;
}
input[type="checkbox"].demo5:checked + label::before {
    margin-left: 1.5rem ;
}


.zoom {
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
    cursor: zoom-in;
}

.zoom:hover,
.zoom:active,
.zoom:focus {
    /**adjust scale to desired size,
    add browser prefixes**/
    -ms-transform: scale(2.5);
    -moz-transform: scale(2.5);
    -webkit-transform: scale(2.5);
    -o-transform: scale(2.5);
    transform: scale(2.5);
    position:relative;
    z-index:10000;
}

.remIcon {
    float: left;
}

.note {
    border-top: 3px solid!important;
    border-bottom: 3px solid!important;
    border-right: 3px solid!important;
}
.jourDrop {
    border-top: 3px solid!important;
    border-bottom: 3px solid!important;
    border-left: 3px solid!important;
}
.thName {
    border-top: 3px solid!important;
    border-bottom: 3px solid!important;
    border-left: 3px solid!important;
}
.tdCheckChauff {
    border-top: 3px solid!important;
    border-bottom: 3px solid!important;
}

.tablePlanning
{
    /*font-size: large;*/
    font-weight: bold;
}

.select2-container.select2-container--default.select2-container--open  {
    z-index: 5000;
}

@media print {
    .tablePrintableSize {
        font-size:x-small!important;
    }
    .container-fluid {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body .container-fluid {
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
    }
    table {
        width:100%!important;
        height: auto!important; /* Ajuste automatiquement la hauteur de la table */
        font-size: 12px!important; /* Réduire la taille de la police */
    }

    th, td {
        padding: 0px!important; /* Réduire l'espacement des cellules */
    }

    /* Optionnel : Limiter la hauteur des lignes pour les compacter */
    tr {
        height: 10px!important;
        max-height: 20px!important;
    }

    /* Autres ajustements pour l'impression si nécessaire */
    body {
        margin: 0!important;
        padding: 0!important;
    }
}


/* Default td style */
.absence-td {
    text-align: center;
    background-color: #3CCE54 !important; /* Orange */
}

/* Default td style */
.yellow-td {
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease;
}
/* Selected (checked) state */
.yellow-td.checked {
    background-color: #FFB01F !important; /* Orange */
    color: white;
}

/* Default td style */
.clickable-td {
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease;
}

/* Selected (checked) state */
.clickable-td.checked {
    background-color: #FFB01F !important; /* Orange */
    color: white;
}

/* Hide default checkbox */
.hidden-checkbox {
    display: none;
}