*{
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	outline: none;
	margin: 0;
}

.hidden{
	display: none;
}



.card2{
	margin-top: 3%;
	width: 40%;
	margin-left: auto;
	margin-right: auto;
	border-radius: 15px;
	height: auto;
	box-shadow: 0px 0px 15px rgba(211, 211, 211, 0.547);
	padding: 40px;
}

.card{
	margin-top: 10%;
	width: 280px;
	margin-left: auto;
	margin-right: auto;
	border-radius: 15px;
	height: auto;
	box-shadow: 0px 0px 15px rgba(211, 211, 211, 0.547);
	padding: 40px;
}

.card3{
	margin-top: 5%;
	min-width: 280px;
	width: 40%;
	margin-left: auto;
	margin-right: auto;
	border-radius: 15px;
	height: auto;
	box-shadow: 0px 0px 15px rgba(211, 211, 211, 0.547);
	background: rgb(19,88,240);
	background: linear-gradient(90deg, rgba(19,88,240,1) 0%, rgba(0,144,255,1) 100%);
	color: white;
	padding: 40px;
}

.card3 button{
	background: white;
	color: #1358fe;
}

@media screen and (max-width: 600px) {
 
 .card{
	 margin-top: 22%;
	 width: 75%;
	 margin-left: auto;
	 margin-right: auto;
	 border-radius: 15px;
	 height: auto;
	 box-shadow: 0px 0px 15px rgba(211, 211, 211, 0.547);
	 padding: 20px;
 }
 
 .card2{
	 margin-top: 10%;
	 width: 75%;
	 margin-left: auto;
	 margin-right: auto;
	 border-radius: 15px;
	 height: auto;
	 box-shadow: 0px 0px 15px rgba(211, 211, 211, 0.547);
	 padding: 40px;
 }
 .card3{
	margin-top: 5%;
	min-width: 280px;
	width: 75%;
	margin-left: auto;
	margin-right: auto;
	border-radius: 15px;
	height: auto;
	box-shadow: 0px 0px 15px rgba(211, 211, 211, 0.547);
	background: rgb(19,88,240);
	background: linear-gradient(90deg, rgba(19,88,240,1) 0%, rgba(0,144,255,1) 100%);
	color: white;
	padding: 40px;
 }
 
 input{
	 font-size: 1em !important;
 }
 
}

	select{
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
		border-radius: 5px;
		text-align: center;
		padding: 7px 22px;
		width: auto;
		min-width: 20%;
		background-color: #E5E5E5;
		border: 1px solid transparent;
		color: color(srgb 0.16 0.16 0.16);
		font-size: 0.90em;
		outline: none;
		display: inline-block;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		cursor: pointer;
		font-weight: 500;
		margin-bottom: 10px;
	}

button{
	
	background-color: #1358fe;
	color: white;
	padding: 7px 22px;
	border-radius: 5px;
	border:1px solid transparent;
	font-size: 0.85em;
	cursor: pointer;
	font-weight: 500;
}

a{
text-decoration: none !important;
text-decoration-line: none !important;
color: black;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
textarea{
	width: auto;
	min-width: 85%;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	background-color: #E5E5E5;
	color: black;
	padding: 7px 22px;
	border-radius: 5px;
	border:1px solid transparent;
	font-size: 0.85em;
	cursor: pointer;
	font-weight: 500;
	margin-bottom: 10px;
	margin-top: 10px;
}

.red{
	background-color: rgb(251, 46, 46);
	color: white;
}

.black{
	background-color: #000000;
	color: #ffffff;
}

.grey{
	background-color: #e5ecff;
color: #1358fe;
}



.mini_card{
	margin-right: 15px;
	margin-top: 15px;
	margin-bottom: 15px;
	display: inline-block;
	width: calc((100% / 2) - 58px);
	border-radius: 15px;
	 height: auto;
	 padding: 20px;
	 background-color: #F7F7F7;
}

.mini_card i{
	font-size: 2em;
	color: rgb(153, 153, 153);
	margin-bottom: 5px;
}

.mini_card h5{
	font-size: 1.2em;
	color: rgb(0, 0, 0);
	margin-bottom: 5px;
}

.mini_card label{
	font-size: 0.95em;
	color: rgb(0, 0, 0);
	margin-bottom: 5px;
}







@keyframes growProgressBar {
  0%, 33% { --pgPercentage: 0; }
  100% { --pgPercentage: var(--value); }
}

@property --pgPercentage {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

div[role="progressbar"] {
  --size: 3.3rem;
  --fg: #1358fe;
  --bg: #def;
  --pgPercentage: var(--value);
  animation: growProgressBar 3s 1 forwards;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: 
	radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0),
	conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0)
	;
  font-family: Helvetica, Arial, sans-serif;
  font-size: calc(var(--size) / 4);
  color: var(--fg);
}

div[role="progressbar"]::before {
  counter-reset: percentage var(--value);
  content: counter(percentage) '%';
}