/*****loader Section *****/
.loader {
    width: 37px;
    padding: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #25b09b;
    --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
    mask: var(--_m);
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
    animation: l3 1s infinite linear;
}

@keyframes l3 {
    to {
        transform: rotate(1turn)
    }
}

/*****Loader End Section *****/

/***** flasher Section *****/

.fl-wrapper {
    z-index: 99999 !important;
}

/***** flasher End Section *****/

.modal.show {
    display: block;
}

/* /Checkout page / */

.activepoption {
    border: 2px solid green;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.p-card-image {
    height: 200px;
}

@media only screen and (max-width:768px) {
    .p-card-image {
        height: 140px;
    }
}


/* Sidebar Styling */
.dashboard-sidebar {
    background-color: #fff;
    width: 250px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 100vh;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    border-radius: 10px;
}

.dashboard-sidebar a {
  color: #757070;
  font-size: 1rem;
  font-weight: 500;
  transition: background-color 0.2s ease-in-out;
  padding: 5px 10px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: start;
  gap:7px;
}

.dashboard-sidebar a:hover ,.dashboard-sidebar a.active{
    background-color: #0e7154;
    border-radius: 4px;
    color: white;
}
.dashboard-title{
    color: #535050;
  font-size: 25px;
  font-weight: 870;
  border-bottom: 1px solid;
  width: fit-content;
}
/* Main Content Area */
.dasboard-mainbox {
    padding: 0 40px 40px 40px;
    width: 90%;
}


/* Responsive Adjustments */
@media screen and (max-width: 765px) {

    .dashboard-sidebar {
        display: none;
    }
    .dasboard-mainbox{
      padding: 0;
      width:100%;
    }
}

.stated {
    padding: 1.5rem 1.5rem 2.4rem;
    position: relative;
    z-index: 1;
    overflow: hidden;
    color: #fff !important;
    border-radius: 25px;
  }
  
  .stated h4 {
    font-weight: 700;
    font-size: 1.75rem;
    color: #fff;
  }
  
  .stated strong {
    font-weight: 400;
    font-size: 1.125rem;
    color: #fff;
  }
  
  .stated .icon {
    position: absolute;
    inset-block-end: 0.9375rem;
    inset-inline-end: 1.25rem;
    font-size: 28px;
  }
  
  .stated.one {
    background-color: #43B20F; /* Green */
  }
  
  .stated.two {
    background-color: #3D4D76; /* Dark Blue */
  }
  
  .stated.three {
    background-color: #794C8A; /* Purple */
  }
  
  .stated.four {
    background-color: #2AB280; /* Teal */
  }
  
  .stated.five {
    background-color: #FF5733; /* Orange */
  }
  
  .stated.six {
    background-color: #FFC300; /* Yellow */
  }
  
  .stated.seven {
    background-color: #C70039; /* Red */
  }
  
  .stated.eight {
    background-color: #900C3F; /* Dark Red */
  }
  
  .stated.nine {
    background-color: #2980B9; /* Blue */
  }
  
  .stated.ten {
    background-color: #8E44AD; /* Violet */
  }
  
  .stated.eleven {
    background-color: #16A085; /* Sea Green */
  }
  
  .stated.twelve {
    background-color: #34495E; /* Dark Slate */
  }
  
  
  .stated::after {
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: 0rem;
    background-color: #fff;
    opacity: 0.05;
    content: "";
    block-size: 100%;
    inline-size: 8.125rem;
    z-index: -1;
    border-end-end-radius: 100%;
  }

  .message-list {
    max-height: 400px; /* Adjust as needed for your layout */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    
}

.message {
    margin-bottom: 10px; /* Space between messages */
    padding: 10px;
    border-radius: 8px; /* Rounded corners */
    position: relative; 
}

.message.left {
    background-color: #00423c;
    align-self: flex-start;
    color:white;
}

.message.right {
    background-color: #000; /* Blue for right messages */
    color: white; /* White text for better contrast */
    align-self: flex-end; /* Align to the right */
}

.timestamp {
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: end;
    color: white;
}
.message.left .timestamp{
  color:white;
}
.message-text-area {
    width: 100%;
    border: 1px solid #0e7153d3; 
    border-radius: 5px;
    padding: 10px;
    resize: none;
}

.message-text-area:focus{
  border-color: #00423c;
  outline: none;
  border-width: 1px;
  box-shadow: none;
}

.button-send {
  background-color: #0e7154;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
  height: 40px;
}

.button-send:hover {
    background-color: #0e7153d3;
}

.message-form{
  display: flex;
  gap:10px;
  align-items: end;
}
.chat-header{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  width: 100%;
  padding: 10px;
  background: #dddddd75;
  border-radius: 10px;
}
.chat-header .imgdiv{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media only screen and (max-width:765px){
  .message-form{
    flex-direction: column;
  }
}


.countdown-timer{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap:3px;
  flex-wrap: wrap;
}

.countdown-timer span{
  min-width: 23px;
  padding: 0px 3px;
  height: 23px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.countdown-timer .days,.countdown-timer .hours{
  background-color: #16A085;
  color:white;
}

.countdown-timer .minutes{
  background-color: orangered;
  color:white;
}

.countdown-timer .seconds{
  background-color:orangered;
  color:white;
}

.collapse {
  visibility: visible!important;
}

.catbg{
  background-color: white;
}

@media only screen and (max-width:768px){
  .catbg{
    background-color: transparent;
  }
}