/**************** Font Faces *********************/
@font-face { font-family: 'KarlaBold'; src: url('/fonts/Karla-Bold.ttf'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'KarlaLight'; src: url('/fonts/Karla-Light.ttf'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'KarlaRegular'; src: url('/fonts/Karla-Regular.ttf'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Yanone Kaffeesatz'; src: url('/fonts/YanoneKaffeesatz-Bold.ttf'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Yanone Kaffeesatz'; src: url('/fonts/YanoneKaffeesatz-ExtraLight.ttf'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Yanone Kaffeesatz'; src: url('/fonts/YanoneKaffeesatz-Regular.ttf'); font-weight: 400; font-style: normal; font-display: swap; }

/**************** Font Families *********************/
h1 { font-family: 'Yanone Kaffeesatz' !important;  }
h2, li a, th, .dialog-bold-text { font-family: 'KarlaBold' !important; }
h3, h4, label, input, button, span, p, a, li, td { font-family: 'KarlaRegular' !important; }

.logo-header { font-size: 22px; }
.border-b-2 { border-bottom-style: 'solid' !important; border-bottom-width: 1px !important;}
/* Spinner */
.loader {width: 50px;padding: 8px;aspect-ratio: 1;border-radius: 50%;background: #92c11b;--_m:conic-gradient(#0000 10%, #000),linear-gradient(#000 0 0) content-box;-webkit-mask: var(--_m);mask: var(--_m);-webkit-mask-composite: source-out;mask-composite: subtract;animation: l3 1s infinite linear;}
.loader-2 {width: 25px;padding:4px;aspect-ratio: 1;border-radius: 50%;background: #fff;--_m:conic-gradient(#0000 10%, #000),linear-gradient(#000 0 0) content-box;-webkit-mask: var(--_m);mask: var(--_m);-webkit-mask-composite: source-out;mask-composite: subtract;animation: l3 1s infinite linear;}
@keyframes l3 {to { transform: rotate(1turn); }}

.active-group {
    background-color: #92c11b;
    color: #fff;
    &:hover {
        background-color: #7ca315;
    }
}

.inactive-group {
    background-color: #fff;
    color: #000;
    &:hover {
        background-color: #ddd;
    }
}