/*-------------------------------*/
/*     Login Form (Downloads)    */
/*-------------------------------*/


/* Full-width input fields */
input[type=text], input[type=password] {
  box-sizing: border-box;
  height: 50px;
}


/* BACKGROUND */

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
}

  /* LOGIN-BOX */
  .modal-content {
    background-color: #FFF;
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
    width: 30%;
  }

    /* CONTENT */
    .container {
      padding: 20px;
    }

      /* BUTTON: CLOSE */
      .header-container {
        position: relative;
        height: 50px;
        /*background-color: #F535EC;*/
      }
        .close {
          position: absolute;
          right: 0;
          top: 0;
          color: var(--color1);
          font-size: 35px;
          font-weight: bold;
        }
        .close:hover,
        .close:focus {
          color: var(--color4);
          cursor: pointer;
        }


/* Add Zoom Animation */
.animate-zoom {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 600px) {
  /* LOGIN-BOX */
  .modal-content {
    width: 80%;
  }
  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }
}