.sidebar-fixed {
  height: 100vh;
  width: 270px;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
  z-index: 1050;
  background-color: #fff;
  padding: 0 1.5rem 1.5rem
}

.sidebar-fixed .list-group .active {
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
  -webkit-border-radius: 5px;
  border-radius: 5px
}

.sidebar-fixed .logo-wrapper {
  padding: 2.5rem
}

.sidebar-fixed .logo-wrapper img {
  max-height: 50px
}

@media (min-width:1200px) {

  .navbar,
  .page-footer,
  main {
    padding-left: 270px
  }
}

@media (max-width:1199.98px) {
  .sidebar-fixed {
    display: none
  }
}

.line-bottom {
  border-bottom: 1px solid lightgray;
  vertical-align: -webkit-baseline-middle;
}

.colorpicker-2x .colorpicker-saturation {
  width: 200px;
  height: 200px;
}

.colorpicker-2x .colorpicker-hue,
.colorpicker-2x .colorpicker-alpha {
  width: 30px;
  height: 200px;
}

.colorpicker-2x .colorpicker-color,
.colorpicker-2x .colorpicker-color div {
  height: 30px;
}
.input-group-preappend {
  min-width: 111.02;
}

#note {
  position: fixed;
  z-index: 10000;
  top: -50px;
  left: 0;
  right: 0;
  background: #fde073;
  text-align: center;
  line-height: 2.5;
  overflow: hidden; 
  -webkit-box-shadow: 0 0 5px black;
  -moz-box-shadow:    0 0 5px black;
  box-shadow:         0 0 5px black;
  animation-duration: 10s;
  animation-name: slideDown;
}
@-webkit-keyframes slideDown {

10% {
  -webkit-transform: translateY(50px);
}
90% {
  -webkit-transform: translateY(50px);
}
100% {
  -webkit-transform: translateY(0px);
}
}
@-moz-keyframes slideDown {
  10% {
  -moz-transform: translateY(50px);
}
90% {
  -moz-transform: translateY(50px);
}
100% {
  -moz-transform: translateY(0px);
}
}
.spinner {
  margin: 100px auto;
  width: 40px;
  height: 40px;
  position: relative;
  text-align: center;
  
  -webkit-animation: sk-rotate 2.0s infinite linear;
  animation: sk-rotate 2.0s infinite linear;
}

.dot1, .dot2 {
  width: 60%;
  height: 60%;
  display: inline-block;
  position: absolute;
  top: 0;
  background-color: var(--primary);
  border-radius: 100%;
  
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.dot2 {
  top: auto;
  bottom: 0;
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }}
@keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}