table.dataTable thead th, table.dataTable thead td { font-size: 12px; line-height: 13px; border-bottom: 1px solid #45a7de; text-align: left; }
table.dataTable tfoot th, table.dataTable tfoot td { font-size: 12px; line-height: 13px; border-top: 1px solid #45a7de; text-align: left; padding-left: 10px; }
table.dataTable tbody th, table.dataTable tbody td { font-size: 12px; line-height: 13px; padding: 10px !important; }
table.dataTable.compact thead th, table.dataTable.compact thead td { padding: 4px 17px 4px 10px; }
.dataTables_wrapper.no-footer .dataTables_scrollBody { border-bottom: 1px solid #45a7de; }

.clear { display: block; clear: both; width: 100%; height: 0px; margin: 0; }

div[data-role="page_content"] .content_wrapper {
    display: block; overflow: hidden;
    width: calc(100% - 36px); height: auto;
    max-width: 1600px; margin: 0 auto;
}
div[data-role="page_content"] .content_wrapper.twice .content_item {
    width: calc(50% - 5px); margin: 0;
    float: left; vertical-align: top;
}
div[data-role="page_content"] .content_wrapper.triple .content_item {
    margin: 0; float: left; vertical-align: top;
}

div[data-role="page_content"] .content_wrapper.twice .content_item.ci-60 { width: calc(60% - 5px); }
div[data-role="page_content"] .content_wrapper.twice .content_item.ci-40 { width: calc(40% - 5px); }
div[data-role="page_content"] .content_wrapper.triple .content_item.ci-33 { width: calc(33.3333% - 5px); }




div[data-role="page_content"] .content_wrapper.twice .content_item:first-of-type { margin-right: 5px; }

div[data-role="page_content"] .content_wrapper.triple .content_item { margin-right: 7.5px; }
div[data-role="page_content"] .content_wrapper.triple .content_item:last-of-type { margin-right: 0px; }


div[data-role="page_content"] .dataTables_length,
div[data-role="page_content"] .dataTables_filter,
div[data-role="page_content"] .dataTables_info,
div[data-role="page_content"] .dataTables_paginate
{
    display: flex; align-items: center;
    margin: 0 0 10px 0; padding: 0 5px; min-height: 40px;
    background: rgba(255,255,255,0.3);
    font: 400 12px/12px "Lato", sans-serif;
}

div[data-role="page_content"] .dataTables_length { width: 60%; justify-content: center; }
div[data-role="page_content"] .dataTables_info { width: 40%; justify-content: center; }

div[data-role="page_content"] .dataTables_filter { width: 40%; justify-content: flex-end; }
div[data-role="page_content"] .dataTables_paginate { width: 60%; justify-content: flex-end; }

div[data-role="page_content"] .dataTables_length,
div[data-role="page_content"] .dataTables_filter { margin: 0 0 10px 0; }

div[data-role="page_content"] .dataTables_info,
div[data-role="page_content"] .dataTables_paginate { margin: 10px 0 0 0; }

div[data-role="page_content"] .dataTables_length select { background: transparent; }
div[data-role="page_content"] .dataTables_filter input {
    min-width: 300px;
    padding: 8px;
    border: 1px solid #73d4c2; border-radius: 4px;
    background: transparent;
}

div[data-role="page_content"] table.dataTable thead th i,
div[data-role="page_content"] table.dataTable thead td i
{ font-size: 14px; vertical-align: text-bottom; }


div[data-role="page_content"] .paging_input {}
div[data-role="page_content"] .paging_input .paginate_button { background: #ddd; }
div[data-role="page_content"] .paging_input .paginate_button.disabled { background: #eee; }

div[data-role="page_content"] .paging_input .paginate-text-X { margin: 0 5px; }
div[data-role="page_content"] .paging_input .paginate_input {
    border: 1px solid #ccc; padding: 5px; width: 60px; text-align: center;
}
div[data-role="page_content"] .paging_input .paginate-text-Y { margin: 0 5px; }
div[data-role="page_content"] .paging_input .paginate_total { margin: 0 5px; }

/* smart-menu */
div[data-role="smart_menu"] {
    position: relative; top: initial; left: 0;
    width: 100%; height: auto; padding: 0;
    background: rgba(255,255,255,0.25);
    margin: 0 0 10px 0;

}
div[data-role="smart_menu"] ul {
    position: relative; margin: 0; padding: 0; width: auto; height: 100%;
    display: flex; justify-content: center;
}
div[data-role="smart_menu"] ul li {
    display: block;
    width: 120px; height: 50px; border: 3px solid rgba(255,255,255,0.6);
    margin: 10px;

    background: rgb(119,216,189);
    background: -moz-linear-gradient(-45deg, rgba(119,216,189,0.75) 0%, rgba(94,190,221,0.75) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(119,216,189,0.75) 0%,rgba(94,190,221,0.75) 100%);
    background: linear-gradient(135deg, rgba(119,216,189,0.75) 0%,rgba(94,190,221,0.75) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#77d8bd', endColorstr='#5ebedd',GradientType=1 );
}
div[data-role="smart_menu"] ul li a {
    display: flex; align-items: center; justify-content: center; flex-direction: row;
    width: 100%; height: 100%;
    text-decoration: none;
}
div[data-role="smart_menu"] ul li a i { display: block; color: #fff; margin: 0 5px 0 0; }
div[data-role="smart_menu"] ul li a span { display: block; font: 700 11px/12px "Lato", sans-serif; color: #fff; }

div[data-role="smart_menu"] ul li:hover { background: #000 !important; border: 3px solid rgba(255,255,255,1); }


/* datatable-button-default */
.datatable_button_default {
    display: flex; align-items: center; justify-content: center; text-decoration: none;

    background: #e5e5e5; border: 0;
    border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;
    padding: 5px 10px;
    font: 700 11px/12px "Lato", sans-serif; color: #222; text-transform: uppercase;
}
.datatable_button_default:hover { background: #ed1f24; color: #fff; }


#last_alerts, .notification-box {
    max-height: 336px;
    overflow-y: auto;
}
#last_alerts .notification, .notification-box .notification {
    width: calc(100% - 10px); height: auto;
    display: block; padding: 10px; margin: 0 0 5px 0; overflow: hidden;
    background: rgba(255,255,255,0.5);
    border-radius: 10px;
    line-height: 12px;
}
#last_alerts .notification:nth-child(1), .notification-box .notification:nth-child(1) { background: rgba(255,255,255,1); }
#last_alerts .notification:nth-child(2), .notification-box .notification:nth-child(2) { background: rgba(255,255,255,0.85); }
#last_alerts .notification:nth-child(3), .notification-box .notification:nth-child(3) { background: rgba(255,255,255,0.75); }
#last_alerts .notification:nth-child(4), .notification-box .notification:nth-child(4) { background: rgba(255,255,255,0.65); }


#last_alerts .notification > span, .notification-box .notification > span { margin: 0; font-size: 12px; }
#last_alerts .notification .notif-date, .notification-box .notification .notif-date {
    display: block; float: left; vertical-align: top;
    width: 130px;
    color: #777;
}
#last_alerts .notification .notif-device, .notification-box .notification .notif-device {
    display: block; float: left; vertical-align: top;
    width: calc(100% - 130px);
}
.coi_header .material-icons.calendar { font-size: 26px; }


/* #1800 */
@media (max-width: 1800px) {
}
/* #1200 */
@media (max-width: 1200px) {
div[data-role="page_content"] .dataTables_length,
div[data-role="page_content"] .dataTables_info,
div[data-role="page_content"] .dataTables_filter,
div[data-role="page_content"] .dataTables_paginate { float: none; width: 100%; clear: both; justify-content: center; }
}




@media (max-width: 1170px) {
    div[data-role="page_content"] .content_wrapper.twice .content_item { width: 100% !important; margin: 0; float: none; vertical-align: top; }
    div[data-role="page_content"] .content_wrapper.triple .content_item { width: 100% !important; margin: 0 0 10px 0 !important; float: none; vertical-align: top; }
    div[data-role="page_content"] .content_wrapper.twice .content_item:first-of-type { margin-right: 0px; margin-bottom: 10px; }

    .clear { margin: 0; }
    .coi-content .ct-overlay {}


}
.loadingDiv{
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.4);
    z-index: 100000;
}