@import url('https://fonts.googleapis.com/css2?family=Alegreya+SC:ital,wght@0,400;0,500;0,700;0,800;0,900;1,400;1,500;1,700;1,800;1,900&family=Neuton:ital,wght@0,200;0,300;0,400;0,700;0,800;1,400&display=swap');

:root {
	--color-yellow: #f9cc6a;
	--color-dark-blue: #071027;
	--color-blue: #2d3b60;
	--color-light-blue: #5c71a8;
	--color-white: #f1f1f1;
	--color-black: #1f1f1f;
	--color-red: #e51b1e;

	--font-family--neuton: 'Neuton', serif;
	--font-family-alegreya: 'Alegreya SC', serif;

	color: var(--color-white);
	font-family: var(--font-family--neuton);
	font-size: 14pt;

	/*Svelty Picker*/
	/* general */
	--sdt-bg-main: var(--color-blue); /** wrap background color */
	--sdt-shadow-color: var(--color-dark-blue); /** wrap shadow color */
	--sdt-wrap-shadow: 0 1px 6px var(--sdt-shadow-color); /** wrap shadow settings */
	--sdt-radius: 10px; /** wrap radius */
	--sdt-color: var(
		--color-white
	); /** data to select(e.g date/time) text color (except header & buttons) */
	--sdt-color-selected: #fff; /** selected data(e.g date/time) text color */
	--sdt-header-color: var(--color-white); /** header items color (e.g. text & buttons) */
	--sdt-header-btn-bg-hover: var(--color-dark-blue); /** header items hover background color */
	--sdt-bg-selected: var(--color-dark-blue); /** selected data(e.g date/time) background color */

	/* action buttons */
	--sdt-today-bg: var(--color-light-blue); /** date picker today button hover background color */
	--sdt-today-color: var(--color-white); /** date picker today button text & border color */
	--sdt-clear-color: #dc3545; /** clear button text & border color */
	--sdt-clear-bg: transparent; /** clear button background color */
	--sdt-clear-hover-color: var(--sdt-bg-main); /** clear button hover text color */
	--sdt-clear-hover-bg: #dc3545; /** clear button hover background color */

	/* time picker */
	--sdt-clock-selected-bg: var(--color-light-blue); /** selected time background color */
	--sdt-clock-bg: var(--color-dark-blue); /** time picker inner circle background color */
	--sdt-clock-color: var(--sdt-color); /** time picker text color (watch "--sdt-color") */
	--sdt-clock-color-hover: var(
		--sdt-color
	); /** time picker hover text color (watch "--sdt-color") */
	--sdt-clock-time-bg: transparent; /** time picker time background color */
	--sdt-clock-time-bg-hover: transparent; /** time picker time selection hover background color */
	--sdt-clock-disabled-time: #b22222; /** disabled time picker time text color */
	--sdt-clock-disabled-time-bg: #eee; /** disabled time picker time background color */

	/* date picker */
	--sdt-table-selected-bg: var(--sdt-bg-selected); /** selected date background color */
	--sdt-table-disabled-date: #b22222; /** disabled dates text color */
	--sdt-table-disabled-date-bg: #eee; /** disabled dates background color */
	--sdt-table-bg: transparent; /** date picker inner table background color */
	--sdt-table-data-bg-hover: var(
		--color-dark-blue
	); /** table selection data hover background color */
	--sdt-table-today-indicator: #ccc; /** date picker current day marker color */
}

*,
*::before,
*::after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body {
	background: rgb(92, 113, 168);
	background: linear-gradient(145deg, rgba(92, 113, 168, 1) 0%, rgba(7, 16, 39, 1) 100%);
	background-attachment: fixed;
}

& .input {
	display: flex;
	flex-direction: column;
	width: 90%;
	gap: 0.4rem;

	& label {
		font-size: 16pt;
		font-family: var(--font-family--neuton);
	}

	& input {
		width: 100%;
		height: 30px;
		background-color: transparent;
		border-top: transparent;
		border-left: transparent;
		border-right: transparent;
		border-bottom: 2px solid var(--color-light-blue);
		font-family: var(--font-family--neuton);
		border-radius: 2px;
		font-size: 14pt;

		&:focus-within {
			outline: none;
			border-bottom: 4px solid var(--color-light-blue);
		}
	}

	& textarea {
		width: 100%;
		height: 100px;
		background-color: transparent;
		border-top: transparent;
		border-left: transparent;
		border-right: transparent;
		border-bottom: 2px solid var(--color-light-blue);
		border-radius: 2px;
		font-size: 14pt;
		font-family: var(--font-family--neuton);
		resize: none;

		&:focus-within {
			outline: none;
			border-bottom: 4px solid var(--color-light-blue);
		}
	}
}

.checkbox .ikxBAC {
	appearance: none;
	background-color: var(--color-white);
	border-radius: 72px;
	border-style: none;
	flex-shrink: 0;
	height: 20px;
	margin: 0;
	position: relative;
	width: 30px;
}

.checkbox .ikxBAC::before {
	bottom: -6px;
	content: '';
	left: -6px;
	position: absolute;
	right: -6px;
	top: -6px;
}

.checkbox .ikxBAC,
.checkbox .ikxBAC::after {
	transition: all 100ms ease-out;
}

.checkbox .ikxBAC::after {
	background-color: var(--color-black);
	border-radius: 50%;
	content: '';
	height: 14px;
	left: 3px;
	position: absolute;
	top: 3px;
	width: 14px;
}

.checkbox input[type='checkbox'] {
	cursor: default;
}

.checkbox .ikxBAC:hover {
	background-color: var(--color-light-blue);
	transition-duration: 0s;
}

.checkbox .ikxBAC:checked {
	background-color: var(--color-light-blue);
}

.checkbox .ikxBAC:checked::after {
	background-color: var(--color-yellow);
	left: 13px;
}

.checkbox :focus:not(.focus-visible) {
	outline: 0;
}

.checkbox .ikxBAC:checked:hover {
	background-color: var(--color-blue);
}