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: 40px;
      color: #fff;
      z-index: 2;
      line-height: 83px;
}
      
.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: 7px;
      border: none;
      border-radius: 5px; 
      background: #cfcfcf;
      font-size: 16px;
      color: #3A416F;
      cursor: pointer;
      font-weight:600;
      }
      
      button:hover {
      background: #3A416F;
      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%;
        }
    }
    
    
    label {
        color: #444444;
        font-weight: 600;
        display: inline-block;
        font-size: 1em;
        margin: 0 0 0 0;
        text-align: right;
        width: 80px;
    }

    input[type="search"] {
        border-radius: 0;
        border: none;
        color: black;
        outline: 0;
        padding: 0 1em;
        text-decoration: none;
        line-height: 2.5em;
        height: 20px;
    }
    
    .feedback-input {
        color: #3c3c3c;
        font-family: inherit;
        font-size: 12px;
        border-radius: 3px;
        line-height: 20px;
        background-color: #fbfbfb;
        padding: 5px;
        width: 10em;
        box-sizing: border-box;
        border: 1px solid #bfbbbb;
        margin: 5px;
        margin-right: 15px;
    }
    
    .label1, .label2{
        font-weight:700;
        display:inline;
    }
    
    #tSummary, #tSummaryNew{
        width:100%;
        font-size: 12px;
        table-layout: fixed;
        border: 1px solid #b1b1b4;
    }
    
    #tSummary thead th, #tSummaryNew thead th{
        font-size: 16px;
        font-weight: 700;
        padding: 0.5em 0;
        text-align: center;
        width: 50px;
        background-color: #1bc8b0;
        color: white;
        position: -webkit-sticky; 
        position: sticky;
        top: 0;
    }
    
    #tSummary td, #tSummaryNew td{
        border-style: solid;
        border-width: 1px;
        border-color: black;
        height: 5%;
        text-align: center;
        white-space: nowrap; 
        overflow: hidden;
        text-overflow: ellipsis;
        padding:3px;
    }
    
    #tSummary th:first-child, #tSummaryNew th:first-child {
        position:sticky;
        left:0;
        z-index:2;
    }
    
    #tSummary th:nth-child(2), #tSummaryNew th:nth-child(2)  { 
        position:sticky;
        left:100px;
        z-index:2;
    }
    
    #tSummary td:first-child, #tSummaryNew td:first-child{
        position:sticky;
        left:0;
        z-index:1;
        background-color:white;
    }
    
    #tSummary td:nth-child(2), #tSummaryNew td:nth-child(2){ 
        position:sticky;
        left:100px;
        z-index:1;
        background-color:white;
    }
    
    #tSummary a, #tSummaryNew a{
        text-decoration: none;
        color: inherit;
    }
    
    #tSummary a:visited, #tSummaryNew a:visited{
        color:inherit;
    }
    
    #submit {
        background-color: #3A416F;
        width: 8em;
        color: white;
        font-size: 17px;
        padding: 5px;
        border: 0px;
        cursor: pointer;
    }
    
    .legend{
        font-size: 16px;
        cursor: context-menu;
        font-weight: 600;
        margin-left: 10px;
    }
    
    .legendframe{
        width: 150px;
        margin-bottom: 10px;
        display: inline-block;
    }
    
    .label{
        margin-bottom: 0.5em;
        margin-top: 0.8em;
        font-size:15px;
    }
    
    .loader {
        border: 16px solid #f3f3f3;
        border-radius: 50%;
        border-top: 16px solid #1bc8b0;
        width: 120px;
        height: 120px;
        -webkit-animation: spin 2s linear infinite; /* Safari */
        animation: spin 2s linear infinite;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -50px;
        width: 100px;
        height: 100px;
        z-index: 100;
    }
    
    #loaderDiv {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: rgba(51,51,51,0.7);
        z-index: 10;
    }
    
    .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;
    }
    
    #tableDifference{
        position: absolute;
        cursor: context-menu;
    }
    
    #tableDifference table{
        width: 45em;
        min-width: 45em;
        text-align: center;
        font-size: 12px;
        margin-top: 55px;
        margin-left: 50px;
        color: #750dff;
    }
    
    [type="date"]::-webkit-calendar-picker-indicator {
      opacity: 100;
      }
    
      input[type="date"]::-webkit-inner-spin-button {
      display: block;
      }
      
    #admintable table th {
        font-size: 0.9em;
        font-weight: 700;
        padding: 0.6em 1em 0.6em 1em;
        text-align: left;
        background-color: #3948a4;
        color: white;
    }
    
    #admintable table thead {
        border-bottom-color: #3948a4;
        border-bottom: solid 2px;
        cursor:pointer;
    }
    
    #admintable table td {
        padding: 0.1em 1em 0.1em 1em;
        font-size: 12px;
        cursor: context-menu;
    }
    
    .divactionmodal {
        width: 120% !important;
        left: -10% !important;
        padding-top: 8% !important;
    }
    
    .divactionmodal {
        display: none;
        position: fixed;
        z-index: 30;
        padding-top: 10%;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0,0.4);
        margin-top: -40px;
    }
    
    .divactionmodal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 2%;
        /*border: 1px solid #888;*/
        width: 50%;
        overflow-y: scroll;
        height: 400px;
        padding-top: 0%;
    }
    
    .divheader{
        background-color: #fefefe;
        margin: auto;
        padding-left: 2%;
        padding-right: 2%;
        width: 50%;
        height: 20px;
    }
    
    
    .close {
        color: #aaaaaa;
        float: right;
        font-size: 30px;
        font-weight: bold;
        cursor:pointer;
    }
    
    .asterisk2{
        color:blue;
    }

      /* Safari */
    @-webkit-keyframes spin {
        0% { -webkit-transform: rotate(0deg); }
        100% { -webkit-transform: rotate(360deg); }
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    @media screen and (max-width: 950px) {
        
        #chartContainer3, #chartContainer1, #chartContainer2, #chartContainer4, #chartContainer5{
            width:95%;
            display:block;
            height:300px;
        }
        
        #chartContainer6{
            width:95%;
            display:block;
            height:400px;
        }
    }
    
    @media screen and (max-width: 553px) {
        .label1, .label2{
            font-weight:700;
            display:block;
        }
    }
    
    @media screen and (max-width: 600px) {
        .pwloader{
            position: initial;
            top: 50%;
            left: 50%;
            margin: 10%;
            width: 80%;
        }
        
        #report{
            width:90%;
        }
        
    }
    
    

    .btn {
        margin-bottom: 1rem;
        letter-spacing: -0.025rem;
        text-transform: uppercase;
        box-shadow: 0 4px 7px -1px rgba(0, 0, 0, 0.11), 0 2px 4px -1px rgba(0, 0, 0, 0.07);
        background-size: 150%;
        background-position-x: 25%;
        padding: 5px 8px;
        border-radius: 5px;
        margin: 0 5px;
        width: 180px;
        display: inline-block;
        text-align:center;
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
    }
    
    .btn.bg-gradient-dark {
        color: #fff;
        background-image: linear-gradient(310deg, #141727 0%, #3A416F 100%);
    }
    
    .btn-light, .btn.bg-gradient-light {
        color: #3A416F;
        background-image: linear-gradient(310deg, #CED4DA 0%, #EBEFF4 100%);
    }