/*****************************************/
.content-wrapper {
  max-width: 100%!important;
  padding:0 20px;
}
.footer .dnd-section>.row-fluid {
  max-width: 100%!important;
  padding:0 20px;
}

main {
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  -webkit-flex-direction:row;
      -ms-flex-direction:row;
          flex-direction:row;
}
aside {
  display:block;
  border-right:1px solid rgba(0,0,0,.1);
  position:-webkit-sticky;
  position:sticky;
  -webkit-flex-basis: 320px;
      -ms-flex-preferred-size: 320px;
          flex-basis: 320px;
          max-width:100%;
  -webkit-box-flex: 0;px;
  -webkit-flex: 0 1;px;
      -ms-flex: 0 1;px;
          flex: 0 1;
  height: calc(100vh - 80px);
  top: 80px;
  
}

aside.active + .content-icon .overlay {
  visibility: visible;
  opacity: 1;
  z-index: 4;
  position: fixed;
}
.content-icon {
  position: fixed;
  top: 100px;
  left: 20px
}

.content-icon .icon{
  background-color: var(--primary-color, #007bff);
  color: var(--light-color, #fff);
  border-radius: 50%;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 7px;
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
          box-shadow: 0 0 10px rgba(0,0,0,.1);
}

#main-content {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

@media only screen and (max-width: 1024px){
  aside {
    margin-left: -100%;
    position: fixed;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear; 
  }
  aside.active {
    margin-left: 0;
    z-index: 5;
  }
}