.button-florida {
     background-color: #000000;
     color: white;
     padding: 12px 32px;
     width: 49%;
     text-align: left;
     text-decoration: none;
     display: inline-block;
     font-size: 16px;
     margin: 4px 2px;
     transition-duration: 0.4s;
     cursor: pointer;
     border: 2px solid #555555;
 }

 .btn-florida-100 {
     width: 99%;
 }

 .button-florida:hover {
     background-color: #bd0000;
     color: white;
 }

 @media screen and (max-width: 480px) {
     .button-florida {
         width: 95%;
     }
 }

 .button {
     background-color: #000000;
     border: none;
     color: white;
     padding: 12px 32px;
     width: 19.3%;
     text-align: left;
     text-decoration: none;
     display: inline-block;
     border-radius: 8px;
     font-size: 16px;
     margin: 0px 2px;
     transition-duration: 0.4s;
     cursor: pointer;

 }

 .button100 {
     background-color: #8f005f;
     border: 3px solid white;
     color: white;
     padding: -1px 20px;
     width: 98%;
     text-align: left;
     text-decoration: none;
     display: inline-block;
     font-size: 16px;
     margin: 13px 2px;
     transition-duration: 0.4s;
     cursor: pointer;
 }


 .bed-gn {
     position: relative;
     padding-right: 40px;
     background: url('https://res.cloudinary.com/dc1q32wzt/image/upload/v1685648029/florida_ameer_2_2_gsz5oi.png') no-repeat right center/contain;
     border: 3px solid #00640F;
 }

 .base-gn {
     position: relative;
     padding-right: 40px;
     background: url('https://res.cloudinary.com/dc1q32wzt/image/upload/v1685648223/88c38cf0-c003-48b3-b634-e7c8642f92f6_nnwhrl.png') no-repeat right center/contain;
     border: 3px solid #00640F;
 }


 .ottoman {
     position: relative;
     padding-right: 40px;
     background: url('https://res.cloudinary.com/dc1q32wzt/image/upload/v1685648664/0_q229h3.png') no-repeat right center/contain;
     border: 3px solid #00640F;
 }

 .ottoman-frame {
     position: relative;
     padding-right: 40px;
     background: url('https://res.cloudinary.com/dc1q32wzt/image/upload/v1685581331/image-removebg-preview_1_hb59u9.png') no-repeat right center/contain;
     border: 3px solid #00640F;
 }

 .fullbed {
     position: relative;
     padding-right: 40px;
     background: url('https://res.cloudinary.com/dc1q32wzt/image/upload/v1680470401/alexis-ottoman-faux-leather-white-large-removebg-preview_tntdmg.ico') no-repeat right center/contain;
     border: 3px solid #00640F;
 }

 .base7 {
     position: relative;
     padding-right: 40px;
     background: url('https://res.cloudinary.com/dc1q32wzt/image/upload/v1680471718/zqf5bMnsSsiHHAijAtet1-transformed__1_-removebg-preview_mkvqra.ico') no-repeat right center/contain;
     border: 3px solid #570000;
 }

 .mattress5 {
     position: relative;
     padding-right: 40px;
     background: url('https://res.cloudinary.com/dc1q32wzt/image/upload/v1680471482/Mattress-PNG-File_iulcud.ico') no-repeat right center/contain;
     border: 3px solid #740080;
 }

 .bed2drawer {
     position: relative;
     padding-right: 40px;
     background: url('https://res.cloudinary.com/dc1q32wzt/image/upload/v1680473098/reinforced-base-angle-drawers-open_1024x1024_2x-removebg-preview_1_von9hj.ico') no-repeat right center/contain;
     border: 3px solid #3E0EAC;
 }

 .bed4drawer {
     position: relative;
     padding-right: 40px;
     background: url('https://res.cloudinary.com/dc1q32wzt/image/upload/v1680475086/clempton-custom-timber-4-drawers-storage-bed-base-removebg-preview_dhwl31.ico') no-repeat right center/contain;
     border: 3px solid #A24500;
 }

 .headboardonly {
     position: relative;
     padding-right: 40px;
     background: url('https://res.cloudinary.com/dc1q32wzt/image/upload/v1680476283/ziggy-base-divan-bed-removebg-preview_l9ulti.ico') no-repeat right center/contain;
     border: 3px solid #6D8300;
 }

 .base2draw {
     position: relative;
     padding-right: 40px;
     background: url('https://res.cloudinary.com/dc1q32wzt/image/upload/v1680473600/drawers_1_dgv8p4.ico') no-repeat right center/contain;
     border: 3px solid #004280;
 }

 .base4draw {
     position: relative;
     padding-right: 40px;
     background: url('https://res.cloudinary.com/dc1q32wzt/image/upload/v1680473526/drawers_2_qqhakh.ico') no-repeat right center/contain;
     border: 3px solid #806A00;
 }


 .button5 {
     background-color: #000000;
     color: white;

 }

 .button:hover {
     background-color: #bd0000;
     color: white;
 }

 .button8wales {
     background-color: #2b0000;
     color: white;
 }

 .button-green {
     background-color: #003002;
     color: white;
 }

 .button-green:hover {
     background-color: #00d10a;
     color: white;
 }

 .b-border {
     border: 2px solid #aaaaaa;
 }

 .button8wales:hover {
     background-color: #E40000;
     color: white;
 }

 .button8sea {
     background-color: #012611;
     color: white;
     border: 2px solid #555555;
 }

 .button8sea:hover {
     background-color: #00e422;
     color: white;
 }

 @media screen and (max-width: 480px) {
     .button {
         width: 99%;
         margin: 5px 2px;
     }
 }

 .buttonmattress {
     background-color: #4CAF50;
     /* Green */
     border: none;
     color: white;
     padding: 12px 32px;
     width: 95%;
     text-align: left;
     text-decoration: none;
     display: inline-block;
     font-size: 16px;
     margin: 4px 2px;
     transition-duration: 0.4s;
     cursor: pointer;
 }

 .button5greym {
     background-color: #007522;
     color: white;
     border: 2px solid #555555;
 }

 .button5greym:hover {
     background-color: #bd0000;
     color: white;
 }

 .heading-top {
     color: white;
     display: flex;
     justify-content: center;
     font-family: Arial, sans-serif;
     font-size: 18px;
     padding: 2px;
     border-radius: 5px;
     pointer-events: none;
     user-select: none;
 }

  #notification-area {
      position: fixed;
      top: -20px;
      left: 10px;

      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
  }

  #notification-area .notification {
      position: relative;
      padding: 15px 45px;
      background: #111;
      color: #f5f5f5;

      font-size: 14px;
      font-weight: 600;
      border-radius: 5px;
      margin: 5px 0px;
      opacity: 0;
      left: 200px;
      animation: showNotification 500ms ease-in-out forwards;
  }

  @keyframes showNotification {
      to {
          opacity: 1;
          left: 0px;
      }
  }

  #notification-area .notification.success {
      background: #bd0000;
  }

  .fa-icon {
      position: relative;
      overflow: hidden;
  }

  .fa-icon i {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
  }

  .button,
  .fa-icon,
  .notification {
      user-select: none;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      border-radius: 8px;
  }

  .containereu {

      margin: -20px auto;
      max-width: 1150px;
  }

  .container {

      margin: 15px auto;
      max-width: 1150px;
  }

  body,
  .main-wrapper {
      background-color: #121212;
      user-select: none;
      font-family: Arial, sans-serif;
  }


  .hidden {
      display: none;
  }

  .topbar {
      position: fixed;
      top: 0;
  }

  .btn {
      border: 1px solid rgb(31, 7, 7);
      outline: none;
      padding: 7px 10px;
      background-color: #411;
      color: white;
      cursor: pointer;
      font-size: 18px;
      border-radius: 7px;
  }

  .active,
  .btn:hover {
      background-color: #bd0000;
      color: white;
  }

  @media screen and (max-width: 480px) {
      .btn {
          padding: 10px 11px;
          font-size: 13px;
          width: 23%;
      }
  }


  .everydayfree {
      position: relative;
  }

  .everydayfree::after {
      content: "Everyday/Free Delivery";
      font-size: 0.8em;

      top: -1.1em;
      left: 30em;
      color: #75b6ff;
  }

  @media only screen and (max-width: 600px) {
      .everydayfree::after {
          font-size: 0.7em;
          position: absolute;
          top: -1.0em;
          left: 2em;
      }
  }

  .daylong {
      position: relative;
  }

  .daylong::after {
      content: "Everyday/Long Route";
      font-size: 0.8em;

      top: -1.1em;
      left: 2em;
      color: #ff7575;
  }

  @media only screen and (max-width: 600px) {
      .daylong::after {
          font-size: 0.7em;
          position: absolute;
          top: -1.3em;
          left: 2em;
      }
  }



  .portsmouthr {
      position: relative;
  }

  .portsmouthr::after {
      content: "Tue and Fri /Long Route";
      font-size: 0.8em;

      top: -1.1em;
      left: 2em;
      color: #75ff87;
  }

  @media only screen and (max-width: 600px) {
      .portsmouthr::after {
          font-size: 0.7em;
          position: absolute;
          top: -1.3em;
          left: 2em;
      }
  }

  .n-ireland {
      position: relative;
  }

  .n-ireland::after {
      content: "3 to 5 Days EST Delivery";
      font-size: 0.8em;

      top: -1.1em;
      left: 2em;
      color: #ff8800;
  }

  @media only screen and (max-width: 600px) {
      .n-ireland::after {
          font-size: 0.7em;
          position: absolute;
          top: -1.3em;
          left: 2em;
      }
  }


  .cornwallr {
      position: relative;
  }

  .cornwallr::after {
      content: "Thur and Sun /Long Route";
      font-size: 0.8em;

      top: -1.1em;
      left: 2em;
      color: #75ff87;
  }

  @media only screen and (max-width: 600px) {
      .cornwallr::after {
          font-size: 0.7em;
          position: absolute;
          top: -1.3em;
          left: 2em;
      }
  }

  .aberdeenr {
      position: relative;
  }

  .aberdeenr::after {
      content: "Wed and Sat /Long Route ";
      font-size: 0.8em;

      top: -1.1em;
      left: 2em;
      color: #75ff87;
  }

  @media only screen and (max-width: 600px) {
      .aberdeenr::after {
          font-size: 0.7em;
          position: absolute;
          top: -1.3em;
          left: 2em;
      }
  }

  .Invernessr {
      position: relative;
  }

  .Invernessr::after {
      content: "Wed & Sat /20 Extra from LDR";
      font-size: 0.8em;

      top: -1.1em;
      left: 2em;
      color: #ff2414;
  }


  @media only screen and (max-width: 600px) {
      .Invernessr::after {
          font-size: 0.7em;
          position: absolute;
          top: -1.3em;
          left: 2em;
      }
  }


  #myTable {
      border-collapse: collapse;
      width: 100%;
      border: 1px solid #ddd;
      font-size: 18px;
      cursor: pointer;
  }

  #myTable th,
  #myTable td {
      color: #ebebeb;
      text-align: left;
      padding: 12px;
      border-right: 1px solid #ddd;
      /* Add border between columns */
  }

  #myTable td:last-child {
      border-right: none;
      /* Remove border on last column */
  }

  #myTable tr {
      border-bottom: 1px solid #ddd;
      background-color: #121212;
  }

  .selected {
      background-color: black;
      font-weight: bold;
      color: #fff;
      outline: 3px solid red;
      outline-offset: -2px;
  }

  #myTable tr:hover {
      background-color: black;
  }

  #myTable tr.header {
      background-color: black;
  }

  .trboard {
      outline: 3px solid white;
      outline-offset: -3px;
      font-weight: bold;
  }

  #myInput {
      background-image: url('https://res.cloudinary.com/dc1q32wzt/image/upload/v1685751275/search_eeh8e2.png');
      background-position: 10px 10px;
      background-repeat: no-repeat;
      background-color: #121212;
      color: white;
      width: 95%;
      font-size: 16px;
      padding: 12px 20px 12px 40px;
      border: 1px solid #ddd;



      left: 2.5%;

  }

  @media only screen and (max-width: 600px) {
      #myInput {
          width: 81%;

          font-size: 19px;
          padding: 12px 20px 12px 40px;

          top: auto;
          left: auto;
          margin-bottom: -15px;
          z-index: initial;
      }
  }


  /* Adjust the height and width of the second column */
  #myTable td:nth-child(2),
  #myTable th:nth-child(2) {
      width: 300px;
      /* Set the desired width */
      height: 35px;
      /* Set the desired height */
  }

  img {
      display: block;
      margin: 0 auto;
      max-width: 100%;
      height: auto;
  }

  .heading-top {
      color: white;
      display: flex;
      justify-content: center;
      font-family: Arial, sans-serif;
      font-size: 18px;
      padding: 2px;
      border-radius: 5px;
      pointer-events: none;
      user-select: none;
  }

  .container-menu {
      margin: -4px auto;
      max-width: 1150px;

  }

  .container-table {
      margin-top: 0px;
      margin-right: auto;
      margin-bottom: 25px;
      margin-left: auto;
      max-width: 1150px;
      overflow: auto;
      margin-bottom: 12px;
  }




  .buttonp {
      border: 1px solid rgb(31, 7, 7);
      outline: none;
      padding: 7px 10px;
      background-color: #411;
      color: white;
      cursor: pointer;
      font-size: 18px;
      border-radius: 7px;
  }

  .active,
  .buttonp:hover {
      background-color: #bd0000;
      color: white;
  }

  @media screen and (max-width: 480px) {
      .buttonp {
          padding: 10px 11px;
          font-size: 13px;
          width: 23%;
      }
  }

  #scroll-to-top {
      display: none;
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 99;
      cursor: pointer;
      width: 40px;
      height: 40px;
      border: none;
      border-radius: 50%;
      background: #ff1919;
      color: #fff;
      font-size: 20px;
      opacity: 0.7;
      transition: opacity 0.3s;
  }

  #scroll-to-top:hover {
      background: #d60000;
  }


   .container {

       margin: 25px auto;
       max-width: 1150px;
   }

   body,
   .main-wrapper {
       background-color: #121212;
       color: #fff;
       user-select: none;
       font-family: Arial, sans-serif;
   }



   table {
       width: 100%;
       border-collapse: collapse;
   }

   td {
       padding: 10px;
       text-align: center;
       border: 1px solid #ddd;

       width: 25%;
       box-sizing: border-box;
   }

   img {
       max-width: 100%;
       height: auto;
       pointer-events: none;
   }

   .label {
       font-weight: bold;
       font-size: 20px;
       margin-bottom: 5px;
   }

   .image-container {
       display: flex;
       justify-content: center;

   }


   .image-container img {
       width: 50%;
       margin: 2px;
       pointer-events: auto;
   }

   a {
       color: rgb(255, 0, 0);
   }

   .centered-text {
       text-align: center;
       color: red;
       font-size: 40px;
   }

   .selectable-table {

       user-select: text;
   }


   /* Media Query for Mobile Devices */
   @media (max-width: 768px) {

       td {
           width: 100%;
           display: block;
           box-sizing: border-box;
       }



       .image-container img {
           width: 50%;
       }
   }


         label {
    
             color: white;
             margin-right: 10px;
         }
    
    
         select {
             padding: 5px;
             border: 3px solid #ff0000;
             border-radius: 5px;
             transition: background-color 0.3s;
             width: 50%;
             text-align: center;
             background-color: #4e0000;
             /* Dark background color */
             color: white;
             /* White text color */
             font-weight: bold;
             /* Bold text */
         }

/* Chat header styling for price page */
.chat-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: transparent;
    border-bottom: none;
    padding: 0px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.made-with-love {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    font-family: Arial, sans-serif;
    pointer-events: auto;
}

.logout-btn {
    background-color: #c50e0e;
    color: #fff;
    border: 2px solid #555;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 80px;
    max-width: 100px;
    white-space: nowrap;
    flex-shrink: 0;
    pointer-events: auto;
}

.logout-btn:hover {
    background-color: #9c0c0c;
    border-color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.logout-btn:active {
    transform: translateY(0);
}

/* Adjust container margin to account for fixed header */
body .container-menu {
    margin-top: 30px;
}

/* Mobile-friendly responsive design for header */
@media screen and (max-width: 768px) {
    .chat-header {
        padding: 0px 15px;
        min-height: 50px;
    }
    
    .made-with-love {
        font-size: 14px;
        max-width: 60%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .logout-btn {
        min-width: 70px;
        padding: 6px 12px;
        font-size: 11px;
    }
}

@media screen and (max-width: 480px) {
    .chat-header {
        padding: 0px 10px;
        min-height: 45px;
    }
    
    .made-with-love {
        font-size: 12px;
        max-width: 55%;
    }
    
    .logout-btn {
        min-width: 60px;
        padding: 5px 10px;
        font-size: 10px;
    }
}