/* General Styles */

/* make the default font size bigger */
* {
    --vz-font-base: 0.9rem;
    --vz-body-font-size: 0.95rem;
}

.form-control, .form-select, .choices__inner {
    font-size: 16px;
}
/*
.btn-link {
    --vz-btn-padding-y: 0.625rem;
}*/


footer {
    z-index: 5;
}


/* the bx and las icon sets are same line height, so trying to make it consistent */
[class^="ri-"], .bx, .las {
    line-height: 1;
}

.icons-tabs [class^="ri-"], .icons-tabs .bx, .icons-tabs .las {
    line-height: 1.5;
}

.lh-1h {
    line-height: 1.5;
}

.pb-h {
    padding-bottom: .1rem !important;
}

.opacity-35 {
    opacity: .35 !important;
}

.btn-sm {
    --vz-btn-padding-x: calc(var(--vz-font-base) * 0.6);
    --vz-btn-padding-y: calc(var(--vz-font-base) * 0.35);
}

/* needed small action buttons for read screens */
.btn-xs {
    --vz-btn-padding-y: 0.10rem;
    --vz-btn-padding-x: 0.35rem;
    --vz-btn-font-size: calc(var(--vz-font-base) * 0.750);
}

/* need buttons smaller for mobile */
@media (max-width: 575px) {
    .btn:not(.btn-sm):not(.btn-xs) {
        --vz-btn-padding-x: 0.7rem;
    }
}


.blink {
    -webkit-animation: blinker 4s linear infinite;
    animation: blinker 4s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.flag-shake {
    -webkit-animation: tada 3s ease 2;
    animation: tada 3s ease 2;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
    display: inline-block;
}

    .table-active .flag-shake, .flag-shake:hover {
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
    }

/* custom beat animation */
.bx-beat-hover:hover {
    animation: bx-beat 5s ease infinite;
}

.bx-beat {
    -webkit-animation: bx-beat 5s ease 2;
    animation: bx-beat 5s ease 2;
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
    display: inline-block;
}

    .table-active .bx-beat, .bx-beat:hover {
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
    }

@keyframes bx-beat {
    0% {
        transform: scale(1);
    }

    5% {
        transform: scale(1.25);
    }

    20% {
        transform: scale(1);
    }

    30% {
        transform: scale(1);
    }

    35% {
        transform: scale(1.25);
    }

    50% {
        transform: scale(1);
    }

    55% {
        transform: scale(1.25);
    }

    70% {
        transform: scale(1);
    }
}


.height-300 {
    height: 300px;
}

.nowrap {
    white-space: nowrap;
}

.lh-p8 {
    line-height: 0.8em !important;
}

.top-1 {
    top: 1px !important;
}

.top-2 {
    top: 2px !important;
}

.top-3 {
    top: 3px !important;
}

.top-4 {
    top: 4px !important;
}

.top-5 {
    top: 5px !important;
}

.top-m1 {
    top: -1px;
}

.top-m2 {
    top: -2px;
}

.top-m3 {
    top: -3px;
}

.top-m4 {
    top: -4px;
}

.top-m5 {
    top: -5px;
}

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

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

.mb-h {
    margin-bottom: .1rem !important;
}

.mb-nh {
    margin-bottom: -.1rem !important;
}

.ms-h {
    margin-left: .2rem !important;
}

.w-fit {
    width: fit-content;
}

/* the background color for warning is a bit too light, made it slightly darker */
.bg-warning {
    background-color: rgb(255, 181, 25) !important;
}
.btn-soft-warning {
    --vz-btn-hover-bg: rgb(255, 181, 25) !important;
}

/* some new colors for items and backgrounds */
* {
    --vz-orange-rgb: 240, 113, 51;
    --vz-pink-rgb: 236, 80, 197;
}
.bg-orange-subtle {
    background-color: rgba(var(--vz-orange-rgb), 0.15) !important;
}

.bg-orange {
    background-color: rgb(var(--vz-orange-rgb)) !important;
}

.text-orange {
    color: rgb(var(--vz-orange-rgb)) !important;
}

.btn-soft-orange {
    --vz-btn-color: rgba(var(--vz-orange-rgb)) !important;
    --vz-btn-bg: rgba(var(--vz-orange-rgb), 0.15) !important;
    --vz-btn-hover-bg: rgba(var(--vz-orange-rgb)) !important;
    --vz-btn-active-bg: rgba(var(--vz-orange-rgb)) !important;
}

.bg-pink-subtle {
    background-color: rgba(var(--vz-pink-rgb), 0.15) !important;
}

.bg-pink {
    background-color: rgb(var(--vz-pink-rgb)) !important;
}

.text-pink {
    color: rgb(var(--vz-pink-rgb)) !important;
}

.btn-soft-pink {
    --vz-btn-color: rgba(var(--vz-pink-rgb)) !important;
    --vz-btn-bg: rgba(var(--vz-pink-rgb), 0.15) !important;
    --vz-btn-hover-bg: rgba(var(--vz-pink-rgb)) !important;
    --vz-btn-active-bg: rgba(var(--vz-pink-rgb)) !important;
}




.text-gold, .bg-gold {
    color: #EFBF04 !important;
}

.text-faded {
    color: #e1e1e1 !important;
}

[data-bs-theme=dark] .text-faded {
    color: #3a3a3a !important;
}



/* keep the menu top bar icon when collapsed instead of the default arrow */

.hamburger-icon.open {
    -webkit-transform: none;
    transform: none;
}

.hamburger-icon.open span:nth-child(1) {
    left: 0;
    top: 0;
    width: 80%;
    -webkit-transform: none;
    transform: none;
    -webkit-transition-delay: 0;
    transition-delay: 0;
}

.hamburger-icon.open span:nth-child(2) {
    left: 0;
    top: 6px;
    width: 100%;
    -webkit-transform: none;
    transform: none;
    -webkit-transition-delay: 0;
    transition-delay: 0;
}

.hamburger-icon.open span:nth-child(3) {
    left: 0;
    top: auto;
    bottom: 0;
    width: 60%;
    -webkit-transform: none;
    transform: none;
    -webkit-transition-delay: 0;
    transition-delay: 0;
}

.vertical-menu-btn:hover .hamburger-icon span:nth-child(1) {
    top: -1px;
}

.vertical-menu-btn:hover .hamburger-icon span:nth-child(3) {
    bottom: -1px;
}

@media (max-width: 575px) {
    .hamburger-icon {
        margin-left: -8px;
    }
}




/* when selected compact left menu mode it fits the logo */
[data-sidebar-size=md] .navbar-brand-box .logo-lg img {
    height: 46px;
}




/* breadcrumb arrow adjustment */
.breadcrumb-item + .breadcrumb-item::before {
    line-height: inherit;
}












/* make icons larger in some form buttons */
.btn .i-lg {
    position: relative;
    top: 2px;
    font-size: 20px !important;
    line-height: 1rem;
}

/*.badge {
    line-height: 1;
}*/

/*.nav-item .badge, .card .badge {
    padding-bottom: .3rem;
}*/

.badge {
    --vz-badge-padding-y: 0.45em;
}

.badge-sm {
    font-size: 0.65rem;
    padding: 0.25rem 0.35rem;
}

.bg-muted {
    background-color: var(--vz-secondary-color) !important;
}

/* move the setting customizer button up the screen, can DELETE this setting once this is hidden */
.customizer-setting {
    bottom: 70px;
}

/* card view and edit buttons in title */
.card-title-btn {
    display: inline-block;
    margin-right: 10px;
    margin-top: 0px;
    position: relative;
    top: 2px;
}


.tooltip {
    --vz-tooltip-color: var(--vz-secondary-bg);
}

h4 * {
    vertical-align: middle;
}

/* changes the drop down arrow position more to the right */
.form-select {
    background-position: right .6rem top .95rem;
}

    /* changes the drop down arrow and validation sign to proper positions */
    .form-select.is-invalid:not([multiple]):not([size]) {
        background-position: right .6rem center,center right 2rem;
    }

/* icons inside fields with positioning that works with validation also */
.form-icon i {
    top: 0.5rem;
    bottom: auto;
    left: 0.65rem;
    font-size: 18px;
    line-height: var(--vz-body-line-height);
}

.form-icon i.uph {
    top: 0.475rem;
}

.form-icon .form-control-icon {
    padding-left: calc(.7rem * 3);
}

.form-icon .choices__list--single {
    padding-left: 26px;
    white-space: nowrap;
}


/* This is for turning the control icon colors based on focus and validation */
.form-icon i {
    color: var(--vz-gray);
}

.form-icon *:focus + i,
.form-icon *:focus + .input-group-append + i,
.form-icon .is-focused + i,
.form-icon .is-focused + .input-group-append + i,
.form-icon .active + i,
.form-icon .active + .input-group-append + i,
.form-icon *:not(.is-invalid):focus + .invalid-feedback + i 
{
    color: var(--vz-primary);
}

.form-icon .is-invalid + .invalid-feedback + i, .form-icon .is-invalid + .input-group-append + .invalid-feedback + i {
    color: var(--vz-danger) !important;
}


/* make the default checkboxes bigger */
.form-check-input {
    width: 1.3em;
    height: 1.3em;
    margin-top: 0.1em;
}

.form-check-label {
    padding-left: 0.2rem;
}





/* number spin buttons text vertical center */
.input-step button {
    padding-bottom: .4rem !important;
}

/* on filter clear buttons, make the background match the input field */
.input-group-text.filter {
    background-color: var(--vz-input-bg-custom);
}

/* yes no drop down filters */
.yesno-filter {
    max-width: 150px !important;
    width: 100% !important;
    min-width: 90px !important;
}

/* make the auto complete list show over top of other interface items */
.autoComplete_wrapper > ul {
    z-index: 20;
}

/* the number input showing arrows in firefox, this removes those */
input[type=number] {
    -moz-appearance: textfield;
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* the generate button on the password on the employee screen */
.input-group .input-group-append .btn {
    padding-top: 0.65rem;
    height: 100%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}




/* lining up bx icons in drop down menus to the text working like the ri icons */
.dropdown-item [class^="ri-"], .dropdown-item .bx, .dropdown-item .las {
    line-height: var(--vz-body-line-height) !important;
}

.dropdown-item [class^="ri-"].fs-18, .dropdown-item [class^="las-"].fs-18 {
    vertical-align: -.05em;
}

.dropdown-item .bx.fs-18 {
    vertical-align: -.16em;
}

.dropdown-item .bx, .dropdown-item .las {
    vertical-align: -.08em;
}



/* create new items in the top toolbar */
.dropdown-icon-item {
    line-height: 28px;
    padding: 12px 0 15px;
}

/* top toolbar profile icon / initials circle */
.header-profile-user {
    padding-top: 6px;
    font-size: 0.85rem;
}

/* Page title bar icon to the left positioning */
.page-icon {
    line-height: 20px;
    position: relative;
    top: -1px;
}

.footer {
    padding-top: 18px;
}

.footer .enviro {
    padding-top: .3rem;
    padding-bottom: .25rem;
    position: relative;
    top: -.1rem;
    margin-left: .4rem !important;
}

@media (max-width: 575.98px) {
    .footer {
        font-size: 12px;
        padding-top: 20px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .footer .enviro {
        padding-top: .2rem;
        padding-bottom: .15rem;
        line-height: 0.7rem;
        top: -.07rem;
    }

    #back-to-top {
        bottom: 10px;
        right: 170px;
    }
}




/* login, reset, lock, logout, etc */

/* hide the eye ball see password button when the validation is on */
.is-invalid + .invalid-feedback + .password-addon {
    display: none;
}

.form-icon:has(.is-invalid) + .password-addon {
    display: none;
}

/* because of the button positioning, I had to create this style to make eye button toggle (original way also will still work) */
.auth-pass-inputgroup .form-icon:has(input[type=text]) + .btn .ri-eye-fill:before {
    content: "\ecb6";
}

/* the eye icon trying to center it in the textbox */
.password-addon {
    padding-top: 0.575rem;
}




/* format the descriptions from ckeditors */
.rich-text p {
    margin-top: 0;
    margin-bottom: 0;
}

/* hide the ckeditor logo since it is not working properly for display */
.ck.ck-balloon-panel.ck.ck-balloon-panel_visible {
    display: none !important;
}

/* new ck editor overrides */
.ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content {
    border: none;
}

.ck-content {
    color: inherit;
    font-size: inherit;
}

.ck.ck-button.ck-list-item-button, .ck.ck-button.ck-list-item-button.ck-on {
    background: inherit;
}


.ck-source-editing-area textarea {
    background-color: var(--vz-secondary-bg) !important;
    border-color: var(--vz-border-color);
}

.ck.ck-fullscreen__main-wrapper {
    background-color: var(--vz-primary-bg) !important;
}


.ck-fullscreen__main-wrapper .ck-fullscreen__editable .ck.ck-editor__editable:not(.ck-editor__nested-editable) {
    background: var(--vz-secondary-bg);
    border: 1px solid var(--vz-border-color);
    padding: 4mm 8mm;
}





/* borders for the top count panels for left hand border */

.card-left-xborder {
    border-left: 3px solid var(--vz-border-color);
}

.card-left-xborder.card-left-info {
    border-left-color: var(--vz-info);
}

.card-left-xborder.card-left-success {
    border-left-color: var(--vz-success);
}

.card-left-xborder.card-left-primary {
    border-left-color: var(--vz-primary);
}

.card-left-xborder.card-left-secondary {
    border-left-color: var(--vz-secondary);
}

.card-left-xborder.card-left-danger {
    border-left-color: var(--vz-danger);
}

.card-left-xborder.card-left-warning {
    border-left-color: var(--vz-warning);
}

.card-left-xborder.card-left-orange {
    border-left-color: var(--vz-orange);
}







/* get rid of the box shadow on the page title */
* {
    --vz-page-title-box-shadow: none;
    --vz-page-title-border: var(--vz-border-color);
    /* validation errors color */
    --vz-form-invalid-color: var(--vz-danger); /*#dc3545;*/
    --vz-form-invalid-border-color: var(--vz-danger); /*#dc3545;*/
}

/* In the light version of the layout the border 0, should mark dark layout or else white on white looks strange. */
.dropdown-menu {
    --vz-dropdown-border-width: 1px !important;
}

/* validation errors icon color change */
.form-control.is-invalid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ee6352'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ee6352' stroke='none'/%3e%3c/svg%3e");
}

.form-select.is-invalid:not([multiple]):not([size]) {
    --vz-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ee6352'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ee6352' stroke='none'/%3e%3c/svg%3e");
}




[data-theme=galaxy][data-bs-theme=dark]:root[data-topbar=dark] {
    --vz-bg-opacity: 1;
    --vz-header-bg: rgba(var(--vz-secondary-bg-rgb), var(--vz-bg-opacity)) !important;
    --vz-header-border: var(--vz-border-color);
    --vz-header-item-color: rgba(255, 255, 255, 0.85);
    --vz-header-item-bg: #092748;
    --vz-header-item-sub-color: #878a99;
    --vz-topbar-user-bg: var(--vz-secondary-bg);
}

/* this will make it where the search in top will match proper background when you scroll down the page */
[data-theme=galaxy][data-bs-theme=dark]:root[data-topbar=light] .topbar-shadow {
    --vz-topbar-search-bg: rgba(255, 255, 255, 0.05);
    --vz-topbar-search-color: #fff;
}

/* changing the default dark side bar in the galaxy layout to a different color scheme default */
[data-theme="galaxy"][data-bs-theme="light"][data-sidebar="dark"] {
    --vz-vertical-menu-bg: #253142; /*#2c3a4e;*/ /*#2b2b2b;*/ /* #36404a this is legacy powerbase - for a throw back theme */
    --vz-vertical-menu-item-color: #cacaca;
    --vz-vertical-menu-title-color: #798694;
    --vz-vertical-menu-sub-item-color: #9ba5af;
    --vz-vertical-menu-border: #222d3c;
}

/* If I wanted to shut off the little border corners on cards, I can do it with this */
/*
        [data-theme="galaxy"] .card::before
        {
            border: none;
            content: none;
        }
        */

[data-theme="galaxy"][data-bs-theme="light"] {
    --vz-body-bg: #efefef; /* rgba(246, 246, 246, 0.6); legacy */
    --vz-topbar-search-bg: #f3f3f3;
}

    [data-theme="galaxy"][data-bs-theme="light"] .card {
        --vz-card-bg: #fefefe;
        --vz-card-shadow: none;
    }

    [data-theme="galaxy"][data-bs-theme="light"] .table {
        --vz-table-bg: #fefefe;
    }

        [data-theme="galaxy"][data-bs-theme="light"] .table th {
            --vz-table-bg: #fefefe;
        }

/* add this invisible border so the light and dark themes height matches with next style below in galaxy */
[data-theme="galaxy"] .nav-tabs-custom {
    border: 1px solid transparent;
    border-bottom-color: var(--fc-border-color);
}

[data-theme="galaxy"][data-bs-theme="light"] .nav-tabs-custom {
    border: 1px solid var(--fc-border-color);
    background-color: #f9f9f9;
}

[data-theme="galaxy"][data-bs-theme="light"] body {
    background-image: none;
}


/* temp fix for galaxy select lists white backgrounds */
[data-theme=galaxy][data-bs-theme=dark] .form-select {
    background-color: var(--vz-secondary-bg);
}

/* In galaxy dark mode use the primary background on the ckeditor so its transparent */
[data-theme=galaxy][data-bs-theme=dark] .ck.ck-editor__main > .ck-editor__editable {
    background-color: var(--vz-primary-bg) !important;
}


/* this one style pushes employee name to the right */
.navbar-header {
    padding-right: 0.75rem;
}


/* mobile adjustments to top bar */

@media (max-width: 575px) {
    #page-header-user-dropdown {
        padding-left: 6px;
        padding-right: 4px;
    }

    .header-profile-user {
        height: 30px;
        width: 30px;
        padding-top: 4px;
    }
}



/* navigation style overrides */
.navbar-menu .navbar-nav .nav-link {
    padding: .375rem 1.5rem;
}

/*.nav-tabs {
    border-bottom: none;
}*/

.nav-tabs .nav-item {
    z-index: 1;
}

.nav-tabs .nav-link * {
    vertical-align: middle;
}

.nav-tabs .nav-link tab-name {
    position: relative;
    top: 2px;
}

.nav-tabs .badge {
    --vz-badge-padding-x: 0.75em;
    --vz-badge-padding-y: 0.45em;
    font-size: 0.8rem;
    margin-left: 2px;
}

.nav-tabs .nav-item .bx, .nav-tabs .nav-item .las {
    line-height: var(--vz-body-line-height);
}

.modal-title .bx {
    top: 3px !important;
    padding-bottom: 8px;
    padding-top: 3px;
}

.nav-tabs .badge {
    min-width: 1.75rem;
    line-height: 1.2em;
}

/* set the top border on the selected tab on nav tabs */
.nav-border-top .nav-link {
    border-top: 1px solid transparent;
}


/* Search Panel, the grid vs list view buttons */

.nav-view {
    border: var(--vz-border-style) var(--vz-border-width) rgba(var(--vz-primary-rgb), 0.4);
    padding: 3px;
}

    .nav-view .btn-icon {
        height: calc(1rem + .95em + 2px);
        width: calc(1rem + 1.2em + 2px);
    }

    .nav-view a, .nav-view a:hover {
        background-color: var(--vz-primary-bg-subtle);
        color: var(--vz-primary);
    }

/* on the search panel, filters button, show filter count on corner of button */
.search-toolbar .translate-right {
    transform: translate(10%,-40%) !important;
}


@media (max-width: 575.98px) {
    .mobile-search {
        z-index: 1;
        border: none !important;
        padding: 0px !important;
    }

        .mobile-search:before, .mobile-search:after {
            border: none !important;
        }
}


/* mobile friendly tabs above table */
@media (max-width: 575px) {
    .nav-tabs.icons-tabs {
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
        flex-direction: column !important;
    }

        .nav-tabs.icons-tabs .nav-link {
            border: var(--vz-nav-tabs-border-width) solid var(--vz-border-color);
            border-radius: 0;
            padding-top: .4rem !important;
            padding-bottom: .4rem !important;
        }
}

/* The badge inside the search panel filters button */
.badge-btn-count {
    padding-bottom: 6px;
    min-width: 20px;
}

/* search box styles for the icon and background */
.table-search .form-control {
    background-color: var(--vz-topbar-search-bg);
}

.search-box .form-control {
    padding-left: 32px;
}

.search-box .search-icon {
    z-index: 10;
    top: -1px;
}

.card-body .search-box .search-icon {
    top: 0px;
}

[data-theme=galaxy][data-bs-theme=dark] .table-search .form-control {
    background-color: transparent;
}

/* delete confirmation box */
.confirmbox .modal-symbol {
    font-size: 11rem;
    margin: -60px 0px;
    display: inline-block;
}

@media (min-width:576px) {
    .confirmbox .modal-sm {
        --vz-modal-width: 400px
    }

    .modal-md2 {
        --vz-modal-width: 580px;
    }
}

/* time picker */
.flatpickr-time input.flatpickr-hour {
    font-weight: 400;
}

.flatpickr-time {
    line-height: 38px;
    max-height: 39px;
}

    .flatpickr-time .numInputWrapper {
        height: auto;
    }

/* date picker and shortcut buttons */
.flatpickr-innerContainer {
    padding-bottom: 10px;
}

.shortcut-buttons-flatpickr-buttons {
    text-align: center;
    border-top: var(--vz-border-style) var(--vz-border-width) var(--vz-border-color);
}

.shortcut-buttons-flatpickr-button {
    margin: 15px 5px 15px 5px;
    --vz-font-base: 0.85rem;
}


/* time picker styles */

.flatpickr-calendar.inline.noCalendar {
    top: 0px;
    background-color: var(--vz-input-bg-custom);
}

.flatpickr-time { max-height: 40px; }
.flatpickr-time .flatpickr-hour { padding-left: 18px; }
.flatpickr-time .flatpickr-am-pm { margin-right: 6px; }


/* choices multi select list */
.choices__item {
    padding-bottom: 1px !important;
}

.choices__list--dropdown {
    z-index: 999;
}

/* choices dropdown with not hiding to validate the select */
.formview .choices {
    margin-bottom: 0px;
}

.choices[data-type*="select-one"] .choices__inner {
    padding-top: .23rem;
    line-height: var(--vz-body-line-height);
}

.choices__inner {
    padding-bottom: .25rem;
    min-height: 43px;
    padding-top: .4rem;
}

.choices__list--multiple .choices__item {
    font-size: 13px;
}

.choices.is-invalid:not([multiple]):not([size]) .choices__inner {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ee6352'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ee6352' stroke='none'/%3e%3c/svg%3e");
    border-color: var(--vz-form-invalid-border-color);
    background-repeat: no-repeat;
    background-position: right calc(.375em + 1.75rem) center;
    background-size: calc(.75em + .5rem) calc(.75em + .5rem);
}

.choices__list--single {
    padding: 5px 16px 3px 4px;
}

.choices [hidden] {
    display: block !important;
}

.choices select {
    visibility: hidden;
    width: 0px !important;
    padding: 0px !important;
    height: 0px !important;
    margin: 0px !important;
    border: none !important;
}



.multireset {
    top: -28px;
}

.multireset a {
    border: var(--vz-border-width) solid var(--vz-input-border-custom);
    border-radius: var(--vz-border-radius);
    display: block;
    background-color: var(--vz-tertiary-bg);
}

.input-group-text {
    padding: .5rem .7rem;
}

    .input-group-text .Reset {
        line-height: 0.8em;
    }

/* paging styles for tables */




/* grid pager for tables */

.gridpager {
    margin-top: 2px;
}

    .gridpager .pagination {
        --vz-pagination-padding-y: 0.475rem;
        padding-left: 0.5rem;
    }

    .gridpager .pagination-separated .page-item .page-link {
        margin-left: 0px;
        margin-right: .35rem;
        padding: .12rem .5rem;
    }

    .gridpager .pagination .pageinfo {
        margin: 10px 10px 10px 5px;
    }

    .gridpager .bx-chevrons-right {
        position: relative;
        left: 2px;
    }

    .gridpager .pagination .pager-btn i {
        font-size: 22px;
        line-height: var(--vz-body-line-height);
    }

    .gridpager .form-select {
        padding: .4rem 2.2rem .4rem .9rem;
        background-position: right .6rem top .85rem;
    }

@media (max-width: 575px) {
    .gridpager .pagination .pageinfo {
        font-size: 12px;
        margin: 6px 4px 6px 4px;
    }

    .gridpager .pagination-separated .page-item .page-link {
        padding: .12rem .3rem;
    }

    .gridpager .pagination .pager-btn i {
        font-size: 18px;
    }

    .gridpager .bx-chevrons-right {
        left: 1px;
    }

    .gridpager .form-select {
        padding: .2rem 2rem .25rem .5rem;
        background-position: right .6rem top .65rem;
    }
}


/* table styles */

table.dataTable.tabs-table, .table:not(.cards) > :not(:first-child) {
    border-width: var(--vz-border-width);
    border-style: var(--vz-border-style);
}

table.dataTable th {
    position: relative;
    border-top-width: 1px;
    border-top-style: solid;
    white-space: nowrap;
}

    table.dataTable th a {
        color: inherit;
    }

table.dataTable tbody tr:not(.no-data) td {
    border-top-width: 1px;
    border-top-color: transparent;
}

table.dataTable > thead .sorting a:before,
table.dataTable > thead .sorting_asc a:before,
table.dataTable > thead .sorting_desc a:before,
table.dataTable > thead .sorting_asc_disabled a:before,
table.dataTable > thead .sorting_desc_disabled a:before,
table.dataTable > thead .sorting a:after,
table.dataTable > thead .sorting_asc a:after,
table.dataTable > thead .sorting_desc a:after,
table.dataTable > thead .sorting_asc_disabled a:after,
table.dataTable > thead .sorting_desc_disabled a:after {
    content: "\f0360";
    position: absolute;
    right: 0.5rem;
    top: 12px;
    font-size: 0.8rem;
    font-family: "Material Design Icons";
    z-index: 2;
    color: transparent;
}

table.dataTable > thead .sorting a:after,
table.dataTable > thead .sorting_asc a:after,
table.dataTable > thead .sorting_desc a:after,
table.dataTable > thead .sorting_asc_disabled a:after,
table.dataTable > thead .sorting_desc_disabled a:after {
    content: "\f035d";
    top: 18px;
}

table.dataTable > thead .new-item {
    display: block;
    line-height: 0.9em;
}

    table.dataTable > thead .new-item i {
        line-height: 1.1rem;
        position: relative;
        top: 1px;
    }


table.dataTable > thead .table-light {
    border-top-width: 1px;
    border-top-style: solid;
}

table.dataTable > thead th:last-child {
    border-right-width: 1px;
    border-right-style: solid;
}

/* since i fixed the line height issue with icons this probably is not needed */
/*table.dataTable .gvcount .bx {
    vertical-align: bottom;
    line-height: 1.25
}*/

/* This invoice icon is skinny, so we remove the margin right so the number beside is closer */
table.dataTable .gvcount .bx-dollar {
    margin-right: 0px !important;
}

table.dataTable .row_bookmark {
    position: absolute;
    top: 2px;
    right: 0px;
}

/* if you want to highlight the bookmarked row, this can be used a way to flag rows also with danger and warning highlight */
/*table.dataTable tr:has(.row_bookmark) td { background-color: var(--vz-success-bg-subtle); }*/

table.dataTable .no-data td {
    border-style: none;
}

table.dataTable .no-data .noresults {
    position: relative;
    top: -3px;
}

table.dataTable .qk-menu {
    position: relative;
    left: -6px;
    top: 1px;
}

table.dataTable.tabs-table {
    border-top-width: 1px;
    margin-top: 0px !important;
    border-collapse: collapse !important;
}

.top-border table.dataTable.tabs-table {
    border-top-width: 1px;
}

table.dataTable thead td, table.dataTable tfoot td {
    padding: 0.5em;
}

/* these 2 style make it so when I put a background on a row in the table it works, the cell background was overriding it before */
.table > :not(caption) > tr {
    background-color: var(--vz-table-bg);
}

    .table > :not(caption) > tr > td {
        /*background: inherit;*/  /* This line would make it so it doubles the color of the background opacity */
        background-color: transparent !important;
    }



.table > :not(caption) > * > * {
    padding: 1rem .6rem;
}

/* make just the heading top and bottom padding less than regular rows */
.table > :not(caption) > * > th {
    padding: .7rem .6rem;
}

tbody, td, tfoot, th, thead, tr {
    border-style: dotted;
}

[data-bs-theme="light"]:root tbody td {
    border-style: solid;
}

.paging tr:last-child td, .paging thead tr th {
    border-bottom-style: solid;
}

table.dataTable.m-0 {
    margin: 0px !important;
}

table.dataTable .viewer {
    width: 24px;
}

[data-bs-theme=light] .page-link {
    --vz-pagination-color: var(--vz-body-color);
}

[data-theme=galaxy][data-bs-theme=dark]:root .table-light {
    --vz-table-bg: rgba(var(--vz-light-rgb), 0.7);
}

table.table-bordered.dataTable thead tr:first-child th, table.table-bordered.dataTable thead tr:first-child td {
    border-top-width: 0px;
}

table.table-bordered.dataTable th:first-child, table.table-bordered.dataTable th:first-child, table.table-bordered.dataTable td:first-child, table.table-bordered.dataTable td:first-child {
    border-left-width: 0px;
}

table.dataTable > thead > tr > td, table.dataTable > tfoot > tr > td {
    padding-right: 15px !important;
}

table.dataTable .table-active {
    background-color: rgba(var(--vz-light-rgb), 0.8);
}

table:not(.cards) .table-active td {
    border-style: var(--vz-border-style);
    border-top-width: var(--vz-border-width);
    border-color: var(--vz-border-color) !important;
}

.dataTable td.menu-end {
    width: 45px;
    padding: 0 0.75rem 0 0 !important;
    text-align: right !important;
    position: relative;
}

/* make the space for mobile tables between rows and cell less padding (example the company popup clicking the eye on mobile) */
.table.table-mobile > :not(caption) > * > * {
    padding: .5rem .5rem;
}



/* would like the row highlights to be a bit darker than default */

table.dataTable tr.bg-danger-subtle {
    background-color: rgba(var(--vz-danger-rgb), 0.15) !important;
}

table.dataTable tr.bg-warning-subtle {
    background-color: rgba(var(--vz-warning-rgb), 0.15) !important;
}

table.dataTable tr.bg-orange-subtle {
    background-color: rgba(var(--vz-orange-rgb), 0.15) !important;
}

table.dataTable tr.bg-primary-subtle {
    background-color: rgba(var(--vz-primary-rgb), 0.15) !important;
}

table.dataTable tr.bg-secondary-subtle {
    background-color: rgba(var(--vz-secondary-rgb), 0.15) !important;
}

table.dataTable tr.bg-info-subtle {
    background-color: rgba(var(--vz-info-rgb), 0.15) !important;
}

table.dataTable tr.bg-success-subtle {
    background-color: rgba(var(--vz-success-rgb), 0.15) !important;
}

table.dataTable tr.bg-pink-subtle {
    background-color: rgba(var(--vz-pink-rgb), 0.15) !important;
}


/* when highlight rows are selected give a bit more color and highlight borders */

table.dataTable tr.bg-danger-subtle.table-active {
    background-color: rgba(var(--vz-danger-rgb), 0.2) !important;
}

table.dataTable.cards tr.bg-danger-subtle.table-active, table.dataTable:not(.cards) tr.bg-danger-subtle.table-active td {
    border-color: rgba(var(--vz-danger-rgb), 0.4) !important;
}

table.dataTable tr.bg-warning-subtle.table-active {
    background-color: rgba(var(--vz-warning-rgb), 0.2) !important;
}

table.dataTable.cards tr.bg-warning-subtle.table-active, table.dataTable:not(.cards) tr.bg-warning-subtle.table-active td {
    border-color: rgba(var(--vz-warning-rgb), 0.4) !important;
}

table.dataTable tr.bg-orange-subtle.table-active {
    background-color: rgba(var(--vz-orange-rgb), 0.2) !important;
}

table.dataTable.cards tr.bg-orange-subtle.table-active, table.dataTable:not(.cards) tr.bg-orange-subtle.table-active td {
    border-color: rgba(var(--vz-orange-rgb), 0.4) !important;
}

table.dataTable tr.bg-primary-subtle.table-active {
    background-color: rgba(var(--vz-primary-rgb), 0.2) !important;
}

table.dataTable.cards tr.bg-primary-subtle.table-active, table.dataTable:not(.cards) tr.bg-primary-subtle.table-active td {
    border-color: rgba(var(--vz-primary-rgb), 0.4) !important;
}

table.dataTable tr.bg-secondary-subtle.table-active {
    background-color: rgba(var(--vz-secondary-rgb), 0.2) !important;
}

table.dataTable.cards tr.bg-secondary-subtle.table-active, table.dataTable:not(.cards) tr.bg-secondary-subtle.table-active td {
    border-color: rgba(var(--vz-secondary-rgb), 0.4) !important;
}

table.dataTable tr.bg-info-subtle.table-active {
    background-color: rgba(var(--vz-info-rgb), 0.2) !important;
}

table.dataTable.cards tr.bg-info-subtle.table-active, table.dataTable:not(.cards) tr.bg-info-subtle.table-active td {
    border-color: rgba(var(--vz-info-rgb), 0.4) !important;
}

table.dataTable tr.bg-success-subtle.table-active {
    background-color: rgba(var(--vz-success-rgb), 0.2) !important;
}

table.dataTable.cards tr.bg-success-subtle.table-active, table.dataTable:not(.cards) tr.bg-success-subtle.table-active td {
    border-color: rgba(var(--vz-success-rgb), 0.4) !important;
}

table.dataTable tr.bg-pink-subtle.table-active {
    background-color: rgba(var(--vz-pink-rgb), 0.2) !important;
}

table.dataTable.cards tr.bg-pink-subtle.table-active, table.dataTable:not(.cards) tr.bg-pink-subtle.table-active td {
    border-color: rgba(var(--vz-pink-rgb), 0.4) !important;
}







/* cards view for tables */
.cards {
    display: block !important
}

.cards thead {
    border-top: none;
    border-bottom: var(--vz-border-width) var(--vz-border-style) var(--vz-border-color);
    display: table !important;
    width: 100%;
}

.cards tbody tr {
    position: relative;
    display: block;
}

.cards thead tr:has(th) {
    display: none !important;
}

.cards thead td {
    border: none !important;
}

.cards tr.no-data {
    border: none !important;
    width: 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: calc(100% - 2.1em);
}

    .cards tr.no-data td {
        border: none !important;
        -webkit-box-shadow: inset 0 0 0 9999px var(--vz-table-bg-state,var(--vz-table-bg-type,var(--vz-table-accent-bg)));
        box-shadow: inset 0 0 0 9999px var(--vz-table-bg-state,var(--vz-table-bg-type,var(--vz-table-accent-bg)));
        width: 100%;
        padding: 1rem .6rem !important;
    }

.cards tbody {
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    border-top: none;
}

    .cards tbody tr:not(.no-data) {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: calc(100% - 1em);
        position: relative;
        padding: 6px 10px 8px 10px;
        min-height: 1px;
        margin-left: 1em;
        margin-top: 1em;
        border: solid var(--vz-border-width) var(--vz-border-color);
    }

    .cards tbody td {
        display: block !important;
        background-color: transparent !important;
        padding: 10px !important;
        text-align: left !important;
        box-shadow: none;
    }

        .cards tbody td.details {
            display: none !important;
        }

        .cards tbody td.address {
            border-bottom: 0;
            padding-bottom: 0 !important;
            margin-bottom: -3px;
        }

        .cards tbody td.city {
            padding-top: 0px !important;
            border-bottom: 0;
            padding-bottom: 0 !important;
            font-size: var(--vz-font-12) !important;
            --vz-text-opacity: 1;
            color: var(--vz-secondary-color) !important;
            display: inline !important;
            padding-right: 0px !important;
        }

            .cards tbody td.city::after {
                content: ', ';
                display: inline !important;
            }

        .cards tbody td.prov {
            padding-top: 0px !important;
            border-bottom: 0;
            padding-bottom: 0 !important;
            font-size: var(--vz-font-12) !important;
            --vz-text-opacity: 1;
            color: var(--vz-secondary-color) !important;
            display: inline !important;
            padding-left: 0px !important;
        }

        .cards tbody td.postal {
            padding-top: 0px !important;
            font-size: var(--vz-font-12) !important;
            --vz-text-opacity: 1;
            color: var(--vz-secondary-color) !important;
        }

        .cards tbody td.viewer {
            border: none !important;
            width: 24px;
            padding: 4px 12px 2px 0px !important;
            margin-top: -1px;
            margin-left: -1px;
        }

        .cards tbody td.gvcount {
            display: table-cell !important;
            font-size: 12px;
            border: none !important;
            padding-bottom: 6px !important;
        }

        .cards tbody td:has(.dropdown-menu-end) {
            position: absolute;
            right: -7px;
            top: 5px;
            border: none !important;
        }

        .cards tbody td.no-card {
            display: none !important;
        }

.cards.paging tr:last-child td {
    border-bottom-style: dotted;
}

[data-bs-theme="light"]:root .cards.paging tr:last-child td {
    border-bottom-style: solid;
}

.cards tfoot {
    margin-top: 1em;
    border-collapse: collapse;
    display: table !important;
    width: 100%;
    border-top: var(--vz-border-width) var(--vz-border-style) var(--vz-border-color);
    border-bottom: none;
}

    .cards tfoot tr {
        display: block !important;
    }

    .cards tfoot td {
        border: none !important;
        display: block !important;
    }

@media (max-width: 649px) {
    .cards tbody tr:not(.no-data) {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: calc(100% - 2em);
    }
}

@media (min-width: 650px) {
    .cards tbody tr:not(.no-data) {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: calc(50% - 1.5em);
    }
}

@media (min-width: 1100px) {
    .cards tbody tr:not(.no-data) {
        -ms-flex: 0 0 33.33333%;
        flex: 0 0 33.33333%;
        max-width: calc(33.33333% - 1.3em);
    }
}

@media (min-width: 1350px) {
    .cards tbody tr:not(.no-data) {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: calc(25% - 1.25em);
    }
}

@media (min-width: 1600px) {
    .cards tbody tr:not(.no-data) {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: calc(20% - 1.2em);
    }
}




/* Custom switch look from last version of PB */

.switch-outline .switch {
    position: relative;
    display: inline-block;
    width: 64px;
    height: 32px;
}

.switch-outline label {
    margin-bottom: 0px;
}

.switch-outline .switch-sm {
    width: 50px;
    height: 26px;
}

.switch-outline .switch input {
    display: none;
}

.switch-outline .switch-state {
    background-color: var(--vz-input-bg-custom) !important;
    border: var(--vz-border-width) solid var(--vz-input-border-custom);
    border-radius: 20px;
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transition: .4s;
    transition: .4s;
}

    .switch-outline .switch-state:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 2px;
        bottom: 2px;
        background-color: var(--vz-tertiary-bg);
        -webkit-transition: .4s;
        transition: .4s;
        border-radius: 20px;
        font-family: remixicon !important;
        font-style: normal;
        content: "\eb99";
        color: rgba(var(--vz-body-color-rgb), 0.4);
        font-size: 16px;
        padding-left: 0.325rem;
        padding-top: 1px !important;
    }

.switch-outline .switch-sm .switch-state:before {
    height: 20px;
    width: 20px;
    font-size: 14px;
    padding-left: 0.2rem;
    line-height: 1.15rem;
    padding-top: 1px !important;
}

.switch-outline .switch input:checked + .switch-state:before {
    left: 8px;
    -webkit-transform: translateX(26px);
    transform: translateX(26px);
    background-color: var(--vz-primary);
    font-family: remixicon !important;
    font-style: normal;
    content: "\eb7b";
    color: #cde4da;
    font-size: 16px;
    padding-left: 0.375rem;
    padding-top: 1px !important;
}

.switch-outline .switch-sm input:checked + .switch-state:before {
    left: 4px;
    -webkit-transform: translateX(22px);
    transform: translateX(22px);
    font-size: 14px;
    padding-left: 0.25rem;
    line-height: 1.15rem;
    padding-top: 1px !important;
}

.switch-outline .switch input:checked + .switch-state.bg-primary:before {
    background-color: var(--vz-primary);
}

.switch-outline .switch input:checked + .switch-state.bg-success:before {
    background-color: var(--vz-success);
}

.switch-outline .check-text {
    position: relative;
    top: -11px;
    left: 5px;
}


/* Calculator on top bar */

.calculator {
    min-width: 320px;
}

    .calculator .btn-close {
        position: absolute;
        right: .3rem;
        top: .3rem;
        font-size: 0.8rem !important;
    }

    .calculator .calculator-screen {
        width: 100%;
        height: 80px;
        border: none;
        background-color: var(--vz-light-rgb);
        color: var(--vz-body-color);
        text-align: right;
        padding-right: 20px;
        padding-left: 10px;
        font-size: 4rem;
    }

    .calculator button {
        font-size: 2rem !important;
        line-height: 2rem;
    }

        .calculator button.operator {
            padding-bottom: .45rem;
            font-size: 2.5rem !important;
            padding-top: .1rem;
        }

        /*.calculator.standard .equal-sign {
            height: 100%;
            grid-area: 2 / 4 / 6 / 5;
            padding: inherit;
        }*/

        .calculator button.function:not(.all-clear) {
            font-size: 1.4rem !important;
        }

        .calculator button.function.sm {
            font-size: 1.2rem !important;
        }

        .calculator button.function.xs {
            font-size: 1.1rem !important;
        }

        /* the superscript is not clickable on the button unless you use this css */
        .calculator button.function {
            position: relative;
            z-index: 0;
        }

        .calculator button sup, .calculator button sub {
            position: relative;
            z-index: -1;
        }

    /*.calculator button.close {
            font-size: 1.2rem !important;
        }*/

    .calculator .calculator-keys {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 10px;
        padding: 10px;
    }

    /*.calculator.standard .calculator-keys.advanced { display: none; }
        .calculator.advanced .calculator-keys.standard { display: none; }*/

    .calculator.advanced .calc-title .std {
        display: none;
    }

    .calculator:not(.advanced) .calc-title .adv {
        display: none;
    }

    .calculator:not(.advanced) .calculator-keys .adv {
        display: none;
    }

/* Timer styles */

#tbwatchicon {
    line-height: 2.3rem;
}

#tbwatchtime {
    right: -20px;
}

#timetrack .btn-close {
    position: absolute;
    top: 15px;
    right: 15px;
}

#timetrack #watchicon {
    font-size: 7em;
    margin-top: 0px;
}

#timetrack .digit {
    min-width: 30px;
    display: inline-block;
}


/* timeline accordian */

.accordion {
    --vz-accordion-bg: var(--vz-card-bg);
}





/* off canvas */
#offcanvasFilters [class^="col-"] {
    width: 100%;
}

#offcanvasFilters .half [class^="col-"] {
    width: 50%;
}


/* accordian style to hide existing arrow */
.btn-accordian[aria-expanded=false] i.ri-arrow-up-s-line {
    display: none;
}

.btn-accordian[aria-expanded=true] i.ri-arrow-down-s-line {
    display: none;
}



/* Contact Directory Widget */

.contact-dir .contact-add {
    position: absolute;
    top: 7px;
    right: 18px;
}

.contact-dir .contact-widget {
    height: calc(100vh - 338px);
    min-height: 380px;
}

.contact-dir .contact-list-divider::before {
    margin-right: 5px;
    width: 25px;
}

.contact-dir .contact-list-divider::before, .contact-dir .contact-list-divider::after {
    content: '';
    display: block;
    height: 1px;
    background-color: var(--vz-border-color);
}

.contact-dir .contact-list-divider {
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 9px 0px;
}

    .contact-dir .contact-list-divider::after {
        margin-left: 5px;
        flex: 1;
    }

.contact-dir .contact-list .media {
    padding: 15px 10px;
    position: relative;
}

.contact-dir .contact-list .dropdown-menu li {
    padding: 0;
}

.contact-dir .contact-list .media.active {
    background-color: var(--vz-secondary-bg);
}

.contact-dir .contact-list .media i.ri-eye-line {
    display: none;
}

.contact-dir .contact-list .media.active i.ri-eye-line {
    display: block;
    position: absolute;
    top: -2px;
    left: 2px;
}

.translate-left {
    -webkit-transform: translate(-280%,-50%) !important;
    transform: translate(-280%,-50%) !important;
}




/* Module Comments */

/* Module comments height of panel */
.module-comments, .module-comments .simplebar-content-wrapper {
    min-height: calc(100vh - 820px);
}

/* hide the bottom border on the last comment in the list */
.comment-item.border-bottom:last-child {
    border: none !important;
}

.comment-images .comment-img-link {
    position: absolute;
    right: 8px;
    left: auto;
    bottom: 7px;
}

    .comment-images .comment-img-link .dropdown .dropdown-toggle {
        font-size: 20px;
        color: #fff;
        display: inline-block;
        line-height: 20px;
        width: 26px;
        height: 24px;
        border-radius: 3px;
        background-color: rgba(33,37,41,.7);
        text-align: center;
        padding: 2px 4px;
    }

        .comment-images .comment-img-link .dropdown .dropdown-toggle::after {
            content: '';
            margin: 0;
        }

.comment-images .img-fluid {
    width: 120px;
    height: 80px;
}

@media (max-width: 575px) {
    .comment-images {
        width: 80%;
    }

        .comment-images .img-fluid {
            width: 100%;
            height: auto;
        }
}

#UploadFileModal .dropzone {
    text-align: center;
    min-height: 200px;
}



/* Timeline List */

.changelog div {
    margin-bottom: 2px;
}

    .changelog div::before {
        font-family: remixicon !important;
        font-style: normal;
        content: "\eb7b";
        font-size: 14px;
        margin-right: 3px;
        color: var(--vz-success);
    }

    .changelog div strong {
        color: var(--vz-primary);
        font-weight: 500;
    }

    .changelog div i {
        color: var(--vz-danger);
    }







/* max notes width on the support ticket list */
.max-width-notes {
    max-width: 320px;
}






/* Highlight Rules Dialog */

.helper-notes .box-icon {
    width: 60px;
    height: 60px;
}

.helper-notes ul {
    list-style-type: none;
    padding-left: .75rem;
}

.helper-notes ul li {
    margin-bottom: .35rem;
    max-width: 95%;
}

.helper-notes ul li::before {
    font-family: 'remixicon' !important;
    content: "\eb7c";
    position: absolute;
    font-size: 5px;
    margin-left: -10px;
    margin-top: 6px;
}






/* styles to show and hide the get directions icon beside the address on the company list */
.dataTable tr:not(.table-active) .active-only {
    display: none;
}

.ph-18 {
    width: 18px;
}







/* This turns tabs into a dropdown menu on mobile - tabs need to be in order of content to work right */

.nav-tabs-responsive .drop-tabs {
    background-color: var(--vz-secondary-bg);
    height: 47px;
}

.nav-tabs-responsive .drop-tabs .dropdown-item {
    padding: 10px 20px;
}

.nav-tabs-responsive .drop-tabs .dropdown-toggle div {
    display: inline-block;
}

.nav-tabs-responsive .drop-tabs .dropdown-toggle i {
    top: 2px !important;
}

.nav-tabs-responsive .drop-tabs .dropdown-toggle::after {
    display: inline-block;
    margin-left: .2em;
    font-size: 22px;
    line-height: 22px;
    content: "\f0140";
    font-family: "Material Design Icons";
    position: relative;
    top: 4px;
    color: var(--vz-body-color);
}

.nav-tabs-responsive .drop-tabs .dropdown-toggle .badge, .nav-tabs-responsive .drop-tabs .dropdown-item .badge {
    padding-bottom: 5px;
    min-width: 24px;
    padding-top: 6px;
    font-size: 11px;
}

.nav-tabs-responsive .drop-tabs .dropdown-item i {
    top: 1px !important;
}


/* This is the clear filters button on the dialog lists modals with the search bar */
.clear-filters {
    font-size: 1.1rem;
    line-height: 1.56rem;
}







/* Any styles for the data backup page */
.backup .progress-lg .progress-bar {
    padding-top: 1px;
}