/*
  You should write your own CSS through a series of Ygdir conventions.
  Ygdir provides ygdir-apps.scss and ygdir-content-website.scss to give you an idea of
  the typical SCSS that would be used as a starting point for a content website or an app.

  Ygdir.css ships with all Ygdir components, for framework development reasons, but you should
  really strip away what you do not use in production.
*/
/* ==========================================================================
  Reset
   ========================================================================== */
html, body {
  margin: 0;
  padding: 0; }

h1, h2, h3, h4, h5, h6, p {
  padding: 0;
  margin: 0; }

ul, ol {
  list-style: none;
  padding: 0;
  margin: 0; }

/* ==========================================================================
  Fonts
   ========================================================================== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Inter-Regular.woff2?v=3.11") format("woff2"), url("../fonts/Inter-Regular.woff?v=3.11") format("woff"); }

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Inter-Italic.woff2?v=3.11") format("woff2"), url("../fonts/Inter-Italic.woff?v=3.11") format("woff"); }

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Inter-Medium.woff2?v=3.11") format("woff2"), url("../fonts/Inter-Medium.woff?v=3.11") format("woff"); }

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Inter-MediumItalic.woff2?v=3.11") format("woff2"), url("../fonts/Inter-MediumItalic.woff?v=3.11") format("woff"); }

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Inter-SemiBold.woff2?v=3.11") format("woff2"), url("../fonts/Inter-SemiBold.woff?v=3.11") format("woff"); }

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Inter-SemiBoldItalic.woff2?v=3.11") format("woff2"), url("../fonts/Inter-SemiBoldItalic.woff?v=3.11") format("woff"); }

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Inter-Bold.woff2?v=3.11") format("woff2"), url("../fonts/Inter-Bold.woff?v=3.11") format("woff"); }

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Inter-BoldItalic.woff2?v=3.11") format("woff2"), url("../fonts/Inter-BoldItalic.woff?v=3.11") format("woff"); }

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/Inter-ExtraBold.woff2?v=3.11") format("woff2"), url("../fonts/Inter-ExtraBold.woff?v=3.11") format("woff"); }

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/Inter-ExtraBoldItalic.woff2?v=3.11") format("woff2"), url("../fonts/Inter-ExtraBoldItalic.woff?v=3.11") format("woff"); }

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/Inter-Black.woff2?v=3.11") format("woff2"), url("../fonts/Inter-Black.woff?v=3.11") format("woff"); }

/* ==========================================================================
   Global variables
   Prefixed with $g-
   ========================================================================== */
/* ==========================================================================
  Base
  Only base element styling
   ========================================================================== */
*, *:before, *:after {
  box-sizing: border-box; }

html, body {
  height: 100%; }

html {
  font-size: 62.5%; }

body {
  background: #FFF;
  color: #333;
  font-family: "Inter", sans-serif;
  line-height: 1.5;
  font-size: 1.6rem; }

/* ==========================================================================
  Block list
   ========================================================================== */
.c-block-list__item {
  padding: 2rem;
  border-bottom: 0.1rem solid #DDD; }

/* ==========================================================================
  Button
   ========================================================================== */
/* Variables
   ========================================================================== */
/* Component
   ========================================================================== */
.c-button {
  padding: 0.6rem 1rem;
  display: inline-flex;
  border-radius: 0.2rem;
  border: none;
  appearance: none;
  font-size: 1.6rem; }

a.c-button {
  text-decoration: none; }

.c-button--default {
  background: #DDD;
  color: #333; }

.c-button--primary {
  background: #0E83FC;
  color: #FFF; }
  .c-button--primary:hover, .c-button--primary:focus {
    background: #409dfd; }
  .c-button--primary:active {
    background: #036ad4; }

.c-button--link {
  color: #0E83FC; }

/* ==========================================================================
  Container
   ========================================================================== */
.c-container {
  width: 96rem;
  margin: 0 auto; }

/* ==========================================================================
  Content
   ========================================================================== */
.c-h1 {
  font-size: 3.2rem;
  font-weight: 600;
  color: #000;
  margin: 0 0 1.6rem; }

.c-h2 {
  font-size: 2.4rem;
  font-weight: 600;
  color: #000;
  margin: 0 0 1.6rem; }

.c-h3 {
  font-size: 1.8rem;
  font-weight: 600;
  color: #000;
  margin: 0 0 1.6rem; }

.c-p {
  margin-bottom: 1.6rem; }

.c-ul {
  margin: 0 0 1.6rem 2.4rem; }

.c-ul > li {
  list-style: disc; }

.c-content h1 {
  font-size: 3.2rem;
  color: #000;
  margin: 0 0 1.6rem; }

.c-content h2 {
  font-size: 2.4rem;
  color: #000;
  margin: 0 0 1.6rem; }

.c-content h3 {
  font-size: 1.8rem;
  font-weight: 600;
  color: #000;
  margin: 0 0 1.6rem; }

.c-content p {
  margin-bottom: 1.6rem; }

.c-content ul {
  margin: 0 0 1.6rem 2.4rem; }

.c-content li {
  list-style: disc; }

/* ==========================================================================
  Modal
   ========================================================================== */
/* Variables
   ========================================================================== */
/* Backdrop
   The backdrop provides the visual overlay while the modal is active
   ========================================================================== */
.c-modal-backdrop {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 10010;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(2px); }

/* Wrapper
   The modal is positioned within the wrapper
   ========================================================================== */
.c-modal-dialog-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1000; }

.c-modal-dialog-wrapper__inner {
  display: flex;
  width: 100%;
  height: 100%; }

.c-modal-dialog-wrapper .c-modal-dialog {
  height: 100%;
  flex-direction: column;
  display: flex; }

/* The modal itself
   ========================================================================== */
.c-modal-dialog {
  margin: auto;
  width: 90rem;
  max-width: 100%;
  max-height: 100%;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5)); }

.c-modal-dialog__content {
  overflow: auto;
  flex: 0 1 auto;
  border-top: 0;
  border-bottom: 0;
  background-color: #FFF; }

.c-modal-dialog .c-navbar {
  flex: 0 1 6.5rem;
  background: white; }

.c-modal__height-pusher {
  flex: 1 0 auto; }
  @media (min-width: 1000px) {
    .c-modal__height-pusher {
      min-height: 2.4rem; } }

/* Modal sizes
   ========================================================================== */
.c-modal-dialog--small {
  width: 40rem; }

.c-modal-dialog--medium {
  width: 60rem; }

/* ==========================================================================
  Component: navbar
  ---
  A container for navigational elements
   ========================================================================== */
/* Variables
   ========================================================================== */
/* Component
   ========================================================================== */
.c-navbar {
  padding: 0 2rem;
  height: 6.5rem;
  width: 100%;
  display: flex;
  align-items: center; }

.c-navbar--large {
  height: 9.5rem; }

.c-navbar--no-padding {
  padding: 0; }

.c-navbar--auto {
  height: auto; }

.c-navbar--white {
  background: #FFF; }

.c-navbar--bg-alt {
  background: #EEE; }

/* Bordered equivalents
   ========================================================================== */
.c-navbar--bordered-top {
  border-top: 0.1rem solid #CCC; }

.c-navbar--bordered-bottom {
  border-bottom: 0.1rem solid #CCC; }

/* ==========================================================================
  Popover
   ========================================================================== */
/* ==========================================================================
  Component: Toolbar
  ---
  Component for aligning multiple sub components on a horizontal axis
   ========================================================================== */
/* Variables
   ========================================================================== */
/* Component
   ========================================================================== */
.c-toolbar {
  width: 100%;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-around;
  height: 4.8rem; }

.c-toolbar--spaced {
  padding: 0 2.4rem; }

.c-toolbar--auto {
  height: auto; }

.c-toolbar__left {
  z-index: 2;
  justify-content: flex-start; }
  .c-toolbar__left .c-toolbar__item {
    margin-right: 1.6rem; }
    .c-toolbar__left .c-toolbar__item:only-child {
      margin: 0; }

.c-toolbar__right {
  z-index: 2;
  justify-content: flex-end; }
  .c-toolbar__right .c-toolbar__item {
    margin-left: 1.6rem; }
    .c-toolbar__right .c-toolbar__item:only-child {
      margin: 0; }

.c-toolbar__left,
.c-toolbar__right {
  flex: 1 0 auto;
  display: flex;
  align-items: center; }

.c-toolbar__item {
  position: relative; }

.c-toolbar__center {
  position: absolute;
  margin-left: 50%;
  left: 0; }

.c-toolbar__center-inner {
  margin-left: -50%;
  display: flex;
  flex: 1 0 auto;
  align-items: center; }
  .c-toolbar__center-inner .c-toolbar__item {
    margin: 0 0.8rem; }
    .c-toolbar__center-inner .c-toolbar__item:only-child {
      margin: 0; }

.c-toolbar__center--interactive {
  z-index: 1; }

.c-toolbar__center-inner--alt {
  margin-left: -100%; }

/* Specific children
   ========================================================================== */
.c-toolbar__title {
  font-weight: 600;
  font-size: 1.8rem; }

/* Justified toolbar
   ========================================================================== */
.c-toolbar__justified {
  flex: 1 0 auto;
  display: flex;
  align-items: center; }
  .c-toolbar__justified .c-toolbar__item {
    margin-right: 1.6rem; }

.c-toolbar__item--stretch {
  flex: 1; }

.c-toolbar__justified .c-toolbar__item:last-child {
  margin: 0; }

/* ==========================================================================
  Tooltip
   ========================================================================== */
/* ==========================================================================
  Utilities: Flex
   ========================================================================== */
.u-flex {
  display: flex; }

/* ==========================================================================
  Utilities: Spacer
   ========================================================================== */
.u-spacer {
  padding: 1.6rem; }