@charset "utf-8";

.terms{
			width: 200px; 
			scrollbar-color: #f90505 #000;
			font-size:17px;
		}
		
		
		.input-wrapper {
			position: relative;
			margin-bottom: 1.5rem;
			
		}
		
		.mytable{
			padding-left: 30px; 
			border:medium;
		}
		


		input {
			width: 100%;
			padding: 0rem;
			border: 1px solid #ccc;
			border-radius: 4px;
			letter-spacing: 0.1rem; 
			padding-top: 17px;
			padding-bottom: 23px;
			padding-left:15px
		}

		label {
			position: absolute;
			top: 50%;
			left: 1rem;
			transform: translateY(-50%);
			color: #777;
			font-size: 1rem;
			transition: all 0.2s ease-out;
			pointer-events: none;
		}

		label.active {
			top: 20%;
			left: 1rem;
			font-size: 0.85rem;
			color: #6da9d2;
		}
		
		
		
		
.my-submit-btn {

  height: 3rem;
  padding: 1rem;
  background-color: #2484B4; /* Adjust button background color as needed */
  border: none;
  border-radius: 20px; /* Increase border-radius for more rounded corners */
  color: white;
  font-weight: bold;
  letter-spacing: 0.1rem;
  cursor: pointer;
  transition: all 0.2s ease-out;
  margin-top:10px;
  margin-bottom:30px;

  

}

.my-submit-btn:hover {
  background-color: #2979a9; /* Adjust button background color on hover as needed */
}

.my-submit-btn:active {
  background-color: #216b94; /* Adjust button background color on active state as needed */
}

.login-form { 
width: 100%;
align-content: center;
display: flex;
}

		body {
			margin: 0;
			display: flex;
			/*align-items: center;*/
			justify-content: center;
			height: 100vh;
			/*background-color: #f5f5f5;*/
		}

		.my-container {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 0.75rem;
			max-width: 100%;
			width: 100%;
			padding: 50px 18px 20px 18px;
			/*background-color: #db6464;*/
			/*box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);*/
			border-radius: 8px;
			margin-bottom: 1rem;
		}

		@media (min-width: 451px) and (max-width: 500px)  { 
			.my-container {
				max-width: 100%;
			}
			
			.terms{
			width: 250px; 
		}
			
.mytable{
			width: 250px; 
		}
		
		
.input-wrapper {
			width: 250px; 
		}

.my-submit-btn {
		  width: 250px; /*for ressponsive*/
}
		}
		
		@media (min-width: 201px) and (max-width: 450px)  { 
		.mytable{
			width: 200px; 
		}
		
			.terms{
			width: 200px; 
			
		}
			.my-container {
				max-width: 100%;
			}
.input-wrapper {
			width: 200px; 
		}

.my-submit-btn {
		  width: 200px; /*for ressponsive*/
}
		}

		
		
		
		@media (min-width: 501px) { 
			.my-container {
				max-width: 100%;
			}
			.mytable{
			width: 350px; 
		}
					.terms{
			width: 350px; 
		}

		

.input-wrapper {
			width: 350px; 
		}

.my-submit-btn {
		  width: 350px; /*for ressponsive*/
}
		}

		.my-login-screen {
			color: #474747;
		}

		body, html {
			color: #474747;
			font-family: "Fira Sans","Helvetica Neue",Helvetica,"Roboto",Arial,sans-serif;
			font-size: 16px;
			line-height: 1.4;
		}

		.my-card-group {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 100%;
		}

		.my-card {
			width: 100%;
			background-color: #fff;
			box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
			border-radius: 8px;
			padding: 1rem;
			margin-bottom: 1rem;
			cursor: pointer;
			display: flex;
			align-items: center;
			transition: box-shadow 0.2s ease;
		}

		.my-card:hover {
			box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
		}

		.my-office-icon {
			background-color: #E5202E;
			width: 3rem;
			height: 3rem;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			margin-right: 1rem;
		}

		.my-content {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.my-company-name {
			font-size: 1.2rem;
			font-weight: bold;
			margin: 0;
		}

		.my-office-name {
			font-size: 1rem;
			margin: 0;
		}

		.my-continue-icon {
			margin-left: 1rem;
		}

		.my-chevron-right-icon:before {
			content: "\f054";
			font-family: "Font Awesome 5 Free";
			font-weight: 900;
			font-size: 1.5rem;
			color: #007AC3;
		}