/*--------------------------------------------------============================================================
										13. prelaoder
=================================================--------------------------------------------------------------*/
.body3 {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 18px;
  background-color: #CCC;
}

.float3 {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 40px;
  right: 40px;
  background-color: #0C9;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  box-shadow: 2px 2px 3px #999;
}

.yellow {
  color: #fcb915;
}

.content-wrapper {
  height: auto;
  min-height: 946px !important;
  width: auto !important;
  background: #ecf0f5;
}

.progress-wrap {
  width: 100%;
  max-width: 100%;
  margin: 8px auto 24px auto;
  position: relative;
  font-family: "Segoe UI", sans-serif;
}

/* batang utama */
.progress-mini {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: #e5e5e5;
  overflow: hidden;
  position: relative;
}

/* bar berubah warna penuh sesuai level */
.progress-mini .progress-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--value);
  background: var(--bar-color);
  border-radius: inherit;
  transition: width 0.4s ease, background 0.4s ease;
}

/* indikator di bawah (nempel ke bar) */
.progress-ticks {
  position: relative;
  margin-top: 0;
  height: 10px;
}

.progress-ticks .tick {
  position: absolute;
  top: -2px; /* sedikit tumpang tindih agar garis nempel */
  transform: translateX(-50%);
  text-align: center;
}

.progress-ticks .tick .line {
  width: 2px;
  height: 6px;
  background: #aaa;
  margin: 0 auto;
  transition: background 0.3s;
}

.progress-ticks .tick.active .line {
  background: var(--bar-color);
}

.progress-ticks .tick .label {
  font-size: 11px;
  color: #555;
  white-space: nowrap;
  margin-top: 4px;
}

@media (prefers-color-scheme: dark) {
  .progress-mini { background: #333; }
  .progress-ticks .tick .label { color: #ddd; }
}


.fab {
  position: relative;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: #fff;
  color: #000;
  border: none;
  font-size: 28px;
  font-weight: 600;
  display: inline;
  vertical-align: top;
  top: 10px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease-in-out;
}

.fab:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  transform: translateY(-2px);
}

.fab:active {
  transform: scale(0.95);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.ati_btn_see_events {
    color: var(--color-black);
    border: solid 1px var(--color-border);
    border-radius: 15px;
    font-weight: 600;
    font-size: 12px;
    padding: 5px 15px;
}

.ati_title_events {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    margin: 25px 0;
}

.ati_post_banner img {
    border-radius: 15px;
    object-fit: cover;
    width: 100%;
}

.ati_title_events h4 {
    font-size: 15px;
    margin-bottom: 0;
    font-weight: 800;
}

.modal-protect {
  width: 980px !important;
}

.modal-viewdet {
  width: 800px !important;
}

.green {
  color: green !important;
}

.my-float3 {
  margin-top: 22px;
}

.icon {
  opacity: 0.8;
  transition: all 360ms;
}

.clear {
  clear: both;
}

.contact-div, .ask-div {
  transition: all 360ms;
  -webkit-transition: all 360ms;
  -ms-transition: all 360ms;
  -o-transition: all 360ms;
  -ms-transition: all 360ms;
  cursor: pointer;
}

.contact-div:hover, .ask-div:hover {
  background: #CECECE;
}

/* Custom CSS to position flash message */
#flash-message {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  font-size: 12pt;
  text-align: center;
  z-index: 10001; /* Ensure it's above other content */
}

/* Custom CSS to position flash message */
#snake-message {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  font-size: 12pt;
  text-align: center;
  z-index: 10001; /* Ensure it's above other content */
}

/* CSS for styling the toast message */
#toastContainer {
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  color: #000;
  z-index: 10001;
  padding: 10px 20px;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  border: thin solid #CECECE;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.showToast {
  opacity: 1 !important;
  visibility: visible !important;
  transition-delay: 0s !important;
}

.icon:hover {
  opacity: 1;
}

.field1, .field2, #btSave1, #btCancel1, #btSave2, #btCancel2 {
  display: none;
}

.vfield1 {
  visibility: hidden;
}

.btbig-box {
  width: 162px;
  height: 162px;
  border-radius: 20px;
  background: #C40000;
  font-family: Montserrat;
  font-size: 15px;
  line-height: 20px;
  text-align: center;
  color: #fff;
  transition: all 400ms;
  -webkit-transition: all 400ms;
  -moz-transition: all 400ms;
  -o-transition: all 400ms;
  -ms-transition: all 400ms;
}

.btn-start {
  padding:8px 50px;
  background:#C40000;
  font-family: Montserrat;
  border: none;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  line-height: 20px;
  border-radius: 15px;
  transition: all 360ms;
  -moz-transition: all 360ms;
  -webkit-transition: all 360ms;
  -ms-transition: all 360ms;
}

.btn-start:hover {
  background:#515151;
}

.btn-back {
  padding:8px 50px;
  background:#CECECE;
  font-family: Montserrat;
  border: none;
  font-size: 15px;
  font-weight: 700;
  color: #000;
  line-height: 20px;
  border-radius: 15px;
  transition: all 360ms;
  -moz-transition: all 360ms;
  -webkit-transition: all 360ms;
  -ms-transition: all 360ms;
}

.btn-back:hover {
  background:#555555;
  color: #fff;
}

.scroll-container {
  width: 100%;
  overflow-x: auto;
}

.scroll-container:hover {
  width: 100%;
  overflow-x: auto;
}

::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-corner { background: rgba(0,0,0,0.5); }

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #d6dee1;
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
}

/* For WebKit (Chrome, Safari, etc.) */
.scroll-container::-webkit-scrollbar {
  width: 6px; /* Adjust scrollbar width */
}

.scroll-container::-webkit-scrollbar-thumb {
  background-color: #888; /* Adjust scrollbar thumb color */
}

.scroll-container::-webkit-scrollbar-track {
  background-color: transparent; /* Adjust scrollbar track color */
}

#preloader {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: 9999999999;
  /* background-color: #1868dd; */
  /* background: linear-gradient(90deg, rgb(99, 16, 102) 33%, rgba(33,133,121,1) 98%); */
  background-color: #605ca8;
  -webkit-transition: all 1s ease-in;
  -o-transition: all 1s ease-in;
  transition: all 1s ease-in;
}

#preloader .preloader-cancel-btn {
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 40px;
  -webkit-transition: all 1s ease-in;
  -o-transition: all 1s ease-in;
  transition: all 1s ease-in;
}

#preloader.loaded {
  top: -150%;
}

#preloader.loaded .preloader-cancel-btn {
  bottom: 150%;
}

.prelaoder-btn {
  padding: 10px 30px;
}

.preloader-wrapper {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: absolute;
}

.spinner {
  width: 40px;
  height: 40px;
  /* background-color: #FFFFFF; */
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
  0% {
    -webkit-transform: perspective(120px);
  }

  50% {
    -webkit-transform: perspective(120px) rotateY(180deg);
  }

  100% {
    -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg);
  }
}

@keyframes sk-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);
  }
}



/*
 * Skin: Blue
 * ----------
 */
.skin-blue .main-header .navbar {
  background-color: dodgerblue;
}

.skin-blue .main-header .navbar .nav>li>a {
  color: #ffffff;
}

.skin-blue .main-header .navbar .nav>li>a:hover,
.skin-blue .main-header .navbar .nav>li>a:active,
.skin-blue .main-header .navbar .nav>li>a:focus,
.skin-blue .main-header .navbar .nav .open>a,
.skin-blue .main-header .navbar .nav .open>a:hover,
.skin-blue .main-header .navbar .nav .open>a:focus,
.skin-blue .main-header .navbar .nav>.active>a {
  background: rgba(0, 0, 0, 0.1);
  color: #f6f6f6;
}

.skin-blue .main-header .navbar .sidebar-toggle {
  color: #ffffff;
}

.skin-blue .main-header .navbar .sidebar-toggle:hover {
  color: #f6f6f6;
  background: rgba(0, 0, 0, 0.1);
}

.DTFC_LeftBodyWrapper {
  margin-top: -10px !important;
  height: 388px !important;
  max-height: 388px !important;
}

.DTFC_LeftBodyLiner {
  height: 388px !important;
  max-height: 388px !important;
}

.skin-blue .main-header .navbar .sidebar-toggle {
  color: #fff;
}

.label-time {
  font-size: 9.5pt;
}

.label-elapsed {
  cursor: pointer;
}

.pauli-col.active {
  background-color: yellow;
}

.pauli-col {
  padding: 8px;
}

.ellipsis {
  overflow: hidden;
  /* Hide overflowing text */
  white-space: nowrap;
  /* Prevent text from wrapping */
  text-overflow: ellipsis
}

.badge-jwb {
  padding: 7px 16px;
  background: green;
  color: #ffffff;
}

body {
  -webkit-print-color-adjust: exact !important;
}

body.modal-open {
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}

table.report tr th {
  background: #DEDEDE !important;
}

.v_none {
  visibility: hidden !important;
}

td.pad-top {
  padding-top: 24px !important;
}

td img {
  max-width: 100%;
  height: auto !important;
}

.ui-datepicker-month {
  color: #000000 !important;
}

.ui-datepicker-year {
  color: #000000 !important;
}

.red {
  color: red !important;
}

.cell-ans {
  cursor: pointer;
}

.green {
  color: green !important;
}

.banner-alert {
  position: fixed;
  top: 106px;
  left: calc(50% - 64px);
  z-index: 9999
}

#print-modal {
  background: #FFF;
  position: absolute;
  left: 50%;
  margin: 0 0 0 -465px;
  padding: 0 68px;
  width: 794px;
  box-shadow: 0 0 20px #000;
  -moz-box-shadow: 0 0 20px #000;
  -webkit-box-shadow: 0 0 10px #000;
}

.clear {
  clear: both;
}

.control-box {
  position: fixed;
  top: 10px;
  left: calc(50% - 195px);
  padding: 5px;
  width: 385px;
  min-height: 42px;
  border: thin solid #dedede;
  z-index: 999;
  background: #ffffff;
  transition: all 360ms;
  -moz-transition: all 360ms;
  -webkit-transition: all 360ms;
  -o-transition: all 360ms;
  -ms-transition: all 360ms;
  z-index: 10000;
}

.time-box {
  position: fixed;
  top: 53px;
  left: calc(50% - 346px);
  padding: 8px;
  width: 128px;
  min-height: 42px;
  font-size: 15pt;
  font-weight: bold;
  border: thin solid #dedede;
  z-index: 999;
  background: #ffffff;
  transition: all 360ms;
  -moz-transition: all 360ms;
  -webkit-transition: all 360ms;
  -o-transition: all 360ms;
  -ms-transition: all 360ms;
  z-index: 10000;
}

.btn-group-vertical>.btn,
.btn-group>.btn {
  left: 0;
  top: 0;
}

.modal {
  z-index: 10000;
}

/* Report */
.blue-box {
  width: 130px;
  height: 130px;
  background-color: #009AC0 !important;
  color: #ffffff !important;
}

.blue-box td {
  color: #ffffff !important;
}

.small-blue-box {
  width: 72px;
  font-size: 21pt;
  height: 72px;
  background: #009AC0 !important;
  color: #ffffff !important;
}

.small-blue-box td {
  color: #ffffff !important;
}

.td-desc-box {
  font-size: 12pt;
  padding: 0px 14px;
  text-align: justify;
}

.cell-header {
  font-size: 20pt;
  padding-right: 18px
}

.table-blue-header {
  font-size: 21pt;
  padding: 5px;
  background: #009AC0 !important;
  color: #ffffff !important;
}

.border-blue {
  border-color: #009AC0 !important;
}

/* Progress Bar*/
.progress2 {
  position: relative;
  overflow-x: auto !important;
  /* display: block !important; */
  display: flex;
}

.progress2 .progress-track {
  position: absolute;
  top: 5px;
  width: 100%;
  /* Set width to auto */
  height: 5px;
  background-color: #dfe3e4;
}


.tags {
  padding: 8px;
  width: 42px;
  height: 36px;
  background: rgb(0, 154, 192);
  color: #ffffff;
}

.warnings {
  padding: 8px;
  width: 42px;
  height: 36px;
  background: orange;
  color: #ffffff;
}

.progress2 .progress-step {
  position: relative;
  width: 100%;
  min-width: 75px;
  font-size: 14px;
  text-align: center;
}

.progress2 .progress-step:last-child:after {
  display: none;
}

.progress2 .progress-step:before {
  font: normal normal normal 13px/1 FontAwesome;
  content: "\f00c";
  display: flex;
  margin: 0 auto;
  margin-bottom: 10px;
  width: 20px;
  height: 20px;
  position: relative;
  background: #fff;
  border: 4px solid #dfe3e4;
  border-radius: 100%;
  color: #fff;
  z-index: 9999;
}

.progress2 .progress-step:after {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 0%;
  /*transition: width 1s ease-in;*/
  height: 5px;
  background: #dfe3e4;
}

.progress2 .progress-step.is-active {
  color: #2183dd;
}

.progress2 .progress-step.is-active:before {
  border: 4px solid #777;
  animation: pulse 2s infinite;
}

.progress2 .progress-step.is-complete {
  color: #009900;
}

.progress2 .progress-step.is-complete:before {
  font: normal normal normal 13px/1 FontAwesome;
  /*font-size: 10px;*/
  color: #fff;
  background: #009900;
  border: 4px solid transparent;
}

.progress2 .progress-step.is-complete:after {
  background: #2183dd;
  animation: nextStep 0s;
  animation-fill-mode: forwards;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(33, 131, 221, 0.4);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(33, 131, 221, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(33, 131, 221, 0);
  }
}

@keyframes nextStep {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}

/* End Progress TImeline*/


/*.container {
  margin: 50px 100px;
}

button {
  position: absolute;
  right: 50px;
  bottom: 20px;
  cursor: pointer;
}*/

input.d_none,
.usePassword {
  display: none;
}

table.report tr td {
  font-size: 10pt;
}

red {
  color: red;
  font-size: 10pt;
}

reds {
  color: red;
}

.skin-blue .main-header .navbar .sidebar-toggle:hover {
  background-color: #0169CE;
}

@media (max-width: 767px) {
  .skin-blue .main-header .navbar .dropdown-menu li.divider {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .skin-blue .main-header .navbar .dropdown-menu li a {
    color: #fff;
  }

  .skin-blue .main-header .navbar .dropdown-menu li a:hover {
    background: #367fa9;
  }

  .modal-protect {
    width: auto !important;
  }

  .modal-viewdet {
    width: auto !important;
  }
}

.div-attach {
  background-color: #f5f5f5;
  border: 1px solid #dcdcdc;
  font-weight: bold;
  margin: 0 7px 9px;
  overflow-y: hidden;
  padding: 4px 4px 4px 8px;
  position: absolute;
  bottom: 42px;
  left: 0;
  width: 90%;
  padding: 7px 7px 7px 8px;
}

.skin-blue .main-header .logo {
  background-color: dodgerblue;
  color: #ffffff;
  border-bottom: 0 solid transparent;
}

.skin-blue .main-header .logo:hover {
  background-color: #0169CE;
}

.skin-blue .main-header li.user-header {
  background-color: #3c8dbc;
}

.skin-blue .content-header {
  background: transparent;
}

.skin-blue .wrapper,
.skin-blue .main-sidebar,
.skin-blue .left-side {
  background-color: #222d32;
}

.skin-blue .user-panel>.info,
.skin-blue .user-panel>.info>a {
  color: #fff;
}

.skin-blue .sidebar-menu>li.header {
  color: #4b646f;
  background: #1a2226;
}

.skin-blue .sidebar-menu>li>a {
  border-left: 3px solid transparent;
}

.float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 40px;
  right: 40px;
  background-color: #25d366;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  box-shadow: 2px 2px 3px #999;
  z-index: 100;
  transition: all 360ms;
  -moz-transition: all 360ms;
  -ms-transition: all 360ms;
  -webkit-transition: all 360ms;
}

.float:hover {
  background-color: #ffffff;
}

.my-float {
  margin-top: 16px;
}

.row-yellow {
  background-color: yellow !important;
}

.chat-box {
  padding: 10px;
}

.chat-avatar {
  border-radius: 100%;
  border: thin solid #cecece;
}

.chat-bubble {
  width: 100%;
  padding: 8px;
  border: thin solid #cecece;
  border-radius: 8px;
}

.chat-row {
  width: 100%;
  margin-bottom: 15px;
}

.chat-title {
  font-size: 14px;
}

.chat-time {
  font-size: 12px;
}

.skin-blue .sidebar-menu>li:hover>a,
.skin-blue .sidebar-menu>li.active>a,
.bd-dashboard #mn-dashboard, 
.bd-assessment #mn-assessment, 
.bd-quest #mn-quest, 
.bd-absence #mn-absence, 
.bd-dashboard2 #mn-dashboard2, 
.bd-poin #mn-poin, 
.bd-finansial #mn-finansial, 
.bd-review #mn-review, 
.bd-hadiah #mn-hadiah,
.bd-redeem #mn-redeem,
.bd-generate #mn-generate,
.bd-generate2 #mn-generate2,
.bd-news #mn-news,
.bd-daftar #mn-daftar,
.bd-referral #mn-referral,
.bd-partnership #mn-partnership,
.bd-productivity #mn-productivity,
.bd-client #mn-client,
.bd-partdash #mn-partdash,
.bd-klaim #mn-klaim
 {
  color: #000;
  /*background: #1e282c;*/
  
  padding: 12px 5px 12px 15px;
  border-left: 6px solid #C40000;
}

.sidebar-menu > li > a:hover .div-icon {
  background: #C40000;
   transition: all 400ms;
  -moz-transition: all 400ms;
  -webkit-transition: all 400ms;
  -o-transition: all 400ms;
}

.sidebar-menu > li > a:hover .div-text {
  color: #000;
   transition: all 400ms;
  -moz-transition: all 400ms;
  -webkit-transition: all 400ms;
  -o-transition: all 400ms;
}

.bd-dashboard #mn-dashboard .div-icon,
.bd-assessment #mn-assessment .div-icon,
.bd-quest #mn-quest .div-icon,
.bd-absence #mn-absence .div-icon,
.bd-dashboard2 #mn-dashboard2 .div-icon,
.bd-absence #mn-absence .div-icon,
.bd-poin #mn-poin .div-icon,
.bd-finansial #mn-finansial .div-icon, 
.bd-review #mn-review .div-icon, 
.bd-hadiah #mn-hadiah .div-icon,
.bd-redeem #mn-redeem .div-icon,
.bd-generate #mn-generate .div-icon,
.bd-generate2 #mn-generate2 .div-icon,
.bd-news #mn-news .div-icon,
.bd-daftar #mn-daftar .div-icon,
.bd-referral #mn-referral .div-icon,
.bd-partnership #mn-partnership .div-icon,
.bd-productivity #mn-productivity .div-icon,
.bd-client #mn-client .div-icon,
.bd-partdash #mn-partdash .div-icon,
.bd-klaim #mn-klaim .div-icon {
  background: #C40000;
}

.bd-dashboard #mn-dashboard .div-text,
.bd-assessment #mn-assessment .div-text,
.bd-quest #mn-quest .div-text,
.bd-absence #mn-absence .div-text,
.bd-dashboard2 #mn-dashboard2 .div-text,
.bd-absence #mn-absence .div-text,
.bd-poin #mn-poin .div-text,
.bd-finansial #mn-finansial .div-text,
.bd-review #mn-review .div-text, 
.bd-hadiah #mn-hadiah .div-text,
.bd-redeem #mn-redeem .div-text,
.bd-generate #mn-generate .div-text,
.bd-generate2 #mn-generate2 .div-text,
.bd-news #mn-news .div-text,
.bd-daftar #mn-daftar .div-text,
.bd-referral #mn-referral .div-text,
.bd-partnership #mn-partnership .div-text,
.bd-productivity #mn-productivity .div-text,
.bd-client #mn-client .div-text,
.bd-partdash #mn-partdash .div-text,
.bd-klaim #mn-klaim .div-text {
  color: #000;
}

.div-icon {
  padding:8px;
  margin-right:9px;
   background: #C9C9C9; 
  display:inline-block;
  border-radius: 100%;
}

.div-icon3 {
  padding:8px;
/*  margin-right:9px;*/
/*   background: #C9C9C9; */
  display:inline-block;
  border-radius: 100%;
  filter: brightness(0) saturate(100%);
}

.div-icon4 {
  padding:8px;
/*  margin-right:9px;*/
/*   background: #C9C9C9; */
  display:inline-block;
  border-radius: 100%;
}

.active .div-icon {
  background: #fff;
}

.div-icon2 {
  padding:8px;
/*  margin-right:9px;*/
/*  background: #C9C9C9;*/
  display:inline-block;
/*  border-radius: 100%;*/
  border:none;

}

.active .div-icon3 {
   filter: brightness(0) saturate(100%) invert(21%) sepia(100%) saturate(7200%) hue-rotate(-10deg) brightness(85%);
/*  background: #fff;*/
}

img.home {
/*  background: #fff;*/
  background-image: url('../../../dist/img/icon_home2.png');
  width: 30px;
  border:none;
  height: 30px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon {
  cursor: pointer;
}

.div-text {
  vertical-align: middle;
  display:inline-block;
  font-family: Montserrat;
  font-size: 15px;
  font-weight: 800;
  line-height: 18.29px;
  color: #C9C9C9;
  background: #fff;
  padding: 10px 15px 10px 0px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.d_none {
  display: none;
}

.bd-type #group-master,
.bd-expense #group-master,
.bd-country #group-master,
.bd-group #group-master,
.bd-tls #group-master,
.bd-mbti #group-master,
.bd-lsq #group-master,
.bd-tkd #group-master,
.bd-spm #group-master,
.bd-epps #group-master,
.bd-dictionary #group-master,
.bd-dictionary-category #group-master,
.bd-faq #group-master {
  display: block;
}

.bd-type #mn-master .pull-right-container>.fa-angle-left,
.bd-expense #mn-master .pull-right-container>.fa-angle-left,
.bd-country #mn-master .pull-right-container>.fa-angle-left,
.bd-group #mn-master .pull-right-container>.fa-angle-left,
.bd-tls #mn-master .pull-right-container>.fa-angle-left,
.bd-mbti #mn-master .pull-right-container>.fa-angle-left,
.bd-lsq #mn-master .pull-right-container>.fa-angle-left,
.bd-tkd #mn-master .pull-right-container>.fa-angle-left,
.bd-spm #mn-master .pull-right-container>.fa-angle-left,
.bd-epps #mn-master .pull-right-container>.fa-angle-left,
.bd-dictionary #mn-master .pull-right-container>.fa-angle-left,
.bd-dictionary-category #mn-master .pull-right-container>.fa-angle-left,
.bd-faq #mn-master .pull-right-container>.fa-angle-left {
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.skin-blue .sidebar-menu>li>.treeview-menu {
  margin: 0 1px;
  background: #2c3b41;
}

.skin-blue .sidebar a {
  color: #b8c7ce;
}

.skin-blue .sidebar a:hover {
  text-decoration: none;
}

.skin-blue .treeview-menu>li>a {
  color: #8aa4af;
}

.skin-blue .treeview-menu>li.active>a,
.skin-blue .treeview-menu>li>a:hover {
  color: #ffffff;
}

.skin-blue .sidebar-form {
  border-radius: 3px;
  border: 1px solid #374850;
  margin: 10px 10px;
}

.skin-blue .sidebar-form input[type="text"],
.skin-blue .sidebar-form .btn {
  box-shadow: none;
  background-color: #374850;
  border: 1px solid transparent;
  height: 35px;
}

.skin-blue .sidebar-form input[type="text"] {
  color: #666;
  border-top-left-radius: 2px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 2px;
}

.skin-blue .sidebar-form input[type="text"]:focus,
.skin-blue .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
  background-color: #fff;
  color: #666;
}

.skin-blue .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
  border-left-color: #fff;
}

.skin-blue .sidebar-form .btn {
  color: #999;
  border-top-left-radius: 0;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 0;
}

.skin-blue.layout-top-nav .main-header>.logo {
  background-color: #3c8dbc;
  color: #ffffff;
  border-bottom: 0 solid transparent;
}

.skin-blue.layout-top-nav .main-header>.logo:hover {
  background-color: #3b8ab8;
}

/*
 * Skin: Blue
 * ----------
 */
.skin-blue-light .main-header .navbar {
  background-color: #3c8dbc;
}

.skin-blue-light .main-header .navbar .nav>li>a {
  color: #ffffff;
}

.skin-blue-light .main-header .navbar .nav>li>a:hover,
.skin-blue-light .main-header .navbar .nav>li>a:active,
.skin-blue-light .main-header .navbar .nav>li>a:focus,
.skin-blue-light .main-header .navbar .nav .open>a,
.skin-blue-light .main-header .navbar .nav .open>a:hover,
.skin-blue-light .main-header .navbar .nav .open>a:focus,
.skin-blue-light .main-header .navbar .nav>.active>a {
  background: rgba(0, 0, 0, 0.1);
  color: #f6f6f6;
}

.skin-blue-light .main-header .navbar .sidebar-toggle {
  color: #ffffff;
}

.skin-blue-light .main-header .navbar .sidebar-toggle:hover {
  color: #f6f6f6;
  background: rgba(0, 0, 0, 0.1);
}

.skin-blue-light .main-header .navbar .sidebar-toggle {
  color: #fff;
}

.skin-blue-light .main-header .navbar .sidebar-toggle:hover {
  background-color: #047F4A;
}

@media (max-width: 767px) {
  .skin-blue-light .main-header .navbar .dropdown-menu li.divider {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .skin-blue-light .main-header .navbar .dropdown-menu li a {
    color: #fff;
  }

  .skin-blue-light .main-header .navbar .dropdown-menu li a:hover {
    background: #367fa9;
  }
}

.skin-blue-light .main-header .logo {
  background-color: #3c8dbc;
  color: #ffffff;
  border-bottom: 0 solid transparent;
}

.skin-blue-light .main-header .logo:hover {
  background-color: #3b8ab8;
}

.skin-blue-light .main-header li.user-header {
  background-color: #3c8dbc;
}

.skin-blue-light .content-header {
  background: transparent;
}

.skin-blue-light .wrapper,
.skin-blue-light .main-sidebar,
.skin-blue-light .left-side {
  background-color: #f9fafc;
}

.skin-blue-light .content-wrapper,
.skin-blue-light .main-footer {
  border-left: 1px solid #d2d6de;
}

.skin-blue-light .user-panel>.info,
.skin-blue-light .user-panel>.info>a {
  color: #444444;
}

.skin-blue-light .sidebar-menu>li {
  -webkit-transition: border-left-color 0.3s ease;
  -o-transition: border-left-color 0.3s ease;
  transition: border-left-color 0.3s ease;
}

.skin-blue-light .sidebar-menu>li.header {
  color: #848484;
  background: #f9fafc;
}

.skin-blue-light .sidebar-menu>li>a {
  border-left: 3px solid transparent;
  font-weight: 600;
}

.skin-blue-light .sidebar-menu>li:hover>a,
.skin-blue-light .sidebar-menu>li.active>a {
  color: #000000;
  background: #f4f4f5;
}

.skin-blue-light .sidebar-menu>li.active {
  border-left-color: #3c8dbc;
}

.skin-blue-light .sidebar-menu>li.active>a {
  font-weight: 600;
}

.skin-blue-light .sidebar-menu>li>.treeview-menu {
  background: #f4f4f5;
}

.skin-blue-light .sidebar a {
  color: #444444;
}

.skin-blue-light .sidebar a:hover {
  text-decoration: none;
}

.skin-blue-light .treeview-menu>li>a {
  color: #777777;
}

.skin-blue-light .treeview-menu>li.active>a,
.skin-blue-light .treeview-menu>li>a:hover {
  color: #000000;
}

.skin-blue-light .treeview-menu>li.active>a {
  font-weight: 600;
}

.skin-blue-light .sidebar-form {
  border-radius: 3px;
  border: 1px solid #d2d6de;
  margin: 10px 10px;
}

.skin-blue-light .sidebar-form input[type="text"],
.skin-blue-light .sidebar-form .btn {
  box-shadow: none;
  background-color: #fff;
  border: 1px solid transparent;
  height: 35px;
}

.skin-blue-light .sidebar-form input[type="text"] {
  color: #666;
  border-top-left-radius: 2px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 2px;
}

.skin-blue-light .sidebar-form input[type="text"]:focus,
.skin-blue-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
  background-color: #fff;
  color: #666;
}

.skin-blue-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
  border-left-color: #fff;
}

.skin-blue-light .sidebar-form .btn {
  color: #999;
  border-top-left-radius: 0;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 0;
}

.bd-gray {
  background: #fff;
}

@media (min-width: 768px) {
  .skin-blue-light.sidebar-mini.sidebar-collapse .sidebar-menu>li>.treeview-menu {
    border-left: 1px solid #d2d6de;
  }
}

@media (max-width: 768px) {
  .bd-gray {
    background: #ecf0f5 !important;
  }
}

.skin-blue-light .main-footer {
  border-top-color: #d2d6de;
}

.skin-blue.layout-top-nav .main-header>.logo {
  background-color: #3c8dbc;
  color: #ffffff;
  border-bottom: 0 solid transparent;
}

.skin-blue.layout-top-nav .main-header>.logo:hover {
  background-color: #3b8ab8;
}

/*
 * Skin: Black
 * -----------
 */
/* skin-black navbar */
.skin-black .main-header {
  -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
}

.skin-black .main-header .navbar-toggle {
  color: #333;
}

.skin-black .main-header .navbar-brand {
  color: #333;
  border-right: 1px solid #eee;
}

.skin-black .main-header .navbar {
  background-color: #ffffff;
}

.skin-black .main-header .navbar .nav>li>a {
  color: #333333;
}

.skin-black .main-header .navbar .nav>li>a:hover,
.skin-black .main-header .navbar .nav>li>a:active,
.skin-black .main-header .navbar .nav>li>a:focus,
.skin-black .main-header .navbar .nav .open>a,
.skin-black .main-header .navbar .nav .open>a:hover,
.skin-black .main-header .navbar .nav .open>a:focus,
.skin-black .main-header .navbar .nav>.active>a {
  background: #ffffff;
  color: #999999;
}

.skin-black .main-header .navbar .sidebar-toggle {
  color: #333333;
}

.skin-black .main-header .navbar .sidebar-toggle:hover {
  color: #999999;
  background: #ffffff;
}

.skin-black .main-header .navbar>.sidebar-toggle {
  color: #333;
  border-right: 1px solid #eee;
}

.skin-black .main-header .navbar .navbar-nav>li>a {
  border-right: 1px solid #eee;
}

.skin-black .main-header .navbar .navbar-custom-menu .navbar-nav>li>a,
.skin-black .main-header .navbar .navbar-right>li>a {
  border-left: 1px solid #eee;
  border-right-width: 0;
}

.skin-black .main-header>.logo {
  background-color: #ffffff;
  color: #333333;
  border-bottom: 0 solid transparent;
  border-right: 1px solid #eee;
}

.skin-black .main-header>.logo:hover {
  background-color: #fcfcfc;
}

@media (max-width: 767px) {
  .skin-black .main-header>.logo {
    background-color: #222222;
    color: #ffffff;
    border-bottom: 0 solid transparent;
    border-right: none;
  }

  .skin-black .main-header>.logo:hover {
    background-color: #1f1f1f;
  }
}

.skin-black .main-header li.user-header {
  background-color: #222;
}

.skin-black .content-header {
  background: transparent;
  box-shadow: none;
}

.skin-black .wrapper,
.skin-black .main-sidebar,
.skin-black .left-side {
  background-color: #222d32;
}

.skin-black .user-panel>.info,
.skin-black .user-panel>.info>a {
  color: #fff;
}

.skin-black .sidebar-menu>li.header {
  color: #4b646f;
  background: #1a2226;
}

.skin-black .sidebar-menu>li>a {
  border-left: 3px solid transparent;
}

.skin-black .sidebar-menu>li:hover>a,
.skin-black .sidebar-menu>li.active>a {
  color: #ffffff;
  background: #1e282c;
  border-left-color: #ffffff;
}

.skin-black .sidebar-menu>li>.treeview-menu {
  margin: 0 1px;
  background: #2c3b41;
}

.skin-black .sidebar a {
  color: #b8c7ce;
}

.skin-black .sidebar a:hover {
  text-decoration: none;
}

.skin-black .treeview-menu>li>a {
  color: #8aa4af;
}

.skin-black .treeview-menu>li.active>a,
.skin-black .treeview-menu>li>a:hover {
  color: #ffffff;
}

.skin-black .sidebar-form {
  border-radius: 3px;
  border: 1px solid #374850;
  margin: 10px 10px;
}

.skin-black .sidebar-form input[type="text"],
.skin-black .sidebar-form .btn {
  box-shadow: none;
  background-color: #374850;
  border: 1px solid transparent;
  height: 35px;
}

.skin-black .sidebar-form input[type="text"] {
  color: #666;
  border-top-left-radius: 2px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 2px;
}

.skin-black .sidebar-form input[type="text"]:focus,
.skin-black .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
  background-color: #fff;
  color: #666;
}

.skin-black .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
  border-left-color: #fff;
}

.skin-black .sidebar-form .btn {
  color: #999;
  border-top-left-radius: 0;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 0;
}

.skin-black .pace .pace-progress {
  background: #222;
}

.skin-black .pace .pace-activity {
  border-top-color: #222;
  border-left-color: #222;
}

/*
 * Skin: Black
 * -----------
 */
/* skin-black navbar */
.skin-black-light .main-header {
  -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
}

.skin-black-light .main-header .navbar-toggle {
  color: #333;
}

.skin-black-light .main-header .navbar-brand {
  color: #333;
  border-right: 1px solid #eee;
}

.skin-black-light .main-header .navbar {
  background-color: #ffffff;
}

.skin-black-light .main-header .navbar .nav>li>a {
  color: #333333;
}

.skin-black-light .main-header .navbar .nav>li>a:hover,
.skin-black-light .main-header .navbar .nav>li>a:active,
.skin-black-light .main-header .navbar .nav>li>a:focus,
.skin-black-light .main-header .navbar .nav .open>a,
.skin-black-light .main-header .navbar .nav .open>a:hover,
.skin-black-light .main-header .navbar .nav .open>a:focus,
.skin-black-light .main-header .navbar .nav>.active>a {
  background: #ffffff;
  color: #999999;
}

.skin-black-light .main-header .navbar .sidebar-toggle {
  color: #333333;
}

.skin-black-light .main-header .navbar .sidebar-toggle:hover {
  color: #999999;
  background: #ffffff;
}

.skin-black-light .main-header .navbar>.sidebar-toggle {
  color: #333;
  border-right: 1px solid #eee;
}

.skin-black-light .main-header .navbar .navbar-nav>li>a {
  border-right: 1px solid #eee;
}

.skin-black-light .main-header .navbar .navbar-custom-menu .navbar-nav>li>a,
.skin-black-light .main-header .navbar .navbar-right>li>a {
  border-left: 1px solid #eee;
  border-right-width: 0;
}

.skin-black-light .main-header>.logo {
  background-color: #ffffff;
  color: #333333;
  border-bottom: 0 solid transparent;
  border-right: 1px solid #eee;
}

.skin-black-light .main-header>.logo:hover {
  background-color: #fcfcfc;
}

@media (max-width: 767px) {
  .skin-black-light .main-header>.logo {
    background-color: #222222;
    color: #ffffff;
    border-bottom: 0 solid transparent;
    border-right: none;
  }

  .skin-black-light .main-header>.logo:hover {
    background-color: #1f1f1f;
  }
}

.skin-black-light .main-header li.user-header {
  background-color: #222;
}

.skin-black-light .content-header {
  background: transparent;
  box-shadow: none;
}

.skin-black-light .wrapper,
.skin-black-light .main-sidebar,
.skin-black-light .left-side {
  background-color: #f9fafc;
}

.skin-black-light .content-wrapper,
.skin-black-light .main-footer {
  border-left: 1px solid #d2d6de;
}

.skin-black-light .user-panel>.info,
.skin-black-light .user-panel>.info>a {
  color: #444444;
}

.skin-black-light .sidebar-menu>li {
  -webkit-transition: border-left-color 0.3s ease;
  -o-transition: border-left-color 0.3s ease;
  transition: border-left-color 0.3s ease;
}

.skin-black-light .sidebar-menu>li.header {
  color: #848484;
  background: #f9fafc;
}

.skin-black-light .sidebar-menu>li>a {
  border-left: 3px solid transparent;
  font-weight: 600;
}

.skin-black-light .sidebar-menu>li:hover>a,
.skin-black-light .sidebar-menu>li.active>a {
  color: #000000;
  background: #f4f4f5;
}

.skin-black-light .sidebar-menu>li.active {
  border-left-color: #ffffff;
}

.skin-black-light .sidebar-menu>li.active>a {
  font-weight: 600;
}

.skin-black-light .sidebar-menu>li>.treeview-menu {
  background: #f4f4f5;
}

.skin-black-light .sidebar a {
  color: #444444;
}

.skin-black-light .sidebar a:hover {
  text-decoration: none;
}

.skin-black-light .treeview-menu>li>a {
  color: #777777;
}

.skin-black-light .treeview-menu>li.active>a,
.skin-black-light .treeview-menu>li>a:hover {
  color: #000000;
}

.skin-black-light .treeview-menu>li.active>a {
  font-weight: 600;
}

.skin-black-light .sidebar-form {
  border-radius: 3px;
  border: 1px solid #d2d6de;
  margin: 10px 10px;
}

.skin-black-light .sidebar-form input[type="text"],
.skin-black-light .sidebar-form .btn {
  box-shadow: none;
  background-color: #fff;
  border: 1px solid transparent;
  height: 35px;
}

.skin-black-light .sidebar-form input[type="text"] {
  color: #666;
  border-top-left-radius: 2px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 2px;
}

.skin-black-light .sidebar-form input[type="text"]:focus,
.skin-black-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
  background-color: #fff;
  color: #666;
}

.skin-black-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
  border-left-color: #fff;
}

.skin-black-light .sidebar-form .btn {
  color: #999;
  border-top-left-radius: 0;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 0;
}

@media (min-width: 768px) {
  .skin-black-light.sidebar-mini.sidebar-collapse .sidebar-menu>li>.treeview-menu {
    border-left: 1px solid #d2d6de;
  }
}

/*
 * Skin: Green
 * -----------
 */
.skin-green .main-header .navbar {
  background-color: #00a65a;
}

.skin-green .main-header .navbar .nav>li>a {
  color: #ffffff;
}

.skin-green .main-header .navbar .nav>li>a:hover,
.skin-green .main-header .navbar .nav>li>a:active,
.skin-green .main-header .navbar .nav>li>a:focus,
.skin-green .main-header .navbar .nav .open>a,
.skin-green .main-header .navbar .nav .open>a:hover,
.skin-green .main-header .navbar .nav .open>a:focus,
.skin-green .main-header .navbar .nav>.active>a {
  background: rgba(0, 0, 0, 0.1);
  color: #f6f6f6;
}

.skin-green .main-header .navbar .sidebar-toggle {
  color: #ffffff;
}

.skin-green .main-header .navbar .sidebar-toggle:hover {
  color: #f6f6f6;
  background: rgba(0, 0, 0, 0.1);
}

.skin-green .main-header .navbar .sidebar-toggle {
  color: #fff;
}

.skin-green .main-header .navbar .sidebar-toggle:hover {
  background-color: #008d4c;
}

@media (max-width: 767px) {
  .skin-green .main-header .navbar .dropdown-menu li.divider {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .skin-green .main-header .navbar .dropdown-menu li a {
    color: #fff;
  }

  .skin-green .main-header .navbar .dropdown-menu li a:hover {
    background: #008d4c;
  }
}

.skin-green .main-header .logo {
  background-color: #008d4c;
  color: #ffffff;
  border-bottom: 0 solid transparent;
}

.skin-green .main-header .logo:hover {
  background-color: #008749;
}

.skin-green .main-header li.user-header {
  background-color: #00a65a;
}

.skin-green .content-header {
  background: transparent;
}

.skin-green .wrapper,
.skin-green .main-sidebar,
.skin-green .left-side {
  background-color: #222d32;
}

.skin-green .user-panel>.info,
.skin-green .user-panel>.info>a {
  color: #fff;
}

.skin-green .sidebar-menu>li.header {
  color: #4b646f;
  background: #1a2226;
}

.skin-green .sidebar-menu>li>a {
  border-left: 3px solid transparent;
}

.skin-green .sidebar-menu>li:hover>a,
.skin-green .sidebar-menu>li.active>a {
  color: #ffffff;
  background: #1e282c;
  border-left-color: #00a65a;
}

.skin-green .sidebar-menu>li>.treeview-menu {
  margin: 0 1px;
  background: #2c3b41;
}

.skin-green .sidebar a {
  color: #b8c7ce;
}

.skin-green .sidebar a:hover {
  text-decoration: none;
}

.skin-green .treeview-menu>li>a {
  color: #8aa4af;
}

.skin-green .treeview-menu>li.active>a,
.skin-green .treeview-menu>li>a:hover {
  color: #ffffff;
}

.skin-green .sidebar-form {
  border-radius: 3px;
  border: 1px solid #374850;
  margin: 10px 10px;
}

.skin-green .sidebar-form input[type="text"],
.skin-green .sidebar-form .btn {
  box-shadow: none;
  background-color: #374850;
  border: 1px solid transparent;
  height: 35px;
}

.skin-green .sidebar-form input[type="text"] {
  color: #666;
  border-top-left-radius: 2px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 2px;
}

.skin-green .sidebar-form input[type="text"]:focus,
.skin-green .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
  background-color: #fff;
  color: #666;
}

.skin-green .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
  border-left-color: #fff;
}

.skin-green .sidebar-form .btn {
  color: #999;
  border-top-left-radius: 0;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 0;
}

/*
 * Skin: Green
 * -----------
 */
.skin-green-light .main-header .navbar {
  background-color: #00a65a;
}

.skin-green-light .main-header .navbar .nav>li>a {
  color: #ffffff;
}

.skin-green-light .main-header .navbar .nav>li>a:hover,
.skin-green-light .main-header .navbar .nav>li>a:active,
.skin-green-light .main-header .navbar .nav>li>a:focus,
.skin-green-light .main-header .navbar .nav .open>a,
.skin-green-light .main-header .navbar .nav .open>a:hover,
.skin-green-light .main-header .navbar .nav .open>a:focus,
.skin-green-light .main-header .navbar .nav>.active>a {
  background: rgba(0, 0, 0, 0.1);
  color: #f6f6f6;
}

.skin-green-light .main-header .navbar .sidebar-toggle {
  color: #ffffff;
}

.skin-green-light .main-header .navbar .sidebar-toggle:hover {
  color: #f6f6f6;
  background: rgba(0, 0, 0, 0.1);
}

.skin-green-light .main-header .navbar .sidebar-toggle {
  color: #fff;
}

.skin-green-light .main-header .navbar .sidebar-toggle:hover {
  background-color: #008d4c;
}

@media (max-width: 767px) {
  .skin-green-light .main-header .navbar .dropdown-menu li.divider {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .skin-green-light .main-header .navbar .dropdown-menu li a {
    color: #fff;
  }

  .skin-green-light .main-header .navbar .dropdown-menu li a:hover {
    background: #008d4c;
  }
}

.skin-green-light .main-header .logo {
  background-color: #00a65a;
  color: #ffffff;
  border-bottom: 0 solid transparent;
}

.skin-green-light .main-header .logo:hover {
  background-color: #00a157;
}

.skin-green-light .main-header li.user-header {
  background-color: #00a65a;
}

.skin-green-light .content-header {
  background: transparent;
}

.skin-green-light .wrapper,
.skin-green-light .main-sidebar,
.skin-green-light .left-side {
  background-color: #f9fafc;
}

.skin-green-light .content-wrapper,
.skin-green-light .main-footer {
  border-left: 1px solid #d2d6de;
}

.skin-green-light .user-panel>.info,
.skin-green-light .user-panel>.info>a {
  color: #444444;
}

.skin-green-light .sidebar-menu>li {
  -webkit-transition: border-left-color 0.3s ease;
  -o-transition: border-left-color 0.3s ease;
  transition: border-left-color 0.3s ease;
}

.skin-green-light .sidebar-menu>li.header {
  color: #848484;
  background: #f9fafc;
}

.skin-green-light .sidebar-menu>li>a {
  border-left: 3px solid transparent;
  font-weight: 600;
}

.skin-green-light .sidebar-menu>li:hover>a,
.skin-green-light .sidebar-menu>li.active>a {
  color: #000000;
  background: #f4f4f5;
}

.skin-green-light .sidebar-menu>li.active {
  border-left-color: #00a65a;
}

.skin-green-light .sidebar-menu>li.active>a {
  font-weight: 600;
}

.skin-green-light .sidebar-menu>li>.treeview-menu {
  background: #f4f4f5;
}

.skin-green-light .sidebar a {
  color: #444444;
}

.skin-green-light .sidebar a:hover {
  text-decoration: none;
}

.skin-green-light .treeview-menu>li>a {
  color: #777777;
}

.skin-green-light .treeview-menu>li.active>a,
.skin-green-light .treeview-menu>li>a:hover {
  color: #000000;
}

.skin-green-light .treeview-menu>li.active>a {
  font-weight: 600;
}

.skin-green-light .sidebar-form {
  border-radius: 3px;
  border: 1px solid #d2d6de;
  margin: 10px 10px;
}

.skin-green-light .sidebar-form input[type="text"],
.skin-green-light .sidebar-form .btn {
  box-shadow: none;
  background-color: #fff;
  border: 1px solid transparent;
  height: 35px;
}

.skin-green-light .sidebar-form input[type="text"] {
  color: #666;
  border-top-left-radius: 2px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 2px;
}

.skin-green-light .sidebar-form input[type="text"]:focus,
.skin-green-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
  background-color: #fff;
  color: #666;
}

.skin-green-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
  border-left-color: #fff;
}

.skin-green-light .sidebar-form .btn {
  color: #999;
  border-top-left-radius: 0;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 0;
}

@media (min-width: 768px) {
  .skin-green-light.sidebar-mini.sidebar-collapse .sidebar-menu>li>.treeview-menu {
    border-left: 1px solid #d2d6de;
  }
}

/*
 * Skin: Red
 * ---------
 */
.skin-red .main-header .navbar {
  background-color: #dd4b39;
}

.skin-red .main-header .navbar .nav>li>a {
  color: #ffffff;
}

.skin-red .main-header .navbar .nav>li>a:hover,
.skin-red .main-header .navbar .nav>li>a:active,
.skin-red .main-header .navbar .nav>li>a:focus,
.skin-red .main-header .navbar .nav .open>a,
.skin-red .main-header .navbar .nav .open>a:hover,
.skin-red .main-header .navbar .nav .open>a:focus,
.skin-red .main-header .navbar .nav>.active>a {
  background: rgba(0, 0, 0, 0.1);
  color: #f6f6f6;
}

.skin-red .main-header .navbar .sidebar-toggle {
  color: #ffffff;
}

.skin-red .main-header .navbar .sidebar-toggle:hover {
  color: #f6f6f6;
  background: rgba(0, 0, 0, 0.1);
}

.skin-red .main-header .navbar .sidebar-toggle {
  color: #fff;
}

.skin-red .main-header .navbar .sidebar-toggle:hover {
  background-color: #d73925;
}

@media (max-width: 767px) {
  .skin-red .main-header .navbar .dropdown-menu li.divider {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .skin-red .main-header .navbar .dropdown-menu li a {
    color: #fff;
  }

  .skin-red .main-header .navbar .dropdown-menu li a:hover {
    background: #d73925;
  }
}

.skin-red .main-header .logo {
  background-color: #d73925;
  color: #ffffff;
  border-bottom: 0 solid transparent;
}

.skin-red .main-header .logo:hover {
  background-color: #d33724;
}

.skin-red .main-header li.user-header {
  background-color: #dd4b39;
}

.skin-red .content-header {
  background: transparent;
}

.skin-red .wrapper,
.skin-red .main-sidebar,
.skin-red .left-side {
  background-color: #222d32;
}

.skin-red .user-panel>.info,
.skin-red .user-panel>.info>a {
  color: #fff;
}

.skin-red .sidebar-menu>li.header {
  color: #4b646f;
  background: #1a2226;
}

.skin-red .sidebar-menu>li>a {
  border-left: 3px solid transparent;
}

.skin-red .sidebar-menu>li:hover>a,
.skin-red .sidebar-menu>li.active>a {
  color: #ffffff;
  background: #1e282c;
  border-left-color: #dd4b39;
}

.skin-red .sidebar-menu>li>.treeview-menu {
  margin: 0 1px;
  background: #2c3b41;
}

.skin-red .sidebar a {
  color: #b8c7ce;
}

.skin-red .sidebar a:hover {
  text-decoration: none;
}

.skin-red .treeview-menu>li>a {
  color: #8aa4af;
}

.skin-red .treeview-menu>li.active>a,
.skin-red .treeview-menu>li>a:hover {
  color: #ffffff;
}

.skin-red .sidebar-form {
  border-radius: 3px;
  border: 1px solid #374850;
  margin: 10px 10px;
}

.skin-red .sidebar-form input[type="text"],
.skin-red .sidebar-form .btn {
  box-shadow: none;
  background-color: #374850;
  border: 1px solid transparent;
  height: 35px;
}

.skin-red .sidebar-form input[type="text"] {
  color: #666;
  border-top-left-radius: 2px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 2px;
}

.skin-red .sidebar-form input[type="text"]:focus,
.skin-red .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
  background-color: #fff;
  color: #666;
}

.skin-red .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
  border-left-color: #fff;
}

.skin-red .sidebar-form .btn {
  color: #999;
  border-top-left-radius: 0;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 0;
}

/*
 * Skin: Red
 * ---------
 */
.skin-red-light .main-header .navbar {
  background-color: #dd4b39;
}

.skin-red-light .main-header .navbar .nav>li>a {
  color: #ffffff;
}

.skin-red-light .main-header .navbar .nav>li>a:hover,
.skin-red-light .main-header .navbar .nav>li>a:active,
.skin-red-light .main-header .navbar .nav>li>a:focus,
.skin-red-light .main-header .navbar .nav .open>a,
.skin-red-light .main-header .navbar .nav .open>a:hover,
.skin-red-light .main-header .navbar .nav .open>a:focus,
.skin-red-light .main-header .navbar .nav>.active>a {
  background: rgba(0, 0, 0, 0.1);
  color: #f6f6f6;
}

.skin-red-light .main-header .navbar .sidebar-toggle {
  color: #ffffff;
}

.skin-red-light .main-header .navbar .sidebar-toggle:hover {
  color: #f6f6f6;
  background: rgba(0, 0, 0, 0.1);
}

.skin-red-light .main-header .navbar .sidebar-toggle {
  color: #fff;
}

.skin-red-light .main-header .navbar .sidebar-toggle:hover {
  background-color: #d73925;
}

@media (max-width: 767px) {
  .skin-red-light .main-header .navbar .dropdown-menu li.divider {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .skin-red-light .main-header .navbar .dropdown-menu li a {
    color: #fff;
  }

  .skin-red-light .main-header .navbar .dropdown-menu li a:hover {
    background: #d73925;
  }
}

.skin-red-light .main-header .logo {
  background-color: #dd4b39;
  color: #ffffff;
  border-bottom: 0 solid transparent;
}

.skin-red-light .main-header .logo:hover {
  background-color: #dc4735;
}

.skin-red-light .main-header li.user-header {
  background-color: #dd4b39;
}

.skin-red-light .content-header {
  background: transparent;
}

.skin-red-light .wrapper,
.skin-red-light .main-sidebar,
.skin-red-light .left-side {
  background-color: #f9fafc;
}

.skin-red-light .content-wrapper,
.skin-red-light .main-footer {
  border-left: 1px solid #d2d6de;
}

.skin-red-light .user-panel>.info,
.skin-red-light .user-panel>.info>a {
  color: #444444;
}

.skin-red-light .sidebar-menu>li {
  -webkit-transition: border-left-color 0.3s ease;
  -o-transition: border-left-color 0.3s ease;
  transition: border-left-color 0.3s ease;
}

.skin-red-light .sidebar-menu>li.header {
  color: #848484;
  background: #f9fafc;
}

.skin-red-light .sidebar-menu>li>a {
  border-left: 3px solid transparent;
  font-weight: 600;
}

.skin-red-light .sidebar-menu>li:hover>a,
.skin-red-light .sidebar-menu>li.active>a {
  color: #000000;
  background: #f4f4f5;
}

.skin-red-light .sidebar-menu>li.active {
  border-left-color: #dd4b39;
}

.skin-red-light .sidebar-menu>li.active>a {
  font-weight: 600;
}

.skin-red-light .sidebar-menu>li>.treeview-menu {
  background: #f4f4f5;
}

.skin-red-light .sidebar a {
  color: #444444;
}

.skin-red-light .sidebar a:hover {
  text-decoration: none;
}

.skin-red-light .treeview-menu>li>a {
  color: #777777;
}

.skin-red-light .treeview-menu>li.active>a,
.skin-red-light .treeview-menu>li>a:hover {
  color: #000000;
}

.skin-red-light .treeview-menu>li.active>a {
  font-weight: 600;
}

.skin-red-light .sidebar-form {
  border-radius: 3px;
  border: 1px solid #d2d6de;
  margin: 10px 10px;
}

.skin-red-light .sidebar-form input[type="text"],
.skin-red-light .sidebar-form .btn {
  box-shadow: none;
  background-color: #fff;
  border: 1px solid transparent;
  height: 35px;
}

.skin-red-light .sidebar-form input[type="text"] {
  color: #666;
  border-top-left-radius: 2px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 2px;
}

.skin-red-light .sidebar-form input[type="text"]:focus,
.skin-red-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
  background-color: #fff;
  color: #666;
}

.skin-red-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
  border-left-color: #fff;
}

.skin-red-light .sidebar-form .btn {
  color: #999;
  border-top-left-radius: 0;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 0;
}

@media (min-width: 768px) {
  .skin-red-light.sidebar-mini.sidebar-collapse .sidebar-menu>li>.treeview-menu {
    border-left: 1px solid #d2d6de;
  }
}

/*
 * Skin: Yellow
 * ------------
 */
.skin-yellow .main-header .navbar {
  background-color: #f39c12;
}

.skin-yellow .main-header .navbar .nav>li>a {
  color: #ffffff;
}

.skin-yellow .main-header .navbar .nav>li>a:hover,
.skin-yellow .main-header .navbar .nav>li>a:active,
.skin-yellow .main-header .navbar .nav>li>a:focus,
.skin-yellow .main-header .navbar .nav .open>a,
.skin-yellow .main-header .navbar .nav .open>a:hover,
.skin-yellow .main-header .navbar .nav .open>a:focus,
.skin-yellow .main-header .navbar .nav>.active>a {
  background: rgba(0, 0, 0, 0.1);
  color: #f6f6f6;
}

.skin-yellow .main-header .navbar .sidebar-toggle {
  color: #ffffff;
}

.skin-yellow .main-header .navbar .sidebar-toggle:hover {
  color: #f6f6f6;
  background: rgba(0, 0, 0, 0.1);
}

.skin-yellow .main-header .navbar .sidebar-toggle {
  color: #fff;
}

.skin-yellow .main-header .navbar .sidebar-toggle:hover {
  background-color: #e08e0b;
}

@media (max-width: 767px) {
  .skin-yellow .main-header .navbar .dropdown-menu li.divider {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .skin-yellow .main-header .navbar .dropdown-menu li a {
    color: #fff;
  }

  .skin-yellow .main-header .navbar .dropdown-menu li a:hover {
    background: #e08e0b;
  }
}

.skin-yellow .main-header .logo {
  background-color: #e08e0b;
  color: #ffffff;
  border-bottom: 0 solid transparent;
}

.skin-yellow .main-header .logo:hover {
  background-color: #db8b0b;
}

.skin-yellow .main-header li.user-header {
  background-color: #f39c12;
}

.skin-yellow .content-header {
  background: transparent;
}

.skin-yellow .wrapper,
.skin-yellow .main-sidebar,
.skin-yellow .left-side {
  background-color: #222d32;
}

.skin-yellow .user-panel>.info,
.skin-yellow .user-panel>.info>a {
  color: #fff;
}

.skin-yellow .sidebar-menu>li.header {
  color: #4b646f;
  background: #1a2226;
}

.skin-yellow .sidebar-menu>li>a {
  border-left: 3px solid transparent;
}

.skin-yellow .sidebar-menu>li:hover>a,
.skin-yellow .sidebar-menu>li.active>a {
  color: #ffffff;
  background: #1e282c;
  border-left-color: #f39c12;
}

.skin-yellow .sidebar-menu>li>.treeview-menu {
  margin: 0 1px;
  background: #2c3b41;
}

.skin-yellow .sidebar a {
  color: #b8c7ce;
}

.skin-yellow .sidebar a:hover {
  text-decoration: none;
}

.skin-yellow .treeview-menu>li>a {
  color: #8aa4af;
}

.skin-yellow .treeview-menu>li.active>a,
.skin-yellow .treeview-menu>li>a:hover {
  color: #ffffff;
}

.skin-yellow .sidebar-form {
  border-radius: 3px;
  border: 1px solid #374850;
  margin: 10px 10px;
}

.skin-yellow .sidebar-form input[type="text"],
.skin-yellow .sidebar-form .btn {
  box-shadow: none;
  background-color: #374850;
  border: 1px solid transparent;
  height: 35px;
}

.skin-yellow .sidebar-form input[type="text"] {
  color: #666;
  border-top-left-radius: 2px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 2px;
}

.skin-yellow .sidebar-form input[type="text"]:focus,
.skin-yellow .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
  background-color: #fff;
  color: #666;
}

.skin-yellow .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
  border-left-color: #fff;
}

.skin-yellow .sidebar-form .btn {
  color: #999;
  border-top-left-radius: 0;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 0;
}

/*
 * Skin: Yellow
 * ------------
 */
.skin-yellow-light .main-header .navbar {
  background-color: #f39c12;
}

.skin-yellow-light .main-header .navbar .nav>li>a {
  color: #ffffff;
}

.skin-yellow-light .main-header .navbar .nav>li>a:hover,
.skin-yellow-light .main-header .navbar .nav>li>a:active,
.skin-yellow-light .main-header .navbar .nav>li>a:focus,
.skin-yellow-light .main-header .navbar .nav .open>a,
.skin-yellow-light .main-header .navbar .nav .open>a:hover,
.skin-yellow-light .main-header .navbar .nav .open>a:focus,
.skin-yellow-light .main-header .navbar .nav>.active>a {
  background: rgba(0, 0, 0, 0.1);
  color: #961111;
}

.skin-yellow-light .main-header .navbar .sidebar-toggle {
  color: #ffffff;
}

.skin-yellow-light .main-header .navbar .sidebar-toggle:hover {
  color: #f6f6f6;
  background: rgba(0, 0, 0, 0.1);
}

.skin-yellow-light .main-header .navbar .sidebar-toggle {
  color: #fff;
}

.skin-yellow-light .main-header .navbar .sidebar-toggle:hover {
  background-color: #e08e0b;
}

@media (max-width: 767px) {
  .skin-yellow-light .main-header .navbar .dropdown-menu li.divider {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .skin-yellow-light .main-header .navbar .dropdown-menu li a {
    color: #fff;
  }

  .skin-yellow-light .main-header .navbar .dropdown-menu li a:hover {
    background: #e08e0b;
  }
}

.skin-yellow-light .main-header .logo {
  background-color: #f39c12;
  color: #ffffff;
  border-bottom: 0 solid transparent;
}

.skin-yellow-light .main-header .logo:hover {
  background-color: #f39a0d;
}

.skin-yellow-light .main-header li.user-header {
  background-color: #f39c12;
}

.skin-yellow-light .content-header {
  background: transparent;
}

.skin-yellow-light .wrapper,
.skin-yellow-light .main-sidebar,
.skin-yellow-light .left-side {
  background-color: #f9fafc;
}

.skin-yellow-light .content-wrapper,
.skin-yellow-light .main-footer {
  border-left: 1px solid #d2d6de;
}

.skin-yellow-light .user-panel>.info,
.skin-yellow-light .user-panel>.info>a {
  color: #444444;
}

.skin-yellow-light .sidebar-menu>li {
  -webkit-transition: border-left-color 0.3s ease;
  -o-transition: border-left-color 0.3s ease;
  transition: border-left-color 0.3s ease;
}

.skin-yellow-light .sidebar-menu>li.header {
  color: #848484;
  background: #f9fafc;
}

.skin-yellow-light .sidebar-menu>li>a {
  border-left: 3px solid transparent;
  font-weight: 600;
}

.skin-yellow-light .sidebar-menu>li:hover>a,
.skin-yellow-light .sidebar-menu>li.active>a {
  color: #000000;
  background: #f4f4f5;
}

.skin-yellow-light .sidebar-menu>li.active {
  border-left-color: #f39c12;
}

.skin-yellow-light .sidebar-menu>li.active>a {
  font-weight: 600;
}

.skin-yellow-light .sidebar-menu>li>.treeview-menu {
  background: #f4f4f5;
}

.skin-yellow-light .sidebar a {
  color: #444444;
}

.skin-yellow-light .sidebar a:hover {
  text-decoration: none;
}

.skin-yellow-light .treeview-menu>li>a {
  color: #777777;
}

.skin-yellow-light .treeview-menu>li.active>a,
.skin-yellow-light .treeview-menu>li>a:hover {
  color: #000000;
}

.skin-yellow-light .treeview-menu>li.active>a {
  font-weight: 600;
}

.skin-yellow-light .sidebar-form {
  border-radius: 3px;
  border: 1px solid #d2d6de;
  margin: 10px 10px;
}

.skin-yellow-light .sidebar-form input[type="text"],
.skin-yellow-light .sidebar-form .btn {
  box-shadow: none;
  background-color: #fff;
  border: 1px solid transparent;
  height: 35px;
}

.skin-yellow-light .sidebar-form input[type="text"] {
  color: #666;
  border-top-left-radius: 2px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 2px;
}

.skin-yellow-light .sidebar-form input[type="text"]:focus,
.skin-yellow-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
  background-color: #fff;
  color: #666;
}

.skin-yellow-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
  border-left-color: #fff;
}

.skin-yellow-light .sidebar-form .btn {
  color: #999;
  border-top-left-radius: 0;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 0;
}

@media (min-width: 768px) {
  .skin-yellow-light.sidebar-mini.sidebar-collapse .sidebar-menu>li>.treeview-menu {
    border-left: 1px solid #d2d6de;
  }
}

/*
 * Skin: Purple
 * ------------
 */
.skin-purple .main-header .navbar {
  background-color: #605ca8;
}

.skin-purple .main-header .navbar .nav>li>a {
  color: #ffffff;
}

.skin-purple .main-header .navbar .nav>li>a:hover,
.skin-purple .main-header .navbar .nav>li>a:active,
.skin-purple .main-header .navbar .nav>li>a:focus,
.skin-purple .main-header .navbar .nav .open>a,
.skin-purple .main-header .navbar .nav .open>a:hover,
.skin-purple .main-header .navbar .nav .open>a:focus,
.skin-purple .main-header .navbar .nav>.active>a {
  background: rgba(0, 0, 0, 0.1);
  color: #f6f6f6;
}

.skin-purple .main-header .navbar .sidebar-toggle {
  color: #ffffff;
}

.skin-purple .main-header .navbar .sidebar-toggle:hover {
  color: #f6f6f6;
  background: rgba(0, 0, 0, 0.1);
}

.skin-purple .main-header .navbar .sidebar-toggle {
  color: #fff;
}

.skin-purple .main-header .navbar .sidebar-toggle:hover {
  background-color: #555299;
}

@media (max-width: 767px) {
  .skin-purple .main-header .navbar .dropdown-menu li.divider {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .skin-purple .main-header .navbar .dropdown-menu li a {
    color: #3d3737;
  }

  .skin-purple .main-header .navbar .dropdown-menu li a:hover {
    background: #555299;
  }
}

.skin-purple .main-header .logo {
  background-color: #555299;
  color: #ffffff;
  border-bottom: 0 solid transparent;
}

.skin-purple .main-header .logo:hover {
  background-color: #545096;
}

.skin-purple .main-header li.user-header {
  background-color: #605ca8;
}

.skin-purple .content-header {
  background: transparent;
}

.skin-purple .wrapper,
.skin-purple .main-sidebar,
.skin-purple .left-side {
  background-color: #222d32;
}

.skin-purple .user-panel>.info,
.skin-purple .user-panel>.info>a {
  color: #fff;
}

.skin-purple .sidebar-menu>li.header {
  color: #4b646f;
  background: #1a2226;
}

.skin-purple .sidebar-menu>li>a {
  border-left: 3px solid transparent;
}

.skin-purple .sidebar-menu>li:hover>a,
.skin-purple .sidebar-menu>li.active>a {
  color: #ffffff;
  background: #1e282c;
  border-left-color: #605ca8;
}

.skin-purple .sidebar-menu>li>.treeview-menu {
  margin: 0 1px;
  background: #2c3b41;
}

.skin-purple .sidebar a {
  color: #b8c7ce;
}

.skin-purple .sidebar a:hover {
  text-decoration: none;
}

.skin-purple .treeview-menu>li>a {
  color: #8aa4af;
}

.skin-purple .treeview-menu>li.active>a,
.skin-purple .treeview-menu>li>a:hover {
  color: #ffffff;
}

.skin-purple .sidebar-form {
  border-radius: 3px;
  border: 1px solid #374850;
  margin: 10px 10px;
}

.skin-purple .sidebar-form input[type="text"],
.skin-purple .sidebar-form .btn {
  box-shadow: none;
  background-color: #374850;
  border: 1px solid transparent;
  height: 35px;
}

.skin-purple .sidebar-form input[type="text"] {
  color: #666;
  border-top-left-radius: 2px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 2px;
}

.skin-purple .sidebar-form input[type="text"]:focus,
.skin-purple .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
  background-color: #fff;
  color: #666;
}

.skin-purple .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
  border-left-color: #fff;
}

.skin-purple .sidebar-form .btn {
  color: #999;
  border-top-left-radius: 0;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 0;
}

/*
 * Skin: Purple
 * ------------
 */
.skin-purple-light .main-header .navbar {
  background-color: #605ca8;
}

.skin-purple-light .main-header .navbar .nav>li>a {
  color: #ffffff;
}

.skin-purple-light .main-header .navbar .nav>li>a:hover,
.skin-purple-light .main-header .navbar .nav>li>a:active,
.skin-purple-light .main-header .navbar .nav>li>a:focus,
.skin-purple-light .main-header .navbar .nav .open>a,
.skin-purple-light .main-header .navbar .nav .open>a:hover,
.skin-purple-light .main-header .navbar .nav .open>a:focus,
.skin-purple-light .main-header .navbar .nav>.active>a {
  background: rgba(0, 0, 0, 0.1);
  color: #f6f6f6;
}

.skin-purple-light .main-header .navbar .sidebar-toggle {
  color: #ffffff;
}

.skin-purple-light .main-header .navbar .sidebar-toggle:hover {
  color: #f6f6f6;
  background: rgba(0, 0, 0, 0.1);
}

.skin-purple-light .main-header .navbar .sidebar-toggle {
  color: #fff;
}

.skin-purple-light .main-header .navbar .sidebar-toggle:hover {
  background-color: #555299;
}

@media (max-width: 767px) {
  .skin-purple-light .main-header .navbar .dropdown-menu li.divider {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .skin-purple-light .main-header .navbar .dropdown-menu li a {
    color: #fff;
  }

  .skin-purple-light .main-header .navbar .dropdown-menu li a:hover {
    background: #555299;
  }
}

.skin-purple-light .main-header .logo {
  background-color: #605ca8;
  color: #ffffff;
  border-bottom: 0 solid transparent;
}

.skin-purple-light .main-header .logo:hover {
  background-color: #5d59a6;
}

.skin-purple-light .main-header li.user-header {
  background-color: #605ca8;
}

.skin-purple-light .content-header {
  background: transparent;
}

.skin-purple-light .wrapper,
.skin-purple-light .main-sidebar,
.skin-purple-light .left-side {
  background-color: #f9fafc;
}

.skin-purple-light .content-wrapper,
.skin-purple-light .main-footer {
  border-left: 1px solid #d2d6de;
}

.skin-purple-light .user-panel>.info,
.skin-purple-light .user-panel>.info>a {
  color: #444444;
}

.skin-purple-light .sidebar-menu>li {
  -webkit-transition: border-left-color 0.3s ease;
  -o-transition: border-left-color 0.3s ease;
  transition: border-left-color 0.3s ease;
}

.skin-purple-light .sidebar-menu>li.header {
  color: #848484;
  background: #f9fafc;
}

.skin-purple-light .sidebar-menu>li>a {
  border-left: 3px solid transparent;
  font-weight: 600;
}

.skin-purple-light .sidebar-menu>li:hover>a,
.skin-purple-light .sidebar-menu>li.active>a {
  color: #000000;
  background: #f4f4f5;
}

.skin-purple-light .sidebar-menu>li.active {
  border-left-color: #605ca8;
}

.skin-purple-light .sidebar-menu>li.active>a {
  font-weight: 600;
}

.skin-purple-light .sidebar-menu>li>.treeview-menu {
  background: #f4f4f5;
}

.skin-purple-light .sidebar a {
  color: #444444;
}

.skin-purple-light .sidebar a:hover {
  text-decoration: none;
}

.skin-purple-light .treeview-menu>li>a {
  color: #777777;
}

.skin-purple-light .treeview-menu>li.active>a,
.skin-purple-light .treeview-menu>li>a:hover {
  color: #000000;
}

.skin-purple-light .treeview-menu>li.active>a {
  font-weight: 600;
}

.skin-purple-light .sidebar-form {
  border-radius: 3px;
  border: 1px solid #d2d6de;
  margin: 10px 10px;
}

.skin-purple-light .sidebar-form input[type="text"],
.skin-purple-light .sidebar-form .btn {
  box-shadow: none;
  background-color: #fff;
  border: 1px solid transparent;
  height: 35px;
}

.skin-purple-light .sidebar-form input[type="text"] {
  color: #666;
  border-top-left-radius: 2px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 2px;
}

.skin-purple-light .sidebar-form input[type="text"]:focus,
.skin-purple-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
  background-color: #fff;
  color: #666;
}

.skin-purple-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
  border-left-color: #fff;
}

.skin-purple-light .sidebar-form .btn {
  color: #999;
  border-top-left-radius: 0;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 0;
}

@media (min-width: 768px) {
  .skin-purple-light.sidebar-mini.sidebar-collapse .sidebar-menu>li>.treeview-menu {
    border-left: 1px solid #d2d6de;
  }
}

.mbti-tab-peronality-style {
  font-size: 24px;
  text-align: center;
  background: #054a73 !important;
  color: #fff !important;
  font-weight: 300;
}

.mbti-tab-extrovert {
  font-size: 24px;
  text-align: center;
  background: #ffd9b8 !important;
}

.mbti-tab-introvert {
  font-size: 24px;
  text-align: center;
  background: #fff5ed !important;
  opacity: 0.8;
}

.mbti-uraian-panjang {
  padding: 20px 10%;
  text-align: center;
  font-size: 20px;
}

.table-personality-style .tab-1 {
  font-size: 32px;
  font-weight: 300;
  text-align: center;
  line-height: 30px;
  background: #fcfcdb !important;
  width: 10%;
  padding-left: 10px;
  padding-right: 10px;
}

.table-personality-style .tab-2 {
  font-size: 50px;
  text-align: center;
  font-weight: 300;
  background: #ffd9b8 !important;
  width: 10%;
}

.table-personality-style .tab-3 {
  font-size: 24px;
  font-weight: 400;
  background: #f07066 !important;
  text-align: center;
  padding: 20px;
  width: 35%;
}

.table-personality-style .tab-4 {
  font-size: 50px;
  text-align: center;
  font-weight: 300;
  background: #fff5ed !important;
  width: 10%;
  opacity: 0.8;
}

.table-personality-style .tab-5 {
  font-size: 24px;
  font-weight: 400;
  background: #f7b5b0 !important;
  text-align: center;
  padding: 20px;
  width: 35%;
  opacity: 0.8;
}

.mbti-title {
  color: #054f99 !important;
  font-weight: 300;
  font-size: 36px;
}

.mbti-title-box {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
  border-bottom: 2px solid #00ccff;
  border-right: 2px solid #00ccff;
  text-align: center;
}

.tls-col-left {
  border-top: solid 2px #00ccff;
  border-right: solid 2px #00ccff;
  margin-right: 15px
}

.tls-col-left .tls-title-left {
  font-size: 38px;
  color: #054a78 !important;
  font-weight: 300;
  /* padding-top: 20px; */
}

.tls-col-right .tls-title-right {
  border-top: solid 1px #00ccff;
  border-left: solid 1px #00ccff;
}

.tls-title-right>td {
  font-size: 20px;
  font-weight: 300;
}

.tls-col-right .tls-skor-box {
  font-size: 32px;
  width: 85px;
  height: 65px;
  background: #053d5c !important;
  color: #ffffff !important;
}

.tls-col-right .tls-skor-text {
  font-size: 32px;
  height: 65px;
  background: #0a6196 !important;
  color: #ffffff !important;
}

.lsq-style-table .title-big-left {
  font-size: 26px;
  font-weight: 400;
  text-align: center;
  width: 50%;
  border-right: solid 1px #00abd6 !important;
}

.lsq-style-table .title-big-right {
  font-size: 26px;
  font-weight: 400;
  text-align: center;
  width: 50%;
}

.lsq-style-table .title-small-left {
  padding-right: 40px;
  font-size: 18px;
  border-right: solid 1px #00abd6 !important;
  color: #00abd6 !important;
}

.lsq-style-table .title-small-right {
  padding-left: 40px;
  font-size: 18px;
  color: #00abd6 !important;
}

.lsq-paragraph-study-style {
  position: relative;
  border-top: solid 1px #00abd6 !important;
  border-bottom: solid 1px #00abd6 !important;
  margin: 0 auto;
  /* width: 90%;  */
  padding: 10px 30px;
}

.lsq-paragraph-study-style .lsq-border-left {
  position: absolute;
  top: 0;
  left: 0;
  border-left: solid 1px #00abd6 !important;
  height: 40px;
}

.lsq-paragraph-study-style .lsq-border-right {
  position: absolute;
  bottom: 0;
  right: 0;
  border-right: solid 1px #00abd6 !important;
  height: 40px;
}

.lsq-paragraph-study-style .lsq-paragraph {
  font-size: 14px;
  font-weight: 300;
}

.lsq-tab-table-title {
  border-left: solid 3px #f07578 !important;
  border-bottom: solid 3px #f07578 !important;
  width: 80%;
  font-size: 28px;
  padding-left: 20px;
  color: #0080bf !important;
}

.lsq-table-pilihan-gaya-belajar {
  border-collapse: separate;
  border-spacing: 40px 20px;
}

.lsq-table-pilihan-gaya-belajar .lsq-title {
  color: #0080bf !important;
  font-weight: 300;
  font-size: 20px;
}

.lsq-table-pilihan-gaya-belajar .lsq-text {
  border-bottom: dashed 1px #0080bf !important;
  border-right: dashed 1px #0080bf !important;
}

.lsq-text .lsq-text-very-small {
  font-size: 14px;
}

.papikostick-tab-table-title {
  border-left: solid 1px #00ccff !important;
  border-bottom: solid 1px #00ccff !important;
  width: 100%;
  font-size: 28px;
  padding-left: 20px;
  color: #054a73 !important;
  font-weight: 300;
}


.papikostick-col-left .papikostick-title-left {
  border-top: solid 1px #f07066;
  border-right: solid 1px #f07066;
}

.papikostick-title-left>td {
  font-size: 16px;
  font-weight: 300;
  color: #054a73 !important;
  padding-top: 20px;
  padding-right: 20px;
  text-align: right;
}

.papikostick-col-left .papikostick-skor-box {
  font-size: 40px;
  width: 60px;
  height: 120px;
  background: #053d5c !important;
  color: #ffffff !important;
}

.papikostick-col-left .papikostick-skor-box-outline {
  font-size: 40px;
  width: 60px;
  height: 120px;
  background: #fff !important;
  border: solid 1px #053d5c !important;
  color: #053d5c !important;
}

.papikostick-col-left .papikostick-skor-text {
  font-size: 32px;
  height: 65px;
  background: #0a6196 !important;
  color: #ffffff !important;
}

.papikostick-col-right {
  border-bottom: solid 1px #ffd9b8;
  border-left: solid 1px #ffd9b8;
  min-height: 185px;
}

.papikostick-col-right .papikostick-title-right {
  font-size: 16px;
  color: #054a73 !important;
  font-weight: 300;
  padding: 20px 0;
}

.table-nsp-negotiating {
  margin: 20px auto 0;
  border: solid 2px #00ccff !important;
}

.table-nsp-negotiating .bg-biru {
  background: #0a6196 !important;
  color: #fff !important;
}

.table-nsp-negotiating .bg-biru-gelap {
  background: #053d5c !important;
  color: #fff !important;
}

.table-nsp-negotiating .bg-biru-muda {
  background: #edf7ff !important;
}

.table-nsp-negotiating .fs-18 {
  font-size: 16px;
}

.table-nsp-negotiating .fs-24 {
  font-size: 18px;
}

.table-nsp-negotiating .border-bold-blue {
  border: solid 2px #00ccff !important;
}

.table-nsp-negotiating .border-bold-blue-t {
  border-top: solid 2px #00ccff !important;
}

.table-nsp-negotiating .border-bold-blue-b {
  border-bottom: solid 2px #00ccff !important;
}

.table-nsp-negotiating .border-bold-blue-l {
  border-left: solid 2px #00ccff !important;
}

.table-nsp-negotiating .border-bold-blue-r {
  border-right: solid 2px #00ccff !important;
}

.table-nsp-negotiating .border-bold-blue-tb {
  border-top: solid 2px #00ccff !important;
  border-bottom: solid 2px #00ccff !important;
}

.table-nsp-negotiating .border-bold-blue-lr {
  border-left: solid 2px #00ccff !important;
  border-right: solid 2px #00ccff !important;
}

.table-nsp-negotiating .border-thin-blue {
  border: solid 1px #00ccff !important;
}

.table-nsp-negotiating .border-thin-blue-t {
  border-top: solid 1px #00ccff !important;
}

.table-nsp-negotiating .border-thin-blue-b {
  border-bottom: solid 1px #00ccff !important;
}

.table-nsp-negotiating .border-thin-blue-l {
  border-left: solid 1px #00ccff !important;
}

.table-nsp-negotiating .border-thin-blue-r {
  border-right: solid 1px #00ccff !important;
}

.table-nsp-negotiating .border-thin-blue-tb {
  border-top: solid 1px #00ccff !important;
  border-bottom: solid 1px #00ccff !important;
}

.table-nsp-negotiating .border-thin-blue-lr {
  border-left: solid 1px #00ccff !important;
  border-right: solid 1px #00ccff !important;
}

.page-break {
  page-break-after: always;
}

.header-for-print,
.header-space {
  height: 260px;
}

.footer-for-print,
.footer-space {
  height: 50px;
}

.footer-for-print {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #ffff0024;
  z-index: 999;
}

.header-for-print {
  position: fixed;
  top: 0;
  background: #fff;
  z-index: 999;
  width: 100%;
  padding: 15px;

}

.nsp-fs-16 {
  font-size: 16px;
}

.nsp-paragraph-text-desc {
  font-size: 16px;
  padding-right: 20px;
}

.margin-top-200 {
  margin-top: 200px;
}

@page {
  margin: 2mm;
}

@media print {
  body {
    -webkit-print-color-adjust: exact;
  }

  * {
    transition: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
  }

  @page {
    margin-bottom: 50px !important;
  }

  .margin-top-200 {
    margin-top: 50px !important;
  }

  .mbti-title {
    font-size: 24px !important;
  }

  thead.report-table {
    display: table-header-group !important;
  }

  tfoot.report-table {
    display: table-footer-group !important;
  }

  .nsp-fs-16 {
    font-size: 12px !important;
  }

  .tls-title-right>td {
    font-size: 14px;
    font-weight: 300;
  }

  .tls-col-right .tls-skor-text {
    font-size: 20px !important;
  }

  .tls-col-right .tls-skor-box {
    font-size: 24px !important;
  }

  .nsp-paragraph-text-desc {
    font-size: 12px;
    padding-right: 20px;
  }

  .header-for-print {
    position: fixed;
    top: 0;
    background: #fff;
    z-index: 999;

  }

  .footer-for-print {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #ffff0024 !important;
  }

  .tls-col-left .tls-title-left {
    font-size: 24px !important;
  }

  .table-nsp-negotiating .fs-18 {
    font-size: 12px !important;
  }

  .table-nsp-negotiating .fs-24 {
    font-size: 16px !important;
  }

  .lsq-text .lsq-text-very-small {
    font-size: 10px !important;
  }

  .mbti-tab-peronality-style {
    font-size: 16px !important;
    font-weight: 400;
  }

  .mbti-tab-extrovert {
    font-size: 16px !important;
  }

  .mbti-tab-introvert {
    font-size: 16px !important;
  }

  .table-personality-style .tab-1 {
    font-size: 14px !important;
    line-height: normal;
  }

  .table-personality-style .tab-2 {
    font-size: 28px !important;
  }

  .table-personality-style .tab-3 {
    font-size: 12px !important;
    font-weight: 300;
  }

  .table-personality-style .tab-4 {
    font-size: 28px !important;
  }

  .table-personality-style .tab-5 {
    font-size: 12px !important;
    font-weight: 300;
  }

  .mbti-uraian-panjang {
    font-size: 12px !important;
  }

  .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 {
    float: left;
  }

  .col-md-1 {
    width: 8%;
  }

  .col-md-2 {
    width: 16%;
  }

  .col-md-3 {
    width: 25%;
  }

  .col-md-4 {
    width: 33%;
  }

  .col-md-5 {
    width: 42%;
  }

  .col-md-6 {
    width: 50%;
  }

  .col-md-7 {
    width: 58%;
  }

  .col-md-8 {
    width: 66%;
  }

  .col-md-9 {
    width: 75%;
  }

  .col-md-10 {
    width: 83%;
  }

  .col-md-11 {
    width: 92%;
  }

  .col-md-12 {
    width: 100%;
  }

}