html, body{
    width: 100%;
    height: 100%;
}

body{
    display: flex;
    flex-direction: column;
}

header{
    height: 60px;
}

footer{
    margin-top: auto;
    min-height: 43px;
}

/*=======================================================
# MAIN CONTAINER ADJUST
=======================================================*/
main.container, header .container, footer .container{
    max-width: 100%;
    padding: 0px;
}

/*=======================================================
# HEADER
=======================================================*/
.navbar-brand img{
    height: 30px;
    margin-right: 10px;
}

/*=======================================================
# GESTIONE COLONNE
=======================================================*/
.main_container{
    display: flex;
}

.col_sx{
    min-width: 180px;
    max-width: 180px;
    width: 180px;    
}

.col_dx{
    width: 100%;
    padding: 0 10px;
}

@media only screen and (max-width: 768px) {
    .col_sx{
        display: none;
    }
}

/*=======================================================
# DASHBOARD
=======================================================*/
.dashboard_box{
    width: 100%;
    max-width: 220px;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    margin: 10px;
}

.dashboard_box h5{
    text-transform: uppercase;
    font-size: 14px;
    color: #aaa;
}

.dashboard_box p{
    font-size: 40px;
}

@media only screen and (max-width: 768px) {
    .page-dashboard .alert-db,
    .page-dashboard .col-menu,
    .page-dashboard .report
    {
        display: none;
    }
}



/*=======================================================
# MENU
=======================================================*/
.menu_button{
    margin-left: auto;
    cursor: pointer;
}

.menu_button i{
    color: #fff;
    font-size: 30px;
}

.menu .list-group-item{
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px;
}

.menu .list-group-item i{
    position: absolute;
    right: 10px;
    font-size: 14px;
    color: #aaa;
}

.menu .list-group-item.active i{
    color: #fff;
}

.menu .list-group-item:hover:not(.active){
    border-left: 3px solid var(--color-primary);
    color: var(--color-primary);    
}

.menu .list-group-item:hover:not(.active) i{
    color: var(--color-primary);    
}

/*=======================================================
# SETTING
=======================================================*/
.tab-pane label.title{
    margin: 20px 0 0 0;
    font-size: .8em;
    font-style: italic;
    display: block;
    color: #333;
    border-bottom: 1px solid #ddd;
    padding-bottom: 3px;
}

.tab-pane h2{
    margin: 5px 0 15px 0;    
    font-size: 1em;
    display: block;
    color: #333;
}

.tab-pane{
    background: #fff;
}

/*=======================================================
 DATEPICKER
=======================================================*/
#ui-datepicker-div{ z-index: 2000 !important; }
.ui-datepicker{width:238px;height:auto;padding:10px;margin:5px auto 0;font:9pt Arial,sans-serif;-webkit-box-shadow:0 0 10px 0 rgba(0,0,0,.5);-moz-box-shadow:0 0 10px 0 rgba(0,0,0,.5);box-shadow:0 0 10px 0 rgba(0,0,0,.5)}.ui-datepicker-
{border:none;background:#fff}.ui-datepicker a{text-decoration:none}.ui-datepicker table{width:100%}.ui-datepicker td a{text-align:center;border:1px solid #fff!important;border-radius:3px;padding:0;height:30px;width:30px;line-height:30px;font-size:14px}
.ui-timepicker-div .ui_tpicker_unit_hide,.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time,.ui-timepicker-div.ui-timepicker-oneLine dt{display:none}.ui-timepicker-div .ui-widget-header{margin-bottom:8px}.ui-timepicker-div dl{text-align:left}.ui-timepicker-div dl dt{float:left;clear:left;padding:0 0 0 5px}.ui-timepicker-div dl dd{margin:0 10px 10px 45%}.ui-timepicker-div td{font-size:90%}.ui-tpicker-grid-label{background:0 0;border:none;margin:0;padding:0}.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input{background:0 0;color:inherit;border:none;outline:0;border-bottom:solid 1px #555;width:95%}.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input:focus{border-bottom-color:#aaa}.ui-timepicker-rtl{direction:rtl}.ui-timepicker-rtl dl{text-align:right;padding:0 5px 0 0}.ui-timepicker-rtl dl dt{float:right;clear:right}.ui-timepicker-rtl dl dd{margin:0 40% 10px 10px}.ui-timepicker-div.ui-timepicker-oneLine{padding-right:2px}.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label{display:block;padding-top:2px}.ui-timepicker-div.ui-timepicker-oneLine dl{text-align:right}.ui-timepicker-div.ui-timepicker-oneLine dl dd,.ui-timepicker-div.ui-timepicker-oneLine dl dd>div{display:inline-block;margin:0}.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before,.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before{content:':';display:inline-block}.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_microsec:before,.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_millisec:before{content:'.';display:inline-block}.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide,.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before,.ui_tpicker_hour_label,.ui_tpicker_minute_label,.ui_tpicker_time_label{display:none}.ui_tpicker_time{margin-left:0!important;font-size:34px;float:left;border-top:1px solid #ddd;padding-top:5px}.ui_tpicker_time_input{border:none!important}.ui_tpicker_hour{padding-top:10px!important}.ui-timepicker-div .ui-slider-horizontal{height:8px}.ui-timepicker-div .ui-slider-handle{height:14px;width:14px}

/*=======================================================
 SELECTPICKER CUSTOMIZATION
=======================================================*/
.bootstrap-select .btn{
  background-color: #ffffff !important;
    color: #495057 !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    border: 1px solid #ccc !important;
}

.bootstrap-select .btn:hover{
    background-color: #ffffff !important;
    color: #495057 !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    box-shadow: none !important;
    border: 1px solid #ccc !important;
}

ul.dropdown-menu.inner li.active a{
  background: #ccc !important;
  color: #000 !important;
  font-weight: bold;
}

/*=======================================================
# MODAL FULL
=======================================================*/
.modal-full .modal-dialog {
    margin: 0px;
}

.modal-full .modal-content {
    min-height: 100vh;
    min-width: 100vw;
}

/*=======================================================
# MODAL FULL
=======================================================*/
.modal-med .modal-dialog {
    margin: 0 20vh;
}

.modal-med .modal-content {
    min-height: 80vh;
    min-width: 80vw;
}



/*=====================================================
# MODAL CUSTOMIZATION
=====================================================*/
.modal{
    pointer-events: none;
}

.modal-dialog {
    pointer-events: none;
}

.modal-content{
    border: 3px solid #ccc;
    border-radius: 0;
}

.modal-header{
    padding: 10px;
    border-bottom: 0;
}

.modal-body{
    padding: 10px;
}

.modal-header .close {
    padding: 0;
    margin: 0;
    font-size: 43px;
    line-height: 0.5;
}

.modal-footer{
    padding: 5px;
    border-top: 0;
}

/*=======================================================
# LOGIN
=======================================================*/
.page-login{
    min-height: calc(100vh - 110px);
    display: flex;
    align-items: center;
}

.page-login form{
    display: block;
    border: 1px solid #ccc;
    background-color: #f8f8f8;
    border-radius: 5px;
    width: 100%;
    max-width: 360px;
    padding: 20px;
    margin: 0 auto;
}

/*=======================================================
# MAIN
=======================================================*/
.page-main, .col-menu, .col-main{
    min-height: calc(100vh - 300px);
    height: 100%;
}

.page-main{
    display: flex;
    justify-content: space-evenly;
    height: calc(100vh - 102px);
}

.col-menu{
    min-width: 170px;
    background-color: #4E5760;
    display: flex;
    flex-direction: column;
}

.col-menu a{
    display: flex;
    align-items: center;
    color: #fff;
    text-decoration: none;    
    padding: 10px;
    border-bottom: 1px solid #41484F;
}

.col-menu.menu_short{
    min-width: 50px;
}

.col-menu.menu_short a{
    justify-content: center;
}

.col-menu.menu_short a i{
    font-size: 20px;
    margin-right: 0;
}

.col-menu.menu_short a span{
    display: none;
}


.col-menu a.active{
    background-color: #000;
}

.col-menu a i{
    font-size: 15px;
    margin-right: 10px;
}

.col-menu a:hover{
    background-color: #41484F;
}

.col-main{
    width: 100%;
    overflow: auto;
}

/*=======================================================
# DROPDOWN
=======================================================*/
#tasks_list .dropdown .btn{
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
}


#tasks_list .dropdown-toggle::after{
    margin-left: auto;
}

#edit_project_tasks .bootstrap-select{
    width: 150px;
}

#tasks_list .handle{
    cursor: move;
}

#tasks_list .row_task{
    background-color: #fff;
}

#tasks_list .arrows_container{    
    line-height: 0px;
}

#tasks_list .arrows_container i{
    cursor: pointer;
    color: #ccc;
}

#tasks_list .arrows_container i:hover{
    color: #000;
}

/*=====================================================
# TABLE TITLE
=====================================================*/
.table_title th{        
    font-size: 12px;
    text-transform: uppercase;    
    padding: 5px 10px;
    font-weight: normal;
    background-color: #f8f8f8;  
}

.table_title_today th{    
    color: #2092BC;
    font-weight: bold;
}

.table_title_today th:before{
    content: "\f069";    
    font-family: "Font Awesome 5 Pro"; font-weight: 900;
}   

/*=======================================================
# AUTOCOMPLETE FIX
=======================================================*/
.ui-autocomplete{
    z-index: 10000;
}

/*=======================================================
# INFO DATA TASK (QUOTAZIONI)
=======================================================*/
.info_data_task{
    display: none;
    background-color: #ccc;
    color: #fff;
    font-size: 12px;
    padding: 0px 5px;
    border-radius: 0 3px 3px;
    font-weight: bold;
}

.info_data_task div{
    display: flex;
    align-items: center;
    height: 100%;
    line-height: 1.2;
    text-align: center;
}

#timing_list_container .timer-row.active,
#bar-container .bar.active
{
    background-color: #b3d1ff;
}

#bar-container{
    height: 15px;
    width: 100%;
    background-color: #000;
    margin-bottom: 10px;
    border-radius: 5px;
    display: flex;
    border: 2px solid #000;
}

#bar-container .bar{
    height: 100%;
    background-color: #f8f8f8;
    border-right: 2px solid #000;
    cursor: pointer;
    font-size: 10px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;
}

#bar-container .bar .tooltip-info{
    display: none;
    top: 15px;
    position: absolute;
    background-color: #4d4c4c;
    color: #fff;
    border: 2px solid #000;
    border-radius: 5px;
    font-size: 12px;
    padding: 5px;
    z-index: 5;
    line-height: 1.3;
}

#bar-container .bar.active .tooltip-info,
#bar-container .bar:hover .tooltip-info{
    display: block;
}


#bar-container .bar:last-child{
    border-right: 0;
}

#bar-container .bar.idle{
    background-image: url(../css/images/ui-bg_diagonals-thick_20_666666_40x40.png);
}

.selector_col{
    display: none;
}

.selector_active .selector_col{
    display: table-cell;
}

/*=======================================================
# REPORT
=======================================================*/
.report_row{
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px;
}

/*=======================================================
# TASKS UNASSIGNED
=======================================================*/
.tasks_unassigned{
    position: fixed;
    width: 500px;
    right: -500px;
    top: 59px;
    height: calc(100vh - 102px);
    background-color: #fff;
    z-index: 10;
    transition: .3s;
    border-left: 2px solid #333;
}

.tasks_unassigned_title{
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    padding-bottom: 8px;
    margin-bottom: 8px;
}

.tasks_unassigned .tasks_unassigned_handle{
    position: absolute;
    top: 4px;
    left: -46px;
    height: 46px;
    width: 46px;
    background-color: #fff;        
    border: 2px solid #333;
    border-right: none;
    border-radius: 10px 0 0 10px;
    cursor: pointer;

    text-align: center;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c22222;
    font-weight: bold;
}   

.tasks_unassigned.open{
    right: 0px;
    transition: .3s;
}

.tasks_unassigned_container{
    padding: 10px;
}

.task_unassigned_row{
    border: 1px solid #ccc;
    padding: 5px 10px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.task_unassigned_row_content{
    width: 100%;
}

.task_unassigned_row_button{
    display: flex;
}

/*================================================================
# SCONTRINI
================================================================*/
.row_scontrino{
    display: flex;
    align-items: center;
    padding: 5px;
}

.row_scontrino:nth-child(odd){
    background-color: #eee;
}

.row_scontrino_buttons{
    margin-left: auto;
}

.list_scontrino{
    max-height: calc(100vh - 400px);
    overflow: auto;
}

/*================================================================
# TODOLIST
================================================================*/
.todo-list-container{
    display: none;
}

.todo-sidebar{
    height: 100vh;
    width: 400px;
    position: fixed;
    background-color: #fff;
    top: 0;
    right: 0;
    z-index: 10000;
    border-left: 3px solid #000;
}

.todo-list-container.open{
    display: block;
}

.todo-list-container .header{
    display: flex;
    padding: 10px;
}

.todo-list-container .todo-list-content{
    padding: 10px;
}

.todo-list-container .todo-list-content .todo-filter-warning{
    display: none;
    cursor: pointer;
    margin-top: 10px;
}

.todo-list-container .todo-list{
    margin-top: 10px;
    max-height: calc(100vh - 120px);
    overflow: auto;
}

.todo-element{
    padding: 5px;
    border-radius: 5px;
    background-color: #ddd;
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    overflow: hidden;
}

.todo-element.child{
    margin-left: 20px;
}

.todo-element .text a{
    width: 100%;
    color: #000;
}

.todo-element .todo-handle{
    border-right: 2px solid #fff;
    width: 15px;
    height: 40px;
    margin: -10px 10px -10px -5px;
    cursor: pointer;
}

.todo-element input{
    display: none;
}

.todo-overlay{
    background-color: rgba(0,0,0,.3);
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    cursor: pointer;
}