body, h1, h2, h3, h4,h5, h6  {  
 font-family: "Noto Sans", sans-serif !important;
  }
.btn-grd-info-bg {
    background-image: linear-gradient(310deg, #f4748d 0%, #ee264e 100%) !important;border: 0;
}
.text-ogs{color:#bb4f00 !important;}
.text-blues{color:rgb(2 33 194) !important;}
.text-purple{color:#950197 !important;}
.text-pink{color: #d5007e !important;}
.bd-green{border-bottom: 3px solid #02c27a;}
.bd-red{border-bottom: 3px solid #f2395c;}
.db-title{font-size: 18px;font-weight: 700;}
.task-action-tab.nav-pills .nav-link { margin: 0 10px; }

.loginBg{ background-image: url("../images/login-bg.jpg");
  background-color: #cccccc;
  height: 500px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;}
 
.dash-lable{
    font-size: 16px !important;
    padding: 6px 12px !important;}

  .nt-round-bx{ background: #fff3f6;
    border-radius: 10px;
    padding: 8px;
    color: #fc185a;
    font-weight: 600;
    line-height: 20px;
    height: 34px;
    width: 38px;
    text-align: center;
    display: block;}

[dir] body
  {  
    font-size: 14px;
   
    letter-spacing: 0.5px !important;
    background-color: #eff1f3 !important;}

    .boxOUter { display: grid; grid-template-columns: 1fr 1fr ; }

    .loginRight img { width: 100%; height: 100%; border-radius: 1rem;}
    .box_Outer { width: 60%; margin: auto; display: flex; justify-content: center; align-items: center;}

    body.login {
  margin: 0;
  padding: 0;
  height: 100vh; /* Full viewport height */
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center;     /* Center vertically */
  background-color: #000; /* optional background */
}
.boxOUter.boxgrid-1 { grid-template-columns: 1fr !important;}
label.form-label { color: #000 !important;}
.signupOuter .box_Outer{ width: 80%;}

/* Style for all input placeholders */
input::placeholder,
textarea::placeholder {
  color: #888;             /* Change color */
  font-size: 14px;         /* Change font size */
  opacity: 1;              /* Make sure it's fully visible */
}

/* Optional: specific styling for different input types */
input[type="email"]::placeholder {
  color: #888;
}

input[type="password"]::placeholder {
  color: #888;
}

.card-body .top { display: grid; grid-template-columns: 150px 30% 1fr ; padding: 15px 0 15px 0 ;}

 .dataTables_wrapper .dataTables_paginate  a.paginate_button { background: #fff !important; color: #0d6efd !important; border: solid 1px #dee2e6;}
.dataTables_wrapper .button, .dataTables_wrapper .dataTables_paginate  a.paginate_button.current, .dataTables_wrapper .dataTables_paginate  a.paginate_button:hover { background: #0d6efd !important; color: #fff !important; border: solid 1px #dee2e6 !important;}
.dataTables_wrapper .dataTables_paginate  a.paginate_button.disabled { background: #dee2e6 !important;}

 
.dataTables_wrapper .button { padding: 7px 12px !important; border-radius: 7px !important; background: #2196f3 !important;}
table.dataTable>tbody>tr.child ul.dtr-details { display: flex; gap: 20px; align-items: center;}


li[data-dtr-index="6"] .dtr-title, li[data-dtr-index="7"] .dtr-title{
  display:none !important ;

}
.spaceBar { height: 30px; display: block;}
.dataTables_wrapper  thead tr td { background-color: #fff !important; padding-left: 18px;}
table.dataTable>tbody>tr.child ul.dtr-details>li { padding: 0px !important;}


 .emoji-rating input[type="radio"] {
      display: none !important; 
    }
    .emoji-rating label {
      font-size: 2rem;
      cursor: pointer;
      transition: transform 0.2s;
    }
    .emoji-rating input[type="radio"]:checked + label {
      transform: scale(1.3);
    }



@media (min-width: 100px) and (max-width: 767px) {
  .boxOUter { grid-template-columns: 1fr;}
 .box_Outer { width: 90%; padding: 5% 0 ;}
 body.login { height: 100%;}
 .rememberPass.text-end { text-align: left !important  ; padding-top: 10px;}
 table.dataTable>tbody>tr.child ul.dtr-details, .card-body .top {grid-template-columns: 1fr; display: grid;}
.student_counselling_view_outer li.nav-item { margin: 10px 0 !important;}
td.child { padding: 0px !important;}
.dtr-details li:last-child .dtr-data { display: grid; grid-template-columns: 1fr; gap: 10px;}
table.dataTable>tbody>tr.child ul.dtr-details>li:last-child { padding-bottom: 30px !important;}



 

}
.formLable { font-size: 18px; color: #000 !important; font-weight: 600; margin: 10px  0 ; display: block; }
.mg-auto{margin: 0 auto;}
.user-info{border-radius: 50%;width: 110px;height: 110px;border: 2px solid  #02c27a;display: flex;justify-content: center;align-items: center;font-size: 32px;font-weight: 700;color: #02c27a;margin-bottom: 20px;}
.red-txt{color: #f2395c;border: 2px solid  #f2395c;}
.breadcrumb-title{font-size: 24px;font-weight: 700;}
.comLabel{font-size: 16px;color: #000;margin-bottom: 10px;padding: 0}
.comBoxSp{margin-bottom: 15px;}
.comTitle{font-size: 26px;font-weight: 700;}
.comh4Title{font-size: 22px;}

/**/
.timeline {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  padding: 30px 0;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /*max-width: 180px;*/
}

.circle {
  border: 6px solid #00c389;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  margin-bottom: 8px;
  position: relative;
}

.circle.pending::before{
    border-left: 6px solid #888;
}
.circle::before {
    content: '';
    bottom: 0;
    border-left: 6px solid #00c389;
    height: 24px;
    position: absolute;
    left: 50%;
    margin-left: -3px;
    top: 74px;
    z-index: 1;
}


.circle.pending {
  border-color: #888;
}

.circle img {
  width: 40px;
  height: 40px;
}

.arrow {
  width: 100%;
  background: #00c389;
  color: white;
  padding: 10px 30px 10px 30px;
  clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%, 10% 50%);
  margin-top: 10px;
}
.arrow a{color: #fff;text-decoration: none;font-weight: 700;}

.arrow.pending {
  background-color: #888;
}

.status {
  font-size: 14px;
  color: #00c389;
  margin-top: 5px;
}

.status.pending {
  color: #888;
}