/* here you can put your own css to customize and override the theme */
.error{
    color:red;
    display: none;
    padding-top: 5px;
}
.error.active {
  display: block;
}
#footer_brands .owl-item > a {
  margin-left: 5px;
  margin-right: 5px;
  display: block;
}
table.ui-datepicker-calendar .ui-state-default {
    background: none !important;
}
table.ui-datepicker-calendar .ui-datepicker-current-day .ui-state-default {
    background: #363636 !important;
    color:white;
}
.lesson-grid{
  display:grid;
  grid-template-columns:repeat(9,1fr);
  gap:6px;
  margin-top:10px;
}

.lesson-box{
  display:flex;
  justify-content:center;
  align-items:center;
  background:#eee;
  padding:6px;
  border-radius:6px;
  cursor:pointer;
}

.lesson-box input{
  display:none;
}

.lesson-box:has(input:checked){
  background:#007bff;
  color:white;
}


.asset-image{
  display:inline-block;
  margin: 0 auto;
}
.slider-aseet {
  height: auto !important;
}

.slider-aseet img {
  width: 100%;
  height: auto;
  display: block;
}

.slick-track,
.slick-slide {
  height: auto !important;
}

.product-main-image{
  overflow: hidden !important;
}

#loader {
    display: none; /* Hidden initially */
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.7);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

/* Spinner animation */
.spinner {
    width: 50px;
    height: 50px;
    border: 6px solid #ccc;
    border-top-color: #3498db;
    border-radius: 50% !important;
    animation: spin 1s linear infinite;
}

/* Keyframes for rotation */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.avatar-upload{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.avatar-wrapper{
  width:160px;
  height:160px;
  position:relative;
  cursor:pointer;
}
.avatar-image{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  border:6px solid #f3f3f3;
  background:#f3f3f3;
  box-shadow:0 8px 20px rgba(0,0,0,0.08);
}
.avatar-edit{
  position:absolute;
  right:10px;
  bottom:10px;
  width:30px;
  height:30px;
  background:#3b6ef5;
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 10px rgba(0,0,0,0.2);
}
.avatar-edit .material-icons{
  font-size:20px;
}
#avatarInput{
  display:none;
}

.panel-default > .panel-heading {
  background-color: #eef4ff;
  color: #2F67F6;
  border: 1px solid #dbe7ff;
}

.panel-default > .panel-heading a {
  color: #3e4d5c;
  display: block;
}

.panel-default > .panel-heading:hover a {
  color: #fff;
  background-color: #2554d6;
  text-decoration: none;
}

.panel-default > .panel-heading .accordion-toggle:after {
  content: "\f078"; /* fa-chevron-down */
  font-family: FontAwesome;
  float: right;
}

.panel-default > .panel-heading .accordion-toggle.collapsed:after {
  content: "\f054"; /* fa-chevron-right */
}

.panel-default > .panel-heading:hover {
  background-color: #2554d6;
}