* {
  box-sizing: border-box;
}

a {
    cursor: pointer;
}

.btn-link:any-link {
    text-decoration: underline;
}

.btn-link:hover {
    text-decoration: underline;
    filter: contrast(80%);
}

body {
    background-color: #f6f9fc;
}

/* Buttons and links */

.btn {
    font-size: 1.25em;
    height: 3em;
    padding: 12px;
}

.btn-icon {
  background: #000;
  color: #ffffff;
  /*font-family: Arial, sans-serif;*/
  border-radius: 4px 4px 4px 4px;
  border: 0;
  padding: 10px 0;
  font-size: 1em;
  /*font-weight: 600;*/
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
  width: 100%;
  max-width: 260px;
  height: 50px;
  text-align: center;
}
.btn-icon:hover {
  filter: contrast(115%);
}
.btn-icon:disabled {
  opacity: 0.5;
  cursor: default;
}

.adjust-btn-text {
  display: inline-block;
  margin-left: 10px;
}

.menu-btn-sm {
    font-size: 1em;
    height: 2em;
    padding: 2px;
    vertical-align: middle;
    min-width: 100px;
    max-width: 150px;
    width:30%;
}

.form-control {
    font-size: 1.5em;
    height: 3em;
    padding: auto;
    margin: 0;
}
.primary { 
    background-color: #000;
}
.btn-primary, .btn-primary:active, .btn-primary:visited {
    background-color: #000; 
    border-color: #000;
}
.btn-primary:hover {
    background-color: #535150; 
    border-color: #535150;
}
.btn-secondary { 
    background-color: #ffffff; 
    border-color: #000000;
}

.btn-payment {
  background: #000;
  color: #ffffff;
  /*font-family: Arial, sans-serif;*/
  border-radius: 4px 4px 4px 4px;
  border: 0;
  padding: 12px 16px;
  font-size: 1em;
  /*font-weight: 600;*/
  cursor: pointer;
  display: block;
  transition: all 0.2s ease;
  box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
  width: 100%;
  text-align: center;
}
.btn-payment:hover {
  filter: contrast(115%);
}
.btn-payment:disabled {
  opacity: 0.5;
  cursor: default;
}

.vertical-fixed-xxs {
  display: block;
  height: 4em;
  width: auto;
  margin: 0;
  padding: 0;
  margin-top: -4em;
  z-index: 9999;
}

.width-max-1024 {
  max-width: 1024px;
}

.img-responsive {
    display: block;
    width: 100%;
    max-width: 450px;
    height: auto;
    max-height: 600px;
    margin-left:auto;
    margin-right:auto;
}


.card, .card-unbounded {
  align-self: center;
  box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),
    0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
  border-radius: 7px;
  padding: 40px;
}

.horizontalline {
    color: #d1d1d1;
}

.vertical-center-90  {
    padding: 90px 0;
}


.vertical-center-180 {
    padding: 180px 0;
}

.banner-text {
    font-size: 13vw;
}
@media screen and (min-width: 601px) {
  .banner-text {
    font-size: 80px;
  }
}
/* ============================================================================================================
   Bootstrap 5 compatibility layer
   Keeps the Caligrafy look of the Bootstrap 3 views (14px body, #333 text, black and white buttons, centered
   header title and grids) on Bootstrap 5, which has no .card in Bootstrap 3 style and different spacing.

   Order: load theme.css after Bootstrap (the Pug layout and the SPA template do). Rules that must beat a Bootstrap
   rule of the same selector are prefixed with `html` (one more element in the specificity), so they also win when
   a page loads Bootstrap last, while Caligrafy and Bootstrap classes (.reset-margin, .mb-3, ...) still override them.

   Scopes:
   - body.caligrafy-layout (the Pug layout; `body#gesturize` is the same scope for layouts copied before the class
     existed): Bootstrap 3 heading margins. Bootstrap 3 loaded after styles.css there, so its margins won and center
     the header title.
   - header.caligrafy-header: the header title margins only, for client apps that reuse the Caligrafy header outside
     the Pug layout (or put class="caligrafy-layout" on their body to get all the layout heading margins).
   - single page apps (no class): they load styles.css after Bootstrap, so their headings keep the styles.css
     margin 0; nothing to restore.
   ============================================================================================================ */

/* Base text: Bootstrap 3 used a 14px body with a 20px line height and #333 text (Bootstrap 5: 16px, #212529) */
html:root {
    --bs-body-font-size: 14px;
    --bs-body-line-height: 1.42857;
    --bs-body-color: #333;
}

/* Cards: Bootstrap 5 .card is a flex column with its own border and colors; Caligrafy cards are blocks with the
   styles.css border */
html .card {
    display: block;
    min-width: auto;
    background-clip: border-box;
    --bs-card-border-width: thin;
    --bs-card-border-color: #d9d9d9;
}
/* Caligrafy color classes keep their colors on cards (Bootstrap 5 .card sets background and color itself) */
.card.color0 { background-color: #ffffff; color: #000000; border-color: #ffffff; }
.card.color1 { background-color: #000000; color: #ffffff; border-color: #d5d5d5; }
.card.color2 { background-color: #990000; color: #ffffff; border-color: #d5d5d5; }
.card.color3 { background-color: #88959e; color: #000000; border-color: #d5d5d5; }
.card.color4 { background-color: #fafafa; color: #414141; border-color: #d5d5d5; }
.card.color5 { background-color: #414141; color: #f2f2f2; border-color: #d5d5d5; }
.card.color6 { background-color: #EED461; color: #000000; border-color: #d5d5d5; }
.card.color7 { background-color: #0551A3; color: #000000; border-color: #d5d5d5; }
.card.color8 { background-color: #7AC2FB; color: #000000; border-color: #d5d5d5; }

/* Page width: the layout wraps pages in .container, which styles.css makes full width. Bootstrap 5 caps .container
   with max-width (Bootstrap 3 used width), which made every page narrower and stuck to the left */
body .container {
    max-width: none;
}

/* Heading margins of the Pug layout (Bootstrap 3 values, Bootstrap 5 has no top margin). :where() keeps the
   specificity of `body h1`: classes such as .reset-margin still win */
body:where(#gesturize, .caligrafy-layout) h1, body:where(#gesturize, .caligrafy-layout) h2,
body:where(#gesturize, .caligrafy-layout) h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}
body:where(#gesturize, .caligrafy-layout) h4, body:where(#gesturize, .caligrafy-layout) h5,
body:where(#gesturize, .caligrafy-layout) h6 {
    margin-top: 10px;
    margin-bottom: 10px;
}
/* Header title (vertically centered in the header): in the layout and in client apps with header.caligrafy-header.
   The signed-in header title is also a grid column, and Bootstrap 5 resets the top margin of .row > * */
body header:where(.caligrafy-header) h1,
body:where(#gesturize, .caligrafy-layout) header .row > h1, body header:where(.caligrafy-header) .row > h1 {
    margin-top: 20px;
    margin-bottom: 10px;
}
/* Signed-in header columns: 15px padding like the Bootstrap 3 columns (the .row.g-0 has no gutter and no negative
   margins; #vertical_menu is not a column and keeps no padding). The auto margins of the .horizontal-center title
   centered it in the flex row on small screens; the Bootstrap 3 float kept it next to the menu icon */
body:where(#gesturize, .caligrafy-layout) header nav.horizontal.row > [class*="col-"] {
    padding-left: 15px;
    padding-right: 15px;
}
body:where(#gesturize, .caligrafy-layout) header nav.horizontal.row > h1 {
    margin-left: 0;
    margin-right: 0;
}

/* Bootstrap 3 text spacing that the Caligrafy views rely on (everywhere, single page apps included) */
html h1, html h2, html h3, html h4, html h5, html h6 {
    line-height: 1.1;
}
html p {
    margin: 0 0 10px;
}
html label {
    margin-bottom: 5px;
}

/* Grids inside Caligrafy wrappers: 15px columns like Bootstrap 3, without the negative margins of the Bootstrap 5
   .row that pushed centered wrappers to the left (put the .row inside the wrapper, not on it) */
.wrapper .row, .bounded .row, .bounded-large .row, .bounded-xlarge .row {
    --bs-gutter-x: 30px;
    margin-left: 0;
    margin-right: 0;
}
/* below 768px, Bootstrap 3 columns were stacked blocks (card margins collapse between them) */
@media (max-width: 767.98px) {
    .wrapper .row, .bounded .row, .bounded-large .row, .bounded-xlarge .row {
        display: block;
    }
}

/* Buttons: Bootstrap 3 metrics (Bootstrap 5: line-height 1.5, 6px corners) */
html .btn {
    --bs-btn-line-height: 1.42857;
    --bs-btn-border-radius: 4px;
}
/* Buttons and fields in the Caligrafy black and white look. Bootstrap 5 colors buttons with variables: without
   these, btn-secondary text is white on white and disabled or focused controls turn blue */
html .btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #000;
    --bs-btn-border-color: #000;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #535150;
    --bs-btn-hover-border-color: #535150;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #000;
    --bs-btn-active-border-color: #000;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #000;
    --bs-btn-disabled-border-color: #000;
    --bs-btn-focus-shadow-rgb: 0, 0, 0;
}
html .btn-secondary {
    --bs-btn-color: #000;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #000;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #ececec;
    --bs-btn-hover-border-color: #000;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #d1d1d1;
    --bs-btn-active-border-color: #000;
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: #000;
    --bs-btn-focus-shadow-rgb: 0, 0, 0;
}
html .btn-secondary:hover {
    background-color: #ececec;
}
/* Black focus rings instead of the blue Bootstrap 5 ones */
html .form-control:focus, html .form-select:focus {
    border-color: #000;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.1);
}
/* Links styled as buttons: styles.css makes links inherit the text color (body a:link), keep button text readable */
a.btn-primary:link, a.btn-primary:visited, a.btn-primary:hover, a.btn-primary:active {
    color: #fff;
}
a.btn-secondary:link, a.btn-secondary:visited, a.btn-secondary:hover, a.btn-secondary:active {
    color: #000;
}