body {
  font-family: "Roboto", sans-serif;
  /* background-color: #1e1e1e; */
  color: #f8f9fa;
  
}

header {
  background-color: #000000;
  color: white;
  /* padding: 20px 0; */
  text-align: center;
}
.page-sectionwrap{
  min-height: calc(100vh - 82px);
}

header img {
  height: 50px;
  margin-right: 20px;
}
.header-content{
  /* animation: fadeIn 1s ease-in-out; */
}
header h1 {
  font-size: 28px;
  font-weight: bold;
  /* animation: fadeIn 1s ease-in-out; */
}

.container-fluid {
  /* margin-top: 20px; */
  padding: 0 100px;
}

.left-section, .right-section {
  padding: 20px;
  animation: slideIn 1s ease-in-out;
}
.table-section td{
  font-size: 14px;
  padding: 10px 20px;
  color: #202020;
}
.speech-to-text, .history-content, .table-section, .profile-section {
  /* background-color: #2c2c2c; */
  border-radius: 8px;
  /* padding: 20px; */
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}
.table th{
  background: #f9f9f9;
  color: #202020;
  font-weight: 500;
  font-size: 14px;
  padding: 10px 20px;
}
.ordering-box{
  color: #202020;
  box-shadow: 0 7px 10px #e5e5e5;
  padding: 15px;
}
.speech-to-text {
  /* margin-bottom: 20px; */
  background: #f1f1f1;
  animation: fadeIn 2s ease-in-out;
  min-height: calc(100vh - 202px) !important;
}

.profile-section {
  margin-top: 20px;
}

.btn-primary {
  background-color: #007bff;
  border: none;
}

.table {
  color: #f8f9fa;
}

.table thead {
  background-color: #3a3f44;
}

.table-striped>tbody>tr:nth-of-type(odd)>*{
    color: white;

}

.order-status{
  background: #07a7070d;
  color: #11a111;
  font-size: 18px;
  padding: 10px 12px;
  border: 1px solid #11a111;
  border-radius: 5px;
}
.list-group-item {
  background-color: #3a3f44;
  border-color: #4a4e53;
  color: #f8f9fa;
}
.order-icon{
  max-width: 30px;
}
.small-table td{
  padding: 6px 20px;
  font-size: 14px;
  border-color: #cdc9c9;
}
.small-table {
  border-color: #cdc9c9;
  min-width: 290px;
}

.small-table td:first-child {
  width: 156px;
}

.small-table td:last-child {
  text-align: end;
  font-weight: 600;
}
.bottom-boxwap{
  background: #efefef;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    transform: translateX(-100px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.glow-on-hover {
    width: 220px;
    height: 50px;
    border: none;
    outline: none;
    color: #fff;
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 1;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.glow-on-hover:active {
    color: #000
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #111;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}
.loader {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

#wave {
  height: 67px;
  width: 48px;
	fill: #fff;
}

#Line_1 {
  animation: pulse 1s infinite;
  animation-delay: 0.15s;
}

#Line_2 {
  animation: pulse 1s infinite;
  animation-delay: 0.3s;
}

#Line_3 {
  animation: pulse 1s infinite;
  animation-delay: 0.45s;
}

#Line_4 {
  animation: pulse 1s infinite;
  animation-delay: 0.6s;
}

#Line_5 {
  animation: pulse 1s infinite;
  animation-delay: 0.75s;
}

#Line_6 {
  animation: pulse 1s infinite;
  animation-delay: 0.9s;
}

#Line_7 {
  animation: pulse 1s infinite;
  animation-delay: 1.05s;
}

#Line_8 {
  animation: pulse 1s infinite;
  animation-delay: 1.2s;
}

#Line_9 {
  animation: pulse 1s infinite;
  animation-delay: 1.35s;
}

@keyframes pulse {
  0% {
      transform: scaleY(1);
      transform-origin: 50% 50%;
  }
  50% {
      transform: scaleY(0.7);
      transform-origin: 50% 50%;
  }
  100% {
      transform: scaleY(1);
      transform-origin: 50% 50%;
  }
}


.iconbx-wrap{
    position: relative;
    padding: 12px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
}
.icon-innerbox{

    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;
  
}
.active.icon-innerbox::before {
  animation: moving 2s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}
.icon-innerbox:before{
    content: "";
    pointer-events: none;
    border-radius: 50%;
    /* background: linear-gradient(180deg, rgb(38 111 172) -66.22%, rgba(162, 230, 138, 0) 85.46%); */
    position: absolute;
    left: 1px;
    right: 1px;
    top: 1px;
    bottom: 1px;
    /* animation: moving 2s cubic-bezier(0.25, 0.1, 0.25, 1) infinite; */
    background: black;
}
.iconbx-wrap:after{
    content: "";
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    /* background: linear-gradient(180deg, rgb(54 149 204), rgba(162, 230, 138, 0)); */
    /* background: #ff000042;
    animation: moving 2s cubic-bezier(0.25, 0.1, 0.25, 1) infinite; */
}
.icon{
    position: relative;
    z-index: 1;
}
@keyframes moving {
  0% {
      transform: scale(1);
      opacity: 1;
      box-shadow: 0 10px 50px black;
  }
  50% {
      transform: scale(1.5); /* Small scale up for smoother pulse */
      opacity: 0.7; /* Slight fade for effect */
  }
  100% {
      transform: scale(1);
      opacity: 1;
      box-shadow: 0 10px 50px black;
  }
}

.img-start{
    width: 32px;
}


/* wave css */

@keyframes quiet {
    25%{
      transform: scaleY(.6);
    }
    50%{
      transform: scaleY(.4);
    }
    75%{
      transform: scaleY(.8);
    }
  }
  
  @keyframes normal {
    25%{
      transform: scaleY(1);
    }
    50%{
      transform: scaleY(.4);
    }
    75%{
      transform: scaleY(.6);
    }
  }
  @keyframes loud {
    25%{
      transform: scaleY(1);
    }
    50%{
      transform: scaleY(.4);
    }
    75%{
      transform: scaleY(1.2);
    }
  }
  
  .boxContainer{
    display: flex;
    justify-content: space-between;
    height: 50px;
    --boxSize: 4px;
    --gutter: 4px;
    width: calc((var(--boxSize) + var(--gutter)) * 5);
  }
  
  .box{
    transform: scaleY(.4);
    height: 100%;
    width: var(--boxSize);
    background: #12E2DC;
    animation-duration: 1.2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    border-radius: 8px;
  }
  
  .box1{
    animation-name: quiet;
  }
  
  .box2{
    animation-name: normal;
  }
  
  .box3{
    animation-name: quiet;
  }
  
  .box4{
    animation-name: loud;
  }
  
  .box5{
    animation-name: quiet;
  }


  .ai-message span{
    color: #12E2DC;
  }
  .table-responsive{
    max-height: 500px;
    overflow: auto;
  }

  @media screen and (max-width: 1400px) {
    .container-fluid{
      padding: 0 60px;
    }
    .table-responsive{
      max-height: 320px;
    }
  }
  @media screen and (max-width: 1299.98px) {
    .container-fluid{
      padding: 0 30px;
    }
  }
  
  @media screen and (max-width: 991.98px) {
    .container-fluid{
      padding: 0 15px;
    }
  }