@import url("admin-new-utils.css");

:root {
	--general-bg: #fff;
	--general-darker-bg: #f1f1f1;
	--nav-bg: var(--general-bg);
	--main-color: #377dff;
	--features-accent: #671cff;
	--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);
	--input-color: #1e2022;
	--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;
}
@media (max-width: 1024px) {
	:root {
		--sidebar-width-collapsed: 60px;
	}
}
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;
}
@media (max-width: 1024px) {
	.content {
		padding: calc(10px + var(--topbar-height)) 10px 10px 10px;
	}
}
.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 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;
}
@media (max-width: 768px) {
	.topbar_title {
		display: none;
	}
}
.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;
	margin-left: auto;
}
.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;
}
@media (max-width: 1024px) {
    aside .logo {
		margin-left: 5px;
	}
}
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);
}
@media (max-width: 1024px) {
	.collapse-sidebar-button {
		left: -10px;
	}
}
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;
}
@media (max-width: 1024px) {
	aside .menu_container {
		padding: 10px 5px 20px 5px;
	}	
}
aside .menu_container::-webkit-scrollbar-thumb {
	background-color: var(--scroll-bar-bg);
}
aside .menu_container::-webkit-scrollbar {
	width: 8px;
}
@media (max-width: 1024px) {
	aside .menu_container::-webkit-scrollbar {
		width: 4px;
	}
}
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);
}
@media (max-width: 1024px) {
	.window {
		padding: 10px;
	}	
}
.narrow-window {
	box-sizing: border-box;
	max-width: 840px;
	width: 100%;
}
.narrow-plus-window {
	box-sizing: border-box;
	min-width: min(840px, 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);
}
@media (max-width: 1024px) {
	.nav-pills li a  {
		padding: 16px 12px;
	}	
}
.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;
	box-sizing: border-box;
	display: inline-block;
	border-radius: 5px;
	padding: 9px 16px;  /* input padding -1px for visual border compensation */
	line-height: 1.5;

	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);

	padding: 10px 16px;
}
.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 {
	--btn-main-color: #969696;
	background-color: var(--btn-disabled-bg);
	color: var(--btn-disabled-color);
	border-color: var(--btn-disabled-border-color);
	opacity: 1;
	pointer-events: none;
}
.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.btn-mini {
	padding: 4px 8px;
	font-size: 13px;
}

.btn:has(i:only-child) {
	padding-inline: 12px;
}
.btn-mini:has(i:only-child) {
	font-size: 14px;
	min-width: 30px;
	min-height: 30px;
	width: 30px;
	height: 30px;
	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: 12px;
	margin-bottom: 6px;
	padding-left: 9px;
	font-weight: bold;
}
.label-border input:is([type="radio"],[type="checkbox"]) {
	margin-right: 6px;
	margin-left: 0;
}
label:has(input:is([type="radio"],[type="checkbox"])) {
	display: flex;
	gap: 5px;
	align-items: center;
	& * {
		margin: 0;
	}
}
:is(td,th) label {
	margin-bottom: 0;
}

/* 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);
	margin: 0;
}
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: 10px 16px;
	font-size: .875rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--input-color);
	background-color: #fff;
	background-clip: padding-box;
	border: 1px 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;
	margin: 0;
}
:is(input,textarea,select):is([readonly],[disabled]) {
	background: #f1f1f1;
}
select {
	display: block;
	width: 100%;
	padding: 10px 36px 10px 16px;
	-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;
	margin: 0;
}
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));
}
@media (max-width: 1024px) {
	.form-horizontal {
		.control-group {
			flex-direction: column;
			justify-content: start;
		}
		.control-label {
			flex: 0;
			width: 100%;
			justify-content: start;
			text-align: left;
			border-top: 1px solid var(--borders-strong-color);
			margin-bottom: 0;
            padding-top: 15px;
            font-weight: bold;
		}
		.controls {
			border: none;
    		padding-left: initial;
    		flex-direction: column;
            align-items: start;
		}
		.controls:only-child {
			margin-left: initial;
		}
	}
}
:is(.input-append,.input-prepend), .form-horizontal :is(.input-append,.input-prepend) {
	display: flex;
	margin: 0;
	width: 100%;
	position: relative;
}
.input-append :is(.add-on,.btn):last-child {
	z-index: 2;
	margin-left: -4px !important;
}
.input-prepend :is(.add-on,.btn):first-child {
	z-index: 2;
	margin-right: -4px !important;
}
:is(.input-append, .input-prepend) .add-on {
	height: auto;
	align-content: center;
}
:is(.input-append,.input-prepend) input:focus {
	z-index: 1;
}
table :is(.input-append,.input-prepend) {
	margin: 0;
}
.checkbox-scrolllist {
	padding: 10px;
	margin: 0;
}
.checkbox-scrolllist:has(table) {
	padding: 0;
}
.checkbox-scrolllist table {
	margin: 0;
}
.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: #8e8e8e;
	border-radius: 2em;
	transition: background-position .15s ease-in-out, background-color .15s ease-in-out;
	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;
}
.file-support-input-name {
	position: absolute;
	background-color: var(--general-bg);
	width: calc(100% - 36px);
	color: var(--input-color);
	font-size: 14px;
	left: 36px;
	top: 50%;
	transform: translateY(-50%);
	padding: 4px 16px;
	pointer-events: none;
	box-sizing: border-box;
}

/* 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;
}

/* Label and badges */
.label-success, .badge-success {
	background-color: #2b8c7b;
}
.label-primary, .badge-primary {
	background-color: #557ac2;
}
.label-danger, .badge-danger {
	background-color: #c24a4a;
}
.label-warning, .badge-warning {
	background-color: #d78e0d;
}
.label-info, .badge-info {
	background-color: #36acac;
}

/* 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;
}
date-time-picker input {
	margin-bottom: 0;
}

.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);
	}
}