.login-bg{
    background: url(../img/kovalam.webp) no-repeat;
    background-size: cover;
    height: 100vh;
    width: 100%;
    margin: 0px;
    padding: 0px;
    position: absolute;
    overflow: hidden;
}
.prog-logo{
    background: url(../img/zignet-logo.jpg) no-repeat;
    background-size: contain;
    height: 345px;
    width: 50%;
    float: left;
}
.center-wrapper{
    width: 80%;
    height: 345px;
    margin: 10% auto;
    max-height: 75%;
    background-color: lightslategray;
    opacity: 0.9;
}
.login-container{
    float: left;
    /* padding: 8% 0px 0px; */
    opacity: 1;
}
.welcome-bar{
    line-height: 40px;
    padding: 30px;
}
/*****Rotor Circle Button Start*******/
/***** 1. Rotor ********/
@-webkit-keyframes rotor{
    from{ -webkit-transform: rotate(0deg); }
    to{ -webkit-transform: rotate(360deg); }
  }
  @-moz-keyframes rotor{
    from{ -moz-transform: rotate(0deg); }
    to{ -moz-transform: rotate(360deg); }
  }
  @-o-keyframes rotor{
    from{ -o-transform: rotate(0deg); }
    to{ -o-transform: rotate(360deg); }
  }
  @keyframes rotor{
    from{ transform: rotate(0deg); }
    to{ transform: rotate(360deg); }
  }

  .button-wrap-1 {
    width: 120px;
    height: 120px;
    margin: 20px 0;
    display: inline-block;
    position: relative;
  }
  .button-wrap-1 .clicker {
      /* Inner circle */
      width: 100px;
      height: 100px; /* 20px smaller b/c of margin below */
      margin: 10px;
      background-color: #fff;
      border-radius: 60px;

      /* Overlays this circle on the .circle */
      z-index: 2;
      position: absolute;

      /* centers the text: adjust to desired size */
      /* padding: 22px 10px; */
      padding: 34px 10px;
      text-align: center;
      font-weight: bold;
      text-transform: uppercase;

      /* shadow */
      -webkit-box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.5);
      -moz-box-shadow:    0px 0px 7px 0px rgba(0, 0, 0, 0.5);
      -o-box-shadow:      0px 0px 7px 0px rgba(0, 0, 0, 0.5);
      box-shadow:         0px 0px 7px 0px rgba(0, 0, 0, 0.5);
    }
.button-wrap-1 .circle {
      /** outer circle **/
      width: 120px;
      height: 120px;
      border-radius: 60px;

      /** image = wedge **/
      background-image: linear-gradient(45deg,
                  white 0%,
                  white 30%,
                  rgb(153, 204, 51) 30%,
                  rgb(153, 204, 51) 70%,
                  white 70%,
                  white 100%);

      /*** outer circle position: under */
      z-index: 1;
      position: absolute;
    }
    .clicker:hover + .circle, .clicker:active + .circle {
      -webkit-animation: rotor 1.5s linear 0s infinite normal;
      -mox-animation: rotor 1.5s linear 0s infinite normal;
      -o-animation: rotor 1.5s linear 0s infinite normal;
      animation: rotor 1.5s linear 0s infinite normal;
    }
/*****Rotor Circle Button End*******/
.grid{
    width: 80%;
    margin: 20px auto;
}
.alt-bg{
    background-color: #99cc33;
    color: black;
}
.grid-header{
    font-weight: bold;
    border: 1px solid black;
}
.grid-row{
    border: 1px solid black;
    cursor: pointer;
}
.grid-row-l{
    font-size: x-large;
}
.grid-row:hover div{
    background-color: #22e198 !important;
}
.grid-row div{
    word-wrap: break-word;
}
.nav-block{
    height: 70px;
    overflow: hidden;
    line-height: 30px;
    width: 80%;
    margin: 10px auto;
    text-align: right;
}
.grid button{
    line-height: 24px;
    margin: 5px;
    cursor: pointer;
    width: max-content;
}
.grid button:hover{
    font-weight: bold;
}
.grid svg{
    margin: 5px 0px 0px;
}
.form-single-col{
    width: 80%;
}
.btn-import{
    margin: 26px 0px !important;
}
.totalCount{
    background-color: #092c4a;
    font-size: 90px;
    font-weight: 800;
    color: white;
    border: blue solid 10px;
    border-radius: 50%;
    width: 175px;
    height: 175px;
    line-height: 150px;
    text-align: center;
    position: fixed;
    top: 90px;
    right: 110px;
}