:root {
    --text: #fff !important;
    --text-variant: #000 !important;
    --primary-lighter: #0080a9 !important;
    --primary: #125780 !important;
    --primary-darker: #00556d !important;
    --secondary-lighter: #ffffff !important;
    --secondary: #ecebec !important;
    --secondary-darker: #00a0ac !important;

    --error-lighter: #ce392e !important;
    --error: #bd5d57 !important;
    --error-darker: #9a2a22 !important;
    --success-lighter: #3cb95c !important;
    --success: #62bd7a !important;
    --success-darker: #29803f !important;

    --background: white !important;
}

.color-pr-lt {
    background-color: var(--primary-lighter);
}

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 10px;
}

::-webkit-scrollbar-track {
    background: #dedede;
}

.ckt-header-userinfo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.content {
    width: 100%;
    height: 100%;
    padding-left: 3vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

input[type="checkbox"] {
    accent-color: var(--secondary-darker);
}

.flex {
    display: flex;
}

.flex.column {
    flex-direction: column;
}

.flex.center {
    align-items: center;
    justify-content: center;
}

.flex.column.center {
    align-items: center;
    justify-content: center;
}
.row_between {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.row_around {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.disabled {
    visibility: hidden;
}

ckt-sidebar::part(root) {
    position: unset;
    height: 100%;
}

ckt-sidebar::part(menu) {
    width: 18rem;
    max-width: 18rem;
    overflow-y: auto;
}

ckt-sidebar::part(toggle) {
    width: 0;
}

@keyframes alert-dot-breathing {
    from {
        background-color: var(--error-lighter);
    }
    to {
        background-color: var(--error-darker);
    }
}

ckt-sidebar .alert-dot {
    border-radius: 10px;
    width: 15px;
    height: 15px;
    margin: 0.25rem;
    background-color: var(--error-lighter);
    position: absolute;
    top: 0;
    right: 0;
    animation: 1s infinite alternate ease-in-out alert-dot-breathing;
}