:root {
    /* Colors */
    --white: #FFFFFF;
    --black: #000000;
    --light: #EBF9FF;
    --dark-30: #4D4D4D;
    --blueish-white: /*#E5F8FF*/ #FFFFFF;
    --blue: #3D68D6;
    --lavender: #92AAE8;
    --grey: #7B82A8;
    --dark-grey: #4B5172;
    --orange: #FB9638;
    --red: #F45A7F;
    --green: #3D8480;
}

h1, h2, h3, h4, h5, h6, strong, .h1, .h2, .h3, .h4, .h5, .h6, .strong {
    font-family: "Proxima Nova", 'proxima_novasemibold', "Trebuchet MS", Arial, sans-serif !important;
}

p, blockquote, pre, small, span, em, div, .p, .blockquote, .pre, .small, .span, .em, .div {
    font-family: "Proxima Nova", 'proxima_novaregular', "Trebuchet MS", Arial, sans-serif !important;
}

html, body {
    font-family: "Proxima Nova", 'proxima_novaregular', "Trebuchet MS", Arial, sans-serif !important;
    background: var(--light);
    color: var(--dark-30);
}
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
    overflow-x: hidden;
}

#highlight {
    overflow-x: auto;
}

.bg-blue-orange-gradient-sm {
    background: rgb(64,201,255);
    background: linear-gradient(174deg, rgba(64,201,255,1) 0%, rgba(253,202,155,1) 100%);
}

@media (min-width: 992px) {
    html {
        font-size: 16px;
        overflow-x: auto;
    }

    html, body {

    }

    .bg-blue-orange-gradient-sm {
        background: none;
        background: none;
    }

}

.rounded-20 {
    border-radius: 20px;
}

.rounded-15 {
    border-radius: 20px;
}

.nav ul li, .nav ul li svg path {
    fill: var(--dark-30);
    color: var(--dark-30);
}

.nav ul li svg.triangle path {
    fill: var(--white);
}

.bg-blue-orange-gradient {
    background: rgb(64,201,255);
    background: linear-gradient(174deg, rgba(64,201,255,1) 0%, rgba(253,202,155,1) 100%);
}

.bg-blueish-white {
    background: var(--blueish-white);
}

.bg-blue {
    background: var(--blue);
}

.bg-lavender {
    background: var(--lavender);
}

.bg-orange {
    background: var(--orange);
}

.bg-light {
    background-color: var(--light)!important;
}

.text-grey {
    color: var(--grey);
}

.text-dark-grey {
    color: var(--dark-grey);
}

.text-blue {
    color: var(--blue);
}

.text-lavender {
    color: var(--lavender);
}

.text-dark-30 {
    color: var(--dark-30);
}

.text-red, .text-red svg path, .text-red svg line {
    color: var(--red);
    fill: var(--red);
    stroke: var(--red);
}

.text-green, .text-green svg path, .text-green svg line {
        color: var(--green);
        fill: var(--green);
        stroke: var(--green);
    }

.text-orange, .text-orange svg path, .text-orange svg line {
    color: var(--orange);
    fill: var(--orange);
    stroke: var(--orange);
}

.border-blue {
    border-color: var(--blue);
}

.fw-semi-bold {
    font-weight: 500;
}

.dashboard-item, .item, .dropdown-menu ul {
    /*filter: drop-shadow(rgba(0,0,0,.08) 3px 3px 8px);*/
    box-shadow: rgba(0,0,0,.1) 1px 1px 8px;
}

/* Buttons */

.btn-blue, .btn-blue span, .btn-blue svg path {
    background-color: var(--blue) !important;
    color: var(--white);
    fill: var(--white);
}

.btn-blue.active, .btn-blue:active, .btn-blue:hover, .btn-blue:focus,
.btn-blue.active svg path, .btn-blue:active svg path, .btn-blue:hover svg path, .btn-blue:focus svg path,
.btn-blue span, .btn-blue:active span, .btn-blue:hover span, .btn-blue:focus span {
    background-color: var(--white)!important;
    color: var(--blue);
    fill: var(--blue);
}

.btn-blue-inverse, .btn-blue-inverse svg path, .btn-blue-inverse span {
    background-color: var(--white) !important;
    color: var(--blue);
    fill: var(--blue);
}

.btn-blue-inverse.active, .btn-blue-inverse:active, .btn-blue-inverse:hover, .btn-blue-inverse:focus,
.btn-blue-inverse.active svg path, .btn-blue-inverse:active svg path, .btn-blue-inverse:hover svg path, .btn-blue-inverse:focus svg path,
.btn-blue-inverse.active span, .btn-blue-inverse:active span, .btn-blue-inverse:hover span, .btn-blue-inverse:focus span {
    background-color: var(--blue)!important;
    color: var(--white);
    fill: var(--white);
}


/* Show Dropdown On Hover */

.dropend:hover > .dropdown-menu {
    display: block;
    top: 0;
    /*margin-left: 90px;*/
    position: absolute;

}

.dropdown-item.active, .dropdown-item:active, .dropdown-item:focus, .dropdown-item:hover {
    color: var(--dark-30);
    background-color: var(--blueish-white);
}

.link-blue, .link-blue:hover {
    color: var(--blue);
    /*background: var(--white);*/
}

.link-blue:hover {
    /*color: var(--white);*/
    /*background: var(--blue);*/
}

.link-blue-inverse {
    color: var(--blue);
    background: var(--white);
}

.link-blue-inverse:hover {
    color: var(--white);
    background: var(--blue);
}

.link-lavender {
    color: var(--lavender);
    background: var(--white);
}

.link-lavender:hover {
    color: var(--lavender);
    background: var(--blue);
}

/* Spacing */

.mt-n3 {
    margin-top: -1rem!important;
}

.nav-link {
    color: var(--blue);
}

.nav-link.active {
    background: var(--white)!important;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #495057;
    background-color: var(--blueish-white)!important;
    border-color: #dee2e6 #dee2e6 #fff;
    font-weight: bold;
}

.form-select, .form-control, .page-link, .list-group-item {
    background-color: var(--light);
}

.page-link.active, .page-link:active, .page-link:focus, .page-link:hover {
    background-color: var(--blue);
    color: var(--white);
}

.btn#search-button, .btn#search-button svg path {
    background-color: var(--blue);
    color: var(--white);
    fill: var(--white);
}

.action-button, .action-button span, .action-button svg path {
    background-color: var(--blue);
    color: var(--white);
    fill: var(--white);
}

input[type=date] {
    background: var(--light);
}

/* Dropdown Toggle */

button[aria-expanded] svg {
    transform: rotate(0deg);
    transition: transform 200ms;
}

button[aria-expanded=true] svg {
    transform: rotate(90deg);
    transition: transform 200ms;
}

.device-monitoring-filter-button {
    width: 170px;
}

.device-monitoring-filter-button, .device-monitoring-filter-button svg path {
    color: var(--dark-30);
    fill: var(--dark-30);
    background: var(--white);
    border: none;
}

.device-monitoring-filter-button.active, .device-monitoring-filter-button:active, .device-monitoring-filter-button:focus, .device-monitoring-filter-button:hover,
.device-monitoring-filter-button.active svg path, .device-monitoring-filter-button:active svg path, .device-monitoring-filter-button:focus svg path, .device-monitoring-filter-button:hover svg path {
    color: rgb(77,77,77);
    fill: rgb(77,77,77);
    background: rgb(64,201,255);
    background: linear-gradient(174deg, rgba(64,201,255,1) 0%, rgba(253,202,155,1) 100%);
}

.drop-down button[aria-expanded=true] svg {
    transform: rotate(0deg);
    transition: transform 200ms;
}

.bg-circuit {
    background-image: url('../../assets/svg/circuit-board.svg');
}

.btn-outline-blue {
    background: none;
    color: var(--blue);
    outline: 1px solid var(--blue);
}

.btn-outline-blue svg path {
    fill: var(--blue);
}

.btn-outline-blue:hover, .btn-outline-blue:hover svg path {
    background: var(--blue);
    color: var(--white);
    fill: var(--white);
}

.btn-outline-danger {
    background: var(--white);
}

.fs-7 {
    font-size: .7rem;
}