/********** Variables **********/
:root {
    --black-100-percent: rgba(0,0,0,1);
    --black-87-percent: rgba(0,0,0,.87);
    --black-60-percent: rgba(0,0,0,.6);
    --black-50-percent: rgba(0,0,0,0.5);
    --black-38-percent: rgba(0,0,0,.38);
    --black-32-percent: rgba(0,0,0,.32);
    --black-20-percent: rgba(0,0,0,.2);
    --black-12-percent: rgba(0,0,0,.12);
    --black-8-percent: rgba(0,0,0,.08);
    --black-4-percent: rgba(0,0,0,.04);
    --blue-100-percent: rgba(46,105,165,1);
    --dashboard-alert-state: rgba(236, 102, 102,1);
    --dashboard-alert-background: rgba(236, 102, 102,.08);
    --dashboard-icon-blue: rgba(22,98,208,1);
    --dashboard-icon-info: rgba(40, 138, 167,1);
    --dashboard-letter-spacing-01: .12px;
    --dashboard-icon-warning:rgba(255,193,7,1); 
    --dashboard-grey-border: rgba(222, 226, 230,1);
    --dashboard-grey-background: rgba(243,243,243,1);
    --error: rgba(255,0,0,1);
    --error-10-percent: rgba(255,0,0,.12);
    --error-50-percent: rgba(255,0,0,1);
    --font-awesome-5-pro: 'Font Awesome 5 Pro';
    --green-active: rgba(34,139,34,1);
    --grey-light: rgba(245,245,245,1);
    --grey-medium: rgba(221,221,221,1);
    --grey-border: rgba(218,220,224,1);
    --primary-100-percent: rgba(186,12,47,1);
    --primary-38-percent: rgba(186,12,47,.38);
    --primary-12-percent: rgba(186,12,47,.12);
    --primary-4-percent: rgba(186,12,47,.04);
    --roboto: 'roboto', sans-serif;
    --saved-search-icon: rgba(255,193,7,1);
    --white-100-percent: rgba(255,255,255,1);
    --white-87-percent: rgba(255,255,255,.87);
    --white-60-percent: rgba(255,255,255,.6);
    --white-15-percent: rgba(255,255,255,.15);
}
/* Update Font to Roboto */
body#OPApplicationContainer {
    font-family: var(--roboto) !important;
    color: var(--black-87-percent) !important;
    overflow: visible !important;
}
/* Override rcom skin font */
body#OPApplicationContainer .workspace-content {
    font-family: var(--roboto) !important;
    color: var(--black-87-percent) !important;
}
/* Remove default focus */
#OPApplicationContainer :focus,
#OPApplicationContainer .Select-control {
    outline: none !important;
    box-shadow: none !important;
}
/* Horizontal rule */
#OPApplicationContainer hr {
    border-top: 1px solid var(--black-12-percent);
}
/** Disabled icons **/
#OPApplicationContainer :disabled .fas,
#OPApplicationContainer :disabled .fa,
#OPApplicationContainer :disabled .far,
#OPApplicationContainer .icon.disabled {
    color: var(--black-38-percent) !important;
}
/** Borders **/
#OPApplicationContainer .border-md-left,
#OPApplicationContainer .border-md-right,
#OPApplicationContainer .border-bottom {
    border-color: var(--grey-border) !important;
}
/** Progress spinners > small (buttons/sections) + large (pages) **/
#OPApplicationContainer .spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    border: 0.25em solid var(--black-60-percent);
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: spinner-border 2s linear infinite;
    animation: spinner-border 2s linear infinite;
    margin-right: .5rem;
}
/* Progress spinners > button/section */
#OPApplicationContainer .spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.1em;
}
/* Progress spinners > page */
#OPApplicationContainer .spinner-border-lg {
    width: 5rem;
    height: 5rem;
    border-width: 0.4rem;
}
/* Progress spinners >  sets border color to theme color */
#OPApplicationContainer .spnLoader {
    border-color: var(--primary-100-percent);
    border-right-color: transparent;
}
@-moz-keyframes spinner-border {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-webkit-keyframes spinner-border {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-o-keyframes spinner-border {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes spinner-border {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/***** Scroll bars  *****/
/* Asset management */
#OPApplicationContainer #AssetManagement div.record-picker::-webkit-scrollbar-thumb {
    background: var(--black-38-percent)!important;
    border: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-radius: 10em;
}
/* Inputs > turn off auto background fill color */
#OPApplicationContainer input:-webkit-autofill,
#OPApplicationContainer input:-webkit-autofill:hover,
#OPApplicationContainer input:-webkit-autofill:focus,
#OPApplicationContainer input:-webkit-autofill:active {
    filter: none;
    box-shadow: 0 0 0 100px var(--grey-light) inset !important;
}
#OPApplicationContainer ::-webkit-scrollbar-corner {
    background: rgba(0,0,0,0);
}

/***** Top Nav *****/
/* Top nav > set font */
#OPApplicationContainer .bt-parent-navbar {
    font-family: var(--roboto) !important;
}
/* Top nav > update bottom border */
#OPApplicationContainer .bt-parent-navbar.navbar-dark {
    border-bottom: 1px solid var(--black-12-percent)!important;
}
/* Top nav > adjust top/bottom padding */
#OPApplicationContainer .bt-parent-navbar.navbar {
    padding-bottom: 0;
    padding-top: 0;
}
/* Top nav > logo */
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-brand {
    display: flex;
    justify-content: flex-start;
    margin-right: .5em;
    margin-left: .5em;
}
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-brand img {
    display: block;
    width: auto;
    height: auto;
    max-width: 130px;
    max-height: 60px;
    left: 35px;
    top: 10px;
}
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .nav-item.dropdown:hover {
    box-shadow: none;
}
/* Top nav > top level links */
#OPApplicationContainer .bt-parent-navbar.navbar-dark .navbar-nav > div > a {
    color: var(--black-87-percent) !important;
    letter-spacing: 0.16002px !important;
}
/* Top nav > toggle */
#OPApplicationContainer .bt-parent-navbar .dropdown:hover > a.dropdown-toggle {
    background-color: transparent !important;
    color: rgba(0, 0, 0, .6) !important;
}
/* Top nav > top level > spacing */
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .nav-item {
    border-radius: 0;
    margin-right: 0;
}
/* Top nav > all nav links > top level + dropdown items */
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .nav-item a.nav-link {
    font-size: 14px;
    border-radius: 0;
    font-weight: 500 !important;
    align-items: center;
    height: 48px;
    display: flex;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-right: .65em;
    margin-left: .65em;
}
/* Hover > Override orbtheme styles */
#OPApplicationContainer .bt-navbar-features > div >a:not(.disabled):hover {
	color: var(--primary-100-percent) !important;
    background-color: transparent !important;
    border-color: transparent !important;
}
#OPApplicationContainer .bt-parent-navbar.navbar-dark .navbar-nav > div > a:hover,
#OPApplicationContainer .bt-navbar-features > div >a.active {
    background: transparent !important;
}
/* Top nav > top level > hover color of text */
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .nav-item a.nav-link:hover {
    border-radius: 0;
    color: var(--primary-100-percent) !important;
    box-shadow: none !important;
}
/* Top nav > top level > hover color of toggle icon */
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .nav-item a.nav-link:hover:after {
    color: var(--primary-100-percent) !important;
}
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .nav-item a:hover:after {
    color: var(--primary-100-percent) !important;
}
/* Top nav > top level > update arrow to Font Awesome icon */
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .nav-item a.nav-link.dropdown-toggle:after {
    border: none;
    font-family: var(--font-awesome-5-pro);
    font-weight: 900;
    content: "\f107";
    font-size: 16px;
    margin-left: 0.5em;
    margin-top: 2px;
    width: auto;
    height: auto;
}
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .nav-item a.nav-link.dropdown-toggle i {
    margin-left: 6px;
    font-size: 16px;
}
/* Top nav > dropdown menu items */
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .nav-item .dropdown-menu {
    border-radius: 4px;
    background-color: var(--white-100-percent) !important;
    border: none !important;
    box-shadow: 0 2px 10px var(--black-20-percent) !important;
    padding-top: 0px;
    padding-bottom: 0;
    min-width: 200px;
    font-weight: 400;
}
#OPApplicationContainer .bt-parent-navbar .dropdown .dropdown-menu .nav-link {
    letter-spacing: 0.16002px !important;
}
/* Top nav > dropdown menu items > adjust margin and bottom border */
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .nav-item .dropdown-menu .nav-item {
    margin: 0 !important;
    border-bottom: none;
}
/* Top nav > dropdown menu items > hover */
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .nav-item .dropdown-menu .nav-item:focus,
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .nav-item .dropdown-menu .nav-item:hover {
    border-bottom: none;
    color: var(--black-87-percent) !important;
    background-color: var(--black-4-percent) !important;
}
/* Top nav > dropdown menu items > padding + font color */
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .nav-item .dropdown-menu .nav-item a {
    color: var(--black-87-percent) !important;
    padding: 0.6em 0.8em;
}
/* Top nav > dropdown menu items > items with second level > update icon to font awesome */
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .nav-item .dropdown-menu .nav-item a.nav-link.dropdown-toggle:after {
    border: none;
    font-family: var(--font-awesome-5-pro);
    font-weight: 900;
    color: var(--black-60-percent);
    content: "\f054";
    font-size: 14px;
    margin-left: 0.75em;
    margin-top: 0px;
    display: flex;
    align-items: center;
    margin-right: 0.5em;
    margin-left: auto;
}
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .nav-item .dropdown-menu .nav-item a.nav-link.dropdown-toggle i {
    margin-left: 6px;
    font-size: 16px;
}
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .nav-item .dropdown-menu .nav-item a:hover {
    border-radius: 0;
    box-shadow: none !important;
}
/* Top nav > dropdown menu item */
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .nav-item .dropdown-menu .nav-link {
    padding-left: .25em !important;
    font-weight: 400 !important;
    font-size: 14px;
}
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .nav-item .dropdown-menu .nav-link:hover {
    background-color: transparent !important;
    color: var(--black-87-percent) !important;
}
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .nav-item .dropdown-menu .nav-link i {
    float: right;
    line-height: 20px;
}
/* Disabled link */
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .nav-item .dropdown-menu .nav-item a.nav-link.disabled {
    color:  var(--black-38-percent) !important;
    background-color: transparent !important;
}
/* Set background of main links and second level disabled links to transparent */
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .dropdown.nav-item .dropdown-menu .nav-item a.nav-link.disabled:hover,
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .dropdown.nav-item .dropdown-menu .nav-item:hover {
    background-color: transparent !important;
}
/* Set background color of all a tags */
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .nav-item .dropdown-menu .nav-item a:hover,
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .dropdown.nav-item .dropdown-menu .dropdown.nav-item:hover a.dropdown-toggle.nav-link {
    background-color: var(--black-4-percent) !important;
}
/* Make all link tags fit 100% and adjust margin/padding */
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .nav-item .dropdown-menu .nav-item a  {
    margin-left: 0 !important;
    padding-left: 1em !important;
    width: 100%;
}

/* Top nav > admin menu */
/* Top nav > admin menu > top nav item */
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .admin-menu.nav-item {
    margin-right: 0.25em;
}
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .nav-item a:hover {
    border-radius: 0;
    color: var(--primary-100-percent) !important;
    box-shadow: none !important;
}
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .admin-menu.nav-item:hover {
    background-color: transparent;
}
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .admin-menu.nav-item a {
    float: left;
    padding: 0.6em 0.8em;
}
/* Top nav > admin menu > top level > adjust font size for user name */
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .admin-menu.nav-item a.nav-link.dropdown-toggle {
    font-size: 14px;
}
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .admin-menu.nav-item a.nav-link:hover {
    background-color: transparent !important;
    color: var(--black-87-percent) !important;
}
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .admin-menu .dropdown-menu {
    min-width: 215px;
    margin-left: -160px;
    font-size: 14px;
}
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .admin-menu .dropdown-menu .dropdown-header {
    border-bottom: 1px solid var(--grey-border);
}
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .admin-menu .dropdown-menu a {
    width: 100%;
}
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .admin-menu .dropdown-menu .dropdown-item {
    border-radius: 0;
    max-height: 48px;
    display: flex;
    align-items: center;
    color: var(--black-87-percent) !important;
    font-weight: 400 !important;
}
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .nav-item a.dropdown-item:hover,
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .nav-item .dropdown-item.active,
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .nav-item .dropdown-item:active {
    background-color: var(--black-4-percent) !important;
}
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .admin-menu .dropdown-menu .dropdown-item i {
    font-size: 16px;
    margin-right: 0.5em;
    margin-left: 0;
    float: left;
    color: var(--black-60-percent);
    width: 25px;
    display: flex;
    justify-content: center;
    margin-top: 2px;
}
#OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .admin-menu .dropdown-menu .dropdown-item i :hover {
    color: var(--black-60-percent) !important;
}

/********** Text Elements **********/
/* Override custom OP styles */
#OPApplicationContainer .text-body {
    color: var(--black-87-percent) !important;
}
/* Links in ag grid */
#OPApplicationContainer a.text-body {
    color: var(--black-100-percent) !important;
}
/* Links */
#OPApplicationContainer a {
    color: var(--black-100-percent) !important;
    font-weight: 600 !important;
}
/* Page name */
#OPApplicationContainer .pageAndActionToolbar .pageNameWrapper .pageName,
#OPApplicationContainer .pageAndActionToolbar .pageNameWrapper  {
    font-size: 16px;
    color: var(--black-87-percent);
    font-weight: 700;
}
/* Page name > user configuration modules > add custom adjustments */
#OPApplicationContainer .pageAndActionToolbar .pageNameWrapper {
    height: 32px;
    line-height: 32px;
    padding-left: 0px !important;
}
/* Muted text */
#OPApplicationContainer .text-muted {
    color: var(--black-60-percent) !important;
    font-size: 13px;
}
/* Badges */
#OPApplicationContainer .badge {
    border-radius: 10em;
    width: 18px;
    height: 18px;
    right: -8px;
    top: -8px;
    padding: 0.45em 0.4em 0.25em;
}
/* Badges > change background to black */
#OPApplicationContainer .badge-dark {
    background-color: var(--black-100-percent);
}
/* Badges > side nav buttons */
#OPApplicationContainer .sideButtonContainer#NoticeContainer .badge {
    left: 38px;
    top: -8px;
    width: 24px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px;
    padding-top: 0.2rem;
}

/********** Layout Elements **********/
/* Page and action toolbar */
#OPApplicationContainer .pageAndActionToolbar {
    padding-top: 1em;
    border: none;
}

/********** Inputs **********/
/* Set height to 32px */
#OPApplicationContainer div.Select-control,
#OPApplicationContainer .customSearchBar .Select-control,
#OPApplicationContainer .customSelectBox .Select-control,
#OPApplicationContainer .form-control,
#OPApplicationContainer .Select-multi .Select-control,
#OPApplicationContainer .Select-input,
#OPApplicationContainer .Select-input > input,
#OPApplicationContainer label input:not(input[type=checkbox]):not(input[type=radio]),
#OPApplicationContainer .CreatableSelectMandatory,
#OPApplicationContainer .Accounts__search-input  {
    height: 32px;
    font-size: 14px;
    color: var(--black-87-percent);
}

/** Mandatory fields **/
/* Put asterisk after placeholders */
#OPApplicationContainer .mandatory .Select-control .Select-placeholder::after{
    content: '*';
    position: absolute;
    padding-left: 3px;
    color: var(--black-87-percent);
}
/* Add asterisk after labels */
#OPApplicationContainer .customForm .form-group.mandatory label:not(.switch)::after,
#OPApplicationContainer .form-group.mandatory label:not(.switch)::after {
    content: '*';
    position: absolute;
    padding-left: 3px;
    margin-top: -3px;
    color: var(--black-87-percent);
}
/* Notifications mandatory labels */
#OPApplicationContainer .form-group.mandatory .col-form-label::after {
    content: '*';
    position: absolute;
    padding-left: 3px;
    margin-top: -3px;
    color: var(--black-87-percent);
}
/* Mandatory > hide asterisk on placeholder if there's a label */
#OPApplicationContainer .form-group.mandatory label + .col-lg-12 .Select-placeholder::after,
#OPApplicationContainer .form-group.mandatory label + .col-12 .Select-placeholder::after,
#OPApplicationContainer .form-group.mandatory label + div.section .Select-placeholder::after,
#OPApplicationContainer .form-group.mandatory label + div#refSensorCategory .Select-placeholder::after{
    display: none;
}
/* Hide red line / text fields */
#OPApplicationContainer .mandatory .form-control {
    border-bottom: none;
    padding-left: 16px;
}
/* Hide red line / select dropdowns */
#OPApplicationContainer .mandatory .Select-control,
#OPApplicationContainer .mandatory .CreatableSelectMandatory  {
    border-bottom: none !important;
}
/* Disabled > select with is-disabled class */
#OPApplicationContainer .Select.is-disabled .Select-value-label,
#OPApplicationContainer .Select.is-disabled .Select-placeholder,
#OPApplicationContainer .mandatory .Select.is-disabled .Select-control .Select-placeholder:after,
#OPApplicationContainer .form-control:disabled::placeholder {
    color: var(--black-38-percent) !important;
}
/* Disabled > hover */
#OPApplicationContainer .Select.is-disabled .Select-control:hover {
    cursor:not-allowed !important;
    background-color: var(--black-4-percent);
}
#OPApplicationContainer .form-control[disabled]:hover {
    background-color: var(--black-4-percent) !important;
}
/* Inputs > disabled */
#OPApplicationContainer .form-control:disabled {
    cursor: not-allowed;
    color: var(--black-38-percent);
}
/* Custom file upload input > update cursor */
#OPApplicationContainer input#customFile {
    cursor: pointer;
}

/***** Text Area *****/
#OPApplicationContainer textarea.form-control {
    height: 100%;
}

/** Text Field **/
/* Label */
#OPApplicationContainer .customForm .form-group label {
    color: var(--black-87-percent);
    font-size: 14px;
    letter-spacing: 0.098px;
}
/* Input */
#OPApplicationContainer .form-control,
#OPApplicationContainer .CreatableSelectMandatory .css-1aya2g8,
#OPApplicationContainer .Accounts__search-input  {
    border: none !important;
    border-bottom: 1px solid var(--grey-border) !important;
    background-color: var(--black-4-percent) !important;
    border-radius: 4px 4px 0 0 !important;
}
/* Dropdown > account management */
#OPApplicationContainer .CreatableSelectMandatory .css-1aya2g8 {
    border: none !important;
    border-bottom: 1px solid var(--grey-border) !important;
    background-color: var(--black-4-percent) !important;
    border-radius: 4px 4px 0 0 !important;
    height: 32px;
    min-height: 32px;
}
/* Dropdown > account management > hover */
#OPApplicationContainer .CreatableSelectMandatory .css-1aya2g8:hover {
    background-color: var(--black-8-percent) !important;
}
/* Dropdown > account management > placeholder */
#OPApplicationContainer .CreatableSelectMandatory .css-1aya2g8 .css-1492t68 {
    color: var(--black-60-percent);
}
/* Dropdown > hide divider line */
#OPApplicationContainer .CreatableSelectMandatory .css-1aya2g8 .css-d8oujb,
#OPApplicationContainer .CreatableSelectMandatory .css-2o5izw .css-d8oujb {
    display: none;
}
/* Dropdown > account management > icon */
#OPApplicationContainer .CreatableSelectMandatory .css-1aya2g8 .css-1ep9fjw {
    height: 32px;
    color: var(--black-60-percent);
}
/* Dropdown > account management > focus state adjustment */
#OPApplicationContainer .CreatableSelectMandatory .css-2o5izw {
    border-radius: 4px 4px 0 0;
    border: none;
    border-bottom: 1px solid var(--black-100-percent) !important;
    box-shadow: none;
    min-height: 32px !important;
    height: 32px !important;
    transition: none;
    background-color: var(--black-4-percent);
}
/* Input > account management > location accordion */
#OPApplicationContainer .Accounts__search-input {
    border: none !important;
    border-bottom: 1px solid var(--grey-border) !important;
    background-color: var(--black-4-percent) !important;
    border-radius: 4px 4px 0 0 !important;
    height: 32px;
    box-shadow: none !important;
}
/* Input > account management > location accordion > hover */
#OPApplicationContainer .Accounts__search-input:hover {
    background-color: var(--black-8-percent) !important;
}
/* Input > account management > location accordion > focus */
#OPApplicationContainer .Accounts__search-input:focus {
    border-bottom: var(--black-100-percent) !important;
}
/* Adjust for Assign Assets modal bug */
#OPApplicationContainer label .Select-control .Select-input input {
    background-color: transparent !important;
}
/* Phone input > notifications */
#OPApplicationContainer input[type=tel]  {
    border: none;
    border-bottom: 1px solid var(--grey-border) !important;
    background-color: var(--black-4-percent) !important;
    border-radius: 0 4px 0 0 !important;
    margin-left: .25em;
    margin-right: .5em;
    padding-left: 1em;
}
/* Hover */
#OPApplicationContainer .form-control:hover,
#OPApplicationContainer label input:hover,
#OPApplicationContainer input:hover[type=tel]  {
    background-color: var(--black-8-percent) !important;
}
/* Focus */
#OPApplicationContainer .form-control:not(.btn):focus,
#OPApplicationContainer label input:focus:not([type=checkbox]):not([type=radio]) {
    border: none;
    border-bottom: 1px solid var(--black-100-percent) !important;
}

/** Search **/
/* Main text field */
#OPApplicationContainer .customSearchBar .form-control  {
    border: none !important;
    background-color: var(--black-4-percent) !important;
    border-radius: 0 !important;
    margin-right: 1px;
    margin-left: 1px;
    color: var(--black-87-percent);
    font-weight: 500;
}
/* Main text field */
#OPApplicationContainer .customSearchBar .form-control:focus {
    border: none !important;
}
/* Search placeholder */
#OPApplicationContainer .customSearchBar .form-control::placeholder  {
    color: var(--black-60-percent) !important;
    font-weight: 500;
}
/* Style search icon  */
#OPApplicationContainer .customSearchBar .input-group-prepend  {
    border-radius: 4px 0 0 4px;
    background-color: var(--black-4-percent) !important;
    align-items: center;
    width: 32px;
}
/* Set button height */
#OPApplicationContainer .customSearchBar .input-group-prepend .input-group-text {
   height: 32px;
   color: var(--black-60-percent) !important;
}
/* Clear button */
#OPApplicationContainer .customSearchBar .input-group-append button.btn {
    border-radius: 0 4px 4px 0;
    border: none !important;
    background-color: var(--black-4-percent) !important;
}
/* Clear search button > notifications  */
#OPApplicationContainer .customSearchBar .btn-outline-secondary,
#OPApplicationContainer .customSearchBar .btn-primary {
    min-width: 1px !important;
}
/* Update icon */
#OPApplicationContainer .customSearchBar .input-group-append button.btn i {
   color: var(--black-60-percent);
}
/* Make background consistent on hover/focus */
#OPApplicationContainer .customSearchBar .input-group-append button.btn:hover,
#OPApplicationContainer .customSearchBar .input-group-append button.btn:focus  {
    background-color: var(--black-4-percent) !important;
    opacity: 1;
}

/***** React dropdowns *****/
/* Remove default bottom border */
#OPApplicationContainer .customSelectBox .Select-control {
    border: none;
}
/* Set max width of text */
#OPApplicationContainer .customSelectBox .Select-control .Select-value {
    max-width: calc(100% - 20px);
}
/* Adjust for multi select with value */
#OPApplicationContainer .customSelectBox .Select.has-value.Select--multi .Select-control .Select-value,
#OPApplicationContainer .customSearchBar .Select.has-value.Select--multi .Select-control .Select-value {
    max-width: 100%;
    width: fit-content;
    float: left;
}
/* Multi select dropdown > make sure cursor is at the end of filed */
#OPApplicationContainer .Select--multi.has-value .Select-input {
    float: left;
}
/* Add new bottom border */
#OPApplicationContainer div.Select {
    border-bottom: 1px solid var(--grey-border);
}
/* Remove top/bottom padding */
#OPApplicationContainer .Select-input > input {
    padding-top: 0;
    padding-bottom: 0;
}
/* Hide down arrow */
#OPApplicationContainer .Select-arrow {
    border: none;
    line-height: 1.7;
}
/* Adjust arrow zone */
#OPApplicationContainer .Select-arrow-zone {
    width: 15px;
}
/* Replace down arrow with Font Awesome */
#OPApplicationContainer .Select-arrow::after {
    font-family: var(--font-awesome-5-pro);
    font-weight: 900;
    color: var(--black-60-percent);
    content: "\f107";
    font-size: 16px;
}
/* Set down arrow on open */
#OPApplicationContainer  div.Select.is-open .Select-arrow:after {
    content: "\f106";
}
/* Hide clear icon */
#OPApplicationContainer .Select-clear-zone .Select-clear  {
    display: none;
}
/* Replace clear icon with Font Awesome */
#OPApplicationContainer .Select-clear-zone:after {
    content: "\f057";
    font-family: var(--font-awesome-5-pro);
    font-weight: 900;
    color: var(--black-60-percent);
    font-size: 13px;
}
/* Clear icon hover */
#OPApplicationContainer .Select-clear-zone:hover:after {
    color: var(--error);
}
/* Set placeholder color and add space on right */
#OPApplicationContainer .Select-placeholder {
    color: var(--black-60-percent);
    line-height: 32px;
    padding-left: 16px;
    font-size: 14px;
}
/* Default state */
#OPApplicationContainer .Select-control {
    background-color: var(--black-4-percent);
    height: 32px;
    border-radius: 4px 4px 0 0;
    padding-right: 1em;
}
/* Active state */
#OPApplicationContainer .Select.has-value.Select--single > .Select-control .Select-value .Select-value-label {
    color: var(--black-87-percent);
    line-height: 32px !important;
    padding-left: 5px !important;
    font-size: 14px;
}
/* Hover */
#OPApplicationContainer .Select-control:hover {
    background-color: var(--black-8-percent);
}
/* Focused */
#OPApplicationContainer div.Select.is-focused {
    border-bottom: 1px solid var(--black-100-percent) !important;
}
/* Validation error for assign assets */
#OPApplicationContainer #AssetManagement .has-error,
#OPApplicationContainer #DeviceManagement .has-error {
    border: 1px solid var(--error) !important;
    background-color: transparent;
    border-radius: 4px 4px 0 0;
}
/* Validation error after value entered */
#OPApplicationContainer .mandatory.has-error div.Select.has-value {
    border: none !important;
    border-bottom: 1px solid var(--black-12-percent) !important;
}
/* Validation error for generate live link input fields */
#OPApplicationContainer .mandatory.has-error input.form-control {
    border: none !important;
    border: 1px solid var(--error) !important;
}
/* Validation error + focused */
#OPApplicationContainer .mandatory.has-error div.Select.has-value.is-focused,
#OPApplicationContainer .mandatory.has-error div.Select.is-focused {
    border: none !important;
    border-bottom: 1px solid var(--black-100-percent) !important;
}
/* Non react inputs with error */
#OPApplicationContainer .mandatory .has-error input.form-control  {
    border: none !important;
    border: 1px solid var(--error) !important;
    border-radius: 4px 4px 0 0;
}
/***** React dropdowns V5 *****/
#OPApplicationContainer div.react-select-container {
    border-bottom: 1px solid var(--grey-border);
    font-size: 14px;
}

#OPApplicationContainer div.react-select__control {
    background-color: var(--black-4-percent);
    color: var(--black-87-percent);
    border-radius: 4px 4px 0 0;
    border: none;
    padding-left: 0.5em;
    min-height: 32px;
    height: 100%;
    outline: none !important;
    box-shadow: none !important;
}

#OPApplicationContainer .mandatory div.react-select__control {
    border-bottom: none !important;
}

#OPApplicationContainer div.react-select__control:hover {
    background-color: var(--black-8-percent);
}

#OPApplicationContainer div.react-select__control.react-select__control--is-focused{
    border-bottom: 1px solid var(--black-100-percent) !important;
}

#OPApplicationContainer div.react-select__control .react-select__placeholder{
    z-index: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#OPApplicationContainer div.react-select__control .react-select__multi-value{
    background-color: var(--black-87-percent);
    border-radius: 16px;
    border: none;
    font-size: .9em;
    line-height: 2.3 !important;
    align-items: center;
}

#OPApplicationContainer div.react-select__control .react-select__multi-value .react-select__multi-value__label{
    line-height: 1.6;
    vertical-align: baseline !important;
    font-weight: 500;
    letter-spacing: .02em;
    font-size: .9em !important;
    color: var(--white-100-percent);
    word-break: break-all;
    margin: 0 2px;
    white-space: normal;
}

#OPApplicationContainer div.react-select__control .react-select__multi-value .react-select__multi-value__remove{
    border: none;
    padding: 1px 8px 0 0;
    color: transparent;
}

#OPApplicationContainer div.react-select__control .react-select__multi-value .react-select__multi-value__remove svg{
    display: none;
}

#OPApplicationContainer div.react-select__control .react-select__multi-value .react-select__multi-value__remove::after{
    content: "\f057";
    font-family: var(--font-awesome-5-pro);
    font-weight: 900;
    color: var(--white-60-percent);
    font-size: 11px !important;
    cursor: pointer;
}

#OPApplicationContainer div.react-select__control .react-select__multi-value .react-select__multi-value__remove:hover{
    background: none;
}

#OPApplicationContainer div.react-select__control .react-select__clear-indicator{
    padding-right: 0;
}

#OPApplicationContainer div.react-select__control .react-select__clear-indicator svg, #OPApplicationContainer div.react-select__control .react-select__dropdown-indicator svg{
    display: none;
}

#OPApplicationContainer div.react-select__control .react-select__clear-indicator::after{
    content: "\f057";
    font-family: var(--font-awesome-5-pro);
    font-weight: 900;
    color: var(--black-60-percent);
    font-size: 13px;
    cursor: pointer;
}

#OPApplicationContainer div.react-select__control .react-select__indicator-separator{
    display: none;
}

#OPApplicationContainer div.react-select__control .react-select__dropdown-indicator{
    padding: 0 8px;
}

#OPApplicationContainer div.react-select__control .react-select__dropdown-indicator::after{
    font-family: var(--font-awesome-5-pro);
    font-weight: 900;
    color: var(--black-60-percent);
    content: "\f107";
    font-size: 16px;
}

#OPApplicationContainer div.react-select__control.react-select__control--menu-is-open .react-select__dropdown-indicator::after{
    font-family: var(--font-awesome-5-pro);
    font-weight: 900;
    color: var(--black-60-percent);
    content: "\f106";
    font-size: 16px;
}

#OPApplicationContainer div.react-select__menu{
    margin-top: 0;
    z-index: 6;
}

#OPApplicationContainer div.react-select__menu .react-select__group .react-select__group-heading{
    font-size: 12px;
}

#OPApplicationContainer div.react-select__menu .react-select__option{
    transition: background 60ms;
    color: var(--black-87-percent);
}

#OPApplicationContainer div.react-select__menu .react-select__option.select-option-all{
    font-weight: bold;
}

#OPApplicationContainer div.react-select__menu .react-select__option.react-select__option--is-selected{
    background: var(--black-8-percent) !important;
}

#OPApplicationContainer div.react-select__menu .react-select__option:not(.react-select__option--is-selected):hover {
    transition-delay: 60ms;
    background: var(--black-4-percent) !important;
}

#OPApplicationContainer div.react-select__menu .react-select__option.react-select__option--is-disabled{
    color: var(--black-38-percent) !important;
}

#OPApplicationContainer div.react-select__menu .react-select__option.react-select__option--is-focused:not(.react-select__option--is-selected){
    background: none;
}

#OPApplicationContainer div.react-select__menu .react-select__option .Select-option-highlighter{
    font-weight: bold;
    padding: 0;
    background: transparent;
}

#OPApplicationContainer div.react-select__menu .react-select__option .selectOption-content-container{
    display: flex;
    flex-direction: column;
}

#OPApplicationContainer div.react-select__menu .react-select__option .selectOption-sub-content{
    color: var(--black-60-percent) !important;
    margin-top: 0.25rem;
    font-size: 13px;
}

#OPApplicationContainer div.react-select__menu .Select-noresultfound-label{
    font-size: 12px;
    font-weight: bold;
    margin-top: 5px;
    color: var(--black-100-percent)
}

/* Cursor > hand */
#OPApplicationContainer .react-select__menu .react-select__menu-list .react-select__option,
#OPApplicationContainer .react-select__control,
#OPApplicationContainer input[type=radio],
#OPApplicationContainer input[type=checkbox] {
    cursor: pointer !important;
}

/* Dropdown > arrow > disabled > correct color */
#OPApplicationContainer .react-select__control.react-select__control--is-disabled .react-select__dropdown-indicator::after {
    color: rgba(0,0,0,.38) !important;
}
#OPApplicationContainer .react-select__control.react-select__control--is-disabled{
    cursor: not-allowed !important;
    pointer-events: all !important;
}

#OPApplicationContainer .react-select__control.react-select__control--is-disabled .react-select__placeholder{
    color: rgba(0,0,0,.38) !important;
}

/* Dropdown > arrow > vertically align */
#OPApplicationContainer div.react-select__control .react-select__dropdown-indicator::after {
    margin-top: 5px;
	margin-right: .5rem;
}

/* Dropdown > clear > hover*/
#OPApplicationContainer div.react-select__control .react-select__clear-indicator:hover::after {
    color: var(--error) !important;
} 

/* Dropdown > box shadow and border */
#OPApplicationContainer .react-select__menu {
    box-shadow: 0 2px 10px var(--black-20-percent) !important;
    border: none;
}

/* Dropdown > menu > item with account info */
#OPApplicationContainer .react-select__menu.react-select-account-info .react-select__group {
    padding-bottom: 0;
}

#OPApplicationContainer .react-select__menu.react-select-account-info .react-select__group-heading {
    color: rgba(0,0,0,.6);
    letter-spacing: 0.372px;
    display: flex;
    align-items: center;
    margin-bottom: 0px;
    padding-left: 16px;
    height: 20px;
}

#OPApplicationContainer .react-select__menu.react-select-account-info .react-select__menu-list.react-select__menu-list--is-multi .react-select__option {
    height: 68px;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 13px;
}

#OPApplicationContainer .react-select__menu.react-select-account-info .react-select__menu-list.react-select__menu-list--is-multi .react-select__option.select-option-all{
    height: auto;
    padding-left: 0;
}

#OPApplicationContainer .react-select__menu.react-select-account-info .react-select__menu-list.react-select__menu-list--is-multi .react-select__option .selectOption-content-container{
    padding-left: 19px !important;
}

#OPApplicationContainer .react-select__menu.react-select-account-info .react-select__menu-list.react-select__menu-list--is-multi .react-select__option.select-option-all .selectOption-content-container{
    padding-left: 16px !important;
}

#OPApplicationContainer .react-select__menu.react-select-account-info .react-select__menu-list.react-select__menu-list--is-multi .react-select__option .selectOption-main-content {
    height: 20px;
    display: flex;
    white-space: nowrap;
}
#OPApplicationContainer .react-select__menu.react-select-account-info .react-select__menu-list.react-select__menu-list--is-multi .react-select__option .selectOption-sub-content {
    height: 32px;
    margin-top: 0;
    line-height: 1.3;
}
#OPApplicationContainer .react-select__menu.react-select-account-info .react-select__menu-list.react-select__menu-list--is-multi .react-select__option .selectOption-sub-content > span {
    display: block;
    height: 17px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Dropdown > react > tree > lines + checkboxes */
#OPApplicationContainer .react-select-tree-view .react-select__option {
    display: inline-block;
    vertical-align: middle;
    font-size: 12px;
    padding: 0;
    height:35px;
}

#OPApplicationContainer .react-select-tree-option .Select-option-label {
    padding: 8px 0;
    display: inline-block;
    vertical-align: middle;
}

#OPApplicationContainer .react-select-tree-option .Select-option-checkbox {
    margin-right: .25rem;
    display: inline-block;
    vertical-align: middle;
}

#OPApplicationContainer .react-select-tree-option .Select-tree-icon {
    background-repeat: no-repeat;
    background-color: transparent;
    height: 36px;
    width: 20px;
    display: inline-block;
    vertical-align: middle;
}

#OPApplicationContainer .react-select-tree-option .Select-tree-icon-T {
    background-image: url("/SynergyCommonAssets/images/synergy/tree-icon-T.svg");
    margin-right: 5px;
}

#OPApplicationContainer .react-select-tree-option .Select-tree-icon-L {
    background-image: url("/SynergyCommonAssets/images/synergy/tree-icon-L.svg");
    margin-right: 5px;
}

#OPApplicationContainer .react-select-tree-option .Select-tree-icon-I {
    background-image: url("/SynergyCommonAssets/images/synergy/tree-icon-I.svg");
}

/** Assign assets > adjust width of react inputs **/
#OPApplicationContainer .form-check .form-check-label.w-100 {
    width: 95% !important;
    margin-left: 1.5em;
}
/** Manage + Assign Assets > validation errors */
#OPApplicationContainer #AssetManagement .customForm .has-error .Select-control,
#OPApplicationContainer #AssetManagement .customForm .has-error .form-control,
#OPApplicationContainer #AssetManagement .has-error,
#OPApplicationContainer #DeviceManagement .customForm .has-error .Select-control,
#OPApplicationContainer #DeviceManagement .customForm .has-error .form-control,
#OPApplicationContainer #DeviceManagement .has-error {
    border: 1px solid var(--error);
    background-color: transparent;
	border-radius: 4px 4px 0 0;
}


/**** Text fields with button ****/
#OPApplicationContainer .input-group-append button.btn.btn-secondary {
    background-color: transparent !important;
    color: var(--black-60-percent);
    border-radius: 10em;
    margin-left: .5em;
}
/* Hover */
#OPApplicationContainer .input-group-append button.btn.btn-secondary:hover  {
    background-color: var(--black-4-percent) !important;
    color: var(--black-60-percent);
    border-radius: 10em;
}
/* Focus */
#OPApplicationContainer .input-group-append button.btn.btn-secondary:focus  {
    background-color: var(--black-12-percent) !important;
}
/* Disabled > hover */
#OPApplicationContainer .input-group-append button.btn.btn-secondary[disabled]:hover {
    background-color: transparent !important;
}

/***** Multiselect dropdowns *****/
/* Adjust multi select w/ value */
#OPApplicationContainer .customSearchBar .has-value.Select--multi .Select-control,
#OPApplicationContainer .customSelectBox .has-value.Select--multi .Select-control,
#OPApplicationContainer .customSearchBar div.Select.has-value .Select-control,
#OPApplicationContainer .customSelectBox div.Select.has-value .Select-control {
    height: 100% !important;
}
/* Remove border */
#OPApplicationContainer .customSearchBar .Select--multi .Select-control,
#OPApplicationContainer .customSelectBox .Select--multi .Select-control {
    border: none;
    padding-left: .5em;
}
/* Chips */
#OPApplicationContainer .customSearchBar .Select--multi .Select-control .Select-value,
#OPApplicationContainer .customSelectBox .Select--multi .Select-control .Select-value {
    background-color: var(--black-87-percent);
    border-radius: 16px;
    border: none;
    margin-left: 5px;
    margin-top: 5px;
    display: flex;
    align-items: center;
    flex-basis: auto;
    line-height: 2 !important;
}
/*  Chips > background > adjust for disabled */
#OPApplicationContainer .customSearchBar .is-disabled.Select--multi .Select-value,
#OPApplicationContainer .customSelectBox .is-disabled.Select--multi .Select-value {
    background-color: var(--grey-medium);
}
/*  Chips > background > adjust for disabled label cursor */
#OPApplicationContainer .customSelectBox .Select--multi.is-disabled .Select-value .Select-value-label {
    cursor: not-allowed;
}
/* Chips label */
#OPApplicationContainer .customSearchBar .Select--multi .Select-value .Select-value-label,
#OPApplicationContainer .customSelectBox .Select--multi .Select-value .Select-value-label {
    line-height: 1.2;
    vertical-align: baseline !important;
    padding-left: 10px !important;
    padding-right: 0  !important;
    padding-top: 2px !important;
    padding-bottom: 0 !important;
    font-weight: 500;
    letter-spacing: .02em;
    font-size: .9em !important;
    color: var(--white-100-percent);
    display: flex;
    flex-grow: 1;
    word-break: break-all;
}
/* Set default icon to transparent */
#OPApplicationContainer .customSearchBar .Select--multi .Select-value-icon,
#OPApplicationContainer .customSelectBox .Select--multi .Select-value-icon {
    border: none ;
    padding: 1px 8px 0 0;
    order: 1;
    color: transparent;
}
/* Replace icon with Font Awesome */
#OPApplicationContainer .Select--multi .Select-value-icon:after {
    content: "\f057";
    font-family: var(--font-awesome-5-pro);
    font-weight: 900;
    color: var(--white-60-percent);
    font-size: 11px !important;
}
/* Chips > icon > adjust for disabled */
#OPApplicationContainer .customSearchBar .is-disabled.Select--multi .Select-value-icon:after,
#OPApplicationContainer .customSelectBox .is-disabled.Select--multi .Select-value-icon:after {
    color: #00000061;
}


/***** Dropdown menus *****/
/** Select dropdowns **/
/* Wrapper */
#OPApplicationContainer .Select-menu-outer {
    border-radius: 4px;
    background-color: var(--white-100-percent) !important;
    border: none !important;
    box-shadow: 0 2px 10px var(--black-20-percent) !important;
    margin-top: 1px;
    z-index: 20;
    font-size: 14px !important;
}
/* Item */
#OPApplicationContainer .Select-menu-outer .Select-menu .VirtualSelectGrid .ReactVirtualized__Grid__innerScrollContainer .VirtualizedSelectOption {
    padding-left: 1em !important;
    color: var(--black-87-percent) !important;
    line-height: 14px;
}
/* Item / Hover */
#OPApplicationContainer .Select-menu-outer .Select-menu .VirtualSelectGrid .ReactVirtualized__Grid__innerScrollContainer .VirtualizedSelectOption:hover {
    background: var(--black-4-percent) !important;
}
/* Item / Selected */
#OPApplicationContainer .Select-menu-outer .Select-menu .VirtualSelectGrid .ReactVirtualized__Grid__innerScrollContainer .VirtualizedSelectOption.VirtualizedSelectFocusedOption {
    background: var(--black-8-percent);
}
/**  Dropdown menu styles / icon button dropdown / no top/bottom padding **/
#OPApplicationContainer .dropdown-menu {
    border-radius: 4px;
    border: none !important;
    box-shadow: 0 2px 10px var(--black-20-percent) !important;
    padding-top: 0;
    padding-bottom: 0;
    color:  var(--black-87-percent);
    z-index: 65;
}

/* Dropdown menu items */
#OPApplicationContainer .dropdown-menu .btn-outline-secondary.dropdown-item {
    height: 36px;
    color: var(--black-87-percent) !important;
    font-weight: 400;
    letter-spacing: 0;
    padding-left: 1em;
    padding-right: 1em !important;
    border: none;
}
/* Disabled */
#OPApplicationContainer .dropdown-menu .btn-outline-secondary:disabled {
    color: var(--black-38-percent) !important;
}
/* Item / Hover */
#OPApplicationContainer .dropdown-menu .btn-outline-secondary:hover {
    background: var(--black-4-percent) !important;
}
/* Item / Disabled / Hover */
#OPApplicationContainer .dropdown-menu .btn-outline-secondary.disabled:hover,
#OPApplicationContainer .dropdown-menu .btn-outline-secondary.disabled label:hover {
    background: transparent !important;
    cursor: not-allowed;
}
/* Icon */
#OPApplicationContainer .dropdown-menu .btn-outline-secondary.dropdown-item i {
    width: 25px;
    text-align: center;
    font-size: 16px;
    color: var(--black-60-percent);
}
/* Override bottom margin for items */
#OPApplicationContainer .dropdown-menu .btn-outline-secondary.dropdown-item label {
    margin-bottom: 0;
    margin-left: .75em !important;
}

/***** Date Picker *****/
/* Date picker > start date icon */
#OPApplicationContainer .input-group.custom-ui-control-datepicker::before {
    position: absolute;
    top: .4em;
    left:.75em;
    content: "\f073";
    font-family: var(--font-awesome-5-pro);
    font-weight: 900;
    color: var(--black-60-percent);
    font-size: 14px;
}
#OPApplicationContainer .custom-ui-control-datepicker .input-group-prepend:first-child::after {
    position: absolute;
    margin-top: .45em;
    margin-left: 3.1em;
    content: "\f073";
    font-family: var(--font-awesome-5-pro);
    font-weight: 900;
    color: var(--black-60-percent);
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: normal;
}
#OPApplicationContainer .custom-ui-control-datepicker .input-group-prepend,
#OPApplicationContainer .custom-ui-control-datepicker .input-group-append {
    height: 32px;
}
/* Date picker > modules where button is outside input > make sure it's 32px */
#OPApplicationContainer .input-group-append button.btn {
    width: 32px;
    padding-left: 8px;
}
/* Date picker > end date > icon */
#OPApplicationContainer .custom-ui-control-datepicker .input-group-prepend.input-group-append::after {
    position: absolute;
    margin-top: .45em;
    margin-left: 3em;
    content: "\f073";
    font-family: var(--font-awesome-5-pro);
    font-weight: 900;
    color: var(--black-60-percent);
    font-size: 14px;
}
#OPApplicationContainer .custom-ui-control-datepicker.date-range-picker {
    max-width: 450px;
    width: 100%;
}
#OPApplicationContainer .custom-ui-control-datepicker .date-range-actions {
    position: absolute;
    right: 45px;
    display: flex;
    align-items: center;
    height: 100%;
}
#OPApplicationContainer .custom-ui-control-datepicker .date-range-actions .date-range-clear {
    font-weight: 900;
    color: var(--black-60-percent);
    font-size: 13px;
    cursor: pointer;
    margin: 0 4px; 
}
#OPApplicationContainer .custom-ui-control-datepicker .date-range-actions .date-range-clear:hover {
    color: var(--error);
}
#OPApplicationContainer .custom-ui-control-datepicker .date-range-actions .date-range-options-dropdown .btn.dropdown-toggle {
    width: 25px !important;
    min-width: 25px !important;
    padding-left: 0;
    padding-right: 0;
    border: 0;
    display: inline-block;
}
#OPApplicationContainer .custom-ui-control-datepicker .date-range-actions .date-range-options-dropdown .btn.dropdown-toggle:hover, 
#OPApplicationContainer .custom-ui-control-datepicker .date-range-actions .date-range-options-dropdown .btn.dropdown-toggle:active, 
#OPApplicationContainer .custom-ui-control-datepicker .date-range-actions .date-range-options-dropdown .btn.dropdown-toggle:visited,
#OPApplicationContainer .custom-ui-control-datepicker .date-range-actions .date-range-options-dropdown .btn.dropdown-toggle:focus {
    background: none;
}
#OPApplicationContainer .custom-ui-control-datepicker .date-range-actions .date-range-options-dropdown .dropdown-toggle::after {
    font-family: var(--font-awesome-5-pro);
    font-weight: 900;
    color: var(--black-60-percent);
    content: "\f107";
    font-size: 16px;
    border: none;
    display: unset;
}
#OPApplicationContainer .custom-ui-control-datepicker .date-range-actions .date-range-options-dropdown.show .dropdown-toggle::after {
    content: "\f106";
}
/* Date picker > end date > icon > user asset management */
#OPApplicationContainer .form-control.flatpickr-input {
    border: none;
    border-bottom: 1px solid var(--grey-border);
    background-color: var(--black-4-percent) !important;
    border-radius: 4px 4px 0 0 !important;
    padding-left: 30px;
}
/* Date picker > user management + billing > adjust padding left */
#OPApplicationContainer .wrapperImpersonateAudit .form-control.flatpickr-input,
#OPApplicationContainer .model-dialog-assignBillPlans .form-control.flatpickr-input,
#OPApplicationContainer  #divDateRangeStatus .form-control.flatpickr-input {
    padding-left: 1em;
}
/* Date picker > placeholder > disabled  */
#OPApplicationContainer .form-control.flatpickr-input:disabled,
#OPApplicationContainer .form-control.flatpickr-input[disabled]::placeholder {
    color: var(--black-38-percent);
}
#OPApplicationContainer .form-control.flatpickr-input:disabled + .input-group-append .input-group-text i {
    color: var(--black-38-percent);
    cursor: not-allowed;
}
/* Set height of date picker elements */
#OPApplicationContainer .input-group,
#OPApplicationContainer .input-group-prepend button,
#OPApplicationContainer .input-group-append button {
    height: 32px;
}
/* Adjust line height for arrow */
#OPApplicationContainer .input-group-prepend button.btn,
#OPApplicationContainer .input-group-append button.btn {
    border: 1px solid transparent !important;
}
/* Add margin to the right of start arrow */
#OPApplicationContainer .input-group-prepend button.btn-default {
    margin-right: 5px !important;
}
/* Add margin to the left of end arrow */
#OPApplicationContainer .input-group-append button.btn-default {
    margin-left: 5px !important;
}
/* Set disabled color */
#OPApplicationContainer .input-group-prepend button:disabled,
#OPApplicationContainer .input-group-append button:disabled {
    color: var(--black-38-percent) !important;
}
/* Set hover background color */
#OPApplicationContainer .input-group-prepend button.btn-default:hover,
#OPApplicationContainer .input-group-append button.btn-default:hover {
    background-color: var(--black-4-percent) !important;
}
/* Hide disabled + default button background */
#OPApplicationContainer .input-group-prepend button:disabled,
#OPApplicationContainer .input-group-append button:disabled,
#OPApplicationContainer .input-group-prepend button[disabled]:hover,
#OPApplicationContainer .input-group-append button[disabled]:hover,
#OPApplicationContainer .input-group-prepend button.btn-default,
#OPApplicationContainer .input-group-append button.btn-default {
    background-color: transparent !important;
    border-radius: 10em !important;
}
/* Hide text between start and end date inputs */
#OPApplicationContainer .input-group-text {
    background-color: transparent;
    text-transform: lowercase;
    border: none;
    color: var(--black-87-percent);
}
/* Corrects for icons outside input fields */
#OPApplicationContainer .input-group-text i {
    color: var(--black-60-percent);
}
/* When the input to the left is disabled > make this disabled color */
#OPApplicationContainer .form-control:disabled + .input-group-append .input-group-text i {
    color: var(--black-38-percent);
}
/* Hover */
#OPApplicationContainer .form-control.flatpickr-input:hover {
    background-color: var(--black-8-percent) !important;
}
/* Focus */
#OPApplicationContainer .form-control.flatpickr-input:focus {
    background-color: var(--black-4-percent) !important;
    border-bottom: 1px solid var(--black-100-percent) !important;
    z-index: auto;
}
/* Disabled */
#OPApplicationContainer .form-control.flatpickr-input:disabled {
    background-color: var(--black-4-percent) !important;
    cursor: not-allowed;
}


/***** Buttons *****/
#OPApplicationContainer .btn-primary,
#OPApplicationContainer .btn-outline-secondary,
#OPApplicationContainer .btn-link {
    height: 32px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 4px;
    letter-spacing: 0.76002px;
    padding-left: 1em;
    padding-right: 1em;
}
/* Primary button > set icon to white */
#OPApplicationContainer .btn-primary i {
    color: var(--white-100-percent);
}
/* Override btn after btn margin left */
#OPApplicationContainer .btn-group .btn+.btn {
    margin-left: 0;
}
/** Primary **/
#OPApplicationContainer .btn-primary {
    background-color: var(--primary-100-percent) !important;
    border-color: var(--primary-100-percent) !important;
    min-width: 75px;
}
/* Primary hover */
#OPApplicationContainer .btn-primary:hover {
    opacity: .9;
}
/* Primary focus */
#OPApplicationContainer .btn-primary:focus {
    opacity: .8;
}
/* Primary disabled */
#OPApplicationContainer .btn-primary:disabled,
#OPApplicationContainer .btn:disabled {
    opacity: .38 !important;
    cursor: not-allowed;
}
/* Modals > add space between primary and secondary buttons  */
#OPApplicationContainer .modal-footer .btn-primary {
    margin-left: .5em;
}

/** Secondary outline **/
#OPApplicationContainer .btn-outline-secondary {
    border: 1px solid var(--grey-border);
    color: var(--black-100-percent);
    min-width: 75px;
}
/* Secondary outline hover */
#OPApplicationContainer .btn-outline-secondary:hover {
    background-color: var(--black-4-percent);
}
/* Secondary outline focus */
#OPApplicationContainer .btn-outline-secondary:focus {
    background-color: var(--black-12-percent);
    border: 1px solid var(--black-12-percent);
}
/* Secondary outline disabled */
#OPApplicationContainer .btn-outline-secondary:disabled {
    border: 1px solid var(--grey-border);
    color: var(--black-38-percent);
    cursor: not-allowed;
}
/* Secondary outline disabled + hover */
#OPApplicationContainer .btn-outline-secondary[disabled]:hover{
    background-color: transparent !important;
}
/* User config > clear buttons */
#OPApplicationContainer .form-horizontal.customForm .btn#btnClearControls {
    height: 32px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    border-radius: 4px;
    letter-spacing: 0.76002px;
    background-color: transparent;
    border: 1px solid var(--grey-border);
}
/* User config > asset management > cancel button */
#OPApplicationContainer #attributeForm .btn.btn-default {
    padding: 0.25rem 0.5rem;
    height: 32px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    border-radius: 4px;
    letter-spacing: 0.76002px;
    background-color: transparent;
    min-width: 75px;
}
/* User config > asset management > cancel button > hover */
#OPApplicationContainer #attributeForm .btn.btn-default:hover {
    background-color: var(--black-4-percent)
}
/* User config > asset management > cancel button focus */
#OPApplicationContainer #attributeForm .btn.btn-default:focus {
    background-color: var(--black-12-percent)
}
/* User configuration > user management + billing > buttons w/no style > make look primary */
#OPApplicationContainer .pageAndActionToolbar .toolbarWrapper .btn-group-sm .btn:not(.btn-primary):not(.btn-outline-secondary) {
    height: 32px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 4px;
    letter-spacing: 0.76002px;
    padding-left: 1em;
    padding-right: 1em;
    color: var(--white-100-percent);
    background-color: var(--primary-100-percent) !important;
    border-color: var(--primary-100-percent) !important;
}
/* User configuration > disabled button fix */
#OPApplicationContainer .pageAndActionToolbar .toolbarWrapper .btn-group-sm .btn:disabled {
    opacity: .38 !important;
}
/* User configuration > user management + billing > buttons w/no style > make look primary > hover */
#OPApplicationContainer .pageAndActionToolbar .toolbarWrapper .btn-group-sm .btn:not(.btn-primary):hover {
    opacity: .9;
}
/* User configuration > user management + billing > buttons w/no style > make look primary focus */
#OPApplicationContainer .pageAndActionToolbar .toolbarWrapper .btn-group-sm .btn:not(.btn-primary):focus {
    opacity: .8;
}
/* Menu management > cancel button */
#OPApplicationContainer #completeAlertDialogue .modal-dialog .btn-secondary {
    height: 32px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    border-radius: 4px;
    letter-spacing: 0.76002px;
    background-color: transparent;
    border: none;
    color: var(--black-100-percent);
    min-width: 75px;
}

/* Hover */
#OPApplicationContainer .form-horizontal.customForm .btn#btnClearControls:hover,
#OPApplicationContainer #completeAlertDialogue .modal-dialog .btn-secondary:hover {
    background-color: var(--black-4-percent);
}
/* Focus */
#OPApplicationContainer .form-horizontal.customForm .btn#btnClearControls:focus,
#OPApplicationContainer #completeAlertDialogue .modal-dialog .btn-secondary:focus {
    background-color: var(--black-12-percent);
}
/* Disabled > correct for all secondary buttons styles not covered above */
#OPApplicationContainer .btn.btn-outline-secondary.disabled,
#OPApplicationContainer .btn.btn-outline-secondary:disabled {
    opacity: 1 !important;
}
/***** Secondary outline icons *****/
/** Secondary outline icon / Grid Icons  **/
/* Align buttons to the right */
#OPApplicationContainer .ag-theme-custom .btn-group {
    justify-content: flex-end;
    gap: .75em;
}
/* Adjust width for dropdown icon button group */
#OPApplicationContainer .ag-theme-custom .w-100.btn-group {
    width: auto !important;
}
/* Adjust spacing for dropdown icon button */
#OPApplicationContainer .ag-theme-custom .w-100.btn-group .btn {
    padding-right: 0;
    margin-right: 0;
}
/* Icon button default */
#OPApplicationContainer .ag-theme-custom .btn-outline-secondary:not(.dropdown-item),
#OPApplicationContainer .btn-sm.rounded-circle,
#OPApplicationContainer .k-grid .k-grid-toolbar .btn-outline-secondary  {
    height: 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    border: none;
    background-color: transparent;
    border-radius: 10em !important;
    color: var(--black-60-percent);
    padding: 0;
    font-size: 16px;
    line-height: 1.4 !important;
}
/* Icon buttons > make flex for ag grid only */
#OPApplicationContainer .ag-theme-custom .btn-outline-secondary:not(.dropdown-item)  {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Hover */
#OPApplicationContainer .ag-theme-custom .btn-outline-secondary:hover,
#OPApplicationContainer .btn-sm.rounded-circle:hover,
#OPApplicationContainer .k-grid .btn-outline-secondary:hover {
    background-color: var(--black-4-percent);
}
/* Focus */
#OPApplicationContainer .ag-theme-custom .btn-outline-secondary:focus,
#OPApplicationContainer .btn-sm.rounded-circle:focus,
#OPApplicationContainer .k-grid .btn-outline-secondary:focus {
    background-color: var(--black-12-percent);
}
/* Kendo icons > font size + color */
#OPApplicationContainer .k-grid .btn-outline-secondary .fa {
    font-size: 16px !important;
    color: var(--black-60-percent) !important;
    font-weight: 900 !important;
    font: 16px/1 var(--font-awesome-5-pro);
}
/* Kendo icons > push to the right */
#OPApplicationContainer .k-grid .k-grid-toolbar .float-right.col-lg-4 {
    justify-content: flex-end;
}
/* Kendo icon > dropdown button */
#OPApplicationContainer .k-grid .btn-outline-secondary .k-button {
    height: 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    border: none !important;
    background-color: transparent !important;
    border-radius: 10em !important;
    color: var(--black-60-percent) !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
}
/* Disabled */
#OPApplicationContainer .ag-theme-custom .btn-outline-secondary:disabled,
#OPApplicationContainer .btn-sm.rounded-circle:disabled {
    color: var(--black-38-percent);
}
/* Disabled + hover */
#OPApplicationContainer .ag-theme-custom .btn-outline-secondary[disabled]:hover,
#OPApplicationContainer .btn-sm.rounded-circle[disabled]:hover {
    background-color: transparent;
}
/* Advanced searh */
#OPApplicationContainer .btn-outline-secondary.btnAdvancedSearch {
    min-width: 1px;
    margin-left: -1.5em;
    margin-right: 0.7em;
    background: var(--black-4-percent);
    border: 1px solid var(--grey-border);
    color: var(--black-60-percent);
    width: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Hover */
#OPApplicationContainer .btn-outline-secondary.btnAdvancedSearch:hover {
    background: var(--black-8-percent);
}
/* Focus */
#OPApplicationContainer .btn-outline-secondary.btnAdvancedSearch:focus {
    background: var(--black-12-percent);
}
/* Disbabled */
/* Hover */
#OPApplicationContainer .btn-outline-secondary.btnAdvancedSearch[disabled]:hover {
    background: var(--black-4-percent) !important;
}
/* Saved search modal > make icon buttons smaller */
#OPApplicationContainer .btn-sm.rounded-circle {
    height: 32px !important;
    width: 32px !important;
    min-width: 32px !important;
}
/* Hover > given striped table > bumped to 8% */
#OPApplicationContainer .btn-sm.rounded-circle:hover {
    background-color: var(--black-8-percent) !important;
}
/* Generate live link > ag grid + command center > ag grid icon button */
#OPApplicationContainer .modal-body .ag-cell-not-inline-editing .btn-primary.btn-sm,
#OPApplicationContainer #commandCenterContainer .ag-cell-not-inline-editing .btn-sm.color-red {
    border: none;
    background-color: transparent !important;
    border-radius: 10em !important;
    padding: 0;
    font-size: 16px;
    height: 32px !important;
    width: 32px !important;
    line-height: 1.4 !important;
    min-width: 1px;
    color: var(--black-60-percent) !important;
}
/* Generate live link > ag grid > buttons/icons */
#OPApplicationContainer .modal-body .ag-cell-not-inline-editing .btn-primary.btn-sm i {
    color: var(--black-60-percent) !important;
    font-weight: 900 !important;
}
/* Hover > given striped table > bumped to 8% */
#OPApplicationContainer .modal-body .ag-cell-not-inline-editing .btn-primary.btn-sm:hover,
#OPApplicationContainer #commandCenterContainer .ag-cell-not-inline-editing .btn-sm.color-red:hover {
    background-color: var(--black-8-percent) !important;
}
/* Focus */
#OPApplicationContainer .modal-body .ag-cell-not-inline-editing .btn-primary.btn-sm:focus {
    background-color: var(--black-12-percent) !important;
}
/** User config + asset mgtm > date picker cancel button **/
#OPApplicationContainer #divStartDate .btn-outline-secondary,
#OPApplicationContainer #divDateRangeStatus .btn-outline-secondary,
#OPApplicationContainer .customForm .input-group-append .btn-outline-secondary.btn-secondary {
    min-width: 1px;
}

/** Link button**/
#OPApplicationContainer .btn-link {
    color: var(--black-100-percent);
}
/* Arrow */
#OPApplicationContainer .btn-link i {
    margin-left: .25em;
    margin-right: .5em !important;
    font-size: 16px !important;
}
/* Hover + active states */
#OPApplicationContainer .btn-link:hover,
#OPApplicationContainer .btn-link:active {
    text-decoration: none;
    background-color: var(--black-4-percent) !important;
}
/* Focus */
#OPApplicationContainer .btn-link:focus {
    text-decoration: none;
    background-color: var(--black-12-percent);
}

/***** Icons *****/
/*Saved searches button icon */
#OPApplicationContainer i.fas.text-warning {
    color: var(--saved-search-icon) !important
}
/* Set x icon in search */
#OPApplicationContainer .customSearchBar i {
    color: var(--black-60-percent);
}


/***** Checkboxes *****/
/* Hide default styles */
#OPApplicationContainer input[type=checkbox] {
	-moz-appearance:none;
	-webkit-appearance:none;
	-o-appearance:none;
	outline: none;
	content: none;
}
/* Set new styles and add Font Awesome icon */
#OPApplicationContainer input[type=checkbox]::before {
	font-family: var(--font-awesome-5-pro);
    content: "\f00c";
    font-weight: 900;
    font-size: 11px;
    color: transparent !important;
    background: transparent;
    display: block;
    width: 15px;
    height: 15px;
    border: 2px solid var(--black-60-percent);
    text-align: center;
    line-height: 1.4;
    border-radius: 2px;
    overflow: hidden;
}
/* Disabled */
#OPApplicationContainer input[type=checkbox]:disabled {
    cursor: not-allowed;
    pointer-events: all !important;
}
/* Disabled > unchecked */
#OPApplicationContainer input[type=checkbox]:disabled::before,
#OPApplicationContainer input[type=checkbox]:disabled:checked::before {
    background-color: var(--black-38-percent) !important;
    color: var(--white-100-percent) !important;
    border: none  !important;
}
/* Add checked styles */
#OPApplicationContainer input[type=checkbox]:checked::before {
    background-color: var(--black-100-percent);
	color: var(--white-100-percent) !important;
    border: none;
    height: 15px;
    width: 15px;
}
/* Mimic material hover / unchecked */
#OPApplicationContainer input[type=checkbox].check:hover:after {
    content:"";
    top: 50%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 399;
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    border-radius: 10em;
    background-color: var(--black-8-percent);
    width: 170%;
    height: 170%;
}
/* Mimic material hover / checked */
#OPApplicationContainer input[type=checkbox]:checked.check:hover:after {
    content:"";
    top: 50%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 399;
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    border-radius: 10em;
    background-color: var(--black-8-percent);
    width: 170%;
    height: 170%;
}
/* Kendo grids > mimic material hover */
#OPApplicationContainer #DeviceManagement .k-grid td input[type=checkbox]:hover:after,
#OPApplicationContainer #AssetManagement .k-grid td input[type=checkbox]:hover:after {
    content: "";
    position: absolute;
    left: 1%;
    transform: translate(-42%, -76%);
    z-index: 399;
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    border-radius: 10em;
    background-color: var(--black-8-percent);
    width: 28px;
    height: 28px;
}
/* Kendo grids > mimic material hover > hide for disabled */
#OPApplicationContainer #DeviceManagement .k-grid td input[type=checkbox]:disabled:hover:after,
#OPApplicationContainer #AssetManagement .k-grid td input[type=checkbox]:disabled:hover:after {
    display: none;
}
/* AG grid > match height/width to our spec */
#OPApplicationContainer .ag-theme-balham .ag-checkbox-input-wrapper {
    width: 15px;
    height: 15px;
}
/* Adjust overflow for checkbox cell for hover state */
#OPApplicationContainer .ag-header-cell div.ag-checkbox + div.ag-react-container .ag-header-cell-label {
    overflow: auto;
    padding-left: 5px;
}
/* Adjust for checkbox hover */
#OPApplicationContainer .ag-theme-balham.ag-theme-custom .ag-row .ag-cell:first-of-type .ag-react-container {
    padding-left: 5px;
}
/* Remove blue box shadow when focused */
#OPApplicationContainer .ag-theme-balham .ag-checkbox-input-wrapper:focus-within,
#OPApplicationContainer .ag-theme-balham .ag-checkbox-input-wrapper:active{
    box-shadow: none !important;
}
/* Unchecked */
#OPApplicationContainer .ag-theme-balham .ag-checkbox-input-wrapper::after {
    content: "";
    font-family: var(--font-awesome-5-pro);
    border: 2px solid var(--black-60-percent);
    width: 15px;
    height: 15px;
}
/* Indeterminate */
#OPApplicationContainer .ag-theme-balham .ag-checkbox-input-wrapper.ag-indeterminate::after {
    color: var(--white-100-percent);
    background: var(--black-100-percent);
    font-family: var(--font-awesome-5-pro);
    content: "\f068";
    font-weight: 900;
    font-size: 11px;
    width: 16px;
    height: 16px;
    text-align: center;
    line-height: 1.1;
    border-radius: 2px;
}
/* Checked */
#OPApplicationContainer .ag-theme-balham .ag-checkbox-input-wrapper.ag-checked::after {
    color: var(--white-100-percent) !important;
    background: var(--black-100-percent) !important;
    font-family: var(--font-awesome-5-pro) !important;
    content: "\f00c" !important;
    font-weight: 900;
    font-size: 11px;
    width: 16px;
    height: 16px;
    text-align: center;
    line-height: 1.1;
    border-radius: 2px;
}

/***** Radio buttons *****/
/* Set new styles and add Font Awesome */
#OPApplicationContainer input[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: transparent;
    outline: none;
    font-size: 20px;
    font-family: var(--font-awesome-5-pro);
    transition: 300ms ease-out;
    width: 30px;
    text-align: center !important;
}
/* Unchecked */
#OPApplicationContainer input[type=radio]:after {
    content: "\f111";
    display: inline-block;
    text-align: center;
    width: auto;
    border: none;
    color: var(--black-60-percent);
    border: none !important;
}
/* Unchecked / hover */
#OPApplicationContainer input[type=radio].align-middle:hover:after {
    border-radius: 10em;
    background-color: var(--black-8-percent);
    width: 100%;
    height: 100%;
}
/* Radio buttons > disabled > set color to 38% */
#OPApplicationContainer input[type=radio]:disabled:after,
#OPApplicationContainer input[type=radio]:disabled:checked:after {
    color: var(--black-38-percent);
}
/* Radio buttons > disabled > hover > disable */
#OPApplicationContainer input[type=radio]:disabled:hover {
    background-color:transparent !important;
}
/* GeoFence management > radio buttons > hover */
#OPApplicationContainer input[type=radio]:hover {
    border-radius: 10em;
    background-color: var(--black-8-percent);
}
/* Assign asset modal radio button hover */
#OPApplicationContainer .form-check .form-check-input:hover {
    border-radius: 10em;
    background-color: var(--black-8-percent);
}
/* Checked */
#OPApplicationContainer input[type=radio]:checked:after {
    content: "\f192";
    color: var(--black-100-percent);
}
/* Checked / hover */
#OPApplicationContainer input[type=radio]:checked.align-middle:hover:after  {
    border-radius: 10em;
    background-color: var(--black-8-percent);
}

/***** Toggle switch *****/
/* Defaults */
#OPApplicationContainer label.switch,
#OPApplicationContainer #AssetManagement label.switch,
#OPApplicationContainer #AssetManagement .slider,
#OPApplicationContainer #DeviceManagement label.switch,
#OPApplicationContainer #DeviceManagement .slider {
    height: 14px;
    width: 32px;
    margin-top: 0.5em;
}
/* Toggles > small */
#OPApplicationContainer label.switch-small {
    width: 32px;
    height: 14px;
}
/* Set circle values */
#OPApplicationContainer .slider::before,
#OPApplicationContainer .slider-small::before,
#OPApplicationContainer #AssetManagement .slider:before,
#OPApplicationContainer #DeviceManagement .slider:before {
    box-shadow: 0px 3px 6px var(--black-20-percent);
    -webkit-transition: 0s;
    transition: 0s;
    top: -2px;
    left: -1px;
    height: 18px;
    width: 18px;
}
/* Toggle > small > hide icon */
#OPApplicationContainer input:checked+.slider-small::before {
    color: transparent;
    background-color: var(--black-100-percent);
}
/** Off state **/
/* Set off background color */
#OPApplicationContainer .slider,
#OPApplicationContainer .slider-small {
    background-color: var(--black-38-percent);
    height: 14px;
}
/* Off state / hover */
#OPApplicationContainer .slider.round:hover::before,
#OPApplicationContainer .slider-small.round:hover::before {
    box-shadow: 0 0 0 5px var(--black-12-percent) !important;
}
/** On state */
/* Set on background color */
#OPApplicationContainer input:checked+.slider,
#OPApplicationContainer #AssetManagement input:checked+.slider,
#OPApplicationContainer #DeviceManagement input:checked+.slider {
    background-color: var(--black-38-percent)
}
/* Remove check mark and add primary color for on state */
#OPApplicationContainer input:checked+.slider::before {
    content: '' !important;
    background-color: var(--black-100-percent);
    left: -11px;
}
/* Adjust for asset/device management > on state */
#OPApplicationContainer #AssetManagement input:checked+.slider::before,
#OPApplicationContainer #DeviceManagement input:checked+.slider::before {
    left: -11px;
}
/* On state / hover */
#OPApplicationContainer  input:checked+.slider.round:hover::before {
    box-shadow: 0 0 0 5px var(--black-8-percent)   !important;
}
/* Toggles > disabled */
#OPApplicationContainer input[type="checkbox"]:disabled +.slider::before,
#OPApplicationContainer input[type="checkbox"]:disabled +.slider-small::before,
#OPApplicationContainer #AssetManagement .disabled input:checked+.slider::before,
#OPApplicationContainer #DeviceManagement .disabled input:checked+.slider::before {
    box-shadow: 0px 1px 3px var(--black-20-percent);
    background-color: #B5B5B5;
}
#OPApplicationContainer input[type="checkbox"]:disabled + .slider.round:hover::before,
#OPApplicationContainer input[type="checkbox"]:disabled + .slider-small.round:hover::before {
    box-shadow: none !important;
}
#OPApplicationContainer input[type="checkbox"]:disabled + .slider,
#OPApplicationContainer input[type="checkbox"]:disabled + .slider-small,
#OPApplicationContainer #AssetManagement .disabled input:checked+.slider,
#OPApplicationContainer #DeviceManagement .disabled input:checked+.slider   {
    background-color: var(--black-12-percent);
}


/***** Tooltip *****/
#OPApplicationContainer .show.tooltip {
    opacity: 1 !important;
}
#OPApplicationContainer .show.tooltip div.arrow {
    color: var(--black-87-percent) !important;
    opacity: 1 !important;
}
#OPApplicationContainer .bs-tooltip-top div.arrow::before {
    border-top-color: var(--black-87-percent) !important;
    opacity: 1 !important;
}
#OPApplicationContainer .tooltip-inner {
    padding: 0.75rem 1em 0.9em 1em !important;
    background-color: var(--black-87-percent) !important;
    border-radius: 4px !important;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.32px;
    line-height: 1.3;
    text-align: left;
}

/***** Popover *****/
/* Popover > set font*/
#OPApplicationContainer .popover {
    font-family: var(--roboto) !important;
    font-size: 14px;
    border-radius: 4px;
    border: none !important;
    box-shadow: 0 2px 10px var(--black-20-percent) !important;
    padding: 1em;
}
/* Popover > remove background color so it mimics a modal */
#OPApplicationContainer .popover .popover-header {
    background-color: transparent;
    border-bottom: none;
    font-size: 16px;
    padding: 0;
    margin-bottom: 1em;
}
/* Popover > set font color */
#OPApplicationContainer .popover .popover-body {
    padding: 0;
    color: var(--black-87-percent);
}
/* Popover > add spacing and reverse button order to match modal */
#OPApplicationContainer .popover .popover-body div.justify-content-start {
    margin-top: 1em !important;
    flex-direction: row-reverse;
}
/* Popover > set ok button right margin to zero so buttons right align */
#OPApplicationContainer .popover .popover-body .btn-group.mr-auto {
    margin-right: 0 !important;
}
/* Popover > notices modal > mark all as read > cancel button */
#OPApplicationContainer .popover#confirmMarkAllAsRead .popover-body .btn-group:not(.mr-auto)  {
    margin-right: 1em;
}
/* Advanced search popover */
/* Advanced search popover > add spacing and reverse button order to match modal */
#OPApplicationContainer .advancedSearchFilterNotifierContainer.popover .popover-body div:last-of-type {
    flex-direction: row;
    gap: 2em;
    align-items: center;
}
/* Advanced search popover > make header 16px */
#OPApplicationContainer .advancedSearchFilterNotifierContainer.popover .popover-body > div:first-child {
    font-size: 16px;
}
/* Advanced search popover > tweak vertical alignment */
#OPApplicationContainer .advancedSearchFilterNotifierContainer.popover .popover-body div:last-of-type input {
    margin-bottom: 1px;
    margin-right: .5em !important;
}
#OPApplicationContainer .advancedSearchFilterNotifierContainer.popover .popover-body div:last-of-type label {
    margin-bottom: 0;
}
/* Advanced search popover > button line-height */
#OPApplicationContainer .advancedSearchFilterNotifierContainer.popover .popover-body button {
    line-height: 1.7;
}
/** Notifications popover > hover over notification name in grid **/
#OPApplicationContainer .popover .popover-body .col-12 {
    width: 500px;
    padding-left: 0;
    padding-right: 0;
}
/* Adjust table */
#OPApplicationContainer .popover .popover-body .table-responsive-md.px-3 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0;
}
#OPApplicationContainer .popover .popover-body .table {
    margin-bottom: 0;
}
#OPApplicationContainer .popover .popover-body .table.table-bordered {
    border: 1px solid var(--grey-border);
}
#OPApplicationContainer .popover .popover-body .table tr:nth-child(even) {
    background-color: var(--black-4-percent);
}
#OPApplicationContainer .popover .popover-body .table-responsive-md #notification-info-grid td {
    padding-left: 1em;
    border: none;
}
#OPApplicationContainer .popover .popover-body .table-responsive-md #notification-info-grid td:nth-child(odd) {
    width: 37% !important;
}
#OPApplicationContainer .popover .popover-body .table-responsive-md #notification-info-grid td:nth-child(even) {
    width: 25% !important;
}
#OPApplicationContainer .popover .popover-body .table-responsive-md #notification-info-grid th {
    background-color: var(--black-8-percent);
    height: 34px;
    padding: 0;
    vertical-align: middle;
    padding-left: 1em;
    border: none !important;
    border-bottom: 1px solid var(--grey-border) !important;
}

/***** Advanced Search Side Bar > sync overlay with skinned overlay  *****/
#OPApplicationContainer .customOverlay.advancedSearchSideBarOverlay {
    background-color: var(--black-32-percent);
}
/* Advanced search sidebar > box shadow */
#OPApplicationContainer .customOverlay.advancedSearchSideBarOverlay .advancedSearchSideBar {
    box-shadow: 0 2px 10px var(--black-20-percent) !important;
    z-index: 22;
}

/***** Grid column tree *****/
/* Header labels */
#OPApplicationContainer .tree-view ul li label  {
    font-weight: 600 !important;
    font-size: 15px !important;
    color: var(--black-87-percent) !important;
}
/* List labels */
#OPApplicationContainer .tree-view ul li li label  {
    font-weight: 400 !important;
    font-size: 14px !important;
}

/***** Tabs *****/
/* Remove border radius */
#OPApplicationContainer .nav-tabs .nav-link {
    border-radius: 0 !important;
}
/* Style tabs */
#OPApplicationContainer .customNavTabsHorizontal .customNavTabs,
#OPApplicationContainer .customNavTabsHorizontal.customNavTabs,
#OPApplicationContainer .customNavTabsHorizontal.nav,
#OPApplicationContainer .wrapperNotificationSettings nav,
#OPApplicationContainer .modal .nav {
    height: 48px;
    margin-bottom: 1em;
}
#OPApplicationContainer .customNavTabsHorizontal .customNavTabs.nav-tabs,
#OPApplicationContainer .customNavTabsHorizontal.nav-tabs,
#OPApplicationContainer .customNavTabsHorizontal .nav-tabs,
#OPApplicationContainer .wrapperNotificationSettings nav.nav-tabs,
#OPApplicationContainer .modal .nav.nav-tabs  {
    border-bottom: 1px solid var(--grey-border);
    height: 48px;
}
/* When ul/li are used */
#OPApplicationContainer .customNavTabsHorizontal.customNavTabs ul li {
    height: 48px !important;
    display: flex !important;
    align-items: center;
}
#OPApplicationContainer .customNavTabsHorizontal ul li>a {
    padding: 5px 15px 2px 15px !important;
}
/* Default styles with spacing hack */
#OPApplicationContainer .customNavTabsHorizontal .customNavTabs.nav.nav-tabs > a,
#OPApplicationContainer .customNavTabsHorizontal.nav.nav-tabs > a,
#OPApplicationContainer .customNavTabsHorizontal ul li>a,
#OPApplicationContainer #AssetManagement .customNavTabsHorizontal ul li>a,
#OPApplicationContainer #DeviceManagement .customNavTabsHorizontal ul li>a,
#OPApplicationContainer .wrapperNotificationSettings .nav.nav-tabs > a,
#OPApplicationContainer .modal .nav.nav-tabs > a {
    display: flex;
    align-items: center;
    padding-bottom: .2em;
    border-bottom: 3px solid transparent;
    font-weight: 500;
    letter-spacing: 1.2px;
    margin-right: 0;
    color: var(--black-60-percent) !important;
    height: 48px;
}
/* Active state */
#OPApplicationContainer .customNavTabsHorizontal .customNavTabs.nav.nav-tabs > a.active,
#OPApplicationContainer .customNavTabsHorizontal.nav.nav-tabs > a.active,
#OPApplicationContainer .customNavTabsHorizontal ul li>a.active,
#OPApplicationContainer #AssetManagement .customNavTabsHorizontal ul li>a.active,
#OPApplicationContainer .wrapperNotificationSettings .nav.nav-tabs > a.active,
#OPApplicationContainer .modal .nav.nav-tabs > a.active {
    border-bottom: 3px solid var(--primary-100-percent) !important;
    color: var(--primary-100-percent) !important;
}
/* GeoFence management > remove borders */
#OPApplicationContainer .modal .nav.nav-tabs > a.active,
#OPApplicationContainer .modal .nav.nav-tabs > a:hover  {
    border-color: transparent;
}
/* Disabled */
#OPApplicationContainer .customNavTabsHorizontal .customNavTabs.nav.nav-tabs > a.disabled,
#OPApplicationContainer .customNavTabsHorizontal.nav.nav-tabs > a.disabled,
#OPApplicationContainer .customNavTabsHorizontal ul li>a.disabled,
#OPApplicationContainer .wrapperNotificationSettings .nav.nav-tabs > a.disabled {
    color: var(--black-38-percent) !important;
}
/* Disabled > hover */
#OPApplicationContainer .customNavTabsHorizontal .customNavTabs.nav.nav-tabs a.nav-item.nav-link.disabled:hover,
#OPApplicationContainer .customNavTabsHorizontal.nav.nav-tabs a.nav-item.nav-link.disabled:hover,
#OPApplicationContainer .customNavTabsHorizontal ul li>a.disabled:hover,
#OPApplicationContainer .wrapperNotificationSettings .nav.nav-tabs > a.disabled:hover {
    background-color: transparent !important;
    cursor: not-allowed !important;
}
/* Hover*/
#OPApplicationContainer .customNavTabsHorizontal nav.customNavTabs.nav.nav-tabs a.nav-item.nav-link:hover,
#OPApplicationContainer .customNavTabsHorizontal.nav.nav-tabs a.nav-item.nav-link:hover,
#OPApplicationContainer .customNavTabsHorizontal ul li>a:hover,
#OPApplicationContainer .wrapperNotificationSettings .nav.nav-tabs a.nav-item.nav-link:hover,
#OPApplicationContainer .modal .nav.nav-tabs > a:hover  {
    background-color: var(--primary-4-percent) !important;
}
/* Focused */
#OPApplicationContainer .customNavTabsHorizontal .customNavTabs.nav.nav-tabs a.nav-item.nav-link:not(.disabled):focus,
#OPApplicationContainer .customNavTabsHorizontal.nav.nav-tabs a.nav-item.nav-link:not(.disabled):focus,
#OPApplicationContainer .customNavTabsHorizontal ul li>a:focus,
#OPApplicationContainer .wrapperNotificationSettings .nav.nav-tabs a.nav-item.nav-link:not(.disabled):focus {
    background-color: var(--primary-12-percent) !important;
}
/* Tabs > device management > override color */
#OPApplicationContainer  #DeviceManagement .customNavTabsHorizontal ul li>a {
    color: var(--black-60-percent) !important;
}
/* Tabs > device management > override color > active */
#OPApplicationContainer  #DeviceManagement .customNavTabsHorizontal ul li>a:active {
    color: var(--primary-100-percent) !important;
}
/** Tabs > small tabs **/
#OPApplicationContainer .customNavTabsSmall.nav.nav-tabs,
#OPApplicationContainer  .customNavTabsSmall.nav.nav-tabs>a {
    height: 32px!important;
    border-bottom: none!important;
    color: var(--black-60-percent) !important;
}

#OPApplicationContainer .customNavTabsSmall.nav.nav-tabs>a.active {
    border-bottom: none!important;
    background: var(--primary-4-percent)!important;
    color: var(--primary-100-percent)!important;
}

#OPApplicationContainer .customNavTabsSmall.nav.nav-tabs>a:hover {
    border-bottom: none!important;
    background: var(--primary-4-percent)!important;
}


/***** ag grid *****/
#OPApplicationContainer .inpGridQuickFilter {
    background-color: var(--black-4-percent) !important;
    border-radius: 4px;
    margin-top: 5px;
}
/* AG grid > in-grid search/filter > make backgrounds consistent */
#OPApplicationContainer .inpGridQuickFilter .form-control,
#OPApplicationContainer .inpGridQuickFilter .form-control:hover,
#OPApplicationContainer .inpGridQuickFilter .form-control:focus,
#OPApplicationContainer .inpGridQuickFilter .btn-primary {
    background-color: transparent !important;
    border-bottom: transparent !important;
}
/* AG grid > in-grid search/filter > adjust button width */
#OPApplicationContainer .inpGridQuickFilter .input-group-append button.btn {
    min-width: 32px !important;
}
#OPApplicationContainer .inpGridQuickFilter .input-group-text {
    margin-top: 3px;
}
/* AG grid > in-grid search/filter > sync clear icon color */
#OPApplicationContainer .inpGridQuickFilter .btn-primary i {
    color: var(--black-60-percent) !important;
}
/* Set font */
#OPApplicationContainer .ag-theme-balham {
    font-family: var(--roboto) !important;
    font-size: 12px;
    letter-spacing: .5px;
}
/* ag grid > set cell text size */
#OPApplicationContainer .ag-theme-balham.ag-theme-custom .ag-cell {
    color: var(--black-87-percent) !important;
    font-size: 12px;
    line-height: 34px !important;
    border: none !important;
    font-weight: 400;
    padding-right: 8px;
    padding-left: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Adjust line height */
#OPApplicationContainer .ag-theme-balham.ag-theme-custom .ag-cell .ag-react-container {
    line-height: 30px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Adjust icon size */
#OPApplicationContainer .ag-theme-balham.ag-theme-custom .ag-cell .ag-react-container .rsIcon {
    font-size: 16px;
    color: var(--black-60-percent);
}
/* Adjust for data migration schedule */
#OPApplicationContainer .wrapperDataMigrationScheduler .ag-theme-balham.ag-theme-custom .ag-cell .ag-react-container i  {
    color: var(--black-60-percent)
}
#OPApplicationContainer .wrapperDataMigrationScheduler .ag-theme-balham.ag-theme-custom .ag-cell .ag-react-container i.fa-2x {
    font-size: 1.4em !important;
}
/* Make linked icons blue */
#OPApplicationContainer .ag-theme-balham.ag-theme-custom .ag-cell .ag-react-container a .rsIcon  {
    color: #007bff;
}
/* Override top align of icons */
#OPApplicationContainer .ag-theme-balham.ag-theme-custom .ag-cell .ag-react-container .align-top {
    vertical-align: middle !important;
}
/* Border color */
#OPApplicationContainer .ag-theme-balham.ag-theme-custom .card,
#OPApplicationContainer .ag-theme-balham.ag-theme-custom .ag-root-wrapper {
    border: 1px solid var(--grey-border);
}
/* Section Header */
#OPApplicationContainer .ag-theme-balham.ag-theme-custom .card {
    border-bottom: none;
}
/* Grid */
#OPApplicationContainer .ag-theme-balham.ag-theme-custom .ag-root-wrapper {
    border-top: none;
}
/* Grid header */
#OPApplicationContainer .ag-theme-custom .ag-root-wrapper .ag-header {
    background-color: var(--black-8-percent) !important;
    border-bottom-color: var(--grey-border) !important;
    border-top: 1px solid var(--grey-border) !important;
}
/* Border / cell */
#OPApplicationContainer .ag-theme-balham.ag-theme-custom  .ag-header-row:not(:first-child) .ag-header-cell {
    border-top-color: var(--grey-border) !important;
}
/* Adjust header cell left padding to match grid cell */
#OPApplicationContainer .ag-theme-balham.ag-theme-custom .ag-header-cell {
    padding-left: 8px;
}
/* ag grid > set header cell text size  */
#OPApplicationContainer .ag-theme-custom .ag-header-cell-label .ag-header-cell-text {
    padding-left: 1px;
    font-weight: 600 !important;
    font-size: 12px !important;
    color: var(--black-87-percent) !important;
    font-family: var(--roboto) !important;
}
/* Header / divider border */
#OPApplicationContainer .ag-theme-balham.ag-theme-custom .ag-header-cell:after,
#OPApplicationContainer .ag-theme-balham.ag-theme-custom .ag-header-group-cell:after  {
    background-color: var(--black-12-percent);
}
/* Set header font */
#OPApplicationContainer .ag-theme-custom .ag-header .ag-header-row {
    color: var(--black-87-percent) !important;
    letter-spacing: 0.16002px;
}
/* Set header icon color */
#OPApplicationContainer .ag-theme-custom .ag-header .ag-header-row .ag-icon {
    color: var(--black-87-percent) !important;
}
/* Divider */
#OPApplicationContainer .ag-theme-balham.ag-theme-custom .ag-pinned-left-header {
    border-right-color: var(--grey-border);
}
/* Divider */
#OPApplicationContainer .ag-theme-balham.ag-theme-custom .ag-pinned-left-cols-container {
    border-right: 1px solid var(--grey-border);
}
/* Divider */
#OPApplicationContainer .ag-theme-balham.ag-theme-custom .ag-pinned-right-cols-container {
    border-left: 1px solid var(--grey-border);
}
/* Remove borders */
#OPApplicationContainer .ag-theme-balham.ag-theme-custom .ag-row {
    border: none;
}
/* Add border bottom to last row */
#OPApplicationContainer .ag-theme-balham.ag-theme-custom .ag-row.ag-row-last {
    border-bottom: 1px solid var(--grey-border);
}
/* Hover */
#OPApplicationContainer .ag-theme-balham.ag-theme-custom .ag-row-hover {
    background-color: var(--black-8-percent) !important;
}
/* Focus */
#OPApplicationContainer .ag-theme-balham.ag-theme-custom .ag-row-selected,
#OPApplicationContainer .ag-theme-balham.ag-theme-custom .ag-row-focus {
    background-color:  var(--black-12-percent) !important;
}
/* Set odd row color */
#OPApplicationContainer .ag-theme-custom .ag-row-odd {
    background-color:  var(--white-100-percent);
}
/* Set even row color */
#OPApplicationContainer .ag-theme-custom .ag-row-even {
    background-color:  var(--black-4-percent);
}
/* Checkbox in ag grid */
#OPApplicationContainer .ag-theme-balham.ag-theme-custom .ag-cell .ag-react-container input[type=checkbox] {
    top: 0;
    margin-right: 5px !important;
}
/* AG grid > expandable > set expandable row to bold */
#OPApplicationContainer .ag-theme-balham.ag-theme-custom .ag-row-group > div {
    font-weight: 600 !important;
}
/* AG grid > expandable > update open/close arrow */
#OPApplicationContainer .ag-theme-balham.ag-theme-custom .ag-group-expanded > .ag-icon-tree-open,
#OPApplicationContainer .ag-theme-balham.ag-theme-custom .ag-group-contracted > .ag-icon-tree-closed {
  margin-top: 8px !important;
  color: var(--black-87-percent) !important;
  font-size: 18px;
  font-weight: 600;
}
/* AG grid > expandable > update count text */
#OPApplicationContainer .ag-theme-custom div.ag-row-group .ag-group-child-count{
    margin-top: 4px;
    margin-left: 5px !important;
}
#OPApplicationContainer .ag-theme-custom  .ag-ltr .ag-row-level-1:not(.ag-cell-last-left-pinned) .ag-row-group-leaf-indent {
    margin-left: 2px;
}
#OPApplicationContainer .ag-theme-custom:not(#dashboardDwellReportGrid, #dashboardDetentionReportGrid) .ag-ltr .ag-row-level-1 div.ag-cell-last-left-pinned .ag-row-group-leaf-indent {
    margin-left: -28px !important;
}
/* AG grid > page record count selector */
#OPApplicationContainer .ag-theme-custom .ag-paging-panel #gridPageSizeSelector{
    border: 1px solid var(--grey-border);
    height: 20px;
    border-radius: 4px;
    width: 45px;
}
/***** Table / saved searches, notifications *****/
/* Set border */
#OPApplicationContainer .table.table-striped {
    border: 1px solid var(--grey-border);
}
/* Set header */
#OPApplicationContainer .table.table-striped thead th {
    border: none;
    border-bottom: 1px solid var(--grey-border) !important;
    border-width: 1px;
    font-weight: 600;
    background-color: var(--black-8-percent);
    height: 34px !important;
}
/* Adjust padding */
#OPApplicationContainer .table.table-striped td,
#OPApplicationContainer .table.table-striped th {
    padding: 0;
    padding-left: 1em;
    height: 34px;
    vertical-align: middle;
}
/* Remove row border */
#OPApplicationContainer .table.table-striped td {
    border: none;
    vertical-align: middle;
}
/* Make link field wider */
#OPApplicationContainer .table.table-striped td.w-50 {
    width: 50% !important;
}
/* Match to ag grid */
#OPApplicationContainer .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--black-4-percent);
}
#OPApplicationContainer .table-striped tbody tr:nth-of-type(even) {
    background-color: var(--white-100-percent);
}
/* Hover */
#OPApplicationContainer .table-striped tbody tr:hover {
    background-color: var(--black-8-percent);
}

/***** Cards *****/
/* Body */
#OPApplicationContainer .card {
    border: 1px solid var(--grey-border) ;
    border-radius: 4px;
}
/* Header */
#OPApplicationContainer .card .card-header {
    background-color: var(--black-4-percent) !important;
    font-size: 14px;
    color: var(--black-87-percent);
    font-weight: 700;
    letter-spacing: 0.16002px;
    min-height: 34px;
    border-radius: 4px 4px 0 0;
    display: flex;
    align-items: center;
}
#OPApplicationContainer button.btn[title="Delete"]:hover i.fa,
#OPApplicationContainer .btn-sm.rounded-circle[title="Delete Search"]:hover i.fa{
    color: var(--error) !important;
}

/***** Dashboard widget aka cards *****/
/* Set border and border radius */
#OPApplicationContainer .dashBoardWidget {
    border: 1px solid var(--grey-border);
    border-radius: 4px;
}
/* Set header */
#OPApplicationContainer .dashBoardWidget .dashBoardHeader  {
    border-bottom: 1px solid var(--grey-border);
    border-radius: 4px 4px 0 0;
    height: 32px;
    line-height: 32px;
}
/* Override header background color */
#OPApplicationContainer .dashBoardWidget .dashBoardHeader.bg-dark {
    background-color: var(--black-4-percent) !important;
}
/* Set header text */
#OPApplicationContainer .dashBoardWidget .dashBoardHeader span {
    font-size: 14px;
    color: var(--black-87-percent) !important;
    font-weight: 700;
    letter-spacing: 0.16002px;
}

/* Highcharts */
#OPApplicationContainer .highcharts-root {
    font-family: var(--roboto) !important;
}
#OPApplicationContainer .highcharts-root .highcharts-data-label text {
    color: var(--black-87-percent) !important;
    fill: var(--black-87-percent) !important;
    font-size: 12px !important;
}
#OPApplicationContainer .highcharts-root .highcharts-legend-item text {
    color: var(--black-87-percent) !important;
    fill: var(--black-87-percent) !important;
    font-size: 13px !important;
}
/* Adjust for inventory report */
#OPApplicationContainer .inventorydashBoardWidgetWrapper .highcharts-root .highcharts-data-label.highcharts-data-label-color-0 text {
    fill: var(--white-100-percent) !important;
}
#OPApplicationContainer .inventorydashBoardWidgetWrapper .highcharts-root .highcharts-data-label.highcharts-data-label-color-undefined text {
    fill: var(--black-100-percent) !important;
}
/***** Legend icons *****/
#OPApplicationContainer .reportLegendIcon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 32px;
    width: 32px;
    color: var(--black-60-percent) !important;
    margin-top: .5em;
}
#OPApplicationContainer i.reportLegendIcon  {
    font-size: 20px !important;
}

/***** Modals *****/
/* Overlay */
#OPApplicationContainer .modal-backdrop.show {
    background-color: var(--black-32-percent);
}
/* Wrapper */
#OPApplicationContainer .modal-content {
    border-radius: 4px;
    border: none !important;
    box-shadow: 0 2px 10px var(--black-20-percent) !important;
    min-height: 150px;
}
/* Adjust for modals that get horizontal scroll */
#OPApplicationContainer .modal-lg .modal-content .modal-body .row {
    margin-right: 0;
}
/* Undo for geofence management > add new modal */
#OPApplicationContainer .modal-content .modal-body #new-geo .row,
#OPApplicationContainer .modal-content .modal-body #editname .row {
    margin-left: 0;
    margin-right: 0;
}
/* Adjust for add note modal > put -15px right margin for row back */
#OPApplicationContainer .modalNotes .modal-content .modal-body .row {
    margin-right: -15px;
}

/* Modal > close  */
#OPApplicationContainer .modal-header .close,
#OPApplicationContainer .orb-modal-close {
    margin-top: .5rem;
    margin-right: .5rem;
    padding: 0;
    width: 32px;
    height: 32px;
    font-size: 21px;
    position: absolute;
    right: 0;
    top: 0;
    text-align: center;
    border-radius: 10em;
    color: var(--black-60-percent);
    float: unset;
    font-weight: bold;
    opacity: 1;
}
/*Map modal > geofence modal > close button */
#OPApplicationContainer button.gm-ui-hover-effect {
    border-radius: 10em !important;
}
/* Modal > close > hover */
#OPApplicationContainer .modal-header .close:hover,
#OPApplicationContainer .orb-modal-close:hover {
    background-color: var(--black-4-percent);
}
/*Map modal > geofence modal > close button > hover */
#OPApplicationContainer button.gm-ui-hover-effect:hover {
    background-color: var(--black-4-percent) !important;
}
/* Modal > close > focus */
#OPApplicationContainer .modal-header .close:focus,
#OPApplicationContainer .orb-modal-close:focus {
    background-color: var(--black-12-percent);
}
/*Map modal > geofence modal > close button > focus */
#OPApplicationContainer button.gm-ui-hover-effect:focus {
    background-color: var(--black-12-percent) !important;
}
/* Header */
#OPApplicationContainer .modal-content .modal-header,
#OPApplicationContainer .orb-modal-content .modal-header {
    padding: 1em 1em .5em 1em;
    border: none;
    height: 46px;
}
/* Title */
#OPApplicationContainer .modal-content .modal-title.h4,
#OPApplicationContainer .modal-content h4.modal-title,
#OPApplicationContainer .modal-content .modal-header h4,
#OPApplicationContainer .orb-modal-content .modal-header h4,
#OPApplicationContainer .modal-dialog .modal-header h5.modal-title {
    line-height: 1;
    border: none;
    color: var(--black-87-percent);
    font-weight: 500 !important;
    font-size: 16px;
}
#OPApplicationContainer .modal-content .modal-title.h4 b {
    font-weight: 500 !important;
}
/* Body */
#OPApplicationContainer .modal-content .modal-body {
    padding: .75rem 1rem;
}
/* Footer */
#OPApplicationContainer .modal-content .modal-footer {
    border: none;
}
/* Remove margin to right of action button */
#OPApplicationContainer .modal-content .modal-footer>:not(:last-child) {
    margin-right: 0;
}
/* Move buttons to the right */
#OPApplicationContainer .modal-content .justify-content-start.modal-footer {
    justify-content: flex-end !important;
}
/* Move cancel button over */
#OPApplicationContainer .modal-content .modal-footer .mr-auto {
    margin-right: 0 !important;
}
/* Update look and feel of cancel button */
#OPApplicationContainer .modal-content .modal-footer .btn.btn-outline-secondary:not(.custom-ui-control-datepicker .btn),
#OPApplicationContainer .popover .popover-body .btn.btn-outline-secondary  {
    border: none;
    line-height: 20px;
}

/***** Notices modal *****/
/* Notices modal > add padding to accomodate for toggle on state */
#OPApplicationContainer .divNotices div.justify-content-between {
    padding-right: .5em;
    margin-top: 1em;
}
/* Notices modal > list > vertical spacing */
#OPApplicationContainer .divNotices .list-group  {
    margin: 1em;
}
/* Notices modal > list item > vertical padding */
#OPApplicationContainer .divNotices .list-group-item,
#OPApplicationContainer .divNotices .list-group-item:last-child  {
    padding: 1.25em .5em;
    border-bottom: 1px solid var(--grey-border);
}
/* Notices modal > title text */
#OPApplicationContainer .divNotices .list-group h5.mb-1  {
    font-size: 16px !important;
    margin-bottom: .5em !important;
}
/* Notices modal > modified text */
#OPApplicationContainer .divNotices .list-group .list-group-item small  {
    font-size: 14px;
}
/* Notices modal > modified text > add margin right */
#OPApplicationContainer .divNotices .list-group .list-group-item b  {
    margin-right: .5em;
}
/* Notices modal > links > hover > underline */
#OPApplicationContainer .divNotices .list-group .list-group-item a:hover  {
    text-decoration: underline;
}

/***** Account management modals *****/
/* Update close button */
#OPApplicationContainer .model-dialog-assignAssets .modal-footer .btn-group .btn:not(.btn-primary),
#OPApplicationContainer .modal-footer .btn-group .btn:not(.btn-primary),
#OPApplicationContainer .modal-footer .btn:not(.btn-primary, .custom-ui-control-datepicker .btn) {
    height: 32px;
    font-size: 14px;
    font-weight: 500;
    line-height: 23px;
    border-radius: 4px;
    letter-spacing: 0.76002px;
    background-color: transparent;
    min-width: 75px;
    margin-right: .5em !important;
    order: -1;
}
/* Hover */
#OPApplicationContainer .modal-footer .btn-group .btn:not(.btn-primary):hover,
#OPApplicationContainer .modal-footer .btn:not(.btn-primary):hover {
    background-color: var(--black-4-percent);
}
/* Account management modals > data elements > arrows/buttons */
#OPApplicationContainer .modal-body #forwardBackwardButtons {
    width: 42px !important;
    height: 42px;
    min-width: 1px;
    background-color: transparent;
    border-radius: 10em;
    margin-top: 0.5em;
    border: 1px solid var(--black-12-percent);
    color: transparent !important;
    padding: 9px;
}
/* Account management modals > data elements > arrows/buttons > hover */
#OPApplicationContainer .modal-body #forwardBackwardButtons:hover {
    background-color: var(--black-4-percent);
}
/* Account management modals > data elements > arrows/buttons > focus */
#OPApplicationContainer .modal-body #forwardBackwardButtons:focus {
    background-color: var(--black-12-percent);
}
/* Account management modals > data elements > arrows/buttons > update to font awesome */
#OPApplicationContainer .modal-body a.round::after {
    position: absolute;
    font-family: var(--font-awesome-5-pro);
    font-weight: 900;
    color: var(--black-60-percent);
    font-size: 16px;
}
#OPApplicationContainer .modal-body a.next.round::after {
    content: "\f061";
}
#OPApplicationContainer .modal-body a.previous.round::after {
    content: "\f060";
}
/* Account management > image cropper modal */
#OPApplicationContainer .model-dialog-imagecroper .modal-content .modal-body {
    gap: 1.25em !important;
    display: flex;
    flex-direction: column;
    font-size: 14px !important;
    font-weight: 500;
    height: unset !important;
    padding: 0.75em 0 !important;
}
/* Account management > image cropper modal > buttons > switch order */
#OPApplicationContainer .model-dialog-imagecroper .modal-content .modal-footer .float-right {
    order: 1;
}
/* Account management > image cropper modal > buttons > add margin to icon */
#OPApplicationContainer .model-dialog-imagecroper .modal-content .modal-footer .float-right .btn-primary i {
    margin-right: .5em;
}

/***** Notes modal *****/
/* Note modal > style add note button */
#OPApplicationContainer .btn-primary.addNote {
    border: none !important;
    border-radius: 10em;
    min-width: 1px;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
}
/* Disabled */
#OPApplicationContainer .btn-primary.addNote:disabled {
    background-color: #ccc !important;
    color: #B3B3B3 !important;
    opacity: 1 !important;
}
/* Adjust button > icon font size */
#OPApplicationContainer .btn-primary.addNote i.fa-2x {
    font-size: 16px;
    line-height: 22px;
}
/* Set background to white */
#OPApplicationContainer ul.ulNotes li,
#OPApplicationContainer .revisionHistory .noteContent {
    background-color: var(--white-100-percent);
}
/* Update border color */
#OPApplicationContainer ul.ulNotes .liNote,
#OPApplicationContainer .revisionHistory .noteContent {
    border-bottom: 1px solid var(--black-12-percent) !important;
    padding-bottom: 1em !important;
    padding-top: 1em !important;
}
/* Set note layout */
#OPApplicationContainer ul.ulNotes .liNote .noteContent {
    margin-right: .5em;
}
/* Adjust note text */
#OPApplicationContainer ul.ulNotes .liNote .noteDesc h5,
#OPApplicationContainer .noteDesc h5 {
    font-size: 13.5px;
    font-weight: 400;
    line-height: 19px;
    margin-bottom: 1em;
}
/* Note icons / main */
#OPApplicationContainer ul.ulNotes .liNote .noteAction {
    width: 15%;
    display: flex;
}
/* Adjust small text under note */
#OPApplicationContainer ul.ulNotes .liNote .noteContent small.text-muted,
#OPApplicationContainer ul.ulNotes .liNote .noteContent .text-muted,
#OPApplicationContainer ul.ulNotes .liNote .noteContent .text-muted small {
    font-size: 12px !important;
    color: var(--black-60-percent) !important;
    font-weight: 500;
}
/* Style icon buttons */
#OPApplicationContainer ul.ulNotes .liNote .noteDesc .clickable i,
#OPApplicationContainer ul.ulNotes .liNote .noteAction i {
    height: 32px;
    width: 32px;
    display: flex;
    justify-content:  center;
    align-items: center;
    border-radius: 10em;
    font-size: 16px;
    color: var(--black-60-percent);
}
/* Set flex so icons can be centered */
#OPApplicationContainer ul.ulNotes .liNote .noteDesc .clickable  {
    display: flex;
    flex-direction: row;
}
/* Hover */
#OPApplicationContainer ul.ulNotes .liNote .noteDesc .clickable i:hover,
#OPApplicationContainer ul.ulNotes .liNote .noteAction i:hover {
    background: var(--black-4-percent) !important;
}
/* Update icon > it's saving so save icon */
#OPApplicationContainer ul.ulNotes .liNote .noteDesc .clickable i.fa-check-circle::before {
    content: "\f0c7" !important;
}
/* Update icon to match new delete icons */
#OPApplicationContainer ul.ulNotes .liNote .noteDesc .clickable i.fa-check-circle.mr-1 {
    margin-right: .75em !important;
}
/* Add more spacing between icon buttons */
#OPApplicationContainer ul.ulNotes .liNote .noteAction i.mr-1 {
    margin-right: 0 !important;
}
/* Replace x icon with Font Awesome icon */
#OPApplicationContainer .input-group-text i.fa-times::before,
#OPApplicationContainer .input-group-append i.fa-times:before {
    content: "\f057";
}
#OPApplicationContainer i.fa-times:hover::before,
#OPApplicationContainer i.fa-times:hover::before,
#OPApplicationContainer i.fa-trash:hover,
#OPApplicationContainer i.fa-trash:hover::before,
#OPApplicationContainer i.fa-trash-alt:hover,
#OPApplicationContainer button.fa-trash:hover {
    color: var(--error) !important;
}
/* Adjust spacing with date picker / search button */
#OPApplicationContainer .modalNotes .modal-footer .col-3.text-right {
    text-align: left !important;
    padding-left: 0;
}
/* Add space above the close button */
#OPApplicationContainer .modalNotes .btn-outline-secondary:not(.custom-ui-control-datepicker .btn) {
    margin-top: 1em;
}

/***** Login page *****/
/* Login page > main */
#OPApplicationContainer #synergy-login-panel {
    background: var(--white-100-percent);
    max-width: 350px;
    padding: 0 1em 1em 1em;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Login page > main > inner */
#OPApplicationContainer #synergy-login-panel-inner {
    height: auto;
    margin: unset;
}
/* Login page > main > inner > sign in text */
#OPApplicationContainer #synergy-login-panel-inner .form-signin-heading {
    font-weight: 500;
    font-size: 22px;
    color: var(--black-87-percent);
    letter-spacing: .5px;
}
/* Login page > main > inner > add padding to input fields and margin at bottom */
#OPApplicationContainer #synergy-login-panel-inner #loginForm input {
    margin-bottom: 1em !important;
    padding-left: 1em;
}
/* Login page > error message */
#OPApplicationContainer #synergy-login-panel-inner #loginForm p:not(.text-left) {
    padding: 1em;
    font-size: 14px;
    letter-spacing: .5px;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
}
/* Login page > main > inner > submit button */
#OPApplicationContainer #synergy-login-panel-inner .btn-primary {
    border-radius: 4px !important;
    line-height: 21px;
}
/* Login page > main > inner > submit button > hover */
#OPApplicationContainer #synergy-login-panel-inner .btn-primary:hover {
    background-color: var(--primary-100-percent) !important;
    opacity: .9 !important;
}
/* Login page > main > inner > submit button > focus */
#OPApplicationContainer #synergy-login-panel-inner .btn-primary:hover {
    background-color: var(--primary-100-percent) !important;
    opacity: .87 !important;
    border-bottom: none !important;
}
/* Login page > main > inner > reset link buttonn */
#OPApplicationContainer #synergy-login-panel-inner #loginForm .btn-link {
    margin-top: 1em;
    font-size: 13px;
    font-weight: 500 !important;
}
/* Login page > main > inner > reset link button > hover */
#OPApplicationContainer #synergy-login-panel-inner #loginForm .btn-link:hover {
    background-color: transparent !important;
    text-decoration: underline;
}
/* Login page > main > inner > move footer to bottom */
#OPApplicationContainer #synergy-login-panel #synergy-login-panel-footer  {
    position: absolute;
    margin-top: auto !important;
    width: 318px;
    bottom: 1%;
}
#OPApplicationContainer #synergy-login-panel #synergy-login-panel-footer > div {
    display: flex;
    height: 20px;
    justify-content: center;
}
#OPApplicationContainer #synergy-login-panel #synergy-login-panel-footer a.footer_link {
    font-weight: 500 !important;
    font-size: 12px !important;
}
/* Login page > main > inner > reset > text */
#OPApplicationContainer #synergy-login-panel-inner #loginForm p.text-left {
    padding: 1.5em 0 .5em 0;
}
/* Login page > main > inner > reset > buttons > switch order */
#OPApplicationContainer #synergy-login-panel-inner #loginForm .form-buttons {
    display: flex;
    flex-direction: row-reverse;
    gap: 10px;
    justify-content: center;
}
/* Login page > main > inner > reset > buttons > primary button > remove margin right */
#OPApplicationContainer #synergy-login-panel-inner #loginForm .form-buttons .btn-primary.mr-2    {
    margin-right: 0 !important;
}
/* Login page > main > inner > reset > buttons > cancel > set style */
#OPApplicationContainer #synergy-login-panel-inner #loginForm .form-buttons .btn-default    {
    padding: 0.25rem 0.5rem;
    height: 32px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    border-radius: 4px;
    letter-spacing: 0.76002px;
    background-color: transparent;
    min-width: 75px;
}
/* Login page > main > inner > reset > buttons > cancel > hover */
#OPApplicationContainer #synergy-login-panel-inner #loginForm .form-buttons .btn-default:hover   {
    background-color: var(--black-4-percent);
}
/* Login page > main > inner > reset > buttons > cancel > hover */
#OPApplicationContainer #synergy-login-panel-inner #loginForm .form-buttons .btn-default:focus   {
    background-color: var(--black-12-percent);
}
/* Login page > main > inner > hide disclaimer */
#OPApplicationContainer #synergy-login-panel #website-disclaimer  {
    display: none;
}
/* Reset password > fix top nav */
body#OPApplicationContainer .navbar.navbar-fixed-top {
    box-shadow: none;
}
/* Reset password > remove border from main section */
#OPApplicationContainer .widget-box {
    border: none;
}
/* Reset password > reverse order of buttons  */
#OPApplicationContainer #resetUserPassword .pageAndActionToolbar div:nth-of-type(3) {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}
/* Reset password > cancel button */
#OPApplicationContainer #resetUserPassword .pageAndActionToolbar .btn-default {
    padding: 0.25rem 0.5rem;
    height: 32px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    border-radius: 4px;
    letter-spacing: 0.76002px;
    background-color: transparent;
    min-width: 75px;
    margin-right: 1em;
}
/* Reset password > cancel button > hover */
#OPApplicationContainer #resetUserPassword .pageAndActionToolbar .btn-default:hover {
    background-color: var(--black-4-percent) !important;
}
/* Reset password > confirm modal > button */
#OPApplicationContainer #completeAlertDialogue .modal-footer .btn-secondary {
    background-color: var(--primary-100-percent) !important;
    border-color: var(--primary-100-percent) !important;
    color: var(--white-100-percent);
    line-height: 0;
}
/* Reset password > adjust toolbar */
#OPApplicationContainer #resetUserPassword.workspace-content .d-flex.flex-row {
    padding: 1em;
    margin-bottom: 1em;
}
/* Reset password > hide hr */
#OPApplicationContainer #resetUserPassword.workspace-content hr {
    display: none;
}
/* Reset password > password criteria text > align with inputs */
#OPApplicationContainer #resetUserPassword.workspace-content .form#resetUserPassword .row.m-0 div:last-child {
    margin-left: 25% !important;
    margin-top: 3em;
}


/***** Side nav buttons *****/
/* Side nav buttons > general style */
#OPApplicationContainer .sideNavButtons div.sideButtonContainer button {
    padding: 3px 5px 2px 0px;
    font-size: 14px;
    border-top-right-radius: 10em !important;
    border-bottom-right-radius: 10em !important;
    width: 170px;
    height: 28px;
    border: none;
    background-color: var(--blue-100-percent) !important;
    font-weight: 500;
    letter-spacing: 0.76002px;
}
/* Side nav buttons > adjust vertical spacing */
#OPApplicationContainer .sideNavButtons .sideButtonContainer#genericHelp {
    top: -32px;
}
#OPApplicationContainer .sideNavButtons .sideButtonContainer#FeedbackContainer {
    top: 32px;
}
#OPApplicationContainer .sideNavButtons .sideButtonContainer#NoticeContainer button{
    display: flex;
    justify-content: space-between;
    padding-left: 0.4rem;
}
/* Side nav buttons > override dark style */
#OPApplicationContainer .sideNavButtons div.sideButtonContainer button.btn-outline-dark {
    color: var(--white-100-percent);
}
/* Side nav buttons > notices background color */
#OPApplicationContainer .sideNavButtons div.sideButtonContainer:first-child button {
    background-color: var(--primary-100-percent) !important;
}
/* Side nav buttons > feedback background color */
#OPApplicationContainer .sideNavButtons div.sideButtonContainer:last-child button {
    background-color: var(--black-100-percent) !important;
}
/* Side nav buttons > update icon color */
#OPApplicationContainer .sideNavButtons div.sideButtonContainer button i {
font-size: 14px;
color: var(--white-100-percent);
}
/* Side nav buttons > hover */
#OPApplicationContainer .sideNavButtons div.sideButtonContainer button:hover {
border: none;
}


/***** User management *****/
/** Show/Hide column modal **/
/* Update border color */
#OPApplicationContainer .modal-lg select.w-100.h-100 {
    border-color: var(--grey-border) !important;
}
/* Adjust options */
#OPApplicationContainer .modal-lg select.w-100.h-100 option {
    display: flex;
    align-items: center;
    padding-top: auto !important;
    height: 32px;
}
/* Update selected state */
#OPApplicationContainer .modal-lg select[multiple]:focus.w-100.h-100 option:checked {
    background: var(--black-100-percent) linear-gradient(0deg, var(--black-100-percent) 0%, var(--black-100-percent) 100%) !important;
}
/* Adjust padding on second button column */
#OPApplicationContainer .modal-lg .modal-body .col-md-1:last-of-type {
    padding-left: 0;
}
/* Update the arrow buttons */
#OPApplicationContainer .modal-lg .modal-body .col-md-1 .btn-outline-secondary.btn-sm {
    width: 42px !important;
    height: 42px;
    min-width: 1px;
    background-color: transparent;
    border-radius: 10em;
    margin-top: .5em;
    border: 1px solid var(--black-12-percent);
    color: var(--black-60-percent);
}
/* Hover */
#OPApplicationContainer .modal-lg .modal-body .col-md-1 .btn-outline-secondary.btn-sm:hover {
    background-color: var(--black-4-percent);
}
/* Focus */
#OPApplicationContainer .modal-lg .modal-body .col-md-1 .btn-outline-secondary.btn-sm:focus {
    background-color: var(--black-12-percent);
}

/** User management > manage roles tab **/
/* User management > add user > measurement units icon */
#OPApplicationContainer .wrapperManageUsers .iconMeasurementUnit {
    right: -30px;
    width: 32px;
    height: 32px;
    border-radius: 10em;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
}
/* User management > add user > measurement units icon > hover  */
#OPApplicationContainer .wrapperManageUsers .iconMeasurementUnit:hover {
    background-color: var(--black-4-percent);
}
/* User management > search > adjust margin > remove no margin */
#OPApplicationContainer .wrapperManageUsers .noMargin {
    margin-left: -15px !important;
    margin-right: -15px !important;
}
/* User management + manage notices > adjust cards */
#OPApplicationContainer .wrapperManageRoles .customCardList .card,
#OPApplicationContainer .wrapperManageUserGroups .customCardList .card,
#OPApplicationContainer .manageNotices .customCardList .card {
    background-color: var(--white-100-percent);
    border-color: var(--grey-border);
    padding-top: 1.3em;
    padding-bottom: 1em;
}
/* Manage notices > adjust */
#OPApplicationContainer .manageNotices .customCardList .card {
    padding-bottom: 1.3em;
    padding-left: 1em;
    padding-top: 1em;
}
/* Manage notices > delete icon */
#OPApplicationContainer .manageNotices .customCardList .card .form-group .col-12.text-right {
    position: absolute !important;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    right: 0;
    margin-top: 0.5em !important;
    width: 32px;
    height: 32px;
    top: 26px;
    border-radius: 10em;
}
/* Mange notices > delete icon > hover */
#OPApplicationContainer .manageNotices .customCardList .card .form-group .col-12.text-right:hover {
    background-color: var(--black-4-percent);
}
/* Manage notices > adjust toggle spacing */
#OPApplicationContainer .wrapperNotices .row.my-3 .form-group {
    margin-bottom: 0;
    height: 32px;
    display: flex;
    align-items: center;
}
#OPApplicationContainer .wrapperNotices .row.my-3 .form-group label {
    margin-bottom: 0;
    margin-right: 0.5em;
}
#OPApplicationContainer .wrapperNotices .row.my-3 .form-group label.switch {
    margin-top: 0;
}
/* User management > adjust spacing inside card */
#OPApplicationContainer .wrapperManageRoles .customCardList .card .form-group,
#OPApplicationContainer .wrapperManageUserGroups .customCardList .card .form-group,
#OPApplicationContainer .manageNotices .customCardList .card .form-group {
    margin-bottom: .5rem;
}
/* User management > sync spacing */
#OPApplicationContainer .wrapperManageRoles .customCardList .card p.readOnlyParagraphText,
#OPApplicationContainer .wrapperManageUserGroups .customCardList .card p.readOnlyParagraphText,
#OPApplicationContainer .manageNotices .customCardList .card .col-form-label,
#OPApplicationContainer .manageNotices .customCardList .card small {
    margin-bottom: 0;
    letter-spacing: 0.252px;
    font-size: 14px;
}
/* User management > links */
#OPApplicationContainer .wrapperManageRoles .customCardList .card a,
#OPApplicationContainer .wrapperManageUserGroups .customCardList .card a,
#OPApplicationContainer .manageNotices .customCardList .card a {
    font-size: 20px;
    letter-spacing: 0.15px;
}
/* User management > accordions */
#OPApplicationContainer .permissionCardGroup.cardGroup div.card-header {
    border: 1px solid var(--grey-border);
    background-color: var(--black-4-percent) !important;
    border-bottom: none;
    border-radius: 0;
    height: 48px !important;
    cursor: pointer;
}
/* User management > remove card border for accordions */
#OPApplicationContainer .permissionCardGroup.cardGroup .card {
    border: none;
    border-radius: 0;
}
/* User management > adjust for nested cards / tables in acct management */
#OPApplicationContainer .permissionCardGroup.cardGroup .ag-theme-balham.ag-theme-custom .card {
    border: 1px solid var(--grey-border);
}
/* User management > accordions > header font  */
#OPApplicationContainer .permissionCardGroup.cardGroup div.card-header a {
    font-size: 14px;
    color: var(--black-87-percent) !important;
    line-height: 2.3;
}
/* User management > stretch card title full width */
#OPApplicationContainer .permissionCardGroup.cardGroup div.card-header .card-title {
    width: 100%;
}
#OPApplicationContainer .permissionCardGroup.cardGroup div.card-header .card-title a:last-child {
    display: flex;
}
/* User management > stretch card title full width   */
#OPApplicationContainer .permissionCardGroup.cardGroup div.card-header .row {
    width: 100%;
}
/* User management > accordions > accordion icon open / close  */
#OPApplicationContainer .permissionCardGroup.cardGroup div.card-header a.iconCollapsed  {
    font-size: 16px;
    color: transparent !important;
    float: right !important;
    bottom: unset;
    left: unset;
    right: 0;
    z-index: 11;
    width: 20px;
    height: 20px;
}
/* User management > add font awesome arrows */
#OPApplicationContainer .permissionCardGroup.cardGroup div.card-header a.iconCollapsed.collapsed::before {
    position: absolute;
    content: "\f107";
    font-family: var(--font-awesome-5-pro);
    font-weight: 900;
    color: var(--black-60-percent);
    font-size: 16px;
}
#OPApplicationContainer .permissionCardGroup.cardGroup div.card-header a.iconCollapsed::before {
    position: absolute;
    content: "\f106";
    font-family: var(--font-awesome-5-pro);
    font-weight: 900;
    color: var(--black-60-percent);
    font-size: 16px;
}
/* User management > accordions > header font  */
#OPApplicationContainer .permissionCardGroup.cardGroup div.card-header a:hover {
    text-decoration: none;
}
/* User management > adjust radio buttons here only */
#OPApplicationContainer .permissionCardGroup.cardGroup .card .card-body input[type=radio] {
    display: inline-block;
    margin-left: -30px;
    margin-top: -3px;
}
/* User management > hover sync */
#OPApplicationContainer .permissionCardGroup.cardGroup .card .card-body input[type=radio]:hover {
    border-radius: 10em !important;
}
/* User management > focus sync */
#OPApplicationContainer .permissionCardGroup.cardGroup .card .card-body input[type=radio]:focus {
    border: none !important;
}
/* User management > adjust radio button spacing */
#OPApplicationContainer .permissionCardGroup.cardGroup .rdbFeatureAccess {
    padding-left: 50px;
    margin-bottom: 0px;
}
/* User management > remove top margin */
#OPApplicationContainer .permissionCardGroup.cardGroup .card,
#OPApplicationContainer .permissionCardGroup.cardGroup .card .show .card-body {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
/* User management > accordions > nested > adjust borders */
#OPApplicationContainer .permissionCardGroup.cardGroup .card .show .card-body {
    border-top: 1px solid var(--grey-border);
}
/* User management > add border to card group */
#OPApplicationContainer .permissionCardGroup.cardGroup {
    border-bottom: 1px solid var(--grey-border);
}
/* User management > adjust borders when open */
#OPApplicationContainer .permissionCardGroup.cardGroup .card .collapse.show .card-body {
    border-bottom: none;
}
/* User management > ag grid > icons > size + color */
#OPApplicationContainer .ag-theme-balham.ag-theme-custom .ag-cell .bigIcon  {
    font-size: 16px;
    color: var(--black-60-percent);
}
#OPApplicationContainer .ag-theme-balham.ag-theme-custom .ag-cell .bigIcon.activeUser {
    color: var(--green-active);
}
/* User management > login access management > ag grid > info icon */
#OPApplicationContainer .wrapperImpersonateAudit .ag-theme-balham.ag-theme-custom .ag-cell .fa-info-circle.fa-2x {
    font-size: 16px;
    line-height: 2.3;
    color: var(--black-60-percent);
}
/* User management > select organizational units modal > list/tree */
#OPApplicationContainer .modalAccountTree .tree-view ul {
    font-family: var(--roboto) !important;
    font-size: 14px !important;
}
#OPApplicationContainer .modalAccountTree .tree-view ul li ul li label {
    margin-bottom: 0 !important;
    line-height: 28px !important;
    height: 24px !important;
    margin-left: 0.5em !important;
}
#OPApplicationContainer .modalAccountTree .tree-view ul li ul li div div div {
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    height: 24px;
}
/* User management > user activity modal */
/* User management > user activity modal > last login text */
#OPApplicationContainer .modal-dialog.modal-90w .last-login-text {
    padding-right: 5em;
    color: var(--black-87-percent);
    line-height: 18px;
    font-size: 14px;
    font-size: 14px;
}
/* User management > user activity modal > cards */
#OPApplicationContainer .modal-dialog.modal-90w .user-activity-body .card .gray1.border-left-5brown,
#OPApplicationContainer .modal-dialog.modal-90w .user-activity-body .card .gray2.border-left-5brown,
#OPApplicationContainer .modal-dialog.modal-90w .user-activity-body .card .gray3.border-left-5brown {
    background-color: var(--white-100-percent);
    border-left: none;
}
#OPApplicationContainer .modal-dialog.modal-90w .user-activity-body .card {
    margin-bottom: 1em;
    margin-top: 0.5em;
}
#OPApplicationContainer .modal-dialog.modal-90w .user-activity-body .card .card-body {
    justify-content: center;
    padding: 2em;
    display: flex;
    flex-direction: column;
}
/* User management > user activity modal > cards > make font consistent */
#OPApplicationContainer .modal-dialog.modal-90w .user-activity-body .card .card-body h3,
#OPApplicationContainer .modal-dialog.modal-90w .user-activity-body .card .card-body h2 {
    font-size: 30px;
    color: var(--black-87-percent) !important;
}
/* User management > user activity modal > date picker > dropdown > wider */
#OPApplicationContainer .modal-dialog.modal-90w .user-activity-body .Select {
    width: 200px;
}

/* Account management  */
/* Account management > accordions > header arrows */
#OPApplicationContainer .form-horizontal.customForm .permissionCardGroup.cardGroup .card-header a:after {
    top: 13px;
}
/* Account management > accordions > stretch header full width */
#OPApplicationContainer .form-horizontal.customForm.container.listView .permissionCardGroup.cardGroup .card-header .col-lg-9,
#OPApplicationContainer .form-horizontal.customForm.container.listView .permissionCardGroup.cardGroup .card-header .col-md-9,
#OPApplicationContainer .form-horizontal.customForm.container.listView .permissionCardGroup.cardGroup .card-header .col-9,
#OPApplicationContainer .form-horizontal.customForm.container.listView .permissionCardGroup.cardGroup .card-header .col-sm-9 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}
/* Account management > accordions > adjust right padding for those coded differently */
#OPApplicationContainer .form-horizontal.customForm.container.listView .permissionCardGroup.cardGroup #pnlMainBillingdetails .card-header,
#OPApplicationContainer .form-horizontal.customForm.container.listView .permissionCardGroup.cardGroup #pnlMainBillingdetails + .card .card-header,
#OPApplicationContainer .form-horizontal.customForm.container.listView .permissionCardGroup.cardGroup #pnlDataElements .card-header,
#OPApplicationContainer .form-horizontal.customForm.container.listView .permissionCardGroup.cardGroup #pnlSubscription .card-header,
#OPApplicationContainer .form-horizontal.customForm.container.listView .permissionCardGroup.cardGroup #pnlSubscription + div.card .card-header,
#OPApplicationContainer .form-horizontal.customForm.container.listView .permissionCardGroup.cardGroup #crdPasswordPolicy .card-header,
#OPApplicationContainer .form-horizontal.customForm.container.listView .permissionCardGroup.cardGroup #pnlFeatures .card-header,
#OPApplicationContainer .form-horizontal.customForm.container.listView .permissionCardGroup.cardGroup #pnlFMSynFeatures .card-header,
#OPApplicationContainer .form-horizontal.customForm.container.listView .permissionCardGroup.cardGroup #crdAccountLogo .card-header,
#OPApplicationContainer .form-horizontal.customForm.container.listView .permissionCardGroup.cardGroup #pnlAssignAssetGroups .card-header {
    padding-right: 3.25em !important;
}
/* Account management > accordions > remove left padding from header */
#OPApplicationContainer .form-horizontal.customForm.container.listView .permissionCardGroup.cardGroup .card-header a {
    padding-left: 0;
}
/* Account management > accordions > adjust line height in accordion headers */
#OPApplicationContainer .form-horizontal.customForm.container.listView .permissionCardGroup.cardGroup .card-header h5 {
    line-height: 1.4 !important;
}
/* Account management > accordions > move icon to right */
#OPApplicationContainer .form-horizontal.customForm.container.listView .permissionCardGroup.cardGroup .card-header a::after {
    left: unset;
    right: 0;
    content: "\f106";
    color: var(--black-60-percent);
}
/* Account management > accordions > update icons */
#OPApplicationContainer .form-horizontal.customForm.container.listView .permissionCardGroup.cardGroup .card-header a.collapsed::after {
    content: "\f107";
}
/* Account management > nested accordions > add border back to card */
#OPApplicationContainer div#resourcePermission.permissionPanelGroup.cardGroup .card {
    border: 1px solid var(--grey-border);
    border-bottom: none;
}
/* Account management > nested accordions > remove border from card header */
#OPApplicationContainer div#resourcePermission.permissionPanelGroup.cardGroup .card .card-header {
    border: none;
}
/* Account + user management > nested accordions > adjust list items */
#OPApplicationContainer .permissionCardGroup.cardGroup .list-group-item {
    margin: 0;
    padding: 0;
    height: 48px;
    align-items: center;
    display: flex;
}
/* Account + user management > toggle > update order > flex fix */
#OPApplicationContainer .permissionCardGroup.cardGroup .list-group-item span.customSwitch {
    order: -1;
}
/* Account management > nested accordions > adjust list items > push button to right */
#OPApplicationContainer .permissionCardGroup.cardGroup .list-group-item .btn-group {
    margin-left: auto;
}
/* Account management > nested accordions > adjust list items > switch > adjust spacing */
#OPApplicationContainer .permissionCardGroup.cardGroup .list-group-item label.switch {
    margin-top: 0;
}
/*  Account management > accordions > add padding to bottom of some */
#OPApplicationContainer .permissionCardGroup.cardGroup .card#pnlDataElements .show .card-body div.row:nth-of-type(2),
#OPApplicationContainer .permissionCardGroup.cardGroup .card#pnlProductCategories .card-body div.row:nth-of-type(3),
#OPApplicationContainer .permissionCardGroup.cardGroup .card#pnlAssignAssetGroups .card-body div.row:nth-of-type(2) {
    padding-bottom: 2em;
}
/** Manage measurement units modal > adjust font size */
#OPApplicationContainer .divMeasurementUnits h5 {
    font-size: 1em;
}
/* User management > manage measurement units modal > remove margin */
#OPApplicationContainer .divMeasurementUnits h5.mb-1 {
    margin-bottom: 0 !important;
}
/* User management > manage measurement units modal > list item   */
#OPApplicationContainer .divMeasurementUnits .list-group-flush .list-group-item {
    display: flex;
    justify-content: center;
    height: 48px;
    padding: 0 1em;
}
/** User management > manage measurement units modal > add button + icon */
#OPApplicationContainer .modal-body [title~="Add"][title~="Measurement"][title~="Unit"] {
    min-width: 1px;
    width: 42px;
    height: 42px;
    background-color: transparent !important;
    border-radius: 10em;
    border: 1px solid var(--black-12-percent) !important;
}
#OPApplicationContainer .modal-body [title~="Add"][title~="Measurement"][title~="Unit"].btn-primary i {
    color: var(--black-60-percent) !important;
}
/* User management > manage measurement units modal > add button > hover */
#OPApplicationContainer .modal-body [title~="Add"][title~="Measurement"][title~="Unit"].btn-primary:hover {
    background-color: var(--black-4-percent) !important;
}
/* User management > manage user permission groups > add > users tab > search > add button */
#OPApplicationContainer #navUserGroupMgmt-tabpane-2 .customSearchBar .input-group-append button.btn {
    background-color: transparent !important;
    border-radius: 10em;
    width: 32px;
    height: 32px;
    margin-left: 0.5em;
    padding: 0;
}
/* User management > manage user permission groups > add > users tab > search > add button > hover */
#OPApplicationContainer #navUserGroupMgmt-tabpane-2 .customSearchBar .input-group-append button.btn:hover {
    background-color: var(--black-4-percent) !important;
}
/* User management > manage user permission groups > add > users tab > ag grid > delete icon */
#OPApplicationContainer #navUserGroupMgmt-tabpane-2 .ag-cell .btn-outline-secondary {
    height: 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    border: none;
    background-color: transparent;
    border-radius: 10em !important;
    color: var(--black-60-percent);
    padding: 0;
    font-size: 16px;
    line-height: 1.1 !important;
}
#OPApplicationContainer #navUserGroupMgmt-tabpane-2 .ag-cell .btn-outline-secondary:hover {
    background-color: var(--black-4-percent);
}


/***** Billing > device billing + bill plans history modals *****/
/* Billing > switch order of buttons */
#OPApplicationContainer .model-dialog-assignBillPlans .modal-footer .btn-primary:first-child {
    order: 2;
}
/* Billing > adjust spacing of buttons + update close button */
#OPApplicationContainer .model-dialog-assignBillPlans .modal-footer .btn-primary:last-child,
#OPApplicationContainer .model-dialog-devicePayload .modal-footer .btn-primary {
    margin-right: 0 !important;
    background-color: transparent !important;
    border: none !important;
    color: var(--black-100-percent) !important;
    padding-bottom: 0;
}
/* Billing > add close button hover */
#OPApplicationContainer .model-dialog-assignBillPlans .modal-footer .btn-primary:last-child:hover,
#OPApplicationContainer .model-dialog-devicePayload .modal-footer .btn-primary:hover {
    background-color: var(--black-4-percent) !important;
}
/* Billing > add close button focus */
#OPApplicationContainer .model-dialog-assignBillPlans .modal-footer .btn-primary:last-child:focus,
#OPApplicationContainer .model-dialog-devicePayload .modal-footer .btn-primary:focus {
    background-color: var(--black-12-percent) !important;
}

/***** User configuration *****/
/** Menu management **/
#OPApplicationContainer #menu-editor .rst__tree {
    margin-top: 1em;
}
#OPApplicationContainer #menu-editor .rst__tree .rstcustom__rowContents {
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 1px solid var(--grey-border);
    border-radius: 4px;
}
/* Menu management > remove hover opacity */
#OPApplicationContainer #menu-editor .rst__tree .rstcustom__rowWrapper:hover {
    opacity: 1;
}
/* Update arrows > font awesome icons */
#OPApplicationContainer #menu-editor .rst__tree .rstcustom__collapseButton::before,
#OPApplicationContainer #menu-editor .rst__tree .rstcustom__expandButton::before  {
    font-family: var(--font-awesome-5-pro);
    font-weight: 900;
    content: "\f107";
    font-size: 16px;
    margin-left: 0.5em;
    width: auto;
    height: auto;
    line-height: 1.4;
    color: var(--black-87-percent);
}
#OPApplicationContainer #menu-editor .rst__tree .rstcustom__expandButton::before {
    content: "\f105";
}
/* Add some margin */
#OPApplicationContainer #menu-editor .rst__tree .rstcustom__collapseButton,
#OPApplicationContainer #menu-editor .rst__tree .rstcustom__expandButton {
    padding-right: 1.5em !important;
}
/* Update title size and color */
#OPApplicationContainer #menu-editor .rst__tree .rstcustom__rowTitle {
    color: var(--black-87-percent);
    font-size: 14px;
}
/* Update icons */
#OPApplicationContainer #menu-editor .rst__tree .rstcustom__toolbarButton i {
    font-size: 16px;
    color: var(--black-60-percent);
    height: 32px;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10em;
}
/* Hover */
#OPApplicationContainer #menu-editor .rst__tree .rstcustom__toolbarButton i:hover,
#OPApplicationContainer #menu-editor-modal i.fa-tools:hover {
    background-color: var(--black-4-percent);
}

/** Menu editor modal **/
/* Adjust buttons alignment */
#OPApplicationContainer #menu-editor-modal .col-sm-12.text-center {
    text-align: right !important;
}
/* Menu editor modal > cancel button */
#OPApplicationContainer #menu-editor-modal button#CancelMenuItem.btn {
    height: 32px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    border-radius: 4px;
    letter-spacing: 0.76002px;
    background-color: transparent;
    min-width: 75px;
}
/* Menu editor modal > add hover to tools icon */
#OPApplicationContainer #menu-editor-modal i.fa-tools {
    margin-top: -5px;
    height: 32px;
    width: 32px;
    font-size: 14px;
    color: var(--black-60-percent);
    line-height: 1.6;
    border-radius: 10em;
    letter-spacing: 0.76002px;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Hover */
#OPApplicationContainer #menu-editor-modal button#CancelMenuItem.btn:hover {
    background-color: var(--black-4-percent);
}
/* Focus */
#OPApplicationContainer #menu-editor-modal button#CancelMenuItem.btn:focus {
    background-color: var(--black-12-percent);
}


/***** Notifications + Notifications Report *****/
/** Notifications list > first screen > notifications grid > remove 100vh and adjust to match add height **/
#OPApplicationContainer .asset-notification-modal-90w .modal-body .list-control .notification-list,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .list-control .notification-list {
    font-size: 14px;
    overflow: auto;
    height: auto;
    min-height: 509px;
}
/* Adjust search field */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .list-control .list-header-wrap,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .list-control .list-header-wrap {
    flex: 0 0 75%;
    max-width: 75%;
    padding-right: 0.7em;
}
/* Adjust icon spacing */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .list-control .notification-list td i,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .list-control .notification-list td i {
    margin-left: .5em;
    height: 32px;
    width: 32px;
    border-radius: 10em;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Set hover state of icon in grid */
#OPApplicationContainer .asset-notification-modal-90w  .modal-body .list-control .notification-list td i:hover,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .list-control .notification-list td i:hover {
    background-color: var(--black-4-percent);
}
/* Delete notification modal > match to other modals */
#OPApplicationContainer .asset-notification-modal-90w .orb-modal,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .orb-modal {
    background-color: var(--black-60-percent);
}
/* Adjust body */
#OPApplicationContainer .asset-notification-modal-90w .orb-modal .orb-modal-content,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .orb-modal .orb-modal-content{
    background-color: var(--white-100-percent) !important;
    margin: auto;
    padding: 0;
    border: none;
    border-radius: 4px;
    box-shadow: 0 2px 10px var(--black-20-percent) !important;
}
/* Adjust body */
#OPApplicationContainer .asset-notification-modal-90w .orb-modal .modal-header + div,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .orb-modal .modal-header + div {
    padding: .75rem 1rem !important;
}
/* Adjust footer */
#OPApplicationContainer .asset-notification-modal-90w .orb-modal .modal-header + div + div,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .orb-modal .modal-header + div + div{
    padding: .75rem 1rem !important;
}
/* Adjust cancel button */
#OPApplicationContainer .asset-notification-modal-90w .orb-modal .modal-header + div + div .btn-default,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .orb-modal .modal-header + div + div .btn-default{
    height: 32px;
    height: 32px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    border-radius: 4px;
    letter-spacing: 0.76002px;
    background-color: transparent;
    margin-right: 1em !important;
}
/* Add hover */
#OPApplicationContainer .asset-notification-modal-90w .orb-modal .modal-header + div + div .btn-default:hover,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .orb-modal .modal-header + div + div .btn-default:hover {
    background-color: var(--black-4-percent);
}
/* Asset notifications > toolbar */
/* #OPApplicationContainer .asset-notification-modal-90w .orb-modal, */
#OPApplicationContainer .wrapperNotificationSettings .pageAndActionToolbar .toolbarWrapper {
    height: 36px;
}

/* Notifications > message modal > click message in message notification panel */
#OPApplicationContainer #myNotifHistoryModal .orb-modal-content,
#OPApplicationContainer #showEmailSMSContent .modal-content {
    border-radius: 4px !important;
    border: none !important;
    padding: 1em;
    box-shadow: 0 2px 10px var(--black-20-percent) !important;
}
#OPApplicationContainer #showEmailSMSContent .modal-content .modal-body div.mt-3 {
    margin-top: 0 !important;
}
/* Ajust header */
#OPApplicationContainer #myNotifHistoryModal .modal-header,
#OPApplicationContainer #showEmailSMSContent .modal-header {
    padding-top: 0;
    padding-left: 0;
}
#OPApplicationContainer #myNotifHistoryModal .orb-modal-content div.p-2,
#OPApplicationContainer #showEmailSMSContent .modal-content .modal-body .form-group > div:first-of-type {
    height: auto !important;
    padding: 0 !important;
}
#OPApplicationContainer #myNotifHistoryModal .orb-modal-content div.p-2 div:first-child,
#OPApplicationContainer #showEmailSMSContent .modal-content .form-group > div div:first-child {
   font-weight: 500;
}
#OPApplicationContainer #showEmailSMSContent .modal-content .modal-body {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* Notifications > message font */
#OPApplicationContainer #myNotifHistoryModal.orb-modal div,
#OPApplicationContainer #myNotifHistoryModal.orb-modal table,
#OPApplicationContainer #showEmailSMSContent.modal-dialog div,
#OPApplicationContainer #showEmailSMSContent.modal-dialog table {
    font-family: var(--roboto) !important;
    font-size: 14px !important;
}
#OPApplicationContainer #myNotifHistoryModal.orb-modal table,
#OPApplicationContainer #showEmailSMSContent.modal-dialog table {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#OPApplicationContainer #myNotifHistoryModal.orb-modal table tr,
#OPApplicationContainer #showEmailSMSContent.modal-dialog table tr {
    height: 32px;
}
/* Make left column bold */
#OPApplicationContainer #myNotifHistoryModal.orb-modal table tr td:nth-of-type(2),
#OPApplicationContainer #showEmailSMSContent.modal-dialog table tr td:nth-of-type(2) {
    font-weight: 600;
    width: 285px;
    background-color: var(--black-4-percent);
    font-size: 14px;
    padding-left: 1em;
}
/* Hide items */
#OPApplicationContainer #myNotifHistoryModal.orb-modal table tr td:nth-of-type(3),
#OPApplicationContainer #myNotifHistoryModal.orb-modal table tr td:nth-of-type(1)
#OPApplicationContainer #showEmailSMSContent.modal-dialog table tr td:nth-of-type(3),
#OPApplicationContainer #showEmailSMSContent.modal-dialog table tr td:nth-of-type(1) {
    display: none;
}
#OPApplicationContainer #myNotifHistoryModal.orb-modal table tr td:nth-of-type(4),
#OPApplicationContainer #showEmailSMSContent.modal-dialog table tr td:nth-of-type(4) {
    padding-left: 1em;
    padding-right: .5em;
    font-weight: 500;
}
/* Adjust logo size */
#OPApplicationContainer #myNotifHistoryModal .orb-modal-content img,
#OPApplicationContainer #showEmailSMSContent .modal-content img {
    width: 140px !important;
}
/*Ajust bottom text */
#OPApplicationContainer #myNotifHistoryModal .orb-modal-content div:last-of-type,
#OPApplicationContainer #showEmailSMSContent .modal-content div:last-of-type {
    font-size: 12px !important;
}

/** Add Notification > second screen **/
/* Hide empty card header */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .pageAndActionToolbar+.card .card-header,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .pageAndActionToolbar+.card .card-header {
    display: none;
}
/* Adjust spacing */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .pageAndActionToolbar+.card,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .pageAndActionToolbar+.card {
    margin-bottom: 1em;
    margin-top: 1em;
    padding-top: .75em;
}
/* Update accordions */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion .card,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion .card {
    border-radius: 0;
    border-bottom: none;
    border: none;
 }
 /* Accordion header */
 #OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion .card .card-header,
 #OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion .card .card-header {
    border: 1px solid var(--grey-border);
    background-color: var(--black-4-percent);
    border-bottom: none;
    border-radius: 0;
    height: 48px !important;
    cursor: pointer;
 }
 /* Adjust open/close icons > push to right */
 #OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion .card .card-header i,
 #OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion .card .card-header i {
    order: 2;
    margin-left: auto;
    font-size: 16px;
    color: var(--black-60-percent);
 }
 /* Change closed icon */
 #OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion .card .card-header i.fa-chevron-right::before,
 #OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion .card .card-header i.fa-chevron-right::before {
    content: "\f107";
 }
 /* Change open icon */
 #OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion .card .card-header i.fa-chevron-down::before,
 #OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion .card .card-header i.fa-chevron-down::before {
    content: "\f106";
 }
 /* Adjust border radius of first item */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion .card:first-child .card-header,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion .card:first-child .card-header {
    border-radius: 4px 4px 0 0;
}
/* Update borders for open/close states */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion .card .show .card-body,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion .card .show .card-body {
    border-left: 1px solid var(--black-12-percent);
    border-right: 1px solid var(--black-12-percent);
    border-top: 1px solid var(--black-12-percent);
}
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion .card:last-of-type .show .card-body,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion .card:last-of-type .show .card-body {
    border-bottom: 1px solid var(--black-12-percent);
    border-top: none;
}
/* Add border in on last item  */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion .card:last-of-type .card-header,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion .card:last-of-type .card-header {
    border-bottom: 1px solid var(--black-12-percent);
}
/* Ajust header > monitoring + scheduling > message time */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion .card-body .card-header,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion .card-body .card-header {
    display: flex;
    justify-content: space-between;
}
/* Alert conditions > filter > close button */
#OPApplicationContainer #notification-setup .close-btn {
    top: -26px;
    right: -30px;
    height: 32px;
    width: 32px;
    padding: 0px;
    position: absolute;
    border: none;
    line-height: 31px;
    border-radius: 10em;
    color: transparent;
    text-align: center;
    cursor: pointer;
    background-color: transparent;
}
/* Update to font awesome icon */
#OPApplicationContainer #notification-setup .close-btn:after {
    content: "\f057";
    font-family: var(--font-awesome-5-pro);
    font-weight: 900;
    color: var(--black-60-percent);
    font-size: 13px;
    padding-right: 6px;
}
/* Hover */
#OPApplicationContainer #notification-setup .close-btn:hover {
    background-color: var(--black-4-percent);
}

/* Notifications Accordion Checkbox */
/* Mimic material hover / unchecked  */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion input[type=checkbox].check:hover:after,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion input[type=checkbox].check:hover:after {
    content: "";
    top: unset;
    position: absolute;
    left: unset;
    transform: translate(-8px, -22px);
    z-index: 399;
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    border-radius: 10em;
    background-color: var(--black-8-percent);
    width: 30px;
    height: 30px;
}
/* Mimic material hover / checked */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion input[type=checkbox]:checked.check:hover:after,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion input[type=checkbox]:checked.check:hover:after {
    content: "";
    top: unset;
    position: absolute;
    left: unset;
    transform: translate(-8px, -22px);
    z-index: 399;
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    border-radius: 10em;
    background-color: var(--black-8-percent);
    width: 30px;
    height: 30px;
}
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion input[type=checkbox]:checked::before,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion input[type=checkbox]:checked::before {
    overflow: hidden;
    height: 15px;
    width: 15px;
}

/* Alert Condition */
/* Set width of Expand/collapse button */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion #notification-setup .btn-link,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion #notification-setup .btn-link {
    min-width: 130px;
    margin-bottom: .5em;
}
/* Adjust icon */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion #notification-setup .btn-link i,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion #notification-setup .btn-link i {
    font-size: 16px !important;
    margin-left: .5em;
    vertical-align: middle;
}
/* Add border to accordions */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion #notification-setup #groupContainer,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion #notification-setup #groupContainer {
    border: 1px solid var(--grey-border);
    border-bottom: none;
}
/* Add border back to bottom for last one */
/* Add border to accordions */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion #notification-setup #groupContainer:last-of-type,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion #notification-setup #groupContainer:last-of-type {
    border-bottom: 1px solid var(--grey-border);
}
/* Override inline styles of header */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion #notification-setup #groupContainer > div:first-of-type,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion #notification-setup #groupContainer > div:first-of-type {
    margin-bottom: 0 !important;
    background-color: var(--black-4-percent) !important;
    padding-top: .75em !important;
    padding-bottom: .75em !important;
    padding-left: 1em !important;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
/* Move header icons to the right */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion #notification-setup #groupContainer i.fa-plus,
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion #notification-setup #groupContainer i.fa-minus,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion #notification-setup #groupContainer i.fa-plus,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion #notification-setup #groupContainer i.fa-minus {
    float: right;
    order: 2;
    margin-left: auto;
    line-height: 15px;
    margin-right: 1em;
}
/* Change plus to down arrow */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion #notification-setup #groupContainer i.fa-plus::before,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion #notification-setup #groupContainer i.fa-plus::before {
    content: "\f107";
    font-size: 16px;
}
/* Change minus to up arrow */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion #notification-setup #groupContainer i.fa-minus::before,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion #notification-setup #groupContainer i.fa-minus::before {
    content: "\f106";
    font-size: 16px;
}

/* Adjust body styles */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion #notification-setup #groupContainer .row.m-2,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion #notification-setup #groupContainer .row.m-2 {
    border: none !important;
    padding-top: 1em !important;
    padding-bottom: 1em !important;
    margin: 0 !important;
}
/* Remove bottom margin */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion #notification-setup #groupContainer #example-collapse-text label,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion #notification-setup #groupContainer #example-collapse-text label {
    margin-bottom: 0;
}
/* Adjust checkbox alignment */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion #notification-setup #groupContainer .row.m-2 input.check,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion #notification-setup #groupContainer .row.m-2 input.check {
    vertical-align: middle;
    margin-bottom: 3px;
}
/* Adjust text after checkbox */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion #notification-setup #groupContainer #example-collapse-text .check +  span,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion #notification-setup #groupContainer #example-collapse-text .check +  span {
    margin-left: .5em;
    margin-right: .5em;
}

/* Monitoring + Scheduling */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion .form-horizontal .float-right,
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion .form-horizontal .card-body .col-lg-12,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion .form-horizontal .float-right,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion .form-horizontal .card-body .col-lg-12 {
    display: flex !important;
    align-items: center !important;
}
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion .form-horizontal input.check,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion .form-horizontal input.check {
    margin-right: .5em;
}
/* Add border bottom to second card */
#OPApplicationContainer .asset-notification-modal-90w.modal-body .accordion .form-horizontal .card:last-child .card-body,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion .form-horizontal .card:last-child .card-body {
    border-bottom: 1px solid var(--black-12-percent) !important;
    border-top: none;
}
/* Content and recipients > left */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion .card .list-checkbox-wrapper,
#OPApplicationContainer .asset-notification-modal-50w .modal-body #notificationAddEditPopup .notif-column .list-checkbox-wrapper,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion .card .list-checkbox-wrapper {
    padding: .75em;
    border-radius: 4px;
    border: 1px solid var(--black-12-percent);
}
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion .card .list-checkbox-wrapper .search-group,
#OPApplicationContainer .asset-notification-modal-50w .modal-body #notificationAddEditPopup .notif-column .list-checkbox-wrapper .search-group,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion .card .list-checkbox-wrapper .search-group  {
    margin-bottom: .75em;
}
/* Content and Recipients Search > make consistent with other searches */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion .card .list-checkbox-wrapper .search-group .form-control,
#OPApplicationContainer .asset-notification-modal-50w .modal-body #notificationAddEditPopup .notif-column .list-checkbox-wrapper .search-group .form-control,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion .card .list-checkbox-wrapper .search-group .form-control {
    border: none !important;
    border-radius: 4px 0 0 4px !important;
    padding-left: 2.25em !important;
}
/* Add search icon */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion .card .list-checkbox-wrapper .search-group::before,
#OPApplicationContainer .asset-notification-modal-50w .modal-body #notificationAddEditPopup .notif-column .list-checkbox-wrapper .search-group::before,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion .card .list-checkbox-wrapper .search-group::before {
    position: absolute;
    top: .5em;
    left:.75em;
    content: "\f002";
    font-family: var(--font-awesome-5-pro);
    font-weight: 900;
    color: var(--black-60-percent);
    font-size: 14px;
}
/* Hover */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion .card .list-checkbox-wrapper .search-group .form-control:hover,
#OPApplicationContainer .asset-notification-modal-50w .modal-body #notificationAddEditPopup .notif-column .list-checkbox-wrapper .search-group .form-control:hover,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion .card .list-checkbox-wrapper .search-group .form-control:hover {
    background-color: var(--black-4-percent) !important;
}
/* Set clear button background to transparent */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion .card .list-checkbox-wrapper .search-group .btn.bg-transparent,
#OPApplicationContainer .asset-notification-modal-50w .modal-body #notificationAddEditPopup .notif-column .list-checkbox-wrapper .search-group .btn.bg-transparent,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion .card .list-checkbox-wrapper .search-group .btn.bg-transparent {
    background-color: var(--black-4-percent) !important;
    border: none;
    border-radius: 0 4px 4px 0 !important;
    height: 32px;
}
/* Make icon consistent */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion .card .list-checkbox-wrapper .search-group .btn.bg-transparent i.fa-times::before,
#OPApplicationContainer .asset-notification-modal-50w .modal-body #notificationAddEditPopup .notif-column .list-checkbox-wrapper .search-group .btn.bg-transparent i.fa-times::before,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion .card .list-checkbox-wrapper .search-group .btn.bg-transparent i.fa-times::before {
    content: "\f057";
    color: var(--black-60-percent);
}
/* Adjust spacing of section */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion .card .list-checkbox-wrapper .row,
#OPApplicationContainer .asset-notification-modal-50w .modal-body #notificationAddEditPopup .notif-column .list-checkbox-wrapper .row,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion .card .list-checkbox-wrapper .row {
    align-items: center;
    padding-top: .5em;
    padding-bottom: .5em;
    margin-bottom: .5em;
}
/* Adjust checkbox spacing, layout, alignment, etc */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion .card .list-checkbox-wrapper .row .col-6:first-child,
#OPApplicationContainer .asset-notification-modal-50w .modal-body #notificationAddEditPopup .notif-column .list-checkbox-wrapper .row .col-6:first-child,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion .card .list-checkbox-wrapper .row .col-6:first-child {
    font-weight: 500;
}
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion .card .list-checkbox-wrapper .row label,
#OPApplicationContainer .asset-notification-modal-50w .modal-body #notificationAddEditPopup .notif-column .list-checkbox-wrapper .row label,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion .card .list-checkbox-wrapper .row label {
    margin-bottom: 0;
    display: inline-block;
}
#OPApplicationContainer .asset-notification-modal-50w .modal-body #notificationAddEditPopup .notif-column .list-checkbox-wrapper input[type=checkbox]{
    position: relative;
    width: 15px;
    height: 15px;
}
#OPApplicationContainer .asset-notification-modal-50w .modal-body #notificationAddEditPopup .notif-column .list-checkbox-wrapper input[type=checkbox]:hover:after {
   content: "";
   top: 50%;
   position: absolute;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 399;
   transition: all 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
   border-radius: 10em;
   background-color: var(--black-8-percent);
   width: 170%;
   height: 170%; 
}
#OPApplicationContainer .asset-notification-modal-50w .modal-body #notificationAddEditPopup .notif-column .list-checkbox-wrapper .checkbox-list label{
    margin-bottom: .5rem;
}
#OPApplicationContainer .asset-notification-modal-50w .modal-body #notificationAddEditPopup .notif-column .list-checkbox-wrapper .checkbox-list input[type=checkbox]{
    margin: .3em .5em 0 .5em;
}
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion .checkbox-list input,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion .checkbox-list input {
    margin-right: .5em;
}
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion .checkbox-list label,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion .checkbox-list label {
    display: flex;
    align-items: center;
}
/* Set height to 32px for inputs */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion .card .row.form-group div .input-group input,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion .card .row.form-group div .input-group input {
    height: 32px;
}
/* Hide email input icon */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion .card .row.form-group div .input-group .input-group-append .btn:not(.btn-secondary),
#OPApplicationContainer .wrapperNotificationSettings .tab-content .accordion .card .row.form-group div .input-group .input-group-append .btn:not(.btn-secondary) {
    display: none;
}
/* Phone input dropdown button */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .PhoneInputCountry,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .PhoneInputCountry {
    margin-right: 0;
    padding-left: 5px;
    padding-right: 5px;
    background-color: var(--black-4-percent);
    border-bottom: 1px solid var(--black-12-percent);
    border-radius: 4px 0 0 0;
}
/* Phone input dropdown button > hover */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .PhoneInputCountry:hover,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .PhoneInputCountry:hover {
    background-color: var(--black-8-percent);
}
/* Adjust phone input */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .PhoneInput input[type=tel],
#OPApplicationContainer .wrapperNotificationSettings .tab-content .PhoneInput input[type=tel]  {
    margin-left: 0 !important;
    border-top-left-radius: 0 !important;
}
/* Set icon to 60% */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .PhoneInputInternationalIconGlobe,
#OPApplicationContainer .asset-notification-modal-90w .modal-body .PhoneInputCountryIconImg,
#OPApplicationContainer .asset-notification-modal-90w .modal-body .PhoneInputCountrySelectArrow,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .PhoneInputInternationalIconGlobe,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .PhoneInputCountryIconImg,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .PhoneInputCountrySelectArrow {
    color: var(--black-60-percent) !important;
    opacity: 1 !important;
}
/*  Ajust focus state */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .PhoneInput--focus .PhoneInputCountryIcon .PhoneInputInternationalIconGlobe,
#OPApplicationContainer .asset-notification-modal-90w .modal-body .PhoneInput--focus .PhoneInputCountryIcon .PhoneInputCountryIconImg,
#OPApplicationContainer .asset-notification-modal-90w .modal-body .PhoneInputCountrySelect:focus + .PhoneInputCountryIcon + .PhoneInputCountrySelectArrow,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .PhoneInput--focus .PhoneInputCountryIcon .PhoneInputInternationalIconGlobe,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .PhoneInput--focus .PhoneInputCountryIcon .PhoneInputCountryIconImg,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .PhoneInputCountrySelect:focus + .PhoneInputCountryIcon + .PhoneInputCountrySelectArrow {
    color: var(--black-87-percent) !important;
}
/* Ajust spacing */
#OPApplicationContainer .asset-notification-modal-90w .modal-body .accordion .card .row.form-group div ul.list-group,
#OPApplicationContainer .wrapperNotificationSettings .tab-content  .accordion .card .row.form-group div ul.list-group {
    margin-top: .5em;
}
/* Style help text under email and phone fields */
#OPApplicationContainer .asset-notification-modal-90w .small,
#OPApplicationContainer .wrapperNotificationSettings .tab-content .small {
    margin-top: 0.5em;
    text-align: left !important;
    font-size: 12px !important;
    color: var(--black-60-percent);
    font-weight: 500 !important;
}

/**** Set home geofence modal > table ****/
#OPApplicationContainer .homegoe-table {
    border: 1px solid var(--grey-border);
}
#OPApplicationContainer .homegoe-table th {
    background-color: var(--black-8-percent);
    border: 1px solid var(--grey-border);
    border-top: 1px solid var(--grey-border);
    color: var(--black-87-percent);
    padding-top: 5px;
    padding-bottom: 5px;
    font-weight: 500;
}
#OPApplicationContainer .homegoe-table td {
    vertical-align: middle;
    display: flex;
    flex-direction: row;
    width: 33.3%;
    border-top: none;
    padding-right: 3px;
    padding-left: 3px;
}
#OPApplicationContainer .homegoe-table tbody tr {
    display: flex;
    flex-direction: row;
    width: 771px;
}
#OPApplicationContainer .homegoe-table tr i.clickable.mr-2 {
    display: flex;
    height: 32px;
    width: 32px;
    justify-content:  center;
    align-items: center;
    border-radius: 10em;
    font-size: 16px;
    color: var(--black-87-percent);
    margin-right: 4px !important;
}
#OPApplicationContainer .homegoe-table tr i.clickable.mr-2.text-danger {
    color: var(--black-87-percent) !important;
}
#OPApplicationContainer .homegoe-table tr i.fa-times::before {
    content: "\f057";
}
#OPApplicationContainer .homegoe-table tr i.clickable:hover {
    background-color: var(--black-4-percent);
}
#OPApplicationContainer .homegoe-table td {
    display: flex;
    align-items: center;
}
#OPApplicationContainer .homegoe-table span.txt {
    overflow: hidden;
    width: 175px;
    padding: 5px;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#OPApplicationContainer  .homegoe-table tbody tr:nth-child(even) {
    background-color: var(--black-4-percent);
}
#OPApplicationContainer .homegoe-table #homegeofence-select {
    height: 32px;
    border: none;
    border-bottom: 1px solid var(--grey-border) !important;
    background-color: var(--black-4-percent) !important;
    border-radius: 4px 4px 0 0 !important;
    padding-left: .5em;
    margin-right: 1em;
    margin-left: 1em;
    width: 100% !important;
}

/***** Map location modal *****/
/* Update show all button icon */
#OPApplicationContainer .asset-map-modal-90w .modal-body .btn-primary.float-right i::before {
    content: "\f06e";
}
/* List of assets */
#OPApplicationContainer .asset-map-modal-90w .modal-body .assetMarkerList {
    margin-top: 1em !important;
    height: 670px;
}
/* Individual assets */
#OPApplicationContainer .asset-map-modal-90w .modal-body .assetMarkerList li.list-group-item {
    border-radius: 0 !important;
    border-bottom: 1px solid var(--black-12-percent) !important;
    margin-bottom: 0 !important;
    padding: .75em !important;
}
/* Individual > hover */
#OPApplicationContainer .asset-map-modal-90w .modal-body .assetMarkerList li.list-group-item:hover {
    background-color: var(--black-4-percent);
    border-bottom: 1px solid transparent !important;
}
/* Update border color */
#OPApplicationContainer .asset-map-modal-90w .modal-body .assetMarkerList .list-group-item.border-bottom-0 {
    border-bottom: 1px solid var(--grey-border) !important;
}
/* Asset icon */
#OPApplicationContainer .asset-map-modal-90w .modal-body .assetMarkerList li.list-group-item .asset-map-marker-detail {
    width: 24px;
    font-size: 16px;
    float: left;
    line-height: 21px;
}
/* Map location modal > layer panel height adjustment */
#OPApplicationContainer .asset-map-modal-90w .modal-body #ulMapLayers {
    height: 193px;
}
/** Map popup data modal **/
#OPApplicationContainer .gm-style .gm-style-iw-c {
    border-radius: 4px;
    padding: 1em !important;
    box-shadow: 0 2px 10px var(--black-20-percent) !important;
    font-size: 14px;
    min-width: 475px !important;
}
/* Update close icon */
#OPApplicationContainer .gm-style .gm-style-iw-c button {
    background: var(--white-100-percent) !important;
    opacity: 1 !important;
    width: 20px !important;
    height: 20px !important;
}
/* Hover */
#OPApplicationContainer .gm-style .gm-style-iw-c button:hover {
    background: var(--black-4-percent) !important;
}
/* Hide image icon */
#OPApplicationContainer .gm-style .gm-style-iw-c button img,
#OPApplicationContainer .gm-style .gm-style-iw-c button span {
    display: none !important;
}
/* Set to font awesome icon */
#OPApplicationContainer .gm-style .gm-style-iw-c button::before {
    font-family: var(--font-awesome-5-pro);
    font-weight: 900;
    content: "\f00d";
    font-size: 16px;
    color: var(--black-60-percent);
}
/* Update max-width to get rid of scroll */
#OPApplicationContainer .gm-style .gm-style-iw-c .asset-map-bubble  {
    /* max-width: 480px  !important; */

}
/* Google map > modal > bold text */
#OPApplicationContainer .gm-style b {
    font-size: 16px;
    font-weight:600;
}
/* Generate live link > spacing between number picker and dropdown */
#OPApplicationContainer .input-group-append select.form-control.border-left-0 {
    margin-left: .25em;
    padding-right: 1em;
}

/*** Google map > common ***/
/* Google map > layers, create new gf, reset location, erase, save, and cancel buttons */
#OPApplicationContainer #mapArea .list-inline.customScroll .btn-outline-secondary,
#OPApplicationContainer #mapArea .mapControls.btn-outline-secondary  {
    min-width: 1px !important;
    background: none var(--white-100-percent) !important;
    border: 0px !important;
    padding: 0px !important;
    text-transform: none !important;
    appearance: none !important;
    cursor: pointer !important;
    user-select: none !important;
    border-radius: 0px !important;
    height: 40px !important;
    width: 40px !important;
    box-shadow: rgb(0 0 0 / 30%) 0px 1px 4px -1px !important;
    overflow: hidden !important;
}
/* Buttons > icons > set font color + size */
#OPApplicationContainer .list-inline.customScroll .btn-outline-secondary i,
#OPApplicationContainer .mapControls.btn-outline-secondary i.text-secondary,
#OPApplicationContainer .mapControls.btn-outline-secondary i.text-primary  {
  color: var(--black-60-percent) !important;
  font-size: 18px;
  line-height: 2.4;
}
/* Buttons > icons > disabled */
#OPApplicationContainer .list-inline.customScroll .btn-outline-secondary i.icon.disabled  {
  color: var(--black-38-percent) !important;
}
/* Hover color */
#OPApplicationContainer .list-inline.customScroll .btn-outline-secondary i.text-secondary:hover,
#OPApplicationContainer .mapControls.btn-outline-secondary i.text-secondary:hover {
  color: var(--black-87-percent) !important;
  font-size: 18px;
}
/** Map layers > dropdown menu with toggle **/
#OPApplicationContainer .mapControls #divLayers ul#ulMapLayers {
    border-radius: 4px;
    box-shadow: 0 2px 10px var(--black-20-percent) !important;
}
/* Map layers > margin for search input + layers modal */
#OPApplicationContainer .mapControls {
    margin: 10px;
}
/* Map layers > popover > adjust positioning in relation to layers button */
#OPApplicationContainer .mapControls.mapLayers {
    z-index: 1 !important;
    top: 110px !important;
    right: 50px !important;
}
#OPApplicationContainer .mapControls:disabled {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; 
}
/* Map layers > popover */
#OPApplicationContainer #ulMapLayers {
    font-size: 14px;
    overflow: auto;
    height: 240px;
    background-color: var(--white-100-percent);
}
/* Map layers > popover > list items */
#OPApplicationContainer #ulMapLayers li{
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
}
/* Map layers > popover > list items > adjust layout */
#OPApplicationContainer #ulMapLayers li label.ml-2 {
    margin-bottom: 0;
    margin-right: .5em;
    margin-top: 0 !important;
    width: 94px;
    font-size: 15px;
}
/* Map layers > popover > list items > icon */
#OPApplicationContainer #ulMapLayers li i {
    color: var(--black-60-percent);
    width: 25px;
    font-size: 16px;
}
/* Adjust toggle margin so it aligns with text better > GF Setup */
#OPApplicationContainer #ulMapLayers .customSwitch label.switch {
    margin-top: 0px !important;
}
/* Adjust toggle margin so it aligns with text better > Asset Dashboard */
#OPApplicationContainer #ulMapLayers .customSwitch label.switch-small {
    margin-bottom: 0px;
} 
/* Map layers > update link so it has the skinning style */
#OPApplicationContainer #ulMapLayers .text-primary {
    color: var(--black-100-percent) !important;
    font-weight: 600 !important;
}
#OPApplicationContainer #ulMapLayers .text-primary:hover {
    text-decoration: underline;
}
/* Google maps > native buttons > map + satellite > minor updates */
#OPApplicationContainer #mapArea .gm-style-mtc button {
    padding: 0px 10px !important;
    color: var(--black-87-percent) !important;
    font-size: 16px !important;
    border-bottom-right-radius: 0px !important;
    border-top-right-radius: 0px !important;
}
/* Google map > map + satellite > dropdown buttons */
#OPApplicationContainer #mapArea .gm-style-mtc li {
    font-size: 16px !important;
}
#OPApplicationContainer #mapArea .gm-style-mtc li span {
    margin-right: .1em !important;
}
#OPApplicationContainer #mapArea .gm-style-mtc li label {
    margin-bottom:0 !important;
}
/* Google map > search google map input */
#OPApplicationContainer #mapArea .searchTextBoxOnMap {
    border: none;
    box-shadow: rgb(0 0 0 / 30%) 0px 1px 4px -1px !important;
    height: 40px;
    padding-left: 1rem;
}
/* Google map > zoom buttons > for GF Setup and Asset Dashboard */
#OPApplicationContainer .gmnoprint.gm-bundled-control.gm-bundled-control-on-bottom .gmnoprint:last-of-type{
	margin-top: 10px !important;
}
/** Asset detail + geofence details modals **/
#OPApplicationContainer .asset-map-bubble {
    min-width: 100px;
    max-width: 320px;
    word-break: normal;
}
/* Header text */
#OPApplicationContainer .gm-style .gm-style-iw-c .asset-map-bubble .headLineText {
    font-size: 16px;
    width: calc(100% - 30px);
}
/* Header text */
#OPApplicationContainer .gm-style .gm-style-iw-c .asset-map-bubble #bodyContent {
    margin-top: .5rem;
}
/* Top section icons  */
#OPApplicationContainer .gm-style .gm-style-iw-c .gm-style-iw-chr {
    position: absolute;
    right: 15px;
}
#OPApplicationContainer .gm-style .gm-style-iw-c .asset-map-bubble .list-group-item .asset-map-marker-detail {
    font-size: 14px;
    color: var(--black-60-percent);
    margin-right: .25em;
    font-weight: 900;
    min-width: 20px;
    display: flex;
    justify-content: center;
    margin-top: 2px;
}
/* Time stamp + location > set fonts */
#OPApplicationContainer .asset-map-bubble .font-weight-bold {
    font-size: 13px;
    display: block;
}
/* Time stamp > update icon */
#OPApplicationContainer .asset-map-bubble .asset-map-marker-detail .far {
    font-weight: 900;
}
/* Line height for all li items in modal */
#OPApplicationContainer .asset-map-bubble li.list-group-item {
    line-height: 15px;
    display: flex;
    align-items: flex-start;
}
/* Data list > take the height down a bit */
#OPApplicationContainer .asset-map-bubble li.list-group-item.py-2 {
    padding-top: .15rem !important;
    padding-bottom: .15rem !important;
}
/* Remove border radius */
#OPApplicationContainer .gm-style .gm-style-iw-c .asset-map-bubble .list-group-item:first-child {
    border-radius: 0 !important;
}
/* Data list */
#OPApplicationContainer .asset-map-bubble ul.ulDataElements{
    /* max-height: 224px;
    overflow: auto; */
    margin-top: .25rem !important;
    margin-bottom: 0 !important;
    max-height: 120px !important;
    overflow: auto !important;
    overflow-x: hidden !important;
}
/* Decrease padding between items in bottom list */
#OPApplicationContainer .gm-style .gm-style-iw-c .asset-map-bubble ul.ulDataElements .list-group-item.py-2  {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    width: fit-content !important;
}
/* Data list > li */
#OPApplicationContainer .asset-map-bubble ul.ulDataElements li.list-group-item {
    background-color: var(--black-4-percent);
}
/* Data list > elements */
#OPApplicationContainer .asset-map-bubble ul.ulDataElements li  {
    display: flex;
    align-items: flex-start;
    color: var(--black-87-percent);
    border-color: transparent !important;
    margin-bottom: 0;
    border: none !important;
    font-size: 12px;
}
/* Data list > elements > left column */
#OPApplicationContainer .asset-map-bubble ul.ulDataElements li span:first-child {
    font-weight: 600;
    min-height: 24px;
    align-items: center;
    display: flex;
    width: 136px;
    min-width: 136px;
    padding: .25rem .25rem .25rem .75rem !important;
}
/* Data list > elements > right column */
#OPApplicationContainer .asset-map-bubble ul.ulDataElements li span:last-child {
    min-height: 24px;
    align-items: center;
    display: flex;
    width: 170px;
    min-width: 170px;
    padding: .25rem .25rem .25rem .25rem !important;
    font-weight: 400 !important;
    background-color: var(--white-100-percent);
    word-break: break-all;
}
/** Asset and geofence cluster modals > basic styles */
/* Remove header text out of scroll */
#OPApplicationContainer .gm-style .gm-style-iw-c .asset-map-bubble.geofence-cluster-list,
#OPApplicationContainer .gm-style .gm-style-iw-c .asset-map-bubble.asset-cluster-list {
  overflow: hidden;
  max-width: 175px !important;
}
/* Add scroll to list */
#OPApplicationContainer .gm-style .gm-style-iw-c .asset-map-bubble.asset-cluster-list #bodyContent,
#OPApplicationContainer .gm-style .gm-style-iw-c .asset-map-bubble.geofence-cluster-list #bodyContent {
  overflow-x: hidden !important;
  overflow-y: auto;
  max-height: 190px;
  height: auto;
  font-weight: 400 !important;
  max-width: 175px;
}
#OPApplicationContainer .asset-map-bubble.asset-cluster-list li i,
#OPApplicationContainer .asset-map-bubble.geofence-cluster-list li i {
  float: left !important;
}
/* Tighen up vertical spacing of list */
#OPApplicationContainer .asset-map-bubble.asset-cluster-list li,
#OPApplicationContainer .asset-map-bubble.geofence-cluster-list li {
  padding-bottom: .1rem !important;
  padding-top: .1rem !important;
  font-size: 12px;
  display: flex;
}
/* Update vertical alignment */
#OPApplicationContainer .asset-map-bubble.asset-cluster-list li.list-group-item,
#OPApplicationContainer .asset-map-bubble.geofence-cluster-list li.list-group-item {
    align-items: center;
}
#OPApplicationContainer .asset-map-bubble.asset-cluster-list li.list-group-item span,
#OPApplicationContainer .asset-map-bubble.geofence-cluster-list li.list-group-item span {
  word-break: break-word;
}
#OPApplicationContainer .asset-map-bubble li.list-group-item span.asset-map-bubble-details-link{
  color: var(--black-100-percent) !important;  
  font-weight: 500;
}
#OPApplicationContainer .asset-map-bubble li.list-group-item span.asset-map-bubble-details-link:hover{
  text-decoration: underline;
  cursor: pointer;
}
/* Make width for cluster modals less wide */
#OPApplicationContainer #mapArea .gm-style .gm-style-iw-c {
  min-width: 160px !important;

}
/*** End google map > common ***/

/***** Toasts > custom notification *****/
#OPApplicationContainer .customNotification,
#OPApplicationContainer #AssetManagement .notifier__notification,
#OPApplicationContainer #DeviceManagement .notifier__notification,
#OPApplicationContainer #AssetManagement .notifier__notification--Success,
#OPApplicationContainer #AssetManagement .notifier__notification--Warning,
#OPApplicationContainer #DeviceManagement .notifier__notification--Success,
#OPApplicationContainer #DeviceManagement .notifier__notification--Warning {
    background-color: var(--white-100-percent) !important;
    padding: 1em !important;
    border: none !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 10px var(--black-20-percent) !important;
    bottom: 2em !important;
    font-size: 14px !important;
    max-width: 400px;
    min-width: 400px;
    right: 2.5em !important;
}
#OPApplicationContainer .customNotification .row {
    display: flex;
    align-items: center;
}
#OPApplicationContainer .customNotification .row .col-9 h4,
#OPApplicationContainer .customNotification .row .col-9 p {
    padding: 0;
    margin: 0;
}
#OPApplicationContainer .customNotification .row .col-9 h4,
#OPApplicationContainer #DeviceManagement .notifier__notification h4 {
    font-size: 18px;
    margin-bottom: .1em;
}
#OPApplicationContainer .customNotification .row .col-9 p {
    font-size: 14px;
    line-height: 16px;
}
/* Toasts > custom notification > update icon */
#OPApplicationContainer .customNotification .notifyIcon {
    font-size: 50px;
    margin-top: 0px;
    margin-left: 0px;
}
/* Update toast > close icon */
#OPApplicationContainer .customNotification .closeIcon {
    color: var(--black-60-percent);
    cursor: pointer;
    height: 32px;
    width: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10em;
}
/* Hover */
#OPApplicationContainer .customNotification .closeIcon:hover {
    color: var(--black-60-percent);
    background-color: var(--black-4-percent)
}
/* Focus */
#OPApplicationContainer .customNotification .closeIcon:focus {
    background-color: var(--black-12-percent)
}

#OPApplicationContainer .customNotification .closeBtn {
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
}


/* Toasts > custom notification > asset + device management */
#OPApplicationContainer #AssetManagement .notifier__notification,
#OPApplicationContainer #DeviceManagement .notifier__notification {
    line-height: 18px;
    max-width: 400px;
}
/* Toasts > custom notification > asset + device management */
#OPApplicationContainer #DeviceManagement .notificationBody,
#OPApplicationContainer #AssetManagement .notificationBody {
    height: 50px;
    padding-top: 0px;
    padding-right: 0px;
}
#OPApplicationContainer #DeviceManagement .notifier__container .row,
#OPApplicationContainer #AssetManagement .notifier__container .row {
    align-items: center;
}
#OPApplicationContainer #DeviceManagement .notifier__container .row .col-xs-10,
#OPApplicationContainer #AssetManagement .notifier__container .row .col-xs-10 {
    max-width: 300px;
    margin-right: 1em;
    padding-left: 8px !important;
}
#OPApplicationContainer #DeviceManagement .button-red,
#OPApplicationContainer #AssetManagement  .button-red {
    color: var(--error) !important;
}
#OPApplicationContainer #DeviceManagement .notificationBody>span.k-icon,
#OPApplicationContainer #AssetManagement .notificationBody>span.k-icon {
    font-size: 50px !important;
    margin-top: 0px !important;
    margin-left: 0px !important;
}

/***** Asset + device management > angular controls and kendo *****/
/* ng select */
#OPApplicationContainer .ng-select .ng-select-container {
    border: none !important;
    border-bottom: 1px solid var(--grey-border) !important;
    background-color: var(--black-4-percent) !important;
    border-radius: 4px 4px 0 0 !important;
    min-height: 32px;
    height: 32px;
    color: var(--black-87-percent);
}
/* ng select > dropdown arrow */
#OPApplicationContainer .ng-select .ng-select-container .ng-arrow-wrapper {
    padding-right: 1em;
    display: flex;
    align-items: center;
    height: 32px;
    width: 32px;
}
#OPApplicationContainer .ng-select .ng-select-container .ng-arrow-wrapper::after {
    font-family: var(--font-awesome-5-pro);
    font-weight: 900;
    color: var(--black-60-percent);
    content: "\f107";
    font-size: 16px;
}
/* ng select > clear icon > hide + replace w/font awesome */
#OPApplicationContainer .ng-select .ng-select-container .ng-clear-wrapper {
    color: transparent;
    display: unset;
    font-size: unset;
    width: unset;
}
#OPApplicationContainer .ng-select .ng-select-container .ng-clear-wrapper .ng-clear {
    color: transparent;
    display: unset;
    font-size: unset;
}
#OPApplicationContainer .ng-select .ng-select-container .ng-clear-wrapper::after {
    content: "\f057";
    font-family: var(--font-awesome-5-pro);
    font-weight: 900;
    color: var(--black-60-percent);
    font-size: 13px;
}
/* ng select > clear icon > hover */
#OPApplicationContainer .ng-select .ng-select-container .ng-clear-wrapper:hover::after {
    color: var(--error);
}
#OPApplicationContainer .ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow {
    border-color: transparent;
}
/* ng select > hover */
#OPApplicationContainer .ng-select .ng-select-container:hover {
    background-color: var(--black-8-percent) !important;
}
/* ng select > focus */
#OPApplicationContainer .ng-select .ng-select-container:focus,
#OPApplicationContainer .ng-select.ng-select-focused,
#OPApplicationContainer .ng-select.ng-select-focused.ng-select-opened {
    border: none;
    border-bottom: 1px solid var(--black-100-percent) !important;
    box-shadow: none;
}
/* ng select > focus > remove highlight */
#OPApplicationContainer .ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container {
    box-shadow: none;
}
/* ng select > placeholder text */
#OPApplicationContainer .ng-select .ng-select-container .ng-placeholder {
    color: var(--black-60-percent);
}
/* ng select > mandatory  */
#OPApplicationContainer .mandatory .ng-select .ng-select-container .ng-placeholder::after {
    content: '*';
    position: absolute;
    padding-left: 3px;
    color: var(--black-87-percent);
}
/* ng select > validation error */
#OPApplicationContainer .customForm .has-error .Select-control,
#OPApplicationContainer .customForm .has-error .form-control,
#OPApplicationContainer .customForm .has-error .react-select__control,
#OPApplicationContainer .customForm .has-error .treeWrapper {
    border: 1px solid var(--error) !important;
    border-radius: 4px 4px 0 0;
}
/* ng select > validation error > remove border when there's a value */
#OPApplicationContainer .customForm .has-error .has-value .Select-control {
    border: none !important;
}

/* ng select > dropdown menu */
#OPApplicationContainer .ng-dropdown-panel {
    border-radius: 4px;
    background-color: var(--white-100-percent) !important;
    border: none !important;
    box-shadow: 0 2px 10px var(--black-20-percent) !important;
    margin-top: 1px;
    z-index: 20;
}
/* ng select > dropdown menu > items */
#OPApplicationContainer .ng-dropdown-panel .ng-option {
    color: var(--black-87-percent);
}
#OPApplicationContainer .ng-dropdown-panel .ng-option-marked,
#OPApplicationContainer .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label {
    color: var(--black-87-percent);
    font-weight: 400;
}

/* ng select > dropdown menu > items > hover */
#OPApplicationContainer .ng-dropdown-panel .ng-option:hover,
#OPApplicationContainer .ng-dropdown-panel-items .ng-option.ng-option-selected,
#OPApplicationContainer .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
    background-color: var(--black-4-percent);
}
/* Tweak spacing for device s/n */
#OPApplicationContainer #DeviceManagement .col-md-12.form-control {
    padding-left: .75rem !important;
}

/** kendo grid **/
/* kendo grid > font */
#OPApplicationContainer #DeviceManagement .k-grid,
#OPApplicationContainer #DeviceManagement .k-grid-table>tbody>tr,
#OPApplicationContainer #AssetManagement .k-grid,
#OPApplicationContainer #AssetManagement .k-grid-table>tbody>tr,
#OPApplicationContainer #DeviceManagement .k-widget,
#OPApplicationContainer #AssetManagement .k-widget {
    font-family: var(--roboto) !important;
    font-size: 14px !important;
}
/* Kendo grid > header */
#OPApplicationContainer #DeviceManagement .k-grid-header .k-header,
#OPApplicationContainer #AssetManagement .k-grid-header .k-header {
    background-color: var(--black-8-percent) !important;
    font-family: var(--roboto) !important;
}
/* Kendo grid > checkbox > adjust spacing */
#OPApplicationContainer .k-grid input[type=checkbox] {
    padding-top: 5px;
}
/* Kendo grid > header > links */
#OPApplicationContainer #DeviceManagement .k-grid-header .k-header>.k-link,
#OPApplicationContainer #AssetManagement .k-grid-header .k-header>.k-link,
#OPApplicationContainer #DeviceManagement .k-grid-header th,
#OPApplicationContainer #AssetManagement .k-grid-header th,
#OPApplicationContainer #DeviceManagement .k-grid-table>tbody>tr>td>a,
#OPApplicationContainer #AssetManagement .k-grid-table>tbody>tr>td>a {
    background-color: transparent !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    color: var(--black-87-percent) !important;
    font-family: var(--roboto) !important;
}
/* Kendo grid > remove padding + margin */
#OPApplicationContainer #DeviceManagement .k-grid-header .k-header>.k-link,
#OPApplicationContainer #AssetManagement .k-grid-header .k-header>.k-link {
    padding: 4px 0 0 0;
    margin: 0;
}
/* Kendo grid > borders */
#OPApplicationContainer .k-header,
#OPApplicationContainer th.k-header {
    border-color: var(--grey-border) !important;
}
/* Kendo grid > drop down icon */
#OPApplicationContainer #DeviceManagement a.k-grid-filter,
#OPApplicationContainer #AssetManagement a.k-grid-filter {
    color: var(--black-60-percent) !important;
    bottom: 1px;
    right: 0px;
    width: calc(1.4285714286em + 0px);
}
/* Kendo grid > dropdown icon filter > active */
#OPApplicationContainer #DeviceManagement a.k-grid-filter.k-state-active,
#OPApplicationContainer #AssetManagement a.k-grid-filter.k-state-active {
    background-color: transparent !important;
}
/* Kendo grid > header > filter > arrow */
#OPApplicationContainer #DeviceManagement .kendoColumn>a.k-link>span.k-icon,
#OPApplicationContainer #AssetManagement .kendoColumn>a.k-link>span.k-icon {
    color: var(--black-87-percent) !important;
}
/* Kendo grid > drop down icon > hover */
#OPApplicationContainer #DeviceManagement a.k-grid-filter:hover,
#OPApplicationContainer #AssetManagement  a.k-grid-filter:hover {
    background-color: transparent !important;
}
/* Kendo grid > columns */
#OPApplicationContainer #DeviceManagement .kendoColumn,
#OPApplicationContainer #AssetManagement .kendoColumn {
    border-right: none !important;
    font-weight: 600 !important;
    color: var(--black-87-percent) !important;
    font-family: var(--roboto) !important;
}
/* Kendo grid > td > font size, padding, + height */
#OPApplicationContainer #DeviceManagement .k-grid td,
#OPApplicationContainer #AssetManagement .k-grid td {
    font-size: 12px;
    font-family: var(--roboto) !important;
    padding: 0 .5em !important;
    height: 40px !important;
    overflow: hidden !important;
}
/* Kendo grid > revert asset management rows back to 32px */
#OPApplicationContainer #AssetManagement .k-grid td {
    height: 32px !important;
}
/* Kendo grid > make sure font for inputs is 12px */
#OPApplicationContainer #DeviceManagement .k-grid .form-control,
#OPApplicationContainer #AssetManagement .k-grid .form-control {
    font-size: 12px !important;
}
/* Kendo grid > td > adjust for tree grid asset ous  */
#OPApplicationContainer #AssetManagement #devSummary .k-grid td {
    height: unset !important;
    line-height: 32px !important;
}
/* Kendo grid > set height */
#OPApplicationContainer #DeviceManagement .k-grid th,
#OPApplicationContainer #AssetManagement .k-grid th {
    height: 32px !important;
    font-family: var(--roboto) !important;
    color: var(--black-87-percent) !important;
    font-family: var(--roboto) !important;
    vertical-align: middle !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0.5em !important;
    padding-right: 1.4em !important;
}
/* Kendo grid > row > odd > background */
#OPApplicationContainer #DeviceManagement .k-grid tr,
#OPApplicationContainer #AssetManagement .k-grid tr,
#OPApplicationContainer #AssetManagement #devAssetOu .k-grid tr {
    background-color: var(--black-4-percent) !important;
    font-family: var(--roboto) !important;
}
/* Kendo grid > row > even > background */
#OPApplicationContainer #DeviceManagement .k-grid .k-alt,
#OPApplicationContainer #AssetManagement .k-grid .k-alt,
#OPApplicationContainer #AssetManagement #devAssetOu .k-grid .k-alt {
    background-color: var(--white-100-percent) !important;
}
/* Kendo grid > row > hover */
#OPApplicationContainer #DeviceManagement .k-grid tr:hover td,
#OPApplicationContainer #AssetManagement .k-grid tr:hover td {
    background-color: var(--black-8-percent) !important;
}
/* Kendro grid > row > selected */
#OPApplicationContainer #DeviceManagement .k-grid tr.k-state-selected>td,
#OPApplicationContainer #AssetManagement .k-grid tr.k-state-selected>td {
    background-color: var(--black-12-percent) !important;
}
/* Kendo grid > show/hide col dropdown > checkbox > selected */
#OPApplicationContainer .k-checkbox.k-checked,
#OPApplicationContainer .k-checkbox:checked {
    border-color: transparent !important;
    color: transparent !important;
    background-color: transparent !important;
}
/* Kendo grid > buttons */
#OPApplicationContainer #AssetManagement .k-grid-table>tbody>tr>td>.btn,
#OPApplicationContainer #DeviceManagement .k-grid-table>tbody>tr>td>.btn {
    height: 30px !important;
    border: 1px solid var(--black-12-percent) !important;
    color: var(--black-100-percent)  !important;
    font-family: var(--roboto);
}
/* Kendo grid > buttons */
#OPApplicationContainer .k-button {
    height: 32px;
    font-size: 12px;
    font-weight: 500;
    line-height: 0;
    border-radius: 4px;
    letter-spacing: 0.76002px;
    padding-left: .5em;
    padding-right: .5em;
    background-color: var(--primary-100-percent) !important;
    border-color: var(--primary-100-percent) !important;
    color: var(--white-100-percent) !important;
}
/* Hover */
#OPApplicationContainer #AssetManagement .k-button:hover,
#OPApplicationContainer #DeviceManagement .k-button:hover {
    opacity: .9;
}
/* Focus */
#OPApplicationContainer #AssetManagement .k-button:focus,
#OPApplicationContainer #DeviceManagement .k-button:focus {
    opacity: .8;
}
/* Disabled */
#OPApplicationContainer #AssetManagement .k-button:disabled,
#OPApplicationContainer #DeviceManagement .k-button:disabled,
#OPApplicationContainer #AssetManagement .k-button.disabled,
#OPApplicationContainer #DeviceManagement .k-button.disabled {
    opacity: .38 !important;
    background-color: var(--primary-100-percent) !important;
    color: var(--white-100-percent) !important;
}
#OPApplicationContainer #AssetManagement .k-button:disabled:hover,
#OPApplicationContainer #DeviceManagement .k-button:disabled:hover,
#OPApplicationContainer #AssetManagement .k-button.disabled:hover,
#OPApplicationContainer #DeviceManagement .k-button.disabled:hover {
    cursor: not-allowed !important;
    pointer-events: all !important;
}
/* Kendo grid > icon buttons > in grid */
#OPApplicationContainer .k-button.k-grid-remove-command {
    background-color: transparent !important;
    border: none !important;
    width: 32px;
    height: 32px;
    color: var(--black-60-percent) !important;
    border-radius: 10em;
    min-width: 1px;
}
/* Kendo grid > icon color > delete icon */
#OPApplicationContainer .k-button.k-grid-remove-command .button-red {
    color: var(--black-60-percent) !important;
}
/* Hover */
#OPApplicationContainer .k-button.k-grid-remove-command:hover {
    background-color: var(--black-4-percent) !important;
}
#OPApplicationContainer .k-button.k-grid-remove-command .button-red:hover {
    color: var(--error) !important;
}
/* Kendo grid > secondary button > inside grid */
#OPApplicationContainer #AssetManagement .k-grid-table>tbody>tr>td>.btn.btn-outline-secondary,
#OPApplicationContainer #DeviceManagement .k-grid-table>tbody>tr>td>.btn.btn-outline-secondary  {
    background-color: var(--primary-100-percent) !important;
    border: none !important;
    color: var(--white-100-percent) !important;
    height: 16px !important;
    margin-left: 1.5em;
    font-size: 12px;
}
/* Kendo grid > pagination */
#OPApplicationContainer ul.k-pager-numbers > li > a.k-link:hover {
    background-color: var(--black-4-percent) !important;
}
/* Kendo grid > make sure filter menu is over ng input in header */
#OPApplicationContainer .k-animation-container {
    z-index: 2000 !important;
}
/* Kendo grid > filter > popover */
#OPApplicationContainer .k-popup {
    color: var(--black-87-percent);
    box-shadow: 0 2px 10px var(--black-20-percent) !important;
    border: none !important;
}
/* Kendo grid > filter > selected */
#OPApplicationContainer .k-columnmenu-item.k-state-selected {
    background-color: var(--black-12-percent);
    color: var(--black-87-percent);
}
/* Kendo grid > remove padding from checkboxes */
#OPApplicationContainer .k-checkbox {
    padding: 0 !important;
    border: none;
}

/* Device management > install, deinstall, rma + transfer device tabs > kendo grid > header with inputs */
#OPApplicationContainer #DeviceManagement deinstall-device .k-grid .k-grid-header th .input-group,
#OPApplicationContainer #DeviceManagement rma-device .k-grid .k-grid-header th .input-group,
#OPApplicationContainer #DeviceManagement install-device .k-grid .k-grid-header th .input-group,
#OPApplicationContainer #DeviceManagement rma-view .k-grid .k-grid-header th .input-group  {
    height: 32px !important;
    width: 90%;
}
#OPApplicationContainer #DeviceManagement deinstall-device .k-grid .k-grid-header th .ng-select,
#OPApplicationContainer #DeviceManagement install-device .k-grid .k-grid-header th .ng-select {
    font-weight: 400 !important;
    width: 90%;
    margin-bottom: .25em;
}
/* Device management > rma tab > kendo grid > comments column > turn off underline > hover */
#OPApplicationContainer #DeviceManagement rma-device .k-grid .k-grid-header th:last-of-type a.k-link:hover,
#OPApplicationContainer #DeviceManagement install-device .k-grid .k-grid-header th:nth-of-type(3) a.k-link:hover {
    text-decoration: none;
}
#OPApplicationContainer #DeviceManagement deinstall-device .k-grid .k-grid-header th label,
#OPApplicationContainer #DeviceManagement rma-device .k-grid .k-grid-header th label,
#OPApplicationContainer #DeviceManagement install-device .k-grid .k-grid-header th label,
#OPApplicationContainer #DeviceManagement rma-view .k-grid .k-grid-header th label {
    margin-bottom: 0;
}
#OPApplicationContainer #DeviceManagement deinstall-device a.k-grid-filter,
#OPApplicationContainer #DeviceManagement rma-device a.k-grid-filter,
#OPApplicationContainer #DeviceManagement install-device a.k-grid-filter,
#OPApplicationContainer #DeviceManagement rma-view a.k-grid-filter {
    bottom: 13px;
}
/* Device management > reprocess transactions tab > kendo grid > delete icon > disabled > hover */
#OPApplicationContainer #DeviceManagement button:disabled i.fa-trash:hover::before,
#OPApplicationContainer #DeviceManagement button[disabled]:hover i {
    color: var(--black-38-percent) !important;
}


/***** Commands center *****/
/* Commands center > view assigned commands modal > checkbox spacing/alignment */
#OPApplicationContainer #AssignEditCommandsModal .form-check-input {
    margin-left: -1.25em;
    margin-top: 0.25em;
}
#OPApplicationContainer #AssignEditCommandsModal .form-check-label {
    line-height: 24px;
}
/* Commands center > view assigned commands modal > vertical spacing */
#OPApplicationContainer #AssignEditCommandsModal .pb-3.pt-2.checkbox-commnandSelector-individual {
    padding-top: .25em !important;
    padding-bottom: .25em !important;
}

/***** Maintenance report *****/
/* Maintenance report > ag grid > clear + delete buttons */
#OPApplicationContainer .wrapperMaintenanceReport .ag-cell-not-inline-editing .btn-primary {
    border: none;
    padding: 0 0.5em;
    height: 26px !important;
    min-width: 1px;
    font-size: 12px !important;
    margin-top: 1px;
    font-weight: 500;
}

/***** Inventory report *****/
/* Inventory report > carousel */
#OPApplicationContainer .slick-slider {
    margin-bottom: 2em;
}
/* Inventory report > carousel > update icons to font awesome */
#OPApplicationContainer .slick-prev:before,
#OPApplicationContainer .slick-next:before {
    opacity: .75;
    color: var(--white-100-percent);
    font-family: var(--font-awesome-5-pro);
    font-weight: 900;
    font-size: 26px;
}
#OPApplicationContainer .slick-prev:before {
    content: "\f104";
}
#OPApplicationContainer .slick-next:before {
    content: "\f105";
}
/* Inventory report > carousel > update icon color */
#OPApplicationContainer .slick-next:before,
#OPApplicationContainer .slick-prev:before {
    color: var(--black-87-percent) !important;
}
/* Inventory report > carousel > update disabled icon color */
#OPApplicationContainer .slick-next.slick-disabled:before,
#OPApplicationContainer .slick-prev.slick-disabled:before {
    opacity: 1 !important;
    color: var(--black-38-percent) !important;
    cursor:not-allowed;
}
/* Inventory report > sub header > account summary for ... */
#OPApplicationContainer .wrapperInventoryReport h5 {
    font-size: 16px;
    font-weight: 600;
    margin-top: 0.5em;
    margin-bottom: 1.5em !important;
}
/* Inventory report > carousel > set card height */
#OPApplicationContainer .wrapperInventoryReport .card.inventoryCategory {
    height: 140px;
}
/* Inventory report > carousel > card body spacing */
#OPApplicationContainer .wrapperInventoryReport .slick-list .card.inventoryCategory .card-body {
    justify-content: center;
    padding: 2em;
    display: flex;
    flex-direction: column;
}
/* Inventory report > carousel > card > active */
#OPApplicationContainer .wrapperInventoryReport .slick-list .card.inventoryCategory.active {
    background-color: var(--black-12-percent) !important;
}
/* Inventory report > carousel > card > title text */
#OPApplicationContainer .wrapperInventoryReport .slick-list .card.inventoryCategory h1.card-title {
    font-size: 30px;
    font-weight: 600;
}
#OPApplicationContainer .wrapperInventoryReport .slick-list .card.inventoryCategory h6.card-test {
    font-size: 14px;
}
/* Inventory report > highcharts wrapper */
#OPApplicationContainer .wrapperInventoryReport .inventorydashBoardWidgetWrapper {
    border: 1px solid var(--grey-border);
    border-radius: 4px;
    padding: 1em;
    margin-bottom: 1.25em;
}
/* Inventory report > highcharts > title text */
#OPApplicationContainer .wrapperInventoryReport  .inventorydashBoardWidgetWrapper .highcharts-title {
    color: var(--black-87-percent) !important;
    font-family: var(--roboto);
    font-weight: 600;
    letter-spacing: 0.76002px;
}
/* Inventory report > highcharts > flipper */
#OPApplicationContainer .wrapperInventoryReport .inventorydashBoardWidget .flip-filter .ribbon-right {
    background-color: var(--primary-100-percent) !important;
}
/* Inventory report > ag grid > add space above */
#OPApplicationContainer .wrapperInventoryReport .panel-body .ag-theme-balham.ag-theme-custom {
    margin-top: 1.5em;
}
/* Inventory report > ag grid > make sure all font awesome icons are set to 900 */
#OPApplicationContainer .wrapperInventoryReport .panel-body .ag-theme-balham.ag-theme-custom .rsIcon {
    font-weight: 900;
}
/* Inventory report > assets not reporting text */
#OPApplicationContainer .wrapperInventoryReport h6 {
    font-size: 16px;
}

/***** B2B API Usage Stats Report *****/
#OPApplicationContainer .wrapperB2BStatsReport .btn.btn-outline-dark,
#OPApplicationContainer .wrapperNotificationReport .btn.btn-outline-dark {
    border: none;
    padding: 0 0.5em;
    height: 26px !important;
    font-size: 12px !important;
    margin-top: 1px;
    background-color: var(--primary-100-percent);
    color: var(--white-100-percent);
    font-weight: 500;
    border-radius: 4px;
    letter-spacing: 0.26002px;
}


/***** Asset/device managment *****/
/* Asset/device management > remove hr */
#OPApplicationContainer #AssetManagement hr,
#OPApplicationContainer #DeviceManagement hr {
    border: none;
}
/* Asset/device management > fix issue with labels / spacing */
#OPApplicationContainer #DeviceManagement .customForm .form-group label,
#OPApplicationContainer #AssetManagement .customForm .form-group label {
    padding-right: 1em !important;
}
/* Asset/device management > date picker > icon size */
#OPApplicationContainer #AssetManagement .calendarIconSize,
#OPApplicationContainer #DeviceManagement .calendarIconSize {
    font-size: 16px !important;
    padding-left: 1em;
    text-align: center;
    padding-top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
#OPApplicationContainer #AssetManagement .calendarIconSize .fa,
#OPApplicationContainer #DeviceManagement .calendarIconSize .fa {
    font-family: var(--font-awesome-5-pro) !important;
    font-size: 16px !important;
    font-weight: 900 !important;
}
/* Asset/device management > cards > adjust borders */
#AssetManagement #assetmainComponents .card {
    border: none;
    border-radius: 0;
}
#AssetManagement #assetmainComponents .card:last-child {
    border-bottom: 1px solid var(--grey-border) !important;
}
/* Asset/device management > accordions */
#OPApplicationContainer #assetMainContainer .card .card-header,
#OPApplicationContainer #DeviceManagement .card .card-header {
    border: 1px solid var(--grey-border);
    background-color: var(--black-4-percent);
    border-bottom: none;
    border-radius: 0;
    height: 48px !important;
    cursor: pointer;
}
/* Asset/device management > accordions > move icon to the right */
#OPApplicationContainer #assetMainContainer .card .card-header .fa.pull-left,
#OPApplicationContainer #DeviceManagement .card .card-header .fa.pull-left {
    margin-right: 0 !important;
    float: right !important;
    padding-top: 3px;
}
/* Asset/device management > accordions > update open/close icons */
#OPApplicationContainer #assetMainContainer .card .card-header .fa-minus::before,
#OPApplicationContainer #assetMainContainer .card .card-header .fa-plus::before,
#OPApplicationContainer #DeviceManagement .card .card-header .fa-minus::before,
#OPApplicationContainer #DeviceManagement .card .card-header .fa-plus::before {
    font-family: var(--font-awesome-5-pro);
    font-weight: 900;
    color: var(--black-60-percent);
    font-size: 16px;
}
#OPApplicationContainer #assetMainContainer .card .card-header .fa-minus::before,
#OPApplicationContainer #DeviceManagement .card .card-header .fa-minus::before {
    content: "\f106";
}
#OPApplicationContainer #assetMainContainer .card .card-header .fa-plus::before,
#OPApplicationContainer #DeviceManagement .card .card-header .fa-plus::before {
    content: "\f107";
}
/* Asset/device management > accordions > width 100% */
#OPApplicationContainer #assetMainContainer .card .card-header span,
#OPApplicationContainer #DeviceManagement .card .card-header span {
    width: 100%;
}
/* Asset/device management > accordions >  remove margin below card */
#OPApplicationContainer #assetMainContainer .customForm .card,
#OPApplicationContainer #DeviceManagement .customForm .card,
#OPApplicationContainer #assetMainContainer .card,
#OPApplicationContainer #DeviceManagement .card {
    margin-bottom: 0;
}
/* Asset/device management > accordions > remove margin above open card body + border-bottom */
#OPApplicationContainer #AssetManagement .card .card-body,
#OPApplicationContainer #DeviceManagement .card .card-body {
    margin-top: 0;
    border-bottom: none;
}
/* Asset/device management > accordions > add border back to last item */
#OPApplicationContainer #DeviceManagement .card:last-of-type,
#OPApplicationContainer #AssetManagement .card:last-of-type {
    border-bottom: 1px solid var(--black-12-percent);
}
/* Asset management > asset groups tab > dual list > buttons */
#OPApplicationContainer #AssetManagement .dual-list button.btn-block,
#OPApplicationContainer #AssetManagement .dual-list .button-bar button {
    font-weight: 500 !important;
    border-right: none !important;
    background-color: var(--black-100-percent) !important;
    border-color: var(--black-100-percent) !important;
}
/* Asset management > asset groups tab > dual list  */
#OPApplicationContainer #AssetManagement .dual-list div.record-picker  {
    border-radius: 0;
    border-color: var(--grey-border);
}
/* Asset management > asset groups tab > dual list > list items */
#OPApplicationContainer #AssetManagement .dual-list .record-picker li {
    border-radius: 0;
    font-size: 14px;
    border-top: 1px solid var(--grey-border);
}
/* Asset management > asset groups tab > dual list > list items > selected */
#OPApplicationContainer #AssetManagement .dual-list .record-picker li.selected {
    background-color: var(--black-12-percent);
}
#OPApplicationContainer #AssetManagement .dual-list .record-picker li:first-child {
    border-top-left-radius: 0;
    border-top-right-radius:0;
    border-top: none;
}
#OPApplicationContainer #AssetManagement .dual-list .record-picker li:last-child {
    border-bottom-left-radius: 0;
    border-bottom-right-radius:0;
    border-bottom: none;
}
/* Asset management > asset groups tab > dual list > alert */
#OPApplicationContainer #AssetManagement .alertou {
    position: relative;
    margin-bottom: 1rem;
    margin-left: 2em;
    padding: 0.5em 1.5em !important;
    border-radius: 4px;
}
/* Device management > install > dropdowns > width */
#OPApplicationContainer #DeviceManagement .k-grid td .ng-select.width-dropdown {
    width: 255px !important;
    margin-left: 1em !important;
}
/* Device management > deinstall/replace > dropdowns > width */
#OPApplicationContainer #DeviceManagement .k-grid td .ng-select {
    width: 165px;
    margin-left: 1.5em;
}
/* Device management > reprocess transactions tab > date pickers > add space */
#OPApplicationContainer #DeviceManagement reprocess-device .calendarIconSize {
    margin-right: 1em;
}
/* Asset + device management > page titles without class/style */
#OPApplicationContainer #assetmainComponents .row.mt-3 .col-9 .btn-group,
#OPApplicationContainer #assetmainComponents .row.mt-2 .col-9 .btn-group,
#OPApplicationContainer #DeviceManagement .row.mt-3 .col-9 .btn-group {
    margin-right: 1em;
}
#OPApplicationContainer #assetmainComponents .row.mt-3 .col-9,
#OPApplicationContainer #assetmainComponents .row.mt-2 .col-9,
#OPApplicationContainer #DeviceManagement .row.mt-3 .col-9 {
    font-weight: 700 !important;
    font-size: 16px;
}

/***** GeoFence management *****/
/* GeoFence management > tabs > outer */
#OPApplicationContainer  #geofenceMangmntInnerContainer #toolbar {
    border-bottom: 1px solid var(--grey-border) !important;
}
/* GeoFence management > tabs > outer > vertical align text */
#OPApplicationContainer  #geofenceMangmntInnerContainer #toolbar .navbar-nav {
    align-items: center;
}
/* GeoFence management > tabs > outer > update seperators */
#OPApplicationContainer  #geofenceMangmntInnerContainer #toolbar .navbar-nav li.seperator {
    padding: 0px !important;
    border-left: 1px solid var(--black-12-percent);
    height: 18px;
}
/* GeoFence management > tabs > outer > update tab ui */
#OPApplicationContainer  #geofenceMangmntInnerContainer #toolbar .navbar-nav li {
    color: var(--black-60-percent) !important;
    padding: 5px 10px !important;
    font-family: var(--roboto) !important;
    font-size: 14px !important;
    margin: 0 !important;
    letter-spacing: 0.76002px;
    font-weight: 600 !important;
    border-bottom: 0;
}
/* GeoFence management > tabs > outer > tabs > remove bottom border */
#OPApplicationContainer  #geofenceMangmntInnerContainer #toolbar .navbar-nav li:hover,
#OPApplicationContainer  #geofenceMangmntInnerContainer #toolbar .navbar-nav li:focus,
#OPApplicationContainer  #geofenceMangmntInnerContainer #toolbar .navbar-nav li.active{
    border-bottom: none;
}
/* GeoFence management > tabs > outer > tabs > update hover color > text + icons */
#OPApplicationContainer #geofenceMangmntInnerContainer #toolbar .navbar-nav li:hover i,
#OPApplicationContainer #geofenceMangmntInnerContainer #toolbar .navbar-nav li a:hover {
    color: var(--primary-100-percent) !important;
}
/* GeoFence management > tabs > outer > tabs > dropdown > hide arrow */
#OPApplicationContainer #geofenceMangmntInnerContainer #toolbar .navbar-nav .dropdown-toggle:after {
    display: none;
}
/* GeoFence management > tabs > outer > tabs > dropdown > update arrow to font awesome */
#OPApplicationContainer #geofenceMangmntInnerContainer #toolbar .navbar-nav .dropdown-toggle .geoBtnDrawShapes:after {
    border: none;
    font-family: var(--font-awesome-5-pro);
    font-weight: 900;
    content: "\f107";
    font-size: 16px;
    margin-left: 0.5em;
    width: auto;
    height: auto;
}
/* GeoFence management > tabs > outer > tabs > dropdown menu container */
#OPApplicationContainer #geofenceMangmntInnerContainer #toolbar .navbar-nav ul.drawing-tools {
    border-radius: 4px !important;
    background-color: var(--white-100-percent) !important;
    border: none !important;
    box-shadow: 0 2px 10px var(--black-20-percent) !important;
    margin-top: 1px;
    z-index: 20;
    font-size: 14px !important;
    border: none;
    top: 34px;
    width: 160px;
}
/* GeoFence management > tabs > outer > tabs > dropdown menu > list items */
#OPApplicationContainer #geofenceMangmntInnerContainer #toolbar .navbar-nav ul.drawing-tools li {
    height: 36px;
    font-weight: 400 !important;
    padding-left: 1em !important;
    padding-right: 1em !important;
    letter-spacing: 0;
    color: var(--black-87-percent) !important;
    font-size: 14px !important;
    border: none !important;
    display: flex !important;
    align-items: center;
}
/* GeoFence management > tabs > outer > tabs > dropdown menu > override colors/background */
#OPApplicationContainer #geofenceMangmntInnerContainer #toolbar .navbar-nav ul.drawing-tools li:hover {
    background: var(--black-4-percent) !important;
    color: var(--black-87-percent) !important;
}
#OPApplicationContainer #geofenceMangmntInnerContainer #toolbar .navbar-nav ul.drawing-tools li:hover span,
#OPApplicationContainer #geofenceMangmntInnerContainer #toolbar .navbar-nav ul.drawing-tools li span {
    color: var(--black-87-percent) !important;
}
/* GeoFence management > tabs > outer > tabs > dropdown menu container > override icon color */
#OPApplicationContainer #geofenceMangmntInnerContainer #toolbar .navbar-nav ul.drawing-tools .fa-square,
#OPApplicationContainer #geofenceMangmntInnerContainer #toolbar .navbar-nav ul.drawing-tools .fa-draw-polygon,
#OPApplicationContainer #geofenceMangmntInnerContainer #toolbar .navbar-nav ul.drawing-tools .fa-circle {
    color: var(--black-60-percent) !important;
}
/* GeoFence management > tabs > outer > tabs > dropdown menu > icons */
#OPApplicationContainer #geofenceMangmntInnerContainer #toolbar .navbar-nav ul.drawing-tools li i {
    width: 20px;
    text-align: center;
    font-size: 16px;
    color: var(--black-60-percent);
}
#OPApplicationContainer #geofenceMangmntInnerContainer #toolbar .navbar-nav ul.drawing-tools li:hover i {
    color: var(--black-60-percent) !important;
}
/* GeoFence management > tabs > outer > tabs > dropdown menu > sync spacing for circle */
#OPApplicationContainer #geofenceMangmntInnerContainer #toolbar .navbar-nav ul.drawing-tools li i.fa-circle {
    margin-right: 13px;
}
/* GeoFence management > main > left column > add space above search text */
#OPApplicationContainer #geofenceMangmntInnerContainer .left-container .container {
    padding-top: 1em;
}
/* GeoFence management > main > left column > adjust for collapse icons */
#OPApplicationContainer #geofenceMangmntInnerContainer .left-container-wrapper {
    height: 100%;
    margin-right: 5px;
    width: 355px;
}
/* GeoFence management > main > left column > search */
#OPApplicationContainer #geofenceMangmntInnerContainer .left-top-panel {
    margin-top: .5em;
    height: unset;
    padding: 1em;
}
/* GeoFence management > main > left column > add space below hr */
#OPApplicationContainer #geofenceMangmntInnerContainer .left-container hr {
    margin-bottom: 1.1em;
}
/* GeoFence management > main > left column > geofence list > margin top */
#OPApplicationContainer #geofenceMangmntInnerContainer .left-top-panel + hr + div {
    margin-top: .75em;
}
/* GeoFence management > main > left column > geofence list > parent */
#OPApplicationContainer #geofenceMangmntInnerContainer .left-container ul.css-tnq18m {
    margin-top: .5em;
    font-size: 14px;
    font-family: var(--roboto);
}
/* GeoFence management > main > left column > geofence list > child */
#OPApplicationContainer #geofenceMangmntInnerContainer .left-container ul.css-1s1o8u8 {
    width: fit-content;
    min-width: 100%;
}
/* GeoFence management > main > left column > update border color */
#OPApplicationContainer #geofenceMangmntInnerContainer .left-container li>div:first-child {
    border-bottom: 1px solid var(--grey-border);
}
#OPApplicationContainer #geofenceMangmntInnerContainer .flexbox-item.content {
    border: 1px solid var(--grey-border);
    border-radius: 4px;
}
/* GeoFence management > main > left column > adjust list items */
#OPApplicationContainer #geofenceMangmntInnerContainer .left-container ul.css-tnq18m tdiv {
    min-height: 40px;
    line-height: 40px !important;
    color: var(--black-87-percent);
    letter-spacing: 0.496px;
    font-weight: 400;
}
/* GeoFence management > main > left column > list items > hover color */
#OPApplicationContainer #geofenceMangmntInnerContainer .left-container li.css-79elbk div:first-child:hover {
    background-color: var(--black-4-percent);
}
/* GeoFence management > main > left column > adjust size of small text */
#OPApplicationContainer #geofenceMangmntInnerContainer .left-container ul.css-tnq18m tdiv .small {
    font-size: 14px;
    color: var(--black-87-percent);
}
/* GeoFence management > main > left column > geofence list > add space between name and icon */
#OPApplicationContainer #geofenceMangmntInnerContainer .left-container ul.css-tnq18m i {
    margin-right: .75em !important;
}
/* GeoFence management > main > left column > update color of icons */
#OPApplicationContainer #geofenceMangmntInnerContainer .left-container ul.css-tnq18m i.fa-tags {
    font-size: 14px;
    color: var(--black-60-percent);
}
/* GeoFence management > main > right column > make center column less wide */
#OPApplicationContainer #geofenceMangmntInnerContainer .flex-container .flex-col33.center {
    width: 30%;
}
/* GeoFence management > main > right column > make right column wider */
#OPApplicationContainer #geofenceMangmntInnerContainer .flex-container .flex-col33.right {
    width: 40%;
}
/* GeoFence management > main > right column > collapse icon and icon buttons */
#OPApplicationContainer #geofenceMangmntInnerContainer .flexbox-parent .flex-container {
    align-items: center;
    padding-right: 1em;
    margin-bottom: .5em;
    margin-top: .5em;
}
/* GeoFence management > main > right column > icon buttons only */
#OPApplicationContainer #geofenceMangmntInnerContainer .flexbox-parent .flex-container .flex-col33.right .btn:not(#convert-div):not(#clear-div) {
    height: 32px;
    width: 32px;
    border-radius: 10em;
    padding: .25rem .5rem !important;
    background-color: transparent;
    font-size: 14px;
    color: var(--black-60-percent);
}
/* GeoFence management > main > right column > add margin to all buttons */
#OPApplicationContainer #geofenceMangmntInnerContainer .flexbox-parent .flex-container .flex-col33.right .btn {
    margin-left: 1em;
}
/* GeoFence management > main > right column > icon buttons only > hover */
#OPApplicationContainer #geofenceMangmntInnerContainer .flexbox-parent .flex-container .flex-col33.right .btn:not(#convert-div):not(#clear-div):hover {
    background-color: var(--black-4-percent);
}
/* GeoFence management > main > right column > tabs, info, + google map */
#OPApplicationContainer #geofenceMangmntInnerContainer .flexbox-parent .flexbox-item.content.top {
    padding: 1em;
}
/* GeoFence management > main > right column > tabs, info, + google map > hide vertical scroll */
#OPApplicationContainer #geofenceMangmntInnerContainer .flexbox-parent .flexbox-item.content.top .fill-area-content.flexbox-item-grow {
    overflow-y: hidden;
}
/* GeoFence management > main > right column > tabs */
#OPApplicationContainer #geofenceMangmntInnerContainer .tabber {
    min-height: 40px;
    background-color: var(--white-100-percent);
}
#OPApplicationContainer #geofenceMangmntInnerContainer .tabber ul#tabs {
    min-height: 40px;
    border-bottom: 1px solid var(--grey-border);
}
/* GeoFence management > main > right column > individual tabs */
#OPApplicationContainer #geofenceMangmntInnerContainer .tabber ul#tabs li.tabber-handle {
    font-size: 14px;
    font-weight: bold;
    line-height: 38px;
    height: 40px;
    margin: 0;
    transition: none;
    letter-spacing: 1px;
    border: 1px solid var(--grey-border);
    border-bottom: none;
}
/* GeoFence management > main > right column > individual tabs > add space btwn name and icon */
#OPApplicationContainer #geofenceMangmntInnerContainer .tabber ul#tabs li.tabber-handle span:first-child {
    margin-right: .5em;
}
/* GeoFence management > main > right column > individual tabs > hide original icon */
#OPApplicationContainer #geofenceMangmntInnerContainer .tabber .tabber-handle .close-btn {
    top: -1px;
    right: .5em;
    color: transparent;
}
/* GeoFence management > main > right column > individual tabs > replace icon with font awesome */
#OPApplicationContainer #geofenceMangmntInnerContainer .tabber .tabber-handle .close-btn::after {
    content: "\f057";
    font-family: var(--font-awesome-5-pro);
    font-weight: 900;
    color: var(--black-60-percent);
    font-size: 13px;
}
/* GeoFence management > main > right column > individual tabs > set icon size */
#OPApplicationContainer #geofenceMangmntInnerContainer .tabber ul#tabs li.tabber-handle span:last-child {
    font-size: 1.2em;
}
/* GeoFence management > main > right column > individual tabs > set icon hover color */
#OPApplicationContainer #geofenceMangmntInnerContainer .tabber .tabber-handle .close-btn:hover::after {
    color: var(--error);
}
/* GeoFence management > main > right column > individual tabs > inactive */
#OPApplicationContainer #geofenceMangmntInnerContainer .tabber ul#tabs .tabber-handle.deactive  {
    background: var(--white-100-percent);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    color: var(--black-60-percent);
    min-width: 30px;
}
/* GeoFence management > main > right column > individual tabs > inactive except first tab */
#OPApplicationContainer #geofenceMangmntInnerContainer .tabber ul#tabs .tabber-handle.deactive:not(:first-child) {
    margin-left: -1px;
    padding: 0 1.8em 0 1em;
    min-width: 75px;
}
/* GeoFence management > main > right column > individual tabs > hover */
#OPApplicationContainer #geofenceMangmntInnerContainer .tabber ul#tabs .tabber-handle.deactive:not(:first-child):hover {
    background-color: var(--primary-4-percent);
}
/* GeoFence management > main > right column > individual tabs > active */
#OPApplicationContainer #geofenceMangmntInnerContainer .tabber ul#tabs .tabber-handle.active {
    margin-left: -1px;
    top: 1px;
    height: 41px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    color: var(--black-60-percent);
    padding: 0 1.8em 0 1em;
    background-color: var(--white-100-percent);
    color: var(--primary-100-percent);
    border-bottom: none;
}
/* GeoFence management > main > right column > adjust top */
#OPApplicationContainer #geofenceMangmntInnerContainer .flexbox-item.content.top {
    flex: 6 1;
}
#OPApplicationContainer #geofenceMangmntInnerContainer .flexbox-item.content.top .fill-area-content.flexbox-item-grow > div {
    height: calc(100% - 110px) !important;
}
/* GeoFence management > main > right column > info panel cards container */
#OPApplicationContainer #geofenceMangmntInnerContainer .flexbox-parent .flexbox-item.content.top .info-panel {
    margin: .5em 0;
    padding: 0.5em 0;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}
/* GeoFence management > main > right column > info panel cards */
#OPApplicationContainer #geofenceMangmntInnerContainer .flexbox-parent .flexbox-item.content.top .info-panel .box {
    border: 1px solid var(--grey-border);
    border-radius: 4px;
    text-align: center;
    display: inline-block;
    background-color: var(--white-100-percent);
    height: 54px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 14px;
}
/* GeoFence management > main > right column > info panel cards > set font of first div */
#OPApplicationContainer #geofenceMangmntInnerContainer .flexbox-parent .flexbox-item.content.top .info-panel .box div:first-child {
    font-weight: 600;
    letter-spacing: .5px;
}
/* GeoFence management > main > right column > info panel cards > set font of second div */
#OPApplicationContainer #geofenceMangmntInnerContainer .flexbox-parent .flexbox-item.content.top .info-panel .box div:last-child {
    color: var(--black-60-percent);
    font-size: 14px;
}
/* GeoFence management > main > right column > info panel cards > adjust width of middle card and add spacing */
#OPApplicationContainer #geofenceMangmntInnerContainer .flexbox-parent .flexbox-item.content.top .info-panel .col-sm-6.box {
    flex: 0 0 48%;
    max-width: 48%;
}

/* GeoFence management > middle column > google map > info popover */
#OPApplicationContainer #geofenceMangmntInnerContainer .gm-style .gm-style-iw-c {
    min-width: 340px !important;
}
#OPApplicationContainer #geofenceMangmntInnerContainer .gm-style .gm-style-iw-c .poi-info-window .full-width {
    width: 260px;
}
#OPApplicationContainer #geofenceMangmntInnerContainer .gm-style .gm-style-iw-c .poi-info-window div.title {
    font-size: 16px;
}
#OPApplicationContainer #geofenceMangmntInnerContainer .gm-style .gm-style-iw-c .poi-info-window div,
#OPApplicationContainer #geofenceMangmntInnerContainer .gm-style .gm-style-iw-c .poi-info-window a {
    font-size: 14px;
}
#OPApplicationContainer #geofenceMangmntInnerContainer .gm-style .gm-style-iw-c .poi-info-window .view-link {
    margin-top: .25em;
}
/* GeoFence management > main > right column > google map > search by point modal */
#OPApplicationContainer #geofenceMangmntInnerContainer .pr-container {
    padding: 1em;
    z-index: 100;
    text-align: center;
    border: none;
    box-shadow: 0 2px 10px var(--black-20-percent) !important;
    min-width: 250px;
}
/* GeoFence management > main > right column > google map > search by point modal > buttons */
#OPApplicationContainer #geofenceMangmntInnerContainer .pr-container button.btn-sm {
    color: var(--white-100-percent) !important;
    border-radius: 4px !important;
    min-width: 75px;
    height: 32px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.76002px !important;
    padding-left: 1em;
    padding-right: 1em;
}
/* GeoFence management > main > right column > google map > search by point modal > buttons > reverse order */
#OPApplicationContainer #geofenceMangmntInnerContainer .pr-container .container {
    flex-direction: row-reverse;
    display: flex;
    padding-right: 0px;
}
/* GeoFence management > main > right column > google map > search by point modal > cancel button */
#OPApplicationContainer #geofenceMangmntInnerContainer .pr-container button.btn-sm.btn-secondary {
    border: none;
    color: var(--black-100-percent) !important;
    border-radius: 4px !important;
}
/* GeoFence management > main > right column > add spacing to collapse icon */
#OPApplicationContainer #geofenceMangmntInnerContainer .flexbox-parent .collapse-holder:nth-of-type(3) {
    padding-top: .75em;
    padding-bottom: .75em;
}
/* GeoFence management > main > right column > ag grid > update icon color */
#OPApplicationContainer #geofenceMangmntInnerContainer .flexbox-parent .bottom-content .edit-resource-btn {
    border-radius: 10em;
    width: 32px;
    height: 32px;
    padding-left: 9px;
    margin-right: .5em;
    color: var(--black-60-percent);
}
/* GeoFence management > main > right column > ag grid > icon buttons > add hover */
#OPApplicationContainer #geofenceMangmntInnerContainer .flexbox-parent .bottom-content .edit-resource-btn:hover {
    background-color: var(--black-4-percent);
}
/* GeoFence management > collapse icons */
#OPApplicationContainer #geofenceMangmntInnerContainer button.btn-sm.arrow,
#OPApplicationContainer #geofenceMangmntInnerContainer .flex-col33.left button.btn-sm,
#OPApplicationContainer #geofenceMangmntInnerContainer .text-left.collapse-holder > button.btn-sm
{
    color: var(--black-87-percent) !important;
    background-color: var(--grey-light) !important;
    font-size: 14px;
    width: 24px;
    height: 24px;
    border-radius: 4px !important;
    padding: 0 !important;
}
/* GeoFence management > collapse icons > left column */
#OPApplicationContainer #geofenceMangmntInnerContainer button.btn-sm.arrow {
    right: 5px !important;
    top: 11px;
    line-height: 16px;
}
#OPApplicationContainer #geofenceMangmntInnerContainer .collapse-holder button {
    line-height: 13px !important;
}
/* GeoFence management > collapse icons > hover */
#OPApplicationContainer #geofenceMangmntInnerContainer button.btn-sm.arrow:hover,
#OPApplicationContainer #geofenceMangmntInnerContainer .flex-col33.left button.btn-sm:hover,
#OPApplicationContainer #geofenceMangmntInnerContainer .text-left.collapse-holder > button.btn-sm:hover {
    background-color: var(--grey-medium) !important;
    color: var(--black-60-percent) !important;
}
/* GeoFence management > collapse icons > update icons */
#OPApplicationContainer #geofenceMangmntInnerContainer .fa-chevron-left:before {
    content: "\f100";
}
#OPApplicationContainer #geofenceMangmntInnerContainer .fa-chevron-right:before {
    content: "\f101";
}
#OPApplicationContainer #geofenceMangmntInnerContainer .fa-chevron-up:before {
    content: "\f102";
}
#OPApplicationContainer #geofenceMangmntInnerContainer .fa-chevron-down:before {
    content: "\f103";
}
/* GeoFence management > collapse icons > adjust left */
#OPApplicationContainer #geofenceMangmntInnerContainer #gf-left-arrow {
    line-height: 1.7;
    padding-right: 2px;
}
/* GeoFence management > collapse icons > adjust right */
#OPApplicationContainer #geofenceMangmntInnerContainer #gf-right-arrow {
    line-height: 1.7;
    padding-left: 1px;
}

/** GeoFence management > modals  **/
/* GeoFence management > delete geofence modal > okay button */
#OPApplicationContainer #completeAlertDialogue .modal-footer div:not(:nth-of-type(2)) .btn-outline-secondary {
    background-color: var(--primary-100-percent) !important;
    border-color: var(--primary-100-percent) !important;
    color: var(--white-100-percent);
}
/* GeoFence management > delete geofence modal > okay button> hover */
#OPApplicationContainer #completeAlertDialogue .modal-footer .btn-outline-secondary:hover {
    opacity: .9;
}
/* GeoFence management > delete geofence modal > okay button > focus */
#OPApplicationContainer #completeAlertDialogue .modal-footer .btn-outline-secondary:focus {
    opacity: .8;
}
/* GeoFence management > modals > footer buttons */
#OPApplicationContainer #footer-save-geo {
    display: flex;
}
/* GeoFence management > modals > footer buttons > adjust for modals coded differently */
#OPApplicationContainer #footer-new-geo .btn-primary,
#OPApplicationContainer #footer-save-geo .btn-primary {
    float: right;
}
/* GeoFence management > modals > footer buttons > close */
#OPApplicationContainer #footer-save-geo .btn-default,
#OPApplicationContainer #footer-new-geo .btn-default {
    height: 32px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    border-radius: 4px;
    letter-spacing: 0.76002px;
    background-color: transparent;
    min-width: 75px;
    margin-right: 0.5em !important;
}
/* GeoFence management > modals > footer buttons > close */
#OPApplicationContainer #footer-save-geo .btn-default:hover,
#OPApplicationContainer #footer-new-geo .btn-default:hover {
    background-color: var(--black-4-percent);
}
/* GeoFence management > modals > sync spacing */
#OPApplicationContainer #geo-modal .col-md-6 {
    padding-left: 0;
    padding-right: 0;
}
#OPApplicationContainer #geo-modal #new-geo .d-flex.ml-2 {
    margin-left: 0 !important;
    padding-right: 0;
}
#OPApplicationContainer #geo-modal #new-geo .d-flex.ml-2 .p-2 {
    padding-right: 1em !important;
    padding-left: 0 !important;
    padding-top: 0 !important;
}
/* GeoFence management > modal > label with text after */
#OPApplicationContainer #geo-modal .input-group-append.bg-white {
    background-color: var(--white-100-percent) !important;
    height: 32px;
}
#OPApplicationContainer #geo-modal .input-group-append.bg-white .btn{
    background-color: var(--white-100-percent) !important;
    height: 32px;
    padding: 0 .5em;
    cursor: default;
    font-size: 14px;
}
#OPApplicationContainer #geo-modal .input-group-append button.btn {
    width: auto;
}
/* GeoFence management > add new modal > geofence name vertical spacing */
#OPApplicationContainer #geo-modal #new-geo h6.text-right {
    margin-bottom: 0;
}
/* GeoFence management > add new modal > input labels */
#OPApplicationContainer #geo-modal #new-geo .flex-fixed-width-item {
    background-color: var(--white-100-percent);
    color: var(--black-60-percent);
    margin-bottom: .25em;
}
/* GeoFence management > add new modal > input labels > main sections */
#OPApplicationContainer #geo-modal #new-geo .form-group ~ .flex-fixed-width-item,
#OPApplicationContainer #geo-modal #new-geo h6.text-right + .form-group  .flex-fixed-width-item,
#OPApplicationContainer #geo-modal #new-geo .form-group .row:nth-child(2) .col-md-6 .flex-fixed-width-item {
    padding-top: 1em;
}
/* GeoFence management > add new modal > input labels */
#OPApplicationContainer #geo-modal #new-geo .flex-fixed-width-item i {
    margin-left: .5em;
}
/* GeoFence management > add new modal > radio buttons > label text */
#OPApplicationContainer #geo-modal #new-geo label, #OPApplicationContainer #notificationAddEditPopup label {
    margin-bottom: 0;
    font-size: 14px;
    display: flex;
    align-items: center;
}
#OPApplicationContainer #geo-modal #new-geo .justify-content-between #use-map #cust-geotype {
    margin-bottom: 1em;
}
/* GeoFence management > add new modal > set color buttons */
#OPApplicationContainer #geo-modal #new-geo .justify-content-between .flex-fill .btn {
    height: 34px !important;
    border: none;
    border-radius: 0 !important;
    border: 2px solid var(--grey-light);
}
#OPApplicationContainer #geo-modal #new-geo .justify-content-between .flex-fill span.d-inline-block.rounded {
    height: 30px;
    width: 32px;
    border: none !important;
    background-color: var(--white-100-percent) !important;
    border-radius: 0em !important;
    line-height: 21px;
}
#OPApplicationContainer #geo-modal #new-geo .justify-content-between .flex-fill i {
    color: var(--black-60-percent) !important;
}
/* GeoFence management > assign users modal > search */
#OPApplicationContainer #uncontrolled-tab-example-tabpane-geofences .input-group.search-group .form-control,
#OPApplicationContainer #uncontrolled-tab-example-tabpane-geofence-groups .input-group.search-group .form-control {
    padding-left: 2.4em !important;
    border-radius: 4px 0 0 4px !important;
    border-bottom: none !important;
}
/* GeoFence management > assign users modal > search > remove hover background */
#OPApplicationContainer #uncontrolled-tab-example-tabpane-geofences .input-group.search-group .form-control:hover,
#OPApplicationContainer #uncontrolled-tab-example-tabpane-geofence-groups .input-group.search-group .form-control:hover {
    background-color: var(--black-4-percent) !important;
}
/* GeoFence management > assign users modal > search > add font awesome icon */
#OPApplicationContainer #uncontrolled-tab-example-tabpane-geofences .input-group.search-group::before,
#OPApplicationContainer #uncontrolled-tab-example-tabpane-geofence-groups .input-group.search-group::before{
    position: absolute;
    top: .35em;
    left:.75em;
    content: "\f002";
    font-family: var(--font-awesome-5-pro);
    font-weight: 900;
    color: var(--black-60-percent);
    font-size: 14px;
}
/* GeoFence management > assign users modal > search > clear button > hide original */
#OPApplicationContainer #uncontrolled-tab-example-tabpane-geofences .input-group.search-group .btn i:hover,
#OPApplicationContainer #uncontrolled-tab-example-tabpane-geofence-groups .input-group.search-group .btn i:hover {
    display: none;
}
/* GeoFence management > assign users modal > search > clear button > update style */
#OPApplicationContainer #uncontrolled-tab-example-tabpane-geofences .input-group.search-group .btn,
#OPApplicationContainer #uncontrolled-tab-example-tabpane-geofence-groups .input-group.search-group .btn {
    background-color: var(--black-4-percent) !important;
    color: transparent;
    height: 32px;
    border: none;
    border-radius: 0 4px 4px 0 !important;
    box-shadow: none;
    line-height: .7;
    transition: none;
}
#OPApplicationContainer #uncontrolled-tab-example-tabpane-geofences .input-group.search-group .btn:hover,
#OPApplicationContainer #uncontrolled-tab-example-tabpane-geofence-groups .input-group.search-group .btn:hover {
    color: transparent !important;
    border: none;
    box-shadow: none;
    transition: none;
}
/* GeoFence management > assign users modal > search > clear button > add font awesome icon */
#OPApplicationContainer #uncontrolled-tab-example-tabpane-geofences .input-group.search-group .btn::after,
#OPApplicationContainer #uncontrolled-tab-example-tabpane-geofence-groups .input-group.search-group .btn::after {
    content: "\f057";
    font-family: var(--font-awesome-5-pro);
    font-weight: 900;
    color: var(--black-60-percent);
    font-size: 13px;
}
#OPApplicationContainer #uncontrolled-tab-example-tabpane-geofences .input-group.search-group .btn:hover::after,
#OPApplicationContainer #uncontrolled-tab-example-tabpane-geofence-groups .input-group.search-group .btn:hover::after {
    color: var(--error);
}
/* GeoFence management > assign users modal > update border color */
#OPApplicationContainer #uncontrolled-tab-example-tabpane-geofences .user-list-wrapper,
#OPApplicationContainer #uncontrolled-tab-example-tabpane-geofence-groups .user-list-wrapper{
    padding: 1em .5em;
    border: 1px solid var(--grey-border);
}
/* GeoFence management > assign users modal > add space above user list */
#OPApplicationContainer #uncontrolled-tab-example-tabpane-geofences .user-list-wrapper .user-list,
#OPApplicationContainer #uncontrolled-tab-example-tabpane-geofence-groups .user-list-wrapper .user-list {
    margin-top: .5em;
}
/* GeoFence management > assign users modal > update list spacing */
#OPApplicationContainer #uncontrolled-tab-example-tabpane-geofences .user-list-wrapper .user-list label,
#OPApplicationContainer #uncontrolled-tab-example-tabpane-geofence-groups .user-list-wrapper .user-list label {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}
#OPApplicationContainer #uncontrolled-tab-example-tabpane-geofences .user-list-wrapper .user-list label small,
#OPApplicationContainer #uncontrolled-tab-example-tabpane-geofence-groups .user-list-wrapper .user-list label small {
    font-size: 90%;
}
/* GeoFence management > assign users modal > update list hover background color */
#OPApplicationContainer #uncontrolled-tab-example-tabpane-geofences .user-list-wrapper .user-list label:hover,
#OPApplicationContainer #uncontrolled-tab-example-tabpane-geofence-groups .user-list-wrapper .user-list label:hover {
    background-color: transparent !important;
}
/* GeoFence management > assign users modal > update header text only */
#OPApplicationContainer #uncontrolled-tab-example-tabpane-geofences > div:not(.user-list-wrapper):not(.form-group),
#OPApplicationContainer #uncontrolled-tab-example-tabpane-geofence-groups > div:not(.user-list-wrapper):not(.form-group) {
    font-weight: 600;
    margin-bottom: .5em;
}
/* GeoFence management > group modal > list */
#OPApplicationContainer .modal-body .card-body.p-0 .list-group {
   border: 1px solid var(--grey-border);
   overflow-y: auto;
}
/* GeoFence management > group modal > list > items */
#OPApplicationContainer .modal-body .card-body.p-0 .list-group .list-group-item {
    padding: .75em !important;
    max-height: 120px !important;
    height: auto !important;
    margin: 0 !important;
    border: none;
    line-height: 1.1;
    border-bottom: 1px solid var(--grey-border);
}
#OPApplicationContainer .modal-body .card-body.p-0 .list-group .list-group-item:first-child {
    border-top-right-radius: 0px;
    border-top-left-radius:0px;
}
#OPApplicationContainer .modal-body .card-body.p-0 .list-group .list-group-item:last-child {
    margin-bottom: 0;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius:0px;
    border-bottom: none;
}
/* GeoFence management > group modal > list > items > hover */
#OPApplicationContainer .modal-body .card-body.p-0 .list-group .list-group-item:hover {
    background-color: var(--black-4-percent) !important;
}
/* GeoFence management > group modal > list > items > hover */
#OPApplicationContainer .modal-body .card-body.p-0 .list-group .list-group-item.active {
    background-color: var(--black-12-percent) !important;
}
/* GeoFence management > group modal > list > items > group name */
#OPApplicationContainer .modal-body .card-body.p-0 .list-group .list-group-item span {
    color: var(--black-87-percent) !important;
}
#OPApplicationContainer .list-group-item.active {
    border-color: transparent !important;
}
/* GeoFence management > overlaps modal */
#OPApplicationContainer .modal-body .overlap-list-group {
     border: 1px solid var(--grey-border);
     padding: 0;
     border-radius: 4px;
     min-height: 400px;
     height: 400px !important;
}
/* GeoFence management > overlaps modal > list wrapper */
#OPApplicationContainer .modal-body .overlap-list-group div {
    padding: 1em .5em;
    background-color: var(--white-100-percent);
    margin: 0;
    border-bottom: 1px solid var(--grey-border);
}
/* GeoFence management > overlaps modal > list item > make vertical layout */
#OPApplicationContainer .modal-body .overlap-list-group .overlap-list-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/* GeoFence management > overlaps modal > list item > hide icon */
#OPApplicationContainer .modal-body .overlap-list-group .overlap-list-item i {
    display: none;
}
/* GeoFence management > overlaps modal > list item > update top object */
#OPApplicationContainer .modal-body .overlap-list-group .overlap-list-item .ol-obj1 {
    margin-bottom: 0.25em;
    background-color: var(--primary-100-percent);
}
/* GeoFence management > overlaps modal > list item > update bottom object */
#OPApplicationContainer .modal-body .overlap-list-group .overlap-list-item .ol-obj2 {
    margin-top: 0.2em;
    background: var(--black-100-percent);
}
/* GeoFence management > overlaps modal > list item > update objects */
#OPApplicationContainer .modal-body .overlap-list-group .overlap-list-item .ol-obj1,
#OPApplicationContainer .modal-body .overlap-list-group .overlap-list-item .ol-obj2 {
    letter-spacing: .5px;
    border-radius: 4px;
    text-align: center;
    padding: 5px;
    line-height: 14px;
    max-width: 170px;
}
/* GeoFence management > overlaps modal > list item > active */
#OPApplicationContainer .modal-body .overlap-list-group .overlap-list-item.active {
    background-color: var(--black-12-percent);
}
/* GeoFence management > overlaps modal > list item > hover */
#OPApplicationContainer .modal-body .overlap-list-group .overlap-list-item:hover {
    background-color: var(--black-4-percent);
}
/* GeoFence management > overlaps modal > buttons */
#OPApplicationContainer .modal-body .container .row .col-sm-8:not(.d-flex) .btn-group {
    justify-content: center;
    display: flex;
    margin-bottom: 1.5em;
    font-size: 14px;
}
#OPApplicationContainer .modal-body .container .row .col-sm-8 .btn-group .btn-sm.mx-2.btn-default:not(.btn-overlap-map),
#OPApplicationContainer .modal-body .container .row .col-sm-8 .btn-group .mx-2btn-sm.btn-default {
    padding: 0.25rem 0.5rem;
    height: 32px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    border-radius: 4px;
    letter-spacing: 0.76002px;
    margin-left: .5em !important;
    background-color: var(--primary-100-percent);
    color: var(--white-100-percent);
}
/* Geofence management > ag grid > delete icon button > toolbar > hover */
#OPApplicationContainer .ag-theme-custom button.btn[title="Delete"]:hover i.fa.fa-trash,
#OPApplicationContainer .ag-theme-custom button.btn[title="Delete"]:hover i.fa.fa-trash::before {
    color: var(--black-60-percent) !important;
}
/* Geofence management > ag grid > delete icon button > disabled > toolbar > hover */
#OPApplicationContainer .ag-theme-custom button.btn[title="Delete"][disabled]:hover i.fa.fa-trash,
#OPApplicationContainer .ag-theme-custom button.btn[title="Delete"][disabled]:hover i.fa.fa-trash::before {
    color: var(--black-38-percent) !important;
}

/***** Resource management *****/
/* Resource management  > configure data elements modal > list items > hover color */
#OPApplicationContainer ul.ulDataElements .list-group-item.liDataElementSelector:hover {
    background-color: var(--black-4-percent);
}
/* Resource management > configure data elements modal > list items > label font */
#OPApplicationContainer ul.ulDataElements .list-group-item.liDataElementSelector div:first-child {
    font-weight: 500;
}
/* Resource management > configure data elements modal > list items > header > toggle/icon > add space > right */
#OPApplicationContainer ul.list-group .list-group-item div.ml-auto {
    margin-right: 2em;
}
/* Resource management > configure data elements modal > list items > toggle/icon > add space > right */
#OPApplicationContainer ul.ulDataElements .list-group-item.liDataElementSelector div.ml-auto {
    margin-right: 1em;
}
/* Resource management > update ellipsis dropdown button */
#OPApplicationContainer  #resourceContainer #navResourceDataElementContainer-tabpane-2 .form-header-row .btn-outline-secondary {
    min-width: 1px;
    background: var(--black-4-percent);
    border: 1px solid var(--grey-border);
    color: var(--black-60-percent);
    width: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Resource management > update icon buttons in ag grid */
#OPApplicationContainer #resourceContainer .ag-body-viewport .btn.no-bg {
    color: var(--black-60-percent);
    border-radius: 10em;
    width: 32px;
    height: 32px;
}
/* Resource management > update icon buttons in ag grid > hover */
#OPApplicationContainer #resourceContainer .ag-body-viewport .btn.no-bg:hover {
    background-color: var(--black-4-percent);
}
/* Resource management > update icon buttons in ag grid > disabled */
#OPApplicationContainer #resourceContainer .ag-body-viewport .btn.no-bg:disabled {
    color: var(--black-38-percent);
    opacity: 1;
    cursor: not-allowed;
}
/* Resource management > update icon buttons in ag grid > disabled > hover */
#OPApplicationContainer #resourceContainer .ag-body-viewport button.fa-trash[disabled]:hover {
    color: var(--black-38-percent) !important;
}

/* Notification Setup > New Alert Popup > checkbox > Label > text*/
#OPApplicationContainer #notificationAddEditPopup label .text {
    padding-left: 7px;
}
/* tooltip line breaks */
#OPApplicationContainer .tooltip .tooltip-inner {
    white-space: pre-line;
}

/* Tree component styles start */
#OPApplicationContainer .treeWrapper{
    position: relative;
    border-bottom: 1px solid var(--grey-border);
}
  
#OPApplicationContainer .treeWrapper .treeValueContainer{
    background-color: var(--black-4-percent);
    color: var(--black-87-percent);
    border-radius: 4px 4px 0 0;
    border: none;
    padding-left: 0.5em;
    min-height: 33px;
    height: 100%;
    outline: none;
    box-shadow: none;
    cursor: pointer;
    -webkit-box-align: center;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: flex-end;
    position: relative;
    transition: all 100ms ease 0s;
    box-sizing: border-box;
    position: relative;
}
#OPApplicationContainer .companyTree .treeWrapper .treeValueContainer{
    padding-left: 0px !important;
}

#OPApplicationContainer .treeWrapper .treeValueContainer:hover {
    background-color: var(--black-8-percent);
}

#OPApplicationContainer .treeWrapper.is-open .treeValueContainer:not(.bg-transparent) {
    border-bottom: 1px solid var(--black-100-percent)
}

#OPApplicationContainer .treeWrapper .treeValueContainer .treeHiddenInputContainer{
    width: 0;
    height: 0;
    overflow: hidden;
}

#OPApplicationContainer .treeWrapper .treeValueContainer .treeHiddenInputContainer input[type=text]{
    opacity:0;
    filter:alpha(opacity=0);
}

#OPApplicationContainer .treeWrapper .treeValueContainer .treeValueWrapper{
    -webkit-box-align: center;
    align-items: center;
    display: grid;
    flex: 1 1 0%;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
    padding: 2px 8px;
    box-sizing: border-box;
}

#OPApplicationContainer .treeWrapper .treeValueContainer .treeValueWrapper.is-multi{
    display: flex;
}

#OPApplicationContainer .treeWrapper .treeValueContainer .treeValueIndicator{
    -webkit-box-align: center;
    align-items: center;
    align-self: stretch;
    display: flex;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 58px;
}

#OPApplicationContainer .treeWrapper .treeValueContainer .treeValueWrapper .react-tree__placeholder{
    grid-area: 1 / 1 / 2 / 3;
    margin-left: 2px;
    margin-right: 2px;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--black-60-percent);
}

#OPApplicationContainer .treeWrapper .treeValueContainer .treeValueWrapper .react-tree__single-value{
    grid-area: 1 / 1 / 2 / 3;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgb(51, 51, 51);
    margin-left: 2px;
    margin-right: 2px;
    box-sizing: border-box;
}

#OPApplicationContainer .treeWrapper .treeValueContainer .treeValueWrapper .react-tree__multi-value{
    background-color: var(--black-87-percent);
    border-radius: 16px;
    border: none;
    font-size: .9em;
    line-height: 2.3 !important;
    align-items: center;
    display: flex;
    min-width: 0px;
    margin: 3px 2px;
    box-sizing: border-box;
}

#OPApplicationContainer .treeWrapper .treeValueContainer .treeValueWrapper .react-tree__multi-value .react-tree__multi-value__label{
    line-height: 1.6;
    vertical-align: baseline !important;
    font-weight: 500;
    letter-spacing: .02em;
    font-size: .9em !important;
    color: var(--white-100-percent);
    word-break: break-all;
    margin: 0 2px;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 2px;
    padding: 3px 3px 3px 6px;
    box-sizing: border-box;
}

#OPApplicationContainer .treeWrapper .treeValueContainer .treeValueWrapper .react-tree__multi-value .react-tree__multi-value__remove{
    border: none;
    padding: 1px 8px 0 0;
    color: transparent;
    -webkit-box-align: center;
    align-items: center;
    display: flex;
    border-radius: 2px;
}

#OPApplicationContainer .treeWrapper .treeValueContainer .treeValueWrapper .react-tree__multi-value .react-tree__multi-value__remove::after{
    content: "\f057";
    font-family: var(--font-awesome-5-pro);
    font-weight: 900;
    color: var(--white-60-percent);
    font-size: 11px !important;
    cursor: pointer;
}
  
#OPApplicationContainer .treeWrapper .treeValueContainer .treeSearchLabel{
    padding-right: 35px;
    text-overflow: ellipsis;
    margin: 0;
    display: inline-block !important;
    overflow: hidden;
    vertical-align: bottom;
    white-space: nowrap;
    max-width: 100%;
    text-align: right;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.16002px;
    padding-right: 45px;
}

/* Font size for 1440px and above */
@media (min-width: 1400px) {
    #OPApplicationContainer .treeWrapper .treeValueContainer .treeSearchLabel  {
        font-size: 16px;
    }
}
  
#OPApplicationContainer .treeWrapper .treeValueContainer .treeSearchLabel:hover{
    color: var(--primary-100-percent);
}

#OPApplicationContainer .treeWrapper .treeValueContainer .treeSearchLabel:hover + .treeToggleIndicator::after {
    color: var(--primary-100-percent) !important;
}
  
#OPApplicationContainer .treeWrapper .treeValueContainer .treeToggleIndicator{
    position: absolute;
    right: 0px;
    top: 2px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    padding-right: 20px;
    cursor: pointer;
}
  
#OPApplicationContainer .treeWrapper .treeValueContainer .treeToggleIndicator::after {
    font-family: var(--font-awesome-5-pro);
    font-weight: 900;
    color: var(--black-60-percent);
    content: "\f107";
    font-size: 16px;
    margin-top: -2px;
}
  
#OPApplicationContainer .treeWrapper.is-open .treeValueContainer .treeToggleIndicator::after {
    font-family: var(--font-awesome-5-pro);
    font-weight: 900;
    color: var(--black-60-percent);
    content: "\f106";
    font-size: 16px;
}
  
#OPApplicationContainer .treeWrapper .treeValueContainer .treeToggleIndicator.is-disabled {
    cursor: not-allowed;
    color: rgba(0,0,0,.38);
}

#OPApplicationContainer .treeWrapper .treeValueContainer .treeValueClearIndicator{
    position: absolute;
    right: 23px;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    padding-right: 20px;
    cursor: pointer;
}

#OPApplicationContainer .treeWrapper .treeValueContainer .treeValueClearIndicator::after {
    content: "\f057";
    font-family: var(--font-awesome-5-pro);
    font-weight: 900;
    color: var(--black-60-percent);
    font-size: 13px;
    cursor: pointer;
}

#OPApplicationContainer .treeWrapper .treeValueContainer .treeValueClearIndicator:hover:after {
    color: var(--error) !important;
}
  
#OPApplicationContainer .treeWrapper .treeContainer {
    position: absolute;
    width: 100%;
    left: 0;
    z-index: 6;
    background-color:  var(--white-100-percent);
    border: none; 
    border-radius: 4px;
    box-shadow: 0 2px 10px var(--black-20-percent);
}

#OPApplicationContainer .treeWrapper .treeContainer.open-top{
    bottom: 34px;
    box-shadow: 0 -2px 10px var(--black-20-percent);
}

#OPApplicationContainer .treeWrapper .treeContainer .treeSearchContainer{
    margin: 8px 8px 10px 8px;
}

#OPApplicationContainer .treeWrapper .treeContainer .treeSearchContainer .customSearchBar{
    margin-bottom: 0 !important;
}
  
#OPApplicationContainer .treeWrapper .treeContainer .treeBody{
    height: 240px;
}
  
#OPApplicationContainer .treeWrapper .treeContainer .treeBody .ReactVirtualized__Grid{
    font-family: var(--roboto) !important;
    font-size: 14px !important;
    color: var(--black-87-percent);
}
  
#OPApplicationContainer .treeWrapper .treeContainer .treeBody .ReactVirtualized__Grid .ReactVirtualized__Grid__innerScrollContainer div{
    align-items: center;
    display: flex;
    min-height: 37px;
    padding-top: 4px;
    padding-bottom: 4px;
}

#OPApplicationContainer .treeWrapper .treeContainer .treeBody .ReactVirtualized__Grid .ReactVirtualized__Grid__innerScrollContainer div:hover {
    transition-delay: 60ms;
    background: var(--black-4-percent) !important;
}

#OPApplicationContainer .treeWrapper .treeContainer .treeBody .ReactVirtualized__Grid .ReactVirtualized__Grid__innerScrollContainer div.is-selected {
    background: var(--black-8-percent) !important;
}
  
#OPApplicationContainer .treeWrapper .treeContainer .ReactVirtualized__Grid .ReactVirtualized__Grid__innerScrollContainer div > span{
    -webkit-font-smoothing: antialiased;
    text-wrap: wrap;
    align-items: flex-start;
    display: flex;
    flex: 1 1;
    width: 100%;
    padding-left: 20px;
}

#OPApplicationContainer .treeWrapper .treeContainer .ReactVirtualized__Grid .ReactVirtualized__Grid__innerScrollContainer div > span i {
    width: 25px;
    height: 25px;
    margin-top: 3px;
}

#OPApplicationContainer .treeWrapper.is-parentExpandable .treeContainer .ReactVirtualized__Grid .ReactVirtualized__Grid__innerScrollContainer div:first-child > span i {
    display: none;
}

#OPApplicationContainer .treeWrapper .treeContainer .ReactVirtualized__Grid .ReactVirtualized__Grid__innerScrollContainer div label.treeNodeLabel {
    width: 100%;
    letter-spacing: 0.25px;
    display: flex;
    align-items: baseline;
    position: relative;
    cursor: pointer;
    margin-bottom: 0px !important;
}
#OPApplicationContainer .treeWrapper .treeContainer .ReactVirtualized__Grid .ReactVirtualized__Grid__innerScrollContainer div label.treeNodeLabel:hover .favorite-icon {
    opacity: 1;
}

#OPApplicationContainer .treeWrapper .treeContainer .ReactVirtualized__Grid .ReactVirtualized__Grid__innerScrollContainer div label.treeNodeLabel::after {
    content: none;
}
  
#OPApplicationContainer .treeWrapper .treeContainer .ReactVirtualized__Grid .ReactVirtualized__Grid__innerScrollContainer div label.treeNodeLabel.is-disabled {
    color: var(--black-60-percent);
    cursor: not-allowed;
}
  
#OPApplicationContainer .treeWrapper .treeContainer .ReactVirtualized__Grid .ReactVirtualized__Grid__innerScrollContainer div label.treeNodeLabel .treeNodeCheckbox{
    margin-right: 8px;
    width: 15px;
    height: 15px;
    position: relative;
}

#OPApplicationContainer .treeWrapper .treeContainer .favorite-icon{
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    opacity: 0;
    z-index: 9999;
    background: transparent !important;
    transition: opacity 0.3s ease-in-out;
}

#OPApplicationContainer .treeWrapper .treeContainer .favorite-icon:hover{
    background: transparent !important;
}
#OPApplicationContainer .treeWrapper .treeContainer .btnSelectAll{
    line-height: 11px !important;
    height: 22px !important;
    margin: 0 18px !important;
    font-size: 11px !important;
}

#OPApplicationContainer .treeWrapper .treeContainer .treeButtons{
    display: flex;
    justify-content: flex-end;
    margin: 10px 15px 10px 0;
}

#OPApplicationContainer .treeWrapper .treeContainer .treeButtons .btn.btn-outline-secondary{
    border: none;
    line-height: 20px;
}

#OPApplicationContainer .treeWrapper .treeContainer .treeBody .treeNoResultFound {
    text-align: center;
    padding: 8px 12px;
    color: var(--black-50-percent);
}

#OPApplicationContainer .treeBody input[type=checkbox].check:hover:after,
#OPApplicationContainer .treeBody label input:hover,
#OPApplicationContainer .treeBody input[type=checkbox]:checked.check:hover:after {
    background-color: transparent !important;
}

#OPApplicationContainer .customForm .has-error .treeWrapper input.form-control, #OPApplicationContainer .customForm .has-error .treeWrapper.is-open .treeValueContainer {
    border: none !important;
}

/* Tree component styles end */

@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px) {
        /* Notifications report modal width */
        #OPApplicationContainer #showEmailSMSContent.modal-dialog.modal-md {
            width: 640px;
            max-width: 640px;
        }
}
@media (min-width: 1400px) {
    /** Advanced searh */
    #OPApplicationContainer .btn-outline-secondary.btnAdvancedSearch {
        margin-left: -1.35em;
        margin-right: 1em;
    }
    /* Kendo grids > mimic material hover */
    #OPApplicationContainer #DeviceManagement .k-grid td input[type=checkbox]:hover:after,
    #OPApplicationContainer #AssetManagement .k-grid td input[type=checkbox]:hover:after {
        transform: translate(-46%, -76%);
    }
    /* Kendo grid > secondary button > inside grid */
    #OPApplicationContainer #AssetManagement .k-grid-table>tbody>tr>td>.btn.btn-outline-secondary,
    #OPApplicationContainer #DeviceManagement .k-grid-table>tbody>tr>td>.btn.btn-outline-secondary  {
        margin-left: .5em;
    }
    /* Device management > install > dropdowns > width */
    #OPApplicationContainer #DeviceManagement .k-grid td .ng-select.width-dropdown {
        width: 280px !important;
        margin-left: .5em !important;
    }
    /* Device management > deinstall/replace > dropdowns > width */
    #OPApplicationContainer #DeviceManagement .k-grid td .ng-select {
        width: 195px;
        margin-left: .5em;
    }
    /* Top nav link > increase font and spacing */
    #OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .nav-item a.nav-link {
        font-size: 16px;
        margin-right: .75em;
        margin-left: .75em;
    }
    /* Top nav > dropdown menu item */
    #OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .nav-item .dropdown-menu .nav-link {
        padding-left: .25em !important;
        font-weight: 400 !important;
        font-size: 14px;
    }
    /* Top nav > admin menu > top level > adjust font size for user name */
    #OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .admin-menu.nav-item a.nav-link.dropdown-toggle {
        font-size: 15px;
    }
}
@media (min-width: 1660px) {
    /** Advanced searh */
    #OPApplicationContainer .btn-outline-secondary.btnAdvancedSearch {
        margin-left: -.75em;
        margin-right: 1.5em;
    }
    /* Top nav link > increase font and spacing */
    #OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .nav-item a.nav-link {
        font-size: 16px;
        margin-right: 1em;
        margin-left: 1em;
    }
    #OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .nav-item .dropdown-menu .nav-link {
        padding-left: .2em !important;
    }
    /* Adjust spacing around logo */
    #OPApplicationContainer .bt-parent-navbar.navbar .navbar-brand {
        margin-right: 2em;
        margin-left: 1.5em;
    }
    /***** ag grid > set font *****/
    #OPApplicationContainer .ag-theme-balham {
        font-size: 14px;
    }
    /* ag grid > set cell text size */
    #OPApplicationContainer .ag-theme-balham.ag-theme-custom .ag-cell {
        font-size: 14px;
    }
    /* ag grid > set header cell text size  */
    #OPApplicationContainer .ag-theme-custom .ag-header-cell-label .ag-header-cell-text {
        font-size: 14px !important;
        padding-right: 0px;
    }
    /* Kendo grids > mimic material hover */
    #OPApplicationContainer #DeviceManagement .k-grid td input[type=checkbox]:hover:after,
    #OPApplicationContainer #AssetManagement .k-grid td input[type=checkbox]:hover:after {
        transform: translate(-32%, -76%);
    }
    /* Kendo grid > set font to 14px */
    #OPApplicationContainer #DeviceManagement .k-grid td,
    #OPApplicationContainer #AssetManagement .k-grid td,
    #OPApplicationContainer #DeviceManagement .k-grid-header th,
    #OPApplicationContainer #AssetManagement .k-grid-header th,
    #OPApplicationContainer #DeviceManagement .k-grid-header .k-header>.k-link,
    #OPApplicationContainer #AssetManagement .k-grid-header .k-header>.k-link,
    #OPApplicationContainer #DeviceManagement .k-grid-table>tbody>tr>td>a,
    #OPApplicationContainer #AssetManagement .k-grid-table>tbody>tr>td>a,
    #OPApplicationContainer #DeviceManagement .k-grid .form-control,
    #OPApplicationContainer #AssetManagement .k-grid .form-control {
        font-size: 14px !important;
    }
    /* Kendo grid > set height */
    #OPApplicationContainer #DeviceManagement .k-grid th,
    #OPApplicationContainer #AssetManagement .k-grid th {
        padding-left: 1em !important;
        padding-right: 1em !important;
    }
    /* Kendo grid > remove padding + margin */
    #OPApplicationContainer #DeviceManagement .k-grid-header .k-header>.k-link,
    #OPApplicationContainer #AssetManagement .k-grid-header .k-header>.k-link {
        padding: 2px 0 0 0;
        margin: 0;
    }
    /* Kendo grid > td > font size, padding, + height */
    #OPApplicationContainer #DeviceManagement .k-grid td,
    #OPApplicationContainer #AssetManagement .k-grid td {
        padding: 0 1em !important;
        overflow: hidden !important;
    }
    /* GeoFence management > tabs > outer > update tab ui */
    #OPApplicationContainer  #geofenceMangmntInnerContainer #toolbar .navbar-nav li {
        color: var(--black-60-percent) !important;
        padding: 5px 15px !important;
        font-family: var(--roboto) !important;
        font-size: 14px !important;
        margin: 0 !important;
        letter-spacing: 1.2px;
        font-weight: 600 !important;
        border-bottom: 0;
    }
    /* Device management > install > dropdowns > width */
    #OPApplicationContainer #DeviceManagement .k-grid td .ng-select.width-dropdown {
        width: 320px !important;
    }
    /* Device management > deinstall/replace > dropdowns > width */
    #OPApplicationContainer #DeviceManagement .k-grid td .ng-select {
        width: 240px;
        margin-left: 0.25em;
    }
    /* Chips label */
    #OPApplicationContainer .customSearchBar .Select--multi .Select-value .Select-value-label,
    #OPApplicationContainer .customSelectBox .Select--multi .Select-value .Select-value-label {
        font-size: .95em !important;
    }
    /* Asset + GF detail modals */
    #OPApplicationContainer .asset-map-bubble ul.ulDataElements li span:first-child {
        padding-left: .75rem !important;
    }
    #OPApplicationContainer .asset-map-bubble ul.ulDataElements li span:last-child {
        padding-left: .75em !important;
    }
}
@media (min-width: 1920px) {
    /* Kendo grids > mimic material hover */
    #OPApplicationContainer #DeviceManagement .k-grid td input[type=checkbox]:hover:after,
    #OPApplicationContainer #AssetManagement .k-grid td input[type=checkbox]:hover:after {
        transform: translate(-38%, -76%);
    }
    /* Kendo grid > drop down icon */
    #OPApplicationContainer #DeviceManagement a.k-grid-filter,
    #OPApplicationContainer #AssetManagement a.k-grid-filter {
        right: 4px;
        width: calc(1.4285714286em + 10px);
    }
    /* Device management > install > dropdowns > width */
    #OPApplicationContainer #DeviceManagement .k-grid td .ng-select.width-dropdown {
        width: 380px !important;
    }
    /* Device management > deinstall/replace > dropdowns > width */
    #OPApplicationContainer #DeviceManagement .k-grid td .ng-select {
        width: 280px;
    }
    /* Top nav > admin menu > top level > adjust font size for user name */
    #OPApplicationContainer .bt-parent-navbar.navbar .navbar-nav .admin-menu.nav-item a.nav-link.dropdown-toggle {
        font-size: 16px;
    }
}
/* delete confirm modal, update z-index */
#OPApplicationContainer #completeAlertDialogue {
    z-index: 1100 !important;
}

/* preference page */ 
.preferences-landingPage {
    background-color: var(--primary-100-percent) !important;
}
#OPApplicationContainer .dropdown-menu .btn-outline-secondary.dropdown-item.active {
    background-color: rgba(0,0,0,.12);
}
#OPApplicationContainer #DeviceManagement ag-grid-toolbar button, #OPApplicationContainer #AssetManagement ag-grid-toolbar button {
  flex: 0 1 auto !important;
}