html,
body {
  height: 100%;
}

.loading {
  background: white url("../images/ajax-loader.gif") no-repeat;
  background-position: center;
  width: 100%;
  height: 100%;
  display: inline-block;
}
.wrap {
  min-height: 100%;
  height: auto;
  margin: 0 auto -60px;
  padding: 0 0 60px;
}
.wrap > .container,
.wrap > .container-fluid {
  padding: 70px 15px 20px;
}
.footer {
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  padding-top: 20px;
}
.footer .container {
  text-align: center;
  height: 250px;
}
.jumbotron {
  text-align: center;
  background-color: transparent;
}
.jumbotron .btn {
  font-size: 21px;
  padding: 14px 24px;
}
.not-set {
  color: #c55;
  font-style: italic;
}
/* add sorting icons to gridview sort links */
a.asc:after,
a.desc:after {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  padding-left: 5px;
}
a.asc:after {
  content: "\e151";
}
a.desc:after {
  content: "\e152";
}
.sort-numerical a.asc:after {
  content: "\e153";
}
.sort-numerical a.desc:after {
  content: "\e154";
}
.sort-ordinal a.asc:after {
  content: "\e155";
}
.sort-ordinal a.desc:after {
  content: "\e156";
}
.grid-view th {
  white-space: nowrap;
}
.hint-block {
  display: block;
  margin-top: 5px;
  color: #999;
}
.error-summary {
  color: #a94442;
  background: #fdf7f7;
  border-left: 3px solid #eed3d7;
  padding: 10px 20px;
  margin: 0 0 15px 0;
}
/* Colours */
.red {
  color: #a94442;
}
.green {
  color: #008000;
}
.nav.navbar-nav .navbar-btn {
  color: white;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
}
@media (max-width: 1235px) {
  .nav.navbar-nav .navbar-btn {
    margin-top: 5px;
  }
}
@media print {
  .btn,
  input,
  textarea,
  select,
  option,
  .filter,
  .filters,
  .breadcrumb,
  .form-inline,
  .input-group,
  .hint-block,
  .nav {
    display: none;
  }
  a[href]:after {
    content: none !important;
  }
  .container {
    padding-top: 1cm;
  }
  .footer .container {
    text-align: right;
    height: 3cm;
  }
  .nav-board {
    display: none;
  }
  .jumbotron {
    padding: 0;
  }
  table tbody tr td input.form-control {
    height: 20px;
    border: 0 !important;
    padding: 6px 12px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
  }
  .alert {
    display: none;
  }
}
@font-face {
  font-family: 'latobold';
  src: url('../fonts/lato-bold-webfont.eot');
  src: url('../fonts/lato-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/lato-bold-webfont.woff2') format('woff2'), url('../fonts/lato-bold-webfont.woff') format('woff'), url('../fonts/lato-bold-webfont.ttf') format('truetype'), url('../fonts/lato-bold-webfont.svg#latobold') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'latoitalic';
  src: url('../fonts/lato-italic-webfont.eot');
  src: url('../fonts/lato-italic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/lato-italic-webfont.woff2') format('woff2'), url('../fonts/lato-italic-webfont.woff') format('woff'), url('../fonts/lato-italic-webfont.ttf') format('truetype'), url('../fonts/lato-italic-webfont.svg#latoitalic') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'latolight';
  src: url('../fonts/lato-light-webfont.eot');
  src: url('../fonts/lato-light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/lato-light-webfont.woff2') format('woff2'), url('../fonts/lato-light-webfont.woff') format('woff'), url('../fonts/lato-light-webfont.ttf') format('truetype'), url('../fonts/lato-light-webfont.svg#latolight') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'latoregular';
  src: url('../fonts/lato-regular-webfont.eot');
  src: url('../fonts/lato-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/lato-regular-webfont.woff2') format('woff2'), url('../fonts/lato-regular-webfont.woff') format('woff'), url('../fonts/lato-regular-webfont.ttf') format('truetype'), url('../fonts/lato-regular-webfont.svg#latoregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.font-regular {
  font-family: 'latoregular';
}
.font-bold {
  font-family: 'latobold';
}
.font-light {
  font-family: 'latolight';
}
.font-italic {
  font-family: 'latoitalic';
}
.font-up {
  text-transform: uppercase;
}
.font-light-gray {
  color: #939598;
}
.font-xxl {
  font-size: 32px;
}
.font-xl {
  font-size: 25.6px;
}
.font-l {
  font-size: 20.8px;
}
.font-m {
  font-size: 16px;
}
.font-s {
  font-size: 12.8px;
}
.font-xs {
  font-size: 8px;
}
.display-navbar-breakpoint {
  display: none;
}
@media (max-width: 1265px) {
  li.dropdown.open {
    background-color: white;
  }
  li.dropdown.open li a {
    color: #939598;
  }
  li.dropdown.open li.active a {
    color: white;
  }
  .navbar-collapse ul.navbar-nav.navbar-right.nav > li:nth-child(1),
  .navbar-collapse ul.navbar-nav.navbar-right.nav > li:nth-child(2) {
    display: none;
  }
  .navbar-right .dropdown-menu {
    left: inherit;
    width: 100%;
  }
  .navbar-links-responsive {
    display: inline-block !important;
  }
  .navbar-links-responsive li {
    float: left!important;
  }
  .navbar-links-responsive li a {
    padding: 15px 25px!important;
  }
  .display-navbar-breakpoint {
    display: block;
  }
  .height-50 {
    padding-top: 3px;
    height: 50px;
  }
  .navbar-header {
    float: none;
  }
  .navbar-toggle {
    display: block;
  }
  .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .navbar-collapse.collapse {
    display: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .navbar-nav:not(.pull-right) {
    float: none!important;
    margin: 7.5px -15px;
  }
  .navbar-nav:not(.collapsed) > li {
    float: none;
  }
  .navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .navbar-text {
    float: none;
    margin: 15px 0;
  }
  /* since 3.1.0 */
  .navbar-collapse.collapse.in {
    display: block!important;
  }
  .collapsing {
    overflow: hidden!important;
  }
}
@media (max-width: 520px) {
  .navbar-links-responsive {
    display: none!important;
  }
  .navbar-collapse ul.navbar-nav.navbar-right.nav > li:nth-child(1),
  .navbar-collapse ul.navbar-nav.navbar-right.nav > li:nth-child(2) {
    display: block;
  }
}
.navbar-inverse ul.navbar-nav {
  height: 50px;
}
.navbar-inverse .navbar-brand {
  text-transform: uppercase;
  font-family: 'latobold';
}
@media (min-width: 1266px) and (max-width: 1420px) {
  .navbar-inverse a.btn.btn-danger {
    padding: 19px 3px!important;
  }
  .navbar-inverse .navbar-nav > li > a {
    padding: 20px 3px;
  }
  .navbar-inverse ul.navbar-nav {
    height: 60px;
  }
}
@media (max-width: 1265px) {
  .navbar-inverse ul.navbar-nav {
    height: 50%;
    margin-left: 10px;
    text-align: center;
  }
}
@media (min-width: 300px) {
  .navbar-nav > li > a {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 14px!important;
  }
}
.navbar-nav.navbar-right li {
  margin-bottom: 0;
}
@media (max-width: 1200px) {
}
@media (max-width: 998px) {
  .navbar-nav.navbar-right li a {
    padding: 10px 8px;
  }
}
@media (max-width: 1230px) {
  .navbar-nav.navbar-right {
    margin: 0;
  }
  .navbar-nav.navbar-right li a {
    text-align: center;
    width: 100%;
    padding: 10px 8px;
  }
}
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
  color: #58595B;
}
.navbar-img {
  float: left;
  width: 25px;
  height: auto;
  padding-top: 10px;
}
@media (max-width: 768px) {
  .navbar-img {
    display: none;
  }
}
.nav-board .col-md-3 a {
  color: white;
  text-align: center;
  height: 100%;
  margin: 0 10px 0 0;
  display: block;
  box-sizing: border-box;
}
.nav-board .col-md-3 a h1 {
  margin: 0;
  padding: 50px;
  font-size: 16px;
}
.nav-board .col-md-3 a h3 {
  margin: 0;
  padding: 30px 0;
  font-size: 16px;
}
.nav-board .col-md-3 a h3 span {
  font-size: 12.8px;
}
.nav-board .col-md-3 .col-xs-12 {
  height: 115px;
  overflow: hidden;
  margin-bottom: 10px;
  padding: 0;
}
.nav-board .col-md-3 .col-xs-6 {
  height: 75px;
  overflow: hidden;
  padding: 0;
  margin-bottom: 10px;
}
.nav-board .col-md-3:first-of-type a {
  background-color: #4F3466;
}
.nav-board .col-md-3:first-of-type a:hover {
  background-color: #725671;
}
.nav-board .col-md-3:nth-child(2) a {
  background-color: #F2A03D;
}
.nav-board .col-md-3:nth-child(2) a:hover {
  background-color: #F3BD1C;
}
.nav-board .col-md-3:nth-child(3) a {
  background-color: #168039;
}
.nav-board .col-md-3:nth-child(3) a:hover {
  background-color: #45BF55;
}
.nav-board .col-md-3:nth-child(4) a {
  background-color: #C33A1A;
}
.nav-board .col-md-3:nth-child(4) a:hover {
  background-color: #F84322;
}
@media (max-width: 998px) {
  .nav-board .col-md-3 a h1 {
    padding: 20px;
  }
  .nav-board .col-md-3 a h3 {
    padding: 20px 0;
  }
  .nav-board .col-md-3 .col-xs-12 {
    height: auto;
  }
  .nav-board .col-md-3 .col-xs-6 {
    height: auto;
  }
}
@media (max-width: 998px) {
  .nav-board .col-md-3 .col-xs-12 {
    margin-top: 20px;
  }
}
@media (min-width: 768px) {
  .navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}
@media print {
  .container-fluid,
  .container {
    padding-top: 0!important;
    margin-top: 0!important;
  }
  h1 {
    font-size: 18px!important;
  }
  h2 {
    font-size: 15px!important;
  }
  h3 {
    font-size: 14px!important;
  }
  h4 {
    font-size: 12px!important;
  }
  ul li {
    font-size: 12px!important;
  }
  p {
    font-size: 12px;
  }
  td {
    font-size: 12px!important;
  }
  .bill-update .input-group {
    display: none;
  }
  footer {
    border: none;
    width: 100%;
    text-align: center;
    padding: 20px 0;
  }
  footer span {
    margin: 0;
    text-align: center;
    font-size: 8px;
  }
  footer img {
    width: 80px;
    margin: 0!important;
    display: inline-block;
  }
  .title {
    margin: 0!important;
  }
  .title h1 {
    margin: 0;
  }
  .summary {
    text-align: right!important;
  }
  .customer-index hr {
    display: none;
  }
  .customer-index .input-group {
    display: none;
  }
  .detail-view tr th {
    padding: 0.05cm 0.05cm !important;
  }
  .table > thead > tr > th,
  .table > tbody > tr > th,
  .table > tfoot > tr > th,
  .table > thead > tr > td,
  .table > tbody > tr > td,
  .table > tfoot > tr > td {
    padding: 0.05cm !important;
  }
}
.btn,
.btn-group {
  border-radius: 0;
  padding: 5px 10px!important;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 3px;
}
.btn.btn-view,
.btn-group.btn-view {
  background-color: #91B501;
  border-color: #91B501;
  color: white;
}
.btn.btn-view:hover,
.btn-group.btn-view:hover {
  background-color: #a5ce01 !important;
  border-color: #a5ce01 !important;
}
.btn.btn-print,
.btn-group.btn-print {
  background-color: #BDBDBD;
  border-color: #BDBDBD;
  color: white;
}
.btn.btn-print:hover,
.btn-group.btn-print:hover {
  background-color: #cacaca !important;
  border-color: #cacaca !important;
}
.btn.btn-repeat,
.btn-group.btn-repeat {
  background-color: #A7019E;
  border-color: #A7019E;
  color: white;
}
.btn.btn-repeat:hover,
.btn-group.btn-repeat:hover {
  background-color: #c001b6 !important;
  border-color: #c001b6 !important;
}
.btn.btn-success,
.btn-group.btn-success {
  background-color: #399439;
  border-color: #399439;
  color: white;
}
.btn.btn-success:hover,
.btn-group.btn-success:hover {
  background-color: #48b848 !important;
  border-color: #48b848 !important;
}
.btn.btn-danger,
.btn-group.btn-danger {
  background-color: #F84322;
  border-color: #F84322;
  color: white;
}
.btn.btn-danger:hover,
.btn-group.btn-danger:hover {
  background-color: #fa6d53 !important;
  border-color: #fa6d53 !important;
}
.btn.btn-danger.btn-sales,
.btn-group.btn-danger.btn-sales {
  padding: 14px 10px!important;
  margin-bottom: 0;
  margin-top: 0;
}
@media (max-width: 1265px) {
  .btn.btn-danger.btn-sales,
  .btn-group.btn-danger.btn-sales {
    padding: 13px 10px!important;
  }
}
.btn.btn-warning,
.btn-group.btn-warning {
  background-color: #E6982A;
  border-color: #E6982A;
}
.btn.btn-warning:hover,
.btn-group.btn-warning:hover {
  background-color: #ebae58 !important;
  border-color: #ebae58 !important;
}
.btn.btn-info,
.btn-group.btn-info {
  background-color: #2093B5;
  border-color: #2093B5;
}
.btn.btn-info:hover,
.btn-group.btn-info:hover {
  background-color: #2eb3da !important;
  border-color: #2eb3da !important;
}
.btn.btn-primary,
.btn-group.btn-primary {
  color: #fff;
  background-color: #337ab7;
  border-color: #337ab7;
}
.btn.btn-primary:hover,
.btn-group.btn-primary:hover {
  background-color: #4f93ce;
  border-color: #4f93ce;
}
.btn.btn-width,
.btn-group.btn-width {
  width: 100%;
}
@media (max-width: 768px) {
  .btn.btn-primary,
  .btn-group.btn-primary,
  .btn.btn-view,
  .btn-group.btn-view,
  .btn.btn-info,
  .btn-group.btn-info,
  .btn.btn-success,
  .btn-group.btn-success,
  .btn.btn-warning,
  .btn-group.btn-warning,
  .btn.btn-danger,
  .btn-group.btn-danger,
  .btn.btn-default,
  .btn-group.btn-default {
    width: 100%;
    margin: 10px 0;
  }
}
.panel-heading button.btn {
  padding: 1px 10px!important;
}
@media (max-width: 768px) {
  .conciliation-create .panel-heading {
    height: 80px!important;
  }
}
.text-center {
  text-align: center;
}
.clickable {
  cursor: pointer;
}
.zoomable-in {
  cursor: zoom-in;
}
.zoomable-out {
  cursor: zoom-out;
}
.on-scroll {
  display: none;
}
.transparent {
  opacity: 0;
}
.display-block {
  display: block;
}
.center-block {
  float: none !important;
  margin: auto;
}
.noMargin {
  margin: 0!important;
}
.no-margin-top {
  margin-top: 0;
}
.no-margin-bottom {
  margin-bottom: 0;
}
.no-margin-right {
  margin-right: 0;
}
.no-margin-left {
  margin-left: 0;
}
.no-padding {
  padding: 0;
}
.no-padding-top {
  padding-top: 0;
}
.no-padding-bottom {
  padding-bottom: 0;
}
.no-padding-right {
  padding-right: 0;
}
.no-padding-left {
  padding-left: 0;
}
.margin-full {
  margin: 30px;
}
.margin-half {
  margin: 15px;
}
.margin-quarter {
  margin: 7.5px;
}
.margin-bottom-double {
  margin-bottom: 60px;
}
.margin-top-double {
  margin-top: 60px;
}
.margin-top-full {
  margin-top: 30px;
}
.margin-bottom-full {
  margin-bottom: 30px;
}
.margin-right-full {
  margin-right: 30px;
}
.margin-left-full {
  margin-left: 30px;
}
.margin-top-half {
  margin-top: 15px;
}
.margin-bottom-half {
  margin-bottom: 15px;
}
.margin-right-half {
  margin-right: 15px;
}
.margin-left-half {
  margin-left: 15px;
}
.margin-top-quarter {
  margin-top: 7.5px;
}
.margin-bottom-quarter {
  margin-bottom: 7.5px;
}
.margin-right-quarter {
  margin-right: 7.5px;
}
.margin-left-quarter {
  margin-left: 7.5px;
}
.padding-full {
  padding: 30px;
}
.padding-half {
  padding: 15px;
}
.padding-quarter {
  padding: 7.5px;
}
.padding-top-full {
  padding-top: 30px;
}
.padding-bottom-full {
  padding-bottom: 30px;
}
.padding-right-full {
  padding-right: 30px;
}
.padding-left-full {
  padding-left: 30px;
}
.padding-top-half {
  padding-top: 15px;
}
.padding-bottom-half {
  padding-bottom: 15px;
}
.padding-right-half {
  padding-right: 15px;
}
.padding-left-half {
  padding-left: 15px;
}
.padding-top-quarter {
  padding-top: 7.5px;
}
.padding-bottom-quarter {
  padding-bottom: 7.5px;
}
.padding-right-quarter {
  padding-right: 7.5px;
}
.padding-left-quarter {
  padding-left: 7.5px;
}
.padding-top-double {
  padding-top: 60px;
}
.padding-bottom-double {
  padding-bottom: 60px;
}
.padding-right-double {
  padding-right: 60px;
}
.padding-left-double {
  padding-left: 60px;
}
.hide-overflow {
  overflow: hidden;
}
.horizontal-center {
  margin: 0 auto;
  float: none;
}
a {
  text-decoration: none;
}
a:hover,
a:focus,
a:visited,
a:active {
  text-decoration: none;
}
input.form-control {
  border-radius: 0px;
}
.position-relative {
  position: relative;
}
body {
  font-size: 16px;
  font-family: 'latoregular';
  color: #545454;
}
a {
  text-decoration: none;
}
a:hover,
a:focus,
a:visited,
a:active {
  text-decoration: none;
}
.select2-dropdown,
.select2-selection,
.selection {
  border-radius: 0px!important;
}
input.form-control {
  border-radius: 0px;
}
textarea,
select {
  border-radius: 0px;
}
textarea.form-control,
select.form-control {
  border-radius: 0px;
}
span.input-group-addon {
  border-radius: 0px;
}
input[type="radio"],
input[type="checkbox"] {
  margin-right: 6px;
}
.row {
  margin-right: 0;
  margin-left: 0;
}
.va {
  position: relative;
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.disable-status {
  background-color: #EAEAEA;
  color: #9E9E9E;
  font-style: italic;
}
.inline-block {
  display: inline-block !important;
  vertical-align: middle;
}
hr {
  /* border-bottom: 2px solid #9E9E9E; */
}
p {
  line-height: 1.8em;
}
.noPadding {
  padding: 0;
}
.disable-status {
  background-color: #EAEAEA;
  color: #9E9E9E;
  font-style: italic;
}
.bg-important {
  padding: 10px 0px;
  background-color: #F1F2F2;
  border: 1px solid #D1D3D4;
  margin: 10px 0;
}
.panel-default .panel-heading {
  background-color: #D4D4D4;
  border-color: #828282;
  height: 50px;
}
.panel-default .panel-heading .panel-title {
  margin-top: 6px;
}
@media (max-width: 768px) {
  .table-width tr td {
    width: 100%;
    display: inline-block;
    text-align: center;
  }
}
@media (max-width: 768px) {
  .table-width-half tr td {
    width: 50%;
    display: inline-block;
    text-align: center;
    min-height: 50px;
  }
}
@media (max-width: 768px) {
  .table-sales-labels tr td:nth-child(1):before {
    content: "#";
    width: 100%;
    height: 20px;
    display: inline-block;
    font-family: 'latobold';
    color: #02325B;
  }
  .table-sales-labels tr td:nth-child(2):before {
    content: "Cantidad";
    width: 100%;
    height: 20px;
    display: inline-block;
    font-family: 'latobold';
    color: #02325B;
  }
  .table-sales-labels tr td:nth-child(3):before {
    content: "Concepto";
    width: 100%;
    height: 20px;
    display: inline-block;
    font-family: 'latobold';
    color: #02325B;
  }
  .table-sales-labels tr td:nth-child(4):before {
    content: "Precio por Unidad";
    width: 100%;
    height: 20px;
    display: inline-block;
    font-family: 'latobold';
    color: #02325B;
  }
  .table-sales-labels tr td:nth-child(5):before {
    content: "Subtotal";
    width: 100%;
    height: 20px;
    display: inline-block;
    font-family: 'latobold';
    color: #02325B;
  }
}
.table-products tr th:nth-child(4) {
  width: 5%!important;
}
.table-products tr th:nth-child(8) {
  width: 10%!important;
}
.table-products tr th:nth-child(9) {
  width: 50%!important;
}
.table-products tr td:nth-child(6),
.table-products tr td:nth-child(7) {
  text-align: center;
}
.table-products tr td:nth-child(5) table {
  background-color: transparent;
}
.table-products tr td:nth-child(5) table tr td {
  border: none;
}
.table-products tr td:nth-child(8) a {
  display: inline-block;
  width: 40%;
  text-align: center;
}
.table-products tr td:nth-child(8) a span {
  display: block;
}
@media (max-width: 768px) {
  .table-products tr td {
    font-size: 12.8px;
  }
  .table-products tr td:first-child {
    border-top: 2px solid #02325B;
    margin: 0;
  }
  .table-products tr td:last-child {
    padding-bottom: 20px;
  }
  .table-products tr td a {
    display: inline!important;
  }
  .table-products tr td a span {
    display: inline!important;
    padding-right: 10px;
    font-size: 20.8px;
  }
  .table-products tr td table {
    margin: 0;
  }
  .table-products tr td table td:first-child {
    border: none;
  }
}
.table-view.border {
  border-top: 1px solid #939598;
}
.table-view > div {
  padding: 10px;
}
.table-view > div hr {
  margin: 5px 0;
  border-top: 1px solid #D1D3D4;
}
.table-view > div span {
  width: 100%;
}
.table-view > div span.text-center {
  text-align: center;
  display: inline-block;
}
.table-style > div {
  border: 1px solid #D1D3D4;
  padding: 10px;
  min-height: 44px;
}
.table-style > div.bg-gray {
  background-color: #F1F2F2;
  text-transform: uppercase;
}
.pagination {
  text-align: center;
  width: 100%;
}
.pagination li {
  display: inline-block;
}
.title {
  width: 100%;
  display: inline-block;
  height: 100%;
  margin: 0;
}
.title h1 {
  display: inline-block;
  margin-bottom: 20px;
  word-break: break-all;
  width: 100%;
  text-align: left;
  margin: 10px 0 10px 0;
}
.title p {
  display: inline;
  float: right;
  text-align: right;
}
.title p a {
  margin-left: 10px;
  margin-bottom: 10px;
}
@media (max-width: 768px) {
  .title {
    margin: 20px 0;
  }
  .title p {
    display: block;
    float: none!important;
    margin-top: 10px;
    width: 100%!important;
  }
}
.breadcrumb {
  background-color: white;
  font-size: 12.8px;
  padding: 8px 15px 8px 0px;
}
h1 {
  font-size: 25.6px;
  font-family: 'latobold';
}
.float-right {
  float: right;
}
.float-left {
  float: left;
}
ul li {
  margin-bottom: 5px;
}
.hint-block {
  margin-top: 10px;
  font-size: 12.8px;
  font-family: 'latobold';
}
.alert {
  border-radius: 0;
}
@media (max-width: 768px) {
  .input-group {
    display: inline-block;
    width: 100%;
  }
}
.summary {
  margin: 10px 0;
  text-align: right;
  font-size: 12.8px;
}
@media (max-width: 768px) {
  .summary {
    text-align: center;
  }
}
.bill-form .input-group .input-group-addon {
  border: 1px solid #ccc;
}
@media (max-width: 768px) {
  .bill-form .input-group > * {
    width: 100%;
    display: inline-block;
  }
}
.debtors-search .col-sm-4 {
  padding-top: 26px;
}
.bill-index .form-group,
.bill-index .btn-group {
  margin-right: 10px;
}
.bill-index .rc-handle-container {
  margin-top: 20px;
}
.bill-index th {
  font-family: 'latobold';
  font-size: 12.8px;
  text-transform: uppercase;
  color: #939598;
  text-align: center;
}
.bill-index th a {
  font-family: 'latobold';
  font-size: 12.8px;
  text-transform: uppercase;
  width: 100%;
  display: inline-block;
  color: #939598;
  text-align: center;
}
.bill-index th a:hover {
  color: #006DAA;
}
tr td {
  font-size: 16px;
}
th {
  font-family: 'latobold';
  font-size: 12.8px;
  text-transform: uppercase;
  color: #939598;
  text-align: center;
}
th a {
  font-family: 'latobold';
  font-size: 12.8px;
  text-transform: uppercase;
  width: 100%;
  display: inline-block;
  color: #939598;
  text-align: center;
}
th a:hover {
  color: #006DAA;
}
.hint-block {
  margin-top: 15px;
}
.customer-index tr td {
  font-size: 12.8px;
}
.customer-index tr td:nth-child(10) {
  padding: 14px 10px 0 10px ;
  width: 8%;
}
.customer-index tr td:nth-child(10) a {
  width: 100%;
}
.customer-index tr td:nth-child(11) span.glyphicon {
  font-size: 18px;
}
.customer-index tr td:nth-child(2) {
  text-align: center;
}
@media (max-width: 768px) {
  .customer-index tr td:nth-child(10) {
    padding: 0;
  }
  .customer-index tr td:nth-child(10) a {
    height: 100%;
    width: 100%;
    padding: 0 0 0 5px;
  }
}
@media print {
  .customer-index hr {
    display: none;
  }
  .customer-index .input-group {
    display: none;
  }
}
.customer-view .btn-group {
  padding: 0;
}
.detail-view {
  overflow: auto;
}
.detail-view tr th {
  width: 30%;
  text-align: right;
  padding: 10px 20px!important;
  font-size: 12.8px;
}
.detail-view tr td {
  text-align: center;
}
.product-chart {
  border: 1px solid #939598;
  margin: 10px 0;
}
.product-chart .col-sm-3 {
  background-color: #D1D3D4;
  height: 100%;
}
.product-chart .col-sm-3 .img-container {
  height: 208px;
  width: 216px;
  overflow: hidden;
  text-align: center;
}
.product-chart .col-sm-3 .img-container img {
  width: 100%;
  height: auto;
  display: inline-block;
}
.product-chart .col-sm-9 {
  padding-left: 10px!important;
}
.product-chart h5 {
  color: #939598;
  margin: 5px 0;
  text-align: left;
}
.product-chart h4 {
  text-align: center;
  margin: 5px 0;
}
.product-chart h4:first-of-type {
  text-align: left;
}
.product-chart .row {
  border-bottom: 1px solid #D1D3D4;
}
.product-chart .row:last-child {
  margin: 10px 0;
  border-bottom: none;
}
.payment-index h1 {
  margin-top: 30px;
  margin-bottom: 40px;
}
.payment-index h4 {
  font-family: 'latobold';
  text-transform: uppercase;
}
.payment-index h3 {
  margin-top: 50px;
  text-transform: capitalize;
}
#billsearch-bill_types label,
#billsearch-statuses label,
#billsearch-payment_methods label,
#taxcondition-billtypes label {
  font-weight: 400;
}
.graph-responsive {
  width: 100%;
  height: 200%;
  overflow: hidden;
}
#ui-datepicker-div {
  z-index: 2!important;
}
td.ui-datepicker-days-cell-over.ui-datepicker-today {
  background-color: #009C1C;
}
a.ui-state-default.ui-state-active {
  color: #d9534f;
}
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  color: #009C1C;
  font-weight: 700;
}
@media only screen and (max-width: 768px) {
  /* Force table to not be like tables anymore */
  #grid,
  .table-responsive {
    /* Hide table headers (but not display: none;, for accessibility) */
    /*
        Label the data
        */
  }
  #grid table,
  .table-responsive table,
  #grid thead,
  .table-responsive thead,
  #grid tbody,
  .table-responsive tbody,
  #grid th,
  .table-responsive th,
  #grid td,
  .table-responsive td,
  #grid tr,
  .table-responsive tr {
    display: block!important;
  }
  #grid thead tr,
  .table-responsive thead tr {
    position: absolute!important;
    top: -9999px !important;
    left: -9999px !important;
  }
  #grid tr,
  .table-responsive tr {
    border: 1px solid #ccc!important;
  }
  #grid td,
  .table-responsive td {
    /* Behave like a "row" */
    border: none!important;
    border-bottom: 1px solid #eee!important;
    position: relative!important;
    padding-left: 50%!important;
    white-space: normal!important;
    text-align: left!important;
    font-size: 1em!important;
    min-height: 36px;
    text-align: center!important;
  }
  #grid td a span,
  .table-responsive td a span {
    padding-left: 10px;
  }
  #grid td table,
  .table-responsive td table,
  #grid td tr,
  .table-responsive td tr {
    border: none!important;
  }
  #grid td td,
  .table-responsive td td {
    padding-left: 5px!important;
    border: none!important;
    text-align: center!important;
  }
  #grid td:before,
  .table-responsive td:before {
    /* Now like a table header */
    position: absolute!important;
    /* Top/left values mimic padding */
    top: 6px!important;
    left: 6px!important;
    width: 45%!important;
    padding-right: 10px!important;
    white-space: nowrap!important;
    text-align: left!important;
    font-weight: bold!important;
  }
  #grid td:before,
  .table-responsive td:before {
    content: attr(data-title) !important;
  }
}
.wrap {
  min-height: 75%;
}

/* [id^="user-management-"] div.panel-default {
  height: 40em;
} */
#user-management-permission-view .panel-default, 
#user-management-role-view .panel-default,
#user-management-user-permission-set .panel-default{
  height: 40em;
}


#user-management-permission-view form,
#user-management-role-view form,
#user-management-user-permission-set form {
  overflow: scroll;
  overflow-x: hidden;
  height: 33.5em;
  margin-bottom: 10em;
}
#user-management-user-permission-set div.col-sm-8 div.panel-body{
  overflow: scroll;
  overflow-x: hidden;
  height: 35em;
}

#user-management-permission-view .col-sm-6:nth-of-type(2) form{
  overflow-x: scroll;
}

#user-management-role-view button.btn.btn-primary.btn-sm, 
#user-management-permission-view button.btn.btn-primary.btn-sm,
#user-management-user-permission-set button.btn.btn-primary.btn-sm{
  position:absolute;
	bottom:20px;
}
#user-management-permission-view form .row .col-sm-3 button.btn.btn-primary.btn-sm{
  position:relative;
	bottom:0px;
}
#user-management-permission-view .col-sm-6:nth-of-type(2) .row {
  display: flex;
  justify-content: space-between;
}


#user-management-permission-view .col-sm-6:nth-of-type(2) form .row div.col-sm-3,
#user-management-permission-view .col-sm-6:nth-of-type(2) form .row div.col-sm-6{
  margin: 0 ;
  padding: 0 ;
  width: auto;
  
}

/* collapse menu properties */

#sale-bill-index div.form-group{
  margin-right: 0;
}
/* .input-group is the div behing the input tag. practically invisible */
#sale-bill-index .col-sm-8 .col-sm-6 .input-group{
  margin : 0;
  width: 100%;
}

#sale-bill-index div.bill-index div.row{
  display: flex;

  justify-content: space-between;

}

#sale-bill-index div .text-right{
  display: flex;
  justify-content: space-between;
}

#reports-reports-discount table,
#reports-reports-customer-per-discount table{
  background: hsla(192, 100%, 85%, 0.26);
  
}

#site-index .company-logo{
  width: 20rem;
}

/* Add new button */
.btn-dash { 
  color: #FFFFFF; 
  background-color: #6576FF; 
  border-color: #6576FF; 
} 
 
.btn-dash:hover, 
.btn-dash:focus, 
.btn-dash:active, 
.btn-dash.active, 
.open .dropdown-toggle.btn-dash { 
  color: #FFFFFF; 
  background-color: #515ECC; 
  border-color: #6576FF; 
} 
 
.btn-dash:active, 
.btn-dash.active, 
.open .dropdown-toggle.btn-dash { 
  background-image: none; 
} 
 
.btn-dash.disabled, 
.btn-dash[disabled], 
fieldset[disabled] .btn-dash, 
.btn-dash.disabled:hover, 
.btn-dash[disabled]:hover, 
fieldset[disabled] .btn-dash:hover, 
.btn-dash.disabled:focus, 
.btn-dash[disabled]:focus, 
fieldset[disabled] .btn-dash:focus, 
.btn-dash.disabled:active, 
.btn-dash[disabled]:active, 
fieldset[disabled] .btn-dash:active, 
.btn-dash.disabled.active, 
.btn-dash[disabled].active, 
fieldset[disabled] .btn-dash.active { 
  background-color: #6576FF; 
  border-color: #6576FF; 
} 
 
.btn-dash .badge { 
  color: #6576FF; 
  background-color: #FFFFFF; 
}

/* tailwind colors for the 400 hue */
.label-red {
  background-color: #f87171 !important;
}
.label-orange{
  background-color: #fb923c !important;
}
.label-yellow{
  background-color: #facc15 !important;
}
.label-lime{
  background-color: #84cc16 !important;
}
.label-green{
  background-color: #22c55e !important;
}
.label-teal{
  background-color: #2dd4bf !important;
}
.label-cyan{
  background-color: #22d3ee !important;
}
.label-blue{
  background-color: #60a5fa !important;
}
.label-purple{
  background-color: #c084fc !important;
}
.label-fuchsia{
  background-color: #e879f9 !important;
}
.bg-white {
  background-color: #ffffff !important;
}

.wn-block-title{
  font-size: 1.25rem;
  letter-spacing: -0.01rem;
  font-family: Roboto,sans-serif;
  font-weight: 500;
}

button.btn {
  outline: none !important;
}


#wifi-loader {
  --background: #62abff;
  --front-color: #6576FF;
  --back-color: #c3c8de;
  --text-color: #414856;
  width: 64px;
  height: 64px;
  border-radius: 50px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

#wifi-loader svg {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

#wifi-loader svg circle {
  position: absolute;
  fill: none;
  stroke-width: 6px;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(-100deg);
  transform-origin: center;
}

#wifi-loader svg circle.back {
  stroke: var(--back-color);
}

#wifi-loader svg circle.front {
  stroke: var(--front-color);
}

#wifi-loader svg.circle-outer {
  height: 86px;
  width: 86px;
}

#wifi-loader svg.circle-outer circle {
  stroke-dasharray: 62.75 188.25;
}

#wifi-loader svg.circle-outer circle.back {
  animation: circle-outer135 1.8s ease infinite 0.3s;
}

#wifi-loader svg.circle-outer circle.front {
  animation: circle-outer135 1.8s ease infinite 0.15s;
}

#wifi-loader svg.circle-middle {
  height: 60px;
  width: 60px;
}

#wifi-loader svg.circle-middle circle {
  stroke-dasharray: 42.5 127.5;
}

#wifi-loader svg.circle-middle circle.back {
  animation: circle-middle6123 1.8s ease infinite 0.25s;
}

#wifi-loader svg.circle-middle circle.front {
  animation: circle-middle6123 1.8s ease infinite 0.1s;
}

#wifi-loader svg.circle-inner {
  height: 34px;
  width: 34px;
}

#wifi-loader svg.circle-inner circle {
  stroke-dasharray: 22 66;
}

#wifi-loader svg.circle-inner circle.back {
  animation: circle-inner162 1.8s ease infinite 0.2s;
}

#wifi-loader svg.circle-inner circle.front {
  animation: circle-inner162 1.8s ease infinite 0.05s;
}

#wifi-loader .text {
  position: absolute;
  bottom: -40px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: lowercase;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.2px;
}

#wifi-loader .text::before, #wifi-loader .text::after {
  content: attr(data-text);
}

#wifi-loader .text::before {
  color: var(--text-color);
}

#wifi-loader .text::after {
  color: var(--front-color);
  animation: text-animation76 3.6s ease infinite;
  position: absolute;
  left: 0;
}

@keyframes circle-outer135 {
  0% {
    stroke-dashoffset: 25;
  }

  25% {
    stroke-dashoffset: 0;
  }

  65% {
    stroke-dashoffset: 301;
  }

  80% {
    stroke-dashoffset: 276;
  }

  100% {
    stroke-dashoffset: 276;
  }
}

@keyframes circle-middle6123 {
  0% {
    stroke-dashoffset: 17;
  }

  25% {
    stroke-dashoffset: 0;
  }

  65% {
    stroke-dashoffset: 204;
  }

  80% {
    stroke-dashoffset: 187;
  }

  100% {
    stroke-dashoffset: 187;
  }
}

@keyframes circle-inner162 {
  0% {
    stroke-dashoffset: 9;
  }

  25% {
    stroke-dashoffset: 0;
  }

  65% {
    stroke-dashoffset: 106;
  }

  80% {
    stroke-dashoffset: 97;
  }

  100% {
    stroke-dashoffset: 97;
  }
}

@keyframes text-animation76 {
  0% {
    clip-path: inset(0 100% 0 0);
  }

  50% {
    clip-path: inset(0);
  }

  100% {
    clip-path: inset(0 0 0 100%);
  }
}

/* Default Chakra UI styles for <Divider> */
hr.divider-chakra {
  border: 0 !important;
  border-top: 1px solid rgba(209, 213, 219, 0.3) !important;
  margin: 1em 0 !important;
}
/* Default Tailwind CSS styles for <hr> */
hr.hr-tailwind {
  border: 0;
  border-top: 1px solid rgba(209, 213, 219, 0.3);
  margin: 1em 0;
}

.glyphicon-refresh-animate {
   -webkit-animation-name: rotateThis;
   -webkit-animation-duration: 2s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-timing-function: linear;
}

@keyframes rotateThis {
 from { 
        -webkit-transform: rotate( 0deg );  
    }
 to  { 
        -webkit-transform: rotate( 360deg ); 
    }
}

/* Bootstrap 5 card example */
/* Contenedor principal de la tarjeta */
.card {
  display: flex;
  flex-direction: column;
  /* margin: 1rem; */
  background-color: #fff;
  border: 1px solid rgba(0,0,0,.125);
  border-radius: .25rem;
}

.card-active {
  border: 1px solid #206bc4;
}

/* Cabecera de la tarjeta */
.card-header {
  padding: .75rem 1.25rem;
  margin-bottom: 0;
  background-color: rgba(0,0,0,.03);
  border-bottom: 1px solid rgba(0,0,0,.125);
}

/* Cuerpo de la tarjeta */
.card-body {
  flex: 1 1 auto;
  padding: 1rem;
}

/* Título de la tarjeta en el cuerpo */
.card-title {
  margin-bottom: .75rem;
}

/* Texto de la tarjeta */
.card-text {
  margin-bottom: 1.25rem;
}

/* Imagen de la tarjeta */
.card-img-top {
  width: 100%;
  border-top-left-radius: .25rem;
  border-top-right-radius: .25rem;
}

/* Pie de la tarjeta */
.card-footer {
  padding: .75rem 1.25rem;
  background-color: rgba(99,131,168,.1);
  border-top: 1px solid rgba(0,0,0,.125);
}

.card-footer > .footer-title {
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 0;
  color: #0a2e59;;
}

.ribbon {
  margin: 0.25rem;
  border-radius: 4px;
  position: absolute;
  top: .75rem;
  right: calc(-1 * -0.75em);
  z-index: 1;
  padding: .25rem .75rem;
  font-size: .625rem;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  background: #206bc4;
  /* border-color: #206bc4; */
  border-radius: 4px 0 4px 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  min-width: 2rem
}

.ribbon:before {
  position: absolute;
  right: 0;
  bottom: 100%;
  width: 0;
  height: 0;
  content: "";
  filter: brightness(70%);
  border: calc(0.25rem * .5) solid;
  border-color: inherit;
  border-top-color: transparent;
  border-right-color: transparent
}

.ribbon a {
  color: #fff;
  text-decoration: none;
}
.noListStyle{
  list-style: none;
}

/* Add this CSS to your main stylesheet or directly in your view */
.custom-gridview-table {
  table-layout: auto; /* Ensures columns adjust based on content */
  width: auto; /* Ensures table adjusts based on content */
  max-width: 100%; /* Prevents table from exceeding container width */
}

.custom-gridview-table th,
.custom-gridview-table td {
  white-space: nowrap; /* Prevents text from wrapping */
  padding: 5px; /* Adjusts padding for better spacing */
}

.loader-modal-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background-color: rgba(0, 0, 0, 0.5); */
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 9999;
}

.loaderModal {
  position: relative;
  width: 75px;
  height: 100px;
}

.loaderModal__bar {
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 50%;
  background: rgb(0, 0, 0);
  transform-origin: center bottom;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}

.loaderModal__bar:nth-child(1) {
  left: 0px;
  transform: scale(1, 0.2);
  -webkit-animation: barUp1 4s infinite;
  animation: barUp1 4s infinite;
}

.loaderModal__bar:nth-child(2) {
  left: 15px;
  transform: scale(1, 0.4);
  -webkit-animation: barUp2 4s infinite;
  animation: barUp2 4s infinite;
}

.loaderModal__bar:nth-child(3) {
  left: 30px;
  transform: scale(1, 0.6);
  -webkit-animation: barUp3 4s infinite;
  animation: barUp3 4s infinite;
}

.loaderModal__bar:nth-child(4) {
  left: 45px;
  transform: scale(1, 0.8);
  -webkit-animation: barUp4 4s infinite;
  animation: barUp4 4s infinite;
}

.loaderModal__bar:nth-child(5) {
  left: 60px;
  transform: scale(1, 1);
  -webkit-animation: barUp5 4s infinite;
  animation: barUp5 4s infinite;
}

.loaderModal__ball {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 10px;
  height: 10px;
  background: #cc305c;
  border-radius: 50%;
  -webkit-animation: ball624 4s infinite;
  animation: ball624 4s infinite;
}

@keyframes ball624 {
  0% {
    transform: translate(0, 0);
  }

  5% {
    transform: translate(8px, -14px);
  }

  10% {
    transform: translate(15px, -10px);
  }

  17% {
    transform: translate(23px, -24px);
  }

  20% {
    transform: translate(30px, -20px);
  }

  27% {
    transform: translate(38px, -34px);
  }

  30% {
    transform: translate(45px, -30px);
  }

  37% {
    transform: translate(53px, -44px);
  }

  40% {
    transform: translate(60px, -40px);
  }

  50% {
    transform: translate(60px, 0);
  }

  57% {
    transform: translate(53px, -14px);
  }

  60% {
    transform: translate(45px, -10px);
  }

  67% {
    transform: translate(37px, -24px);
  }

  70% {
    transform: translate(30px, -20px);
  }

  77% {
    transform: translate(22px, -34px);
  }

  80% {
    transform: translate(15px, -30px);
  }

  87% {
    transform: translate(7px, -44px);
  }

  90% {
    transform: translate(0, -40px);
  }

  100% {
    transform: translate(0, 0);
  }
}

@-webkit-keyframes barUp1 {
  0% {
    transform: scale(1, 0.2);
  }

  40% {
    transform: scale(1, 0.2);
  }

  50% {
    transform: scale(1, 1);
  }

  90% {
    transform: scale(1, 1);
  }

  100% {
    transform: scale(1, 0.2);
  }
}

@keyframes barUp1 {
  0% {
    transform: scale(1, 0.2);
  }

  40% {
    transform: scale(1, 0.2);
  }

  50% {
    transform: scale(1, 1);
  }

  90% {
    transform: scale(1, 1);
  }

  100% {
    transform: scale(1, 0.2);
  }
}

@-webkit-keyframes barUp2 {
  0% {
    transform: scale(1, 0.4);
  }

  40% {
    transform: scale(1, 0.4);
  }

  50% {
    transform: scale(1, 0.8);
  }

  90% {
    transform: scale(1, 0.8);
  }

  100% {
    transform: scale(1, 0.4);
  }
}

@keyframes barUp2 {
  0% {
    transform: scale(1, 0.4);
  }

  40% {
    transform: scale(1, 0.4);
  }

  50% {
    transform: scale(1, 0.8);
  }

  90% {
    transform: scale(1, 0.8);
  }

  100% {
    transform: scale(1, 0.4);
  }
}

@-webkit-keyframes barUp3 {
  0% {
    transform: scale(1, 0.6);
  }

  100% {
    transform: scale(1, 0.6);
  }
}

@keyframes barUp3 {
  0% {
    transform: scale(1, 0.6);
  }

  100% {
    transform: scale(1, 0.6);
  }
}

@-webkit-keyframes barUp4 {
  0% {
    transform: scale(1, 0.8);
  }

  40% {
    transform: scale(1, 0.8);
  }

  50% {
    transform: scale(1, 0.4);
  }

  90% {
    transform: scale(1, 0.4);
  }

  100% {
    transform: scale(1, 0.8);
  }
}

@keyframes barUp4 {
  0% {
    transform: scale(1, 0.8);
  }

  40% {
    transform: scale(1, 0.8);
  }

  50% {
    transform: scale(1, 0.4);
  }

  90% {
    transform: scale(1, 0.4);
  }

  100% {
    transform: scale(1, 0.8);
  }
}

@-webkit-keyframes barUp5 {
  0% {
    transform: scale(1, 1);
  }

  40% {
    transform: scale(1, 1);
  }

  50% {
    transform: scale(1, 0.2);
  }

  90% {
    transform: scale(1, 0.2);
  }

  100% {
    transform: scale(1, 1);
  }
}

@keyframes barUp5 {
  0% {
    transform: scale(1, 1);
  }

  40% {
    transform: scale(1, 1);
  }

  50% {
    transform: scale(1, 0.2);
  }

  90% {
    transform: scale(1, 0.2);
  }

  100% {
    transform: scale(1, 1);
  }
}

.step-indicator {
  display: flex;
  align-items: center;
  margin-bottom: .5rem;
  padding: 20px 10px;
}

.step-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  flex-shrink: 0;
}

.step-circle span {
  font-size: 18px;
  color: #666;
  font-weight: 300;
}

.step-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.step-title {
  margin: 0 0 5px 0;
  font-size: 20px;
  color: #333;
  font-weight: 500;
}

.step-description {
  margin: 0;
  color: #777;
  font-size: 14px;
}

/* Create the styles of a dark alert */
.alert-dark {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}