/* I like my icons a bit bigger */
.nav-link .fa,
.nav-link .fab,
.nav-link .fal,
.nav-link .far,
.nav-link .fas {
  font-size: 130% !important;
}

.btn .fa,
.btn .fab,
.btn .fal,
.btn .far,
.btn .fas {
  font-size: 130% !important;
}

.table.dataTable {
  box-shadow: 0 2px 0 rgba(0, 0, 0, .11), 0 4px 8px rgba(0, 0, 0, .12), 0 10px 10px rgba(0, 0, 0, .06), 0 7px 70px rgba(0, 0, 0, .1);
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 0.25rem;
}

.dataTables_info {
  color: var(--gray);
}

/* finger cursor if clickable */
.viewbox-clickable-row {
  cursor: pointer;
}


/* VBW-216 element blur hover */
.blur {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.blur:hover {
  -webkit-filter: blur(0);
  -moz-filter: blur(0);
  -o-filter: blur(0);
  -ms-filter: blur(0);
  filter: blur(0);
}


/* tabs with content */
.nav-tabs .nav-link.active {
  background-color: var(--primary);
  font-weight: bold;
}

/* fancy checkboxes and radio selectors using fontawesome icons */
/* hide browser widget */
input[type=radio].awesome_checks,
input[type=checkbox].awesome_checks {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* Label after input gets Font Awesome font, sizing, default mid-gray color*/
input[type=radio].awesome_checks~label:before,
input[type=checkbox].awesome_checks~label:before {
  font-family: "Font Awesome 6 Pro", FontAwesome, sans-serif;
  display: inline-block;
  font-size: 1.4em;
  color: var(--gray);
}

/* radio off & checked */
input[type=radio].awesome_checks~label:before {
  font-weight: 300;
  content: "\f111";
  color: var(--awesome_check_off);
}

input[type=radio].awesome_checks:checked~label:before {
  font-weight: 800;
  content: "\f00c";
  color: var(--awesome_check_checked);
}

/* checkbox off & checked */
input[type=checkbox].awesome_checks~label:before {
  font-weight: 300;
  content: "\f0c8";
  color: var(--awesome_check_off);
}

input[type=checkbox].awesome_checks:checked~label:before {
  font-weight: 800;
  content: "\f14a";
  color: var(--awesome_check_checked);
}

/* hover radio & checkbox */
input[type=radio].awesome_checks~label:hover,
input[type=radio].awesome_checks~label:hover:before,
input[type=checkbox].awesome_checks~label:hover,
input[type=checkbox].awesome_checks~label:hover:before {
  color: var(--awesome_check_hover);
  cursor: pointer;
}

.row-more-info {
  color: var(--gray);
  opacity: 0.5;
  margin-bottom: .5rem !important;
  margin-top: .5rem !important;
  float: right !important;
}

tr:hover .row-more-info {
  color: var(--info);
  opacity: 1;
}

.cell-not-clickable {
  cursor: default !important;
}

.table-hover tbody tr:hover .cell-not-clickable {
  background-color: inherit !important;
}

/* wider modal VBW-81 */
@media (min-width: 1200px) {
  .modal-xl {
    max-width: 1024px;
  }
}


/* wizard steps style, medium and large screens */
.wizard-steps-container {
  overflow: hidden;
  position: relative;
}

.wizard-step-progress {
  position: absolute;
  top: 14px;
  left: 0;
  width: 100%;
}

.wizard-step {
  position: relative;
  float: left;
  padding: 0 6px;
  text-align: center;
}

.wizard-step-icon {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin-top: 4px;
  line-height: 40px;
  background: var(--light);
  color: var(--gray);
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.wizard-step>.bg-primary {
  color: #fff;
}

#wizard-current-icon {
  width: 48px;
  height: 48px;
  margin-top: 0;
  font-size: 24px;
  line-height: 48px;
}

/* wizard steps style, small and tiny screens */
@media (max-width: 640px) {
  .wizard-steps-container {
    overflow: hidden;
    position: relative;
  }

  .wizard-step-progress {
    position: absolute;
    top: 11px;
    left: 0;
    width: 100%;
  }

  .wizard-step {
    position: relative;
    float: left;
    width: 25.0%;
    padding: 0 2px;
    text-align: center;
    font-size: 14px
  }

  .wizard-step-icon {
    display: inline-block;
    width: 34px;
    height: 34px;
    margin-top: 3px;
    line-height: 36px;
    background: var(--light);
    color: var(--gray);
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
  }

  .wizard-step>.bg-primary {
    color: #fff;
  }

  #wizard-current-icon {
    width: 38px;
    height: 38px;
    margin-top: 0;
    font-size: 20px;
    line-height: 40px;
  }
}

/* stripe country selector */
#flag_span.us::before {
  background-position: -475px -135px;
}

#flag_span.at::before {
  background-position: -165px -10px;
}

#flag_span.au::before {
  background-position: -196px -10px;
}

#flag_span.be::before {
  background-position: -227px -10px;
}

#flag_span.br::before {
  background-position: -351px -10px;
}

#flag_span.ca::before {
  background-position: -382px -10px;
}

#flag_span.ch::before {
  background-position: -475px -10px;
}

#flag_span.cn::before {
  background-position: -41px -35px;
}

#flag_span.de::before {
  background-position: -134px -35px;
}

#flag_span.dk::before {
  background-position: -196px -35px;
}

#flag_span.es::before {
  background-position: -320px -35px;
}

#flag_span.eu::before {
  background-position: -351px -35px;
}

#flag_span.fi::before {
  background-position: -382px -35px;
}

#flag_span.fr::before {
  background-position: -413px -35px;
}

#flag_span.gb::before {
  background-position: -475px -35px;
}

#flag_span.hk::before {
  background-position: -41px -60px;
}

#flag_span.ie::before {
  background-position: -196px -60px;
}

#flag_span.it::before {
  background-position: -351px -60px;
}

#flag_span.jp::before {
  background-position: -444px -60px;
}

#flag_span.lu::before {
  background-position: -258px -85px;
}

#flag_span.mx::before {
  background-position: -475px -85px;
}

#flag_span.nl::before {
  background-position: -103px -110px;
}

#flag_span.no::before {
  background-position: -134px -110px;
}

#flag_span.nz::before {
  background-position: -165px -110px;
}

#flag_span.pt::before {
  background-position: -413px -110px;
}

#flag_span.se::before {
  background-position: -103px -135px;
}

#flag_span.sg::before {
  background-position: -134px -135px;
}