:root {
    --general-bg: #fff;
    --general-darker-bg: #f1f1f1;
    --nav-bg: var(--general-bg);
    --main-color: #377dff;
    --base-text-color: rgb(19, 33, 68);
    --text-color-weaker: rgb(56 75 120);
    --base-text-active-color: var(--main-color);
    --borders-color: rgba(231, 234, 243, 0.7);
    --topbar-height: 53px;
    --sidebar-width: 260px;
    --sidebar-width-collapsed: 80px;
    --sidebar-collapse-transition: max-width 0.35s ease-in-out, width 0.35s ease-in-out, padding-left 0.35s ease-in-out;
    --font: Inter, sans-serif;
    --container-width: 100%;
    --nav-link-color: var(--base-text-color);
    --scroll-bar-bg: rgba(189,197,209,.6);
    --input-border-color: rgba(231,234,243,.7);
    --borders-strong-color: #eee;
    --checkbox-disabled-background: rgb(0 0 0 / 10%);
    --bg-hover-color: rgba(189,197,209,.2);

    --colors-primary: #377dff;
    --colors-secondary: #71869d;
    --colors-success: #00c9a7;
    --colors-danger: #ed4c78;
    --colors-warning: #fead51;
    --colors-info: #09a5be;
    --colors-dark: #132144;
}
body {
    font-family: var(--font);
    color: var(--base-text-color);
}
body:has(.container.narrow) {
    background: #e9e9e9;
}
a, a:hover, a:focus, a:active {
    text-decoration: none;
    color: #356bdd;
}
.container {
    --container-width: 100%;
    max-width: var(--container-width);
    width: 100%;
    box-sizing: border-box;
    background: var(--general-bg);
    transition: var(--sidebar-collapse-transition);
}
.container.narrow {
    box-shadow: 0px 0px 5px 0px #9b9b9b;
    margin: 0 auto;
}
@media (min-width: 1200px) {
    .container.narrow {
        --container-width: 1320px;
    }
}
@media (min-width: 1400px) {
    .container.narrow {
        --container-width: 1480px;
    }
}
@media (min-width: 2000px) {
    .container.narrow {
        --container-width: 1780px;
    }
}
.container.narrow .content {
    overflow-x: auto;
}
main {
    flex: 1 0 auto;
    padding-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    transition: var(--sidebar-collapse-transition);
}
.content {
    box-sizing: border-box;
    padding: calc(20px + var(--topbar-height)) 25px 20px 25px;
    min-height: 100vh;
}
.wrapper {
}
aside {
    border-right: 1px solid var(--borders-color);
    box-sizing: border-box;
    transition: var(--sidebar-collapse-transition);
    width: var(--sidebar-width);
    position: fixed;
    background-color: var(--nav-bg);
    z-index: 3;
}
aside.collapsed {
    width: var(--sidebar-width-collapsed);
}
aside.collapsed .menu a {
}
aside.collapsed .menu a span {
    display: none;
}
aside.collapsed .menu a i {
    flex: 0;
}
aside.collapsed ~ main {
    padding-left: var(--sidebar-width-collapsed);
    width: calc(100% - var(--sidebar-width-collapsed));
}
.menu {
    list-style: none;
    margin: 0;
    white-space: nowrap;
}
.menu a {
    text-decoration: none;
    color: var(--nav-link-color);
    border-radius: 0.5rem;
    padding: 10px;
    padding-left: 12px;
    display: flex;
    align-items: center;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
    margin-bottom: 2px;
}
.menu li a:hover, .menu li.active a {
    background-color: var(--bg-hover-color);
}
.menu li a:focus {
    color: var(--base-text-active-color);
}
.menu a i {
    flex: 0 0 31px;
    opacity: 0.7;
}
.topbar {
    width: 100%;
    max-width: calc(var(--container-width) - var(--sidebar-width));
    font-size: 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 5px 15px 5px 36px;
    border-bottom: 1px solid var(--borders-color);
    height: var(--topbar-height);
    box-sizing: border-box;
    position: fixed;
    background-color: var(--nav-bg);
    transition: var(--sidebar-collapse-transition);
    z-index: 3;
}
.topbar a {
    color: var(--base-text-color);
}
.topbar_title {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 14px;
    color: #4B5563;
}
.topbar .topbar_school_name {
    color: #4B5563;
}
.topbar_title i {
    color: #9CA3AF;
    font-size: 12px;
}
.topbar_title .topbar_page_title {
    font-weight: 600;
}
@media (max-width: 1024px) {
    .topbar_title :not(.topbar_page_title) {
        display: none;
    }
}
.topbar_buttons {
    display: flex;
    gap: 15px;
    margin-right: 10px;
}
.topbar_button {
    width: 42px;
    height: 42px;
    display: flex;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
}
.topbar_button:hover {
    background: rgba(55,125,255,.1);
    color: var(--base-text-active-color);
    border: transparent;
}
.dropdown-toggle::after {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='%23677788' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.72,15.78a.75.75,0,0,1-.53.22h-.38a.77.77,0,0,1-.53-.22L6.15,10.64a.5.5,0,0,1,0-.71l.71-.71a.49.49,0,0,1,.7,0L12,13.67l4.44-4.45a.5.5,0,0,1,.71,0l.7.71a.5.5,0,0,1,0,.71Z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 1rem 1rem;
    content: "";
    transition: .3s;
}
aside .logo {
    height: var(--topbar-height);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    margin: 0;
    margin-left: 15px;
    gap: 2px;
}
aside .logo img {
    height: 75% !important;
    max-width: initial !important;
}
aside.collapsed .logo {
}
aside.collapsed .logo .logo_text {
    display: none;
}
.collapse-sidebar-button {
    background: var(--nav-bg);
    position: absolute;
    left: -20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--borders-color);
}
aside.collapsed ~ main .topbar .collapse-sidebar-button:not(.open-button) {
    display: none;
}
aside:not(.collapsed) ~ main .topbar .collapse-sidebar-button.open-button {
    display: none;
}
aside.collapsed ~ main .topbar {
    width: 100%;
    max-width: calc(var(--container-width) - var(--sidebar-width-collapsed));
}
aside:not(.collapsed) .tooltip {
    display: none !important;
}
aside .menu_container {
    height: calc(100vh - var(--topbar-height));
    overflow-y: auto;
    box-sizing: border-box;
    padding: 20px 15px 30px 15px;
}
aside .menu_container::-webkit-scrollbar-thumb {
    background-color: var(--scroll-bar-bg);
}
aside .menu_container::-webkit-scrollbar {
    width: 8px;
}
aside .logo.d-none ~ .menu_container {
    height: 100vh;
}

/* Windows */
.window {
    border: 1px solid var(--borders-color);
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 0.375rem 0.75rem rgba(140,152,164,.075);
    background-color: var(--general-bg);
}
.narrow-window {
    max-width: 800px;
    width: 100%;
}
.narrow-plus-window {
    min-width: min(800px, 100%);
}
.nav-window {
    max-width: 250px;
    padding: 20px 0;
}
.content:has(.narrow-window,.narrow-plus-window) {
    background-color: #f9f9f9;
}
.content:has(.window) {
    display: flex;
    gap: 25px;
    align-items: center;
    flex-direction: column;
}
.content:has(.nav-window) {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
}
.nav-window .nav-pills {
    border-bottom: 0;
    margin: 0;
}
.nav-window .nav-pills li {
    width: 100%;
    float: none;
    white-space: nowrap;
}
.nav-window .nav-pills li a {
    padding: 14px 20px;
    border-bottom: 0;
    border-left: 3px solid transparent;
    color: var(--text-color-weaker);
}
.nav-window .nav-pills li.active a {
    border-color: var(--main-color);
}

/* Tabs */
.nav-pills {
    border-bottom: 1px solid var(--borders-color);
    display: flex;
    flex-wrap: wrap;
}
.nav-pills li a {
    margin: 0;
    border-radius: 0;
    padding: 20px 16px;
    border-bottom: 3px solid transparent;
    background-color: transparent;
    color: var(--base-text-color);
}
.nav-pills li a:hover {
    background-color: transparent;
    color: var(--base-text-color);
    border-color: var(--borders-color);

}
.nav-pills li a:focus {
    background-color: transparent;
    color: var(--base-text-active-color);
    border-color: var(--borders-color);
}
.nav-pills li.active a {
    border-color: var(--base-text-active-color);
    background-color: transparent;
    color: var(--base-text-active-color);
    font-weight: 600;
}
.nav-pills li.active a:hover {
    background-color: transparent;
    color: var(--base-text-active-color);
}
.nav-pills li.active a:focus {
    background-color: transparent;
    color: var(--base-text-active-color);
}

/* Buttons */
.btn {
    --btn-bg: var(--btn-main-color);
    --btn-border-color: var(--btn-main-color);
    --btn-hover-color: var(--btn-color);
    --btn-active-bg: var(--btn-main-color);
    --btn-active-border-color: var(--btn-main-color);
    --btn-active-color: var(--btn-color);
    --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --btn-disabled-color: var(--btn-main-color);
    --btn-disabled-bg: transparent;
    --btn-disabled-border-color: var(--btn-main-color);
    --btn-hover-shadow-rgb: var(--btn-focus-shadow-rgb);

    background-color: var(--btn-bg);
    border-color: var(--btn-border-color);
    background-image: none;
    text-shadow: none;
    color: var(--btn-color);
    box-shadow: none;
    display: inline-block;
    border-radius: 5px;
    padding: 8px 12px;

    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;

    text-wrap: nowrap;
}
.btn:not(:is(.btn-primary,.btn-secondary,.btn-success,.btn-danger,.btn-warning,.btn-info,.btn-dark)),.btn-light,.btn-default {
    --btn-color: #000;
    --btn-main-color: #f9fafc;

    --btn-hover-bg: #d4d5d6;
    --btn-hover-border-color: #c7c8ca;
    --btn-focus-shadow-rgb: 212,213,214;
    --btn-active-bg: #c7c8ca;
    --btn-active-border-color: #bbbcbd;

    --btn-border-color: var(--btn-hover-bg);
}
.btn:hover {
    background-color: var(--btn-hover-bg);
    color: var(--btn-hover-color);
    border-color: var(--btn-hover-border-color);
    box-shadow: 0 4px 11px rgba(var(--btn-hover-shadow-rgb), .35);
}
.btn:active, .btn:focus {
    background-color: var(--btn-active-bg);
    color: var(--btn-active-color);
    border-color: var(--btn-active-border-color);
    box-shadow: 0 4px 11px rgba(var(--btn-focus-shadow-rgb), .35);
    outline: none;
}
.btn:disabled, .btn.disabled {
    background-color: var(--btn-disabled-bg);
    color: var(--btn-disabled-color);
    border-color: var(--btn-disabled-border-color);
    opacity: 1;
}
.btn-primary {
    --btn-color: #fff;
    --btn-main-color: var(--colors-primary);

    --btn-hover-bg: #2f6ad9;
    --btn-hover-border-color: #2c64cc;
    --btn-focus-shadow-rgb: 85,145,255;
    --btn-active-bg: #2c64cc;
    --btn-active-border-color: #295ebf;
}
.btn-secondary {
    --btn-color: #fff;
    --btn-main-color: var(--colors-secondary);

    --btn-hover-bg: #607285;
    --btn-hover-border-color: #5a6b7e;
    --bs-btn-focus-shadow-rgb: 134,152,172;
    --btn-active-bg: #5a6b7e;
    --btn-active-border-color: #556576;
}
.btn-success {
    --btn-color: #fff;
    --btn-main-color: var(--colors-success);

    --btn-hover-bg: #00ab8e;
    --btn-hover-border-color: #00a186;
    --btn-focus-shadow-rgb: 38,209,180;
    --btn-active-bg: #00a186;
    --btn-active-border-color: #00977d;
}
.btn-danger {
    --btn-color: #fff;
    --btn-main-color: var(--colors-danger);

    --btn-hover-bg: #c94166;
    --btn-hover-border-color: #be3d60;
    --btn-focus-shadow-rgb: 240,103,140;
    --btn-active-bg: #be3d60;
    --btn-active-border-color: #b2395a;
}
.btn-warning {
    --btn-color: #fff;
    --btn-main-color: var(--colors-warning);

    --btn-hover-bg: #e79d48;
    --btn-hover-border-color: #d58e3d;
    --btn-focus-shadow-rgb: 254,173,81;
    --btn-active-bg: #d58e3d;
    --btn-active-border-color: #d58e3d;
}
.btn-info {
    --btn-color: #fff;
    --btn-main-color: var(--colors-info);
    
    --btn-hover-bg: #088ca2;
    --btn-hover-border-color: #078498;
    --btn-focus-shadow-rgb: 46,179,200;
    --btn-active-bg: #078498;
    --btn-active-border-color: #077c8f;
}
.btn-dark {
    --btn-color: #fff;
    --btn-main-color: var(--colors-dark);
    --btn-focus-shadow-rgb: 19,33,68;

    --btn-hover-bg: #364260;
    --btn-hover-border-color: #2b3757;
    --btn-focus-shadow-rgb: 54,66,96;
    --btn-active-bg: #424d69;
    --btn-active-border-color: #2b3757;
}
.btn-outline {
    --btn-bg: transparent;
    --btn-color: var(--btn-main-color);
    --btn-hover-bg: var(--btn-main-color);
    --btn-hover-border-color: var(--btn-main-color);
}
.btn-outline.btn-default {
    --btn-focus-shadow-rgb: 113,134,157;
}

.btn-mini {
    padding: 4px 8px;
    font-size: 13px;
}

.btn-mini:has(i:only-child) {
    font-size: 14px;
    min-width: 28px;
    min-height: 28px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Tables */
.table {
    border: 0;
    white-space: nowrap;
    margin-top: 4px;
}
.table :is(thead,tfoot) {
    background: var(--general-bg);
}
.table :is(thead,tfoot) :is(th, td) {
    border: 0px solid var(--borders-strong-color) !important;
    border-top-width: 1px !important;
    border-bottom-width: 1px !important;
    color: #6B7280;
    border-radius: 0 !important;
}
.table :is(th, td) {
    vertical-align: middle;
    border: 0;
    padding: 15px;
}
.table tbody :is(th, td) {
    background: var(--general-bg);
    border: 0px solid var(--borders-color);
    border-bottom-width: 1px;
}
:is(td,th):has(.btn) {
    padding: 10px 8px;
}
.table :is(thead,tfoot) th {
    vertical-align: middle;
}
.table.table-bordered-cells {
    border-collapse: collapse;
}
.table.table-bordered-cells :is(thead,tbody,tfoot) :is(th, td) {
    border-width: 1px !important;
    border-color: var(--borders-color) !important;
}
.table.table-bordered-cells :is(thead) :is(th, td) {
    border-bottom-width: 3px !important;
}

table.sticky-header thead {
    position: sticky;
    z-index: 2;
    top: var(--topbar-height);
}
table.sticky-header thead th {
    border-bottom: 1px solid #dddddd;
}
table.sticky-header tbody tr:first-child :is(th, td) {
    border-top: 0;
}
.table-wrapper {
    max-width: 100%;
    overflow-x: auto;
}
tr.account-blocked {
    background: none !important;
}
tr.account-blocked :is(td, th) {
    background-color: var(--borders-color);
}
th:has(button[data-table-settings-button]) {
    text-align: right;
}

/* Labels */
.label-border {
    border-color: #397cff;
    line-height: 25px;
    margin-top: 8px;
    margin-bottom: 6px;
    padding-left: 9px;
    font-weight: bold;
}
.label-border input:is([type="radio"],[type="checkbox"]) {
    margin-right: 6px;
}

/* Tooltips */
[data-toggle="tooltip"]>i:is(.bi-exclamation-circle-fill,.bi-info-circle-fill,.bi-question-circle-fill) {
    color: #bcc6db;
}

/* Inputs */
input, button, select, textarea {
    font-family: var(--font);
}
input:is([type="radio"],[type="checkbox"]) {
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
    margin-top: 4px;
    margin-left: 4px;
    vertical-align: top;
    background-color: var(--general-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid #cccccc;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
    print-color-adjust: exact;
}
:is(input, button, select, textarea):focus {
    box-shadow: none !important;
}
input[type="radio"] {
    border-radius: 50%;
}
input[type="checkbox"] {
    border-radius: 4px;
}
input:is([type="radio"],[type="checkbox"]):is(:focus,:focus-visible) {
    outline: none;
}
input:is([type="radio"],[type="checkbox"])[disabled] {
    opacity: 0.5;
    background: var(--checkbox-disabled-background);
}
input:is([type="radio"],[type="checkbox"]):checked {
    background-color: var(--main-color);
    border-color: var(--main-color);
}
input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")
}
input:is([type="text"],[type="login"],[type="tel"],[type="email"],[type="password"],[type="number"],[type="color"],[type="search"]),textarea {
    display: block;
    width: 100%;
    padding: 0.6125rem 1rem;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #1e2022;
    background-color: #fff;
    background-clip: padding-box;
    border: 0.0625rem solid var(--input-border-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.3125rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    box-sizing: border-box;
    height: auto;
}
:is(input,textarea,select):is([readonly],[disabled]) {
    background: #f1f1f1;
}
select {
    display: block;
    width: 100%;
    padding: 0.6125rem 2.25rem 0.6125rem 1rem;
    -moz-padding-start: calc(1rem - 3px);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #677788;
    border: 0.0625rem solid var(--input-border-color);
    border-radius: 0.3125rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: auto;
    background-color: #fff;
}
select:not([multiple]) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2371869d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 13px 9px;
}
.form-horizontal .control-group, .control-group.form-horizontal  {
    display: flex;
    --control-group-gap: 10px;
    --control-label-width: 200px;
    gap: var(--control-group-gap);
}
.form-horizontal .control-group:before, .form-horizontal .control-group:after {
    display: none;
}
.form-horizontal .control-label {
    display: flex;
    width: var(--control-label-width);
    justify-content: flex-end;
    gap: 5px;
    align-items: center;
    color: var(--text-color-weaker);
    flex: 0 0 var(--control-label-width);
}
.form-horizontal .controls {
    margin: 0;
    flex-grow: 1;
}
.form-horizontal .controls:only-child {
    margin-left: calc(var(--control-group-gap) + var(--control-label-width));
}
:is(.input-append,.input-prepend), .form-horizontal :is(.input-append,.input-prepend){
    display: flex;
}
.input-fullwidth, .:is(.input-append,.input-prepend) .input-fullwidth {
    width: 100%;
}
.input-append :is(.add-on,.btn):last-child {
    z-index: 1;
    margin-left: -4px;
}
.input-prepend :is(.add-on,.btn):first-child {
    z-index: 1;
    margin-right: -4px;
}
:is(.input-append,.input-prepend) input:focus {
    z-index: 1;
}
table :is(.input-append,.input-prepend) {
    margin: 0;
}
.checkbox-scrolllist {
    padding: 10px 5px;
    margin: 0;
}
.checkbox-scrolllist:has(table) {
    padding: 0;
}
.checkbox-scrolllist table {
    margin: 0;
}
.checkbox-scrolllist input[type="checkbox"] {
    margin: 2px 5px;
}
.form-inline {
    display: flex;
    gap: 10px;
    width: 800px;
    max-width: 100%;
    align-items: center;
}

.input-switch-group {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px;
    border-radius: 8px;
    margin: 0;
    white-space: nowrap;
}
.input-switch-group:hover {
    background: rgba(55,125,255,.1);
    border: transparent;
}
.input-switch-group:hover i {
    color: var(--main-color);
}
input[type="checkbox"].input-switch {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    width: 45px;
    height: 29px;
    border-width: 0;
    margin: 0;
    background-color: var(--borders-color);
    border-radius: 2em;
    transition: background-position .15s ease-in-out;
    border-color: var(--main-color);
    background-position: left center;
    flex: 0 0 auto;
    background-repeat: no-repeat;
}
input[type="checkbox"].input-switch.input-switch-small {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.7' fill='%23fff'/%3e%3c/svg%3e");
    width: 30px;
    height: 20px;
}
input[type="checkbox"].input-switch:checked {
    background-color: var(--main-color);
    background-position: right center;
}

:is(select,textarea,input).input-xmini {
    width: 54px;
}
:is(select,textarea,input).input-xmini[type="number"] {
    width: 70px;
}
:is(select,textarea,input).input-mini {
    width: 90px;
}
:is(select,textarea,input).input-small {
    width: 120px;
}
:is(select,textarea,input).input-medium {
    width: 200px;
}

.trigger_data, .action_checkbox_data {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
}
:is(.trigger_datam.action_checkbox_data) input {
    margin: 0;
}
textarea {
    resize: vertical;
}

/* Alerts */
.alert {
    border-color: transparent;
    text-shadow: none;
}
.alert-info {
    background-color: rgba(55,125,255,.15);
    color: #4f8dff;
}
.alert-warning {
    background-color: rgb(245 202 153 / 35%);
    color: #b78750;
}
.alert-error, .alert-danger {
    background-color: rgba(237,76,120,.25);
    color: #b92a51;
}
.alert-success {
    background-color: rgb(0 201 167 / 15%);
    color: #006e5c;
}

/* Panel settings */
.panel-settings {
    display: none;
    gap: 10px;
    position: absolute;
    border: 1px solid var(--borders-color);
    background: white;
    right: 0;
    top: 40px;
    padding: 15px;
    flex-direction: column;
    align-items: flex-end;
    border-radius: 5px;
}

/* Table settings */
[data-table-settings-button] {
    position: relative;
}
.table-settings {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 0;
    top: 100%;
    gap: 5px;
    padding: 15px;
    background: var(--general-bg);
    border: 1px solid var(--borders-strong-color);
    z-index: 2;
}
.table-settings .column {
    display: grid;
    grid-template-columns: 1fr repeat(3, 20px) repeat(2, 16px);
    text-align: left;
    gap: 10px;
}
.table-settings .column input {
    margin: 0;
}
.table-settings .bi-arrows-collapse::before {
    transform:rotate(90deg);
}
.table-settings :is(.move-up, .move-down) {
    margin-top: -1px;
    color: var(--base-text-color);
    font-size: 16px;
}
.table-settings :is(.move-up, .move-down):hover {
    opacity: 0.7;
}

/* Utility */
.d-flex {
    display: flex;
}
.d-none {
    display: none !important; 
}
.gap-5 {
    gap: 5px;
}
.gap-10 {
    gap: 10px;
}
.ai-center {
    align-items: center;
} 
.jc-sb {
    justify-content: space-between;
}
.children-margin-0 * {
    margin: 0 !important;
}
.w-full {
    width: 100% !important;
}
.w-auto {
    width: auto !important;
}
.d-flex-classic {
    align-items: center;
    display: flex;
    gap: 10px;
}
.d-flex-classic * {
    margin: 0 !important;
}
.p-10 {
    padding: 10px;
}
.p-l-10 {
    padding-left: 10px;
}
.p-r-10 {
    padding-right: 10px;
}
.p-t-10 {
    padding-top: 10px;
}
.p-b-10 {
    padding-bottom: 10px;
}
.m-10 {
    margin: 10px;
}
.m-l-10 {
    margin-left: 10px;
}
.m-r-10 {
    margin-right: 10px;
}
.m-t-10 {
    margin-top: 10px;
}
.m-b-10 {
    margin-bottom: 10px;
}

/* Other */
.checkbox-scrolllist {
    border-color: var(--borders-color);
}
:is(h1,h2,h3,h4,h5,h6) {
    color: var(--text-color-weaker);
}
small.success-text {
    color: green;
}
small.error-text {
    color: #b94c4c;
}
.collapse {
    overflow: auto;
    overflow-y: hidden;
}

.modal .modal-footer form {
    margin: 0;
}

.tab-content {
    overflow-y: initial;
    overflow-x: auto;
}

.loader {
    --size: 48px;
    width: var(--size);
    height: var(--size);
    border: 5px solid rgb(19, 33, 68);
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: loader_rotation 1s linear infinite;
    margin: 100px calc(50% - var(--size) / 2);
}
.loader.absolute {
    animation: loader_rotation 1s linear infinite;
    position: absolute;
    top: calc(min(100px, 50%) - var(--size) / 2);
    left: calc(50% - var(--size) / 2);
    margin: 0;
}
body.theme-dark .loader {
    border-color: #FFF;
    border-bottom-color: transparent;
}
@keyframes loader_rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}