* {
	padding: 0;
	margin: 0;
	color: #000;
	box-sizing: border-box;
	word-wrap: break-word;
	font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Ubuntu,sans-serif;
  }
  body {
	  min-height: 100%;
	  background-color: #ffffff;
  }
  h1 {
	  letter-spacing: -1px;
  }
  a {
	color: #bf9456;
	text-decoration: unset;
  }
  a:hover {
	color: #bf9456;
	text-decoration: unset;
  }
  .login-root {
	  background: #fff;
	  display: flex;
	  width: 100%;
	  min-height: 100vh;
	  overflow: hidden;
  }
  .loginbackground {
	  min-height: 692px;
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  top: 0;
	  z-index: 0;
	  overflow: hidden;
  }
  .flex-flex {
	  display: flex;
  }
  .align-center {
	align-items: center; 
  }
  .center-center {
	align-items: center;
	justify-content: center;
  }
  .box-root {
	  box-sizing: border-box;
  }
  .flex-direction--column {
	  -ms-flex-direction: column;
	  flex-direction: column;
  }
  .loginbackground-gridContainer {
	  display: -ms-grid;
	  display: grid;
	  -ms-grid-columns: [start] 1fr [left-gutter] (86.6px)[16] [left-gutter] 1fr [end];
	  grid-template-columns: [start] 1fr [left-gutter] repeat(16,86.6px) [left-gutter] 1fr [end];
	  -ms-grid-rows: [top] 1fr [top-gutter] (64px)[8] [bottom-gutter] 1fr [bottom];
	  grid-template-rows: [top] 1fr [top-gutter] repeat(8,64px) [bottom-gutter] 1fr [bottom];
	  justify-content: center;
	  margin: 0 -2%;
	  transform: rotate(-12deg) skew(-12deg);
  }
  .box-divider--light-all-2 {
	  box-shadow: inset 0 0 0 2px #e3e8ee;
  }
  .box-background--blue {
	  /* background-color: #5469d4; */
	  background-color: #000000a6;
  }
  .box-background--white {
	background-color: #ffffff; 
  }
  .box-background--blue800 {
	  background-color: #bf9456;
  }
  .box-background--gray100 {
	  background-color: #e3e8ee;
  }
  .box-background--cyan200 {
	  background-color: #ffdaa6;
  }
  .padding-top--64 {
	padding-top: 64px;
  }
  /* .padding-top--24 {
	padding-top: 24px;
  } */
  .padding-top--48 {
	/* padding-top: 48px; */
	padding-top: 10px;
	padding-bottom: 10px;
  }
  /* .padding-bottom--24 {
	padding-bottom: 24px;
  } */
  .padding-horizontal--48 {
	padding: 48px;
  }
  .padding-bottom--15 {
	padding-bottom: 15px;
  }
  
  
  .flex-justifyContent--center {
	-ms-flex-pack: center;
	justify-content: center;
  }
  
  .formbg {
	  margin: 0px auto;
	  width: 100%;
	  /* max-width: 448px; */
	  max-width: 850px;
	  /* background: white; */
	  background: linear-gradient(to bottom right, #f0f0f0, #ffffff);
	  border-radius: 4px;
	  box-shadow: rgba(60, 66, 87, 0.32) 0px 7px 14px 0px, rgba(0, 0, 0, 0.12) 0px 3px 6px 0px;  
  
	  animation: pop 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  }
  @keyframes pop {
	0% {
		transform: scale(0.8);
		opacity: 0;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
  }
  span {
	  display: block;
	  font-size: 20px;
	  line-height: 28px;
	  color: #1a1f36;
  }
  label {
	  margin-bottom: 10px;
  }
  .reset-pass a,label {
	  font-size: 14px;
	  font-weight: 600;
	  display: block;
  }
  .reset-pass > a {
	  text-align: right;
	  margin-bottom: 10px;
  }
  .grid--50-50 {
	  display: grid;
	  grid-template-columns: 50% 50%;
	  align-items: center;
  }
  
  .field input {
	  font-size: 16px;
	  line-height: 28px;
	  padding: 8px 16px;
	  width: 100%;
	  min-height: 44px;
	  border: unset;
	  border-radius: 4px;
	  outline-color: rgb(84 105 212 / 0.5);
	  background-color: rgb(255, 255, 255);
	  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
				  rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
				  rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
				  rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, 
				  rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
				  rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
				  rgba(0, 0, 0, 0) 0px 0px 0px 0px;
  }

  .country {
	font-size: 16px;
	  line-height: 28px;
	  padding: 8px 16px;
	  width: 100%;
	  min-height: 44px;
	  border: unset;
	  border-radius: 4px;
	  outline-color: rgb(84 105 212 / 0.5);
	  background-color: rgb(255, 255, 255);
	  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
				  rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
				  rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
				  rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, 
				  rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
				  rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
				  rgba(0, 0, 0, 0) 0px 0px 0px 0px;
	padding: 8px;
	box-sizing: border-box;
	width: 100%;
  }

  .logo {
	width: auto;
	height: 100px;
  }

  .submit {
    background-color: #023363;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    padding: 5px 20px;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease-in-out;
	text-align: center;
	margin-top: 15px;
}

.submit:hover {
    background-color: #fff;
	color: #023363;
	border: 1px solid #023363;
}

.submit:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(191, 148, 86, 0.7);
}

  
  input[type="submit"] {
	  background-color: #bf9456;
	  /* box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
				  rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
				  rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, 
				  rgb(84, 105, 212) 0px 0px 0px 1px, 
				  rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
				  rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
				  rgba(60, 66, 87, 0.08) 0px 2px 5px 0px; */
	  color: #000;
	  font-weight: 600;
	  cursor: pointer;
  }
  input[type="submit"]:hover {
	background-color: #000;
	color: #bf9456;
  }
  .field-checkbox input {
	  width: 20px;
	  height: 15px;
	  margin-right: 5px; 
	  box-shadow: unset;
	  min-height: unset;
  }
  .field-checkbox label {
	  display: flex;
	  align-items: center;
	  margin: 0;
  }
  a.ssolink {
	  display: block;
	  text-align: center;
	  font-weight: 600;
  }
  .footer-link span {
	  font-size: 14px;
	  text-align: center;
  }
  .listing a {
	  color: #697386;
	  font-weight: 600;
	  margin: 0 10px;
  }
  
  .animationRightLeft {
	animation: animationRightLeft 2s ease-in-out infinite;
  }
  .animationLeftRight {
	animation: animationLeftRight 2s ease-in-out infinite;
  }
  .tans3s {
	animation: animationLeftRight 3s ease-in-out infinite;
  }
  .tans4s {
	animation: animationLeftRight 4s ease-in-out infinite;
  }
  
  @keyframes animationLeftRight {
	0% {
	  transform: translateX(0px);
	}
	50% {
	  transform: translateX(1000px);
	}
	100% {
	  transform: translateX(0px);
	}
  } 
  
  @keyframes animationRightLeft {
	0% {
	  transform: translateX(0px);
	}
	50% {
	  transform: translateX(-1000px);
	}
	100% {
	  transform: translateX(0px);
	}
  }
  #particles-js {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #fff; /* Set a background color behind the particles */
	z-index: -1;
  }

  body {
	  font-family: Arial, sans-serif;
  }

  .container {
	  max-width: 800px;
	  margin: 0 auto;
	  padding: 20px;
  }

  .row {
	  display: flex;
	  flex-wrap: wrap;
	  margin: -10px; /* Adjust the margin as needed */
  }

  .col {
	  flex: 1;
	  padding: 10px;
  }

  .field {
	  margin-bottom: 24px;
  }

  label {
	  display: block;
	  margin-bottom: 8px;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="checkbox"],
  input[type="submit"] {
	  width: 100%;
	  padding: 8px;
	  box-sizing: border-box;
  }

  .grid--50-50 {
	  display: flex;
	  justify-content: space-between;
  }

  .reset-pass {
	  flex-grow: 1; /* Take remaining space */
	  text-align: right;
  }

  .ssolink {
	  display: block;
	  text-align: center;
  }