/* MEDIAS */

/* Enhanced Quote Form Responsive Design */
@media (max-width: 768px) {
  .quote-form {
    width: 90% !important;
    padding: 30px 20px !important;
    margin-top: 20px !important;
  }

  /* FINAL MOBILE OVERRIDES: stretch order list and cards edge-to-edge */
  @media (max-width: 740px) {
    .recent-orders {
      width: 100% !important;
      padding-left: 10px !important;
      padding-right: 10px !important;
    }

    #order-list {
      width: 100% !important;
      max-width: 100% !important;
      align-items: stretch !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    #order-list>li,
    #order-list>.order-listItem {
      width: 100% !important;
      max-width: none !important;
    }

    .order-listItem,
    .order-details-div,
    .order-div,
    .order-div-2 {
      width: 100% !important;
      max-width: none !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }

    .order-card__header,
    .order-card__langs,
    .order-card__statusinfo,
    .order-card__panel,
    .order-details-div {
      min-width: 0 !important;
      width: 100% !important;
    }
  }

  .translation-type-button {
    padding: 14px 16px;
    font-size: 15px;
    min-height: 55px;
  }

  .explain-certified,
  .explain-business,
  .explain-dtp {
    padding: 12px;
    font-size: 13px;
  }

  .diploma-box,
  .transcript-box {
    padding: 16px;
  }

  details {
    padding: 12px;
  }

  .expedited-options-note {
    padding: 12px;
    font-size: 13px;
  }
}

/* --- Mobile order width overrides: ensure cards take near-full width --- */
@media (max-width: 740px) {

  .order-listItem,
  .order-details-div,
  .order-div,
  .order-div-2 {
    width: 98% !important;
    max-width: 98% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* Prevent inner content from constraining width */
  .order-card__header,
  .order-card__langs,
  .order-card__statusinfo,
  .order-card__panel,
  .order-details-div {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Stretch the list container and its direct children */
  #order-list {
    width: 100% !important;
    max-width: 100% !important;
    align-items: stretch !important;
    /* let children span full width */
  }

  #order-list>li,
  #order-list>.order-listItem {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 480px) {
  .quote-form {
    width: 95% !important;
    padding: 20px 15px !important;
    border-radius: 15px !important;
  }

  .custom-file-input-wrapper {
    padding: 15px;
  }

  .file-upload-button {
    padding: 10px 20px;
    font-size: 14px;
  }

  .translation-type-button {
    padding: 12px 14px;
    font-size: 14px;
    min-height: 50px;
  }

  .dtp-button {
    padding: 10px 12px;
    font-size: 13px;
    min-height: 45px;
  }

  input[list],
  input[type="search"],
  input[type="text"],
  textarea,
  select {
    font-size: 16px;
    /* Prevent zoom on iOS */
  }

  .diploma-box,
  .transcript-box {
    padding: 12px;
  }

  .how-many-diplomas,
  .how-many-transcripts {
    padding: 12px;
  }
}

/* Responsive design for saved file dialog */
@media (max-width: 600px) {
  .saved-file-div {
    padding: 16px 36px 16px 16px;
    /* Adjusted for smaller screens */
    margin: 12px 0;
  }

  .button-div {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .button-div button {
    width: 100% !important;
    padding: 14px 20px !important;
  }

  .saved-file-question {
    font-size: 15px;
    padding-right: 25px;
  }

  .saved-file-question-2 {
    font-size: 13px;
    padding-right: 25px;
  }
}

/* 299px */
@media only screen and (max-width: 299px) and (min-width: 250px) and (max-device-height:350px) {
  .sign-out {
    right: 10px;
    top: 100px;
    font-size: 12px;
  }

  .username-greeting {
    left: 10px;
    top: 85px;
    font-size: 12px;
  }

  .settings-icon {
    top: 30px;
    font-size: 30px;
  }

  input,
  select {
    width: 90%;
  }

  .recent-orders,
  .to-be-confirmed,
  .quote,
  .done-div,
  .quote-form {
    padding: 20px;
    width: 90%;
  }

  .anchor {
    font-size: 14px;
    padding: 4px;
  }

  .navItems {
    flex-direction: column;
    /* Stack navigation items vertically */
  }

  .buttons-wrapper {
    flex-direction: column;
    /* Stack buttons vertically */
    align-items: center;
    /* Center the buttons */
    gap: 10px;
    /* Add some space between buttons */
  }

  .notary-cost-div,
  .translation-cost-div,
  .notary-number-div,
  .shipping-cost-div,
  .turnaround-cost-div,
  .word-count-div,
  .page-count-div,
  .evaluation-cost-div,
  .evaluation-turnaround-div,
  .evaluation-type-div,
  .apostille-cost-div,
  .discount-div,
  .balance-div,
  .average-total-number-div,
  .text-confidence-div {
    flex-direction: column;
    /* Stack div contents vertically */
    align-items: center;
  }

  .div-for-expedited-options {
    flex-direction: column;
  }

  /* New styles */
  .waves {
    top: 120px;
  }

  .username-greeting {
    font-size: 10px;
    color: lightgrey;
    left: 30px;

  }

  .quote-form {
    width: 85%;
    /* Adjust width to fit within the screen */
    box-sizing: border-box;
    /* Ensure padding is included in the width */

  }

  .quote-form input,
  .quote-form select {
    width: 100%;
    /* Full width for inputs and selects */
  }

  .quote {
    margin-top: 20px;
    margin-bottom: 40px;

    background-color: rgb(48, 48, 48);
    border-radius: 20px;
    position: relative;
    top: -30px;
    padding: 25px;

    display: none;
    max-width: 400px;
    width: 90%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .general-instructions-details {
    /* warp text to next line */
    word-wrap: break-word;
    /* Ensure long words break to the next line */
    word-break: break-word;
    /* Ensure long words break to the next line */
    white-space: normal;
    /* Allow text to wrap normally */
    padding: 10px;
    /* Add padding for better readability */
  }

  .general-instructions-summary {
    /* center summary element in details */
    text-align: center;

  }

  .globalSearchInput {
    width: 90%;
    /* Adjust width to fit within the screen */
    font-size: clamp(11px, 3vw, 12px);
    /* Responsive font size for better readability */
  }

  .mfa-popup-content {
    width: 90%;
    /* Adjust width to fit within the screen */
  }

}

/* Jiophone 2 */
@media only screen and (max-width: 299px) and (min-width: 240px) {

  .sign-out {
    right: 40px;
    top: 100px;
    /* Adjust for taller navbar */
    font-size: 14px;
    color: lightgrey;
    font-size: 8px;
  }

  .company-icon {
    top: 40px;
    font-size: 30px;
  }

  #settings-icon {
    position: absolute;
    top: 120px;
    left: unset;
    right: 50px;
    font-size: 20px;
  }

  .username-greeting {
    left: 20px;
    top: 90px;
    /* Adjust for taller navbar */
    font-size: 6px;
  }

  .files-details {
    width: 170px;
    /* Adjust width to fit within the screen */
  }

  .files-summary {
    font-size: 12px;
  }

  #mfa-authentication-text {
    font-size: 10px;
  }

  .quote-form {
    width: 230px;
    box-sizing: border-box;
    /* Ensure padding is included in the width */
  }

  .custom-file-input-wrapper {
    width: 90%;
    /* Adjust width to fit within the screen */
  }

  .file-upload-button {
    width: 90%;
    font-size: 12px;
  }

  .file-name-display {
    font-size: 10px;
  }

  .button-div button {
    /* make button smaller */
    width: 50%;
    font-size: 12px !important;

  }

  .buttons-container {
    display: flex;
    flex-direction: column;
    /* Stack buttons vertically */
    align-items: center;
    /* Center the buttons */
    gap: 20px;
    /* Add some space between buttons */

  }

  .recent-orders {
    padding: 30px;
    width: 95%;
    /* Adjust width to fit within the screen */
    box-sizing: border-box;
    /* Ensure padding is included in the width */


  }

  .navItems {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  .sub-nav {
    margin-top: 25px;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  .anchor {
    font-size: 15px;
    padding: 6px;
  }

  input,
  select {
    width: 60%;
  }

  .filter-buttons {
    flex-wrap: wrap;
    position: relative;
    right: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    /* Adjust gap as needed */
  }

  .calculation-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .buttons-wrapper {
    flex-direction: column;
    /* Stack buttons vertically */
    align-items: center;
    gap: 10px;
  }

  #order-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* Full width for the order list */
  }

  .order-listItem {
    width: 100%;
    max-width: var(--order-card-max, 480px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 0;
    margin-left: 0;
  }

  .order-listItem button {
    /* Make buttons smaller */
    width: 100%;
    font-size: 12px !important;
    padding: 5px;
    /* Reduce padding for smaller buttons */

  }

  .order-details-div {
    width: 100%;
    max-width: var(--order-card-max, 480px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .order-div {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--order-card-max, 480px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .order-div p {
    font-size: 14px;
    /* wrap text */
    word-wrap: break-word;
    /* Ensure long words break to the next line */
    word-break: break-word;
    /* Ensure long words break to the next line */
    white-space: normal;
    /* Allow text to wrap normally */
  }

  .hidden-details {
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  }

  .hidden-details p {
    /* wrap text */
    word-wrap: break-word;
    /* Ensure long words break to the next line */
    word-break: break-word;
    /* Ensure long words break to the next line */
    white-space: normal;
    /* Allow text to wrap normally */
    overflow-wrap: break-word;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 6px 0;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #eef2ff;
    border-radius: 12px;
    color: #1f2937;
    font-size: 14px;
    line-height: 1.35;
  }

  .hidden-details p>span:first-child {
    min-width: 180px;
    flex-shrink: 0;
    font-weight: 700;
    color: #374151;
  }

  .hidden-details p br {
    line-height: 1.1;
  }

  .hidden-details p a {
    color: #4f46e5;
    text-decoration: underline;
  }

  .direction {
    width: 70%;
  }

  .direction p {
    font-size: 10px;
  }

  .languages-input {
    width: 70px !important;
    font-size: 14px;
  }

  .searchInput {
    position: relative;
    right: 30px;
  }


  /* New styles */
  .waves {
    top: 120px;
  }

  .quote-form input,
  .quote-form select {
    width: 100%;
    /* Full width for inputs and selects */
  }

  .quote {
    margin-top: 20px;
    margin-bottom: 40px;

    background-color: rgb(48, 48, 48);
    border-radius: 20px;
    position: relative;
    top: -30px;
    padding: 25px;

    display: none;
    width: 96%;
    max-width: var(--order-card-max, 480px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: auto;
    margin-left: auto;

    .transcript-box {
      padding: 10px;
    }

    .general-instructions-details {
      /* warp text to next line */
      word-wrap: break-word;
      /* Ensure long words break to the next line */
      word-break: break-word;
      /* Ensure long words break to the next line */
      white-space: normal;
      /* Allow text to wrap normally */
      padding: 10px;
      /* Add padding for better readability */
    }

    .general-instructions-summary {
      /* center summary element in details */
      text-align: center;

    }

    .to-be-confirmed {
      margin-bottom: 40px;
      width: 90%;
    }

    .globalSearchInput {
      width: 97%;
      /* Adjust width to fit within the screen */
      font-size: 10px;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      /* Reduce size */
      font-size: 25px !important;
      /* Responsive font size for better readability */
    }

    .upload-details {
      padding: 10px;
    }

    #first-form-tab {
      padding: 10px;
    }

    .ifincorrect {
      margin: 10px;
    }

    #diploma-input {
      font-size: 14px;
    }

    #transcript-input {
      font-size: 14px;
    }

    #clientOwnId {
      font-size: 14px;
    }

    .clientOwnId-wrapper {
      width: 200px;
    }

    .mfa-popup-content {
      width: 90%;
      /* Adjust width to fit within the screen */
    }
  }
}

/* 299px */
@media only screen and (max-width: 299px) and (min-width: 250px) and (min-device-height:400px) {

  /* New styles */
  .waves {
    top: 120px;
  }

  .username-greeting {
    font-size: 10px;
    color: lightgrey;
    left: 30px;

  }

  .quote-form {
    width: 85%;
    /* Adjust width to fit within the screen */
    box-sizing: border-box;
    /* Ensure padding is included in the width */

  }

  .quote-form input,
  .quote-form select {
    width: 100%;
    /* Full width for inputs and selects */
  }

  .quote {
    margin-top: 20px;
    margin-bottom: 40px;

    background-color: rgb(48, 48, 48);
    border-radius: 20px;
    position: relative;
    top: -30px;
    padding: 25px;

    display: none;
    max-width: 400px;
    width: 90%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .general-instructions-details {
    /* warp text to next line */
    word-wrap: break-word;
    /* Ensure long words break to the next line */
    word-break: break-word;
    /* Ensure long words break to the next line */
    white-space: normal;
    /* Allow text to wrap normally */
    padding: 10px;
    /* Add padding for better readability */
  }

  .general-instructions-summary {
    /* center summary element in details */
    text-align: center;

  }

  .to-be-confirmed {
    margin-bottom: 40px;
    width: 90%;
  }

  .globalSearchInput {
    width: 90%;
    /* Adjust width to fit within the screen */
    font-size: clamp(11px, 3vw, 12px);
    /* Responsive font size for better readability */
  }

  .mfa-popup-content {
    width: 90%;
    /* Adjust width to fit within the screen */
  }

}

/* OPTIMIZED for iPhone: (SE, 12 Pro,), Samsung: (Galaxy S8+, S20 Ultra,   */
@media only screen and (max-width: 399px) and (min-width: 330px) and (min-device-height:600px) {

  .sign-out {
    right: 40px;
    top: 100px;
    /* Adjust for taller navbar */
    font-size: 14px;
    color: lightgrey;
    font-size: 8px;
  }

  .company-icon {
    top: 40px;
    font-size: 30px;
  }

  #settings-icon {
    position: absolute;
    top: 120px;
    left: unset;
    right: 70px;
    font-size: 20px;
  }

  .username-greeting {
    left: 20px;
    top: 90px;
    /* Adjust for taller navbar */
    font-size: 8px;
  }

  .files-summary {
    font-size: 14px;
  }

  #mfa-authentication-text {
    font-size: 10px;
  }

  .quote-form {
    width: 330px;
    box-sizing: border-box;
    /* Ensure padding is included in the width */
  }

  .custom-file-input-wrapper {
    width: 100%;
    /* Adjust width to fit within the screen */
  }

  .file-upload-button {
    width: 90%;
    font-size: 12px;
  }

  .file-name-display {
    font-size: 10px;
  }

  .button-div button {
    /* make button smaller */
    width: 50%;
    font-size: 12px !important;

  }

  .buttons-container {
    display: flex;
    flex-direction: column;
    /* Stack buttons vertically */
    align-items: center;
    /* Center the buttons */
    gap: 20px;
    /* Add some space between buttons */

  }

  .recent-orders {
    padding: 30px;
    width: 93%;
    /* Adjust width to fit within the screen */
    box-sizing: border-box;
    /* Ensure padding is included in the width */


  }

  .navItems {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  .sub-nav {
    margin-top: 25px;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  .anchor {
    font-size: 15px;
    padding: 6px;
  }

  input,
  select {
    width: 60%;
  }

  .filter-buttons {
    flex-wrap: wrap;
    position: relative;
    right: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    /* Adjust gap as needed */
  }

  .calculation-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .buttons-wrapper {
    flex-direction: column;
    /* Stack buttons vertically */
    align-items: center;
    gap: 10px;
  }

  #order-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* Full width for the order list */
  }

  .order-listItem {
    width: 96%;
    max-width: var(--order-card-max, 480px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: auto;
    margin-left: auto;
  }

  .order-details-div {
    width: 96%;
    max-width: var(--order-card-max, 480px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Center the items */
  }

  .order-div {
    box-sizing: border-box;
    width: 96%;
    max-width: var(--order-card-max, 480px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
  }

  .searchInput {
    position: relative;
    right: 30px;
  }


  /* New styles */
  .waves {
    top: 120px;
    width: 100%;
    /* Full width for the waves */
  }

  .quote-form input,
  .quote-form select {
    width: 100%;
    /* Full width for inputs and selects */
  }

  .quote {
    margin-top: 20px;
    margin-bottom: 40px;

    background-color: rgb(48, 48, 48);
    border-radius: 20px;
    position: relative;
    top: -30px;
    padding: 25px;

    display: none;
    width: 90%;
    max-width: 400px;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .diploma-box {
    padding: 10px;
  }

  .transcript-box {
    padding: 10px;
  }

  .general-instructions-details {
    /* warp text to next line */
    word-wrap: break-word;
    /* Ensure long words break to the next line */
    word-break: break-word;
    /* Ensure long words break to the next line */
    white-space: normal;
    /* Allow text to wrap normally */
    padding: 10px;
    /* Add padding for better readability */
  }

  .general-instructions-summary {
    /* center summary element in details */
    text-align: center;

  }

  .to-be-confirmed {
    margin-bottom: 40px;
    width: 90%;
    /* Adjust width to fit within the screen */
  }

  .globalSearchInput {
    width: 90%;
    /* Adjust width to fit within the screen */
    font-size: clamp(13px, 4vw, 15px);
  }

  .clientOwnId-wrapper {
    width: 300px;
    /* Adjust width to fit within the screen */
  }

  .mfa-popup-content {
    width: 90%;
    /* Adjust width to fit within the screen */
  }
}

/* OPTIMIZED for Galaxy S9+  */
@media only screen and (max-width: 329px) and (min-width: 300px) and (min-device-height:600px) {


  .sign-out {
    right: 40px;
    top: 100px;
    /* Adjust for taller navbar */
    font-size: 14px;
    color: lightgrey;
    font-size: 8px;
  }

  .company-icon {
    top: 40px;
    font-size: 30px;
  }

  #settings-icon {
    position: absolute;
    top: 120px;
    left: unset;
    right: 70px;
    font-size: 20px;
  }

  .username-greeting {
    left: 20px;
    top: 90px;
    /* Adjust for taller navbar */
    font-size: 8px;
  }

  .files-summary {
    font-size: 14px;
  }

  #mfa-authentication-text {
    font-size: 10px;
  }

  .quote-form {
    width: 300px;
    box-sizing: border-box;
    /* Ensure padding is included in the width */
  }

  .custom-file-input-wrapper {
    width: 100%;
    /* Adjust width to fit within the screen */
  }

  .file-upload-button {
    width: 90%;
    font-size: 12px;
  }

  .file-name-display {
    font-size: 10px;
  }

  .button-div button {
    /* make button smaller */
    width: 50%;
    font-size: 12px !important;

  }

  .buttons-container {
    display: flex;
    flex-direction: column;
    /* Stack buttons vertically */
    align-items: center;
    /* Center the buttons */
    gap: 20px;
    /* Add some space between buttons */

  }

  .recent-orders {
    padding: 30px;
    width: 95%;
    /* Adjust width to fit within the screen */
    box-sizing: border-box;
    /* Ensure padding is included in the width */


  }

  .navItems {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  .sub-nav {
    margin-top: 25px;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  .anchor {
    font-size: 15px;
    padding: 6px;
  }

  input,
  select {
    width: 60%;
  }

  .filter-buttons {
    flex-wrap: wrap;
    position: relative;
    right: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    /* Adjust gap as needed */
  }

  .calculation-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .buttons-wrapper {
    flex-direction: column;
    /* Stack buttons vertically */
    align-items: center;
    gap: 10px;
  }

  #order-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* Full width for the order list */
  }

  .order-listItem {
    width: 96%;
    max-width: var(--order-card-max, 480px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: auto;
    margin-left: auto;
  }

  .order-details-div {
    width: 96%;
    max-width: var(--order-card-max, 480px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Center the items */
  }

  .order-div {
    box-sizing: border-box;
    width: 96%;
    max-width: var(--order-card-max, 480px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
  }

  .searchInput {
    position: relative;
    right: 30px;
  }


  /* New styles */
  .waves {
    top: 120px;
  }

  .quote-form input,
  .quote-form select {
    width: 100%;
    /* Full width for inputs and selects */
  }

  .quote {
    margin-top: 20px;
    margin-bottom: 40px;

    background-color: rgb(48, 48, 48);
    border-radius: 20px;
    position: relative;
    top: -30px;
    padding: 25px;

    display: none;
    max-width: 400px;
    width: 90%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .diploma-box {
    padding: 10px;
  }

  .transcript-box {
    padding: 10px;
  }

  .general-instructions-details {
    /* warp text to next line */
    word-wrap: break-word;
    /* Ensure long words break to the next line */
    word-break: break-word;
    /* Ensure long words break to the next line */
    white-space: normal;
    /* Allow text to wrap normally */
    padding: 10px;
    /* Add padding for better readability */
  }

  .general-instructions-summary {
    /* center summary element in details */
    text-align: center;

  }

  .to-be-confirmed {
    margin-bottom: 40px;
    width: 90%;
  }

  .globalSearchInput {
    width: 90%;
    /* Adjust width to fit within the screen */
    font-size: clamp(11px, 3vw, 12px);
    /* Responsive font size for better readability */
  }

  .mfa-popup-content {
    width: 90%;
    /* Adjust width to fit within the screen */
  }

}

/* OPTIMIZED for Samsung Galaxy Z Fold 5 */
@media only screen and (width: 344px) and (height:882px) {


  .sign-out {
    right: 40px;
    top: 110px;
    /* Adjust for taller navbar */
    font-size: 14px;
    color: lightgrey;
    font-size: 12px;
  }

  .username-greeting {
    left: 20px;
    top: 95px;
    /* Adjust for taller navbar */
    font-size: 10px !important;
  }

  .company-icon {
    top: 40px;
    font-size: 40px;
  }

  #settings-icon {
    position: absolute;
    top: 130px;
    right: 0px;
    left: 50px;
  }

  .recent-orders {
    padding: 30px;
    width: 90%;
    /* Adjust width to fit within the screen */
    box-sizing: border-box;
    /* Ensure padding is included in the width */
  }

  .navItems {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  .sub-nav {
    margin-top: 25px;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  .anchor {
    font-size: 15px;
    padding: 6px;
  }

  input,
  select {
    width: 60%;
  }

  .filter-buttons {
    flex-wrap: wrap;
    position: relative;
    right: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    /* Adjust gap as needed */
  }

  .calculation-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;


  }

  .buttons-wrapper {
    flex-direction: column;
    /* Stack buttons vertically */
    align-items: center;
    gap: 10px;
  }

  #order-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

  }

  .order-listItem {
    box-sizing: border-box;
    width: 96%;
    max-width: var(--order-card-max, 480px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: auto;
    margin-left: auto;
  }

  .order-div {
    box-sizing: border-box;
    width: 96%;
    max-width: var(--order-card-max, 480px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    padding: 10px;
  }

  .searchInput {
    position: relative;
    right: 30px;
  }

  .order-div p {
    font-size: 14px;
    /* wrap text */
    word-wrap: break-word;
    /* Ensure long words break to the next line */
    word-break: break-word;
    /* Ensure long words break to the next line */
    white-space: normal;
    /* Allow text to wrap normally */
  }

  .hidden-details {
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .hidden-details p {
    /* wrap text */
    word-wrap: break-word;
    /* Ensure long words break to the next line */
    word-break: break-word;
    /* Ensure long words break to the next line */
    white-space: normal;
    /* Allow text to wrap normally */
    overflow-wrap: break-word;
  }

  /* New styles */
  .waves {
    top: 120px;
  }

  .quote-form {
    width: 85%;
    /* Adjust width to fit within the screen */
    box-sizing: border-box;
    /* Ensure padding is included in the width */

  }

  .quote-form input,
  .quote-form select {
    width: 100%;
    /* Full width for inputs and selects */
  }

  .quote {
    margin-top: 20px;
    margin-bottom: 40px;

    background-color: rgb(48, 48, 48);
    border-radius: 20px;
    position: relative;
    top: -30px;
    padding: 25px;

    display: none;
    max-width: 400px;
    width: 90%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .general-instructions-details {
    /* warp text to next line */
    word-wrap: break-word;
    /* Ensure long words break to the next line */
    word-break: break-word;
    /* Ensure long words break to the next line */
    white-space: normal;
    /* Allow text to wrap normally */
    padding: 10px;
    /* Add padding for better readability */
  }

  .general-instructions-summary {
    /* center summary element in details */
    text-align: center;

  }

  .to-be-confirmed {
    margin-bottom: 40px;
    width: 90%;
  }

  .globalSearchInput {
    width: 90%;
    /* Adjust width to fit within the screen */
    font-size: clamp(11px, 3vw, 12px);
    /* Responsive font size for better readability */
  }

  #comment {
    width: 90%;
    /* Adjust width to fit within the screen */
  }

  .clientOwnId-wrapper {
    width: 270px;
  }

  .mfa-popup-content {
    width: 90%;
    /* Adjust width to fit within the screen */
  }
}

/* 399px and below (small screens, shorter height) */
@media only screen and (max-width: 399px) and (min-width: 300px) and (max-device-height:599px) {

  .sign-out {
    right: 20px;
    top: 100px;
    /* Adjust for shorter navbar */
    font-size: 13px;
  }

  .username-greeting {
    left: 20px;
    top: 85px;
    /* Adjust for shorter navbar */
    font-size: 13px;
  }

  .settings-icon {
    top: 35px;
    /* Adjust for shorter navbar */
    font-size: 35px;
  }

  input,
  select {
    width: 90%;
  }

  .recent-orders,
  .to-be-confirmed,
  .quote,
  .done-div,
  .quote-form {
    padding: 25px;
    /* Reduce padding slightly */
    width: 90%;
  }

  .anchor {
    font-size: 14px;
    padding: 5px;
    /* Reduce padding */
  }

  .navItems {
    flex-direction: column;
    /* Stack navigation items vertically */
  }

  .buttons-wrapper {
    flex-direction: column;
    /* Stack buttons vertically */
    align-items: center;
    gap: 10px;
  }

  .notary-cost-div,
  .translation-cost-div,
  .notary-number-div,
  .shipping-cost-div,
  .turnaround-cost-div,
  .word-count-div,
  .page-count-div,
  .evaluation-cost-div,
  .evaluation-turnaround-div,
  .evaluation-type-div,
  .apostille-cost-div,
  .discount-div,
  .balance-div,
  .average-total-number-div,
  .text-confidence-div {
    flex-direction: column;
    /* Stack div contents vertically */
    align-items: center;
  }

  .div-for-expedited-options {
    flex-direction: column;
  }

  /* New styles */
  .waves {
    top: 120px;
  }

  .username-greeting {
    font-size: 10px;
    color: lightgrey;
    left: 30px;

  }

  .quote-form {
    width: 85%;
    /* Adjust width to fit within the screen */
    box-sizing: border-box;
    /* Ensure padding is included in the width */

  }

  .quote-form input,
  .quote-form select {
    width: 100%;
    /* Full width for inputs and selects */
  }

  .quote {
    margin-top: 20px;
    margin-bottom: 40px;

    background-color: rgb(48, 48, 48);
    border-radius: 20px;
    position: relative;
    top: -30px;
    padding: 25px;

    display: none;
    max-width: 400px;
    width: 90%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .general-instructions-details {
    /* warp text to next line */
    word-wrap: break-word;
    /* Ensure long words break to the next line */
    word-break: break-word;
    /* Ensure long words break to the next line */
    white-space: normal;
    /* Allow text to wrap normally */
    padding: 10px;
    /* Add padding for better readability */
  }

  .general-instructions-summary {
    /* center summary element in details */
    text-align: center;

  }

  .globalSearchInput {
    width: 90%;
    /* Adjust width to fit within the screen */
    font-size: clamp(11px, 3vw, 12px);
    /* Responsive font size for better readability */
  }

  .mfa-popup-content {
    width: 90%;
    /* Adjust width to fit within the screen */
  }
}

/* Nokia Lumia 520 and iPhone 4*/
@media only screen and (max-width: 330px) and (min-width: 319px) {


  .sign-out {
    right: 40px;
    top: 100px;
    /* Adjust for taller navbar */
    font-size: 14px;
    color: lightgrey;
    font-size: 8px;
  }

  .company-icon {
    top: 40px;
    font-size: 30px;
  }

  #settings-icon {
    position: absolute;
    top: 120px;
    left: unset;
    right: 70px;
    font-size: 20px;
  }

  .username-greeting {
    left: 20px;
    top: 90px;
    /* Adjust for taller navbar */
    font-size: 8px;
  }

  .files-summary {
    font-size: 14px;
  }

  #mfa-authentication-text {
    font-size: 10px;
  }

  .quote-form {
    width: 290px;
    box-sizing: border-box;
    /* Ensure padding is included in the width */
    position: relative;
    /* Position the div relative to the navbar */
  }

  .custom-file-input-wrapper {
    width: 100%;
    /* Adjust width to fit within the screen */
  }

  .file-upload-button {
    width: 90%;
    font-size: 12px;
  }

  .file-name-display {
    font-size: 10px;
  }

  .button-div button {
    /* make button smaller */
    width: 50%;
    font-size: 12px !important;

  }

  .buttons-container {
    display: flex;
    flex-direction: column;
    /* Stack buttons vertically */
    align-items: center;
    /* Center the buttons */
    gap: 20px;
    /* Add some space between buttons */

  }

  .recent-orders {
    padding: 30px;
    width: 90%;
    /* Adjust width to fit within the screen */
    box-sizing: border-box;
    /* Ensure padding is included in the width */
    margin-right: 5px;

  }

  .navItems {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  .sub-nav {
    margin-top: 25px;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  .anchor {
    font-size: 15px;
    padding: 6px;
  }

  input,
  select {
    width: 60%;
  }

  .filter-buttons {
    flex-wrap: wrap;
    position: relative;
    right: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    /* Adjust gap as needed */
  }

  .calculation-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .buttons-wrapper {
    flex-direction: column;
    /* Stack buttons vertically */
    align-items: center;
    gap: 10px;
  }

  #order-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* Full width for the order list */
  }

  .order-listItem {
    width: 96%;
    max-width: var(--order-card-max, 480px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: auto;
    margin-left: auto;
  }

  .order-details-div {
    width: 96%;
    max-width: var(--order-card-max, 480px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Center the items */
  }

  .order-div {
    box-sizing: border-box;
    width: 96%;
    max-width: var(--order-card-max, 480px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .searchInput {
    position: relative;
    right: 30px;
  }

  .order-div p {
    font-size: 14px;
    /* wrap text */
    word-wrap: break-word;
    /* Ensure long words break to the next line */
    word-break: break-word;
    /* Ensure long words break to the next line */
    white-space: normal;
    /* Allow text to wrap normally */
  }

  .hidden-details {
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .hidden-details p {
    /* wrap text */
    word-wrap: break-word;
    /* Ensure long words break to the next line */
    word-break: break-word;
    /* Ensure long words break to the next line */
    white-space: normal;
    /* Allow text to wrap normally */
    overflow-wrap: break-word;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    /* Reduce size */
    font-size: 25px !important;
    /* Responsive font size for better readability */
  }

  .languages-input {
    width: 70px !important;
    font-size: 16px;
  }

  .files-details {
    width: 210px;
    /* Adjust width to fit within the screen */
  }

  .files-summary {
    font-size: 14px;
  }

  /* New styles */
  .waves {
    top: 120px;
  }

  .quote-form input,
  .quote-form select {
    width: 100%;
    /* Full width for inputs and selects */
  }

  .quote {
    margin-top: 20px;
    margin-bottom: 40px;

    background-color: rgb(48, 48, 48);
    border-radius: 20px;
    position: relative;
    top: -30px;
    padding: 25px;

    display: none;
    max-width: 400px;
    width: 90%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .diploma-box {
    padding: 10px;
  }

  .transcript-box {
    padding: 10px;
  }

  .general-instructions-details {
    /* warp text to next line */
    word-wrap: break-word;
    /* Ensure long words break to the next line */
    word-break: break-word;
    /* Ensure long words break to the next line */
    white-space: normal;
    /* Allow text to wrap normally */
    padding: 10px;
    /* Add padding for better readability */
  }

  .general-instructions-summary {
    /* center summary element in details */
    text-align: center;

  }

  .to-be-confirmed {
    margin-bottom: 40px;
    width: 90%;
  }

  .globalSearchInput {
    width: 90%;
    /* Adjust width to fit within the screen */
    font-size: clamp(11px, 3vw, 12px);
    /* Responsive font size for better readability */
  }

  .mfa-popup-content {
    width: 90%;
    /* Adjust width to fit within the screen */
  }

}


/* 449px and below (slightly larger screens, shorter height)* iPhone 6/7/8 Plus */
@media only screen and (max-width: 449px) and (min-width: 400px) and (max-device-height:669px) {

  .sign-out {
    right: 40px;
    top: 110px;
    /* Adjust for taller navbar */
    font-size: 14px;
    color: lightgrey;
    font-size: 12px;
  }

  .username-greeting {
    left: 20px;
    top: 95px;
    /* Adjust for taller navbar */
    font-size: 14px;
  }

  .company-icon {
    top: 40px;
    font-size: 40px;
  }

  #settings-icon {
    position: absolute;
    top: 105px;
    right: 100px;
    left: unset;
  }

  .recent-orders {
    padding: 30px;
    width: 90%;
    /* Adjust width to fit within the screen */
    box-sizing: border-box;
    /* Ensure padding is included in the width */
  }

  .navItems {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  .sub-nav {
    margin-top: 25px;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  .anchor {
    font-size: 15px;
    padding: 6px;
  }

  input,
  select {
    width: 60%;
  }

  .filter-buttons {
    flex-wrap: wrap;
    position: relative;
    right: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    /* Adjust gap as needed */
  }

  .calculation-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;


  }

  .buttons-wrapper {
    flex-direction: column;
    /* Stack buttons vertically */
    align-items: center;
    gap: 10px;
  }

  #order-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

  }

  .order-listItem {
    width: 96%;
    max-width: var(--order-card-max, 480px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: auto;
    margin-left: auto;

  }

  .order-div {
    box-sizing: border-box;
    width: 96%;
    max-width: var(--order-card-max, 480px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .searchInput {
    position: relative;
    right: 50px;
  }

  /* New styles */
  .waves {
    top: 120px;
  }

  .username-greeting {
    font-size: 10px;
    color: lightgrey;
    left: 30px;

  }

  .quote-form {
    width: 85%;
    /* Adjust width to fit within the screen */
    box-sizing: border-box;
    /* Ensure padding is included in the width */

  }

  .quote-form input,
  .quote-form select {
    width: 100%;
    /* Full width for inputs and selects */
  }

  .quote {
    margin-top: 20px;
    margin-bottom: 40px;

    background-color: rgb(48, 48, 48);
    border-radius: 20px;
    position: relative;
    top: -30px;
    padding: 25px;

    display: none;
    max-width: 400px;
    width: 90%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .diploma-box {
    padding: 10px;
  }

  .transcript-box {
    padding: 10px;
  }

  .general-instructions-details {
    /* warp text to next line */
    word-wrap: break-word;
    /* Ensure long words break to the next line */
    word-break: break-word;
    /* Ensure long words break to the next line */
    white-space: normal;
    /* Allow text to wrap normally */
    padding: 10px;
    /* Add padding for better readability */
  }

  .general-instructions-summary {
    /* center summary element in details */
    text-align: center;

  }

  .to-be-confirmed {
    margin-bottom: 40px;
    width: 90%;
  }

  .globalSearchInput {
    width: 90%;
    /* Adjust width to fit within the screen */
    font-size: clamp(11px, 3vw, 12px);
    /* Responsive font size for better readability */
  }
}


/* OPTIMIZED for iPhone: (14 Pro Max, XR), Samsung: (Pixel 7, Galaxy A51/71 ) */
@media only screen and (max-width: 449px) and (min-width: 400px) and (min-device-height:670px) {

  .recent-orders {
    padding: 30px;
    width: 90%;
    /* Adjust width to fit within the screen */
    box-sizing: border-box;
    /* Ensure padding is included in the width */
  }

  .navItems {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  .sub-nav {
    margin-top: 25px;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  .anchor {
    font-size: 15px;
    padding: 6px;
  }

  input,
  select {
    width: 60%;
  }

  .filter-buttons {
    flex-wrap: wrap;
    position: relative;
    right: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    /* Adjust gap as needed */
  }

  .calculation-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;


  }

  .buttons-wrapper {
    flex-direction: column;
    /* Stack buttons vertically */
    align-items: center;
    gap: 10px;
  }

  #order-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

  }

  .order-listItem {
    width: 96%;
    max-width: var(--order-card-max, 480px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: auto;
    margin-left: auto;

  }

  .order-div {
    box-sizing: border-box;
    width: 96%;
    max-width: var(--order-card-max, 480px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .searchInput {
    position: relative;
    right: 50px;
  }

  /* New styles */
  .waves {
    top: 120px;
  }

  .username-greeting {
    font-size: 10px;
    color: lightgrey;
    left: 30px;

  }

  .quote-form {
    width: 85%;
    /* Adjust width to fit within the screen */
    box-sizing: border-box;
    /* Ensure padding is included in the width */

  }

  .quote-form input,
  .quote-form select {
    width: 100%;
    /* Full width for inputs and selects */
  }

  .quote {
    margin-top: 20px;
    margin-bottom: 40px;

    background-color: rgb(48, 48, 48);
    border-radius: 20px;
    position: relative;
    top: -30px;
    padding: 25px;

    display: none;
    max-width: 400px;
    width: 90%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .diploma-box {
    padding: 10px;
  }

  .transcript-box {
    padding: 10px;
  }

  .general-instructions-details {
    /* warp text to next line */
    word-wrap: break-word;
    /* Ensure long words break to the next line */
    word-break: break-word;
    /* Ensure long words break to the next line */
    white-space: normal;
    /* Allow text to wrap normally */
    padding: 10px;
    /* Add padding for better readability */
  }

  .general-instructions-summary {
    /* center summary element in details */
    text-align: center;

  }

  .to-be-confirmed {
    margin-bottom: 40px;
    width: 90%;
  }

  .globalSearchInput {
    width: 90%;
    /* Adjust width to fit within the screen */
    font-size: clamp(11px, 3vw, 12px);
    /* Responsive font size for better readability */
  }

}

/* max-width 460 px media */
@media only screen and (max-width: 470px) and (min-width: 450px) {
  .quote-form {
    width: 90% !important;
  }

  .recent-orders {
    width: 90% !important;
  }

  .navItems {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  .sub-nav {
    margin-top: 25px;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  .anchor {
    font-size: 15px;
    padding: 6px;
  }

  input,
  select {
    width: 60%;
  }

  .filter-buttons {
    flex-wrap: wrap;
    position: relative;
    right: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    /* Adjust gap as needed */
  }

  .calculation-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;


  }

  .buttons-wrapper {
    flex-direction: column;
    /* Stack buttons vertically */
    align-items: center;
    gap: 10px;
  }

  #order-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

  }

  .order-listItem {
    width: 96%;
    max-width: var(--order-card-max, 480px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: auto;
    margin-left: auto;
  }

  .order-div {
    box-sizing: border-box;
    width: 96%;
    max-width: var(--order-card-max, 480px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .searchInput {
    position: relative;
    right: 50px;
  }

  /* New styles */
  .waves {
    top: 120px;
  }

  .username-greeting {
    font-size: 10px;
    color: lightgrey;
    left: 30px;

  }

  .quote-form input,
  .quote-form select {
    width: 100%;
    /* Full width for inputs and selects */
  }

  .quote {
    margin-top: 20px;
    margin-bottom: 40px;

    background-color: rgb(48, 48, 48);
    border-radius: 20px;
    position: relative;
    top: -30px;
    padding: 25px;

    display: none;
    max-width: 400px;
    width: 90%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .diploma-box {
    padding: 10px;
  }

  .transcript-box {
    padding: 10px;
  }

  .general-instructions-details {
    /* warp text to next line */
    word-wrap: break-word;
    /* Ensure long words break to the next line */
    word-break: break-word;
    /* Ensure long words break to the next line */
    white-space: normal;
    /* Allow text to wrap normally */
    padding: 10px;
    /* Add padding for better readability */
  }

  .general-instructions-summary {
    /* center summary element in details */
    text-align: center;

  }

  .to-be-confirmed {
    margin-bottom: 40px;
    width: 90%;
  }

  .globalSearchInput {
    width: 90%;
    /* Adjust width to fit within the screen */
    font-size: clamp(11px, 3vw, 12px);
    /* Responsive font size for better readability */
  }
}

/* OPTIMIZED for Microsoft Duo */
@media only screen and (max-width: 598px) and (min-width: 481px) {

  .sign-out {
    right: 40px;
    top: 105px;
    /* Adjust for taller navbar */
    font-size: 14px;
    color: lightgrey;
    font-size: 12px;
  }

  .username-greeting {
    left: 20px;
    top: 95px;
    /* Adjust for taller navbar */
    font-size: 14px;
  }

  .company-icon {
    top: 40px;
    font-size: 40px;
  }

  #settings-icon {
    position: absolute;
    top: 120px;
    right: 0px;
    left: 80px;
  }

  .recent-orders {
    padding: 30px;
    width: 90%;
    /* Adjust width to fit within the screen */
    box-sizing: border-box;
    /* Ensure padding is included in the width */
  }

  .navItems {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  .sub-nav {
    margin-top: 25px;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  .anchor {
    font-size: 15px;
    padding: 6px;
  }

  input,
  select {
    width: 60%;
  }

  .filter-buttons {
    flex-wrap: wrap;
    position: relative;
    right: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    /* Adjust gap as needed */
  }

  .calculation-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;


  }

  .buttons-wrapper {
    flex-direction: column;
    /* Stack buttons vertically */
    align-items: center;
    gap: 10px;
  }

  #order-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

  }

  .order-listItem {
    width: 96%;
    max-width: var(--order-card-max, 480px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: auto;
    margin-left: auto;
  }

  .order-div {
    box-sizing: border-box;
    width: 96%;
    max-width: var(--order-card-max, 480px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .searchInput {
    position: relative;
    right: 50px;
  }

  /* New styles */
  .waves {
    top: 120px;
  }

  .username-greeting {
    font-size: 10px;
    color: lightgrey;
    left: 30px;

  }

  .quote-form {
    width: 85%;
    /* Adjust width to fit within the screen */
    box-sizing: border-box;
    /* Ensure padding is included in the width */

  }

  .quote-form input,
  .quote-form select {
    width: 100%;
    /* Full width for inputs and selects */
  }

  .quote {
    margin-top: 20px;
    margin-bottom: 40px;

    background-color: rgb(48, 48, 48);
    border-radius: 20px;
    position: relative;
    top: -30px;
    padding: 25px;

    display: none;
    max-width: 400px;
    width: 90%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .general-instructions-details {
    /* warp text to next line */
    word-wrap: break-word;
    /* Ensure long words break to the next line */
    word-break: break-word;
    /* Ensure long words break to the next line */
    white-space: normal;
    /* Allow text to wrap normally */
    padding: 10px;
    /* Add padding for better readability */
  }

  .general-instructions-summary {
    /* center summary element in details */
    text-align: center;

  }

  .to-be-confirmed {
    margin-bottom: 40px;
    width: 90%;
  }

  .globalSearchInput {
    width: 90%;
    /* Adjust width to fit within the screen */
    font-size: clamp(11px, 3vw, 12px);
    /* Responsive font size for better readability */
  }

}

/* Nokia N9 */
@media only screen and (max-width: 490px) and (min-width: 460px) {


  .sign-out {
    right: 40px;
    top: 110px;
    /* Adjust for taller navbar */
    font-size: 14px;
    color: lightgrey;
    font-size: 12px;
  }

  .username-greeting {
    left: 20px;
    top: 95px;
    /* Adjust for taller navbar */
    font-size: 14px;
  }

  .company-icon {
    top: 40px;
    font-size: 40px;
  }

  #settings-icon {
    position: absolute;
    top: 120px;
    right: 0px;
    left: 60px;
  }

  .recent-orders {
    padding: 30px;
    width: 90%;
    /* Adjust width to fit within the screen */
    box-sizing: border-box;
    /* Ensure padding is included in the width */
  }

  .navItems {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  .sub-nav {
    margin-top: 25px;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  .anchor {
    font-size: 15px;
    padding: 6px;
  }

  input,
  select {
    width: 60%;
  }

  .filter-buttons {
    flex-wrap: wrap;
    position: relative;
    right: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    /* Adjust gap as needed */
  }

  .calculation-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;


  }

  .buttons-wrapper {
    flex-direction: column;
    /* Stack buttons vertically */
    align-items: center;
    gap: 10px;
  }

  #order-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

  }

  .order-listItem {
    width: 96%;
    max-width: var(--order-card-max, 480px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: auto;
    margin-left: auto;
  }

  .order-div {
    box-sizing: border-box;
    width: 420px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .searchInput {
    position: relative;
    right: 50px;
  }

  /* New styles */
  .waves {
    top: 120px;
  }

  .username-greeting {
    font-size: 10px;
    color: lightgrey;
    left: 30px;

  }

  .quote-form {
    width: 85%;
    /* Adjust width to fit within the screen */
    box-sizing: border-box;
    /* Ensure padding is included in the width */

  }

  .quote-form input,
  .quote-form select {
    width: 100%;
    /* Full width for inputs and selects */
  }

  .quote {
    margin-top: 20px;
    margin-bottom: 40px;

    background-color: rgb(48, 48, 48);
    border-radius: 20px;
    position: relative;
    top: -30px;
    padding: 25px;

    display: none;
    max-width: 400px;
    width: 90%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .general-instructions-details {
    /* warp text to next line */
    word-wrap: break-word;
    /* Ensure long words break to the next line */
    word-break: break-word;
    /* Ensure long words break to the next line */
    white-space: normal;
    /* Allow text to wrap normally */
    padding: 10px;
    /* Add padding for better readability */
  }

  .general-instructions-summary {
    /* center summary element in details */
    text-align: center;

  }

  .to-be-confirmed {
    margin-bottom: 40px;
    width: 90%;
  }

  .globalSearchInput {
    width: 90%;
    /* Adjust width to fit within the screen */
    font-size: clamp(11px, 3vw, 12px);
    /* Responsive font size for better readability */
  }

}

/* 698px */
@media only screen and (max-width: 698px) and (min-width: 599px) and (min-height:500px) {

  /* New styles */
  .waves {
    top: 120px;
  }

  .username-greeting {
    font-size: 10px;
    color: lightgrey;
    left: 30px;

  }

  .quote-form {
    width: 85%;
    /* Adjust width to fit within the screen */
    box-sizing: border-box;
    /* Ensure padding is included in the width */

  }

  .quote-form input,
  .quote-form select {
    width: 100%;
    /* Full width for inputs and selects */
  }

  .quote {
    margin-top: 20px;
    margin-bottom: 40px;

    background-color: rgb(48, 48, 48);
    border-radius: 20px;
    position: relative;
    top: -30px;
    padding: 25px;

    display: none;
    max-width: 400px;
    width: 90%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .general-instructions-details {
    /* warp text to next line */
    word-wrap: break-word;
    /* Ensure long words break to the next line */
    word-break: break-word;
    /* Ensure long words break to the next line */
    white-space: normal;
    /* Allow text to wrap normally */
    padding: 10px;
    /* Add padding for better readability */
  }

  .general-instructions-summary {
    /* center summary element in details */
    text-align: center;

  }

  .to-be-confirmed {
    margin-bottom: 40px;
    width: 90%;
  }

  .globalSearchInput {
    width: 90%;
    /* Adjust width to fit within the screen */
    font-size: clamp(11px, 3vw, 12px);
    /* Responsive font size for better readability */
  }

}

/* 698px 400px */
@media only screen and (max-width: 698px) and (min-width: 599px) and (max-height: 400px) {
  body {
    /* prevent horizontal scrolling when overflow:hidden does not help  */
    width: 100vw;
    /* Full viewport width */
    min-height: 100vh;
    /* Full viewport height */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    /* Removed position: fixed; to allow scrolling */
    /* left: 0; */
  }

  .userProfile-div {
    width: 100%;
    /* Full width for user profile */
  }

  .sign-out {
    right: 100px;
    top: 110px;
    /* Adjust for taller navbar */
    font-size: 14px;
    color: lightgrey;
    font-size: 12px;
  }

  .username-greeting {
    left: 20px;
    top: 95px;
    /* Adjust for taller navbar */
    font-size: 14px;
  }

  .company-icon {
    top: 40px;
    font-size: 40px;
  }

  #settings-icon {
    position: absolute;
    top: 120px;
    right: 0px;
    left: 120px;
  }

  .recent-orders {
    padding: 30px;
    width: 500px;
    box-sizing: border-box;
    /* Ensure padding is included in the width */
  }

  .navItems {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  .sub-nav {
    margin-top: 25px;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  .anchor {
    font-size: 15px;
    padding: 6px;
  }

  input,
  select {
    width: 60%;
  }

  .filter-buttons {
    flex-wrap: wrap;
    position: relative;
    right: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    /* Adjust gap as needed */
  }

  .calculation-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;


  }

  .buttons-wrapper {
    flex-direction: column;
    /* Stack buttons vertically */
    align-items: center;
    gap: 10px;
  }

  #order-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* Full width for the order list */
  }

  .order-listItem {
    width: 96%;
    max-width: var(--order-card-max, 480px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: auto;
    margin-left: auto;
  }

  .order-div {
    box-sizing: border-box;
    width: 96%;
    max-width: var(--order-card-max, 480px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .searchInput {
    position: relative;
    right: 50px;
  }

  /* New styles */
  .waves {
    top: 120px;
    width: 100%;
    /* Full width for the waves */
  }

  .username-greeting {
    font-size: 10px;
    color: lightgrey;
    left: 30px;

  }

  .quote-form {
    width: 65%;
    /* Adjust width to fit within the screen */
    box-sizing: border-box;
    /* Ensure padding is included in the width */

  }

  .quote-form input,
  .quote-form select {
    width: 100%;
    /* Full width for inputs and selects */
  }

  .quote {
    margin-top: 20px;
    margin-bottom: 40px;

    background-color: rgb(48, 48, 48);
    border-radius: 20px;
    position: relative;
    top: -30px;
    padding: 25px;

    display: none;
    max-width: 400px;
    width: 90%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .general-instructions-details {
    /* warp text to next line */
    word-wrap: break-word;
    /* Ensure long words break to the next line */
    word-break: break-word;
    /* Ensure long words break to the next line */
    white-space: normal;
    /* Allow text to wrap normally */
    padding: 10px;
    /* Add padding for better readability */
  }

  .general-instructions-summary {
    /* center summary element in details */
    text-align: center;

  }

  .to-be-confirmed {
    margin-bottom: 40px;
    width: 90%;
  }

}


/* OPTIMIZED for Ipad Air, Asus Zenbook Fold */
@media only screen and (max-width: 899px) and (min-width: 800px) {

  .sign-out {
    right: 100px;
    top: 110px;
    /* Adjust for taller navbar */
    font-size: 14px;
    color: lightgrey;
    font-size: 12px;
  }

  .username-greeting {
    left: 20px;
    top: 95px;
    /* Adjust for taller navbar */
    font-size: 14px;
  }

  .company-icon {
    top: 40px;
    font-size: 40px;
  }

  #settings-icon {
    position: absolute;
    top: 105px;
    right: 0px;
    left: 150px;
  }

  .recent-orders {
    padding: 30px;
    width: 90%;
    /* Adjust width to fit within the screen */
    box-sizing: border-box;
    /* Ensure padding is included in the width */
  }

  .navItems {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  .sub-nav {
    margin-top: 25px;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  .anchor {
    font-size: 15px;
    padding: 6px;
  }

  input,
  select {
    width: 60%;
  }

  .filter-buttons {
    flex-wrap: wrap;
    position: relative;
    right: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    /* Adjust gap as needed */
  }

  .calculation-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;


  }

  .buttons-wrapper {
    flex-direction: column;
    /* Stack buttons vertically */
    align-items: center;
    gap: 10px;
  }

  #order-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

  }

  .order-listItem {
    max-width: 100%;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: auto;
    margin-left: auto;
  }

  .order-div {
    box-sizing: border-box;
    width: 96%;
    max-width: var(--order-card-max, 480px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .searchInput {
    position: relative;
    right: 50px;
  }

  /* New styles */
  .waves {
    top: 120px;
  }

  .username-greeting {
    font-size: 10px;
    color: lightgrey;
    left: 30px;

  }

  .quote-form {
    width: 85%;
    /* Adjust width to fit within the screen */
    box-sizing: border-box;
    /* Ensure padding is included in the width */

  }

  .quote-form input,
  .quote-form select {
    width: 100%;
    /* Full width for inputs and selects */
  }

  .quote {
    margin-top: 20px;
    margin-bottom: 40px;

    background-color: rgb(48, 48, 48);
    border-radius: 20px;
    position: relative;
    top: -30px;
    padding: 25px;

    display: none;
    max-width: 400px;
    width: 90%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .general-instructions-details {
    /* warp text to next line */
    word-wrap: break-word;
    /* Ensure long words break to the next line */
    word-break: break-word;
    /* Ensure long words break to the next line */
    white-space: normal;
    /* Allow text to wrap normally */
    padding: 10px;
    /* Add padding for better readability */
  }

  .general-instructions-summary {
    /* center summary element in details */
    text-align: center;

  }

  .to-be-confirmed {
    margin-bottom: 40px;
    width: 90%;
  }

}

/* OPTIMIZED for iPad Pro, Microsoft Surface Pro 7 */
@media only screen and (max-width: 1024px) and (min-width: 900px) and (min-height: 700px) {

  .sign-out {
    right: 100px;
    top: 110px;
    /* Adjust for taller navbar */
    font-size: 14px;
    color: lightgrey;
    font-size: 12px;
  }

  .username-greeting {
    left: 20px;
    top: 95px;
    /* Adjust for taller navbar */
    font-size: 14px;
  }

  .company-icon {
    top: 40px;
    font-size: 40px;
  }

  #settings-icon {
    position: absolute;
    top: 105px;
    right: 0px;
    left: 130px;
  }

  .recent-orders {
    padding: 30px;
    width: 90%;
    /* Adjust width to fit within the screen */
    box-sizing: border-box;
    /* Ensure padding is included in the width */
  }

  .navItems {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  .sub-nav {
    margin-top: 25px;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  .anchor {
    font-size: 15px;
    padding: 6px;
  }

  input,
  select {
    width: 60%;
  }

  .filter-buttons {
    flex-wrap: wrap;
    position: relative;
    right: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    /* Adjust gap as needed */
  }

  .calculation-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;


  }

  .buttons-wrapper {
    flex-direction: column;
    /* Stack buttons vertically */
    align-items: center;
    gap: 10px;
  }

  #order-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

  }

  .order-listItem {
    max-width: 100%;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: auto;
    margin-left: auto;
  }

  .order-div {
    box-sizing: border-box;
    width: 96%;
    max-width: var(--order-card-max, 480px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .searchInput {
    position: relative;
    right: 50px;
  }

  /* New styles */
  .waves {
    top: 120px;
  }

  .username-greeting {
    font-size: 10px;
    color: lightgrey;
    left: 30px;

  }

  .quote-form {
    width: 85%;
    /* Adjust width to fit within the screen */
    box-sizing: border-box;
    /* Ensure padding is included in the width */

  }

  .quote-form input,
  .quote-form select {
    width: 100%;
    /* Full width for inputs and selects */
  }

  .quote {
    margin-top: 20px;
    margin-bottom: 40px;

    background-color: rgb(48, 48, 48);
    border-radius: 20px;
    position: relative;
    top: -30px;
    padding: 25px;

    display: none;
    max-width: 400px;
    width: 90%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .general-instructions-details {
    /* warp text to next line */
    word-wrap: break-word;
    /* Ensure long words break to the next line */
    word-break: break-word;
    /* Ensure long words break to the next line */
    white-space: normal;
    /* Allow text to wrap normally */
    padding: 10px;
    /* Add padding for better readability */
  }

  .general-instructions-summary {
    /* center summary element in details */
    text-align: center;

  }

  .to-be-confirmed {
    margin-bottom: 40px;
    width: 90%;
  }

}

@media (max-width: 740px) {
  .hidden-details p {
    display: block !important;
    width: 100%;
    min-width: 0;
  }

  .hidden-details p>span:first-child {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    margin-bottom: 6px;
  }

  .hidden-details p>.value {
    display: block !important;
    width: 100%;
    min-width: 0 !important;
    margin-top: 4px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* OPTIMIZED for Nest Hub */
@media only screen and (max-width: 1024px) and (min-width: 900px) and (max-height: 600px) {

  .sign-out {
    right: 100px;
    top: 110px;
    /* Adjust for taller navbar */
    font-size: 14px;
    color: lightgrey;
    font-size: 12px;
  }

  .username-greeting {
    left: 20px;
    top: 95px;
    /* Adjust for taller navbar */
    font-size: 14px;
  }

  .company-icon {
    top: 40px;
    font-size: 40px;
  }

  #settings-icon {
    position: absolute;
    top: 105px;
    right: 0px;
    left: 130px;
  }

  .recent-orders {
    padding: 30px;
    width: 90%;
    /* Adjust width to fit within the screen */
    box-sizing: border-box;
    /* Ensure padding is included in the width */
  }

  .navItems {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  .sub-nav {
    margin-top: 25px;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  .anchor {
    font-size: 15px;
    padding: 6px;
  }

  input,
  select {
    width: 60%;
  }

  .filter-buttons {
    flex-wrap: wrap;
    position: relative;
    right: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    /* Adjust gap as needed */
  }

  .calculation-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;


  }

  .buttons-wrapper {
    flex-direction: column;
    /* Stack buttons vertically */
    align-items: center;
    gap: 10px;
  }

  #order-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

  }

  .order-listItem {
    width: 96%;
    max-width: var(--order-card-max, 480px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: auto;
    margin-left: auto;
  }

  .order-div {
    box-sizing: border-box;
    width: 96%;
    max-width: var(--order-card-max, 480px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .searchInput {
    position: relative;
    right: 50px;
  }

  /* New styles */
  .waves {
    top: 120px;
  }

  .username-greeting {
    font-size: 10px;
    color: lightgrey;
    left: 30px;

  }

  .quote-form {
    width: 85%;
    /* Adjust width to fit within the screen */
    box-sizing: border-box;
    /* Ensure padding is included in the width */

  }

  .quote-form input,
  .quote-form select {
    width: 100%;
    /* Full width for inputs and selects */
  }

  .quote {
    margin-top: 20px;
    margin-bottom: 40px;

    background-color: rgb(48, 48, 48);
    border-radius: 20px;
    position: relative;
    top: -30px;
    padding: 25px;

    display: none;
    max-width: 400px;
    width: 90%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .general-instructions-details {
    /* warp text to next line */
    word-wrap: break-word;
    /* Ensure long words break to the next line */
    word-break: break-word;
    /* Ensure long words break to the next line */
    white-space: normal;
    /* Allow text to wrap normally */
    padding: 10px;
    /* Add padding for better readability */
  }

  .general-instructions-summary {
    /* center summary element in details */
    text-align: center;

  }

  .to-be-confirmed {
    margin-bottom: 40px;
    width: 90%;
  }

}

/* Targeting BlackBerry PlayBook in portrait orientation */
@media screen and (min-width: 600px) and (max-width: 600px) and (min-height: 1024px) and (max-height: 1024px) and (orientation: portrait) {
  /* Your PlayBook-specific CSS styles for portrait mode */

  .sign-out {
    right: 100px;
    top: 110px;
    /* Adjust for taller navbar */
    font-size: 14px;
    color: lightgrey;
    font-size: 12px;
  }

  .username-greeting {
    left: 20px;
    top: 95px;
    /* Adjust for taller navbar */
    font-size: 14px;
  }

  .company-icon {
    top: 40px;
    font-size: 40px;
  }

  #settings-icon {
    position: absolute;
    top: 115px;
    right: 0px;
    left: 130px;
  }

  .recent-orders {
    padding: 30px;
    width: 90%;
    /* Adjust width to fit within the screen */
    box-sizing: border-box;
    /* Ensure padding is included in the width */
  }

  .navItems {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  .sub-nav {
    margin-top: 25px;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  .anchor {
    font-size: 15px;
    padding: 6px;
  }

  input,
  select {
    width: 60%;
  }

  .filter-buttons {
    flex-wrap: wrap;
    position: relative;
    right: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    /* Adjust gap as needed */
  }

  .calculation-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;


  }

  .buttons-wrapper {
    flex-direction: column;
    /* Stack buttons vertically */
    align-items: center;
    gap: 10px;
  }

  #order-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .order-listItem {
    width: 96%;
    max-width: var(--order-card-max, 480px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: auto;
    margin-left: auto;

  }

  .order-div {
    box-sizing: border-box;
    width: 96%;
    max-width: var(--order-card-max, 480px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .searchInput {
    position: relative;
    right: 50px;
  }

  /* New styles */
  .waves {
    top: 120px;
  }

  .username-greeting {
    font-size: 10px;
    color: lightgrey;
    left: 30px;

  }

  .quote-form {
    width: 85%;
    /* Adjust width to fit within the screen */
    box-sizing: border-box;
    /* Ensure padding is included in the width */

  }

  .quote-form input,
  .quote-form select {
    width: 100%;
    /* Full width for inputs and selects */
  }

  .quote {
    margin-top: 20px;
    margin-bottom: 40px;

    background-color: rgb(48, 48, 48);
    border-radius: 20px;
    position: relative;
    top: -30px;
    padding: 25px;

    display: none;
    max-width: 400px;
    width: 90%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .general-instructions-details {
    /* warp text to next line */
    word-wrap: break-word;
    /* Ensure long words break to the next line */
    word-break: break-word;
    /* Ensure long words break to the next line */
    white-space: normal;
    /* Allow text to wrap normally */
    padding: 10px;
    /* Add padding for better readability */
  }

  .general-instructions-summary {
    /* center summary element in details */
    text-align: center;

  }

  .to-be-confirmed {
    margin-bottom: 40px;
    width: 90%;
  }
}

/* Galaxy Tab S4 - Landscape*/
@media only screen and (max-width: 1200px) and (min-width: 1000px) and (max-height: 800px) and (orientation: landscape) {
  #settings-icon {
    position: absolute;
    top: 120px;
    right: 0px;
    left: 130px;
  }

}

/* Nexus 7 */
@media only screen and (max-width: 800px) and (min-width: 600px) and (max-height: 1280px) and (orientation: portrait) {
  body {
    /* prevent horizontal scrolling when overflow:hidden does not help  */
    width: 100vw;
    /* Full viewport width */
    min-height: 100vh;
    /* Full viewport height */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    /* Removed position: fixed; to allow scrolling */
    /* left: 0; */
  }

  .userProfile-div {
    width: 100%;
    /* Full width for user profile */
  }

  .sign-out {
    right: 100px;
    top: 110px;
    /* Adjust for taller navbar */
    font-size: 14px;
    color: lightgrey;
    font-size: 12px;
  }

  .username-greeting {
    left: 20px;
    top: 95px;
    /* Adjust for taller navbar */
    font-size: 14px;
  }

  .company-icon {
    top: 40px;
    font-size: 40px;
  }

  #settings-icon {
    position: absolute;
    top: 120px;
    right: 0px;
    left: 120px;
  }

  .recent-orders {
    padding: 30px;
    width: 500px;
    box-sizing: border-box;
    /* Ensure padding is included in the width */
  }

  .navItems {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  .sub-nav {
    margin-top: 25px;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  .anchor {
    font-size: 15px;
    padding: 6px;
  }

  input,
  select {
    width: 60%;
  }

  .filter-buttons {
    flex-wrap: wrap;
    position: relative;
    right: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    /* Adjust gap as needed */
  }

  .calculation-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;


  }

  .buttons-wrapper {
    flex-direction: column;
    /* Stack buttons vertically */
    align-items: center;
    gap: 10px;
  }

  #order-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* Full width for the order list */
  }

  .order-listItem {
    max-width: 100%;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: auto;
    margin-left: auto;
  }

  .order-div {
    box-sizing: border-box;
    width: 96%;
    max-width: var(--order-card-max, 480px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .searchInput {
    position: relative;
    right: 50px;
  }

  /* New styles */
  .waves {
    top: 120px;
    width: 100%;
    /* Full width for the waves */
  }

  .username-greeting {
    font-size: 10px;
    color: lightgrey;
    left: 30px;

  }

  .quote-form {
    width: 85%;
    /* Adjust width to fit within the screen */
    box-sizing: border-box;
    /* Ensure padding is included in the width */

  }

  .quote-form input,
  .quote-form select {
    width: 100%;
    /* Full width for inputs and selects */
  }

  .quote {
    margin-top: 20px;
    margin-bottom: 40px;

    background-color: rgb(48, 48, 48);
    border-radius: 20px;
    position: relative;
    top: -30px;
    padding: 25px;

    display: none;
    max-width: 400px;
    width: 90%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .general-instructions-details {
    /* warp text to next line */
    word-wrap: break-word;
    /* Ensure long words break to the next line */
    word-break: break-word;
    /* Ensure long words break to the next line */
    white-space: normal;
    /* Allow text to wrap normally */
    padding: 10px;
    /* Add padding for better readability */
  }

  .general-instructions-summary {
    /* center summary element in details */
    text-align: center;

  }

  .to-be-confirmed {
    margin-bottom: 40px;
    width: 90%;
  }
}

/* OPTIMIZED for Ipad Mini  */
@media only screen and (max-width: 799px) and (min-width: 699px) {

  .sign-out {
    right: 100px;
    top: 110px;
    /* Adjust for taller navbar */
    font-size: 14px;
    color: lightgrey;
    font-size: 12px;
  }

  .username-greeting {
    left: 20px;
    top: 95px;
    /* Adjust for taller navbar */
    font-size: 14px;
  }

  .company-icon {
    top: 40px;
    font-size: 40px;
  }

  #settings-icon {
    position: absolute;
    top: 105px;
    right: 0px;
    left: 150px;
  }

  .recent-orders {
    padding: 30px;
    width: 90%;
    /* Adjust width to fit within the screen */
    box-sizing: border-box;
    /* Ensure padding is included in the width */
  }

  .navItems {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  .sub-nav {
    margin-top: 25px;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  .anchor {
    font-size: 15px;
    padding: 6px;
  }

  input,
  select {
    width: 60%;
  }

  .filter-buttons {
    flex-wrap: wrap;
    position: relative;
    right: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    /* Adjust gap as needed */
  }

  .calculation-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;


  }

  .buttons-wrapper {
    flex-direction: column;
    /* Stack buttons vertically */
    align-items: center;
    gap: 10px;
  }

  #order-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

  }

  .order-listItem {
    width: 96%;
    max-width: var(--order-card-max, 480px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: auto;
    margin-left: auto;
  }

  .order-div {
    box-sizing: border-box;
    width: 96%;
    max-width: var(--order-card-max, 480px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .searchInput {
    position: relative;
    right: 50px;
  }

  /* New styles */
  .waves {
    top: 120px;
  }

  .username-greeting {
    font-size: 10px;
    color: lightgrey;
    left: 30px;

  }

  .quote-form {
    width: 85%;
    /* Adjust width to fit within the screen */
    box-sizing: border-box;
    /* Ensure padding is included in the width */

  }

  .quote-form input,
  .quote-form select {
    width: 100%;
    /* Full width for inputs and selects */
  }

  .quote {
    margin-top: 20px;
    margin-bottom: 40px;

    background-color: rgb(48, 48, 48);
    border-radius: 20px;
    position: relative;
    top: -30px;
    padding: 25px;

    display: none;
    max-width: 400px;
    width: 90%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .general-instructions-details {
    /* warp text to next line */
    word-wrap: break-word;
    /* Ensure long words break to the next line */
    word-break: break-word;
    /* Ensure long words break to the next line */
    white-space: normal;
    /* Allow text to wrap normally */
    padding: 10px;
    /* Add padding for better readability */
  }

  .general-instructions-summary {
    /* center summary element in details */
    text-align: center;

  }

  .to-be-confirmed {
    margin-bottom: 40px;
    width: 90%;
  }

}

/* iPad Pro */
@media only screen and (max-width: 1200px) and (min-width: 1000px) and (min-height: 800px) {

  .sign-out {
    right: 100px;
    top: 110px;
    /* Adjust for taller navbar */
    font-size: 14px;
    color: lightgrey;
    font-size: 12px;
  }

  .username-greeting {
    left: 20px;
    top: 95px;
    /* Adjust for taller navbar */
    font-size: 14px;
  }

  .company-icon {
    top: 40px;
    font-size: 40px;
  }

  #settings-icon {
    position: absolute;
    top: 105px;
    right: 0px;
    left: 130px;
  }

  .recent-orders {
    padding: 30px;
    width: 90%;
    /* Adjust width to fit within the screen */
    box-sizing: border-box;
    /* Ensure padding is included in the width */
  }

  .navItems {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  .sub-nav {
    margin-top: 25px;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  .anchor {
    font-size: 15px;
    padding: 6px;
  }

  input,
  select {
    width: 60%;
  }

  .filter-buttons {
    flex-wrap: wrap;
    position: relative;
    right: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    /* Adjust gap as needed */
  }

  .calculation-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;


  }

  .buttons-wrapper {
    flex-direction: column;
    /* Stack buttons vertically */
    align-items: center;
    gap: 10px;
  }

  #order-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

  }

  .order-listItem {
    max-width: 100%;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: auto;
    margin-left: auto;
  }

  .order-div {
    box-sizing: border-box;
    width: 96%;
    max-width: var(--order-card-max, 480px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .searchInput {
    position: relative;
    right: 50px;
  }

  /* New styles */
  .waves {
    top: 120px;
  }

  .username-greeting {
    font-size: 10px;
    color: lightgrey;
    left: 30px;

  }

  .quote-form {
    width: 85%;
    /* Adjust width to fit within the screen */
    box-sizing: border-box;
    /* Ensure padding is included in the width */

  }

  .quote-form input,
  .quote-form select {
    width: 100%;
    /* Full width for inputs and selects */
  }

  .quote {
    margin-top: 20px;
    margin-bottom: 40px;

    background-color: rgb(48, 48, 48);
    border-radius: 20px;
    position: relative;
    top: -30px;
    padding: 25px;

    display: none;
    max-width: 400px;
    width: 90%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .general-instructions-details {
    /* warp text to next line */
    word-wrap: break-word;
    /* Ensure long words break to the next line */
    word-break: break-word;
    /* Ensure long words break to the next line */
    white-space: normal;
    /* Allow text to wrap normally */
    padding: 10px;
    /* Add padding for better readability */
  }

  .general-instructions-summary {
    /* center summary element in details */
    text-align: center;

  }

  .to-be-confirmed {
    margin-bottom: 40px;
    width: 90%;
  }
}


/* width between 787 and 860 */
@media only screen and (max-width: 1300px) and (min-width: 770px) {
  .quote-form {
    width: 80%;
    /* Adjust width to fit within the screen */
  }
}


/* media query that would cover most mobile phones */
@media only screen and (max-width: 768px) {
  .shipping-address-fields input {
    width: 90%;
  }
}

/* max 500px width */
@media only screen and (max-width: 500px) {
  .custom-file-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .details-content h4 {
    font-size: 20px !important;
  }
}


/* media max width 690px and min width 500px */
@media only screen and (max-width: 690px) and (min-width: 500px) {

  .order-listItem,
  .order-details-div,
  .order-div {
    width: 96%;
    max-width: var(--order-card-max, 480px);
    margin-left: auto;
    margin-right: auto;
  }
}

/* media max width 499px and min width 350px */
@media only screen and (max-width: 499px) and (min-width: 350px) {

  .order-listItem,
  .order-details-div,
  .order-div {
    width: 96%;
    max-width: var(--order-card-max, 480px);
    margin-left: auto;
    margin-right: auto;
  }
}

/* media max width 349px and min width 280px */
@media only screen and (max-width: 349px) and (min-width: 280px) {

  .order-listItem,
  .order-details-div,
  .order-div {
    width: 96%;
    max-width: var(--order-card-max, 480px);
    margin-left: auto;
    margin-right: auto;
  }
}