body {
    font-family: 'Roboto', sans-serif;
    background-color: #ffffff;
    color: #121212;
}

/* Buttons container to group button onto one line and space them out evenly */
/* Buttons and links for both "Checkout and Pay" */
.button-container {
    width: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow-x: auto;
}

.button-container > button {
    flex: 1 1 auto; /* Optional, depending on your design needs */
}

@media (max-width: 600px) {
    .button-container {
        justify-content: space-around;
    }
}

/* .button-container {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
} */

.button-container .btn {
    margin-right: 10px; /* Adjust the value as needed */
}
/* Remove margin for the last button to prevent extra space at the end */
.button-container .btn:last-child {
    margin-right: 0;
}

.button-fixed-height {
    height: 50px;  /* Example height, adjust as needed */
    display: inline-block;
    vertical-align: middle;
    padding: 0 15px; /* Optional: Adjust padding to ensure text fits well */
}

/*
.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 74%;
    height: 3vh;
    background-color:  #ffffff;
    padding: 10px;
    margin-bottom: -10px;
}
*/

/* .textarea-container {
  width: 95%;
  margin: 20px;
} */

/* .textarea-copy {
  width: 100%;
  height: 25vh;
  box-sizing: border-box;
  padding: 10px;
  overflow: auto;
  background-color: #ffffff;
  color: black;
  border-radius: 10px;
  margin-top: 10px;
  font-size: 12pt;
  border: 1px solid #ccc;
  white-space: pre-wrap;
} */

/* .copy-button {
  margin-top: 10px;
  padding: 10px;
  border: none;
  background-color: #007BFF;
  color: white;
  cursor: pointer;
  border-radius: 5px;
  font-size: 14pt;
} */

#gpt_said_text, #you_said_text, #web_receive {
    width: 95%;
    height: 25vh;
    box-sizing: border-box;
    padding: 10px;
    resize: both;
    overflow: auto;
    background-color: #ffffff;
    color: black;
    border-radius: 10px;
    margin-top: 10px;
    font-size: 10pt;
}



#start_recording_button_x, #allow_audio_button_x,  #reset_to_english,
                         #reset_server_memory, #order_bot
{
          width: 200px;
          height: 40px;
          background-color: rgb(179, 176, 170);
          color: #fff;
          border: none;
          border-radius: 5px;
          font-size: 16px;
          cursor: pointer;
}

@keyframes backgroundAnimation-blue {
    /* 0% { background-color: #B0E1F2; }
    30% { background-color: #32C1E3; }
    60% { background-color: #3AA5DB; }
    100% { background-color: #2B7CC0; } */

    0% { background-color: #D3EDF4; }
    25% { background-color: #84D0E4; }
    50% { background-color: #36C4E5; }
    75% { background-color: #10B2CB; }
    100% { background-color: #157FA0; }
}

@keyframes backgroundAnimation-pink {

    0% { background-color: #EBA7CA; }
    25% { background-color: #E068A7; }
    50% { background-color: #E24799; }
    75% { background-color: #E03894; }
    100% { background-color: #DA2590; }
}

.animated-button {
    padding: 10px 20px;
    border: none;
    /* border: 4px solid rgba(0, 0, 0, 0.1); */
    /* border: 5px red; */
    color: white;
    /* text-transform: uppercase; */
    font-weight: bold;
    cursor: pointer;
}

.animate-background-blue {
    animation: backgroundAnimation-blue 2s infinite;
}

.animate-background-pink {
    animation: backgroundAnimation-pink 2s infinite;
}


/* Progress spinner processing recording */
.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    /* border-left-color: #63ff00; */
    border-left-color: #36C4E5;
    margin-left: 240px;
    margin-top:  50px;
    display: inline-block;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.copy {
    cursor: pointer;
    font-size: 12pt;
}

h2 {
    font-size: 12pt;
}


/* Custom styles for jBox buttons */
.jBox-Confirm-button {
    color: #ffffff;
    background-color: #36C4E5;
    border-color: #1F2937;
    border-radius: 5px; /* Rounded corners */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075);
}

.jBox-Confirm-button:hover {
    background-color: #2494C2;
    border-color: #1F2937;
    border-radius: 5px; /* Rounded corners */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075);
}

.jBox-Confirm-button-cancel {
    /* --bs-gray-800: #1F2937; */
    color: #1F2937;
    background-color: white;
    border-color: #1F2937;
    border-radius: 5px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075);
}

/* copy box for the conversation textarea */
.textarea-container {
    position: relative;

    margin: 10px;
}

.textarea-copy {
    width: 95%;
    height: 180px;
    padding: 15px;
    padding-right: 40px; /* Space for the button */
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid #ccc;
    resize: none; /* Optional, if you want to disable resizing */
    line-height: 1.5;
    font-size: 16px;
    /* font-size: 12px; */
}

.copy-button {
    position: absolute;
    top: 10px;
    right: 5px;
    background: none;
    border: none;
    cursor: pointer;
    color: white;
    font-size: 18px; /* Adjust size as needed */
}

/* Style adjustments for the copy button */
.copy-button:hover {
    color: #ccc;
}

.colored-line {
  margin: 0;
}

.arrow-container {
   display: flex;
   align-items: center; /* Centers items vertically */
   justify-content: center; /* Centers items horizontally */
   font-family: Arial, sans-serif; /* Sets the font */
   margin-bottom: 10px;
}

.arrow-translate {
   width: 30px; /* Sets the width of the arrow image */
   margin: 0 10px; /* Adds margin to the left and right of the arrow */
}

.speak-text-block {
     background-color: #36C4E5;
     color: white;              /* White text color */
     padding: 10px;             /* Padding around the text */
     border-radius: 20px;
     text-align: center;        /* Center-aligned text */
     font-weight: bold;         /* Bold font */
}

.glossy-button {
   display: inline-block;
   position: relative;
   background-color: #AAA;
   background-image: linear-gradient( /* chrome */
     /* hsla(0, 0%, 100%, 0.6), hsla(0, 0%, 100%, 0) 50%,
     hsla(0, 0%, 0%, 0.3) 50%, hsla(0, 0%, 100%, 0.2) */
   );
   font-size: 22px;
   font-family: sans-serif;
   font-weight: bold;
   color: white;
   padding: 20px 40px;
   padding: 10px 20px;                 // less the padding, smaller the button size
   text-shadow:
     0 0 15px hsla(0, 0%, 100%, 1), /* bloom */
     0 2px 4px hsla(0, 0%, 0%, 0.7); /* drop shadow */
   border: none;
   /* border: 3px solid green; */
   border-radius: 50px;
   border-radius: 15px;
   margin: 10px;
   box-shadow:
     inset 0 -5px 20px hsla(0, 0%, 0%, 0.4),           /* top light */
     inset 0 5px 20px hsla(0, 0%, 100%, 0.4),          /* bottom shadow */
     /* multiple light sources yall */
     /* -8px 8px 5px hsla(0, 0%, 0%, 0.15),      */         /* drop shadow 1 */
     5px 18px 10px hsla(0, 0%, 0%, 0.2);               /* drop shadow 2 */
   cursor: pointer;
   transition: transform 0.1s, box-shadow 0.1s;
 }

 /* highlight */
.glossy-button:before {
   content: '';
   display: block;
   position: absolute;
   left: 20px;
   right: 20px;
   top: 5px;
   /* height: 30px; */
   height: 10px;
   border-radius: 15px;
   background: linear-gradient(
     hsla(0, 0%, 100%, 0.8), hsla(0, 0%, 100%, 0) );
}

/* .glossy-button--blue { background-color: #19F; } */
.glossy-button--blue { background-color: #37C4E5; }
.glossy-button--gold { background-color: #EA0; }
.glossy-button--green { background-color: #6C6; }
.glossy-button--red { background-color: #E21; }

.glossy-button:hover {
   transform: scale(1.05);
   box-shadow:
     inset 0 -5px 20px hsla(0, 0%, 0%, 0.4), /* top light */
     inset 0 5px 20px hsla(0, 0%, 100%, 0.4), /* bottom shadow */
     /* multiple light sources yall */
     -12px 12px 5px hsla(0, 0%, 0%, 0.15), /* drop shadow 1 */
     /* 10px 25px 10px hsla(0, 0%, 0%, 0.2);  */ /* drop shadow 2 */
 }

/* new start button */
.animate-button-border {
     animation: animate-border 2s infinite;
}

@keyframes animate-border {
   0%, 100% {
     border: none;
   }
   33% {
     border: solid 8px white;
   }
   66% {
     border: solid 8px white;
     box-shadow: 0 0 0 8px #56B947    /* green; */
   }
 }

.button-wrapper {
    /* position: relative; */
    /* height: 10rem;  */
    position: relative;
    height: 8rem; /* Adjust as needed */
 }

.round-button-2 {
   box-sizing: content-box;
   overflow: hidden;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   /* --latex-dim: calc(6.25rem + 2*var(--latex-dif, 0px)); */

   /*  change size  --latex-dim: calc(6.25rem + 2*var(--latex-dif, 0px));  */
   --latex-dim: calc(7rem + 2*var(--latex-dif, 0px));

   --latex-rad: calc(.5*var(--latex-dim));
   --inner-dim: calc(var(--latex-dim) + 2*var(--metal-inn, 0px));
   border: none;
   padding: var(--metal-mid, 0px);
   width: var(--inner-dim);
   height: var(--inner-dim);
   border-radius: 50%;
   --state-dy: 0px;
   box-shadow: 0 calc(0.75rem - var(--state-dy)) 0.625rem -0.375rem #5f5b5c;
   transform: translate(-50%, -50%) translateY(var(--state-dy));
   background: radial-gradient(transparent calc(70.71068% + -2*1px), var(--inner-end, #000) 70.71068%),
     radial-gradient(var(--glass-col, #00A9C6, #00BBD4) calc(3.125rem + -1*1px), #000 3.125rem, #000 calc(var(--latex-rad) + -1*1px),
     transparent var(--latex-rad)) content-box, linear-gradient(#757575, #ffffff) content-box,
     repeating-radial-gradient(rgba(0, 169, 198, 0.15), rgba(0, 187, 212, 0.15), rgba(0, 169, 198, 0.15) 2px) padding-box,
     conic-gradient(#f4f4f4, #fafafa, #555, #e6e6e6, #808080, #e6e6e6, #555, #fafafa, #f4f4f4) padding-box, linear-gradient(#d5d5d5, #5f5f5f) border-box;

   background-size: cover;
   background-position: center;
   color: transparent;
   font-size: 0;
   text-indent: -100vw;

   filter: contrast(0.90);
   cursor: pointer;
   /* animation: animate-border 3s infinite; */
 }

.round-button-2::before, button::after {
   position: absolute;
   top: 50%;
   left: 50%;
   margin: -3rem;
   width: 6rem;
   height: 6rem;
   border-radius: 50%;
   content: "";
 }

.round-button-2::before {
   height: 3.375rem;
   border-radius: 50% / 59% 59% 41% 41%;
   transform: scalex(0.83);
   background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.1));
 }

.round-button-2::after {
   box-shadow: inset 0 -2rem 1px -1.75rem rgba(255, 255, 255, 0.26);
 }

.round-button-2:focus, button:hover {
   outline: none;
   filter: none;
 }

.round-button-2:active {
   --state-dy: 2px;
 }