#import-bar-box {
    margin-top: 1.5em;
}

.page-container {
    position: relative;
}

#mainnav-close {
    padding: 10px;
    height: 6em;
    width: 38px;
    background: #fff;
    line-height: 43px;
    margin-left: 11px;
    display: none !important;
}

#mainnav-menu > li > a {
    color: inherit !important;
}

#mainnav-menu > li > a:hover {
    color: var(--plasma-cloud-main-color) !important;
}

#mainnav-menu > .active-link > a,
#mainnav-menu > .active-link > a:hover,
#mainnav-menu > .active-sub > a,
#mainnav-menu > .active-sub > a:hover,
.list-group-item-action:focus{
    color: #fff !important;
    background-color: var(--plasma-cloud-main-color) !important;
}

.main-menu-svg-icon svg {
    width: 32px;
    height: 16px;
}
.active-link .main-menu-svg-icon svg path {
    fill: #FFF !important;
}
#mainnav-menu a:hover .main-menu-svg-icon svg path {
    fill: var(--plasma-cloud-main-color) !important;
}
#mainnav-menu .active-link a:hover .main-menu-svg-icon svg path {
    fill: #FFF !important;
}

.list-group-item-action:hover,
.list-group-item-action:hover a {
    color: #fff !important;
}

#content-container {
    position: relative;
}

#container.mainnav-in #content-container {
    padding-left: 220px;
    padding-right: 0;
    left: 0;
}

@media(min-width: 1200px) {
    #mainnav-menu ul a {
        padding-left: 32px;
    }

    #mainnav-menu ul ul a {
        padding-left: 15px;
    }
}

@media (max-width: 767px) {

    #mainnav-close {
        display: block !important;
    }

    .btn-add-schedule {
        display: block;
    }

    .action-menu {
        margin-top: 1em;
    }

    .schedules .schedules-card .schedule-card-header .schedule-actions {
        clear: both;
    }

    .mainnav-in #mainnav-menu-wrap {
        overflow: hidden;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }

    .modal-move-device .modal-dialog {
        width: unset !important;
    }
}

@media (min-width: 768px) {
    #mainnav-container {
        left: 0 !important;
    }

    .modal-add-device .modal-dialog {
        width: 400px;
    }
}

.page-setting-history #mainnav-container {
    left: -100% !important;
}

.page-setting-history #container .navbar-header:before {
    box-shadow: 0px 0px 0 0px;
}

.page-setting-history .navbar-header {
    display: block !important;
}

.page-setting-history #back-settings {
    margin-left: 53px !important;
    margin-top: -50px;
}
.page-setting-history #container #content-container {
    padding-left: 0px !important;
    left: 0px !important;
}

.page-setting-history .brand-title,
.page-setting-history .header__content {
    display: none !important;
}

.page-setting-history .aside-toggle-right,
.page-setting-history #back-settings {
    display: block !important;
}

#navbar

.navbar-top-links .tgl-menu-btn {
    position: absolute;
    left: 10px;
}

.navbar-top-links .dropdown-menu {
    font-size: 13px;
}

#dropdown-user {
    padding: 0 10px;
}

#orgs-head,
#networks-head {
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

img {
    max-height: 100%;
}

.model-icon {
    max-height: none;
    margin-bottom: 5px;
}

.device-mesh-icon {
    margin-left: 10px;
}

.device-mesh-icon-widget {
    margin-left: 10px;
}

.leaflet-container img {
    max-height: none;
}

.leaflet-container a.leaflet-popup-close-button {
    top: 3px;
    right: 0px;
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-size: 13px;
    color: transparent;
    cursor: pointer;
}

.leaflet-container a.leaflet-popup-close-button:hover {
    color: transparent;
}

.leaflet-container a.leaflet-popup-close-button:before {
    content: "\f00d";
    color: #4d627b;
}

.device-map {
    height: 600px;
}

#overview_map {
    height: calc(100vh - 230px) !important;
}
#overview_floorplan_map {
    height: calc(100vh - 230px) !important;
}

#wifi-map {
    height: calc(100vh - 245px) !important;
}

#topology_mesh_map {
    height: calc(100vh - 190px) !important;
}
#topology-mesh_floorplan_map {
    height: calc(100vh - 190px) !important;
}
#topology-wifirf_floorplan_map {
    height: calc(100vh - 255px) !important;
}

#my_services-content a.external-link,
#overview-content a.external-link {
    text-decoration: underline;
    color: var(--plasma-cloud-main-color);
}

#chart-container {
    position: relative;
    top: 10px;
}

#usage-chart,
#loading-ports,
#loading-chart,
#loading-org {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.loading {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.5);
}

.loading > .load3 .loader {
    position: absolute !important;
    top: calc(50% - 68px);
    left: calc(50% - 23px);
}
.relative-loader {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#loading-ports,
#loading-org,
#loading-chart {
    width: 100%;
    height: 100%;
    z-index: 10;
    background: rgba(255, 255, 255, 0.5);
}

.payment-methods-table-container .dataTables_wrapper {
    padding-top: 0;
}

.dataTables_wrapper .dataTables_filter {
    float: left !important;
    width: auto;
    float: left;
    padding: 0;
}

.dataTables_wrapper .dt-buttons {
    float: left;
    flex: 1;
    padding-left: 3em;
}

.dataTables_wrapper .dt-buttons .btn-export {
    float: right;
}

.dataTables_wrapper .dt-buttons .table-actions {
    float: right;
}

.dataTables_wrapper .dataTables_scroll {
    width: 100%;
}

.dataTables_wrapper .dataTables_paginate {
    margin-right: 4em !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: none;
    border: 1px solid #fff;
}

@media screen and (max-width: 767px) {
    .dataTables_wrapper .dataTables_paginate {
        text-align: right !important;
        clear: both;
    }
}

div.dataTables_wrapper div.dataTables_length {
    margin-top: 10px;
    margin-right: 10px;
}

div.dataTables_wrapper div.dataTables_length > label {
    display: flex;
    align-items: center;
    margin: 0 10px 0 0;
}

div.dataTables_wrapper div.dataTables_length select {
    margin: 0 10px;
}

div.dataTables_wrapper div.dataTables_paginate {
    margin-top: 3px;
}

table.dataTable.fixedHeader-floating.no-footer {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

table.dataTable.fixedHeader-floating.no-footer thead th {
    border-bottom-color: #ddd;
}

@media screen and (max-width: 640px) {
    #page-content {
        padding-left: 0px;
        padding-right: 0px;
    }

    .dataTables_wrapper {
        padding-left: 15px;
        padding-right: 15px;
    }

    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length {
        width: 100%;
        clear: both;
        text-align: left !important;
    }

    .dataTables_wrapper .dataTables_filter label {
        float: none !important;
        clear: both;
    }

    .dataTables_wrapper .dt-buttons {
        margin-top: 5px;
        clear: both;
        width: 100%;
        text-align: left;
        padding-left: 0px;
    }
}

table.dataTable tbody td {
    vertical-align: middle;
}

.create-device-notification {
    margin-top: 10px;
    margin-bottom: 10px;
}

#ssid-settings-form,
#vlan-settings-form {
    overflow: auto;
    overflow-x: hidden;
    margin-bottom: 20px;
}

.throttle-element .slider {
    padding-top: 15px;
    padding-bottom: 15px;
}

.throttle-element .slider .slider-tick {
    display: block;
    position: relative;
    width: 100%;
    height: 30px;
}

.throttle-element .slider .slider-tick .tick {
    position: absolute;
    width: 50px;
    height: 22px;
    margin-top: -15px;
}

.throttle-element .slider .slider-tick .tick .line {
    width: 1px;
    height: 8px;
    border-left: 1px solid rgba(0, 0, 0, 0.15);
    margin: auto;
}

.throttle-element .slider .slider-tick .tick .value {
    text-align: center;
}

.throttle-element .slider .slider-tick .tick.tick-last .value {
    text-align: left;
}
#ni-top-slider .slider .slider-tick .tick .value {
    text-align: center !important;
}

.throttle-element .ssid-throttle-notify-message {
    padding-top: 5px;
    position: absolute;
    margin-left: 8px;
    font-size: 12px;
}

.throttle-element .throttle-input {
    position: relative;
    padding-right: 35px;
}

.throttle-element .throttle-input input {
    max-width: 100px;
    display: inline;
}

#network-settings-form, #advanced-network-settings-form {
    margin-bottom: 20px;
}

#network-settings-form .switchery,
#advanced-network-settings-form .switchery {
    margin-left: 8px;
}

#network-settings-form section[data-section-name="presence-analytics"], #network-settings-form section[data-section-name="syslog"] {
    display: none;
}
#network-settings-form .presence-analytics-item, #network-settings-form .syslog-item {
    display: flex;
    justify-content: flex-start;
    padding-left: 5px;
    align-items: center;
    flex-wrap: nowrap;
}
#network-settings-form .presence-analytics-item .pa-service-logo, #network-settings-form .syslog-item .syslog-service-logo {
    min-width: 75px;
    min-height: 75px;
}
#network-settings-form .presence-analytics-item .pa-service-logo img, #network-settings-form .syslog-item .syslog-service-logo img {
    max-width: 75px;
    max-height: 75px;
    opacity: 0;
    transition-duration: 500ms;
}
#network-settings-form .presence-analytics-item .pa-info, #network-settings-form .syslog-item .syslog-info {
    max-width: calc(100% - 75px);
}
#network-settings-form .presence-analytics-item .pa-info > *, #network-settings-form .syslog-item .syslog-info > * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#network-settings-form .presence-analytics-item .pa-info a, #network-settings-form .syslog-item .syslog-info a {
    white-space: nowrap;
}

.bord-btm-bold {
    position: relative;
    border-bottom: 1px solid #0391d180;
}

.text-semibold {
    font-weight: 600;
}

.text-1_5x {
    font-size: 1.5em;
}

.text-lg {
    font-size: 1.2em;
}

.line-1_5x {
    line-height: 1.5;
}

.line-2x {
    line-height: 2;
}

.currency-var {
    color: #0391d1;
}

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

.preview-size {
    float: right;
    padding-right: 55px;
}

.preview-size > h4 {
    padding-right: 20px;
}

@media (max-width: 700px) {
    .preview-size {
        float: initial;
        padding-right: 0;
    }
}

.p-y-20 {
    padding: 20px 0;
}

.m-20 {
    margin: 20px;
}

.m-t-35 {
    margin-top: 35px;
}

.p-15 {
    padding: 15px;
}

.p-l-5 {
    padding-left: 5px;
}

@media only screen and (max-width: 1700px) {
    .p-t-35 {
        padding-top: 35px;
    }

    .p-t-23 {
        padding-top: 23px;
    }
}

.dataTables_scrollBody {
    border: none !important;
}

.clearfix {
    clear: both;
}

#device-name-edit.form-control,
#device-mac-edit.form-control {
    display: inline;
    width: initial;
}

.edit-device-label {
    display: inline-block;
    width: 130px;
    white-space: nowrap;
}

.edit-device-action-buttons {
    margin: 50px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    padding: 0px 20px;
}

.action-btn-wrapper > button {
    text-align: center;
}

@media only screen and (max-width: 500px) {
    .edit-device-action-buttons {
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }

    .action-btn-wrapper #prev-btn, .action-btn-wrapper #next-btn {
        width: 40px;
        height: 40px;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #prev-btn .fa-angle-left, #next-btn .fa-angle-right {
        font-weight: bold;
        font-size: 16px;
        position: unset !important;
    }

    #prev-btn #prev-title, #prev-btn #prev-entry, #next-btn #next-title, #next-btn #next-entry  {
        display: none;
    }
}

.dataTables_wrapper {
    padding-top: 18px;
    display: flex;
    flex-wrap: wrap;
}

.color-white {
    color: white;
}

.device-ports {
    padding-top: 30px;
    position: relative;
}

.device-ports .popover {
    transform: translateX(-50%);
}

.device-ports.animation {
    transition: margin ease 0.3s;
}

.device-ports.device-ports-general {
    padding-top: 15px;
}

#switchTab .label-port-status {
    color: #4d627b !important;
    border-color: #7a878e5e;
}

#switchTab .label-port-status a.goto-device-l2-topology {
    color: #4d627b;
}

.device-ports .device-ports-inner.fixed-height svg {
    max-height: inherit;
}

.device-ports .device-ports-inner {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

div.dataTables_scrollBody > table.data-table,
div.dataTables_scrollBody > table.dataTable {
    border-top: none;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
}

#portVlanSave {
    margin-bottom: 20px;
}

@-moz-document url-prefix() {
    .dataTables_scroll .dataTables_scrollHead table {
        width: calc(100% - 2px) !important;
    }

    .dataTables_scroll .dataTables_scrollBody table {
        width: calc(100% - 2px) !important;
    }
}

table.dataTable.no-footer {
    border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
}

.btn-not-allowed {
    cursor: not-allowed;
}

.btn-click {
    cursor: pointer;
}

.view-options-dropdown {
    display: inline-block;
}

.view-options-dropdown .dropdown-menu li:not(.view-option) {
    height: 0;
}

.magic-checkbox + label:not(:empty) {
    margin: 0 !important;
}

.dropdown-list {
    padding: 5px;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, auto);
    list-style: none;
}

@media screen and (max-width: 980px) {
    .dropdown-list {
        padding: 5px;
        grid-template-columns: repeat(1, auto);
    }
}

.dropdown-list > li {
    white-space: nowrap;
}

.connected-with-poe {
    fill: blue !important;
    stroke: blue !important;
}

.disabled {
    fill: rgba(0, 0, 0, 0.4) !important;
    stroke: rgba(0, 0, 0, 0.4) !important;
}

.disconnected {
    fill: black !important;
    stroke: black !important;
}

.poe-disabled:not(.connected) {
    fill: rgba(0, 0, 0, 0.4) !important;
    stroke: rgba(0, 0, 0, 0.4) !important;
}

[id^="la-port-"].la-port {
    display: inline;
    stroke: #00ffd7 !important;
}

[id^="la-port-"].la-port1 {
    display: inline;
    stroke: #00d5ff !important;
}

[id^="la-port-"].la-port2 {
    display: inline;
    stroke: #3ecb00 !important;
}

[id^="la-port-"].la-port3 {
    display: inline;
    stroke: #ba009d !important;
}

[id^="la-port-"].la-port4 {
    display: inline;
    stroke: #8800aa !important;
}

[id^="la-port-"].la-uplink-port {
    display: inline;
    stroke: #ffd700 !important;
}

#prev-btn,
#next-btn {
    font-size: 13px;
    position: relative;
    width: 100%;
    transition: none;
}

#prev-btn {
    padding-left: 44px;
    padding-right: 27px;
}

#next-btn {
    padding-right: 44px;
    padding-left: 27px;
}

#prev-btn .fa-angle-left {
    position: absolute;
    left: 10px;
    top: calc(50% - 5px);
}

#next-btn .fa-angle-right {
    position: absolute;
    right: 10px;
    top: calc(50% - 5px);
}

#prev-entry,
#next-entry {
    display: block;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assigned-ssids {
    padding-top: 20px;
    padding-bottom: 20px;
}

.device-configuration {
    padding-top: 50px;
}

.popover {
    display: block !important;
}

.popover.right {
    margin-right: 8px;
}

@media (min-width: 768px) {
    .menu-popover.popover {
        transform: translateX(0%);
    }
}

.actions-menu {
    list-style: none;
    font-size: 13px;
    min-width: 160px;
    text-align: left;
    background-clip: padding-box;
    margin-bottom: 0px;
    padding: 5px;
}

.actions-menu > li > a {
    color: #4d627b;
    text-decoration: none;
    padding: 7px 10px;
    display: block;
    border-radius: 3px;
    white-space: nowrap;
}

.actions-menu > li > a:hover {
    background-color: #4b6c92;
    border-color: #4b6c92;
    color: #fff;
    cursor: pointer;
}

#settings-menu ul.head-list > li,
.schedule-actions ul.head-list > li {
    color: #4d627b;
}

#settings-menu ul.head-list > li:hover,
.schedule-actions ul.head-list > li:hover {
    background-color: #4b6c92;
    border-color: #4b6c92;
    color: #fff;
}

.client-actions-menu {
    min-width: 180px;
}

#device-panel-edit {
    position: relative;
}

.alert-danger a {
    color: #2b3252;
}

#mainnav-menu i {
    min-width: 2em;
    text-align: center;
}

.status-cell {
    position: relative;
}

.status-icons {
    position: absolute;
    display: inline-block;
    top: 50%;
    transform: translateY(-50%);
    padding-left: 5px;
}

.status-icons i {
    color: #f0685e;
    margin-bottom: 3px;
    padding: 0px;
}

.status-icons i.soft-warning {
    color: #d4d4d4;
}

.status-icons i.icon-inprogress {
    color: var(--plasma-cloud-main-color);
    margin-right: 0px;
    font-size: 13px;
}

.device-errors.actions-menu li {
    padding: 7px 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.device-errors.actions-menu li .btn.btn-default {
    margin-left: 10px;
    font-size: 11px;
    padding: 5px 10px;
}

.device-errors.actions-menu li > .buttons {
    display: flex;
}

.device-errors.actions-menu li.divider {
    padding: 0px;
    height: 1px;
}

.device-errors.actions-menu li span {
    float: left;
}

.device-errors.actions-menu li.firmware-upgrade span {
    width: calc(100% - 50px);
}

.device-errors.actions-menu li span.middle {
    line-height: 34px;
}

.device-errors.actions-menu li a {
    font-weight: bold;
}

@media screen and (max-width: 768px) {
    .device-errors.actions-menu li span.middle {
        line-height: 34px;
    }
}

.device-errors.actions-menu li a:hover {
    color: #4d627b;
    background: transparent;
}

@media screen and (max-width: 1500px) {
    .status-icons {
        width: 0;
        right: 23px;
        padding: 0;
    }

    .status-icons.status-upgrade-inprogress {
        width: auto;
        right: 0px;
    }
}

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

.poe-speedometer {
    clear: both;
}

.switch-panel-head {
    display: flex;
    justify-content: space-between;
}

.switch-panel-head > button {
    align-self: center;
}

.switch-details {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

@media only screen and (max-width: 1200px) {
    .poe-speedometer {
        margin: 35px 0;
    }

    .switch-panel-head {
        width: 100%;
    }
}

#import-mode-div {
    text-align: left;
}

#import-network-notification {
    text-align: left;
}

.cursor-pointer {
    cursor: pointer;
}

.ip-addresses {
    display: table;
    margin: 0 auto;
    text-align: left;
}

.ip-addresses > p {
    margin-bottom: 0;
}

.ip-addresses > span {
    display: inline-block;
}

.lan {
    margin-left: 4px;
}

.gw {
    margin-left: 9px;
}

.wan {
    margin-left: 2px;
}

@media screen and (max-width: 1460px) {
    .wan,
    .gw,
    .lan {
        margin-left: 0;
        display: block;
    }
}

#network-settings-form .switchery,
#ssid-settings-form .switchery,
#networkLanBlockDiv  .switchery,
#vlan-settings-form .switchery {
    margin-left: 0;
    margin-top: 8px;
}

#vlan-settings-form .switchery {
    display: block;
}

#page-content {
    position: relative;
    padding: 20px 0px 0;
}

.block-usage-site {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    z-index: 999999;
}

.block-usage-site:after {
    position: absolute;
    display: block;
    content: "";
    background: rgba(255, 255, 255, 0.5);
    top: 0px;
    bottom: 0px;
    left: 0px;
    width: 100%;
}

.block-usage-site span {
    display: block;
    position: absolute;
    top: 48%;
    left: 0px;
    width: 100%;
    text-align: center;
    color: var(--plasma-cloud-main-color);
    font-size: 20px;
    z-index: 1;
}

#ie-notification {
    background: white;
    border: 2px solid var(--plasma-cloud-main-color);
    width: 90%;
    margin: 0 5% 0 5%;
}

@media screen and (max-width: 840px) {
    #orgs-head,
    #networks-head {
        max-width: 150px;
    }
}

@media screen and (max-width: 580px) {
    #orgs-head,
    #networks-head {
        max-width: 130px;
    }
}

@media screen and (max-width: 530px) {
    #orgs-head,
    #networks-head {
        max-width: 6em;
    }
}

@media screen and (max-width: 320px) {
    .navbar-top-links > li > a > i {
        font-size: 16px;
        line-height: 1em;
        vertical-align: middle;
        padding-left: 24px;
    }

    .navbar-top-links > li > a {
        padding: 0 6px;
    }

    #orgs-head,
    #networks-head {
        max-width: 6em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #networks-head.navbar-top-links > li > a {
        padding: 0 10px;
    }
}

.poe-speedometer.panel-primary.panel-colorful {
    background: transparent;
    border: 0px;
    color: #7a878e;
    width: calc(100% - 90px);
}

#poe-widget-canvas {
    margin: 0px auto;
    display: block;
}

.poe-widget-canvas-half-value {
    font-size: 11px;
    text-align: center;
    font-family: sans-serif;
}

.device-poe-stats {
    display: block;
    text-align: center;
}

/**
 * Qr Code Styles
 */
#create-device .mac-addr {
    float: left;
    display: block;
    width: calc(100% - 60px);
}

#create-device .mac-addr.error {
    border: 1px solid #FF0000
}

#create-device .mac-addr.class-width-100,
#modal_search_device .mac-addr.class-width-100 {
    width: 100%;
}

#create-device .help-block {
    margin-bottom: 0px;
}

.f-left {
    float: left;
}

.sm {
    font-size: 10px;
    line-height: 30px;
    margin-left: 8px;
    text-transform: uppercase;
}

.scan-qr {
    float: right;
    width: 60px;
}

.btn-qrcode-scan {
    background-image: url(../img/qr.png);
    width: 32px;
    height: 32px;
    display: block;
    float: right;
    position: relative;
}

.form-scan {
    margin-top: 15px;
}

#scan_qr_form {
    display: none;
}

#qr-video {
    width: 100%;
}

.camera-viewer {
    margin-top: -10px;
}

.camera-viewer .red {
    color: #f00;
}

.camera-viewer .alert {
    margin-bottom: 10px;
}

.camera-viewer .video-container {
    text-align: center;
}

.camera-viewer .video-container a {
    display: inline-block;
    padding: 5px 10px;
    background-color: #fff;
    color: var(--plasma-cloud-main-color);
    border-radius: 2px;
    border: 1px solid var(--plasma-cloud-main-color);
    text-align: center;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 10px;
}

.camera-viewer .video-container a.active {
    background-color: var(--plasma-cloud-main-color);
    color: #fff;
}

.highlight {
    background-color: #ffba13;
    color: #000;
    border-radius: 2px;
    padding: 0px 4px;
}

.leaflet-popup-content {
    width: 220px;
}

#create-device label {
    display: block;
}

.scan-qr .fa-spinner {
    display: none;
    color: #177bbb;
    left: calc(50% - 6px);
    top: calc(50% - 6px);
}

table.data-table tr {
    cursor: pointer;
}

#org_settings_change_log_table_fragment table.data-table tr {
    cursor: inherit;
}

.wifi-settings-group {
    padding-top: 5px;
    padding-left: 20px;
    margin-bottom: 10px;
}

.wifi-settings-group .text-1_5x {
    font-size: 1.2em;
}

.wifi-settings-group #device-channels {
    padding-left: 20px;
}

.wifi-settings-group #device-channels .text-1_5x {
    font-size: 1.1em;
}

.wifi-settings-group.enabled-wifi-ai #device-channels > .col-lg-12 {
    clear: both;
}

.wifi-settings-group.enabled-wifi-ai
    #device-channels
    .radio-group-row
    > .col-lg-12 {
    clear: both;
    float: none;
}

@media (max-width: 1200px) {
    .wifi-settings-group.enabled-wifi-ai #device-channels > .col-lg-12 {
        width: 100%;
    }
}

.modal-open #navbar {
    z-index: 1000;
}

.dropdown-search > div {
    flex-grow: 1;
}

.dropdown-search i.fa-search {
    cursor: pointer;
}

.dropdown-menu-right i.fa-plus {
    margin-top: 3px;
}

.dropdown-menu-right .fa-cloud-download-alt {
    margin-top: 4px;
}

/* No Orgnisations */
.no-organisations .menu-access-points,
.no-organisations .menu-switch,
.no-organisations .menu-clients,
.no-organisations .menu-topology,
.no-organisations .menu-settings,
.no-organisations .menu-marketplace,

/* No Networks */
.no-networks .menu-access-points,
.no-networks .menu-switch,
.no-networks .menu-clients,
.no-networks .menu-topology,
.no-networks .menu-settings,
.no-networks .menu-settings-network,
.no-networks .menu-settings-advanced-network,
.no-networks .menu-settings-ssid,
.no-networks .menu-settings-vlan,
.no-networks .menu-settings-floorplan {
    display: none;
}

.no-networks:not(.no-organisations) .menu-settings {
    display: block;
}

.no-organisations .menu-org-name,
.no-networks .menu-org-name {
    margin-top: 5px !important;
}

#advanced-network-settings-item {
    margin-left: 12px;
}

.port-uplink {
    stroke: gold !important;
    stroke-width: 2 !important;
}

.sfp-uplink {
    stroke: gold !important;
    stroke-width: 1.3 !important;
}

.chosen-container-single .chosen-single abbr,
.chosen-container-single .chosen-single div b,
.chosen-container-single .chosen-search input[type="text"],
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close,
.chosen-rtl .chosen-search input[type="text"] {
    background-image: none;
}

.display-block {
    display: block;
}

.pac-container {
    z-index: 10001;
}

#network-settings-form .scs-group .switchery {
    margin-top: 0px;
}

#network-settings-form .scs-group .scs-notify-message {
    margin-left: 8px;
    font-size: 12px;
}

.ssid-splashpages,
.ssid-vlans,
.network-vlans,
.network-voice-vlans {
    position: relative;
    padding-right: 55px;
}

.ssid-splashpages > button,
.ssid-vlans > button,
.network-vlans > button,
.network-voice-vlans > button,
.maintenance-schedules > button,
.poe-schedules > button,
.wifi-schedules > button {
    position: absolute;
    right: 0;
    top: 0px;
    cursor: pointer;
}

#image-management-modal-content {
    position: relative;
}

#image-management-modal-content .info {
    text-align: center;
    margin-bottom: 15px;
}

#image-management-modal .modal-dialog {
    margin-top: 0px;
}

#image-management-modal .dropzone {
    margin-bottom: 15px;
    padding: 5px 0px;
    min-height: 0px;
}

#image-management-modal .modal-body {
    padding-top: 0px;
}

#image-management-modal .modal-footer {
    position: relative;
}

#image-management-modal hr {
    margin-top: 0px;
    margin-bottom: 10px;
}

#image-management-modal table.tinymce-assets-table {
    border: 0px;
    width: 100%;
}

#image-management-modal table.tinymce-assets-table td.tinymce-assets-col {
    vertical-align: middle;
    text-align: center;
    padding: 10px;
    cursor: pointer;
}

#image-management-modal
    table.tinymce-assets-table
    td.tinymce-assets-col.selected {
    background: #0391d1;
    color: #fff;
    cursor: default;
}

#image-management-modal table.tinymce-assets-table td.tinymce-assets-col img {
    border: 2px solid #0391d1;
    border-radius: 10px;
    max-width: 100%;
}

#image-management-modal table.tinymce-assets-table td.tinymce-assets-col p {
    margin: 10px 0px;
}

#image-management-modal table.tinymce-assets-table td.tinymce-assets-col p i {
    padding-left: 5px;
    display: none;
}

#image-management-modal
    table.tinymce-assets-table
    td.tinymce-assets-col.selected
    p
    span,
#image-management-modal
    table.tinymce-assets-table
    td.tinymce-assets-col.selected
    p
    i {
    display: inline;
    cursor: pointer;
}

#image-management-modal
    table.tinymce-assets-table
    td.tinymce-assets-col
    .update-name {
    margin: 7px 0;
    display: none;
    width: 100%;
    max-width: 200px;
}

#image-management-modal
    table.tinymce-assets-table
    td.tinymce-assets-col
    .update-name
    input {
    width: calc(100% - 24px);
    color: #555;
}

#image-management-modal
    table.tinymce-assets-table
    td.tinymce-assets-col
    .update-name
    i {
    padding-left: 5px;
    cursor: pointer;
}

#image-management-modal .image-management-tooltip {
    height: 50px;
    display: none;
    text-align: center;
}

#image-management-modal .image-management-tooltip.active {
    display: block;
}

#image-management-modal .image-management-tooltip > span {
    text-align: center;
    padding: 10px 15px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid;
    width: 70%;
    line-height: 50px;
}

#image-management-modal .image-management-tooltip > span > span {
    border-radius: 2px;
    color: #000;
    padding: 3px 10px;
    border: 1px solid #ccc;
    background: #eee;
}

#image-management-modal .dropzone .dz-message {
    margin: 0px;
}

#image-management-modal .btn-choose-asset {
    display: none;
}

#image-management-modal.choose-asset-modal .btn-choose-asset {
    display: inline-block;
}

.dropzone.dz-drag-hover,
.dropzone-container.dz-drag-hover {
    border-color: #31708f;
    border-width: 2px;
}

@font-face {
    font-family: "icomoon";
    src: url("/fonts/icomoon.eot?lp1c5r");
    src: url("/fonts/icomoon.eot?lp1c5r#iefix") format("embedded-opentype"),
        url("/fonts/icomoon.ttf?lp1c5r") format("truetype"),
        url("/fonts/icomoon.woff?lp1c5r") format("woff"),
        url("/fonts/icomoon.svg?lp1c5r#icomoon") format("svg");
    font-weight: normal;
    font-style: normal;
}

[class^="icon-wifi-off"]::before,
[class*=" icon-wifi-off"]::before {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: "icomoon" !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-wifi-off:before {
    content: "\e900";
}

.icon-wifi:before {
    content: "\e901";
}

.select2-results li .ssid-with-icon {
    position: relative;
    padding-left: 30px;
}

.select2-results li span span {
    font-family: "Open Sans", Arial, sans-serif;
    font-weight: 500;
}

.select2-results li .ssid-with-icon:before {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translate(0px, -50%);
}

.icon-inprogress {
    font-size: 18px;
    color: var(--plasma-cloud-main-color);
    margin-right: 15px;
}

.icon-firmware {
    color: var(--plasma-cloud-main-color) !important;
}

.icon-firmware-error {
    color: #d4d4d4 !important;
}

.status-icons i.icon-wifi-off {
    color: var(--plasma-cloud-main-color);
    font-weight: bold;
}

#ssids-menu li i.icon-wifi-off,
#ssids-menu li i.icon-wifi-scheduled,
#ssids-menu li i.icon-ssid-disabled {
    position: absolute;
    left: 35px;
    top: 50%;
    transform: translate(0px, -50%);
}

.mainnav-sm #ssids-menu li {
    position: relative;
    padding-left: 0px;
}

.mainnav-sm #ssids-menu li > a {
    padding-left: 27px;
}

.mainnav-sm #ssids-menu li > a i.icon-wifi-off,
.mainnav-sm #ssids-menu li > a i.icon-wifi-scheduled,
.mainnav-sm #ssids-menu li > a i.icon-ssid-disabled {
    left: 8px;
}

.dropdown-menu li.disabled a,
.dropdown-menu li.disabled.selected a {
    background: gray;
}

.dropdown-menu li.disabled a:hover,
.dropdown-menu li.disabled.selected a:hover {
    background: gray;
    color: #4d627b;
}

.bootstrap-timepicker-widget table td input.bootstrap-timepicker-day {
    width: 35px;
}

.form-group > .checkbox {
    margin-top: 6px;
    margin-bottom: 6px;
}

#maintenance_window,
#wifi_scheduling {
    margin-bottom: 15px;
}

#networkEthVlanDiv {
    padding-left: 20px;
}

.ssid-wan-vlan-container {
    padding-left: 20px;
}

@media (min-width: 768px) {
    #navbar .brand-title {
        padding-right: 1em;
    }

    #per-device-graph-modal .modal-dialog {
        width: 750px !important;
    }

    #per-device-graph-modal .loading {
        top: 0px;
    }
}

/*
    #3498
    Nifty theme's modal dialog defines `before`.
    Then this `before` pseudo-element makes the top spaces at mobile screen above dialog.
    So here, we remove `before` and instead use margin-top of dialog.
*/
#per-device-graph-modal::before {
    content: none;
}

#per-device-graph-modal .modal-dialog {
    width: 90%;
    margin-top: 20px;
    max-width: 100%;
}

#per-device-graph-modal .modal-header {
    padding: 15px 15px 0;
}

#per-device-graph-modal .modal-body {
    padding-top: 0;
}

.highcharts-title {
    opacity: 0 !important;
}

#wifi-chart-last-updated {
    font-size: 12px;
    font-style: italic;
    margin-left: 5px;
}

#layer2-last-updated {
    font-size: 12px;
    font-style: italic;
    margin-left: 15px;
}

.leaflet-div-icon {
    margin-left: 0px !important;
    margin-top: 0px !important;
    width: 0px !important;
    height: 0px !important;
    border: none;
}

/*Wraperclass for the divicon*/
.map-wifi-rf-label {
    position: absolute;
    bottom: 5px;
    left: 50%;
    display: flex;
    flex-direction: column;
    text-align: center;
    transform: translate(-50%, 0%);
    color: white;
}
/*Wrap the content of the divicon (text) in this class*/
.map-wifi-rf-label-content {
    order: 1;
    position: relative;
    background-color: var(--plasma-cloud-main-color);
    border-radius: 5px;
    border-width: 2px;
    border-style: solid;
    border-color: #444;
    padding: 3px;
    white-space: nowrap;
    font-weight: bold;
    min-width: 30px;
    font-size: 1.2em;
}

#per-device-graph-modal .goto-device-settings {
    text-decoration: none;
    padding: 0px 2px 0px;
    color: var(--plasma-cloud-link-color);
    font-weight: bold;
}
#per-device-graph-modal .goto-device-settings:hover {
    color: var(--plasma-cloud-link-hover-color);
}


.pl-15 {
    padding-left: 15px;
}

.pr-15 {
    padding-right: 15px;
}

.popover-content {
    padding-bottom: 10px;
}

.fa-exclamation-triangle .popover {
    display: none;
}

.fa-exclamation-triangle:hover .popover {
    display: block;
}

.popover .divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: #e5e5e5;
}

#data-table-warning {
    font-size: 0.5em;
}

#buy-plan-modal .plans-title .close {
    position: absolute;
    top: 7px;
    right: 9px;
    font-size: 20px;
    color: #4d627b;
    cursor: pointer;
}

.icon-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.icon-group > i {
    margin-left: 10px;
}

.modal {
    z-index: 11002 !important;
}

.modal-backdrop {
    z-index: 11001 !important;
}

.mac-addr {
    text-transform: uppercase;
}

.mac-addr::placeholder {
    /* Recent browsers */
    text-transform: none;
}

input[type="checkbox"][data-switchery="true"][disabled] + span.switchery {
    cursor: not-allowed;
}

#advanced-network-settings-form #ssh_public_keys_table:before {
    position: absolute;
    border: 3px solid #0391d1;
    top: 0px;
    left: 0px;
    width: 100%;
    bottom: 0px;
}

#advanced-network-settings-form #ssh_public_keys_table.highlight-setting:before {
    content: "";
    display: block;
}

#device-panel-edit .highlight-setting,
.select2-container.highlight-setting,
.form-control.highlight-setting,
.switchery.switchery-default.highlight-setting,
.btn.dropdown-toggle.highlight-setting,
.switchery.switchery-large.highlight-setting,
.bootstrap-tagsinput.highlight-setting {
    border-color: #0391d1 !important;
    border-width: 3px !important;
    /*
        A disabled multi-select may have 0.5 opacity
        We should make it the full opacity when highlighting
    */
    opacity: 1 !important;
}

.select2-container.highlight-setting {
    border-style: solid;
    border-radius: 6px;
}

#switchTab table.dataTable tbody tr.row-data {
    cursor: pointer;
}

.row-data {
    color: inherit;
    background-color: inherit;
    transition: all ease 2s;
}

.row-data.hover {
    color: #fff !important;
    background-color: #6285ae !important;
    transition: none;
}

#port-detail {
    padding-top: 30px;
}

.mgmt-vlan-label {
    font-style: italic;
}

/* Search Device Modal */
#modal_search_device .dataTables_wrapper {
    padding: 0px;
}

#modal_search_device .loading {
    height: auto;
    bottom: 0px;
    top: 0px;
}

#modal_search_device .device-not-found {
    text-align: center;
    padding: 20px 0px;
    font-size: 16px;
}

#modal_search_device .magic-radio {
    width: 15px;
    height: 15px;
}

#modal_search_device .btn-goto-device {
    margin-top: 10px;
}

#modal_search_device .table-bordered {
    border-top: 1px solid;
}

#modal_search_device .table-bordered,
#modal_search_device .table-bordered td,
#modal_search_device .table-bordered th {
    border-color: rgba(0, 0, 0, 0.07);
}

#modal_search_device .table td {
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}

#modal_search_device .table td .radio {
    display: flex;
    justify-content: center;
    align-items: center;
}

#modal_search_device table.dataTable thead .sorting_asc:first-child:after {
    display: none;
}

.device-popup .device-status-name {
    overflow: hidden;
}

.device-popup .device-status-name .device-status {
    margin-right: 15px;
    float: left;
}

.device-popup .device-status-name .device-name {
    margin-top: 5px;
}

.device-popup .device-mac-address {
    margin: 10px 0px;
}

.device-popup .device-model {
    margin-top: 10px;
}

.usage-chart .bootstrap-select {
    width: 100% !important;
}

.client-signal-strength svg {
    width: 2.2em;
}

.client-signal-strength.client-signal-strength-1 svg #bar-1 {
    fill: var(--plasma-cloud-main-color);
}

.client-signal-strength.client-signal-strength-2 svg #bar-1,
.client-signal-strength.client-signal-strength-2 svg #bar-2 {
    fill: var(--plasma-cloud-main-color);
}

.client-signal-strength.client-signal-strength-3 svg #bar-1,
.client-signal-strength.client-signal-strength-3 svg #bar-2,
.client-signal-strength.client-signal-strength-3 svg #bar-3 {
    fill: var(--plasma-cloud-main-color);
}

.client-signal-strength.client-signal-strength-4 svg #bar-1,
.client-signal-strength.client-signal-strength-4 svg #bar-2,
.client-signal-strength.client-signal-strength-4 svg #bar-3,
.client-signal-strength.client-signal-strength-4 svg #bar-4 {
    fill: var(--plasma-cloud-main-color);
}

.client-signal-strength.client-signal-strength-5 svg #bar-1,
.client-signal-strength.client-signal-strength-5 svg #bar-2,
.client-signal-strength.client-signal-strength-5 svg #bar-3,
.client-signal-strength.client-signal-strength-5 svg #bar-4,
.client-signal-strength.client-signal-strength-5 svg #bar-5 {
    fill: var(--plasma-cloud-main-color);
}

img.wifi-logo {
    height: 1.6em;
}

#ssh_public_keys_table {
    margin-bottom: 10px;
    position: relative;
}

#ssh_public_keys_table .dataTables_wrapper {
    padding-top: 0px;
    padding-bottom: 20px;
}

#ssh_public_keys_table .dataTables_wrapper .dt-buttons {
    padding-left: 0px;
}

.system-ssh-setting .text-1_5x {
    font-size: 1.2em;
}

.system-ssh-setting {
    padding-top: 5px;
    margin-left: 20px;
    margin-bottom: 10px;
    margin-right: 10px;
}

.email-alert-threshold-desc {
    margin-top: 7px;
    margin-right: 10px;
}

.email-alert-threshold-minutes {
    margin-top: 7px;
    margin-left: 10px;
}

.input-email-alerts-threshold {
    width: 100px;
    text-align: center;
}

#page-title #page-string {
    float: left;
    font-size: 1.5em;
}

.action-menu {
    float: right;
}

.chosen-disabled input:disabled {
    cursor: not-allowed !important;
}

.settings-form {
    position: relative;
}

.settings-form:before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 20;
}

.settings-form.active:before {
    display: none;
}

.device-no-layer2-data {
    color: red;
    text-align: center;
}

.modal-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0px !important;
}

.modal-qrcode-scan-search-device .modal-content {
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.nowrap {
    white-space: nowrap;
}

.link-like {
    cursor: pointer;
}

.link-like:hover {
    text-decoration: underline;
}

.bootstrap-select.btn-group .dropdown-menu li a,
.chosen-container .chosen-results li,
.chosen-container-multi .chosen-choices li.search-choice span {
    font-family: "Open Sans", Arial, sans-serif;
    font-weight: normal;
}

.bootstrap-select.btn-group .dropdown-menu li a.fa:before,
.bootstrap-select.btn-group .dropdown-menu li a.far:before,
.chosen-container .chosen-results li.fa:before,
.chosen-container .chosen-results li.far:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.bootstrap-select.btn-group .dropdown-menu li a.far:before,
.chosen-container .chosen-results li.far:before {
    font-weight: 400;
}

.assigned-ssids .chosen-container .chosen-results li.ssid-with-icon {
    padding-left: 23px;
    position: relative;
}

.assigned-ssids .chosen-container .chosen-results li.fa.ssid-with-icon:before,
.assigned-ssids .chosen-container .chosen-results li.far.ssid-with-icon:before,
.assigned-ssids .chosen-container .chosen-results li.icon-wifi-off.ssid-with-icon:before {
    position: absolute;
    left: 5px;
}

.dropdown-menu > li:not(.hide) {
    padding-top: 7px;
}

.dropdown-menu > li:not(.hide):last-child {
    padding-bottom: 7px;
}

#log-list > a > .moved {
    margin-left: 26px;
    font-style: italic;
    display: block;
}

.add-time-slots-container .time-slots {
    margin: 0 10px 0 10px;
}

#client-sub-page .dataTables_wrapper {
    padding-left: 15px;
    padding-right: 15px;
}

/* The following are needed for the backend-message */
#backend-message {
    background-color: var(--plasma-cloud-main-color);
    color: white;
    padding: 1em 0.5em 1em 0.5em;
    position: fixed;
    z-index: 99999;
    width: 100%;
    text-align: center;
    font-weight: bold;
    white-space: nowrap;
    overflow-x: auto;
    top: 0;
}

.showing-banner .root {
    padding-top: 45px !important;
}

@media screen and (max-width: 768px) {
    .showing-banner .mainnav {
        padding-top: 45px !important;
    }
}

body.blur-modal-open {
    overflow: hidden;
}

body.blur-modal-open #content {
    position: relative;
}

body.blur-modal-open #page-head,
body.blur-modal-open #page-content {
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -o-filter: blur(4px);
    -ms-filter: blur(4px);
    filter: blur(4px);
}
body.blur-modal-open .blur-modal {
    opacity: 1;
}
.blur-modal {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    left: 0;
    top: 0;
    transition: opacity 0.3s;
    background: rgba(0, 0, 0, 0.2);
}
.blur-modal .modal-inner {
    max-width: 600px;
    padding: 10px 15px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50vh;
    transform: translateY(-50%);
}

.slider-container .noUi-base {
    cursor: pointer;
}

html:not([dir=rtl]) .noUi-horizontal .noUi-handle {
    right: -7px;
}

html:not([dir=rtl]) .noUi-horizontal .noUi-handle.noUi-active {
    right: -12px;
}

.tt-dataset {
    border-radius: 3px;
    box-shadow: 0 3px 7px rgb(0 0 0 / 30%);
    background-color: #FFF;
    padding: 7px;
}

.tt-suggestion.tt-selectable {
    white-space: nowrap;
    padding: 5px 10px 5px;
    cursor: pointer;
    border-radius: 3px;
}

.tt-suggestion.tt-selectable:hover, .tt-suggestion.tt-selectable.tt-cursor {
    background-color: var(--plasma-cloud-main-color);
    color: #fff;
}

#mainnav-menu ul ul a {
    position: relative;
}

#mainnav-menu ul ul a.nav-link-with-icon i.icon-wifi-off,
#mainnav-menu ul ul a.nav-link-with-icon i.icon-wifi-scheduled,
#mainnav-menu ul ul a.nav-link-with-icon i.icon-ssid-disabled {
    position: absolute;
    left: -11px;
    top: 50%;
    transform: translate(0px, -50%);
}

#floating-center-container .alert button.close .pci-circle.pci-cross {
    border: 0;
    width: auto;
    height: auto;
    transform: none;
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}

#floating-center-container .alert button.close .pci-circle.pci-cross:before {
    content: "\f00d";
    box-shadow: none;
    position: static;
    top: inherit;
    left: inherit;
}

#floating-center-container .alert button.close .pci-circle.pci-cross:after {
    display: none;
}

#perdevice-widgets-container {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

#perdevice-widgets-container .widget {
    border: 2px solid rgba(0,0,0,0.07);
    border-radius: 20px;
    padding: 10px 20px;
    width: 30%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
}

#perdevice-widgets-container .widget-sm {
    width: 15%;
}
#perdevice-widgets-container .widget-auto-width {
    width: auto;
}

#perdevice-widgets-container .widget-status {
    display: flex;
    flex-direction: column;
}

#perdevice-widgets-container .widget .widget-title {
    margin-left: 15px;
    color: #000;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

#perdevice-widgets-container .widget-sm .widget-title {
    margin-left: 0;
    text-align: center;
}

#perdevice-widgets-container .widget-sm .device-status {
    margin-top: 15px;
}

#perdevice-widgets-container .widget-sm .widget-modal .device-status {
    margin-top: 5px;
}

#perdevice-widgets-container .widget-sm .widget-modal {
    margin-top: 15px;
    text-align: center;
}

#perdevice-widgets-container .widget-sm .widget-modal .device-icon img {
    margin-top: 5px;
    max-width: 70px;
    width: 100%;
}

#perdevice-widgets-container .widget-sm .widget-modal .device-model {
    margin-top: 5px;
    white-space: nowrap;
}

#perdevice-widgets-container .widget .item-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 3px;
}

#perdevice-widgets-container .widget .widget-channel,
#perdevice-widgets-container .widget .widget-channel-width {
    margin-bottom: 15px;
    display: flex;
}

#perdevice-widgets-container .widget .item-wrapper .prop-name {
    color: #000;
}

#perdevice-widgets-container .widget .item-wrapper .device-icon {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media screen and (max-width: 720px) {
    #perdevice-widgets-container {
        flex-wrap: wrap;
        justify-content: space-around;
    }

    #perdevice-widgets-container .widget {
        width: 45%;
        margin-top: 15px;
    }

    #perdevice-widgets-container .widget-sm {
        width: 45%;
        margin-top: 0px;
    }
}

@media screen and (max-width: 767px) {
    #perdevice-widgets-container .widget .widget-channel > img,
    #perdevice-widgets-container .widget .widget-channel-width > img {
        display: none;
    }

    #perdevice-widgets-container .widget .widget-channel,
    #perdevice-widgets-container .widget .widget-channel-width {
        justify-content: center;
    }

    #perdevice-widgets-container .widget .widget-title {
        margin-left: 0;
    }
}

.modal-header .close .fa.fa-times {
    font-size: 16px;
    color: #4d627b;
    cursor: pointer;
}

.modal.modal-small .modal-header .close .fa.fa-times {
    font-size: 16px;
}

.mac-address-already-exists-section, .mac-address-rejected-section {
    text-align: center;
    color: #333;
}

.mac-address-already-exists-section .description-1, .mac-address-rejected-section .description {
    margin-bottom: 10px;
    line-height: 20px;
}

.mac-address-already-exists-section .description-2 {
    margin-bottom: 10px;
    line-height: 20px;
}

.mac-address-already-exists-section .description-3,
.mac-address-rejected-section .note,
.move-device-to-network-container .note
 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.mac-address-already-exists-section .description-3 i,
.mac-address-rejected-section .note i,
.move-device-to-network-container .note i {
    font-size: 40px;
    color: #4b6c92;
    margin-right: 15px;
}

.mac-address-already-exists-section .description-3 span,
.mac-address-rejected-section .note span,
.move-device-to-network-container .note span {
    text-align: left;
    display: block;
    padding: 10px;
    background: #ffeac8;
}

.load3 .loader:before {
    background: inherit;
}

.modal-move-device .modal-dialog {
    width: 450px;
}

.fw-600 {
    font-weight: 600!important
}

.dropdown-search {
    display: flex;
    align-items: center;
}

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

/* From old theme */
.navbar-top-links .dropdown-menu .nano {
    max-height: 265px;
}

.nano {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.nano>.nano-content {
    position: absolute;
    overflow: scroll;
    overflow-x: hidden;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.nano>.nano-content::-webkit-scrollbar {
    display: none
}

.nano>.nano-content:focus {
    outline: 0 !important
}

.nano>.nano-pane {
    background-color: rgba(0,0,0,0.1);
    position: absolute;
    width: 4px;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
    transition: all 0.7s;
    z-index: 100;
}

.nano>.nano-pane>.nano-slider {
    background-color: rgba(0,116,255,0.5);
    position: relative;
    margin: 0;
    border-radius: 0;
    opacity: 0.85
}

.nano.nano-hide {
    display: none !important
}

.has-scrollbar>.nano-content::-webkit-scrollbar {
    display: block
}

.nano:hover>.nano-pane,.nano-pane.active,.nano-pane.flashed {
    opacity: 0.99
}

* {
    scrollbar-width: thin !important;
}

/* Chromium scrollbar Fix */
*::-webkit-scrollbar {
    width: 8px;
}

.bord-top {
    border-top: 1px solid rgba(0,0,0,0.07)
}

.bord-btm {
    border-bottom: 1px solid rgba(0,0,0,0.07)
}

.navbar-top-links a.dropdown-toggle {
    padding: 0 12px;
    text-align: right;
}

.navbar-top-links .dropdown-toggle::after {
    display: none;
}


.tab-base .nav-tabs > .active > a {
    border-color: #7a878e5e !important;
    border-bottom: none !important;
}

.tab-base .tab-content {
    padding: 0;
}

.tab-base .tab-content > .active {
    padding: 15px;
}

.tab-base .nav-tabs {
    display: flex;
}

.tab-base .tab-border {
    border-left: 1px solid #7a878e5e;
    border-right: 1px solid #7a878e5e;
    border-bottom: 1px solid #7a878e5e;
    margin-bottom: 1em;
}

.tab-base .nav-tabs li a {
    white-space: nowrap;
}

.tab-base .nav-tabs > .dull {
    width: 100% !important;
    border-bottom: 1px solid #7a878e5e;
    z-index: 0;
}

.nav-link[data-bs-toggle="tab"] {
    transition: color .15s ease-in-out,background-color .15s ease-in-out;
}

.tab-base .nav-tabs > li:not(.active) > a:hover {
    border-color: #eee #eee #ddd;
    background-color: rgba(255,255,255,0.55);
    transition: background-color,0.3s;
}

.popover {
    font-size: 13px;
    min-width: 120px;
}

.popover-body {
    color: #222;
    padding: 0;
}

.popover .popover-header {
    color: #4d627b;
    font-size: 1.2em;
    font-weight: 600;
}

.jq-toast-wrap {
    z-index: 200000 !important;
    width: unset !important;
}

.jq-icon-success {
    background-color: #9cc56c;
    padding: 15px 3.2em 15px 35px !important;
    font-size: 13px;
    background-image: none !important;
}

.jq-icon-warning {
    background-color: #f7bb2b;
    padding: 15px 3.2em 15px 35px !important;
    font-size: 13px;
    background-image: none !important;
}

.jq-icon-error {
    background-color: #f0685e;
    padding: 15px 3.2em 15px 35px !important;
    color: #fff !important;
    font-size: 13px !important;
    background-image: none !important;
}

.close-jq-toast-single {
    top: 8px !important;
    right: 8px !important;
    font-size: 19px !important;
    font-weight: bold;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    padding: 4px 10px;
    border-radius: .4375rem;
    color: #75868f;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    outline: none;
}

.select2-container--default .select2-dropdown--above {
    display: flex;
    flex-direction: column;
}

.select2-container--default .select2-dropdown--above .select2-results {
    order: 1;
}

.select2-container--default .select2-dropdown--above .select2-search.select2-search--dropdown {
    order: 2;
}

span.select2-selection.select2-selection--single {
    outline: none;
}

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

.text-info, a.text-info:hover, a.text-info:focus {
    color: #0391d1 !important;
}

.form-check, .form-check * {
    cursor: pointer;
}

.required {
    border: 2px solid red !important;
    border-radius: 5px;
}

.brand-title .brand-text {
    white-space: nowrap;
}

.textbox-with-close {
    position: relative;
}

.dataTables_wrapper .dataTables_filter .textbox-with-close > label {
    position: relative;
}

.textbox-with-close .textbox-close-icon {
    position: absolute;
    right: 5px;
    top: 9px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding-top: 2px;
}

body:not(.device-mobile) .textbox-with-close .textbox-close-icon:hover {
    background-color: #EEE;
    border-radius: 3px;
}

.textbox-with-close input {
    padding-right: 27px;
}

.text-security {
    font-family: 'text-security-disc';
    -webkit-text-security: disc;
}

.view-options-dropdown .dropdown-menu {
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
}

.table-column-100 {
    min-width: 100px;
}

.table-column-150 {
    min-width: 150px;
}
.table-column-max-150 {
    max-width: 150px;
}

.table-column-label-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 150px;
    display: inline-block;
}