/* FOR 1366 x  768*/
@media screen and (min-width: 1366px) and (max-width: 1366px) {
  .modal {
    -moz-transform: scale(0.72, 0.72);
    zoom: 0.72;
    zoom: 72%;
  }

  .Homebuttons, .endOfdaysContent, .cashCountContents,
  .unPaidContents, .searchDiv, .s_btn_product, .table_headers {
    -moz-transform: scale(0.8, 0.8);
    zoom: 0.8;
    zoom: 78%;
  }

  #tableTransactions tbody {
    font-size: 2px !important;
  }

  .systemInformation label {
    font-size: 14px !important;
  }
  .table-container, .table-container-total {
    -moz-transform: scale(0.8, 0.8);
    zoom: 0.8;
    zoom: 80%;
  }

  #payCashModal .modal-dialog {
    max-width: 75vw !important;
  }


  .tableEndOfDayContainer table thead {
    font-size: 23px;
  }

  .tableEndOfDayContainer table tbody tr td {
    font-size: 20px;
  }

  /* .col_1_div, .col_2_div {
    font-size: 20px !important;
  } */

  #ModalEndOfDay .modal-dialog {
    max-width: 75vw !important;
  }

  .CustomersList tbody {
    font-size: 16px;
  }

  /* .table-container {
    max-height: 99.9vh;
    max-width: 93.3vw;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    background: var(--secondary-color);
    position: absolute;
    margin-top: 7px;
    bottom: 0;
    top: 103px;
  } */

}


/* FOR 1440 x 900*/
@media screen and (min-width: 1440px) and (max-width: 1440px) {
  .modal {
    -moz-transform: scale(0.72, 0.72);
    zoom: 0.78;
    zoom: 78%;
  }

  .Homebuttons, .endOfdaysContent, .cashCountContents,
  .unPaidContents, .searchDiv, .s_btn_product, .table_headers {
    -moz-transform: scale(0.8, 0.8);
    zoom: 0.8;
    zoom: 78%;
  }

  #tableTransactions tbody {
    font-size: 2px !important;
  }

  .systemInformation label {
    font-size: 14px !important;
  }
  /* .table-container, .table-container-total {
    -moz-transform: scale(0.8, 0.8);
    zoom: 0.8;
    zoom: 80%;
  } */

  #payCashModal .modal-dialog {
    max-width: 75vw !important;
  }


  .tableEndOfDayContainer table thead {
    font-size: 23px;
  }

  .tableEndOfDayContainer table tbody tr td {
    font-size: 20px;
  }

  /* .col_1_div, .col_2_div {
    font-size: 20px !important;
  } */

  #ModalEndOfDay .modal-dialog {
    max-width: 75vw !important;
  }

  .CustomersList tbody {
    font-size: 16px;
  }

  /* .table-container {
    max-height: 99.9vh;
    max-width: 93.3vw;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    background: var(--secondary-color);
    position: absolute;
    margin-top: 7px;
    bottom: 0;
    top: 103px;
  } */

}


/* FOR 1600 x 1050*/
@media screen and (min-width: 1600px) and (max-width: 1600px) {

  #container1 {
    min-width: 622.5px !important; 
    max-width: 1207px !important; 
    width: 100%;
  }

  #search-input {
    font-size: large;
  }

  .s_btn_product {
    height: 45px !important;
    font-size: large;
  }
  .svgBarcode {
    width: 100% !important;
    height: 100% !important;
    margin-right: 10px;
  }

  #search-results {
    font-size: large;
  }


  .table-container {
    height: 89.5vh !important;
  }

  .table-total-amount {
    height: 10.5vh !important;
  }

  .form-wrapper {
    -moz-transform: scale(0.72, 0.72);
    zoom: 0.72;
    zoom: 88%;
    height: 1021px;
  }

  .login_sys_info {
    margin-top: -18%;

  }

  .products-storage {
    overflow: auto; 
    height: 78vh !important; 
     
  }

  .modal{
    -moz-transform: scale(0.72, 0.72);
    zoom: 0.72;
    zoom: 84%;
  }

  .Homebuttons, .endOfdaysContent, .cashCountContents,
  .unPaidContents, .searchDiv, .s_btn_product, .table_headers {
    -moz-transform: scale(0.8, 0.8);
    zoom: 0.8;
    zoom: 80%;
  }

  .systemInformation label{
    font-size: medium !important;
  }

  #payCashModal .modal-dialog{
    max-width: 70vw !important; 
  }

  .CustomersList tbody{
    font-size: 16px;
  }
/* 
  .table-container {
    max-height: 102.2vh;
    max-width: 93.35vw;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    background: var(--secondary-color);
    position: absolute;
    margin-top: 7px;
    bottom: 0;
    top: 103px;
  } */

  .menuButtonsStyle, .label_menu, #closeBtnMenu {
    font-size: large !important;
  }

  .border_menu {
    height: 35px !important;
  }

  .toSwitchUI {
    max-height: 495px !important;
  
  }
 
}

.resizer {
  cursor: ew-resize;
  width: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  user-select: none;
  height: 98vh ;
  /* margin-top: 300px; */
  /* border: 1px solid red !important;  */
}

.resizer span {
  font-size: 18px;
  color: var(--text-color);
}

.home-container .d-flex-home {
  display: flex;
  align-items: stretch; 
  min-height: calc(100vh - 60px);

}
.table-container{
    height: 79vh !important;
    /* width: 70vw !important; */
    height: 100%;
    width: 100%;
    overflow-y: auto;
    background: #262626;
    margin-top: -15px;
}
.table-total-amount{
    font-family: Century Gothic;
    text-transform: uppercase;
    font-size: 1.3rem;
    line-height: 2px;
    bottom: 0;
    width: 100%;
    background: #262626;
    color: var(--primary-color);
    margin: 0;
    height: 10vh;
}
@media only screen and (min-width: 1366px) and (max-width: 1366px) {
    .home-container .d-flex-home {
        display: flex;
        align-items: stretch; 
    }
    .table-container{
        height: 95vh !important;
        overflow-y: auto;
        background: #262626;
        margin-top: -15px;
        width: 100% !important;
        font-size: 10px !important;
    }

    .table-total-amount{
        font-family: Century Gothic;
        text-transform: uppercase;
        font-size: 1.2rem;
        line-height: 2px;
        bottom: 0 !important;
        height: auto;
        width: 100%;
        background: #262626;
        color: var(--primary-color);
        margin: 0;
        height: 7vh;
    }
    #container1{
        height: 100% !important;
        display: flex;
        flex-direction: column;
    }
    #container2{
        height: 98vh !important;
    }
    .upperButtons{
        zoom: 75%;
        font-size: 20px !important;
    }
    .lowerButtons{
        zoom: 75%;
        bottom: 0 !important;
        margin: auto !important;
        margin-bottom: 2px !important;
        width: 100% !important; 
        bottom:0 !important;
        margin-top: auto !important; 
    }
    .img-logo{
        max-height: 20vh !important;
        margin-top: 10px !important;
        margin-bottom: 20px !important;
    }
}


@media only screen and (min-width: 1024px) and (max-width: 1024px) {

  .home-container .d-flex-home {
    display: flex;
    align-items: stretch; 
  }

  #search-input {
    font-size: large;
    padding-left: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
  }
  #search-result {
    padding-left: 5px;
  }
  .result-item {
    padding: 5px;
  }
  .table-container {
    background: black !important;
    width: 100vw !important;
  } 
}


@media only screen and (min-width: 1600px) and (max-width: 1600px) {
    .home-container .d-flex-home {
        display: flex;
        align-items: stretch; 
    }
    .table-container{
        height: 78vh !important;
        overflow-y: auto;
        background: #262626;
        margin-top: -11px;
        width: 100% !important;
        font-size: 10px !important;
    }

    .table-total-amount{
        font-family: Century Gothic;
        text-transform: uppercase;
        font-size: 16px !important;
        line-height: 2px;
        bottom: 0 !important;
        height: auto;
        width: 100%;
        background: #262626;
        color: var(--primary-color);
        margin: 0;
        height: 7vh;
    }
    #container1{
        height:98vh !important;
        display: flex;
        flex-direction: column;
    }
    #container2{
        height:98vh !important;
    }
    .upperButtons{
        zoom: 85%;
    
    }
    .lowerButtons{
        zoom: 85%;
        bottom: 0 !important;
        margin: auto !important;
        margin-bottom: 2px !important;
        width: 100% !important; 
        bottom:0 !important;
        margin-top: auto !important; 
    }
    .img-logo{
        max-height: 18vh !important;
        margin-top: 10px !important;
        margin-bottom: 18px !important;
        zoom: 90% !important;
    }

    .pos-transaction td,th{
        font-size: 15px !important;
        
    }

}


@media only screen and (min-width: 1440px) and (max-width: 1440px) {
  .home-container .d-flex-home {
      display: flex;
      align-items: stretch; 
  }
  .table-container{
      height: 78vh !important;
      overflow-y: auto;
      background: #262626;
      margin-top: -11px;
      width: 100% !important;
      font-size: 10px !important;
  }

  .table-total-amount{
      font-family: Century Gothic;
      text-transform: uppercase;
      font-size: 16px !important;
      line-height: 2px;
      bottom: 0 !important;
      height: auto;
      width: 100%;
      background: #262626;
      color: var(--primary-color);
      margin: 0;
      height: 7vh;
  }
  #container1{
      height:98vh !important;
      display: flex;
      flex-direction: column;
  }
  #container2{
      height:98vh !important;
  }
  .upperButtons{
      zoom: 83%;
  
  }
  .lowerButtons{
      zoom: 83%;
      bottom: 0 !important;
      margin: auto !important;
      margin-bottom: 2px !important;
      width: 100% !important; 
      bottom:0 !important;
      margin-top: auto !important; 
  }
  .img-logo{
      max-height: 20vh !important;
      margin-top: 15px !important;
      margin-bottom: 20px !important;
      zoom: 80%;
  }

  .pos-transaction td,th{
      font-size: 15px !important;
      
  }

}

@media only screen and (width: 1600px) and (height: 900px) {
    .table-container{
        height: 81vh !important;
        overflow-y: auto;
        background: #262626;
        margin-top: -11px;
        width: 100% !important;
        font-size: 10px !important;
    }
}

@media only screen and (width: 1366px) and (height: 768px) {
    .table-container{
        height: 98vh !important;
        overflow-y: auto;
        background: #262626;
        margin-top: -15px;
        width: 100% !important;
        font-size: 10px !important;
    }
}



@media only screen and (width: 1440px) and (height: 900px) {
  .table-container{
      height: 81vh !important;
      overflow-y: auto;
      background: #262626;
      margin-top: -11px;
      width: 100% !important;
      font-size: 10px !important;
  }
}