/*
 * Variables
 */

:root {

  --font-family-serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;

  --font-weight-thin: 300;
  --font-weight-regular: 400;
  --font-weight-normal: var(--font-weight-regular);
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --border-color-cards: rgba(0,0,0,0.175); /* Bootstrap color */
  --border-color-input-fields: #ced4da; /* Bootstrap color */

  --color_blue: #0d6efd; /* Bootstrap color */
  --color_danger: #dc3545; /* Bootstrap color */
  --color_danger_darkened: #bb2d3b; /* BS danger :hover color */
  --color-gray-119: rgb(119,119,119);
  --color-muted: rgba(33, 37, 41, 0.75); /* Bootstrap text-body-secondary color */
  --color_primary: var(--color_blue); /* Bootstrap color */
  --color_secondary: #6c757d; /* Bootstrap color */
  --color_success: #198754; /* Bootstrap color */
  --color_white: #fff;
  --color_yellow: #ffc107; /* Bootstrap color */

  --brand-background-color: #faf5ef;
  --brand-primary-color: #d97b66;
  --brand-primary-color_darkened: rgb(207,88,61);
  --brand-secondary-color: #3b6a66;
  --brand-font-family-display: "Lexend Deca", serif;
  --brand-font-family-text: "Lora", serif;

}



/*
 * Document
 */

html,
body {
  margin: 0;
  padding: 0;
  cursor: default;
  background-color: var(--brand-background-color);
}

body > .container-fluid { padding-top: 82px; }


/*
 * Buttons
 */

/* Blank Button */

a.btn-blank,
a.btn-blank:link,
a.btn-blank:visited,
button.btn-blank {
  border: 1px solid var(--border-color-input-fields);

  background-color: var(--color-white);

  font-weight: var(--font_weight_regular);
  color: var(--font-color);

  &:active,
  &:focus,
  &:hover {
    /*border-color: var(--border-color-input-fields);
    background-color: var(--border-color-input-fields);*/
    border-color: var(--brand-secondary-color);
    background-color: var(--brand-secondary-color);
    color: #fff;
  }
}

/* Brand Button */

a.btn-brand,
a.btn-brand:link,
a.btn-brand:visited,
button.btn-brand {
  border: 1px solid var(--brand-primary-color_darkened);

  background-color: var(--brand-primary-color);

  font-weight: var(--font_weight_regular);
  color: var(--color_white);

  &:active,
  &:focus,
  &:hover {
    border-color: var(--brand-primary-color_darkened);
    background-color: var(--brand-primary-color_darkened);
    color: var(--color_white);
  }
}

.bg-brand { background-color: var(--brand-primary-color); }

.text-brand,
.link-brand,
.link-brand:link,
.link-brand:visited {
  color: var(--brand-primary-color);
}

.link-brand:hover,
.link-brand:active,
.link-brand:focus {
  color: var(--brand-primary-color_darkened);
}

.nav-link:hover .bg-brand,
.nav-link:active .bg-brand,
.nav-link:focus .bg-brand {
  background-color: var(--brand-primary-color_darkened);
}


/* Hover Buttons */

.btn-danger-hover {
  &:hover,
  &:active,
  &:focus {
    border-color: var(--color_danger);
    background-color: var(--color_danger);
    color: var(--color_white);
  }
}


.btn-primary-hover {
  &:hover,
  &:active,
  &:focus {
    border-color: var(--color_primary);
    background-color: var(--color_primary);
    color: var(--color_white);
  }
}


.btn-secondary-hover {
  &:hover,
  &:active,
  &:focus {
    border-color: var(--color_secondary);
    background-color: var(--color_secondary);
    color: var(--color_white);
  }
}


.btn-success-hover {
  &:hover,
  &:active,
  &:focus {
    border-color: var(--color_success);
    background-color: var(--color_success);
    color: var(--color_white);
  }
}



/*
 * Cards
 */

.text-bg-brand {
  background-color: var(--brand-primary-color);
  border-color: var(--brand-primary-color_darkened);
  color: var(--color_white);
}

.card-number-text,
.card-number-md,
.card-number-lg,
.card-number-xl {
  display: block;
  font-size: 3.2rem;
  font-weight: var(--font-weight-semibold);
}

.card-number-text { font-size: 1.8rem; }

.card-number-md { font-size: 2rem; }

.card-number-lg { font-size: 2.4rem; }



/* Columns */

.three-columns {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}

/* MQ md */
@media (min-width: 768px) {
} /* /MQ md */

/* MQ lg */
@media (min-width: 992px) {
  .three-columns {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
} /* /MQ lg */



/*
 * Conversations & Messages
 */

.messages-window {
  overflow-x: hidden;
  overflow-y: scroll;
  /* height: 30rem; */
  max-height: 60vh;
}



/*
 * Definition lists
 */

dl.ui-dl-list {
  margin: 0;
  padding: .5rem;

  &:nth-child(even) { background-color: rgb(245,245,245); }
}



/*
 * Forms
 */

label.required::after {
  content: '*';
  margin-left: 2px;
  color: var(--color-muted);
}



/*
 * Lists
 */

ul.list-inline-dotted {
  li.list-inline-item:not(:last-child) {
    margin-right: 0; /* overwrite Bootstrap default */

    &::after {
      content: " / ";
      font-weight: var(--font-weight-bold);
      color: var(--brand-primary-color);
    }
  }
}



/*
 * Navigation
 */

nav#main_navigation {

  a.navbar-brand,
  a.navbar-brand:link,
  a.navbar-brand:visited {
    min-width: 130px; /* avoids .navbar-nav jumping around on :hover */
  } /* / a.navbar-brand */
} /* /nav#main_navigation */


.sub-navigation {
  padding: 3px;
  border: 1px solid var(--bs-border-color-translucent); /* BS: Same as .card, etc.*/
  border-radius: var(--bs-nav-pills-border-radius); /* BS: 0.375rem */
}



/*
 * Notifications
 */

.notification {
  position: fixed;
  bottom: 16px;
  right: 20px;
}



/*
 * Typography
 */

.font-serif { font-family: var(--font-family-serif); }


h2.headline {
  margin-bottom: 1rem;
  font-weight: bold;
  font-weight: semibold;

  small { font-size: 60%; }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  font-weight: semibold;
}


/* Non-underlined links */

h5.card-title a,
h5.card-title a:link,
h5.card-title a:visited,
.link-underline-none,
a.link-underline-none,
a.link-underline-none:link,
a.link-underline-none:visited { text-decoration: none; }



/*
 * User Profiles
 */

.user-card-image {
  max-width: 100%; /* BS: .img-flui */
  width: 256px;
  height: auto;
}

a.user-profile-link,
a.user-profile-link:link,
a.user-profile-link:visited {
  display: block;
  height: 100%;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.user-profile-image-xs,
.user-profile-image-sm,
.user-profile-image-md,
.user-profile-image {
  width: 256px;
  height: 256px;
  margin: 0 auto .75rem; /* BS: .mb-2 */
  border-radius: 50%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.user-profile-image-xs {
  width: 32px;
  height: 32px;
  margin: 0;
}

.user-profile-image-sm {
  width: 64px;
  height: 64px;
  margin: 0;
}

.user-profile-image-md {
  width: 128px;
  height: 128px;
}

.user-profile-user-type {
  display: block;
  font-weight: var(--font-weight-regular);
  font-size: 1.2rem;
  color: var(--color-muted);
}

.user-profile-headline {
  margin-top: -.25rem;
  font-weight: var(--font-weight-bold);

  &.lg {
    font-size: 2.4rem;
  }

  small {
    display: block;
    font-weight: var(--font-weight-regular);
    font-size: 1.2rem;
    color: var(--color-muted);
  }
}

.user-profile-section-headline {
  font-weight: var(--font-weight-semibold);
  font-size: 1.8rem;
}

.user-profile-gallery-item {
}

.user-profile-gallery-item figcaption {
  font-size: .8rem;
  text-align: center;
  color: var(--color-muted);
}

.user-profile-gallery-image {
  max-width: 100%;
  width: 100%;
  /* width: auto; */
  height: auto;
  border: 1px solid var(--border-color-cards);
}

/* MQ: xl */
@media (min-width: 1200px) {
.user-profile-gallery-image {
    width: auto;
    max-height: 256px;
  }
}