html, body {
    min-height: 100%;
}
      
body, div, form, input, select, textarea, label { 
    padding: 0;
    margin: 0;
    outline: none;
    font-family: Roboto, Arial, sans-serif;
    font-size: 14px;
    color: #666;
    line-height: 22px;
}
      
h1 {
      position: absolute;
      margin: 0;
      font-size: 30px;
      color: #fff;
      z-index: 2;
      line-height: 35px;
}
      
.testbox {
      display: flex;
      justify-content: center;
      align-items: center;
      height: inherit;
      padding: 20px;
}

form {
      width: 50%;
      /*padding: 20px;*/
      border-radius: 6px;
      background: #fff;
      box-shadow: 0 0 8px  #005eff; 
}

#report{
    width: 100%;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 0 0px  #005eff; 
}


.banner {
      position: relative;
      height: 80px;
      /*background-image: url("/uploads/media/default/0001/02/234656e7acbca4625305dd37e7344af8eff32383.jpeg");  
      background-size: cover;*/
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      background-color: #005eff;
      }
      
      .banner::after {
      content: "";
      /*background-color: rgba(0, 0, 0, 0.2);*/ 
      position: absolute;
      width: 100%;
      height: 100%;
      }
      
      input, select, textarea {
      margin-bottom: 10px;
      border: 1px solid #ccc;
      border-radius: 3px;
      cursor: pointer;
      }
      
      input, textarea{
          cursor: text;
      }
      
      input {
      width: calc(100% - 11px);
      padding: 5px;
      }
      
      select{
        width: 100%;
        padding: 5px;
        height: 35px;
        background-color:white;
      }
      
      input[type="date"] {
        padding: 4px 5px;
        background-color:white;
      }
      
      textarea {
      width: calc(100% - 12px);
      padding: 5px;
      }
      
      .item:hover p, .item:hover i, .question:hover p, .question label:hover, input:hover::placeholder {
      color: #005eff;
      }
      
      .item input:hover, .item select:hover, .item textarea:hover {
      border: 1px solid transparent;
      box-shadow: 0 0 3px 0 #005eff;
      color: #005eff;
      }
      
      .item, .question {
      position: relative;
      margin: 10px 0;
      }
      
      .item span, .question span {
      color: red;
      }
      
      .item label{
          font-weight:600;
      }
      
      input[type="date"]::-webkit-inner-spin-button {
      display: none;
      }
      
      .item i, input[type="date"]::-webkit-calendar-picker-indicator {
      position: absolute;
      font-size: 20px;
      color: #005eff;
      }
      
      .item i {
      right: 1%;
      top: 30px;
      z-index: 1;
      }
      
      [type="date"]::-webkit-calendar-picker-indicator {
      right: 1%;
      z-index: 2;
      opacity: 0;
      cursor: pointer;
      }
      
      input[type=radio], input[type=checkbox]  {
        /*display: none;*/
        position: absolute;
        width: 10px;
        opacity: 0;
      }
      
      label.radio {
      position: relative;
      display: inline-block;
      margin: 5px 20px 15px 0;
      cursor: pointer;
      }
      
      .radiooption {
      margin-left: 30px;
      }
      
      .question-answer label {
      display: block;
      }
      
      label.radio:before {
      content: "";
      position: absolute;
      left: 0;
      width: 17px;
      height: 17px;
      border-radius: 50%;
      border: 2px solid #ccc;
      }
      
      input[type=radio]:checked + label:before, label.radio:hover:before {
      border: 2px solid #005eff;
      }
      
      label.radio:after {
      content: "";
      position: absolute;
      top: 6px;
      left: 5px;
      width: 8px;
      height: 4px;
      border: 3px solid #005eff;
      border-top: none;
      border-right: none;
      transform: rotate(-45deg);
      opacity: 0;
      }
      
      input[type=radio]:checked + label:after {
      opacity: 1;
      }
      
      /*****checkbox*/
      label.checkbox {
      position: relative;
      display: inline-block;
      margin: 5px 20px 15px 0;
      cursor: pointer;
      }
      
      /*.question span {
      margin-left: 30px;
      }*/
      
      .question-answer label {
      display: block;
      }
      
      label.checkbox:before {
      content: "";
      position: absolute;
      left: 0;
      width: 17px;
      height: 17px;
      border-radius: 0%;
      border: 2px solid #ccc;
      }
      
      input[type=checkbox]:checked + label:before, label.checkbox:hover:before {
      border: 2px solid #005eff;
      }
      
      label.checkbox:after {
      content: "";
      position: absolute;
      top: 6px;
      left: 5px;
      width: 8px;
      height: 4px;
      border: 3px solid #005eff;
      border-top: none;
      border-right: none;
      transform: rotate(-45deg);
      opacity: 0;
      }
      
      input[type=checkbox]:checked + label:after {
      opacity: 1;
      }
      /****************/
      .btn-block {
      margin-top: 10px;
      text-align: center;
      }
      
      button {
      width: 150px;
      padding: 10px;
      border: none;
      border-radius: 5px; 
      background: #77ddf5;
      font-size: 16px;
      color: #7705bc;
      cursor: pointer;
      font-weight:600;
      }
      
      button:hover {
      background: #7705bc;
      color:white;
      }
      
      #submit:disabled,
      #submit[disabled]{
          cursor: context-menu;
          background: #adacab;
          color:white;
      }
      
      .pwloader {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -200px;
        margin-left: -250px;
        width: 500px;
        height: 200px;
        z-index: 100;
    }
    
    #passwordDiv {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0px;
        background: rgba(191,191,191,1);
        z-index: 100;
    }
    
      
@media (min-width: 568px) {
    .name-item, .city-item {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
      
    .name-item input, .name-item div {
        width: calc(50% - 20px);
    }
      
    .name-item div input {
        width:97%;
    }
      
    .name-item div label {
        display:block;
        padding-bottom:5px;
    }
    
    
}

 @media screen and (max-width: 600px) {
        form {
            width: 90%;
        }
        
        .item i {
            top: 25px;
        }
        
        h1{
            font-size:25px;
        }
        
        .pwloader{
            position: initial;
            top: 50%;
            left: 50%;
            margin: 10%;
            width: 80%;
        }
        
        #report{
            width:90%;
        }
    }