@media (max-width: 991px) {
  #sidebar {
    display: none;
  }
  .toggle-sidebar {
    display: block !important;
    position: absolute;
    top: 10px;
    right: 10px;
  }
  .text-overlay-home {
    font-size: 15vw !important;
    top: 0vw !important;
    left: 3vw !important;
  }
  .text-overlay-writer {
    font-size: 15vw !important;
    top: 0vw !important;
    left: 3vw !important;
  }
  .fs-70 {
    font-size: 34pt;
  }
}

@media (max-width: 768px) {
  .text-overlay {
    font-size: 22vw !important;
  }
  .text-overlay-home {
    font-size: 15vw !important;
    top: 0vw !important;
  }
  .text-overlay-home {
    font-size: 18vw !important;
    top: 5vw !important;
  }
  .text-overlay-writer {
    font-size: 18vw !important;
    top: 5vw !important;
  }
  .fs-12 {
    font-size: 10pt;
  }
  .fs-24 {
    font-size: 21pt;
  }
  thead tr th {
    font-size: 9pt !important;
  }
  .table-body tr td:nth-child(3) span {
    padding: 0.6rem; /* Adjust padding for smaller screens */
  }
  .fs-70 {
    font-size: 42pt;
  }

  .percentage {
    max-height: 3.8rem;
  }
  .common-pb-5 {
    padding-bottom: 0rem;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 875px;
  }
}
@media (min-width: 481px) and (max-width: 768px) {
  .fs-12 {
    font-size: 10pt !important;
  }
  .dataTables_filter {
    top: 75px !important;
    right: 9.5% !important;
  }
}
@media (max-width: 481px) {
  .fs-12 {
    font-size: 10pt !important;
  }
  .dataTables_filter {
    top: 75px !important;
    right: 9.5% !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .fs-12 {
    font-size: 10pt !important;
  }
  div.dataTables_wrapper div.dataTables_filter input {
    width: 14rem !important;
  }
  .dataTables_filter {
    right: 2% !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .fs-12 {
    font-size: 9pt !important;
  }
  .dataTables_filter {
    right: 10% !important;
  }
  div.dataTables_wrapper div.dataTables_filter input {
    width: 14rem !important;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 1300px;
  }
}

@media (min-width: 1400px) {
  .container {
    max-width: 1800px;
  }
  div.dataTables_wrapper div.dataTables_filter input {
    width: 23.5rem !important;
  }
  .dataTables_filter {
    right: 3% !important;
}
}

@media (min-width: 1600px) {
  .container {
    max-width: 2975px;
  }
  /* div.dataTables_wrapper div.dataTables_filter input {
    width: 29rem !important;
  } */
}

@media (min-width: 1900px) {

  /* table.dataTable thead>tr>th.sorting:before,
  table.dataTable thead>tr>th.sorting_asc:before {
    right: 76px !important;
  }

  table.dataTable thead>tr>th.sorting:after,
  table.dataTable thead>tr>th.sorting_desc:after {
    right: 76px !important;
  } */

  .dataTables_filter {
    right: 2.5% !important;
  }

  div.dataTables_wrapper div.dataTables_filter input {
    width: 30.9rem !important;
  }

  /* .viewquantity {
    padding-right: 38px !important;
  } */
}

@media (max-width: 2000px) and ((min-width: 1900px)) {
  .viewquantity {
    padding-right: 42px !important;
  }
}

@media (max-width: 1900px) and ((min-width: 1601px)) {
  div.dataTables_wrapper div.dataTables_filter input {
    width: 29rem !important;
  }
  .text-overlay-home {
    font-size: 11vw !important;
    top: 2vw !important;
    left: 3vw !important;
  }
  .text-overlay-writer {
    font-size: 11vw !important;
    top: 2vw !important;
    left: 3vw !important;
  }
  .fixed-header {
    height: 34vw !important;
  }
  .fs-70 {
    font-size: 41pt;
  }
  .notes {
    background-image: repeating-linear-gradient(white,
        #ffffff00 49px,
        #ccccccd4 51px,
        #ccccccf7 42px,
        #ffffff00 51px) !important;
  }
  .loader-backdrop p {
    top: 52%;
  }

  /* table.dataTable thead>tr>th.sorting:before,
  table.dataTable thead>tr>th.sorting_asc:before {
    right: 76px !important;
  }

  table.dataTable thead>tr>th.sorting:after,
  table.dataTable thead>tr>th.sorting_desc:after {
    right: 76px !important;
  } */

  .viewquantity {
    padding-right: 28px !important;
  }
}

@media (max-width: 1900px) {
  .percentage {
    max-height: 3.8rem;
    min-height: auto;
  }
}

@media (max-width: 1600px) and ((min-width: 1400px)) {
  .text-overlay-home {
    font-size: 15vw !important;
    top: 0vw !important;
    left: 3vw !important;
  }
  .text-overlay-writer {
    font-size: 14vw !important;
    top: 3vw !important;
    left: 3vw !important;
  }
  .fixed-header {
    height: 32vw !important;
  }
  .fs-70 {
    font-size: 42pt;
  }
  .notes {
    background-image: repeating-linear-gradient(white,
        #ffffff00 50px,
        #ccccccd4 51px,
        #ccccccf7 42px,
        #ffffff00 52px) !important;
  }

  /* table.dataTable thead>tr>th.sorting:before,
  table.dataTable thead>tr>th.sorting_asc:before {
    right: 50px !important;
  }

  table.dataTable thead>tr>th.sorting:after,
  table.dataTable thead>tr>th.sorting_desc:after {
    right: 50px !important;
  } */

  .viewquantity {
    padding-right: 10px;
  }
}
@media (max-width: 1400px) and ((min-width: 1200px)) {
  div.dataTables_wrapper div.dataTables_filter input {
    width: 18.5rem !important;
  }
  .text-overlay-home {
    font-size: 15vw !important;
    top: 1vw !important;
    left: 3vw !important;
  }
  .text-overlay-writer {
    font-size: 13vw !important;
    top: 3vw !important;
    left: 3vw !important;
  }
  .fs-70 {
    font-size: 40pt;
  }
  .fs-24 {
    font-size: 22pt;
  }
  .fixed-header {
    height: 30vw !important;
  }
  .alert {
    width: 40%;
    max-width: 26%;
  }

  /* table.dataTable thead>tr>th.sorting:before,
  table.dataTable thead>tr>th.sorting_asc:before {
    right: 30px !important;
  }

  table.dataTable thead>tr>th.sorting:after,
  table.dataTable thead>tr>th.sorting_desc:after {
    right: 30px !important;
  } */

  .submenu-responsive {
    padding-bottom: 39px !important;
  }
  .dataTables_filter {
    right: 4% !important;
  }

  .margin-top {
    margin-top: 88% !important;
  }

  .responsive-btn {
    padding-left: 0;
    margin-top: 10px;
  }

  .viewquantity {
    padding-right: -9px;
  }

  .generator-table .table.dataTable thead>tr>th.sorting:before,
  .generator-table .table.dataTable thead>tr>th.sorting:after {

    left: 40%;
    right: 40%;
  }


}

@media (max-width: 1200px) and ((min-width: 991px)) {
  .text-overlay-home {
    font-size: 15vw !important;
    top: 2vw !important;
    left: 4vw !important;
  }

  .text-overlay {
    font-size: 20vw !important;
    top: -5vw;
  }

  .fixed-header {
    height: 28vw !important;
  }
  .text-overlay-writer {
    font-size: 12vw !important;
    top: 4vw !important;
    left: 3vw !important;
  }
  .upload-box {
    padding-right: 1.5rem;
  }
  .alert {
    width: 40%;
  }
  .fs-70 {
    font-size: 42pt;
  }
  .fs-24 {
    font-size: 22pt;
  }
  .notes {
    background-image: repeating-linear-gradient(white,
        #ffffff00 50px,
        #ccccccd4 51px,
        #ccccccf7 42px,
        #ffffff00 52px) !important;
    line-height: 51px !important;
  }

  /* table.dataTable thead>tr>th.sorting:before,
  table.dataTable thead>tr>th.sorting_asc:before {
    right: 20px !important;
  }

  table.dataTable thead>tr>th.sorting:after,
  table.dataTable thead>tr>th.sorting_desc:after {
    right: 20px !important;
  } */

  .viewquantity {
    padding-right: 0;
  }

  .generator-table .table.dataTable thead>tr>th.sorting:before,
  .generator-table .table.dataTable thead>tr>th.sorting:after {

    left: 48%;
    right: 48%;
  }
}

@media (max-width: 991px) and ((min-width: 576px)) {
  .container {
    max-width: 900px;
  }
  .upload-box {
    width: 25vw !important;
    height: 22vw !important;
  }
  .upload-icon-img {
    max-width: 75px !important;
    max-height: 75px !important;
    padding-right: 1rem;
  }
  .text-overlay-home {
    font-size: 17vw !important;
    top: 5vw !important;
  }
  .alert {
    width: 40%;
  }
  .text-overlay-writer {
    font-size: 13vw !important;
    top: 4vw !important;
  }
  .fixed-header {
    height: 25vw !important;
  }
  .notes {
    background-image: repeating-linear-gradient(white,
        #ffffff00 51px,
        #ccccccd4 51px,
        #ccccccf7 42px,
        #ffffff00 52px) !important;
  }

  /*
  table.dataTable thead>tr>th.sorting:before,
  table.dataTable thead>tr>th.sorting_asc:before {
    right: 10px !important;
  }

  table.dataTable thead>tr>th.sorting:after,
  table.dataTable thead>tr>th.sorting_desc:after {
    right: 10px !important;
  } */

  .viewquantity {
    padding-right: 0;
  }

  .generator-table .table.dataTable thead>tr>th.sorting:before,
  .generator-table .table.dataTable thead>tr>th.sorting:after {

    left: 55%;
    right: 55%;
  }
}

@media screen and (max-width: 576px) {
  .upload-box {
    width: 37vw !important;
    height: 37vw !important;
  }
  .text-overlay-home {
    font-size: 14vw !important;
    top: 10vw !important;
    left: 5vw !important;
  }
  .table-body tr td:nth-child(3) span {
    padding: 0.4rem;
  }
  .alert {
    width: 40%;
  }
  .text-overlay-writer {
    font-size: 11vw !important;
    top: 5vw !important;
    left: 4vw !important;
  }
  .fixed-header {
    height: 80vw !important;
  }
  .notes {
    background-image: repeating-linear-gradient(white,
        #ffffff00 51px,
        #ccccccd4 51px,
        #ccccccf7 42px,
        #ffffff00 52px) !important;
  }

  @supports not (-webkit-line-clamp: none) {
    .table-responsive {
      overflow-x: visible !important;
    }
  }
  @supports (-moz-appearance: none) {
    @-moz-document url-prefix() {
      .table-responsive {
        overflow-x: visible !important;
      }
    }
  }
  .tooltip:hover .tooltiptext {
    visibility: hidden;
  }

  /* table.dataTable thead>tr>th.sorting:before,
  table.dataTable thead>tr>th.sorting_asc:before {
    right: 0px !important;
  }

  table.dataTable thead>tr>th.sorting:after,
  table.dataTable thead>tr>th.sorting_desc:after {
    right: 0px !important;
  } */

  .viewquantity {
    padding-right: 15px;
  }

  .generator-table .table.dataTable thead>tr>th.sorting:before,
  .generator-table .table.dataTable thead>tr>th.sorting:after {

    left: 80%;
    right: 80%;
  }
}

@media screen and (max-width: 400px) {
  .text-overlay-home {
    font-size: 14vw !important;
    top: 16vw !important;
  }

  .text-overlay-writer {
    font-size: 9vw !important;
    top: 6vw !important;
  }
}

@media (max-width: 1400px) {
  .ridgeline-chart p {
    font-size: 16px !important;
  }
}