@import url("/css/fonts.css");

    /** inline library start **/
    .display-none {
        display: none;
    }

    .border-none {
        border: 0
    }

    .va-bottom {
        vertical-align: bottom;
    }

    .clear-both {
        clear: both;
    }

    .bg-none {
        background: none;
    }

    .color-white {
        color: #fff !important;
    }

    .color-purple {
        color: #7367F0 !important;
    }

    .mt-20 {
        margin-top: 20px;
    }

    .mb-20 {
        margin-bottom: 20px;
    }

    .mb-30 {
        margin-bottom: 30px;
    }

    .m-20-0 {
        margin: 20px 0;
    }

    .display-inline {
        display: inline-block;
    }

    .lh-15 {
        line-height: 15px;
    }

    .lh-22 {
        line-height: 22px;
    }

    .lh-28 {
        line-height: 28px;
    }

    .mt-10 {
        margin-top: 10px;
    }

    .dashboard-logo-max-width {
        max-width: 120px;
    }

    .font-10 {
        font-size: 10px !important;
    }

    .font-14 {
        font-size: 14px !important;
    }

    .font-13 {
        font-size: 13px !important;
    }

    .font-12 {
        font-size: 12px !important;
    }

    .font-22 {
        font-size: 22px !important;
    }

    .font-11 {
        font-size: 11px !important;
    }

    .font-24 {
        font-size: 24px !important;
    }

    .font-32 {
        font-size: 32px !important;
    }

    .font-36 {
        font-size: 36px !important;
    }

    .font-42 {
        font-size: 42px !important;
    }

    .font-48 {
        font-size: 48px !important;
    }

    .color-teal-green {
        color: #1abb9c
    }

    .color-alert-red {
        color: #cc3333
    }

    .text-shadow-grey {
        text-shadow: 2px 2px #999;
    }

    /** inline library end **/


    body {
        padding-top: 0px;
        padding-bottom:80px !important;
    }

    .glyphicon-ok {
        color: #2C9D0E;
    }

    .glyphicon-remove {
        color: #FF5733;
    }

    .glyphicon-list {
        font-size: 20px;
    }

    .glyphicon-transfer {
        font-size: 17px;
    }

    .icon-widget {
        color: red;
        padding-left: 10px;
        font-size: 16px;
    }

    .icon-test {
        color: black;
        font-size: 12px;
    }

    .fa-check {
        color: #1ABB9C;
    }

    .fa-times {
        color: red;
    }

    .fa-exclamation {
        color: orange;
    }

    .fa-info {
        color: black;
    }

    .fa-question-circle {
        color: gray;
    }

    .fa-plus-circle {
        color: green;
    }

    .fa-minus-circle {
        color: red;
    }

    /* font-family: "Montserrat", Helvetica, Arial, sans-serif; font-size: 13px; */
    /* font-family: "Titillium Web", sans-serif;*/
    body {
        font-family: "Montserrat", Arial, sans-serif;
        font-size: 13px;
        color: #555;
        background: #f8f8f8;
    }

    th, td {
        white-space: nowrap;
    }

    thead {
        font-size: 11px;
        text-align: center;
    }

    /*thead {font-family:Helvetica; font-size:11px;text-align: center;}*/
    tbody {
        font-size: 11px;
    }

    th {
        text-align: center;
    }

    tr.highlight {
        background-color: #1ABB9C !important;
    }

    h1, h2 {
    }

    .active a {
        background-color: yellow;
    }

    /* debugging */
    .printborder {
        border: 1px solid black
    }

    /* navbar */
    .directory {
        float: left;
        height: 50px;
        line-height: 50px;
        font-weight: 300;
        font-size: 15px;
        border: none;
        outline: none;
        color: white;
        background-color: inherit;
    }

    .lastmodified {
        float: right;
        height: 50px;
        line-height: 50px;
        font-weight: 300;
        font-style: italic;
        font-size: 10px;
        color: white;
        background-color: inherit;
    }

    @media (max-width: 576px) {
        .lastmodified {
            display: none
        }
    }

    .navbar {
        background-color: white;
        color: #6E6B7B;
        position: relative;
        margin-top: 10px;
        padding-top: 5px;
        width: 100%;
        z-index: 999;
        -webkit-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
        -moz-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
        box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        margin-bottom: 25px;
    }

    .navbar a {
        float: left;
        font-weight: 400;
        font-size: 15px;
        color: #6E6B7B;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        color: #333;
    }


    /* widget dropdown */
    .widget-dropdown {
        float: right;
        margin-left: 10px;
        margin-right: 0px;
    }

    .widget-dropdown:hover .widget-dropdown-content {
        display: block;
        z-index: 1;
    }

    /*.widget-dropdown {font-weight: 300;font-size: 13px;border: none;outline: none;color: white;background-color: inherit;}*/
    .widget-dropdown-content i {
        margin-left: 4px;
        margin-right: 4px;
    }

    .widget-dropdown-content a:hover {
        background-color: #ddd;
        z-index: 1;
    }

    .widget-dropdown-content {
        display: none;
        right: 5px;
        position: absolute;
        line-height: 15px;
        background-color: #f9f9f9;
        min-width: 140px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 99;
    }

    .widget-dropdown-content a {
        Float: none;
        Color: black;
        Padding: 8px 12px;
        Text-decoration: none;
        font-family: "Lato";
        font-size: 0.9em;
        font-weight: 400;
        Display: block;
        Text-align: left;
        border-bottom: 1px solid #E1E1E1;
    }

    #nav-open-menu {
        display: inline-block;
        width: 250px;
        position: relative;
        float: right;
    }

    #nav-open-menu a {
        display: inline-block;
        float: right;
        max-width: 40px;
        font-size: 16px;
        margin: 3px 0 0 0 !important;
        padding: 8px 10px !important;
    }

    #nav-open-menu a:hover, #nav-open-menu a.active {
        background: #7367F0;
        color: white;
    }

    /* btn dropdown */
    .dropdown {
        float: left;
    }

    .dropdown .dropbtn {
        font-weight: 300;
        font-size: 13px;
        border: none;
        outline: none;
        color: white;
        padding: 14px 16px;
        background-color: inherit;
    }

    .dropdown-content-right {
        display: none;
        right: 0;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 150px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
    }

    .dropdown-content-right a {
        Float: none;
        Color: black;
        Padding: 8px 12px;
        Text-decoration: none;
        font-size: 0.9em;
        font-weight: 400;
        Display: block;
        Text-align: left;
        border-bottom: 1px solid #E1E1E1;
    }

    .dropdown-content-right i {
        margin-left: 4px;
        margin-right: 4px;
    }

    .dropdown-content-right a:hover {
        background-color: #ddd;
        z-index: 1;
    }

    .dropdown:hover .dropdown-content-right {
        display: block;
        z-index: 1;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
    }

    .dropdown-content a {
        Float: none;
        Color: black;
        Padding: 8px 12px;
        Text-decoration: none;
        font-size: 0.9em;
        font-weight: 400;
        Display: block;
        Text-align: left;
        border-bottom: 1px solid #E1E1E1;
    }

    .dropdown:hover .dropdown-content {
        display: block;
        z-index: 1;
    }

    .dropdown-content i {
        margin-left: 4px;
        margin-right: 4px;
    }

    .dropdown-content a:hover {
        background-color: #ddd;
        z-index: 1;
    }

    /* Top Line - Information */
    .main-header {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .main-header-topic {
        height: 40px;
        height: 100%;
        padding-left: 5px;
        font-size: 24px;
        border-right: 1px solid #ccc;
        line-height: 40px;
        padding-right: 5px;
    }

    .main-header-device {
        height: 40px;
        height: 100%;
        padding-left: 5px;
        font-size: 18px;
        color: #1ABB9C;
        font-weight: 500;
        line-height: 40px;
    }

    @media (max-width: 576px) {
        .main-header {
            padding-top: 15px;
            padding-bottom: 15px;
        }

        .main-header-topic {
            font-size: 18px;
        }

        .main-header-device {
            font-size: 15px;
        }
    }

    .main-header-device em {
        height: 100%;
        padding: 0;
        font-size: 16px;
        font-weight: 200;
        /*height: 100px;*/
        color: #8a8a8a;
        line-height: 14px;
        vertical-align: middle;
    }

    .main-header article {
        font-size: 16px;
        font-weight: 200;
        color: #8a8a8a;
        *line-height: 100px;
        vertical-align: middle;
    }

    .main-header em {
        height: 100%;
        padding: 0;
        font-size: 16px;
        font-weight: 200;
        *height: 100px;
        color: #8a8a8a;
        line-height: 14px;
        vertical-align: middle;
    }

    /* tiles */
    .shadow {
        -webkit-box-shadow: 2px 2px 15px 2px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
        -moz-box-shadow: 2px 3px 15px 2px #ccc; /* Firefox 3.5 - 3.6 */
        box-shadow: 2px 2px 15px 2px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
    }

    .tile_top {
        padding-top: 8px;
        padding-bottom: 8px;
        font-size: 14px;
        font-weight: 400;
    }

    .tile_data {
        padding-top: 8px;
        padding-bottom: 8px;
        font-size: 30px;
        font-weight: 700;
        color: #1ABB9C;
    }

    .tile_data_condensed {
        padding-top: 8px;
        padding-bottom: 8px;
        font-size: 18px;
        font-weight: 700;
        color: #1ABB9C;
    }

    .tile_info {
        padding-left: 5px;
        padding-top: 8px;
        padding-bottom: 8px;
        font-size: 12px;
        font-weight: 600;
        color: #1ABB9C;
    }

    .tile_bottom {
        font-size: 12px;
        font-weight: 400;
    }

    .tile {
        padding-top: 8px;
        padding-bottom: 8px;
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        border-right: 1px solid #ccc;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    /*.tile1{ width:100%; min-height:90px; padding-top:8px; padding-bottom:8px; padding-right:5px; padding-left:5px; display: inline-block; vertical-align: middle; text-align: center; border-right: 1px solid #ccc; margin-top: 20px; margin-bottom : 20px; }*/

    /* tiles dashboard */
    .tile_dashboard_top {
        padding-top: 8px;
        padding-bottom: 8px;
        font-size: 14px;
        font-weight: 400;
    }

    .tile_dashboard_inline {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .tile_dashboard_data {
        padding-top: 8px;
        padding-bottom: 8px;
        font-size: 28px;
        font-weight: 700;
        color: #1ABB9C;
    }

    .tile_dashboard_data_condensed {
        padding-top: 8px;
        padding-bottom: 8px;
        font-size: 18px;
        font-weight: 700;
        color: #1ABB9C;
    }

    .tile_dashboard_info {
        padding-left: 5px;
        padding-top: 8px;
        padding-bottom: 8px;
        font-size: 10px;
        font-weight: 400;
        color: #1ABB9C;
    }

    .tile_dashboard_bottom {
        font-size: 11px;
        font-weight: 400;
    }

    .tile_dashboard {
        height: 125px;
        padding-top: 8px;
        padding-bottom: 8px;
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        border-right: 1px solid #ccc;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    /*.tile1{ width:100%; min-height:90px; padding-top:8px; padding-bottom:8px; padding-right:5px; padding-left:5px; display: inline-block; vertical-align: middle; text-align: center; border-right: 1px solid #ccc; margin-top: 20px; margin-bottom : 20px; }*/

    /* datatables */
    .dataTables_length label,
    .dataTables_filter label,
    .dataTables_info,
    .dataTables_paginate {
        font-weight: normal;
        font-size: 0.80em;
    }


    .dataTables_length {
        margin-top: 10px;
    }

    .dataTables_info {
        line-height: 2.7em;
    }

    /* test widget */
    .test_overlay {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 50%;
        display: block;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        z-index: 3;
    }

    .test-box {
        position: relative;
        background-color: #F2F2F2;
        height: 300px;
    }

    .results-timer {
        position: absolute;
        top: 44%;
        left: 50%;
        width: 50%;
        display: block;
        transform: translate(-50%, -44%);
        -ms-transform: translate(-50%, -50%);
        font-size: 16px;
        color: rgb(48, 39, 39);
    }

    .results-center {
        position: absolute;
        top: 44%;
        left: 50%;
        width: 50%;
        display: block;
        transform: translate(-50%, -44%);
        -ms-transform: translate(-50%, -50%);
        font-size: 56px;
        cursor: pointer;
        color: #1ABB9C;
    }

    .results-left {
        position: absolute;
        top: 2%;
        left: 2%;
        width: 30%;
        display: block;
        font-size: 24px;
        font-weight: 700;
        color: #1ABB9C;
    }

    .results-right {
        position: absolute;
        top: 2%;
        right: 2%;
        width: 30%;
        display: block;
        font-size: 24px;
        color: #1ABB9C;
    }

    .results-bottom {
        position: absolute;
        bottom: 6%;
        left: 50%;
        width: 60%;
        display: block;
        transform: translate(-50%, -0%);
        -ms-transform: translate(-50%, -0%);
        font-size: 20px;
        font-weight: bold;
        color: #121615;
    }

    .results-bottom-info {
        font-size: 11px;
        font-weight: normal;
        font-style: italic;
        color: #121615;
    }

    @media (max-width: 900px) {
        .test_overlay {
            width: 65%
        }

        .results-center {
            font-size: 46px
        }
    }

    @media (max-width: 576px) {
        .test_overlay {
            width: 80%
        }
    }

    @media (max-width: 576px) {
        .results-center {
            font-size: 40px
        }
    }

    @media (max-width: 576px) {
        .results-left {
            font-size: 18px
        }
    }

    @media (max-width: 576px) {
        .results-right {
            font-size: 18px
        }
    }

    @media (max-width: 576px) {
        .results-bottom {
            font-size: 18px
        }
    }

    /* visjs */
    div.vis-network div.vis-navigation div.vis-button.vis-up,
    div.vis-network div.vis-navigation div.vis-button.vis-down,
    div.vis-network div.vis-navigation div.vis-button.vis-left,
    div.vis-network div.vis-navigation div.vis-button.vis-right {
        display: none;
    }

    div.vis-network div.vis-navigation div.vis-button.vis-zoomIn {
        background-image: url("/images/zoom-in-icon.png");
        bottom: 10px;
        left: 55px;
    }

    div.vis-network div.vis-navigation div.vis-button.vis-zoomOut {
        background-image: url("/images/zoom-out-icon.png");
        bottom: 10px;
        left: 15px;
    }

    div.vis-network div.vis-navigation div.vis-button.vis-zoomExtends {
        background-image: url("/images/zoom-fit-icon.png");
        bottom: 10px;
        right: 15px;
    }

    div.vis-network div.vis-navigation div.vis-button:hover {
        box-shadow: 0 0 10px 3px #1ABB9C;
    }

    div.vis-network div.vis-navigation div.vis-button:active {
        box-shadow: 0 0 3px 3px #1ABB9C;
    }

    .vis-data-axis .vis-y-axis.vis-text {
        font-size: 6px;
    }

    .vis-time-axis .vis-text {
        padding-top: 4px;
        padding-left: 2px;
        font-size: 12px;
    }

    .vis-time-axis .vis-text.vis-major {
        font-weight: bold;
    }

    .vis-legend-text {
        font-size: 12px;
    }

    .vis-item.qwifi {
        background: #1ABB9C;
        color: white;
    }

    .vis-item.blue {
        background: blue;
        color: white;
    }

    .vis-item.black {
        background: black;
        color: white;
    }

    .vis-item.yellow {
        background: yellow;
        color: black;
    }

    .vis-item.orange {
        background: orange;
        color: black;
    }

    .vis-item.green {
        background: green;
        color: white;
    }

    .vis-item.pink {
        background: pink;
        color: black;
    }

    .vis-item.red {
        background: red;
        color: black;
    }

    .vis-item.gray {
        background: #CAC6C5;
        color: black;
    }

    #rectangle_black {
        width: 14px;
        height: 14px;
        background: black;
        vertical-align: middle;
        display: inline-block;
    }

    #rectangle_blue {
        width: 14px;
        height: 14px;
        background: blue;
        vertical-align: middle;
        display: inline-block;
    }

    #rectangle_orange {
        width: 14px;
        height: 14px;
        background: orange;
        vertical-align: middle;
        display: inline-block;
    }

    #rectangle_purple {
        width: 14px;
        height: 14px;
        background: purple;
        vertical-align: middle;
        display: inline-block;
    }

    #rectangle_pink {
        width: 14px;
        height: 14px;
        background: pink;
        vertical-align: middle;
        display: inline-block;
    }

    #rectangle_green {
        width: 14px;
        height: 14px;
        background: green;
        vertical-align: middle;
        display: inline-block;
    }

    #rectangle_red {
        width: 14px;
        height: 14px;
        background: red;
        vertical-align: middle;
        display: inline-block;
    }

    #rectangle_yellow {
        width: 14px;
        height: 14px;
        background: yellow;
        vertical-align: middle;
        display: inline-block;
    }

    #rectangle_yellow {
        width: 14px;
        height: 14px;
        background: yellow;
        vertical-align: middle;
        display: inline-block;
    }

    /* flot */
    .flot-x-axis .flot-tick-label {
        white-space: nowrap;
        transform: translate(-9px, 0) rotate(-60deg);
        text-indent: -100%;
        transform-origin: top right;
        text-align: right !important;
    }

    /* white label in wifiDeviceList page */
    .label-white {
        color: gray;
        border: 1px;
        font-size: 8px;
        border-color: black;
        border-style: solid;
        background-color: white
    }

    /* channel page */
    .label-formatter {
        font-size: 8pt;
        text-align: center;
        padding: 2px;
        color: white;
    }

    .ch-label {
        margin-top: 0px;
        text-align: center;
        font-size: 15px;
        font-weight: bold;
        color: #1ABB9C;
        margin-bottom: 6px;
    }

    .scan-btn-right {
        float: right;
        font-size: 14px;
        text-align: center;
        border-width: 1px;
        background-color: white;
        font-weight: bold;
        width: 80%;
        color: #1ABB9C;
        margin: 0px;
        padding: 0px;
    }

    .scan-btn-left {
        float: left;
        font-size: 14px;
        text-align: center;
        border-width: 1px;
        background-color: white;
        font-weight: bold;
        width: 80%;
        color: #1ABB9C;
        margin: 0px;
        padding: 0px;
    }

    .ch-select-right {
        float: right;
        font-size: 14px;
        color: #1ABB9C;
        font-weight: bold;
        height: 24px;
        margin: 0px;
        padding: 0px;
        width: 80%
    }

    .ch-select-left {
        float: left;
        font-size: 14px;
        color: #1ABB9C;
        font-weight: bold;
        height: 24px;
        margin: 0px;
        padding: 0px;
        width: 80%
    }

    /*.select {width:80px; margin:auto; font-weight:normal; font-size:16px; height:24px;}*/
    /* autocomplete in search page */
    .autocomplete-items {
        position: absolute;
        border: 1px solid #d4d4d4;
        border-bottom: none;
        border-top: none;
        width: 90%;
        z-index: 99;
        top: 100%;
        left: 0;
        right: 0;
    }

    .autocomplete-items div {
        padding: 10px;
        cursor: pointer;
        background-color: #fff;
        border-bottom: 1px solid #d4d4d4;
    }

    .autocomplete-items div:hover {
        background-color: #7367F0;
    }

    .autocomplete-active {
        background-color: #7367F0 !important;
        color: #ffffff !important;
    }

    .panel {
        margin-bottom: 15px;
    }

    .pan-row {
        color: #1ABB9C;
        font-size: 16px;
    }

    .pan-header {
        height: 20px;
        font-size: 1.1vw;
    }

    .pan-val {
        height: 40px;
        font-size: 1.4vw;
    }

    .pan-footer {
        height: 15px;
        font-size: 1.1vw;
    }

    .searchwrapper {
        border-radius: 5px;
        width: 100%;
        display: flex;
        margin: auto;
        padding-right: 0px;
        padding-left: 0px;
    }

    .subsearch {
        border: 2px solid #1ABB9C;
        width: 90%;
        border-radius: 5px;
        font-size: 15px;
        justify-content: space-between;
        display: flex;
        padding-left: 8px;
    }

    .submit {
        background: #EDEDED;
        position: relative;
        height: 26px;
        border-radius: 5px;
        border: 1px solid #1ABB9C;
    }


    /* progress chart */
    .progchart {
        margin: 0px;
        font-size: 10px;
    }

    .progchartleft {
        margin: 0px;
    }

    /* bootstrap tooltip */
    .tooltip.left .tooltip-inner {
        max-width: 310px;
        padding: 3px 8px;
        color: black;
        text-align: left;
        background-color: white;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        border: 2px solid black;
    }

    .tooltip.top .tooltip-inner {
        max-width: 310px;
        padding: 3px 8px;
        color: black;
        text-align: left;
        background-color: white;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        border: 2px solid black;
    }

    .tooltip {
        pointer-events: none;
    }

    /* pie overlay */
    .pie_overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        font-size: 20px;
        cursor: pointer;
        color: #1ABB9C;
    }

    .pie_overlay_50_350 {
        position: absolute;
        top: 43%;
        left: 50%;
        display: block;
        transform: translate(-50%, -58%);
        -ms-transform: translate(-50%, -50%);
        font-size: 16px;
        cursor: pointer;
        color: #1ABB9C;
    }

    /* ****************
     management page
     ******************/
    button.adhoc_logicAndOr {
        width: fit-content;
        height: auto;
        padding: 0px;
        margin: 0px;
    }

    .column_LEFT {
        width: 13%; /* must be the same as tableID_LEFT/_RIGHT first column width + 5*/
        margin: 0px 0px 0px 0px;
        border: 1px grey solid;
    }

    .column_RIGHT {
        width: 87%; /* must be the same as tableID_LEFT/_RIGHT first column width + 5*/
        margin: 0px 0px 0px 0px;
        overflow-x: auto;
        border: 1px grey solid;
    }

    .column_LEFT,
    .column_RIGHT {
        float: left;
        padding: 0;
        border: 0;

    }

    /* Clearfix (clear floats) */
    .columns::after {
        content: "";
        clear: both;
        display: table;
    }

    .table_x {
        border-collapse: separate;
        border-spacing: 2px;
        width: 100%;
        border: 1px solid #ddd;
    }

    tr:nth-child(even) {
        background-color: #f6f6f6;
    }

    #tableID_RIGHT {
        /* table-layout:fixed; */
        position: relative; /* not sure about this one */
        /* width: 1000px; */
        width: 100%;
        overflow: hidden;
    }

    #tableID_LEFT td.dataCell,
    #tableID_RIGHT td.dataCell {
        text-align: center;
        font-size: 9px;
        padding-left: 4px;
        height: 22px;
    }

    #tableID_LEFT th select,
    #tableID_LEFT td select,
    #tableID_RIGHT th select,
    #tableID_RIGHT td select {
        /* overflow:auto; */
        color: #1ABB9C;
        overflow: visible;
        text-align: center;
        display: table-cell;
        vertical-align: middle;
        font-size: smaller;
        border: none;
        padding: 3px;
        /* width: 55px; */
        width: auto;
    }

    #tableID_LEFT th select.logic,
    #tableID_LEFT td select.logic,
    #tableID_RIGHT th select.logic,
    #tableID_RIGHT td select.logic {
        border: 1px solid red;
        width: fit-content;
        margin: 3px;
    }

    #tableID_RIGHT th select option,
    #tableID_RIGHT td select option {
        font-size: smaller;
        font-weight: bold;
    }

    #tableID_RIGHT th select option:checked,
    #tableID_RIGHT td select option:checked {
        background-color: red;
    }

    #tableID_LEFT th.No-rotate-Yes-wrap,
    #tableID_LEFT td.No-rotate-Yes-wrap,
    #tableID_RIGHT th.No-rotate-Yes-wrap,
    #tableID_RIGHT td.No-rotate-Yes-wrap {
        height: 120px;
        white-space: normal; /* keep-wrap*/
        /* writing-mode: vertical-rl; */
        /* transform: rotate(-90deg); */ /* no rotation */
        font-weight: bold;
        min-width: 120px;
        padding: 1px;
        margin: 1px;
    }

    #tableID_LEFT th.rotate-and-wrap,
    #tableID_LEFT td.rotate-and-wrap,
    #tableID_RIGHT th.rotate-and-wrap,
    #tableID_RIGHT td.rotate-and-wrap {
        height: 120px;
        white-space: normal;
        /* writing-mode: vertical-rl; */
        transform: rotate(-90deg);
        font-weight: bold;
        min-width: 120px;
        padding: 1px;
        margin: 1px;
    }

    #tableID_LEFT tbody tr td:nth-child(1) {
        /* for js-driven synchronized-scrolling: begin */
        /*
        position: relative;
        display: block;
        */
        /* for js-driven synchronized-scrolling: end */

        /*
        background-color: grey;
        color: white;
        */

        /* font-size:10px; */ /* use the same for LEFT and RIGHT, see font-size declared earlier */
    }

    #TextInput_devId {
        color: maroon;
    }

    .TextInput_8px {
        font-size: 9px;
    }

    #adhoc_query_table_content {
        /* overflow: auto */
    }

    button.adhoc_logicAndOr {
        width: 15%;
        min-width: 100px;
        padding: 5px 2px 2px 2px;
        margin: 1px;
    }

    /*#btn_search {
        background-color: #87E27D;
    }
    */
    ._up_arrow::after {
        content: ' \25B2';
    }

    ._sideway_arrows::after {
        content: ' \2B0C';
    }

    ._empty_box::after {
        content: ' \2610';
    }

    ._empty_circle::after {
        content: ' \25EF';
    }

    ._down_arrow::after {
        content: ' \25BC';
    }

    /**************
    ***************/
    .gauge {
        width: 100%;
        height: 100%;
        display: block;
    }

    h3 {
        margin: 0 0 0 0;
    }

    hr {
        margin-top: 1rem;
        margin-bottom: 1rem;
        border: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }

    /*select {width: 100px;font-size: 14px;color: #1ABB9C;font-weight: bold;height: 32px;}*/
    .switch {
        position: relative;
        display: inline-block;
        width: 28px;
        height: 16px;
    }

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
        transition: .4s;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 12px;
        width: 12px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

    .slider.round {
        border-radius: 16px;
    }

    .slider.round:before {
        border-radius: 50%;
    }

    input:checked + .slider {
        background-color: green;
    }

    input:focus + .slider {
        box-shadow: 0 0 1px green;
    }

    input:checked + .slider:before {
        -webkit-transform: translateX(12px);
        -ms-transform: translateX(12px);
        transform: translateX(12px);
    }

    .time_overlay {
        position: absolute;
        top: 30px;
        right: 0px;
        font-size: 16px;
        background: #1ABB9C;
        z-index: 2;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        color: white;
    }

    .msg_overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: 24px;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        z-index: 2;
        color: white;
        background: #1ABB9C;
        text-decoration: none;
    }

    *:focus {
        outline: none;
    }

    .list-group-item {
        color: #1ABB9C;
        font-size: 12px;
        border: thin solid #1ABB9C;
        font-weight: bold;
    }

    div.dataTables_processing {
        z-index: 1;
    }

    /** ck edit **/
    #LAST_MODIFIED {
        font-size: 10px;
        font-weight: 500;
        color: #6E6B7B;
    }

    #DIRECTORY {
        font-size: 16px;
    }

    .dropdown.lay-right .name {
        font-size: 12px;
        float: right;
        margin-top: 6px;
        margin-right: 10px;
        font-weight: bold;
        color: #7367F0;
    }

    .dropdown.lay-right i.fa-sort-down {
        position: absolute;
        right: 15px;
        top: 10px;
        font-size: 20px;
        color: #7367F0;
    }

    .lay-right a {
        font-size: 13px;
        padding: 5px;
        display: inline-block;
        color: #5E5873;
        width: 100%;
    }

    .lay-right a:hover {
        cursor: hand;
        cursor: pointer;
        background: #7367F0;
        color: white;
    }

    .dropdown.lay-right button.dropbtn {
        margin-right: 10px;
        margin-top: -5px;
        margin-bottom: 5px;
    }

    #MENU {
        margin-top: 45px;
        width: 100%;
        display: inline-block;
    }

    #MENU a {
        font-size: 14px;
        display: inline-block;
        width: 96%;
        color: #5E5873;
        margin-bottom: 5px;
        padding: 6px 8px;
        text-decoration: none;
        line-height: 24px;
        font-weight: 400 !important;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        position: relative;
    }

    #MENU a span.text {
        margin-top: 2px;
        display: inline-block;
    }

    #MENU a .mdi {
        float: left;
        margin-right: 10px;
    }

    #MENU a:hover {
        background: #e5e5e5 !important;
    }

    #MENU a.active {
        color: white;
        background: rgb(115, 103, 240);
        background: -moz-linear-gradient(45deg, rgba(115, 103, 240, 1) 0%, rgba(158, 149, 245, 1) 100%);
        background: -webkit-linear-gradient(45deg, rgba(115, 103, 240, 1) 0%, rgba(158, 149, 245, 1) 100%);
        background: linear-gradient(45deg, rgba(115, 103, 240, 1) 0%, rgba(158, 149, 245, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7367f0", endColorstr="#9e95f5", GradientType=1);
    }

    #MENU a.active:hover {
        color: white;
        background: rgb(115, 103, 240) !important;
        background: -moz-linear-gradient(45deg, rgba(115, 103, 240, 1) 0%, rgba(158, 149, 245, 1) 100%) !important;
        background: -webkit-linear-gradient(45deg, rgba(115, 103, 240, 1) 0%, rgba(158, 149, 245, 1) 100%) !important;
        background: linear-gradient(45deg, rgba(115, 103, 240, 1) 0%, rgba(158, 149, 245, 1) 100%) !important;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7367f0", endColorstr="#9e95f5", GradientType=1) !important;
    }

    #srch_form {
        display: inline-block;
        text-align: center;
    }

    #srch_form div.search-form-row {
        width: 100%;
        display: inline-block;
        padding: 10px;
        margin-top: 10px;
        border-radius: 5px;
    }

    #srch_form div.search-form-row div.form-logo {
        border-color: #D8D6DE;
        border-right: none;
    }

    #srch_form div.search-form-row strong.title {
        display: inline-block;
        width: 100%;
        margin-bottom: 5px;
        text-align: center;
        color: #7367F0;
    }

    #srch_input {
        width: 100%;
        font-size: 28px;
        margin-bottom: 15px;
        max-width: 500px;
        margin: 15px auto !important;
        background: white !important;
    }

    #srch_btn {
        min-width: 200px;
        padding: 10px;
        height: auto;
        margin: auto;
        display: inline-block;
        font-size: 22px;
        font-weight: bold;
    }

    #srch_btn {
        background: #1ABB9C;
        color: #fff;
    }

    .autocomplete-items {
        width: 100%;
        top: 50px;
    }

    .autocomplete-items div {
        font-size: 16px;
        text-align: left;
    }

    /** deviceList.php **/
    #device_info {
        width: 94%;
        margin: 20px 3%;
    }

    /** deviceList.php **/
    #topology {
        width: 94%;
        margin: 20px 3%;
    }

    .wifi-device-list {
        width: 94%;
        margin: 20px 3%;
    }


    table.dataTable {
        font-size: 120%;
    }

    table.dataTable thead {
        font-size: 14px !important;
    }

    table.dataTable tbody {
        font-size: 13px !important;
    }

    table.dataTable tbody tr td span.label {
        font-size: 12px;
    }

    .vis-timeline {
        visibility: visible !important;
    }

    /** dashboard **/
    .body-container {
        width: 100%;
        margin: 0;
    }

    #dashboard .fancy-card {
        padding: 15px;
    }

    .load-blur {
        -webkit-filter: blur(5px);
    }

    #dashboard .db-device-logo {
        display: inline-block;
        width: 100%;
        min-height: 90px;
    }

    #dashboard .db-device-ap-counter, #dashboard .db-device-rpt-counter {
        display: inline-block;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        text-align: center;
        font-size: 11px;
        line-height: 18px;
        margin-left: 5px;
    }

    #dashboard .db-device-logo img {
        width: 100%;
        max-width: 96px;
    }

    #dashboard .db-box-title {
        font-size: 16px;
        color: #5E5873;
        font-weight: 400;
        line-height: 20px;
    }

    #dashboard .db-box-title small {
        font-size: 12px;
        color: #6E6B7B;
    }

    #dashboard .db-device-title {
        font-size: 18px;
        color: #43B0E8;
        font-weight: 400;
    }

    #dashboard .db-device-title small {
        font-size: 12px;
        color: #5E5873;
    }

    #dashboard .db-box-icon {
        width: 100%;
        display: inline-block;
    }

    #dashboard .db-line-graph-title {
        float: left;
        width: 60%;
    }

    #dashboard .db-line-graph-title span.percent {
        font-size: 36px;
        display: inline-block;
        width: 100%;
        font-weight: 600;
        color: #6E6B7B;
    }

    #dashboard .db-line-graph-title small {
        display: inline-block;
        font-size: 18px !important;
        font-weight: 400 !important;
        color: #6E6B7B;
        margin-top: -5px;
    }

    #dashboard .db-box-icon-right {
        width: 40%;
        float: right;
        text-align: right;
    }

    #dashboard .db-box-icon-right div.icon-container {
        float: right;
    }

    #dashboard .db-box-bottom-percent {
        position: absolute;
        right: 10px;
        bottom: 15px;
        max-width: 96%;
        text-align: right;
        line-height: 25px;
        font-size: 36px;
        font-weight: 500;
        display: inline-block;
        width: 100%;
    }

    #dashboard .db-box-bottom-percent small {
        font-size: 12px;
        display: inline-block;
        width: 100%;
        font-weight: 400;
        color: #6E6B7B;
    }

    #dashboard .db-box-bottom-percent span.percent {
        font-size: 24px;
    }

    #dashboard .db-box-radio-desc {
        display: inline-block;
        width: 80%;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    #dashboard .db-box-radio-desc span.percent {
        font-size: 36px;
        font-weight: 600;
    }

    #dashboard .db-box-radio-desc small {
        font-size: 17px;
        font-weight: 400;
        color: #6E6B7B;
        padding-left: 5px;
    }

    #dashboard .db-box-radio-last-time {
        display: inline-block;
        width: 80%;
        color: #B9B9C3;
        font-size: 12px;
    }

    #dashboard .db-box-icon-radio {
        position: absolute;
        right: 10px;
        top: 20px;
        width: 52px;
    }

    #dashboard .db-datarate {
        font-size: 36px;
        display: inline-block;
        width: 100%;
        margin-top: 30px;
        line-height: 25px;
    }

    #dashboard .db-datarate span.unit {
        font-size: 18px;
    }

    #dashboard .db-datarate small {
        font-size: 12px;
        color: #B9B9C3;
    }

    #dashboard .db-datarate-space {
        display: inline-block;
        width: 100%;
        height: 60px;
    }

    #radial_2ghz_rate, #radial_5ghz_rate {
        height: 300px;
    }

    #dashboard div.device-number-line {
        display: inline-block;
        width: 100%;
    }

    #dashboard div.device-number-line.radio2 {
        margin-top: 30px;
    }

    #dashboard div.device-number-line div {
        display: inline-block;
        float: left;
        height: 90px;
        margin: 0;
        padding: 0;
    }

    #dashboard div.device-number-line div.start-shape img {
        float: left;
        position: relative;
        margin: 0;
        display: inline-block;
    }

    #dashboard div.device-number-line div.title {
        color: white;
        height: 66px;
        width: 125px;
        font-size: 12px;
        padding-top: 13px;
    }

    #dashboard div.device-number-line.radio2 div.title {
        background: #1ABCFE;
        margin-top: 26px;
    }

    #dashboard div.device-number-line.radio5 div.title {
        background: #00CFE8;
        margin-top: 14px;
    }

    #dashboard div.device-number-line div.percent-fill {
        height: 66px;
    }

    #dashboard div.device-number-line.radio2 div.percent-fill {
        background: #1ABCFE;
        margin-top: 26px;
    }

    #dashboard div.device-number-line.radio5 div.percent-fill {
        background: #00CFE8;
        margin-top: 14px;
    }

    #dashboard div.device-number-line div.percent-value {
        height: 66px;
        padding-top: 16px;
        padding-left: 10px;
        font-size: 24px;
    }

    #dashboard div.device-number-line.radio2 div.percent-value {
        margin-top: 26px;
        font-weight: bold;
    }

    #dashboard div.device-number-line.radio5 div.percent-value {
        margin-top: 14px;
        font-weight: bold;
    }

    #wifi-dashboard-score td.table-label {
        font-weight: bold !important;
        font-size: 16px !important;
    }

    #wifi-dashboard-rank td.table-label {
        font-weight: bold !important;
        font-size: 16px !important;
    }

    #manager-wifi-stats {
        width: 100%;
        margin: 15px !important;
    }

    /* General Dashboard */
    #dashboard .db-box-bottom-percent-classic {
        max-width: 96%;
        line-height: 25px;
        font-size: 36px;
        font-weight: 500;
        display: inline-block;
        width: 100%;
        margin-top: 15px;
    }

    /* offcanvas */
    /* The side navigation menu */
    .sidenav {
        height: 100%; /* 100% Full-height */
        width: 0; /* 0 width - change this with JavaScript */
        position: fixed; /* Stay in place */
        z-index: 1; /* Stay on top */
        top: 0;
        right: 0;
        background-color: #e2e2e2; /* Black*/
        overflow-x: hidden; /* Disable horizontal scroll */
        padding-top: 60px; /* Place content 60px from the top */
        transition: 0s; /* 0.5 second transition effect to slide in the sidenav */
        font-size: 14px;
        -webkit-box-shadow: -5px 0px 3px 0px rgba(50, 50, 50, 0.2);
        -moz-box-shadow: -5px 0px 3px 0px rgba(50, 50, 50, 0.2);
        box-shadow: -5px 0px 3px 0px rgba(50, 50, 50, 0.2);
    }

    .sidenav ul {
        margin: 0 10px 0 0;
        padding: 10px
    }

    .sidenav ul li {
        display: inline-block;
        width: 100%;
        margin-bottom: 10px;
    }

    /* The navigation menu links */
    .sidenav a {
        padding: 8px 8px 8px 8px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }

    /* When you mouse over the navigation links, change their color */
    .sidenav a:hover {
        color: #333;
    }

    /* Position and style the close button (top right corner) */
    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 18px;
        margin-left: 50px;
    }

    /* Style page content - use this if you want to push the page content to the right when you open the side navigation */
    #main {
        transition: margin-left .5s;
        padding: 20px;
    }


    /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
    @media screen and (max-height: 450px) {
        .sidenav {
            padding-top: 15px;
        }

        .sidenav a {
            font-size: 18px;
        }
    }

    a.toggle-details {
        color: #333 !important;
        font-size: 13px !important;
        font-weight: bold !important;
        display: inline-block;
        margin-top: 5px;
        width: 100%;
        padding: 5px;
    }

    /* offcanvas */


    #ds_gwip {
        font-size: 14px;
    }

    #ds_uptime {
        letter-spacing: -0.05em;
    }

    #ds_ip {
        font-size: 14px;
    }

    #ds_radio_type_table {
        margin: 0 !important;
    }

    #ds_radio_type_table tr td {
        font-size: 18px !important;
        padding: 4px !important;

    }

    #ds_ch2_ssid {
        font-weight: 700;
    }

    #ds_ch5_ssid {
        font-weight: 700;
    }

    #ds_last_seen_container {
        font-size: 15px !important;
        margin-top: 15px;
    }

    #ds_radio_type_table tr td.wifi-radio-label {
        font-size: 12px !important;
    }

    #ds_radio_type_table tr td span.busy-status {
        width: 100%;
        padding: 3px 6px !important;
    }

    #srch_inputautocomplete-list {
        max-width: 496px;
        margin: auto;
        top: 60px;
    }

    #highcharts {
        width: 80%;
        margin: 2% 10%;
    }

    .widget-container div.card {
        background: white;
        padding: 0;
        margin-bottom: 30px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

    .widget-container div.card-header {
        padding: 8px 10px;
        line-height: 16px;
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: normal;
        color: white;
        height: 48px !important;
        -webkit-border-top-left-radius: 5px;
        -webkit-border-top-right-radius: 5px;
        -moz-border-radius-topleft: 5px;
        -moz-border-radius-topright: 5px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;

        background: rgb(12, 158, 130);
        background: -moz-linear-gradient(0deg, rgba(12, 158, 130, 1) 0%, rgba(26, 187, 156, 1) 44%, rgba(26, 187, 156, 1) 100%);
        background: -webkit-linear-gradient(0deg, rgba(12, 158, 130, 1) 0%, rgba(26, 187, 156, 1) 44%, rgba(26, 187, 156, 1) 100%);
        background: linear-gradient(0deg, rgba(12, 158, 130, 1) 0%, rgba(26, 187, 156, 1) 44%, rgba(26, 187, 156, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0c9e82", endColorstr="#1abb9c", GradientType=1);
    }

    .widget-container div.card-header i.fa {
        font-size: 34px;
        color: #f5f5f5;
        display: inline-block;
        margin-right: 5px;
        float: right;
    }

    .widget-container div.card-body {
        padding: 15px;
    }

    .widget-container div.header-info-color {
        background: #7cb5ec;
    }

    .widget-container div.eh-line-info div.card-body i.fa {
        margin-bottom: 15px;
    }

    #HEADER_DEVICE_ID {
        width: 200px;
    }

    #HEADER_DEVICE_ID div.form-filter {
        position: absolute;
        left: 10px;
        top: 5px;
    }

    #HEADER_DEVICE_ID div.form-filter div.filter-dropdown {
        width: 100px !important;
    }

    #HEADER_DEVICE_ID div.autocomplete-items {
        left: 120px;
    }

    #HEADER_DEVICE_ID div.form-filter div.filter-dropdown span {
        padding-left: 5px;
    }

    #HEADER_DEVICE_ID div.form-filter div.filter-dropdown .select {
        padding: 10px 5px;
    }

    #HEADER_DEVICE_ID input {
        border: 0;
        background: none;
        color: #6E6B7B;
        text-align: left;
        font-size: 15px;
        height: 40px;
        line-height: 10px;
        padding: 15px;
        background: #ffffff;
        box-shadow: inset 0px 1px 8px rgba(0, 0, 0, 0.1);
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        position: absolute;
        top: 5px;
        left: 120px;
    }

    #HEADER_DEVICE_ID div.autocomplete-items {
        position: absolute;
        color: #6E6B7B;
        top: 45px;
        left: 120px;
        width: 280px;
        -webkit-box-shadow: 5px 0px 5px 0px rgba(50, 50, 50, 0.2);
        -moz-box-shadow: 5px 0px 5px 0px rgba(50, 50, 50, 0.2);
        box-shadow: 5px 0px 5px 0px rgba(50, 50, 50, 0.2);
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        font-size: 14px;
        background: white;
        border: 0 !important;
    }

    #HEADER_DEVICE_ID input.search-by-identifier {
        background-image: url('/images/search-device-label.png');
        background-repeat: no-repeat;
        background-position: left center;
        padding-left: 78px;
    }

    #HEADER_DEVICE_ID input.search-by-service-number {
        background-image: url('/images/search-by-service-number.png');
        background-repeat: no-repeat;
        background-position: left center;
        padding-left: 78px;
    }

    #HEADER_DEVICE_ID div.autocomplete-items div {
        font-size: 14px;
        font-weight: 400;
        color: #6E6B7B;
        border: 0 !important;
        letter-spacing: 0.015em;
        background-color: #fff;
        background-image: url("/images/welcome-selected.png");
        background-position: right center;
        background-size: 24px 17px;
        background-repeat: no-repeat;
    }

    #HEADER_DEVICE_ID div.autocomplete-active {
        background-color: #7367F0;
        background-image: url("/images/welcome-selected.png");
        background-position: right center;
        background-size: 24px 17px;
        background-repeat: no-repeat;
    }

    #HEADER_DEVICE_ID div.autocomplete-items div:first-child {
        -webkit-border-top-left-radius: 6px;
        -webkit-border-top-right-radius: 6px;
        -moz-border-radius-topleft: 6px;
        -moz-border-radius-topright: 6px;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
    }

    #HEADER_DEVICE_ID div.autocomplete-items div:last-child {
        -webkit-border-bottom-right-radius: 6px;
        -webkit-border-bottom-left-radius: 6px;
        -moz-border-radius-bottomright: 6px;
        -moz-border-radius-bottomleft: 6px;
        border-bottom-right-radius: 6px;
        border-bottom-left-radius: 6px;
    }

    #HEADER_DEVICE_ID div.autocomplete-items div:hover {
        background-color: #7367F0 !important;
        color: white;
    }

    #HEADER_DEVICE_ID.header-search-identifier {
        width: 300px !important;
    }

    #HEADER_DEVICE_ID.header-search-identifier .form-filter {
        display: none !important;
    }

    #HEADER_DEVICE_ID.header-search-identifier input.quick_search_input {
        left: 20px !important;
    }

    #HEADER_DEVICE_ID.header-search-identifier div.autocomplete-items {
        left: 20px;
    }

    #search_device {
        color: #7367F0;
        font-size: 20px;
        background: none;
        position: absolute;
        padding-left: 0 !important;
        margin-left: 10px;
        margin-top: -5px;
        left: 260px;
        z-index: 999;
    }

    #quick_search {
        width: 95% !important;
    }

    #quick_search::-webkit-input-placeholder {
        color: #5E5873; /*Change the placeholder color*/
        opacity: 0.85; /*Change the opacity between 0 and 1*/
    }

    #wifi-client .card {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        margin-bottom: 0;
    }

    #wifi-client table.stats {
        margin: 10px 25px;
        width: calc(100% - 50px)
    }

    #wifi-client table.stats tr td {
        padding: 5px;
        font-size: 22px;
    }

    #wifi-client table.stats tr td:nth-child(1) {
        width: 15%;
        text-align: center
    }

    #wifi-client table.stats tr td:nth-child(2) {
        width: 35%;
    }

    #wifi-client table.stats tr td:nth-child(3) {
        width: 20%;
        text-align: center
    }

    #wifi-client table.stats tr td .btn {
        width: 100%;
    }

    #wifi-client table.stats tr td:nth-child(4) {
        width: 30%;
        text-align: right
    }

    #wifi-channel .card .btn-secondary {
        font-size: 20px;
        font-weight: bold;
    }

    #wifi-channel .card .busy-info {
        margin-top: 12px;
        display: inline-block;
    }

    h6.chart-title {
        font-size: 10px;
        color: #6E6B7B;
        font-weight: 600;
        padding-left: 0;
        margin-top: 5px;
    }

    h6.chart-title .chart-last-update {
        float: right;
        font-size: 10px !important;
        display: inline-block;
        color: #B9B9C3;
        position: relative;
        font-weight: 400 !important;
    }

    #draw-wifi_capacity, #draw-utilization {
        margin-top: 40px;
    }

    #wifi-broadband .dsl-graphs {
        display: none;
    }

    #wifi-broadband .card {
        margin-bottom: 15px;
    }

    #wifi-broadband .card small {
        font-size: 11px !important;
    }

    #wifi-broadband .card .row {
        margin-bottom: 15px;
    }

    #wifi-broadband .card .card-body {
        padding-top: 0;
    }

    #wifi-broadband .card .card-body .value {
        color: #1abb9c;
        font-size: 36px;
        font-weight: normal;
    }

    #wifi-broadband .card .card-header span.title {
        display: inline-block;
        font-weight: bold;
    }

    #wifi-broadband .card .card-body .info {
        margin-bottom: 10px;
    }


    #wifi-cpu-mem .card .card-body {
        padding-top: 0;
    }

    #wifi-cpu-mem .card .card-body .value {
        color: #1abb9c;
        font-size: 36px;
        font-weight: normal;
    }

    #wifi-cpu-mem .card .card-header span.title {
        display: inline-block;
        font-weight: bold;
    }

    #wifi-cpu-mem .card .card-body .info {
        margin-bottom: 10px;
    }

    #wifi-client .card {
        margin-bottom: 15px;
    }

    #wifi-client .card .card-body {
        padding-top: 0;
    }

    #wifi-client .card .card-body .value {
        color: #1abb9c;
        font-size: 36px;
        font-weight: normal;
    }

    #wifi-client .card .card-header span.title {
        display: inline-block;
        font-weight: bold;
    }

    #wifi-client .card .card-body .info {
        margin-bottom: 10px;
    }

    #wifi-channel .card .card-header span.title {
        display: inline-block;
        font-weight: bold;
    }

    #broadband_rate_tx, #broadband_data_tx {
        border-right: 0
    }

    #broadband_hourly_widget div.widget-content {
        border: 0;
    }

    .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 {
        padding-left: 15px;
        padding-right: 15px;
    }

    .row.fullwidth {
        margin: 0 !important;
    }

    aside {
        display: inline-block;
        padding: 15px;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        max-width: 215px;
        height: 100vh;
        background: white;

        -webkit-box-shadow: 5px 0px 5px 0px rgba(50, 50, 50, 0.2);
        -moz-box-shadow: 5px 0px 5px 0px rgba(50, 50, 50, 0.2);
        box-shadow: 5px 0px 5px 0px rgba(50, 50, 50, 0.2);
    }

    aside a {
        color: #6E6B7B
    }

    div.aside {
        background: white !important;
        height: 100vh;
        position: relative;
    }

    aside h1 {
        margin: 0 0 0 10px;
        color: #7367F0;
        font-weight: 600;
        margin-top: 12px;
    }

    aside .logo-symbol {
        display: none;
    }

    aside .logo img {
        width: 150px !important;
    }

    aside .logo-symbol img {
        width: 30px !important;
        margin-left: -5px;
        margin-bottom: 10px;
    }

    #bootstrap_grid {
        width: calc(100% - 235px);
        margin-left: 230px;
        padding-top: 10px;
    }

    #bootstrap_grid_full {
        width: calc(100% - 30px) !important;
        margin-left: 15px !important;
        margin-right: 15px !important;
    }

    #DIRECTORY {
        color: #6E6B7B;
        margin: 0 10px;
        width: 200px;
        border-right: 1px solid #EBE9F1;
        margin-bottom: 8px !important;
    }

    #DIRECTORY label {
        width: 100%;
        color: #999999;
        font-size: 13px;
        font-weight: 300;
        float: left;
        position: relative;
        line-height: 12px;
        margin-top: 5px;
    }

    #DIRECTORY span {
        position: relative;
        float: left;
        line-height: 24px;
        font-weight: 500;
    }

    .navbar .search-bar {
        position: relative;
        float: left;
        color: #6E6B7B;
    }

    .navbar .search-bar input {
        color: #6E6B7B;
        border-color: #6E6B7B;
    }

    .navbar .quantwifi-logo {
        float: left;
    }

    .navbar .quantwifi-logo a {
        padding: 0;
    }

    .navbar .quantwifi-logo img {
        width: 100%;
        max-width: 180px;
        margin: 10px 15px;
    }

    .navbar .dropdown .dropbtn {
        color: #6E6B7B !important;
    }

    span.navbar-search-label {
        display: inline-block;
        font-weight: bold;
        color: #7367F0;
        margin: 10px;
    }


    aside.collapsed {
        width: 72px;
    }

    aside.collapsed .mobile-menu {
        margin-top: 0px !important;
    }

    aside.collapsed .mobile-menu a {
        margin-bottom: 0 !important;
    }

    aside.collapsed .logo {
        display: none !important;
    }

    /*
    aside.collapsed .logo-symbol {
        display: block !important;
    }
    */

    aside.collapsed img.logo-circle {
        width: 100%;
        margin-left: -4px;
        margin-bottom: 5px;
        margin-top: 5px;
    }

    @import url("/css/fonts.css");

    /** inline library start **/
    .display-none {
        display: none;
    }

    .border-none {
        border: 0
    }

    .va-bottom {
        vertical-align: bottom;
    }

    .clear-both {
        clear: both;
    }

    .bg-none {
        background: none;
    }

    .color-white {
        color: #fff !important;
    }

    .color-purple {
        color: #7367F0 !important;
    }

    .mt-20 {
        margin-top: 20px;
    }

    .mb-20 {
        margin-bottom: 20px;
    }

    .mb-30 {
        margin-bottom: 30px;
    }

    .m-20-0 {
        margin: 20px 0;
    }

    .display-inline {
        display: inline-block;
    }

    .lh-15 {
        line-height: 15px;
    }

    .lh-22 {
        line-height: 22px;
    }

    .lh-28 {
        line-height: 28px;
    }

    .mt-10 {
        margin-top: 10px;
    }

    .dashboard-logo-max-width {
        max-width: 120px;
    }

    .font-14 {
        font-size: 14px;
    }

    .font-13 {
        font-size: 13px;
    }

    .font-12 {
        font-size: 12px;
    }

    .font-22 {
        font-size: 22px;
    }

    .font-11 {
        font-size: 11px;
    }

    .color-teal-green {
        color: #1abb9c
    }

    .color-alert-red {
        color: #cc3333
    }

    .text-shadow-grey {
        text-shadow: 2px 2px #999;
    }

    /** inline library end **/


    body {
        padding-top: 0px;
    }

    .glyphicon-ok {
        color: #2C9D0E;
    }

    .glyphicon-remove {
        color: #FF5733;
    }

    .glyphicon-list {
        font-size: 20px;
    }

    .glyphicon-transfer {
        font-size: 17px;
    }

    .icon-widget {
        color: red;
        padding-left: 10px;
        font-size: 16px;
    }

    .icon-test {
        color: black;
        font-size: 12px;
    }

    .fa-check {
        color: #1ABB9C;
    }

    .fa-times {
        color: red;
    }

    .fa-exclamation {
        color: orange;
    }

    .fa-info {
        color: black;
    }

    .fa-question-circle {
        color: gray;
    }

    .fa-plus-circle {
        color: green;
    }

    .fa-minus-circle {
        color: red;
    }

    /* font-family: "Montserrat", Helvetica, Arial, sans-serif; font-size: 13px; */
    /* font-family: "Titillium Web", sans-serif;*/
    body {
        font-family: "Montserrat", Arial, sans-serif;
        font-size: 13px;
        color: #555;
        background: #f8f8f8;
    }

    th, td {
        white-space: nowrap;
    }

    thead {
        font-size: 11px;
        text-align: center;
    }

    /*thead {font-family:Helvetica; font-size:11px;text-align: center;}*/
    tbody {
        font-size: 11px;
    }

    th {
        text-align: center;
    }

    tr.highlight {
        background-color: #1ABB9C !important;
    }

    h1, h2 {
    }

    .active a {
        background-color: yellow;
    }

    /* debugging */
    .printborder {
        border: 1px solid black
    }

    /* navbar */
    .directory {
        float: left;
        height: 50px;
        line-height: 50px;
        font-weight: 300;
        font-size: 15px;
        border: none;
        outline: none;
        color: white;
        background-color: inherit;
    }

    .lastmodified {
        float: right;
        height: 50px;
        line-height: 50px;
        font-weight: 300;
        font-style: italic;
        font-size: 10px;
        color: white;
        background-color: inherit;
    }

    @media (max-width: 576px) {
        .lastmodified {
            display: none
        }
    }

    .navbar {
        background-color: white;
        color: #6E6B7B;
        position: relataive;
        margin-top: 10px;
        padding-top: 5px;
        width: 100%;
        z-index: 999;
        -webkit-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
        -moz-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
        box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        margin-bottom: 25px;
    }

    .navbar a {
        float: left;
        font-weight: 400;
        font-size: 15px;
        color: #6E6B7B;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        color: #333;
    }


    /* widget dropdown */
    .widget-dropdown {
        float: right;
        margin-left: 10px;
        margin-right: 0px;
    }

    .widget-dropdown:hover .widget-dropdown-content {
        display: block;
        z-index: 1;
    }

    /*.widget-dropdown {font-weight: 300;font-size: 13px;border: none;outline: none;color: white;background-color: inherit;}*/
    .widget-dropdown-content i {
        margin-left: 4px;
        margin-right: 4px;
    }

    .widget-dropdown-content a:hover {
        background-color: #ddd;
        z-index: 1;
    }

    .widget-dropdown-content {
        display: none;
        right: 5px;
        position: absolute;
        line-height: 15px;
        background-color: #f9f9f9;
        min-width: 140px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 99;
    }

    .widget-dropdown-content a {
        Float: none;
        Color: black;
        Padding: 8px 12px;
        Text-decoration: none;
        font-family: "Lato";
        font-size: 0.9em;
        font-weight: 400;
        Display: block;
        Text-align: left;
        border-bottom: 1px solid #E1E1E1;
    }

    /* btn dropdown */
    .dropdown {
        float: left;
    }

    .dropdown .dropbtn {
        font-weight: 300;
        font-size: 13px;
        border: none;
        outline: none;
        color: white;
        padding: 14px 16px;
        background-color: inherit;
    }

    .dropdown-content-right {
        display: none;
        right: 0;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 150px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
    }

    .dropdown-content-right a {
        Float: none;
        Color: black;
        Padding: 8px 12px;
        Text-decoration: none;
        font-size: 0.9em;
        font-weight: 400;
        Display: block;
        Text-align: left;
        border-bottom: 1px solid #E1E1E1;
    }

    .dropdown-content-right i {
        margin-left: 4px;
        margin-right: 4px;
    }

    .dropdown-content-right a:hover {
        background-color: #ddd;
        z-index: 1;
    }

    .dropdown:hover .dropdown-content-right {
        display: block;
        z-index: 1;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
    }

    .dropdown-content a {
        Float: none;
        Color: black;
        Padding: 8px 12px;
        Text-decoration: none;
        font-size: 0.9em;
        font-weight: 400;
        Display: block;
        Text-align: left;
        border-bottom: 1px solid #E1E1E1;
    }

    .dropdown:hover .dropdown-content {
        display: block;
        z-index: 1;
    }

    .dropdown-content i {
        margin-left: 4px;
        margin-right: 4px;
    }

    .dropdown-content a:hover {
        background-color: #ddd;
        z-index: 1;
    }

    /* Top Line - Information */
    .main-header {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .main-header-topic {
        height: 40px;
        height: 100%;
        padding-left: 5px;
        font-size: 24px;
        border-right: 1px solid #ccc;
        line-height: 40px;
        padding-right: 5px;
    }

    .main-header-device {
        height: 40px;
        height: 100%;
        padding-left: 5px;
        font-size: 18px;
        color: #1ABB9C;
        font-weight: 500;
        line-height: 40px;
    }

    @media (max-width: 576px) {
        .main-header {
            padding-top: 15px;
            padding-bottom: 15px;
        }

        .main-header-topic {
            font-size: 18px;
        }

        .main-header-device {
            font-size: 15px;
        }
    }

    .main-header-device em {
        height: 100%;
        padding: 0;
        font-size: 16px;
        font-weight: 200;
        /*height: 100px;*/
        color: #8a8a8a;
        line-height: 14px;
        vertical-align: middle;
    }

    .main-header article {
        font-size: 16px;
        font-weight: 200;
        color: #8a8a8a;
        *line-height: 100px;
        vertical-align: middle;
    }

    .main-header em {
        height: 100%;
        padding: 0;
        font-size: 16px;
        font-weight: 200;
        *height: 100px;
        color: #8a8a8a;
        line-height: 14px;
        vertical-align: middle;
    }

    /* tiles */
    .shadow {
        -webkit-box-shadow: 2px 2px 15px 2px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
        -moz-box-shadow: 2px 3px 15px 2px #ccc; /* Firefox 3.5 - 3.6 */
        box-shadow: 2px 2px 15px 2px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
    }

    .tile_top {
        padding-top: 8px;
        padding-bottom: 8px;
        font-size: 14px;
        font-weight: 400;
    }

    .tile_data {
        padding-top: 8px;
        padding-bottom: 8px;
        font-size: 30px;
        font-weight: 700;
        color: #1ABB9C;
    }

    .tile_data_condensed {
        padding-top: 8px;
        padding-bottom: 8px;
        font-size: 18px;
        font-weight: 700;
        color: #1ABB9C;
    }

    .tile_info {
        padding-left: 5px;
        padding-top: 8px;
        padding-bottom: 8px;
        font-size: 12px;
        font-weight: 600;
        color: #1ABB9C;
    }

    .tile_bottom {
        font-size: 12px;
        font-weight: 400;
    }

    .tile {
        padding-top: 8px;
        padding-bottom: 8px;
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        border-right: 1px solid #ccc;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    /*.tile1{ width:100%; min-height:90px; padding-top:8px; padding-bottom:8px; padding-right:5px; padding-left:5px; display: inline-block; vertical-align: middle; text-align: center; border-right: 1px solid #ccc; margin-top: 20px; margin-bottom : 20px; }*/

    /* tiles dashboard */
    .tile_dashboard_top {
        padding-top: 8px;
        padding-bottom: 8px;
        font-size: 14px;
        font-weight: 400;
    }

    .tile_dashboard_inline {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .tile_dashboard_data {
        padding-top: 8px;
        padding-bottom: 8px;
        font-size: 28px;
        font-weight: 700;
        color: #1ABB9C;
    }

    .tile_dashboard_data_condensed {
        padding-top: 8px;
        padding-bottom: 8px;
        font-size: 18px;
        font-weight: 700;
        color: #1ABB9C;
    }

    .tile_dashboard_info {
        padding-left: 5px;
        padding-top: 8px;
        padding-bottom: 8px;
        font-size: 10px;
        font-weight: 400;
        color: #1ABB9C;
    }

    .tile_dashboard_bottom {
        font-size: 11px;
        font-weight: 400;
    }

    .tile_dashboard {
        height: 125px;
        padding-top: 8px;
        padding-bottom: 8px;
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        border-right: 1px solid #ccc;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    /*.tile1{ width:100%; min-height:90px; padding-top:8px; padding-bottom:8px; padding-right:5px; padding-left:5px; display: inline-block; vertical-align: middle; text-align: center; border-right: 1px solid #ccc; margin-top: 20px; margin-bottom : 20px; }*/

    /* datatables */
    .dataTables_length label,
    .dataTables_filter label,
    .dataTables_info,
    .dataTables_paginate {
        font-weight: normal;
        font-size: 0.80em;
    }


    .dataTables_length {
        margin-top: 10px;
    }

    .dataTables_info {
        line-height: 2.7em;
    }

    /* test widget */
    .test_overlay {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 50%;
        display: block;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        z-index: 3;
    }

    .test-box {
        position: relative;
        background-color: #F2F2F2;
        height: 300px;
    }

    .results-timer {
        position: absolute;
        top: 44%;
        left: 50%;
        width: 50%;
        display: block;
        transform: translate(-50%, -44%);
        -ms-transform: translate(-50%, -50%);
        font-size: 16px;
        color: rgb(48, 39, 39);
    }

    .results-center {
        position: absolute;
        top: 44%;
        left: 50%;
        width: 50%;
        display: block;
        transform: translate(-50%, -44%);
        -ms-transform: translate(-50%, -50%);
        font-size: 56px;
        cursor: pointer;
        color: #1ABB9C;
    }

    .results-left {
        position: absolute;
        top: 2%;
        left: 2%;
        width: 30%;
        display: block;
        font-size: 24px;
        font-weight: 700;
        color: #1ABB9C;
    }

    .results-right {
        position: absolute;
        top: 2%;
        right: 2%;
        width: 30%;
        display: block;
        font-size: 24px;
        color: #1ABB9C;
    }

    .results-bottom {
        position: absolute;
        bottom: 6%;
        left: 50%;
        width: 60%;
        display: block;
        transform: translate(-50%, -0%);
        -ms-transform: translate(-50%, -0%);
        font-size: 20px;
        font-weight: bold;
        color: #121615;
    }

    .results-bottom-info {
        font-size: 11px;
        font-weight: normal;
        font-style: italic;
        color: #121615;
    }

    @media (max-width: 900px) {
        .test_overlay {
            width: 65%
        }

        .results-center {
            font-size: 46px
        }
    }

    @media (max-width: 576px) {
        .test_overlay {
            width: 80%
        }
    }

    @media (max-width: 576px) {
        .results-center {
            font-size: 40px
        }
    }

    @media (max-width: 576px) {
        .results-left {
            font-size: 18px
        }
    }

    @media (max-width: 576px) {
        .results-right {
            font-size: 18px
        }
    }

    @media (max-width: 576px) {
        .results-bottom {
            font-size: 18px
        }
    }

    /* visjs */
    div.vis-network div.vis-navigation div.vis-button.vis-up,
    div.vis-network div.vis-navigation div.vis-button.vis-down,
    div.vis-network div.vis-navigation div.vis-button.vis-left,
    div.vis-network div.vis-navigation div.vis-button.vis-right {
        display: none;
    }

    div.vis-network div.vis-navigation div.vis-button.vis-zoomIn {
        background-image: url("/images/zoom-in-icon.png");
        bottom: 10px;
        left: 55px;
    }

    div.vis-network div.vis-navigation div.vis-button.vis-zoomOut {
        background-image: url("/images/zoom-out-icon.png");
        bottom: 10px;
        left: 15px;
    }

    div.vis-network div.vis-navigation div.vis-button.vis-zoomExtends {
        background-image: url("/images/zoom-fit-icon.png");
        bottom: 10px;
        right: 15px;
    }

    div.vis-network div.vis-navigation div.vis-button:hover {
        box-shadow: 0 0 10px 3px #1ABB9C;
    }

    div.vis-network div.vis-navigation div.vis-button:active {
        box-shadow: 0 0 3px 3px #1ABB9C;
    }

    .vis-data-axis .vis-y-axis.vis-text {
        font-size: 6px;
    }

    .vis-time-axis .vis-text {
        padding-top: 4px;
        padding-left: 2px;
        font-size: 12px;
    }

    .vis-time-axis .vis-text.vis-major {
        font-weight: bold;
    }

    .vis-legend-text {
        font-size: 12px;
    }

    .vis-item.qwifi {
        background: #1ABB9C;
        color: white;
    }

    .vis-item.blue {
        background: blue;
        color: white;
    }

    .vis-item.black {
        background: black;
        color: white;
    }

    .vis-item.yellow {
        background: yellow;
        color: black;
    }

    .vis-item.orange {
        background: orange;
        color: black;
    }

    .vis-item.green {
        background: green;
        color: white;
    }

    .vis-item.pink {
        background: pink;
        color: black;
    }

    .vis-item.red {
        background: red;
        color: black;
    }

    .vis-item.gray {
        background: #CAC6C5;
        color: black;
    }

    #rectangle_black {
        width: 14px;
        height: 14px;
        background: black;
        vertical-align: middle;
        display: inline-block;
    }

    #rectangle_blue {
        width: 14px;
        height: 14px;
        background: blue;
        vertical-align: middle;
        display: inline-block;
    }

    #rectangle_orange {
        width: 14px;
        height: 14px;
        background: orange;
        vertical-align: middle;
        display: inline-block;
    }

    #rectangle_purple {
        width: 14px;
        height: 14px;
        background: purple;
        vertical-align: middle;
        display: inline-block;
    }

    #rectangle_pink {
        width: 14px;
        height: 14px;
        background: pink;
        vertical-align: middle;
        display: inline-block;
    }

    #rectangle_green {
        width: 14px;
        height: 14px;
        background: green;
        vertical-align: middle;
        display: inline-block;
    }

    #rectangle_red {
        width: 14px;
        height: 14px;
        background: red;
        vertical-align: middle;
        display: inline-block;
    }

    #rectangle_yellow {
        width: 14px;
        height: 14px;
        background: yellow;
        vertical-align: middle;
        display: inline-block;
    }

    #rectangle_yellow {
        width: 14px;
        height: 14px;
        background: yellow;
        vertical-align: middle;
        display: inline-block;
    }

    /* flot */
    .flot-x-axis .flot-tick-label {
        white-space: nowrap;
        transform: translate(-9px, 0) rotate(-60deg);
        text-indent: -100%;
        transform-origin: top right;
        text-align: right !important;
    }

    /* white label in wifiDeviceList page */
    .label-white {
        color: gray;
        border: 1px;
        font-size: 8px;
        border-color: black;
        border-style: solid;
        background-color: white
    }

    /* channel page */
    .label-formatter {
        font-size: 8pt;
        text-align: center;
        padding: 2px;
        color: white;
    }

    .ch-label {
        margin-top: 0px;
        text-align: center;
        font-size: 15px;
        font-weight: bold;
        color: #1ABB9C;
        margin-bottom: 6px;
    }

    .scan-btn-right {
        float: right;
        font-size: 14px;
        text-align: center;
        border-width: 1px;
        background-color: white;
        font-weight: bold;
        width: 80%;
        color: #1ABB9C;
        margin: 0px;
        padding: 0px;
    }

    .scan-btn-left {
        float: left;
        font-size: 14px;
        text-align: center;
        border-width: 1px;
        background-color: white;
        font-weight: bold;
        width: 80%;
        color: #1ABB9C;
        margin: 0px;
        padding: 0px;
    }

    .ch-select-right {
        float: right;
        font-size: 14px;
        color: #1ABB9C;
        font-weight: bold;
        height: 24px;
        margin: 0px;
        padding: 0px;
        width: 80%
    }

    .ch-select-left {
        float: left;
        font-size: 14px;
        color: #1ABB9C;
        font-weight: bold;
        height: 24px;
        margin: 0px;
        padding: 0px;
        width: 80%
    }

    /*.select {width:80px; margin:auto; font-weight:normal; font-size:16px; height:24px;}*/
    /* autocomplete in search page */
    .autocomplete-items {
        position: absolute;
        border: 1px solid #d4d4d4;
        border-bottom: none;
        border-top: none;
        width: 90%;
        z-index: 99;
        top: 100%;
        left: 0;
        right: 0;
    }

    .autocomplete-items div {
        padding: 10px;
        cursor: pointer;
        background-color: #fff;
        border-bottom: 1px solid #d4d4d4;
    }

    .autocomplete-items div:hover {
        background-color: #7367F0;
    }

    .autocomplete-active {
        background-color: #7367F0 !important;
        color: #ffffff !important;
    }

    .panel {
        margin-bottom: 15px;
    }

    .pan-row {
        color: #1ABB9C;
        font-size: 16px;
    }

    .pan-header {
        height: 20px;
        font-size: 1.1vw;
    }

    .pan-val {
        height: 40px;
        font-size: 1.4vw;
    }

    .pan-footer {
        height: 15px;
        font-size: 1.1vw;
    }

    .searchwrapper {
        border-radius: 5px;
        width: 100%;
        display: flex;
        margin: auto;
        padding-right: 0px;
        padding-left: 0px;
    }

    .subsearch {
        border: 2px solid #1ABB9C;
        width: 90%;
        border-radius: 5px;
        font-size: 15px;
        justify-content: space-between;
        display: flex;
        padding-left: 8px;
    }

    .submit {
        background: #EDEDED;
        position: relative;
        height: 26px;
        border-radius: 5px;
        border: 1px solid #1ABB9C;
    }


    /* progress chart */
    .progchart {
        margin: 0px;
        font-size: 10px;
    }

    .progchartleft {
        margin: 0px;
    }

    /* bootstrap tooltip */
    .tooltip.left .tooltip-inner {
        max-width: 310px;
        padding: 3px 8px;
        color: black;
        text-align: left;
        background-color: white;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        border: 2px solid black;
    }

    .tooltip.top .tooltip-inner {
        max-width: 310px;
        padding: 3px 8px;
        color: black;
        text-align: left;
        background-color: white;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        border: 2px solid black;
    }

    .tooltip {
        pointer-events: none;
    }

    /* pie overlay */
    .pie_overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        font-size: 20px;
        cursor: pointer;
        color: #1ABB9C;
    }

    .pie_overlay_50_350 {
        position: absolute;
        top: 43%;
        left: 50%;
        display: block;
        transform: translate(-50%, -58%);
        -ms-transform: translate(-50%, -50%);
        font-size: 16px;
        cursor: pointer;
        color: #1ABB9C;
    }

    /* ****************
     management page
     ******************/
    button.adhoc_logicAndOr {
        width: fit-content;
        height: auto;
        padding: 0px;
        margin: 0px;
    }

    .column_LEFT {
        width: 13%; /* must be the same as tableID_LEFT/_RIGHT first column width + 5*/
        margin: 0px 0px 0px 0px;
        border: 1px grey solid;
    }

    .column_RIGHT {
        width: 87%; /* must be the same as tableID_LEFT/_RIGHT first column width + 5*/
        margin: 0px 0px 0px 0px;
        overflow-x: auto;
        border: 1px grey solid;
    }

    .column_LEFT,
    .column_RIGHT {
        float: left;
        padding: 0;
        border: 0;

    }

    /* Clearfix (clear floats) */
    .columns::after {
        content: "";
        clear: both;
        display: table;
    }

    .table_x {
        border-collapse: separate;
        border-spacing: 2px;
        width: 100%;
        border: 1px solid #ddd;
    }

    tr:nth-child(even) {
        background-color: #f6f6f6;
    }

    #tableID_RIGHT {
        /* table-layout:fixed; */
        position: relative; /* not sure about this one */
        /* width: 1000px; */
        width: 100%;
        overflow: hidden;
    }

    #tableID_LEFT td.dataCell,
    #tableID_RIGHT td.dataCell {
        text-align: center;
        font-size: 9px;
        padding-left: 4px;
        height: 22px;
    }

    #tableID_LEFT th select,
    #tableID_LEFT td select,
    #tableID_RIGHT th select,
    #tableID_RIGHT td select {
        /* overflow:auto; */
        color: #1ABB9C;
        overflow: visible;
        text-align: center;
        display: table-cell;
        vertical-align: middle;
        font-size: smaller;
        border: none;
        padding: 3px;
        /* width: 55px; */
        width: auto;
    }

    #tableID_LEFT th select.logic,
    #tableID_LEFT td select.logic,
    #tableID_RIGHT th select.logic,
    #tableID_RIGHT td select.logic {
        border: 1px solid red;
        width: fit-content;
        margin: 3px;
    }

    #tableID_RIGHT th select option,
    #tableID_RIGHT td select option {
        font-size: smaller;
        font-weight: bold;
    }

    #tableID_RIGHT th select option:checked,
    #tableID_RIGHT td select option:checked {
        background-color: red;
    }

    #tableID_LEFT th.No-rotate-Yes-wrap,
    #tableID_LEFT td.No-rotate-Yes-wrap,
    #tableID_RIGHT th.No-rotate-Yes-wrap,
    #tableID_RIGHT td.No-rotate-Yes-wrap {
        height: 120px;
        white-space: normal; /* keep-wrap*/
        /* writing-mode: vertical-rl; */
        /* transform: rotate(-90deg); */ /* no rotation */
        font-weight: bold;
        min-width: 120px;
        padding: 1px;
        margin: 1px;
    }

    #tableID_LEFT th.rotate-and-wrap,
    #tableID_LEFT td.rotate-and-wrap,
    #tableID_RIGHT th.rotate-and-wrap,
    #tableID_RIGHT td.rotate-and-wrap {
        height: 120px;
        white-space: normal;
        /* writing-mode: vertical-rl; */
        transform: rotate(-90deg);
        font-weight: bold;
        min-width: 120px;
        padding: 1px;
        margin: 1px;
    }

    #tableID_LEFT tbody tr td:nth-child(1) {
        /* for js-driven synchronized-scrolling: begin */
        /*
        position: relative;
        display: block;
        */
        /* for js-driven synchronized-scrolling: end */

        /*
        background-color: grey;
        color: white;
        */

        /* font-size:10px; */ /* use the same for LEFT and RIGHT, see font-size declared earlier */
    }

    #TextInput_devId {
        color: maroon;
    }

    .TextInput_8px {
        font-size: 9px;
    }

    #adhoc_query_table_content {
        /* overflow: auto */
    }

    button.adhoc_logicAndOr {
        width: 15%;
        min-width: 100px;
        padding: 5px 2px 2px 2px;
        margin: 1px;
    }

    /*#btn_search {
        background-color: #87E27D;
    }
    */
    ._up_arrow::after {
        content: ' \25B2';
    }

    ._sideway_arrows::after {
        content: ' \2B0C';
    }

    ._empty_box::after {
        content: ' \2610';
    }

    ._empty_circle::after {
        content: ' \25EF';
    }

    ._down_arrow::after {
        content: ' \25BC';
    }

    /**************
    ***************/
    .gauge {
        width: 100%;
        height: 100%;
        display: block;
    }

    h3 {
        margin: 0 0 0 0;
    }

    hr {
        margin-top: 1rem;
        margin-bottom: 1rem;
        border: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }

    /*select {width: 100px;font-size: 14px;color: #1ABB9C;font-weight: bold;height: 32px;}*/
    .switch {
        position: relative;
        display: inline-block;
        width: 28px;
        height: 16px;
    }

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
        transition: .4s;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 12px;
        width: 12px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

    .slider.round {
        border-radius: 16px;
    }

    .slider.round:before {
        border-radius: 50%;
    }

    input:checked + .slider {
        background-color: green;
    }

    input:focus + .slider {
        box-shadow: 0 0 1px green;
    }

    input:checked + .slider:before {
        -webkit-transform: translateX(12px);
        -ms-transform: translateX(12px);
        transform: translateX(12px);
    }

    .time_overlay {
        position: absolute;
        top: 30px;
        right: 0px;
        font-size: 16px;
        background: #1ABB9C;
        z-index: 2;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        color: white;
    }

    .msg_overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: 24px;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        z-index: 2;
        color: white;
        background: #1ABB9C;
        text-decoration: none;
    }

    *:focus {
        outline: none;
    }

    .list-group-item {
        color: #1ABB9C;
        font-size: 12px;
        border: thin solid #1ABB9C;
        font-weight: bold;
    }

    div.dataTables_processing {
        z-index: 1;
    }

    /** ck edit **/
    #LAST_MODIFIED {
        font-size: 10px;
        font-weight: 500;
        color: #6E6B7B;
    }

    #DIRECTORY {
        font-size: 16px;
    }

    .dropdown.lay-right .name {
        font-size: 12px;
        float: right;
        margin-top: 6px;
        margin-right: 10px;
        font-weight: bold;
        color: #7367F0;
    }

    .dropdown.lay-right i.fa-sort-down {
        position: absolute;
        right: 15px;
        top: 10px;
        font-size: 20px;
        color: #7367F0;
    }

    .lay-right a {
        font-size: 13px;
        padding: 5px;
        display: inline-block;
        color: #5E5873;
        width: 100%;
    }

    .lay-right a:hover {
        cursor: hand;
        cursor: pointer;
        background: #7367F0;
        color: white;
    }

    .dropdown.lay-right button.dropbtn {
        margin-right: 10px;
        margin-top: -5px;
        margin-bottom: 5px;
    }

    #MENU {
        margin-top: 45px;
        width: 100%;
        display: inline-block;
    }

    #MENU a {
        font-size: 14px;
        display: inline-block;
        width: 98%;
        color: #5E5873;
        margin-bottom: 5px;
        padding: 6px 8px;
        text-decoration: none;
        line-height: 24px;
        font-weight: 400 !important;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        position: relative;
    }

    #MENU a span.text {
        margin-top: 2px;
        display: inline-block;
    }

    #MENU a .mdi {
        float: left;
        margin-right: 10px;
    }

    #MENU a:hover {
        background: #e5e5e5 !important;
    }

    #MENU a.active {
        color: white;
        background: rgb(115, 103, 240);
        background: -moz-linear-gradient(45deg, rgba(115, 103, 240, 1) 0%, rgba(158, 149, 245, 1) 100%);
        background: -webkit-linear-gradient(45deg, rgba(115, 103, 240, 1) 0%, rgba(158, 149, 245, 1) 100%);
        background: linear-gradient(45deg, rgba(115, 103, 240, 1) 0%, rgba(158, 149, 245, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7367f0", endColorstr="#9e95f5", GradientType=1);
    }

    #MENU a.active:hover {
        color: white;
        background: rgb(115, 103, 240) !important;
        background: -moz-linear-gradient(45deg, rgba(115, 103, 240, 1) 0%, rgba(158, 149, 245, 1) 100%) !important;
        background: -webkit-linear-gradient(45deg, rgba(115, 103, 240, 1) 0%, rgba(158, 149, 245, 1) 100%) !important;
        background: linear-gradient(45deg, rgba(115, 103, 240, 1) 0%, rgba(158, 149, 245, 1) 100%) !important;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7367f0", endColorstr="#9e95f5", GradientType=1) !important;
    }

    #srch_form {
        display: inline-block;
        text-align: center;
    }

    #srch_form div.search-form-row {
        width: 100%;
        display: inline-block;
        padding: 10px;
        margin-top: 10px;
        border-radius: 5px;
    }

    #srch_form div.search-form-row div.form-logo {
        border-color: #D8D6DE;
        border-right: none;
    }

    #srch_form div.search-form-row strong.title {
        display: inline-block;
        width: 100%;
        margin-bottom: 5px;
        text-align: center;
        color: #7367F0;
    }

    #srch_input {
        width: 100%;
        font-size: 28px;
        margin-bottom: 15px;
        max-width: 500px;
        margin: 15px auto !important;
        background: white !important;
    }

    #srch_btn {
        min-width: 200px;
        padding: 10px;
        height: auto;
        margin: auto;
        display: inline-block;
        font-size: 22px;
        font-weight: bold;
    }

    #srch_btn {
        background: #1ABB9C;
        color: #fff;
    }

    .autocomplete-items {
        width: 100%;
        top: 50px;
    }

    .autocomplete-items div {
        font-size: 16px;
        text-align: left;
    }

    /** deviceList.php **/
    #device_info {
        width: 94%;
        margin: 20px 3%;
    }

    /** deviceList.php **/
    #topology {
        width: 94%;
        margin: 20px 3%;
    }

    .wifi-device-list {
        width: 94%;
        margin: 20px 3%;
    }


    table.dataTable {
        font-size: 120%;
    }

    table.dataTable thead {
        font-size: 14px !important;
    }

    table.dataTable tbody {
        font-size: 13px !important;
    }

    table.dataTable tbody tr td span.label {
        font-size: 12px;
    }

    .vis-timeline {
        visibility: visible !important;
    }

    /** dashboard **/
    .body-container {
        width: 100%;
        margin: 0;
    }

    #dashboard .fancy-card {
        padding: 15px;
    }

    .load-blur {
        -webkit-filter: blur(5px);
    }

    #dashboard .db-device-logo {
        display: inline-block;
        width: 100%;
        min-height: 90px;
    }

    #dashboard .db-device-ap-counter, #dashboard .db-device-rpt-counter {
        display: inline-block;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        text-align: center;
        font-size: 11px;
        line-height: 18px;
        margin-left: 5px;
    }

    #dashboard .db-device-logo img {
        width: 100%;
        max-width: 96px;
    }

    #dashboard .db-box-title {
        font-size: 16px;
        color: #5E5873;
        font-weight: 400;
        line-height: 20px;
    }

    #dashboard .db-box-title small {
        font-size: 12px;
        color: #6E6B7B;
    }

    #dashboard .db-device-title {
        font-size: 18px;
        color: #43B0E8;
        font-weight: 400;
    }

    #dashboard .db-device-title small {
        font-size: 12px;
        color: #5E5873;
    }

    #dashboard .db-box-icon {
        width: 100%;
        display: inline-block;
    }

    #dashboard .db-line-graph-title {
        float: left;
        width: 60%;
    }

    #dashboard .db-line-graph-title span.percent {
        font-size: 36px;
        display: inline-block;
        width: 100%;
        font-weight: 600;
        color: #6E6B7B;
    }

    #dashboard .db-line-graph-title small {
        display: inline-block;
        font-size: 18px !important;
        font-weight: 400 !important;
        color: #6E6B7B;
        margin-top: -5px;
    }

    #dashboard .db-box-icon-right {
        width: 40%;
        float: right;
        text-align: right;
    }

    #dashboard .db-box-icon-right div.icon-container {
        float: right;
    }

    #dashboard .db-box-bottom-percent {
        position: absolute;
        right: 10px;
        bottom: 15px;
        max-width: 96%;
        text-align: right;
        line-height: 25px;
        font-size: 36px;
        font-weight: 500;
        display: inline-block;
        width: 100%;
    }

    #dashboard .db-box-bottom-percent small {
        font-size: 12px;
        display: inline-block;
        width: 100%;
        font-weight: 400;
        color: #6E6B7B;
    }

    #dashboard .db-box-bottom-percent span.percent {
        font-size: 24px;
    }

    #dashboard .db-box-radio-desc {
        display: inline-block;
        width: 80%;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    #dashboard .db-box-radio-desc span.percent {
        font-size: 36px;
        font-weight: 600;
    }

    #dashboard .db-box-radio-desc small {
        font-size: 17px;
        font-weight: 400;
        color: #6E6B7B;
        padding-left: 5px;
    }

    #dashboard .db-box-radio-last-time {
        display: inline-block;
        width: 80%;
        color: #B9B9C3;
        font-size: 12px;
    }

    #dashboard .db-box-icon-radio {
        position: absolute;
        right: 10px;
        top: 20px;
        width: 52px;
    }

    #dashboard .db-datarate {
        font-size: 36px;
        display: inline-block;
        width: 100%;
        margin-top: 30px;
        line-height: 25px;
    }

    #dashboard .db-datarate span.unit {
        font-size: 18px;
    }

    #dashboard .db-datarate small {
        font-size: 12px;
        color: #B9B9C3;
    }

    #dashboard .db-datarate-space {
        display: inline-block;
        width: 100%;
        height: 60px;
    }

    #radial_2ghz_rate, #radial_5ghz_rate {
        height: 300px;
    }

    #dashboard div.device-number-line {
        display: inline-block;
        width: 100%;
    }

    #dashboard div.device-number-line.radio2 {
        margin-top: 30px;
    }

    #dashboard div.device-number-line div {
        display: inline-block;
        float: left;
        height: 90px;
        margin: 0;
        padding: 0;
    }

    #dashboard div.device-number-line div.start-shape img {
        float: left;
        position: relative;
        margin: 0;
        display: inline-block;
    }

    #dashboard div.device-number-line div.title {
        color: white;
        height: 66px;
        width: 125px;
        font-size: 12px;
        padding-top: 13px;
    }

    #dashboard div.device-number-line.radio2 div.title {
        background: #1ABCFE;
        margin-top: 26px;
    }

    #dashboard div.device-number-line.radio5 div.title {
        background: #00CFE8;
        margin-top: 14px;
    }

    #dashboard div.device-number-line div.percent-fill {
        height: 66px;
    }

    #dashboard div.device-number-line.radio2 div.percent-fill {
        background: #1ABCFE;
        margin-top: 26px;
    }

    #dashboard div.device-number-line.radio5 div.percent-fill {
        background: #00CFE8;
        margin-top: 14px;
    }

    #dashboard div.device-number-line div.percent-value {
        height: 66px;
        padding-top: 16px;
        padding-left: 10px;
        font-size: 24px;
    }

    #dashboard div.device-number-line.radio2 div.percent-value {
        margin-top: 26px;
        font-weight: bold;
    }

    #dashboard div.device-number-line.radio5 div.percent-value {
        margin-top: 14px;
        font-weight: bold;
    }

    #wifi-dashboard-score td.table-label {
        font-weight: bold !important;
        font-size: 16px !important;
    }

    #wifi-dashboard-rank td.table-label {
        font-weight: bold !important;
        font-size: 16px !important;
    }

    #manager-wifi-stats {
        width: 100%;
        margin: 15px !important;
    }

    /* General Dashboard */
    #dashboard .db-box-bottom-percent-classic {
        max-width: 96%;
        line-height: 25px;
        font-size: 36px;
        font-weight: 500;
        display: inline-block;
        width: 100%;
        margin-top: 15px;
    }

    /* offcanvas */
    /* The side navigation menu */
    .sidenav {
        height: 100%; /* 100% Full-height */
        width: 0; /* 0 width - change this with JavaScript */
        position: fixed; /* Stay in place */
        z-index: 1; /* Stay on top */
        top: 0;
        right: 0;
        background-color: #e2e2e2; /* Black*/
        overflow-x: hidden; /* Disable horizontal scroll */
        padding-top: 60px; /* Place content 60px from the top */
        transition: 0s; /* 0.5 second transition effect to slide in the sidenav */
        font-size: 14px;
        -webkit-box-shadow: -5px 0px 3px 0px rgba(50, 50, 50, 0.2);
        -moz-box-shadow: -5px 0px 3px 0px rgba(50, 50, 50, 0.2);
        box-shadow: -5px 0px 3px 0px rgba(50, 50, 50, 0.2);
    }

    .sidenav ul {
        margin: 0 10px 0 0;
        padding: 10px
    }

    .sidenav ul li {
        display: inline-block;
        width: 100%;
        margin-bottom: 10px;
    }

    /* The navigation menu links */
    .sidenav a {
        padding: 8px 8px 8px 8px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }

    /* When you mouse over the navigation links, change their color */
    .sidenav a:hover {
        color: #333;
    }

    /* Position and style the close button (top right corner) */
    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 18px;
        margin-left: 50px;
    }

    /* Style page content - use this if you want to push the page content to the right when you open the side navigation */
    #main {
        transition: margin-left .5s;
        padding: 20px;
    }


    /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
    @media screen and (max-height: 450px) {
        .sidenav {
            padding-top: 15px;
        }

        .sidenav a {
            font-size: 18px;
        }
    }

    a.toggle-details {
        color: #333 !important;
        font-size: 13px !important;
        font-weight: bold !important;
        display: inline-block;
        margin-top: 5px;
        width: 100%;
        padding: 5px;
    }

    /* offcanvas */


    #ds_gwip {
        font-size: 14px;
    }

    #ds_uptime {
        letter-spacing: -0.05em;
    }

    #ds_ip {
        font-size: 14px;
    }

    #ds_radio_type_table {
        margin: 0 !important;
    }

    #ds_radio_type_table tr td {
        font-size: 18px !important;
        padding: 4px !important;

    }

    #ds_ch2_ssid {
        font-weight: 700;
    }

    #ds_ch5_ssid {
        font-weight: 700;
    }

    #ds_last_seen_container {
        font-size: 15px !important;
        margin-top: 15px;
    }

    #ds_radio_type_table tr td.wifi-radio-label {
        font-size: 12px !important;
    }

    #ds_radio_type_table tr td span.busy-status {
        width: 100%;
        padding: 3px 6px !important;
    }

    #srch_inputautocomplete-list {
        max-width: 496px;
        margin: auto;
        top: 60px;
    }

    #highcharts {
        width: 80%;
        margin: 2% 10%;
    }

    .widget-container div.card {
        background: white;
        padding: 0;
        margin-bottom: 30px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

    .widget-container div.card-header {
        padding: 8px 10px;
        line-height: 16px;
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: normal;
        color: white;
        height: 48px !important;
        -webkit-border-top-left-radius: 5px;
        -webkit-border-top-right-radius: 5px;
        -moz-border-radius-topleft: 5px;
        -moz-border-radius-topright: 5px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;

        background: rgb(12, 158, 130);
        background: -moz-linear-gradient(0deg, rgba(12, 158, 130, 1) 0%, rgba(26, 187, 156, 1) 44%, rgba(26, 187, 156, 1) 100%);
        background: -webkit-linear-gradient(0deg, rgba(12, 158, 130, 1) 0%, rgba(26, 187, 156, 1) 44%, rgba(26, 187, 156, 1) 100%);
        background: linear-gradient(0deg, rgba(12, 158, 130, 1) 0%, rgba(26, 187, 156, 1) 44%, rgba(26, 187, 156, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0c9e82", endColorstr="#1abb9c", GradientType=1);
    }

    .widget-container div.card-header i.fa {
        font-size: 34px;
        color: #f5f5f5;
        display: inline-block;
        margin-right: 5px;
        float: right;
    }

    .widget-container div.card-body {
        padding: 15px;
    }

    .widget-container div.header-info-color {
        background: #7cb5ec;
    }

    .widget-container div.eh-line-info div.card-body i.fa {
        margin-bottom: 15px;
    }

    #HEADER_DEVICE_ID {
        width: 200px;
    }

    #HEADER_DEVICE_ID div.form-filter {
        position: absolute;
        left: 10px;
        top: 5px;
    }

    #HEADER_DEVICE_ID div.form-filter div.filter-dropdown {
        width: 100px !important;
    }

    #HEADER_DEVICE_ID div.autocomplete-items {
        left: 120px;
    }

    #HEADER_DEVICE_ID div.form-filter div.filter-dropdown span {
        padding-left: 5px;
    }

    #HEADER_DEVICE_ID div.form-filter div.filter-dropdown .select {
        padding: 10px 5px;
    }

    #HEADER_DEVICE_ID input {
        border: 0;
        background: none;
        color: #6E6B7B;
        text-align: left;
        font-size: 15px;
        height: 40px;
        line-height: 10px;
        padding: 15px;
        background: #ffffff;
        box-shadow: inset 0px 1px 8px rgba(0, 0, 0, 0.1);
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        position: absolute;
        top: 5px;
        left: 120px;
    }

    #HEADER_DEVICE_ID div.autocomplete-items {
        position: absolute;
        color: #6E6B7B;
        top: 45px;
        left: 120px;
        width: 280px;
        -webkit-box-shadow: 5px 0px 5px 0px rgba(50, 50, 50, 0.2);
        -moz-box-shadow: 5px 0px 5px 0px rgba(50, 50, 50, 0.2);
        box-shadow: 5px 0px 5px 0px rgba(50, 50, 50, 0.2);
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        font-size: 14px;
        background: white;
        border: 0 !important;
    }

    #HEADER_DEVICE_ID input.search-by-identifier {
        background-image: url('/images/search-device-label.png');
        background-repeat: no-repeat;
        background-position: left center;
        padding-left: 78px;
    }

    #HEADER_DEVICE_ID input.search-by-service-number {
        background-image: url('/images/search-by-service-number.png');
        background-repeat: no-repeat;
        background-position: left center;
        padding-left: 78px;
    }

    #HEADER_DEVICE_ID div.autocomplete-items div {
        font-size: 14px;
        font-weight: 400;
        color: #6E6B7B;
        border: 0 !important;
        letter-spacing: 0.015em;
        background-color: #fff;
        background-image: url("/images/welcome-selected.png");
        background-position: right center;
        background-size: 24px 17px;
        background-repeat: no-repeat;
    }

    #HEADER_DEVICE_ID div.autocomplete-active {
        background-color: #7367F0;
        background-image: url("/images/welcome-selected.png");
        background-position: right center;
        background-size: 24px 17px;
        background-repeat: no-repeat;
    }

    #HEADER_DEVICE_ID div.autocomplete-items div:first-child {
        -webkit-border-top-left-radius: 6px;
        -webkit-border-top-right-radius: 6px;
        -moz-border-radius-topleft: 6px;
        -moz-border-radius-topright: 6px;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
    }

    #HEADER_DEVICE_ID div.autocomplete-items div:last-child {
        -webkit-border-bottom-right-radius: 6px;
        -webkit-border-bottom-left-radius: 6px;
        -moz-border-radius-bottomright: 6px;
        -moz-border-radius-bottomleft: 6px;
        border-bottom-right-radius: 6px;
        border-bottom-left-radius: 6px;
    }

    #HEADER_DEVICE_ID div.autocomplete-items div:hover {
        background-color: #7367F0 !important;
        color: white;
    }

    #HEADER_DEVICE_ID.header-search-identifier {
        width: 300px !important;
    }

    #HEADER_DEVICE_ID.header-search-identifier .form-filter {
        display: none !important;
    }

    #HEADER_DEVICE_ID.header-search-identifier input.quick_search_input {
        left: 20px !important;
    }

    #HEADER_DEVICE_ID.header-search-identifier div.autocomplete-items {
        left: 20px;
    }

    #search_device {
        color: #7367F0;
        font-size: 20px;
        background: none;
        position: absolute;
        padding-left: 0 !important;
        margin-left: 10px;
        margin-top: -5px;
        left: 260px;
        z-index: 999;
    }

    #quick_search {
        width: 95% !important;
    }

    #quick_search::-webkit-input-placeholder {
        color: #5E5873; /*Change the placeholder color*/
        opacity: 0.85; /*Change the opacity between 0 and 1*/
    }

    #wifi-client .card {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        margin-bottom: 0;
    }

    #wifi-client table.stats {
        margin: 10px 25px;
        width: calc(100% - 50px)
    }

    #wifi-client table.stats tr td {
        padding: 5px;
        font-size: 22px;
    }

    #wifi-client table.stats tr td:nth-child(1) {
        width: 15%;
        text-align: center
    }

    #wifi-client table.stats tr td:nth-child(2) {
        width: 35%;
    }

    #wifi-client table.stats tr td:nth-child(3) {
        width: 20%;
        text-align: center
    }

    #wifi-client table.stats tr td .btn {
        width: 100%;
    }

    #wifi-client table.stats tr td:nth-child(4) {
        width: 30%;
        text-align: right
    }

    #wifi-channel .card .btn-secondary {
        font-size: 20px;
        font-weight: bold;
    }

    #wifi-channel .card .busy-info {
        margin-top: 12px;
        display: inline-block;
    }

    h6.chart-title {
        font-size: 10px;
        color: #6E6B7B;
        font-weight: 600;
        padding-left: 0;
        margin-top: 5px;
    }

    h6.chart-title .chart-last-update {
        float: right;
        font-size: 10px !important;
        display: inline-block;
        color: #B9B9C3;
        position: relative;
        font-weight: 400 !important;
    }

    #draw-wifi_capacity, #draw-utilization {
        margin-top: 40px;
    }

    #wifi-broadband .dsl-graphs {
        display: none;
    }

    #wifi-broadband .card {
        margin-bottom: 15px;
    }

    #wifi-broadband .card small {
        font-size: 11px !important;
    }

    #wifi-broadband .card .row {
        margin-bottom: 15px;
    }

    #wifi-broadband .card .card-body {
        padding-top: 0;
    }

    #wifi-broadband .card .card-body .value {
        color: #1abb9c;
        font-size: 36px;
        font-weight: normal;
    }

    #wifi-broadband .card .card-header span.title {
        display: inline-block;
        font-weight: bold;
    }

    #wifi-broadband .card .card-body .info {
        margin-bottom: 10px;
    }


    #wifi-cpu-mem .card .card-body {
        padding-top: 0;
    }

    #wifi-cpu-mem .card .card-body .value {
        color: #1abb9c;
        font-size: 36px;
        font-weight: normal;
    }

    #wifi-cpu-mem .card .card-header span.title {
        display: inline-block;
        font-weight: bold;
    }

    #wifi-cpu-mem .card .card-body .info {
        margin-bottom: 10px;
    }

    #wifi-client .card {
        margin-bottom: 15px;
    }

    #wifi-client .card .card-body {
        padding-top: 0;
    }

    #wifi-client .card .card-body .value {
        color: #1abb9c;
        font-size: 36px;
        font-weight: normal;
    }

    #wifi-client .card .card-header span.title {
        display: inline-block;
        font-weight: bold;
    }

    #wifi-client .card .card-body .info {
        margin-bottom: 10px;
    }

    #wifi-channel .card .card-header span.title {
        display: inline-block;
        font-weight: bold;
    }

    #broadband_rate_tx, #broadband_data_tx {
        border-right: 0
    }

    #broadband_hourly_widget div.widget-content {
        border: 0;
    }

    .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 {
        padding-left: 15px;
        padding-right: 15px;
    }

    .row.fullwidth {
        margin: 0 !important;
    }

    aside {
        display: inline-block;
        padding: 15px;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        max-width: 215px;
        height: 100vh;
        background: white;

        -webkit-box-shadow: 5px 0px 5px 0px rgba(50, 50, 50, 0.2);
        -moz-box-shadow: 5px 0px 5px 0px rgba(50, 50, 50, 0.2);
        box-shadow: 5px 0px 5px 0px rgba(50, 50, 50, 0.2);
    }

    aside a {
        color: #6E6B7B
    }

    div.aside {
        background: white !important;
        height: 100vh;
        position: relative;
    }

    aside h1 {
        margin: 0 0 0 10px;
        color: #7367F0;
        font-weight: 600;
        margin-top: 12px;
    }

    aside .logo-symbol {
        display: none;
    }

    aside .logo img {
        width: 150px !important;
    }

    aside .logo-symbol img {
        width: 30px !important;
        margin-left: -5px;
        margin-bottom: 10px;
    }

    #bootstrap_grid {
        width: calc(100% - 235px);
        margin-left: 230px;
        padding-top: 10px;
    }

    #bootstrap_grid_full {
        width: calc(100% - 30px) !important;
        margin-left: 15px !important;
        margin-right: 15px !important;
    }

    #DIRECTORY {
        color: #6E6B7B;
        margin: 0 10px;
        width: 200px;
        border-right: 1px solid #EBE9F1;
        margin-bottom: 8px !important;
    }

    #DIRECTORY label {
        width: 100%;
        color: #999999;
        font-size: 13px;
        font-weight: 300;
        float: left;
        position: relative;
        line-height: 12px;
        margin-top: 5px;
    }

    #DIRECTORY span {
        position: relative;
        float: left;
        line-height: 24px;
        font-weight: 500;
    }

    .navbar .search-bar {
        position: relative;
        float: left;
        color: #6E6B7B;
    }

    .navbar .search-bar input {
        color: #6E6B7B;
        border-color: #6E6B7B;
    }

    .navbar .quantwifi-logo {
        float: left;
    }

    .navbar .quantwifi-logo a {
        padding: 0;
    }

    .navbar .quantwifi-logo img {
        width: 100%;
        max-width: 180px;
        margin: 10px 15px;
    }

    .navbar .dropdown .dropbtn {
        color: #6E6B7B !important;
    }

    span.navbar-search-label {
        display: inline-block;
        font-weight: bold;
        color: #7367F0;
        margin: 10px;
    }


    aside.collapsed {
        width: 72px;
    }

    aside.collapsed .mobile-menu {
        margin-top: 0px !important;
    }

    aside.collapsed .mobile-menu a {
        margin-bottom: 0 !important;
    }

    aside.collapsed .logo {
        display: none !important;
    }

    /*
    aside.collapsed .logo-symbol {
        display: block !important;
    }
    */

    aside.collapsed img.logo-circle {
        width: 100%;
        margin-left: -4px;
        margin-bottom: 5px;
        margin-top: 5px;
    }

    aside.collapsed a span.text {
        display: none !important;
    }

    aside.collapsed .close-menu {
        display: none;
    }

    aside.collapsed .open-menu {
        display: inline-block;
    }

    .container-fluid.increase-container-width {
        width: calc(100% - 72px) !important;
        margin-left: 72px !important;
    }

    .welcome-page .footer-container {
        display: none;
    }

    #welcome-search {
        text-align: center;
        position: absolute;
        width: 500px;
        height: 380px;
        top: calc(50% - 190px);
        left: 50%;
        margin-left: -215px;
    }

    #welcome-search img.welcome-logo {
        display: inline-block;
        max-width: 290px;
        margin-bottom: 32px;
    }

    #welcome-search div.line {
        width: 100%;
        display: inline-block;
    }

    #welcome-search h1.logo {
        display: inline-block;
        color: #7367F0;
        background: url('/images/logo-circle.png') left center no-repeat;
        background-size: 45px 45px !important;
        padding-left: 50px;
        height: 60px;
        line-height: 60px;
        font-size: 36px;
        margin-bottom: 40px;
        letter-spacing: -0.035em;
        margin-left: -60px
    }

    #welcome-search div.input-group {
        position: relative;
        display: inline-block;
        float: left;
    }


    #welcome-search div.form-logo {
        width: calc(15% - 2px);
        border: 1px solid #7367F0;
        -webkit-border-top-left-radius: 5px;
        -webkit-border-bottom-left-radius: 5px;
        -moz-border-radius-topleft: 5px;
        -moz-border-radius-bottomleft: 5px;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        height: 39px;
        background: #fff;
        color: #7367F0;
        line-height: 35px;
    }

    #welcome-search div.form-logo i:hover {
        cursor: hand;
        cursor: pointer;
    }

    #welcome-search div.form-logo select {
        width: 96% !important;
        margin: 2%;
        border: 0 !important;
    }

    #welcome-search div.form-input {
        width: 70%;
        border-top: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;
        height: 33px;
        line-height: 35px;
        background: #fff;
    }

    #welcome-search div.form-button {
        width: calc(15% - 2px);
        border: 1px solid #7367F0;
        -webkit-border-top-right-radius: 5px;
        -webkit-border-bottom-right-radius: 5px;
        -moz-border-radius-topright: 5px;
        -moz-border-radius-bottomright: 5px;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        height: 39px;
        background: #7367F0;
    }

    #welcome-search div.form-button button {
        background: none;
        border: 0;
        color: #fff;
        font-size: 13px;
        line-height: 35px;
        height: 39px;
    }

    #welcome-search input.subsearch {
        border: 0;
        float: left;
        width: 100%;
        margin: 0 !important;
        border-radius: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        font-size: 15px;
    }

    #welcome-search div.autocomplete-items {
        top: 38px !important;
        -webkit-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
        -moz-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
        box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
    }

    #welcome-search div.autocomplete-items div {
        font-size: 13px !important;
        padding: 5px 15px !important;
        height: 38px;
        line-height: 28px;
        border: none !important;
        background: #fff url("/images/welcome-selected.png") right center no-repeat;
        background-size: 24px 17px;
    }

    #welcome-search div.autocomplete-items div:hover {
        color: white !important;
        background-color: #7367F0 !important;
    }

    #welcome-search div.device-not-found-error {
        color: #7367F0;
        font-size: 14px;
        font-weight: 400;
        display: inline-block;
        text-align: center;
        margin-top: 10px;
        background: rgba(115, 103, 240, 0.12);
        padding: 10px 20px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

    #welcome-search .device-not-found-error-close {
        margin-left: 10px;
    }

    #welcome-search .device-not-found-error-close:hover {
        text-decoration: none;
    }

    #welcome-search .get-device-list {

    }

    div.login-footer-logo {
        margin-bottom: 0 !important;
    }

    div.login-footer-logo img {
        width: 100%;
        max-width: 230px;
        margin: 20px auto 0 auto;
    }

    #login-container {
        position: absolute;
        left: 50%;
        margin-left: -205px;
        width: 410px;
        height: 540px;
        top: calc(50% - 270px);
    }

    #login-container img.captcha_image {
        width: 100% !important;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        border: 1px solid #D3D3D3;
    }


    #login-container .login-screen {
        width: 100%;
        position: relative;
        max-width: 410px;
        padding: 30px;
        border: 1px solid #e5e5e5;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        background: #fff;
        color: #5E5873;
        -webkit-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
        -moz-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
        box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
    }

    #login-container .welcome-title {
        display: inline-block;
        width: 100%;
        font-weight: 600 !important;
        margin-bottom: 10px;
        font-size: 18px;
    }

    #login-container .login-screen hr.button-line {
        line-height: 1px;
        margin-top: 0;
        margin-bottom: 30px;
    }

    #login-container .alert-screen {
        background: rgba(115, 103, 240, 0.12);
        border-radius: 4px;
        color: #7367F0;
        width: 100%;
        max-width: 480px;
        padding: 15px;
        margin: 30px auto;
        position: relative;
    }

    #login-container .alert-screen p {
        margin: 5px;
        width: 90%;
        display: inline-block;
        text-align: left;
        color: #7367F0;
    }

    #login-container .alert-screen a.close-alert {
        width: 32px;
        height: 32px;
        line-height: 32px;
        font-size: 28px;
        color: #7367F0;
        display: inline-block;
        text-align: center;
        position: absolute;
        right: 5px;
        top: 5px;
        z-index: 999;
    }

    #login-container .login-screen .login-logo {
        width: 100%;
        display: inline-block;
        max-width: 165px;
        margin-bottom: 20px;
    }

    #login-container .login-screen .text-center {
        text-align: center;
    }

    #login-container .login-screen h1.logo {
        display: inline-block;
        color: #7367F0;
        background: url('/images/logo-circle.png') left center no-repeat;
        background-size: 32px 32px;
        padding-left: 40px;
        height: 70px;
        line-height: 70px;
        font-size: 32px;
        margin-bottom: 10px;
        font-weight: 600;
    }

    #login-container div.line {
        position: relative;
        display: inline-block;
        width: 100%;
        font-size: 16px;
        margin-bottom: 10px;
    }

    #login-container div.line small {
        display: inline-block;
        width: 100%;
        margin-bottom: 5px;
    }

    #login-container div.line small.weight-400 {
        font-weight: 400;
    }

    #login-container div.line input {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        padding: 10px !important;
        font-size: 13px;
        color: #5E5873;
    }

    #login-container div.line input::placeholder {
        color: #B9B9C3;
        opacity: 1; /* Firefox */
    }

    #login-container div.line input:-ms-input-placeholder {
        color: #B9B9C3;
    }

    #login-container div.line input::-ms-input-placeholder {
        color: #B9B9C3;
    }


    #login-container div.captcha-form {
        text-align: center;
        width: 100%;
        margin: 15px 0 30px 0;
    }

    #login-container div.captcha-form input {
        max-width: 250px;
        text-align: center;
        letter-spacing: 0.075em;
        font-weight: 400;
        margin: auto;
        font-size: 20px;
        color: #B9B9C3 !important;
        padding: 5px !important;
    }

    #login-container div.captcha-form img {
        float: none;
        margin-bottom: 5px;
    }

    #login-container div.captcha-form div.captcha-left {
        width: 48%;
        float: left;
        margin-right: 2%;
    }

    #login-container div.captcha-form div.captcha-left img {
        width: 200px;
    }

    #login-container div.captcha-form div.captcha-right {
        width: 48%;
        float: right;
        margin-left: 2%;
    }

    #login-container div.captcha-form div.captcha-right input {

    }

    #login-container .login-button {
        background: #7367F0;
        width: 100%;
        color: #fff;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        text-transform: none !important;
    }

    #login-container .login-button:hover {
        cursor: hand;
        cursor: pointer;
    }

    #footer {
        left: 10px;
        bottom: 10px;
        width: 190px;
        position: fixed;
        color: #6E6B7B;
        font-size: 12px !important;
    }

    #footer .copyright span {
        color: #7367F0;
        font-weight: 600;
    }

    #topology_container {
        display: none;
    }

    #topology_graph {
        width: 100%;
        height: 650px;
        position: relative;
        margin: auto;
    }

    .home-warnings ul {
        list-style-type: none;
    }

    .home-warnings ul li {
        margin-bottom:10px;
    }

    #home-network .test-it, #wifi-device-list .test-it {
        position: absolute;
        right: 50px;
        bottom: 50px;
        z-index: 999;
        font-size: 14px;
        font-weight: 500;
        color: #7367F0;
        border: 1px solid #7367F0;
        background: rgba(115, 103, 240, 0.04);
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        padding: 10px 20px;
        display: none
    }

    #home-network .test-it:hover, #wifi-device-list .test-it:hover {
        background: #7367F0;
        color: white;
        text-decoration: none;
        cursor: pointer;
    }

    #topology_graph .vis-network canvas {
        display: inline-block;
        width: 100%;
        height: 500px;
    }

    #alert-message {
        display: none;
    }

    #topology_table_container {
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
        margin: 0 15px 15px 15px;
    }

    #topology_table_container table.dataTable tbody tr td {
        height: 35px;
    }

    #topology_table_container table.dataTable tbody tr td.select-checkbox::before {
        margin-top: 0;
    }

    #topology_table_container table.dataTable tbody tr td.select-checkbox::after {
        margin-top: -4px
    }

    #topology_table_container table.dataTable.compact {
        width: 100%;
        margin: 0;
    }

    #topology_table_container table.dataTable.compact tr td, #topology_table_container table.dataTable.compact, #topology_table_container table.dataTable.compact thead th, table.dataTable.compact thead td {
        border-bottom: 0;
    }

    #topology_table_container table tr.highlight {
        background: rgba(115, 103, 240, 0.12) !important;
    }

    @media only screen and (max-width: 991px) {
        #dashboard-wifi-coverage div.metric-line {
            margin-top: 0 !important;
            margin-bottom: 10px !important;
        }
    }

    @media only screen and (min-width: 992px) {

        .h100px {
            height: 100px !important;
        }

        .h125px {
            height: 125px !important;
        }

        .h150px {
            height: 150px !important;
        }

        .h175px {
            height: 175px !important;
        }

        .h200px {
            height: 200px !important;
        }

        .h200px {
            height: 200px !important;
        }

        .h225px {
            height: 225px !important;
        }

        .h250px {
            height: 250px !important;
        }

        .h275px {
            height: 275px !important;
        }

        .h300px {
            height: 300px !important;
        }

        .h325px {
            height: 325px !important;
        }

        .h325px-min {
            min-height: 325px !important;
        }

        .h350px {
            height: 350px;
        }

        .h375px {
            height: 375px;
        }

        .h400px {
            height: 400px;
        }

        .h450px {
            height: 450px;
        }

        .h450px-min {
            min-height: 325px !important;
        }

        .h500px {
            height: 500px;
        }

        .h550px {
            height: 550px;
        }
    }

    @media only screen and (max-width: 767px) {
        #login-container .login screen {
            position: relative !important;
            left: inherit;
            top: inherit;
            margin: auto !important;
        }
    }

    #open-menu {
        margin-bottom: 15px;
        margin-left: -2px;
    }

    #close-menu {
        position: absolute;
        left: 180px;
    }

    /* fancy style */
    .fancy-card {
        position: relative;
        background: white;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
        -moz-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
        box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
        display: inline-block;
        width: 100%;
        margin: 0;
        padding: 10px;
    }

    .fancy-card div.eh-line-1 {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .fancy-card div.icon-container {
        width: 60px;
        float: left;
        margin: 0;
        padding: 5px;
        text-align: center;
    }

    .fancy-card div.icon-container i {
        width: 48px;
        height: 48px;
        -webkit-border-radius: 26px;
        -moz-border-radius: 26px;
        border-radius: 26px;
        background: #f0f0f0;
        text-align: center;
        display: inline-block;
        line-height: 48px;
    }

    .fancy-card div.text-container {
        width: calc(100% - 60px);
        float: left;
        margin: 0;
        padding: 5px;
    }

    .fancy-card div.text-container h6 {
        font-size: 18px;
        font-weight: 600;
        margin-left: 5px;
        width: 100%;
        color: #5E5873;
    }

    .fancy-card div.text-container h6.value {
        margin-bottom: 0;
    }

    .fancy-card div.text-container h7 {
        font-size: 12px;
        margin-left: 5px;
        font-weight: 400;
        width: 100%;
        color: #6E6B7B;
    }

    .fancy-card small.title {
        position: absolute;
        bottom: 10px;
        width: 90%;
        left: 5%;
        text-align: center;
        font-size: 15px;
        font-weight: 600;
        font-size: 14px;
        line-height: 17px;
        color: #373d3f;
    }

    .fancy-margin-settings {
        margin-bottom: 25px;
    }

    .fancy-margin-settings-20 {
        margin-bottom: 20px !important;
    }

    .fancy-margin-settings-15 {
        margin-bottom: 15px !important;
    }

    table.fancy-table {
        width: 100%;
        border-left: 1px solid #F3F2F7;
        border-right: 1px solid #F3F2F7;
    }

    table.fancy-table tbody tr td {
        border-bottom: 1px solid #F3F2F7;
    }

    .fancy-card h6.chart-title {
        font-weight: 600;
        font-size: 9px;
        padding-left: 15px;
        position: relative;
    }

    .last-seen {
        position: absolute;
        right: 30px;
        top: 15px;
        font-size: 10px;
        color: #6E6B7B;
    }

    .selected-device-service-number {
        position: absolute;
        left: 30px;
        top: 15px;
        font-size: 10px;
        color: #6E6B7B;
    }

    table.fancy-table thead tr {
        background: #F3F2F7;
        height: 35px;
    }

    table.fancy-table thead tr th {
        font-size: 11px;
        color: #5E5873;
        font-weight: 600;
        padding: 5px;
        text-align: left !important;
    }

    table.fancy-table thead tr th:last-child {
        text-align: center !important;
    }

    table.fancy-table tbody tr:nth-child(odd) {
        background: #fff;
    }

    table.fancy-table tbody tr:nth-child(even) {
        background: #fff;
    }

    table.fancy-table tbody tr td {
        padding: 10px 8px;
        font-size: 12px;
        font-weight: 400;
    }



    #topology_table_container table.fancy-table tbody tr:hover {
        background: #7367F0 !important;
    }

    #topology_table_container table.fancy-table tbody tr:hover td {
        color: white;
    }

    #topology_table_container table.fancy-table tbody tr td:last-child {
        text-align: center !important;
    }


    table.fancy-table tr td button.btn-xs {
        background: #7367F01F !important;
        color: #7367F0 !important;
        -webkit-border-radius: 16px;
        -moz-border-radius: 16px;
        border-radius: 16px;
        font-size: 11px;
        padding: 3px 10px;
    }

    table.fancy-table tbody tr:hover td button.btn-xs {
        background: white !important;
        color: #7367F0;
    }

    .fw300 {
        font-weight: 300 !important;
    }

    .fw400 {
        font-weight: 400 !important;
    }

    .fw500 {
        font-weight: 500 !important;
    }

    .fw600 {
        font-weight: 600 !important;
    }

    .fw700 {
        font-weight: 700 !important;
    }

    .clr-green {
        color: #28C76F !important;
    }

    .btn-clr-green {
        color: #28C76F !important;
        background: rgba(40, 199, 111, 0.12) !important;
    }

    .clr-red {
        color: #EA5455 !important;
    }

    .btn-clr-red {
        color: #EA5455 !important;
        background: rgba(234, 84, 85, 0.12) !important;
    }

    .clr-grey {
        color: #555 !important;
    }

    .btn-clr-grey {
        color: #555 !important;
        background: #f0f0f0 !important;
    }

    .clr-blue {
        color: #00CFE8 !important;
    }

    .btn-clr-blue {
        color: #00CFE8 !important;
        background: rgba(0, 207, 232, 0.12) !important;
    }

    .clr-orange {
        color: #FF9F43 !important;
    }

    .btn-clr-orange {
        color: #FF9F43 !important;
        background: rgba(255, 159, 67, 0.12) !important;
    }

    .clr-yellow {
        color: #FFCE43 !important;
    }

    .btn-clr-yellow {
        color: #FFCE43 !important;
        background: rgba(255, 202, 68, 0.12) !important;
    }

    .clr-purple {
        color: #7367F0 !important;
    }

    .btn-clr-purple {
        color: #7367F0 !important;
        background: rgba(115, 103, 240, 0.12) !important;
    }

    .btn-clr-2ghz {
        color: #1ABCFE !important;
        /*background: rgba(26, 188, 254, 0.12);*/
    }

    .btn-clr-5ghz {
        color: #00CFE8 !important;
        /*background: rgba(0, 207, 232, 0.12);*/
    }

    .swal2-icon.swal2-warning {
        border-color: #FF9F43 !important;
        border-width: 8px !important;
    }

    .swal2-icon.swal2-warning.swal2-icon-show .swal2-icon-content {
        color: #FF9F43;
        font-weight: 600;
    }

    .swal2-html-container {
        font-size: 14px !important;
        line-height: 21px !important;
        font-weight: 400;
        margin: 1.5em 1.6em .3em !important;
    }

    .vis-tooltip {
        padding: 0 !important;
        margin: 0 !important;
        background: #fff !important;
        -webkit-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
        -moz-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
        box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
    }

    .vis-tooltip table {
        margin: 0;
        padding: 0;
        font-weight: 400 !important;
        color: #777483 !important;
        border-color: #EBE9F1;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

    .vis-tooltip table tr {
        background: white !important;
    }

    .vis-tooltip table tr:first-child th {
        text-align: left !important;
        background: #F8F8F8;
        font-weight: 500 !important;
        font-size: 12px !important;
    }

    .table-condensed tr:first-child th {
        text-align: left !important;
        background: #F8F8F8;
        font-weight: 500 !important;
        font-size: 12px !important;
    }

    .vis-tooltip table tr td b {
        font-weight: 600 !important;
    }

    .vis-tooltip table tr td .status {
        border-radius: 5px;
    }

    .vis-tooltip table.table-condensed td.popup-line {
        font-size: 10px !important;
        font-family: 'Montserrat' !important;
    }

    .rectangle_radius {
        -webkit-border-radius: 7px;
        -moz-border-radius: 7px;
        border-radius: 7px;
    }

    #rectangle_green {
        -webkit-border-radius: 7px;
        -moz-border-radius: 7px;
        border-radius: 7px;
        background: #28C76F;
    }

    #rectangle_red {
        -webkit-border-radius: 7px;
        -moz-border-radius: 7px;
        border-radius: 7px;
        background: #cc3333;
    }

    div.vis-tooltip {
        font-size: 10px !important;
        border-color: #EBE9F1 !important;
    }

    .vis-tooltip table tr:first-child th {
        border-top: 0 !important;
    }

    .popup-line {
        margint: 5px;
        font-size: 14px;
    }

    div.draw-wifi_capacity_bar_container {
        height: 300px !important;
    }

    #draw-wifi_capacity_bar {
        position: absolute;
        width: 25px;
        display: inline-block;
        height: 200px;
        left: calc(50% - 12.5px);
        background: #e0e0e0;
        bottom: 50px;
        -webkit-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
        -moz-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
        box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
    }

    #draw-wifi_capacity_bar .draw-wifi_capacity_bar {
        position: absolute;
        width: 25px;
        background: none;
        bottom: 0;
        left: 0;
        height: 180px;
    }

    #draw-wifi_capacity_bar .draw-wifi_capacity_bar.draw-danger {
        background: #EA5455 !important;
    }

    #draw-wifi_capacity_bar .draw-wifi_capacity_bar.draw-warning {
        background: #FF9F43 !important;
    }

    #draw-wifi_capacity_bar .draw-wifi_capacity_bar.draw-success {
        background: #28C76F !important;
    }


    #draw-wifi_capacity_bar .draw-wifi_capacity_bar span {
        font-size: 10px;
        display: block;
        -webkit-transform: rotate(270deg);
        -moz-transform: rotate(270deg);
        -o-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
        transform: rotate(270deg);
        position: absolute;
        bottom: 15px;
        left: calc(50% - 40px);
        font-weight: 600;
    }

    #devicelist-table-help {
        font-size: 14px !important;
        display: inline-block;
        color: #666;
        text-align: left;
        font-weight: 400 !important;
        margin-bottom: 10px;
        position: absolute;
        right: 225px;
        top: 10px;
        z-index: 9;
    }

    table.marketing-report-table tr td:first-child {
        text-decoration: underline;
    }

    table.marketing-report-table tr td:first-child:hover {
        cursor: hand;
        cursor: pointer;
    }

    #DEVICE_LIST_wrapper {
        font-size: 13px;
        color: #5E5873;
    }

    .dataTables_filter {
        margin-bottom: 10px;
    }

    .dataTables_filter input {
        border: 1px solid #D8D6DE;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        background: white !important;
    }

    #DEVICE_LIST_wrapper table thead tr {
        background: #F3F2F7;
    }

    #DEVICE_LIST_wrapper table thead tr th {
        font-size: 12px;
        color: #5E5873;
        font-weight: 600;
        border: 0 !important;
    }

    #DEVICE_LIST_wrapper table tbody tr td {
        font-size: 12px;
        color: #6E6B7B;
        font-weight: 400;
        height: 38px;
    }

    #DEVICE_LIST_wrapper table tbody tr.selected td {
        background: #f0f0f0;
    }

    #DEVICE_LIST_wrapper table tbody tr td .circular {
        width: 30px;
        height: 30px;
        -webkit-border-radius: 15px !important;
        -moz-border-radius: 15px !important;
        border-radius: 15px !important;
        font-size: 10px;
        font-weight: 400;
        float: left;
        display: inline-block;
        margin: 3px;
        line-height: 25px;
    }

    #DEVICE_LIST_wrapper table.dataTable tbody td.select-checkbox::before {
        margin-top: -1px;
        width: 18px;
        height: 18px;
        border-color: #D8D6DE;
        margin-right: 3px;
    }

    #DEVICE_LIST_wrapper table.dataTable tbody tr.selected td.select-checkbox::before {
        background: #7367F0;
    }

    #DEVICE_LIST_wrapper table.dataTable tr.selected td.select-checkbox::after {
        margin-top: 0px;
        margin-left: -2px;
        color: white;
        text-shadow: none !important;
    }

    #DEVICE_LIST_wrapper table.dataTable tbody tr td span.label {
        font-size: 11px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        font-weight: 400;
        border: 0;
        display: inline-block;
        margin: 3px;
    }

    #DEVICE_LIST_wrapper table.dataTable tbody tr td span.label.circular {
        width: 32px;
    }

    #DEVICE_LIST_wrapper table.dataTable tbody tr td span.label-white {
        color: #28C76F;
        background: rgba(40, 199, 111, 0.12) !important;
    }

    #DEVICE_LIST_wrapper table.dataTable tbody tr td span.label-default {
        color: #FF9F43;
        background: rgba(255, 159, 67, 0.12) !important;
    }

    #DEVICE_LIST_wrapper table.dataTable tbody tr td:nth-child(2) {
        padding-left: 10px;
    }

    #DEVICE_LIST_wrapper table.dataTable tbody tr td span.action_button i {
        color: #7367F0 !important;
        font-size: 18px;
    }

    #DEVICE_LIST_wrapper .dataTables_wrapper .dataTables_paginate a.paginate_button {
        background: #F3F2F7 !important;
        -webkit-border-radius: 15px !important;
        -moz-border-radius: 15px !important;
        border-radius: 15px !important;
        width: 30px !important;
        height: 30px !important;
    }

    #DEVICE_LIST_wrapper .dataTables_wrapper .dataTables_paginate a.paginate_button.current {
        background: #7367F0;
        color: white;
    }

    .row {
        margin-left: 0;
        margin-right: 0;
    }

    .remove-row-padding {
        padding-left: 0;
        padding-right: 0;
    }

    .set-negative-margin {
        margin-left: -15px;
        margin-right: -15px;
    }

    #wifi-radio-table-summary {
        font-size: 14px;
        color: #6E6B7B;
    }

    #draw-trend-legend {
        display: inline-block;
        width: 100%;
        text-align: center;
    }

    #draw-trend-legend button {
        border: 0 !important;
        color: #333 !important;
        margin: 0 5px;
        padding: 3px 6px;
        font-size: 11px;
        border-radius: 3px;
        background: none;
    }

    #draw-trend-legend button span {
        display: inline-block;
        margin-right: 3px;
        width: 14px !important;
        height: 14px !important;
        line-height: 14px !important;
        border-radius: 7px !important;
    }

    #draw-trend-legend button.gray-out {
        color: #e5e5e5 !important;
    }

    #draw-trend-legend button.gray-out span {
        background: #e5e5e5 !important;
        color: #e5e5e5 !important;
    }

    #draw-wifi_rate {
        margin-top: 15px;
    }

    .styled_action_button {
        background: #7367F01F !important;
        color: #7367F0 !important;
        -webkit-border-radius: 16px;
        -moz-border-radius: 16px;
        border-radius: 16px;
        font-size: 11px;
        padding: 3px 10px;
    }

    table.dataTable tbody tr {
        background: #fff !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        background: #F3F2F7 !important;
        color: #6E6B7B !important;
        font-size: 13px !important;
        /*width: 36px;*/
        height: 26px;
        text-align: center;
        line-height: 13px;
        padding: 5px;
        margin-left: 0;
        margin-right: 0;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button:first-child {
        -webkit-border-top-left-radius: 13px;
        -webkit-border-bottom-left-radius: 13px;
        -moz-border-radius-topleft: 13px;
        -moz-border-radius-bottomleft: 13px;
        border-top-left-radius: 13px;
        border-bottom-left-radius: 13px;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button:last-child {
        -webkit-border-top-right-radius: 13px;
        -webkit-border-bottom-right-radius: 13px;
        -moz-border-radius-topright: 13px;
        -moz-border-radius-bottomright: 13px;
        border-top-right-radius: 13px;
        border-bottom-right-radius: 13px;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.previous, .dataTables_wrapper .dataTables_paginate .paginate_button.next {
        -webkit-border-radius: 13px;
        -moz-border-radius: 13px;
        border-radius: 13px;
        margin-left: 5px;
        margin-right: 5px;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background: #F3F2F7 !important;
        color: #6E6B7B !important;
        font-size: 13px !important;
        border-color: #F3F2F7;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background: #7367F0 !important;
        color: white !important;
        border: 1px solid #7367F0;
        -webkit-border-radius: 13px;
        -moz-border-radius: 13px;
        border-radius: 13px;
    }

    .dataTables_paginate {
        margin-top: 10px;
    }

    .dataTables_paginate span {
        display: inline-block;
        background: #F3F2F7 !important;
        -webkit-border-radius: 13px;
        -moz-border-radius: 13px;
        border-radius: 13px;
    }

    .dataTables_wrapper.no-footer .dataTables_scrollBody {
        border: 0 !important;
    }


    @media screen and (min-width: 768px) {
        .modal:before {
            display: inline-block;
            vertical-align: middle;
            content: " ";
            height: 100%;
        }
    }

    .modal-dialog {
        display: inline-block;
        vertical-align: middle;
        width: 600px;
        left: calc(50% - 300px);
    }

    #test-modal .test-results {
        height: 250px;
    }

    @media screen and (max-width: 640px) {
        .modal-dialog {
            width: 90%;
            left: calc(100% - 5%);
        }
    }

    em.wifi-marker {
        position: absolute;
        font-size: 7px;
        left: 15px;
        top: 28px;
        background: none;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        line-height: 10px;
        text-align: center;
        color: #5E5873 !important;
    }

    a.active em.wifi-marker {
        color: white !important;
    }

    button.margin-auto {
        margin: 5px auto;
    }

    #draw-device_cpu_score #wifi-channel small.title {
        font-family: Montserrat;
        font-style: normal;
        font-weight: bold;
        font-size: 20px;
        line-height: 24px;
        color: #5E5873;
    }

    #draw-device_cpu_score #wifi-channel small {
        font-family: Montserrat;
        font-style: normal;
        font-weight: 500;
        font-size: 18px;
        line-height: 22px;
        color: #6E6B7B;
    }

    .fancy-card h6.chart-title {
        font-family: Montserrat;
        font-style: normal;
        font-weight: 600;
        font-size: 14px;
        line-height: 17px;
        color: #373D3F;
    }

    .speedtest-cloud .fancy-table.display.compact thead tr:first-child th {
        text-align: center !important;
    }

    .timeline-button-container {
        position: relative;
        display: inline-block;
    }

    .timeline-button-container div {
        position: relative;
        display: inline-block;
        float: right;
    }

    /* test model result overwrite */
    #test-modal div.show_results .results-left {
        top: 30px !important;
        left: 30px !important;
        color: #7367F0 !important;
        font-weight: 500 !important;
        font-size: 21px !important;
    }

    #test-modal div.show_results .results-right {
        top: 30px !important;
        right: 30px !important;
        color: #7367F0 !important;
        font-weight: 500 !important;
        font-size: 21px !important;
    }

    #test-modal div.show_results .results-center {
        color: #28C76F !important;
        font-size: 72px !important;
    }

    #rleft_metric, #rright_metric {
        color: #7367F0 !important;
    }

    #rcenter_metric {
        font-size: 32px;
    }

    #warning i {
        color: #7367F0;
    }

    div.vis-item.qwifi {
        background: #28C76F;
    }

    .vis-item.red {
        background: #EA5455;
    }

    .vis-item.yellow {
        background: #FF9F43;
        color: white !important;
    }

    .vis-item.vis-selected {
        border-color: #999 !important;
    }

    #page404 .container-404 {
        display: inline-block;
        width: 100%;
        text-align: center;
        margin-top: 100px;
        position: relative;
    }

    #page404 .message-404 p {
        color: #6E6B7B;
        font-size: 14px;
        font-weight: 400;
        margin-bottom: 50px;
    }

    #page404 .container-404 a {
        background: #7367F0;
        color: white;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        padding: 10px 22px;
        font-weight: 500;
        font-size: 14px;
        text-decoration: none;
        display: inline-block;
    }

    #page404 .container-404 a:hover {
        text-decoration: none;
    }

    #page404 .logo-404 {
        margin-top: 160px;
        display: inline-block;
        position: relative;
    }

    .apexcharts-legend-default-overflow {
        overflow: unset !important;
    }

    #site-survey-info {
        position: absolute;
        with: 300px;
        height: 80px;
        background: #e5e5e5;
        left: calc(50% - 150px);
        top: 25px;
    }

    #site-survey-info .legend-tooltip {
        display: none;
    }

    .legend-tooltip-css {
        display: none;
        position: absolute;
        color: #5E5873;
        right: 8px;
        bottom: 340px;
        border: 1px solid #EBE9F1;
        -webkit-border-bottom-right-radius: 3px;
        -webkit-border-bottom-left-radius: 3px;
        -moz-border-radius-bottomright: 3px;
        -moz-border-radius-bottomleft: 3px;
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
        background: white !important;
        padding: 8px;
        z-index: 9999;
        font-size: 10px;
        overflow: hidden;
        width: 180px;
        text-align: left;
        font-weight: 400;
        line-height: 15px;
        -webkit-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
        -moz-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
        box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
    }

    .legend-tooltip-css strong {
        font-weight: 600 !important;
    }

    #MENU a.d-none {
        display: none;
    }

    #draw-trend .legend-tooltip-css {
        display: none !important;
        right: -9999px;
    }

    #wifi-client-table-container {
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
        width: 100%;
    }

    #wifi-client-table {
        margin: 10px auto;
    }

    #wifi-client-table thead tr th {
        font-weight: 600;
        color: #5E5873;
        padding: 5px 3px;
    }

    #wifi-client-table thead tr.first-heading th {
        font-size: 13px;
        text-align: center !important;
        background: #7367F0;
        color: white;
        font-weight: bold;
    }

    #wifi-client-table thead tr.first-heading th span {
        display: inline-block;
        position: relative;
        font-weight: 600;
    }

    #wifi-client-table thead tr.first-heading th.phyrate-align span.icon {
        width: 35px;
        height: 18px;
    }

    #wifi-client-table thead tr.first-heading th.phyrate-align i {
        position: absolute;
        top: -5px;
        left: 10px;
    }

    #wifi-client-table thead tr.second-heading th {
        font-size: 11px;
        padding-top: 0 !important;
        text-align: center !important;
        padding-top: 5px !important;
        height: 30px;
    }

    #wifi-client-table thead tr th div.icon {
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-right: 6px;
    }

    #wifi-client-table thead tr th div.icon img {
        width: 100% !important;
    }

    #wifi-client-table thead tr th div.text {
        display: inline-block;
    }

    #wifi-client-table tbody tr.selected td {
        text-align: center !important;
    }

    #wifi-client-table tbody tr.selected td {
        background: #7367F0 !important;
        color: white !important;
    }

    #wifi-client-table tbody tr td a {
        color: #5E5873;
        padding-left: 30px;
        background: url('/images/unchecked.png') left center no-repeat;
        font-weight: 500;
        line-height: 21px;
        display: inline-block;
        text-decoration: none !important;
    }

    #wifi-client-table tbody tr td a.checked {
        background: url('/images/checked.png') left center no-repeat;
    }

    #wifi-client-table tbody tr td a:hover {
        text-decoration: none !important;
        cursor: pointer;
        cursor: hand;
    }


    #wifi-client-table tbody tr.selected td a {
        color: white !important;
    }

    #wifi-client-table thead th:nth-child(1) {
        min-width: 100px;
    }

    #wifi-client-table thead th:nth-child(2) {
        min-width: 50px;
    }

    #wifi-client-table tbody td {
        text-align: center;
    }

    #wifi-client-table {
        border-top: 1px solid #D2CEDE;
    }

    #wifi-client-table tr td, #wifi-client-table tr th {
        border: 1px solid #D2CEDE;
    }

    #wifi-client-table tbody tr td, #wifi-client-table {
        border-color: #D2CEDE !important;
    }

    #wifi-client-table tr td, #wifi-client-table tr th {
        text-align: center;
    }

    #wifi-client-table tbody tr td:first-child {
        text-align: left !important;
    }

    #wifi-client-table tbody tr td span {
        display: inline-block;
        padding: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        font-size: 11px;
        font-weight: bold;
        display: inline-block;
        width: 60px;
        text-align: center;
    }

    #wifi-client-table tbody tr.client_line td.text-left {
        text-align: left !important;
    }


    #wifi-client-table tbody tr td.text-center {
        text-align: center !important;
    }

    #wifi-client-table tbody tr td span.online {
        background: rgba(40, 199, 111, 0.12);
        color: #28C76F;
    }

    #wifi-client-table tbody tr td span.offline {
        background: rgba(234, 84, 85, 0.12);
        color: #EA5455;
    }

    #wifi-client-table tbody tr td div.show-number {
        width: 50%;
        position: relative;
        display: inline-block;
        float: left;
        text-align: center;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    #wifi-client-table tbody tr td span.score.circular {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        line-height: 24px;
        font-weight: normal !important;
    }

    /*
    #wifi-client-table tbody tr td div:first-child.show-number {
        background: rgba(0, 207, 232, 0.12) !important;
    }
    #wifi-client-table tbody tr td div:last-child.show-number {
        background: rgba(255, 159, 67, 0.12) !important;
    }
    */

    #wifi-client-table thead tr.second-heading th:nth-child(1) {
        width: 10% !important;
    }

    #wifi-client-table thead tr.second-heading th:nth-child(2) {
        width: 15% !important;
    }

    #wifi-client-table thead tr.second-heading th:nth-child(3) {
        width: 6% !important;
    }

    #wifi-client-table thead tr.second-heading th:nth-child(4) {
        width: 6% !important;
    }

    #wifi-client-table thead tr.second-heading th:nth-child(5) {
        width: 8% !important;
    }

    #wifi-client-table thead tr.second-heading th:nth-child(6) {
        width: 6% !important;
    }

    #wifi-client-table thead tr.second-heading th:nth-child(7) {
        width: 12% !important;
    }

    #wifi-client-table thead tr.second-heading th:nth-child(8) {
        width: 5% !important;
    }

    #wifi-client-table thead tr.second-heading th:nth-child(9) {
        width: 12% !important;
    }

    #wifi-client-table thead tr.second-heading th:nth-child(10) {
        width: 12% !important;
    }

    #wifi-client-graphs {
        visibility: hidden;
    }

    .filter-blur {
        filter: blur(5px);
    }

    #wifi-client-table tbody tr td.display-none {
        display: table !important;
    }

    #draw-client_data_usage_notification {
        font-weight: bold;
        color: #cc3333;
        padding-left: 15px;
    }

    #do_export {
        margin-top: 30px;
    }

    #do_search {
        margin-top: 30px;
    }

    .selected-geo-filter {
        display: inline-block;
        width: 100%;
        margin: 10px 0 0 0;
        font-size: 13px;
        font-weight: bold;
    }

    #marketing-column-visibility {
        position: absolute;
        right: 112px;
        top: 12px;
        z-index: 999;
    }

    #marketing-filter label {
        width: 90%;
        float: left;
        display: inline-block;
        font-size: 12px !important;
        margin-bottom: 2px !important;
    }

    #marketing-filter input {
        width: 100%;
        float: left;
    }

    #marketing-filter select {
        width: 100%;
        float: left;
        -webkit-appearance: none;
        -moz-appearance: none;
        text-indent: 1px;
        text-overflow: '';

    }

    #wifi_filter_sortable {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 100%;
        padding-bottom: 20px;
    }

    #wifi_filter_sortable li {
        margin: 0 5px 5px 5px;
        padding: 5px;
        font-size: 1.2em;
        height: 1.5em;
        font-size: 13px;
    }

    #wifi_filter_sortable li:hover {
        cursor: move;
    }

    #wifi_filter_sortable li select {
        display: inline-block;
        float: right;
        width: 150px !important;
        height: 24px;
        line-height: 10px;
        font-size: 10px;
        padding: 5px;
    }

    html > body #wifi_filter_sortable li {
        height: 3.2em;
        line-height: 2.2em;
        font-size: 11px !important;
        font-weight: bold;
    }

    #wifi_filter_sortable .ui-state-highlight {
        height: 1.5em;
        line-height: 1.2em;
    }

    .src-operator {
        width: 65px !important;
        font-size: 16px;
        text-align: center;
    }

    .src-operator-input {
        width: calc(100% - 65px) !important;
    }


    /*Styling Filter Marketing Selectbox*/
    .marketing-filter-container {
        margin: 0px;
        width: 100%;
        height: 58px;
        padding: 4px;
        border-radius: 5px;
        box-shadow: 0 0 2px rgb(204, 204, 204);
        background: #f9f9f9;
    }

    .filter-dropdown {
        width: 60px;
        display: inline-block;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 0 2px rgb(204, 204, 204);
        transition: all .5s ease;
        position: relative;
        font-size: 14px;
        color: #474747;
        height: 100%;
        text-align: left
    }

    .filter-order-by .filter-dropdown {
        width: 55px;
    }

    .filter-dropdown .select {
        cursor: pointer;
        display: block;
        padding: 5px 6px;
        border-radius: 5px;
        border: 1px solid #fff;
        font-size: 12px;
    }

    .filter-dropdown .select > i {
        font-size: 8px;
        color: #888;
        cursor: pointer;
        transition: all .3s ease-in-out;
        float: right;
        line-height: 18px
    }

    .filter-dropdown:hover {
        box-shadow: 0 0 4px rgb(204, 204, 204)
    }

    .filter-dropdown:active {
        background-color: #F3F3F8;
        border: 1px solid #644DED;
        color: #644DED;
    }

    .filter-dropdown.active:hover,
    .filter-dropdown.active {
        box-shadow: 0 0 4px rgb(204, 204, 204);
        border-radius: 5px 5px 0 0;
        background-color: #F3F3F8;
        color: #644DED;
    }

    .filter-dropdown.active .select {
        border-color: #644DED;
    }

    .filter-dropdown.active .select > i {
        /* select dropdown arrow icon style
        transform: rotate(-90deg)
        */
    }

    .filter-dropdown .filter-dropdown-menu {
        position: absolute;
        background-color: #fff;
        width: 100%;
        left: 0;
        margin-top: 1px;
        box-shadow: 0 1px 2px rgb(204, 204, 204);
        border-radius: 0 5px 5px 5px;
        overflow: hidden;
        display: none;
        max-height: 244px;
        overflow-y: auto;
        font-size: 11px;
        z-index: 9
    }

    .filter-dropdown .filter-dropdown-menu li {
        padding: 10px;
        transition: all .2s ease-in-out;
        cursor: pointer
    }

    .filter-dropdown .filter-dropdown-menu {
        padding: 0;
        list-style: none
    }

    .filter-dropdown .filter-dropdown-menu li:hover {
        background-color: #f2f2f2
    }

    .filter-dropdown .filter-dropdown-menu li:active {
        background-color: #e2e2e2
    }

    .filter-dropdown,
    .filter-dropdown:hover,
    .filter-dropdown .filter-dropdown-menu {
        border: 0;
        box-shadow: none !important;
        background: #F3F3F8;
    }

    #main-filter i.fa-chevron-left {
        display: none;
    }

    #main-filter i.mdi-filter-outline {
        color: #7367F0;
    }

    #main-filter .filter-dropdown {
        background: #7367F01F !important;
        width: 160px;
        height: 33px;
        line-height: 22px;
        color: #7367F0;
        margin-left: 10px;
    }

    .select2-selection__clear {
        font-size: 18px;
        margin-right: 3px;
        margin-top: -1px;
    }

    .select2-container {
        width: 95% !important;
    }

    #marketing-geo-filters .select2-selection--single {
        border-color: #7367F01F !important;
    }

    #marketing-geo-filters .select2-selection__rendered {
        background: #7367F01F !important;
    }

    #marketing-geo-filters .select2-selection__placeholder {
        color: #7367F0;
    }

    #marketing-filter .panel-default {
        margin-bottom: 0 !important;
    }

    #marketing-filter .panel-heading.panel-heading-nav {
        background: white;
    }

    #marketing-filter div.filter-row {
        display: none;
        margin-top: 0px;
    }

    #marketing-filter div.filter-row.active-row {
        display: inline-block;
    }

    #marketing-filter div.filter-row div.filter-column {
        display: inline-block;
        float: left;
        margin-bottom: 2px;
    }

    #marketing-filter .float-right {
        float: right !important;
        margin: 5px 10px 5px 20px;
    }

    #marketing-filter .hide-filter {
        display: none;
    }

    #marketing-filter .form-filter span.filter-label {
        display: inline-block;
        margin-top: 0px;
        font-size: 12px;
        margin-left: 1px;
        font-weight: bold;
    }

    #marketing-filter .form-filter span.filter-label small {
        font-weight: normal !important;
        font-size: 10px;
    }

    #marketing-filter .form-filter span.remove-filter {
        display: inline-block;
        margin-top: 5px;
        margin-left: 10px;
        position: absolute;
        right: 20px;
        top: -3px;
        color: #999;
    }

    #marketing-filter .form-filter span.remove-filter:hover {
        color: #333;
    }

    .hover-pointer:hover {
        cursor: hand;
        cursor: pointer;
        color: #666;
    }

    #marketing-filter .form-filter input.filter-clean-input {
        width: 100%;
        background-color: #F3F3F8;
        border-radius: 5px;
        position: relative;
        font-size: 12px;
        color: #474747;
        text-align: left;
        cursor: pointer;
        display: block;
        padding: 5px;
        border: 1px solid #fff;
        height: 29px;
    }

    #marketing-filter .form-filter input.filter-clean-input:active,
    #marketing-filter .form-filter input.filter-clean-input:focus {
        border: 1px solid #644DED;
        color: #644DED;
    }

    #marketing-filter .filter-column.filter-label {
        width: 100% !important;
        text-align: left;
    }

    #marketing-filter div.filter-input-resize {
        width: calc(100% - 115px) !important;
    }

    #marketing-filter div.filter-input-resize-full {
        width: 100% !important;
    }

    #marketing-filter div.filter-input-resize-full .filter-dropdown {
        width: 100% !important;
    }

    #marketing-filter .filter-action-button {
        position: relative;
        margin-left: 10px;
        background: #7367F01F !important;
        color: #7367F0 !important;
        -webkit-border-radius: 16px;
        -moz-border-radius: 16px;
        border-radius: 16px;
        padding: 6px 15px 6px 35px;
    }

    #marketing-filter .filter-action-button.filter-action-button-opposite {
        background: #7367F0 !important;
        color: white !important;
    }

    #marketing-filter .filter-action-button i {
        position: absolute;
        left: 6px;
        top: -4px;
    }

    #marketing-filter-table table tr td span.btn-sm {
        width: 50px;
        text-align: center;
    }

    #marketing-filter-table table thead tr th {
        font-size: 10px;
    }

    #marketing-filter-table .label-warning-yellow {
        background: #FFCE43 !important;
    }

    #marketing-filter-table .label-grey {
        background: #e0e0e0 !important;
        color: #333;
    }

    #marketing-filter-table div.dt-buttons button.dt-button {
        background: #7367F01F;
        color: #7367F0;
        border: 0;
        padding: 5px;
        margin: 0 0 10px 5%;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        min-width:80px;
    }

    #marketing-filter-table div.dt-buttons div.dt-button-collection {
        position: absolute;
        left: 10px;
        top: 25px;
        width: 150px;
        height: 250px;
        overflow-y: auto;
        z-index: 9999;
        background: white;
        padding-top: 5px;
        margin-left: -70px;
        border: 1px solid #7367F0;
    }


    #marketing-filter-table div.dt-buttons div.dt-button-collection button {
        background: rgba(94, 88, 115, 0.15) !important;
        color: #666 !important;
        font-size: 10px;
        padding: 3px 6px;
        margin-bottom: 5px !important;
        text-align: left;
        border-radius: 6px;
        width: 90%;
    }

    #marketing-filter-table div.dt-buttons div.dt-button-collection button.active {
        background: #7367F01F !important;
        color: #7367F0 !important;
    }

    #marketing-report-info {
        width: 100%;
        font-size: 10px !important;
        display: inline-block;
        color: #666;
        text-align: left;
        font-weight: 400 !important;
        margin-bottom: 10px;
        position: absolute;
        left: 25px;
        top: 25px;

    }

    #marketing-filter-table .dt-buttons {
        float: right;
        margin-right: 3px;
    }

    #marketing div.db-line-graph-container {
        width: 100% !important;
        display: inline-block !important;
    }

    div.fullwidth-force-apex-canvas .apexcharts-canvas {
        width: 100% !important;
        display: inline-block !important;
    }

    table.fancy-table thead tr th.text-right-force {
        text-align: right !important;
    }

    /* Dashboard */
    ul.nav-tabs li a {
        font-size: 12px !important;
    }

    #dashboard-firmware-tabs ul.nav-tabs li span.short-name {
        display: block;
    }

    #dashboard-firmware-tabs ul.nav-tabs li span.long-name {
        display: none;
    }

    #dashboard-firmware-tabs ul.nav-tabs li.active span.short-name {
        display: none;
    }

    #dashboard-firmware-tabs ul.nav-tabs li.active span.long-name {
        display: block;
    }

    #dashboard-firmware-tabs ul li a {
        color: #7367f0 !important;
    }

    #dashboard-firmware-tabs ul li.active a {
        color: #7367f0 !important;
        font-weight: bold !important;
    }

    #dashboard table.wifi-stats-device-list {
        margin-top: 30px;
        margin-bottom: 5px;
    }

    #dashboard table.wifi-stats-device-list th {
        background-color: #7367F0 !important;
        color: #fff;
    }

    #dashboard table.wifi-stats-device-list th:nth-child(1) {
        width: 15%;
    }

    #dashboard table.wifi-stats-device-list th:nth-child(2) {
        width: 30%;
    }

    #dashboard table.wifi-stats-device-list th:nth-child(3) {
        width: 10%;
        text-align: left !important;
    }

    #dashboard table.wifi-stats-device-list th:nth-child(4) {
        width: 45%;
    }

    #dashboard table.wifi-stats-device-list td {
        padding: 4px;
    }

    #dashboard span.db-total-device {
        font-size: 36px;
        display: inline-block;
        margin-top: -5px
    }

    #dashboard span.db-total-device.bigger {
        font-size: 44px;
        display: inline-block;
        margin-top: 75px;
        min-height: 130px;
    }

    #total_platform_number {
        width: 100%;
        text-align: right;
        font-size: 11px;
    }

    #platform_summary tbody {
        display: block;
        height: 160px;
        overflow: auto;
    }

    #platform_summary tbody tr td {
        font-size: 10px !important;
    }

    #platform_summary tr td:nth-child(1),
    #platform_summary tr th:nth-child(1) {
        width: 15%;
    }

    #platform_summary tr td:nth-child(2),
    #platform_summary tr th:nth-child(2) {
        width: 30%;
    }

    #platform_summary tr td:nth-child(3),
    #platform_summary tr th:nth-child(3) {
        width: 10%;
    }

    #platform_summary tr td:nth-child(4),
    #platform_summary tr th:nth-child(4) {
        width: 45%;
    }

    #platform_summary tr td.deployment:nth-child(1),
    #platform_summary tr th.deployment:nth-child(1) {
        width: 40%;
    }

    #platform_summary tr td.deployment:nth-child(2),
    #platform_summary tr th.deployment:nth-child(2) {
        width: 20%;
    }

    #platform_summary tr td.deployment:nth-child(3),
    #platform_summary tr th.deployment:nth-child(3) {
        width: 40%;
        text-align: right !important;
    }


    #platform_summary thead, #platform_summary tbody tr {
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    #platform_summary tr {
        height: 30px;
    }

    #platform_summary {
        width: 100%;
        border: 0;
    }


    #rest_api_usage_table thead tr th {
        text-align: left !important;
    }

    #rest_api_usage_table tbody {
        display: block;
        height: 210px;
        overflow: auto;
    }

    #rest_api_usage_table tbody tr td {
        font-size: 10px !important;
    }

    #rest_api_usage_table tr td:nth-child(1),
    #rest_api_usage_table tr th:nth-child(1) {
        width: 60% !important;
    }

    #rest_api_usage_table tr td:nth-child(2),
    #rest_api_usage_table tr th:nth-child(2) {
        width: 15% !important;
        text-align: right !important;
    }

    #rest_api_usage_table tr td:nth-child(3),
    #rest_api_usage_table tr th:nth-child(3) {
        width: 25% !important;
        text-align: right !important;
    }


    #rest_api_usage_table tr td.deployment:nth-child(1),
    #rest_api_usage_table tr th.deployment:nth-child(1) {
        width: 60%;
    }

    #rest_api_usage_table tr td.deployment:nth-child(2),
    #rest_api_usage_table tr th.deployment:nth-child(2) {
        width: 15%;
        text-align: right !important;
    }

    #rest_api_usage_table tr td.deployment:nth-child(3),
    #rest_api_usage_table tr th.deployment:nth-child(3) {
        width: 25%;
        text-align: right !important;
    }


    #rest_api_usage_table thead, #rest_api_usage_table tbody tr {
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    #rest_api_usage_table tr {
        height: 30px;
    }

    #rest_api_usage_table {
        width: 100%;
        border: 0;
    }


    #dashboard table.md-version-table tr td:nth-child(1) {
        width: 40%
    }

    #dashboard table.md-version-table tr td:nth-child(2) {
        width: 20%;
        text-align: left !important;
    }

    #dashboard table.md-version-table tr td:nth-child(3) {
        width: 40%;
    }


    #dashboard .db-radial-graphs {
        display: inline-block;
        float: left;
        width: 50%;
    }

    #dashboard .db-radial-graphs table {
        margin: 25px 10px 10px 10px;
        width: calc(100% - 20px)
    }

    #dashboard .db-radial-graphs tr {
        height: 30px;
    }

    #dashboard .db-radial-graphs tr th {
        background-color: #7367F0 !important;
        color: #fff;
    }

    #dashboard .db-radial-graphs table tr td {
        padding: 6px 4px;
    }

    #dashboard .db-radial-graphs table tr td:nth-child(1) {
        width: 30%;
    }

    #dashboard .db-radial-graphs table tr td:nth-child(2) {
        width: 70%;
        text-align: right;
    }

    #dashboard .db-radial-graphs.radial-cpe {
        float: left;
    }

    #dashboard .db-radial-graphs.radial-fw {
        float: right;
    }

    #dashboard-wifi-capacity-and-busy i.pie-good {
        color: #00E396
    }

    #dashboard-wifi-capacity-and-busy i.pie-bad {
        color: #FEB019
    }

    #dashboard-wifi-capacity-and-busy i.pie-very-bad {
        color: #FF4560;
    }

    #dashboard-wifi-coverage div.metric-line {
        display: inline-block;
        width: 100%;
        margin-top: 30px;
        text-align: center;
        font-weight: bold;
    }

    #dashboard-wifi-coverage div.metric-line.weight-400 {
        font-weight: 400 !important;
    }

    #dashboard-wifi-coverage div.metric-line span {
        font-size: 36px;
    }

    #dashboard-wifi-coverage div.metric-line span small {
        font-size: 16px;
        font-weight: 400;
    }

    #dashboard-stats-table-on-time-distribution table {
        margin-top: 10px;
        width: 100%;
    }

    #dashboard-stats-table-on-time-distribution table tr td:nth-child(1) {
        width: 10%;
        text-align: right;
    }

    #dashboard-stats-table-on-time-distribution table tr td:nth-child(2) {
        width: 60%;
    }

    #dashboard-stats-table-on-time-distribution table tr td:nth-child(3) {
        width: 30%;
    }

    #dashboard-stats-table-on-time-distribution table tr td {
        padding: 4px;
    }

    #dashboard-stats-table-on-time-distribution table tr td span.bar-line {
        display: inline-block;
        width: 0.1%;
        background-color: #7367f0;
        height: 15px;
        -webkit-border-top-right-radius: 6px;
        -webkit-border-bottom-right-radius: 6px;
        -moz-border-radius-topright: 6px;
        -moz-border-radius-bottomright: 6px;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
    }

    #dashboard div.db-line-info-container {
        width: 100% !important;
        display: inline-block !important;
        margin: 10px;
        text-align: center;
    }

    h4.label-with-sparkline {
        position: absolute;
        width: calc(100% - 30px);
        text-align: center;
        top: 50px;
        z-index: 999;
    }

    h4.label-with-sparkline span.bigger {
        margin-top: 0 !important;
    }

    div.wifi-stats-full-data-container {

    }

    div.wifi-stats-full-data-container div.content-line {
        width: 100%;
        float: left;
        display: inline-block;
    }

    div.wifi-stats-full-data-container div.fdc-top-title {
        font-size: 10px;
        color: #5E5873;
        height: 28px;
        line-height: 12px;
    }

    div.wifi-stats-full-data-container div.fdc-value {
        font-size: 22px;
        color: #5E5873;
        font-weight: bold;
    }

    div.wifi-stats-full-data-container div.fdc-value small {
        font-size: 11px;
        color: #5E5873;
        font-weight: 400 !important;
    }

    div.wifi-stats-full-data-container div.fdc-bottom-title {
        font-size: 10px;
        color: #5E5873;
        position: absolute;
        left: 15px;
        bottom: 10px;
    }

    div.wifi-stats-full-data-container div.icon-container {
        position: absolute;
        right: 10px;
        top: 15px;
    }

    div.wifi-stats-full-data-container .line-title {
        position: absolute;
        width: 100%;
        text-align: center;
        bottom: 12px;
        left: 0;
        font-size: 11px;
    }

    div.wifi-stats-full-data-container .main-btn {
        width: 80px;
        height: 80px;
        -webkit-border-radius: 40px;
        -moz-border-radius: 40px;
        border-radius: 40px;
        text-align: center;
        display: inline-block;
        line-height: 60px;
    }

    div.wifi-stats-full-data-container .fancy-card {
        padding: 10px !important;
    }

    div.wifi-stats-full-data-container .sub-data-min-height {
        min-height: 90px;
    }

    #stats-info-device .clr-0 {
        color: #85E360;
    }

    #stats-info-device .clr-1 {
        color: #69B34C;
    }

    #stats-info-device .clr-2 {
        color: #ACB334;
    }

    #stats-info-device .clr-3 {
        color: #FAB733;
    }

    #stats-info-device .clr-4 {
        color: #FF8E15;
    }

    #stats-info-device .clr-5 {
        color: #FF4E11;
    }

    #stats-info-device .clr-6 {
        color: #FF0D0D;
    }

    a.grayed-out {
        color: #d2d2d2 !important;
    }


    div.quick-info-box {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        background: rgba(200, 200, 255, 0.95);
        height: 100%;
        padding: 5px 35px 5px 20px;
        z-index: 101;
        color: white;
        display: none;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

    div.quick-info-box p {
        font-size: 12px;
        color: white;
        width: 100%;
        display: inline-block;
        margin-top: 15px;
    }

    div.quick-info-box strong {
        font-size: 14px;
        display: inline-block;
        width: 100%;
        color: #7367F0 !important;
        margin-top: 10px;
    }

    div.quick-info-box a.close-quick-info-box {
        position: absolute;
        right: 10px;
        top: 10px;
        font-size: 11px;
        color: white !important;
        cursor: pointer;
        background: linear-gradient(45deg, rgba(115, 103, 240, 1) 0%, rgba(158, 149, 245, 1) 100%) !important;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        padding: 5px;
    }

    div.quick-info-box a.close-quick-info-box:hover {
        text-decoration: none !important;
    }

    div.quick-info-box a.close-quick-info-box i {
        color: white !important;
    }

    a.trigger-quick-info-box {
        color: #333 !important;
    }

    a.trigger-quick-info-box:hover {
        text-decoration: none !important;
    }

    a.trigger-quick-info-box i.fa-question-circle {
        color: #7367F0 !important;
    }

    span.version-tag {
        font-size: 10px;
        font-weight: 400;
        display: inline-block;
        margin-top: 0px;
        color: #999 !important;
        font-weight: normal !important;
    }

    #radio-off, #device-off {
        display: none;
    }

    #radio-off .fancy-card, #device-off .fancy-card, #user-deleted .fancy-card {
        background: #cc3333;
        color: #ffffff;
        font-size: 20px;
    }


    #user_list tr.grey-row {
        color: #e0e0e0 !important;
        text-decoration: line-through;
    }

    #user-deleted a {
        color: #fff !important;
        font-weight: bold;
    }

    #user-saved .fancy-card {
        background: #7367F0;
        color: #ffffff;
        font-size: 20px;
    }

    div.permission-list label {
        width: 45%;
        margin-right: 2%;
        display: inline-block;
        margin-bottom: 8px;
        font-weight: normal;
        font-size: 11px;
    }

    #user_form textarea:focus,
    #user_form input[type="text"]:focus,
    #user_form input[type="password"]:focus,
    #user_form input[type="datetime"]:focus,
    #user_form input[type="datetime-local"]:focus,
    #user_form input[type="date"]:focus,
    #user_form input[type="month"]:focus,
    #user_form input[type="time"]:focus,
    #user_form input[type="week"]:focus,
    #user_form input[type="number"]:focus,
    #user_form input[type="email"]:focus,
    #user_form input[type="url"]:focus,
    #user_form input[type="search"]:focus,
    #user_form input[type="tel"]:focus,
    #user_form input[type="color"]:focus,
    #user_form .uneditable-input:focus {
        border-color: rgba(115, 103, 240, 0.8);
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(115, 103, 240, 0.6);
        outline: 0 none;
    }

    #user_form button, .user-form-btn, a.user-form-btn {
        font-size: 12px;
        font-weight: 500;
        color: #7367F0;
        border: 1px solid #7367F0;
        background: rgba(115, 103, 240, 0.04);
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        padding: 5px 10px;
        margin-bottom: 10px;
    }

    .user-form-btn:hover, .user-form-btn:active, a.user-form-btn:hover, a.user-form-btn:focus, a.user-form-btn:active {
        background: rgba(115, 103, 240, 0.04) !important;
        color: #7367F0 !important;
        border-color: #7367F0 !important;
    }

    #user_list {
        position: relative;
        width: 100%;
        overflow: auto;
        border-collapse: collapse;
    }

    #user_list thead th {
        position: sticky;
        top: 0;
        z-index: 2;
    }

    #user_list tbody td:nth-child(2) {
        z-index: 2; /* Adjust for overlap */
    }

    #user_list tbody td:nth-child(3) {
        z-index: 3; /* Adjust for overlap */
    }

    #user_list tbody td:nth-child(1),
    #user_list tbody td:nth-child(2),
    #user_list tbody td:nth-child(3),
    #user_list thead th:nth-child(1),
    #user_list thead th:nth-child(2),
    #user_list thead th:nth-child(3) {
        position: sticky;
        left: 0;
        z-index: 1;
    }

    #user_list thead th:nth-child(1),
    #user_list thead th:nth-child(2),
    #user_list thead th:nth-child(3) {
        background:#F3F2F7;
    }

    #user_list tbody td:nth-child(1),
    #user_list tbody td:nth-child(2),
    #user_list tbody td:nth-child(3) {
        background:#fff;
    }

    #user_list tr td, #user_list tr th {
        text-align: left;
    }


    #user_list tr td i.fa {
        font-size: 20px !important;
    }

    #pw-strength {
        display: inline-block;
        width: 100%;
    }

    .pw-description span {
        font-weight: bold;
    }

    #pw-strength .pw-indicator {
        border: 1px solid #e5e5e5;
        background: #7367F0;
        color: #fff;
        text-align: right;
        font-size: 10px;
        padding: 3px;
        width: 10%;
    }

    #pw-toggle label {
        font-weight: normal;
        font-size: 11px;
        float: right;
        margin: 5px auto;
    }

    #welcome-menu {
        display: inline-block;
        width: 100%;
        text-align: center;
        margin-top: 30px;
    }

    #welcome-menu a {
        display: inline-block;
        text-align: center;
        margin: 5px;
        width: 60px;
        height: 50px;
        /*
        border: 1px solid #7367f0;
        background: #7367f01F;
        */
        border-radius: 5px;
        font-size: 11px;
    }

    #welcome-menu a i {
        font-size: 20px;
        margin-bottom: 5px;
        margin-top: 15px;
    }

    #welcome-menu a span {
        display: inline-block;
        width: 100%;
    }

    #speed_chart_phyrate_speedup_compare btn-xs {
        font-size: 11px !important;
    }

    #speed_chart_phyrate_speedup_compare small {
        font-size: 9px !important;
        color: #fff !important;
    }

    /* general class definitions for pages */

    table.md-dashboard-ssid-settings {
        width: 100%;
        margin-top: 30px;
        font-size: 20px;
    }

    table.md-dashboard-ssid-settings tr:last-child td {
        border-bottom: 1px solid #ddd;
    }

    table.md-dashboard-ssid-settings tr {
        background: white !important;
    }


    table.md-dashboard-ssid-settings tr td:first-child {
        color: #666;
        font-weight: bold;
    }

    table.md-dashboard-ssid-settings tr td:first-child small {
        font-size: 11px;
        font-weight: normal;
    }

    table.md-dashboard-ssid-settings tr td:last-child {
        width: 25%;
        font-size: 24px;
        font-weight: bold;
    }

    table.md-dashboard-ssid-max-cli {
        width: 100%;
        margin-top: 30px;
        font-size: 22px;
        text-align: center;
    }

    table.md-dashboard-ssid-max-cli tr td:first-child {
        width: 12.5%;
        padding: 29px 0px;
        color: #666;
    }

    table.md-dashboard-ssid-max-cli tr td {
        vertical-align: middle !important;
        background: #fff !important;
        border: 0 !important;
        margin: 0;
        color: #666;
        border-top: 1px solid #ddd !important;
    }

    table.md-dashboard-ssid-max-cli tr:last-child td {
        border-bottom: 1px solid #ddd !important;
    }

    table.md-dashboard-ssid-max-cli tr td div {
        display: inline-block;
    }

    table.md-dashboard-ssid-max-cli tr td span {
        font-size: 16px !important;
        font-weight: bold;
        color: #222;
    }

    table.md-dashboard-ssid-max-cli tr td div.seperator {
        font-size: 24px;
        margin: 0 10px;
    }

    table.md-dashboard-ssid-max-cli td.rotate90 span {
        font-weight: bold;
        display: block;
        font-size: 11px !important;
        color: #999;
        transform: rotate(-90deg);
        /* Safari */
        -webkit-transform: rotate(-90deg);
        /* Firefox */
        -moz-transform: rotate(-90deg);
        /* IE */
        -ms-transform: rotate(-90deg);
        /* Opera */
        -o-transform: rotate(-90deg);
        /* Internet Explorer */
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }

    .container {
        width: 300px;
        margin: 0 auto;
        vertical-align: top;
        text-align: center;
    }

    .lay-right {
        float: right;
    }

    .lay-left {
        float: left;
    }

    .pad-right-0 {
        padding-right: 0 !important;
    }

    .pad-left-0 {
        padding-left: 0 !important;
    }

    .pad-right-2 {
        padding-right: 2px;
    }

    .pad-left-2 {
        padding-left: 2px;
    }

    .pad-right {
        padding-right: 5px;
    }

    .pad-left {
        padding-left: 5px;
    }

    .pad-left-10 {
        padding-left: 10px;
    }

    .pad-left-14 {
        padding-left: 14px;
    }

    .pad-bottom {
        padding-bottom: 5px;
    }

    .pad-zero {
        padding: 0px;
    }

    .pad-top {
        padding-top: 5px;
    }

    .pad-top-30 {
        padding-top: 30px;
    }

    .pad-bottom-30 {
        padding-bottom: 30px;
    }

    .pad-top-50 {
        padding-top: 50px;
    }

    .mar-neg-top-5 {
        margin-top: -5px;
    }

    .mar-top-10 {
        margin-top: 10px !important;
    }

    .mar-top-15 {
        margin-top: 15px !important;
    }

    .mar-top-20 {
        margin-top: 20px !important;
    }

    .mar-top-25 {
        margin-top: 25px !important;
    }

    .mar-top-30 {
        margin-top: 30px !important;
    }

    .mar-zero {
        margin: 0px !important;
    }

    .mar-top {
        margin-top: 5px;
    }

    .mar-right {
        margin-right: 5px;
    }

    .mar-left-0 {
        margin-left: 0px !important;
    }

    .mar-right-0 {
        margin-right: 0px !important;
    }

    .mar-left {
        margin-left: 5px;
    }

    .mar-left-10 {
        margin-left: 10px;
    }

    .mar-bottom {
        margin-bottom: 5px;
    }

    .mar-bottom-10 {
        margin-bottom: 10px;
    }

    .h50p {
        height: 50px;
    }

    .h135p {
        height: 135px;
    }

    .h150p {
        height: 150px;
    }

    .h200p {
        height: 200px;
    }

    .h250p {
        height: 250px;
    }

    .h300p {
        height: 300px;
    }

    .h350p {
        height: 350px;
    }

    .h500p {
        height: 500px;
    }

    .score {
        font-size: 10px;
        text-align: center;
    }

    .color-black {
        color: black;
    }

    .color-gray {
        color: #afafaf;
    }

    .popup-line {
        padding: 4px;
        line-height: 60%;
        padding: 1%;
    }

    .popup-line-label {
        padding: 4px;
        line-height: 60%;
        padding: 1%;
        width: 25%;
    }

    .popup-line-val {
        padding: 4px;
        line-height: 60%;
        padding: 1%;
        width: 75%;
    }

    .bg-red {
        background-color: red;
        color: white;
    }

    .bg-orange {
        background-color: orange;
        color: white;
    }

    .bg-yellow {
        background-color: yellow;
        color: black;
    }

    .bg-green {
        background-color: green;
        color: white;
    }

    .w-100 {
        width: 100% !important;
    }

    .text-white {
        color: white !important;
    }

    .width-150 {
        width: 150px;
    }

    .width-auto {
        width: auto;
    }

    .font-small {
        font-size: small;
    }

    aside.collapsed a span.text {
        display: none !important;
    }

    aside.collapsed .close-menu {
        display: none;
    }

    aside.collapsed .open-menu {
        display: inline-block;
    }

    .container-fluid.increase-container-width {
        width: calc(100% - 72px) !important;
        margin-left: 72px !important;
    }

    .welcome-page .footer-container {
        display: none;
    }

    #welcome-search {
        text-align: center;
        position: absolute;
        width: 500px;
        height: 380px;
        top: calc(50% - 190px);
        left: 50%;
        margin-left: -215px;
    }

    #welcome-search img.welcome-logo {
        display: inline-block;
        max-width: 290px;
        margin-bottom: 32px;
    }

    #welcome-search div.line {
        width: 100%;
        display: inline-block;
    }

    #welcome-search h1.logo {
        display: inline-block;
        color: #7367F0;
        background: url('/images/logo-circle.png') left center no-repeat;
        background-size: 45px 45px !important;
        padding-left: 50px;
        height: 60px;
        line-height: 60px;
        font-size: 36px;
        margin-bottom: 40px;
        letter-spacing: -0.035em;
        margin-left: -60px
    }

    #welcome-search div.input-group {
        position: relative;
        display: inline-block;
        float: left;
    }


    #welcome-search div.form-logo {
        width: calc(15% - 2px);
        border: 1px solid #7367F0;
        -webkit-border-top-left-radius: 5px;
        -webkit-border-bottom-left-radius: 5px;
        -moz-border-radius-topleft: 5px;
        -moz-border-radius-bottomleft: 5px;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        height: 39px;
        background: #fff;
        color: #7367F0;
        line-height: 35px;
    }

    #welcome-search div.form-logo i:hover {
        cursor: hand;
        cursor: pointer;
    }

    #welcome-search div.form-logo select {
        width: 96% !important;
        margin: 2%;
        border: 0 !important;
    }

    #welcome-search div.form-input {
        width: 70%;
        border-top: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;
        height: 33px;
        line-height: 35px;
        background: #fff;
    }

    #welcome-search div.form-button {
        width: calc(15% - 2px);
        border: 1px solid #7367F0;
        -webkit-border-top-right-radius: 5px;
        -webkit-border-bottom-right-radius: 5px;
        -moz-border-radius-topright: 5px;
        -moz-border-radius-bottomright: 5px;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        height: 39px;
        background: #7367F0;
    }

    #welcome-search div.form-button button {
        background: none;
        border: 0;
        color: #fff;
        font-size: 13px;
        line-height: 35px;
        height: 39px;
    }

    #welcome-search input.subsearch {
        border: 0;
        float: left;
        width: 100%;
        margin: 0 !important;
        border-radius: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        font-size: 15px;
        border-bottom: 1px solid #D8D6DE;
    }

    #welcome-search div.autocomplete-items {
        top: 38px !important;
        -webkit-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
        -moz-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
        box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
    }

    #welcome-search div.autocomplete-items div {
        font-size: 13px !important;
        padding: 5px 15px !important;
        height: 38px;
        line-height: 28px;
        border: none !important;
        background: #fff url("/images/welcome-selected.png") right center no-repeat;
        background-size: 24px 17px;
    }

    #welcome-search div.autocomplete-items div:hover {
        color: white !important;
        background-color: #7367F0 !important;
    }

    #welcome-search div.device-not-found-error {
        color: #7367F0;
        font-size: 14px;
        font-weight: 400;
        display: inline-block;
        text-align: center;
        margin-top: 10px;
        background: rgba(115, 103, 240, 0.12);
        padding: 10px 20px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

    #welcome-search .device-not-found-error-close {
        margin-left: 10px;
    }

    #welcome-search .device-not-found-error-close:hover {
        text-decoration: none;
    }

    #welcome-search .get-device-list {

    }

    div.login-footer-logo {
        margin-bottom: 0 !important;
    }

    div.login-footer-logo img {
        width: 100%;
        max-width: 230px;
        margin: 20px auto 0 auto;
    }

    #login-container {
        position: absolute;
        left: 50%;
        margin-left: -205px;
        width: 410px;
        height: 630px;
        top: calc(50% - 315px);
    }

    #login-container img.captcha_image {
        width: 100% !important;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        border: 1px solid #D3D3D3;
    }


    #login-container .login-screen {
        width: 100%;
        position: relative;
        max-width: 410px;
        padding: 30px;
        border: 1px solid #e5e5e5;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        background: #fff;
        color: #5E5873;
        -webkit-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
        -moz-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
        box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
    }

    #login-container .welcome-title {
        display: inline-block;
        width: 100%;
        font-weight: 600 !important;
        margin-bottom: 10px;
        font-size: 18px;
    }

    #login-container .login-screen hr.button-line {
        line-height: 1px;
        margin-top: 0;
        margin-bottom: 30px;
    }

    #login-container .alert-screen {
        background: rgba(115, 103, 240, 0.12);
        border-radius: 4px;
        color: #7367F0;
        width: 100%;
        max-width: 480px;
        padding: 15px;
        margin: 30px auto;
        position: relative;
    }

    #login-container .alert-screen p {
        margin: 5px;
        width: 90%;
        display: inline-block;
        text-align: left;
        color: #7367F0;
    }

    #login-container .alert-screen a.close-alert {
        width: 32px;
        height: 32px;
        line-height: 32px;
        font-size: 28px;
        color: #7367F0;
        display: inline-block;
        text-align: center;
        position: absolute;
        right: 5px;
        top: 5px;
        z-index: 999;
    }

    #login-container .login-screen .login-logo {
        width: 100%;
        display: inline-block;
        max-width: 165px;
        margin-bottom: 20px;
    }

    #login-container .login-screen .text-center {
        text-align: center;
    }

    #login-container .login-screen h1.logo {
        display: inline-block;
        color: #7367F0;
        background: url('/images/logo-circle.png') left center no-repeat;
        background-size: 32px 32px;
        padding-left: 40px;
        height: 70px;
        line-height: 70px;
        font-size: 32px;
        margin-bottom: 10px;
        font-weight: 600;
    }

    #login-container div.line {
        position: relative;
        display: inline-block;
        width: 100%;
        font-size: 16px;
        margin-bottom: 10px;
    }

    #login-container div.line small {
        display: inline-block;
        width: 100%;
        margin-bottom: 5px;
    }

    #login-container div.line small.weight-400 {
        font-weight: 400;
    }

    #login-container div.line input {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        padding: 10px !important;
        font-size: 13px;
        color: #5E5873;
    }

    #login-container div.line input::placeholder {
        color: #B9B9C3;
        opacity: 1; /* Firefox */
    }

    #login-container div.line input:-ms-input-placeholder {
        color: #B9B9C3;
    }

    #login-container div.line input::-ms-input-placeholder {
        color: #B9B9C3;
    }


    #login-container div.captcha-form {
        text-align: center;
        width: 100%;
        margin: 15px 0 30px 0;
    }

    #login-container div.captcha-form input {
        max-width: 250px;
        text-align: center;
        letter-spacing: 0.075em;
        font-weight: 400;
        margin: auto;
        font-size: 20px;
        color: #B9B9C3 !important;
        padding: 5px !important;
    }

    #login-container div.captcha-form img {
        float: none;
        margin-bottom: 5px;
    }

    #login-container div.captcha-form div.captcha-left {
        width: 48%;
        float: left;
        margin-right: 2%;
    }

    #login-container div.captcha-form div.captcha-left img {
        width: 200px;
    }

    #login-container div.captcha-form div.captcha-right {
        width: 48%;
        float: right;
        margin-left: 2%;
    }

    #login-container div.captcha-form div.captcha-right input {

    }

    #login-container .login-button {
        background: #7367F0;
        width: 100%;
        color: #fff;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        text-transform: none !important;
    }

    #login-container .login-button:hover {
        cursor: hand;
        cursor: pointer;
    }

    #footer {
        left: 10px;
        bottom: 10px;
        width: 190px;
        position: fixed;
        color: #6E6B7B;
        font-size: 12px !important;
    }

    #footer .copyright span {
        color: #7367F0;
        font-weight: 600;
    }

    #topology_container {
        display: none;
    }

    #topology_graph {
        width: 100%;
        height: 650px;
        position: relative;
        margin: auto;
    }

    #total_alert {
        margin-left: 5px;
    }

    #home-dashboard .mdi-32px {
        font-size: 32px !important;
    }

    #home-dashboard .mdi-28px {
        font-size: 28px !important;
    }

    #home-dashboard .apexcharts-canvas {
        margin: 0 auto !important;
    }

    #home-dashboard div.info-bar div.fancy-card {
        height: 110px;
        min-height: 110px;
    }

    #home-dashboard div.eh-line-1 {
        margin-bottom: 10px;
    }

    #home-dashboard div.logo {
        display: inline-block;
        max-width: 35px;
        width: 100%;
        position: relative;
    }

    #home-dashboard div.logo img {
        width: 100% !important;
    }

    #home-dashboard div.device-info div.icon {
        height: 40px;
        font-size: 28px !important;
        margin-bottom: 0px;
    }

    #home-dashboard div.device-info .desc {
        font-size: 12px;
        color: #999;
        font-weight: normal;
        line-height: 18px;
    }

    #home-dashboard div.device-info .badge {
        position: absolute;
    }

    #home-dashboard div.device-info .main-value {
        font-weight: bold !important;
        font-size: 16px !important;
    }

    #home-dashboard div.device-info {
        width: 100%;
        position: relative;
    }

    #home-dashboard div.device-info span {
        width: 100%;
        font-size: 16px;
        display: inline-block;
        float: left;
        line-height: 30px;
    }

    #home-dashboard div.device-info span small {
        color: #999;
    }

    #home-dashboard .bg-24ghz {
        background: #999;
        color: #fff;
        z-index: 9;
    }

    #home-dashboard .bg-24ghz h3 {
        font-size: 16px;
        font-weight: bold;
    }


    #home-dashboard .bg-50ghz {
        background: #999;
        color: #fff;
        z-index: 9;
    }

    #home-dashboard .bg-50ghz h3 {
        font-size: 16px;
        font-weight: bold;
    }

    #home-dashboard .nmt-5 {
        margin-top: -5px;
        padding-top: 15px;
    }

    #home-dashboard .radio2_off,
    #home-dashboard .radio5_off {
        display: none;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        padding: 15px;
        color: #cc3333;
    }

    #home-dashboard .broadband_upload_download div.col {
        margin: 13px 0;
    }

    #home-dashboard div.home-notifications {
        padding: 20px
    }

    #home-dashboard div.home-notifications div.home-notifications-control {
        float: right;
        font-size: 14px;
        display: inline-block;
    }

    #home-dashboard div.home-notifications div.home-notifications-control:hover {
        cursor: hand;
        cursor: pointer;
    }

    #home-dashboard div.home-notifications h3 {
        font-weight: bold;
        font-size: 20px;
    }

    #home-dashboard div.home-notifications h3.set-margin {
        margin-bottom: 20px;
    }

    #home-dashboard section {
        margin-bottom: 20px;
    }

    #home-dashboard div.home-notifications section:first-child {
        margin-bottom: 0 !important;
    }

    #home-dashboard section h5 {
        font-weight: bold;
    }

    #home-dashboard section.home-alerts {

    }

    #home-dashboard section.hide-section {
        display: none;
    }

    #home-network .device-profile-speed {
        position: absolute;
        left: 30px;
        top: 35px;
        font-size: 10px;
        color: #6E6B7B;
        z-index: 999;
    }

    #home-network .device-link-speed {
        position: absolute;
        left: 30px;
        top: 55px;
        font-size: 10px;
        color: #6E6B7B;
        z-index: 999;
    }

    #home-network .device-first-contact-time {
        position: absolute;
        left: 30px;
        top: 75px;
        font-size: 10px;
        color: #6E6B7B;
        z-index: 999;
    }

    #home-network .device-mesh-status {
        position: absolute;
        left: 30px;
        top: 95px;
        font-size: 10px;
        color: #6E6B7B;
    }

    #home-network .device-bstr-status {
        position: absolute;
        left: 30px;
        top: 115px;
        font-size: 10px;
        color: #6E6B7B;
    }

    #home-network .device-reboot-details {
        position: absolute;
        left: 30px;
        bottom: 10px;
        font-size: 10px;
        color: #6E6B7B;
        line-height:20px;
        z-index: 999;
    }

    #home-network .test-it, #wifi-device-list .test-it {
        position: absolute;
        right: 50px;
        bottom: 50px;
        z-index: 999;
        font-size: 14px;
        font-weight: 500;
        color: #7367F0;
        border: 1px solid #7367F0;
        background: rgba(115, 103, 240, 0.04);
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        padding: 10px 20px;
        display: none
    }

    #home-network .test-it:hover, #wifi-device-list .test-it:hover {
        background: #7367F0;
        color: white;
        text-decoration: none;
        cursor: pointer;
    }

    #topology_graph .vis-network canvas {
        display: inline-block;
        width: 100%;
        height: 500px;
    }

    #alert-message {
        display: none;
    }

    #topology_table_container {
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
        margin: 0 15px 15px 15px;
    }

    #topology_table_container table.dataTable tbody tr td {
        height: 35px;
    }

    #topology_table_container table.dataTable tbody tr td.select-checkbox::before {
        margin-top: 0;
    }

    #topology_table_container table.dataTable tbody tr td.select-checkbox::after {
        margin-top: -4px
    }

    #topology_table_container table.dataTable.compact {
        width: 100%;
        margin: 0;
    }

    #topology_table_container table.dataTable.compact tr td, #topology_table_container table.dataTable.compact, #topology_table_container table.dataTable.compact thead th, table.dataTable.compact thead td {
        border-bottom: 0;
    }

    @media only screen and (max-width: 991px) {
        #dashboard-wifi-coverage div.metric-line {
            margin-top: 0 !important;
            margin-bottom: 10px !important;
        }
    }

    @media only screen and (min-width: 992px) {

        .h100px {
            height: 100px !important;
        }

        .h125px {
            height: 125px !important;
        }

        .h150px {
            height: 150px !important;
        }

        .h175px {
            height: 175px !important;
        }

        .h200px {
            height: 200px !important;
        }

        .h200px {
            height: 200px !important;
        }

        .h225px {
            height: 225px !important;
        }

        .h250px {
            height: 250px !important;
        }

        .h275px {
            height: 275px !important;
        }

        .h300px {
            height: 300px !important;
        }

        .h325px {
            height: 325px !important;
        }

        .h325px-min {
            min-height: 325px !important;
        }

        .h350px {
            height: 350px;
        }

        .h375px {
            height: 375px;
        }

        .h400px {
            height: 400px;
        }

        .h450px {
            height: 450px;
        }

        .h450px-min {
            min-height: 325px !important;
        }

        .h500px {
            height: 500px;
        }

        .h550px {
            height: 550px;
        }
    }

    @media only screen and (max-width: 767px) {
        #login-container .login screen {
            position: relative !important;
            left: inherit;
            top: inherit;
            margin: auto !important;
        }
    }

    #open-menu {
        margin-bottom: 15px;
        margin-left: -2px;
    }

    #close-menu {
        position: absolute;
        left: 180px;
    }

    /* fancy style */
    .fancy-card {
        position: relative;
        background: white;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
        -moz-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
        box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
        display: inline-block;
        width: 100%;
        margin: 0;
        padding: 10px;
    }

    .fancy-card div.eh-line-1 {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .fancy-card div.icon-container {
        width: 60px;
        float: left;
        margin: 0;
        padding: 5px;
        text-align: center;
    }

    .fancy-card div.icon-container i {
        width: 48px;
        height: 48px;
        -webkit-border-radius: 26px;
        -moz-border-radius: 26px;
        border-radius: 26px;
        background: #f0f0f0;
        text-align: center;
        display: inline-block;
        line-height: 48px;
    }

    .fancy-card div.text-container {
        width: calc(100% - 60px);
        float: left;
        margin: 0;
        padding: 5px;
    }

    .fancy-card div.text-container h6 {
        font-size: 18px;
        font-weight: 600;
        margin-left: 5px;
        width: 100%;
        color: #5E5873;
    }

    .fancy-card div.text-container h6.value {
        margin-bottom: 0;
    }

    .fancy-card div.text-container h7 {
        font-size: 12px;
        margin-left: 5px;
        font-weight: 400;
        width: 100%;
        color: #6E6B7B;
    }

    .fancy-card small.title {
        position: absolute;
        bottom: 10px;
        width: 90%;
        left: 5%;
        text-align: center;
        font-size: 15px;
        font-weight: 600;
        font-size: 14px;
        line-height: 17px;
        color: #373d3f;
    }

    .fancy-margin-settings {
        margin-bottom: 25px;
    }

    .fancy-margin-settings-20 {
        margin-bottom: 20px !important;
    }

    .fancy-margin-settings-15 {
        margin-bottom: 15px !important;
    }

    table.fancy-table {
        width: 100%;
        border-left: 1px solid #F3F2F7;
        border-right: 1px solid #F3F2F7;
    }

    table.fancy-table tbody tr td {
        border-bottom: 1px solid #F3F2F7;
    }

    .fancy-card h6.chart-title {
        font-weight: 600;
        font-size: 9px;
        padding-left: 15px;
        position: relative;
    }

    .last-seen {
        position: absolute;
        right: 30px;
        top: 15px;
        font-size: 10px;
        color: #6E6B7B;
    }

    .selected-device-service-number {
        position: absolute;
        left: 30px;
        top: 15px;
        font-size: 10px;
        color: #6E6B7B;
    }

    table.fancy-table thead tr {
        background: #F3F2F7;
        height: 35px;
    }

    table.fancy-table thead tr th {
        font-size: 11px;
        color: #5E5873;
        font-weight: 600;
        padding: 5px;
        text-align: left !important;
    }

    table.fancy-table thead tr th:last-child {
        text-align: center !important;
    }


    table.fancy-table tbody tr:nth-child(odd) {
        background: #fff;
    }

    table.fancy-table tbody tr:nth-child(even) {
        background: #fff;
    }

    table.fancy-table tbody tr td {
        padding: 10px 8px;
        font-size: 12px;
        font-weight: 400;
    }

    #topology_table_container table.fancy-table tbody tr:hover {
        background: #7367F0 !important;
    }

    #topology_table_container table.fancy-table tbody tr:hover td {
        color: white;
    }

    #topology_table_container table.fancy-table tbody tr td:last-child {
        text-align: center !important;
    }


    table.fancy-table tr td button.btn-xs {
        background: #7367F01F !important;
        color: #7367F0 !important;
        -webkit-border-radius: 16px;
        -moz-border-radius: 16px;
        border-radius: 16px;
        font-size: 11px;
        padding: 3px 10px;
    }

    table.fancy-table tbody tr:hover td button.btn-xs {
        background: white !important;
        color: #7367F0;
    }

    .fw300 {
        font-weight: 300 !important;
    }

    .fw400 {
        font-weight: 400 !important;
    }

    .fw500 {
        font-weight: 500 !important;
    }

    .fw600 {
        font-weight: 600 !important;
    }

    .fw700 {
        font-weight: 700 !important;
    }

    .clr-green {
        color: #28C76F !important;
    }

    .btn-clr-green {
        color: #28C76F !important;
        background: rgba(40, 199, 111, 0.12) !important;
    }

    .clr-red {
        color: #EA5455 !important;
    }

    .btn-clr-red {
        color: #EA5455 !important;
        background: rgba(234, 84, 85, 0.12) !important;
    }

    .clr-grey {
        color: #555 !important;
    }

    .btn-clr-grey {
        color: #555 !important;
        background: #f0f0f0 !important;
    }

    .clr-blue {
        color: #00CFE8 !important;
    }

    .btn-clr-blue {
        color: #00CFE8 !important;
        background: rgba(0, 207, 232, 0.12) !important;
    }

    .clr-orange {
        color: #FF9F43 !important;
    }

    .btn-clr-orange {
        color: #FF9F43 !important;
        background: rgba(255, 159, 67, 0.12) !important;
    }

    .clr-yellow {
        color: #FFCE43 !important;
    }

    .btn-clr-yellow {
        color: #FFCE43 !important;
        background: rgba(255, 202, 68, 0.12) !important;
    }

    .clr-purple {
        color: #7367F0 !important;
    }

    .btn-clr-purple {
        color: #7367F0 !important;
        background: rgba(115, 103, 240, 0.12) !important;
    }

    .btn-clr-2ghz {
        color: #1ABCFE !important;
        /*background: rgba(26, 188, 254, 0.12);*/
    }

    .btn-clr-5ghz {
        color: #00CFE8 !important;
        /*background: rgba(0, 207, 232, 0.12);*/
    }

    .swal2-icon.swal2-warning {
        border-color: #FF9F43 !important;
        border-width: 8px !important;
    }

    .swal2-icon.swal2-warning.swal2-icon-show .swal2-icon-content {
        color: #FF9F43;
        font-weight: 600;
    }

    .swal2-html-container {
        font-size: 14px !important;
        line-height: 21px !important;
        font-weight: 400;
        margin: 1.5em 1.6em .3em !important;
    }

    .vis-tooltip {
        padding: 0 !important;
        margin: 0 !important;
        background: #fff !important;
        -webkit-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
        -moz-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
        box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
    }

    .vis-tooltip table {
        margin: 0;
        padding: 0;
        font-weight: 400 !important;
        color: #777483 !important;
        border-color: #EBE9F1;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

    .vis-tooltip table tr {
        background: white !important;
    }

    .vis-tooltip table tr:first-child th {
        text-align: left !important;
        background: #F8F8F8;
        font-weight: 500 !important;
        font-size: 12px !important;
    }

    .table-condensed tr:first-child th {
        text-align: left !important;
        background: #F8F8F8;
        font-weight: 500 !important;
        font-size: 12px !important;
    }

    .vis-tooltip table tr td b {
        font-weight: 600 !important;
    }

    .vis-tooltip table tr td .status {
        border-radius: 5px;
    }

    .vis-tooltip table.table-condensed td.popup-line {
        font-size: 10px !important;
        font-family: 'Montserrat' !important;
    }

    #rectangle_green {
        -webkit-border-radius: 7px;
        -moz-border-radius: 7px;
        border-radius: 7px;
        background: #28C76F;
    }

    #rectangle_red {
        -webkit-border-radius: 7px;
        -moz-border-radius: 7px;
        border-radius: 7px;
        background: #cc3333;
    }

    div.vis-tooltip {
        font-size: 10px !important;
        border-color: #EBE9F1 !important;
    }

    .vis-tooltip table tr:first-child th {
        border-top: 0 !important;
    }

    .popup-line {
        margint: 5px;
        font-size: 14px;
    }

    div.draw-wifi_capacity_bar_container {
        height: 300px !important;
    }

    #draw-wifi_capacity_bar {
        position: absolute;
        width: 25px;
        display: inline-block;
        height: 200px;
        left: calc(50% - 12.5px);
        background: #e0e0e0;
        bottom: 50px;
        -webkit-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
        -moz-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
        box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
    }

    #draw-wifi_capacity_bar .draw-wifi_capacity_bar {
        position: absolute;
        width: 25px;
        background: none;
        bottom: 0;
        left: 0;
        height: 180px;
    }

    #draw-wifi_capacity_bar .draw-wifi_capacity_bar.draw-danger {
        background: #EA5455 !important;
    }

    #draw-wifi_capacity_bar .draw-wifi_capacity_bar.draw-warning {
        background: #FF9F43 !important;
    }

    #draw-wifi_capacity_bar .draw-wifi_capacity_bar.draw-success {
        background: #28C76F !important;
    }


    #draw-wifi_capacity_bar .draw-wifi_capacity_bar span {
        font-size: 10px;
        display: block;
        -webkit-transform: rotate(270deg);
        -moz-transform: rotate(270deg);
        -o-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
        transform: rotate(270deg);
        position: absolute;
        bottom: 15px;
        left: calc(50% - 40px);
        font-weight: 600;
    }

    #DEVICE_LIST_wrapper {
        font-size: 13px;
        color: #5E5873;
    }

    #DEVICE_LIST_info {
        width: 100%;
    }

    .dataTables_filter {
        margin-bottom: 10px;
    }

    .dataTables_filter input {
        border: 1px solid #D8D6DE;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        background: white !important;
    }

    #DEVICE_LIST_wrapper table thead tr {
        background: #F3F2F7;
    }

    #DEVICE_LIST_wrapper table thead tr th {
        font-size: 12px;
        color: #5E5873;
        font-weight: 600;
        border: 0 !important;
    }

    #DEVICE_LIST_wrapper table tbody tr td {
        font-size: 12px;
        color: #6E6B7B;
        font-weight: 400;
        height: 38px;
    }

    #DEVICE_LIST_wrapper table tbody tr.selected td {
        background: #f0f0f0;
    }

    #DEVICE_LIST_wrapper table tbody tr td .circular {
        width: 30px;
        height: 30px;
        -webkit-border-radius: 15px !important;
        -moz-border-radius: 15px !important;
        border-radius: 15px !important;
        font-size: 10px;
        font-weight: 400;
        float: left;
        display: inline-block;
        margin: 3px;
        line-height: 25px;
    }

    #DEVICE_LIST_wrapper table.dataTable tbody td.select-checkbox::before {
        margin-top: -1px;
        width: 18px;
        height: 18px;
        border-color: #D8D6DE;
        margin-right: 3px;
    }

    #DEVICE_LIST_wrapper table.dataTable tbody tr.selected td.select-checkbox::before {
        background: #7367F0;
    }

    #DEVICE_LIST_wrapper table.dataTable tr.selected td.select-checkbox::after {
        margin-top: 0px;
        margin-left: -2px;
        color: white;
        text-shadow: none !important;
    }

    #DEVICE_LIST_wrapper table.dataTable tbody tr td span.label {
        font-size: 11px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        font-weight: 400;
        border: 0;
        display: inline-block;
        margin: 3px;
    }

    #DEVICE_LIST_wrapper table.dataTable tbody tr td span.label.circular {
        width: 32px;
    }

    #DEVICE_LIST_wrapper table.dataTable tbody tr td span.label-white {
        color: #28C76F;
        background: rgba(40, 199, 111, 0.12) !important;
    }

    #DEVICE_LIST_wrapper table.dataTable tbody tr td span.label-default {
        color: #FF9F43;
        background: rgba(255, 159, 67, 0.12) !important;
    }

    #DEVICE_LIST_wrapper table.dataTable tbody tr td:nth-child(2) {
        padding-left: 10px;
    }

    #DEVICE_LIST_wrapper table.dataTable tbody tr td span.action_button i {
        color: #7367F0 !important;
        font-size: 18px;
    }

    #DEVICE_LIST_wrapper .dataTables_wrapper .dataTables_paginate a.paginate_button {
        background: #F3F2F7 !important;
        -webkit-border-radius: 15px !important;
        -moz-border-radius: 15px !important;
        border-radius: 15px !important;
        width: 30px !important;
        height: 30px !important;
    }

    #DEVICE_LIST_wrapper .dataTables_wrapper .dataTables_paginate a.paginate_button.current {
        background: #7367F0;
        color: white;
    }

    .row {
        margin-left: 0;
        margin-right: 0;
    }

    .remove-row-padding {
        padding-left: 0;
        padding-right: 0;
    }

    .set-negative-margin {
        margin-left: -15px;
        margin-right: -15px;
    }

    #wifi-radio-table-summary {
        font-size: 14px;
        color: #6E6B7B;
    }

    #draw-wifi_rate {
        margin-top: 15px;
    }

    .styled_action_button {
        background: #7367F01F !important;
        color: #7367F0 !important;
        -webkit-border-radius: 16px;
        -moz-border-radius: 16px;
        border-radius: 16px;
        font-size: 11px;
        padding: 3px 10px;
    }

    table.dataTable tbody tr {
        background: #fff !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        background: #F3F2F7 !important;
        color: #6E6B7B !important;
        font-size: 13px !important;
        /*width: 36px;*/
        height: 26px;
        text-align: center;
        line-height: 13px;
        padding: 5px;
        margin-left: 0;
        margin-right: 0;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button:first-child {
        -webkit-border-top-left-radius: 13px;
        -webkit-border-bottom-left-radius: 13px;
        -moz-border-radius-topleft: 13px;
        -moz-border-radius-bottomleft: 13px;
        border-top-left-radius: 13px;
        border-bottom-left-radius: 13px;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button:last-child {
        -webkit-border-top-right-radius: 13px;
        -webkit-border-bottom-right-radius: 13px;
        -moz-border-radius-topright: 13px;
        -moz-border-radius-bottomright: 13px;
        border-top-right-radius: 13px;
        border-bottom-right-radius: 13px;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.previous, .dataTables_wrapper .dataTables_paginate .paginate_button.next {
        -webkit-border-radius: 13px;
        -moz-border-radius: 13px;
        border-radius: 13px;
        margin-left: 5px;
        margin-right: 5px;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background: #F3F2F7 !important;
        color: #6E6B7B !important;
        font-size: 13px !important;
        border-color: #F3F2F7;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background: #7367F0 !important;
        color: white !important;
        border: 1px solid #7367F0;
        -webkit-border-radius: 13px;
        -moz-border-radius: 13px;
        border-radius: 13px;
    }

    .dataTables_paginate {
        margin-top: 10px;
    }

    .dataTables_paginate span {
        display: inline-block;
        background: #F3F2F7 !important;
        -webkit-border-radius: 13px;
        -moz-border-radius: 13px;
        border-radius: 13px;
    }

    .dataTables_wrapper.no-footer .dataTables_scrollBody {
        border: 0 !important;
    }


    @media screen and (min-width: 768px) {
        .modal:before {
            display: inline-block;
            vertical-align: middle;
            content: " ";
            height: 100%;
        }
    }

    .modal-dialog {
        display: inline-block;
        vertical-align: middle;
        width: 600px;
        left: calc(50% - 300px);
    }

    #test-modal .test-results {
        height: 250px;
    }

    @media screen and (max-width: 640px) {
        .modal-dialog {
            width: 90%;
            left: calc(100% - 5%);
        }
    }

    em.wifi-marker {
        position: absolute;
        font-size: 7px;
        left: 15px;
        top: 28px;
        background: none;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        line-height: 10px;
        text-align: center;
        color: #5E5873 !important;
    }

    a.active em.wifi-marker {
        color: white !important;
    }

    button.margin-auto {
        margin: 5px auto;
    }

    #draw-device_cpu_score #wifi-channel small.title {
        font-family: Montserrat;
        font-style: normal;
        font-weight: bold;
        font-size: 20px;
        line-height: 24px;
        color: #5E5873;
    }

    #draw-device_cpu_score #wifi-channel small {
        font-family: Montserrat;
        font-style: normal;
        font-weight: 500;
        font-size: 18px;
        line-height: 22px;
        color: #6E6B7B;
    }

    .fancy-card h6.chart-title {
        font-family: Montserrat;
        font-style: normal;
        font-weight: 600;
        font-size: 14px;
        line-height: 17px;
        color: #373D3F;
    }

    .speedtest-cloud .fancy-table.display.compact thead tr:first-child th {
        text-align: center !important;
    }

    .timeline-button-container {
        position: relative;
        display: inline-block;
    }

    .timeline-button-container div {
        position: relative;
        display: inline-block;
        float: right;
    }

    /* test model result overwrite */
    #test-modal div.show_results .results-left {
        top: 30px !important;
        left: 30px !important;
        color: #7367F0 !important;
        font-weight: 500 !important;
        font-size: 21px !important;
    }

    #test-modal div.show_results .results-right {
        top: 30px !important;
        right: 30px !important;
        color: #7367F0 !important;
        font-weight: 500 !important;
        font-size: 21px !important;
    }

    #test-modal div.show_results .results-center {
        color: #28C76F !important;
        font-size: 72px !important;
    }

    #rleft_metric, #rright_metric {
        color: #7367F0 !important;
    }

    #rcenter_metric {
        font-size: 32px;
    }

    #warning i {
        color: #7367F0;
    }

    div.vis-item.qwifi {
        background: #28C76F;
    }

    .vis-item.red {
        background: #EA5455;
    }

    .vis-item.yellow {
        background: #FF9F43;
        color: white !important;
    }

    .vis-item.vis-selected {
        border-color: #999 !important;
    }

    #page404 .container-404 {
        display: inline-block;
        width: 100%;
        text-align: center;
        margin-top: 100px;
        position: relative;
    }

    #page404 .message-404 p {
        color: #6E6B7B;
        font-size: 14px;
        font-weight: 400;
        margin-bottom: 50px;
    }

    #page404 .container-404 a {
        background: #7367F0;
        color: white;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        padding: 10px 22px;
        font-weight: 500;
        font-size: 14px;
        text-decoration: none;
        display: inline-block;
    }

    #page404 .container-404 a:hover {
        text-decoration: none;
    }

    #page404 .logo-404 {
        margin-top: 160px;
        display: inline-block;
        position: relative;
    }

    .apexcharts-legend-default-overflow {
        overflow: unset !important;
    }

    #site-survey-info {
        position: absolute;
        with: 300px;
        height: 80px;
        background: #e5e5e5;
        left: calc(50% - 150px);
        top: 25px;
    }

    #site-survey-info .legend-tooltip {
        display: none;
    }

    .legend-tooltip-css {
        display: none;
        position: absolute;
        color: #5E5873;
        right: 8px;
        bottom: 340px;
        border: 1px solid #EBE9F1;
        -webkit-border-bottom-right-radius: 3px;
        -webkit-border-bottom-left-radius: 3px;
        -moz-border-radius-bottomright: 3px;
        -moz-border-radius-bottomleft: 3px;
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
        background: white !important;
        padding: 8px;
        z-index: 9999;
        font-size: 10px;
        overflow: hidden;
        width: 180px;
        text-align: left;
        font-weight: 400;
        line-height: 15px;
        -webkit-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
        -moz-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
        box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
    }

    .legend-tooltip-css strong {
        font-weight: 600 !important;
    }

    #MENU a.d-none {
        display: none;
    }

    #draw-trend .legend-tooltip-css {
        display: none !important;
        right: -9999px;
    }

    #coverage-color-container {
        border: 2px dashed #e5e5e5;
        border-radius: 5px;
    }

    #wifi-client-table-container {
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
        width: 100%;
    }

    #wifi-client-table {
        margin: 10px auto;
    }

    #wifi-client-table thead tr th {
        font-weight: 600;
        color: #5E5873;
        padding: 5px 3px;
    }

    #wifi-client-table thead tr.first-heading th {
        font-size: 13px;
        text-align: center !important;
        background: #7367F0;
        color: white;
        font-weight: bold;
    }

    #wifi-client-table thead tr.first-heading th span {
        display: inline-block;
        position: relative;
        font-weight: 600;
    }

    #wifi-client-table thead tr.first-heading th.phyrate-align span.icon {
        width: 35px;
        height: 18px;
    }

    #wifi-client-table thead tr.first-heading th.phyrate-align i {
        position: absolute;
        top: -5px;
    }

    #wifi-client-table thead tr.second-heading th {
        font-size: 11px;
        padding-top: 0 !important;
        text-align: center !important;
        padding-top: 5px !important;
        height: 30px;
    }

    #wifi-client-table thead tr th div.icon {
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-right: 6px;
    }

    #wifi-client-table thead tr th div.icon img {
        width: 100% !important;
    }

    #wifi-client-table thead tr th div.text {
        display: inline-block;
    }

    #wifi-client-table tbody tr.selected td {
        text-align: center !important;
    }

    #wifi-client-table tbody tr.selected td {
        background: #7367F0 !important;
        color: white !important;
    }

    #wifi-client-table tbody tr td a {
        color: #5E5873;
        padding-left: 30px;
        background: url('/images/unchecked.png') left center no-repeat;
        font-weight: 500;
        line-height: 21px;
        display: inline-block;
        text-decoration: none !important;
    }

    #wifi-client-table tbody tr td a.checked {
        background: url('/images/checked.png') left center no-repeat;
    }

    #wifi-client-table tbody tr td a:hover {
        text-decoration: none !important;
        cursor: pointer;
        cursor: hand;
    }


    #wifi-client-table tbody tr.selected td a {
        color: white !important;
    }

    #wifi-client-table thead th:nth-child(1) {
        min-width: 100px;
    }

    #wifi-client-table thead th:nth-child(2) {
        min-width: 50px;
    }

    #wifi-client-table tbody td {
        text-align: center;
    }

    #wifi-client-table {
        border-top: 1px solid #D2CEDE;
    }

    #wifi-client-table tr td, #wifi-client-table tr th {
        border: 1px solid #D2CEDE;
    }

    #wifi-client-table tbody tr td, #wifi-client-table {
        border-color: #D2CEDE !important;
    }

    #wifi-client-table tr td, #wifi-client-table tr th {
        text-align: center;
    }

    #wifi-client-table tbody tr td:first-child {
        text-align: left !important;
    }

    #wifi-client-table tbody tr td span {
        display: inline-block;
        padding: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        font-size: 11px;
        font-weight: bold;
        display: inline-block;
        width: 60px;
        text-align: center;
    }

    #wifi-client-table tbody tr.client_line td.text-left {
        text-align: left !important;
    }


    #wifi-client-table tbody tr td.text-center {
        text-align: center !important;
    }

    #wifi-client-table tbody tr td span.online {
        background: rgba(40, 199, 111, 0.12);
        color: #28C76F;
    }

    #wifi-client-table tbody tr td span.offline {
        background: rgba(234, 84, 85, 0.12);
        color: #EA5455;
    }

    #wifi-client-table tbody tr td div.show-number {
        width: 50%;
        position: relative;
        display: inline-block;
        float: left;
        text-align: center;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    #wifi-client-table tbody tr td span.score.circular {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        line-height: 24px;
        font-weight: normal !important;
    }

    /*
    #wifi-client-table tbody tr td div:first-child.show-number {
        background: rgba(0, 207, 232, 0.12) !important;
    }
    #wifi-client-table tbody tr td div:last-child.show-number {
        background: rgba(255, 159, 67, 0.12) !important;
    }
    */

    #wifi-client-table thead tr.second-heading th:nth-child(1) {
        width: 10% !important;
    }

    #wifi-client-table thead tr.second-heading th:nth-child(2) {
        width: 15% !important;
    }

    #wifi-client-table thead tr.second-heading th:nth-child(3) {
        width: 6% !important;
    }

    #wifi-client-table thead tr.second-heading th:nth-child(4) {
        width: 6% !important;
    }

    #wifi-client-table thead tr.second-heading th:nth-child(5) {
        width: 8% !important;
    }

    #wifi-client-table thead tr.second-heading th:nth-child(6) {
        width: 6% !important;
    }

    #wifi-client-table thead tr.second-heading th:nth-child(7) {
        width: 12% !important;
    }

    #wifi-client-table thead tr.second-heading th:nth-child(8) {
        width: 5% !important;
    }

    #wifi-client-table thead tr.second-heading th:nth-child(9) {
        width: 12% !important;
    }

    #wifi-client-table thead tr.second-heading th:nth-child(10) {
        width: 12% !important;
    }

    #wifi-client-graphs {
        visibility: hidden;
    }

    .filter-blur {
        filter: blur(5px);
    }

    #wifi-client-table tbody tr td.display-none {
        display: table !important;
    }

    #draw-client_data_usage_notification {
        font-weight: bold;
        color: #cc3333;
        padding-left: 15px;
    }

    #do_export {
        margin-top: 30px;
    }

    #do_search {
        margin-top: 30px;
    }

    .selected-geo-filter {
        display: inline-block;
        width: 100%;
        margin: 10px 0 0 0;
        font-size: 13px;
        font-weight: bold;
    }

    #marketing-filter .border-radius {
        border-radius: 4px;
        border: 1px solid #aaa;
        padding: 3px;
        max-width:95%;
    }

    #marketing-filter .range-slider {
        display: inline-block;
        width:92%;
        margin-left:1%;
        margin-top:10px;
    }

    #marketing-filter label {
        width: 90%;
        float: left;
        display: inline-block;
    }

    #marketing-filter input {
        width: 100%;
        float: left;
    }

    #marketing-filter select {
        width: 100%;
        float: left;
        -webkit-appearance: none;
        -moz-appearance: none;
        text-indent: 1px;
        text-overflow: '';

    }

    .src-operator {
        width: 65px !important;
        font-size: 16px;
        text-align: center;
    }

    .src-operator-input {
        width: calc(100% - 65px) !important;
    }


    /*Styling Filter Marketing Selectbox*/
    .marketing-filter-container {
        margin: 0px;
        width: 100%;
        height: 58px;
        padding: 4px;
        border-radius: 5px;
        box-shadow: 0 0 2px rgb(204, 204, 204);
        background: #f9f9f9;
    }

    .filter-dropdown {
        width: 60px;
        display: inline-block;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 0 2px rgb(204, 204, 204);
        transition: all .5s ease;
        position: relative;
        font-size: 14px;
        color: #474747;
        height: 100%;
        text-align: left
    }

    .filter-order-by .filter-dropdown {
        width: 55px;
    }

    .filter-dropdown .select {
        cursor: pointer;
        display: block;
        padding: 5px 6px;
        border-radius: 5px;
        border: 1px solid #fff;
        font-size: 12px;
    }

    .filter-dropdown .select > i {
        font-size: 8px;
        color: #888;
        cursor: pointer;
        transition: all .3s ease-in-out;
        float: right;
        line-height: 18px
    }

    .filter-dropdown:hover {
        box-shadow: 0 0 4px rgb(204, 204, 204)
    }

    .filter-dropdown:active {
        background-color: #F3F3F8;
        border: 1px solid #644DED;
        color: #644DED;
    }

    .filter-dropdown.active:hover,
    .filter-dropdown.active {
        box-shadow: 0 0 4px rgb(204, 204, 204);
        border-radius: 5px 5px 0 0;
        background-color: #F3F3F8;
        color: #644DED;
    }

    .filter-dropdown.active .select {
        border-color: #644DED;
    }

    .filter-dropdown.active .select > i {
        /* select dropdown arrow icon style
        transform: rotate(-90deg)
        */
    }

    .filter-dropdown .filter-dropdown-menu {
        position: absolute;
        background-color: #fff;
        width: 100%;
        left: 0;
        margin-top: 1px;
        box-shadow: 0 1px 2px rgb(204, 204, 204);
        border-radius: 0 5px 5px 5px;
        overflow: hidden;
        display: none;
        max-height: 244px;
        overflow-y: auto;
        font-size: 11px;
        z-index: 9
    }

    .filter-dropdown .filter-dropdown-menu li {
        padding: 10px;
        transition: all .2s ease-in-out;
        cursor: pointer
    }

    .filter-dropdown .filter-dropdown-menu {
        padding: 0;
        list-style: none
    }

    .filter-dropdown .filter-dropdown-menu li:hover {
        background-color: #f2f2f2
    }

    .filter-dropdown .filter-dropdown-menu li:active {
        background-color: #e2e2e2
    }

    .filter-dropdown,
    .filter-dropdown:hover,
    .filter-dropdown .filter-dropdown-menu {
        border: 0;
        box-shadow: none !important;
        background: #F3F3F8;
    }

    #main-filter i.fa-chevron-left {
        display: none;
    }

    #main-filter i.mdi-filter-outline {
        color: #7367F0;
    }

    #main-filter .filter-dropdown {
        background: #7367F01F !important;
        width: 160px;
        height: 33px;
        line-height: 22px;
        color: #7367F0;
        margin-left: 10px;
    }

    .select2-selection__clear {
        font-size: 18px;
        margin-right: 3px;
        margin-top: -1px;
    }

    .select2-container {
        width: 95% !important;
    }

    #marketing-geo-filters .select2-selection--single {
        border-color: #7367F01F !important;
    }

    #marketing-geo-filters .select2-selection__rendered {
        background: #7367F01F !important;
    }

    #marketing-geo-filters .select2-selection__placeholder {
        color: #7367F0;
    }

    #marketing-filter div.filter-row {
        display: none;
        margin-top: 0px;
    }

    #marketing-filter div.filter-row.active-row {
        display: inline-block;
    }

    #marketing-filter div.filter-row div.filter-column {
        display: inline-block;
        float: left;
        margin-bottom: 2px;
    }

    #marketing-filter .float-right {
        float: right !important;
        margin: 5px 10px 5px 20px;
    }

    #marketing-filter .hide-filter {
        display: none;
    }

    #marketing-filter .form-filter span.filter-label {
        display: inline-block;
        margin-top: 0px;
        font-size: 12px;
        margin-left: 1px;
        font-weight: bold;
    }

    #marketing-filter .form-filter span.filter-label small {
        font-weight: normal !important;
        font-size: 10px;
    }

    #marketing-filter .form-filter span.remove-filter {
        display: inline-block;
        margin-top: 5px;
        margin-left: 10px;
        position: absolute;
        right: 20px;
        top: -3px;
        color: #999;
    }

    #marketing-filter .form-filter span.remove-filter:hover {
        color: #333;
    }

    .hover-pointer:hover {
        cursor: hand;
        cursor: pointer;
        color: #666;
    }

    #marketing-filter .form-filter input.filter-clean-input {
        width: 100%;
        background-color: #F3F3F8;
        border-radius: 5px;
        position: relative;
        font-size: 12px;
        color: #474747;
        text-align: left;
        cursor: pointer;
        display: block;
        padding: 5px;
        border: 1px solid #fff;
        height: 29px;
    }

    #marketing-filter .form-filter input.filter-clean-input:active,
    #marketing-filter .form-filter input.filter-clean-input:focus {
        border: 1px solid #644DED;
        color: #644DED;
    }

    #marketing-filter .filter-column.filter-label {
        width: 100% !important;
        text-align: left;
    }

    #marketing-filter div.filter-input-resize {
        width: calc(100% - 115px) !important;
    }

    #marketing-filter div.filter-input-resize-full {
        width: 100% !important;
    }

    #marketing-filter div.filter-input-resize-full .filter-dropdown {
        width: 100% !important;
    }

    #marketing-filter .filter-action-button {
        position: relative;
        margin-left: 10px;
        background: #7367F01F !important;
        color: #7367F0 !important;
        -webkit-border-radius: 16px;
        -moz-border-radius: 16px;
        border-radius: 16px;
        padding: 6px 15px 6px 35px;
    }

    #marketing-filter .filter-action-button i {
        position: absolute;
        left: 6px;
        top: -4px;
    }

    #marketing-filter-table table tr td span.btn-sm {
        width: 50px;
        text-align: center;
    }

    #marketing-filter-table table thead tr th {
        font-size: 10px;
    }

    #marketing-filter-table .label-warning-yellow {
        background: #FFCE43 !important;
    }

    #marketing-filter-table .label-grey {
        background: #e0e0e0 !important;
        color: #333;
    }

    #marketing-filter-table div.dt-buttons button.dt-button {
        background: #7367F01F;
        color: #7367F0;
        border: 0;
        padding: 5px;
        margin: 0 0 10px 5%;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        min-width: 80px;
    }

    #marketing-filter-table div.dt-buttons div.dt-button-collection {
        position: absolute;
        left: 10px;
        top: 25px;
        width: 150px;
        height: 250px;
        overflow-y: auto;
        z-index: 9999;
        background: white;
        padding-top: 5px;
        margin-left: -70px;
        border: 1px solid #7367F0;
    }


    #marketing-filter-table div.dt-buttons div.dt-button-collection button {
        background: rgba(94, 88, 115, 0.15) !important;
        color: #666 !important;
        font-size: 10px;
        padding: 3px 6px;
        margin-bottom: 5px !important;
        text-align: left;
        border-radius: 6px;
        width: 90%;
    }

    #marketing-filter-table div.dt-buttons div.dt-button-collection button.active {
        background: #7367F01F !important;
        color: #7367F0 !important;
    }

    #marketing-report-info {
        width: 100%;
        font-size: 10px !important;
        display: inline-block;
        color: #666;
        text-align: left;
        font-weight: 400 !important;
        margin-bottom: 10px;
        position: absolute;
        left: 25px;
        top: 25px;

    }

    #marketing-filter-table .dt-buttons {
        float: right;
        margin-right: 3px;
    }

    #marketing div.db-line-graph-container {
        width: 100% !important;
        display: inline-block !important;
    }

    div.fullwidth-force-apex-canvas .apexcharts-canvas {
        width: 100% !important;
        display: inline-block !important;
    }

    table.fancy-table thead tr th.text-right-force {
        text-align: right !important;
    }

    /* Dashboard */
    #dashboard-firmware-tabs ul.nav-tabs li span.short-name {
        display: block;
    }

    #dashboard-firmware-tabs ul.nav-tabs li span.long-name {
        display: none;
    }

    #dashboard-firmware-tabs ul.nav-tabs li.active span.short-name {
        display: none;
    }

    #dashboard-firmware-tabs ul.nav-tabs li.active span.long-name {
        display: block;
    }

    #dashboard-firmware-tabs ul li a {
        color: #7367f0 !important;
    }

    #dashboard-firmware-tabs ul li.active a {
        color: #7367f0 !important;
        font-weight: bold !important;
    }

    #dashboard table.wifi-stats-device-list {
        margin-top: 30px;
        margin-bottom: 5px;
    }

    #dashboard table.wifi-stats-device-list th {
        background-color: #7367F0 !important;
        color: #fff;
    }

    #dashboard table.wifi-stats-device-list th:nth-child(1) {
        width: 15%;
    }

    #dashboard table.wifi-stats-device-list th:nth-child(2) {
        width: 30%;
    }

    #dashboard table.wifi-stats-device-list th:nth-child(3) {
        width: 10%;
        text-align: left !important;
    }

    #dashboard table.wifi-stats-device-list th:nth-child(4) {
        width: 45%;
    }

    #dashboard table.wifi-stats-device-list td {
        padding: 4px;
    }

    #dashboard span.db-total-device {
        font-size: 36px;
        display: inline-block;
        margin-top: -5px
    }

    #dashboard label.active-device-label {
        margin-top: 10px;
        display: inline-block;
    }

    #dashboard span.db-active-device {
        font-size: 36px;
        display: inline-block;
        margin-top: -5px
    }

    #dashboard span.db-total-device.bigger,
    #dashboard span.db-active-device.bigger {
        font-size: 42px;
        display: inline-block;
        margin-top: 5px;
        min-height: 55px;
    }

    #total_platform_number {
        width: 100%;
        text-align: right;
        font-size: 11px;
    }

    #platform_summary tbody {
        display: block;
        height: 180px;
        overflow: auto;
    }

    #platform_summary tr td:nth-child(1),
    #platform_summary tr th:nth-child(1) {
        width: 15%;
    }

    #platform_summary tr td:nth-child(2),
    #platform_summary tr th:nth-child(2) {
        width: 30%;
    }

    #platform_summary tr td:nth-child(3),
    #platform_summary tr th:nth-child(3) {
        width: 10%;
    }

    #platform_summary tr td:nth-child(4),
    #platform_summary tr th:nth-child(4) {
        width: 45%;
    }

    #platform_summary tr td.deployment:nth-child(1),
    #platform_summary tr th.deployment:nth-child(1) {
        width: 40%;
    }

    #platform_summary tr td.deployment:nth-child(2),
    #platform_summary tr th.deployment:nth-child(2) {
        width: 20%;
    }

    #platform_summary tr td.deployment:nth-child(3),
    #platform_summary tr th.deployment:nth-child(3) {
        width: 40%;
        text-align: right !important;
    }


    #platform_summary thead, #platform_summary tbody tr {
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    #platform_summary tr {
        height: 30px;
    }

    #platform_summary {
        width: 100%;
        border: 0;
    }

    #dashboard table.md-version-table tr td:nth-child(1) {
        width: 40%
    }

    #dashboard table.md-version-table tr td:nth-child(2) {
        width: 20%;
        text-align: left !important;
    }

    #dashboard table.md-version-table tr td:nth-child(3) {
        width: 40%;
    }


    #dashboard .db-radial-graphs {
        display: inline-block;
        float: left;
        width: 50%;
    }

    #dashboard .db-radial-graphs table {
        margin: 25px 10px 10px 10px;
        width: calc(100% - 20px)
    }

    #dashboard .db-radial-graphs tr {
        height: 30px;
    }

    #dashboard .db-radial-graphs tr th {
        background-color: #7367F0 !important;
        color: #fff;
    }

    #dashboard .db-radial-graphs table tr td {
        padding: 6px 4px;
    }

    #dashboard .db-radial-graphs table tr td:nth-child(1) {
        width: 30%;
    }

    #dashboard .db-radial-graphs table tr td:nth-child(2) {
        width: 70%;
        text-align: right;
    }

    #dashboard .db-radial-graphs.radial-cpe {
        float: left;
    }

    #dashboard .db-radial-graphs.radial-fw {
        float: right;
    }

    #dashboard-wifi-capacity-and-busy i.pie-good {
        color: #00E396
    }

    #dashboard-wifi-capacity-and-busy i.pie-bad {
        color: #FEB019
    }

    #dashboard-wifi-capacity-and-busy i.pie-very-bad {
        color: #FF4560;
    }

    #dashboard-wifi-coverage div.metric-line {
        display: inline-block;
        width: 100%;
        margin-top: 30px;
        text-align: center;
        font-weight: bold;
    }

    #dashboard-wifi-coverage div.metric-line.weight-400 {
        font-weight: 400 !important;
    }

    #dashboard-wifi-coverage div.metric-line span {
        font-size: 36px;
    }

    #dashboard-wifi-coverage div.metric-line span small {
        font-size: 16px;
        font-weight: 400;
    }

    #dashboard-stats-table-on-time-distribution table {
        margin-top: 10px;
        width: 100%;
    }

    #dashboard-stats-table-on-time-distribution table tr td:nth-child(1) {
        width: 10%;
        text-align: right;
    }

    #dashboard-stats-table-on-time-distribution table tr td:nth-child(2) {
        width: 60%;
    }

    #dashboard-stats-table-on-time-distribution table tr td:nth-child(3) {
        width: 30%;
    }

    #dashboard-stats-table-on-time-distribution table tr td {
        padding: 4px;
    }

    #dashboard-stats-table-on-time-distribution table tr td span.bar-line {
        display: inline-block;
        width: 0.1%;
        background-color: #7367f0;
        height: 15px;
        -webkit-border-top-right-radius: 6px;
        -webkit-border-bottom-right-radius: 6px;
        -moz-border-radius-topright: 6px;
        -moz-border-radius-bottomright: 6px;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
    }

    #dashboard div.db-line-info-container {
        width: 100% !important;
        display: inline-block !important;
        margin: 10px;
        text-align: center;
    }

    h4.label-with-sparkline {
        position: absolute;
        width: calc(100% - 30px);
        text-align: center;
        top: 50px;
        z-index: 98;
    }

    h4.label-with-sparkline span.bigger {
        margin-top: 0 !important;
    }

    div.wifi-stats-full-data-container {

    }

    div.wifi-stats-full-data-container div.content-line {
        width: 100%;
        float: left;
        display: inline-block;
    }

    div.wifi-stats-full-data-container div.fdc-top-title {
        font-size: 10px;
        color: #5E5873;
        height: 28px;
        line-height: 12px;
    }

    div.wifi-stats-full-data-container div.fdc-value {
        font-size: 22px;
        color: #5E5873;
        font-weight: bold;
    }

    div.wifi-stats-full-data-container div.fdc-value small {
        font-size: 11px;
        color: #5E5873;
        font-weight: 400 !important;
    }

    div.wifi-stats-full-data-container div.fdc-bottom-title {
        font-size: 10px;
        color: #5E5873;
        position: absolute;
        left: 15px;
        bottom: 10px;
    }

    div.wifi-stats-full-data-container div.icon-container {
        position: absolute;
        right: 10px;
        top: 15px;
    }

    div.wifi-stats-full-data-container .line-title {
        position: absolute;
        width: 100%;
        text-align: center;
        bottom: 12px;
        left: 0;
        font-size: 11px;
    }

    div.wifi-stats-full-data-container .main-btn {
        width: 80px;
        height: 80px;
        -webkit-border-radius: 40px;
        -moz-border-radius: 40px;
        border-radius: 40px;
        text-align: center;
        display: inline-block;
        line-height: 60px;
    }

    div.wifi-stats-full-data-container .fancy-card {
        padding: 10px !important;
    }

    div.wifi-stats-full-data-container .sub-data-min-height {
        min-height: 90px;
    }

    #stats-info-device .clr-0 {
        color: #85E360;
    }

    #stats-info-device .clr-1 {
        color: #69B34C;
    }

    #stats-info-device .clr-2 {
        color: #ACB334;
    }

    #stats-info-device .clr-3 {
        color: #FAB733;
    }

    #stats-info-device .clr-4 {
        color: #FF8E15;
    }

    #stats-info-device .clr-5 {
        color: #FF4E11;
    }

    #stats-info-device .clr-6 {
        color: #FF0D0D;
    }

    a.grayed-out {
        color: #d2d2d2 !important;
    }

    div.quick-info-box {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        background: rgba(200, 200, 255, 0.95);
        height: 100%;
        padding: 5px 35px 5px 20px;
        z-index: 101;
        color: white;
        display: none;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

    div.quick-info-box p {
        font-size: 12px;
        color: #7367F0;
        width: 100%;
        display: inline-block;
        margin-top: 15px;
    }

    div.quick-info-box strong {
        font-size: 14px;
        display: inline-block;
        width: 100%;
        color: #7367F0 !important;
        margin-top: 10px;
    }

    div.quick-info-box a.close-quick-info-box {
        position: absolute;
        right: 10px;
        top: 10px;
        font-size: 11px;
        color: white !important;
        cursor: pointer;
        background: linear-gradient(45deg, rgba(115, 103, 240, 1) 0%, rgba(158, 149, 245, 1) 100%) !important;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        padding: 5px;
    }

    div.quick-info-box a.close-quick-info-box:hover {
        text-decoration: none !important;
    }

    div.quick-info-box a.close-quick-info-box i {
        color: white !important;
    }

    a.trigger-quick-info-box {
        color: #333 !important;
    }

    a.trigger-quick-info-box:hover {
        text-decoration: none !important;
    }

    a.trigger-quick-info-box i.fa-question-circle {
        color: #7367F0 !important;
    }

    span.version-tag {
        font-size: 10px;
        font-weight: 400;
        display: inline-block;
        margin-top: 0px;
        color: #999 !important;
        font-weight: normal !important;
    }

    #radio-off, #device-off {
        display: none;
    }

    #radio-off .fancy-card, #device-off .fancy-card, #user-deleted .fancy-card {
        background: #cc3333;
        color: #ffffff;
        font-size: 20px;
    }

    #user_list tr.grey-row {
        color: #e0e0e0 !important;
        text-decoration: line-through;
    }

    #user-deleted a {
        color: #fff !important;
        font-weight: bold;
    }

    #user-saved .fancy-card {
        background: #7367F0;
        color: #ffffff;
        font-size: 20px;
    }

    div.permission-list label {
        width: 45%;
        margin-right: 2%;
        display: inline-block;
        margin-bottom: 8px;
        font-weight: normal;
        font-size: 11px;
    }

    #user_form textarea:focus,
    #user_form input[type="text"]:focus,
    #user_form input[type="password"]:focus,
    #user_form input[type="datetime"]:focus,
    #user_form input[type="datetime-local"]:focus,
    #user_form input[type="date"]:focus,
    #user_form input[type="month"]:focus,
    #user_form input[type="time"]:focus,
    #user_form input[type="week"]:focus,
    #user_form input[type="number"]:focus,
    #user_form input[type="email"]:focus,
    #user_form input[type="url"]:focus,
    #user_form input[type="search"]:focus,
    #user_form input[type="tel"]:focus,
    #user_form input[type="color"]:focus,
    #user_form .uneditable-input:focus {
        border-color: rgba(115, 103, 240, 0.8);
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(115, 103, 240, 0.6);
        outline: 0 none;
    }


    #user_form button, a.user-form-btn {
        font-size: 12px;
        font-weight: 500;
        color: #7367F0;
        border: 1px solid #7367F0;
        background: rgba(115, 103, 240, 0.04);
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        padding: 5px 10px;
        margin-bottom: 10px;
    }

    a.user-form-btn:hover, a.user-form-btn:focus, a.user-form-btn:active {
        background: rgba(115, 103, 240, 0.04) !important;
        color: #7367F0 !important;
        border-color: #7367F0 !important;
    }

    #user_list {
        width: 100%;
    }

    #user_list tr td, #user_list tr th {
        text-align: left;
    }

    #user_list tr th:nth-child(1) {
        width: 10%;
    }

    #user_list tr th:nth-child(2) {
        width: 25%;
    }

    #user_list tr th:nth-child(3) {
        width: 30%;
    }

    #user_list tr th:nth-child(4) {
        width: 10%;
    }

    #user_list tr th:nth-child(5) {
        width: 10%;
    }

    #user_list tr th:nth-child(6) {
        width: 15%;
    }

    #user_list tr td i.fa {
        font-size: 20px !important;
    }

    #pw-strength {
        display: inline-block;
        width: 100%;
    }

    .pw-description span {
        font-weight: bold;
    }

    #pw-strength .pw-indicator {
        border: 1px solid #e5e5e5;
        background: #7367F0;
        color: #fff;
        text-align: right;
        font-size: 10px;
        padding: 3px;
        width: 10%;
    }

    #pw-toggle label {
        font-weight: normal;
        font-size: 11px;
        float: right;
        margin: 5px auto;
    }

    #welcome-menu {
        display: inline-block;
        width: 100%;
        text-align: center;
        margin-top: 30px;
    }

    #welcome-menu a {
        display: inline-block;
        text-align: center;
        margin: 5px;
        width: 50px;
        height: 50px;
        /*
        border: 1px solid #7367f0;
        background: #7367f01F;
        */
        border-radius: 5px;
        font-size: 10px;
    }

    #welcome-menu a i {
        font-size: 20px;
        margin-bottom: 5px;
        margin-top: 15px;
    }

    #welcome-menu a span {
        display: inline-block;
        width: 100%;
    }

    #speed_chart_phyrate_speedup_compare btn-xs {
        font-size: 11px !important;
    }

    #speed_chart_phyrate_speedup_compare small {
        font-size: 9px !important;
        color: #fff !important;
    }

    /* general class definitions for pages */

    table.md-dashboard-ssid-settings {
        width: 100%;
        margin-top: 30px;
        font-size: 20px;
    }

    table.md-dashboard-ssid-settings tr:last-child td {
        border-bottom: 1px solid #ddd;
    }

    table.md-dashboard-ssid-settings tr {
        background: white !important;
    }


    table.md-dashboard-ssid-settings tr td:first-child {
        color: #666;
        font-weight: bold;
    }

    table.md-dashboard-ssid-settings tr td:first-child small {
        font-size: 11px;
        font-weight: normal;
    }

    table.md-dashboard-ssid-settings tr td:last-child {
        width: 25%;
        font-size: 24px;
        font-weight: bold;
    }

    table.md-dashboard-ssid-max-cli {
        width: 100%;
        margin-top: 30px;
        font-size: 22px;
        text-align: center;
    }

    table.md-dashboard-ssid-max-cli tr td:first-child {
        width: 12.5%;
        padding: 29px 0px;
        color: #666;
    }

    table.md-dashboard-ssid-max-cli tr td {
        vertical-align: middle !important;
        background: #fff !important;
        border: 0 !important;
        margin: 0;
        color: #666;
        border-top: 1px solid #ddd !important;
    }

    table.md-dashboard-ssid-max-cli tr:last-child td {
        border-bottom: 1px solid #ddd !important;
    }

    table.md-dashboard-ssid-max-cli tr td div {
        display: inline-block;
    }

    table.md-dashboard-ssid-max-cli tr td span {
        font-size: 16px !important;
        font-weight: bold;
        color: #222;
    }

    table.md-dashboard-ssid-max-cli tr td div.seperator {
        font-size: 24px;
        margin: 0 10px;
    }

    table.md-dashboard-ssid-max-cli td.rotate90 span {
        font-weight: bold;
        display: block;
        font-size: 11px !important;
        color: #999;
        transform: rotate(-90deg);
        /* Safari */
        -webkit-transform: rotate(-90deg);
        /* Firefox */
        -moz-transform: rotate(-90deg);
        /* IE */
        -ms-transform: rotate(-90deg);
        /* Opera */
        -o-transform: rotate(-90deg);
        /* Internet Explorer */
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }

    #no-alerts {
        display:none;
        margin:30px;
    }

    #alerts {
        width: calc(100% - 60px);
        margin: 15px 30px;
    }

    #alerts thead tr th {
        background: #f8f8f8;
        color: #5e5873;
        font-weight: bold;
        text-align: left;
    }

    #alerts thead tr th.text-center {
        text-align: center !important;
    }

    #alerts tr td {
        background-color: white !important;
        white-space: inherit !important;
    }

    #alerts tr.callout-danger td {
        background-color: #fcefef !important;
    }

    #alerts tr.callout-success td {
        background-color: #f8fdf6 !important;
    }

    #alerts tr td.category {
        width: 10%;
        font-size: 14px;
        font-weight: bold;
    }

    #alerts tr td.category label {
        width: 100px !important;
        font-size: 11px !important;
        margin-top: 10px;
        font-weight: bold;
    }

    #alerts tr td.status span {
        font-size: 10px !important;
        margin-top: 12px !important;
        padding: 5px !important;
        border: 1px dashed #333;
        border-radius: 5px !important;
        display: inline-block;
    }

    #alerts tr td.status {
        width: 10%;
    }

    #alerts tr td.status label {
        margin-top: 15px;
    }

    #alerts tr td.circle {
        width: 5%;
        background-repeat: repeat-y;
        background-position: top center;
        min-width: 48px;
        text-align: center;
    }

    #alerts tr td.date {
        width: 10%;
        font-weight: bold;
        text-align: center;
    }

    #alerts tr td.desc {
        width: 55% !important;
    }

    #alerts tr td.desc p {
        margin: 0;
        display: inline-block;
        width: 100%;
        white-space: break-spaces !important;
    }

    #alerts tr td.desc strong {
        font-size: 18px;
    }

    #alerts tr td.desc strong a {
        float: right;
        display: inline-block;
        background: #666;
        color: #fff;
        border: 0;
        font-size: 11px;
        padding: 3px 8px;
    }

    #alerts tr td.desc div.info {
        display: inline-block;
        margin-top: 5px;
        font-size: 10px;
        line-height:20px;
    }

    #alerts tr td.date strong.date-h-m {
        font-size: 18px;
    }


    #alerts table.history {
        margin-bottom: 20px;
        width: 100%;
    }

    #alerts table.history tr td:first-child {
        width: 20% !important;
    }

    #alerts table.history tr td.date {
        padding-left: 15px;
        text-align: left;
        width: 80% !important;
    }

    #alerts table.history tr td.status {
        line-height: 30px !important;
    }

    #alerts table.history tr td.status label {
        margin-top: 0 !important;
    }

    #alerts tr.details {
        display: none;
    }

    #alerts tr td span.label-primary {
        background: #e5e5e5;
        color: #333;
        font-weight: normal !important;
        padding:3px;
    }

    .container {
        width: 300px;
        margin: 0 auto;
        vertical-align: top;
        text-align: center;
    }

    .lay-right {
        float: right;
    }

    .lay-left {
        float: left;
    }

    .pad-right-0 {
        padding-right: 0 !important;
    }

    .pad-left-0 {
        padding-left: 0 !important;
    }

    .pad-right-2 {
        padding-right: 2px;
    }

    .pad-left-2 {
        padding-left: 2px;
    }

    .pad-right {
        padding-right: 5px;
    }

    .pad-left {
        padding-left: 5px;
    }

    .pad-left-10 {
        padding-left: 10px;
    }

    .pad-left-14 {
        padding-left: 14px;
    }

    .pad-bottom {
        padding-bottom: 5px;
    }

    .pad-zero {
        padding: 0px;
    }

    .pad-top {
        padding-top: 5px;
    }

    .pad-top-15 {
        padding-top: 15px !important;
    }

    .pad-top-10 {
        padding-bottom: 10px !important;
    }

    .pad-bottom-10 {
        padding-bottom: 10px !important;
    }

    .pad-top-20 {
        padding-bottom: 20px !important;
    }

    .pad-bottom-20 {
        padding-bottom: 20px !important;
    }

    .pad-top-30 {
        padding-top: 30px !important;
    }

    .pad-bottom-30 {
        padding-bottom: 30px !important;
    }


    .mar-top-5 {
        margin-top: 5px !important;
    }

    .mar-top-10 {
        margin-top: 10px !important;
    }

    .mar-top-15 {
        margin-top: 15px !important;
    }

    .mar-top-25 {
        margin-top: 25px !important;
    }

    .mar-top-30 {
        margin-top: 30px !important;
    }

    .mar-zero {
        margin: 0px !important;
    }

    .mar-top {
        margin-top: 5px;
    }

    .mar-right {
        margin-right: 5px;
    }

    .mar-left-0 {
        margin-left: 0px !important;
    }

    .mar-right-0 {
        margin-right: 0px !important;
    }

    .mar-left {
        margin-left: 5px;
    }

    .mar-left-10 {
        margin-left: 10px;
    }

    .mar-right-10 {
        margin-right: 10px;
    }

    .mar-bottom {
        margin-bottom: 5px;
    }

    .mar-bottom-10 {
        margin-bottom: 10px;
    }

    .h50p {
        height: 50px;
    }

    .h135p {
        height: 135px;
    }

    .h150p {
        height: 150px;
    }

    .h200p {
        height: 200px;
    }

    .h250p {
        height: 250px;
    }

    .h300p {
        height: 300px;
    }

    .h350p {
        height: 350px;
    }

    .h500p {
        height: 500px;
    }

    .score {
        font-size: 10px;
        text-align: center;
    }

    .color-black {
        color: black;
    }

    .border-dash {
        border: 1px dashed #333;
    }

    .popup-line {
        padding: 4px;
        line-height: 60%;
        padding: 1%;
    }

    .popup-line-label {
        padding: 4px;
        line-height: 60%;
        padding: 1%;
        width: 25%;
    }

    .popup-line-val {
        padding: 4px;
        line-height: 60%;
        padding: 1%;
        width: 75%;
    }

    .bg-red {
        background-color: red;
        color: white;
    }

    .bg-orange {
        background-color: orange;
        color: white;
    }

    .bg-yellow {
        background-color: yellow;
        color: black;
    }

    .bg-green {
        background-color: green;
        color: white;
    }

    .border-color-red {
        border-color: red !important;
    }

    .border-color-orange {
        border-color: orange !important;
    }

    .border-color-yellow {
        border-color: yellow !important;
    }

    .border-color-green {
        border-color: green !important;
    }

    .w-100 {
        width: 100% !important;
    }

    .w-inherit {
        width: inherit !important;
    }

    .no-italic {
        font-style: normal !important;
    }

    .text-white {
        color: white !important;
    }

    .width-150 {
        width: 150px;
    }

    .width-auto {
        width: auto;
    }

    .font-small {
        font-size: small;
    }

    .no-margin {
        margin: 0 !important;
    }

    .pt-0 {
        padding-top: 0 !important;
    }

    .pr-0 {
        padding-right: 0 !important;;
    }

    .pb-0 {
        padding-bottom: 0 !important;;
    }

    .pl-0 {
        padding-left: 0 !important;;
    }

    .float-right {
        float: right !important;
    }

    .float-left {
        float: left !important;
    }

    .text-left {
        text-align: left !important;
    }

    .text-right {
        text-align: right !important;
    }

    .overflow-x-hidden {
        overflow-x: hidden !important;
    }

    .overflow-y-auto {
        overflow-y: auto !important;
    }

    #data-loading {
        width: 100%;
        height: 100%;
        min-height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: rgba(255, 255, 255, 0.85);
        z-index: 999999;
        display: none !important;
    }

    #data-loading.show {
        display: block !important;
    }

    #data-loading .loader {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: #7567F0;
        font-weight: bold;
        font-size: 14px;
        text-align: center;
    }

    #data-loading img {
        width: 60px;
        height: 60px;
    }


    .nav-hasleftmenu.fixed-nav {
        position: fixed !important;
        top: 0 !important;
        left: 245px !important;
        width: calc(100% - 265px);
        margin-top:0 !important;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        z-index:9999;
    }

    body.modal-open .nav-hasleftmenu.fixed-nav {
        width: calc(100% - 280px) !important;
        z-index:1001 !important;
    }

    .nav-fullwidth.fixed-nav {
        position: fixed !important;
        top: 0 !important;
        left: 30px !important;
        width: calc(100% - 60px);
        margin-top:0 !important;
        z-index:9999;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .fixed-nav.collapsed {
        left: 86px !important;
        width: calc(100% - 101px) !important;
    }

    aside .copyright {
        color:#5E5873;
        position: fixed;
        left:10px;
        bottom:10px;
        font-size:11px;
    }

    aside .copyright span {
        color:#7367F0;
        font-weight: bold;
    }

    aside .copyright .text {
        margin-right:5px;
    }

    aside.collapsed .copyright .text {
        display:none !important;
    }

    aside .copyright div {
        float:left;
        position: relative;
    }

    aside.collapsed .copyright .version {
        width: 50px;
        text-align: center;
    }

    #deployment-device-count-tabs {
        margin-bottom:30px;
    }

    #deployment-device-count-tabs li span.short-name {
        display: block;
    }

    #deployment-device-count-tabs li span.long-name {
        display: none;
    }

    #deployment-device-count-tabs li.active span.short-name {
        display: none;
    }

    #deployment-device-count-tabs li.active span.long-name {
        display: block;
    }

    #deployment-device-count-tabs li.active a {
        color: #7367f0;
        font-weight: bold;
    }

    #dashboard-device-numbers-tabs small.last_3_months {
        position: absolute;
        right:20px;
        top:20px;
    }

    #dashboard-device-numbers-tabs hr {
        display:inline-block;
        width:50%;
        margin:20px 0;
    }

    .overflow-auto {
        overflow: auto !important;
    }

    .text-red { color: red !important}
    .text-orange { color: orange !important}
    .text-black { color: #454545 !important}

    table.fancy-table.last-col-text-left thead tr th:last-child {
        text-align: left !important;
    }

    #marketing-column-visibility button.btn-xs {
        padding:4px;
        margin-top:-2px;
        margin-left:5px;
        border-radius: 6px;
    }

    #device_type_fw_container,
    #device_type_numbers_container {
        width:200px;
        margin-left:10px;
        position: absolute;
        right:10px;
        top:10px;
    }

    #platform-container {
        position: absolute;
        right: 15px !important;
        top: 8px;
        z-index: 99;
        width:200px !important;
        font-size: 12px;
    }

    #speed_test_period_info {
        position: absolute;
        left:25px;
        top:15px;
        font-size:11px;
    }

    .desc_box_absolute {
        position: absolute;
        right:10px;
        top:5px;
        z-index: 99;
        width:15px;
        height:15px;
    }

    .desc_box_absolute_bottom {
        position: absolute;
        right:10px;
        bottom:5px;
        z-index: 99;
        width:100%;
        height:15px;
    }

    .bor-top-0 {
        border-top: 0 !important;
    }

    .mini-info-box {
        position: absolute;
        right:25px;
        top:5px;
        z-index: 99;
    }

    .mini-info-box:hover {
        cursor: help;
    }
    
    
    #dashboard-24ghz, dashboard-50ghz {
        position: relative;
    }

    #home-dashboard a.trigger-quick-info-box i.fa-question-circle {
        color: #333 !important;
    }

    #marketing-filter h4,
    #marketing-geo-filters h4 {
        margin-left:10px;
    }

    .pad-15-30 {
        padding:15px 30px !important;
    }

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

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

    #draw-device_timeline {
        padding:10px 15px !important;
    }

    #multi-rssi-label-container ul {
        display: inline-block;
        width:100%;
        text-align: center;
    }

    #multi-rssi-label-container ul li {
        display: inline-block;
        list-style: none;
        margin:5px 10px;
    }

    #software-version {
        position: absolute;
        right: 0;
        top: 45px;
        width:calc(100% - 225px);
        font-size: 11px;
    }

    #waterfall_row {
        display: none;
    }

    #waterfall-loading {
        display:none;
        text-align: center;
        position:relative;
        width:100%;
        margin:0;
        font-weight: bold;
        font-size:16px;
    }

    div.progress {
        margin-bottom:0;
    }

    div.progress .progress-bar {
        font-size:9px;
        font-weight: bold;
        color:#666666;
        background: #b8ffbf !important;
    }

    #hideLabels {
        position: absolute;
        right:20px;
        top:35px;
        z-index: 98;
    }

    #draw-local_survey .apexchart-legend-series.apexcharts-no-click {
        margin-bottom:-40px !important;
    }

    #vip_customers {}

    .label-success-dark {
        background-color: green !important;
    }