@charset "UTF-8";

:root {
    --secondary-color: #0067ab;
    --secondary-color-hover: #0067ab;
}

*, *:before, *:after {
    box-sizing: border-box;
}

.chipHover::after {
    content: "";
    z-index: 100 !important;
    opacity: 0;
}

.chipHover:hover {
    box-shadow: 0px 0px 0px 1px #515356 !important;
}

    .chipHover:hover::after {
        opacity: 1;
    }

.dataPacketField:hover {
    background: rgba(37, 153, 251, 0.1);
}

@-webkit-keyframes animate {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-moz-keyframes animate {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes animate {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


.scale-in-ver-center {
    -webkit-animation: scale-in-ver-center 0.35s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: scale-in-ver-center 0.35s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes scale-in-ver-center {
    0% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        opacity: 1;
    }
}

@keyframes scale-in-ver-center {
    0% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        opacity: 1;
    }
}

.scale-out-vertical {
    -webkit-animation: scale-out-vertical 0.35s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: scale-out-vertical 0.35s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@-webkit-keyframes scale-out-vertical {
    0% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        opacity: 1;
    }

    100% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        opacity: 1;
    }
}

@keyframes scale-out-vertical {
    0% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        opacity: 1;
    }

    100% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        opacity: 1;
    }
}

.animate {
    opacity: 0;
    -webkit-animation: animate ease-in 1;
    -moz-animation: animate ease-in 1;
    animation: animate ease-in 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    animation-duration: 0.5s;
}

    .animate.one {
        -webkit-animation-delay: 0.75s;
        -moz-animation-delay: 0.75s;
        animation-delay: 0.75s;
    }

    .animate.two {
        -webkit-animation-delay: 1s;
        -moz-animation-delay: 1s;
        animation-delay: 1s;
    }

    .animate.three {
        -webkit-animation-delay: 1.25s;
        -moz-animation-delay: 1.25s;
        animation-delay: 1.25s;
    }

#scrollToTop a {
    display: block;
    display: none;
    z-index: 999;
    opacity: .7;
    position: fixed;
    top: 99%;
    margin-top: -40px;
    right: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    min-width: 50px;
    max-width: 125px;
    line-height: 20px;
    height: 38px;
    padding: 10px;
    background-color: #000;
    font-size: 16px;
    text-align: center;
    color: #fff;
}

#scrollToTop svg {
    fill: white;
    width: 25px;
}

body {
    font-style: normal;
}

.left_col {
    background: #2A3F54;
}

.nav-sm .container.body .col-md-3.left_col {
    width: 70px;
    padding: 0;
    z-index: 9999;
    position: absolute;
    top: 40px;
}

    .nav-sm .container.body .col-md-3.left_col.menu_fixed {
        position: fixed;
        height: 100%;
    }

    .nav-sm .container.body .col-md-3.left_col .mCSB_container,
    .nav-sm .container.body .col-md-3.left_col .mCustomScrollBox {
        overflow: visible;
    }

.nav-sm .hidden-small {
    visibility: hidden;
}

.nav-sm .container.body .right_col {
    padding: 10px 20px !important;
    margin-left: 30px;
    z-index: 2;
}

.nav-sm .navbar.nav_title {
    width: 70px;
}

    .nav-sm .navbar.nav_title a span {
        display: none;
    }

    .nav-sm .navbar.nav_title a i {
        font-size: 27px;
        margin: 13px 0 0 3px;
    }

.site_title i {
    border: 1px solid #EAEAEA;
    padding: 5px 6px;
    border-radius: 50%;
}

.nav-sm .main_container .top_nav {
    display: block;
    margin-left: 70px;
    z-index: 2;
}

.nav-sm .nav.side-menu li a {
    text-align: center !important;
    font-weight: 400;
    font-size: 11px;
    padding: 5px 5px 5px 5px;
}

.nav-sm .nav.child_menu li.active,
.nav-sm .nav.side-menu li.active-sm {
    border-right: 5px solid #1ABB9C;
}

    .nav-sm ul.nav.child_menu ul,
    .nav-sm .nav.side-menu li.active-sm ul ul {
        background: none;
    }

.nav-sm > .nav.side-menu > li.active-sm > a {
    color: #1ABB9C !important;
}

.nav-sm .nav.side-menu li a i.toggle-up {
    display: none !important;
}

.nav-sm .nav.side-menu li a i {
    font-size: 25px !important;
    text-align: center;
    width: 100% !important;
    margin-bottom: 5px;
}

.nav-sm ul.nav.child_menu {
    left: 100%;
    position: absolute;
    top: 0;
    width: 210px;
    z-index: 4000;
    background: #3E5367;
    display: none;
}

    .nav-sm ul.nav.child_menu li {
        padding: 0 10px;
    }

        .nav-sm ul.nav.child_menu li a {
            text-align: left !important;
        }

.nav-sm .profile {
    display: none;
}

.menu_section {
    margin-bottom: 35px;
}

    .menu_section h3 {
        padding-left: 23px;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: .5px;
        font-weight: bold;
        font-size: 11px;
        margin-bottom: 0;
        margin-top: 0;
        text-shadow: 1px 1px #000;
    }

    .menu_section > ul {
        margin-top: 10px;
    }

.main_menu span.fa {
    float: right;
    text-align: center;
    margin-top: 5px;
    font-size: 10px;
    min-width: inherit;
    color: #C4CFDA;
}

.active a span.fa {
    text-align: right !important;
    margin-right: 4px;
}

.nav-sm .menu_section {
    margin: 0;
}

    .nav-sm span.fa,
    .nav-sm .menu_section h3 {
        display: none;
    }

.nav-sm li li span.fa {
    display: inline-block;
}

.nav_menu {
    float: left;
    margin-bottom: 0px;
    width: 100%;
    position: relative;
}

.nav-md .container.body .col-md-3.left_col {
    width: 211px;
    padding-left: 10px;
    position: absolute;
    display: -ms-flexbox;
    display: flex;
    z-index: 2;
    top: 40px;
}

    .nav-md .container.body .col-md-3.left_col.menu_fixed {
        height: 100%;
        position: fixed;
    }

body .container.body .right_col {
    background: #ebebf0 !important;
}

.nav-md .container.body .right_col {
    padding: 0px 15px 40px 15px !important;
    min-height: auto;
}

.nav_title {
    width: 210px;
    float: left;
    background: #F7F7F7;
    border-radius: 0;
}

nav {
    background: white;
}

.top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 15px;
    position: relative;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.05);
}

.siteLogo_container {
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 992px) {
    .top_nav .navbar-right {
    }
}

@media (max-width: 991px) {
    .nav-md .container.body .right_col, .nav-md .container.body {
        width: 100%;
        margin: 0;
    }

        .nav-md .container.body .col-md-3.left_col {
            display: none;
        }

        .nav-md .container.body .right_col {
            width: 100%;
            padding-right: 0;
        }

    .right_col {
        padding: 0px !important;
    }

    .top_nav .navbar-right {
        margin-right: 0px !important;
    }
}

@media (max-width: 1200px) {
    .x_title h2 {
        width: 50% !important;
        font-size: 17px;
    }

    .tile, .graph {
        zoom: 85%;
        height: inherit;
    }
}

@media (max-width: 1270px) and (min-width: 192px) {
    .x_title h2 small {
        display: none;
        width: 33% !important;
        font-size: 17px;
    }
}

.left_col .mCSB_scrollTools {
    width: 6px;
}

.left_col .mCSB_dragger {
    max-height: 400px !important;
}

.blue {
    color: #3498DB;
}

.purple {
    color: #9B59B6;
}

.green {
    color: #1ABB9C;
}

.aero {
    color: #9CC2CB;
}

.red {
    color: #E74C3C;
}

.dark {
    color: #34495E;
}

.border-blue {
    border-color: #3498DB !important;
}

.border-purple {
    border-color: #9B59B6 !important;
}

.border-green {
    border-color: #1ABB9C !important;
}

.border-aero {
    border-color: #9CC2CB !important;
}

.border-red {
    border-color: #E74C3C !important;
}

.border-dark {
    border-color: #34495E !important;
}

.bg-white {
    background: #fff !important;
    border: 1px solid #fff !important;
    color: #73879C;
}

.bg-green {
    background: #1ABB9C !important;
    border: 1px solid #1ABB9C !important;
    color: #fff;
}

.bg-red {
    background: #E74C3C !important;
    border: 1px solid #E74C3C !important;
    color: #fff;
}

.bg-blue {
    background: #3498DB !important;
    border: 1px solid #3498DB !important;
    color: #fff;
}

.bg-orange {
    background: #F39C12 !important;
    border: 1px solid #F39C12 !important;
    color: #fff;
}

.bg-purple {
    background: #9B59B6 !important;
    border: 1px solid #9B59B6 !important;
    color: #fff;
}

.bg-blue-sky {
    background: #50C1CF !important;
    border: 1px solid #50C1CF !important;
    color: #fff;
}

.container {
    width: 100%;
    padding: 0;
}

.navbar-nav > li > a, .navbar-brand, .navbar-nav > li > a {
    color: #fff !important;
}

.top_nav .nav > li > a:focus, .top_nav .nav > li > a:hover, .top_nav .nav .open > a, .top_nav .nav .open > a:focus, .top_nav .nav .open > a:hover {
    background: #D9DEE4;
}

body {
    color: #515356 !important;
    background: #2A3F54;
    font-family: Helvetica, Arial, sans-serif;
    font-size: small;
}

.main_container .top_nav {
    display: block;
}

.table-head-row {
    background: #e3e3e3;
    font-weight: 600;
    padding: 10px;
    border-radius: 6px;
}

.table-row {
    padding: 10px;
    border-bottom: 1px solid #e3e3e3;
}

.data-statistic-number-fill {
    width: fit-content;
    background: var(--primary-color);
    color: white;
    padding: 2px;
    border-radius: 4px;
}

.data-statistic-number-fill-red {
    width: fit-content;
    background: #ff4d2d;
    color: white;
    padding: 2px;
    border-radius: 4px;
}

.no-padding {
    padding: 0 !important;
}

.page-title {
    width: 100%;
    height: 65px;
    padding: 10px 0;
}

    .page-title .title_left {
        width: 45%;
        float: left;
        display: block;
    }

        .page-title .title_left h3 {
            margin: 9px 0;
        }

    .page-title .title_right {
        width: 55%;
        float: left;
        display: block;
    }

        .page-title .title_right .pull-right {
            margin: 10px 0;
        }

.fixed_height_320 {
    height: 320px;
}

.fixed_height_390 {
    height: 390px;
}

.fixed_height_200 {
    height: 200px;
}

.overflow_hidden {
    overflow: hidden;
}

.progress-bar-dark {
    background-color: #34495E !important;
}

.progress-bar-gray {
    background-color: #BDC3C7 !important;
}

table.no-margin .progress {
    margin-bottom: 0;
}

.main_content {
    padding: 10px 20px;
}

.col-md-55 {
    width: 50%;
    margin-bottom: 10px;
}

@media (min-width: 768px) {
    .col-md-55 {
        width: 20%;
    }
}

@media (min-width: 992px) {
    .col-md-55 {
        width: 20%;
    }
}

@media (min-width: 1200px) {
    .col-md-55 {
        width: 20%;
    }
}

@media (min-width: 192px) and (max-width: 1270px) {
    table.tile_info span.right {
        margin-right: 7px;
        float: left;
    }
}

.center-margin {
    margin: 0 auto;
    float: none !important;
}

.col-md-55, .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    position: relative;
    min-height: 1px;
    float: left;
    padding-right: 0px;
    padding-left: 2px;
    color: #515356 !important;
}

.col-2AB {
    flex: 0 0 auto;
    width: 9%;
}

.row {
    margin-right: -10px;
    margin-left: -10px;
}

.grid_slider .col-md-6 {
    padding: 0 40px;
}

h1, .h1, h2, .h2, h3, .h3 {
    margin-top: 10px;
    margin-bottom: 10px;
    color: #515356;
}

a {
    color: #5A738E;
    text-decoration: none;
}

    a, a:visited, a:focus, a:active, :visited, :focus, :active, .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
        outline: 0;
    }

        a:hover, a:focus {
            text-decoration: none;
        }

.navbar {
    margin-bottom: 0;
}

.navbar-header {
    background: #34495E;
}

.navbar-right {
    margin-right: 0;
}

.top_nav .navbar-right {
    margin: 0;
    margin-top: 13px !important;
    float: right;
}

    .top_nav .navbar-right li {
        display: inline-block;
        float: right;
    }

@media (min-width: 480px) {
    .top_nav .navbar-right li {
        position: relative;
    }
}

.top_nav .dropdown-menu li {
    width: 100%;
}

.marginLeftOnLgScreen {
    margin-left: 1rem;
}

.top_nav .dropdown-menu li a {
    width: 100%;
    padding: 15px 20px;
}

.dropdown-menu {
    border-radius: .5rem !important;
    border: none !important;
}

.notiMenuItem:hover {
    opacity: 0.9;
}

.top_nav li a i {
    font-size: 15px;
}

.navbar-static-top {
    position: fixed;
    top: 0;
    width: 100%;
}

.sidebar-header {
    border-bottom: 0;
    margin-top: 46px;
}

    .sidebar-header:first-of-type {
        margin-top: 0;
    }

.nav.side-menu > li {
    position: relative;
    display: block;
    cursor: pointer;
}

    .nav.side-menu > li > a {
        margin-bottom: 6px;
    }

        .nav.side-menu > li > a:hover {
            color: #F2F5F7 !important;
        }

        .nav.side-menu > li > a:hover, .nav > li > a:focus {
            text-decoration: none;
            background: transparent;
        }

.nav.child_menu {
    display: none;
}

    .nav.child_menu li:hover,
    .nav.child_menu li.active {
        background-color: rgba(255, 255, 255, 0.06);
    }

    .nav.child_menu li {
        padding-left: 36px;
    }

.nav-md ul.nav.child_menu li:before {
    bottom: auto;
    content: "";
    height: 8px;
    left: 23px;
    margin-top: 15px;
    position: absolute;
    right: auto;
    width: 8px;
    z-index: 1;
    border-radius: 50%;
}

.nav-md ul.nav.child_menu li:after {
    bottom: 0;
    content: "";
    left: 27px;
    position: absolute;
    top: 0;
}

.nav.side-menu > li > a, .nav.child_menu > li > a {
    color: white;
}

.nav.child_menu li li:hover,
.nav.child_menu li li.active {
    background: none;
}

.nav.child_menu li li a:hover,
.nav.child_menu li li a.active {
    color: #fff;
}

.nav > li > a {
    position: relative;
    display: block;
    padding: 5px 5px 5px 5px;
}

.nav.side-menu > li.current-page, .nav.side-menu > li.active {
    border-right: 5px solid #1ABB9C;
}

.nav li.current-page {
    background: rgba(255, 255, 255, 0.05);
}

.nav li li li.current-page {
    background: none;
}

.nav li li.current-page a {
    color: #fff;
}

.nav.side-menu > li.active > a {
    text-shadow: rgba(0, 0, 0, 0.25) 0 -1px 0;
    background: linear-gradient(#334556, #2C4257), #2A3F54;
    box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0, inset rgba(255, 255, 255, 0.16) 0 1px 0;
}

.navbar-brand, .navbar-nav > li > a {
    font-weight: bold;
    color: #ECF0F1 !important;
    margin-left: 0 !important;
    line-height: 32px;
}

.nav > li > a:hover, .nav > li > a:focus, .nav > li > a:active {
    background-color: transparent;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2);
}

.toggle {
    float: left;
    margin: 0;
    padding-top: 15px;
    width: 45px;
}

.toggle-handle {
    border-width: medium !important;
    border-color: white !important;
    background-color: #515653;
    box-shadow: 1px 1px 5px 0px black;
}

.toggle.btn {
    min-height: 27px !important;
}

.toggle a {
    padding: 15px 15px 0;
    margin: 0;
    cursor: pointer;
}

    .toggle a i {
        font-size: 26px;
    }

.nav.child_menu > li > a {
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    padding: 9px;
}

.panel_toolbox {
    float: right;
}

    .panel_toolbox > li {
        float: left;
        cursor: pointer;
    }

        .panel_toolbox > li > a {
            padding: 5px;
            color: #C5C7CB;
            font-size: 14px;
        }

            .panel_toolbox > li > a:hover {
                background: #F5F7FA;
            }

.main_menu_side {
    padding: 0;
}

.jqstooltip {
    background: #34495E !important;
    width: 30px !important;
    height: 22px !important;
    text-decoration: none;
}

.tooltip {
    display: block !important;
}

article.media {
    width: 100%;
}


h2 {
    font-size: 18px;
    font-weight: 400;
}


.accordion .panel {
    margin-bottom: 5px;
    border-radius: 0;
    border-bottom: 1px solid #efefef;
}

.accordion .panel-heading {
    background: #F2F5F7;
    padding: 13px;
    width: 100%;
    display: block;
}

.accordion .panel:hover {
    background: #F2F5F7;
}

.x_panel {
    position: relative;
    width: 100%;
    padding: 10px 10px !important;
    display: inline-block;
    background: #fff;
    border: 1px solid #E6E9ED;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    opacity: 1;
    transition: all .2s ease;
    border: none;
}

.x_title {
    padding: 1px 0px 6px;
    margin-bottom: 10px;
}

.x_card_title {
    font-weight: 700;
    font-size: 15px;
}

.x_title .filter {
    width: 40%;
    float: right;
}

.x_title h2 {
    margin: 0px;
    float: left;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

    .x_title h2 small {
        margin-left: 10px;
    }

.x_title span {
    color: #515356;
}

.x_content {
    position: relative;
    width: 100%;
    float: left;
    clear: both;
    margin-top: 5px;
}

    .x_content h4 {
        font-size: 16px;
        font-weight: bold;
    }

legend {
    padding-bottom: 7px;
}

.demo-placeholder {
    height: 280px;
}

.bulk-actions {
    display: none;
}

table.countries_list {
    width: 100%;
}

    table.countries_list td {
        padding: 0 10px;
        line-height: 30px;
        border-top: 1px solid #eeeeee;
    }

.dataTables_paginate a {
    background: #ff0000;
}

.dataTables_wrapper {
    position: relative;
    clear: both;
    zoom: 1;
}

.dataTables_processing {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250px;
    height: 30px;
    margin-left: -125px;
    margin-top: -15px;
    padding: 14px 0 2px 0;
    border: 1px solid #ddd;
    text-align: center;
    color: #999;
    font-size: 14px;
    background-color: white;
}

.dataTables_length {
    width: 40%;
    float: left;
}

.dataTables_filter {
    width: 50%;
    float: right;
    text-align: right;
}

.dataTables_info {
    width: 60%;
    float: left;
}

.dataTables_paginate {
    float: right;
    text-align: right;
}

table.dataTable th.focus,
table.dataTable td.focus {
    outline: 2px solid #1ABB9C !important;
    outline-offset: -1px;
}

table.display {
    margin: 0 auto;
    clear: both;
    width: 100%;
}

    table.display thead th {
        padding: 8px 18px 8px 10px;
        border-bottom: 1px solid black;
        font-weight: bold;
        cursor: pointer;
    }

    table.display tfoot th {
        padding: 3px 18px 3px 10px;
        border-top: 1px solid black;
        font-weight: bold;
    }

    table.display tr.heading2 td {
        border-bottom: 1px solid #aaa;
    }

    table.display td {
        padding: 3px 10px;
    }

        table.display td.center {
            text-align: center;
        }

    table.display thead th:active, table.display thead td:active {
        outline: none;
    }

.dataTables_scroll {
    clear: both;
}

.dataTables_scrollBody {
    *margin-top: -1px;
    -webkit-overflow-scrolling: touch;
}

.top .dataTables_info {
    float: none;
}

.clear {
    clear: both;
}

.dataTables_empty {
    text-align: center;
}

tfoot input {
    margin: 0.5em 0;
    width: 100%;
    color: #444;
}

    tfoot input.search_init {
        color: #999;
    }

td.group {
    background-color: #d1cfd0;
    border-bottom: 2px solid #A19B9E;
    border-top: 2px solid #A19B9E;
}

td.details {
    background-color: #d1cfd0;
    border: 2px solid #A19B9E;
}

table.display tr.even.row_selected td {
    background-color: #B0BED9;
}

table.display tr.odd.row_selected td {
    background-color: #9FAFD1;
}

div.box {
    height: 100px;
    padding: 10px;
    overflow: auto;
    border: 1px solid #8080FF;
    background-color: #E5E5FF;
}

ul.msg_list li {
    background: #f7f7f7;
    padding: 5px;
    display: -ms-flexbox;
    display: flex;
    margin: 6px 6px 0;
    width: 96% !important;
}

    ul.msg_list li:last-child {
        margin-bottom: 6px;
        padding: 10px;
    }

    ul.msg_list li a {
        padding: 3px 5px !important;
    }

        ul.msg_list li a .image img {
            border-radius: 2px 2px 2px 2px;
            -webkit-border-radius: 2px 2px 2px 2px;
            float: left;
            margin-right: 10px;
            width: 11%;
        }

        ul.msg_list li a .time {
            font-size: 11px;
            font-style: italic;
            font-weight: bold;
        }

        ul.msg_list li a .message {
            display: block !important;
            font-size: 11px;
        }

.dropdown-menu.msg_list span {
    white-space: normal;
}

.dropdown-menu > li > a {
    color: #5A738E;
}

.info-number .badge {
    font-size: 0px;
    font-weight: normal;
    padding: 5px;
    position: absolute;
    top: 0.2px;
    border-radius: 50px;
    margin-left: 15px;
}

.sidebar-footer {
    bottom: 0px;
    clear: both;
    display: block;
    padding: 5px 0 0 0;
    position: fixed;
    width: 230px;
    background: #2A3F54;
}

    .sidebar-footer a {
        padding: 7px 0 3px;
        text-align: center;
        width: 25%;
        font-size: 17px;
        display: block;
        float: left;
        background: #172D44;
    }

        .sidebar-footer a:hover {
            background: #425567;
        }

a.user-profile {
    color: #5E6974 !important;
}

.user-profile img {
    width: 29px;
    height: 29px;
    border-radius: 50%;
}

.main_menu .fa {
    width: 40px;
    opacity: .99;
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a.star {
    color: #428bca !important;
}

.buttons {
    padding-left: 10px;
}

a.gen-btn-2 {
    padding: 5px 20px;
}

a.gen-btn {
    padding: 5px 20px;
}

.editor.btn-toolbar {
    zoom: 1;
    background: #F7F7F7;
    margin: 5px 2px;
    padding: 3px 0;
    border: 1px solid #EFEFEF;
}

.input-group {
    margin-bottom: 10px;
}

.ln_solid {
    border-top: 1px solid #e5e5e5;
    color: #ffffff;
    background-color: #ffffff;
    height: 1px;
    margin: 20px 0;
}

span.section {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
    font-size: 21px;
    line-height: inherit;
    color: #333;
    border: 0;
    border-bottom: 1px solid #e5e5e5;
}


.form-horizontal .control-label {
    padding-top: 8px;
}

legend {
    font-size: 18px;
    color: inherit;
}

.form-horizontal .form-group {
    margin-right: 0;
    margin-left: 0;
}

.form-group {
    margin-bottom: 5px;
}

.editor-error,
.validation-summary-errors,
.field-validation-error,
.field-validation-error-custom,
.input-validate-error {
    font-weight: bold;
    color: #ff0000;
}

p.parsley-success {
    color: #468847;
    background-color: #DFF0D8;
    border: 1px solid #D6E9C6;
}

p.parsley-error {
    color: #B94A48;
    background-color: #F2DEDE;
    border: 1px solid #EED3D7;
}

ul.parsley-errors-list {
    list-style: none;
    color: #E74C3C;
    padding-left: 0;
}

input.parsley-error, textarea.parsley-error, select.parsley-error {
    background: #FAEDEC;
    border: 1px solid #E85445;
}

.btn-group .parsley-errors-list {
    display: none;
}

.bad input, .bad select, .bad textarea {
    border: 1px solid #CE5454;
    box-shadow: 0 0 4px -2px #CE5454;
    position: relative;
    left: 0;
    -moz-animation: .7s 1 shake linear;
    -webkit-animation: 0.7s 1 shake linear;
}

.item input, .item textarea {
    transition: 0.42s;
}

.item .alert {
    float: left;
    margin: 0 0 0 20px;
    padding: 3px 10px;
    color: #FFF;
    border-radius: 3px 4px 4px 3px;
    background-color: #CE5454;
    max-width: 170px;
    white-space: pre;
    position: relative;
    left: -15px;
    opacity: 0;
    z-index: 1;
    transition: 0.15s ease-out;
}

    .item .alert::after {
        content: '';
        display: block;
        height: 0;
        width: 0;
        border-color: transparent #CE5454 transparent transparent;
        border-style: solid;
        border-width: 11px 7px;
        position: absolute;
        left: -13px;
        top: 1px;
    }

.item.bad .alert {
    left: 0;
    opacity: 1;
}

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

.well .markup {
    background: #fff;
    color: #777;
    position: relative;
    padding: 45px 15px 15px;
    margin: 15px 0 0 0;
    background-color: #fff;
    border-radius: 0 0 4px 4px;
    box-shadow: none;
}

    .well .markup::after {
        content: "Example";
        position: absolute;
        top: 15px;
        left: 15px;
        font-size: 12px;
        font-weight: bold;
        color: #bbb;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

/* ***** autocomplete ***** */
.autocomplete-suggestions {
    border: 1px solid #e4e4e4;
    background: #F4F4F4;
    cursor: default;
    overflow: auto;
}

.autocomplete-suggestion {
    padding: 2px 5px;
    font-size: 1.2em;
    white-space: nowrap;
    overflow: hidden;
}

.autocomplete-selected {
    background: #f0f0f0;
}

.autocomplete-suggestions strong {
    font-weight: normal;
    color: #3399ff;
    font-weight: bolder;
}

.Benny::-webkit-input-placeholder {
    color: #d1d1d1;
}

.Benny::-moz-placeholder {
    color: #d1d1d1;
}

.Benny:-ms-input-placeholder {
    color: #d1d1d1;
}

.Benny::-ms-input-placeholder {
    color: #d1d1d1;
}

.Benny::placeholder {
    color: #d1d1d1;
}

/* ***** /autocomplete *****/
/* ***** buttons ********/
.btn {
    border-color: transparent;
}

a.btn-success, a.btn-primary, a.btn-warning, a.btn-danger {
    color: #fff;
}

.btn-success {
    background: #26B99A;
    border: 1px solid #169F85;
}

    .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success {
        background: #169F85;
    }

.btn-grey {
    color: #333333;
    background-color: #EEEEEE;
    border-color: transparent !important;
    min-width: 65px;
}

    .btn-grey:hover, .btn-grey:focus, .btn-grey:active, .btn-grey.active, .open .dropdown-toggle.btn-grey {
        color: #333333;
        background-color: #DDDDDD;
        border-color: transparent !important;
    }

.btn-dark {
    color: #E9EDEF;
    background-color: #4B5F71 !important;
    border-color: transparent !important;
}

    .btn-dark:hover, .btn-dark:focus, .btn-dark:active, .btn-dark.active, .open .dropdown-toggle.btn-dark {
        color: #FFFFFF;
        background-color: #394D5F !important;
        border-color: transparent !important;
    }

/* ***** /buttons *******/
/* *********  /form design  **************************** */
/* *********  form textarea  **************************** */
textarea {
    padding: 10px;
    vertical-align: top;
    width: 200px;
}

.btn_ {
}

/* *********  /form textarea  **************************** */
/* *********  glyphicons  **************************** */
.bs-glyphicons {
    margin: 0 -10px 20px;
    overflow: hidden;
}

    .bs-glyphicons li {
        float: left;
        width: 25%;
        height: 115px;
        padding: 10px;
        font-size: 10px;
        line-height: 1.4;
        text-align: center;
        background-color: #f9f9f9;
        border: 1px solid #fff;
    }

    .bs-glyphicons .glyphicon {
        margin-top: 5px;
        margin-bottom: 10px;
        font-size: 24px;
    }

    .bs-glyphicons .glyphicon-class {
        display: block;
        text-align: center;
        word-wrap: break-word;
    }

    .bs-glyphicons li:hover {
        color: #fff;
        background-color: #1ABB9C;
    }

@media (min-width: 768px) {
    .bs-glyphicons {
        margin-right: 0;
        margin-left: 0;
    }

        .bs-glyphicons li {
            width: 12.5%;
            font-size: 12px;
        }
}

/* *********  /glyphicons  **************************** */
/* *********  form tags input  **************************** */
.tagsinput {
    border: 1px solid #CCC;
    background: #FFF;
    padding: 6px 6px 0;
    width: 300px;
    overflow-y: auto;
}

span.tag {
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    display: block;
    float: left;
    padding: 5px 9px;
    text-decoration: none;
    background: #1ABB9C;
    color: #F1F6F7;
    margin-right: 5px;
    font-weight: 500;
    margin-bottom: 5px;
    font-family: helvetica;
}

    span.tag a {
        color: #F1F6F7 !important;
    }

.tagsinput span.tag a {
    font-weight: bold;
    color: #82ad2b;
    text-decoration: none;
    font-size: 11px;
}

.tagsinput input {
    width: 80px;
    margin: 0px;
    font-family: helvetica;
    font-size: 13px;
    border: 1px solid transparent;
    padding: 3px;
    background: transparent;
    color: #000;
    outline: 0px;
}

.tagsinput div {
    display: block;
    float: left;
}

.tags_clear {
    clear: both;
    width: 100%;
    height: 0px;
}

.not_valid {
    background: #FBD8DB !important;
    color: #90111A !important;
}

a:focus {
    outline: none;
}

.byline {
    -webkit-font-smoothing: antialiased;
    font-style: italic;
    font-size: .9375em;
    line-height: 1.3;
    color: #aab6aa;
}

ul.social li {
    border: 0;
}

.chart {
    position: relative;
    display: inline-block;
    width: 110px;
    height: 110px;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
}

    .chart canvas {
        position: absolute;
        top: 0;
        left: 0;
    }

.sensor_chart_add_new {
    display: flex !important;
    align-items: center;
    margin: 10px 0 0 0;
}

    .sensor_chart_add_new button svg {
        margin-right: 5px;
    }

    .sensor_chart_add_new p {
        font-size: 1.6rem;
        margin: 0 20px;
    }

.chartSelectedText {
    font-size: 0.9em;
    text-decoration: underline;
    color: #0067ab;
}

.chartUnSelectedText {
    font-size: 0.8em;
    text-decoration: none;
    color: #0067ab;
}

/* *********  /widgets  **************************** */

.timezoneDisplay {
    display: flex;
    align-items: center;
}

.divider {
    border-bottom: 1px solid #ddd;
    margin: 10px;
}

ul.messages {
    padding: 0;
    list-style: none;
}

    ul.messages li, .tasks li {
        border-bottom: 1px dotted #e6e6e6;
        padding: 8px 0;
    }

        ul.messages li img.avatar, img.avatar {
            height: 32px;
            width: 32px;
            float: left;
            display: inline-block;
            border-radius: 2px;
            padding: 2px;
            background: #f7f7f7;
            border: 1px solid #e6e6e6;
        }

        ul.messages li .message_date {
            float: right;
            text-align: right;
        }

        ul.messages li .message_wrapper {
            margin-left: 50px;
            margin-right: 40px;
        }

            ul.messages li .message_wrapper h4.heading {
                font-weight: 600;
                margin: 0;
                cursor: pointer;
                margin-bottom: 10px;
                line-height: 100%;
            }

            ul.messages li .message_wrapper blockquote {
                padding: 0px 10px;
                margin: 0;
                border-left: 5px solid #eee;
            }

.caption {
    padding: 9px 5px;
    background: #F7F7F7;
}

    .caption p {
        margin-bottom: 5px;
    }

.view {
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
}

    .view .mask, .view .content {
        position: absolute;
        width: 100%;
        overflow: hidden;
        top: 0;
        left: 0;
    }

    .view img {
        display: block;
        position: relative;
    }

    .view .tools {
        text-transform: uppercase;
        color: #fff;
        text-align: center;
        position: relative;
        font-size: 17px;
        padding: 3px;
        background: rgba(0, 0, 0, 0.35);
        margin: 43px 0 0 0;
    }

        .view .tools a {
            display: inline-block;
            color: #FFF;
            font-size: 18px;
            font-weight: 400;
            padding: 0 4px;
        }

    .view p {
        font-family: Georgia, serif;
        font-size: 12px;
        position: relative;
        color: #fff;
        padding: 10px 20px 20px;
        text-align: center;
    }

    .view a.info {
        display: inline-block;
        text-decoration: none;
        padding: 7px 14px;
        background: #000;
        color: #fff;
        text-transform: uppercase;
        box-shadow: 0 0 1px #000;
    }

.morris-hover {
    position: absolute;
    z-index: 1000;
}

    .morris-hover.morris-default-style {
        padding: 6px;
        color: #666;
        background: rgba(243, 242, 243, 0.8);
        border: solid 2px rgba(195, 194, 196, 0.8);
        font-family: sans-serif;
        font-size: 12px;
        text-align: center;
    }

        .morris-hover.morris-default-style .morris-hover-row-label {
            font-weight: bold;
            margin: 0.25em 0;
        }

        .morris-hover.morris-default-style .morris-hover-point {
            white-space: nowrap;
            margin: 0.1em 0;
        }

.login_image {
    background-image: linear-gradient(to top right, var(--primary-color), #0067ab, #054c7b);
    display: flex;
    justify-content: center;
    align-items: center;
}

.login_form {
    z-index: 22;
}

#signup:target ~ .login_wrapper .registration_form, #signin:target ~ .login_wrapper .login_form {
    z-index: 22;
    animation-name: fadeInLeft;
    animation-delay: .1s;
}

#signup:target ~ .login_wrapper .login_form, #signin:target ~ .login_wrapper .registration_form {
    animation-name: fadeOutLeft;
}

.animate {
    -webkit-animation-duration: 0.5s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: both;
    -moz-animation-duration: 0.5s;
    -moz-animation-timing-function: ease;
    -moz-animation-fill-mode: both;
    -o-animation-duration: 0.5s;
    -o-animation-timing-function: ease;
    -o-animation-fill-mode: both;
    -ms-animation-duration: 0.5s;
    -ms-animation-timing-function: ease;
    -ms-animation-fill-mode: both;
    animation-duration: 0.5s;
    animation-timing-function: ease;
    animation-fill-mode: both;
}

.left {
    float: left;
}

.alignleft {
    float: left;
    margin-right: 15px;
}

.alignright {
    float: right;
    margin-left: 15px;
}

.clearfix:after, form:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.setpause {
    cursor: pointer;
}

button {
    cursor: pointer;
}

.gen-btn {
    cursor: pointer;
}

#username {
    background-position: 10px 10px !important;
}

#password {
    background-position: 10px -53px !important;
}

.button {
    background: #f7f9fa;
    background: linear-gradient(top, #f7f9fa 0%, #f0f0f0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f9fa', endColorstr='#f0f0f0', GradientType=0);
    -ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
    -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
    border-radius: 0 0 5px 5px;
    border-top: 1px solid #CFD5D9;
    padding: 15px 0;
}

    .button a {
        background: url(http://cssdeck.com/uploads/media/items/8/8bcLQqF.png) 0 -112px no-repeat;
        color: #7E7E7E;
        font-size: 17px;
        padding: 2px 0 2px 40px;
        text-decoration: none;
        transition: all 0.3s ease;
    }

        .button a:hover {
            background-position: 0 -135px;
            color: #00aeef;
        }

header {
    width: 100%;
}

.voiceBtn {
    width: 20px;
    color: transparent;
    background-color: transparent;
    transform: scale(2, 2);
    -webkit-transform: scale(2, 2);
    -moz-transform: scale(2, 2);
    border: transparent;
    cursor: pointer;
    box-shadow: none;
    -webkit-box-shadow: none;
}

div[data-role="editor-toolbar"] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.dropdown-menu a {
    cursor: pointer;
}

fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

.cropper .img-container,
.cropper .img-preview {
    background-color: #f7f7f7;
    width: 100%;
    text-align: center;
}

.cropper .img-container {
    min-height: 200px;
    max-height: 516px;
    margin-bottom: 20px;
}

@media (min-width: 768px) {
    .cropper .img-container {
        min-height: 516px;
    }
}

.cropper .img-container > img {
    max-width: 100%;
}

.cropper .docs-preview {
    margin-right: -15px;
}

.cropper .img-preview {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    overflow: hidden;
}

    .cropper .img-preview > img {
        max-width: 100%;
    }

.cropper .preview-lg {
    width: 263px;
    height: 148px;
}

.cropper .preview-md {
    width: 139px;
    height: 78px;
}

.cropper .preview-sm {
    width: 69px;
    height: 39px;
}

.cropper .preview-xs {
    width: 35px;
    height: 20px;
    margin-right: 0;
}

.cropper .docs-data > .input-group {
    margin-bottom: 10px;
}

    .cropper .docs-data > .input-group > label {
        min-width: 80px;
    }

    .cropper .docs-data > .input-group > span {
        min-width: 50px;
    }

.cropper .docs-buttons > .btn,
.cropper .docs-buttons > .btn-group,
.cropper .docs-buttons > .form-control {
    margin-right: 5px;
    margin-bottom: 10px;
}

.cropper .docs-toggles > .btn,
.cropper .docs-toggles > .btn-group,
.cropper .docs-toggles > .dropdown {
    margin-bottom: 10px;
}

.cropper .docs-tooltip {
    display: block;
    margin: -6px -12px;
    padding: 6px 12px;
}

    .cropper .docs-tooltip > .icon {
        margin: 0 -3px;
        vertical-align: top;
    }

.cropper .tooltip-inner {
    white-space: normal;
}

.cropper .btn-upload .tooltip-inner,
.cropper .btn-toggle .tooltip-inner {
    white-space: nowrap;
}

.cropper .btn-toggle {
    padding: 6px;
}

    .cropper .btn-toggle > .docs-tooltip {
        margin: -6px;
        padding: 6px;
    }

@media (max-width: 400px) {
    .cropper .btn-group-crop {
        margin-right: -15px !important;
    }

        .cropper .btn-group-crop > .btn {
            padding-left: 5px;
            padding-right: 5px;
        }

        .cropper .btn-group-crop .docs-tooltip {
            margin-left: -5px;
            margin-right: -5px;
            padding-left: 5px;
            padding-right: 5px;
        }
}

.cropper .docs-options .dropdown-menu {
    width: 100%;
}

    .cropper .docs-options .dropdown-menu > li {
        padding: 3px 20px;
    }

        .cropper .docs-options .dropdown-menu > li:hover {
            background-color: #f7f7f7;
        }

        .cropper .docs-options .dropdown-menu > li > label {
            display: block;
        }

.cropper .docs-cropped .modal-body {
    text-align: center;
}

    .cropper .docs-cropped .modal-body > img,
    .cropper .docs-cropped .modal-body > canvas {
        max-width: 100%;
    }

.cropper .docs-diagram .modal-dialog {
    max-width: 352px;
}

.cropper .docs-cropped canvas {
    max-width: 100%;
}

.actionBar {
    width: 100%;
    border-top: 1px solid #ddd;
    padding: 10px 5px;
    text-align: right;
    margin-top: 10px;
}

    .actionBar .buttonDisabled {
        cursor: not-allowed;
        pointer-events: none;
        opacity: .65;
        filter: alpha(opacity=65);
        box-shadow: none;
    }

    .actionBar a {
        margin: 0 3px;
    }

.progress {
    border-radius: 0;
}

.progress-bar-info {
    background-color: #3498DB;
}

.progress-bar-success {
    background-color: #26B99A;
}

.progress.progress_sm {
    border-radius: 0;
    margin-bottom: 18px;
    height: 10px !important;
}

    .progress.progress_sm .progress-bar {
        height: 10px !important;
    }

.alert-info {
    color: #E9EDEF;
    background-color: rgba(52, 152, 219, 0.88);
    border-color: rgba(52, 152, 219, 0.88);
}

.alert-warning {
    color: #E9EDEF;
    background-color: rgba(243, 156, 18, 0.88);
    border-color: rgba(243, 156, 18, 0.88);
}

.ui-pnotify.dark .ui-pnotify-container {
    color: #E9EDEF;
    background-color: rgba(52, 73, 94, 0.88);
    border-color: rgba(52, 73, 94, 0.88);
}

.table-condensed > thead > tr > th, .table-condensed > tbody > tr > th, .table-condensed > tfoot > tr > th, .table-condensed > thead > tr > td, .table-condensed > tbody > tr > td, .table-condensed > tfoot > tr > td {
    padding: 5px 7px;
    text-align: center;
}

/** /Dropzone.js **/
.dropzone {
    min-height: 300px;
    border: 1px solid #e5e5e5;
}

/** /Dropzone.js **/
/* Glance Views */
.glance-name {
    font-size: 14px;
    width: 100%;
    top: 0;
    overflow: hidden;
}

.glance-reading {
    font-size: small;
    overflow: hidden;
    top: 0;
}

@media (min-width: 991px) {
    .glance-lastDate {
        float: left !important;
    }
}

.glance-text {
    margin: .2em .8em;
    position: relative;
    font-size: smaller;
}

@media (max-width: 992px) {
    .glance-text {
        margin: 2px;
    }
}

@media (min-width: 690px) {
    .col-md-4 {
        width: 33.33333333%;
    }
}

.glanceView .battIcon img, .glanceView .sigIcon img {
    height: 30px;
}

.glanceView .sensor {
    overflow: hidden;
    text-align: center;
    border-radius: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
}

.glanceView .statusIcon {
    max-height: 30px;
    max-width: 30px;
    padding-left: 10px;
    text-align: right;
    z-index: 10;
}

.glanceView table tr td table tr {
    padding: .8em 0 .8em 0;
}

.glanceView tr {
    padding: .8em 0 .8em 0;
}

.helpIcon {
    min-width: 20px;
    max-width: 20px;
}

.sensorIcon, .gatewayIcon {
    color: #999;
    font-size: 1.2em;
}

.sensorStatusInactive, .sensorStatusSleeping, .sensorStatusOffline, .gatewayStatusInactive, .gatewayStatusSleeping, .gatewayStatusOffline {
    background-color: #a4a4a47a !important;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    color: #999;
    width: 50px;
    height: 50px;
}

.sensorStatusOK, .gatewayStatusOK {
    background-color: #43BE5F;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    color: #fff;
    width: 50px;
    height: 50px;
}

.sensorStatusAlert, .gatewayStatusAlert {
    background-color: #EE3D18;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    box-shadow: inset 0 0 0 1px #EE3D18;
    color: #fff;
    width: 50px;
    height: 50px;
}

.sensorStatusWarning, .gatewayStatusWarning {
    background-color: #ffc30b;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    color: #999;
    width: 50px;
    height: 50px;
}

.battIcon {
    color: #666;
    font-size: x-small;
}

.batteryLow {
    color: #ffc300;
}

.batteryCritical {
    color: #c80202;
}

.iconSignal {
    color: limegreen;
    font-size: 1.2em;
}

.holder .icon::before {
    margin: 0px;
}

a.inactive:link, a.inactive:hover {
    color: #666;
    font-weight: bold;
}

@media (max-width: 580px) {
    .extra {
        display: none;
    }
}

.view-btns {
    display: flex;
    align-items: center;
    background: white;
    height: 50px;
    width: 99%;
    justify-content: space-around;
    margin-right: -5px;
    margin-bottom: 0px;
    font-size: 13px !important;
}

.deviceView_btn_row {
    background: white;
    padding: 10px;
    background: white;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.view-btns_container {
    margin-top: 15px;
    margin-bottom: 30px;
    padding: 0px;
    display: flex;
    align-items: center;
}

.btn-active-fill {
    background: var(--primary-color);
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1);
}

.btn-fill {
    width: 100%;
    padding: 10px;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100px;
    min-width: 70px;
}

span.extra {
    display: none;
    white-space: nowrap;
}

.view-btns div.btn-active-fill span.extra {
    display: block;
}

.view-btns div.active-hover-fill span.extra {
    display: block;
}

.view-btns div.btn-active-fill {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: fit-content;
    color: var(--mainMenu-text-color);
    width: fit-content;
    font-size: 15px;
    text-align: center;
}

@media (min-width: 850px) {
    .btn-active-fill svg {
        margin-bottom: 10px;
    }
}

.active-btn-icon-fill {
    fill: #fff;
}

.active-btn-icon-fill-notactive {
    fill: #515356;
}

.editor-field, .editor-field input {
    width: 100%;
}

.row.display-flex {
    display: flex;
    flex-wrap: wrap;
}

    .row.display-flex > [class*='col-'] {
        display: flex;
        flex-direction: column;
    }

.gridPanel {
    position: relative;
    height: 100%;
    margin-bottom: 0px;
    margin-left: 0px;
    display: inline-block;
    background: #fff;
    border-bottom: 0px solid #E6E9ED;
    opacity: 1;
    transition: all .2s ease;
    padding: 0px;
    box-shadow: rgb(9 30 66 / 25%) 0px 4px 8px -2px, rgb(9 30 66 / 8%) 0px 0px 0px 1px;
}

.noPad {
    padding: 0;
}

.status {
    position: absolute;
    border-radius: 30%;
    opacity: 1;
    width: 12px;
    height: 12px;
    pointer-events: none;
    margin-top: -15px;
    margin-left: 6px;
}

.divTable {
    display: table;
    width: 100%;
    height: 100%;
}

.divCell {
    display: table-cell;
    vertical-align: middle;
    text-align: left;
}

.divCellCenter {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.formtitle {
    font-weight: normal;
    font-size: 1.0em !important;
    margin-bottom: 0.75em;
    color: #515356;
}

.scrollOverview {
    overflow-x: scroll;
}

.siteLogo {
    height: 40px;
    position: relative;
    left: 0px;
}

.historyReading {
    font-size: small;
    padding-top: 4px;
    max-width: 40%;
}

.historyDate {
    font-size: small;
    padding-top: 4px;
    padding-left: 30px;
}


@media (max-width: 320px) {
    .historyReading {
        padding-top: 9px;
    }

    .historyDate {
        padding-top: 9px;
    }

    .mapEdit {
        font-size: 1em;
    }

    .col-md-55, .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
        position: relative;
        min-height: 1px;
        float: left;
        padding-right: 5px;
        padding-left: 5px;
    }

    .x_panel {
        padding: 5px 5px;
    }
}


@media (max-width: 375px) {
    .helpIco {
        font-size: 1.5em;
    }

    .bold {
        font-weight: bold;
    }

    .mdBox input {
        width: 150px;
        margin-right: 5px;
        padding: 3px;
        font-size: 1.1em;
    }

        .mdBox input[type="checkbox"] {
            width: 40px;
        }

    .mdBox select {
        width: 150px;
        margin-right: 5px;
        padding: 3px;
        font-size: 1.1em;
    }

    .lgBox input {
        width: 100%;
        margin-right: 5px;
        padding: 3px;
        font-size: 1.1em;
    }

    .lgBox select {
        width: 200px;
        margin-right: 5px;
        padding: 3px;
        font-size: 1.1em;
    }

    input[type="checkbox"] {
        -moz-border-radius: 12px;
        -webkit-border-radius: 12px;
        border-radius: 12px;
    }

    .left {
        text-align: left;
    }

    .right {
        text-align: right;
    }

    .center {
        text-align: center;
    }

    .group.display-flex {
        display: flex;
        flex-wrap: wrap;
    }

        .group.display-flex > [class*='col-'] {
            display: flex;
            flex-direction: column;
        }

    .creditCount {
        color: #808080;
        font-size: 15px;
    }

    .iconActive {
        color: #009900;
    }

    .iconNotActive {
        color: #73879C;
    }

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

.main_container {
    position: relative;
    display: grid;
    z-index: 0;
    grid-template-columns: 1fr 7fr;
    width: inherit;
    max-width: 2000px;
}

.main_container__content {
    display: flex;
}

.main_leftBar {
    overflow-y: hidden;
    background: var(--primary-color);
    padding-top: 20px;
    min-width: 220px;
}

.main_topBar {
    grid-column: 1/7;
    z-index: 2;
}

.menuHover {
    padding: 7px 12px 4px 12px;
    color: var(--mainMenu-text-color);
    display: flex;
    align-items: center;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
    height: 40px;
}

.activebtn {
    color: var(--primary-color);
    background: white;
}

.menuHover:hover > img {
    color: var(--primary-color);
}

#MainRefresh {
    width: 100%;
}

    #MainRefresh div {
        background: transparent;
        background-color: transparent !important;
    }


.top-nav {
    width: 100%;
}

.main_container__content .right_col {
    width: 100%;
}

.right_col {
    overflow-x: hidden;
    height: 100%;
}

::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

.info-number .badge {
    left: unset;
}

.top-nav {
    display: grid;
    grid-template-columns: 1fr 5fr 1fr;
}

.siteLogo_container {
    grid-column: 2/3;
    grid-row: 1/2;
}

.notifications-wrapper {
    grid-column: 1/2;
    grid-row: 1/2;
}

.navbar-right {
    grid-column: 3/4;
    grid-row: 1/2;
}

.inner_leftBar_bottom {
    padding-top: 85px;
}

.menuLogout {
    color: white;
    display: flex;
    align-items: center;
    font-size: 16px;
    cursor: pointer;
}

.bsInset {
    border-radius: .3rem;
    padding: 4px;
}

.trigger-device__top {
    padding: 5px 10px;
    border-radius: 8px 8px 0px 0px;
    margin: -10px -10px 0px -10px;
}

.card_container__top__icon {
    fill: var(--primary-color);
}

.card_container__body__content {
    margin-top: 10px;
}

.color-2 {
    color: var(--primary-color);
}

.b-color-2 {
    background: var(--primary-color);
}

.btn-color-2 {
    background: var(--primary-color);
    background-color: var(--primary-color);
}

    .btn-color-2:hover {
        background: #3b85c3;
    }

.gen-btn {
    padding: 0px 12px;
    border: none;
    color: white;
    background-color: var(--primary-color);
    background: var(--primary-color);
    border-radius: 4px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    cursor: pointer;
    padding: 0px 10px;
    font-size: 15px;
}

    .gen-btn:hover {
        color: white;
        background-color: #3b85c3;
        background: #3b85c3;
    }

    .gen-btn:focus {
        color: white;
    }

@media (min-width: 850px) and (max-width: 992px) {
    .device_detailsRow {
        display: flex;
        flex-direction: column;
    }
}

.btn-on {
    background: var(--primary-color);
    color: white;
    width: 75px;
    height: 35px;
    border: none;
    border-radius: 8px;
    margin-left: -2px;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.5);
}

.btn-off {
    background: transparent;
    color: black;
    width: 75px;
    height: 30px;
    border: none;
    border-radius: 8px;
}

.gen-btn-2 {
    padding: 0px 20px;
    border: none;
    color: white;
    background-color: var(--primary-color);
    background: var(--primary-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    font-size: 13px;
    cursor: pointer;
}

    .gen-btn-2:hover {
        cursor: pointer;
        color: white;
        background-color: #054c7b;
        background: #054c7b;
    }

.eventIcon_container svg {
    min-width: 40px;
    max-height: 40px;
    max-width: 40px;
}


.grey-back {
    padding: 4px 12px;
    border: none;
    color: #707070;
    background-color: #e6e6e8;
    background: #e6e6e8;
    border-radius: 4px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.sub-list__container {
    max-height: 200px;
    overflow: scroll;
}

.pd5 {
    padding-bottom: 5px;
}

.dfac {
    display: flex;
    align-items: center;
}

.dfjcsb {
    display: flex;
    justify-content: space-between;
}

.dfjcsbac {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sensorRow .gridPanel {
    background: transparent;
}

.glance-text, .glance-reading, .glance-name, .glance-lastDate {
    overflow: visible;
}

.top-add-btn-row {
    display: flex;
    justify-content: flex-end;
}


.top-add-btn-row-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 0px;
}

.add-btn:focus, .add-btn:hover, .add-btn:active {
    color: white;
}

.bottom-add-btn-row {
    bottom: 3vh;
    right: 3vw;
    position: fixed;
    border-radius: 100%;
    padding: 0px;
    box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.network-sidebar {
    display: flex;
    flex-direction: column;
    max-width: 250px;
    padding: 0px;
    padding-top: 50px;
}

.network-sidebar__title {
    font-size: 16px;
    font-weight: bold;
    padding-left: 10px;
    padding-bottom: 15px;
}

.secondary-sidenav {
    background: white;
    margin-top: -40px;
    margin-left: -20px;
    box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.1);
    min-height: 100vh;
    height: 105%;
    overflow-y: scroll;
    z-index: 1;
}

.sensorList_main {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.network-sidebar li {
    padding: 10px;
}

ul {
    list-style-type: none;
}

.disp-none {
    display: none;
}

.device_detailsRow {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 20px;
}

.device_detailsRow__card {
    min-height: 180px;
    padding: 0;
    width: 100%;
}

.device_detailsRow__card__inner {
    min-height: 180px;
}

.view-btns {
    margin-right: 0px;
    width: 100%;
    padding: 10px 50px;
}

.x_title h2 {
    width: -webkit-fill-available;
    font-size: 16px;
}

.dashboardCard_row {
    display: flex;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    gap: 1rem;
}

.dashboardCard {
    margin: 0px 5px;
    width: auto;
    padding: 5px 10px;
    border-radius: 6px;
    color: white;
    display: flex;
    padding: 1em;
    min-width: 150px;
}

.dashboardCard__title {
    color: white;
    font-weight: bold;
    color: white;
    width: 65%;
}

.dashboardCard__title__type {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    color: white;
    font-size: 17px;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 10px;
    margin-top: 0;
    transition: all 2s ease-in-out;
}

.dashboardCard__theme_icon {
    display: flex;
    width: 100%;
    justify-content: end;
}

.dashboardCard__title__type > svg {
    fill: white;
}

.refresh {
    background: transparent;
    margin-top: 20px;
}

.dc_alertingSensors {
    background-color: #E24E4E;
    background-image: linear-gradient(to bottom right, #E24E4E, #F19A9A);
}

.glance-lastDate {
    background: #e3e3e3;
    border-radius: 6px;
    padding: 3px 5px;
    width: fit-content;
}

.btnRight_row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

    .btnRight_row a {
        color: white;
        font-size: 15px;
        padding: 7px 20px;
        border-radius: 6px;
        background: var(--primary-color);
    }

        .btnRight_row a:hover {
            background: #3b85c3;
            color: white;
        }

.openNav {
    width: 100%;
    padding: 20px;
}

.admin-spacer {
    height: 1px;
    width: 100%;
    background: white;
    margin: 20px 0px;
}

.no_sensor_title {
    font-size: 20px;
    font-weight: bold;
    color: #6B18D6;
}

.no-sensor-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: transparent;
    margin-bottom: 20px;
}

.add-btn {
    text-decoration: none;
    background: var(--primary-color);
    color: white;
    border-radius: 6px;
    padding: 8px 20px;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: .2s ease;
}

    .add-btn:hover {
        transition: .2s ease;
        color: white;
        background: #054c7b;
    }

.add-btn-2 {
    text-decoration: none;
    background: var(--primary-color);
    color: white;
    border-radius: 6px;
    padding: 8px 20px;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: .2s ease;
}

    .add-btn-2:hover, .add-btn-2:visited, .add-btn-2:active, .add-btn-2:focus {
        color: white;
    }

    .add-btn-2:hover {
        transition: .2s ease;
        color: white;
        background: #3b85c3;
    }

.sensorRow {
    display: flex;
    align-items: center;
    border-radius: 10px;
    margin: 2px 10px;
}

    .sensorRow:hover {
        box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
        z-index: 10;
    }

.icon-dark {
    padding-bottom: 7px;
}

.icon-fill {
    fill: white;
}

.icon-fill-stroke {
    stroke: white;
}

.icon-fill-stroke-grey {
    stroke: #515356;
}

.card_container__icon-stroke-1 {
    stroke: var(--primary-color);
}

.card_container__icon-stroke-2 {
    stroke: var(--primary-color);
}

.card_container__icon-fill-1 {
    fill: var(--primary-color);
}

.card_container__icon-color-1 {
    color: var(--primary-color);
}

.card_container__icon-fill-2 {
    fill: var(--primary-color);
}

.card_container__icon-stroke-3 {
    stroke: #9E66FE;
}

.card_container__icon-fill-3 {
    fill: #9E66FE;
}

.card_container__icon-fill-4 {
    fill: #21ce99;
}

.icon-fill-opposite {
    fill: var(--primary-color);
}

.menuActive {
    background: white;
    color: var(--primary-color);
}

.menuHover:hover #svg_rules .cls-1, .cls-2 {
    fill: var(--mainMenu-hover-color);
    stroke: var(--mainMenu-hover-color);
}

.menuHover:hover #svg_rules .cls-2 {
    fill: var(--mainMenu-hover-color);
    stroke: var(--mainMenu-hover-color);
}


.menuActive #svg_rules .cls-1, .cls-2 {
    fill: var(--primary-color);
    stroke: var(--primary-color);
}

.menuActive #svg_rules .cls-2 {
    fill: var(--primary-color);
    stroke: var(--primary-color);
}

.menuActive .icon-fill-stroke {
    stroke: var(--primary-color);
}

.activeSensorNav {
    border-radius: 50px 0px 0px 50px;
    padding-left: 12px;
    position: relative;
}

button {
    margin: 0px;
}

.card_container {
    background: white;
    padding: 10px;
}

.networkList_link {
    padding: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #515356;
}

.networkList_link__arrow {
    fill: white;
}

.networkList_link.active {
    color: #47494a;
    font-weight: bold;
    border-bottom: 2px solid var(--primary-color);
}

.networkList_link[selected=selected] {
    color: #47494a;
    font-weight: bold;
    border-bottom: 2px solid var(--primary-color);
}

.networkList_link.active .networkList_link__arrow {
    fill: #47494a;
}

.settingsContainer {
    margin-top: 20px;
    display: flex;
    width: 100%;
}

.settingsContainer__aSettings {
    padding: 0px 20px;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.settingsContainer__aDetails {
    padding: 0px 20px;
    width: 50%;
}

.btnRow_right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.btnRow_right__btn {
    border: none;
    background: var(--primary-color);
    background-color: var(--primary-color);
    color: white;
    border-radius: 6px;
    font-size: 15px;
}

    .btnRow_right__btn:hover {
        background: #3b85c3;
        color: white;
    }

.permissions_input {
    padding: 0px;
    border-radius: 6px;
    text-align: center;
    margin: 0px 10px;
}

.permissions_input_row {
    display: flex;
    justify-content: flex-start;
}

.permissions_input_row_container {
    max-width: 250px;
}

.aSettings__title {
    font-weight: 550;
    color: var(--primary-color);
    font-size: 16px;
    display: flex;
    margin-top: 5px;
    padding: 5px;
}

.aSettings__input input, .aSettings__input_input {
    padding-left: 15px !important;
    border-radius: 4px;
    max-width: 230px;
}

.tz {
    border-radius: 6px;
    cursor: pointer;
    background: #D0D0DB;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*    width: fit-content();*/
    margin-bottom: 5px;
}

.tzLabel {
    padding: 10px;
    border-radius: 6px;
    margin: 0px;
    cursor: pointer;
}

.tzInput:checked + .tzLabel {
    background: var(--primary-color);
    color: white;
    box-shadow: 0px 5px 5px 1.2px rgba(0, 0, 0, 0.3);
    font-size: 12px;
    transform: scale(1.1);
}

.tzInput {
    display: none;
}

.ov-scroll250 {
    max-height: 250px;
    overflow-y: scroll;
    margin-top: 20px;
    overflow-x: hidden;
}

.tzSelect {
    width: 250px;
    height: 30px;
    border: none;
    box-shadow: 2px 3px 9px 0px rgba(148, 148, 148, 0.6);
    border-radius: 4px;
    cursor: pointer;
}

.mbsc-control {
    padding-left: 10px;
    width: 185px;
    height: 30px;
    border: none;
    box-shadow: 2px 3px 9px 0px rgba(148, 148, 148, 0.6);
    border-radius: 4px;
    cursor: pointer;
}

.row-d-col {
    display: flex;
    flex-direction: column;
}

.row-d-col__title {
    width: 100%;
    padding-bottom: 10px;
}

.wfit-cont {
    width: fit-content;
}

.innerCard__title-small {
    font-weight: 600;
    color: #707070;
    padding-bottom: 10px;
}

.glance-lastDate {
    min-width: max-content;
    margin-bottom: 4px;
}

.eventsList {
    height: 6.1rem;
    width: 330px;
    cursor: pointer;
    margin-bottom: 10px;
    margin: .5rem;
    overflow: hidden;
}


.eventsList2 {
    height: 6.625rem;
    width: 330px;
    cursor: pointer;
    margin-bottom: 10px;
    margin: 4px;
}

    .eventsList2:hover {
        box-shadow: 2px 3px 9px 0px rgba(148, 148, 148, 0.9) !important;
    }

.eventsList:hover {
    box-shadow: rgb(0 0 0 / 40%) 0px 2px 4px, rgb(0 0 0 / 30%) 0px 7px 13px -3px, rgb(0 0 0 / 1%) 0px -3px 0px inset;
}

#eventList {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.eventlistContainer {
    width: 100%;
    display: flex;
    justify-content: center;
}

.dfjcac {
    display: flex;
    justify-content: center;
    align-items: center;
}

.eventIcon {
    margin-left: 30px;
    margin-bottom: -10px;
    position: relative;
}

.eventIcon__btn {
    height: 36px;
    width: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    box-shadow: 2px 3px 9px 0px rgba(148, 148, 148, 0.6);
}

.glance-text > .glance-name {
    font-size: .8rem;
    overflow-wrap: anywhere;
    transition: all 3s ease-in-out;
}

.glance-text > .glance-reading {
    font-size: 11px;
}

.eventIcon_container {
    margin: 5px;
}

a.eventIcon_container {
    cursor: pointer;
}

.eventIconStatus {
    height: 12px;
    width: 12px;
    border-radius: 50px;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
}

#aPreferences, #aPreferences_other {
    display: none;
}

.top-row-btn-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.btn-group {
    display: flex;
    align-items: center;
}

.view-btns-half {
    padding: 10px 20px;
}

.schedule-time-toggle div {
    border-radius: 50px;
    border: none;
}

.toggle-off.active {
    background-color: #ddd;
    background: #ddd;
}

.schedule-time-toggle .toggle-on {
    color: white;
    background: #333333;
    background-color: #333333;
    border: none;
    height: inherit;
}

    .schedule-time-toggle .toggle-on:hover {
        background: #262626;
        background-color: #262626;
    }

.schedule-time-toggle .toggle-off {
    height: inherit;
}

.toggle-group {
    background: none;
    border-radius: 50px;
    border: none;
}

.toggle-handle {
    border-radius: 50px;
    background: white;
    border: white;
    width: 40px;
    height: -webkit-fill-available;
}

    .toggle-handle:hover {
        background: white;
        background-color: white;
    }

    .toggle-handle:active:focus {
        background: white;
        background-color: white;
    }

    .toggle-handle:focus {
        background: black;
        background-color: black;
    }

    .toggle-handle:active {
        background: black;
        background-color: black;
    }

.eventHistoryList {
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding-left: 10px;
}

.date-time_container {
    background: #e3e3e3;
    border-radius: 6px;
    padding: 2px;
    text-align: center;
}

.list-icon_fill-1 {
    fill: #9E66FE;
    color: #9E66FE;
}

.list-icon_fill-2 {
    fill: var(--primary-color);
    color: var(--primary-color);
}

.list-icon_fill-3 {
    fill: var(--primary-color);
    color: var(--primary-color);
}

.list-icon_fill-4 {
    fill: var(--primary-color);
    color: var(--primary-color);
}

.list-icon_fill-5 {
    fill: var(--primary-color);
    color: var(--primary-color);
}

.list-icon_fill-6 {
    fill: var(--primary-color);
    color: var(--primary-color);
}

.list-icon_fill-7 {
    fill: var(--primary-color);
    color: var(--primary-color);
}

.dfjcc {
    display: flex;
    justify-content: center;
}

.dfjcfe {
    display: flex;
    justify-content: flex-end;
}

.dfjcfeac {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.dfjcfsac {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.dffdc {
    display: flex;
    flex-direction: column;
}

.df {
    display: flex;
}

.trigger-card {
    margin-bottom: 20px;
    border-radius: 6px;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1);
}

.trigger-card__title {
    padding: 10px;
    background: var(--option-menu-color);
    border-radius: 6px 6px 0px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--options-text-color);
    flex-wrap: wrap;
}

.trigger-card__innerTitle {
    padding-left: 10px;
}

.mobiDate_container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.mobiDate_container__start {
    border: none;
    border-bottom: 1px solid #e3e3e3;
    margin: 0px 3px;
    text-align: center;
}

.mobiDate_container__end {
    border: none;
    border-bottom: 1px solid #e3e3e3;
    margin: 0px 3px;
    text-align: center;
}

.mobiDate_container__text {
    color: #e3e3e3;
}

#MondayStartTimeHour, #MondayStartTimeMinute,
#MondayStartTimeAM, #MondayEndTimeHour,
#MondayEndTimeMinute, #MondayEndTimeAM,
#TuesdayStartTimeHour, #TuesdayStartTimeMinute,
#TuesdayStartTimeAM, #TuesdayEndTimeHour,
#TuesdayEndTimeMinute, #TuesdayEndTimeAM,
#WednesdayStartTimeHour, #WednesdayStartTimeMinute,
#WednesdayStartTimeAM, #WednesdayEndTimeHour,
#WednesdayEndTimeMinute, #WednesdayEndTimeAM,
#ThursdayStartTimeHour, #ThursdayStartTimeMinute,
#ThursdayStartTimeAM, #ThursdayEndTimeHour,
#ThursdayEndTimeMinute, #ThursdayEndTimeAM,
#FridayStartTimeHour, #FridayStartTimeMinute,
#FridayStartTimeAM, #FridayEndTimeHour,
#FridayEndTimeMinute, #FridayEndTimeAM,
#SaturdayStartTimeHour, #SaturdayStartTimeMinute,
#SaturdayStartTimeAM, #SaturdayEndTimeHour,
#SaturdayEndTimeMinute, #SaturdayEndTimeAM,
#SundayStartTimeHour, #SundayStartTimeMinute,
#SundayStartTimeAM, #SundayEndTimeHour,
#SundayEndTimeMinute, #SundayEndTimeAM {
    min-width: 100px;
}

.mgn-tb-10 {
    margin-top: 10px;
    margin-bottom: 10px;
}

.triggerDevice {
    display: flex;
    width: fit-content;
}

.sensor_chart1 {
    display: flex;
    flex-wrap: wrap;
}

.noCursor {
    cursor: default;
}

.triggerDevice__status {
    border-radius: 50px;
    width: 50px;
    min-width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.triggerDevice__icon {
    width: 37px;
    max-height: 28px;
    margin: 0 11px 0 0;
}

.sensorCards .triggerDevice__name {
    text-align: left;
}

.listHeader {
    height: 10px;
    display: flex;
    align-items: center;
}

.listHeader__titles {
    font-size: 15px;
    font-weight: 600;
}

.notifyUsers__name {
    font-size: 13px;
}

.notifyUsers_row {
    margin-bottom: 6px;
    border-bottom: 1px solid #eee;
}

.cke_top, cke_bottom, #cke_1_top, #cke_1_bottom {
    background: white;
    background-color: white;
}

#cke_editor1 {
    width: auto;
    border-radius: 8px;
    overflow: auto;
}

.top-split {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.icon-app37 {
    font-size: 10px;
}

.multi-steps > li.is-active:before, .multi-steps > li.is-active ~ li:before {
    content: counter(stepNum);
    font-family: inherit;
    font-weight: 700;
}

.multi-steps > li.is-active:after, .multi-steps > li.is-active ~ li:after {
    background-color: #ededed;
}

.multi-steps {
    display: table;
    table-layout: fixed;
    width: 100%;
    margin-bottom: 20px;
    background: white;
    padding: 20px 0;
}

    .multi-steps > li {
        counter-increment: stepNum;
        text-align: center;
        display: table-cell;
        position: relative;
        color: var(--primary-color);
    }

        .multi-steps > li:before {
            content: '\f00c';
            content: '\2713;';
            content: '\10003';
            content: '\10004';
            content: '\2713';
            display: block;
            margin: 0 auto 4px;
            background-color: #fff;
            width: 36px;
            height: 36px;
            line-height: 32px;
            text-align: center;
            font-weight: bold;
            z-index: 1;
            position: relative;
            border-width: 2px;
            border-style: solid;
            border-color: var(--primary-color);
            border-radius: 50%;
        }

        .multi-steps > li:after {
            content: '';
            height: 2px;
            width: 100%;
            background-color: var(--primary-color);
            position: absolute;
            top: 16px;
            left: 50%;
            z-index: 0;
        }

        .multi-steps > li:last-child:after {
            display: none;
        }

        .multi-steps > li.is-active:before {
            background-color: #fff;
            border-color: var(--primary-color);
        }

        .multi-steps > li.is-active ~ li {
            color: #808080;
        }

            .multi-steps > li.is-active ~ li:before {
                background-color: #ededed;
                border-color: #ededed;
            }

.triggerCondition_set {
    display: flex;
    align-items: center;
}

.displayN {
    display: none;
}

.displayB {
    display: block;
}

.innerCard-holder {
    display: flex;
    width: 100%;
}

.innerCard-holder__icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.innerCard-holder__data {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    padding: 5px 20px;
}

.innerCard-holder__data__gs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.innerCard-holder__data__ed {
    display: flex;
    align-items: center;
}

.network_small-title {
    font-size: 13px;
    font-weight: bold;
    color: #707070;
}

.grey-container {
    background: #e3e3e3;
    padding: 0px 12px;
    border-radius: 4px;
    font-size: 12px;
}

.menu_dropdown_item {
    display: flex;
    align-items: center;
    padding: 5px;
}

.menu_dropdown_icons_items {
    display: flex;
    justify-content: space-between !important;
    align-items: center;
    padding: .5rem;
}

.date-pick-noIcon {
    border: none;
    cursor: pointer;
    color: var(--primary-color);
}

.menu_dropdown_item span {
    display: flex;
}

.mini-card {
    padding: 5px;
}

.tableCard_shadow {
    background-color: white;
    margin: 0px;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1);
}

#ReportParameterTypeID {
    width: 250px;
    height: 30px;
    border: none;
    box-shadow: 2px 3px 9px 0px rgba(148, 148, 148, 0.6);
    border-radius: 4px;
}

    #ReportParameterTypeID:focus {
        box-shadow: 2px 3px 9px 0px rgba(148, 148, 148, 0.6) !important;
    }

.wallet__card {
    height: 180px;
    width: 300px;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-image: linear-gradient(to right, black, #333);
}

.wallet__card__top {
    width: 85%;
    padding-top: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wallet__card__top__number {
    color: white;
    font-size: 16px;
}

.wallet__card__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wallet__card__bottom__name {
    color: white;
}

.wallet__card__bottom__exp {
    color: white;
}

.wallet__option__card {
    height: 150px;
    width: 300px;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-image: linear-gradient(to right, black, #333);
}

.wallet__option__card__top {
    width: 85%;
    padding-top: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wallet__option__card__top__number {
    color: white;
    font-size: 16px;
}

.wallet__option__card__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wallet__option__card__bottom__name {
    color: white;
}

.wallet__option__card__bottom__exp {
    color: white;
}

.search-tabs__tab__active {
    background: transparent;
    border-bottom: 3px solid var(--primary-color);
    font-weight: bold;
    color: var(--primary-color);
    padding: 10px;
    margin: 0px 10px;
}

.search-tabs__tab {
    font-weight: bold;
    margin: 0px 10px;
}

    .search-tabs__tab:hover {
        color: var(--primary-color);
    }

.icon-fill-grey {
    fill: #515356;
}

.main-page-icon-color {
    color: var(--primary-color);
}

.main-page-icon-fill {
    fill: var(--primary-color);
}

.main-page-icon-stroke {
    stroke: var(--primary-color);
}

.networkList {
    display: flex;
    overflow-x: scroll;
    height: 40px;
    margin: 3px 27px;
}

.networkList__network {
    border-radius: 3px;
    margin: 0px 4px;
    display: flex;
    align-items: center;
    height: 25px;
    white-space: nowrap;
    cursor: pointer;
    width: 100px;
    background: white;
}

.networkList__network {
    margin: auto 4px;
}

    .networkList__network:hover {
        background: #eee;
    }

.network_btn_selected:hover {
    background: var(--primary-color);
    opacity: .6 !important;
}

.networkList__network__inner {
    text-overflow: ellipsis;
    width: 185px;
    overflow: hidden;
    height: 20px;
    padding: 2px 5px;
}

.loginBtn__container {
    padding-left: 0px;
}

.loginBtn__container__btn {
    z-index: 10;
    border-radius: 8px;
    border: none;
    background-color: var(--primary-color);
    color: white !important;
    font-weight: 600;
    font-size: 18px;
    position: relative;
}

    .loginBtn__container__btn:active {
        outline: none;
        background: transparent;
        color: transparent !important;
    }

    .loginBtn__container__btn:focus {
        outline: none;
        background: transparent;
        color: transparent !important;
    }

.loginBtn__container__spinner {
    width: 100%;
    z-index: 4;
    padding-right: 10px;
    width: 14%;
    margin-top: -35px;
}

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

.recipients-circle {
    height: 50px;
    line-height: 2.5;
}

.network_btn_white {
    background-color: white;
    color: #515356;
    width: 185px;
}

.network_btn_selected {
    background-color: var(--primary-color);
    color: white;
    width: 185px;
}

.sm-icon svg {
    height: 12px !important;
    width: 12px !important;
}


.dash-icon-fill {
    fill: var(--primary-color);
}

.main_leftBar__sideBar {
    background: white;
    width: 150px;
    height: 113vh;
    margin-top: -65px;
    padding-top: 100px;
    width: 60vw;
    max-width: 250px;
}

.inner_leftBar {
    height: 100vh;
    align-items: flex-start;
    justify-content: space-between;
}

.card-battery-icon::before {
    font-size: 20px;
}

.icon-signal-0:before, .icon-signal-1:before,
.icon-signal-2:before, .icon-signal-3:before,
.icon-signal-4:before, .icon-signal-5:before {
    font-size: 15px;
}

.horizontalScroll::-webkit-scrollbar {
    width: 50px;
    height: 10px;
    cursor: pointer;
    overflow: hidden;
}

.horizontalScroll::-webkit-scrollbar-track {
    border-radius: 10px;
    cursor: pointer;
}

.horizontalScroll::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 10px;
    cursor: pointer;
}

    .horizontalScroll::-webkit-scrollbar-thumb:hover {
        background: #707070;
        cursor: pointer;
    }

.verticalScroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    cursor: pointer;
}

.verticalScroll::-webkit-scrollbar-track {
    border-radius: 10px;
    cursor: pointer;
    background-color: transparent;
}

.verticalScroll::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 10px;
    cursor: pointer;
}

    .verticalScroll::-webkit-scrollbar-thumb:hover {
        background: #707070;
        cursor: pointer;
    }

div.toggle.btn.btn-primary, label.btn.btn-default.active.toggle-off {
    border-radius: 50px;
}

div.toggle.btn.btn-default.off:hover {
    border: none;
    border-radius: 50px;
}

.main_leftBar__active {
    min-width: 400px;
    display: flex;
    justify-content: space-between;
}

    .main_leftBar__active .split_mobile {
        min-width: 200px;
    }

#sidenav-secondary {
    width: 200px;
}

.width75 {
    width: 75% !important;
}

#horizontal-list {
    padding-left: 0px;
    margin-bottom: 20px;
}

.ui-tabs-active .ui-tabs-anchor {
    color: white;
    background: var(--primary-color);
    font-weight: bold;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
    padding: 11px;
}

    .ui-tabs-active .ui-tabs-anchor:hover {
        color: var(--primary-color);
    }

    .ui-tabs-active .ui-tabs-anchor:focus, .ui-tabs-active a:focus {
        color: white !important;
    }

.userPermissions_tabs:focus {
    color: white !important;
}

.ui-tabs-anchor {
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
}

a.userPermissions_tabs:focus {
    background-color: #0067ab !important;
}

    a.userPermissions_tabs:focus .up_icon {
        fill: black !important;
    }

.ui-state-default {
    padding: 10px 0px;
}

.ui-state-hover {
    color: black;
}

#horizontal-list li {
    color: #707070;
    font-weight: bold;
}

.pendingEditIconLeft path {
    fill: orangered;
}

.pendingEditIcon path {
    fill: orangered;
}

.icon-remove {
    color: orangered;
}

    .icon-remove:hover {
        color: red;
    }

.dropdown_newUI input {
    background: white;
    border: none;
    padding-left: 10px;
    font-weight: bold;
    color: var(--primary-color);
    display: flex;
    justify-content: space-between;
    align-content: center;
    margin-left: 20px;
    cursor: pointer;
    height: 30px;
    box-shadow: 0px 0px 0px 0px transparent !important;
}

.dropdown_newUI {
    border-radius: 4px;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.28);
    margin-left: 20px;
    max-width: 225px;
}

.icon-battery-cc-2:before, .icon-battery-cc-3:before,
.icon-battery-cc-4:before, .icon-battery-cc-5:before,
.icon-battery-ss-2:before, .icon-battery-ss-3:before,
.icon-battery-ss-4:before, .icon-battery-ss-5:before,
.icon-battery-aa-2:before, .icon-battery-aa-3:before,
.icon-battery-aa-4:before, .icon-battery-aa-5:before,
.icon-battery-line:before {
    color: #43be5f;
}

.icon-battery-cc-0:before, .icon-battery-aa-0:before,
.icon-battery-ss-0:before, .icon-signal-0:before,
icon-signal-1:before {
    font-weight: bold;
}

.sensorList-dash {
    padding: 5px 5px 0px 5px !important;
    margin-top: 0px !important;
    max-height: 30vh;
    overflow-y: scroll;
}

.mh300 {
    max-height: 300px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.mh400 {
    max-height: 400px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.mh40 {
    max-height: 40vh;
    overflow-y: scroll;
    overflow-x: hidden;
}

#calibrateButton {
    max-width: 110px;
}

.top_nav .nav > li > a:hover {
    background: transparent !important;
    box-shadow: none !important;
}

.top_nav .nav .open > a {
    background: transparent !important;
    box-shadow: none !important;
}

.dffdc {
    display: flex;
    flex-direction: column;
}

.media-mobileScroll {
    top: 15px;
    left: 10px;
    position: fixed;
    z-index: 2;
}

.menuHover > svg {
    margin-right: 10px;
}

#calendar td {
    cursor: pointer;
}

table td.highlighted {
    background: #707070;
    color: #ffffff;
}

a.Control1, a.Control2 {
    padding: 10px 0px;
}

.actionsDeviceContainer {
    display: flex;
    flex-direction: column;
}

input.gen-btn-2 {
    padding: 5px 20px;
}

input.edit-btn {
    padding: 5px 20px;
}

a.edit-btn {
    padding: 5px 20px;
}

.dfjcsb {
    display: flex;
    justify-content: space-between;
}

.PL0 {
    padding-left: 0px;
}

.fa-podcast {
    font-size: 20px;
}

select.aSettings__input_input {
    padding-left: 0px !important;
}

.actionChoice input[type="checkbox"] {
    opacity: 0;
    position: fixed;
    width: 0;
}

.actionChoice label {
    display: inline-block;
    background-color: #ddd;
    padding: 10px 20px;
    font-family: sans-serif, Arial;
    font-size: 13px;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 0px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.actionChoice input[type="checkbox"]:checked + label {
    background-color: var(--primary-color);
    color: white;
}

.actionChoice input[type="checkbox"]:hover + label {
    background-color: #707070;
    color: white;
    box-shadow: 0px 0px 0px transparent;
}

.actionChoice input[type="checkbox"]:focus + label {
    background-color: var(--primary-color);
    color: white;
    box-shadow: 0px 0px 0px transparent;
}

.actionChoice__active {
    background-color: var(--primary-color) !important;
    color: white;
    box-shadow: 0px 0px 0px transparent;
}

    .actionChoice__active:hover {
        background-color: #707070 !important;
        color: white;
    }

.dNone {
    display: none !important;
}

.card_container__mini {
    display: flex;
    justify-content: space-between;
    padding-right: 25px;
    max-width: 1200px;
}

.card_container__mini__wrapper {
    height: 250px;
    width: 275px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 10px;
}

.dg3 {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

.dgc1 {
    grid-column: 1/2;
}

.dgc2 {
    grid-column: 2/3;
}

.dgc3 {
    grid-column: 3/4;
}

.sensorTypeInput {
    width: 200px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 0px 4px 4px 0px;
    border-left: 1px solid #ccc;
    padding-left: 2px;
}

.expMessage {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FFF;
    max-height: 34px !important;
    border-bottom: 1px solid #e3e3e3;
    padding: 10px;
}

#maintNotification div p {
    font-size: 12px;
    color: #515356;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.addsuccess {
    background-color: #ccffcc;
    padding-left: 30px;
    border-radius: 6px;
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
    padding: 10px;
    margin-left: -10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.btnRight_row a:hover, .btnRight_row a:focus, .btnRight_row a:active {
    color: white;
}

.chart_row {
    padding: 10px 0px;
}

.chart_row__details {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px;
}

    .chart_row__details .gen-btn {
        width: 150px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .chart_row__details .edit-btn {
        margin-top: 5px;
        width: 150px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

.overflow_title {
    max-width: 25%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.overflow_data_medium {
    max-width: 33.33333333%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

#offset {
    height: 30px;
    border: none;
    background: none;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
}

.green-on-hover:hover {
    color: #21CE99
}


@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .main_container {
        display: -ms-flexbox;
    }

    #loginFormInside {
        width: 100%;
    }

    .login_container {
        display: -ms-flexbox;
    }

    .login_form_container {
        width: 100%;
    }
}

@media screen and (max-width: 850px) {

    .flex-col-on-mobile {
        flex-direction: column;
    }

    .align-start-on-mobile {
        align-items: flex-start;
    }

    .margin-for-mobile {
        margin-bottom: 2rem !important;
    }

    #sideNav {
        position: fixed;
        top: 0;
        left: 0;
        overflow-y: scroll;
    }

    .sidenav-secondary50 {
        width: 50% !important;
    }

    .activeSensorNav {
        width: 180% !important;
    }

    .network-sidebar {
        max-width: 100%;
    }

    .main_leftBar a {
        font-size: 20px !important;
    }

    .network-sidebar__title span {
        font-size: 25px;
    }

    .adminSubNav .menuHover {
        width: 100%;
    }

    .addsuccess {
        margin: 0px -10px 0px -10px;
    }

    .card_container__mini {
        display: flex;
        justify-content: space-between;
        padding-right: 25px;
        flex-direction: column;
        align-items: center;
    }

    .expMessage {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #FFF;
        max-height: 34px !important;
        border-bottom: 1px solid #e3e3e3;
        padding: 35px;
    }

    .card_container__mini__wrapper {
        border-radius: 6px;
        height: 350px;
        width: 290px;
        margin-bottom: 15px;
    }
}

@media screen and (min-width:976px) {
    .media_mobile {
        display: none;
    }
}


@media screen and (min-width: 850px) {
    .desktop_largename {
        min-width: 100px !important;
    }

    .dropdownMobileMenu {
        left: 64%;
        top: 12%;
    }

    .card_container__top__title {
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 100%;
        display: flex;
        padding-left: 15px;
        padding-right: 15px;
        overflow: hidden;
        border-bottom: .2px solid #e6e6e6;
    }

    .view-btns div.active-hover-fill {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 70px;
        flex-direction: column;
        color: black;
        width: fit-content;
        min-width: 82px;
        text-align: center;
        margin-top: 25px;
        background: var(--primary-color);
        padding-bottom: 35px;
    }

        .view-btns div.active-hover-fill i {
            color: white;
        }

        .view-btns div.active-hover-fill svg {
            fill: var(--mainMenu-text-color) !important;
        }

            .view-btns div.active-hover-fill svg path {
                fill: var(--mainMenu-text-color) !important;
            }

    .btn-active-fill svg path {
        fill: var(--mainMenu-text-color);
    }

    .view-btns div.active-hover-fill svg path.icon-fill-stroke-grey {
        stroke: white;
    }

    .view-btns div.active-hover-fill svg path.icon-fill-grey {
        fill: white;
    }

    .view-btns div.active-hover-fill span.extra {
        display: block;
        position: absolute;
        margin-top: 55px;
        color: var(--mainMenu-text-color);
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .tValues_modal {
        width: 515px;
    }

    .gap {
        padding: 20px;
    }

    .btn-active-fill {
        margin-top: 35px;
    }

    .inner_leftBar {
        height: 100%;
    }

    .checkoutButton {
        margin-left: 20px;
    }

    .desktop_mr15 {
        margin-right: 15px;
    }
}

@media screen and (max-width: 575px) {
    .shrink-col-6-mobile {
        width: 31%;
    }
}


@media screen and (max-width: 450px) {
    #sidenav-secondary {
        width: 225px !important;
    }



    .shrink-col-2-mobile {
        width: 17%;
    }
}

@media screen and (max-width: 400px) {
    #sidenav-secondary {
        width: 180px !important;
    }
}

@media screen and (max-width: 850px) {
    .dropdownMobileMenu {
        left: 46%;
        top: 10%;
    }

    .mobileCardIndent {
        padding-left: 20px;
    }

    .activeSensorNav {
        width: 150%;
        border-radius: 50px 0px 0px 50px;
        position: relative;
    }

    .mobile_mgntp20 {
        margin-top: 20px;
    }

    .mobile_mgntp10 {
        margin-top: 10px;
    }

    .multi-steps {
        padding: 20px;
    }

    .secondary-sidenav {
        height: 140vh;
    }

    .card_container__top__title__text {
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 80%;
        display: block;
        overflow: hidden;
    }

    .walletPurchaseMobile {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .mobileMenuTitle__dNone {
        display: none;
    }

    #sidenav-secondary {
        width: 180px;
        margin-top: -40px;
        z-index: inherit;
    }

    .media-card-margin-top {
        margin-top: 30px;
    }

    .wallet__card {
        width: 270px;
        height: 160px;
    }

    .media-btn-right {
        display: flex;
        justify-content: flex-end;
        padding-right: 10px;
    }

    .mobile-icon-dark {
        fill: #333333 !important;
    }

    .eventsList {
        width: -webkit-fill-available;
    }

    .card_container {
        width: 100%;
    }

    .mobile-row {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    #newEventConfigurationHolder {
        margin-top: 30px;
    }

    .tzSelect {
        max-width: 300px;
    }

    .trigger-card__title__mobile-end {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .mobiDate_container__text {
        display: none;
    }

    .trigger-card__innerTitle div {
        padding-left: 10px;
    }

    .trigger-card__innerTitle__date {
        padding-left: 25px;
    }

    .date-time_container {
        font-size: 10px;
    }

    .calendar-fill-mobile .calendar-mobile-fill {
        padding-left: 10px !important;
    }

    .dashboardCard_row {
        width: 100%;
        padding-bottom: 10px;
    }

        .dashboardCard_row::-webkit-scrollbar {
            width: 50px;
            height: 10px;
            cursor: pointer;
        }

        .dashboardCard_row::-webkit-scrollbar-track {
            border-radius: 10px;
            cursor: pointer;
        }

        .dashboardCard_row::-webkit-scrollbar-thumb {
            background: #ddd;
            border-radius: 10px;
            cursor: pointer;
        }

            .dashboardCard_row::-webkit-scrollbar-thumb:hover {
                background: #707070;
                cursor: pointer;
            }

    .view-btns_container {
        margin-bottom: 20px;
    }

    .gap {
        display: none;
    }

    .top-nav-gap-row {
        width: 100%;
    }

    .tz {
        font-size: 12px;
        max-width: 325px;
    }

    .tzLabel {
        padding: 10px 4px;
        font-size: 11px;
    }

    .tzLabel2 {
        padding: 10px 12px;
        font-size: 11px;
    }

    .aSettings__input_input {
        height: 30px;
        border: none;
        background: none;
        border: 1px solid #e3e3e3;
        border-radius: 4px;
    }

    .sensorList_main {
        width: 100%;
    }

    .navbar-right > .fa-search {
        display: none;
    }


    .siteLogo_container {
        margin: 0px;
    }

    .top_nav {
        padding: 0px;
    }

    .notifications-wrapper > .dropdown > .dropdown-menu {
        left: -565%;
    }

    .top-nav {
        padding: 10px;
        display: flex;
    }

    .main_container {
        display: block;
    }

    .inner_leftBar_container {
        width: fit-content;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
    }

    .inner_leftBar_title {
        color: white;
        font-weight: 600;
        font-size: 15px;
    }

    .admin-spacer {
        height: 1px;
        width: 100%;
        background: white;
    }

    .top-nav {
        padding: 10px;
    }

    .siteLogo_container {
        width: 250px;
        text-align: center;
    }

    .menuHover_dropdown {
        padding: 8px 8px 8px 50px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s;
        width: 100%;
        text-align: left;
    }

    .sensorList_main {
        padding-top: 25px;
    }

    #sensorNetwork_mobile {
        height: 100vh;
        width: 60vw;
        margin-top: -60px;
    }

        #sensorNetwork_mobile div {
            box-shadow: none;
        }

        #sensorNetwork_mobile a {
            padding: 0px;
            padding: 5px 15px;
        }

        #sensorNetwork_mobile svg {
            display: none;
        }

        #sensorNetwork_mobile a {
            font-size: 15px;
        }

    .networkContainer_mobile {
        height: 140vh;
        overflow: scroll;
    }

    .sensorNetwork_nav .menuHover-title {
        font-size: 20px;
    }

    .sensorNetwork_nav .menuHover, .sensorNetwork_nav .menuLogout {
        font-size: 20px;
        width: 125%;
        position: inherit;
    }

    .sensorNetwork_nav .icon-fill {
        display: none;
    }

    .sensorNetwork_nav .leftBar_profile__wrapper__name {
        padding: 0px;
        font-size: 23px;
    }

    .sensorNetwork_nav svg {
        display: none;
    }

    .sensorNetwork_nav .menuHover_dropdown {
        padding: 8px 8px 8px 20px;
    }

    .sensorNetwork_nav .split_mobile {
        width: 50vw;
        padding-top: 250px;
    }

    .sensorNetwork_nav {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding-top: 20px;
        flex-direction: column;
        flex-direction: row-reverse;
        width: min-content;
    }

    .network-sidebar {
        padding-top: 70px;
    }

    .network-sidebar__title {
        display: flex;
        font-size: 18px;
        font-weight: bold;
        padding-left: 10px;
        padding-bottom: 20px;
        padding-top: 70px;
    }

    span.extra {
        display: none;
    }

    .view-btns deviceView_btn_row__device.btn-active-fill span.extra {
        display: block;
    }

    .view-btns div.btn-active-fill span.extra {
        display: none;
    }

    .view-btns div.active-hover-fill span.extra {
        display: none;
    }

    .btn-active-fill i {
        padding-bottom: 0px;
    }

    .device_detailsRow {
        flex-direction: column;
    }

    .device_detailsRow__card {
        padding: 0px;
    }

    .view-btns {
        padding: 10px;
    }

    .deviceView_btn_row {
        align-items: center;
        padding: 10px 15px;
    }

    .btn-fill {
        max-width: 33px;
        min-width: 33px;
    }

        .btn-fill i {
            font-size: 17px;
        }

    .gatewaySideList {
        display: none;
    }

    .sensorSideList {
        display: none;
    }

    .detailsReadings_card {
        margin: 15px 0px;
    }

    .settingsContainer {
        margin-top: 20px;
        display: block;
        width: 100%;
    }

    .settingsContainer__aSettings {
        padding: 0px 20px;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .settingsContainer__aDetails {
        padding: 0px;
        width: 100%;
    }
}

@media screen and (max-width: 330px) {
    .siteLogo_container {
        width: 225px;
    }
}

@media screen and (max-width: 850px) {
    .main_leftBar {
        padding-top: 40px;
    }

        .main_leftBar a {
            font-size: 15px;
        }
}

/* Page */

.hb-calc-add {
    display: flex;
    flex-direction: column;
    position: relative;
}

.HB {
    width: 80%;
    height: 100%;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: white;
}

.HBheader {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.HBheader__top {
    font-size: 2rem;
    color: var(--primary-color);
    font-weight: bold;
    text-align: center;
}

.HBheader__middle {
    font-size: 1rem;
    color: #707070;
    font-weight: bold;
}

.HBheader__bottom {
    font-size: .8rem;
}

.HBcalculator {
    margin: 1rem 1rem 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: var(--primary-color);
    border-radius: 0.5rem 0.5rem 0 0.5rem;
    box-shadow: 0px 3px 17px 4px rgb(0 0 0 / 40%);
    padding: 1.2rem 2rem 0.8rem;
    background-image: linear-gradient(120deg, #0067ab 0%, #074D7B 100%);
}

    .HBcalculator tr {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: 0 0 0.56rem;
    }

    .HBcalculator td {
        display: flex;
        align-items: center;
        margin: 0 0.5rem;
    }

.HBcalculator__container__iContainer input {
    background: #ebebeb;
    border: none;
    border-radius: 0.3rem;
    color: #515356;
    padding: 5px 3px;
    font-weight: bold;
    font-size: 1rem;
    max-width: 62px;
}

.HBcalculator__container__iContainer {
    display: flex;
    align-items: center;
}

.HBcalculator__iContainer__wrapper {
    padding: 0px 5px;
}

.HBcalculator__iContainer__wrapper__icon {
    display: flex;
    padding: 7px;
    width: 50px;
}

.HBcalculator__container__title {
    font-size: 1rem;
    color: white;
    width: 163px;
}

.HBaddNew {
    width: 120px;
    border: 1px solid #dedede;
    border-radius: 0 0 0.5rem 0.5rem;
    margin-left: auto;
    margin-right: 1rem;
    background-color: white;
    font-weight: bold;
    color: #515356;
    cursor: pointer;
    display: flex;
    align-items: center;
    box-shadow: 0px 3px 17px 4px rgb(0 0 0 / 25%);
    transition: .3s ease;
}

    .HBaddNew:hover {
        background: #e3e3e3;
        transition: .3s ease-in;
    }

        .HBaddNew:hover .HBaddNew__text, .HBaddNew:hover .HBaddNew__text__plus {
            color: #707070;
        }

.HBaddNew__text {
    display: flex;
    position: relative;
    align-items: center;
    color: #7d7a7a;
    width: 100%;
    font-size: .9rem;
    justify-content: center;
}

.HBaddNew__text__plus {
    font-size: 25px;
    margin-right: 5px;
    color: #aaa;
}

.HBslider {
    width: 100%;
    margin-top: 20px;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.HBslider__title {
    color: #9F9C9C;
    font-size: 20px;
    font-weight: bold;
}

.HBslidecontainer {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-evenly;
    margin-top: 10px;
}

.HBslider__slider {
    -webkit-appearance: none;
    width: 60%;
    height: 15px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

    .HBslider__slider:hover {
        opacity: 1;
    }

    .HBslider__slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background: var(--primary-color);
        cursor: pointer;
    }

    .HBslider__slider::-moz-range-thumb {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background: var(--primary-color);
        cursor: pointer;
    }

.HBslider__slideValue {
    font-size: 24px;
    font-weight: bold;
    color: var(--primary-color);
    min-width: 120px;
}

.packageLabel {
    width: 100%;
}

.packageCards {
    display: flex;
    justify-content: space-evenly;
    width: 90%;
    margin-bottom: -100px;
    margin-top: 20px;
}

.packageCard {
    width: 200px;
    height: 260px;
    border-radius: 8px;
    box-shadow: 0px 3px 17px 4px rgba(0, 0, 0, 0.4);
}

.packageCard__iconHolder__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
}

.packageCard__title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
}

.packageCard__results {
    padding-left: 15px;
    padding-top: 10px;
}

.packageCard__results__top {
    padding-bottom: 5px;
}

.packageCard__results__bottom, .packageCard__results__top {
    display: flex;
    align-items: center;
}

.packageCard__results__top__icon, .packageCard__results__bottom__icon {
    margin-right: 5px;
}

.packageCard__results__bottom__text, .packageCard__results__top__text,
.packageCard__title, .DBaddBtn__text {
    color: white;
}

.packageCard__results__bottom__text {
    min-height: 36px;
    display: flex;
    align-items: center;
}

.DBaddBtn__container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.DBaddBtn {
    padding-top: 20px;
    position: relative;
    z-index: 99999999;
}

.DBaddBtn__text {
    background: rgba(255, 255, 255, 0.247);
    padding: 5px 25px;
    font-size: 20px;
    font-weight: bold;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.DBaddBtn__btn {
    background: white;
    padding: 5px 35px;
    font-size: 20px;
    font-weight: bold;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: .3s ease;
}

    .DBaddBtn__btn:hover {
        transform: scale(1.1);
    }

.HBoutput {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 75px;
    font-size: 30px;
    font-weight: bold;
    color: var(--primary-color);
    padding-top: 10px;
}

.msg-overages {
    display: flex;
    background: white;
    border-radius: 0.5rem;
    width: fit-content;
    align-items: center;
    padding: 0.5rem;
    justify-content: center;
    box-shadow: 0px 2px 10px rgb(0 0 0 / 50%);
    margin-bottom: 1rem;
}


.HBoutputContainer {
    border-radius: 8px;
    width: 40%;
    min-height: 80px;
    padding-top: 10px;
    text-align: center;
}

.rowValues {
    min-width: 90px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    margin-left: 1rem;
}

.HXpackages {
    padding: 0px 20px;
}

.HXpackage {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.HXpackage__btn_a {
    border-radius: 4px;
    font-weight: bold;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.2);
    padding: 2px 5px;
    color: white;
    transition: .3s ease;
}

    .HXpackage__btn_a:hover {
        transform: scale(1.5);
        color: white;
    }

    .HXpackage__btn_a:visited, .HXpackage__btn_a:active, .HXpackage__btn_a:focus {
        color: white;
    }

.HXpackage1 {
    background: #2585c5;
}

.HXpackage2 {
    background: var(--primary-color);
}

.HXpackage3 {
    background: #074d7b;
}

.HXpackage__icon {
    width: 30px;
}

.HXpackage__title {
    width: 150px;
}

.HXpackage__btn {
    width: 100px;
}

.daymonthyearOutput {
    padding-left: 10px;
    font-size: 30px;
    color: #9E9D9D;
}

.mobile_modalFlip__modalMargin {
    margin-top: 0px;
}


@media (max-width: 850px) {
    .mobile_modalFlip__modalMargin {
        box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.1);
        margin: 10px 0px;
    }

    .siteLogo2 {
        max-width: 60%;
        height: inherit;
    }

    .HBaddNew {
        margin-right: 0;
    }

    .mobile_modalFlip {
        display: flex;
        flex-direction: column-reverse;
    }

    .HB {
        width: 93%;
    }

    .HBcalculator {
        margin: auto;
        padding: 10px;
    }

        .HBcalculator tr {
            display: flex;
            flex-direction: column;
        }

        .HBcalculator td {
            width: 100%;
            justify-content: center;
        }

    .HBoutputContainer {
        width: 95%;
    }

    table#data tr {
        border: 2px solid rgba(255,255,255, 0.3);
        padding: 10px;
    }

    .bottomTableRow {
        padding: 10px;
        width: 60%;
        justify-content: center;
        background: #ebebeb;
        color: #515356;
        border-radius: 0.4rem;
    }

    .daymonthyearOutput {
        padding-left: 10px;
        font-size: 20px;
        color: #9E9D9D;
    }

    .totaldaymonthyearOutput {
        font-size: 25px;
        font-weight: bold;
        border-bottom: 3px solid var(--primary-color);
    }

    .packageCards {
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-bottom: -100px;
        margin-top: 20px;
    }

    .packageCard {
        width: 100%;
        height: 260px;
        border-radius: 8px;
        box-shadow: 0px 3px 17px 4px rgba(0, 0, 0, 0.4);
    }

    .rowValues {
        color: #515356;
    }
}

.ANmodal-content {
    border: none;
    border-radius: 8px;
}

.ANmodal-top {
    background-image: linear-gradient(to top right, #01426D, #1078BC, #0280D2);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 7px 7px 0px 0px;
}

div.ANmodal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

    div.ANmodal-footer a, div.ANmodal-footer button {
        width: 90px;
    }

.modalANmodal-body__modalContainer {
    padding: 10px;
}

.ANmodal-body__modalDescription {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ANmodal-body__modalDescription__text {
    padding: 10px 20px;
    margin-top: -10px;
    background: white;
    border-radius: 8px;
    position: sticky;
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.2);
    font-weight: bold;
    font-size: 18px;
    color: #25C997;
}

.ANmodal-body__modalTitle__text {
    text-align: center;
    font-weight: bold;
    font-size: 16px;
}

.ANmodal-body__modalContent {
    padding: 10px;
}

.ANmodal-body__modalContent__text {
    text-align: left;
    font-size: 15px;
}

.callAttention__description {
    font-weight: bold;
    color: #f5504e;
}

.selectMaintenance {
    background-color: #D9FAE8 !important;
}

html {
    scroll-behavior: smooth;
}

.closeBtn {
    fill: #515356;
    border: none;
    color: white;
    border-radius: 25%;
    height: 20px;
}

    .closeBtn:hover {
        fill: #7A7D82;
        cursor: pointer;
    }

.btn-secondaryToggle i {
    color: #333;
}

.btn-secondaryToggle path {
    fill: #333;
}

#UserList {
    display: flex;
    flex-wrap: wrap;
}

@media (max-width: 550px) {
    .sensor_chart_add_new {
        display: flex;
        flex-direction: column;
    }

        .sensor_chart_add_new button {
            margin-top: 10px;
            height: 40px;
        }
}

/* CONFIRM CUSTOM */

.ui-dialog {
    position: absolute !important;
    border-radius: 6px;
    height: 100px !important;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: space-between;
    border: .5px solid #bbb;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.05);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media (max-width: 600px) {
    .ui-dialog {
        width: 80vw !important;
    }
}

.ui-dialog button {
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.ui-dialog-buttonset {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 40px;
}

.ui-dialog button:first-of-type {
    background-color: var(--primary-color);
    color: white;
}

#confirmCustomMessage {
    color: black;
    z-index: 99;
}

#confirmCustomOverlay {
    background-color: rgba(0,0,0,0.5);
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 999;
}

.ui-dialog button:last-of-type {
    background-color: lightgrey;
    color: black;
}

.ui-dialog .ui-dialog-titlebar-close {
    visibility: hidden;
}

#confirmCustom {
    margin: 0 20px;
}


/* || GENERAL STYLES || */
.panel {
    background: white;
}

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    opacity: .5;
    transition: opacity .15s linear;
}


.modal-backdrop {
    display: none !important;
}

body {
    min-height: 100vh !important;
}
/* || Typography || */
/* || Buttons || */
.btn:focus, form-select:focus {
    outline: none;
    box-shadow: none;
}

.form-control:focus, form-select:focus {
    outline: none;
    box-shadow: none;
}

/* || Badges || */
#actionBadge {
    border-radius: 3px;
}

.badgeSelected {
    background: #21CE99;
}
/* || Inputs || */

input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.form-switch .form-check-input {
    height: 25px;
    width: 40px;
}

.form-switch {
    display: flex;
    align-items: center !important;
}

/* || Icons || */
.dropdown-menu svg {
    width: 20px;
    height: 20px;
}

.svg_icon {
    fill: #666;
    width: 20px;
    height: 20px;
}


.menuHover .svg_icon {
    fill: var(--mainMenu-text-color);
}


#svg_menu {
    height: 15px;
}

.btn svg {
    height: 20px;
    width: 20px;
}

.dropdown-menu svg path {
    margin: 5px;
}


#svg_disable {
    fill: #37bc9b;
}


.btn-active-fill .svg_icon, .btn .svg_icon {
    fill: var(--prime-btn-text-color);
}

.btn:hover svg,
.btn:hover {
    fill: var(--prime-btn-text-hover);
}

#svg_delete {
    fill: var(--help-highlight-color);
}

.svg_wallet {
    fill: none;
}

.fa-list-ul {
    color: #666;
}

    .fa-list-ul:hover {
        color: #0d6efd;
    }

#svg_cardList {
    height: 25px !important;
    width: 25px !important;
}

/* || Panels || */
.accordion-button {
    background: white !important;
    color: black !important;
}

    .accordion-button:focus {
        outline: none;
        box-shadow: none;
    }

.form-control:focus {
    outline: none;
    box-shadow: none;
}

.accordion-body {
    max-height: 40vh;
    overflow-y: scroll;
}

.saveRow {
    display: flex;
    justify-content: end;
}

/* || Cards || */
/* || Menus || */

.dropdown-menu > li > a {
    padding: .5rem;
}

.dropdown-menu li a {
    display: flex;
    justify-content: space-between;
}

    .dropdown-menu li a svg {
        margin-left: auto;
        margin-right: 0;
    }

.dropdown-menu hr {
    margin: 0 !important;
}

[data-bs-toggle="dropdown"]:hover {
    cursor: pointer;
}

.dropdown-menu a {
    cursor: pointer;
}

.ui-sortable-handle {
    cursor: grab;
}

    .ui-sortable-handle:active {
        cursor: grabbing;
    }

.home-inside-data {
    cursor: pointer;
}

/* || HEADER || */
/* || NAVIGATION || */
.nav_menu ul li .active {
    background-color: #eee !important;
    color: #444 !important;
}

.networkListItem:hover {
    background: #eee;
}

.main_leftBar__sideBar .menuHover:hover {
    background: #eee;
}

.adminSubNav .menuHover {
    padding: 10px;
}

#ic_arrow_back_24px {
    cursor: pointer;
}

.menuHover:hover .svg_icon {
    fill: var(--main-Menu-hover-color);
}

.menuHover:hover .icon-fill {
    fill: var(--mainMenu-hover-color);
}

.menuHover:hover svg {
    fill: var(--mainMenu-hover-color);
}

.menuHover:hover .icon-fill-opposite {
    fill: white;
}

.menuActive .icon-fill, .menuActive .svg_icon {
    fill: var(--primary-color);
}

.card_container__top__title svg {
    height: 30px !important;
}

#printChartButton svg {
    height: 18px !important;
    fill: #666;
}

/* || PAGE SPECIFIC || */
.sensorEditForm {
    margin-left: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 4px 0px 0px 0px;
    min-height: 38px;
}

.boldText {
    font-weight: bold;
}

#newEventConfigurationHolder input, #newEventConfigurationHolder select {
    width: 250px;
}

.sensorEditFormInput {
    display: flex;
    align-items: center;
}

    .sensorEditFormInput #svg_list {
        height: 15px;
        fill: #666 !important;
    }

    .sensorEditFormInput .svg_icon:hover {
        fill: var(--primary-color) !important;
    }

    .sensorEditFormInput .form-control, .sensorEditFormInput .form-select {
        max-width: 250px;
        margin-right: 4px;
    }

.modal .modal-header {
    border-bottom: none !important;
}

.modal .modal-footer {
    border-top: none;
}

/* || PARTIAL SPECIFIC || */
#ApplicationDatum input, #ApplicationDatum select {
    width: 250px;
}

/* || UTILITIES ||*/


#chartToolTipAddedStyles {
    background: #ffffff96 !important;
    font-weight: 700 !important;
    color: #000000eb !important;
}


.container-fluid {
    padding-right: 0px;
    padding-left: 0px;
    grid-area: rule;
}

.useAwareState {
    font-size: 0.95rem !important;
    font-weight: 600;
    border-bottom: 1px solid #eee;
    padding-top: 0.5rem;
    padding-bottom: 0.25rem;
    margin-bottom: 1rem;
}


.scrollParentLarge {
    max-height: 80vh !important;
}

.scrollParentSmall {
    max-height: 35vh !important;
}

.hasScroll {
    max-height: 70vh !important;
    overflow-y: scroll !important;
    overflow: scroll !important;
    overflow-x: hidden !important;
}

.hasScroll-sm {
    max-height: 25vh !important;
    overflow: scroll;
    overflow-x: hidden;
}

.scrollParentLarge:hover ::-webkit-scrollbar, .scrollParentSmall:hover ::-webkit-scrollbar {
    width: 10px;
}

.hasScroll::-webkit-scrollbar, .hasScroll-sm::-webkit-scrollbar {
    width: 10px;
}

.scrollParentLarge:hover ::-webkit-scrollbar-track, .scrollParentSmall:hover ::-webkit-scrollbar-track {
    background-color: #efefef;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.hasScroll::-webkit-scrollbar-track, .hasScroll-sm::-webkit-scrollbar-track {
    background-color: transparent;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.scrollParentLarge:hover ::-webkit-scrollbar-thumb, .scrollParentSmall:hover ::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #bbb;
}

.hasScroll::-webkit-scrollbar-thumb, .hasScroll-sm::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: transparent;
}

.fade-out-ani-ab {
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.fade-in-ani-ab {
    transition: opacity 0.3s ease;
    opacity: 1;
}


/*------------------------For Spinner Modal------------------------*/
.setButtonForNumberSpinner {
    font-weight: 600;
}

.TitleUnderlineStyle {
    width: 100%;
    margin: 0.5rem;
    border-width: thin;
    border: revert;
}

.NumberSpinnerTitleStyle {
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid lightgrey;
    width: 100%;
    padding: 0.25rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}

.number-picker-container-ab {
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    height: 100%
}

.number-picker-ab {
    width: 100%;
}

.displayForNumberSpinner, .displayForNumberSpinner2 {
    text-align: center;
}

.boxOfBoxes {
    height: 218px;
    width: 80%;
    display: flex;
}

.valueForNumberSpinner, .valueForNumberSpinner2 {
    font-size: 1.25rem;
    border-radius: 15px;
    padding: 0.5rem;
    cursor: pointer;
    opacity: 30%;
    user-select: none;
}

.borderRadiusOverwriteLeft {
    border-radius: 15px 0 0 15px !important;
}

.borderRadiusOverwriteRight {
    border-radius: 0 15px 15px 0 !important;
}

.valueForNumberSpinner:hover, .valueForNumberSpinner2:hover {
    background-color: var(--options-icon-color, #0469ad);
    color: white;
}

.remove-hover-effects:hover, remove-hover-effects > *:hover {
    background: white;
    color: grey;
}


.selectedElementForNumberSpinner, .selectedElementForNumberSpinner2 {
    background-color: var(--options-icon-color, #0469ad) !important;
    color: white !important;
    font-weight: 600;
    opacity: 100%;
    box-shadow: 1px 1px 3px 0px grey;
}

.selectedElementForNumberSpinner {
    padding-right: 0;
    /*    margin-right: -31px;*/
}

.selectedElementForNumberSpinner2 {
    padding-left: 0;
    /*    margin-left: -16px;*/
}

.no-display-for-spinner {
    display: none !important;
}

.AB-overlay-for-spinner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000094;
    z-index: 1100;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.userUpdateSpinnerModal {
    width: 270px;
    height: 318px;
    background: white;
    border-radius: 15px;
    z-index: 1200;
    display: none;
    box-shadow: 2px 2px 6px rgb(0 0 0 / 35%);
    padding: .5rem;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    user-select: none;
}

.flex-column-for-spinner-ab {
    flex-direction: column;
    align-items: center;
}

.button-wrapper-ab {
    display: flex;
    width: 100%;
    padding-top: 0.5rem;
    gap: 0.5rem;
}

.blue-secondary-btn-spinner-ab {
    border: solid 1px lightgrey;
    border-radius: 5px;
    color: var(--options-icon-color, #0469ad);
    background: white;
    font-size: 1rem;
    width: 100%;
    /*    box-shadow: 1px 1px 1px rgb(0 0 0 / 35%);*/
}

    .blue-secondary-btn-spinner-ab:hover {
        opacity: 0.8;
    }

.clickable:active {
    transform: scale(.9);
}

.moveOnTheY {
    transform: translateY(-53px);
}

.number1, .number2-1 {
    transform: rotateX(66deg) translateZ(-37px);
    opacity: 15%;
}

.number2, .number2-2 {
    transform: rotateX(40deg) translateZ(-19px);
    opacity: 20%;
}

.number3, .number2-3 {
    transform: rotateX(20deg) translateZ(-4.5px);
}

.number4, .number2-4 {
    transform: rotateX(0deg) translateZ(0px);
}

.number5, .number2-5 {
    transform: rotateX(20deg) translateZ(4.5px);
}

.number6, .number2-6 {
    transform: rotateX(40deg) translateZ(19px);
    opacity: 20%;
}

.number7, .number2-7 {
    transform: rotateX(66deg) translateZ(37px);
    opacity: 15%;
}


/*------------------------End Spinner Modal------------------------*/


/*------------------------Start Tooltip------------------------*/
.custom-tooltip {
    position: absolute;
    background-color: #0469ad;
    color: white;
    padding: .35rem;
    border-radius: .25rem;
    border: solid white 1px;
    font-size: 12px;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    letter-spacing: .2px;
    transition: opacity 0.3s;
    max-width: 350px;
    display: none;
}

    .custom-tooltip.show {
        opacity: 1;
        display: block;
    }

.colOnMobile {
    flex-direction: row;
    align-content: inherit;
    flex-wrap: inherit;
}

/*------------------------End Tooltip------------------------*/

@media (max-width: 1200px) {
    .device_detailsRow {
        flex-wrap: wrap;
    }

    .fullOnSm {
        width: 100%;
    }
}

@media only screen and (max-width : 667px) {
    .hasScrollChart {
        max-height: 50vh !important;
        overflow-y: scroll !important;
        overflow: scroll !important;
        overflow-x: hidden !important;
    }

    .scrollParentLargeChart {
        max-height: 80vh !important;
    }

    .columnOnMobile {
        flex-direction: column;
    }

        .columnOnMobile .small-list-card {
            width: 100%;
            margin: .5rem 0;
        }
}

@media only screen and (min-width : 668px) {
    .hasScrollChart {
        max-height: 50vh !important;
        overflow-y: scroll !important;
        overflow: scroll !important;
        overflow-x: hidden !important;
    }

    .scrollParentLargeChart {
        max-height: 80vh !important;
    }
}

.btn-primary:focus, .btn-secondary:focus {
    border: 1px transparent solid;
    filter: brightness(80%);
}

.btn-primary[disabled] {
    border: 1px transparent solid;
    filter: brightness(130%);
}


@media only screen and (max-width: 975px) {

    .leftBar_profile__wrapper {
        padding: 8px 0px 20px 10px !important;
        display: flex;
    }

    .leftBar_profile {
        width: 100%;
        border-bottom: 1px solid #ffffff;
    }

    .menuHover, .menuLogout {
        font-size: 19px;
    }

    .inner_leftBar_title {
        display: none;
    }

    .main_leftBar a, menu-mobile-drop {
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        transition: 0.3s;
        width: 100%;
        text-align: left;
    }

        .main_leftBar a:hover {
            color: #f1f1f1;
        }

    .main_leftBar .closebtn {
        position: absolute;
        top: 20px;
        left: 20px;
        font-size: 36px;
    }

    .leftBar_profile__wrapper__name {
        color: white;
        padding-left: 30px;
        margin-top: 10px;
        font-size: 20px;
    }

    .mobileProfileWrapper div {
        padding-left: 10px;
        font-size: 21px;
        max-width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .inner_leftBar {
        display: flex;
        padding-top: 20px;
        flex-direction: column;
    }

    .main_leftBar {
        height: 100%;
        width: 0px;
        min-width: 0px;
        padding: 0px;
        position: fixed;
        z-index: 3;
        top: 0;
        left: 0;
        overflow-x: hidden;
        transition: 0.5s;
        padding-top: 60px;
        text-align: center;
    }

    .notifications-wrapper {
        grid-column: 3/4;
        grid-row: 1/2;
    }

    .media_desktop {
        display: none;
    }

    .main_leftBar {
        width: 0;
        min-width: 0;
        z-index: 100;
    }

    .main_container {
        grid-template-columns: 1fr;
    }

    /* utility classes*/

    .items-center {
        align-items: center;
    }

    .justify-around {
        justify-content: space-around;
    }

    .justify-between {
        justify-content: space-between;
    }

    .add-btn-mobile {
        text-decoration: none;
        background: var(--prime-btn-color);
        color: white;
        border-radius: 6px;
        font-size: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        transition: .2s ease;
        padding: 0px;
        padding: 18px;
        border-radius: inherit;
    }

        .add-btn-mobile > svg {
            fill: var(--prime-btn-text-color);
        }
}

@media only screen and (max-width: 400px) {
    .nav-md .container.body .right_col {
        padding: 0px 3px 40px 3px !important;
        min-height: auto;
    }

    .x_title {
        padding: 1px 5px 6px;
    }
}

@media screen and (max-width:1225px) {
    .marginLeftOnLgScreen {
        margin-left: 0rem;
    }

    .two-card-container {
        flex-direction: column;
        gap: 20px !important;
    }

        .two-card-container > div {
            width: 100%
        }
}


/*   ALERT PAGE*/

.align-center-with-gap {
    align-items: center;
    gap: .5rem;
}

.flexAB {
    display: flex;
}

.toggleOnColor {
    fill: #21CE99;
}

.initialFill {
    fill: #707070;
}

.col-2AB {
    flex: 0 0 auto;
    width: 12%;
}

@media only screen and (max-width:1400px) {

    .align-center-with-gap {
        align-items: center;
        gap: 0rem;
    }

    .width-none-mobile {
        width: 0px;
    }
}

@media only screen and (max-width:800px) {
    .col-2AB {
        flex: 0 0 auto;
        width: 12%;
        min-width: 65px;
    }
}


@media only screen and (max-width:600px) {
    .col-2AB {
        flex: 0 0 auto;
        width: 12%;
        min-width: 55px;
    }
}


.addSVG > svg {
    fill: #5A738E;
    width: 10px;
    height: 10px;
    margin-top: -3px;
}

.bl {
    border-bottom: 1px solid #e6e6e6;
}

#advancedAlertMessages {
    display: none;
}

.msg_card1AB {
    display: flex;
    flex-direction: column;
    gap: 7px;
    background: #E5E5E8;
    padding: 8px;
    border-radius: 5px;
    box-shadow: rgb(0 0 0 / 16%) 0px 3px 6px, rgb(0 0 0 / 23%) 0px 3px 6px;
}

.abba > svg {
    height: 20px !important;
}

.deleteButtonAB {
    cursor: pointer;
    display: flex;
    color: orange;
    min-width: 91px;
    font-style: italic;
    padding: .25rem;
    border-radius: .5rem;
}

    .deleteButtonAB:hover {
        background: #f1b44347;
        color: orange;
    }


.sticky-header-title {
    background: white;
    height: 3rem;
    display: flex;
    align-items: center;
}

@media (max-width: 800px) {
    .column-on-sm-scr {
        flex-direction: column;
    }
}

.mobile-only {
    display: none;
}

@media (max-width: 970px) {
    .mobile-only {
        display: block;
    }

    .desktop-only {
        display: none;
    }
}

@media (min-width:1125px) {
    .width-adjustment {
        width: 500px;
    }
}

@media (max-width:550px) {
    .colOnMobile {
        flex-direction: column;
        align-content: flex-start;
        flex-wrap: wrap;
    }
    .no-m-sm{
        margin:0 !important
    }
}

@media (min-width:550px) {
    .addMinWidth550 {
        min-width: 500px;
    }

    .addFlexOnWidth550 {
        display: flex;
    }
}
/*End Alerts*/