@charset "UTF-8";

/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT

Copyright (c) 2013 Daniel Eden
*/

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

@-webkit-keyframes bounce {
  0%, 100%, 20%, 53%, 80% {
    -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
    transition-timing-function: cubic-bezier(0.215,.61,.355,1);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755,.050,.855,.060);
    transition-timing-function: cubic-bezier(0.755,.050,.855,.060);
    -webkit-transform: translate3d(0,-30px,0);
    transform: translate3d(0,-30px,0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755,.050,.855,.060);
    transition-timing-function: cubic-bezier(0.755,.050,.855,.060);
    -webkit-transform: translate3d(0,-15px,0);
    transform: translate3d(0,-15px,0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }
}

@keyframes bounce {
  0%, 100%, 20%, 53%, 80% {
    -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
    transition-timing-function: cubic-bezier(0.215,.61,.355,1);
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755,.050,.855,.060);
    transition-timing-function: cubic-bezier(0.755,.050,.855,.060);
    -webkit-transform: translate3d(0,-30px,0);
    -ms-transform: translate3d(0,-30px,0);
    transform: translate3d(0,-30px,0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755,.050,.855,.060);
    transition-timing-function: cubic-bezier(0.755,.050,.855,.060);
    -webkit-transform: translate3d(0,-15px,0);
    -ms-transform: translate3d(0,-15px,0);
    transform: translate3d(0,-15px,0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    -ms-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes flash {
  0%, 100%, 50% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

@keyframes flash {
  0%, 100%, 50% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
  }

  50% {
    -webkit-transform: scale3d(1.05,1.05,1.05);
    transform: scale3d(1.05,1.05,1.05);
  }

  100% {
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale3d(1,1,1);
    -ms-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
  }

  50% {
    -webkit-transform: scale3d(1.05,1.05,1.05);
    -ms-transform: scale3d(1.05,1.05,1.05);
    transform: scale3d(1.05,1.05,1.05);
  }

  100% {
    -webkit-transform: scale3d(1,1,1);
    -ms-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
  }

  30% {
    -webkit-transform: scale3d(1.25,.75,1);
    transform: scale3d(1.25,.75,1);
  }

  40% {
    -webkit-transform: scale3d(0.75,1.25,1);
    transform: scale3d(0.75,1.25,1);
  }

  50% {
    -webkit-transform: scale3d(1.15,.85,1);
    transform: scale3d(1.15,.85,1);
  }

  65% {
    -webkit-transform: scale3d(.95,1.05,1);
    transform: scale3d(.95,1.05,1);
  }

  75% {
    -webkit-transform: scale3d(1.05,.95,1);
    transform: scale3d(1.05,.95,1);
  }

  100% {
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
  }
}

@keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1,1,1);
    -ms-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
  }

  30% {
    -webkit-transform: scale3d(1.25,.75,1);
    -ms-transform: scale3d(1.25,.75,1);
    transform: scale3d(1.25,.75,1);
  }

  40% {
    -webkit-transform: scale3d(0.75,1.25,1);
    -ms-transform: scale3d(0.75,1.25,1);
    transform: scale3d(0.75,1.25,1);
  }

  50% {
    -webkit-transform: scale3d(1.15,.85,1);
    -ms-transform: scale3d(1.15,.85,1);
    transform: scale3d(1.15,.85,1);
  }

  65% {
    -webkit-transform: scale3d(.95,1.05,1);
    -ms-transform: scale3d(.95,1.05,1);
    transform: scale3d(.95,1.05,1);
  }

  75% {
    -webkit-transform: scale3d(1.05,.95,1);
    -ms-transform: scale3d(1.05,.95,1);
    transform: scale3d(1.05,.95,1);
  }

  100% {
    -webkit-transform: scale3d(1,1,1);
    -ms-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
  }
}

.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px,0,0);
    transform: translate3d(-10px,0,0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px,0,0);
    transform: translate3d(10px,0,0);
  }
}

@keyframes shake {
  0%, 100% {
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px,0,0);
    -ms-transform: translate3d(-10px,0,0);
    transform: translate3d(-10px,0,0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px,0,0);
    -ms-transform: translate3d(10px,0,0);
    transform: translate3d(10px,0,0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0,0,1,15deg);
    transform: rotate3d(0,0,1,15deg);
  }

  40% {
    -webkit-transform: rotate3d(0,0,1,-10deg);
    transform: rotate3d(0,0,1,-10deg);
  }

  60% {
    -webkit-transform: rotate3d(0,0,1,5deg);
    transform: rotate3d(0,0,1,5deg);
  }

  80% {
    -webkit-transform: rotate3d(0,0,1,-5deg);
    transform: rotate3d(0,0,1,-5deg);
  }

  100% {
    -webkit-transform: rotate3d(0,0,1,0deg);
    transform: rotate3d(0,0,1,0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0,0,1,15deg);
    -ms-transform: rotate3d(0,0,1,15deg);
    transform: rotate3d(0,0,1,15deg);
  }

  40% {
    -webkit-transform: rotate3d(0,0,1,-10deg);
    -ms-transform: rotate3d(0,0,1,-10deg);
    transform: rotate3d(0,0,1,-10deg);
  }

  60% {
    -webkit-transform: rotate3d(0,0,1,5deg);
    -ms-transform: rotate3d(0,0,1,5deg);
    transform: rotate3d(0,0,1,5deg);
  }

  80% {
    -webkit-transform: rotate3d(0,0,1,-5deg);
    -ms-transform: rotate3d(0,0,1,-5deg);
    transform: rotate3d(0,0,1,-5deg);
  }

  100% {
    -webkit-transform: rotate3d(0,0,1,0deg);
    -ms-transform: rotate3d(0,0,1,0deg);
    transform: rotate3d(0,0,1,0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
  }

  10%, 20% {
    -webkit-transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);
    transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);
    transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);
    transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);
  }

  100% {
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
  }
}

@keyframes tada {
  0% {
    -webkit-transform: scale3d(1,1,1);
    -ms-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
  }

  10%, 20% {
    -webkit-transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);
    -ms-transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);
    transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);
    -ms-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);
    transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);
    -ms-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);
    transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);
  }

  100% {
    -webkit-transform: scale3d(1,1,1);
    -ms-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
  }
}

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

@-webkit-keyframes wobble {
  0% {
    -webkit-transform: none;
    transform: none;
  }

  15% {
    -webkit-transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);
    transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);
  }

  30% {
    -webkit-transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg);
    transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);
    transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);
  }

  60% {
    -webkit-transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg);
    transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);
    transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);
  }

  100% {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes wobble {
  0% {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }

  15% {
    -webkit-transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);
    -ms-transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);
    transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);
  }

  30% {
    -webkit-transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg);
    -ms-transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg);
    transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);
    -ms-transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);
    transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);
  }

  60% {
    -webkit-transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg);
    -ms-transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg);
    transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);
    -ms-transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);
    transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);
  }

  100% {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes bounceIn {
  0%, 100%, 20%, 40%, 60%, 80% {
    -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
    transition-timing-function: cubic-bezier(0.215,.61,.355,1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3,.3,.3);
    transform: scale3d(.3,.3,.3);
  }

  20% {
    -webkit-transform: scale3d(1.1,1.1,1.1);
    transform: scale3d(1.1,1.1,1.1);
  }

  40% {
    -webkit-transform: scale3d(.9,.9,.9);
    transform: scale3d(.9,.9,.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03,1.03,1.03);
    transform: scale3d(1.03,1.03,1.03);
  }

  80% {
    -webkit-transform: scale3d(.97,.97,.97);
    transform: scale3d(.97,.97,.97);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
  }
}

@keyframes bounceIn {
  0%, 100%, 20%, 40%, 60%, 80% {
    -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
    transition-timing-function: cubic-bezier(0.215,.61,.355,1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3,.3,.3);
    -ms-transform: scale3d(.3,.3,.3);
    transform: scale3d(.3,.3,.3);
  }

  20% {
    -webkit-transform: scale3d(1.1,1.1,1.1);
    -ms-transform: scale3d(1.1,1.1,1.1);
    transform: scale3d(1.1,1.1,1.1);
  }

  40% {
    -webkit-transform: scale3d(.9,.9,.9);
    -ms-transform: scale3d(.9,.9,.9);
    transform: scale3d(.9,.9,.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03,1.03,1.03);
    -ms-transform: scale3d(1.03,1.03,1.03);
    transform: scale3d(1.03,1.03,1.03);
  }

  80% {
    -webkit-transform: scale3d(.97,.97,.97);
    -ms-transform: scale3d(.97,.97,.97);
    transform: scale3d(.97,.97,.97);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1,1,1);
    -ms-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
  }
}

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

@-webkit-keyframes bounceInDown {
  0%, 100%, 60%, 75%, 90% {
    -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
    transition-timing-function: cubic-bezier(0.215,.61,.355,1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0,-3000px,0);
    transform: translate3d(0,-3000px,0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0,25px,0);
    transform: translate3d(0,25px,0);
  }

  75% {
    -webkit-transform: translate3d(0,-10px,0);
    transform: translate3d(0,-10px,0);
  }

  90% {
    -webkit-transform: translate3d(0,5px,0);
    transform: translate3d(0,5px,0);
  }

  100% {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInDown {
  0%, 100%, 60%, 75%, 90% {
    -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
    transition-timing-function: cubic-bezier(0.215,.61,.355,1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0,-3000px,0);
    -ms-transform: translate3d(0,-3000px,0);
    transform: translate3d(0,-3000px,0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0,25px,0);
    -ms-transform: translate3d(0,25px,0);
    transform: translate3d(0,25px,0);
  }

  75% {
    -webkit-transform: translate3d(0,-10px,0);
    -ms-transform: translate3d(0,-10px,0);
    transform: translate3d(0,-10px,0);
  }

  90% {
    -webkit-transform: translate3d(0,5px,0);
    -ms-transform: translate3d(0,5px,0);
    transform: translate3d(0,5px,0);
  }

  100% {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  0%, 100%, 60%, 75%, 90% {
    -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
    transition-timing-function: cubic-bezier(0.215,.61,.355,1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px,0,0);
    transform: translate3d(-3000px,0,0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px,0,0);
    transform: translate3d(25px,0,0);
  }

  75% {
    -webkit-transform: translate3d(-10px,0,0);
    transform: translate3d(-10px,0,0);
  }

  90% {
    -webkit-transform: translate3d(5px,0,0);
    transform: translate3d(5px,0,0);
  }

  100% {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInLeft {
  0%, 100%, 60%, 75%, 90% {
    -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
    transition-timing-function: cubic-bezier(0.215,.61,.355,1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px,0,0);
    -ms-transform: translate3d(-3000px,0,0);
    transform: translate3d(-3000px,0,0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px,0,0);
    -ms-transform: translate3d(25px,0,0);
    transform: translate3d(25px,0,0);
  }

  75% {
    -webkit-transform: translate3d(-10px,0,0);
    -ms-transform: translate3d(-10px,0,0);
    transform: translate3d(-10px,0,0);
  }

  90% {
    -webkit-transform: translate3d(5px,0,0);
    -ms-transform: translate3d(5px,0,0);
    transform: translate3d(5px,0,0);
  }

  100% {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  0%, 100%, 60%, 75%, 90% {
    -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
    transition-timing-function: cubic-bezier(0.215,.61,.355,1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px,0,0);
    transform: translate3d(3000px,0,0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px,0,0);
    transform: translate3d(-25px,0,0);
  }

  75% {
    -webkit-transform: translate3d(10px,0,0);
    transform: translate3d(10px,0,0);
  }

  90% {
    -webkit-transform: translate3d(-5px,0,0);
    transform: translate3d(-5px,0,0);
  }

  100% {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInRight {
  0%, 100%, 60%, 75%, 90% {
    -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
    transition-timing-function: cubic-bezier(0.215,.61,.355,1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px,0,0);
    -ms-transform: translate3d(3000px,0,0);
    transform: translate3d(3000px,0,0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px,0,0);
    -ms-transform: translate3d(-25px,0,0);
    transform: translate3d(-25px,0,0);
  }

  75% {
    -webkit-transform: translate3d(10px,0,0);
    -ms-transform: translate3d(10px,0,0);
    transform: translate3d(10px,0,0);
  }

  90% {
    -webkit-transform: translate3d(-5px,0,0);
    -ms-transform: translate3d(-5px,0,0);
    transform: translate3d(-5px,0,0);
  }

  100% {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  0%, 100%, 60%, 75%, 90% {
    -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
    transition-timing-function: cubic-bezier(0.215,.61,.355,1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0,3000px,0);
    transform: translate3d(0,3000px,0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0,-20px,0);
    transform: translate3d(0,-20px,0);
  }

  75% {
    -webkit-transform: translate3d(0,10px,0);
    transform: translate3d(0,10px,0);
  }

  90% {
    -webkit-transform: translate3d(0,-5px,0);
    transform: translate3d(0,-5px,0);
  }

  100% {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
}

@keyframes bounceInUp {
  0%, 100%, 60%, 75%, 90% {
    -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
    transition-timing-function: cubic-bezier(0.215,.61,.355,1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0,3000px,0);
    -ms-transform: translate3d(0,3000px,0);
    transform: translate3d(0,3000px,0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0,-20px,0);
    -ms-transform: translate3d(0,-20px,0);
    transform: translate3d(0,-20px,0);
  }

  75% {
    -webkit-transform: translate3d(0,10px,0);
    -ms-transform: translate3d(0,10px,0);
    transform: translate3d(0,10px,0);
  }

  90% {
    -webkit-transform: translate3d(0,-5px,0);
    -ms-transform: translate3d(0,-5px,0);
    transform: translate3d(0,-5px,0);
  }

  100% {
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(.9,.9,.9);
    transform: scale3d(.9,.9,.9);
  }

  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1,1.1,1.1);
    transform: scale3d(1.1,1.1,1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(.3,.3,.3);
    transform: scale3d(.3,.3,.3);
  }
}

@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(.9,.9,.9);
    -ms-transform: scale3d(.9,.9,.9);
    transform: scale3d(.9,.9,.9);
  }

  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1,1.1,1.1);
    -ms-transform: scale3d(1.1,1.1,1.1);
    transform: scale3d(1.1,1.1,1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(.3,.3,.3);
    -ms-transform: scale3d(.3,.3,.3);
    transform: scale3d(.3,.3,.3);
  }
}

.bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0,10px,0);
    transform: translate3d(0,10px,0);
  }

  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0,-20px,0);
    transform: translate3d(0,-20px,0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0,2000px,0);
    transform: translate3d(0,2000px,0);
  }
}

@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0,10px,0);
    -ms-transform: translate3d(0,10px,0);
    transform: translate3d(0,10px,0);
  }

  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0,-20px,0);
    -ms-transform: translate3d(0,-20px,0);
    transform: translate3d(0,-20px,0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0,2000px,0);
    -ms-transform: translate3d(0,2000px,0);
    transform: translate3d(0,2000px,0);
  }
}

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px,0,0);
    transform: translate3d(20px,0,0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px,0,0);
    transform: translate3d(-2000px,0,0);
  }
}

@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px,0,0);
    -ms-transform: translate3d(20px,0,0);
    transform: translate3d(20px,0,0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px,0,0);
    -ms-transform: translate3d(-2000px,0,0);
    transform: translate3d(-2000px,0,0);
  }
}

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px,0,0);
    transform: translate3d(-20px,0,0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(2000px,0,0);
    transform: translate3d(2000px,0,0);
  }
}

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px,0,0);
    -ms-transform: translate3d(-20px,0,0);
    transform: translate3d(-20px,0,0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(2000px,0,0);
    -ms-transform: translate3d(2000px,0,0);
    transform: translate3d(2000px,0,0);
  }
}

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0,-10px,0);
    transform: translate3d(0,-10px,0);
  }

  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0,20px,0);
    transform: translate3d(0,20px,0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0,-2000px,0);
    transform: translate3d(0,-2000px,0);
  }
}

@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0,-10px,0);
    -ms-transform: translate3d(0,-10px,0);
    transform: translate3d(0,-10px,0);
  }

  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0,20px,0);
    -ms-transform: translate3d(0,20px,0);
    transform: translate3d(0,20px,0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0,-2000px,0);
    -ms-transform: translate3d(0,-2000px,0);
    transform: translate3d(0,-2000px,0);
  }
}

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0,-100%,0);
    transform: translate3d(0,-100%,0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0,-100%,0);
    -ms-transform: translate3d(0,-100%,0);
    transform: translate3d(0,-100%,0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0,-2000px,0);
    transform: translate3d(0,-2000px,0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0,-2000px,0);
    -ms-transform: translate3d(0,-2000px,0);
    transform: translate3d(0,-2000px,0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%,0,0);
    -ms-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px,0,0);
    transform: translate3d(-2000px,0,0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px,0,0);
    -ms-transform: translate3d(-2000px,0,0);
    transform: translate3d(-2000px,0,0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%,0,0);
    -ms-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(2000px,0,0);
    transform: translate3d(2000px,0,0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(2000px,0,0);
    -ms-transform: translate3d(2000px,0,0);
    transform: translate3d(2000px,0,0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0,100%,0);
    -ms-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0,2000px,0);
    transform: translate3d(0,2000px,0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0,2000px,0);
    -ms-transform: translate3d(0,2000px,0);
    transform: translate3d(0,2000px,0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
  }
}

@keyframes fadeOutDown {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0,100%,0);
    -ms-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0,2000px,0);
    transform: translate3d(0,2000px,0);
  }
}

@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0,2000px,0);
    -ms-transform: translate3d(0,2000px,0);
    transform: translate3d(0,2000px,0);
  }
}

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0);
  }
}

@keyframes fadeOutLeft {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%,0,0);
    -ms-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0);
  }
}

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px,0,0);
    transform: translate3d(-2000px,0,0);
  }
}

@keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px,0,0);
    -ms-transform: translate3d(-2000px,0,0);
    transform: translate3d(-2000px,0,0);
  }
}

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0);
  }
}

@keyframes fadeOutRight {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%,0,0);
    -ms-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(2000px,0,0);
    transform: translate3d(2000px,0,0);
  }
}

@keyframes fadeOutRightBig {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(2000px,0,0);
    -ms-transform: translate3d(2000px,0,0);
    transform: translate3d(2000px,0,0);
  }
}

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0,-100%,0);
    transform: translate3d(0,-100%,0);
  }
}

@keyframes fadeOutUp {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0,-100%,0);
    -ms-transform: translate3d(0,-100%,0);
    transform: translate3d(0,-100%,0);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0,-2000px,0);
    transform: translate3d(0,-2000px,0);
  }
}

@keyframes fadeOutUpBig {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0,-2000px,0);
    -ms-transform: translate3d(0,-2000px,0);
    transform: translate3d(0,-2000px,0);
  }
}

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0,1,0,-360deg);
    transform: perspective(400px) rotate3d(0,1,0,-360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);
    transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);
    transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(.95,.95,.95);
    transform: perspective(400px) scale3d(.95,.95,.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0,1,0,-360deg);
    -ms-transform: perspective(400px) rotate3d(0,1,0,-360deg);
    transform: perspective(400px) rotate3d(0,1,0,-360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);
    -ms-transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);
    transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);
    -ms-transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);
    transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(.95,.95,.95);
    -ms-transform: perspective(400px) scale3d(.95,.95,.95);
    transform: perspective(400px) scale3d(.95,.95,.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px);
    -ms-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1,0,0,90deg);
    transform: perspective(400px) rotate3d(1,0,0,90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1,0,0,-20deg);
    transform: perspective(400px) rotate3d(1,0,0,-20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1,0,0,10deg);
    transform: perspective(400px) rotate3d(1,0,0,10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1,0,0,-5deg);
    transform: perspective(400px) rotate3d(1,0,0,-5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1,0,0,90deg);
    -ms-transform: perspective(400px) rotate3d(1,0,0,90deg);
    transform: perspective(400px) rotate3d(1,0,0,90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1,0,0,-20deg);
    -ms-transform: perspective(400px) rotate3d(1,0,0,-20deg);
    transform: perspective(400px) rotate3d(1,0,0,-20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1,0,0,10deg);
    -ms-transform: perspective(400px) rotate3d(1,0,0,10deg);
    transform: perspective(400px) rotate3d(1,0,0,10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1,0,0,-5deg);
    -ms-transform: perspective(400px) rotate3d(1,0,0,-5deg);
    transform: perspective(400px) rotate3d(1,0,0,-5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
    -ms-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible!important;
  -ms-backface-visibility: visible!important;
  backface-visibility: visible!important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0,1,0,90deg);
    transform: perspective(400px) rotate3d(0,1,0,90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0,1,0,-20deg);
    transform: perspective(400px) rotate3d(0,1,0,-20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0,1,0,10deg);
    transform: perspective(400px) rotate3d(0,1,0,10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0,1,0,-5deg);
    transform: perspective(400px) rotate3d(0,1,0,-5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0,1,0,90deg);
    -ms-transform: perspective(400px) rotate3d(0,1,0,90deg);
    transform: perspective(400px) rotate3d(0,1,0,90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0,1,0,-20deg);
    -ms-transform: perspective(400px) rotate3d(0,1,0,-20deg);
    transform: perspective(400px) rotate3d(0,1,0,-20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0,1,0,10deg);
    -ms-transform: perspective(400px) rotate3d(0,1,0,10deg);
    transform: perspective(400px) rotate3d(0,1,0,10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0,1,0,-5deg);
    -ms-transform: perspective(400px) rotate3d(0,1,0,-5deg);
    transform: perspective(400px) rotate3d(0,1,0,-5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
    -ms-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInY {
  -webkit-backface-visibility: visible!important;
  -ms-backface-visibility: visible!important;
  backface-visibility: visible!important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1,0,0,-20deg);
    transform: perspective(400px) rotate3d(1,0,0,-20deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotate3d(1,0,0,90deg);
    transform: perspective(400px) rotate3d(1,0,0,90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px);
    -ms-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1,0,0,-20deg);
    -ms-transform: perspective(400px) rotate3d(1,0,0,-20deg);
    transform: perspective(400px) rotate3d(1,0,0,-20deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotate3d(1,0,0,90deg);
    -ms-transform: perspective(400px) rotate3d(1,0,0,90deg);
    transform: perspective(400px) rotate3d(1,0,0,90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
  -webkit-backface-visibility: visible!important;
  -ms-backface-visibility: visible!important;
  backface-visibility: visible!important;
}

@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0,1,0,-15deg);
    transform: perspective(400px) rotate3d(0,1,0,-15deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotate3d(0,1,0,90deg);
    transform: perspective(400px) rotate3d(0,1,0,90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px);
    -ms-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0,1,0,-15deg);
    -ms-transform: perspective(400px) rotate3d(0,1,0,-15deg);
    transform: perspective(400px) rotate3d(0,1,0,-15deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotate3d(0,1,0,90deg);
    -ms-transform: perspective(400px) rotate3d(0,1,0,90deg);
    transform: perspective(400px) rotate3d(0,1,0,90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-backface-visibility: visible!important;
  -ms-backface-visibility: visible!important;
  backface-visibility: visible!important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translate3d(100%,0,0) skewX(-30deg);
    transform: translate3d(100%,0,0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translate3d(100%,0,0) skewX(-30deg);
    -ms-transform: translate3d(100%,0,0) skewX(-30deg);
    transform: translate3d(100%,0,0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    -ms-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    -ms-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    opacity: 1;
  }
}

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  0% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(100%,0,0) skewX(30deg);
    transform: translate3d(100%,0,0) skewX(30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  0% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(100%,0,0) skewX(30deg);
    -ms-transform: translate3d(100%,0,0) skewX(30deg);
    transform: translate3d(100%,0,0) skewX(30deg);
    opacity: 0;
  }
}

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0,0,1,-200deg);
    transform: rotate3d(0,0,1,-200deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateIn {
  0% {
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0,0,1,-200deg);
    -ms-transform: rotate3d(0,0,1,-200deg);
    transform: rotate3d(0,0,1,-200deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0,0,1,-45deg);
    transform: rotate3d(0,0,1,-45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0,0,1,-45deg);
    -ms-transform: rotate3d(0,0,1,-45deg);
    transform: rotate3d(0,0,1,-45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0,0,1,45deg);
    transform: rotate3d(0,0,1,45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0,0,1,45deg);
    -ms-transform: rotate3d(0,0,1,45deg);
    transform: rotate3d(0,0,1,45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0,0,1,45deg);
    transform: rotate3d(0,0,1,45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0,0,1,45deg);
    -ms-transform: rotate3d(0,0,1,45deg);
    transform: rotate3d(0,0,1,45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0,0,1,-90deg);
    transform: rotate3d(0,0,1,-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0,0,1,-90deg);
    -ms-transform: rotate3d(0,0,1,-90deg);
    transform: rotate3d(0,0,1,-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0,0,1,200deg);
    transform: rotate3d(0,0,1,200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  0% {
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0,0,1,200deg);
    -ms-transform: rotate3d(0,0,1,200deg);
    transform: rotate3d(0,0,1,200deg);
    opacity: 0;
  }
}

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0,0,1,45deg);
    transform: rotate(0,0,1,45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0,0,1,45deg);
    -ms-transform: rotate(0,0,1,45deg);
    transform: rotate(0,0,1,45deg);
    opacity: 0;
  }
}

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0,0,1,-45deg);
    transform: rotate3d(0,0,1,-45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0,0,1,-45deg);
    -ms-transform: rotate3d(0,0,1,-45deg);
    transform: rotate3d(0,0,1,-45deg);
    opacity: 0;
  }
}

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0,0,1,-45deg);
    transform: rotate3d(0,0,1,-45deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0,0,1,-45deg);
    -ms-transform: rotate3d(0,0,1,-45deg);
    transform: rotate3d(0,0,1,-45deg);
    opacity: 0;
  }
}

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0,0,1,90deg);
    transform: rotate3d(0,0,1,90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0,0,1,90deg);
    -ms-transform: rotate3d(0,0,1,90deg);
    transform: rotate3d(0,0,1,90deg);
    opacity: 0;
  }
}

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform: rotate3d(0,0,1,80deg);
    transform: rotate3d(0,0,1,80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%, 80% {
    -webkit-transform: rotate3d(0,0,1,60deg);
    transform: rotate3d(0,0,1,60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0,700px,0);
    transform: translate3d(0,700px,0);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform: rotate3d(0,0,1,80deg);
    -ms-transform: rotate3d(0,0,1,80deg);
    transform: rotate3d(0,0,1,80deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%, 80% {
    -webkit-transform: rotate3d(0,0,1,60deg);
    -ms-transform: rotate3d(0,0,1,60deg);
    transform: rotate3d(0,0,1,60deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0,700px,0);
    -ms-transform: translate3d(0,700px,0);
    transform: translate3d(0,700px,0);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);
    transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);
    -ms-transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);
    transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

@-webkit-keyframes rollOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%,0,0) rotate3d(0,0,1,120deg);
    transform: translate3d(100%,0,0) rotate3d(0,0,1,120deg);
  }
}

@keyframes rollOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%,0,0) rotate3d(0,0,1,120deg);
    -ms-transform: translate3d(100%,0,0) rotate3d(0,0,1,120deg);
    transform: translate3d(100%,0,0) rotate3d(0,0,1,120deg);
  }
}

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3,.3,.3);
    transform: scale3d(.3,.3,.3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3,.3,.3);
    -ms-transform: scale3d(.3,.3,.3);
    transform: scale3d(.3,.3,.3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0);
    transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0);
    -webkit-animation-timing-function: cubic-bezier(0.55,.055,.675,.19);
    animation-timing-function: cubic-bezier(0.55,.055,.675,.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
    transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
    -webkit-animation-timing-function: cubic-bezier(0.175,.885,.32,1);
    animation-timing-function: cubic-bezier(0.175,.885,.32,1);
  }
}

@keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0);
    -ms-transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0);
    transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0);
    -webkit-animation-timing-function: cubic-bezier(0.55,.055,.675,.19);
    animation-timing-function: cubic-bezier(0.55,.055,.675,.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
    -ms-transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
    transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
    -webkit-animation-timing-function: cubic-bezier(0.175,.885,.32,1);
    animation-timing-function: cubic-bezier(0.175,.885,.32,1);
  }
}

.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0);
    transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0);
    -webkit-animation-timing-function: cubic-bezier(0.55,.055,.675,.19);
    animation-timing-function: cubic-bezier(0.55,.055,.675,.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475,.475,.475) translate3d(10px,0,0);
    transform: scale3d(.475,.475,.475) translate3d(10px,0,0);
    -webkit-animation-timing-function: cubic-bezier(0.175,.885,.32,1);
    animation-timing-function: cubic-bezier(0.175,.885,.32,1);
  }
}

@keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0);
    -ms-transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0);
    transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0);
    -webkit-animation-timing-function: cubic-bezier(0.55,.055,.675,.19);
    animation-timing-function: cubic-bezier(0.55,.055,.675,.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475,.475,.475) translate3d(10px,0,0);
    -ms-transform: scale3d(.475,.475,.475) translate3d(10px,0,0);
    transform: scale3d(.475,.475,.475) translate3d(10px,0,0);
    -webkit-animation-timing-function: cubic-bezier(0.175,.885,.32,1);
    animation-timing-function: cubic-bezier(0.175,.885,.32,1);
  }
}

.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1,.1,.1) translate3d(1000px,0,0);
    transform: scale3d(.1,.1,.1) translate3d(1000px,0,0);
    -webkit-animation-timing-function: cubic-bezier(0.55,.055,.675,.19);
    animation-timing-function: cubic-bezier(0.55,.055,.675,.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475,.475,.475) translate3d(-10px,0,0);
    transform: scale3d(.475,.475,.475) translate3d(-10px,0,0);
    -webkit-animation-timing-function: cubic-bezier(0.175,.885,.32,1);
    animation-timing-function: cubic-bezier(0.175,.885,.32,1);
  }
}

@keyframes zoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1,.1,.1) translate3d(1000px,0,0);
    -ms-transform: scale3d(.1,.1,.1) translate3d(1000px,0,0);
    transform: scale3d(.1,.1,.1) translate3d(1000px,0,0);
    -webkit-animation-timing-function: cubic-bezier(0.55,.055,.675,.19);
    animation-timing-function: cubic-bezier(0.55,.055,.675,.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475,.475,.475) translate3d(-10px,0,0);
    -ms-transform: scale3d(.475,.475,.475) translate3d(-10px,0,0);
    transform: scale3d(.475,.475,.475) translate3d(-10px,0,0);
    -webkit-animation-timing-function: cubic-bezier(0.175,.885,.32,1);
    animation-timing-function: cubic-bezier(0.175,.885,.32,1);
  }
}

.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1,.1,.1) translate3d(0,1000px,0);
    transform: scale3d(.1,.1,.1) translate3d(0,1000px,0);
    -webkit-animation-timing-function: cubic-bezier(0.55,.055,.675,.19);
    animation-timing-function: cubic-bezier(0.55,.055,.675,.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
    transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
    -webkit-animation-timing-function: cubic-bezier(0.175,.885,.32,1);
    animation-timing-function: cubic-bezier(0.175,.885,.32,1);
  }
}

@keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1,.1,.1) translate3d(0,1000px,0);
    -ms-transform: scale3d(.1,.1,.1) translate3d(0,1000px,0);
    transform: scale3d(.1,.1,.1) translate3d(0,1000px,0);
    -webkit-animation-timing-function: cubic-bezier(0.55,.055,.675,.19);
    animation-timing-function: cubic-bezier(0.55,.055,.675,.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
    -ms-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
    transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
    -webkit-animation-timing-function: cubic-bezier(0.175,.885,.32,1);
    animation-timing-function: cubic-bezier(0.175,.885,.32,1);
  }
}

.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3,.3,.3);
    transform: scale3d(.3,.3,.3);
  }

  100% {
    opacity: 0;
  }
}

@keyframes zoomOut {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3,.3,.3);
    -ms-transform: scale3d(.3,.3,.3);
    transform: scale3d(.3,.3,.3);
  }

  100% {
    opacity: 0;
  }
}

.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
    transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
    -webkit-animation-timing-function: cubic-bezier(0.55,.055,.675,.19);
    animation-timing-function: cubic-bezier(0.55,.055,.675,.19);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(.1,.1,.1) translate3d(0,2000px,0);
    transform: scale3d(.1,.1,.1) translate3d(0,2000px,0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175,.885,.32,1);
    animation-timing-function: cubic-bezier(0.175,.885,.32,1);
  }
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
    -ms-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
    transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
    -webkit-animation-timing-function: cubic-bezier(0.55,.055,.675,.19);
    animation-timing-function: cubic-bezier(0.55,.055,.675,.19);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(.1,.1,.1) translate3d(0,2000px,0);
    -ms-transform: scale3d(.1,.1,.1) translate3d(0,2000px,0);
    transform: scale3d(.1,.1,.1) translate3d(0,2000px,0);
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175,.885,.32,1);
    animation-timing-function: cubic-bezier(0.175,.885,.32,1);
  }
}

.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
}

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475,.475,.475) translate3d(42px,0,0);
    transform: scale3d(.475,.475,.475) translate3d(42px,0,0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(-2000px,0,0);
    transform: scale(.1) translate3d(-2000px,0,0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475,.475,.475) translate3d(42px,0,0);
    -ms-transform: scale3d(.475,.475,.475) translate3d(42px,0,0);
    transform: scale3d(.475,.475,.475) translate3d(42px,0,0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(-2000px,0,0);
    -ms-transform: scale(.1) translate3d(-2000px,0,0);
    transform: scale(.1) translate3d(-2000px,0,0);
    -webkit-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;
  }
}

.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
}

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475,.475,.475) translate3d(-42px,0,0);
    transform: scale3d(.475,.475,.475) translate3d(-42px,0,0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(2000px,0,0);
    transform: scale(.1) translate3d(2000px,0,0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475,.475,.475) translate3d(-42px,0,0);
    -ms-transform: scale3d(.475,.475,.475) translate3d(-42px,0,0);
    transform: scale3d(.475,.475,.475) translate3d(-42px,0,0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(2000px,0,0);
    -ms-transform: scale(.1) translate3d(2000px,0,0);
    transform: scale(.1) translate3d(2000px,0,0);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
  }
}

.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
}

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
    transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
    -webkit-animation-timing-function: cubic-bezier(0.55,.055,.675,.19);
    animation-timing-function: cubic-bezier(0.55,.055,.675,.19);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0);
    transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175,.885,.32,1);
    animation-timing-function: cubic-bezier(0.175,.885,.32,1);
  }
}

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
    -ms-transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
    transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
    -webkit-animation-timing-function: cubic-bezier(0.55,.055,.675,.19);
    animation-timing-function: cubic-bezier(0.55,.055,.675,.19);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0);
    -ms-transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0);
    transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0);
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175,.885,.32,1);
    animation-timing-function: cubic-bezier(0.175,.885,.32,1);
  }
}

.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
}
/*! 
 * angular-loading-bar v0.6.0
 * https://chieffancypants.github.io/angular-loading-bar
 * Copyright (c) 2014 Wes Cruver
 * License: MIT
 */

#loading-bar,
#loading-bar-spinner {
  pointer-events: none;
  -webkit-pointer-events: none;
  -webkit-transition: 350ms linear all;
  -moz-transition: 350ms linear all;
  -o-transition: 350ms linear all;
  transition: 350ms linear all;
}

#loading-bar.ng-enter,
#loading-bar.ng-leave.ng-leave-active,
#loading-bar-spinner.ng-enter,
#loading-bar-spinner.ng-leave.ng-leave-active {
  opacity: 0;
}

#loading-bar.ng-enter.ng-enter-active,
#loading-bar.ng-leave,
#loading-bar-spinner.ng-enter.ng-enter-active,
#loading-bar-spinner.ng-leave {
  opacity: 1;
}

#loading-bar .bar {
  -webkit-transition: width 350ms;
  -moz-transition: width 350ms;
  -o-transition: width 350ms;
  transition: width 350ms;
  background: #29d;
  position: fixed;
  z-index: 10002;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  border-bottom-right-radius: 1px;
  border-top-right-radius: 1px;
}

#loading-bar .peg {
  position: absolute;
  width: 70px;
  right: 0;
  top: 0;
  height: 2px;
  opacity: .45;
  -moz-box-shadow: #29d 1px 0 6px 1px;
  -ms-box-shadow: #29d 1px 0 6px 1px;
  -webkit-box-shadow: #29d 1px 0 6px 1px;
  box-shadow: #29d 1px 0 6px 1px;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
}

#loading-bar-spinner {
  display: block;
  position: fixed;
  z-index: 10002;
  top: 10px;
  left: 10px;
}

#loading-bar-spinner .spinner-icon {
  width: 14px;
  height: 14px;
  border: solid 2px transparent;
  border-top-color: #29d;
  border-left-color: #29d;
  border-radius: 10px;
  -webkit-animation: loading-bar-spinner 400ms linear infinite;
  -moz-animation: loading-bar-spinner 400ms linear infinite;
  -ms-animation: loading-bar-spinner 400ms linear infinite;
  -o-animation: loading-bar-spinner 400ms linear infinite;
  animation: loading-bar-spinner 400ms linear infinite;
}

@-webkit-keyframes loading-bar-spinner {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

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

@-moz-keyframes loading-bar-spinner {
  0% {
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-o-keyframes loading-bar-spinner {
  0% {
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-ms-keyframes loading-bar-spinner {
  0% {
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes loading-bar-spinner {
  0% {
    transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/* ========================================================================
 * RESET
 * ======================================================================== */

body,
html {
  background-color: #E9EAED;
  font-family: "Open Sans", sans-serif;
  color: #636E7B;
  -webkit-font-smoothing: antialiased;
  direction: ltr;
  line-height: 21px;
  font-size: 13px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 !important;
}

a,
button {
  outline: none !important;
}

input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
textarea,
select {
  border: 1px solid #DDD;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  color: #a2a2a2 !important;
  font-size: 13px !important;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
textarea:focus,
select:focus {
  box-shadow: none !important;
}

input[type=file] {
  border: none !important;
}

input[type=checkbox]:disabled + label,
input[type=radio]:disabled + label {
  color: #999;
  cursor: not-allowed;
}

label {
  font-weight: normal;
}

code {
  background: transparent;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}

svg {
  width: 100%;
}
/* ========================================================================
 * TABLE OF CONTENTS
 * ========================================================================

 * ========================================================================
 * LAYOUT VARIANT
 * ========================================================================
   01. BOXED
   02. RESPONSIVE BOXED
   03. HEADER FIXED PAGE
 * ========================================================================

 * ========================================================================
 * LAYOUT HEADER
 * ========================================================================
   01. HEADER
   02. HEADER LEFT
   03. HEADER RIGHT
   04. NAVBAR TOOLBAR
   05. NAVBAR MESSAGE
   06. NAVBAR NOTIFICATION
   07. NAVBAR COLORS
 * ========================================================================

 * ========================================================================
 * LAYOUT SIDEBAR LEFT
 * ========================================================================
   01. SIDEBAR NAVIGATION
   02. SIDEBAR CONTENT
   03. SIDEBAR MENU
   04. SIDEBAR CATEGORY
   05. SIDEBAR FOOTER
   06. SIDEBAR LEFT
   
 * ========================================================================
 * LAYOUT SIDEBAR RIGHT
 * ========================================================================
   01. SIDEBAR RIGHT
   02. SIDEBAR PROFILE
   03. SIDEBAR SETTINGS
   04. SIDEBAR CHAT
   05. SIDEBAR SUMMARY
   06. SIDEBAR THEMES
   07. SIDEBAR TASK
 * ========================================================================

 * ========================================================================
 * LAYOUT PAGE CONTENT
 * ========================================================================
   01. PAGE CONTENT
   02. PAGE CONTENT MINIMIZE
   03. HEADER CONTENT
   04. BODY CONTENT
   05. FOOTER CONTENT
   06. NAVBAR TOOLBAR
   07. NAVBAR MESSAGE
   08. NAVBAR NOTIFICATION
 * ======================================================================== */

/* ========================================================================
 * PAGE WRAPPER
 * ======================================================================== */

#wrapper {
  padding: 0px;
  margin: 0px;
  height: 100%;
  position: relative;
}

/* ========================================================================
 * PAGE BOXED
 * ======================================================================== */

html.page-boxed,
body.page-boxed {
  background-color: #505050;
}

html.page-boxed #wrapper,
body.page-boxed #wrapper {
  margin-right: auto;
  margin-left: auto;
  position: relative;
}

html.page-boxed #back-top,
body.page-boxed #back-top {
  right: 90px;
}

html.page-boxed.page-sidebar-right-show #back-top,
body.page-boxed.page-sidebar-right-show #back-top {
  right: 310px;
}

@media (min-width: 1200px) {
  html.page-boxed #wrapper,
  body.page-boxed #wrapper {
    width: 1220px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  body.page-boxed #wrapper {
    width: 970px;
  }
}

@media (max-width: 1024px) {
  body.page-boxed #back-top {
    right: 60px;
  }

  body.page-boxed.page-sidebar-right-show #header .header-right {
    left: 0px;
  }

  body.page-boxed.page-sidebar-right-show #sidebar-left {
    left: 0px;
  }

  body.page-boxed.page-sidebar-right-show #sidebar-left:after {
    left: 27px;
  }

  body.page-boxed.page-sidebar-right-show #page-content {
    margin-left: 75px;
  }

  body.page-boxed.page-sidebar-right-show #page-content .breadcrumb-wrapper {
    display: none;
  }

  body.page-boxed.page-sidebar-right-show #back-top {
    right: 280px;
  }
}

@media (max-width: 800px) {
  body.page-boxed.page-sidebar-minimize-auto #header .navbar-toolbar .navbar-form input {
    min-width: 350px;
  }

  body.page-boxed #header .header-right {
    right: 0px !important;
  }

  body.page-boxed #page-content {
    margin-right: 0px;
  }

  body.page-boxed #page-content .header-content .breadcrumb-wrapper {
    display: none;
  }

  body.page-boxed #back-top {
    right: 30px;
  }

  body.page-boxed.page-sidebar-right-show #header .header-right {
    right: 220px !important;
  }

  body.page-boxed.page-sidebar-right-show #header .header-right .navbar-toolbar .navbar-form input {
    min-width: 225px !important;
  }

  body.page-boxed.page-sidebar-right-show #sidebar-left:after {
    left: 0px;
  }
}

@media (max-width: 768px) {
  body.page-boxed #sidebar-left {
    left: -230px;
  }

  body.page-boxed #back-top {
    right: 40px;
  }

  body.page-boxed.page-sidebar-right-show #header .header-right {
    right: 0px !important;
  }

  body.page-boxed.page-sidebar-right-show #header .header-right .navbar-toolbar .navbar-form input {
    min-width: 400px !important;
  }

  body.page-boxed.page-sidebar-right-show #sidebar-left,
  body.page-boxed.page-sidebar-right-show #sidebar-left:after {
    left: -250px;
  }
}

@media (max-width: 540px) {
  body.page-boxed.page-sidebar-right-show #header .header-right {
    left: -220px !important;
  }
}

/* ========================================================================
 * PAGE HEADER FIXED
 * ======================================================================== */

body.page-header-fixed .navbar-header,
body.page-header-fixed .header-right {
  position: fixed;
}

body.page-header-fixed .header-right {
  right: 0px;
  left: 220px;
}

body.page-header-fixed.page-sidebar-minimize .header-right,
body.page-header-fixed.page-sidebar-minimize-auto .header-right {
  left: 0px;
}

body.page-header-fixed.page-sidebar-minimize.page-sidebar-fixed .header-right,
body.page-header-fixed.page-sidebar-minimize-auto.page-sidebar-fixed .header-right {
  right: 0px;
}

body.page-header-fixed #sidebar-right .panel .panel-heading {
  position: fixed;
  z-index: 1000;
  top: 0px;
  right: 0px;
  width: 220px;
}

body.page-header-fixed #sidebar-right .panel .panel-body {
  margin-top: 53px;
}

@media (max-width: 768px) {
  body.page-header-fixed #header .header-right {
    left: 0px;
  }

  body.page-header-fixed #header .header-left {
    position: fixed;
  }

  body.page-header-fixed.page-sidebar-left-show .navbar-toolbar {
    left: 220px;
  }
}

/* ========================================================================
 * PAGE SIDEBAR FIXED
 * ======================================================================== */

body.page-sidebar-fixed #sidebar-left {
  position: fixed;
  left: 0px;
}

body.page-sidebar-fixed #sidebar-left .sidebar-content .close {
  display: none;
}

body.page-sidebar-fixed #sidebar-right {
  position: fixed;
}

body.page-sidebar-fixed.page-sidebar-minimize #sidebar-left .sidebar-menu:hover,
body.page-sidebar-fixed.page-sidebar-minimize-auto #sidebar-left .sidebar-menu:hover {
  min-width: 250px;
}

body.page-sidebar-fixed.page-sidebar-minimize #sidebar-left .sidebar-menu:hover > .active,
body.page-sidebar-fixed.page-sidebar-minimize #sidebar-left .sidebar-menu:hover .sidebar-category,
body.page-sidebar-fixed.page-sidebar-minimize-auto #sidebar-left .sidebar-menu:hover > .active,
body.page-sidebar-fixed.page-sidebar-minimize-auto #sidebar-left .sidebar-menu:hover .sidebar-category {
  width: 75px;
}

body.page-sidebar-fixed.page-sidebar-minimize #sidebar-left .sidebar-menu > .active:hover,
body.page-sidebar-fixed.page-sidebar-minimize-auto #sidebar-left .sidebar-menu > .active:hover {
  width: 250px;
}

@media (max-width: 768px) {
  body.page-sidebar-fixed.page-sidebar-left-show #header .header-right {
    left: 0px;
    right: -220px;
  }

  body.page-sidebar-fixed.page-sidebar-right-show #header .header-right {
    left: -220px;
    right: 220px;
  }

  body.page-sidebar-fixed #sidebar-left {
    left: -220px;
  }
}

/* ========================================================================
 * PAGE SIDEBAR MINIMIZE
 * ======================================================================== */

body.page-sidebar-minimize #header .header-left,
body.page-sidebar-minimize-auto #header .header-left {
  display: none;
}

body.page-sidebar-minimize #header .header-right,
body.page-sidebar-minimize-auto #header .header-right {
  left: 0;
  right: 0;
}

body.page-sidebar-minimize #header .header-right .navbar-minimize,
body.page-sidebar-minimize-auto #header .header-right .navbar-minimize {
  width: 75px;
  text-align: center;
  border-right: none;
}

body.page-sidebar-minimize #header .header-right .navbar-toolbar:before,
body.page-sidebar-minimize-auto #header .header-right .navbar-toolbar:before {
  left: 75px;
}

body.page-sidebar-minimize #header .header-right .navbar-toolbar .navbar-right .dropdown > a,
body.page-sidebar-minimize-auto #header .header-right .navbar-toolbar .navbar-right .dropdown > a {
  padding-bottom: 13px;
}

body.page-sidebar-minimize #header .header-right .navbar-toolbar .navbar-right .navbar-profile > a,
body.page-sidebar-minimize-auto #header .header-right .navbar-toolbar .navbar-right .navbar-profile > a {
  padding-bottom: 9px;
}

body.page-sidebar-minimize #header .header-right .navbar-toolbar .navbar-right .navbar-setting a,
body.page-sidebar-minimize-auto #header .header-right .navbar-toolbar .navbar-right .navbar-setting a {
  padding-bottom: 13px;
}

body.page-sidebar-minimize #header .header-right .navbar-toolbar .navbar-right .navbar-setting a:hover,
body.page-sidebar-minimize-auto #header .header-right .navbar-toolbar .navbar-right .navbar-setting a:hover {
  background-color: #fbfbfb;
}

body.page-sidebar-minimize #header .navbar-header,
body.page-sidebar-minimize-auto #header .navbar-header {
  width: 100%;
}

body.page-sidebar-minimize #header .navbar-header .logo,
body.page-sidebar-minimize-auto #header .navbar-header .logo {
  display: none;
}

body.page-sidebar-minimize #sidebar-left,
body.page-sidebar-minimize-auto #sidebar-left {
  width: 75px;
}

body.page-sidebar-minimize #sidebar-left:after,
body.page-sidebar-minimize-auto #sidebar-left:after {
  width: 75px;
}

body.page-sidebar-minimize #sidebar-left:hover .sidebar-menu,
body.page-sidebar-minimize-auto #sidebar-left:hover .sidebar-menu {
  width: 1025px !important;
}

body.page-sidebar-minimize #sidebar-left:hover .sidebar-menu > li,
body.page-sidebar-minimize-auto #sidebar-left:hover .sidebar-menu > li {
  width: 250px;
}

body.page-sidebar-minimize #sidebar-left:hover .sidebar-menu > li.sidebar-category,
body.page-sidebar-minimize #sidebar-left:hover .sidebar-menu > li.active,
body.page-sidebar-minimize-auto #sidebar-left:hover .sidebar-menu > li.sidebar-category,
body.page-sidebar-minimize-auto #sidebar-left:hover .sidebar-menu > li.active {
  width: 75px;
}

body.page-sidebar-minimize #sidebar-left:hover .sidebar-menu > li.active:hover,
body.page-sidebar-minimize-auto #sidebar-left:hover .sidebar-menu > li.active:hover {
  width: 250px;
}

body.page-sidebar-minimize #sidebar-left .sidebar-content .media .media-body,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-content .media .media-body {
  display: none;
}

body.page-sidebar-minimize #sidebar-left .sidebar-menu,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu {
  width: 75px !important;
}

body.page-sidebar-minimize #sidebar-left .sidebar-menu:after,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu:after {
  left: 37px;
}

body.page-sidebar-minimize #sidebar-left .sidebar-menu > li:hover,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu > li:hover {
  min-width: 220px;
  background-color: #1d1d1d;
}

body.page-sidebar-minimize #sidebar-left .sidebar-menu > li:hover > a > .text,
body.page-sidebar-minimize #sidebar-left .sidebar-menu > li:hover > a > .count,
body.page-sidebar-minimize #sidebar-left .sidebar-menu > li:hover > a > .label,
body.page-sidebar-minimize #sidebar-left .sidebar-menu > li:hover > a > .badge,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu > li:hover > a > .text,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu > li:hover > a > .count,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu > li:hover > a > .label,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu > li:hover > a > .badge {
  display: inline-block;
}

body.page-sidebar-minimize #sidebar-left .sidebar-menu > li:hover.submenu,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu > li:hover.submenu {
  min-width: 250px;
}

body.page-sidebar-minimize #sidebar-left .sidebar-menu > li:hover.submenu > ul,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu > li:hover.submenu > ul {
  display: block !important;
  background-color: #222222;
}

body.page-sidebar-minimize #sidebar-left .sidebar-menu > li:hover.submenu > ul > li > ul,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu > li:hover.submenu > ul > li > ul {
  background-color: #222222;
}

body.page-sidebar-minimize #sidebar-left .sidebar-menu > li:after,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu > li:after {
  left: 37px;
}

body.page-sidebar-minimize #sidebar-left .sidebar-menu > li > a > .icon,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu > li > a > .icon {
  min-width: 75px;
  margin-left: 6px;
  margin-right: 29px;
}

body.page-sidebar-minimize #sidebar-left .sidebar-menu > li > a > .icon:after,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu > li > a > .icon:after {
  left: 36px;
}

body.page-sidebar-minimize #sidebar-left .sidebar-menu > li > a > .icon i,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu > li > a > .icon i {
  line-height: 30px;
  width: 34px;
  font-size: 15px;
}

body.page-sidebar-minimize #sidebar-left .sidebar-menu > li > a > .text,
body.page-sidebar-minimize #sidebar-left .sidebar-menu > li > a > .count,
body.page-sidebar-minimize #sidebar-left .sidebar-menu > li > a > .plus,
body.page-sidebar-minimize #sidebar-left .sidebar-menu > li > a > .label,
body.page-sidebar-minimize #sidebar-left .sidebar-menu > li > a > .badge,
body.page-sidebar-minimize #sidebar-left .sidebar-menu > li > a > .arrow,
body.page-sidebar-minimize #sidebar-left .sidebar-menu > li > a > .selected,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu > li > a > .text,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu > li > a > .count,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu > li > a > .plus,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu > li > a > .label,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu > li > a > .badge,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu > li > a > .arrow,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu > li > a > .selected {
  display: none;
}

body.page-sidebar-minimize #sidebar-left .sidebar-menu > li > a > .label,
body.page-sidebar-minimize #sidebar-left .sidebar-menu > li > a > .badge,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu > li > a > .label,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu > li > a > .badge {
  margin-top: 10px;
}

body.page-sidebar-minimize #sidebar-left .sidebar-menu > li > a > .arrow,
body.page-sidebar-minimize #sidebar-left .sidebar-menu > li > a > .plus,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu > li > a > .arrow,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu > li > a > .plus {
  margin-top: 3px;
}

body.page-sidebar-minimize #sidebar-left .sidebar-menu > li > a > .count,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu > li > a > .count {
  margin-top: 7px;
}

body.page-sidebar-minimize #sidebar-left .sidebar-menu > li.sidebar-category,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu > li.sidebar-category {
  text-align: center;
  font-size: 12px;
  padding: 0px;
  min-width: 75px;
  background-color: #323232;
}

body.page-sidebar-minimize #sidebar-left .sidebar-menu > li.sidebar-category .pull-right,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu > li.sidebar-category .pull-right {
  display: none;
}

body.page-sidebar-minimize #sidebar-left .sidebar-menu > li.sidebar-category:hover,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu > li.sidebar-category:hover {
  width: 75px !important;
}

body.page-sidebar-minimize #sidebar-left .sidebar-menu > li.submenu > ul,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu > li.submenu > ul {
  z-index: 1000;
}

body.page-sidebar-minimize #sidebar-left .sidebar-menu > li.active,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu > li.active {
  min-width: 75px;
}

body.page-sidebar-minimize #sidebar-left .sidebar-menu .submenu:hover > ul,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu .submenu:hover > ul {
  display: block !important;
}

body.page-sidebar-minimize #sidebar-left .sidebar-menu .submenu > ul,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu .submenu > ul {
  position: absolute;
  left: 75px;
  top: 42px;
  list-style: none;
  min-width: 175px;
  height: auto !important;
  padding-left: 0;
  display: none !important;
  -moz-transition: none;
  -o-transition: none;
  -webkit-transition: none;
  transition: none;
}

body.page-sidebar-minimize #sidebar-left .sidebar-menu .submenu > ul > li:last-child a,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu .submenu > ul > li:last-child a {
  padding-bottom: 10px;
}

body.page-sidebar-minimize #sidebar-left .sidebar-menu .submenu > ul > li.submenu:hover > ul,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu .submenu > ul > li.submenu:hover > ul {
  display: block !important;
}

body.page-sidebar-minimize #sidebar-left .sidebar-menu .submenu > ul > li.submenu > ul,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu .submenu > ul > li.submenu > ul {
  top: 0px !important;
  left: 175px;
  display: none;
  border-top: none;
}

body.page-sidebar-minimize #sidebar-left .sidebar-menu .submenu ul:after,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu .submenu ul:after {
  left: 13px;
  top: 0px;
}

body.page-sidebar-minimize #sidebar-left .sidebar-menu .submenu ul li:after,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu .submenu ul li:after {
  left: 10px;
}

body.page-sidebar-minimize #sidebar-left .sidebar-menu .submenu ul li a:before,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu .submenu ul li a:before {
  margin-left: -7px;
}

body.page-sidebar-minimize #sidebar-left .sidebar-menu .submenu.active > ul,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu .submenu.active > ul {
  display: none !important;
}

body.page-sidebar-minimize #sidebar-left .sidebar-menu .submenu.submenu-arrow a .icon,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu .submenu.submenu-arrow a .icon {
  z-index: 1;
}

body.page-sidebar-minimize #sidebar-left .sidebar-menu .submenu.submenu-arrow a .icon:after,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu .submenu.submenu-arrow a .icon:after {
  content: "___";
  position: absolute;
  right: 0px;
  top: 3px;
  color: #373737;
  z-index: -1;
}

body.page-sidebar-minimize #sidebar-left .sidebar-menu .submenu.submenu-arrow .submenu-header,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu .submenu.submenu-arrow .submenu-header {
  display: block;
  height: 40px;
  line-height: 38px;
  font-size: 12px;
  text-transform: uppercase;
  background-color: #373737;
  padding: 0px 30px;
  -moz-border-radius: 0px 3px 0px 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px 3px 0px 0px;
}

body.page-sidebar-minimize #sidebar-left .sidebar-menu .submenu.submenu-arrow .submenu-header:after,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu .submenu.submenu-arrow .submenu-header:after {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  background-color: transparent;
}

body.page-sidebar-minimize #sidebar-left .sidebar-menu li.active > a:after,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu li.active > a:after {
  border-right: none;
}

body.page-sidebar-minimize #sidebar-left .sidebar-footer,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-footer {
  display: none;
}

body.page-sidebar-minimize #sidebar-left .hidden-sidebar-minimize,
body.page-sidebar-minimize-auto #sidebar-left .hidden-sidebar-minimize {
  display: none;
}

body.page-sidebar-minimize #sidebar-left.sidebar-box .sidebar-menu .submenu > ul,
body.page-sidebar-minimize #sidebar-left.sidebar-rounded .sidebar-menu .submenu > ul,
body.page-sidebar-minimize #sidebar-left.sidebar-circle .sidebar-menu .submenu > ul,
body.page-sidebar-minimize-auto #sidebar-left.sidebar-box .sidebar-menu .submenu > ul,
body.page-sidebar-minimize-auto #sidebar-left.sidebar-rounded .sidebar-menu .submenu > ul,
body.page-sidebar-minimize-auto #sidebar-left.sidebar-circle .sidebar-menu .submenu > ul {
  top: 46px !important;
}

body.page-sidebar-minimize #sidebar-left .sidebar-category:before,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-category:before {
  content: '';
  border: 1px solid #323232;
}

body.page-sidebar-minimize #sidebar-left .sidebar-category span:first-child,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-category span:first-child {
  display: none;
}

body.page-sidebar-minimize #page-content,
body.page-sidebar-minimize-auto #page-content {
  margin-left: 75px;
}

@media (max-width: 800px) {
  body.page-sidebar-minimize #header .navbar-toolbar .navbar-form input,
  body.page-sidebar-minimize-auto #header .navbar-toolbar .navbar-form input {
    min-width: 400px;
  }

  body.page-sidebar-minimize #page-content,
  body.page-sidebar-minimize-auto #page-content {
    margin-right: 0px;
  }

  body.page-sidebar-minimize #page-content .header-content .breadcrumb-wrapper,
  body.page-sidebar-minimize-auto #page-content .header-content .breadcrumb-wrapper {
    display: block;
  }
}

@media (max-width: 768px) {
  body.page-sidebar-minimize .header-left,
  body.page-sidebar-minimize-auto .header-left {
    display: block !important;
  }
}

/* ========================================================================
 * PAGE SIDEBAR LEFT SHOW
 * ======================================================================== */

@media (max-width: 800px) {
  body.page-sidebar-left-show {
    overflow-x: hidden;
  }

  body.page-sidebar-left-show #header .header-right {
    right: 0px;
  }

  body.page-sidebar-left-show #header .navbar-toolbar .navbar-form input {
    min-width: 225px;
  }

  body.page-sidebar-left-show #page-content {
    margin-right: -220px;
  }
}

@media (max-width: 768px) {
  body.page-sidebar-left-show #header {
    left: 220px;
  }

  body.page-sidebar-left-show #header .navbar-toolbar .navbar-form input {
    min-width: 400px;
  }

  body.page-sidebar-left-show #sidebar-left {
    top: 0px;
    left: 0px;
  }

  body.page-sidebar-left-show #sidebar-left:after {
    left: 0px;
  }

  body.page-sidebar-left-show #page-content {
    margin-left: 220px !important;
  }
}

/* ========================================================================
 * PAGE SIDEBAR RIGHT SHOW
 * ======================================================================== */

body.page-sidebar-right-show #header .header-right {
  right: 220px !important;
}

body.page-sidebar-right-show #sidebar-right {
  right: 0px;
  visibility: inherit;
}

body.page-sidebar-right-show #page-content {
  margin-right: 220px !important;
}

body.page-sidebar-right-show #back-top {
  right: 250px;
}

@media (max-width: 800px) {
  body.page-sidebar-right-show #header .header-right {
    left: 0px;
    right: 220px;
  }

  body.page-sidebar-right-show #header .navbar-toolbar .navbar-form input {
    min-width: 225px;
  }

  body.page-sidebar-right-show #page-content {
    margin-left: 75px;
  }

  body.page-sidebar-right-show #page-content .header-content .breadcrumb-wrapper {
    display: none;
  }

  body.page-sidebar-right-show #sidebar-left {
    left: 0px;
  }

  body.page-sidebar-right-show #sidebar-left:after {
    left: -220px;
  }

  body.page-sidebar-right-show #back-top {
    right: 250px !important;
  }
}

@media (max-width: 768px) {
  body.page-sidebar-right-show #header .header-left,
  body.page-sidebar-right-show #header .header-right {
    left: -220px;
  }

  body.page-sidebar-right-show #header .navbar-toolbar .navbar-form input {
    min-width: 400px;
  }

  body.page-sidebar-right-show #sidebar-left {
    left: -220px;
  }

  body.page-sidebar-right-show #sidebar-right {
    top: 0px;
    right: 0px;
    visibility: inherit;
  }

  body.page-sidebar-right-show #page-content {
    margin-left: -220px !important;
    margin-right: 0px !important;
  }

  body.page-sidebar-right-show #page-content .header-content .breadcrumb-wrapper {
    display: block;
  }
}

@media (max-width: 640px) {
  body.page-sidebar-right-show #header .navbar-toolbar .navbar-form input {
    min-width: 270px;
  }
}

/* ========================================================================
 * PAGE FOOTER FIXED
 * ======================================================================== */

body.page-footer-fixed.page-sidebar-minimize #page-content .footer-content,
body.page-footer-fixed.page-sidebar-minimize-auto #page-content .footer-content {
  left: 75px;
}

body.page-footer-fixed #page-content .body-content {
  margin-bottom: 40px;
}

body.page-footer-fixed #page-content .footer-content {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 220px;
  z-index: 1000;
}

body.page-footer-fixed #back-top {
  bottom: 65px;
}

@media (max-width: 768px) {
  body.page-footer-fixed #page-content .footer-content {
    left: 0px;
  }

  body.page-footer-fixed.page-sidebar-left-show #page-content .footer-content {
    left: 220px;
    right: -220px;
  }

  body.page-footer-fixed.page-sidebar-right-show #page-content .footer-content {
    right: 220px;
    left: -220px;
  }
}

/* ========================================================================
 * HEADER
 * ======================================================================== */

#header {
  height: 50px;
  margin-bottom: 0;
  border: none;
  position: relative;
  z-index: 300;
}

@media (max-width: 800px) {
  #header .header-right {
    right: 0px;
  }

  #header .navbar-toolbar .navbar-form input {
    min-width: 225px;
  }
}

@media (max-width: 768px) {
  #header .navbar-toolbar .navbar-form input {
    min-width: 400px;
  }

  #header .header-left,
  #header .header-right {
    display: block;
  }

  #header .header-left {
    width: 100%;
  }

  #header .header-right {
    top: 50px;
    left: 0px;
    right: 0px;
  }

  #header .header-right .navbar-form {
    margin: 9px 10px 2px;
  }

  #header .navbar-minimize-mobile,
  #header .navbar-header {
    float: left;
    display: block;
    position: relative;
  }

  #header .navbar-left {
    float: left;
  }

  #header .navbar-right {
    float: right;
  }

  #header .navbar-right .dropdown-menu {
    right: 0px;
    left: inherit;
  }

  #header .nav > li {
    float: left;
  }

  #header .navbar-minimize,
  #header .navbar-setting {
    display: none;
  }

  #header .navbar-nav {
    margin: 0px;
  }

  #header .navbar-minimize-mobile {
    position: absolute;
    vertical-align: top;
    text-align: center;
    height: 99%;
    line-height: 43px;
    cursor: pointer;
    padding-top: 8px;
    width: 65px;
    z-index: 1;
  }

  #header .navbar-minimize-mobile.left {
    left: 0px;
  }

  #header .navbar-minimize-mobile.right {
    right: 0px;
  }

  #header .navbar-minimize-mobile i {
    font-size: 25px;
  }

  #header .navbar-header {
    width: 100%;
    z-index: -1;
  }

  #header .navbar-header .navbar-brand {
    width: 100%;
  }

  #header .navbar-header .navbar-brand .logo {
    display: block !important;
    margin: 0px auto;
  }

  #header .navbar-form {
    margin-left: 10px;
    margin-right: 10px;
  }

  #header .navbar-form .form-group {
    margin-bottom: 0px;
  }
}

@media (max-width: 600px) {
  #header .navbar-toolbar .navbar-form input {
    min-width: 263px;
  }

  body.page-sidebar-left-show #header .navbar-toolbar .navbar-form input {
    min-width: 270px;
  }
}

@media (max-width: 480px) {
  #header .navbar-search {
    display: none;
  }

  #header .navbar-toolbar .navbar-right .dropdown-menu {
    right: 0px !important;
  }
}

@media (max-width: 360px) {
  #header .navbar-right .navbar-notification .dropdown-menu {
    right: -45px;
  }

  #header .navbar-right .navbar-message .dropdown-menu {
    right: -95px;
  }

  #header .navbar-toolbar .navbar-right .navbar-message .dropdown-menu {
    right: -115px !important;
  }

  #header .navbar-toolbar .navbar-right .navbar-notification .dropdown-menu {
    right: -65px !important;
  }

  #header .navbar-left .navbar-search {
    display: none !important;
  }
}

/* ========================================================================
 * HEADER LEFT
 * ======================================================================== */

.header-left {
  float: left;
  position: relative;
}

.header-left .navbar-header {
  height: 51px;
  width: 220px;
  left: 0;
}

.header-left .navbar-header .navbar-brand {
  padding: 0;
  text-align: center;
  width: 100%;
  color: white;
  vertical-align: middle;
  font-size: 20px;
  line-height: 50px;
  text-transform: capitalize;
}

.header-left .navbar-header .navbar-brand img {
  margin: 0px auto;
}

.header-left .navbar-minimize-mobile {
  color: #FFFFFF;
  display: none;
}

/* ========================================================================
 * HEADER RIGHT
 * ======================================================================== */

.header-right {
  float: left;
  position: absolute;
  left: 220px;
  right: 0px;
}

.header-right .navbar-toolbar:before {
  border-bottom: 1px solid #DDD;
  position: absolute;
  display: block;
  content: "";
  bottom: -1px;
  left: 0px;
  right: 0px;
}

.header-right .navbar {
  border: none;
}

/* ========================================================================
 * NAVBAR TOOLBAR
 * ======================================================================== */

.navbar-toolbar {
  border-bottom: none;
  margin-bottom: 0px;
  background-color: #FFFFFF;
}

.navbar-toolbar .navbar-left .navbar-minimize {
  border-right: 1px solid #DDD;
}

.navbar-toolbar .navbar-left .navbar-minimize a {
  padding-top: 16px;
  padding-bottom: 13px;
}

.navbar-toolbar .navbar-left .navbar-minimize a i {
  font-size: 24px;
  margin-top: -3px;
}

.navbar-toolbar .navbar-left .navbar-search .trigger-search {
  font-size: 22px;
  color: #777;
  display: none;
  padding: 14px;
}

.navbar-toolbar .navbar-right .dropdown > a {
  padding-top: 16px;
  padding-bottom: 12px;
}

.navbar-toolbar .navbar-right .dropdown > a .count {
  position: absolute;
  top: 9px;
  right: 6px;
  padding: 0.4em 0.6em;
}

.navbar-toolbar .navbar-right .dropdown > a > i {
  position: relative;
  font-size: 22px;
  color: #777;
}

.navbar-toolbar .navbar-right .navbar-profile > a {
  padding-top: 8px;
  padding-right: 11px;
  padding-bottom: 8px;
}

.navbar-toolbar .navbar-right .navbar-profile > a .meta {
  display: table;
  width: 100%;
  line-height: 30px;
}

.navbar-toolbar .navbar-right .navbar-profile > a .meta .avatar {
  display: table-cell;
  vertical-align: middle;
  width: 35px;
  height: 35px;
}

.navbar-toolbar .navbar-right .navbar-profile > a .meta .avatar img {
  display: block;
  width: 100%;
}

.navbar-toolbar .navbar-right .navbar-profile > a .meta .text {
  font-size: 13px;
  font-weight: 600;
  padding-left: 5px;
}

.navbar-toolbar .navbar-right .navbar-profile > a .meta .caret {
  margin-left: 5px;
  color: gray;
}

.navbar-toolbar .navbar-right .navbar-profile .dropdown-menu {
  width: 180px;
  height: inherit;
  min-height: 0;
}

.navbar-toolbar .navbar-right .navbar-profile .dropdown-menu .dropdown-header {
  box-shadow: none;
  border-top: 1px solid #DDD;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

.navbar-toolbar .navbar-right .navbar-profile .dropdown-menu .dropdown-header:first-child {
  border-top: none;
}

.navbar-toolbar .navbar-right .navbar-profile .dropdown-menu > li > a {
  white-space: normal;
}

.navbar-toolbar .navbar-right .navbar-profile .dropdown-menu li:first-child a {
  margin-top: 9px;
}

.navbar-toolbar .navbar-right .navbar-profile .dropdown-menu li a {
  color: #999;
  padding: 3px 10px;
}

.navbar-toolbar .navbar-right .navbar-profile .dropdown-menu li a:hover {
  color: #808080;
}

.navbar-toolbar .navbar-right .navbar-profile .dropdown-menu li a i {
  min-width: 20px;
}

.navbar-toolbar .navbar-right .navbar-profile .dropdown-menu li a .label {
  margin-top: 2px;
}

.navbar-toolbar .navbar-right .navbar-setting {
  border-left: 1px solid #DDD;
}

.navbar-toolbar .navbar-right .navbar-setting:visited {
  background-color: transparent;
}

.navbar-toolbar .navbar-right .navbar-setting a {
  padding-right: 15px;
  padding-top: 16px;
  padding-bottom: 12px;
}

.navbar-toolbar .navbar-right .navbar-setting a i {
  z-index: 2;
  position: relative;
  font-size: 22px;
}

.navbar-toolbar .navbar-right .dropdown-menu {
  top: auto;
  width: 300px;
  padding: 0;
  position: absolute;
  margin-top: 5px;
  background-color: #FFF;
  border: none;
  border-radius: 3px;
  min-height: 355px;
  overflow: hidden;
  -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
}

.navbar-toolbar .navbar-right .dropdown-menu .dropdown-header {
  display: table;
  width: 100%;
  background-color: #F7F7F7;
  border-bottom: 1px solid #E6EBED;
  padding: 0 15px !important;
  height: 36px;
  line-height: 36px;
  color: #5E5E5E;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  font-size: 13px;
  font-weight: 600;
}

.navbar-toolbar .navbar-right .dropdown-menu .dropdown-header .title {
  display: table-cell;
  font-weight: 600;
}

.navbar-toolbar .navbar-right .dropdown-menu .dropdown-header .option {
  display: table-cell;
  font-weight: 400;
}

.navbar-toolbar .navbar-right .dropdown-menu .dropdown-body {
  height: 281px;
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
}

.navbar-toolbar .navbar-right .dropdown-menu .dropdown-footer {
  display: table;
  width: 100%;
  background-color: #F7F7F7;
  border-top: 1px solid #DDD;
  border-bottom: 1px solid #DDD;
  padding: 0 15px !important;
  height: 36px;
  line-height: 36px;
  color: #5E5E5E;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  font-size: 13px;
  font-weight: 600;
  position: absolute;
  bottom: 0;
  text-align: center;
  -moz-border-radius: 0px 0px 3px 3px;
  -webkit-border-radius: 0px;
  border-radius: 0px 0px 3px 3px;
}

.navbar-toolbar .navbar-form {
  padding: 0;
  margin-left: 15px;
  margin-right: 15px;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.navbar-toolbar .navbar-form input {
  box-shadow: none;
  min-width: 350px;
}

.navbar-toolbar .navbar-form .form-group {
  padding: 0px;
}

.navbar-toolbar .sidebar-minimize i {
  color: #777;
}

@media (max-width: 640px) {
  .navbar-toolbar .navbar-form {
    padding: 7px -15px 2px !important;
    margin: 7px 10px 2px !important;
  }

  .navbar-toolbar .navbar-form input {
    min-width: 275px;
  }
}

/* ========================================================================
 * NAVBAR MESSAGE
 * ======================================================================== */

.navbar-message form {
  padding: 6px 15px;
  background-color: #FAFAFA;
  border-bottom: 1px solid #E6EBED;
}

.navbar-message form .has-icon .form-control-icon {
  position: absolute;
  z-index: 5;
  top: 0;
  right: 0;
  width: 34px;
  line-height: 33px;
  text-align: center;
  color: #777;
}

.navbar-message > a {
  position: relative;
}

.navbar-message .media-list {
  height: 225px;
  width: 100%;
}

.navbar-message .media-list .media .media-body .media-heading {
  font-weight: 400;
}

/* ========================================================================
 * NAVBAR NOTIFICATION
 * ======================================================================== */

.navbar-notification .media-list i {
  font-size: 30px;
}

.navbar-message .indicator,
.navbar-notification .indicator {
  text-align: center;
}

.navbar-message .indicator .spinner,
.navbar-notification .indicator .spinner {
  left: 26%;
  width: 200px;
  font-size: 13px;
  line-height: 17px;
  color: #999;
}

/* ========================================================================
 * NAVBAR COLORS
 * ======================================================================== */

.navbar-dark {
  background-color: #2A2A2A;
  color: #777;
}

.navbar-dark:before {
  border-bottom: none !important;
}

.navbar-dark .sidebar-minimize i {
  color: #FFFFFF;
}

.navbar-dark .navbar-left .navbar-minimize {
  border-right: none;
}

.navbar-dark .navbar-left .navbar-minimize a:hover,
.navbar-dark .navbar-left .navbar-minimize a:focus,
.navbar-dark .navbar-left .navbar-minimize a:active {
  background-color: #505050;
}

.navbar-dark .navbar-left .navbar-minimize a:hover i,
.navbar-dark .navbar-left .navbar-minimize a:focus i,
.navbar-dark .navbar-left .navbar-minimize a:active i {
  color: #FFFFFF;
}

.navbar-dark .navbar-left .navbar-minimize a i {
  color: #777;
}

.navbar-dark .navbar-left .navbar-search .navbar-form input {
  background-color: #505050 !important;
  color: #777 !important;
}

.navbar-dark .navbar-left .navbar-search .navbar-form input::-webkit-input-placeholder {
  color: #777;
}

.navbar-dark .navbar-left .navbar-search .navbar-form input:-moz-placeholder {
  color: #777;
}

.navbar-dark .navbar-left .navbar-search .navbar-form input::-moz-placeholder {
  color: #777;
}

.navbar-dark .navbar-left .navbar-search .navbar-form input:-ms-input-placeholder {
  color: #777;
}

.navbar-dark .navbar-left .navbar-search .navbar-form button[type=submit]:before {
  color: #777;
}

.navbar-dark .navbar-right .dropdown > a:hover,
.navbar-dark .navbar-right .dropdown > a:focus,
.navbar-dark .navbar-right .dropdown > a:active,
.navbar-dark .navbar-right .dropdown > a:visited {
  background-color: #505050 !important;
}

.navbar-dark .navbar-right .dropdown > a > i {
  color: #777;
}

.navbar-dark .navbar-right .navbar-setting {
  border-left: none;
}

.navbar-dark .navbar-right .navbar-setting a:hover,
.navbar-dark .navbar-right .navbar-setting a:focus,
.navbar-dark .navbar-right .navbar-setting a:active,
.navbar-dark .navbar-right .navbar-setting a:visited {
  background-color: #505050 !important;
}

.navbar-dark .navbar-right .navbar-setting a i {
  color: #777;
}

.navbar-dark .navbar-right .navbar-profile > a .meta .text,
.navbar-dark .navbar-right .navbar-profile > a .meta .caret {
  color: #777;
}

.navbar-dark .navbar-right .navbar-chat {
  border-left: none;
}

.navbar-dark .navbar-right .navbar-chat a i {
  color: #777;
}

.navbar-dark .navbar-form input {
  border: 1px solid #2A2A2A !important;
}

.navbar-dark .navbar-form input:focus,
.navbar-dark .navbar-form input:active {
  border: 1px solid #2A2A2A !important;
}

.navbar-dark .navbar-form .form-group .btn {
  background-color: #2A2A2A;
  border: 1px solid #2A2A2A;
}

.navbar-primary {
  background-color: #00B1E1;
  color: #FFFFFF;
}

.navbar-primary:before {
  border-bottom: none !important;
}

.navbar-primary .sidebar-minimize i {
  color: #FFFFFF;
}

.navbar-primary .navbar-left .navbar-minimize {
  border-right: none;
}

.navbar-primary .navbar-left .navbar-minimize a:hover,
.navbar-primary .navbar-left .navbar-minimize a:focus,
.navbar-primary .navbar-left .navbar-minimize a:active {
  background-color: #2fd3ff;
}

.navbar-primary .navbar-left .navbar-minimize a:hover i,
.navbar-primary .navbar-left .navbar-minimize a:focus i,
.navbar-primary .navbar-left .navbar-minimize a:active i {
  color: #FFFFFF;
}

.navbar-primary .navbar-left .navbar-minimize a i {
  color: #FFFFFF;
}

.navbar-primary .navbar-left .navbar-search .navbar-form input {
  background-color: #2fd3ff !important;
  color: #FFFFFF !important;
}

.navbar-primary .navbar-left .navbar-search .navbar-form input::-webkit-input-placeholder {
  color: #FFFFFF;
}

.navbar-primary .navbar-left .navbar-search .navbar-form input:-moz-placeholder {
  color: #FFFFFF;
}

.navbar-primary .navbar-left .navbar-search .navbar-form input::-moz-placeholder {
  color: #FFFFFF;
}

.navbar-primary .navbar-left .navbar-search .navbar-form input:-ms-input-placeholder {
  color: #FFFFFF;
}

.navbar-primary .navbar-left .navbar-search .navbar-form button[type=submit]:before {
  color: #FFFFFF;
}

.navbar-primary .navbar-right .dropdown > a:hover,
.navbar-primary .navbar-right .dropdown > a:focus,
.navbar-primary .navbar-right .dropdown > a:active,
.navbar-primary .navbar-right .dropdown > a:visited {
  background-color: #2fd3ff !important;
}

.navbar-primary .navbar-right .dropdown > a > i {
  color: #FFFFFF;
}

.navbar-primary .navbar-right .navbar-setting {
  border-left: none;
}

.navbar-primary .navbar-right .navbar-setting a:hover,
.navbar-primary .navbar-right .navbar-setting a:focus,
.navbar-primary .navbar-right .navbar-setting a:active,
.navbar-primary .navbar-right .navbar-setting a:visited {
  background-color: #2fd3ff !important;
}

.navbar-primary .navbar-right .navbar-setting a i {
  color: #FFFFFF;
}

.navbar-primary .navbar-right .navbar-profile > a .meta .text,
.navbar-primary .navbar-right .navbar-profile > a .meta .caret {
  color: #FFFFFF;
}

.navbar-primary .navbar-right .navbar-chat {
  border-left: none;
}

.navbar-primary .navbar-right .navbar-chat a i {
  color: #FFFFFF;
}

.navbar-primary .navbar-form input {
  border: 1px solid #00B1E1 !important;
}

.navbar-primary .navbar-form input:focus,
.navbar-primary .navbar-form input:active {
  border: 1px solid #00B1E1 !important;
}

.navbar-primary .navbar-form .form-group .btn {
  background-color: #00B1E1;
  border: 1px solid #00B1E1;
}

.navbar-success {
  background-color: #8CC152;
  color: #FFFFFF;
}

.navbar-success:before {
  border-bottom: none !important;
}

.navbar-success .sidebar-minimize i {
  color: #FFFFFF;
}

.navbar-success .navbar-left .navbar-minimize {
  border-right: none;
}

.navbar-success .navbar-left .navbar-minimize a:hover,
.navbar-success .navbar-left .navbar-minimize a:focus,
.navbar-success .navbar-left .navbar-minimize a:active {
  background-color: #b1d58a;
}

.navbar-success .navbar-left .navbar-minimize a:hover i,
.navbar-success .navbar-left .navbar-minimize a:focus i,
.navbar-success .navbar-left .navbar-minimize a:active i {
  color: #FFFFFF;
}

.navbar-success .navbar-left .navbar-minimize a i {
  color: #FFFFFF;
}

.navbar-success .navbar-left .navbar-search .navbar-form input {
  background-color: #b1d58a !important;
  color: #FFFFFF !important;
}

.navbar-success .navbar-left .navbar-search .navbar-form input::-webkit-input-placeholder {
  color: #FFFFFF;
}

.navbar-success .navbar-left .navbar-search .navbar-form input:-moz-placeholder {
  color: #FFFFFF;
}

.navbar-success .navbar-left .navbar-search .navbar-form input::-moz-placeholder {
  color: #FFFFFF;
}

.navbar-success .navbar-left .navbar-search .navbar-form input:-ms-input-placeholder {
  color: #FFFFFF;
}

.navbar-success .navbar-left .navbar-search .navbar-form button[type=submit]:before {
  color: #FFFFFF;
}

.navbar-success .navbar-right .dropdown > a:hover,
.navbar-success .navbar-right .dropdown > a:focus,
.navbar-success .navbar-right .dropdown > a:active,
.navbar-success .navbar-right .dropdown > a:visited {
  background-color: #b1d58a !important;
}

.navbar-success .navbar-right .dropdown > a > i {
  color: #FFFFFF;
}

.navbar-success .navbar-right .navbar-setting {
  border-left: none;
}

.navbar-success .navbar-right .navbar-setting a:hover,
.navbar-success .navbar-right .navbar-setting a:focus,
.navbar-success .navbar-right .navbar-setting a:active,
.navbar-success .navbar-right .navbar-setting a:visited {
  background-color: #b1d58a !important;
}

.navbar-success .navbar-right .navbar-setting a i {
  color: #FFFFFF;
}

.navbar-success .navbar-right .navbar-profile > a .meta .text,
.navbar-success .navbar-right .navbar-profile > a .meta .caret {
  color: #FFFFFF;
}

.navbar-success .navbar-right .navbar-chat {
  border-left: none;
}

.navbar-success .navbar-right .navbar-chat a i {
  color: #FFFFFF;
}

.navbar-success .navbar-form input {
  border: 1px solid #8CC152 !important;
}

.navbar-success .navbar-form input:focus,
.navbar-success .navbar-form input:active {
  border: 1px solid #8CC152 !important;
}

.navbar-success .navbar-form .form-group .btn {
  background-color: #8CC152;
  border: 1px solid #8CC152;
}

.navbar-info {
  background-color: #63D3E9;
  color: #FFFFFF;
}

.navbar-info:before {
  border-bottom: none !important;
}

.navbar-info .sidebar-minimize i {
  color: #FFFFFF;
}

.navbar-info .navbar-left .navbar-minimize {
  border-right: none;
}

.navbar-info .navbar-left .navbar-minimize a:hover,
.navbar-info .navbar-left .navbar-minimize a:focus,
.navbar-info .navbar-left .navbar-minimize a:active {
  background-color: #a6e6f2;
}

.navbar-info .navbar-left .navbar-minimize a:hover i,
.navbar-info .navbar-left .navbar-minimize a:focus i,
.navbar-info .navbar-left .navbar-minimize a:active i {
  color: #FFFFFF;
}

.navbar-info .navbar-left .navbar-minimize a i {
  color: #FFFFFF;
}

.navbar-info .navbar-left .navbar-search .navbar-form input {
  background-color: #a6e6f2 !important;
  color: #FFFFFF !important;
}

.navbar-info .navbar-left .navbar-search .navbar-form input::-webkit-input-placeholder {
  color: #FFFFFF;
}

.navbar-info .navbar-left .navbar-search .navbar-form input:-moz-placeholder {
  color: #FFFFFF;
}

.navbar-info .navbar-left .navbar-search .navbar-form input::-moz-placeholder {
  color: #FFFFFF;
}

.navbar-info .navbar-left .navbar-search .navbar-form input:-ms-input-placeholder {
  color: #FFFFFF;
}

.navbar-info .navbar-left .navbar-search .navbar-form button[type=submit]:before {
  color: #FFFFFF;
}

.navbar-info .navbar-right .dropdown > a:hover,
.navbar-info .navbar-right .dropdown > a:focus,
.navbar-info .navbar-right .dropdown > a:active,
.navbar-info .navbar-right .dropdown > a:visited {
  background-color: #a6e6f2 !important;
}

.navbar-info .navbar-right .dropdown > a > i {
  color: #FFFFFF;
}

.navbar-info .navbar-right .navbar-setting {
  border-left: none;
}

.navbar-info .navbar-right .navbar-setting a:hover,
.navbar-info .navbar-right .navbar-setting a:focus,
.navbar-info .navbar-right .navbar-setting a:active,
.navbar-info .navbar-right .navbar-setting a:visited {
  background-color: #a6e6f2 !important;
}

.navbar-info .navbar-right .navbar-setting a i {
  color: #FFFFFF;
}

.navbar-info .navbar-right .navbar-profile > a .meta .text,
.navbar-info .navbar-right .navbar-profile > a .meta .caret {
  color: #FFFFFF;
}

.navbar-info .navbar-right .navbar-chat {
  border-left: none;
}

.navbar-info .navbar-right .navbar-chat a i {
  color: #FFFFFF;
}

.navbar-info .navbar-form input {
  border: 1px solid #63D3E9 !important;
}

.navbar-info .navbar-form input:focus,
.navbar-info .navbar-form input:active {
  border: 1px solid #63D3E9 !important;
}

.navbar-info .navbar-form .form-group .btn {
  background-color: #63D3E9;
  border: 1px solid #63D3E9;
}

.navbar-warning {
  background-color: #F6BB42;
  color: #FFFFFF;
}

.navbar-warning:before {
  border-bottom: none !important;
}

.navbar-warning .sidebar-minimize i {
  color: #FFFFFF;
}

.navbar-warning .navbar-left .navbar-minimize {
  border-right: none;
}

.navbar-warning .navbar-left .navbar-minimize a:hover,
.navbar-warning .navbar-left .navbar-minimize a:focus,
.navbar-warning .navbar-left .navbar-minimize a:active {
  background-color: #f9d58b;
}

.navbar-warning .navbar-left .navbar-minimize a:hover i,
.navbar-warning .navbar-left .navbar-minimize a:focus i,
.navbar-warning .navbar-left .navbar-minimize a:active i {
  color: #FFFFFF;
}

.navbar-warning .navbar-left .navbar-minimize a i {
  color: #FFFFFF;
}

.navbar-warning .navbar-left .navbar-search .navbar-form input {
  background-color: #f9d58b !important;
  color: #FFFFFF !important;
}

.navbar-warning .navbar-left .navbar-search .navbar-form input::-webkit-input-placeholder {
  color: #FFFFFF;
}

.navbar-warning .navbar-left .navbar-search .navbar-form input:-moz-placeholder {
  color: #FFFFFF;
}

.navbar-warning .navbar-left .navbar-search .navbar-form input::-moz-placeholder {
  color: #FFFFFF;
}

.navbar-warning .navbar-left .navbar-search .navbar-form input:-ms-input-placeholder {
  color: #FFFFFF;
}

.navbar-warning .navbar-left .navbar-search .navbar-form button[type=submit]:before {
  color: #FFFFFF;
}

.navbar-warning .navbar-right .dropdown > a:hover,
.navbar-warning .navbar-right .dropdown > a:focus,
.navbar-warning .navbar-right .dropdown > a:active,
.navbar-warning .navbar-right .dropdown > a:visited {
  background-color: #f9d58b !important;
}

.navbar-warning .navbar-right .dropdown > a > i {
  color: #FFFFFF;
}

.navbar-warning .navbar-right .navbar-setting {
  border-left: none;
}

.navbar-warning .navbar-right .navbar-setting a:hover,
.navbar-warning .navbar-right .navbar-setting a:focus,
.navbar-warning .navbar-right .navbar-setting a:active,
.navbar-warning .navbar-right .navbar-setting a:visited {
  background-color: #f9d58b !important;
}

.navbar-warning .navbar-right .navbar-setting a i {
  color: #FFFFFF;
}

.navbar-warning .navbar-right .navbar-profile > a .meta .text,
.navbar-warning .navbar-right .navbar-profile > a .meta .caret {
  color: #FFFFFF;
}

.navbar-warning .navbar-right .navbar-chat {
  border-left: none;
}

.navbar-warning .navbar-right .navbar-chat a i {
  color: #FFFFFF;
}

.navbar-warning .navbar-form input {
  border: 1px solid #F6BB42 !important;
}

.navbar-warning .navbar-form input:focus,
.navbar-warning .navbar-form input:active {
  border: 1px solid #F6BB42 !important;
}

.navbar-warning .navbar-form .form-group .btn {
  background-color: #F6BB42;
  border: 1px solid #F6BB42;
}

.navbar-danger {
  background-color: #E9573F;
  color: #FFFFFF;
}

.navbar-danger:before {
  border-bottom: none !important;
}

.navbar-danger .sidebar-minimize i {
  color: #FFFFFF;
}

.navbar-danger .navbar-left .navbar-minimize {
  border-right: none;
}

.navbar-danger .navbar-left .navbar-minimize a:hover,
.navbar-danger .navbar-left .navbar-minimize a:focus,
.navbar-danger .navbar-left .navbar-minimize a:active {
  background-color: #f19384;
}

.navbar-danger .navbar-left .navbar-minimize a:hover i,
.navbar-danger .navbar-left .navbar-minimize a:focus i,
.navbar-danger .navbar-left .navbar-minimize a:active i {
  color: #FFFFFF;
}

.navbar-danger .navbar-left .navbar-minimize a i {
  color: #FFFFFF;
}

.navbar-danger .navbar-left .navbar-search .navbar-form input {
  background-color: #f19384 !important;
  color: #FFFFFF !important;
}

.navbar-danger .navbar-left .navbar-search .navbar-form input::-webkit-input-placeholder {
  color: #FFFFFF;
}

.navbar-danger .navbar-left .navbar-search .navbar-form input:-moz-placeholder {
  color: #FFFFFF;
}

.navbar-danger .navbar-left .navbar-search .navbar-form input::-moz-placeholder {
  color: #FFFFFF;
}

.navbar-danger .navbar-left .navbar-search .navbar-form input:-ms-input-placeholder {
  color: #FFFFFF;
}

.navbar-danger .navbar-left .navbar-search .navbar-form button[type=submit]:before {
  color: #FFFFFF;
}

.navbar-danger .navbar-right .dropdown > a:hover,
.navbar-danger .navbar-right .dropdown > a:focus,
.navbar-danger .navbar-right .dropdown > a:active,
.navbar-danger .navbar-right .dropdown > a:visited {
  background-color: #f19384 !important;
}

.navbar-danger .navbar-right .dropdown > a > i {
  color: #FFFFFF;
}

.navbar-danger .navbar-right .navbar-setting {
  border-left: none;
}

.navbar-danger .navbar-right .navbar-setting a:hover,
.navbar-danger .navbar-right .navbar-setting a:focus,
.navbar-danger .navbar-right .navbar-setting a:active,
.navbar-danger .navbar-right .navbar-setting a:visited {
  background-color: #f19384 !important;
}

.navbar-danger .navbar-right .navbar-setting a i {
  color: #FFFFFF;
}

.navbar-danger .navbar-right .navbar-profile > a .meta .text,
.navbar-danger .navbar-right .navbar-profile > a .meta .caret {
  color: #FFFFFF;
}

.navbar-danger .navbar-right .navbar-chat {
  border-left: none;
}

.navbar-danger .navbar-right .navbar-chat a i {
  color: #FFFFFF;
}

.navbar-danger .navbar-form input {
  border: 1px solid #E9573F !important;
}

.navbar-danger .navbar-form input:focus,
.navbar-danger .navbar-form input:active {
  border: 1px solid #E9573F !important;
}

.navbar-danger .navbar-form .form-group .btn {
  background-color: #E9573F;
  border: 1px solid #E9573F;
}

/* ========================================================================
 * PAGE CONTENT
 * ======================================================================== */

#page-content {
  background-color: #F3F3F4;
  margin-left: 220px;
  z-index: 100;
}

@media (max-width: 1024px) {
  #page-content .header-content h2 span {
    display: none;
  }
}

@media (max-width: 800px) {
  #page-content {
    margin-right: 0px;
  }

  #page-content .header-content h2 {
    font-size: 20px;
  }

  #page-content .header-content .breadcrumb-wrapper {
    display: none;
  }
}

@media (max-width: 768px) {
  #page-content {
    position: relative;
    display: block;
    width: 100%;
    margin-left: 0px !important;
    margin-top: 50px;
    margin-right: 0px !important;
  }

  #page-content .header-content {
    padding: 12px 10px;
  }

  #page-content .header-content .breadcrumb-wrapper {
    right: 10px;
    display: block;
  }
}

@media (max-width: 600px) {
  #page-content .navbar-form input {
    min-width: 230px !important;
  }

  #page-content .navbar-form .tt-dropdown-menu {
    width: 300px !important;
  }
}

@media (max-width: 480px) {
  #page-content .navbar-form input {
    min-width: 200px !important;
  }

  #page-content .navbar-left {
    margin: 7.5px 0px 7.5px 5px !important;
  }

  #page-content .navbar-right {
    margin: 0px !important;
  }
}

/* ========================================================================
 * HEADER CONTENT
 * ======================================================================== */

.header-content {
  padding: 12px 20px;
  border-bottom: 1px solid #DDD;
  background: #fbfbfb;
  position: relative;
  margin: 0px;
}

.header-content h2 {
  font-size: 22px;
  color: #1D2939;
  letter-spacing: -0.5px;
  margin: 0;
}

.header-content h2 i {
  font-size: 21px;
  margin-right: 7px;
  border-right: 1px dotted #DDD;
  padding-right: 10px;
}

.header-content h2 span {
  font-size: 13px;
  text-transform: none;
  color: #999;
  font-style: italic;
  vertical-align: middle;
  letter-spacing: 0;
  margin-left: 5px;
}

.header-content .breadcrumb-wrapper {
  position: absolute;
  top: 15px;
  right: 20px;
}

.header-content .breadcrumb-wrapper .label {
  color: #999;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: normal;
  display: inline-block;
}

.header-content .breadcrumb-wrapper .breadcrumb {
  background: none;
  display: inline-block;
  padding: 0px;
  margin: 0px;
  border: none;
}

.header-content .breadcrumb-wrapper .breadcrumb li {
  font-size: 12px;
  white-space: nowrap;
}

.header-content .breadcrumb-wrapper .breadcrumb li + li:before {
  content: "";
  padding: 0px;
}

.header-content .breadcrumb-wrapper .breadcrumb li span,
.header-content .breadcrumb-wrapper .breadcrumb li i {
  color: #999;
  width: 1.25em;
  text-align: center;
}

.header-content .breadcrumb-wrapper .breadcrumb li span {
  padding: 0px 3px;
}

.header-content .breadcrumb-wrapper .breadcrumb li a {
  color: #999;
}

.header-content .breadcrumb-wrapper .breadcrumb li.active {
  color: #999;
  padding-left: 3px;
}

.header-content .breadcrumb-wrapper .breadcrumb li:last-child a {
  text-decoration: none;
  cursor: default;
}

.header-content .breadcrumb-wrapper .breadcrumb li:last-child i:last-child {
  display: none;
}

/* ========================================================================
 * BODY CONTENT
 * ======================================================================== */

.body-content {
  background-color: #eeeeef;
  padding: 20px;
  min-height: inherit;
  position: relative;
}

/* ========================================================================
 * FOOTER CONTENT
 * ======================================================================== */

.footer-content {
  background-color: white;
  padding: 8px 11px;
  font-size: 12px;
  border-top: 1px solid #DDD;
  border-bottom: 1px solid #DDD;
  color: #999;
}

@media (max-width: 800px) {
  .footer-content {
    text-align: center;
  }

  .footer-content .pull-left,
  .footer-content .pull-right {
    display: none;
  }
}

/* ========================================================================
 * SIDEBAR LEFT
 * ======================================================================== */

#sidebar-left {
  width: 220px;
  float: left;
  z-index: 200;
  position: absolute;
  background-color: #2A2A2A;
}

#sidebar-left:after {
  background-color: #2A2A2A;
  position: fixed;
  height: 100%;
  top: 0px;
  bottom: 0px;
  display: block;
  content: "";
  width: 220px;
  z-index: -2;
}

@media (max-width: 768px) {
  #sidebar-left {
    top: 100px;
    left: -220px;
    z-index: 9999;
    position: absolute;
  }

  #sidebar-left:after {
    left: -220px;
  }

  #sidebar-left .sidebar-content {
    padding: 23px 10px;
  }

  #sidebar-left .sidebar-menu > li:first-child a {
    padding-top: 13px;
  }
}

/* ========================================================================
 * SIDEBAR RIGHT
 * ======================================================================== */

#sidebar-right {
  top: 0px;
  right: -220px;
  visibility: hidden;
  width: 220px;
  position: fixed;
  z-index: 500;
}

#sidebar-right:after {
  background-color: #2A2A2A;
  position: fixed;
  height: 100%;
  top: 0px;
  bottom: 0px;
  display: block;
  content: "";
  width: 220px;
  z-index: -1;
}

#sidebar-right .panel {
  border: none;
}

#sidebar-right .panel .panel-heading {
  background-color: #2A2A2A;
}

#sidebar-right .panel .panel-heading .nav-tabs li.active a {
  background-color: #2A2A2A;
}

#sidebar-right .panel .panel-heading .nav-tabs li.active a i {
  color: #ffffff;
}

#sidebar-right .panel .panel-heading .nav-tabs li a {
  background-color: #2A2A2A;
}

#sidebar-right .panel .panel-heading .nav-tabs li a:hover {
  background-color: #323232;
}

#sidebar-right .panel .panel-heading .nav-tabs li i {
  color: #7F7F7F;
}

#sidebar-right .panel .panel-heading ul li a {
  padding: 12px 15px !important;
}

#sidebar-right .media-list {
  background-color: #2A2A2A;
}

#sidebar-right .media-list .media:hover {
  background-color: #2A2A2A;
  opacity: 1;
}

#sidebar-right .media-list .media .media-heading {
  color: #777;
}

#sidebar-right .media-list .media .media-body {
  border-bottom: 1px solid #323232;
}

#sidebar-right .media-list .media:last-child .media-body {
  border-bottom: none;
}

#sidebar-right .panel-tab {
  background-color: transparent;
}

#sidebar-right .panel .panel-heading {
  border-bottom: none;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

#sidebar-right .panel .panel-heading .nav-tabs li a {
  cursor: pointer;
  border: none;
}

#sidebar-right .panel .panel-heading .nav-tabs li a i {
  font-size: 20px;
  line-height: 30px;
}

#sidebar-right .panel .panel-body {
  background-color: #2A2A2A;
}

#sidebar-right .sidebar-menu {
  margin-top: 0px;
}

#sidebar-right .sidebar-menu > li > ul {
  background-color: #2A2A2A;
}

#sidebar-right .sidebar-menu > li > ul > li {
  border-bottom: none;
}

#sidebar-right .media-list .media .media-object {
  margin-top: 10px;
}

#sidebar-right .media-list .media .media-object i {
  top: 12px !important;
}

#sidebar-right .media-list .media .media-heading {
  font-weight: 300;
}

#sidebar-right .media-list .media .media-body {
  padding-top: 5px;
  padding-bottom: 5px;
}

@media (max-width: 768px) {
  #sidebar-right {
    top: 100px;
  }

  #sidebar-right.sidebar-show {
    top: 100px;
  }
}

@media (max-width: 480px) {
  #sidebar-right .panel-tab .panel-heading ul li {
    width: inherit;
  }
}

/* ========================================================================
 * SIDEBAR CONTENT
 * ======================================================================== */

.sidebar-content {
  position: relative;
  padding: 15px 10px;
  border-bottom: 2px solid #373737;
  min-height: 81px;
}

.sidebar-content .media-heading {
  color: #777;
}

.sidebar-content .media-heading span {
  color: #d0d0d0;
}

.sidebar-content small {
  color: #777;
}

.sidebar-content .close {
  color: white;
}

.sidebar-content:after {
  position: absolute;
  content: "";
  left: 37px;
  top: 0px;
  bottom: 0px;
  z-index: -1;
}

.sidebar-content img {
  width: 54px;
  height: 54px;
}

.sidebar-content .media {
  margin-top: 0;
}

.sidebar-content .media-heading {
  font-weight: 300 !important;
  margin-bottom: 2px;
  margin-top: 5px;
}

.sidebar-content .close {
  position: absolute;
  top: -2px;
  right: 2px;
  font-size: 19px;
  font-weight: normal;
  text-shadow: 0 1px 0 #FFF;
}

.sidebar-content .btn {
  opacity: .7;
}

.sidebar-content .btn:hover {
  opacity: 1;
}

/* ========================================================================
 * SIDEBAR MENU
 * ======================================================================== */

.sidebar-menu {
  list-style: none;
  padding: 0;
  position: relative;
  margin-bottom: 0px;
}

.sidebar-menu li:after {
  position: absolute;
  content: "";
  left: 55px;
  bottom: -1px;
}

.sidebar-menu li.submenu .label.pull-right,
.sidebar-menu li.submenu .badge.pull-right {
  margin-right: 10px !important;
}

.sidebar-menu li.submenu .fa.arrow {
  font-size: 15px;
  margin-right: 15px;
}

.sidebar-menu li .label,
.sidebar-menu li .badge {
  text-shadow: 0px 1px 1px #777;
  color: #f7f7f7;
  padding: 3px 4px 4px 4px;
}

.sidebar-menu > li {
  display: block;
  position: relative;
}

.sidebar-menu > li:after {
  border-left: 2px solid #373737;
}

.sidebar-menu > li:first-child.active {
  margin-top: -1px;
}

.sidebar-menu > li:first-child > a > .icon:after {
  top: -1px;
}

.sidebar-menu > li:last-child:after {
  bottom: 10px;
}

.sidebar-menu > li:last-child > a > .icon:after {
  bottom: 6px;
}

.sidebar-menu > li.active {
  background-color: #3c3c3c;
}

.sidebar-menu > li.active .icon {
  text-shadow: 0px 1px 1px #777;
}

.sidebar-menu > li.active > a span {
  color: #d0d0d0;
}

.sidebar-menu > li.active > a .arrow {
  color: #777;
}

.sidebar-menu > li.active > a > .plus:before {
  content: "\f147";
}

.sidebar-menu > li.active > a > .icon i {
  color: #d0d0d0;
}

.sidebar-menu > li.sidebar-minimize-end > a > .icon:after {
  bottom: 6px !important;
}

.sidebar-menu > li > a {
  display: block;
  padding: 6px 15px;
  text-decoration: none;
}

.sidebar-menu > li > a:hover span {
  color: #d0d0d0;
}

.sidebar-menu > li > a:hover .text,
.sidebar-menu > li > a:hover .icon > i {
  color: #d0d0d0;
}

.sidebar-menu > li > a:after {
  position: absolute;
  content: "";
  left: 29px;
  top: -13px;
  bottom: 0px;
  z-index: -1;
}

.sidebar-menu > li > a > span {
  display: inline;
  color: #777;
}

.sidebar-menu > li > a > .count {
  float: right;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  font-size: 11px;
  width: 22px;
  height: 22px;
  text-align: center;
  line-height: 19px;
  background-color: #373737;
}

.sidebar-menu > li > a > .icon {
  margin-right: 10px;
}

.sidebar-menu > li > a > .icon:after {
  content: "";
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 29px;
  z-index: -1;
}

.sidebar-menu > li > a > .icon i {
  text-align: center;
  line-height: 25px;
  width: 29px;
  font-size: 12px;
  color: #777;
}

.sidebar-menu > li > a > .arrow,
.sidebar-menu > li > a > .plus {
  vertical-align: middle;
  font-weight: 400;
  text-align: center;
  font-size: 13px;
  position: absolute;
  top: 10px;
  right: 20px;
}

.sidebar-menu > li > a > .arrow:before,
.sidebar-menu > li > a > .plus:before {
  font-family: FontAwesome;
  font-size: 15px;
}

.sidebar-menu > li > a > .arrow:before {
  content: "\f105";
}

.sidebar-menu > li > a > .arrow.open:before {
  content: "\f107" !important;
}

.sidebar-menu > li > a > .selected {
  display: block;
  background-image: none;
  float: right;
  position: absolute;
  right: 0px;
  top: 14px;
  background: none;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 6px double transparent;
  border-bottom: 6px double transparent;
  border-left: 0;
  border-right: 6px solid #F3F3F4;
}

.sidebar-menu > li > a > .plus:before {
  content: "\f196";
}

.sidebar-menu > li > a > .plus.open:before {
  content: "\f147" !important;
}

.sidebar-menu > li > a > .pull-right {
  margin-top: 5px;
}

.sidebar-menu > li.submenu ul {
  display: none;
}

.sidebar-menu > li.submenu.active .arrow:before {
  content: "\f107";
}

.sidebar-menu > li.submenu.active > ul {
  display: block;
}

.sidebar-menu > li.submenu.active > ul > li.submenu.active .arrow:before {
  content: "\f103" !important;
}

.sidebar-menu > li.submenu.active > ul > li.submenu.active > ul {
  display: block;
}

.sidebar-menu > li.submenu.active > ul > li.submenu.active > ul > li.active a {
  color: #d0d0d0;
}

.sidebar-menu > li.submenu.active > ul > li.submenu.active > ul > li.active a:before {
  color: #81B71A;
}

.sidebar-menu > li.submenu.active > ul > li.submenu.active > ul > li a {
  color: #777;
}

.sidebar-menu > li.submenu.active > ul > li.submenu.active > ul > li a:hover {
  color: #d0d0d0;
}

.sidebar-menu > li > ul:after {
  position: absolute;
  content: "";
  left: 29px;
  top: 39px;
  bottom: 0;
}

.sidebar-menu > li > ul > li {
  line-height: 15px;
  border-bottom: 1px solid #373737;
}

.sidebar-menu > li > ul > li > a:hover {
  background-color: black;
}

.sidebar-menu > li > ul > li > a > .text {
  min-width: 110px;
}

.sidebar-menu > li > ul > li > a > .arrow {
  float: right;
  margin-right: 21px;
  vertical-align: middle;
  font-weight: 400;
  width: 30px;
  text-align: right;
  font-size: 13px;
}

.sidebar-menu > li > ul > li > a > .arrow:before {
  font-family: FontAwesome;
  font-size: 15px;
  content: "\f101" !important;
  margin-right: -6px;
}

.sidebar-menu > li > ul > li > a > .arrow.open:before {
  content: "\f103" !important;
}

.sidebar-menu > li > ul > li > ul {
  background-color: #161616;
}

.sidebar-menu > li > ul > li > ul > li > a {
  padding: 8px 0px 8px 30px;
}

.sidebar-menu > li > ul > li > ul > li > a:hover {
  background-color: black;
}

.sidebar-menu > li > ul > li > ul > li > ul {
  background-color: #111111;
}

.sidebar-menu > li > ul > li > ul > li > ul > li > a {
  padding: 8px 0px 8px 35px;
}

.sidebar-menu > li > ul > li > ul > li > ul > li > a:hover {
  background-color: black;
}

.sidebar-menu > li > ul > li > ul > li > ul > li > ul {
  background-color: #0b0b0b;
}

.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > a {
  padding: 8px 0px 8px 40px;
}

.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > a:hover {
  background-color: black;
}

.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul {
  background-color: #060606;
}

.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > a {
  padding: 8px 0px 8px 45px;
}

.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > a:hover {
  background-color: black;
}

.sidebar-menu > li > ul > li.active {
  background-color: black;
}

.sidebar-menu > li > ul > li.active.submenu > a {
  background-color: #373737;
}

.sidebar-menu ul {
  margin: 0;
  padding: 0;
  background-color: #1d1d1d;
  list-style: none;
}

.sidebar-menu ul li {
  position: relative;
}

.sidebar-menu ul li:after {
  background-color: #2A2A2A;
}

.sidebar-menu ul li a {
  font-size: 12px;
  text-decoration: none;
  padding: 8px 0 8px 22px;
  display: block;
  text-transform: capitalize;
  color: #777;
}

.sidebar-menu ul li a:hover {
  color: #b7b7b7;
}

.sidebar-menu ul li a:before {
  color: #373737;
}

.sidebar-menu ul li.active a {
  color: #b7b7b7;
}

.sidebar-menu ul li.active a:before {
  color: #373737;
}

.sidebar-menu ul li.active ul li.active > a {
  color: #b7b7b7;
}

.sidebar-menu ul li.active ul li > a {
  color: #777;
}

.sidebar-menu ul li.active ul li > a:hover {
  color: #b7b7b7;
}

.sidebar-menu .submenu-header {
  display: none;
}

/* ========================================================================
 * SIDEBAR CATEGORY
 * ======================================================================== */

.sidebar-category {
  padding: 0px 20px;
  font-weight: 400;
  font-size: 12px;
  line-height: 40px;
  margin: 0px;
  text-transform: uppercase;
  background-color: #323232;
  color: #7f7f7f;
}

/* ========================================================================
 * SIDEBAR FOOTER
 * ======================================================================== */

.sidebar-footer {
  line-height: 40px;
  height: 40px;
}

.sidebar-footer a {
  color: #777;
}

.sidebar-footer a:hover {
  color: black;
}

.sidebar-footer .pull-left {
  width: 25%;
  text-align: center;
}

.sidebar-footer .pull-left i {
  font-size: 12px;
}

/* ========================================================================
 * SIDEBAR COLORS
 * ======================================================================== */

.sidebar-light {
  background-color: #FFFFFF !important;
}

.sidebar-light:after {
  background-color: #FFFFFF !important;
}

.sidebar-light .sidebar-content {
  border-bottom: 2px solid #DDD !important;
}

.sidebar-light .sidebar-content img,
.sidebar-light .sidebar-content .online {
  border: 2px solid #DDD !important;
}

.sidebar-light .sidebar-menu > li:hover {
  background-color: #e4e4e7 !important;
}

.sidebar-light .sidebar-menu > li:hover.submenu > ul {
  background-color: #f7f7f8 !important;
}

.sidebar-light .sidebar-menu > li:hover.submenu > ul > li:hover a {
  background-color: #f4f4f5 !important;
}

.sidebar-light .sidebar-menu > li:hover.submenu > ul > li > ul {
  background-color: #f7f7f8 !important;
}

.sidebar-light .sidebar-menu > li:first-child > a > .icon:after {
  top: -1px;
}

.sidebar-light .sidebar-menu > li:last-child > a > .icon:after {
  bottom: 6px;
}

.sidebar-light .sidebar-menu > li > a:hover .text,
.sidebar-light .sidebar-menu > li > a:hover .icon > i {
  color: #777;
}

.sidebar-light .sidebar-menu > li > a > .icon i {
  color: #777;
}

.sidebar-light .sidebar-menu > li > a > .count {
  background-color: white;
  color: #777;
}

.sidebar-light .sidebar-menu > li > a > span {
  color: #777;
}

.sidebar-light .sidebar-menu > li > a > span.label,
.sidebar-light .sidebar-menu > li > a > span.badge {
  color: #FFFFFF !important;
}

.sidebar-light .sidebar-menu > li.active {
  background-color: #fafafa !important;
}

.sidebar-light .sidebar-menu > li.active > a > .icon {
  text-shadow: none !important;
}

.sidebar-light .sidebar-menu > li.active > a > .icon i {
  color: #FFFFFF !important;
}

.sidebar-light .sidebar-menu > li.active > a span {
  color: #777;
}

.sidebar-light .sidebar-menu > li > ul {
  background-color: white;
}

.sidebar-light .sidebar-menu > li > ul > li:after {
  background-color: white !important;
}

.sidebar-light .sidebar-menu > li > ul > li a {
  color: #777;
}

.sidebar-light .sidebar-menu > li > ul > li a:before {
  color: #DDD !important;
}

.sidebar-light .sidebar-menu > li > ul > li a:hover:before {
  color: #777 !important;
}

.sidebar-light .sidebar-menu > li > ul > li.active a {
  color: #777;
}

.sidebar-light .sidebar-menu > li > ul > li.active a:before {
  color: white;
}

.sidebar-light .sidebar-menu > li > ul > li ul {
  background-color: #f7f7f8;
}

.sidebar-light .sidebar-menu li {
  color: #777 !important;
}

.sidebar-light .sidebar-menu li.sidebar-category {
  background-color: #DDD !important;
}

.sidebar-light > .sidebar-content {
  border-bottom: 2px solid white;
}

.sidebar-light > .sidebar-content .media-heading span {
  color: #777;
}

.sidebar-light > .sidebar-content small,
.sidebar-light > .sidebar-content .media-heading {
  color: #777;
}

.sidebar-light > .sidebar-content .online {
  border: 2px solid white;
  background-color: #72a53b !important;
}

.sidebar-light > .sidebar-footer {
  background-color: white;
}

.sidebar-light > .sidebar-footer a {
  color: #777;
}

.sidebar-light .nicescroll-rails div {
  background-color: white !important;
}

.sidebar-light.sidebar-box .sidebar-menu > li > a > .icon:after,
.sidebar-light.sidebar-rounded .sidebar-menu > li > a > .icon:after,
.sidebar-light.sidebar-circle .sidebar-menu > li > a > .icon:after {
  border: 1px solid #DDD;
}

.sidebar-light.sidebar-box .sidebar-menu > li > a > .icon i,
.sidebar-light.sidebar-rounded .sidebar-menu > li > a > .icon i,
.sidebar-light.sidebar-circle .sidebar-menu > li > a > .icon i {
  border: 2px solid #DDD;
  background-color: white;
}

.sidebar-light.sidebar-box .sidebar-menu > li > ul:after,
.sidebar-light.sidebar-rounded .sidebar-menu > li > ul:after,
.sidebar-light.sidebar-circle .sidebar-menu > li > ul:after {
  border-left: 2px solid #DDD !important;
}

.sidebar-light.sidebar-box .sidebar-menu > li > ul > li:after,
.sidebar-light.sidebar-rounded .sidebar-menu > li > ul > li:after,
.sidebar-light.sidebar-circle .sidebar-menu > li > ul > li:after {
  z-index: 1;
  width: 8px;
  height: 8px;
  left: 26px;
  top: 13px;
  bottom: auto;
  border-color: transparent;
  -moz-transition: all 0.5s ease-in-out 0s;
  -o-transition: all 0.5s ease-in-out 0s;
  -webkit-transition: all 0.5s ease-in-out;
  -webkit-transition-delay: 0s;
  transition: all 0.5s ease-in-out 0s;
  -moz-box-shadow: 0 0 0 2px #DDD;
  -webkit-box-shadow: 0 0 0 2px #DDD;
  box-shadow: 0 0 0 2px #DDD;
}

.sidebar-light.sidebar-box .sidebar-menu > li > ul > li a:before,
.sidebar-light.sidebar-rounded .sidebar-menu > li > ul > li a:before,
.sidebar-light.sidebar-circle .sidebar-menu > li > ul > li a:before {
  content: "\2014\00a0";
  margin-left: 13px;
}

.sidebar-primary {
  background-color: #00a5d2 !important;
}

.sidebar-primary:after {
  background-color: #00a5d2 !important;
}

.sidebar-primary > .sidebar-menu > li:hover {
  background-color: #009dc8 !important;
}

.sidebar-primary > .sidebar-menu > li:hover.submenu > ul > li:hover a {
  background-color: #0091b8 !important;
}

.sidebar-primary > .sidebar-menu > li:hover.submenu > ul > li > ul {
  background-color: #00a5d2 !important;
}

.sidebar-primary > .sidebar-menu > li:first-child > a > .icon:after {
  top: -1px;
}

.sidebar-primary > .sidebar-menu > li:last-child > a > .icon:after {
  bottom: 6px;
}

.sidebar-primary > .sidebar-menu > li.sidebar-category {
  background-color: #00bdf0 !important;
}

.sidebar-primary > .sidebar-menu > li > a:hover .text,
.sidebar-primary > .sidebar-menu > li > a:hover .icon > i {
  color: #FFFFFF;
}

.sidebar-primary > .sidebar-menu > li > a > .icon i {
  color: #ffffff;
}

.sidebar-primary > .sidebar-menu > li > a > .count {
  background-color: #00c5fb;
  color: #FFFFFF;
}

.sidebar-primary > .sidebar-menu > li > a > span {
  color: #FFFFFF;
}

.sidebar-primary > .sidebar-menu > li.active {
  background-color: #00c5fb !important;
}

.sidebar-primary > .sidebar-menu > li.active > a > .icon {
  text-shadow: none !important;
}

.sidebar-primary > .sidebar-menu > li.active > a > .icon i {
  color: #FFFFFF !important;
}

.sidebar-primary > .sidebar-menu > li.active > a span {
  color: #FFFFFF;
}

.sidebar-primary > .sidebar-menu > li > ul > li {
  background-color: #0089ae;
}

.sidebar-primary > .sidebar-menu > li > ul > li:after {
  background-color: #00bdf0 !important;
}

.sidebar-primary > .sidebar-menu > li > ul > li a {
  color: #FFFFFF;
}

.sidebar-primary > .sidebar-menu > li > ul > li a:before {
  color: #00bdf0 !important;
}

.sidebar-primary > .sidebar-menu > li > ul > li a:hover:before {
  color: #FFFFFF !important;
}

.sidebar-primary > .sidebar-menu > li > ul > li.active a {
  color: #FFFFFF;
}

.sidebar-primary > .sidebar-menu > li > ul > li.active a:before {
  color: #00c5fb;
}

.sidebar-primary > .sidebar-menu > li > ul > li ul {
  background-color: #00a5d2;
}

.sidebar-primary > .sidebar-menu li {
  color: #FFFFFF !important;
}

.sidebar-primary > .sidebar-menu li.sidebar-category {
  background-color: #00bdf0 !important;
}

.sidebar-primary > .sidebar-content {
  border-bottom: 2px solid #00c5fb;
}

.sidebar-primary > .sidebar-content img,
.sidebar-primary > .sidebar-content .online {
  border: 2px solid #00c5fb !important;
}

.sidebar-primary > .sidebar-content .media-heading span {
  color: #FFFFFF;
}

.sidebar-primary > .sidebar-content small,
.sidebar-primary > .sidebar-content .media-heading {
  color: #FFFFFF;
}

.sidebar-primary > .sidebar-content .online {
  background-color: #72a53b !important;
}

.sidebar-primary > .sidebar-footer {
  background-color: #00bdf0;
}

.sidebar-primary > .sidebar-footer a {
  color: #FFFFFF;
}

.sidebar-primary .nicescroll-rails div {
  background-color: #06caff !important;
}

.sidebar-primary.sidebar-box .sidebar-menu > li.active > a > .icon i,
.sidebar-primary.sidebar-rounded .sidebar-menu > li.active > a > .icon i,
.sidebar-primary.sidebar-circle .sidebar-menu > li.active > a > .icon i {
  background-color: #15cdff !important;
}

.sidebar-primary.sidebar-box .sidebar-menu > li > a > .icon:after,
.sidebar-primary.sidebar-rounded .sidebar-menu > li > a > .icon:after,
.sidebar-primary.sidebar-circle .sidebar-menu > li > a > .icon:after {
  border: 1px solid #00bdf0;
}

.sidebar-primary.sidebar-box .sidebar-menu > li > a > .icon i,
.sidebar-primary.sidebar-rounded .sidebar-menu > li > a > .icon i,
.sidebar-primary.sidebar-circle .sidebar-menu > li > a > .icon i {
  border: 2px solid #00bdf0;
  background-color: #00b9eb;
}

.sidebar-primary.sidebar-box .sidebar-menu > li > ul:after,
.sidebar-primary.sidebar-rounded .sidebar-menu > li > ul:after,
.sidebar-primary.sidebar-circle .sidebar-menu > li > ul:after {
  border-left: 2px solid #00B1E1 !important;
}

.sidebar-primary.sidebar-box .sidebar-menu > li > ul > li:after,
.sidebar-primary.sidebar-rounded .sidebar-menu > li > ul > li:after,
.sidebar-primary.sidebar-circle .sidebar-menu > li > ul > li:after {
  z-index: 1;
  width: 8px;
  height: 8px;
  left: 26px;
  top: 13px;
  bottom: auto;
  border-color: transparent;
  -moz-transition: all 0.5s ease-in-out 0s;
  -o-transition: all 0.5s ease-in-out 0s;
  -webkit-transition: all 0.5s ease-in-out;
  -webkit-transition-delay: 0s;
  transition: all 0.5s ease-in-out 0s;
  -moz-box-shadow: 0 0 0 2px #00B1E1;
  -webkit-box-shadow: 0 0 0 2px #00B1E1;
  box-shadow: 0 0 0 2px #00B1E1;
}

.sidebar-primary.sidebar-box .sidebar-menu > li > ul > li a:before,
.sidebar-primary.sidebar-rounded .sidebar-menu > li > ul > li a:before,
.sidebar-primary.sidebar-circle .sidebar-menu > li > ul > li a:before {
  content: "\2014\00a0";
  margin-left: 13px;
}

.sidebar-success {
  background-color: #85bd47 !important;
}

.sidebar-success:after {
  background-color: #85bd47 !important;
}

.sidebar-success > .sidebar-menu > li:hover {
  background-color: #7fb842 !important;
}

.sidebar-success > .sidebar-menu > li:hover.submenu > ul > li:hover a {
  background-color: #78ac3e !important;
}

.sidebar-success > .sidebar-menu > li:hover.submenu > ul > li > ul {
  background-color: #85bd47 !important;
}

.sidebar-success > .sidebar-menu > li:first-child > a > .icon:after {
  top: -1px;
}

.sidebar-success > .sidebar-menu > li:last-child > a > .icon:after {
  bottom: 6px;
}

.sidebar-success > .sidebar-menu > li.sidebar-category {
  background-color: #93c55d !important;
}

.sidebar-success > .sidebar-menu > li > a:hover .text,
.sidebar-success > .sidebar-menu > li > a:hover .icon > i {
  color: #FFFFFF;
}

.sidebar-success > .sidebar-menu > li > a > .icon i {
  color: #ffffff;
}

.sidebar-success > .sidebar-menu > li > a > .count {
  background-color: #98c865;
  color: #FFFFFF;
}

.sidebar-success > .sidebar-menu > li > a > span {
  color: #FFFFFF;
}

.sidebar-success > .sidebar-menu > li.active {
  background-color: #98c865 !important;
}

.sidebar-success > .sidebar-menu > li.active > a > .icon {
  text-shadow: none !important;
}

.sidebar-success > .sidebar-menu > li.active > a > .icon i {
  color: #FFFFFF !important;
}

.sidebar-success > .sidebar-menu > li.active > a span {
  color: #FFFFFF;
}

.sidebar-success > .sidebar-menu > li > ul > li {
  background-color: #72a53b;
}

.sidebar-success > .sidebar-menu > li > ul > li:after {
  background-color: #93c55d !important;
}

.sidebar-success > .sidebar-menu > li > ul > li a {
  color: #FFFFFF;
}

.sidebar-success > .sidebar-menu > li > ul > li a:before {
  color: #93c55d !important;
}

.sidebar-success > .sidebar-menu > li > ul > li a:hover:before {
  color: #FFFFFF !important;
}

.sidebar-success > .sidebar-menu > li > ul > li.active a {
  color: #FFFFFF;
}

.sidebar-success > .sidebar-menu > li > ul > li.active a:before {
  color: #98c865;
}

.sidebar-success > .sidebar-menu > li > ul > li ul {
  background-color: #85bd47;
}

.sidebar-success > .sidebar-menu li {
  color: #FFFFFF !important;
}

.sidebar-success > .sidebar-menu li.sidebar-category {
  background-color: #93c55d !important;
}

.sidebar-success > .sidebar-content {
  border-bottom: 2px solid #98c865;
}

.sidebar-success > .sidebar-content img,
.sidebar-success > .sidebar-content .online {
  border: 2px solid #98c865 !important;
}

.sidebar-success > .sidebar-content .media-heading span {
  color: #FFFFFF;
}

.sidebar-success > .sidebar-content small,
.sidebar-success > .sidebar-content .media-heading {
  color: #FFFFFF;
}

.sidebar-success > .sidebar-content .online {
  background-color: #72a53b !important;
}

.sidebar-success > .sidebar-footer {
  background-color: #93c55d;
}

.sidebar-success > .sidebar-footer a {
  color: #FFFFFF;
}

.sidebar-success .nicescroll-rails div {
  background-color: #9dca6c !important;
}

.sidebar-success.sidebar-box .sidebar-menu > li.active > a > .icon i,
.sidebar-success.sidebar-rounded .sidebar-menu > li.active > a > .icon i,
.sidebar-success.sidebar-circle .sidebar-menu > li.active > a > .icon i {
  background-color: #a5ce78 !important;
}

.sidebar-success.sidebar-box .sidebar-menu > li > a > .icon:after,
.sidebar-success.sidebar-rounded .sidebar-menu > li > a > .icon:after,
.sidebar-success.sidebar-circle .sidebar-menu > li > a > .icon:after {
  border: 1px solid #93c55d;
}

.sidebar-success.sidebar-box .sidebar-menu > li > a > .icon i,
.sidebar-success.sidebar-rounded .sidebar-menu > li > a > .icon i,
.sidebar-success.sidebar-circle .sidebar-menu > li > a > .icon i {
  border: 2px solid #93c55d;
  background-color: #91c45a;
}

.sidebar-success.sidebar-box .sidebar-menu > li > ul:after,
.sidebar-success.sidebar-rounded .sidebar-menu > li > ul:after,
.sidebar-success.sidebar-circle .sidebar-menu > li > ul:after {
  border-left: 2px solid #8CC152 !important;
}

.sidebar-success.sidebar-box .sidebar-menu > li > ul > li:after,
.sidebar-success.sidebar-rounded .sidebar-menu > li > ul > li:after,
.sidebar-success.sidebar-circle .sidebar-menu > li > ul > li:after {
  z-index: 1;
  width: 8px;
  height: 8px;
  left: 26px;
  top: 13px;
  bottom: auto;
  border-color: transparent;
  -moz-transition: all 0.5s ease-in-out 0s;
  -o-transition: all 0.5s ease-in-out 0s;
  -webkit-transition: all 0.5s ease-in-out;
  -webkit-transition-delay: 0s;
  transition: all 0.5s ease-in-out 0s;
  -moz-box-shadow: 0 0 0 2px #8CC152;
  -webkit-box-shadow: 0 0 0 2px #8CC152;
  box-shadow: 0 0 0 2px #8CC152;
}

.sidebar-success.sidebar-box .sidebar-menu > li > ul > li a:before,
.sidebar-success.sidebar-rounded .sidebar-menu > li > ul > li a:before,
.sidebar-success.sidebar-circle .sidebar-menu > li > ul > li a:before {
  content: "\2014\00a0";
  margin-left: 13px;
}

.sidebar-info {
  background-color: #56cfe7 !important;
}

.sidebar-info:after {
  background-color: #56cfe7 !important;
}

.sidebar-info > .sidebar-menu > li:hover {
  background-color: #4dcde6 !important;
}

.sidebar-info > .sidebar-menu > li:hover.submenu > ul > li:hover a {
  background-color: #3fc9e4 !important;
}

.sidebar-info > .sidebar-menu > li:hover.submenu > ul > li > ul {
  background-color: #56cfe7 !important;
}

.sidebar-info > .sidebar-menu > li:first-child > a > .icon:after {
  top: -1px;
}

.sidebar-info > .sidebar-menu > li:last-child > a > .icon:after {
  bottom: 6px;
}

.sidebar-info > .sidebar-menu > li.sidebar-category {
  background-color: #70d7eb !important;
}

.sidebar-info > .sidebar-menu > li > a:hover .text,
.sidebar-info > .sidebar-menu > li > a:hover .icon > i {
  color: #FFFFFF;
}

.sidebar-info > .sidebar-menu > li > a > .icon i {
  color: #ffffff;
}

.sidebar-info > .sidebar-menu > li > a > .count {
  background-color: #79d9ec;
  color: #FFFFFF;
}

.sidebar-info > .sidebar-menu > li > a > span {
  color: #FFFFFF;
}

.sidebar-info > .sidebar-menu > li.active {
  background-color: #79d9ec !important;
}

.sidebar-info > .sidebar-menu > li.active > a > .icon {
  text-shadow: none !important;
}

.sidebar-info > .sidebar-menu > li.active > a > .icon i {
  color: #FFFFFF !important;
}

.sidebar-info > .sidebar-menu > li.active > a span {
  color: #FFFFFF;
}

.sidebar-info > .sidebar-menu > li > ul > li {
  background-color: #36c6e3;
}

.sidebar-info > .sidebar-menu > li > ul > li:after {
  background-color: #70d7eb !important;
}

.sidebar-info > .sidebar-menu > li > ul > li a {
  color: #FFFFFF;
}

.sidebar-info > .sidebar-menu > li > ul > li a:before {
  color: #70d7eb !important;
}

.sidebar-info > .sidebar-menu > li > ul > li a:hover:before {
  color: #FFFFFF !important;
}

.sidebar-info > .sidebar-menu > li > ul > li.active a {
  color: #FFFFFF;
}

.sidebar-info > .sidebar-menu > li > ul > li.active a:before {
  color: #79d9ec;
}

.sidebar-info > .sidebar-menu > li > ul > li ul {
  background-color: #56cfe7;
}

.sidebar-info > .sidebar-menu li {
  color: #FFFFFF !important;
}

.sidebar-info > .sidebar-menu li.sidebar-category {
  background-color: #70d7eb !important;
}

.sidebar-info > .sidebar-content {
  border-bottom: 2px solid #79d9ec;
}

.sidebar-info > .sidebar-content img,
.sidebar-info > .sidebar-content .online {
  border: 2px solid #79d9ec !important;
}

.sidebar-info > .sidebar-content .media-heading span {
  color: #FFFFFF;
}

.sidebar-info > .sidebar-content small,
.sidebar-info > .sidebar-content .media-heading {
  color: #FFFFFF;
}

.sidebar-info > .sidebar-content .online {
  background-color: #72a53b !important;
}

.sidebar-info > .sidebar-footer {
  background-color: #70d7eb;
}

.sidebar-info > .sidebar-footer a {
  color: #FFFFFF;
}

.sidebar-info .nicescroll-rails div {
  background-color: #82dced !important;
}

.sidebar-info.sidebar-box .sidebar-menu > li.active > a > .icon i,
.sidebar-info.sidebar-rounded .sidebar-menu > li.active > a > .icon i,
.sidebar-info.sidebar-circle .sidebar-menu > li.active > a > .icon i {
  background-color: #90e0ef !important;
}

.sidebar-info.sidebar-box .sidebar-menu > li > a > .icon:after,
.sidebar-info.sidebar-rounded .sidebar-menu > li > a > .icon:after,
.sidebar-info.sidebar-circle .sidebar-menu > li > a > .icon:after {
  border: 1px solid #70d7eb;
}

.sidebar-info.sidebar-box .sidebar-menu > li > a > .icon i,
.sidebar-info.sidebar-rounded .sidebar-menu > li > a > .icon i,
.sidebar-info.sidebar-circle .sidebar-menu > li > a > .icon i {
  border: 2px solid #70d7eb;
  background-color: #6cd6ea;
}

.sidebar-info.sidebar-box .sidebar-menu > li > ul:after,
.sidebar-info.sidebar-rounded .sidebar-menu > li > ul:after,
.sidebar-info.sidebar-circle .sidebar-menu > li > ul:after {
  border-left: 2px solid #63D3E9 !important;
}

.sidebar-info.sidebar-box .sidebar-menu > li > ul > li:after,
.sidebar-info.sidebar-rounded .sidebar-menu > li > ul > li:after,
.sidebar-info.sidebar-circle .sidebar-menu > li > ul > li:after {
  z-index: 1;
  width: 8px;
  height: 8px;
  left: 26px;
  top: 13px;
  bottom: auto;
  border-color: transparent;
  -moz-transition: all 0.5s ease-in-out 0s;
  -o-transition: all 0.5s ease-in-out 0s;
  -webkit-transition: all 0.5s ease-in-out;
  -webkit-transition-delay: 0s;
  transition: all 0.5s ease-in-out 0s;
  -moz-box-shadow: 0 0 0 2px #63D3E9;
  -webkit-box-shadow: 0 0 0 2px #63D3E9;
  box-shadow: 0 0 0 2px #63D3E9;
}

.sidebar-info.sidebar-box .sidebar-menu > li > ul > li a:before,
.sidebar-info.sidebar-rounded .sidebar-menu > li > ul > li a:before,
.sidebar-info.sidebar-circle .sidebar-menu > li > ul > li a:before {
  content: "\2014\00a0";
  margin-left: 13px;
}

.sidebar-warning {
  background-color: #f5b633 !important;
}

.sidebar-warning:after {
  background-color: #f5b633 !important;
}

.sidebar-warning > .sidebar-menu > li:hover {
  background-color: #f5b22a !important;
}

.sidebar-warning > .sidebar-menu > li:hover.submenu > ul > li:hover a {
  background-color: #f4ad1b !important;
}

.sidebar-warning > .sidebar-menu > li:hover.submenu > ul > li > ul {
  background-color: #f5b633 !important;
}

.sidebar-warning > .sidebar-menu > li:first-child > a > .icon:after {
  top: -1px;
}

.sidebar-warning > .sidebar-menu > li:last-child > a > .icon:after {
  bottom: 6px;
}

.sidebar-warning > .sidebar-menu > li.sidebar-category {
  background-color: #f7c051 !important;
}

.sidebar-warning > .sidebar-menu > li > a:hover .text,
.sidebar-warning > .sidebar-menu > li > a:hover .icon > i {
  color: #FFFFFF;
}

.sidebar-warning > .sidebar-menu > li > a > .icon i {
  color: #ffffff;
}

.sidebar-warning > .sidebar-menu > li > a > .count {
  background-color: #f7c45a;
  color: #FFFFFF;
}

.sidebar-warning > .sidebar-menu > li > a > span {
  color: #FFFFFF;
}

.sidebar-warning > .sidebar-menu > li.active {
  background-color: #f7c45a !important;
}

.sidebar-warning > .sidebar-menu > li.active > a > .icon {
  text-shadow: none !important;
}

.sidebar-warning > .sidebar-menu > li.active > a > .icon i {
  color: #FFFFFF !important;
}

.sidebar-warning > .sidebar-menu > li.active > a span {
  color: #FFFFFF;
}

.sidebar-warning > .sidebar-menu > li > ul > li {
  background-color: #f4a911;
}

.sidebar-warning > .sidebar-menu > li > ul > li:after {
  background-color: #f7c051 !important;
}

.sidebar-warning > .sidebar-menu > li > ul > li a {
  color: #FFFFFF;
}

.sidebar-warning > .sidebar-menu > li > ul > li a:before {
  color: #f7c051 !important;
}

.sidebar-warning > .sidebar-menu > li > ul > li a:hover:before {
  color: #FFFFFF !important;
}

.sidebar-warning > .sidebar-menu > li > ul > li.active a {
  color: #FFFFFF;
}

.sidebar-warning > .sidebar-menu > li > ul > li.active a:before {
  color: #f7c45a;
}

.sidebar-warning > .sidebar-menu > li > ul > li ul {
  background-color: #f5b633;
}

.sidebar-warning > .sidebar-menu li {
  color: #FFFFFF !important;
}

.sidebar-warning > .sidebar-menu li.sidebar-category {
  background-color: #f7c051 !important;
}

.sidebar-warning > .sidebar-content {
  border-bottom: 2px solid #f7c45a;
}

.sidebar-warning > .sidebar-content img,
.sidebar-warning > .sidebar-content .online {
  border: 2px solid #f7c45a !important;
}

.sidebar-warning > .sidebar-content .media-heading span {
  color: #FFFFFF;
}

.sidebar-warning > .sidebar-content small,
.sidebar-warning > .sidebar-content .media-heading {
  color: #FFFFFF;
}

.sidebar-warning > .sidebar-content .online {
  background-color: #72a53b !important;
}

.sidebar-warning > .sidebar-footer {
  background-color: #f7c051;
}

.sidebar-warning > .sidebar-footer a {
  color: #FFFFFF;
}

.sidebar-warning .nicescroll-rails div {
  background-color: #f8c764 !important;
}

.sidebar-warning.sidebar-box .sidebar-menu > li.active > a > .icon i,
.sidebar-warning.sidebar-rounded .sidebar-menu > li.active > a > .icon i,
.sidebar-warning.sidebar-circle .sidebar-menu > li.active > a > .icon i {
  background-color: #f8cd73 !important;
}

.sidebar-warning.sidebar-box .sidebar-menu > li > a > .icon:after,
.sidebar-warning.sidebar-rounded .sidebar-menu > li > a > .icon:after,
.sidebar-warning.sidebar-circle .sidebar-menu > li > a > .icon:after {
  border: 1px solid #f7c051;
}

.sidebar-warning.sidebar-box .sidebar-menu > li > a > .icon i,
.sidebar-warning.sidebar-rounded .sidebar-menu > li > a > .icon i,
.sidebar-warning.sidebar-circle .sidebar-menu > li > a > .icon i {
  border: 2px solid #f7c051;
  background-color: #f6bf4c;
}

.sidebar-warning.sidebar-box .sidebar-menu > li > ul:after,
.sidebar-warning.sidebar-rounded .sidebar-menu > li > ul:after,
.sidebar-warning.sidebar-circle .sidebar-menu > li > ul:after {
  border-left: 2px solid #F6BB42 !important;
}

.sidebar-warning.sidebar-box .sidebar-menu > li > ul > li:after,
.sidebar-warning.sidebar-rounded .sidebar-menu > li > ul > li:after,
.sidebar-warning.sidebar-circle .sidebar-menu > li > ul > li:after {
  z-index: 1;
  width: 8px;
  height: 8px;
  left: 26px;
  top: 13px;
  bottom: auto;
  border-color: transparent;
  -moz-transition: all 0.5s ease-in-out 0s;
  -o-transition: all 0.5s ease-in-out 0s;
  -webkit-transition: all 0.5s ease-in-out;
  -webkit-transition-delay: 0s;
  transition: all 0.5s ease-in-out 0s;
  -moz-box-shadow: 0 0 0 2px #F6BB42;
  -webkit-box-shadow: 0 0 0 2px #F6BB42;
  box-shadow: 0 0 0 2px #F6BB42;
}

.sidebar-warning.sidebar-box .sidebar-menu > li > ul > li a:before,
.sidebar-warning.sidebar-rounded .sidebar-menu > li > ul > li a:before,
.sidebar-warning.sidebar-circle .sidebar-menu > li > ul > li a:before {
  content: "\2014\00a0";
  margin-left: 13px;
}

.sidebar-danger {
  background-color: #e74b31 !important;
}

.sidebar-danger:after {
  background-color: #e74b31 !important;
}

.sidebar-danger > .sidebar-menu > li:hover {
  background-color: #e64328 !important;
}

.sidebar-danger > .sidebar-menu > li:hover.submenu > ul > li:hover a {
  background-color: #e5371a !important;
}

.sidebar-danger > .sidebar-menu > li:hover.submenu > ul > li > ul {
  background-color: #e74b31 !important;
}

.sidebar-danger > .sidebar-menu > li:first-child > a > .icon:after {
  top: -1px;
}

.sidebar-danger > .sidebar-menu > li:last-child > a > .icon:after {
  bottom: 6px;
}

.sidebar-danger > .sidebar-menu > li.sidebar-category {
  background-color: #eb634d !important;
}

.sidebar-danger > .sidebar-menu > li > a:hover .text,
.sidebar-danger > .sidebar-menu > li > a:hover .icon > i {
  color: #FFFFFF;
}

.sidebar-danger > .sidebar-menu > li > a > .icon i {
  color: #ffffff;
}

.sidebar-danger > .sidebar-menu > li > a > .count {
  background-color: #ec6b56;
  color: #FFFFFF;
}

.sidebar-danger > .sidebar-menu > li > a > span {
  color: #FFFFFF;
}

.sidebar-danger > .sidebar-menu > li.active {
  background-color: #ec6b56 !important;
}

.sidebar-danger > .sidebar-menu > li.active > a > .icon {
  text-shadow: none !important;
}

.sidebar-danger > .sidebar-menu > li.active > a > .icon i {
  color: #FFFFFF !important;
}

.sidebar-danger > .sidebar-menu > li.active > a span {
  color: #FFFFFF;
}

.sidebar-danger > .sidebar-menu > li > ul > li {
  background-color: #dc3519;
}

.sidebar-danger > .sidebar-menu > li > ul > li:after {
  background-color: #eb634d !important;
}

.sidebar-danger > .sidebar-menu > li > ul > li a {
  color: #FFFFFF;
}

.sidebar-danger > .sidebar-menu > li > ul > li a:before {
  color: #eb634d !important;
}

.sidebar-danger > .sidebar-menu > li > ul > li a:hover:before {
  color: #FFFFFF !important;
}

.sidebar-danger > .sidebar-menu > li > ul > li.active a {
  color: #FFFFFF;
}

.sidebar-danger > .sidebar-menu > li > ul > li.active a:before {
  color: #ec6b56;
}

.sidebar-danger > .sidebar-menu > li > ul > li ul {
  background-color: #e74b31;
}

.sidebar-danger > .sidebar-menu li {
  color: #FFFFFF !important;
}

.sidebar-danger > .sidebar-menu li.sidebar-category {
  background-color: #eb634d !important;
}

.sidebar-danger > .sidebar-content {
  border-bottom: 2px solid #ec6b56;
}

.sidebar-danger > .sidebar-content img,
.sidebar-danger > .sidebar-content .online {
  border: 2px solid #ec6b56 !important;
}

.sidebar-danger > .sidebar-content .media-heading span {
  color: #FFFFFF;
}

.sidebar-danger > .sidebar-content small,
.sidebar-danger > .sidebar-content .media-heading {
  color: #FFFFFF;
}

.sidebar-danger > .sidebar-content .online {
  background-color: #72a53b !important;
}

.sidebar-danger > .sidebar-footer {
  background-color: #eb634d;
}

.sidebar-danger > .sidebar-footer a {
  color: #FFFFFF;
}

.sidebar-danger .nicescroll-rails div {
  background-color: #ed735f !important;
}

.sidebar-danger.sidebar-box .sidebar-menu > li.active > a > .icon i,
.sidebar-danger.sidebar-rounded .sidebar-menu > li.active > a > .icon i,
.sidebar-danger.sidebar-circle .sidebar-menu > li.active > a > .icon i {
  background-color: #ee7f6d !important;
}

.sidebar-danger.sidebar-box .sidebar-menu > li > a > .icon:after,
.sidebar-danger.sidebar-rounded .sidebar-menu > li > a > .icon:after,
.sidebar-danger.sidebar-circle .sidebar-menu > li > a > .icon:after {
  border: 1px solid #eb634d;
}

.sidebar-danger.sidebar-box .sidebar-menu > li > a > .icon i,
.sidebar-danger.sidebar-rounded .sidebar-menu > li > a > .icon i,
.sidebar-danger.sidebar-circle .sidebar-menu > li > a > .icon i {
  border: 2px solid #eb634d;
  background-color: #ea5f48;
}

.sidebar-danger.sidebar-box .sidebar-menu > li > ul:after,
.sidebar-danger.sidebar-rounded .sidebar-menu > li > ul:after,
.sidebar-danger.sidebar-circle .sidebar-menu > li > ul:after {
  border-left: 2px solid #E9573F !important;
}

.sidebar-danger.sidebar-box .sidebar-menu > li > ul > li:after,
.sidebar-danger.sidebar-rounded .sidebar-menu > li > ul > li:after,
.sidebar-danger.sidebar-circle .sidebar-menu > li > ul > li:after {
  z-index: 1;
  width: 8px;
  height: 8px;
  left: 26px;
  top: 13px;
  bottom: auto;
  border-color: transparent;
  -moz-transition: all 0.5s ease-in-out 0s;
  -o-transition: all 0.5s ease-in-out 0s;
  -webkit-transition: all 0.5s ease-in-out;
  -webkit-transition-delay: 0s;
  transition: all 0.5s ease-in-out 0s;
  -moz-box-shadow: 0 0 0 2px #E9573F;
  -webkit-box-shadow: 0 0 0 2px #E9573F;
  box-shadow: 0 0 0 2px #E9573F;
}

.sidebar-danger.sidebar-box .sidebar-menu > li > ul > li a:before,
.sidebar-danger.sidebar-rounded .sidebar-menu > li > ul > li a:before,
.sidebar-danger.sidebar-circle .sidebar-menu > li > ul > li a:before {
  content: "\2014\00a0";
  margin-left: 13px;
}

/* ========================================================================
 * SIDEBAR VARIANT
 * ======================================================================== */

.sidebar-box .sidebar-menu > li > a > .icon:after,
.sidebar-rounded .sidebar-menu > li > a > .icon:after,
.sidebar-circle .sidebar-menu > li > a > .icon:after {
  border: 1px solid #373737;
}

.sidebar-box .sidebar-menu > li > a > .icon i,
.sidebar-rounded .sidebar-menu > li > a > .icon i,
.sidebar-circle .sidebar-menu > li > a > .icon i {
  border: 2px solid #373737;
  background-color: #222222;
}

.sidebar-box .sidebar-menu > li > ul:after,
.sidebar-rounded .sidebar-menu > li > ul:after,
.sidebar-circle .sidebar-menu > li > ul:after {
  border-left: 2px solid #373737;
}

.sidebar-box .sidebar-menu > li > ul > li:after,
.sidebar-rounded .sidebar-menu > li > ul > li:after,
.sidebar-circle .sidebar-menu > li > ul > li:after {
  z-index: 1;
  width: 8px;
  height: 8px;
  left: 26px;
  top: 13px;
  bottom: auto;
  border-color: transparent;
  -moz-transition: all 0.5s ease-in-out 0s;
  -o-transition: all 0.5s ease-in-out 0s;
  -webkit-transition: all 0.5s ease-in-out;
  -webkit-transition-delay: 0s;
  transition: all 0.5s ease-in-out 0s;
  -moz-box-shadow: 0 0 0 2px #373737;
  -webkit-box-shadow: 0 0 0 2px #373737;
  box-shadow: 0 0 0 2px #373737;
}

.sidebar-box .sidebar-menu > li > ul > li a:before,
.sidebar-rounded .sidebar-menu > li > ul > li a:before,
.sidebar-circle .sidebar-menu > li > ul > li a:before {
  content: "\2014\00a0";
  margin-left: 13px;
}

.sidebar-box .sidebar-content img {
  border-radius: 0px;
}

.sidebar-box .sidebar-menu > li > a > .icon i {
  border-radius: 0px;
}

.sidebar-box .sidebar-menu > li > ul > li:after {
  border-radius: 0px;
}

.sidebar-rounded .sidebar-content img {
  border-radius: 3px;
}

.sidebar-rounded .sidebar-menu > li > a > .icon i {
  border-radius: 3px;
}

.sidebar-rounded .sidebar-menu > li > ul > li:after {
  border-radius: 3px;
}

.sidebar-circle .sidebar-content img {
  border-radius: 50%;
}

.sidebar-circle .sidebar-menu > li > a > .icon i {
  border-radius: 50%;
}

.sidebar-circle .sidebar-menu > li > ul > li:after {
  border-radius: 50%;
}

/* ========================================================================
 * SIDEBAR PROFILE
 * ======================================================================== */

.sidebar-profile {
  background-color: #2A2A2A;
}

.sidebar-profile .panel {
  background-color: #323232;
}

.sidebar-profile .list-unstyled {
  margin: 15px;
}

.sidebar-profile .list-unstyled li {
  padding: 5px 0px;
  font-size: 12px;
  color: #777;
}

.sidebar-profile .list-unstyled li:first-child {
  padding-top: 0px;
}

.sidebar-profile .list-unstyled li:last-child {
  padding-bottom: 0px;
}

.sidebar-profile .list-unstyled li i {
  width: 15px;
}

.sidebar-profile .media .media-body .media-heading {
  font-weight: 400;
}

.sidebar-profile .media-list {
  width: 220px;
  height: auto;
  padding: 5px 0px;
}

.sidebar-profile .media-list.activity > .media .media-object {
  width: 15px;
  height: 15px;
}

.sidebar-profile .media-list.activity > .media .media-heading {
  font-size: 13px;
}

.sidebar-profile .media-list.activity > .media .media-meta.time {
  float: left !important;
}

.sidebar-profile .media-list.activity > .media .media-body {
  border-bottom: none !important;
}

.sidebar-profile .media-list.working > .media .media-object {
  width: 35px;
  height: 35px;
}

.sidebar-profile .media-list > .media {
  padding: 0px 15px;
  line-height: 18px;
  opacity: .8;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.sidebar-profile .media-list > .media .media-object i {
  color: #777;
}

.sidebar-profile .media-list > .media .media-heading {
  text-transform: capitalize !important;
  font-weight: 400 !important;
  font-size: 14px;
  color: #777 !important;
}

.sidebar-profile .media-list > .media .media-body {
  position: relative;
  width: 145px;
}

.sidebar-profile .media-list > .media .media-body .media-meta {
  color: #5a5a5a !important;
}

.sidebar-profile .media-list > .media .media-body .media-meta.status {
  float: left;
  text-transform: capitalize;
  margin-top: 3px;
}

.sidebar-profile .media-list > .media .media-body .media-meta.time {
  float: right;
  margin-top: 3px;
}

.sidebar-profile .media-list > .media .media-body .media-meta.device {
  position: absolute;
  top: 5px;
  right: 8px;
}

.sidebar-profile .media-list > a {
  border: none;
}

/* ========================================================================
 * SIDEBAR LAYOUT
 * ======================================================================== */

.sidebar-layout {
  background-color: #2A2A2A;
}

.sidebar-layout .list-unstyled {
  margin: 15px;
}

.sidebar-layout .list-unstyled li {
  padding: 3px 0px;
  font-size: 13px;
}

.sidebar-layout .list-unstyled li:first-child {
  padding-top: 0px;
}

.sidebar-layout .list-unstyled li:last-child {
  padding-bottom: 0px;
}

.sidebar-layout .list-unstyled li i {
  width: 15px;
}

.sidebar-layout .list-unstyled li .rdio {
  margin-top: 0px;
}

.sidebar-layout .list-unstyled li .rdio label {
  vertical-align: middle;
  color: #777;
}

.sidebar-layout .list-unstyled li .rdio label:before {
  border: none !important;
  background-color: #444444;
}

.sidebar-layout .list-unstyled li:last-child .rdio label {
  margin-bottom: 0px !important;
  vertical-align: top;
  margin-top: 2px;
}

/* ========================================================================
 * SIDEBAR SETTINGS
 * ======================================================================== */

.sidebar-setting {
  background-color: #2A2A2A;
}

.sidebar-setting .list-group .list-group-item {
  background-color: #2A2A2A;
  border: none;
  border-bottom: 2px solid #373737 !important;
}

.sidebar-setting .list-group .list-group-item:last-child {
  border-bottom: none;
}

.sidebar-setting .list-group .list-group-item .progress {
  background-color: #373737;
}

.sidebar-setting > .content {
  height: 592px;
}

.sidebar-setting .media .media-body .media-heading {
  font-weight: 400;
}

.sidebar-setting .list-group {
  padding: 10px;
}

.sidebar-setting .list-group .list-group-item {
  padding: 10px 5px;
  border: none;
}

.sidebar-setting .list-group .list-group-item:first-child {
  padding-top: 0px;
}

.sidebar-setting .list-group .list-group-item:last-child {
  padding-bottom: 0px;
  border-bottom: none;
}

.sidebar-setting .details {
  margin: 0px 0px 5px 0px;
}

.sidebar-setting .details span {
  font-size: 12px;
  opacity: .7;
}

/* ========================================================================
 * SIDEBAR CHAT
 * ======================================================================== */

.sidebar-chat {
  background-color: #2A2A2A;
}

.sidebar-chat .panel {
  background-color: #323232;
}

.sidebar-chat .media-list {
  width: 220px;
  height: auto;
  padding: 10px 0px;
}

.sidebar-chat .media-list > .media {
  padding: 5px 15px;
  line-height: 18px;
  opacity: .8;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.sidebar-chat .media-list > .media .media-object {
  width: 35px;
  height: 35px;
}

.sidebar-chat .media-list > .media .media-heading {
  text-transform: capitalize !important;
  font-weight: 400 !important;
  font-size: 14px;
  color: #777 !important;
}

.sidebar-chat .media-list > .media .media-body {
  position: relative;
  width: 145px;
}

.sidebar-chat .media-list > .media .media-body .media-meta {
  color: #5a5a5a !important;
}

.sidebar-chat .media-list > .media .media-body .media-meta.status {
  float: left;
  text-transform: capitalize;
  margin-top: 3px;
}

.sidebar-chat .media-list > .media .media-body .media-meta.time {
  float: right;
  margin-top: 3px;
}

.sidebar-chat .media-list > .media .media-body .media-meta.device {
  position: absolute;
  top: 5px;
  right: 8px;
}

.sidebar-chat .media-list > a {
  border: none;
}

.sidebar-chat form {
  margin: 15px !important;
}

.sidebar-chat form .form-group {
  margin-bottom: 0px !important;
}

.sidebar-chat form .form-group input {
  background-color: #323232;
  border: none;
  padding-right: 33px;
}

.sidebar-chat form .form-group input:focus,
.sidebar-chat form .form-group input:active {
  border: none !important;
}

.sidebar-chat form .form-group .form-control-feedback {
  right: 0px;
  color: #777;
}

/* ========================================================================
 * SIDEBAR SUMMARY
 * ======================================================================== */

.sidebar-summary {
  padding: 0px;
  margin: 20px 0px 0px;
  list-style: none outside none;
}

.sidebar-summary .title {
  color: #848484;
}

.sidebar-summary li {
  padding: 5px 15px;
}

.sidebar-summary li:first-child {
  padding-top: 20px;
}

.sidebar-summary li:last-child {
  padding-bottom: 10px;
}

.sidebar-summary li .list-info {
  float: left;
  line-height: normal;
}

.sidebar-summary li .list-info span {
  line-height: normal;
  text-transform: uppercase;
  font-size: 10px;
  opacity: 0.4;
  color: #919191;
}

.sidebar-summary li .list-info h4 {
  margin: 2px 0px 0px 0px;
  font-size: 16px;
  opacity: 0.7;
  color: #d0d0d0;
}

.sidebar-summary li .chart {
  float: right;
  margin-top: 5px;
  opacity: 0.6;
  width: auto;
  height: auto;
  background-color: #373737;
  padding: 5px;
}

.sidebar-summary .sidebar-category {
  padding: 0px 15px;
  margin: 0px;
}

/* ========================================================================
 * SIDEBAR THEMES
 * ======================================================================== */

.sidebar-themes {
  text-align: center;
  padding: 15px 10px 10px 10px;
}

.sidebar-themes.navbar-color a,
.sidebar-themes.sidebar-color a {
  width: 24px;
}

.sidebar-themes a {
  width: 18px;
  height: 18px;
  display: inline-block;
  opacity: .7;
}

.sidebar-themes a:hover {
  opacity: 1;
}

/* ========================================================================
 * SIDEBAR TASK
 * ======================================================================== */

.sidebar-task {
  padding: 10px 10px 15px !important;
}
@charset "UTF-8";

/* ========================================================================
 * TABLE OF CONTENTS
 * ========================================================================
   01. ALERT
   02. CALLOUT
   03. BADGE
   04. BREADCRUMB
   05. BUTTON
   06. DROPDOWN
   07. FORM
   08. IMG BORDERED
   09. LABEL
   10. MEDIA IMAGE
   11. MISC
   12. MODALS
   13. PAGINATION
   14. PANEL
   15. PROGRESS BAR
   16. RATING STAR
   17. RESET
   18. RIBBONS
   19. TABLE
   20. TABS
   21. THUMBNAIL
   22. TOOLTIP
   23. TYPOGRAPHY
   24. WIDGETS
 * ======================================================================== */

/* ========================================================================
 * WIDGETS
 * ======================================================================== */

/* ========================================================================
 * TABLE OF CONTENT
 * ========================================================================
   OVERVIEW
   MINI STAT
   MINI STAT TYPE 3
   MINI STAT TYPE 4
   MINI STAT TYPE 5
   MINI STAT TYPE 6
   BLOG
   PROFILE
   CURRENT CITY
   FORECAST
   VISITOR CHART
   TO-DO
   RECENT ACTIVITY
   OVERVIEW SOCIAL
 * ======================================================================== */

.widget-wrapper {
  position: relative;
  border: none !important;
}

/* ========================================================================
 * OVERVIEW
 * ======================================================================== */

.widget-overview .overview-label {
  text-transform: uppercase;
  font-size: 11px;
  opacity: 0.75;
  display: block;
  line-height: normal;
  margin-bottom: 2px;
}

.widget-overview h1 {
  margin: 0;
  line-height: 36px;
  font-size: 38px;
}

.widget-overview .row {
  margin-bottom: 10px;
}

.widget-overview .row:last-child {
  margin-bottom: 0px;
}

.widget-overview h4 {
  margin-top: 2px;
  margin-bottom: 0px;
}

/* ========================================================================
 * MINI STAT
 * ======================================================================== */

.mini-stat {
  padding: 15px;
  margin-bottom: 20px;
}

.mini-stat-chart {
  width: auto;
  height: 60px;
  display: inline-block;
  line-height: 60px;
  text-align: center;
  float: left;
  margin-right: 10px;
}

.mini-stat-icon {
  width: 60px;
  height: 60px;
  display: inline-block;
  line-height: 60px;
  text-align: center;
  font-size: 30px;
  background: none repeat scroll 0% 0% #EEE;
  border-radius: 100%;
  float: left;
  margin-right: 10px;
  color: #FFF;
}

.mini-stat-info {
  font-size: 12px;
  padding-top: 2px;
}

.mini-stat-info span {
  display: block;
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 5px;
  margin-top: 7px;
}

/* ========================================================================
 * MINI STAT TYPE 3
 * ======================================================================== */

.mini-stat-type-3 {
  position: relative;
  background-color: #FBFBFB;
  padding: 10px;
  margin-bottom: 20px;
}

.mini-stat-type-3 h3 {
  margin-top: 8px;
}

.mini-stat-type-3 .meta-stat {
  display: block;
  border-top: 1px solid #DDD;
  font-size: 10px;
  color: #A7A7A7;
  padding-top: 5px;
  margin: 0 40px;
}

/* ========================================================================
 * MINI STAT TYPE 4
 * ======================================================================== */

.mini-stat-type-4 {
  text-align: center;
  margin-bottom: 20px;
  background-color: #ffffff;
  padding: 20px;
}

.mini-stat-type-4 h1,
.mini-stat-type-4 h3 {
  margin-top: 0;
  font-weight: 300;
}

.mini-stat-type-4 h1 {
  font-size: 100px;
}

/* ========================================================================
 * MINI STAT TYPE 5
 * ======================================================================== */

.mini-stat-type-5 {
  text-align: center;
  margin-bottom: 20px;
  background-color: #ffffff;
  padding: 20px;
}

.mini-stat-type-5.border-facebook {
  border-top: 5px solid #3b5998;
}

.mini-stat-type-5.border-twitter {
  border-top: 5px solid #00a0d1;
}

.mini-stat-type-5.border-youtube {
  border-top: 5px solid #c4302b;
}

.mini-stat-type-5 h1,
.mini-stat-type-5 h3 {
  margin-top: 0;
  font-weight: 300;
}

.mini-stat-type-5 h3 {
  font-size: 18px;
}

.mini-stat-type-5 h3 .label {
  display: inline-block;
  padding: 0;
  font-size: 10px;
  vertical-align: middle;
  padding-top: 2px;
}

.mini-stat-type-5 h1 {
  font-size: 35px;
  margin: 25px 0;
  position: relative;
}

.mini-stat-type-5 h1 .status,
.mini-stat-type-5 h1 .number {
  display: inline-block;
}

.mini-stat-type-5 h1 .status {
  font-size: 15px;
  vertical-align: middle;
  margin-left: -55px;
}

.mini-stat-type-5 h1 .status .percent,
.mini-stat-type-5 h1 .status i {
  display: block;
}

.mini-stat-type-5 p {
  margin: 0;
  font-size: 12px;
}

/* ========================================================================
 * MINI STAT TYPE 6
 * ======================================================================== */

.mini-stat-type-6 {
  background-color: #ffffff;
  margin-bottom: 20px;
}

.mini-stat-type-6 > .inner {
  padding: 10px;
}

.mini-stat-type-6 > .inner h3 {
  font-size: 30px;
  font-weight: bold;
  margin: 0 0 3px 0;
  white-space: nowrap;
  padding: 0;
}

.mini-stat-type-6 > .inner p {
  font-size: 15px;
}

.mini-stat-type-6 .icon {
  position: absolute;
  top: 20px;
  right: 25px;
  z-index: 0;
  font-size: 50px;
  color: rgba(0, 0, 0, 0.15);
}

.mini-stat-type-6 .small-box-footer {
  position: relative;
  text-align: center;
  padding: 10px 0;
  font-size: 15px;
  color: #fff;
  color: rgba(255, 255, 255, 0.8);
  display: block;
  z-index: 10;
  background: rgba(0, 0, 0, 0.1);
  text-decoration: none;
}

.mini-stat-type-6 .small-box-footer:hover {
  background: rgba(0, 0, 0, 0.15);
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

/* ========================================================================
 * MINI STAT TYPE 2
 * ======================================================================== */

.mini-stat-type-2 {
  position: relative;
  background-color: #FBFBFB;
  padding: 10px;
  margin-bottom: 20px;
}

.mini-stat-type-2 h3,
.mini-stat-type-2 p {
  margin: 0;
}

.mini-stat-type-2.border-danger {
  border-top: 15px solid #E9573F;
}

.mini-stat-type-2.border-success {
  border-top: 15px solid #8CC152;
}

.mini-stat-type-2.border-primary {
  border-top: 15px solid #00B1E1;
}

.mini-stat-type-2.border-lilac {
  border-top: 15px solid #906094;
}

.mini-stat-type-2 .text-muted {
  font-size: 10px;
}

.mini-stat-type-2 .overview-icon {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  text-align: center;
  display: block;
  content: "";
  line-height: 50px;
  font-size: 30px;
  margin: 15px auto;
}

/* ========================================================================
 * BLOG
 * ======================================================================== */

.panel-blog {
  padding: 20px;
}

.panel-blog .panel-body {
  background-color: #ffffff !important;
}

#blog-list .blog-title {
  color: #333;
  margin: 5px 0px 0px 0px;
  font-weight: 400;
  font-size: 16px;
}

#blog-list .blog-title a {
  color: #333;
}

#blog-list .blog-subtitle {
  font-size: 15px;
  text-transform: uppercase;
  color: #333;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 15px;
  margin-top: 20px;
}

#blog-list .blog-meta {
  list-style: none;
  padding: 0px;
  margin: 5px 0px;
  display: block;
}

#blog-list .blog-meta:after {
  clear: both;
  display: block;
  content: '';
}

#blog-list .blog-meta li {
  float: left;
  padding: 0px 5px;
  border-right: 1px solid #DDD;
  line-height: normal;
  font-size: 11px;
  margin-bottom: 5px;
}

#blog-list .blog-meta li:first-child {
  padding-left: 0px;
}

#blog-list .blog-meta li:last-child {
  padding-right: 0;
  border-right: 0;
}

#blog-list .blog-author {
  margin: 20px 0px 30px;
  border-top: 1px solid #DDD;
  border-bottom: 1px solid #DDD;
  padding: 20px 0px;
}

#blog-list .blog-item {
  background: #fcfcfc;
  margin-bottom: 20px;
  position: relative;
}

#blog-list .blog-item .carousel {
  margin-bottom: 10px;
  padding-right: 10px;
  width: 300px;
}

#blog-list .blog-item .carousel:hover .carousel-control {
  display: block;
}

#blog-list .blog-item .carousel-caption {
  bottom: 10px;
  right: 10px;
  left: auto;
  padding-bottom: 0px;
  padding-top: 0px;
}

#blog-list .blog-item .carousel-control {
  display: block;
  background-image: none;
}

#blog-list .blog-item .carousel-control span {
  position: absolute;
  top: 40%;
  font-size: 20px;
  width: 30px;
  height: 30px;
  border: 1px solid white;
  border-radius: 50%;
  line-height: 27px;
}

#blog-list .blog-item .carousel-control.left span {
  right: 0px;
}

#blog-list .blog-item .carousel-control.right {
  right: 12px;
}

#blog-list .blog-item .carousel-control.right span {
  left: 0px;
}

#blog-list .blog-item .carousel-indicators {
  left: 15px;
  margin-left: 0px;
  bottom: 0px;
  width: auto;
}

#blog-list .blog-img {
  padding-right: 10px;
  width: 300px;
}

#blog-list .blog-details {
  padding-top: 4px;
}

#blog-list .blog-img,
#blog-list .blog-details,
#blog-list .quote,
#blog-list .carousel {
  display: table-cell;
  vertical-align: top;
}

#blog-list .blog-summary {
  font-size: 13px;
}

#blog-list .blog-summary p {
  margin: 5px 0px;
}

#blog-list .blog-summary .btn {
  margin-top: 5px;
}

#blog-list .blog-quote .quote-primary a {
  color: #fff;
  background-color: #00B1E1;
}

#blog-list .blog-quote .quote-primary a:hover {
  background-color: #009dc8;
}

#blog-list .blog-quote .quote-success a {
  color: #fff;
  background-color: #8CC152;
}

#blog-list .blog-quote .quote-success a:hover {
  background-color: #7fb842;
}

#blog-list .blog-quote .quote-info a {
  color: #fff;
  background-color: #63D3E9;
}

#blog-list .blog-quote .quote-info a:hover {
  background-color: #4dcde6;
}

#blog-list .blog-quote .quote-warning a {
  color: #fff;
  background-color: #F6BB42;
}

#blog-list .blog-quote .quote-warning a:hover {
  background-color: #f5b22a;
}

#blog-list .blog-quote .quote-danger a {
  color: #fff;
  background-color: #E9573F;
}

#blog-list .blog-quote .quote-danger a:hover {
  background-color: #e64328;
}

#blog-list .blog-quote .quote-lilac a {
  color: #fff;
  background-color: #906094;
}

#blog-list .blog-quote .quote-lilac a:hover {
  background-color: #815685;
}

#blog-list .blog-quote .quote-inverse a {
  color: #fff;
  background-color: #2A2A2A;
}

#blog-list .blog-quote .quote-inverse a:hover {
  background-color: #1d1d1d;
}

#blog-list .blog-quote .quote-teal a {
  color: #fff;
  background-color: #37BC9B;
}

#blog-list .blog-quote .quote-teal a:hover {
  background-color: #31a88b;
}

#blog-list .blog-quote .quote {
  margin: 0;
  font-size: 15px;
  line-height: 24px;
  width: 300px;
  padding-right: 10px;
}

#blog-list .blog-quote .quote a {
  padding: 22px;
  color: white;
  display: block;
  text-align: center;
  text-decoration: none;
}

#blog-list .blog-quote .quote a:hover {
  text-decoration: none;
}

#blog-list .blog-quote .quote-author {
  display: block;
  opacity: 0.5;
}

#blog-list .blog-quote .blog-meta {
  margin-top: 5px;
  margin-bottom: 5px;
}

#blog-list .blog-video {
  display: table-cell;
  position: relative;
  width: 290px;
  overflow: hidden;
  vertical-align: top;
  height: 235px;
}

#blog-list .blog-video iframe {
  position: absolute;
  width: 100%;
  height: 218px;
  border: none;
  top: 0;
  left: 0;
}

#blog-list .blog-video + .blog-details {
  padding-left: 10px;
}

#blog-list .blog-grid .media {
  border-bottom: 1px solid #DDD;
  padding: 15px;
  margin: 0px;
}

#blog-list .blog-grid .media:last-child {
  border-bottom: none;
  margin-bottom: 20px;
}

#blog-list .blog-grid .thumbnail {
  margin: 0px;
}

#blog-list .blog-grid a {
  font-size: 13px;
}

#blog-list .blog-grid b {
  font-size: 12px;
}

#blog-list .blog-grid img {
  width: 55px;
}

#blog-list .blog-list-slider .carousel-indicators {
  top: -33px;
  right: 10px;
  width: 17%;
  left: inherit;
}

.blog-title {
  color: #333;
  margin: 0px;
  font-weight: 400;
  font-size: 16px;
}

.blog-title a {
  color: #333;
}

.blog-subtitle {
  font-size: 15px;
  text-transform: uppercase;
  color: #333;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 15px;
  margin-top: 20px;
}

.blog-meta {
  list-style: none;
  padding: 0px;
  margin: 10px 0px 10px;
  display: block;
}

.blog-meta:after {
  clear: both;
  display: block;
  content: '';
}

.blog-meta li {
  float: left;
  padding: 0px 5px;
  border-right: 1px solid #DDD;
  line-height: normal;
  font-size: 11px;
  margin-bottom: 5px;
}

.blog-meta li:first-child {
  padding-left: 0px;
}

.blog-meta li:last-child {
  padding-right: 0;
  border-right: 0;
}

.blog-img {
  display: block;
  width: 100%;
  margin-bottom: 10px;
}

.blog-author {
  margin: 20px 0px 30px;
  border-top: 1px solid #DDD;
  border-bottom: 1px solid #DDD;
  padding: 20px 0px;
}

.blog-item {
  background: #fcfcfc;
  margin-bottom: 20px;
  position: relative;
}

.blog-item .carousel {
  margin-bottom: 10px;
}

.blog-item .carousel:hover .carousel-control {
  display: block;
}

.blog-item .carousel-caption {
  bottom: 10px;
  right: 10px;
  left: auto;
  padding-bottom: 0px;
  padding-top: 0px;
}

.blog-item .carousel-control {
  display: block;
  background-image: none;
}

.blog-item .carousel-control span {
  position: absolute;
  top: 40%;
  font-size: 20px;
  width: 30px;
  height: 30px;
  border: 1px solid white;
  border-radius: 50%;
  line-height: 27px;
}

.blog-item .carousel-control.left span {
  right: 0px;
}

.blog-item .carousel-control.right span {
  left: 0px;
}

.blog-item .carousel-indicators {
  left: 15px;
  margin-left: 0px;
  bottom: 0px;
  width: auto;
}

.blog-details {
  padding: 10px;
}

.blog-summary {
  font-size: 13px;
}

.blog-summary p {
  margin: 10px 0;
}

.blog-summary .btn {
  margin-top: 10px;
}

.blog-quote .quote-primary a {
  color: #fff;
  background-color: #00B1E1;
}

.blog-quote .quote-primary a:hover {
  background-color: #009dc8;
}

.blog-quote .quote-success a {
  color: #fff;
  background-color: #8CC152;
}

.blog-quote .quote-success a:hover {
  background-color: #7fb842;
}

.blog-quote .quote-info a {
  color: #fff;
  background-color: #63D3E9;
}

.blog-quote .quote-info a:hover {
  background-color: #4dcde6;
}

.blog-quote .quote-warning a {
  color: #fff;
  background-color: #F6BB42;
}

.blog-quote .quote-warning a:hover {
  background-color: #f5b22a;
}

.blog-quote .quote-danger a {
  color: #fff;
  background-color: #E9573F;
}

.blog-quote .quote-danger a:hover {
  background-color: #e64328;
}

.blog-quote .quote-lilac a {
  color: #fff;
  background-color: #906094;
}

.blog-quote .quote-lilac a:hover {
  background-color: #815685;
}

.blog-quote .quote-inverse a {
  color: #fff;
  background-color: #2A2A2A;
}

.blog-quote .quote-inverse a:hover {
  background-color: #1d1d1d;
}

.blog-quote .quote-teal a {
  color: #fff;
  background-color: #37BC9B;
}

.blog-quote .quote-teal a:hover {
  background-color: #31a88b;
}

.blog-quote .quote {
  margin: 0;
  font-size: 15px;
  line-height: 24px;
}

.blog-quote .quote a {
  padding: 15px;
  color: white;
  display: block;
  text-align: center;
}

.blog-quote .quote a:hover {
  text-decoration: none;
}

.blog-quote .quote-author {
  display: block;
  opacity: 0.5;
  text-transform: capitalize;
}

.blog-quote .blog-meta {
  margin-top: 5px;
  margin-bottom: 5px;
}

.blog-video {
  overflow: hidden;
  height: 0;
  padding-top: 43px;
  padding-bottom: 50%;
  position: relative;
}

.blog-video iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 0;
  top: 0;
  left: 0;
}

.blog-list .media {
  border-bottom: 1px solid #DDD;
  padding: 15px;
  margin: 0px;
}

.blog-list .media:last-child {
  border-bottom: none;
  margin-bottom: 20px;
}

.blog-list .thumbnail {
  margin: 0px;
}

.blog-list a {
  font-size: 13px;
}

.blog-list b {
  font-size: 12px;
}

.blog-list img {
  width: 55px;
}

.blog-list-slider .carousel-indicators {
  top: -33px;
  right: 10px;
  width: 17%;
  left: inherit;
}

.blog-tags {
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-tags li,
.blog-tags a {
  display: inline-block;
  height: 24px;
  line-height: 24px;
  position: relative;
  font-size: 11px;
}

.blog-tags li {
  padding: 0px;
  margin-bottom: 10px;
}

.blog-tags a {
  margin-left: 20px;
  padding: 0 10px 0 12px;
  background: #00B1E1;
  color: #fff;
  text-decoration: none;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
  -moz-border-radius-topright: 4px;
  -webkit-border-top-right-radius: 4px;
  border-top-right-radius: 4px;
}

.blog-tags a:before {
  content: "";
  float: left;
  position: absolute;
  top: 0;
  left: -12px;
  width: 0;
  height: 0;
  border-color: transparent #00B1E1 transparent transparent;
  border-style: solid;
  border-width: 12px 12px 12px 0;
}

.blog-tags a:after {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  float: left;
  width: 4px;
  height: 4px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  background: #fff;
  -moz-box-shadow: -1px -1px 2px #00a5d2;
  -webkit-box-shadow: -1px -1px 2px #00a5d2;
  box-shadow: -1px -1px 2px #00a5d2;
}

.blog-tags a:hover {
  background: #555;
  color: white;
}

.blog-tags a:hover:before {
  border-color: transparent #555 transparent transparent;
}

.blog-twitter .blog-twitter-list {
  padding: 5px;
  position: relative;
  margin-bottom: 10px;
  border-right: solid 2px #DDD;
}

.blog-twitter .blog-twitter-list:hover {
  background-color: #e1e1e1;
  border-right: solid 2px #8CC152;
}

.blog-twitter .blog-twitter-list a {
  color: #4d90fe;
}

.blog-twitter .blog-twitter-list p {
  margin-bottom: 0;
}

.blog-twitter .blog-twitter-list span {
  color: #555;
  display: block;
  font-size: 12px;
}

.blog-twitter .blog-twitter-list .blog-twitter-icon {
  color: #c8c8c8;
  right: 10px;
  bottom: 10px;
  font-size: 30px;
  position: absolute;
}

.blog-gallery li {
  padding-right: 3px;
  margin-bottom: 10px;
  opacity: 0.8;
}

.blog-gallery li:hover {
  opacity: 1;
}

.comment-count {
  font-size: 13px;
  text-transform: uppercase;
  color: #333;
  margin-bottom: 15px;
  margin-top: 0px;
}

.comment-list .media {
  border-bottom: 1px dotted #DDD;
  padding-top: 15px !important;
  padding-bottom: 15px;
}

.comment-list .media:last-child {
  border-bottom: none;
}

.comment-list .media .media {
  border-bottom: none;
  padding-bottom: 0px;
}

.comment-list .media-object {
  width: 60px;
  margin-right: 5px;
}

.comment-list h4 {
  margin: 0px;
  color: #333;
  font-size: 16px;
}

.comment-list .media-body .media {
  border-top: 1px dotted #DDD;
  padding-top: 15px;
}

.comment-list .media-body p:last-child {
  margin-bottom: 0px;
}

.comment-list .reply {
  padding: 3px 8px;
  line-height: normal;
  border-radius: 2px;
}

@media (max-width: 360px) {
  #blog-list .blog-item {
    height: inherit !important;
  }

  #blog-list .blog-img,
  #blog-list .blog-quote .quote,
  #blog-list .blog-item .carousel,
  #blog-list .blog-video {
    width: 100%;
    display: block;
    padding-right: 0px;
  }
}

/* ========================================================================
 * PROFILE
 * ======================================================================== */

.profile-cover {
  width: 100%;
}

.profile-cover .cover {
  position: relative;
  border: 10px solid #FFF;
}

.profile-cover .cover .inner-cover {
  overflow: hidden;
  height: auto;
}

.profile-cover .cover .inner-cover img {
  border: 1px solid transparent;
  text-align: center;
  width: 100%;
}

.profile-cover .cover .inner-cover .cover-menu-mobile {
  position: absolute;
  top: 10px;
  right: 10px;
}

.profile-cover .cover .inner-cover .cover-menu-mobile button i {
  font-size: 17px;
}

.profile-cover .cover ul.cover-menu {
  padding-left: 150px;
  position: absolute;
  overflow: hidden;
  left: 1px;
  float: left;
  bottom: 0px;
  width: 100%;
  margin: 0px;
  background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.24);
}

.profile-cover .cover ul.cover-menu li {
  display: block;
  float: left;
  margin-right: 0px;
  padding: 0px 10px;
  line-height: 40px;
  height: 40px;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.profile-cover .cover ul.cover-menu li:hover {
  background-color: rgba(0, 0, 0, 0.44);
}

.profile-cover .cover ul.cover-menu li.active {
  background-color: rgba(0, 0, 0, 0.64);
}

.profile-cover .cover ul.cover-menu li a {
  color: #FFF;
  font-weight: bold;
  display: block;
  height: 40px;
  line-height: 40px;
  text-decoration: none;
}

.profile-cover .cover ul.cover-menu li a i {
  font-size: 18px;
}

.profile-cover .profile-body {
  margin: 0px auto 10px;
  position: relative;
}

.profile-cover .profile-timeline {
  padding: 15px;
}

/* ========================================================================
 * CURRENT CITY
 * ======================================================================== */

.weather-current-city {
  padding: 10px;
  color: #fff;
  margin-bottom: 20px;
}

.weather-current-city img {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 125px;
  -webkit-border-top-left-radius: 3px;
  -moz-border-radius-topleft: 3px;
  border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -moz-border-radius-topright: 3px;
  border-top-right-radius: 3px;
}

.current-city {
  display: block;
  font-size: 1em;
  font-weight: 700;
  margin-bottom: 10px;
}

.current-temp {
  display: block;
  font-weight: 700;
  letter-spacing: -3px;
  font-size: 2.8em;
  text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
  line-height: 1.1em;
}

.current-day {
  display: block;
  font-size: 1em;
  font-weight: 400;
  position: absolute;
}

.current-day-icon {
  display: block;
  float: right;
  font-size: 5.2em;
  font-weight: 700;
}

ul.days {
  list-style: none outside none;
  margin-top: 20px;
  padding: 0 10px;
  color: #fff;
}

ul.days li {
  text-align: center;
  border-left: 2px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 10px;
}

ul.days li:first-child {
  border-left: none;
}

ul.days li strong {
  position: relative;
  border-radius: 3px;
  font-size: 1.1em;
  text-transform: uppercase;
  line-height: 25px;
  margin-bottom: 5px;
  display: block;
}

ul.days li span {
  display: block;
  font-weight: 700;
  letter-spacing: -1px;
  font-size: 1.9em;
  margin-bottom: 5px;
}

/* ========================================================================
 * FORECAST
 * ======================================================================== */

.weather-forecast {
  position: relative;
  color: #fff;
}

.weather-forecast img {
  width: 100%;
  -moz-border-radius: 3px 3px 0px 0px;
  -webkit-border-radius: 3px;
  border-radius: 3px 3px 0px 0px;
}

.weather-forecast .title {
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 400;
  text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.8);
  color: #FFF;
  position: absolute;
  left: 30px;
  bottom: 15px;
}

.weather-forecast .country-select {
  position: absolute;
  top: 10px;
  right: 27px;
}

.weather-full-info {
  color: #CBCBCB;
  background-color: white;
  padding: 20px;
  -moz-border-radius: 0px 0px 3px 3px;
  -webkit-border-radius: 0px;
  border-radius: 0px 0px 3px 3px;
}

.weather-full-info .degree {
  font-size: 27px;
  font-weight: 600;
  display: inline-block;
  padding-left: 10px;
}

.weather-full-info .degree:after {
  content: "o";
  position: relative;
  top: -12px;
  font-size: 16px;
}

.weather-full-info ul {
  margin-bottom: 0px;
}

.weather-full-info ul li {
  list-style: none;
  border-left: 1px dotted #F1F2F7;
}

.weather-full-info ul li:first-child {
  border-left: none;
}

.weather-full-info ul li i {
  font-size: 25px;
}

.weather-full-info h2 {
  font-size: 14px;
  font-weight: 300;
  margin: 0px 0px 5px;
}

.weather-full-info .statistics {
  padding-top: 5px;
}

.weather-full-info .statistics:after {
  content: "o";
  position: relative;
  top: -5px;
  font-size: 10px;
}

.weather-full-info .today-status h1 {
  margin: 0px 0px 20px 0px;
  font-size: 19px;
}

.weather-full-info .today-status i {
  font-size: 30px;
  color: #81B71A;
}

@media (max-width: 600px) {
  .weather-full-info .today-status {
    text-align: center;
  }
}

@media (max-width: 360px) {
  .weather-full-info .today-status {
    margin-bottom: 10px;
  }

  .weather-full-info ul li {
    padding-bottom: 10px;
    padding-top: 10px;
    border-left: none !important;
  }
}

/* ========================================================================
 * VISITOR CHART
 * ======================================================================== */

.stat-stack.widget-visitor > .panel-body {
  background-color: #F5F5F5 !important;
}

.stat-stack.widget-visitor > .panel-body .text-strong {
  color: #636e7b;
}

.stat-stack.widget-visitor > .panel-body .text-muted {
  color: #777;
}

.stat-stack.widget-market > .panel-body {
  background-color: #FBFBFB !important;
}

.widget-visitor .stat-left .panel-footer {
  padding: 20px 10px 10px !important;
}

.widget-visitor .stat-left .panel-footer .border-right {
  border-right: 1px dotted #DDD;
}

.widget-visitor .stat-left .panel-footer .border-right:last-child {
  border-right: none;
}

.widget-visitor .stat-left .resize-chart {
  height: 250px;
}

.widget-visitor .stat-right .panel-footer {
  padding: 0px 20px 20px !important;
}

.widget-market .stat-left .panel-footer {
  padding: 20px 20px 10px !important;
}

.widget-market .stat-left .resize-chart {
  height: 310px;
}

.widget-market .stat-right .panel-footer {
  padding: 30px 20px 15px !important;
}

.widget-market .stat-right .resize-chart {
  width: 100%;
  height: 270px;
}

@media (max-width: 1024px) {
  .widget-market .stat-left .mini-stat .mini-stat-chart {
    float: none !important;
    margin-left: auto;
    margin-right: auto;
  }

  .widget-market .stat-left .mini-stat .mini-stat-info {
    text-align: center !important;
  }

  .widget-market .stat-left .panel-footer {
    padding: 20px 20px 10px !important;
  }
}

.stat-left {
  background-color: #F5F5F5;
}

.stat-left .panel-heading .panel-toolbar .btn-group .btn {
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.stat-left .panel-heading .panel-toolbar .btn-group .btn.dropdown-toggle {
  border-right: 1px solid rgba(255, 255, 255, 0.5);
}

.stat-left .panel-footer h4 {
  margin-top: 0px;
  margin-bottom: 5px;
}

.stat-left .mini-stat-info span {
  font-size: 18px;
}

.stat-left .mini-stat-info p {
  font-size: 11px;
}

.stat-left .resize-chart {
  width: 100%;
}

.stat-left .resize-chart > .legend > div,
.stat-left .resize-chart > .legend > table {
  top: 0px !important;
  left: 40px !important;
}

.stat-left .resize-chart > .legend > div:first-child {
  background-color: transparent !important;
}

.stat-left .resize-chart > .legend .legendColorBox {
  padding-right: 5px;
}

.stat-left .resize-chart > .legend .legendColorBox > div {
  border: none !important;
}

.stat-left .resize-chart > .legend .legendLabel {
  color: #FFFFFF;
}

@media (max-width: 360px) {
  .stat-left .panel-footer .row {
    margin: 0px;
  }

  .stat-left .panel-footer [class*="col-"] {
    border-bottom: 1px dotted #DDD;
    border-right: none !important;
    padding: 10px;
  }

  .stat-left .panel-footer [class*="col-"]:first-child {
    padding-top: 0px;
  }

  .stat-left .panel-footer [class*="col-"]:last-child {
    padding-bottom: 0px;
    border-bottom: none;
  }
}

.stat-right .panel-body {
  -moz-border-radius: 0px 3px 3px 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px 3px 3px 0px;
}

.stat-right .panel-body span {
  font-size: 12px;
}

.stat-right .progress {
  margin-bottom: 11px;
}

.stat-right .income-progress {
  padding: 0px 20px;
  background-color: #FBFBFB;
}

.stat-right .resize-chart {
  width: 100%;
  height: 100px;
}

.stat-right .panel-body {
  padding: 20px 20px 0px 20px !important;
}

.stat-right .panel-footer {
  padding: 0px 20px 10px !important;
  background-color: #FBFBFB;
  border-top: none;
}

.stat-right .panel-footer span {
  font-size: 11px;
}

.stat-right .flot-text {
  font-size: 11px;
  color: #999 !important;
}

/* ========================================================================
 * TO-DO
 * ======================================================================== */

.widget-todo .todo-list {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

.widget-todo .todo-list li {
  border-bottom: 1px solid #DDD;
  padding: 8px 10px 2px;
}

.widget-todo .todo-list li input:checked + label {
  text-decoration: line-through;
  color: #999;
  font-size: 15px;
}

/* ========================================================================
 * RECENT ACTIVITY
 * ======================================================================== */

.recent-activity {
  margin: 0;
  padding: 0;
  position: relative;
  margin-bottom: 30px;
}

.recent-activity > h3 {
  margin-top: 0;
  font-size: 20px;
  font-weight: 300;
}

.recent-activity-item {
  position: relative;
  margin: 0;
  padding: 0;
}

.recent-activity-item:before {
  content: "";
  position: absolute;
  display: block;
  width: 3px;
  background: #e6e6e8;
  top: 0px;
  bottom: -30px;
  margin-left: 8px;
}

.recent-activity-item.recent-activity-danger:before {
  background: #f6bbb1;
}

.recent-activity-item.recent-activity-danger .recent-activity-badge-userpic {
  border: 3px solid #f6bbb1;
}

.recent-activity-item.recent-activity-success:before {
  background: #cae3b0;
}

.recent-activity-item.recent-activity-success .recent-activity-badge-userpic {
  border: 3px solid #cae3b0;
}

.recent-activity-item.recent-activity-primary:before {
  background: #62ddff;
}

.recent-activity-item.recent-activity-primary .recent-activity-badge-userpic {
  border: 3px solid #62ddff;
}

.recent-activity-item.recent-activity-info:before {
  background: #d3f3f9;
}

.recent-activity-item.recent-activity-info .recent-activity-badge-userpic {
  border: 3px solid #d3f3f9;
}

.recent-activity-item.recent-activity-warning:before {
  background: #fce7bc;
}

.recent-activity-item.recent-activity-warning .recent-activity-badge-userpic {
  border: 3px solid #fce7bc;
}

.recent-activity-item.recent-activity-lilac:before {
  background: #c6abc9;
}

.recent-activity-item.recent-activity-lilac .recent-activity-badge-userpic {
  border: 3px solid #c6abc9;
}

.recent-activity-item.recent-activity-teals:before {
  background: #93dfcc;
}

.recent-activity-item.recent-activity-teals .recent-activity-badge-userpic {
  border: 3px solid #93dfcc;
}

.recent-activity-item.recent-activity-inverse:before {
  background: #6a6a6a;
}

.recent-activity-item.recent-activity-inverse .recent-activity-badge-userpic {
  border: 3px solid #6a6a6a;
}

.recent-activity-item.recent-activity-last:before {
  content: initial;
}

.recent-activity-badge {
  float: left;
  position: relative;
  padding-right: 20px;
  height: 20px;
  width: 20px;
}

.recent-activity-badge-userpic {
  width: 20px;
  height: 20px;
  content: "";
  display: block;
  border: 3px #F3F3F4 solid;
  background-color: #F3F3F4;
  -moz-border-radius: 50% !important;
  -webkit-border-radius: 50%;
  border-radius: 50% !important;
}

.recent-activity-body {
  position: relative;
  padding: 0;
  margin-top: 10px;
  margin-left: 30px;
}

.recent-activity-body:before,
.recent-activity-body:after {
  content: " ";
  display: table;
}

.recent-activity-body:after {
  clear: both;
}

.recent-activity-body-head {
  margin-bottom: 10px;
}

.recent-activity-body-title {
  font-size: 15px;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 0;
  text-transform: capitalize;
}

.recent-activity-body-content {
  font-size: 13px;
  margin-top: 10px;
}

.recent-activity-body-content p:last-child {
  margin-bottom: 0;
}

.text-muted {
  color: #B0ADAD;
}

@media (max-width: 768px) {
  .recent-activity-body-head-caption {
    width: 100%;
  }
}

/* ========================================================================
 * OVERVIEW SOCIAL
 * ======================================================================== */

.widget-social-overview {
  position: relative;
}

.widget-social-overview .bg-facebook .ct-series-a .ct-line,
.widget-social-overview .bg-facebook .ct-series-a .ct-point {
  stroke: #FFFFFF;
}

.widget-social-overview .bg-facebook .ct-series-b .ct-line,
.widget-social-overview .bg-facebook .ct-series-b .ct-point {
  stroke: #87A1D0;
}

.widget-social-overview .bg-twitter .ct-series-a .ct-line,
.widget-social-overview .bg-twitter .ct-series-a .ct-point {
  stroke: #42C9F2;
}

.widget-social-overview .bg-youtube .ct-series-a .ct-area,
.widget-social-overview .bg-youtube .ct-series-a .ct-point {
  stroke: #FFFFFF;
  fill: #DABFBF;
}

.widget-social-overview .bg-youtube .ct-series-b .ct-area,
.widget-social-overview .bg-youtube .ct-series-b .ct-point {
  stroke: #F7403A;
  fill: #590502;
}

.widget-social-overview .overview-heading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 10px;
}

.widget-social-overview .overview-heading h3 {
  margin: 0;
  padding: 0;
}

.widget-social-overview .overview-heading .mark,
.widget-social-overview .overview-heading .inline {
  display: inline-block;
}

.widget-social-overview .overview-heading .mark {
  height: 10px;
  width: 10px;
  float: left;
  margin-top: 5px;
  margin-right: 5px;
}

.widget-social-overview .overview-heading ul li:last-child {
  padding-right: 0;
}

.widget-social-overview .panel-heading {
  padding-top: 50px !important;
  border-bottom: none !important;
}

.widget-social-overview .panel-body h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-weight: 300;
  color: #A5A5A5;
}

.widget-social-overview .panel-body p {
  text-align: left;
  font-weight: bold;
  font-size: 23px;
  margin: 0;
  padding: 0;
  color: #3f5fa3;
}

.widget-social-overview .panel-body p i {
  color: #3f5fa3;
  font-size: 20px;
  margin-right: 5px;
}

.widget-social-overview .panel-body .pull-right a {
  text-decoration: none;
}

.widget-social-overview .panel-body .pull-right a:hover i {
  color: #989898;
}

.widget-social-overview .panel-body .pull-right a i {
  font-size: 35px;
  font-weight: 300;
  color: #A5A5A5;
}

.widget-social-overview .ct-chart {
  width: 100%;
  height: 200px;
  margin-left: -10px;
}

.widget-social-overview .ct-grids line {
  stroke: white;
}

/* ========================================================================
 * ALERT
 * ======================================================================== */

.alert {
  position: relative;
}

.alert-dismissable .close,
.alert-dismissible .close {
  position: absolute;
  top: 0px;
  right: 4px;
}

.alert-default {
  background-color: white;
  border-color: white;
  color: #bbbbbb;
  padding: 10px;
}

.alert-default .alert-icon {
  background-color: #c8c8c8;
}

.alert-default .alert-link,
.alert-default a {
  color: #a2a2a2 !important;
  font-weight: bold;
}

.alert-default .notification-sender a {
  color: #bbbbbb;
}

.alert-primary {
  background-color: #7be3ff;
  border-color: #7be3ff;
  color: #00617b;
  padding: 10px;
}

.alert-primary .alert-icon {
  background-color: #007595;
}

.alert-primary .alert-link,
.alert-primary a {
  color: #003948 !important;
  font-weight: bold;
}

.alert-primary .notification-sender a {
  color: #00617b;
}

.alert-success {
  background-color: #d7e9c3;
  border-color: #d7e9c3;
  color: #587f2e;
  padding: 10px;
}

.alert-success .alert-icon {
  background-color: #659234;
}

.alert-success .alert-link,
.alert-success a {
  color: #3e5a20 !important;
  font-weight: bold;
}

.alert-success .notification-sender a {
  color: #587f2e;
}

.alert-info {
  background-color: #e9f9fc;
  border-color: #e9f9fc;
  color: #1cadca;
  padding: 10px;
}

.alert-info .alert-icon {
  background-color: #20c0e0;
}

.alert-info .alert-link,
.alert-info a {
  color: #16879d !important;
  font-weight: bold;
}

.alert-info .notification-sender a {
  color: #1cadca;
}

.alert-warning {
  background-color: #fdf0d4;
  border-color: #fdf0d4;
  color: #c88a0a;
  padding: 10px;
}

.alert-warning .alert-icon {
  background-color: #e19b0b;
}

.alert-warning .alert-link,
.alert-warning a {
  color: #986807 !important;
  font-weight: bold;
}

.alert-warning .notification-sender a {
  color: #c88a0a;
}

.alert-danger {
  background-color: #f9cfc8;
  border-color: #f9cfc8;
  color: #ae2a14;
  padding: 10px;
}

.alert-danger .alert-icon {
  background-color: #c52f17;
}

.alert-danger .alert-link,
.alert-danger a {
  color: #801f0f !important;
  font-weight: bold;
}

.alert-danger .notification-sender a {
  color: #ae2a14;
}

.alert-lilac {
  background-color: #d1bad3;
  border-color: #d1bad3;
  color: #543856;
  padding: 10px;
}

.alert-lilac .alert-icon {
  background-color: #634266;
}

.alert-lilac .alert-link,
.alert-lilac a {
  color: #362437 !important;
  font-weight: bold;
}

.alert-lilac .notification-sender a {
  color: #543856;
}

.alert-teals {
  background-color: #a7e5d6;
  border-color: #a7e5d6;
  color: #206d5a;
  padding: 10px;
}

.alert-teals .alert-icon {
  background-color: #26816a;
}

.alert-teals .alert-link,
.alert-teals a {
  color: #144639 !important;
  font-weight: bold;
}

.alert-teals .notification-sender a {
  color: #206d5a;
}

.alert-inverse {
  background-color: #777777;
  border-color: #777777;
  color: black;
  padding: 10px;
}

.alert-inverse .alert-icon {
  background-color: #040404;
}

.alert-inverse .alert-link,
.alert-inverse a {
  color: black !important;
  font-weight: bold;
}

.alert-inverse .notification-sender a {
  color: black;
}

.alert-icon {
  width: 40px;
  height: 40px;
  display: inline-block;
  border-radius: 100%;
}

.alert-icon i {
  width: 40px;
  height: 40px;
  display: block;
  text-align: center;
  line-height: 40px;
  font-size: 20px;
  color: #FFF;
}

.notification-info {
  margin-left: 56px;
  margin-top: -40px;
  min-height: 40px;
}

.notification-info p {
  margin: 0px;
  line-height: 13px;
}

.notification-meta {
  margin-bottom: 3px;
  padding-left: 0px;
  list-style: none outside none;
}

.notification-sender {
  color: #414147;
}

.notification-time {
  font-style: italic;
  color: #999;
}

/* ========================================================================
 * CALLOUT
 * ======================================================================= */

.callout {
  position: relative;
  min-height: 60px;
  margin: 0px;
  padding: 5px 30px 5px 60px;
  border-left: 5px solid #EEE;
  font-size: 0.9em;
  word-wrap: break-word;
}

.callout h4 {
  margin-top: 0;
}

.callout p:last-child {
  margin-bottom: 0;
}

.callout code,
.callout .highlight {
  background-color: transparent;
}

.callout-info {
  background-color: #e9f9fc;
  border-color: #63D3E9;
}

.callout-info:before {
  position: absolute;
  left: 10px;
  top: 10px !important;
  display: block;
  background: #63D3E9;
  color: #fff;
  width: 40px;
  text-align: center;
  height: 40px;
  font-size: 1.5em;
  font-family: 'FontAwesome';
  content: "";
  line-height: 39px;
}

.callout-info h4 {
  color: #36c6e3;
}

.callout-info a {
  color: #4dcde6;
  font-weight: bold;
}

.callout-info a:hover {
  color: #36c6e3;
}

.callout-warning {
  background-color: #fdf0d4;
  border-color: #F6BB42;
}

.callout-warning:before {
  position: absolute;
  left: 10px;
  top: 10px !important;
  display: block;
  background: #F6BB42;
  color: #fff;
  width: 40px;
  text-align: center;
  height: 40px;
  font-size: 1.5em;
  font-family: 'FontAwesome';
  content: "";
  line-height: 39px;
}

.callout-warning h4 {
  color: #f4a911;
}

.callout-warning a {
  color: #f5b22a;
  font-weight: bold;
}

.callout-warning a:hover {
  color: #f4a911;
}

.callout-danger {
  background-color: #f9cfc8;
  border-color: #E9573F;
}

.callout-danger:before {
  position: absolute;
  left: 10px;
  top: 10px !important;
  display: block;
  background: #E9573F;
  color: #fff;
  width: 40px;
  text-align: center;
  height: 40px;
  font-size: 1.5em;
  font-family: 'FontAwesome';
  content: "";
  line-height: 39px;
}

.callout-danger h4 {
  color: #dc3519;
}

.callout-danger a {
  color: #e64328;
  font-weight: bold;
}

.callout-danger a:hover {
  color: #dc3519;
}

/* ========================================================================
 * BADGE
 * ======================================================================== */

.badge {
  padding: 4px 7px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

.badge.badge-width-standard {
  width: 80px !important;
}

.badge-default {
  color: #999 !important;
}

.badge-default {
  background-color: #EEEEEE;
}

.badge-default.badge-stroke {
  background-color: transparent;
  border: 1px solid #EEEEEE;
  color: #EEEEEE;
}

.badge-primary {
  background-color: #00B1E1;
}

.badge-primary.badge-stroke {
  background-color: transparent;
  border: 1px solid #00B1E1;
  color: #00B1E1;
}

.badge-success {
  background-color: #8CC152;
}

.badge-success.badge-stroke {
  background-color: transparent;
  border: 1px solid #8CC152;
  color: #8CC152;
}

.badge-info {
  background-color: #63D3E9;
}

.badge-info.badge-stroke {
  background-color: transparent;
  border: 1px solid #63D3E9;
  color: #63D3E9;
}

.badge-warning {
  background-color: #F6BB42;
}

.badge-warning.badge-stroke {
  background-color: transparent;
  border: 1px solid #F6BB42;
  color: #F6BB42;
}

.badge-danger {
  background-color: #E9573F;
}

.badge-danger.badge-stroke {
  background-color: transparent;
  border: 1px solid #E9573F;
  color: #E9573F;
}

.badge-lilac {
  background-color: #906094;
}

.badge-lilac.badge-stroke {
  background-color: transparent;
  border: 1px solid #906094;
  color: #906094;
}

.badge-teals {
  background-color: #37BC9B;
}

.badge-teals.badge-stroke {
  background-color: transparent;
  border: 1px solid #37BC9B;
  color: #37BC9B;
}

.badge-inverse {
  background-color: #2A2A2A;
}

.badge-inverse.badge-stroke {
  background-color: transparent;
  border: 1px solid #2A2A2A;
  color: #2A2A2A;
}

.badge-circle {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  line-height: 10px;
  height: 15px;
  width: 15px;
  display: block;
}

/* ========================================================================
 * BREADCRUMB
 * ======================================================================== */

.breadcrumb {
  background-color: #F5F5F5;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

/* ========================================================================
 * BUTTON
 * ======================================================================== */

.btn {
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  position: relative;
  z-index: 1;
  background-color: transparent;
  font-weight: 300;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

.btn:after {
  content: ' ';
  position: absolute;
  z-index: -1;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

.btn:before {
  speak: none;
  text-transform: none;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

.btn-default {
  color: #999 !important;
  border-color: #CCC !important;
}

.btn-default {
  background-color: #EEEEEE;
  border-color: #EEEEEE;
  color: white;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.btn-default[disabled],
.btn-default.disabled {
  background-color: #e1e1e1;
  border-color: transparent;
  color: white;
}

.btn-default.dropdown-toggle.btn-default {
  background-color: #EEEEEE;
  border-color: #e1e1e1;
  color: white;
}

.btn-default.btn-alt {
  background-color: #e1e1e1;
  border: 1px solid #EEEEEE;
}

.btn-default.btn-alt:hover {
  background-color: #d5d5d5;
}

.btn-default.btn-stroke {
  border: 1px double #EEEEEE;
  background-color: transparent;
  color: #EEEEEE;
}

.btn-default.btn-stroke:hover {
  background-color: #e1e1e1;
  border-color: transparent;
  color: white;
}

.btn-default.btn-solid {
  border: 1px solid #EEEEEE;
}

.btn-default.btn-dashed {
  border: 1px dashed #EEEEEE;
}

.btn-default.btn-dotted {
  border: 1px dotted #EEEEEE;
}

.btn-default.btn-double {
  border: 4px double #EEEEEE;
}

.btn-default.btn-inset {
  border: 4px inset #EEEEEE;
}

.btn-default.btn-circle {
  padding-left: 0;
  padding-right: 0;
  width: 34px;
  -moz-border-radius: 50% 50% 50% 50%;
  -webkit-border-radius: 50%;
  border-radius: 50% 50% 50% 50%;
}

.btn-default.btn-slidedown:after {
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  background-color: #d5d5d5;
  z-index: -1;
}

.btn-default.btn-slidedown:hover,
.btn-default.btn-slidedown:active {
  color: white;
}

.btn-default.btn-slidedown:hover:after,
.btn-default.btn-slidedown:active:after {
  height: 100%;
}

.btn-default.btn-slideright:after {
  width: 0%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #d5d5d5;
  z-index: -1;
}

.btn-default.btn-slideright:hover,
.btn-default.btn-slideright:active {
  color: white;
}

.btn-default.btn-slideright:hover:after,
.btn-default.btn-slideright:active:after {
  width: 100%;
}

.btn-default.btn-expand:after {
  width: 0;
  height: 103%;
  top: 50%;
  left: 50%;
  background-color: #d5d5d5;
  opacity: 0;
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.btn-default.btn-expand:hover:after {
  width: 90%;
  opacity: 1;
}

.btn-default.btn-expand:active:after {
  width: 101%;
  opacity: 1;
}

.btn-default.btn-rotate {
  overflow: hidden;
}

.btn-default.btn-rotate:after {
  width: 100%;
  height: 0;
  top: 50%;
  left: 50%;
  background-color: #d5d5d5;
  opacity: 0;
  -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.btn-default.btn-rotate:hover:after {
  height: 260%;
  opacity: 1;
}

.btn-default.btn-rotate:active:after {
  height: 400%;
  opacity: 1;
}

.btn-default.btn-open {
  overflow: hidden;
}

.btn-default.btn-open:after {
  width: 101%;
  height: 0;
  top: 50%;
  left: 50%;
  background-color: #d5d5d5;
  opacity: 0;
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.btn-default.btn-open:hover:after {
  height: 75%;
  opacity: 1;
}

.btn-default.btn-open:active:after {
  height: 130%;
  opacity: 1;
}

.btn-default.btn-push {
  background: #EEEEEE;
  box-shadow: 0 6px #d5d5d5;
  -moz-transition: none;
  -o-transition: none;
  -webkit-transition: none;
  transition: none;
}

.btn-default.btn-push:hover {
  box-shadow: 0 4px #d5d5d5;
  top: 2px;
}

.btn-default.btn-push:active {
  box-shadow: 0 0 #d5d5d5;
  top: 6px;
}

.btn-default.btn-pushright {
  background: #EEEEEE;
  box-shadow: 6px 0 #d5d5d5;
  -moz-transition: none;
  -o-transition: none;
  -webkit-transition: none;
  transition: none;
}

.btn-default.btn-pushright:hover {
  box-shadow: 4px 0 #d5d5d5;
  left: 2px;
}

.btn-default.btn-pushright:active {
  box-shadow: 0 0 #d5d5d5;
  left: 6px;
}

.btn-primary {
  background-color: #00B1E1;
  border-color: #00B1E1;
  color: white;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary[disabled],
.btn-primary.disabled {
  background-color: #009dc8;
  border-color: transparent;
  color: white;
}

.btn-primary.dropdown-toggle.btn-primary {
  background-color: #00B1E1;
  border-color: #009dc8;
  color: white;
}

.btn-primary.btn-alt {
  background-color: #009dc8;
  border: 1px solid #00B1E1;
}

.btn-primary.btn-alt:hover {
  background-color: #0089ae;
}

.btn-primary.btn-stroke {
  border: 1px double #00B1E1;
  background-color: transparent;
  color: #00B1E1;
}

.btn-primary.btn-stroke:hover {
  background-color: #009dc8;
  border-color: transparent;
  color: white;
}

.btn-primary.btn-solid {
  border: 1px solid #00B1E1;
}

.btn-primary.btn-dashed {
  border: 1px dashed #00B1E1;
}

.btn-primary.btn-dotted {
  border: 1px dotted #00B1E1;
}

.btn-primary.btn-double {
  border: 4px double #00B1E1;
}

.btn-primary.btn-inset {
  border: 4px inset #00B1E1;
}

.btn-primary.btn-circle {
  padding-left: 0;
  padding-right: 0;
  width: 34px;
  -moz-border-radius: 50% 50% 50% 50%;
  -webkit-border-radius: 50%;
  border-radius: 50% 50% 50% 50%;
}

.btn-primary.btn-slidedown:after {
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  background-color: #0089ae;
  z-index: -1;
}

.btn-primary.btn-slidedown:hover,
.btn-primary.btn-slidedown:active {
  color: white;
}

.btn-primary.btn-slidedown:hover:after,
.btn-primary.btn-slidedown:active:after {
  height: 100%;
}

.btn-primary.btn-slideright:after {
  width: 0%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #0089ae;
  z-index: -1;
}

.btn-primary.btn-slideright:hover,
.btn-primary.btn-slideright:active {
  color: white;
}

.btn-primary.btn-slideright:hover:after,
.btn-primary.btn-slideright:active:after {
  width: 100%;
}

.btn-primary.btn-expand:after {
  width: 0;
  height: 103%;
  top: 50%;
  left: 50%;
  background-color: #0089ae;
  opacity: 0;
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.btn-primary.btn-expand:hover:after {
  width: 90%;
  opacity: 1;
}

.btn-primary.btn-expand:active:after {
  width: 101%;
  opacity: 1;
}

.btn-primary.btn-rotate {
  overflow: hidden;
}

.btn-primary.btn-rotate:after {
  width: 100%;
  height: 0;
  top: 50%;
  left: 50%;
  background-color: #0089ae;
  opacity: 0;
  -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.btn-primary.btn-rotate:hover:after {
  height: 260%;
  opacity: 1;
}

.btn-primary.btn-rotate:active:after {
  height: 400%;
  opacity: 1;
}

.btn-primary.btn-open {
  overflow: hidden;
}

.btn-primary.btn-open:after {
  width: 101%;
  height: 0;
  top: 50%;
  left: 50%;
  background-color: #0089ae;
  opacity: 0;
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.btn-primary.btn-open:hover:after {
  height: 75%;
  opacity: 1;
}

.btn-primary.btn-open:active:after {
  height: 130%;
  opacity: 1;
}

.btn-primary.btn-push {
  background: #00B1E1;
  box-shadow: 0 6px #0089ae;
  -moz-transition: none;
  -o-transition: none;
  -webkit-transition: none;
  transition: none;
}

.btn-primary.btn-push:hover {
  box-shadow: 0 4px #0089ae;
  top: 2px;
}

.btn-primary.btn-push:active {
  box-shadow: 0 0 #0089ae;
  top: 6px;
}

.btn-primary.btn-pushright {
  background: #00B1E1;
  box-shadow: 6px 0 #0089ae;
  -moz-transition: none;
  -o-transition: none;
  -webkit-transition: none;
  transition: none;
}

.btn-primary.btn-pushright:hover {
  box-shadow: 4px 0 #0089ae;
  left: 2px;
}

.btn-primary.btn-pushright:active {
  box-shadow: 0 0 #0089ae;
  left: 6px;
}

.btn-success {
  background-color: #8CC152;
  border-color: #8CC152;
  color: white;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.btn-success[disabled],
.btn-success.disabled {
  background-color: #7fb842;
  border-color: transparent;
  color: white;
}

.btn-success.dropdown-toggle.btn-success {
  background-color: #8CC152;
  border-color: #7fb842;
  color: white;
}

.btn-success.btn-alt {
  background-color: #7fb842;
  border: 1px solid #8CC152;
}

.btn-success.btn-alt:hover {
  background-color: #72a53b;
}

.btn-success.btn-stroke {
  border: 1px double #8CC152;
  background-color: transparent;
  color: #8CC152;
}

.btn-success.btn-stroke:hover {
  background-color: #7fb842;
  border-color: transparent;
  color: white;
}

.btn-success.btn-solid {
  border: 1px solid #8CC152;
}

.btn-success.btn-dashed {
  border: 1px dashed #8CC152;
}

.btn-success.btn-dotted {
  border: 1px dotted #8CC152;
}

.btn-success.btn-double {
  border: 4px double #8CC152;
}

.btn-success.btn-inset {
  border: 4px inset #8CC152;
}

.btn-success.btn-circle {
  padding-left: 0;
  padding-right: 0;
  width: 34px;
  -moz-border-radius: 50% 50% 50% 50%;
  -webkit-border-radius: 50%;
  border-radius: 50% 50% 50% 50%;
}

.btn-success.btn-slidedown:after {
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  background-color: #72a53b;
  z-index: -1;
}

.btn-success.btn-slidedown:hover,
.btn-success.btn-slidedown:active {
  color: white;
}

.btn-success.btn-slidedown:hover:after,
.btn-success.btn-slidedown:active:after {
  height: 100%;
}

.btn-success.btn-slideright:after {
  width: 0%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #72a53b;
  z-index: -1;
}

.btn-success.btn-slideright:hover,
.btn-success.btn-slideright:active {
  color: white;
}

.btn-success.btn-slideright:hover:after,
.btn-success.btn-slideright:active:after {
  width: 100%;
}

.btn-success.btn-expand:after {
  width: 0;
  height: 103%;
  top: 50%;
  left: 50%;
  background-color: #72a53b;
  opacity: 0;
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.btn-success.btn-expand:hover:after {
  width: 90%;
  opacity: 1;
}

.btn-success.btn-expand:active:after {
  width: 101%;
  opacity: 1;
}

.btn-success.btn-rotate {
  overflow: hidden;
}

.btn-success.btn-rotate:after {
  width: 100%;
  height: 0;
  top: 50%;
  left: 50%;
  background-color: #72a53b;
  opacity: 0;
  -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.btn-success.btn-rotate:hover:after {
  height: 260%;
  opacity: 1;
}

.btn-success.btn-rotate:active:after {
  height: 400%;
  opacity: 1;
}

.btn-success.btn-open {
  overflow: hidden;
}

.btn-success.btn-open:after {
  width: 101%;
  height: 0;
  top: 50%;
  left: 50%;
  background-color: #72a53b;
  opacity: 0;
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.btn-success.btn-open:hover:after {
  height: 75%;
  opacity: 1;
}

.btn-success.btn-open:active:after {
  height: 130%;
  opacity: 1;
}

.btn-success.btn-push {
  background: #8CC152;
  box-shadow: 0 6px #72a53b;
  -moz-transition: none;
  -o-transition: none;
  -webkit-transition: none;
  transition: none;
}

.btn-success.btn-push:hover {
  box-shadow: 0 4px #72a53b;
  top: 2px;
}

.btn-success.btn-push:active {
  box-shadow: 0 0 #72a53b;
  top: 6px;
}

.btn-success.btn-pushright {
  background: #8CC152;
  box-shadow: 6px 0 #72a53b;
  -moz-transition: none;
  -o-transition: none;
  -webkit-transition: none;
  transition: none;
}

.btn-success.btn-pushright:hover {
  box-shadow: 4px 0 #72a53b;
  left: 2px;
}

.btn-success.btn-pushright:active {
  box-shadow: 0 0 #72a53b;
  left: 6px;
}

.btn-info {
  background-color: #63D3E9;
  border-color: #63D3E9;
  color: white;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.btn-info[disabled],
.btn-info.disabled {
  background-color: #4dcde6;
  border-color: transparent;
  color: white;
}

.btn-info.dropdown-toggle.btn-info {
  background-color: #63D3E9;
  border-color: #4dcde6;
  color: white;
}

.btn-info.btn-alt {
  background-color: #4dcde6;
  border: 1px solid #63D3E9;
}

.btn-info.btn-alt:hover {
  background-color: #36c6e3;
}

.btn-info.btn-stroke {
  border: 1px double #63D3E9;
  background-color: transparent;
  color: #63D3E9;
}

.btn-info.btn-stroke:hover {
  background-color: #4dcde6;
  border-color: transparent;
  color: white;
}

.btn-info.btn-solid {
  border: 1px solid #63D3E9;
}

.btn-info.btn-dashed {
  border: 1px dashed #63D3E9;
}

.btn-info.btn-dotted {
  border: 1px dotted #63D3E9;
}

.btn-info.btn-double {
  border: 4px double #63D3E9;
}

.btn-info.btn-inset {
  border: 4px inset #63D3E9;
}

.btn-info.btn-circle {
  padding-left: 0;
  padding-right: 0;
  width: 34px;
  -moz-border-radius: 50% 50% 50% 50%;
  -webkit-border-radius: 50%;
  border-radius: 50% 50% 50% 50%;
}

.btn-info.btn-slidedown:after {
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  background-color: #36c6e3;
  z-index: -1;
}

.btn-info.btn-slidedown:hover,
.btn-info.btn-slidedown:active {
  color: white;
}

.btn-info.btn-slidedown:hover:after,
.btn-info.btn-slidedown:active:after {
  height: 100%;
}

.btn-info.btn-slideright:after {
  width: 0%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #36c6e3;
  z-index: -1;
}

.btn-info.btn-slideright:hover,
.btn-info.btn-slideright:active {
  color: white;
}

.btn-info.btn-slideright:hover:after,
.btn-info.btn-slideright:active:after {
  width: 100%;
}

.btn-info.btn-expand:after {
  width: 0;
  height: 103%;
  top: 50%;
  left: 50%;
  background-color: #36c6e3;
  opacity: 0;
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.btn-info.btn-expand:hover:after {
  width: 90%;
  opacity: 1;
}

.btn-info.btn-expand:active:after {
  width: 101%;
  opacity: 1;
}

.btn-info.btn-rotate {
  overflow: hidden;
}

.btn-info.btn-rotate:after {
  width: 100%;
  height: 0;
  top: 50%;
  left: 50%;
  background-color: #36c6e3;
  opacity: 0;
  -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.btn-info.btn-rotate:hover:after {
  height: 260%;
  opacity: 1;
}

.btn-info.btn-rotate:active:after {
  height: 400%;
  opacity: 1;
}

.btn-info.btn-open {
  overflow: hidden;
}

.btn-info.btn-open:after {
  width: 101%;
  height: 0;
  top: 50%;
  left: 50%;
  background-color: #36c6e3;
  opacity: 0;
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.btn-info.btn-open:hover:after {
  height: 75%;
  opacity: 1;
}

.btn-info.btn-open:active:after {
  height: 130%;
  opacity: 1;
}

.btn-info.btn-push {
  background: #63D3E9;
  box-shadow: 0 6px #36c6e3;
  -moz-transition: none;
  -o-transition: none;
  -webkit-transition: none;
  transition: none;
}

.btn-info.btn-push:hover {
  box-shadow: 0 4px #36c6e3;
  top: 2px;
}

.btn-info.btn-push:active {
  box-shadow: 0 0 #36c6e3;
  top: 6px;
}

.btn-info.btn-pushright {
  background: #63D3E9;
  box-shadow: 6px 0 #36c6e3;
  -moz-transition: none;
  -o-transition: none;
  -webkit-transition: none;
  transition: none;
}

.btn-info.btn-pushright:hover {
  box-shadow: 4px 0 #36c6e3;
  left: 2px;
}

.btn-info.btn-pushright:active {
  box-shadow: 0 0 #36c6e3;
  left: 6px;
}

.btn-warning {
  background-color: #F6BB42;
  border-color: #F6BB42;
  color: white;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.btn-warning[disabled],
.btn-warning.disabled {
  background-color: #f5b22a;
  border-color: transparent;
  color: white;
}

.btn-warning.dropdown-toggle.btn-warning {
  background-color: #F6BB42;
  border-color: #f5b22a;
  color: white;
}

.btn-warning.btn-alt {
  background-color: #f5b22a;
  border: 1px solid #F6BB42;
}

.btn-warning.btn-alt:hover {
  background-color: #f4a911;
}

.btn-warning.btn-stroke {
  border: 1px double #F6BB42;
  background-color: transparent;
  color: #F6BB42;
}

.btn-warning.btn-stroke:hover {
  background-color: #f5b22a;
  border-color: transparent;
  color: white;
}

.btn-warning.btn-solid {
  border: 1px solid #F6BB42;
}

.btn-warning.btn-dashed {
  border: 1px dashed #F6BB42;
}

.btn-warning.btn-dotted {
  border: 1px dotted #F6BB42;
}

.btn-warning.btn-double {
  border: 4px double #F6BB42;
}

.btn-warning.btn-inset {
  border: 4px inset #F6BB42;
}

.btn-warning.btn-circle {
  padding-left: 0;
  padding-right: 0;
  width: 34px;
  -moz-border-radius: 50% 50% 50% 50%;
  -webkit-border-radius: 50%;
  border-radius: 50% 50% 50% 50%;
}

.btn-warning.btn-slidedown:after {
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  background-color: #f4a911;
  z-index: -1;
}

.btn-warning.btn-slidedown:hover,
.btn-warning.btn-slidedown:active {
  color: white;
}

.btn-warning.btn-slidedown:hover:after,
.btn-warning.btn-slidedown:active:after {
  height: 100%;
}

.btn-warning.btn-slideright:after {
  width: 0%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #f4a911;
  z-index: -1;
}

.btn-warning.btn-slideright:hover,
.btn-warning.btn-slideright:active {
  color: white;
}

.btn-warning.btn-slideright:hover:after,
.btn-warning.btn-slideright:active:after {
  width: 100%;
}

.btn-warning.btn-expand:after {
  width: 0;
  height: 103%;
  top: 50%;
  left: 50%;
  background-color: #f4a911;
  opacity: 0;
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.btn-warning.btn-expand:hover:after {
  width: 90%;
  opacity: 1;
}

.btn-warning.btn-expand:active:after {
  width: 101%;
  opacity: 1;
}

.btn-warning.btn-rotate {
  overflow: hidden;
}

.btn-warning.btn-rotate:after {
  width: 100%;
  height: 0;
  top: 50%;
  left: 50%;
  background-color: #f4a911;
  opacity: 0;
  -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.btn-warning.btn-rotate:hover:after {
  height: 260%;
  opacity: 1;
}

.btn-warning.btn-rotate:active:after {
  height: 400%;
  opacity: 1;
}

.btn-warning.btn-open {
  overflow: hidden;
}

.btn-warning.btn-open:after {
  width: 101%;
  height: 0;
  top: 50%;
  left: 50%;
  background-color: #f4a911;
  opacity: 0;
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.btn-warning.btn-open:hover:after {
  height: 75%;
  opacity: 1;
}

.btn-warning.btn-open:active:after {
  height: 130%;
  opacity: 1;
}

.btn-warning.btn-push {
  background: #F6BB42;
  box-shadow: 0 6px #f4a911;
  -moz-transition: none;
  -o-transition: none;
  -webkit-transition: none;
  transition: none;
}

.btn-warning.btn-push:hover {
  box-shadow: 0 4px #f4a911;
  top: 2px;
}

.btn-warning.btn-push:active {
  box-shadow: 0 0 #f4a911;
  top: 6px;
}

.btn-warning.btn-pushright {
  background: #F6BB42;
  box-shadow: 6px 0 #f4a911;
  -moz-transition: none;
  -o-transition: none;
  -webkit-transition: none;
  transition: none;
}

.btn-warning.btn-pushright:hover {
  box-shadow: 4px 0 #f4a911;
  left: 2px;
}

.btn-warning.btn-pushright:active {
  box-shadow: 0 0 #f4a911;
  left: 6px;
}

.btn-danger {
  background-color: #E9573F;
  border-color: #E9573F;
  color: white;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.btn-danger[disabled],
.btn-danger.disabled {
  background-color: #e64328;
  border-color: transparent;
  color: white;
}

.btn-danger.dropdown-toggle.btn-danger {
  background-color: #E9573F;
  border-color: #e64328;
  color: white;
}

.btn-danger.btn-alt {
  background-color: #e64328;
  border: 1px solid #E9573F;
}

.btn-danger.btn-alt:hover {
  background-color: #dc3519;
}

.btn-danger.btn-stroke {
  border: 1px double #E9573F;
  background-color: transparent;
  color: #E9573F;
}

.btn-danger.btn-stroke:hover {
  background-color: #e64328;
  border-color: transparent;
  color: white;
}

.btn-danger.btn-solid {
  border: 1px solid #E9573F;
}

.btn-danger.btn-dashed {
  border: 1px dashed #E9573F;
}

.btn-danger.btn-dotted {
  border: 1px dotted #E9573F;
}

.btn-danger.btn-double {
  border: 4px double #E9573F;
}

.btn-danger.btn-inset {
  border: 4px inset #E9573F;
}

.btn-danger.btn-circle {
  padding-left: 0;
  padding-right: 0;
  width: 34px;
  -moz-border-radius: 50% 50% 50% 50%;
  -webkit-border-radius: 50%;
  border-radius: 50% 50% 50% 50%;
}

.btn-danger.btn-slidedown:after {
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  background-color: #dc3519;
  z-index: -1;
}

.btn-danger.btn-slidedown:hover,
.btn-danger.btn-slidedown:active {
  color: white;
}

.btn-danger.btn-slidedown:hover:after,
.btn-danger.btn-slidedown:active:after {
  height: 100%;
}

.btn-danger.btn-slideright:after {
  width: 0%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #dc3519;
  z-index: -1;
}

.btn-danger.btn-slideright:hover,
.btn-danger.btn-slideright:active {
  color: white;
}

.btn-danger.btn-slideright:hover:after,
.btn-danger.btn-slideright:active:after {
  width: 100%;
}

.btn-danger.btn-expand:after {
  width: 0;
  height: 103%;
  top: 50%;
  left: 50%;
  background-color: #dc3519;
  opacity: 0;
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.btn-danger.btn-expand:hover:after {
  width: 90%;
  opacity: 1;
}

.btn-danger.btn-expand:active:after {
  width: 101%;
  opacity: 1;
}

.btn-danger.btn-rotate {
  overflow: hidden;
}

.btn-danger.btn-rotate:after {
  width: 100%;
  height: 0;
  top: 50%;
  left: 50%;
  background-color: #dc3519;
  opacity: 0;
  -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.btn-danger.btn-rotate:hover:after {
  height: 260%;
  opacity: 1;
}

.btn-danger.btn-rotate:active:after {
  height: 400%;
  opacity: 1;
}

.btn-danger.btn-open {
  overflow: hidden;
}

.btn-danger.btn-open:after {
  width: 101%;
  height: 0;
  top: 50%;
  left: 50%;
  background-color: #dc3519;
  opacity: 0;
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.btn-danger.btn-open:hover:after {
  height: 75%;
  opacity: 1;
}

.btn-danger.btn-open:active:after {
  height: 130%;
  opacity: 1;
}

.btn-danger.btn-push {
  background: #E9573F;
  box-shadow: 0 6px #dc3519;
  -moz-transition: none;
  -o-transition: none;
  -webkit-transition: none;
  transition: none;
}

.btn-danger.btn-push:hover {
  box-shadow: 0 4px #dc3519;
  top: 2px;
}

.btn-danger.btn-push:active {
  box-shadow: 0 0 #dc3519;
  top: 6px;
}

.btn-danger.btn-pushright {
  background: #E9573F;
  box-shadow: 6px 0 #dc3519;
  -moz-transition: none;
  -o-transition: none;
  -webkit-transition: none;
  transition: none;
}

.btn-danger.btn-pushright:hover {
  box-shadow: 4px 0 #dc3519;
  left: 2px;
}

.btn-danger.btn-pushright:active {
  box-shadow: 0 0 #dc3519;
  left: 6px;
}

.btn-lilac {
  background-color: #906094;
  border-color: #906094;
  color: white;
}

.btn-lilac:hover,
.btn-lilac:focus,
.btn-lilac:active,
.btn-lilac.active,
.btn-lilac[disabled],
.btn-lilac.disabled {
  background-color: #815685;
  border-color: transparent;
  color: white;
}

.btn-lilac.dropdown-toggle.btn-lilac {
  background-color: #906094;
  border-color: #815685;
  color: white;
}

.btn-lilac.btn-alt {
  background-color: #815685;
  border: 1px solid #906094;
}

.btn-lilac.btn-alt:hover {
  background-color: #724c75;
}

.btn-lilac.btn-stroke {
  border: 1px double #906094;
  background-color: transparent;
  color: #906094;
}

.btn-lilac.btn-stroke:hover {
  background-color: #815685;
  border-color: transparent;
  color: white;
}

.btn-lilac.btn-solid {
  border: 1px solid #906094;
}

.btn-lilac.btn-dashed {
  border: 1px dashed #906094;
}

.btn-lilac.btn-dotted {
  border: 1px dotted #906094;
}

.btn-lilac.btn-double {
  border: 4px double #906094;
}

.btn-lilac.btn-inset {
  border: 4px inset #906094;
}

.btn-lilac.btn-circle {
  padding-left: 0;
  padding-right: 0;
  width: 34px;
  -moz-border-radius: 50% 50% 50% 50%;
  -webkit-border-radius: 50%;
  border-radius: 50% 50% 50% 50%;
}

.btn-lilac.btn-slidedown:after {
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  background-color: #724c75;
  z-index: -1;
}

.btn-lilac.btn-slidedown:hover,
.btn-lilac.btn-slidedown:active {
  color: white;
}

.btn-lilac.btn-slidedown:hover:after,
.btn-lilac.btn-slidedown:active:after {
  height: 100%;
}

.btn-lilac.btn-slideright:after {
  width: 0%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #724c75;
  z-index: -1;
}

.btn-lilac.btn-slideright:hover,
.btn-lilac.btn-slideright:active {
  color: white;
}

.btn-lilac.btn-slideright:hover:after,
.btn-lilac.btn-slideright:active:after {
  width: 100%;
}

.btn-lilac.btn-expand:after {
  width: 0;
  height: 103%;
  top: 50%;
  left: 50%;
  background-color: #724c75;
  opacity: 0;
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.btn-lilac.btn-expand:hover:after {
  width: 90%;
  opacity: 1;
}

.btn-lilac.btn-expand:active:after {
  width: 101%;
  opacity: 1;
}

.btn-lilac.btn-rotate {
  overflow: hidden;
}

.btn-lilac.btn-rotate:after {
  width: 100%;
  height: 0;
  top: 50%;
  left: 50%;
  background-color: #724c75;
  opacity: 0;
  -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.btn-lilac.btn-rotate:hover:after {
  height: 260%;
  opacity: 1;
}

.btn-lilac.btn-rotate:active:after {
  height: 400%;
  opacity: 1;
}

.btn-lilac.btn-open {
  overflow: hidden;
}

.btn-lilac.btn-open:after {
  width: 101%;
  height: 0;
  top: 50%;
  left: 50%;
  background-color: #724c75;
  opacity: 0;
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.btn-lilac.btn-open:hover:after {
  height: 75%;
  opacity: 1;
}

.btn-lilac.btn-open:active:after {
  height: 130%;
  opacity: 1;
}

.btn-lilac.btn-push {
  background: #906094;
  box-shadow: 0 6px #724c75;
  -moz-transition: none;
  -o-transition: none;
  -webkit-transition: none;
  transition: none;
}

.btn-lilac.btn-push:hover {
  box-shadow: 0 4px #724c75;
  top: 2px;
}

.btn-lilac.btn-push:active {
  box-shadow: 0 0 #724c75;
  top: 6px;
}

.btn-lilac.btn-pushright {
  background: #906094;
  box-shadow: 6px 0 #724c75;
  -moz-transition: none;
  -o-transition: none;
  -webkit-transition: none;
  transition: none;
}

.btn-lilac.btn-pushright:hover {
  box-shadow: 4px 0 #724c75;
  left: 2px;
}

.btn-lilac.btn-pushright:active {
  box-shadow: 0 0 #724c75;
  left: 6px;
}

.btn-inverse {
  background-color: #2A2A2A;
  border-color: #2A2A2A;
  color: white;
}

.btn-inverse:hover,
.btn-inverse:focus,
.btn-inverse:active,
.btn-inverse.active,
.btn-inverse[disabled],
.btn-inverse.disabled {
  background-color: #1d1d1d;
  border-color: transparent;
  color: white;
}

.btn-inverse.dropdown-toggle.btn-inverse {
  background-color: #2A2A2A;
  border-color: #1d1d1d;
  color: white;
}

.btn-inverse.btn-alt {
  background-color: #1d1d1d;
  border: 1px solid #2A2A2A;
}

.btn-inverse.btn-alt:hover {
  background-color: #111111;
}

.btn-inverse.btn-stroke {
  border: 1px double #2A2A2A;
  background-color: transparent;
  color: #2A2A2A;
}

.btn-inverse.btn-stroke:hover {
  background-color: #1d1d1d;
  border-color: transparent;
  color: white;
}

.btn-inverse.btn-solid {
  border: 1px solid #2A2A2A;
}

.btn-inverse.btn-dashed {
  border: 1px dashed #2A2A2A;
}

.btn-inverse.btn-dotted {
  border: 1px dotted #2A2A2A;
}

.btn-inverse.btn-double {
  border: 4px double #2A2A2A;
}

.btn-inverse.btn-inset {
  border: 4px inset #2A2A2A;
}

.btn-inverse.btn-circle {
  padding-left: 0;
  padding-right: 0;
  width: 34px;
  -moz-border-radius: 50% 50% 50% 50%;
  -webkit-border-radius: 50%;
  border-radius: 50% 50% 50% 50%;
}

.btn-inverse.btn-slidedown:after {
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  background-color: #111111;
  z-index: -1;
}

.btn-inverse.btn-slidedown:hover,
.btn-inverse.btn-slidedown:active {
  color: white;
}

.btn-inverse.btn-slidedown:hover:after,
.btn-inverse.btn-slidedown:active:after {
  height: 100%;
}

.btn-inverse.btn-slideright:after {
  width: 0%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #111111;
  z-index: -1;
}

.btn-inverse.btn-slideright:hover,
.btn-inverse.btn-slideright:active {
  color: white;
}

.btn-inverse.btn-slideright:hover:after,
.btn-inverse.btn-slideright:active:after {
  width: 100%;
}

.btn-inverse.btn-expand:after {
  width: 0;
  height: 103%;
  top: 50%;
  left: 50%;
  background-color: #111111;
  opacity: 0;
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.btn-inverse.btn-expand:hover:after {
  width: 90%;
  opacity: 1;
}

.btn-inverse.btn-expand:active:after {
  width: 101%;
  opacity: 1;
}

.btn-inverse.btn-rotate {
  overflow: hidden;
}

.btn-inverse.btn-rotate:after {
  width: 100%;
  height: 0;
  top: 50%;
  left: 50%;
  background-color: #111111;
  opacity: 0;
  -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.btn-inverse.btn-rotate:hover:after {
  height: 260%;
  opacity: 1;
}

.btn-inverse.btn-rotate:active:after {
  height: 400%;
  opacity: 1;
}

.btn-inverse.btn-open {
  overflow: hidden;
}

.btn-inverse.btn-open:after {
  width: 101%;
  height: 0;
  top: 50%;
  left: 50%;
  background-color: #111111;
  opacity: 0;
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.btn-inverse.btn-open:hover:after {
  height: 75%;
  opacity: 1;
}

.btn-inverse.btn-open:active:after {
  height: 130%;
  opacity: 1;
}

.btn-inverse.btn-push {
  background: #2A2A2A;
  box-shadow: 0 6px #111111;
  -moz-transition: none;
  -o-transition: none;
  -webkit-transition: none;
  transition: none;
}

.btn-inverse.btn-push:hover {
  box-shadow: 0 4px #111111;
  top: 2px;
}

.btn-inverse.btn-push:active {
  box-shadow: 0 0 #111111;
  top: 6px;
}

.btn-inverse.btn-pushright {
  background: #2A2A2A;
  box-shadow: 6px 0 #111111;
  -moz-transition: none;
  -o-transition: none;
  -webkit-transition: none;
  transition: none;
}

.btn-inverse.btn-pushright:hover {
  box-shadow: 4px 0 #111111;
  left: 2px;
}

.btn-inverse.btn-pushright:active {
  box-shadow: 0 0 #111111;
  left: 6px;
}

.btn-teal {
  color: #FFF;
  background-color: #37BC9B;
  border-color: #31a88b;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.btn-teal:hover,
.btn-teal:focus,
.btn-teal:active {
  color: #FFF !important;
  background-color: #31a88b;
}

.btn-teal.btn-stroke {
  border: 1px double #37BC9B;
  background-color: transparent;
  color: #37BC9B;
}

.btn-teal.btn-stroke:hover {
  color: #FFF !important;
  background-color: #31a88b;
}

.btn-teal.btn-solid {
  border: 1px solid #37BC9B;
}

.btn-teal.btn-dashed {
  border: 1px dashed #37BC9B;
}

.btn-teal.btn-dotted {
  border: 1px dotted #37BC9B;
}

.btn-teal.btn-double {
  border: 4px double #37BC9B;
}

.btn-teal.btn-inset {
  border: 4px inset #37BC9B;
}

.btn-teal.btn-circle {
  padding-left: 0;
  padding-right: 0;
  width: 34px;
  -moz-border-radius: 50% 50% 50% 50%;
  -webkit-border-radius: 50%;
  border-radius: 50% 50% 50% 50%;
}

.btn-bitbucket {
  color: #FFF;
  background-color: #205081;
  border-color: #205081;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.btn-bitbucket:hover,
.btn-bitbucket:focus,
.btn-bitbucket:active {
  color: #FFF !important;
  background-color: #1b436d;
}

.btn-bitbucket.btn-stroke {
  border: 1px double #205081;
  background-color: transparent;
  color: #205081;
}

.btn-bitbucket.btn-stroke:hover {
  color: #FFF !important;
  background-color: #1b436d;
}

.btn-bitbucket.btn-solid {
  border: 1px solid #205081;
}

.btn-bitbucket.btn-dashed {
  border: 1px dashed #205081;
}

.btn-bitbucket.btn-dotted {
  border: 1px dotted #205081;
}

.btn-bitbucket.btn-double {
  border: 4px double #205081;
}

.btn-bitbucket.btn-inset {
  border: 4px inset #205081;
}

.btn-bitbucket.btn-circle {
  padding-left: 0;
  padding-right: 0;
  width: 34px;
  -moz-border-radius: 50% 50% 50% 50%;
  -webkit-border-radius: 50%;
  border-radius: 50% 50% 50% 50%;
}

.btn-behance {
  color: #FFF;
  background-color: #053eff;
  border-color: #053eff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.btn-behance:hover,
.btn-behance:focus,
.btn-behance:active {
  color: #FFF !important;
  background-color: #0035eb;
}

.btn-behance.btn-stroke {
  border: 1px double #053eff;
  background-color: transparent;
  color: #053eff;
}

.btn-behance.btn-stroke:hover {
  color: #FFF !important;
  background-color: #0035eb;
}

.btn-behance.btn-solid {
  border: 1px solid #053eff;
}

.btn-behance.btn-dashed {
  border: 1px dashed #053eff;
}

.btn-behance.btn-dotted {
  border: 1px dotted #053eff;
}

.btn-behance.btn-double {
  border: 4px double #053eff;
}

.btn-behance.btn-inset {
  border: 4px inset #053eff;
}

.btn-behance.btn-circle {
  padding-left: 0;
  padding-right: 0;
  width: 34px;
  -moz-border-radius: 50% 50% 50% 50%;
  -webkit-border-radius: 50%;
  border-radius: 50% 50% 50% 50%;
}

.btn-delicious {
  color: #FFF;
  background-color: #205cc0;
  border-color: #205cc0;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.btn-delicious:hover,
.btn-delicious:focus,
.btn-delicious:active {
  color: #FFF !important;
  background-color: #1c52aa;
}

.btn-delicious.btn-stroke {
  border: 1px double #205cc0;
  background-color: transparent;
  color: #205cc0;
}

.btn-delicious.btn-stroke:hover {
  color: #FFF !important;
  background-color: #1c52aa;
}

.btn-delicious.btn-solid {
  border: 1px solid #205cc0;
}

.btn-delicious.btn-dashed {
  border: 1px dashed #205cc0;
}

.btn-delicious.btn-dotted {
  border: 1px dotted #205cc0;
}

.btn-delicious.btn-double {
  border: 4px double #205cc0;
}

.btn-delicious.btn-inset {
  border: 4px inset #205cc0;
}

.btn-delicious.btn-circle {
  padding-left: 0;
  padding-right: 0;
  width: 34px;
  -moz-border-radius: 50% 50% 50% 50%;
  -webkit-border-radius: 50%;
  border-radius: 50% 50% 50% 50%;
}

.btn-dribbble {
  color: #FFF;
  background-color: #ea4c89;
  border-color: #ea4c89;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.btn-dribbble:hover,
.btn-dribbble:focus,
.btn-dribbble:active {
  color: #FFF !important;
  background-color: #e7357a;
}

.btn-dribbble.btn-stroke {
  border: 1px double #ea4c89;
  background-color: transparent;
  color: #ea4c89;
}

.btn-dribbble.btn-stroke:hover {
  color: #FFF !important;
  background-color: #e7357a;
}

.btn-dribbble.btn-solid {
  border: 1px solid #ea4c89;
}

.btn-dribbble.btn-dashed {
  border: 1px dashed #ea4c89;
}

.btn-dribbble.btn-dotted {
  border: 1px dotted #ea4c89;
}

.btn-dribbble.btn-double {
  border: 4px double #ea4c89;
}

.btn-dribbble.btn-inset {
  border: 4px inset #ea4c89;
}

.btn-dribbble.btn-circle {
  padding-left: 0;
  padding-right: 0;
  width: 34px;
  -moz-border-radius: 50% 50% 50% 50%;
  -webkit-border-radius: 50%;
  border-radius: 50% 50% 50% 50%;
}

.btn-facebook {
  color: #FFF;
  background-color: #3b5998;
  border-color: #3b5998;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.btn-facebook:hover,
.btn-facebook:focus,
.btn-facebook:active {
  color: #FFF !important;
  background-color: #344e86;
}

.btn-facebook.btn-stroke {
  border: 1px double #3b5998;
  background-color: transparent;
  color: #3b5998;
}

.btn-facebook.btn-stroke:hover {
  color: #FFF !important;
  background-color: #344e86;
}

.btn-facebook.btn-solid {
  border: 1px solid #3b5998;
}

.btn-facebook.btn-dashed {
  border: 1px dashed #3b5998;
}

.btn-facebook.btn-dotted {
  border: 1px dotted #3b5998;
}

.btn-facebook.btn-double {
  border: 4px double #3b5998;
}

.btn-facebook.btn-inset {
  border: 4px inset #3b5998;
}

.btn-facebook.btn-circle {
  padding-left: 0;
  padding-right: 0;
  width: 34px;
  -moz-border-radius: 50% 50% 50% 50%;
  -webkit-border-radius: 50%;
  border-radius: 50% 50% 50% 50%;
}

.btn-flickr {
  color: #FFF;
  background-color: #ff0084;
  border-color: #ff0084;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.btn-flickr:hover,
.btn-flickr:focus,
.btn-flickr:active {
  color: #FFF !important;
  background-color: #e60077;
}

.btn-flickr.btn-stroke {
  border: 1px double #ff0084;
  background-color: transparent;
  color: #ff0084;
}

.btn-flickr.btn-stroke:hover {
  color: #FFF !important;
  background-color: #e60077;
}

.btn-flickr.btn-solid {
  border: 1px solid #ff0084;
}

.btn-flickr.btn-dashed {
  border: 1px dashed #ff0084;
}

.btn-flickr.btn-dotted {
  border: 1px dotted #ff0084;
}

.btn-flickr.btn-double {
  border: 4px double #ff0084;
}

.btn-flickr.btn-inset {
  border: 4px inset #ff0084;
}

.btn-flickr.btn-circle {
  padding-left: 0;
  padding-right: 0;
  width: 34px;
  -moz-border-radius: 50% 50% 50% 50%;
  -webkit-border-radius: 50%;
  border-radius: 50% 50% 50% 50%;
}

.btn-foursquare {
  color: #FFF;
  background-color: #25a0ca;
  border-color: #25a0ca;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.btn-foursquare:hover,
.btn-foursquare:focus,
.btn-foursquare:active {
  color: #FFF !important;
  background-color: #218fb4;
}

.btn-foursquare.btn-stroke {
  border: 1px double #25a0ca;
  background-color: transparent;
  color: #25a0ca;
}

.btn-foursquare.btn-stroke:hover {
  color: #FFF !important;
  background-color: #218fb4;
}

.btn-foursquare.btn-solid {
  border: 1px solid #25a0ca;
}

.btn-foursquare.btn-dashed {
  border: 1px dashed #25a0ca;
}

.btn-foursquare.btn-dotted {
  border: 1px dotted #25a0ca;
}

.btn-foursquare.btn-double {
  border: 4px double #25a0ca;
}

.btn-foursquare.btn-inset {
  border: 4px inset #25a0ca;
}

.btn-foursquare.btn-circle {
  padding-left: 0;
  padding-right: 0;
  width: 34px;
  -moz-border-radius: 50% 50% 50% 50%;
  -webkit-border-radius: 50%;
  border-radius: 50% 50% 50% 50%;
}

.btn-googleplus {
  color: #FFF;
  background-color: #db4a39;
  border-color: #db4a39;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.btn-googleplus:hover,
.btn-googleplus:focus,
.btn-googleplus:active {
  color: #FFF !important;
  background-color: #d43927;
}

.btn-googleplus.btn-stroke {
  border: 1px double #db4a39;
  background-color: transparent;
  color: #db4a39;
}

.btn-googleplus.btn-stroke:hover {
  color: #FFF !important;
  background-color: #d43927;
}

.btn-googleplus.btn-solid {
  border: 1px solid #db4a39;
}

.btn-googleplus.btn-dashed {
  border: 1px dashed #db4a39;
}

.btn-googleplus.btn-dotted {
  border: 1px dotted #db4a39;
}

.btn-googleplus.btn-double {
  border: 4px double #db4a39;
}

.btn-googleplus.btn-inset {
  border: 4px inset #db4a39;
}

.btn-googleplus.btn-circle {
  padding-left: 0;
  padding-right: 0;
  width: 34px;
  -moz-border-radius: 50% 50% 50% 50%;
  -webkit-border-radius: 50%;
  border-radius: 50% 50% 50% 50%;
}

.btn-instagram {
  color: #FFF;
  background-color: #3f729b;
  border-color: #3f729b;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.btn-instagram:hover,
.btn-instagram:focus,
.btn-instagram:active {
  color: #FFF !important;
  background-color: #386589;
}

.btn-instagram.btn-stroke {
  border: 1px double #3f729b;
  background-color: transparent;
  color: #3f729b;
}

.btn-instagram.btn-stroke:hover {
  color: #FFF !important;
  background-color: #386589;
}

.btn-instagram.btn-solid {
  border: 1px solid #3f729b;
}

.btn-instagram.btn-dashed {
  border: 1px dashed #3f729b;
}

.btn-instagram.btn-dotted {
  border: 1px dotted #3f729b;
}

.btn-instagram.btn-double {
  border: 4px double #3f729b;
}

.btn-instagram.btn-inset {
  border: 4px inset #3f729b;
}

.btn-instagram.btn-circle {
  padding-left: 0;
  padding-right: 0;
  width: 34px;
  -moz-border-radius: 50% 50% 50% 50%;
  -webkit-border-radius: 50%;
  border-radius: 50% 50% 50% 50%;
}

.btn-linkedin {
  color: #FFF;
  background-color: #0e76a8;
  border-color: #0e76a8;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.btn-linkedin:hover,
.btn-linkedin:focus,
.btn-linkedin:active {
  color: #FFF !important;
  background-color: #0c6590;
}

.btn-linkedin.btn-stroke {
  border: 1px double #0e76a8;
  background-color: transparent;
  color: #0e76a8;
}

.btn-linkedin.btn-stroke:hover {
  color: #FFF !important;
  background-color: #0c6590;
}

.btn-linkedin.btn-solid {
  border: 1px solid #0e76a8;
}

.btn-linkedin.btn-dashed {
  border: 1px dashed #0e76a8;
}

.btn-linkedin.btn-dotted {
  border: 1px dotted #0e76a8;
}

.btn-linkedin.btn-double {
  border: 4px double #0e76a8;
}

.btn-linkedin.btn-inset {
  border: 4px inset #0e76a8;
}

.btn-linkedin.btn-circle {
  padding-left: 0;
  padding-right: 0;
  width: 34px;
  -moz-border-radius: 50% 50% 50% 50%;
  -webkit-border-radius: 50%;
  border-radius: 50% 50% 50% 50%;
}

.btn-path {
  color: #FFF;
  background-color: #e41f11;
  border-color: #e41f11;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.btn-path:hover,
.btn-path:focus,
.btn-path:active {
  color: #FFF !important;
  background-color: #cc1c0f;
}

.btn-path.btn-stroke {
  border: 1px double #e41f11;
  background-color: transparent;
  color: #e41f11;
}

.btn-path.btn-stroke:hover {
  color: #FFF !important;
  background-color: #cc1c0f;
}

.btn-path.btn-solid {
  border: 1px solid #e41f11;
}

.btn-path.btn-dashed {
  border: 1px dashed #e41f11;
}

.btn-path.btn-dotted {
  border: 1px dotted #e41f11;
}

.btn-path.btn-double {
  border: 4px double #e41f11;
}

.btn-path.btn-inset {
  border: 4px inset #e41f11;
}

.btn-path.btn-circle {
  padding-left: 0;
  padding-right: 0;
  width: 34px;
  -moz-border-radius: 50% 50% 50% 50%;
  -webkit-border-radius: 50%;
  border-radius: 50% 50% 50% 50%;
}

.btn-pinterest {
  color: #FFF;
  background-color: #c8232c;
  border-color: #c8232c;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.btn-pinterest:hover,
.btn-pinterest:focus,
.btn-pinterest:active {
  color: #FFF !important;
  background-color: #b21f27;
}

.btn-pinterest.btn-stroke {
  border: 1px double #c8232c;
  background-color: transparent;
  color: #c8232c;
}

.btn-pinterest.btn-stroke:hover {
  color: #FFF !important;
  background-color: #b21f27;
}

.btn-pinterest.btn-solid {
  border: 1px solid #c8232c;
}

.btn-pinterest.btn-dashed {
  border: 1px dashed #c8232c;
}

.btn-pinterest.btn-dotted {
  border: 1px dotted #c8232c;
}

.btn-pinterest.btn-double {
  border: 4px double #c8232c;
}

.btn-pinterest.btn-inset {
  border: 4px inset #c8232c;
}

.btn-pinterest.btn-circle {
  padding-left: 0;
  padding-right: 0;
  width: 34px;
  -moz-border-radius: 50% 50% 50% 50%;
  -webkit-border-radius: 50%;
  border-radius: 50% 50% 50% 50%;
}

.btn-rss {
  color: #FFF;
  background-color: #ee802f;
  border-color: #ee802f;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.btn-rss:hover,
.btn-rss:focus,
.btn-rss:active {
  color: #FFF !important;
  background-color: #ec7217;
}

.btn-rss.btn-stroke {
  border: 1px double #ee802f;
  background-color: transparent;
  color: #ee802f;
}

.btn-rss.btn-stroke:hover {
  color: #FFF !important;
  background-color: #ec7217;
}

.btn-rss.btn-solid {
  border: 1px solid #ee802f;
}

.btn-rss.btn-dashed {
  border: 1px dashed #ee802f;
}

.btn-rss.btn-dotted {
  border: 1px dotted #ee802f;
}

.btn-rss.btn-double {
  border: 4px double #ee802f;
}

.btn-rss.btn-inset {
  border: 4px inset #ee802f;
}

.btn-rss.btn-circle {
  padding-left: 0;
  padding-right: 0;
  width: 34px;
  -moz-border-radius: 50% 50% 50% 50%;
  -webkit-border-radius: 50%;
  border-radius: 50% 50% 50% 50%;
}

.btn-skype {
  color: #FFF;
  background-color: #00aff0;
  border-color: #00aff0;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.btn-skype:hover,
.btn-skype:focus,
.btn-skype:active {
  color: #FFF !important;
  background-color: #009cd7;
}

.btn-skype.btn-stroke {
  border: 1px double #00aff0;
  background-color: transparent;
  color: #00aff0;
}

.btn-skype.btn-stroke:hover {
  color: #FFF !important;
  background-color: #009cd7;
}

.btn-skype.btn-solid {
  border: 1px solid #00aff0;
}

.btn-skype.btn-dashed {
  border: 1px dashed #00aff0;
}

.btn-skype.btn-dotted {
  border: 1px dotted #00aff0;
}

.btn-skype.btn-double {
  border: 4px double #00aff0;
}

.btn-skype.btn-inset {
  border: 4px inset #00aff0;
}

.btn-skype.btn-circle {
  padding-left: 0;
  padding-right: 0;
  width: 34px;
  -moz-border-radius: 50% 50% 50% 50%;
  -webkit-border-radius: 50%;
  border-radius: 50% 50% 50% 50%;
}

.btn-soundcloud {
  color: #FFF;
  background-color: #ff7700;
  border-color: #ff7700;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.btn-soundcloud:hover,
.btn-soundcloud:focus,
.btn-soundcloud:active {
  color: #FFF !important;
  background-color: #e66b00;
}

.btn-soundcloud.btn-stroke {
  border: 1px double #ff7700;
  background-color: transparent;
  color: #ff7700;
}

.btn-soundcloud.btn-stroke:hover {
  color: #FFF !important;
  background-color: #e66b00;
}

.btn-soundcloud.btn-solid {
  border: 1px solid #ff7700;
}

.btn-soundcloud.btn-dashed {
  border: 1px dashed #ff7700;
}

.btn-soundcloud.btn-dotted {
  border: 1px dotted #ff7700;
}

.btn-soundcloud.btn-double {
  border: 4px double #ff7700;
}

.btn-soundcloud.btn-inset {
  border: 4px inset #ff7700;
}

.btn-soundcloud.btn-circle {
  padding-left: 0;
  padding-right: 0;
  width: 34px;
  -moz-border-radius: 50% 50% 50% 50%;
  -webkit-border-radius: 50%;
  border-radius: 50% 50% 50% 50%;
}

.btn-tumblr {
  color: #FFF;
  background-color: #34526f;
  border-color: #34526f;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.btn-tumblr:hover,
.btn-tumblr:focus,
.btn-tumblr:active {
  color: #FFF !important;
  background-color: #2c455e;
}

.btn-tumblr.btn-stroke {
  border: 1px double #34526f;
  background-color: transparent;
  color: #34526f;
}

.btn-tumblr.btn-stroke:hover {
  color: #FFF !important;
  background-color: #2c455e;
}

.btn-tumblr.btn-solid {
  border: 1px solid #34526f;
}

.btn-tumblr.btn-dashed {
  border: 1px dashed #34526f;
}

.btn-tumblr.btn-dotted {
  border: 1px dotted #34526f;
}

.btn-tumblr.btn-double {
  border: 4px double #34526f;
}

.btn-tumblr.btn-inset {
  border: 4px inset #34526f;
}

.btn-tumblr.btn-circle {
  padding-left: 0;
  padding-right: 0;
  width: 34px;
  -moz-border-radius: 50% 50% 50% 50%;
  -webkit-border-radius: 50%;
  border-radius: 50% 50% 50% 50%;
}

.btn-twitter {
  color: #FFF;
  background-color: #00a0d1;
  border-color: #00a0d1;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.btn-twitter:hover,
.btn-twitter:focus,
.btn-twitter:active {
  color: #FFF !important;
  background-color: #008cb8;
}

.btn-twitter.btn-stroke {
  border: 1px double #00a0d1;
  background-color: transparent;
  color: #00a0d1;
}

.btn-twitter.btn-stroke:hover {
  color: #FFF !important;
  background-color: #008cb8;
}

.btn-twitter.btn-solid {
  border: 1px solid #00a0d1;
}

.btn-twitter.btn-dashed {
  border: 1px dashed #00a0d1;
}

.btn-twitter.btn-dotted {
  border: 1px dotted #00a0d1;
}

.btn-twitter.btn-double {
  border: 4px double #00a0d1;
}

.btn-twitter.btn-inset {
  border: 4px inset #00a0d1;
}

.btn-twitter.btn-circle {
  padding-left: 0;
  padding-right: 0;
  width: 34px;
  -moz-border-radius: 50% 50% 50% 50%;
  -webkit-border-radius: 50%;
  border-radius: 50% 50% 50% 50%;
}

.btn-vimeo {
  color: #FFF;
  background-color: #86c9ef;
  border-color: #86c9ef;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.btn-vimeo:hover,
.btn-vimeo:focus,
.btn-vimeo:active {
  color: #FFF !important;
  background-color: #6fbfec;
}

.btn-vimeo.btn-stroke {
  border: 1px double #86c9ef;
  background-color: transparent;
  color: #86c9ef;
}

.btn-vimeo.btn-stroke:hover {
  color: #FFF !important;
  background-color: #6fbfec;
}

.btn-vimeo.btn-solid {
  border: 1px solid #86c9ef;
}

.btn-vimeo.btn-dashed {
  border: 1px dashed #86c9ef;
}

.btn-vimeo.btn-dotted {
  border: 1px dotted #86c9ef;
}

.btn-vimeo.btn-double {
  border: 4px double #86c9ef;
}

.btn-vimeo.btn-inset {
  border: 4px inset #86c9ef;
}

.btn-vimeo.btn-circle {
  padding-left: 0;
  padding-right: 0;
  width: 34px;
  -moz-border-radius: 50% 50% 50% 50%;
  -webkit-border-radius: 50%;
  border-radius: 50% 50% 50% 50%;
}

.btn-wordpress {
  color: #FFF;
  background-color: #21759b;
  border-color: #21759b;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.btn-wordpress:hover,
.btn-wordpress:focus,
.btn-wordpress:active {
  color: #FFF !important;
  background-color: #1d6586;
}

.btn-wordpress.btn-stroke {
  border: 1px double #21759b;
  background-color: transparent;
  color: #21759b;
}

.btn-wordpress.btn-stroke:hover {
  color: #FFF !important;
  background-color: #1d6586;
}

.btn-wordpress.btn-solid {
  border: 1px solid #21759b;
}

.btn-wordpress.btn-dashed {
  border: 1px dashed #21759b;
}

.btn-wordpress.btn-dotted {
  border: 1px dotted #21759b;
}

.btn-wordpress.btn-double {
  border: 4px double #21759b;
}

.btn-wordpress.btn-inset {
  border: 4px inset #21759b;
}

.btn-wordpress.btn-circle {
  padding-left: 0;
  padding-right: 0;
  width: 34px;
  -moz-border-radius: 50% 50% 50% 50%;
  -webkit-border-radius: 50%;
  border-radius: 50% 50% 50% 50%;
}

.btn-yahoo {
  color: #FFF;
  background-color: #720e9e;
  border-color: #720e9e;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.btn-yahoo:hover,
.btn-yahoo:focus,
.btn-yahoo:active {
  color: #FFF !important;
  background-color: #610c87;
}

.btn-yahoo.btn-stroke {
  border: 1px double #720e9e;
  background-color: transparent;
  color: #720e9e;
}

.btn-yahoo.btn-stroke:hover {
  color: #FFF !important;
  background-color: #610c87;
}

.btn-yahoo.btn-solid {
  border: 1px solid #720e9e;
}

.btn-yahoo.btn-dashed {
  border: 1px dashed #720e9e;
}

.btn-yahoo.btn-dotted {
  border: 1px dotted #720e9e;
}

.btn-yahoo.btn-double {
  border: 4px double #720e9e;
}

.btn-yahoo.btn-inset {
  border: 4px inset #720e9e;
}

.btn-yahoo.btn-circle {
  padding-left: 0;
  padding-right: 0;
  width: 34px;
  -moz-border-radius: 50% 50% 50% 50%;
  -webkit-border-radius: 50%;
  border-radius: 50% 50% 50% 50%;
}

.btn-youtube {
  color: #FFF;
  background-color: #c4302b;
  border-color: #c4302b;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.btn-youtube:hover,
.btn-youtube:focus,
.btn-youtube:active {
  color: #FFF !important;
  background-color: #af2b26;
}

.btn-youtube.btn-stroke {
  border: 1px double #c4302b;
  background-color: transparent;
  color: #c4302b;
}

.btn-youtube.btn-stroke:hover {
  color: #FFF !important;
  background-color: #af2b26;
}

.btn-youtube.btn-solid {
  border: 1px solid #c4302b;
}

.btn-youtube.btn-dashed {
  border: 1px dashed #c4302b;
}

.btn-youtube.btn-dotted {
  border: 1px dotted #c4302b;
}

.btn-youtube.btn-double {
  border: 4px double #c4302b;
}

.btn-youtube.btn-inset {
  border: 4px inset #c4302b;
}

.btn-youtube.btn-circle {
  padding-left: 0;
  padding-right: 0;
  width: 34px;
  -moz-border-radius: 50% 50% 50% 50%;
  -webkit-border-radius: 50%;
  border-radius: 50% 50% 50% 50%;
}

.btn-icon-stacked {
  text-align: left;
  padding: 10px 10px 10px 45px;
  position: relative;
}

.btn-icon-stacked:focus,
.btn-icon-stacked:active {
  color: white;
}

.btn-icon-stacked i {
  display: block;
  position: absolute;
  left: 15px;
  top: 15px;
}

.btn-icon-stacked span {
  display: block;
  font-size: 13px;
  line-height: normal;
}

.btn-compose-email {
  padding: 10px 0px;
  margin-bottom: 20px;
}

.btn-group-vertical > .btn.rounded:first-child:not(:last-child) {
  -moz-border-radius: 3px 3px 0px 0px;
  -webkit-border-radius: 3px;
  border-radius: 3px 3px 0px 0px;
}

.btn-group-vertical > .btn.rounded:last-child:not(:first-child) {
  -moz-border-radius: 0px 0px 3px 3px;
  -webkit-border-radius: 0px;
  border-radius: 0px 0px 3px 3px;
}

.btn-group-vertical > .btn:first-child:not(:last-child) {
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

.btn-group-vertical > .btn:last-child:not(:first-child) {
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

/* ========================================================================
 * DROPDOWN
 * ======================================================================== */

.dropdown-menu {
  padding: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  font-size: 12px;
  border: 1px solid #DDD;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.dropdown-menu .dropdown-header {
  background-color: #FBFBFB;
  border-top: none;
  border-bottom: 1px solid #DDD;
}

.dropdown-menu .divider {
  margin: 0px;
}

/* ========================================================================
 * FORM
 * ======================================================================== */

/* ========================================================================
 * TABLE OF CONTENTS
 * ========================================================================
   01. FORM
   02. FORM HORIZONTAL
   03. FORM BODY
   04. FORM BORDERED
   05. FORM STRIPED
   06. FORM BODY
   07. FORM FOOTER
   08. CONTEXTUAL CLASSES CHECKBOX
   09. CHECKBOX
   10. RADIO
   11. VALIDATION STATES
   12. STATIC CONTROL
   13. INPUT WITH ICONS
   14. INPUT WITH SPINNERS
   15. FORM MISC
   16. IE SUPPORT
 * ======================================================================== */

form .form-group {
  position: relative;
  margin-left: 0px !important;
  margin-right: 0px !important;
}

form .form-group .fileinput {
  width: 100%;
}

form .form-group .error {
  display: none;
  font-size: 12px;
  font-style: italic;
  color: #E9573F;
}

form .form-group .error + .help-block {
  display: none;
}

form .form-group.no-padding .form-control-feedback {
  right: 4px !important;
}

form .form-group .control-label {
  padding-top: 3px;
  font-weight: 300;
}

form .form-group.has-feedback.has-feedback-sm button.form-control-feedback {
  width: 22px;
  height: 22px;
  font-size: 12px;
  top: 4px;
  right: 4px;
}

form .form-group.has-feedback button.form-control-feedback {
  top: 5px;
  right: 5px;
  width: 25px;
  height: 25px;
  line-height: 6px;
  position: absolute;
  pointer-events: auto !important;
}

form .form-group.has-feedback button.form-control-feedback:before {
  position: absolute;
  left: 6px;
  top: 8px;
}

form .form-group.has-primary .control-label {
  color: #00B1E1;
}

form .form-group.has-primary .form-control {
  border-color: #00B1E1;
}

form .form-group.has-primary .form-control:focus {
  border-color: #0089ae !important;
}

form .form-group.has-primary .form-control-feedback {
  color: #00B1E1;
}

form .form-group.has-primary .help-inline {
  color: #00B1E1;
}

form .form-group.has-info .control-label {
  color: #63D3E9;
}

form .form-group.has-info .form-control {
  border-color: #63D3E9;
}

form .form-group.has-info .form-control:focus {
  border-color: #36c6e3 !important;
}

form .form-group.has-info .form-control-feedback {
  color: #63D3E9;
}

form .form-group.has-info .help-inline {
  color: #63D3E9;
}

form .form-group.has-success .control-label {
  color: #8CC152;
}

form .form-group.has-success .form-control {
  border-color: #8CC152;
}

form .form-group.has-success .form-control:focus {
  border-color: #72a53b !important;
}

form .form-group.has-success .form-control-feedback {
  color: #8CC152;
}

form .form-group.has-success .help-inline {
  color: #8CC152;
}

form .form-group.has-warning .control-label {
  color: #F6BB42;
}

form .form-group.has-warning .form-control {
  border-color: #F6BB42;
}

form .form-group.has-warning .form-control:focus {
  border-color: #f4a911 !important;
}

form .form-group.has-warning .form-control-feedback {
  color: #F6BB42;
}

form .form-group.has-warning .help-inline {
  color: #F6BB42;
}

form .form-group.has-error .control-label {
  color: #E9573F;
}

form .form-group.has-error .form-control {
  border-color: #E9573F;
}

form .form-group.has-error .form-control:focus {
  border-color: #dc3519 !important;
}

form .form-group.has-error .form-control-feedback {
  color: #E9573F;
}

form .form-group.has-error .help-inline {
  color: #E9573F;
}

form .form-group.form-group-inline input,
form .form-group.form-group-inline .help-inline {
  display: inline-block;
}

form .form-group.form-group-inline input {
  width: 75%;
  margin-right: 5px;
}

form .form-group.form-group-divider {
  background-color: #EEEEEE;
  padding: 0px;
  margin-bottom: 0px;
}

form .form-group.form-group-divider .form-inner {
  border-left: 5px solid #71a117;
  padding-left: 15px;
  padding-top: 15px;
  padding-bottom: 15px;
}

form .form-group.form-group-divider .form-inner .label-circle {
  display: inline !important;
}

form .form-group.form-footer {
  background-color: #EEEEEE;
  margin-bottom: 0px;
}

form .help-block,
form .help-inline {
  font-size: 12px;
  font-style: italic;
  margin-bottom: 0px;
}

/* ========================================================================
 * FORM HORIZONTAL
 * ======================================================================== */

.form-horizontal .form-group .checkbox {
  padding-top: 2px;
}

.form-horizontal .form-group .checkbox-inline {
  padding-top: 1px;
}

.form-horizontal .form-group .radio {
  padding-top: 4px;
}

.form-horizontal .form-group .radio-inline {
  padding-top: 0px;
}

/* ========================================================================
 * FORM BORDERED
 * ======================================================================== */

.form-bordered .form-body {
  padding: 0px;
}

.form-bordered .form-group {
  padding: 15px 0px;
  margin-bottom: 0px;
  border-top: 1px solid #DDD;
}

.form-bordered .form-group:first-child {
  border-top: none;
}

.form-bordered .form-group .chosen-container:last-child {
  margin-bottom: 0px !important;
}

/* ========================================================================
 * FORM STRIPED
 * ======================================================================== */

.form-striped .form-body {
  padding: 0px;
}

.form-striped .form-group {
  padding: 15px 0px;
  margin-bottom: 0px;
  border-top: 1px solid #DDD;
}

.form-striped .form-group:first-child {
  border-top: none;
}

.form-striped .form-group:nth-child(2n+1) {
  background-color: #f1f1f1;
}

.form-striped .form-group .chosen-container:last-child {
  margin-bottom: 0px !important;
}

/* ========================================================================
 * FORM BODY
 * ======================================================================== */

.form-body {
  padding: 10px;
}

/* ========================================================================
 * FORM FOOTER
 * ======================================================================== */

.form-footer {
  padding: 10px;
  background-color: #F5F5F5;
  border-top: 1px solid #DDD;
}

.form-footer [class*="col-"] .btn {
  margin-left: 5px;
}

/* ========================================================================
 * CHECKBOX
 * ======================================================================== */

.ckbox input[type=checkbox] {
  opacity: 0;
}

.ckbox input[type=checkbox]:checked + label::after {
  font-family: 'FontAwesome';
  content: "\F00C";
  position: absolute;
  top: 0;
  left: 0px;
  display: inline-block;
  font-size: 10px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  color: #FFF;
  text-align: center;
  font-weight: 700;
}

.ckbox.rounded input[type=checkbox]:checked + label::after,
.ckbox.rounded input[type=checkbox]:checked + label::before {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.ckbox.rounded label:before {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.ckbox.circle input[type=checkbox]:checked + label::after,
.ckbox.circle input[type=checkbox]:checked + label::before {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.ckbox.circle label:before {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.ckbox.ckbox-default input[type=checkbox]:checked + label::after {
  color: gray;
}

/* ========================================================================
 * RADIO
 * ======================================================================== */

.rdio input[type=radio] {
  opacity: 0;
}

.rdio input[type=radio]:checked + label::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  display: inline-block;
  font-size: 11px;
  width: 10px;
  height: 10px;
}

.rdio.rounded input[type=radio]:checked + label::after,
.rdio.rounded input[type=radio]:checked + label::before {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.rdio.rounded label:before {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.rdio.circle input[type=radio]:checked + label::after,
.rdio.circle input[type=radio]:checked + label::before {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.rdio.circle label:before {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.rdio.rdio-default input[type=radio]:checked + label::after {
  color: gray;
}

.text-center .ckbox,
.text-center .rdio {
  width: 20px;
  margin-left: auto;
  margin-right: auto;
  line-height: 0px;
}

.ckbox,
.rdio {
  position: relative;
  margin-top: 3px;
}

.ckbox label,
.rdio label {
  padding-left: 10px;
  cursor: pointer;
  margin-bottom: 7px !important;
}

.ckbox label:before,
.rdio label:before {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0px;
  left: 0px;
  content: '';
  display: inline-block;
  border: 1px solid #BBB;
  background: #FFF;
}

.ckbox-teal input[type=checkbox]:checked + label::after {
  border-color: #37BC9B;
  background-color: #37BC9B;
}

/* ========================================================================
 * CONTEXTUAL CLASSES CHECKBOX
 * ======================================================================== */

.ckbox-default input[type=checkbox]:checked + label::after {
  border-color: #EEEEEE;
  background-color: #EEEEEE;
}

.ckbox-default input[type=checkbox][disabled]:checked + label::after {
  border-color: #EEEEEE;
  opacity: .5;
}

.ckbox-primary input[type=checkbox]:checked + label::after {
  border-color: #00B1E1;
  background-color: #00B1E1;
}

.ckbox-primary input[type=checkbox][disabled]:checked + label::after {
  border-color: #00B1E1;
  opacity: .5;
}

.ckbox-success input[type=checkbox]:checked + label::after {
  border-color: #8CC152;
  background-color: #8CC152;
}

.ckbox-success input[type=checkbox][disabled]:checked + label::after {
  border-color: #8CC152;
  opacity: .5;
}

.ckbox-info input[type=checkbox]:checked + label::after {
  border-color: #63D3E9;
  background-color: #63D3E9;
}

.ckbox-info input[type=checkbox][disabled]:checked + label::after {
  border-color: #63D3E9;
  opacity: .5;
}

.ckbox-warning input[type=checkbox]:checked + label::after {
  border-color: #F6BB42;
  background-color: #F6BB42;
}

.ckbox-warning input[type=checkbox][disabled]:checked + label::after {
  border-color: #F6BB42;
  opacity: .5;
}

.ckbox-danger input[type=checkbox]:checked + label::after {
  border-color: #E9573F;
  background-color: #E9573F;
}

.ckbox-danger input[type=checkbox][disabled]:checked + label::after {
  border-color: #E9573F;
  opacity: .5;
}

.ckbox-lilac input[type=checkbox]:checked + label::after {
  border-color: #906094;
  background-color: #906094;
}

.ckbox-lilac input[type=checkbox][disabled]:checked + label::after {
  border-color: #906094;
  opacity: .5;
}

.ckbox-inverse input[type=checkbox]:checked + label::after {
  border-color: #2A2A2A;
  background-color: #2A2A2A;
}

.ckbox-inverse input[type=checkbox][disabled]:checked + label::after {
  border-color: #2A2A2A;
  opacity: .5;
}

.rdio-default input[type=radio]:checked + label::after {
  border-color: #EEEEEE;
  background-color: #EEEEEE;
}

.rdio-default input[type=radio][disabled]:checked + label::after {
  border-color: #EEEEEE;
  opacity: .5;
}

.rdio-primary input[type=radio]:checked + label::after {
  border-color: #00B1E1;
  background-color: #00B1E1;
}

.rdio-primary input[type=radio][disabled]:checked + label::after {
  border-color: #00B1E1;
  opacity: .5;
}

.rdio-success input[type=radio]:checked + label::after {
  border-color: #8CC152;
  background-color: #8CC152;
}

.rdio-success input[type=radio][disabled]:checked + label::after {
  border-color: #8CC152;
  opacity: .5;
}

.rdio-info input[type=radio]:checked + label::after {
  border-color: #63D3E9;
  background-color: #63D3E9;
}

.rdio-info input[type=radio][disabled]:checked + label::after {
  border-color: #63D3E9;
  opacity: .5;
}

.rdio-warning input[type=radio]:checked + label::after {
  border-color: #F6BB42;
  background-color: #F6BB42;
}

.rdio-warning input[type=radio][disabled]:checked + label::after {
  border-color: #F6BB42;
  opacity: .5;
}

.rdio-danger input[type=radio]:checked + label::after {
  border-color: #E9573F;
  background-color: #E9573F;
}

.rdio-danger input[type=radio][disabled]:checked + label::after {
  border-color: #E9573F;
  opacity: .5;
}

.rdio-lilac input[type=radio]:checked + label::after {
  border-color: #906094;
  background-color: #906094;
}

.rdio-lilac input[type=radio][disabled]:checked + label::after {
  border-color: #906094;
  opacity: .5;
}

.rdio-inverse input[type=radio]:checked + label::after {
  border-color: #2A2A2A;
  background-color: #2A2A2A;
}

.rdio-inverse input[type=radio][disabled]:checked + label::after {
  border-color: #2A2A2A;
  opacity: .5;
}

.rdio-teal input[type=radio]:checked + label::after {
  border-color: #37BC9B;
  background-color: #37BC9B;
}

/* ========================================================================
 * VALIDATION STATE
 * ======================================================================== */

.has-feedback label ~ .form-control-feedback {
  top: 28px;
}

/* ========================================================================
 * STATIC CONTROL
 * ======================================================================== */

.form-control-static {
  padding-top: 3px;
  padding-bottom: 3px;
}

/* ========================================================================
 * INPUT WITH ICONS
 * ======================================================================== */

.input-icon > i {
  color: #DDD;
  display: block;
  position: absolute;
  margin: 10px 2px 4px 10px;
  z-index: 3;
  width: 16px;
  height: 16px;
  font-size: 16px;
  text-align: center;
}

.input-icon > .form-control {
  padding-left: 33px;
}

.input-icon.right > i {
  right: 8px;
  float: right;
}

.input-icon.right[class*="col-"] > i {
  right: 16px;
}

.input-icon.right > .form-control {
  padding-right: 33px;
  padding-left: 12px;
}

/* ========================================================================
 * INPUT WITH SPINNERS
 * ======================================================================== */

input.spinner[type="text"],
input.spinner[type="password"],
input.spinner[type="datetime"],
input.spinner[type="datetime-local"],
input.spinner[type="date"],
input.spinner[type="month"],
input.spinner[type="time"],
input.spinner[type="week"],
input.spinner[type="number"],
input.spinner[type="email"],
input.spinner[type="url"],
input.spinner[type="search"],
input.spinner[type="tel"],
input.spinner[type="color"] {
  background-image: url("../../global/img/loader/general/1.gif") !important;
  background-repeat: no-repeat;
  background-position: right 6px bottom 6px;
  background-size: 20px Auto;
}

input.spinner[type="text"].flat,
input.spinner[type="password"].flat,
input.spinner[type="datetime"].flat,
input.spinner[type="datetime-local"].flat,
input.spinner[type="date"].flat,
input.spinner[type="month"].flat,
input.spinner[type="time"].flat,
input.spinner[type="week"].flat,
input.spinner[type="number"].flat,
input.spinner[type="email"].flat,
input.spinner[type="url"].flat,
input.spinner[type="search"].flat,
input.spinner[type="tel"].flat,
input.spinner[type="color"].flat {
  background-image: url("../../global/img/loader/flat/1.gif") !important;
}

/* ========================================================================
 * FORM MISC
 * ======================================================================== */

.input-group-addon {
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  min-width: 39px;
}

.input-group-addon .ckbox,
.input-group-addon .rdio {
  position: absolute;
  top: 4px;
  left: 10px;
}

.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn,
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn,
.input-group-xs > .form-control,
.input-group-xs > .input-group-addon,
.input-group-xs > .input-group-btn > .btn {
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

.input-sm,
.form-group-sm .form-control {
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

.form-control {
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

@media (max-width: 640px) {
  .form-inner-all [class*="col-"]:last-child .form-control {
    margin-top: 15px;
  }
}

/* ========================================================================
 * IE SUPPORT
 * ======================================================================== */

/* ========================================================================
 * IMG BORDERED
 * ======================================================================== */

.img-bordered-default {
  border: 2px solid #EEEEEE;
}

.img-bordered-primary {
  border: 2px solid #00B1E1;
}

.img-bordered-success {
  border: 2px solid #8CC152;
}

.img-bordered-info {
  border: 2px solid #63D3E9;
}

.img-bordered-warning {
  border: 2px solid #F6BB42;
}

.img-bordered-danger {
  border: 2px solid #E9573F;
}

.img-bordered-lilac {
  border: 2px solid #906094;
}

.img-bordered-teals {
  border: 2px solid #37BC9B;
}

.img-bordered-inverse {
  border: 2px solid #2A2A2A;
}

/* ========================================================================
 * LABEL
 * ======================================================================== */

.label {
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

.label-default {
  color: #999 !important;
}

.label-default {
  background-color: #EEEEEE;
}

.label-default.label-stroke {
  background-color: transparent;
  border: 1px solid #EEEEEE;
  color: #EEEEEE;
}

.label-primary {
  background-color: #00B1E1;
}

.label-primary.label-stroke {
  background-color: transparent;
  border: 1px solid #00B1E1;
  color: #00B1E1;
}

.label-success {
  background-color: #8CC152;
}

.label-success.label-stroke {
  background-color: transparent;
  border: 1px solid #8CC152;
  color: #8CC152;
}

.label-info {
  background-color: #63D3E9;
}

.label-info.label-stroke {
  background-color: transparent;
  border: 1px solid #63D3E9;
  color: #63D3E9;
}

.label-warning {
  background-color: #F6BB42;
}

.label-warning.label-stroke {
  background-color: transparent;
  border: 1px solid #F6BB42;
  color: #F6BB42;
}

.label-danger {
  background-color: #E9573F;
}

.label-danger.label-stroke {
  background-color: transparent;
  border: 1px solid #E9573F;
  color: #E9573F;
}

.label-lilac {
  background-color: #906094;
}

.label-lilac.label-stroke {
  background-color: transparent;
  border: 1px solid #906094;
  color: #906094;
}

.label-teals {
  background-color: #37BC9B;
}

.label-teals.label-stroke {
  background-color: transparent;
  border: 1px solid #37BC9B;
  color: #37BC9B;
}

.label-inverse {
  background-color: #2A2A2A;
}

.label-inverse.label-stroke {
  background-color: transparent;
  border: 1px solid #2A2A2A;
  color: #2A2A2A;
}

.label-circle {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  line-height: 10px;
  height: 15px;
  width: 15px;
  display: block;
}

/* ========================================================================
 * LIST GROUP
 * ======================================================================== */

.media-list > .media .media-body .media-meta.device {
  position: absolute;
  top: 5px;
  right: 15px;
}

.media-list > .media .media-body .media-meta.time {
  float: right;
  margin-top: 3px;
}

/* ========================================================================
 * MEDIA IMAGE
 * ======================================================================== */

.media {
  position: relative;
}

.media > .pull-left.has-notif i {
  border: 2px solid #2A2A2A;
}

.media > .pull-left.has-notif i.online {
  background-color: #8CC152;
  animation: opacity-badge 0.6s infinite;
  -webkit-animation: opacity-badge 0.6s infinite;
}

@keyframes opacity-badge {
  0% {
    transform: scale(0.5);
  }

  100% {
    transform: scale(1.2);
  }
}

@-webkit-keyframes opacity-badge {
  0% {
    transform: scale(0.5);
  }

  100% {
    transform: scale(1.2);
  }
}

.media > .pull-left.has-notif i.offline {
  background-color: #959595;
}

.media > .pull-left.has-notif i.away {
  background-color: #F6BB42;
}

.media > .pull-left.has-notif i.busy {
  background-color: #E9573F;
}

.media > .pull-left.has-notif i {
  position: absolute;
  left: 14px;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 100%;
}

.media > .pull-left.avatar i {
  left: 4px;
  top: 1px;
}

.media-list {
  background-color: white;
}

.media-list > a {
  text-decoration: none;
  border-bottom: 1px solid #DDD;
}

.media-list > a:hover {
  background-color: #EEEEEE;
}

.media-list > a:last-child {
  border-bottom: none;
}

.media-list > .media {
  display: block;
  padding: 8px 15px;
  margin: 0;
  line-height: 21px;
}

.media-list > .media > .pull-left {
  display: table-cell;
  margin-top: 4px;
}

.media-list > .media .media-object {
  width: 50px;
  height: 50px;
  text-align: center;
}

.media-list > .media .media-object img {
  width: 30px;
  height: 30px;
}

.media-list > .media > .media-body {
  display: table-cell;
}

.media-list > .media > .media-body > .media-heading {
  text-transform: capitalize;
  display: block;
  font-weight: 600;
  color: #444;
  margin-bottom: 0;
}

.media-list > .media > .media-body > .media-text {
  display: block;
  color: #777;
  margin: 0;
  font-size: 13px;
  min-width: 210px;
}

.media-list > .media > .media-body > .media-meta {
  font-size: 11px !important;
  margin: 0;
  color: #8f8f8f;
}

.media-list.small > .media {
  padding: 7px 15px;
}

.media-list.small > .media .media-object {
  width: 38px;
  height: 38px;
}

.media-details {
  padding: 20px;
}

.media-details .category {
  font-size: 11px;
}

.media-details .details {
  margin-top: 20px;
}

.media-details .details h4 {
  font-size: 12px;
  color: #333;
  text-transform: uppercase;
}

.media-details .table {
  box-shadow: none;
}

.media-details .media-title {
  font-size: 17px;
}

/* ========================================================================
 * MODALS
 * ======================================================================== */

.modal .modal-dialog .modal-content {
  border: 1px solid #DDD;
}

.modal .modal-dialog .modal-content .panel-group {
  margin-bottom: 0px;
}

.modal .modal-dialog .modal-content .panel {
  box-shadow: none;
  margin-bottom: 0px;
}

.modal .modal-dialog .modal-content .modal-footer {
  padding: 10px;
  background-color: #F5F5F5;
  margin-top: 0px;
  -moz-border-radius: 0px 0px 3px 3px;
  -webkit-border-radius: 0px;
  border-radius: 0px 0px 3px 3px;
}

.modal.modal-center {
  padding-top: 10%;
}

.modal-primary .modal-header {
  background-color: #00B1E1;
  color: white;
  border-bottom: 1px solid #00B1E1;
  position: relative;
}

.modal-primary .modal-header:before {
  display: block;
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  content: "";
  border-top: 1px solid #00B1E1;
  border-left: 1px solid #00B1E1;
  border-right: 1px solid #00B1E1;
}

.modal-primary .modal-content {
  border: 1px solid #00B1E1;
}

.modal-success .modal-header {
  background-color: #8CC152;
  color: white;
  border-bottom: 1px solid #8CC152;
  position: relative;
}

.modal-success .modal-header:before {
  display: block;
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  content: "";
  border-top: 1px solid #8CC152;
  border-left: 1px solid #8CC152;
  border-right: 1px solid #8CC152;
}

.modal-success .modal-content {
  border: 1px solid #8CC152;
}

.modal-info .modal-header {
  background-color: #63D3E9;
  color: white;
  border-bottom: 1px solid #63D3E9;
  position: relative;
}

.modal-info .modal-header:before {
  display: block;
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  content: "";
  border-top: 1px solid #63D3E9;
  border-left: 1px solid #63D3E9;
  border-right: 1px solid #63D3E9;
}

.modal-info .modal-content {
  border: 1px solid #63D3E9;
}

.modal-warning .modal-header {
  background-color: #F6BB42;
  color: white;
  border-bottom: 1px solid #F6BB42;
  position: relative;
}

.modal-warning .modal-header:before {
  display: block;
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  content: "";
  border-top: 1px solid #F6BB42;
  border-left: 1px solid #F6BB42;
  border-right: 1px solid #F6BB42;
}

.modal-warning .modal-content {
  border: 1px solid #F6BB42;
}

.modal-danger .modal-header {
  background-color: #E9573F;
  color: white;
  border-bottom: 1px solid #E9573F;
  position: relative;
}

.modal-danger .modal-header:before {
  display: block;
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  content: "";
  border-top: 1px solid #E9573F;
  border-left: 1px solid #E9573F;
  border-right: 1px solid #E9573F;
}

.modal-danger .modal-content {
  border: 1px solid #E9573F;
}

.modal-lilac .modal-header {
  background-color: #906094;
  color: white;
  border-bottom: 1px solid #906094;
  position: relative;
}

.modal-lilac .modal-header:before {
  display: block;
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  content: "";
  border-top: 1px solid #906094;
  border-left: 1px solid #906094;
  border-right: 1px solid #906094;
}

.modal-lilac .modal-content {
  border: 1px solid #906094;
}

.modal-teal .modal-header {
  background-color: #37BC9B;
  color: white;
  border-bottom: 1px solid #37BC9B;
  position: relative;
}

.modal-teal .modal-header:before {
  display: block;
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  content: "";
  border-top: 1px solid #37BC9B;
  border-left: 1px solid #37BC9B;
  border-right: 1px solid #37BC9B;
}

.modal-teal .modal-content {
  border: 1px solid #37BC9B;
}

.modal-photo-viewer {
  margin-top: 0px;
  margin-bottom: 0px;
  top: 50%;
  left: 50%;
  width: auto;
  position: absolute;
}

.modal-photo-viewer .modal-content {
  position: relative;
  width: 900px;
  height: auto;
  margin-left: -50%;
  margin-top: -200px;
}

.modal-photo-viewer .row {
  margin-left: 0px;
  margin-right: 0px;
}

.modal-photo-viewer .modal-photo-left,
.modal-photo-viewer .modal-photo-right {
  padding: 0px;
}

.modal-photo-viewer .modal-photo-right .media-details {
  padding: 10px;
}

.modal-photo-viewer .modal-photo-right .media-details .media-title {
  margin-top: 13px;
}

.modal-photo-viewer .modal-photo {
  top: 50%;
  position: relative;
}

.modal-photo-viewer .photo {
  max-height: 539px;
  margin: auto;
}

@media (max-width: 800px) {
  .modal-photo-viewer .modal-content {
    width: 80%;
    margin-left: -42%;
  }

  .modal-photo-viewer .modal-photo-left {
    -moz-border-radius: 3px 3px 0px 0px;
    -webkit-border-radius: 3px;
    border-radius: 3px 3px 0px 0px;
  }
}

@media (max-width: 480px) {
  .modal-photo-viewer .modal-content {
    width: 50%;
    margin-left: -27%;
  }
}

/* ========================================================================
 * PAGINATION
 * ======================================================================== */

.pagination {
  vertical-align: middle;
}

/* ========================================================================
 * PANEL
 * ======================================================================== */

/* ========================================================================
 * TABLE OF CONTENT
 * ========================================================================
   01. PANEL
   02. PANEL HEADING
   03. PANEL SUB HEADING
   04. PANEL BODY
   05. PANEL FOOTER
   06. CONTEXTUAL CLASSES PANEL
   07. PANEL SCROLLABLE
   08. PANEL TAB
   09. PANEL TAB DOUBLE
   10. PANEL TAB VERTICAL
   11. PANEL GROUP
 * ======================================================================== */

.panel {
  border: none;
  position: relative;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.panel.panel-fullsize {
  position: fixed;
  width: 96%;
  top: 25px;
  left: 25px;
  z-index: 9999;
}

.panel.panel-fullsize .chartjs {
  max-width: inherit !important;
  height: 470px !important;
}

.panel .panel-heading {
  padding: 5px;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
  border-bottom: 1px solid #DDD;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

.panel .panel-heading .has-feedback .form-control {
  padding-right: 0;
}

.panel .panel-heading > .pull-right {
  margin-top: 5px;
  margin-right: 5px;
}

.panel .panel-heading > .pull-right > i {
  padding: 5px;
}

.panel .panel-heading > .pull-right > .progress {
  min-width: 120px;
}

.panel .panel-heading .panel-title {
  padding: 10px;
  font-size: 17px;
}

.panel .panel-heading .panel-title > i {
  margin-right: 5px;
}

.panel .panel-heading > .panel-title {
  vertical-align: middle;
}

.panel .panel-heading .nav > li > a {
  padding: 10px;
}

.panel .panel-search {
  padding: 15px;
  position: relative;
  color: #333;
  display: none;
  background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.panel .panel-search i {
  position: absolute;
  right: 25px;
  top: 25px;
  color: #A2A2A2;
}

.panel .panel-sub-heading {
  display: block;
  background-color: #FBFBFB;
  border-bottom: 1px solid #CFD9DB;
}

.panel .panel-sub-heading h4 {
  margin: 0px;
}

.panel .panel-sub-heading p {
  margin: 0px;
  font-size: 13px;
  color: #999;
}

.panel .panel-body {
  position: relative;
  background-color: #FBFBFB;
  padding: 10px;
}

.panel .panel-body .table-responsive {
  margin-top: -1px;
}

.panel .panel-body.out {
  display: none;
}

.panel .panel-body .sample-wrapper p {
  font-size: 13px;
  color: #999;
}

.panel .panel-body .page-header:first-child {
  margin-top: 10px;
}

.panel .panel-body .list-group .list-group-item {
  border-top: none;
  border-right: none;
  border-bottom: 2px solid #DDD;
  border-left: none;
  -webkit-border-top-left-radius: 0px;
  -moz-border-radius-topleft: 0px;
  border-top-left-radius: 0px;
  -webkit-border-top-right-radius: 0px;
  -moz-border-radius-topright: 0px;
  border-top-right-radius: 0px;
}

.panel .panel-body .list-group .list-group-item:last-child {
  border-bottom: none !important;
}

.panel .panel-body table {
  margin-bottom: 0px;
}

.panel .panel-body table thead tr th {
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

.panel .panel-footer {
  padding: 10px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

.panel.panel-default .panel-heading .option .btn:hover {
  background-color: #e1e1e1;
}

.panel.rounded .ribbon-wrapper + .panel-body {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.panel.no-overflow .panel-body,
.panel.no-overflow .panel-footer,
.panel.no-overflow .form-footer {
  -moz-border-radius: 0px 0px 3px 3px;
  -webkit-border-radius: 0px;
  border-radius: 0px 0px 3px 3px;
}

.panel-primary > .panel-heading {
  background-color: #00B1E1;
  border: 1px solid #00addc;
  color: white;
}

.panel-primary > .panel-heading .option .btn:hover {
  background-color: #009dc8;
  color: white;
}

.panel-primary > .panel-heading .option .btn i {
  color: white;
}

.panel-bg-primary .panel-body {
  background-color: #00B1E1;
  color: white;
}

.panel-bg-primary .panel-body .text-muted {
  color: #f2f2f2;
}

.panel-success > .panel-heading {
  background-color: #8CC152;
  border: 1px solid #8ac04e;
  color: white;
}

.panel-success > .panel-heading .option .btn:hover {
  background-color: #7fb842;
  color: white;
}

.panel-success > .panel-heading .option .btn i {
  color: white;
}

.panel-bg-success .panel-body {
  background-color: #8CC152;
  color: white;
}

.panel-bg-success .panel-body .text-muted {
  color: #f2f2f2;
}

.panel-info > .panel-heading {
  background-color: #63D3E9;
  border: 1px solid #5fd2e8;
  color: white;
}

.panel-info > .panel-heading .option .btn:hover {
  background-color: #4dcde6;
  color: white;
}

.panel-info > .panel-heading .option .btn i {
  color: white;
}

.panel-bg-info .panel-body {
  background-color: #63D3E9;
  color: white;
}

.panel-bg-info .panel-body .text-muted {
  color: #f2f2f2;
}

.panel-warning > .panel-heading {
  background-color: #F6BB42;
  border: 1px solid #f6b93d;
  color: white;
}

.panel-warning > .panel-heading .option .btn:hover {
  background-color: #f5b22a;
  color: white;
}

.panel-warning > .panel-heading .option .btn i {
  color: white;
}

.panel-bg-warning .panel-body {
  background-color: #F6BB42;
  color: white;
}

.panel-bg-warning .panel-body .text-muted {
  color: #f2f2f2;
}

.panel-danger > .panel-heading {
  background-color: #E9573F;
  border: 1px solid #e8533a;
  color: white;
}

.panel-danger > .panel-heading .option .btn:hover {
  background-color: #e64328;
  color: white;
}

.panel-danger > .panel-heading .option .btn i {
  color: white;
}

.panel-bg-danger .panel-body {
  background-color: #E9573F;
  color: white;
}

.panel-bg-danger .panel-body .text-muted {
  color: #f2f2f2;
}

.panel-inverse > .panel-heading {
  background-color: #2A2A2A;
  border: 1px solid #272727;
  color: white;
}

.panel-inverse > .panel-heading .option .btn:hover {
  background-color: #1d1d1d;
  color: white;
}

.panel-inverse > .panel-heading .option .btn i {
  color: white;
}

.panel-bg-inverse .panel-body {
  background-color: #2A2A2A;
  color: white;
}

.panel-bg-inverse .panel-body .text-muted {
  color: #f2f2f2;
}

.panel-lilac > .panel-heading {
  background-color: #906094;
  border: 1px solid #8d5e91;
  color: white;
}

.panel-lilac > .panel-heading .option .btn:hover {
  background-color: #815685;
  color: white;
}

.panel-lilac > .panel-heading .option .btn i {
  color: white;
}

.panel-bg-lilac .panel-body {
  background-color: #906094;
  color: white;
}

.panel-bg-lilac .panel-body .text-muted {
  color: #f2f2f2;
}

.panel-teal .panel-heading {
  background-color: #37BC9B;
  border: 1px solid #36b898;
  color: white;
}

.panel-teal .panel-heading .option .btn:hover {
  background-color: #31a88b;
  color: white;
}

.panel-teal .panel-heading .option .btn i {
  color: white;
}

.panel-bg-teal .panel-body {
  background-color: #37BC9B;
  color: white;
}

.panel-bg-teal .panel-body .text-muted {
  color: #f2f2f2;
}

.panel-scrollable .panel-body {
  height: 300px;
}

.panel-tab {
  background-color: #FBFBFB;
}

.panel-tab .panel-heading ul {
  position: relative;
  overflow: visible;
  list-style: none;
  margin: 0px;
  padding: 0px;
  display: inline-block;
  border: none;
  margin-bottom: -6px;
}

.panel-tab .panel-heading ul li {
  line-height: 25px;
}

.panel-tab .panel-heading ul li.active {
  color: #444;
}

.panel-tab .panel-heading ul li.active a {
  color: #444;
  background: #F7F7F7;
}

.panel-tab .panel-heading ul li.active a:hover {
  background: #F7F7F7;
}

.panel-tab .panel-heading ul li.active a i {
  color: #81B71A;
}

.panel-tab .panel-heading ul li a {
  width: auto;
  margin: 0px;
  display: block;
  padding: 10px 15px;
  position: relative;
  overflow: hidden;
  color: #999;
  text-decoration: none;
  border: none;
  border-right: 1px solid #DDD;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

.panel-tab .panel-heading ul li a:hover,
.panel-tab .panel-heading ul li a:focus {
  border: none;
  border-right: 1px solid #DDD;
}

.panel-tab .panel-heading ul li a:hover {
  background-color: transparent;
}

.panel-tab .panel-heading ul li a:hover i {
  color: #81B71A;
}

.panel-tab .panel-heading ul li a > i,
.panel-tab .panel-heading ul li a > span {
  margin: 0px auto;
  text-align: center;
}

.panel-tab .panel-heading ul li a > div {
  text-align: center;
}

.panel-tab .panel-heading ul li a i {
  width: 100%;
  height: 30px;
  line-height: 20px;
  font-size: 25px;
  color: #CCC;
}

.panel-tab .panel-heading ul li a span {
  display: block;
  line-height: 15px;
}

.panel-tab .panel-sub-heading {
  background: #F7F7F7;
}

.panel-tab .panel-body {
  background: #F7F7F7;
}

.panel-tab .panel-body .tab-content {
  background: #F7F7F7;
  padding: 0px;
  margin: 0px;
  box-shadow: none;
}

.panel-tab .panel-body .tab-content .tab-pane > h4 {
  margin-top: 0px;
}

.panel-tab .panel-body .tab-content .tab-pane > p {
  margin: 0px;
}

.panel-tab .nav-pills > li + li {
  margin-left: 0px;
}

@media (max-width: 360px) {
  .panel-tab .panel-heading .pull-right {
    float: inherit !important;
    display: block;
    width: 100%;
  }

  .panel-tab .panel-heading ul li {
    width: 100%;
  }
}

.panel-tab-double .panel-heading ul li {
  min-width: 100px;
}

.panel-tab-double .panel-heading ul li a {
  padding: 15px 15px 15px 15px;
}

.panel-tab-double .panel-heading ul li a > i,
.panel-tab-double .panel-heading ul li a > div {
  float: left;
}

.panel-tab-double .panel-heading ul li a > div {
  text-align: left;
}

.panel-tab-double .panel-heading ul li a > div span:last-child {
  margin-top: 3px;
}

.panel-tab-double .panel-heading ul li a i {
  margin-top: 5px;
  margin-right: 5px;
  width: 35px;
  height: 35px;
}

@media (max-width: 640px) {
  .panel-tab.panel-tab-double .panel-heading ul li {
    width: 100%;
  }
}

.panel-tab-vertical {
  padding-bottom: 5px;
}

.panel-tab-vertical .panel-heading {
  border-bottom: none;
}

.panel-tab-vertical .panel-heading ul {
  display: block;
  height: auto;
}

.panel-tab-vertical .panel-heading ul li {
  float: none;
  display: block;
  border-right: none;
  border-bottom: 1px solid #EFEFEF;
}

.panel-tab-vertical .panel-heading ul li a {
  min-height: 40px;
}

.panel-tab-vertical .panel-heading ul li:first-child a {
  -webkit-border-top-left-radius: 3px;
  -moz-border-radius-topleft: 3px;
  border-top-left-radius: 3px;
}

.panel-tab-vertical .panel-heading ul li:last-child a {
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-radius-bottomleft: 3px;
  border-bottom-left-radius: 3px;
}

.panel-tab-vertical .panel-body {
  box-shadow: none;
}

.panel-group .panel {
  border-top: 1px solid #DDD;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

.panel-group .panel:first-child {
  border-top: none;
  -webkit-border-top-left-radius: 3px;
  -moz-border-radius-topleft: 3px;
  border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -moz-border-radius-topright: 3px;
  border-top-right-radius: 3px;
}

.panel-group .panel:last-child {
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-radius-bottomleft: 3px;
  border-bottom-left-radius: 3px;
  -webkit-border-bottom-right-radius: 3px;
  -moz-border-radius-bottomright: 3px;
  border-bottom-right-radius: 3px;
}

.panel-group .panel + .panel {
  margin-top: 0px;
}

.panel-group .panel .panel-heading {
  padding: 0px;
}

.panel-group .panel .panel-heading .panel-title {
  padding: 0px;
}

.panel-group .panel .panel-heading .panel-title a {
  padding: 14px 15px;
  display: block;
  text-decoration: none;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.panel-group .panel .panel-heading .panel-title a:hover {
  background-color: #F3F3F3;
}

.panel-fullsize-backdrop {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 1040;
  background-color: rgba(0, 0, 0, 0.27);
}

/* ========================================================================
 * PROGRESS BAR
 * ======================================================================== */

.progress {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

.progress.progress-lg {
  height: 25px;
}

.progress.progress-sm {
  height: 15px;
}

.progress.progress-xs {
  height: 10px;
}

.progress.progress-xxs {
  height: 5px;
}

.progress-bar-primary {
  background-color: #00B1E1;
}

.progress-bar-success {
  background-color: #8CC152;
}

.progress-bar-info {
  background-color: #63D3E9;
}

.progress-bar-warning {
  background-color: #F6BB42;
}

.progress-bar-danger {
  background-color: #E9573F;
}

.progress-bar-lilac {
  background-color: #906094;
}

.progress-bar-inverse {
  background-color: #2A2A2A;
}

.progress-bar-teal {
  background-color: #37BC9B;
}

/* ========================================================================
 * IE SUPPORT
 * ======================================================================== */

.ie8 .progress-striped .hidden-ie,
.ie9 .progress-striped .hidden-ie {
  display: none !important;
}

/* ========================================================================
 * RATING STAR
 * ======================================================================== */

.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
  font-size: 13px;
}

.rating.rating-2x {
  font-size: 26px;
}

.rating.rating-3x {
  font-size: 39px;
}

.rating.rating-4x {
  font-size: 52px;
}

.rating.rating-5x {
  font-size: 65px;
}

.rating .star {
  font-family: "FontAwesome";
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  cursor: pointer;
}

.rating .star:hover:before {
  content: "\f005";
}

.rating .star:before {
  content: "\f006";
  padding-right: 0;
}

.rating .star.active:before {
  content: "\f005";
}

.rating .star.active ~ .star:before {
  content: "\f005";
}

.rating-primary .star:hover:before {
  color: #00B1E1 !important;
}

.rating-primary .star.active:before {
  color: #00B1E1 !important;
}

.rating-primary .star.active ~ .star:before {
  color: #00B1E1 !important;
}

.rating-success .star:hover:before {
  color: #8CC152 !important;
}

.rating-success .star.active:before {
  color: #8CC152 !important;
}

.rating-success .star.active ~ .star:before {
  color: #8CC152 !important;
}

.rating-info .star:hover:before {
  color: #63D3E9 !important;
}

.rating-info .star.active:before {
  color: #63D3E9 !important;
}

.rating-info .star.active ~ .star:before {
  color: #63D3E9 !important;
}

.rating-warning .star:hover:before {
  color: #F6BB42 !important;
}

.rating-warning .star.active:before {
  color: #F6BB42 !important;
}

.rating-warning .star.active ~ .star:before {
  color: #F6BB42 !important;
}

.rating-danger .star:hover:before {
  color: #E9573F !important;
}

.rating-danger .star.active:before {
  color: #E9573F !important;
}

.rating-danger .star.active ~ .star:before {
  color: #E9573F !important;
}

.rating-lilac .star:hover:before {
  color: #906094 !important;
}

.rating-lilac .star.active:before {
  color: #906094 !important;
}

.rating-lilac .star.active ~ .star:before {
  color: #906094 !important;
}

.rating-teals .star:hover:before {
  color: #37BC9B !important;
}

.rating-teals .star.active:before {
  color: #37BC9B !important;
}

.rating-teals .star.active ~ .star:before {
  color: #37BC9B !important;
}

.rating-inverse .star:hover:before {
  color: #2A2A2A !important;
}

.rating-inverse .star.active:before {
  color: #2A2A2A !important;
}

.rating-inverse .star.active ~ .star:before {
  color: #2A2A2A !important;
}

/* ========================================================================
 * RIBBONS
 * ======================================================================== */

.ribbon-wrapper {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -4px;
  right: -2px;
  z-index: 250;
}

.ribbon-wrapper.top-left {
  left: -2px;
}

.ribbon-wrapper.top-left .ribbon {
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  left: -30px;
}

.ribbon-wrapper.bottom-right {
  right: -2px;
  bottom: -2px;
  top: inherit;
}

.ribbon-wrapper.bottom-right .ribbon {
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  left: -6px;
  top: 40px;
}

.ribbon-wrapper.bottom-left {
  left: -3px;
  bottom: -3px;
  top: inherit;
}

.ribbon-wrapper.bottom-left .ribbon {
  left: -28px;
  top: 40px;
}

.ribbon-wrapper .ribbon {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #FFF;
  text-align: center;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
  background-color: #797979;
}

.ribbon-wrapper .ribbon:before {
  left: 0;
  bottom: -1px;
}

.ribbon-wrapper .ribbon:after {
  right: 0;
}

.ribbon-wrapper .ribbon:before,
.ribbon-wrapper .ribbon:after {
  content: "";
  border-top: 2px solid #797979;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  position: absolute;
  bottom: -2px;
}

.ribbon-wrapper .ribbon.ribbon-shadow {
  -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.ribbon-wrapper .ribbon.transparent {
  background-color: RGBA(121, 121, 121, 0.34) !important;
  border: none !important;
}

.ribbon-default {
  background-color: #EEEEEE !important;
}

.ribbon-default:before,
.ribbon-default:after {
  border-top: 2px solid #EEEEEE !important;
}

.ribbon-default.transparent {
  background-color: fade(#EEEEEE, 40%) !important;
}

.ribbon-default.transparent:before,
.ribbon-default.transparent:after {
  border-top: 2px solid fade(#EEEEEE, 40%) !important;
}

.ribbon-default.ribbon-shadow {
  -moz-box-shadow: 0 0 3px fade(#EEEEEE, 50%) !important;
  -webkit-box-shadow: 0 0 3px fade(#EEEEEE, 50%) !important;
  box-shadow: 0 0 3px fade(#EEEEEE, 50%) !important;
}

.ribbon-primary {
  background-color: #00B1E1 !important;
}

.ribbon-primary:before,
.ribbon-primary:after {
  border-top: 2px solid #00B1E1 !important;
}

.ribbon-primary.transparent {
  background-color: fade(#00B1E1, 40%) !important;
}

.ribbon-primary.transparent:before,
.ribbon-primary.transparent:after {
  border-top: 2px solid fade(#00B1E1, 40%) !important;
}

.ribbon-primary.ribbon-shadow {
  -moz-box-shadow: 0 0 3px fade(#00B1E1, 50%) !important;
  -webkit-box-shadow: 0 0 3px fade(#00B1E1, 50%) !important;
  box-shadow: 0 0 3px fade(#00B1E1, 50%) !important;
}

.ribbon-success {
  background-color: #8CC152 !important;
}

.ribbon-success:before,
.ribbon-success:after {
  border-top: 2px solid #8CC152 !important;
}

.ribbon-success.transparent {
  background-color: fade(#8CC152, 40%) !important;
}

.ribbon-success.transparent:before,
.ribbon-success.transparent:after {
  border-top: 2px solid fade(#8CC152, 40%) !important;
}

.ribbon-success.ribbon-shadow {
  -moz-box-shadow: 0 0 3px fade(#8CC152, 50%) !important;
  -webkit-box-shadow: 0 0 3px fade(#8CC152, 50%) !important;
  box-shadow: 0 0 3px fade(#8CC152, 50%) !important;
}

.ribbon-info {
  background-color: #63D3E9 !important;
}

.ribbon-info:before,
.ribbon-info:after {
  border-top: 2px solid #63D3E9 !important;
}

.ribbon-info.transparent {
  background-color: fade(#63D3E9, 40%) !important;
}

.ribbon-info.transparent:before,
.ribbon-info.transparent:after {
  border-top: 2px solid fade(#63D3E9, 40%) !important;
}

.ribbon-info.ribbon-shadow {
  -moz-box-shadow: 0 0 3px fade(#63D3E9, 50%) !important;
  -webkit-box-shadow: 0 0 3px fade(#63D3E9, 50%) !important;
  box-shadow: 0 0 3px fade(#63D3E9, 50%) !important;
}

.ribbon-warning {
  background-color: #F6BB42 !important;
}

.ribbon-warning:before,
.ribbon-warning:after {
  border-top: 2px solid #F6BB42 !important;
}

.ribbon-warning.transparent {
  background-color: fade(#F6BB42, 40%) !important;
}

.ribbon-warning.transparent:before,
.ribbon-warning.transparent:after {
  border-top: 2px solid fade(#F6BB42, 40%) !important;
}

.ribbon-warning.ribbon-shadow {
  -moz-box-shadow: 0 0 3px fade(#F6BB42, 50%) !important;
  -webkit-box-shadow: 0 0 3px fade(#F6BB42, 50%) !important;
  box-shadow: 0 0 3px fade(#F6BB42, 50%) !important;
}

.ribbon-danger {
  background-color: #E9573F !important;
}

.ribbon-danger:before,
.ribbon-danger:after {
  border-top: 2px solid #E9573F !important;
}

.ribbon-danger.transparent {
  background-color: fade(#E9573F, 40%) !important;
}

.ribbon-danger.transparent:before,
.ribbon-danger.transparent:after {
  border-top: 2px solid fade(#E9573F, 40%) !important;
}

.ribbon-danger.ribbon-shadow {
  -moz-box-shadow: 0 0 3px fade(#E9573F, 50%) !important;
  -webkit-box-shadow: 0 0 3px fade(#E9573F, 50%) !important;
  box-shadow: 0 0 3px fade(#E9573F, 50%) !important;
}

.ribbon-lilac {
  background-color: #906094 !important;
}

.ribbon-lilac:before,
.ribbon-lilac:after {
  border-top: 2px solid #906094 !important;
}

.ribbon-lilac.transparent {
  background-color: fade(#906094, 40%) !important;
}

.ribbon-lilac.transparent:before,
.ribbon-lilac.transparent:after {
  border-top: 2px solid fade(#906094, 40%) !important;
}

.ribbon-lilac.ribbon-shadow {
  -moz-box-shadow: 0 0 3px fade(#906094, 50%) !important;
  -webkit-box-shadow: 0 0 3px fade(#906094, 50%) !important;
  box-shadow: 0 0 3px fade(#906094, 50%) !important;
}

.ribbon-teals {
  background-color: #37BC9B !important;
}

.ribbon-teals:before,
.ribbon-teals:after {
  border-top: 2px solid #37BC9B !important;
}

.ribbon-teals.transparent {
  background-color: fade(#37BC9B, 40%) !important;
}

.ribbon-teals.transparent:before,
.ribbon-teals.transparent:after {
  border-top: 2px solid fade(#37BC9B, 40%) !important;
}

.ribbon-teals.ribbon-shadow {
  -moz-box-shadow: 0 0 3px fade(#37BC9B, 50%) !important;
  -webkit-box-shadow: 0 0 3px fade(#37BC9B, 50%) !important;
  box-shadow: 0 0 3px fade(#37BC9B, 50%) !important;
}

.ribbon-inverse {
  background-color: #2A2A2A !important;
}

.ribbon-inverse:before,
.ribbon-inverse:after {
  border-top: 2px solid #2A2A2A !important;
}

.ribbon-inverse.transparent {
  background-color: fade(#2A2A2A, 40%) !important;
}

.ribbon-inverse.transparent:before,
.ribbon-inverse.transparent:after {
  border-top: 2px solid fade(#2A2A2A, 40%) !important;
}

.ribbon-inverse.ribbon-shadow {
  -moz-box-shadow: 0 0 3px fade(#2A2A2A, 50%) !important;
  -webkit-box-shadow: 0 0 3px fade(#2A2A2A, 50%) !important;
  box-shadow: 0 0 3px fade(#2A2A2A, 50%) !important;
}

/* ========================================================================
 * TABLE
 * ======================================================================== */

.table {
  margin-bottom: 0px;
}

.table thead tr th {
  background-color: #EEEEEE;
  border-color: #e1e1e1 #e1e1e1 gainsboro;
  vertical-align: middle;
  border-width: 1px 1px 7px;
  border-style: solid;
  font-weight: 400;
  font-size: 13px;
}

.table thead tr th:first-child {
  border-left: none;
}

.table thead tr th:last-child {
  border-right: none;
}

.table thead .sorting:after {
  margin-left: 5px;
  content: "\f0dc";
  font-family: 'FontAwesome';
}

.table thead .sorting_asc:after {
  margin-left: 5px;
  content: "\f0dd";
  font-family: 'FontAwesome';
}

.table thead .sorting_desc:after {
  margin-left: 5px;
  content: "\f0de";
  font-family: 'FontAwesome';
}

.table thead .sorting_asc_disabled:after {
  margin-left: 5px;
  color: rgba(255, 255, 255, 0.3);
  content: "\f0dd";
  font-family: 'FontAwesome';
}

.table thead .sorting_desc_disabled:after {
  margin-left: 5px;
  color: rgba(255, 255, 255, 0.3);
  content: "\f0de";
  font-family: 'FontAwesome';
}

.table tbody tr.border-danger td {
  background: inherit !important;
}

.table tbody tr.border-danger td:first-child {
  position: relative;
  padding-left: 10px;
}

.table tbody tr.border-danger td:first-child:before {
  border-left: 3px solid #E9573F;
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: -1px;
  bottom: 0;
}

.table tbody tr.border-success td {
  background: inherit !important;
}

.table tbody tr.border-success td:first-child {
  position: relative;
  padding-left: 10px;
}

.table tbody tr.border-success td:first-child:before {
  border-left: 3px solid #8CC152;
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: -1px;
  bottom: 0;
}

.table tbody tr.border-primary td {
  background: inherit !important;
}

.table tbody tr.border-primary td:first-child {
  position: relative;
  padding-left: 10px;
}

.table tbody tr.border-primary td:first-child:before {
  border-left: 3px solid #00B1E1;
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: -1px;
  bottom: 0;
}

.table tbody tr.border-info td {
  background: inherit !important;
}

.table tbody tr.border-info td:first-child {
  position: relative;
  padding-left: 10px;
}

.table tbody tr.border-info td:first-child:before {
  border-left: 3px solid #63D3E9;
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: -1px;
  bottom: 0;
}

.table tbody tr.border-warning td {
  background: inherit !important;
}

.table tbody tr.border-warning td:first-child {
  position: relative;
  padding-left: 10px;
}

.table tbody tr.border-warning td:first-child:before {
  border-left: 3px solid #F6BB42;
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: -1px;
  bottom: 0;
}

.table tbody tr.border-inverse td {
  background: inherit !important;
}

.table tbody tr.border-inverse td:first-child {
  position: relative;
  padding-left: 10px;
}

.table tbody tr.border-inverse td:first-child:before {
  border-left: 3px solid #2A2A2A;
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: -1px;
  bottom: 0;
}

.table tbody tr.border-lilac td {
  background: inherit !important;
}

.table tbody tr.border-lilac td:first-child {
  position: relative;
  padding-left: 10px;
}

.table tbody tr.border-lilac td:first-child:before {
  border-left: 3px solid #906094;
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: -1px;
  bottom: 0;
}

.table tbody tr:first-child td:first-child:before {
  top: 2px !important;
}

.table tbody tr td {
  background-color: #FBFBFB;
}

.table tbody tr td > a {
  margin-right: 5px;
}

.table tbody tr td > a i {
  color: #636E7B;
}

.table tbody tr td .btn.btn-success i,
.table tbody tr td .btn.btn-danger i,
.table tbody tr td .btn.btn-primary i,
.table tbody tr td .btn.btn-info i,
.table tbody tr td .btn.btn-warning i {
  color: white;
}

.table tfoot tr th {
  vertical-align: middle;
  background-color: #EEEEEE;
  border-width: 7px 1px 1px;
  border-style: solid;
  border-color: gainsboro #e1e1e1 #e1e1e1;
  font-weight: 400;
  font-size: 13px;
  border-bottom: none;
  padding-left: 18px;
  padding-right: 18px;
}

.table tfoot tr th:first-child {
  border-left: none;
}

.table tfoot tr th:last-child {
  border-right: none;
}

.table.table-striped tbody tr:nth-child(odd) td,
.table.table-striped tbody tr:nth-child(odd) th {
  background-color: #f6f6f6;
}

table.table-bordered tbody tr td:first-child:before {
  left: -2px !important;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
  background: none;
}

.table-primary thead tr th {
  background-color: #00B1E1 !important;
  border-color: #00c5fb #00c5fb #0095bd !important;
  color: #fff;
}

.table-primary tbody tr td.sorting_1 {
  background: #24d0ff !important;
  color: white;
  border-bottom: 1px solid #48d8ff !important;
}

.table-primary tfoot tr th {
  background-color: #00B1E1 !important;
  border-color: #0095bd #00c5fb #00c5fb !important;
  color: #fff;
}

.table-primary.table-bordered {
  border: 1px solid #00B1E1;
}

.table-primary.table-bordered thead tr th:first-child,
.table-primary.table-bordered thead tr th:last-child,
.table-primary.table-bordered tfoot tr th:first-child,
.table-primary.table-bordered tfoot tr th:last-child {
  -moz-border-radius: 0px !important;
  -webkit-border-radius: 0px;
  border-radius: 0px !important;
}

.table-primary.table-bordered tbody tr td.sorting_1 {
  border-right: 1px solid #48d8ff !important;
}

.table-primary table.has-columns-hidden > tbody > tr > td > span.responsiveExpander:before {
  color: white;
}

.table-primary table.has-columns-hidden > tbody > tr.detail-show > td span.responsiveExpander:before {
  color: white;
}

.table-success thead tr th {
  background-color: #8CC152 !important;
  border-color: #98c865 #98c865 #7ab03f !important;
  color: #fff;
}

.table-success tbody tr td.sorting_1 {
  background: #acd283 !important;
  color: white;
  border-bottom: 1px solid #bedc9d !important;
}

.table-success tfoot tr th {
  background-color: #8CC152 !important;
  border-color: #7ab03f #98c865 #98c865 !important;
  color: #fff;
}

.table-success.table-bordered {
  border: 1px solid #8CC152;
}

.table-success.table-bordered thead tr th:first-child,
.table-success.table-bordered thead tr th:last-child,
.table-success.table-bordered tfoot tr th:first-child,
.table-success.table-bordered tfoot tr th:last-child {
  -moz-border-radius: 0px !important;
  -webkit-border-radius: 0px;
  border-radius: 0px !important;
}

.table-success.table-bordered tbody tr td.sorting_1 {
  border-right: 1px solid #bedc9d !important;
}

.table-success table.has-columns-hidden > tbody > tr > td > span.responsiveExpander:before {
  color: white;
}

.table-success table.has-columns-hidden > tbody > tr.detail-show > td span.responsiveExpander:before {
  color: white;
}

.table-info thead tr th {
  background-color: #63D3E9 !important;
  border-color: #79d9ec #79d9ec #44cae5 !important;
  color: #fff;
}

.table-info tbody tr td.sorting_1 {
  background: #9de3f1 !important;
  color: white;
  border-bottom: 1px solid #bcecf6 !important;
}

.table-info tfoot tr th {
  background-color: #63D3E9 !important;
  border-color: #44cae5 #79d9ec #79d9ec !important;
  color: #fff;
}

.table-info.table-bordered {
  border: 1px solid #63D3E9;
}

.table-info.table-bordered thead tr th:first-child,
.table-info.table-bordered thead tr th:last-child,
.table-info.table-bordered tfoot tr th:first-child,
.table-info.table-bordered tfoot tr th:last-child {
  -moz-border-radius: 0px !important;
  -webkit-border-radius: 0px;
  border-radius: 0px !important;
}

.table-info.table-bordered tbody tr td.sorting_1 {
  border-right: 1px solid #bcecf6 !important;
}

.table-info table.has-columns-hidden > tbody > tr > td > span.responsiveExpander:before {
  color: white;
}

.table-info table.has-columns-hidden > tbody > tr.detail-show > td span.responsiveExpander:before {
  color: white;
}

.table-warning thead tr th {
  background-color: #F6BB42 !important;
  border-color: #f7c45a #f7c45a #f4af20 !important;
  color: #fff;
}

.table-warning tbody tr td.sorting_1 {
  background: #f9d281 !important;
  color: white;
  border-bottom: 1px solid #fbdea3 !important;
}

.table-warning tfoot tr th {
  background-color: #F6BB42 !important;
  border-color: #f4af20 #f7c45a #f7c45a !important;
  color: #fff;
}

.table-warning.table-bordered {
  border: 1px solid #F6BB42;
}

.table-warning.table-bordered thead tr th:first-child,
.table-warning.table-bordered thead tr th:last-child,
.table-warning.table-bordered tfoot tr th:first-child,
.table-warning.table-bordered tfoot tr th:last-child {
  -moz-border-radius: 0px !important;
  -webkit-border-radius: 0px;
  border-radius: 0px !important;
}

.table-warning.table-bordered tbody tr td.sorting_1 {
  border-right: 1px solid #fbdea3 !important;
}

.table-warning table.has-columns-hidden > tbody > tr > td > span.responsiveExpander:before {
  color: white;
}

.table-warning table.has-columns-hidden > tbody > tr.detail-show > td span.responsiveExpander:before {
  color: white;
}

.table-danger thead tr th {
  background-color: #E9573F !important;
  border-color: #ec6b56 #ec6b56 #e53b1f !important;
  color: #fff;
}

.table-danger tbody tr td.sorting_1 {
  background: #f08b7a !important;
  color: white;
  border-bottom: 1px solid #f3a79b !important;
}

.table-danger tfoot tr th {
  background-color: #E9573F !important;
  border-color: #e53b1f #ec6b56 #ec6b56 !important;
  color: #fff;
}

.table-danger.table-bordered {
  border: 1px solid #E9573F;
}

.table-danger.table-bordered thead tr th:first-child,
.table-danger.table-bordered thead tr th:last-child,
.table-danger.table-bordered tfoot tr th:first-child,
.table-danger.table-bordered tfoot tr th:last-child {
  -moz-border-radius: 0px !important;
  -webkit-border-radius: 0px;
  border-radius: 0px !important;
}

.table-danger.table-bordered tbody tr td.sorting_1 {
  border-right: 1px solid #f3a79b !important;
}

.table-danger table.has-columns-hidden > tbody > tr > td > span.responsiveExpander:before {
  color: white;
}

.table-danger table.has-columns-hidden > tbody > tr.detail-show > td span.responsiveExpander:before {
  color: white;
}

.table-lilac thead tr th {
  background-color: #906094 !important;
  border-color: #9c6da0 #9c6da0 #7b527e !important;
  color: #fff;
}

.table-lilac tbody tr td.sorting_1 {
  background: #ad86b0 !important;
  color: white;
  border-bottom: 1px solid #bc9cbe !important;
}

.table-lilac tfoot tr th {
  background-color: #906094 !important;
  border-color: #7b527e #9c6da0 #9c6da0 !important;
  color: #fff;
}

.table-lilac.table-bordered {
  border: 1px solid #906094;
}

.table-lilac.table-bordered thead tr th:first-child,
.table-lilac.table-bordered thead tr th:last-child,
.table-lilac.table-bordered tfoot tr th:first-child,
.table-lilac.table-bordered tfoot tr th:last-child {
  -moz-border-radius: 0px !important;
  -webkit-border-radius: 0px;
  border-radius: 0px !important;
}

.table-lilac.table-bordered tbody tr td.sorting_1 {
  border-right: 1px solid #bc9cbe !important;
}

.table-lilac table.has-columns-hidden > tbody > tr > td > span.responsiveExpander:before {
  color: white;
}

.table-lilac table.has-columns-hidden > tbody > tr.detail-show > td span.responsiveExpander:before {
  color: white;
}

.table-inverse thead tr th {
  background-color: #2A2A2A !important;
  border-color: #373737 #373737 #181818 !important;
  color: #fff;
}

.table-inverse tbody tr td.sorting_1 {
  background: #4b4b4b !important;
  color: white;
  border-bottom: 1px solid #5d5d5d !important;
}

.table-inverse tfoot tr th {
  background-color: #2A2A2A !important;
  border-color: #181818 #373737 #373737 !important;
  color: #fff;
}

.table-inverse.table-bordered {
  border: 1px solid #2A2A2A;
}

.table-inverse.table-bordered thead tr th:first-child,
.table-inverse.table-bordered thead tr th:last-child,
.table-inverse.table-bordered tfoot tr th:first-child,
.table-inverse.table-bordered tfoot tr th:last-child {
  -moz-border-radius: 0px !important;
  -webkit-border-radius: 0px;
  border-radius: 0px !important;
}

.table-inverse.table-bordered tbody tr td.sorting_1 {
  border-right: 1px solid #5d5d5d !important;
}

.table-inverse table.has-columns-hidden > tbody > tr > td > span.responsiveExpander:before {
  color: white;
}

.table-inverse table.has-columns-hidden > tbody > tr.detail-show > td span.responsiveExpander:before {
  color: white;
}

.table-teal thead tr th {
  background-color: #37BC9B !important;
  border-color: #44c8a8 #44c8a8 #2fa084 !important;
  color: #fff;
}

.table-teal tfoot tr th {
  background-color: #37BC9B !important;
  border-color: #2fa084 #31a88b #31a88b !important;
}

.table-responsive.rounded {
  overflow: auto !important;
}

.table-middle tr th,
.table-middle tr td {
  vertical-align: middle !important;
}

.table-no-border tr td {
  border-top: none !important;
}

/* ========================================================================
 * TABS
 * ======================================================================== */

.nav-tabs .nav-border {
  position: relative;
}

.nav-tabs .nav-border:first-child.active:after {
  left: 0;
}

.nav-tabs .nav-border.active:after {
  content: "";
  display: block;
  position: absolute;
}

.nav-tabs .nav-border-top-danger.active:after {
  border: 2px solid #E9573F;
  top: 0;
  left: -1px;
  right: 0;
}

.nav-tabs .nav-border-top-primary.active:after {
  border: 2px solid #00B1E1;
  top: 0;
  left: -1px;
  right: 0;
}

.nav-tabs .nav-border-top-success.active:after {
  border: 2px solid #8CC152;
  top: 0;
  left: -1px;
  right: 0;
}

.nav-tabs .nav-border-top-info.active:after {
  border: 2px solid #63D3E9;
  top: 0;
  left: -1px;
  right: 0;
}

.nav-tabs .nav-border-top-warning.active:after {
  border: 2px solid #F6BB42;
  top: 0;
  left: -1px;
  right: 0;
}

.nav-tabs .nav-border-top-lilac.active:after {
  border: 2px solid #906094;
  top: 0;
  left: -1px;
  right: 0;
}

.nav-tabs .nav-border-top-inverse.active:after {
  border: 2px solid #2A2A2A;
  top: 0;
  left: -1px;
  right: 0;
}

.nav-tabs .nav-border-top-teal.active:after {
  border: 2px solid #37BC9B;
  top: 0;
  left: -1px;
  right: 0;
}

.nav-tabs .nav-border-left-danger.active:after {
  border: 2px solid #E9573F;
  top: 0;
  bottom: 0;
  left: 0;
}

.nav-tabs .nav-border-left-primary.active:after {
  border: 2px solid #00B1E1;
  top: 0;
  bottom: 0;
  left: 0;
}

.nav-tabs .nav-border-left-success.active:after {
  border: 2px solid #8CC152;
  top: 0;
  bottom: 0;
  left: 0;
}

.nav-tabs .nav-border-left-info.active:after {
  border: 2px solid #63D3E9;
  top: 0;
  bottom: 0;
  left: 0;
}

.nav-tabs .nav-border-left-warning.active:after {
  border: 2px solid #F6BB42;
  top: 0;
  bottom: 0;
  left: 0;
}

.nav-tabs .nav-border-left-lilac.active:after {
  border: 2px solid #906094;
  top: 0;
  bottom: 0;
  left: 0;
}

.nav-tabs .nav-border-left-inverse.active:after {
  border: 2px solid #2A2A2A;
  top: 0;
  bottom: 0;
  left: 0;
}

.nav-tabs .nav-border-left-teal.active:after {
  border: 2px solid #37BC9B;
  top: 0;
  bottom: 0;
  left: 0;
}

.nav-tabs.nav-justified {
  width: 100%;
  border-bottom: 0;
}

.nav-tabs.nav-justified > li > a {
  padding: 15px;
  background-color: #EEEEEE;
  color: #aeaeae;
  border: 0;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

.nav-tabs.nav-justified > li:last-child > a {
  border-top-right-radius: 3px;
}

.nav-tabs.nav-justified > .active > a {
  color: #333;
  background-color: #FBFBFB;
  border: 0;
  border-color: #FFF;
  border-bottom-color: #FCFCFC;
  -webkit-border-top-left-radius: 3px;
  -moz-border-radius-topleft: 3px;
  border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -moz-border-radius-topright: 3px;
  border-top-right-radius: 3px;
}

.nav-tabs.nav-justified > .active > a:hover,
.nav-tabs.nav-justified > .active > a:focus {
  border: 0;
  border-color: #FFF;
  border-bottom-color: #FCFCFC;
  background-color: #FBFBFB;
}

.tab-content {
  background-color: #FBFBFB;
  padding: 15px;
  -moz-box-shadow: 0 3px 0 rgba(12, 12, 12, 0.03);
  -webkit-box-shadow: 0 3px 0 rgba(12, 12, 12, 0.03);
  box-shadow: 0 3px 0 rgba(12, 12, 12, 0.03);
  -moz-border-radius: 0 0 3px 3px;
  -webkit-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px;
}

@media (max-width: 800px) {
  .panel .nav-tabs li a {
    border-right: none !important;
  }
}

/* ========================================================================
 * THUMBNAIL
 * ======================================================================== */

.thumbnail h3 {
  font-size: 20px;
  margin-top: 5px;
  margin-bottom: 15px;
}

.thumbnail .caption p {
  color: #888888;
}

.thumbnail .thumbnail-action {
  background: #EEEEEE;
  padding: 10px;
}

.thumbnail.thumbnail-flat {
  padding: 0;
  border: none;
}

.thumbnail.thumbnail-flat .subtitle {
  color: #959595;
}

.thumbnail.thumbnail-flat p {
  color: #888888;
}

.thumbnail.thumbnail-flat .desc {
  margin-top: 15px;
}

.thumbnail.thumbnail-flat .caption {
  border-left: 1px solid #DDD;
  border-right: 1px solid #DDD;
  border-bottom: 1px solid #DDD;
}

/* ========================================================================
 * TOOLTIP
 * ======================================================================== */

.tooltip {
  z-index: 1000;
}

/* ========================================================================
 * TYPOGRAPHY
 * ======================================================================== */

.text-thin {
  font-weight: 300 !important;
}

.text-xlarge {
  font-size: 50px !important;
  line-height: 50px !important;
}

.text-xs {
  font-size: 10px !important;
}

.text-sm {
  font-size: 12px !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

.text-strong {
  font-weight: bold !important;
}

.text-white {
  color: white !important;
}

.text-block {
  display: block !important;
}

.text-default {
  color: #EEEEEE !important;
}

.text-primary {
  color: #00B1E1 !important;
}

.text-success {
  color: #8CC152 !important;
}

.text-info {
  color: #63D3E9 !important;
}

.text-warning {
  color: #F6BB42 !important;
}

.text-danger {
  color: #E9573F !important;
}

.text-lilac {
  color: #906094 !important;
}

.text-inverse {
  color: #2A2A2A !important;
}

.text-teal {
  color: #37BC9B !important;
}

/* ========================================================================
 * POPOVER
 * ======================================================================== */

.popover {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
}

.popover.top > .arrow:after {
  border-top-color: #FFFFFF;
}

.popover.bottom > .arrow:after {
  border-bottom-color: #F7F7F7;
}

.popover.left > .arrow:after {
  border-left-color: #F7F7F7;
}

.popover.right > .arrow:after {
  border-right-color: #F7F7F7;
}

.popover .popover-title {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
}

/* ========================================================================
 * MISC
 * ======================================================================== */

/* ========================================================================
 * TABLE OF CONTENTS
 * ========================================================================
   01. FUNCTION BACKGROUND COLOR
   02. CONTEXTUAL CLASSES BACKGROUND
   03. FUNCTION BACKGROUND GRADIENT
   04. CONTEXTUAL CLASSES BACKGROUND GRADIENT
   05. FUNCTION FOREGROUND COLOR
   06. CONTEXTUAL CLASSES FOREGROUND
   07. BORDER
   08. MARGIN
   09. POSITION
   10. LINE HEIGHT
   11. LOADING ANIMATION
   12. LOADING INDICATOR
   13. CHOOSE THEMES
   14. BOOTSTRAP OVERRIDE
   15. FULLSCREEN MODE
   16. CHARTS
   16. BACK TOP
 * ======================================================================== */

.no-margin {
  margin: 0 !important;
}

.no-padding {
  padding: 0 !important;
}

.no-border {
  border: none !important;
}

.no-border:active,
.no-border:focus {
  border: none !important;
}

.no-overflow {
  overflow: visible !important;
}

.no-box-shadow {
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.no-border-radius {
  -moz-border-radius: 3px !important;
  -webkit-border-radius: 3px;
  border-radius: 3px !important;
}

.no-border-radius-right {
  border-top-right-radius: 3px !important;
  border-bottom-right-radius: 3px !important;
}

.transparent {
  background: transparent !important;
}

.rounded {
  -moz-border-radius: 3px !important;
  -webkit-border-radius: 3px;
  border-radius: 3px !important;
}

.rounded:after,
.rounded:before {
  -moz-border-radius: 3px !important;
  -webkit-border-radius: 3px;
  border-radius: 3px !important;
}

.circle {
  -moz-border-radius: 50% !important;
  -webkit-border-radius: 50%;
  border-radius: 50% !important;
}

.circle:after,
.circle:before {
  -moz-border-radius: 50% !important;
  -webkit-border-radius: 50%;
  border-radius: 50% !important;
}

.shadow {
  -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05) !important;
  -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05) !important;
}

.rounded-bottom {
  -moz-border-radius: 0px 0px 3px 3px !important;
  -webkit-border-radius: 0px;
  border-radius: 0px 0px 3px 3px !important;
}

.inner-all {
  padding: 10px;
}

.inner-all > button,
.inner-all > a,
.inner-all .label,
.inner-all .badge {
  margin-bottom: 5px;
}

.inner-all > .label,
.inner-all .badge {
  display: inline-block;
}

.border-bottom {
  border-bottom: 1px solid #DDD;
}

.block {
  display: block !important;
}

.hide {
  display: none !important;
}

.display-hide {
  display: none;
}

.display-inline {
  display: inline-block !important;
}

.half {
  width: 50% !important;
}

.inline {
  display: inline !important;
  width: auto !important;
}

.divider {
  height: 20px;
  display: block;
}

.pull-in {
  margin-left: -15px;
  margin-right: -15px;
}

.full-width {
  width: 100% !important;
}

.line {
  height: 2px;
  margin: 10px 0px;
  font-size: 0px;
  overflow: hidden;
  background-color: transparent;
  border-width: 1px 0px 0px;
  border-top: 1px solid #DDD;
}

.corner-left {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 100;
  padding: 5px;
}

.asterisk {
  color: #E9573F !important;
}

.section-sample {
  display: block;
  margin-bottom: 25px;
}

.section-sample a,
.section-sample button {
  margin-bottom: 5px;
}

.upgrade-browser {
  background-color: #777;
  color: #FFFFFF;
  position: fixed;
  z-index: 99999;
  left: 0px;
  right: 0px;
  text-align: center;
  padding: 15px 0px;
  font-size: 15px;
}

.upgrade-browser a {
  text-decoration: underline;
  color: #FFFFFF;
}

.upgrade-browser a:hover,
.upgrade-browser a:active,
.upgrade-browser a:visited {
  color: #FFFFFF !important;
}

.sample-rating .rating {
  margin-bottom: 30px;
}

.text-vertically-center {
  height: 200px;
  line-height: 200px;
  text-align: center;
  font-size: 20px;
}

.text-vertically-center span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

.show-grid .row {
  margin-bottom: 10px;
  margin-left: 0px;
  margin-right: 0px;
}

.show-grid [class^="col-"] {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #FBFBFB;
  border-right: 1px solid #DDD;
}

.show-grid [class^="col-"]:last-child {
  border-right: none;
}

.show-grid .show-grid [class^="col-"] {
  background-color: #f2f2f2;
}

.bg-teal {
  background-color: #37BC9B !important;
  color: white;
}

.bg-teal a,
.bg-teal i,
.bg-teal span,
.bg-teal small,
.bg-teal p {
  color: white;
}

.bg-teal .flot-tick-label.tickLabel {
  color: rgba(255, 255, 255, 0.5) !important;
}

.bg-teal .morris-hover-row-label {
  background-color: #2b957a;
}

.no-bg {
  background: transparent !important;
}

.bg-dark {
  background-color: #373737;
}

.bg-light {
  background-color: #F3F3F4;
}

.bg-light #wrapper {
  background-color: #F3F3F4;
}

.bg-default {
  background-color: #EEEEEE !important;
  border: 1px solid #EEEEEE;
  color: white;
}

.bg-default a,
.bg-default i,
.bg-default span,
.bg-default small,
.bg-default p {
  color: white;
}

.bg-default .flot-tick-label.tickLabel {
  color: rgba(255, 255, 255, 0.5) !important;
}

.bg-default .morris-hover-row-label {
  background-color: #d5d5d5;
}

.bg-primary {
  background-color: #00B1E1 !important;
  border: 1px solid #00B1E1;
  color: white;
}

.bg-primary a,
.bg-primary i,
.bg-primary span,
.bg-primary small,
.bg-primary p {
  color: white;
}

.bg-primary .flot-tick-label.tickLabel {
  color: rgba(255, 255, 255, 0.5) !important;
}

.bg-primary .morris-hover-row-label {
  background-color: #0089ae;
}

.bg-success {
  background-color: #8CC152 !important;
  border: 1px solid #8CC152;
  color: white;
}

.bg-success a,
.bg-success i,
.bg-success span,
.bg-success small,
.bg-success p {
  color: white;
}

.bg-success .flot-tick-label.tickLabel {
  color: rgba(255, 255, 255, 0.5) !important;
}

.bg-success .morris-hover-row-label {
  background-color: #72a53b;
}

.bg-info {
  background-color: #63D3E9 !important;
  border: 1px solid #63D3E9;
  color: white;
}

.bg-info a,
.bg-info i,
.bg-info span,
.bg-info small,
.bg-info p {
  color: white;
}

.bg-info .flot-tick-label.tickLabel {
  color: rgba(255, 255, 255, 0.5) !important;
}

.bg-info .morris-hover-row-label {
  background-color: #36c6e3;
}

.bg-warning {
  background-color: #F6BB42 !important;
  border: 1px solid #F6BB42;
  color: white;
}

.bg-warning a,
.bg-warning i,
.bg-warning span,
.bg-warning small,
.bg-warning p {
  color: white;
}

.bg-warning .flot-tick-label.tickLabel {
  color: rgba(255, 255, 255, 0.5) !important;
}

.bg-warning .morris-hover-row-label {
  background-color: #f4a911;
}

.bg-danger {
  background-color: #E9573F !important;
  border: 1px solid #E9573F;
  color: white;
}

.bg-danger a,
.bg-danger i,
.bg-danger span,
.bg-danger small,
.bg-danger p {
  color: white;
}

.bg-danger .flot-tick-label.tickLabel {
  color: rgba(255, 255, 255, 0.5) !important;
}

.bg-danger .morris-hover-row-label {
  background-color: #dc3519;
}

.bg-lilac {
  background-color: #906094 !important;
  border: 1px solid #906094;
  color: white;
}

.bg-lilac a,
.bg-lilac i,
.bg-lilac span,
.bg-lilac small,
.bg-lilac p {
  color: white;
}

.bg-lilac .flot-tick-label.tickLabel {
  color: rgba(255, 255, 255, 0.5) !important;
}

.bg-lilac .morris-hover-row-label {
  background-color: #724c75;
}

.bg-inverse {
  background-color: #2A2A2A !important;
  border: 1px solid #2A2A2A;
  color: white;
}

.bg-inverse a,
.bg-inverse i,
.bg-inverse span,
.bg-inverse small,
.bg-inverse p {
  color: white;
}

.bg-inverse .flot-tick-label.tickLabel {
  color: rgba(255, 255, 255, 0.5) !important;
}

.bg-inverse .morris-hover-row-label {
  background-color: #111111;
}

.bg-overlay {
  background-color: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(0, 0, 0, 0.35);
  color: white;
}

.bg-overlay a,
.bg-overlay i,
.bg-overlay span,
.bg-overlay small,
.bg-overlay p {
  color: white;
}

.bg-overlay .flot-tick-label.tickLabel {
  color: rgba(255, 255, 255, 0.5) !important;
}

.bg-overlay .morris-hover-row-label {
  background-color: rgba(0, 0, 0, 0.35);
}

.bg-facebook {
  background-color: #3b5998 !important;
  border: 1px solid #3b5998;
  color: white;
}

.bg-facebook a,
.bg-facebook i,
.bg-facebook span,
.bg-facebook small,
.bg-facebook p {
  color: white;
}

.bg-facebook .flot-tick-label.tickLabel {
  color: rgba(255, 255, 255, 0.5) !important;
}

.bg-facebook .morris-hover-row-label {
  background-color: #2d4373;
}

.bg-twitter {
  background-color: #00a0d1 !important;
  border: 1px solid #00a0d1;
  color: white;
}

.bg-twitter a,
.bg-twitter i,
.bg-twitter span,
.bg-twitter small,
.bg-twitter p {
  color: white;
}

.bg-twitter .flot-tick-label.tickLabel {
  color: rgba(255, 255, 255, 0.5) !important;
}

.bg-twitter .morris-hover-row-label {
  background-color: #00799e;
}

.bg-googleplus {
  background-color: #db4a39 !important;
  border: 1px solid #db4a39;
  color: white;
}

.bg-googleplus a,
.bg-googleplus i,
.bg-googleplus span,
.bg-googleplus small,
.bg-googleplus p {
  color: white;
}

.bg-googleplus .flot-tick-label.tickLabel {
  color: rgba(255, 255, 255, 0.5) !important;
}

.bg-googleplus .morris-hover-row-label {
  background-color: #be3323;
}

.bg-bitbucket {
  background-color: #205081 !important;
  border: 1px solid #205081;
  color: white;
}

.bg-bitbucket a,
.bg-bitbucket i,
.bg-bitbucket span,
.bg-bitbucket small,
.bg-bitbucket p {
  color: white;
}

.bg-bitbucket .flot-tick-label.tickLabel {
  color: rgba(255, 255, 255, 0.5) !important;
}

.bg-bitbucket .morris-hover-row-label {
  background-color: #163758;
}

.bg-youtube {
  background-color: #c4302b !important;
  border: 1px solid #c4302b;
  color: white;
}

.bg-youtube a,
.bg-youtube i,
.bg-youtube span,
.bg-youtube small,
.bg-youtube p {
  color: white;
}

.bg-youtube .flot-tick-label.tickLabel {
  color: rgba(255, 255, 255, 0.5) !important;
}

.bg-youtube .morris-hover-row-label {
  background-color: #9a2622;
}

.bg-dribbble {
  background-color: #ea4c89 !important;
  border: 1px solid #ea4c89;
  color: white;
}

.bg-dribbble a,
.bg-dribbble i,
.bg-dribbble span,
.bg-dribbble small,
.bg-dribbble p {
  color: white;
}

.bg-dribbble .flot-tick-label.tickLabel {
  color: rgba(255, 255, 255, 0.5) !important;
}

.bg-dribbble .morris-hover-row-label {
  background-color: #e51e6b;
}

.bg-soundcloud {
  background-color: #ff7700 !important;
  border: 1px solid #ff7700;
  color: white;
}

.bg-soundcloud a,
.bg-soundcloud i,
.bg-soundcloud span,
.bg-soundcloud small,
.bg-soundcloud p {
  color: white;
}

.bg-soundcloud .flot-tick-label.tickLabel {
  color: rgba(255, 255, 255, 0.5) !important;
}

.bg-soundcloud .morris-hover-row-label {
  background-color: #cc5f00;
}

.fg-default {
  color: #EEEEEE !important;
}

.fg-primary {
  color: #00B1E1 !important;
}

.fg-success {
  color: #8CC152 !important;
}

.fg-info {
  color: #63D3E9 !important;
}

.fg-warning {
  color: #F6BB42 !important;
}

.fg-danger {
  color: #E9573F !important;
}

.fg-lilac {
  color: #906094 !important;
}

.fg-teals {
  color: #37BC9B !important;
}

.fg-inverse {
  color: #2A2A2A !important;
}

.fg-facebook {
  color: #3b5998 !important;
}

.fg-twitter {
  color: #00a0d1 !important;
}

.fg-googleplus {
  color: #db4a39 !important;
}

.fg-bitbucket {
  color: #205081 !important;
}

.no-border-top {
  border-top: none !important;
}

.no-border-left {
  border-left: none !important;
}

.no-border-right {
  border-right: none !important;
}

.border {
  border: 1px solid #DDD;
}

.border-top {
  border-top: 1px solid #DDD;
}

.border-right {
  border-right: 1px solid #DDD;
}

.border-right.dotted {
  border-right: 1px dotted #DDD;
}

.border-top-danger {
  border-top: 3px solid #E9573F;
}

.border-top-primary {
  border-top: 3px solid #00B1E1;
}

.border-top-info {
  border-top: 3px solid #63D3E9;
}

.border-top-success {
  border-top: 3px solid #8CC152;
}

.border-top-warning {
  border-top: 3px solid #F6BB42;
}

.br-3 {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.br-t-3 {
  -moz-border-radius: 3px 3px 0px 0px;
  -webkit-border-radius: 3px;
  border-radius: 3px 3px 0px 0px;
}

.br-l-3 {
  -moz-border-radius: 3px 0px 0px 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px 0px 0px 3px;
}

.br-r-3 {
  -moz-border-radius: 0px 3px 3px 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px 3px 3px 0px;
}

.br-b-3 {
  -moz-border-radius: 0px 0px 3px 3px;
  -webkit-border-radius: 0px;
  border-radius: 0px 0px 3px 3px;
}

.p-10 {
  padding: 10px !important;
}

.p-15 {
  padding: 15px !important;
}

.p-20 {
  padding: 20px !important;
}

.p-25 {
  padding: 25px !important;
}

.p-30 {
  padding: 30px !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pt-20 {
  padding-top: 20px !important;
}

.pl-10 {
  padding-left: 10px !important;
}

.pr-20 {
  padding-right: 20px !important;
}

.m-5 {
  margin: 5px !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mt-5 {
  margin-top: 5px !important;
}

.mt-10 {
  margin-top: 10px !important;
}

.mt-15 {
  margin-top: 15px !important;
}

.mt-20 {
  margin-top: 20px !important;
}

.mt-30 {
  margin-top: 30px !important;
}

.mt-45 {
  margin-top: 45px !important;
}

.mr-5 {
  margin-right: 5px !important;
}

.mr-10 {
  margin-right: 10px !important;
}

.mr-15 {
  margin-right: 15px !important;
}

.ml-0 {
  margin-left: 0 !important;
}

.ml-10 {
  margin-left: 10px !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-5 {
  margin-bottom: 5px !important;
}

.mb-10 {
  margin-bottom: 10px !important;
}

.mb-15 {
  margin-bottom: 15px !important;
}

.mb-20 {
  margin-bottom: 20px !important;
}

.mb-25 {
  margin-bottom: 25px !important;
}

.mb-30 {
  margin-bottom: 30px !important;
}

.mb-80 {
  margin-bottom: 80px !important;
}

.no-top {
  top: 0px !important;
}

.mt-5 {
  margin-top: 5px !important;
}

.mt-10 {
  margin-top: 10px !important;
}

.mt-15 {
  margin-top: 15px !important;
}

.no-right {
  right: 0 !important;
}

.mr-5 {
  margin-right: 5px !important;
}

.mr-10 {
  margin-right: 10px !important;
}

.mr-15 {
  margin-right: 15px !important;
}

.mr-20 {
  margin-right: 20px !important;
}

.lh-5 {
  line-height: 5 px !important;
}

.lh-10 {
  line-height: 10 px !important;
}

.lh-15 {
  line-height: 15 px !important;
}

.lh-20 {
  line-height: 20 px !important;
}

.lh-25 {
  line-height: 25 px !important;
}

.lh-30 {
  line-height: 30 px !important;
}

/* ========================================================================
 * LOADING ANIMATION
 * ======================================================================== */

#loading {
  margin: auto;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 999999999;
}

#loading .loading-inner {
  position: absolute;
  top: 40%;
  margin: 0 auto;
  left: 0;
  right: 0;
  text-align: center;
}

#loading .loading-inner img {
  margin-right: auto;
  margin-left: auto;
}

/* ========================================================================
 * LOADING INDICATOR
 * ======================================================================== */

.indicator {
  position: absolute;
  z-index: 999;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 2px;
  cursor: progress;
}

.indicator.inline {
  display: block !important;
  position: relative;
  z-index: 9;
  height: 34px;
  background-color: transparent;
  border-radius: 0;
}

.indicator .spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -9px;
  margin-left: -9px;
  width: 18px;
  height: 18px;
  background-image: url("../../../assets/global/img/loader/general/1.gif");
  background-repeat: no-repeat;
}

/* ========================================================================
 * CHOOSE THEMES
 * ======================================================================== */

.themes {
  position: relative;
  z-index: 2;
  list-style: none;
  padding: 0px;
}

.themes li {
  height: auto;
  border: none;
  padding: 0;
  position: relative;
  float: left;
  margin-bottom: 5px;
}

.themes li a {
  opacity: 0.7;
  line-height: 32px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  display: block;
  color: #676767;
  font-weight: 600;
  text-decoration: none;
  position: relative;
  font-size: 14px;
  padding: 5px !important;
  width: 17px;
  height: 17px !important;
  margin-right: 5px;
}

.themes li a:hover {
  opacity: 1;
}

/* ========================================================================
 * BOOTSTRAP OVERRIDE
 * ======================================================================= */

.row {
  margin-left: -10px;
  margin-right: -10px;
}

.row-merge {
  margin: 0px;
}

.row-merge > [class*="col-"] {
  padding: 0px;
}

.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
  padding-left: 10px;
  padding-right: 10px;
}

.table-responsive {
  border: none;
}

.table tr td img {
  margin-right: 5px;
}

.img-responsive {
  width: 100%;
}

.bs-example-modal .modal {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  bottom: auto;
  z-index: 1;
  display: block;
  overflow: visible;
}

.bs-example-modal .modal-dialog {
  left: auto;
  margin: 0px auto 10px;
  width: auto;
}

.bs-example-modal .modal-content {
  box-shadow: none;
}

.modal-content {
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
}

.list-group-item:first-child,
.list-group-item:last-child {
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

.navbar {
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

.navbar-nav.navbar-right:last-child {
  margin-right: 0px;
}

.form-horizontal .has-feedback .form-control-feedback {
  right: 10px;
}

.thumbnail {
  position: relative;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

.well {
  border: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

@media (max-width: 768px) {
  .navbar {
    -moz-border-radius: 0px !important;
    -webkit-border-radius: 0px;
    border-radius: 0px !important;
  }
}

@media (max-width: 360px) {
  .col-xs-override,
  .col-xs-6 {
    width: 100% !important;
  }
}

.dropdown-menu > li > a {
  padding: 3px 8px;
}

/* ========================================================================
 * FULLSCREEN MODE
 * ======================================================================= */

#fullscreen-mode {
  bottom: 0px;
  right: 0px;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 9999999;
}

#fullscreen-mode .panel {
  height: inherit;
}

#fullscreen-mode .panel .panel-body {
  height: inherit;
  overflow-y: scroll;
}

/* ========================================================================
 * CHARTS
 * ======================================================================== */

.chart {
  width: 100%;
  height: 300px;
  padding: 0px;
  position: relative;
}

/* ========================================================================
 * BACK TOP
 * ======================================================================== */

#back-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  cursor: pointer;
  color: #EEE;
  text-align: center;
  z-index: 1000;
  background-color: rgba(89, 95, 102, 0.7);
  display: block;
  opacity: 1;
  width: 40px;
  height: 40px;
  -moz-transition: all 0.5s ease-in-out 0s;
  -o-transition: all 0.5s ease-in-out 0s;
  -webkit-transition: all 0.5s ease-in-out;
  -webkit-transition-delay: 0s;
  transition: all 0.5s ease-in-out 0s;
}

#back-top i {
  font-size: 20px;
  line-height: 35px;
}
/* ========================================================================
 * TABLE OF CONTENTS
 * ========================================================================
   JQUERY SPARKLINE
   GMAP3
   ICONS MAP
   JQVMAP
   FlOT CHART
   MORRIS CHART
   C3JS CHART
   CHARTJS CHART
   CHOOSE THEMES
   DROPZONE
   BOOTSTRAP TAG INPUT
   BOOTSTRAP FILE UPLOAD
   TYPEAHEAD
   CALENDAR
   BOOTSTRAP SWITCH
   BOOTSTRAP DATEPICKER
   JQUERY COLORPICKER
   JASNY BOOTSTRAP
   CHOSEN SELECT
   ION RANGESLIDER
   SUMMERNOTE
   WYSIHTML5
   DATATABLE
   FONT AWESOME
   GRITTER NOTIFICATION
   NICESCROLL
   FUEL UX
   CODE PRETTIFY
   BLOCKUI
   CUBEPORTFOLIO
   PEITY CHARTS
   EASY PIE CHART
   BOOTSTRAP COLOR PICKER
   BOOTSTRAP DATE RANGE PICKER
   GRID STACK
   SELECT2
 * ======================================================================== */

/* ========================================================================
 * JQUERY SPARKLINE
 * ======================================================================== */

.jqstooltip {
  min-width: 30px;
  height: 25px !important;
  text-align: center;
}

/* ========================================================================
 * GMAP3
 * ======================================================================== */

#panel-box {
  background-color: rgba(255, 255, 255, 0.51);
  width: 180px;
  height: 64px;
  font-size: 11px;
  padding: 5px;
}

#panel-box:hover {
  background: #FFFFFF;
}

#panel-box .line-panel {
  overflow: auto;
  clear: both;
  height: 18px;
}

#panel-box #lng-west {
  border-bottom: 0px;
}

#panel-box .name {
  width: 50px;
  float: left;
  font-size: 13px;
  line-height: 16px;
}

#panel-box .value {
  float: left;
  font-size: 11px;
  line-height: 15px;
}

#panel-box .value:before {
  content: ": ";
}

.map {
  width: 100%;
  height: 300px;
}

.map.map-lg {
  height: 400px;
}

.map-continent {
  margin-left: auto;
  margin-right: auto;
  height: 300px;
}

/* ========================================================================
 * ICONS MAP
 * ======================================================================== */

.marker-label,
.marker-icon {
  z-index: 99;
  position: absolute;
  display: block;
  margin-top: -50px;
  margin-left: -25px;
  width: 50px;
  height: 50px;
  font-size: 30px !important;
  text-align: center;
  color: #FFFFFF;
  white-space: nowrap;
}

.icon-maps-example {
  font-size: 13px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.icon-maps-example span {
  font-size: 20px;
  vertical-align: middle;
}

/* ========================================================================
 * JQVMAP
 * ======================================================================== */

.resize-map {
  width: 100%;
  height: 450px;
}

.jqvmap-label {
  position: absolute;
  display: none;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 0px;
  background: #505050;
  color: white;
  font-size: 0.9em;
  padding: 5px 10px;
  border-top: 5px solid #2A2A2A;
}

.jqvmap-zoomin,
.jqvmap-zoomout {
  position: absolute !important;
  left: 10px !important;
  -moz-border-radius: 50% !important;
  -webkit-border-radius: 50%;
  border-radius: 50% !important;
  padding: 3px !important;
  color: #969fa1 !important;
  width: 30px !important;
  height: 30px !important;
  cursor: pointer !important;
  line-height: 0px !important;
  font-size: 0px !important;
  text-align: center !important;
  transition: background 0.2s;
}

.jqvmap-zoomin {
  top: 10px !important;
}

.jqvmap-zoomin:before {
  font-family: FontAwesome;
  color: #fff;
  text-align: center;
  line-height: 25px;
  font-size: 16px;
  content: "\f067";
}

.jqvmap-zoomout {
  top: 45px !important;
}

.jqvmap-zoomout:before {
  font-family: FontAwesome;
  color: #fff;
  text-align: center;
  line-height: 25px;
  font-size: 16px;
  content: "\f068";
}

.jqvmap-region {
  cursor: pointer;
}

.jqvmap-ajax_response {
  width: 100%;
  height: 500px;
}

/* ========================================================================
 * FlOT CHART
 * ======================================================================== */

#flotTip {
  font-size: 12px !important;
  font-weight: 600;
  position: relative;
  z-index: 5;
  padding: 4px 5px !important;
  border-radius: 3px !important;
  border-color: transparent !important;
  background-color: #444 !important;
  color: #EEE !important;
}

.tooltipflot {
  background-color: #2A2A2A;
  color: #FFFFFF !important;
  padding: 2px 4px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  font-size: 12px;
}

.legendColorBox > div {
  margin-right: 5px;
  border: none !important;
}

/* ========================================================================
 * MORRIS CHART
 * ======================================================================== */

.morris-hover {
  padding: 0px 0px 10px 0px;
  text-align: center;
}

.morris-hover.morris-default-style {
  background-color: #FFFFFF !important;
  position: absolute !important;
  min-width: 100px;
}

.morris-hover.morris-default-style .morris-hover-row-label {
  margin-bottom: 10px;
  padding: 5px 0px;
  text-align: center;
}

.morris-hover.morris-default-style .morris-hover-point {
  padding: 0px 10px;
  text-align: left;
}

/* ========================================================================
 * C3JS CHART
 * ======================================================================== */

.c3-region.success {
  background-color: #8CC152;
}

.c3-region.warning {
  background-color: #F6BB42;
}

.c3-region.danger {
  background-color: #E9573F;
}

/* ========================================================================
 * CHARTJS CHART
 * ======================================================================== */

canvas.chartjs {
  width: 100% !important;
  max-width: 800px;
  height: auto !important;
}

/* ========================================================================
 * DROPZONE
 * ======================================================================== */

.dropzone {
  padding: 20px 0px 0px 0px !important;
  border: none !important;
}

.dropzone .dz-preview {
  -moz-border-radius: 3px !important;
  -webkit-border-radius: 3px;
  border-radius: 3px !important;
  padding: 0px !important;
  margin: 0px 0px 20px 20px !important;
}

.dropzone .dz-preview .dz-filename {
  text-align: center !important;
}

.dropzone .dz-preview .dz-details {
  height: 110px !important;
}

.dropzone .dz-preview .dz-details img {
  position: absolute !important;
  top: 5px !important;
  width: 90px !important;
  height: 100px !important;
}

.dropzone .dz-preview .dz-details .dz-size {
  line-height: 32px !important;
}

.dropzone .dz-preview .dz-error-message {
  min-width: 100px !important;
  padding: 0px 10px !important;
  overflow: hidden !important;
  height: 0px !important;
}

.dropzone .dz-error {
  width: 102px !important;
  height: 134px !important;
}

.dz-size {
  left: 0 !important;
  right: 0 !important;
  text-align: center !important;
}

.dropzone {
  -moz-border-radius: 0px !important;
  -webkit-border-radius: 0px;
  border-radius: 0px !important;
}

.dropzone.dz-started .dz-default.dz-message {
  display: none !important;
}

.dropzone .dz-default.dz-message {
  position: relative !important;
  width: 265px !important;
  height: 257px !important;
  top: inherit !important;
  left: inherit !important;
  margin: 25px auto !important;
  background-image: url("../../../assets/global/img/plugins/dropzone/uploadfile.png") !important;
  background-size: 150px !important;
  background-position: 50% !important;
}

@media (max-width: 320px) {
  .dropzone .dz-default.dz-message {
    background-position: -15px 0px !important;
    background-size: 205px;
    margin-left: 50px !important;
  }
}

.dropzone .dz-preview,
.dropzone-previews .dz-preview {
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  border: 1px solid #DDD !important;
}

.dz-file-preview .dz-details:before {
  font-family: "Glyphicons Halflings" !important;
  content: "\e117" !important;
  font-size: 45px !important;
  position: absolute !important;
  top: 50px !important;
  left: 27px !important;
}

@media (max-width: 360px) {
  .dropzone .dz-preview {
    margin-bottom: 30px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    width: 114px !important;
  }
}

/* ========================================================================
 * BOOTSTRAP TAG INPUT
 * ======================================================================== */

input.rounded + .bootstrap-tagsinput {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

input.rounded + .bootstrap-tagsinput .tag {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.bootstrap-tagsinput {
  padding: 5px 7px 7px;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  width: 100%;
}

.bootstrap-tagsinput input {
  border: none !important;
}

.bootstrap-tagsinput input:focus {
  border: none !important;
}

.bootstrap-tagsinput .tag {
  display: inline-block;
  padding: 5px 7px 8px;
}

@media (max-width: 360px) {
  .bootstrap-tagsinput .tag {
    margin-bottom: 4px;
  }
}

/* ========================================================================
 * BOOTSTRAP FILE UPLOAD
 * ======================================================================== */

.fileupload .btn {
  margin-left: 0px;
  line-height: 20px;
}

.fileupload-new .input-append .btn-file {
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

.uneditable-input {
  width: 155px !important;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  height: 32px;
}

/* ========================================================================
 * TYPEAHEAD
 * ======================================================================== */

.tt-hint {
  color: #999;
}

.empty-message {
  padding: 20px;
}

.tt-dropdown-menu {
  top: 45px !important;
  width: 350px;
  max-height: 360px;
  background-color: #fff;
  border-bottom: 1px solid #DDD;
  overflow-y: auto;
  -webkit-border-bottom-left-radius: 3px !important;
  -moz-border-radius-bottomleft: 3px !important;
  border-bottom-left-radius: 3px !important;
  -webkit-border-bottom-right-radius: 3px !important;
  -moz-border-radius-bottomright: 3px !important;
  border-bottom-right-radius: 3px !important;
}

.tt-dropdown-menu a.media {
  display: block;
  text-decoration: none;
  border-bottom: 1px solid #DDD;
}

.tt-dropdown-menu a.media:hover {
  background-color: #EEEEEE;
}

.tt-dropdown-menu .media {
  position: relative;
  padding: 8px 15px;
}

.tt-dropdown-menu .media.border-dotted:after {
  border-bottom-style: dotted;
}

.tt-dropdown-menu .media .media-heading {
  text-transform: capitalize;
}

.tt-dropdown-menu .media .media-object {
  width: 50px;
  height: 50px;
  text-align: center;
  margin-top: 10px;
}

.tt-dropdown-menu .media .media-object i {
  display: block;
  width: 34px;
  height: 34px;
  margin: 0 auto;
  line-height: 33px;
  text-align: center;
  color: #ffffff;
  border-radius: 50%;
}

.tt-dropdown-menu .media .media-object i.bg-default {
  background-color: gray;
}

.tt-dropdown-menu .media .pull-left {
  margin-right: 10px;
  display: table-cell;
}

.tt-dropdown-menu .media .media-body {
  display: table-cell;
}

.tt-dropdown-menu .media .media-body .media-text {
  display: block;
  color: #999;
  font-size: 13px;
  margin: 0;
}

.tt-suggestions .repo-language {
  float: right;
  font-style: italic;
}

.tt-suggestions .repo-name {
  font-size: 20px;
  font-weight: bold;
}

.tt-suggestions .repo-description {
  margin: 0;
  color: red !important;
}

/* ========================================================================
 * CALENDAR
 * ======================================================================== */

.calendar-toolbar {
  border-bottom: 5px dotted #DDD;
  padding-bottom: 20px;
  margin-bottom: 15px;
}

.cal-month-box,
.cal-year-box,
.cal-week-box {
  border: none !important;
}

.cal-month-box,
.cal-week-box,
.cal-year-box {
  background-color: white;
}

.cal-year-box .row-fluid,
.cal-month-box .cal-row-fluid {
  border-bottom: 1px solid #f7f7f7 !important;
}

.cal-year-box [class*="span"],
.cal-month-box [class*="cal-cell"] {
  border-right: 1px solid #f7f7f7 !important;
}

.cal-year-box .row-fluid [class*="span"]:last-child {
  border-right: none !important;
}

.cal-month-box .cal-row-fluid [class*="cal-cell"]:last-child {
  border-right: none !important;
}

.cal-month-box span[data-cal-date],
.cal-month-day span[data-cal-date] {
  font-size: 25px;
}

.cal-month-box [data-cal-row="-day1"] .cal-day-weekend span[data-cal-date],
.cal-month-day [data-cal-row="-day1"] .cal-day-weekend span[data-cal-date] {
  color: #E9573F;
}

.cal-year-box {
  color: #2A2A2A;
}

.cal-year-box .col-md-3 {
  width: 25%;
}

.cal-year-box .col-md-3 span[data-cal-date] {
  margin-right: auto !important;
}

#cal-week-box {
  display: none !important;
}

#cal-day-box .day-highlight {
  border: none !important;
}

#cal-day-box .day-event {
  margin-left: 23px !important;
}

#cal-day-panel #cal-day-panel-hour .cal-day-hour .cal-day-hour-part .span1 {
  padding-top: 4px;
}

#cal-day-panel #cal-day-panel-hour .cal-day-hour .cal-day-hour-part b:before {
  font-family: "fontawesome";
  content: "\f017";
  margin-right: 5px;
}

#cal-slide-content {
  background-color: #F5F5F5 !important;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  color: #999;
  border-bottom: 1px solid #DDD;
  background-image: none !important;
}

#cal-slide-content a.event-item {
  color: #999;
}

#cal-day-tick {
  background-color: #F5F5F5;
  display: none;
}

#cal-slide-tick {
  display: none !important;
}

.cal-row-head [class*="cal-cell"] {
  padding: 10px 3px;
  font-weight: 400;
}

.cal-row-head [class*="cal-cell"]:first-child {
  padding: 10px 0px;
  font-weight: 400;
}

.cal-row-head + .cal-day-hour {
  padding-top: 15px;
  padding-bottom: 10px;
  padding-right: 15px;
}

.cal-row-head + .cal-day-hour [class*="col-xs-"] {
  padding-left: 0px;
  padding-right: 0px;
}

.cal-row-head + .cal-day-hour [class*="col-xs-"].span1 {
  text-align: center;
}

.event {
  width: 15px !important;
  height: 15px !important;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  -moz-border-radius: 10px !important;
  -webkit-border-radius: 10px;
  border-radius: 10px !important;
  border: none !important;
}

.event-important {
  background-color: #E9573F !important;
}

.event-info {
  background-color: #63D3E9 !important;
}

.event-warning {
  background-color: #F6BB42 !important;
}

.event-inverse {
  background-color: #2A2A2A !important;
}

.event-success {
  background-color: #8CC152 !important;
}

.event-special {
  background-color: #906094 !important;
}

#eventlist li {
  position: relative;
  display: block;
  font-size: 13px;
}

#eventlist li:first-child {
  border-top: none;
}

#eventlist li a {
  padding: 0px;
  margin-bottom: 10px;
}

#eventlist li a i {
  background-color: white;
  width: 30px;
  height: 30px;
  text-align: center;
  display: inline-block;
  line-height: 28px;
  font-size: 14px;
}

#events-modal {
  z-index: 9999;
}

.day-highlight .dh-event-important {
  background-color: #E9573F !important;
  border: none;
}

.day-highlight .dh-event-important:hover {
  background-color: #e64328;
}

.day-highlight .dh-event-important .cal-hours {
  color: #69190c;
}

.day-highlight .dh-event-important a {
  color: white;
}

.day-highlight .dh-event-info {
  background-color: #63D3E9 !important;
  border: none;
}

.day-highlight .dh-event-info:hover {
  background-color: #4dcde6;
}

.day-highlight .dh-event-info .cal-hours {
  color: #137487;
}

.day-highlight .dh-event-info a {
  color: white;
}

.day-highlight .dh-event-warning {
  background-color: #F6BB42 !important;
  border: none;
}

.day-highlight .dh-event-warning:hover {
  background-color: #f5b22a;
}

.day-highlight .dh-event-warning .cal-hours {
  color: #7f5806;
}

.day-highlight .dh-event-warning a {
  color: white;
}

.day-highlight .dh-event-inverse {
  background-color: #2A2A2A !important;
  border: none;
}

.day-highlight .dh-event-inverse:hover {
  background-color: #1d1d1d;
}

.day-highlight .dh-event-inverse .cal-hours {
  color: black;
}

.day-highlight .dh-event-inverse a {
  color: white;
}

.day-highlight .dh-event-success {
  background-color: #8CC152 !important;
  border: none;
}

.day-highlight .dh-event-success:hover {
  background-color: #7fb842;
}

.day-highlight .dh-event-success .cal-hours {
  color: #314719;
}

.day-highlight .dh-event-success a {
  color: white;
}

.day-highlight .dh-event-special {
  background-color: #906094 !important;
  border: none;
}

.day-highlight .dh-event-special:hover {
  background-color: #815685;
}

.day-highlight .dh-event-special .cal-hours {
  color: #271a28;
}

.day-highlight .dh-event-special a {
  color: white;
}

@media (max-width: 800px) {
  .cal-month-box span[data-cal-date],
  .cal-month-day span[data-cal-date] {
    font-size: 15px;
    margin-top: 5px !important;
    margin-right: 10px !important;
  }
}

@media (max-width: 480px) {
  .cal-year-box .col-md-3 {
    width: 50%;
  }

  .events-list {
    max-height: 60px !important;
  }
}

/* ========================================================================
 * BOOTSTRAP SWITCH
 * ======================================================================== */

.bootstrap-switch {
  min-width: 60px !important;
  border: none !important;
  -moz-border-radius: 0px !important;
  -webkit-border-radius: 0px;
  border-radius: 0px !important;
}

.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label {
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

.bootstrap-switch .bootstrap-switch-container,
.bootstrap-switch .bootstrap-switch-on .bootstrap-switch-label,
.bootstrap-switch .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-handle-on {
  -moz-border-radius: 0px !important;
  -webkit-border-radius: 0px;
  border-radius: 0px !important;
}

.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-label {
  line-height: 15px !important;
  font-size: 11px !important;
}

.bootstrap-switch .bootstrap-switch-handle-on .bootstrap-switch-default,
.bootstrap-switch .bootstrap-switch-handle-off .bootstrap-switch-default,
.bootstrap-switch .bootstrap-switch-label .bootstrap-switch-default {
  background: #EEEEEE;
  color: white;
  border: 1px solid #EEEEEE;
}

.bootstrap-switch .bootstrap-switch-handle-on .bootstrap-switch-default + .bootstrap-switch-label,
.bootstrap-switch .bootstrap-switch-handle-off .bootstrap-switch-default + .bootstrap-switch-label,
.bootstrap-switch .bootstrap-switch-label .bootstrap-switch-default + .bootstrap-switch-label {
  border: 1px solid #EEEEEE;
}

.bootstrap-switch .bootstrap-switch-handle-on .bootstrap-switch-default + .bootstrap-switch-label + .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-handle-off .bootstrap-switch-default + .bootstrap-switch-label + .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-label .bootstrap-switch-default + .bootstrap-switch-label + .bootstrap-switch-handle-off {
  border: 1px solid #EEEEEE;
  border-left: none;
}

.bootstrap-switch .bootstrap-switch-handle-on .bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-off .bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-label .bootstrap-switch-primary {
  background: #00B1E1;
  color: white;
  border: 1px solid #00B1E1;
}

.bootstrap-switch .bootstrap-switch-handle-on .bootstrap-switch-primary + .bootstrap-switch-label,
.bootstrap-switch .bootstrap-switch-handle-off .bootstrap-switch-primary + .bootstrap-switch-label,
.bootstrap-switch .bootstrap-switch-label .bootstrap-switch-primary + .bootstrap-switch-label {
  border: 1px solid #00B1E1;
}

.bootstrap-switch .bootstrap-switch-handle-on .bootstrap-switch-primary + .bootstrap-switch-label + .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-handle-off .bootstrap-switch-primary + .bootstrap-switch-label + .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-label .bootstrap-switch-primary + .bootstrap-switch-label + .bootstrap-switch-handle-off {
  border: 1px solid #00B1E1;
  border-left: none;
}

.bootstrap-switch .bootstrap-switch-handle-on .bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-off .bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-label .bootstrap-switch-success {
  background: #8CC152;
  color: white;
  border: 1px solid #8CC152;
}

.bootstrap-switch .bootstrap-switch-handle-on .bootstrap-switch-success + .bootstrap-switch-label,
.bootstrap-switch .bootstrap-switch-handle-off .bootstrap-switch-success + .bootstrap-switch-label,
.bootstrap-switch .bootstrap-switch-label .bootstrap-switch-success + .bootstrap-switch-label {
  border: 1px solid #8CC152;
}

.bootstrap-switch .bootstrap-switch-handle-on .bootstrap-switch-success + .bootstrap-switch-label + .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-handle-off .bootstrap-switch-success + .bootstrap-switch-label + .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-label .bootstrap-switch-success + .bootstrap-switch-label + .bootstrap-switch-handle-off {
  border: 1px solid #8CC152;
  border-left: none;
}

.bootstrap-switch .bootstrap-switch-handle-on .bootstrap-switch-info,
.bootstrap-switch .bootstrap-switch-handle-off .bootstrap-switch-info,
.bootstrap-switch .bootstrap-switch-label .bootstrap-switch-info {
  background: #63D3E9;
  color: white;
  border: 1px solid #63D3E9;
}

.bootstrap-switch .bootstrap-switch-handle-on .bootstrap-switch-info + .bootstrap-switch-label,
.bootstrap-switch .bootstrap-switch-handle-off .bootstrap-switch-info + .bootstrap-switch-label,
.bootstrap-switch .bootstrap-switch-label .bootstrap-switch-info + .bootstrap-switch-label {
  border: 1px solid #63D3E9;
}

.bootstrap-switch .bootstrap-switch-handle-on .bootstrap-switch-info + .bootstrap-switch-label + .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-handle-off .bootstrap-switch-info + .bootstrap-switch-label + .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-label .bootstrap-switch-info + .bootstrap-switch-label + .bootstrap-switch-handle-off {
  border: 1px solid #63D3E9;
  border-left: none;
}

.bootstrap-switch .bootstrap-switch-handle-on .bootstrap-switch-warning,
.bootstrap-switch .bootstrap-switch-handle-off .bootstrap-switch-warning,
.bootstrap-switch .bootstrap-switch-label .bootstrap-switch-warning {
  background: #F6BB42;
  color: white;
  border: 1px solid #F6BB42;
}

.bootstrap-switch .bootstrap-switch-handle-on .bootstrap-switch-warning + .bootstrap-switch-label,
.bootstrap-switch .bootstrap-switch-handle-off .bootstrap-switch-warning + .bootstrap-switch-label,
.bootstrap-switch .bootstrap-switch-label .bootstrap-switch-warning + .bootstrap-switch-label {
  border: 1px solid #F6BB42;
}

.bootstrap-switch .bootstrap-switch-handle-on .bootstrap-switch-warning + .bootstrap-switch-label + .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-handle-off .bootstrap-switch-warning + .bootstrap-switch-label + .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-label .bootstrap-switch-warning + .bootstrap-switch-label + .bootstrap-switch-handle-off {
  border: 1px solid #F6BB42;
  border-left: none;
}

.bootstrap-switch .bootstrap-switch-handle-on .bootstrap-switch-danger,
.bootstrap-switch .bootstrap-switch-handle-off .bootstrap-switch-danger,
.bootstrap-switch .bootstrap-switch-label .bootstrap-switch-danger {
  background: #E9573F;
  color: white;
  border: 1px solid #E9573F;
}

.bootstrap-switch .bootstrap-switch-handle-on .bootstrap-switch-danger + .bootstrap-switch-label,
.bootstrap-switch .bootstrap-switch-handle-off .bootstrap-switch-danger + .bootstrap-switch-label,
.bootstrap-switch .bootstrap-switch-label .bootstrap-switch-danger + .bootstrap-switch-label {
  border: 1px solid #E9573F;
}

.bootstrap-switch .bootstrap-switch-handle-on .bootstrap-switch-danger + .bootstrap-switch-label + .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-handle-off .bootstrap-switch-danger + .bootstrap-switch-label + .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-label .bootstrap-switch-danger + .bootstrap-switch-label + .bootstrap-switch-handle-off {
  border: 1px solid #E9573F;
  border-left: none;
}

.bootstrap-switch .bootstrap-switch-handle-on .bootstrap-switch-lilac,
.bootstrap-switch .bootstrap-switch-handle-off .bootstrap-switch-lilac,
.bootstrap-switch .bootstrap-switch-label .bootstrap-switch-lilac {
  background: #906094;
  color: white;
  border: 1px solid #906094;
}

.bootstrap-switch .bootstrap-switch-handle-on .bootstrap-switch-lilac + .bootstrap-switch-label,
.bootstrap-switch .bootstrap-switch-handle-off .bootstrap-switch-lilac + .bootstrap-switch-label,
.bootstrap-switch .bootstrap-switch-label .bootstrap-switch-lilac + .bootstrap-switch-label {
  border: 1px solid #906094;
}

.bootstrap-switch .bootstrap-switch-handle-on .bootstrap-switch-lilac + .bootstrap-switch-label + .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-handle-off .bootstrap-switch-lilac + .bootstrap-switch-label + .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-label .bootstrap-switch-lilac + .bootstrap-switch-label + .bootstrap-switch-handle-off {
  border: 1px solid #906094;
  border-left: none;
}

.bootstrap-switch .bootstrap-switch-handle-on .bootstrap-switch-inverse,
.bootstrap-switch .bootstrap-switch-handle-off .bootstrap-switch-inverse,
.bootstrap-switch .bootstrap-switch-label .bootstrap-switch-inverse {
  background: #2A2A2A;
  color: white;
  border: 1px solid #2A2A2A;
}

.bootstrap-switch .bootstrap-switch-handle-on .bootstrap-switch-inverse + .bootstrap-switch-label,
.bootstrap-switch .bootstrap-switch-handle-off .bootstrap-switch-inverse + .bootstrap-switch-label,
.bootstrap-switch .bootstrap-switch-label .bootstrap-switch-inverse + .bootstrap-switch-label {
  border: 1px solid #2A2A2A;
}

.bootstrap-switch .bootstrap-switch-handle-on .bootstrap-switch-inverse + .bootstrap-switch-label + .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-handle-off .bootstrap-switch-inverse + .bootstrap-switch-label + .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-label .bootstrap-switch-inverse + .bootstrap-switch-label + .bootstrap-switch-handle-off {
  border: 1px solid #2A2A2A;
  border-left: none;
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default,
.bootstrap-switch .bootstrap-switch-label.bootstrap-switch-default {
  color: gray !important;
  border: 1px solid #EEEEEE !important;
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default + .bootstrap-switch-label,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default + .bootstrap-switch-label,
.bootstrap-switch .bootstrap-switch-label.bootstrap-switch-default + .bootstrap-switch-label {
  border: 1px solid #EEEEEE !important;
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default + .bootstrap-switch-label + .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default + .bootstrap-switch-label + .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-label.bootstrap-switch-default + .bootstrap-switch-label + .bootstrap-switch-handle-off {
  border: 1px solid #EEEEEE !important;
  border-left: none !important;
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-teal,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-teal,
.bootstrap-switch .bootstrap-switch-label.bootstrap-switch-teal {
  background: #37BC9B !important;
  border: 1px solid #37BC9B !important;
  color: white !important;
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-teal + .bootstrap-switch-label,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-teal + .bootstrap-switch-label,
.bootstrap-switch .bootstrap-switch-label.bootstrap-switch-teal + .bootstrap-switch-label {
  border: 1px solid #37BC9B !important;
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-teal + .bootstrap-switch-label + .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-teal + .bootstrap-switch-label + .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-label.bootstrap-switch-teal + .bootstrap-switch-label + .bootstrap-switch-handle-off {
  border: 1px solid #37BC9B !important;
  border-left: none !important;
}

.bootstrap-switch.bootstrap-switch-focused {
  outline: none !important;
  box-shadow: none !important;
}

.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label {
  -moz-border-radius: 0px !important;
  -webkit-border-radius: 0px;
  border-radius: 0px !important;
}

.bootstrap-switch .bootstrap-switch.bootstrap-switch-handle-on
.bootstrap-switch .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label {
  -moz-border-radius: 0px !important;
  -webkit-border-radius: 0px;
  border-radius: 0px !important;
}

/* ========================================================================
 * BOOTSTRAP DATEPICKER
 * ======================================================================== */

.datepicker {
  padding: 0px;
}

.datepicker table thead tr {
  color: white;
}

.datepicker table thead tr:first-child {
  -webkit-border-top-left-radius: 3px;
  -moz-border-radius-topleft: 3px;
  border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -moz-border-radius-topright: 3px;
  border-top-right-radius: 3px;
}

.datepicker table thead tr:first-child th {
  border-bottom: none;
}

.datepicker table thead tr:first-child:first-child th {
  -webkit-border-top-left-radius: 3px;
  -moz-border-radius-topleft: 3px;
  border-top-left-radius: 3px;
}

.datepicker table thead tr:first-child:last-child th {
  -webkit-border-top-right-radius: 3px;
  -moz-border-radius-topright: 3px;
  border-top-right-radius: 3px;
}

.datepicker table thead tr th {
  font-weight: 300;
  min-width: 40px;
  vertical-align: middle;
  border-width: 1px 1px 7px;
  border-style: solid;
  -moz-border-radius: 0px !important;
  -webkit-border-radius: 0px;
  border-radius: 0px !important;
}

.datepicker table thead tr .prev,
.datepicker table thead tr .switch,
.datepicker table thead tr .next {
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

.datepicker table tbody tr:first-child td {
  border-top: none;
}

.datepicker table tbody tr td {
  min-width: 40px;
  background-color: #EEEEEE;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  padding: 9px;
}

.datepicker table tbody tr td:first-child {
  color: #E9573F;
}

.datepicker table tbody tr td.old,
.datepicker table tbody tr td.new {
  background-color: #e6e6e6;
}

.datepicker table tbody tr td.active,
.datepicker table tbody tr td.active:hover,
.datepicker table tbody tr td.active:disabled,
.datepicker table tbody tr td.active.disabled:hover {
  text-shadow: none;
}

.datepicker table tbody tr td.active.active {
  text-shadow: none;
  background-image: none;
  background-repeat: no-repeat;
  color: white;
}

.datepicker table tfoot tr .today {
  background-color: #d5d5d5;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

.datepicker table tfoot tr .today:hover {
  background-color: #e1e1e1;
}

.datepicker .icon-arrow-left:before {
  font-family: "FontAwesome";
  content: "\f104";
}

.datepicker .icon-arrow-right:before {
  font-family: "FontAwesome";
  content: "\f105";
}

.datepicker-dropdown {
  border: none;
  box-shadow: none;
}

@media (max-width: 320px) {
  .datepicker-inline table {
    margin-left: -14px !important;
  }
}

/* ========================================================================
 * JQUERY COLORPICKER
 * ======================================================================== */

#colorselector {
  position: relative;
  width: 36px;
  height: 36px;
  background: url("../plugins/jquery-colorpicker/images/select2.png");
}

#colorselector div {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 30px;
  height: 30px;
  background: url("../plugins/jquery-colorpicker/images/select2.png") center;
}

/* ========================================================================
 * JASNY BOOTSTRAP
 * ======================================================================== */

.fileinput-new .form-control {
  border-right: none;
}

.fileinput-new .btn-file {
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

.fileinput-new.input-group .btn-file {
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

.fileinput-new .input-group .btn-file {
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

.close.fileinput-exists {
  color: #E9573F;
}

/* ========================================================================
 * CHOSEN SELECT
 * ======================================================================= */

.chosen-select.rounded + .chosen-container-single .chosen-single {
  -moz-border-radius: 3px !important;
  -webkit-border-radius: 3px;
  border-radius: 3px !important;
}

.chosen-select.circle + .chosen-container-single .chosen-single {
  -moz-border-radius: 50% !important;
  -webkit-border-radius: 50%;
  border-radius: 50% !important;
}

.chosen-container {
  width: 100% !important;
  margin-bottom: 10px !important;
}

.chosen-container:last-child {
  margin-bottom: 0px;
}

.chosen-container .chosen-drop {
  border: 1px solid #DDD !important;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.chosen-container .chosen-results li.group-result {
  background-color: #EEEEEE;
}

.chosen-container-single .chosen-single {
  color: #A2A2A2 !important;
  -moz-border-radius: 0px !important;
  -webkit-border-radius: 0px;
  border-radius: 0px !important;
}

.chosen-container-single .chosen-drop {
  -moz-border-radius: 0px !important;
  -webkit-border-radius: 0px;
  border-radius: 0px !important;
}

.chosen-container-single .chosen-single,
.chosen-container-single.chosen-with-drop .chosen-single {
  background: #FFFFFF !important;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  border: 1px solid #DDD !important;
  height: 28px !important;
  line-height: 26px !important;
}

.chosen-container-single .chosen-single div b,
.chosen-container-single.chosen-with-drop .chosen-single div b {
  background-position: 0px 4px !important;
}

.chosen-container-multi .chosen-choices {
  background-image: none !important;
}

.chosen-container-multi .chosen-choices {
  border: 1px solid #DDD;
}

.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
  height: 25px;
}

.chosen-container-active .chosen-choices {
  border-top: 1px solid #DDD;
  border-left: 1px solid #DDD;
  border-right: 1px solid #DDD;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.chosen-container-multi .chosen-choices li.search-choice {
  border: none;
  background: #EEEEEE;
}

@media (max-width: 600px) {
  .chosen-container {
    margin-bottom: 15px;
  }
}

/* ========================================================================
 * ION RANGESLIDER
 * ======================================================================= */

#result-rangeSlider {
  position: relative;
  white-space: pre;
  line-height: 1.5;
}

.irs-line-mid,
.irs-line-left,
.irs-line-right,
.irs-diapason,
.irs-slider {
  background-color: #e1e4e9;
  background-repeat: repeat-x;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}

.irs {
  height: 40px;
}

.irs-with-grid {
  height: 60px;
}

.irs-line {
  height: 12px;
  top: 25px;
}

.irs-line-left {
  height: 12px;
  background-color: #e1e4e9;
}

.irs-line-mid {
  height: 12px;
  background-color: #e1e4e9;
}

.irs-line-right {
  height: 12px;
  background-color: #e1e4e9;
}

.irs-diapason {
  height: 12px;
  top: 25px;
}

.irs-slider {
  width: 16px;
  height: 18px;
  top: 22px;
}

.irs-min,
.irs-max {
  color: #999;
  font-size: 10px;
  line-height: 1.333;
  text-shadow: none;
  top: 0;
  padding: 1px 3px;
  background: #e1e4e9;
  border-radius: 4px;
}

.irs-from,
.irs-to,
.irs-single {
  color: #fff;
  font-size: 10px;
  line-height: 1.333;
  text-shadow: none;
  padding: 1px 5px;
  border-radius: 4px;
}

.irs-from:after,
.irs-to:after,
.irs-single:after {
  position: absolute;
  display: block;
  content: "";
  bottom: -6px;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -3px;
  overflow: hidden;
  border: 3px solid transparent;
}

.irs-grid-pol {
  background: #e1e4e9;
}

.irs-grid-text {
  color: #999;
}

.slider-teal .irs-line-mid,
.slider-teal .irs-line-left,
.slider-teal .irs-line-right,
.slider-teal .irs-diapason,
.slider-teal .irs-slider {
  background-color: #e1e4e9;
  background-repeat: repeat-x;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}

.slider-teal .irs {
  height: 40px;
}

.slider-teal .irs-with-grid {
  height: 60px;
}

.slider-teal .irs-line {
  height: 12px;
  top: 25px;
}

.slider-teal .irs-line-left {
  height: 12px;
  background-color: #e1e4e9;
}

.slider-teal .irs-line-mid {
  height: 12px;
  background-color: #e1e4e9;
}

.slider-teal .irs-line-right {
  height: 12px;
  background-color: #e1e4e9;
}

.slider-teal .irs-diapason {
  height: 12px;
  top: 25px;
  background-color: #44c8a8;
}

.slider-teal .irs-slider {
  width: 16px;
  height: 18px;
  top: 22px;
  background-color: #37BC9B;
}

.slider-teal #irs-active-slider,
.slider-teal .irs-slider:hover {
  background-color: #37BC9B;
}

.slider-teal .irs-min,
.slider-teal .irs-max {
  color: #999;
  font-size: 10px;
  line-height: 1.333;
  text-shadow: none;
  top: 0;
  padding: 1px 3px;
  background: #e1e4e9;
  border-radius: 4px;
}

.slider-teal .irs-from,
.slider-teal .irs-to,
.slider-teal .irs-single {
  color: #fff;
  font-size: 10px;
  line-height: 1.333;
  text-shadow: none;
  padding: 1px 5px;
  background-color: #37BC9B;
  border-radius: 4px;
}

.slider-teal .irs-from:after,
.slider-teal .irs-to:after,
.slider-teal .irs-single:after {
  position: absolute;
  display: block;
  content: "";
  bottom: -6px;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -3px;
  overflow: hidden;
  border: 3px solid transparent;
  border-top-color: #37BC9B;
}

.slider-teal .irs-grid-pol {
  background: #e1e4e9;
}

.slider-teal .irs-grid-text {
  color: #999;
}

.slider-teal.circle .irs-slider {
  top: 21px;
  width: 20px;
  height: 20px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.slider-primary .irs-diapason {
  background-color: #00c5fb !important;
}

.slider-primary .irs-slider {
  background-color: #00B1E1 !important;
}

.slider-primary #irs-active-slider,
.slider-primary .irs-slider:hover {
  background-color: #00B1E1 !important;
}

.slider-primary .irs-from,
.slider-primary .irs-to,
.slider-primary .irs-single {
  background-color: #00B1E1 !important;
}

.slider-primary .irs-from:after,
.slider-primary .irs-to:after,
.slider-primary .irs-single:after {
  border-top-color: #00B1E1 !important;
}

.slider-primary .circle .irs-slider {
  top: 21px;
  width: 20px;
  height: 20px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.slider-primary .donut .irs-slider {
  background: #e1e4e9 !important;
  top: 21px;
  width: 20px;
  height: 20px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  border: 4px solid #00B1E1;
  margin-left: -3px;
}

.slider-success .irs-diapason {
  background-color: #98c865 !important;
}

.slider-success .irs-slider {
  background-color: #8CC152 !important;
}

.slider-success #irs-active-slider,
.slider-success .irs-slider:hover {
  background-color: #8CC152 !important;
}

.slider-success .irs-from,
.slider-success .irs-to,
.slider-success .irs-single {
  background-color: #8CC152 !important;
}

.slider-success .irs-from:after,
.slider-success .irs-to:after,
.slider-success .irs-single:after {
  border-top-color: #8CC152 !important;
}

.slider-success .circle .irs-slider {
  top: 21px;
  width: 20px;
  height: 20px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.slider-success .donut .irs-slider {
  background: #e1e4e9 !important;
  top: 21px;
  width: 20px;
  height: 20px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  border: 4px solid #8CC152;
  margin-left: -3px;
}

.slider-info .irs-diapason {
  background-color: #79d9ec !important;
}

.slider-info .irs-slider {
  background-color: #63D3E9 !important;
}

.slider-info #irs-active-slider,
.slider-info .irs-slider:hover {
  background-color: #63D3E9 !important;
}

.slider-info .irs-from,
.slider-info .irs-to,
.slider-info .irs-single {
  background-color: #63D3E9 !important;
}

.slider-info .irs-from:after,
.slider-info .irs-to:after,
.slider-info .irs-single:after {
  border-top-color: #63D3E9 !important;
}

.slider-info .circle .irs-slider {
  top: 21px;
  width: 20px;
  height: 20px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.slider-info .donut .irs-slider {
  background: #e1e4e9 !important;
  top: 21px;
  width: 20px;
  height: 20px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  border: 4px solid #63D3E9;
  margin-left: -3px;
}

.slider-warning .irs-diapason {
  background-color: #f7c45a !important;
}

.slider-warning .irs-slider {
  background-color: #F6BB42 !important;
}

.slider-warning #irs-active-slider,
.slider-warning .irs-slider:hover {
  background-color: #F6BB42 !important;
}

.slider-warning .irs-from,
.slider-warning .irs-to,
.slider-warning .irs-single {
  background-color: #F6BB42 !important;
}

.slider-warning .irs-from:after,
.slider-warning .irs-to:after,
.slider-warning .irs-single:after {
  border-top-color: #F6BB42 !important;
}

.slider-warning .circle .irs-slider {
  top: 21px;
  width: 20px;
  height: 20px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.slider-warning .donut .irs-slider {
  background: #e1e4e9 !important;
  top: 21px;
  width: 20px;
  height: 20px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  border: 4px solid #F6BB42;
  margin-left: -3px;
}

.slider-danger .irs-diapason {
  background-color: #ec6b56 !important;
}

.slider-danger .irs-slider {
  background-color: #E9573F !important;
}

.slider-danger #irs-active-slider,
.slider-danger .irs-slider:hover {
  background-color: #E9573F !important;
}

.slider-danger .irs-from,
.slider-danger .irs-to,
.slider-danger .irs-single {
  background-color: #E9573F !important;
}

.slider-danger .irs-from:after,
.slider-danger .irs-to:after,
.slider-danger .irs-single:after {
  border-top-color: #E9573F !important;
}

.slider-danger .circle .irs-slider {
  top: 21px;
  width: 20px;
  height: 20px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.slider-danger .donut .irs-slider {
  background: #e1e4e9 !important;
  top: 21px;
  width: 20px;
  height: 20px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  border: 4px solid #E9573F;
  margin-left: -3px;
}

.slider-lilac .irs-diapason {
  background-color: #9c6da0 !important;
}

.slider-lilac .irs-slider {
  background-color: #906094 !important;
}

.slider-lilac #irs-active-slider,
.slider-lilac .irs-slider:hover {
  background-color: #906094 !important;
}

.slider-lilac .irs-from,
.slider-lilac .irs-to,
.slider-lilac .irs-single {
  background-color: #906094 !important;
}

.slider-lilac .irs-from:after,
.slider-lilac .irs-to:after,
.slider-lilac .irs-single:after {
  border-top-color: #906094 !important;
}

.slider-lilac .circle .irs-slider {
  top: 21px;
  width: 20px;
  height: 20px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.slider-lilac .donut .irs-slider {
  background: #e1e4e9 !important;
  top: 21px;
  width: 20px;
  height: 20px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  border: 4px solid #906094;
  margin-left: -3px;
}

.slider-inverse .irs-diapason {
  background-color: #373737 !important;
}

.slider-inverse .irs-slider {
  background-color: #2A2A2A !important;
}

.slider-inverse #irs-active-slider,
.slider-inverse .irs-slider:hover {
  background-color: #2A2A2A !important;
}

.slider-inverse .irs-from,
.slider-inverse .irs-to,
.slider-inverse .irs-single {
  background-color: #2A2A2A !important;
}

.slider-inverse .irs-from:after,
.slider-inverse .irs-to:after,
.slider-inverse .irs-single:after {
  border-top-color: #2A2A2A !important;
}

.slider-inverse .circle .irs-slider {
  top: 21px;
  width: 20px;
  height: 20px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.slider-inverse .donut .irs-slider {
  background: #e1e4e9 !important;
  top: 21px;
  width: 20px;
  height: 20px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  border: 4px solid #2A2A2A;
  margin-left: -3px;
}

/* ========================================================================
 * SUMMERNOTE
 * ======================================================================= */

.note-editor {
  border: 1px solid #DDD;
}

.note-editor .note-toolbar {
  border-bottom: 1px solid #DDD;
}

.note-editor .note-editable {
  min-height: 200px;
}

/* ========================================================================
 * WYSIHTML5
 * ======================================================================= */

textarea.rounded + input + .wysihtml5-sandbox {
  -moz-border-radius: 3px !important;
  -webkit-border-radius: 3px;
  border-radius: 3px !important;
}

textarea.circle + input + .wysihtml5-sandbox {
  -moz-border-radius: 50% !important;
  -webkit-border-radius: 50%;
  border-radius: 50% !important;
}

textarea + input + .wysihtml5-sandbox {
  -moz-border-radius: 0px !important;
  -webkit-border-radius: 0px;
  border-radius: 0px !important;
  border: 1px solid #DDD !important;
}

.icon-list:before,
.icon-th-list:before,
.icon-indent-right:before,
.icon-indent-left:before,
.icon-share:before,
.icon-picture:before {
  font-family: 'FontAwesome';
  font-style: normal;
  color: #99999C;
}

.icon-list:before {
  content: "\f03a";
}

.icon-th-list:before {
  content: "\f00b";
}

.icon-indent-right:before {
  content: "\f03b";
}

.icon-indent-left:before {
  content: "\f03c";
}

.icon-share:before {
  content: "\f0c1";
}

.icon-picture:before {
  content: "\f03e";
}

/* ========================================================================
 * DATATABLE
 * ======================================================================= */

.table-default.table.dataTable thead .sorting,
.table-default.table.dataTable thead .sorting_asc,
.table-default.table.dataTable thead .sorting_desc,
.table-default.table.dataTable thead .sorting_asc_disabled,
.table-default.table.dataTable thead .sorting_desc_disabled {
  background: #EEE !important;
}

table.dataTable thead tr th,
table.dataTable tfoot tr th {
  padding-left: 10px;
  padding-right: 10px;
}

table.dataTable tbody tr td {
  padding-left: 10px;
  padding-right: 10px;
}

table.dataTable tbody tr td.sorting_1 {
  background: #EEEEEE;
  border-bottom: 1px solid #DDD;
}

table.has-columns-hidden > tbody > tr > td > span.responsiveExpander {
  vertical-align: middle;
}

table.has-columns-hidden > tbody > tr > td > span.responsiveExpander:before {
  font-family: "fontawesome";
  content: "\f0fe";
  margin-right: 10px;
  cursor: pointer;
  font-size: 20px;
}

table.has-columns-hidden > tbody > tr.detail-show > td span.responsiveExpander {
  vertical-align: middle;
}

table.has-columns-hidden > tbody > tr.detail-show > td span.responsiveExpander:before {
  font-family: "fontawesome";
  content: "\f146";
  margin-right: 10px;
  cursor: pointer;
  font-size: 20px;
}

div.dataTables_filter input {
  margin-left: 10px;
}

div.dataTables_length select {
  margin-right: 10px;
}

.dataTable thead tr th:first-child {
  min-width: 150px;
}

table.dataTable th.dataTables_empty,
td.dataTables_empty {
  padding: 30px !important;
  text-align: center;
}

table.dataTable th.dataTables_empty:before,
td.dataTables_empty:before {
  font-family: "fontawesome";
  content: "\f119";
  display: block;
  font-size: 110px;
  margin-bottom: 5px;
}

@media (max-width: 768px) {
  div.dataTables_length label {
    width: 93%;
  }

  div.dataTables_length select {
    display: inline-block;
  }

  div.dataTables_filter label {
    line-height: 30px;
  }

  div.dataTables_filter input {
    display: inline-block;
    float: right;
    width: 13em !important;
    margin-right: 0px;
  }

  div.dataTables_info {
    text-align: center;
    margin-bottom: 10px;
  }

  div.dataTables_paginate {
    float: none !important;
    text-align: center;
  }
}

@media (max-width: 480px) {
  table.dataTable thead tr th:first-child {
    -moz-border-radius: 3px 3px 0px 0px !important;
    -webkit-border-radius: 3px;
    border-radius: 3px 3px 0px 0px !important;
  }

  table.dataTable tfoot tr th:first-child {
    -moz-border-radius: 0px 0px 3px 3px !important;
    -webkit-border-radius: 0px;
    border-radius: 0px 0px 3px 3px !important;
  }

  .dataTables_wrapper .col-xs-6 {
    width: 100%;
  }

  div.dataTables_length label {
    display: none;
  }
}

@media (max-width: 360px) {
  .dataTables_paginate .pagination .previous {
    display: none;
  }

  .dataTables_paginate .pagination > li:nth-child(2) a {
    -moz-border-radius: 3px 0px 0px 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px 0px 0px 3px;
  }

  div.dataTables_filter input {
    width: 19em;
  }
}

@media (max-width: 320px) {
  div.dataTables_filter input {
    width: 16em !important;
  }
}

/* ========================================================================
 * FONT AWESOME
 * ======================================================================= */

.fontawesome-icon-list .fa-hover a {
  display: block;
  line-height: 32px;
  height: 32px;
  color: #636E7B;
  text-decoration: none;
  padding-left: 10px;
}

.fontawesome-icon-list .fa-hover a:hover {
  background-color: #EEEEEE;
}

.fontawesome-icon-list .fa-hover a .fa {
  font-size: 14px;
  display: inline-block;
  margin-right: 10px;
}

/* ========================================================================
 * GRITTER NOTIFICATION
 * ======================================================================= */

.gritter-item-wrapper,
.gritter-item,
.gritter-top,
.gritter-bottom {
  background: fadeout(#2A2A2A, 35% !important);
  -moz-border-radius: 3px !important;
  -webkit-border-radius: 3px;
  border-radius: 3px !important;
}

#gritter-notice-wrapper {
  top: 70px !important;
  right: 20px !important;
  z-index: 1030 !important;
}

.gritter-close {
  left: auto !important;
  right: 3px !important;
}

.gritter-title {
  font-size: 18px;
  font-weight: 300;
  text-shadow: none;
}

.gritter-item {
  font-family: 'Open Sans';
}

.gritter-top {
  background: url(../images/gritter.png) no-repeat left -35px;
  height: 0;
}

.gritter-bottom {
  height: 0;
}

.gritter-image {
  margin-top: 10px;
}

.gritter-with-image {
  margin-top: 10px;
}

.gritter-item-wrapper,
.gritter-item,
.gritter-top,
.gritter-bottom {
  -moz-border-radius: 0 !important;
  -webkit-border-radius: 0;
  border-radius: 0 !important;
}

/* ========================================================================
 * NICESCROLL
 * ======================================================================= */

.nicescroll-rails#ascrail2000-hr {
  display: none !important;
}

.nicescroll-rails div {
  -moz-border-radius: 0px !important;
  -webkit-border-radius: 0px;
  border-radius: 0px !important;
}

/* ========================================================================
 * FUEL UX
 * ======================================================================= */

.fuelux .repeater-thumbnail {
  width: 109px;
}

.fuelux .repeater-thumbnail img {
  margin-top: 0px;
}

.fuelux .repeater-thumbnail-cont.align-left .repeater-thumbnail {
  font-size: 13px;
  padding-top: 15px;
  padding-bottom: 15px;
}

.fuelux .repeater,
.fuelux .repeater-header {
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

.fuelux .repeater-list-header td.sortable:last-child {
  text-align: center;
}

.fuelux .repeater-list-header td.sortable:hover {
  background: transparent;
}

.fuelux .repeater-list-items td:last-child {
  text-align: center;
}

.fuelux .repeater-list table thead > tr > th {
  border-bottom: none;
}

.fuelux .repeater table thead tr th:nth-child(1),
.fuelux .repeater table thead tr th:nth-child(3),
.fuelux .repeater table thead tr th:nth-child(6) {
  text-align: center;
}

.fuelux .repeater table thead tr th:nth-child(2) {
  width: 200px !important;
}

.fuelux .repeater table thead tr th:nth-child(4) {
  text-align: right;
}

.fuelux .repeater table thead tr th:last-child {
  text-align: center;
}

.fuelux .repeater table tbody tr td {
  vertical-align: middle;
  font-size: 12px;
}

.fuelux .repeater table tbody tr td:nth-child(1),
.fuelux .repeater table tbody tr td:nth-child(3),
.fuelux .repeater table tbody tr td:nth-child(6) {
  text-align: center;
}

.fuelux .repeater table tbody tr td:nth-child(4) {
  text-align: right;
}

.fuelux .repeater table tbody tr td:last-child {
  text-align: center;
}

.repeater-header-right .repeater-filters > button {
  width: 150px !important;
  text-align: left !important;
}

/* ========================================================================
 * CODE PRETIFFY
 * ======================================================================= */

ol.linenums {
  padding: 0px;
}

/* ========================================================================
 * BLOCKUI
 * ======================================================================= */

.blockUI.blockOverlay {
  background-color: white !important;
}

.blockMsg h1 {
  font-size: 15px;
  margin: 10px 0px;
}

/* ========================================================================
 * CUBEPORTFOLIO
 * ======================================================================= */

.cbp {
  margin-bottom: 20px;
}

.cbp-panel {
  width: 100%;
}

.cbp-l-filters-list .cbp-filter-item {
  margin-top: 0;
}

.cbp-l-filters-list-first,
.cbp-l-filters-list-last {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
}

.cbp-l-loadMore-button .cbp-l-loadMore-link,
.cbp-l-loadMore-button .cbp-l-loadMore-button-link {
  margin-bottom: 20px;
}

.cbp-l-filters-button {
  margin-bottom: 5px;
}

.cbp-l-filters-button .cbp-filter-item {
  margin-top: 0;
  margin-bottom: 15px;
}

#grid-container {
  margin-top: -20px;
  margin-bottom: 50px;
}

.cbp-l-project-details-list {
  list-style: none;
  padding: 0;
}

.cbp-l-project-related-wrap {
  padding: 0;
}

.cbp-l-project-related-wrap a {
  text-decoration: none;
}

.cbp-l-project-details-visit {
  text-decoration: none !important;
}

.cbp-l-filters-dropdown {
  margin-bottom: 0;
}

.cbp-l-caption-buttonLeft:hover,
.cbp-l-caption-buttonRight:hover {
  color: white !important;
}

/* ========================================================================
 * PEITY CHARTS
 * ======================================================================= */

.peity {
  width: inherit;
}

/* ========================================================================
 * EASY PIE CHART
 * ======================================================================= */

.easy-pie-chart {
  text-align: center;
  margin: 10px;
  display: inline-block;
}

.easy-pie-chart.easy-pie-xs .percentage {
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 9px;
}

.easy-pie-chart.easy-pie-xs .percentage img {
  margin: 0 auto;
  padding: 15px;
}

.easy-pie-chart.easy-pie-xs .percentage i {
  font-size: 13px;
}

.easy-pie-chart.easy-pie-xs .title {
  margin-top: 5px;
}

.easy-pie-chart.easy-pie-sm .percentage {
  width: 100px;
  height: 100px;
  line-height: 100px;
  font-size: 15px;
}

.easy-pie-chart.easy-pie-sm .percentage img {
  margin: 0 auto;
  padding: 25px;
}

.easy-pie-chart.easy-pie-sm .percentage i {
  font-size: 23px;
}

.easy-pie-chart.easy-pie-sm .title {
  margin-top: 10px;
}

.easy-pie-chart.easy-pie-md .percentage {
  width: 150px;
  height: 150px;
  line-height: 150px;
  font-size: 20px;
}

.easy-pie-chart.easy-pie-md .percentage img {
  margin: 0 auto;
  padding: 35px;
}

.easy-pie-chart.easy-pie-md .percentage i {
  font-size: 33px;
}

.easy-pie-chart.easy-pie-lg .percentage {
  width: 200px;
  height: 200px;
  line-height: 200px;
  font-size: 25px;
}

.easy-pie-chart.easy-pie-lg .percentage img {
  margin: 0 auto;
  padding: 45px;
}

.easy-pie-chart.easy-pie-lg .percentage i {
  font-size: 43px;
}

.easy-pie-chart.easy-pie-xl .percentage {
  width: 250px;
  height: 250px;
  line-height: 250px;
  font-size: 30px;
}

.easy-pie-chart.easy-pie-xl .percentage img {
  margin: 0 auto;
  padding: 55px;
}

.easy-pie-chart.easy-pie-xl .percentage i {
  font-size: 53px;
}

.easy-pie-chart .percentage {
  color: #333;
  font-weight: 100;
  font-size: 1em;
  margin: 0 auto;
  position: relative;
  text-align: center;
}

.easy-pie-chart .percentage canvas {
  position: absolute;
  top: 0;
  left: 0;
}

.easy-pie-chart .title {
  display: block;
  text-align: center;
  color: #333;
  font-weight: 300;
  font-size: 16px;
  margin-top: 20px;
  text-decoration: none;
}

.easy-pie-chart .title.up {
  margin-top: 0;
  margin-bottom: 10px;
}

/* ========================================================================
 * BOOTSTRAP COLOR PICKER
 * ======================================================================= */

.colorpicker.dropdown-menu {
  padding: 4px;
}

.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;
}

/* ========================================================================
 * BOOTSTRAP DATE RANGE PICKER
 * ======================================================================= */

.daterangepicker {
  padding: 10px;
}

.daterangepicker .input-mini {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  outline: none !important;
}

.daterangepicker .input-mini:link,
.daterangepicker .input-mini:focus,
.daterangepicker .input-mini:active,
.daterangepicker .input-mini:visited {
  border: 1px solid #8CC152;
}

.daterangepicker .input-mini.active {
  border: 1px solid #8CC152;
}

.daterangepicker .calendar-time {
  margin: 15px auto;
  padding-left: 0;
}

.daterangepicker .calendar-time i {
  font-size: 25px;
  margin-top: -5px;
  left: 0;
}

.daterangepicker .calendar-table {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
}

.daterangepicker th:hover {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: #8CC152;
  border-color: #8CC152;
  color: #fff;
}

.daterangepicker td.start-date,
.daterangepicker td.end-date,
.daterangepicker td.start-date.end-date {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
}

.daterangepicker td:hover {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
}

.daterangepicker .daterangepicker_input {
  margin-bottom: 15px;
}

.daterangepicker .ranges ul {
  margin-bottom: 15px;
}

.daterangepicker .ranges .range_inputs .btn:first-child {
  margin-right: 5px;
}

.daterangepicker .ranges li {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  color: darkgray;
}

.daterangepicker .ranges li.active,
.daterangepicker .ranges li:hover {
  background: #8CC152;
  border: 1px solid #8CC152;
}

/* ========================================================================
 * GRID STACK
 * ======================================================================= */

.panel.grid-stack-item-content {
  background-color: #FBFBFB;
}

/* ========================================================================
 * SELECT2
 * ======================================================================= */

.select2-container {
  width: 100% !important;
}

.select2-result-repository {
  padding-top: 4px;
  padding-bottom: 3px;
}

.select2-result-repository__avatar {
  float: left;
  width: 60px;
  margin-right: 10px;
}

.select2-result-repository__avatar img {
  width: 100%;
  height: auto;
  border-radius: 2px;
}

.select2-result-repository__meta {
  margin-left: 70px;
}

.select2-result-repository__title {
  color: black;
  font-weight: bold;
  word-wrap: break-word;
  line-height: 1.1;
  margin-bottom: 4px;
}

.select2-result-repository__forks,
.select2-result-repository__stargazers {
  margin-right: 1em;
}

.select2-result-repository__forks,
.select2-result-repository__stargazers,
.select2-result-repository__watchers {
  display: inline-block;
  color: #aaa;
  font-size: 11px;
}

.select2-result-repository__description {
  font-size: 13px;
  color: #777;
  margin-top: 4px;
}

.select2-results__option--highlighted .select2-result-repository__title {
  color: white;
}

.select2-results__option--highlighted .select2-result-repository__forks,
.select2-results__option--highlighted .select2-result-repository__stargazers,
.select2-results__option--highlighted .select2-result-repository__description,
.select2-results__option--highlighted .select2-result-repository__watchers {
  color: #c6dcef;
}

.select2-container--default .select2-selection--single {
  background-color: #fff;
  border: 1px solid #DDD;
  border-radius: 0;
  color: #a2a2a2 !important;
}

.select2-container .select2-selection--single {
  height: 35px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 31px;
  padding-left: 11px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  margin-left: -10px;
  margin-top: 2px;
}

.select2-container--default .select2-selection--multiple {
  border: 1px solid #DDD;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
}
/* ========================================================================
 * TABLE OF CONTENTS
 * ========================================================================

 * ========================================================================
 * LAYOUT
 * ========================================================================
   01. HEADER
   02. SIDEBAR LEFT & RIGHT
   03. PAGE CONTENT
 * ========================================================================

 * ========================================================================
 * PAGES
 * ========================================================================
   01. SIGN
   02. ERROR
   03. INVOICE
 * ========================================================================

 * ========================================================================
 * COMPONENT
 * ========================================================================
   01. RESET
   02. PANEL
   03. MEDIA MANAGER
   04. PAGINATION
   05. RATING STAR
   06. DROPDOWN
   07. LIST GROUP
   08. FORM
   09. TABLE
   10. BUTTON
   11. MISC
 * ========================================================================

 * ========================================================================
 * PLUGINS
 * ========================================================================
   01. CHOSEN
   02. DROPZONE
   03. JPRELOADER
   04. DATEPICKER
   05. ION SLIDER
 * ======================================================================== */

/* ========================================================================
 * HEADER
 * ======================================================================== */

body.page-sidebar-minimize #header .navbar-minimize > a {
  background-color: #81B71A;
  color: #FFFFFF;
}

body.page-sidebar-minimize #header .navbar-minimize:hover > a {
  background-color: #71a117;
}

#header .navbar-header {
  background-color: #81B71A;
}

/* ========================================================================
 * SIDEBAR LEFT & RIGHT
 * ======================================================================== */

#sidebar-left.sidebar-box .sidebar-content img,
#sidebar-left.sidebar-rounded .sidebar-content img,
#sidebar-left.sidebar-circle .sidebar-content img {
  border: 2px solid #81B71A;
}

#sidebar-left.sidebar-box .sidebar-menu > li.active > a > .icon i,
#sidebar-left.sidebar-rounded .sidebar-menu > li.active > a > .icon i,
#sidebar-left.sidebar-circle .sidebar-menu > li.active > a > .icon i {
  background-color: #81B71A;
}

#sidebar-left.sidebar-box .sidebar-menu > li > ul > li:hover:after,
#sidebar-left.sidebar-rounded .sidebar-menu > li > ul > li:hover:after,
#sidebar-left.sidebar-circle .sidebar-menu > li > ul > li:hover:after {
  -moz-box-shadow: 0 0 0 5px #628a14;
  -webkit-box-shadow: 0 0 0 5px #628a14;
  box-shadow: 0 0 0 5px #628a14;
}

#sidebar-left .sidebar-menu ul li:hover:after {
  background-color: #81B71A;
}

#sidebar-left .sidebar-menu ul li:hover a:before {
  color: #81B71A;
}

#sidebar-left .sidebar-menu ul li.active:after {
  background-color: #81B71A;
}

#sidebar-left .sidebar-menu ul li.active > ul > li.active a:before {
  color: #81B71A;
}

/* ========================================================================
 * PAGE CONTENT
 * ======================================================================== */

body.page-sidebar-minimize .navbar-minimize,
body.page-sidebar-minimize-auto .navbar-minimize {
  border-right: 1px solid #81B71A !important;
}

body.page-sidebar-minimize .navbar-minimize a,
body.page-sidebar-minimize-auto .navbar-minimize a {
  background-color: #81B71A;
  border-bottom: 1px solid #81B71A;
}

body.page-sidebar-minimize .navbar-minimize a:hover,
body.page-sidebar-minimize-auto .navbar-minimize a:hover {
  background-color: #71a117;
  border-bottom: 1px solid #71a117;
}

body.page-sidebar-minimize .navbar-minimize a i,
body.page-sidebar-minimize-auto .navbar-minimize a i {
  color: #FFFFFF;
}

.navbar-minimize-mobile {
  background-color: #81B71A;
}

.navbar-minimize-mobile:hover {
  background-color: #71a117;
}

@media (max-width: 768px) {
  body.page-sidebar-left-show .navbar-minimize-mobile,
  body.page-sidebar-right-show .navbar-minimize-mobile {
    background-color: #628a14;
  }

  body.page-sidebar-left-show .navbar-minimize-mobile:hover,
  body.page-sidebar-right-show .navbar-minimize-mobile:hover {
    background-color: #71a117;
  }
}

.navbar-toolbar .navbar-form input:focus {
  border: 1px solid #81B71A;
}

.navbar-toolbar .navbar-form .btn-focus {
  background-color: #81B71A;
  box-shadow: none;
  border: none;
  color: #FFFFFF;
}

.navbar-toolbar .navbar-right .dropdown > a:focus > i {
  color: #81B71A;
}

/* ========================================================================
 * SIGN
 * ======================================================================== */

.sign-wrapper a {
  color: #81B71A;
}

.sign-wrapper a:hover,
.sign-wrapper a:focus,
.sign-wrapper a:active {
  color: #7eb319;
}

.sign-text:before {
  background-color: #9fe024;
}

.sign-header {
  background-color: #81B71A;
  border-bottom: 10px solid #6b9816;
}

.sign-text span {
  background-color: #81B71A;
}

.sign-text img {
  border: 7px solid #81B71A;
}

/* ========================================================================
 * ERROR
 * ======================================================================== */

.error-wrapper h1 {
  color: #81B71A;
}

/* ========================================================================
 * INVOICE
 * ======================================================================== */

.product-num {
  background-color: #81B71A;
}

/* ========================================================================
 * RESET
 * ======================================================================== */

a {
  color: #81B71A;
}

a:hover,
a:active,
a:focus {
  color: #628a14;
}

input.no-border-left:focus,
textarea.no-border-left:focus {
  border-top: 1px solid #81B71A !important;
  border-right: 1px solid #81B71A !important;
  border-bottom: 1px solid #81B71A !important;
  border-left: none !important;
}

input.no-border-right:focus,
textarea.no-border-right:focus {
  border-top: 1px solid #81B71A !important;
  border-none: 1px solid #81B71A !important;
  border-bottom: 1px solid #81B71A !important;
  border-right: none !important;
}

input:focus,
textarea:focus {
  border: 1px solid #81B71A !important;
}

/* ========================================================================
 * PANEL
 * ======================================================================== */

.panel-tab .panel-heading ul li.active a i {
  color: #81B71A;
}

.panel-tab .panel-heading ul li a:hover i {
  color: #81B71A;
}

/* ========================================================================
 * MEDIA MANAGER
 * ======================================================================== */

.media-manager .media-manager-options .filter-type a.active {
  color: #81B71A;
}

/* ========================================================================
 * PAGINATION
 * ======================================================================== */

.pagination > li > a {
  color: #628a14;
}

.pagination > .active > a,
.pagination > .active > span {
  background-color: #628a14;
  border: 1px solid #628a14;
}

.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span:hover,
.pagination > .active > span:focus {
  background-color: #81B71A;
  border: 1px solid #81B71A;
}

.pager > li > a {
  color: #628a14;
}

/* ========================================================================
 * RATING STAR
 * ======================================================================== */

.rating .star:hover:before {
  color: #81B71A;
}

.rating .star.active:before {
  color: #81B71A;
}

.rating .star.active ~ .star:before {
  color: #81B71A;
}

/* ========================================================================
 * DROPDOWN
 * ======================================================================== */

.dropdown-menu li {
  position: relative;
}

.dropdown-menu li.active a {
  background-color: #81B71A;
}

.dropdown-menu li.active:hover a,
.dropdown-menu li.active:focus a,
.dropdown-menu li.active:active a {
  background-color: #81B71A;
  cursor: default;
}

.dropdown-menu li > a:hover:before {
  display: block;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0px;
  border-left: 3px solid #71a117;
}

/* ========================================================================
 * LIST GROUP
 * ======================================================================== */

a.list-group-item.active {
  background-color: #81B71A;
  border-color: #81B71A;
}

a.list-group-item.active:hover,
a.list-group-item.active:focus {
  background-color: #81B71A;
  border-color: #81B71A;
}

/* ========================================================================
 * FORM
 * ======================================================================== */

.ckbox-theme input[type=checkbox]:checked + label::after {
  border-color: #81B71A;
  background-color: #81B71A;
}

.ckbox-theme input[type=checkbox][disabled]:checked + label::after {
  border-color: #81B71A;
  opacity: .5;
}

.rdio-theme input[type=radio]:checked + label::after {
  border-color: #81B71A;
  background-color: #81B71A;
}

.rdio-theme input[type=radio][disabled]:checked + label::after {
  border-color: #81B71A;
  opacity: .5;
}

.form-control:focus {
  border: 1px solid #81B71A;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.form-focus {
  border: 1px solid #81B71A;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* ========================================================================
 * TABLE
 * ======================================================================== */

.table-theme thead tr th {
  background-color: #81B71A !important;
  border-color: #91cd1d #91cd1d #6b9816 !important;
  color: #fff;
}

.table-theme tbody tr td.sorting_1 {
  background: #a5e231 !important;
  color: white;
  border-bottom: 1px solid #b3e651 !important;
}

.table-theme tfoot tr th {
  background-color: #81B71A !important;
  border-color: #6b9816 #91cd1d #91cd1d !important;
  color: #fff;
}

.table-theme.table-bordered {
  border: 1px solid #81B71A;
}

.table-theme.table-bordered thead tr th:first-child,
.table-theme.table-bordered thead tr th:last-child,
.table-theme.table-bordered tfoot tr th:first-child,
.table-theme.table-bordered tfoot tr th:last-child {
  -moz-border-radius: 0px !important;
  -webkit-border-radius: 0px;
  border-radius: 0px !important;
}

.table-theme.table-bordered tbody tr td.sorting_1 {
  border-right: 1px solid #b3e651 !important;
}

.table-theme table.has-columns-hidden > tbody > tr > td > span.responsiveExpander:before {
  color: white;
}

.table-theme table.has-columns-hidden > tbody > tr.detail-show > td span.responsiveExpander:before {
  color: white;
}

/* ========================================================================
 * BUTTON
 * ======================================================================== */

.btn-theme {
  background-color: #81B71A;
  border-color: #81B71A;
  color: white;
}

.btn-theme:hover,
.btn-theme:focus,
.btn-theme:active,
.btn-theme.active,
.btn-theme[disabled],
.btn-theme.disabled {
  background-color: #71a117;
  border-color: transparent;
  color: white;
}

.btn-theme.dropdown-toggle.btn-theme {
  background-color: #81B71A;
  border-color: #71a117;
  color: white;
}

.btn-theme.btn-alt {
  background-color: #71a117;
  border: 1px solid #81B71A;
}

.btn-theme.btn-alt:hover {
  background-color: #628a14;
}

.btn-theme.btn-stroke {
  border: 1px double #81B71A;
  background-color: transparent;
  color: #81B71A;
}

.btn-theme.btn-stroke:hover {
  background-color: #71a117;
  border-color: transparent;
  color: white;
}

.btn-theme.btn-solid {
  border: 1px solid #81B71A;
}

.btn-theme.btn-dashed {
  border: 1px dashed #81B71A;
}

.btn-theme.btn-dotted {
  border: 1px dotted #81B71A;
}

.btn-theme.btn-double {
  border: 4px double #81B71A;
}

.btn-theme.btn-inset {
  border: 4px inset #81B71A;
}

.btn-theme.btn-circle {
  padding-left: 0;
  padding-right: 0;
  width: 34px;
  -moz-border-radius: 50% 50% 50% 50%;
  -webkit-border-radius: 50%;
  border-radius: 50% 50% 50% 50%;
}

.btn-theme.btn-slidedown:after {
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  background-color: #628a14;
  z-index: -1;
}

.btn-theme.btn-slidedown:hover,
.btn-theme.btn-slidedown:active {
  color: white;
}

.btn-theme.btn-slidedown:hover:after,
.btn-theme.btn-slidedown:active:after {
  height: 100%;
}

.btn-theme.btn-slideright:after {
  width: 0%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #628a14;
  z-index: -1;
}

.btn-theme.btn-slideright:hover,
.btn-theme.btn-slideright:active {
  color: white;
}

.btn-theme.btn-slideright:hover:after,
.btn-theme.btn-slideright:active:after {
  width: 100%;
}

.btn-theme.btn-expand:after {
  width: 0;
  height: 103%;
  top: 50%;
  left: 50%;
  background-color: #628a14;
  opacity: 0;
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.btn-theme.btn-expand:hover:after {
  width: 90%;
  opacity: 1;
}

.btn-theme.btn-expand:active:after {
  width: 101%;
  opacity: 1;
}

.btn-theme.btn-rotate {
  overflow: hidden;
}

.btn-theme.btn-rotate:after {
  width: 100%;
  height: 0;
  top: 50%;
  left: 50%;
  background-color: #628a14;
  opacity: 0;
  -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.btn-theme.btn-rotate:hover:after {
  height: 260%;
  opacity: 1;
}

.btn-theme.btn-rotate:active:after {
  height: 400%;
  opacity: 1;
}

.btn-theme.btn-open {
  overflow: hidden;
}

.btn-theme.btn-open:after {
  width: 101%;
  height: 0;
  top: 50%;
  left: 50%;
  background-color: #628a14;
  opacity: 0;
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.btn-theme.btn-open:hover:after {
  height: 75%;
  opacity: 1;
}

.btn-theme.btn-open:active:after {
  height: 130%;
  opacity: 1;
}

.btn-theme.btn-push {
  background: #81B71A;
  box-shadow: 0 6px #628a14;
  -moz-transition: none;
  -o-transition: none;
  -webkit-transition: none;
  transition: none;
}

.btn-theme.btn-push:hover {
  box-shadow: 0 4px #628a14;
  top: 2px;
}

.btn-theme.btn-push:active {
  box-shadow: 0 0 #628a14;
  top: 6px;
}

.btn-theme.btn-pushright {
  background: #81B71A;
  box-shadow: 6px 0 #628a14;
  -moz-transition: none;
  -o-transition: none;
  -webkit-transition: none;
  transition: none;
}

.btn-theme.btn-pushright:hover {
  box-shadow: 4px 0 #628a14;
  left: 2px;
}

.btn-theme.btn-pushright:active {
  box-shadow: 0 0 #628a14;
  left: 6px;
}

/* ========================================================================
 * PANEL
 * ======================================================================== */

.panel-theme > .panel-heading {
  background-color: #81B71A;
  border: 1px solid #7eb319;
  color: white;
}

.panel-theme > .panel-heading .option .btn:hover {
  background-color: #71a117;
  color: white;
}

.panel-theme > .panel-heading .option .btn i {
  color: white;
}

.panel-bg-theme .panel-body {
  background-color: #81B71A;
  color: white;
}

.panel-bg-theme .panel-body .text-muted {
  color: #f2f2f2;
}

/* ========================================================================
 * MISC
 * ======================================================================== */

.img-bordered-theme {
  border: 2px solid #81B71A;
}

.progress-bar-theme {
  background-color: #81B71A;
}

.fg-theme {
  color: #81B71A !important;
}

.nicescroll-rails div {
  background-color: #81B71A !important;
}

.sidebar .nicescroll-rails div {
  background-color: #323232 !important;
}

.cal-month-box {
  border-top: 7px solid #6b9816 !important;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

.cal-row-head [class*="cal-cell1"],
.cal-row-head [class*="cal-cell"] {
  background-color: #81B71A;
  color: #FFFFFF;
  border-width: 0px 1px 0px !important;
  border-style: solid;
  border-color: #91cd1d #91cd1d #6b9816 !important;
  border-left: none !important;
}

.cal-row-head [class*="cal-cell1"]:hover,
.cal-row-head [class*="cal-cell"]:hover {
  background-color: #81B71A !important;
}

.cal-row-head [class*="cal-cell1"]:first-child,
.cal-row-head [class*="cal-cell"]:first-child {
  border-width: 0px 1px 0px !important;
  border-style: solid;
  border-color: #91cd1d #91cd1d #6b9816 !important;
}

.cal-row-head [class*="cal-cell1"]:last-child,
.cal-row-head [class*="cal-cell"]:last-child {
  border-right: none !important;
}

#cal-day-panel {
  border-top: 7px solid #6b9816 !important;
  background-color: rgba(255, 255, 255, 0.28);
}

.cal-day-today {
  background-color: #81B71A !important;
}

.cal-row-head + .cal-day-hour {
  background-color: #6b9816 !important;
  color: #FFFFFF;
}

.bg-theme {
  background-color: #81B71A !important;
  border: 1px solid #81B71A;
  color: white;
}

.bg-theme a,
.bg-theme i,
.bg-theme span,
.bg-theme small,
.bg-theme p {
  color: white;
}

.bg-theme .flot-tick-label.tickLabel {
  color: rgba(255, 255, 255, 0.5) !important;
}

.bg-theme .morris-hover-row-label {
  background-color: #628a14;
}

#back-top:hover {
  background: #81B71A;
  box-shadow: 0 0 0 6px #FFFFFF;
}

.jqvmap-zoomin,
.jqvmap-zoomout {
  background: #81B71A !important;
}

.jqvmap-zoomin:hover,
.jqvmap-zoomout:hover {
  background: #628a14 !important;
}

/* ========================================================================
 * CHOSEN
 * ======================================================================== */

.chosen-container .chosen-results li.highlighted {
  background-color: #81B71A !important;
  background-image: none !important;
}

/* ========================================================================
 * DROPZONE
 * ======================================================================== */

.dz-file-preview .dz-details:before {
  color: #81B71A;
}

/* ========================================================================
 * JPRELOADER
 * ======================================================================== */

#jpreBar {
  background-color: #81B71A;
}

/* ========================================================================
 * DATEPICKER
 * ======================================================================== */

.datepicker table thead tr:first-child {
  background-color: #81B71A;
}

.datepicker table thead tr:last-child {
  background-color: #628a14;
}

.datepicker table thead tr th {
  background-color: #81B71A;
  border-color: #71a117 #71a117 #6b9816;
}

.datepicker table thead tr .prev:hover,
.datepicker table thead tr .switch:hover,
.datepicker table thead tr .next:hover {
  background-color: #71a117 !important;
}

.datepicker table tbody tr td.active,
.datepicker table tbody tr td.active:hover,
.datepicker table tbody tr td.active:disabled,
.datepicker table tbody tr td.active.disabled:hover {
  background-color: #81B71A;
}

.datepicker table tbody tr td.active.active {
  background-color: #81B71A;
}

.datepicker table tbody tr td.active.active:hover {
  background-color: #628a14;
}

.datepicker .icon-arrow-left:before {
  font-family: "FontAwesome";
  content: "\f104";
}

.datepicker .icon-arrow-right:before {
  font-family: "FontAwesome";
  content: "\f105";
}

.datepicker-dropdown:after {
  border-bottom: 6px solid #81B71A;
}

/* ========================================================================
 * ION SLIDER
 * ======================================================================== */

.slider-theme .irs-diapason {
  background-color: #91cd1d !important;
}

.slider-theme .irs-slider {
  background-color: #81B71A !important;
}

.slider-theme #irs-active-slider,
.slider-theme .irs-slider:hover {
  background-color: #81B71A !important;
}

.slider-theme .irs-from,
.slider-theme .irs-to,
.slider-theme .irs-single {
  background-color: #81B71A !important;
}

.slider-theme .irs-from:after,
.slider-theme .irs-to:after,
.slider-theme .irs-single:after {
  border-top-color: #81B71A !important;
}

.slider-theme .circle .irs-slider {
  top: 21px;
  width: 20px;
  height: 20px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.slider-theme .donut .irs-slider {
  background: #e1e4e9 !important;
  top: 21px;
  width: 20px;
  height: 20px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  border: 4px solid #81B71A;
  margin-left: -3px;
}
/* ========================================================================
 * TABLE OF CONTENTS
 * ========================================================================
 
 * ========================================================================
 * LAYOUT
 * ========================================================================
   01. HEADER
   02. SIDEBAR LEFT & RIGHT
   03. PAGE CONTENT
 * ========================================================================
 
 * ========================================================================
 * PAGES
 * ========================================================================
   01. SIGN
   02. ERROR
   03. INVOICE
 * ========================================================================
 
 * ========================================================================
 * COMPONENT
 * ========================================================================
   01. RESET
   02. PANEL
   03. MEDIA MANAGER
   04. PAGINATION
   05. RATING STAR
   06. DROPDOWN
   07. LIST GROUP
   08. FORM
   09. TABLE
   10. BUTTON
   11. MISC
 * ========================================================================
 
 * ========================================================================
 * PLUGINS
 * ========================================================================
   01. CHOSEN
   02. DROPZONE
   03. JPRELOADER
   04. DATEPICKER
   05. ION SLIDER
 * ======================================================================== */

/* ========================================================================
 * HEADER
 * ======================================================================== */

body.page-sidebar-minimize #header .navbar-minimize > a {
  background-color: #a90329;
  color: #ffffff;
}

body.page-sidebar-minimize #header .navbar-minimize:hover > a {
  background-color: #900323;
}

#header .navbar-header {
  background-color: #a90329;
}

/* ========================================================================
 * SIDEBAR LEFT & RIGHT
 * ======================================================================== */

#sidebar-left.sidebar-box .sidebar-content img,
#sidebar-left.sidebar-rounded .sidebar-content img,
#sidebar-left.sidebar-circle .sidebar-content img {
  border: 2px solid #a90329;
}

#sidebar-left.sidebar-box .sidebar-menu > li.active > a > .icon i,
#sidebar-left.sidebar-rounded .sidebar-menu > li.active > a > .icon i,
#sidebar-left.sidebar-circle .sidebar-menu > li.active > a > .icon i {
  background-color: #a90329;
}

#sidebar-left.sidebar-box .sidebar-menu > li > ul > li:hover:after,
#sidebar-left.sidebar-rounded .sidebar-menu > li > ul > li:hover:after,
#sidebar-left.sidebar-circle .sidebar-menu > li > ul > li:hover:after {
  -webkit-box-shadow: 0 0 0 5px #77021d;
  -moz-box-shadow: 0 0 0 5px #77021d;
  box-shadow: 0 0 0 5px #77021d;
}

#sidebar-left .sidebar-menu ul li:hover:after {
  background-color: #a90329;
}

#sidebar-left .sidebar-menu ul li:hover a:before {
  color: #a90329;
}

#sidebar-left .sidebar-menu ul li.active:after {
  background-color: #a90329;
}

#sidebar-left .sidebar-menu ul li.active > ul > li.active a:before {
  color: #a90329;
}

/* ========================================================================
 * PAGE CONTENT
 * ======================================================================== */

body.page-sidebar-minimize .navbar-minimize,
body.page-sidebar-minimize-auto .navbar-minimize {
  border-right: 1px solid #a90329 !important;
}

body.page-sidebar-minimize .navbar-minimize a,
body.page-sidebar-minimize-auto .navbar-minimize a {
  background-color: #a90329;
  border-bottom: 1px solid #a90329;
}

body.page-sidebar-minimize .navbar-minimize a:hover,
body.page-sidebar-minimize-auto .navbar-minimize a:hover {
  background-color: #900323;
  border-bottom: 1px solid #900323;
}

body.page-sidebar-minimize .navbar-minimize a i,
body.page-sidebar-minimize-auto .navbar-minimize a i {
  color: #ffffff;
}

.navbar-minimize-mobile {
  background-color: #a90329;
}

.navbar-minimize-mobile:hover {
  background-color: #900323;
}

@media (max-width: 768px) {
  body.page-sidebar-left-show .navbar-minimize-mobile,
  body.page-sidebar-right-show .navbar-minimize-mobile {
    background-color: #77021d;
  }

  body.page-sidebar-left-show .navbar-minimize-mobile:hover,
  body.page-sidebar-right-show .navbar-minimize-mobile:hover {
    background-color: #900323;
  }
}

.navbar-toolbar .navbar-form input:focus {
  border: 1px solid #a90329;
}

.navbar-toolbar .navbar-form .btn-focus {
  background-color: #a90329;
  box-shadow: none;
  border: none;
  color: #ffffff;
}

.navbar-toolbar .navbar-right .dropdown > a:focus > i {
  color: #a90329;
}

/* ========================================================================
 * SIGN
 * ======================================================================== */

.sign-wrapper a {
  color: #a90329;
}

.sign-wrapper a:hover,
.sign-wrapper a:focus,
.sign-wrapper a:active {
  color: #a40328;
}

.sign-text:before {
  background-color: #db0435;
}

.sign-header {
  background-color: #a90329;
  border-bottom: 10px solid #860220;
}

.sign-text span {
  background-color: #a90329;
}

.sign-text img {
  border: 7px solid #a90329;
}

/* ========================================================================
 * ERROR
 * ======================================================================== */

.error-wrapper h1 {
  color: #a90329;
}

/* ========================================================================
 * INVOICE
 * ======================================================================== */

.product-num {
  background-color: #a90329;
}

/* ========================================================================
 * RESET
 * ======================================================================== */

a {
  color: #a90329;
}

a:hover,
a:active,
a:focus {
  color: #77021d;
}

input.no-border-left:focus,
textarea.no-border-left:focus {
  border-top: 1px solid #a90329 !important;
  border-right: 1px solid #a90329 !important;
  border-bottom: 1px solid #a90329 !important;
  border-left: none !important;
}

input.no-border-right:focus,
textarea.no-border-right:focus {
  border-top: 1px solid #a90329 !important;
  border-none: 1px solid #a90329 !important;
  border-bottom: 1px solid #a90329 !important;
  border-right: none !important;
}

input:focus,
textarea:focus {
  border: 1px solid #a90329 !important;
}

/* ========================================================================
 * PANEL
 * ======================================================================== */

.panel-tab .panel-heading ul li.active a i {
  color: #a90329;
}

.panel-tab .panel-heading ul li a:hover i {
  color: #a90329;
}

/* ========================================================================
 * MEDIA MANAGER
 * ======================================================================== */

.media-manager .media-manager-options .filter-type a.active {
  color: #a90329;
}

/* ========================================================================
 * PAGINATION
 * ======================================================================== */

.pagination > li > a {
  color: #77021d;
}

.pagination > .active > a,
.pagination > .active > span {
  background-color: #77021d;
  border: 1px solid #77021d;
}

.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  background-color: #a90329;
  border: 1px solid #a90329;
}

.pager > li > a {
  color: #77021d;
}

/* ========================================================================
 * RATING STAR
 * ======================================================================== */

.rating .star:hover:before {
  color: #a90329;
}

.rating .star.active:before {
  color: #a90329;
}

.rating .star.active ~ .star:before {
  color: #a90329;
}

/* ========================================================================
 * DROPDOWN
 * ======================================================================== */

.dropdown-menu li {
  position: relative;
}

.dropdown-menu li.active a {
  background-color: #a90329;
}

.dropdown-menu li.active:hover a,
.dropdown-menu li.active:focus a,
.dropdown-menu li.active:active a {
  background-color: #a90329;
  cursor: default;
}

.dropdown-menu li > a:hover:before {
  display: block;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0px;
  border-left: 3px solid #900323;
}

/* ========================================================================
 * LIST GROUP
 * ======================================================================== */

a.list-group-item.active {
  background-color: #a90329;
  border-color: #a90329;
}

a.list-group-item.active:hover,
a.list-group-item.active:focus {
  background-color: #a90329;
  border-color: #a90329;
}

/* ========================================================================
 * FORM
 * ======================================================================== */

.ckbox-theme input[type=checkbox]:checked + label::after {
  border-color: #a90329;
  background-color: #a90329;
}

.ckbox-theme input[type=checkbox][disabled]:checked + label::after {
  border-color: #a90329;
  opacity: .5;
}

.rdio-theme input[type=radio]:checked + label::after {
  border-color: #a90329;
  background-color: #a90329;
}

.rdio-theme input[type=radio][disabled]:checked + label::after {
  border-color: #a90329;
  opacity: .5;
}

.form-control:focus {
  border: 1px solid #a90329;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.form-focus {
  border: 1px solid #a90329;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

/* ========================================================================
 * TABLE
 * ======================================================================== */

.table-theme thead tr th {
  background-color: #a90329 !important;
  border-color: #c2032f #c2032f #860220 !important;
  color: #fff;
}

.table-theme tbody tr td.sorting_1 {
  background: #ea0439 !important;
  color: white;
  border-bottom: 1px solid #fb174b !important;
}

.table-theme tfoot tr th {
  background-color: #a90329 !important;
  border-color: #860220 #c2032f #c2032f !important;
  color: #fff;
}

.table-theme.table-bordered {
  border: 1px solid #a90329;
}

.table-theme.table-bordered thead tr th:first-child,
.table-theme.table-bordered tfoot tr th:first-child,
.table-theme.table-bordered thead tr th:last-child,
.table-theme.table-bordered tfoot tr th:last-child {
  -webkit-border-radius: 0px !important;
  -moz-border-radius: 0px !important;
  border-radius: 0px !important;
}

.table-theme.table-bordered tbody tr td.sorting_1 {
  border-right: 1px solid #fb174b !important;
}

.table-theme table.has-columns-hidden > tbody > tr > td > span.responsiveExpander:before {
  color: white;
}

.table-theme table.has-columns-hidden > tbody > tr.detail-show > td span.responsiveExpander:before {
  color: white;
}

/* ========================================================================
 * BUTTON
 * ======================================================================== */

.btn-theme {
  background-color: #a90329;
  border-color: #a90329;
  color: white;
}

.btn-theme:hover,
.btn-theme:focus,
.btn-theme:active,
.btn-theme.active,
.btn-theme[disabled],
.btn-theme.disabled {
  background-color: #900323;
  border-color: transparent;
  color: white;
}

.btn-theme.dropdown-toggle.btn-theme {
  background-color: #a90329;
  border-color: #900323;
  color: white;
}

.btn-theme.btn-alt {
  background-color: #900323;
  border: 1px solid #a90329;
}

.btn-theme.btn-alt:hover {
  background-color: #77021d;
}

.btn-theme.btn-stroke {
  border: 1px double #a90329;
  background-color: transparent;
  color: #999;
}

.btn-theme.btn-stroke:hover {
  background-color: #900323;
  border-color: transparent;
  color: white;
}

.btn-theme.btn-solid {
  border: 1px solid #a90329;
}

.btn-theme.btn-dashed {
  border: 1px dashed #a90329;
}

.btn-theme.btn-dotted {
  border: 1px dotted #a90329;
}

.btn-theme.btn-double {
  border: 4px double #a90329;
}

.btn-theme.btn-inset {
  border: 4px inset #a90329;
}

.btn-theme.btn-circle {
  padding-left: 0;
  padding-right: 0;
  width: 34px;
  -webkit-border-radius: 50% 50% 50% 50%;
  -moz-border-radius: 50% 50% 50% 50%;
  border-radius: 50% 50% 50% 50%;
}

.btn-theme.btn-slidedown:after {
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  background-color: #77021d;
  z-index: -1;
}

.btn-theme.btn-slidedown:hover,
.btn-theme.btn-slidedown:active {
  color: white;
}

.btn-theme.btn-slidedown:hover:after,
.btn-theme.btn-slidedown:active:after {
  height: 100%;
}

.btn-theme.btn-slideright:after {
  width: 0%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #77021d;
  z-index: -1;
}

.btn-theme.btn-slideright:hover,
.btn-theme.btn-slideright:active {
  color: white;
}

.btn-theme.btn-slideright:hover:after,
.btn-theme.btn-slideright:active:after {
  width: 100%;
}

.btn-theme.btn-expand:after {
  width: 0;
  height: 103%;
  top: 50%;
  left: 50%;
  background-color: #77021d;
  opacity: 0;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.btn-theme.btn-expand:hover:after {
  width: 90%;
  opacity: 1;
}

.btn-theme.btn-expand:active:after {
  width: 101%;
  opacity: 1;
}

.btn-theme.btn-rotate {
  overflow: hidden;
}

.btn-theme.btn-rotate:after {
  width: 100%;
  height: 0;
  top: 50%;
  left: 50%;
  background-color: #77021d;
  opacity: 0;
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -o-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.btn-theme.btn-rotate:hover:after {
  height: 260%;
  opacity: 1;
}

.btn-theme.btn-rotate:active:after {
  height: 400%;
  opacity: 1;
}

.btn-theme.btn-open {
  overflow: hidden;
}

.btn-theme.btn-open:after {
  width: 101%;
  height: 0;
  top: 50%;
  left: 50%;
  background-color: #77021d;
  opacity: 0;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.btn-theme.btn-open:hover:after {
  height: 75%;
  opacity: 1;
}

.btn-theme.btn-open:active:after {
  height: 130%;
  opacity: 1;
}

.btn-theme.btn-push {
  background: #a90329;
  box-shadow: 0 6px #77021d;
  -webkit-transition: none;
  -moz-transition: none;
  transition: none;
}

.btn-theme.btn-push:hover {
  box-shadow: 0 4px #77021d;
  top: 2px;
}

.btn-theme.btn-push:active {
  box-shadow: 0 0 #77021d;
  top: 6px;
}

.btn-theme.btn-pushright {
  background: #a90329;
  box-shadow: 6px 0 #77021d;
  -webkit-transition: none;
  -moz-transition: none;
  transition: none;
}

.btn-theme.btn-pushright:hover {
  box-shadow: 4px 0 #77021d;
  left: 2px;
}

.btn-theme.btn-pushright:active {
  box-shadow: 0 0 #77021d;
  left: 6px;
}

/* ========================================================================
 * PANEL
 * ======================================================================== */

.panel-theme .panel-heading {
  background-color: #a90329;
  border: 1px solid #a40328;
  color: white;
}

.panel-theme .panel-heading .option .btn:hover {
  background-color: #900323;
  color: white;
}

.panel-theme .panel-heading .option .btn i {
  color: white;
}

.panel-bg-theme .panel-body {
  background-color: #a90329;
  color: white;
}

.panel-bg-theme .panel-body .text-muted {
  color: #f2f2f2;
}

/* ========================================================================
 * MISC
 * ======================================================================== */

.img-bordered-theme {
  border: 2px solid #a90329;
}

.progress-bar-theme {
  background-color: #a90329;
}

.fg-theme {
  color: #a90329 !important;
}

.nicescroll-rails div {
  background-color: #a90329 !important;
}

.sidebar .nicescroll-rails div {
  background-color: #323232 !important;
}

.cal-month-box {
  border-top: 7px solid #860220 !important;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}

.cal-row-head [class*="cal-cell1"],
.cal-row-head [class*="cal-cell"] {
  background-color: #a90329;
  color: #ffffff;
  border-width: 0px 1px 0px !important;
  border-style: solid;
  border-color: #c2032f #c2032f #860220 !important;
  border-left: none !important;
}

.cal-row-head [class*="cal-cell1"]:hover,
.cal-row-head [class*="cal-cell"]:hover {
  background-color: #a90329 !important;
}

.cal-row-head [class*="cal-cell1"]:first-child,
.cal-row-head [class*="cal-cell"]:first-child {
  border-width: 0px 1px 0px !important;
  border-style: solid;
  border-color: #c2032f #c2032f #860220 !important;
}

.cal-row-head [class*="cal-cell1"]:last-child,
.cal-row-head [class*="cal-cell"]:last-child {
  border-right: none !important;
}

#cal-day-panel {
  border-top: 7px solid #860220 !important;
  background-color: rgba(255, 255, 255, 0.28);
}

.cal-day-today {
  background-color: #a90329 !important;
}

.cal-row-head + .cal-day-hour {
  background-color: #860220 !important;
  color: #ffffff;
}

.bg-theme {
  background-color: #a90329 !important;
  border: 1px solid #a90329;
  color: white;
}

.bg-theme a,
.bg-theme i,
.bg-theme span,
.bg-theme small,
.bg-theme p {
  color: white;
}

.bg-theme .flot-tick-label.tickLabel {
  color: rgba(255, 255, 255, 0.5) !important;
}

.bg-theme .morris-hover-row-label {
  background-color: #77021d;
}

#back-top:hover {
  background: #a90329;
  box-shadow: 0 0 0 6px #ffffff;
}

.jqvmap-zoomin,
.jqvmap-zoomout {
  background: #a90329 !important;
}

.jqvmap-zoomin:hover,
.jqvmap-zoomout:hover {
  background: #77021d !important;
}

/* ========================================================================
 * CHOSEN
 * ======================================================================== */

.chosen-container .chosen-results li.highlighted {
  background-color: #a90329 !important;
  background-image: none !important;
}

/* ========================================================================
 * DROPZONE
 * ======================================================================== */

.dz-file-preview .dz-details:before {
  color: #a90329;
}

/* ========================================================================
 * JPRELOADER
 * ======================================================================== */

#jpreBar {
  background-color: #a90329;
}

/* ========================================================================
 * DATEPICKER
 * ======================================================================== */

.datepicker table thead tr:first-child {
  background-color: #a90329;
}

.datepicker table thead tr:last-child {
  background-color: #77021d;
}

.datepicker table thead tr th {
  background-color: #a90329;
  border-color: #900323 #900323 #860220;
}

.datepicker table thead tr .prev:hover,
.datepicker table thead tr .switch:hover,
.datepicker table thead tr .next:hover {
  background-color: #900323 !important;
}

.datepicker table tbody tr td.active,
.datepicker table tbody tr td.active:hover,
.datepicker table tbody tr td.active:disabled,
.datepicker table tbody tr td.active.disabled:hover {
  background-color: #a90329;
}

.datepicker table tbody tr td.active.active {
  background-color: #a90329;
}

.datepicker table tbody tr td.active.active:hover {
  background-color: #77021d;
}

.datepicker .icon-arrow-left:before {
  font-family: "FontAwesome";
  content: "\f104";
}

.datepicker .icon-arrow-right:before {
  font-family: "FontAwesome";
  content: "\f105";
}

.datepicker-dropdown:after {
  border-bottom: 6px solid #a90329;
}

/* ========================================================================
 * ION SLIDER
 * ======================================================================== */

.slider-theme .irs-diapason {
  background-color: #c2032f !important;
}

.slider-theme .irs-slider {
  background-color: #a90329 !important;
}

.slider-theme #irs-active-slider,
.slider-theme .irs-slider:hover {
  background-color: #a90329 !important;
}

.slider-theme .irs-from,
.slider-theme .irs-to,
.slider-theme .irs-single {
  background-color: #a90329 !important;
}

.slider-theme .irs-from:after,
.slider-theme .irs-to:after,
.slider-theme .irs-single:after {
  border-top-color: #a90329 !important;
}

.slider-theme.circle .irs-slider {
  top: 21px;
  width: 20px;
  height: 20px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

.slider-theme.donut .irs-slider {
  background: #e1e4e9 !important;
  top: 21px;
  width: 20px;
  height: 20px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 4px solid #a90329;
  margin-left: -3px;
}
/* Create your style on here */
/* ========================================================================
 * ACCORDION
 * ======================================================================== */

.ng-accordion .panel-group {
  margin-bottom: 0;
}

.ng-accordion .panel-group .panel .panel-heading {
  border-bottom: none;
}

/* ========================================================================
 * FRONTEND THEMES PAGE
 * ======================================================================== */

.list-frontend-theme .image-scroll.landing-page {
  background-image: url("../../../img/frontend-themes/start-page.jpg");
}

.list-frontend-theme .image-scroll.corporate {
  background-image: url("../../../img/frontend-themes/start-page.jpg");
}

.list-frontend-theme .image-scroll.portfolio {
  background-image: url("../../../img/frontend-themes/start-page.jpg");
}

.list-frontend-theme .image-scroll.personal-cv {
  background-image: url("../../../img/frontend-themes/start-page.jpg");
}

.list-frontend-theme .image-scroll.agency {
  background-image: url("../../../img/frontend-themes/start-page.jpg");
}

.list-frontend-theme .image-scroll.blog {
  background-image: url("../../../img/frontend-themes/start-page.jpg");
}

.list-frontend-theme .image-scroll.shop {
  background-image: url("../../../img/frontend-themes/start-page.jpg");
}

.list-frontend-theme .image-scroll .image-ribbon {
  background: url("../../../img/frontend-themes/ribbon.png") no-repeat scroll right top transparent;
}

/* ========================================================================
 * LOADING BAR
 * ======================================================================== */

#loading-bar .bar {
  background: #A90329;
  height: 4px;
}

#loading-bar-spinner .spinner-icon {
  width: 18px;
  height: 18px;
  border: solid 4px transparent;
  border-top-color: #f4043b;
  border-left-color: #f4043b;
}

/* ========================================================================
 * MISC
 * ======================================================================== */

.ng-leave {
  display: none;
}
/*
Version: 3.4.8 Timestamp: Thu May  1 09:50:32 EDT 2014
*/

.select2-container {
  margin: 0;
  position: relative;
  display: inline-block;
  /* inline-block for ie7 */
  zoom: 1;
  *display: inline;
  vertical-align: middle;
}

.select2-container,
.select2-drop,
.select2-search,
.select2-search input {
  /*
    Force border-box so that % widths fit the parent
    container without overlap because of margin/padding.
    More Info : http://www.quirksmode.org/css/box.html
  */
  -webkit-box-sizing: border-box;
  /* webkit */
  -moz-box-sizing: border-box;
  /* firefox */
  box-sizing: border-box;
  /* css3 */
}

.select2-container .select2-choice {
  display: block;
  height: 26px;
  padding: 0 0 0 8px;
  overflow: hidden;
  position: relative;
  border: 1px solid #aaa;
  white-space: nowrap;
  line-height: 26px;
  color: #444;
  text-decoration: none;
  border-radius: 4px;
  background-clip: padding-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #fff;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.5, #fff));
  background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 50%);
  background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 50%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0);
  background-image: linear-gradient(to top, #eee 0%, #fff 50%);
}

.select2-container.select2-drop-above .select2-choice {
  border-bottom-color: #aaa;
  border-radius: 0 0 4px 4px;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.9, #fff));
  background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 90%);
  background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 90%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0);
  background-image: linear-gradient(to bottom, #eee 0%, #fff 90%);
}

.select2-container.select2-allowclear .select2-choice .select2-chosen {
  margin-right: 42px;
}

.select2-container .select2-choice > .select2-chosen {
  margin-right: 26px;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  float: none;
  width: auto;
}

.select2-container .select2-choice abbr {
  display: none;
  width: 12px;
  height: 12px;
  position: absolute;
  right: 24px;
  top: 8px;
  font-size: 1px;
  text-decoration: none;
  border: 0;
  background: url('select2.png') right top no-repeat;
  cursor: pointer;
  outline: 0;
}

.select2-container.select2-allowclear .select2-choice abbr {
  display: inline-block;
}

.select2-container .select2-choice abbr:hover {
  background-position: right -11px;
  cursor: pointer;
}

.select2-drop-mask {
  border: 0;
  margin: 0;
  padding: 0;
  position: fixed;
  left: 0;
  top: 0;
  min-height: 100%;
  min-width: 100%;
  height: auto;
  width: auto;
  opacity: 0;
  z-index: 9998;
  /* styles required for IE to work */
  background-color: #fff;
  filter: alpha(opacity=0);
}

.select2-drop {
  width: 100%;
  margin-top: -1px;
  position: absolute;
  z-index: 9999;
  top: 100%;
  background: #fff;
  color: #000;
  border: 1px solid #aaa;
  border-top: 0;
  border-radius: 0 0 4px 4px;
  -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
  box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
}

.select2-drop.select2-drop-above {
  margin-top: 1px;
  border-top: 1px solid #aaa;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  -webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
  box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
}

.select2-drop-active {
  border: 1px solid #5897fb;
  border-top: none;
}

.select2-drop.select2-drop-above.select2-drop-active {
  border-top: 1px solid #5897fb;
}

.select2-drop-auto-width {
  border-top: 1px solid #aaa;
  width: auto;
}

.select2-drop-auto-width .select2-search {
  padding-top: 4px;
}

.select2-container .select2-choice .select2-arrow {
  display: inline-block;
  width: 18px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  border-left: 1px solid #aaa;
  border-radius: 0 4px 4px 0;
  background-clip: padding-box;
  background: #ccc;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee));
  background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%);
  background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#cccccc', GradientType = 0);
  background-image: linear-gradient(to top, #ccc 0%, #eee 60%);
}

.select2-container .select2-choice .select2-arrow b {
  display: block;
  width: 100%;
  height: 100%;
  background: url('select2.png') no-repeat 0 1px;
}

.select2-search {
  display: inline-block;
  width: 100%;
  min-height: 26px;
  margin: 0;
  padding-left: 4px;
  padding-right: 4px;
  position: relative;
  z-index: 10000;
  white-space: nowrap;
}

.select2-search input {
  width: 100%;
  height: auto !important;
  min-height: 26px;
  padding: 4px 20px 4px 5px;
  margin: 0;
  outline: 0;
  font-family: sans-serif;
  font-size: 1em;
  border: 1px solid #aaa;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: #fff url('select2.png') no-repeat 100% -22px;
  background: url('select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee));
  background: url('select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%);
  background: url('select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%);
  background: url('select2.png') no-repeat 100% -22px, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0;
}

.select2-drop.select2-drop-above .select2-search input {
  margin-top: 4px;
}

.select2-search input.select2-active {
  background: #fff url('select2-spinner.gif') no-repeat 100%;
  background: url('select2-spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee));
  background: url('select2-spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%);
  background: url('select2-spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%);
  background: url('select2-spinner.gif') no-repeat 100%, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0;
}

.select2-container-active .select2-choice,
.select2-container-active .select2-choices {
  border: 1px solid #5897fb;
  outline: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3);
  box-shadow: 0 0 5px rgba(0, 0, 0, .3);
}

.select2-dropdown-open .select2-choice {
  border-bottom-color: transparent;
  -webkit-box-shadow: 0 1px 0 #fff inset;
  box-shadow: 0 1px 0 #fff inset;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background-color: #eee;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #fff), color-stop(0.5, #eee));
  background-image: -webkit-linear-gradient(center bottom, #fff 0%, #eee 50%);
  background-image: -moz-linear-gradient(center bottom, #fff 0%, #eee 50%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0);
  background-image: linear-gradient(to top, #fff 0%, #eee 50%);
}

.select2-dropdown-open.select2-drop-above .select2-choice,
.select2-dropdown-open.select2-drop-above .select2-choices {
  border: 1px solid #5897fb;
  border-top-color: transparent;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(0.5, #eee));
  background-image: -webkit-linear-gradient(center top, #fff 0%, #eee 50%);
  background-image: -moz-linear-gradient(center top, #fff 0%, #eee 50%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0);
  background-image: linear-gradient(to bottom, #fff 0%, #eee 50%);
}

.select2-dropdown-open .select2-choice .select2-arrow {
  background: transparent;
  border-left: none;
  filter: none;
}

.select2-dropdown-open .select2-choice .select2-arrow b {
  background-position: -18px 1px;
}

.select2-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* results */

.select2-results {
  max-height: 200px;
  padding: 0 0 0 4px;
  margin: 4px 4px 4px 0;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.select2-results ul.select2-result-sub {
  margin: 0;
  padding-left: 0;
}

.select2-results li {
  list-style: none;
  display: list-item;
  background-image: none;
}

.select2-results li.select2-result-with-children > .select2-result-label {
  font-weight: bold;
}

.select2-results .select2-result-label {
  padding: 3px 7px 4px;
  margin: 0;
  cursor: pointer;
  min-height: 1em;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.select2-results-dept-1 .select2-result-label {
  padding-left: 20px;
}

.select2-results-dept-2 .select2-result-label {
  padding-left: 40px;
}

.select2-results-dept-3 .select2-result-label {
  padding-left: 60px;
}

.select2-results-dept-4 .select2-result-label {
  padding-left: 80px;
}

.select2-results-dept-5 .select2-result-label {
  padding-left: 100px;
}

.select2-results-dept-6 .select2-result-label {
  padding-left: 110px;
}

.select2-results-dept-7 .select2-result-label {
  padding-left: 120px;
}

.select2-results .select2-highlighted {
  background: #3875d7;
  color: #fff;
}

.select2-results li em {
  background: #feffde;
  font-style: normal;
}

.select2-results .select2-highlighted em {
  background: transparent;
}

.select2-results .select2-highlighted ul {
  background: #fff;
  color: #000;
}

.select2-results .select2-no-results,
.select2-results .select2-searching,
.select2-results .select2-selection-limit {
  background: #f4f4f4;
  display: list-item;
  padding-left: 5px;
}

/*
disabled look for disabled choices in the results dropdown
*/

.select2-results .select2-disabled.select2-highlighted {
  color: #666;
  background: #f4f4f4;
  display: list-item;
  cursor: default;
}

.select2-results .select2-disabled {
  background: #f4f4f4;
  display: list-item;
  cursor: default;
}

.select2-results .select2-selected {
  display: none;
}

.select2-more-results.select2-active {
  background: #f4f4f4 url('select2-spinner.gif') no-repeat 100%;
}

.select2-more-results {
  background: #f4f4f4;
  display: list-item;
}

/* disabled styles */

.select2-container.select2-container-disabled .select2-choice {
  background-color: #f4f4f4;
  background-image: none;
  border: 1px solid #ddd;
  cursor: default;
}

.select2-container.select2-container-disabled .select2-choice .select2-arrow {
  background-color: #f4f4f4;
  background-image: none;
  border-left: 0;
}

.select2-container.select2-container-disabled .select2-choice abbr {
  display: none;
}

/* multiselect */

.select2-container-multi .select2-choices {
  height: auto !important;
  height: 1%;
  margin: 0;
  padding: 0;
  position: relative;
  border: 1px solid #aaa;
  cursor: text;
  overflow: hidden;
  background-color: #fff;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eee), color-stop(15%, #fff));
  background-image: -webkit-linear-gradient(top, #eee 1%, #fff 15%);
  background-image: -moz-linear-gradient(top, #eee 1%, #fff 15%);
  background-image: linear-gradient(to bottom, #eee 1%, #fff 15%);
}

.select2-locked {
  padding: 3px 5px 3px 5px !important;
}

.select2-container-multi .select2-choices {
  min-height: 26px;
}

.select2-container-multi.select2-container-active .select2-choices {
  border: 1px solid #5897fb;
  outline: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3);
  box-shadow: 0 0 5px rgba(0, 0, 0, .3);
}

.select2-container-multi .select2-choices li {
  float: left;
  list-style: none;
}

html[dir="rtl"] .select2-container-multi .select2-choices li {
  float: right;
}

.select2-container-multi .select2-choices .select2-search-field {
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.select2-container-multi .select2-choices .select2-search-field input {
  padding: 5px;
  margin: 1px 0;
  font-family: sans-serif;
  font-size: 100%;
  color: #666;
  outline: 0;
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: transparent !important;
}

.select2-container-multi .select2-choices .select2-search-field input.select2-active {
  background: #fff url('select2-spinner.gif') no-repeat 100% !important;
}

.select2-default {
  color: #999 !important;
}

.select2-container-multi .select2-choices .select2-search-choice {
  padding: 3px 5px 3px 18px;
  margin: 3px 0 3px 5px;
  position: relative;
  line-height: 13px;
  color: #333;
  cursor: default;
  border: 1px solid #aaaaaa;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
  background-clip: padding-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #e4e4e4;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#f4f4f4', GradientType=0);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eee));
  background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
  background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
  background-image: linear-gradient(to top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
}

html[dir="rtl"] .select2-container-multi .select2-choices .select2-search-choice {
  margin-left: 0;
  margin-right: 5px;
}

.select2-container-multi .select2-choices .select2-search-choice .select2-chosen {
  cursor: default;
}

.select2-container-multi .select2-choices .select2-search-choice-focus {
  background: #d4d4d4;
}

.select2-search-choice-close {
  display: block;
  width: 12px;
  height: 13px;
  position: absolute;
  right: 3px;
  top: 4px;
  font-size: 1px;
  outline: none;
  background: url('select2.png') right top no-repeat;
}

html[dir="rtl"] .select2-search-choice-close {
  right: auto;
  left: 3px;
}

.select2-container-multi .select2-search-choice-close {
  left: 3px;
}

.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover {
  background-position: right -11px;
}

.select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close {
  background-position: right -11px;
}

/* disabled styles */

.select2-container-multi.select2-container-disabled .select2-choices {
  background-color: #f4f4f4;
  background-image: none;
  border: 1px solid #ddd;
  cursor: default;
}

.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice {
  padding: 3px 5px 3px 5px;
  border: 1px solid #ddd;
  background-image: none;
  background-color: #f4f4f4;
}

.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close {
  display: none;
  background: none;
}

/* end multiselect */

.select2-result-selectable .select2-match,
.select2-result-unselectable .select2-match {
  text-decoration: underline;
}

.select2-offscreen,
.select2-offscreen:focus {
  clip: rect(0 0 0 0) !important;
  width: 1px !important;
  height: 1px !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  outline: 0 !important;
  left: 0px !important;
  top: 0px !important;
}

.select2-display-none {
  display: none;
}

.select2-measure-scrollbar {
  position: absolute;
  top: -10000px;
  left: -10000px;
  width: 100px;
  height: 100px;
  overflow: scroll;
}

/* Retina-ize icons */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 2dppx) {
  .select2-search input,
  .select2-search-choice-close,
  .select2-container .select2-choice abbr,
  .select2-container .select2-choice .select2-arrow b {
    background-image: url('select2x2.png') !important;
    background-repeat: no-repeat !important;
    background-size: 60px 40px !important;
  }

  .select2-search input {
    background-position: 100% -21px !important;
  }
}
/*!
 * Toastr
 * Version 2.0.1
 * Copyright 2012 John Papa and Hans Fjallemark.
 * All Rights Reserved.
 * Use, reproduction, distribution, and modification of this code is subject to the terms and
 * conditions of the MIT license, available at http://www.opensource.org/licenses/mit-license.php
 *
 * Author: John Papa and Hans Fjallemark
 * Project: https://github.com/CodeSeven/toastr
 */

.toast-title {
  font-weight: 700;
}

.toast-message {
  -ms-word-wrap: break-word;
  word-wrap: break-word;
}

.toast-message a,
.toast-message label {
  color: #fff;
}

.toast-message a:hover {
  color: #ccc;
  text-decoration: none;
}

.toast-close-button {
  position: relative;
  right: -.3em;
  top: -.3em;
  float: right;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  -webkit-text-shadow: 0 1px 0 #fff;
  text-shadow: 0 1px 0 #fff;
  opacity: .8;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  filter: alpha(opacity=80);
}

.toast-close-button:focus,
.toast-close-button:hover {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  opacity: .4;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  filter: alpha(opacity=40);
}

button.toast-close-button {
  padding: 0;
  cursor: pointer;
  background: 0 0;
  border: 0;
  -webkit-appearance: none;
}

.toast-top-full-width {
  top: 0;
  right: 0;
  width: 100%;
}

.toast-bottom-full-width {
  bottom: 0;
  right: 0;
  width: 100%;
}

.toast-top-left {
  top: 12px;
  left: 12px;
}

.toast-top-center {
  top: 12px;
}

.toast-top-right {
  top: 12px;
  right: 12px;
}

.toast-bottom-right {
  right: 12px;
  bottom: 12px;
}

.toast-bottom-center {
  bottom: 12px;
}

.toast-bottom-left {
  bottom: 12px;
  left: 12px;
}

.toast-center {
  top: 45%;
}

#toast-container {
  position: fixed;
  z-index: 999999;
}

#toast-container.toast-bottom-center,
#toast-container.toast-center,
#toast-container.toast-top-center {
  width: 100%;
  pointer-events: none;
}

#toast-container.toast-bottom-center>div,
#toast-container.toast-center>div,
#toast-container.toast-top-center>div {
  margin: auto;
  pointer-events: auto;
}

#toast-container.toast-bottom-center>button,
#toast-container.toast-center>button,
#toast-container.toast-top-cente>button {
  pointer-events: auto;
}

#toast-container * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#toast-container>div {
  margin: 0 0 6px;
  padding: 15px 15px 15px 50px;
  width: 300px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background-position: 15px center;
  background-repeat: no-repeat;
  -moz-box-shadow: 0 0 12px #999;
  -webkit-box-shadow: 0 0 12px #999;
  box-shadow: 0 0 12px #999;
  color: #fff;
  opacity: .8;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  filter: alpha(opacity=80);
}

#toast-container>:hover {
  -moz-box-shadow: 0 0 12px #000;
  -webkit-box-shadow: 0 0 12px #000;
  box-shadow: 0 0 12px #000;
  opacity: 1;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  filter: alpha(opacity=100);
  cursor: pointer;
}

#toast-container>.toast-info {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=)!important;
}

#toast-container>.toast-wait {
  background-image: url(data:image/gif;base64,R0lGODlhIAAgAIQAAAQCBISGhMzKzERCROTm5CQiJKyurHx+fPz+/ExOTOzu7Dw+PIyOjCwqLFRWVAwKDIyKjMzOzOzq7CQmJLy6vFRSVPTy9AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJCQAXACwAAAAAIAAgAAAF3eAljmRpnmh6VRSVqLDpIDTixOdUlFSNUDhSQUAT7ES9GnD0SFQAKWItMqr4bqKHVPDI+WiTkaOFFVlrFe83rDrT0qeIjwrT0iLdU0GOiBxhAA4VeSk6QYeIOAsQEAuJKgw+EI8nA18IA48JBAQvFxCXDI8SNAQikV+iiaQIpheWX5mJmxKeF6g0qpQmA4yOu8C7EwYWCgZswRcTFj4KyMAGlwYxDwcHhCXMXxYxBzQHKNo+3DDeCOAn0V/TddbYJA0K48gAEAFQicMWFsfwNA3JSgAIAAFfwIMIL4QAACH5BAkJABoALAAAAAAgACAAhAQCBIyKjERCRMzOzCQiJPTy9DQyNGRmZMTCxOTm5CwqLHx+fBQWFJyenNTW1Pz6/Dw6PGxubAwKDIyOjNTS1CQmJCwuLPz+/Dw+PHRydAAAAAAAAAAAAAAAAAAAAAAAAAXboCaOZGmeaKoxWcSosMkk15W8cZ7VdZaXkcEgQtrxfD9RhHchima1GwlCGUBSFCaFxMrgRtnLFhWujWHhs2nJc8KoVlWGQnEn7/i8XgOwWAB7JwoONQ4KgSQAZRcOgHgSCwsSIhZMNRZ5CzULIgaWF5h4mhecfIQ8jXmQkiODhYeIiRYGjrG2PxgBARi3IhNMAbcCnwI5BAQpAZ8TIwK6vCQVDwUVKL+WzAANTA210g/VJ8OWxQefByQE4dZMzBoInwh4zrtgn2p725YNthUFTNRuGYB3AYGBHCEAACH5BAkJAB0ALAAAAAAgACAAhAQCBISChFRWVMzKzCQiJOTm5GxqbCwuLJSWlPz6/NTW1AwODJSSlGRmZCwqLOzu7HR2dDQ2NAQGBISGhFxaXNTS1CQmJOzq7GxubDQyNKSmpPz+/Nza3AAAAAAAAAAAAAXfYCeOZGmeaKqurHBdAiuP17Zdc0lMAVHWt9yI8LA9fCPB4xEjARoNSWpis01kBpshFahurqzsZosiGpErScMAUO0maKF8Tq/bTQCIQgFp30cQXhB1BHEcXhx0FgkJFiOHVYlzi42AgoRxeRx8fn+en3UABwedKgsBAwMBCygOCjYKDisLFV4VrCUAtVUKpSZdXl8mB8EbByQWcQPFAyYZxccdB7sV0cvBzbmvvG0LBV4FrFTBYCWuNhyyHRTFFB20trh4BxmdYl4YIqepq0IRxRE+IfDCAFQHARo0NGERAgAh+QQJCQAgACwAAAAAIAAgAIUEAgSEgoRMTkzMyswcHhzk5uR0cnQUFhRcXlwsKiz09vQMCgyMiozU1tQkJiR8fnxkZmT8/vwEBgSEhoRcWlzU0tQkIiT08vR0dnQcGhxkYmQ0MjT8+vwMDgyMjozc2twAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAG+UCQcEgsGo/IpHLJXDweC6Z0+IhEHlOjRGIMWLHZoUZx0RQlAajxkFFKFFYFl5m5KNpIySU+X2bIBEoQZBBZGQdMElFhjI2Oj5AgHQEDAw8dQxYeDBaNHRVWVhWYCXsRFwmMXqFWEyAerB6MA6xWA6+xs7URt6VWqIwTu64gDh4eDp6goaORQ5OVAZjO1EgEGhB4RwAYDQ0YAEwIcBEKFEgYrBhLBORxgUYfrB9LELuF8fNDAAaVBuEg7NXCVyRdqHVCGLBiIIQAB1Yc4BXh9uEbwAXuyi2iQI7DuSwHdiFqCEGDtizLRFUDsaGAlQIbVoJYIEDAIiZBAAAh+QQJCQAbACwAAAAAIAAgAIQEAgSMioxcWlz08vQcHhysqqwMDgx8enwsKiykoqRkZmT8+vzEwsQMCgyUlpQkJiS0srQEBgSMjoxcXlz09vQkIiSsrqwUEhQ0MjRsamz8/vwAAAAAAAAAAAAAAAAAAAAF7+AmjmRpnmiqruz2PG0sIssCj4CQJAIgj4/abRNJaI6agu9kCAQaphdJgEQKUIFjgGWsahJYLdf7RTWfLKr3+jsBClVlG5Xb9eb4fImgUBBKDVB4ExRHFGwbGRQLGXMEhUgUfw2QC4IyCmSNDQtHlm2ZXgoiGQsUjW0EnUgLfyKBeYSeiHojfH61uS0GBisVEgEVLRcWRxAXKAgDRwMILMVIECgSVRIrBmS9JtRI1iMVBweuGxerSNolyszOIhjLGs0jEFXSKA8SEkMbcEgWIxfzNBxrw6AKgxIGkM05UOWALhERHJhysOThBgAVWYQAACH5BAkJABkALAAAAAAgACAAhAQGBIyKjERCRMzOzCwuLGRiZPz6/OTm5AwODLSytFRSVNTW1Dw6PHx6fAwKDJSSlERGRNTS1DQyNGxqbPz+/BQSFLy6vFRWVNza3AAAAAAAAAAAAAAAAAAAAAAAAAAAAAXqYCaO5FgFwxBUZeu61ULNFMa+eBvQdJD/owFvFhkBBAwHsBQZUooZyWF2YOQkBNJu6ANMaQeli0AxSEwymi0DcUJeEgPlbEJFAghRe/h+Eeg/Dl9UYks5DF9VhksOAgKFi5GSSwh5kzgVCXIJNxknD5aSCTwJIw8zD5MITpanFKmSCHI8NxUPoJejNKWXLZkznL0vCJ3CxsckDpA/ChYJFzkTBgYTSxc80C4OswbLLhY8Fi/bMwYAJVgl4DTiL9LUJADrFuci1zTZLwD1IwU8BSQuWLCQb1EDHg2QiSDALYvCDAISJLDy8FIIACH5BAkJAB4ALAAAAAAgACAAhAQGBISGhFRSVNTW1CQiJKyqrGRmZOzu7CwuLIyOjGxubPz6/BQSFGRiZOTi5CwqLLy6vDQ2NIyKjFRWVCQmJKyurGxqbPT29DQyNJSSlHRydPz+/BQWFOzq7AAAAAAAAAXhoCeOJElYClGubOs117YtjWuvxCLLi3qbhc6h4FPsdorfiNI5dige43GT9AAkHUcCwCpMNxVP7tgTJY4J1uF7EBl0M8Ooueuo2SOCIkVa11kVX2E2EmgsFH4yBz4uAAkdHVstBAUHQ4xKmZqbnJ2bAhAQAiURGJ4eE0cTIxgzpp0QRxCsrp6xO7MjpaepO6unKxOhv8DFxsfIJBwaChw2DAkZDEocDjIOzi0ZMhlKUjIaLtsb3T8aR+EtDBkJ0yQUBQVQI9XX2ZsDMgMlyxr3mzE2XEgmotCGAARFIHiQ0FMIACH5BAkJABgALAAAAAAgACAAhAQCBISGhDw+POTi5CwuLLS2tPTy9BQSFJyenGRiZDQ2NIyOjLy+vPz6/BweHIyKjFRSVOzq7DQyNLy6vBQWFHRydDw6PPz+/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAXXICaOZHkcZaquIjVd10SxtFrAcFGrVhBYIwoON9uNAsOA6DCEFTEKBEKxEjQvAtELNxkpGrAGNfW4Plpb2QgxRKjKzfPoVGLj3CnLNUv7hscpSDhKOxJSgDwPP0ZGAACMjAQFDQYFBJA0BAZDBpeYGBQVFUU3TV2YFAMwAzNgTQ2PkBVDFRiuQ7CYszi1pUOnkKmrM5qcnqiiTwQTDQ2Wn9DR0tPUfRKQEBEREDQSFw3XRhEwEd3f4TvjF+XWKgJ8JNnb0QkwCdUlCzAL+CQODAwc9BtIMAQAOw==)!important;
}

#toast-container>.toast-error {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=)!important;
}

#toast-container>.toast-success {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==)!important;
}

#toast-container>.toast-warning {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=)!important;
}

#toast-container.toast-bottom-full-width>div,
#toast-container.toast-top-full-width>div {
  width: 96%;
  margin: auto;
}

.toast {
  background-color: #030303;
}

.toast-success {
  background-color: #51a351;
}

.toast-error {
  background-color: #bd362f;
}

.toast-info,
.toast-wait {
  background-color: #2f96b4;
}

.toast-warning {
  background-color: #f89406;
}

@media all and (max-width:240px) {
  #toast-container>div {
    padding: 8px 8px 8px 50px;
    width: 11em;
  }

  #toast-container .toast-close-button {
    right: -.2em;
    top: -.2em;
  }
}

@media all and (min-width:241px) and (max-width:480px) {
  #toast-container>div {
    padding: 8px 8px 8px 50px;
    width: 18em;
  }

  #toast-container .toast-close-button {
    right: -.2em;
    top: -.2em;
  }
}

@media all and (min-width:481px) and (max-width:768px) {
  #toast-container>div {
    padding: 15px 15px 15px 50px;
    width: 25em;
  }
}

:not(.no-enter)#toast-container>div.ng-enter,
:not(.no-leave)#toast-container>div.ng-leave {
  -webkit-transition: 1000ms cubic-bezier(.25,.25,.75,.75) all;
  -moz-transition: 1000ms cubic-bezier(.25,.25,.75,.75) all;
  -ms-transition: 1000ms cubic-bezier(.25,.25,.75,.75) all;
  -o-transition: 1000ms cubic-bezier(.25,.25,.75,.75) all;
  transition: 1000ms cubic-bezier(.25,.25,.75,.75) all;
}

:not(.no-enter)#toast-container>div.ng-enter.ng-enter-active,
:not(.no-leave)#toast-container>div.ng-leave {
  opacity: .8;
}

:not(.no-enter)#toast-container>div.ng-enter,
:not(.no-leave)#toast-container>div.ng-leave.ng-leave-active {
  opacity: 0;
}
/*! angular-spinkit 2016-02-22 */

.chasing-dots-spinner {
  margin: 100px auto;
  width: 40px;
  height: 40px;
  position: relative;
  text-align: center;
  -webkit-animation: rotate 2s infinite linear;
  animation: rotate 2s infinite linear;
}

.dot1,
.dot2 {
  width: 60%;
  height: 60%;
  display: inline-block;
  position: absolute;
  top: 0;
  background-color: #333;
  border-radius: 100%;
  -webkit-animation: bounce 2s infinite ease-in-out;
  animation: bounce 2s infinite ease-in-out;
}

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

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

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

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

  50% {
    -webkit-transform: scale(1);
  }
}

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

  50% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}

.spinning-dots-spinner {
  margin: 100px auto;
  width: 20px;
  height: 20px;
  position: relative;
}

.container1>div,
.container2>div,
.container3>div {
  width: 6px;
  height: 6px;
  background-color: #333;
  border-radius: 100%;
  position: absolute;
  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
  animation: bouncedelay 1.2s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.spinning-dots-spinner .spinner-container {
  position: absolute;
  width: 100%;
  height: 100%;
}

.container2 {
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}

.container3 {
  -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}

.circle1 {
  top: 0;
  left: 0;
}

.circle2 {
  top: 0;
  right: 0;
}

.circle3 {
  right: 0;
  bottom: 0;
}

.circle4 {
  left: 0;
  bottom: 0;
}

.container2 .circle1 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.container3 .circle1 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

.container1 .circle2 {
  -webkit-animation-delay: -.9s;
  animation-delay: -.9s;
}

.container2 .circle2 {
  -webkit-animation-delay: -.8s;
  animation-delay: -.8s;
}

.container3 .circle2 {
  -webkit-animation-delay: -.7s;
  animation-delay: -.7s;
}

.container1 .circle3 {
  -webkit-animation-delay: -.6s;
  animation-delay: -.6s;
}

.container2 .circle3 {
  -webkit-animation-delay: -.5s;
  animation-delay: -.5s;
}

.container3 .circle3 {
  -webkit-animation-delay: -.4s;
  animation-delay: -.4s;
}

.container1 .circle4 {
  -webkit-animation-delay: -.3s;
  animation-delay: -.3s;
}

.container2 .circle4 {
  -webkit-animation-delay: -.2s;
  animation-delay: -.2s;
}

.container3 .circle4 {
  -webkit-animation-delay: -.1s;
  animation-delay: -.1s;
}

@-webkit-keyframes bouncedelay {
  0%, 100%, 80% {
    -webkit-transform: scale(0);
  }

  40% {
    -webkit-transform: scale(1);
  }
}

@keyframes bouncedelay {
  0%, 100%, 80% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }

  40% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}

.double-bounce-spinner {
  width: 40px;
  height: 40px;
  position: relative;
  margin: 100px auto;
}

.double-bounce1,
.double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #333;
  opacity: .6;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: bounce 2s infinite ease-in-out;
  animation: bounce 2s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

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

  50% {
    -webkit-transform: scale(1);
  }
}

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

  50% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}

.pulse-spinner {
  width: 40px;
  height: 40px;
  margin: 100px auto;
  background-color: #333;
  border-radius: 100%;
  -webkit-animation: scaleout 1s infinite ease-in-out;
  animation: scaleout 1s infinite ease-in-out;
}

@-webkit-keyframes scaleout {
  0% {
    -webkit-transform: scale(0);
  }

  100% {
    -webkit-transform: scale(1);
    opacity: 0;
  }
}

@keyframes scaleout {
  0% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }

  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    opacity: 0;
  }
}

.three-dots-row-spinner {
  width: 30px;
  height: 30px;
  background-color: #333;
  margin: 100px auto;
  -webkit-animation: rotateplane 1.2s infinite ease-in-out;
  animation: rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes rotateplane {
  0% {
    -webkit-transform: perspective(120px);
  }

  50% {
    -webkit-transform: perspective(120px) rotateY(180deg);
  }

  100% {
    -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg);
  }
}

@keyframes rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }

  50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  }

  100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

.wandering-cubes-spinner {
  margin: 100px auto;
  width: 32px;
  height: 32px;
  position: relative;
}

.wandering-cubes-spinner:after,
.wandering-cubes-spinner:before {
  content: '';
  background-color: #333;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: cubemove 1.8s infinite ease-in-out;
  animation: cubemove 1.8s infinite ease-in-out;
}

.wandering-cubes-spinner:after {
  -webkit-animation-delay: -.9s;
  animation-delay: -.9s;
}

@-webkit-keyframes cubemove {
  25% {
    -webkit-transform: translateX(22px) rotate(-90deg) scale(0.5);
  }

  50% {
    -webkit-transform: translateX(22px) translateY(22px) rotate(-180deg);
  }

  75% {
    -webkit-transform: translateX(0px) translateY(22px) rotate(-270deg) scale(0.5);
  }

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

@keyframes cubemove {
  25% {
    transform: translateX(42px) rotate(-90deg) scale(0.5);
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
  }

  50% {
    transform: translateX(42px) translateY(42px) rotate(-179deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
  }

  50.1% {
    transform: translateX(42px) translateY(42px) rotate(-180deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
  }

  75% {
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  }

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

.wave-spinner {
  margin: 100px auto;
  width: 50px;
  height: 30px;
  text-align: center;
  font-size: 10px;
}

.wave-spinner>div {
  background-color: #333;
  height: 100%;
  width: 6px;
  display: inline-block;
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}

.wave-spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.wave-spinner .rect3 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

.wave-spinner .rect4 {
  -webkit-animation-delay: -.9s;
  animation-delay: -.9s;
}

.wave-spinner .rect5 {
  -webkit-animation-delay: -.8s;
  animation-delay: -.8s;
}

@-webkit-keyframes stretchdelay {
  0%, 100%, 40% {
    -webkit-transform: scaleY(0.4);
  }

  20% {
    -webkit-transform: scaleY(1);
  }
}

@keyframes stretchdelay {
  0%, 100%, 40% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }

  20% {
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
  }
}

.three-bounce-spinner {
  margin: 100px auto 0;
  width: 70px;
  text-align: center;
}

.three-bounce-spinner>div {
  width: 18px;
  height: 18px;
  background-color: #333;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out both;
  animation: bouncedelay 1.4s infinite ease-in-out both;
}

.three-bounce-spinner .bounce1 {
  -webkit-animation-delay: -.32s;
  animation-delay: -.32s;
}

.three-bounce-spinner .bounce2 {
  -webkit-animation-delay: -.16s;
  animation-delay: -.16s;
}

@-webkit-keyframes bouncedelay {
  0%, 100%, 80% {
    -webkit-transform: scale(0);
  }

  40% {
    -webkit-transform: scale(1);
  }
}

@keyframes bouncedelay {
  0%, 100%, 80% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }

  40% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}

.cube-grid-spinner {
  width: 30px;
  height: 30px;
  margin: 100px auto;
}

.cube {
  width: 33%;
  height: 33%;
  background: #333;
  float: left;
  -webkit-animation: scaleDelay 1.3s infinite ease-in-out;
  animation: scaleDelay 1.3s infinite ease-in-out;
}

.cube-grid-spinner .cube:nth-child(1) {
  -webkit-animation-delay: .2s;
  animation-delay: .2s;
}

.cube-grid-spinner .cube:nth-child(2) {
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
}

.cube-grid-spinner .cube:nth-child(3) {
  -webkit-animation-delay: .4s;
  animation-delay: .4s;
}

.cube-grid-spinner .cube:nth-child(4) {
  -webkit-animation-delay: .1s;
  animation-delay: .1s;
}

.cube-grid-spinner .cube:nth-child(5) {
  -webkit-animation-delay: .2s;
  animation-delay: .2s;
}

.cube-grid-spinner .cube:nth-child(6) {
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
}

.cube-grid-spinner .cube:nth-child(7) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.cube-grid-spinner .cube:nth-child(8) {
  -webkit-animation-delay: .1s;
  animation-delay: .1s;
}

.cube-grid-spinner .cube:nth-child(9) {
  -webkit-animation-delay: .2s;
  animation-delay: .2s;
}

@-webkit-keyframes scaleDelay {
  0%, 100%, 70% {
    -webkit-transform: scale3D(1,1,1);
  }

  35% {
    -webkit-transform: scale3D(0,0,1);
  }
}

@keyframes scaleDelay {
  0%, 100%, 70% {
    -webkit-transform: scale3D(1,1,1);
    transform: scale3D(1,1,1);
  }

  35% {
    -webkit-transform: scale3D(1,1,1);
    transform: scale3D(0,0,1);
  }
}

.word-press-spinner {
  background: #333;
  width: 30px;
  height: 30px;
  display: inline-block;
  border-radius: 30px;
  position: relative;
  -webkit-animation: inner-circle 1s linear infinite;
  animation: inner-circle 1s linear infinite;
}

.inner-circle {
  display: block;
  background: #fff;
  width: 8px;
  height: 8px;
  position: absolute;
  border-radius: 8px;
  top: 5px;
  left: 5px;
}

@-webkit-keyframes inner-circle {
  0% {
    -webkit-transform: rotate(0);
  }

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

@keyframes inner-circle {
  0% {
    transform: rotate(0);
    -webkit-transform: rotate(0);
  }

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

.fading-circle-spinner {
  margin: 100px auto;
  width: 22px;
  height: 22px;
  position: relative;
}

.fading-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.fading-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 18%;
  height: 18%;
  background-color: #333;
  border-radius: 100%;
  -webkit-animation: fadedelay 1.2s infinite ease-in-out both;
  animation: fadedelay 1.2s infinite ease-in-out both;
}

.fading-circle2 {
  transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
}

.fading-circle3 {
  transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
}

.fading-circle4 {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

.fading-circle5 {
  transform: rotate(120deg);
  -webkit-transform: rotate(120deg);
}

.fading-circle6 {
  transform: rotate(150deg);
  -webkit-transform: rotate(150deg);
}

.fading-circle7 {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}

.fading-circle8 {
  transform: rotate(210deg);
  -webkit-transform: rotate(210deg);
}

.fading-circle9 {
  transform: rotate(240deg);
  -webkit-transform: rotate(240deg);
}

.fading-circle10 {
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
}

.fading-circle11 {
  transform: rotate(300deg);
  -webkit-transform: rotate(300deg);
}

.fading-circle12 {
  transform: rotate(330deg);
  -webkit-transform: rotate(330deg);
}

.fading-circle2:before {
  animation-delay: -1.1s;
  -webkit-animation-delay: -1.1s;
}

.fading-circle3:before {
  animation-delay: -1s;
  -webkit-animation-delay: -1s;
}

.fading-circle4:before {
  animation-delay: -.9s;
  -webkit-animation-delay: -.9s;
}

.fading-circle5:before {
  animation-delay: -.8s;
  -webkit-animation-delay: -.8s;
}

.fading-circle6:before {
  animation-delay: -.7s;
  -webkit-animation-delay: -.7s;
}

.fading-circle7:before {
  animation-delay: -.6s;
  -webkit-animation-delay: -.6s;
}

.fading-circle8:before {
  animation-delay: -.5s;
  -webkit-animation-delay: -.5s;
}

.fading-circle9:before {
  animation-delay: -.4s;
  -webkit-animation-delay: -.4s;
}

.fading-circle10:before {
  animation-delay: -.3s;
  -webkit-animation-delay: -.3s;
}

.fading-circle11:before {
  animation-delay: -.2s;
  -webkit-animation-delay: -.2s;
}

.fading-circle12:before {
  animation-delay: -.1s;
  -webkit-animation-delay: -.1s;
}

@-webkit-keyframes fadedelay {
  0%, 100%, 39% {
    opacity: 0;
  }

  40% {
    opacity: 1;
  }
}

@keyframes fadedelay {
  0%, 100%, 39% {
    opacity: 0;
  }

  40% {
    opacity: 1;
  }
}
/*!
 * Datetimepicker for Bootstrap 3
 * version : 4.17.47
 * https://github.com/Eonasdan/bootstrap-datetimepicker/
 */

.bootstrap-datetimepicker-widget {
  list-style: none;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
  display: block;
  margin: 2px 0;
  padding: 4px;
  width: 19em;
}

@media (min-width:768px) {
  .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
    width: 38em;
  }
}

@media (min-width:992px) {
  .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
    width: 38em;
  }
}

@media (min-width:1200px) {
  .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
    width: 38em;
  }
}

.bootstrap-datetimepicker-widget.dropdown-menu:before,
.bootstrap-datetimepicker-widget.dropdown-menu:after {
  content: '';
  display: inline-block;
  position: absolute;
}

.bootstrap-datetimepicker-widget.dropdown-menu.bottom:before {
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-bottom-color: rgba(0,0,0,0.2);
  top: -7px;
  left: 7px;
}

.bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid white;
  top: -6px;
  left: 8px;
}

.bootstrap-datetimepicker-widget.dropdown-menu.top:before {
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #ccc;
  border-top-color: rgba(0,0,0,0.2);
  bottom: -7px;
  left: 6px;
}

.bootstrap-datetimepicker-widget.dropdown-menu.top:after {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid white;
  bottom: -6px;
  left: 7px;
}

.bootstrap-datetimepicker-widget.dropdown-menu.pull-right:before {
  left: auto;
  right: 6px;
}

.bootstrap-datetimepicker-widget.dropdown-menu.pull-right:after {
  left: auto;
  right: 7px;
}

.bootstrap-datetimepicker-widget .list-unstyled {
  margin: 0;
}

.bootstrap-datetimepicker-widget a[data-action] {
  padding: 6px 0;
}

.bootstrap-datetimepicker-widget a[data-action]:active {
  box-shadow: none;
}

.bootstrap-datetimepicker-widget .timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker-minute,
.bootstrap-datetimepicker-widget .timepicker-second {
  width: 54px;
  font-weight: bold;
  font-size: 1.2em;
  margin: 0;
}

.bootstrap-datetimepicker-widget button[data-action] {
  padding: 6px;
}

.bootstrap-datetimepicker-widget .btn[data-action="incrementHours"]::after {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  content: "Increment Hours";
}

.bootstrap-datetimepicker-widget .btn[data-action="incrementMinutes"]::after {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  content: "Increment Minutes";
}

.bootstrap-datetimepicker-widget .btn[data-action="decrementHours"]::after {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  content: "Decrement Hours";
}

.bootstrap-datetimepicker-widget .btn[data-action="decrementMinutes"]::after {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  content: "Decrement Minutes";
}

.bootstrap-datetimepicker-widget .btn[data-action="showHours"]::after {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  content: "Show Hours";
}

.bootstrap-datetimepicker-widget .btn[data-action="showMinutes"]::after {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  content: "Show Minutes";
}

.bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"]::after {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  content: "Toggle AM/PM";
}

.bootstrap-datetimepicker-widget .btn[data-action="clear"]::after {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  content: "Clear the picker";
}

.bootstrap-datetimepicker-widget .btn[data-action="today"]::after {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  content: "Set the date to today";
}

.bootstrap-datetimepicker-widget .picker-switch {
  text-align: center;
}

.bootstrap-datetimepicker-widget .picker-switch::after {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  content: "Toggle Date and Time Screens";
}

.bootstrap-datetimepicker-widget .picker-switch td {
  padding: 0;
  margin: 0;
  height: auto;
  width: auto;
  line-height: inherit;
}

.bootstrap-datetimepicker-widget .picker-switch td span {
  line-height: 2.5;
  height: 2.5em;
  width: 100%;
}

.bootstrap-datetimepicker-widget table {
  width: 100%;
  margin: 0;
}

.bootstrap-datetimepicker-widget table td,
.bootstrap-datetimepicker-widget table th {
  text-align: center;
  border-radius: 4px;
}

.bootstrap-datetimepicker-widget table th {
  height: 20px;
  line-height: 20px;
  width: 20px;
}

.bootstrap-datetimepicker-widget table th.picker-switch {
  width: 145px;
}

.bootstrap-datetimepicker-widget table th.disabled,
.bootstrap-datetimepicker-widget table th.disabled:hover {
  background: none;
  color: #777;
  cursor: not-allowed;
}

.bootstrap-datetimepicker-widget table th.prev::after {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  content: "Previous Month";
}

.bootstrap-datetimepicker-widget table th.next::after {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  content: "Next Month";
}

.bootstrap-datetimepicker-widget table thead tr:first-child th {
  cursor: pointer;
}

.bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
  background: #eee;
}

.bootstrap-datetimepicker-widget table td {
  height: 54px;
  line-height: 54px;
  width: 54px;
}

.bootstrap-datetimepicker-widget table td.cw {
  font-size: .8em;
  height: 20px;
  line-height: 20px;
  color: #777;
}

.bootstrap-datetimepicker-widget table td.day {
  height: 20px;
  line-height: 20px;
  width: 20px;
}

.bootstrap-datetimepicker-widget table td.day:hover,
.bootstrap-datetimepicker-widget table td.hour:hover,
.bootstrap-datetimepicker-widget table td.minute:hover,
.bootstrap-datetimepicker-widget table td.second:hover {
  background: #eee;
  cursor: pointer;
}

.bootstrap-datetimepicker-widget table td.old,
.bootstrap-datetimepicker-widget table td.new {
  color: #777;
}

.bootstrap-datetimepicker-widget table td.today {
  position: relative;
}

.bootstrap-datetimepicker-widget table td.today:before {
  content: '';
  display: inline-block;
  border: solid transparent;
  border-width: 0 0 7px 7px;
  border-bottom-color: #337ab7;
  border-top-color: rgba(0,0,0,0.2);
  position: absolute;
  bottom: 4px;
  right: 4px;
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
  background-color: #337ab7;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
}

.bootstrap-datetimepicker-widget table td.active.today:before {
  border-bottom-color: #fff;
}

.bootstrap-datetimepicker-widget table td.disabled,
.bootstrap-datetimepicker-widget table td.disabled:hover {
  background: none;
  color: #777;
  cursor: not-allowed;
}

.bootstrap-datetimepicker-widget table td span {
  display: inline-block;
  width: 54px;
  height: 54px;
  line-height: 54px;
  margin: 2px 1.5px;
  cursor: pointer;
  border-radius: 4px;
}

.bootstrap-datetimepicker-widget table td span:hover {
  background: #eee;
}

.bootstrap-datetimepicker-widget table td span.active {
  background-color: #337ab7;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
}

.bootstrap-datetimepicker-widget table td span.old {
  color: #777;
}

.bootstrap-datetimepicker-widget table td span.disabled,
.bootstrap-datetimepicker-widget table td span.disabled:hover {
  background: none;
  color: #777;
  cursor: not-allowed;
}

.bootstrap-datetimepicker-widget.usetwentyfour td.hour {
  height: 27px;
  line-height: 27px;
}

.bootstrap-datetimepicker-widget.wider {
  width: 21em;
}

.bootstrap-datetimepicker-widget .datepicker-decades .decade {
  line-height: 1.8em !important;
}

.input-group.date .input-group-addon {
  cursor: pointer;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.daterangepicker {
  position: absolute;
  color: inherit;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ddd;
  width: 278px;
  max-width: none;
  padding: 0;
  margin-top: 7px;
  top: 100px;
  left: 20px;
  z-index: 3001;
  display: none;
  font-family: arial;
  font-size: 15px;
  line-height: 1em;
  padding-bottom: 30px;
  padding-right: 12px;
}

.daterangepicker:before,
.daterangepicker:after {
  position: absolute;
  display: inline-block;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}

.daterangepicker:before {
  top: -7px;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom: 7px solid #ccc;
}

.daterangepicker:after {
  top: -6px;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  border-left: 6px solid transparent;
}

.daterangepicker.opensleft:before {
  right: 9px;
}

.daterangepicker.opensleft:after {
  right: 10px;
}

.daterangepicker.openscenter:before {
  left: 0;
  right: 0;
  width: 0;
  margin-left: auto;
  margin-right: auto;
}

.daterangepicker.openscenter:after {
  left: 0;
  right: 0;
  width: 0;
  margin-left: auto;
  margin-right: auto;
}

.daterangepicker.opensright:before {
  left: 9px;
}

.daterangepicker.opensright:after {
  left: 10px;
}

.daterangepicker.drop-up {
  margin-top: -7px;
}

.daterangepicker.drop-up:before {
  top: initial;
  bottom: -7px;
  border-bottom: initial;
  border-top: 7px solid #ccc;
}

.daterangepicker.drop-up:after {
  top: initial;
  bottom: -6px;
  border-bottom: initial;
  border-top: 6px solid #fff;
}

.daterangepicker.single .daterangepicker .ranges,
.daterangepicker.single .drp-calendar {
  float: none;
}

.daterangepicker.single .drp-selected {
  display: none;
}

.daterangepicker.show-calendar .drp-calendar {
  display: block;
}

.daterangepicker.show-calendar .drp-buttons {
  display: block;
}

.daterangepicker.auto-apply .drp-buttons {
  display: none;
}

.daterangepicker .drp-calendar {
  display: none;
  max-width: 270px;
}

.daterangepicker .drp-calendar.left {
  padding: 8px 0 8px 8px;
}

.daterangepicker .drp-calendar.right {
  padding: 8px;
}

.daterangepicker .drp-calendar.single .calendar-table {
  border: none;
}

.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
  color: #fff;
  border: solid black;
  border-width: 0 2px 2px 0;
  border-radius: 0;
  display: inline-block;
  padding: 3px;
}

.daterangepicker .calendar-table .next span {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.daterangepicker .calendar-table .prev span {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  min-width: 32px;
  width: 32px;
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
}

.daterangepicker .calendar-table {
  border: 1px solid #fff;
  border-radius: 4px;
  background-color: #fff;
}

.daterangepicker .calendar-table table {
  width: 100%;
  margin: 0;
  border-spacing: 0;
  border-collapse: collapse;
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
  background-color: #eee;
  border-color: transparent;
  color: inherit;
}

.daterangepicker td.week,
.daterangepicker th.week {
  font-size: 80%;
  color: #ccc;
}

.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
  background-color: #fff;
  border-color: transparent;
  color: #999;
}

.daterangepicker td.in-range {
  background-color: #ebf4f8;
  border-color: transparent;
  color: #000;
  border-radius: 0;
}

.daterangepicker td.start-date {
  border-radius: 4px 0 0 4px;
}

.daterangepicker td.end-date {
  border-radius: 0 4px 4px 0;
}

.daterangepicker td.start-date.end-date {
  border-radius: 4px;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: #357ebd;
  border-color: transparent;
  color: #fff;
}

.daterangepicker th.month {
  width: auto;
}

.daterangepicker td.disabled,
.daterangepicker option.disabled {
  color: #999;
  cursor: not-allowed;
  text-decoration: line-through;
  background-color: #EDEDED;
  border-radius: 0px;
}

.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
  font-size: 12px;
  padding: 1px;
  height: auto;
  margin: 0;
  cursor: default;
}

.daterangepicker select.monthselect {
  margin-right: 2%;
  width: 56%;
}

.daterangepicker select.yearselect {
  width: 40%;
}

.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect {
  width: 50px;
  margin: 0 auto;
  background: #eee;
  border: 1px solid #eee;
  padding: 2px;
  outline: 0;
  font-size: 12px;
}

.daterangepicker .calendar-time {
  text-align: center;
  margin: 4px auto 0 auto;
  line-height: 30px;
  position: relative;
}

.daterangepicker .calendar-time select.disabled {
  color: #ccc;
  cursor: not-allowed;
}

.daterangepicker .drp-buttons {
  clear: both;
  text-align: right;
  padding: 8px;
  border-top: 1px solid #ddd;
  display: none;
  line-height: 12px;
  vertical-align: middle;
}

.daterangepicker .drp-selected {
  display: inline-block;
  font-size: 12px;
  padding-right: 8px;
}

.daterangepicker .drp-buttons .btn {
  margin-left: 8px;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 8px;
}

.daterangepicker.show-ranges.single.rtl .drp-calendar.left {
  border-right: 1px solid #ddd;
}

.daterangepicker.show-ranges.single.ltr .drp-calendar.left {
  border-left: 1px solid #ddd;
}

.daterangepicker.show-ranges.rtl .drp-calendar.right {
  border-right: 1px solid #ddd;
}

.daterangepicker.show-ranges.ltr .drp-calendar.left {
  border-left: 1px solid #ddd;
}

.daterangepicker .ranges {
  float: none;
  text-align: left;
  margin: 0;
}

.daterangepicker.show-calendar .ranges {
  margin-top: 8px;
}

.daterangepicker .ranges ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

.daterangepicker .ranges li {
  font-size: 12px;
  padding: 8px 12px;
  cursor: pointer;
}

.daterangepicker .ranges li:hover {
  background-color: #eee;
}

.daterangepicker .ranges li.active {
  background-color: #08c;
  color: #fff;
}

/*  Larger Screen Styling */

@media (min-width: 564px) {
  .daterangepicker {
    width: auto;
  }

  .daterangepicker .ranges ul {
    width: 140px;
  }

  .daterangepicker.single .ranges ul {
    width: 100%;
  }

  .daterangepicker.single .drp-calendar.left {
    clear: none;
  }

  .daterangepicker.single .ranges,
  .daterangepicker.single .drp-calendar {
    float: left;
  }

  .daterangepicker {
    direction: ltr;
    text-align: left;
  }

  .daterangepicker .drp-calendar.left {
    clear: left;
    margin-right: 0;
  }

  .daterangepicker .drp-calendar.left .calendar-table {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .daterangepicker .drp-calendar.right {
    margin-left: 0;
  }

  .daterangepicker .drp-calendar.right .calendar-table {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .daterangepicker .drp-calendar.left .calendar-table {
    padding-right: 8px;
  }

  .daterangepicker .ranges,
  .daterangepicker .drp-calendar {
    float: left;
  }
}

@media (min-width: 730px) {
  .daterangepicker .ranges {
    width: auto;
  }

  .daterangepicker .ranges {
    float: left;
  }

  .daterangepicker.rtl .ranges {
    float: right;
  }

  .daterangepicker .drp-calendar.left {
    clear: none !important;
  }
}
.scrollableContainer {
  height: 310px;
  position: relative;
  padding-top: 35px;
  overflow: hidden;
}

.scrollableContainer .headerSpacer {
  border: 1px solid #d5d5d5;
  border-bottom-color: #bbb;
  position: absolute;
  height: 36px;
  top: 0;
  right: 0;
  left: 0;
}

.scrollableContainer th .orderWrapper {
  position: absolute;
  top: 0;
  right: 2px;
  cursor: pointer;
}

.scrollableContainer th .orderWrapper .order {
  font-size: 8pt;
  color: #BDBDBD;
}

.scrollableContainer th .orderWrapper .active {
  color: #464646;
}

.scrollArea {
  height: 100%;
  overflow-x: auto;
  overflow-y: auto;
  border: 1px solid #d5d5d5;
  /*  the implementation of this is still quite buggy; specifically, it doesn't like the 
        absolutely positioned headers within 
    -webkit-overflow-scrolling: touch;  */
  -webkit-overflow-scrolling: auto;
}

.scrollArea table {
  overflow-x: auto;
  overflow-y: auto;
  margin-bottom: 0;
  width: 100%;
  border: none;
  /*border-collapse: separate;*/
}

.scrollArea table th {
  padding: 0 !important;
  border: none !important;
  min-width: 40px;
}

.scrollArea table .th-inner {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: absolute;
  top: 0;
  height: 36px;
  line-height: 36px;
}

.scrollArea table th .box {
  padding: 0 8px;
  padding-right: 11px;
  /*  order icon width*/
  border-left: 1px solid #ddd;
}

/*  to hack fix firefox border issue    */

@-moz-document url-prefix()  {
  .scrollArea table th .box {
    border-right: 1px solid #ddd;
    border-left: none;
  }
}

.scrollArea table .th-inner .ng-scope {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scrollArea table tr th:first-child th .box {
  border-left: none;
}

.scrollArea table .th-inner.condensed {
  padding: 0 3px;
}

.scrollArea table tbody tr td:first-child {
  border-left: none;
}

.scrollArea table tbody tr td:last-child {
  border-right: none;
}

.scrollArea table tbody tr:first-child td {
  border-top: none;
}

.scrollArea table tbody tr:last-child td {
  border-bottom: 2px solid #ddd;
}

.scrollArea table tbody tr td {
  border-bottom: 1px solid #ddd;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scrollableContainer .scaler {
  position: absolute;
  top: 0px;
  width: 2px;
  height: 100%;
  background-color: #CFCFCF;
}

.scrollableContainer th .resize-rod {
  position: absolute;
  top: 0;
  right: 0;
  cursor: col-resize;
  width: 4px;
  height: 100%;
}

.scrollable-resizing .scrollableContainer {
  cursor: col-resize;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
@-webkit-keyframes swal2-show {
  0% {
    -webkit-transform: scale(.7);
    transform: scale(.7);
  }

  45% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }

  80% {
    -webkit-transform: scale(.95);
    transform: scale(.95);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes swal2-show {
  0% {
    -webkit-transform: scale(.7);
    transform: scale(.7);
  }

  45% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }

  80% {
    -webkit-transform: scale(.95);
    transform: scale(.95);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@-webkit-keyframes swal2-hide {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(.5);
    transform: scale(.5);
    opacity: 0;
  }
}

@keyframes swal2-hide {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(.5);
    transform: scale(.5);
    opacity: 0;
  }
}

@-webkit-keyframes swal2-animate-success-line-tip {
  0% {
    top: 1.1875em;
    left: .0625em;
    width: 0;
  }

  54% {
    top: 1.0625em;
    left: .125em;
    width: 0;
  }

  70% {
    top: 2.1875em;
    left: -.375em;
    width: 3.125em;
  }

  84% {
    top: 3em;
    left: 1.3125em;
    width: 1.0625em;
  }

  100% {
    top: 2.8125em;
    left: .875em;
    width: 1.5625em;
  }
}

@keyframes swal2-animate-success-line-tip {
  0% {
    top: 1.1875em;
    left: .0625em;
    width: 0;
  }

  54% {
    top: 1.0625em;
    left: .125em;
    width: 0;
  }

  70% {
    top: 2.1875em;
    left: -.375em;
    width: 3.125em;
  }

  84% {
    top: 3em;
    left: 1.3125em;
    width: 1.0625em;
  }

  100% {
    top: 2.8125em;
    left: .875em;
    width: 1.5625em;
  }
}

@-webkit-keyframes swal2-animate-success-line-long {
  0% {
    top: 3.375em;
    right: 2.875em;
    width: 0;
  }

  65% {
    top: 3.375em;
    right: 2.875em;
    width: 0;
  }

  84% {
    top: 2.1875em;
    right: 0;
    width: 3.4375em;
  }

  100% {
    top: 2.375em;
    right: .5em;
    width: 2.9375em;
  }
}

@keyframes swal2-animate-success-line-long {
  0% {
    top: 3.375em;
    right: 2.875em;
    width: 0;
  }

  65% {
    top: 3.375em;
    right: 2.875em;
    width: 0;
  }

  84% {
    top: 2.1875em;
    right: 0;
    width: 3.4375em;
  }

  100% {
    top: 2.375em;
    right: .5em;
    width: 2.9375em;
  }
}

@-webkit-keyframes swal2-rotate-success-circular-line {
  0% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

  5% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

  12% {
    -webkit-transform: rotate(-405deg);
    transform: rotate(-405deg);
  }

  100% {
    -webkit-transform: rotate(-405deg);
    transform: rotate(-405deg);
  }
}

@keyframes swal2-rotate-success-circular-line {
  0% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

  5% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

  12% {
    -webkit-transform: rotate(-405deg);
    transform: rotate(-405deg);
  }

  100% {
    -webkit-transform: rotate(-405deg);
    transform: rotate(-405deg);
  }
}

@-webkit-keyframes swal2-animate-error-x-mark {
  0% {
    margin-top: 1.625em;
    -webkit-transform: scale(.4);
    transform: scale(.4);
    opacity: 0;
  }

  50% {
    margin-top: 1.625em;
    -webkit-transform: scale(.4);
    transform: scale(.4);
    opacity: 0;
  }

  80% {
    margin-top: -.375em;
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
  }

  100% {
    margin-top: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes swal2-animate-error-x-mark {
  0% {
    margin-top: 1.625em;
    -webkit-transform: scale(.4);
    transform: scale(.4);
    opacity: 0;
  }

  50% {
    margin-top: 1.625em;
    -webkit-transform: scale(.4);
    transform: scale(.4);
    opacity: 0;
  }

  80% {
    margin-top: -.375em;
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
  }

  100% {
    margin-top: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes swal2-animate-error-icon {
  0% {
    -webkit-transform: rotateX(100deg);
    transform: rotateX(100deg);
    opacity: 0;
  }

  100% {
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
    opacity: 1;
  }
}

@keyframes swal2-animate-error-icon {
  0% {
    -webkit-transform: rotateX(100deg);
    transform: rotateX(100deg);
    opacity: 0;
  }

  100% {
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
    opacity: 1;
  }
}

body.swal2-toast-shown .swal2-container {
  background-color: transparent;
}

body.swal2-toast-shown .swal2-container.swal2-shown {
  background-color: transparent;
}

body.swal2-toast-shown .swal2-container.swal2-top {
  top: 0;
  right: auto;
  bottom: auto;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

body.swal2-toast-shown .swal2-container.swal2-top-end,
body.swal2-toast-shown .swal2-container.swal2-top-right {
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
}

body.swal2-toast-shown .swal2-container.swal2-top-left,
body.swal2-toast-shown .swal2-container.swal2-top-start {
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
}

body.swal2-toast-shown .swal2-container.swal2-center-left,
body.swal2-toast-shown .swal2-container.swal2-center-start {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

body.swal2-toast-shown .swal2-container.swal2-center {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

body.swal2-toast-shown .swal2-container.swal2-center-end,
body.swal2-toast-shown .swal2-container.swal2-center-right {
  top: 50%;
  right: 0;
  bottom: auto;
  left: auto;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

body.swal2-toast-shown .swal2-container.swal2-bottom-left,
body.swal2-toast-shown .swal2-container.swal2-bottom-start {
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
}

body.swal2-toast-shown .swal2-container.swal2-bottom {
  top: auto;
  right: auto;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

body.swal2-toast-shown .swal2-container.swal2-bottom-end,
body.swal2-toast-shown .swal2-container.swal2-bottom-right {
  top: auto;
  right: 0;
  bottom: 0;
  left: auto;
}

body.swal2-toast-column .swal2-toast {
  flex-direction: column;
  align-items: stretch;
}

body.swal2-toast-column .swal2-toast .swal2-actions {
  flex: 1;
  align-self: stretch;
  height: 2.2em;
  margin-top: .3125em;
}

body.swal2-toast-column .swal2-toast .swal2-loading {
  justify-content: center;
}

body.swal2-toast-column .swal2-toast .swal2-input {
  height: 2em;
  margin: .3125em auto;
  font-size: 1em;
}

body.swal2-toast-column .swal2-toast .swal2-validation-message {
  font-size: 1em;
}

.swal2-popup.swal2-toast {
  flex-direction: row;
  align-items: center;
  width: auto;
  padding: .625em;
  box-shadow: 0 0 .625em #d9d9d9;
  overflow-y: hidden;
}

.swal2-popup.swal2-toast .swal2-header {
  flex-direction: row;
}

.swal2-popup.swal2-toast .swal2-title {
  flex-grow: 1;
  justify-content: flex-start;
  margin: 0 .6em;
  font-size: 1em;
}

.swal2-popup.swal2-toast .swal2-footer {
  margin: .5em 0 0;
  padding: .5em 0 0;
  font-size: .8em;
}

.swal2-popup.swal2-toast .swal2-close {
  position: initial;
  width: .8em;
  height: .8em;
  line-height: .8;
}

.swal2-popup.swal2-toast .swal2-content {
  justify-content: flex-start;
  font-size: 1em;
}

.swal2-popup.swal2-toast .swal2-icon {
  width: 2em;
  min-width: 2em;
  height: 2em;
  margin: 0;
}

.swal2-popup.swal2-toast .swal2-icon-text {
  font-size: 2em;
  font-weight: 700;
  line-height: 1em;
}

.swal2-popup.swal2-toast .swal2-icon.swal2-success .swal2-success-ring {
  width: 2em;
  height: 2em;
}

.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line] {
  top: .875em;
  width: 1.375em;
}

.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=left] {
  left: .3125em;
}

.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=right] {
  right: .3125em;
}

.swal2-popup.swal2-toast .swal2-actions {
  height: auto;
  margin: 0 .3125em;
}

.swal2-popup.swal2-toast .swal2-styled {
  margin: 0 .3125em;
  padding: .3125em .625em;
  font-size: 1em;
}

.swal2-popup.swal2-toast .swal2-styled:focus {
  box-shadow: 0 0 0 .0625em #fff,0 0 0 .125em rgba(50,100,150,.4);
}

.swal2-popup.swal2-toast .swal2-success {
  border-color: #a5dc86;
}

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line] {
  position: absolute;
  width: 2em;
  height: 2.8125em;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-radius: 50%;
}

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=left] {
  top: -.25em;
  left: -.9375em;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 2em 2em;
  transform-origin: 2em 2em;
  border-radius: 4em 0 0 4em;
}

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=right] {
  top: -.25em;
  left: .9375em;
  -webkit-transform-origin: 0 2em;
  transform-origin: 0 2em;
  border-radius: 0 4em 4em 0;
}

.swal2-popup.swal2-toast .swal2-success .swal2-success-ring {
  width: 2em;
  height: 2em;
}

.swal2-popup.swal2-toast .swal2-success .swal2-success-fix {
  top: 0;
  left: .4375em;
  width: .4375em;
  height: 2.6875em;
}

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line] {
  height: .3125em;
}

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line][class$=tip] {
  top: 1.125em;
  left: .1875em;
  width: .75em;
}

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line][class$=long] {
  top: .9375em;
  right: .1875em;
  width: 1.375em;
}

.swal2-popup.swal2-toast.swal2-show {
  -webkit-animation: showSweetToast .5s;
  animation: showSweetToast .5s;
}

.swal2-popup.swal2-toast.swal2-hide {
  -webkit-animation: hideSweetToast .2s forwards;
  animation: hideSweetToast .2s forwards;
}

.swal2-popup.swal2-toast .swal2-animate-success-icon .swal2-success-line-tip {
  -webkit-animation: animate-toast-success-tip .75s;
  animation: animate-toast-success-tip .75s;
}

.swal2-popup.swal2-toast .swal2-animate-success-icon .swal2-success-line-long {
  -webkit-animation: animate-toast-success-long .75s;
  animation: animate-toast-success-long .75s;
}

@-webkit-keyframes showSweetToast {
  0% {
    -webkit-transform: translateY(-.625em) rotateZ(2deg);
    transform: translateY(-.625em) rotateZ(2deg);
    opacity: 0;
  }

  33% {
    -webkit-transform: translateY(0) rotateZ(-2deg);
    transform: translateY(0) rotateZ(-2deg);
    opacity: .5;
  }

  66% {
    -webkit-transform: translateY(.3125em) rotateZ(2deg);
    transform: translateY(.3125em) rotateZ(2deg);
    opacity: .7;
  }

  100% {
    -webkit-transform: translateY(0) rotateZ(0);
    transform: translateY(0) rotateZ(0);
    opacity: 1;
  }
}

@keyframes showSweetToast {
  0% {
    -webkit-transform: translateY(-.625em) rotateZ(2deg);
    transform: translateY(-.625em) rotateZ(2deg);
    opacity: 0;
  }

  33% {
    -webkit-transform: translateY(0) rotateZ(-2deg);
    transform: translateY(0) rotateZ(-2deg);
    opacity: .5;
  }

  66% {
    -webkit-transform: translateY(.3125em) rotateZ(2deg);
    transform: translateY(.3125em) rotateZ(2deg);
    opacity: .7;
  }

  100% {
    -webkit-transform: translateY(0) rotateZ(0);
    transform: translateY(0) rotateZ(0);
    opacity: 1;
  }
}

@-webkit-keyframes hideSweetToast {
  0% {
    opacity: 1;
  }

  33% {
    opacity: .5;
  }

  100% {
    -webkit-transform: rotateZ(1deg);
    transform: rotateZ(1deg);
    opacity: 0;
  }
}

@keyframes hideSweetToast {
  0% {
    opacity: 1;
  }

  33% {
    opacity: .5;
  }

  100% {
    -webkit-transform: rotateZ(1deg);
    transform: rotateZ(1deg);
    opacity: 0;
  }
}

@-webkit-keyframes animate-toast-success-tip {
  0% {
    top: .5625em;
    left: .0625em;
    width: 0;
  }

  54% {
    top: .125em;
    left: .125em;
    width: 0;
  }

  70% {
    top: .625em;
    left: -.25em;
    width: 1.625em;
  }

  84% {
    top: 1.0625em;
    left: .75em;
    width: .5em;
  }

  100% {
    top: 1.125em;
    left: .1875em;
    width: .75em;
  }
}

@keyframes animate-toast-success-tip {
  0% {
    top: .5625em;
    left: .0625em;
    width: 0;
  }

  54% {
    top: .125em;
    left: .125em;
    width: 0;
  }

  70% {
    top: .625em;
    left: -.25em;
    width: 1.625em;
  }

  84% {
    top: 1.0625em;
    left: .75em;
    width: .5em;
  }

  100% {
    top: 1.125em;
    left: .1875em;
    width: .75em;
  }
}

@-webkit-keyframes animate-toast-success-long {
  0% {
    top: 1.625em;
    right: 1.375em;
    width: 0;
  }

  65% {
    top: 1.25em;
    right: .9375em;
    width: 0;
  }

  84% {
    top: .9375em;
    right: 0;
    width: 1.125em;
  }

  100% {
    top: .9375em;
    right: .1875em;
    width: 1.375em;
  }
}

@keyframes animate-toast-success-long {
  0% {
    top: 1.625em;
    right: 1.375em;
    width: 0;
  }

  65% {
    top: 1.25em;
    right: .9375em;
    width: 0;
  }

  84% {
    top: .9375em;
    right: 0;
    width: 1.125em;
  }

  100% {
    top: .9375em;
    right: .1875em;
    width: 1.375em;
  }
}

body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
  overflow: hidden;
}

body.swal2-height-auto {
  height: auto!important;
}

body.swal2-no-backdrop .swal2-shown {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  background-color: transparent;
}

body.swal2-no-backdrop .swal2-shown>.swal2-modal {
  box-shadow: 0 0 10px rgba(0,0,0,.4);
}

body.swal2-no-backdrop .swal2-shown.swal2-top {
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

body.swal2-no-backdrop .swal2-shown.swal2-top-left,
body.swal2-no-backdrop .swal2-shown.swal2-top-start {
  top: 0;
  left: 0;
}

body.swal2-no-backdrop .swal2-shown.swal2-top-end,
body.swal2-no-backdrop .swal2-shown.swal2-top-right {
  top: 0;
  right: 0;
}

body.swal2-no-backdrop .swal2-shown.swal2-center {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

body.swal2-no-backdrop .swal2-shown.swal2-center-left,
body.swal2-no-backdrop .swal2-shown.swal2-center-start {
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

body.swal2-no-backdrop .swal2-shown.swal2-center-end,
body.swal2-no-backdrop .swal2-shown.swal2-center-right {
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

body.swal2-no-backdrop .swal2-shown.swal2-bottom {
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

body.swal2-no-backdrop .swal2-shown.swal2-bottom-left,
body.swal2-no-backdrop .swal2-shown.swal2-bottom-start {
  bottom: 0;
  left: 0;
}

body.swal2-no-backdrop .swal2-shown.swal2-bottom-end,
body.swal2-no-backdrop .swal2-shown.swal2-bottom-right {
  right: 0;
  bottom: 0;
}

.swal2-container {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background-color: transparent;
  z-index: 1060;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.swal2-container.swal2-top {
  align-items: flex-start;
}

.swal2-container.swal2-top-left,
.swal2-container.swal2-top-start {
  align-items: flex-start;
  justify-content: flex-start;
}

.swal2-container.swal2-top-end,
.swal2-container.swal2-top-right {
  align-items: flex-start;
  justify-content: flex-end;
}

.swal2-container.swal2-center {
  align-items: center;
}

.swal2-container.swal2-center-left,
.swal2-container.swal2-center-start {
  align-items: center;
  justify-content: flex-start;
}

.swal2-container.swal2-center-end,
.swal2-container.swal2-center-right {
  align-items: center;
  justify-content: flex-end;
}

.swal2-container.swal2-bottom {
  align-items: flex-end;
}

.swal2-container.swal2-bottom-left,
.swal2-container.swal2-bottom-start {
  align-items: flex-end;
  justify-content: flex-start;
}

.swal2-container.swal2-bottom-end,
.swal2-container.swal2-bottom-right {
  align-items: flex-end;
  justify-content: flex-end;
}

.swal2-container.swal2-grow-fullscreen>.swal2-modal {
  display: flex!important;
  flex: 1;
  align-self: stretch;
  justify-content: center;
}

.swal2-container.swal2-grow-row>.swal2-modal {
  display: flex!important;
  flex: 1;
  align-content: center;
  justify-content: center;
}

.swal2-container.swal2-grow-column {
  flex: 1;
  flex-direction: column;
}

.swal2-container.swal2-grow-column.swal2-bottom,
.swal2-container.swal2-grow-column.swal2-center,
.swal2-container.swal2-grow-column.swal2-top {
  align-items: center;
}

.swal2-container.swal2-grow-column.swal2-bottom-left,
.swal2-container.swal2-grow-column.swal2-bottom-start,
.swal2-container.swal2-grow-column.swal2-center-left,
.swal2-container.swal2-grow-column.swal2-center-start,
.swal2-container.swal2-grow-column.swal2-top-left,
.swal2-container.swal2-grow-column.swal2-top-start {
  align-items: flex-start;
}

.swal2-container.swal2-grow-column.swal2-bottom-end,
.swal2-container.swal2-grow-column.swal2-bottom-right,
.swal2-container.swal2-grow-column.swal2-center-end,
.swal2-container.swal2-grow-column.swal2-center-right,
.swal2-container.swal2-grow-column.swal2-top-end,
.swal2-container.swal2-grow-column.swal2-top-right {
  align-items: flex-end;
}

.swal2-container.swal2-grow-column>.swal2-modal {
  display: flex!important;
  flex: 1;
  align-content: center;
  justify-content: center;
}

.swal2-container:not(.swal2-top):not(.swal2-top-start):not(.swal2-top-end):not(.swal2-top-left):not(.swal2-top-right):not(.swal2-center-start):not(.swal2-center-end):not(.swal2-center-left):not(.swal2-center-right):not(.swal2-bottom):not(.swal2-bottom-start):not(.swal2-bottom-end):not(.swal2-bottom-left):not(.swal2-bottom-right):not(.swal2-grow-fullscreen)>.swal2-modal {
  margin: auto;
}

@media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
  .swal2-container .swal2-modal {
    margin: 0!important;
  }
}

.swal2-container.swal2-fade {
  transition: background-color .1s;
}

.swal2-container.swal2-shown {
  background-color: rgba(0,0,0,.4);
}

.swal2-popup {
  display: none;
  position: relative;
  flex-direction: column;
  justify-content: center;
  width: 32em;
  max-width: 100%;
  padding: 1.25em;
  border-radius: .3125em;
  background: #fff;
  font-family: inherit;
  font-size: 1rem;
  box-sizing: border-box;
}

.swal2-popup:focus {
  outline: 0;
}

.swal2-popup.swal2-loading {
  overflow-y: hidden;
}

.swal2-popup .swal2-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.swal2-popup .swal2-title {
  display: block;
  position: relative;
  max-width: 100%;
  margin: 0 0 .4em;
  padding: 0;
  color: #595959;
  font-size: 1.875em;
  font-weight: 600;
  text-align: center;
  text-transform: none;
  word-wrap: break-word;
}

.swal2-popup .swal2-actions {
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 1.25em auto 0;
  z-index: 1;
}

.swal2-popup .swal2-actions:not(.swal2-loading) .swal2-styled[disabled] {
  opacity: .4;
}

.swal2-popup .swal2-actions:not(.swal2-loading) .swal2-styled:hover {
  background-image: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.1));
}

.swal2-popup .swal2-actions:not(.swal2-loading) .swal2-styled:active {
  background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2));
}

.swal2-popup .swal2-actions.swal2-loading .swal2-styled.swal2-confirm {
  width: 2.5em;
  height: 2.5em;
  margin: .46875em;
  padding: 0;
  border: .25em solid transparent;
  border-radius: 100%;
  border-color: transparent;
  background-color: transparent!important;
  color: transparent;
  cursor: default;
  box-sizing: border-box;
  -webkit-animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
  animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.swal2-popup .swal2-actions.swal2-loading .swal2-styled.swal2-cancel {
  margin-right: 30px;
  margin-left: 30px;
}

.swal2-popup .swal2-actions.swal2-loading :not(.swal2-styled).swal2-confirm::after {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 5px;
  border: 3px solid #999;
  border-radius: 50%;
  border-right-color: transparent;
  box-shadow: 1px 1px 1px #fff;
  content: '';
  -webkit-animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
  animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
}

.swal2-popup .swal2-styled {
  margin: .3125em;
  padding: .625em 2em;
  font-weight: 500;
  box-shadow: none;
}

.swal2-popup .swal2-styled:not([disabled]) {
  cursor: pointer;
}

.swal2-popup .swal2-styled.swal2-confirm {
  border: 0;
  border-radius: .25em;
  background: initial;
  background-color: #3085d6;
  color: #fff;
  font-size: 1.0625em;
}

.swal2-popup .swal2-styled.swal2-cancel {
  border: 0;
  border-radius: .25em;
  background: initial;
  background-color: #aaa;
  color: #fff;
  font-size: 1.0625em;
}

.swal2-popup .swal2-styled:focus {
  outline: 0;
  box-shadow: 0 0 0 2px #fff,0 0 0 4px rgba(50,100,150,.4);
}

.swal2-popup .swal2-styled::-moz-focus-inner {
  border: 0;
}

.swal2-popup .swal2-footer {
  justify-content: center;
  margin: 1.25em 0 0;
  padding: 1em 0 0;
  border-top: 1px solid #eee;
  color: #545454;
  font-size: 1em;
}

.swal2-popup .swal2-image {
  max-width: 100%;
  margin: 1.25em auto;
}

.swal2-popup .swal2-close {
  position: absolute;
  top: 0;
  right: 0;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  padding: 0;
  transition: color .1s ease-out;
  border: none;
  border-radius: 0;
  outline: initial;
  background: 0 0;
  color: #ccc;
  font-family: serif;
  font-size: 2.5em;
  line-height: 1.2;
  cursor: pointer;
  overflow: hidden;
}

.swal2-popup .swal2-close:hover {
  -webkit-transform: none;
  transform: none;
  color: #f27474;
}

.swal2-popup>.swal2-checkbox,
.swal2-popup>.swal2-file,
.swal2-popup>.swal2-input,
.swal2-popup>.swal2-radio,
.swal2-popup>.swal2-select,
.swal2-popup>.swal2-textarea {
  display: none;
}

.swal2-popup .swal2-content {
  justify-content: center;
  margin: 0;
  padding: 0;
  color: #545454;
  font-size: 1.125em;
  font-weight: 300;
  line-height: normal;
  z-index: 1;
  word-wrap: break-word;
}

.swal2-popup #swal2-content {
  text-align: center;
}

.swal2-popup .swal2-checkbox,
.swal2-popup .swal2-file,
.swal2-popup .swal2-input,
.swal2-popup .swal2-radio,
.swal2-popup .swal2-select,
.swal2-popup .swal2-textarea {
  margin: 1em auto;
}

.swal2-popup .swal2-file,
.swal2-popup .swal2-input,
.swal2-popup .swal2-textarea {
  width: 100%;
  transition: border-color .3s,box-shadow .3s;
  border: 1px solid #d9d9d9;
  border-radius: .1875em;
  font-size: 1.125em;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.06);
  box-sizing: border-box;
}

.swal2-popup .swal2-file.swal2-inputerror,
.swal2-popup .swal2-input.swal2-inputerror,
.swal2-popup .swal2-textarea.swal2-inputerror {
  border-color: #f27474!important;
  box-shadow: 0 0 2px #f27474!important;
}

.swal2-popup .swal2-file:focus,
.swal2-popup .swal2-input:focus,
.swal2-popup .swal2-textarea:focus {
  border: 1px solid #b4dbed;
  outline: 0;
  box-shadow: 0 0 3px #c4e6f5;
}

.swal2-popup .swal2-file::-webkit-input-placeholder,
.swal2-popup .swal2-input::-webkit-input-placeholder,
.swal2-popup .swal2-textarea::-webkit-input-placeholder {
  color: #ccc;
}

.swal2-popup .swal2-file:-ms-input-placeholder,
.swal2-popup .swal2-input:-ms-input-placeholder,
.swal2-popup .swal2-textarea:-ms-input-placeholder {
  color: #ccc;
}

.swal2-popup .swal2-file::-ms-input-placeholder,
.swal2-popup .swal2-input::-ms-input-placeholder,
.swal2-popup .swal2-textarea::-ms-input-placeholder {
  color: #ccc;
}

.swal2-popup .swal2-file::placeholder,
.swal2-popup .swal2-input::placeholder,
.swal2-popup .swal2-textarea::placeholder {
  color: #ccc;
}

.swal2-popup .swal2-range input {
  width: 80%;
}

.swal2-popup .swal2-range output {
  width: 20%;
  font-weight: 600;
  text-align: center;
}

.swal2-popup .swal2-range input,
.swal2-popup .swal2-range output {
  height: 2.625em;
  margin: 1em auto;
  padding: 0;
  font-size: 1.125em;
  line-height: 2.625em;
}

.swal2-popup .swal2-input {
  height: 2.625em;
  padding: 0 .75em;
}

.swal2-popup .swal2-input[type=number] {
  max-width: 10em;
}

.swal2-popup .swal2-file {
  font-size: 1.125em;
}

.swal2-popup .swal2-textarea {
  height: 6.75em;
  padding: .75em;
}

.swal2-popup .swal2-select {
  min-width: 50%;
  max-width: 100%;
  padding: .375em .625em;
  color: #545454;
  font-size: 1.125em;
}

.swal2-popup .swal2-checkbox,
.swal2-popup .swal2-radio {
  align-items: center;
  justify-content: center;
}

.swal2-popup .swal2-checkbox label,
.swal2-popup .swal2-radio label {
  margin: 0 .6em;
  font-size: 1.125em;
}

.swal2-popup .swal2-checkbox input,
.swal2-popup .swal2-radio input {
  margin: 0 .4em;
}

.swal2-popup .swal2-validation-message {
  display: none;
  align-items: center;
  justify-content: center;
  padding: .625em;
  background: #f0f0f0;
  color: #666;
  font-size: 1em;
  font-weight: 300;
  overflow: hidden;
}

.swal2-popup .swal2-validation-message::before {
  display: inline-block;
  width: 1.5em;
  min-width: 1.5em;
  height: 1.5em;
  margin: 0 .625em;
  border-radius: 50%;
  background-color: #f27474;
  color: #fff;
  font-weight: 600;
  line-height: 1.5em;
  text-align: center;
  content: '!';
  zoom: normal;
}

@supports (-ms-accelerator:true) {
  .swal2-range input {
    width: 100%!important;
  }

  .swal2-range output {
    display: none;
  }
}

@media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
  .swal2-range input {
    width: 100%!important;
  }

  .swal2-range output {
    display: none;
  }
}

@-moz-document url-prefix()  {
  .swal2-close:focus {
    outline: 2px solid rgba(50,100,150,.4);
  }
}

.swal2-icon {
  position: relative;
  justify-content: center;
  width: 5em;
  height: 5em;
  margin: 1.25em auto 1.875em;
  border: .25em solid transparent;
  border-radius: 50%;
  line-height: 5em;
  cursor: default;
  box-sizing: content-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  zoom: normal;
}

.swal2-icon-text {
  font-size: 3.75em;
}

.swal2-icon.swal2-error {
  border-color: #f27474;
}

.swal2-icon.swal2-error .swal2-x-mark {
  position: relative;
  flex-grow: 1;
}

.swal2-icon.swal2-error [class^=swal2-x-mark-line] {
  display: block;
  position: absolute;
  top: 2.3125em;
  width: 2.9375em;
  height: .3125em;
  border-radius: .125em;
  background-color: #f27474;
}

.swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=left] {
  left: 1.0625em;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=right] {
  right: 1em;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.swal2-icon.swal2-warning {
  border-color: #facea8;
  color: #f8bb86;
}

.swal2-icon.swal2-info {
  border-color: #9de0f6;
  color: #3fc3ee;
}

.swal2-icon.swal2-question {
  border-color: #c9dae1;
  color: #87adbd;
}

.swal2-icon.swal2-success {
  border-color: #a5dc86;
}

.swal2-icon.swal2-success [class^=swal2-success-circular-line] {
  position: absolute;
  width: 3.75em;
  height: 7.5em;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-radius: 50%;
}

.swal2-icon.swal2-success [class^=swal2-success-circular-line][class$=left] {
  top: -.4375em;
  left: -2.0635em;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 3.75em 3.75em;
  transform-origin: 3.75em 3.75em;
  border-radius: 7.5em 0 0 7.5em;
}

.swal2-icon.swal2-success [class^=swal2-success-circular-line][class$=right] {
  top: -.6875em;
  left: 1.875em;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 0 3.75em;
  transform-origin: 0 3.75em;
  border-radius: 0 7.5em 7.5em 0;
}

.swal2-icon.swal2-success .swal2-success-ring {
  position: absolute;
  top: -.25em;
  left: -.25em;
  width: 100%;
  height: 100%;
  border: .25em solid rgba(165,220,134,.3);
  border-radius: 50%;
  z-index: 2;
  box-sizing: content-box;
}

.swal2-icon.swal2-success .swal2-success-fix {
  position: absolute;
  top: .5em;
  left: 1.625em;
  width: .4375em;
  height: 5.625em;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  z-index: 1;
}

.swal2-icon.swal2-success [class^=swal2-success-line] {
  display: block;
  position: absolute;
  height: .3125em;
  border-radius: .125em;
  background-color: #a5dc86;
  z-index: 2;
}

.swal2-icon.swal2-success [class^=swal2-success-line][class$=tip] {
  top: 2.875em;
  left: .875em;
  width: 1.5625em;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.swal2-icon.swal2-success [class^=swal2-success-line][class$=long] {
  top: 2.375em;
  right: .5em;
  width: 2.9375em;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.swal2-progresssteps {
  align-items: center;
  margin: 0 0 1.25em;
  padding: 0;
  font-weight: 600;
}

.swal2-progresssteps li {
  display: inline-block;
  position: relative;
}

.swal2-progresssteps .swal2-progresscircle {
  width: 2em;
  height: 2em;
  border-radius: 2em;
  background: #3085d6;
  color: #fff;
  line-height: 2em;
  text-align: center;
  z-index: 20;
}

.swal2-progresssteps .swal2-progresscircle:first-child {
  margin-left: 0;
}

.swal2-progresssteps .swal2-progresscircle:last-child {
  margin-right: 0;
}

.swal2-progresssteps .swal2-progresscircle.swal2-activeprogressstep {
  background: #3085d6;
}

.swal2-progresssteps .swal2-progresscircle.swal2-activeprogressstep~.swal2-progresscircle {
  background: #add8e6;
}

.swal2-progresssteps .swal2-progresscircle.swal2-activeprogressstep~.swal2-progressline {
  background: #add8e6;
}

.swal2-progresssteps .swal2-progressline {
  width: 2.5em;
  height: .4em;
  margin: 0 -1px;
  background: #3085d6;
  z-index: 10;
}

[class^=swal2] {
  -webkit-tap-highlight-color: transparent;
}

.swal2-show {
  -webkit-animation: swal2-show .3s;
  animation: swal2-show .3s;
}

.swal2-show.swal2-noanimation {
  -webkit-animation: none;
  animation: none;
}

.swal2-hide {
  -webkit-animation: swal2-hide .15s forwards;
  animation: swal2-hide .15s forwards;
}

.swal2-hide.swal2-noanimation {
  -webkit-animation: none;
  animation: none;
}

.swal2-rtl .swal2-close {
  right: auto;
  left: 0;
}

.swal2-animate-success-icon .swal2-success-line-tip {
  -webkit-animation: swal2-animate-success-line-tip .75s;
  animation: swal2-animate-success-line-tip .75s;
}

.swal2-animate-success-icon .swal2-success-line-long {
  -webkit-animation: swal2-animate-success-line-long .75s;
  animation: swal2-animate-success-line-long .75s;
}

.swal2-animate-success-icon .swal2-success-circular-line-right {
  -webkit-animation: swal2-rotate-success-circular-line 4.25s ease-in;
  animation: swal2-rotate-success-circular-line 4.25s ease-in;
}

.swal2-animate-error-icon {
  -webkit-animation: swal2-animate-error-icon .5s;
  animation: swal2-animate-error-icon .5s;
}

.swal2-animate-error-icon .swal2-x-mark {
  -webkit-animation: swal2-animate-error-x-mark .5s;
  animation: swal2-animate-error-x-mark .5s;
}

@-webkit-keyframes swal2-rotate-loading {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

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

@keyframes swal2-rotate-loading {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

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

@media print {
  body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
    overflow-y: scroll!important;
  }

  body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown)>[aria-hidden=true] {
    display: none;
  }

  body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) .swal2-container {
    position: initial!important;
  }
}
.minicolors {
  position: relative;
}

.minicolors-sprite {
  background-image: url(jquery.minicolors.png);
}

.minicolors-swatch {
  position: absolute;
  vertical-align: middle;
  background-position: -80px 0;
  border: solid 1px #ccc;
  cursor: text;
  padding: 0;
  margin: 0;
  display: inline-block;
}

.minicolors-swatch-color {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.minicolors input[type=hidden] + .minicolors-swatch {
  width: 28px;
  position: static;
  cursor: pointer;
}

.minicolors input[type=hidden][disabled] + .minicolors-swatch {
  cursor: default;
}

/* Panel */

.minicolors-panel {
  position: absolute;
  width: 173px;
  background: white;
  border: solid 1px #CCC;
  box-shadow: 0 0 20px rgba(0, 0, 0, .2);
  z-index: 99999;
  box-sizing: content-box;
  display: none;
}

.minicolors-panel.minicolors-visible {
  display: block;
}

/* Panel positioning */

.minicolors-position-top .minicolors-panel {
  top: -154px;
}

.minicolors-position-right .minicolors-panel {
  right: 0;
}

.minicolors-position-bottom .minicolors-panel {
  top: auto;
}

.minicolors-position-left .minicolors-panel {
  left: 0;
}

.minicolors-with-opacity .minicolors-panel {
  width: 194px;
}

.minicolors .minicolors-grid {
  position: relative;
  top: 1px;
  left: 1px;
  /* LTR */
  width: 150px;
  height: 150px;
  margin-bottom: 2px;
  background-position: -120px 0;
  cursor: crosshair;
}

[dir=rtl] .minicolors .minicolors-grid {
  right: 1px;
}

.minicolors .minicolors-grid-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 150px;
}

.minicolors-slider-saturation .minicolors-grid {
  background-position: -420px 0;
}

.minicolors-slider-saturation .minicolors-grid-inner {
  background-position: -270px 0;
  background-image: inherit;
}

.minicolors-slider-brightness .minicolors-grid {
  background-position: -570px 0;
}

.minicolors-slider-brightness .minicolors-grid-inner {
  background-color: black;
}

.minicolors-slider-wheel .minicolors-grid {
  background-position: -720px 0;
}

.minicolors-slider,
.minicolors-opacity-slider {
  position: absolute;
  top: 1px;
  left: 152px;
  /* LTR */
  width: 20px;
  height: 150px;
  background-color: white;
  background-position: 0 0;
  cursor: row-resize;
}

[dir=rtl] .minicolors-slider,
[dir=rtl] .minicolors-opacity-slider {
  right: 152px;
}

.minicolors-slider-saturation .minicolors-slider {
  background-position: -60px 0;
}

.minicolors-slider-brightness .minicolors-slider {
  background-position: -20px 0;
}

.minicolors-slider-wheel .minicolors-slider {
  background-position: -20px 0;
}

.minicolors-opacity-slider {
  left: 173px;
  /* LTR */
  background-position: -40px 0;
  display: none;
}

[dir=rtl] .minicolors-opacity-slider {
  right: 173px;
}

.minicolors-with-opacity .minicolors-opacity-slider {
  display: block;
}

/* Pickers */

.minicolors-grid .minicolors-picker {
  position: absolute;
  top: 70px;
  left: 70px;
  width: 12px;
  height: 12px;
  border: solid 1px black;
  border-radius: 10px;
  margin-top: -6px;
  margin-left: -6px;
  background: none;
}

.minicolors-grid .minicolors-picker > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  border: solid 2px white;
  box-sizing: content-box;
}

.minicolors-picker {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 2px;
  background: white;
  border: solid 1px black;
  margin-top: -2px;
  box-sizing: content-box;
}

/* Swatches */

.minicolors-swatches,
.minicolors-swatches li {
  margin: 5px 0 3px 5px;
  /* LTR */
  padding: 0;
  list-style: none;
  overflow: hidden;
}

[dir=rtl] .minicolors-swatches,
[dir=rtl] .minicolors-swatches li {
  margin: 5px 5px 3px 0;
}

.minicolors-swatches .minicolors-swatch {
  position: relative;
  float: left;
  /* LTR */
  cursor: pointer;
  margin: 0 4px 0 0;
  /* LTR */
}

[dir=rtl] .minicolors-swatches .minicolors-swatch {
  float: right;
  margin: 0 0 0 4px;
}

.minicolors-with-opacity .minicolors-swatches .minicolors-swatch {
  margin-right: 7px;
  /* LTR */
}

[dir=rtl] .minicolors-with-opacity .minicolors-swatches .minicolors-swatch {
  margin-right: 0;
  margin-left: 7px;
}

.minicolors-swatch.selected {
  border-color: #000;
}

/* Inline controls */

.minicolors-inline {
  display: inline-block;
}

.minicolors-inline .minicolors-input {
  display: none !important;
}

.minicolors-inline .minicolors-panel {
  position: relative;
  top: auto;
  left: auto;
  /* LTR */
  box-shadow: none;
  z-index: auto;
  display: inline-block;
}

[dir=rtl] .minicolors-inline .minicolors-panel {
  right: auto;
}

/* Default theme */

.minicolors-theme-default .minicolors-swatch {
  top: 5px;
  left: 5px;
  /* LTR */
  width: 18px;
  height: 18px;
}

[dir=rtl] .minicolors-theme-default .minicolors-swatch {
  right: 5px;
}

.minicolors-theme-default .minicolors-swatches .minicolors-swatch {
  margin-bottom: 2px;
  top: 0;
  left: 0;
  /* LTR */
  width: 18px;
  height: 18px;
}

[dir=rtl] .minicolors-theme-default .minicolors-swatches .minicolors-swatch {
  right: 0;
}

.minicolors-theme-default.minicolors-position-right .minicolors-swatch {
  left: auto;
  /* LTR */
  right: 5px;
  /* LTR */
}

[dir=rtl] .minicolors-theme-default.minicolors-position-left .minicolors-swatch {
  right: auto;
  left: 5px;
}

.minicolors-theme-default.minicolors {
  width: auto;
  display: inline-block;
}

.minicolors-theme-default .minicolors-input {
  height: 20px;
  width: auto;
  display: inline-block;
  padding-left: 26px;
  /* LTR */
}

[dir=rtl] .minicolors-theme-default .minicolors-input {
  text-align: right;
  unicode-bidi: plaintext;
  padding-left: 1px;
  padding-right: 26px;
}

.minicolors-theme-default.minicolors-position-right .minicolors-input {
  padding-right: 26px;
  /* LTR */
  padding-left: inherit;
  /* LTR */
}

[dir=rtl] .minicolors-theme-default.minicolors-position-left .minicolors-input {
  padding-right: inherit;
  padding-left: 26px;
}

/* Bootstrap theme */

.minicolors-theme-bootstrap .minicolors-swatch {
  z-index: 2;
  top: 3px;
  left: 3px;
  /* LTR */
  width: 28px;
  height: 28px;
  border-radius: 3px;
}

[dir=rtl] .minicolors-theme-bootstrap .minicolors-swatch {
  right: 3px;
}

.minicolors-theme-bootstrap .minicolors-swatches .minicolors-swatch {
  margin-bottom: 2px;
  top: 0;
  left: 0;
  /* LTR */
  width: 20px;
  height: 20px;
}

[dir=rtl] .minicolors-theme-bootstrap .minicolors-swatches .minicolors-swatch {
  right: 0;
}

.minicolors-theme-bootstrap .minicolors-swatch-color {
  border-radius: inherit;
}

.minicolors-theme-bootstrap.minicolors-position-right > .minicolors-swatch {
  left: auto;
  /* LTR */
  right: 3px;
  /* LTR */
}

[dir=rtl] .minicolors-theme-bootstrap.minicolors-position-left > .minicolors-swatch {
  right: auto;
  left: 3px;
}

.minicolors-theme-bootstrap .minicolors-input {
  float: none;
  padding-left: 44px;
  /* LTR */
}

[dir=rtl] .minicolors-theme-bootstrap .minicolors-input {
  text-align: right;
  unicode-bidi: plaintext;
  padding-left: 12px;
  padding-right: 44px;
}

.minicolors-theme-bootstrap.minicolors-position-right .minicolors-input {
  padding-right: 44px;
  /* LTR */
  padding-left: 12px;
  /* LTR */
}

[dir=rtl] .minicolors-theme-bootstrap.minicolors-position-left .minicolors-input {
  padding-right: 12px;
  padding-left: 44px;
}

.minicolors-theme-bootstrap .minicolors-input.input-lg + .minicolors-swatch {
  top: 4px;
  left: 4px;
  /* LTR */
  width: 37px;
  height: 37px;
  border-radius: 5px;
}

[dir=rtl] .minicolors-theme-bootstrap .minicolors-input.input-lg + .minicolors-swatch {
  right: 4px;
}

.minicolors-theme-bootstrap .minicolors-input.input-sm + .minicolors-swatch {
  width: 24px;
  height: 24px;
}

.minicolors-theme-bootstrap .minicolors-input.input-xs + .minicolors-swatch {
  width: 18px;
  height: 18px;
}

.input-group .minicolors-theme-bootstrap:not(:first-child) .minicolors-input {
  border-top-left-radius: 0;
  /* LTR */
  border-bottom-left-radius: 0;
  /* LTR */
}

[dir=rtl] .input-group .minicolors-theme-bootstrap .minicolors-input {
  border-radius: 4px;
}

[dir=rtl] .input-group .minicolors-theme-bootstrap:not(:first-child) .minicolors-input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

[dir=rtl] .input-group .minicolors-theme-bootstrap:not(:last-child) .minicolors-input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* bootstrap input-group rtl override */

[dir=rtl] .input-group .form-control,
[dir=rtl] .input-group-addon,
[dir=rtl] .input-group-btn > .btn,
[dir=rtl] .input-group-btn > .btn-group > .btn,
[dir=rtl] .input-group-btn > .dropdown-toggle {
  border: 1px solid #ccc;
  border-radius: 4px;
}

[dir=rtl] .input-group .form-control:first-child,
[dir=rtl] .input-group-addon:first-child,
[dir=rtl] .input-group-btn:first-child > .btn,
[dir=rtl] .input-group-btn:first-child > .btn-group > .btn,
[dir=rtl] .input-group-btn:first-child > .dropdown-toggle,
[dir=rtl] .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
[dir=rtl] .input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 0;
}

[dir=rtl] .input-group .form-control:last-child,
[dir=rtl] .input-group-addon:last-child,
[dir=rtl] .input-group-btn:last-child > .btn,
[dir=rtl] .input-group-btn:last-child > .btn-group > .btn,
[dir=rtl] .input-group-btn:last-child > .dropdown-toggle,
[dir=rtl] .input-group-btn:first-child > .btn:not(:first-child),
[dir=rtl] .input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Semantic Ui theme */

.minicolors-theme-semanticui .minicolors-swatch {
  top: 0;
  left: 0;
  /* LTR */
  padding: 18px;
}

[dir=rtl] .minicolors-theme-semanticui .minicolors-swatch {
  right: 0;
}

.minicolors-theme-semanticui input {
  text-indent: 30px;
}
.s-noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#s-rectBox {
  position: absolute;
  z-index: 1090;
  border: 2px dashed #cbd3e3;
}
/*!
 * TOAST UI Calendar
 * @version 1.13.1 | Tue Jul 06 2021
 * @author NHN FE Development Lab <dl_javascript@nhn.com>
 * @license MIT
 */

.tui-full-calendar-layout {
  height: 100%;
  position: relative;
  box-sizing: border-box;
}

.tui-full-calendar-layout * {
  box-sizing: border-box;
}

.tui-full-calendar-dragging {
  cursor: move;
}

.tui-full-calendar-resizing {
  cursor: row-resize;
}

.tui-full-calendar-resizing-x {
  cursor: col-resize;
}

.tui-full-calendar-hidden {
  display: none!important;
}

.tui-full-calendar-invisible span {
  visibility: hidden;
}

.tui-full-calendar-clear:after {
  content: "";
  display: block;
  clear: both;
}

.tui-full-calendar-scroll-y {
  overflow-y: scroll;
}

.tui-full-calendar-dot {
  display: inline-block;
  position: relative;
  top: -1px;
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.tui-full-calendar-holiday {
  color: red;
}

.tui-full-calendar-today {
  background: rgba(218,229,249,.3);
}

.handle-x {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAMAAACEE47CAAAACVBMVEX///////////+OSuX+AAAAA3RSTlMrQJG5H4EIAAAAEUlEQVR4AWNgYoRABhjEFAEAArQAIcHQcPsAAAAASUVORK5CYII=);
}

.handle-x,
.handle-y {
  background-position: 50%;
  background-repeat: no-repeat;
}

.handle-y {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAICAMAAADp7a43AAAACVBMVEX///////////+OSuX+AAAAA3RSTlMrQJG5H4EIAAAAEUlEQVR4AWNgYmRiZABB/CwAAtgAIUTUNkMAAAAASUVORK5CYII=);
}

@media only screen and (-moz-min-device-pixel-ratio:1.5),only screen and (-o-min-device-pixel-ratio:3/2),only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min-devicepixel-ratio:1.5),only screen and (min-resolution:1.5dppx) {
  .handle-x {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAICAMAAADHqI+lAAAACVBMVEX///////////+OSuX+AAAAA3RSTlMZK5EY+QKaAAAAGUlEQVR4AWNgYmJAwegCIMDIiIwxBKhhBgAcSABh8gN42gAAAABJRU5ErkJggg==);
    background-size: 8px 4px;
  }

  .handle-y {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAQCAMAAAAcVM5PAAAACVBMVEX///////////+OSuX+AAAAA3RSTlMEK5EMBzK5AAAAGElEQVR4AWNgYmIAYxgDBBgZQRjOoKcaABzQAGGjsIM/AAAAAElFTkSuQmCC);
    background-size: 4px 8px;
  }
}

.tui-full-calendar-month-week-item .tui-full-calendar-weekday-grid {
  overflow-y: hidden;
}

.tui-full-calendar-month-week-item .tui-full-calendar-weekday-schedules {
  overflow-y: visible;
  height: 0;
}

.tui-full-calendar-month-week-item .tui-full-calendar-weekday-schedule {
  margin: 0 10px;
}

.tui-full-calendar-month-week-item .tui-full-calendar-today {
  background: none;
}

.tui-full-calendar-month-week-item .tui-full-calendar-today .tui-full-calendar-weekday-grid-date-decorator {
  display: inline-block;
  width: 27px;
  height: 27px;
  line-height: 27px;
  text-align: center;
  background: #135de6;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  margin-left: 2px;
}

.tui-full-calendar-weekday-container,
.tui-full-calendar-weekday-grid,
.tui-full-calendar-weekday-grid-line {
  height: 100%;
  min-height: inherit;
}

.tui-full-calendar-weekday-grid {
  position: absolute;
  width: 100%;
  overflow-y: scroll;
}

.tui-full-calendar-weekday-border {
  border-top: 1px solid #ddd;
}

.tui-full-calendar-weekday-container {
  position: relative;
}

.tui-full-calendar-weekday-container>div {
  height: 100%;
}

.tui-full-calendar-weekday-grid-line {
  position: absolute;
  padding: 3px;
}

.tui-full-calendar-weekday-grid-line .tui-full-calendar-weekday-grid-footer {
  position: absolute;
  bottom: 4px;
}

.tui-full-calendar-weekday-grid-line .tui-full-calendar-weekday-grid-date {
  display: inline-block;
  width: 27px;
  height: 27px;
  line-height: 27px;
  text-align: center;
}

.tui-full-calendar-weekday-grid-line .tui-full-calendar-weekday-grid-date-title {
  line-height: 27px;
  margin-right: 5px;
}

.tui-full-calendar-weekday-grid-line .tui-full-calendar-weekday-grid-more-schedules {
  float: right;
  display: inline-block;
  height: 27px;
  line-height: 27px;
  padding: 0 5px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: #aaa;
}

.tui-full-calendar-weekday-creation,
.tui-full-calendar-weekday-schedules {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  overflow-y: scroll;
}

.tui-full-calendar-weekday-schedules {
  font-size: 12px;
}

.tui-full-calendar-weekday-schedules-height-span {
  width: 1px;
  margin-left: -1px;
}

.tui-full-calendar-weekday-schedule-block {
  position: absolute;
}

.tui-full-calendar-weekday-schedule-block-dragging-dim {
  opacity: .3;
}

.tui-full-calendar-weekday-schedule {
  position: relative;
  margin: 0 10px 0 1px;
  cursor: pointer;
  border-left-style: solid;
  border-left-width: 3px;
}

.tui-full-calendar-weekday-schedule.tui-full-calendar-weekday-schedule-time {
  border-left-width: 0;
}

.tui-full-calendar-weekday-schedule.tui-full-calendar-weekday-schedule-time .tui-full-calendar-weekday-schedule-title {
  padding-left: 9px;
}

.tui-full-calendar-weekday-schedule-bullet {
  position: absolute;
  padding: 0;
  width: 6px;
  height: 6px;
  top: 6px;
  left: 0;
  border-radius: 50%;
}

.tui-full-calendar-weekday-schedule-bullet-focused {
  left: 10px;
  background: #fff;
}

.tui-full-calendar-weekday-schedule-title {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 3px;
  font-weight: 700;
}

.tui-full-calendar-weekday-schedule-title-focused {
  padding-left: 16px;
}

.tui-full-calendar-weekday-schedule-cover {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.2);
  box-shadow: 0 2px 6px 0 rgba(0,0,0,.1);
}

.tui-full-calendar-weekday-exceed-left .tui-full-calendar-weekday-schedule {
  margin-left: 0;
  border-left-width: 0;
}

.tui-full-calendar-weekday-exceed-right .tui-full-calendar-weekday-schedule {
  margin-right: 0;
}

.tui-full-calendar-weekday-exceed-right .tui-full-calendar-weekday-resize-handle {
  display: none;
}

.tui-full-calendar-weekday-exceed-in-month {
  cursor: pointer;
}

.tui-full-calendar-weekday-exceed-in-month:hover {
  background-color: #f0f1f5;
}

.tui-full-calendar-weekday-collapse-btn,
.tui-full-calendar-weekday-exceed-in-week {
  position: absolute;
  bottom: 5px;
  margin-right: 5px;
  font-size: 12px;
  line-height: 14px;
  cursor: pointer;
  padding: 1px 5px;
  background-color: #fff;
  border: 1px solid #ddd;
  color: #000;
}

.tui-full-calendar-weekday-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  background-position: 3px;
  cursor: col-resize;
  line-height: 18px;
}

.tui-full-calendar-weekday-filled {
  background-color: #e8e8e8!important;
}

.tui-full-calendar-left {
  height: 100%;
  float: left;
  box-sizing: border-box;
  display: table;
}

.tui-full-calendar-left-content {
  display: table-cell;
  vertical-align: middle;
  text-align: right;
  font-size: 11px;
}

.tui-full-calendar-right {
  height: 100%;
  overflow-y: scroll;
  position: relative;
}

.tui-full-calendar-week-container {
  width: 100%;
  height: inherit;
  display: inline-block;
  font-size: 10px;
  min-height: 600px;
}

.tui-full-calendar-week-container .tui-full-calendar-today {
  background: none;
}

.tui-full-calendar-dayname {
  position: absolute;
  margin-left: -1px;
  height: 100%;
  overflow: hidden;
}

.tui-full-calendar-dayname.tui-full-calendar-today {
  font-weight: 700;
}

.tui-full-calendar-dayname-container {
  overflow-y: scroll;
}

.tui-full-calendar-dayname-leftmargin {
  position: relative;
  height: 100%;
}

.tui-full-calendar-dayname-date {
  font-size: 26px;
}

.tui-full-calendar-dayname-name {
  font-weight: 700;
  font-size: 12px;
}

.tui-full-calendar-daygrid-layout {
  height: 100%;
}

.tui-full-calendar-daygrid-layout .tui-full-calendar-right {
  overflow-y: hidden;
}

.tui-full-calendar-daygrid-guide-creation-block {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
}

.tui-full-calendar-timegrid-container {
  height: 100%;
  position: relative;
  overflow: hidden;
  overflow-y: scroll;
}

.tui-full-calendar-timegrid-container-split {
  height: 100%;
  position: relative;
  overflow: hidden;
}

.tui-full-calendar-timegrid-left {
  position: absolute;
}

.tui-full-calendar-timegrid-hour {
  position: relative;
  color: #555;
  box-sizing: border-box;
}

.tui-full-calendar-timegrid-hour:first-child span {
  display: none;
}

.tui-full-calendar-timegrid-hour:last-child {
  border-bottom: none;
}

.tui-full-calendar-timegrid-hour span {
  position: absolute;
  top: -11px;
  left: 0;
  right: 5px;
  text-align: right;
  line-height: 25px;
}

.tui-full-calendar-timegrid-right {
  position: relative;
}

.tui-full-calendar-timegrid-gridline {
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
}

.tui-full-calendar-timegrid-gridline:last-child {
  border-bottom: none;
}

.tui-full-calendar-timegrid-schedules {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
}

.tui-full-calendar-timegrid-hourmarker {
  position: absolute;
  width: 100%;
  display: table;
}

.tui-full-calendar-timegrid-hourmarker-line-left {
  position: absolute;
  min-height: 1px;
  left: 0;
}

.tui-full-calendar-timegrid-hourmarker-line-today {
  position: absolute;
  min-height: 1px;
}

.tui-full-calendar-timegrid-hourmarker-line-right {
  position: absolute;
  min-height: 1px;
  right: 0;
}

.tui-full-calendar-timegrid-hourmarker-time {
  padding-right: 5px;
  line-height: 12px;
  text-align: right;
  display: table-cell;
  vertical-align: bottom;
}

.tui-full-calendar-timegrid-todaymarker {
  position: absolute;
  text-indent: -9999px;
  width: 9px;
  height: 9px;
  background-color: #135de6;
  margin: -4px 0 0 -5px;
  border-radius: 50%;
}

.tui-full-calendar-timegrid-sticky-container {
  position: absolute;
  top: 0;
}

.tui-full-calendar-timegrid-timezone-label-container {
  position: absolute;
}

.tui-full-calendar-timegrid-timezone-label-cell {
  display: table;
}

.tui-full-calendar-timegrid-timezone-label {
  display: table-cell;
  vertical-align: middle;
  padding-right: 5px;
  text-align: right;
}

.tui-full-calendar-timegrid-timezone-close-btn {
  cursor: pointer;
  position: absolute;
  text-align: center;
  background-color: #fff;
}

.tui-full-calendar-timegrid-timezone-close-btn .tui-full-calendar-icon {
  width: 5px;
  height: 10px;
}

.tui-full-calendar-time-date {
  position: absolute;
  height: 100%;
  margin-left: -1px;
  box-sizing: content-box;
}

.tui-full-calendar-time-date:last-child {
  border-right: none;
  margin: 0;
}

.tui-full-calendar-time-date:last-child .tui-full-calendar-time-guide-creation,
.tui-full-calendar-time-date:last-child .tui-full-calendar-time-schedule {
  left: 0;
}

.tui-full-calendar-time-date-schedule-block-wrap {
  position: relative;
  height: 100%;
}

.tui-full-calendar-time-date-schedule-block {
  position: absolute;
  right: 0;
}

.tui-full-calendar-time-date-schedule-block-pending {
  opacity: .7;
}

.tui-full-calendar-time-date-schedule-block-dragging-dim {
  opacity: .3;
}

.tui-full-calendar-time-date-schedule-block-focused {
  box-shadow: 0 0 8px 0 rgba(0,0,0,.2);
}

.tui-full-calendar-time-date-schedule-block-cover {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.2);
  box-shadow: 0 2px 6px 0 rgba(0,0,0,.1);
}

.tui-full-calendar-time-schedule {
  position: relative;
  left: 1px;
  height: 100%;
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
}

.tui-full-calendar-time-schedule-content {
  overflow: hidden;
  border-left-width: 3px;
  border-left-style: solid;
  padding: 1px 0 0 3px;
}

.tui-full-calendar-time-schedule-content-travel-time {
  font-weight: 400;
  font-size: 11px;
}

.tui-full-calendar-time-resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 5px;
  text-align: center;
  color: #fff;
  cursor: row-resize;
  background-position: top;
}

.tui-full-calendar-time-guide-creation {
  position: absolute;
  right: 10px;
  left: 1px;
  padding: 3px;
}

.tui-full-calendar-time-guide-move .tui-full-calendar-time-resize-handle,
.tui-full-calendar-time-guide-move .tui-full-calendar-time-schedule,
.tui-full-calendar-time-guide-resize .tui-full-calendar-time-resize-handle,
.tui-full-calendar-time-guide-resize .tui-full-calendar-time-schedule {
  opacity: .8;
  z-index: 97;
}

.tui-full-calendar-time-guide-creation-label {
  cursor: default;
}

.tui-full-calendar-time-guide-bottom {
  position: absolute;
  bottom: 3px;
}

.tui-full-calendar-month {
  height: 100%;
  min-height: 600px;
}

.tui-full-calendar-month-dayname {
  width: 100%;
  position: absolute;
  font-size: 13px;
}

.tui-full-calendar-month-dayname-item {
  height: 100%;
  font-weight: 700;
}

.tui-full-calendar-month-week-item {
  position: relative;
}

.tui-full-calendar-month-week-item>div {
  height: 100%;
}

.tui-full-calendar-month-more {
  height: inherit;
  min-width: 280px;
  min-height: 150px;
}

.tui-full-calendar-month-more-title {
  position: relative;
}

.tui-full-calendar-month-more-title-day {
  font-size: 23px;
  color: #333;
}

.tui-full-calendar-month-more-title-day-label {
  font-size: 12px;
  color: #333;
}

.tui-full-calendar-month-more-close {
  position: absolute;
  right: 0;
  outline: 0;
  background: none;
  border: 0;
  font-size: 14px;
  line-height: 28px;
  padding: 0 7px;
  cursor: pointer;
}

.tui-full-calendar-month-more-list {
  overflow-y: auto;
}

.tui-full-calendar-month-more-schedule {
  cursor: pointer;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
}

.tui-full-calendar-month-guide-block {
  position: absolute;
}

.tui-full-calendar-month-weekday-schedule {
  margin-top: 2px;
}

.tui-full-calendar-month-creation-guide {
  top: 0;
  bottom: -1px;
  left: -1px;
  right: 0;
  position: absolute;
  z-index: 20;
}

.tui-full-calendar-month-guide-focused {
  box-shadow: 0 0 8px 0 rgba(0,0,0,.2);
}

.tui-full-calendar-month-guide {
  position: relative;
  padding-left: 3px;
  line-height: 18px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tui-full-calendar-month-guide-cover {
  width: 100%;
  position: absolute;
  top: -50%;
  left: -50%;
  background-color: rgba(0,0,0,.2);
  box-shadow: 0 2px 6px 0 rgba(0,0,0,.1);
}

.tui-full-calendar-month-exceed-left .tui-full-calendar-month-guide {
  margin-left: 0;
}

.tui-full-calendar-month-exceed-right .tui-full-calendar-month-guide {
  margin-right: 0;
}

.tui-full-calendar-month-exceed-right .tui-full-calendar-month-guide-handle {
  display: none;
}

.tui-full-calendar-month-guide-handle {
  position: absolute;
  top: 0;
  right: 3px;
  width: 6px;
  background-position: 3px;
  cursor: col-resize;
}

.tui-full-calendar-vlayout-container {
  position: relative;
}

.tui-full-calendar-splitter {
  clear: left;
  cursor: row-resize;
}

.tui-full-calendar-splitter:hover {
  border-color: #999;
}

.tui-full-calendar-splitter-focused {
  background-color: #ddd;
  border: none;
}

.tui-full-calendar-splitter-guide {
  position: absolute;
  width: 100%;
  height: 3px;
  border: none;
  background-color: #e8e8e8;
}

.tui-full-calendar-popup {
  position: absolute;
  font-weight: 2.5;
  box-shadow: 0 2px 6px 0 rgba(0,0,0,.1);
  clear: both;
}

.tui-full-calendar-popup-container {
  min-width: 474px;
  box-shadow: 0 2px 6px 0 rgba(0,0,0,.1);
  background-color: #fff;
  border: 1px solid #d5d5d5;
  padding: 17px;
  border-radius: 2px;
}

.tui-full-calendar-popup-section {
  font-size: 0;
  min-height: 40px;
}

.tui-full-calendar-section-calendar {
  width: 176px;
}

.tui-full-calendar-section-calendar.tui-full-calendar-hide {
  height: 21px;
  visibility: hidden;
}

.tui-full-calendar-section-title {
  width: calc(100% - 36px);
  padding-right: 4px;
}

.tui-full-calendar-section-title input {
  width: 365px;
}

.tui-full-calendar-button.tui-full-calendar-section-private {
  height: 32px;
  padding: 8px;
  font-size: 0;
  margin-left: 4px;
}

.tui-full-calendar-section-private.tui-full-calendar-public .tui-full-calendar-ic-private {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAKdJREFUKBVjYCATMKLri46Olvn9+3fX////HUByjIyMB1hZWcuWLl36BFktikaQpl+/fl0EKhBCVgRkv2NjY9NH1syErABkE1TTdqBCWRAG8reDxKBycOUoGmHOA2pIA5kOwiA2SDVMDq4TmREaGvofhJHFcLHhfgwLC9sKNNULl0KQODCgtq1atcobxIY7lZAmkGJkNXCNIAlSwIjSCApqIgJnK0wNALoOPwSpOcq0AAAAAElFTkSuQmCC) no-repeat;
}

.tui-full-calendar-section-end-date,
.tui-full-calendar-section-start-date {
  width: 176px;
}

.tui-full-calendar-section-end-date input,
.tui-full-calendar-section-start-date input {
  width: 139px;
}

.tui-full-calendar-section-end-date:focus .tui-datepicker,
.tui-full-calendar-section-end-date:focus .tui-full-calendar-popup-section-item,
.tui-full-calendar-section-end-date:hover .tui-datepicker,
.tui-full-calendar-section-end-date:hover .tui-full-calendar-popup-section-item,
.tui-full-calendar-section-start-date:focus .tui-datepicker,
.tui-full-calendar-section-start-date:focus .tui-full-calendar-popup-section-item,
.tui-full-calendar-section-start-date:hover .tui-datepicker,
.tui-full-calendar-section-start-date:hover .tui-full-calendar-popup-section-item {
  border-color: #bbb;
}

.tui-full-calendar-section-date-dash {
  font-size: 12px;
  color: #d5d5d5;
  height: 32px;
  padding: 0 4px;
  vertical-align: middle;
}

.tui-full-calendar-popup-section-item.tui-full-calendar-section-allday {
  border: none;
  padding: 0 0 0 8px;
  cursor: pointer;
}

.tui-full-calendar-popup-section-item.tui-full-calendar-section-location {
  display: block;
}

.tui-full-calendar-popup-section-item.tui-full-calendar-section-location input {
  width: 400px;
}

.tui-full-calendar-section-allday .tui-full-calendar-icon.tui-full-calendar-ic-checkbox {
  margin: 0;
}

.tui-full-calendar-popup-section-item.tui-full-calendar-section-allday .tui-full-calendar-content {
  padding-left: 4px;
}

.tui-full-calendar-section-state {
  width: 109px;
}

.tui-full-calendar-section-state .tui-full-calendar-content {
  width: 58px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.tui-full-calendar-popup-section-item {
  height: 32px;
  padding: 0 9px 0 12px;
  border: 1px solid #d5d5d5;
  display: inline-block;
  font-size: 0;
  border-radius: 2px;
}

.tui-full-calendar-popup-section-item:hover {
  border-color: #bbb;
}

.tui-full-calendar-popup-section-item:focus {
  border-color: #bbb;
}

.tui-full-calendar-popup-section-item .tui-full-calendar-icon {
  position: relative;
}

.tui-full-calendar-popup-section-item .tui-full-calendar-content {
  text-align: left;
  display: inline-block;
  font-size: 12px;
  vertical-align: middle;
  position: relative;
  padding-left: 8px;
}

.tui-full-calendar-section-calendar .tui-full-calendar-dropdown-button .tui-full-calendar-content {
  width: 125px;
  text-overflow: ellipsis;
  overflow: hidden;
  top: -1px;
}

.tui-full-calendar-popup-section-item input {
  border: none;
  height: 30px;
  outline: none;
  display: inline-block;
}

.tui-full-calendar-popup-section-item input::placeholder {
  color: #bbb;
  font-weight: 300;
}

.tui-full-calendar-dropdown {
  position: relative;
}

.tui-full-calendar-dropdown:hover .tui-full-calendar-dropdown-button {
  border: 1px solid #bbb;
}

.tui-full-calendar-dropdown-button.tui-full-calendar-popup-section-item {
  height: 32px;
  font-size: 0;
  top: -1px;
}

.tui-full-calendar-dropdown-arrow {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAHlJREFUKBVjYBgFOEOAEVkmPDxc89+/f6eAYjzI4kD2FyYmJrOVK1deh4kzwRggGiQBVJCELAZig8SQNYHEmEEEMrh69eo1HR0dfqCYJUickZGxf9WqVf3IakBsFBthklpaWmVA9mEQhrJhUoTp0NBQCRAmrHL4qgAAuu4cWZOZIGsAAAAASUVORK5CYII=) no-repeat;
}

.dropdown.open .tui-full-calendar-dropdown-arrow,
.tui-full-calendar-open .tui-full-calendar-dropdown-arrow {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAIFJREFUKBVjYBj+gBmXF2NiYiTV1dV5rl279gWbGiZsgg0NDSw/f/5cCZRbBWJjU4PVRjExsR6g4nAgln/z5g3v1atXd6JrxtAYHh4e+v///z4khZa6urrXgJqvIYkxMCJzgJo0//37dwooxoMsDmR/YWJiMlu5cuV1NPFRLrYQAADMVCaUtbG7XwAAAABJRU5ErkJggg==) no-repeat;
}

.tui-full-calendar-dropdown-menu {
  position: absolute;
  top: 31px;
  padding: 4px 0;
  background-color: #fff;
  border: 1px solid #d5d5d5;
  border-top: none;
  border-radius: 0 0 2px 2px;
  width: 100%;
  display: none;
}

.tui-full-calendar-dropdown:hover .tui-full-calendar-dropdown-menu {
  border: 1px solid #bbb;
  border-top: none;
}

.tui-full-calendar-open .tui-full-calendar-dropdown-menu {
  display: block;
}

.tui-full-calendar-dropdown-menu-item {
  height: 30px;
  border: none;
  cursor: pointer;
}

.tui-full-calendar-section-calendar .tui-full-calendar-dropdown-menu-item,
.tui-full-calendar-section-state .tui-full-calendar-dropdown-menu-item {
  width: 100%;
}

.tui-full-calendar-dropdown-menu-item:hover {
  background-color: rgba(81,92,230,.05);
}

.tui-full-calendar-dropdown-menu-item .tui-full-calendar-content {
  line-height: 30px;
}

.tui-full-calendar-button.tui-full-calendar-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #fff;
  padding: 2px;
  border: none;
}

.tui-full-calendar-section-button-save {
  height: 36px;
}

.tui-full-calendar-popup-save {
  float: right;
}

.tui-full-calendar-popup-arrow-border,
.tui-full-calendar-popup-arrow-fill {
  position: absolute;
}

.tui-full-calendar-arrow-top .tui-full-calendar-popup-arrow-border {
  border: 8px solid transparent;
  border-top: none;
  border-bottom: 8px solid #d5d5d5;
  left: calc(50% - 8px);
  top: -7px;
}

.tui-full-calendar-arrow-right .tui-full-calendar-popup-arrow-border {
  border: 8px solid transparent;
  border-right: none;
  border-left: 8px solid #d5d5d5;
  top: calc(50% - 8px);
  right: -7px;
}

.tui-full-calendar-arrow-bottom .tui-full-calendar-popup-arrow-border {
  border: 8px solid transparent;
  border-top-color: #d5d5d5;
  border-bottom: none;
  left: calc(50% - 8px);
  bottom: -7px;
}

.tui-full-calendar-arrow-left .tui-full-calendar-popup-arrow-border {
  border: 8px solid transparent;
  border-right-color: #d5d5d5;
  border-left: none;
  top: calc(50% - 8px);
  left: -7px;
}

.tui-full-calendar-arrow-top .tui-full-calendar-popup-arrow-fill {
  border: 7px solid transparent;
  border-top: none;
  border-bottom: 7px solid #fff;
  left: -7px;
  top: 1px;
}

.tui-full-calendar-arrow-right .tui-full-calendar-popup-arrow-fill {
  border: 7px solid transparent;
  border-right: none;
  border-left: 7px solid #fff;
  top: -7px;
  right: 1px;
}

.tui-full-calendar-arrow-bottom .tui-full-calendar-popup-arrow-fill {
  border: 7px solid transparent;
  border-top-color: #fff;
  border-bottom: none;
  left: -7px;
  bottom: 1px;
}

.tui-full-calendar-arrow-left .tui-full-calendar-popup-arrow-fill {
  border: 7px solid transparent;
  border-right-color: #fff;
  border-left: none;
  top: -7px;
  left: 1px;
}

.tui-full-calendar-button {
  background: #fff;
  border: 1px solid #d5d5d5;
  border-radius: 2px;
  text-align: center;
  outline: none;
  font-size: 12px;
  cursor: pointer;
  color: #333;
}

.tui-full-calendar-button:hover {
  border-color: #bbb;
  color: #333;
}

.tui-full-calendar-button:active {
  background: #f9f9f9;
  color: #333;
}

.tui-full-calendar-button .round {
  border-radius: 25px;
}

.tui-full-calendar-confirm {
  width: 96px;
  height: 36px;
  border-radius: 40px;
  background-color: #ff6618;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  border: none;
}

.tui-full-calendar-confirm:hover {
  background-color: #e55b15;
  color: #fff;
}

.tui-full-calendar-confirm:active {
  background-color: #d95614;
  color: #fff;
}

.tui-full-calendar-icon.tui-full-calendar-right {
  float: right;
  top: 1px;
}

.tui-full-calendar-icon .tui-full-calendar-none {
  display: none;
}

.tui-full-calendar-icon.tui-full-calendar-calendar-dot {
  border-radius: 8px;
  width: 12px;
  height: 12px;
  margin: 1px;
}

input[type=checkbox].tui-full-calendar-checkbox-square {
  display: none;
}

input[type=checkbox].tui-full-calendar-checkbox-square+span {
  display: inline-block;
  cursor: pointer;
  line-height: 14px;
  margin-right: 8px;
  width: 14px;
  height: 14px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAADpJREFUKBVjPHfu3O5///65MJAAmJiY9jCcOXPmP6kApIeJBItQlI5qRAkOVM5o4KCGBwqPkcxEvhsAbzRE+Jhb9IwAAAAASUVORK5CYII=) no-repeat;
  vertical-align: middle;
}

input[type=checkbox].tui-full-calendar-checkbox-square:checked+span {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAMBJREFUKBWVkjEOwjAMRe2WgZW7IIHEDdhghhuwcQ42rlJugAQS54Cxa5cq1QM5TUpByZfS2j9+dlJVt/tX5ZxbS4ZU9VLkQvSHKTIGRaVJYFmKrBbTCJxE2UgCdDzMZDkHrOV6b95V0US6UmgKodujEZbJg0B0ZgEModO5lrY1TMQf1TpyJGBEjD+E2NPN7ukIUDiF/BfEXgRiGEw8NgkffYGYwCi808fpn/6OvfUfsDr/Vc1IfRf8sKnFVqeiVQfDu0tf/nWH9gAAAABJRU5ErkJggg==) no-repeat;
}

input[type=checkbox].tui-full-calendar-checkbox-round {
  display: none;
}

input[type=checkbox].tui-full-calendar-checkbox-round+span {
  display: inline-block;
  cursor: pointer;
  width: 14px;
  height: 14px;
  line-height: 14px;
  vertical-align: middle;
  margin-right: 8px;
  border-radius: 8px;
  border: 2px solid;
  background: transparent;
}

.tui-full-calendar-popup-top-line {
  position: absolute;
  border-radius: 2px 2px 0 0;
  width: 100%;
  height: 4px;
  border: none;
  top: 0;
}

.tui-full-calendar-popup-detail .tui-full-calendar-popup-container {
  width: 301px;
  min-width: 301px;
  padding-bottom: 0;
}

.tui-full-calendar-popup-detail .tui-full-calendar-icon {
  width: 12px;
  height: 12px;
  background-size: 12px;
  position: relative;
  margin-right: 8px;
}

.tui-full-calendar-popup-detail .tui-full-calendar-icon.tui-full-calendar-ic-location-b,
.tui-full-calendar-popup-detail .tui-full-calendar-icon.tui-full-calendar-ic-user-b {
  top: -2px;
}

.tui-full-calendar-popup-detail .tui-full-calendar-icon.tui-full-calendar-ic-state-b {
  top: -1px;
}

.tui-full-calendar-popup-detail .tui-full-calendar-icon.tui-full-calendar-calendar-dot {
  width: 10px;
  height: 10px;
  margin-right: 8px;
  top: -1px;
}

.tui-full-calendar-popup-detail .tui-full-calendar-content {
  line-height: 24px;
  height: 24px;
  font-size: 12px;
  line-height: 2;
}

.tui-full-calendar-popup-detail .tui-full-calendar-section-header {
  margin-bottom: 6px;
}

.tui-full-calendar-popup-detail .tui-full-calendar-popup-detail-item-separate {
  margin-top: 4px;
}

.tui-full-calendar-popup-detail .tui-full-calendar-popup-detail-item-indent {
  text-indent: -20px;
  padding-left: 20px;
}

.tui-full-calendar-popup-detail .tui-full-calendar-schedule-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  word-break: break-all;
}

.tui-full-calendar-popup-detail .tui-full-calendar-schedule-private {
  display: none;
  width: 16px;
  height: 16px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAKpJREFUKBVjYCATMKLri46Olvn9+3fX////HUByjIyMB1hZWcuWLl36BFktikaQpl+/fl0EKhBCVgRkv2NjY9NH1syErABkE1TTdqBCWRAG8reDxKBycOUoGmHOA2pIA5kOwiA2SDVMDqYTRSNQUBIkgewkJDZYDqYR7sewsLCtQFO9YBLYaGBAbVu1apU3SA5uIyFNIMXIauAaQRKkgBGlERTURATOVpgaABRQQOK46wEAAAAAAElFTkSuQmCC) no-repeat 16px;
}

.tui-full-calendar-popup-detail .tui-full-calendar-schedule-private .tui-full-calendar-ic-private {
  display: block;
}

.tui-full-calendar-popup-detail .tui-full-calendar-section-detail {
  margin-bottom: 16px;
}

.tui-full-calendar-popup-detail .tui-full-calendar-section-button {
  border-top: 1px solid #e5e5e5;
  font-size: 0;
}

.tui-full-calendar-section-button .tui-full-calendar-icon {
  margin-right: 4px;
  top: -3px;
}

.tui-full-calendar-section-button .tui-full-calendar-content {
  position: relative;
  top: 2px;
}

.tui-full-calendar-popup-delete,
.tui-full-calendar-popup-edit {
  display: inline-block;
  padding: 7px 9px 11px;
  width: calc(50% - 1px);
  outline: none;
  background: none;
  border: none;
  cursor: pointer;
}

.tui-full-calendar-popup-vertical-line {
  background: #e5e5e5;
  width: 1px;
  height: 14px;
  vertical-align: middle;
  display: inline-block;
  margin-top: -7px;
}

.tui-datepicker {
  left: -12px;
  z-index: 1;
  border-color: #d5d5d5;
}

.tui-full-calendar-icon {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
}

.tui-full-calendar-icon.tui-full-calendar-ic-title {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAO5JREFUKBVjYCATMOLSFxkZqfHnz5+1QHktNDVbV69e7cOCJgjmQjXtB3IksMh7g8SY0CXQNTEyMlYD1fBCabhyFI3omkCq/v//PwnotC8gGq4LyIBrxKYJpBBoU15oaCgPiEbWCPYjUEIFGBBY/QS0qRWooRVIg/UBDXgMYoBtBHJSgWxsAQFWjET8BBqQBuLDNM4Can6GpAAb8ydQMADo3x0gSbDGlStX3gVqdMSjGUUTSCNKAggPD1cDOmU/EEuBJKEAQxNIHEUjSABNM1ZNIHXMIAIZXL169a2+vv5moK18QKeXAv20B1meYjYAr7xrljpOzc0AAAAASUVORK5CYII=) no-repeat;
}

.tui-full-calendar-icon.tui-full-calendar-ic-location {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAR1JREFUKBWdUTtPg1AUBiT8CydHJtv/0MTJRWAgcTK1bq0/pO3k4E4IYLo2Me46tS4wumjSpV07kAb6HXLPzaGPRZLL+c73uE/D+OdnHuaCIOhVVTUEf620pWVZ0yRJ3qW3FfR9f1zX9UgaGJumOUnT9Fn3DDzPuwPOuD9TvSzL3kizhOFJ4LnjOJc0wM0FP2Asgx0mEehHUfRHgzDzqF3GOogzbJg8V6XHFqYv4Cvqy7J8DcOwWYmw8Hwy1kHMRjcaKuEGgV82caWbZay3indagJyxcKLOlKeRdJA627YfUVaN0v6tlKbZVjCO4zW2cw91px3AxJEmOONCNoTzPP9xXZfOd6u0Bzz60RGOgmQuiuIb4S3gB0IvaoJW2QMDs1bBoH1CAQAAAABJRU5ErkJggg==) no-repeat;
}

.tui-full-calendar-icon.tui-full-calendar-ic-date {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAGpJREFUKBVjYKAGCA0N/Q/C6GZhE2cEKQoLC9v6//9/L3QN2PiMjIzbVq1a5c0EkiRWE7JasEZsJhMSI1sjC7LJq1evBvsZWQyZjRxwZNs4hDSiBA6y55EDBRsb7EdQasAmiUNsKw5x4oQBkUAeDPJ53KsAAAAASUVORK5CYII=) no-repeat;
}

.tui-full-calendar-icon.tui-full-calendar-ic-state {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAIxJREFUKBVjYCATMKLrCw8P9/z3798soLgMVO4JExNT2sqVK7cjq2VC5oDYME2MjIyNIAwUkoGKoShlQeFBOGCbVq1a1QDihoaG1gMpmO0gITAAOzUsLGzr////vWCC+GigK7YBDfUGO5VYTSADYWox/IjPNmS5UY3IoYHGBgcOKG7QxPFxt+KTJCgHAGcZJbGLRuJ2AAAAAElFTkSuQmCC) no-repeat;
}

.tui-full-calendar-icon.tui-full-calendar-ic-private {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAKpJREFUKBVjYCATMKLri46Olvn9+3fX////HUByjIyMB1hZWcuWLl36BFktikaQpl+/fl0EKhBCVgRkv2NjY9NH1syErABkE1TTdqBCWRAG8reDxKBycOUoGmHOA2pIA5kOwiA2SDVMDqYTRSNQUBIkgewkJDZYDqYR7sewsLCtQFO9YBLYaGBAbVu1apU3SA5uIyFNIMXIauAaQRKkgBGlERTURATOVpgaABRQQOK46wEAAAAAAElFTkSuQmCC) no-repeat;
}

.tui-full-calendar-icon.tui-full-calendar-ic-close {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAJRJREFUKBXFkNERhCAMREUbuEKohzq0Eq2DDq6Da4B60KezDORkxj+ZwchmX0IYhtdWCGFl9y5g82NtzDnPdzAaudo76ZBS+nrvPxiInMkJcs5tMcZFfqcfxdqIRiELof+BiIJPg+mExmpmvKRn3zKj7OrG9Y79szPL14A1xEP0Hgy4gBZS5R7czHj3ehSgOzkVeyfuGrBw/WLm0hsAAAAASUVORK5CYII=) no-repeat;
}

.tui-full-calendar-ic-location-b {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAOZJREFUKBWVUT0KwjAUbkzGTuJWPYNDpV0cXD2ETuIRBK+gs4ubp3BwcXBp6eINBKWDgydoid9X8oKCggYeee/7S9IGwZ9LverTNO3Wdb2y1o6IK6WOWutFlmU30XmDE58hbgvpTA+Y+mJqCemS20jdG2N6LPYMICc6b5BrIG3ONBZ7CoVj7w0cfllGRDj+gKQpjt/iPU0ye/LkROcNANaoCUzjqqquIsBuHddAWoiyLO9RFHUwJ4JxR/qmKIqdYG9vCMNwCeIiJHuHecj/B0GSJBng7ifO+ErDPM8L4b7ucRzPWJ8ET1E7YC7tmi9qAAAAAElFTkSuQmCC);
}

.tui-full-calendar-ic-state-b {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAHlJREFUKBVjYCARMCKrNzEx8QTyZ/3//18GJM7IyPgESKWdOXNmO4gPAkwQCk6CFQMVNoIwVOMsuCw6w9jY+D8Iw8TR+SBxsJOATtkKNM0LphAbDbRxG9Bp3mAnEVIMMgCmBt0P2AxHERusGkAhgOJQ7Jyt2IUJiAIAwwIn24FgmhkAAAAASUVORK5CYII=);
}

.tui-full-calendar-icon.tui-full-calendar-ic-user-b {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAJpJREFUKBVjYKA1YES3wMTExBMoNgsqnnbmzJntyGqYkDlQ9qz////LgDCQD9MIV4ZNA1wSGwObhjRGRsYnIAzUkIZNE0licE+bm5tr/fnzJx1osjPQBFmoKY+BftnLwsIy8+TJk9dAYmANxsbGoUD2YiBmBwliAT+BYrFnz55dDfNDO1AAl2KQfpAcSA0DTIMyiEMAEKMG0wgAolIjcM7Tjm8AAAAASUVORK5CYII=);
}

.tui-full-calendar-icon.tui-full-calendar-ic-edit {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAMdJREFUKBVjYCARMOJTb2xsLMfIyBjLysq64Pjx409BapnwaQDKzf7//3/L79+/D1tbW0uB1LJg02BmZqYIVPgdKBf/79+//UC2xs+fP8OB/H4MG0CK//79ewCkEGQYExOTI5DawMnJuQTER/EDTDFQXA4kCQQ3QBpOnz79AsJF8gMWxTA1KDTYBhyKMUwH6WSysrKSB7kZyIY5AySOVTFIggno+5VAmijFYA1AwhzEgAKcJsMUwIMVGKPH2NnZ7ZFDBKYImQYAuO5YIMgk39gAAAAASUVORK5CYII=);
}

.tui-full-calendar-icon.tui-full-calendar-ic-delete {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAFhJREFUKBVjYCARMKKrNzEx2fr//38vkDgjI+O2M2fOeCOrAWtAVoQsicyGaWZCFsTHBtr6H588Tjm4H4yNjfGacPbsWbBaop0Es3JYaQBFDMxjWOitMDEA3EEZfFEISwUAAAAASUVORK5CYII=);
}

.tui-full-calendar-icon.tui-full-calendar-ic-arrow-solid-top {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAIFJREFUKBVjYBj+gBmXF2NiYiTV1dV5rl279gWbGiZsgg0NDSw/f/5cCZRbBWJjU4PVRjExsR6g4nAgln/z5g3v1atXd6JrxtAYHh4e+v///z4khZa6urrXgJqvIYkxMCJzgJo0//37dwooxoMsDmR/YWJiMlu5cuV1NPFRLrYQAADMVCaUtbG7XwAAAABJRU5ErkJggg==) no-repeat;
}

.tui-full-calendar-icon.tui-full-calendar-ic-milestone {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAGFJREFUKBVjYCARMILU/3dw+I+hj5FxG+P+/d7o4rg1IKtE0syELI6T/f+/F0yOOA0w1UCa9hpYkGxjYDxwABwIILH/jo5bGWBuZ2TcClOHogEmCKKxBSlInPZ+ANlCEgAA37EU4AHbBQUAAAAASUVORK5CYII=) no-repeat;
}

.tui-full-calendar-icon.tui-full-calendar-ic-arrow-left {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAHCAYAAAAvZezQAAAAAXNSR0IArs4c6QAAAFZJREFUCB1jZICCyspK83///hUxgvhVVVV6f//+3c3ExJTMVFNTowqU2cHMzJzf3t6+hen379/zgIp2t7W1rQCpZmJlZU0C0q5AbREgAQwzwAIgGZgtADMCJqH/QyvhAAAAAElFTkSuQmCC) no-repeat;
}

.tui-full-calendar-icon.tui-full-calendar-ic-arrow-right {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAHCAYAAAAvZezQAAAAAXNSR0IArs4c6QAAAFxJREFUCB1jKC8vX1lZWWnOAAVMQLD4379/m6qqqvRAYowgAsiJAAr2sbCw2IMFQIIVFRUL////r8SCpMKVlZXVnhFooA9Q+VxmZmbXtra2S0xATizQYD8QB6QaAJMLJ9BqE9yTAAAAAElFTkSuQmCC) no-repeat;
}

.tui-full-calendar-ic-repeat-b {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAQpJREFUKBVjYCARMCKrNzU1tf/3718lUMwQiP8yMjKeYWJi6j516tRhExOThjNnzjTANQAFqv///98CVHQPSO8A0ixATa5AtjyQPgDETmfPngULMpiZmbn//fu3BSg4B6ggCyjxG8hm8PT0ZH/9+vUJoJgTiA8CTCACqDgXaOJ9Xl7eTJhikDhQcSVQsQGITT8A9rSxsfF/mJVApzWCQgPGd3BwYPny5cstoNOuAZ3rAwoJOAAqviAqKtoOEwAaxPr58+dpQL4iEGeAxJFt2AfkOwA1PQTSu4Em/gGyPYC0EpCuAdraCtIADiWgQCPQOmdmZmYHoNgVoCJfIB0CpG8DI84BphgoRjoAAAzgdELI91E5AAAAAElFTkSuQmCC);
}

/*# sourceMappingURL=tui-calendar.min.css.map */
/*!
 * TOAST UI Date Picker
 * @version 4.2.2
 * @author NHN. FE Development Lab <dl_javascript@nhn.com>
 * @license MIT
 */

.tui-calendar {
  position: relative;
  background-color: #fff;
  border: 1px solid #aaa;
  width: 274px;
}

.tui-calendar * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.tui-calendar div {
  text-align: center;
}

.tui-calendar caption {
  padding: 0;
}

.tui-calendar caption span {
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
}

.tui-calendar button,
.tui-datepicker-dropdown button,
.tui-datepicker-selector button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.tui-datepicker-dropdown .tui-ico-check,
.tui-ico-caret,
.tui-ico-date,
.tui-ico-time {
  overflow: hidden;
  display: inline-block;
  width: 1px;
  height: 1px;
  line-height: 300px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC8AAAA+CAYAAAC7rUKSAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpERjdGMzkzODVEQkRFNjExQkVCMjlDOUFDNzZDM0E5NCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1ODVCRTc4NkM2QkQxMUU2OTgzMzhGQjZFMjcyMTQ1RSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1ODVCRTc4NUM2QkQxMUU2OTgzMzhGQjZFMjcyMTQ1RSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjFERENDMTc0QjlDNkU2MTE5OTc0QjIwOTY3QkQzNjZBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkRGN0YzOTM4NURCREU2MTFCRUIyOUM5QUM3NkMzQTk0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ClaYfwAACcFJREFUeNrEWgtwVOUVPnt37+4mmyUhkSQLGEigQ4uRQiEITe0U0Djio61ArNqpQguWdtrKtNqKM9W2Y6sOHaWdUaEvmVZtQaYjg8ZHU6zFApX4GAGdiYaHQmISks1r2Ueyt+fcPXdz9+69d/+72dQz883e+z92v/+/5z//95+7rsWLF4PB1jBu5vtvIn6IWIXoNDbetGkTfSjgzFxm/RRFgXA4DNFoFOLxuFrm9XrB5/PB1KlTweVyZXyJx4T4nxDNurI/IhYhXuUBnIFJsOHhYejp6YHy8nIoLS1VSZPRIBKJBJw8eRIqKyuhpKTElPwNTPxGxAv6CUF8D/Eg4l88gI5CEh8aGoKRkRGora3NqvN4UhRpQJ2dnerTCQaDapmkI76LibeYfD8N4C7En/kJzDNzBUFkEY9EIlBdXZ1zkKFQSB0kPSWN/GYm3mxBXG8/5QEcRMye6Iwnk0no7e2Fqqoq4T40yO7ubvUJEPnLERcQ5wT6Xoz4KmIP4nSOtopuQSpmi5oWJy1Ep0bror+/XyVPUeVeRCuiwaZPLfv8c4jv5hFhsiwWi6UXphOjPtRXW7CPISKIFxHXs1vojXz8ZXaZe0TDocV12iiS5Eue+kq6sl3s//sRV+jK5yNeQewQIB7mJ1Kqu7Z0m4maMc7/jf3/NsQ/NBdD/Arxm0L/uDaDWjgUNe2JmfXax9DsoIkbWVmZxbWp29DOSUSKi4sdk6e+Ur6zdvToURUm0SUX0kaRpq+vz/FvUx/qa0V+A+JNxHQHi9MJUp1Qq9CW39XVJUycdlnqQ30lC+K0m/6Vw+d0mARbsmSJ+klaJRAICA2A2lB7Td94LIiv5E2rF/FP3X2W7dy5My9Vqb8hrUIz2dHRARUVFSDLcoYwI5Cr2AkzI3GyP/Cn7QAKYdqM0s45MDCQIYn9fr8q2qwksRlx+D8MICsKOZELHiZ+Zw5iIgNwCf5mwTYrD2ubVQIzqg2AjkD3FeLHr32s0zh4Ogx9R3JBY1mxW3X6cGQsnlTgNbx8FLFXP3iPQQqA4ACczLDLcG0qFBFPz50mN61ZGICGWX7wy6mm0YTiff10dMXet0ZWvN+ToCd/E6JbJV9XVwefsFUgXkPS825dNgUkw/BoEJfPLYLGOUWw6/DgShwEHYYaEecl1jAhwR/awPLZycYFVqcoth3XXRqYt355JvGhWFKFZlRHbagtq2DVbZ7WLcTOHMTv4vXh1FWs3GZZZdC9Zv3yYLrgRFccdhwchA96Eur9nGky3P6FKTC/OhX3N2DbI6ei67qHxpZJ7MfbeADTBYifLaDL3HZtfQC87tSYiPDWZ/vSxM3KZGz7lQUBulwv6RbiNgs54IS4latYuc0VS2f70jdPHBmC0WR2JKWyXVin2aKL1T5f8phEklZd6HRCPJ/4XVM9ZZzCic64ZcPjurqqoFs9T3ssQmEr53A25NpVOeOWMattbW2i5MeSSUXWViq5RGzUfA5kt8u4HUqSRSwnF7plsvUMWvvp/tFxpVnjs1ahuroPU33aJZvN6LMOiNudUbUzbdZhhvJEh09G02XfuCwIZUXZlKiM6jTjPi2efPImeeyyYT4WDhjqf7//WGQLRg856JcAwyY8svYi+MvrQ/D2R3G188KZXvh6QxAuKnGn4n80CfveiVDo+Z3e5ymQfpu333ouO8b7wOMkrZ2oQ5MnETa227851I76Zvu21vCP7l1drro+kbxjRZl5hg2/8detYRiJJbfr3WYG4gjrnK2844b4+kqum5HHjIuU/6TtTOy5nz/fB4PRpOUXUh21OYptqY+2w3o5V/MM4n5DnwOMezhTdhkluvLR6XYRB/FlJPXAxqd6frD6kmJ52Ww/VE1JucnHg2Nw+FQUnj8eSfCM3819VPK3Iz4yIa63+5k4yeHf5pAF+RiRuRPJPb7njeFvIZrwfibXEbeXaH3Qhmum57eakDESeRjxSwvyZpFEyNDv9bcf8MzeLXoY+Rz9nkiqBlJvSCbqJpOW7rNzBbpPGNMXJu+00mkNp08GxZfyzrk4dA2Ogk9OxZJYIgkkIS6d7iWF6TKSf4N+jxem3Uw2cOiEHFJgJa+jG3OUpQ1PS8pL70YgitJg0UwfXFNfnJYDiTEFTp0fhbYPY4ADU66aXwxFciqNIHEc3yLwlLZwWztbyefMJ3KUZRB/5s1hNb6vW1QCn6qUM3QMXVMZ1dEmthfbUh+NPKWua3Kkr6luFre1slUcbikAtNiUZbjmgfYLUFMuw+fr/KBPy9BTiOpEGtVRG2r7SvsFta+H4/Y1HOuXIh5B/Jf7LOUZp8GttonxRHIPi7kWm7LM9B3GcDwRwS0NReO5SPT3V9+PQs+QGsphGs72F+f6IcTSubHOh/JhWO2r7bBnOY7Taeoh2hsYD7E8Xmqj5682IXl1LuJk730chwW4ED0siYnw39+KpImblbmx7cIZXni3K/PNCGmX7bwwSxgNXBYXSZsLlmVI29kVcvr+P6gWk4piomkUOKRTn+Q6Z8Oj4KHc4ASthWeYZrqZsxFmZVlGCrFUJ4E7B8Ysf+Scri7od8FwLJkx86Rxvo84RN/LOMRlXoEB0KLcrUtimZVlGHmLfqbdNq86jHUKjL8BL4SqfEFH9kqbsrSVFrmhb2RcSc4qt94z9XX9kaTaVzKoyut5sxpm0PV1XEeq0ic4gM05ytKEOs6Pb9rLa/1QLGfvj1RGdZp19CbUvpIDVXmGVWUuCUBkbxAog/khLxxHOYCbDvuyBM2LS+Az1TIEfRKUIOiayqiONzU4hn0uCXknR1WKGp5NXZ+u9iovvxcBSj7RRkSEV80zfztIy4PaYh+1r1QAVUkRpUmgzFSUNdb51Rce+4+NpJ+AhYxQ21Bb6gO6BSuSEchSldohmjVPU44y6zx9fcBVHnDDk3jwpnhOp6cIkiXQNZVRHbWhtgVTlZD6v8LNTPYmPvWYldkazWZ9yKtQopW0yzBniMmNanBxrkVhhntCliTWVOWBCahKxwNobm52fKjZvXt35j5RQFX5IpPUu4tZWcFM0qnKtYhnESsQAQZd0/8Q1uVQlca14hcoE8lA0KAP2pGfqKrUjGb2KXaVfTZlokZu+jW7lKPHRFVuz+MJNpn4dpOTBWuwBbynnOUsnjl5emWeTypDt8NOhPhaJkd/PNX+s0bu9STLllsRfXZuI/T3EhvbaEJyo+CMz+ETF/13TXst+QDnSh9ml7VNfbgsiIrmYtYJlpkZ/dGU0tQ/RvwbUv+oIgn+tolksVywZZ9gEomSpvdB6l0Y6aYoL/CckU1bsAM8gLAocScpPQH7GR9+foG4A3FCpNP/BBgAdZ3B2yZg0vUAAAAASUVORK5CYII=) no-repeat;
}

.tui-ico-date {
  width: 12px;
  height: 12px;
  background-position: -17px 0;
}

.tui-ico-time {
  width: 12px;
  height: 12px;
  background-position: 0 -30px;
}

.tui-ico-caret {
  width: 7px;
  height: 4px;
  background-position: 0 -58px;
}

.tui-calendar-month,
.tui-calendar-year {
  width: 202px;
}

.tui-calendar-month .tui-calendar-body,
.tui-calendar-year .tui-calendar-body {
  width: 202px;
  margin: 0 auto;
}

.tui-calendar .tui-calendar-header {
  position: relative;
  border-bottom: 1px solid #efefef;
}

.tui-calendar .tui-calendar-header-inner {
  padding: 17px 50px 15px;
  height: 50px;
}

.tui-calendar .tui-calendar-title-today {
  height: 30px;
  margin: 0;
  font-size: 12px;
  line-height: 34px;
  color: #777;
  background-color: #f4f4f4;
}

.tui-calendar .tui-calendar-title {
  display: inline-block;
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  color: #333;
  cursor: default;
  vertical-align: top;
}

.tui-calendar-btn {
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 32px;
  height: 50px;
  line-height: 400px;
  z-index: 10;
  cursor: pointer;
  border: none;
  background-color: #fff;
}

.tui-calendar .tui-calendar-btn-prev-month {
  left: 0;
}

.tui-calendar .tui-calendar-btn-next-month {
  right: 0;
}

.tui-calendar .tui-calendar-btn-prev-year {
  left: 0;
}

.tui-calendar .tui-calendar-btn-next-year {
  right: 0;
}

.tui-calendar .tui-calendar-btn-next-month:after,
.tui-calendar .tui-calendar-btn-next-year:after,
.tui-calendar .tui-calendar-btn-prev-month:after,
.tui-calendar .tui-calendar-btn-prev-year:after {
  overflow: hidden;
  position: absolute;
  top: 50%;
  margin-top: -5px;
  line-height: 400px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC8AAAA+CAYAAAC7rUKSAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpERjdGMzkzODVEQkRFNjExQkVCMjlDOUFDNzZDM0E5NCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1ODVCRTc4NkM2QkQxMUU2OTgzMzhGQjZFMjcyMTQ1RSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1ODVCRTc4NUM2QkQxMUU2OTgzMzhGQjZFMjcyMTQ1RSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjFERENDMTc0QjlDNkU2MTE5OTc0QjIwOTY3QkQzNjZBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkRGN0YzOTM4NURCREU2MTFCRUIyOUM5QUM3NkMzQTk0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ClaYfwAACcFJREFUeNrEWgtwVOUVPnt37+4mmyUhkSQLGEigQ4uRQiEITe0U0Djio61ArNqpQguWdtrKtNqKM9W2Y6sOHaWdUaEvmVZtQaYjg8ZHU6zFApX4GAGdiYaHQmISks1r2Ueyt+fcPXdz9+69d/+72dQz883e+z92v/+/5z//95+7rsWLF4PB1jBu5vtvIn6IWIXoNDbetGkTfSjgzFxm/RRFgXA4DNFoFOLxuFrm9XrB5/PB1KlTweVyZXyJx4T4nxDNurI/IhYhXuUBnIFJsOHhYejp6YHy8nIoLS1VSZPRIBKJBJw8eRIqKyuhpKTElPwNTPxGxAv6CUF8D/Eg4l88gI5CEh8aGoKRkRGora3NqvN4UhRpQJ2dnerTCQaDapmkI76LibeYfD8N4C7En/kJzDNzBUFkEY9EIlBdXZ1zkKFQSB0kPSWN/GYm3mxBXG8/5QEcRMye6Iwnk0no7e2Fqqoq4T40yO7ubvUJEPnLERcQ5wT6Xoz4KmIP4nSOtopuQSpmi5oWJy1Ep0bror+/XyVPUeVeRCuiwaZPLfv8c4jv5hFhsiwWi6UXphOjPtRXW7CPISKIFxHXs1vojXz8ZXaZe0TDocV12iiS5Eue+kq6sl3s//sRV+jK5yNeQewQIB7mJ1Kqu7Z0m4maMc7/jf3/NsQ/NBdD/Arxm0L/uDaDWjgUNe2JmfXax9DsoIkbWVmZxbWp29DOSUSKi4sdk6e+Ur6zdvToURUm0SUX0kaRpq+vz/FvUx/qa0V+A+JNxHQHi9MJUp1Qq9CW39XVJUycdlnqQ30lC+K0m/6Vw+d0mARbsmSJ+klaJRAICA2A2lB7Td94LIiv5E2rF/FP3X2W7dy5My9Vqb8hrUIz2dHRARUVFSDLcoYwI5Cr2AkzI3GyP/Cn7QAKYdqM0s45MDCQIYn9fr8q2qwksRlx+D8MICsKOZELHiZ+Zw5iIgNwCf5mwTYrD2ubVQIzqg2AjkD3FeLHr32s0zh4Ogx9R3JBY1mxW3X6cGQsnlTgNbx8FLFXP3iPQQqA4ACczLDLcG0qFBFPz50mN61ZGICGWX7wy6mm0YTiff10dMXet0ZWvN+ToCd/E6JbJV9XVwefsFUgXkPS825dNgUkw/BoEJfPLYLGOUWw6/DgShwEHYYaEecl1jAhwR/awPLZycYFVqcoth3XXRqYt355JvGhWFKFZlRHbagtq2DVbZ7WLcTOHMTv4vXh1FWs3GZZZdC9Zv3yYLrgRFccdhwchA96Eur9nGky3P6FKTC/OhX3N2DbI6ei67qHxpZJ7MfbeADTBYifLaDL3HZtfQC87tSYiPDWZ/vSxM3KZGz7lQUBulwv6RbiNgs54IS4latYuc0VS2f70jdPHBmC0WR2JKWyXVin2aKL1T5f8phEklZd6HRCPJ/4XVM9ZZzCic64ZcPjurqqoFs9T3ssQmEr53A25NpVOeOWMattbW2i5MeSSUXWViq5RGzUfA5kt8u4HUqSRSwnF7plsvUMWvvp/tFxpVnjs1ahuroPU33aJZvN6LMOiNudUbUzbdZhhvJEh09G02XfuCwIZUXZlKiM6jTjPi2efPImeeyyYT4WDhjqf7//WGQLRg856JcAwyY8svYi+MvrQ/D2R3G188KZXvh6QxAuKnGn4n80CfveiVDo+Z3e5ymQfpu333ouO8b7wOMkrZ2oQ5MnETa227851I76Zvu21vCP7l1drro+kbxjRZl5hg2/8detYRiJJbfr3WYG4gjrnK2844b4+kqum5HHjIuU/6TtTOy5nz/fB4PRpOUXUh21OYptqY+2w3o5V/MM4n5DnwOMezhTdhkluvLR6XYRB/FlJPXAxqd6frD6kmJ52Ww/VE1JucnHg2Nw+FQUnj8eSfCM3819VPK3Iz4yIa63+5k4yeHf5pAF+RiRuRPJPb7njeFvIZrwfibXEbeXaH3Qhmum57eakDESeRjxSwvyZpFEyNDv9bcf8MzeLXoY+Rz9nkiqBlJvSCbqJpOW7rNzBbpPGNMXJu+00mkNp08GxZfyzrk4dA2Ogk9OxZJYIgkkIS6d7iWF6TKSf4N+jxem3Uw2cOiEHFJgJa+jG3OUpQ1PS8pL70YgitJg0UwfXFNfnJYDiTEFTp0fhbYPY4ADU66aXwxFciqNIHEc3yLwlLZwWztbyefMJ3KUZRB/5s1hNb6vW1QCn6qUM3QMXVMZ1dEmthfbUh+NPKWua3Kkr6luFre1slUcbikAtNiUZbjmgfYLUFMuw+fr/KBPy9BTiOpEGtVRG2r7SvsFta+H4/Y1HOuXIh5B/Jf7LOUZp8GttonxRHIPi7kWm7LM9B3GcDwRwS0NReO5SPT3V9+PQs+QGsphGs72F+f6IcTSubHOh/JhWO2r7bBnOY7Taeoh2hsYD7E8Xmqj5682IXl1LuJk730chwW4ED0siYnw39+KpImblbmx7cIZXni3K/PNCGmX7bwwSxgNXBYXSZsLlmVI29kVcvr+P6gWk4piomkUOKRTn+Q6Z8Oj4KHc4ASthWeYZrqZsxFmZVlGCrFUJ4E7B8Ysf+Scri7od8FwLJkx86Rxvo84RN/LOMRlXoEB0KLcrUtimZVlGHmLfqbdNq86jHUKjL8BL4SqfEFH9kqbsrSVFrmhb2RcSc4qt94z9XX9kaTaVzKoyut5sxpm0PV1XEeq0ic4gM05ytKEOs6Pb9rLa/1QLGfvj1RGdZp19CbUvpIDVXmGVWUuCUBkbxAog/khLxxHOYCbDvuyBM2LS+Az1TIEfRKUIOiayqiONzU4hn0uCXknR1WKGp5NXZ+u9iovvxcBSj7RRkSEV80zfztIy4PaYh+1r1QAVUkRpUmgzFSUNdb51Rce+4+NpJ+AhYxQ21Bb6gO6BSuSEchSldohmjVPU44y6zx9fcBVHnDDk3jwpnhOp6cIkiXQNZVRHbWhtgVTlZD6v8LNTPYmPvWYldkazWZ9yKtQopW0yzBniMmNanBxrkVhhntCliTWVOWBCahKxwNobm52fKjZvXt35j5RQFX5IpPUu4tZWcFM0qnKtYhnESsQAQZd0/8Q1uVQlca14hcoE8lA0KAP2pGfqKrUjGb2KXaVfTZlokZu+jW7lKPHRFVuz+MJNpn4dpOTBWuwBbynnOUsnjl5emWeTypDt8NOhPhaJkd/PNX+s0bu9STLllsRfXZuI/T3EhvbaEJyo+CMz+ETF/13TXst+QDnSh9ml7VNfbgsiIrmYtYJlpkZ/dGU0tQ/RvwbUv+oIgn+tolksVywZZ9gEomSpvdB6l0Y6aYoL/CckU1bsAM8gLAocScpPQH7GR9+foG4A3FCpNP/BBgAdZ3B2yZg0vUAAAAASUVORK5CYII=) no-repeat;
  content: "";
}

.tui-calendar .tui-calendar-btn-prev-month:after,
.tui-calendar.tui-calendar-month .tui-calendar-btn-prev-year:after {
  width: 6px;
  height: 11px;
  left: 50%;
  margin-left: -3px;
  background-position: 0 0;
}

.tui-calendar .tui-calendar-btn-next-month:after,
.tui-calendar.tui-calendar-month .tui-calendar-btn-next-year:after {
  width: 6px;
  height: 11px;
  right: 50%;
  margin-right: -3px;
  background-position: -8px 0;
}

.tui-calendar .tui-calendar-btn-prev-year:after {
  width: 11px;
  height: 10px;
  left: 50%;
  margin-left: -6px;
  background-position: -16px -36px;
}

.tui-calendar .tui-calendar-btn-next-year:after {
  width: 11px;
  height: 10px;
  right: 50%;
  margin-right: -6px;
  background-position: -16px -49px;
}

.tui-calendar.tui-calendar-month .tui-calendar-btn-next-year,
.tui-calendar.tui-calendar-month .tui-calendar-btn-prev-year {
  width: 50px;
}

.tui-calendar .tui-calendar-has-btns .tui-calendar-btn-prev-year {
  left: 10px;
}

.tui-calendar .tui-calendar-has-btns .tui-calendar-btn-next-year {
  right: 10px;
}

.tui-calendar .tui-calendar-has-btns .tui-calendar-btn-prev-month {
  left: 44px;
}

.tui-calendar .tui-calendar-has-btns .tui-calendar-btn-next-month {
  right: 44px;
}

.tui-calendar .tui-calendar-body-header th {
  color: #777;
}

.tui-calendar .tui-calendar-body-inner {
  width: 100%;
  margin: 0 auto;
  table-layout: fixed;
  border-collapse: collapse;
  text-align: center;
  font-size: 12px;
}

.tui-calendar th {
  font-weight: 400;
  cursor: default;
}

.tui-calendar td,
.tui-calendar th {
  height: 39px;
  text-align: center;
  color: #999;
}

.tui-calendar .tui-is-blocked:hover {
  cursor: default;
}

.tui-calendar .tui-calendar-month {
  width: 25%;
  height: 50px;
}

.tui-calendar .tui-calendar-today {
  color: #4b96e6;
}

.tui-calendar .tui-calendar-next-month,
.tui-calendar .tui-calendar-prev-month {
  color: #ccc;
}

.tui-calendar .tui-calendar-next-month.tui-calendar-date,
.tui-calendar .tui-calendar-prev-month.tui-calendar-date {
  visibility: hidden;
}

.tui-calendar .tui-calendar-btn-choice {
  background-color: #4b96e6;
}

.tui-calendar .tui-calendar-btn-close {
  background-color: #777;
}

.tui-calendar .tui-calendar-year {
  width: 25%;
  height: 50px;
}

.tui-calendar.tui-calendar-year .tui-calendar-btn-prev-year:after {
  width: 6px;
  height: 11px;
  left: 50%;
  margin-left: -3px;
  background-position: 0 0;
}

.tui-calendar.tui-calendar-year .tui-calendar-btn-next-year:after {
  width: 6px;
  height: 11px;
  right: 50%;
  margin-right: -3px;
  background-position: -8px 0;
}

.tui-calendar.tui-calendar-year .tui-calendar-btn-next-year,
.tui-calendar.tui-calendar-year .tui-calendar-btn-prev-year {
  width: 50px;
}

.tui-datepicker {
  border: 1px solid #aaa;
  background-color: #fff;
  position: absolute;
}

.tui-datepicker * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.tui-datepicker-type-date {
  width: 274px;
}

.tui-datepicker-body .tui-calendar-month,
.tui-datepicker-body .tui-calendar-year {
  width: auto;
}

.tui-datepicker .tui-calendar {
  border: 0;
}

.tui-datepicker .tui-calendar-title {
  cursor: pointer;
}

.tui-datepicker .tui-calendar-title.tui-calendar-title-year-to-year {
  cursor: auto;
}

.tui-datepicker-body .tui-timepicker,
.tui-datepicker-footer .tui-timepicker {
  width: 274px;
  position: static;
  padding: 20px 46px 20px 47px;
  border: 0;
}

.tui-datepicker-footer .tui-timepicker {
  border-top: 1px solid #eee;
}

.tui-datepicker-selector {
  padding: 10px;
  font-size: 0;
  text-align: center;
  border-bottom: 1px solid #eee;
}

.tui-datepicker-selector-button {
  width: 50%;
  height: 26px;
  font-size: 12px;
  line-height: 23px;
  border: 1px solid #ddd;
  background-color: #fff;
  color: #777;
  outline: none;
  cursor: pointer;
}

.tui-datepicker-selector-button.tui-is-checked {
  background-color: #eee;
  color: #333;
}

.tui-datepicker-selector-button+.tui-datepicker-selector-button {
  margin-left: -1px;
}

.tui-datepicker-selector-button [class^=tui-ico-] {
  margin: 5px 9px 0 0;
  vertical-align: top;
}

.tui-datepicker-input.tui-has-focus .tui-ico-date,
.tui-datepicker-selector-button.tui-is-checked .tui-ico-date {
  background-position: -17px -14px;
}

.tui-datepicker-selector-button.tui-is-checked .tui-ico-time {
  background-position: 0 -44px;
}

.tui-datepicker-area {
  position: relative;
}

.tui-datepicker-input {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 28px;
  vertical-align: top;
  border: 1px solid #ddd;
}

.tui-datepicker-input * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.tui-datepicker-input>input {
  width: 100%;
  height: 100%;
  padding: 6px 27px 6px 10px;
  font-size: 12px;
  line-height: 14px;
  vertical-align: top;
  border: 0;
  color: #333;
}

.tui-datepicker-input>.tui-ico-date {
  position: absolute;
  top: 50%;
  right: 8px;
  margin: -6px 0 0;
}

.tui-datepicker-input.tui-has-focus {
  border-color: #aaa;
}

.tui-datetime-input {
  width: 170px;
}

.tui-datepicker .tui-is-blocked {
  cursor: default;
  color: #ddd;
}

.tui-datepicker .tui-is-valid {
  color: #999;
}

.tui-datepicker .tui-is-selectable:hover {
  background-color: #edf4fc;
  cursor: pointer;
}

.tui-datepicker .tui-is-selectable.tui-is-selected,
.tui-datepicker.tui-rangepicker .tui-is-selectable.tui-is-selected {
  background-color: #4b96e6;
  color: #fff;
}

.tui-datepicker.tui-rangepicker .tui-is-selected-range {
  background-color: #edf4fc;
}

.tui-datepicker-dropdown {
  display: inline-block;
  width: 120px;
}

.tui-datepicker-dropdown .tui-dropdown-button {
  width: 100%;
  height: 28px;
  font-size: 12px;
  line-height: 20px;
  border: 1px solid #ddd;
  padding: 0 30px 0 10px;
  text-align: left;
  background: #fff;
  cursor: pointer;
}

.tui-datepicker-dropdown {
  position: relative;
}

.tui-datepicker-dropdown .tui-ico-caret {
  position: absolute;
  top: 12px;
  right: 10px;
}

.tui-datepicker-dropdown .tui-dropdown-menu {
  display: none;
  position: absolute;
  top: 27px;
  left: 0;
  right: 0;
  width: 100%;
  padding: 5px 0;
  margin: 0;
  overflow-y: auto;
  min-width: 0;
  max-height: 198px;
  font-size: 12px;
  border: 1px solid #ddd;
  border-top-color: #fff;
  z-index: 10;
  box-sizing: border-box;
  box-shadow: none;
  border-radius: 0;
}

.tui-datepicker-dropdown.tui-is-open .tui-dropdown-button {
  display: block;
}

.tui-datepicker-dropdown.tui-is-open .tui-dropdown-button,
.tui-datepicker-dropdown.tui-is-open .tui-dropdown-menu {
  display: block;
  border-color: #aaa;
}

.tui-datepicker-dropdown.tui-is-open .tui-ico-caret {
  background-position: -21px -28px;
}

.tui-datepicker-dropdown .tui-menu-item {
  overflow: hidden;
  position: relative;
  height: 28px;
  line-height: 28px;
  background-color: #fff;
  z-index: 10;
}

.tui-datepicker-dropdown .tui-menu-item-btn {
  position: relative;
  width: 100%;
  font-size: 12px;
  font-weight: 400;
  line-height: 28px;
  padding: 0 10px 0 30px;
  text-align: left;
  color: #333;
  background-color: #fff;
  border: 0;
  cursor: pointer;
  z-index: 9;
}

.tui-datepicker-dropdown .tui-menu-item-btn:hover,
.tui-menu-item-btn:active,
.tui-menu-item-btn:focus {
  color: #333;
  background-color: #f4f4f4;
}

.tui-datepicker-dropdown .tui-menu-item .tui-ico-check {
  display: none;
  overflow: hidden;
  position: absolute;
  width: 10px;
  height: 8px;
  top: 10px;
  left: 10px;
  background-position: -31px -54px;
  z-index: 10;
  content: "aaa";
}

.tui-datepicker-dropdown .tui-menu-item.tui-is-selected .tui-ico-check {
  display: block;
}

.tui-datepicker-dropdown .tui-menu-item.tui-is-selected .tui-menu-item-btn {
  font-weight: 700;
}

.tui-dropdown-area {
  font-size: 0;
}

.tui-dropdown-area .tui-datepicker-dropdown+.tui-datepicker-dropdown {
  margin-left: 5px;
}

.tui-hidden {
  display: none;
}
/*!
 * TOAST UI Time Picker
 * @version 2.1.2
 * @author NHN FE Development Lab <dl_javascript@nhn.com>
 * @license MIT
 */

.tui-timepicker * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.tui-timepicker button {
  border-radius: 0;
}

.tui-timepicker input,
.tui-timepicker select {
  font-weight: 400;
}

.tui-ico-colon,
.tui-ico-t-btn,
.tui-ico-time,
.tui-timepicker-input-radio {
  overflow: hidden;
  display: inline-block;
  width: 1px;
  height: 1px;
  line-height: 300px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC8AAAA+CAYAAAC7rUKSAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpERjdGMzkzODVEQkRFNjExQkVCMjlDOUFDNzZDM0E5NCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1ODVCRTc4NkM2QkQxMUU2OTgzMzhGQjZFMjcyMTQ1RSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1ODVCRTc4NUM2QkQxMUU2OTgzMzhGQjZFMjcyMTQ1RSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjFERENDMTc0QjlDNkU2MTE5OTc0QjIwOTY3QkQzNjZBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkRGN0YzOTM4NURCREU2MTFCRUIyOUM5QUM3NkMzQTk0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ClaYfwAACcFJREFUeNrEWgtwVOUVPnt37+4mmyUhkSQLGEigQ4uRQiEITe0U0Djio61ArNqpQguWdtrKtNqKM9W2Y6sOHaWdUaEvmVZtQaYjg8ZHU6zFApX4GAGdiYaHQmISks1r2Ueyt+fcPXdz9+69d/+72dQz883e+z92v/+/5z//95+7rsWLF4PB1jBu5vtvIn6IWIXoNDbetGkTfSjgzFxm/RRFgXA4DNFoFOLxuFrm9XrB5/PB1KlTweVyZXyJx4T4nxDNurI/IhYhXuUBnIFJsOHhYejp6YHy8nIoLS1VSZPRIBKJBJw8eRIqKyuhpKTElPwNTPxGxAv6CUF8D/Eg4l88gI5CEh8aGoKRkRGora3NqvN4UhRpQJ2dnerTCQaDapmkI76LibeYfD8N4C7En/kJzDNzBUFkEY9EIlBdXZ1zkKFQSB0kPSWN/GYm3mxBXG8/5QEcRMye6Iwnk0no7e2Fqqoq4T40yO7ubvUJEPnLERcQ5wT6Xoz4KmIP4nSOtopuQSpmi5oWJy1Ep0bror+/XyVPUeVeRCuiwaZPLfv8c4jv5hFhsiwWi6UXphOjPtRXW7CPISKIFxHXs1vojXz8ZXaZe0TDocV12iiS5Eue+kq6sl3s//sRV+jK5yNeQewQIB7mJ1Kqu7Z0m4maMc7/jf3/NsQ/NBdD/Arxm0L/uDaDWjgUNe2JmfXax9DsoIkbWVmZxbWp29DOSUSKi4sdk6e+Ur6zdvToURUm0SUX0kaRpq+vz/FvUx/qa0V+A+JNxHQHi9MJUp1Qq9CW39XVJUycdlnqQ30lC+K0m/6Vw+d0mARbsmSJ+klaJRAICA2A2lB7Td94LIiv5E2rF/FP3X2W7dy5My9Vqb8hrUIz2dHRARUVFSDLcoYwI5Cr2AkzI3GyP/Cn7QAKYdqM0s45MDCQIYn9fr8q2qwksRlx+D8MICsKOZELHiZ+Zw5iIgNwCf5mwTYrD2ubVQIzqg2AjkD3FeLHr32s0zh4Ogx9R3JBY1mxW3X6cGQsnlTgNbx8FLFXP3iPQQqA4ACczLDLcG0qFBFPz50mN61ZGICGWX7wy6mm0YTiff10dMXet0ZWvN+ToCd/E6JbJV9XVwefsFUgXkPS825dNgUkw/BoEJfPLYLGOUWw6/DgShwEHYYaEecl1jAhwR/awPLZycYFVqcoth3XXRqYt355JvGhWFKFZlRHbagtq2DVbZ7WLcTOHMTv4vXh1FWs3GZZZdC9Zv3yYLrgRFccdhwchA96Eur9nGky3P6FKTC/OhX3N2DbI6ei67qHxpZJ7MfbeADTBYifLaDL3HZtfQC87tSYiPDWZ/vSxM3KZGz7lQUBulwv6RbiNgs54IS4latYuc0VS2f70jdPHBmC0WR2JKWyXVin2aKL1T5f8phEklZd6HRCPJ/4XVM9ZZzCic64ZcPjurqqoFs9T3ssQmEr53A25NpVOeOWMattbW2i5MeSSUXWViq5RGzUfA5kt8u4HUqSRSwnF7plsvUMWvvp/tFxpVnjs1ahuroPU33aJZvN6LMOiNudUbUzbdZhhvJEh09G02XfuCwIZUXZlKiM6jTjPi2efPImeeyyYT4WDhjqf7//WGQLRg856JcAwyY8svYi+MvrQ/D2R3G188KZXvh6QxAuKnGn4n80CfveiVDo+Z3e5ymQfpu333ouO8b7wOMkrZ2oQ5MnETa227851I76Zvu21vCP7l1drro+kbxjRZl5hg2/8detYRiJJbfr3WYG4gjrnK2844b4+kqum5HHjIuU/6TtTOy5nz/fB4PRpOUXUh21OYptqY+2w3o5V/MM4n5DnwOMezhTdhkluvLR6XYRB/FlJPXAxqd6frD6kmJ52Ww/VE1JucnHg2Nw+FQUnj8eSfCM3819VPK3Iz4yIa63+5k4yeHf5pAF+RiRuRPJPb7njeFvIZrwfibXEbeXaH3Qhmum57eakDESeRjxSwvyZpFEyNDv9bcf8MzeLXoY+Rz9nkiqBlJvSCbqJpOW7rNzBbpPGNMXJu+00mkNp08GxZfyzrk4dA2Ogk9OxZJYIgkkIS6d7iWF6TKSf4N+jxem3Uw2cOiEHFJgJa+jG3OUpQ1PS8pL70YgitJg0UwfXFNfnJYDiTEFTp0fhbYPY4ADU66aXwxFciqNIHEc3yLwlLZwWztbyefMJ3KUZRB/5s1hNb6vW1QCn6qUM3QMXVMZ1dEmthfbUh+NPKWua3Kkr6luFre1slUcbikAtNiUZbjmgfYLUFMuw+fr/KBPy9BTiOpEGtVRG2r7SvsFta+H4/Y1HOuXIh5B/Jf7LOUZp8GttonxRHIPi7kWm7LM9B3GcDwRwS0NReO5SPT3V9+PQs+QGsphGs72F+f6IcTSubHOh/JhWO2r7bBnOY7Taeoh2hsYD7E8Xmqj5682IXl1LuJk730chwW4ED0siYnw39+KpImblbmx7cIZXni3K/PNCGmX7bwwSxgNXBYXSZsLlmVI29kVcvr+P6gWk4piomkUOKRTn+Q6Z8Oj4KHc4ASthWeYZrqZsxFmZVlGCrFUJ4E7B8Ysf+Scri7od8FwLJkx86Rxvo84RN/LOMRlXoEB0KLcrUtimZVlGHmLfqbdNq86jHUKjL8BL4SqfEFH9kqbsrSVFrmhb2RcSc4qt94z9XX9kaTaVzKoyut5sxpm0PV1XEeq0ic4gM05ytKEOs6Pb9rLa/1QLGfvj1RGdZp19CbUvpIDVXmGVWUuCUBkbxAog/khLxxHOYCbDvuyBM2LS+Az1TIEfRKUIOiayqiONzU4hn0uCXknR1WKGp5NXZ+u9iovvxcBSj7RRkSEV80zfztIy4PaYh+1r1QAVUkRpUmgzFSUNdb51Rce+4+NpJ+AhYxQ21Bb6gO6BSuSEchSldohmjVPU44y6zx9fcBVHnDDk3jwpnhOp6cIkiXQNZVRHbWhtgVTlZD6v8LNTPYmPvWYldkazWZ9yKtQopW0yzBniMmNanBxrkVhhntCliTWVOWBCahKxwNobm52fKjZvXt35j5RQFX5IpPUu4tZWcFM0qnKtYhnESsQAQZd0/8Q1uVQlca14hcoE8lA0KAP2pGfqKrUjGb2KXaVfTZlokZu+jW7lKPHRFVuz+MJNpn4dpOTBWuwBbynnOUsnjl5emWeTypDt8NOhPhaJkd/PNX+s0bu9STLllsRfXZuI/T3EhvbaEJyo+CMz+ETF/13TXst+QDnSh9ml7VNfbgsiIrmYtYJlpkZ/dGU0tQ/RvwbUv+oIgn+tolksVywZZ9gEomSpvdB6l0Y6aYoL/CckU1bsAM8gLAocScpPQH7GR9+foG4A3FCpNP/BBgAdZ3B2yZg0vUAAAAASUVORK5CYII=) no-repeat;
}

.tui-timepicker .tui-timepicker-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  border-radius: 0;
}

.tui-timepicker .tui-timepicker-select::-ms-expand {
  display: none;
}

.tui-calendar-select-content .tui-timepicker {
  border: 0;
  margin: 0 auto;
}

.tui-timepicker input {
  font-size: 16px;
  text-align: center;
  font-weight: 400;
}

.tui-timepicker {
  position: relative;
  top: -1px;
  padding: 30px 20px;
  font-weight: 700;
  border: 1px solid #aaa;
  background: #fff;
  text-align: center;
}

.tui-timepicker-row {
  width: 100%;
  font-size: 0;
}

.tui-timepicker-column {
  display: inline-block;
  vertical-align: middle;
}

.tui-timepicker-btn-area {
  position: relative;
  height: 88px;
  padding: 19px 0;
}

.tui-timepicker-spinbox {
  width: 52px;
}

.tui-timepicker-selectbox+.tui-timepicker-selectbox {
  padding-left: 5px;
}

.tui-timepicker-btn-area .tui-timepicker-spinbox-input {
  width: 100%;
  height: 100%;
  line-height: 46px;
  border: 1px solid #ddd;
}

.tui-timepicker-btn {
  position: absolute;
  left: 0;
  width: 100%;
  height: 20px;
  background-color: transparent;
  border: 1px solid #ddd;
  cursor: pointer;
}

.tui-timepicker-btn:active,
.tui-timepicker-btn:focus,
.tui-timepicker-btn:hover {
  background-color: #f4f4f4;
}

.tui-timepicker-btn-up {
  top: 0;
}

.tui-timepicker-btn-down {
  bottom: 0;
}

.tui-timepicker-btn .tui-ico-t-btn {
  width: 13px;
  height: 7px;
}

.tui-timepicker-btn-up .tui-ico-t-btn {
  background-position: 0 -12px;
}

.tui-timepicker-btn-down .tui-ico-t-btn {
  background-position: 0 -21px;
}

.tui-timepicker-colon {
  width: 22px;
}

.tui-timepicker-body .tui-timepicker-colon,
.tui-timepicker-footer .tui-timepicker-colon {
  width: 18px;
}

.tui-ico-colon {
  width: 2px;
  height: 7px;
  background-position: -17px -28px;
}

.tui-timepicker-select {
  width: 52px;
  height: 28px;
  padding: 5px 0 5px 9px;
  font-size: 12px;
  border: 1px solid #ddd;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAECAYAAACHtL/sAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Mzk1NDA2RTVCREIxMTFFNjhENTJFMjdDNDQ3RDJCMTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Mzk1NDA2RTZCREIxMTFFNjhENTJFMjdDNDQ3RDJCMTEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozOTU0MDZFM0JEQjExMUU2OEQ1MkUyN0M0NDdEMkIxMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozOTU0MDZFNEJEQjExMUU2OEQ1MkUyN0M0NDdEMkIxMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PpZ5HPgAAAAxSURBVHjaYjQ2Nv7PgBswgogzZ87gVMAEU4RLMyHABKUFyNGMbMBHJEOI1gwCAAEGAPSlBRrNcMApAAAAAElFTkSuQmCC) no-repeat;
  background-position: 100% 50%;
  cursor: pointer;
}

.tui-timepicker-check-lst {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tui-timepicker-check {
  margin-top: 11px;
}

.tui-timepicker-check:first-child {
  margin-top: 0;
}

.tui-timepicker-checkbox {
  padding-left: 16px;
}

.tui-timepicker-radio {
  overflow: hidden;
  position: relative;
  text-align: left;
}

.tui-timepicker-radio input {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
}

.tui-timepicker-radio-label {
  display: inline-block;
  padding-left: 20px;
  font-size: 12px;
  line-height: 16px;
  vertical-align: top;
  color: #777;
  cursor: pointer;
}

.tui-timepicker-input-radio {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  background-position: -31px 0;
}

.tui-timepicker-radio .tui-timepicker-meridiem-checked+.tui-timepicker-radio-label .tui-timepicker-input-radio {
  background-position: -31px -18px;
}

.tui-timepicker-radio input:disabled+.tui-timepicker-radio-label .tui-timepicker-input-radio {
  background-position: -31px -36px;
}

.tui-ico-time {
  width: 12px;
  height: 12px;
  background-position: 0 -30px;
}

.tui-time-input,
.tui-timepicker-area {
  position: relative;
}

.tui-time-input {
  display: inline-block;
  width: 120px;
  height: 28px;
  border: 1px solid #ddd;
}

.tui-time-input input {
  width: 100%;
  height: 100%;
  padding: 0 27px 0 10px;
  font-size: 12px;
  border: 0;
  color: #333;
  box-sizing: border-box;
}

.tui-time-input .tui-ico-time {
  position: absolute;
  top: 50%;
  right: 8px;
  margin: -6px 0 0;
}

.tui-time-input.tui-has-focus {
  border-color: #aaa;
}

.tui-time-input .tui-ico-time {
  background-position: 0 -30px;
}

.tui-time-input.tui-has-focus .tui-ico-time {
  background-position: 0 -44px;
}

.tui-has-left.tui-timepicker-body,
.tui-has-left .tui-timepicker-row {
  position: relative;
}

.tui-has-left .tui-timepicker-row:after {
  display: block;
  clear: both;
  content: "";
}

.tui-has-left .tui-is-add-picker {
  float: left;
  padding: 0 5px 0 0;
}

.tui-has-left .tui-timepicker-checkbox {
  float: left;
  margin-top: 23px;
  padding: 0 16px 0 0;
}

.tui-hidden {
  display: none;
}
html,
body {
  font-size: 13px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #5E5E5E;
  /*-webkit-text-stroke-width: .05px;*/
  -webkit-font-smoothing: antialiased;
  background-color: #ffffff;
  /*background-color: #f9fbfd;*/
}

input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
textarea,
select {
  color: inherit !important;
}

textarea {
  resize: none;
}

a {
  color: #337ab7;
  cursor: pointer;
}

a:hover,
a:active,
a:focus {
  color: initial;
}

.btn-link:hover {
  cursor: pointer;
}

.modal-backdrop.in {
  opacity: 0.7;
}

.header-left {
  background-color: #ffffff;
}

.navbar {
  background-repeat: no-repeat;
  background-position: center;
}

.navbar-minimize > a {
  color: #373737;
}

.navbar-toolbar .navbar-right .navbar-profile > a .meta {
  line-height: 37px;
}

.nav>li>a,
.nav>li>a {
  color: #373737;
}

.text-muted {
  color: #777;
}

.text-bold {
  font-weight: bold;
}

.font-thin {
  font-weight: 300;
}

.font-regular {
  font-weight: 400;
}

.body-component {
  background-color: #f5f5f5;
  padding: 15px 0;
}

.body-component-header {
  padding-top: 20px;
}

.body-component-footer {
  padding: 10px;
}

.inline-block {
  display: inline-block;
}

.input-groupon {
  position: absolute;
  right: 0px;
  z-index: 2;
  background-color: #eee;
  height: 100%;
  line-height: 30px;
  padding: 0 5px;
  min-width: 35px;
  border: 1px solid #ccc;
  text-align: center;
}

.input-group.date input:hover {
  cursor: pointer;
}

.input-group.date .input-group-addon.disabled {
  background-color: #eee;
}

.datetimepicker .dropdown-menu.timepicker-sbs {
  width: 550px !important;
  right: 0px !important;
}

.datetimepicker .dropdown-menu.timepicker-sbs .datepicker {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.dropdown-menu li > a:hover:before {
  border-color: #5e5e5e;
}

.btn.focus,
.btn:focus,
.btn:hover {
  color: #ffffff;
}

select[disabled="true"],
select[disabled="disabled"] {
  -moz-appearance: none;
  -webkit-appearance: none;
}

select[disabled="true"]::-ms-expand,
select[disabled="disabled"]::-ms-expand {
  display: none;
}

.multiselect-container {
  font-weight: 500;
  width: 300px;
  padding: 5px;
  height: 30px;
  margin-bottom: 5px;
}

.multiselect-container .multiselect-text {
  width: 200px;
  word-wrap: break-word;
  display: block;
  float: left;
  line-height: 30px;
  margin-top: 5px;
}

.multiselect-container .multiselect-btn {
  cursor: pointer;
  float: right;
  margin: 10px 0px 0px 0px !important;
}

/* make year month select smaller */

.bootstrap-datetimepicker-widget table td span {
  margin: auto;
}

.bootstrap-datetimepicker-widget .timepicker a[data-action] {
  padding: 0;
}

.timepicker .timepicker-picker table td {
  padding: 0;
}

/* ========================================================================
* TO OVERWRITE bootstrap.min.css
* ======================================================================== */

.pagination-container span.total-text {
  padding: 0 10px;
}

.pagination {
  text-align: center;
}

.pagination > li > a,
.pagination > li > span {
  background-color: rgba(41, 75, 154, 0);
  width: 33px;
  padding: 6px;
}

.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
  background-color: rgba(41, 75, 154, 0);
}

.pagination > li > a {
  color: #5d5d5d;
}

.pagination > .active > a,
.pagination > .active > span {
  background-color: #3d61ff;
  border-color: #3d61ff;
  color: #ffffff;
  text-decoration: underline;
  font-weight: bold;
}

.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus,
.pagination > li > a:hover,
.pagination > li > span:hover {
  background-color: #3d61ff;
  color: #ffffff;
  border: 1px solid #ddd;
}

/* ========================================================================
* TO OVERWRITE bootstrap.min.css
* ======================================================================== */

.table-responsive {
  overflow-x: inherit;
  /*overflow-x: overlay;
    padding-bottom: 10px;*/
}

.tutorial .affix {
  padding: 0;
  background-color: #dee0e8;
}

.affix > ul,
ol {
  list-style: none;
  padding: 4px 0px 12px 0px;
  margin-bottom: 0px;
}

.affix > ul:nth-child(1) {
  border-bottom: 1px solid rgba(55, 55, 55, 0.26);
}

.affix > ul > li {
  padding-top: 11px;
}

.affix > ul.divider {
  border-bottom: 1px solid rgba(55, 55, 55, 0.26);
  padding: 0;
  margin: 0;
  height: 0;
}

.thumbnail {
  background-color: transparent;
  border: 0px;
}

.work-permit-thumbnail > img {
  width: 322px;
  height: 205px;
}

/* ========================================================================
 * Navigation Tab
 * ======================================================================== */

.tab-navigation .nav-tabs {
  border-bottom: 0px;
  background-color: transparent;
  display: inline-block;
}

/*.tab-navigation .nav-tabs > li:nth-child(1){
    padding-left: 0px;
}
.tab-navigation .nav-tabs > li {
    padding-left: 5px;
}*/

.nav-tabs>li:last-child>a {
  margin-right: 0px;
}

.tab-navigation ul.nav-tabs:after {
  /*To remove unwanted space underneath ul*/
  display: inline-block;
}

.tab-navigation .nav-tabs> li > a,
.tab-navigation .nav-tabs> li > a:focus,
.tab-navigation .nav-tabs> li > a:hover {
  border-radius: 2px;
  background-color: transparent;
  color: #999999;
  min-width: 60px;
  text-align: center;
  line-height: 10px;
  border: none;
  border-bottom: 2px solid transparent;
  font-weight: bold;
  font-size: 15px;
  margin-right: 10px;
  /*cursor: default; doesn't need since current one is active*/
}

.tab-navigation .nav-tabs> li > a:hover {
  background-color: rgba(0, 112, 255, 1);
  color: #ffffff !important;
}

.tab-navigation .nav-tabs > li.active > a {
  color: rgba(0, 112, 255, 1);
  border-bottom: 2px solid rgba(0, 112, 255, 1);
  font-weight: bold;
}

/* ========================================================================
 * Tooltips
 * ======================================================================== */

.tooltip {
  z-index: 1009;
}

.tooltip-inner {
  padding: 8px 16px;
  text-align: left;
}

/* ========================================================================
 * Left Side-bar
 * ======================================================================== */

.sidebar-menu li .label {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  text-align: center;
  padding: 6px 1px 6px 0;
  font-weight: normal;
  font-size: 90%;
}

.sidebar-menu li .label,
.sidebar-menu li .badge {
  float: right;
  margin-right: 8px;
}

.sidebar-box .sidebar-menu > li > ul > li > ul > li a:before,
.sidebar-rounded .sidebar-menu > li > ul > li > ul > li a:before,
.sidebar-circle .sidebar-menu > li > ul > li > ul > li a:before {
  border-radius: 50%;
  z-index: 1;
  width: 8px;
  height: 8px;
  left: 25px;
  top: 15px;
  bottom: auto;
  background-color: #5e5e5e;
  position: absolute;
  content: "";
  margin-left: 0;
  border-color: transparent;
  -moz-transition: all 0.5s ease-in-out 0s;
  -o-transition: all 0.5s ease-in-out 0s;
  -webkit-transition: all 0.5s ease-in-out;
  -webkit-transition-delay: 0s;
  transition: all 0.5s ease-in-out 0s;
}

.sidebar-box .sidebar-menu > li > ul > li > ul > li a.active:before,
.sidebar-rounded .sidebar-menu > li > ul > li > ul > li a.active:before,
.sidebar-circle .sidebar-menu > li > ul > li > ul > li a.active:before {
  background-color: #428bca !important;
  -moz-box-shadow: 0 0 0 2px #373737;
  -webkit-box-shadow: 0 0 0 2px #373737;
  box-shadow: 0 0 0 2px #373737;
}

.sidebar-box .sidebar-menu > li > ul > li > ul > li a span,
.sidebar-rounded .sidebar-menu > li > ul > li > ul > li a span,
.sidebar-circle .sidebar-menu > li > ul > li > ul > li a span {
  margin-left: 20px;
}

/*side bar second level hover style*/

.sidebar-box .sidebar-menu > li > ul > li > ul > li:hover > a:before,
.sidebar-rounded .sidebar-menu > li > ul > li > ul > li:hover > a:before,
.sidebar-circle .sidebar-menu > li > ul > li > ul > li:hover > a:before,
.sidebar-box .sidebar-menu > li > ul > li > ul > li > ul > li:hover > a:before,
.sidebar-rounded .sidebar-menu > li > ul > li > ul > li > ul > li:hover > a:before,
.sidebar-circle .sidebar-menu > li > ul > li > ul > li > ul > li:hover > a:before {
  background-color: #428bca !important;
  -moz-box-shadow: 0 0 0 2px #373737;
  -webkit-box-shadow: 0 0 0 2px #373737;
  box-shadow: 0 0 0 2px #373737;
}

.sidebar-menu > li > ul > li > a > .arrow {
  float: left;
  margin-left: -35px;
  margin-right: 0;
}

.sidebar-menu > li > ul > li > a > .arrow:before {
  content: "\f105" !important;
}

.sidebar-menu > li > ul > li > a > .arrow.open:before {
  content: "\f107" !important;
}

.sidebar-menu > li > ul > li.subsubmenu:after {
  display: none;
}

#sidebar-left .sidebar-menu ul li.active > ul > li.active a {
  color: #b7b7b7;
}

#sidebar-left .sidebar-menu ul li.active > ul > li.active a:before {
  color: #428bca;
}

#sidebar-left .sidebar-menu li > ul > li > ul > li:hover a:before {
  color: #428bca;
}

#sidebar-left .sidebar-menu li > ul > li > ul > li a {
  color: #fff;
}

#sidebar-left .sidebar-menu li > ul > li:hover > ul > li a:before {
  color: #fff;
}

#sidebar-left .sidebar-menu li > ul > li > ul > li:hover a:before {
  color: #428bca;
}

#sidebar-left.sidebar-box .sidebar-content img,
#sidebar-left.sidebar-rounded .sidebar-content img,
#sidebar-left.sidebar-circle .sidebar-content img {
  border: 1px solid rgba(243, 243, 244, 0.3);
}

#sidebar-left.sidebar-box .sidebar-menu > li.active > a > .icon i,
#sidebar-left.sidebar-rounded .sidebar-menu > li.active > a > .icon i,
#sidebar-left.sidebar-circle .sidebar-menu > li.active > a > .icon i {
  background-color: #494949;
}

#sidebar-left .sidebar-menu ul li:hover a:before {
  color: #1d1d1d;
}

#sidebar-left .sidebar-menu ul li:hover:after,
#sidebar-left .sidebar-menu ul li.active:after {
  background-color: #428bca !important;
}

#sidebar-left.sidebar-box .sidebar-menu > li > ul > li:hover:after,
#sidebar-left.sidebar-rounded .sidebar-menu > li > ul > li:hover:after,
#sidebar-left.sidebar-circle .sidebar-menu > li > ul > li:hover:after {
  -webkit-box-shadow: 0 0 0 0px rgba(243, 243, 244, 0);
  -moz-box-shadow: 0 0 0 0px rgba(243, 243, 244, 0);
  box-shadow: 0 0 0 0px rgba(243, 243, 244, 0);
}

.side-menu-text-wrap {
  max-width: 145px;
  word-break: break-word;
  display: inline-block;
}

.sidebar-menu > li > a > .icon i {
  margin-right: 5px;
}

.sidebar-content,
.sidebar-menu ul {
  background-color: #383838;
}

.sidebar-menu ul li a:before {
  background-color: transparent;
  color: #383838;
}

.sidebar-menu ul li.active a:before,
.sidebar-menu > li > ul > li > a:hover {
  background-color: #1d1d1d;
}

.sidebar-menu ul li:after {
  background-color: #5e5e5e;
}

#sidebar-left:after {
  background-color: #5d5d5d;
}

.sidebar-content {
  background-color: #373737;
  min-height: 82.5px;
}

.sidebar-content .media-heading span {
  color: #fff;
}

.sidebar-content small {
  color: #C6C6C8;
}

.sidebar-menu {
  direction: rtl;
  margin-top: 10px;
  font-size: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100vh - 230px);
}

.sidebar-menu li,
.sidebar-menu li a {
  direction: ltr;
  text-align: left;
}

.sidebar-menu::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

.sidebar-menu::-webkit-scrollbar-thumb {
  background: #A3A3A3;
  height: 10px;
}

.sidebar-menu:hover::-webkit-scrollbar {
  width: 5px !important;
}

body.page-sidebar-minimize .sidebar-menu > li {
  height: 45px !important;
}

body.page-sidebar-minimize #sidebar-left:hover .sidebar-menu,
body.page-sidebar-minimize-auto #sidebar-left:hover .sidebar-menu,
body.page-sidebar-minimize #sidebar-left:hover .sidebar-menu > li.active,
body.page-sidebar-fixed.page-sidebar-minimize #sidebar-left .sidebar-menu:hover {
  width: 300px !important;
}

body.page-sidebar-fixed.page-sidebar-minimize #sidebar-left .sidebar-menu:hover,
body.page-sidebar-fixed.page-sidebar-minimize-auto #sidebar-left .sidebar-menu:hover {
  min-width: 300px !important;
}

body.page-sidebar-fixed.page-sidebar-minimize #sidebar-left .sidebar-menu > .active:hover,
body.page-sidebar-fixed.page-sidebar-minimize-auto #sidebar-left .sidebar-menu > .active:hover {
  width: 300px !important;
}

body.page-sidebar-minimize #sidebar-left .sidebar-menu .submenu > ul,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu .submenu > ul {
  min-width: 225px;
}

body.page-sidebar-minimize #sidebar-left:hover .sidebar-menu > li,
body.page-sidebar-minimize-auto #sidebar-left:hover .sidebar-menu > li {
  width: 300px !important;
}

body.page-sidebar-minimize .sidebar-circle .sidebar-menu > li > a > .custom-icon {
  margin-left: 6px !important;
}

.sidebar-box .sidebar-menu > li > ul > li:after,
.sidebar-rounded .sidebar-menu > li > ul > li:after,
.sidebar-circle .sidebar-menu > li > ul > li:after {
  left: 15px;
}

/*
body.page-sidebar-minimize .sidebar-menu:hover li.active:not(:hover) a {
    width: 75px !important;
}*/

body.page-sidebar-minimize #sidebar-left .sidebar-menu > li.active {
  width: 75px;
}

body.page-sidebar-minimize .sidebar-menu > li > ul > li > a > .arrow {
  margin-right: 20px !important;
}

.sidebar-menu ul li a {
  font-size: inherit;
  line-height: 23px;
}

.sidebar-menu > li.active {
  background-color: transparent !important;
}

.sidebar-menu > li.active:hover {
  background-color: #1d1d1d !important;
}

.sidebar-menu > li > ul > li > a:hover {
  background-color: #1d1d1d;
}

.sidebar-menu > li > a > span {
  color: #fff;
}

.sidebar-menu > li.active > a span {
  color: #fff;
}

.sidebar-menu ul li a:hover {
  color: #fff;
}

.sidebar-menu ul li a {
  color: #fff;
}

.sidebar-menu li .label {
  display: inline-block;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  text-align: center;
  padding: 6px 1px 6px 0;
  font-weight: normal;
  font-size: 90%;
}

/*
     changes for font awesome (icon)
                                        */

.sidebar-menu > li > a:hover .text,
.sidebar-menu > li > a:hover .icon > i,
.sidebar-menu > li.active > a .text,
.sidebar-menu > li.active > a .icon > i {
  color: #15cdff;
}

.sidebar-menu > li > ul > li {
  border-bottom: 1px solid rgba(208, 201, 201, 0.2);
}

.sidebar-menu > li > ul > li.active {
  color: #1d1d1d;
  background-color: #1d1d1d;
}

.sidebar-menu ul li.active a:before {
  color: #1d1d1d;
}

.sidebar-box .sidebar-menu > li > a > .icon:after,
.sidebar-rounded .sidebar-menu > li > a > .icon:after,
.sidebar-circle .sidebar-menu > li > a > .icon:after {
  border: 0px;
}

.sidebar-box .sidebar-menu > li > ul:after,
.sidebar-rounded .sidebar-menu > li > ul:after,
.sidebar-circle .sidebar-menu > li > ul:after {
  border: 0;
}

.sidebar-menu > li > a > .selected {
  border-top: 0;
  border-bottom: 0;
  border-right: 0;
}

.sidebar-box .sidebar-menu > li > a > .icon i,
.sidebar-rounded .sidebar-menu > li > a > .icon i,
.sidebar-circle .sidebar-menu > li > a > .icon i {
  border: 0px;
  background-color: #494949;
}

.sidebar-circle .sidebar-menu > li > a > .icon i {
  border-radius: 0;
}

.sidebar-menu > li > a > .icon i {
  text-align: center;
  line-height: 33px;
  width: 35px;
  font-size: 20px;
  color: #777777;
}

body.page-sidebar-minimize #sidebar-left .sidebar-menu > li > a > .icon i,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu > li > a > .icon i {
  line-height: 33px;
  width: 35px;
  font-size: 20px;
}

.navbar-toolbar .navbar-left .navbar-minimize,
body.page-sidebar-minimize .navbar-minimize,
body.page-sidebar-minimize-auto .navbar-minimize {
  border-right: 1px solid transparent !important;
}

.navbar-toolbar .navbar-right .dropdown > a > i {
  font-size: 15px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.navbar-toolbar .navbar-right .navbar-profile > a .meta .caret {
  color: #294b9a;
}

.navbar-toolbar .navbar-right .dropdown-menu {
  background-color: #373737;
}

.navbar-toolbar .navbar-right .dropdown-menu .dropdown-header {
  background-color: #494949;
  border-bottom: 1px solid #5d5d5d;
  color: #fff;
}

.navbar-toolbar .navbar-right .navbar-profile .dropdown-menu li a {
  color: #fff;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(243, 243, 244, 0.3);
}

.navbar-toolbar .navbar-right .navbar-profile .dropdown-menu li a:hover {
  background-color: #373737;
  color: #fff;
}

.navbar-toolbar .navbar-right .navbar-profile > a .meta .avatar img {
  height: 100%;
}

body.page-sidebar-minimize #header .navbar-minimize > a {
  background-color: #fff;
  border-bottom: 1px solid #fff;
}

body.page-sidebar-minimize #header .navbar-minimize > a:hover {
  background-color: #E6E6E6;
}

body.page-sidebar-minimize .navbar-minimize a i,
body.page-sidebar-minimize-auto .navbar-minimize a i,
.navbar-toolbar .navbar-left .navbar-minimize a:hover,
.navbar-toolbar .navbar-left .navbar-minimize a:focus {
  color: #373737;
}

#header .navbar-header {
  background-color: white;
}

.navbar-minimize-mobile,
.navbar-minimize-mobile:hover {
  background-color: #f3f3f4;
  color: #373737 !important;
}

.navbar-toolbar .navbar-right .dropdown > a:focus > i {
  color: #777 !important;
}

.sidebar-content .pull-left {
  border-right: 1px solid rgba(208, 201, 201, 0.5);
  padding-right: 12px !important;
}

.media-left,
.media-right,
.media-body {
  padding-left: 10px;
}

#sidebar-left.sidebar-box .sidebar-menu > li > ul > li:hover:after,
#sidebar-left.sidebar-rounded .sidebar-menu > li > ul > li:hover:after,
#sidebar-left.sidebar-circle .sidebar-menu > li > ul > li:hover:after {
  box-shadow: inherit;
  -webkit-box-shadow: inherit;
  -moz-box-shadow: inherit;
}

.sidebar-box#sidebar-left .sidebar-menu > li > ul > li:hover::after,
.sidebar-rounded#sidebar-left .sidebar-menu > li > ul > li:hover::after,
.sidebar-circle#sidebar-left .sidebar-menu > li > ul > li:hover::after {
  box-shadow: inherit;
  -webkit-box-shadow: inherit;
  -moz-box-shadow: inherit;
}

.page-sidebar-minimize .footer-content {
  display: none;
}

/* Fixed sidebar for horizontal scrolling*/

#sidebar-left:after {
  position: fixed;
  left: 0;
}

@media (max-width: 768px) {
  #sidebar-left:after {
    left: -220px;
  }
}

@media screen and (max-width: 768px) {
  body.page-sidebar-left-show .navbar-minimize-mobile,
  body.page-sidebar-right-show .navbar-minimize-mobile {
    background-color: #f3f3f4;
  }

  body.page-sidebar-left-show .navbar-minimize-mobile:hover,
  body.page-sidebar-right-show .navbar-minimize-mobile:hover {
    background-color: #f3f3f4;
  }
}

.sidebar-box .sidebar-menu > li > ul > li a:before,
.sidebar-rounded .sidebar-menu > li > ul > li a:before,
.sidebar-circle .sidebar-menu > li > ul > li a:before {
  margin-left: 10px !important;
  margin-left: 0px !important;
}

.sidebar-box .sidebar-menu > li > ul > li:after,
.sidebar-rounded .sidebar-menu > li > ul > li:after,
.sidebar-circle .sidebar-menu > li > ul > li:after {
  top: 15px;
}

body.page-sidebar-minimize #sidebar-left .sidebar-menu .submenu ul li:after,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu .submenu ul li:after {
  left: 15px;
}

.breadcrumb-row {
  height: 30px !important;
}

.header-content .breadcrumb-wrapper .breadcrumb li a.active,
.header-content .breadcrumb-wrapper .breadcrumb li a.active i.fa-circle {
  color: #27A8E0;
  font-weight: 600;
}

.header-content .breadcrumb-wrapper .breadcrumb li a:hover,
.header-content .breadcrumb-wrapper .breadcrumb li a:focus {
  text-decoration: none;
}

.header-content .breadcrumb-wrapper .breadcrumb li a.active i.fa-circle,
.header-content .breadcrumb-wrapper .breadcrumb li a i.fa-circle {
  font-size: 19px;
  padding-top: 6px;
  vertical-align: sub;
}

.header-content .breadcrumb-wrapper .breadcrumb li {
  padding-left: 35px;
}

.header-content .breadcrumb-wrapper .breadcrumb li:first-child {
  padding-left: 0px;
}

.header-content .breadcrumb-wrapper {
  float: left;
  position: static;
}

.header-content .breadcrumb-wrapper .label,
.header-content .breadcrumb-wrapper .breadcrumb li span,
.header-content .breadcrumb-wrapper .breadcrumb li i,
.header-content .breadcrumb-wrapper .breadcrumb li a {
  color: #494949;
}

.header-content .breadcrumb-wrapper .breadcrumb li:last-child a {
  cursor: auto;
}

.navbar-toolbar .navbar-right .dropdown > a .count {
  animation: none;
  -webkit-animation: none;
  left: 28px;
  right: initial;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  padding: 0;
  line-height: 18px;
}

body.page-sidebar-fixed #sidebar-left {
  position: absolute;
  margin-bottom: 30px;
}

html.login-page-background {
  position: relative;
  min-height: 100%;
  background: url(../angularjs/assets/background.jpg) center center no-repeat fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
  height: 100%;
  /*@media screen and (max-width : @iphone-screen) {
    background-attachment: scroll;
    }*/
}

html.login-page-background body {
  background-color: transparent;
}

body.page-sidebar-minimize #sidebar-left.sidebar-box .sidebar-menu .submenu > ul,
body.page-sidebar-minimize-auto #sidebar-left.sidebar-box .sidebar-menu .submenu > ul,
body.page-sidebar-minimize #sidebar-left.sidebar-rounded .sidebar-menu .submenu > ul,
body.page-sidebar-minimize-auto #sidebar-left.sidebar-rounded .sidebar-menu .submenu > ul,
body.page-sidebar-minimize #sidebar-left.sidebar-circle .sidebar-menu .submenu > ul,
body.page-sidebar-minimize-auto #sidebar-left.sidebar-circle .sidebar-menu .submenu > ul {
  top: 44px !important;
}

.header-content h2 {
  color: #294b9a;
}

.header-right .navbar-toolbar:before {
  border-bottom: none;
}

.header-content {
  min-height: 50px;
  overflow: auto;
  border-bottom: 1px solid #616161;
}

/* ========================================================================
 * Custom CSS for sidebar
 * ======================================================================== */

#header {
  z-index: 1007;
  height: 54px;
}

#sidebar-left {
  z-index: 1006;
  height: calc(100% - 20px);
}

.dropdown-menu {
  z-index: 1005;
}

.navbar.navbar-toolbar {
  box-shadow: 0px 1px 8px -2px;
  z-index: 1002;
}

/* ========================================================================
 * Photo upload button
 * ======================================================================== */

.photo-button-container {
  width: auto;
  background-color: rgba(127, 127, 127, 0.7);
  margin: -51px auto 0 auto;
  position: relative;
  text-align: center;
  height: 40px;
}

.photo-button-container .btn {
  padding: 6px 3px;
  min-width: auto !important;
  box-shadow: none !important;
}

.emp-summary-name {
  font-size: 16px;
}

.btn-camera,
.btn-pencil,
.btn-upload,
.btn-reset:hover,
.btn-reset:focus {
  background-color: transparent !important;
  border-color: transparent !important;
}

input-picture label[for=picture] {
  display: inline;
  /*to remove the space occupied by this label*/
}

div.photo-edit {
  height: 147px;
  width: 147px;
  border-radius: 50%;
  border: 2px solid #cccccc;
  background-color: #ffffff;
  overflow: hidden;
  margin: auto;
}

div.photo-edit > div,
div.photo-edit > div > .thumbnail {
  position: relative;
  height: 100%;
  padding: 0;
}

div.photo-edit .thumbnail > div {
  width: inherit;
  height: inherit;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

div.photo-edit .thumbnail > div.potrait {
  background-size: 100% auto;
}

div.photo-edit .thumbnail > div.landscape {
  background-size: auto 100%;
}

div.company-logo div.photo-edit .thumbnail > div,
div.payslip-company div.photo-edit .thumbnail > div {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  position: relative;
  top: 20px;
}

/* Disabled landscape on company */

div.payslip-company div.photo-edit .thumbnail > div.landscape {
  background-size: 100% auto;
}

ul.emp-summary-details {
  display: table;
  margin: auto;
}

.photo-edit .btn-upload {
  min-width: auto;
}

/* Upload photo button */

.btn-upload {
  text-shadow: 1px 1px 10px #000;
}

.br-md {
  border-right: 1px solid #ADADAD;
}

@media screen and (max-width: 990px) {
  .br-md {
    border-right: none;
  }
}

/*****
Footer
*/

.page-sidebar-minimize .footer-content {
  display: none;
}

.footer-content {
  position: left;
  bottom: 0;
  color: #fff;
  z-index: 1006;
  background-color: #373737;
  border-top: 0px;
  border-bottom: 0px;
  font-size: 10px;
  text-align: center;
  padding-top: 6px;
  width: 220px;
  position: fixed;
}

/****
paginate button
****/

.button-paginate-left,
.button-paginate-right {
  display: none;
  position: fixed;
  top: 60%;
  background-color: #5E5E5E;
  width: 37px;
  height: 42px;
  color: #fff;
  padding: 12px 13px;
  font-weight: bold;
  font-size: 17px;
}

.button-paginate-left:hover,
.button-paginate-right:hover {
  cursor: pointer;
}

/* ========================================================================
 * Photos
 * ======================================================================== */

img.custom-icon,
i.custom-icon {
  height: 24px;
  width: 24px;
  background-color: #c5e5df;
  border-color: #c5e5df;
  color: white;
}

custom-photo img.custom-icon {
  margin-right: 8px;
}

custom-photo:last-child img.custom-icon {
  margin-right: 0;
}

i.custom-icon {
  padding: 4px 4px;
  margin-top: 0px;
}

.avatar-thumbnail {
  position: relative;
  height: 100%;
  padding: 0;
}

.avatar-thumbnail > div {
  width: inherit;
  height: inherit;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.avatar-thumbnail > div.potrait {
  background-size: 100% auto;
}

.avatar-thumbnail > div.landscape {
  background-size: auto 100%;
}

.sidebar-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  float: left;
}

/* ========================================================================
 * Login Page
 * ======================================================================== */

.login-page {
  min-height: 100%;
  margin: 0 auto -30px;
  overflow: hidden;
}

.login-page .panel {
  background-color: transparent;
}

.login-page .page-header {
  border-bottom: none;
  margin: 0;
}

.login-background-img {
  position: absolute;
  width: 100%;
  min-height: 100%;
}

.login-logo-container {
  width: 177px;
  height: 177px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
  background-color: #fff;
  border: 3px solid rgba(255, 255, 255, 0.7);
  text-align: center;
}

.login-logo-inner-container {
  height: 100%;
  position: relative;
}

.login-logo {
  width: 130px;
  max-height: 100px;
  background-color: #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 0;
  right: 0;
}

#slogan-upper-divider {
  width: 480px;
  margin: auto;
}

#slogan-upper-divider .triangle {
  position: relative;
  margin: 0 3px 0;
  width: 13px;
  top: -5px;
}

#slogan-upper-divider > div {
  display: inline-block;
}

#slogan-upper-divider > div.line-half {
  width: 226px;
  margin: 10px 0;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.37);
}

#slogan-upper-divider .triangle > div {
  width: 13px;
  height: 2px;
  /*background: rgba(255, 255, 255, 0.37);*/
}

#slogan-upper-divider .triangle > div:before {
  content: " ";
  display: block;
  width: 13px;
  height: 1px;
  background: rgba(255, 255, 255, 0.37);
  -webkit-transform: rotate(38deg);
  -moz-transform: rotate(38deg);
  -ms-transform: rotate(38deg);
  transform: rotate(38deg);
  position: absolute;
  top: -8px;
  right: -5px;
}

#slogan-upper-divider .triangle > div:after {
  content: " ";
  display: block;
  width: 13px;
  height: 1px;
  background: rgba(255, 255, 255, 0.37);
  -webkit-transform: rotate(-38deg);
  -moz-transform: rotate(-38deg);
  -ms-transform: rotate(-38deg);
  transform: rotate(-38deg);
  position: absolute;
  top: -8px;
  left: -5px;
}

#slogan-lower-divider {
  width: 480px;
  margin: 20px auto;
  border-bottom: 1px solid rgba(255, 255, 255, 0.37);
}

#wrapper .login-align-container.row,
#wrapper .login-align-container .page-header {
  max-width: 600px;
  margin: 0 auto;
  /*border-bottom: 1px solid rgba(255, 255, 255, 0.37);*/
}

.login-page .fa-bars {
  position: relative;
  margin-left: 25px;
  margin-top: 20px;
  color: #fff;
  font-size: 24px;
}

.login-details-container {
  color: #fff;
}

.login-details-container h3 {
  margin: 0 inherit;
}

.login-page .login-guest-details {
  position: relative;
  color: #fff;
  margin-right: 30px;
  margin-top: 5px;
}

.login-page .login-welcome {
  font-size: 11px;
}

.login-page .login-user {
  font-size: 15px;
}

.login-input-container {
  max-width: 450px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}

.login-input-container .btn-login {
  width: 150px;
}

.login-input-container input[type="text"],
.login-input-container input[type="password"] {
  padding-left: 30px;
}

.login-input-container div#login_input_hostname input[type="text"] {
  padding-right: 90px;
}

#login-form div.form-row {
  margin-bottom: 10px;
}

#login-form div.form-row .element {
  position: absolute;
  z-index: 10;
}

.btn,
button.btn {
  font-size: 12px;
  line-height: 16px;
  color: #ffffff;
}



.btn.btn-lg:hover {
  font-size: 18px;
}

/* ========================================================================
 *  Input minutes
 * ======================================================================== */

.input-minutes label {
  max-width: 300px;
}

/* ========================================================================
 *  input-multi-toggle-button
 * ======================================================================== */

.layout-ui5 .btn-group-toggle-btn {
  box-shadow: 0 0.5px 2px 0px rgba(0,0,0,0.1) !important;
  /* border: 1px solid transparent; */
}

.layout-ui5 .btn-group-toggle-btn .btn {
  background-color: #eee !important;
  color: #5E5E5E;
}

.layout-ui5 .btn-group-toggle-btn label {
  padding-right: 24px;
}

.layout-ui5 .btn-group-toggle-btn label span.glyphicon {
  opacity: 0;
  font-size: 11;
  margin-right: 5px;
}

.layout-ui5 .btn-group-toggle-btn .btn.active {
  background-color: #3d61ff !important;
  color: #ffffff;
}

.layout-ui5 .btn-group-toggle-btn label:hover {
  background-color: #3d61ff !important;
  color: #eee !important;
  border: 1px solid #777 !important;
  box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}

.layout-ui5 .btn-group-toggle-btn label.active span.glyphicon {
  opacity: 1;
  font-size: 11;
  margin-right: 5px;
}

.layout-ui5 .btn-group-toggle-btn label span.glyphicon {
  opacity: 0;
  font-size: 11;
  margin-right: 5px;
}

.layout-ui5 .btn-group-toggle-btn label:hover span.glyphicon {
  opacity: 1;
}

/*.layout-ui5 .btn-group-toggle-btn-container.form-inline .row {
    display: inline-block;
    margin: 0;
}
.layout-ui5 .btn-group-toggle-btn-container.form-inline .row .col-md-4,
.layout-ui5 .btn-group-toggle-btn-container.form-inline .row .col-md-8 {
    width: auto;
    padding: 0;
}*/

/* ========================================================================
* inputMultiToggleButton css - Moved by Sky
* ======================================================================== */

.btn-group-toggle-btn label.active span.glyphicon {
  opacity: 1;
  font-size: 11;
  margin-right: 5px;
}

.btn-group-toggle-btn label span.glyphicon {
  opacity: 0;
  font-size: 11;
  margin-right: 5px;
}

.btn-group-toggle-btn label {
  padding-right: 24px;
  margin-right: 2px;
  margin-top: 2px;
  font-weight: bold;
  background-color: #eee !important;
  border: 1px solid #ccc;
  color: #5E5E5E;
}

.btn-group-toggle-btn label.active {
  background-color: #4B7CBF !important;
  color: white;
}

.btn-group-toggle-btn label:hover {
  color: #fff;
  background-color: #204d74 !important;
  border-color: #122b40;
}

.btn-group-toggle-btn label:hover span.glyphicon {
  opacity: 1;
}

.btn-group-toggle-btn label.viewonly {
  pointer-events: none;
}

.btn-group-toggle-btn-container {
  margin-bottom: 15px;
}

/* ========================================================================
 *  input-select-object
 * ======================================================================== */

.input-select-object {
  margin-bottom: 15px;
}

.input-select-object.inline label {
  /*width: 300px;
    display: inline-block;
    vertical-align: middle;
    float: none;*/
}

.input-select-object.inline .select-wrapper {
  /*display: inline-block;
    vertical-align: middle;
    float: none;*/
}

.input-select-object.inline .select-wrapper select[disabled] {
  /*width: 200px;*/
}

/* ========================================================================
 *  input-text
 * ======================================================================== */

.input-text-new {
  margin-bottom: 15px;
}

/* ========================================================================
 * All input margin-bottom
 * ======================================================================== */

.yearmonth-picker,
.input-select-tab {
  margin-bottom: 15px;
}

/* ========================================================================
 *  Toggle button
 * ======================================================================== */

.toggle-btn {
  position: relative;
  width: 65px;
  height: 26px;
  line-height: 31px;
}

.toggle-container.form-inline .row {
  margin-bottom: 15px;
}

.toggle-container.form-inline .row .col-md-9 {
  /*max-width: 300px;
    display: inline-block;
    vertical-align: middle;
    float: none;*/
}

.toggle-container.form-inline .row .col-md-3 {
  /*display: inline-block;
    vertical-align: middle;
    float: none;
    padding: 0;*/
}

.toggle-container.form-inline label {
  line-height: 30px;
}

.toggle-btn .toggle-round {
  margin: 0 auto;
  width: 75%;
  height: 100%;
}

.toggle-btn .toggle-round label {
  text-align: left;
  display: block;
  width: 100;
  height: 100%;
  border: 1px solid #cccccc;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  background-color: #777;
  -webkit-transition: background-color 200ms, border-color 200ms;
  -moz-transition: background-color 200ms, border-color 200ms;
  transition: background-color 200ms, border-color 200ms;
}

.toggle-btn input[type="checkbox"] {
  position: absolute;
  left: -2500px;
}

.toggle-btn label {
  display: block;
  /*position: absolute;*/
  /* width: 100%; */
  /* height: 100%; */
  cursor: pointer;
}

.toggle-btn .toggle-round label:before {
  position: absolute;
  content: " ";
  top: 50%;
  margin-top: -10px;
  margin-left: 1px;
  display: inline-block;
  background: #FFFFFF;
  width: 20px;
  height: 20px;
  box-shadow: 1px 1px 1px 0px #e5e5e4;
  -webkit-border-radius: 23px;
  -moz-border-radius: 23px;
  border-radius: 23px;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
  -moz-transition: -moz-transform 200ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
  transition: transform 200ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
}

.toggle-btn input[type="checkbox"]:checked ~ label:before {
  -webkit-transform: translate3d(25px, -0.5px, 0);
  -moz-transform: translate3d(25px, -0.5px, 0);
  transform: translate3d(25px, -0.5px, 0);
  border-color: #67be62;
}

.toggle-btn input[type="checkbox"]:checked ~ label {
  background-color: #67be62;
  border-color: #67be62;
}

.toggle-btn .toggle-round span.toogle-tick {
  position: absolute;
  color: #fff;
  margin-top: -2px;
  margin-left: 5px;
  font-size: 15px;
}

.toggle-btn .toggle-round span.toogle-cross {
  position: absolute;
  color: #fff;
  margin-top: -2px;
  margin-left: 29px;
  font-size: 15px;
}

.toggle-btn .toggle-round span.toogle-cross i.fa-times:hover {
  color: #fff !important;
}

.text-center {
  text-align: center!important;
}

.input-group-addon {
  position: absolute;
  right: 1px;
  top: 1px;
  z-index: 2;
  padding: 5px 0;
  min-width: 30px;
  border: 0px;
  background-color: #ffffff;
}

.form-control {
  /*height: 30px;*/
}

/* ========================================================================
 * Date-Picker
 * ======================================================================== */

.datepicker table > thead > tr > th,
.datepicker table > tbody > tr td {
  text-align: center !important;
}

.datepicker table > thead > tr .prev,
.datepicker table > thead > tr .switch,
.datepicker table > thead > tr .next,
.datepicker table > thead > tr .prev:hover,
.datepicker table > thead > tr .switch:hover,
.datepicker table > thead > tr .next:hover,
.datepicker table > thead > tr > th,
.datepicker table > tbody > tr > td.active,
.datepicker table > tbody > tr > td.active:hover,
.datepicker table > tbody > tr > td.active:disabled,
.datepicker table > tbody > tr > td.active.disabled:hover,
.datepicker table > thead > tr:first-child:first-child > th:hover {
  background-color: #253e53 !important;
}

.datepicker table > tbody > tr > td:hover {
  /*background-color: #949292 !important;*/
}

.datepicker table thead tr th {
  border-color: #949292 !important;
  color: #F9EFEF;
  border-bottom: 0px;
}

.datepicker table tbody tr:first-child td {
  padding-top: 10px;
}

.datepicker table tbody tr td.active.active {
  border: none;
}

.bootstrap-datetimepicker-widget table td span.active {
  background-color: #253e53 !important;
}

.bootstrap-datetimepicker-widget {
  white-space: normal;
  min-width: 250px;
  width: auto !important;
}

.bootstrap-datetimepicker-widget table td,
.bootstrap-datetimepicker-widget table td span {
  text-align: center !important;
}

.bootstrap-datetimepicker-widget table td a:hover {
  background-color: #ffffff;
  color: #333333;
  border: 1px solid transparent;
}

.timepicker .btn {
  border: none;
  background-color: transparent;
  color: #636e7b;
}

.timepicker .btn:hover {
  border: none;
}

.datetimepicker ul td {
  color: #636e7b;
}

.datetimepicker ul {
  width: 100%!important;
  padding: 0!important;
}

.datetimepicker-hidden {
  display: none !important;
}

.bootstrap-datetimepicker-widget table td.disabled,
.bootstrap-datetimepicker-widget table td.disabled {
  background-color: #949292 !important;
  color: #fff !important;
}

/* Error */

.validation-error {
  font-size: 12px;
  color: #f94d4d;
}

/* Buttons */

.btn,
button.btn {
  font-size: 12px;
  line-height: 16px;
  color: #ffffff;
  background-color: #3d61ff;
  border: 1px solid transparent;
}

.btn.btn-lg {
  font-size: 18px;
}

/*Overwrite button */

.btn-invert .btn,
.btn:hover,
.btn-invert button.btn,
.btn-invert button.btn:hover {
  border: 1px solid transparent;
}

.btn,
table .btn-text,
.btn:hover,
button.btn:hover {
  border-radius: 2px;
  border: 1px solid transparent;
  /*height: 30px;*/
}

.btn.btn-lg,
.btn.btn-lg:hover {
  height: 36px !important;
}

/*Fixed boostrap timepicker button */

.timepicker .btn,
.timepicker .btn:hover,
.timepicker a,
.timepicker button.btn:hover {
  height: auto !important;
}

/*table .btn i{
    font-size: 18px;
}*/

/** panel customize **/



.panel-primary > .panel-heading {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid rgba(55, 55, 55, 0.26);
  color: #5E5E5E;
  border-radius: 2px;
}

.panel-primary > .panel-heading.no-border {
  border-bottom: none;
}

.panel .panel-body {
  background-color: #FFFFFF;
}

.panel-primary > .panel-heading > .panel-title .btn {
  min-width: auto;
}

.form-control {
  border-radius: 2px;
}

/*daterange picker */

.daterangepicker {
  width: 560px !important;
  height: 320px !important;
}

.daterangepicker.show-ranges {
  width: 700px !important;
  height: 320px !important;
}

.daterangepicker .daterangepicker_input {
  display: none;
}

.daterangepicker .ranges li {
  background-color: transparent;
  border: none;
  margin-bottom: 3px;
  color: #3d61ff;
}

.daterangepicker .ranges li:hover,
.daterangepicker .ranges li.active {
  background-color: #3d61ff;
  border: none;
  color: #ffffff;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: #3d61ff;
  border-color: transparent;
  color: #fff;
}

/*selector-tab */

.round-icon {
  padding: 0;
  text-align: center;
  background-color: #007aff;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  overflow: hidden;
  color: white;
  line-height: 25px;
  font-size: 15px;
}

label > .round-icon {
  position: relative;
  top: 7px;
  display: inline-block;
  font-size: 13px;
}

ul.selector-tab {
  list-style: none;
  padding: 0;
  margin-left: -10px;
}

ul.selector-tab li {
  border: 1px solid #4B7CBF;
  border-radius: 3px;
  width: 200px;
  float: left;
  margin: 6px 12px;
  height: 80px;
  text-align: center;
  background-color: #ffffff;
  position: relative;
}

ul.selector-tab li div.round-icon {
  display: none;
  position: absolute;
  top: -7px;
  left: -10px;
}

ul.selector-tab li div.round-icon.round-icon-selected {
  left: -10px;
}

ul.selector-tab li div.round-icon.round-icon-tooltip {
  display: block;
  left: initial;
  right: -10px;
  font-size: 13px;
}

ul.selector-tab li.selected div.round-icon,
ul.selector-tab li:hover div.round-icon {
  top: -10px;
}

ul.selector-tab li.selected div.round-icon-tooltip,
ul.selector-tab li:hover div.round-icon-tooltip {
  right: -13px;
}

ul.selector-tab li.selected div.round-icon-selected,
ul.selector-tab li:hover div.round-icon-selected {
  left: -13px;
}

ul.selector-tab li.selected div.round-icon-selected {
  display: block;
}

ul.selector-tab li.selected {
  border: 3px solid #007aff;
}

ul.selector-tab li:hover {
  border: 3px solid #007aff;
  cursor: pointer;
}

ul.selector-tab li span.value {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 165px;
  margin: 0;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  line-height: 16px;
  white-space: initial;
}

/* checkbox */

.disable-highlight,
.ckbox label,
.toggle-btn-container {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.ckbox label:before {
  color: #3d61ff;
  background-color: #ffffff;
  top: -4px;
}

.ckbox input[type=checkbox]:checked + label::after {
  border: 1px solid #BBB;
  background-color: #ffffff;
  color: #3d61ff;
  top: -4px;
  line-height: 18px;
}

.ckbox.disabled input[type=checkbox]:checked + label::after {
  border: 1px solid #BBB;
  background-color: #e8e8e8;
  color: #BBB;
}

.ckbox.disabled label::before {
  border: 1px solid #BBB;
  background-color: #e8e8e8;
}

.ckbox-small .ckbox label:before {
  width: 18px;
  height: 18px;
  line-height: 12px;
}

.ckbox-small .ckbox input[type=checkbox]:checked + label::after {
  width: 18px;
  height: 18px;
  line-height: 16px;
  font-size: 10px;
  font-weight: normal;
  padding-left: 2px;
  padding-right: 2px;
}

.ckbox-small .ckbox label,
.ckbox-small {
  padding: 0 0 0 1px;
}

.ckbox-small .ckbox label {
  vertical-align: super;
}

.rdio-herd input[type=radio]:checked + label::after {
  border-color: rgba(38, 133, 254, 1);
  background-color: rgba(38, 133, 254, 1);
}

.ckbox-right label:before,
.rdio label:before {
  right: 0px;
  left: inherit;
}

.ckbox-right input[type=checkbox]:checked + label::after {
  right: 0px;
  left: inherit;
}

.ckbox-right label {
  padding-left: 0px;
  padding-right: 25px;
}

.ckbox-right input[type=checkbox] {
  display: none;
}

/* ========================================================================
* Real Time Upload Directive
* ======================================================================== */

.upload-document-list {
  position: absolute;
  padding: 5px;
}

.upload-document-downloadable {
  cursor: pointer;
  color: #4B7CBF;
  font-weight: bold;
}

.upload-progress-container {
  border: solid 1px #E9EAED;
  border-radius: 3px;
  margin: 5px;
  width: 100%;
  height: 60px;
  margin-left: -1px;
}

.upload-progress-container-alert {
  background-color: #f2dede;
  border-color: #ebcccc;
  color: #a94442;
}

.upload-progress-container .progress {
  width: 250px;
  height: 5px;
  margin-bottom: 0px;
  border-radius: 5px;
}

.upload-progress-container .upload-progress-icon {
  font-size: 35px;
  padding: 15px;
}

.upload-progress-container .upload-progress-success {
  color: #51B963;
  font-weight: bold;
}

.upload-progress-container .upload-progress-error {
  color: #E9573F;
  font-weight: bold;
}

.upload-document-list-icon {
  font-size: 25px;
  padding-right: 5px;
}

.upload-progress .fa-file-pdf {
  color: #ff0000;
}

.upload-progress .fa-file-word {
  color: #4A7DB1;
}

.upload-progress .fa-file-excel {
  color: #008000;
}

.upload-progress .fa-file-powerpoint {
  color: #EA3C00;
}

.real-time-upload-fields {
  width: 100%;
  height: 200px;
  border: 1px dashed #337ab7;
}

.real-time-upload-fields .real-time-upload-fields-label {
  font-size: 20px;
  text-align: center;
  color: #337ab7;
  cursor: pointer;
  font-weight: bold;
  padding: 5px;
}

.real-time-upload-fields i {
  font-size: 80px;
}

.real-time-upload-fields-tooltip {
  font-size: 12px;
  color: #999999;
  padding-left: 30px;
}

.upload-progress-remove-button {
  margin-right: 20px;
  display: block;
  float: right;
  cursor: pointer;
  font-size: 15px;
}

/* ========================================================================
* Upload attachment directive
* ======================================================================== */

.attachment-container {
  list-style-type: none;
  margin-top: 15px;
}

.attachment {
  border-radius: 3px;
  display: block;
  margin: 5px;
  width: 150px;
  height: 150px;
}

.attachment .attachment-slot {
  height: 120px;
  border-radius: 5px;
  background-size: cover;
  background-color: #ffffff;
  border: solid 1px #E9EAED;
}

.attachment .attachment-slot .icon {
  text-align: center;
  font-size: 20pt;
  line-height: 118px;
}

.attachment .attachment-slot .icon-document {
  text-align: center;
  font-size: 48pt;
  line-height: 118px;
  border-radius: 3px;
}

.attachment .attachment-slot .icon-document .fa-file-pdf {
  color: #ff0000;
}

.attachment .attachment-slot .icon-document .fa-file-word {
  color: #4A7DB1;
}

.attachment .attachment-slot .icon-document .fa-file-excel {
  color: #008000;
}

.attachment .attachment-slot .icon-document .fa-file-powerpoint {
  color: #EA3C00;
}

.attachment .attachment-slot .icon .bottom {
  padding: 5px;
}

.attachment .bottom {
  padding: 5px 10px;
  font-size: 13px;
  cursor: pointer;
}

.attachment .top {
  text-align: center;
  font-weight: 700;
  margin-bottom: 6px;
}

.attachment .attachment-delete-link {
  position: absolute;
  cursor: pointer;
  color: #ffffff;
  width: 21px;
  background-color: #f94d4d;
  text-align: center;
  border-radius: 50%;
  font-size: 15px;
  right: 0px;
  top: -10px;
}

.attachment .view-attachment-icon {
  display: none;
}

.attachment .attachment-slot:hover .view-attachment-icon {
  display: block;
  cursor: pointer;
  color: black;
}

.attachment .attachment-not-found {
  margin-top: -20px;
  margin-bottom: 20px;
}

.btn.btn-upload-attachment .fa-cloud-upload-alt {
  color: #ffffff;
}

.btn-invite-upload {
  width: 100%;
  font-weight: bolder;
  cursor: pointer;
}

.btn-invite-upload i,
.row-attachment i {
  margin-right: 10px;
  color: #00ACF2 !important;
  font-size: 14px !important;
  width: 15px;
}

.invite-attachment {
  border: 1px solid #c3c3c3;
  padding: 10px 15px;
  border-radius: 5px;
}

.row-attachment {
  margin-top: 5px;
  color: #c3c3c3;
  font-weight: bolder;
  cursor: pointer;
}

.row-attachment .attachment-delete-link i {
  color: #c3c3c3 !important;
  text-align: right;
}

.row-attachment .view-attachment-icon {
  display: inline-block;
  width: 24px;
}

/* ========================================================================
* search employee
* ======================================================================== */

.header-filter .has-feedback .form-control.input-search,
.header-filter .has-feedback .form-control.input-search:focus {
  border: 2px solid #3d61ff !important;
}

.has-feedback .form-control.input-search,
.has-feedback .form-control.input-search:focus {
  padding: 0 29px;
  width: 100%;
  height: 30px;
  border-radius: 2px;
  font-size: 11px !important;
  font-weight: normal;
  -webkit-appearance: none;
}

.has-feedback .form-control-feedback {
  line-height: 30px;
  color: #3d61ff;
  height: 30px;
}

.has-feedback label ~ .form-control-feedback {
  top: 26px;
}

.has-feedback .form-control-feedback.glyphicon-search,
.has-feedback .form-control-feedback.glyphicon-refresh {
  left: 0;
  right: auto;
}

.has-feedback .glyphicon-remove {
  left: auto;
  right: 0;
  pointer-events: initial;
}

.has-feedback .form-control-feedback.glyphicon-remove:hover {
  cursor: pointer;
  font-size: 15px;
}

.autocomplete .dropdown-menu li.active a,
.autocomplete .dropdown-menu li.active a:hover,
.autocomplete .dropdown-menu li.active a:focus {
  background-color: #fff;
  height: 47px;
  line-height: 37px;
  font-size: 14px;
  min-width: 207px;
  color: #a5a5a5;
}

.autocomplete .dropdown-menu {
  border: 2px solid #3d61ff;
}

.autocomplete2 .hints {
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  font-size: 12px;
  border: 1px solid #DDD;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  float: left;
  min-width: 160px;
  padding: 0;
  margin: 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,.15);
  -webkit-box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
  box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
}

.autocomplete2 .hints .scollable-menu {
  z-index: 1000;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  text-align: left;
  list-style: none;
  width: 100%;
  background-color: #fff;
}

.autocomplete2 .hints .scollable-menu li {
  padding: 10px;
  cursor: pointer;
}

.autocomplete2 .hints .scollable-menu li:hover {
  background-color: #E5EFFC;
  border-radius: 2px;
}

.has-feedback .form-control.input-search,
.has-feedback .form-control.input-search:focus {
  height: 34px;
}

.has-feedback .form-control-feedback {
  line-height: 34px;
}

.row > .has-feedback .glyphicon-search,
.row > .has-feedback .glyphicon-refresh {
  left: 10px;
}

.row > .has-feedback .glyphicon-remove {
  right: 10px;
}

/* Search Bar input CSS */

.has-feedback-search-bar .form-control.input-search,
.has-feedback-search-bar .form-control.input-search:focus {
  padding: 0px 100px 0px 30px;
  width: 300px;
  height: 34px;
  border-radius: 2px;
  font-size: 11px !important;
  font-weight: normal;
}

.has-feedback-search-bar .form-control-feedback {
  line-height: 34px;
  color: #3d61ff;
  height: 30px;
}

.has-feedback-search-bar label ~ .form-control-feedback {
  top: 26px;
}

.has-feedback-search-bar .form-control-feedback.glyphicon-search,
.has-feedback-search-bar .form-control-feedback.glyphicon-refresh {
  left: 0;
  right: auto;
}

.has-feedback-search-bar .glyphicon-remove {
  left: auto;
  right: 72px;
  pointer-events: initial;
}

.has-feedback-search-bar .glyphicon-remove.no-type {
  right: 0px !important;
}

.has-feedback-search-bar .form-control-feedback.glyphicon-remove:hover {
  cursor: pointer;
  font-size: 15px;
}

/* ========================================================================
* radio btn style
* ======================================================================== */

.radio-btn-container {
  display: block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding-left: 26px;
  font-weight: 500;
}

.radio-btn-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.radio-btn-checkmark {
  position: absolute;
  top: 2px;
  left: 0;
  height: 16px;
  width: 16px;
  background-color: #fff;
  border-radius: 50%;
  border: 1px solid rgba(201, 201, 201, 1);
}

.radio-btn-container:hover input ~ .radio-btn-checkmark {
  background-color: #ccc;
}

.radio-btn-container input:checked ~ .radio-btn-checkmark {
  background-color: #fff;
}

.radio-btn-checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.radio-btn-container input:checked ~ .radio-btn-checkmark:after {
  display: block;
}

.radio-btn-container .radio-btn-checkmark:after {
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 112, 255, 1);
}

.sidebar-menu > li > ul > li > ul > li > a > .arrow:before {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 600 !important;
  font-size: 15px;
  content: "\f101" !important;
  float: left;
  margin-left: -5px;
  margin-right: 0;
}

.sidebar-menu > li > ul > li > ul > li > a > .arrow.open:before {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 600 !important;
  font-size: 15px;
  content: "\f103" !important;
  float: left;
  margin-left: -5px;
  margin-right: 0;
}

#side-menu > li > ul > li > ul > li.subsubmenu > a::before {
  display: none;
}

#sidebar-left .sidebar-menu ul li > ul > li > ul > li > a:before {
  margin-left: 10px !important;
}

.sidebar-box .sidebar-menu > li > ul > li > ul > li:hover + a:before,
.sidebar-rounded .sidebar-menu > li > ul > li > ul > li:hover + a:before,
.sidebar-circle .sidebar-menu > li > ul > li > ul > li:hover + a:before {
  background-color: #428bca !important;
  -moz-box-shadow: 0 0 0 2px #373737;
  -webkit-box-shadow: 0 0 0 2px #373737;
  box-shadow: 0 0 0 2px #373737;
}

.ckbox input[type=checkbox]:checked + label::after,
.sidebar-menu > li > ul > li > a > .arrow:before,
.sidebar-menu > li > a > .arrow:before,
.sidebar-menu > li > a > .plus:before {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 600 !important;
}

.modal-xlg {
  width: 1100px;
}

.sidebar-menu > li > a > span {
  vertical-align: middle !important;
}

.daterangepicker.single.show-calendar.opensright {
  width: 285px !important;
  height: 320px !important;
}
/* ========================================================================
* Custom CSS for exception icon list
* ======================================================================== */

ul.exception-icon-list {
  list-style-type: none;
  padding: 0;
}

ul.exception-icon-list li {
  float: left;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  padding: 3px;
  margin: 1px;
  text-align: center;
  line-height: 15px;
}

ul.exception-icon-list .fas,
ul.exception-icon-list .far {
  color: white;
}

ul.exception-icon-list li.warning {
  background-color: #e6a716;
}

ul.exception-icon-list li.error {
  background-color: #eb2027;
}

ul.exception-icon-list li.success {
  background-color: #53a352;
}

/* ========================================================================
* att-item-group-nav
* ======================================================================== */

.att-item-group-nav {
  border: 1px solid #ccc;
}

.att-item-group-header {
  font-size: 15px;
  height: 40px;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
  text-align: center;
  line-height: 40px;
}

.att-item-group-nav .btn-group {
  background-color: #fff !important;
  color: #636e7b;
  border-radius: 0px;
  font-weight: bold;
  min-height: 35px;
  padding-top: 8px;
  border-bottom: 1px solid #ccc;
  width: 100% !important;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0px 0px 0px !important;
}

.att-item-group-nav .btn-group:hover {
  border: 1px solid #636e7b;
}

.att-item-group-nav .btn-delete-group .btn,
.att-item-group-nav .btn-edit-group .btn {
  background-color: #204d74;
  color: #fff;
  border-radius: 0px;
  font-weight: bold;
  padding-top: 8px;
  height: 35px;
  border-right: 1px solid;
  width: 100% !important;
  font-size: 12px;
}

.att-item-group-nav .btn-edit-group .btn {
  border-right: 0px !important;
}

.att-item-group-nav label.active {
  background-color: #204d74 !important;
  color: #fff;
  border-top: 1px solid #ccc;
}

.att-item-group-nav label + .btn-delete-group,
.att-item-group-nav label + .btn-delete-group + .btn-edit-group {
  display: block;
  float: left;
  width: 50%;
}

.btn-primary .badge {
  background-color: #204d74;
  color: #fff;
  font-size: 10px;
  border-radius: 4px;
  width: 60px;
  float: left;
  margin-right: 10px;
}

.att-item-group-nav label.active .badge {
  background-color: #fff;
  color: #204d74;
}

.header-title-attendance-item .badge {
  color: #FFF;
  border-radius: 4px;
  height: 23px;
  line-height: 15px;
  margin-left: 10px;
  font-size: 12px;
  background-color: #00bfa5;
}

.container-setting-result {
  border: 1px solid #4B7CBF;
  height: 100%;
  font-size: 11px;
  padding: 0px 10px 10px 10px;
  background-color: white;
}

.att-item-priority {
  font-size: 14px;
  font-weight: bold;
  color: #4B7CBF;
  margin-bottom: 5px;
  margin-right: 10px;
  margin-top: 2px;
}

.priority-btn button {
  background-color: transparent !important;
  color: #4B7CBF;
  font-size: 20px;
  padding-top: 0px;
  padding-right: 5px;
  padding-left: 0px;
  min-width: 0px !important;
  box-shadow: 0px 0px 0px !important;
}

.att-item-highlight-blue {
  color: #4B7CBF;
}

.position-relative {
  position: relative;
}

/* ========================================================================
* finalize-timesheet
* ======================================================================== */

.attendance-employee-detail,
.attendance-timesheet-summary,
.attendance-table-detail {
  background-color: #ffffff;
  box-shadow: 0 0.5px 2px 0px rgba(0,0,0,0.1) !important;
}

@media (max-width: 1500px) {
  .attendance-table-detail table {
    font-size: 11px !important;
  }
}

@media (max-width: 1300px) {
  .attendance-table-detail table {
    font-size: 10px !important;
  }
}

.attendance-employee-detail {
  padding-bottom: 20px;
}

.attendance-employee-detail ul {
  list-style: none;
  text-align: left !important;
  padding-left: 0px;
  width: 125px;
  margin-left: calc(50% - 45px);
}

.attendance-employee-detail ul li i {
  width: 15px;
}

.attendance-timesheet-summary .badge {
  color: #FFF;
  border-radius: 4px;
  height: 23px;
  line-height: 15px;
  margin-left: 5px;
  font-size: 12px;
}

.attendance-timesheet-summary .badge-pending {
  background: #FB8C00;
}

.attendance-timesheet-summary .badge-finalized {
  background: #A166AB;
}

.attendance-timesheet-summary .header-badge {
  height: 75px;
  width: 75px;
  background: linear-gradient(to right,#07B6F7 5%,#0889F3 95%);
  border-radius: 50%;
  padding-left: 22px;
  padding-top: 20px;
  font-size: 33px;
  color: white;
  float: left;
}

.attendance-timesheet-summary .header-badge-container {
  margin-left: 30px;
  margin-bottom: 20px;
  margin-top: 5px;
}

.attendance-timesheet-summary .header-detail {
  float: left;
  margin-left: 20px;
  margin-top: 10px;
}

.attendance-timesheet-summary .header-detail ul {
  list-style: none;
  padding-left: 0px !important;
}

.attendance-timesheet-summary .header-detail ul .detail-label {
  color: #A3A3A3;
  font-size: 15px;
  font-weight: bold;
}

.attendance-timesheet-summary .header-detail ul .detail-number {
  font-size: 20px;
  font-weight: bold;
  margin-top: 5px;
}

.attendance-item-timesheet-checkbox {
  float: left;
  width: 200px;
  margin-left: 15px;
  margin-top: 5px;
}

.attendance-timesheet-legend {
  float: right;
  margin-right: 30px;
  margin-top: 15px;
}

.attendance-timesheet-legend .fa-magic {
  margin-right: 10px;
  color: rgba(3, 194, 114, 1);
}

@media (max-width: 1500px) {
  .attendance-employee-detail .photo-edit {
    height: 115px !important;
    width: 115px !important;
  }

  .attendance-timesheet-summary .header-badge {
    height: 55px !important;
    width: 55px !important;
    padding-left: 15px !important;
    padding-top: 13px !important;
    font-size: 28px !important;
  }

  .attendance-timesheet-summary .header-badge-container {
    margin-left: 25px;
  }

  .attendance-timesheet-summary .header-detail {
    margin-left: 10px;
    margin-top: 5px;
  }

  .attendance-timesheet-summary .header-detail ul .detail-label {
    font-size: 10px !important;
  }

  .attendance-timesheet-summary .header-detail ul .detail-number {
    font-size: 14px !important;
  }
}

.table .weekly-ot-column {
  border-left: 1px solid rgba(227, 235, 243, 1) !important;
}

.table .weekly-deduct-column {
  border-left: 1px solid rgba(227, 235, 243, 1) !important;
  border-right: 1px solid rgba(227, 235, 243, 1) !important;
}

.table .row-weekly > td,
.table .row-last-week > td {
  border-top: 1px solid black !important;
  border-bottom: 1px solid black !important;
}

.table .row-half-day-warning {
  height: 55px;
  width: 650px;
  background: #FEF3E5;
  border: 1px solid #FB8C00;
  text-align: left;
  padding: 10px 15px;
  border-radius: 5px;
  margin-left: auto;
  margin-right: auto;
}

.table .row-half-day-warning span {
  color: #FB8C00;
}

.att_item_sub_total td {
  padding: 0px 15px;
  background-color: #fff !important;
}

.table > tbody > tr > td .table-tooltip {
  width: 280px;
  background-color: #4B7CBF;
  text-align: left;
  padding: 10px 15px 10px 15px;
  position: absolute;
  z-index: 1;
  margin-top: 15px;
  color: white;
  box-shadow: 0 3px 12px #AEAEAE;
  left: 50%;
  margin-left: -140px;
}

.table > tbody > tr > td .table-tooltip:after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 0;
  height: 0;
  border-bottom: 8px solid #4B7CBF;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}

.table > tbody > tr > td .fa-question-circle {
  color: #4B7CBF;
  font-size: 15px;
  margin-right: 5px;
}

/* ========================================================================
* finalize-timesheet
* ======================================================================== */

.att-item-group-remove-user-container {
  top: 105px;
  left: -25px;
  float: left;
  margin-top: 60px;
}

.att-item-group-add-user-btn button {
  height: 30px;
  width: 50px;
  background-color: #4B7CBF;
  font-size: 29px;
  color: white;
  padding-left: 15px;
  cursor: pointer;
  border-radius: 2px;
  z-index: 99;
  margin-bottom: 12px;
  padding-top: 0px;
  padding-bottom: 31px;
}

.att-item-group-remove-user-btn button {
  height: 30px;
  width: 50px;
  background-color: #4B7CBF;
  font-size: 29px;
  color: white;
  padding-left: 12px;
  cursor: pointer;
  border-radius: 2px;
  z-index: 99;
  padding-top: 0px;
  padding-bottom: 31px;
}

.att-item-group-add-user-btn button:hover,
.att-item-group-remove-user-btn button:hover {
  font-size: 29px;
  color: white;
}

.table-tooltip-wrapper-new {
  position: relative;
}

.table-tooltip-wrapper-new .table-tooltip-new {
  visibility: hidden;
  position: absolute;
  bottom: calc(100% + 15px);
  background: white;
  box-shadow: 0 0.5px 2px 0px rgba(0,0,0,0.5) !important;
  border-radius: 5px;
  padding: 10px 15px;
  width: 240px;
  z-index: 9999;
}

.table-tooltip-wrapper-new .table-tooltip-left-align {
  left: 0%;
  margin-left: -115px;
}

.table-tooltip-wrapper-new .table-tooltip-center-align {
  left: 50%;
  margin-left: -120px;
}

.table-tooltip-wrapper-new .table-tooltip-new:after,
.table-tooltip-wrapper-new .table-tooltip-new:before {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.table-tooltip-wrapper-new .table-tooltip-new:after {
  border-color: rgba(136, 183, 213, 0);
  border-top-color: white;
  border-width: 8px;
  margin-left: -8px;
}

.table-tooltip-wrapper-new .table-tooltip-new:before {
  border-color: rgba(194, 225, 245, 0);
  border-top-color: rgba(93, 93, 93, 0.1);
  border-width: 10px;
  margin-left: -10px;
}

.table-tooltip-wrapper-new .table-tooltip-icon {
  padding: 7px 0px 0px 12px;
  font-size: 14px;
  border-radius: 50%;
  margin-right: 10px;
  display: inline-block;
  vertical-align: top;
  height: 30px;
  width: 30px;
  margin-top: 4px;
}

.table-tooltip-wrapper-new .table-tooltip-icon-leave-ph {
  color: #FE227C;
  background-color: #FFEAF3;
}

.table-tooltip-wrapper-new .table-tooltip-header-text {
  margin-top: 5px;
  display: inline-block;
  width: 160px;
  word-break: break-word;
  white-space: normal;
}

.table-tooltip-wrapper-new .table-tooltip-close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  font-size: 14px;
}

.table-tooltip-wrapper-new .table-tooltip-close i {
  color: #999;
}

.table-tooltip-wrapper-new .table-tooltip-close i:hover {
  color: #333;
}

.table-tooltip-wrapper-new .table-tooltip-header,
.table-tooltip-wrapper-new .table-tooltip-content {
  white-space: nowrap;
  min-height: 40px;
}

.table-tooltip-wrapper-new .table-tooltip-content > div {
  border: 1px solid #EBF4FF;
  background: #F7FBFF;
  margin: 5px 0px;
  min-height: 50px;
  padding: 15px 15px;
}

.table-tooltip-wrapper-new .table-tooltip-footer {
  min-height: 20px;
}

.table > tbody > tr > .weekly-paid-work-column {
  border-left: 1px solid rgba(227, 235, 243, 1) !important;
}

/* ========================================================================
* att-item-group-nav NEW
* ======================================================================== */

.table > tbody > tr > td.td-group-col {
  font-size: 14px;
  cursor: pointer;
  color: #0380FF;
}

.table > tbody > tr > td.td-group-col > .item-group-text {
  color: rgba(85, 79, 70, 0.5);
}

.table-sample > tbody > tr > td,
.table-sample > tbody > tr > td {
  padding-right: 25px;
  padding-top: 2px;
  background-color: white;
}

.table-sample > tbody > tr > th {
  padding-right: 15px;
}

/* ========================================================================
* att-autoack modules
* ======================================================================== */

.autoack-autofill-container {
  width: 660px;
}

.users-radio-btn-container {
  width: 500px;
  margin-top: 20px;
  margin-left: 20px;
}

.users-selection-container {
  width: 750px;
}

.autoack-new-condition {
  cursor: pointer;
  color: rgba(0, 122, 255, 1);
  margin-top: 15px;
  margin-left: 5px;
}

.autoack-new-condition i {
  font-size: 12px;
  margin-right: 10px;
}

.autoack-new-condition span {
  vertical-align: top;
  font-weight: bold;
}

.autoack-new-condition span:hover {
  text-decoration: underline;
}

.autoack-condition {
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
  width: 145px;
}

.autoack-condition-action {
  display: inline-block;
  vertical-align: top;
  width: 50px;
  margin-right: 5px;
  font-size: 18px;
}

.autoack-condition-action .fa-plus-circle {
  cursor: pointer;
  color: #51B963;
}

.autoack-condition-action .fa-minus-circle {
  cursor: pointer;
  color: red;
}

.autoack-condition-action .btn
.autoack-condition-action .fas {
  font-weight: 500 !important;
}

.autoack-condition-msg {
  display: inline-block;
  vertical-align: top;
  width: 15px;
  padding-top: 7px;
}

.autoack-condition-comparison-type {
  width: 110px;
}

.autoack-condition-unit {
  width: 130px;
}

.autoack-condition-is-schedule {
  width: 155px;
}

.autoack-condition-value-time {
  width: 100px;
}

.autoack-autofill-label {
  vertical-align: top;
  margin-top: 5px;
}

.autoack-autofill-timepicker {
  display: inline-block;
  width: 100px;
  margin-left: 10px;
  margin-right: 10px;
}

.autoack-autofill-padding {
  padding-left: 30px;
  padding-right: 30px;
}

.autoack-autofill-grouping {
  margin: 0px -30px !important;
}

.autoack-autofill-grouping .fa-exclamation-circle {
  color: rgba(0, 112, 255, 1);
  font-size: 16px;
}

.autoack-condition-delete {
  color: rgba(248, 15, 75, 1) !important;
  height: 34px !important;
}

.autoack-condition-delete i {
  margin-right: 5px;
}

.autoack-condition-header {
  color: #4a4d52c2 !important;
}

.autoack-condition-subheader {
  margin-left: 6px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.autoack-autofill-both {
  color: rgba(72, 125, 182, 1);
}

.autoack-text-separator {
  color: #B3B0AC;
  margin-top: 5px;
  margin-bottom: 20px;
  font-size: 14px;
}

.autoack-custom-fields-conditions {
  margin-bottom: 20px;
  white-space: nowrap;
}

.autoack-custom-fields-conditions label {
  font-weight: 500;
}

.autoack-custom-fields-input {
  display: inline-block;
  width: 55px;
  margin-left: 5px;
  margin-right: 5px;
}

.autoack-sub-category-m40 {
  margin-bottom: 40px !important;
}

.autoack-d-inline-block {
  display: inline-block;
}

.autoack-group-setup-pad {
  padding: 0px 20px;
}

.autoack-group-setup-advanced-container {
  max-width: 975px;
  margin-left: 30px;
  margin-right: 30px;
}

.autoack-group-setup-advanced-table {
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.company-attendance-period-label {
  display: inline-block;
  vertical-align: top;
  margin-right: 20px;
  padding-top: 7px;
}

.company-attendance-terminated-user {
  width: 515px;
}

.company-attendance-date {
  display: inline-block;
}

.company-attendance-date-disabled {
  pointer-events: none;
}

/* ========================================================================
* attendance-overtime-requisition-detail
* ======================================================================== */

.attendance-overtime-requisition-detail .container {
  width: 550px !important;
  padding: 0px !important;
  margin: 0px;
}

.modal-xlg .attendance-overtime-requisition-detail .container {
  width: 100% !important;
}

.attendance-overtime-requisition-detail .container > div {
  border: 1px #dedede solid;
  padding: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 5px;
}

.attendance-overtime-requisition-detail .container .no-mt {
  margin-top: 0px !important;
}

.attendance-overtime-requisition-detail.attendance-overtime-requisition-request-detail .container > div {
  margin-top: 0px !important;
}

/* ========================================================================
* attendance-user-summary
* ======================================================================== */

.attendance-user-summary .page-navigate-wrapper .page-navigate-sidebar {
  min-width: 300px !important;
  max-width: 300px !important;
  margin-left: -30px;
  margin-top: -40px;
  position: fixed;
  z-index: 9999;
}

.attendance-user-summary .page-navigate-wrapper .navigation-collapse-button {
  left: 298px;
  height: 125px;
  color: #3d61ff;
  width: 35px;
  z-index: 999999;
}

.attendance-user-summary .page-navigate-wrapper .navigation-collapse-button .button-title {
  -webkit-transform: rotate(90deg);
  -webkit-transform-origin: left top;
  -moz-transform: rotate(90deg);
  -moz-transform-origin: left top;
  -ms-transform: rotate(90deg);
  -ms-transform-origin: left top;
  -o-transform: rotate(90deg);
  -o-transform-origin: left top;
  transform: rotate(90deg);
  transform-origin: left top;
  position: absolute;
  top: 25px;
  left: 25px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
}

.attendance-user-summary .page-navigate-wrapper .page-navigate-scrollable-menu {
  height: calc(100vh - 265px) !important;
}

.attendance-user-summary .page-navigate-wrapper .page-navigate-main {
  background: white;
  border-right: #ededed 1px solid;
  padding: 20px;
  display: none;
}

.attendance-user-summary .btn-overtime-period {
  display: inline-block;
  border: 1px solid #3d61ff;
  padding: 4px 12px;
  border-radius: 2px;
  color: #3d61ff;
  float: right;
  margin: 10px 25px 10px 0px;
  cursor: pointer;
}

.attendance-user-summary .btn-overtime-period .icon {
  font-size: 15px;
  margin-right: 5px;
}

.attendance-user-summary .btn-edit-mode {
  display: inline-block;
  border: 1px solid #3d61ff;
  padding: 4px 12px;
  border-radius: 2px;
  color: #3d61ff;
  float: right;
  margin: 10px 15px 10px 0px;
  cursor: pointer;
}

.attendance-user-summary .btn-edit-mode .icon {
  font-size: 15px;
  margin-right: 5px;
}

.edit-attendance-user-summary-table thead th.timepicker-header {
  width: 370px !important;
  min-width: 370px !important;
}

.edit-attendance-user-summary-table thead th.timepicker-header > div {
  width: 90px;
  min-width: 90px;
  display: inline-block;
}

.edit-attendance-user-summary-table tbody tr.row-last-week > td {
  border-top: 1px solid black !important;
  border-bottom: 1px solid black !important;
}

.edit-attendance-user-summary-table tbody td bootstrap-datetimepicker td {
  background-color: white;
}

.edit-attendance-user-summary-table tbody td .timepicker-container {
  margin-top: 5px;
}

.edit-attendance-user-summary-table tbody td .timepicker-container div {
  display: inline-block;
}

.edit-attendance-user-summary-table tbody td .timepicker-container > div:not(:last-child) {
  margin-bottom: 10px;
}

.edit-attendance-user-summary-table tbody td .timepicker-container .timepicker-action-container {
  vertical-align: top;
  padding-top: 7px;
}

.edit-attendance-user-summary-table tbody td .timepicker-container .timepicker-action-container div {
  display: inline-block;
  cursor: pointer;
  margin-right: 10px;
}

.edit-attendance-user-summary-table tbody td .timepicker-container .timepicker-action-container div .fa-plus-circle {
  color: #3d61ff;
  font-size: 20px;
}

.edit-attendance-user-summary-table tbody td .timepicker-container .timepicker-action-container div .fa-times {
  color: #E9573F;
  font-size: 20px;
}

.edit-attendance-user-summary-table tbody td .timepicker-action-minutes-container {
  display: inline-block;
}

.edit-attendance-user-summary-table tbody td bootstrap-datetimepicker .edit-timepicker {
  width: 85px !important;
}

.edit-attendance-user-summary-table tbody td span.date-display {
  font-size: 9px;
  vertical-align: top;
  font-weight: bold;
  margin-right: 3px;
}

.edit-attendance-user-summary-table tbody td .timepicker-container div.datetimepicker {
  display: inline-block;
  margin-right: 5px;
}

.edit-attendance-user-summary-table tbody td .timepicker-container div.diff-minutes {
  display: inline-block;
  vertical-align: top;
}

.edit-attendance-user-summary-table tbody td .timepicker-container div.diff-minutes .container-minutes {
  width: 85px;
}

.edit-attendance-user-summary-table tbody td .edit-review-errors {
  color: #f94d4d;
  list-style-type: disc;
  margin-top: 10px;
  margin-left: 20px;
}

.edit-attendance-user-summary-table tbody td .remark-container {
  position: relative;
}

.edit-attendance-user-summary-table tbody td .remark-container .toggle-remark-edit {
  font-size: 20px;
  cursor: pointer;
  color: #A3A3A3;
}

.edit-attendance-user-summary-table tbody td .remark-container .toggle-remark-edit.filled {
  color: #3d61ff !important;
}

.edit-attendance-user-summary-table tbody td .remark-container .toggle-remark-edit-message {
  z-index: 9999;
  border: 1px solid #efefef;
  position: absolute;
  padding: 10px 15px 15px 15px;
  background: white;
  width: 200px;
  right: 40px;
}

.edit-attendance-user-summary-table tbody td .remark-container .toggle-remark-edit-message .textarea-remark {
  overflow-y: hidden;
}

.edit-attendance-user-summary-table tbody td .remark-container .toggle-remark-edit-message .btn-close-remark {
  color: #3d61ff;
  cursor: pointer;
}
.work-permit-thumbnail {
  width: 300px;
}

.work-permit-thumbnail .photo-edit {
  height: 200px;
  width: 300px;
  border: 1px solid #cccccc;
  border-radius: 0;
  background-color: #ffffff;
  overflow: hidden;
}

.mandatory {
  font-size: 9px;
  position: relative;
  top: 0;
  right: 6px;
}

/* ========================================================================
 * Profile page
 * ======================================================================== */

#employee-detail-center .panel-body {
  padding: 0px 30px;
  margin: 0;
}

#employee-detail-left > div,
#employee-detail-center > div {
  background-color: #ffffff;
  box-shadow: 0 0.5px 2px 0px rgba(0,0,0,0.1) !important;
  min-height: 420px;
}

#employee-detail-center.limit-width .col-md-12 {
  max-width: 708px;
}

.br-md {
  border-right: none;
}

#employee-detail-left .emp-summary {
  padding-bottom: 15px;
}

.emp-summary .exception-icon-list .item {
  padding: 6px 5px;
  width: 26px;
  height: 25px;
  margin-right: 5px;
}

.emp-summary .emp-summary-photo {
  padding: 20px 0 0 0;
}

.emp-summary .emp-summary-photo .emp-summary-name {
  margin-top: 10px;
}

.emp-summary ul {
  list-style: none;
  padding: 4px 0px 0px 0px;
  font-size: 15px;
}

.emp-summary ul.emp-summary-details > li > i.fas,
.emp-summary ul.emp-summary-details > li > i.far {
  margin-right: 5px;
  float: left;
  position: absolute;
  left: -12px;
}

.emp-summary .emp-summary-details {
  text-align: center;
  position: relative;
}

.emp-summary .emp-summary-details .emp-summary-detail-icon {
  display: inline-block;
  width: 15px;
  margin-right: 10px;
  text-align: center;
}

.emp-summary .emp-summary-details .emp-summary-detail-span {
  display: inline-block;
  width: 110px;
  vertical-align: top;
  text-align: left;
}

.emp-summary .emp-summary-detail-password {
  text-align: center;
  font-weight: bold;
  margin-bottom: 15px;
}

.emp-summary .emp-summary-detail-password button {
  width: 175px;
}

.emp-summary ul.emp-summary-details > li {
  width: 200px;
  text-align: center;
}

.emp-summary ul li i.fa.fa-map-marker {
  width: 12px;
  margin-right: 7px;
  margin-left: 3px;
}

.emp-summary ul.listing-full {
  list-style: none;
  position: relative;
}

.emp-summary ul.listing-ellipsis {
  list-style: none;
  top: -10px;
  position: relative;
}

.emp-summary ul.listing-ellipsis li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  top: 5px;
}

/* ========================================================================
 * Employee Attendance
 * ======================================================================== */

.group-new {
  /*background-color: #E4E7EF;*/
  /*padding: 5px;*/
}

.group-new .group-new-content {
  margin: 10px 15px 0 15px;
}

.group-new-box {
  border: 1px solid #A5A5A5;
  padding: 20px 10px 0 10px;
  margin: 5px;
}

.group-sub-new {
  background-color: #F4F3F8;
  margin-top: 10px;
  margin-left: 5px;
}

h3.header-title,
h4.header-title,
h5.header-title {
  border-bottom: 1px solid rgba(55, 55, 55, 0.26);
  color: rgb(94, 94, 94);
  font-weight: 500;
  padding-bottom: 10px;
  font-size: 17px;
}

/* ========================================================================
* Employee work schedule
* ======================================================================== */



table.schedule {
  width: auto !important;
}

table.schedule tr th,
table.schedule tr td {
  text-align: center;
  vertical-align: middle;
}

table.schedule tr th {
  font-size: 15px;
  font-weight: 500;
}

table.schedule tr td {
  height: 74px;
}

table.schedule > tbody > tr > td.left-cell {
  font-size: 15px;
  font-weight: 500;
  width: 165px;
}

table.schedule > tbody > tr > th.left-cell {
  border-right: 1px solid rgba(196, 207, 219, 0.31);
}

table.schedule .day-type-cell {
  width: 50px;
}

table.schedule .shift-cell {
  width: 204px;
}

table.schedule .note-cell {
  width: 120px;
}

table.schedule .btn-remove {
  position: relative;
}

table.schedule .item .fa-times {
  background-color: transparent;
  color: #5d5d5d;
  line-height: 23px;
  height: 24px;
  width: 24px;
  min-width: 24px;
  position: absolute;
  padding: 0 0 0 2px;
  right: 12px;
  top: -29px;
  border-radius: 2px;
  font-size: 19px;
  box-shadow: none;
}

.table .row-half-day-warning {
  height: 55px;
  width: 650px;
  background: #FEF3E5;
  border: 1px solid #FB8C00;
  text-align: left;
  padding: 10px 15px;
  border-radius: 5px;
  margin-left: auto;
  margin-right: auto;
}

/* ========================================================================
* Employee Payroll
* ======================================================================== */

.warning-message-content {
  background: #FEF3E5;
  border: 1px solid #FB8C00;
  text-align: left;
  padding: 10px 15px;
  border-radius: 5px;
  margin-left: auto;
  margin-right: auto;
}

.warning-message-content span {
  color: #FB8C00;
}

/* ========================================================================
* Employee Leave
* ======================================================================== */

.assign-child-changes-detected {
  float: right;
  color: red;
  margin-right: 15px;
  margin-top: 4px;
  font-weight: 500;
}

/* ========================================================================
* employeeOther.html
* ======================================================================== */

.employee-other .custom-clickable-link {
  float: right;
  margin-top: -25px;
  cursor: pointer;
}

.employee-other .btn-save-container {
  margin-top: -5px;
}

.employee-other .btn-plus .icon {
  height: 30px !important;
  width: 30px !important;
  padding-top: 5px !important;
  font-size: 33px;
}

.employee-other .btn-plus .text {
  padding-left: 5px;
  vertical-align: super;
}

.employee-tab-divider {
  border-top: 1px solid rgba(227, 235, 243, 1);
  margin-top: 30px;
  margin-bottom: 20px;
}
div.ir8a-body-wrapper {
  background-color: #f5f5f5;
  padding: 20px;
}

.ir8a h3.bold {
  font-weight: bold;
}

.ir8a table.ir8a-table {
  border-collapse: collapse;
}

.ir8a table.ir8a-table,
.ir8a td.ir8a-table,
.ir8a th.ir8a-table {
  border: 1px solid black;
  padding-bottom: 10px;
}

.ir8a .padding-bottom {
  padding-bottom: 10px;
}

.ir8a .view-only-right {
  text-align: right;
  padding-right: 22px;
}

.ir8a .padding-top {
  padding-top: 10px;
}

.ir8a .border-left {
  border-left: 1px solid;
}

.ir8a .border-bottom {
  border-bottom: 1px solid;
}

.ir8a .border-right {
  border-right: 1px solid;
}

.ir8a .border-bottom-dashed {
  border-bottom: 1px dashed;
}

.ir8a .margin-right {
  margin-right: 10px;
}

.ir8a .margin-left {
  margin-left: 10px;
}

.ir8a input[valid-number],
.ir8a input[integer-only] {
  text-align: right;
}

.ir8a h3 {
  position: relative;
  text-align: center;
}

.ir8a .header_year {
  position: absolute;
  left: 0;
  font-size: 20px;
}

.ir8a .header_form_title {
  margin: auto;
  width: 300px;
  font-size: 16px;
}

.ir8a .header_mandatory {
  position: absolute;
  right: 0;
  top: 15px;
}

.ir8a,
.ir8a table {
  font-size: 8;
}

.ir8a .top_header {
  font-size: 9;
}

.ir8a .myIframe iframe {
  width: 100%;
  height: 1550px;
  border: none;
  min-width: 850px;
}

.no-wrap {
  white-space: nowrap;
  padding: 8px 8px !important;
}

.checkbox-no-wrap {
  padding: 0px 8px !important;
}

.no-wrap-content {
  max-width: 250px;
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 8px 8px !important;
}

.checkbox-no-wrap-content {
  padding: 0px 8px !important;
  overflow-x: hidden;
}

.no-width {
  width: 0px;
}

.right-min-width {
  float: right;
  width: 160px;
}

.sub-input-min-width {
  width: 160px;
}

@media (min-width: 1300px) {
  .item-d-middle {
    width: 948px;
  }
}

@media (min-width: 1900px) {
  .item-d-middle {
    width: 1500px;
  }
}
/* ========================================================================
 * Payslip
 * ======================================================================== */

div.col-highlight,
#payslip .panel-primary div.panel-heading.col-highlight {
  background-color: rgb(209,208,206);
  padding: 10px 10px 10px 25px;
  min-height: 50px;
  margin-top: 2px;
}

#payslip div.panel-body {
  margin: 0;
}

#payslip div.panel-body span:not(.input-group-addon):not(.glyphicon) {
  min-width: 20px;
  display: inline-block;
  line-height: 30px;
}

#payslip div.panel-body span a i.fa-pencil,
#payslip div.panel-body span a i.fa-floppy-o {
  padding: 0 5px;
}

#payslip ol {
  /* Overwrite parent ordered list css */
  list-style: decimal;
  padding: 0px 0px 0px 40px;
  margin-bottom: 0px;
  font-size: 15px;
}

#payslip ol li a:after {
  content: none;
}

div.col-highlight .title {
  font-weight: bold;
  line-height: 30px;
  font-size: 16px;
}

#payslip .panel {
  margin-bottom: 0;
}

#payslip .panel .panel-heading > .btn-Action {
  line-height: 16px;
  padding: 6px 8px;
  width: 30px;
  font-size: 16px;
  margin-top: -4px;
}

#payslip .panel .panel-heading > .btn-Action > i {
  padding: 0;
  font-size: 9px;
}

#payslip .panel .panel-body > .btn-Action {
  line-height: 1 !important;
  padding: 6px 8px;
  margin-left: 10px;
}

#payslip .btn-unprocessed {
  margin-top: -27px !important;
}

#payslip div.col-highlight input-picture > label {
  display: none;
}

#payslip .btn-delete {
  line-height: 30px;
  width: 20px;
  text-align: center;
}

#payslip span > .form-control[type=text] {
  width: 130px;
  display: inline-block;
}

#payslip div.input-group.date {
  display: block;
}

#payslip label {
  margin-bottom: 0;
}

#payslip-total-overtime-pay span > .form-control[type=text] {
  /*number input*/
  width: 50px;
  text-align: right;
}

#payslip span > .form-control[type=text] {
  width: 125px;
  display: inline-block;
}

/* ======================================================================== */

.payslip-company,
.payslip-employee {
  padding-top: 20px;
}

div.photo-right-container {
  padding: 15px 0px;
}

.sub-total {
  font-weight: bold;
}

#payslip .panel .panel-body,
#payslip .panel .panel-heading {
  padding: 0;
  background-color: #f5f5f5;
}

#payslip .panel .panel-body .form-group {
  padding: 10px 10px;
  margin: 0;
}

#payslip .panel .panel-body.row-total {
  padding: 10px;
  border-top: 1px solid #ADADAD;
  border-bottom: 3px double #ADADAD;
}

/* ========================================================================
 * Custom CSS for directive columns
 * ======================================================================== */

.col-no-padding-left {
  padding-left: 0px;
}

.col-no-padding-right {
  padding-right: 0px;
}

.col-cust-12-less-2xnumber-min,
.col-cust-number,
.col-cust-min-right {
  float: left;
  padding-left: 10px;
  padding-right: 10px;
}

.col-cust-12-less-2xnumber-min {
  width: calc(100% - 385px);
}

.col-cust-number {
  min-width: 170px;
  text-align: right;
}

.col-cust-number:first-child {
  text-align: right;
}

.col-cust-min-right {
  width: 40px;
  text-align: right;
}

.total-border {
  border-top: 1px solid #000;
  border-bottom: 2px solid #000;
  padding: 2px 0;
}

.total-border-background {
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
  padding: 2px 0;
  background-color: #AEAEAE;
}

.payslip-container {
  display: flex;
}

.breadcrumb-no-background-color {
  background-color: transparent !important;
}
/* ========================================================================
 * Timesheet review
 * ======================================================================== */

.panel-box {
  font-size: 15px;
  margin: 5px 5px 20px 5px;
}

.panel-box .panel-icon {
  font-size: 30px;
  padding: 10px 1px;
}

.table > tbody > tr.row-cross > td {
  color: #AEAEB8;
}

@media screen and (max-width: 1200px) and (min-width: 992px) {
  .panel-box .panel-icon {
    font-size: 20px;
    padding: 10px 0;
  }

  .panel-box .panel-label {
    font-size: 11px;
  }
}

.panel-box .panel-label {
  /*padding: 0 10px;*/
}

.panel-box .panel-icon-label {
  display: inline-block;
  vertical-align: text-bottom;
}

.panel-box > .row > div {
  background-color: #4B7CBF;
  color: #ffffff;
  height: 80px;
  border-radius: 3px;
  border: 1px solid #ffffff;
}

.panel-box >.row > div.panel-center {
  display: table;
}

.panel-box >.row > div.panel-invert {
  border: 1px solid #4B7CBF;
  background-color: #ffffff;
  color: #4B7CBF;
}

.panel-box >.row > div.panel-invert .panel-icon {
  background-color: #4B7CBF;
  color: #ffffff;
}

.panel-box >.row > div.pending {
  background-color: #e98d25;
}

.panel-box >.row > div.error {
  background-color: #eb2027;
}

.align-middle {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.day-type-listing {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* customize */

.panel-box >.row > div.panel-absent {
  background-color: #E9EAED;
  color: #4B7CBF;
}

.panel-absent .toggle-container {
  display: table-cell;
  vertical-align: middle;
}

.panel-absent .row .col-md-9,
.panel-absent .row .col-md-3 {
  width: auto;
}

.panel-sub {
  margin: 0px 5px;
}

.att-review-content .panel .panel-heading {
  background-color: #E9EAED;
  color: #4B7CBF;
  border-bottom: 0px;
  padding: 10px 20px;
}

.att-review-content .panel-header-template {
  min-height: 50px;
}

.att-review-content .panel-header-template .attendance-type-extra {
  color: #5E5E5E;
  position: relative;
  left: 100px;
  top: 5px;
  width: 85%;
}

.att-review-content .panel-header-template .attendance-label {
  margin: 0 20px 0 0;
  display: block;
  float: left;
  width: 220px;
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px;
}

.att-review-content .panel-header-template .attendance-label i {
  margin-right: 10px;
}

.att-review-content .panel-header-template .overtime-label {
  margin: 0 20px 0 0;
  display: block;
  float: left;
  width: 110px;
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px;
}

.att-review-content .panel-header-template .attendance-type-extra input {
  font-size: 10px !important;
  height: 23px;
  width: 80px;
  margin-left: -25px;
  margin-top: -1px;
}

.att-review-content .panel-header-template .attendance-value {
  margin-right: 20px;
  font-size: 11px;
  float: left;
}

.att-review-content .panel-header-template .attendance-type-label {
  font-weight: bold;
  font-size: 15px;
  margin-right: 30px;
  position: absolute;
  top: 15px;
  left: 20px;
}

.att-review-content .panel-header-template .total-hours {
  font-weight: bold;
  font-size: 15px;
  margin-right: 50px;
  position: absolute;
  top: 20px;
  right: 10px;
}

.att-review-content .panel-heading .btn-add {
  position: absolute;
  top: 15px;
  right: 10px;
  min-width: 35px;
  width: 35px;
}

.att-review-content .panel-heading .btn-request-overtime {
  text-align: right;
  margin-right: -10px;
  padding-top: 5px;
}

.att-review-list-autofill {
  color: rgba(3, 194, 114, 1);
}

.att-review-list-autofill .fas {
  margin-right: 5px;
}

.table-review > tbody > tr > td,
.table-review > tbody > tr > th,
.table-review > tfoot > tr > td,
.table-review > tfoot > tr > th,
.table-review > thead > tr > td,
.table-review > thead > tr > th {
  border: none !important;
  background-color: transparent !important;
}

.attendance-pair {
  overflow-x: overlay;
  white-space: nowrap;
  padding-bottom: 0px;
  padding-left: 5px;
}

.table-review .att-checkbox-group {
  display: inline-block;
  vertical-align: top;
}

.attendance-pair .custom-time {
  position: relative;
  padding: 15px;
  margin: -35px 5px 30px 5px;
  border: 1px solid rgba(198, 212, 230, 1);
  width: 580px;
  border-radius: 6px;
  background: rgba(242, 247, 253, 1);
}

.attendance-pair .custom-time input-select-object > div {
  margin-bottom: 0px !important;
}

.attendance-pair .custom-time .att-location-selector {
  float: left;
  width: 220px;
  margin-right: 10px;
}

.attendance-pair .custom-time .att-date-selector {
  float: left;
  width: 116px;
  margin-right: 10px;
}

.attendance-pair .custom-time .input-group.time {
  float: left;
  width: 76px;
  margin-right: 10px;
}

.attendance-pair .custom-time input,
.attendance-pair .custom-time select {
  border: 1px solid #4B7CBF;
}

.attendance-pair::-webkit-scrollbar {
  height: 12px;
}

.attendance-pair::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
  cursor: pointer;
}

.attendance-pair::-webkit-scrollbar-thumb:hover {
  background: #3d61ff;
}

.attendance-pair::-webkit-scrollbar-track {
  background: #f1f1f1;
}

ul.clocktime-container {
  list-style-type: none;
  padding: 0;
  margin: 43px 11px 20px 11px;
}

ul.clocktime-container > li {
  border-radius: 2px;
  border: 2px solid #e3e3e3;
  background-color: #ffffff;
  color: #4B7CBF;
  float: left;
  height: 212px;
  width: 150px;
  margin: -4px 5px 47px 5px;
  position: relative;
  border-radius: 10px;
}

ul.clocktime-container > li.selected {
  border: 2px solid #4B7CBF !important;
}

ul.clocktime-container > li:last-child {
  margin-right: 0;
}

ul.clocktime-container > li .clocktype {
  position: absolute;
  margin: 9px 56px;
  color: rgba(54, 58, 66, 1);
  font-size: 16px;
  z-index: 5;
}

ul.clocktime-container > li .clocktype.has-photo {
  color: #ffffff;
}

ul.clocktime-container > li .photo {
  position: relative;
  width: 146px;
  height: 208px;
  overflow: hidden;
  border-radius: 7px;
}

ul.clocktime-container > li .photo img {
  width: 116px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  min-height: 100%;
  min-width: 100%;
}

ul.clocktime-container > li div.photo-link {
  display: none;
  position: absolute;
  top: -5px;
  right: -10px;
  z-index: 3;
  display: none;
}

ul.clocktime-container .clocktime-slot:hover div.photo-link {
  display: block;
}

ul.clocktime-container > li div.photo-link > i.fa-picture-o {
  font-size: 12px;
}

ul.clocktime-container > li .bottom {
  background-color: rgba(255,255,255, 0.5);
  color: #4B7CBF;
  height: 58px;
  width: 146px;
  text-align: center;
  padding: 7px 8px 10px 8px;
  font-size: 10px;
  z-index: 3;
  position: absolute;
  top: 150px;
  text-shadow: 0px 0px 0px #000;
  left: 0px;
  border-radius: 0px 0px 7px 7px;
}

ul.clocktime-container > li .bottom .location {
  width: 130px;
  text-overflow: ellipsis;
  overflow: hidden;
}

ul.clocktime-container > li .arrow {
  width: 0px;
  height: 0px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #4B7CBF;
  position: absolute;
  top: 168px;
  left: 50px;
  display: none;
}

ul.clocktime-container > li div.round-icon-selected {
  display: none;
  position: absolute;
  top: -10px;
  left: -10px;
  z-index: 3;
}

ul.clocktime-container > li div.custom-icon {
  position: absolute;
  left: 49px;
  top: 60px;
  width: 50px;
  height: 50px;
}

ul.clocktime-container > li div.custom-icon > i.fa-pencil-alt {
  font-size: 19px;
  line-height: 49px;
  margin-left: 1px;
}

ul.clocktime-container > li div.custom-icon > i.fa-image {
  font-size: 19px;
  line-height: 49px;
  margin-left: 1px;
}

ul.clocktime-container > li div.round-icon-edit {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background-color: rgba(0, 112, 255, 1);
  color: #ffffff;
}

ul.clocktime-container > li.selected .bottom {
  background-color: rgba(0, 112, 255, 1);
  color: #ffffff;
  text-shadow: 1px 1px 10px #000;
}

ul.clocktime-container > li.selected div.round-icon-selected {
  display: block;
}

ul.clocktime-container > li.selected div.round-icon-edit {
  background-color: #ffffff;
  color: #4B7CBF;
}

ul.clocktime-container > li:hover {
  cursor: pointer;
}

ul.clocktime-container .clocktime-exception {
  position: absolute;
  top: -35px;
  width: 150px;
  padding: 1px 0px 1px 12px;
  background-color: #e6a716;
  color: white;
  border-radius: 3px;
  height: 28px;
  margin-left: -3px;
}

ul.clocktime-container .clocktime-exception > div {
  width: 33.33%;
  float: left;
}

ul.clocktime-container .clocktime-exception i {
  margin-left: 13px;
  margin-top: 5px;
  font-size: 15px;
}

ul.clocktime-container .clocktime-fingerprint {
  font-size: 65px;
  margin-left: 40px;
  margin-top: 55px;
}

/* ========================================================================
 * Timesheet review exception
 * ======================================================================== */

.success {
  background-color: #53a352;
}

.warning {
  background-color: #e6a716;
}

.error {
  background-color: #eb2027;
}

.modal.timesheet-exception .modal-dialog .modal-content {
  background-color: transparent;
  border: 1px solid transparent;
}

.timesheet-exception .title,
.timesheet-exception .footer {
  color: #ffffff;
  font-size: 25px;
  padding: 10px 0;
  clear: both;
}

.timesheet-exception .footer {
  margin-top: 20px;
  font-size: 18px;
}

.timesheet-exception {
  text-align: center;
}

.timesheet-exception .exception-container > div {
  width: 50%;
  margin: 0 auto;
  padding: 10px;
  float: left;
}

.timesheet-exception .exception-container > div.left {
  border-radius: 5px 0 0 5px;
  border-right: 1px solid rgb(185, 185, 185);
}

.timesheet-exception .exception-container > div.right {
  border-radius: 0 5px 5px 0;
}

.timesheet-exception .exception-container > div.success {
  background-color: #ddeddd;
}

.timesheet-exception .exception-container > div.warning {
  background-color: #faedd3;
}

.timesheet-exception .exception-container > div .photo {
  width: 170px;
  height: 200px;
  margin: 20px auto 10px;
  overflow: hidden;
  border-radius: 5px;
}

.timesheet-exception .exception-container > div .time {
  margin: 20px auto 10px;
  overflow: hidden;
  border-radius: 5px;
  font-size: 35px;
  line-height: 35px;
}

.timesheet-exception .exception-container .photo > div {
  width: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  height: 100%;
  background-color: white;
}

.timesheet-exception .exception-container > div.gps,
.timesheet-exception .exception-container > div.message {
  width: 100%;
}

.timesheet-exception .exception-container > div.gps .angular-google-map {
  border-radius: 5px;
  overflow: hidden;
}

.timesheet-exception .exception-container > div.gps-not-found,
.timesheet-exception .exception-container > div.error-message {
  border: 1px solid #ffffff;
  margin: 30px 0;
  border-radius: 5px;
  padding: 50px 30px 40px 30px;
  color: white;
  font-size: 20px;
}

.timesheet-exception .exception-container > div.gps-not-found i {
  color: white;
  font-size: 32px;
  position: absolute;
  top: 20px;
  left: 248px;
  background-image: url(../angularjs/assets/icons/GPS/Yellow/220x220.png);
  height: 100px;
  width: 100px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 68% auto;
}

.timesheet-exception .exception-container > div.error-message i {
  color: white;
  font-size: 32px;
  position: absolute;
  top: 20px;
  left: 248px;
  background-image: url(../angularjs/assets/icons/Warning/Circle/220x220.png);
  height: 100px;
  width: 100px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 68% auto;
}

.timesheet-exception .exception-container .description {
  color: #797979;
  text-align: center;
  font-size: 17px;
  padding: 10px;
  font-weight: 500;
}

.timesheet-exception .exception-container .icon {
  border-radius: 50%;
  height: 35px;
  width: 35px;
  padding: 8px;
  margin: 0px 10px;
  text-align: center;
  color: white;
  font-size: 18px;
  float: right;
}

.timesheet-exception-nagivation {
  padding: 0;
}

.timesheet-exception-nagivation li {
  display: inline-block;
  border-radius: 50%;
  height: 45px;
  width: 45px;
  padding: 10px;
  margin: 0px 10px;
  text-align: center;
  color: white;
  font-size: 25px;
}

.timesheet-exception-nagivation li:hover {
  cursor: pointer;
}

.timesheet-exception-nagivation li.selected:hover {
  cursor: default;
}

.timesheet-exception-nagivation li.selected {
  background-color: #a24300;
}

/* ========================================================================
 * Timesheet review cessation
 * ======================================================================== */

.row-cessation td {
  background-color: #d3d3d370 !important;
}

.row-cessation .fa-minus-circle {
  font-size: 20px;
}

/* ========================================================================
 * Timesheet calendar
 * ======================================================================== */

.timesheet-calendar {
  background-color: #ffffff;
  display: table;
  margin: auto;
}

.calendar-container,
.calendar-info {
  border: 2px solid #4B7CBF;
  padding: 0;
}

.calendar-info {
  border-left: none;
  border-radius: 0px 2px 2px 0px;
}

.calendar-container {
  border-radius: 2px 0px 0px 2px;
}

.calendar-table {
  width: 100%;
  height: 250px;
  margin: 12px 0;
}

.calendar-table thead th,
.calendar-table tbody td {
  text-align: center;
  width: 40px;
}

.calendar-table tbody td.left-cell {
  width: 50px;
}

.timesheet-year-month,
.timesheet-legend {
  height: 137px;
  width: 100%;
  padding: 10px;
}

.timesheet-year-month {
  background-color: #4B7CBF;
  color: #ffffff;
  font-size: 28px;
  min-width: 165px;
}

.timesheet-year-month .fa-calendar {
  font-size: 40px;
}

.timesheet-year-month .year {
  margin-top: 10px;
}

.timesheet-year-month .month {
  margin-top: 15px;
}

.timesheet-legend {
  /*border: 2px solid #4B7CBF;*/
}

.timesheet-calendar .round-icon,
.offset-container .round-icon {
  position: relative;
  left: 245px;
  display: block;
  margin: 0 auto;
  color: #4B7CBF;
  background-color: #ffffff;
  border: 2px solid #4B7CBF;
  line-height: 15px !important;
  top: 15px;
  z-index: 3;
  cursor: pointer;
  font-weight: bold;
}

.timesheet-calendar .cross-month {
  opacity: 0.5;
}

.timesheet-calendar .workday {
  background-color: #4B7CBF;
  color: white;
  margin: auto;
  width: 17px;
  border-radius: 2px;
}

.timesheet-calendar .holiday {
  background-color: #ffffff;
  color: #EF4344;
}

.timesheet-legend ul {
  list-style: none;
  padding: 0;
}

.timesheet-legend ul > li > i {
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 21px;
  margin: 5px 0;
}

.timesheet-legend ul > li > span {
  margin-left: 10px;
}

.timesheet-legend ul > li > i.fa-workday {
  color: #ffffff;
  background-color: #4B7CBF;
  border-radius: 2px;
}

.timesheet-legend ul > li > i.fa-leaveday {
  color: #ffffff;
  background-color: #EF4344;
  border-radius: 50%;
}

.timesheet-legend ul > li > i.fa-holiday {
  color: #EF4344;
}

.fa-holiday:before {
  content: "N";
}

.fa-workday:before {
  content: "N";
}

.fa-leaveday:before {
  content: "N";
}

/* offset popup */

/* blue table style */

.table-offset .table-offset-icon {
  height: 32px;
  width: 32px;
  border-radius: 50%;
  padding-top: 8px;
  padding-left: 11.3px;
  font-weight: bold;
  display: inline-block;
  margin-right: 10px;
}

.table-offset .table-offset-ph-name {
  color: #FE227C;
  margin-left: 10px;
}

.table-offset-enabled .table-offset-icon {
  background-color: #E5F1FF;
  color: #077AFF;
}

.table-offset-ph-leave .table-offset-icon {
  background-color: #FFEAF3;
  color: #FE227C;
}

.table-offset-disabled .table-offset-icon {
  background-color: #EAEBEC;
  color: #BDBDBE !important;
}

.table-offset-disabled b {
  color: #BDBDBE !important;
}

.table-offset .table-offset-checkbox {
  float: right;
  display: inline-block;
}

.offset-duration {
  margin: 20px;
  border: 1px solid #EBF4FF;
  padding: 0px 10px;
  background: #F7FBFF;
}

.offset-duration-disabled {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 100;
  background-color: #F9FAFB;
  opacity: 0.7;
  text-align: center;
  padding-top: 110px;
  font-size: 14px;
}

.offset-duration table td,
.offset-duration table th {
  background-color: transparent !important;
  border-top: 0px !important;
  border-bottom: 0px !important;
  padding: 5px 0 5px 15px !important;
}

.offset-duration table tr td:first-child {
  width: 130px;
}

.offset-comment-span {
  display: inline-block;
  vertical-align: top;
  margin-right: 20px;
}

.offset-comment {
  display: inline-block;
  width: 300px;
}

.offset-workday-type {
  padding-left: 45px;
  margin-top: 10px;
}

.offset-workday-type > label {
  margin-left: 50px;
}

.offset-workday-type > b {
  vertical-align: text-bottom;
}

.offset-workday-type > label > span {
  margin-left: 5px;
  vertical-align: text-bottom;
}

/** timesheet log **/

.attendance-log-table .cell-icon {
  float: left;
  margin: 5px 5px 0 10px;
}

.attendance-log-table .cell-icon .fa {
  width: 36px;
}

.attendance-log-table .cell-exception {
  line-height: 40px;
  font-size: 15px;
}

.timesheet-left .avatar-small div.photo-edit {
  margin-top: 15px;
}

.circle-wrapper.clickable {
  text-decoration: none;
}

.multi-list i {
  color: #3d61ff;
  font-size: 18px;
  margin-top: 7px;
  margin-left: 2px;
  cursor: pointer;
}

/* New attendance settings */

.multi-list-container .label-container {
  width: 100%;
  margin: 15px 0;
}

.multi-list-container .label-container .btn {
  float: right;
}

.multi-list-container .multi-list {
  list-style-type: none;
  padding: 0;
  clear: both;
}

.multi-list-container .col-index {
  float: left;
  width: 5%;
  margin-top: 5px;
  padding-top: 3px;
}

.multi-list-container .col-text,
.multi-list-container .col-left.col-text {
  margin-top: 5px;
  padding-top: 3px;
}

.multi-list-container .col-left,
.multi-list-container .col-right {
  float: left;
  padding: 0 5px;
}

.multi-list-container .col-left {
  width: 60%;
}

.multi-list-container .col-right {
  width: 30%;
}

.multi-list-container .multi-list li {
  margin-bottom: 5px;
  clear: both;
}

.multi-list-container .time-interval bootstrap-timepicker,
.multi-list-container .time-interval .time-header {
  width: 49%;
}

.multi-list-container .multi-list li.no-record-found {
  padding: 7px;
  background-color: #f3f8f9;
  border: 1px solid #4c7cbf;
}

/** Timesheet Note **/

.attendance-note {
  border: 1px solid #cccccc;
  background-color: #f2f7f9;
  color: #778891;
  border-radius: 2px;
}

.fa.attendance-note-remove {
  text-align: center;
  margin: 100% 0;
  font-size: 20px;
}

.attendance-note-category {
  background-color: #ffffff;
  height: 40px;
}

.attendance-note-category .att-note-attachment {
  color: #4B7CBF;
  cursor: pointer;
}

.attendance-note-category .att-note-attachment:hover {
  text-decoration: underline;
}

.attendance-note-view-attachment {
  height: 250px;
  overflow-y: scroll;
  width: 294px;
  overflow-x: hidden;
  text-align: center;
  margin-left: 50px;
}

.attendance-note-category div {
  padding: 10px;
  font-size: 12px;
  font-weight: bold;
}

.attendance-note-note {
  padding: 10px;
}

.attendance-note-note div {
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  margin: 0;
  padding: 10px;
}

.attendance-note-manager label {
  margin: 0;
}

.attendance-note-updated-at {
  float: right;
  margin-right: 15px;
}

.attendance-note-manager-container {
  margin: 0 10px 10px 10px;
}

.attendance-note-manager textarea {
  padding: 10px;
  /* background-color: #ffffff; */
  border-radius: 3px;
  border: 1px solid #e3e3e3;
  width: 100%;
}

.attendance-note-photo .photo-edit {
  height: 250px;
  width: 100%;
  border-radius: 0;
  background-color: #cccccc;
  overflow: hidden;
  border-width: 1px 0 1px 0;
  border-color: #cccccc;
}

.attendance-note-photo .photo-edit .no-photo {
  background-size: auto;
}

.attendance-note-container {
  padding: 10px;
}

.attendance-note-uploaded {
  height: 10px;
  margin: 5px 15px;
  text-align: right;
}

.attendance-note-custom-fields {
  padding: 10px;
}

#review-detail-center .panel-body {
  padding: 5px 30px 5px 30px;
  margin: 0;
}

#review-detail-left > div,
#review-detail-center > div {
  background-color: #ffffff;
  box-shadow: 0 0.5px 2px 0px rgba(0,0,0,0.1) !important;
  min-height: 420px;
}

.autofill ul.clocktime-container > li div.autofill-label {
  display: block;
}

ul.clocktime-container > li div.autofill-label {
  position: absolute;
  top: 122px;
  left: 33px;
  background: rgba(3, 194, 114, 1);
  color: white;
  border-radius: 10px;
  padding: 4px 18px;
  font-size: 10px;
  display: none;
}

ul.clocktime-container > li i.fa-magic {
  margin-right: 5px;
}

.timesheet-autofill,
.timesheet-autofill span {
  color: rgba(3, 194, 114, 1);
}

.timesheet-autofill i {
  color: rgba(3, 194, 114, 1);
  margin-right: 5px;
}

.timesheet-autofill:hover .timesheet-autofill-tooltip {
  display: block !important;
}

.timesheet-autofill-tooltip {
  position: absolute;
  margin-top: -35px;
  background: rgba(229, 248, 240, 1);
  color: rgba(14, 196, 120, 1);
  padding: 5px 10px;
  border-radius: 4px;
  width: 120px;
  display: none;
  z-index: 99999;
}

.review-list .input-minutes {
  width: 90px;
  float: right;
}

.review-list table tr:hover .input-minutes {
  color: rgb(99, 110, 123) !important;
}

.review-list .overtime-requisition {
  height: 50px;
  vertical-align: middle;
  padding-top: 8px;
}

.review-list tr:hover .popover-content {
  color: #636e7b !important;
}

.review-list .overtime-requisition i {
  vertical-align: middle;
  margin-right: 11px;
  margin-top: 8px;
  font-size: 15px;
  color: #3d61ff;
  float: right;
}
.indo-tax-logo {
  padding: 5px;
}

table.pph21-table {
  border-collapse: collapse;
  font-size: small;
}

table.pph21-table,
.pph21-table td,
.pph21-table th {
  border: 1px solid black;
  padding-top: 2px;
  padding-bottom: 3px;
  padding-left: 5px;
}

.header-left-width {
  width: 30%;
}

.header-middle-width {
  width: 40%;
}

.header-right-width {
  width: 30%;
}

.pemotong-label-width {
  width: 10%;
}

.pemotong-value-width {
  width: 85%;
}

.section-A-left-width {
  width: 12%;
}

.section-A-middle-width {
  width: 38%;
}

.section-A-right-width {
  width: 50%;
}

.section-B-subheader-left-width {
  width: 70%;
}

.section-B-subheader-right-width {
  width: 30%;
}

.section-B-index {
  width: 5%;
  text-align: center;
}

.section-B-label {
  width: 65%;
}

.section-B-value {
  width: 30%;
  text-align: right;
}

.section-C-left-width {
  width: 45%;
}

.section-C-middle-width {
  width: 35%;
}

.section-C-right-width {
  width: 20%;
}

.nomor-short-width {
  width: 15px;
}

.nomor-long-width {
  width: 60px;
}

.web-width-full {
  width: 100%;
}

.web-width-half {
  width: 50%;
}

.web-width-quarter {
  width: 25%;
}

.web-width-20 {
  width: 10%;
}

.web-width-10 {
  width: 10%;
}

.web-width-5 {
  width: 5%;
}

.web-font-size-10 {
  font-size: 10px;
}

.font-size-header {
  font-size: 15px;
}

.font-size-10 {
  font-size: 10px;
}

.font-size-12 {
  font-size: 12px;
}

.box-table {
  border: 1px solid #000;
}

.box-table td {
  border: none;
  padding: 10px;
}

.normal-table td {
  padding: 5px;
}

.no-border-table {
  border: none;
}

.no-border-table td {
  border: none;
}

.input-text {
  background-color: white !important;
  border-color: white !important;
  border: none;
  font-size: 14px !important;
  margin: 0px !important;
}

.input-chk {
  font-size: 11px;
}

.dotted-border input {
  border-bottom: 1px solid grey !important;
}

.input-sign {
  font-size: 80px;
  background-color: white;
}

.label-chk {
  width: 15px;
  height: 15px;
  font-size: 10px;
  text-align: center;
  vertical-align: text-bottom;
}

.sub-header-font-size {
  font-size: 15px;
}
@font-face {
  font-family: Apple-Chancery;
  src: url("../../custom_components/Apple-Chancery/Apple-Chancery.ttf");
}

/* small screen table scrolling */

@media screen and (max-width: 767px) {
  .table-responsive {
    width: auto;
    margin-bottom: 0;
    overflow-y: inherit;
    border: none;
  }
}

@media (max-width: 800px) {
  body.page-sidebar-left-show {
    overflow-x: inherit;
  }
}

@media (max-width: 768px) {
  #header .navbar-minimize-mobile {
    height: inherit;
  }
}

body.page-header-fixed #header .header-left {
  height: 53px;
  background: #5E5E5E;
}

body.page-header-fixed #header .header-left .change-domain {
  width: 220px;
  padding: 10px;
  position: fixed;
}

body.page-header-fixed #header .header-left .change-domain button {
  background: rgb(94, 94, 94) !important;
  border: 0px !important;
  font-weight: bold;
  color: white !important;
  box-shadow: none !important;
}

#toast-container.herd-toaster {
  top: 7px;
}

#toast-container.herd-toaster > .toast {
  width: 600px;
  padding: 7px 20px 7px 56px;
}

.navbar-nav .navbar-help > a {
  color: #777;
  font-size: 19px;
  padding-top: 18px;
  padding-bottom: 13px;
}

.media-object .avatar-thumbnail {
  width: 38px;
  height: 38px;
}

.media-object .avatar-thumbnail > div {
  border-radius: 50%;
}

/* Customize theme */

#page-content {
  height: 100%;
}

#page-content,
.body-content {
  background-color: #f9fbfd;
}

.body-content {
  padding: 0 20px 20px 20px;
}

.bg-white {
  background-color: #ffffff !important;
}

.bg-lightblue {
  background-color: #f9fbfd;
}

/*for body layout where it doesn't stretch to full screen*/

.partial {
  height: calc(100% - 39px);
  margin-top: -15px;
  padding-top: 15px;
}

.partial section {
  height: calc(100% + 15px);
  margin-top: -15px;
  padding-top: 15px;
}

.tooltip-round {
  display: inline-block;
  margin-left: 5px;
  cursor: pointer;
}

.tooltip-bottom {
  font-size: 9px;
  color: #999999;
  padding-top: 10px;
  padding-left: 10px;
  clear: both;
}

.wrapword {
  white-space: -moz-pre-wrap !important;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  white-space: pre-wrap;
  word-wrap: break-word;
  white-space: -webkit-pre-wrap;
  word-break: break-all;
  white-space: normal;
}

.table {
  font-size: 12px;
}

.table > thead > tr > th {
  /*border-width: 1px 1px 2px;*/
  /*font-weight: 600;*/
  background-color: #ffffff !important;
  border-color: #f3f3f4 !important;
  color: #636e7b;
  border-bottom-color: rgba(93, 93, 93, 0.03) !important;
  border-right-color: transparent !important;
  text-align: left;
  font-size: 12px !important;
  font-weight: 500;
  padding: 0 0 1px 5px;
  height: 51px;
  border: none;
}

.table > thead > tr > th:last-child,
.table > tbody > tr > td:last-child,
.table > tfoot > tr > td:last-child {
  padding-right: 10px;
}

.table.floatThead-table > thead > tr > th {
  border-bottom: 2px solid #f3f3f4 !important;
}

.table > tbody > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > th,
.table > tfoot > tr > td {
  padding: 10px 0 10px 5px;
  height: 60px;
  min-height: 60px;
  vertical-align: middle;
  background-color: #ffffff;
  border-top: none;
}

.table > thead > tr > th:first-child,
.table > thead > tr > td:first-child,
.table > tbody > tr > th:first-child,
.table > tbody > tr > td:first-child,
.table > tfoot > tr > th:first-child,
.table > tfoot > tr > td:first-child {
  padding-left: 10px;
}

.table > thead > tr > th .listing-type-ordering:hover {
  color: #3d61ff;
}

.table > thead > tr > th .listing-type-ordering > i {
  font-size: 13px;
  color: #3d61ff;
  margin-left: 3px;
  cursor: pointer;
}

.table tr > td.border-right {
  border-right: 1px solid rgba(227, 235, 243, 1) !important;
}

table > tbody > tr.clickable:hover > td,
table > tbody > tr.clickable.selected > td {
  background-color: #253e53 !important;
  color: #fff;
  cursor: pointer;
}

table > tbody > tr.clickable:hover > td > input-minutes {
  color: #333 !important;
}

table td > ul {
  display: inline-block;
  list-style-type: none;
  margin-bottom: 0px;
  vertical-align: middle;
  word-break: break-word;
  padding-left: 0px;
}

.table .table-multi-button .btn {
  background-color: transparent;
  border: 1px solid transparent;
  color: #4B7CBF;
  font-weight: bold;
  box-shadow: none !important;
  font-size: 15px;
  min-width: 30px;
  line-height: 25px;
}

.table-multi-button .btn {
  background-color: transparent !important;
  border: 1px solid transparent;
  color: #4B7CBF;
  font-weight: bold;
  box-shadow: none !important;
  font-size: 15px;
  min-width: 30px;
  line-height: 25px;
}

.clickable {
  cursor: pointer;
}

.clickable-link {
  color: #4B7CBF;
  cursor: pointer;
}

.clickable-link:hover {
  text-decoration: underline;
}

.new-ui5 .table > tbody > tr:nth-child(odd) > td {
  background-color: #FFFFFF;
  border: none;
  border-bottom: 1px solid rgba(227, 235, 243, 1);
}

.new-ui5 .table > tbody > tr:nth-child(even) > td {
  background-color: #FFFFFF;
  border: none;
  border-bottom: 1px solid rgba(227, 235, 243, 1);
}

.new-ui5 .table > tbody > tr:first-child > td {
  border-top: 1px solid rgba(0, 0, 0, 0.09);
  border-bottom: 1px solid rgba(227, 235, 243, 1);
}

.new-ui5 .table > tbody > tr:last-child > td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
  border-top: 1px solid rgba(227, 235, 243, 1);
}

.new-ui5 .table .col-actions {
  min-width: 80px;
  max-width: 80px;
  width: 80px;
  vertical-align: middle;
}

.new-ui5 .table .col-checkbox {
  text-align: right;
  min-width: 80px;
  max-width: 80px;
  width: 80px;
  padding: 0 10px 0 20px;
}

.new-ui5 .table .col-checkbox.col-checkbox-left {
  text-align: left;
  padding: 0 20px 0 10px;
}

.new-ui5 .table .col-checkbox.col-checkbox-sm {
  min-width: 65px;
  max-width: 65px;
  width: 65px;
}

.new-ui5 .table .col-checkbox.col-checkbox-lg {
  min-width: 125px;
  max-width: 125px;
  width: 125px;
}

.new-ui5 .table .col-w150 {
  min-width: 150px;
  max-width: 150px;
  width: 150px;
}

.new-ui5 .table .col-w180 {
  min-width: 180px;
  max-width: 180px;
  width: 180px;
}

.new-ui5 .box-container {
  background-color: #ffffff;
  box-shadow: rgba(0, 0, 0, 0.04) 0px 2px 4px 0px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0;
  /*padding-right: 10px;*/
}

.margin-0 {
  margin: 0px !important;
}

.ml-15 {
  margin-left: 15px;
}

.ml-20 {
  margin-left: 20px;
}

.ml-30 {
  margin-left: 30px;
}

.padding-0 {
  padding: 0px !important;
}

.pl-0 {
  padding-left: 0px !important;
}

.pl-15 {
  padding-left: 15px;
}

.pl-20 {
  padding-left: 20px !important;
}

.pl-25 {
  padding-left: 25px;
}

.pl-30 {
  padding-left: 30px !important;
}

.pr-15 {
  padding-right: 15px !important;
}

.pr-30 {
  padding-right: 30px !important;
}

.pb-10 {
  padding-bottom: 10px !important;
}

.pb-15 {
  padding-bottom: 15px !important;
}

.pb-20 {
  padding-bottom: 20px !important;
}

.pt-20 {
  padding-top: 20px !important;
}

.pb-200 {
  padding-bottom: 200px !important;
}

.mr-30 {
  margin-right: 30px !important;
}

.mr-50 {
  margin-right: 50px;
}

.p-0-30 {
  padding: 0px 30px;
}

.table tbody > tr > .col-checkbox > i.fa.fa-exclamation-circle {
  color: #E98D25;
  font-size: 20px;
  margin-right: 8px;
}

.table tbody > tr > .col-checkbox > i.fa.fa-check {
  color: #51B963;
  font-size: 20px;
  margin-right: 8px;
}

.table tbody > tr > .col-checkbox > i.fas.fa-check-double {
  color: #4B7CBF;
  font-size: 18px;
  margin-right: 8px;
}

.table tbody > tr > .col-checkbox > div.finalized-dirty > i.fas.fa-check-double {
  color: #4B7CBF;
  font-size: 18px;
  margin-right: 2px;
  margin-right: 8px;
}

.table tbody > tr > .col-checkbox > div.finalized-dirty > i.fa.fa-exclamation-circle {
  color: #eb2027;
  font-size: 20px;
  margin-left: 2px;
  margin-right: 8px;
}

.table tbody > tr > .col-checkbox > i.fas.fa-spinner {
  color: #007aff;
  font-size: 20px;
  margin-right: 8px;
}

.time-group {
  display: inline-flex;
}

.label-font-12 {
  font-size: 12px;
  font-weight: bold;
}

/* ========================================================================
* Custom CSS for table tr with orange border
* ======================================================================== */

.new-ui5 .table tbody > tr.bordered-warning {
  border: 2px solid #FB8C00;
}

.new-ui5 .table tbody > tr.bordered-warning.first-tr {
  border-bottom: none;
}

.new-ui5 .table tbody > tr.bordered-warning.second-tr {
  border-top: none;
}

/* ========================================================================
* Custom CSS for employee listing
* ======================================================================== */

div.list-picture-container {
  display: inline-block;
  width: 40px;
  height: 40px;
  overflow: hidden;
  position: relative;
  vertical-align: middle;
}

div.list-picture-container,
div.list-picture-container .avatar-thumbnail > div {
  border-radius: 50%;
}

div.list-picture-container > div.list-picture,
.sidebar-circle .sidebar-content div.list-picture-container > div {
  width: inherit;
  height: inherit;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

div.list-picture-container > div.list-picture.portrait,
.sidebar-circle .sidebar-content div.list-picture-container > div.portrait {
  background-size: 100% auto;
}

div.list-picture-container > div.list-picture.landscape,
.sidebar-circle .sidebar-content div.list-picture-container > div.landscape {
  background-size: auto 100%;
}

/* ========================================================================
* new active employee toggle
* ======================================================================== */

.table thead th div {
  display: inline-block;
}

.table tr th.col-name,
.table tr td.col-name {
  min-width: 240px;
  max-width: 240px;
  width: 240px;
}

.show-terminated-employee-check-box {
  width: auto;
}

.show-terminated-employee-check-box .row {
  margin: 0 !important;
  padding: 0;
}

.show-terminated-employee-check-box .toggle-btn-container {
  margin: 0;
}

.show-terminated-employee-check-box .toggle-btn {
  position: relative;
  width: 15px;
  height: 25px;
  line-height: 31px;
  top: -10px;
  left: -10px;
}

.show-terminated-employee-check-box .toggle-btn .toggle-round {
  width: auto;
  height: auto;
}

.show-terminated-employee-check-box .toogle-tick .fa-check:before {
  color: #5E5E5E;
  content: '\f007';
  font-size: 15px;
  font-family: 'Font Awesome 5 Free';
  font-weight: 400;
}

.show-terminated-employee-check-box .toggle-btn input[type="checkbox"]:checked ~ label .fa.fa-check:before {
  color: #3d61ff;
  font-weight: 900;
}

.show-terminated-employee-check-box .toggle-btn .toggle-round label {
  border: none;
}

.show-terminated-employee-check-box .toogle-cross,
.show-terminated-employee-check-box .toggle-btn .toggle-round label:before {
  display: none;
}

/* ========================================================================
* action button
* ======================================================================== */

.material-action button.btn-menu {
  background-color: #51B963;
  border-radius: 50%;
  font-size: 33px;
  height: 43px;
  width: 43px;
  padding: 0;
  /* margin: 0; */
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  vertical-align: middle;
  z-index: 1;
  transition: .3s ease-out;
  line-height: 16px;
  color: #ffffff;
}

.material-action .dropdown-menu {
  top: 36px;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}

.material-action .dropdown-menu:before,
.material-action .dropdown-menu:after {
  position: absolute;
  display: inline-block;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}

.material-action .dropdown-menu:before {
  top: -7px;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  right: 7px;
}

.material-action .dropdown-menu:after {
  top: -6px;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  border-left: 6px solid transparent;
  right: 8px;
}

.material-action .scrollable-menu > li > a {
  cursor: pointer;
  padding: 0 10px;
}

.material-action .dropdown-menu > li > a .wrapper {
  height: 30px;
  line-height: 30px;
  font-weight: bold;
  padding: 0 20px;
  border-bottom: 1px solid #51B963;
}

.material-action .dropdown-menu > li:last-child > a .wrapper {
  border-bottom: none;
}

.material-action .dropdown-menu > li > a .fa {
  color: #51B963;
  position: absolute;
  left: 5px;
  line-height: 30px;
  font-size: 17px;
  width: 30px;
  text-align: center;
  height: 30px;
}

.material-action .dropdown-menu > li > a .wrapper .text {
  color: #636e7b;
  font-weight: bold;
  padding: 5px;
  font-size: 11px;
}

/** Customize Page Content **/

/*.partial {
    height: calc(100% - 39px);
    margin-top: -15px;
    padding-top: 15px;
}
.partial section {
    height: calc(100% + 15px);
    margin-top: -15px;
    padding-top: 15px;
}*/

/** customize toggle */

.layout-ui5 .row {
  margin-bottom: 10px;
}

.layout-ui5 .form-group {
  margin-bottom: 0;
}

/* ========================================================================
* New UI for input to herdhr-v5.css
* ======================================================================== */

.new-ui5 .flexbox {
  display: flex;
}

.new-ui5 .action-button .scrollable-menu > li > a {
  padding: 10px;
}

.new-ui5 .form-control {
  height: 34px;
}

.new-ui5 textarea.form-control {
  height: auto;
}

.new-ui5 .input-group-addon {
  top: 4px;
}

.new-ui5 .btn {
  background-color: #3d61ff;
}

.new-ui5 .btn {
  height: 30px;
  font-weight: bold;
  box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
  margin: 0;
  min-width: 80px;
}

.new-ui5 .round-icon {
  width: 20px;
  height: 20px;
  line-height: inherit;
}

.new-ui5 label > .round-icon {
  top: 5px;
}

.new-ui5 .btn-icon {
  min-width: 37px;
  width: 37px;
}

.new-ui5 .btn.btn-invert {
  color: #868686;
  background-color: #ffffff !important;
  box-shadow: 0px 3px 3px rgba(0,0,0,0.08);
  border: 1px solid rgba(156, 156, 156, 0.6);
}

.new-ui5 .btn:active {
  box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}

.new-ui5 .btn.btn-invert:active {
  box-shadow: inset 0 1px 5px rgba(0,0,0,.125);
}

.new-ui5 .btn.btn-transparent {
  background-color: transparent;
  color: #3d61ff;
  box-shadow: none;
  border: none;
}

.new-ui5 .btn.btn-success {
  background-color: #03C272;
}

.new-ui5 .btn.btn-decline {
  background-color: #F80F48;
}

.new-ui5 input-button i {
  margin-right: 5px;
}

.new-ui5 input-button img {
  margin-right: 5px;
}

.new-ui5 .table-icon {
  color: #3d61ff;
  background-color: transparent;
  box-shadow: none;
  font-size: 17px;
  padding-right: 5px;
}

.new-ui5 .btn.btn-delete-icon,
.new-ui5 .btn.btn-transparent-icon {
  color: grey;
  background-color: transparent !important;
  box-shadow: none;
  font-size: 20px;
}

.new-ui5 .btn.btn-delete-icon:hover,
.new-ui5 .btn.btn-transparent-icon:hover {
  color: #3d61ff;
  font-size: 20px;
}

.new-ui5 .btn.btn-delete-icon i,
.new-ui5 .btn.btn-transparent-icon i {
  font-size: 17px;
}

.new-ui5 .btn-calculator-icon {
  color: #3d61ff;
  font-size: 15px;
  cursor: pointer;
  padding-top: 5px;
}

.material-action button.btn-menu {
  height: 31px !important;
  width: 31px !important;
  min-width: 31px !important;
}

.form-control:focus {
  border: 1px solid #4B7CBF !important;
}

.new-ui5 .daterange .daterange-selector {
  position: relative;
  max-width: 200px;
}

.new-ui5 .daterange input.input-date-range {
  background-color: #fff;
  color: #5E5E5E !important;
  border: 1px solid #DDD;
  height: 34px;
  padding: 0;
  width: 100%;
  padding-right: 10px;
  padding-left: 10px;
  cursor: pointer;
}

.new-ui5 .daterange label {
  margin-top: 0;
}

.new-ui5 .daterange .glyphicon-calendar {
  right: 10px;
  color: #5E5E5E;
  top: 11px;
  position: absolute;
  pointer-events: none;
}

.new-ui5 .input-control,
.new-ui5 form .control-label {
  font-size: 13px;
  line-height: 22px;
  font-weight: 400;
}

.new-ui5 .selector-custom .dropdown-toggle {
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 2px;
  color: #555;
  font-weight: normal;
  min-width: 160px;
  padding-left: 15px;
  padding-right: 23px;
  text-align: left;
  height: 34px;
  width: 100%;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.new-ui5 .selector-custom .dropdown-toggle.is-word-wrap {
  height: auto !important;
}

.new-ui5 .selector-custom .dropdown-toggle.is-word-wrap .shift-input-row {
  white-space: normal;
}

.new-ui5 .selector-custom .dropdown-toggle.is-word-wrap .shift-input-row ol {
  list-style: auto !important;
}

.new-ui5 .selector-custom .dropdown-toggle.is-word-wrap .shift-input-row ol li {
  margin-left: 20px;
}

.new-ui5 .selector-custom .dropdown-toggle.is-word-wrap ol {
  padding-bottom: 0px !important;
}

.new-ui5 .selector-custom .dropdown .caret,
.new-ui5 .selector-custom .dropup .caret {
  position: absolute;
  right: 10px;
  top: 13px;
}

.new-ui5 .btn.disabled,
.new-ui5 .btn[disabled],
.new-ui5 fieldset[disabled] .btn[disabled] {
  background-color: #F9FAFB;
  opacity: 1;
  color: #919AAB !important;
  cursor: default;
}

.new-ui5 .selector-custom button.dropdown-toggle[disabled] .caret {
  display: none;
}

.new-ui5 .selector-custom.row .scrollable-menu,
.new-ui5 .selector-custom.row .dropdown-toggle {
  width: 100%;
}

.new-ui5 .selector-custom .dropdown-toggle .text {
  line-height: 23px;
}

.new-ui5 .selector-custom .dropdown-toggle .caret {
  margin: 1px;
}

/*.new-ui5 .selector-custom .dropdown-menu {
    width: 100%;
}*/

.new-ui5 .selector-custom .scrollable-menu li a {
  font-weight: 500;
  color: #323c47;
  margin: 5px;
  text-decoration: none;
}

.new-ui5 .selector-custom .scrollable-menu li {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.scrollable-menu {
  height: auto;
  max-height: 200px;
  overflow-x: hidden;
  font-size: 12px !important;
}

.scrollable-menu::-webkit-scrollbar {
  width: 8px;
}

.scrollable-menu::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.scrollable-menu::-webkit-scrollbar-thumb {
  background: #888;
}

.scrollable-menu::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.new-ui5 .selector-custom .scrollable-menu li.active a,
.new-ui5 .selector-custom .scrollable-menu li:hover a {
  background-color: #E5EFFC;
  border-radius: 2px;
}

.new-ui5 .selector-custom .scrollable-menu li > a:before {
  border-left: 3px solid transparent;
}

/** dropdown */

.new-ui5 .dropdown-menu {
  /*color: #b8b8b8;
    box-shadow: 0px 3px 3px #e8e8e8 !important;*/
}

.new-ui5 .selector-custom .scrollable-menu > li > a {
  padding: 10px;
}

.new-ui5 .scrollable-menu li > a:hover:before,
.new-ui5 .scrollable-menu li > a:focus:before,
.new-ui5 .dropdown-menu li > a:hover:before,
.new-ui5 .dropdown-menu li > a:focus:before {
  border-color: #3d61ff;
}

.new-ui5 .selector-custom .dropdown-toggle:focus {
  border: 1px solid #4B7CBF !important;
}

.new-ui5 .dropdown-toggle .btn .caret {
  margin-left: 5px;
}

/* material action the plus button */

.material-action .dropdown-menu > li > a {
  padding: 0 10px;
}

/**
    New layout need to copy to herdhr-v5.css
 **/

.ui5-bg {
  background-color: #f9fbfd !important;
}

.ui5-no-border-bg {
  background-color: #ffffff !important;
}

.show-footer .body-content-v5 > div {
  margin-bottom: 80px;
}

.show-footer .body-content-no-border-v5 > div {
  margin-bottom: 80px;
}

.body-content-v5 {
  padding: 0;
  /*background-color: #f9fbfd;*/
}

.body-content-no-border-v5 {
  margin: 0px 15px 70px 15px;
  padding: 0 15px 15px 15px;
}

.body-content-v5 .content-shadow-v5 {
  background-color: rgb(255, 255, 255);
  box-shadow: rgba(0, 0, 0, 0.04) 0px 2px 4px 0px;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.05);
  border-image: initial;
  margin: 0 15px 15px 15px;
  padding: 0 15px 15px 15px;
}

@media (min-width: 1300px) {
  .body-content-v5 .small-content {
    margin: 0 160px 15px 160px !important;
  }

  .body-content-no-border-v5 .small-content {
    margin: 0 160px 15px 160px !important;
  }
}

.side-template {
  height: 100%;
  width: 400px;
  max-width: 0px;
  background: #ffffff;
  position: fixed;
  padding-top: 53px;
  top: 0px;
  right: 0px;
  z-index: 1000;
  box-shadow: 5px 19px 20px 0px rgba(0, 0, 0, 0.1);
  transition: max-width 0.5s cubic-bezier(0, 1, 0, 1);
}

.side-template.open {
  transition: max-width 0.5s ease-in-out;
  max-width: 400px;
}

/* to fixed horizontal scrollbar appear*/

.full-template {
  margin-right: 1px;
}

.show-filter .filter-template {
  display: block;
}

.show-filter .full-template {
  margin-left: 220px;
}

.footer-template {
  background-color: #f7f9fc;
  border-top: 1px solid #e3ebf3;
  position: fixed;
  bottom: 0;
  height: 90px;
  width: 100%;
  padding: 20px;
  padding-right: 240px;
  display: none;
}

.footer-template.active {
  display: block;
}

.show-footer .body-content5 {
  margin-bottom: 90px;
}

.show-footer .full-template {
  margin-bottom: 90px;
}

.show-footer .footer-template {
  display: block;
}

.page-sidebar-minimize .footer-template {
  padding-right: 95px;
}

.footer-template-fixed {
  height: 90px;
  width: 100%;
  padding: 20px;
}

.footer-template-fixed.v2 {
  height: inherit;
}

/**
    Popup box
 **/

.panel-heading {
  font-size: 20px;
  font-weight: 500;
  border-bottom: 1px solid #AEAEAE;
  padding: 15px 20px;
}

.panel .panel-body {
  margin: 15px 0;
}

.panel-shift .panel-body {
  padding: 0 15px 15px 15px;
}

.header-template-report .panel-body {
  margin: 0px 30px !important;
}

.panel .panel-body-small {
  margin: 30px 100px 15px 100px;
}

.panel .panel-body-medium {
  margin: 30px 50px 15px 50px;
}

.panel .panel-body-center {
  margin: 10px 30px;
}

.panel .panel-footer {
  text-align: center;
}

.panel .panel-footer-mtb10 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.panel.panel-report .panel-body {
  margin: 15px !important;
}

.panel.panel-report .panel-body .report-filter {
  margin: 0px 0px 25px 0px;
}

.panel.panel-report .panel-body .report-filter .panel-label {
  font-weight: bold;
}

.panel.panel-report .report-separator {
  background-color: rgb(0 0 0 / 4%);
  height: 1px;
  margin: 0px 0px 25px 0px;
}

.no-margin {
  margin: 0px !important;
}

.profile-big .profile-avatar div.list-picture-container {
  width: 66px;
  height: 66px;
}



.modal-dialog .panel,
.modal-dialog .panel .panel-footer {
  background-color: transparent;
}

.modal .modal-dialog .modal-content {
  border-radius: 5px;
  background-color: white;
}

.modal-dialog .panel .panel-footer:before,
.modal-dialog .panel .panel-footer:after {
  display: table;
  content: " ";
  clear: both;
}

/* Avatar with no photo*/

.avatar-thumbnail .avatar-no-profile {
  background-color: #373737;
  color: white;
  display: block;
  font-size: 0;
  padding: 10px 16px;
  font-weight: bold;
}

.avatar-thumbnail .avatar-no-profile:first-letter {
  font-size: 13px;
}

/* action bar on footer */

.action-bar {
  font-size: 15px;
  line-height: 30px;
}

.action-bar .guide-text {
  font-weight: bold;
  margin: 0;
}

.action-bar .selected-text {
  color: #2182fd;
  line-height: 36px;
  font-size: 14px;
}

.action-bar .shift-selector {
  min-width: 300px;
}

/*hack herdhr-v2 css */

/*.header-template .filter-tab {
    margin-bottom: -20px;
}*/

.filter-tab .tab-navigation {
  margin-left: 20px;
}

/**
    Company Period
 **/

.user-count-container {
  background-color: rgba(0, 122, 255, 0.1);
  border-radius: 13px;
  padding: 8px 15px;
  width: 76px;
  color: #0380FF;
  font-weight: bold;
  text-align: center;
}

.user-count-container i.fa-user-friends {
  margin: 0;
  font-size: 14px;
}

.user-count-container span {
  min-width: 25px;
  display: inline-block;
}

.company-period-row-underline {
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 5px;
  padding-bottom: 10px;
  margin-bottom: 15px;
  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.04);
  padding-bottom: 2px;
}

.company-period-populate-date {
  padding-top: 27px;
  margin-left: 15px;
}

.company-period-advanced-table {
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
}

.company-period-advanced-table > tbody > tr:nth-child(odd) > td {
  background-color: #FFFFFF;
  border: none;
  border-bottom: 1px solid rgba(227, 235, 243, 1);
}

.company-period-advanced-table > tbody > tr:nth-child(even) > td {
  background-color: #FFFFFF;
  border: none;
  border-bottom: 1px solid rgba(227, 235, 243, 1);
}

.company-period-advanced-table > tbody > tr:first-child > td {
  border-top: 1px solid rgba(0, 0, 0, 0.09);
  border-bottom: 1px solid rgba(227, 235, 243, 1);
}

.company-period-advanced-table > tbody > tr:last-child > td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
  border-top: 1px solid rgba(227, 235, 243, 1);
}

.company-period-advanced-table > thead > tr > th {
  background-color: #F0F7FF !important;
  border-top: 2px #0A7FFF solid !important;
}

.company-period-advanced-table .border-left {
  border-left: 1px solid rgba(227, 235, 243, 1) !important;
}

.table .center-datepicker > input-datepicker > div > bootstrap-datepicker .date {
  margin: 0 auto;
}

.panel .side-menu {
  padding-right: 0px;
  box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.04);
}

.panel .side-menu .side-menu-selection {
  padding-left: 15px;
  padding-top: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  cursor: pointer;
  position: relative;
}

.panel .side-menu .errors-count {
  background: red;
  color: white;
  border-radius: 100%;
  position: absolute;
  padding: 0px 7px;
  font-size: 9px;
  right: 8px;
  top: 15px;
  font-weight: bold;
}

.panel .side-menu .selected {
  background-color: #F0F7FF !important;
  border-right: 2px #0A7FFF solid !important;
}

.panel .side-menu.child {
  text-align: left;
}

.panel .side-menu.child .errors-count {
  background: red;
  color: white;
  position: absolute;
  padding: 0px 5px;
  font-size: 8px;
  top: 5px;
  left: 2px;
  border-radius: 100%;
  width: 14px;
  height: 14px;
}

.panel .side-menu.child .errors-count div {
  padding: 0px;
  font-size: 8px;
  margin-top: -3px;
}

.panel .side-menu.child div {
  font-size: 13px;
  padding-top: 13px;
  padding-bottom: 13px;
  font-weight: 500;
  padding-right: 40px;
}

.panel .side-menu.child .btn-delete-icon {
  text-align: right;
  padding-top: 0px;
  min-width: 25px !important;
  height: 27px;
  position: absolute;
  display: none;
  top: 13px;
  right: 8px;
  padding-left: 0px;
  padding-right: 0px;
}

.panel .side-menu.child .side-menu-selection:hover .btn-delete-icon {
  display: inline-block;
}

.panel .side-menu.child .btn-delete-icon:hover {
  color: red;
}

.multi-select-table > tbody > tr:nth-child(odd) > td {
  background-color: #FFFFFF;
  border: none;
  border-bottom: 1px solid rgba(227, 235, 243, 1);
}

.multi-select-table > tbody > tr.clickable:hover > td {
  background-color: #F0F7FF !important;
  color: #5E5E5E !important;
}

.multi-select-table > tbody > tr.user-selected > td {
  background-color: #F0F7FF !important;
  color: #5E5E5E !important;
}

.multi-select-table > tbody > tr:nth-child(even) > td {
  background-color: #FFFFFF;
  border: none;
  border-bottom: 1px solid rgba(227, 235, 243, 1);
}

.multi-select-table > tbody > tr:first-child > td {
  border-top: 1px solid rgba(0, 0, 0, 0.09);
}

.multi-select-table > tbody > tr:last-child > td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}

.multi-select-table > tfoot > tr > td {
  background-color: #FFFFFF;
  border: none;
  font-size: 12.5px;
  padding: 10px 20px;
}

.multi-select-table .col-name {
  width: 130px !important;
  min-width: 130px !important;
  padding-left: 20px !important;
}

.multi-select-table-container {
  max-width: 740px;
}

.multi-select-table-container.multi-select-table-container-by-group,
.multi-select-table-container-full-width .multi-select-table-container {
  max-width: -webkit-fill-available;
}

.multi-select-table-container .filter-selector {
  float: left;
  margin-right: 10px;
}

.multi-select-table-container .tab-selection {
  font-size: 14px;
  cursor: pointer;
  font-weight: normal;
  color: #d3d3d3;
  margin-right: 35px;
}

.multi-select-table-container .tab {
  margin-bottom: 15px;
}

.multi-select-table-container .link {
  color: #0645AD !important;
  padding-right: 35px;
}

.multi-select-table-container .tab-selected {
  color: #5E5E5E;
}

.multi-select-table-container .list-picture-container {
  width: 55px !important;
  height: 55px !important;
}

.company-period-modal-label {
  padding: 5px 10px;
  border: 1px solid #EBF4FF;
  background: #F7FBFF;
  border-radius: 5px;
}

.company-period-footer-container {
  margin-left: calc(58% - 200px);
  width: 200px;
  margin-top: 20px;
}

.modal-datepicker label {
  margin-top: 6px;
  margin-left: 10px;
}

.advanced-setting-container {
  margin: 0px 10px;
  border: 1px solid #EBF4FF;
  padding: 20px 30px;
  background: #F7FBFF;
}

.advanced-setting-container .advanced-setting-label {
  color: grey !important;
}

.herd-alert {
  margin: 10px 10px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
  position: relative;
}

.herd-alert .icon {
  padding: 0px 20px;
  color: white;
  border-radius: 4px 0px 0px 4px;
  display: inline-block;
  top: 0px;
  bottom: 0px;
  position: absolute;
  padding-top: 12.5px;
}

.herd-alert .icon.warning-container {
  background-color: #FB8C00;
  border: 1px solid #FB8C00;
}

.herd-alert .icon.error-container {
  background-color: #E84235;
  border: 1px solid #E84235;
}

.herd-alert .message-container {
  padding: 12px 20px;
  margin-left: 40px;
  border-right: 1px #d3d3d3 solid;
  border-top: 1px #d3d3d3 solid;
  border-bottom: 1px #d3d3d3 solid;
  border-radius: 0px 4px 4px 0px;
  font-weight: bold;
}

.herd-alert .clickable {
  color: #3366BB;
}

.company-period-assign-user-count {
  height: 23px;
  background-color: red;
  padding-top: 1px;
  padding-left: 8px;
  border-radius: 50px;
  color: white;
  font-weight: bold;
  margin-left: 15px;
  margin-top: 6px;
  padding-right: 8px;
}

.company-period-assign-user-container {
  width: 100%;
}

@media (min-width: 1300px) {
  .company-period-assign-user-container {
    width: 60%;
  }
}

/** popup close button **/

.modal-content .popup-btn-close {
  position: relative;
  right: 0;
  top: 5px;
  font-size: 20px;
  line-height: normal;
  background-color: transparent;
  color: #a9a9a9;
  height: auto;
  width: auto;
  box-shadow: none;
}

.modal-content .popup-btn-close:hover {
  cursor: pointer;
  color: #3d61ff;
  font-size: 21px;
  border: 1px solid transparent;
  height: auto;
  width: auto;
  line-height: normal;
}

.new-ui5-popup {
  padding: 10px;
}

.new-ui5-popup .panel-footer {
  border: none;
}

.empty-state-img {
  margin-bottom: 25px;
  margin-top: 20px;
}

.panel-table .panel-body {
  margin: 0;
  padding: 0;
}

.panel-table .table > tbody > tr:first-child > td {
  border-top: none;
}

.panel-v5 {
  box-shadow: rgba(0, 0, 0, 0.04) 0px 2px 4px 0px;
  margin-bottom: 15px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  background-color: #FFFFFF;
  height: 100%;
}

.panel-header-v5 {
  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.04);
  font-weight: 700;
  padding: 15px 20px;
  font-size: 14px;
}

.panel-header-v5 i {
  color: #3d61ff;
  font-size: 20px;
}

.panel-body-v5 {
  padding: 15px 10px 15px 50px;
  color: #5E5E5E;
  font-size: 14px;
  line-height: 20px;
}

.panel-body-v5.panel-info .panel-label {
  text-align: left;
  font-weight: 700;
  min-width: 150px;
}

.panel-body-v5.panel-info .panel-text {
  text-align: left;
}

.panel-body-v5 .panel-info-table tr td:first-child {
  width: 150px;
  vertical-align: top;
}

.panel-body-v5 .panel-info-table tr td {
  padding: 2px 0 10px 0;
  /*padding: 2px 0 2px 0;*/
}

/*Want to support responsive for view and edit */

.panel-body-v5 .panel-info-table.edit tr td {
  padding: 2px 0 10px 0;
}

.input-text-fa-placeholder {
  font-weight: 900;
  font-family: Roboto, 'Font Awesome 5 Free';
}

.message-action {
  color: #3366BB;
  cursor: pointer;
  text-decoration: none;
}

.message-action:hover {
  text-decoration: underline;
}

.new-ui5 .col-name {
  word-spacing: unset;
  word-break: keep-all;
  min-width: 200px;
}

.new-ui5 .col-name .list-picture-container {
  float: left;
  margin-top: 5px;
  margin-right: 5px;
}

.new-ui5 .col-name .col-name-detail {
  float: left;
  width: 70%;
  padding-top: 8px;
}

.new-ui5 .col-name .col-name-detail ul {
  list-style: none;
  margin: 0;
  padding-left: 7px;
}

.loan-body-content-left {
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
  margin: 10px 10px 5px 0px;
}

.loan-body-content-center {
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
  margin: 10px 0px 5px 10px;
}

/** Sky **/

.row-underline {
  margin-left: 5px;
  margin-right: 5px;
  padding-bottom: 10px;
  margin-bottom: 15px;
  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.04);
  padding-bottom: 2px;
}

/** LEAVE **/

.created-by {
  float: right;
  position: relative;
  top: -18px;
  font-size: 9px;
}

/* tagging */

.select2-container-multi,
.select2-container-multi:focus,
.select2-container-multi .select2-choices {
  border: none !important;
  background: none !important;
  box-shadow: none !important;
}

.select2-container-multi .select2-choices li.select2-search-field input[type=text] {
  width: 120px !important;
  background-color: #ffffff !important;
  border: 1px solid #DDD;
  margin: 4px 0;
}

.select2-container-multi .select2-choices .select2-search-choice {
  padding: 8px 8px 8px 18px;
  margin: 4px 8px 4px 0;
}

.select2-search-choice-close {
  top: 7px;
}

/*Adjust scrollable table css*/

.scrollableContainer {
  box-shadow: rgba(0, 0, 0, 0.04) 0px 2px 4px 0px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.scrollableContainer .headerSpacer {
  border: 0px;
  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.04);
}

.scrollableContainer .scrollArea {
  border: 0px;
}

.scrollableContainer table {
  font-size: 12px;
  background-color: #f3f3f4;
  border: 0px;
}

.scrollableContainer table tbody tr {
  height: 47px;
}

.scrollableContainer table  td {
  padding-left: 5px;
  padding-right: 10px;
}

.scrollableContainer table > tbody > tr > td {
  background-color: #ffffff;
  border-bottom: none;
}

.scrollArea table th .box {
  border-left: 0px;
}

.input-realtime-dropdown {
  white-space: nowrap;
}

.input-realtime-dropdown > div {
  display: inline-block;
  white-space: nowrap;
}

.input-realtime-dropdown > div.action-btn > span {
  margin-left: 5px;
}

.input-realtime-dropdown-view {
  white-space: nowrap;
}

.input-realtime-dropdown-view > span {
  margin-left: 5px;
}

input.form-control.font-blue,
textarea.form-control.font-blue {
  color: rgba(0, 122, 255, 1) !important;
  font-weight: bold;
}

input.form-control.border-bottom,
textarea.form-control.border-bottom {
  border: 0;
  border-bottom: 2px solid rgba(217, 217, 217, 1);
}

input.form-control.focus-bottom:focus,
textarea.form-control.focus-bottom:focus {
  border: 0 !important;
  border-bottom: 3px solid rgba(0, 122, 255, 1) !important;
}

textarea.form-control.overflow-hidden {
  overflow: hidden;
}

/*end here*/

/* ========================================================================
* Location Report Google Map Customize Design - Moved by Wai Song
* ======================================================================== */

.panel-profile {
  font-size: 14px;
  min-width: 485px;
}

.panel-profile .panel-avatar,
.panel-profile .panel-info {
  display: inline-block;
  padding: 0 20px;
  vertical-align: top;
}

.panel-profile .panel-avatar {
  margin: 10px;
}

.panel-profile .panel-info {
  margin: 20px 0;
}

.panel-profile .panel-avatar .photo-edit {
  height: 110px;
  width: 110px;
}

.panel-profile .panel-info .panel-label {
  text-align: left;
  font-weight: 700;
  width: 100px;
  float: left;
}

.panel-profile .panel-info .panel-text {
  width: auto;
  float: left;
}

.panel-location-report {
  padding: 10px;
}

.location-report-gps-icon {
  font-size: 28px !important;
  cursor: pointer;
}

/*popup on google map */

.gm-style .info-box-wrap .fa-map-marker {
  font-size: 25px;
  cursor: pointer;
}

.gm-style .info-box-wrap .photo-edit {
  height: 100px;
  width: 100px;
  margin-top: 10px;
}

.gm-style .gm-style-iw {
  background-color: #4B7CBF !important;
  top: 0 !important;
  left: 1px !important;
  display: block !important;
  border-radius: 3px;
}

.gm-style .gm-style-iw-c {
  padding: 0;
}

.gm-style .gm-style-iw-d {
  overflow-x: hidden !important;
  max-width: inherit !important;
  max-height: inherit !important;
  -webkit-transition: width 2s, height 4s;
  /* Safari */
  transition: width 2s, height 4s;
  overflow: hidden !important;
}

.gm-style .gm-style-iw button img {
  display: none !important;
}

.gm-style .gm-style-iw button:after {
  content: '\f00d' !important;
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: white;
}

/* arrow */

.gm-style .gm-style-iw-t::after {
  background: #4B7CBF !important;
}

.gm-style .info-box-wrap table {
  font-weight: 700;
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  line-height: 21px;
  min-width: 60px;
  margin-top: 15px;
  color: #ffffff;
}

.gm-style .info-box-wrap table > tbody > tr > td:first-child {
  min-width: 70px;
}

/* ========================================================================
* Company setting
* ======================================================================== */

.text-caption {
  font-size: 10px;
  margin: 20px;
  line-height: 13px;
}

.company-logo {
  padding-top: 35px;
}

.company-logo label {
  display: block !important;
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 20px;
}

/* ========================================================================
* Shift break settings
* ======================================================================== */

.break-icon img {
  width: 40px;
}

.btn.btn-break-icon {
  background-color: #c5e5df;
  border-color: #c5e5df !important;
  margin: 5px !important;
  height: auto !important;
}

.btn.btn-break-icon:hover,
.btn.btn-break-icon.active {
  background-color: #419BA9 !important;
  border-color: #419BA9 !important;
}

/* ========================================================================
* Dashboard
* ======================================================================== */

.dashboard {
  margin: 100px;
  color: #2a489e;
}

.dashboard .logo {
  border-right: 1px solid #2a489e;
  float: left;
  height: 162px;
  margin-right: 10px;
  padding-right: 15px;
}

.dashboard .logo img {
  margin-top: 20px;
  width: 129px;
}

.dashboard .title {
  float: left;
  height: 162px;
  margin-left: 10px;
  padding-left: 15px;
}

.dashboard .title .title-header1 {
  font-size: 24pt;
  font-weight: bold;
  margin-top: 45px;
}

.dashboard .title .title-header2 {
  font-size: 24pt;
  font-weight: bold;
  margin-top: 10px;
}

.dashboard .title .title-message {
  font-size: 18pt;
  margin-top: 16px;
}

/* ========================================================================
* Custom CSS for exception icon list
* ======================================================================== */

ul.exception-icon-list {
  list-style-type: none;
  padding: 0;
}

ul.exception-icon-list li {
  float: left;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  padding: 3px;
  margin: 1px;
  text-align: center;
  line-height: 15px;
  font-size: 12px;
}

ul.exception-icon-list .fas,
ul.exception-icon-list .far {
  color: white;
}

ul.exception-icon-list li.warning {
  background-color: #e6a716 !important;
}

ul.exception-icon-list li.error {
  background-color: #eb2027 !important;
}

ul.exception-icon-list li.success {
  background-color: #53a352;
}

/* ========================================================================
*  General Report
* ======================================================================== */

.general-report-deduction-value {
  color: #E9573F;
}

.general-report-photo .photo-edit {
  height: 50px;
  width: 50px;
  border-radius: 0;
  background-color: #cccccc;
  overflow: hidden;
  border-width: 1px 0 1px 0;
  border-color: #cccccc;
}

.general-report-photo div {
  width: 50px;
  padding-right: 25px !important;
}

.general-report-photo .photo-edit .no-photo {
  background-size: 100px 60px;
  background-position: -25px 0px;
}

/* ========================================================================
* Search user autocomplete
* ======================================================================== */

.autocomplete-add-user .has-feedback .form-control.input-search {
  width: 210px;
}

/* ========================================================================
* Google map
* ======================================================================== */

/*.gmap {
    margin: 10px;
}*/

/*.angular-google-map {
    height: 300px;
}*/

.angular-google-map-container {
  height: 300px;
}



/* ========================================================================
* attendance-note-report
* ======================================================================== */

.attendance-note-report-photo .photo-edit {
  height: 50px;
  width: 50px;
  border-radius: 0;
  background-color: #cccccc;
  overflow: hidden;
  border-width: 1px 0 1px 0;
  border-color: #cccccc;
}

.attendance-note-report-photo,
.attendance-note-report-photo div {
  width: 50px;
}

.td-attendance-note-report {
  padding-right: 25px !important;
}

.attendance-note-report-photo .photo-edit .no-photo {
  background-size: 100px 60px;
  background-position: -25px 0px;
}

/* ========================================================================
* datetimepicker widget
* ======================================================================== */

.bootstrap-datetimepicker-widget .btn {
  background-color: inherit;
  box-shadow: none;
}

/* ========================================================================
* Header template
* ======================================================================== */

.header-template.mb-negative-10 {
  margin-bottom: -10px;
}

.header-template .header-filter input-select-filter {
  margin-right: 10px;
  margin-bottom: 5px;
  display: inline-block;
}

.header-template .header-filter input-select-filter[check-box="true"] {
  margin-left: 15px;
  padding-top: 10px;
}

.header-template .header-filter input-button i {
  margin-right: 0px;
}

.header-template .tab-navigation .nav .count {
  position: absolute;
  right: 5px;
  background: red;
  font-size: 9px;
  color: white;
  border-radius: 50%;
  font-weight: bold;
  line-height: 6px;
  padding: 5px;
  z-index: 999;
  min-width: 16px;
}

.layout-border .header-template,
.layout-no-border .header-template {
  border-bottom: none;
}

.header-template:nth-child(1):empty {
  padding-top: 10px;
}

.header-template {
  padding: 20px 15px;
  background-color: #f9fbfd;
  /*border-bottom: 1px solid #e3ebf3;*/
}

.header-template-report {
  padding: 20px 15px;
}

.header-template .herd-filter-inline {
  margin: 0 5px 5px 5px;
  float: left;
}

.header-filter .form-inline > .row:nth-child(2) {
  margin-top: 10px;
}

.filter-template {
  display: none;
  width: 220px;
  height: 100%;
  position: absolute;
  border-right: 1px solid #e9eff4;
  box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
  padding: 10px;
  text-align: center;
  z-index: 1001;
}

.filter-template .filter-label {
  text-align: left;
  margin: 5px 0px 20px 0;
  font-size: 16px;
}

.filter-template .selector-custom {
  margin-top: 10px;
}

.filter-template .btn {
  margin: 10px !important;
}

.new-ui5 .header-template button.btn {
  height: 43px;
  min-width: 43px;
  margin-top: 0px !important;
}

.new-ui5 .header-template button.btn.btn-action {
  font-size: 13px !important;
}

.new-ui5 .header-template button.btn.btn-filter {
  color: #3d61ff;
  background-color: #ffffff !important;
  font-size: 20px;
  border: none;
  min-width: 43px;
  box-shadow: 0 0.8px 2px 0px rgba(0,0,0,0.1) !important;
}

.new-ui5.show-filter .header-template button.btn.btn-filter {
  color: #ececec;
  background-color: #3d61ff !important;
  box-shadow: inset 0px 3px 3px rgba(0,0,0,0.125);
}

.new-ui5 .header-filter select.form-control,
.new-ui5 .header-filter .input-group.date {
  margin: 0;
}

.new-ui5 .header-template .input-group.date input {
  box-shadow: 0 0.5px 2px 0px rgba(0,0,0,0.1) !important;
  height: 43px;
  background-color: #fff;
  color: inherit !important;
  font-weight: 500;
  border: 1px solid transparent !important;
  width: 160px !important;
  text-align: left;
  padding-right: 35px;
  font-size: 14px !important;
}

.new-ui5 .input-group.time input {
  width: 100px;
  text-align: left;
  cursor: pointer;
}

.new-ui5 .input-group.date input {
  width: 150px;
}

/*.new-ui5 .header-template .input-group.date .input-group-addon {
    background-color: #fff;
    color: #323c47 !important;
    top: 9px;
}*/

.new-ui5 .time-container .glyphicon-time,
.new-ui5 .date-container .glyphicon-calendar,
.new-ui5 .yearmonth-container .glyphicon-calendar {
  color: #5E5E5E;
  top: 11px;
  position: absolute;
  pointer-events: none;
  z-index: 100;
  margin-left: -25px;
}

.new-ui5 .header-template .date-container .glyphicon-calendar,
.new-ui5 .header-template .yearmonth-container .glyphicon-calendar {
  top: 15px !important;
}

.new-ui5 .header-template .daterange-container {
  box-shadow: 0 0.5px 2px 0px rgba(0,0,0,0.1) !important;
  height: 43px;
  width: 230px;
  min-width: 230px;
}

.new-ui5 .header-template .daterange-container.day-type-month {
  width: 125px;
  min-width: 125px;
}

.new-ui5 .header-template .show-navigation .daterange-container.day-type-month {
  width: 210px;
  min-width: 205px;
}

.new-ui5 .header-template .show-navigation .daterange-container {
  width: 276px;
  min-width: 276px;
}

.new-ui5 .header-template .daterange-container input.input-date-range,
.new-ui5 .header-template .daterange-container .btn {
  border: none;
  border-radius: 0;
  font-size: 14px !important;
  font-weight: 500;
  margin-top: 0;
  height: 41px;
  text-align: left;
  padding-left: 20px;
}

.new-ui5 .header-template .daterange-container.day-type-month input.input-date-range {
  width: 130px;
  text-align: center;
}

.new-ui5 .header-template .daterange-container.day-type-week input.input-date-range {
  width: 196px;
  text-align: center;
  padding-left: 0;
}

.new-ui5 .header-template .daterange-container.day-type-week .glyphicon-calendar {
  right: 0;
}

.new-ui5 .header-template .daterange .show-navigation .fa-arrow-left {
  border-radius: 2px 0 0 2px;
  width: 40px;
  min-width: 40px;
}

.new-ui5 .header-template .daterange .show-navigation .fa-arrow-right {
  border-radius: 0 2px 2px 0;
  width: 40px;
  min-width: 40px;
}

.new-ui5 .header-template .show-navigation .daterange-selector {
  max-width: initial;
}

.new-ui5 .header-template .show-navigation input.input-date-range:focus,
.new-ui5 .header-template .show-navigation input.input-date-range:active,
.new-ui5 .header-template .show-navigation input.form-control:focus {
  border: 1px solid transparent !important;
}

.new-ui5 .header-template .daterange-container > div {
  background-color: #ffffff;
  position: relative;
}

.new-ui5 .header-template .daterange .daterange-selector {
  max-width: 230px;
}

.new-ui5 .header-template .show-navigation .daterange-container > div {
  float: left;
  box-shadow: none !important;
  font-size: 13px;
  font-weight: bold;
}

.new-ui5 .header-template .daterange-container .overlay {
  display: none;
}

.new-ui5 .header-template .daterange-container .btn {
  margin-top: 0;
  line-height: 30px;
  font-size: 13px !important;
  border: none;
  background-color: #fff;
  color: inherit !important;
  font-weight: normal;
  box-shadow: none;
}

.new-ui5 .header-template .daterange-container .glyphicon-calendar {
  color: inherit !important;
  top: 12.5px;
  pointer-events: none;
}

.new-ui5 .header-template .daterange-container.day-type-month .glyphicon-calendar {
  top: 14px;
  font-size: 15px !important;
  display: none;
}

.new-ui5 .filter-template .selector-custom .dropdown-menu,
.new-ui5 .filter-template .selector-custom .dropdown-toggle {
  width: 100% !important;
  margin: 0 !important;
}

.new-ui5 .header-template .selector-custom .dropdown .caret {
  top: 18px;
}

.new-ui5 .header-template .selector-custom .dropdown-toggle {
  border: 1px solid transparent;
  box-shadow: 0 0.8px 2px 0px rgba(0,0,0,0.1) !important;
  color: #323c47 !important;
  font-size: 13px !important;
  font-weight: 500;
  min-width: 160px;
  text-align: left;
}

.new-ui5 .header-template .selector-custom .dropdown-menu li {
  font-size: 13px !important;
}

.new-ui5 .header-template select {
  background-color: #ffffff;
  height: 43px;
  font-weight: 500;
  border: 1px solid transparent;
  color: #323c47 !important;
  margin-left: 10px;
  box-shadow: 0 0.8px 2px 0px rgba(0,0,0,0.1) !important;
  font-size: 13px !important;
  margin: 0 !important;
  margin-right: 10px !important;
}

.new-ui5 .header-template select:hover {
  cursor: pointer;
}

.new-ui5 .header-template select option {
  font-size: 13px;
  background-color: transparent;
  color: inherit;
}

.new-ui5 .header-template .btn-group-toggle-btn label.btn {
  background-color: #ffffff !important;
  height: 43px;
  line-height: 30px;
  box-shadow: none;
  color: #5E5E5E;
}

.new-ui5 .header-template .btn-group-toggle-btn label.btn.active {
  background-color: #3d61ff !important;
  color: #ffffff;
}

.new-ui5 .header-template .btn-group-toggle-btn label.btn:hover {
  border: 1px solid #eee !important;
  color: #5E5E5E !important;
}

.new-ui5 .header-template .btn-group-toggle-btn label.btn.active:hover {
  color: #ffffff !important;
}

/* Search type Dropdown CSS */

.new-ui5 .header-template .input-autocomplete-search-type button.btn {
  height: 34px;
  margin-top: 0px !important;
  width: 90px !important;
  min-width: 90px !important;
}

.new-ui5 .header-template .input-autocomplete-search-type button.btn.btn-filter {
  color: #3d61ff !important;
  background-color: transparent !important;
  font-size: 12px;
  border-left: 1px #AAAA solid;
  min-width: 43px;
  box-shadow: none !important;
}

.new-ui5 .header-template .input-autocomplete-search-type .dropdown-toggle {
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  color: #3d61ff !important;
  font-weight: 500;
  min-width: 90px;
  text-align: center;
}

.new-ui5 .header-template .input-autocomplete-search-type .dropdown .caret {
  top: 15px;
}

.input-autocomplete-search-type .shift-input-row {
  font-size: 12px !important;
  border-left: 1px #AAAA solid;
  padding: 5px;
  line-height: 9px;
}

/* ========================================================================
* Table Exception Icon
* ======================================================================== */

.table tbody > tr> td > i.fa.fa-exclamation-circle {
  color: #E98D25;
  font-size: 20px;
}

/* ========================================================================
* Holiday settings
* ======================================================================== */

table.holiday tbody tr td.holiday-label input {
  width: 300px;
}

/* ========================================================================
* Department/Role settings
* ======================================================================== */

table.role tbody tr td.role-label,
table.role tbody tr td.role-permission,
table.department tbody tr td.department-label {
  width: 250px;
}

table.role tbody tr td.role-label input,
table.department tbody tr td.department-label input {
  width: 230px;
}

.no-confidential-access-label {
  margin-left: 8px;
  color: #FB8C00;
}

/* ========================================================================
 * Custom CSS for Export Html to Excel @ KC
 * To know about more number format, please refer to
 * http://niallodoherty.com/post.cfm/basic-html-to-excel-formatting
 * Export to excel only can put one class
 * ======================================================================== */

.num-center {
  mso-number-format: General;
  text-align: center;
}

.num-right {
  mso-number-format: General;
  text-align: right !important;
}

.num-total {
  mso-number-format: General;
  text-align: center;
  border-top: 1px solid #494949;
  border-bottom: 1px double #494949;
}

.text-center {
  mso-number-format: '\@';
  /*force text*/
  text-align: center !important;
}

.text-right {
  mso-number-format: '\@';
  /*force text*/
  text-align: right !important;
}

.text-left {
  mso-number-format: '\@';
  /*force text*/
  text-align: left !important;
}

/* ========================================================================
* QR avatar
* ======================================================================== */

@media (min-width: 768px) {
  .qr-avatar .modal-dialog {
    width: 370px;
  }
}

.qr-avatar {
  text-align: center;
}

.qr-avatar div.photo-edit {
  height: 210px;
  width: 210px;
  margin: 10px auto;
}

.qr-avatar .emp-summary-avatar {
  list-style: none;
  padding: 0;
}

.qr-avatar .emp-summary-details {
  border-top: 1px solid rgba(55, 55, 55, 0.26);
  list-style: none;
  padding: 10px 0;
}

.qr-avatar .qr-photo {
  height: 300px;
  width: 300px;
}

/* ========================================================================
* Attendance merge popup
* ======================================================================== */

.attendance-merge-container .attendance-photos label {
  display: block;
}

.attendance-merge-container .attendance-photos ul {
  list-style-type: none;
  padding: 0;
}

.attendance-merge-container .attendance-photos ul li {
  float: left;
  margin-left: 10px;
}

.attendance-merge-container .attendance-photos ul li img {
  width: 100px;
  height: 100px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  border-radius: 2px;
}

/* ========================================================================
 * Overwrite Payslip CSS for Payment Mode
 * ======================================================================== */

.payslip-payment-mode span {
  min-width: 0px !important;
  /*line-height: 0px !important;*/
  line-height: 15px !important;
  display: inline !important;
}

/* ========================================================================
 * Error message icon
 * ======================================================================== */

.col-exception-error {
  color: #E9573F;
  font-size: 20px;
}

.col-exception,
.col-exception-error {
  width: 80px;
  text-align: center;
  cursor: pointer;
}

/* ========================================================================
 * Warning message icon
 * ======================================================================== */

.col-warning {
  color: #FB8C00;
  font-size: 20px;
  width: 80px;
  text-align: center;
  cursor: pointer;
}

/* ========================================================================
 * Bank Batch List
 * ======================================================================== */

.bank-preview-badge {
  font-size: 16px;
  height: 30px;
  padding: 8px;
  border-radius: 0px 5px 5px 0px;
  padding-left: 25px;
  padding-right: 25px;
  margin-left: -15px;
}

.report-preview-badge {
  font-size: 16px;
  height: 30px;
  padding: 8px;
  border-radius: 0px 5px 5px 0px;
  padding-left: 25px;
  padding-right: 25px;
  margin-left: -15px;
  margin-top: 20px;
}

.total-bold-label {
  color: #3d61ff;
  font-weight: bold;
}

/* ========================================================================
* Herd-Dropdown-Menu
* ======================================================================== */

.icon-dropdown-menu button {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #5E5E5E !important;
  padding: 0px !important;
  min-width: 30px !important;
}

.icon-dropdown-menu .dropdown-menu > li > a {
  font-weight: 500;
  color: #323c47;
  margin: 5px;
  padding: 10px;
}

.icon-dropdown-menu .dropdown-menu > li > a > div > i {
  margin-right: 10px;
  font-size: 14px;
  color: #3d61ff;
}

.icon-dropdown-menu .dropdown-menu li:hover  a {
  background-color: #E5EFFC;
  border-radius: 2px;
}

.not-round-dropdown-menu .dropdown-menu > li > a {
  font-weight: 500;
  color: #323c47;
  margin: 5px;
  padding: 10px;
}

.dropup-menu {
  bottom: 100%;
  margin-bottom: 5px;
  top: auto !important;
  left: 0;
  right: auto !important;
}

.indent b {
  margin-left: 30px;
}

.main-category-header {
  font-weight: 700;
  padding: 15px 15px 15px 0px;
  border-bottom: 1px solid rgba(227, 235, 243, 1);
  margin-bottom: 20px;
}

.main-category-header.no-pt {
  padding-top: 0px !important;
}

.main-category-header.no-mb {
  margin-bottom: 0px !important;
}

.main-category-header.no-mt {
  margin-top: 0px !important;
}

.main-category-header i.fa-dot-circle {
  color: #3d61ff;
  font-size: 18px;
  margin-right: 10px;
}

.main-category-header i.fa-question-circle {
  color: #3d61ff;
  font-size: 18px;
  margin-right: 10px;
}

.main-category-header > .main-category-legend {
  font-weight: normal;
  font-size: 11px;
  margin-left: 5px;
}

.main-category-content {
  padding-right: 30px;
  padding-left: 30px;
}

.sub-category {
  border: 2px solid #ff8e00;
  border-radius: 3px;
  margin: 15px -15px;
  /* box-shadow: 0px 0px 2px 1px #ff8e00; */
}

.sub-category .sub-category-title {
  font-size: 14px;
  color: #363a42;
  background-color: rgba(254, 243, 229, 0.8);
  padding: 10px 15px;
  font-weight: 500;
}

.sub-category .sub-category-content {
  padding: 15px 15px 0px 15px;
}

.center-footer-container {
  margin-left: calc(58% - 200px);
  width: 200px;
  margin-top: 20px;
}

.default-hidden {
  display: none;
}

/* ========================================================================
* Table style Blue
* ======================================================================== */

.table-blue {
  border-top: 2px solid #0a7fff;
}

.table-blue thead tr th {
  height: 43px;
  background-color: #f0f7ff;
  border: none;
}

.table-blue thead > tr > th,
.table-blue tbody > tr > td {
  border-bottom: 1px solid rgba(196, 207, 219, 0.31);
}

.table-blue thead > tr > th:first-child,
.table-blue tbody > tr > td:first-child {
  border-left: 1px solid rgba(196, 207, 219, 0.31);
  border-right: 1px solid rgba(196, 207, 219, 0.31);
}

.table-blue thead > tr > th:last-child,
.table-blue tbody > tr > td:last-child {
  border-right: 1px solid rgba(196, 207, 219, 0.31);
}

.table-blue tbody tr td {
  background-color: #ffffff;
  font-size: 14px;
}

.tab-navigation {
  position: relative;
}

.tab-navigation .close-button {
  position: absolute;
  top: 0px;
  right: 10px;
  color: #3d61ff;
}

.report-emp-detail {
  border-right: 1px solid rgba(0, 0, 0, 0.09);
  margin-top: 20px;
}

.action-col {
  color: #3d61ff;
}

/* ========================================================================
* Herd Collapse Directive
* ======================================================================== */

.herd-collapse-hide {
  display: none;
}

.modal-exclamation-icon {
  font-size: 16px;
}

.btn-audit {
  position: absolute;
  top: 5px;
  font-size: 16px;
  margin: 0;
  right: 5px;
  color: #5e5e5e;
}

.btn-audit i.fa-history {
  font-weight: bold;
}

.btn-audit ul.dropdown-menu {
  right: -5px;
  left: auto;
  padding: 8px 8px 0px 8px;
  border-radius: 3px;
  top: 28px;
  box-shadow: 1px 1px 3px #DEDEDE;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
}

.btn-audit ul.dropdown-menu span.time {
  color: #BCBCBC;
  font-weight: 400;
  display: block;
}

.btn-audit ul.dropdown-menu span.action {
  color: #5e5e5e;
  display: block;
  padding-left: 10px;
}

.btn-audit ul.dropdown-menu span.empty {
  color: #5e5e5e;
  display: block;
  padding: 10px;
  font-size: 15px;
}

.btn-audit ul.dropdown-menu li {
  position: relative;
  height: 50px;
  width: 170px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* Audit log for roster */

wave-spinner.small .wave-spinner {
  margin: 0 auto;
}

.input-multiple-select-object {
  display: inline-block;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.custom-dropdown-open.input-multiple-select-object {
  border: 0px !important;
}

.custom-dropdown-open .custom-dropdown-toggle {
  background: white !important;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.27);
  z-index: 1004;
}

.custom-dropdown-open .custom-dropdown-filter {
  display: block !important;
  box-shadow: -2px 0 1px -2px rgba(0, 0, 0, 0.27), 2px 0 2px -2px rgba(0, 0, 0, 0.27);
}

.custom-dropdown-open .custom-dropdown-menu {
  display: block !important;
}

.custom-dropdown-filter {
  position: absolute;
  display: none;
  background: white;
  width: 100%;
  height: 50px;
  z-index: 1005;
  padding: 7px 10px;
  top: 34px;
}

.custom-dropdown-filter div {
  border-radius: 3px;
  border: 1px solid rgba(201, 201, 201, 1);
  padding: 5px 5px;
}

.custom-dropdown-filter i {
  margin-left: 5px;
  color: rgba(0, 122, 255, 1);
}

.custom-dropdown-filter input:focus {
  outline: none;
  border: 0px !important;
}

.custom-dropdown-filter input {
  width: calc(100% - 23px);
  display: inline-block;
  padding-left: 7px;
  border: 0px;
}

.custom-dropdown-menu {
  margin-top: 32px;
  position: absolute;
  display: none;
  background: white;
  z-index: 1006;
  list-style: none;
  background-color: #fff;
  max-height: 200px;
  overflow-x: hidden;
  padding: 0px;
  border-radius: 0px;
  font-size: 12px;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.27);
  width: 100%;
  top: 50px;
}

.custom-dropdown-menu .highlight-search-text {
  color: #3d61ff;
}

.custom-dropdown-menu > li:hover {
  background-color: #E5EFFC;
  border-radius: 2px;
  cursor: default;
}

.custom-dropdown-menu > li {
  padding: 10px;
}

.custom-dropdown-menu > li > div > span {
  font-weight: 500;
  color: #323c47;
  margin: 5px;
}

.add_assign_user .custom-dropdown-menu > li > div > span {
  margin: 2px !important;
}

.custom-dropdown-menu > li > div > span {
  font-size: 13px !important;
}

.custom-dropdown-menu li {
  position: relative;
}

.custom-dropdown-menu .chk-box {
  display: inline-block;
  margin-left: 2px;
  pointer-events: none;
}

.custom-dropdown-menu::-webkit-scrollbar {
  width: 8px;
}

.custom-dropdown-menu::-webkit-scrollbar-thumb {
  background: #888;
}

.custom-dropdown-menu::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.custom-dropdown-toggle {
  width: 100%;
  background-color: transparent !important;
  text-align: left;
  border: 1px solid transparent;
  color: #323c47 !important;
  font-size: 14px !important;
  font-weight: 500;
  height: 34px;
  padding: 6px 15px;
}

.custom-dropdown-toggle i {
  margin-left: 7px;
  font-size: 12px !important;
  float: right;
  margin-top: 5px;
}

.multi-select-table-new {
  max-width: 700px;
  width: 100%;
}

.multi-select-table-container-by-group .multi-select-table-new,
.multi-select-table-container-full-width .multi-select-table-new {
  max-width: -webkit-fill-available;
}

.multi-select-table-new > tbody > tr > td {
  height: 60px;
  padding-bottom: 10px;
}

.multi-select-table-new > tbody > tr > td > .multi-select-table-outer {
  height: 70px;
}

.multi-select-table-new > tbody > tr > td > .multi-select-table-outer > .multi-select-table-inner {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding: 10px 15px;
  margin: 10px 0px 0px 0px;
  height: 80px;
}

.multi-select-table-new > tbody > tr > td:first-child > .multi-select-table-outer > .multi-select-table-inner {
  margin: 10px 0px 0px 10px !important;
  border-radius: 5px 0px 0px 5px !important;
}

.multi-select-table-new > tbody > tr > td:last-child > .multi-select-table-outer > .multi-select-table-inner {
  margin: 10px 10px 0px 0px !important;
  border-radius: 0px 5px 5px 0px !important;
}

.multi-select-table-new > thead > tr > th {
  padding: 0px 0px 5px 0px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.multi-select-table-new th span {
  font-size: 14px !important;
}

.multi-select-table-new td.photo {
  width: 90px !important;
}

.multi-select-table-new div.checkbox {
  text-align: center;
}

.multi-select-table-new div.multi-select-table-inner.checkbox {
  padding-top: 15px !important;
}

.multi-select-table-new div.details {
  padding-top: 15px !important;
}

.multi-select-table-new > tbody > tr:hover > td > .multi-select-table-outer > .multi-select-table-inner,
.multi-select-table-new > tbody > tr.user-selected > td > .multi-select-table-outer > .multi-select-table-inner {
  border-radius: 3px;
  background-color: rgba(238, 245, 255, 1) !important;
  color: #5E5E5E !important;
}

.multi-select-table-new .col-name {
  width: 95px !important;
  min-width: 95px !important;
  padding-left: 20px !important;
}

.multi-select-table-new > thead > tr.bg-default-color {
  background-color: #f9fbfd;
}

.multi-select-table-new > thead > tr.bg-primary-color {
  background-color: #3d61ff;
  color: #fff;
}

.multi-select-table-new .multi-select-table-inner .detail-email {
  color: rgba(161, 161, 161, 1);
  font-size: 12px;
}

.multi-select-filter-object {
  margin-left: 9px;
}

.multi-select-filter {
  background-color: rgba(229, 239, 252, 0.53);
  color: rgba(0, 122, 255, 1);
  padding: 5px 12px;
  border-radius: 3px;
  font-size: 14px;
  margin-right: 10px;
  margin-bottom: 5px;
  display: inline-block;
  font-weight: 450;
  border: 1px solid rgba(208, 224, 240, 1);
}

.multi-select-filter .fa-times {
  color: #E9573F !important;
  margin-right: 8px;
  cursor: pointer;
}

.multi-select-clear-filter {
  display: inline-block;
  margin-left: 12px;
  width: 40px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  height: 33px;
  text-align: center;
  margin-right: 10px;
  cursor: pointer;
}

.multi-select-clear-filter i {
  margin-top: 10px;
}

.filter-avail i {
  color: rgba(0, 122, 255, 1) !important;
}

.multi-select-search-name {
  border: 1px solid rgba(0, 0, 0, 0.2);
  display: inline-block;
  vertical-align: top;
  width: 350px;
  padding: 5px 10px;
  margin-left: 10px;
  height: 34px;
  border-radius: 3px;
}

.multi-select-search-name i {
  color: rgba(0, 122, 255, 1);
}

.multi-select-search-name input {
  width: calc(100% - 23px);
  display: inline-block;
  padding-left: 7px;
  border: 0px;
}

.multi-select-search-name input:focus {
  outline: none;
  border: 0px !important;
}

.multi-select-table-panel {
  border: 1px solid rgba(0, 0, 0, 0.05);
  max-width: 700px;
  margin-left: 10px;
  margin-top: 10px;
  border-radius: 3px;
}

.multi-select-table-container-by-group .multi-select-table-panel,
.multi-select-table-container-full-width .multi-select-table-panel {
  max-width: -webkit-fill-available;
  margin-left: 0px;
}

/* Chatservice */

.zopim[data-test-id=ChatWidgetButton] {
  display: none;
}

/* Prevent float footer block the table row */

.iras-ir8alist-table {
  padding-bottom: 110px;
}

.payslip-navigation a {
  min-width: 135px;
  margin: 0 4px;
  color: black;
  float: left;
  padding: 7px 10px 10px 15px;
  text-decoration: none;
  border: 1px solid #ddd;
  border-radius: 3px;
  height: 34px;
}

.payslip-navigation a.active {
  background-color: #3d61ff;
  color: #ffffff;
}

.payslip-navigation a:hover:not(.active) {
  background-color: #3d61ff;
  color: #ffffff;
}

.select-wrapper input {
  width: 100%;
  height: 35px;
  font-size: 18px;
  padding: 10px;
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;
  /* Opera/IE 8+ */
  display: block;
  font-weight: 400;
  line-height: 1.6;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: .25rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.select-wrapper .searchable-selectbox-input:focus-visible {
  outline-color: rgb(206, 212, 218);
}

.select-wrapper .searchable-selectbox-input::placeholder {
  opacity: 0.5;
}

.select-wrapper .searchable-selectbox-input::-ms-input-placeholder {
  opacity: 0.5;
}

.searchable-dropdown {
  left: inherit;
}

.scrollable-menu .highlight-search-text {
  color: #3d61ff;
}

.select-wrapper .scrollable-menu {
  z-index: 1000;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  text-align: left;
  list-style: none;
  width: 100%;
  background-color: #fff;
  border-top: 1px solid #DDD;
}

.scrollable-menu > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: 400;
  line-height: 1.42857143;
  color: #333;
  white-space: nowrap;
}

.searchable-input-icons i {
  position: absolute;
  right: 10px;
  top: 8px;
}

.searchable-highlight-text {
  text-decoration: underline;
}

.table-bordered {
  margin-top: 20px;
}

.table-bordered > thead > tr {
  border-top: 2px solid rgba(0, 112, 255, 1);
}

.table-bordered > thead > tr > th {
  padding: 10px;
  border: 1px solid #e9ecef !important;
  border-bottom: 2px solid #f3f3f4 !important;
  background-color: #F0F7FF !important;
  font-weight: bold;
}

.table-bordered > tbody > tr > td {
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid #e9ecef !important;
}

.table-bordered > tbody > tr:nth-child(even) > td {
  /*background-color: #F0F7FF !important;*/
}

.table-bordered > tbody > tr:nth-child(odd) > td {
  background-color: #FFFFFF !important;
}

.multi-input-select-filter > div > .custom-dropdown-toggle {
  background-color: #FFFFFF !important;
}

/* ========================================================================
* Table with border
* ======================================================================== */

.table-import > thead > tr > th {
  border-left: 1px solid rgba(227, 235, 243, 1) !important;
  border-top: 1px solid rgba(227, 235, 243, 1)!important;
  font-size: 14px !important;
}

.table-import > tbody > tr > td {
  border-left: 1px solid rgba(227, 235, 243, 1) !important;
}

/* ========================================================================
* Page Navigation
* ======================================================================== */

.page-navigate-wrapper .page-navigate-sidebar {
  -webkit-flex: 10%;
  -ms-flex: 10%;
  -moz-flex: 10%;
  border-right: 1px solid #e9ecef;
  transition: all 0.1s;
  margin-top: -10px;
  margin-left: -40px;
  min-width: 190px;
  max-width: 190px;
  margin-right: 20px;
  padding: 10px;
}

.page-navigate-wrapper .page-navigate-content {
  -webkit-flex: 90%
    -ms-flex: 90%;
  -moz-flex: 90%;
}

.page-navigate-wrapper.collapsed .page-navigate-content {
  -webkit-flex: 100%;
  -ms-flex: 100%;
  -moz-flex: 100%;
}

.page-navigate-wrapper.collapsed .page-navigate-sidebar {
  -webkit-flex: 0%;
  -ms-flex: 0%;
  -moz-flex: 0%;
  min-width: 0px;
  border-right: 0px;
}

.page-navigation .page-navigate-header-container {
  text-align: center;
}

.page-navigation .page-navigate-header-container a {
  color: #0A7FFF;
}

.page-navigation .page-navigate-header {
  font-size: 18px;
  font-weight: bold;
  padding: 15px;
  color: #363a42;
}

.page-navigation .page-navigate-input-wrapper {
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}

.page-navigation input.page-navigate-input-box {
  width: 100%;
  border-radius: 5px;
  background-color: #ffffff;
  border: 1px solid #e9ecef !important;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 32px;
  padding-right: 20px;
}

.page-navigation input.page-navigate-input-box::placeholder {
  color: #a2a7ae;
}

.page-navigation .page-navigate-input-container {
  padding: 0px;
}

.page-navigation .page-navigate-input-wrapper i {
  position: absolute;
  left: auto;
  top: 12px;
  font-size: 17px;
}

.page-navigation .page-navigate-input-wrapper i.glyphicon-search {
  left: 20px !important;
  color: #0A7FFF;
}

.page-navigation .page-navigate-input-wrapper i.fa-times {
  color: #E9573F !important;
  right: 20px;
  cursor: pointer;
}

.page-navigation .page-navigate-input-container ul {
  padding-top: 10px;
  height: 1800px;
  overflow: auto;
}

.page-navigation .page-navigate-input-container li {
  font-weight: bold;
}

.page-navigation .page-navigate-input-container li:hover,
.page-navigate-input-container .active {
  background-color: #F0F7FF;
  border-right: 3px solid #0A7FFF;
  cursor: default;
}

.page-navigation .page-navigate-scrollable-menu {
  padding-right: 1px;
}

.page-navigation .page-navigate-scrollable-menu::-webkit-scrollbar {
  width: 8px;
}

.page-navigation .page-navigate-scrollable-menu::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.page-navigation .page-navigate-scrollable-menu::-webkit-scrollbar-thumb {
  background: #888;
}

.page-navigation .page-navigate-scrollable-menu::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.page-navigation .page-navigate-link a:hover {
  text-decoration: none;
}

.page-navigation .page-navigate-link.active a:hover {
  cursor: default;
}

.page-navigation .page-navigate-link a {
  display: block;
  color: #5E5E5E;
  padding: 10px;
}

.page-navigation .page-navigate-timestamp {
  font-size: 11px;
  display: block;
  text-align: left;
  color: #a2a7ae;
  font-weight: normal;
}

.page-navigation .navigation-collapse-button {
  position: absolute;
  background-color: #F0F7FF;
  padding: 15px 12px 15px 2px;
  left: 190px;
  border-radius: 0px 10px 10px 0px;
  top: 39px;
  border-top: 2px solid #e9ecef;
  border-right: 2px solid #e9ecef;
  border-bottom: 2px solid #e9ecef;
  box-shadow: rgba(0, 0, 0, 0.04) 0px 2px 4px 0px;
  cursor: pointer;
}

.page-navigation .navigation-collapse-button i {
  padding-left: 3px;
  color: #3d61ff;
}

.page-navigate-wrapper.collapsed .navigation-collapse-button {
  left: 0px !important;
}

.page-navigate-wrapper.collapsed .navigation-collapse-button i {
  -webkit-transform: rotate(180deg);
}

.page-navigation .horizontal-navigation-links .fa-chevron-left {
  text-align: left;
}

.page-navigation .horizontal-navigation-links .fa-chevron-right {
  text-align: right;
}

.page-navigation .horizontal-navigation-links i {
  font-size: 21px;
  color: #0A7FFF;
  padding-top: 10px;
}

.page-navigation .horizontal-navigation-title {
  font-size: 11px;
  color: #a2a7ae;
  font-weight: normal;
}

.page-navigation .horizontal-navigation-content {
  font-weight: bold;
  color: #5E5E5E;
  font-size: 13px;
  padding-left: 2px;
}

.page-navigation .horizontal-navigation-seperator {
  border-right: 1px solid #DDD;
}

.page-navigation .horizontal-navigation-link-item {
  text-decoration: none !important;
}

/*
Reset Password page
*/

.email-verified {
  color: #51B963;
  font-size: 17px;
  width: 20px;
  height: 20px;
  float: left;
  margin-top: -5px;
}

.location-report-column {
  padding: 0px 14px;
}

/* ========================================================================
* Import pay item
* ======================================================================== */

.import-pay-item-success-list {
  width: 100%;
  display: inline-block;
  background-color: #EDFBF5;
  border-color: #EDFBF5;
  color: #03C272;
  padding: 10px;
  margin-top: 5px;
}

.import-pay-item-success-list > .icon-div {
  font-size: 20px;
  float: left;
}

.import-pay-item-success-list > .msg-div {
  width: 94%;
  float: right;
}

.import-pay-item-success-list > .msg-div > .msg-title {
  font-weight: bold;
}

.import-pay-item-exception-list {
  width: 100%;
  display: inline-block;
  background-color: #feeef2;
  border-color: #feeef2;
  color: #f80f4b;
  padding: 10px;
  margin-top: 5px;
}

.import-pay-item-exception-list > .icon-div {
  font-size: 20px;
  float: left;
}

.import-pay-item-exception-list > .msg-div {
  width: 94%;
  float: right;
}

.import-pay-item-exception-list > .msg-div > .msg-title {
  font-weight: bold;
}

.icon-dropdown-menu .btn-invert-payroll-batch-menu {
  color: #868686 !important;
  background-color: #ffffff !important;
  box-shadow: 0px 3px 3px rgba(0,0,0,0.08) !important;
  border: 1px solid rgba(156, 156, 156, 0.6) !important;
  padding: 0px !important;
  min-width: 30px !important;
}

.import-pay-item-exception-table-container {
  border: 2px solid #F80F4B;
  border-radius: 3px;
  margin-top: 5px;
}

.import-pay-item-exception-table > thead > tr > th {
  background-color: #FEEEF2 !important;
  border: none !important;
}

.import-pay-item-exception-table > thead > tr > th:first-child {
  padding-left: 15px !important;
}

.import-pay-item-exception-table > tbody > tr > td {
  border: none !important;
}

.import-pay-item-exception-table > tbody > tr > td:first-child {
  padding-left: 15px !important;
}

/* ========================================================================
* Import payslip history
* ======================================================================== */

.import-payslip-exceptions > ol {
  list-style-type: decimal !important;
  padding: 4px 0px 12px 10px !important;
}

.input-custom-select {
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='rgb(85, 85, 85)' width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: top 5px right 6px;
  background-size: 19px;
}

/* Temporary hardcoded css to disable roster button */

.disabled .enable-roster ul.selector-tab li:last-child {
  cursor: default;
  background-color: #f5f5f5;
  pointer-events: none;
  color: #999;
  border: 1px solid #999;
}

.nowrap-ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/*Address form */

span.btn-allow-edit {
  position: absolute;
  top: 9px;
  right: 9px;
  color: #a74545;
  font-size: 11px;
}

/* ========================================================================
* Progress Bar
* ======================================================================== */

.bs-wizard {
  border-bottom: solid 1px #e0e0e0;
  padding: 10px 0 10px 0;
  border-bottom: 0;
}

.bs-wizard > .bs-wizard-step {
  padding: 0;
  position: relative;
}



@media (min-width: 0px) {
  .bs-wizard > .bs-wizard-step .bs-wizard-stepnum {
    color: #595959;
    font-size: 9px;
    margin-bottom: 5px;
    font-weight: bold;
  }

  .bs-wizard > .bs-wizard-step .bs-wizard-info {
    color: #999;
    font-size: 7px;
  }
}

@media (min-width: 1000px) {
  .bs-wizard > .bs-wizard-step .bs-wizard-stepnum {
    color: #595959;
    font-size: 13px;
    margin-bottom: 5px;
    font-weight: bold;
  }

  .bs-wizard > .bs-wizard-step .bs-wizard-info {
    color: #999;
    font-size: 9px;
  }
}

@media (min-width: 1400px) {
  .bs-wizard > .bs-wizard-step .bs-wizard-stepnum {
    color: #595959;
    font-size: 13px;
    margin-bottom: 5px;
    font-weight: bold;
  }

  .bs-wizard > .bs-wizard-step .bs-wizard-info {
    color: #999;
    font-size: 11px;
  }
}

@media (min-width: 1600px) {
  .bs-wizard > .bs-wizard-step .bs-wizard-stepnum {
    color: #595959;
    font-size: 13px;
    margin-bottom: 5px;
    font-weight: bold;
  }

  .bs-wizard > .bs-wizard-step .bs-wizard-info {
    color: #999;
    font-size: 14px;
  }
}

.bs-wizard > .bs-wizard-step > .bs-wizard-dot,
.bs-wizard-check,
.bs-wizard-times {
  position: absolute;
  width: 30px;
  height: 30px;
  display: block;
  background: #4B7CBF;
  top: 25px;
  left: 50%;
  margin-top: -15px;
  margin-left: -15px;
  border-radius: 50%;
}

.bs-wizard > .bs-wizard-step > .bs-wizard-dot:after {
  content: ' ';
  width: 8px;
  height: 8px;
  background: #FFFFFF;
  border-radius: 50px;
  position: absolute;
  top: 11px;
  left: 11px;
}

.bs-wizard > .bs-wizard-step > .progress {
  position: relative;
  border-radius: 0px;
  height: 3px;
  box-shadow: none;
  margin: 23px 0;
}

.bs-wizard > .bs-wizard-step > .progress > .progress-bar {
  width: 0px;
  box-shadow: none;
  background: #4B7CBF;
}

.bs-wizard > .bs-wizard-step.complete > .progress > .progress-bar {
  width: 100%;
  background-color: #03C272;
}

.bs-wizard > .bs-wizard-step.active > .progress > .progress-bar {
  width: 50%;
}

.bs-wizard > .bs-wizard-step.declined > .progress > .progress-bar {
  width: 50%;
  background-color: #F80F4B;
}

.bs-wizard > .bs-wizard-step:first-child.active > .progress > .progress-bar {
  width: 0%;
}

.bs-wizard > .bs-wizard-step:last-child.active > .progress > .progress-bar {
  width: 100%;
}

.bs-wizard > .bs-wizard-step.complete > .bs-wizard-check {
  background-color: #03C272;
}

.bs-wizard > .bs-wizard-step.complete > .bs-wizard-check > i {
  color: #FFFFFF;
  margin-left: 8px;
  margin-top: 9px;
}

.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot {
  background-color: #f5f5f5;
}

.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot:after {
  opacity: 0;
}

.bs-wizard > .bs-wizard-step.declined > .bs-wizard-times {
  background-color: #F80F4B;
}

.bs-wizard > .bs-wizard-step.declined > .bs-wizard-times > i {
  color: #FFFFFF;
  margin-left: 10px;
  margin-top: 9px;
}

.bs-wizard > .bs-wizard-step:first-child  > .progress {
  left: 50%;
  width: 50%;
}

.bs-wizard > .bs-wizard-step:last-child  > .progress {
  width: 50%;
}

.bs-wizard > .bs-wizard-step a.bs-wizard-dot {
  pointer-events: none;
}

.bs-wizard > .bs-wizard-step.complete > .progress > .progress-bar-complete-active-part-1 {
  background: linear-gradient(90deg, rgba(3,194,114,1) 50%, rgba(75,186,191,1) 100%);
}

.bs-wizard > .bs-wizard-step.active > .progress > .progress-bar-complete-active-part-2 {
  background: linear-gradient(90deg, rgba(75,186,191,1) 25%, rgba(75,124,191,1) 100%);
}

.bs-wizard > .bs-wizard-step.complete > .progress > .progress-bar-complete-declined-part-1 {
  background: linear-gradient(90deg, rgba(3,194,114,1) 50%, rgba(204,47,83,1) 100%);
}

.bs-wizard > .bs-wizard-step.declined > .progress > .progress-bar-complete-declined-part-2 {
  background: linear-gradient(90deg, rgba(204,47,83,1) 70%, rgba(248,15,75,1) 100%);
}

.bs-wizard > .bs-wizard-step:last-child.declined > .progress > .progress-bar {
  width: 100%;
}

/*END Form Wizard

/* ========================================================================
* Badge
* ======================================================================== */

.badge-pending {
  color: #FFF;
  background: #FB8C00;
  border-radius: 4px;
  height: 28px;
  line-height: 20px;
}

.badge-approved {
  color: #FFF;
  background: #03C272;
  border-radius: 4px;
  height: 28px;
  line-height: 20px;
}

.badge-rejected {
  color: #FFF;
  background: #F80F4B;
  border-radius: 4px;
  height: 28px;
  line-height: 20px;
}

.badge-info {
  color: #FFF;
  background: rgba(0, 122, 255, 1);
  border-radius: 4px;
  height: 28px;
  line-height: 20px;
}

.badge-grey {
  color: #FFF;
  background: rgba(161, 161, 161, 1);
  border-radius: 4px;
  height: 28px;
  line-height: 20px;
}

.badge-type {
  font-weight: bold;
}

.badge-type i {
  font-size: 15px;
  margin-right: 5px;
}

/* ========================================================================
* Font
* ======================================================================== */

.font-red {
  color: #F80F4B;
  font-weight: bold;
}

.font-grey {
  color: rgba(161, 161, 161, 1) !important;
}

.font-blue {
  color: rgba(0, 122, 255, 1) !important;
  font-weight: bold;
}

.blue-label label {
  color: rgba(0, 122, 255, 1) !important;
  font-weight: bold;
}

.blue-label .sub-label {
  color: rgba(135 200 254);
}

.layout-ui5 .select-wrapper .dropdown-menu .callback-link {
  color: rgba(0, 122, 255, 1);
}

.global-approver-container {
  width: 500px;
  margin-left: 30px;
  margin-top: 10px;
}

.input-searchbox {
  border: 1px solid rgba(0, 0, 0, 0.2);
  display: inline-block;
  vertical-align: top;
  width: calc(100% - 20px);
  padding: 0px 10px;
  margin-left: 10px;
  height: 34px;
  border-radius: 3px;
  margin-top: 11px;
  margin-bottom: 10px;
}

.input-searchbox i {
  color: rgba(0, 122, 255, 1);
}

.input-searchbox input {
  width: calc(100% - 23px);
  display: inline-block;
  padding-left: 7px;
  border: 0px;
  height: 30px;
  margin-top: 1px;
}

.input-searchbox input:focus {
  outline: none;
  border: 0px !important;
}

/* ========================================================================
* Input select new object addable callback button
* ======================================================================== */

.layout-ui5 .select-wrapper .scrollable-menu .callback-link {
  color: rgba(0, 122, 255, 1);
}

/* ========================================================================
* Input tag directive
* ======================================================================== */

.tag-wrapper {
  padding: 5px 10px 5px 10px;
  border: 1px solid #DDD;
  border-radius: 2px;
}

.tag-wrapper .select2-container-multi .select2-choices .select2-search-choice {
  padding: 7px 10px 7px 20px !important;
  margin: 4px 8px 4px 0 !important;
  color: rgba(0, 122, 255, 1);
  background-image: none;
  border: 1px solid rgba(208, 224, 240, 1);
  background-color: rgba(229, 239, 252, 0.53);
  border-radius: 4px;
}

.tag-wrapper .select2-container-multi .select2-choices .select2-search-choice div {
  padding-left: 10px;
  padding-right: 8px;
  font-size: 13px;
  font-weight: 410;
}

.tag-wrapper .select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close {
  background: none !important;
  text-decoration: none !important;
  margin: 0px 5px 0 8px;
}

.tag-wrapper .select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f00d";
  font-size: 17px;
  color: #f80f4b !important;
}

/* ========================================================================
* Notification
* ======================================================================== */

.notification-list .media-list > a {
  border-bottom: none;
  cursor: default;
}

.notification-list .media-list.small > .media .media-object {
  vertical-align: middle;
  display: table-cell;
}

.notification-list  .media-list > .media > .media-body > .media-text {
  min-width: 180px;
}

.floating-warning {
  position: absolute;
  left: 50px;
  padding-top: 3px;
  color: #E9573F;
  font-size: 10px;
}

/* ========================================================================
* General Report Summary table
* ======================================================================== */

.table-summary > tr {
  border: 1px solid #f3f3f4 !important;
}

.table-summary > tr > td {
  padding: 10px;
  border-right: 1px solid #f3f3f4;
}

/* ========================================================================
* Custom CSS for notification settings
* ======================================================================== */

ul.notification-list {
  list-style-type: none;
  padding: 0;
}

.notification .main-category .main-category-header .title,
.notification .main-category .main-category-header .email,
.notification .main-category .main-category-header .mobile {
  margin-left: -10px;
}

@media (max-width: 992px) {
  .notification .main-category .main-category-header .mobile {
    margin-left: -20px;
  }
}

/* ========================================================================
* Leave Assign Children
* ======================================================================== */

.assign-children-success {
  padding: 5px;
  color: #67be62;
}

.assign-children-warning {
  padding: 5px;
  color: #FB8C00;
}

.modal-xlg {
  width: 70%;
}

.modal-xxlg {
  width: 95%;
}

.modal-first-time-login {
  width: 500px;
}

.modal-permission-table {
  width: 98%;
}

.modal-festival {
  width: 1030px;
  height: 500px;
}

.modal-festival .modal-content {
  border: none !important;
  background-color: transparent !important;
}

.modal-festival .modal-content .btn-close-modal > span {
  position: absolute;
  right: 15px;
  top: 12px;
  font-size: 17px;
  cursor: pointer;
}

.modal-festival .modal-content .btn-festival {
  position: absolute;
  font-size: 21px;
  padding: 10px 20px;
  height: 45px;
  border-radius: 5px;
}

/* ========================================================================
* Organization File
* ======================================================================== */

.org-file .folder-expired {
  opacity: 0.7;
}

.org-file .org-file-list .btn {
  min-width: 0px !important;
}

.table-files > tbody > tr > td > .clickable-link {
  vertical-align: super;
}

.btn-new-folder i {
  font-size: 15px;
  vertical-align: top;
}

.org-file .folder-container {
  width: 250px;
  display: inline-block;
}

.org-file .folder {
  border: 2px solid rgb(61 97 255);
  margin: 20px;
  padding: 20px;
  border-radius: 5px;
  color: white;
  background: #3d61ff;
  cursor: pointer;
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0,0,0,0.3), 0 0 4px 1px rgba(0,0,0,0.2);
  min-height: 145px;
  position: relative;
}

.org-file .folder.expired {
  border: 2px solid #b1b1b1;
  background: #b1b1b1;
}

.org-file .folder:hover {
  background: rgb(61, 97, 255, 0.7) !important;
}

.org-file .folder.expired:hover {
  background: rgb(177, 177, 177, 0.7) !important;
}

.org-file .folder .note {
  font-size: 10.5px;
}

.org-file .folder .file-count {
  position: absolute;
  left: 55px;
  height: 22px;
  background: #e6a716;
  border-radius: 100%;
  top: 15px;
  padding: 1px 8px;
  font-size: 12px;
  text-align: center;
  color: white;
  font-weight: bold;
}

.org-file .folder .btn-file-edit {
  position: absolute;
  right: 35px;
  top: 7px;
  background: white;
  border-radius: 100%;
  height: 22px;
  width: 22px;
}

.org-file .folder .btn-file-edit i {
  color: rgb(61 97 255);
  vertical-align: top;
  margin-right: 5px;
  margin-top: -2px;
}

.org-file .folder .btn-file-edit .scrollable-menu {
  top: 25px;
  right: 7px;
}

.org-file .folder .file-info {
  position: absolute;
  right: 5px;
  top: 7px;
  background: white;
  border-radius: 100%;
  height: 22px;
  width: 22px;
}

.org-file .folder .file-info i {
  color: rgb(61 97 255);
  font-size: 11px;
  margin-left: 1px;
}

.org-file .folder .folder-description {
  margin-top: 10px;
  text-align: left;
  background: white;
  border: 1px solid #5E5E5E;
  color: #5E5E5E;
  padding: 5px 10px;
  font-size: 11px;
}

.org-file .folder .folder-valid-till {
  position: absolute;
  top: 67px;
  left: 105px;
  font-size: 10px;
  background: #51B963;
  padding: 0px 15px;
  border-radius: 5px;
  font-weight: bold;
}

.org-file .folder .folder-valid-till.expired {
  background: red;
}

.org-file .folder .fa-folder-open {
  font-size: 60px;
}

.table tr.highlight {
  font-weight: bold;
  /*    border-top: 2px double #000;*/
}

/* ========================================================================
* Permission Table
* ======================================================================== */

.container-role-permission-info {
  overflow-x: auto;
  color: #484848 !important;
}

.container-role-permission-info::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.container-role-permission-info::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.container-role-permission-info::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: rgba(61, 97, 255, 1);
}

.container-role-permission-info::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.table.table-role-permission-info {
  border-collapse: separate;
  border-spacing: 0 12px;
  margin-top: -12px;
}

.table.table-role-permission-info tr {
  box-shadow: 4px 2px 6px 0px rgba(66, 79, 91, 0.15);
}

.table.table-role-permission-info thead tr > th,
.table.table-role-permission-info tbody tr > td {
  padding: 10px;
  text-align: left;
  font-size: 11px !important;
  font-weight: 500;
}

.table.table-role-permission-info thead tr > th {
  background-color: #eaeaea !important;
  color: #767676 !important;
}

.table.table-role-permission-info tbody tr > td {
  border-top: 1px solid #d9e7fe !important;
  border-bottom: 1px solid #d9e7fe !important;
}

.table.table-role-permission-info tbody tr > td:first-child {
  border-left: 1px solid #d9e7fe !important;
}

.table.table-role-permission-info tbody tr > td:last-child {
  border-right: 1px solid #d9e7fe !important;
}

.table.table-role-permission-info thead tr > th:first-child,
.table.table-role-permission-info tbody tr > td:first-child {
  border-radius: 5px 0 0 5px;
}

.table.table-role-permission-info thead tr > th:last-child,
.table.table-role-permission-info tbody tr > td:last-child {
  border-radius: 0 5px 5px 0;
}

.table.table-role-permission-info thead tr > th .subtitle,
.table.table-role-permission-info tbody tr > td .subtitle {
  font-size: 9px !important;
  color: #888888;
}

.table.table-role-permission-info > tbody tr:hover td {
  background-color: rgb(245,245,245);
}

.table.table-role-permission-info thead tr > th.th-permission {
  width: 120px !important;
}

.table.table-role-permission-info thead tr > th.th-standard {
  min-width: 60px !important;
  max-width: 100px !important;
}

.table.table-role-permission-info thead tr > th.th-long {
  min-width: 100px !important;
  max-width: 150px !important;
}

.permission-modal .highlight {
  color: #3d61ff;
}

.permission-modal .updated-on {
  float: right;
  font-size: 12px;
  margin-top: 5px;
  margin-right: 25px;
}

.table.table-role-permission-info .label-custom {
  width: 86px;
  text-align: center;
  padding: 2px;
  border-radius: 33px;
}

.table.table-role-permission-info .label-custom.label-yes {
  background-color: #0ebe5a;
  color: #fff;
  border: 2px solid #0ebe5a;
}

.table.table-role-permission-info .label-custom.label-no {
  background-color: #fff;
  color: #ed244f;
  border: 2px solid #ed244f;
}

.table.table-role-permission-info .no-access {
  color: #ed244f !important;
  width: min-content;
}

.table.table-role-permission-info .view-only {
  width: min-content;
}

.table.table-role-permission-info .fa-info-circle {
  font-size: 12px;
  color: #767676;
}

.table.table-role-permission-info .th-settings .title {
  position: relative;
}

.table.table-role-permission-info .info-settings {
  position: absolute;
  top: -12px;
  left: 14px;
}

.table.table-role-permission-info .ml-5 {
  margin-left: 5px;
}

.table.table-role-permission-info .pr-10 {
  padding-right: 10px;
}

.table.table-role-permission-info td>div.vertical-middle {
  display: table-cell;
  vertical-align: middle;
}

.sidebar-menu .tooltip-custom .beta,
.table.table-role-permission-info .tooltip-custom .beta {
  background-color: #ffa51f;
  color: white;
  font-size: 8px;
  padding: 4px 7px;
  border-radius: 5px;
  font-weight: bolder !important;
}

.sidebar-menu .tooltip-custom,
.table.table-role-permission-info .tooltip-custom {
  cursor: pointer;
  position: relative;
  display: inline-block;
  opacity: 1;
}

.sidebar-menu .tooltip-custom .tooltiptext,
.table.table-role-permission-info .tooltip-custom .tooltiptext {
  visibility: hidden;
  width: 180px;
  background-color: #fff;
  color: #484848;
  text-align: left;
  border-radius: 6px;
  padding: 6px 8px;
  position: absolute;
  z-index: 999;
  top: 180%;
  left: 0;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
  border: 1px solid #767676;
  font-size: 9px;
  font-weight: normal;
}

.sidebar-menu .tooltip-custom .tooltiptext::before,
.table.table-role-permission-info .tooltip-custom .tooltiptext::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 8px solid #fff;
  position: absolute;
  top: -4px;
  left: 38%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 5;
}

.sidebar-menu .tooltip-custom .tooltiptext::after,
.table.table-role-permission-info .tooltip-custom .tooltiptext::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 38%;
  margin-left: -5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #767676;
}

.sidebar-menu .tooltip-custom .tooltiptext {
  text-transform: none !important;
}

.sidebar-menu .tooltip-custom:hover .tooltiptext,
.table.table-role-permission-info .tooltip-custom:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.sidebar-menu .th-settings .tooltip-custom .tooltiptext::before,
.table.table-role-permission-info .th-settings .tooltip-custom .tooltiptext::before {
  left: 45%;
}

.sidebar-menu .th-settings .tooltip-custom .tooltiptext::after,
.table.table-role-permission-info .th-settings .tooltip-custom .tooltiptext::after {
  left: 45%;
}

.sidebar-circle .sidebar-menu > li > a > .custom-icon {
  border: 0px;
  border-radius: 0;
  margin-right: 15px;
  border-radius: 0;
  height: 32px;
  width: 35px;
  display: inline-block;
  vertical-align: middle;
}

.sidebar-menu .tooltip-custom {
  vertical-align: text-top;
}

.sidebar-menu .tooltip-custom .title.beta {
  height: 16px;
  padding: 0px 6px;
  line-height: 16px;
  margin-right: 7px;
  font-size: 8px;
  border-radius: 3px !important;
}

.sidebar-menu .tooltip-custom .tooltiptext {
  left: 75% !important;
}

.sidebar-circle .sidebar-menu > li > a > .weearn {
  background: #494949 url(../angularjs/assets/weearn-icon-grey.svg) no-repeat center center;
}

.sidebar-circle .sidebar-menu > li:hover > a > .weearn,
.sidebar-circle .sidebar-menu > li.active > a > .weearn {
  background: #494949 url(../angularjs/assets/weearn-icon-blue.svg) no-repeat center center !important;
}

.modal.festival-modal {
  height: 500px;
  width: 1030px;
}

.row-vertical-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.border-bottom-none {
  border-bottom: none;
}

.ckbox.ckbox-disabled-display input[type=checkbox][disabled],
.ckbox.ckbox-disabled-display input[type=checkbox][disabled] + label,
.ckbox.ckbox-disabled-display input[type=checkbox][disabled] + label::before {
  cursor: pointer;
}

.ckbox.ckbox-disabled-display input[type=checkbox][disabled]:checked + label::after {
  cursor: pointer;
  border-color: #BBB;
  opacity: initial;
}

.ckbox-label-vertical-middle label {
  vertical-align: middle;
}

.big-ckbox input[type=checkbox],
.big-ckbox label {
  cursor: pointer;
}

.big-ckbox input[type=checkbox] {
  width: 25px;
  height: 25px;
}

.big-ckbox input[type=checkbox].pull-right {
  margin-left: 10px;
}

.big-ckbox input[type=checkbox].pull-left {
  margin-right: 10px;
}

.big-ckbox input[type=checkbox].pull-right + label,
.big-ckbox input[type=checkbox].pull-left + label {
  display: inline;
  vertical-align: -webkit-baseline-middle;
  line-height: normal;
}

/* ========================================================================
* Font
* ======================================================================== */

.font-color-ascent-blue {
  color: rgba(0, 122, 255, 1) !important;
}

.font-color-timberwolf {
  color: rgba(216, 216, 216, 1) !important;
}

.font-color-red {
  color: rgba(255, 0, 0, 1) !important;
}

.new-ui5 .change-domain .selector-custom .dropdown-toggle .caret {
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid white;
  right: 10px !important;
}

.new-ui5 .change-domain .selector-custom .dropdown-toggle .shift-input-row {
  font-size: 16px !important;
}

.input-text-underline input {
  border: 0px !important;
  background: transparent;
  padding: 0px;
  height: 21px !important;
}

.input-text-underline input:focus {
  border: 0px !important;
}

.input-text-underline div {
  border-bottom: 1px solid rgb(220 220 220);
  padding-bottom: 5px;
}

.btn-plus {
  display: inline-block;
  cursor: pointer;
}

.btn-plus .icon {
  background-color: #3d61ff;
  height: 30px;
  width: 30px;
  border-radius: 5px;
  font-size: 20px;
  color: white;
  padding-top: 5px;
  text-align: center;
  display: inline-block;
}

.btn-plus .label-caret {
  background-color: #3d61ff;
  border-radius: 5px;
  color: white;
  padding: 6px 12px;
}

.new-ui5 .rounded-dropdown > .dropdown-menu {
  border-radius: 8px;
  padding: 7px;
  font-size: 12px;
  box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%), 0 3px 1px -2px rgb(0 0 0 / 20%);
}

.new-ui5 .rounded-dropdown > .dropdown-menu > li > a .wrapper {
  padding: 6px;
}

.new-ui5 .rounded-dropdown > .dropdown-menu>li>a:focus,
.new-ui5 .rounded-dropdown > .dropdown-menu>li>a:hover {
  background-color: #cce4ff;
  border-radius: 8px;
}

.new-ui5 .rounded-dropdown > .dropdown-menu>li>a:focus:before,
.new-ui5 .rounded-dropdown > .dropdown-menu>li>a:hover:before {
  border: none;
}

.dropdown.dropdown-left .dropdown-menu {
  right: 0;
  left: auto;
}

.rounded-border input.form-control,
.rounded-border button.dropdown-toggle {
  border-radius: 6px !important;
}

/* ========================================================================
* Signature directive
* ======================================================================== */

.signature-area {
  position: relative;
  border: 1px solid #979797;
  border-radius: 5px;
}

.signature-area .btn-refresh {
  position: absolute;
  right: 4px;
  top: 10px;
  border: 0;
  background-color: transparent;
  font-size: 18px;
  color: #a1a1a1;
}

.signature-area .signature-canvas > canvas {
  touch-action: none;
}

.signature-area .signature-input {
  padding: 0 12px;
}

.signature-area .signature-input input {
  position: absolute;
  bottom: 15px;
  border: none;
  border-bottom: 2px solid #979797;
  width: calc(100% - 24px);
  text-align: center;
  font-family: 'Apple-Chancery';
  font-size: 22px !important;
  padding-bottom: 5px;
  line-height: 35px;
}

.signature-area .signature-input input:focus,
.signature-area .signature-input input:focus-visible {
  border: none !important;
  border-bottom: 2px solid #979797 !important;
  outline: none;
}

/* ========================================================================
* Filelist directive
* ======================================================================== */

.filelist .file-container {
  border: 1px solid rgba(151, 151, 151, 1);
  padding: 10px 15px;
  border-radius: 8px;
  margin-bottom: 10px;
  cursor: pointer;
}

.filelist .file-container i {
  margin-top: 5px;
  color: rgba(117, 117, 117, 1);
}

.filelist .file-container .icon-document i {
  margin-right: 5px;
}

@media only screen and (max-width: 1024px) {
  .filelist .file-container {
    padding: 12px 15px 15px 15px;
    font-size: 24px;
  }
}

/* ========================================================================
* Userlist View directive
* ======================================================================== */

.userlist-view {
  padding: 12px 0px;
}

.userlist-view .custom-photo {
  float: left;
  margin-top: -5px;
  margin-right: 10px;
}

.userlist-view .custom-photo .list-picture-container {
  height: 50px !important;
  width: 50px !important;
}

.userlist-view .custom-profile .custom-name {
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
}

.userlist-view .custom-profile .custom-email {
  font-size: 12px;
  color: rgba(161, 161, 161, 1);
  line-height: 21px;
}

.userlist-view .custom-tag {
  height: 40px;
  width: 100px;
  border: 1px solid rgba(117, 117, 117, 1);
  border-radius: 5px;
  padding-top: 8px;
  text-align: center;
}

.userlist-view .custom-delete {
  width: 26px;
  height: 26px;
  color: rgba(217, 217, 217, 1);
  text-align: center;
  font-size: 20px;
  margin-top: 15px;
  margin-left: 24px;
  cursor: pointer;
}

/* ========================================================================
* Avatarlist directive
* ======================================================================== */

.avatarlist-container {
  width: fit-content;
  padding-right: 10px;
}

.avatarlist-container:hover {
  cursor: pointer;
}

.avatarlist-container .label-display {
  font-family: 'Inter';
  color: #45443d;
  margin-left: 12px;
  display: inline-block;
}

.avatarlist {
  display: inline-block;
  margin-right: -10px;
}

.avatarlist:not(:first-child) {
  z-index: -100;
}

.avatarlist .list-picture-container {
  border: 3px solid white;
}

/* ========================================================================
* BETA Banner
* ======================================================================== */

.beta-banner {
  border: 1px solid #c8c8c8;
  padding: 10px 15px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.beta-banner .custom-icon {
  background-color: #ffa51f;
  width: 51px;
  border-radius: 5px;
  padding: 5px 10px;
  font-weight: bolder;
  color: white;
  display: inline-block;
}

.beta-banner .custom-message {
  width: 650px;
  display: inline-block;
  margin-left: 10px;
  font-weight: bolder;
  color: red;
}

.beta-banner .custom-close {
  font-size: 15px;
  margin-top: 5px;
  color: #c8c8c8;
  cursor: pointer;
}

/* ========================================================================
* input-upload-file directive
* ======================================================================== */

.simple-upload .real-time-upload-fields {
  padding: 6px;
  height: unset;
  border: none;
}

.simple-upload .real-time-upload-fields .real-time-upload-fields-label {
  font-size: 12px;
  display: inline-block;
  color: #3d61ff;
  padding: 0px 2px;
}

.simple-upload .real-time-upload-fields i {
  font-size: 13px;
  margin-right: 3px;
}

.simple-upload .upload-progress-icon {
  padding: 0 5px 0 0;
}

.simple-upload .upload-progress-remove-button {
  margin-right: 0;
}

.simple-upload .upload-progress.upload-progress-container .progress {
  width: 100%;
  height: 5px;
  margin: 3px 0;
  background-color: #f5f5f5 !important;
}

.real-time-upload .absolute-file-container {
  min-height: 100px;
}

.real-time-upload .absolute-file-container .form-group {
  position: absolute;
  left: 0;
  width: 100%;
  margin-top: 12px;
}

/* ========================================================================
* input-rating-star directive
* ======================================================================== */

.rating-star-container {
  margin-top: 6px;
  margin-left: -6px;
  width: fit-content;
  text-align: center;
}

/* Ratings widget */

.rating-star {
  display: inline-block;
  border: 0;
  vertical-align: middle;
}

/* Hide radio */

.rating-star > span > input {
  display: none;
}

/* Order correctly by floating highest to the right */

.rating-star > span > label {
  float: right;
  font-weight: unset;
  color: rgba(0, 122, 255, 1) !important;
}

.rating-star .full-star {
  margin-right: 5px;
}

/* The star of the show */

.rating-star > span > label:before {
  display: inline-block;
  font-size: 2rem;
  padding: .3rem .5rem;
  cursor: pointer;
  font-family: 'Font Awesome 5 Free';
  font-weight: unset;
  content: "\f005";
}

/* Half star trick */

.rating-star .half-star:before {
  content: "\f005";
  position: absolute;
  padding-right: 0;
  width: 1.65rem;
  overflow: hidden;
}

.rating-star-container .score {
  margin-left: 20px;
  color: rgba(161, 161, 161, 1);
}

.rating-star-container .score-per-rate {
  float: right;
  width: 47px;
  color: rgba(161, 161, 161, 1);
}

/* Click + hover color */

input:checked ~ label,
.rating-star > span:has(input:checked) ~ span > label,
.rating-star > span:has(input:not(:disabled)) label:hover,
.rating-star > span:has(input:not(:disabled)) label:hover ~ label,
.rating-star > span:has(input:not(:disabled) + label:hover) ~ span > label {
  font-weight: 900;
}

/* color previous stars on hover */

/*highlight hovered star if selected previously*/

input:checked + label:hover,
input:checked ~ label:hover,
input:checked ~ label:hover ~ label,
.rating-star > span:has(input:checked) ~ span > label:hover,
.rating-star > span:has(input:checked) ~ span > label:hover ~ label,
.rating-star > span:has(input:checked) ~ span:has(label:hover) ~ span > label,
.rating-star > span:has(input:checked ~ label:hover) ~ span > label,
label:hover ~ input:checked ~ label,
.rating-star > span:has(label:hover) ~ span:has(input:checked) ~ span > label,
.rating-star > span:has(label:hover) ~ span > input:checked ~ label,
.rating-star > span:has(label:hover ~ input:checked) ~ span > label {
  color: #2e4ac6 !important;
}

.rating-star input[type=radio]:disabled + label,
.rating-star input[type=radio]:disabled + label:before {
  color: rgba(204, 228, 255) !important;
  cursor: not-allowed;
}

/* ========================================================================
* words-limit-textarea
* ======================================================================== */

.words-limit-textarea-container {
  border: 1px solid #ccc;
  padding: 6px 12px;
  width: 100%;
  max-width: -webkit-fill-available;
}

.words-limit-textarea-container textarea.form-control {
  overflow: hidden;
  padding: 0;
  border: 0 !important;
}

.words-limit-textarea-container :has(textarea[disabled]) {
  background-color: #f3f3f3;
  border: 0;
}

.words-limit-textarea-container .words-limit {
  text-align: right;
}

.words-limit-textarea-container .words-limit.float-top {
  margin-top: -20px;
  float: right;
}

.words-limit-textarea-container:has(textarea[disabled]) {
  background-color: #eee;
}

/* ========================================================================
* general usage
* ======================================================================== */

.text-error {
  color: red !important;
}

.text-warning {
  color: #ffa51f !important;
}

/* ========================================================================
* First Time Login Modal
* ======================================================================== */

.first-time-login-modal .icon-container {
  text-align: center;
  margin-top: 20px;
}

.first-time-login-modal .icon-container img {
  text-align: center;
  height: 100px;
  width: 100px;
}

.first-time-login-modal .title-container {
  text-align: center;
  color: #0171ff;
}

.first-time-login-modal .title-container h3 {
  margin-top: 10px !important;
}

.first-time-login-modal .subtitle-container {
  text-align: center;
  padding: 10px 20px;
}

.first-time-login-modal .input-container {
  padding: 10px 20px;
}

.first-time-login-modal .input-container .input-password {
  width: 460px;
}

.first-time-login-modal .input-container .input-groupon {
  cursor: pointer;
  padding-top: 2px;
}

.first-time-login-modal .password-intructions {
  color: #979797;
}

.first-time-login-modal .btn-container {
  margin-bottom: 20px;
}

.first-time-login-modal .btn-container .btn-submit {
  height: 40px;
  width: 200px;
  font-size: 15px;
}

.first-time-login-modal .btn-container .btn-cancel {
  margin-top: 10px;
  border: 0px;
  box-shadow: none;
}

/* ========================================================================
* Zendesk Chat
* ======================================================================== */

iframe#launcher {
  display: none;
}

/* ========================================================================
* Side Template
* ======================================================================== */

.side-template-content-general {
  padding-left: 20px;
  padding-right: 20px;
  height: calc(100% - 50px);
  overflow-y: auto;
}

.side-template-content-general .side-template-header {
  color: #3d61ff;
  border-bottom: 2px solid #3d61ff;
}

.side-template-content-general .emp-info .profile-avatar {
  display: inline-block;
  margin-right: 10px;
}

.side-template-content-general .emp-info .emp-name {
  display: inline-block;
  vertical-align: top;
  padding-top: 5px;
}

.side-template-content-general .emp-info .list-picture-container {
  vertical-align: text-bottom;
  height: 50px;
  width: 50px;
}

.side-template-content-general .side-template-footer {
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: -webkit-fill-available;
  margin: 10px 20px;
}

.side-template-content-general .side-template-footer .btn-cancel {
  background-color: transparent;
  color: #5E5E5E;
  box-shadow: none;
  border: none;
  font-size: 13px;
  font-weight: 500;
}

.side-template-content-general .side-template-footer .btn-cancel:hover {
  color: red !important;
}

/* ========================================================================
* Card List Widget
* ======================================================================== */

.card-widget-list .card {
  background-color: #fff;
  padding: 15px 20px;
  margin-bottom: 20px;
  box-shadow: 0px 4px 10px 0px rgb(112 144 176 / 0.2);
  height: 168px;
}

.card-widget-list .card-popover .card {
  height: unset;
  margin-bottom: 0px;
}

.card .widget-header {
  margin-bottom: 15px;
}

.card .widget-header .tag {
  color: #0380FF;
  background-color: rgba(0, 122, 255, 0.1);
  width: fit-content;
  padding: 2px 15px;
  font-size: 12px;
  border-radius: 20px;
  font-weight: 500;
}

.card .widget-header .icon {
  font-size: 18px;
  color: grey;
  padding: 2px 0;
}





.card .widget-detail .photo img {
  max-height: 150px;
}

.card-widget-list .card .date {
  font-size: 12px;
  color: grey;
}

.card-widget-list .card .date.fixed-bottom {
  position: absolute;
  bottom: 30px;
  right: 25px;
}

.card-widget-list .popover {
  z-index: 99;
  max-width: unset;
  min-width: 380px;
  width: 100%;
  border: 0;
}

.card-widget-list .popover .popover-content {
  padding: 0;
}

.card-widget-list .popover.bottom>.arrow,
.card-widget-list .popover.bottom>.arrow:after {
  border-bottom-color: #fff;
}

.card-popover .attendance-note-view-attachment {
  width: unset;
  margin-left: 0;
}

.card-popover .attendance-note-view-attachment ul.attachment-container {
  padding-left: 0;
}

.text-ellipse {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-ellipse.two-lines {
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.text-ellipse.three-lines {
  -webkit-line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.employee-tax-relief-popup .dropdown-menu {
  max-width: 100%;
}

.employee-tax-relief-popup .description ol {
  list-style: lower-roman;
  padding: 4px 12px 0px 25px;
}

.employee-tax-relief-popup .scrollable-menu .is-word-wrap ol {
  list-style: upper-roman !important;
}

.employee-tax-relief-popup .scrollable-menu .is-word-wrap ol > li:before {
  font-weight: bold;
}

.employee-tax-relief-popup .scrollable-menu .is-word-wrap ol li {
  margin-left: 30px !important;
}

.new-ui5 .selector-custom .dropdown-toggle.is-word-wrap .shift-input-row ol {
  list-style: upper-roman !important;
}

.employee-tax-relief .box-container ol {
  list-style: upper-roman !important;
}

.employee-tax-relief .box-container ol li {
  margin-left: 30px !important;
}

.employee-tax-relief .box-container .tax-relief-description ol li {
  font-weight: normal !important;
}

.employee-tax-relief .box-container .tax-relief-description {
  border-left: 1px solid #e3e3e3;
  border-right: 1px solid #e3e3e3;
  border-top: 1px solid #e3e3e3;
  padding: 15px 10px;
}

table tr.has-sibling-tr > td {
  border-bottom: none !important;
}

table tr.has-sibling-tr + tr > td {
  height: unset;
  padding-top: 0!important;
  border-top: none !important;
}

table tr.has-sibling-tr.warning-msg > td {
  padding: 0 0 10px 0 !important;
}

/* ========================================================================
* Paynow QR Modal
* ======================================================================== */

.img-qr-container {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}

.img-qr-container .overlay-container {
  position: fixed;
  width: 300px;
  height: 300px;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 2;
}

.img-qr-container .overlay-container .overlay-text {
  position: absolute;
  top: 42%;
  left: 23%;
  font-size: 40px;
  color: rgba(255,255,255,0.9);
  background-color: rgba(0,0,0,0.5);
  transform: rotate(-15deg);
  padding: 15px;
}
/**
    Page content layout only for roster
**/

/*.roster {
    background-color: #ffffff !important;
}*/

/*.roster .header-template {
    border-bottom: 1px solid #e3ebf3;
}*/

/**
    Override theme for roster page
 **/

.roster-container .floatThead-container {
  border: none;
  z-index: 1004 !important;
}

.roster .public-text {
  font-weight: bold;
}

.roster-container .weekend {
  background-color: #ECF3FC;
}

.roster-container {
  border: 1px solid rgba(227, 235, 243, 1);
}

/**
    Roster body
 **/

.roster-container {
  padding-bottom: 50px;
}

.roster-container table.table-blue {
  background-color: #ffffff;
  width: 100%;
  z-index: 60;
}

.roster-container th,
.roster-container td {
  position: relative;
  vertical-align: top;
  border-collapse: separate !important;
  border-bottom: solid 1px rgba(227, 235, 243, 1);
}

.roster-container .cell {
  width: 145px !important;
  min-width: 145px !important;
  max-width: 145px !important;
}

.roster-container .left-cell {
  min-width: 180px !important;
  max-width: 180px !important;
  width: 180px !important;
  border-right: solid 1px rgba(227, 235, 243, 1);
  padding: 0px;
}

.roster-container .left-second-cell {
  min-width: 90px !important;
  max-width: 90px !important;
  width: 90px !important;
  border-right: solid 1px rgba(227, 235, 243, 1);
  padding: 0px;
}

.roster-container table tfoot td.left-cell {
  padding: 10px;
}

.roster-container table thead tr th div {
  text-align: center;
  position: relative;
}

/**
    Shift
 **/

.roster-container .box .item {
  text-align: left;
  clear: both;
}

.roster-container .box .item.leave .leave-text {
  color: #3b5376;
  font-weight: 600;
  position: relative;
  top: 1px;
  left: 2px;
}

.roster-container .box .item.item-off,
.roster-container .box .item.item-rest {
  border: 2px solid #6f8099;
}

.roster-container .box .item.item-diff-location {
  border: 2px solid #e2524a;
}

.roster-container .box .item.leave {
  background-color: #fff;
  color: #494949;
}

.roster-container .box .item.item-rest .item-name {
  background-color: #dbe9f9;
  color: #4a90e2;
  background: repeating-linear-gradient(
        315deg,
        #dbe9f9 0,
        #dbe9f9 6px,
        #cce0f7 6px,
        #cce0f7 12px
    );
  text-align: center;
  height: 75px !important;
  padding-top: 23px;
}

.roster-container .box .item.item-off .item-name {
  background-color: rgba(178, 178, 178, 0.3);
  color: #6f8099;
  background: repeating-linear-gradient(
        315deg,
        rgba(178, 178, 178, 0.35) 0,
        rgba(178, 178, 178, 0.35) 6px,
        rgba(173, 173, 173, 0.2) 6px,
        rgba(173, 173, 173, 0.2) 12px
    );
  text-align: center;
  height: 75px !important;
  padding-top: 23px;
}

.roster-month .roster-container .box .item.item-rest .item-name,
.roster-month .roster-container .box .item.item-off .item-name {
  padding-top: 13px !important;
  height: 91px !important;
}

.roster-container .box .item.item-diff-location .shift-name {
  background-color: #ff7e7e;
  color: #fff;
  background: repeating-linear-gradient(
        315deg,
        #ff7e7e 0,
        #ff7e7e 6px,
        #ff665d 6px,
        #ff665d 12px
    );
  text-align: center;
  color: #ffffff !important;
}

.roster-container .cell .item {
  line-height: 50px;
  text-align: center;
  font-weight: 400;
  color: #FFFFFF;
  border-radius: 2px;
  white-space: nowrap;
  overflow: hidden;
  border: 2px solid transparent;
}

.roster-container .cell .item .shift-time,
.roster-container .cell .item .shift-location,
.roster-container .cell .item .shift-event {
  padding: 0 5px;
  background-color: #FFFFFF;
  font-weight: bold;
}

/*Month*/

.roster-month .roster-container .box .item {
  height: 100%;
  z-index: 50;
  position: relative;
  width: 100%;
}

.roster-month .roster-container .cell {
  width: 90px !important;
  min-width: 90px !important;
  max-width: 90px !important;
  padding: 0px;
}

.roster-month .roster-container .box .item .shift-name {
  border-radius: 1px;
}

.roster-month .roster-container .box .item .shift-time,
.roster-month .roster-container .box .item .shift-location,
.roster-month .roster-container .box .item .shift-event {
  font-size: 10px;
  height: 22px;
  line-height: 22px;
}

.roster-month .roster-container .box .shift-swap {
  border-right: 25px solid #007AFF;
  border-bottom: 35px solid transparent;
  height: 0;
  width: 0;
  position: absolute;
  right: 0px;
  z-index: 1000;
  top: 0px;
}

.roster-month .roster-container .box .shift-swap img {
  height: 20px;
  width: 20px;
  margin-left: 7px;
  margin-bottom: 10px;
}

.roster-week .roster-container .box .shift-swap {
  border-right: 30px solid #007AFF;
  border-bottom: 35px solid transparent;
  height: 0;
  width: 0;
  position: absolute;
  right: 0px;
  z-index: 1000;
  top: 0px;
}

.roster-week .roster-container .box .shift-swap img {
  height: 20px;
  width: 20px;
  margin-left: 10px;
  margin-bottom: 10px;
}

/*Week*/

.roster-container .cell .item {
  box-shadow: 1px 1px 1px 0px hsl(0, 0%, 80%), 0px 0px 1px 1px hsl(0, 0%, 90%);
}

.roster-week .roster-container .open-shift .cell .item {
  box-shadow: none;
}

.roster-week .roster-container .repeated-item .box {
  border-radius: 2px;
  text-align: left;
  color: #636e7b;
}

.roster-container .cell-day-type .box {
  border: 2px solid transparent;
  box-shadow: none;
  border-radius: 4px;
}

.roster-week .roster-container .box .item {
  z-index: 89;
  position: relative;
  width: 100%;
  line-height: 30px;
}

.roster-week .roster-container .cell {
  width: 145px !important;
  min-width: 145px !important;
  max-width: 145px !important;
  padding: 0px;
}

.roster-container tbody .cell .item {
  color: #636e7b;
}

.roster-container .cell .item .shift-time {
  color: #636e7b;
  line-height: 28px;
}

.roster-container .cell .item .shift-name {
  color: #636e7b;
  line-height: 25px;
  background-color: #d6ecfd;
  padding: 0 7px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.roster-week .roster-container .open-shift .box .item {
  height: 28px;
}

.roster-week .roster-container .open-shift .box .item .shift-name {
  height: 28px;
}

.roster-week .roster-container .box .item.item-off .item-name,
.roster-week .roster-container .box .item.item-rest .item-name,
.roster-week .roster-container .box .item.leave .leave-name {
  height: 28px;
  line-height: 26px;
}

.roster-week .roster-container .box .item.leave .leave-text {
  top: 2px;
  margin-left: 30px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100px;
  display: block;
}

.roster-week .roster-container .open-shift td > div {
  padding-top: 5px;
}

.roster-container table:not(.action-enabled) td.cell .cell-container .box,
.roster-container table:not(.action-enabled) td.cell .cell-container .box:hover {
  /*border: 2px solid transparent;*/
}

.roster-container .action-enabled .open-shift td.cell .cell-container .box:hover,
.roster-container .action-enabled .repeated-item td.cell .cell-container .box:hover {
  border: 2px solid transparent;
}

/*.roster-container .action-enabled .repeated-item td.cell:hover {
    border: 2px solid #1380ff;
}*/

/*.roster-container .action-enabled .repeated-item td.selected {
    border: 2px solid #1380ff;
}*/

.roster-container .action-enabled .cell.selected .item .shift-name,
.roster-container .action-enabled .cell.selected .item .item-name {
  opacity: 1;
}

.roster-container .action-enabled .cell .item .leave-name,
.roster-container .action-enabled .cell .item .shift-name,
.roster-container .action-enabled .cell .item .item-name {
  opacity: 0.5;
}

/**
    During batch assign
 **/

.roster-container td.cell .cell-container .box,
.roster-container td.cell .cell-day-type .box {
  border: 2px solid transparent;
}

.roster-container .action-enabled td.cell:hover,
.roster-container td.cell .box:hover {
  cursor: pointer;
}

/*.roster-container td.cell.selected {
    background-color: rgba(19, 128, 255, 0.15);
}*/

.roster-container table:not(.action-enabled) td.cell .box:hover .item:not(.leave) {
  border: 2px solid #1380ff;
}

.roster-container td.cell.public,
.legend .legend-item.public {
  background-color: #FFF8DE;
}

/**
    Delete button
 **/

.roster-container .box .fa-times,
.roster-container .box .fa-balance {
  font-size: 12px;
  line-height: 1.8;
  height: 22px;
  width: 22px;
  margin: -12px -9px 0 0;
  padding: 0;
  z-index: 1003;
  position: absolute;
  min-width: auto;
  border-radius: 12px;
  background-color: #ff3e56;
  margin-top: -10px !important;
  right: -10px;
}

.roster-container .cell .box i.fa-times {
  display: none;
}

.roster-container .cell .box:hover i.fa-times {
  display: block;
}

.roster-container table > thead > tr > th {
  white-space: nowrap;
  position: sticky;
  position: -webkit-sticky;
  top: 0px;
  z-index: 160;
  background: white;
}

.show-footer .roster-container {
  height: calc(100vh - 290px) !important;
}

/**
    First column
 **/

.open-shift td {
  padding-top: 10px;
}

.open-shift td.cell .item .leave-name,
.open-shift td.cell .item .shift-name {
  height: 25px;
  line-height: 27px;
}

.roster-container table:not(.action-enabled) .open-shift td.cell .cell-container .box,
.roster-container table:not(.action-enabled) .open-shift td.cell .cell-container .box:hover {
  min-height: 30px;
}

.open-shift-first-column {
  min-height: 56px;
  font-size: 15px;
  color: #000;
  line-height: 50px;
  text-align: center;
}

.open-shift-first-column .fa-open-shift {
  background: url('../angularjs/assets/icons/ic_alarm_off-3x.png') no-repeat;
  height: 20px;
  width: 20px;
  background-size: 100% auto;
  position: relative;
  top: 4px;
}

.open-shift-first-column .label {
  color: #000;
  font-size: 15px;
  font-weight: 400;
  padding: 0 0 0 5px;
}



.profile-avatar .avatar {
  min-height: auto;
  float: left;
  padding: 8px 10px;
  margin-right: 5px;
}

.profile-avatar .emp-wrapper {
  display: block;
  line-height: 16px;
  padding: 12px 0px 12px 0px;
}

.emp-wrapper .emp-name {
  font-weight: bold;
  font-size: 12px;
  color: #4a90e2;
}

.emp-wrapper .emp-name,
.emp-wrapper .emp-role {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 135px;
}



.profile-avatar .emp-wrapper.wrapper-text-black {
  font-size: 12px;
}

.profile-avatar .emp-wrapper.wrapper-text-black .emp-name,
.profile-avatar .emp-wrapper.wrapper-text-black .emp-role {
  color: #5E5E5E;
}

.icon-info {
  position: absolute;
  right: 5px;
  top: 5px;
  font-size: 15px;
}

.icon-info:hover {
  cursor: pointer;
}



.container-day-type {
  font-size: 15px;
}

/** Employee summary */

.employee-summary .profile-avatar {
  margin: 0 10px 20px 10px;
}

.employee-summary .profile-avatar div.list-picture-container {
  height: 70px;
  width: 70px;
  line-height: 55px;
  text-align: center;
}

.employee-summary .profile-avatar .emp-name {
  color: #554f46;
  font-size: 15px;
}

.employee-summary .profile-avatar .emp-role {
  color: rgba(86, 86, 86, 0.6);
  font-size: 13px;
  margin-top: 7px;
}

.employee-summary .emp-wrapper .emp-name,
.employee-summary .emp-wrapper .emp-role {
  max-width: 250px;
}

.employee-summary .separator-line {
  border-bottom: 1px solid #e3ebf3;
}

.employee-summary .profile-avatar .emp-wrapper {
  padding-left: 10px;
  padding-top: 20px;
}

.employee-summary .profile-avatar .fa-suitcase {
  color: #4bbac5;
  font-size: 16px;
  margin-right: 5px;
}

.employee-summary .summary-info {
  font-size: 12.5px;
  margin: 12px;
  padding: 0px 15px;
}

.employee-summary .summary-info .title {
  color: #323c47;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 5px;
}

.employee-summary .summary-info .shift-table {
  margin: 10px 1px;
}

.employee-summary .summary-info .shift-table .shift-header {
  font-weight: 600;
}

.employee-summary .summary-info .shift-table .row.shifts {
  line-height: 30px;
}

.employee-summary .summary-info .shift-table .row.off-rest {
  background-color: #f9f9f9;
  color: #4688d6;
}

.employee-summary .font-weight-bold {
  font-weight: 500;
}

.employee-summary .avatar-thumbnail .avatar-no-profile:first-letter {
  font-size: 26px;
}

/**Input shift row */

.shift-input-row {
  font-size: 14px;
  /*line-height: 9px;*/
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.shift-input-row.please-select .shift-color,
.shift-input-row.please-select .shift-code,
.shift-input-row.please-select .shift-separator:before {
  display: none;
}

.shift-input-row.please-select .shift-name {
  line-height: 15px;
}

.shift-input-row .shift-color {
  display: inline-block;
  height: 20px;
  width: 20px;
  margin-right: 5px;
  vertical-align: middle;
}

.shift-input-row .shift-code {
  display: inline-block;
  font-weight: bold;
  width: 80px;
  text-align: center;
  vertical-align: text-top;
}

.shift-input-row .shift-separator:before {
  content: '|';
  margin: 0 5px;
  vertical-align: text-top;
}

.shift-input-row .shift-name {
  display: inline-block;
  vertical-align: text-top;
}

.scrollable-menu .is-word-wrap {
  word-break: break-word;
  word-wrap: break-word;
  white-space: normal;
}

.multiselect-container.multiselect-shift-row {
  max-width: 485px;
  width: 100%;
}

.multiselect-shift-row .shift-input-row {
  line-height: 30px !important;
}

.multiselect-shift-row .shift-input-row .shift-color {
  margin-top: 10px;
}

/**
    Responsive
 **/

@media (max-width: 991px) {
  .profile-avatar .avatar {
    display: none;
  }

  .roster-month .roster-container .left-cell {
    min-width: 150px !important;
    max-width: 150px !important;
    width: 150px !important;
    border-right-color: rgba(227, 235, 243, 1);
    padding: 0px;
  }

  .roster-month .roster-container .left-second-cell {
    min-width: 75px !important;
    max-width: 75px !important;
    width: 75px !important;
    border-right-color: rgba(227, 235, 243, 1);
    padding: 0px;
  }

  .profile-avatar {
    padding: 0 10px;
  }

  .header-first-column {
    padding: 0 10px;
  }
}

@media (max-width: 991px) and (min-width: 768px) {
  .profile-avatar .emp-wrapper {
    clear: both;
    display: block;
  }
}

@media (max-width: 1200px) {
  .profile-avatar .emp-wrapper {
    margin-left: 10px;
  }

  .profile-avatar .avatar {
    min-height: auto;
    display: none;
  }
}

@media (min-width: 1471px) {
  .roster-month .roster-container .left-cell {
    min-width: 210px !important;
    max-width: 210px !important;
    width: 210px !important;
    border-right-color: rgba(227, 235, 243, 1);
    padding: 0px;
  }

  .roster-month .roster-container .left-second-cell {
    min-width: 105px !important;
    max-width: 105px !important;
    width: 105px !important;
    border-right-color: rgba(227, 235, 243, 1);
    padding: 0px;
  }
}

.bulk-roster .roster-multi-select-table-container {
  box-shadow: rgba(0, 0, 0, 0.04) 0px 2px 4px 0px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  padding-top: 10px;
  background: white;
}

@media (min-width: 1300px) {
  .bulk-roster .roster-multi-select-table-container {
    margin: 0px 160px !important;
  }
}

.bulk-roster .roster-multi-select-table-container .bulk-roster-setup {
  padding: 20px 40px;
}

.bulk-roster .roster-multi-select-table-container .fa-exclamation-circle {
  font-size: 21px;
  color: #FB8C00;
}

.modal-roster .sub-category {
  margin: 30px -2px 10px -2px;
}

.modal-roster .sub-category-content {
  min-height: 65px;
}

.modal-roster .row-shift {
  border-top: 1px solid rgba(227, 235, 243, 1);
  padding-top: 25px;
}

.modal-roster .row-shift .row-delete {
  text-align: right;
  font-size: 15px;
  margin: -15px 0px 10px 0px;
}

.roster-month .chkbox-multi-section label,
.roster-week .chkbox-multi-section label {
  font-weight: bold;
}

.selection-new-redirect {
  font-weight: bold;
  color: rgba(0, 122, 255, 1);
  margin-left: 2px;
  margin-right: 10px;
}

/*.roster-container td.cell .cell-day-type {
    height: 100%;
}
.roster-container td.cell .cell-day-type .box {
    height: 100%;
}*/

.roster-container .box.leave {
  height: 83px;
}

.roster-month .roster-container .box.leave {
  height: 96px !important;
  margin-top: 2px;
}

.roster-container .box .item.leave {
  height: 100%;
  padding: 10px 10px 10px 10px;
  background-color: #fff;
  color: #494949;
  box-shadow: -1px 1px 1px 0px hsl(0, 0%, 80%), 0px 0px 1px 1px hsl(0, 0%, 90%);
}

.roster-container .box .item.leave .fa-leaf {
  margin-right: 5px;
}

.roster-container .box .item.leave .fa-leaf.pending {
  color: #ffa51f;
}

.roster-container .box .item.leave .fa-leaf.approved {
  color: #48cea7;
}

.roster-container .box .item.leave .leave-name {
  line-height: 26px !important;
  overflow-x: clip;
}
.rate-edit-btn {
  margin-top: 40px;
}

.calculator-table tbody td div {
  display: inline-block;
}

.calculator-table tbody td div .calculator-input-width {
  max-width: 100px;
}

/* ========================================================================
* payroll-batch-setting-nav
* ======================================================================== */

.payroll-batch-dropdown-menu .dropdown-menu {
  max-height: 250px;
  overflow-y: auto;
}

.payroll-batch-setting-nav {
  margin-top: 50px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
}

.payroll-batch-setting-header-content {
  padding-right: 10px;
}

.payroll-batch-setting-nav-header {
  font-size: 15px;
  height: 40px;
  font-weight: bold;
  padding-top: 5px;
  border-bottom: 1px solid #ccc;
}

.payroll-batch-setting-nav-header div:first-child {
  padding-top: 5px;
}

.payroll-batch-setting-nav .btn-add-group {
  background-color: #4B7CBF;
  color: #fff;
  border: 1px solid #4B7CBF;
  border-radius: 0px;
  font-weight: bold;
  min-height: 35px;
  padding-top: 8px;
  width: 100% !important;
}

.payroll-batch-setting-nav .btn-add-group:hover {
  background-color: #fff;
  color: #4B7CBF;
  border: 1px solid #4B7CBF;
}

.payroll-batch-setting-nav .btn-group {
  background-color: #fff;
  color: #636e7b;
  border-radius: 0px;
  font-weight: bold;
  min-height: 35px;
  padding-top: 8px;
  border-bottom: 1px solid #ccc;
  width: 100% !important;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.payroll-batch-setting-nav .btn-group:hover {
  border: 1px solid #636e7b;
}

.payroll-batch-setting-nav .btn-delete-group .btn,
.payroll-batch-setting-nav .btn-edit-group .btn {
  background-color: #204d74;
  color: #fff;
  border-radius: 0px;
  font-weight: bold;
  padding-top: 8px;
  height: 35px;
  border-right: 1px solid;
  width: 100% !important;
  font-size: 12px;
}

.payroll-batch-setting-nav .btn-edit-group .btn {
  border-right: 0px !important;
}

.payroll-batch-setting-nav .btn-assign-group .btn {
  border-right: 0px !important;
}

.payroll-batch-setting-nav label.active {
  background-color: #204d74;
  color: #fff;
}

.payroll-batch-setting-title {
  text-align: center;
  font-weight: 700;
  margin-top: 30px;
  padding: 0px 10px 0px 10px;
}

.payroll-batch-setting-sub-title {
  text-align: center;
  font-weight: 700;
  margin-top: 10px;
  padding: 0px 10px 0px 10px;
  color: gray;
}

.body-content-center {
  padding: 15px;
}

.payroll-badge-generating {
  color: #FFF;
  background: #A166AB;
  border-radius: 4px;
  height: 28px;
  line-height: 20px;
}

.payroll-badge-pending {
  color: #FFF;
  background: #FB8C00;
  border-radius: 4px;
  height: 28px;
  line-height: 20px;
}

.payroll-badge-finalized {
  color: #FFF;
  background: #00BFA5;
  border-radius: 4px;
  height: 28px;
  line-height: 20px;
}

.payroll-batch-ul {
  list-style-type: none;
}

.payroll-batch-display-name-input {
  width: 150px;
}

.payroll-batch-input-label {
  line-height: 28px;
}

.payroll-table > tbody > tr:nth-child(odd) > td {
  background-color: #FFFFFF;
  border: none;
}

.payroll-table > tbody > tr:nth-child(even) > td {
  background-color: #FFFFFF;
  border: none;
  border-bottom: 1px solid rgba(227, 235, 243, 1);
}

.payroll-table > tbody > tr:first-child > td {
  border-top: 1px solid rgba(0, 0, 0, 0.09);
  border-bottom: 1px solid rgba(227, 235, 243, 1);
}

.payroll-table > tbody > tr:last-child > td {
  border-bottom: 1px solid rgba(227, 235, 243, 1);
  border-top: 0px;
}

.payroll-table > thead > th {
  border-bottom: 0px;
}

.payroll-table > tfoot > tr > td {
  border: 0px;
}

.payroll-message-generate {
  color: #3366BB;
  cursor: pointer;
  text-decoration: none;
}

.payroll-message-generate:hover {
  text-decoration: underline;
}

.payroll-multi-select-table-container {
  box-shadow: rgba(0, 0, 0, 0.04) 0px 2px 4px 0px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  padding-top: 10px;
  background: white;
}

.xero-multi-select-table-container {
  padding-top: 10px;
}

@media (min-width: 1300px) {
  .payroll-multi-select-table-container {
    margin: 0px 160px !important;
  }

  .payroll-multi-select-table-container.vessel-encashment-payroll-batch-setting-detail {
    margin: 0px 60px !important;
  }
}

.payroll-multi-select-table-container .payroll-batch-setting-detail {
  padding: 20px 40px;
}

.payroll-batch-setting-dropdown {
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
}

.col-exception {
  min-width: 25px;
}

.col-exception i {
  color: #FB8C00;
  font-size: 20px;
}

.col-exception .table-exception-tooltip {
  width: 300px;
  background-color: #FEF3E5;
  text-align: left;
  padding: 5px 15px 10px 15px;
  position: absolute;
  z-index: 1;
  margin-top: -35px;
  color: #FB8C00;
  left: 0px;
  margin-left: -325px;
  border: 1px solid #FB8C00;
  border-radius: 8px;
}

.col-exception .table-exception-tooltip h6 {
  line-height: 18px;
}

.payroll-table-batch > tbody > tr > td,
.payroll-table-batch > thead > tr > th {
  padding: 0px 10px;
}

.payroll-table-batch > thead > tr > th.th-payment-mode {
  width: 135px;
  min-width: 135px;
}

.payroll-table-batch > tbody > tr > td .input-payment-mode {
  width: 80px;
}

.payroll-earnings-ul {
  list-style: none;
  padding: 0;
}

.payroll-earnings-ul li {
  padding-left: 1.3em;
}

.payroll-earnings-ul li:before {
  content: "\f00c";
  color: #3d61ff;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 600 !important;
  display: inline-block;
  margin-left: -1.3em;
  width: 1.3em;
  font-size: 15px;
  margin-right: 5px;
}

.payroll-batch-title .fa-exclamation-circle {
  font-size: 16px;
  color: #FB8C00;
}

.payroll-table-batch tr td:hover input {
  color: #a2a2a2 !important;
}

.payroll-table-batch tr td input.input-fwl {
  width: 60px;
  text-align: right;
  display: inline-block;
}

.payroll-paid-date-message {
  font-weight: bold;
  color: green;
}

.table-blue-emp-payroll {
  width: 100%;
  margin: 10px 0px 20px 0px !important;
}

.table-blue-emp-payroll > thead > tr > th,
.table-blue-emp-payroll > tbody > tr > td {
  padding: 15px 10px;
  font-size: 13px !important;
}

/*
suppose to solve panel same height issue, which doesn't work
.payroll-batch-setting .col-md-6 {
    height: 220px;
}
.payroll-batch-setting.edit .col-md-6 {
    height: 250px;
}
*/

.payroll-add-users-container {
  margin: auto;
  padding: 10px;
}

/****************************************/

/* Vessel Leave Encashment    */

/****************************************/

.vessel-leave-encashment-container .multi-select-table-container,
.vessel-leave-encashment-container .multi-select-table-new,
.vessel-leave-encashment-container .multi-select-table-panel {
  max-width: 2000px;
}

/****************************************/

/* Vessel Leave Encashment    */

/****************************************/

.payroll-import-modal-container {
  max-width: 500px;
  min-width: 300px;
}

.payroll-import-table-filter-container {
  height: 25px;
}

.payroll-import-table {
  overflow-x: auto;
}

.payroll-import-table .th-nowrap {
  white-space: nowrap;
}

.payroll-import-table .td-error {
  color: red;
}

/* Xero User    */

/****************************************/

.xero-multi-select-table-container .multi-select-table-container,
.xero-multi-select-table-container .multi-select-table-new,
.xero-multi-select-table-container .multi-select-table-panel {
  max-width: 2000px;
}

/****************************************/

/* Form E  */

/****************************************/

.cp22a-form-container {
  padding: 20px 40px;
  border: 1px solid rgba(227, 235, 243, 1);
}

.payroll-import-modal-container .filter-bullet {
  background: #3d61ff;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  display: inline-block;
  font-weight: bold;
  font-size: 12px;
  margin-right: 10px;
  margin-bottom: 5px;
  cursor: pointer;
}

.payroll-import-modal-container .btn-add-rate-multiplier {
  height: 30px;
  min-width: 50px;
  background-color: white;
  box-shadow: none;
  color: #3d61ff;
}
/* ========================================================================
* ir8a
* ======================================================================== */

.esubmission-badge-pending {
  color: #FFF;
  background: #FB8C00;
  border-radius: 4px;
  height: 28px;
  line-height: 20px;
}

.esubmission-badge-finalized {
  color: #FFF;
  background: #00BFA5;
  border-radius: 4px;
  height: 28px;
  line-height: 20px;
}

.esubmission-badge-generating {
  color: #FFF;
  background: #A166AB;
  border-radius: 4px;
  height: 28px;
  line-height: 20px;
}

/* ========================================================================
* apex (singpass)
* ======================================================================== */

.btn.btn-singpass {
  color: #868686;
  background-color: #fff;
  border: 1px solid #C8C9CC;
}

.btn.btn-singpass img {
  padding-top: 2px;
  width: 55px;
}

.btn.btn-singpass:hover {
  background-color: #F5F5F7;
}
/* ========================================================================
* Claim-module
* ======================================================================== */

.claim .header-button {
  height: 35px !important;
  min-width: 40px !important;
}

.claim .header-button i {
  margin-right: 0px !important;
  font-size: 20px;
}

.claim .policy-setup {
  padding-left: 10px;
}

.claim .policy-setup .main-category-header {
  padding: 0px 15px 15px 20px;
}

.claim .policy-setup .main-category-content {
  padding-left: 48px;
  max-width: 825px;
}

.claim .policy-setup .claim-policy-payout-setting {
  padding-top: 5px;
  padding-bottom: 5px;
}

.claim .policy-setup-footer {
  padding: 35px;
}

.claim .table-label-bold {
  color: rgba(0, 112, 255, 1);
  border-bottom: 2px solid rgba(0, 112, 255, 1);
  font-weight: bold;
}

.claim .tooltip-bottom {
  padding-left: 0px;
}

/* ========================================================================
* Claim Application
* ======================================================================== */

.claim .badge {
  min-width: 70px;
}

.claim .badge-partial-amount-before {
  padding: 8px;
  color: #554F46;
  background: #EBEBEB;
  border-radius: 4px;
  height: 35px;
  line-height: 20px;
}

.claim .badge-partial-amount-after {
  padding: 8px;
  color: #03C272;
  background: rgb(3,194,114, 0.1);
  border: 1px solid #03C272;
  border-radius: 4px;
  height: 35px;
  line-height: 20px;
}

.claim .badge-arrow {
  margin-left: 5px;
  margin-right: 5px;
}

.claim .approval-check-icon {
  margin-left: 5px;
  color: #03C272;
}

.claim .approval-times-icon {
  margin-left: 5px;
  color: #FC577A;
}

.claim .approver-remark {
  font-size: 12px;
  color: #999999;
}

.claim .alert .alert-message {
  color: #FB8C00;
  font-size: 16px;
}

/* ========================================================================
* Audit Log
* ======================================================================== */

.claim .notification-list .media-list.small .media-meta {
  color: #bcbcbc;
  font-size: 12px;
}

.claim .notification-list .media-list.small > .media .media-object {
  vertical-align: top;
}

.claim .audit-log-menu {
  left: auto !important;
  right: 0 !important;
}

.claim .button-audit-logs {
  background-color: #EBEBEB !important;
  color: #363A42 !important;
}

/* ========================================================================
* Claim Application Group
* ======================================================================== */

.claim .claim-application-group {
  word-spacing: unset;
  word-break: keep-all;
  min-width: 200px;
  font-size: 17px;
}

.claim .claim-application-group-name {
  padding: 25px;
}

.claim .claim-application-group .list-picture-container {
  float: left;
  margin-top: 5px;
  margin-right: 5px;
  width: 75px;
  height: 75px;
}

.claim .claim-application-group .claim-application-group-name .col-name-detail {
  float: left;
  width: 70%;
  padding-top: 20px;
}

.claim .claim-application-group .claim-application-group-name .col-name-detail ul {
  list-style: none;
  margin: 0;
  padding-left: 7px;
}

.claim .claim-application-group .claim-application-group-amount {
  padding: 20px;
  text-align: center;
}

.claim .claim-application-group .claim-application-group-amount .label-row {
  font-size: 17px;
  font-weight: 600;
}

.claim .claim-application-group .claim-application-group-amount .amount-row {
  font-size: 17px;
  font-weight: 900;
}

.claim .claim-group-expiry {
  color: grey;
  font-size: 15px;
  padding-left: 25px;
  padding-bottom: 12px;
}

.claim .claim-group-items {
  padding-left: 15px;
  padding-right: 15px;
}

.claim .claim-group-items .table {
  border: 1px solid #c2c2c2;
}

.claim .claim-group-items thead tr th {
  background-color: #f8f8f8 !important;
}

.claim .claim-group-footer {
  padding: 0px 25px;
  margin-bottom: 15px;
}

.claim .table-input-text {
  color: #5e5e5e !important;
}
/* ========================================================================
* Organization Chart
* ======================================================================== */

.employee-orgchart-btn {
  border: 1px solid transparent;
  box-shadow: 0 0.8px 2px 0px rgba(0,0,0,0.1) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  width: 46px;
  background-color: white !important;
  color: rgba(0, 122, 255, 1) !important;
  vertical-align: sub;
  padding-left: 11.5px;
}

.orgchart-form {
  height: 100%;
  position: absolute;
  right: 0px;
  left: 220px;
}

.orgchart > tbody > tr > td {
  vertical-align: top;
  position: relative;
}

.page-sidebar-minimize .orgchart-form {
  left: 75px !important;
}

.orgchart-container {
  overflow: hidden;
  padding: 30px 0px 0px 60px;
  height: calc(100% - 65px);
  margin-top: 65px;
  position: absolute;
  width: 100%;
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: -o-grab;
  cursor: grab;
}

.orgchart-container:active {
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: -o-grabbing;
  cursor: grabbing;
}

.orgchart-content {
  transform-origin: 0 0;
  margin: 20px -330px 20px 30px;
}

/* ========================================================================
* Organization Chart - Topmenu
* ======================================================================== */

.orgchart-topmenu {
  height: 65px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
  position: absolute;
  width: 100%;
  z-index: 60;
}

.orgchart-topmenu .dropdown-filter {
  float: left;
  margin-top: 15px;
  margin-left: 20px;
  width: 200px;
}

.orgchart-topmenu .dropdown-filter .dropdown-menu {
  border: 0px !important;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.27);
}

.orgchart-topmenu .dropdown-filter .dropdown-menu li {
  padding: 5px 10px;
}

.orgchart-topmenu .dropdown-filter .dropdown-menu li .list-picture-container {
  margin-right: 10px;
}

.orgchart-topmenu .btn-discard {
  float: right;
  font-size: 14px;
  background: white;
  margin-top: 15px;
  height: 35px;
  margin-right: 10px;
  border: 1px solid rgba(201, 201, 201, 1);
  border-radius: 5px;
  width: 100px;
}

.orgchart-topmenu .btn-publish {
  float: right;
  margin-top: 15px;
  height: 35px;
  margin-right: 10px;
  background: rgba(3, 194, 114, 1);
  color: white;
  border: 0;
  border-radius: 5px;
  width: 100px;
  font-weight: bold;
  font-size: 14px;
}

.orgchart-topmenu .btn-exit {
  float: right;
  margin-top: 15px;
  margin-right: 20px;
  background: rgba(61, 97, 255, 1);
  border: 0px;
  color: white;
  height: 35px;
  width: 35px;
  font-size: 15px;
  border-radius: 5px;
  min-width: 35px;
  box-shadow: none;
  padding-top: 10px;
}

/* ========================================================================
* Organization Chart - Zoom
* ======================================================================== */

.orgchart-zoom {
  position: absolute;
  right: 50px;
  top: 90px;
  z-index: 50;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  background: white;
  direction: ltr;
}

.orgchart-zoom button {
  background: transparent;
  border: 0;
  height: 40px;
  width: 45px;
  font-size: 20px;
  padding: 0px;
}

.orgchart-zoom button:first-child {
  border-right: 1px solid #eaeaea;
  width: 48px;
}

/* ========================================================================
* Organization Chart - Node
* ======================================================================== */

.orgchart-node-container {
  width: 250px;
  margin-left: auto;
  margin-right: auto;
}

.orgchart-node .focused-top,
.orgchart-node .focused-bottom,
.orgchart-node .focused-left,
.orgchart-node .focused-right {
  position: absolute;
  height: 10px;
  width: 10px;
  background: white;
  z-index: 100;
  border-radius: 100%;
  border: 1px solid rgba(0, 122, 255, 1);
  display: none;
}

.orgchart-node .focused-top {
  left: calc(50% - 5px);
  margin-top: -6px;
}

.orgchart-node .focused-bottom {
  left: calc(50% - 5px);
  bottom: 0px;
  margin-bottom: -5px;
}

.orgchart-node .focused-left {
  top: calc(50% - 5px);
  margin-left: -6px;
}

.orgchart-node .focused-right {
  top: calc(50% - 5px);
  right: 0px;
  margin-right: -6px;
}

.focused .orgchart-node .focused-top,
.focused .orgchart-node .focused-bottom,
.focused .orgchart-node .focused-left,
.focused .orgchart-node .focused-right {
  display: block;
}

.orgchart-node {
  height: 180px;
  width: 180px;
  background: white;
  border-radius: 10px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  text-align: center;
  padding-top: 1px;
  box-shadow: 0px 1px 4px 0px rgba(64, 79, 134, 0.27);
  cursor: pointer;
}

td.shorten .orgchart-node {
  height: 190px !important;
}

.orgchart-node .count {
  float: right;
  background-color: rgba(255, 62, 86, 1);
  color: white;
  border-radius: 0px 6px 0px 15px;
  height: 25px;
  width: 25px;
  font-weight: bold;
  text-align: center;
  margin-top: -1px;
}

.orgchart-node .photo {
  height: 80px;
  width: 80px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
}

.orgchart-node .photo .orgchart-picture {
  border-radius: 40px;
}

.orgchart-node .name {
  font-weight: 600;
  margin-top: 6px;
}

.orgchart-node .role,
.orgchart-node .department {
  color: rgba(86, 86, 86, 0.6);
  font-size: 12px;
}

.orgchart-node .department i {
  margin-right: 5px;
}

.orgchart-node .options {
  position: absolute;
  top: 0;
  left: 0;
  margin: 5px 10px;
}

.orgchart-node .options .dropdown-menu {
  position: absolute;
}

.orgchart-node .options .dropdown-menu a {
  font-weight: 500;
  color: #323c47;
  margin: 5px;
  padding: 10px;
}

.orgchart-node .options .dropdown-menu a i {
  margin-right: 10px;
  font-size: 14px;
  color: #3d61ff;
}

.orgchart-node .status {
  position: absolute;
  bottom: 0;
  text-align: center;
  width: 100%;
  height: 25px;
  padding-top: 3px;
  font-weight: 400;
  border-radius: 0px 0px 10px 10px;
}

.orgchart-node .status.inactive {
  background: rgba(235, 235, 235, 1);
}

.orgchart-node .status.offboarding {
  background: rgba(248, 15, 75, 0.1);
  color: rgba(248, 15, 75, 1);
}

.orgchart-node .status.onboarding {
  background: rgba(254, 243, 229, 1);
  color: rgba(230, 138, 21, 1);
}

.orgchart-node .priority {
  background: rgb(230, 234, 255);
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 10px;
  border-radius: 2px;
  padding: 0px 10px;
  font-style: italic;
  z-index: 100;
  font-weight: 600;
}

.orgchart-node .status.priority:hover {
  text-decoration: underline;
}

.orgchart-node .status.report_each_other {
  background: rgb(230, 234, 255);
  color: rgb(0, 31, 169);
}

.orgchart-node .status.report_each_other:hover {
  text-decoration: underline;
}

/* ========================================================================
* Organization Chart - List Node
* ======================================================================== */

.orgchart-list-node {
  width: 180px;
  background: white;
  border-radius: 10px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  padding-top: 1px;
  padding-bottom: 5px;
  box-shadow: 0px 1px 4px 0px rgba(64, 79, 134, 0.27);
}

.orgchart-list-node ul {
  margin-top: 10px;
  padding-left: 0px !important;
}

.orgchart-list-node ul li {
  list-style-type: none;
  white-space: nowrap;
  margin-left: -1px;
  margin-right: -1px;
  position: relative;
}

.orgchart-list-node-li {
  cursor: pointer;
}

.orgchart-list-node-li .focused-left,
.orgchart-list-node-li .focused-right {
  position: absolute;
  height: 10px;
  width: 10px;
  background: white;
  z-index: 100;
  border-radius: 100%;
  border: 1px solid rgba(0, 122, 255, 1);
  display: none;
}

.orgchart-list-node-li .focused-left {
  top: 10px;
  margin-left: -6px;
}

.orgchart-list-node-li .focused-right {
  top: 10px;
  right: 0px;
  margin-right: -6px;
}

td.focused .orgchart-list-node-li.li-focused .focused-left,
td.focused .orgchart-list-node-li.li-focused .focused-right {
  display: block;
}

.orgchart-list-node-li.expand {
  background: #3d61ff !important;
  color: white;
}

.orgchart-list-node-li.expand .count {
  background: white !important;
  color: #3d61ff !important;
}

.orgchart-list-node .title {
  margin-left: 15px;
  margin-top: 10px;
  font-weight: bold;
}

.orgchart-list-node .photo .orgchart-picture {
  border-radius: 12.5px;
}

.orgchart-list-node .photo {
  height: 25px;
  width: 25px;
  margin-left: 10px;
  display: inline-block;
  margin-top: 5px;
}

.orgchart-list-node .count {
  height: 12px;
  width: 12px;
  background: rgba(255, 62, 86, 1);
  color: white;
  text-align: center;
  border-radius: 10px;
  position: absolute;
  top: 2px;
  font-size: 8px;
  margin-left: 18px;
  font-weight: 500;
}

.orgchart-list-node .count div {
  margin-top: -3.5px;
}

.orgchart-list-node .name {
  display: inline-block;
  margin-left: 10px;
  vertical-align: top;
  width: 70px;
  overflow-wrap: break-word;
  white-space: normal;
  margin-top: 7px;
  margin-bottom: 5px;
  font-weight: 500;
}

.orgchart-list-node .name.inactive {
  color: rgb(195, 193, 193) !important;
}

.orgchart-list-node .name.offboarding {
  color: rgba(248, 15, 75, 1) !important;
}

.orgchart-list-node .name.onboarding {
  color: rgba(230, 138, 21, 1) !important;
}

.orgchart-list-node .options {
  position: absolute;
  top: 0;
  right: 0;
  margin: 8px 10px 5px 10px;
}

.orgchart-list-node .options .dropdown-menu {
  position: absolute;
}

.orgchart-list-node .options .dropdown-menu a {
  font-weight: 500;
  color: #323c47;
  margin: 5px;
  padding: 10px;
}

.orgchart-list-node .options .dropdown-menu a i {
  margin-right: 10px;
  font-size: 14px;
  color: #3d61ff;
}

.orgchart-list-node .showmore {
  cursor: pointer;
  padding-left: 60px;
  color: rgba(0, 122, 255, 1);
  font-weight: 500;
}

.orgchart-list-node .priority {
  position: absolute;
  top: 0;
  right: 0;
  margin: 6px 0px 5px 0px;
  font-size: 9px;
  color: #A3A3A3;
  width: 60px;
  text-align: center;
  font-weight: 500;
  border-radius: 2px;
  font-style: italic;
}

/* ========================================================================
* Organization Chart - Line
* ======================================================================== */

.orgchart .vertical-line {
  background: rgba(176, 183, 206, 1);
}

.orgchart .upline,
.orgchart .downline {
  height: 25px;
  width: 1px;
  margin-left: auto;
  margin-right: auto;
}

.orgchart .downline {
  height: 41px;
}

.orgchart td.shorten .downline {
  height: 31px !important;
}

.orgchart .list-downline {
  height: calc(100% - 25px);
  width: 1px;
  margin-left: 124.5px;
  position: absolute;
  bottom: 0;
  z-index: -1;
}

.orgchart .horizontal-line {
  border-top: 1px solid rgba(176, 183, 206, 1);
  width: 50%;
}

.orgchart .leftline {
  float: left;
}

.orgchart .rightline {
  float: right;
}

.orgchart .custom-leftline {
  float: left;
  width: 50%;
}

.orgchart .custom-rightline {
  float: right;
  width: 50%;
}

.orgchart .custom-leftline .custom-leftline-left,
.orgchart .custom-rightline .custom-rightline-left {
  border-top: 1px solid rgba(176, 183, 206, 1);
  float: left;
}

.orgchart .custom-leftline .custom-leftline-right,
.orgchart .custom-rightline .custom-rightline-right {
  border-top: 1px solid rgba(176, 183, 206, 1);
  float: right;
}

/* ========================================================================
* Organization Chart - Focused
* ======================================================================== */

.orgchart .focused .orgchart-node,
.orgchart .focused .orgchart-list-node,
.orgchart .children-focused .orgchart-node,
.orgchart .parent-focused .orgchart-node,
.orgchart .children-focused .orgchart-list-node,
.orgchart .parent-focused .orgchart-list-node {
  border: 2px solid rgba(0, 122, 255, 1) !important;
}

.orgchart .focused .orgchart-count,
.orgchart .children-focused .orgchart-count,
.orgchart .parent-focused .orgchart-count {
  background-color: rgba(0, 122, 255, 1) !important;
}

.orgchart .focused .vertical-line,
.orgchart .children-focused .upline,
.orgchart .parent-focused .upline,
.orgchart .parent-focused .downline,
.orgchart .parent-focused .list-downline {
  background: rgba(0, 122, 255, 1) !important;
  width: 2px !important;
}

.orgchart .focused .list-downline,
.orgchart .parent-focused .list-downline {
  margin-left: 124px !important;
}

.orgchart .children-focused .custom-leftline-left,
.orgchart .children-focused .custom-rightline-left,
.orgchart .children-focused .custom-leftline-right,
.orgchart .children-focused .custom-rightline-right {
  border-top: 2px solid rgba(0, 122, 255, 1) !important;
}

.orgchart .children-focused .horizontal-line {
  border-top: 2px solid rgba(0, 122, 255, 1) !important;
}

.orgchart .highlight {
  border-top: 2px solid rgba(0, 122, 255, 1) !important;
}

/* ========================================================================
* Organization Chart - Sidemenu
* ======================================================================== */

.orgchart-sidemenu-container {
  width: 0px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 5px 19px 20px 0px rgba(0, 0, 0, 0.1);
  float: right;
  border-top: 1px solid #eaeaea;
  position: absolute;
  top: 65px;
  right: 0;
  transition: 0.75s;
  z-index: 60;
  display: none;
  bottom: 0;
}

.orgchart-sidemenu-container.active {
  transition: 0.75s;
  width: 300px;
  display: block;
}

.orgchart-sidemenu-toggle {
  height: 50px;
  width: 30px;
  background: white;
  float: right;
  margin-top: 90px;
  box-shadow: -1px 0px 2px 0px rgba(0, 0, 0, 0.14);
  border-right: 1px solid #eaeaea;
  border-radius: 5px 0px 0px 5px;
  position: absolute;
  right: -2px;
  top: 75px;
  /*transition: 0.75s;*/
  cursor: pointer;
}

.orgchart-sidemenu-toggle.active {
  /*transition: 0.75s;*/
  right: 300px;
}

.orgchart-sidemenu-toggle i {
  font-size: 15px;
  margin-top: 16px;
  margin-left: 10px;
  color: rgba(0, 122, 255, 1);
}

.orgchart-sidemenu-title {
  font-size: 17px;
  font-weight: bold;
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 20px;
  display: inline-block;
}

.orgchart-sidemenu-close-btn {
  display: inline-block;
  margin-left: 100px;
  margin-top: 0px;
  font-size: 16px;
  cursor: pointer;
}

.orgchart-sidemenu-tab {
  border-top: 1px solid #eaeaea;
}

.orgchart-sidemenu-tab-select {
  display: inline-block;
  font-size: 14px;
  text-align: center;
  width: 49%;
  color: rgba(154, 154, 154, 1);
  font-weight: bold;
  cursor: pointer;
}

.orgchart-sidemenu-tab-select.active {
  color: #5E5E5E;
}

.orgchart-sidemenu-tab-select.active .underline {
  margin-left: 25px;
  margin-right: 25px;
  padding-top: 15px;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(33, 130, 253, 1);
}

.orgchart-sidemenu-content {
  height: calc(100% - 100px);
  border-top: 1px solid #eaeaea;
  overflow-y: hidden;
  overflow-x: hidden;
}

.orgchart-sidemenu-content:hover {
  overflow-y: auto !important;
}

.orgchart-sidemenu-content::-webkit-scrollbar {
  width: 6px;
}

.orgchart-sidemenu-content::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.orgchart-sidemenu-content::-webkit-scrollbar-thumb {
  background: rgba(61, 97, 255, 1);
  border-radius: 2px;
}

.orgchart-sidemenu-content::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* ========================================================================
* Organization Chart - Sitemap
* ======================================================================== */

.orgchart-sidemenu-sitemap ul {
  list-style-type: none;
  padding-left: 15px;
}

.orgchart-sidemenu-sitemap ul .li-caret-down {
  display: inline-block;
  font-size: 18px;
  margin-right: 10px;
  width: 10px;
  vertical-align: text-top;
  cursor: pointer;
  margin-top: 7.5px;
  margin-bottom: 7.5px;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.orgchart-sidemenu-sitemap ul .li-caret-down.collapsed {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
}

.orgchart-sidemenu-sitemap ul .li-user {
  display: inline-block;
  margin-right: 5px;
  vertical-align: text-top;
  margin-top: 7.5px;
  margin-bottom: 7.5px;
}

.orgchart-sidemenu-sitemap ul .li-user.root {
  color: rgba(255, 173, 3, 1);
}

.orgchart-sidemenu-sitemap ul .li-user.deepest {
  color: rgba(111, 117, 133, 0.7);
}

.orgchart-sidemenu-sitemap ul .li-name {
  word-break: break-word;
  max-width: 160px;
  vertical-align: text-top;
  display: inline-block;
  white-space: normal;
  margin-top: 7.5px;
  margin-bottom: 7.5px;
  cursor: pointer;
}

.orgchart-sidemenu-sitemap ul .li-name-bold {
  font-weight: bold;
}

.orgchart-sidemenu-sitemap-li {
  white-space: nowrap;
}

.orgchart-sidemenu-sitemap-li.focused .li-user,
.orgchart-sidemenu-sitemap-li.focused .li-caret-down,
.orgchart-sidemenu-sitemap-li.focused .li-name {
  color: rgba(0, 122, 255, 1) !important;
}

/* ========================================================================
* Organization Chart - Unassigned
* ======================================================================== */

.orgchart-sidemenu-unassign-content {
  padding: 10px 20px 10px 10px;
}

.orgchart-sidemenu-unassign-photo {
  height: 45px;
  width: 45px;
  margin-right: 7px;
  display: inline-block;
}

.orgchart-sidemenu-unassign-photo .orgchart-picture {
  border-radius: 50px;
}

.orgchart-sidemenu-unassign-details {
  margin-top: 2px;
  display: inline-block;
  vertical-align: top;
}

.orgchart-sidemenu-unassign-add {
  display: inline-block;
  vertical-align: top;
  font-size: 14px;
  text-align: right;
  float: right;
  margin-top: 10px;
  cursor: pointer;
  color: rgba(0, 122, 255, 1);
  font-weight: 500;
}

.orgchart-sidemenu-unassign-ellipsis {
  display: inline-block;
  vertical-align: top;
  margin-top: 10px;
  margin-right: 5px;
  color: #A3A3A3;
}

.orgchart-sidemenu-unassign-ellipsis span:first-child {
  margin-right: -2px;
}

.orgchart-sidemenu-unassign-details-name {
  font-weight: bold;
  word-break: break-word;
  width: 150px;
  word-spacing: normal;
}

.orgchart-sidemenu-unassign-search {
  border: 1px solid rgba(0, 0, 0, 0.2);
  display: inline-block;
  vertical-align: top;
  width: 260px;
  padding: 5px 10px;
  margin-left: 20px;
  height: 34px;
  border-radius: 3px;
  margin-top: 20px;
  margin-bottom: 15px;
}

.orgchart-sidemenu-unassign-search i {
  color: rgba(0, 122, 255, 1);
}

.orgchart-sidemenu-unassign-search input {
  width: calc(100% - 23px);
  display: inline-block;
  padding-left: 7px;
  border: 0px;
}

.orgchart-sidemenu-unassign-search input:focus {
  outline: none;
  border: 0px !important;
}

/* ========================================================================
* Organization Chart - Modal
* ======================================================================== */

.orgchart-unassign-modal-photo,
.orgchart-user-replace-modal-photo {
  height: 65px;
  width: 65px;
  margin-right: 7px;
  display: inline-block;
  margin-left: 20px;
  margin-top: 13px;
}

.orgchart-unassign-modal-photo .emp-photo,
.orgchart-user-replace-modal-photo .emp-photo {
  border-radius: 75px;
}

.orgchart-unassign-modal-details,
.orgchart-user-replace-modal-details {
  display: inline-block;
  vertical-align: top;
  margin-top: 15px;
  margin-left: 20px;
}

.orgchart-unassign-modal-details .emp-name,
.orgchart-user-replace-modal-details .emp-name {
  font-weight: bold;
}

.orgchart-unassign-modal-input-title,
.orgchart-user-replace-modal-input-title {
  display: inline-block;
  font-weight: bold;
  margin-left: 20px;
  margin-right: 20px;
  width: 80px;
  margin-top: 15px;
}

.orgchart-user-replace-modal-input-title {
  width: 70px;
}

.orgchart-user-replace-modal-input {
  display: inline-block;
  width: 200px;
  vertical-align: text-bottom;
}

.orgchart-unassign-modal-input-tag {
  display: inline-block;
  border: 1px solid rgba(201, 201, 201, 1);
  width: 430px;
  vertical-align: top;
  margin-top: 17px;
  border-radius: 5px;
  padding-left: 10px;
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.orgchart-unassign-modal-input-tag .select2-search-choice {
  background-color: rgb(246, 250, 254) !important;
  border: 1px solid rgb(204, 226, 255) !important;
  background-image: none !important;
  color: rgb(6, 125, 255) !important;
  font-weight: 500;
}

.orgchart-topmenu-search {
  margin-top: 15px !important;
}
/* ========================================================================
* Dashboard V1
* ======================================================================== */

.herd-dashboard .header-template {
  padding: 15px 15px;
}

.herd-dashboard .breadcrumb-wrapper .breadcrumb {
  margin-bottom: 0px;
}

.herd-dashboard .sidebar-item {
  min-height: 14px;
  line-height: 14px;
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 15px;
  padding-bottom: 15px;
}

/* ========================================================================
* Workbench
* ======================================================================== */

.herd-dashboard .workbench-main {
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 15px;
  padding-bottom: 15px;
  max-height: 170px;
  overflow: auto;
}

.herd-dashboard .workbench-main .workbench-item a:hover {
  text-decoration: none;
}

.herd-dashboard .workbench-main .workbench-item {
  color: #2182fd;
  font-size: 14px;
  font-weight: bold;
  padding-bottom: 10px;
  position: relative;
}

.herd-dashboard .workbench-main .workbench-item i {
  position: relative;
  font-size: 35px;
  color: #ffa51f;
  vertical-align: top;
}

.herd-dashboard .workbench-main .workbench-item .custom-icon {
  height: 34px;
  width: 34px;
  background-color: #ffa51f;
  border-radius: 100%;
  background: #ffa51f url(../angularjs/assets/weearn-icon-white.svg) no-repeat center center;
  display: inline-block;
  vertical-align: text-bottom;
}

.herd-dashboard .workbench-main .workbench-item .custom-swap-icon {
  height: 34px;
  width: 34px;
  background-color: #ffa51f;
  border-radius: 100%;
  background: #ffa51f url(../angularjs/assets/swap_icon.png) no-repeat center center;
  display: inline-block;
  vertical-align: text-bottom;
  background-size: 35px;
  background-position-y: -1px;
}

.herd-dashboard .workbench-main .workbench-item .custom-fa-icon {
  height: 34px;
  width: 34px;
  background-color: #ffa51f;
  border-radius: 100%;
  display: inline-block;
  vertical-align: top;
}

.herd-dashboard .workbench-main .workbench-item .custom-fa-icon i {
  color: white !important;
  font-size: 16px;
  padding-top: 8px;
  padding-left: 7px;
}

.herd-dashboard .workbench-main .workbench-item .workbench-badge {
  padding-left: 6px;
  padding-right: 6px;
  border-radius: 9px !important;
  color: #ffffff;
  background-color: #ff5f74;
  position: absolute;
  left: 0px;
  font-size: 10px;
  height: 20px;
  margin-left: -5px;
  margin-top: -5px;
  display: inline-block;
}

.herd-dashboard .workbench-main .workbench-item .workbench-title {
  color: #777;
  padding-left: 10px;
  position: relative;
  vertical-align: top;
  display: inline-block;
  width: calc(100% - 40px);
  padding-top: 0px;
  line-height: 35px;
}

.herd-dashboard .workbench-main .empty-records {
  width: 170px;
  height: 115px;
}

.herd-dashboard .workbench-main .empty-record-title {
  color: #a5aab8;
  font-size: 11px;
}

/* ========================================================================
* Attendance Summary
* ======================================================================== */

.herd-dashboard .dashboard-panel .dashboard-widget {
  height: 215px;
}

.herd-dashboard .attendance-summary-main {
  padding: 20px 25px;
}

.herd-dashboard .attendance-summary-main .attendance-summary-item a:hover {
  text-decoration: none;
}

.herd-dashboard .attendance-summary-main .attendance-summary-item {
  color: #2182fd;
  font-size: 14px;
}

.herd-dashboard .attendance-summary-main .attendance-summary-item i {
  position: relative;
  font-size: 23px;
  color: #2182fd;
}

.herd-dashboard .attendance-summary-main .attendance-summary-item .item-badge {
  border-radius: 9px !important;
  background-color: #ff5f74;
  position: relative;
  top: 6px;
  left: -7px;
  height: 8px;
  width: 8px;
}

.herd-dashboard .attendance-summary-main .attendance-summary-item .warning-icon {
  color: #ffa51f;
}

.herd-dashboard .attendance-summary-main .attendance-summary-item .attendance-summary-badge {
  padding-left: 6px;
  padding-right: 6px;
  border-radius: 9px !important;
  margin-left: 5px;
  color: #ffffff;
  background-color: #ff5f74;
  position: absolute;
  left: 15px;
  font-size: 10px;
}

.herd-dashboard .attendance-summary-main .attendance-summary-item .attendance-summary-title {
  color: #777;
  padding-left: 10px;
  padding-right: 5px;
  position: relative;
  display: inline-block;
  min-width: 45px;
}

.herd-dashboard .attendance-summary-main .attendance-summary-item .attendance-summary-title.no-padding-left {
  padding-left: 0px !important;
}

.herd-dashboard .attendance-summary-main .attendance-summary-item .attendance-summary-title .title-label {
  color: #2182fd;
  font-weight: bold;
}

.herd-dashboard .attendance-summary-main .attendance-summary-item .attendance-summary-title .warning-label {
  color: #ffa51f;
  font-weight: bold;
}

/* ========================================================================
* Leave List
* ======================================================================== */

.herd-dashboard .leave-list-main {
  padding: 15px;
  max-height: 170px;
  overflow: auto;
}

.herd-dashboard .leave-list-main .empty-records {
  width: 170px;
  height: 115px;
}

.herd-dashboard .leave-list-main .empty-record-title {
  color: #a5aab8;
  font-size: 11px;
}

.herd-dashboard .leave-list-main .leave-item {
  font-size: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  line-height: 15px;
}

.herd-dashboard .leave-list-main .leave-item .list-picture-container {
  display: inline-block;
  vertical-align: top;
}

.herd-dashboard .leave-list-main .leave-item .emp-info-container {
  margin-left: 15px;
  display: inline-block;
  padding-top: 5px;
}

.herd-dashboard .leave-list-main .leave-item .emp-name {
  font-size: 14px;
}

.herd-dashboard .leave-list-main .leave-item .role-name {
  font-size: 11px;
  color: #8f8f8f;
}

.herd-dashboard .leave-list-main .leave-item .leave-item-badge {
  font-size: 11px;
  padding: 4px;
  border-radius: 3px;
  background-color: #FFFFFF;
  border: 1px solid #2182fd;
  text-align: center;
}

.herd-dashboard .leave-list-main .leave-item .leave-item-badge .approved {
  color: #2182fd;
}

.herd-dashboard .leave-list-main .leave-item .leave-item-badge .pending {
  color: #8f8f8f;
}

/* ========================================================================
* Calendar
* ======================================================================== */

.herd-dashboard .dashboard-panel {
  box-shadow: 0px 4px 10px 0px rgb(112 144 176 / 0.2);
}

.herd-dashboard .dashboard-panel .panel-body {
  margin: 0;
  padding: 0;
}

.herd-dashboard .dashboard-panel .panel-info {
  padding: 15px 15px 0 15px;
}

.herd-dashboard .dashboard-panel .panel-info .header {
  font-size: 14px;
  color: #69737d;
  text-align: left;
  font-weight: bold;
}

.herd-dashboard .dashboard-panel .panel-info .header .date-display {
  color: #2182fd;
  font-weight: bold;
}

.herd-dashboard .dashboard-panel .panel-body .notification-sidebar {
  padding: 0 15px;
}

.herd-dashboard .dashboard-calendar .dashboard-widget {
  height: 1000px;
}

.herd-dashboard .dashboard-container {
  min-height: 500px;
}

.herd-dashboard .dashboard-container {
  display: flex;
}

.herd-dashboard .dashboard-container .calender-sidebar,
.herd-dashboard .dashboard-container .calender-content {
  display: flex;
  flex-direction: column;
}

.herd-dashboard .dashboard-container .calender-content {
  width: 100%;
}

.herd-dashboard .dashboard-container .calender-sidebar {
  min-width: 185px;
  border-right: 1px solid #e3ebf3;
  padding-right: 0px;
  padding-top: 2px;
}

.herd-dashboard .dashboard-container .calender-sidebar.collapsed {
  display: block !important;
}

.herd-dashboard .calender-content .calender-header .calender-header-left {
  padding: 20px 0;
  margin-left: 15px;
}

.herd-dashboard .calender-content .calender-header .calender-header-right {
  padding: 20px 0;
  float: right;
  margin-right: 15px;
}

.herd-dashboard .dashboard-container .calender-sidebar .filter-list-title {
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  padding: 20px 0;
}

.herd-dashboard .dashboard-container .calender-sidebar .filter-list {
  font-weight: normal;
  padding-left: 5px;
  padding-right: 5px;
}

.herd-dashboard .dashboard-container .calender-sidebar .filter-list-label-wrapper {
  padding-left: 10px;
  padding-right: 0px;
}

.herd-dashboard .dashboard-container .calender-sidebar .filter-list .calendar-filter-checkbox .col-sm-8 {
  width: 135px;
}

.herd-dashboard .dashboard-container .calender-sidebar .filter-list .calendar-filter-checkbox .col-sm-4 {
  width: 35px;
}

.herd-dashboard .dashboard-container .calender-sidebar .filter-list .filter-rounded-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  line-height: 14px;
  vertical-align: middle;
  border-radius: 8px;
  border: solid 2px;
}

.herd-dashboard .dashboard-container .calender-content .calendar-content-icon {
  background-color: #2182fd;
  color: #ffffff;
  font-size: 14px;
  height: 30px;
  width: 40px;
  line-height: 30px;
  padding: 0 12px;
  border-radius: 2px;
  box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
  border: 1px solid #2182fd;
}

.herd-dashboard .dashboard-container .calender-content .calendar-content-icon.collapsed {
  background-color: #ffffff;
  color: #2182fd;
}

.herd-dashboard .dashboard-container .calendar-month-container {
  padding: 25px 14px 15px 0px;
  font-size: 18px;
  color: #554f46;
  text-align: center;
}

.herd-dashboard .dashboard-container .calendar-month-container a,
.herd-dashboard .dashboard-container .calendar-month-container a:hover {
  color: #554f46;
  text-decoration: none;
}

.herd-dashboard .dashboard-container .calendar-month-container .fa-calendar-alt {
  color: #2182fd;
  float: left;
  font-size: 20px;
}

.herd-dashboard .dashboard-container .calendar-month-container .calendar-month-text {
  letter-spacing: 0.03em;
  line-height: 23px;
  padding: 0 8px 0 15px;
  font-size: 19px;
  min-width: 174px;
  display: inline-block;
}

.herd-dashboard .dashboard-container .calendar-month-container .calendar-month-text-label {
  padding: 0px 10px 0px 10px;
}

.herd-dashboard .dashboard-container .calender-header .btn-approve {
  background-color: #FFFFFF;
  color: #2182fd;
  border: 1px solid #2182fd;
}

.herd-dashboard .dashboard-container .calender-header .header-button {
  min-width: 40px;
  background-color: #2182fd;
}

.herd-dashboard .dashboard-container .calender-header .header-button i {
  margin-right: 0px;
}

.herd-dashboard .dashboard-container .calender-header .header-button.btn-dropdown {
  min-width: 40px !important;
  color: #fff !important;
  background-color: #2182fd !important;
}

.herd-dashboard .dashboard-container .calender-content .horizontal-navigation-container {
  padding: 20px 15px 15px 15px;
}

.herd-dashboard .dashboard-container .tui-full-calendar-layout {
  padding: 10px;
}

.herd-dashboard .dashboard-container .tui-full-calendar-layout .tui-full-calendar-month {
  border: 1px solid #e3ebf3;
}

.herd-dashboard .dashboard-container .calender-content .upcoming-event-icon {
  color: #2182fd;
  padding-left: 3px;
  padding-right: 3px;
}

.herd-dashboard .dashboard-container .calender-content .leave-day-type-icon {
  color: #ffffff;
  padding-left: 3px;
  padding-right: 3px;
}

.herd-dashboard .tui-full-calendar-weekday-grid-footer .tui-full-calendar-weekday-exceed-in-month {
  display: block;
  padding: 2px 6px;
}

.herd-dashboard .dashboard-container .herd-more-view {
  float: left;
  margin: 0;
  height: 24px;
  line-height: 24px;
  padding: 1px 5px 1px 6px;
  border-radius: 1px;
  border-style: solid;
  border-color: #acb8c4;
  border-width: 0px 0px 0px 3px;
  background: #f2f4f6;
  font-size: 14px;
  color: #acb8c4;
  width: 100%;
  font-weight: 600;
}

.herd-dashboard .dashboard-container .tui-full-calendar-weekday-grid-footer {
  width: 95%;
}

.herd-dashboard .dashboard-container .tui-full-calendar-month-dayname-item {
  padding-right: 8px !important;
}

.herd-dashboard .dashboard-container .tui-full-calendar-weekday-grid-date-decorator {
  background: #2182fd;
}

.herd-dashboard .dashboard-container .calendar-monthday-grid-holiday-decorator {
  color: #ff4040;
}

.herd-dashboard .dashboard-container .tui-full-calendar-popup-container {
  font-weight: bold;
}

.herd-dashboard .dashboard-container .tui-full-calendar-popup-container .tui-full-calendar-section-button .tui-full-calendar-ic-edit {
  background-image: none !important;
}

.herd-dashboard .dashboard-container .tui-full-calendar-popup-container .tui-full-calendar-section-button .tui-full-calendar-ic-delete {
  background-image: none !important;
}

/* ========================================================================
* Document List
* ======================================================================== */

.herd-dashboard .document-list-main {
  padding: 20px;
  font-size: 14px;
}

.herd-dashboard .document-list-main .document-list-header {
  font-weight: bold;
  border-radius: 3px;
  border: 3px solid #F2F8FF;
  color: #777;
}

.herd-dashboard .document-list-main .document-list-header.active {
  background-color: #F2F8FF;
  color: #000000;
}

.herd-dashboard .document-list-main .document-list-body {
  padding: 10px 0px 10px 0px;
  max-height: 110px;
  overflow: auto;
}

.herd-dashboard .document-list-main .document-list-body .wave-spinner {
  margin: 10px auto !important;
}

.herd-dashboard .document-list-main .document-list-body .document-item {
  margin-bottom: 3px;
}

.herd-dashboard .document-list-main .document-list-body .download-icon {
  color: #2182fd;
  font-size: 21px;
}

.herd-dashboard .document-list-main .document-list-body .document-item .document-item-name {
  padding-top: 3px;
  color: #777;
  display: inline-block;
  vertical-align: top;
  margin-left: 10px;
}

/* ========================================================================
* Pending for Employee Confirmation
* ======================================================================== */

.dashboard-employee-confirmation .count-badge {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 2px;
  padding-bottom: 2px;
  border-radius: 9px !important;
  margin-left: 5px;
  color: #ffffff;
  background-color: #f80f4b;
}

/* ========================================================================
* Calendar apply leave form
* ======================================================================== */

.calendar-apply-leave-form .calendar-leave-request-item .select-wrapper {
  width: 200px;
}

.calendar-apply-leave-form .calendar-leave-request-item .calendar-leave-request-item-value {
  position: absolute;
  right: 1px;
  top: 0px;
}

/* ========================================================================
* Custom calendar UI
* ======================================================================== */

.herd-dashboard .tui-full-calendar-month-more-schedule {
  font-size: 14px;
}

.herd-dashboard .tui-full-calendar-weekday-schedule-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 30px;
}

.herd-dashboard .tui-full-calendar-weekday-schedule-title > span {
  padding-left: 10px;
  font-weight: 500;
}

.herd-dashboard .tui-full-calendar-weekday-schedule-title > i > span {
  padding-left: 5px;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #554f46;
}

.herd-dashboard .tui-full-calendar-month-more {
  box-shadow: 1px 1px 5px 1px #868686 !important;
}

.herd-dashboard .tui-full-calendar-popup {
  box-shadow: 2px 2px 5px 1px #868686 !important;
}

.herd-dashboard .tui-full-calendar-popup .tui-full-calendar-popup-container {
  border: solid 1px transparent;
}

@media (max-width:992px) {
  .herd-dashboard .tui-full-calendar-weekday-schedule-title {
    font-size: 13px;
    font-weight: 200;
    line-height: 24px;
  }

  .herd-dashboard .tui-full-calendar-weekday-schedule {
    height: 24px !important;
    line-height: 24px !important;
  }

  .herd-dashboard .tui-full-calendar-weekday-schedule-title > span {
    padding-left: 0;
  }
}

/* ========================================================================
* Notification
* ======================================================================== */

.herd-dashboard .notification-list {
  padding: 15px;
  max-height: 170px;
  overflow: auto;
}

.herd-dashboard .notification-list .notification-list-footer {
  text-align: center;
  padding: 0 15px 0;
}

.herd-dashboard .notification-list .notification-list-footer .empty-records {
  width: 170px;
  height: 115px;
}

.herd-dashboard .notification-list .notification-list-footer  .empty-record-title {
  color: #a5aab8;
  font-size: 11px;
}

/* ========================================================================
* Widget settings
* ======================================================================== */

.herd-dashboard .dashboard-panel .header {
  cursor: all-scroll;
}

.herd-dashboard .grab-icon {
  padding-right: 10px;
  color: #d8d8d8;
}

.grabbable {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.herd-custom-dropdown .dropdown-list .dropdown-button i {
  font-size: 20px;
  color: #2182fd;
  border: 2px solid #2182fd;
  padding: 3px;
  border-radius: 4px;
}

.herd-custom-dropdown .dropdown-list .dropdown-content {
  box-shadow: 0px 4px 10px 0px rgb(112 144 176 / 0.2);
  margin-top: 5px;
  padding: 15px 15px 5px 15px;
  position: absolute;
  background-color: #ffffff;
  width: 400px;
  right: 0;
  z-index: 1;
}

.herd-custom-dropdown .dropdown-list .dropdown-content .header {
  text-align: left;
  font-size: 21px;
  font-weight: bold;
}

.herd-custom-dropdown .dropdown-list .dropdown-content .header-button a:hover {
  text-decoration: none;
}

.herd-custom-dropdown .dropdown-list .dropdown-content .body {
  font-size: 19px;
  padding: 15px 15px 5px 15px;
}

.herd-custom-dropdown .dropdown-list .dropdown-content button.btn {
  height: 30px;
}

.herd-dashboard .workbench-main::-webkit-scrollbar,
.herd-dashboard .notification-list::-webkit-scrollbar,
.herd-dashboard .document-list-main .document-list-body::-webkit-scrollbar {
  width: 6px;
}

.herd-dashboard .workbench-main::-webkit-scrollbar-track,
.herd-dashboard .notification-list::-webkit-scrollbar-track,
.herd-dashboard .document-list-main .document-list-body::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.herd-dashboard .workbench-main::-webkit-scrollbar-thumb,
.herd-dashboard .notification-list::-webkit-scrollbar-thumb,
.herd-dashboard .document-list-main .document-list-body::-webkit-scrollbar-thumb {
  background: rgba(61, 97, 255, 1);
  border-radius: 2px;
}

.herd-dashboard .workbench-main::-webkit-scrollbar-thumb:hover,
.herd-dashboard .notification-list::-webkit-scrollbar-thumb:hover,
.herd-dashboard .document-list-main .document-list-body::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* ========================================================================
* Analytic Summary
* ======================================================================== */

.dashboard-analytic .content-shadow-v5 {
  background-color: rgba(255, 255, 255, 1);
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 0px 30px;
}

.dashboard-analytic .border-box {
  border-radius: 8px;
  border: #d8d8d8 1px solid;
  padding: 5px 25px;
}

.dashboard-analytic .border-box:hover {
  background-color: #2182fd !important;
  color: #fff !important;
  cursor: pointer;
}

.dashboard-analytic .summary-title {
  color: #777;
  margin: 10px 10px 5px 10px;
  font-size: 14px;
}

.dashboard-analytic .border-box:hover .summary-title {
  color: #fff !important;
}

.dashboard-analytic .summary-body {
  font-size: 20px;
  color: #000000;
  font-weight: bold;
  margin: 0px 10px 5px 10px;
}

.dashboard-analytic .border-box:hover .summary-body {
  color: #fff !important;
}

.dashboard-analytic .summary-footer {
  font-size: 14px;
  margin: 0px 10px 10px 10px;
}

.dashboard-analytic .border-box:hover .summary-footer {
  color: #fff !important;
}

.herd-dashboard .labour-box {
  width: 600px;
  height: 400px;
}

.herd-dashboard .department-box {
  width: 850px;
  height: 400px;
}

.herd-dashboard .age-gender-box {
  width: 520px;
  height: 400px;
}

.herd-dashboard .race-religion-box {
  width: 520px;
  height: 400px;
}

.herd-dashboard .marital-box {
  width: 520px;
  height: 200px;
}

.herd-dashboard .chart-selected {
  color: #15cdff;
}
/* ========================================================================
* Global leave application
* ======================================================================== */

.leave-multi-select-table-container {
  box-shadow: rgba(0, 0, 0, 0.04) 0px 2px 4px 0px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  padding-top: 10px;
  background: white;
}

@media (min-width: 1300px) {
  .leave-multi-select-table-container {
    margin: 0px 160px !important;
  }
}

.leave-multi-select-table-container .global-leave-application-setup {
  padding: 20px 40px 50px 40px;
}

.leave-multi-select-table-container .fa-exclamation-circle {
  font-size: 16px;
  color: #FB8C00;
}

.leave-multi-select-table-container .fa-check-circle {
  font-size: 16px;
  color: #03C272;
}

.leave-multi-select-table-container .fa-times-circle {
  font-size: 16px;
  color: #FC577A;
}

.global-leave-application .hidden-table {
  display: none;
}

.table.leave-request-items-table tr:first-child td {
  border-top: 0px !important;
}

.table.leave-request-items-table td.td-daytype .input-select-object {
  margin-top: 10px;
}

.leave-approval {
  margin-bottom: 15px;
}

.leave-approval .approval-check-icon {
  margin-right: 5px;
  color: #03C272;
}

.leave-approval .approval-times-icon {
  margin-right: 5px;
  color: #FC577A;
}

.leave-approval .approval-exclamation-icon {
  margin-right: 5px;
  color: #FB8C00;
}

.leave-approval .approval-remark {
  margin-left: 25px;
  margin-top: 5px;
}

.btn-leave-type-reload {
  margin-left: 10px;
  color: #3d61ff;
  cursor: pointer;
}
/**
*** Workflow Page - Main CSS
**/

.workflow-scrollviewer {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 100px;
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: -o-grab;
  cursor: grab;
}

.workflow-scrollviewer:active {
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: -o-grabbing;
  cursor: grabbing;
}

.workflow-table {
  margin-top: 30px;
  margin-left: 20px;
  min-height: 1px;
  height: 1px;
}

.workflow-table td {
  position: relative;
  height: 100%;
}

.workflow-table tr td .bottom-line {
  background: grey;
  height: 1px;
  position: absolute;
  bottom: 0px;
}

.workflow-table tr td .end-line {
  background: grey;
  height: 1px;
  position: absolute;
  top: -1px;
  width: 100%;
}

.workflow-table .vertical-line {
  background: grey;
  width: 1px;
  height: calc(100% + 1px);
  margin-top: -1px;
  margin-left: calc(50% - 0.5px);
  grid-column-start: 1;
  grid-row: 1 / span 3;
}

.workflow-table .vertical-line-2 {
  background: grey;
  width: 1px;
  height: calc(100% + 1px);
  margin-left: calc(50% - 0.5px);
  position: absolute;
  top: -1px;
}

.workflow-table .state-view {
  display: grid;
  height: 100%;
}

.workflow-table .state-container {
  width: 250px;
  margin-left: auto;
  margin-right: auto;
  grid-column-start: 1;
  grid-row-start: 1;
}

.workflow-table .state.start {
  margin: -2px 30px 30px 30px;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0px 1px 4px 0px rgba(64, 79, 134, 0.27);
}

.workflow-table .state.start .header {
  background: #606ab3;
  color: white;
  padding: 5px 15px;
  border-radius: 5px 5px 0px 0px;
}

.workflow-table .state.start .content {
  background: white;
  padding: 5px 15px;
  border-radius: 5px;
}

.workflow-table .state.condition {
  margin: 30px;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0px 1px 4px 0px rgba(64, 79, 134, 0.27);
}

.workflow-table .state.condition .header {
  background: white;
  padding: 5px 15px;
  font-weight: 500;
  color: #2da657;
  border-radius: 5px 5px 0px 0px;
}

.workflow-table .state.condition .header.priority {
  float: right;
  padding: 0px;
  font-size: 11px;
  font-weight: normal;
  color: #a7a7a7;
}

.workflow-table .state.condition .content {
  background: white;
  padding: 5px 15px;
  border-radius: 0px 0px 5px 5px;
}

.workflow-table .state.approver {
  margin: 30px;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0px 1px 4px 0px rgba(64, 79, 134, 0.27);
}

.workflow-table .state.approver .header {
  background: #eb9534;
  color: white;
  padding: 5px 15px;
  border-radius: 5px 5px 0px 0px;
}

.workflow-table .state.approver .content {
  background: white;
  padding: 5px 15px;
  border-radius: 0px 0px 5px 5px;
}

.workflow-table .state.notifier {
  margin: 30px;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0px 1px 4px 0px rgba(64, 79, 134, 0.27);
}

.workflow-table .state.notifier .header {
  background: #6097fc;
  color: white;
  padding: 5px 15px;
  border-radius: 5px 5px 0px 0px;
}

.workflow-table .state.notifier .content {
  background: white;
  padding: 5px 15px;
  border-radius: 0px 0px 5px 5px;
}

.workflow-table .state.error {
  border: 2px solid red;
}

.workflow-table .state.error .error-toggle {
  position: absolute;
  top: 21px;
  left: 21px;
  background: red;
  height: 20px;
  width: 20px;
  text-align: center;
  border-radius: 100%;
  color: white;
  font-weight: 600;
}

.workflow-table .state.start.error .error-toggle {
  top: -10px;
}

.workflow-table .state.error .error-toggle:hover .error-toggle-msg,
.workflow-table .state.error .error-toggle:hover .error-toggle-arrow {
  display: block;
}

.workflow-table .state.error .error-toggle .error-toggle-msg {
  color: #5E5E5E;
  width: 200px;
  position: absolute;
  left: -15px;
  top: 25px;
  background: white;
  padding-top: 10px;
  padding-right: 10px;
  font-weight: normal;
  text-align: left;
  box-shadow: 0px 1px 4px 0px rgba(64, 79, 134, 0.27);
  border-radius: 5px;
  z-index: 200;
  display: none;
}

.workflow-table .state.error .error-toggle .error-toggle-arrow {
  width: 50px;
  height: 20px;
  position: absolute;
  overflow: hidden;
  top: 5px;
  left: -10px;
  z-index: 1;
  display: none;
}

.workflow-table .state.error .error-toggle .error-toggle-arrow:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background: white;
  transform: rotate(45deg);
  top: 15px;
  left: 10px;
  box-shadow: -1px -1px 2px -1px rgba(64, 79, 134, 0.27);
}

.workflow-table .state.error .error-toggle .error-toggle-msg ul {
  margin-left: 5px;
  padding-left: 20px;
}

.workflow-table .state.end {
  margin: 30px 30px -2px 30px;
  background: #ffffff;
  padding: 15px;
}

.workflow-table .state.end .content {
  text-align: center;
  font-weight: bold;
}

.workflow-table .state .header .delete {
  display: none;
  float: right;
}

.workflow-table .state.condition .header .delete {
  color: #a7a7a7 !important;
}

.workflow-table .state:hover .header .delete {
  display: block;
}

.workflow-table .state:hover .header .priority {
  display: none;
}

.workflow-table .btn-action {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-bottom: 15px;
  padding: 2px;
  position: relative;
  grid-row: 2;
  grid-column: 1;
  cursor: pointer;
}

.workflow-table .btn-action .icon {
  font-size: 20px;
  color: #ffffff;
  background: #6097fc;
  height: 25px;
  width: 25px;
  padding-top: 1.5px;
  padding-left: 0.5px;
  border-radius: 100%;
  text-align: center;
}

.workflow-table .btn-action .popup {
  position: absolute;
  width: 315px;
  padding: 15px;
  background: white;
  z-index: 2000;
  border-radius: 5px;
  box-shadow: 0px 1px 4px 0px rgba(64, 79, 134, 0.27);
  left: -150px;
  top: 35px;
}

.workflow-table .btn-action .popup-arrow {
  width: 50px;
  height: 20px;
  position: absolute;
  overflow: hidden;
  top: -20px;
  left: 145px;
}

.workflow-table .btn-action .popup-arrow:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background: white;
  transform: rotate(45deg);
  top: 15px;
  left: 10px;
  box-shadow: -1px -1px 2px -1px rgba(64, 79, 134, 0.27);
}

.workflow-table .btn-action .popup .action-icon {
  border: 1px solid #d1d1d1;
  height: 80px;
  padding-top: 20px;
  padding-left: 3px;
  border-radius: 100%;
  margin-bottom: 10px;
}

.workflow-table .btn-action .popup span {
  font-size: 14px;
  font-weight: bold;
}

.workflow-table .btn-action .popup .action-icon i {
  font-size: 35px;
}

.workflow-table .btn-action .popup .action-icon.condition i {
  color: #2da657;
}

.workflow-table .btn-action .popup .action-icon.approver i {
  color: #eb9534;
}

.workflow-table .btn-action .popup .action-icon.notifier i {
  color: #6097fc;
}

.workflow-table .btn-action .popup.attendance {
  width: 225px !important;
  left: -100px !important;
}

.workflow-table .btn-action .popup-arrow.attendance {
  left: 95px !important;
}

.workflow-table .btn-add-condition {
  margin-left: auto;
  margin-right: auto;
  grid-row: 3;
  grid-column: 1;
  margin-bottom: 15px;
  background: #ffffff;
  padding: 5px 10px;
  border-radius: 5px;
  box-shadow: 0px 1px 4px 0px rgba(64, 79, 134, 0.27);
  color: #6097fc;
  cursor: pointer;
  height: 30px;
}

.workflow-header .btn-workflow {
  z-index: 0;
  width: 75px;
}

/**
*** Workflow Page - Sidemenu CSS
**/

.workflow-sidemenu {
  position: fixed;
  right: 0;
  height: 100%;
  width: 350px;
  background: #ffffff;
  top: 0px;
  margin-top: 53px;
  box-shadow: 5px 19px 20px 0px rgba(0, 0, 0, 0.1);
}

.workflow-sidemenu .place-name {
  font-size: 17px;
  font-weight: bold;
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 20px;
  display: inline-block;
}

.workflow-sidemenu .place-name i {
  font-size: 14px;
  margin-right: 10px;
  cursor: pointer;
  vertical-align: text-top;
  margin-top: 3px;
}

.workflow-sidemenu .place-name i.edit {
  color: #606ab3;
}

.workflow-sidemenu .place-name i.edit-confirm {
  color: #2da657;
}

.workflow-sidemenu .place-name i.edit-cancel {
  color: #f95555;
}

.workflow-sidemenu .place-name .edit-input {
  display: inline-block;
}

.workflow-sidemenu .place-name .edit-error {
  width: 280px;
  margin-top: 5px;
  font-size: 12px;
  color: red;
  font-weight: normal;
}

.workflow-sidemenu .btn-close {
  display: inline-block;
  margin-right: 25px;
  margin-top: 15px;
  font-size: 16px;
  cursor: pointer;
  float: right;
}

.workflow-sidemenu .content {
  border-top: 1px solid #eaeaea;
  padding: 15px 20px;
  position: relative;
  height: calc(100% - 125px);
  overflow-y: auto;
}

.workflow-sidemenu .content::-webkit-scrollbar {
  width: 6px;
}

.workflow-sidemenu .content::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.workflow-sidemenu .content::-webkit-scrollbar-thumb {
  background: rgba(61, 97, 255, 1);
  border-radius: 2px;
}

.workflow-sidemenu .content::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.workflow-sidemenu .btn-delete {
  float: left;
  height: 29px;
  background: red;
  width: 33px;
  margin-right: 8px;
  font-size: 15px;
  color: #ffffff;
  padding-left: 10px;
  padding-top: 5px;
  border-radius: 2px;
  box-shadow: 0px 1px 4px 0px rgba(64, 79, 134, 0.27);
  margin-top: 0.5px;
  cursor: pointer;
}

/**
*** Workflow Page - Approve Sidemenu CSS
**/

.workflow-sidemenu-approver .approver-type-value {
  margin-top: 15px;
}

.workflow-sidemenu-approver .separator {
  margin-bottom: 10px;
  font-size: 15px;
  margin-top: 20px;
  font-weight: bold;
  border-bottom: 1px solid #bdbdbd;
  padding-bottom: 5px;
}

.workflow-sidemenu-approver .option-input {
  margin-bottom: 10px;
}

.workflow-sidemenu-approver .timeout-container {
  margin-top: 20px;
}

.workflow-sidemenu-approver .timeout-container > div {
  margin-top: 5px;
  font-weight: 500;
}

.workflow-sidemenu-approver .timeout-container .timeout-warning {
  font-size: 20px;
  color: orange;
  display: inline;
  margin-left: 5px;
  cursor: pointer;
  position: relative;
}

.workflow-sidemenu-approver .timeout-container .timeout-warning:hover .timeout-warning-msg {
  display: block;
}

.workflow-sidemenu-approver .timeout-container .timeout-warning-msg {
  position: absolute;
  font-size: 12px;
  color: black;
  background: white;
  top: -170px;
  height: 170px;
  padding-right: 25px;
  padding-top: 25px;
  width: 210px;
  box-shadow: 0px 1px 4px 0px rgba(64, 79, 134, 0.27);
  z-index: 100;
  display: none;
}

.workflow-sidemenu-approver .tag-wrapper {
  display: inline-block;
  width: 275px !important;
  margin-left: 5px !important;
}

.workflow-sidemenu-approver .tooltip-wrapper {
  display: inline-block;
  vertical-align: top;
  margin-top: 5px;
}

/**
*** Workflow Page - Condition Sidemenu CSS
**/

.workflow-sidemenu-condition .separator {
  margin-bottom: 10px;
  font-size: 15px;
  margin-top: 20px;
  font-weight: bold;
  border-bottom: 1px solid #bdbdbd;
  padding-bottom: 5px;
}

.workflow-sidemenu-condition .option-child {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  font-size: 20px;
  padding-bottom: 25px;
  padding-left: 13.5px;
}

.workflow-sidemenu-condition .between {
  padding-top: 5.5px;
  font-weight: 500;
  margin-left: -1px;
}

.workflow-sidemenu-condition .btn-add-condition {
  position: relative;
}

.workflow-sidemenu-condition .btn-add-condition-confirm {
  text-align: center;
  margin-top: 12px;
}

.workflow-sidemenu-condition .popup-add-condition {
  position: absolute;
  left: -150%;
  background: white;
  text-align: left;
  top: 0%;
  padding: 10px 15px 15px 15px;
  color: black;
  box-shadow: 0px 1px 4px 0px rgba(64, 79, 134, 0.27);
}

.workflow-sidemenu-condition .popup-add-condition-icon {
  text-align: right;
  color: #bbbbbb;
}

.workflow-sidemenu-condition .condition-default {
  font-size: 18px;
  padding: 30px 40px;
  border: 1px solid grey;
  background: #f1f1f1;
  border-radius: 5px;
}

/**
*** Workflow Page - Notifier Sidemenu CSS
**/

.workflow-sidemenu-notifier .separator {
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: bold;
  border-bottom: 1px solid #bdbdbd;
  padding-bottom: 5px;
}

/**
*** Workflow State Page - State Condition CSS
**/

.workflow-state-condition .condition-header {
  font-weight: 500;
  border-bottom: 1px solid #e4e4e4;
  margin-bottom: 5px;
}

/**
*** Workflow State Page - State Approver CSS
**/

.workflow-state-approver .approver-header {
  font-weight: 500;
  border-bottom: 1px solid #e4e4e4;
  margin-bottom: 5px;
}

/**
*** Workflow State Page - State Approver CSS
**/

.workflow-state-notifier .notifier-header {
  font-weight: 500;
  border-bottom: 1px solid #e4e4e4;
  margin-bottom: 5px;
}

/**
*** Workflow Modal - Workflow State Delete Modal CSS
**/

.workflow-modal-delete-body {
  white-space: nowrap;
}

.workflow-modal-delete-body .modal-icon {
  display: inline-block;
  font-size: 40px;
  color: #eb9534;
  margin-right: 15px;
  margin-left: 10px;
}

.workflow-modal-delete-body .modal-message {
  display: inline-block;
  white-space: normal;
  width: 500px;
}

/**
*** Workflow Modal - Workflow Discard Modal CSS
**/

.workflow-modal-discard-body {
  white-space: nowrap;
}

.workflow-modal-discard-body .modal-icon {
  display: inline-block;
  font-size: 28px;
  color: red;
  margin-right: 15px;
  margin-left: 10px;
  border: 1px solid red;
  height: 55px;
  width: 55px;
  border-radius: 100%;
  padding-left: 14.5px;
  padding-top: 11px;
}

.workflow-modal-discard-body .modal-message {
  display: inline-block;
  white-space: normal;
  width: 500px;
  vertical-align: super;
}

/**
*** Workflow Modal - Workflow Discard Modal CSS
**/

.workflow-modal-save-body {
  white-space: nowrap;
}

.workflow-modal-save-body .modal-icon {
  display: inline-block;
  font-size: 28px;
  color: #FB8C00;
  margin-right: 15px;
  margin-left: 10px;
  border: 1px solid #FB8C00;
  height: 55px;
  width: 55px;
  border-radius: 100%;
  padding-left: 11px;
  padding-top: 10px;
  vertical-align: top;
}

.workflow-modal-save-body .modal-message {
  display: inline-block;
  white-space: normal;
  width: 500px;
  vertical-align: sub;
}

.workflow-modal-save-body .checkbox-is-send-email {
  margin-left: 15px;
  margin-top: 15px;
}

.workflow-modal-save-body .checkbox-is-send-email label {
  vertical-align: middle;
}
#tour-12 .bg-facebook {
  background-color: #0F98AD !important;
  border: 1px solid #0F98AD;
  color: white;
}

#tour-12 .bg-twitter {
  background-color: #EE5273 !important;
  border: 1px solid #EE5273;
  color: white;
}

#tour-12 .bg-googleplus {
  background-color: #2F5FC2 !important;
  border: 1px solid #2F5FC2;
  color: white;
}

#tour-12 .bg-bitbucket {
  background-color: #F16548 !important;
  border: 1px solid #F16548;
  color: white;
}

#tour-12 .fa-leaf {
  color: #0F98AD;
}

#tour-12 .fa-users {
  color: #EE5273;
}

#tour-12 .fa-money-bill-alt {
  color: #2F5FC2;
}

#tour-12 .fa-tasks {
  color: #F16548;
}

.storage-progressbar {
  list-style-type: none;
  padding: 0;
}

.mini-stat-info span {
  font-size: 23px;
}
.vessel-attendance .summaries {
  width: 100%;
}

.vessel-attendance .summary {
  display: inline-block;
  height: 55px;
  width: 210px;
  background: rgba(28, 89, 171, 1);
  margin: 10px 0px 0px 15px;
  box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
  border-radius: 3px;
  color: white;
  padding: 7px 10px 0px 9px;
}

.vessel-attendance .summary div {
  vertical-align: top;
  font-weight: 500;
}

.vessel-attendance .summary div .summary-label {
  font-size: 12px;
}

.vessel-attendance .summary div img {
  width: 35px;
  margin: 0px 8px;
}

.vessel-attendance .summary.onboard {
  background: rgba(0, 122, 255, 1) !important;
  cursor: pointer;
}

.vessel-attendance .summary.onleave {
  background: rgba(255, 165, 31, 1) !important;
  cursor: pointer;
}

.vessel-attendance .summary.transfer {
  background: rgba(255, 79, 116, 1) !important;
  cursor: pointer;
}

.vessel-attendance .summary.spotcheck {
  background: rgb(161, 102, 171, 1) !important;
  cursor: pointer;
}

.vessel-attendance .summary > div {
  display: inline-block;
}

.vessel-attendance .summary i {
  font-size: 30px;
  margin-right: 10px;
}

.vessel-attendance .calendar-month-container .previous {
  margin-right: 15px;
}

.vessel-attendance .calendar-month-container .next {
  margin-left: 15px;
}

.vessel-attendance-table-header {
  background: white;
  border-top: 1px solid rgba(227, 235, 243, 1);
  border-bottom: 1px solid rgba(227, 235, 243, 1);
  margin-top: 10px;
  padding-left: 15px;
}

.vessel-attendance-table-header > div {
  display: inline-block;
}

.vessel-attendance-table-header .calendar-month-container {
  font-size: 17px;
  text-align: center;
  padding-top: 14px;
  padding-bottom: 14px;
  width: 33.33%;
  vertical-align: top;
}

.vessel-attendance-table-header .filter {
  margin: 4px 0px;
  width: 100%;
}

.vessel-attendance-table-header .action {
  margin-right: 15px;
  margin-top: 10px;
  float: right;
}

.vessel-attendance-table-container {
  width: 100%;
  overflow-y: auto;
  overflow-x: auto;
  height: calc(100vh - 330px);
}

.vessel-attendance-table-container .no-result {
  background: white;
  padding: 25px;
  border-bottom: 1px solid rgba(227, 235, 243, 1);
  text-align: center;
}

.vessel-attendance-table-container .filter-indicator {
  background: white;
  padding: 25px;
  border-bottom: 1px solid rgba(227, 235, 243, 1);
  text-align: center;
}

.vessel-attendance-table-container .grouped-container .list-picture-container {
  cursor: pointer;
}

.vessel-attendance-table > thead > tr > th {
  white-space: nowrap;
  position: sticky;
  position: -webkit-sticky;
  top: 0px;
  z-index: 50;
}

.vessel-attendance-table > thead > tr > th.table-fixed-first-column,
.vessel-attendance-table > tbody > tr > td.table-fixed-first-column {
  position: sticky;
  position: -webkit-sticky;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  left: 0 !important;
  font-size: 10.5px;
}

.vessel-attendance-table > thead > tr > .table-fixed-second-column,
.vessel-attendance-table > tbody > tr > .table-fixed-second-column {
  position: sticky;
  position: -webkit-sticky;
  min-width: 165px !important;
  width: 165px !important;
  left: 220px !important;
  box-shadow: 2px 0 2px -2px #c3c3c3;
  padding: 0px !important;
  font-size: 10.5px;
}

.vessel-attendance-table > thead > tr > th.table-fixed-first-column,
.vessel-attendance-table > thead > tr > th.table-fixed-second-column {
  z-index: 70;
}

.vessel-attendance-table > tbody > tr > td.table-fixed-first-column,
.vessel-attendance-table > tbody > tr > td.table-fixed-second-column {
  z-index: 60;
}

.vessel-attendance-table > tbody > tr > td.table-fixed-first-column {
  white-space: nowrap;
  width: 100px;
}

.vessel-attendance-table > thead > tr > th.table-fixed-first-column > div {
  padding: 17px 0px 0px 15px;
  border-right: 1px solid rgba(227, 235, 243, 1);
  text-align: left;
  height: 100%;
}

.vessel-attendance-table > thead > tr > th.table-fixed-second-column > div {
  padding: 17px 0px 0px 15px;
  text-align: left;
  height: 100%;
}

.vessel-attendance-table > tbody > tr > td.table-fixed-first-column > .grouped-container > div {
  display: inline-block;
  vertical-align: text-top;
}

.vessel-attendance-table > tbody > tr > td.table-fixed-first-column > .grouped-container .user-info > div {
  display: inline-block;
}

.vessel-attendance-table > tbody > tr > td.table-fixed-first-column > .grouped-container .user-info .lbl {
  width: 70px;
}

.vessel-attendance-table > tbody > tr > td.table-fixed-first-column > .grouped-container .user-info .dot {
  width: 8px;
}

.vessel-attendance-table > tbody > tr > td.table-fixed-first-column > .grouped-container .user-info .info {
  width: 40px;
}

.vessel-attendance-table > tbody > tr > td.table-fixed-second-column > .grouped-container > div {
  display: inline-block;
  vertical-align: text-top;
}

.vessel-attendance-table > tbody > tr > td.table-fixed-second-column > .grouped-container .user-info > div {
  display: inline-block;
}

.vessel-attendance-table > tbody > tr > td.table-fixed-second-column > .grouped-container .user-info .lbl {
  width: 35px;
}

.vessel-attendance-table > tbody > tr > td.table-fixed-second-column > .grouped-container .user-info .dot {
  width: 8px;
}

.vessel-attendance-table > tbody > tr > td.table-fixed-second-column > .grouped-container .user-info .info {
  width: 95px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.vessel-attendance-table > tbody > tr > td.table-fixed-first-column .pending-count {
  top: 0px;
  padding: 0;
  text-align: center;
  background-color: #E98D25;
  width: 20px;
  height: 20px;
  border-radius: 0px 0px 0 10px;
  overflow: hidden;
  color: white;
  line-height: 20px;
  font-size: 10px;
  position: absolute;
  right: 1px;
  font-weight: 500;
  cursor: pointer;
}

.vessel-attendance-table > tbody > tr.grouped-first-row > td.table-fixed-first-column .pending-count {
  top: 42px !important;
}

.vessel-attendance-table > tbody > tr > td {
  min-width: 90px;
  padding: 0px !important;
  vertical-align: top;
}

.vessel-attendance-table > tbody > tr > td img {
  margin-right: 1px !important;
  margin-bottom: 2px;
}

.vessel-attendance-table > tbody > tr > td.table-date-column.weekend {
  background-color: rgb(243, 247, 255, 0.3);
}

.vessel-attendance-table > tbody > tr > td.table-date-column > div {
  text-align: center;
  height: 85px;
  padding-top: 5px;
  position: relative;
}

.vessel-attendance-table > tbody > tr > td.table-date-column > div .icon {
  font-size: 22px;
  color: #7d7d7d;
}

.vessel-attendance-table > tbody > tr > td.table-date-column > div .icon img {
  width: 35px;
}

.vessel-attendance-table > tbody > tr > td.table-date-column > div .status {
  font-size: 10px;
  font-weight: 500;
}

.vessel-attendance-table > tbody > tr > td.table-date-column > div .vessel {
  font-size: 10px;
}

.vessel-attendance-table > tbody > tr > td.table-date-column > div.grouped-container > div {
  height: 75px;
  padding-top: 5px;
}

.vessel-attendance-table > tbody > tr > td.table-date-column > div.grouped-container > div > i {
  position: absolute;
  top: 6px;
  right: 3px;
  margin: 5px;
  font-size: 15px;
}

.vessel-attendance-table > tbody > tr > td.table-date-column > div.grouped-container > div > i.fa-exclamation-circle {
  color: #E98D25;
}

.vessel-attendance-table > tbody > tr > td.table-date-column > div.grouped-container > div > i.fa-check-circle {
  color: #51B963;
}

.vessel-attendance-table > tbody > tr > td.table-date-column > div.grouped-container > div.column-onboard {
  background-color: rgba(203, 228, 255, 1);
  cursor: pointer;
}

.vessel-attendance-table > tbody > tr > td.table-date-column > div.grouped-container > div.column-offboard {
  background-color: rgb(232, 204, 3, 0.2);
  cursor: pointer;
}

.vessel-attendance-table > tbody > tr > td.table-date-column > div.grouped-container > div.column-onleave {
  background-color: rgba(255, 231, 194, 1);
  cursor: pointer;
}

.vessel-attendance-table > tbody > tr > td.table-date-column > div.grouped-container > div.column-transfer {
  background-color: rgba(255, 207, 217, 1);
  cursor: pointer;
}

.vessel-attendance-table > tbody > tr > td.table-date-column > div.grouped-container > div.column-spotcheck {
  background-color: rgb(166, 207, 213, 0.2);
  cursor: pointer;
}

.vessel-attendance-table > thead > tr > th > div {
  display: block !important;
  text-align: center;
}

.vessel-attendance-table > tbody > tr > td .list-picture-container {
  height: 60px !important;
  width: 60px !important;
  margin-right: 10px;
}

.vessel-attendance-table div.div-consume-all {
  display: inline-block;
}

.vessel-attendance-table .edit-leave-day,
.vessel-attendance-table .edit-leave-day:hover {
  color: #3d61ff;
  margin-left: 5px;
  cursor: pointer;
}

.vessel-attendance-table .onboard-vesssel-label img {
  width: 17px;
  margin-right: 0px !important;
  vertical-align: top;
}

.vessel-attendance-table .onboard-vesssel-label div {
  color: rgba(28, 89, 171, 1);
  display: inline-block;
  margin-top: 2px;
  margin-left: 2px;
}

.vessel-attendance-table .grouped-first-row td .grouped-container {
  border-top: 2px solid rgba(28, 89, 171, 1);
}

.vessel-attendance-table .grouped-first-row td:not(:first-child):not(:nth-child(2)) .grouped-container {
  margin-top: 40px;
}

.vessel-attendance-table .grouped-last-row td:not(:first-child):not(:nth-child(2)) .grouped-container {
  margin-bottom: 10px;
}

.vessel-attendance-table td:first-child .grouped-container {
  margin-left: 10px;
  border-left: 2px solid rgba(28, 89, 171, 1);
  border-right: 1px solid rgba(227, 235, 243, 1);
}

.vessel-attendance-table td:last-child .grouped-container {
  margin-right: 10px;
  border-right: 2px solid rgba(28, 89, 171, 1);
}

.vessel-attendance-table .grouped-first-row td:nth-child(2) .grouped-container {
  margin-top: 40px;
}

.vessel-attendance-table .grouped-last-row .grouped-container {
  border-bottom: 2px solid rgba(28, 89, 171, 1);
}

.vessel-attendance-table td .grouped-container {
  height: 90px !important;
}

.vessel-attendance-table td:first-child .grouped-container,
.vessel-attendance-table td:nth-child(2) .grouped-container {
  padding: 10px;
}

.vessel-attendance-table td:not(:first-child):not(:nth-child(2)) .grouped-container {
  padding: 6px 3px 5px 3px;
}

.vessel-attendance-table td:nth-child(3) .grouped-container {
  padding-left: 6px !important;
}

.vessel-attendance-table td:last-child .grouped-container {
  padding-right: 6px !important;
}

.vessel-attendance-table .grouped-vessel-label {
  display: none !important;
}

.vessel-attendance-table .grouped-first-row .grouped-vessel-label {
  display: block !important;
}

.vessel-attendance-table .grouped-first-row .grouped-vessel-label div {
  display: inline-block;
  padding-top: 4px;
}

.vessel-attendance-table .grouped-vessel-label > div {
  display: inline-block;
  background: rgba(28, 89, 171, 1);
  color: white;
  padding: 5px 12px 5px 5px;
  border-radius: 5px 5px 0px 0px;
  margin-top: 10px;
  margin-left: 10px;
  font-weight: bold;
  height: 30px;
}

.vessel-attendance-table .grouped-vessel-label > div > i {
  margin-right: 5px;
  margin-left: 5px;
}

.profile-container.vessel div.list-picture-container {
  height: 45px;
  width: 45px;
}

/**********************************/

/* Vessel Attendance Detail Modal */

/**********************************/

.vessel-attendance-detail-modal .vessel-attendance-detail {
  background-color: #f7fcff;
  border-radius: 5px;
}

.vessel-attendance-detail-modal .detail-header {
  padding-top: 13px;
  padding-bottom: 10px;
  font-size: 15px;
  font-weight: bold;
  color: #8abff7;
}

.vessel-attendance-detail-modal .detail-delete-button {
  position: absolute;
  right: -35px;
  top: 5px;
}

.vessel-attendance-detail-modal .detail-buttons {
  padding-top: 80px;
}

.vessel-attendance-detail-modal .detail-buttons.spotcheck {
  padding-top: 10px !important;
}

.vessel-attendance-detail .vessel-attendance-detail-container {
  padding: 5px 30px;
}

.vessel-attendance-detail .vessel-attendance-detail-container .detail-line {
  height: 1px;
  background-color: gainsboro;
  margin-bottom: 15px;
}

.vessel-attendance-detail .vessel-attendance-detail-container .detail-content {
  padding: 5px 15px 5px 0px;
}

.vessel-attendance-detail .vessel-attendance-detail-container .detail-label {
  padding: 5px 0px 5px 5px;
}

.vessel-attendance-detail .vessel-attendance-detail-container .detail-error {
  color: red;
  margin-top: 10px;
}

.vessel-attendance-detail .vessel_attendance_clock {
  margin-left: 10px;
  margin-bottom: 10px;
}

.vessel-attendance-detail .vessel_attendance_clock .btn-vessel-attendance-clocks {
  width: 100px;
  border-radius: 3px;
  padding-top: 4px;
  padding-left: 10px;
  text-align: center;
}

.vessel-attendance-detail .vessel-attendance-detail-container .detail-content .ack {
  color: #51B963;
}

.vessel-attendance-detail .vessel-attendance-detail-container .detail-content .pend {
  color: #E98D25;
}

.vessel-attendance-detail-modal .profile-content {
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 10px 20px;
  margin: 10px 10px;
  box-shadow: rgba(0, 0, 0, 0.04) 0px 2px 4px 0px;
}

.vessel-attendance-detail-modal .profile-content > div {
  display: inline-block;
}

.vessel-attendance-detail-modal .profile-content .photo-content {
  margin-right: 40px;
}

.vessel-attendance-detail-modal .profile-content .employee-info-content {
  vertical-align: top;
  margin-top: 20px;
  width: 140px;
  margin-right: 10px;
}

.vessel-attendance-detail-modal .profile-content .employee-vessel-content {
  vertical-align: top;
  margin-top: 20px;
  width: 250px;
  margin-right: 10px;
}

.vessel-attendance-detail-modal .profile-content .employee-vessel-content .user-info > div,
.vessel-attendance-detail-modal .profile-content .employee-onboard-content .user-info > div {
  display: inline-block;
}

.vessel-attendance-detail-modal .profile-content .employee-vessel-content .lbl {
  width: 95px;
}

.vessel-attendance-detail-modal .profile-content .employee-vessel-content .dot {
  width: 10px;
}

.vessel-attendance-detail-modal .profile-content .employee-vessel-content .info {
  width: 120px;
}

.vessel-attendance-detail-modal .profile-content .employee-onboard-content .lbl {
  width: 115px;
}

.vessel-attendance-detail-modal .profile-content .employee-onboard-content .dot {
  width: 10px;
}

.vessel-attendance-detail-modal .profile-content .employee-onboard-content .info {
  width: 100px;
}

.vessel-attendance-detail-modal .profile-content .employee-onboard-content {
  vertical-align: top;
  margin-top: 20px;
  width: 240px;
}

.vessel-attendance-detail-modal .photo-edit {
  height: 100px;
  width: 100px;
}

.vessel-attendance-detail-modal .vessel-attendance-content {
  margin-top: 10px;
  margin-left: 20px;
  margin-right: 20px;
}

.vessel-attendance-detail-modal-btn {
  width: 100px !important;
}

.vessel-attendance-detail-modal-btn.btn-delete {
  margin-bottom: 10px;
  background: red;
  padding-top: 6px;
}

.vessel-attendance-detail-modal .datepicker-layout {
  margin-top: 0px;
  margin-bottom: 0px !important;
}

.vessel-attendance-detail-modal .edit-leave-day,
.vessel-attendance-detail-modal .edit-leave-day:hover {
  color: #3d61ff;
  margin-left: 5px;
  cursor: pointer;
}

.vessel-attendance-detail-modal .action-tag {
  padding: 5px 10px;
  border-radius: 7px;
  margin-bottom: 10px;
  color: white;
  font-weight: 500;
  width: 100px;
  text-align: center;
}

.vessel-attendance-detail-modal .action-tag.ack {
  background: #51B963;
}

.vessel-attendance-detail-modal .action-tag.pend {
  background: #51B963;
}

.vessel-attendance-filter .filter-popup-container {
  display: inline-block;
  height: 30px;
  width: 30px;
  margin-left: 10px;
  border: 1px solid gainsboro;
  border-radius: 2px;
  padding-left: 7px;
  padding-top: 4px;
}

.vessel-attendance-filter .filter-popup {
  display: inline-block;
  background: white;
  z-index: 120;
  padding: 0px 10px 5px 10px;
  font-family: "Roboto", sans-serif;
  width: 560px;
}

.vessel-attendance-filter .popover {
  max-width: 600px;
  min-width: 600px;
}

.vessel-attendance-filter .filter-popup-icon {
  color: #a3a3a3;
  cursor: pointer;
}

.vessel-attendance-filter .filter-popup-icon.filter-active {
  color: #3d61ff;
}

.vessel-attendance-filter .filter-popup .close {
  font-size: 20px;
  margin-bottom: 10px;
  cursor: pointer;
}

.vessel-attendance-filter .filter-popup .filter-bullet-container {
  margin-top: 10px;
}

.vessel-attendance-filter .filter-popup .filter-bullet {
  background: #3d61ff;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  display: inline-block;
  font-weight: bold;
  font-size: 12px;
  margin-right: 10px;
  margin-bottom: 5px;
  cursor: pointer;
}

.vessel-attendance-filter .filter-popup .filter-bullet span {
  margin-left: 5px;
}

.vessel-attendance-pending {
  margin-bottom: 275px;
}

.vessel-attendance-modal .vessel-attendance-header,
.vessel-attendance-pending .vessel-attendance-header {
  margin-left: 5px;
}

.vessel-attendance-modal .vessel-attendance-filter,
.vessel-attendance-pending .vessel-attendance-filter {
  margin-bottom: 15px;
}

.vessel-attendance-modal .vessel-attendance-bulkfield > div,
.vessel-attendance-pending .vessel-attendance-bulkfield > div {
  display: inline-block;
  vertical-align: text-top;
}

.vessel-attendance-modal .vessel-attendance-bulkfield .custom-label,
.vessel-attendance-pending .vessel-attendance-bulkfield .custom-label {
  width: 150px;
  vertical-align: top;
  padding-top: 5px;
}

.vessel-attendance-modal .vessel-attendance-bulkfield .custom-input,
.vessel-attendance-pending .vessel-attendance-bulkfield .custom-input {
  width: 165px;
  padding-right: 15px;
}

.vessel-attendance-modal .vessel-attendance-bulkfield .custom-input.date-range,
.vessel-attendance-pending .vessel-attendance-bulkfield .custom-input.date-range {
  width: 225px !important;
}

.vessel-attendance-modal-table,
.vessel-attendance-pend-table {
  margin-top: 5px;
}

.vessel-attendance-modal-table > thead > tr > th.col-name,
.vessel-attendance-modal-table > tbody > tr > td.col-name {
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
}

.vessel-attendance-modal-table > thead > tr > th.col-checkbox-consume-all,
.vessel-attendance-modal-table > tbody > tr > td.col-checkbox-consume-all,
.vessel-attendance-pend-table > thead > tr > th.col-checkbox-consume-all,
.vessel-attendance-pend-table > tbody > tr > td.col-checkbox-consume-all {
  width: 160px !important;
  min-width: 160px !important;
  max-width: 160px !important;
}

.vessel-attendance-modal-table > tbody > tr > td.col-checkbox div,
.vessel-attendance-pend-table > tbody > tr > td.col-checkbox div,
.vessel-attendance-modal-table > tbody > tr > td.col-checkbox-consume-all div,
.vessel-attendance-pend-table > tbody > tr > td.col-checkbox-consume-all div {
  display: inline-block;
}

.vessel-attendance-pend-table > thead > tr > th.col-name,
.vessel-attendance-pend-table > tbody > tr > td.col-name {
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
}

.vessel-attendance-modal-table > tbody > tr > td.col-input,
.vessel-attendance-pend-table > tbody > tr > td.col-input {
  width: 100px;
}

.vessel-attendance-modal-table > tbody > tr > td.col-input > div,
.vessel-attendance-pend-table > tbody > tr > td.col-input > div {
  display: inline-block;
  vertical-align: text-bottom;
  margin-right: 5px;
}

.vessel-attendance-detail-table > tbody > tr.error > td,
.vessel-attendance-modal-table > tbody > tr.error > td,
.vessel-attendance-pend-table > tbody > tr.error > td {
  border-bottom: 0px !important;
}

.vessel-attendance-detail-table > tbody > tr > td.td-error,
.vessel-attendance-modal-table > tbody > tr > td.td-error,
.vessel-attendance-pend-table > tbody > tr > td.td-error {
  border-top: 0px !important;
  min-height: 30px;
  padding-top: 5px;
  padding-bottom: 20px;
  height: auto;
}

.vessel-attendance-detail-table > tbody > tr > td.td-error > ul,
.vessel-attendance-modal-table > tbody > tr > td.td-error > ul,
.vessel-attendance-pend-table > tbody > tr > td.td-error > ul {
  list-style-type: disc;
  margin-left: 30px;
  font-size: 12px;
  color: #f94d4d;
}

.vessel-attendance-modal-table > tbody > tr.disabled > td,
.vessel-attendance-pend-table > tbody > tr.disabled > td {
  background-color: rgb(243 243 243 / 0.4) !important;
}

.vessel-attendance-detail-table > tbody > tr > td.col-action {
  width: 145px;
  padding: 0px !important;
}

.vessel-attendance-modal-table .input-datepicker-layout,
.vessel-attendance-pend-table .input-datepicker-layout {
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}

.vessel-attendance-detail-table .input-text-layout,
.vessel-attendance-pend-table .input-text-layout,
.vessel-attendance-modal-table .input-text-layout {
  width: 75px !important;
}

.vessel-attendance-detail-table .input-custom-label {
  display: inline-block;
  width: 100px;
  vertical-align: top;
  margin-top: 19px;
}

.vessel-attendance-detail-table .input-custom-date {
  display: inline-block;
  width: 105px;
  vertical-align: top;
  margin-top: 10px;
}

.vessel-attendance-detail-table .input-custom-date.transfer {
  width: 145px !important;
}

.vessel-attendance-modal-submodal-overlay {
  height: 100%;
  width: 100%;
  background: black;
  position: fixed;
  top: 0px;
  left: 0px;
  opacity: 0.5;
  z-index: 5;
}

.vessel-attendance-modal-submodal-content {
  width: 600px;
  background: white;
  position: fixed;
  top: 120px;
  left: calc(50% - 300px);
  z-index: 9999;
}

.vessel-attendance-modal-submodal-content > .modal-body > div {
  display: inline-block;
}

.vessel-attendance-modal-submodal-content > .modal-body > div.label-container {
  width: 110px;
}

/**********************************/

/* Vessel Leave Detail            */

/**********************************/

.vessel-leave-detail .default-settings .main-category-content {
  width: 600px;
}

/**********************************/

/* Vessel Attendance Clock        */

/**********************************/

.vessel_attendance_clock {
  position: relative;
}

.vessel_attendance_clock > .btn-vessel-attendance-clocks {
  height: 30px;
  width: 90px;
  border-radius: 5px;
  padding-top: 7px;
  padding-left: 8px;
  display: inline-block;
  padding-right: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.vessel_attendance_clock > .btn-vessel-attendance-clocks i {
  margin-right: 5px;
}

.vessel_attendance_clock .popover {
  max-width: 600px;
  font-family: "Roboto", sans-serif;
}

.vessel_attendance_clock .empty {
  background: #E98D25;
  color: white;
}

.vessel_attendance_clock .valid {
  background: green;
  color: white;
}

.vessel_attendance_clock .photo-popup {
  width: 315px;
  height: 220px;
  background: white;
  z-index: 999;
  top: 40px;
}

.vessel_attendance_clock .photo-popup .photo-popup-arrow:after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  background: white;
  transform: rotate(45deg);
  left: 150px;
  box-shadow: -1px -1px 2px -1px rgba(64, 79, 134, 0.27);
  top: -5px;
}

.vessel_attendance_clock .photo-popup .photo-scrollviewer {
  overflow-x: auto;
  white-space: nowrap;
}

.vessel_attendance_clock .photo-popup .photo-scrollviewer::-webkit-scrollbar {
  height: 5px;
}

.vessel_attendance_clock .photo-popup .photo-scrollviewer::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.vessel_attendance_clock .photo-popup .photo-scrollviewer::-webkit-scrollbar-thumb {
  background: rgba(61, 97, 255, 1);
  border-radius: 2px;
}

.vessel_attendance_clock .photo-popup .photo-scrollviewer::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.vessel_attendance_clock .photo-popup .photo-container {
  display: inline-block;
  margin-right: 25px;
}

.vessel_attendance_clock .photo-popup .photo-picture .photo-info {
  position: absolute;
  background: white;
  color: #3d61ff;
  padding: 5px 10px;
  bottom: 0px;
  left: 0px;
  width: 140px;
  height: 45px;
  opacity: 0.5;
  font-weight: bold;
}

.vessel_attendance_clock .photo-popup .photo-picture .photo-info > div {
  text-align: center;
}

.vessel_attendance_clock .photo-popup .photo-picture {
  position: relative;
  width: 140px;
  height: 170px;
  overflow: hidden;
  margin-bottom: 5px;
}

.vessel_attendance_clock .photo-popup .photo-picture img {
  width: 116px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  min-height: 100%;
  min-width: 100%;
}

.vessel_attendance_clock .photo-popup .photo-container .photo-additional-info {
  background: #3d61ff;
  border-radius: 2px;
  margin-bottom: 5px;
}

.vessel_attendance_clock .photo-popup .photo-container .photo-additional-info > div:first-child,
.vessel_attendance_clock .photo-popup .photo-container .photo-additional-info > div:nth-child(2) {
  border-right: 1px solid rgba(255,255,255, 0.5);
}

.vessel_attendance_clock .photo-popup .photo-container .photo-additional-info > div {
  display: inline-block;
  width: 44.5px;
  text-align: center;
  color: white;
  padding-left: 5px;
  cursor: pointer;
  padding-top: 3px;
  height: 25px !important;
}

.vessel_attendance_clock .photo-popup .photo-container .photo-additional-info > div.exception {
  background-color: #E98D25;
  margin: 0px !important;
  height: 25px !important;
  border-radius: 3.5px 0px 0px 3.5px;
}

.vessel-exception-container .left,
.vessel-exception-container .right {
  background: white;
}

.vessel-exception-container .center {
  position: absolute;
  width: 80px !important;
  left: calc(50% - 40px);
  background: white;
  top: 230px;
  border-radius: 5px;
  border: 1px solid green;
}

.vessel-exception-container .device-info {
  border-radius: 5px;
  text-align: left;
  width: 100% !important;
  padding: 0px !important;
}

.vessel-exception-container .device-info > div {
  background: white;
  padding: 20px 30px;
  width: 350px;
  margin-left: 125px;
  border-radius: 5px;
}

.vessel-attendance-overwrite-modal .option-header {
  margin-bottom: 20px;
}

.vessel-attendance-overwrite-modal .option-label {
  display: inline-block;
  margin-right: 10px;
}

.vessel-attendance-overwrite-modal .option-input {
  display: inline-block;
}

/****************************************/

/* Vessel Attendance Leave Day Modal    */

/****************************************/

.vessel-attendance-leave-day-modal .tab-navigation {
  margin-top: 20px;
  margin-left: 25px;
}

.vessel-attendance-leave-day-modal .tab-navigation div {
  margin-right: 20px;
  font-weight: bold;
  color: #999999;
  line-height: 10px;
  display: inline-block;
  text-align: center;
  padding: 5px;
  cursor: pointer;
}

.vessel-attendance-leave-day-modal .tab-navigation div.active {
  color: rgba(0, 112, 255, 1);
  border-bottom: 2px solid rgba(0, 112, 255, 1);
  padding-bottom: 7px;
}

.vessel-attendance-leave-day-modal .panel {
  margin: 0px 15px;
}

.vessel-attendance-leave-day-modal .adjusted_note {
  font-size: 10px;
}

/****************************************/

/* Vessel Seniority    */

/****************************************/

.seniority-allowance-user-container .multi-select-table-container,
.seniority-allowance-user-container .multi-select-table-new,
.seniority-allowance-user-container .multi-select-table-panel {
  min-width: 1280px;
  max-width: 2000px;
}

/****************************************/

/* Vessel Attendance Pending Spotcheck  */

/****************************************/

.vessel-attendance-pending-spotcheck .summaries {
  width: 100%;
}

.vessel-attendance-pending-spotcheck .summary {
  display: inline-block;
  margin: 20px 30px 20px 0px;
  border-radius: 3px;
  padding: 7px 10px 0px 9px;
  white-space: nowrap;
}

.vessel-attendance-pending-spotcheck .summary > div {
  vertical-align: top;
  font-weight: 500;
  display: inline-block;
}

.vessel-attendance-pending-spotcheck .summary .summary-badge {
  height: 75px;
  width: 75px;
  background: linear-gradient(to right,#07B6F7 5%,#0889F3 95%);
  border-radius: 50%;
  padding-left: 16px;
  padding-top: 15px;
  font-size: 33px;
  color: white;
  float: left;
}

.vessel-attendance-pending-spotcheck .summary .summary-badge i {
  margin: 5px 0px 0px 7px;
}

.vessel-attendance-pending-spotcheck .summary .summary-badge img {
  height: 45px;
  width: 45px;
}

.vessel-attendance-pending-spotcheck .summary .summary-details {
  margin: 15px;
}

.vessel-attendance-pending-spotcheck .summary .summary-details .summary-label {
  color: #A3A3A3;
  font-size: 15px;
  font-weight: bold;
}

.vessel-attendance-pending-spotcheck .summary .summary-details .summary-value {
  font-size: 20px;
  font-weight: bold;
  margin-top: 5px;
}

.vessel-attendance-pending-spotcheck .separator {
  background-color: rgb(0 0 0 / 4%);
  height: 1px;
}
.weearn .header-button {
  height: 35px !important;
  min-width: 40px !important;
}

.weearn .header-button i {
  margin-right: 0px !important;
  font-size: 20px;
}

.weearn-tab-navigation {
  height: 30px !important;
}

.reconcile-page input-select-filter {
  width: 200px;
  display: inline-block;
}

.reconcile-page .input-date-range {
  height: 41px !important;
  border-radius: 8px;
}

.reconcile-page .glyphicon-calendar {
  top: 13px !important;
}

.reconcile-page .btn-generate {
  background-color: rgba(0, 122, 255, 1);
  border-radius: 8px;
  margin-left: 10px;
  width: 150px;
  height: 40px;
  font-size: 14px;
  font-family: 'Inter';
  font-weight: 700;
}

.reconcile-info-container .content-shadow-reconcile {
  width: 300px;
  height: 129px;
  font-size: 16px;
  color: rgba(69, 68, 61, 1);
  font-weight: 600;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  box-shadow: 0 2px 15px 0 rgba(73, 89, 107, 0.2);
  display: inline-block;
  margin: 0px 30px 15px 0px;
}

.reconcile-info-container .content-shadow-reconcile .label-row {
  margin: 10px;
  padding-top: 19px;
}

.reconcile-info-container .content-shadow-reconcile .label-row .label-col {
  display: inline-block;
}

.reconcile-info-container .content-shadow-reconcile .label-row .counter {
  display: inline-block;
  float: right;
  font-size: 30px;
  color: rgba(72, 206, 167, 1);
}

.reconcile-info-container .content-shadow-reconcile .amount-row {
  margin: 10px;
  padding-top: 27px;
}

.btn-weearn-topup {
  display: block;
  height: 55px;
  width: 325px;
  background-color: rgba(0, 122, 255, 1);
  border-radius: 8px;
  font-size: 18px;
  color: rgba(255, 255, 255, 1);
  font-weight: 400;
  box-shadow: 0 2px 15px 0 rgba(73, 89, 107, 0.2);
  border: 1px rgba(0, 122, 255, 1);
  margin: 50px auto 10px;
  text-align: center;
}

.weearn-number-list {
  list-style: auto;
}

.wallet-other-container input-select-filter {
  width: 200px;
  display: inline-block;
  float: right;
  margin-right: 10px;
}

.wallet-other-container .input-date-range {
  height: 41px !important;
  border-radius: 8px;
}

.wallet-other-container .glyphicon-calendar {
  top: 13px !important;
}

.wallet-other-container .dropdown-toggle {
  height: 41px !important;
  border-radius: 8px !important;
  border: 1px solid #ddd !important;
}

.wallet-other-container .caret {
  top: 16px !important;
}

.weearn-policy-user {
  padding: 0px 30px;
}

.weearn-policy-user .multi-select-table-container {
  max-width: none !important;
}

.weearn-policy-user .multi-select-table-panel {
  max-width: none !important;
}

.weearn-policy-user .multi-select-table-new {
  max-width: none !important;
}

.weearn-policy-setting {
  padding-top: 32px;
  padding-bottom: 5px;
}

.reconcile-page .dropdown-toggle {
  height: 41px !important;
  border-radius: 8px !important;
  border: 1px solid #ddd !important;
}

.reconcile-page .caret {
  top: 16px !important;
}

.reconcile-footer .pagination > .active > a,
.pagination > .active > span {
  background-color: rgba(0, 122, 255, 1);
  border-color: rgba(0, 122, 255, 1);
}

.breadcrumb-no-background-color {
  background-color: transparent !important;
}

/*
    Weearn Admin
*/

.weearn-admin .invoice {
  position: relative;
  background-color: #f5f5f5;
}

.weearn-admin .bg-color {
  background-color: #3d61ff;
  position: absolute;
  height: 350px;
  /* Addition of 100px of invoice-wrapper and min-height of invoice-top */
  top: 0;
  left: 0;
  right: 0;
}

.weearn-admin .invoice-wrapper {
  margin-top: 100px;
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
  max-width: 900px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.weearn-admin .invoice-top {
  background-color: #f5f5f5;
  min-height: 250px;
  max-height: 250px;
  overflow: hidden;
  padding: 40px 60px;
}

.weearn-admin .invoice-top-left .logo {
  width: 190px;
}

.weearn-admin .invoice-top-left h1 {
  font-size: 24px;
  letter-spacing: 1.5px;
}

.weearn-admin .invoice-top-left h5 {
  font-size: 14px;
  color: rgba(0,0,0,0.30);
}

.weearn-admin .invoice-top-right {
  text-align: right;
}

.weearn-admin .invoice-top-right h4 {
  font-size: 20px;
}

.weearn-admin .invoice-top-right h6 {
  color: rgba(0,0,0,0.30);
  font-size: 14px;
  margin-top: 15px;
}

.weearn-admin .invoice-top-right h3 {
  color: rgba(0,0,0,0.30);
  font-size: 14px;
  margin-top: 15px;
}

.weearn-admin .invoice-top-right .amount {
  color: rgba(0, 200, 83, 0.95);
  font-size: 16px;
  margin-top: 40px;
}

.weearn-admin .invoice-bottom {
  background-color: #ffffff;
  padding: 5px 60px 30px;
}

.weearn-admin .invoice-bottom .service-title {
  font-size: 18px;
}

.weearn-admin .invoice-bottom .service-subtitle {
  font-size: 12px;
  color: rgba(0,0,0, 0.70);
  font-weight: 400;
}

.weearn-admin .invoice-bottom .service-price {
  font-size: 16px;
  color: rgba(0, 200, 83, 0.55);
  text-align: right;
}

.weearn-admin .invoice-bottom .price-info {
  font-size: 12px;
  color: rgba(0,0,0,0.30);
  text-align: right;
}

.weearn-admin .sub-total,
.sub-total-price {
  margin-top: 30px !important;
}

.weearn-admin .sub-total,
.discount {
  text-transform: uppercase;
  color: rgba(0,0,0,0.4);
  text-align: right;
  font-size: 13px;
}

.weearn-admin .sub-total-price,
.discount-price {
  font-size: 16px;
  color: #333;
  margin-top: 10px;
  text-align: right;
}

.weearn-admin .total-due {
  text-align: right;
  font-size: 13px;
  color: #333;
}

.weearn-admin .total-due-price {
  color: rgba(0, 200, 83, 0.95);
  font-size: 18px;
  text-align: right;
}

.weearn-admin .footer {
  background-color: #fafafa;
  padding: 50px 50px;
}

.weearn-admin .client-address h6 {
  color: rgba(0,0,0,0.3);
  font-size: 15px;
}

.weearn-admin .client-address h2 {
  color: #222;
  font-size: 16px;
}

.weearn-admin .client-address h4 {
  font-size: 13px;
  color: rgba(0,0,0,0.4);
  line-height: 1.65;
  font-weight: 400;
}

.weearn-admin .our-address h6 {
  color: rgba(0,0,0,0.3);
  font-size: 15px;
}

.weearn-admin .our-address h2 {
  color: #222;
  font-size: 16px;
}

.weearn-admin .our-address h4 {
  font-size: 13px;
  color: rgba(0,0,0,0.4);
  line-height: 1.65;
  font-weight: 400;
}

.weearn-admin .note h6 {
  color: rgba(0,0,0,0.3);
  font-size: 15px;
}

.weearn-admin .note p {
  color: rgba(0,0,0,0.4);
  margin-top: 20px;
}

.weearn-admin .payment {
  background-color: #2196F3;
  padding: 20px;
}

.weearn-admin .payment h3 {
  margin: 0;
  font-size: 20px;
  letter-spacing: 1.5px;
}

.weearn-admin .payment h3 span {
  color: #fff;
}
.invitation-container {
  margin-left: auto;
  margin-right: auto;
  background-color: rgb(244, 243, 246);
}

.invitation-container .row {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.invitation-container .col-md-12,
.invitation-container .col-md-11,
.invitation-container .col-md-1,
.invitation-container .col-lg-12,
.invitation-container .col-lg-11,
.invitation-container .col-lg-1 {
  padding-left: 0px;
  padding-right: 0px;
}

.invitation-main-container {
  overflow-y: auto;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  background-color: white;
}

.invitation-main-container .invitation-main-wrapper {
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
  position: relative;
}

.invitation-container .video-container {
  position: fixed;
  opacity: 0.01;
  left: 0;
}

.invitation-container .video-container video {
  height: 100vh;
}

.invitation-container .canvas-container {
  height: 100%;
  position: absolute;
}

.invitation-container button.btn:hover {
  height: none !important;
}

.invitation-main-container::-webkit-scrollbar {
  width: 5px;
}

.invitation-main-container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
  cursor: pointer;
}

.invitation-main-container::-webkit-scrollbar-thumb:hover {
  background: #3d61ff;
}

.invitation-main-container::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.invitation-main-container .main-logo {
  margin-left: auto;
  margin-right: auto;
  width: 65%;
  margin-top: 10%;
}

.invitation-main-container .herd-logo {
  margin-left: auto;
  margin-right: auto;
  width: 30%;
  margin-top: 10%;
}

.invitation-main-container .msg-logo {
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  margin-top: 30%;
}

.invitation-main-container .herd-logo img,
.invitation-main-container .main-logo img,
.invitation-main-container .msg-logo img {
  width: 100%;
}

.invitation-main-container .invitation-inviter-file {
  border: 1px solid rgba(151, 151, 151, 1);
  padding: 10px 15px;
  border-radius: 8px;
  margin-bottom: 10px;
  cursor: pointer;
}

.invitation-main-container .invitation-inviter-file i {
  margin-top: 5px;
}

.invitation-approval-container {
  margin-left: 0px;
  margin-right: 0px;
  position: relative;
  background: rgba(245, 250, 255, 1);
}

.invitation-approval-container .invitation-textarea-url {
  height: 0;
  position: absolute;
  z-index: -1;
  opacity: .01;
  top: 0px;
  left: 0px;
}

.invitation-approval-container .selfie-container .selfie-img div.list-picture-container,
.invitation-approval-container .selfie-container .selfie-img div.list-picture-container .avatar-thumbnail > div {
  border-radius: 0% !important;
}

.invitation-approval-container .cbk_required_document label {
  vertical-align: top;
}

.invitation-approval-container .cbk-form > div {
  background: rgba(241, 239, 239, 1);
  color: rgba(173, 173, 173, 1);
  padding: 10px 10px 5px 10px;
}

.invitation-approval-container .cbk-form label {
  padding-left: 0px;
  width: 90%;
}

.invitation-approval-container .cbk-form label:before {
  display: none;
}

.invitation-approval-container .cbk-form.checked > div {
  background: rgba(196, 224, 255, 1);
  color: rgba(69, 68, 61, 1);
  border: rgba(0, 122, 255, 1) 2px solid;
  border-radius: 2px;
}

.invitation-approval-container .cbk-form.checked label {
  padding-left: 10px !important;
}

.invitation-approval-container .cbk-form.checked label:after {
  background: transparent !important;
  border: none !important;
  line-height: 20px !important;
  font-size: 14px !important;
}

.invitation-approval-container .cbk-form.checked label:before {
  display: inline-block;
  border: none !important;
  background: transparent !important;
}

.invitation-approval-container .form-breadcrumb {
  font-size: 14px;
  margin-top: 32px;
  color: rgba(149, 149, 149, 1);
}

.invitation-approval-container .form-post-header {
  font-size: 32px !important;
  margin-top: 32px;
}

.invitation-approval-container .form-post-subheader {
  font-size: 18px !important;
  margin-top: 22px;
  color: rgba(0, 122, 255, 1);
}

.invitation-approval-container .form-post-subsubheader {
  font-size: 16px !important;
  margin-top: 22px;
  color: rgba(0, 122, 255, 1);
}

.invitation-approval-container .form-post-subheader.section-margin {
  margin-top: 42px !important;
}

.invitation-approval-container .form-cbk-container {
  margin-top: 22px;
}

.invitation-approval-container .form-message label {
  font-size: 16px !important;
  margin-top: 22px;
}

.invitation-approval-container .btn-public-copy-link {
  background: rgba(242, 248, 255, 1);
  cursor: pointer;
  margin-top: 22px;
}

.invitation-approval-container .btn-public-copy-link .share-link-icon {
  padding: 25px;
}

.invitation-approval-container .btn-public-copy-link .share-link-title {
  padding: 25px;
  font-size: 18px;
  color: rgba(0, 122, 255, 1);
}

.invitation-approval-container .btn-public-copy-link .share-link-msg {
  padding: 15px;
  font-size: 12px;
  color: rgba(136, 135, 131, 1);
}

.invitation-approval-container .btn-cancel {
  margin-top: 32px;
  font-size: 18px;
  cursor: pointer;
}

.modal-body .group-link-container div {
  display: inline-block;
  vertical-align: top;
}

.invitation-container .employee-profile .section-info {
  margin-bottom: 25px;
}

.invitation-container .employee-profile .emp-name {
  font-weight: bold;
  font-size: 18px;
}

/*
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media only screen and  (min-width: 1281px) {
  .invitation-container .has-footer-btn {
    padding-bottom: 90px;
  }

  .invitation-main-container {
    box-sizing: border-box;
    box-shadow: rgb(0 0 0 / 4%) 0px 2px 4px 0px;
    width: 30%;
    margin-left: auto;
    margin-right: auto;
  }

  .is-approve .invitation-main-container {
    width: 100% !important;
  }

  .invitation-container .bs-wizard-text {
    margin-left: 11px;
    color: white;
    font-weight: bolder;
  }

  .invitation-container .bs-wizard-check,
  .invitation-container .bs-wizard-dot,
  .invitation-container .bs-wizard-times {
    padding-top: 5px;
  }

  .invitation-main-container .main-label {
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    margin-bottom: 50px;
    margin-top: 10%;
    line-height: 30px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

  .invitation-main-container .completed-primary-label {
    font-weight: bold;
    font-size: 30px;
    text-align: center;
    margin-top: 10%;
    line-height: 50px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    color: #3d61ff;
  }

  .invitation-main-container .completed-secondary-label {
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    margin-bottom: 50px;
    margin-top: 10px;
    line-height: 40px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

  .invitation-main-container .btn-main {
    width: 100%;
    height: 50px;
    font-size: 20px;
    color: black !important;
    margin-top: 30px;
  }

  .invitation-container .consent-message {
    padding: 0px;
    color: #5E5E5E;
    font-size: 12px;
    margin-top: 50px;
  }

  .invitation-container .consent-message .herd-icon {
    height: 20px;
    width: 20px;
    margin-left: 5px;
    margin-right: 5px;
  }

  .invitation-container .container-border {
    padding-left: 40px;
    padding-right: 40px;
  }

  .invitation-container .container-border.has-footer-button {
    padding-bottom: 70px;
  }

  .invitation-container .btn-back {
    position: absolute;
    top: 20px;
    font-size: 20px;
    left: 40px;
    z-index: 999;
  }

  .invitation-container .label-header {
    margin-top: 60px;
    font-weight: bold;
    font-size: 20px;
  }

  .invitation-container .label-header.label-preview {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }

  .invitation-container .label-step {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 20px;
  }

  .invitation-container .label-step-description {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 20px;
  }

  .invitation-container .label-step.declined,
  .invitation-container .label-step-description.declined {
    color: #f94d4d !important;
  }

  .invitation-container .camera-guide {
    height: 50%;
    background-color: #f0f9ff;
  }

  .invitation-container .camera-guide .camera-guide-container {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
  }

  .invitation-container .camera-guide .camera-guide-selfie {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  .invitation-container .camera-guide .camera-guide-label {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 15px;
    color: #c3c3c3;
    font-weight: bold;
  }

  .invitation-container .guide-point {
    white-space: nowrap;
    margin-top: 30px;
  }

  .invitation-container .guide-point div {
    display: inline-block;
    vertical-align: top;
  }

  .invitation-container .guide-point div:nth-child(2) {
    width: 80%;
  }

  .invitation-container .guide-point div i {
    width: 50px;
    color: #00ACF2;
    font-size: 30px;
    vertical-align: top;
  }

  .invitation-container .guide-point div span {
    text-align: left;
    font-size: 15px;
    font-weight: bold;
    white-space: normal;
    width: 80%;
    line-height: 20px;
    vertical-align: top;
  }

  .invitation-container .btn-next-container {
    position: absolute;
    bottom: 20px;
    width: 90%;
    text-align: center;
    left: 5%;
  }

  .invitation-container .btn-next-container .btn-next {
    width: 100%;
    height: 50px;
    font-size: 15px;
  }

  .invitation-container .canvas-container .face-circle {
    position: absolute;
    width: 70%;
    border-radius: 100%;
    border: 2px solid #3d61ff;
    height: 50%;
    top: 10%;
    left: calc(100% - 85%);
  }

  .invitation-container .canvas-container .face-message {
    position: absolute;
    left: 15%;
    width: 70%;
    border-radius: 5px;
    border: 1px solid white;
    bottom: 15%;
    padding: 20px;
    text-align: center;
    font-size: 15px;
    line-height: 20px;
    color: rgba(0, 122, 255, 1);
    font-weight: bold;
    background: white;
  }

  .invitation-container .preview-container {
    width: 100%;
    height: calc(100vh - 200px);
  }

  .invitation-container .preview-container img {
    width: 100%;
    height: 100%;
  }

  .invitation-container .preview-btn-container {
    height: 130px;
    position: absolute;
    width: 100%;
    bottom: 0px;
    left: 0px;
    padding: 0px 40px;
  }

  .invitation-container .preview-btn-container .btn-confirm-photo,
  .invitation-container .preview-btn-container .btn-next {
    margin-top: 20px;
    width: 100%;
    height: 50px;
    font-size: 15px;
    margin-bottom: 20px;
  }

  .invitation-container .preview-btn-container .btn-recapture-photo {
    text-align: center;
    font-size: 15px;
    height: 20px;
  }

  .invitation-container .btn-confirm-personal {
    width: 100%;
    height: 50px;
    font-size: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .invitation-container .invitation-remark .span-created-by {
    color: #c3c3c3 !important;
    font-size: 10px;
    margin-left: 5px;
  }

  .invitation-container .input-categories {
    margin-bottom: 30px;
  }

  .invitation-container .btn-submit {
    width: 100%;
    height: 50px;
    font-size: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .invitation-container .picture-declined img {
    width: 100%;
  }

  .invitation-container input-multiple-picture .invite-attachment {
    margin-bottom: 30px;
  }

  .invitation-container .attachment-without-group input-multiple-picture .invite-attachment {
    padding: 5px 15px 10px 15px;
  }

  .invitation-container .wave-spinner {
    margin: 45% auto 0px auto;
  }

  .invitation-approval-container .selfie-container {
    white-space: nowrap;
    margin: 0px 0px 20px 0px;
  }

  .invitation-approval-container .selfie-container .selfie-label {
    display: inline-block;
    vertical-align: top;
    width: 50%;
  }

  .invitation-approval-container .selfie-container .selfie-img {
    display: inline-block;
    width: 50%;
    text-align: right;
  }

  .invitation-approval-container .selfie-container .selfie-img div.list-picture-container {
    border-radius: 10px;
    padding: 2px;
    border: 1px solid #ccc;
    border-radius: 10px;
    height: 160px !important;
    width: 160px !important;
  }

  .invitation-approval-container .selfie-container .selfie-img .no-img {
    font-size: 89px;
    border: 1px solid #ccc;
    border-radius: 10px;
    height: 160px;
    width: 160px;
    float: right;
    padding: 31px 36px;
  }

  .invitation-approval-container .invitation-approval-wrapper-personal {
    padding: 50px 0px 40px 70px;
  }

  .invitation-approval-container .invitation-approval-wrapper-document {
    padding: 50px 70px 70px 70px;
  }

  .invitation-approval-container .approval-header {
    margin-top: 40px;
    margin-bottom: 10px;
  }

  .invitation-approval-container .approval-header span {
    font-size: 23px;
    font-weight: bold;
  }

  .invitation-approval-container .post-header {
    margin-top: 40px;
    margin-bottom: 10px;
  }

  .invitation-approval-container .post-header span {
    font-size: 23px;
    font-weight: bold;
  }

  .invitation-approval-container .approval-btn-container {
    position: absolute;
    bottom: 0px;
    left: calc(50% - 187.5px);
  }

  .invitation-approval-container .approval-btn-container button {
    width: 175px;
    height: 40px;
    font-size: 15px;
    margin-right: 10px;
  }

  .invitation-approval-container .init-change-container {
    position: absolute;
    bottom: 0px;
    left: calc(50% - 87.5px);
  }

  .invitation-approval-container .init-change-container button {
    width: 175px;
    height: 40px;
    font-size: 15px;
    margin-right: 10px;
  }

  .invitation-approval-container .approval-back-btn-container {
    position: absolute;
    bottom: 0px;
    left: 70px;
    cursor: pointer;
  }

  .invitation-approval-container .approval-back-btn-container i {
    font-size: 30px;
    line-height: 50px;
  }

  .invitation-approval-container .invitation-main-container {
    height: calc(100vh -  200px) !important;
  }

  .invitation-container .bs-declined-dot {
    height: 10px;
    width: 10px;
    position: absolute;
    background: red;
    top: 0px;
    right: 0px;
    border-radius: 100%;
    border: 1px solid white;
  }

  .invitation-approval-container .group-link-container .action-container {
    margin-top: 10px;
  }

  .invitation-approval-container .recipient-email-header {
    background-color: #f0f9ff;
    font-size: 15px;
    font-weight: bold;
    padding: 15px 30px;
  }

  .invitation-approval-container .recipient-email-table td {
    padding: 15px 20px;
  }

  .invitation-approval-container .recipient-email-table .invite-url {
    position: absolute;
    height: 0px;
    opacity: 0.01;
    z-index: -1;
  }

  .invitation-container .upload-not-required {
    background-color: #eee;
    padding: 30px 0px;
    font-size: 13px;
    font-weight: 400;
    border-radius: 5px;
    text-align: center;
  }

  .invitation-approval-container .btn-add-recipient div {
    padding: 7px 8px;
    font-size: 16px;
    margin-right: 5px;
  }

  .invitation-approval-container .btn-public-copy-link .share-link-icon,
  .invitation-approval-container .btn-public-copy-link .share-link-title,
  .invitation-approval-container .btn-public-copy-link .share-link-msg {
    padding: 35px !important;
  }
}

/*
  ##Device = Laptop, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media only screen and (min-width: 1025px) and (max-width: 1280px) {
  .invitation-container .has-footer-btn {
    padding-bottom: 70px;
  }

  .invitation-main-container {
    box-sizing: border-box;
    width: 30%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
  }

  .is-approve .invitation-main-container {
    width: 100% !important;
  }

  .invitation-container .consent-message {
    padding: 0px;
    color: #5E5E5E;
    font-size: 8px;
    margin-top: 30px;
  }

  .invitation-container .consent-message .herd-icon {
    height: 15px;
    width: 15px;
    margin-left: 5px;
    margin-right: 5px;
  }

  .invitation-container .bs-wizard-text {
    margin-left: 11px;
    color: white;
    font-weight: bolder;
  }

  .invitation-container .bs-wizard-check,
  .invitation-container .bs-wizard-dot,
  .invitation-container .bs-wizard-times {
    padding-top: 5px;
  }

  .invitation-container .wave-spinner {
    margin: 45% auto 0px auto;
  }

  .invitation-main-container .main-label {
    font-weight: bold;
    font-size: 15px;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 10%;
    line-height: 30px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

  .invitation-main-container .completed-primary-label {
    font-weight: bold;
    font-size: 25px;
    text-align: center;
    margin-top: 10%;
    line-height: 50px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    color: #3d61ff;
  }

  .invitation-main-container .completed-secondary-label {
    font-weight: bold;
    font-size: 15px;
    text-align: center;
    margin-bottom: 15px;
    margin-top: 10px;
    line-height: 30px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

  .invitation-main-container .p-label {
    font-weight: bold;
    font-size: 15px;
    text-align: center;
    margin-bottom: 15px;
    margin-top: 10%;
    line-height: 30px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

  .invitation-main-container .btn-main {
    width: 100%;
    height: 30px;
    font-size: 12.5px;
    color: black !important;
    margin-top: 15px;
  }

  .invitation-container .container-border {
    padding-left: 20px;
    padding-right: 20px;
  }

  .invitation-container .container-border.has-footer-button {
    padding-bottom: 50px;
  }

  .invitation-container .btn-back {
    position: absolute;
    top: 20px;
    font-size: 15px;
    left: 20px;
    z-index: 999;
  }

  .invitation-container .label-header {
    margin-top: 45px;
    font-weight: bold;
    font-size: 15px;
  }

  .invitation-container .label-header.label-preview {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }

  .invitation-container .label-step {
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 10px;
  }

  .invitation-container .label-step-description {
    font-weight: bold;
    font-size: 11px;
    margin-bottom: 10px;
  }

  .invitation-container .label-step.declined,
  .invitation-container .label-step-description.declined {
    color: #f94d4d !important;
  }

  .invitation-container .picture-declined img {
    width: 100%;
  }

  .invitation-container .camera-guide {
    height: 50%;
    background-color: #f0f9ff;
  }

  .invitation-container .camera-guide .camera-guide-container {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
  }

  .invitation-container .camera-guide .camera-guide-selfie {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  .invitation-container .camera-guide .camera-guide-label {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #c3c3c3;
    font-weight: bold;
  }

  .invitation-container .guide-point {
    white-space: nowrap;
    margin-top: 10px;
  }

  .invitation-container .guide-point div {
    display: inline-block;
    vertical-align: top;
  }

  .invitation-container .guide-point div:nth-child(2) {
    width: 80%;
  }

  .invitation-container .guide-point div i {
    width: 20px;
    color: #00ACF2;
    font-size: 15px;
    vertical-align: top;
  }

  .invitation-container .guide-point div span {
    text-align: left;
    font-size: 13px;
    font-weight: bold;
    white-space: normal;
    width: 80%;
    line-height: 15px;
    vertical-align: top;
  }

  .invitation-container .btn-next-container {
    position: absolute;
    bottom: 20px;
    width: 90%;
    text-align: center;
    left: 5%;
  }

  .invitation-container .btn-next-container .btn-next {
    width: 100%;
    height: 30px;
    font-size: 13px;
  }

  .invitation-container .canvas-container .face-circle {
    position: absolute;
    width: 70%;
    border-radius: 100%;
    border: 2px solid #3d61ff;
    height: 50%;
    top: 10%;
    left: calc(100% - 85%);
  }

  .invitation-container .canvas-container .face-message {
    position: absolute;
    left: 15%;
    width: 70%;
    border-radius: 5px;
    border: 1px solid white;
    bottom: 15%;
    padding: 20px;
    text-align: center;
    font-size: 13px;
    line-height: 15px;
    color: rgba(0, 122, 255, 1);
    font-weight: bold;
    background: white;
  }

  .invitation-container .preview-container {
    width: 100%;
  }

  .invitation-container .preview-container img {
    width: 100%;
    height: calc(100vh - 130px);
  }

  .invitation-container .preview-btn-container .btn-confirm-photo,
  .invitation-container .preview-btn-container .btn-next {
    margin-top: 10px;
    width: 100%;
    margin-bottom: 10px;
    height: 30px;
    font-size: 13px;
  }

  .invitation-container .preview-btn-container .btn-recapture-photo {
    text-align: center;
    font-size: 13px;
    margin-bottom: 10px;
  }

  .invitation-container .btn-confirm-personal {
    width: 100%;
    height: 30px;
    font-size: 13px;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .invitation-container .input-categories {
    margin-bottom: 25px;
  }

  .invitation-container .btn-submit {
    width: 100%;
    height: 30px;
    font-size: 13px;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .invitation-container .invitation-remark .span-created-by {
    color: #c3c3c3 !important;
    font-size: 10px;
    margin-left: 5px;
  }

  .invitation-container input-multiple-picture .invite-attachment {
    margin-bottom: 20px;
  }

  .invitation-container .attachment-without-group input-multiple-picture .invite-attachment {
    padding: 5px 15px 10px 15px;
  }

  .invitation-approval-container .selfie-container {
    white-space: nowrap;
    margin: 0px 0px 20px 0px;
  }

  .invitation-approval-container .selfie-container .selfie-label {
    display: inline-block;
    vertical-align: top;
    width: 50%;
  }

  .invitation-approval-container .selfie-container .selfie-img {
    display: inline-block;
    width: 50%;
    text-align: right;
  }

  .invitation-approval-container .selfie-container .selfie-img div.list-picture-container {
    height: 120px !important;
    width: 120px !important;
    border-radius: 10px;
    padding: 2px;
    border: 1px solid #ccc;
    border-radius: 10px;
  }

  .invitation-approval-container .selfie-container .selfie-img .no-img {
    font-size: 89px;
    border: 1px solid #ccc;
    border-radius: 10px;
    height: 120px;
    width: 120px;
    float: right;
    padding: 31px 36px;
  }

  .invitation-approval-container .invitation-approval-wrapper-personal {
    padding: 25px 0px 15px 35px;
  }

  .invitation-approval-container .invitation-approval-wrapper-document {
    padding: 25px 35px 35px 35px;
  }

  .invitation-approval-container .approval-header {
    margin-top: 20px;
    margin-bottom: 10px;
  }

  .invitation-approval-container .approval-header span {
    font-size: 23px;
    font-weight: bold;
  }

  .invitation-approval-container .post-header {
    margin-top: 30px;
    margin-bottom: 10px;
  }

  .invitation-approval-container .post-header span {
    font-size: 23px;
    font-weight: bold;
  }

  .invitation-approval-container .approval-btn-container {
    position: absolute;
    bottom: -10px;
    left: calc(50% - 150px);
  }

  .invitation-approval-container .approval-btn-container button {
    width: 150px;
    margin-right: 10px;
  }

  .invitation-approval-container .init-change-container {
    position: absolute;
    bottom: -10px;
    left: calc(50% - 75px);
  }

  .invitation-approval-container .init-change-container button {
    width: 150px;
    margin-right: 10px;
  }

  .invitation-approval-container .approval-back-btn-container {
    position: absolute;
    bottom: -10px;
    left: 50px;
    cursor: pointer;
  }

  .invitation-approval-container .approval-back-btn-container i {
    font-size: 25px;
    line-height: 30px;
  }

  .invitation-approval-container .invitation-main-container {
    height: calc(100vh -  150px) !important;
  }

  .invitation-container .bs-declined-dot {
    height: 8px;
    width: 8px;
    position: absolute;
    background: red;
    top: 0px;
    right: 0px;
    border-radius: 100%;
    border: 1px solid white;
  }

  .invitation-approval-container .group-link-container .action-container {
    margin-top: 10px;
  }

  .invitation-approval-container .recipient-email-header {
    background-color: #f0f9ff;
    font-size: 15px;
    font-weight: bold;
    padding: 15px 30px;
  }

  .invitation-approval-container .recipient-email-table td {
    padding: 15px 20px;
  }

  .invitation-approval-container .recipient-email-table .invite-url {
    position: absolute;
    height: 0px;
    opacity: 0.01;
    z-index: -1;
  }

  .invitation-container .upload-not-required {
    background-color: #eee;
    padding: 30px 0px;
    font-size: 13px;
    font-weight: 400;
    border-radius: 5px;
    text-align: center;
  }

  .invitation-approval-container .btn-add-recipient div {
    padding: 7px 8px;
    font-size: 16px;
    margin-right: 5px;
  }

  .invitation-container .employee-profile .emp-name {
    font-size: 15px;
  }
}

/*
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media only screen and (max-width: 1024px) {
  .invitation-container .has-footer-btn {
    padding-bottom: 180px;
  }

  .invitation-container .consent-message {
    padding: 0px;
    color: #5E5E5E;
    font-size: 20px;
    margin-top: 75px;
  }

  .invitation-container .consent-message .herd-icon {
    height: 50px;
    width: 50px;
    margin-left: 5px;
    margin-right: 5px;
  }

  .invitation-main-container {
    width: 100vw;
  }

  .invitation-main-container .main-label {
    font-weight: bold;
    font-size: 50px;
    text-align: center;
    margin-bottom: 50px;
    margin-top: 10vh;
  }

  .invitation-main-container .main-label {
    font-weight: bold;
    font-size: 50px;
    text-align: center;
    margin-bottom: 50px;
    margin-top: 10vh;
    line-height: 80px;
    width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  .invitation-main-container .completed-primary-label {
    font-weight: bold;
    font-size: 50px;
    text-align: center;
    margin-top: 10%;
    line-height: 80px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    color: #3d61ff;
  }

  .invitation-main-container .completed-secondary-label {
    font-weight: bold;
    font-size: 40px;
    text-align: center;
    margin-bottom: 15px;
    margin-top: 20px;
    line-height: 80px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

  .invitation-main-container .btn-main {
    width: 100%;
    height: 100px;
    font-size: 30px;
    color: black !important;
    margin-top: 50px;
  }

  .invitation-container .invitation-main-container .container-border {
    padding-left: 50px !important;
    padding-right: 50px !important;
  }

  .invitation-container .wave-spinner {
    margin: 45% auto 0px auto;
    width: 140px;
    height: 150px;
  }

  .invitation-container .wave-spinner > div {
    width: 15px;
    margin: 0 3px;
  }

  .invitation-container .btn-back {
    position: absolute;
    top: 50px;
    font-size: 45px;
    left: 60px;
    z-index: 999;
  }

  .invitation-container .label-header {
    margin-top: 125px;
    font-weight: bold;
    font-size: 45px;
    margin-bottom: 20px;
  }

  .invitation-container .label-header.label-preview {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
    line-height: 50px;
  }

  .invitation-container .bs-wizard > .bs-wizard-step > .bs-wizard-dot,
  .bs-wizard-check,
  .bs-wizard-times {
    width: 80px;
    height: 80px;
    margin-top: -40px;
    margin-left: -40px;
    top: 60px;
  }

  .invitation-container .bs-wizard > .bs-wizard-step .bs-wizard-stepnum {
    font-size: 30px;
  }

  .invitation-container .bs-wizard {
    height: 200px;
  }

  .invitation-container .bs-wizard > .bs-wizard-step > .progress {
    margin: 60px 0;
  }

  .invitation-container .bs-wizard-text {
    margin-left: 28px;
    color: white;
    font-size: 35px;
    font-weight: bolder;
  }

  .invitation-container .bs-wizard-check,
  .invitation-container .bs-wizard-dot,
  .invitation-container .bs-wizard-times {
    padding-top: 28px;
  }

  .invitation-container .label-step {
    font-weight: bold;
    font-size: 35px;
    margin-bottom: 30px;
  }

  .invitation-container .label-step-description {
    font-weight: bold;
    font-size: 30px;
    margin-bottom: 30px;
  }

  .invitation-container .label-step.declined,
  .invitation-container .label-step-description.declined {
    color: #f94d4d !important;
  }

  .invitation-container .picture-declined img {
    width: 100%;
  }

  .invitation-container .camera-guide {
    height: 50%;
    background-color: #f0f9ff;
  }

  .invitation-container .camera-guide .camera-guide-container {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10%;
  }

  .invitation-container .camera-guide .camera-guide-selfie {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  .invitation-container .camera-guide .camera-guide-label {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
    font-size: 30px;
    color: #c3c3c3;
    font-weight: bold;
  }

  .invitation-container .guide-point {
    white-space: nowrap;
    margin-top: 30px;
  }

  .invitation-container .guide-point div {
    display: inline-block;
    vertical-align: top;
  }

  .invitation-container .guide-point div:nth-child(2) {
    width: 80%;
  }

  .invitation-container .guide-point div i {
    width: 100px;
    color: #00ACF2;
    font-size: 50px;
    vertical-align: top;
  }

  .invitation-container .guide-point div span {
    text-align: left;
    font-size: 35px;
    font-weight: bold;
    white-space: normal;
    width: 80%;
    line-height: 45px;
    vertical-align: top;
  }

  .invitation-container .btn-next-container {
    position: absolute;
    bottom: 50px;
    width: 90%;
    text-align: center;
    left: 5%;
  }

  .invitation-container .btn-next-container .btn-next {
    width: 100%;
    height: 100px;
    font-size: 30px;
    margin-top: 50px;
  }

  .invitation-container .canvas-container .face-circle {
    position: absolute;
    width: 70%;
    border-radius: 100%;
    border: 5px solid #3d61ff;
    height: 50%;
    top: 10%;
    left: calc(100% - 85%);
  }

  .invitation-container .canvas-container .face-message {
    position: absolute;
    left: 15%;
    width: 70%;
    border-radius: 5px;
    border: 1px solid white;
    bottom: 15%;
    padding: 25px;
    text-align: center;
    font-size: 35px;
    line-height: 50px;
    color: rgba(0, 122, 255, 1);
    font-weight: bold;
    background: white;
  }

  .invitation-container .preview-container {
    width: 100%;
    height: calc(100vh - 420px);
  }

  .invitation-container .preview-container img {
    width: 100%;
    height: 100%;
  }

  .invitation-container .preview-btn-container {
    position: absolute;
    width: 100%;
    bottom: 0px;
    left: 0px;
    padding: 0px 50px;
  }

  .invitation-container .preview-btn-container .btn-confirm-photo,
  .invitation-container .preview-btn-container .btn-next {
    width: 100%;
    height: 100px;
    font-size: 30px;
  }

  .invitation-container .preview-btn-container .btn-recapture-photo {
    text-align: center;
    font-size: 30px;
    margin-top: 50px;
    margin-bottom: 50px;
  }

  .invitation-container .employee-profile h4 {
    font-size: 40px;
    margin-bottom: 15px;
  }

  .invitation-container .employee-profile label {
    font-size: 30px !important;
    line-height: 85px;
  }

  .invitation-container .employee-profile input-text input[type=text] {
    font-size: 35px !important;
    height: 90px;
    padding: 0px 35px;
  }

  .invitation-container .employee-profile .signature-input input[type=text] {
    font-size: 50px !important;
    height: 95px;
    padding: 0px 35px;
  }

  .invitation-container .employee-profile input-select-object-new button.dropdown-toggle,
  .invitation-container .employee-profile input-select-object-new button.dropdown-toggle .shift-input-row {
    font-size: 35px !important;
    line-height: 75px;
    height: 90px;
    padding-left: 20px;
  }

  .invitation-container .employee-profile input-select-object-new button.dropdown-toggle .caret {
    font-size: 35px !important;
    margin-top: 30px;
  }

  .invitation-container .employee-profile input-select-object-new .dropdown-menu .input-searchbox {
    height: 90px;
    padding: 0px 25px;
  }

  .invitation-container .employee-profile input-select-object-new .dropdown-menu .input-searchbox i {
    font-size: 30px;
    margin-top: 26px;
  }

  .invitation-container .employee-profile input-select-object-new .textbox-filter {
    height: 80px;
    font-size: 35px !important;
    width: calc(100% - 40px);
  }

  .invitation-container .employee-profile input-select-object-new .scrollable-menu li {
    font-size: 35px;
  }

  .invitation-container .employee-profile input-select-object-new .scrollable-menu li a {
    padding: 30px;
  }

  .invitation-container .employee-profile input-select-object-new .scrollable-menu {
    max-height: 800px !important;
  }

  .invitation-container .employee-profile input-datepicker input[type=text] {
    font-size: 35px !important;
    height: 90px;
    width: 350px;
    padding: 0 25px;
  }

  .invitation-container .employee-profile input-datepicker .glyphicon {
    font-size: 35px;
    margin-top: 15px;
    right: 25px;
  }

  .invitation-container .employee-profile input-datepicker .datepicker {
    height: 700px;
    width: 700px;
    font-size: 34px;
    font-weight: bold;
  }

  .invitation-container .employee-profile input-datepicker .bootstrap-datetimepicker-widget table td.day,
  .invitation-container .employee-profile input-datepicker .datepicker table thead tr th {
    height: 87px;
    line-height: 50px;
  }

  .invitation-container .employee-profile input-datepicker .bootstrap-datetimepicker-widget .datepicker-months table td span,
  .invitation-container .employee-profile input-datepicker .bootstrap-datetimepicker-widget .datepicker-years  table td span,
  .invitation-container .employee-profile input-datepicker .bootstrap-datetimepicker-widget .datepicker-decades table td span {
    width: 200px;
    height: 148px;
    line-height: 130px !important;
  }

  .invitation-container .employee-profile input-datepicker .datepicker .datepicker-months th.prev,
  .invitation-container .employee-profile input-datepicker .datepicker .datepicker-months th.next,
  .invitation-container .employee-profile input-datepicker .datepicker .datepicker-years th.prev,
  .invitation-container .employee-profile input-datepicker .datepicker .datepicker-years th.next,
  .invitation-container .employee-profile input-datepicker .datepicker .datepicker-decades th.prev,
  .invitation-container .employee-profile input-datepicker .datepicker .datepicker-decades th.next {
    width: 100px;
  }

  .invitation-container .employee-profile input-datepicker .datepicker table > thead > tr .prev .glyphicon,
  .invitation-container .employee-profile input-datepicker .datepicker table > thead > tr .next .glyphicon {
    right: 0px;
  }

  .invitation-container .tooltip-bottom {
    font-size: 18px;
  }

  .invitation-container .employee-profile .validation-error {
    font-size: 28px;
  }

  .invitation-container .btn-confirm-personal {
    width: 100%;
    height: 100px;
    font-size: 30px;
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .invitation-container #employee-bank-info .sub-category .sub-category-title {
    font-size: 35px;
    height: 70px;
    padding: 25px 25px;
  }

  .invitation-container #employee-bank-info .btn-add {
    height: 50px;
    width: 50px;
    font-size: 25px;
    padding-top: 12px;
    margin-bottom: 20px;
  }

  .invitation-container #employee-bank-info .btn-delete {
    font-size: 30px;
  }

  .invitation-container .input-categories {
    margin-bottom: 50px;
  }

  .invitation-container #employee-require-document h4 {
    font-size: 35px;
    margin-bottom: 30px;
  }

  .invitation-container .btn-submit {
    width: 100%;
    height: 100px;
    font-size: 30px;
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .invitation-container input-multiple-picture .invite-attachment {
    padding: 35px 30px;
    margin-bottom: 30px;
  }

  .invitation-container .attachment-without-group input-multiple-picture .invite-attachment {
    padding: 0 30px 35px 30px;
  }

  .invitation-container input-multiple-picture .btn-invite-upload {
    font-size: 28px;
  }

  .invitation-container input-multiple-picture .btn-invite-upload i,
  .invitation-container input-multiple-picture .row-attachment i {
    font-size: 25px !important;
    width: 30px;
  }

  .invitation-container input-multiple-picture .row-attachment {
    margin-top: 30px;
    font-size: 28px;
  }

  .invitation-container .invitation-remark .span-created-by {
    color: #c3c3c3 !important;
    font-size: 20px;
    margin-left: 15px;
  }

  .invitation-container textarea {
    font-size: 25px !important;
  }

  .invitation-approval-container .selfie-container {
    white-space: nowrap;
    margin: 0px 0px 20px 0px;
  }

  .invitation-approval-container .selfie-container .selfie-label {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    font-size: 25px !important;
  }

  .invitation-approval-container .selfie-container .selfie-label h4 {
    font-size: 25px !important;
  }

  .invitation-approval-container .selfie-container .selfie-img {
    display: inline-block;
    width: 50%;
    text-align: right;
  }

  .invitation-approval-container .selfie-container .selfie-img div.list-picture-container {
    height: 300px !important;
    width: 300px !important;
    border-radius: 10px;
    padding: 2px;
    border: 1px solid #ccc;
    border-radius: 10px;
  }

  .invitation-approval-container .selfie-container .selfie-img .no-img {
    font-size: 150px;
    border: 1px solid #ccc;
    border-radius: 10px;
    height: 300px;
    width: 300px;
    float: right;
    padding: 65px 85px;
  }

  .invitation-approval-container .approval-header {
    margin-top: 50px;
    margin-bottom: 30px;
  }

  .invitation-approval-container .approval-header span {
    font-size: 40px;
    font-weight: bold;
  }

  .invitation-approval-container .post-header {
    margin-top: 70px;
    margin-bottom: 10px;
  }

  .invitation-approval-container .post-header span {
    font-size: 40px;
    font-weight: bold;
  }

  .invitation-container.is-approve .invitation-main-container {
    overflow-y: unset !important;
  }

  .invitation-approval-container .approval-btn-container {
    position: absolute;
    bottom: 30px;
    left: calc(50% - 100px);
  }

  .invitation-approval-container .approval-btn-container button {
    width: 200px;
    margin-right: 10px;
    height: 50px;
    font-size: 15px;
  }

  .invitation-approval-container .approval-back-btn-container {
    position: absolute;
    bottom: 30px;
    left: 50px;
    cursor: pointer;
  }

  .invitation-approval-container .approval-back-btn-container i {
    font-size: 45px;
    line-height: 50px;
  }

  .invitation-approval-container .init-change-container {
    position: absolute;
    bottom: 30px;
    left: calc(50% - 100px);
  }

  .invitation-approval-container .init-change-container button {
    width: 200px;
    margin-right: 10px;
    height: 50px;
    font-size: 15px;
  }

  .invitation-approval-container .init-change-container {
    position: absolute;
    bottom: 30px;
    left: 50px;
    cursor: pointer;
  }

  .invitation-approval-container .init-change-container i {
    font-size: 45px;
    line-height: 50px;
  }

  .invitation-container .bs-declined-dot {
    height: 20px;
    width: 20px;
    position: absolute;
    background: red;
    top: 0px;
    right: 0px;
    border-radius: 100%;
    border: 2px solid white;
  }

  .invitation-container .ckbox label {
    padding-left: 55px !important;
    vertical-align: top;
  }

  .invitation-container .ckbox label:before {
    width: 50px;
    height: 50px;
  }

  .invitation-container .ckbox input[type=checkbox]:checked + label::after {
    width: 50px;
    height: 50px;
    font-size: 30px;
    padding-top: 15px;
  }

  .invitation-approval-container .group-link-container .action-container {
    margin-top: 20px;
    font-size: 25px;
  }

  .invitation-approval-container .group-link-container button {
    height: 50px;
    font-size: 22px;
    width: 130px;
  }

  .invitation-approval-container .recipient-email-header {
    background-color: #f0f9ff;
    font-size: 30px;
    font-weight: bold;
    padding: 45px 50px;
  }

  .invitation-approval-container .recipient-email-table td {
    padding: 30px 50px;
    font-size: 25px;
  }

  .invitation-approval-container .recipient-email-table td button {
    height: 45px;
    font-size: 25px;
    width: 175px;
  }

  .invitation-approval-container .recipient-email-table .invite-url {
    position: absolute;
    height: 0px;
    opacity: 0.01;
    z-index: -1;
  }

  .invitation-container .upload-not-required {
    background-color: #eee;
    padding: 80px 0px;
    font-size: 30px;
    font-weight: 400;
    border-radius: 5px;
    text-align: center;
  }

  .invitation-container  form-address .btn-allow-edit {
    font-size: 30px;
    margin-top: 30px;
  }

  .invitation-container  button-generate-address .btn {
    font-size: 30px;
    height: 60px;
    padding: 0px 25px;
  }

  .invitation-approval-container .btn-add-recipient {
    margin-top: 30px;
  }

  .invitation-approval-container .btn-add-recipient div {
    padding: 13px 13px;
    font-size: 20px;
    margin-right: 10px;
  }

  .invitation-approval-container .btn-add-recipient span {
    font-size: 25px;
  }

  .invitation-approval-container .cbk-form.checked label {
    font-size: 35px !important;
    padding-left: 45px !important;
  }

  .invitation-approval-container .cbk-form.checked label:after {
    line-height: 40px !important;
    font-size: 34px !important;
    padding-top: 20px !important;
  }

  .invitation-approval-container .form-breadcrumb {
    margin-top: 52px;
    font-size: 34px;
    color: rgba(149, 149, 149, 1);
  }

  .invitation-approval-container .form-post-header {
    font-size: 32px !important;
    margin-top: 52px;
    font-size: 52px !important;
  }

  .invitation-approval-container .form-post-subheader {
    font-size: 38px !important;
    margin-top: 42px;
  }

  .invitation-approval-container .form-post-subsubheader {
    font-size: 36px !important;
    margin-top: 42px;
  }

  .invitation-approval-container .form-post-subheader.section-margin {
    margin-top: 62px !important;
  }

  .invitation-approval-container .btn-public-copy-link .share-link-icon,
  .invitation-approval-container .btn-public-copy-link .share-link-title,
  .invitation-approval-container .btn-public-copy-link .share-link-msg {
    padding: 55px !important;
  }

  .invitation-approval-container .btn-public-copy-link .share-link-title {
    font-size: 28px;
  }

  .invitation-approval-container .btn-public-copy-link .share-link-msg {
    font-size: 20px;
  }

  .invitation-approval-container .btn-cancel {
    margin-top: 42px;
    font-size: 28px;
  }

  .invitation-approval-container .recipient-email-table .btn-icon {
    font-size: 25px;
  }

  .invitation-container .employee-profile .tab-navigation .nav-tabs > li > a {
    font-size: 28px !important;
    line-height: 28px;
  }

  .invitation-container .employee-profile .emp-name {
    font-size: 34px;
  }

  .invitation-step-sent .invite-attachment .btn-invite-upload-container {
    padding: 100px 28px !important;
  }
}

/*
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media only screen and (max-width: 1024px) and (orientation: landscape) {
  .invitation-main-container .invitation-main-wrapper {
    min-height: calc(100vh * 2.5);
  }
}

.invitation-approval-container .invitation-main-container .invitation-main-wrapper {
  min-height: calc(100vh - 200px);
}

.invitation-main-container .btn-main.btn-first {
  color: white !important;
}

.invitation-container .btn-lang {
  width: 100%;
  height: 50px;
  font-size: 15px;
  color: black !important;
}

.invitation-container .btn-lang:hover {
  width: 100%;
  height: 50px;
  color: black;
}

.invitation-container .btn-large {
  width: 100%;
  height: 50px;
  font-size: 15px;
}

.invitation-container .btn-large:hover {
  width: 100%;
  height: 50px;
}

.invitation-container .invitation-main-container.fullscreen {
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
}

.invitation-inner-container {
  background-color: rgb(255, 255, 255);
  box-shadow: rgb(0 0 0 / 4%) 0px 2px 4px 0px;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.05);
  border-image: initial;
  margin: 0px 15px 0px 15px;
  padding: 15px 50px 50px 50px;
}

.invitation-container.is-approve {
  background-color: transparent !important;
  padding: 0px !important;
}

.invitation-container.is-approve .invitation-inner-container {
  box-shadow: transparent 0px 2px 4px 0px !important;
  border-width: 0px !important;
}

/* Modified CSS */

.invitation-container .modified {
  color: rgba(0, 122, 255, 1);
}

.invitation-container .modified .invite-attachment {
  border: 1px solid rgba(0, 122, 255, 1);
}

.invitation-container input-text.modified input,
.invitation-container input-datepicker.modified input {
  border: 1px solid rgba(0, 122, 255, 1) !important;
}

.invitation-container input-select-object-new.modified button {
  border: 1px solid rgba(0, 122, 255, 1) !important;
  color: rgba(0, 122, 255, 1) !important;
}

.invitation-container .bank-container.modified .sub-category-title {
  color: rgba(0, 122, 255, 1) !important;
}

.invitation-container .bank-container.modified .sub-category {
  border: 2px solid rgba(0, 122, 255, 1) !important;
}

.invitation-approval-container .selfie-container.modified .selfie-img .list-picture-container {
  border: 1px solid rgba(0, 122, 255, 1) !important;
}

/* Rejected CSS */

.invitation-container .rejected {
  color: #f94d4d !important;
}

.invitation-container .rejected .invite-attachment {
  border: 1px solid #f94d4d;
}

.invitation-container input-text.rejected input,
.invitation-container input-datepicker.rejected input {
  border: 1px solid #f94d4d !important;
}

.invitation-container input-select-object-new.rejected button {
  border: 1px solid #f94d4d !important;
  color: #f94d4d !important;
}

.invitation-container .bank-container.rejected .sub-category-title {
  color: #f94d4d !important;
}

.invitation-container .bank-container.rejected .sub-category {
  border: 2px solid #f94d4d !important;
}

.invitation-approval-container .selfie-container.rejected .selfie-img .list-picture-container {
  border: 1px solid #f94d4d !important;
}

.invitation-container .bs-wizard-dot {
  background-color: #c3c3c3 !important;
}

.invitation-container .bs-wizard-stepnum {
  color: #c3c3c3 !important;
}

.invitation-container.is-approve .bs-wizard {
  margin-top: 30px;
}

.invitation-container.is-approve .bs-wizard-stepnum {
  color: #45443d !important;
}

.invitation-container.is-approve .progress,
.invitation-container.is-approve .bs-wizard .progress-bar {
  background-color: rgba(151, 151, 151, 1) !important;
  height: 2px;
}

.invitation-container.is-approve .bs-wizard > .bs-wizard-step.complete > .bs-wizard-check {
  background-color: rgba(0, 122, 255, 1) !important;
}

.invitation-container.is-approve .bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot {
  background-color: rgba(204, 228, 255) !important;
}

.invitation-container.is-approve .bs-wizard > .bs-wizard-step.declined > .bs-wizard-times {
  background-color: rgba(255, 0, 0) !important;
}

.invitation-container.is-approve .bs-wizard > .bs-wizard-step.complete > .bs-wizard-check,
.invitation-container.is-approve .bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot,
.invitation-container.is-approve .bs-wizard > .bs-wizard-step.declined > .bs-wizard-times {
  height: 19px;
  width: 19px;
}

.invitation-container.is-approve .progress,
.invitation-container.is-approve .bs-wizard .progress-bar {
  background-color: rgba(151, 151, 151, 1) !important;
  height: 1px;
  margin: 20px 0;
}

.invitation-container.is-approve .has-feedback .form-control.input-search,
.custom-tooltip-content.invitation-step-member .search_member .form-control.input-search {
  height: 42px;
  border-radius: 8px;
  padding: 0 45px;
  font-size: 14px !important;
}

.invitation-container.is-approve .has-feedback .form-control-feedback.glyphicon-search,
.invitation-container.is-approve .has-feedback .form-control-feedback.glyphicon-refresh,
.custom-tooltip-content.invitation-step-member .search_member .form-control-feedback.glyphicon-search,
.custom-tooltip-content.invitation-step-member .search_member .form-control-feedback.glyphicon-refresh {
  line-height: 42px;
  font-size: 16px;
  padding-left: 15px;
}

.invitation-container.is-approve .has-feedback .glyphicon-remove,
.custom-tooltip-content.invitation-step-member .search_member .glyphicon-remove {
  line-height: 42px;
  font-size: 16px;
  padding-right: 20px;
  margin-right: 0px;
}

.invitation-container.is-approve .autocomplete ul {
  border: 0px !important;
  box-shadow: 0 2px 15px 0 rgba(73, 89, 107, 0.2);
}

.invitation-container.is-approve .autocomplete ul li {
  padding: 5px;
  /*height: 75px;*/
}

.invitation-container.is-approve .autocomplete ul li .list-picture-container {
  /* height: 50px;
    width: 50px;*/
  margin-right: 10px;
}

.invitation-container.is-approve .autocomplete ul li .name,
.invitation-container.is-approve .autocomplete ul li .role {
  /* font-size: 18px !important; */
}

.invitation-container .progress {
  background-color: #c3c3c3;
}

.invitation-approval-container .selfie-label {
  color: #f94d4d !important;
}

.invitation-approval-container .approval-btn-container button.btn-copy-link {
  background-color: #03C272;
}

.invitation-approval-container .approval-btn-container button.btn-copy-link[disabled] {
  background-color: #cccccc !important;
  color: #666666 !important;
}

.invitation-approval-container .selfie-container .selfie-img {
  float: right;
}

.invitation-approval-container .publicurl {
  height: 0;
  position: fixed;
  z-index: -1;
  opacity: .01;
  overflow: hidden;
}

.invitation-approval-container input-text *,
.invitation-approval-container input-select-object-new *,
.invitation-approval-container input-multiple-picture *,
.invitation-approval-container input-datepicker *,
.invitation-approval-container input-picture *,
.invitation-approval-container .selfie-container,
.invitation-approval-container .group-link-container i {
  cursor: pointer;
}

.invitation-link-container .group-link-container {
  white-space: nowrap;
}

.invitation-link-container .group-link-container > div:first-child {
  width: calc(100% - 150px);
  margin-right: 10px;
}

.invitation-link-container .link-container {
  padding: 30px 60px 30px 20px;
  background: #f1f1f1;
}

.invitation-link-container .link-container i {
  float: left;
  font-size: 14px;
  padding: 10px;
  background: white;
  margin-right: 10px;
  border-radius: 5px;
}

.invitation-link-container .link-container textarea {
  background: white;
  cursor: pointer;
  overflow: hidden;
}

.source-sans-pro {
  font-family: 'Source Sans Pro' !important;
}

.invitation-approval-container .btn-add-recipient {
  background: transparent;
  border: 0px;
  padding: 0px;
}

.invitation-approval-container .btn-add-recipient div {
  display: inline-block;
  color: white;
  background: rgba(0, 122, 255, 1);
  border-radius: 3px;
}

.invitation-approval-container .btn-add-recipient div.email-entered {
  border: 2px solid red;
}

.invitation-approval-container .recipient-email-table {
  width: 90%;
}

.invitation-approval-container .recipient-email-table td {
  width: 33%;
}

.invitation-approval-container .recipient-email-table-container {
  background: rgba(251, 251, 251, 1) !important;
}

.invitation-approval-container .recipient-email-table-container .btn-copy-link {
  background: transparent;
  color: rgba(0, 122, 255, 1) !important;
  box-shadow: none;
  float: right;
}

.invitation-approval-container .btn-next.disabled {
  background-color: rgba(217, 217, 217, 1) !important;
  color: white !important;
}

.invitation-approval-container .share-link-icon img {
  min-width: 30px;
  min-height: 30px;
}

.invitation-post .btn-back {
  background-color: transparent !important;
  box-shadow: none;
  text-align: left;
}

.invitation-post .btn-back img {
  height: 22px;
  width: 22px;
  /*margin-top: 5px;*/
}

.invitation-post .btn-next {
  height: 35px;
  width: 120px;
  border-radius: 5px !important;
  font-size: 14px;
}

/*-----------------------------------*/

/* employeeInvitationPostMember.html */

/*-----------------------------------*/

.invitation-step-member {
  font-family: 'Inter' !important;
}

.invitation-step-member .step-title {
  font-size: 25px;
  height: 30px;
  font-weight: bold;
  margin-top: 30px;
}

.invitation-step-member .step-subtitle {
  font-size: 14px;
  height: 17px;
  font-weight: 600;
  margin-top: 30px;
}

.invitation-step-member .member-title {
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
  margin-top: 40px;
  margin-bottom: 10px;
}

.invitation-step-member .approver-list {
  padding: 10px 0px;
}

.invitation-step-member .custom-photo {
  display: inline-block;
  margin-right: 10px;
  vertical-align: top;
}

.invitation-step-member .custom-photo .list-picture-container {
  height: 50px !important;
  width: 50px !important;
}

.invitation-step-member .custom-profile {
  display: inline-block;
  max-width: 50%;
}

.invitation-step-member .custom-profile > div {
  margin-top: 5px;
}

.invitation-step-member .custom-profile .custom-name {
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
}

.invitation-step-member .custom-profile .custom-email {
  font-size: 12px;
  color: rgba(161, 161, 161, 1);
  line-height: 21px;
}

.invitation-step-member .custom-profile .custom-role {
  font-size: 12px;
  color: #5E5E5E;
  line-height: 21px;
  font-weight: 600;
}

.invitation-step-member .custom-profile .custom-text {
  font-size: 12px;
  color: rgba(161, 161, 161, 1);
  line-height: 18px;
}

.invitation-step-member .custom-delete {
  width: 26px;
  height: 26px;
  color: rgba(217, 217, 217, 1);
  text-align: center;
  font-size: 20px;
  margin-top: 10px;
  margin-left: 24px;
  cursor: pointer;
}

.invitation-step-member .custom-tag {
  height: 40px;
  width: 100px;
  border: 1px solid rgba(117, 117, 117, 1);
  border-radius: 5px;
  padding-top: 8px;
  text-align: center;
}

.invitation-step-member .custom-tag > div {
  font-family: 'Inter';
  font-size: 16px;
  text-align: center;
  font-weight: 600;
  color: rgba(69, 68, 61, 1);
}

/*------------------------------------*/

/* employeeInvitationPostContent.html */

/*------------------------------------*/

.invitation-step-content {
  font-family: 'Inter' !important;
}

.invitation-step-content .step-title {
  font-size: 25px;
  height: 30px;
  font-weight: bold;
  margin-top: 30px;
}

.invitation-step-content .step-container {
  margin-top: 20px;
  border: 1px solid rgba(151, 151, 151, 1);
  border-radius: 5px;
  padding: 30px;
}

.invitation-step-content .information-title {
  font-size: 22px;
  font-weight: bold;
}

.invitation-step-content .information-container:not(:first-child) {
  margin-top: 24px;
}

.invitation-step-content .information-fields {
  margin-top: 20px;
}

.invitation-step-content .information-fields div {
  font-size: 14px;
  line-height: 20px;
  margin-top: 8px;
  font-weight: 600;
}

.invitation-step-content .invitation-section-container:not(:first-child) {
  margin-top: 40px;
}

.invitation-step-content .invitation-field-label-container {
  margin-top: 16px;
}

.invitation-step-content .invitation-section input {
  font-size: 22px !important;
  color: rgba(69, 68, 61, 1) !important;
  font-weight: bold;
  border: none;
  border-bottom: 1px solid rgba(217, 217, 217, 1);
  padding-bottom: 10px;
  height: 55px !important;
}

.invitation-step-content .invitation-field-label input {
  font-family: 'Inter';
  font-size: 14px !important;
  color: rgba(69, 68, 61, 1) !important;
  border: none;
  border-bottom: 1px solid rgba(217, 217, 217, 1);
  padding-bottom: 0px;
  height: 55px !important;
}

.invitation-step-content .invitation-category input:focus,
.invitation-step-content .invitation-field-label input:focus {
  border: none !important;
  border-bottom: 1px solid rgba(217, 217, 217, 1) !important;
}

.invitation-step-content .invitation-section-container .fas.fa-times {
  cursor: pointer;
  float: right;
  vertical-align: top;
  margin-top: -40px;
  margin-right: 0px;
  font-size: 25px;
  color: rgba(217, 217, 217, 1);
}

.invitation-step-content .invitation-section-container .button-container {
  margin-top: 40px;
}

.invitation-step-content .custom-button {
  display: inline-block;
  margin-right: 15px;
  cursor: pointer;
}

.invitation-step-content .custom-button .custom-icon {
  background-color: #3d61ff;
  height: 35px;
  width: 35px;
  border-radius: 5px;
  font-size: 45px;
  color: white;
  padding-left: 3px;
  padding-top: 4px;
  display: inline-block;
}

.invitation-step-content .custom-button .custom-label {
  display: inline-block;
  vertical-align: text-bottom;
  padding-top: 7px;
  color: #3d61ff;
  font-weight: 600;
  line-height: 21px;
  font-size: 14px;
  margin-left: 7px;
}

/*------------------------------------*/

/* employeeInvitationPostSent.html */

/*------------------------------------*/

.invitation-step-sent .invite-attachment {
  border: none !important;
  padding: 0px !important;
}

.invitation-step-sent .invite-attachment .btn-invite-upload-container {
  text-align: center;
  border: 1px solid rgba(151, 151, 151, 1);
  border-radius: 5px;
  padding: 28px;
  margin-bottom: 16px;
}

.invitation-step-sent .invite-attachment .btn-invite-upload-container img {
  height: 41px;
  width: 41px;
  margin-bottom: 8px;
}

.invitation-step-sent .invite-attachment .btn-invite-upload span {
  color: rgba(161, 161, 161, 1) !important;
}

.invitation-step-sent .invite-attachment .row-container {
  border: 1px solid rgba(151, 151, 151, 1);
  border-radius: 5px;
  padding: 13px;
}

.invitation-step-sent .invite-attachment .row.row-attachment {
  font-family: 'Inter';
  font-size: 14px;
  font-weight: normal;
  padding: 10px;
  line-height: 15px;
  color: #45443d;
}

.invitation-step-sent .invite-attachment .row.row-attachment div:nth-child(2) {
  text-align: right;
}

/*-----------------------------------*/

/* employeeInvitationPostMember.html */

/*-----------------------------------*/

/*-----------------------------------*/

/* employeeInvitationListHeader.html */

/*-----------------------------------*/

.invitation-list-header .header-card {
  display: inline-block;
  cursor: pointer;
  margin-right: 20px;
  width: 230px;
  height: 100px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 15px 0 rgba(73, 89, 107, 0.2);
  padding: 15px 16px 13px 20px;
}

.invitation-list-header .header-card .count.sent {
  color: #48cea7;
}

.invitation-list-header .header-card .count.pending {
  color: #ffa51f;
}

.invitation-list-header .header-card .count {
  font-size: 38px;
  font-family: 'Inter';
  font-weight: bold;
  line-height: 50px;
}

.invitation-list-header .header-card .text {
  color: rgba(69, 68, 61, 1);
  font-size: 14px;
  font-family: 'Inter';
  font-weight: 600;
  line-height: 22px;
}

.invitation-list-header .header-card .icon {
  margin-top: 5px;
  height: 35px;
  width: 35px;
}

/*-----------------------------------*/

/* employeeInvitationList.html       */

/*-----------------------------------*/

.invitation-list .col-members {
  width: 160px !important;
  max-width: 160px !important;
  min-width: 160px !important;
}

.invitation-list .col-actions {
  width: 150px !important;
  max-width: 150px !important;
  min-width: 150px !important;
}

.invitation-list .approvers-photo-list-container .label-display {
  font-family: 'Inter';
  color: #45443d;
  margin-left: 12px;
}

.invitation-list td .approvers-photo-list {
  display: inline-block;
  margin-right: -10px;
}

.invitation-list td .approvers-photo-list:not(:first-child) {
  z-index: -100;
}

.invitation-list td .approvers-photo-list .list-picture-container {
  border: 3px solid white;
}

.invitation-list table td .bs-wizard > .bs-wizard-step.complete > .bs-wizard-check {
  background-color: rgba(0, 122, 255, 1) !important;
}

.invitation-list table td .bs-wizard > .bs-wizard-step.declined > .bs-wizard-times {
  background-color: rgba(255, 0, 0, 1) !important;
}

.invitation-list table td .bs-wizard > .bs-wizard-step.complete > .bs-wizard-check,
.invitation-list table td .bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot,
.invitation-list table td .bs-wizard > .bs-wizard-step.declined > .bs-wizard-times {
  height: 25px;
  width: 25px;
  top: 27px;
}

.invitation-list table td .bs-wizard > .bs-wizard-step.complete > .progress > .progress-bar {
  background-color: rgba(0, 122, 255, 1) !important;
}

.invitation-list table td .bs-wizard > .bs-wizard-step.complete > .bs-wizard-check > .bs-complete-oval,
.invitation-list table td .bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot > .bs-complete-oval,
.invitation-list table td .bs-wizard > .bs-wizard-step.declined > .bs-wizard-times > .bs-complete-oval {
  width: 17px;
  height: 17px;
  background-color: white;
  border-radius: 100%;
  margin-top: 4px;
  margin-left: 4px;
}

.invitation-list table td .bs-wizard > .bs-wizard-step .bs-wizard-stepnum {
  color: #007aff !important;
  font-size: 12px;
}

.invitation-list table td .bs-wizard > .bs-wizard-step .bs-wizard-date {
  color: #a1a1a1 !important;
  font-size: 12px;
}

.invitation-list .bs-wizard .custom-tooltip {
  display: none;
  position: absolute;
  width: 200px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 2px 15px 0 rgba(73, 89, 107, 0.2);
  left: calc(50% - 103px);
  top: 50px;
  padding: 0px 15px;
  text-align: left;
  font-family: 'Inter';
  z-index: 9999;
}

.invitation-list .bs-wizard-check:hover + .custom-tooltip,
.invitation-list .bs-wizard-dot:hover + .custom-tooltip,
.invitation-list .bs-wizard-times:hover + .custom-tooltip,
.invitation-list .custom-tooltip:hover {
  display: block !important;
}

.invitation-list .bs-wizard .custom-tooltip .pointer-arrow {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid white;
  margin-top: -20px;
  margin-left: auto;
  margin-right: auto;
}

.invitation-list .bs-wizard .custom-tooltip .custom-tooltip-content {
  margin: 20px 0px;
}

.invitation-list .bs-wizard .custom-tooltip .list-picture-container {
  height: 33px;
  width: 33px;
}

.invitation-list .bs-wizard .custom-tooltip .list-picture-indicator {
  height: 12px;
  width: 12px;
  position: absolute;
  border-radius: 100%;
  border: 2px solid white;
  z-index: 9999;
  top: -1px;
  left: 9px;
}

.invitation-list .bs-wizard .custom-tooltip .pending .list-picture-indicator {
  background-color: #ED9E3E;
}

.invitation-list .bs-wizard .custom-tooltip .approved .list-picture-indicator {
  background-color: #48CEA7;
}

.invitation-list .bs-wizard .custom-tooltip .declined .list-picture-indicator {
  background-color: red;
}

.invitation-list .bs-wizard .custom-tooltip .pending .list-picture-container {
  border: 2px solid #ED9E3E;
}

.invitation-list .bs-wizard .custom-tooltip .approved .list-picture-container {
  border: 2px solid #48CEA7;
}

.invitation-list .bs-wizard .custom-tooltip .declined .list-picture-container {
  border: 2px solid red;
}

.invitation-list .bs-wizard .custom-tooltip .name-display {
  color: #007aff !important;
  margin-top: 5px;
  padding-left: 15px;
  font-size: 14px;
}

.invitation-list .bs-wizard .custom-tooltip .status-display {
  color: #45443d !important;
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
}

.invitation-list .bs-wizard .custom-tooltip .date-display {
  color: #a1a1a1 !important;
  font-size: 12px;
}

.invitation-list .replace-banner {
  background: #ffa51f;
  margin-left: auto;
  margin-right: auto;
  width: 520px;
  padding: 9px 15px;
  color: white;
  border-radius: 5px;
  font-weight: bold;
  margin-top: 10px;
}

/*--------------------------------------*/

/* employeeInvitationTransferModal.html */

/*--------------------------------------*/

.invitation-transfer-modal .from-container {
  padding-right: 20px;
  border-right: 1px solid #e5e5e5;
}

.invitation-transfer-modal .to-container {
  padding-left: 20px;
}

.invitation-transfer-modal .user-container {
  border: 1px solid #e5e5e5;
  margin-top: 20px;
  text-align: center;
  padding: 20px 0px;
}
.table-tenant-access .fa-times {
  color: rgba(216, 216, 216, 1);
}

.table-tenant-access .icon-panel {
  display: inline-block;
  cursor: pointer;
  font-size: 16px;
  position: absolute;
  margin-top: 7px;
  margin-left: -25px;
}

.table-tenant-access .btn-add-tenant-access {
  width: 35px;
  min-width: 35px;
  padding-left: 10px;
  height: 35px;
  font-size: 15px;
  box-shadow: none !important;
}

.table-tenant-access td {
  vertical-align: top !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.table-tenant-access td .div-tenant-access:not(:last-child) {
  margin-bottom: 20px;
}

.table-tenant-access td .emp-name {
  margin-top: 5px;
}

.table-tenant-access tr td .input-tenant-access {
  width: 200px !important;
}

.tenant-access-panel .form-control[disabled],
.tenant-access-panel .form-control[readonly] {
  background: white !important;
}

.table-tenant-access .input-multiple-select-object {
  width: 100% !important;
}

.table-tenant-access .tenant-name {
  display: inline-block;
  width: 100% !important;
}

.table-tenant-access .tenant-name input {
  border: 1px solid #DDD;
  border-color: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  font-weight: 500;
}

.table-tenant-access .icon-input {
  font-size: 16px;
  margin-top: 2px;
}

/************************
  tenantAccessModal.html
*************************/

.tenant-access-modal {
  padding: 10px;
}

.tenant-access-modal .modal-header {
  border-bottom: none;
}

.tenant-access-modal .modal-footer {
  border-top: none;
  background-color: transparent !important;
}

.tenant-access-modal table tbody tr td {
  padding: 0px !important;
  border: 0px !important;
}

.tenant-access-modal .table > tbody > tr:first-child > td:first-child {
  padding-right: 10px !important;
}

.tenant-access-modal .table > tbody > tr:first-child > td:nth-child(2) {
  padding-left: 10px !important;
}

.tenant-access-modal .table > tbody > tr:nth-child(2) .row {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.tenant-access-modal .table > tbody > tr:nth-child(2) .col-md-3 {
  padding-left: 0px;
  padding-right: 0px;
}

.tenant-access-modal label {
  margin-top: 5px;
}

.tenant-access-modal .tag-wrapper {
  padding: 0px 5px;
}

.tenant-access-modal .select2-container-multi .select2-choices li.select2-search-field input[type=text] {
  border: 0px;
}

.tenant-access-modal .btn-submit {
  width: 35px;
  min-width: 35px;
  padding-left: 10px;
  height: 35px;
  font-size: 15px;
  box-shadow: none !important;
}
/* ========================================================================
* Common
* ======================================================================== */

button.btn.btn-text-only {
  color: #007aff;
  font-size: 14px;
  background-color: transparent;
  border: none;
  box-shadow: none;
  height: 35px;
  width: 120px;
}

button.btn.btn-text-only[disabled] {
  background-color: transparent;
}

button.btn.btn-text-only:active,
button.btn.btn-text-only[disabled]:active {
  box-shadow: none;
}

.contract .step-section {
  font-family: 'Inter' !important;
}

.contract .step-section .shift-input-row {
  font-size: 12px;
  font-weight: 600;
  line-height: initial;
}

.new-ui5 .contract .signatory-date .input-group.date {
  width: 100%;
}

.new-ui5 .contract .signatory-date .input-group.date input {
  width: 100%;
}

.new-ui5 .contract .signatory-date.full-width-datetimepicker-widget .bootstrap-datetimepicker-widget {
  width: 100% !important;
}

.contract .section-spinner wave-spinner .wave-spinner {
  margin: 0 auto;
}

.contract-pdf.downloading .filelist .file-container,
.contract-pdf.downloading .filelist .file-container .clickable-link {
  cursor: not-allowed;
}

.contract .member-section .custom-name,
.contract .comment-header .custom-name {
  color: #007aff;
}

.contract tr .wave-spinner {
  margin: 100px auto;
}

/* ========================================================================
* Contract Invitation
* ======================================================================== */

.contract-template-table-container {
  border: 1px solid rgba(217, 217, 217, 1);
  border-radius: 6px;
  overflow: hidden;
  /*margin-top: 41px;*/
  /*min-height: 584px;*/
}

.contract-template-table {
  border-collapse: collapse;
  width: 100%;
}

.contract-template-table th {
  padding: 1em;
  background: rgba(248, 248, 248, 1);
  border-bottom: 1px solid rgba(217, 217, 217, 1);
  border-radius: 6px;
  font-size: 12px;
  color: rgba(69, 68, 61, 1);
  font-weight: 500;
}

.contract-template-table td {
  padding: 1em;
  background: rgba(255, 255, 255, 1);
  border-bottom: 1px solid rgba(217, 217, 217, 1);
  border-radius: inherit;
  font-size: 12px;
  color: rgba(69, 68, 61, 1);
  font-weight: 600;
}

.contract-template-table tr:first-child {
  /*border-top: 1px solid rgba(217, 217, 217, 1);*/
}

.contract-template-table th:first-child,
td:first-child {
  /*border-left: 1px solid rgba(217, 217, 217, 1);*/
}

.contract-template-table th:last-child,
td:last-child {
  /*border-right: 1px solid rgba(217, 217, 217, 1);*/
}

.contract-template-table tr:hover td,
.contract-template-table tr.selected td {
  /*    background: rgba(204, 228, 255, 1);*/
  background-color: rgba(238, 245, 255, 1);
  cursor: pointer;
}

.contract-template-table tr:last-child td {
  border-bottom: none;
}

.contract-template-table tr:last-child td:first-child {
  border-radius: 0 0 0 6px;
}

.contract-template-table tr:last-child td:last-child {
  border-radius: 0 0 6px 0;
}

.invitation-step-member .step-extra-container {
  padding-top: 42px;
}

.invitation-step-member .step-extra-container .custom-text {
  display: inline-block;
  color: rgba(69, 68, 61, 1);
  font-size: 18px;
  font-weight: 600;
}

.invitation-step-member .step-extra-container .custom-text p {
  margin-top: 5px;
  bottom: 5px;
}

.invitation-step-member .step-extra-container .custom-button {
  margin-right: 0px;
}

.invitation-send-contract .form-post-subheader {
  font-size: 18px !important;
  margin-top: 22px;
  color: rgba(69, 68, 61, 1) !important;
}

.invitation-step-member .custom-tag.creator-tag {
  padding: 6px 15px;
  height: 34px;
  width: 94px;
  border: 1px solid #ccc;
  font-weight: 600;
}

.contract .col-checkbox {
  min-width: 100px;
}

/* ========================================================================
* Contract List
* ======================================================================== */

.contract-list-header .btn-custom-dropdown .dropdown-menu {
  border-radius: 8px;
  padding: 7px;
  font-size: 12px;
  box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%), 0 3px 1px -2px rgb(0 0 0 / 20%);
}

.contract-list-header .btn-custom-dropdown .dropdown-menu>li>a:focus,
.contract-list-header .btn-custom-dropdown .dropdown-menu>li>a:hover {
  background-color: #cce4ff;
  border-radius: 8px;
}

.contract-list-header .btn-custom-dropdown .dropdown-menu>li>a:focus:before,
.contract-list-header .btn-custom-dropdown .dropdown-menu>li>a:hover:before {
  border: none;
}

.contract-list-header .btn-custom-dropdown .dropdown-menu > li > a .wrapper {
  padding: 6px;
}

.list-picture-container.bordered-photo {
  border: 3px solid white;
}

.contract-add-member {
  position: relative;
}

.contract-add-member .custom-tooltip {
  display: none;
  position: absolute;
  background-color: #fff;
  color: #45443d;
  padding: 5px 20px 20px 20px;
  z-index: 9;
  width: 450px;
  border-radius: 5px;
  box-shadow: 0 2px 15px 0 rgb(73 89 107 / 20%);
  cursor: default;
  right: 0;
  top: 40px;
}

.contract-add-member .custom-tooltip.active {
  display: block !important;
}

.contract-add-member .add-title {
  font-weight: bold;
  margin-top: 30px;
  font-size: 18px;
}

.contract-add-member .add-subtitle {
  font-size: 12px;
  margin-top: 20px;
  font-weight: 600;
}

.contract-add-member .member-title {
  font-size: 12px;
  margin-top: 30px;
  font-weight: 600;
  margin-bottom: 10px;
}

.contract-add-member .custom-close {
  position: absolute;
  top: 0;
  right: 10px;
  cursor: pointer;
}

.contract-add-member .member-count-label {
  color: #a1a1a1;
  font-weight: normal;
}

.contract-add-member .invitation-step-member .custom-tag {
  margin-top: 10px;
  height: 35px;
  width: 85px;
}

.contract-add-member .invitation-step-member .custom-delete {
  margin-top: 12px;
}

.contract-add-member .invitation-step-member .custom-profile .custom-name {
  font-size: 12px;
}

.contract-add-member .invitation-step-member .custom-profile .custom-email {
  font-size: 10px;
}

.contract-list .bs-wizard > .bs-wizard-step > .progress {
  background-color: #d9d9d9;
}

.contract-list .bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot {
  background-color: #d9d9d9;
}

.contract-list table > tbody > tr.clickable:hover > td {
  background-color: #F8F8F6 !important;
  color: unset;
}

.contract-list th.col-action {
  min-width: 165px;
}

.contract-list th.col-member,
.contract-list td.col-member {
  min-width: 160px;
  padding-left: 25px;
}

.contract-list th.col-template-action {
  width: 100px;
}

.contract-list th.col-progress {
  min-width: 380px;
}

.invitation-list.contract-list  .replace-banner {
  width: unset;
  max-width: 520px;
}

/* ========================================================================
* Contract
* ======================================================================== */

.contract-step .step-title {
  font-size: 25px;
  height: 30px;
  font-weight: bold;
  margin-top: 30px;
}

.contract-step .step-subtitle {
  font-size: 13px;
  margin-top: 12px;
}

.contract-step .step-subtitle-link {
  font-size: 12px;
  margin-top: 8px;
  display: block;
}

.contract .invitation-container .step-content {
  margin-top: 22px;
  margin-bottom: 20px;
}

.contract table.table-layout-fixed {
  table-layout: fixed;
}

.contract td.width-30 {
  width: 30%;
}

.contract td.width-40 {
  width: 40%;
}

.contract td.mapping-variable {
  word-break: break-all;
}

.contract button.btn.btn-send-invite {
  height: 55px;
  width: 159px;
  border: 1px solid #a1a1a1;
  border-radius: 5px;
  color: #a1a1a1;
  background-color: #fff;
  box-shadow: none;
  font-size: 18px;
}

.contract-template-table-container.mapping-table-container {
  margin-top: 22px;
  overflow: unset;
}

.contract .upload-document-container {
  border: 1px solid #979797;
  border-radius: 6px;
  padding: 0 26px;
  margin-top: 22px;
}

.mapping-table-container .contract-template-table tr:hover td {
  cursor: unset;
}

.contract .custom-label {
  font-size: 16px;
  font-weight: 600;
}

.approver-list .preview-button {
  margin-right: 88px;
}

.approver-list .preview-button .btn.btn-transparent-icon i {
  font-size: 15px;
}

.approver-list .preview-button .btn.btn-transparent-icon span {
  font-size: 12px;
  vertical-align: middle;
}

.approver-list.candidate-list {
  padding: 10px;
  border-radius: 5px;
}

.approver-list.candidate-list:hover {
  background-color: rgba(238, 245, 255, 1);
}

.invitation-step-sent .invite-attachment.contract-attachment .btn-invite-upload-container {
  min-height: 250px;
  height: calc(100vw/6);
  position: relative;
  margin-bottom: 0;
}

.invitation-step-sent .invite-attachment.contract-attachment .btn-invite-upload-container .btn-invite-upload {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: fit-content;
}

.invitation-step-sent .invite-attachment.contract-attachment .row-container {
  min-height: 250px;
  height: calc(100vw/6);
}

.contract .multi-select-table-container,
.contract .multi-select-table-new {
  max-width: unset;
  width: 100%;
}

.contract .multi-select-table-panel {
  max-width: unset;
  width: calc(100% - 20px);
}

.contract .highlight-input input {
  border: 1px solid #f94d4d !important;
}

.contract th.refresh-applicant {
  width: 135px;
}

.contract th.refresh-applicant span {
  vertical-align: -webkit-baseline-middle;
}

/* ========================================================================
* Contract Review
* ======================================================================== */

.contract-review .member-section {
  margin-bottom: 12px;
}

.contract-review .member-section.col-xs-6,
.contract-review .member-section.col-sm-6,
.contract-review .member-section.col-md-6 {
  padding-left: 0px;
  padding-right: 0px;
}

.contract-review .member-section .signatory-no {
  font-size: 12px;
  font-weight: 600;
  padding: 8px 0;
}

.contract-review .btn-back {
  display: table;
}

.contract-review .custom-tag .has-approved {
  color: #48cea7;
  padding-left: 5px;
}

.contract-review .tab-navigation .nav-tabs> li > a {
  font-size: 12px;
  margin-right: 2px;
}

/* ========================================================================
* Contract Signatory Declined
* ======================================================================== */

.contract-signatory-declined .invitation-step-member  .step-title.step-title-long {
  height: unset;
  min-height: 30px;
  line-height: normal;
}

.contract-signatory-declined .comment-header {
  font-weight: 700;
  padding: 5px 5px 0px 0px;
  border-bottom: 1px solid rgba(227, 235, 243, 1);
}

/* ========================================================================
* Contract Acceptance
* ======================================================================== */

.contract-acceptance .label-title {
  font-size: 12px;
  font-weight: 600;
}

.contract-acceptance .label-value {
  font-size: 16px;
  padding-top: 2px;
}

.contract-acceptance .row .col-xs-6,
.contract-acceptance .row .col-sm-6,
.contract-acceptance .row .col-md-6 {
  padding-left: 0px;
  padding-right: 0px;
}

.contract-acceptance.invitation-container button.btn.btn-text-only,
.contract-acceptance.invitation-container .btn-next-container button.btn-next {
  height: 35px;
  font-size: 14px;
  padding: 0px 20px;
}

.contract-acceptance.invitation-container .btn-next-container button.btn-next.btn-fit-width {
  width: fit-content;
}

/*
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media only screen and  (min-width: 1281px) {
  .contract-review.invitation-approval-container .invitation-main-container {
    height: calc(100vh -  230px) !important;
  }

  .contract-acceptance.invitation-approval-container .invitation-main-container {
    height: calc(100vh -  150px) !important;
  }

  .contract-acceptance.invitation-container button.btn.btn-text-only,
  .contract-acceptance.invitation-container .btn-next-container button.btn-next {
    height: 50px;
    font-size: 16px;
    padding: 0 25px;
  }
}

/*
  ##Device = Laptop, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media only screen and (min-width: 1025px) and (max-width: 1280px) {
  .contract-review.invitation-approval-container .invitation-main-container {
    height: calc(100vh -  180px) !important;
  }

  .contract-acceptance.invitation-approval-container .invitation-main-container {
    height: calc(100vh -  95px) !important;
  }
}

/*
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media only screen and (max-width: 1024px) {
  .signature-area .btn-refresh {
    font-size: 35px;
  }

  .contract-acceptance.invitation-container button.btn.btn-text-only,
  .contract-acceptance.invitation-container .btn-next-container button.btn-next {
    font-size: 30px;
    height: 80px;
    padding: 0px 50px;
    margin-top: 0;
    top: 0;
  }
}
/* ========================================================================
* general
* ======================================================================== */

.appraisal .form-title {
  font-size: 16px;
  min-height: 22px;
  font-weight: bold;
}

.appraisal .form-subtitle {
  font-size: 13px;
  color: rgba(161, 161, 161, 1);
}

.appraisal-form-footer {
  margin-top: 25px;
  margin-bottom: 25px;
}

.appraisal-form-footer .title {
  font-size: 18px;
  font-weight: bold;
}

.appraisal-form-footer .score-list {
  padding-bottom: 20px;
  width: fit-content;
}

.appraisal-form-footer .score-list:hover,
.appraisal-form-footer .score-list:has(+ .custom-tooltip:hover) {
  padding-bottom: 90px;
}

.appraisal-form-footer .score-list + .custom-tooltip {
  display: none;
  position: absolute;
  width: 480px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 2px 15px 0 rgba(73, 89, 107, 0.2);
  padding: 18px 10px;
  left: 0px;
  top: 25px;
  z-index: 999;
}

.appraisal-form-footer .score-list:hover + .custom-tooltip,
.appraisal-form-footer .custom-tooltip:hover {
  display: block !important;
}

.appraisal-form-footer .score-list + .custom-tooltip .badge {
  width: 100%;
}

.appraisal .main-wrapper .main-wrapper-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: -webkit-fill-available;
  padding-bottom: 15px;
}

.badge.badge-grade {
  min-width: 95px;
  text-transform: uppercase;
}

.appraisal-container wave-spinner .wave-spinner {
  margin: 100px auto;
}

/* ========================================================================
* question-card
* ======================================================================== */

.question-card {
  padding: 10px 20px;
  margin: 0 -20px;
}

.question-card.question-setup {
  cursor: pointer;
}

.question-card.active .question-card-content {
  border-left: 5px solid rgba(0, 122, 255, 1);
}

.question-card-content {
  border: 1px solid rgba(217, 217, 217, 1);
  border-radius: 6px;
  padding: 15px 15px 5px 15px;
}

.question-card label.setup-title {
  font-size: 14px;
  font-weight: bold;
}

.question-card .delete {
  cursor: pointer;
  font-size: 20px;
  color: rgba(217, 217, 217, 1);
}

.question-card .form-control[disabled] {
  background-color: #f3f3f3;
}

.question-card .words-limit-textarea-container:has(textarea[disabled]) {
  background-color: #f3f3f3;
  border: 0;
}

.sortable-card-container .sortable-card {
  position: relative;
  padding: 10px 20px;
  margin: 0 -20px;
}

.sortable-card-container .sortable-card .question-card {
  padding: 0;
  margin: 0;
}

.sortable-card-container .btn-sortable {
  position: absolute;
  cursor: all-scroll;
  top: 50%;
  left: 0;
  font-size: 16px;
  padding: 0 5px;
  background-color: #fff;
  color: rgba(217, 217, 217, 1);
  transform: translateY(-50%);
}

.sortable-card-container .sortable-highlight .question-card-content {
  box-shadow: 0px 4px 10px 0px rgb(112 144 176 / 20%);
  opacity: 0.7;
}

.question-card .type-textbox {
  border-bottom: 1px solid rgba(217, 217, 217, 1);
}

.question-card .type-rating:before {
  color: rgba(0, 122, 255, 1);
  font-size: 18px;
  vertical-align: bottom;
  content: "\f005";
  font-family: "Font Awesome 5 Free";
}

/* ========================================================================
* config
* ======================================================================== */

.appraisal-config .input-range-prefix {
  display: inline-block;
  width: 42px;
}

/* ========================================================================
* list
* ======================================================================== */

.appraisal-list .appraisal-name-filter {
  width: 420px;
  display: inline-block;
}

.appraisal-list .appraisal-name-filter .dropdown-menu {
  width: 100%;
}

.appraisal-list .appraisal-name-filter li span {
  white-space: normal;
}

.appraisal-list th.col-action {
  min-width: 50px !important;
}

.appraisal-list th.col-action-long {
  min-width: 140px !important;
}

.my-appraisal-list th.col-action {
  min-width: 25px !important;
  width: 25px;
}

.my-appraisal-list th.col-status {
  width: 280px;
}

/* ========================================================================
* evaluation
* ======================================================================== */

.appraisal .review-section {
  padding: 20px;
  background-color: rgba(245, 250, 255, 1);
}

.appraisal .review-section .question-score-display {
  background: #fff;
  height: 34px;
  padding: 6px 12px;
}
.roster-table {
  width: 100%;
}

.roster-table tr th {
  padding: 10px 0px !important;
  z-index: 89;
}

.roster-table .list-picture-container {
  height: 55px !important;
  width: 55px !important;
}

.roster-table .grouped-first-row td .grouped-container {
  border-top: 2px solid rgba(28, 89, 171, 1);
}

.roster-table .grouped-first-row td .icon-info {
  top: 45px !important;
}

.roster-table .grouped-first-row td:not(:first-child):not(:nth-child(2)) .grouped-container {
  margin-top: 40px;
}

.roster-table .grouped-first-row.two-layer td:not(:first-child):not(:nth-child(2)) .grouped-container {
  margin-top: 70px;
}

.roster-table .grouped-last-row td:not(:first-child):not(:nth-child(2)) .grouped-container {
  margin-bottom: 10px;
}

.roster-table .grouped-first-row td .grouped-container {
  height: calc(100% - 40px) !important;
}

.roster-table .grouped-first-row.two-layer td .grouped-container {
  height: calc(100% - 70px) !important;
}

.roster-table td:first-child .grouped-container {
  margin-left: 10px;
  border-left: 2px solid rgba(28, 89, 171, 1);
  border-right: 1px solid rgba(227, 235, 243, 1);
}

.roster-table td:last-child .grouped-container {
  margin-right: 10px;
  border-right: 2px solid rgba(28, 89, 171, 1);
}

.roster-table .grouped-first-row td:nth-child(2) .grouped-container {
  margin-top: 40px;
}

.roster-table .grouped-first-row.two-layer td:nth-child(2) .grouped-container {
  margin-top: 70px;
}

.roster-table .grouped-last-row .grouped-container {
  border-bottom: 2px solid rgba(28, 89, 171, 1);
}

.roster-table td:first-child .grouped-container,
.roster-table td.table-fixed-second-column .grouped-container {
  padding: 10px;
}

.roster-table td .grouped-container {
  height: 100%;
}

.roster-table td .grouped-container.assign-user {
  cursor: pointer;
  white-space: nowrap;
}

.roster-table td .grouped-container.assign-user .fas-container {
  border: 2px solid #3d61ff;
  border-radius: 50%;
  height: 58px;
  width: 58px;
  padding: 11px;
  margin-left: 8px;
  color: #3d61ff;
  font-size: 30px;
  display: inline-block;
}

.roster-table td .grouped-container.assign-user .fas-label {
  display: inline-block;
  margin-left: 12px;
  vertical-align: top;
  margin-top: 15px;
  color: #4a90e2;
}

.roster-table tr .table-date-column .grouped-container {
  padding: 5px 3px;
}

.roster-table td {
  height: 1px;
}

.roster-container {
  height: calc(100vh - 240px);
  overflow-x: auto;
  overflow-y: auto;
  background: white;
  width: 100%;
  position: relative;
}

.roster-container .busy-indicator {
  height: 300px;
  width: 300px;
  margin-top: 40px;
}

.new-ui5 .row-shift .selector-custom .dropdown-toggle .text {
  line-height: 20px !important;
}

.roster-date-container {
  padding: 0px 10px;
  font-weight: bold;
  text-align: center;
}

.roster-date-container > div {
  display: inline-block;
}

.roster-date-container .btn-navigation {
  display: inline-block;
  background: white;
  color: #337ab7;
  box-shadow: none;
  font-size: 17px !important;
  padding-top: 3px !important;
}

.roster-date-container .daterange-selector {
  display: inline-block;
  max-width: 1000px !important;
}

.roster-date-container .daterange-selector .fas,
.roster-date-container .daterange-selector .far {
  position: absolute;
  left: 0px;
  top: 8px;
  font-size: 17px;
}

.roster-date-container .daterange input.input-date-range {
  font-size: 17px !important;
  border: none !important;
  padding-left: 30px;
  position: relative;
  background: white;
  z-index: 90;
}

.roster-date-container.month .daterange input.input-date-range {
  width: 175px !important;
  text-align: center;
}

.roster-date-container.week .daterange input.input-date-range {
  width: 275px !important;
  text-align: center;
}

.roster-filter-container {
  border-top: solid 1px rgba(227, 235, 243, 1);
  background: white;
  margin: 0px;
  height: 55px;
  padding-top: 10px;
}

.roster-filter-container .filter-popup-container {
  display: inline-block;
  height: 30px;
  width: 30px;
  margin-left: 10px;
  border: 1px solid gainsboro;
  border-radius: 2px;
  padding-left: 7px;
  padding-top: 4px;
  cursor: pointer;
  vertical-align: top;
}

.roster-container tbody .cell .item.diff-roster-event {
  opacity: 0.3;
}

.roster-container tbody .cell .item.diff-roster-event .shift-name {
  background: #f0f0f0;
  color: black;
}

.roster-filter-container .popover {
  max-width: 600px;
  min-width: 600px;
}

.roster-filter-container .filter-popup-icon {
  color: #a3a3a3;
  cursor: pointer;
}

.roster-filter-container .filter-popup-icon.filter-active {
  color: #3d61ff;
}

.roster-filter-container .filter-popup .close {
  font-size: 20px;
  margin-bottom: 10px;
  cursor: pointer;
}

.roster-filter-container .filter-popup .filter-bullet {
  background: #3d61ff;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  display: inline-block;
  font-weight: bold;
  font-size: 12px;
  margin-right: 10px;
  margin-bottom: 5px;
  cursor: pointer;
}

.roster-filter-container .filter-popup .filter-bullet span {
  margin-left: 5px;
}

.roster-filter-container .action-container {
  display: inline-block;
  float: right;
  margin-left: 10px;
}

.roster-container tbody .cell .roster-filtered > div {
  opacity: 0.1 !important;
}

.roster-event-modal .btn-add-vacancy {
  width: 31px;
  text-align: center;
  padding: 6px 10px 5px 9px;
  border-radius: 50%;
  height: 30px;
  min-width: 30px;
}

.roster-event-modal .btn-add-vacancy:hover {
  border-radius: 50%;
}

.roster-table .profile-actions {
  position: absolute;
  right: 0px;
  top: 0px;
}

.roster-table .grouped-first-row .profile-actions {
  top: 40px !important;
}

.roster-table .grouped-first-row.two-layer .profile-actions {
  top: 70px !important;
}

.roster-table > thead > tr > th.table-fixed-first-column,
.roster-table > tbody > tr > td.table-fixed-first-column {
  position: sticky;
  position: -webkit-sticky;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  left: 0 !important;
  font-size: 10.5px;
}

.roster-table > thead > tr > th.table-fixed-first-column .column-actions {
  display: inline-block;
  position: absolute;
  z-index: 170;
  right: 5px;
  top: -10px;
}

.roster-table > thead > tr > th.table-fixed-first-column .column-actions:hover .fa-sliders-h {
  color: #3d61ff;
}

.roster-table > thead > tr > .table-fixed-second-column,
.roster-table > tbody > tr > .table-fixed-second-column {
  position: sticky;
  position: -webkit-sticky;
  min-width: 165px !important;
  width: 165px !important;
  left: 210px !important;
  box-shadow: 2px 0 2px -2px #c3c3c3;
  padding: 0px !important;
  font-size: 10.5px;
}

.roster-table > thead > tr > th.table-fixed-first-column,
.roster-table > thead > tr > th.table-fixed-second-column {
  background: white;
  z-index: 170;
}

.roster-table > tbody > tr > td.table-fixed-first-column,
.roster-table > tbody > tr > td.table-fixed-second-column {
  background: white;
}

.roster-table > tbody > tr > td.has-attendance .fa-briefcase {
  color: #ffa51f;
}

.roster-table > tbody > tr > td.has-attendance.is-acknowledged .fa-briefcase {
  color: #48cea7;
}

.roster-footer {
  height: 60px;
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.roster-footer .pagination {
  overflow: hidden;
  white-space: nowrap;
  margin: 20px 0px 0px 0px;
  width: 100%;
}

.roster-footer .pagination li {
  white-space: nowrap;
  display: inline-block;
}

.roster-footer .pagination li a {
  white-space: nowrap;
}

/****************************************/

/* Roster Timeslot  */

/****************************************/

.roster-table .timeslot {
  height: 100%;
}

.roster-table .timeslot .cell-empty {
  height: 100%;
  font-size: 30px;
  cursor: pointer;
}

.roster-table .timeslot .cell-empty:hover {
  border: 2px dotted #c2c2c2;
  color: #c2c2c2;
}

.roster-table .selected .timeslot {
  background-color: rgba(19, 128, 255, 0.15);
  border: 2px solid #1380ff;
  height: 100%;
}

.roster-container .selectables-hover .timeslot {
  background-color: rgba(19, 128, 255, 0.05) !important;
  border: 1px solid #1380ff !important;
  height: 100%;
}

.roster-table .timeslot-disabled {
  padding: 5px;
  height: 100%;
  background: #e1e1e1;
  border: 1px solid #e1e1e1;
  opacity: 0.5;
}

/*.roster-table .grouped-first-row .timeslot,
.roster-table .grouped-first-row .timeslot-disabled,
.roster-table .grouped-first-row .selected .timeslot,
.roster-container .grouped-first-row .selectables-hover .timeslot {
    height: calc(100% - 40px);
}*/

.roster-table .grouped-first-row.two-layer .timeslot,
.roster-table .grouped-first-row.two-layer .timeslot-disabled,
.roster-table .grouped-first-row.two-layer .selected .timeslot,
.roster-container .grouped-first-row.two-layer .selectables-hover .timeslot {
  height: 100%;
}

.roster-week .roster-container .box .item.leave .fa-leaf {
  top: 6px;
}

.roster-container .box .item.leave .fa-leaf,
.roster-container .box .item.leave .fa-business-time {
  border-radius: 50%;
  background-color: #007aff;
  height: 17px;
  width: 17px;
  color: white;
  padding: 3px;
  text-align: left;
  position: absolute;
  top: 9px;
  left: 12px;
  font-size: 10px;
}

.roster-month .roster-container .box .item.leave .fa-business-time {
  top: 9px !important;
}

.roster-week .roster-container .box .item.leave .fa-business-time {
  top: 6px !important;
}

.roster-month .roster-container .leave-name {
  line-height: 35px !important;
}

.roster-month .roster-container .leave-text {
  top: 0px !important;
  left: 10px !important;
}

/****************************************/

/* Grouped Label  */

/****************************************/

.roster-table .grouped-label {
  display: none !important;
}

.roster-table .grouped-first-row .grouped-label {
  display: block !important;
  white-space: nowrap;
}

.roster-table .grouped-first-row .grouped-label div {
  display: inline-block;
  padding: 2px 5px;
}

.roster-table .two-layer .grouped-label > div {
  height: 60px !important;
}

.roster-table .grouped-label > div {
  display: inline-block;
  background: rgba(28, 89, 171, 1);
  color: white;
  padding: 5px 12px 5px 5px;
  border-radius: 5px 5px 0px 0px;
  margin-top: 10px;
  margin-left: 10px;
  font-weight: bold;
  height: 30px;
}

.roster-table .grouped-label div.clickable {
  cursor: pointer;
}

.roster-table .grouped-label div.clickable:hover span {
  text-decoration: underline;
}

.roster-table .grouped-label-2 .grouped-label-divider:first-child {
  display: none;
}

/****************************************/

/* Roster Filter  */

/****************************************/

.roster-filter-container .filter-popup {
  display: inline-block;
  background: white;
  z-index: 120;
  padding: 0px 10px 5px 10px;
  font-family: "Roboto", sans-serif;
  width: 560px;
}

.roster-filter-container .popover-content {
  padding: 15px !important;
}

.roster-filter-container .day-type-container {
  width: 200px;
}

.roster-filter-container .multiple-selection {
  color: rgba(28, 89, 171, 1);
  font-size: 13px;
  font-weight: bold;
  line-height: 22px;
  border: 1px solid rgba(28, 89, 171, 1);
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
}

.roster-filter-container .multiple-selection:hover {
  opacity: 0.3;
}

.roster-shift-dates-busy-indicator {
  position: absolute;
  right: 35px;
  top: 290px;
  background: white;
  z-index: 99;
  font-weight: bold;
  padding: 10px;
  border: solid 1px rgba(227, 235, 243, 1);
  text-align: center;
  color: rgba(28, 89, 171, 1);
}

.roster-shift-dates-busy-indicator img {
  width: 120px;
  height: 120px;
}

/****************************************/

/* Roster Swap  */

/****************************************/

.side-template-swap-roster,
.side-template-view-request {
  padding-left: 20px;
  padding-right: 20px;
  overflow-y: auto;
  height: calc(100% - 50px);
}

.side-template-swap-roster .list-picture-container {
  vertical-align: text-bottom;
  height: 50px;
  width: 50px;
}

.side-template-swap-roster .side-template-footer,
.side-template-view-request .side-template-footer {
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 400px;
}

.side-template-swap-roster .side-template-footer .swap-cancel,
.side-template-view-request .side-template-footer .swap-cancel {
  cursor: pointer;
  font-weight: 500;
}

.side-template-swap-roster .side-template-footer .swap-cancel:hover,
.side-template-view-request .side-template-footer .swap-cancel:hover {
  color: red !important;
}

.side-template-swap-roster .side-template-footer .swap-request {
  cursor: pointer;
  font-weight: 500;
}

.side-template-swap-roster .side-template-footer .swap-request:hover {
  color: #3d61ff !important;
}

.side-template-swap-roster .datepicker table > thead > tr .prev,
.side-template-swap-roster .datepicker table > thead > tr .next,
.side-template-swap-roster .datepicker table > thead > tr .picker-switch,
.side-template-swap-roster .datepicker table > thead > tr .dow {
  background-color: white !important;
  color: #5E5E5E;
}

.side-template-swap-roster .datepicker table > thead > tr .prev:hover,
.side-template-swap-roster .datepicker table > thead > tr .next:hover,
.side-template-swap-roster .datepicker table > thead > tr .picker-switch:hover,
.side-template-swap-roster .datepicker table > thead > tr .dow:hover {
  background-color: white !important;
  color: #5E5E5E;
}

.side-template-swap-roster .datepicker table > thead > tr .prev,
.side-template-swap-roster .datepicker table > thead > tr .next {
  border: 1px solid #d3d3d3 !important;
}

.side-template-swap-roster .datepicker table > thead > tr .picker-switch {
  border: 0px !important;
  font-weight: bold;
}

.side-template-swap-roster .datepicker table > thead > tr .dow {
  border: 0px !important;
  color: #d1d1d1;
  font-weight: bold;
}

.side-template-swap-roster .datepicker table > tbody > tr .day {
  background-color: white !important;
  font-weight: bold;
}

.side-template-swap-roster .datepicker table > tbody > tr .day:hover {
  border: 1px solid #d1e9f7;
  border-radius: 5px !important;
}

.side-template-swap-roster .datepicker table > tbody > tr .day.old,
.side-template-swap-roster .datepicker table > tbody > tr .day.new {
  color: #d1d1d1;
}

.side-template-swap-roster .datepicker table > tbody > tr .day.active {
  background-color: #d1e9f7 !important;
  color: rgba(28, 89, 171, 1) !important;
  border-radius: 5px;
}

.side-template-swap-roster .datepicker-months table > tbody > tr > td,
.side-template-swap-roster .datepicker-years table > tbody > tr > td,
.side-template-swap-roster .datepicker-decades table > tbody > tr > td {
  background-color: white !important;
}

.side-template-swap-roster .datepicker table > tbody > tr .month,
.side-template-swap-roster .datepicker table > tbody > tr .year,
.side-template-swap-roster .datepicker table > tbody > tr .decade {
  background-color: white !important;
  color: #5E5E5E !important;
  font-weight: bold;
}

.side-template-swap-roster .datepicker table > tbody > tr .month:hover,
.side-template-swap-roster .datepicker table > tbody > tr .year:hover,
.side-template-swap-roster .datepicker table > tbody > tr .decade:hover {
  border: 1px solid #d1e9f7;
}

.side-template-swap-roster .date-container .input-group.date {
  margin-left: auto;
  margin-right: auto;
}

.side-template-swap-roster .header {
  color: #3d61ff;
  border-bottom: 2px solid #3d61ff;
}

.side-template-swap-roster .table-picture {
  display: inline-block;
  margin-right: 10px;
}

.side-template-swap-roster .table-profile {
  display: inline-block;
  vertical-align: top;
  padding-top: 5px;
}

.swap-roster-container .swap-roster .swap-shift {
  border-left: 7px;
  border-top: 1px;
  border-bottom: 1px;
  border-right: 1px;
  border-style: solid;
  padding: 10px 15px;
  border-radius: 5px;
  margin-bottom: 10px;
  cursor: pointer;
  border-left-color: #27d582;
  border-top-color: #d0d0d0;
  border-right-color: #d0d0d0;
  border-bottom-color: #d0d0d0;
}

.swap-roster-container .swap-roster .swap-shift.selected {
  border-left-color: #3d61ff !important;
  border-top-color: #d0d0d0 !important;
  border-right-color: #d0d0d0 !important;
  border-bottom-color: #d0d0d0 !important;
}

.swap-roster-container .swap-roster .swap-shift:hover {
  border-color: rgba(28, 89, 171, 1);
}

.swap-roster-container .swap-profile .swap-picture {
  display: inline-block;
  width: 55px;
}

.swap-roster-container .swap-profile .swap-emp-info {
  display: inline-block;
  width: 245px;
  vertical-align: top;
  margin-top: 5px;
}

.swap-roster-container .swap-profile .swap-emp-info  .swap-emp-info-role-location {
  width: 100%;
  color: #c7c7c7;
  font-weight: 500;
}

.swap-roster-container .swap-profile .swap-emp-info  .swap-emp-info-role-location .swap-emp-info-role {
  width: 125px;
}

.swap-roster-container .swap-profile .swap-emp-info  .swap-emp-info-role-location .swap-emp-info-location {
  width: 120px;
}

.side-template-swap-roster .swap-roster-container .swap-roster-calendar {
  border: 1px solid #d9d9d9;
  cursor: pointer;
}

.side-template-swap-roster .datepicker table > thead > tr .prev,
.side-template-swap-roster .datepicker table > thead > tr .switch,
.side-template-swap-roster .datepicker table > thead > tr .next,
.side-template-swap-roster .datepicker table > thead > tr .prev:hover,
.side-template-swap-roster .datepicker table > thead > tr .switch:hover,
.side-template-swap-roster .datepicker table > thead > tr .next:hover,
.side-template-swap-roster .datepicker table > thead > tr > th,
.side-template-swap-roster .datepicker table > tbody > tr > td.active,
.side-template-swap-roster .datepicker table > tbody > tr > td.active:hover,
.side-template-swap-roster .datepicker table > tbody > tr > td.active:disabled,
.side-template-swap-roster .datepicker table > tbody > tr > td.active.disabled:hover,
.side-template-swap-roster .datepicker table > thead > tr:first-child:first-child > th:hover {
  background-color: white !important;
}

/****************************************/

/* Roster Filter  */

/****************************************/

.side-template-swap-roster .swap-roster-container .swap-roster-calendar:hover {
  border: 1px solid #3d61ff !important;
  color: #3d61ff !important;
}

.side-template-swap-roster .swap-roster-container .swap-roster-calendar .fa-calendar {
  font-size: 20px;
}

.modal-swap-roster-request-list {
  width: 385px;
}

.modal-swap-roster-preview {
  width: 750px;
}

.swap-request-preview-modal {
  font-family: 'Inter' !important;
  font-size: 11px !important;
}

.swap-request-preview-modal .preview-table {
  width: 100%;
}

.swap-request-preview-modal .preview-table tr td {
  border: 1px solid rgba(229, 221, 209, 1);
  height: 100%;
  width: 70px;
  vertical-align: top;
  background: rgba(248, 248, 248, 1);
}

.swap-request-preview-modal .preview-table tr td.no-border {
  border-left: 0px !important;
  border-right: 0px !important;
  background: transparent !important;
}

.swap-request-preview-modal .preview-table tr td.no-border .swap-icon {
  height: 45px;
}

.swap-request-preview-modal .preview-table .roster {
  padding: 5px 0px;
}

.swap-request-preview-modal .preview-table .roster .date {
  color: #979797;
  font-weight: bold;
}

.swap-request-preview-modal .preview-table .roster .shift {
  padding: 5px;
}

.swap-request-preview-modal .preview-table .roster .shift .shift-code {
  color: #979797;
  display: inline-block;
}

.swap-request-preview-modal .preview-table tr td.selected {
  background: rgba(255, 255, 255, 1) !important;
  box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.1) !important;
  border: 1px solid rgba(229, 221, 209, 1) !important;
}

.swap-request-preview-modal .preview-table tr td.selected .roster .date {
  color: #45443d !important;
}

.swap-request-preview-modal .preview-table tr td.selected .roster .shift .shift-code {
  color: #ffffff !important;
}

.swap-request-preview-modal .preview-table .off-day,
.swap-request-preview-modal .preview-table .rest-day {
  padding: 10px;
  background: repeating-linear-gradient(315deg, rgba(178, 178, 178, 0.35) 0, rgba(178, 178, 178, 0.35) 6px, rgba(173, 173, 173, 0.2) 6px, rgba(173, 173, 173, 0.2) 12px);
  margin-top: 5px;
}

/****************************************/

/* Table Roster Swap Request List  */

/****************************************/

.table-roster-swap-request-list .info-icon {
  height: 40px;
  width: 40px;
}

.table-roster-swap-request-list .col-name {
  min-width: 180px !important;
  max-width: 180px !important;
  width: 180px !important;
}

/****************************************/

/* Roster Swap Request List Modal  */

/* Show Shift Swap Modal  */

/****************************************/

.roster-swap-request-list-modal,
.show-shift-swap-modal {
  padding: 10px 20px;
}

.roster-swap-request-list-modal .header,
.show-shift-swap-modal .header {
  color: #3d61ff;
}

.roster-swap-request-list-modal .cancel,
.show-shift-swap-modal .cancel {
  padding: 5px 0px 0px 0px;
  font-size: 16px;
  cursor: pointer;
}

.roster-swap-request-list-modal .reason,
.show-shift-swap-modal .reason {
  color: #3d61ff;
}

.roster-swap-request-list-modal .decline-reason,
.show-shift-swap-modal .decline-reason {
  color: red;
}

/****************************************/

/* Side Template View Request  */

/****************************************/

.side-template-view-request .header {
  color: #3d61ff;
  border-bottom: 2px
    solid #3d61ff;
}

.side-template-view-request .table-view-request .picture-container {
  display: inline-block;
  vertical-align: top;
  margin-right: 5px;
}

.side-template-view-request .table-view-request .status-pending {
  font-size: 20px;
  color: #ec971f;
}

.side-template-view-request .table-view-request .status-approve {
  font-size: 20px;
  color: #03C272;
}

.side-template-view-request .table-view-request .status-reject {
  font-size: 20px;
  color: #F80F4B;
}

.side-template-view-request .table-view-request .profile-container {
  display: inline-block;
}

.side-template-view-request .table-view-request .profile-container .color-grey {
  color: #c7c7c7;
}


.report-custom-header .report-custom-table {
  min-width: 300px;
  margin-bottom: 10px !important;
}

.report-custom-header .report-custom-table th {
  padding: 10px;
}

.report-custom-header .report-custom-table > tbody > tr > td {
  padding: 10px 10px 0px 10px;
  border: 1px solid #dddddd;
}

.report-custom-header .report-custom-filter .report-custom-table > tbody > tr:first-child > td {
  border: 0px;
  border-bottom: 1px solid #dddddd;
  border-left: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
}

.report-custom-header .report-custom-table > tbody > tr > td .yearmonth-picker {
  margin-bottom: 0px !important;
}

.report-custom-header .report-custom-table .report-custom-table-category {
  padding: 0px 0px 10px 0px;
}

.report-custom-header .report-custom-table .report-custom-table-category .fa-caret-square-up {
  transition-duration: 0.5s;
  transform: rotate(0deg);
}

.report-custom-header .report-custom-table .report-custom-table-category .fa-caret-square-up.open {
  transition-duration: 0.5s;
  transform: rotate(180deg) !important;
}

.report-custom-header .report-custom-table .report-custom-table-fields {
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
  max-height: 0;
  overflow: hidden;
}

.report-custom-header .report-custom-table .report-custom-table-fields.open {
  transition: max-height 1s ease-in-out;
  max-height: 1000px;
}

.report-custom-header .report-custom-table td .report-custom-table-fields ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.report-custom-header .report-custom-table td .report-custom-table-fields ul li {
  padding: 10px 0px;
  border-top: 1px solid #dddddd;
}

.report-custom-header .report-custom-ordering {
  margin-bottom: 20px;
}

.report-custom-header .report-custom-ordering ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.report-custom-header .report-custom-ordering ul .row {
  margin: 0;
}

.report-custom-header .report-custom-ordering .report-custom-ordering-fields {
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
  max-height: 0;
  overflow: hidden;
  width: 850px;
}

.report-custom-header .report-custom-ordering .report-custom-ordering-fields.open {
  transition: max-height 1s ease-in-out;
  max-height: 10000px;
}

.report-custom-header .report-custom-filter .report-custom-filter-fields {
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
  max-height: 0;
  overflow: hidden;
  width: 850px;
  z-index: 1;
}

.report-custom-header .report-custom-filter .report-custom-filter-fields.open {
  transition: max-height 1s ease-in-out;
  max-height: 10000px;
  overflow: unset !important;
}

.report-custom-header .report-custom-ordering .report-custom-ordering-fields > .row {
  margin: 0px;
}

.report-custom-header .report-custom-ordering .report-custom-ordering-fields > .row > .col-md-3 {
  padding: 10px;
  border-left: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}

.report-custom-header .report-custom-ordering .report-custom-ordering-fields > .row > .col-md-9 {
  padding: 10px;
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}

.report-custom-header .report-custom-ordering .report-custom-ordering-fields ul li {
  cursor: move;
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}

.report-custom-header .report-custom-ordering .report-custom-ordering-fields ul li:active {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}

.report-custom-header .report-custom-ordering .report-custom-ordering-fields ul li:active .col-md-3,
.report-custom-header .report-custom-ordering .report-custom-ordering-fields ul li:active .col-md-9 {
  border-top: 1px solid #dddddd;
}

.report-custom-header .report-custom-ordering .report-custom-ordering-fields ul .col-md-3 {
  padding: 10px;
  border-left: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}

.report-custom-header .report-custom-ordering .report-custom-ordering-fields ul .col-md-9 {
  padding: 10px;
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}

.report-custom-header .report-custom-ordering .report-custom-ordering-header,
.report-custom-header .report-custom-filter .report-custom-filter-header {
  padding: 10px;
  width: 850px;
  cursor: pointer;
  border: 1px solid #dddddd;
  margin-top: 10px;
}

.report-custom-header .report-custom-ordering .report-custom-ordering-header:hover,
.report-custom-header .report-custom-filter .report-custom-filter-header:hover {
  color: #3d61ff !important;
  border: 1px solid #3d61ff;
}

.report-custom-header .report-custom-ordering .report-custom-ordering-header i,
.report-custom-header .report-custom-filter .report-custom-filter-header i {
  margin-top: 4px;
}

.report-custom-header .report-custom-header-actions > div {
  display: inline-block;
  vertical-align: top;
  margin-right: 5px;
}

.report-custom-header .report-custom-header-actions .is-only-default {
  vertical-align: bottom;
}

.report-custom-header .report-custom-header-actions .is-only-default label {
  vertical-align: top;
}

.report-custom-header .report-custom-header-actions .btn-decline {
  min-width: 40px !important;
  padding: 5px 6px 5px 10px !important;
}

.report-custom-header .report-custom-header-fields > div {
  display: inline-block;
  vertical-align: top;
  margin-right: 20px;
}

.report-custom-header .report-custom-header-fields .report-custom-table-category:hover,
.report-custom-header .report-custom-header-fields .report-custom-table-fields li:hover {
  color: #3d61ff;
}

.report-custom-header .report-custom-filter {
  margin-bottom: 20px;
  position: relative;
}

.report-custom-header .report-custom-filter .report-custom-table td {
  width: 850px;
}

.report-custom-header .report-custom-table .report-custom-filter-field {
  display: inline-block;
  vertical-align: top;
}

.report-custom-header .report-custom-table .report-custom-filter-field.filter-object {
  width: 200px !important;
}

.report-custom-header .report-custom-table .report-custom-filter-field {
  width: 150px;
  margin-right: 15px;
}

.report-custom-header .report-custom-table .report-custom-filter-field.report-custom-filter-btn {
  width: 40px !important;
  margin-right: 5px !important;
}

.report-custom-header .report-custom-table .report-custom-filter-field.report-custom-filter-btn .btn {
  min-width: 40px !important;
  padding: 5px 6px 5px 10px !important;
}

.status-timesheet-report-header .input-multiple-select-object {
  width: 100% !important;
}

.daily-timesheet-report-header .input-multiple-select-object {
  width: 100% !important;
}

.claim-history-report-header .input-multiple-select-object {
  width: 100% !important;
}