.salaxy-component {
  
  .salaxy-navi-main-container main.salaxy-content {
    margin-top: 20px;
}


  .videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
    object, embed, iframe{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
}


// Custom sidebar styles

 
main {
  .container, .container-fluid{
      margin-top:45px;
  }
}


.sidebar {
  height: 100%;
  width: @salaxy-navi-sidebar-width;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 1);
  overflow-x: hidden;
  transition: 0.5s;
  margin-left: 0px;
  
  padding: 0;
  -webkit-box-shadow: 6px -1px 10px -3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 6px -1px 10px -3px rgba(0, 0, 0, 0.3);
  box-shadow: 6px -1px 10px -3px rgba(0, 0, 0, 0.3);
  .search-wrapper{
    height:48px;   
  }
  .control-label{
      padding-top:10px;
  }
  &.open {
      margin-left: @salaxy-navi-sidebar-width;
  }
  .btn-group-wrapper{
    text-align:center;
    width:100%;
    
    .btn-group-sm > .btn{
        padding:5px 5px;
    }
  }
  .filter-btn-group{
    width: inherit;
    display: inline-block;
    text-align:center;
    margin:5px auto;
    width:95%;
    .btn{
      margin-left:-4px;
      float:none;
    }
  }
  pre{
    display: table;
    padding: 3.5px;
    margin: 0 auto 10px;
  }
  .worker-list-item, .calc-list-item {
      padding: 0px 0px 1px 10px;
      height: 70px;
      line-height: 70px;
      &.striped{
          background-color: @table-bg-accent;
      }
      salaxy-avatar {
          margin-right: 10px;
      }
      a {
          text-decoration: none;
      }
      .avatar-name{
          display: inline-block;
          line-height: normal;
          font-size: 13px;
          vertical-align: middle;
          max-width: 145px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }
      .avatar-image{
          display: inline-block;
          line-height: normal;
          vertical-align: middle;
      }
      salaxy-avatar {
        margin-right: 8px;
      }
      a {
        text-decoration: none;
      }
  }
}


.openbtn {
  position: fixed;
  z-index: 999;
  top: 86px;
  left: @salaxy-navi-sidebar-width;
  height: 56px;
  border-radius: 0 10px 10px 0;
  width: 56px;
  background-color: @brand-primary;
  color: #fff;
  text-align: center;
  line-height: 0;
  -webkit-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.25);
  transition: 0.35s;
  .fa-chevron-right {
      font-size: 27px;
      text-align: center;
      line-height: 44px;
      width: 106%;}
  .minitext{
      line-height: 0;
      font-size: 10px;
  }
  &.open {
      left: calc(~'@{salaxy-navi-sidebar-width} * 2 - 30px'); // 470px;
      border-radius:25px;
      width: 50px;
      height: 50px;
      -webkit-box-shadow: -5px 7px 15px -4px rgba(0, 0, 0, 0.3);
      -moz-box-shadow: -5px 7px 15px -4px rgba(0, 0, 0, 0.3);
      box-shadow: -5px 7px 15px -4px rgba(0, 0, 0, 0.3);
      .fa {
          font-size: 45px;
          line-height: 48px;
      }
      .minitext{
          display:none;
      }
  }
}
/*
::-webkit-scrollbar {
  width: 0px;
  background: transparent;  
}*/

@media screen and (min-width:1200px) {
  main {
      .is-custom-sidebar{
          max-width:100%;
      }
  }
}

@media screen and (max-width:991px) {
  main {
    .is-custom-sidebar{
        margin:50px auto auto;
        max-width: 98%;
    }
  }
  .sidebar {
   
    margin-left: -@salaxy-navi-sidebar-width;
    
    .sidebar-list-item:first-child{
      margin-top: 65px; // height of the mobile header
    }
    
    &.open {
        margin-left: 0px;
    }
    .btn-group-wrapper, .search-wrapper{
      margin-top:68px;
    }
   
  }

  .openbtn {
    left: 0px;
    top: 75px; // height of the mobile header extra space
    &.open {
      left: calc(~'@{salaxy-navi-sidebar-width} - 35px'); // 215px;
    }
  }
}
  

@media screen and (max-width:767px) {
  main {
    .is-custom-sidebar{
      margin:70px auto auto;
      max-width: 98%;
    }
  }

}

@media screen and (max-width: 467px){
  main{
    .is-custom-sidebar{
      margin-left: 0%;
      max-width: 99%;
      margin-top: 70px;
    }
  }
}