/* ------------------------------------------------------
   GLOBAL RESET + LAYOUT
------------------------------------------------------ */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 15px;   /* Base size for rem */
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-size: 13px;   /* Actual default text size across the app */
  font-family: "ITC Blair", sans-serif;
  line-height: 1.5;  
}

/* Wrapper/Content/Footer structure */
.page-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 100vh;
}

.content-area {
  flex: 1;
}

.footer {
  width: 100%;
  /* Distinct "floor" so the footer never blends into the page: darker band +
   * visible top divider + soft lift shadow (mirrors the v2 clean-layout footer). */
  background-color: #e9ecef;
  border-top: 1px solid #d0d5db;
  box-shadow: 0 -5px 14px -10px rgba(0, 0, 0, 0.2);
  position: relative;
}

main {
  flex-grow: 1;
}

/* ------------------------------------------------------
   FONTS
------------------------------------------------------ */
@font-face {
  font-family: "ITC Blair";
  src: url("https://db.onlinewebfonts.com/t/e65785a402c71d61f8bbd751362d04ac.eot");
  src: url("https://db.onlinewebfonts.com/t/e65785a402c71d61f8bbd751362d04ac.eot?#iefix") format("embedded-opentype"),
       url("https://db.onlinewebfonts.com/t/e65785a402c71d61f8bbd751362d04ac.woff2") format("woff2"),
       url("https://db.onlinewebfonts.com/t/e65785a402c71d61f8bbd751362d04ac.woff") format("woff"),
       url("https://db.onlinewebfonts.com/t/e65785a402c71d61f8bbd751362d04ac.ttf") format("truetype"),
       url("https://db.onlinewebfonts.com/t/e65785a402c71d61f8bbd751362d04ac.svg#ITC Blair") format("svg");
}

.blair-text {
  font-family: "ITC Blair", sans-serif;
}

/* numeric password mask font */
@font-face {
  font-family: "password-mask";
  src: url(data:font/woff;charset:utf-8;base64,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);
}

.numeric-password {
  font-family: password-mask;
}

.numeric-password::placeholder {
  font-family: initial;
}

/* ------------------------------------------------------
   CONTAINERS
------------------------------------------------------ */
.container {
  max-width: unset;
  padding: 2em 2em;
}

.container1200 {
  width: 100%;
  margin: 0 auto;
  max-width: 1200px;
}

/* logos / header bits */
.divider-vertical {
  padding-top: 16px;
  color: white;
  width: 0%;
}

.right-divider {
  border-right: 3px solid #333;
  height: 100%;
  position: absolute;
}

.logo_hibu_dashboard {
  height: 130px;
  width: 300px;
}

.logo_lpu_dashboard {
  height: 100%;
  width: 130px;
}

/* number inputs – remove spinners */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

/* “OR” line helper */
.line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #ccc;
  z-index: 1;
}

.wordwrapper {
  text-align: center;
  height: 12px;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: -12px;
  z-index: 2;
}

.word {
  color: #ccc;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px;
  font: bold 12px arial, sans-serif;
  background: #fff;
  text-align: center;
}

/* ------------------------------------------------------
   FORMS / LABELS / ASTERISKS
------------------------------------------------------ */
.dasterisk label:after,
.asterisk .input.required > label:after {
  color: #d00;
  content: "*";
  position: relative;
  margin-left: 4px;
  margin-right: 5px;
  top: 1px;
}

.asterisk select:required > label:after {
  color: #d00;
  content: "*";
  position: absolute;
  margin-left: 4px;
  top: 1px;
}

.form {
  line-height: 2;
}

.form.row {
  padding-top: 10px;
}

.form-group label {
  padding: 5px 10px 0px 10px;
}

.formSpacing div.input {
  margin-bottom: 15px;
}

/* Fields you cannot type in should look like it.
   Read-only and disabled inputs were rendering with the same white background and
   border as editable ones, so on a page like /hibu-google-ads/edit the only way to
   find out a field was locked was to click it and get no cursor. .clsDatePicker is
   excluded: those are read-only by design but perfectly interactive through the
   picker, so greying them out would say the wrong thing. */
.form-control[readonly]:not(.clsDatePicker),
.form-control[disabled],
.form-control:disabled,
select.form-control[disabled],
select.form-control:disabled,
textarea.form-control[readonly] {
  background-color: #eceef1;
  color: #5c636a;
  border-color: #d3d8de;
  cursor: not-allowed;
}

/* script fieldsets */
legend.script {
  width: inherit;
  padding: 0 10px;
  border-bottom: none;
  margin: 3px;
}

fieldset.script {
  border: 1px groove #ddd !important;
  padding: 0 1.2em 0.5em 1.2em !important;
  margin: 0 0 1.5em 0 !important;
  -webkit-box-shadow: 0 0 0 0 #000;
  box-shadow: 0 0 0 0 #000;
}

/* ------------------------------------------------------
   BUTTONS
------------------------------------------------------ */
.btn {
  padding: .35rem .35rem !important;
}

.btn-lg {
  padding: 10px 16px;
}

.btn-md {
  padding: 8px 12px;
  font-size: 1.2rem;
}

.btn-sm {
  padding: 5px 10px;
}

.btn-xs {
  padding: 1px 5px;
}

.btn-group > .btn-sm {
  padding: 7px 12px;
}

/* colored buttons & site palette (Lasso) */
.cls-lasso-body-font {
  background-color: #4d4d4d !important;
  border-color: #4d4d4d !important;
  color: #fff !important;
}

.cls-lasso-header-background {
  background-color: #2e2e2e !important;
  border-color: #2e2e2e !important;
  color: #fff !important;
}

.cls-lasso-logo-red {
  background-color: #e20000 !important;
  border-color: #e20000 !important;
  color: #fff !important;
}

.cls-lasso-table-borders {
  background-color: #e6e6e6 !important;
  color: #000;
}

.cls-lasso-site-red {
  background-color: #e20000 !important;
  color: #fff;
}

/* bootstrap button variants override */
.btn-primary,
.btn-outline-primary {
  background-color: #3b81ba !important;
  border-color: #3b81ba !important;
  color: #fff !important;
}

.btn-success,
.btn-outline-success {
  background-color: #8bab43 !important;
  border-color: #8bab43 !important;
  color: #fff !important;
}

.btn-warning,
.btn-outline-warning {
  background-color: #d89f39 !important;
  border-color: #d89f39 !important;
  color: #fff !important;
}

.btn-info,
.btn-outline-info {
  background-color: #19a2b8 !important;
  border-color: #19a2b8 !important;
  color: #fff !important;
}

/* login & secondary buttons */
.clsLoginButton,
.clsOtherButton {
  border-radius: 30px;
  padding: 10px 30px;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 1px;
  transition: 0.3s ease-in-out;
  display: inline-block;
}

.clsLoginButton {
  border: 1px solid #00bcd4;
  background-color: #19A2B8;
  color: white !important;
  text-align: center;
  width: 25%;
}

.clsLoginButton:hover {
  background-color: #00bcd4;
  color: white;
  text-decoration: none;
}

.clsOtherButton {
  border: 1px solid #00bcd4;
  background-color: transparent;
  color: #00bcd4;
  text-align: center;
  width: 50%;
}

.clsOtherButton:hover {
  background-color: #00bcd4;
  color: white;
  text-decoration: none;
}

.clsOtherButton i {
  margin-right: 8px;
}

.clsButtonContainer {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 20px;
}

/* welcome/footer buttons */
.clsWelcomeButton,
.clsWelcomeButton:hover {
  color: white;
  border: none;
  margin: 2px 0;
  width: 100%;
}

.clsFooterButton,
.clsFooterButton:hover {
  color: white;
  width: 100%;
  font-size: 0.9em;
}

/* ------------------------------------------------------
   NAVIGATION
------------------------------------------------------ */
.navbar-nav > li {
  padding: 0 6px;
}

.navbar-nav > li > a {
  color: white !important;
}

#navbarSubMenu > .navbar-nav > li {
  padding: 0 1px;
}

.navbar-nav .dropdown-menu {
  background-color: #cc2021;
  padding: 10px;
}

.navbar-nav .dropdown-menu > li > a,
.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover {
  color: #fff !important;
  text-decoration: none;
}

.navbar-nav .dropdown-menu > li > a:hover,
.navbar-nav .dropdown-menu > li > a:focus {
  color: #007bff;
  text-decoration: underline;
}

.multiselect {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.multiselect-container .dropdown-menu > li > a,
.multiselect-container .dropdown-menu > li > a:focus,
.multiselect-container .dropdown-menu > li > a:hover {
  color: black !important;
  text-decoration: none;
}

.navbar-brand {
  /* legacy overrides kept intentionally */
}

/* megamenu */
.navbar .megamenu {
  left: -11.5%;
  right: 0;
  width: 123%;
  padding: 2em !important;
  background-color: #fff;
}

.navbar .has-megamenu {
  position: static !important;
}

a.dropdown-item {
  padding: .25rem 0.75rem;
}

.dropdown-header {
  padding: .5rem 0.5rem;
  font-weight: 900;
  text-decoration: underline;
  font-size: 1.5em;
}

/* ------------------------------------------------------
   TABLES
------------------------------------------------------ */
.table td,
.table th {
  padding: 0.25rem;
  vertical-align: middle;
  line-height: 2rem;
  border-top: 1px solid #dee2e6;
}

table.unimportantTable td,
table.unimportantTable th {
  padding: 0.1rem;
  line-height: 1.62rem;
}

#hibu_view_listing tr td,
#hibu_view_listing tr th {
  padding: 10px;
}

#hibu_view_listing_lkw tr td,
#hibu_view_listing_lkw tr th {
  padding: 5px;
}

#image_gallery tr td,
#image_gallery tr th {
  padding: 10px;
}

.highlight-total-row {
  background-color: #ffffcc;
  font-weight: bold;
}

/* DataTables sort icons */
table.dataTable > thead .sorting:before,
table.dataTable > thead .sorting_asc:before,
table.dataTable > thead .sorting_desc:before,
table.dataTable > thead .sorting_asc_disabled:before,
table.dataTable > thead .sorting_desc_disabled:before {
  right: 1.5em;
  content: "\2191";
}

table.dataTable > thead .sorting:after,
table.dataTable > thead .sorting_asc:after,
table.dataTable > thead .sorting_desc:after,
table.dataTable > thead .sorting_asc_disabled:after,
table.dataTable > thead .sorting_desc_disabled:after {
  right: 1.0em;
  content: "\2193";
}

/* simple responsive tables technique */
@media only screen and (max-width: 800px) {
  .no-more-tables table,
  .no-more-tables thead,
  .no-more-tables tbody,
  .no-more-tables tfoot,
  .no-more-tables th,
  .no-more-tables td,
  .no-more-tables tr {
    display: block;
  }

  .no-more-tables thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .no-more-tables tr {
    border: 1px solid #ccc;
  }

  .no-more-tables tbody td,
  .no-more-tables tfoot td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
    white-space: normal;
    text-align: right;
    padding-right: 0.75em;
  }

  .no-more-tables tbody td:before,
  .no-more-tables tfoot td:before {
    position: absolute;
    top: 10px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
    font-weight: bold;
    content: attr(data-title);
  }
}

/* ------------------------------------------------------
   MISC / UTILITIES
------------------------------------------------------ */
label > input[type="checkbox"] {
  margin-right: 5px;
}

.badge-md {
  padding: 3%;
  font-size: 100%;
}

.badge {
  /* left empty intentionally */
}

.list-inline .list-inline-item {
  padding-left: 1px;
  padding-right: 1px;
  margin-right: auto;
}

.list-hours {
  width: 220px;
}

.list-hours li {
  line-height: 17px;
  display: flex;
  justify-content: space-between;
}

.list-hours li + li {
  padding-top: 3px;
}

.legend {
  margin-bottom: 0;
}

/* date row */
.date {
  text-align: center;
}

.clsDatePicker {
  /* width/height left commented out previously */
}

.input-date-select {
  width: auto;
}

.date label {
  padding-right: 10px;
}

/* messages / alerts */
.error-message {
  padding-left: 10px;
  color: white;
  background-color: red;
}

.coloredMessage {
  text-align: center;
  width: 100%;
  font-weight: 800;
  padding: .5rem .5rem;
  margin-bottom: 0;
  vertical-align: middle;
}

.coloredMessage > p {
  margin-bottom: 0;
}

.alert {
  display: inline-block;
  width: 100%;
}

.clsAjaxSuccessMessage {
  padding-left: 20px;
  color: white;
  background-color: green;
  text-align: center;
}

.clsAjaxErrorMessage {
  padding-left: 20px;
  color: white;
  background-color: red;
  text-align: center;
}

/* small helpers */
.infos {
  display: inline-block;
  padding: 5px 0;
  background-color: darkcyan;
  border-radius: 5px;
  overflow: hidden;
  color: whitesmoke;
}

.infos div {
  padding: 5px 20px;
  font-size: 20px;
}

.infos div:nth-child(odd) {
  background-color: rgba(255, 255, 255, 0.1);
}

.hidden,
.clsHidden {
  display: none;
}

.noPadding {
  padding: 0 !important;
}

.padding0 {
  padding: 0;
}

.margin0 {
  margin: 0;
}

.clearfix {
  clear: both;
}

.white {
  color: #fff !important;
}

a.white {
  color: #fff !important;
  text-decoration: none !important;
}

a:hover.white {
  color: #fff !important;
  text-decoration: underline !important;
}

.inline {
  display: inline;
}

.clsRemoveItem,
.clsDuplicateItem {
  display: inline;
  cursor: pointer;
}

.pull-right {
  float: right !important;
}

.pull-left {
  float: left !important;
}

/* dropdown widths */
.clsDropdownMenuLinks {
  min-width: 10rem !important;
  padding: 0.35rem 0;
}

/* Each link is its own row, evenly spaced. The spacing used to come from an empty
   div printed after every link — including the last one, which left a gap under the
   final button and made a two-item menu look half empty. */
.clsDropdownMenuLinks > a.btn {
  display: block;
  width: 75%;
  margin: 0.25rem auto;
}

/* The LP / Inactive cell in the HBU list. Fixing the width keeps the Actions button
   in the same place whether a row has a landing page or not. */
.btn-lp-slot {
  min-width: 5.25rem;
}

/* A row of action buttons with even spacing. Buttons separated by nothing but source
   whitespace inherit whatever the markup's newlines collapse to, which is why rows
   holding different numbers of buttons never lined up. Bootstrap 4 has no gap
   utility, hence the class. */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

/* DataTables' Buttons extension paints its own gradient button, which sits next to
   our Search and Reset buttons looking a decade older than them. Six templates print
   one of these (Download / Export), so the fix belongs here rather than as a
   className added at six call sites. Colour matches .btn-primary above. */
.dt-buttons .dt-button,
.dt-buttons .dt-button:active,
.dt-buttons .dt-button.active {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  margin-right: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border: 1px solid #3b81ba;
  border-radius: 0.2rem;
  background: #3b81ba;
  background-image: none;
  box-shadow: none;
  color: #fff;
}

.dt-buttons .dt-button:hover,
.dt-buttons .dt-button:focus {
  background: #336f9f;
  background-image: none;
  border-color: #336f9f;
  color: #fff;
}

/* iframe container */
.clsIframeContainer {
  max-width: unset;
  padding: 2em;
}

/* disabled option color */
option:disabled {
  color: red;
}

/* count badge */
.clsCountSpan {
  padding: 3px 15px;
}

/* center header cells */
.clsThCenter {
  text-align: center;
}

/* inline label/input */
.clsLabelInputInline {
  float: left;
  margin-right: 15px;
}

/* input group tweaks */
.input-group > input[type="text"] {
  border-radius: 4px !important;
}

/* ------------------------------------------------------
   COLORS / BOARDS / THEMES
------------------------------------------------------ */
.lassobigBoardHeading {
  background-color: #58728D;
  color: white;
  padding: 2px;
  text-align: center;
}

.lassobigBoardSubHeading {
  font-weight: bold;
  background-color: #f1f1f1;
}

.hncbigBoardHeading {
  background-color: slategray !important;
  color: white;
  padding: 2px;
  text-align: center;
}

.clsBorderSuper {
  border: 1px groove #DF00FF !important;
}

.reduce-font-size {
  font-size: 0.9em;
}

.clsLegendSmall {
  font-size: 0.65em;
}

.stickyBar {
  position: sticky;
  bottom: 0;
  z-index: 99;
  width: 100%;
}

.clsFloatingAdminFooter {
  margin: 0 auto;
  padding: 5px 0;
}

/* widget colors */
.wb1 { background-color: #4472c4; }
.wb2 { background-color: #00b0f0; }
.wb3 { background-color: #333f50; }
.wb4 { background-color: #ff0000; }
.wb5 { background-color: #83766e; }
.wb6 { background-color: #782736; }
.wb7 { background-color: #5a6f8c; }

.whiteBorder {
  border: 1px solid white;
}

.totalCost {
  color: darkred;
  background-color: #ffebea;
}

/* text color helpers */
.clsBlueText   { color: blue; }
.clsGreenText  { color: lightgreen; }
.clsOrangeText { color: orange; }
.clsRedText    { color: red; }
.clsDarkRedText    { color: darkred; }
.clsWhiteText  { color: white; }

/* background helpers */
.clsOrangeBkgrnd     { background-color: darkorange; }
.clsRedBackground    { background-color: #2e2e2e; }
.clsGreenBkgrnd      { background-color: #00B050; }
.clsBlueBkgrnd       { background-color: #3b81ba; }
.clsRedBkgrnd        { background-color: #cc2223; }
.clsLightRedBkgrnd   { background-color: #ffebea; }
.clsLightGreenBkgrnd { background-color: #8bab43; }
.clsLightGreyBkgrnd  { background-color: #787276; }
.clsGreyBkgrnd       { background-color: #48494B; }
.clsWhiteBkgrnd      { background-color: #ffffff; }

.bg_gold {
  color: white;
  background-color: #ffc000;
}

.bg_blue {
  background-color: #00b0f0;
  color: white;
}

/* print overrides */
@media print {
  .bg_blue {
    background-color: #00b0f0 !important;
    color: black;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .clsBlueText   { color: blue; }
  .clsGreenText  { color: green; }
  .clsOrangeText { color: orange; }
  .clsRedText    { color: darkred; }

  .clsOrangeBkgrnd {
    background-color: darkorange;
  }

  .clsRedBackground {
    background-color: #ff0000;
    color-adjust: exact;
  }

  .clsGreenBkgrnd {
    background-color: #00B050;
    color-adjust: exact;
  }

  .clsBlueBkgrnd {
    background-color: skyblue;
  }

  .clsWhiteText {
    color: white;
  }

  .clsRedBkgrnd {
    background-color: #cc2223;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .clsLightRedBkgrnd   { background-color: #ffebea; }
  .clsLightGreenBkgrnd { background-color: #8bab43; }
  .clsLightGreyBkgrnd  { background-color: #787276; }
  .clsGreyBkgrnd       { background-color: #48494B; }
  .clsWhiteBkgrnd      { background-color: #ffffff; }

  .bg_gold {
    color: white;
    background-color: #ffc000;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ------------------------------------------------------
   LAYOUT HELPERS
------------------------------------------------------ */
.no-pad .row {
  margin-right: 0;
  margin-left: 0;
}

.no-pad > .row > [class*='col-'] {
  padding-right: 0.5px;
  padding-left: 0.5px;
}

.clsShowMore {
  display: none;
}

/* tooltip width */
body .ui-tooltip {
  min-width: 550px;
}

/* search form title */
.clsSearchFormTitle {
  padding-right: 5px !important;
  display: inline-block !important;
  margin: 17px -3px !important;
}

/* radio layout */
.radioInline {
  display: inline-block !important;
}

.radioInline input[type="radio"] {
  margin: 0 10px;
}

.radioInline > label > p {
  padding-left: 20px;
  padding-right: 5px;
}

/* search form */
#searchForm.form-inline {
  /* left empty / only for alignment tweaks */
}

/* iframe container already defined above */

/* ------------------------------------------------------
   AJAX LOADING MODAL
------------------------------------------------------ */
.ajaxLoadingModal {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background:
    rgba(255, 255, 255, .8)
    url('/img/ajax-loader.gif')
    50% 50%
    no-repeat;
}

body.loading {
  overflow: hidden;
}

body.loading .ajaxLoadingModal {
  display: block;
}

/* ------------------------------------------------------
   PAYMENT SIDEBAR / CHECKOUT
------------------------------------------------------ */
.payment-sidebar-wrapper {
  display: flex;
  align-items: flex-start;
  padding: 1.5rem 0;
}

.review-details {
  padding: 1.5rem 0;
}

@media (min-width: 768px) {
  .payment-sidebar-wrapper {
    padding-right: 1rem;
  }
  .review-details {
    padding-left: 1rem;
  }
}

.payment-sidebar {
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border-radius: 0.5rem;
  padding: 2rem;
  width: 100%;
}

.payment-sidebar h2 {
  margin-bottom: 1rem;
  font-size: 1.75rem;
  color: #333333;
}

.payment-sidebar p {
  margin-bottom: 0.75rem;
  color: #555555;
  line-height: 1.4;
}

.payment-sidebar .divider {
  height: 1px;
  background: #e0e0e0;
  margin: 1.5rem 0;
  border: none;
}

.payment-sidebar .btn-pay {
  display: block;
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  border-radius: 0.25rem;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.payment-sidebar .btn-pay:hover {
  background-color: #0056b3;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.payment-sidebar .secure-note {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: #777777;
}

.payment-sidebar .secure-note .lock-icon {
  margin-right: 0.25rem;
}

/* paid / thank-you state */
.payment-sidebar .thank-you {
  padding: 2rem;
}

.payment-sidebar .thank-you .icon {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

.payment-sidebar .thank-you h1 {
  font-size: 2rem;
  margin: 0.25rem 0 1rem;
  color: #28a745;
}

.payment-sidebar .thank-you .message {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.payment-sidebar .thank-you .subtext {
  color: #555;
  margin-bottom: 1.5rem;
}

.payment-sidebar .thank-you .btn-dashboard {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}

/* ------------------------------------------------------
   RESPONSIVE - CONTAINER & BUTTON STACKING
------------------------------------------------------ */
@media (max-width: 575.98px) {
  .container {
    padding: 1em 1em;
    padding-bottom: 60px;
  }

  .input-group-text {
    padding: 0.25rem;
  }

  .clsButtonContainer {
    flex-direction: column;
    align-items: stretch;
  }

  .clsOtherButton,
  .clsLoginButton {
    width: 100% !important;
  }
}

/* reserved breakpoints (can be filled later) */
@media (max-width: 767.98px) {}
@media (max-width: 991.98px) {}
@media (max-width: 1199.98px) {}

@media (min-width: 575.98px) {}
@media (min-width: 767.98px) {}
@media (min-width: 991.98px) {}
@media (min-width: 1199.98px) {}


.underline 
{
  border-bottom: 1px solid black;
  border-bottom-color: black;
}

.display-5
{
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1;
    margin-bottom: 0.1rem;
}