button, h1, h2, h3, h4, h5, h6, p, text, a, span, div {
    font-family: Segoe UI;
}

html {
    height: 100%;
}

body {
    padding: 0;
    background-color: white;
    height: 100%;
}

.btn-primary {
    color: white !important;
}

.btn-primary:hover {
    color: black !important;
}

.fas, .p-none {
    pointer-events: none;
}

.active > .nav-link {
    color: black !important;
}

.active > .nav-link-dark {
    color: #7AC143 !important;
}

.k-draghandle.k-state-selected:hover, .k-ghost-splitbar-horizontal, .k-ghost-splitbar-vertical, .k-list > .k-state-highlight, .k-list > .k-state-selected, .k-marquee-color, .k-panel > .k-state-selected, .k-scheduler .k-scheduler-toolbar .k-state-selected, .k-scheduler .k-today.k-state-selected, .k-state-selected, .k-state-selected:link, .k-state-selected:visited, .k-tool.k-state-selected {
    background-color: #7AC143 !important;
}

.k-list > .k-state-focused.k-state-selected, .k-listview > .k-state-focused.k-state-selected, .k-state-focused.k-state-selected, td.k-state-focused.k-state-selected {
    box-shadow: inset 0 0 3px 1px #7AC143 !important;
}

.bs-popover-bottom .arrow::after, .bs-popover-auto[x-placement^="bottom"] .arrow::after {
    border-bottom-color: #333132;
}

.p-absolute {
    position: absolute;
}

.br-max {
    border-radius: 100%;
}

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

.navbar {
    padding: 0;
    background-color: #EEEEEE;
    box-shadow: 10px 10px 20px #00000029;
}

@media (max-width: 992px) {
    .nav-item {
        height: 40px !important;
    }
}

.nav-item {
    padding: 0 30px !important;
    font: normal normal normal 14px/22px Segoe UI;
    text-transform: uppercase;
    color: #716B6B;
    font-weight: 500;
    transition: all 100ms ease-out;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    height: 50px;
}

.nav-item:hover {
    text-decoration: none;
    color: #716B6B;
    background-color: white;
}

.active {
    background-color: white;
    color: #7AC143 !important;
}

.nav-item.active > span, .nav-item:hover > span {
    background-color: #7AC142;
    width: 100%;
    height: 4px;
    bottom: 0;
    position: absolute;
    left: 0;
    opacity: 1;
    transition: all 300ms ease-out;
}

#section-nav {
    position: relative;
    z-index: 5;
}

.nav-divider {
    width: 2px;
    height: 40px;
    background-color: #00000038;
    margin: 0px 6px;
}

.nav-user {
    border-radius: 50%;
    width: 45px;
    overflow: hidden;
    display: inline-block;
    transition: box-shadow 100ms ease-out;
    cursor: pointer;
}

.nav-user:hover {
    box-shadow:  0 0px 8px 0 #000000;
}

.btn-add-camera {
    margin: 0;
    transition: 0.35s ease-out;
}

.double-height {
    height: 31rem;
    grid-row: span 2 !important;
    grid-column: span 2 !important;
}

.camera-ghost {
    opacity: 0.25;
}

.camera-item-ghost {
    opacity: 0;
}

.camera-drag {
    opacity: 0.8;
}

.cameras-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-style: italic;
    color: #716B6B;
    font-size: 1rem;
}

.camera-img {
    flex: 1;
    transition: transform 100ms ease-out;
    transform: scale(1);
    transform-origin: top left;
}

.camera-img-container {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
}

.btn-delete > .camera-item, .btn-delete > .camera {
    display: none;
}

#btn-delete:hover {
    cursor: not-allowed;
}

.btn-delete-hover {
    color: #fff;
    background-color: #F43636;
    border-color: #F43636;
}

/* Light */
body.light {
    background-color: white !important;
}

.cameras-message.light {
    color: black !important;
}

.camera-item-text.light {
    color: white !important;
}

.light.nav-user:hover {
    box-shadow: 0 0px 8px 0 rgb(0 0 0 / 64%) !important;
}

.camera.light {
    box-shadow: 0 0px 5px 0 rgb(120 120 120) !important;
    background-color: #cbdfc0 !important
}

.cameras-container.light {
    background-color: white !important;
}

.btn-delete-layout {
    position: absolute;
    float: left;
    left: 0;
    margin-left: 15px;
}

.k-loading-mask.k-opaque {
    display: none;
}

#gridCameraItemFilters .k-header {
    background-color: #7AC143;
}

.h-90 {
    height: 90%;
}

.btn-transparent {
    background-color: transparent;
    color: white;
    border: none;
}

.scale-2 {
    transform: scale(2);
}

.k-widget.k-listview {
    border: none;
}

.notification-box {
    transition: all 150ms ease-out;
    cursor: pointer;
}

.notification-box:hover {
    background-color: #7AC142;
    color: white;
    box-shadow: 0 0.1rem 0.1rem rgb(0 0 0 / 50%) !important
}

#listNotifications {
    width: 300px;
}

.popover {
    max-width: 500px;
}

.notification-badge {
    position: absolute !important;
    left: 24px;
    top: 1px !important;
    z-index: 1;
    padding: 2px 4px;
}

#btn-notifications {
    position: relative;
}

.bs-popover-left .arrow::after, .bs-popover-auto[x-placement^="left"] .arrow::after {
    right: 1px;
    border-left-color: #333132;
}

/* Dark */
.dark.navbar {
    background-color: #333132 !important;
}

.dark.nav-item {
    color: white !important;
}

.dark.active, .dark.nav-item:hover {
    background-color: #1c1c1c !important;
}

.dark.cameras-container {
    background-color: #626262 !important;
}

.dark.nav-divider {
    background-color: #ffffffa6;
}

.dark.navbar-toggler {
    color: white !important;
}