* {margin:0px; padding: 0px; transition: 0.2s;}

body{
  background-color: #ffffff;
  font-family: "Afacad";
  font-size: 14px;
  color: #4b4b4b;
}

@font-face {
  font-family: 'Work Sans';
  src: url(/fonts/WorkSans-VariableFont_wght.ttf);
}

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

@font-face {
  font-family: 'Poppins Medium';
  src: url(/propfirm/fonts/Poppins-Medium.ttf);
}

:root {
  --dark: #1d1d1d;
  --darklight: #575757;
  --black: #000000;
  --white: #fff;
  --redlight: #ec7d7d;
  --red: #e05353;
  --darker: #cc3636;
}

.container{
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.logo{
  margin-bottom: 540px;
  position: absolute;
}

.login-area{
  width: 322px;
  display: flex;
  flex-direction: column;
  border-radius: 7px;
}

.login-title{
  margin-bottom: 30px;
  margin-top: 10px;
  font-size: 22px;
  color: var(--dark);
}

.labelinput{
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}

input[id=login-input]{
  width: 300px;
  height: 40px;
  border: 0px;
  padding: 0px 10px;
  background-color: #ffffff;
  border: 1px solid #dfdfdf;
  border-radius: 5px;
  font-size: 12px;
}


input[id=login-button]{
  width: 322px;
  border: 0px;
  cursor: pointer;
  margin-top: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--red);
  color: var(--white);
  border-radius: 5px;
}

input[id=login-input]:hover, input[id=login-input]:focus{
  border: 1px solid var(--redlight);
}

input[id=login-input]:focus-visible{
  outline: 0px;
}

input[id=login-button]:hover{
  background-color: var(--redlight);
  color: #ffffff;
}

.login-links{
  width: 450px;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
}

.login-links a{
  color: var(--dark);
  text-decoration: none;
  line-height: 20px;
}

.login-links a:hover{
  color: var(--lightblue);
}

@media only screen and (max-width: 1300px) and (min-width: 1024px) {



}

@media only screen and (max-width: 1024px) and (min-width: 768px) {



}

@media only screen and (max-width: 768px) and (min-width: 520px){



}

@media only screen and (max-width: 520px) and (min-width: 0px){



}