@font-face {
    font-family: "OpenSans";
    font-weight: 300;
    src: url("../fonts/open-sans/OpenSans-Light.ttf") format("truetype");
}

@font-face {
    font-family: "OpenSans";
    font-weight: 400;
    src: url("../fonts/open-sans/OpenSans-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "OpenSans";
    font-weight: 600;
    src: url("../fonts/open-sans/OpenSans-Semibold.ttf") format("truetype");
}

@font-face {
    font-family: "OpenSans";
    font-weight: 700;
    src: url("../fonts/open-sans/OpenSans-Bold.ttf") format("truetype");
}
:root {
    --cu-font-open-sans: OpenSans;
    --cu-font-size-1: 0.813rem;
    /* 13px */
    --cu-font-size-2: 0.75rem;
    /* 12px */
    --cu-font-size-3: 0.687rem;
    /* 11px */
    /* --cu-default-border-radius: 0.25rem;
  --cu-header-bg-1: #d0d9d8;
  --cu-header-bg-2: #01a29c;
  --cu-header-bg-3: #62b5ad;
  --cu-space-1: 0.25rem;
  --cu-space-2: 0.5rem;
  --cu-space-3: 0.75rem;
  --cu-space-4: 1rem;
  --cu-border-color: #c7c7c7;
  --cu-btn-min-width: 4.5rem;
  --cu-dropdown-toggle-arrow-width: 0.25em;
  --cu-tabs-border-color: #2c83cc;
  --cu-tabs-color: #656464;
  --cu-bg-highlited: #f7f7f7;
  --cu-input-focus-border-color: #689ddc;
  --cu-input-color: #212529;
  --cu-input-box-shadow: 0 0 4px 1px #fff;
  --cu-form-check-input-bg-color: #428bca; */
    --bs-body-font-family: var(--cu-font-open-sans);
    --bs-body-font-size: var(--cu-font-size-1);
  --bs-body-color: #000;
  --bs-body-bg: #f9f9f9;
  --bs-primary: #095aac;
  --bs-primary-rgb: 0, 115, 173;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.15);
  --bs-btn-hover-border-color: transparent;
}

@media (min-width: 768px) 
{
    /* #data p {
        display: none;
    } */
    
}
a{
  color: white;
}

    .bg-body{
        background:url(../images/bg-blue.png) no-repeat;
        background-size: cover;
    }

    .date-nav{
      color:#fff;
    }

    .login-bg{
      background: linear-gradient(to right,#155799,#01a29c);
      box-shadow: 0px 4px 10px 1px rgb(0 0 0 / 20%);
      padding: 10px;
    }

    .dept-title{
      border-bottom: 1px solid white;
      width: 80%;
    }

   .login-form{
    width: 90%;
    max-width: 500px;
    border-radius: 0px;
    color: white;
   }
  

   input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }
  
  button {
    background-color: #04AA6D;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
  }
  
  button:hover {
    opacity: 0.8;
  }
  
  .cancelbtn {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
  }
  
  .imgchk-block {
    text-align: center;
    margin: 24px 0 12px 0;
  }
  
  img.avatar {
    width: 40%;
    border-radius: 50%;
  }
  
  .chk-block {
    padding: 16px;
  }
  
  span.psw {
    float: right;
    padding-top: 16px;
  }
  
  /* Change styles for span and cancel button on extra small screens */
  /* @media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
  } */




  .ico-user{
    background-color: #034062;
    font-size: 22px;
    padding: 6px 14px;
  }
  #captcha {
    display: block;
    width: 130%;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #202f3f;
    appearance: none;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    background: #badfff !important;
    padding: 0.396rem;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: center;
} 
  .captcha-code{
    background-color: #9ec8d7;
    color:black;
    letter-spacing: 3px;
    font-weight: 600;
    font-size: 16px;
  }

  .captcha-title{
    font-size: 14px;
  }
  .ico-ref{
    font-size: 20px;
  }

  .entr-cap > input{
    padding: 7px 0px;
    width: 83px;
    /*letter-spacing: 3px;*/
    font-weight: 400;
    font-size: 13px;
    text-align: center;
  }
  .text-msg{
    font-size: 14px;
    color: #ffc107;
   }
  .redText{
    font-size: 14px;
    color: #ffc107;
   }
.blink {
  animation: blink 1s linear infinite;
}

  .btn-login > button{
    width:20%;
    background-color: #288c9b;
    border: transparent;
    border-radius: 5px;
    padding: 5px;
    box-shadow: 0px 4px 10px 1px rgb(0 0 0 / 10%);
  }

  .service-msg{
    -webkit-animation: colorchange 2.5s infinite alternate;
    font-size: 16px;
  }

  @-webkit-keyframes colorchange {
      0% { color: rgb(255, 225, 55); }
      10% { color: #e22b2b;}
      /* 20% { color: #A52A2A;} */
      30% { color: #f1cd00;}
      40% { color: #DC143C;}
      50% { color: #00bb00;}
      /* 60% { color: #8B008B;}
      70% { color: #8B0000;} */
      /* 80% { color: #2F4F4F;} */
      /* 90% { color: #008000;} */
      60% { color: pink;}
  }

  .copyryt-text > p {
        color: white;
        text-align: center;
  }
  .esign-consent{
    max-width: 700px;
  }
  .modal-header-bg{
    background-color: #337ab7;
    color: white;
    padding: 5px;
  }
  .esign-agr > input {
    width: 30%;
    margin-left: 10px;
    margin-right: 10px;
    position: relative;
  }
  .esign-agr > span {
    position: absolute;
    right: 270px;
  }
 /* The container */
.check-block {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 13px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.check-block:hover {
 
  background-color:#d5b760;
}

/* Hide the browser's default checkbox */
.check-block input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.check-block:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.check-block input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.check-block input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.check-block .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
  
.legend {
    position: absolute;
    top: -18px;
    left: 13px;
    padding: 5px 10px;
    color: rgb(248, 244, 244);
    border: transparent;
    background: linear-gradient(45deg, #155799, #11659a);
    font-size: 16px;
    font-weight: 600;
}

.legend-nav{
  position: relative;
  border: 1.5px solid rgb(204, 200, 198);
}