html{
  --light-highlight: #222;
  --medium-highlight: #333;
  --heavy-highlight: #444;
  --strong-highlight: #555;

  --light-text: #eee;
  --gar-copper: #96310f;
  --gar-copper-light: #B33A12;
  --gar-copper-light-alpha: #B33A1244;
  --round-corners: 0.75rem;

}
body{
  width: 100vw;
  /*background-color: #606;*/
  min-height: calc(100vh - 5rem);
}
#logoImg{
  margin-left: 0.5rem;
}
.card {
  background: var(--medium-highlight);
  border-radius: var(--round-corners);
  overflow: hidden;

  max-width: 95%;

  display: flex;
  flex-direction: row;
  cursor: pointer;
  /*height: 10rem;*/
}
.fullTableDiv{
  border-radius: var(--round-corners);
  overflow: hidden;
  margin-bottom: 1rem;
}
#bootstrapOverride th{
  background-color: var(--heavy-highlight);
}
#bootstrapOverride td{
  background-color: var(--strong-highlight);
}
.collapsibleHeader{
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: var(--medium-highlight);
}
.collapsibleTitle{
  display: flex;
  flex-direction: row;
}
.collapsibleTitleSearch{
  height: 2rem;
  display: flex;
  flex-direction: row;
  width: 24rem;
}
.collapsibleBody{
  -moz-transition: height .5s;
  -ms-transition: height .5s;
  -o-transition: height .5s;
  -webkit-transition: height .5s;
  transition: height .5s;
  height: auto;
  overflow: hidden;
  /*transition: height 0.3s ease;*/
  /*overflow: auto;*/
  background-color: var(--strong-highlight);
  border-bottom-left-radius: var(--round-corners);
}
.collapsed{
  height: 0;
  /*transition: height 0.3s ease;*/
}
.adminImgPreview
{
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.addSpan{
  /*margin-right: 1rem;*/
  margin-left: 1rem;
  width: 9rem;
}
td,tr,th{
  background-color: var(--light-highlight);

}
.card-title{
  border: 1px solid var(--heavy-highlight);
  text-align: center;
  padding: 0.2rem;
  background-color: var(--light-highlight);
  border-radius: 1rem;
}
.card-body{
  flex: 2;
}
.cardImgOuter{
  width: 100%;

  overflow: hidden;

  margin: 0.3rem;
  flex: 1;
}
.cardImgInner{
  width: 90%;
  border: 1px solid var(--strong-highlight);
  border-radius:  var(--round-corners);

  margin: 3px;
  aspect-ratio: 1;
  overflow: hidden;
}
.card img
{
  height: 150%;
  object-fit: cover;
  margin: -15px;
}
.categoryHeroImg{
  width: 100%;
  max-height: 8rem;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
  border-radius:  var(--round-corners);
}
.categoryHeroImg img{
  width: 100%;
}

.header{
  text-align: left;
  color: white;
  height: 5rem;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 100;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;

  background-color: var(--gar-copper);
  padding-top: 0.4rem;
  padding-bottom: 0.2rem;
}
.headerAdmin{
  justify-content: space-between;
}
.header img{
  height: 4rem;
}
#headerUser{
  width: 8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.topMenuContainer{

  width: 100%;
}
.categoryMenu{
  overflow-x: scroll;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.materialMenu{
  display: flex;
  flex-direction: row;
  gap: 0.25rem;
  overflow-x: scroll;
}
.categoryBtn{
  padding: 0.5rem;


  text-decoration: none;
  white-space: nowrap;
  flex-grow: 1;
  /*cardImgOuter: 0.25rem;*/

}
.categoryBtn:hover{
  background-color: var(--medium-highlight);
}
.materialBtn{

  background-color: var(--gar-copper);
  font-size: 0.75rem;

  color: white;
}
.materialBtn:hover{
  background-color: var(--gar-copper-light);
}
.btnClose{
  background-color: #a22;
}
.activeMaterial{
  background-color: var(--gar-copper-light);
}
.activeCategory{
  background-color: var(--medium-highlight);
}
.divider{
  height: 0.2rem;
  background-color: var(--heavy-highlight);
  width: 100%;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
#quickMenu{
  position: fixed;
  bottom: -20rem;
  margin-right: auto;
  margin-left: auto;
  background-color: var(--heavy-highlight);
  border-radius:  var(--round-corners);
  display: flex;
  flex-direction: column;
  padding-top: 0.5rem;
  padding-bottom: 1.5rem;
  justify-content: center;
  align-items: stretch;
  padding-left: 1rem;
  padding-right: 1rem;

  left: 0.2rem;
  right: 0.2rem;
}

.quickMenuHeader{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.menuCloseBtn{

  border: none;
  border-radius: 1rem;
  height: 2rem;
  width: 2rem;
}
.openQuickMenu
{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 0.75rem;
  z-index: 100;
  left: 50%;
  right: 50%;
  transform: translate(-50%);
  width: 12rem;
}
.quickMenuBtn{
  background-color: var(--gar-copper);
  height: 2.5rem;
  border-radius: 1.25rem;
  color: white;
}
.quickMenuBtn:hover{
  background-color: var(--gar-copper-light);
  color: white;
}

#content{
  display: flex;
  flex-direction: column;
  /*flex-wrap: wrap;*/
  padding-bottom: 4rem;
  /*margin-top: 1.5rem;*/
  margin-top: 6.5rem;
  gap: 0;
  justify-content: center;
}
.article{
  background-color: var(--light-highlight);
}
.categorySection{
  padding: 0.5rem;
  border: 1px solid var(--gar-copper-light-alpha);
  border-radius:  var(--round-corners);
  background-color: var(--light-highlight);
  margin: 0.75rem;
}
.section{
  padding: 0.5rem;
  border: 1px solid var(--gar-copper-light-alpha);
  border-radius:  var(--round-corners);
  background-color: var(--light-highlight);
  margin: 0.75rem;
}
.slabSection{
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.fullSlabSection{
  padding: 0.5rem;
  border: 1px solid var(--gar-copper-light-alpha);
  border-radius:  var(--round-corners);
  background: var(--medium-highlight);
  display: flex;
  flex-direction: column;
  margin: 0.75rem;

  max-height: calc(100vh - 12rem);
  /*background-color: #933;*/
}
.slabImgOuter{

  /*background-color: #292;*/
  flex-grow: 1; /* Allows it to expand but also shrink when necessary */
  overflow: hidden; /* Prevents content from spilling over */
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.slabImgInner{
  padding: 0.5rem;
  flex: 1;
}
.slabImgInner img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#fullSlabImg{

  width: 100%;
  height: 100%;
  object-fit: contain;
}
.slabInfo{
  padding: 1rem;
  display: flex;
  flex-direction: column;

  flex-grow: 0;
}
.form-check-input:checked{
  background-color: var(--gar-copper);
  border: none;
}
.form-check-input:focus{
  border-color: var(--light-highlight);
  box-shadow: 0 0 0 0.25rem var(--gar-copper-light-alpha);
}
@media only screen and (max-width: 510px){
  .slabImgOuter{
    flex-direction: column;
    overflow: auto;
  }
  .container{
    padding: 0;
    margin: 0;

  }
  #content{
    gap: 0;
    margin-top: 5rem;
  }
  .article{
    border-radius: 0;
    border: none;
    padding: 0.5rem;
    margin: 0;
  }
  /*
  .section{
    /*border: none;
    border-radius: 0;
    padding: 0.5rem;
    margin: 0;* /
  }*/
  .headerAdmin{
    justify-content: space-between;
  }
  #headerTitle{
    display: none;
  }
}
@media only screen and (max-width: 800px){
  #headerTitle{
    display: none;
  }
}
@media only screen and (min-width: 801px){
  .header{
    justify-content: start;
  }
  #headerTitle{
    display: block;
  }
  #quickMenu{
    left: 20%;
    right: 20%;
  }
  #content{
    gap: 0.85rem;
    margin-top: 5rem;
  }
  .article{
    margin-top: 0.75rem;
    border-radius:  var(--round-corners);
    padding: 2rem;
  }
  .section{

    padding: 2rem;
    border-radius:  var(--round-corners);
  }
  .slabSection{
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
  }
  .card{
    width: 48%;
  }
  .categoryHeroImg{
    max-height: 12rem;
  }
  .headerAdmin{
    justify-content: space-between;
  }
}

@media only screen and (min-width: 1400px){
  /*
  .fullSlabSection{
    /*flex-direction: row;* /
  }
  .slabImgOuter{
    /*flex: 7;* /
  }
  .slabInfo{
    /*flex:2;* /
  }
  #fullSlabImg{
    /*width: auto;* /
  }
  */
  #quickMenu{
    left: 35%;
    right: 35%;
  }
  /*
  .slabSection{
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }
  */
  .card{
    width: 32%;
  }
  .categoryHeroImg{
    max-height: 16rem;
  }
  .headerAdmin{
    justify-content: space-between;
  }
  #headerTitle{
    display: block;
  }
}
@media only screen and (max-height: 500px){
  .fullSlabSection{
    padding: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .slabImgInner{
    padding: 0;
    padding-top: 0.25rem;
    margin: 0.25rem;
  }
  .slabInfo{
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  .card-text{
    margin-bottom: 0.25rem;
  }
}
.rotcw{
    animation-name: rotateArrowCW;
}
.rotccw{
    animation-name: rotateArrowCCW;
}
.dropArrow{
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  display: inline-block;
  cursor: pointer;
  margin: 1rem;

}
.subHeaderTitle{
  margin-top: auto;
  margin-bottom: auto;
  text-align: center;
}
#headerTitle{
  position: fixed;
  left: 50%;
  top: 2.3rem;
  transform: translate(-50%, -50%);

}
@-moz-keyframes rotateArrowCW {
    from{
      transform-origin: center;
      -moz-transform:rotate(-90deg);
    }
    to{
      transform-origin: center;
      -moz-transform:rotate(0deg);
    }
}
@-webkit-keyframes rotateArrowCW{
    from{
      transform-origin: center;
      -webkit-transform:rotate(-90deg);
    }
    to{
      transform-origin: center;
      -webkit-transform:rotate(0deg);
    }
}
@-moz-keyframes rotateArrowCCW{
    from{
      transform-origin: center;
      -moz-transform:rotate(0deg);
    }
    to{
      transform-origin: center;
      -moz-transform:rotate(-90deg);
    }
}
@-webkit-keyframes rotateArrowCCW{
    from{
        transform-origin: center;
        -webkit-transform:rotate(0deg);
    }
    to{
      transform-origin: center;
      -webkit-transform:rotate(-90deg);
    }
}
.bottomSeparator{
  height: 5rem;
}
.editDetails{
  flex-grow: 1;
}
#newCategory,#newMaterial{
  display: none;
}
.delCategoryBtn, .deleteMaterialBtn{
  color: white;
}
/*
.headerError{

}
*/
#errorCategory, #errorMaterial{
  background-color: #c22;
  color: white;
  height: 2rem;
  border-radius: 1rem;
  width: auto;
  display: none;
}
#errorCategory p, #errorMaterial p{
  margin-left: 1rem;
  margin-right: 1rem;
}
#priceGroupInputs{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
#newPriceGroupInputs{
  display: none;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  height: auto;
}
.error{

  color: #c22;
  height: 2rem;
  width: auto;

}
.error p{
  margin: 1rem;
}
.editImgOuter{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}
.editImgInner{
  width: 48%;
  /*max-height: 24rem;*/
  overflow: hidden;
  object-fit: contain;
  background-color: var(--heavy-highlight);
  border-radius: 1rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  position: relative;

}
.editImgInner img{
  max-width: 100%;
  max-height: 24rem;
}
.btnImgDelete
{
  width: 6rem;
  height: 2.5rem;
  position: absolute;
  top: calc(50% - 1.25rem);
  left: calc(50% - 3rem);

}
#newUserCard{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  border-radius: 1rem;
  background-color: var(--heavy-highlight);
  border: 1px solid var(--gar-copper-light);
  width: 50vw;
  height: 25rem;
  overflow: hidden;
  display: none;
}
#shadow{
  position: absolute;
  left:0;
  right: 0;
  top:0;
  bottom:0;
  z-index: 50;
  background-color: #000c;
  display: none;
}