@media only screen and (min-width: 320px) and (max-width: 1000px) {
  :root {
    --status-bar-color: #2c70a2;
    /* your desired color */
  }

  /* fake status bar background */
  .statusbar-faux {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: constant(safe-area-inset-top);
    /* older iOS */
    height: env(safe-area-inset-top);
    background: var(--status-bar-color);
    z-index: 1000;
  }

body {
  padding-top: var(--safe-top);
  /* fallback for older iOS */
  padding-top: constant(safe-area-inset-top);
  overscroll-behavior-y: contain; /* optional: reduces rubber-band bleed */
}

  .center {
    margin-top: 0;
    width: 100%;
  }

  /* LOGIN SCREEN  */

  #left-side {
    position: relative;
    height: 150px;
  }

  #stxLogo {
    top: 20px;
    width: 325px;
  }

  #fbText {
    top: 25px;
    font-size: 16px;
  }

  #right-side {
    top: 0;
    height: 500px;
  }

  .card {
    margin-left: 6%;
    width: 80%;
  }

  #noticesText {
    width: 100%;
    left: 0;
    top: 180px;

  }

  #footer {
    font-size: small;
    text-align: center;
  }

  #footer-mobile {
    display: block !important;
  }

  #emailText {
    font-size: small;
  }

  /*HOME SCREEEN */

  /* Menu wrapper to position dropdown */
  #menu_wrapper {
    position: fixed;
    display: flex !important;
    align-items: center;
    right: 16px;
    color: #f38100;
  }


  /* Hamburger toggle hidden on wide screens */
  .menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 6px;
    color: #f38100;
  }


  .menu-content {
    position: fixed;
    top: 40px;
    right: 0;
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8);
    min-width: 160px;
    display: none;
    /* hidden until toggled */
    z-index: 100;
    background-color: #133e5e;
    padding: 6px 6px 6px 12px;
    width: 170px;
  }

  .menu-content.show {
    display: flex;
  }

  .menu-item {
    padding: 8px 16px;
    width: 100%;
  }

  .menu-item a,
  .menu-item button {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    display: flex;
    gap: 8px;
    font: inherit;
    cursor: pointer;
  }

  /* show toggle on small */
  .menu-toggle {
    display: block;
  }

  #staff_logout {
    margin-left: 0;
    margin-right: 0;

  }

  .line-spacer {
    width: 100%;
    /* span full container width */
    height: 1px;
    /* thickness of the line */
    background-color: #ccc;
    /* light gray (adjust to your theme) */
  }

  #banner_logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    padding: 0 !important;
  }


  #newTicket {
    width: 75% !important;
    position: relative !important;
    left: 12.5% !important;
  }

  #viewTickets {
    width: 75% !important;
    position: relative !important;
    top: 80px !important;
    left: 12.5% !important
  }

  /* SUBMIT TICKET  */


  .ticket-card {
    width: 90%;
  min-width: unset !important;

  }

  #field-row {
    width: 100%;
  }

  #fName {
    top: 24px;
    margin-top: unset;
  }

  #fEmail {
    margin-top: 46px;
  }

  .form input.form-control,
  .form textarea.form-control {
    width: 90%;
  }

  #createAttach {
    width: 90%;
  }

  #fSubject {
    margin-bottom: 10px;
  }

  #submitMSG {
    height: 100px;
  }

  #fMessage {
    margin-bottom: 10px;
  }

  #uploadIcon {
    position: relative;
    font-size: 40px;
    color: #333;
    width: 50px;
  }

  #fAttach .dropzone {
    min-height: inherit;
    padding: 0;
    border-radius: 10px;
    background-color: rgba(239, 239, 240);
    width: 760px;
    color: #333;
    border: 3px dashed #aaa;
    font-size: medium;
  }

  #fAttach #filedrop {
    width: 75vw !important;
  }

  #fAttach .btn-full {
    margin-top: 10px;
  }

  #fAttach .dropzone .attachment-row {
    background-color: #616161;
    padding-bottom: 5px;
  }

  #filedrop .name,
  #filedrop .size {
    color: white;
  }


  #createTixWrap .ml-1 {
    margin-left: 0;
    position: relative;
    left: -25px;
  }

  .form-submit-ticket .form-group,
  .form-submit-ticket .param {
    width: 75vw !important
  }

  #blankMsg2 {
    top: 0;
  }

  .attachment-btn {
    position: relative;
    right: 32px;
    width: 90%;
  }

  #createAttach #filedrop {
    font-size: x-small;
  }

  .addCCWrap {
    width: 80% !important;
  }

  .cc-tags {
    font-size: x-small;
  }

  .field-row {
    width: 100%;
  }

  .icon-delete {
    filter: brightness(0) saturate(100%) invert(45%) sepia(71%) saturate(2062%) hue-rotate(12deg) brightness(106%) contrast(105%) !important;
  }

  .form-submit-ticket {
    box-shadow: 0 2px 4px 0 rgba(38, 40, 42, 0.3) !important;
  }


  .form-submit-ticket .form-groups {
    width: 100%;
    max-width: unset;
  }
#categorySelect{
  width: 80%;
}
.fieldRow1 {
  margin-top: 24px;
}

  .noMobile {
    display: none !important;
  }


  #loadIMG {

    width: 50vw !important;
    left: 25vw !important;

  }




/* PROFILE PAGE */

  .prof_fields{
    width: 80%;
  }

.editing{
  width: 60% !important;
}

.msg_modal{
  width: 80%;
  font-size: 12px;
  padding: 40px 12px;
}
.changePassOK{
  position: relative;
  left: 0;
  top: 20px;
}

.password-wrapper{
  width: 100%;
}
.password-wrapper .toggle-password{
  position: relative !important;
  right: 32px;
  top: 0;
  transform: unset;

}

#requirementsPOS{
  position: fixed !important;
  top: 320px !important;
  right: unset !important;
  margin: auto;
  width: 90% !important;
  border-radius: 12px;
  padding-left: 30px !important;
  font-size: 12px;
  box-shadow: none !important;

}
#passErrorMSG{
  left: 16px !important;
}


.prof-row {
  width: 80%;
}






/* BEGIN TICKETS PAGE  */

 #banner_logo {
width: 150px !important;
}


#tixWrap {
  width: 90% !important;
}

.ticket__params .params--block {
  position: absolute;
  left: 0;
  margin-left: 5%;
  width: 90%;
  top:104px;
}

.ticket__body{
  position:absolute;
  top: 450px;;
}



.has-open-link .ticket__body {
  top: 500px;
  width: 90vw;
}

.has-open-link .ticket__body .ticket__body_blockresponse .icon-print {
  left: 36vw !important;
}
.ticket__body_block, .timeago, .block--head .contact {
  font-size: 10px !important;
}
.ticket__body_block:last-of-type {
  margin-bottom: 70px !important;
}



.footer{ 
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

.cust-help .text-bold {
  min-width: 40px;
}

#submitMessage{
  width:100%;
}
.ticket__body #add-attachment { 
  width: 100% !important;
right: 0;
}
.attachment-row > .name-size-delete > .name-size {
  font-size: x-small;
}



/* MY-TICKETS PAGES  */

#tickets-page.card{
width: 100%;
/* margin-left: 5%; */
/* margin-right: 5%; */
}
/* Default table layout for larger screens */
#my-tickets-table {
  width: 100%;
  border-collapse: collapse;
  padding: 0 !important;
}

#my-tickets-table th,
#my-tickets-table td {
  padding: 12px;
  border: 1px solid #ddd;
  text-align: left;
}

/* MOBILE STYLING */
@media (max-width: 768px) {
  #my-tickets-table,
  #my-tickets-table thead,
  #my-tickets-table tbody,
  #my-tickets-table th,
  #my-tickets-table td,
  #my-tickets-table tr {
    display: block;
    width: 100%;
  }

  #my-tickets-table thead {
    display: none;
  }
  #tickets-page{
    margin-top: 0 !important;
  }

  #my-tickets-table tr {
    border-bottom: 5px solid #f38100; /* default orange border */
    background-color: white !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
#tickets-page .tickets-header{
  border-radius: unset !important;
}
  #my-tickets-table td {
    position: relative;
      padding-left: 50%  !important;

    border: none;
    border-bottom: 1px solid #eee;
  }

  #my-tickets-table td::before {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    font-weight: bold;
    color: #333;
    content: attr(data-label);
  }

  #my-tickets-table td:last-child {
    border-bottom: none;
  }


}

  #tickets tbody tr td:first-child, #tickets tbody tr td:last-child  {
    border-radius: unset !important;
  }



#tickets tbody tr:nth-child(2n) td {
  background-color: white !important;
}

#tickets_info {
  display: none;
}
#tickets_paginate {
  position: fixed;
  bottom: 0;
  z-index: 10;
}


.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: unset !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button{
  color: white !important;
}
#tickets_previous, #tickets_next{
  color: #f38100 !important;
}
#my-tickets-table td{
  width: 100vw !important; 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 12px;
}
#tickets tbody tr td {
  box-shadow: none !important;
}
#tickets-page{
  overflow-x: hidden;
}
#tickets-page.card{
  border-radius: unset !important;

}
#my-tickets-table td {
  box-sizing: border-box;
}

}