@font-face {
  font-family: 'work-bold';
  src:url('fonts/Jost-Bold.ttf');
}

@font-face {
  font-family: 'work-medium';
  src:url('fonts/Jost-Medium.ttf');
}

@font-face {
  font-family: 'work';
  src:url('fonts/Jost-Regular.ttf');
}

@font-face {
  font-family: 'work-light';
  src:url('fonts/Poppins-Thin.ttf');
}


@font-face {
  font-family: 'w3';
  src:url('icofont/fonts/icofont.ttf');
}



:root
{
	--grad1 : linear-gradient(to bottom,#D73740,#A61F3C);
	--grad2 : linear-gradient(to bottom,#A61F3C,#D73740);
	--color1 : #DE3B40;
	--color2: #A61F3C;
	--lightcolor: #f8161a;
	--color3:#37090b;
	--color4:#510f1d;
	--hover:#D80075;
	--btn : #4DC2EA;
	--blue:#184ee7;
	--text-color:#FFFFFF;
	--text-color2:#3E4B5B;
	--text-grey : #8f8f8f;
	--text-black : black;
	--bg:white;
	--grey : #707070;
	--darkgrey : #505050;
	--grey2:#d6dce9;
	--grey6:#eaedf4;
	--lightgrey:lightgrey;
	--color-text:#b9bc0b;
	--dot:#c31c1c;
	--fade: #f6c8ca;
	--failed:#e7181b;
	--fadedcolor1:#fce2e3;
	--pending :#bfbf00;
	--done:#28d753;
	--green : #1ea13e;
	--mainbg:#F8F8FA;
	--white:#fff;
	--darkbg:#404040;
	--overlaybg:#202020;
	--slategrey : #e0fefe;

}

body
{
	font-family: work !important;
	position: relative;
}

a
{
	color:var(--color1) !important;
	text-decoration: none;

	&:hover
	{
		color:var(--text-black) !important;
	}
}

.grad
{
	background-image:var(--grad1);
}

.flex
{
	display:flex;
}
.flex-left
{
	margin-left
}

.login
{
	display: flex;
	position: relative;
	height: 100vh;
	flex-wrap: wrap;
	color:var(--text-color);
	

	& .full
	{
		height: 100%;
		top:0px;
		text-align: center;
		padding: 5rem 16px;
		font-size: small;
		position: relative;


		
	}
	

	& .page
	{
	
		flex-basis: 50%;
		flex-grow: 1;
	}

	& img
	{
		width: 200px;
	}
}

a.btn
{
	padding:10px 20px;
	border-radius: 20px;
	background:var(--btn);
	color:var(--text-color) !important;
	font-family: work-bold;

	&:hover
	{
		background:var(--hover);
	}
}

.btn2
{
	padding:8px 20px;
	border:none;
	background:var(--color3);
	color:var(--text-color) !important;
	font-family: work-bold;
	font-size: small;
	border-radius: 3px;

	&:hover
	{
		background:var(--hover);
	}

}

.bold-text
{
	font-family: work-bold;
}


#phx
{
	position: relative !important;
}

.btn
{
	padding:8px 20px;
	border:none;
	background:var(--btn);
	color:var(--text-color) !important;
	font-family: work-bold;
	font-size: small;
	border-radius: 3px;

	&:hover
	{
		background:var(--hover);
	}

}

[phxloader]
{

	position: relative;
	padding: 16px;
	overflow: hidden !important;
	

	&::after
	{
		content: "";
		position: absolute;
		height: 100svh;
		width: 100svw;
		background: white;
		left:0px;
		top:0px;
		text-align: center;
		z-index: 10000;
		
	}

	&::before
	{
		font-family: w3;
		content:"\eff5";
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
  	font-size: 20svh;
  	color:var(--color2);
  	z-index:20000;
  	width: 100%;
  	animation-direction: alternate;
		animation: wheel 2s infinite ease-in-out;
  	height: 100svh;
  	text-align: center;
	}

	
	
}



.ico
{
	font-family: w3;
}

.btngrey
{
	padding:8px 25px;
	border:none;
	background:var(--lightgrey);
	color:var(--grey) !important;
	font-family: work-bold;
	font-size: small;
	border-radius: 3px;

	&:hover
	{
		background:var(--hover);
		color:var(--text-color) !important;
	}

}

[loading]
{
	
	color:var(--grey6) !important;
	pointer-events: none;

	

	&::before
	{
		font-family: w3;
		display: inline-flex;
		content:"\e819";
		font-size: 18px;
		padding: 2px 5px;
		animation: rotate 2s infinite;
		color:var(--text-color);
	}
}



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


@media only screen and (max-width: 650px)
{
	
	.full
	{
		height: fit-content !important;
		padding-top:3rem;
	}
}


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