/* LogOn master page */
body { 
margin: 0;
width: 100vw;
height: 100vh;
background: transparent url('login/login-background.png') 0% 0% no-repeat padding-box;
opacity: 1;
background-size: cover;
}
/*body {
        background-color:#9ac45b;*/ 
/*}*/
.l-link { text-decoration: none;  }
.a-link { text-decoration: none; color: white; }
.g-link { text-decoration: none; color: #9ac45b; }
.b-link { text-decoration: underline; color: black; font-weight:bold; }
a:hover { text-decoration: none; }
#login-div {
     width:1000px; height:600px;

}
/*#circle-big-tbl { width:1120px; height:620px; }
#circle-big { background-image:url('login/big-circle.png'); background-repeat:no-repeat; }
#circle-small-tbl { width:1220px; height:680px; }
#circle-small { background-image:url('login/small-circle.png'); background-repeat:no-repeat; background-position:right bottom; }*/
#circle-small-tbl {
   /*top: 133px;
left: 403px;*/
width: 1170px;
height: 750px;
opacity: 1;
border-radius:30px;
background-color:white;
}
#login-left {
     background-color: white; 
  
}
#login-right { background-color: #f7f7f7; }
.login-inner-div { height: 100%; width:50%; float:left; text-align:center; }
.placeholder-div { 
    height: 100%;
     /*margin: 25px;*/

}
#bell-icon { background-image:url('login/bell-icon.png'); background-repeat:no-repeat; height:50px; }
#bell-head { color: #9ac45b; margin-top: 10px; font-size:18px; font-weight:bold; }
#address { color: white; margin-left: 200px; width: 700px; height:50px; }
#address td { height:50px; text-align:center; font-size:14px; font-weight:bold; }
.news-head { font-size:14px; font-weight:bold; margin-top:50px; }
.news-text { font-size:12px; text-align: justify; margin-top:20px; line-height: 20px; }
#navidoc-logo { 
    /*background-image:url('images/logo.png'); background-repeat:no-repeat; background-position:center bottom; height:70px;*/
    /*top: 154px;
left: 450px;*/
width: 100%;
height: 100%;
/*background: transparent url('login/navidoc-logo.png') 0% 0% no-repeat padding-box;*/
opacity: 1;
}
/* LogOn page */
.btn-green input { width: 107px; height: 28px; background-color: #2F728F; color: white; border: none; border-radius: 5px;}
.icon-field span:first-child { position: absolute; top: 6px; left: 12px; width: 25px; height: 25px; }
.icon-field span:last-child { position: absolute; top: 6px; right: -31px; }
.font-b14 { font-size: 12px; font-weight:bold; }
.font-b16 { font-size: 16px; font-weight:bold; }
.icon-field { position: relative; font-size: 18px; font-weight: bold; }
.icon-field input { width: 350px; height: 40px; background: #f7f7f7; text-indent: 60px; font-size: 14px; font-weight:bold; border: none; }
.user-icon { background-image:url('login/profile-icon.png'); background-repeat:no-repeat; }
.pass-icon { background-image:url('login/lock-icon.png'); background-repeat:no-repeat; }

.span-icon { width:22px; height:22px; display:inline-block; vertical-align: middle; }
.email-icon { background-image:url('login/mail-icon.png'); background-repeat:no-repeat; }
.address-icon { background-image:url('login/pin-icon.png'); background-repeat:no-repeat; }
.phone-icon { background-image:url('login/phone-icon.png'); background-repeat:no-repeat; }
.jul2018 { background-image:url('images/Jul2018.png'); background-repeat: no-repeat; height:380px; width:630px; margin:5px 15px 0 10px; }




.logo-design{
 width: 281px;
height: 163px;
top: 154px;
left: 450px;
}




.form-group {
  margin-bottom: 10px;
  font-family: Roboto, sans-serif;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #444;
  margin-bottom: 5px;
}

.icon-field {
  position: relative;
}

.eye-icon { 
    background-image:url('login/view-password.png');
             background-repeat:no-repeat;
              width: 20px;
  height: 20px;
  background-size: contain;
  margin-right: 8px; 
  flex-shrink: 0;
}

.icon-field input {
border: none;
  background: transparent;
  outline: none;
  flex: 1; 
width: 300px;
height: 36px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #EBEBEB;
opacity: 1;
 font-size: 14px;
  font-weight: normal;
}

.user-icon,
.pass-icon {
  width: 20px;
  height: 20px;
  background: url('/content/icons/user.png') no-repeat center;
  background-size: contain;
}

.user-icon {
  background-image: url('login/user.png'); 
}

.pass-icon {
  background-image: url('login/password.png');
}


.form-options {
  display: flex;
  grid-gap:5px;
  align-items: center;
  margin: 15px 0;
  font-size: 13px;
}

.form-options label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #555;
}

.forgot-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  font-size: 13px;
  color: #555;
  /*font-weight: 500;*/
  gap: 6px; /* spacing between icon and text */
}

.forgot-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url('login/forgot password.png') no-repeat center;
  background-size: contain; /* makes it scale properly */
}

.contact-strip {
    display: flex;
    justify-content: center; /* centers all items */
    align-items: center;
    gap: 20px; /* spacing between items */
    font-size: 14px;
    color: #3B3B3B;
    padding: 10px 0;
    top:661px;
    position:absolute;

}

.contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #3B3B3B;
}

.contact-item .icon {
    font-size: 14px;
    color: #3B3B3B;
}
.contact-item span{
    font:14px;
}
.contact-item  img{
    height:18px;
    width:18px;
}



/* Hide the default checkbox */
.custom-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Label container */
.custom-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 13px;
  color: #555;
  gap: 8px;
  /*font-weight: 500;*/
}

/* The custom box */
.custom-checkbox .checkmark {
  width: 18px;
  height: 18px;
  background-color: white;
  border: 2px solid #2F728F;  /* border color */
  border-radius: 3px;          /* optional: makes corners slightly rounded */
  display: inline-block;
  position: relative;
  transition: all 0.2s ease;
}

/* When checked → fill blue */
.custom-checkbox input:checked + .checkmark {
  background-color: #2F728F;
  border-color: #2F728F;
}

/* The white tick mark */
.custom-checkbox .checkmark::after {
  content: "";
  position: absolute;
  display: none;
  left: 4px;
  top: 0px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Show tick when checked */
.custom-checkbox input:checked + .checkmark::after {
  display: block;
}