body{background:#fefefe;}


.table_maintenance{font-size:14px;margin-bottom: 8px;width:100%;}
.table_maintenance thead th, .table_maintenance thead td{border-bottom-color:#888 !important;}
.table_maintenance {border-bottom-color:#888 !important;}
.table_maintenance tr td {margin-bottom:5px;padding:9px 10px;}
.table_maintenance tr th {padding:2px 7px;}
/*.table_maintenance tr:nth-child(even) td {background-color:#f7f7f7;}*/
.table_maintenance tr td.td_etat{width:110px;text-align:right;}/*
.table_maintenance tr td:nth-child(1){width:110px;}
.table_maintenance tr td:nth-child(2){width:220px;}
.table_maintenance tr td:nth-child(){width:120px;}*/

#div_detail{margin-bottom: 20px;width:100%;border:0px solid #d8d8d8;background:#f5f5f5;padding:10px 10px 10px 10px;font-size:14px}
#ouvert_update{font-size:14px;margin: 15px 0;}

.inner_div_one_and_double > div:nth-child(1){border-right:1px solid #ccc;width:25%;padding-left: 0;}
.inner_div_one_and_double > div:nth-child(2){width:75%;}
/*.inner_div_one_and_double > div:nth-child(2){padding-left: 25px;padding-right: 25px;float:left;width:100%}
.inner_div_one_and_double > div:nth-child(1){padding-left: 25px;padding-right: 25px;float:left;width:100%}*/
.h2_barre_center{margin-left: 25px !important;margin-right: 25px !important;}
.div_panel{ padding:0px 10px 0px 10px;;margin:0 3px 6px 3px;font-size:13px;background:#eaeaea;display:block;float:left;font-weight:bold;line-height:44px;height:44px;overflow: hidden;}

.label_etat{color:#fff;display:inline-block;padding:2px 10px; width:100%; text-align: center;}
hr{margin:20px 0px;border-color:#c0c0c0 !important;border-top-width: 1px;}
.panel_3{background:#F44336 ;}
.panel_1{background:#4CAF50 ;}
.panel_2{background:#FF9640 ;}


.border1{border-top:3px solid #4CAF50}
.border2{border-top:3px solid #FF9640}
.border3{border-top:3px solid #F44336}




.circle_3{color:#4CAF50 ;}
.circle_1{color:#F44336 ;}
.circle_2{color:#EF6C00 ;}

#main_nav
{
    #li_cartouche
    {
        &:hover
        {
            background: transparent;
        }
        #nav_cartouche{
            width: 270px;
            margin-top: 5px;
        }
    }

}




.one_tick{margin-bottom:10px;border:0px solid #f5f5f5;text-align:justify;padding:10px; font-size:14px;background:#f5f5f5;border:1px solid #d8d8d8;}
.msg_tick_pur{text-align: justify;overflow:hidden;border:0px solid red;width:100%;}
.titre_msg{border:0px solid green;font-weight:bold;margin-bottom:7px;}
.titre_customer{text-align:left;}
.titre_admin{text-align:left;}
.customer{background:url("../images/fd_tick_client.png") repeat-y top left #f5f5f5;}
.admin{}
.notes{background:url("../images/fd_tick_notes.png") repeat-y top left #f5f5f5;}
.proprio{background:url("../images/fd_tick_proprio.png") repeat-y top left #f5f5f5;}
.align_admin{text-align:left;}
hr{margin-top:0;}
.ticketplus{background:#FA4343;color:#fff !important;}
#info_tick{width:100%;}
#info_tick tr td:first-child{font-weight:bold;text-align: right;padding-right:8px;}
#info_tick tr td:last-child{text-align: left;}


.inner_div_one_and_double > div:nth-child(1){border-right:1px solid #ccc;width:25%;padding-left: 0;}
.inner_div_one_and_double > div:nth-child(2){width:75%;}
/*.inner_div_one_and_double > div:nth-child(2){padding-left: 25px;padding-right: 25px;float:left;width:100%}
.inner_div_one_and_double > div:nth-child(1){padding-left: 25px;padding-right: 25px;float:left;width:100%}*/
.h2_barre_center{margin-left: 25px !important;margin-right: 25px !important;}
.div_panel{ padding:0px 10px 0px 10px;;margin:0 3px 6px 3px;font-size:13px;background:#eaeaea;display:block;float:left;font-weight:bold;line-height:44px;height:44px;overflow: hidden;}

.label_etat{color:#fff;display:inline-block;padding:2px 10px; width:100%; text-align: center;}
hr{margin:20px 0px;border-color:#c0c0c0 !important;border-top-width: 1px;}
.panel_3{background:#F44336 ;}
.panel_1{background:#4CAF50 ;}
.panel_2{background:#FF9640 ;}
#div_msg_tick{text-align: justify !important;}
#div_detail .h2_barre{margin-top:0px !important;}
#div_detail .h2_barre h2{margin-top:0px !important ;}
/*.inner_div_one_and_double > div:nth-child(2){padding-left: 0px;padding-right: 0px;float:left;width:100%}
   .inner_div_one_and_double > div:nth-child(1){padding-left: 0px;padding-right: 0px;float:left;width:100%}*/


/***************** titre d'un bloc avec la ligne et le logo en awesome font **************************/
.h2_barre_icon{ position: relative; text-align: center; border-top-width: 2px; border-top-style: solid; border-top-color: #eaedf2; border-bottom-width: medium;  border-bottom-style: none;  padding-top: 16px;  margin:40px 0px 25px 0px;}
.h2_barre_icon > [class^="fa-"], .h2_barre_icon > [class*=" fa-"]{  position: absolute;  display: block;  left: 50%;  top: -25px;  margin-left: -50px;  color: #0fa5df;  background-color: #fafafa;  font-size: 33px;  line-height: 50px;  width: 100px;  height: 50px;}
.h2_barre_icon h1, .h2_barre_icon h2, .h2_barre_icon h3, .h2_barre_icon h4, .h2_barre_icon h5, .h2_barre_icon h6{ text-transform: uppercase; font-weight: 500; margin-top: 20px;  margin-right: 10px; margin-bottom: 20px; margin-left: 10px; font-size: 26px;}

.h2_barre{margin:25px 0px 20px 0px !important;height:30px;border-bottom:2px solid #eaedf2;text-align: left !important;}
.h2_barre h2{font-size:18px;height:30px;border-bottom:2px solid #0fa5df;width:auto ;color:#555;display:inline-block;position:relative;padding-right:15px;padding-left:15px;margin:0;}
.h2_barre_center{margin:25px 0px 20px 0px !important;border-bottom:2px solid #eaedf2;text-align: center !important;height:30px;}
.h2_barre_center h2{font-size:18px;height:30px;border-bottom:2px solid #0fa5df;width:auto ;color:#555;display:inline-block;position:relative;padding-right:15px;padding-left:15px;margin:0 auto;}

.marge_30{margin-left:15px !important; margin-right:15px !important;}


.inner_div_one_and_double{margin-left:0px; margin-right:0px;overflow: hidden;}
.inner_div_one_and_double > div:nth-child(2){padding-left: 15px;padding-right: 15px;float:left;width:67%}
.inner_div_one_and_double > div:nth-child(1){padding-left: 15px;padding-right: 15px;float:left;width:33%}

.avancement_vert{color:#31b131}
.color_accentuer{color:#666;font-weight:bold;}
.link_disabled {color:#ccc;}

#pager{font-size:14px;}
.dataTables_paginate{text-align: right;margin-top:10px;}

.progression{text-align: center;}
/*table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child, table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child
{
    background:url(../images/details_close.png) no-repeat !important; background-position: 5px center;color:red !important;
}*/
div#DataTables_Table_0_wrapper.dataTables_wrapper.no-footer > table#DataTables_Table_0.table_maintenance.display.responsive.break-word.dataTable.no-footer.dtr-inline.collapsed > tbody > tr.tr_bdc.superlink > td.sorting_1
{
    background:url(../images/details_open.png) no-repeat !important; background-position: 8px center !important;
}

div#DataTables_Table_0_wrapper.dataTables_wrapper.no-footer > table#DataTables_Table_0.table_maintenance.display.responsive.break-word.dataTable.no-footer.dtr-inline.collapsed > tbody > tr#tr_bdc_.tr_bdc.superlink.parent > td.sorting_1
{ background:url(../images/details_close.png) no-repeat !important;background-position: 8px center !important; }

table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.child, table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.child, table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dataTables_empty{
    background:url(../images/details_close.png) no-repeat !important; background-position: 5px center;color:red !important;
}
.table_maintenance.dtr-inline.collapsed > tbody > tr > td:first-child, table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child
{
    position: relative;
    padding-left: 35px !important;
    cursor: pointer;
}

table.dataTable.dtr-inline.collapsed tbody td:first-child:before,
table.dataTable.dtr-inline.collapsed tbody th:first-child:before {
    top: 20px !important;
    left: 4px;
    height: 16px;
    width: 16px;
    display: block;
    position: absolute;
    color: white;
    border: 2px solid white;
    border-radius: 16px;
    text-align: center;
    line-height: 14px;
    box-shadow: 0 0 3px #444;
    box-sizing: content-box;
    content: none !important;
    background-color: #31b131;
}

.maintenance_subtitle {
    height: 64px;
    width: 100%;
    background-color: #54C8F3;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s; /* Transition is useless for regular usage but it's my dev fetish! I'll cast Cthulhu's wraith to whoever removes it. */
    p {
        font-size: 20px;
        margin: 0;
        color: white;
        transition: 0.2s; /* See comment above */
    }
}


.dataTables_wrapper .dataTables_paginate .paginate_button{padding-top:0.25em;padding-bottom:0.25em; padding-left:0.7em; padding-right:0.7em;}

.div_panel:nth-child(4n+1){width:24%;margin-left:0;margin:0;;margin-bottom:1%;}
.div_panel:nth-child(4n+2){width:24%;margin-left:0;margin:0;margin-right:1%;margin-left:1%;margin-bottom:1%;}
.div_panel:nth-child(4n+3){width:24%;margin-left:0;margin:0;;margin-bottom:1%;}
.div_panel:nth-child(4n+4){width:24%;margin-left:0;margin:0;;margin-bottom:1%;margin-left:1%;}

.utility_table thead tr {
    background-color: #807d7d;
    height: 56px;
    color: white;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}


.utility_table thead tr th {
    border-bottom: #ef7914 4px solid;
    text-align: left;
    padding-left: 8px;
}

.utility_table tbody tr {
    height: 48px;
}

.utility_table tbody tr td {
    padding-left: 8px;
}

.utility_table .darker_line {
    background: #dcdcdc;
}

.utility_table .lighter_line {
    background: #f1efef;

}

.utility_table a{color: #666; }
table.dataTable.no-footer{border-bottom:1px solid #ddd;}



.category_container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 0;
}

.category_buttons {
    padding: 16px 0;
    display: grid;
    grid-auto-rows: 48px;
    grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
    grid-gap: 16px;
}

.category_buttons a:visited {
    text-decoration: none;
}

.highlighted_category_button {
    color: red;
}

.category_button {
    display: flex;
    justify-content: left;
    align-items: center;
    padding-left: 16px;
    background-color: #f1efef;
    /*border-top: 3px #ef7914 solid;*/
    /*border-bottom: 3px #f1efef solid;*/
    font-weight: bolder;
    color: #666666;
    font-size: 15px;

    &.category_selected
    {
        background-color: #e6e6e6;
        border-top: 3px red solid;
        border-bottom: 3px #e6e6e6 solid;

        &.border1 { border-top-color: #4CAF50; }
        &.border2 { border-top-color: #FF9640; }
        &.border3 { border-top-color: #F44336; }
    }
}

.category_button p {
    margin: 0px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.category_button:hover {
    cursor: pointer;
}

.highlighted_category_button {
    color: black;
    border-top: 3px red solid;
    border-bottom: 3px #e6e6e6 solid;
    background-color: #e6e6e6;
}

@media only screen and (max-width: 1740px) {
    .category_buttons {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

@media (max-width: 1540px) {
    .category_buttons {
        grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
    }
}

@media (max-width: 1240px) {
    .category_buttons {
        grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
    }
}

@media (max-width: 1020px) {
    .category_buttons {
        grid-template-columns: repeat(auto-fill, minmax(192px, 1fr));
    }
    .category_button {
        font-size: 14px;
    }
}

@media (max-width: 780px) {
    .category_buttons {
        grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
    }
    .category_button {
        font-size: 13px;
        padding-left: 14px;
    }
}

@media (max-width: 640px) {
    .category_buttons {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
    .category_button {
        font-size: 12px;
        padding-left: 12px;
    }
}

@media (max-width: 480px) {
    .category_buttons {
        grid-template-columns: repeat(auto-fill, minmax(144px, 1fr));
    }
    .category_button {
        font-size: 11px;
        padding-left: 10px;
    }
}


@media only screen and (max-width: 1320px)
{
    .inner_div_one_and_double > div:nth-child(1){width:35%;}
    .inner_div_one_and_double > div:nth-child(2){width:65%;}

    .div_panel:nth-child(3n+1){width:33%;margin-left:0;margin:0;;margin-bottom:1%;}
    .div_panel:nth-child(3n+2){width:32%;margin-left:0;margin:0;margin-right:1%;margin-left:1%;margin-bottom:1%;}
    .div_panel:nth-child(3n+3){width:33%;margin-left:0;margin:0;;margin-bottom:1%;}

}
@media (max-width: 1080px)
{
    #div_detail .h2_barre{text-align: center !important;}
    .inner_div_one_and_double > div:nth-child(2){padding-left: 0px;padding-right: 0px;float:left;width:100%}
    .inner_div_one_and_double > div:nth-child(1){padding-left: 0px;padding-right: 0px;float:left;width:100%}
    .inner_div_one_and_double > div:nth-child(1){border-right:0;border-bottom:1px solid #ccc; }


    .table_maintenance tr td.td_etat{width:95px;}
    #div_msg_tick{padding-top:15px;}
    #info_tick tr td:first-child{width:50%;}
    #info_tick{margin-bottom:10px;}
    /*.div_panel:nth-child(5n+1){width:19%;margin-left:0;margin:0;;margin-bottom:1%;}
    .div_panel:nth-child(5n+2){width:19%;margin-left:0;margin:0;margin-right:1%;margin-left:1%;margin-bottom:1%;}
    .div_panel:nth-child(5n+3){width:20%;margin-left:0;margin:0;;margin-bottom:1%;}
    .div_panel:nth-child(5n+4){width:19%;margin-left:0;margin:0;;margin-bottom:1%;margin-right:1%;margin-left:1%;}
    .div_panel:nth-child(5n+5){width:19%;margin-left:0;margin:0;;margin-bottom:1%;}*/

}
@media (max-width: 840px) {

    #info_tick tr td:last-child{text-align:left;padding-left:4px;}


    .div_panel:nth-child(odd){width:49%;margin-left:0;margin:0;margin-right:2%;margin-bottom:2%;}
    .div_panel:nth-child(even){width:49%;margin-left:0;margin:0;margin-bottom:2%;}

}

@media (max-width: 680px) {

    .table_maintenance tr td.td_etat{width:95px;}
    #info_tick{}

}
@media (max-width: 480px) {
    .label_etat{padding:2px 2px; }
    .div_panel{width:100% !important;}
}