$color: #FD7F71;

h1, .input::-webkit-input-placeholder, .button {
  font-family: 'roboto', sans-serif;
  transition: all 0.3s ease-in-out;
}

h1 {
  height: 100px;
  width: 100%;
  font-size: 18px;
  background: darken($color, 4%);
  color: white;
  line-height: 150%;
  border-radius: 3px 3px 0 0;
  box-shadow: 0 2px 5px 1px rgba(0,0,0,0.2);
}

.form {
  box-sizing: border-box;
  width: 460px;
  margin: 100px auto 0;
  box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
  padding-bottom: 40px;
  border-radius: 3px;



}

.input {
  margin: 20px 25px;
  width: 80%;
  display: block;
  border: none;
  padding: 10px 0;
  border-bottom: solid 1px $color;
  transition: all 0.3s cubic-bezier(.64,.09,.08,1);
  background: linear-gradient(to bottom, rgba(255,255,255,0) 96%, $color 4%);
  background-position: -200px 0;
  background-size: 200px 100%;
  background-repeat: no-repeat;
  color: darken($color, 1%);
  &:focus {
    box-shadow: none;
    outline: none;
    background-position: 0 0;
    &::-webkit-input-placeholder {
      color: $color;
      font-size: 11px;
      transform: translateY(-20px);
      visibility: visible !important;
    }
  }
}

//.input:focus::-webkit-input-placeholder {text-indent: 500px; transition: text-indent 0.5s ease;}
.button {
  border: none;
  background: $color;
  cursor: pointer;
  border-radius: 3px;
  padding: 6px;
  margin-bottom: 10px;
  width: 80%;
  color: white;
  margin-left: 25px;
  box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
  &:hover { 
    transform: translateY(-3px);
    box-shadow: 0 6px 6px 0 rgba(0,0,0,0.2);
  }
}

.allStaffs{
  
  max-width: 1500px;
   display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}
.staffs{
  max-width: 1500px;
  display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    
}
.staff{
   width: 350px;
   
}

.main{
  display: flex;
}

.loader{
  position: fixed;
  bottom: 0;
  left: 50%;
  right: 0;
  top: 50%;
  height: 100%;
  width: 100%;
  z-index: 9999;
  
   
}
.sider{
  background-color: #FD7F71
}



.auth__button{

  width: 100%;
  display : flex;
  padding-top: 30px;
  padding-bottom: 30px;
  
}
.btn1{
  width: 180px;
    margin-left: 0px;
    border-radius: 0px;
    padding-bottom: 10px;
    padding-top: 10px;
}
.btn2{
  width: 180px;
    margin-left: 0px;
    border-radius: 0px;
    padding-bottom: 10px;
    padding-top: 10px;
}
.ant-layout-sider-children{
  background: #FD7F71;
  

}