:root {
	--clr-main: #C91979;
	--clr-main-dark: #9b0053;
	--clr-good: #7CB518;
	--clr-good-dark: #669614;
	--clr-switch: #8FE388;
	--clr-switch-dark: #58BC82;
	--clr-warning: #F57C00;
	--clr-warning-dark: #d66b00;

	--clr-lightgray: #FAFAFA;
	--clr-border: #D3D3D3;

	--clr-text-clear: #FFFFFF;

	--fc-today-bg-color: rgba(201,25,121,.07);

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

/* ===================================================== */
/* ==================== SCROLLBAR ====================== */
/* ===================================================== */

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

::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece:start,
::-webkit-scrollbar-track-piece:end {
	background: transparent url('../img/scrollbar.png') repeat-y !important;
}

::-webkit-scrollbar-thumb {
	background-color: var(--clr-main);
	border-radius: 16px;
	border: 2px solid #FFFFFF;
}

::-webkit-scrollbar-thumb:hover {
	background-color: var(--clr-main-dark);
}

/* ===================================================== */
/* ======================== FORM ======================= */
/* ===================================================== */

.form-container {
	display: flex;
	flex-direction: column;
	row-gap: 8px;
}

.form-row {
	display: flex;
	align-items: center;
	column-gap: 8px;
}

.form-row > label {
	flex-shrink: 0;
	min-width: 25%;
	margin: 0;
}

.form-row > input {
	margin: 0;
}

.form-col {
	display: flex;
	flex-direction: column;
	row-gap: 8px;
}

.form-separator {
	width: 100%;
	margin: 16px 0;
}

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