@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url("../fonts/sourcesanspro/sourcesanspro-light.woff");
}

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url("../fonts/sourcesanspro/sourcesanspro.woff") format('woff');
}

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url("../fonts/sourcesanspro/sourcesanspro-bold.woff") format('woff');
}
/* 
    xonemanger styles
*/

/* platforms color */

html {
  background-color: #f0f3f4;
}

body {
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #58666e;
  background-color: transparent;
  -webkit-font-smoothing: antialiased;
  line-height: 1.42857143;
}

*:focus {
  outline: 0 !important;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin: 0;
}

a {
  color: #363f44;
  text-decoration: none;
  cursor: pointer;
}

a:hover,
a:focus {
  color: #141719;
  text-decoration: none;
}

label {
  font-weight: normal;
}

small,
.small {
  font-size: 13px;
}

.badge,
.label {
  font-weight: bold;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

.badge.bg-light,
.label.bg-light {
  text-shadow: none;
}

.badge {
  background-color: #cfdadd;
}

.badge.up {
  position: relative;
  top: -10px;
  padding: 3px 6px;
  margin-left: -10px;
}

.badge-sm {
  font-size: 85%;
  padding: 2px 5px !important;
}

.label-sm {
  padding-top: 0;
  padding-bottom: 1px;
}

.badge-white {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 2px 6px;
}

.badge-empty {
  background-color: transparent;
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: inherit;
}

blockquote {
  border-color: #dee5e7;
}

.caret-white {
  border-top-color: #fff;
  border-top-color: rgba(255, 255, 255, 0.65);
}

a:hover .caret-white {
  border-top-color: #fff;
}

.thumbnail {
  border-color: #dee5e7;
}

.progress {
  background-color: #edf1f2;
}

.progress-xxs {
  height: 2px;
}

.progress-xs {
  height: 6px;
}

.progress-sm {
  height: 12px;
}

.progress-sm .progress-bar {
  font-size: 10px;
  line-height: 1em;
}

.progress,
.progress-bar {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.progress-bar-primary {
  background-color: #0099FF;
}

.progress-bar-info {
  background-color: #40BBEA;
}

.progress-bar-success {
  background-color: #24c30c;
}

.progress-bar-warning {
  background-color: #FFBA00;
}

.progress-bar-danger {
  background-color: #ff646a;
}

.progress-bar-black {
  background-color: #1c2b36;
}

.progress-bar-white {
  background-color: #fff;
}

.accordion-group,
.accordion-inner {
  border-color: #dee5e7;
  border-radius: 2px;
}

.alert {
  font-size: 13px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.alert .close i {
  font-size: 12px;
  font-weight: normal;
  display: block;
}

.form-control {
  border-color: #cfdadd;
  border-radius: 2px;
}

.form-control,
.form-control:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.form-control:focus {
  border-color: #40BBEA;
}

.form-horizontal .control-label.text-left {
  text-align: left;
}

.form-control-spin {
  position: absolute;
  z-index: 2;
  right: 10px;
  top: 50%;
  margin-top: -7px;
}

.input-lg {
  height: 45px;
}

.input-group-addon {
  border-color: #cfdadd;
  background-color: #edf1f2;
}

.list-group {
  border-radius: 2px;
}

.list-group.no-radius .list-group-item {
  border-radius: 0 !important;
}

.list-group.no-borders .list-group-item {
  border: none;
}

.list-group.no-border .list-group-item {
  border-width: 1px 0;
}

.list-group.no-bg .list-group-item {
  background-color: transparent;
}

.list-group-item {
  border-color: #e7ecee;
  padding-right: 15px;
}

a.list-group-item:hover,
a.list-group-item:focus,
a.list-group-item.hover {
  background-color: #f6f8f8;
}

.list-group-item.media {
  margin-top: 0;
}

.list-group-item.active {
  color: #fff;
  border-color: #40BBEA !important;
  background-color: #40BBEA !important;
}

.list-group-item.active .text-muted {
  color: #caecf9 !important;
}

.list-group-item.active a {
  color: #fff;
}

.list-group-item.focus {
  background-color: #e4eaec !important;
}

.list-group-item.select {
  position: relative;
  z-index: 1;
  background-color: #dbeef9 !important;
  border-color: #c5e4f5;
}

.list-group-alt .list-group-item:nth-child(2n+2) {
  background-color: rgba(0, 0, 0, 0.02) !important;
}

.list-group-lg .list-group-item {
  padding-top: 15px;
  padding-bottom: 15px;
}

.list-group-sm .list-group-item {
  padding: 6px 10px;
}

.list-group-sp .list-group-item {
  margin-bottom: 5px;
  border-radius: 3px;
}

.list-group-item > .badge {
  margin-right: 0;
}

.list-group-item > .fa-chevron-right {
  float: right;
  margin-top: 4px;
  margin-right: -5px;
}

.list-group-item > .fa-chevron-right + .badge {
  margin-right: 5px;
}

.nav-pills.no-radius > li > a {
  border-radius: 0;
}

.nav-pills > li.active > a {
  color: #fff !important;
  background-color: #40BBEA;
}

.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:active {
  background-color: #29b3e7;
}

.nav > li > a:hover,
.nav > li > a:focus {
  background-color: #f6f8f8;
}

.nav.nav-lg > li > a {
  padding: 20px 20px;
}

.nav.nav-md > li > a {
  padding: 15px 15px;
}

.nav.nav-sm > li > a {
  padding: 6px 12px;
}

.nav.nav-xs > li > a {
  padding: 4px 10px;
}

.nav.nav-xxs > li > a {
  padding: 1px 10px;
}

.nav.nav-rounded > li > a {
  border-radius: 20px;
}

.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
  background-color: #f6f8f8;
}

.nav-tabs {
  border-color: #dee5e7;
}

.nav-tabs > li > a {
  border-radius: 2px 2px 0 0;
  border-bottom-color: #dee5e7;
}

.nav-tabs > li:hover > a,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover {
  border-color: #dee5e7;
}

.nav-tabs > li.active > a {
  border-bottom-color: #fff !important;
}

.nav-tabs-alt .nav-tabs.nav-justified > li {
  display: table-cell;
  width: 1%;
}

.nav-tabs-alt .nav-tabs > li > a {
  border-radius: 0;
  border-color: transparent !important;
  background: transparent !important;
  border-bottom-color: #dee5e7 !important;
}

.nav-tabs-alt .nav-tabs > li.active > a {
  border-bottom-color: #40BBEA !important;
}

.tab-container {
  margin-bottom: 15px;
}

.tab-container .tab-content {
  padding: 15px;
  background-color: #fff;
  border: 1px solid #dee5e7;
  border-top-width: 0;
  border-radius: 0 0 2px 2px;
}

.pagination > li > a {
  border-color: #dee5e7;
}

.pagination > li > a:hover,
.pagination > li > a:focus {
  border-color: #dee5e7;
  background-color: #edf1f2;
}

.panel {
  border-radius: 2px;
}

.panel .accordion-toggle {
  font-size: 14px;
  display: block;
  cursor: pointer;
}

.panel .list-group-item {
  border-color: #edf1f2;
}

.panel.no-borders {
  border-width: 0;
}

.panel.no-borders .panel-heading,
.panel.no-borders .panel-footer {
  border-width: 0;
}

.panel-heading {
  border-radius: 2px 2px 0 0;
}

.panel-default .panel-heading {
  background-color: #f6f8f8;
}

.panel-heading.no-border {
  margin: -1px -1px 0 -1px;
  border: none;
}

.panel-heading .nav {
  margin: -10px -15px;
}

.panel-heading .list-group {
  background: transparent;
}

.panel-footer {
  border-color: #edf1f2;
  border-radius: 0 0 2px 2px;
  background-color: #fff;
}

.panel-default {
  border-color: #dee5e7;
}

.panel-default > .panel-heading,
.panel-default > .panel-footer {
  border-color: #edf1f2;
}

.panel-group .panel-heading + .panel-collapse .panel-body {
  border-top: 1px solid #eaedef;
}

.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 8px 15px;
  border-top: 1px solid #eaeff0;
}

.table > thead > tr > th {
  padding: 8px 15px;
  border-bottom: 1px solid #eaeff0;
}

.table-bordered {
  border-color: #eaeff0;
}

.table-bordered > tbody > tr > td {
  border-color: #eaeff0;
}

.table-bordered > thead > tr > th {
  border-color: #eaeff0;
}

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  background-color: #fafbfc;
}

.table-striped > thead > th {
  background-color: #fafbfc;
  border-right: 1px solid #eaeff0;
}

.table-striped > thead > th:last-child {
  border-right: none;
}

.well,
pre {
  background-color: #edf1f2;
  border-color: #dee5e7;
}

.dropdown-menu {
  border-radius: 2px;
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid #dee5e7;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.dropdown-menu.pull-left {
  left: 100%;
}

.dropdown-menu > .panel {
  border: none;
  margin: -5px 0;
}

.dropdown-menu > li > a {
  padding: 5px 15px;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  background-image: none;
  filter: none;
  background-color: #edf1f2 !important;
  color: #141719;
}

.dropdown-header {
  padding: 5px 15px;
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
  background-color: #edf1f2 !important;
  color: #58666e;
}

.dropdown-submenu:hover > .dropdown-menu,
.dropdown-submenu:focus > .dropdown-menu {
  display: block;
}

.dropdown-submenu.pull-left {
  float: none !important;
}

.dropdown-submenu.pull-left > .dropdown-menu {
  left: -100%;
  margin-left: 10px;
}

.dropdown-submenu .dropdown-menu {
  left: 100%;
  top: 0;
  margin-top: -6px;
  margin-left: -1px;
}

.dropup .dropdown-submenu > .dropdown-menu {
  top: auto;
  bottom: 0;
}

.btn-group > .btn {
  margin-left: -1px;
}

/*cols*/

.col-lg-2-4 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

.col-0 {
  clear: left;
}

.row.no-gutter {
  margin-left: 0;
  margin-right: 0;
}

.no-gutter [class*="col"] {
  padding: 0;
}

.row-sm {
  margin-left: -10px;
  margin-right: -10px;
}

.row-sm > div {
  padding-left: 10px;
  padding-right: 10px;
}

.modal-backdrop {
  background-color: #3a3f51;
}

.modal-backdrop.in {
  opacity: 0.8;
  filter: alpha(opacity=80);
}

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

.modal-center {
  position: absolute;
  left: 50%;
  top: 50%;
}

.modal-xl {
  height: 80%;
}

/*layout*/

html,
body {
  width: 100%;
  height: 100%;
}

body {
  overflow-x: hidden;
}

.app {
  height: auto;
  min-height: 100%;
  width: 100%;
  position: relative;
}

.app:before {
  content: "";
  position: absolute;
  width: inherit;
  top: 0;
  bottom: 0;
  z-index: -1;
  background-color: #f0f3f4;
  border: inherit;
  display: block;
}

.app-header-fixed {
  padding-top: 50px;
}

.app-header-fixed .app-header {
  position: fixed;
  top: 0;
  width: 100%;
}

.app-header {
  z-index: 1025;
  border-radius: 0;
}

.app-aside {
  float: left;
}

.app-aside:before {
  content: "";
  position: absolute;
  width: inherit;
  top: 0;
  bottom: 0;
  z-index: -1;
  background-color: inherit;
  border: inherit;
}

.app-aside-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 1000;
  max-width: 250px;
}

.app-aside-folded .app-aside-footer {
  max-width: 60px;
}

.app-aside-footer ~ div {
  padding-bottom: 50px;
}

.app-aside-right {
  padding-bottom: 50px;
}

.app-content {
  height: 100%;
}

.app-content:before,
.app-content:after {
  content: " ";
  display: table;
}

.app-content:after {
  clear: both;
}

.app-content-full {
  position: absolute;
  top: 50px;
  bottom: 50px;
  height: auto;
  width: auto !important;
  padding: 0 !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.app-content-full.h-full {
  bottom: 0;
  height: auto;
}

.app-content-body {
  padding-bottom: 50px;
  float: left;
  width: 100%;
}

.app-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1005;
}

.app-footer.app-footer-fixed {
  position: fixed;
}

.hbox {
  display: table;
  table-layout: fixed;
  border-spacing: 0;
  width: 100%;
  height: 100%;
}

.hbox .col {
  display: table-cell;
  vertical-align: top;
  height: 100%;
  float: none;
}

.v-middle {
  vertical-align: middle !important;
}

.v-top {
  vertical-align: top !important;
}

.v-bottom {
  vertical-align: bottom !important;
}

.vbox {
  display: table;
  border-spacing: 0;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 240px;
}

.vbox .row-row {
  display: table-row;
  height: 100%;
}

.vbox .row-row .cell {
  position: relative;
  height: 100%;
  width: 100%;
  -webkit-overflow-scrolling: touch;
  overflow: auto;
}

.ie .vbox .row-row .cell {
  display: table-cell;
}

.vbox .row-row .cell .cell-inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.navbar {
  border-width: 0;
  border-radius: 0;
  margin: 0;
}

.navbar .navbar-form-sm {
  margin-top: 10px;
  margin-bottom: 10px;
}

.navbar-md {
  min-height: 60px;
}

.navbar-md .navbar-btn {
  margin-top: 13px;
}

.navbar-md .navbar-form {
  margin-top: 15px;
}

.navbar-md .navbar-nav > li > a {
  padding-top: 20px;
  padding-bottom: 20px;
}

.navbar-md .navbar-brand {
  line-height: 60px;
}

.navbar-header > button {
  text-decoration: none;
  line-height: 30px;
  font-size: 16px;
  padding: 10px 17px;
  border: none;
  background-color: transparent;
}

.navbar-brand {
  float: none;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  height: auto;
  line-height: 50px;
  display: inline-block;
  padding: 0 20px;
}

.navbar-brand:hover {
  text-decoration: none;
}

.navbar-brand img {
  max-height: 20px;
  margin-top: -4px;
  vertical-align: middle;
  display: inline;
}

@media (min-width: 768px) {
  .app-aside,
  .navbar-header {
    width: 250px;
  }

  .navbar-collapse,
  .app-content,
  .app-footer {
    margin-left: 250px;
  }

  .app-aside-right {
    position: absolute;
    top: 50px;
    bottom: 0;
    right: 0;
    z-index: 1000;
  }

  .app-aside-right.pos-fix {
    z-index: 1010;
  }

  .visible-folded {
    display: none;
  }

  .app-aside-folded .hidden-folded {
    display: none !important;
  }

  .app-aside-folded .visible-folded {
    display: inherit;
  }

  .app-aside-folded .text-center-folded {
    text-align: center;
  }

  .app-aside-folded .pull-none-folded {
    float: none !important;
  }

  .app-aside-folded .w-auto-folded {
    width: auto;
  }

  .app-aside-folded .app-aside,
  .app-aside-folded .navbar-header {
    width: 60px;
  }

  .app-aside-folded .navbar-collapse,
  .app-aside-folded .app-content,
  .app-aside-folded .app-footer {
    margin-left: 60px;
  }

  .app-aside-folded .app-header .navbar-brand {
    display: block;
    padding: 0;
  }

  .app-aside-fixed .app-header .navbar-header {
    position: fixed;
  }

  .app-aside-fixed .aside-wrap {
    position: fixed;
    overflow: hidden;
    top: 50px;
    bottom: 0;
    left: 0;
    width: 249px;
    z-index: 1000;
  }

  .app-aside-fixed .aside-wrap .navi-wrap {
    width: 267px;
    position: relative;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }

  .app-aside-fixed .aside-wrap .navi-wrap::-webkit-scrollbar {
    -webkit-appearance: none;
  }

  .app-aside-fixed .aside-wrap .navi-wrap::-webkit-scrollbar:vertical {
    width: 17px;
  }

  .app-aside-fixed .aside-wrap .navi-wrap > * {
    width: 250px;
  }

  .smart .app-aside-fixed .aside-wrap .navi-wrap {
    width: 250px;
  }

  .app-aside-fixed.app-aside-folded .app-aside {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 1010;
  }

  .app-aside-fixed.app-aside-folded .aside-wrap {
    width: 59px;
  }

  .app-aside-fixed.app-aside-folded .aside-wrap .navi-wrap {
    width: 77px;
  }

  .app-aside-fixed.app-aside-folded .aside-wrap .navi-wrap > * {
    width: 60px;
  }

  .smart .app-aside-fixed.app-aside-folded .aside-wrap .navi-wrap {
    width: 60px;
  }

  .bg-auto:before {
    content: "";
    position: absolute;
    width: inherit;
    top: 0;
    bottom: 0;
    z-index: -1;
    background-color: inherit;
    border: inherit;
  }

  .bg-auto.b-l:before {
    margin-left: -1px;
  }

  .bg-auto.b-r:before {
    margin-right: -1px;
  }

  .col.show {
    display: table-cell !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .hbox-auto-sm {
    display: block;
  }

  .hbox-auto-sm > .col {
    width: auto;
    height: auto;
    display: block;
  }

  .hbox-auto-sm > .col.show {
    display: block !important;
  }
}

@media (max-width: 767px) {
  .app-aside {
    float: none;
  }

  .app-content-full {
    width: 100% !important;
  }

  .hbox-auto-xs {
    display: block;
  }

  .hbox-auto-xs > .col {
    width: auto;
    height: auto;
    display: block;
  }

  .navbar-nav {
    margin-top: 0;
    margin-bottom: 0;
  }

  .navbar-nav > li > a {
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
  }

  .navbar-nav > li > a .up {
    top: 0;
  }

  .navbar-nav > li > a .avatar {
    width: 30px;
    margin-top: -5px;
  }

  .navbar-nav .open .dropdown-menu {
    background-color: #fff;
  }

  .navbar-form {
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

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

html {
  background: url("../images/bg.jpg");
  background-attachment: fixed;
  background-size: cover;
}

.app.container {
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 768px) {
  .app.container {
    width: 750px;
    -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
  }

  .app.container .app-aside {
    overflow-x: hidden;
  }

  .app.container.app-aside-folded .app-aside {
    overflow-x: visible;
  }

  .app.container.app-aside-fixed .aside-wrap {
    left: inherit;
  }

  .app.container.app-aside-fixed.app-aside-folded .app-aside > ul.nav {
    position: absolute;
  }

  .app.container .app-header,
  .app.container .app-aside {
    max-width: 750px;
  }

  .app.container .app-footer-fixed {
    left: auto;
    right: auto;
    width: 100%;
    max-width: 500px;
  }

  .app.container.app-aside-folded .app-footer-fixed {
    max-width: 690px;
  }

  .app.container.app-aside-dock .app-footer-fixed {
    max-width: 750px;
  }
}

@media (min-width: 992px) {
  .app.container {
    width: 970px;
  }

  .app.container .app-header,
  .app.container .app-aside {
    max-width: 970px;
  }

  .app.container .app-footer-fixed {
    max-width: 720px;
  }

  .app.container.app-aside-folded .app-footer-fixed {
    max-width: 910px;
  }

  .app.container.app-aside-dock .app-footer-fixed {
    max-width: 970px;
  }
}

@media (min-width: 1200px) {
  .app.container {
    width: 1170px;
  }

  .app.container .app-header,
  .app.container .app-aside {
    max-width: 1170px;
  }

  .app.container .app-footer-fixed {
    max-width: 920px;
  }

  .app.container.app-aside-folded .app-footer-fixed {
    max-width: 1110px;
  }

  .app.container.app-aside-dock .app-footer-fixed {
    max-width: 1170px;
  }
}

.iconBtn {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  margin: 4px;
}

.iconBtn-border {
  position: relative;
}

.iconBtn-border-sucess {
  position: relative;
}

.iconBtn-border-danger {
  position: relative;
}

.iconBtn-border-warning {
  position: relative;
}

.iconBtn-border::before,
.iconBtn-border::after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
}

.iconBtn-border::before {
  z-index: 1;
  -webkit-transition: box-shadow 0.3s;
  -moz-transition: box-shadow 0.3s;
  -o-transition: box-shadow 0.3s;
  transition: box-shadow 0.3s;
  box-shadow: inset 0 0 0 48px #4099ff;
}

.iconBtn-border:hover::before {
  box-shadow: inset 0 0 0 0 #4099ff;
}

.iconBtn-border-sucess::before {
  box-shadow: inset 0 0 0 48px #24c30c;
}

.iconBtn-border-sucess:hover::before {
  box-shadow: inset 0 0 0 0 #24c30c;
}

.iconBtn-border-danger::before {
  box-shadow: inset 0 0 0 48px #ff646a;
}

.iconBtn-border-danger:hover::before {
  box-shadow: inset 0 0 0 0 #ff646a;
}

.iconBtn-border-warning::before {
  box-shadow: inset 0 0 0 48px #FFBA00;
}

.iconBtn-border-warning:hover::before {
  box-shadow: inset 0 0 0 0 #FFBA00;
}

.iconBtn-border::after {
  background-position: -96px 0;
  z-index: 2;
}

.iconBtn-border > i {
  position: relative;
  z-index: 3;
}

.iconBtn-border > span {
  position: relative;
  z-index: 3;
}

.icon-mono {
  background-color: #595959;
  -webkit-transition: background-color 0.3s;
  -moz-transition: background-color 0.3s;
  -o-transition: background-color 0.3s;
  transition: background-color 0.3s;
  background-position: -96px 0;
}

.icon-mono:hover {
  background-color: #4099ff;
  background-position: -96px -96px;
}

/* Global Button Styles */

a.animated-button:link,
a.animated-button:visited {
  position: relative;
  display: block;
  margin: 30px auto 0;
  padding: 14px 15px;
  color: #D24D57;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  /*text-transform: uppercase;*/
  overflow: hidden;
  letter-spacing: 0.08em;
  border-radius: 0;
  /*text-shadow: 0 0 1px #000, 0 1px 0 rgba(0, 0, 0, 0.2);*/
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

a.animated-button:link:after,
a.animated-button:visited:after {
  content: "";
  position: absolute;
  height: 0%;
  left: 50%;
  top: 50%;
  width: 150%;
  z-index: -1;
  -webkit-transition: all 0.75s ease 0s;
  -moz-transition: all 0.75s ease 0s;
  -o-transition: all 0.75s ease 0s;
  transition: all 0.75s ease 0s;
}

a.animated-button:link:hover,
a.animated-button:visited:hover {
  color: #FFF;
  text-shadow: none;
}

a.animated-button:link:hover:after,
a.animated-button:visited:hover:after {
  height: 450%;
}

a.animated-button:link,
a.animated-button:visited {
  position: relative;
  display: block;
  margin: 30px auto 0;
  padding: 14px 15px;
  /*color: #fff;*/
  font-size: 14px;
  border-radius: 0;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  letter-spacing: 0.08em;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

/* Victoria Buttons */

a.animated-button.victoria-one {
  border: 2px solid #D24D57;
}

a.animated-button.victoria-one:after {
  background: #D24D57;
  -moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
  transform: translateX(-50%) translateY(-50%) rotate(-25deg);
}

a.animated-button.victoria-two {
  border: 2px solid #D24D57;
}

a.animated-button.victoria-two:after {
  background: #D24D57;
  -moz-transform: translateX(-50%) translateY(-50%) rotate(25deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(25deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(25deg);
  transform: translateX(-50%) translateY(-50%) rotate(25deg);
}

a.animated-button.victoria-three {
  border: 2px solid #D24D57;
}

a.animated-button.victoria-three:after {
  background: #D24D57;
  opacity: 0.5;
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

a.animated-button.victoria-three:hover:after {
  height: 140%;
  opacity: 1;
}

a.animated-button.victoria-four {
  border: 2px solid #D24D57;
}

a.animated-button.victoria-four:after {
  background: #D24D57;
  opacity: 0.5;
  -moz-transform: translateY(-50%) translateX(-50%) rotate(90deg);
  -ms-transform: translateY(-50%) translateX(-50%) rotate(90deg);
  -webkit-transform: translateY(-50%) translateX(-50%) rotate(90deg);
  transform: translateY(-50%) translateX(-50%) rotate(90deg);
}

a.animated-button.victoria-four:hover:after {
  opacity: 1;
  height: 600% !important;
}

/* Sandy Buttons */

a.animated-button.sandy-one {
  border: 2px solid #AEA8D3;
  color: #FFF;
}

a.animated-button.sandy-one:after {
  border: 3px solid #AEA8D3;
  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%);
}

a.animated-button.sandy-one:hover:after {
  height: 120% !important;
  opacity: 1;
  color: #FFF;
}

a.animated-button.sandy-two {
  border: 2px solid #AEA8D3;
  color: #FFF;
}

a.animated-button.sandy-two:after {
  border: 3px solid #AEA8D3;
  opacity: 0;
  -moz-transform: translateY(-50%) translateX(-50%) rotate(90deg);
  -ms-transform: translateY(-50%) translateX(-50%) rotate(90deg);
  -webkit-transform: translateY(-50%) translateX(-50%) rotate(90deg);
  transform: translateY(-50%) translateX(-50%) rotate(90deg);
}

a.animated-button.sandy-two:hover:after {
  height: 600% !important;
  opacity: 1;
  color: #FFF;
}

a.animated-button.sandy-three {
  border: 2px solid #AEA8D3;
  color: #FFF;
}

a.animated-button.sandy-three:after {
  border: 3px solid #AEA8D3;
  opacity: 0;
  -moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
  transform: translateX(-50%) translateY(-50%) rotate(-25deg);
}

a.animated-button.sandy-three:hover:after {
  height: 400% !important;
  opacity: 1;
  color: #FFF;
}

a.animated-button.sandy-four {
  border: 2px solid #AEA8D3;
  color: #FFF;
}

a.animated-button.sandy-four:after {
  border: 3px solid #AEA8D3;
  opacity: 0;
  -moz-transform: translateY(-50%) translateX(-50%) rotate(25deg);
  -ms-transform: translateY(-50%) translateX(-50%) rotate(25deg);
  -webkit-transform: translateY(-50%) translateX(-50%) rotate(25deg);
  transform: translateY(-50%) translateX(-50%) rotate(25deg);
}

a.animated-button.sandy-four:hover:after {
  height: 400% !important;
  opacity: 1;
  color: #FFF;
}

/* Gibson Buttons */

a.animated-button.gibson-one {
  border: 2px solid #65b37a;
  color: #FFF;
}

a.animated-button.gibson-one:after {
  opacity: 0;
  background-image: -webkit-linear-gradient(transparent 50%, rgba(101, 179, 122, 0.2) 50%);
  background-image: -moz-linear-gradient(transparent 50%, rgba(101, 179, 122, 0.2) 50%);
  background-size: 10px 10px;
  -moz-transform: translateX(-50%) translateY(-50%) rotate(25deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(25deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(25deg);
  transform: translateX(-50%) translateY(-50%) rotate(25deg);
}

a.animated-button.gibson-one:hover:after {
  height: 600% !important;
  opacity: 1;
  color: #FFF;
}

a.animated-button.gibson-two {
  border: 2px solid #65b37a;
  color: #FFF;
}

a.animated-button.gibson-two:after {
  opacity: 0;
  background-image: -webkit-linear-gradient(transparent 50%, rgba(101, 179, 122, 0.2) 50%);
  background-image: -moz-linear-gradient(transparent 50%, rgba(101, 179, 122, 0.2) 50%);
  background-size: 10px 10px;
  -moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
  transform: translateX(-50%) translateY(-50%) rotate(-25deg);
}

a.animated-button.gibson-two:hover:after {
  height: 600% !important;
  opacity: 1;
  color: #FFF;
}

a.animated-button.gibson-three {
  border: 2px solid #65b37a;
  color: #FFF;
}

a.animated-button.gibson-three:after {
  opacity: 0;
  background-image: -webkit-linear-gradient(transparent 50%, rgba(101, 179, 122, 0.2) 50%);
  background-image: -moz-linear-gradient(transparent 50%, rgba(101, 179, 122, 0.2) 50%);
  background-size: 10px 10px;
  -moz-transform: translateX(-50%) translateY(-50%) rotate(90deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(90deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(90deg);
  transform: translateX(-50%) translateY(-50%) rotate(90deg);
}

a.animated-button.gibson-three:hover:after {
  height: 600% !important;
  opacity: 1;
  color: #FFF;
}

a.animated-button.gibson-four {
  border: 2px solid #65b37a;
  color: #FFF;
}

a.animated-button.gibson-four:after {
  opacity: 0;
  background-image: -webkit-linear-gradient(transparent 50%, rgba(101, 179, 122, 0.2) 50%);
  background-image: -moz-linear-gradient(transparent 50%, rgba(101, 179, 122, 0.2) 50%);
  background-size: 10px 10px;
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

a.animated-button.gibson-four:hover:after {
  height: 600% !important;
  opacity: 1;
  color: #FFF;
}

/* Thar Buttons */

a.animated-button.thar-one {
  color: #fff;
  cursor: pointer;
  display: block;
  position: relative;
  border: 2px solid #F7CA18;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

a.animated-button.thar-one:hover {
  color: #000 !important;
  background-color: transparent;
  text-shadow: none;
}

a.animated-button.thar-one:hover:before {
  bottom: 0%;
  top: auto;
  height: 100%;
}

a.animated-button.thar-one:before {
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  height: 0px;
  width: 100%;
  z-index: -1;
  content: '';
  color: #000 !important;
  background: #F7CA18;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

a.animated-button.thar-two {
  color: #fff;
  cursor: pointer;
  display: block;
  position: relative;
  border: 2px solid #F7CA18;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

a.animated-button.thar-two:hover {
  color: #000 !important;
  background-color: transparent;
  text-shadow: ntwo;
}

a.animated-button.thar-two:hover:before {
  top: 0%;
  bottom: auto;
  height: 100%;
}

a.animated-button.thar-two:before {
  display: block;
  position: absolute;
  left: 0px;
  bottom: 0px;
  height: 0px;
  width: 100%;
  z-index: -1;
  content: '';
  color: #000 !important;
  background: #F7CA18;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

a.animated-button.thar-three {
  color: #fff;
  cursor: pointer;
  display: block;
  position: relative;
  border: 2px solid #F7CA18;
  transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}

a.animated-button.thar-three:hover {
  color: #000 !important;
  background-color: transparent;
  text-shadow: nthree;
}

a.animated-button.thar-three:hover:before {
  left: 0%;
  right: auto;
  width: 100%;
}

a.animated-button.thar-three:before {
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%;
  width: 0px;
  z-index: -1;
  content: '';
  color: #000 !important;
  background: #F7CA18;
  transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}

a.animated-button.thar-four {
  color: #fff;
  cursor: pointer;
  display: block;
  position: relative;
  border: 2px solid #F7CA18;
  transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}

a.animated-button.thar-four:hover {
  color: #000 !important;
  background-color: transparent;
  text-shadow: nfour;
}

a.animated-button.thar-four:hover:before {
  right: 0%;
  left: auto;
  width: 100%;
}

a.animated-button.thar-four:before {
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 0px;
  z-index: -1;
  content: '';
  color: #000 !important;
  background: #F7CA18;
  transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}

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

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

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

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

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

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

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

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

.round {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-decoration: none;
  text-align: center;
  letter-spacing: -0.065em;
  -webkit-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  border-radius: 300px;
  z-index: 1;
}

.round i {
  opacity: 1;
  font-size: 22px;
  margin-top: 20px;
}

.round span {
  opacity: 0;
}

.round:hover {
  width: 300%;
  -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  -o-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  z-index: 2;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.round:hover i {
  opacity: 0;
  font-size: 22px;
  margin-top: 20px;
  margin-left: -60px;
}

.round:hover span {
  opacity: 1;
  font-size: 16px;
}

@-moz-keyframes growHeight {
  to {
    margin-left: 0;
    opacity: 1;
    transform: scale(1);
  }
}

@-webkit-keyframes growHeight {
  to {
    margin-left: 0;
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes growHeight {
  to {
    opacity: 1;
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.animate-enter,
.animate-leave {
  -webkit-transition: 400ms cubic-bezier(0.25, 0.25, 0.75, 0.75) all;
  -moz-transition: 400ms cubic-bezier(0.25, 0.25, 0.75, 0.75) all;
  -o-transition: 400ms cubic-bezier(0.25, 0.25, 0.75, 0.75) all;
  transition: 400ms cubic-bezier(0.25, 0.25, 0.75, 0.75) all;
  position: relative;
  display: block;
}

.animate-enter.animate-enter-active,
.animate-leave {
  opacity: 1;
  top: 0;
  height: 30px;
}

.animate-leave.animate-leave-active,
.animate-enter {
  opacity: 0;
  top: -50px;
  height: 0;
}

.modal {
  word-wrap: break-word;
}

.modal .label.error-msg {
  display: block;
  font-size: 12px;
  margin-top: 5px;
  padding: 0;
  padding: 5px;
  margin-top: 10px;
  text-align: left;
}

.modal .label.error-msg > span {
  white-space: pre-wrap;
}

.modal .modal-header {
  padding-bottom: 10px;
}

.modal .breadcrumb {
  margin-bottom: 10px;
}

.modal-fullscreen .modal-dialog,
.modal-fullscreen .modal-content {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.modal-fullscreen .modal-dialog {
  margin: 0;
  width: 100%;
}

.modal-fullscreen .modal-content {
  border: none;
  -moz-border-radius: 0;
  border-radius: 0;
  -webkit-box-shadow: inherit;
  -moz-box-shadow: inherit;
  -o-box-shadow: inherit;
  box-shadow: inherit;
}

.modal-fullscreen textarea.code {
  min-height: 450px;
}

.modal img.preview {
  max-width: 100%;
  max-height: 640px;
  border-radius: 3px;
}

.modal img.preview.loading {
  width: 100%;
  height: 1px;
  opacity: 0;
}

.modal.modal-wide {
  overflow: hidden;
}

.modal.modal-wide .modal-dialog {
  width: 94%;
}

.modal-wide .modal-body {
  overflow-y: scroll;
  max-height: calc(100% - 120px);
}

@-webkit-keyframes ezCustTrans {
  0% {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: perspective(90%) rotateY(-65deg) rotateX(-45deg) translateZ(-200px);
    -moz-transform: perspective(90%) rotateY(-65deg) rotateX(-45deg) translateZ(-200px);
    -ms-transform: perspective(90%) rotateY(-65deg) rotateX(-45deg) translateZ(-200px);
    transform: perspective(90%) rotateY(-65deg) rotateX(-45deg) translateZ(-200px);
    opacity: 0;
  }

  68% {
    -webkit-transform: rotateY(10deg) rotateX(10deg) translateZ(20px);
    -moz-transform: rotateY(10deg) rotateX(10deg) translateZ(20px);
    -ms-transform: rotateY(10deg) rotateX(10deg) translateZ(20px);
    transform: rotateY(10deg) rotateX(10deg) translateZ(20px);
    opacity: 0.8;
  }

  100% {
    -webkit-transform: rotateY(0deg) rotateX(0deg) translateZ(0px);
    -moz-transform: rotateY(0deg) rotateX(0deg) translateZ(0px);
    -ms-transform: rotateY(0deg) rotateX(0deg) translateZ(0px);
    transform: rotateY(0deg) rotateX(0deg) translateZ(0px);
    opacity: 1;
  }
}

@keyframes ezCustTrans {
  0% {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: perspective(90%) rotateY(-65deg) rotateX(-45deg) translateZ(-200px);
    -moz-transform: perspective(90%) rotateY(-65deg) rotateX(-45deg) translateZ(-200px);
    -ms-transform: perspective(90%) rotateY(-65deg) rotateX(-45deg) translateZ(-200px);
    transform: perspective(90%) rotateY(-65deg) rotateX(-45deg) translateZ(-200px);
    opacity: 0;
  }

  68% {
    -webkit-transform: rotateY(10deg) rotateX(10deg) translateZ(20px);
    -moz-transform: rotateY(10deg) rotateX(10deg) translateZ(20px);
    -ms-transform: rotateY(10deg) rotateX(10deg) translateZ(20px);
    transform: rotateY(10deg) rotateX(10deg) translateZ(20px);
    opacity: 0.8;
  }

  100% {
    -webkit-transform: rotateY(0deg) rotateX(0deg) translateZ(0px);
    -moz-transform: rotateY(0deg) rotateX(0deg) translateZ(0px);
    -ms-transform: rotateY(0deg) rotateX(0deg) translateZ(0px);
    transform: rotateY(0deg) rotateX(0deg) translateZ(0px);
    opacity: 1;
  }
}

@keyframes inScale {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

@keyframes outScale {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(0);
  }
}

.modal.fade .modal-dialog,
.modal.in .modal-dialog {
  /*   -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
	-webkit-animation-name: ezCustTrans;
	animation-name: ezCustTrans;*/
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: inScale;
  animation-name: inScale;
}

.ezCustTrans {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: ezCustTrans;
  animation-name: ezCustTrans;
}

/* when hiding the picture */

.ng-hide-add1 {
  animation: 0.5s heighOut ease;
}

/* when showing the picture */

.ng-hide-remove1 {
  animation: 0.5s flipInX ease;
}

/* ANIMATIONS (FROM ANIMATE.CSS) ======================== */

/* flip in */

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

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

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

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

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

/* light speed out */

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

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

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

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

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

  100% {
    height: 0;
    opacity: 0;
  }
}

.fadeX {
  transition: 0.5s linear all;
  -webkit-transition: 0.5s linear all;
  transform: scale(1);
}

.fadeX.ng-enter {
  opacity: 0;
  transform: scale(0);
}

.fadeX.ng-enter.ng-enter-active {
  opacity: 1;
  transform: scale(0.5);
}

.fadeX.ng-leave {
  opacity: 1;
  transform: scale(1);
}

.fadeX.ng-leave.ng-leave-active {
  opacity: 0;
  transform: scale(0);
}

.nav-sub {
  opacity: 0;
  height: 0;
  overflow: hidden;
  margin-left: -20px;
  -webkit-transition: all 0.2s ease-in-out 0s;
  transition: all 0.2s ease-in-out 0s;
}

.active > .nav-sub,
.app-aside-folded li:hover > .nav-sub,
.app-aside-folded li:focus > .nav-sub,
.app-aside-folded li:active > .nav-sub {
  opacity: 1;
  margin-left: 0;
  height: auto !important;
  overflow: auto;
}

.active > .nav-sub:after,
.app-aside-folded li:hover > .nav-sub:after,
.app-aside-folded li:focus > .nav-sub:after,
.app-aside-folded li:active > .nav-sub:after {
  bottom: 0px;
  content: "";
  left: 27px;
  position: absolute;
  top: 0px;
}

.nav-sub-header {
  display: none !important;
}

.nav-sub-header a {
  padding: 15px 20px;
}

.itemSite {
  transform: scale(0);
  opacity: 0;
  animation: growHeight 0.4s linear 0.2s forwards;
}

.item0 {
  opacity: 0;
  animation: growHeight 0.2s linear 0s forwards;
}

.item1 {
  opacity: 0;
  animation: growHeight 0.2s linear 0.1s forwards;
}

.item2 {
  opacity: 0;
  animation: growHeight 0.3s linear 0.15s forwards;
}

.item3 {
  opacity: 0;
  animation: growHeight 0.3s linear 0.2s forwards;
}

.item4 {
  opacity: 0;
  animation: growHeight 0.3s linear 0.25s forwards;
}

.item5 {
  opacity: 0;
  animation: growHeight 0.3s linear 0.3s forwards;
}

.item6 {
  opacity: 0;
  animation: growHeight 0.3s linear 0.35s forwards;
}

.navi ul.nav li {
  display: block;
  position: relative;
}

.navi ul.nav li li a {
  padding-left: 55px;
}

.navi ul.nav li li ul {
  display: none;
}

.navi ul.nav li li.active > ul {
  display: block;
}

.navi ul.nav li a {
  font-weight: normal;
  text-transform: none;
  display: block;
  padding: 10px 20px;
  position: relative;
  -webkit-transition: background-color 0.2s ease-in-out 0s;
  transition: background-color 0.2s ease-in-out 0s;
}

.navi ul.nav li a .badge,
.navi ul.nav li a .label {
  font-size: 11px;
  padding: 2px 5px;
  margin-top: 2px;
}

.navi ul.nav li a > i {
  margin: -10px -10px;
  line-height: 40px;
  width: 40px;
  float: left;
  margin-right: 5px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.navi ul.nav li a > i:before {
  position: relative;
  z-index: 2;
}

@media (min-width: 768px) {
  .app-aside-folded .nav-sub-header {
    display: block !important;
  }

  .app-aside-folded .nav-sub-header a {
    padding: 15px 20px !important;
  }

  .app-aside-folded .navi > ul > li > a {
    position: relative;
    padding: 0;
    text-align: center;
    height: 50px;
    border: none;
  }

  .app-aside-folded .navi > ul > li > a span {
    display: none;
  }

  .app-aside-folded .navi > ul > li > a span.pull-right {
    display: none !important;
  }

  .app-aside-folded .navi > ul > li > a i {
    width: auto;
    float: none;
    display: block;
    font-size: 16px;
    margin: 0;
    line-height: 50px;
    border: none !important;
  }

  .app-aside-folded .navi > ul > li > a i b {
    left: 0 !important;
  }

  .app-aside-folded .navi > ul > li > a .badge,
  .app-aside-folded .navi > ul > li > a .label {
    position: absolute;
    right: 12px;
    top: 8px;
    z-index: 3;
  }

  .app-aside-folded .navi > ul > li > ul {
    height: 0 !important;
    position: absolute;
    left: 100%;
    top: 0 !important;
    z-index: 1050;
    width: 250px;
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }

  .app-aside-folded .navi li li a {
    padding-left: 20px !important;
  }

  .app-aside-folded.app-aside-fixed .app-aside > ul.nav {
    z-index: 1010;
    opacity: 1;
    height: auto;
    overflow: visible;
    overflow-y: auto;
    display: block;
    width: 310px;
    left: 80px;
    position: fixed;
    -webkit-overflow-scrolling: touch;
  }

  .app-aside-folded.app-aside-fixed .app-aside > ul.nav:before {
    content: "";
    width: 60px;
    height: 50px;
    position: absolute;
    left: -60px;
    top: 0;
  }

  .app-aside-folded.app-aside-fixed .app-aside > ul.nav a {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

.modal-scroll {
  max-height: 350px;
  overflow-y: auto;
}

@media (min-height: 500px) {
  .modal-scroll {
    max-height: 450px;
  }
}

@media (min-height: 800px) {
  .modal-scroll {
    max-height: 750px;
  }
}

@media (max-width: 767px) {
  .app {
    overflow-x: hidden;
  }

  .app-content {
    -webkit-transition: -webkit-transform 0.2s ease;
    -moz-transition: -moz-transform 0.2s ease;
    -o-transition: -o-transform 0.2s ease;
    transition: transform 0.2s ease;
  }

  .off-screen {
    position: absolute;
    top: 50px;
    bottom: 0;
    width: 75%;
    display: block !important;
    visibility: visible;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1010;
  }

  .off-screen + * {
    background-color: #f0f3f4;
    -webkit-transition: -webkit-transform 0.2s ease;
    -moz-transition: -moz-transform 0.2s ease;
    -o-transition: -o-transform 0.2s ease;
    transition: transform 0.2s ease;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(75%, 0px, 0px);
    transform: translate3d(75%, 0px, 0px);
    overflow: hidden;
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1015;
    padding-top: 50px;
  }

  .off-screen + * .off-screen-toggle {
    display: block !important;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1020;
  }

  .off-screen.pull-right {
    right: 0;
  }

  .off-screen.pull-right + * {
    -webkit-transform: translate3d(-75%, 0px, 0px);
    transform: translate3d(-75%, 0px, 0px);
  }
}

@media (min-width: 992px) {
  .app-aside-dock .app-content,
  .app-aside-dock .app-footer {
    margin-left: 0;
  }

  .app-aside-dock .app-aside-footer ~ div {
    padding-bottom: 0;
  }

  .app-aside-dock.app-aside-fixed.app-header-fixed {
    padding-top: 115px;
  }

  .app-aside-dock.app-aside-fixed .app-aside {
    position: fixed;
    top: 50px;
    width: 100%;
    z-index: 1000;
  }

  .app-aside-dock .app-aside,
  .app-aside-dock .aside-wrap,
  .app-aside-dock .navi-wrap {
    float: none;
    width: 100% !important;
    position: relative;
    top: 0;
    overflow: visible !important;
  }

  .app-aside-dock .navi-wrap > * {
    width: auto !important;
  }

  .app-aside-dock .app-aside {
    bottom: auto !important;
  }

  .app-aside-dock .app-aside.b-r {
    border-right-width: 0;
    border-bottom: 1px solid #dee5e7;
  }

  .app-aside-dock .app-aside:before {
    display: none;
  }

  .app-aside-dock .app-aside nav > .nav {
    float: left;
  }

  .app-aside-dock .app-aside .hidden-folded,
  .app-aside-dock .app-aside .line,
  .app-aside-dock .app-aside .navi-wrap > div {
    display: none !important;
  }

  .app-aside-dock .app-aside .navi > ul > li {
    position: relative;
    float: left;
    display: inline-block;
  }

  .app-aside-dock .app-aside .navi > ul > li > a {
    padding: 10px 15px 12px 15px;
    text-align: center;
    height: auto;
  }

  .app-aside-dock .app-aside .navi > ul > li > a > .badge,
  .app-aside-dock .app-aside .navi > ul > li > a > .label {
    position: absolute;
    top: 5px;
    right: 8px;
    padding: 1px 4px;
  }

  .app-aside-dock .app-aside .navi > ul > li > a > i {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -7px;
    margin-top: -10px;
    display: block;
    float: none;
    font-size: 14px;
    line-height: 40px;
    width: 40px;
  }

  .app-aside-dock .app-aside .navi > ul > li > a > span.pull-right {
    position: absolute;
    bottom: 2px;
    left: 50%;
    margin-left: -6px;
    display: block !important;
    line-height: 1;
  }

  .app-aside-dock .app-aside .navi > ul > li > a > span.pull-right i {
    line-height: 12px;
    width: 12px;
    font-size: 12px;
  }

  .app-aside-dock .app-aside .navi > ul > li > a > span.pull-right i.text {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    line-height: 14px;
  }

  .app-aside-dock .app-aside .navi > ul > li > a > span {
    font-weight: normal;
    display: block;
  }

  .app-aside-dock .app-aside .navi > ul > li .nav-sub {
    height: auto !important;
    display: none;
    position: absolute;
    left: 0;
    top: auto !important;
    z-index: 1050;
    width: 250px;
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }

  .app-aside-dock .app-aside .navi > ul > li .nav-sub-header {
    display: none !important;
  }

  .app-aside-dock .app-aside .navi li li a {
    padding-left: 15px;
  }

  .app-aside-dock .app-aside .navi li:hover > .nav-sub,
  .app-aside-dock .app-aside .navi li:focus > .nav-sub,
  .app-aside-dock .app-aside .navi li:active > .nav-sub {
    display: block;
    opacity: 1;
    margin-left: 0;
    height: auto !important;
    overflow: auto;
  }
}

.arrow {
  border-width: 9px;
  z-index: 10;
}

.arrow,
.arrow:after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.arrow:after {
  border-width: 8px;
  content: "";
}

.arrow.top {
  left: 50%;
  margin-left: -9px;
  border-top-width: 0;
  border-bottom-color: rgba(0, 0, 0, 0.1);
  top: -9px;
}

.arrow.top:after {
  top: 1px;
  margin-left: -8px;
  border-top-width: 0;
  border-bottom-color: #fff;
}

.arrow.top.arrow-primary:after {
  border-bottom-color: #0099FF;
}

.arrow.top.arrow-info:after {
  border-bottom-color: #40BBEA;
}

.arrow.top.arrow-success:after {
  border-bottom-color: #24c30c;
}

.arrow.top.arrow-danger:after {
  border-bottom-color: #ff646a;
}

.arrow.top.arrow-warning:after {
  border-bottom-color: #FFBA00;
}

.arrow.top.arrow-light:after {
  border-bottom-color: #edf1f2;
}

.arrow.top.arrow-dark:after {
  border-bottom-color: #3a3f51;
}

.arrow.top.arrow-black:after {
  border-bottom-color: #1c2b36;
}

.arrow.right {
  top: 50%;
  right: -9px;
  margin-top: -9px;
  border-right-width: 0;
  border-left-color: rgba(0, 0, 0, 0.1);
}

.arrow.right:after {
  right: 1px;
  bottom: -8px;
  border-right-width: 0;
  border-left-color: #fff;
}

.arrow.right.arrow-primary:after {
  border-left-color: #0099FF;
}

.arrow.right.arrow-info:after {
  border-left-color: #40BBEA;
}

.arrow.right.arrow-success:after {
  border-left-color: #24c30c;
}

.arrow.right.arrow-danger:after {
  border-left-color: #ff646a;
}

.arrow.right.arrow-warning:after {
  border-left-color: #FFBA00;
}

.arrow.right.arrow-light:after {
  border-left-color: #edf1f2;
}

.arrow.right.arrow-dark:after {
  border-left-color: #3a3f51;
}

.arrow.right.arrow-black:after {
  border-left-color: #1c2b36;
}

.arrow.bottom {
  left: 50%;
  bottom: -9px;
  margin-left: -9px;
  border-bottom-width: 0;
  border-top-color: rgba(0, 0, 0, 0.1);
}

.arrow.bottom:after {
  bottom: 1px;
  margin-left: -8px;
  border-bottom-width: 0;
  border-top-color: #fff;
}

.arrow.bottom.arrow-primary:after {
  border-top-color: #0099FF;
}

.arrow.bottom.arrow-info:after {
  border-top-color: #40BBEA;
}

.arrow.bottom.arrow-success:after {
  border-top-color: #24c30c;
}

.arrow.bottom.arrow-danger:after {
  border-top-color: #ff646a;
}

.arrow.bottom.arrow-warning:after {
  border-top-color: #FFBA00;
}

.arrow.bottom.arrow-light:after {
  border-top-color: #edf1f2;
}

.arrow.bottom.arrow-dark:after {
  border-top-color: #3a3f51;
}

.arrow.bottom.arrow-black:after {
  border-top-color: #1c2b36;
}

.arrow.left {
  top: 50%;
  left: -9px;
  margin-top: -9px;
  border-left-width: 0;
  border-right-color: rgba(0, 0, 0, 0.1);
}

.arrow.left:after {
  left: 1px;
  bottom: -8px;
  border-left-width: 0;
  border-right-color: #fff;
}

.arrow.left.arrow-primary:after {
  border-right-color: #0099FF;
}

.arrow.left.arrow-info:after {
  border-right-color: #40BBEA;
}

.arrow.left.arrow-success:after {
  border-right-color: #24c30c;
}

.arrow.left.arrow-danger:after {
  border-right-color: #ff646a;
}

.arrow.left.arrow-warning:after {
  border-right-color: #FFBA00;
}

.arrow.left.arrow-light:after {
  border-right-color: #edf1f2;
}

.arrow.left.arrow-dark:after {
  border-right-color: #3a3f51;
}

.arrow.left.arrow-black:after {
  border-right-color: #1c2b36;
}

.arrow.pull-left {
  left: 19px;
}

.arrow.pull-right {
  left: auto;
  right: 19px;
}

.arrow.pull-up {
  top: 19px;
}

.arrow.pull-down {
  top: auto;
  bottom: 19px;
}

.btn {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  font-weight: 500;
  border-radius: 2px;
  outline: 0!important;
  letter-spacing: 0.01em;
}

.btn-noborder {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  font-weight: 500;
  letter-spacing: 0.01em;
  border: none;
}

.btn-noshadow {
  box-shadow: none;
}

.btn-link {
  color: #58666e;
}

.btn-link.active {
  webkit-box-shadow: none;
  box-shadow: none;
}

.btn-default {
  color: #58666e !important;
  background-color: #fcfdfd;
  border-color: #dee5e7;
  background-color: #fff;
  border-bottom-color: #d8e1e3;
  -webkit-box-shadow: 0 1px 1px rgba(90, 90, 90, 0.1);
  box-shadow: 0 1px 1px rgba(90, 90, 90, 0.1);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
  color: #58666e !important;
  background-color: #edf1f2;
  border-color: #c7d3d6;
}

.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
  background-image: none;
}

.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
  background-color: #fcfdfd;
  border-color: #dee5e7;
}

.btn-default.btn-bg {
  border-color: rgba(0, 0, 0, 0.1);
  background-clip: padding-box;
}

.btn-primary {
  color: #fff !important;
  background-color: #0099FF;
  border-color: #0099FF;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  color: #fff !important;
  background-color: #008ae6;
  border-color: #0081d6;
}

.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  background-image: none;
}

.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
  background-color: #0099FF;
  border-color: #0099FF;
}

.btn-success {
  color: #fff !important;
  background-color: #24c30c;
  border-color: #24c30c;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
  color: #fff !important;
  background-color: #20ab0b;
  border-color: #1d9d0a;
}

.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
  background-image: none;
}

.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active {
  background-color: #24c30c;
  border-color: #24c30c;
}

.btn-info {
  color: #fff !important;
  background-color: #40BBEA;
  border-color: #40BBEA;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open .dropdown-toggle.btn-info {
  color: #fff !important;
  background-color: #29b3e7;
  border-color: #1baee6;
}

.btn-info:active,
.btn-info.active,
.open .dropdown-toggle.btn-info {
  background-image: none;
}

.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info,
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled:active,
.btn-info[disabled]:active,
fieldset[disabled] .btn-info:active,
.btn-info.disabled.active,
.btn-info[disabled].active,
fieldset[disabled] .btn-info.active {
  background-color: #40BBEA;
  border-color: #40BBEA;
}

.btn-warning {
  color: #fff !important;
  background-color: #FFBA00;
  border-color: #FFBA00;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.open .dropdown-toggle.btn-warning {
  color: #fff !important;
  background-color: #e6a700;
  border-color: #d69c00;
}

.btn-warning:active,
.btn-warning.active,
.open .dropdown-toggle.btn-warning {
  background-image: none;
}

.btn-warning.disabled,
.btn-warning[disabled],
fieldset[disabled] .btn-warning,
.btn-warning.disabled:hover,
.btn-warning[disabled]:hover,
fieldset[disabled] .btn-warning:hover,
.btn-warning.disabled:focus,
.btn-warning[disabled]:focus,
fieldset[disabled] .btn-warning:focus,
.btn-warning.disabled:active,
.btn-warning[disabled]:active,
fieldset[disabled] .btn-warning:active,
.btn-warning.disabled.active,
.btn-warning[disabled].active,
fieldset[disabled] .btn-warning.active {
  background-color: #FFBA00;
  border-color: #FFBA00;
}

.btn-danger {
  color: #fff !important;
  background-color: #ff646a;
  border-color: #ff646a;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.open .dropdown-toggle.btn-danger {
  color: #fff !important;
  background-color: #ff4a51;
  border-color: #ff3b43;
}

.btn-danger:active,
.btn-danger.active,
.open .dropdown-toggle.btn-danger {
  background-image: none;
}

.btn-danger.disabled,
.btn-danger[disabled],
fieldset[disabled] .btn-danger,
.btn-danger.disabled:hover,
.btn-danger[disabled]:hover,
fieldset[disabled] .btn-danger:hover,
.btn-danger.disabled:focus,
.btn-danger[disabled]:focus,
fieldset[disabled] .btn-danger:focus,
.btn-danger.disabled:active,
.btn-danger[disabled]:active,
fieldset[disabled] .btn-danger:active,
.btn-danger.disabled.active,
.btn-danger[disabled].active,
fieldset[disabled] .btn-danger.active {
  background-color: #ff646a;
  border-color: #ff646a;
}

.btn-dark {
  color: #fff !important;
  background-color: #3a3f51;
  border-color: #3a3f51;
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active,
.btn-dark.active,
.open .dropdown-toggle.btn-dark {
  color: #fff !important;
  background-color: #2f3342;
  border-color: #292d39;
}

.btn-dark:active,
.btn-dark.active,
.open .dropdown-toggle.btn-dark {
  background-image: none;
}

.btn-dark.disabled,
.btn-dark[disabled],
fieldset[disabled] .btn-dark,
.btn-dark.disabled:hover,
.btn-dark[disabled]:hover,
fieldset[disabled] .btn-dark:hover,
.btn-dark.disabled:focus,
.btn-dark[disabled]:focus,
fieldset[disabled] .btn-dark:focus,
.btn-dark.disabled:active,
.btn-dark[disabled]:active,
fieldset[disabled] .btn-dark:active,
.btn-dark.disabled.active,
.btn-dark[disabled].active,
fieldset[disabled] .btn-dark.active {
  background-color: #3a3f51;
  border-color: #3a3f51;
}

.btn-black {
  color: #fff !important;
  background-color: #1c2b36;
  border-color: #1c2b36;
}

.btn-black:hover,
.btn-black:focus,
.btn-black:active,
.btn-black.active,
.open .dropdown-toggle.btn-black {
  color: #fff !important;
  background-color: #131e25;
  border-color: #0e161b;
}

.btn-black:active,
.btn-black.active,
.open .dropdown-toggle.btn-black {
  background-image: none;
}

.btn-black.disabled,
.btn-black[disabled],
fieldset[disabled] .btn-black,
.btn-black.disabled:hover,
.btn-black[disabled]:hover,
fieldset[disabled] .btn-black:hover,
.btn-black.disabled:focus,
.btn-black[disabled]:focus,
fieldset[disabled] .btn-black:focus,
.btn-black.disabled:active,
.btn-black[disabled]:active,
fieldset[disabled] .btn-black:active,
.btn-black.disabled.active,
.btn-black[disabled].active,
fieldset[disabled] .btn-black.active {
  background-color: #1c2b36;
  border-color: #1c2b36;
}

.btn-icon {
  padding: 0 !important;
  text-align: center;
  width: 34px;
  height: 34px;
}

.btn-icon i {
  top: -1px;
  position: relative;
  line-height: 34px;
}

.btn-icon.btn-sm {
  width: 30px;
  height: 30px;
}

.btn-icon.btn-sm i {
  line-height: 30px;
}

.btn-icon.btn-lg {
  width: 45px;
  height: 45px;
}

.btn-icon.btn-lg i {
  line-height: 45px;
}

.btn-rounded {
  border-radius: 50px;
  padding-left: 15px;
  padding-right: 15px;
}

.btn-rounded.btn-lg {
  padding-left: 25px;
  padding-right: 25px;
}

.btn > i.pull-left,
.btn > i.pull-right {
  line-height: 1.42857143;
}

.btn-block {
  padding-left: 12px;
  padding-right: 12px;
}

.btn-group-vertical > .btn:first-child:not(:last-child) {
  border-top-right-radius: 2px;
}

.btn-group-vertical > .btn:last-child:not(:first-child) {
  border-bottom-left-radius: 2px;
}

.btn-addon i {
  margin: -7px -12px;
  margin-right: 12px;
  background-color: rgba(0, 0, 0, 0.1);
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  float: left;
  position: relative;
  border-radius: 2px 0 0 2px;
}

.btn-addon i.pull-right {
  margin-right: -12px;
  margin-left: 12px;
  border-radius: 0 2px 2px 0;
}

.btn-addon.btn-sm i {
  margin: -6px -10px;
  margin-right: 10px;
  width: 30px;
  height: 30px;
  line-height: 30px;
}

.btn-addon.btn-sm i.pull-right {
  margin-right: -10px;
  margin-left: 10px;
}

.btn-addon.btn-lg i {
  margin: -11px -16px;
  margin-right: 16px;
  width: 45px;
  height: 45px;
  line-height: 45px;
}

.btn-addon.btn-lg i.pull-right {
  margin-right: -16px;
  margin-left: 16px;
}

.btn-addon.btn-default i {
  background-color: transparent;
  border-right: 1px solid #dee5e7;
}

.btn-groups .btn {
  margin-bottom: 5px;
}

.list-icon i {
  font-size: 14px;
  width: 40px;
  vertical-align: middle;
  margin: 0;
  display: inline-block;
  text-align: center;
  -webkit-transition: font-size 0.2s;
  transition: font-size 0.2s;
}

.list-icon div {
  line-height: 40px;
  white-space: nowrap;
}

.list-icon div:hover i {
  font-size: 26px;
}

.settings {
  z-index: 1050;
  position: fixed;
  top: 120px;
  right: -240px;
  width: 240px;
  -webkit-transition: right 0.2s;
  transition: right 0.2s;
}

.settings.active {
  right: -1px;
}

.settings > .btn {
  background: #f6f8f8 !important;
  border-right-width: 0;
  border-color: #dee5e7;
  position: absolute;
  left: -42px;
  top: -1px;
  padding: 10px 15px;
}

.settings .i-checks span b {
  width: 50%;
  height: 20px;
  display: inline-block;
  float: left;
}

.settings .i-checks span b.header {
  height: 10px;
}

.streamline {
  position: relative;
  border-color: #dee5e7;
}

.streamline .sl-item:after,
.streamline:after {
  content: '';
  position: absolute;
  background-color: #fff;
  border-color: inherit;
  border-width: 1px;
  border-style: solid;
  border-radius: 10px;
  width: 9px;
  height: 9px;
  margin-left: -5px;
  bottom: 0;
  left: 0;
}

.sl-item {
  border-color: #dee5e7;
  position: relative;
  padding-bottom: 1px;
}

.sl-item:before,
.sl-item:after {
  content: " ";
  display: table;
}

.sl-item:after {
  clear: both;
}

.sl-item:after {
  top: 6px;
  bottom: auto;
}

.sl-item.b-l {
  margin-left: -1px;
}

.timeline {
  margin: 0;
  padding: 0;
}

.tl-item {
  display: block;
}

.tl-item:before,
.tl-item:after {
  content: " ";
  display: table;
}

.tl-item:after {
  clear: both;
}

.visible-left {
  display: none;
}

.tl-wrap {
  display: block;
  margin-left: 6em;
  padding: 15px 0 15px 20px;
  border-style: solid;
  border-color: #dee5e7;
  border-width: 0 0 0 4px;
}

.tl-wrap:before,
.tl-wrap:after {
  content: " ";
  display: table;
}

.tl-wrap:after {
  clear: both;
}

.tl-wrap:before {
  position: relative;
  content: "";
  float: left;
  top: 15px;
  margin-left: -27px;
  width: 10px;
  height: 10px;
  border-color: inherit;
  border-width: 3px;
  border-radius: 50%;
  border-style: solid;
  background: #edf1f2;
  box-shadow: 0 0 0 4px #f0f3f4;
}

.tl-wrap:hover:before {
  background: transparent;
  border-color: #fff;
}

.tl-date {
  position: relative;
  top: 10px;
  float: left;
  margin-left: -7.5em;
  display: block;
  width: 4.5em;
  text-align: right;
}

.tl-content {
  display: inline-block;
  position: relative;
  padding-top: 10px;
  padding-bottom: 10px;
}

.tl-content.block {
  display: block;
  width: 100%;
}

.tl-content.panel {
  margin-bottom: 0;
}

.tl-header {
  display: block;
  width: 12em;
  text-align: center;
  margin-left: 2px;
}

.timeline-center .tl-item {
  margin-left: 50%;
}

.timeline-center .tl-item .tl-wrap {
  margin-left: -2px;
}

.timeline-center .tl-header {
  width: auto;
  margin: 0;
}

.timeline-center .tl-left {
  margin-left: 0;
  margin-right: 50%;
}

.timeline-center .tl-left .hidden-left {
  display: none !important;
}

.timeline-center .tl-left .visible-left {
  display: inherit;
}

.timeline-center .tl-left .tl-wrap {
  float: right;
  margin-right: -2px;
  border-left-width: 0;
  border-right-width: 4px;
  padding-left: 0;
  padding-right: 20px;
}

.timeline-center .tl-left .tl-wrap:before {
  float: right;
  margin-left: 0;
  margin-right: -27px;
}

.timeline-center .tl-left .tl-date {
  float: right;
  margin-left: 0;
  margin-right: -8.5em;
  text-align: left;
}

.i-switch {
  cursor: pointer;
  position: relative;
  display: inline-block;
  width: 35px;
  height: 20px;
  border-radius: 30px;
  background-color: #24c30c;
  margin: 0;
}

.i-switch input {
  position: absolute;
  opacity: 0;
  filter: alpha(opacity=0);
}

.i-switch input:checked + i:before {
  top: 50%;
  bottom: 50%;
  left: 50%;
  right: 5px;
  border-width: 0;
  border-radius: 5px;
}

.i-switch input:checked + i:after {
  margin-left: 16px;
}

.i-switch i:before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  right: -1px;
  background-color: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 30px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.i-switch i:after {
  content: "";
  position: absolute;
  background-color: #fff;
  width: 18px;
  top: 1px;
  bottom: 1px;
  border-radius: 50%;
  -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
  -webkit-transition: margin-left 0.3s;
  transition: margin-left 0.3s;
}

.i-switch-md {
  width: 40px;
  height: 24px;
}

.i-switch-md input:checked + i:after {
  margin-left: 17px;
}

.i-switch-md i:after {
  width: 22px;
}

.i-switch-lg {
  width: 50px;
  height: 30px;
}

.i-switch-lg input:checked + i:after {
  margin-left: 21px;
}

.i-switch-lg i:after {
  width: 28px;
}

.i-checks {
  padding-left: 20px;
  cursor: pointer;
}

.i-checks input {
  opacity: 0;
  position: absolute;
  margin-left: -20px;
}

.i-checks input:checked + i {
  border-color: #40BBEA;
}

.i-checks input:checked + i:before {
  left: 4px;
  top: 4px;
  width: 10px;
  height: 10px;
  background-color: #40BBEA;
}

.i-checks input:checked + span .active {
  display: inherit;
}

.i-checks input[type="radio"] + i,
.i-checks input[type="radio"] + i:before {
  border-radius: 50%;
}

.i-checks input[disabled] + i,
fieldset[disabled] .i-checks input + i {
  border-color: #dee5e7;
}

.i-checks input[disabled] + i:before,
fieldset[disabled] .i-checks input + i:before {
  background-color: #dee5e7;
}

.i-checks > i {
  width: 20px;
  height: 20px;
  line-height: 1;
  border: 1px solid #cfdadd;
  background-color: #fff;
  margin-left: -20px;
  margin-top: -2px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
  position: relative;
}

.i-checks > i:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0px;
  height: 0px;
  background-color: transparent;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.i-checks > span {
  margin-left: -20px;
}

.i-checks > span .active {
  display: none;
}

.i-checks-sm input:checked + i:before {
  left: 3px;
  top: 3px;
  width: 8px;
  height: 8px;
}

.i-checks-sm > i {
  width: 16px;
  height: 16px;
  margin-left: -18px;
  margin-right: 6px;
}

.i-checks-lg input:checked + i:before {
  left: 8px;
  top: 8px;
  width: 12px;
  height: 12px;
}

.i-checks-lg > i {
  width: 30px;
  height: 30px;
}

.datepicker {
  margin: 0 5px;
}

.datepicker .btn-default {
  border-width: 0;
  box-shadow: none;
}

.datepicker .btn[disabled] {
  opacity: 0.4;
}

.datepicker .btn-info .text-info {
  color: #fff !important;
}

/*Charts*/

.jqstooltip {
  background-color: rgba(0, 0, 0, 0.8) !important;
  border: solid 1px #000 !important;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  padding: 5px 10px !important;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.easyPieChart {
  position: relative;
  text-align: center;
}

.easyPieChart > div {
  position: relative;
  z-index: 1;
}

.easyPieChart > div .text {
  position: absolute;
  width: 100%;
  top: 60%;
  line-height: 1;
}

.easyPieChart > div img {
  margin-top: -4px;
}

.easyPieChart canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

#flotTip {
  padding: 4px 10px;
  background-color: rgba(0, 0, 0, 0.8);
  border: solid 1px #000 !important;
  z-index: 100;
  font-size: 12px;
  color: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.legendColorBox > div {
  border: none !important;
  margin: 5px;
}

.legendColorBox > div > div {
  border-radius: 10px;
}

.sortable-placeholder {
  list-style: none;
  border: 1px dashed #CCC;
  min-height: 50px;
  margin-bottom: 5px;
}

.panel .dataTables_wrapper {
  padding-top: 10px;
}

.panel .dataTables_wrapper > .row {
  margin: 0;
}

.panel .dataTables_wrapper > .row > .col-sm-12 {
  padding: 0;
}

.st-sort-ascent:before {
  content: '\25B2';
}

.st-sort-descent:before {
  content: '\25BC';
}

.st-selected td {
  background: #f0f9ec !important;
}

.chosen-choices,
.chosen-single,
.bootstrap-tagsinput {
  border-radius: 2px !important;
  border-color: #cfdadd !important;
}

.bootstrap-tagsinput {
  padding: 5px 12px !important;
}

.item {
  position: relative;
}

.item .top {
  position: absolute;
  top: 0;
  left: 0;
}

.item .bottom {
  position: absolute;
  bottom: 0;
  left: 0;
}

.item .center {
  position: absolute;
  top: 50%;
}

.item-overlay {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.item-overlay.active,
.item:hover .item-overlay {
  display: block;
}

.form-validation .form-control.ng-dirty.ng-invalid {
  border-color: #ff646a;
}

.form-validation .form-control.ng-dirty.ng-valid,
.form-validation .form-control.ng-dirty.ng-valid:focus {
  border-color: #24c30c;
}

.form-validation .i-checks .ng-invalid.ng-dirty + i {
  border-color: #ff646a;
}

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

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

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

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

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

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

.fadeInUpShort {
  -webkit-animation-name: fadeInUpShort;
  -moz-animation-name: fadeInUpShort;
  -o-animation-name: fadeInUpShort;
  animation-name: fadeInUpShort;
}

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

  80% {
    opacity: 0.7;
  }

  100% {
    opacity: 0;
  }
}

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

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

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

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

.ng-animate .bg-auto:before {
  display: none;
}

[ui-view].ng-leave {
  display: none;
}

[ui-view].ng-leave.smooth {
  display: block;
}

.smooth.ng-animate {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.smooth-r.ng-animate {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.fade-in-right-big.ng-enter {
  -webkit-animation: fadeInRightBig 0.5s;
  animation: fadeInRightBig 0.5s;
}

.fade-in-right-big.ng-leave {
  -webkit-animation: fadeOutLeftBig 0.5s;
  animation: fadeOutLeftBig 0.5s;
}

.fade-in-left-big.ng-enter {
  -webkit-animation: fadeInLeftBig 0.5s;
  animation: fadeInLeftBig 0.5s;
}

.fade-in-left-big.ng-leave {
  -webkit-animation: fadeOutRightBig 0.5s;
  animation: fadeOutRightBig 0.5s;
}

.fade-in-up-big.ng-enter {
  -webkit-animation: fadeInUpBig 0.5s;
  animation: fadeInUpBig 0.5s;
}

.fade-in-up-big.ng-leave {
  -webkit-animation: fadeOutUpBig 0.5s;
  animation: fadeOutUpBig 0.5s;
}

.fade-in-down-big.ng-enter {
  -webkit-animation: fadeInDownBig 0.5s;
  animation: fadeInDownBig 0.5s;
}

.fade-in-down-big.ng-leave {
  -webkit-animation: fadeOutDownBig 0.5s;
  animation: fadeOutDownBig 0.5s;
}

.fade-in.ng-enter {
  -webkit-animation: fadeIn 0.5s;
  animation: fadeIn 0.5s;
}

.fade-in.ng-leave {
  -webkit-animation: fadeOut 0.5s;
  animation: fadeOut 0.5s;
}

.fade-in-right.ng-enter {
  -moz-animation: none;
  -o-animation: none;
  -webkit-animation: none;
  animation: none;
}

.fade-in-right.ng-leave {
  -webkit-animation: lightSpeedOut 0.5s;
  animation: lightSpeedOut 0.5s;
}

.fade-in-left.ng-enter {
  -webkit-animation: fadeInLeft 0.5s;
  animation: fadeInLeft 0.5s;
}

.fade-in-left.ng-leave {
  -webkit-animation: fadeOutRight 0.5s;
  animation: fadeOutRight 0.5s;
}

.fade-in-up.ng-enter {
  -webkit-animation: fadeInUpShort 0.5s;
  animation: fadeInUpShort 0.5s;
}

.fade-in-up.ng-leave {
  -webkit-animation: fadeOutUpShort 0.5s;
  animation: fadeOutUpShort 0.5s;
}

.fade-in-down.ng-enter {
  -webkit-animation: fadeInDown 0.5s;
  animation: fadeInDown 0.5s;
}

.fade-in-down.ng-leave {
  -webkit-animation: fadeOutDown 0.5s;
  animation: fadeOutDown 0.5s;
}

.slide {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.slide.ng-enter,
.slide.ng-leave {
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.slide.ng-enter {
  left: 100%;
}

.slide.ng-enter-active {
  left: 0;
}

.slide.ng-leave {
  left: 0;
  width: 100%;
}

.slide.ng-leave-active {
  left: 0;
  width: 0;
}

.slide-pop {
  width: 100%;
  height: 100%;
}

.slide-pop.ng-enter,
.slide-pop.ng-leave {
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
}

.slide-pop.ng-enter {
  opacity: 0;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
}

.slide-pop.ng-enter-active {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.slide-pop.ng-leave {
  opacity: 0.8;
}

.slide-pop.ng-leave-active {
  opacity: 0;
}

.rotate {
  animation-duration: 1s;
}

.ng-leave.rotate {
  animation-name: rotate-leave;
}

.ng-enter.rotate {
  animation-name: rotate-enter;
}

@keyframes rotate-leave {
  0% {
    transform-origin: center center;
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    transform-origin: center center;
    transform: rotate(-180deg);
    opacity: 0;
  }
}

@keyframes rotate-enter {
  0% {
    transform-origin: center center;
    transform: rotate(-180deg);
    opacity: 0;
  }

  100% {
    transform-origin: center center;
    transform: rotate(-360deg);
    opacity: 1;
  }
}

.pop.ng-enter,
.pop.ng-leave {
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}

.pop.ng-enter {
  -webkit-transform: scale(0);
  transform: scale(0);
}

.pop.ng-enter-active,
.pop.ng-leave,
.pop.ng-leave-active {
  -webkit-transform: scale(1);
  transform: scale(1);
}

.pop.ng-leave-active {
  opacity: 0;
}

.modal-content {
  position: relative;
  background-color: #edf1f2;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  outline: 0;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
}

.modal-content.lt,
.modal-content .lt {
  background-color: #f3f5f6;
}

.modal-content.lter,
.modal-content .lter {
  background-color: #f6f8f8;
}

.modal-content.dk,
.modal-content .dk {
  background-color: #e4eaec;
}

.modal-content.dker,
.modal-content .dker {
  background-color: #dde6e9;
}

.modal-content.bg,
.modal-content .bg {
  background-color: #edf1f2;
}

.editable-wrap {
  display: inline-block;
  white-space: nowrap;
  margin: 0px;
  width: 100%;
}

.bg-gd {
  background-image: -webkit-gradient(linear, left 0, left 100%, from(rgba(40, 50, 60, 0)), to(rgba(40, 50, 60, 0.075)));
  background-image: -webkit-linear-gradient(top, rgba(40, 50, 60, 0), 0, rgba(40, 50, 60, 0.075), 100%);
  background-image: -moz-linear-gradient(top, rgba(40, 50, 60, 0) 0, rgba(40, 50, 60, 0.075) 100%);
  background-image: linear-gradient(to bottom, rgba(40, 50, 60, 0) 0, rgba(40, 50, 60, 0.075) 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0028323c', endColorstr='#1328323c', GradientType=0);
  filter: none;
}

.bg-gd-dk {
  background-image: -webkit-gradient(linear, left 10%, left 100%, from(rgba(40, 50, 60, 0)), to(rgba(40, 50, 60, 0.5)));
  background-image: -webkit-linear-gradient(top, rgba(40, 50, 60, 0), 10%, rgba(40, 50, 60, 0.5), 100%);
  background-image: -moz-linear-gradient(top, rgba(40, 50, 60, 0) 10%, rgba(40, 50, 60, 0.5) 100%);
  background-image: linear-gradient(to bottom, rgba(40, 50, 60, 0) 10%, rgba(40, 50, 60, 0.5) 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0028323c', endColorstr='#8028323c', GradientType=0);
  filter: none;
}

.bg-light {
  background-color: #edf1f2;
  color: #58666e;
}

.bg-light.lt,
.bg-light .lt {
  background-color: #f3f5f6;
}

.bg-light.lter,
.bg-light .lter {
  background-color: #f6f8f8;
}

.bg-light.dk,
.bg-light .dk {
  background-color: #e4eaec;
}

.bg-light.dker,
.bg-light .dker {
  background-color: #dde6e9;
}

.bg-light.bg,
.bg-light .bg {
  background-color: #edf1f2;
}

.bg-dark {
  background-color: #3a3f51;
  color: #a6a8b1;
}

.bg-dark.lt,
.bg-dark .lt {
  background-color: #474c5e;
}

.bg-dark.lter,
.bg-dark .lter {
  background-color: #54596a;
}

.bg-dark.dk,
.bg-dark .dk {
  background-color: #2e3344;
}

.bg-dark.dker,
.bg-dark .dker {
  background-color: #232735;
}

.bg-dark.bg,
.bg-dark .bg {
  background-color: #3a3f51;
}

.bg-dark a {
  color: #c1c3c9;
}

.bg-dark a:hover {
  color: #fff;
}

.bg-dark a.list-group-item:hover,
.bg-dark a.list-group-item:focus {
  background-color: inherit;
}

.bg-dark .nav > li:hover > a,
.bg-dark .nav > li:focus > a,
.bg-dark .nav > li.active > a {
  color: #fff;
  background-color: #2e3344;
}

.bg-dark .nav > li > a {
  color: #b4b6bd;
}

.bg-dark .nav > li > a:hover,
.bg-dark .nav > li > a:focus {
  background-color: #32374a;
}

.bg-dark .nav .open > a {
  background-color: #2e3344;
}

.bg-dark .caret {
  border-top-color: #a6a8b1;
  border-bottom-color: #a6a8b1;
}

.bg-dark.navbar .nav > li.active > a {
  color: #fff;
  background-color: #2e3344;
}

.bg-dark .open > a,
.bg-dark .open > a:hover,
.bg-dark .open > a:focus {
  color: #fff;
}

.bg-dark .text-muted {
  color: #8b8e99 !important;
}

.bg-dark .text-lt {
  color: #eaebed !important;
}

.bg-dark.auto .list-group-item,
.bg-dark .auto .list-group-item {
  border-color: #2f3342 !important;
  background-color: transparent;
}

.bg-dark.auto .list-group-item:hover,
.bg-dark .auto .list-group-item:hover,
.bg-dark.auto .list-group-item:focus,
.bg-dark .auto .list-group-item:focus,
.bg-dark.auto .list-group-item:active,
.bg-dark .auto .list-group-item:active,
.bg-dark.auto .list-group-item.active,
.bg-dark .auto .list-group-item.active {
  background-color: #2e3344 !important;
}

.bg-black {
  background-color: #1c2b36;
  color: #7793a7;
}

.bg-black.lt,
.bg-black .lt {
  background-color: #263845;
}

.bg-black.lter,
.bg-black .lter {
  background-color: #314554;
}

.bg-black.dk,
.bg-black .dk {
  background-color: #131e26;
}

.bg-black.dker,
.bg-black .dker {
  background-color: #0a1015;
}

.bg-black.bg,
.bg-black .bg {
  background-color: #1c2b36;
}

.bg-black a {
  color: #96abbb;
}

.bg-black a:hover {
  color: #fff;
}

.bg-black a.list-group-item:hover,
.bg-black a.list-group-item:focus {
  background-color: inherit;
}

.bg-black .nav > li:hover > a,
.bg-black .nav > li:focus > a,
.bg-black .nav > li.active > a {
  color: #fff;
  background-color: #131e26;
}

.bg-black .nav > li > a {
  color: #869fb1;
}

.bg-black .nav > li > a:hover,
.bg-black .nav > li > a:focus {
  background-color: #16232d;
}

.bg-black .nav .open > a {
  background-color: #131e26;
}

.bg-black .caret {
  border-top-color: #7793a7;
  border-bottom-color: #7793a7;
}

.bg-black.navbar .nav > li.active > a {
  color: #fff;
  background-color: #131e26;
}

.bg-black .open > a,
.bg-black .open > a:hover,
.bg-black .open > a:focus {
  color: #fff;
}

.bg-black .text-muted {
  color: #5c798f !important;
}

.bg-black .text-lt {
  color: #c4d0d9 !important;
}

.bg-black.auto .list-group-item,
.bg-black .auto .list-group-item {
  border-color: #131e25 !important;
  background-color: transparent;
}

.bg-black.auto .list-group-item:hover,
.bg-black .auto .list-group-item:hover,
.bg-black.auto .list-group-item:focus,
.bg-black .auto .list-group-item:focus,
.bg-black.auto .list-group-item:active,
.bg-black .auto .list-group-item:active,
.bg-black.auto .list-group-item.active,
.bg-black .auto .list-group-item.active {
  background-color: #131e26 !important;
}

.bg-primary {
  background-color: #0099FF;
  color: #cfeafc;
}

.bg-primary.lt,
.bg-primary .lt {
  background-color: #1ca3fc;
}

.bg-primary.lter,
.bg-primary .lter {
  background-color: #38acfa;
}

.bg-primary.dk,
.bg-primary .dk {
  background-color: #008ae6;
}

.bg-primary.dker,
.bg-primary .dker {
  background-color: #007acc;
}

.bg-primary.bg,
.bg-primary .bg {
  background-color: #0099FF;
}

.bg-primary a {
  color: #ffffff;
}

.bg-primary a:hover {
  color: #fff;
}

.bg-primary a.list-group-item:hover,
.bg-primary a.list-group-item:focus {
  background-color: inherit;
}

.bg-primary .nav > li:hover > a,
.bg-primary .nav > li:focus > a,
.bg-primary .nav > li.active > a {
  color: #fff;
  background-color: #008ae6;
}

.bg-primary .nav > li > a {
  color: #f2f2f2;
}

.bg-primary .nav > li > a:hover,
.bg-primary .nav > li > a:focus {
  background-color: #0090f0;
}

.bg-primary .nav .open > a {
  background-color: #008ae6;
}

.bg-primary .caret {
  border-top-color: #cfeafc;
  border-bottom-color: #cfeafc;
}

.bg-primary.navbar .nav > li.active > a {
  color: #fff;
  background-color: #008ae6;
}

.bg-primary .open > a,
.bg-primary .open > a:hover,
.bg-primary .open > a:focus {
  color: #fff;
}

.bg-primary .text-muted {
  color: #9ed5fa !important;
}

.bg-primary .text-lt {
  color: #ffffff !important;
}

.bg-primary.auto .list-group-item,
.bg-primary .auto .list-group-item {
  border-color: #008ae6 !important;
  background-color: transparent;
}

.bg-primary.auto .list-group-item:hover,
.bg-primary .auto .list-group-item:hover,
.bg-primary.auto .list-group-item:focus,
.bg-primary .auto .list-group-item:focus,
.bg-primary.auto .list-group-item:active,
.bg-primary .auto .list-group-item:active,
.bg-primary.auto .list-group-item.active,
.bg-primary .auto .list-group-item.active {
  background-color: #008ae6 !important;
}

.bg-success {
  background-color: #24c30c;
  color: #b1f4a7;
}

.bg-success.lt,
.bg-success .lt {
  background-color: #2bd810;
}

.bg-success.lter,
.bg-success .lter {
  background-color: #33ea18;
}

.bg-success.dk,
.bg-success .dk {
  background-color: #1ead08;
}

.bg-success.dker,
.bg-success .dker {
  background-color: #189705;
}

.bg-success.bg,
.bg-success .bg {
  background-color: #24c30c;
}

.bg-success a {
  color: #d9fad4;
}

.bg-success a:hover {
  color: #fff;
}

.bg-success a.list-group-item:hover,
.bg-success a.list-group-item:focus {
  background-color: inherit;
}

.bg-success .nav > li:hover > a,
.bg-success .nav > li:focus > a,
.bg-success .nav > li.active > a {
  color: #fff;
  background-color: #1ead08;
}

.bg-success .nav > li > a {
  color: #c5f7bd;
}

.bg-success .nav > li > a:hover,
.bg-success .nav > li > a:focus {
  background-color: #20b709;
}

.bg-success .nav .open > a {
  background-color: #1ead08;
}

.bg-success .caret {
  border-top-color: #b1f4a7;
  border-bottom-color: #b1f4a7;
}

.bg-success.navbar .nav > li.active > a {
  color: #fff;
  background-color: #1ead08;
}

.bg-success .open > a,
.bg-success .open > a:hover,
.bg-success .open > a:focus {
  color: #fff;
}

.bg-success .text-muted {
  color: #89ef79 !important;
}

.bg-success .text-lt {
  color: #ffffff !important;
}

.bg-success.auto .list-group-item,
.bg-success .auto .list-group-item {
  border-color: #20ab0b !important;
  background-color: transparent;
}

.bg-success.auto .list-group-item:hover,
.bg-success .auto .list-group-item:hover,
.bg-success.auto .list-group-item:focus,
.bg-success .auto .list-group-item:focus,
.bg-success.auto .list-group-item:active,
.bg-success .auto .list-group-item:active,
.bg-success.auto .list-group-item.active,
.bg-success .auto .list-group-item.active {
  background-color: #1ead08 !important;
}

.bg-info {
  background-color: #40BBEA;
  color: #f8fcfe;
}

.bg-info.lt,
.bg-info .lt {
  background-color: #59c2ea;
}

.bg-info.lter,
.bg-info .lter {
  background-color: #72caeb;
}

.bg-info.dk,
.bg-info .dk {
  background-color: #26b4ea;
}

.bg-info.dker,
.bg-info .dker {
  background-color: #12abe5;
}

.bg-info.bg,
.bg-info .bg {
  background-color: #40BBEA;
}

.bg-info a {
  color: #ffffff;
}

.bg-info a:hover {
  color: #fff;
}

.bg-info a.list-group-item:hover,
.bg-info a.list-group-item:focus {
  background-color: inherit;
}

.bg-info .nav > li:hover > a,
.bg-info .nav > li:focus > a,
.bg-info .nav > li.active > a {
  color: #fff;
  background-color: #26b4ea;
}

.bg-info .nav > li > a {
  color: #f2f2f2;
}

.bg-info .nav > li > a:hover,
.bg-info .nav > li > a:focus {
  background-color: #2fb7eb;
}

.bg-info .nav .open > a {
  background-color: #26b4ea;
}

.bg-info .caret {
  border-top-color: #f8fcfe;
  border-bottom-color: #f8fcfe;
}

.bg-info.navbar .nav > li.active > a {
  color: #fff;
  background-color: #26b4ea;
}

.bg-info .open > a,
.bg-info .open > a:hover,
.bg-info .open > a:focus {
  color: #fff;
}

.bg-info .text-muted {
  color: #cdebf6 !important;
}

.bg-info .text-lt {
  color: #ffffff !important;
}

.bg-info.auto .list-group-item,
.bg-info .auto .list-group-item {
  border-color: #29b3e7 !important;
  background-color: transparent;
}

.bg-info.auto .list-group-item:hover,
.bg-info .auto .list-group-item:hover,
.bg-info.auto .list-group-item:focus,
.bg-info .auto .list-group-item:focus,
.bg-info.auto .list-group-item:active,
.bg-info .auto .list-group-item:active,
.bg-info.auto .list-group-item.active,
.bg-info .auto .list-group-item.active {
  background-color: #26b4ea !important;
}

.bg-warning {
  background-color: #FFBA00;
  color: #fcf0cf;
}

.bg-warning.lt,
.bg-warning .lt {
  background-color: #fcc01c;
}

.bg-warning.lter,
.bg-warning .lter {
  background-color: #fac538;
}

.bg-warning.dk,
.bg-warning .dk {
  background-color: #e6a700;
}

.bg-warning.dker,
.bg-warning .dker {
  background-color: #cc9500;
}

.bg-warning.bg,
.bg-warning .bg {
  background-color: #FFBA00;
}

.bg-warning a {
  color: #ffffff;
}

.bg-warning a:hover {
  color: #fff;
}

.bg-warning a.list-group-item:hover,
.bg-warning a.list-group-item:focus {
  background-color: inherit;
}

.bg-warning .nav > li:hover > a,
.bg-warning .nav > li:focus > a,
.bg-warning .nav > li.active > a {
  color: #fff;
  background-color: #e6a700;
}

.bg-warning .nav > li > a {
  color: #f2f2f2;
}

.bg-warning .nav > li > a:hover,
.bg-warning .nav > li > a:focus {
  background-color: #f0af00;
}

.bg-warning .nav .open > a {
  background-color: #e6a700;
}

.bg-warning .caret {
  border-top-color: #fcf0cf;
  border-bottom-color: #fcf0cf;
}

.bg-warning.navbar .nav > li.active > a {
  color: #fff;
  background-color: #e6a700;
}

.bg-warning .open > a,
.bg-warning .open > a:hover,
.bg-warning .open > a:focus {
  color: #fff;
}

.bg-warning .text-muted {
  color: #fae19e !important;
}

.bg-warning .text-lt {
  color: #ffffff !important;
}

.bg-warning.auto .list-group-item,
.bg-warning .auto .list-group-item {
  border-color: #e6a700 !important;
  background-color: transparent;
}

.bg-warning.auto .list-group-item:hover,
.bg-warning .auto .list-group-item:hover,
.bg-warning.auto .list-group-item:focus,
.bg-warning .auto .list-group-item:focus,
.bg-warning.auto .list-group-item:active,
.bg-warning .auto .list-group-item:active,
.bg-warning.auto .list-group-item.active,
.bg-warning .auto .list-group-item.active {
  background-color: #e6a700 !important;
}

.bg-xone {
  background-color: #00acd7;
  color: #ffffff;
}

.bg-xonedker {
  background-color: #00396f;
  color: #ffffff;
}

.bg-danger {
  background-color: #ff646a;
  color: #ffffff;
}

.bg-danger.lt,
.bg-danger .lt {
  background-color: #fd7f84;
}

.bg-danger.lter,
.bg-danger .lter {
  background-color: #fc9a9d;
}

.bg-danger.dk,
.bg-danger .dk {
  background-color: #ff4a51;
}

.bg-danger.dker,
.bg-danger .dker {
  background-color: #ff3139;
}

.bg-danger.bg,
.bg-danger .bg {
  background-color: #ff646a;
}

.bg-danger a {
  color: #ffffff;
}

.bg-danger a:hover {
  color: #fff;
}

.bg-danger a.list-group-item:hover,
.bg-danger a.list-group-item:focus {
  background-color: inherit;
}

.bg-danger .nav > li:hover > a,
.bg-danger .nav > li:focus > a,
.bg-danger .nav > li.active > a {
  color: #fff;
  background-color: #ff4a51;
}

.bg-danger .nav > li > a {
  color: #f2f2f2;
}

.bg-danger .nav > li > a:hover,
.bg-danger .nav > li > a:focus {
  background-color: #ff555b;
}

.bg-danger .nav .open > a {
  background-color: #ff4a51;
}

.bg-danger .caret {
  border-top-color: #ffffff;
  border-bottom-color: #ffffff;
}

.bg-danger.navbar .nav > li.active > a {
  color: #fff;
  background-color: #ff4a51;
}

.bg-danger .open > a,
.bg-danger .open > a:hover,
.bg-danger .open > a:focus {
  color: #fff;
}

.bg-danger .text-muted {
  color: #e6e6e6 !important;
}

.bg-danger .text-lt {
  color: #ffffff !important;
}

.bg-danger.auto .list-group-item,
.bg-danger .auto .list-group-item {
  border-color: #ff4a51 !important;
  background-color: transparent;
}

.bg-danger.auto .list-group-item:hover,
.bg-danger .auto .list-group-item:hover,
.bg-danger.auto .list-group-item:focus,
.bg-danger .auto .list-group-item:focus,
.bg-danger.auto .list-group-item:active,
.bg-danger .auto .list-group-item:active,
.bg-danger.auto .list-group-item.active,
.bg-danger .auto .list-group-item.active {
  background-color: #ff4a51 !important;
}

.bg-white {
  background-color: #fff;
  color: #58666e;
}

.bg-white a {
  color: #363f44;
}

.bg-white a:hover {
  color: #1f2427;
}

.bg-white .text-muted {
  color: #98a6ad !important;
}

.bg-white .lt,
.bg-white .lter,
.bg-white .dk,
.bg-white .dker {
  background-color: #fff;
}

.bg-white-only {
  background-color: #fff;
}

.bg-white-opacity {
  background-color: rgba(255, 255, 255, 0.5);
}

.bg-black-opacity {
  background-color: rgba(32, 43, 54, 0.5);
}

a.bg-light:hover {
  color: #363f44;
}

a.bg-primary:hover {
  background-color: #008ae6;
}

a.text-primary:hover {
  color: #008ae6;
}

.text-primary {
  color: #0099FF;
}

.text-primary-lt {
  color: #1aa3ff;
}

.text-primary-lter {
  color: #33adff;
}

.text-primary-dk {
  color: #008ae6;
}

.text-primary-dker {
  color: #007acc;
}

a.bg-info:hover {
  background-color: #29b3e7;
}

a.text-info:hover {
  color: #29b3e7;
}

.text-info {
  color: #40BBEA;
}

.text-info-lt {
  color: #57c3ed;
}

.text-info-lter {
  color: #6ecbef;
}

.text-info-dk {
  color: #29b3e7;
}

.text-info-dker {
  color: #18a8df;
}

a.bg-success:hover {
  background-color: #20ab0b;
}

a.text-success:hover {
  color: #20ab0b;
}

.text-success {
  color: #24c30c;
}

.text-success-lt {
  color: #28db0d;
}

.text-success-lter {
  color: #2ff012;
}

.text-success-dk {
  color: #20ab0b;
}

.text-success-dker {
  color: #1b9309;
}

a.bg-warning:hover {
  background-color: #e6a700;
}

a.text-warning:hover {
  color: #e6a700;
}

.text-warning {
  color: #FFBA00;
}

.text-warning-lt {
  color: #ffc11a;
}

.text-warning-lter {
  color: #ffc833;
}

.text-warning-dk {
  color: #e6a700;
}

.text-warning-dker {
  color: #cc9500;
}

a.bg-danger:hover {
  background-color: #ff4a51;
}

a.text-danger:hover {
  color: #ff4a51;
}

.text-danger {
  color: #ff646a;
}

.text-danger-lt {
  color: #ff7e83;
}

.text-danger-lter {
  color: #ff979b;
}

.text-danger-dk {
  color: #ff4a51;
}

.text-danger-dker {
  color: #ff3139;
}

a.bg-dark:hover {
  background-color: #2f3342;
}

a.text-dark:hover {
  color: #2f3342;
}

.text-dark {
  color: #3a3f51;
}

.text-dark-lt {
  color: #454b60;
}

.text-dark-lter {
  color: #4f566f;
}

.text-dark-dk {
  color: #2f3342;
}

.text-dark-dker {
  color: #252833;
}

a.bg-black:hover {
  background-color: #131e25;
}

a.text-black:hover {
  color: #131e25;
}

.text-black {
  color: #1c2b36;
}

.text-black-lt {
  color: #253847;
}

.text-black-lter {
  color: #2d4658;
}

.text-black-dk {
  color: #131e25;
}

.text-black-dker {
  color: #0b1014;
}

.text-white {
  color: #fff;
}

.text-black {
  color: #000;
}

.text-muted {
  color: #98a6ad;
}

.icon-color-android {
  color: #A4C639;
}

.icon-color-windows32 {
  color: #0000ff;
}

.icon-color-windows8 {
  color: #4617B4;
}

.icon-color-windows7 {
  color: #23d3e5;
}

.icon-color-apple {
  color: #aeb1b2;
}

.icon-color-blackberry {
  color: #112c34;
}

.icon-color-linux {
  color: #3a3f51;
}

.icon-color-pda {
  color: #23b7e5;
}

.icon-color-symb {
  color: #fabf33;
}

.icon-color-sucess {
  color: #24c30c;
}

.icon-color-primary {
  color: #0099FF;
}

.icon-color-danger {
  color: #ff646a;
}

.icon-color-info {
  color: #40BBEA;
}

.bg-alt-info {
  color: #31708F !important;
  background-color: #D9EDF7 !important;
}

.bg-gray {
  background-color: #e9e9e9 !important;
}

.pos-rlt {
  position: relative;
}

.pos-stc {
  position: static !important;
}

.pos-abt {
  position: absolute;
}

.pos-fix {
  position: fixed;
}

.show {
  visibility: visible;
}

.line {
  width: 100%;
  height: 2px;
  margin: 10px 0;
  font-size: 0;
  overflow: hidden;
}

.line-xs {
  margin: 0;
}

.line-lg {
  margin-top: 15px;
  margin-bottom: 15px;
}

.line-dashed {
  border-style: dashed !important;
  background-color: transparent;
  border-width: 0;
}

.no-line {
  border-width: 0;
}

.no-border,
.no-borders {
  border-color: transparent;
  border-width: 0;
}

.no-radius {
  border-radius: 0;
}

.block {
  display: block;
}

.block.hide {
  display: none;
}

.inline {
  display: inline-block !important;
}

.none {
  display: none;
}

.pull-none {
  float: none;
}

.rounded {
  border-radius: 500px;
}

.clear {
  display: block;
  overflow: hidden;
}

.no-bg {
  background-color: transparent;
  color: inherit;
}

.no-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.l-h {
  line-height: 1.42857143;
}

.l-h-0x {
  line-height: 0;
}

.l-h-1x {
  line-height: 1.2;
}

.l-h-2x {
  line-height: 2em;
}

.l-s-1x {
  letter-spacing: 1;
}

.l-s-2x {
  letter-spacing: 2;
}

.l-s-3x {
  letter-spacing: 3;
}

.font-normal {
  font-weight: normal;
}

.font-thin {
  font-weight: 300;
}

.font-bold {
  font-weight: 700;
}

.text-3x {
  font-size: 3em;
}

.text-2x {
  font-size: 2em;
}

.text-lg {
  font-size: 18px;
}

.text-md {
  font-size: 16px;
}

.text-base {
  font-size: 14px;
}

.text-sm {
  font-size: 13px;
}

.text-xs {
  font-size: 12px;
}

.text-xxs {
  text-indent: -9999px;
}

.text-ellipsis {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-u-c {
  text-transform: uppercase;
}

.text-l-t {
  text-decoration: line-through;
}

.text-u-l {
  text-decoration: underline;
}

.text-active,
.active > .text,
.active > .auto .text {
  display: none !important;
}

.active > .text-active,
.active > .auto .text-active {
  display: inline-block !important;
}

.box-shadow {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.05);
}

.box-shadow-lg {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.05);
}

.text-shadow {
  font-size: 80px;
  text-shadow: 0 1px 0 #dee5e7, 0 2px 0 #fcfdfd, 0 5px 10px rgba(0, 0, 0, 0.125), 0 10px 20px rgba(0, 0, 0, 0.2);
}

.no-shadow {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.wrapper-xs {
  padding: 5px;
}

.wrapper-sm {
  padding: 10px;
}

.wrapper {
  padding: 15px;
}

.wrapper-md {
  padding: 20px;
}

.wrapper-lg {
  padding: 30px;
}

.wrapper-xl {
  padding: 50px;
}

.padder-lg {
  padding-left: 30px;
  padding-right: 30px;
}

.padder-md {
  padding-left: 20px;
  padding-right: 20px;
}

.padder {
  padding-left: 15px;
  padding-right: 15px;
}

.padder-v {
  padding-top: 15px;
  padding-bottom: 15px;
}

.no-padder {
  padding: 0 !important;
}

.pull-in {
  margin-left: -15px;
  margin-right: -15px;
}

.pull-out {
  margin: -10px -15px;
}

.b {
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.b-a {
  border: 1px solid #dee5e7;
}

.b-t {
  border-top: 1px solid #dee5e7;
}

.b-r {
  border-right: 1px solid #dee5e7;
}

.b-b {
  border-bottom: 1px solid #dee5e7;
}

.b-l {
  border-left: 1px solid #dee5e7;
}

.b-light {
  border-color: #edf1f2;
}

.b-dark {
  border-color: #3a3f51;
}

.b-black {
  border-color: #3a3f51;
}

.b-primary {
  border-color: #0099FF;
}

.b-success {
  border-color: #24c30c;
}

.b-info {
  border-color: #40BBEA;
}

.b-warning {
  border-color: #FFBA00;
}

.b-danger {
  border-color: #ff646a;
}

.b-white {
  border-color: #fff;
}

.b-dashed {
  border-style: dashed !important;
}

.b-l-light {
  border-left-color: #edf1f2;
}

.b-l-dark {
  border-left-color: #3a3f51;
}

.b-l-black {
  border-left-color: #3a3f51;
}

.b-l-primary {
  border-left-color: #0099FF;
}

.b-l-success {
  border-left-color: #24c30c;
}

.b-l-info {
  border-left-color: #40BBEA;
}

.b-l-warning {
  border-left-color: #FFBA00;
}

.b-l-danger {
  border-left-color: #ff646a;
}

.b-l-white {
  border-left-color: #fff;
}

.b-l-linux {
  border-left-color: #3a3f51;
}

.b-l-ios {
  border-left-color: #aeb1b2;
}

.b-l-android {
  border-left-color: #A4C639;
}

.b-l-blackberry {
  border-left-color: #112c34;
}

.b-l-pda {
  border-left-color: #23b7e5;
}

.b-l-win32 {
  border-left-color: #0000ff;
}

.b-l-win10 {
  border-left-color: #4617B4;
}

.b-l-win7 {
  border-left-color: #23d3e5;
}

.b-l-2x {
  border-left-width: 2px;
}

.b-l-3x {
  border-left-width: 3px;
}

.b-l-4x {
  border-left-width: 4px;
}

.b-l-5x {
  border-left-width: 5px;
}

.b-2x {
  border-width: 2px;
}

.b-3x {
  border-width: 3px;
}

.b-4x {
  border-width: 4px;
}

.b-5x {
  border-width: 5px;
}

.r {
  border-radius: 2px 2px 2px 2px;
}

.r-2x {
  border-radius: 4px;
}

.r-3x {
  border-radius: 6px;
}

.r-l {
  border-radius: 2px 0 0 2px;
}

.r-r {
  border-radius: 0 2px 2px 0;
}

.r-t {
  border-radius: 2px 2px 0 0;
}

.r-b {
  border-radius: 0 0 2px 2px;
}

.m-xxs {
  margin: 2px 4px;
}

.m-xs {
  margin: 5px;
}

.m-sm {
  margin: 10px;
}

.m {
  margin: 15px;
}

.m-md {
  margin: 20px;
}

.m-lg {
  margin: 30px;
}

.m-xl {
  margin: 50px;
}

.m-n {
  margin: 0 !important;
}

.m-l-none {
  margin-left: 0 !important;
}

.m-l-xs {
  margin-left: 5px;
}

.m-l-sm {
  margin-left: 10px;
}

.m-l {
  margin-left: 15px;
}

.m-l-md {
  margin-left: 20px;
}

.m-l-lg {
  margin-left: 30px;
}

.m-l-xl {
  margin-left: 40px;
}

.m-l-xxl {
  margin-left: 50px;
}

.m-l-n-xxs {
  margin-left: -1px;
}

.m-l-n-xs {
  margin-left: -5px;
}

.m-l-n-sm {
  margin-left: -10px;
}

.m-l-n {
  margin-left: -15px;
}

.m-l-n-md {
  margin-left: -20px;
}

.m-l-n-lg {
  margin-left: -30px;
}

.m-l-n-xl {
  margin-left: -40px;
}

.m-l-n-xxl {
  margin-left: -50px;
}

.m-t-none {
  margin-top: 0 !important;
}

.m-t-xxs {
  margin-top: 1px;
}

.m-t-xs {
  margin-top: 5px;
}

.m-t-sm {
  margin-top: 10px;
}

.m-t {
  margin-top: 15px;
}

.m-t-md {
  margin-top: 20px;
}

.m-t-lg {
  margin-top: 30px;
}

.m-t-xl {
  margin-top: 40px;
}

.m-t-xxl {
  margin-top: 50px;
}

.m-t-n-xxs {
  margin-top: -1px;
}

.m-t-n-xs {
  margin-top: -5px;
}

.m-t-n-sm {
  margin-top: -10px;
}

.m-t-n {
  margin-top: -15px;
}

.m-t-n-md {
  margin-top: -20px;
}

.m-t-n-lg {
  margin-top: -30px;
}

.m-t-n-xl {
  margin-top: -40px;
}

.m-t-n-xxl {
  margin-top: -50px;
}

.m-r-none {
  margin-right: 0 !important;
}

.m-r-xxs {
  margin-right: 2px;
}

.m-r-xs {
  margin-right: 5px;
}

.m-r-sm {
  margin-right: 10px;
}

.m-r {
  margin-right: 15px;
}

.m-r-md {
  margin-right: 20px;
}

.m-r-lg {
  margin-right: 30px;
}

.m-r-xl {
  margin-right: 40px;
}

.m-r-xxl {
  margin-right: 50px;
}

.m-r-n-xxs {
  margin-right: -1px;
}

.m-r-n-xs {
  margin-right: -5px;
}

.m-r-n-sm {
  margin-right: -10px;
}

.m-r-n {
  margin-right: -15px;
}

.m-r-n-md {
  margin-right: -20px;
}

.m-r-n-lg {
  margin-right: -30px;
}

.m-r-n-xl {
  margin-right: -40px;
}

.m-r-n-xxl {
  margin-right: -50px;
}

.m-b-none {
  margin-bottom: 0 !important;
}

.m-b-xxs {
  margin-bottom: 1px;
}

.m-b-xs {
  margin-bottom: 5px;
}

.m-b-sm {
  margin-bottom: 10px;
}

.m-b {
  margin-bottom: 15px;
}

.m-b-md {
  margin-bottom: 20px;
}

.m-b-lg {
  margin-bottom: 30px;
}

.m-b-xl {
  margin-bottom: 40px;
}

.m-b-xxl {
  margin-bottom: 50px;
}

.m-b-n-xxs {
  margin-bottom: -1px;
}

.m-b-n-xs {
  margin-bottom: -5px;
}

.m-b-n-sm {
  margin-bottom: -10px;
}

.m-b-n {
  margin-bottom: -15px;
}

.m-b-n-md {
  margin-bottom: -20px;
}

.m-b-n-lg {
  margin-bottom: -30px;
}

.m-b-n-xl {
  margin-bottom: -40px;
}

.m-b-n-xxl {
  margin-bottom: -50px;
}

.avatar {
  position: relative;
  display: block;
  border-radius: 500px;
  white-space: nowrap;
}

.avatar img {
  border-radius: 500px;
  width: 100%;
}

.avatar i {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  margin: 2px;
  border-width: 2px;
  border-style: solid;
  border-radius: 100%;
}

.avatar i.right {
  left: auto;
  right: 0;
}

.avatar i.bottom {
  left: auto;
  top: auto;
  bottom: 0;
  right: 0;
}

.avatar i.left {
  top: auto;
  bottom: 0;
}

.avatar i.on {
  background-color: #24c30c;
}

.avatar i.off {
  background-color: #98a6ad;
}

.avatar i.busy {
  background-color: #ff646a;
}

.avatar i.away {
  background-color: #FFBA00;
}

.avatar.thumb-md i {
  width: 12px;
  height: 12px;
  margin: 3px;
}

.avatar.thumb-sm i {
  margin: 1px;
}

.avatar.thumb-xs i {
  margin: 0;
}

.w-1x {
  width: 1em;
}

.w-2x {
  width: 2em;
}

.w-3x {
  width: 3em;
}

.w-xxs {
  width: 60px;
}

.w-xs {
  width: 90px;
}

.w-sm {
  width: 150px;
}

.w {
  width: 200px;
}

.w-md {
  width: 240px;
}

.w-lg {
  width: 280px;
}

.w-xl {
  width: 320px;
}

.w-xxl {
  width: 360px;
}

.w-full {
  width: 100%;
}

.w-auto {
  width: auto;
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.thumb-xl {
  width: 128px;
  display: inline-block;
}

.thumb-lg {
  width: 96px;
  display: inline-block;
}

.thumb-md {
  width: 64px;
  display: inline-block;
}

.thumb {
  width: 50px;
  display: inline-block;
}

.thumb-sm {
  width: 40px;
  display: inline-block;
}

.thumb-xs {
  width: 34px;
  display: inline-block;
}

.thumb-xxs {
  width: 30px;
  display: inline-block;
}

.thumb-wrapper {
  padding: 2px;
  border: 1px solid #dee5e7;
}

.thumb img,
.thumb-xs img,
.thumb-sm img,
.thumb-md img,
.thumb-lg img,
.thumb-btn img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

.img-full {
  width: 100%;
}

.img-full img {
  width: 100%;
}

.scrollable {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.scrollable.hover {
  overflow-y: hidden !important;
}

.scrollable.hover:hover {
  overflow: visible !important;
  overflow-y: auto !important;
}

.smart .scrollable {
  overflow-y: auto !important;
}

.scroll-x,
.scroll-y {
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

.scroll-y {
  overflow-y: auto;
}

.scroll-x {
  overflow-x: auto;
}

.hover-action {
  display: none;
}

.hover-rotate {
  -webkit-transition: all 0.2s ease-in-out 0.1s;
  transition: all 0.2s ease-in-out 0.1s;
}

.hover-anchor:hover > .hover-action,
.hover-anchor:focus > .hover-action,
.hover-anchor:active > .hover-action {
  display: inherit;
}

.hover-anchor:hover > .hover-rotate,
.hover-anchor:focus > .hover-rotate,
.hover-anchor:active > .hover-rotate {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
}

.backdrop.fade {
  opacity: 0;
  filter: alpha(opacity=0);
}

.backdrop.in {
  opacity: 0.8;
  filter: alpha(opacity=80);
}

/*desktop*/

@media screen and (min-width: 992px) {
  .col-lg-2-4 {
    width: 20%;
    float: left;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm.show {
    display: inherit !important;
  }

  .no-m-sm {
    margin: 0 !important;
  }
}

/*phone*/

@media (max-width: 767px) {
  .w-auto-xs {
    width: auto;
  }

  .shift {
    display: none !important;
  }

  .shift.in {
    display: block !important;
  }

  .row-2 [class*="col"] {
    width: 50%;
    float: left;
  }

  .row-2 .col-0 {
    clear: none;
  }

  .row-2 li:nth-child(odd) {
    clear: left;
    margin-left: 0;
  }

  .text-center-xs {
    text-align: center;
  }

  .text-left-xs {
    text-align: left;
  }

  .text-right-xs {
    text-align: right;
  }

  .no-border-xs {
    border-width: 0;
  }

  .pull-none-xs {
    float: none !important;
  }

  .pull-right-xs {
    float: right !important;
  }

  .pull-left-xs {
    float: left !important;
  }

  .dropdown-menu.pull-none-xs {
    left: 0;
  }

  .hidden-xs.show {
    display: inherit !important;
  }

  .wrapper-lg,
  .wrapper-md {
    padding: 15px;
  }

  .padder-lg,
  .padder-md {
    padding-left: 15px;
    padding-right: 15px;
  }

  .no-m-xs {
    margin: 0 !important;
  }
}

.vcenter {
  position: relative;
  top: 50%;
  -moz-transform: translate(0, 50%);
  -ms-transform: translate(0, 50%);
  -o-transform: translate(0, 50%);
  -webkit-transform: translate(0, 50%);
  transform: translate(0, 50%);
}

.chart {
  position: relative;
  display: inline-block;
  width: 110px;
  height: 110px;
  margin-top: 50px;
  margin-bottom: 50px;
  text-align: center;
}

.chart canvas {
  position: absolute;
  top: 0;
  left: 0;
}

.percent {
  display: inline-block;
  line-height: 110px;
  z-index: 2;
}

.form-padding-xs {
  padding-top: 1px;
  padding-left: 1px;
}

.form-padding-s {
  padding-top: 2px;
  padding-left: 2px;
}

.form-padding-lg {
  padding-top: 5px;
  padding-left: 5px;
}

.form-padding-md {
  padding-top: 3px;
  padding-left: 3px;
}

table.nowrap th,
table.nowrap td {
  white-space: nowrap;
}

table.dataTable.nowrap th,
table.dataTable.nowrap td {
  white-space: nowrap;
}

table.dataTable th.dt-nowrap,
table.dataTable td.dt-nowrap {
  white-space: nowrap;
}

table.dataTable thead th.dt-head-nowrap,
table.dataTable thead td.dt-head-nowrap,
table.dataTable tfoot th.dt-head-nowrap,
table.dataTable tfoot td.dt-head-nowrap {
  white-space: nowrap;
}

table.dataTable tbody th.dt-body-nowrap,
table.dataTable tbody td.dt-body-nowrap {
  white-space: nowrap;
}

@media (min-width: 991px) {
  .modal-lg {
    width: 900px;
  }
}

@media (min-width: 991px) {
  .modal-zg {
    width: 90%;
    max-height: 300px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .modal-lg {
    width: 750px;
  }
}

.noheader thead {
  display: none;
}

.col-centered {
  float: none;
  margin: 0 auto;
}

/* .roundedOne */

.roundedOne {
  width: 28px;
  height: 28px;
  position: relative;
  margin: 20px auto;
  background: #fcfff4;
  background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  border-radius: 50px;
  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
}

.roundedOne label {
  width: 20px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  left: 4px;
  top: 4px;
  background: linear-gradient(top, #222 0%, #45484d 100%);
  border-radius: 50px;
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px #ffffff;
}

.roundedOne label:after {
  content: '';
  width: 16px;
  height: 16px;
  position: absolute;
  top: 2px;
  left: 2px;
  background: #0099FF;
  background: linear-gradient(top, #0099FF 0%, #edf1f2 100%);
  opacity: 0;
  border-radius: 50px;
  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
}

.roundedOne label:hover::after {
  opacity: 0.3;
}

.roundedOne input[type=checkbox]:checked + label:after {
  opacity: 1;
}

/* end .roundedOne */

/* .roundedTwo */

.roundedTwo {
  width: 28px;
  height: 28px;
  position: relative;
  margin: 20px auto;
  background: #fcfff4;
  background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  border-radius: 50px;
  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
}

.roundedTwo label {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 4px;
  left: 4px;
  cursor: pointer;
  background: linear-gradient(top, #222 0%, #45484d 100%);
  border-radius: 50px;
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px #ffffff;
}

.roundedTwo label:after {
  content: '';
  width: 9px;
  height: 5px;
  position: absolute;
  top: 5px;
  left: 4px;
  border: 3px solid #fcfff4;
  border-top: none;
  border-right: none;
  background: transparent;
  opacity: 0;
  transform: rotate(-45deg);
}

.roundedTwo label:hover::after {
  opacity: 0.3;
}

.roundedTwo input[type=checkbox] {
  visibility: hidden;
}

.roundedTwo input[type=checkbox]:checked + label:after {
  opacity: 1;
}

/* .squaredOne */

.squaredOne {
  width: 28px;
  height: 28px;
  position: relative;
  margin: 20px auto;
  background: #fcfff4;
  background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
}

.squaredOne label {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 4px;
  left: 4px;
  cursor: pointer;
  background: linear-gradient(top, #222 0%, #45484d 100%);
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px #ffffff;
}

.squaredOne label:after {
  content: '';
  width: 16px;
  height: 16px;
  position: absolute;
  top: 2px;
  left: 2px;
  background: #0099FF;
  background: linear-gradient(top, #0099FF 0%, #edf1f2 100%);
  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
  opacity: 0;
}

.squaredOne label:hover::after {
  opacity: 0.3;
}

.squaredOne input[type=checkbox] {
  visibility: hidden;
}

.squaredOne input[type=checkbox]:checked + label:after {
  opacity: 1;
}

/* end .squaredOne */

/* .squaredTwo */

.squaredTwo {
  width: 28px;
  height: 28px;
  position: relative;
  margin: 20px auto;
  background: #fcfff4;
  background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
}

.squaredTwo label {
  width: 20px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  left: 4px;
  top: 4px;
  background: linear-gradient(top, #222 0%, #45484d 100%);
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px #ffffff;
}

.squaredTwo label:after {
  content: '';
  width: 9px;
  height: 5px;
  position: absolute;
  top: 4px;
  left: 4px;
  border: 3px solid #fcfff4;
  border-top: none;
  border-right: none;
  background: transparent;
  opacity: 0;
  transform: rotate(-45deg);
}

.squaredTwo label:hover::after {
  opacity: 0.3;
}

.squaredTwo input[type=checkbox] {
  visibility: hidden;
}

.squaredTwo input[type=checkbox]:checked + label:after {
  opacity: 1;
}

/* end .squaredTwo */

/* Default custom select inspired by tympanus.net */

div.cs-select {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  text-align: left;
  background: #fff;
  z-index: 100;
  font-size: 100%;
  width: 100%;
  max-width: 1500px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

div.cs-select.disabled {
  opacity: 0.5;
}

div.cs-select.disabled span {
  cursor: default !important;
}

div.cs-select:focus {
  outline: none;
  /* For better accessibility add a style for this in your skin */
}

.cs-select select {
  display: none;
}

.cs-select span {
  display: block;
  position: relative;
  cursor: pointer;
  padding: 5px 4px;
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

/* Placeholder and selected option */

.cs-select > span {
  padding-right: 3em;
}

.cs-select > span::after,
.cs-select .cs-selected span::after {
  speak: none;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.cs-select > span::after {
  content: '\25BE';
  right: 1em;
}

.cs-select .cs-selected span::after {
  content: '\e64c';
  margin-left: 1em;
  font-family: "themify";
  font-size: 60%;
}

.cs-select.cs-active > span::after {
  -webkit-transform: translateY(-50%) rotate(180deg);
  transform: translateY(-50%) rotate(180deg);
}

.cs-select.cs-active {
  z-index: 101;
}

/* Options */

.cs-select .cs-options {
  position: absolute;
  overflow: hidden;
  width: 100%;
  background: #fff;
  visibility: hidden;
}

.cs-select.cs-active .cs-options {
  visibility: visible;
}

.cs-select ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.cs-select ul span {
  padding: 1em;
}

.cs-select ul li.cs-focus span {
  background-color: #ddd;
}

/* Optgroup and optgroup label */

.cs-select li.cs-optgroup ul {
  padding-left: 1em;
}

.cs-select li.cs-optgroup > span {
  cursor: default;
}

div.cs-skin-slide {
  color: #3a3f51;
  font-size: 14px;
  width: 100%;
}

div.cs-skin-slide::before {
  content: '';
  background: #ffffff;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
}

.cs-skin-slide.cs-active::before {
  -webkit-transform: scale3d(1, 4, 1);
  transform: scale3d(1, 4, 1);
  background: lightgrey;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

.cs-skin-slide > span {
  height: 34px;
  line-height: 20px;
  border: 1px solid #cfdadd;
  -webkit-transition: text-indent 0.3s, opacity 0.3s;
  transition: text-indent 0.3s, opacity 0.3s;
}

.cs-skin-slide.cs-active > span {
  text-indent: -290px;
  opacity: 0;
}

.cs-skin-slide > span::after,
.cs-skin-slide.cs-active > span::after {
  font-family: 'themify';
  content: '\e68e';
  color: #0099FF;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  font-size: 17px;
}

.cs-skin-slide.cs-active > span::after {
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}

.cs-skin-slide .cs-options {
  background: transparent;
  width: 100%;
  height: 400%;
  padding: 5px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}

.cs-skin-slide.cs-active .cs-options {
  overflow-y: auto;
}

.cs-skin-slide .cs-options li {
  opacity: 0;
  -webkit-transform: translate3d(30%, 0, 0);
  transform: translate3d(30%, 0, 0);
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s;
  margin-bottom: 5px;
}

.cs-skin-slide.cs-active .cs-options li {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.cs-skin-slide.cs-active .cs-options li:first-child {
  -webkit-transition-delay: 0.05s;
  transition-delay: 0.05s;
}

.cs-skin-slide.cs-active .cs-options li:nth-child(2) {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

.cs-skin-slide.cs-active .cs-options li:nth-child(3) {
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}

.cs-skin-slide.cs-active .cs-options li:nth-child(4) {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.cs-skin-slide.cs-active .cs-options li:nth-child(5) {
  -webkit-transition-delay: 0.25s;
  transition-delay: 0.25s;
}

.cs-skin-slide.cs-active .cs-options li:nth-child(6) {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.cs-skin-slide.cs-active .cs-options li:nth-child(7) {
  -webkit-transition-delay: 0.35s;
  transition-delay: 0.35s;
}

/* more options need more delay declaration */

.cs-skin-slide .cs-options li span {
  padding: 0.8em 1em;
}

.cs-skin-slide .cs-options li span:empty {
  display: none;
}

.cs-skin-slide .cs-options li:hover,
.cs-skin-slide .cs-options li.cs-focus {
  background: #dee5e7;
}

.cs-skin-slide .cs-options li.cs-selected {
  color: #ffffff;
  background: #0099FF;
}

.cs-select [class^="ti-"],
.cs-select [class*=" ti-"],
.cs-select [class^="fa-"],
.cs-select [class*=" fa-"] {
  line-height: inherit !important;
  display: block !important;
}

.cs-select [class^="ti-"] span,
.cs-select [class*=" ti-"] span,
.cs-select [class^="fa-"] span,
.cs-select [class*=" fa-"] span {
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding-left: 30px !important;
}

.cs-select [class^="ti-"]:before,
.cs-select [class*=" ti-"]:before,
.cs-select [class^="fa-"]:before,
.cs-select [class*=" fa-"]:before {
  font-family: 'themify';
  position: absolute;
  left: 5px;
  top: 50%;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
  font-size: 17px;
}

.cs-select [class^="ti-"]:before,
.cs-select [class*=" ti-"]:before {
  font-family: 'themify';
}

.cs-select [class^="fa-"]:before,
.cs-select [class*=" fa-"]:before {
  font-family: 'fontawesome';
}

/* Skin Elastic */

div.cs-skin-elastic {
  background: transparent;
  font-size: 14px;
  color: #3a3f51;
}

.cs-skin-elastic > span {
  background-color: #fff;
  z-index: 100;
  border: 1px solid #c8c7cc;
  height: 34px;
  line-height: 20px;
}

.cs-skin-elastic > span::after {
  font-family: 'themify';
  content: '\e64b';
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  color: #0099FF;
}

.cs-skin-elastic .cs-options {
  overflow: visible;
  background: transparent;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}

.cs-skin-elastic.cs-active .cs-options {
  pointer-events: auto;
}

.cs-skin-elastic .cs-options > ul::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  -webkit-transform: scale3d(1, 0, 1);
  transform: scale3d(1, 0, 1);
  background: #edf1f2;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
}

.cs-skin-elastic.cs-active .cs-options > ul::before {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transition: none;
  transition: none;
  -webkit-animation: expand 0.6s ease-out;
  animation: expand 0.6s ease-out;
}

.cs-skin-elastic .cs-options ul li {
  opacity: 0;
  -webkit-transform: translate3d(0, -25px, 0);
  transform: translate3d(0, -25px, 0);
  -webkit-transition: opacity 0.15s, -webkit-transform 0.15s;
  transition: opacity 0.15s, transform 0.15s;
}

.cs-skin-elastic.cs-active .cs-options ul li {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1;
  -webkit-transition: none;
  transition: none;
  -webkit-animation: bounce 0.6s ease-out;
  animation: bounce 0.6s ease-out;
}

.cs-skin-elastic .cs-options span {
  background-repeat: no-repeat;
  background-position: 1.5em 50%;
  background-size: 2em auto;
  padding: 0.8em 1em 0.8em 1em;
}

.cs-skin-elastic .cs-options li:hover,
.cs-skin-elastic .cs-options li.cs-focus {
  background: #dee5e7;
}

.cs-skin-elastic .cs-options .cs-selected,
.cs-skin-elastic .cs-options .cs-selected:hover {
  color: #ffffff !important;
  background: #0099FF !important;
}

.hvr-float {
  display: inline-block;
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  transition-duration: 0.3s;
  transition-property: transform;
  transition-timing-function: ease-out;
}

.hvr-float:hover,
.hvr-float:focus,
.hvr-float:active {
  -moz-transform: translateY(-8px);
  -ms-transform: translateY(-8px);
  -o-transform: translateY(-8px);
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}

/* Pulse */

@-webkit-keyframes hvr-pulse {
  25% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
  }

  75% {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
  }
}

@-moz-keyframes hvr-pulse {
  25% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
  }

  75% {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
  }
}

@keyframes hvr-pulse {
  25% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
  }

  75% {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
  }
}

.hvr-pulse-ie {
  display: inline;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}

.hvr-pulse {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}

.hvr-pulse:hover,
.hvr-pulse:focus,
.hvr-pulse:active {
  -webkit-animation-name: hvr-pulse;
  -moz-animation-name: hvr-pulse;
  -o-animation-name: hvr-pulse;
  animation-name: hvr-pulse;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.align-middle {
  margin-top: 25%;
  margin-bottom: 25%;
}

.scroller {
  white-space: pre-line;
  overflow-y: hidden;
  overflow-x: hidden;
}

.mCSB_container {
  margin-right: 15px !important;
}

.st-blurred-region-overlay {
  position: fixed;
  overflow-y: auto;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 10000;
  -webkit-overflow-scrolling: touch;
  background: url("../images/1.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.st-blurred-region-close {
  border: 0px;
  background-color: rgba(0, 0, 0, 0);
  font-size: 50px;
  color: red;
}

.st-blurred-region-close:hover {
  color: red;
}

.st-blurred-region-close:focus {
  outline: 0;
}

.page-lock {
  top: 50%;
  left: 50%;
  position: absolute;
  margin-top: -140px;
  margin-left: -260px;
}

.page-lock .page-logo {
  margin-bottom: 15px;
}

.page-lock .page-body {
  width: 510px;
  padding: 15px;
  background: url("../images/bg-white-lock.png") repeat;
}

.page-lock .page-body:after,
.page-lock .page-body:before {
  display: table;
  content: "";
  line-height: 0;
}

.page-lock .page-body:after {
  clear: both;
}

.page-lock .page-footer-custom {
  margin-top: 10px;
  text-align: left !important;
  font-size: 12px;
  color: #eaeaea;
}

.page-lock img.page-lock-img {
  float: left;
  width: 200px;
  height: auto;
}

.page-lock .page-lock-info {
  padding-left: 10px;
  float: right;
  width: 280px;
}

.page-lock .page-lock-info h1 {
  margin-top: -5px;
  font-weight: 300;
  color: #fff;
  font-size: 28px;
  line-height: 32px;
  margin-bottom: 5px;
}

.page-lock .page-lock-info .email {
  color: #eee;
  display: block;
  font-size: 14px;
  line-height: 14px;
  margin-bottom: 10px;
}

.page-lock .page-lock-info .locked {
  color: #333;
  font-size: 14px;
  line-height: 14px;
  font-style: normal;
}

.page-lock .page-lock-info form {
  margin: 28px 0;
}

.page-lock .page-lock-info input {
  background: #fff;
}

.page-lock .relogin {
  margin-top: 10px;
}

.page-lock .relogin a {
  color: #e1e1e1;
}

/*Responsive*/

@media (max-width: 768px) {
  .page-lock {
    top: 0px;
    width: 280px;
    margin-top: 20px;
    margin-left: -140px;
  }

  .page-lock .page-body {
    padding: 20px 10px;
    text-align: center;
    width: 280px;
  }

  .page-lock img.page-lock-img {
    float: none !important;
    display: block;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 15px;
  }

  .page-lock .page-lock-info {
    float: none !important;
    width: 260px;
    margin: 0 auto;
  }

  .page-lock .page-lock-info input {
    width: 200px !important;
  }
}

.popover-title-custom {
  margin: -2px -12px 0 -12px;
  padding: 2px;
}

.panel-heading-device {
  padding-top: 12px;
  border-radius: 4px 4px 0 0;
  height: 95px;
  text-align: center;
  width: 100%;
  background: #0090D9;
}

.btn-circle-micro {
  width: 19px;
  height: 19px;
  text-align: center;
  padding: 1px 0;
  font-size: 13px;
  line-height: 0.1;
  border-radius: 30px;
}

.btn-circle-sm {
  width: 35px;
  height: 35px;
  text-align: center;
  padding: 2px 0;
  font-size: 20px;
  line-height: 1.65;
  border-radius: 30px;
}

.btn-circle-lg {
  width: 69px;
  height: 69px;
  text-align: center;
  padding: 6px 0;
  font-size: 30px;
  line-height: 2;
  border-radius: 60px;
}

.butterbar {
  position: relative;
  margin-bottom: -3px;
  height: 3px;
}

.butterbar .bar {
  position: absolute;
  height: 0;
  width: 100%;
  text-indent: -9999px;
  background-color: #40BBEA;
}

.butterbar .bar:before {
  content: "";
  height: 3px;
  position: absolute;
  left: 50%;
  right: 50%;
  background-color: inherit;
}

.butterbar.active {
  -webkit-animation: changebar 2.25s infinite 0.75s;
  -moz-animation: changebar 2.25s infinite 0.75s;
  animation: changebar 2.25s infinite 0.75s;
}

.butterbar.active .bar {
  -webkit-animation: changebar 2.25s infinite;
  -moz-animation: changebar 2.25s infinite;
  animation: changebar 2.25s infinite;
}

.butterbar.active .bar:before {
  -webkit-animation: movingbar 0.75s infinite;
  -moz-animation: movingbar 0.75s infinite;
  animation: movingbar 0.75s infinite;
}

/* Moving bar */

@-webkit-keyframes movingbar {
  0% {
    left: 50%;
    right: 50%;
  }

  99.9% {
    left: 0%;
    right: 0%;
  }

  100% {
    left: 50%;
    right: 50%;
  }
}

@-moz-keyframes movingbar {
  0% {
    left: 50%;
    right: 50%;
  }

  99.9% {
    left: 0%;
    right: 0%;
  }

  100% {
    left: 50%;
    right: 50%;
  }
}

@keyframes movingbar {
  0% {
    left: 50%;
    right: 50%;
  }

  99.9% {
    left: 0%;
    right: 0%;
  }

  100% {
    left: 50%;
    right: 50%;
  }
}

/* change bar */

@-webkit-keyframes changebar {
  0% {
    background-color: #40BBEA;
  }

  33.3% {
    background-color: #40BBEA;
  }

  33.33% {
    background-color: #FFBA00;
  }

  66.6% {
    background-color: #FFBA00;
  }

  66.66% {
    background-color: #0099FF;
  }

  99.9% {
    background-color: #0099FF;
  }
}

@-moz-keyframes changebar {
  0% {
    background-color: #40BBEA;
  }

  33.3% {
    background-color: #40BBEA;
  }

  33.33% {
    background-color: #FFBA00;
  }

  66.6% {
    background-color: #FFBA00;
  }

  66.66% {
    background-color: #0099FF;
  }

  99.9% {
    background-color: #0099FF;
  }
}

@keyframes changebar {
  0% {
    background-color: #40BBEA;
  }

  33.3% {
    background-color: #40BBEA;
  }

  33.33% {
    background-color: #FFBA00;
  }

  66.6% {
    background-color: #FFBA00;
  }

  66.66% {
    background-color: #0099FF;
  }

  99.9% {
    background-color: #0099FF;
  }
}

tr[filemanager="si"] {
  /*color:#2196F3;*/
  color: #12ABE5;
}

tr[filemanager="si"]:hover {
  color: #106EBD;
}

a[filemanager="si"] {
  /*color:#2196F3;*/
  color: #12ABE5;
}

a[filemanager="si"]:hover {
  color: #106EBD;
}

.filemanager-container .navbar {
  min-height: 32px;
  margin-bottom: 0;
  border: 0;
  border-radius: 0;
}

.filemanager-container .navbar .navbar-toggle {
  padding: 5px 10px;
}

.filemanager-container .navbar .navbar-brand {
  font-size: inherit;
  height: 55px;
  line-height: 100%;
}

.filemanager-container .navbar .navbar-form {
  border-bottom: none;
  border-top: none;
  box-shadow: none;
  padding: 0 10px;
  margin-top: 10px;
}

.filemanager-container .breadcrumb {
  border-radius: 0;
}

.filemanager-container .breadcrumb .btn {
  margin-top: -5px;
}

.filemanager-container .btn.btn-default {
  color: #444;
  background-color: #FAFAFA;
}

.filemanager-container .btn {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  font-weight: 500;
  letter-spacing: 0.01em;
  border: none;
}

.filemanager-container textarea.code {
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 13px;
  min-height: 250px;
  resize: vertical;
  color: #000;
}

.filemanager-container .sub-header {
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.filemanager-container .sidebar {
  display: none;
}

.filemanager-container .btn-go-back {
  margin-top: -5px;
}

.filemanager-container .nav-sidebar {
  margin-right: -21px;
  margin-bottom: 20px;
  margin-left: -20px;
}

.filemanager-container .nav-sidebar > li > a {
  padding-right: 20px;
  padding-left: 20px;
}

.filemanager-container .nav-sidebar > .active > a,
.filemanager-container .nav-sidebar > .active > a:hover,
.filemanager-container .nav-sidebar > .active > a:focus {
  color: #fff;
  background-color: #2196F3;
}

.filemanager-container .main {
  padding: 0;
}

.filemanager-container .main .page-header {
  margin-top: 0;
}

.filemanager-container .file-tree ul.nav.nav-sidebar {
  margin: 0;
  padding: 0;
  padding-left: 12px;
}

.filemanager-container .file-tree ul.nav.nav-sidebar > li {
  border-left: 1px solid #ddd;
  padding-left: 4px;
}

.filemanager-container .file-tree ul.nav.nav-sidebar > li > a {
  padding: 2px 2px 2px 4px;
}

.filemanager-container .file-tree ul.nav.nav-sidebar:first-child {
  padding-left: 0;
}

.filemanager-container .file-tree ul.nav.nav-sidebar.file-tree-root > li {
  border-left: none;
  padding-left: 0px;
}

.filemanager-container .table td {
  vertical-align: middle;
}

.filemanager-container #context-menu {
  position: absolute;
  display: none;
  z-index: 9999;
}

.filemanager-container .iconset {
  padding: 10px;
}

.filemanager-container .col-120 {
  width: 100px;
  max-height: 100px;
  float: left;
  margin-bottom: 9px;
  margin-right: 9px;
}

.filemanager-container .col-120:last-child {
  margin-right: 0;
}

.filemanager-container .noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -khtml-user-select: none;
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE/Edge */
  user-select: none;
  /* non-prefixed version, currently */
}

.filemanager-container .iconset .thumbnail {
  border-radius: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  padding: 10px 0;
  border: none;
}

.filemanager-container .table-files .selected,
.filemanager-container .iconset .thumbnail.selected {
  background: #2196F3;
}

.filemanager-container .iconset .thumbnail.selected,
.filemanager-container .table-files .selected td,
.filemanager-container .table-files .selected td a {
  color: #fff;
}

.filemanager-container .iconset .thumbnail .item-icon {
  font-size: 32px;
}

.filemanager-container .detail-sources {
  text-overflow: ellipsis;
  overflow: hidden;
  word-wrap: break-word;
}

.filemanager-container ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #fff;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset -1px -1px 0 rgba(0, 0, 0, 0.07);
}

.filemanager-container ::-webkit-scrollbar:hover {
  background-color: #eee;
}

.filemanager-container ::-webkit-scrollbar-thumb {
  min-height: 0.8em;
  min-width: 0.8em;
  background-color: rgba(0, 0, 0, 0.2);
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset -1px -1px 0 rgba(0, 0, 0, 0.07);
}

.filemanager-container ::-webkit-scrollbar-thumb:hover {
  background-color: #bbb;
}

.filemanager-container ::-webkit-scrollbar-thumb:active {
  background-color: #888;
}

.filemanager-container .dropdown-menu.dropdown-right-click {
  display: block;
  position: static;
  margin-bottom: 5px;
  font-size: 1em;
}

.filemanager-container .dropdown-menu.dropdown-right-click > li > a {
  padding: 5px 12px;
}

.filemanager-container .dropdown-menu.dropdown-right-click > li > a > i {
  font-size: 0.9em;
  margin-right: 1px;
}

.filemanager-container .dropdown-menu.dropdown-right-click .divider {
  margin: 3px 0;
}

.filemanager-container .spinner-wrapper {
  margin: 0 auto;
  text-align: center;
  margin-top: 8%;
}

.filemanager-container a:hover,
.filemanager-container a:active,
.filemanager-container a:focus,
.filemanager-container table th > a:hover,
.filemanager-container table th > a:active,
.filemanager-container table th > a:focus {
  text-decoration: none;
}

.filemanager-container .sortorder:after {
  color: #2196f3;
  content: '\25bc';
}

.filemanager-container .sortorder.reverse:after {
  color: #2196f3;
  content: '\25b2';
}

.filemanager-container [ng\:cloak],
.filemanager-container [ng-cloak],
.filemanager-container [data-ng-cloak],
.filemanager-container [x-ng-cloak],
.filemanager-container .ng-cloak,
.filemanager-container .x-ng-cloak {
  display: none !important;
}

.filemanager-container .mr2 {
  margin-right: 2px;
}

.filemanager-container .mr5 {
  margin-right: 5px;
}

.filemanager-container .mt10 {
  margin-top: 10px;
}

.filemanager-container .mb0 {
  margin-bottom: 0;
}

.filemanager-container .pointer {
  cursor: pointer;
}

.filemanager-container .block {
  display: block;
}

.filemanager-container .ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filemanager-container .bold {
  font-weight: bold;
}

.filemanager-container .main {
  overflow-y: auto;
}

@media (min-width: 768px) {
  .filemanager-container {
    /* The view should fill all available vertical space */
  }

  .filemanager-container .main {
    padding-right: 0;
    padding-left: 0;
  }

  .filemanager-container angular-filemanager > div,
  .filemanager-container .row,
  .filemanager-container .main,
  .filemanager-container .sidebar {
    height: 100%;
  }

  .filemanager-container .container-fluid {
    height: -webkit-calc(45%);
    height: -moz-calc(45%);
    height: calc(100% - 55px);
  }

  .filemanager-container .sidebar {
    display: block;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #f5f5f5;
    border-right: 1px solid #eee;
  }
}

@media (max-width: 768px) {
  .filemanager-container .navbar-form .btn {
    margin-top: 5px;
  }
}

@media (max-width: 475px) {
  .filemanager-container .table.table-files .btn {
    display: none;
  }
}

.filemanager-container .selected-file-details {
  padding-left: 20px;
}
/*!
 * bootstrap-fileinput v4.4.1
 * http://plugins.krajee.com/file-input
 *
 * Krajee default styling for bootstrap-fileinput.
 *
 * Author: Kartik Visweswaran
 * Copyright: 2014 - 2017, Kartik Visweswaran, Krajee.com
 *
 * Licensed under the BSD 3-Clause
 * https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
 */

.file-loading {
  top: 0;
  right: 0;
  width: 25px;
  height: 25px;
  font-size: 999px;
  text-align: right;
  color: #fff;
  background: transparent url("../img/loading.gif") top left no-repeat;
  border: none;
}

.file-object {
  margin: 0 0 -5px 0;
  padding: 0;
}

.btn-file {
  position: relative;
  overflow: hidden;
}

.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  text-align: right;
  opacity: 0;
  background: none repeat scroll 0 0 transparent;
  cursor: inherit;
  display: block;
}

.file-caption-name {
  display: inline-block;
  overflow: hidden;
  height: 20px;
  word-break: break-all;
}

.input-group-lg .file-caption-name {
  height: 25px;
}

.file-zoom-dialog {
  text-align: left;
}

.file-error-message {
  color: #a94442;
  background-color: #f2dede;
  margin: 5px;
  border: 1px solid #ebccd1;
  border-radius: 4px;
  padding: 15px;
}

.file-error-message pre,
.file-error-message ul {
  margin: 0;
  text-align: left;
}

.file-error-message pre {
  margin: 5px 0;
}

.file-caption-disabled {
  background-color: #EEEEEE;
  cursor: not-allowed;
  opacity: 1;
}

.file-preview {
  border-radius: 5px;
  border: 1px solid #ddd;
  padding: 5px;
  width: 100%;
  margin-bottom: 5px;
}

.krajee-default.file-preview-frame {
  position: relative;
  display: table;
  margin: 8px;
  border: 1px solid #ddd;
  box-shadow: 1px 1px 5px 0 #a2958a;
  padding: 6px;
  float: left;
  text-align: center;
}

.krajee-default.file-preview-frame:not(.file-preview-error):hover {
  box-shadow: 3px 3px 5px 0 #333;
}

.krajee-default.file-preview-frame .kv-file-content {
  height: 170px;
}

.krajee-default.file-preview-frame .file-thumbnail-footer {
  height: 70px;
}

.krajee-default .file-preview-image {
  vertical-align: middle;
}

.krajee-default .file-preview-text {
  display: block;
  color: #428bca;
  border: 1px solid #ddd;
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  outline: none;
  padding: 8px;
  resize: none;
}

.krajee-default .file-preview-html {
  border: 1px solid #ddd;
  padding: 8px;
  overflow: auto;
}

.krajee-default[data-template="audio"] .file-preview-audio {
  display: table-cell;
  vertical-align: middle;
  height: 170px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.krajee-default .file-preview-audio audio {
  vertical-align: middle;
}

.krajee-default .file-zoom-dialog .file-preview-text {
  font-size: 1.2em;
}

.krajee-default .file-preview-other {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  vertical-align: middle;
  padding: 10px;
}

.krajee-default .file-preview-other:hover {
  opacity: 0.8;
}

.krajee-default .file-actions,
.krajee-default .file-other-error {
  text-align: left;
}

.krajee-default .file-other-icon {
  font-size: 8em;
}

.krajee-default .file-actions {
  margin-top: 15px;
}

.krajee-default .file-footer-buttons {
  float: right;
}

.krajee-default .file-footer-caption {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 160px;
  text-align: center;
  padding-top: 4px;
  font-size: 11px;
  color: #777;
  margin: 5px auto;
}

.krajee-default .file-preview-error {
  opacity: 0.65;
  box-shadow: none;
}

.krajee-default .file-preview-frame:not(.file-preview-error) .file-footer-caption:hover {
  color: #000;
}

.krajee-default .file-drag-handle,
.krajee-default .file-upload-indicator {
  position: absolute;
  text-align: center;
  bottom: -6px;
  left: -6px;
  padding: 8px 8px 1px 3px;
  border-left: none;
  border-bottom: none;
  border-right: 1px solid #8a6d3b;
  border-top: 1px solid #8a6d3b;
  border-top-right-radius: 24px;
  font-size: 12px;
}

.krajee-default .file-drag-handle {
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.krajee-default .file-upload-indicator {
  font-size: 13px;
  background-color: #fcf8e3;
  border-color: #faebcc;
  padding-bottom: 0;
}

.krajee-default.file-preview-error .file-upload-indicator {
  background-color: #f2dede;
  border-color: #ebccd1;
}

.krajee-default.file-preview-success .file-upload-indicator {
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.krajee-default.file-preview-loading .file-upload-indicator {
  background-color: #e5e5e5;
  border-color: #777;
}

.krajee-default .file-thumb-progress {
  height: 10px;
}

.krajee-default .file-thumb-progress .progress,
.krajee-default .file-thumb-progress .progress-bar {
  height: 10px;
  font-size: 9px;
  line-height: 10px;
}

.krajee-default .file-thumbnail-footer {
  position: relative;
}

.krajee-default .file-thumb-progress {
  position: absolute;
  top: 35px;
  left: 0;
  right: 0;
}

.krajee-default.kvsortable-ghost {
  background: #e1edf7;
  border: 2px solid #a1abff;
}

/* noinspection CssOverwrittenProperties */

.file-zoom-dialog .file-other-icon {
  font-size: 22em;
  font-size: 50vmin;
}

.file-input-new .file-preview,
.file-input-new .close,
.file-input-new .glyphicon-file,
.file-input-new .fileinput-remove-button,
.file-input-new .fileinput-upload-button,
.file-input-ajax-new .fileinput-remove-button,
.file-input-ajax-new .fileinput-upload-button {
  display: none;
}

.file-caption-main {
  width: 100%;
}

.file-input-ajax-new .no-browse .input-group-btn,
.file-input-new .no-browse .input-group-btn {
  display: none;
}

.file-input-ajax-new .no-browse .form-control,
.file-input-new .no-browse .form-control {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.file-thumb-loading {
  background: transparent url("../img/loading.gif") no-repeat scroll center center content-box !important;
}

.file-sortable .file-drag-handle {
  cursor: move;
  cursor: -webkit-grabbing;
  opacity: 1;
}

.file-sortable .file-drag-handle:hover {
  opacity: 0.7;
}

.file-drop-zone {
  border: 1px dashed #aaa;
  border-radius: 4px;
  height: 100%;
  text-align: center;
  vertical-align: middle;
  margin: 12px 15px 12px 12px;
  padding: 5px;
}

.file-drop-zone-title {
  color: #aaa;
  font-size: 1.6em;
  padding: 85px 10px;
  cursor: default;
}

.file-preview .clickable,
.clickable .file-drop-zone-title {
  cursor: pointer;
}

.file-drop-zone.clickable:hover {
  border: 2px dashed #999;
}

.file-drop-zone.clickable:focus {
  border: 2px solid #5acde2;
}

.file-drop-zone .file-preview-thumbnails {
  cursor: default;
}

.file-highlighted {
  border: 2px dashed #999 !important;
  background-color: #f0f0f0;
}

.file-uploading {
  background: url("../img/loading-sm.gif") no-repeat center bottom 10px;
  opacity: 0.65;
}

.file-zoom-fullscreen.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.modal-dialog {
  overflow-y: initial !important;
}

.file-zoom-fullscreen .modal-dialog {
  position: fixed;
  margin: 0;
  width: 100%;
  height: 100%;
  padding: 0;
}

.file-zoom-fullscreen .modal-content {
  border-radius: 0;
  box-shadow: none;
}

.file-zoom-fullscreen .modal-body {
  overflow-y: auto;
}

.file-zoom-dialog .modal-body {
  position: relative !important;
}

.file-zoom-dialog .btn-navigate {
  position: absolute;
  padding: 0;
  margin: 0;
  background: transparent;
  text-decoration: none;
  outline: none;
  opacity: 0.7;
  top: 45%;
  font-size: 4em;
  color: #1c94c4;
}

.file-zoom-dialog .floating-buttons {
  position: absolute;
  top: 5px;
  right: 10px;
}

.floating-buttons,
.floating-buttons .btn {
  z-index: 3000;
}

.file-zoom-dialog .kv-zoom-actions .btn,
.floating-buttons .btn {
  margin-left: 3px;
}

.file-zoom-dialog .btn-navigate:not([disabled]):hover,
.file-zoom-dialog .btn-navigate:not([disabled]):focus {
  outline: none;
  box-shadow: none;
  opacity: 0.5;
}

.file-zoom-dialog .btn-navigate[disabled] {
  opacity: 0.3;
}

.file-zoom-dialog .btn-prev {
  left: 1px;
}

.file-zoom-dialog .btn-next {
  right: 1px;
}

.file-zoom-content {
  height: 480px;
  text-align: center;
}

.file-zoom-content .file-preview-image,
.file-zoom-content .file-preview-video {
  max-height: 100%;
}

.file-zoom-content > .file-object.type-image {
  width: auto;
  height: auto;
  min-height: inherit;
  max-width: 100%;
  max-height: 100%;
}

.file-zoom-content > .file-object.type-video,
.file-zoom-content > .file-object.type-flash {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

.file-zoom-content > .file-object.type-audio {
  width: auto;
  height: 30px;
}

.file-zoom-content > .file-object.type-pdf,
.file-zoom-content > .file-object.type-html,
.file-zoom-content > .file-object.type-text,
.file-zoom-content > .file-object.type-default {
  width: 100%;
}

.file-preview-initial.sortable-chosen {
  background-color: #d9edf7;
}

/* IE 10 fix */

.btn-file ::-ms-browse {
  font-size: 10000px;
  width: 100%;
  height: 100%;
}

/* exif orientations */

.rotate-2 {
  transform: rotateY(180deg);
}

.rotate-3 {
  transform: rotate(180deg);
}

.rotate-4 {
  transform: rotate(180deg) rotateY(180deg);
}

.rotate-5 {
  transform: rotate(270deg) rotateY(180deg);
}

.rotate-6 {
  transform: rotate(90deg);
}

.rotate-7 {
  transform: rotate(90deg) rotateY(180deg);
}

.rotate-8 {
  transform: rotate(270deg);
}

.file-zoom-content .is-portrait-gt4 {
  margin-top: 60px;
}
html,
body,
div,
span,
applet,
object,
iframe,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

.form-inline label {
  line-height: 34px;
}

.control-label {
  color: #236c86;
}

.form-inline .form-control {
  width: 100%;
}

.colors:hover {
  /* border: 1px solid;
    border-radius: 3px;
    display: inline-block;
    margin: 10px;
    padding: 5px; */
  background-color: ;
}

.page-container {
  width: 960px;
  float: left;
}

.pan {
  width: 10000px;
  position: static;
}

.project-content {
  width: 960px;
  position: relative;
  overflow: hidden;
}



.project-header {
  height: 150px;
}

.project-header-small {
  height: 80px;
}

.popover {
  max-width: 700px;
  color: #000000;
}

.project-body {
  height: 500px;
  overflow-y: auto;
  padding: 0 15px 0 15px;
}

.project-body-small {
  height: 350px;
  overflow-y: auto;
}

.project-body-large {
  height: 620px;
  overflow-y: auto;
}

.wz-mandatory-msg {
  display: inline-block;
  position: absolute;
  left: -5px;
  bottom: -35px;
  background: rgba(215, 102, 102, 0.9);
  padding: .8em;
  z-index: 2;
  color: #FFF;
  /*font-size: 1.4rem;*/
  font-size: 12px;
  border-radius: 0.25em;
  /* prevent click and touch events */
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.2s 0, visibility 0 0.2s;
  -moz-transition: opacity 0.2s 0, visibility 0 0.2s;
  transition: opacity 0.2s 0, visibility 0 0.2s;
}

.wz-mandatory-msg::after {
  /* triangle */
  content: '';
  position: absolute;
  left: 22px;
  bottom: 100%;
  height: 0;
  width: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid rgba(215, 102, 102, 0.9);
}

.wz-mandatory-msg.is-visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.2s 0, visibility 0 0;
  -moz-transition: opacity 0.2s 0, visibility 0 0;
  transition: opacity 0.2s 0, visibility 0 0;
}

.list-icon i {
  display: inline-block;
  width: 40px;
  margin: 0;
  font-size: 14px;
  text-align: center;
  vertical-align: middle;
  -webkit-transition: font-size .2s;
  transition: font-size .2s;
}

.list-icon div {
  line-height: 40px;
  white-space: nowrap;
}

.list-icon div:hover i {
  font-size: 26px;
}

.myPanel {
  height: 520px;
  overflow: auto;
}

.myPanelv2 {
  height: 640px;
  overflow: auto;
}

.myPanelv3 {
  max-height: 400px;
  overflow: auto;
}

.myPanelv3:hover {
  cursor: pointer;
}

.myPanel2:hover {
  background-color: #f5f5f5;
}

/*.colors:focus {
    background-color: #40bbea;
}*/

.myPanelClientIDColor {
  background-color: #f4fcf5;
}

.fileUpload {
  position: relative;
  overflow: hidden;
  margin: 10px;
}

.fileUpload input.upload {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  font-size: 45px;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity=0);
}

/*020718  CSS de please wait http://pathgather.github.io/please-wait/ */

/* line 17, ../src/please-wait.scss */

/*body.pg-loading {
    overflow: hidden;
}*/

/* line 21, ../src/please-wait.scss */

.pg-loading-screen {
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1000000;
  opacity: 1;
  background-color: #000000;
  -webkit-transition: background-color 0.6s ease-in-out 0s;
  -moz-transition: background-color 0.6s ease-in-out 0s;
  -ms-transition: background-color 0.6s ease-in-out 0s;
  -o-transition: background-color 0.6s ease-in-out 0s;
  transition: background-color 0.6s ease-in-out 0s;
}

/* line 32, ../src/please-wait.scss */

.pg-loading-screen.pg-loaded {
  opacity: 0;
  -webkit-animation: pgAnimLoaded 0.5s cubic-bezier(0.7, 0, 0.3, 1) both;
  -moz-animation: pgAnimLoaded 0.5s cubic-bezier(0.7, 0, 0.3, 1) both;
  -ms-animation: pgAnimLoaded 0.5s cubic-bezier(0.7, 0, 0.3, 1) both;
  -o-animation: pgAnimLoaded 0.5s cubic-bezier(0.7, 0, 0.3, 1) both;
  animation: pgAnimLoaded 0.5s cubic-bezier(0.7, 0, 0.3, 1) both;
}

/* line 38, ../src/please-wait.scss */

.pg-loading-screen.pg-loading .pg-loading-logo-header,
.pg-loading-screen.pg-loading .pg-loading-html {
  opacity: 1;
}

/* line 42, ../src/please-wait.scss */

.pg-loading-screen.pg-loading .pg-loading-logo-header,
.pg-loading-screen.pg-loading .pg-loading-html:not(.pg-loaded) {
  -webkit-animation: pgAnimLoading 1s cubic-bezier(0.7, 0, 0.3, 1) both;
  -moz-animation: pgAnimLoading 1s cubic-bezier(0.7, 0, 0.3, 1) both;
  -ms-animation: pgAnimLoading 1s cubic-bezier(0.7, 0, 0.3, 1) both;
  -o-animation: pgAnimLoading 1s cubic-bezier(0.7, 0, 0.3, 1) both;
  animation: pgAnimLoading 1s cubic-bezier(0.7, 0, 0.3, 1) both;
}

/* line 46, ../src/please-wait.scss */

.pg-loading-screen.pg-loading .pg-loading-html:not(.pg-loaded) {
  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  -ms-animation-delay: 0.3s;
  -o-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

/* line 51, ../src/please-wait.scss */

.pg-loading-screen .pg-loading-inner {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  position: static;
}

/* line 59, ../src/please-wait.scss */

.pg-loading-screen .pg-loading-center-outer {
  width: 100%;
  padding: 0;
  display: table !important;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
}

/* line 70, ../src/please-wait.scss */

.pg-loading-screen .pg-loading-center-middle {
  padding: 0;
  vertical-align: middle;
  display: table-cell !important;
  margin: 0;
  text-align: center;
}

/* line 78, ../src/please-wait.scss */

.pg-loading-screen .pg-loading-logo-header,
.pg-loading-screen .pg-loading-html {
  width: 100%;
  opacity: 0;
}

/* line 83, ../src/please-wait.scss */

.pg-loading-screen .pg-loading-logo-header {
  text-align: center;
}

/* line 86, ../src/please-wait.scss */

.pg-loading-screen .pg-loading-logo-header img {
  display: inline-block !important;
}

/* line 91, ../src/please-wait.scss */

.pg-loading-screen .pg-loading-html {
  margin-top: 90px;
}

/* line 94, ../src/please-wait.scss */

.pg-loading-screen .pg-loading-html.pg-loaded {
  -webkit-transition: opacity 0.5s cubic-bezier(0.7, 0, 0.3, 1);
  -moz-transition: opacity 0.5s cubic-bezier(0.7, 0, 0.3, 1);
  -ms-transition: opacity 0.5s cubic-bezier(0.7, 0, 0.3, 1);
  -o-transition: opacity 0.5s cubic-bezier(0.7, 0, 0.3, 1);
  transition: opacity 0.5s cubic-bezier(0.7, 0, 0.3, 1);
}

/* line 97, ../src/please-wait.scss */

.pg-loading-screen .pg-loading-html.pg-loaded.pg-removing {
  opacity: 0;
}

/* line 101, ../src/please-wait.scss */

.pg-loading-screen .pg-loading-html.pg-loaded.pg-loading {
  opacity: 1;
}

@-webkit-keyframes pgAnimLoading {
  from {
    opacity: 0;
  }
}

@-moz-keyframes pgAnimLoading {
  from {
    opacity: 0;
  }
}

@-o-keyframes pgAnimLoading {
  from {
    opacity: 0;
  }
}

@-ms-keyframes pgAnimLoading {
  from {
    opacity: 0;
  }
}

@keyframes pgAnimLoading {
  from {
    opacity: 0;
  }
}

@-webkit-keyframes pgAnimLoaded {
  from {
    opacity: 1;
  }
}

@-moz-keyframes pgAnimLoaded {
  from {
    opacity: 1;
  }
}

@-o-keyframes pgAnimLoaded {
  from {
    opacity: 1;
  }
}

@-ms-keyframes pgAnimLoaded {
  from {
    opacity: 1;
  }
}

@keyframes pgAnimLoaded {
  from {
    opacity: 1;
  }
}

.container section.header {
  padding-top: 50px;
  text-align: center;
  position: relative;
  border-bottom: 1px solid #EEE;
  padding-bottom: 25px;
  margin-bottom: 25px;
}

.container section.header h2 {
  font-weight: 300;
  font-size: 32px;
}

.container section.header h4 {
  font-weight: 300;
  margin-top: 15px;
}

.container section.header button {
  margin-top: 25px;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 14px;
}

.container section.header .info {
  margin-top: 90px;
}

.container section.instructions > section {
  border-bottom: 1px solid #EEE;
  padding-bottom: 25px;
  margin-bottom: 25px;
}

.pg-loading-screen .pg-loading-html {
  margin-top: 30px;
}

.pg-loading-screen .pg-loading-html p {
  color: #000000;
  font-weight: 300;
}

.pg-loading-screen .pg-loading-html form {
  max-width: 400px;
  margin: 0 auto;
}

.pg-loading-screen .pg-loading-html p.loading-message {
  font-size: 20px;
  margin-bottom: 100px;
}

.close-please-wait {
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 10000000;
}

.toolbar {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 10000000;
  max-width: 300px;
}

.toolbar .panel {
  width: 300px;
}

.toolbar .info {
  margin-top: 5px;
}

/***************************************
Spinners
****************************************/

/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-rotating-plane"></div>
 *
 */

.sk-spinner-rotating-plane.sk-spinner {
  width: 30px;
  height: 30px;
  background-color: #000000;
  margin: 0 auto;
  -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) rotateX(0deg) rotateY(0deg);
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }

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

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

@keyframes sk-rotatePlane {
  0% {
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }

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

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

/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-double-bounce">
 *      <div class="sk-double-bounce1"></div>
 *      <div class="sk-double-bounce2"></div>
 *    </div>
 *
 */

.sk-spinner-double-bounce.sk-spinner {
  width: 40px;
  height: 40px;
  position: relative;
  margin: 0 auto;
}

.sk-spinner-double-bounce .sk-double-bounce1,
.sk-spinner-double-bounce .sk-double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #000000;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: sk-doubleBounce 2s infinite ease-in-out;
  animation: sk-doubleBounce 2s infinite ease-in-out;
}

.sk-spinner-double-bounce .sk-double-bounce2 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

@-webkit-keyframes sk-doubleBounce {
  0%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes sk-doubleBounce {
  0%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-wave">
 *      <div class="sk-rect1"></div>
 *      <div class="sk-rect2"></div>
 *      <div class="sk-rect3"></div>
 *      <div class="sk-rect4"></div>
 *      <div class="sk-rect5"></div>
 *    </div>
 *
 */

.sk-spinner-wave.sk-spinner {
  margin: 0 auto;
  width: 50px;
  height: 60px;
  text-align: center;
  font-size: 10px;
}

.sk-spinner-wave div {
  background-color: #000000;
  height: 100%;
  width: 6px;
  margin: 0 1px;
  display: inline-block;
  -webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
  animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
}

.sk-spinner-wave .sk-rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.sk-spinner-wave .sk-rect3 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

.sk-spinner-wave .sk-rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.sk-spinner-wave .sk-rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-waveStretchDelay {
  0%, 40%, 100% {
    -webkit-transform: scaleY(0.4);
    transform: scaleY(0.4);
  }

  20% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}

@keyframes sk-waveStretchDelay {
  0%, 40%, 100% {
    -webkit-transform: scaleY(0.4);
    transform: scaleY(0.4);
  }

  20% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}

/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-wandering-cubes">
 *      <div class="sk-cube1"></div>
 *      <div class="sk-cube2"></div>
 *    </div>
 *
 */

.sk-spinner-wandering-cubes.sk-spinner {
  margin: 0 auto;
  width: 32px;
  height: 32px;
  position: relative;
}

.sk-spinner-wandering-cubes .sk-cube1,
.sk-spinner-wandering-cubes .sk-cube2 {
  background-color: #236c86;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 0;
  left: -11px;
  -webkit-animation: sk-wanderingCubeMove 1.8s infinite ease-in-out;
  animation: sk-wanderingCubeMove 1.8s infinite ease-in-out;
}

.sk-spinner-wandering-cubes .sk-cube2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

@-webkit-keyframes sk-wanderingCubeMove {
  25% {
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
    transform: translateX(42px) rotate(-90deg) scale(0.5);
  }

  50% {
    /* Hack to make FF rotate in the right direction */
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
    transform: translateX(42px) translateY(42px) rotate(-179deg);
  }

  50.1% {
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
    transform: translateX(42px) translateY(42px) rotate(-180deg);
  }

  75% {
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  }

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

@keyframes sk-wanderingCubeMove {
  25% {
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
    transform: translateX(42px) rotate(-90deg) scale(0.5);
  }

  50% {
    /* Hack to make FF rotate in the right direction */
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
    transform: translateX(42px) translateY(42px) rotate(-179deg);
  }

  50.1% {
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
    transform: translateX(42px) translateY(42px) rotate(-180deg);
  }

  75% {
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  }

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

/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-pulse"></div>
 *
 */

.sk-spinner-pulse.sk-spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  background-color: #236c86;
  border-radius: 100%;
  -webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out;
  animation: sk-pulseScaleOut 1s infinite ease-in-out;
}

@-webkit-keyframes sk-pulseScaleOut {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes sk-pulseScaleOut {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-chasing-dots">
 *      <div class="sk-dot1"></div>
 *      <div class="sk-dot2"></div>
 *    </div>
 *
 */

.sk-spinner-chasing-dots.sk-spinner {
  margin: 0 auto;
  width: 40px;
  height: 40px;
  position: relative;
  text-align: center;
  -webkit-animation: sk-chasingDotsRotate 2s infinite linear;
  animation: sk-chasingDotsRotate 2s infinite linear;
}

.sk-spinner-chasing-dots .sk-dot1,
.sk-spinner-chasing-dots .sk-dot2 {
  width: 60%;
  height: 60%;
  display: inline-block;
  position: absolute;
  top: 0;
  background-color: #000000;
  border-radius: 100%;
  -webkit-animation: sk-chasingDotsBounce 2s infinite ease-in-out;
  animation: sk-chasingDotsBounce 2s infinite ease-in-out;
}

.sk-spinner-chasing-dots .sk-dot2 {
  top: auto;
  bottom: 0px;
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

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

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

@-webkit-keyframes sk-chasingDotsBounce {
  0%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes sk-chasingDotsBounce {
  0%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-three-bounce">
 *      <div class="sk-bounce1"></div>
 *      <div class="sk-bounce2"></div>
 *      <div class="sk-bounce3"></div>
 *    </div>
 *
 */

.sk-spinner-three-bounce.sk-spinner {
  margin: 0 auto;
  width: 70px;
  text-align: center;
}

.sk-spinner-three-bounce div {
  width: 18px;
  height: 18px;
  background-color: #000000;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-threeBounceDelay 1.4s infinite ease-in-out;
  animation: sk-threeBounceDelay 1.4s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.sk-spinner-three-bounce .sk-bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.sk-spinner-three-bounce .sk-bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-threeBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes sk-threeBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-circle">
 *      <div class="sk-circle1 sk-circle"></div>
 *      <div class="sk-circle2 sk-circle"></div>
 *      <div class="sk-circle3 sk-circle"></div>
 *      <div class="sk-circle4 sk-circle"></div>
 *      <div class="sk-circle5 sk-circle"></div>
 *      <div class="sk-circle6 sk-circle"></div>
 *      <div class="sk-circle7 sk-circle"></div>
 *      <div class="sk-circle8 sk-circle"></div>
 *      <div class="sk-circle9 sk-circle"></div>
 *      <div class="sk-circle10 sk-circle"></div>
 *      <div class="sk-circle11 sk-circle"></div>
 *      <div class="sk-circle12 sk-circle"></div>
 *    </div>
 *
 */

.sk-spinner-circle.sk-spinner {
  margin: 0 auto;
  width: 22px;
  height: 22px;
  position: relative;
}

.sk-spinner-circle .sk-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.sk-spinner-circle .sk-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 20%;
  height: 20%;
  background-color: #000000;
  border-radius: 100%;
  -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out;
  animation: sk-circleBounceDelay 1.2s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.sk-spinner-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

.sk-spinner-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}

.sk-spinner-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.sk-spinner-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  transform: rotate(120deg);
}

.sk-spinner-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  transform: rotate(150deg);
}

.sk-spinner-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.sk-spinner-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
  -ms-transform: rotate(210deg);
  transform: rotate(210deg);
}

.sk-spinner-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
  -ms-transform: rotate(240deg);
  transform: rotate(240deg);
}

.sk-spinner-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

.sk-spinner-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
  -ms-transform: rotate(300deg);
  transform: rotate(300deg);
}

.sk-spinner-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
  -ms-transform: rotate(330deg);
  transform: rotate(330deg);
}

.sk-spinner-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.sk-spinner-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

.sk-spinner-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.sk-spinner-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

.sk-spinner-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}

.sk-spinner-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}

.sk-spinner-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}

.sk-spinner-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

.sk-spinner-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

.sk-spinner-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}

.sk-spinner-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-cube-grid">
 *      <div class="sk-cube"></div>
 *      <div class="sk-cube"></div>
 *      <div class="sk-cube"></div>
 *      <div class="sk-cube"></div>
 *      <div class="sk-cube"></div>
 *      <div class="sk-cube"></div>
 *      <div class="sk-cube"></div>
 *      <div class="sk-cube"></div>
 *      <div class="sk-cube"></div>
 *    </div>
 *
 */

.sk-spinner-cube-grid {
  /*
   * Spinner positions
   * 1 2 3
   * 4 5 6
   * 7 8 9
   */
}

.sk-spinner-cube-grid.sk-spinner {
  width: 30px;
  height: 30px;
  margin: 0 auto;
}

.sk-spinner-cube-grid .sk-cube {
  width: 33%;
  height: 33%;
  background: #000000;
  float: left;
  -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
  animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}

.sk-spinner-cube-grid .sk-cube:nth-child(1) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.sk-spinner-cube-grid .sk-cube:nth-child(2) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.sk-spinner-cube-grid .sk-cube:nth-child(3) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.sk-spinner-cube-grid .sk-cube:nth-child(4) {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.sk-spinner-cube-grid .sk-cube:nth-child(5) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.sk-spinner-cube-grid .sk-cube:nth-child(6) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.sk-spinner-cube-grid .sk-cube:nth-child(7) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.sk-spinner-cube-grid .sk-cube:nth-child(8) {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.sk-spinner-cube-grid .sk-cube:nth-child(9) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

@-webkit-keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  }

  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  }
}

@keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  }

  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  }
}

/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-fading-circle">
 *      <div class="sk-circle1 sk-circle"></div>
 *      <div class="sk-circle2 sk-circle"></div>
 *      <div class="sk-circle3 sk-circle"></div>
 *      <div class="sk-circle4 sk-circle"></div>
 *      <div class="sk-circle5 sk-circle"></div>
 *      <div class="sk-circle6 sk-circle"></div>
 *      <div class="sk-circle7 sk-circle"></div>
 *      <div class="sk-circle8 sk-circle"></div>
 *      <div class="sk-circle9 sk-circle"></div>
 *      <div class="sk-circle10 sk-circle"></div>
 *      <div class="sk-circle11 sk-circle"></div>
 *      <div class="sk-circle12 sk-circle"></div>
 *    </div>
 *
 */

.sk-spinner-fading-circle.sk-spinner {
  margin: 0 auto;
  width: 22px;
  height: 22px;
  position: relative;
}

.sk-spinner-fading-circle .sk-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.sk-spinner-fading-circle .sk-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 18%;
  height: 18%;
  background-color: #000000;
  border-radius: 100%;
  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out;
  animation: sk-circleFadeDelay 1.2s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.sk-spinner-fading-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

.sk-spinner-fading-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}

.sk-spinner-fading-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.sk-spinner-fading-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  transform: rotate(120deg);
}

.sk-spinner-fading-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  transform: rotate(150deg);
}

.sk-spinner-fading-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.sk-spinner-fading-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
  -ms-transform: rotate(210deg);
  transform: rotate(210deg);
}

.sk-spinner-fading-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
  -ms-transform: rotate(240deg);
  transform: rotate(240deg);
}

.sk-spinner-fading-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

.sk-spinner-fading-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
  -ms-transform: rotate(300deg);
  transform: rotate(300deg);
}

.sk-spinner-fading-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
  -ms-transform: rotate(330deg);
  transform: rotate(330deg);
}

.sk-spinner-fading-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.sk-spinner-fading-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

.sk-spinner-fading-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.sk-spinner-fading-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

.sk-spinner-fading-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}

.sk-spinner-fading-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}

.sk-spinner-fading-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}

.sk-spinner-fading-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

.sk-spinner-fading-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

.sk-spinner-fading-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}

.sk-spinner-fading-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleFadeDelay {
  0%, 39%, 100% {
    opacity: 0;
  }

  40% {
    opacity: 1;
  }
}

@keyframes sk-circleFadeDelay {
  0%, 39%, 100% {
    opacity: 0;
  }

  40% {
    opacity: 1;
  }
}

@-webkit-keyframes pgAnimLoading {
  from {
    opacity: 0;
  }
}

@-moz-keyframes pgAnimLoading {
  from {
    opacity: 0;
  }
}

@-o-keyframes pgAnimLoading {
  from {
    opacity: 0;
  }
}

@-ms-keyframes pgAnimLoading {
  from {
    opacity: 0;
  }
}

@keyframes pgAnimLoading {
  from {
    opacity: 0;
  }
}

.inputy {
  border-radius: 0px 5px 5px 0px;
  border: 1px solid #ccc;
  margin-bottom: 15px;
  width: 75%;
  height: 40px;
  float: left;
  padding: 0px 15px;
}

textarea {
  border-radius: 0px 5px 5px 0px;
  border: 1px solid #CCC;
  margin: 0;
  width: 75%;
  height: 130px;
  float: left;
  padding: 0px 15px;
}

.form-groupy {
  overflow: hidden;
  clear: both;
}

.icon-case {
  width: 35px;
  float: left;
  border-radius: 5px 0px 0px 5px;
  background: #eeeeee;
  height: 42px;
  position: relative;
  text-align: center;
  line-height: 40px;
}

.contentform {
  padding: 40px 30px;
}

.bouton-contact {
  background-color: #81BDA4;
  color: #FFF;
  text-align: center;
  width: 100%;
  border: 0;
  padding: 17px 25px;
  border-radius: 0px 0px 5px 5px;
  cursor: pointer;
  margin-top: 40px;
  font-size: 18px;
}

.leftcontact {
  width: 49.5%;
  float: left;
  border-right: 1px dotted #CCC;
  box-sizing: border-box;
  padding: 0px 15px 0px 0px;
}

.rightcontact {
  width: 49.5%;
  float: right;
  box-sizing: border-box;
  padding: 0px 0px 0px 15px;
}

.inputdemoIcons {
  /*
.right-icon {
  position: absolute;
  top: 4px;
  right: 2px;
  left: auto;
  margin-top: 0;
}
*/
}

.inputdemoIcons .inputIconDemo {
  min-height: 48px;
}

.inputdemoIcons md-input-container:not(.md-input-invalid) > md-icon.email {
  color: green;
}

.inputdemoIcons md-input-container:not(.md-input-invalid) > md-icon.name {
  color: dodgerblue;
}

.inputdemoIcons md-input-container.md-input-invalid > md-icon.email,
.inputdemoIcons md-input-container.md-input-invalid > md-icon.name {
  color: red;
}

/* Material Icons: cargado via <link> en index.html para evitar que gulp-concat-css
   intente inlinear el @import externo y genere URLs placeholder https://example.com/ */

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}

md-input-container .md-auto-hide .md-input-message-animation:not(.ng-animate) {
  opacity: 0;
  margin-top: -100px;
}

md-input-container:not(.md-input-invalid) .md-auto-hide .md-input-message-animation {
  opacity: 0;
  margin-top: -100px;
}

.md-tooltip {
  /*height: 40px !important;*/
  /*background-color: red !important;*/
  /*color: white !important;*/
  border-radius: 5px;
  font-size: 30px;
  text-align: center;
}

.md-accordion .expandCollapse {
  width: 30px;
  height: 30px;
  position: relative;
  font-size: 17px;
  font-weight: bold;
  cursor: pointer;
  color: #fff;
  display: block;
  margin-top: -2px;
  margin-left: -2px;
  overflow: hidden;
}

.md-accordion .expandCollapse:active {
  border: 0px;
}

.md-accordion .expandCollapse:before,
.md-accordion .expandCollapse:after {
  width: 30px;
  height: 30px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  line-height: 32px;
  text-align: center;
  -webkit-transition: .3s all ease-out;
  transition: .3s all ease-out;
}

.md-accordion .expandCollapse:before {
  opacity: 1 -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  content: "|";
  margin-top: -3px;
}

.md-accordion .expandCollapse:after {
  opacity: 1;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  content: "|";
  margin-left: -3px;
}

.md-accordion .active:before {
  opacity: 1;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  margin-left: 3px;
  margin-top: 0px;
}

.md-accordion .dataContent {
  background: #F2F2F2;
  height: 0px;
  overflow: hidden;
  -webkit-transition: .3s all ease-out;
  transition: .3s all ease-out;
}

.md-accordion .activeContent {
  height: 30vh;
  padding: 0;
  display: block;
}

.md-accordion md-toolbar {
  cursor: pointer;
  border-bottom: 1px solid rgb(63,107,181);
  background-color: #00396f;
  /*background-color: #00acd7;*/
}

.dialogdemoBasicUsage #popupContainer {
  position: relative;
}

.dialogdemoBasicUsage .footer {
  width: 100%;
  text-align: center;
  margin-left: 20px;
}

.dialogdemoBasicUsage .footer,
.dialogdemoBasicUsage .footer > code {
  font-size: 0.8em;
  margin-top: 50px;
}

.dialogdemoBasicUsage button {
  width: 200px;
}

.dialogdemoBasicUsage div#status {
  color: #c60008;
}

.dialogdemoBasicUsage .dialog-demo-prerendered md-checkbox {
  margin-bottom: 0;
}

/*.material-label {
    font-size: 3em;
    line-height: 1;
    display: block;
    color: #424242;
    margin: .5em 0
}


    .material-icons.mdl-badge[data-badge]::after,
    .material-label.mdl-badge[data-badge]::after {
        font-size: .3em;
        width: 2em;
        height: 2em;
    }

.material-icons.mdl-badge[data-badge]::after {
    top: -1em;
    right: -1em;
}*/

/**
    CHAT STYLES BY DOM
*/

div.chat-container {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

form.chat-input {
  position: relative;
  order: 2;
  height: 62px;
  background: rgba(233,234,243,1.0);
}

div.chat-messages {
  order: 1;
  flex: 1;
  overflow: scroll;
  overflow-x: hidden;
  padding-bottom: 40px;
  background: linear-gradient( to bottom, rgb(122,214,184) 0%, rgb(122,214,184) 100% );
  background-size: 100% 10px;
  background-repeat: no-repeat;
}

/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
Chat Messages
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

div.angularjs-chat-logo {
  display: inline-block;
  background: transparent url("../../../../../../images/user-lock.png");
  background-size: 100%;
  background-repeat: no-repeat;
}

div.chat-header div.angularjs-chat-logo {
  width: 4.0em;
  height: 4.1em;
  position: relative;
  top: 1.3em;
  left: -1em;
  animation: chat-header-intro 2.0s ease-out 0s;
}

div.chat-header {
  text-align: center;
  font-size: 1.5em;
  font-weight: 200;
  color: rgba(32,40,70,0.8);
  padding-top: 10px;
  padding-bottom: 36px;
  animation: chat-header-intro 2.2s ease-out 0s;
}

div.sent-message {
  float: right;
  margin-top: 10px;
  margin-right: 10px;
  border-radius: 2px;
  display: inline-block;
  color: rgba(32,40,70,0.9);
  padding: 14px;
  font-size: 0.8em;
  font-weight: 400;
  background: rgba(233,234,243,1.0);
  animation: sent-message 0.9s ease-out 0s;
}

div.sent-message.me {
  float: left;
  margin-top: 10px;
  margin-left: 10px;
  border-radius: 2px;
  display: inline-block;
  color: rgba(32,40,70,0.9);
  padding: 12px;
  border: 1px solid rgba(32,40,70,0.4);
  font-size: 0.8em;
  font-weight: 400;
  background: rgba(255,255,255,0.9);
  animation: received-message 0.9s ease-out 0s;
}

span.username {
  font-weight: 600;
}

@keyframes chat-header-intro {
  0% {
    transform: translate(-100px,0px);
    opacity: 0;
  }

  42% {
    transform: translate(-80px,0px);
    opacity: 0.8;
  }

  60% {
    transform: translate(3px,0px) scale(0.96,1.04);
    opacity: 1;
  }

  65% {
    transform: translate(2px,0px);
    opacity: 1;
  }

  80% {
    transform: translate(-2px,0px);
    opacity: 1;
  }

  90% {
    transform: translate(1px,0px);
    opacity: 1;
  }

  100% {
    transform: translate(0px,0px);
    opacity: 1;
  }
}

@keyframes sent-message {
  0% {
    color: rgba(32,40,70,0.9);
    transform: translate(100px,50px);
    opacity: 0;
  }

  42% {
    color: rgba(32,40,70,0.9);
    transform: translate(80px,40px);
    opacity: 0.8;
  }

  60% {
    color: rgba(144,134,251,0.3);
    transform: translate(-3px,-7px);
    opacity: 1;
  }

  80% {
    color: rgba(32,40,70,0.5);
    transform: translate(2px,3px);
    opacity: 1;
  }

  90% {
    color: rgba(32,40,70,0.7);
    transform: translate(-1px,-2px);
    opacity: 1;
  }

  100% {
    color: rgba(32,40,70,0.9);
    transform: translate(0px,0px);
    opacity: 1;
  }
}

@keyframes received-message {
  0% {
    color: rgba(32,40,70,0.9);
    transform: translate(-100px,0px);
    opacity: 0;
  }

  42% {
    color: rgba(32,40,70,0.9);
    transform: translate(-80px,0px);
    opacity: 0.8;
  }

  60% {
    color: rgba(122,214,184,0.9);
    transform: translate(3px,0px);
    opacity: 1;
  }

  80% {
    color: rgba(32,40,70,0.6);
    transform: translate(-2px,0px);
    opacity: 1;
  }

  90% {
    color: rgba(32,40,70,0.8);
    transform: translate(1px,0px);
    opacity: 1;
  }

  100% {
    color: rgba(32,40,70,0.9);
    transform: translate(0px,0px);
    opacity: 1;
  }
}

@keyframes send-indicator {
  0% {
    transform: scale(0.1);
    opacity: 1;
  }

  30% {
    transform: scale(1.0);
    opacity: 1;
  }

  70% {
    transform: scale(4.0);
    opacity: 0.5;
  }

  100% {
    transform: scale(10.0);
    opacity: 0;
  }
}

/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
User Input
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

form.chat-input input[type="text"] {
  width: 80%;
  color: rgba(32,40,70,0.9);
  padding: 20px;
  background: transparent;
}

form.chat-input input[type="submit"] {
  position: absolute;
  bottom: 10px;
  right: 10px;
  border-radius: 100px;
  background: rgba(144,134,251,1.0);
  color: rgba(255,255,255,1.0);
  width: 42px;
  height: 42px;
  overflow: hidden;
}

form.chat-input input[type="submit"].send-icon {
  background: rgba(144,134,251,1.0) url("../../../../../../images/send.svg");
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: 7px 8px;
}

form.chat-input input[type="submit"].sent-indicator {
  opacity: 0;
  background: rgba(144,134,251,0.97);
  width: 42px;
  height: 42px;
}

form.chat-input input[type="submit"].sending {
  animation: send-indicator 0.9s ease-out 0s;
}

md-tabs.md-default-theme md-ink-bar,
md-tabs md-ink-bar {
  background-color: #00acd7;
  color: black;
}

.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: #ffffff;
  /* box-shadow: 0px -3px 3px 0px rgba(50, 50, 50, 0.1); */
}

.bottom .input {
  height: 64px;
  background: #ffffff;
  border: none;
  width: calc(100% - 64px);
  position: absolute;
  left: 0;
  top: 0;
  padding: 0 5%;
  resize: none;
  overflow: scroll;
  padding-top: 24px;
  font-weight: 300;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}

.bottom .input:focus {
  outline: none;
}

.bottom .input::-webkit-scrollbar {
  width: 0 !important;
}

.bottom .send {
  position: fixed;
  height: 42.6666666667px;
  width: 42.6666666667px;
  border-radius: 50%;
  border: 0;
  background: #F44336;
  color: #ffffff;
  bottom: 10.6666666667px;
  right: 10.6666666667px;
}

.bottom .send:before {
  content: '';
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/104946/ic_send_white_48dp.png") no-repeat center center;
  background-size: 25.6px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.bottom .send:focus {
  outline: none;
}

.bottom .send:hover {
  cursor: pointer;
}

/*.flexContainer {
    display: flex;
}

.inputField {
    flex: 1;
}*/

.chat {
  /*width: 1000px;*/
  border: solid 1px #EEE;
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.messages {
  margin-top: 30px;
  /*margin-top: 10px;*/
  /*display: flex;*/
  flex-direction: column;
}

.message {
  border-radius: 20px;
  padding: 8px 15px;
  margin-top: 5px;
  margin-bottom: 5px;
  display: inline-block;
}

.yours {
  align-items: flex-start;
}

.yours .message {
  margin-right: 25%;
  background-color: #eee;
  position: relative;
}

.yours .message.last:before {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: -7px;
  height: 20px;
  width: 20px;
  background: #eee;
  border-bottom-right-radius: 15px;
}

.yours .message.last:after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: -10px;
  width: 10px;
  height: 20px;
  background: white;
  border-bottom-right-radius: 10px;
}

.mine {
  align-items: flex-end;
}

.mine .message {
  color: white;
  margin-left: 60%;
  background: linear-gradient(to bottom, #00D0EA 0%, #0085D1 100%);
  background-attachment: fixed;
  position: relative;
}

.mine .message.last:before {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: 0;
  right: -8px;
  height: 20px;
  width: 20px;
  background: linear-gradient(to bottom, #00D0EA 0%, #0085D1 100%);
  background-attachment: fixed;
  border-bottom-left-radius: 15px;
}

.mine .message.last:after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  right: -10px;
  width: 10px;
  height: 20px;
  background: white;
  border-bottom-left-radius: 10px;
}

.bchat {
  font-family: helvetica;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contai {
  bottom: 0;
  position: fixed !important;
  overflow-y: scroll;
}

.textsend {
  padding: 0;
  margin: 0;
  display: block;
  position: fixed;
  height: 30px;
  width: 100%;
}

.sticky {
  position: sticky;
  top: 0;
  font-size: 20px;
}

.pru {
  padding-top: 5px;
}

.md-icon {
  margin: 20px;
  margin-top: 0;
  width: 24px;
  height: 24px;
}

.md-tab > md-icon {
  /*margin-bottom: 5px;*/
}

md-pagination-wrapper,
md-tabs-canvas {
  height: 70px;
}

.mightOverflow {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.XXmightOverflow:hover {
  text-overflow: clip;
  white-space: normal;
  word-break: break-all;
}

.bg-primary {
  color: #f4f3f9;
  background-color: #7266ba;
}

.bg-primary.lt,
.bg-primary .lt {
  background-color: #847abf;
}

.bg-primary.lter,
.bg-primary .lter {
  background-color: #958dc6;
}

.bg-primary.dk,
.bg-primary .dk {
  background-color: #6051b5;
}

.bg-primary.dker,
.bg-primary .dker {
  background-color: #5244a9;
}

.bg-primary.bg,
.bg-primary .bg {
  background-color: #7266ba;
}

.bg-primary a {
  color: #fff;
}

.bg-primary a:hover {
  color: #fff;
}

.bg-environments {
  background-color: #87B79F ;
}

.text-environments {
  color: #00396f;
}

.bg-envi {
  color: #f4f3f9;
  background-color: #1ca3fc;
}

.bg-deletedprj {
  background-color: #edadaf;
}

/*.non-selectable {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


.text-selectable {
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
}*/
/* ==========================================================================
   wizardstyle.css — d4 SaaS Design Language
   Restyled wizard dialogs for CloudStudio.
   Uses --wiz-* tokens. Fallback values defined here for pages that don't
   load theme-variables.css (e.g. Start page).
   ========================================================================== */

/* Fallback --wiz-* defaults for pages without theme-variables.css (e.g. Start page).
   theme-variables.css overrides these when loaded (higher specificity on :root). */

:root {
  --wiz-header-bg: #00396f;
  --wiz-header-text: #ffffff;
  --wiz-header-icon-bg: rgba(255,255,255,0.15);
  --wiz-header-icon-border: rgba(255,255,255,0.25);
  --wiz-close-color: rgba(255,255,255,0.55);
  --wiz-close-bg: rgba(255,255,255,0.08);
  --wiz-close-border: rgba(255,255,255,0.15);
  --wiz-close-hover-bg: rgba(255,255,255,0.20);
  --wiz-modal-bg: #ffffff;
  --wiz-modal-shadow: 0 10px 50px rgba(0,57,111,0.18);
  --wiz-modal-radius: 12px;
  --wiz-body-bg: #ffffff;
  --wiz-footer-bg: #f5f8fb;
  --wiz-footer-border: #d8e4ee;
  --wiz-card-border: #d8e4ee;
  --wiz-card-radius: 9px;
  --wiz-card-header-bg: #f5f8fb;
  --wiz-card-header-text: #4d6782;
  --wiz-input-border: #d8e4ee;
  --wiz-input-border-focus: #00acd7;
  --wiz-input-bg: #ffffff;
  --wiz-input-text: #18293e;
  --wiz-input-placeholder: #8fa8c0;
  --wiz-input-radius: 7px;
  --wiz-btn-primary-bg: #00396f;
  --wiz-btn-primary-text: #ffffff;
  --wiz-btn-primary-shadow: 0 4px 16px rgba(0,57,111,0.30);
  --wiz-btn-primary-shadow-hover: 0 8px 24px rgba(0,57,111,0.40);
  --wiz-btn-prev-bg: #8fa8c0;
  --wiz-btn-prev-text: #ffffff;
  --wiz-step-color: #00acd7;
  --wiz-check-bg: #00396f;
  --wiz-check-text: #ffffff;
  --wiz-label-color: #4d6782;
  --wiz-muted-text: #8fa8c0;
  --wiz-dropdown-bg: #ffffff;
  --wiz-dropdown-border: #d8e4ee;
  --wiz-dropdown-hover-bg: #f5f8fb;
  --wiz-step-done: #00b87c;
  --wiz-surface-2: #e8edf4;
  --wiz-close-hover-red: rgba(232,57,74,0.7);
  --wiz-radio-on-bg: rgba(0,57,111,0.07);
  --wiz-radio-on-border: rgba(0,57,111,0.3);
  --wiz-radio-on-dot: #00396f;
  --wiz-radio-on-text: #00396f;
  --wiz-tpl-item-active-bg: rgba(0,172,215,0.07);
  --wiz-tpl-item-active-text: #00396f;
  --wiz-tpl-item-active-border: #00acd7;
}

/* --------------------------------------------------------------------------
   0. BOX-SIZING RESET — ensure wizard elements don't overflow their container
   XOneHub doesn't have a global box-sizing:border-box reset (unlike the Studio
   which does). Without it, elements with padding + width:100% overflow by 2×padding,
   clipping the close button and footer buttons on the right.
   Scoped to #g-modal so it doesn't affect the rest of the XOneHub UI.
   -------------------------------------------------------------------------- */

#g-modal *,
#g-modal *::before,
#g-modal *::after {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   0b. WIZARD CAROUSEL — horizontal slide transitions
   -------------------------------------------------------------------------- */

.wiz-carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.wiz-track {
  position: relative;
  width: 100%;
  min-height: 100px;
}

.wiz-track > .page-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
  pointer-events: none;
  display: flex;
  flex-direction: column;
}

.wiz-track > .page-container.active {
  position: relative;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  z-index: 1;
}

/* Slide OUT to the left (when going forward) */

.wiz-track > .page-container.wiz-slide-out-left {
  position: absolute;
  opacity: 0;
  transform: translateX(-100%);
  pointer-events: none;
  z-index: 0;
}

/* Slide OUT to the right (when going back — removed after transition) */

.wiz-track > .page-container.wiz-slide-out-right {
  position: absolute;
  opacity: 0;
  transform: translateX(100%);
  pointer-events: none;
  z-index: 0;
}

/* --------------------------------------------------------------------------
   1. CHECKBOX TOGGLE CONTROLS (custom-check, checked-selector-check)
   Preserved exactly — state machine behavior unchanged.
   Both button and label selectors kept for dual compatibility.
   -------------------------------------------------------------------------- */

.custom-check input[type="checkbox"] {
  display: none;
}

/* Button Check Box */

.custom-check input[type="checkbox"] + .btn-group > button span {
  width: 20px;
}

.custom-check input[type="checkbox"] + .btn-group > button:last-child {
  width: 120px;
}

.custom-check input[type="checkbox"] + .btn-group > button span:first-child {
  display: none;
}

.custom-check input[type="checkbox"] + .btn-group > button span:last-child {
  display: inline-block;
}

.custom-check input[type="checkbox"]:checked + .btn-group > button span:first-child {
  display: inline-block;
}

.custom-check input[type="checkbox"]:checked + .btn-group > button span:last-child {
  display: none;
}

/* Label Check Box */

.custom-check input[type="checkbox"] + .btn-group > label span {
  width: 20px;
}

.custom-check input[type="checkbox"] + .btn-group > label:last-child {
  width: 120px;
}

.custom-check input[type="checkbox"] + .btn-group > label span:first-child {
  display: none;
}

.custom-check input[type="checkbox"] + .btn-group > label span:last-child {
  display: inline-block;
}

.custom-check input[type="checkbox"]:checked + .btn-group > label span:first-child {
  display: inline-block;
}

.custom-check input[type="checkbox"]:checked + .btn-group > label span:last-child {
  display: none;
}

.checked-selector-check input[type="checkbox"] {
  display: none;
}

/* Button Check Box */

.checked-selector-check input[type="checkbox"] + .btn-group > button span {
  width: 10px;
}

.checked-selector-check input[type="checkbox"] + .btn-group > button:last-child {
  width: 120px;
}

.checked-selector-check input[type="checkbox"] + .btn-group > button span:first-child {
  display: none;
}

.checked-selector-check input[type="checkbox"] + .btn-group > button span:last-child {
  display: inline-block;
}

.checked-selector-check input[type="checkbox"]:checked + .btn-group > button span:first-child {
  display: inline-block;
}

.checked-selector-check input[type="checkbox"]:checked + .btn-group > button span:last-child {
  display: none;
}

/* Label Check Box */

.checked-selector-check input[type="checkbox"] + .btn-group > label span {
  width: 10px;
}

.checked-selector-check input[type="checkbox"] + .btn-group > label:last-child {
  width: 120px;
}

.checked-selector-check input[type="checkbox"] + .btn-group > label span:first-child {
  display: none;
}

.checked-selector-check input[type="checkbox"] + .btn-group > label span:last-child {
  display: inline-block;
}

.checked-selector-check input[type="checkbox"]:checked + .btn-group > label span:first-child {
  display: inline-block;
}

.checked-selector-check input[type="checkbox"]:checked + .btn-group > label span:last-child {
  display: none;
}

/* --------------------------------------------------------------------------
   2. WIZARD HEADER (af-header)
   d4 SaaS: solid brand-blue bg, flexbox, white title
   -------------------------------------------------------------------------- */

.af-header {
  background-color: var(--wiz-header-bg);
  padding: 14px 18px;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--wiz-modal-radius) var(--wiz-modal-radius) 0 0;
}

.af-header > h2,
.af-title-wrap h2 {
  color: var(--wiz-header-text);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: 0.5px;
  display: inline;
  flex: 1;
}

.af-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.af-title-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.af-btn-icon {
  font-size: 14px;
}

.af-header > button {
  padding: 0;
  color: var(--wiz-header-text);
  opacity: 1;
  display: inline;
}

.af-header > button,
.af-header > h2,
.af-title-wrap h2 {
  color: var(--wiz-header-text);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   3. CLOSE BUTTON (af-close)
   d4 SaaS: 28x28px rounded, translucent bg/border
   -------------------------------------------------------------------------- */

.af-close,
.af-close:focus {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--wiz-close-bg);
  border: 1px solid var(--wiz-close-border);
  color: var(--wiz-close-color);
  font-size: 18px;
  line-height: 1;
  text-align: center;
  padding: 0;
  margin: 0;
  float: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: background 0.15s, color 0.15s;
  outline: none;
  cursor: pointer;
  flex-shrink: 0;
}

/* Override Bootstrap .modal-header .close (higher specificity) */

.modal-header .af-close,
.modal-header .af-close:focus {
  padding: 0;
  margin: 0;
  float: none;
}

.af-close:hover {
  background-color: var(--wiz-close-hover-bg);
  border: 1px solid var(--wiz-close-border);
  opacity: 1;
  color: var(--wiz-header-text);
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   4. FOOTER (af-footer)
   d4 SaaS: surface bg, border-top, flexbox right-aligned, auto height
   -------------------------------------------------------------------------- */

.af-footer {
  background-color: var(--wiz-footer-bg);
  border-top: 1.5px solid var(--wiz-footer-border);
  padding: 10px 18px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  height: auto;
  min-height: 48px;
  border-radius: 0 0 var(--wiz-modal-radius) var(--wiz-modal-radius);
}

.af-footer > button {
  height: auto;
  width: auto;
  padding: 11px 30px;
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--font-ui);
  font-weight: 700;
  text-transform: uppercase;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--wiz-btn-primary-bg);
  color: var(--wiz-btn-primary-text);
  box-shadow: var(--wiz-btn-primary-shadow);
  transition: box-shadow 0.18s, transform 0.12s, background-color 0.15s;
  cursor: pointer;
  letter-spacing: 0.5px;
}

.af-footer > button:hover {
  box-shadow: var(--wiz-btn-primary-shadow-hover);
  transform: translateY(-1px);
}

.af-footer > button:active {
  transform: translateY(0);
}

.af-footer > button > span.af-next {
  margin-left: 6px;
}

/* Loading button container */

.xone-loading-button-container button[disabled] {
  opacity: .6;
  cursor: default;
}

.xone-loading-button-container button.confirm[disabled] {
  color: transparent;
}

.xone-loading-button-container button.confirm[disabled] ~ .la-ball-fall {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.xone-loading-button-container {
  width: auto;
  display: inline-block;
  position: relative;
}

.xone-loading-button-container .la-ball-fall {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -27px;
  margin-top: 4px;
  opacity: 0;
  visibility: hidden;
}

/* --------------------------------------------------------------------------
   5. STEP DOTS (af-step)
   d4 SaaS: circular dots, cyan border/fill
   -------------------------------------------------------------------------- */

.af-step {
  flex: 1;
  height: auto;
  display: flex;
  align-items: center;
  white-space: nowrap;
  text-align: left;
  padding: 0 10px;
  color: var(--wiz-step-color);
}

.af-step ul {
  margin: 0;
  padding: 0;
  counter-reset: step;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
}

.af-step ul li {
  list-style-type: none;
  position: relative;
  text-align: center;
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid var(--wiz-step-color);
  border-radius: 50%;
  font-size: 0;
  transition: background-color 0.2s;
}

.af-step ul li.af-step-active {
  background-color: var(--wiz-step-color);
}

/* --------------------------------------------------------------------------
   6. BODY (af-small-text)
   -------------------------------------------------------------------------- */

.af-small-text {
  font-size: 15px;
  text-align: center;
  color: var(--wiz-muted-text);
  margin: 0;
  padding: 6px 0;
}

/* --------------------------------------------------------------------------
   7. GROUPS / CARDS (af-group)
   d4 SaaS: card-style with subtle borders, radius
   -------------------------------------------------------------------------- */

.af-group {
  border: 1.5px solid var(--wiz-card-border);
  border-radius: var(--wiz-card-radius);
  padding: 14px;
  margin: 8px 4px;
  background: var(--wiz-body-bg);
  transition: border-color 0.15s;
}

/* --------------------------------------------------------------------------
   8. DROPDOWNS (af-dropdown)
   d4 SaaS: themed backgrounds, rounded
   -------------------------------------------------------------------------- */

.af-dropdown > button {
  text-align: left;
  background: var(--wiz-input-bg);
  border: 1.5px solid var(--wiz-input-border);
  border-radius: var(--wiz-input-radius);
  color: var(--wiz-input-text);
  transition: border-color 0.15s;
}

.af-dropdown > button:focus {
  border-color: var(--wiz-input-border-focus);
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,172,215,0.15);
}

.af-dropdown-text {
  display: inline-block;
  width: 99%;
}

.af-dropdown-toogle {
  display: inline-block;
  width: 1%;
}

.open .af-dropdown-menu {
  border-color: var(--wiz-dropdown-border);
  border-width: 1px;
  border-style: solid;
  background-color: var(--wiz-dropdown-bg) !important;
  border-radius: var(--wiz-input-radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}

.af-dropdown-button span.caret {
  position: absolute;
  right: 2%;
  top: 45%;
}

.open .af-dropdown-menu > li > a {
  background-color: transparent !important;
  color: var(--wiz-input-text) !important;
  padding: 8px 14px;
  transition: background-color 0.12s;
}

.open .af-dropdown-menu > li > a:hover {
  background-color: var(--wiz-dropdown-hover-bg) !important;
}

/* --------------------------------------------------------------------------
   9. CHECK / BADGE (af-check)
   -------------------------------------------------------------------------- */

.af-check {
  background-color: var(--wiz-check-bg);
  border-color: var(--wiz-check-bg);
  color: var(--wiz-check-text);
  border-radius: 4px;
}

.af-check-text {
  overflow: hidden;
}

.af-hidden {
  display: none;
}

/* --------------------------------------------------------------------------
   10. PREV BUTTON (af-btn-prev)
   -------------------------------------------------------------------------- */

button.af-btn-prev {
  margin: 0;
  background-color: var(--wiz-btn-prev-bg);
  color: var(--wiz-btn-prev-text);
  box-shadow: none;
}

button.af-btn-prev:hover {
  opacity: 0.9;
}

/* --------------------------------------------------------------------------
   11. RADIO STATE MACHINE (af-custom-radio*)
   Preserved exactly — visibility/display logic unchanged.
   Both button and label selectors kept.
   -------------------------------------------------------------------------- */

input.af-custom-radio {
  display: none;
}

div.af-custom-radioc1,
div.af-custom-radioc2,
div.af-custom-radioc3,
div.af-custom-radioc4,
div.af-custom-radioc5,
div.af-custom-radioc6,
div.af-custom-radioc7,
div.af-custom-radioc8,
div.af-custom-radioc9,
div.af-custom-radioc10 {
  visibility: hidden;
}

.af-custom-radioc1,
.af-custom-radioc2,
.af-custom-radioc3,
.af-custom-radioc4,
.af-custom-radioc5,
.af-custom-radioc6,
.af-custom-radioc7,
.af-custom-radioc8,
.af-custom-radioc9,
.af-custom-radioc10 {
  display: none;
}

Button.af-custom-radioc1,
Button.af-custom-radioc2,
Button.af-custom-radioc3,
Button.af-custom-radioc4,
Button.af-custom-radioc5,
Button.af-custom-radioc6,
Button.af-custom-radioc7,
Button.af-custom-radioc8,
Button.af-custom-radioc9,
Button.af-custom-radioc10 {
  display: none;
}

div.af-custom-radio1 > button span,
div.af-custom-radio2 > button span,
div.af-custom-radio3 > button span,
div.af-custom-radio4 > button span,
div.af-custom-radio5 > button span,
div.af-custom-radio6 > button span,
div.af-custom-radio7 > button span,
div.af-custom-radio8 > button span,
div.af-custom-radio9 > button span,
div.af-custom-radio10 > button span {
  opacity: 0;
}

div.af-custom-radio1 > label span,
div.af-custom-radio2 > label span,
div.af-custom-radio3 > label span,
div.af-custom-radio4 > label span,
div.af-custom-radio5 > label span,
div.af-custom-radio6 > label span,
div.af-custom-radio7 > label span,
div.af-custom-radio8 > label span,
div.af-custom-radio9 > label span,
div.af-custom-radio10 > label span {
  opacity: 0;
}

input.af-custom-radio1:checked ~ div div.af-custom-radio1 > button span,
input.af-custom-radio2:checked ~ div div.af-custom-radio2 > button span,
input.af-custom-radio3:checked ~ div div.af-custom-radio3 > button span,
input.af-custom-radio4:checked ~ div div.af-custom-radio4 > button span,
input.af-custom-radio5:checked ~ div div.af-custom-radio5 > button span,
input.af-custom-radio6:checked ~ div div.af-custom-radio6 > button span,
input.af-custom-radio7:checked ~ div div.af-custom-radio7 > button span,
input.af-custom-radio8:checked ~ div div.af-custom-radio8 > button span,
input.af-custom-radio9:checked ~ div div.af-custom-radio9 > button span,
input.af-custom-radio10:checked ~ div div.af-custom-radio10 > button span {
  opacity: 1;
}

input.af-custom-radio1:checked ~ div div.af-custom-radio1 > label span,
input.af-custom-radio2:checked ~ div div.af-custom-radio2 > label span,
input.af-custom-radio3:checked ~ div div.af-custom-radio3 > label span,
input.af-custom-radio4:checked ~ div div.af-custom-radio4 > label span,
input.af-custom-radio5:checked ~ div div.af-custom-radio5 > label span,
input.af-custom-radio6:checked ~ div div.af-custom-radio6 > label span,
input.af-custom-radio7:checked ~ div div.af-custom-radio7 > label span,
input.af-custom-radio8:checked ~ div div.af-custom-radio8 > label span,
input.af-custom-radio9:checked ~ div div.af-custom-radio9 > label span,
input.af-custom-radio10:checked ~ div div.af-custom-radio10 > label span {
  opacity: 1;
}

input.af-custom-radio1:checked ~ div div.af-custom-radioc1,
input.af-custom-radio2:checked ~ div div.af-custom-radioc2,
input.af-custom-radio3:checked ~ div div.af-custom-radioc3,
input.af-custom-radio4:checked ~ div div.af-custom-radioc4,
input.af-custom-radio5:checked ~ div div.af-custom-radioc5,
input.af-custom-radio6:checked ~ div div.af-custom-radioc6,
input.af-custom-radio7:checked ~ div div.af-custom-radioc7,
input.af-custom-radio8:checked ~ div div.af-custom-radioc8,
input.af-custom-radio9:checked ~ div div.af-custom-radioc9,
input.af-custom-radio10:checked ~ div div.af-custom-radioc10 {
  visibility: visible;
}

input.af-custom-radio1:checked ~ div  .af-custom-radioc1,
input.af-custom-radio2:checked ~ div  .af-custom-radioc2,
input.af-custom-radio3:checked ~ div  .af-custom-radioc3,
input.af-custom-radio4:checked ~ div  .af-custom-radioc4,
input.af-custom-radio5:checked ~ div  .af-custom-radioc5,
input.af-custom-radio6:checked ~ div  .af-custom-radioc6,
input.af-custom-radio7:checked ~ div  .af-custom-radioc7,
input.af-custom-radio8:checked ~ div  .af-custom-radioc8,
input.af-custom-radio9:checked ~ div  .af-custom-radioc9,
input.af-custom-radio10:checked ~ div  .af-custom-radioc10 {
  display: inline-block;
}

/* --------------------------------------------------------------------------
   12. HELP TOOLTIP (af-help)
   -------------------------------------------------------------------------- */

.af-help:hover {
  color: var(--wiz-step-color);
}

.af-help-text {
  display: none;
  margin-top: 5px;
  margin-bottom: 5px;
  background-color: var(--wiz-header-bg);
  padding: 8px 12px;
  color: var(--wiz-header-text);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  border-radius: var(--wiz-input-radius);
  font-size: 13px;
}

.af-help:hover + .af-help-text {
  display: inline-block;
}

/* --------------------------------------------------------------------------
   13. CONTAINER / PREVIEW (af-container, af-container-preview)
   -------------------------------------------------------------------------- */

.af-container {
  padding: 20px 0;
  background: var(--wiz-body-bg);
}

.af-container .af-edit-background {
  color: var(--wiz-input-text);
  transition: background 0.8s, border-color 0.8s, color 0.5s;
  border-color: var(--wiz-card-border);
  border-width: 1px 1px 0px 1px;
  border-style: solid;
}

.af-edit-background {
  display: inline-block;
  height: 30px;
  background: var(--wiz-body-bg);
  border-radius: 10px 10px 0 0;
}

.af-container .af-edit-background .glyphicon {
  padding: 5px;
  font-size: 15px;
  top: 0px;
}

.af-container .af-edit-background:hover .glyphicon {
  top: -5px;
}

.af-container .af-edit-background:hover .af-float-text {
  width: 140px;
  font-size: 12px;
}

.af-container .af-edit-background .af-float-text {
  display: inline-block;
  padding: 4px;
  width: 0px;
  font-size: 0px;
  overflow: hidden;
  transition: width 0.5s;
  white-space: nowrap;
}

.af-container .af-edit-background:hover,
.af-container .af-edit-background:hover ~ div {
  background: var(--wiz-step-color);
  border-color: var(--wiz-input-border-focus);
  color: #ffffff;
}

.af-container-preview {
  width: 276.3px;
  height: 400px;
  background: var(--wiz-body-bg);
  border-width: 1px;
  border-color: var(--wiz-card-border);
  border-style: solid;
  border-radius: var(--wiz-card-radius);
  transition: background 0.8s, border-color 0.8s;
  z-index: 0;
  display: block;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  padding: 5px;
}

/* --------------------------------------------------------------------------
   14. CONTROLS (af-control, af-active, af-focus)
   -------------------------------------------------------------------------- */

.af-control {
  background: var(--wiz-body-bg);
  border-width: 1px;
  border-color: var(--wiz-card-border);
  border-style: dashed;
  color: var(--wiz-muted-text);
  transition: background 0.5s, border-color 0.5s, color 0.5s, border-style 0.5s;
  z-index: 2;
  position: absolute;
  left: 0;
  top: 0;
  text-align: center;
}

.af-control span {
  padding: 1%;
  display: inline-block;
  font-size: 100%;
}

.af-control.af-active:hover {
  background: var(--wiz-step-color);
  border-color: var(--wiz-input-border-focus);
  color: #ffffff;
  border-style: solid;
}

.af-active {
  color: var(--wiz-input-text);
  border-color: var(--wiz-card-border);
  background: var(--wiz-card-header-bg);
}

.af-focus {
  background: rgba(0,172,215,0.25);
  border-color: var(--wiz-input-border-focus);
  color: #ffffff;
  border-style: solid;
}

.parent-overwrite {
  padding: inherit;
  width: inherit;
  height: inherit;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: var(--wiz-body-bg);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}

.af-control:hover ~ .parent-overwrite {
  visibility: visible;
  opacity: 1;
}

.af-display-none {
  display: none;
}

/* --------------------------------------------------------------------------
   15. COLLECTION TABLE (af-newCollTable)
   -------------------------------------------------------------------------- */

.af-newCollTable {
  border-width: 1px 1px 0 0;
  border-style: solid;
  border-color: var(--wiz-card-border);
  max-height: 500px;
  min-height: 500px;
  overflow-y: auto;
  padding: 0 !important;
}

.af-newCollTablePreview {
  border-width: 1px 0 0 0;
  border-style: solid;
  border-color: var(--wiz-card-border);
  background: var(--wiz-card-header-bg);
  max-height: 500px;
  min-height: 500px;
  height: 500px;
  overflow-y: auto;
}

/* --------------------------------------------------------------------------
   16. MENU SYSTEM (af-menu, af-title, af-subtitle)
   d4 SaaS: brand header bg, clean item borders
   -------------------------------------------------------------------------- */

.af-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.af-menu li a {
  padding: 10px 20px;
  display: block;
  text-decoration: none;
}

.af-subtitle,
.af-subtitle:active,
.af-subtitle:visited {
  background: var(--wiz-body-bg);
  border-bottom: 1px solid var(--wiz-card-border);
  border-right: 1px solid var(--wiz-card-border);
  border-left: 1px solid var(--wiz-card-border);
  color: var(--wiz-label-color);
  z-index: 0;
  transition: border .2s, background .2s, color .2s;
}

.af-submenu {
  display: none;
}

.af-title,
.af-title:active,
.af-title:visited {
  background: var(--wiz-header-bg);
  border-right: 1px solid var(--wiz-card-border);
  border-left: 1px solid var(--wiz-card-border);
  border-top: 1px solid rgba(255,255,255,0.08);
  color: var(--wiz-header-text);
  position: relative;
  z-index: 1;
  transition: color .2s, background .2s;
}

.af-title span {
  min-width: 30px;
  color: var(--wiz-header-text);
  border: 1px solid rgba(255,255,255,0.3);
  padding: 3px;
  position: absolute;
  right: 10px;
  top: 6px;
  border-radius: 50px;
  text-align: center;
}

.af-title:hover {
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.06);
}

.af-subtitle:hover {
  background: var(--wiz-dropdown-hover-bg);
  color: var(--wiz-input-text);
}

.af-title.oneSelected {
  color: #ffae0f;
}

.af-subtitle.active {
  border-right: 4px solid var(--wiz-step-color);
  background: var(--wiz-card-header-bg);
  color: var(--wiz-step-color);
}

.af-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --------------------------------------------------------------------------
   17. MENU SEARCH (af-menu-search)
   -------------------------------------------------------------------------- */

.af-menu-search {
  padding: 8px;
  background: var(--wiz-footer-bg);
  white-space: nowrap;
  text-align: center;
}

.af-menu-search input[type=text] {
  display: inline-block;
  width: 88%;
  padding: 6px 14px;
  border-width: 1.5px;
  border-style: solid;
  border-color: var(--wiz-input-border);
  border-radius: var(--wiz-input-radius);
  box-sizing: border-box;
  background: var(--wiz-input-bg);
  color: var(--wiz-input-text);
  font-size: 13px;
  transition: border-color 0.15s;
}

.af-menu-search input[type=text]:focus {
  border-color: var(--wiz-input-border-focus);
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,172,215,0.15);
}

.af-menu-search input[type=text].noFound {
  border-color: #ff4c4d;
}

.af-menu-search div {
  display: inline-block;
  min-width: 30px;
  color: var(--wiz-muted-text);
  text-align: center;
  padding: 7px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--wiz-card-border);
  border-radius: 30px;
  margin-left: 3px;
  transition: color 0.15s, border-color 0.15s;
}

.af-menu-search input:hover {
  border-color: var(--wiz-input-border-focus);
}

.af-menu-search input:hover + div,
.af-menu-search input:focus + div {
  color: var(--wiz-step-color);
}

.af-menu-search div:hover {
  color: var(--wiz-step-color);
  border-color: var(--wiz-step-color);
}

/* --------------------------------------------------------------------------
   18. SLIDESHOW / VIEW AF (af-slideShow-*)
   -------------------------------------------------------------------------- */

.af-slideShow-control {
  height: 100%;
  margin: 0;
}

.af-slideShow-control * {
  height: 100%;
}

.af-slideShow-preview {
  overflow: hidden;
  padding: 0;
  margin: 0;
  position: relative;
  background: var(--wiz-card-header-bg);
}

.af-slideShow-preview div {
  display: inline-block;
  white-space: nowrap;
}

.horizontal {
  width: auto;
  height: 100%;
}

.vertical {
  width: auto;
  height: 100%;
}

.af-slideShow-preview div img {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  transition: height 1s, left 1s, top 1s, z-index .5s;
  -webkit-user-select: none;
  user-select: none;
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.59);
}

.af-miniPreview div {
  display: inline;
}

.af-miniPreview div img {
  width: 50%;
  height: auto;
  margin: 5px 0;
  border-color: var(--wiz-step-color);
  border-width: 0px;
  border-style: solid;
  transition: border-width .2s;
  -webkit-user-select: none;
  user-select: none;
}

.af-miniPreview div img:hover {
  border-color: var(--wiz-step-color);
  border-width: 3px;
  border-style: solid;
}

.af-miniPreview {
  background: var(--wiz-footer-bg);
  margin: 0;
  padding: 0;
  text-align: center;
  overflow: hidden;
}

.af-leftbar {
  background: var(--wiz-header-bg);
  margin: 0;
  padding: 0;
  text-align: center;
}

.af-slideShow-preview-leftButton {
  display: inline-block;
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
  transition: background .5s linear;
}

.af-slideShow-preview-leftButton:after {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.af-slideShow-preview-leftButton > span {
  color: #fff;
  text-align: center;
  height: auto;
  display: inline-block;
  transition: background .5s linear;
  z-index: 9999;
}

.af-slideShow-preview-rightButton {
  display: inline-block;
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
  transition: background .5s linear;
}

.af-slideShow-preview-rightButton:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.af-slideShow-preview-rightButton > span {
  color: #fff;
  text-align: center;
  height: auto;
  z-index: 9999;
}

.af-slideShow-preview-rightButton:hover,
.af-slideShow-preview-leftButton:hover {
  background: var(--wiz-header-bg);
}

.af-slideShow-topBar {
  background: var(--wiz-header-bg);
  height: 65px;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.af-slideShow-preview-styles {
  height: 100%;
  display: inline-block;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  text-align: right;
}

.af-slideShow-preview-styles input {
  display: none;
}

.af-slideShow-preview-styles div,
.af-slideDhow-selStyle-text {
  display: inline-block;
}

.af-slideDhow-selStyle {
  background: #ffffff;
  height: 25px;
  width: 25px;
  border-radius: 200px;
  border: 0px solid #000000;
  transition: height .5s, width .5s, margin-top .5s, border-color .5s, border-width .5s;
  display: block;
}

.af-slideDhow-selStyle:hover {
  height: 35px;
  width: 35px;
}

.af-slideDhow-selStyle-text {
  color: #fff;
  opacity: 0;
  font-weight: bold;
  transition: opacity .5s, padding-right .5s;
  font-size: 18px;
}

.af-slideDhow-selStyle-content {
  text-align: left;
}

.af-slideDhow-selStyle-content > div {
  margin-left: 2.5px;
  margin-right: 2.5px;
}

.af-slideDhow-selStyle-text:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

input:checked + label {
  border-color: #ffffff;
  border-style: solid;
  border-width: 3px;
}

.af-slideDhow-selStyle-text.visible {
  opacity: 1;
  padding-right: 30px;
}

/* --------------------------------------------------------------------------
   19. MISC (circular, tabs)
   -------------------------------------------------------------------------- */

.circular {
  width: 20px;
  height: 20px;
  border-radius: 150px;
  border: 1px solid var(--wiz-card-border);
  background-color: var(--wiz-body-bg);
  margin-left: 10px;
  margin-top: 12.5px;
}

body {
  font-family: var(--font-ui);
}

ul.tab {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--wiz-card-border);
  background-color: var(--wiz-card-header-bg);
  border-radius: var(--wiz-card-radius) var(--wiz-card-radius) 0 0;
}

ul.tab li {
  float: left;
}

ul.tab li a {
  display: inline-block;
  color: var(--wiz-label-color);
  text-align: center;
  padding: 12px 16px;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
  font-size: 14px;
}

ul.tab li a:hover {
  background-color: var(--wiz-dropdown-hover-bg);
  color: var(--wiz-input-text);
}

ul.tab li a:focus,
ul.active {
  background-color: var(--wiz-footer-bg);
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid var(--wiz-card-border);
  border-top: none;
  background: var(--wiz-body-bg);
}

.bootstrap-datetimepicker-widget {
  color: var(--wiz-input-text);
  background-color: var(--wiz-dropdown-bg);
}

/* --------------------------------------------------------------------------
   20. DROPDOWN WIZARD (dropdown_wizard)
   -------------------------------------------------------------------------- */

.dropdown_wizard.dropdown-toggle:active,
.open .dropdown_wizard.dropdown-toggle {
  background-color: var(--wiz-btn-primary-bg) !important;
  color: var(--wiz-btn-primary-text) !important;
}

.dropdown_wizard.dropdown-toggle > li > a,
.dropdown_wizard.dropdown-toggle {
  background-color: var(--wiz-btn-primary-bg) !important;
  color: var(--wiz-btn-primary-text) !important;
  background-image: none;
  border-radius: var(--wiz-input-radius);
}

.dropdown_wizard.dropdown-menu:active,
.open .dropdown_wizard.dropdown-menu {
  border-width: 0px;
  background-color: var(--wiz-btn-primary-bg) !important;
  color: var(--wiz-btn-primary-text) !important;
  border-radius: var(--wiz-input-radius);
}

.dropdown_wizard.dropdown-menu > li > a:focus,
.dropdown_wizard.dropdown-menu > li > a:hover {
  background-color: rgba(0,57,111,0.85) !important;
  color: var(--wiz-btn-primary-text) !important;
  background-image: none !important;
}

.dropdown_wizard.dropdown-menu > li > a,
.dropdown_wizard.dropdown-menu {
  background-color: var(--wiz-btn-primary-bg) !important;
  color: var(--wiz-btn-primary-text) !important;
}

/* --------------------------------------------------------------------------
   21. FORM INPUTS inside wizards
   d4 SaaS: consistent input styling
   -------------------------------------------------------------------------- */

.project-body input[type="text"],
.project-body input[type="number"],
.project-body input[type="password"],
.project-body input[type="email"],
.project-body input[type="url"],
.project-body select,
.project-body textarea {
  background: var(--wiz-input-bg);
  border: 1.5px solid var(--wiz-input-border);
  border-radius: var(--wiz-input-radius);
  color: var(--wiz-input-text);
  padding: 7px 12px;
  font-size: 13px;
  transition: border-color 0.15s;
}

.project-body input[type="text"]:focus,
.project-body input[type="number"]:focus,
.project-body input[type="password"]:focus,
.project-body input[type="email"]:focus,
.project-body input[type="url"]:focus,
.project-body select:focus,
.project-body textarea:focus {
  border-color: var(--wiz-input-border-focus);
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,172,215,0.15);
}

.project-body input::placeholder,
.project-body textarea::placeholder {
  color: var(--wiz-input-placeholder);
}

.project-body label {
  color: var(--wiz-label-color);
  font-weight: 500;
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   22. MODAL OVERRIDES (project-content on modal)
   d4 SaaS: rounded corners, shadow
   -------------------------------------------------------------------------- */

.modal-content.project-content {
  box-shadow: var(--wiz-modal-shadow);
  background: var(--wiz-modal-bg);
}

/* --------------------------------------------------------------------------
   23. DARK THEME SPECIFICITY OVERRIDES
   Override generic [data-theme="dark"] .modal-header / .modal-footer rules
   from theme-variables.css
   -------------------------------------------------------------------------- */

[data-theme="dark"] .af-header {
  background-color: var(--wiz-header-bg) !important;
  color: var(--wiz-header-text) !important;
  border-color: transparent !important;
}

[data-theme="dark"] .af-footer {
  background-color: var(--wiz-footer-bg) !important;
  border-top-color: var(--wiz-footer-border) !important;
}

[data-theme="dark"] .project-body {
  background-color: var(--wiz-body-bg);
}

[data-theme="dark"] .af-group {
  border-color: var(--wiz-card-border);
  background: var(--wiz-body-bg);
}

[data-theme="dark"] .modal-content.project-content {
  background: var(--wiz-modal-bg);
}

/* ==========================================================================
   24. GRID LAYOUT (af-grid-2col)
   d4 SaaS: two-column CSS grid for wizard body content
   ========================================================================== */

.af-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 18px 22px;
}

.af-grid-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ==========================================================================
   25. CARDS (af-card)
   d4 SaaS: bordered cards with header + body sections
   ========================================================================== */

.af-card {
  border: 1.5px solid var(--wiz-card-border);
  border-radius: var(--wiz-card-radius);
  overflow: hidden;
  background: var(--wiz-body-bg);
}

.af-card-hdr {
  padding: 10px 15px;
  background: var(--wiz-card-header-bg);
  border-bottom: 1px solid var(--wiz-card-border);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--wiz-card-header-text);
}

.af-card-body {
  padding: 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ==========================================================================
   26. TOGGLE SWITCH (af-switch)
   d4 SaaS: iOS-style slide toggle, pure CSS via label+input
   ========================================================================== */

.af-switch {
  position: relative;
  width: 34px;
  height: 19px;
  flex-shrink: 0;
  display: inline-block;
}

.af-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.af-switch-slider {
  position: absolute;
  inset: 0;
  border-radius: 9.5px;
  background: var(--wiz-card-border);
  transition: background 0.2s;
  cursor: pointer;
}

.af-switch-slider::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}

.af-switch input:checked + .af-switch-slider {
  background: var(--wiz-btn-primary-bg);
  box-shadow: 0 2px 6px rgba(0,172,215,0.3);
}

.af-switch input:checked + .af-switch-slider::before {
  transform: translateX(15px);
}

/* ==========================================================================
   27. RADIO CIRCLE (af-radio-circle)
   d4 SaaS: circular radio with filled dot, pure CSS via label+input
   ========================================================================== */

.af-radio-circle {
  position: relative;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.af-radio-circle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.af-radio-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--wiz-input-border-focus);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  cursor: pointer;
}

.af-radio-dot::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.15s;
}

.af-radio-circle input:checked + .af-radio-dot {
  background: var(--wiz-btn-primary-bg);
  border-color: var(--wiz-btn-primary-bg);
}

.af-radio-circle input:checked + .af-radio-dot::after {
  background: #fff;
}

/* ==========================================================================
   28. OPTION BUTTON (af-opt-btn)
   d4 SaaS: row container for switch/radio + label text
   ========================================================================== */

.af-opt-btn {
  width: 100%;
  padding: 10px 14px;
  background: var(--wiz-card-header-bg);
  border: 1.5px solid var(--wiz-card-border);
  border-radius: var(--wiz-input-radius);
  color: var(--wiz-input-text);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  transition: all 0.15s;
}

.af-opt-btn:hover {
  border-color: var(--wiz-input-border-focus);
  background: rgba(0,172,215,0.04);
}

.af-opt-btn.af-opt-primary {
  background: rgba(0,172,215,0.07);
  border-color: var(--wiz-input-border-focus);
  color: var(--wiz-btn-primary-bg);
  font-weight: 600;
}

/* ==========================================================================
   29. SUB-OPTIONS (af-sub-options)
   Expandable container for nested options (used with data-xone-toggle)
   ========================================================================== */

.af-sub-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ==========================================================================
   30. FIELD LABEL + IP ROW (af-field-lbl, af-ip-row)
   d4 SaaS: input row with icon buttons
   ========================================================================== */

.af-field-lbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--wiz-label-color);
  margin-bottom: 7px;
}

.af-ip-row {
  display: flex;
  gap: 6px;
}

.af-ip-row .form-control {
  flex: 1;
}

.af-icon-btn {
  width: 35px;
  height: 35px;
  border-radius: var(--wiz-input-radius);
  background: var(--wiz-card-header-bg);
  border: 1.5px solid var(--wiz-card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wiz-label-color);
  font-size: 15px;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.af-icon-btn:hover {
  border-color: var(--wiz-input-border-focus);
  color: var(--wiz-input-border-focus);
}

/* ==========================================================================
   31. QR HEADER ROW (af-qr-hdr-row)
   d4 SaaS: split row with label + toggle button
   ========================================================================== */

.af-qr-hdr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  background: var(--wiz-card-header-bg);
  border-bottom: 1px solid var(--wiz-card-border);
}

.af-qr-lbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--wiz-label-color);
}

.af-drop-btn {
  padding: 5px 12px;
  background: var(--wiz-btn-primary-bg);
  border-radius: 6px;
  color: var(--wiz-btn-primary-text);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: var(--wiz-btn-primary-shadow);
  border: none;
  transition: all 0.15s;
}

.af-drop-btn:hover {
  box-shadow: var(--wiz-btn-primary-shadow-hover);
  transform: translateY(-1px);
}

.af-drop-btn-inline {
  margin-left: auto;
  padding: 3px 10px;
  font-size: 10px;
}

.af-qr-wrap {
  padding: 14px;
  display: flex;
  justify-content: center;
  background: var(--wiz-body-bg);
}

/* ==========================================================================
   32. STATUS AREA (af-status-area)
   Container for error and status alert messages
   ========================================================================== */

.af-status-area {
  padding: 0 22px 10px;
}

.af-status-area .alert {
  margin-top: 10px;
  margin-bottom: 0;
}

/* ==========================================================================
   32b. STEPPER BAR (af-stepper)
   d4 SaaS: horizontal stepper with numbered circles, connecting lines
   ========================================================================== */

.af-stepper {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  background: var(--wiz-card-header-bg);
  border-bottom: 1px solid var(--wiz-card-border);
  gap: 0;
}

.af-step-item {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

.af-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  font-family: var(--font-ui);
}

.af-step-num.done {
  background: var(--wiz-step-done);
  color: #fff;
}

.af-step-num.act {
  background: var(--wiz-btn-primary-bg);
  color: #fff;
}

.af-step-num.todo {
  background: var(--wiz-surface-2);
  color: var(--wiz-muted-text);
  border: 1.5px solid var(--wiz-card-border);
}

.af-step-name {
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-ui);
}

.af-step-name.act {
  color: var(--wiz-btn-primary-bg);
}

.af-step-name.done {
  color: var(--wiz-step-done);
}

.af-step-name.todo {
  color: var(--wiz-muted-text);
}

.af-step-line {
  flex: 1;
  height: 1.5px;
  background: var(--wiz-card-border);
  margin: 0 8px;
}

.af-step-line.done {
  background: var(--wiz-step-done);
}

/* ==========================================================================
   32c. HELP ICON (af-help-icon)
   d4 SaaS: circular info button in card headers
   ========================================================================== */

.af-help-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--wiz-label-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 2px;
  flex-shrink: 0;
  transition: background 0.14s;
}

.af-help-icon:hover {
  background: var(--wiz-btn-primary-bg);
}

.af-help-icon svg {
  width: 9px;
  height: 9px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: round;
}

/* ==========================================================================
   32d. FIELD INPUT (af-field-inp)
   d4 SaaS: standard text input styling for wizard cards
   ========================================================================== */

.af-field-inp {
  width: 100%;
  background: var(--wiz-card-header-bg);
  border: 1.5px solid var(--wiz-card-border);
  border-radius: var(--wiz-input-radius);
  padding: 9px 12px;
  color: var(--wiz-input-text);
  font-family: var(--font-ui);
  font-size: 12px;
  outline: none;
  transition: border-color 0.14s, background 0.14s;
}

.af-field-inp:focus {
  border-color: var(--wiz-input-border-focus);
  background: var(--wiz-modal-bg);
}

.af-field-inp::placeholder {
  color: var(--wiz-muted-text);
}

/* ==========================================================================
   32e. NUMBER INPUTS ROW (af-num-row)
   d4 SaaS: horizontal layout for numeric inputs with labels
   ========================================================================== */

.af-num-row {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.af-num-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.af-num-lbl {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--wiz-label-color);
  font-family: var(--font-ui);
}

.af-num-inp {
  width: 90px;
  background: var(--wiz-card-header-bg);
  border: 1.5px solid var(--wiz-card-border);
  border-radius: var(--wiz-input-radius);
  padding: 7px 10px;
  color: var(--wiz-input-text);
  font-family: var(--font-mono);
  font-size: 12px;
  outline: none;
  transition: border-color 0.14s;
}

.af-num-inp:focus {
  border-color: var(--wiz-input-border-focus);
  background: var(--wiz-modal-bg);
}

/* ==========================================================================
   32f. RADIO LIST (af-radio-list)
   d4 SaaS: vertical radio button list with highlighted active state
   ========================================================================== */

.af-radio-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 8px;
}

.af-radio-item {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 13px 0 10px;
  border-radius: var(--wiz-input-radius);
  border: 1.5px solid var(--wiz-card-border);
  background: var(--wiz-card-header-bg);
  cursor: pointer;
  transition: all 0.14s;
}

.af-radio-item.on {
  background: var(--wiz-radio-on-bg);
  border-color: var(--wiz-radio-on-border);
}

.af-radio-dot-sm {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--wiz-card-border);
  background: var(--wiz-modal-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.14s;
}

.af-radio-item.on .af-radio-dot-sm {
  border-color: var(--wiz-radio-on-dot);
  background: var(--wiz-radio-on-dot);
}

.af-radio-inner-sm {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  display: none;
}

.af-radio-item.on .af-radio-inner-sm {
  display: block;
}

.af-radio-lbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--wiz-label-color);
  font-family: var(--font-ui);
}

.af-radio-item.on .af-radio-lbl {
  color: var(--wiz-radio-on-text);
}

/* ==========================================================================
   32g. DROP ZONE (af-dz-*)
   d4 SaaS: drag-and-drop file upload area with inner dashed border
   ========================================================================== */

.af-dz-lbl {
  font-size: 12px;
  font-weight: 700;
  color: var(--wiz-label-color);
  margin-bottom: 8px;
  font-family: var(--font-ui);
}

.af-dz-wrap {
  border: 1.5px solid var(--wiz-card-border);
  border-radius: 8px;
  background: var(--wiz-card-header-bg);
  padding: 8px;
  position: relative;
  margin-bottom: 10px;
}

.af-dz-inner {
  border: 1.5px dashed var(--wiz-card-border);
  border-radius: 6px;
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wiz-modal-bg);
  cursor: pointer;
  transition: border-color 0.14s, background 0.14s;
  position: relative;
}

.af-dz-inner:hover {
  border-color: var(--wiz-input-border-focus);
  background: rgba(0,172,215,0.03);
}

.af-dz-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.af-dz-content svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--wiz-card-border);
  stroke-width: 1.5;
  stroke-linecap: round;
  transition: stroke 0.14s;
}

.af-dz-inner:hover .af-dz-content svg {
  stroke: rgba(0,172,215,0.4);
}

.af-dz-txt {
  font-size: 11.5px;
  color: var(--wiz-muted-text);
  font-style: italic;
  font-family: var(--font-ui);
}

.af-btn-browse {
  height: 30px;
  padding: 0 12px;
  border-radius: 6px;
  background: var(--wiz-btn-primary-bg);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  font-family: var(--font-ui);
  transition: background 0.14s;
  box-shadow: 0 2px 6px rgba(0,57,111,0.2);
}

.af-btn-browse svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
}

.af-btn-browse:hover {
  background: #004f9e;
}

/* ==========================================================================
   32h. TEMPLATE LAYOUT — Step 2 (af-tpl-*)
   d4 SaaS: split-panel template selection with list + preview
   ========================================================================== */

.af-tpl-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  min-height: 340px;
}

.af-tpl-list-wrap {
  border-right: 1.5px solid var(--wiz-card-border);
  display: flex;
  flex-direction: column;
}

.af-tpl-search-row {
  display: flex;
  gap: 0;
  padding: 8px;
  border-bottom: 1px solid var(--wiz-card-border);
  background: var(--wiz-card-header-bg);
}

.af-tpl-search {
  flex: 1;
  background: var(--wiz-modal-bg);
  border: 1.5px solid var(--wiz-card-border);
  border-radius: 6px 0 0 6px;
  padding: 6px 10px;
  color: var(--wiz-input-text);
  font-family: var(--font-ui);
  font-size: 11.5px;
  outline: none;
  transition: border-color 0.14s;
}

.af-tpl-search:focus {
  border-color: var(--wiz-input-border-focus);
}

.af-tpl-search::placeholder {
  color: var(--wiz-muted-text);
}

.af-tpl-search-btn {
  width: 32px;
  height: 32px;
  background: var(--wiz-btn-primary-bg);
  border: none;
  border-radius: 0 6px 6px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.14s;
  flex-shrink: 0;
}

.af-tpl-search-btn svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
}

.af-tpl-search-btn:hover {
  background: #004f9e;
}

.af-tpl-preview {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.af-tpl-preview-bar {
  height: 40px;
  flex-shrink: 0;
  background: var(--wiz-surface-2);
  border-bottom: 1px solid var(--wiz-card-border);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 10px;
}

.af-tpl-preview-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--bg-page);
}

/* ==========================================================================
   32i. WIZARD GRID (af-wiz-grid2)
   d4 SaaS: 2-column grid for wizard step body
   ========================================================================== */

.af-wiz-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ==========================================================================
   32j. WIZARD CARD (af-wiz-card)
   d4 SaaS: card for wizard steps with header/body sections
   ========================================================================== */

.af-wiz-card {
  border: 1.5px solid var(--wiz-card-border);
  border-radius: var(--wiz-card-radius);
  overflow: hidden;
  background: var(--wiz-modal-bg);
  transition: background 0.2s, border-color 0.2s;
  margin-bottom: 14px;
}

.af-wiz-card:last-child {
  margin-bottom: 0;
}

/* Allow dropdowns inside cards to overflow the card boundary */

.af-wiz-card:has(.open),
.af-wiz-card:has(.dropdown.show) {
  overflow: visible;
}

.af-wiz-card-hdr {
  padding: 9px 14px;
  background: var(--wiz-card-header-bg);
  border-bottom: 1px solid var(--wiz-card-border);
  border-radius: var(--wiz-card-radius) var(--wiz-card-radius) 0 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--wiz-card-header-text);
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
}

.af-wiz-card-hdr svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--wiz-step-color);
  stroke-width: 2;
  stroke-linecap: round;
  flex-shrink: 0;
}

.af-wiz-card-body {
  padding: 13px;
}

/* ==========================================================================
   32k. WIZARD BODY (af-wiz-body)
   d4 SaaS: body area for wizard steps
   ========================================================================== */

.af-wiz-body {
  padding: 16px 20px;
  background: var(--bg-page);
  transition: background 0.2s;
}

.af-wiz-body.no-pad {
  padding: 0;
}

/* ==========================================================================
   32l. WIZARD FOOTER HINT (af-footer-hint)
   d4 SaaS: muted monospace hint text in footer
   ========================================================================== */

.af-footer-hint {
  font-size: 10.5px;
  color: var(--wiz-muted-text);
  margin-right: auto;
  font-family: var(--font-mono);
}

/* ==========================================================================
   32m. SUMMARY CARD (af-summary-*)
   d4 SaaS: summary/review cards for wizard final step
   ========================================================================== */

.af-summary-row {
  display: flex;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--wiz-card-border);
}

.af-summary-row:last-child {
  border-bottom: none;
}

.af-summary-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--wiz-card-header-text);
  min-width: 120px;
  flex-shrink: 0;
  font-family: var(--font-ui);
}

.af-summary-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--wiz-input-text);
  font-family: var(--font-ui);
}

.af-summary-img-row {
  display: flex;
  gap: 20px;
  padding: 10px 0;
}

.af-summary-img-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.af-summary-img-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--wiz-card-header-text);
  font-family: var(--font-ui);
}

.af-summary-img {
  max-height: 120px;
  max-width: 100%;
  border-radius: 8px;
  border: 1.5px solid var(--wiz-card-border);
  object-fit: contain;
  background: var(--wiz-card-header-bg);
}

/* ==========================================================================
   34. COLLECTION WIZARD — Split-Screen Layout (XNXI-46)
   New design: split-screen with sidebar, phone mockup, stepper, radio cards.
   ========================================================================== */

/* --- COLLECTION WIZARD PAGE CONTAINER --- */

.page-container.wiz-collection-page {
  display: flex;
  flex-direction: column;
  align-items: stretch !important;
  height: 780px;
  max-height: 90vh;
}

.page-container.wiz-collection-page .modal-body {
  flex: 1;
  padding: 0;
  overflow: hidden;
  display: flex;
  min-height: 0;
}

.page-container.wiz-collection-page .af-header {
  flex-shrink: 0;
}

.page-container.wiz-collection-page .af-footer {
  flex-shrink: 0;
}

/* --- MODAL SIZE for collection wizard --- */

#g-modal .modal-dialog:has(.wiz-collection-page) {
  width: calc(100vw - 40px);
  max-width: min(1280px, calc(100vw - 40px));
  margin: 20px auto;
}

/* Footer layout — hint on left, buttons on right (match addfile) */

.page-container.wiz-collection-page + .af-footer,
.page-container.wiz-collection-page .af-footer {
  justify-content: flex-end;
  gap: 10px;
}

.page-container.wiz-collection-page .af-footer .af-footer-hint {
  margin-right: auto;
}

.page-container.wiz-collection-page .af-footer .btn.btn-start.af-btn-prev {
  background: transparent;
  color: var(--wiz-btn-primary-bg);
  box-shadow: none;
  border: 1.5px solid var(--wiz-btn-primary-bg);
}

.page-container.wiz-collection-page .af-footer .btn.btn-start.af-btn-prev:hover {
  background: rgba(0,57,111,0.06);
  box-shadow: none;
  transform: none;
}

/* --- SPLIT SCREEN --- */

.wiz-split-screen {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.wiz-sidebar {
  width: 320px;
  min-width: 320px;
  background: var(--wiz-header-bg);
  color: var(--wiz-header-text);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.wiz-sidebar-header {
  padding: 20px 18px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-ui);
  text-transform: uppercase;
}

.wiz-sidebar-header .wiz-icon-plus {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.wiz-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--wiz-body-bg);
  padding: 32px;
}

.wiz-main-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--wiz-input-text);
  font-family: var(--font-ui);
  margin-bottom: 6px;
}

.wiz-main-subtitle {
  font-size: 13px;
  color: var(--wiz-muted-text);
  margin-bottom: 28px;
  line-height: 1.5;
}

/* --- PHONE MOCKUP (Step 1 preview) --- */

.wiz-phone-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--bg-surface-1), var(--bg-surface-2));
  padding: 24px;
  overflow-y: auto;
}

.wiz-phone-mockup {
  width: 220px;
  height: 450px;
  border-radius: 28px;
  border: 3px solid var(--gray-800, #424242);
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  background: #000;
  flex-shrink: 0;
}

.wiz-phone-mockup::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 22px;
  background: #000;
  border-radius: 0 0 14px 14px;
  z-index: 2;
}

.wiz-phone-mockup #previewimage,
.wiz-phone-mockup [data-xone-showviewaf] {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.wiz-phone-mockup #previewimage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- THEME PALETTE (Step 1 color dots) --- */

.wiz-theme-palette {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 10px 18px;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(12px);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.wiz-theme-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--wiz-label-color);
}

.wiz-theme-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s, transform 0.15s;
}

.wiz-theme-dot:hover {
  transform: scale(1.15);
}

.wiz-theme-dot.active {
  border-color: var(--wiz-header-bg);
  box-shadow: 0 0 0 2px rgba(0,57,111,0.3);
}

/* --- SELECTION SUMMARY (Step 1 below phone) --- */

.wiz-selection-summary {
  text-align: center;
  margin-top: 16px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--wiz-muted-text);
}

.wiz-selection-summary strong {
  display: block;
  font-size: 15px;
  color: var(--wiz-input-text);
  margin-top: 4px;
  letter-spacing: 0;
  text-transform: none;
}

/* --- STEPPER (Step 2 sidebar) --- */

.wiz-stepper {
  padding: 24px 18px;
  flex: 1;
}

.wiz-stepper-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  position: relative;
}

.wiz-stepper-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 17px;
  top: 52px;
  width: 2px;
  height: calc(100% - 36px);
  background: rgba(255,255,255,0.15);
}

.wiz-stepper-dot {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.wiz-stepper-item.completed .wiz-stepper-dot {
  background: var(--wiz-step-color);
  color: #fff;
}

.wiz-stepper-item.active .wiz-stepper-dot {
  background: transparent;
  border: 2px solid var(--wiz-step-color);
  position: relative;
}

.wiz-stepper-item.active .wiz-stepper-dot::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--wiz-step-color);
  animation: stepper-pulse 2s ease-in-out infinite;
}

@keyframes stepper-pulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

.wiz-stepper-item.pending .wiz-stepper-dot {
  background: transparent;
  border: 2px solid rgba(255,255,255,0.2);
}

.wiz-stepper-info {
  flex: 1;
  min-width: 0;
}

.wiz-stepper-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--wiz-header-text);
}

.wiz-stepper-item.active .wiz-stepper-title {
  color: var(--wiz-step-color);
}

.wiz-stepper-item.pending .wiz-stepper-title {
  color: rgba(255,255,255,0.35);
}

.wiz-stepper-subtitle {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  margin-top: 4px;
  line-height: 1.4;
}

.wiz-stepper-item.completed .wiz-stepper-subtitle {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wiz-stepper-item.completed .wiz-stepper-subtitle::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wiz-step-color);
  flex-shrink: 0;
}

/* --- RADIO CARDS (Step 2 data source) --- */

.wiz-radio-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 8px;
}

.wiz-radio-card {
  border: 1.5px solid var(--wiz-card-border);
  border-radius: var(--wiz-card-radius);
  padding: 20px 16px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: var(--wiz-body-bg);
  position: relative;
}

.wiz-radio-card:hover {
  border-color: var(--wiz-input-border-focus);
  box-shadow: 0 2px 8px rgba(0,57,111,0.08);
}

.wiz-radio-card.selected {
  border-color: var(--wiz-btn-primary-bg);
  border-width: 2px;
  box-shadow: 0 0 0 3px rgba(0,57,111,0.08);
}

.wiz-radio-card.selected::after {
  content: '\2713';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--wiz-btn-primary-bg);
  color: #fff;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wiz-radio-card-icon {
  font-size: 20px;
  margin-bottom: 8px;
  color: var(--wiz-label-color);
}

.wiz-radio-card-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--wiz-input-text);
  margin-bottom: 6px;
}

.wiz-radio-card-desc {
  font-size: 12px;
  color: var(--wiz-muted-text);
  line-height: 1.5;
}

/* --- GHOST BUTTON (Step 2 "Anterior") --- */

.wiz-ghost-btn {
  background: transparent !important;
  color: var(--wiz-label-color) !important;
  box-shadow: none !important;
  border: none;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.wiz-ghost-btn:hover {
  color: var(--wiz-input-text) !important;
  background: transparent !important;
  transform: none;
}

/* --- FORM SECTION within wiz-main --- */

.wiz-form-section {
  margin-bottom: 24px;
}

.wiz-form-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--wiz-label-color);
  margin-bottom: 12px;
}

.wiz-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.wiz-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wiz-form-group label {
  font-size: 13px;
  font-weight: 500;
  color: var(--wiz-label-color);
  font-family: var(--font-ui);
}

.wiz-form-group .form-control {
  background: var(--wiz-input-bg);
  border: 1.5px solid var(--wiz-input-border);
  border-radius: var(--wiz-input-radius);
  color: var(--wiz-input-text);
  padding: 9px 14px;
  font-size: 13px;
  font-family: var(--font-ui);
  transition: border-color 0.15s;
}

.wiz-form-group .form-control:focus {
  border-color: var(--wiz-input-border-focus);
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,172,215,0.15);
}

.wiz-form-group .form-control::placeholder {
  color: var(--wiz-input-placeholder, var(--wiz-muted-text));
}

/* Sidebar menu container within new layout */

.wiz-sidebar [data-xone-af-menu] {
  flex: 1;
  overflow-y: auto;
}

/* --- DARK THEME overrides for collection wizard --- */

[data-theme="dark"] .wiz-theme-palette {
  background: rgba(30,42,71,0.85);
  border-color: rgba(255,255,255,0.1);
}

[data-theme="dark"] .wiz-theme-dot.active {
  border-color: var(--wiz-step-color);
  box-shadow: 0 0 0 2px rgba(0,172,215,0.3);
}

[data-theme="dark"] .wiz-radio-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

[data-theme="dark"] .wiz-radio-card.selected {
  box-shadow: 0 0 0 3px rgba(0,119,182,0.15);
}

[data-theme="dark"] .wiz-phone-mockup {
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

/* ==========================================================================
   35. DARK THEME — New d4 SaaS Components
   ========================================================================== */

[data-theme="dark"] .af-card {
  border-color: var(--wiz-card-border);
  background: var(--wiz-body-bg);
}

[data-theme="dark"] .af-card-hdr {
  background: var(--wiz-card-header-bg);
  border-bottom-color: var(--wiz-card-border);
  color: var(--wiz-card-header-text);
}

[data-theme="dark"] .af-opt-btn {
  background: var(--wiz-card-header-bg);
  border-color: var(--wiz-card-border);
  color: var(--wiz-input-text);
}

[data-theme="dark"] .af-opt-btn:hover {
  border-color: var(--wiz-input-border-focus);
  background: rgba(0,172,215,0.08);
}

[data-theme="dark"] .af-opt-btn.af-opt-primary {
  background: rgba(0,172,215,0.12);
  border-color: var(--wiz-input-border-focus);
  color: var(--wiz-step-color);
}

[data-theme="dark"] .af-switch-slider {
  background: var(--wiz-card-border);
}

[data-theme="dark"] .af-switch input:checked + .af-switch-slider {
  background: var(--wiz-btn-primary-bg);
}

[data-theme="dark"] .af-radio-dot {
  border-color: var(--wiz-input-border-focus);
}

[data-theme="dark"] .af-icon-btn {
  background: var(--wiz-card-header-bg);
  border-color: var(--wiz-card-border);
  color: var(--wiz-label-color);
}

[data-theme="dark"] .af-icon-btn:hover {
  border-color: var(--wiz-input-border-focus);
  color: var(--wiz-input-border-focus);
}

[data-theme="dark"] .af-qr-hdr-row {
  background: var(--wiz-card-header-bg);
  border-bottom-color: var(--wiz-card-border);
}

[data-theme="dark"] .af-qr-lbl {
  color: var(--wiz-label-color);
}

[data-theme="dark"] .af-qr-wrap {
  background: var(--wiz-body-bg);
}

[data-theme="dark"] .af-field-lbl {
  color: var(--wiz-label-color);
}

/* Stepper dark */

[data-theme="dark"] .af-step-num.act {
  background: var(--wiz-btn-primary-bg);
}

/* Wizard card dark */

[data-theme="dark"] .af-wiz-card {
  border-color: var(--wiz-card-border);
  background: var(--wiz-body-bg);
}

[data-theme="dark"] .af-wiz-card-hdr {
  background: var(--wiz-card-header-bg);
  border-bottom-color: var(--wiz-card-border);
  color: var(--wiz-card-header-text);
}

/* Dropzone dark */

[data-theme="dark"] .af-dz-wrap {
  background: var(--wiz-card-header-bg);
  border-color: var(--wiz-card-border);
}

[data-theme="dark"] .af-dz-inner {
  border-color: var(--wiz-card-border);
  background: var(--wiz-body-bg);
}

/* Template list dark */

[data-theme="dark"] .af-tpl-preview-bar {
  background: var(--wiz-surface-2);
  border-bottom-color: var(--wiz-card-border);
}

[data-theme="dark"] .af-tpl-list-wrap {
  border-right-color: var(--wiz-card-border);
}

/* Summary dark */

[data-theme="dark"] .af-summary-img {
  background: var(--wiz-card-header-bg);
  border-color: var(--wiz-card-border);
}

/* ==========================================================================
   32p. PLATFORM SELECTOR (af-platform-*, af-ptoggle, af-plat-col)
   d4 SaaS: radio-exclusive platform toggle for addnative wizard
   ========================================================================== */

.af-platform-bar {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.af-ptoggle {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px 0 12px;
  border-radius: 8px;
  border: 1.5px solid var(--wiz-card-border);
  background: var(--wiz-card-header-bg);
  cursor: pointer;
  transition: all 0.18s;
  flex-shrink: 0;
  user-select: none;
}

.af-ptoggle .af-pt-cb {
  width: 17px;
  height: 17px;
  border-radius: 4px;
  border: 1.5px solid var(--wiz-card-border);
  background: var(--wiz-modal-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.16s;
}

.af-ptoggle .af-pt-cb svg {
  width: 9px;
  height: 9px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 0.12s;
}

.af-ptoggle .af-pt-lbl {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--wiz-label-color);
  transition: color 0.16s;
  font-family: var(--font-ui);
}

/* Toggle activo */

.af-ptoggle.on {
  background: var(--wiz-radio-on-bg);
  border-color: var(--wiz-radio-on-border);
}

.af-ptoggle.on .af-pt-cb {
  background: var(--wiz-btn-primary-bg);
  border-color: var(--wiz-btn-primary-bg);
}

.af-ptoggle.on .af-pt-cb svg {
  opacity: 1;
}

.af-ptoggle.on .af-pt-lbl {
  color: var(--wiz-radio-on-text);
}

/* Hint informativo */

.af-platform-hint {
  font-size: 11px;
  color: var(--wiz-muted-text);
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: 4px;
  font-family: var(--font-ui);
}

.af-platform-hint svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--wiz-muted-text);
  stroke-width: 2;
  stroke-linecap: round;
  flex-shrink: 0;
}

/* ==========================================================================
   32q. PLATFORM GRID (af-platform-grid, af-plat-col)
   d4 SaaS: two-column grid for platform cards
   ========================================================================== */

.af-platform-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  flex: 1;
  min-height: 0;
}

/* Columna con transicion de bloqueo */

.af-plat-col {
  display: flex;
  flex-direction: column;
  transition: opacity 0.22s;
}

.af-plat-col.blocked {
  opacity: 0.38;
  pointer-events: none;
}

/* ==========================================================================
   32r. FILE ROW IN DROP ZONE (af-dz-file, af-dz-file-ico, af-dz-file-rm)
   d4 SaaS: added file row inside native code drop zone
   ========================================================================== */

.af-dz-file {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--wiz-card-header-bg);
  border: 1.5px solid var(--wiz-card-border);
  border-radius: 7px;
  padding: 7px 10px;
}

.af-dz-file-ico {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(0,57,111,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.af-dz-file-ico svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--wiz-btn-primary-bg);
  stroke-width: 2;
  stroke-linecap: round;
}

.af-dz-file-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--wiz-input-text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-ui);
}

.af-dz-file-rm {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wiz-muted-text);
  font-size: 12px;
  transition: all 0.12s;
  flex-shrink: 0;
}

.af-dz-file-rm:hover {
  background: rgba(232,57,74,0.12);
  color: #e8394a;
}

/* Sub-texto tipos de fichero en drop zone */

.af-dz-sub {
  font-size: 10px;
  color: var(--wiz-muted-text);
  opacity: 0.7;
  text-align: center;
  font-family: var(--font-ui);
}

/* Drop zone boxed icon (36×36 with rounded border) */

.af-dz-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--wiz-card-header-bg);
  border: 1.5px solid var(--wiz-card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.14s, background 0.14s;
}

.af-dz-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--wiz-muted-text);
  stroke-width: 1.8;
  stroke-linecap: round;
  transition: stroke 0.14s;
}

.af-dz-inner:hover .af-dz-icon {
  border-color: var(--wiz-input-border-focus);
  background: rgba(0,172,215,0.07);
}

.af-dz-inner:hover .af-dz-icon svg {
  stroke: var(--wiz-input-border-focus);
}

/* ── Addnative wizard: full-width header/footer + footer button sizing ── */

.page-container:has(.af-platform-grid) {
  align-items: stretch !important;
}

.page-container:has(.af-platform-grid) > .modal-header.af-header,
.page-container:has(.af-platform-grid) > .modal-body.project-body,
.page-container:has(.af-platform-grid) > .modal-footer.af-footer {
  width: 100%;
}

.page-container:has(.af-platform-grid) > .modal-footer.af-footer {
  height: 52px;
  min-height: 52px;
  padding: 0 20px;
}

.page-container:has(.af-platform-grid) > .modal-footer.af-footer > button {
  height: 36px;
  padding: 0 22px;
  font-size: 12.5px;
  letter-spacing: 0.4px;
  box-shadow: 0 4px 14px rgba(0,57,111,0.28);
}

.page-container:has(.af-platform-grid) > .modal-footer.af-footer > button:hover {
  background: #004f9e;
  box-shadow: 0 6px 20px rgba(0,57,111,0.38);
  transform: none;
}

/* Hide bootstrap-fileinput generated UI in addnative */

.page-container:has(.af-platform-grid) .file-input {
  display: none !important;
}

/* ==========================================================================
   32s. PLATFORM DARK THEME OVERRIDES
   ========================================================================== */

[data-theme="dark"] .af-ptoggle.on {
  background: var(--wiz-radio-on-bg);
  border-color: var(--wiz-radio-on-border);
}

[data-theme="dark"] .af-ptoggle.on .af-pt-lbl {
  color: var(--wiz-radio-on-text);
}

[data-theme="dark"] .af-dz-file-ico {
  background: rgba(0,172,215,0.15);
}

[data-theme="dark"] .af-dz-file-ico svg {
  stroke: var(--wiz-step-color);
}

/* ==========================================================================
   33. UPDATE PROJECT WIZARD (upd-*)
   ========================================================================== */

/* ── Layout: page-container must stretch children to full width ── */

.page-container:has(.upd-dz-wrap) {
  align-items: stretch !important;
}

.page-container:has(.upd-dz-wrap) > .modal-header.af-header {
  width: 100%;
}

.page-container:has(.upd-dz-wrap) > .modal-body.project-body {
  flex: 1;
  min-height: 0;
  width: 100%;
}

.page-container:has(.upd-dz-wrap) > .modal-footer.af-footer {
  width: 100%;
}

/* ── DROP ZONE — estado vacío ── */

.upd-dz-wrap {
  border: 1.5px solid var(--wiz-card-border);
  border-radius: 8px;
  background: var(--wiz-card-header-bg);
  padding: 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
  transition: border-color 0.14s, background 0.14s;
}

.upd-dz-inner {
  border: 2px dashed var(--wiz-card-border);
  border-radius: 7px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--wiz-body-bg);
  cursor: pointer;
  padding: 24px;
  transition: border-color 0.18s, background 0.18s;
}

.upd-dz-inner:hover,
.upd-dz-inner.over {
  border-color: var(--wiz-input-border-focus);
  background: rgba(0,172,215,0.03);
}

.upd-dz-inner.over {
  border-style: solid;
}

/* Icono ZIP */

.upd-dz-zip-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--wiz-card-header-bg);
  border: 1.5px solid var(--wiz-card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.18s;
  flex-shrink: 0;
}

.upd-dz-zip-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--wiz-muted-text);
  stroke-width: 1.5;
  stroke-linecap: round;
  transition: stroke 0.18s;
}

.upd-dz-zip-badge {
  position: absolute;
  bottom: -6px;
  right: -6px;
  background: var(--wiz-btn-primary-bg);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  font-family: var(--font-mono, 'Space Mono', monospace);
  padding: 2px 5px;
  border-radius: 4px;
  border: 1.5px solid var(--wiz-body-bg);
}

/* Hover/dragover icono */

.upd-dz-inner:hover .upd-dz-zip-icon,
.upd-dz-inner.over .upd-dz-zip-icon {
  border-color: var(--wiz-input-border-focus);
  background: rgba(0,172,215,0.07);
}

.upd-dz-inner:hover .upd-dz-zip-icon svg,
.upd-dz-inner.over .upd-dz-zip-icon svg {
  stroke: var(--wiz-input-border-focus);
}

/* Textos drop zone */

.upd-dz-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--wiz-input-text);
}

.upd-dz-sub {
  font-size: 12px;
  color: var(--wiz-muted-text);
  text-align: center;
  line-height: 1.6;
  max-width: 360px;
}

.upd-dz-sub strong,
.upd-dz-sub .upd-dz-strong {
  color: var(--wiz-card-header-text);
  font-weight: 700;
}

/* Hide bootstrap-fileinput generated UI — we use our own custom drop zone */

.af-wiz-card-body > .file-input {
  display: none !important;
}

/* Separador "o" */

.upd-dz-or {
  font-size: 11px;
  color: var(--wiz-muted-text);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 260px;
}

.upd-dz-or::before,
.upd-dz-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--wiz-card-border);
}

/* Botón browse */

.upd-btn-browse {
  height: 36px;
  padding: 0 20px;
  border-radius: 8px;
  background: var(--wiz-btn-primary-bg);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif);
  transition: background 0.14s;
}

.upd-btn-browse svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
}

.upd-btn-browse:hover {
  background: #004f9e;
}

/* ── FICHERO SELECCIONADO ── */

.upd-zip-selected {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.upd-zip-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: var(--wiz-card-header-bg);
  border: 1.5px solid var(--wiz-card-border);
  border-radius: 12px;
  padding: 24px 32px;
  width: 100%;
  max-width: 400px;
  animation: updPopIn 0.22s cubic-bezier(0.34,1.56,0.64,1);
}

@keyframes updPopIn {
  from {
    opacity: 0;
    transform: scale(0.93);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.upd-zip-file-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(0,57,111,0.08);
  border: 1.5px solid rgba(0,57,111,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.upd-zip-file-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--wiz-btn-primary-bg);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.upd-zip-file-badge {
  position: absolute;
  bottom: -7px;
  right: -7px;
  background: var(--wiz-btn-primary-bg);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  font-family: var(--font-mono, 'Space Mono', monospace);
  padding: 2px 5px;
  border-radius: 4px;
  border: 1.5px solid var(--wiz-body-bg);
}

.upd-zip-file-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--wiz-input-text);
  text-align: center;
  word-break: break-all;
}

.upd-zip-file-meta {
  font-size: 11px;
  font-family: var(--font-mono, 'Space Mono', monospace);
  color: var(--wiz-muted-text);
}

/* Botones de acción */

.upd-zip-actions {
  display: flex;
  gap: 8px;
}

.upd-btn-zip-change {
  height: 32px;
  padding: 0 16px;
  border-radius: 7px;
  background: var(--wiz-body-bg);
  color: var(--wiz-card-header-text);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--wiz-card-border);
  font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif);
  transition: all 0.14s;
}

.upd-btn-zip-change svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.upd-btn-zip-change:hover {
  background: var(--wiz-surface-2);
  color: var(--wiz-input-text);
}

.upd-btn-zip-remove {
  height: 32px;
  padding: 0 16px;
  border-radius: 7px;
  background: rgba(232,57,74,0.08);
  color: #e8394a;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid rgba(232,57,74,0.25);
  font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif);
  transition: all 0.14s;
}

.upd-btn-zip-remove svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.upd-btn-zip-remove:hover {
  background: rgba(232,57,74,0.15);
}

/* ── DARK THEME OVERRIDES ── */

[data-theme="dark"] .upd-zip-file-icon {
  background: rgba(0,172,215,0.1);
  border-color: rgba(0,172,215,0.25);
}

[data-theme="dark"] .upd-zip-file-icon svg {
  stroke: var(--wiz-step-color);
}

[data-theme="dark"] .upd-zip-file-badge {
  border-color: var(--wiz-card-header-bg);
}

/* ── Update project wizard: footer/button overrides to match design ── */

.page-container:has(.upd-dz-wrap) ~ .af-footer,
.page-container:has(.upd-dz-wrap) .af-footer {
  height: 52px;
  min-height: 52px;
  padding: 0 20px;
}

.page-container:has(.upd-dz-wrap) ~ .af-footer > button,
.page-container:has(.upd-dz-wrap) .af-footer > button {
  height: 36px;
  padding: 0 22px;
  font-size: 12.5px;
  letter-spacing: 0.4px;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,57,111,0.28);
}

.page-container:has(.upd-dz-wrap) ~ .af-footer > button:hover,
.page-container:has(.upd-dz-wrap) .af-footer > button:hover {
  background: #004f9e;
  box-shadow: 0 6px 20px rgba(0,57,111,0.38);
  transform: none;
}

.page-container:has(.upd-dz-wrap) ~ .af-footer > button[disabled],
.page-container:has(.upd-dz-wrap) .af-footer > button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════
   TRANSLATOR WIZARD — d4 SaaS Redesign (XNXI-82)
   Scoped entirely under .wiz-translator-page
   ═══════════════════════════════════════════════════════════ */

/* ── Color tokens (scoped) ── */

.wiz-translator-page {
  --tl-a: #00acd7;
  --tl-b: #00396f;
  --tl-grad: #00396f;
  --tl-bg: #f5f7fa;
  --tl-white: #fff;
  --tl-s1: #f0f4f8;
  --tl-s2: #e8edf4;
  --tl-border: #dde5ef;
  --tl-text: #18293e;
  --tl-mid: #4d6782;
  --tl-dim: #8fa8c0;
  --tl-green: #00b87c;
  --tl-red: #e8394a;
  --tl-amber: #f59e0b;
}

[data-theme="dark"] .wiz-translator-page {
  --tl-bg: #0d1b2a;
  --tl-white: #112236;
  --tl-s1: #162d42;
  --tl-s2: #1a3450;
  --tl-border: #1e3a54;
  --tl-text: #d0e4f4;
  --tl-mid: #7aaac8;
  --tl-dim: #3d6a8a;
}

/* ── Modal sizing for translator ── */

#g-modal .modal-dialog:has(.wiz-translator-page) {
  max-width: 720px;
  width: 720px;
}

#g-modal .modal-dialog:has(.wiz-translator-page) .modal-content {
  height: 540px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 10px 50px rgba(0,57,111,.18);
  background: var(--tl-white);
  border: none;
  padding: 0;
}

[data-theme="dark"] #g-modal .modal-dialog:has(.wiz-translator-page) .modal-content {
  box-shadow: 0 10px 50px rgba(0,0,0,.5);
}

#g-modal .modal-dialog:has(.wiz-translator-page) .modal-content > .wiz-carousel,
#g-modal .modal-dialog:has(.wiz-translator-page) .modal-content > .wiz-carousel > .wiz-track {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.wiz-translator-page {
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  height: 100%;
  font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif);
  color: var(--tl-text);
  transition: background .2s, color .2s;
}

/* ── HEADER ── */

.wiz-translator-page .dlg-hdr {
  height: 56px;
  flex-shrink: 0;
  background: var(--tl-grad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.wiz-translator-page .dlg-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .5px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.wiz-translator-page .dlg-title-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wiz-translator-page .dlg-title-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wiz-translator-page .dlg-xbtn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.55);
  font-size: 13px;
  cursor: pointer;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  transition: all .15s;
}

.wiz-translator-page .dlg-xbtn:hover {
  background: rgba(232,57,74,.7);
  color: #fff;
}

/* ── TAB BAR ── */

.wiz-translator-page .dtabs {
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  background: var(--tl-white);
  border-bottom: 1.5px solid var(--tl-border);
  transition: background .2s, border-color .2s;
}

.wiz-translator-page .dtab {
  padding: 0 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tl-dim);
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1.5px;
  transition: all .14s;
  white-space: nowrap;
  user-select: none;
}

.wiz-translator-page .dtab:hover {
  color: var(--tl-mid);
}

.wiz-translator-page .dtab.act {
  color: var(--tl-b);
  border-bottom-color: var(--tl-a);
}

[data-theme="dark"] .wiz-translator-page .dtab.act {
  color: var(--tl-a);
}

.wiz-translator-page .dtab-badge {
  font-size: 9px;
  font-weight: 700;
  background: var(--tl-s2);
  color: var(--tl-mid);
  border-radius: 10px;
  padding: 1px 7px;
  transition: background .14s, color .14s;
}

.wiz-translator-page .dtab.act .dtab-badge {
  background: var(--tl-a);
  color: #fff;
}

/* ── BODY ── */

.wiz-translator-page .dlg-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--tl-bg);
  transition: background .2s;
}

/* ── PANELS ── */

.wiz-translator-page .dtab-panel {
  display: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  flex-direction: column;
  padding: 16px 20px;
  background: var(--tl-bg);
  transition: background .2s;
}

.wiz-translator-page .dtab-panel::-webkit-scrollbar {
  width: 4px;
}

.wiz-translator-page .dtab-panel::-webkit-scrollbar-thumb {
  background: var(--tl-border);
  border-radius: 2px;
}

.wiz-translator-page .dtab-panel.act {
  display: flex;
}

/* ── FOOTER ── */

.wiz-translator-page .dlg-footer {
  height: 52px;
  flex-shrink: 0;
  padding: 0 20px;
  border-top: 1.5px solid var(--tl-border);
  background: var(--tl-s1);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background .2s, border-color .2s;
}

.wiz-translator-page .footer-hint {
  font-size: 10.5px;
  color: var(--tl-dim);
  font-family: var(--font-mono, 'Space Mono', monospace);
}

/* ── BUTTONS ── */

.wiz-translator-page .tl-btn-primary {
  padding: 0 20px;
  height: 36px;
  background: var(--tl-b);
  color: #fff;
  font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,57,111,.28);
  transition: all .2s;
  display: flex;
  align-items: center;
  gap: 7px;
}

.wiz-translator-page .tl-btn-primary svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.wiz-translator-page .tl-btn-primary:hover {
  background: #004f9e;
}

.wiz-translator-page .tl-btn-primary.green {
  background: var(--tl-green);
  box-shadow: 0 4px 14px rgba(0,184,124,.28);
}

.wiz-translator-page .tl-btn-primary.green:hover {
  background: #009963;
}

.wiz-translator-page .tl-btn-secondary {
  padding: 0 18px;
  height: 36px;
  background: var(--tl-white);
  color: var(--tl-mid);
  font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  border: 1.5px solid var(--tl-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all .2s;
  display: flex;
  align-items: center;
  gap: 7px;
}

.wiz-translator-page .tl-btn-secondary svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.wiz-translator-page .tl-btn-secondary:hover {
  background: var(--tl-s2);
  color: var(--tl-text);
}

/* ── CARDS ── */

.wiz-translator-page .tl-card {
  border: 1.5px solid var(--tl-border);
  border-radius: 9px;
  overflow: hidden;
  background: var(--tl-white);
  transition: background .2s, border-color .2s;
  margin-bottom: 14px;
}

.wiz-translator-page .tl-card:last-child {
  margin-bottom: 0;
}

.wiz-translator-page .tl-card-hdr {
  padding: 9px 14px;
  background: var(--tl-s1);
  border-bottom: 1px solid var(--tl-border);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--tl-mid);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background .2s;
}

.wiz-translator-page .tl-card-hdr svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--tl-a);
  stroke-width: 2;
  stroke-linecap: round;
  flex-shrink: 0;
}

.wiz-translator-page .tl-card-body {
  padding: 13px;
}

.wiz-translator-page .tl-field-inp {
  width: 100%;
  background: var(--tl-s1);
  border: 1.5px solid var(--tl-border);
  border-radius: 7px;
  padding: 9px 12px;
  color: var(--tl-text);
  font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif);
  font-size: 12px;
  outline: none;
  transition: border-color .14s, background .14s;
}

.wiz-translator-page .tl-field-inp:focus {
  border-color: var(--tl-a);
  background: var(--tl-white);
}

.wiz-translator-page .tl-field-inp::placeholder {
  color: var(--tl-dim);
}

/* ── GRID 3-col ── */

.wiz-translator-page .tl-grid3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

.wiz-translator-page .tl-grid3 .tl-card {
  margin-bottom: 0;
}

/* ── LANGUAGE SELECTORS ── */

.wiz-translator-page .lang-wrap {
  position: relative;
}

.wiz-translator-page .sel-btn {
  width: 100%;
  height: 34px;
  padding: 0 13px;
  border-radius: 7px;
  background: var(--tl-b);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border: none;
  font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif);
  transition: background .14s;
}

.wiz-translator-page .sel-btn:hover {
  background: #004f9e;
}

.wiz-translator-page .sel-btn.open {
  background: #004f9e;
}

.wiz-translator-page .sel-caret {
  font-size: 9px;
  opacity: .7;
  transition: transform .18s;
  flex-shrink: 0;
}

.wiz-translator-page .sel-btn.open .sel-caret {
  transform: rotate(180deg);
}

.wiz-translator-page .sel-label {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── CHIPS (multi-select) ── */

.wiz-translator-page .sel-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 7px;
  min-height: 0;
}

.wiz-translator-page .sel-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0,57,111,.1);
  border: 1px solid rgba(0,57,111,.2);
  border-radius: 5px;
  padding: 2px 7px 2px 8px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--tl-b);
}

[data-theme="dark"] .wiz-translator-page .sel-chip {
  background: rgba(0,172,215,.12);
  border-color: rgba(0,172,215,.3);
  color: var(--tl-a);
}

.wiz-translator-page .sel-chip-x {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  color: var(--tl-mid);
  transition: all .12s;
}

.wiz-translator-page .sel-chip-x:hover {
  background: rgba(232,57,74,.18);
  color: var(--tl-red);
}

/* ── DROPDOWN PANELS (position:fixed, appended to body when open) ── */

.lang-dd {
  --tl-a: #00acd7;
  --tl-b: #00396f;
  --tl-bg: #f5f7fa;
  --tl-white: #fff;
  --tl-s1: #f0f4f8;
  --tl-s2: #e8edf4;
  --tl-border: #dde5ef;
  --tl-text: #18293e;
  --tl-mid: #4d6782;
  --tl-dim: #8fa8c0;
  position: fixed;
  z-index: 9999;
  background: var(--tl-white);
  border: 1.5px solid var(--tl-border);
  border-radius: 9px;
  box-shadow: 0 8px 30px rgba(0,57,111,.18);
  display: none;
  flex-direction: column;
  overflow: hidden;
  min-width: 180px;
  transition: background .2s, border-color .2s;
  font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif);
}

[data-theme="dark"] .lang-dd {
  --tl-bg: #0d1b2a;
  --tl-white: #112236;
  --tl-s1: #162d42;
  --tl-s2: #1a3450;
  --tl-border: #1e3a54;
  --tl-text: #d0e4f4;
  --tl-mid: #7aaac8;
  --tl-dim: #3d6a8a;
  box-shadow: 0 8px 30px rgba(0,0,0,.45);
}

.lang-dd.open {
  display: flex;
}

.lang-dd .dd-search {
  padding: 8px 10px;
  border-bottom: 1px solid var(--tl-border);
  flex-shrink: 0;
}

.lang-dd .dd-search input {
  width: 100%;
  border: 1.5px solid var(--tl-border);
  border-radius: 6px;
  background: var(--tl-s1);
  padding: 5px 9px;
  font-size: 11px;
  font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif);
  color: var(--tl-text);
  outline: none;
  transition: border-color .14s;
}

.lang-dd .dd-search input:focus {
  border-color: var(--tl-a);
}

.lang-dd .dd-search input::placeholder {
  color: var(--tl-dim);
}

.lang-dd .dd-list {
  overflow-y: auto;
  max-height: 200px;
  padding: 4px 0;
}

.lang-dd .dd-list::-webkit-scrollbar {
  width: 4px;
}

.lang-dd .dd-list::-webkit-scrollbar-thumb {
  background: var(--tl-border);
  border-radius: 2px;
}

.lang-dd .dd-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  cursor: pointer;
  font-size: 12px;
  color: var(--tl-text);
  transition: background .1s;
  user-select: none;
}

.lang-dd .dd-item:hover {
  background: var(--tl-s1);
}

.lang-dd .dd-item.selected {
  background: rgba(0,57,111,.06);
}

[data-theme="dark"] .lang-dd .dd-item.selected {
  background: rgba(0,172,215,.1);
}

.lang-dd .dd-indicator {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid var(--tl-border);
  background: var(--tl-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .12s;
}

.lang-dd .dd-item.selected .dd-indicator {
  border-color: var(--tl-b);
  background: var(--tl-b);
}

[data-theme="dark"] .lang-dd .dd-item.selected .dd-indicator {
  border-color: var(--tl-a);
  background: var(--tl-a);
}

.lang-dd .dd-indicator::after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  display: none;
}

.lang-dd .dd-item.selected .dd-indicator::after {
  display: block;
}

/* Checkbox variant */

.lang-dd .dd-indicator.cb {
  border-radius: 4px;
}

.lang-dd .dd-indicator.cb::after {
  content: '';
  display: none;
  width: 9px;
  height: 7px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
  border-radius: 0;
  background: transparent;
}

.lang-dd .dd-item.selected .dd-indicator.cb::after {
  display: block;
}

.lang-dd .dd-empty {
  padding: 12px;
  font-size: 11px;
  color: var(--tl-dim);
  text-align: center;
  font-style: italic;
}

/* ── BANNER TRADUCIENDO ── */

.wiz-translator-page .tl-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0,172,215,.07);
  border: 1.5px solid var(--tl-a);
  border-radius: 9px;
  padding: 11px 14px;
  margin-bottom: 12px;
  flex-shrink: 0;
  animation: tlFadeIn .25s ease;
}

.wiz-translator-page .tl-banner.hidden {
  display: none;
}

.wiz-translator-page .tl-spinner {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2.5px solid rgba(0,172,215,.2);
  border-top-color: var(--tl-a);
  animation: tlSpin .7s linear infinite;
}

.wiz-translator-page .tl-info {
  flex: 1;
  min-width: 0;
}

.wiz-translator-page .tl-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--tl-b);
}

[data-theme="dark"] .wiz-translator-page .tl-label {
  color: var(--tl-a);
}

.wiz-translator-page .tl-prog {
  font-size: 10.5px;
  color: var(--tl-mid);
  font-family: var(--font-mono, 'Space Mono', monospace);
  margin-top: 1px;
}

.wiz-translator-page .tl-dismiss {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tl-dim);
  font-size: 12px;
  flex-shrink: 0;
  transition: all .14s;
}

.wiz-translator-page .tl-dismiss:hover {
  background: var(--tl-s2);
  color: var(--tl-text);
}

/* ── INFO COLS ── */

.wiz-translator-page .info-cols {
  display: flex;
  border: 1.5px solid var(--tl-border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
  flex-shrink: 0;
  transition: border-color .2s;
}

.wiz-translator-page .info-col {
  flex: 1;
  padding: 10px 15px;
  background: var(--tl-s1);
  transition: background .2s;
}

.wiz-translator-page .info-col:first-child {
  border-right: 1px solid var(--tl-border);
}

.wiz-translator-page .info-col-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--tl-dim);
  margin-bottom: 2px;
}

.wiz-translator-page .info-col-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--tl-text);
}

/* ── TABLE SEARCH BAR ── */

.wiz-translator-page .tbl-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 10px;
  flex-shrink: 0;
}

.wiz-translator-page .tbl-s-lbl {
  font-size: 11px;
  color: var(--tl-mid);
}

.wiz-translator-page .tbl-s {
  height: 28px;
  border: 1.5px solid var(--tl-border);
  border-radius: 6px;
  background: var(--tl-s1);
  padding: 0 9px;
  font-size: 11px;
  font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif);
  color: var(--tl-text);
  outline: none;
  width: 170px;
  transition: border-color .14s, background .14s;
}

.wiz-translator-page .tbl-s:focus {
  border-color: var(--tl-a);
  background: var(--tl-white);
}

/* ── TABLE ── */

.wiz-translator-page .tbl-wrap {
  border: 1.5px solid var(--tl-border);
  border-radius: 8px;
  overflow: hidden;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  transition: border-color .2s;
}

.wiz-translator-page .tbl-wrap::-webkit-scrollbar {
  width: 4px;
}

.wiz-translator-page .tbl-wrap::-webkit-scrollbar-thumb {
  background: var(--tl-border);
  border-radius: 2px;
}

.wiz-translator-page .tbl-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.wiz-translator-page .tbl-wrap thead tr {
  background: var(--tl-s1);
}

.wiz-translator-page .tbl-wrap th {
  padding: 8px 10px;
  text-align: left;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--tl-mid);
  letter-spacing: .6px;
  text-transform: uppercase;
  border-bottom: 1.5px solid var(--tl-border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--tl-s1);
}

.wiz-translator-page .tbl-wrap th .sort {
  font-size: 8px;
  color: var(--tl-dim);
  margin-left: 2px;
  cursor: pointer;
  user-select: none;
}

.wiz-translator-page .tbl-wrap td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--tl-s2);
  color: var(--tl-text);
  vertical-align: middle;
  transition: background .1s;
}

.wiz-translator-page .tbl-wrap tr:last-child td {
  border-bottom: none;
}

.wiz-translator-page .tbl-wrap tr:hover td {
  background: var(--tl-s1);
}

.wiz-translator-page .td-n {
  font-family: var(--font-mono, 'Space Mono', monospace);
  font-size: 9.5px;
  color: var(--tl-dim);
  width: 32px;
  text-align: center;
}

.wiz-translator-page .td-path {
  font-family: var(--font-mono, 'Space Mono', monospace);
  font-size: 9px;
  color: var(--tl-dim);
  max-width: 200px;
}

.wiz-translator-page .td-txt {
  font-size: 12px;
  font-weight: 500;
}

/* ── TRANSLATION CELL — editable inline ── */

.wiz-translator-page .td-trad-cell {
  cursor: pointer;
  position: relative;
}

.wiz-translator-page .td-trad-cell.locked {
  cursor: not-allowed;
}

.wiz-translator-page .trad-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--tl-a);
  padding: 3px 7px;
  border-radius: 5px;
  border: 1.5px solid transparent;
  display: inline-block;
  min-width: 50px;
  transition: border-color .12s, background .12s;
}

.wiz-translator-page .td-trad-cell:not(.locked):hover .trad-val {
  border-color: var(--tl-a);
  background: rgba(0,172,215,.06);
}

.wiz-translator-page .td-trad-cell.locked .trad-val {
  color: var(--tl-mid);
}

/* ── LOCK TOOLTIP ── */

.wiz-translator-page .lock-tooltip {
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--tl-b);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .14s;
  font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif);
  z-index: 10;
}

.wiz-translator-page .td-trad-cell.locked:hover .lock-tooltip {
  opacity: 1;
}

/* ── INLINE EDIT ── */

.wiz-translator-page .td-edit-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}

.wiz-translator-page .td-edit-inp {
  flex: 1;
  border: 1.5px solid var(--tl-a);
  border-radius: 5px;
  padding: 4px 7px;
  font-size: 11px;
  color: var(--tl-text);
  background: var(--tl-white);
  font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif);
  outline: none;
  min-width: 0;
  box-shadow: 0 0 0 3px rgba(0,172,215,.14);
}

.wiz-translator-page .td-btn-ok,
.wiz-translator-page .td-btn-cancel {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  transition: opacity .12s;
}

.wiz-translator-page .td-btn-ok {
  background: var(--tl-green);
  color: #fff;
}

.wiz-translator-page .td-btn-ok:hover {
  opacity: .82;
}

.wiz-translator-page .td-btn-cancel {
  background: var(--tl-s2);
  color: var(--tl-mid);
}

.wiz-translator-page .td-btn-cancel:hover {
  background: var(--tl-border);
  color: var(--tl-text);
}

/* ── LOCK BUTTON ── */

.wiz-translator-page .lock-btn {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1.5px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: transparent;
  transition: all .14s;
}

.wiz-translator-page .lock-btn svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .14s;
}

.wiz-translator-page .lock-btn.unlocked svg {
  stroke: var(--tl-dim);
}

.wiz-translator-page .lock-btn.unlocked:hover {
  background: var(--tl-s1);
  border-color: var(--tl-border);
}

.wiz-translator-page .lock-btn.unlocked:hover svg {
  stroke: var(--tl-amber);
}

.wiz-translator-page .lock-btn.locked svg {
  stroke: var(--tl-b);
}

[data-theme="dark"] .wiz-translator-page .lock-btn.locked svg {
  stroke: var(--tl-a);
}

.wiz-translator-page .lock-btn.locked {
  background: rgba(0,57,111,.08);
  border-color: rgba(0,57,111,.2);
}

[data-theme="dark"] .wiz-translator-page .lock-btn.locked {
  background: rgba(0,172,215,.1);
  border-color: rgba(0,172,215,.28);
}

.wiz-translator-page .lock-btn.locked:hover {
  background: rgba(232,57,74,.09);
  border-color: rgba(232,57,74,.28);
}

.wiz-translator-page .lock-btn.locked:hover svg {
  stroke: var(--tl-red);
}

/* ── ROW STATES ── */

.wiz-translator-page tr.row-locked td {
  background: rgba(0,57,111,.025);
}

[data-theme="dark"] .wiz-translator-page tr.row-locked td {
  background: rgba(0,172,215,.05);
}

/* ── SKELETON / TRANSLATING ── */

.wiz-translator-page tr.tl-pending .td-n,
.wiz-translator-page tr.tl-pending .td-path,
.wiz-translator-page tr.tl-pending .td-txt {
  opacity: .25;
}

.wiz-translator-page tr.tl-pending .trad-val {
  color: transparent !important;
  background: var(--tl-s2);
  border-radius: 4px;
  animation: tlShimmer 1.1s ease-in-out infinite;
  border-color: transparent !important;
}

/* ── ANIMATIONS ── */

@keyframes tlFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tlSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes tlShimmer {
  0%, 100% {
    opacity: .45;
  }

  50% {
    opacity: .85;
  }
}

/* ── HIDE original wizard chrome when inside translator ── */

.wiz-translator-page .af-header,
.wiz-translator-page .af-footer,
.wiz-translator-page .modal-header,
.wiz-translator-page .modal-footer {
  display: none !important;
}

/* ── Hidden data-xone-dropdown ULs ── */

.wiz-translator-page .tl-hidden-data {
  display: none !important;
}

/* ==========================================================================
   33. GENERIC TOGGLE (af-toggle) — reusable pill toggle for any wizard
   ========================================================================== */

.af-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  border-radius: 7px;
  border: 1.5px solid var(--wiz-card-border);
  background: var(--wiz-card-header-bg);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.14s, background 0.14s;
  user-select: none;
}

.af-toggle:hover {
  border-color: var(--wiz-input-border-focus);
}

.af-toggle-lbl {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--wiz-card-header-text);
  font-family: var(--font-ui);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.af-toggle-sw {
  width: 28px;
  height: 15px;
  border-radius: 8px;
  background: var(--wiz-card-border);
  position: relative;
  transition: background .2s;
  flex-shrink: 0;
}

.af-toggle-sw.on {
  background: var(--wiz-btn-primary-bg);
}

.af-toggle-sw::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.af-toggle-sw.on::after {
  transform: translateX(13px);
}

/* ==========================================================================
   34. GENERIC DROP ZONE (af-dz-*) — reusable dropzone for any wizard
   ========================================================================== */

.af-dz-wrap {
  border: 1.5px solid var(--wiz-card-border);
  border-radius: 8px;
  background: var(--wiz-card-header-bg);
  padding: 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
  transition: border-color 0.14s, background 0.14s;
  min-height: 220px;
}

.af-dz-inner {
  border: 2px dashed var(--wiz-card-border);
  border-radius: 7px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--wiz-body-bg);
  cursor: pointer;
  padding: 24px;
  transition: border-color 0.18s, background 0.18s;
}

.af-dz-inner:hover,
.af-dz-inner.over {
  border-color: var(--wiz-input-border-focus);
  background: rgba(0,172,215,0.03);
}

.af-dz-inner.over {
  border-style: solid;
}

.af-dz-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--wiz-card-header-bg);
  border: 1.5px solid var(--wiz-card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s;
  flex-shrink: 0;
}

.af-dz-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--wiz-muted-text);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.18s;
}

.af-dz-inner:hover .af-dz-icon,
.af-dz-inner.over .af-dz-icon {
  border-color: var(--wiz-input-border-focus);
  background: rgba(0,172,215,0.07);
}

.af-dz-inner:hover .af-dz-icon svg,
.af-dz-inner.over .af-dz-icon svg {
  stroke: var(--wiz-input-border-focus);
}

.af-dz-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--wiz-input-text);
  font-family: var(--font-ui);
  text-align: center;
}

.af-dz-sub {
  font-size: 12px;
  color: var(--wiz-muted-text);
  text-align: center;
  line-height: 1.6;
  max-width: 380px;
}

.af-dz-or {
  font-size: 11px;
  color: var(--wiz-muted-text);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 260px;
}

.af-dz-or::before,
.af-dz-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--wiz-card-border);
}

.af-btn-browse {
  height: 36px;
  padding: 0 20px;
  border-radius: 8px;
  background: var(--wiz-btn-primary-bg);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif);
  transition: background 0.14s;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.af-btn-browse svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.af-btn-browse:hover {
  background: #004f9e;
}

/* File selected state — chip style */

.af-dz-file-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--wiz-card-header-bg);
  border: 1.5px solid var(--wiz-card-border);
  border-radius: 10px;
  padding: 10px 14px;
  max-width: 460px;
  margin-top: 10px;
}

.af-dz-file-chip .af-dz-chip-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(0,172,215,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.af-dz-file-chip .af-dz-chip-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--wiz-btn-primary-bg);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.af-dz-file-chip .af-dz-chip-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.af-dz-file-chip .af-dz-chip-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--wiz-input-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

.af-dz-file-chip .af-dz-chip-size {
  font-size: 10.5px;
  color: var(--wiz-muted-text);
  font-family: var(--font-mono);
}

/* Hide bootstrap-fileinput generated wrapper for .af-dz inputs */

.af-dz-wrap + .file-input,
.af-dz-wrap ~ .file-input {
  display: none !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   35. addfile wizard footer — two-zone layout: version-hint | action-btn
   ────────────────────────────────────────────────────────────────────── */

.af-footer > .af-footer-hint + #btcreate,
.af-footer .af-footer-hint ~ button#btcreate {
  margin-left: auto;
}

/* ==========================================================================
   36. XONEHUB NESTED MODAL CONTEXT
   uibModal wraps ViewModal.html in its own .modal-dialog.modal-lg.
   Inside that, #ModalTemplateXone (.modal-body) adds 15px padding
   and #g-modal > .modal-dialog.modal-lg adds Bootstrap's 30px margins.
   Neutralize both so the wizard fills the available width correctly,
   matching the standalone Studio layout.
   ========================================================================== */

#ModalTemplateXone {
  padding: 0;
}

#g-modal .modal-dialog {
  margin: 0;
  width: 100%;
  max-width: 100%;
}

/* ── Outer uibModal dialog sizing for wizard modals ─────────────────────────
   Bootstrap's modal-lg fixes the dialog at 900px. The wizard pages can be
   wider than that. Apply windowClass:'wiz-project-modal' on the uibModal open
   call so we can target the outer .modal-dialog from wizardstyle.css.
   Using 96vw cap lets the modal breathe without full-screen clutter.
   ─────────────────────────────────────────────────────────────────────────── */

.wiz-project-modal .modal-dialog {
  width: 96vw !important;
  max-width: 1100px !important;
  margin: 20px auto !important;
}
/* ═══════════════════════════════════════════════════════════════════
   XONE HUB — Tema visual de alertas Swal2 + Toaster
   Basado en diseño: docs/design/xonehub_licencias_alertas.html
   Solo cambia ESTÉTICA. No modifica operatividad.
   Paleta: primary #00acd7 · dark #00396f · success #00b87c
           error #e8394a · warning #f59e0b · text #18293e
═══════════════════════════════════════════════════════════════════ */

/* ─── SWEETALERT2 ────────────────────────────────────────────────── */

/* Overlay */

.swal2-container {
  background: rgba(0, 0, 0, .46) !important;
}

/* Popup */

.swal2-popup {
  width: 420px !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .28) !important;
  padding: 2.2em 2em 1.75em !important;
}

/* Icono: error */

.swal2-icon.swal2-error {
  border-color: rgba(232, 57, 74, .35) !important;
  background: rgba(232, 57, 74, .08) !important;
}

.swal2-icon.swal2-error .swal2-x-mark-line-left,
.swal2-icon.swal2-error .swal2-x-mark-line-right {
  background-color: #e8394a !important;
}

/* Icono: advertencia */

.swal2-icon.swal2-warning {
  border-color: rgba(245, 158, 11, .35) !important;
  background: rgba(245, 158, 11, .08) !important;
  color: #f59e0b !important;
}

/* Icono: éxito */

.swal2-icon.swal2-success {
  border-color: rgba(0, 184, 124, .4) !important;
  background: rgba(0, 184, 124, .1) !important;
}

.swal2-icon.swal2-success [class^='swal2-success-line'] {
  background-color: #00b87c !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(0, 184, 124, .4) !important;
}

/* Elementos de máscara: anclarlos al blanco del popup para que no tapen el icono */

.swal2-icon.swal2-success .swal2-success-circular-line-left,
.swal2-icon.swal2-success .swal2-success-circular-line-right,
.swal2-icon.swal2-success .swal2-success-fix {
  background-color: #fff !important;
}

/* Icono: info */

.swal2-icon.swal2-info {
  border-color: rgba(0, 172, 215, .35) !important;
  background: rgba(0, 172, 215, .08) !important;
  color: #00acd7 !important;
}

/* Icono: pregunta */

.swal2-icon.swal2-question {
  border-color: rgba(0, 172, 215, .35) !important;
  background: rgba(0, 172, 215, .08) !important;
  color: #00acd7 !important;
}

/* Título */

.swal2-title {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #18293e !important;
  padding: 0 !important;
}

/* Contenido */

.swal2-content {
  font-size: 13px !important;
  color: #4d6782 !important;
  line-height: 1.6 !important;
  padding: 0 !important;
}

/* Contenedor de botones */

.swal2-actions {
  margin-top: 22px !important;
}

/* Botones — base */

.swal2-styled.swal2-confirm,
.swal2-styled.swal2-cancel {
  height: 36px !important;
  padding: 0 28px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  transition: all .14s !important;
  margin: 0 5px !important;
  outline: none !important;
}

/* Confirm — azul primario (sin !important en color para que confirmButtonColor del JS siga funcionando) */

.swal2-styled.swal2-confirm {
  background-color: #00acd7;
  box-shadow: 0 3px 10px rgba(0, 172, 215, .3) !important;
}

.swal2-styled.swal2-confirm:hover {
  background-color: #009bc4 !important;
}

.swal2-styled.swal2-confirm:focus {
  box-shadow: 0 3px 10px rgba(0, 172, 215, .4) !important;
}

/* Confirm — color por tipo de icono.
   SweetAlert2 v7 añade swal2-animate-{type}-icon SOLO al icono activo,
   a diferencia de .swal2-icon.swal2-{type} que siempre existe en el DOM. */

.swal2-popup:has(.swal2-animate-success-icon) .swal2-styled.swal2-confirm {
  background-color: #00b87c !important;
  box-shadow: 0 3px 10px rgba(0, 184, 124, .25) !important;
}

.swal2-popup:has(.swal2-animate-success-icon) .swal2-styled.swal2-confirm:hover {
  background-color: #009e6a !important;
}

.swal2-popup:has(.swal2-animate-error-icon) .swal2-styled.swal2-confirm {
  background-color: #e8394a !important;
  box-shadow: 0 3px 10px rgba(232, 57, 74, .25) !important;
}

.swal2-popup:has(.swal2-animate-error-icon) .swal2-styled.swal2-confirm:hover {
  background-color: #c22e3e !important;
}

.swal2-popup:has(.swal2-animate-warning-icon) .swal2-styled.swal2-confirm {
  background-color: #e8394a !important;
  box-shadow: 0 3px 10px rgba(232, 57, 74, .25) !important;
}

.swal2-popup:has(.swal2-animate-warning-icon) .swal2-styled.swal2-confirm:hover {
  background-color: #c22e3e !important;
}

/* Cancel — neutro */

.swal2-styled.swal2-cancel {
  background-color: #fff !important;
  color: #4d6782 !important;
  border: 1.5px solid #dde5ef !important;
  box-shadow: none !important;
}

.swal2-styled.swal2-cancel:hover {
  background-color: #f0f4f8 !important;
  border-color: #00acd7 !important;
  color: #00396f !important;
}

.swal2-styled.swal2-cancel:focus {
  box-shadow: none !important;
}

/* Input de texto dentro de swal */

.swal2-input {
  border-radius: 8px !important;
  border: 1.5px solid #dde5ef !important;
  box-shadow: none !important;
  color: #18293e !important;
  font-size: 13px !important;
}

.swal2-input:focus {
  border-color: #00acd7 !important;
  box-shadow: 0 0 0 3px rgba(0, 172, 215, .15) !important;
  outline: none !important;
}

/* Mensaje de validación */

.swal2-validationerror {
  border-radius: 6px !important;
  font-size: 12px !important;
  background-color: rgba(232, 57, 74, .07) !important;
  color: #e8394a !important;
  border-top: 1px solid rgba(232, 57, 74, .2) !important;
}

/* ─── TOASTER (angularjs-toaster) ────────────────────────────────── */

/* Reubicar al bottom-right (todos los contenedores top-right pasan abajo) */

#toast-container.toast-top-right {
  top: auto !important;
  bottom: 20px !important;
  right: 20px !important;
}

/* Quitar las imágenes de fondo con iconos PNG del toaster por defecto */

#toast-container > .toast-info,
#toast-container > .toast-error,
#toast-container > .toast-success,
#toast-container > .toast-warning,
#toast-container > .toast-wait {
  background-image: none !important;
}

/* Base del item toast */

#toast-container > div {
  width: auto !important;
  min-width: 280px !important;
  max-width: 360px !important;
  margin: 0 0 8px !important;
  padding: 11px 38px 11px 14px !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .13) !important;
  opacity: 1 !important;
  filter: none !important;
  -ms-filter: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  background-color: #fff !important;
  color: #18293e !important;
  border: 1.5px solid #dde5ef !important;
}

#toast-container > div:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18) !important;
  opacity: 1 !important;
  filter: none !important;
  -ms-filter: none !important;
}

/* Error */

#toast-container > .toast-error {
  background-color: rgba(232, 57, 74, .12) !important;
  border-color: rgba(232, 57, 74, .3) !important;
}

/* Éxito */

#toast-container > .toast-success {
  background-color: rgba(0, 184, 124, .12) !important;
  border-color: rgba(0, 184, 124, .3) !important;
}

/* Advertencia */

#toast-container > .toast-warning {
  background-color: rgba(245, 158, 11, .12) !important;
  border-color: rgba(245, 158, 11, .3) !important;
}

/* Info */

#toast-container > .toast-info {
  background-color: rgba(0, 172, 215, .12) !important;
  border-color: rgba(0, 172, 215, .3) !important;
}

/* Título del toast */

.toast-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #18293e !important;
  margin-bottom: 1px !important;
}

/* Mensaje del toast */

.toast-message {
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #4d6782 !important;
}

.toast-message a,
.toast-message label {
  color: #00acd7 !important;
  font-weight: 600 !important;
}

.toast-message a:hover {
  color: #00396f !important;
}

/* Botón de cierre */

.toast-close-button {
  color: #8fa8c0 !important;
  text-shadow: none !important;
  opacity: 1 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  top: 6px !important;
  right: 8px !important;
  line-height: 1 !important;
}

.toast-close-button:hover,
.toast-close-button:focus {
  color: #18293e !important;
  opacity: 1 !important;
  text-decoration: none !important;
}

/* ─── DARK MODE ──────────────────────────────────────────────────── */

body.xh-dark #toast-container > div {
  background-color: var(--xh-white) !important;
  color: var(--xh-text) !important;
  border-color: var(--xh-border) !important;
}

body.xh-dark .toast-title {
  color: var(--xh-text) !important;
}

body.xh-dark .toast-message {
  color: var(--xh-mid) !important;
}

body.xh-dark .toast-message a,
body.xh-dark .toast-message label {
  color: var(--xh-a) !important;
}

body.xh-dark .toast-close-button {
  color: var(--xh-dim) !important;
}

body.xh-dark .toast-close-button:hover,
body.xh-dark .toast-close-button:focus {
  color: var(--xh-text) !important;
}
/* ══════════════════════════════════════════════════════════════════════════
   Log Analyzer (PASO 10)
   Reemplaza los <style> inline de loganalyzer.html + loganalyzer-detail.html.
   Usa las variables --xh-* de xonehub.css para soportar dark/light
   automáticamente. Overrides explícitos solo donde el var no cubre.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Contenedor ─────────────────────────────────────────────────────────── */

.xh-la-container,
.xh-la-container *,
.xh-la-container *::before,
.xh-la-container *::after {
  box-sizing: border-box;
}

.xh-la-container {
  /* Cadena flex column con min-height:0 para que el scroll viva SOLO dentro de
       .xh-la-table-wrap (la tabla), no en toda la vista. .xh-view tiene overflow:hidden,
       así que sin esta cadena los registros se cortan al desbordarse. */
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 20px;
  width: 95%;
  margin: 0 auto;
  color: var(--xh-text);
}

.xh-la-container h2,
.xh-la-container h3 {
  color: var(--xh-text);
}

/* ── Panel del formulario ───────────────────────────────────────────────── */

.xh-la-panel {
  flex-shrink: 0;
  /* mantiene altura natural dentro del flex column */
  margin-top: 16px;
  width: 100%;
  background: var(--xh-white);
  border: 1px solid var(--xh-border);
  border-radius: 4px;
}

.xh-la-panel .panel-body {
  padding: 16px;
}

.xh-la-field-name {
  max-width: 600px;
}

.xh-la-field-code {
  /* clear:both — algún ancestro o sibling tiene float que hacía que este form-group
       se solapase con el textarea anterior. Sin esto, el padding-top no produce
       separación visible (el div sube al hueco del float).
       padding-top — aire entre el textarea y el label "Código Google Authenticator". */
  clear: both;
  padding-top: 24px;
}

.xh-la-field-code label {
  white-space: nowrap;
}

.xh-la-input-code {
  max-width: 180px;
  font-family: monospace;
  font-size: 18px;
  letter-spacing: 4px;
  text-align: center;
}

/* ── Textarea del log ───────────────────────────────────────────────────── */

.xh-la-textarea {
  width: 100%;
  max-width: 100%;
  min-height: 300px;
  font-family: monospace;
  font-size: 12px;
  resize: vertical;
  white-space: pre;
  overflow: auto;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
  background: var(--xh-white);
  color: var(--xh-text);
  border: 1px solid var(--xh-border);
}

.xh-la-textarea::placeholder {
  color: var(--xh-dim);
}

.xh-la-textarea:disabled {
  background: var(--xh-s1);
  color: var(--xh-dim);
}

.xh-la-textarea.xh-la-dragover {
  border-color: var(--xh-a) !important;
  background-color: rgba(0, 172, 215, 0.08) !important;
  box-shadow: inset 0 0 0 2px var(--xh-a);
}

/* ── Chip del fichero seleccionado ──────────────────────────────────────── */

.xh-la-file-chip {
  margin-bottom: 0;
  background: var(--xh-s1);
  border: 1px solid var(--xh-border);
  color: var(--xh-text);
}

.xh-la-file-chip .xh-la-file-size {
  color: var(--xh-mid);
  margin-left: 8px;
}

.xh-la-file-chip .close {
  color: var(--xh-mid);
  opacity: 0.7;
}

.xh-la-file-chip .close:hover {
  color: var(--xh-text);
  opacity: 1;
}

/* ── Botonera ───────────────────────────────────────────────────────────── */

.xh-la-actions {
  margin-top: 8px;
}

.xh-la-actions .btn {
  margin-right: 8px;
  margin-bottom: 6px;
}

.xh-la-actions .xh-la-submitting {
  color: var(--xh-mid);
  margin-left: 8px;
}

/* ── Sección "Mis peticiones" ───────────────────────────────────────────── */

.xh-la-list {
  /* flex column + min-height:0 + overflow:hidden para que el wrapper de la tabla
       (xh-la-table-wrap) sea quien tenga el scroll, no la vista entera. */
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  margin-top: 28px;
}

.xh-la-list-header {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 12px;
}

.xh-la-list-header h3 {
  margin: 0;
}

.xh-la-list-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Buscador junto a Refrescar ─────────────────────────────────────────── */

.xh-la-search-wrap {
  position: relative;
  display: inline-block;
}

.xh-la-search-input {
  width: 240px;
  padding-left: 30px;
  padding-right: 30px;
  height: 30px;
  font-size: 13px;
}

.xh-la-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--xh-dim);
  pointer-events: none;
}

.xh-la-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--xh-mid);
  cursor: pointer;
  opacity: 0.65;
}

.xh-la-search-clear:hover {
  opacity: 1;
  color: var(--xh-red);
}

/* ── Wrapper de la tabla con scroll propio + sticky thead ───────────────── */

.xh-la-table-wrap {
  /* flex:1 + min-height:0 hace que ocupe el alto restante del .xh-la-list y
       que el scroll viva aquí, no en la vista. Sticky thead se queda visible
       al hacer scroll por las filas. */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  border: 1px solid var(--xh-border);
  border-radius: 4px;
  background: var(--xh-white);
}

/* Tabla — usa var() para que dark mode funcione sin tocar */

.xh-la-table {
  background: var(--xh-white);
  color: var(--xh-text);
  margin-bottom: 0;
  /* el wrapper ya pone borde */
}

.xh-la-table-wrap > .xh-la-table {
  border: none;
  /* evitar doble borde con el wrapper */
}

.xh-la-table > thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

.xh-la-table > thead > tr > th {
  background: var(--xh-s1);
  color: var(--xh-mid);
  border-bottom: 1px solid var(--xh-border);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.3px;
}

.xh-la-th-sortable {
  cursor: pointer;
  user-select: none;
}

.xh-la-th-sortable:hover {
  background: var(--xh-s2) !important;
  color: var(--xh-text);
}

.xh-la-th-sortable .fa {
  margin-left: 6px;
  font-size: 11px;
}

.xh-la-th-sortable .fa.xh-la-sort-idle {
  opacity: 0.35;
}

.xh-la-table > tbody > tr {
  cursor: pointer;
  transition: background-color 0.12s;
}

.xh-la-table > tbody > tr:hover {
  background: var(--xh-s1);
}

.xh-la-table > tbody > tr > td {
  border-top: 1px solid var(--xh-border);
  vertical-align: middle;
}

.xh-la-table .xh-la-chevron {
  color: var(--xh-dim);
  width: 30px;
  text-align: right;
}

.xh-la-empty {
  padding: 14px 0;
  color: var(--xh-mid);
}

/* ── Modal detalle ──────────────────────────────────────────────────────── */

.xh-la-detail-label {
  color: var(--xh-mid);
  font-weight: normal;
  display: block;
  font-size: 12px;
  margin-bottom: 2px;
}

.xh-la-detail-value {
  color: var(--xh-text);
}

.xh-la-detail-value-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xh-la-detail-hr {
  border-color: var(--xh-border);
  margin: 18px 0;
}

.xh-la-result-textarea {
  width: 100%;
  min-height: 420px;
  font-family: monospace;
  font-size: 12px;
  white-space: pre-wrap;
  resize: vertical;
  background: var(--xh-white);
  color: var(--xh-text);
  border: 1px solid var(--xh-border);
}

/* Alerts consistentes con el tema del resto */

.xh-la-alert {
  margin-top: 16px;
  padding: 12px;
  border-radius: 4px;
  border: 1px solid var(--xh-border);
  background: var(--xh-s1);
}

.xh-la-alert-error {
  background: rgba(232, 57, 74, 0.08);
  border-color: rgba(232, 57, 74, 0.4);
  color: var(--xh-text);
}

.xh-la-alert-error strong {
  color: var(--xh-red);
}

.xh-la-alert-pending {
  background: rgba(0, 172, 215, 0.08);
  border-color: rgba(0, 172, 215, 0.4);
  color: var(--xh-text);
}

.xh-la-alert-error-body {
  margin-top: 6px;
  white-space: pre-wrap;
  font-family: monospace;
  font-size: 12px;
}

/* ── Dark mode — ajustes finos que no cubren los var() ──────────────────── */

body.xh-dark .xh-la-textarea.xh-la-dragover {
  background-color: rgba(0, 172, 215, 0.15) !important;
}

body.xh-dark .xh-la-panel,
body.xh-dark .xh-la-table,
body.xh-dark .xh-la-result-textarea {
  /* el --xh-white en dark ya es oscuro; aseguramos que el texto resalte */
  color: var(--xh-text);
}
/* ════════════════════════════════════════════════════════════════════════
   XOne Hub — Módulo Descargas
   Usa las variables --xh-* de xonehub.css para soportar dark/light
   Scope: .xh-dl-container (evita colisiones con Bootstrap global)
   ════════════════════════════════════════════════════════════════════════ */

/* ── Colores de categoría (definidos localmente en el scope) ─────────────── */

.xh-dl-container {
  --xh-dl-col-doc: #0284c7;
  --xh-dl-col-fw: #7c3aed;
  --xh-dl-col-tool: #00b87c;
  --xh-dl-col-ia: #f59e0b;
}

/* ── Contenedor raíz — ocupa todo el espacio del .xh-view ─────────────────── */

.xh-dl-container,
.xh-dl-container *,
.xh-dl-container *::before,
.xh-dl-container *::after {
  box-sizing: border-box;
}

.xh-dl-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  font-family: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: var(--xh-text);
}

/* ── Filter bar ──────────────────────────────────────────────────────────── */

.xh-dl-fbar {
  min-height: 48px;
  flex-shrink: 0;
  background: var(--xh-white);
  border-bottom: 1.5px solid var(--xh-border);
  display: flex;
  align-items: center;
  padding: 7px 16px;
  gap: 7px;
  flex-wrap: wrap;
  row-gap: 6px;
  transition: background .2s;
}

/* ── Chips de tipo ───────────────────────────────────────────────────────── */

.xh-dl-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 7px;
  border: 1.5px solid var(--xh-border);
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--xh-mid);
  background: var(--xh-white);
  transition: border-color .14s, background .14s, color .14s;
  user-select: none;
  white-space: nowrap;
  font-family: inherit;
}

.xh-dl-chip:hover {
  border-color: rgba(0,172,215,.35);
}

.xh-dl-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.xh-dl-chip-count {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
  background: var(--xh-s2);
  color: var(--xh-mid);
  transition: background .14s, color .14s;
}

/* Active states por tipo */

.xh-dl-chip.act-doc {
  background: rgba(2,132,199,.07);
  border-color: var(--xh-dl-col-doc);
  color: var(--xh-dl-col-doc);
}

.xh-dl-chip.act-doc .xh-dl-chip-count {
  background: rgba(2,132,199,.15);
  color: var(--xh-dl-col-doc);
}

.xh-dl-chip.act-fw {
  background: rgba(124,58,237,.07);
  border-color: var(--xh-dl-col-fw);
  color: var(--xh-dl-col-fw);
}

.xh-dl-chip.act-fw  .xh-dl-chip-count {
  background: rgba(124,58,237,.15);
  color: var(--xh-dl-col-fw);
}

.xh-dl-chip.act-tool {
  background: rgba(0,184,124,.07);
  border-color: var(--xh-dl-col-tool);
  color: var(--xh-dl-col-tool);
}

.xh-dl-chip.act-tool .xh-dl-chip-count {
  background: rgba(0,184,124,.15);
  color: var(--xh-dl-col-tool);
}

.xh-dl-chip.act-ia {
  background: rgba(245,158,11,.07);
  border-color: var(--xh-dl-col-ia);
  color: var(--xh-dl-col-ia);
}

.xh-dl-chip.act-ia  .xh-dl-chip-count {
  background: rgba(245,158,11,.15);
  color: var(--xh-dl-col-ia);
}

/* ── Combo subcategoría ──────────────────────────────────────────────────── */

.xh-dl-sub-wrap {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--xh-border);
  border-radius: 7px;
  overflow: hidden;
  background: var(--xh-white);
  transition: border-color .14s, opacity .2s;
}

.xh-dl-sub-wrap:focus-within {
  border-color: var(--xh-a);
}

.xh-dl-sub-wrap.tw-doc {
  border-color: var(--xh-dl-col-doc);
}

.xh-dl-sub-wrap.tw-fw {
  border-color: var(--xh-dl-col-fw);
}

.xh-dl-sub-wrap.tw-tool {
  border-color: var(--xh-dl-col-tool);
}

.xh-dl-sub-wrap.tw-ia {
  border-color: var(--xh-dl-col-ia);
}

.xh-dl-sub-label {
  padding: 0 10px;
  height: 32px;
  display: flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--xh-dim);
  background: var(--xh-s1);
  border-right: 1px solid var(--xh-border);
  white-space: nowrap;
  flex-shrink: 0;
}

.xh-dl-sub-wrap.tw-doc  .xh-dl-sub-label {
  color: var(--xh-dl-col-doc);
}

.xh-dl-sub-wrap.tw-fw   .xh-dl-sub-label {
  color: var(--xh-dl-col-fw);
}

.xh-dl-sub-wrap.tw-tool .xh-dl-sub-label {
  color: var(--xh-dl-col-tool);
}

.xh-dl-sub-wrap.tw-ia   .xh-dl-sub-label {
  color: var(--xh-dl-col-ia);
}

.xh-dl-sub-select {
  height: 32px;
  padding: 0 10px;
  min-width: 140px;
  max-width: 220px;
  background: var(--xh-white);
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--xh-text);
  cursor: pointer;
}

/* ── Buscador ────────────────────────────────────────────────────────────── */

.xh-dl-search {
  display: flex;
  align-items: center;
  background: var(--xh-s1);
  border: 1.5px solid var(--xh-border);
  border-radius: 8px;
  height: 32px;
  padding: 0 10px;
  gap: 7px;
  transition: border-color .2s, background .2s;
}

.xh-dl-search:focus-within {
  border-color: var(--xh-a);
  background: var(--xh-white);
}

.xh-dl-search svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--xh-dim);
  stroke-width: 2;
  stroke-linecap: round;
  flex-shrink: 0;
}

.xh-dl-search input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--xh-text);
  font-family: inherit;
  font-size: 12px;
  width: 180px;
}

.xh-dl-search input::placeholder {
  color: var(--xh-dim);
}

/* ── Botón subir (admin XONE) ────────────────────────────────────────────── */

.xh-dl-fbar-r {
  margin-left: auto;
  display: flex;
  gap: 7px;
  align-items: center;
}

.xh-dl-btn-upload {
  height: 32px;
  padding: 0 14px;
  background: var(--xh-a);
  color: #fff;
  border: none;
  border-radius: 7px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 3px 8px rgba(0,172,215,.28);
  white-space: nowrap;
  transition: background .14s;
}

.xh-dl-btn-upload:hover {
  background: #008fb5;
}

.xh-dl-btn-upload svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: round;
}

/* ── Results bar ─────────────────────────────────────────────────────────── */

.xh-dl-rbar {
  height: 30px;
  flex-shrink: 0;
  background: var(--xh-s1);
  border-bottom: 1px solid var(--xh-border);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 8px;
  font-size: 11px;
  color: var(--xh-dim);
  transition: background .2s;
}

.xh-dl-rbar-count {
  font-weight: 700;
  color: var(--xh-mid);
}

.xh-dl-rbar-tag {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--xh-white);
  border: 1px solid var(--xh-border);
  border-radius: 20px;
  padding: 1px 8px 1px 6px;
  font-size: 10.5px;
  font-weight: 600;
}

.xh-dl-rbar-tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.xh-dl-rbar-clear {
  margin-left: auto;
  height: 22px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--xh-border);
  border-radius: 5px;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--xh-mid);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: border-color .14s, color .14s;
}

.xh-dl-rbar-clear:hover {
  border-color: var(--xh-red);
  color: var(--xh-red);
}

.xh-dl-rbar-clear svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
}

/* ── Cabecera de columnas ────────────────────────────────────────────────── */

.xh-dl-hdr {
  height: 32px;
  flex-shrink: 0;
  background: var(--xh-s1);
  border-bottom: 1.5px solid var(--xh-border);
  display: grid;
  grid-template-columns: 4px 38px 8fr 2fr 2fr 1.5fr 1.3fr 1fr 1.8fr;
  align-items: center;
  transition: background .2s;
}

.xh-dl-th {
  padding: 0 12px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--xh-mid);
  white-space: nowrap;
}

/* ── Lista de ficheros ───────────────────────────────────────────────────── */

.xh-dl-list {
  flex: 1;
  overflow-y: auto;
  padding: 7px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--xh-bg);
  transition: background .2s;
}

.xh-dl-list::-webkit-scrollbar {
  width: 4px;
}

.xh-dl-list::-webkit-scrollbar-thumb {
  background: var(--xh-border);
  border-radius: 3px;
}

/* ── Fila de fichero ─────────────────────────────────────────────────────── */

.xh-dl-row {
  background: var(--xh-white);
  border: 1.5px solid var(--xh-border);
  border-radius: 9px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 4px 38px 8fr 2fr 2fr 1.5fr 1.3fr 1fr 1.8fr;
  align-items: center;
  min-height: 50px;
  transition: border-color .14s, box-shadow .14s;
}

.xh-dl-row:hover {
  border-color: var(--xh-a);
  box-shadow: 0 3px 12px rgba(0,172,215,.08);
}

/* Franja de color lateral */

.xh-dl-side {
  align-self: stretch;
}

.xh-dl-side.doc {
  background: var(--xh-dl-col-doc);
}

.xh-dl-side.fw {
  background: var(--xh-dl-col-fw);
}

.xh-dl-side.tool {
  background: var(--xh-dl-col-tool);
}

.xh-dl-side.ia {
  background: var(--xh-dl-col-ia);
}

/* Celda icono */

.xh-dl-ico-cell {
  width: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.xh-dl-ico {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.xh-dl-ico.doc {
  background: rgba(2,132,199,.1);
}

.xh-dl-ico.fw {
  background: rgba(124,58,237,.1);
}

.xh-dl-ico.tool {
  background: rgba(0,184,124,.1);
}

.xh-dl-ico.ia {
  background: rgba(245,158,11,.1);
}

.xh-dl-ico svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.xh-dl-ico.doc  svg {
  stroke: var(--xh-dl-col-doc);
}

.xh-dl-ico.fw   svg {
  stroke: var(--xh-dl-col-fw);
}

.xh-dl-ico.tool svg {
  stroke: var(--xh-dl-col-tool);
}

.xh-dl-ico.ia   svg {
  stroke: var(--xh-dl-col-ia);
}

/* Columna nombre/desc */

.xh-dl-name-col {
  padding: 8px 12px;
  min-width: 0;
}

.xh-dl-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--xh-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xh-dl-desc {
  font-size: 10px;
  color: var(--xh-dim);
  margin-top: 1.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Columnas tipo/subcat */

.xh-dl-type-col {
  padding: 0 12px;
}

.xh-dl-type-tag {
  display: inline-flex;
  align-items: center;
  font-size: 9.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
}

.xh-dl-type-tag.doc {
  background: rgba(2,132,199,.1);
  color: var(--xh-dl-col-doc);
}

.xh-dl-type-tag.fw {
  background: rgba(124,58,237,.1);
  color: var(--xh-dl-col-fw);
}

.xh-dl-type-tag.tool {
  background: rgba(0,184,124,.1);
  color: var(--xh-dl-col-tool);
}

.xh-dl-type-tag.ia {
  background: rgba(245,158,11,.1);
  color: var(--xh-dl-col-ia);
}

.xh-dl-sub-tag {
  font-size: 9px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--xh-s2);
  color: var(--xh-mid);
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Columnas meta */

.xh-dl-date {
  padding: 0 12px;
  font-size: 10.5px;
  font-family: "Space Mono", monospace;
  color: var(--xh-dim);
  white-space: nowrap;
}

.xh-dl-size {
  padding: 0 12px;
  font-size: 10.5px;
  font-family: "Space Mono", monospace;
  color: var(--xh-mid);
  white-space: nowrap;
}

.xh-dl-ver {
  padding: 0 12px;
  font-size: 10.5px;
  font-family: "Space Mono", monospace;
  font-weight: 700;
  color: var(--xh-mid);
  white-space: nowrap;
}

/* Columna acciones */

.xh-dl-act-col {
  padding: 0 8px;
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  align-items: center;
}

.xh-dl-btn-dl {
  height: 28px;
  padding: 0 10px;
  background: var(--xh-a);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: background .14s, box-shadow .14s;
  flex-shrink: 0;
}

.xh-dl-btn-dl svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.xh-dl-btn-dl:hover {
  background: #008fb5;
  box-shadow: 0 2px 8px rgba(0,172,215,.3);
}

.xh-dl-btn-dl:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ── Loading spinner ─────────────────────────────────────────────────────── */

.xh-dl-loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--xh-dim);
  font-size: 13px;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */

.xh-dl-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px;
}

.xh-dl-empty svg {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: var(--xh-border);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.xh-dl-empty h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--xh-mid);
  margin: 0;
}

.xh-dl-empty p {
  font-size: 12px;
  color: var(--xh-dim);
  text-align: center;
  max-width: 280px;
  line-height: 1.5;
  margin: 0;
}

.xh-dl-empty-btn {
  height: 30px;
  padding: 0 16px;
  background: transparent;
  border: 1.5px solid var(--xh-border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--xh-mid);
  cursor: pointer;
  margin-top: 4px;
  transition: border-color .14s, color .14s;
}

.xh-dl-empty-btn:hover {
  border-color: var(--xh-a);
  color: var(--xh-a);
}

/* ── Modal de subida ─────────────────────────────────────────────────────── */

.xh-dl-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.46);
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.xh-dl-modal-box {
  background: var(--xh-white);
  border-radius: 12px;
  overflow: hidden;
  width: 540px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}

.xh-dl-modal-hdr {
  background: var(--xh-b);
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  gap: 10px;
  flex-shrink: 0;
}

.xh-dl-modal-hdr svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
}

.xh-dl-modal-hdr-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex: 1;
}

.xh-dl-modal-close {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: rgba(255,255,255,.15);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}

.xh-dl-modal-body {
  padding: 14px 18px;
  overflow-y: auto;
  flex: 1;
}

.xh-dl-form-row {
  margin-bottom: 10px;
}

.xh-dl-form-label {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--xh-mid);
  margin-bottom: 4px;
  display: block;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.xh-dl-form-input,
.xh-dl-form-select {
  width: 100%;
  height: 28px;
  background: var(--xh-s1);
  border: 1.5px solid var(--xh-border);
  border-radius: 6px;
  padding: 0 9px;
  font-family: inherit;
  font-size: 11.5px;
  color: var(--xh-text);
  outline: none;
  transition: border-color .15s;
}

.xh-dl-form-input:focus,
.xh-dl-form-select:focus {
  border-color: var(--xh-a);
}

.xh-dl-form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.xh-dl-drop-zone {
  height: 64px;
  border: 2px dashed var(--xh-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  background: var(--xh-s1);
}

.xh-dl-drop-zone:hover {
  border-color: var(--xh-a);
  background: rgba(0,172,215,.03);
}

.xh-dl-drop-zone span {
  font-size: 11px;
  color: var(--xh-mid);
}

.xh-dl-drop-zone small {
  font-size: 9.5px;
  color: var(--xh-dim);
}

.xh-dl-file-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--xh-s1);
  border: 1.5px solid var(--xh-border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11.5px;
  color: var(--xh-text);
}

.xh-dl-file-chip .xh-dl-file-size {
  font-size: 10px;
  color: var(--xh-dim);
  margin-left: 4px;
}

.xh-dl-file-chip .xh-dl-file-remove {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--xh-mid);
  font-size: 16px;
  line-height: 1;
  padding: 0;
}

.xh-dl-modal-footer {
  background: var(--xh-s1);
  padding: 12px 18px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  border-top: 1px solid var(--xh-border);
  flex-shrink: 0;
}

.xh-dl-btn-cancel {
  height: 32px;
  padding: 0 16px;
  background: var(--xh-amber);
  color: #fff;
  border: none;
  border-radius: 7px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.xh-dl-btn-save {
  height: 32px;
  padding: 0 16px;
  background: var(--xh-green);
  color: #fff;
  border: none;
  border-radius: 7px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.xh-dl-btn-save:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ── Toast ───────────────────────────────────────────────────────────────── */

.xh-dl-toast {
  position: fixed;
  bottom: 40px;
  right: 20px;
  z-index: 2000;
  background: var(--xh-b);
  color: #fff;
  padding: 9px 15px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .22s, transform .22s;
  pointer-events: none;
}

.xh-dl-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.xh-dl-toast-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.xh-dl-toast-icon.ok {
  background: var(--xh-green);
}

.xh-dl-toast-icon.dl {
  background: var(--xh-a);
}

.xh-dl-toast-icon svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: round;
}

/* ── Dark mode — ajustes finos ───────────────────────────────────────────── */

body.xh-dark .xh-dl-sub-select {
  color: var(--xh-text);
}

body.xh-dark .xh-dl-form-input,
body.xh-dark .xh-dl-form-select {
  color: var(--xh-text);
}