@font-face {
	font-family: 'GROBOLDDYNAMIC';
	src: url(/fonts/GROBOLDDYNAMIC.TTF);
}
@font-face {
	font-family: 'grav-heavy';
	src: url(/fonts/graviola-heavy.ttf);
}
@font-face {
	font-family: 'Nunito';
	src: url(/fonts/Nunito-VariableFont_wght.ttf);
}
@font-face {
	font-family: 'langEn';
	src: url(/fonts/LANG_EN.TTF);
}
.login-btn, .logout-btn{
	font-family: grav-heavy;
	padding-top: 0.3rem !important;
}
:where([class^="ri-"])::before {
	content: "\f3c2";
}

.slide-dots button.active {
	background-color: #3B82F6;
}

.flex-1 {
	flex: 1;
}


:where([class^="ri-"])::before { content: "\f3c2"; }

.Nunito{
	font-family: Nunito;
}
.grav-heavy{
	font-family: grav-heavy;
}
body {
	font-family: Nunito;
	overflow-x: hidden;
}

.menu-item.active {
	background-color: rgba(59, 130, 246, 0.1);
	color: #3b82f6;
	border-left: 3px solid #3b82f6;
}

@media (min-width: 1200px){
	footer,main{
		margin-left: 300px;
	}
	#menuToggle, #closeMenu{
		display: none;
	}
}
@media (max-width: 1200px) {
	.menu-item.active {
		border-left: none;
		border-right: 3px solid #3b82f6;
	}

	.sidebar {
		transform: translateX(100%);
		transition: transform 0.3s ease-in-out;
	}

	.sidebar.open {
		transform: translateX(0);
	}

	body.menu-open {
		overflow: hidden;
	}
	#sidebar{
		display: none;
	}
}

.submenu {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-out;
}

.submenu.open {
	max-height: 500px;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type="number"] {
	-moz-appearance: textfield;
}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
	background-color: #afc3e4 !important;
}
.menu-span{
	left: 28%;
	font-size: medium;
	font-weight: 700;
}
.menu-icon{
	height: 80%;
}
.menu-gap{
	display: none;
	bottom: 0;
}
.social-icon{
	width: 75%;
}
.menu-active{border-bottom: 3px solid #635757;    border-bottom-width: medium;}
#langsMenu{display: none;z-index: 60;}

.section-header:before{
	content: "";
	position: absolute;
	width: 100%;
	border-bottom: 0.0625rem solid rgb(222, 191, 89);
	top: 45%;
	left: 0;
}
.section-header>h2{
	width: fit-content;
}
@keyframes flex-scale {
	0% {
		opacity: 0;
		transform: scale(0);
	}
	25% {
		opacity: 1;
		transform: scale(0.8);
	}
	50% {
		transform: scale(1.1);
	}
	75% {
		transform: scale(0.9);
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}
.flex-scale{
	animation-name: flex-scale;
	animation-duration: 0.4s;
	animation-delay: 0.8s;
	animation-fill-mode: forwards;
	opacity: 0;
}