@media print {
    .noprint, .no-print {
        display: none !important; /* Hides the element and removes its space */
    }
}

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

}
body{
  background-color: transparent;
}
.my-container .line_row .my-field{
  flex-direction: column;
  
}
input{
  padding: 10px;
  box-sizing: border-box;
  border-width: .05rem;
  border-radius: 1rem;
  font-size: 1rem;
}
li:hover{
  background-color: lightgray;
}
  
.menu {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  background-color:transparent;
  color: hsl(0, 0%, 20%);
  padding: .5rem;
  text-decoration: none;
  margin: .5rem;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
  color: black;
  font-size: 1rem;
  text-align: center;
  flex-direction: column;
  font-weight: bold;
  border-radius: 1rem;
  row-gap: 1rem;
  flex-wrap: wrap;
  /*width: 100%;*/
}
ul {
  display: flex;
  flex-direction: column;
  align-content: center;
  row-gap: 1rem;
  background-color:transparent;
  border-style: outset;
}
li{width: 100%;}
summary {

  /*background-image: url('/static/img/drops.jpg');*/
  background-color:lightseagreen;
  border-radius: 1.5rem;
  padding: .25rem;
  font-size: 1.25rem;
  color: white;
  font-weight: bold;
  text-align: center;
  
}
li{
  width: 100%;
}

ul,ol ,li{
  list-style: none;
  text-align: center;
  
}

.my-container{
  display:grid;
  /*flex-direction: column;*/
  background-color:transparent;
  border-radius: 1rem;
  font-size: 1rem;
  margin-left: .5rem;  
  margin-right: .5rem;
  box-sizing: border-box;
  
    
}
.line_row{
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  color: white;
  background-color:transparent;
  flex-wrap: wrap;
  /*border-bottom: 1px solid black;*/
  font-size: 1rem;
  border-radius: .25rem;
  justify-content: space-around;
  align-items: center;
  column-gap: 1rem;
  margin-bottom: 1rem;
  
  
}
.inv_line{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
  justify-items:stretch;   
  gap: .10rem;
  border: rgb(248, 246, 243) solid;
  
  background-color:lightblue;
}
.my-field{
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
  /*flex-direction: row;*/
  /*background-color: darkgrey;*/
  color:black;
  /*padding:.15rem;*/
  font-size: 1rem;
  border-radius: .50rem;
  text-align: center;
  justify-items:stretch;    
  
  }
  select{
    box-sizing: border-box;
    padding: .25rem;
    border-radius: 1rem;
    font-size: 1rem;
    
  }
  
  label{
    display: block;
  }
html{
  font-size: 16px;
}
  div{
    text-align: center;
    
  }
  .my-btn{

    text-decoration: none;
    border-radius: .5rem;
    box-sizing: border-box;
    padding: .25rem;
    text-align: center;
    background-color:rgb(6, 150, 198);
    color: white;
    font-weight: bold;

  
  }  
  .my-blue{
    background-color: rgb(99, 99, 242);
    color: white;
    
  }
  .user{
    background-image: url(/static/img/user.png);
    background-repeat: no-repeat;
    background-size:contain;
    color:transparent;
  }
  .my-red{
    background-color: red;
    color: white;
  }
#show{
  overflow: scroll;
}
table {
        border-collapse: collapse; /* Merges cell borders */
        width: 100%;
        background-color: white;
        border-radius: 1rem;
        color: black;
        overflow: scroll;
    }
    
 tr:nth-child(even) {
        background-color:rgb(229, 229, 213);
    }      

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

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

.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;
}
.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;
}
@media only screen and (max-width: 900px)  {
  html{
    font-size: 14px;
  }
  body{
     background-color:transparent;
     color: black;
  }
  .inv_line{
    display: grid;
    grid-template-columns: repeat(auto-fit,1fr);
    /*flex: 1 1 auto;*/
    /*flex-wrap: wrap!important;*/
    justify-content: center;
  
    margin: 0;
    }
  .my-field{
  background-color:transparent;
  color:black;
  font-weight: bold;
  display: grid;
  /*grid-template-columns: auto-fit 1fr;*/
  grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
  /*grid-template-columns: 1fr;*/
    
}

input[type=text]:focus{
  color: red;
  font-size: 1rem;
  padding: 1rem;
  margin: 0px;
  
}
}

@media only screen and (max-width: 600px) {
* {
  margin: 0;
	box-sizing: border-box;
  direction: rtl;

}
  html{
    font-size: 16px;
  }

 
.my-container{
  display: flex;
  flex-direction: column;
   background-color:rgb(226, 232, 234)!important;
   width: 100%;
   margin: auto;
  color: white; 
 
}
div{
  color: black;
}

.menu ,details, summary {
  display: flex;
  flex-direction: column;
  background-color: lightblue;
  color: black;
  width: 100%;
  align-items: center;
  justify-content: center;
  
  
  
}

.my-field{
  display: grid;
  /*grid-template-columns: repeat(auto-fit,minmax(100px,1fr));*/
  grid-template-columns: 1fr;
  background-color:transparent;
  font-weight: bold;
  flex-direction: column;
  width: 100%;  
  color: black;
}


.line_row{
  display:grid;
  grid-template-columns: 1fr;
  justify-items: stretch;
  flex-direction: column;
  justify-content: stretch;
  align-items: center;
  align-content: space-between;
  background-color:transparent;
  width: 100%;
  
  
}
details{
  display: flex;
  align-content: center;
}
 input[type=text]:focus{
  color: red;
  /*font-size: 1.25rem;*/
  

}
 input[type=text]{
  padding: 1rem !important;
  font-size: 1rem;
  width: 100%;
  

}
select{
  width: 100%;
  padding: 1rem !important;
  font-size: 1rem;
}
.inv_line{

  background-color: transparent;
  color: black !important;
  grid-template-columns: 1fr 1fr;
  
}
summary{
  background-color: green;
  color: white;
  
}
.nav {
  
  display: grid;
  grid-template-columns: 1fr ;
  overflow: scroll;
  position: sticky;
  top:1vh;
    
}
.sub_nav{
  display: grid;
  grid-template-columns: 1fr ;
  top: 90%;
  position: fixed;
  
}
.hide{
  display: none;
}
}