/* Default styles */
.hide-on-large-screen {
    display: block;
  }
  
  /* Media query to hide the element on larger screens */
  @media (min-width: 1200px) {
    .hide-on-large-screen {
      display: none;
    }
  }

  .mobile-nav {
    max-width: 500px;
  }
  

  .misc-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 1.5rem*2);
    text-align: center
}


  /* Default styles for the modal, displays at the bottom of the screen */


/* Override styles for larger screens, displays in the middle of the screen */
@media (max-width: 768px) {
  .modal.bottom .modal-dialog {
    position: absolute;
    bottom: 0;
    margin: 0;
    width: 100%;
  }
}


/* Override styles for smaller screens, displays in the top right corner of the screen */


@media (max-width: 991px) {
  .nav-screen {
   display: none;
  }

  .nav-screen-small {
    display: block;
  }
}

@media (min-width: 991px) {
  .nav-screen {
   display: block;
  }

  .nav-screen-small {
    display: none;
  }
}
  
.dz-preview .dz-image img {
  width: 100px;
  height: 100px;
}
.dz-preview .dz-details {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dz-preview .dz-thumbnail {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 120px;
  height: 120px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
  background: #f8f8f8;
}
.dz-preview .dz-thumbnail img {
  max-width: 100%;
  max-height: 100%;
}
.dz-preview .dz-filename,
.dz-preview .dz-size,
.dz-preview .dz-remove {
  margin-top: 5px;
  font-size: 14px;
}
.dz-preview .dz-progress {
  width: 100%;
  background: #eee;
  border-radius: 3px;
  overflow: hidden;
}
.dz-preview .dz-progress .dz-upload {
  background: #3c8dbc;
  height: 5px;
}
.dz-preview .dz-success-mark,
.dz-preview .dz-error-mark,
.dz-preview .dz-error-message {
  display: none;
}
#upload-button {
  margin-top: 20px;
}

.file {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.image { display: inline-block; position: relative; }
        .image img { max-width: 100px; max-height: 100px; }
        .image span { position: absolute; top: 0; right: 0; cursor: pointer; background-color: #f8d7da; padding: 0 5px; }
        .server-message { margin-top: 10px; }

        .navbar {
          color: white;
          padding: 10px 0;
          position: sticky;
          margin-top: 5px;
          top: 0;
          width: 100%;
          z-index: 1000; /* Ensures the navbar stays above other elements */
      }

      .toast {
        position: fixed; /* Fixes the toast to the viewport */
        top: 20px; /* Distance from the top */
        right: 20px; /* Distance from the right */
        z-index: 1050; /* Ensure the toast is above other elements */
    }

    .bottomRightBtnDiv {
      position: fixed;   /* Fixed to the viewport */
      bottom: 100px;      /* 20px from the bottom */
      right: 0px;       /* 20px from the right */
      padding: 10px 20px;
     
  }

  .toprightBtnDiv {
    position: fixed;   /* Fixed to the viewport */
    top: 100px;      /* 20px from the bottom */
    left: 10px;       /* 20px from the right */
    padding: 10px 20px;
   
}

  .topleftBtnDiv {
    position: fixed;   /* Fixed to the viewport */
    top: 10px;      /* 20px from the bottom */
    left: 0px;       /* 20px from the right */
    padding: 10px 20px;
   
}

#loading-screen {
  position: fixed; /* Stay fixed in place over the viewport */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #eee;
  color: white;
  
  /* Flexbox to center content horizontally and vertically */
  display: flex;
  justify-content: center;  /* Center horizontally */
  align-items: center;      /* Center vertically */
  flex-direction: column;   /* Stack the spinner and text vertically */
  
  z-index: 9999; /* High z-index to ensure it covers everything */
}

#loader {
  /* Uncomment this to make it run! */
  /*
     animation: loader 5s linear infinite; 
  */
  
  position: absolute;
  top: calc(50% - 20px);
  left: calc(50% - 20px);
}
@keyframes loader {
  0% { left: -100px }
  100% { left: 110%; }
}
#box {
  width: 50px;
  height: 50px;
  background: #fb5607;
  animation: animate .5s linear infinite;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 3px;
}
@keyframes animate {
  17% { border-bottom-right-radius: 3px; }
  25% { transform: translateY(9px) rotate(22.5deg); }
  50% {
    transform: translateY(18px) scale(1,.9) rotate(45deg) ;
    border-bottom-right-radius: 40px;
  }
  75% { transform: translateY(9px) rotate(67.5deg); }
  100% { transform: translateY(0) rotate(90deg); }
} 
#shadow { 
  width: 50px;
  height: 5px;
  background: #000;
  opacity: 0.1;
  position: absolute;
  top: 59px;
  left: 0;
  border-radius: 50%;
  animation: shadow .5s linear infinite;
}
@keyframes shadow {
  50% {
    transform: scale(1.2,1);
  }
}

.two-line-text {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Limit text to two lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.one-line-text {
  display: -webkit-box;
  -webkit-line-clamp: 1; /* Limit text to two lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.skeleton {
    opacity: 0.9;
    background: #e0e0e0; /* Adjust to a light gray */
    animation: skeleton-loading 1s linear infinite alternate;
  }

  .app-main {
    max-height: 100vh;
  }

  
  
  @keyframes skeleton-loading {
    0% {
      opacity: 0.2;
    }
    100% {
      opacity: 1;
    }
  }
  
  .tab-slider {
    position: absolute;
    height: 3px;
    background-color: #007bff;
    transition: left 0.3s, width 0.3s;
  }
  /* Sticky positioning */
  .sticky-tabs {
    position: sticky;
    top: 0;
    z-index: 10; /* Ensures it stays above other content */
    background-color: white; /* Background color to avoid transparency */
    border-bottom: 1px solid #ddd; /* Optional: adds a divider line */
  }

  

  @media (min-width: 768px) {
    .sticky-on-large {
      position: sticky;
      top: 0;
      z-index: 10; /* Ensures it stays above other content */
      
    }
  }

  
.img {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center; }

.elegant-calencar {
  /* max-width: 700px; */
  text-align: center;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 5px;
  /* -webkit-box-shadow: 0px 19px 27px -20px rgba(0, 0, 0, 0.16);
  -moz-box-shadow: 0px 19px 27px -20px rgba(0, 0, 0, 0.16);
  box-shadow: 0px 19px 27px -20px rgba(0, 0, 0, 0.16); } */

.wrap-header {
  position: relative;
  width: 35%;
  z-index: 0; }
  .wrap-header:after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    background: #000;
    opacity: .5;
    z-index: -1; }
  @media (max-width: 767.98px) {
    .wrap-header {
      width: 100%;
      padding: 20px 0; } }

#header {
  width: 100%;
  position: relative; }
  #header .pre-button, #header .next-button {
    cursor: pointer;
    width: 1em;
    height: 1em;
    line-height: 1em;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 18px; }
    #header .pre-button i, #header .next-button i {
      color: #fff; }

.pre-button {
  left: 5px; }

.next-button {
  right: 5px; }

.button-wrap {
  position: relative;
  padding: 10px 0; }
  .button-wrap .pre-button, .button-wrap .next-button {
    cursor: pointer;
    width: 1em;
    height: 1em;
    line-height: 1em;
    border-radius: 50%;
    position: absolute;
    top: 0;
    font-size: 18px; }
    .button-wrap .pre-button i, .button-wrap .next-button i {
      color: #cccccc; }
  .button-wrap .pre-button {
    left: 20px; }
  .button-wrap .next-button {
    right: 20px; }

.head-day {
  font-size: 9em;
  line-height: 1;
  color: #fff; }

.head-month {
  font-size: 2em;
  line-height: 1;
  color: #fff;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 300; }

.calendar-wrap {
  width: 65%;
  background: #fff;
  padding: 40px 20px 20px 20px; }
  @media (max-width: 767.98px) {
    .calendar-wrap {
      width: 100%; } }

#calendar {
  width: 100%; }

#calendar tr {
  height: 3em; }

thead tr {
  color: #000;
  font-weight: 700; }

tbody tr {
  color: #000; }

tbody td {
  width: 14%;
  border-radius: 50%;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  position: relative;
  z-index: 0; }
  tbody td:after {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    width: 44px;
    height: 44px;
    margin: 0 auto;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    border-radius: 50%;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    z-index: -1; }
    @media (prefers-reduced-motion: reduce) {
      tbody td:after {
        -webkit-transition: none;
        -o-transition: none;
        transition: none; } }

tbody td:hover, .selected {
  color: #fff;
  border: none; }
  tbody td:hover:after, .selected:after {
    background: #fb5607; }

    tbody td:hover, .marked {
      color: #fff;
      border: none; }
      tbody td:hover:after, .marked:after {
        background: #fb5607; }

tbody td:active {
  -webkit-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7); }



#disabled {
  cursor: default;
  background: #fff; }

#disabled:hover {
  background: #fff;
  color: #c9c9c9; }
  #disabled:hover:after {
    background: transparent; }

#reset {
  display: block;
  position: absolute;
  right: 0.5em;
  top: 0.5em;
  z-index: 999;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 0 0.5em;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  text-transform: uppercase;
  font-size: 11px; }

#reset:hover {
  color: #fff;
  border-color: #fff; }

#reset:active {
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8); }


  
#today {
  color: #fff; }
 


    .btn-primary {
      color: #fff;
      background-color: #fb5607;
      border-color: #fb5607;
    }
    .btn-primary:hover {
      color: #fff !important;
      background-color: #fd8a09 !important;
      border-color: #fd8a09 !important;
    }