.box-border{
border: 2px solid #0f0f0f;
}
.loading-state {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .loading {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 10px solid #ddd;
    border-top-color: #3E97FF;
    animation: loading 1s linear infinite;
  }

  @keyframes loading {
    to {
      transform: rotate(360deg);
    }
  }

  .grey-card
  {
    background-color: #8080801f;
  }


  
.overlay-state {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.925); /* Semi-transparent background */
  display: flex;
  justify-content: center;
  align-items: center;
}
  .image-container {
  width: 800px; /* Set a fixed width */
  height: 500px; /* Set a fixed height */
  overflow: scroll; /* Hide any overflow */
}

.image-container img {
  width: 100%; /* Make the image fill the container */
  height: 100%; /* Make the image fill the container */
  /* object-fit: cover; Cover the container while maintaining aspect ratio */
  object-fit: contain; /* Cover the container while maintaining aspect ratio */
}
.overlay-download,
.overlay-zoom-in,
.overlay-zoom-out {
  position: absolute;
  top: 29px;
  padding: 7px;
  background-color: rgba(35, 35, 35, .65); /* Semi-transparent background */
  border: none;
  cursor: pointer;
  border-radius: 15px;
}

.overlay-zoom-in {
  right: 5em;
}

.overlay-zoom-out {
  right: 9em;
}
.overlay-download {
  right: 13em;
}
.overlay-prev,
.overlay-next {
  position: absolute;
  top: 18em;
  padding: 10px;
  background-color: rgba(35, 35, 35, .65);  /* #ffffff Semi-transparent background rgba(255, 255, 255, 0.8);*/
  border: none;
  cursor: pointer;
  font-weight: bolder;
  border-radius: 15px;
}
.overlay-close{
  position: absolute;
  top: 29px;
  padding: 7px;
  background-color: rgba(35, 35, 35, .65);
  border: none;
  cursor: pointer;
  font-weight: bolder;
  border-radius: 15px;

}
.overlay-close {
  right: 13px;
}

.overlay-prev {
  left: 15px;
}

.overlay-next {
  right: 15px;
}
  
.faIconBefore
{
  color: #000000ba !important;
}

.faIconAfter
{
  color: rgba(var(--bs-primary-rgb),var(--bs-text-opacity))!important;
}  

/* 
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 120%;
  color: white;
  text-align: center;
} */
.footer{
  color: white;
  text-align: center;
  padding: 0px;
}
.footer-content h2 { 
 
  color: #fff; 
} 

.footer-content h5, 
.footer-content p, 
.footer-links a { 
  color: #fff; 
} 

.footer-links a:hover { 
  text-decoration: underline; 
} 

.footer hr { 
  background-color: #fff; 
} 

.app-footer,
.push {
  height: 100px;
}
.app-footer,
.pushSchoolPlanner {
  height: 175px;
}


.menu-link:hover {
  background-color: #f0f0f0; /* Change the background color on hover */
  /* color: #3E97FF !important;  */
}

[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link.active {
    transition: color .2s ease;
    /* background-color: #f0f0f0; */
    background-color: #ebe8e8;
    color: var(--bs-primary);
}

.btn-outline-primary
{
  color: #0d6efd;
  border:1px solid #0d6efd !important;

}
.btn-outline-primary:active {
 
  background-color: #0d6efd;
  /* border-color: #0d6efd; */
}


.btn.btn-outline-primary.active{
  color: #fff;
}
.btn.btn-light-primary.greenbg
{
  background-color: green;
  color: white !important;
}



.detail-row .label {
  flex: 1;
  font-weight: bold;
  color: gray;
}

.detail-row .value {
  flex: 2;
  color: black;
}

@media (max-width: 767px) {
  .detail-row {
      flex-direction: column;
  }

  .detail-row .label, .detail-row .value {
      flex: 1;
  }

  .row.margintop {
      display: flex;
      flex-direction: column;
  }

  .col-md-3 {
      width: 100%;
      margin-bottom: 10px;
  }

  .col-md-3.text-right {
      text-align: left;
  }

  .row.margintop .btn {
      width: 100%;
      margin-bottom: 10px;
  }

  .row.margintop .col-md-2 {
      width: 100%;
      margin-bottom: 10px;
  }

  .row.margintop .col-md-2 button {
      width: 100%;
  }

  .message {
    max-width: 100%;
}
.fc th {
  text-align: center;
  height: 20px;
  font-size: medium;
}
.card-left{
  margin-left: 2em;
}
.overlay-prev, .overlay-next {
  position: absolute;
  top: 24em;
  padding: 10px;
  background-color: rgba(35, 35, 35, .65);
  border: none;
  cursor: pointer;
  font-weight: bolder;
  border-radius: 15px;
}
.min-w-300px {
  min-width: 250px !important;
}

}
@media (max-width: 991.98px) {
  body[data-kt-drawer=on] {
      overflow: scroll !important;
  }
  /* body[data-kt-app-header-minimize=on] {
      overflow: hidden !important;
  } */
}



.compose-button {
  align-self: flex-end;
  margin-top: 10px;
}

/* Base styles for the chat container */
#kt_chat_messenger_body {
  display: flex;
  flex-direction: column;
  width: 100%; /* Set to 100% for responsive design */
}

/* Styles for individual messages */
.message {
  max-width: 80%;
  border-radius: 10px;
  padding: 10px;
  margin: 5px;
  display: flex;
  flex-direction: column;
  background-color: #dee1e6;
}

/* Align user messages to the right */
.message.user {
  align-self: flex-end;
  /* background-color: #a1c6e7; */
  background-color: #a1c6e730;
  text-align: right;
}

/* Align other messages to the left */
.message.other {
  align-self: flex-start;
  text-align: left;
}

/* Styles for attachments */
.attachment img {
  max-width: 100%;
  height: auto;
}




.scrollable-horizontal-container {
    display: flex;
    flex-direction: column;
}

.image-section, .attachments-section {
    margin-bottom: 10px;
}

.image-wrapper {
    display: inline-block;
    margin-right: 10px;
}

.image-input-wrapper {
    width: 100px;
    height: 100px;
    background-size: cover;
    background-position: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
}

.image-group {
    display: flex;
    flex-wrap: wrap;
}

.more-images .image-input-wrapper {
    background-color: rgba(0, 0, 0, 0.7);
    font-size: 18px;
}

.attachment-wrapper {
    display: block;
    margin-bottom: 5px;
}

.btn-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #0d6efd;
}

.btn-link i {
    margin-right: 5px;
}



/* .btn {
  display: inline-block;
  margin-right: 10px; 
} */





/* .faIconAfter
{
  color:#ffffff !important;
}  
.activeMenu
{
transition: color .2s ease;

    background-color: var(--primary-background-color);
    color: var(--bs-primary); 
  
} */