@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');

html,body{
  display: grid;
  height: 100%;
  width: 100%;
  place-items: center;
  background: -webkit-linear-gradient(left, #00aaff, #a1a1a1);
}
::selection{
  background: #4e2f0a;
  color: #fff;
}
.wrapper{
  overflow: hidden;
  max-width: 350px;
  background: #fff;
  padding: 30px;
  border-radius: 5px;
  box-shadow: 0px 15px 20px rgba(0,0,0,0.1);
}
.wrapper .title-text{
  display: flex;
  width: 200%;
}
.wrapper .title{
  width: 50%;
  font-size: 35px;
  font-weight: 600;
  text-align: center;
  transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.wrapper .slide-controls{
  position: relative;
  display: flex;
  height: 50px;
  width: 100%;
  overflow: hidden;
  margin: 30px 0 10px 0;
  justify-content: space-between;
  border: 1px solid lightgrey;
  border-radius: 5px;
}
.slide-controls .slide{
  height: 100%;
  width: 100%;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  line-height: 48px;
  cursor: pointer;
  z-index: 1;
  transition: all 0.6s ease;
}
.slide-controls label.signup{
  color: #000;
}
.slide-controls .slider-tab{
  position: absolute;
  height: 100%;
  width: 50%;
  left: 0;
  z-index: 0;
  border-radius: 5px;
  background: -webkit-linear-gradient(left, #7b7a79, #1c1c1b);
  transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
input[type="radio"]{
  display: none;
}
#signup:checked ~ .slider-tab{
  left: 50%;
}
#signup:checked ~ label.signup{
  color: #fff;
  cursor: default;
  user-select: none;
}
#signup:checked ~ label.login{
  color: #000;
}
#login:checked ~ label.signup{
  color: #000;
}
#login:checked ~ label.login{
  cursor: default;
  user-select: none;
}
.wrapper .form-container{
  width: 100%;
  overflow: hidden;
  
  
}
.form-container .form-inner{
  display: flex;
  width: 200%;
}
.form-container .form-inner form{
  width: 50%;
  transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.form-inner form .field{
  height: 50px;
  padding: 2px;
  width: 100%;
  margin-top: 5px;
}
.form-inner form .field input{
  height: 100%;
  width: 100%;
  outline: none;
  padding-left: 12px;
  border-radius: 5px;
  border: 1px solid lightgrey;
  border-bottom-width: 2px;
  font-size: 15px;
  transition: all 0.3s ease;
}
.form-inner form .field input:focus{
  border-color: #6e3500;

}
.form-inner form .field input::placeholder{
  color: #999;
  transition: all 0.3s ease;
}
form .field input:focus::placeholder{
  color: #b3b3b3;
}
.form-inner form .pass-link{
  margin-top: 5px;
}
.form-inner form .signup-link{
  text-align: center;
  margin-top: 30px;
}
.form-inner form .pass-link a,
.form-inner form .signup-link a{
  color: #fa4299;
  text-decoration: none;
}
.form-inner form .pass-link a:hover,
.form-inner form .signup-link a:hover{
  text-decoration: underline;
}
form .btn{
  height: 50px;
  width: 100%;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}
form .btn .btn-layer{
  height: 100%;
  width: 300%;
  position: absolute;
  left: -100%;
  background: -webkit-linear-gradient(right, #262525, #3a3a3a, #54524f, #949393);
  border-radius: 5px;
  transition: all 0.4s ease;;
}
form .btn:hover .btn-layer{
  left: 0;
}
form .btn input[type="submit"]{
  height: 100%;
  width: 100%;
  z-index: 1;
  position: relative;
  background: none;
  border: none;
  color: #fff;
  padding-left: 0;
  border-radius: 5px;
  font-size: 20px;
  font-weight: 500;
  cursor: pointer;
  
}
.back { text-align: center;
  background-color: black;
  margin-left:25%;
  color: rgb(70, 68, 66);
  text-decoration: none;
  font-size: 20px;
  font-family:Almendra SC ;

}
.back:hover{
  background-color: rgb(43, 42, 42);
  color: #000;
}











@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');


button{
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
}



button{
  cursor: pointer;
  border: none;
  outline: none;
}






.modal__button{
  display: inline-block;
  font-family: Arima Madurai;
  color: #FFF;
  top:13%;
  background-image: linear-gradient(to right, #545154 0%, #0e0a0a 51%, #a35010 100%);
  left: 40%;
  position: absolute;
  padding: 1rem 1.25rem;
  border-radius: .5rem;
  transition: .3s;
}

.password__button{
  display: inline-block;
  font-family: Arima Madurai;
  background-image: linear-gradient(to right, #545154 0%, #0e0a0a 51%, #a35010 100%);
  color: #FFF;
  top:30%;
  left: 40%;
  width: 240px;
  position: absolute;
  padding: 1rem 1.25rem;
  border-radius: .5rem;
  transition: .3s;
  text-decoration: none;
}

.password__button:hover{
  transition: all 0.2s ease;
  background-image: linear-gradient(to right, #bd4c00 5%, #4b4a4a 25%, #000000 35%);
  box-shadow:0px 0px 40px rgb(255, 0, 0);

}
@media screen and (max-width: 600px){

  .password__button{
    left:20%;
    top:30%;
  }
 
}


.logout__button{
  display: inline-block;
  font-family: Arima Madurai;
  background-image: linear-gradient(to right, #545154 0%, #0e0a0a 51%, #a35010 100%);
  color: #FFF;
  top:50%;
  left: 40%;
  width: 240px;
  position: absolute;
  padding: 1rem 1.25rem;
  border-radius: .5rem;
  text-decoration: none;
  transition: .3s;
}
.logout__button:hover{
  transition: all 0.2s ease;
  background-image: linear-gradient(to right, #bd4c00 5%, #4b4a4a 25%, #000000 35%);
  box-shadow:0px 0px 40px rgb(255, 0, 0);
}
@media screen and (max-width: 600px){

  .logout__button{
    left:20%;
    top:40%;
  }
 
}
@media screen and (max-width: 600px){
  
.modal__button{
 
  top:20%;
  left: 20%;
  
}
.modal__container{
  position: relative;
  top: 0;
  left: 0;
  background-color: hsla(var(--hue), 18%, 75%, .8);
  width: 100%;
  height: 100%;
  display: grid;
  
  overflow: hidden;
  transition: all .3s;
  z-index: var(--z-modal);
  visibility: hidden;
  opacity: 0;

}
}


.modal__button:hover{
  transition: all 0.2s ease;
  background-image: linear-gradient(to right, #bd4c00 5%, #4b4a4a 25%, #000000 35%);
  box-shadow:0px 0px 40px rgb(255, 0, 0);
}

.modal__container{
  position: absolute;
  top: 0;
  left: 0;
  background-color: hsla(var(--hue), 18%, 75%, .8);
  width: 100%;
  height: 100%;
  display: grid;
  align-items: flex-end;
  overflow: hidden;
  transition: all .3s;
  z-index: var(--z-modal);
  visibility: hidden;
  opacity: 0;

}

.modal__content{
  position: relative;
  background-color: var(--container-color);
  padding: 1rem 1rem 1rem;
  border-radius: 1rem 1rem 0 0;
  transition: all .3s;

 
  transform: translateY(10%);

 
}
@media screen and (min-width: 600px){
.modal__content{
  position: absolute;
  float: left;
}
}
@media screen and (max-width: 600px){
  .modal__content{
   padding: 1rem 0.6rem .5rem;

  }

.modal__content{
  position: absolute;
  top:0px;
 
}
}


.modal__img{
  width: 150px;
  margin-bottom: .75rem;
}

.modal__close{
  display: inline-flex;
  background-color:transparent;
  border-radius: .25rem;
  color: rgb(0, 0, 0);
  font-size: 3.5rem;
  position: absolute;
  top: 1rem;
  right: 1rem;
  cursor: pointer;
  border-color: none;
}
@media screen and (min-width: 600px){
  .modal__close{
    display: inline-flex;
    background-color:transparent;
    border-radius: .25rem;
    color: rgb(0, 0, 0);
    font-size: 3.5rem;
    position: absolute;
    top: 1.5rem;
    right: 2.9rem;
    cursor: pointer;
    border-color: none;
  }
}

.modal__title{
  font-size: var(--big-font-size);
  color: var(--title-color);
  font-weight: 500;
}

.modal__description{
  margin-bottom: 1.5rem;
}

.modal__button-width{
  width: 90%;
}

.modal__button-link{
  display: block;
  margin: 1rem auto 0;
  background-color: transparent;
  color: var(--first-color);
  font-weight: 500;
}


.show-modal{
  visibility: visible;
  opacity: 1;
}

.show-modal .modal__content{

  transform: translateY(0);
}


@media screen and (min-width: 576px){
  .modal__content{
    margin: auto;
    width: 420px;
    border-radius: 1.25rem;
  }

  .modal__img{
    width: 170px;
  }
}


.panel{
  font-size: 40px;
  font-family: Arima Madurai;
  top: 10px;
  position: absolute;

}
.labels{
  font-size: 17px;
  font-family:  Arima Madurai;
}

.fields{
  width:200px;
  border-radius: 10px;
  margin-bottom: 15px;
  padding: 10px;
  background-color: rgba(0, 0, 0,.4);
  border:solid 1px black;
  
}
.commandbtton{
  padding: 10px;
  background-image: linear-gradient(to right, #00b4d7 0%, #4b4b4b 51%, #f6f6f6 100%);
 color: #ffffff;
 text-decoration: none;
 font-family: Arima Madurai;
 border-radius: 10px;
 margin-left: 23%;
 width: 150px;
 border:none;
 box-shadow:0px 0px 15px black;
}
.commandbtton:hover{
  transition: all 0.2s ease;
  background-image: linear-gradient(to right,#f6f6f6 0%, #4b4b4b 51%, #00b4d7  100%);
box-shadow:0px 0px 20px rgb(255, 145, 0);

}
.commandbutton{
  padding: 10px;
  background-image: linear-gradient(to right, #00b4d7 0%, #4b4b4b 51%, #f6f6f6 100%);
 color: #ffffff;
 text-decoration: none;
 font-family: Arima Madurai;
 border-radius: 10px;
 margin-left: 23%;
 width: 150px;
 border-color:#6e3500;
}

.commandbutton:hover{
  transition: all 0.2s ease;
  background-image: linear-gradient(to right,#f6f6f6 0%, #4b4b4b 51%, #00b4d7  100%);
  box-shadow:0px 0px 20px rgb(255, 145, 0);

}


.commandButton{
  position: absolute;
  padding: 10px;
  background-image: linear-gradient(to right, #00b4d7 0%, #4b4b4b 51%, #f6f6f6 100%);

 color: #ffffff;
 font-family: Arima Madurai;
 border-radius: 8%;
 margin-left: 40%;
 top: 20px;
 text-decoration: none;
 width: 80px;
 border-color:#6e3500;

}

.commandButton:hover{
  transition: all 0.2s ease;
  background-image: linear-gradient(to right,#f6f6f6 0%, #4b4b4b 51%, #00b4d7  100%);
  box-shadow:0px 0px 20px rgb(255, 145, 0);

}
.tableHead{
  font-size: 40px;
  font-family: Arima Madurai;


}









.alert {
  border-radius: 3px;
}
.alert h4 {
  font-weight: 600;
}
.alert .icon {
  margin-right: 10px;
}
.alert .close {
  color: #000;
  opacity: 0.2;
  filter: alpha(opacity=20);
}
.alert .close:hover {
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.alert a {
  color: #fff;
  text-decoration: underline;
}
.alert-success {
  border-color: #008d4c;
}
.alert-danger,
.alert-error {
  border-color: #d73925;
}
.alert-warning {
  border-color: #e08e0b;
}
.info {
  color: red;
}