* {
  margin: 0;
	box-sizing: border-box;
  direction: rtl;

}

label {
    color:black;
    font-size: medium;
    background-color: lightblue;
    display: block;
    
}

.line_row{
  display: flex;
  flex-direction: row;
  justify-content:space-between;
  background-color:transparent;
  flex-wrap: wrap;
  width: 100%;
  border: 1px solid black;
  gap: 5px;
  font-size: medium;
  border-radius: 15px;
}
.head{
  background-color: rgb(69, 214, 178);
  color:black;
  
}
.tail{
background-color: lightblue;
color: black;
}
.line_column{
  display: flex;
  flex-direction: column;
  flex: 1,1,auto;
}
.flex_item{
  display: flex;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

select {
  width: auto;
  padding: 5px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f8f8f8;
  
}


thead th {
  position: sticky; /* Make the header sticky */
  top: 0; /* Stick to the top of the scrollable container */
  background-color: #f2f2f2; /* Optional: Set a background color for the sticky header */
  z-index: 1; /* Ensure the header stays on top of scrolling content */
}
[popover] {
  position: fixed;
  inset: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
  border: solid;
  padding: 0.25em;
  overflow: auto;
  color: CanvasText;
  background-color: Canvas;
}

.error { color: red; }
.info { color: blue; }
.success { color: green; }


#hxbal,#it_accno{
  font-size: 1.25rem;
}
p{
 display: inline;
 padding: 15px;
 
}

.scroll{
overflow-y: scroll;
height: 150px;
direction: ltr;


}

ol ul li {

    width: auto;
    padding: 1px;
}
input[type=submit]{
  background-color: rgb(73, 124, 226);
  color: white ;
  font-size: medium;
  padding: px;
  border-radius: 5px;
  border: solid transparent;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}
#tr_no {
  color: red;
  background-color: lightgrey;
}
input[type=date]{
  padding: 5px;
}
input:read-only{

  background-color: lightgrey;
}

input[type=text]{
display: inline;
background-color: white;
border-radius: 1px;
font-size: 1.10rem;
flex-grow: 1;
flex-shrink: 1;
width: 140px;
margin: 1px;
padding: 5px

}
#del{
background-image: url(img/delete.png)  ;   
background-repeat: no-repeat;
background-position:center bottom; 
background-color:transparent; 
background-size:contain;
      border:0 none;
    cursor:pointer;
   
    color: transparent;
}

.del{
background-image: url(img/delete.png)  ;   
background-repeat: no-repeat;
background-position:center bottom; 
background-color:transparent; 
background-size:contain;
      border:0 none;
    cursor:pointer;
   
    color: transparent;
}

#edit{
background-image: url(/static/img/document_edit.png)  ;   
background-repeat: no-repeat;
background-position:center bottom; 
background-color:transparent; 
background-size:contain;
      border:0 none;
    cursor:pointer;
   /* border-radius: 5%;*/ 
    color: transparent;
}
#done{
background-image: url(/static/img/notification_done.png)  ;   
background-repeat: no-repeat;
background-position:center bottom; 
background-color:transparent; 
background-size:contain;
      border:0 none;
    cursor:pointer;
   /* border-radius: 5%;*/ 
    color: transparent;
}

/*.button {
  font: bold 50px;
  text-decoration: none;
  background-color: hwb(217 36% 11%);
  color: #333333;
  padding:1px;
  margin: 10px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
  display: block;
  color: white;
  font-size: 1rem;
  text-align: center;
}
  */
summary{

  /*background-image: url('/static/img/drops.jpg');*/
  background-color: rgb(91, 180, 210);
  border-radius: 5px;
  padding: auto;
  font-size: 1.25rem;
  color: white;
  font-weight: bold;
}
.menu {
  display: flex;
  background-color:teal;
  color: #333333;
  padding:5px;
  gap: 15px;
  margin: 1px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
  color: white;
  font-size: 1.25rem;
  text-align: center;
  flex-direction: column;
  

}
#hxbal{
  width: auto;;
  }
.main-container{
  display: flex;
  flex-direction: row;
  background-color:transparent;
  border: solid 2px;

  border-radius: 5px;
  flex: 1,1,0;
  height: 100%;
  gap: 5px;
}
.main{
  display: flex;
  background-color: transparent;
  width: 100%;
  flex-direction: column;
  flex-shrink: 1;
  
}

.side-info{
  flex-grow: 1;
  overflow: auto;
  flex-direction: column;
  flex-wrap: wrap;
  
  height: 550px;
  
}

option ,select{
  font-size: 1.25rem;
}
li{display: inline;
width: fit-content;

}

option{

    width:100%;

}
/*button[type=submit]{

    border: 2px solid #73AD21;
    padding: 5px;
    background-color: blue;
    color: white;
    border-radius: 2px;
}
*/
 ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
datalist{
    font-size: large;
    border: 5px solid;
    border-radius: 20px;
    padding: 5px;
}
a{
    display: inline;
    border-radius: 0px;
    border: 0px solid;
    padding: 1px;
    margin: 0;
}
.det{

background-color: rgb(224, 29, 29);
color: white;



}
.edit{
background-image: url(img/document_edit.png);
background-repeat: no-repeat;
background-position:center bottom; 
background-color:transparent; 
background-size:contain;
border:0 none;
cursor:pointer;
color: transparent;
}

th{
    background-color: cornflowerblue;
    color: white;
    
}
table {
        border-collapse: collapse; /* Merges cell borders */
        width: 100%;
        background-color: white;
        border-radius: 
    }
 tr:nth-child(even) {
        background-color: #f9f9f9;
    }      

   
.table-wrapper {
  overflow-x: auto;
}

 th, td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: right;
    }


.side_menu{

  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 160px; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  right: 0;
  background-color: #111; /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
}
.side_menu a:hover {
  color: #f1f1f1;
}
@media print
{
.noprint {
display: none;
border-collapse: collapse;
}
}
input:hover{
color: red;

}
 
@media only screen and (max-width: 600px) {
  body {
    background-color:transparent;
    margin: 0;
    width: 100%;
      
  }

  input:hover{
  color: red;

}

label {
  display: flex;
  color:white;
  font-weight: bold;
  font-size: large;
  margin-bottom: 5px; /* Space below the label */
  display: block; /* Makes the label take up full width and start on a new line */
  background-color: transparent;
  border: 5px;
}
.line_row{
  display: flex;
  font-size: large;
  flex-direction: column;
  /*justify-content:space-between;*/
  padding: 2px;
  flex-wrap: wrap;
  row-gap: 0px;
  width: 100%;
  justify-items:auto;
  background-color :rgb(210, 71, 136);
  font-size: 1rem;
  row-gap: 0;
  align-items: auto;

}
#des{
  display: none;
}
#bal{
  display: none;
}
input[type=text]
{
width: 100%;

font-size: 1.75rem;
}
list{
  width: 100%;
}
select {
  width: 100%;
}
#ck_price{
  display: none;
}
#no{
  display: none;
}
#hide{
  display: none;
}
#des{
  display: flex;
  
}
#store_combo{
display: flex;  
}

table{
display: flex;
overflow-x: auto;
width: 100vw;
font-size: 1rem;
color: black;

}
.main{
  
  width: 100%;
}
}

 /* Extra small devices (phones, 600px and down) */
/*@media only screen and (max-width: 600px) {}*/

/* Small devices (portrait tablets and large phones, 600px and up) */
/*@media only screen and (min-width: 600px) {...}*/

/* Medium devices (landscape tablets, 768px and up) */
/*@media only screen and (min-width: 768px) {
  body{
    background-color: rgb(238, 218, 221);
  }
}*/

/* Large devices (laptops/desktops, 992px and up) */
/*@media only screen and (min-width: 992px) { /* Extra small devices (phones, 600px and down) */
/*@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
/*@media only screen and (min-width: 600px) {...}*/

/* Medium devices (landscape tablets, 768px and up) */
/*@media only screen and (min-width: 768px) {...}*/

/* Large devices (laptops/desktops, 992px and up) */
/*@media only screen and (min-width: 992px) {...}*/

/* Extra large devices (large laptops and 
ktops, 1200px and up) */
/*@media only screen and (min-width: 1200px) {
  body{
    background-color: yellow;
  }
} */

/* Extra large devices (large laptops and desktops, 1200px and up) */
/*@media only screen and (min-width: 1200px) {
 body{
  background-color: rgb(251, 252, 249);
  

 }
 details ,summary{
  font-size: 1rem;
  background-color: white;
  border-radius: 15px;
 } 
}

*/