.padding-table{
    padding: .75rem;
}
.border-table{
   border: 1px solid #dee2e6;
}
 
.colum-table-header {
   color: #fff;
   background-color: #212529;
   font-weight: bold;
   border-color: #32383e;
}

.colum-table-body {
   color: #212529;
   border-color: #dee2e6;
}

.collapse.show {
    display: block;
}

#formContent {
   -webkit-border-radius: 10px 10px 10px 10px;
   border-radius: 10px 10px 10px 10px;
   background: #fff;
   padding: 30px;
   width: 90%;
   max-width: 460px;
   position: relative;
   padding: 0px;
   -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
   box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
   text-align: center;
 }

 .border-shadow {
  -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
  box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
 }

 .wrapper {
   display: flex;
   align-items: center;
   flex-direction: column; 
   justify-content: center;
   width: 100%;
   min-height: 100%;
   padding: 20px;
   padding-bottom: 170px;
   background-image: url('/static/main/background.jpg');
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: 100% 100%;
 }

 html, body {
   margin:0px;
   height:100%;
 }

 footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   color: white;
   text-align: center;
 }

 @media (min-width: 576px) {
  .card-columns {
      column-count: 2;
  }
}

@media (min-width: 768px) {
  .card-columns {
      column-count: 3;
  }
}

@media (min-width: 992px) {
  .card-columns {
      column-count: 4;
  }
}

@media (min-width: 1000px) {
  .card-columns {
      column-count: 5;
  }
}


/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.wrappersidebar {
  display: flex;
  width: 100%;
} 

.sidebarRow {
  max-width: 1210px; 
  align-items: center;
  padding-right: 20px;
  padding-left: 20px;
}

#sidebar {
  width: 1000px;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 999;
  transition: all 0.3s;
}

#sidebar.active {
  margin-left: -1000px;
}

#sidebarCollapse {
  width: 40px;
  height: 40px;
  background: #f5f5f5;
}

#sidebarCollapse span {
  width: 80%;
  height: 2px;
  margin: 0 auto;
  display: block;
  background: #555;
  transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
}

#sidebarCollapse span:first-of-type {
  /* rotate first one */
  transform: rotate(45deg) translate(2px, 2px);
}
#sidebarCollapse span:nth-of-type(2) {
  /* second one is not visible */
  opacity: 0;
}
#sidebarCollapse span:last-of-type {
  /* rotate third one */
  transform: rotate(-45deg) translate(1px, -1px);
}

#sidebarCollapse.active span {
  /* no rotation */
  transform: none;
  /* all bars are visible */
  opacity: 1;
  margin: 5px auto;
}


/* ---------------------------------------------------
  CONTENT STYLE
----------------------------------------------------- */
#content {
  width: calc(100% - 1000px);
  min-height: 100vh;
  transition: all 0.3s;
  position: absolute;
  top: 0;
  right: 0;
}

#content.active {
  width: 100%;
}



/* ---------------------------------------------------
  MEDIAQUERIES
----------------------------------------------------- */
@media (max-width: 768px) {
  #sidebar {
      margin-left: -1000px;
  }
  #sidebar.active {
      margin-left: 0;
  }
  #content {
      width: 100%;
  }
  #content.active {
      width: calc(100% - 1000px);
  }
   /* Reversing the behavior of the bars: 
       Removing the rotation from the first,
       last bars and reappear the second bar on default state, 
       and giving them a vertical margin */
       #sidebarCollapse span:first-of-type,
       #sidebarCollapse span:nth-of-type(2),
       #sidebarCollapse span:last-of-type {
           transform: none;
           opacity: 1;
           margin: 5px auto;
       }
   
       /* Removing the vertical margin and make the first and last bars rotate again when the sidebar is open, hiding the second bar */
       #sidebarCollapse.active span {
           margin: 0 auto;
       }
       #sidebarCollapse.active span:first-of-type {
           transform: rotate(45deg) translate(2px, 2px);
       }
       #sidebarCollapse.active span:nth-of-type(2) {
           opacity: 0;
       }
       #sidebarCollapse.active span:last-of-type {
           transform: rotate(-45deg) translate(1px, -1px);
       }
}