
:root {
	/* ==== INTERFACE ==== */

	--clr-body: #F8F9FA;
	--clr-bg-nav: #0F2E6B;

	--clr-text-menu: #FFFFFF;

	--clr-main: #3B73E3;
	--clr-main-dark: #1C54C4;

	--clr-good: #00CC66;
	--clr-good-dark: #00A352;
	
	--clr-info: #F6AE2D;
	--clr-info-dark: #F5A614;

	--clr-warning: #F57C00;
	--clr-warning-dark: #d66b00;
	
	--clr-alert: #F40000;
	--clr-alert-dark: #CC0000;

	--clr-switch: #00CC66;
	--clr-switch-dark: #00A352;

	--clr-lightgray: #FAFAFA;
	--clr-border: #D3D3D3;

	/* ==== BUTTONS ==== */

	--clr-btn-primary: #3B73E3;
	--clr-btn-primary-border: #3B73E3;
	--clr-btn-primary-text: #FFFFFF;
	
	--clr-btn-primary-dark: #1C54C4;
	--clr-btn-primary-border-dark: #1C54C4;
	--clr-btn-primary-text-dark: #FFFFFF;

	--clr-btn-secondary: #FFFFFF;
	--clr-btn-secondary-border: #3B73E3;
	--clr-btn-secondary-text: #3B73E3;
	
	--clr-btn-secondary-dark: #1C54C4;
	--clr-btn-secondary-border-dark: #1C54C4;
	--clr-btn-secondary-text-dark: #FFFFFF;

	/* ==== TEXT ==== */

	--clr-text-clear: #FFFFFF;
	--clr-text-accent: #2060df;

	--fc-today-bg-color: rgba(201,25,121,.07);

	/* ==== GRAY ==== */

	--bs-gray-100: #f8f9fa;
	--bs-gray-200: #e9ecef;
	--bs-gray-300: #dee2e6;
	--bs-gray-400: #ced4da;
	--bs-gray-500: #adb5bd;
	--bs-gray-600: #6c757d;
	--bs-gray-700: #495057;
	--bs-gray-800: #343a40;
	--bs-gray-900: #212529;

	/* ==== INPUTS ==== */

	--clr-switch: #00CC66;
	--clr-radio: #3B73E3;

	/* ==== SHADOWS ==== */

	/* --dflt-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; */
	--dflt-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
}

/* ===================================================== */
/* ==================== SCROLLBAR ====================== */
/* ===================================================== */

::-webkit-scrollbar {
	height: 10px;
	width: 10px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece:start,
::-webkit-scrollbar-track-piece:end {
	background: var(--bs-gray-100) !important;
}

::-webkit-scrollbar-thumb {
	background-color: var(--bs-gray-300);
	border-radius: 16px;
	border: 2px solid var(--bs-gray-100);
}

::-webkit-scrollbar-thumb:hover {
	background-color: var(--bs-gray-400);
}

/* ===================================================== */
/* ======================== FORM ======================= */
/* ===================================================== */

.form-container {
	display: flex;
	flex-direction: column;
	row-gap: 8px;
}

/* ===================================================== */
/* ===================== BOOTSTRAP ===================== */
/* ===================================================== */

.dropdown-menu {
	max-height: 70vh;

	border-radius: 8px;
	border: none;
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;

	overflow: auto;
}

.dropdown-menu-title {
	width: 100%;
	padding: 5px 20px;
	
	display: flex;
	align-items: center;
	
	background: var(--clr-main);
}

.dropdown-menu-title:nth-child(1) {
	margin-top: -5px;
}

.dropdown-menu-title > span {
	display: flex;
	align-items: center;
	column-gap: 5px;
	
	font-size: 1.4rem;
	font-weight: 600;
	
	color: #FFFFFF;
}

/* ===================================================== */
/* =================== FULLCALENDAR ==================== */
/* ===================================================== */

.fc {
	padding: 0 !important;
}

.fc-timegrid-event, .fc-timegrid-more-link {
	border-radius: 8px;
	overflow: hidden;
}

/* ===================================================== */
/* ==================== SMALL SWITCH =================== */
/* ===================================================== */

.radio-button {
	position: relative;
	height: 32px;
	width: 100%;
	/* padding: 8px; */

	display: flex;
	align-items: center;
	justify-content: center;
	
	border-radius: 8px;
	background: #dfe1e4;

	transition: background 100ms;
}

.radio-button:has(input[type="radio"]:disabled),
.radio-button:has(input[type="checkbox"]:disabled) {
	background: #c9cbcd;
	cursor: not-allowed;

	transition: background 100ms;
}

.radio-button:has(input[type="radio"]:checked),
.radio-button:has(input[type="checkbox"]:checked) {
	background: var(--clr-switch);

	transition: background 100ms;
}

.radio-button > label {
	position: absolute;
	margin: 0;
	height: fit-content;
	width: fit-content;
	pointer-events: none;

	color: #000000;

	transition: color 100ms;
}

.radio-button:has(input[type="radio"]:checked) > label,
.radio-button:has(input[type="checkbox"]:checked) > label {
	color: #FFFFFF;

	transition: color 100ms;
}

.radio-button > input[type="radio"],
.radio-button > input[type="checkbox"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	height: 100%;
	margin: 0;
	background: transparent !important;
}

/* ===================================================== */
/* ==================== SMALL SWITCH =================== */
/* ===================================================== */

.checkbox-wrapper-2 {
	display: flex;
	justify-content: center;
}

.checkbox-wrapper-2 .ikxBAC {
	appearance: none;
	background-color: #dfe1e4;
	border-radius: 72px;
	border-style: none;
	flex-shrink: 0;
	height: 20px !important;
	margin: 0;
	position: relative;
	width: 30px;
}

.checkbox-wrapper-2 .ikxBAC::before {
	bottom: -6px;
	content: "";
	left: -6px;
	position: absolute;
	right: -6px;
	top: -6px;
}

.checkbox-wrapper-2 .ikxBAC,
.checkbox-wrapper-2 .ikxBAC::after {
	transition: all 100ms ease-out;
}

.checkbox-wrapper-2 .ikxBAC::after {
	background-color: #fff;
	border-radius: 50%;
	content: "";
	height: 14px;
	left: 3px;
	position: absolute;
	top: 3px;
	width: 14px;
}

.checkbox-wrapper-2 input[type=checkbox] {
	cursor: default;
}

.checkbox-wrapper-2 .ikxBAC:hover {
	background-color: #c9cbcd;
	transition-duration: 0s;
}

.checkbox-wrapper-2 .ikxBAC:checked {
	/* background-color: #6e79d6; */
	background-color: var(--clr-switch);
}

.checkbox-wrapper-2 .ikxBAC:checked::after {
	background-color: #fff;
	left: 13px;
}

.checkbox-wrapper-2 :focus:not(.focus-visible) {
	outline: 0;
}

.checkbox-wrapper-2 .ikxBAC:checked:hover {
	/* background-color: #535db3; */
	background-color: var(--clr-switch-dark);
}

/* ===================================================== */
/* ====================== HELPERS ====================== */
/* ===================================================== */

.flex-row {
	display: flex;
}

.flex-col {
	display: flex;
	flex-direction: column;
}

.row-gap {
	row-gap: 8px;
}

.col-gap {
	column-gap: 8px;
}

.margin-right {
	margin-right: 8px;
}

.margin-left {
	margin-left: 8px;
}

.padding-left {
	padding-left: 8px;
}

.clr-green {
	background-color: var(--clr-switch) !important;
	border-color: var(--clr-switch) !important;
}

.clr-warning {
	background-color: var(--clr-warning) !important;
	border-color: var(--clr-warning) !important;
}

.no-wrap {
	flex-wrap: nowrap !important;
}

.align-items-center {
	align-items: center;
}

.no-margin {
	margin: 0;
}

.column-gap-small {
	column-gap: 8px;
}