/* global styles */
:root {
    --brand-primary: #4b9f3e;
    --brand-primary-09: rgba(75, 159, 62, 0.9);
    --brand-primary-08: rgba(75, 159, 62, 0.8);
    --brand-primary-07: rgba(75, 159, 62, 0.7);
    --brand-primary-06: rgba(75, 159, 62, 0.6);
    --brand-primary-05: rgba(75, 159, 62, 0.5);
    --brand-primary-04: rgba(75, 159, 62, 0.4);
    --brand-primary-03: rgba(75, 159, 62, 0.3);
    --brand-primary-02: rgba(75, 159, 62, 0.2);
    --brand-primary-01: rgba(75, 159, 62, 0.1);
    --brand-primary-005: rgba(75, 159, 62, 0.05);
    --brand-primary-002: rgba(75, 159, 62, 0.02);

    --brand-primary-light: #60c04b;
    --brand-primary-light-09: rgba(96, 192, 75, 0.9);
    --brand-primary-light-08: rgba(96, 192, 75, 0.8);
    --brand-primary-light-07: rgba(96, 192, 75, 0.7);
    --brand-primary-light-06: rgba(96, 192, 75, 0.6);
    --brand-primary-light-05: rgba(96, 192, 75, 0.5);
    --brand-primary-light-04: rgba(96, 192, 75, 0.4);
    --brand-primary-light-03: rgba(96, 192, 75, 0.3);
    --brand-primary-light-02: rgba(96, 192, 75, 0.2);
    --brand-primary-light-01: rgba(96, 192, 75, 0.1);
    --brand-primary-light-005: rgba(96, 192, 75, 0.05);
    --brand-primary-light-002: rgba(96, 192, 75, 0.02);

    --brand-primary-rgb: 75 159 62;
    --brand-primary-hover: #4B9F3EE6;
    --brand-accent: #e79421;
    --brand-accent-rgb: 231 148 33;
    --body-bg: #f2f8f44d;
    --brand-accent-hover: #E79421E6;
    --gradient-hero: linear-gradient(135deg, hsl(132 43% 43%) 0%, hsl(34 78% 52%) 100%);
    --primary-shadow-color: #4b9f3e54;
    --accent-shadow-color: rgba(231, 148, 33, 0.33);
    --gradient-primary: linear-gradient(135deg, hsl(132 43% 43%), hsl(132 50% 55%));
    --bs-body-font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --grey-shadow-color: rgba(0, 0, 0, 0.1);
}

.bg-default {
    background-color: var(--body-bg);
}

.bg-gradient-hero {
    background-image: var(--gradient-hero);
}

.bg-gradient-primary {
    background-image: var(--gradient-primary);
}

/* Header breadcrumbs on gradient header */
.header-breadcrumbs .breadcrumb {
    --bs-breadcrumb-divider-color: rgba(255,255,255,.75);
    --bs-breadcrumb-divider: ">";
}
.header-breadcrumbs .breadcrumb-item,
.header-breadcrumbs .breadcrumb-item.active {
    color: rgba(255,255,255,.9);
}
.header-breadcrumbs .breadcrumb-item a {
    color: #ffffff;
    text-decoration: none;
}
.header-breadcrumbs .breadcrumb-item a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.charger-status-badge{
    border-radius: var(--bs-border-radius-xxl);
    padding: .25rem 1rem;
    color: #717171;
    background-color: rgb(203 203 203 / 10%);
    font-weight: 600;
    font-size: 1rem;
}
.charger-status-badge.active{
    color: var(--brand-primary);
    background-color: var(--brand-primary-light-01);
}

.charger-status-badge.primary {
    background-color: rgb(var(--brand-primary-rgb) / 0.1);
    color: var(--brand-primary);
}

.charger-status-badge.primary-dark{
    background: rgb(var(--brand-primary-rgb) / 0.3);
    color: var(--brand-primary);
}

.charger-status-badge.accent {
    background-color: rgb(var(--brand-accent-rgb) / 0.1);
    color: var(--brand-accent);
}

.charger-status-badge.info{
    background-color: #40a7ed;
    color: #fff;
}

.charger-status-badge.muted{
    background-color: rgb(217 217 217 / 30%);
    color: rgb(108 117 125);
}

.user-role-badge{
    border-radius: var(--bs-border-radius-xxl);
    padding: .25rem .5rem;
    color: #717171;
    background-color: rgb(203 203 203 / 20%);
    font-weight: 600;
    font-size: 1rem;
}
.user-role-badge .fa-shield-halved{
    display: none;
}
.user-role-badge .fa-building-shield{
    display: none;
}
.user-role-badge.admin-badge{
    color: var(--brand-primary);
    background-color: var(--brand-primary-01);
}
.user-role-badge.admin-badge .fa-shield-halved{
    display: inline-block;
}

.user-role-badge.installationadmin-badge{
    color: var(--brand-primary);
    background-color: var(--brand-primary-01);
}
.user-role-badge.installationadmin-badge .fa-building-shield{
    display: inline-block;
}



.search-input span {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 11px;
    pointer-events: none;
}

.search-input input {
    padding-left: 40px;
}

.demo-pages-selector{
    position: fixed;
    right:0;
    top: 50%;
    transform: translate(100%, -50%);
    z-index: 1000;
    padding: 16px;
    border: 1px solid var(--brand-primary-08);
    border-bottom-left-radius: var(--bs-border-radius);
    border-top-left-radius: var(--bs-border-radius);
    background: #efffec;
    transition: transform .3s ease-in-out;
}
.sensitive-data{
    filter: blur(4px);
}
.sensitive-data:hover{
    filter: blur(0);
}
.demo-pages-selector.show{
    transform: translate(0, -50%);
    -webkit-box-shadow: 0 0 23px 0px rgb(0 0 0 / 32%);
    -moz-box-shadow: 0 0 23px 0px rgb(0 0 0 / 32%);
    box-shadow: 0 0 23px 0px rgb(0 0 0 / 32%);
}

.demo-pages-selector .handler{
    position: absolute;
    left: -91px;
    transform: rotate(-90deg) translateX(-30%);
    background: var(--brand-primary);
    padding: 10px 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    cursor: pointer;
    color: white;
    -webkit-box-shadow: 0px -4px 7px -3px rgb(0 0 0 / 62%);
    -moz-box-shadow: 0px -4px 7px -3px rgb(0 0 0 / 62%);
    box-shadow: 0px -4px 7px -3px rgb(0 0 0 / 62%);
}


span.delete-schedule-schema{
    cursor: pointer;
    top: 0;
    right: 0;
    padding: 3px;
    transform: translate(50%, -50%);
    position: absolute;
    opacity: .8;
}
span.delete-schedule-schema i{
    pointer-events: none;
}
span.delete-schedule-schema:hover{
    opacity: 1;
}

.card-block {
    position: relative;
    background-color: var(--bs-white);
    border-radius: 12px;
    border: 1px solid rgb(224, 235, 228);
    padding: 24px;
    /*height: 100%;
*/
    --shadow-color: rgb(0 0 0 / .05);
    --shadow: 0 1px 2px 0 var(--shadow-color);
    box-shadow: 0 0 #0000, 0 0 #0000, var(--shadow);

    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

/* smaller padding for mobile */
@media (max-width: 576px) {
    .card-block {
        padding: 16px;
    }
}

.card-block.small {
    padding: 1rem;
}

.card-block.interactive {
    cursor: pointer;
}

.card-block.interactive:hover {
    --shadow: 0 10px 20px -10px var(--grey-shadow-color);
}

.card-block.interactive.primary:hover {
    --shadow: 0 10px 20px -10px var(--primary-shadow-color);
}

.card-block.interactive.accent:hover {
    --shadow: 0 10px 20px -10px var(--accent-shadow-color);
}

.card-block.outline.primary {
    --shadow-color: var(--brand-primary);
}

.card-block.outline.danger {
    --shadow-color: var(--bs-danger);
}

.card-block.outline.accent {
    --shadow-color: var(--brand-accent);
}

/* radio cards */
.radio-cards .card-block.radio .radio-control {
    width: 20px;
    height: 20px;
}

.radio-cards .card-block.radio:has(.radio-control:checked) {
    --shadow: none;
    outline: 2px solid var(--brand-primary);
}

/* check box card */

.card-block.checkbox .checkbox-control{
    width: 1.2em;
    height: 1.2em;
    margin: 0;
}
.card-block.checkbox:has(.checkbox-control:checked) {
    --shadow: none;
    outline: 2px solid var(--brand-primary);
}


/* icons */
.icon-round {
    border-radius: 9999px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-round.primary {
    background-color: rgb(var(--brand-primary-rgb) / 0.1);
    color: var(--brand-primary);
}

.icon-round.primary-dark{
    background: rgb(var(--brand-primary-rgb) / 0.3);
    color: var(--brand-primary);
}

.icon-round.accent {
    background-color: rgb(var(--brand-accent-rgb) / 0.1);
    color: var(--brand-accent);
}

.icon-round.info{
    background-color: #40a7ed;
    color: #fff;
}

.icon-round.muted{
    background-color: rgb(217 217 217 / 30%);
    color: rgb(108 117 125);
}

.icon-round.s {
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
}

.icon-round.sm {
    width: 3rem;
    min-width: 3rem;
    height: 3rem;
    font-size: 1rem;
}

.icon-round.md {
    width: 4rem;
    min-width: 4rem;
    height: 4rem;
    font-size: 1.5rem;
}

.icon-round.lg {
    width: 5rem;
    min-width: 5rem;
    height: 5rem;
    font-size: 2rem;
}
.icon-round.xl {
    width: 7rem;
    min-width: 7rem;
    height: 7rem;
    font-size: 3rem;
}
.icon-round.xxl {
    width: 10rem;
    height: 10rem;
    font-size: 4rem;
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
}

@keyframes pulse {
    50% {
        opacity: .5
    }
}

.user-menu-popup{
    padding-top: .5rem;
    padding-bottom: .5rem;
    color: #0b411d;
    width: 327px;
    border-radius: 12px;
    border-color: rgb(224, 235, 228);
    box-shadow: 0 0 #0000, 0 0 #0000, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
}

.user-menu-popup .dropdown-divider{
    --bs-dropdown-divider-bg: rgb(0 0 0 / 8%);
    --bs-dropdown-divider-margin-y: 0.2rem;
}

.notification-item{
    display: flex;
    gap: .5rem;
    padding: .75rem .5rem;
    border-radius: 8px;
    justify-content: space-between;
}
.notification-item:hover{
    background-color: var(--bs-gray-200);
}
.notification-item .icon-text-wrapper{
    display: flex;
    gap: .5rem;
}
.notification-item .fa-xmark{
    cursor: pointer;
    opacity: .3;
}
.notification-item .fa-xmark:hover{
    opacity: .8;
    color: var(--bs-danger);
}


.notification-item .notification-header{
    font-weight: 500;
    font-size: .875rem;
    line-height: 1.25rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin:0;
}
.notification-item .notification-text{
    font-size: .75rem;
    line-height: 1rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin:0;
    color: #677e6f;
}
.notification-item .notification-time{
    font-size: .75rem;
    line-height: 1rem;
    margin-top: .25rem;
    color: #677e6f;
    font-family: var(--bs-font-monospace);
}

.text-primary {
    color: var(--brand-primary) !important;
}

.text-accent {
    color: var(--brand-accent) !important;
}

.flex-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/* Reset default styles */
.form-range {
    appearance: none;
    width: 100%;

    border-radius: 5px;
    transition: background 0.2s ease;
}

.form-range::-webkit-slider-runnable-track {
    background: linear-gradient(
            to right,
            var(--brand-primary) 0%,
            var(--brand-primary) var(--value-percent, 0%),
            #dee2e6 var(--value-percent, 0%),
            #dee2e6 100%
    );
}

/* Remove default focus glow */
.form-range:focus {
    outline: none;
}

/* Customize the thumb */
.form-range::-webkit-slider-thumb {
    appearance: none;
    width: 25px;
    height: 25px;
    transform: translateY(-5px);
    background-color: var(--bs-white);
    border: 2px solid var(--brand-primary);
    cursor: pointer;
    transition: background 0.2s;
}

.form-range::-webkit-slider-thumb:hover {
    background-color: #3f8a34;
}

/* For Firefox */
.form-range::-moz-range-thumb {
    width: 25px;
    height: 25px;
    transform: translateY(-5px);
    background-color: var(--bs-white);
    border: 2px solid var(--brand-primary);
    cursor: pointer;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.form-check-input:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.form-check-input:active, .form-check-input:focus {
    box-shadow: 0 0 0 .25rem var(--primary-shadow-color);
}

.black-and-white{
    filter: grayscale(100%);
}

.fs-7{
    font-size: 0.875rem;
}
.fs-8{
    font-size: 0.75rem;
}
.fs-9{
    font-size: 0.625rem;
}
.fs-10{
    font-size: 0.5rem;
}
.fs-11{
    font-size: 0.375rem;
}

.btn {
    border-radius: 10px;
}

.btn i,
.btn span,
button span{
  pointer-events: none;
}

#startCharging, #pauseCharging, #stopCharging {
    padding-top: 20px;
    padding-bottom: 20px
}

.btn-outline-accent {
    /*--bs-btn-color: var(--brand-accent);*/
    --bs-btn-bg: var(--bs-white);
    --bs-btn-border-color: #e0ebe4;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-accent);
    --bs-btn-hover-border-color: var(--brand-accent);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-accent);
    --bs-btn-active-border-color: var(--brand-accent);
    --bs-btn-active-shadow: inset 0 3px 5px var(--brand-accent);
}

.btn-transparent {
    --bs-btn-color: #fff;
    --bs-btn-bg: rgba(255, 255, 255, 0);
    --bs-btn-border-color: rgba(255, 255, 255, 0);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.2);
    --bs-btn-hover-border-color: rgba(255, 255, 255, 0);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(255, 255, 255, 0.2);
    --bs-btn-active-border-color: rgba(255, 255, 255, 0);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(255, 255, 255, 0);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: rgba(255, 255, 255, 0);
    --bs-btn-disabled-border-color: rgba(255, 255, 255, 0);
}

.btn-transparent-accent{
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: rgba(255, 255, 255, 0);
    --bs-btn-border-color: rgba(255, 255, 255, 0);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-accent);
    --bs-btn-hover-border-color: var(--brand-accent);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-accent);
    --bs-btn-active-border-color: var(--brand-accent);
}

.btn-brand-primary {
    /*--bs-btn-padding-x: 2rem;
    --bs-btn-border-radius: calc(.75rem - 2px);
    --bs-btn-padding-y: 0.7rem;
    --bs-btn-font-weight: 500;*/

    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-primary-hover);
    --bs-btn-hover-border-color: var(--brand-primary-hover);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-primary-hover);
    --bs-btn-active-border-color: var(--brand-primary-hover);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(255, 255, 255, 0);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--brand-primary);
    --bs-btn-disabled-border-color: var(--brand-primary);
}

.form-control:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: var(--brand-primary);
    outline: 0;
    box-shadow: 0 0 0 .25rem var(--primary-shadow-color);
}
.form-select:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: var(--brand-primary);
    outline: 0;
    box-shadow: 0 0 0 .25rem var(--primary-shadow-color);
}
.form-select>option:checked {
    background-color: var(--brand-primary-03);
}

/* auth related styles */
.auth-card {
    background-color: var(--bs-white);
    border-width: 1px;
    padding: 2rem;
    border-radius: .75rem;
    max-width: 28rem;
    width: 100%;
    box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 1px 2px 0 var(--brand-primary);
}

.auth-card label {
    font-weight: 500;
}

.nav-link:focus, .nav-link:hover {
    color: var(--brand-primary);
}

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

.nav-underline .nav-link.active, .nav-underline .show>.nav-link {
    font-weight: 700;
    color: var(--brand-primary);
    border-bottom-color: currentcolor;
}