/* Layout navbar Css */
#top-navbar-white.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  padding: 10px 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#top-navbar-white .toggle-button {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

#top-navbar-white .navbar-right {
  display: flex;
  align-items: center;
}

#top-navbar-white .icon-button {
  background: none;
  border: none;
  font-size: 20px;
  margin-left: 20px;
  cursor: pointer;
  position: relative;
}

#top-navbar-white .notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #dc3545;
  color: white;
  border-radius: 50%;
  padding: 2px 5px;
  font-size: 10px;
}


#top-navbar-white .profile {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-align: end;
  margin-left: 20px;
}

#top-navbar-white .profile h3 {
  text-align: end;
  line-height: 1;
  margin-bottom: 4px;
  font-weight: 600;
  font-size:16px;
}

#top-navbar-white .profile p {
  line-height: 1;
  font-size: 14px;
  opacity: .6;
  margin-bottom:0px !important;
}

#top-navbar-white .profile .img-box {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
}

#top-navbar-white .profile .img-box img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#top-navbar-white .menu {
  position: absolute;
  top: calc(100% + 24px);
  right: 16px;
  width: 150px;
  min-height: 100px;
  background: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .2);
  opacity: 0;
  transform: translateY(-10px);
  visibility: hidden;
  transition: 300ms;
}

#top-navbar-white .menu::before {
  content: '';
  position: absolute;
  top: -10px;
  right: 14px;
  width: 20px;
  height: 20px;
  background: #fff;
  transform: rotate(45deg);
  z-index: -1;
}

#top-navbar-white .menu.active {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  background: #fff;
  z-index: 1;
}

#top-navbar-white .menu ul {
  position: relative;
  display: flex;
  flex-direction: column;
  z-index: 10;
  background: #fff;
}

#top-navbar-white .menu ul li {
 list-style: none;
}

#top-navbar-white .menu ul li:hover {
  background: #eee;
}

#top-navbar-white .menu ul li a {
  text-decoration: none;
  color: #000;
  display: flex;
  align-items: center;
  padding: 15px 20px;
  gap: 6px;
  }

#top-navbar-white .menu ul li a i {
  font-size: 1.2em;
}
.settings-icon-top{
  color : #92a8ce !important;
}
.notification-icon-top{
  color : #dc3545 !important;
}




/* breadcrumb */

nav ol.breadcrumb{
	margin-top: 20px !important;
}
.breadcrumb{
  --bs-breadcrumb-divider:none;
}
.breadcrumb-item a{
  text-decoration: none;
  color:#5f6265;
}
.breadcrumb-item a:hover{
  color:#0f222e;
  font-weight:bold;
}

.system-name{
  font-weight: 700;
  font-size: 20px;
}

.footer-bg{
  background-color: #0f222e;
}

.bold-heading-sub{
  font-weight: bolder;
  font-size: 18px;
}
.page-item.active .page-link{
  border-color:#fff !important;
}
.btn-generate{
  background-color: #47536d !important;
  color: white !important;
}


/* From adminlayout css */
.bi-pencil-fill:hover,.bi-box:hover, .bi-trash-fill:hover, .bi-plus-square-fill:hover,.bi-patch-plus-fill:hover,.bi-link:hover,.bi-window-plus:hover,
.bi-arrow-down-square-fill:hover, .bi-arrow-up-square-fill:hover, .bi-arrow-left-square-fill:hover, .bi-arrow-right-square-fill:hover,
.bi-printer-fill:hover,.bi-grid:hover,.bi-eyeglasses:hover.bi-people-fill:hover,.bi-journals:hover,.bi-zoom-out:hover, .bi-zoom-in:hover, .bi-calendar3:hover, .bi-plus-circle-fill:hover,.bi-lock-fill:hover,.bi-clipboard-fill:hover,.bi-arrow-clockwise:hover,.bi-record-circle-fill:hover,.bi-box2-fill:hover{
  color: #0f222e!important;
}
.bi-pencil-fill,.bi-box, .bi-trash-fill, .bi-plus-square-fill,.bi-patch-plus-fill,.bi-link,.bi-window-plus,
.bi-arrow-down-square-fill, .bi-arrow-up-square-fill, .bi-arrow-left-square-fill, .bi-arrow-right-square-fill,.bi-grid,
.bi-printer-fill, .bi-journals,.bi-eyeglasses, .bi-zoom-in, .bi-calendar3, .bi-zoom-out,.bi-plus-circle-fill,.bi-lock-fill,.bi-clipboard-fill,.bi-people-fill, .bi-arrow-clockwise, .bi-record-circle-fill,.bi-box2-fill{
  color : #0f222e !important;
  font-size : 20px;
}
.bi-check-circle{
  font-size : 20px;
  color: #2dd070 !important;
}
.bi-x-circle{
  font-size:20px;
  color: #fe2020 !important;
}
#add-icon-row a{
  font-weight: bold !important;
}
#add-icon-row a:hover {
  color: #0f222e!important;
  font-weight: bold !important;
}
.SearchButton {
  padding: 5px 10px;
  width:10%;
  background-color: #2ed070 !important;
  color: #fff !important;
  border: none;
  border-radius:5px;
  cursor: pointer;
  font-weight: 700;
}

.ClearButton {
  padding: 5px 8px;
  width:8%;
  background-color: #0259be !important;
  color: #fff !important;
  border: none;
  border-radius:5px;
  cursor: pointer;
  font-weight: 700;
}
.SearchButton:hover {
  background-color: #2ed070;
  color:#fff;
}
.ClearButton:hover{
  background-color: #0259be;
  color:#fff;
}
.SubmitButton,
.SubmitButton:hover
{
  background-color:#47536d !important;
  color:white;
  width:100%;
}

.container{
  max-width:3000px !important;
}

.vis_html{
  display: flex;
  justify-content: right;  
}
.cms_1 , .cms_2{
  border: 1px solid #d7d6d6;
  margin-left:10px;
  margin-bottom: -20px;
}
.cms_1:hover , .cms_2:hover{
  border: 1px solid #d7d6d6;
}
.tox-statusbar__branding{
  display:none !important;
}
.btn-table-view-btn{
  background-color: #2b74f3 !important;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
}
.highlighted-section-school-category{
  background-color: #f4f7fa;
  padding: 10px 20px;
  box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.1);

}
.sub-heading-highlight-view{
  font-weight: 700;
  font-size: 14px;
}
.highlight-border{
  border-color: #aeaeae;
}
.small-heading-highlight-view{
  background-color: #edebec !important;
  border-radius: 29px;
  border: 1px solid #d5d5d5;
}
.small-heading-highlight-view-text{
  font-weight: 700;
  font-size: 12px;
  text-align: center;
}
.total-text{
  font-size: 18px;
  font-weight: 700;
}
.pink-text{
  color: #d722d7;
}
.green-text{
  color: #059669;
}
.blue-text{
  color:#327aff;
}
.red-text{
  color:#ea3336;
}
.purple-text{
  color:#4b00cb;
}
.sub-text-above-total{
  font-weight: normal;
  font-size: 13px;
}
.apexcharts-legend.apexcharts-align-center.apx-legend-position-right{
  top: 40% !important;
}
.apexcharts-legend.apx-legend-position-bottom.apexcharts-align-center{
  justify-content: start !important;
}
.btn-sync-button{
  background-color: #718ebf !important;
}
.class5{
  flex: 2%;
  max-width: 20%;
}
.sync-error{
  color:red !important;
}
.sync-success{
  color:green !important;
}
@media (max-width: 768px) {
  .class5 {
      flex: 100%;
      max-width: 100%;
  }
}
.canvasjs-chart-credit {
  display: none; 
}
.schoolview-page #acadamicSquare span {
  width: 14px;
  height: 14px;
  display: block;
  float: left;
  margin: 1px 3px 0px 0px;
}
.schoolview-page .number {
  color: #3898ec;
}
.schoolview-page .text {
  color: #121b31;
  font-size: 11px;
}
.schoolview-page .yellow {
  color: #ffa54c !important;
}
.schoolview-page h4 {
  text-transform: uppercase;
}
.schoolview-page .disabled {
  pointer-events: none;
  color: gray;
  text-decoration: none;
}
.school-name-highlight{
  color:#718ebf !important;
}
.chart-bg-card{
  height: 100% !important;
}

.white-bg-container{
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
}
.border-radiused{
  border-radius: 10px !important;
}
.view-anchor-tags a{
  color:#0d6efd !important;
  cursor: pointer;
  font-weight: 700;
}
#grid-name{
  word-break: break-all;
}
.icon-color{
  color: #0f222e !important;
}
.overflow-break{
  word-break: break-all !important;
}
.columnStyle {
  color: #25b6f7 !important;
  background-color: #47536d;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.columnStyle h2{
  color: #25b6f7 !important;
}
.columnStyle h2.overall{
  color: #d6143b !important;
}
.spanStyle{
  display: block;
  height: 3px;
  background-color: #f7a71b;
  width: 100%;
}
.overflow-td{
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.hidden-tr-row{
  display: none;
}

/* Integrated CSS */
#main_row_content{
  width:100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
 
}
.tableContainer{
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background-color: #ffffff;
}
.container-section{
  background:#fafafa;
  /* background:#008000; */

  border-radius:12px;
}
/* Navigation 7  Buttons */
.custombtnrowone:hover{
  background-color: #fff !important; 
  color : #04427d !important; 
  border-color: #04427d !important;
}
.custombtnrowtwo:hover{
  background-color: #fff !important; 
  color : #6897b1 !important; 
  border-color: #6897b1 !important;

}
.custombtnrowthree:hover{
  background-color: #fff !important; 
  color : #984771 !important; 
  border-color: #984771 !important;

}
.custombtnrowfour:hover{
  background-color: #fff !important; 
  color : #5e1e78 !important; 
  border-color: #5e1e78 !important;

}
.custombtnrowfive:hover{
  background-color: #fff !important; 
  color : #78c53e !important; 
  border-color : #78c53e !important; 

}
.custombtnrowsix:hover{
  background-color: #fff !important; 
  color : #1c94ac !important; 
  border-color : #1c94ac !important; 

}
.custombtnrowseven:hover{
  background-color: #fff !important; 
  color : #ff8000 !important; 
  border-color : #ff8000 !important; 

}

span.d-flex.flex-column.flex-md-row > a.btn  {
  margin-right: 0px !important; 
 
}
.back-btn{
  text-decoration: none;
  color: #fff;
  background-color: #327aff;
  padding: 5px 25px;
  font-weight: 700;

}
.back-btn:hover{ 
  color: #fff;
}
.apexcharts-menu-icon{
  display: none;
}

#next_div, #prev_div, #next, #prev, #next_yr, #prev_yr {
  background-color: #47536d !important;
  color: #fff !important;
  border-radius: 5px;
  font-size: 12px;
}
#next_div:active,
#prev_div:active,
#prev:active,
#next:active,
#next_yr:active,
#prev_yr:active{
  border-color: #47536d !important;
}

.schoolyear-switcher .btn-sm{
	padding: 2px !important;
  margin: 0px !important;
}
#schoolyearList {
  font-size: 12px;
}
#nextNull, #next_div_null, #prevNull, #prev_div_null {
  background-color: #d2d3d7 !important;
  color: #47536d !important;
  border-radius: 5px;
  font-size: 12px;
}

.fs-custom-3{
  font-size:0.85rem;
}
.fs-custom-4{
  font-size:0.95rem;
}
.fs-custom-7{
  font-size: 3rem;
}

.card-view-more-btn{
  background-color: #55c982 !important;
  border: none !important;
}
.dark-custom{
  color:#3a3f48 !important;
}

.apexcharts-legend.apx-legend-position-bottom.apexcharts-align-center{
    justify-content: center !important;
    margin-top:1rem !important;
}
.highcharts-credits{
  display: none;
}
.required .col-form-label:after {
  content:"*";
  color:red;
}

.border-radiused-top{
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.border-radiused-bottom{
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

.bg-blue-dashboard{
  background-color: #2bc8fc;
}
.select-group-parent select{
  text-align: center !important;
}

/* School DashBoard */
@media (min-width: 1300px) {
  .class-col-5{
    max-width: 20%;
  }
}
.school-dashboard-card .color-yellow{
  color:#ffa54c;
}
.school-dashboard-card .color-blue{
  color:#3898ec;
}
.school-dashboard-card .color-black{
  color:#000;
}
.blue-year{
  color:#04a9f5;
}
.export-button{
  border-radius: 0px !important;
  background-color: #25b6f7 !important;
  border-color: #25b6f7;
  color: #fff !important;
  margin-bottom: 0 !important;
  font-weight: 700 !important;
  font-size: 14px;
}
.border-radius-0{
  border-radius: 0px !important;
}
.btn.border-radius-0{
  --bs-btn-padding-y: 0.2rem !important;
}
.yeargroup-bg-box{
  background-color: #f4f7fa !important;
}
.yeargroup-bg-box button{
  text-transform : uppercase !important;
  font-size: 14px;
  font-weight: 700 !important;
}
.girls{
  color : #ffa8a1;
}
.boys{
  color : #a194ff;
}