*{
    margin: 0;
    padding:0;
    box-sizing: border-box;
}

dialog{
   margin: 1rem auto;
   border-radius: 0.25rem;
   border: 1px solid black;
   background-color: gainsboro;
   width: 40rem;
   transition: margin .4s ease-out;
   overflow-x: hidden;
   z-index:10000;
   
   &[open] {
     margin: 1rem auto;
      
     @starting-style {
      margin: -100vh auto;
     }
   }
 
   form{
       button{
           font-size: 1.2rem;
           padding:0.25rem;
       }
   }

   input{ 
      width:100%; 
      padding: 0.25rem; 
      font-size: medium;
   }

   h3, h2{
      width:100%;
      background-color: transparent;
      padding: 0.25rem;
   }

   div{
      padding: 0.25rem;
   }
   &::backdrop{
      background-color: rgba(0, 0, 0, 0.533);
   }

   button{
 
        background-color: gainsboro;
        border: 1px solid black;
        padding: 0.25rem;
   }

   h3, h2{
    width: 100%;
    background-color: coral;
   }

   img{
    width: 3rem;
   }

}

body{
    font-family: Arial, Helvetica, sans-serif;
}

.row{
  display: flex;
  /* padding:0.25rem; */
}

header{
    background-color:coral;
    padding: 0.25rem;
    h1{
        padding: 0.5rem;
    }

    span{
        background-color: gainsboro;
        padding: 0.25rem 1rem 0.25rem 1rem;;
        border-radius: 1rem;;
    }
}



.col{
   display:flex;
   flex-direction: column;
   padding:0.25rem;
}

.justify-center{
   justify-content: center;
}

.justify-start{
   justify-content: start;
}

.justify-space{
  justify-content: space-between;
}

.align-center{
   align-items: center;
}

.align-left{
   align-items: left;
}

.align-space{
   align-items: space-between;
}

.small-gap{
    gap: 0.25rem;
}

.middle-gap{
    gap: 0.5rem;
}

.large-gap{
   gap: 1rem;
}

.large-gap{
    gap: 2rem;
}

.middle-padding{
    padding: 0.5rem;
}

.full-sheet-width{
    width: 21cm;
}

.size-large{
    font-size: 1.5rem;
}

.wrap{
    flex-wrap: wrap;
}

.margin-top-middle{
    margin-top: 1.5rem;
}

section{
    height: calc(100vh - 5.4rem);
    background-color: gainsboro;
    overflow-y: scroll;
    padding: 0.5rem 0.5rem 0 0.5rem;
}

#items{ 
    width: 40rem; 
    padding-top: 0.5rem;

    header{
       background-color: transparent;
       border:1px solid black;
    }
}

#ads{ 
    width: 320px; 
}

#table{ 
    width: 100%;
    padding:1rem;

    table{
        width: 100%;
        margin-top: 2rem;

        td, th{
           
            text-align: left;
            padding: 0.5rem;
        }

        input[type=week], i, button{
            display: none;
        }

        td:nth-child(1){
            display: flex;
            align-items: center;
        }


        tr:hover input[type=week], tr:hover i, tr:hover button {
           display: block;
        }

        tr:hover div{
            display: none;
        }
    }
}

#sheet{
    width: 21cm;
    background-color: white;
    /* box-shadow: 2px 2px 2px grey; */
    padding:1rem;
}

 table {
  border-collapse: collapse;
}


tr{
    border: 1px solid black;
}


h1{
   font-size: x-large;
}

h2{
    font-size: larger;
}

button{
       background-color: gainsboro;
        border: 1px solid black;
        padding: 0.25rem;
        
}

section button{
    padding: 0.25rem;
}

.transparent{
    background-color: transparent;
}

.theme-dragable{
    border: 1px solid black;
    display: flex;
    gap: 0.5rem;
    padding:0.5rem;
    align-items: center;

    p{
        width:100%;
        background-color: rgb(245, 245, 245);
    }
    
    .ue-number{
        font-size: 1rem;
        width:3rem;
        border:none;
        background-color: rgb(245, 245, 245);
    }
}

#table div{
    pointer-events: none;

    td{
        pointer-events: auto;
    }
}

td, th{    
    text-align: left;
    padding: 0.5rem;
}

table{
    margin-top: 2rem;
}

details{
    display: flex;
    flex-direction: column;
    gap:0.75rem;
}

.large-icon{
    font-size: 1.5rem;
}

button:hover, header a:hover{
    transition: all 0.3s ease-in-out;
    background-color:coral;
    color: white;
}

.drag-icon{
    /* transform: translate(-1.5rem,0rem); */
    width:1rem;
}

tr button{
     /* transform: translate(-4rem,1rem); */
    width:2rem;
}

th:nth-child(2){
    width:80%
}

table input[type=week], td i, #print-container button{
    display: none;
}

dialog label{
    display: flex;
    align-items: center;
    gap: 1rem;

    input[type=week] {
        width: 10rem;
    }

     input[type=number] {
        width: 4rem;
    }
}

fieldset{
   border: 2px solid grey;
   padding: 0.25rem;
   border-radius: 0.25rem;
   padding-top: 1rem;
}

output{
   background-color: white;
   min-width: 3rem;
}

header button{
    border:none;
}

#info-modal{
    padding: 0.5rem;
    z-index:10000;
}

.scroll-field{
    height: 5rem;
    overflow-y: scroll;
}

.preset-panel{
    display: flex;
    border: 1px solid black;
    padding:0.25rem;
    gap: 0.25rem;
    height: 2rem;
}

legend{
    border:2px solid grey;
    padding:0.25rem 0.5rem 0.25rem 0.5rem;
    border-radius: 1rem;
}

footer{
    color: grey;
    display: flex;
    justify-content: center;

    a{
        color: grey;
    }
}

button{
    font-size: 1rem;
}

a{
    color: black;
}


.no-border{
    border:none;
}



.outline{
    border:1px solid black;
}

output{
    display: block;
    width: 3rem;
}

#theme-container{
    padding-top:1rem;
}

#welcome-modal{
    margin-top:1rem;
    video{
        max-height:86vh;
    }
}