.off-canvas {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: nowrap;
  flex-flow: nowrap;
  height: 100%;
  position: relative;
  width: 100%;
}

.off-canvas .off-canvas-toggle {
  display: block;
  left: .4rem; 
  position: absolute;
  top: .4rem;
  transition: none;
  z-index: 1;
}

.off-canvas .off-canvas-sidebar {
  background: var(--bg-color);
  bottom: 0;
  left: 0;
  min-width: 10rem;
  overflow-y: auto;
  position: fixed;
  top: 0;
  transform: translateX(-100%); 
  transition: transform .25s;
  z-index: 200;
}

.off-canvas .off-canvas-content {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  height: 100%;
  padding: .4rem .4rem .4rem 4rem;
}

.off-canvas .off-canvas-overlay {
  background: rgba(48, 55, 66, .1);
  border-color: transparent;
  border-radius: 0;
  bottom: 0;
  display: none;
  height: 100%;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
}

.off-canvas .off-canvas-sidebar.active {
  transform: translateX(0);
}

.off-canvas .off-canvas-sidebar.active ~ .off-canvas-overlay {
  display: block;
  z-index: 100;
}

@media (min-width: 960px) {
  .off-canvas-toggle {
    display: none !important;
  }
  .off-canvas.off-canvas-sidebar-show .off-canvas-sidebar {
    /*-ms-flex: 0 0 auto;*/
    /*flex: 0 0 auto;*/
    position: fixed;
    /*margin-top: 4.5vh;*/
    /*position: fixed;*/
    transform: none;
  }
  .off-canvas.off-canvas-sidebar-show .off-canvas-overlay {
    display: none !important;
  }
  .off-canvas-content{
    margin-left: 12rem;
  }
  .navbar{
    padding-left: 12rem;
  }
}

.progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: var(--bg-color-dark);
  border: 0;
  border-radius: .1rem;
  color: var(--primary-color);
  height: .2rem;
  position: relative;
  width: 100%;
}

.progress::-webkit-progress-bar {
  background: transparent;
  border-radius: .1rem;
}

.progress::-webkit-progress-value {
  background: var(--primary-color);
  border-radius: .1rem;
}

.progress::-moz-progress-bar {
  background: var(--primary-color);
  border-radius: .1rem;
}

.progress:indeterminate {
  animation: progress-indeterminate 1.5s linear infinite;
  background: var(--bg-color-dark) linear-gradient(to right, var(--primary-color) 30%, var(--bg-color-dark) 30%) top left/150% 150% no-repeat;
}

.progress:indeterminate::-moz-progress-bar {
  background: transparent;
}

@keyframes progress-indeterminate {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  display: block;
  height: 1.8rem; 
  width: 100%;
}

.slider:focus {
  outline: none;
}

.slider.tooltip:not([data-tooltip])::after {
  content: attr(value);
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: var(--primary-color);
  border: 0;
  border-radius: 50%;
  height: 1rem;
  margin-top: -.50rem;
  -webkit-transition: transform .2s;
  transition: transform .2s;
  width: 1rem;
}

.slider::-moz-range-thumb {
  background: var(--primary-color);
  border: 0;
  border-radius: 50%;
  height: 1rem;
  -moz-transition: transform .2s;
  transition: transform .2s;
  width: 1rem;
}

.slider::-ms-thumb {
  background: var(--primary-color);
  border: 0;
  border-radius: 50%;
  height: 1rem;
  -ms-transition: transform .2s;
  transition: transform .2s;
  width: 1rem;
}

.slider:active::-webkit-slider-thumb {
  transform: scale(1.25);
}

.slider:active::-moz-range-thumb {
  transform: scale(1.25);
}

.slider:active::-ms-thumb {
  transform: scale(1.25);
}

.slider:disabled::-webkit-slider-thumb,
.slider.disabled::-webkit-slider-thumb {
  background: var(--bg-color);
  transform: scale(1);
}

.slider:disabled::-moz-range-thumb,
.slider.disabled::-moz-range-thumb {
  background: var(--bg-color);
  transform: scale(1);
}

.slider:disabled::-ms-thumb,
.slider.disabled::-ms-thumb {
  background: var(--bg-color);
  transform: scale(1);
}

.slider::-webkit-slider-runnable-track {
  background: var(--bg-color-dark);
  border-radius: .1rem;
  height: .1rem;
  width: 100%;
}

.slider::-moz-range-track {
  background: var(--bg-color-dark);
  border-radius: .1rem;
  height: .1rem;
  width: 100%;
}

.slider::-ms-track {
  background: var(--bg-color-dark);
  border-radius: .1rem;
  height: .1rem;
  width: 100%;
}

.slider::-ms-fill-lower {
  background: var(--primary-color);
}