:root {
	--primary-color: rgb(10, 150, 255);
	--secondary-color: orange;
}

:root {
	font-size: 16px;
	font-family: 'Cairo';
	--text-primary: #d5cece;
	--text-secondary: #ececec;
	--bg-primary: #23232e;
	--bg-secondary: #141418;
	--error-color: #c23030;
	--primary-gradient: linear-gradient(to right, #0a96ff, #085c9d);
	--transition-speed: 300ms;
  }


html, body {
	overflow-x: hidden;
	user-select: none;
	overscroll-behavior: none;
}

body {
	margin: 0;
	padding: 0;
  }

  ::-webkit-scrollbar {
	width: 0.5rem;
  }
  
  ::-webkit-scrollbar-track {
	background: #1e1e24;
  }
  
  ::-webkit-scrollbar-thumb {
	background: #0a96ff;
  }
  


* {scroll-behavior: smooth;transition: all var(--transition-speed);outline: none;}

a {cursor: pointer;text-decoration: none;color: white;}
a:hover {text-decoration: none;color: white;}
a:active {text-decoration: none;color: white;}
a:visited {text-decoration: none;color: white;}


.modal-box-container {display: none;width: 100%;min-height: 100%;position: fixed;
	top: 0px;left: 0px;z-index: 0;align-items: center;justify-content: center;z-index: 3;overscroll-behavior: none;}

.modal-box-container::before {content: '';background-color: rgba(0, 0, 0, 0.5);width: 100%;height: 100%;position: fixed;top: 0px;right: 0px;backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);overscroll-behavior: none;}

.modal-box {width: 80vw;fit-content;max-height: 80vh;fit-content;position: relative;overscroll-behavior: none;animation: open_close 550ms forwards;overflow: hidden auto;}

.modal-box-container.open .modal-box {}

.modal-box-container.no-effect .modal-box {width: fit-content;height: fit-content;animation: unset;}


@keyframes open_close {
	0% {width:0px;height:20px;overflow: hidden;}
	50% {height:20px;}
	100% {overflow-y: auto;}
  }



span.close-btn {cursor: pointer;position: absolute;top: 0;right: 0;padding: 0.5em 0.5em;}


div#loader-modal-box {display: none;background-color: rgba(0, 0, 0, 0.5);width: 100%;height: 100%;flex-direction: column;align-items: center;justify-content: start;flex-direction: column;position: fixed;top: 0px;left: 0px;z-index: 100;}

div#loader-modal-box::before {content: '';width: 100%;height: 100%;position: absolute;top: 0px;right: 0px;backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);}
/*
div#loader {width: 50vw;8v; height: 50vw;8v;border: 0em solid transparent;border-right-color: var(--primary-color);border-radius: 100%;animatio: spin 1s linear infinite;}
*/
div#loader img {display: none;}


div#spv {}

div#loader-modal-box span {font-size: 1.5em;color: var(--primary-color);z-index: 1;}



@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}


.material-icons, .material-symbols-outlined {vertical-align: middle;font-size: inherit;}

button {font-family: 'Cairo', cursive;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
input {font-family: 'Cairo', cursive;}




div#logout-modal-box {text-align: center;}

span#logout-confirmation-message {display: block;font-size: 1.1em;color: white;margin-bottom: 1em;}

div#logout-modal-box button {cursor: pointer;background-color: var(--primary-color);width: 15vw;color: white;padding: 1em 0;border-width: 0;transition: all 0.3s;}
div#logout-modal-box button:hover {background-color: white;color: var(--primary-color);}





div#footer {vertical-align: bottom;background-color: transparent;width: calc(100vw - 2em);color: var(--text-primary);text-align: center;margin-top: 3em;padding: 1em;}

div#footer div {text-align: center;}

div#footer div a {font-size: 25px;}

div#footer div span {font-size: 25px !important;}

div#footer span:last-of-type {font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;font-size: 1em;font-weight: 700;}







.checkbox {
	display: inline;
	position: relative;
	display: flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
   
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	margin-top: 10px;
}

.checkbox input {
	position: absolute;
	width: 100%;
	lef: 50px;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	z-index: 1;
}

.checkbox .checkmark {
	position: relative;
	display: inline-block;
	vertical-align: text-bottom;
	top: 0;
	left: 0;
	width: 1.5rem;
	height: 1.5rem;
	background: var(--bg-primary);
	border-radius: 3px;
	outline: 1px solid var(--primary-color);
	transition: all 0.2s ease;
}

.checkbox:hover .checkmark {
	background: #f4f4f5;
	transition: all 0.2s ease;
}

.checkbox input:checked ~.checkmark {
	background: #3f7fed;
	outline: 1px solid rgb(95, 126, 240);
}

.checkbox input[type="radio"] ~ .checkmark {
	border-radius: 50%;
}


.checkbox .checkmark::after {
	position: absolute;
	display: block;
	content: "";
	left: 50%;
	top: 40%;
	width: 4px;
	height: 8px;
	border: solid white;
	border-width: 0 2px 2px 0;
	transform: translate(-50%, -50%) rotate(45deg);
	-webkit-transform: translate(-50%, -50%) rotate(45deg);
	-moz-transform: translate(-50%, -50%) rotate(45deg);
	-ms-transform: translate(-50%, -50%) rotate(45deg);
	opacity: 0;
	transition: all 0.2s ease;
}


.checkbox input:checked~.checkmark::after {
	opacity: 1;
	transition: all 0.2s ease;
}


.checkbox .crossmark::before,
.checkbox .crossmark::after {
	all: unset;
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 2px;
	background-color: white;
	transform-origin: center;
	border-radius: 0px;
}

.checkbox .crossmark::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.checkbox .crossmark::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.checkbox .crossbar::after {
	all: unset;
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60%;  /* Adjust this value to make the bar smaller or larger */
	height: 2px;
	background-color: white;
	transform: translate(-50%, -50%);
}