style.css

/*
*  MYBOOKING DOCS
*  -----------------------------------------------------------------------------
*
*/

/* MYBOOKING FRAMEWORK */

:root {

  /* Color palette */
  --mb-accent-color: #2193F2;

  --mb-info-color: var(--mb-accent-color);
  --mb-primary-selected-date: #2193f2;
  --mb-secondary-selected-date: #9cdbf7;
  --mb-success-color: #3DD992;
  --mb-danger-color: #E6546E;
  --mb-warning-color: #FFB74D;
  --mb-lighter-color: #EEEEEE;
  --mb-light-color:  #DDDDDD;

  --mb-border-color: #BBB;
  --mb-border-radius: 0;
  --mb-background-color: #EEE;
  --mb-dark-background-color: #424242;
  --mb-negative-text-color: #FFF;

  /* Forms */
  --mb-form-field-height:  3rem;
  --mb-form-field-border-color:  var(--mb-border-color);
  --mb-form-field-background: white;

  /* Selector form */
  --mb-selector-label-color: currentcolor;
  --mb-selector-padding: 2rem;
  --mb-selector-background: transparent;
  --mb-selector-border-color: var(--mb-form-field-border-color);
  --mb-selector-field-height: var(--mb-form-field-height);

  --mb-selector-promo-border: var(--mb-form-field-border-color);
  --mb-selector-promo-bg: white;
  --mb-selector-promo-opacity: 1;

  /* Product box */
  --mb-product-separation: 0.7rem;
  --mb-product-background: transparent;
  --mb-product-border-color: var(--mb-border-color);

  /* Product grid */
  --mb-product-image-height: 260px;
  --mb-product-image-width-img: 100%;
  --mb-product-header-height: 75px;
  --mb-product-body-height: 120px;
  --mb-product-footer-height: 76px;
  --mb-product-btn-height: 50px;

  /* Product list */
  --mb-product-list-left-width: 40%;
  --mb-product-list-right-width: 60%;
  --mb-product-list-image-height: 375px;
  --mb-product-list-header-height: 70px;
  --mb-product-list-body-height: 190px;
  --mb-product-list-footer-height: 76px;

  /* Product custom message */
  --mb-product-custom-message-bg: rgba(255,255,255,0.7);
  --mb-product-custom-message-color: currentcolor;

  /* Product text */
  --mb-product-name-size: 1.2em;
  --mb-product-price-color: var(--mb-info-color);
  --mb-product-price-size: 1.3em;
  --mb-product-quantity-color: #2193F2;

  --mb-product-list-price-size: 1.5em;
  --mb-product-list-name-size: 1.5em;

  /* Product icons */
  --mb-product-list-keys-width: auto;
  --mb-product-list-keys-icon-width: 25px;

  --mb-product-keys-icon-width: 25px;
  --mb-product-keys-icon-width-page: 40px;

  /* Product detail */
  --mb-product-info-border: var(--mb-border-color);
  --mb-product-info-background: transparent;

  --mb-product-detail-bg: transparent;
  --mb-product-detail-border: var(--mb-border-color);
  --mb-product-detail-color: currentcolor;

  --mb-product-total-border: var(--mb-border-color);
  --mb-product-total-bg: transparent;
  --mb-product-total-color: currentcolor;
  --mb-product-total-amount-size: 1.4em;
  --mb-product-total-amount-color: var(--mb-info-color);

  --mb-product-activity-route-max-width: none;
  --mb-product-activity-route-margin: none;

  /* Product catalog view */
  --mb-catalog-price-height: 40px;
  --mb-catalog-price-bg: #0066BF;
  --mb-catalog-price-color: var(--mb-negative-text-color);

  /* Single product calendar */
  --mb-calendar-step-bg: var(--mb-dark-background-color);
  --mb-calendar-step-color: var(--mb-negative-text-color);
  --mb-calendar-step-radius: 50%;
  --mb-calendar-available: var(--mb-success-color);
  --mb-calendar-available-hover: var(--mb-info-color);
  --mb-calendar-booked: var(--mb-danger-color);
  --mb-calendar-disabled: var(--mb-background-color);
  --mb-calendar-first-last-date:  var(--mb-primary-selected-date);
  --mb-calendar-checked-date:  var(--mb-secondary-selected-date);


  /* Complete payment buttons */
  --mb-payment-option-btn-bg: var(--mb-dark-background-color);
  --mb-payment-option-btn-color: var(--mb-negative-text-color);

  /* Resume locator code */
  --mb-summary-locator-color: var(--mb-info-color);

  /* Popup modules */
  --mb-popup-background: #FFF;
  --mb-popup-width-desk: 50vw;
  --mb-popup-height-desk: auto;
  --mb-popup-width-mobile: 90vw;
  --mb-popup-height-mobile: 90vh;
  --mb-popup-close-btn-color: currentcolor;
  --mb-popup-close-btn-size: 2em;

  /* Cookies warning panel */
  --mb-cookies-background: #FFF;
  --mb-cookies-color: currentcolor;
  --mb-cookies-btn-background: var(--mb-dark-background-color);
  --mb-cookies-btn-color: var(--mb-negative-text-color);

  /** Wizard **/
  --mb-wizard-bg-color: white;
  --mb-wizard-content-width: 900px;
}


/** FLOATED GRID **/

.mb-row {
  margin: 0 auto;
  clear: both;
}

.mb-row:after {
  content: "";
  display: table;
  clear: both;
}

/* Columns */

[class*='mb-col-sm-'],
[class*='mb-col-md-'],
[class*='mb-col-lg-'] {
  float: left;
  padding: 0.8rem;
}

.mb-col-sm-1        { width: 8.33%; }
.mb-col-sm-2        { width: 16.66%; }
.mb-col-sm-3        { width: 25%; }
.mb-col-sm-4        { width: 33.33%; }
.mb-col-sm-5        { width: 41.66%; }
.mb-col-sm-6        { width: 50%; }
.mb-col-sm-7        { width: 58.33%; }
.mb-col-sm-8        { width: 66.66%; }
.mb-col-sm-9        { width: 75%; }
.mb-col-sm-10       { width: 83.33%; }
.mb-col-sm-11       { width: 91.66%; }
.mb-col-sm-12       { width: 100%; }

[class*='mb-col-md-'],
[class*='mb-col-lg-'] {
  width: 100%;
} /* Stacked by default on mobile */

@media only screen and ( min-width: 575.98px ) {
  .mb-col-md-1        { width: 8.33%; }
  .mb-col-md-2        { width: 16.66%; }
  .mb-col-md-3        { width: 25%; }
  .mb-col-md-4        { width: 33.33%; }
  .mb-col-md-5        { width: 41.66%; }
  .mb-col-md-6        { width: 50%; }
  .mb-col-md-7        { width: 58.33%; }
  .mb-col-md-8        { width: 66.66%; }
  .mb-col-md-9        { width: 75%; }
  .mb-col-md-10       { width: 83.33%; }
  .mb-col-md-11       { width: 91.66%; }
  .mb-col-md-12       { width: 100%; }


  .mb-col-md-offset-1        { margin-left: 8.33%; }
  .mb-col-md-offset-2        { margin-left: 16.66%; }
  .mb-col-md-offset-3        { margin-left: 25%; }
  .mb-col-md-offset-4        { margin-left: 33.33%; }
  .mb-col-md-offset-5        { margin-left: 41.66%; }
  .mb-col-md-offset-6        { margin-left: 50%; }
  .mb-col-md-offset-7        { margin-left: 58.33%; }
  .mb-col-md-offset-8        { margin-left: 66.66%; }
  .mb-col-md-offset-9        { margin-left: 75%; }
  .mb-col-md-offset-10       { margin-left: 83.33%; }
  .mb-col-md-offset-11       { margin-left: 91.66%; }
  .mb-col-md-offset-12       { margin-left: 100%; }

  [class*='mb-col'] {
    padding: 1rem;
  }
}

@media only screen and ( min-width: 991.98px ) {
  .mb-col-lg-1        { width: 8.33%; }
  .mb-col-lg-2        { width: 16.66%; }
  .mb-col-lg-3        { width: 25%; }
  .mb-col-lg-4        { width: 33.33%; }
  .mb-col-lg-5        { width: 41.66%; }
  .mb-col-lg-6        { width: 50%; }
  .mb-col-lg-7        { width: 58.33%; }
  .mb-col-lg-8        { width: 66.66%; }
  .mb-col-lg-9        { width: 75%; }
  .mb-col-lg-10       { width: 83.33%; }
  .mb-col-lg-11       { width: 91.66%; }
  .mb-col-lg-12       { width: 100%; }

  .mb-col-lg-offset-1        { margin-left: 8.33%; }
  .mb-col-lg-offset-2        { margin-left: 16.66%; }
  .mb-col-lg-offset-3        { margin-left: 25%; }
  .mb-col-lg-offset-4        { margin-left: 33.33%; }
  .mb-col-lg-offset-5        { margin-left: 41.66%; }
  .mb-col-lg-offset-6        { margin-left: 50%; }
  .mb-col-lg-offset-7        { margin-left: 58.33%; }
  .mb-col-lg-offset-8        { margin-left: 66.66%; }
  .mb-col-lg-offset-9        { margin-left: 75%; }
  .mb-col-lg-offset-10       { margin-left: 83.33%; }
  .mb-col-lg-offset-11       { margin-left: 91.66%; }
  .mb-col-lg-offset-12       { margin-left: 100%; }


  [class*='mb-col'] {
    padding: 1.25rem;
  }
}

/* Grid Helpers */

.mb-col-right {
  float: right;
} /* Flips column order if applied to starting column */

.mb-col-center {
  float: none;
  margin: 0 auto;
} /* Centers column if less than mb-col-*-12 */


/** CONTAINERS **/

.mb-section {
  margin-bottom: 2rem;
}

.mb-section_title {
  text-align: center;
} @media ( min-width: 575.98px ) {
  .mb-section_title {
    text-align: left;
  }
}


/** FORMS & FIELDS **/

.mybooking select,
.mybooking textarea,
.mybooking input[type=text],
.mybooking input[type=email],
.mybooking input[type=url],
.mybooking input[type=password],
.mybooking input[type=search],
.mybooking input[type=number],
.mybooking input[type=tel],
.mybooking input[type=date],
.mybooking input[type=month],
.mybooking input[type=week],
.mybooking input[type=time],
.mybooking input[type=datetime],
.mybooking input[type=datetime-local],
.mybooking input[type=color] {
  width: 100%;
  height: var(--mb-form-field-height);
  border: 1px solid var(--mb-form-field-border-color)!important;
  border-radius: var(--mb-border-radius);
  background-color: var(--mb-form-field-background);
}

.mybooking textarea {
  height: 10rem;
}

/* Form classes */

.mybooking-form {
  width: 100%;
}

.mb-form_legend {
  font-weight: 800;
  margin-bottom: 0.5rem;
}
.mb-form-group {
  width: 100%;
}

.mb-form-group label,
.mb-label {
  display:  block;
  margin: 0 1rem 0.5rem 0!important;
}

.mb-form-group input,
.mb-input {
  display: inline-block;
  width: 100%;
}

.mb-form_checkbox label,
.mb-form_checkbox input {
  display: inline-block;
  width: auto;
  margin-left: 0.5rem!important;
}

.mb-input_hidden {
  position: absolute!important;
  clip: rect(0 0 0 0)!important;
  clip-path: inset(50%)!important;
  width: 1px!important;
  height: 1px!important;
  overflow: hidden!important;
  white-space: nowrap!important;
  z-index: 999999
}

.mb-form-row {
  margin: 0 0 1rem 0;
} @media ( min-width: 575.98px ) {
  .mb-form-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin: 0;
  }
  .mb-form-row.mb-custom-date-form {
    gap: 0.5rem;
  }
}

.mb-form-row [class*='mb-col'] {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
}

.mb-form-control {
  width: 100%;
  margin-bottom: 0.5rem;
} @media ( min-width: 575.98px ) {
  .mb-form-control {
    margin-bottom: 0;
  }
}

.mb-custom-date-form .mb-custom-date-item {
  width:  33.33333%;
}

.mb-custom-date-form select {
  min-width: 100%;
  margin-bottom: 0.5rem;
  height: var(--mb-selector-field-height);
} @media ( min-width: 575.98px ) {
  .mb-custom-date-form select {
    margin: 0;
  }
}

/* Select2 */
.select2-container--bootstrap4 .select2-selection {
    border: 1px solid var(--mb-form-field-border-color);
    border-radius: var(--mb-border-radius);
    margin-bottom: 0.5rem;
} @media ( min-width: 575.98px ) {
  .select2-container--bootstrap4 .select2-selection {
      margin-bottom: 0;
  }
}

.select2-container--bootstrap4 .select2-selection--single {
    height: var(--mb-form-field-height)!important;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    line-height: var(--mb-form-field-height);
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
    margin-top: -3px;
}

.select2-dropdown {
    min-width: 320px;
    border: 1px solid var(--mb-form-field-border-color);
}

.select2-container--bootstrap4 .select2-dropdown.select2-dropdown--below {
  border-radius: var(--mb-border-radius);
} @media ( min-width: 575.98px ) {
  .select2-container--bootstrap4 .select2-dropdown.select2-dropdown--below {
    margin-top: -1.2rem;
  }
}

.select2-container--bootstrap4 .select2-results__option--highlighted,
.select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected="true"] {
  background-color: var(--mb-info-color);
  color: var(--mb-negative-text-color);
}

/** UI ELEMENTS **/

/* Buttons */
.mb-button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  line-height: 1.1;
  text-decoration: none!important;
}

.mb-button a,
.mb-button a:visited,
.mb-button a:hover,
button.mb-button a,
button.mb-button a:visited,
button.mb-button a:hover  {
  text-decoration: none!important;
  color:  currentcolor;
}

.mb-button.block {
  display: block;
  width: 100%;
  margin: 0.5rem 0;
}

.mb-button.icon {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
}

.mb-button.link {
  display: inline-block;
  margin-top: 1rem;
  color: var(--mb-info-color);
  text-decoration: underline;
  cursor: pointer;
}

/* Badges */
.mb-badge {
  padding: 2px 8px;
  border-radius: 0;
  background-color: var(--mb-dark-background-color);
  color: var(--mb-negative-text-color);
  font-size: .7em;
  font-weight: bold;
  text-align: center;
}

.mb-badge.info         { background-color: var(--mb-info-color) }
.mb-badge.success      { background-color: var(--mb-success-color) }
.mb-badge.danger       { background-color: var(--mb-danger-color) }
.mb-badge.warning      { background-color: var(--mb-warning-color) }

.mb-badge.big {
  padding: 4px 16px;
  font-size: 1em;
  line-height: 2;
}

/* Alerts */
.mb-alert {
  position: relative;
  padding: .75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--mb-dark-background-color);
  line-height: 1.2;
}

.mb-alert.light         { background-color: var(--mb-light-color) }
.mb-alert.lighter       { background-color: var(--mb-lighter-color) }
.mb-alert.secondary     { background-color: var(--mb-background-color) }
.mb-alert.info          { background-color: var(--mb-info-color) }
.mb-alert.success       { background-color: var(--mb-success-color) }
.mb-alert.danger        { background-color: var(--mb-danger-color) }
.mb-alert.warning       { background-color: var(--mb-warning-color) }

.mb-alert.info {
  color: var(--mb-negative-text-color);
}

.mb-alert.highlight {
  padding: 1.25rem;
  background-color: var(--mb-info-color);
  color: var(--mb-negative-text-color);
  font-size: 1.4em;
  text-align: center;
}

/* Text */
.mb-text-danger {
  color: var(--mb-danger-color);
}

/* Cards */
.mb-card {
  display: block;
  border: 1px solid var(--mb-border-color);
}

.mb-card.inline {
  display: flex;
  align-items: center;
}

.mb-card::after {
  display: block;
  content: "";
  clear: both;
}

.mb-card_header {
  background-color: var(--mb-background-color);
  margin: 0 0 1rem 0;
  padding: 1rem;
  border-bottom: 1px solid var(--mb-border-color);
}

.mb-card_header h2,
.mb-card_header h3,
.mb-card_header h4,
.mb-card_header h5 {
  margin: 0;
}

.mb-card_body {
  padding: 1rem;
}

.mb-card_footer {
  display: flex;
  justify-content: flex-end;
  margin: 1rem 0 0 0;
  padding: 1rem;
  border-top: 1px solid var(--mb-border-color);
}

/* Lists */
.mb-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.mb-list-item {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
}

.mb-list-element.secondary {
  font-weight: 800;
}

.mb-list-element.info {
  font-weight: 800;
  color: var(--mb-info-color);
}

.mb-list-element.success {
  font-weight: 800;
  color: var(--mb-success-color);
}

.mb-list-element.danger {
  font-weight: 800;
  color: var(--mb-danger-color);
}

.mb-list-element.warning {
  font-weight: 800;
  color: var(--mb-warning-color);
}

.mb-list.border {
  display: block;
  border: 1px solid var(--mb-border-color);
}

.mb-list.border::after {
  display: block;
  content: "";
  clear: both;
}

.mb-list.border.border .mb-list-item {
  padding: 1rem;
  border-bottom: 1px solid var(--mb-border-color);
}

.mb-list.border.border .mb-list-item:last-of-type {
  border-bottom: none;
}

/* Pagination */
.mb-pagination {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Tabs */
.mb-tabs {
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px solid var(--mb-border-color);
  margin-bottom: 1em;
}

.mb-tabs_item-text {
  cursor: pointer;
  display: inline-block;
  padding: 0.5rem 1rem;
}

.mb-input_hidden:checked + .mb-tabs_item-text {
  border: 1px solid var(--mb-border-color);
  border-bottom-color: white;
  margin-bottom: -1px;
}


/* CUSTOM STYLES */

.mybooking-docs .mb-card {
  margin: 1rem;
  box-shadow: 0px 5px 5px #DDD!important;
  border: 1px solid #DDD;
  border-radius: 8px;
}

.mybooking-docs .mb-card:hover {
  box-shadow: 0px 1px 3px #DDD!important;
}

.mybooking-docs .mb-card_body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem!important;
}

.mybooking-docs_card-info {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 1rem;
} @media ( min-width: 575.98px ) {
  .mybooking-docs_card-info {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.5rem;
  }
}

.mybooking-docs_page-title {
  color: var(--brand-primary)!important;
  text-align: center;
  font-size: 3.2em;
  font-weight: 800;
} @media ( min-width: 575.98px ) {
  .mybooking-docs_page-title {
    font-size: 4.2em;
  }
}

.mybooking-docs_post-header {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--mb-border-color);
  font-size: 3em;
  font-weight: 800;
  line-height: 1.1;
}

.mybooking-docs_post-title {
  margin: 0;
  font-size: 1.6em;
  line-height: 1.2;
}

.mybooking-docs_post-title-link {
  color: #666!important;
  font-weight: 800;
}

.mybooking-docs_post-title-link:hover {
  text-decoration: none!important;
  color: var(--brand-primary)!important;
}

.mybooking-docs_post-link {
  color: var(--brand-primary)!important;
  font-size: 0.85em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.mybooking-docs_post-link:hover {
  text-decoration: none!important;
  filter: brightness(0.9);
}

.mybooking-docs_post-info {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 1rem;
  margin: 1rem 0 3rem 0;
} @media ( min-width: 575.98px ) {
  .mybooking-docs_post-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.mybooking-docs .post_meta {
  margin: 0;
  font-weight: 600;
}

.mybooking-docs_card-category {
  font-weight: 800;
}

.mybooking-docs_card-category-item {
  display: inline-block;
  margin: 0.1rem;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--brand-primary);
  border-radius: 3px;
  color: var(--brand-primary);
  font-weight: 700;
  font-size: 0.8em;
  line-height: 1;
  letter-spacing: 1px;
}

.mybooking-docs_categories {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--mb-border-color);
} @media ( min-width: 991.98px ) {
  .mybooking-docs_categories {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
}

.mybooking-docs_categories-title {
  font-weight: 800!important;
  font-size: 1.4em;
  line-height: normal;
}

.mybooking-docs_categories-title .dashicons {
  font-size: 1.2em;
  margin-right: 0.5rem;
}

.mybooking-docs_categories-list {
  list-style: none!important;
  margin-top: 1rem!important;
  padding: 0!important;
}
.mybooking-docs_categories-list .cat-item,
.mybooking-docs_categories-list .cat-item-all {
  padding: 0.5rem;
  border-top: 1px solid var(--mb-border-color);
  font-weight: 800;
}

.mybooking-docs_categories-list a:hover {
  text-decoration: none;
  opacity: 0.5;
}

.mybooking-docs .pagination {
  display: flex;
  justify-content: center;
}

.mybooking-docs .pagination a,
.mybooking-docs .pagination a:hover {
    border: none!important;
}

.mybooking-docs .pagination .page-numbers {
  font-weight: 800;
}

.mybooking-docs .page-numbers.current {
  border: none!important;
  border-radius: 100%;
  background-color: var(--brand-primary);
}

.mybooking-breadcrumb {
  margin-bottom: 1rem;
}

.mybooking-breadcrumb_item {
  font-weight: 800;
}

.mybooking-breadcrumb_item.current {
  color: #666;
}

.mybooking-docs_footer-nav {
  margin-top: 6rem;
  padding-top: 2rem;
  border-top: 1px solid var(--mb-border-color);
}

.mybooking-docs_search {
  display: flex;
  gap: 1rem;
  padding: 0 1rem;
}

.mybooking-docs_search-field {
  width: 100%;
  height: 50px!important;
}

.mybooking-docs_search-button {
  color: #fff;
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  border-radius: var(--border-radius);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: .5rem 1rem;
  height: 50px;
}

.mybooking-entry-links {
  padding: 20px!important;
  font-size: 20px;
  display: flex;
  justify-content: space-between;
}

.mybooking-entry-links .post-page-numbers {
  margin: 0 5px;
  padding: 10px 20px;
  border: 1px solid var(--brand-primary);
  border-radius: 8px;
	background-color: var(--brand-primary);
	color: #fff!important;
}

.mybooking-entry-links .post-page-numbers:hover {
  text-decoration: none;
	background-color: #fff!important;
	color: var(--brand-primary)!important;
}