:root {
  --light: #fff;
  --body: #f2f0f0;
  --body-alpha: rgba(242, 240, 240, 0.9);
  --size-content: 1024px;
  --shadow: #b6b6b6;
  --red: #d71f3c;
  --red-light: #e27887;
  --loading-1: #e9fbfc;
  --loading-2: #bef2f4;
  --loading-3: #92e9ed;
  --loading-4: #66e0e6;
  --loading-5: #3ad7df;
}

body {
    margin: 0;
    font-family: 'Inter', sans-serif;
}

#login-component {
	 height: 100vh;
	 overflow: hidden;
	 padding-left: 27px;
	 padding-right: 27px;
}
 #login-component #header {
	 display: flex;
	 align-items: center;
	 justify-content: flex-start;
}
 #login-component #header h2 {
	 color: #101828;
	 font-size: 24px;
	 font-weight: 600;
	 font-family: "Poppins", sans-serif !important;
	 margin-top: 27px;
}
 #login-component #header img {
	 width: 8vh;
	 padding: 5px;
}
 #login-component #main-div {
	 display: flex;
	 justify-content: center;
	 width: 100%;
	 align-items: center;
	 flex-direction: column;
	 margin-top: 10vh;
}
 @media (max-width: 434px) {
	 #login-component #main-div .div-center {
		 width: 95%;
	}
}
 #login-component #main-div .div-center {
	 display: grid;
	 justify-content: space-evenly;
	 text-align: center;
	 justify-items: center;
	 flex-direction: column;
	 align-items: center;
	 width: 55vw;
}
 #login-component #main-div .div-center .error-message-content {
	 background: #fffbfa;
	 margin-bottom: 3vh;
	 border: 1px solid #fda29b;
	 display: flex;
	 flex-direction: row;
	 align-items: center;
	 padding: 16px;
	 padding-bottom: 22px;
	 gap: 12px;
	 border-radius: 8px;
	 width: 95%;
}
 #login-component #main-div .div-center .error-message-content span {
	 font-family: 'Inter';
	 font-style: normal;
	 font-weight: 600;
	 font-size: 14px;
	 line-height: 20px;
	 color: #b42318;
	 text-align: start;
}
 #login-component #main-div .div-center h2 {
	 color: #101828;
	 font-size: 30px;
	 font-weight: 600;
	 font-style: normal;
	 line-height: 38px;
	 height: 38px;
}
 #login-component #main-div .div-center p {
	 margin-bottom: 3vh;
	 margin-top: 0vh;
	 font-size: 16px;
	 font-weight: 400;
	 font-style: normal;
	 line-height: 24px;
	 color: #475467;
	 width: 315px;
	 height: 24px;
	 text-align: center;
}
 #login-component #main-div .div-center .button {
	 border-radius: 8px;
	 border: none;
	 background: #ed1941;
	 color: white;
	 padding: 10px;
	 width: 100%;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 border: 1px solid #d0d5dd;
}
 #login-component #main-div .div-center .button img {
	 margin-right: 10px;
}
 #login-component #main-div .div-center .button span {
	 font-size: 16px;
	 font-weight: 600;
}
 #login-component #main-div .div-center .button:hover {
	 cursor: pointer;
}
 #login-component #main-div .app-image {
	 margin-top: 10vh;
}
 #login-component #main-div .app-image svg {
	 width: 100% !important;
	 height: 100% !important;
}


.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  height: 125px;
  background: 0 0;
}
.loading.full-screen {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  background-color: var(--body);
  z-index: 999;
}
.loading.transparency {
  background-color: var(--body-alpha);
}
.loading ul {
  display: flex;
}
.loading ul li {
  width: 20px;
  height: 20px;
  margin: 10px;
  list-style-type: none;
  transition: 0.5s all ease;
}
.loading ul li {
  border-radius: 5px;
}
.loading ul li:nth-child(1) {
  animation: right-1 1s infinite alternate;
  background-color: var(--loading-1);
  animation-delay: 0.1s;
}
.loading ul li:nth-child(2) {
  animation: right-2 1s infinite alternate;
  background-color: var(--loading-2);
  animation-delay: 0.2s;
}
.loading ul li:nth-child(3) {
  animation: right-3 1s infinite alternate;
  background-color: var(--loading-3);
  animation-delay: 0.3s;
}
.loading ul li:nth-child(4) {
  animation: right-4 1s infinite alternate;
  background-color: var(--loading-4);
  animation-delay: 0.4s;
}
.loading ul li:nth-child(5) {
  animation: right-5 1s infinite alternate;
  background-color: var(--loading-5);
  animation-delay: 0.5s;
}
@keyframes right-1 {
  0% {
    transform: translateY(-25px);
  }
  100% {
    transform: translateY(25px);
  }
}
@keyframes right-2 {
  0% {
    transform: translateY(-35px);
  }
  100% {
    transform: translateY(35px);
  }
}
@keyframes right-3 {
  0% {
    transform: translateY(-40px);
  }
  100% {
    transform: translateY(40px);
  }
}
@keyframes right-4 {
  0% {
    transform: translateY(-45px);
  }
  100% {
    transform: translateY(45px);
  }
}
@keyframes right-5 {
  0% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(50px);
  }
}

.hide {
  display: none !important;
}