div[data-role="top_wrapper"] { position: relative; display: block; width: 100%; height: 75px; background: rgba(255,255,255,0.25); margin: 0 0 5px 0; }
div[data-role="top_wrapper"] .tw_logo { display: block; overflow: hidden; }
div[data-role="top_wrapper"] .tw_logo img { display: block; width: auto; height: 54px; margin: 10px auto 10px auto; }
div[data-role="top_wrapper"] .tw_user {
    z-index: 99999;
    position: absolute; top: 0; right: 0;
    margin: 0 10px 0 0; padding: 20px;
    width: 300px; height: 75px; height: auto;
}
div[data-role="top_wrapper"] .tw_global {
    z-index: 99998;
    position: absolute; top: 0; left: 0;
    margin: 0 0 0 10px; padding: 20px;
    width: 300px; height: 75px; height: auto;
}



div[data-role="top_wrapper"] .tw_user.a { background: #fff; height: auto; box-shadow: 0px 2px 5px rgba(0,0,0,0.1); }

div[data-role="top_wrapper"] .tw_user .twu_trigger,
div[data-role="top_wrapper"] .tw_global .twg_trigger,
div[data-role="top_wrapper"] .back_to_devices {
    cursor: pointer;
    position: absolute; top: 0;
    width: 42px; height: 42px;
    border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%;
    display: flex; align-items: center; justify-content: center;

    background: rgb(119,216,189);
    background: -moz-linear-gradient(-45deg, rgba(119,216,189,1) 0%, rgba(94,190,221,1) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(119,216,189,1) 0%,rgba(94,190,221,1) 100%);
    background: linear-gradient(135deg, rgba(119,216,189,1) 0%,rgba(94,190,221,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#77d8bd', endColorstr='#5ebedd',GradientType=1 );
    border: 3px solid rgba(255,255,255,0.6);
    color: #fff;
    transition: all 0.2s linear 0s;
    text-decoration: none;
}
    div[data-role="top_wrapper"] .tw_user .twu_trigger.red {
        background: rgb(248,80,50);
        background: -moz-linear-gradient(-45deg,  rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);
        background: -webkit-linear-gradient(-45deg,  rgba(248,80,50,1) 0%,rgba(241,111,92,1) 50%,rgba(246,41,12,1) 51%,rgba(240,47,23,1) 71%,rgba(231,56,39,1) 100%);
        background: linear-gradient(135deg,  rgba(248,80,50,1) 0%,rgba(241,111,92,1) 50%,rgba(246,41,12,1) 51%,rgba(240,47,23,1) 71%,rgba(231,56,39,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=1 );
    }

div[data-role="top_wrapper"] .tw_user .twu_trigger { right: 0; margin: 16.5px 16.5px 0 0; }
div[data-role="top_wrapper"] .tw_global .twg_trigger { left: 0; margin: 16.5px 0 0 16.5px; }
div[data-role="top_wrapper"] .back_to_devices { z-index: 999999; left: 0; margin: 16.5px 0 0 80px; }


div[data-role="top_wrapper"] .tw_user .twu_trigger:hover,
div[data-role="top_wrapper"] .tw_global .twg_trigger:hover,
div[data-role="top_wrapper"] .back_to_devices:hover {
    border-color: #fff;
}
div[data-role="top_wrapper"] .tw_user.a .twu_trigger,
div[data-role="top_wrapper"] .tw_global.a .twg_trigger
{ border-color: #fff; background: #000; }

div[data-role="top_wrapper"] .tw_user .x,
div[data-role="top_wrapper"] .tw_global .y_
{ display: none; }
div[data-role="top_wrapper"] .tw_user.a .x,
div[data-role="top_wrapper"] .tw_global.a .y_
{ display: block; }

div[data-role="top_wrapper"] .tw_user .twu_person .twup_name {
    display: block; width: 220px; overflow: hidden;
    font: 700 13px/18px "Lato", sans-serif; color: #000;
    margin: 0 0 3px 0;
}
div[data-role="top_wrapper"] .tw_user .twu_person .twup_access {
    display: block; width: 220px; overflow: hidden;
    font: 400 13px/18px "Lato", sans-serif; color: #aaa;
}
div[data-role="top_wrapper"] .tw_user .twu_person .twup_name i,
div[data-role="top_wrapper"] .tw_user .twu_person .twup_access i {
    float: left; vertical-align: top; margin: 0 5px 0 0;
    font-size: 18px; line-height: 18px; color: #aaa;
}
div[data-role="top_wrapper"] .tw_user .twu_spacer { display: block; clear: both; overflow: hidden; width: 100%; height: 1px; background: #eee; margin: 10px 0; }

div[data-role="top_wrapper"] .tw_user .twu_interface_level {}
div[data-role="top_wrapper"] .tw_user .twu_interface_level span { display: block; font: 400 12px/18px "Lato", sans-serif; color: #999; }
div[data-role="top_wrapper"] .tw_user .twu_interface_level a { display: block; font: 700 13px/18px "Lato", sans-serif; color: #3a9ed9; text-decoration: none; }
div[data-role="top_wrapper"] .tw_user .twu_interface_level a i { float: left; vertical-align: top; font-size: 16px; line-height: 18px; }
div[data-role="top_wrapper"] .tw_user .twu_interface_level a:hover { color: #73d4c2; }

div[data-role="top_wrapper"] .tw_user .twu_menu {}
div[data-role="top_wrapper"] .tw_user .twu_menu ul {}
div[data-role="top_wrapper"] .tw_user .twu_menu ul li { margin: 2px 0; }
div[data-role="top_wrapper"] .tw_user .twu_menu ul li a {
    display: block; font: 700 13px/24px "Lato", sans-serif; color: #424242; text-decoration: none;
}
div[data-role="top_wrapper"] .tw_user .twu_menu ul li a i { float: left; vertical-align: top; width: 24px; height: 24px; font-size: 24px; margin: 0 5px 0 0; }
div[data-role="top_wrapper"] .tw_user .twu_menu ul li a:hover { color: #73d4c2; }


div[data-role="top_wrapper"] .tw_global .y_ {
    position: fixed; top: 0; left: 0;
    width: 300px; height: 100%;
    background: rgba(255,255,255,0.8);
    margin: 0 0 0 10px; padding: 90px 20px 20px 20px;
}
div[data-role="top_wrapper"] .tw_global .twg_menu {}
div[data-role="top_wrapper"] .tw_global .twg_menu ul { margin: 0; padding: 0; list-style: none; }
div[data-role="top_wrapper"] .tw_global .twg_menu ul li {}
div[data-role="top_wrapper"] .tw_global .twg_menu ul li a {
    display: block; padding: 10px;
    font: 400 16px/16px "Lato", sans-serif; color: #000;
    text-decoration: none;
}
div[data-role="top_wrapper"] .tw_global .twg_menu ul li a:hover {
    background: #000; color: #fff;
}
div[data-role="top_wrapper"] .tw_global .twg_menu .twg_menu_bubble {
    margin: 20px 0 0 10px;
    padding: 20px 25px;
    background: #fff;
    font: 400 14px/20px "Lato", sans-serif;
    border-radius: 8px;
    box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
}
div[data-role="top_wrapper"] .tw_global .twg_menu .twg_menu_bubble a {
    display: block;
    font: 700 16px/16px "Lato", sans-serif;
    color: #46a7de;
    text-decoration: none;
    letter-spacing: 0.02em;
    margin-top: 15px;
}

#login_block {
    position: relative; display: block;
    width: 400px; height: auto;
    margin: 100px auto 0 auto; padding: 30px;
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.55);
}

#login_block .lb_header { height: 40px; }
#login_block .lb_logo {display: block; width: auto; height: 50px; }
#login_block .lb_sec { font-size: 36px; color: rgba(255,255,255,0.3); position: absolute; top: 0; right: 0; margin: 30px 30px 0 0; }

#login_block .form-group { display: block; margin: 30px 0 0 0; }
#login_block .form-group label {
    display: block;
    font: 700 10px/10px "Lato", sans-serif; color: rgba(0,0,0,0.5);
    text-transform: uppercase;
}
#login_block .form-group input {
    display: flex; align-items: center; justify-content: center;
    margin: 0; padding: 0; border: 0;
    width: 100%; height: 50px;
    border-bottom: 2px solid #fff;
    background: transparent;
    font: 20px/20px "Lato", sans-serif; color: #000;
    text-align: center;

    transition: all 0.75s linear 0s;
}
#login_block .form-group input:focus {
    border-color: #000;
}


#login_block .form-actions {}
#login_block .form-actions input[type="submit"] {
    cursor: pointer;
    position: relative; display: block; margin: 30px auto 0 auto;
    width: 250px; height: 40px;
    background: #fff;
    font: 700 18px/18px "Lato", sans-serif;
}
#login_block .form-actions input[type="submit"]:hover { background: #000; color: #fff; }






/* content wrapper / items */
div[data-role="page_content"] {}
div[data-role="page_content"] .content_item {
    display: block;
    width: calc(100% - 36px); max-width: 1600px;
    height: auto; min-height: 400px;
    margin: 10px auto;

    background: rgba(255,255,255,0.6);
    border: 2px solid rgba(0,0,0,0.2);

}
div[data-role="page_content"] .content_item .coi_header {
    position: relative; display: block;
    width: 100%; height: 50px;
    background: rgba(255,255,255,0.6);
}
div[data-role="page_content"] .content_item .coi_header span {
    float: left;
    display: flex; align-items: center;
    width: 60%; height: 50px;
    font: 700 16px/18px "Lato", sans-serif; color: #3ac4b1;
    text-transform: uppercase;
}
div[data-role="page_content"] .content_item .coi_header.calendar_index span { width: calc(100% / 3); }


div[data-role="page_content"] .content_item .coi_header span i {
    display: flex; align-items: center; justify-content: center;
    float: left; vertical-align: top;
    width: 46px; height: 46px;
    background: #73d4c2; color: #fff; font-size: 30px;
    margin: 2px 15px 2px 2px;
}
div[data-role="page_content"] .content_item .coi_header:after {
    content: "";
    display: block; clear: both; overflow: hidden;
    width: 100%; height: 1px;
    background: rgba(0,0,0,0.1);
}
div[data-role="page_content"] .content_item .coi_header .coih_button {
    display: flex; align-items: center; justify-content: center;
    float: right;
    width: auto; height: 30px; padding: 0 10px; margin: 10px 10px 0 0;
    background: #e5e5e5; border-radius: 4px;
    font: 700 10px/10px "Lato", sans-serif; color: #45a7de;
    text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em;
}
div[data-role="page_content"] .content_item .coi_header .coih_button:hover {
    cursor: pointer;
    background: #ed2023; color: #fff;
}
div[data-role="page_content"] .content_item .coi_header .collapse {
    display: flex; align-items: center; justify-content: center;
    float: right;
    width: auto; height: 30px; padding: 0 10px; margin: 10px 10px 0 0;
    background: #e5e5e5; border-radius: 4px;
}
div[data-role="page_content"] .content_item .coi_header .collapse .collapse-text { font: 700 10px/10px "Lato", sans-serif; color: #E91E63; text-transform: uppercase; letter-spacing: 0.05em; margin-left: 5px; }
div[data-role="page_content"] .content_item .coi_header .collapse .material-icons { color: #E91E63; font-size: 16px; }

div[data-role="page_content"] .content_item .coi_header .collapse .collapse-text:before { content: "Zwiń"; }
div[data-role="page_content"] .content_item .coi_header .collapse[data-status="collapsed"] .collapse-text:before { content: "Rozwiń"; }
div[data-role="page_content"] .content_item .coi_header .collapse[data-status="collapsed"] .material-icons { transform: rotate(180deg); }

div[data-role="page_content"] .content_item .coi_header .collapse:hover { cursor: pointer; background: #E91E63; }
div[data-role="page_content"] .content_item .coi_header .collapse:hover .collapse-text { color: #fff; }
div[data-role="page_content"] .content_item .coi_header .collapse:hover .material-icons { color: #fff; }


div[data-role="page_content"] .content_item .coi_header .small_coiheader { font-size: 13px; color: #aaa; margin-left: 5px; }



div[data-role="page_content"] .content_item .coi_content {
    display: block; padding: 5px; /*overflow: hidden;*/
}





/* DataTables additional actions */
.dt-buttons {
    display: flex; align-items: center; justify-content: space-evenly;
    width: 60%; height: 40px; background: rgba(255,255,255,0.3);
}
.dt-buttons .dt-button { background: transparent; border: 1px solid #73d4c2; font: 700 12px/12px "Lato", sans-serif; color: #444; margin: 0; padding: 9px 15px; border-radius: 4px; }
.dt-buttons .dt-button-collection { width: 250px; padding: 5px; }
.dt-buttons .dt-button-collection .dt-button { width: calc(50% - 4px); float: left; margin: 2px; padding: 5px 3px; }
#devices_list_filter { width: 40%; height: 40px; }

button.dt-button:hover:not(.disabled), div.dt-button:hover:not(.disabled), a.dt-button:hover:not(.disabled)
{ background-image: none !important; background-color: #000 !important; border: 1px solid #000 !important; color: #fff; }

/* Device Metrics Table */
.compact-table.ct-50 {
    display: table; border-collapse: collapse;
    width: calc(50% - 5px); float: left;
    border: 1px solid #aaa;
}


.coi_content .ct-overlay { max-height: 336px; overflow-y: auto; }
.coi_content .ct-overlay .compact-table
{ margin: 0 0 5px 0 !important; }



.compact-table.ct-100 {
    display: table; border-collapse: collapse;
    width: 100%; float: none;
    border: 1px solid #aaa;
}

.coi_content .compact-table.ct-100:not(first-of-type) { margin-top: 1px; }


.compact-table th, .compact-table td {
    padding: 4px 7px; font-size: 12px;
    border: 1px solid #aaa; border-top: 0; border-left: 0;
    letter-spacing: 0.01em;
}

.compact-table th {
    font-weight: 700; width: 175px;
    background: rgba(115, 212, 194, 0.25);
}
.compact-table th.th-spacer {
    background: #fff; text-transform: uppercase;
    font-size: 12px; color: #222; letter-spacing: 0.05em; text-align: left;
    margin: 0; padding: 0;
    }

.compact-table th.th-spacer i { color: #ccc;
    font-size: 20px; line-height: 20px;
    float: left; vertical-align: top; margin: 5px 5px 0 5px;
}
.compact-table th.th-spacer span { height: 30px; display: flex; align-items: center; }


/*.compact-table td { border-right: 0; }*/
.compact-table .input-format { display: block; font-weight: 700; font-size: 10px; color: #777; margin: 3px 0 0 3px; }


.compact-table td input {
    width: 100%; padding: 7px; line-height: 13px;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;
}

.compact-table td select {
    background: #fff;
    padding: 0 7px; line-height: 13px;
    min-width: 75px; height: 29px;
    border: 1px solid rgba(0,0,0,0.2);
}

.compact-table td .tel_prefix { display: inline-block; width: 25px; }
.compact-table td input[type="tel"] { width: calc(100% - 80px); }
.compact-table td select[name="phonePrefix"] { max-width: 75px; }
.compact-table td input[type="submit"] { width: 150px; }

#devices_list td .status_0,
#devices_list td .status_1,
#devices_list td .lcstatus_0,
#devices_list td .lcstatus_1 { display: block; text-align: center; }

#devices_list td .status_1 i,
#devices_list td .status_0 i { font-size: 16px; }
#devices_list td .status_1 i { color: green; }
#devices_list td .status_0 i { color: red; }

#devices_list td .lcstatus_1 i,
#devices_list td .lcstatus_0 i { font-size: 16px; }
#devices_list td .lcstatus_1 i { color: green; }
#devices_list td .lcstatus_0 i { color: red; }

#devices_list td .lcstatus_1 #wifi_off { display: none; }
#devices_list td .lcstatus_0 #wifi { display: none; }



.text-center { text-align: center; }
.pseudo-input {
    display: block; width: 100%; padding: 7px; background: #f5f5f5;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;
}
input[readonly] { background-color:#f5f5f5; }




@media screen and (max-width: 1200px) {
    .dt-buttons { float: none !important; width: 100%; }
    #devices_list_filter { width: 100%; margin: 1px 0 10px 0; }
}



#device-alerts_list {}
#device-alerts_list td { text-align: center; }


.inline_logic { display: flex; align-items: center;}
.inline_logic label { margin-right: 10px; }
.inline_logic select { width: 100px; height: 30px; margin-right: 10px; border: 1px solid #ddd; border-radius: 4px; }
.inline_logic input { width: 100px !important; height: 30px; margin-right: 10px; border: 1px solid #ddd; border-radius: 4px; }


.select2-container { min-width: 300px; }
.select2-results__option { font-size: 12px !important; }


.temp_modal {
    display: block;
    width: 100%;
    background: #ff0000;
    text-align: center;
    font: 700 12px/12px "Lato", sans-serif;
    color: #fff;
    padding: 5px;
}

.content_item.collapsed {
    height: 54px !important; min-height: 0 !important; overflow: hidden;
}


.archive_datepicker { width: 70%; float: right; display: flex; align-items: flex-start; justify-content: flex-end; }
.archive_datepicker > span { float: none !important; width: auto !important; color: #e91e63 !important; font-size: 14px !important; }
.archive_datepicker > span input[type="text"] { border: 1px solid #ddd; padding: 7px 5px; width: 150px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }

.compact-table td label { display: inline-block; vertical-align: top; }
.checkbox-wrapper {
    display: flex; align-items: center;
    width: 25%; height: 40px;
    float: left; vertical-align: top; padding: 5px;
}
.checkbox-wrapper:nth-child(2),
.checkbox-wrapper:nth-child(4),
.checkbox-wrapper:nth-child(5),
.checkbox-wrapper:nth-child(7),
.checkbox-wrapper:nth-child(10) { background: rgba(115,212,194,0.25); }
.checkbox-wrapper:hover { background: rgba(115,212,194,0.6); }

.checkbox-wrapper:hover label { cursor: pointer; }

#datepicker-cron, #datepicker-report-from, #datepicker-report-to { width: 150px; }

.list_of_devices { position: relative; }
.list_of_devices a { display: block; margin:2px 0; text-align: center; }



.tooltip {
    z-index: 9999999;
    position: absolute; top: 0; left: 0;
    width: 275px; margin-left: -275px; margin-top: -50%;
    display: block; height: auto; padding: 0;
    background: #fff; font-size: 11px; line-height: 14px;
    border: 1px solid #bdbdbd; border-radius: 5px;
    box-sizing: border-box; padding: 10px;
    box-shadow: 0px 6px 10px rgba(0,0,0,0.3);
}
.to_right .tooltip { margin-left: 0; left: 100%; }


.tooltip div { display: block; clear: both; overflow: hidden;}
.tooltip div p {
    display: block; clear: both; overflow: hidden;
    width: 100%; border-top: 1px solid #ddd;
    margin: 0; padding: 5px 0;
}

.tooltip div p:first-of-type { border-top: 0; margin-top: 10px; }

.tooltip div span { display: block; float: left; vertical-align: top; width: 60%; }


.tooltip div span.key { width: 40%; color: #666; text-align: right; padding-right: 10px; }
.tooltip div span.value_id { font-weight: 700; color: #44a7de; }
.tooltip div span.value_dn { font-weight: 700; }


.dataTables_scrollBody { overflow: visible !important; }



.tooltip .goto,.tooltip .closeme {
    display: flex; align-items: center; justify-content: center;
    width: auto; height: 25px; padding: 0 10px; margin: 0;
    vertical-align: top;
    font: 700 11px/11px "Lato", sans-serif; color: #151515; text-decoration: none;
    background: #eee;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;
}

.tooltip .goto { float: left; }
.tooltip .closeme { float: right; }
.tooltip .closeme:hover {
    background: #ed2023;
    color: #fff;
}
.tooltip .goto:hover {
    background: #4caf50;
    color: #fff;
}


.complex-tooltip {
    display: none;
    background: #fff;
    position: absolute;z-index: 999999;
    width: auto;

    font: 400 11px/12px "Lato", sans-serif;
    box-sizing: border-box; padding:5px;
    box-shadow: 0px 0px 3px rgba(0,0,0,0.2);

    border: 1px solid #eee;
    border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;
}

.lang {
    position: absolute;
    top: 16.5px; right: 65px;
    width: 42px;
    height: 42px;
    transition: all 0.2s linear 0s;
    text-decoration: none;
    text-transform: uppercase;
}

.lang .select2-container {
    min-width: auto;
}

.lang .select2-container .select2-selection__arrow {
    visibility: hidden;
}

.lang .select2-container .select2-selection {
    background: none;
    border: 0;
    margin-top: 4px;
    margin-left: 0px;
}

.select2-container--open {
    z-index: 99999;
}

.lang .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #2196f3; font-size: 14px; font-weight: 700;
    padding-right: 10px;
}
.select2-container--open { min-width: 0; }



/* dashboard - edit */
.dashboard-row {
    border: 2px solid rgba(0,0,0,0.4); background: rgba(150,150,150,0.1);
    border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;
    margin: 20px 10px 0px 10px;
    padding: 5px;
    position: relative;
}
.dashboard-row:before {
    content: attr(data-row);
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 0; left: 50%;
    width: 30px; height: 20px;
    margin: -11px 0 0 -15px;
    background: #7e8686;
    border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;
    color: #fff; font-size: 12px; font-weight: 700;
}

.dashboard-row form table.ct-100 { width: calc(100% - 20px); margin: 10px; }
.dashboard-row form table.ct-75 { width: calc(75% - 20px); margin: 10px; }
.dashboard-row form table.ct-50 { width: calc(50% - 20px); margin: 10px; }
.dashboard-row form table.ct-33 { width: calc(33.3333% - 20px); margin: 10px; }
.dashboard-row form table.ct-25 { width: calc(25% - 20px); margin: 10px; }

.dashboard-row .compact-table .removeBox { font-size: 22px !important; color: #444; top: 0 !important; right: 0 !important; }





/* faq'o'herezje */
div[data-role="page_content"] .faq_wrapper {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 15px;
    grid-auto-rows: minmax(8.3333%, auto);

    width: 100%; height: auto;
    box-sizing: border-box;
    background: #fff;

    overflow: hidden;
}
div[data-role="page_content"] .faq_wrapper .faq_left {
    grid-column: 1 / 4;

    padding: 48px; border-right: 1px solid #d5d5d5;
    background: #f1f1f1;
}

div[data-role="page_content"] .faq_wrapper .faq_left .faql-fixed { position: fixed; }

div[data-role="page_content"] .faq_wrapper .faq_left .faq_l_header { font: 700 16px/16px "Lato", sans-serif; margin: 0 0 20px 0; }
div[data-role="page_content"] .faq_wrapper .faq_left ul { position: relative; margin: 10px 0 20px 20px; }
div[data-role="page_content"] .faq_wrapper .faq_left ul li { padding: 5px 0; font: 400 14px/18px "Lato", sans-serif; }
div[data-role="page_content"] .faq_wrapper .faq_left div > ul > li { font-weight: 700; }

div[data-role="page_content"] .faq_wrapper .faq_left div > ul { padding-left: 20px; }
div[data-role="page_content"] .faq_wrapper .faq_left div > ul:before {
	content: "";
	display: block; position: absolute; top: 0; left: 0;
	width: 1px; height: 100%;
	background: #ccc;
}
div[data-role="page_content"] .faq_wrapper .faq_left ul li ul li { position: relative; }
div[data-role="page_content"] .faq_wrapper .faq_left ul li ul li:before {
	content: "";
	display: block;
	position: absolute; top: calc(50% - 1px); left: -50px; margin: 0;
	width: 30px; height: 1px;
	background: #ccc;
	transition: all 0.1s linear 0s;
}
div[data-role="page_content"] .faq_wrapper .faq_left ul li a { color: #333; text-decoration: none; }
div[data-role="page_content"] .faq_wrapper .faq_left ul li ul li:hover:before { width: 40px; background: #888; }
div[data-role="page_content"] .faq_wrapper .faq_left ul li ul li:hover a { color: #000; }

div[data-role="page_content"] .faq_wrapper .faq_right {
    grid-column: 4 / 10;

    padding: 24px 48px;
}

div[data-role="page_content"] .faq_wrapper .faq_right hr { height: 1px; color: #222; }


div[data-role="page_content"] .faq_wrapper .faq_right .faq_r_top {
    display: block; border-bottom: 1px solid #fff; padding: 0 0 10px 0; margin: 0;
    font: 400 14px/14px "Lato", sans-serif; color: #ff0000;
}


div[data-role="page_content"] .faq_wrapper .faq_right ol,
div[data-role="page_content"] .faq_wrapper .faq_right ul,
div[data-role="page_content"] .faq_wrapper .faq_right p
{
    margin: 5px 0 10px 0px; padding: 0 0 0 30px;
    font: 400 16px/1.85714285714286em "Lato", sans-serif;
    color: #333;
}
div[data-role="page_content"] .faq_wrapper .faq_right p { padding: 0; }


div[data-role="page_content"] .faq_wrapper .faq_right h2 { margin-bottom: 30px; font-size: 32px; }
div[data-role="page_content"] .faq_wrapper .faq_right > ol li { list-style-type: upper-roman; }
div[data-role="page_content"] .faq_wrapper .faq_right > ol > li:not(:first-of-type) { margin-top: 30px; padding-top: 30px; border-top: 1px solid #ddd; }
div[data-role="page_content"] .faq_wrapper .faq_right > ol > li > ol > li { list-style-type: decimal; }
div[data-role="page_content"] .faq_wrapper .faq_right ul li { list-style-type: square; }
div[data-role="page_content"] .faq_wrapper .faq_right .photo { display: block; margin: 30px; }
div[data-role="page_content"] .faq_wrapper .faq_right .photo img { display: inline-block; vertical-align: top; width: auto; height: auto; max-width: 100%; max-height: 275px; border: 1px solid #eee; margin: 0 0 5px 0; }
div[data-role="page_content"] .faq_wrapper .faq_right .photo span { display: block; clear: both; font: italic 400 14px/14px "Lato", sans-serif; color: #666; }

div[data-role="page_content"] .faq_wrapper .faq_right strong.header { text-transform: uppercase; font-weight: 700; }
div[data-role="page_content"] .faq_wrapper .faq_right strong.header a { padding-top: 30px; }

.text-red { color: #ff0000 !important; }



.context_menu_item{

    min-width: 350px;
    background: rgba(255,255,255,0.5) !important;
}
.context_menu_item i{
    cursor: pointer;
}
.context_menu_item.hide{
    display: none;
}
.context_menu_item > div { display: flex; height: 100%; align-items: center; justify-content: center; }
.context_menu_item > div > span {
    font: 700 12px/12px "Lato", sans-serif; color: #999;
    text-transform: uppercase;
    margin: 0 10px 0 0;
}
.context_menu_item > div > span span { color: #46a7de; }
.context_menu_item i { font-size: 20px; color: #666; }
#remove-data-grid td input{
    width: auto;
}
.remove_to_text{
    display: none;
}
#remove-data-grid .coi_header{
    background: none !important;
}
#remove-data-grid .coi_header:after{
    border: 0!important;
    height: 0px!important;
}
.tooltip-remove-data{
    top: 40%;
    left: 40%;
    margin: 0;
}
.tooltip-remove-data{
    display: none;
}


div[data-role="curtain"] {
    display: none;
    z-index: 999;
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(255,255,255,0.5);
}

.content_item .return-reading-icon {
    float: right;
}

.return-reading-icon {
    color: #FF8C00;
}

#alarm-tooltip, #tooltip-box {
    position: absolute;
    z-index: 1001;
    display: none;
    border: 2px solid #ebebeb;
    border-radius: 5px;
    padding: 15px;
    background-color: #fff;
    font-size: 12px;
}

#tooltip-box {
    max-width: 50%;
}
.alarm-tooltip {
    cursor: help;
}

.sort-reading {
    cursor: pointer;
    float: left !important;
    background-color: #bbb !important;
    color: #fff !important;
}

.sort-reading.active {
    background-color: #45a7de !important;
}
.device_unit{
    color: gray;
    font-size: 0.9em;
}
.alert-danger {
    padding: 25px 15px;
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1
}
.alert-warning {
    padding: 25px 15px;
    color: #856404;
    background-color: #fff3cd;
    border-color: #ebccd1
}
.content-tab-item{
    min-width: 150px;
    min-height: 150px;
}


.device-list-row-warning{
    background-color: #fff7ad !important;
}
.device-list-row-error{
    background-color: #ffbcb8 !important;
}


/* 99+ theme
body { background: #000 !important; }
div[data-role="top_wrapper"] { background: #000 !important; }
div[data-role="top_wrapper"] .tw_logo img { height: 40px !important; margin-top: 18px !important; }
div[data-role="top_wrapper"] .tw_user .twu_trigger, div[data-role="top_wrapper"] .tw_global .twg_trigger, div[data-role="top_wrapper"] .back_to_devices { background: #000 !important; }
div[data-role="smart_menu"] { position: fixed !important; width: 250px !important; height: 100% !important; background: #000 !important; }
div[data-role="smart_menu"] ul { flex-direction: column !important; justify-content: flex-start !important; }
div[data-role="smart_menu"] ul li {width: calc(100% - 20px) !important;height: auto !important;border: 0 !important;margin: 10px auto 0 auto !important;background: #000 !important;}
div[data-role="smart_menu"] ul li:hover { border: 0 !important; background: #000 !important; outline: 1px dotted #222 !important; }
div[data-role="smart_menu"] ul li a { justify-content: flex-start !important; padding: 5px 15px !important; }
div[data-role="page_content"] { width: auto !important; margin-left: 250px !important; }
div[data-role="page_content"] .content_wrapper { max-width: 100% !important; width: calc(100% - 10px) !important; }
div[data-role="page_content"] .content_item { width: calc(100% - 10px) !important; border: 1px dotted #444 !important; max-width: 100% !important; margin: 5px auto !important; }
div[data-role="page_content"] .content_item .coi_header, div[data-role="page_content"] .content_item { background: #111 !important; }
div[data-role="page_content"] .content_item .coi_header .coih_button { background: #46a7de !important; color: #000 !important; }
div[data-role="page_content"] .content_item .coi_header span { color: #46a7de !important; }
div[data-role="page_content"] .content_item .coi_header span i { background: #46a7de !important; color: #000 !important; }
.compact-table th.th-spacer { background: #303030 !important; color: #46a7de !important; }
.compact-table th.th-spacer i { color: #46a7de !important; }
.compact-table th, .compact-table td { color: #eee !important; border: 1px dotted #aaa !important; }
.compact-table.ct-100 { border: 1px dotted #aaa !important; }
.compact-table th { background: #222 !important; color: #fff !important; }
.compact-table td a { color: #ed2023 !important; }
.dt-buttons,div[data-role="page_content"] .dataTables_filter { background: #111 !important; }
.dt-buttons,div[data-role="page_content"] .dataTables_filter label { color: #eee !important; }
.dt-buttons .dt-button { color: #eee !important; border: 1px dotted #46a7de !important; }
table.dataTable.compact thead th { color: #46a7de !important; }
table.dataTable tbody tr { background: #151515 !important; }
table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd { background: #000 !important; }
table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover { background: #222 !important; }
table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td { border: 1px dotted #444 !important; }
table.dataTable.compact tbody th, table.dataTable.compact tbody td { color: #eee !important; }
table.dataTable tfoot th, table.dataTable tfoot td { border-top: 1px dotted #46a7de !important; color: #46a7de !important; }
div[data-role="page_content"] .dataTables_info, div[data-role="page_content"] .dataTables_paginate { background: #111 !important; }
#last_alerts .notification, .notification-box .notification { background: #252525 !important; }
#last_alerts .notification:nth-child(1), .notification-box .notification:nth-child(1) { background: #454545 !important; }
#last_alerts .notification:nth-child(2), .notification-box .notification:nth-child(2) { background: #404040 !important; }
#last_alerts .notification:nth-child(3), .notification-box .notification:nth-child(3) { background: #353535 !important; }
#last_alerts .notification:nth-child(4), .notification-box .notification:nth-child(4) { background: #303030 !important; }
#last_alerts .notification .notif-date, .notification-box .notification .notif-date { color: #999 !important; }
.notif-device { color: #ddd !important; }
.list_of_devices a { color: #ed1f24 !important; }
.datatable_button_default {background: #46a7de !important; color: #000 !important; }
table.dataTable tr.group td { background: #303030 !important; }
table.dataTable.order-column tbody tr>.sorting_1, table.dataTable.order-column tbody tr>.sorting_2, table.dataTable.order-column tbody tr>.sorting_3, table.dataTable.display tbody tr>.sorting_1, table.dataTable.display tbody tr>.sorting_2, table.dataTable.display tbody tr>.sorting_3 { background: #000 !important; }
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 { background: #000 !important; }
div[data-role="page_content"] .dataTables_filter input { border: 1px dotted #00ed00 !important; }
div[data-role="page_content"] .dataTables_filter input { color: #00ed00 !important; }
div[data-role="page_content"] .content_wrapper.triple .content_item.ci-33 { width: calc(33.3333% - 10px) !important; margin-right: 10px !important; }
*/