body{
    margin:0;
    padding:0;
}
.side-menu{
    width: 25vw;
    position: absolute;
    top:0;
    right: 0;
    display: grid;
    background-color: rgba(64,64,64);
}

.menu-elem{  
    position: relative;
    background-color: rgba(0,0,0,0.75);
    color:white;
    display: grid;
    align-content: start;
  
}

.menu-elem-heading{
    display:grid;
    grid-template-columns:1fr 16px;
    justify-content: center;
    padding:10px;
    background-color:rgba(128,128,128,0.25);
    background-image: linear-gradient( rgba(0,0,0,0.25),rgba(0,0,0,0.75) 35%, rgba(0,0,0,0.25));
   
}

.menu-elem-heading-title{
    position: relative;
    text-align: center;
    text-indent:16px;
}

.menu-elem-heading-button{
    filter: brightness(0) invert(1);
    display: grid;
    align-items: center;
    justify-content: center;
}


.menu-elem-content{

   /*Those are the transition when revealing the element*/
    transition:max-height 2s,padding 0.5s 0s,color 0.1s 1.7s ;
    display: grid;
    justify-content: center;   
    color:white;
    overflow: hidden;
    max-height: 0px;
}
.menu-elem-content-text{
    padding:10px;
}
.hide{
   /*Those are the transition when hiding the element*/
    transition:max-height 2s,padding 0.5s 1.5s,color 0.1s 1.7s ;
    overflow: hidden;
    padding:0px;
}


#page-container{
    position: relative;
}
@media (max-width:1024px) {
    

    .side-menu{
        width: 100%;
        position: absolute;
        bottom: unset;
        right:unset;
        top:calc(100vh - 152px);
        /*We can add a button that moves the menu up for the ease of access*/
        /*transition:top 2s;*/
        left:unset;
        display: grid;
        background-color: rgba(64,64,64);
    }

}



/*Content of the menu styling*/
div#roof-choice {
    grid-template-columns: 1fr 1fr 1fr;  
    text-align: center;
    justify-content: space-around;
}


.menu-elem-content>div{
    margin:1em 1em 1em 1em;
    display: grid;
    justify-content: center;
}
.menu-elem-content>div img{
    max-width: 100%;
    border-radius: 10px;
}




div#roof-color {
    grid-template-columns: repeat(6,1fr);  
    text-align: center;
    justify-content: space-around;
}
#roof-color .desc{
    line-height: 1em;
    height: 2em;
    overflow: hidden;
}
#roof-color>div {
    margin:1em 1em 0em 1em
    
}




div#roof-material {
    grid-template-columns: repeat(2,1fr);  
    text-align: center;
    justify-content: space-around;
}

.grid-3-columns {
    grid-template-columns: repeat(3,1fr) !important;  
}
.grid-6-columns {
    grid-template-columns: repeat(6,1fr) !important;  
}


.image-based-selection{
    grid-template-columns: repeat(2,1fr);  
    text-align: center;
    justify-content: space-around;
}
.image-description{
    padding-top: 0.0em;

}
.padded-element{
    margin:1em;
}

.num-selector{
    display:grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
  
  .num-selector select{
  margin-left:25% !important;
  }
  
  
  .num-selector:not(:first-child){
    margin-top: 0;
  }
  
  
  
  
  
  [type=radio] { 
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* IMAGE STYLES */
  [type=radio] + img {
    cursor: pointer;
  }
  
  /* CHECKED STYLES */
  [type=radio]:checked + img {
    box-shadow: 0px 0px 0px 2px rgba(255, 255, 255,0.75);
  }


  .image-based-selection img{

    max-width: 100%;
    border-radius:10px;
  }

  .grid-elem{
      display:grid;
  }
  .unmargined-sides{
      margin-left: -1em;
      margin-right: -1em;
  }


  .image-description{
  word-break: break-word;
  line-height: 1.1em;
  height: 2.2em;
  }

  @media screen and (max-width:600px){
      .menu-elem-content .padded-element{
          margin:0.5em;
      }
      
  }
  .image-description-widen{
      margin-right: -1em;
      margin-left: -1em;
  }

  .check-selector{
  display: grid !important;
  grid-template-columns: 1fr 30px !important;
  align-content: center;
  align-items: center
  }
  [type="checkbox"]{
      margin-left: 2em;
  }
  .cel {
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.cel input{
    margin-left:1em !important;
    margin-top:4px !important;
    
}


.unit-addon{
    display:grid;
    grid-template-columns:1fr 0px;
}

.white-box{
    margin-left: -3em;
    display: grid;
    align-items: center;
    font-size: 14px;
    color: gray;width: 0em;
}

.check-selector-gutter {
    display: grid !important;
    grid-template-columns: 1fr 6em 6em 30px !important;
    align-content: center;
    align-items: center;}