/* UIF Online Webtools Skin - Base Layout Styles */
/* Extracted from original layout.css with all suffixes removed */

/* ===========================
   ROOT VARIABLES
   =========================== */

:root {
  --background-color: #fefefe;
  --backround-color-secondary: #f9f9fa;
  --forground-color: #2a2f43;
  --forground-color-secondary: #4b4e59;
  --forground-color-tertiary: #636670;
  --font-size-root: clamp(var(--font-size-base), 0.35vw + var(--font-size-base) * 0.625, 2vw);
  --font-size-base: 16px;
  --font-size-ui: clamp(var(--font-size-base), 0.35vw + var(--font-size-base) * 0.625, 2vw);
}

/* ===========================
   BASE ELEMENTS
   =========================== */

html,
body {
  color: #2a2f43;
  font-family: "Gotham SSm A", "Gotham SSm B", "Gotham", sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

body {
  background-color: #131f33;
}

body > * {
  outline-color: #5e8dfc;
}

* {
  box-sizing: border-box;
  font-family: "Gotham SSm A", "Gotham SSm B", "Gotham", sans-serif;
}

/* ===========================
   TYPOGRAPHY
   =========================== */

h1, h2, h3, h4, h5, h6 {
  color: #2a2f43;
  font-family: "Gotham SSm A", "Gotham SSm B", "Gotham", sans-serif;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.75em 0;
}

h1 {
  font-size: 3rem;
  font-weight: 700;
}

h2 {
  font-size: 2rem;
  font-weight: 600;
}

h3 {
  font-size: 1.5rem;
  font-weight: 600;
}

h4 {
  font-size: 1.25rem;
  font-weight: 600;
}

h5 {
  font-size: 1.125rem;
  font-weight: 600;
}

h6 {
  font-size: 1rem;
  font-weight: 600;
}

p {
  margin: 0 0 1.25em;
}

a {
  color: #596EA1;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.09em;
  text-decoration-thickness: round(0.09em, 1px);
  transition: all 0.15s cubic-bezier(0.33, 0.15, 0.33, 1);
  transition-property: color, text-decoration;
}

a:hover,
a:focus {
  color: #596EA1;
  text-decoration-color: #596EA1;
  text-underline-offset: max(0.1em, 1px);
}

strong,
b {
  font-weight: 600;
}

em,
i {
  font-style: italic;
}

/* ===========================
   LISTS
   =========================== */

ul, ol {
  margin: 0.5em 0 1.25em 1em;
  padding-left: 0.125em;
}

ul ul,
ul ol,
ol ul,
ol ol {
  margin-top: 0;
  margin-bottom: 0;
}

ul li,
ol li {
  padding-left: 0.25em;
}

ol > li::marker {
  font-family: "Gotham SSm Tables A", "Gotham SSm Tables B", "Gotham", sans-serif;
  font-size: 0.9em;
  font-weight: 500;
}

/* ===========================
   FORM ELEMENTS
   =========================== */

input,
textarea,
select,
button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="password"],
textarea,
select {
  background-color: #fefefe;
  border: 1px solid #dbdde2;
  border-radius: 0.25rem;
  color: #2a2f43;
  padding: 0.5rem 0.75rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border-color: #596EA1;
  box-shadow: 0 0 0 0.2rem rgba(89, 110, 161, 0.25);
  outline: 0;
}

textarea {
  min-height: 6rem;
  resize: vertical;
}

label {
  color: #2a2f43;
  display: block;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

fieldset {
  border: 1px solid #dbdde2;
  border-radius: 0.25rem;
  margin: 0 0 1rem 0;
  padding: 1rem;
}

legend {
  color: #2a2f43;
  font-weight: 600;
  padding: 0 0.5rem;
}

/* ===========================
   TABLES
   =========================== */

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

th,
td {
  border-bottom: 1px solid #dbdde2;
  padding: 0.75rem;
  text-align: left;
  vertical-align: top;
}

th {
  background-color: #f9f9fa;
  color: #2a2f43;
  font-weight: 600;
}

thead th {
  border-bottom: 2px solid #dbdde2;
}

/* ===========================
   MEDIA
   =========================== */

img {
  height: auto;
  max-width: 100%;
}

figure {
  margin: 0 0 1.25em 0;
}

figcaption {
  color: #636670;
  font-size: 0.875rem;
  font-style: italic;
  margin-top: 0.5rem;
}

/* ===========================
   CODE AND PREFORMATTED TEXT
   =========================== */

code,
pre,
samp,
kbd {
  font-family: "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
  font-size: 0.875em;
}

code {
  background-color: #f9f9fa;
  border-radius: 0.25rem;
  color: #2a2f43;
  padding: 0.125rem 0.25rem;
}

pre {
  background-color: #f9f9fa;
  border-radius: 0.25rem;
  color: #2a2f43;
  overflow-x: auto;
  padding: 1rem;
}

pre code {
  background-color: transparent;
  padding: 0;
}

/* ===========================
   QUOTES
   =========================== */

blockquote {
  border-left: 4px solid #596EA1;
  color: #4b4e59;
  font-style: italic;
  margin: 0 0 1.25em 0;
  padding-left: 1rem;
}

blockquote p:last-child {
  margin-bottom: 0;
}

cite {
  color: #636670;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
}

/* ===========================
   HORIZONTAL RULE
   =========================== */

hr {
  border: none;
  border-top: 1px solid #dbdde2;
  margin: 2em 0;
}

/* ===========================
   UTILITY CLASSES
   =========================== */

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-capitalize {
  text-transform: capitalize;
}

.font-weight-light {
  font-weight: 300;
}

.font-weight-normal {
  font-weight: 400;
}

.font-weight-medium {
  font-weight: 500;
}

.font-weight-semibold {
  font-weight: 600;
}

.font-weight-bold {
  font-weight: 700;
}

.font-size-small {
  font-size: 0.875rem;
}

.font-size-large {
  font-size: 1.125rem;
}

/* ===========================
   CARD COMPONENT
   =========================== */

.card {
  background-color: #fefefe;
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1rem -0.25rem rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  padding: 1.5rem;
}

.card-header {
  border-bottom: 1px solid #dbdde2;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}

.card-footer {
  border-top: 1px solid #dbdde2;
  margin-top: 1rem;
  padding-top: 1rem;
}

/* ===========================
   ALERT COMPONENT
   =========================== */

.alert {
  border: 1px solid transparent;
  border-radius: 0.25rem;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
}

.alert-info {
  background-color: #d1ecf1;
  border-color: #bee5eb;
  color: #0c5460;
}

.alert-success {
  background-color: #d4edda;
  border-color: #c3e6cb;
  color: #155724;
}

.alert-warning {
  background-color: #fff3cd;
  border-color: #ffeaa7;
  color: #856404;
}

.alert-danger {
  background-color: #f8d7da;
  border-color: #f5c6cb;
  color: #721c24;
}

/* ===========================
   RESPONSIVE UTILITIES
   =========================== */

@media (max-width: 47.999rem) {
  .d-sm-none {
    display: none !important;
  }

  .d-sm-block {
    display: block !important;
  }

  .d-sm-flex {
    display: flex !important;
  }
}

@media (min-width: 48rem) and (max-width: 74.999rem) {
  .d-md-none {
    display: none !important;
  }

  .d-md-block {
    display: block !important;
  }

  .d-md-flex {
    display: flex !important;
  }
}

@media (min-width: 75rem) {
  .d-lg-none {
    display: none !important;
  }

  .d-lg-block {
    display: block !important;
  }

  .d-lg-flex {
    display: flex !important;
  }
}

/* ===========================
   OVERLAYS AND SCROLLBARS
   =========================== */

html[data-overlayscrollbars-body] {
  overflow: hidden;
}

html[data-overlayscrollbars-body],
html[data-overlayscrollbars-body] > body {
  height: 100%;
  overflow: hidden;
  width: 100%;
}

html[data-overlayscrollbars-body] > body {
  margin: 0;
  padding: 0;
}

body > .os-scrollbar {
  z-index: 9999;
}

/* ===========================
   FOCUS MANAGEMENT
   =========================== */

*:focus {
  outline: 2px solid #5e8dfc;
  outline-offset: 2px;
}

button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus {
  outline-color: #596EA1;
}

/* Skip to main content link */
.skip-link {
  background-color: #596EA1;
  color: #fefefe;
  left: 50%;
  padding: 0.5rem 1rem;
  position: absolute;
  text-decoration: none;
  top: -100px;
  transform: translateX(-50%);
  z-index: 10000;
}

.skip-link:focus {
  top: 1rem;
}

/* ===========================
   PRINT STYLES
   =========================== */

@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    box-shadow: none !important;
    color: #000 !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}