body.old-layout {
    background-color: rgb(250, 250, 251);
}

.bg-light {
    background-color: hsla(192, 81%, 5%, 0.04);
}

.navbar-logo {
    height: 30px;
}

pre {
    background-color: rgba(0, 43, 54, 0.11);
    color: #002b36;
    padding: 1rem;
    border-radius: 3px;
}

code {
    background-color: rgba(0, 43, 54, 0.11);
    color: #002b36;
    border-radius: 3px;
}

label {
    font-weight: bold;
}

h1, h2, h3, h4, h5 {
    color: var(--color-black);
}

html, body {
    letter-spacing: var(--letter-spacing-text);
    font-weight: normal;
    font-size: var(--font-size-text);
    color: var(--color-black);
}

.navbar-light .navbar-nav .nav-link {
    color: hsla(192, 81%, 26%, 0.8);
    font-weight: 500;
}

.nav .nav-link.active {
    color: #268BD2;
    font-weight: 600;
}

.nav.nav-pills .nav-link.active {
    color: white;
    background-color: #268BD2;
}


.navbar-nav .nav-item {
    font-size: 18px;
    font-weight: 500;
}

.navbar-nav .nav-item .nav-link {
    color: rgb(13 14 15 / 64%);
    font-size: 14px;
    font-weight: 500;
}

.navbar-nav .nav-item .nav-link:hover {
    color: rgb(13 14 15 / 100%);
}

.navbar-text.project-name {
    display: block;
    font-size: 14px;
    font-weight: 500;
    opacity: 0.8;
    color: rgb(153, 159, 185);
    padding-bottom: 0;
}

.navbar-nav .nav-item.active .nav-link {
    color: #007bff;
}

.btn.btn-primary {
    background-color: hsla(192, 81%, 26%, 1);
    color: hsla(196, 13%, 98%, 1);
    border: 1px solid hsla(192, 81%, 19%, 0.1);
    font-weight: 500;
}

.btn.btn-primary:active {
    background-color: hsla(192, 81%, 26%, 0.9) !important;
    color: hsla(196, 13%, 98%, 1) !important;
    border: 1px solid hsla(192, 81%, 19%, 0.1) !important;
}

.btn.btn-primary:hover {
    background-color: hsla(192, 81%, 26%, 0.8);
}

.btn-outline-primary {
    border-color: hsla(192, 81%, 26%, 1);
    color: hsla(192, 81%, 26%, 1);
}

.btn-outline-primary:hover, .btn-outline-primary:active {
    background-color: hsla(192, 81%, 26%, 1) !important;
    border-color: hsla(192, 81%, 26%, 1) !important;
}

a, .btn-link {
    color: hsla(192, 81%, 26%, 1);
}

.custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    border-color: hsla(192, 81%, 26%, 1);
    background-color: hsla(192, 81%, 26%, 1);
}

.text-muted {
    color: rgb(153, 159, 185) !important;
}

iframe {
    border: 0;
}

#community h2 {
    margin-top: 3rem;
}

.lead {
    font-weight: 400;
}

.container.small-container {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.btn-dark {
    background-color: #0d0e0f;
    font-size: 14px;
    font-weight: 500;
}

.btn-link-dark {
    color: #0d0e0f;
    transition:  all 0.1s;
    border-radius: 3px;
    text-decoration: none !important;
}

.btn-link-dark:hover {
    background-color: hsl(210deg 7% 5% / 10%);
    color: #0d0e0f !important;
}

.nav-pills .nav-item .nav-link {
    font-size: 12px;
    font-weight: 500;
    padding-top: 4px;
    padding-bottom: 4px;
    color:  rgb(13 14 15 / 80%);
    transition: all 0.2s;
}

.nav-pills .nav-item .nav-link:hover {
    background-color:  rgba(13, 14, 15, 0.05);
}


.nav-pills .nav-item .nav-link.active {
    background-color:  #0d0e0f;
}

/* NEW DESIGN */

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

:root {
    --pure-white: #ffffff;
    --off-white: #f9f9f9;
    --off-black: #0d0e0f;
    --off-black-opacity-strong: rgba(13, 14, 15, var(--opacity-strong));
    --off-black-opacity-light: rgba(13, 14, 15, var(--opacity-light));
    --contrast: #106b86;
    --contrast-secondary: #063642;
    --gray-fg: #7e7e7f;
    --gray-bg: #7e7e7f1e;

    --color-white: var(--pure-white);
    --color-black: var(--off-black);

    --spacing-xxs: 4px;
    --spacing-xs: 8px;
    --spacing-s: 12px;
    --spacing-m: 24px;
    --spacing-l: 40px;
    --spacing-xl: 80px;
    --spacing-xxl: 120px;

    --font-size-xxs: 12px;
    --font-size-xs: 14px;
    --font-size-s: 16px;
    --font-size-m: 18px;
    --font-size-l: 23px;
    --font-size-xl: 28px;
    --font-size-xxl: 34px;

    --font-size-text: var(--font-size-s);
    --font-size-subtitle: var(--font-size-m);
    --font-size-title: var(--font-size-l);

    --letter-spacing-title: 0.84px;
    --letter-spacing-subtitle: 0.52px;
    --letter-spacing-text: 0.39px;

    --opacity-light: 0.64;
    --opacity-strong: 0.85;

    letter-spacing: var(--letter-spacing-text);

    --di-grid-padding: calc(100vw / 14);

}

body {
    -webkit-font-smoothing: antialiased;
    font-family: "Poppins","Avenir Next",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    overflow-x: hidden;
}

a:hover {
    transition-property: color;
    transition-duration: 0.1s;
}
a:hover {
    color: var(--contrast);
}

.di-grid {
    --columns: 6;
}
.di-grid.di-grid-1  {--columns: 1;}
.di-grid.di-grid-2  {--columns: 2;}
.di-grid.di-grid-3  {--columns: 3;}
.di-grid.di-grid-4  {--columns: 4;}
.di-grid.di-grid-5  {--columns: 5;}
.di-grid.di-grid-6  {--columns: 6;}
.di-grid.di-grid-7  {--columns: 7;}
.di-grid.di-grid-8  {--columns: 8;}
.di-grid.di-grid-9  {--columns: 9;}
.di-grid.di-grid-10 {--columns: 10;}
.di-grid.di-grid-11 {--columns: 11;}
.di-grid.di-grid-12 {--columns: 12;}

.di-grid .di-grid .di-row {
    padding-left: 0;
    padding-right: 0;
}

.di-grid .di-row {
    width: 100%;
    padding-left: var(--di-grid-padding);
    padding-right: var(--di-grid-padding);
}

.di-grid .di-row > div {
    display: inline-block;
    max-width: 100%;
}

.di-grid .di-col-full {vertical-align: top; width: calc(100% / var(--columns) * 6);}
.di-grid .di-col-24 {vertical-align: top; width: calc(100% / var(--columns) * 24);}
.di-grid .di-col-23 {vertical-align: top; width: calc(100% / var(--columns) * 23);}
.di-grid .di-col-22 {vertical-align: top; width: calc(100% / var(--columns) * 22);}
.di-grid .di-col-21 {vertical-align: top; width: calc(100% / var(--columns) * 21);}
.di-grid .di-col-20 {vertical-align: top; width: calc(100% / var(--columns) * 20);}
.di-grid .di-col-19 {vertical-align: top; width: calc(100% / var(--columns) * 19);}
.di-grid .di-col-18 {vertical-align: top; width: calc(100% / var(--columns) * 18);}
.di-grid .di-col-17 {vertical-align: top; width: calc(100% / var(--columns) * 17);}
.di-grid .di-col-16 {vertical-align: top; width: calc(100% / var(--columns) * 16);}
.di-grid .di-col-15 {vertical-align: top; width: calc(100% / var(--columns) * 15);}
.di-grid .di-col-14 {vertical-align: top; width: calc(100% / var(--columns) * 14);}
.di-grid .di-col-13 {vertical-align: top; width: calc(100% / var(--columns) * 13);}
.di-grid .di-col-12 {vertical-align: top; width: calc(100% / var(--columns) * 12);}
.di-grid .di-col-11 {vertical-align: top; width: calc(100% / var(--columns) * 11);}
.di-grid .di-col-10 {vertical-align: top; width: calc(100% / var(--columns) * 10);}
.di-grid .di-col-9  {vertical-align: top; width: calc(100% / var(--columns) * 9);}
.di-grid .di-col-8  {vertical-align: top; width: calc(100% / var(--columns) * 8);}
.di-grid .di-col-7  {vertical-align: top; width: calc(100% / var(--columns) * 7);}
.di-grid .di-col-6  {vertical-align: top; width: calc(100% / var(--columns) * 6);}
.di-grid .di-col-5  {vertical-align: top; width: calc(100% / var(--columns) * 5);}
.di-grid .di-col-4  {vertical-align: top; width: calc(100% / var(--columns) * 4);}
.di-grid .di-col-3  {vertical-align: top; width: calc(100% / var(--columns) * 3);}
.di-grid .di-col-2  {vertical-align: top; width: calc(100% / var(--columns) * 2);}
.di-grid .di-col-1  {vertical-align: top; width: calc(100% / var(--columns));}

.di-grid .di-col-r-24 {margin-right: calc(100% / var(--columns) * 24);}
.di-grid .di-col-r-23 {margin-right: calc(100% / var(--columns) * 23);}
.di-grid .di-col-r-22 {margin-right: calc(100% / var(--columns) * 22);}
.di-grid .di-col-r-21 {margin-right: calc(100% / var(--columns) * 21);}
.di-grid .di-col-r-20 {margin-right: calc(100% / var(--columns) * 20);}
.di-grid .di-col-r-19 {margin-right: calc(100% / var(--columns) * 19);}
.di-grid .di-col-r-18 {margin-right: calc(100% / var(--columns) * 18);}
.di-grid .di-col-r-17 {margin-right: calc(100% / var(--columns) * 17);}
.di-grid .di-col-r-16 {margin-right: calc(100% / var(--columns) * 16);}
.di-grid .di-col-r-15 {margin-right: calc(100% / var(--columns) * 15);}
.di-grid .di-col-r-14 {margin-right: calc(100% / var(--columns) * 14);}
.di-grid .di-col-r-13 {margin-right: calc(100% / var(--columns) * 13);}
.di-grid .di-col-r-12 {margin-right: calc(100% / var(--columns) * 12);}
.di-grid .di-col-r-11 {margin-right: calc(100% / var(--columns) * 11);}
.di-grid .di-col-r-10 {margin-right: calc(100% / var(--columns) * 10);}
.di-grid .di-col-r-9  {margin-right: calc(100% / var(--columns) * 9);}
.di-grid .di-col-r-8  {margin-right: calc(100% / var(--columns) * 8);}
.di-grid .di-col-r-7  {margin-right: calc(100% / var(--columns) * 7);}
.di-grid .di-col-r-6  {margin-right: calc(100% / var(--columns) * 6);}
.di-grid .di-col-r-5  {margin-right: calc(100% / var(--columns) * 5);}
.di-grid .di-col-r-4  {margin-right: calc(100% / var(--columns) * 4);}
.di-grid .di-col-r-3  {margin-right: calc(100% / var(--columns) * 3);}
.di-grid .di-col-r-2  {margin-right: calc(100% / var(--columns) * 2);}
.di-grid .di-col-r-1  {margin-right: calc(100% / var(--columns));}
.di-grid .di-col-r-0  {margin-right: 0;}

.di-grid .di-col-l-24 {margin-left: calc(100% / var(--columns) * 24);}
.di-grid .di-col-l-23 {margin-left: calc(100% / var(--columns) * 23);}
.di-grid .di-col-l-22 {margin-left: calc(100% / var(--columns) * 22);}
.di-grid .di-col-l-21 {margin-left: calc(100% / var(--columns) * 21);}
.di-grid .di-col-l-20 {margin-left: calc(100% / var(--columns) * 20);}
.di-grid .di-col-l-19 {margin-left: calc(100% / var(--columns) * 19);}
.di-grid .di-col-l-18 {margin-left: calc(100% / var(--columns) * 18);}
.di-grid .di-col-l-17 {margin-left: calc(100% / var(--columns) * 17);}
.di-grid .di-col-l-16 {margin-left: calc(100% / var(--columns) * 16);}
.di-grid .di-col-l-15 {margin-left: calc(100% / var(--columns) * 15);}
.di-grid .di-col-l-14 {margin-left: calc(100% / var(--columns) * 14);}
.di-grid .di-col-l-13 {margin-left: calc(100% / var(--columns) * 13);}
.di-grid .di-col-l-12 {margin-left: calc(100% / var(--columns) * 12);}
.di-grid .di-col-l-11 {margin-left: calc(100% / var(--columns) * 11);}
.di-grid .di-col-l-10 {margin-left: calc(100% / var(--columns) * 10);}
.di-grid .di-col-l-9  {margin-left: calc(100% / var(--columns) * 9);}
.di-grid .di-col-l-8  {margin-left: calc(100% / var(--columns) * 8);}
.di-grid .di-col-l-7  {margin-left: calc(100% / var(--columns) * 7);}
.di-grid .di-col-l-6  {margin-left: calc(100% / var(--columns) * 6);}
.di-grid .di-col-l-5  {margin-left: calc(100% / var(--columns) * 5);}
.di-grid .di-col-l-4  {margin-left: calc(100% / var(--columns) * 4);}
.di-grid .di-col-l-3  {margin-left: calc(100% / var(--columns) * 3);}
.di-grid .di-col-l-2  {margin-left: calc(100% / var(--columns) * 2);}
.di-grid .di-col-l-1  {margin-left: calc(100% / var(--columns));}
.di-grid .di-col-l-0  {margin-left: 0;}

.di-text-title-white {
    letter-spacing: var(--letter-spacing-title);
    font-weight: bold;
    font-size: var(--font-size-title);
    color: var(--color-white);
    margin: 0;
}
.di-text-title-black {
    letter-spacing: var(--letter-spacing-title);
    font-weight: bold;
    font-size: var(--font-size-title);
    color: var(--color-black);
    margin: 0;
}
.di-text-title-contrast {
    letter-spacing: var(--letter-spacing-title);
    font-weight: bold;
    font-size: var(--font-size-title);
    color: var(--contrast);
    margin: 0;
}
.di-text-subtitle-white {
    letter-spacing: var(--letter-spacing-subtitle);
    font-weight: bold;
    font-size: var(--font-size-subtitle);
    color: var(--color-white);
    margin: 0;
}
.di-text-subtitle-black {
    letter-spacing: var(--letter-spacing-subtitle);
    font-weight: bold;
    font-size: var(--font-size-subtitle);
    color: var(--color-black);
    margin: 0;
}
.di-text-subtitle-contrast {
    letter-spacing: var(--letter-spacing-subtitle);
    font-weight: bold;
    font-size: var(--font-size-subtitle);
    color: var(--contrast);
    margin: 0;
}
.di-text-white {
    letter-spacing: var(--letter-spacing-text);
    font-weight: normal;
    font-size: var(--font-size-text);
    color: var(--color-white);
    margin: 0;
}
.di-text-black {
    letter-spacing: var(--letter-spacing-text);
    font-weight: normal;
    font-size: var(--font-size-text);
    color: var(--color-black);
    margin: 0;
}
.di-link-light {
    color: var(--color-black);
    opacity: var(--opacity-light);
}
.di-link-light:hover {
    color: var(--color-black);
    opacity: var(--opacity-light);
}
.di-text-xxs {font-size: var(--font-size-xxs);}
.di-text-xs {font-size: var(--font-size-xs);}
.di-text-s  {font-size: var(--font-size-s );}
.di-text-m  {font-size: var(--font-size-m );}
.di-text-l  {font-size: var(--font-size-l );}
.di-text-xl {font-size: var(--font-size-xl);}
.di-text-xxl {font-size: var(--font-size-xxl);}

.di-m-0 {margin-top: 0;margin-bottom: 0;margin-left: 0;margin-right: 0;}
.di-m-xxs {margin-top: var(--spacing-xxs);margin-bottom: var(--spacing-xxs);margin-left: var(--spacing-xxs);margin-right: var(--spacing-xxs);}
.di-m-xs  {margin-top: var(--spacing-xs );margin-bottom: var(--spacing-xs );margin-left: var(--spacing-xs );margin-right: var(--spacing-xs );}
.di-m-s   {margin-top: var(--spacing-s  );margin-bottom: var(--spacing-s  );margin-left: var(--spacing-s  );margin-right: var(--spacing-s  );}
.di-m-m   {margin-top: var(--spacing-m  );margin-bottom: var(--spacing-m  );margin-left: var(--spacing-m  );margin-right: var(--spacing-m  );}
.di-m-l   {margin-top: var(--spacing-l  );margin-bottom: var(--spacing-l  );margin-left: var(--spacing-l  );margin-right: var(--spacing-l  );}
.di-m-xl  {margin-top: var(--spacing-xl );margin-bottom: var(--spacing-xl );margin-left: var(--spacing-xl );margin-right: var(--spacing-xl );}
.di-m-xxl {margin-top: var(--spacing-xxl);margin-bottom: var(--spacing-xxl);margin-left: var(--spacing-xxl);margin-right: var(--spacing-xxl);}

.di-mx-0   {margin-left: 0;margin-right: 0;}
.di-mx-xxs {margin-left: var(--spacing-xxs);margin-right: var(--spacing-xxs);}
.di-mx-xs  {margin-left: var(--spacing-xs );margin-right: var(--spacing-xs );}
.di-mx-s   {margin-left: var(--spacing-s  );margin-right: var(--spacing-s  );}
.di-mx-m   {margin-left: var(--spacing-m  );margin-right: var(--spacing-m  );}
.di-mx-l   {margin-left: var(--spacing-l  );margin-right: var(--spacing-l  );}
.di-mx-xl  {margin-left: var(--spacing-xl );margin-right: var(--spacing-xl );}
.di-mx-xxl {margin-left: var(--spacing-xxl);margin-right: var(--spacing-xxl);}

.di-my-0   {margin-top: 0;margin-bottom: 0;}
.di-my-xxs {margin-top: var(--spacing-xxs);margin-bottom: var(--spacing-xxs);}
.di-my-xs  {margin-top: var(--spacing-xs );margin-bottom: var(--spacing-xs );}
.di-my-s   {margin-top: var(--spacing-s  );margin-bottom: var(--spacing-s  );}
.di-my-m   {margin-top: var(--spacing-m  );margin-bottom: var(--spacing-m  );}
.di-my-l   {margin-top: var(--spacing-l  );margin-bottom: var(--spacing-l  );}
.di-my-xl  {margin-top: var(--spacing-xl );margin-bottom: var(--spacing-xl );}
.di-my-xxl {margin-top: var(--spacing-xxl);margin-bottom: var(--spacing-xxl);}

.di-mt-0   {margin-top: 0;}
.di-mt-xxs {margin-top: var(--spacing-xxs);}
.di-mt-xs  {margin-top: var(--spacing-xs );}
.di-mt-s   {margin-top: var(--spacing-s  );}
.di-mt-m   {margin-top: var(--spacing-m  );}
.di-mt-l   {margin-top: var(--spacing-l  );}
.di-mt-xl  {margin-top: var(--spacing-xl );}
.di-mt-xxl {margin-top: var(--spacing-xxl);}

.di-mr-0   {margin-right: 0;}
.di-mr-xxs {margin-right: var(--spacing-xxs);}
.di-mr-xs  {margin-right: var(--spacing-xs );}
.di-mr-s   {margin-right: var(--spacing-s  );}
.di-mr-m   {margin-right: var(--spacing-m  );}
.di-mr-l   {margin-right: var(--spacing-l  );}
.di-mr-xl  {margin-right: var(--spacing-xl );}
.di-mr-xxl {margin-right: var(--spacing-xxl);}

.di-mb-0   {margin-bottom: 0;}
.di-mb-xxs {margin-bottom: var(--spacing-xxs);}
.di-mb-xs  {margin-bottom: var(--spacing-xs );}
.di-mb-s   {margin-bottom: var(--spacing-s  );}
.di-mb-m   {margin-bottom: var(--spacing-m  );}
.di-mb-l   {margin-bottom: var(--spacing-l  );}
.di-mb-xl  {margin-bottom: var(--spacing-xl );}
.di-mb-xxl {margin-bottom: var(--spacing-xxl);}

.di-ml-0   {margin-left: 0;}
.di-ml-xxs {margin-left: var(--spacing-xxs);}
.di-ml-xs  {margin-left: var(--spacing-xs );}
.di-ml-s   {margin-left: var(--spacing-s  );}
.di-ml-m   {margin-left: var(--spacing-m  );}
.di-ml-l   {margin-left: var(--spacing-l  );}
.di-ml-xl  {margin-left: var(--spacing-xl );}
.di-ml-xxl {margin-left: var(--spacing-xxl);}

.di-p-0   {padding-top: 0;padding-bottom: 0;padding-left: 0;padding-right: 0;}
.di-p-xxs {padding-top: var(--spacing-xxs);padding-bottom: var(--spacing-xxs);padding-left: var(--spacing-xxs);padding-right: var(--spacing-xxs);}
.di-p-xs  {padding-top: var(--spacing-xs );padding-bottom: var(--spacing-xs );padding-left: var(--spacing-xs );padding-right: var(--spacing-xs );}
.di-p-s   {padding-top: var(--spacing-s  );padding-bottom: var(--spacing-s  );padding-left: var(--spacing-s  );padding-right: var(--spacing-s  );}
.di-p-m   {padding-top: var(--spacing-m  );padding-bottom: var(--spacing-m  );padding-left: var(--spacing-m  );padding-right: var(--spacing-m  );}
.di-p-l   {padding-top: var(--spacing-l  );padding-bottom: var(--spacing-l  );padding-left: var(--spacing-l  );padding-right: var(--spacing-l  );}
.di-p-xl  {padding-top: var(--spacing-xl );padding-bottom: var(--spacing-xl );padding-left: var(--spacing-xl );padding-right: var(--spacing-xl );}
.di-p-xxl {padding-top: var(--spacing-xxl);padding-bottom: var(--spacing-xxl);padding-left: var(--spacing-xxl);padding-right: var(--spacing-xxl);}

.di-px-0   {padding-left: 0;padding-right: 0;}
.di-px-xxs {padding-left: var(--spacing-xxs);padding-right: var(--spacing-xxs);}
.di-px-xs  {padding-left: var(--spacing-xs );padding-right: var(--spacing-xs );}
.di-px-s   {padding-left: var(--spacing-s  );padding-right: var(--spacing-s  );}
.di-px-m   {padding-left: var(--spacing-m  );padding-right: var(--spacing-m  );}
.di-px-l   {padding-left: var(--spacing-l  );padding-right: var(--spacing-l  );}
.di-px-xl  {padding-left: var(--spacing-xl );padding-right: var(--spacing-xl );}
.di-px-xxl {padding-left: var(--spacing-xxl);padding-right: var(--spacing-xxl);}

.di-py-0   {padding-top: 0;padding-bottom: 0;}
.di-py-xxs {padding-top: var(--spacing-xxs);padding-bottom: var(--spacing-xxs);}
.di-py-xs  {padding-top: var(--spacing-xs );padding-bottom: var(--spacing-xs );}
.di-py-s   {padding-top: var(--spacing-s  );padding-bottom: var(--spacing-s  );}
.di-py-m   {padding-top: var(--spacing-m  );padding-bottom: var(--spacing-m  );}
.di-py-l   {padding-top: var(--spacing-l  );padding-bottom: var(--spacing-l  );}
.di-py-xl  {padding-top: var(--spacing-xl );padding-bottom: var(--spacing-xl );}
.di-py-xxl {padding-top: var(--spacing-xxl);padding-bottom: var(--spacing-xxl);}

.di-pt-0   {padding-top: 0;}
.di-pt-xxs {padding-top: var(--spacing-xxs);}
.di-pt-xs  {padding-top: var(--spacing-xs );}
.di-pt-s   {padding-top: var(--spacing-s  );}
.di-pt-m   {padding-top: var(--spacing-m  );}
.di-pt-l   {padding-top: var(--spacing-l  );}
.di-pt-xl  {padding-top: var(--spacing-xl );}
.di-pt-xxl {padding-top: var(--spacing-xxl);}

.di-pr-0   {padding-right: 0;}
.di-pr-xxs {padding-right: var(--spacing-xxs);}
.di-pr-xs  {padding-right: var(--spacing-xs );}
.di-pr-s   {padding-right: var(--spacing-s  );}
.di-pr-m   {padding-right: var(--spacing-m  );}
.di-pr-l   {padding-right: var(--spacing-l  );}
.di-pr-xl  {padding-right: var(--spacing-xl );}
.di-pr-xxl {padding-right: var(--spacing-xxl);}

.di-pb-0   {padding-bottom: 0;}
.di-pb-xxs {padding-bottom: var(--spacing-xxs);}
.di-pb-xs  {padding-bottom: var(--spacing-xs );}
.di-pb-s   {padding-bottom: var(--spacing-s  );}
.di-pb-m   {padding-bottom: var(--spacing-m  );}
.di-pb-l   {padding-bottom: var(--spacing-l  );}
.di-pb-xl  {padding-bottom: var(--spacing-xl );}
.di-pb-xxl {padding-bottom: var(--spacing-xxl);}

.di-pl-0   {padding-left: 0;}
.di-pl-xxs {padding-left: var(--spacing-xxs);}
.di-pl-xs  {padding-left: var(--spacing-xs );}
.di-pl-s   {padding-left: var(--spacing-s  );}
.di-pl-m   {padding-left: var(--spacing-m  );}
.di-pl-l   {padding-left: var(--spacing-l  );}
.di-pl-xl  {padding-left: var(--spacing-xl );}
.di-pl-xxl {padding-left: var(--spacing-xxl);}

.di-color-contrast {
    color: var(--contrast) !important;
}

.di-bg-pure-white {background-color: var(--pure-white);}
.di-bg-off-white {background-color: var(--off-white);}

.di-rounded-xxs {border-radius: var(--spacing-xxs);}
.di-rounded-xs  {border-radius: var(--spacing-xs );}
.di-rounded-s   {border-radius: var(--spacing-s  );}
.di-rounded-m   {border-radius: var(--spacing-m  );}
.di-rounded-l   {border-radius: var(--spacing-l  );}
.di-rounded-xl  {border-radius: var(--spacing-xl );}
.di-rounded-xxl {border-radius: var(--spacing-xxl);}

.di-shadow-m {box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);}

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

.di-opacity-light {opacity: var(--opacity-light);}

.di-flex {display: flex !important;}

.di-static   {position: static !important;}
.di-absolute {position: absolute !important;}
.di-relative {position: relative !important;}

.di-vertical-center-2-grid {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
}

/* COMPONENTS */

.di-btn {
    border: none;
    border-radius: 4.5px;
    background-color: transparent;
    transition-property: background-color !important;
    transition-duration: 0.1s !important;
    vertical-align: bottom;
    padding: var(--spacing-xs) var(--spacing-m);
    letter-spacing: var(--letter-spacing-text);
    font-weight: 500;
    font-size: var(--font-size-text);
    color: var(--contrast);
}
a.di-btn {
    display: inline-block;
}
a.di-btn:hover {
    text-decoration: none !important;
    background-color: var(--gray-bg);
}

.di-btn-s {
    padding: var(--spacing-xxs) var(--spacing-xs);
    font-size: var(--font-size-xs);
}

.di-btn-arrow {
    padding-left: var(--spacing-s);
    padding-right: var(--spacing-s);
}
.di-btn-arrow svg {
    width: 16px;
    height: 16px;
    margin-left: var(--spacing-m);
}
.di-btn-icon svg {
    vertical-align: sub;
}

.di-btn-black {
    background-color: var(--off-black);
    color: var(--pure-white);
}
.di-btn-black:hover {
    color: var(--pure-white);
    background-color: var(--off-black-opacity-strong) !important;
}

.di-btn-contrast {
    background-color: var(--contrast);
    color: var(--pure-white);
}
a.di-btn-contrast:hover {
    background-color: var(--contrast-secondary);
    color: var(--pure-white);
}
.di-btn-white {
    background-color: var(--pure-white);
    color: var(--contrast);
}

.di-tab {
    background-color: transparent;
    border: none;
    border-radius: 4.5px;
    transition-property: background-color !important;
    transition-duration: 0.1s !important;
    vertical-align: bottom;
    letter-spacing: var(--letter-spacing-text);
    font-weight: 500;
    color: var(--color-black);
    padding: var(--spacing-xxs) var(--spacing-xs);
    font-size: var(--font-size-xs);
    margin-right: var(--spacing-xxs);
}
.di-tab:hover {
    background-color: var(--gray-bg);
    color: var(--color-black);
    text-decoration: none;
}
.di-tab.active {
    background-color: var(--color-black);
    color: var(--color-white);
}
.di-tab.active:hover {
    background-color: var(--off-black-opacity-light);
}

.di-input-white {
    background-color: transparent;
    border-width: 1px;
    border-color: var(--pure-white);
    border-style: solid;
    padding: calc(var(--spacing-xs) - 1px) calc(var(--spacing-s) - 1px);
    border-radius: var(--spacing-xs);

    letter-spacing: var(--letter-spacing-text);
    font-weight: normal;
    font-size: var(--font-size-text);
    color: var(--color-white);
}
.di-input-white::placeholder {
    color: var(--color-white);
    opacity: var(--opacity-light);
}

.di-hr {
    border: var(--spacing-xxs) solid var(--contrast);
    border-radius: var(--spacing-xxs);
    width: var(--spacing-xl);
    margin: var(--spacing-m) auto;
}

.di-gradient-banner {
    border-radius: var(--spacing-s);
    background-image: linear-gradient(58deg, #044d60 4%, #0082a3 98%);
}

@media screen and (min-width: 1170px) {
    :root {
        --font-size-text: var(--font-size-xs);
        --font-size-subtitle: var(--font-size-l);
        --font-size-title: var(--font-size-xl);
        --inner-row-width: 1080px;
    }

    .di-grid {
        --columns: 24;
    }
    .di-grid .di-row {
        padding-left: calc((100% - var(--inner-row-width)) / 2);
        padding-right: calc((100% - var(--inner-row-width)) / 2);
    }

    .di-grid .di-col-full {vertical-align: top; width: calc(var(--inner-row-width) / var(--columns) * 24);}
    .di-grid .di-col-24 {vertical-align: top; width: calc(var(--inner-row-width) / var(--columns) * 24);}
    .di-grid .di-col-23 {vertical-align: top; width: calc(var(--inner-row-width) / var(--columns) * 23);}
    .di-grid .di-col-22 {vertical-align: top; width: calc(var(--inner-row-width) / var(--columns) * 22);}
    .di-grid .di-col-21 {vertical-align: top; width: calc(var(--inner-row-width) / var(--columns) * 21);}
    .di-grid .di-col-20 {vertical-align: top; width: calc(var(--inner-row-width) / var(--columns) * 20);}
    .di-grid .di-col-19 {vertical-align: top; width: calc(var(--inner-row-width) / var(--columns) * 19);}
    .di-grid .di-col-18 {vertical-align: top; width: calc(var(--inner-row-width) / var(--columns) * 18);}
    .di-grid .di-col-17 {vertical-align: top; width: calc(var(--inner-row-width) / var(--columns) * 17);}
    .di-grid .di-col-16 {vertical-align: top; width: calc(var(--inner-row-width) / var(--columns) * 16);}
    .di-grid .di-col-15 {vertical-align: top; width: calc(var(--inner-row-width) / var(--columns) * 15);}
    .di-grid .di-col-14 {vertical-align: top; width: calc(var(--inner-row-width) / var(--columns) * 14);}
    .di-grid .di-col-13 {vertical-align: top; width: calc(var(--inner-row-width) / var(--columns) * 13);}
    .di-grid .di-col-12 {vertical-align: top; width: calc(var(--inner-row-width) / var(--columns) * 12);}
    .di-grid .di-col-11 {vertical-align: top; width: calc(var(--inner-row-width) / var(--columns) * 11);}
    .di-grid .di-col-10 {vertical-align: top; width: calc(var(--inner-row-width) / var(--columns) * 10);}
    .di-grid .di-col-9  {vertical-align: top; width: calc(var(--inner-row-width) / var(--columns) * 9);}
    .di-grid .di-col-8  {vertical-align: top; width: calc(var(--inner-row-width) / var(--columns) * 8);}
    .di-grid .di-col-7  {vertical-align: top; width: calc(var(--inner-row-width) / var(--columns) * 7);}
    .di-grid .di-col-6  {vertical-align: top; width: calc(var(--inner-row-width) / var(--columns) * 6);}
    .di-grid .di-col-5  {vertical-align: top; width: calc(var(--inner-row-width) / var(--columns) * 5);}
    .di-grid .di-col-4  {vertical-align: top; width: calc(var(--inner-row-width) / var(--columns) * 4);}
    .di-grid .di-col-3  {vertical-align: top; width: calc(var(--inner-row-width) / var(--columns) * 3);}
    .di-grid .di-col-2  {vertical-align: top; width: calc(var(--inner-row-width) / var(--columns) * 2);}
    .di-grid .di-col-1  {vertical-align: top; width: calc(var(--inner-row-width) / var(--columns));}

    .di-grid .di-col-r-24 {margin-right: calc(var(--inner-row-width) / var(--columns) * 24);}
    .di-grid .di-col-r-23 {margin-right: calc(var(--inner-row-width) / var(--columns) * 23);}
    .di-grid .di-col-r-22 {margin-right: calc(var(--inner-row-width) / var(--columns) * 22);}
    .di-grid .di-col-r-21 {margin-right: calc(var(--inner-row-width) / var(--columns) * 21);}
    .di-grid .di-col-r-20 {margin-right: calc(var(--inner-row-width) / var(--columns) * 20);}
    .di-grid .di-col-r-19 {margin-right: calc(var(--inner-row-width) / var(--columns) * 19);}
    .di-grid .di-col-r-18 {margin-right: calc(var(--inner-row-width) / var(--columns) * 18);}
    .di-grid .di-col-r-17 {margin-right: calc(var(--inner-row-width) / var(--columns) * 17);}
    .di-grid .di-col-r-16 {margin-right: calc(var(--inner-row-width) / var(--columns) * 16);}
    .di-grid .di-col-r-15 {margin-right: calc(var(--inner-row-width) / var(--columns) * 15);}
    .di-grid .di-col-r-14 {margin-right: calc(var(--inner-row-width) / var(--columns) * 14);}
    .di-grid .di-col-r-13 {margin-right: calc(var(--inner-row-width) / var(--columns) * 13);}
    .di-grid .di-col-r-12 {margin-right: calc(var(--inner-row-width) / var(--columns) * 12);}
    .di-grid .di-col-r-11 {margin-right: calc(var(--inner-row-width) / var(--columns) * 11);}
    .di-grid .di-col-r-10 {margin-right: calc(var(--inner-row-width) / var(--columns) * 10);}
    .di-grid .di-col-r-9  {margin-right: calc(var(--inner-row-width) / var(--columns) * 9);}
    .di-grid .di-col-r-8  {margin-right: calc(var(--inner-row-width) / var(--columns) * 8);}
    .di-grid .di-col-r-7  {margin-right: calc(var(--inner-row-width) / var(--columns) * 7);}
    .di-grid .di-col-r-6  {margin-right: calc(var(--inner-row-width) / var(--columns) * 6);}
    .di-grid .di-col-r-5  {margin-right: calc(var(--inner-row-width) / var(--columns) * 5);}
    .di-grid .di-col-r-4  {margin-right: calc(var(--inner-row-width) / var(--columns) * 4);}
    .di-grid .di-col-r-3  {margin-right: calc(var(--inner-row-width) / var(--columns) * 3);}
    .di-grid .di-col-r-2  {margin-right: calc(var(--inner-row-width) / var(--columns) * 2);}
    .di-grid .di-col-r-1  {margin-right: calc(var(--inner-row-width) / var(--columns));}
    .di-grid .di-col-r-0  {margin-right: 0;}

    .di-grid .di-col-l-24 {margin-left: calc(var(--inner-row-width) / var(--columns) * 24);}
    .di-grid .di-col-l-23 {margin-left: calc(var(--inner-row-width) / var(--columns) * 23);}
    .di-grid .di-col-l-22 {margin-left: calc(var(--inner-row-width) / var(--columns) * 22);}
    .di-grid .di-col-l-21 {margin-left: calc(var(--inner-row-width) / var(--columns) * 21);}
    .di-grid .di-col-l-20 {margin-left: calc(var(--inner-row-width) / var(--columns) * 20);}
    .di-grid .di-col-l-19 {margin-left: calc(var(--inner-row-width) / var(--columns) * 19);}
    .di-grid .di-col-l-18 {margin-left: calc(var(--inner-row-width) / var(--columns) * 18);}
    .di-grid .di-col-l-17 {margin-left: calc(var(--inner-row-width) / var(--columns) * 17);}
    .di-grid .di-col-l-16 {margin-left: calc(var(--inner-row-width) / var(--columns) * 16);}
    .di-grid .di-col-l-15 {margin-left: calc(var(--inner-row-width) / var(--columns) * 15);}
    .di-grid .di-col-l-14 {margin-left: calc(var(--inner-row-width) / var(--columns) * 14);}
    .di-grid .di-col-l-13 {margin-left: calc(var(--inner-row-width) / var(--columns) * 13);}
    .di-grid .di-col-l-12 {margin-left: calc(var(--inner-row-width) / var(--columns) * 12);}
    .di-grid .di-col-l-11 {margin-left: calc(var(--inner-row-width) / var(--columns) * 11);}
    .di-grid .di-col-l-10 {margin-left: calc(var(--inner-row-width) / var(--columns) * 10);}
    .di-grid .di-col-l-9  {margin-left: calc(var(--inner-row-width) / var(--columns) * 9);}
    .di-grid .di-col-l-8  {margin-left: calc(var(--inner-row-width) / var(--columns) * 8);}
    .di-grid .di-col-l-7  {margin-left: calc(var(--inner-row-width) / var(--columns) * 7);}
    .di-grid .di-col-l-6  {margin-left: calc(var(--inner-row-width) / var(--columns) * 6);}
    .di-grid .di-col-l-5  {margin-left: calc(var(--inner-row-width) / var(--columns) * 5);}
    .di-grid .di-col-l-4  {margin-left: calc(var(--inner-row-width) / var(--columns) * 4);}
    .di-grid .di-col-l-3  {margin-left: calc(var(--inner-row-width) / var(--columns) * 3);}
    .di-grid .di-col-l-2  {margin-left: calc(var(--inner-row-width) / var(--columns) * 2);}
    .di-grid .di-col-l-1  {margin-left: calc(var(--inner-row-width) / var(--columns));}
    .di-grid .di-col-l-0  {margin-left: 0;}

    .di-grid .di-col-lg-full {vertical-align: top; width: calc(var(--inner-row-width) / var(--columns) * 24);}
    .di-grid .di-col-lg-24 {width: calc(var(--inner-row-width) / var(--columns) * 24);}
    .di-grid .di-col-lg-23 {width: calc(var(--inner-row-width) / var(--columns) * 23);}
    .di-grid .di-col-lg-22 {width: calc(var(--inner-row-width) / var(--columns) * 22);}
    .di-grid .di-col-lg-21 {width: calc(var(--inner-row-width) / var(--columns) * 21);}
    .di-grid .di-col-lg-20 {width: calc(var(--inner-row-width) / var(--columns) * 20);}
    .di-grid .di-col-lg-19 {width: calc(var(--inner-row-width) / var(--columns) * 19);}
    .di-grid .di-col-lg-18 {width: calc(var(--inner-row-width) / var(--columns) * 18);}
    .di-grid .di-col-lg-17 {width: calc(var(--inner-row-width) / var(--columns) * 17);}
    .di-grid .di-col-lg-16 {width: calc(var(--inner-row-width) / var(--columns) * 16);}
    .di-grid .di-col-lg-15 {width: calc(var(--inner-row-width) / var(--columns) * 15);}
    .di-grid .di-col-lg-14 {width: calc(var(--inner-row-width) / var(--columns) * 14);}
    .di-grid .di-col-lg-13 {width: calc(var(--inner-row-width) / var(--columns) * 13);}
    .di-grid .di-col-lg-12 {width: calc(var(--inner-row-width) / var(--columns) * 12);}
    .di-grid .di-col-lg-11 {width: calc(var(--inner-row-width) / var(--columns) * 11);}
    .di-grid .di-col-lg-10 {width: calc(var(--inner-row-width) / var(--columns) * 10);}
    .di-grid .di-col-lg-9  {width: calc(var(--inner-row-width) / var(--columns) * 9);}
    .di-grid .di-col-lg-8  {width: calc(var(--inner-row-width) / var(--columns) * 8);}
    .di-grid .di-col-lg-7  {width: calc(var(--inner-row-width) / var(--columns) * 7);}
    .di-grid .di-col-lg-6  {width: calc(var(--inner-row-width) / var(--columns) * 6);}
    .di-grid .di-col-lg-5  {width: calc(var(--inner-row-width) / var(--columns) * 5);}
    .di-grid .di-col-lg-4  {width: calc(var(--inner-row-width) / var(--columns) * 4);}
    .di-grid .di-col-lg-3  {width: calc(var(--inner-row-width) / var(--columns) * 3);}
    .di-grid .di-col-lg-2  {width: calc(var(--inner-row-width) / var(--columns) * 2);}
    .di-grid .di-col-lg-1  {width: calc(var(--inner-row-width) / var(--columns));}
    .di-grid .di-col-lg-0  {width: 0;}

    .di-grid .di-col-lg-r-24 {margin-right: calc(var(--inner-row-width) / var(--columns) * 24);}
    .di-grid .di-col-lg-r-23 {margin-right: calc(var(--inner-row-width) / var(--columns) * 23);}
    .di-grid .di-col-lg-r-22 {margin-right: calc(var(--inner-row-width) / var(--columns) * 22);}
    .di-grid .di-col-lg-r-21 {margin-right: calc(var(--inner-row-width) / var(--columns) * 21);}
    .di-grid .di-col-lg-r-20 {margin-right: calc(var(--inner-row-width) / var(--columns) * 20);}
    .di-grid .di-col-lg-r-19 {margin-right: calc(var(--inner-row-width) / var(--columns) * 19);}
    .di-grid .di-col-lg-r-18 {margin-right: calc(var(--inner-row-width) / var(--columns) * 18);}
    .di-grid .di-col-lg-r-17 {margin-right: calc(var(--inner-row-width) / var(--columns) * 17);}
    .di-grid .di-col-lg-r-16 {margin-right: calc(var(--inner-row-width) / var(--columns) * 16);}
    .di-grid .di-col-lg-r-15 {margin-right: calc(var(--inner-row-width) / var(--columns) * 15);}
    .di-grid .di-col-lg-r-14 {margin-right: calc(var(--inner-row-width) / var(--columns) * 14);}
    .di-grid .di-col-lg-r-13 {margin-right: calc(var(--inner-row-width) / var(--columns) * 13);}
    .di-grid .di-col-lg-r-12 {margin-right: calc(var(--inner-row-width) / var(--columns) * 12);}
    .di-grid .di-col-lg-r-11 {margin-right: calc(var(--inner-row-width) / var(--columns) * 11);}
    .di-grid .di-col-lg-r-10 {margin-right: calc(var(--inner-row-width) / var(--columns) * 10);}
    .di-grid .di-col-lg-r-9  {margin-right: calc(var(--inner-row-width) / var(--columns) * 9);}
    .di-grid .di-col-lg-r-8  {margin-right: calc(var(--inner-row-width) / var(--columns) * 8);}
    .di-grid .di-col-lg-r-7  {margin-right: calc(var(--inner-row-width) / var(--columns) * 7);}
    .di-grid .di-col-lg-r-6  {margin-right: calc(var(--inner-row-width) / var(--columns) * 6);}
    .di-grid .di-col-lg-r-5  {margin-right: calc(var(--inner-row-width) / var(--columns) * 5);}
    .di-grid .di-col-lg-r-4  {margin-right: calc(var(--inner-row-width) / var(--columns) * 4);}
    .di-grid .di-col-lg-r-3  {margin-right: calc(var(--inner-row-width) / var(--columns) * 3);}
    .di-grid .di-col-lg-r-2  {margin-right: calc(var(--inner-row-width) / var(--columns) * 2);}
    .di-grid .di-col-lg-r-1  {margin-right: calc(var(--inner-row-width) / var(--columns));}
    .di-grid .di-col-lg-r-0  {margin-right: 0;}

    .di-grid .di-col-lg-l-24 {margin-left: calc(var(--inner-row-width) / var(--columns) * 24);}
    .di-grid .di-col-lg-l-23 {margin-left: calc(var(--inner-row-width) / var(--columns) * 23);}
    .di-grid .di-col-lg-l-22 {margin-left: calc(var(--inner-row-width) / var(--columns) * 22);}
    .di-grid .di-col-lg-l-21 {margin-left: calc(var(--inner-row-width) / var(--columns) * 21);}
    .di-grid .di-col-lg-l-20 {margin-left: calc(var(--inner-row-width) / var(--columns) * 20);}
    .di-grid .di-col-lg-l-19 {margin-left: calc(var(--inner-row-width) / var(--columns) * 19);}
    .di-grid .di-col-lg-l-18 {margin-left: calc(var(--inner-row-width) / var(--columns) * 18);}
    .di-grid .di-col-lg-l-17 {margin-left: calc(var(--inner-row-width) / var(--columns) * 17);}
    .di-grid .di-col-lg-l-16 {margin-left: calc(var(--inner-row-width) / var(--columns) * 16);}
    .di-grid .di-col-lg-l-15 {margin-left: calc(var(--inner-row-width) / var(--columns) * 15);}
    .di-grid .di-col-lg-l-14 {margin-left: calc(var(--inner-row-width) / var(--columns) * 14);}
    .di-grid .di-col-lg-l-13 {margin-left: calc(var(--inner-row-width) / var(--columns) * 13);}
    .di-grid .di-col-lg-l-12 {margin-left: calc(var(--inner-row-width) / var(--columns) * 12);}
    .di-grid .di-col-lg-l-11 {margin-left: calc(var(--inner-row-width) / var(--columns) * 11);}
    .di-grid .di-col-lg-l-10 {margin-left: calc(var(--inner-row-width) / var(--columns) * 10);}
    .di-grid .di-col-lg-l-9  {margin-left: calc(var(--inner-row-width) / var(--columns) * 9);}
    .di-grid .di-col-lg-l-8  {margin-left: calc(var(--inner-row-width) / var(--columns) * 8);}
    .di-grid .di-col-lg-l-7  {margin-left: calc(var(--inner-row-width) / var(--columns) * 7);}
    .di-grid .di-col-lg-l-6  {margin-left: calc(var(--inner-row-width) / var(--columns) * 6);}
    .di-grid .di-col-lg-l-5  {margin-left: calc(var(--inner-row-width) / var(--columns) * 5);}
    .di-grid .di-col-lg-l-4  {margin-left: calc(var(--inner-row-width) / var(--columns) * 4);}
    .di-grid .di-col-lg-l-3  {margin-left: calc(var(--inner-row-width) / var(--columns) * 3);}
    .di-grid .di-col-lg-l-2  {margin-left: calc(var(--inner-row-width) / var(--columns) * 2);}
    .di-grid .di-col-lg-l-1  {margin-left: calc(var(--inner-row-width) / var(--columns));}
    .di-grid .di-col-lg-l-0  {margin-left: 0;}

    .di-text-lg-title-white {
        letter-spacing: var(--letter-spacing-title);
        font-weight: bold;
        font-size: var(--font-size-title);
        color: var(--color-white);
        margin: 0;
    }
    .di-text-lg-title-black {
        letter-spacing: var(--letter-spacing-title);
        font-weight: bold;
        font-size: var(--font-size-title);
        color: var(--color-black);
        margin: 0;
    }
    .di-text-lg-subtitle-white {
        letter-spacing: var(--letter-spacing-subtitle);
        font-weight: bold;
        font-size: var(--font-size-subtitle);
        color: var(--color-white);
        margin: 0;
    }
    .di-text-lg-subtitle-black {
        letter-spacing: var(--letter-spacing-subtitle);
        font-weight: bold;
        font-size: var(--font-size-subtitle);
        color: var(--color-black);
        margin: 0;
    }
    .di-text-lg-white {
        letter-spacing: var(--letter-spacing-text);
        font-weight: normal;
        font-size: var(--font-size-text);
        color: var(--color-white);
        margin: 0;
    }
    .di-text-lg-black {
        letter-spacing: var(--letter-spacing-text);
        font-weight: normal;
        font-size: var(--font-size-text);
        color: var(--color-black);
        margin: 0;
    }
    .di-text-lg-xs {font-size: var(--font-size-xs);}
    .di-text-lg-s  {font-size: var(--font-size-s );}
    .di-text-lg-m  {font-size: var(--font-size-m );}
    .di-text-lg-l  {font-size: var(--font-size-l );}
    .di-text-lg-xl {font-size: var(--font-size-xl);}
    .di-text-lg-xxl {font-size: var(--font-size-xxl);}

    .di-m-lg-0   {margin-top: 0;margin-bottom: 0;margin-left: 0;margin-right: 0;}
    .di-m-lg-xxs {margin-top: var(--spacing-xxs);margin-bottom: var(--spacing-xxs);margin-left: var(--spacing-xxs);margin-right: var(--spacing-xxs);}
    .di-m-lg-xs  {margin-top: var(--spacing-xs );margin-bottom: var(--spacing-xs );margin-left: var(--spacing-xs );margin-right: var(--spacing-xs );}
    .di-m-lg-s   {margin-top: var(--spacing-s  );margin-bottom: var(--spacing-s  );margin-left: var(--spacing-s  );margin-right: var(--spacing-s  );}
    .di-m-lg-m   {margin-top: var(--spacing-m  );margin-bottom: var(--spacing-m  );margin-left: var(--spacing-m  );margin-right: var(--spacing-m  );}
    .di-m-lg-l   {margin-top: var(--spacing-l  );margin-bottom: var(--spacing-l  );margin-left: var(--spacing-l  );margin-right: var(--spacing-l  );}
    .di-m-lg-xl  {margin-top: var(--spacing-xl );margin-bottom: var(--spacing-xl );margin-left: var(--spacing-xl );margin-right: var(--spacing-xl );}
    .di-m-lg-xxl {margin-top: var(--spacing-xxl);margin-bottom: var(--spacing-xxl);margin-left: var(--spacing-xxl);margin-right: var(--spacing-xxl);}

    .di-mx-lg-0   {margin-left: 0;margin-right: 0;}
    .di-mx-lg-xxs {margin-left: var(--spacing-xxs);margin-right: var(--spacing-xxs);}
    .di-mx-lg-xs  {margin-left: var(--spacing-xs );margin-right: var(--spacing-xs );}
    .di-mx-lg-s   {margin-left: var(--spacing-s  );margin-right: var(--spacing-s  );}
    .di-mx-lg-m   {margin-left: var(--spacing-m  );margin-right: var(--spacing-m  );}
    .di-mx-lg-l   {margin-left: var(--spacing-l  );margin-right: var(--spacing-l  );}
    .di-mx-lg-xl  {margin-left: var(--spacing-xl );margin-right: var(--spacing-xl );}
    .di-mx-lg-xxl {margin-left: var(--spacing-xxl);margin-right: var(--spacing-xxl);}

    .di-my-lg-0   {margin-top: 0;margin-bottom: 0;}
    .di-my-lg-xxs {margin-top: var(--spacing-xxs);margin-bottom: var(--spacing-xxs);}
    .di-my-lg-xs  {margin-top: var(--spacing-xs );margin-bottom: var(--spacing-xs );}
    .di-my-lg-s   {margin-top: var(--spacing-s  );margin-bottom: var(--spacing-s  );}
    .di-my-lg-m   {margin-top: var(--spacing-m  );margin-bottom: var(--spacing-m  );}
    .di-my-lg-l   {margin-top: var(--spacing-l  );margin-bottom: var(--spacing-l  );}
    .di-my-lg-xl  {margin-top: var(--spacing-xl );margin-bottom: var(--spacing-xl );}
    .di-my-lg-xxl {margin-top: var(--spacing-xxl);margin-bottom: var(--spacing-xxl);}

    .di-mt-lg-0   {margin-top: 0;}
    .di-mt-lg-xxs {margin-top: var(--spacing-xxs);}
    .di-mt-lg-xs  {margin-top: var(--spacing-xs );}
    .di-mt-lg-s   {margin-top: var(--spacing-s  );}
    .di-mt-lg-m   {margin-top: var(--spacing-m  );}
    .di-mt-lg-l   {margin-top: var(--spacing-l  );}
    .di-mt-lg-xl  {margin-top: var(--spacing-xl );}
    .di-mt-lg-xxl {margin-top: var(--spacing-xxl);}

    .di-mr-lg-0   {margin-right: 0;}
    .di-mr-lg-xxs {margin-right: var(--spacing-xxs);}
    .di-mr-lg-xs  {margin-right: var(--spacing-xs );}
    .di-mr-lg-s   {margin-right: var(--spacing-s  );}
    .di-mr-lg-m   {margin-right: var(--spacing-m  );}
    .di-mr-lg-l   {margin-right: var(--spacing-l  );}
    .di-mr-lg-xl  {margin-right: var(--spacing-xl );}
    .di-mr-lg-xxl {margin-right: var(--spacing-xxl);}

    .di-mb-lg-0   {margin-bottom: 0;}
    .di-mb-lg-xxs {margin-bottom: var(--spacing-xxs);}
    .di-mb-lg-xs  {margin-bottom: var(--spacing-xs );}
    .di-mb-lg-s   {margin-bottom: var(--spacing-s  );}
    .di-mb-lg-m   {margin-bottom: var(--spacing-m  );}
    .di-mb-lg-l   {margin-bottom: var(--spacing-l  );}
    .di-mb-lg-xl  {margin-bottom: var(--spacing-xl );}
    .di-mb-lg-xxl {margin-bottom: var(--spacing-xxl);}

    .di-ml-lg-0   {margin-left: 0;}
    .di-ml-lg-xxs {margin-left: var(--spacing-xxs);}
    .di-ml-lg-xs  {margin-left: var(--spacing-xs );}
    .di-ml-lg-s   {margin-left: var(--spacing-s  );}
    .di-ml-lg-m   {margin-left: var(--spacing-m  );}
    .di-ml-lg-l   {margin-left: var(--spacing-l  );}
    .di-ml-lg-xl  {margin-left: var(--spacing-xl );}
    .di-ml-lg-xxl {margin-left: var(--spacing-xxl);}

    .di-p-lg-0   {padding-top: 0;padding-bottom: 0;padding-left: 0;padding-right: 0;}
    .di-p-lg-xxs {padding-top: var(--spacing-xxs);padding-bottom: var(--spacing-xxs);padding-left: var(--spacing-xxs);padding-right: var(--spacing-xxs);}
    .di-p-lg-xs  {padding-top: var(--spacing-xs );padding-bottom: var(--spacing-xs );padding-left: var(--spacing-xs );padding-right: var(--spacing-xs );}
    .di-p-lg-s   {padding-top: var(--spacing-s  );padding-bottom: var(--spacing-s  );padding-left: var(--spacing-s  );padding-right: var(--spacing-s  );}
    .di-p-lg-m   {padding-top: var(--spacing-m  );padding-bottom: var(--spacing-m  );padding-left: var(--spacing-m  );padding-right: var(--spacing-m  );}
    .di-p-lg-l   {padding-top: var(--spacing-l  );padding-bottom: var(--spacing-l  );padding-left: var(--spacing-l  );padding-right: var(--spacing-l  );}
    .di-p-lg-xl  {padding-top: var(--spacing-xl );padding-bottom: var(--spacing-xl );padding-left: var(--spacing-xl );padding-right: var(--spacing-xl );}
    .di-p-lg-xxl {padding-top: var(--spacing-xxl);padding-bottom: var(--spacing-xxl);padding-left: var(--spacing-xxl);padding-right: var(--spacing-xxl);}

    .di-px-lg-0   {padding-left: 0;padding-right: 0;}
    .di-px-lg-xxs {padding-left: var(--spacing-xxs);padding-right: var(--spacing-xxs);}
    .di-px-lg-xs  {padding-left: var(--spacing-xs );padding-right: var(--spacing-xs );}
    .di-px-lg-s   {padding-left: var(--spacing-s  );padding-right: var(--spacing-s  );}
    .di-px-lg-m   {padding-left: var(--spacing-m  );padding-right: var(--spacing-m  );}
    .di-px-lg-l   {padding-left: var(--spacing-l  );padding-right: var(--spacing-l  );}
    .di-px-lg-xl  {padding-left: var(--spacing-xl );padding-right: var(--spacing-xl );}
    .di-px-lg-xxl {padding-left: var(--spacing-xxl);padding-right: var(--spacing-xxl);}

    .di-py-lg-0   {padding-top: 0;padding-bottom: 0;}
    .di-py-lg-xxs {padding-top: var(--spacing-xxs);padding-bottom: var(--spacing-xxs);}
    .di-py-lg-xs  {padding-top: var(--spacing-xs );padding-bottom: var(--spacing-xs );}
    .di-py-lg-s   {padding-top: var(--spacing-s  );padding-bottom: var(--spacing-s  );}
    .di-py-lg-m   {padding-top: var(--spacing-m  );padding-bottom: var(--spacing-m  );}
    .di-py-lg-l   {padding-top: var(--spacing-l  );padding-bottom: var(--spacing-l  );}
    .di-py-lg-xl  {padding-top: var(--spacing-xl );padding-bottom: var(--spacing-xl );}
    .di-py-lg-xxl {padding-top: var(--spacing-xxl);padding-bottom: var(--spacing-xxl);}

    .di-pt-lg-0   {padding-top: 0;}
    .di-pt-lg-xxs {padding-top: var(--spacing-xxs);}
    .di-pt-lg-xs  {padding-top: var(--spacing-xs );}
    .di-pt-lg-s   {padding-top: var(--spacing-s  );}
    .di-pt-lg-m   {padding-top: var(--spacing-m  );}
    .di-pt-lg-l   {padding-top: var(--spacing-l  );}
    .di-pt-lg-xl  {padding-top: var(--spacing-xl );}
    .di-pt-lg-xxl {padding-top: var(--spacing-xxl);}

    .di-pr-lg-0   {padding-right: 0;}
    .di-pr-lg-xxs {padding-right: var(--spacing-xxs);}
    .di-pr-lg-xs  {padding-right: var(--spacing-xs );}
    .di-pr-lg-s   {padding-right: var(--spacing-s  );}
    .di-pr-lg-m   {padding-right: var(--spacing-m  );}
    .di-pr-lg-l   {padding-right: var(--spacing-l  );}
    .di-pr-lg-xl  {padding-right: var(--spacing-xl );}
    .di-pr-lg-xxl {padding-right: var(--spacing-xxl);}

    .di-pb-lg-0   {padding-bottom: 0;}
    .di-pb-lg-xxs {padding-bottom: var(--spacing-xxs);}
    .di-pb-lg-xs  {padding-bottom: var(--spacing-xs );}
    .di-pb-lg-s   {padding-bottom: var(--spacing-s  );}
    .di-pb-lg-m   {padding-bottom: var(--spacing-m  );}
    .di-pb-lg-l   {padding-bottom: var(--spacing-l  );}
    .di-pb-lg-xl  {padding-bottom: var(--spacing-xl );}
    .di-pb-lg-xxl {padding-bottom: var(--spacing-xxl);}

    .di-pl-lg-0   {padding-left: 0;}
    .di-pl-lg-xxs {padding-left: var(--spacing-xxs);}
    .di-pl-lg-xs  {padding-left: var(--spacing-xs );}
    .di-pl-lg-s   {padding-left: var(--spacing-s  );}
    .di-pl-lg-m   {padding-left: var(--spacing-m  );}
    .di-pl-lg-l   {padding-left: var(--spacing-l  );}
    .di-pl-lg-xl  {padding-left: var(--spacing-xl );}
    .di-pl-lg-xxl {padding-left: var(--spacing-xxl);}

    .di-lg-shadow-m {box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);}

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

    .di-lg-static   {position: static !important;}
    .di-lg-absolute {position: absolute !important;}
    .di-lg-relative {position: relative !important;}

    .di-lg-vertical-center-2-grid {
        display: grid !important;
        grid-template-columns: auto auto;
        align-items: center;
    }

    .di-lg-show {display: initial !important;}
    .di-lg-inline-block {display: inline-block !important;}

    .di-hover-card {
        transition-property: box-shadow;
        transition-duration: 0.1s;
        border-radius: var(--spacing-xxs);
    }
    .di-hover-card:hover {
        box-shadow: 2px 4px 30px 0 rgba(3, 29, 35, 0.21);
    }
    a.di-hover-card:hover {
        text-decoration: none !important;
    }

}

.codeblock pre > code {
    color: #839496 !important;
    background-color: #002b36;
    display: block;
}

.codeblock code .cr {
    color: #93a1a1 !important;
    font-weight: bold;
}

.codeblock pre {
    background-color: none;
    padding: 0;
    overflow: visible;
}

.codeblock .source-code {
    background-color: #002b36;
    padding:  1rem;
    border-radius: 6px;
    overflow: auto;
}

/* MENU */

.menu {
    padding-left: 0;
    padding-right: 0;
}

.menu .navbar-brand {margin-right:0;}
.menu .nav-link {
    padding: var(--spacing-xs) 0 0 0 !important;

    letter-spacing: var(--letter-spacing-text) !important;
    font-weight: semibold !important;
    font-size: var(--font-size-xs) !important;
    color: var(--color-black) !important;
    opacity: var(--opacity-light);
    transition-property: opacity;
    transition-duration: 0.1;
}
.menu .nav-link:hover {
    opacity: 1;
}
@media screen and (max-width: 991px) {
    .menu .nav-link {
	padding: var(--spacing-s) 0 !important;
    }
}
.menu .nav-item {
    padding: 0 calc(var(--spacing-l) / 2) !important;
}
.menu .ihp-logo {
    width: 64px;
    margin-right: var(--spacing-l);
}

.menu .dropdown-menu {
    background-color: var(--contrast);
    font-size: var(--font-size-m);
    width: max-content;
}

.menu .dropdown-item {
    color: var(--pure-white);
    transition-property: background-color;
    transition-duration: 0.1s;

    letter-spacing: var(--letter-spacing-text) !important;
    font-weight: normal !important;
    font-size: var(--font-size-xs) !important;
}
.menu .dropdown-item:hover {
    background-color: var(--contrast-secondary);
}
.menu .dropdown-divider {
    border-top-color: var(--pure-white);
    width: 80%;
    margin-left: 10%;
}

.menu .dropdown-toggle::after {
    content: "";
    margin: 0;
    border: none;
    vertical-align: initial;
}

.menu .di-btn {
    display: inline;
}

/* FOOTER */

.footer {
    background-color: var(--off-white);
    color: var(--off-black);
}
.footer > div > p {
    margin-bottom: var(--spacing-s);
}
.footer > div > p:first-child {
    font-weight: bold;
}
.footer > div > p:not(:first-child) {
    opacity: var(--opacity-light);
}
.footer > div > p:last-child {
    margin-bottom: 0;
}
.footer .ihp-icon {
    width: 50px;
}
.footer a {
    color: inherit;
}

.deployed-w-ihp-cloud {
    width: 82px;
}
.startpage-documentation-link:hover {
    text-decoration: none;
}

#testimonials {
    overflow-x: scroll;
}

#testimonials > div {
    display: flex;
    width: fit-content;
    width: -moz-fit-content;
    max-width: initial;
}

#testimonials > div > a {
    display: inline-block;
    border: 1px solid #dee2e6;
    border-radius: var(--spacing-s);
    padding: var(--spacing-s);
    text-decoration: none;
    width: calc((100vw - var(--di-grid-padding) * 2) / var(--columns) * 5);

    height: -moz-fit-content;
    height: fit-content;

    letter-spacing: var(--letter-spacing-text);
    font-weight: normal;
    font-size: var(--font-size-xs);
    color: var(--color-black);

    margin-right: var(--spacing-m);
    margin-bottom: var(--spacing-l);
}
#testimonials a:first-child {
    margin-left: calc((100vw - var(--di-grid-padding) * 2) / var(--columns) * 0.5);
}
#testimonials a:last-child {
    margin-right: calc((100vw - var(--di-grid-padding) * 2) / var(--columns) * 0.5 + var(--di-grid-padding));
}

#testimonials a > div:nth-child(2) {
    margin-top: var(--spacing-s);
    display: flex;
}

#testimonials a img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-right: var(--spacing-s);
}

#testimonials a > div:nth-child(2) > div > div:first-child {
    font-weight: bold;
}

@media screen and (min-width: 1170px) {
    #testimonials > div > a {
	width: calc(var(--inner-row-width) / var(--columns) * 7);
	margin-right: calc(var(--inner-row-width) / var(--columns) * 1.5);
    }
    #testimonials a:first-child {
	margin-left: 0;
    }
    #testimonials a:last-child {
	margin-right: calc((100vw - var(--inner-row-width)) / 2);
    }
}

.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 62.5%;
    box-shadow: 0 37px 43px 7px rgba(0, 0, 0, 0.15);
}

.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 3px;
}
#showcase .showcase-project {
    margin-right: 1rem;
    font-size: 14px;
}

#showcase .showcase-project h2 {
    font-size: 1rem;
    font-weight: bold;
}

#showcase .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

#showcase .showcase-project img {
    display: block;
    margin-bottom: 1rem;
    border-radius: 4px;
}


#showcase .project {
    margin-bottom: 2rem;
}

#showcase .project img {
    width: 100%;
    border-radius: 4px;
    margin-bottom: 1rem;
}

#showcase .project .description {
    border-radius: 12px;
    margin-left: 12px;
    margin-right: 12px;
}.pricing .plan {
    background-color: white;
    padding: 1rem;
    box-shadow: 0 1px 2px 1px rgb(7 54 66 / 0.2);
    border-radius: 6px;
    margin-right: 1rem;
    text-align: center;
    margin-bottom: 2rem;
    max-width: 420px;
    padding-top: 2rem;
    padding-bottom: 2rem;
    margin-left: auto;
    margin-right: auto;
    min-height: 680px;
    display: flex;
    flex-direction: column;
}

.pricing .plan.recommended {
    box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.11);
    background-image: linear-gradient(32deg, #044d60 9%, #0082a3 96%);
    color:  #fff;
}

.pricing .plan.recommended .btn.btn-light {
    color: #267587;
}

.pricing .plan-footer {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.pricing .plan h2 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 0;
}

.pricing .btn-price {
    width: 100%;
    display: block;
}

.pricing .plan-description {
    min-height: 66px;
    margin-bottom: 16px;
}

.pricing .plan-price {
    font-size:  48px;
    font-weight: bold;
}

.pricing .feature {
    margin-bottom: 1rem;
    font-size: 16px;
    transition: all 0.2s;
}

.pricing .plan.recommended h2, .pricing .plan.recommended .plan-description, .pricing .plan.recommended .plan-description-footer {
    color: #fff;
}

.pricing table thead th, .pricing table td {
    text-align: center;
}

.pricing table .feature-section th {
    font-weight: bold;
    color: #0d0e0f;
    font-size: 14px;
    padding-top: 1.25rem;
}

.pricing table tr.strip th, .pricing table tr.strip td {
    background-color: #f2f2f2;
}

.pricing h2.faq-headline {
    font-size: 26px;
    font-weight: 800;
    color: #073642;
    margin-bottom: 1rem;
}

.pricing .faq {
    display: grid;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    grid-auto-rows: minmax(100px, auto);
    grid-column: 2 / 4;
    grid-row: 1 / 3;
}

.pricing .faq .faq-item {
    color: hsla(192, 81%, 26%, 0.8);
    font-size: 18px;
    box-shadow: 0 1px 2px 1px rgb(7 54 66 / 0.2);
    background-color: white;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 6px;
    padding:  1rem;
    width:  100%;
}

.pricing .faq .faq-item h2 {
    font-size: 18px;
    font-weight: 800;
    color: #073642;
    text-align: left;
}

.pricing .quotes {
    display: grid;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    grid-auto-rows: minmax(100px, auto);
    grid-column: 2 / 4;
    grid-row: 1 / 3;
}

.pricing .quotes .blockquote {
    background-color: transparent;
    box-shadow: none;
}


.payment-options {
    font-size: 14px;
    color: hsla(192, 81%, 26%, 0.6);
    transition: all 0.1s;
    display: flex;
    align-items: center;
    margin-bottom: 48px;
    justify-content: center;
    user-select: none;
    -webkit-user-select:  none;
}

.yearly-payment-option.active, .currency-option.active {
    color: hsla(192, 81%, 26%, 1);
}

.pricing .plan-description-footer {
    font-weight: 400;
    color: hsla(192, 81%, 26%, 0.8);
    font-size: 16px;
    margin-bottom: 1rem;
}

.plan-features {
    font-weight: 400;
    color: hsla(192, 81%, 26%, 0.8);
    font-size: 13px;
}

.pricing .plan-parent {
    color: #0d0e0f;
    opacity: 0.65;
    font-weight: 500;
    font-size: 12px;
}

.pricing .plan.recommended .plan-parent {
    color:  white;
    opacity: 0.72;
}

.pricing table {
    color: hsla(192, 81%, 26%, 0.8);
    font-size: 12px;
    background-color: white;
    border-radius: 6px;
}

.pricing table td {
    text-align: center;
}

.pricing table thead tr {
    background-color: #1b4f5c;;
    color:  white;
    overflow: hidden;
    font-size: 16px;
}

.pricing table thead tr th:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.pricing table thead tr th:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.pricing table thead tr th {
    vertical-align: middle;
}

.pricing table tbody td, .pricing table tbody th {
    padding-top: 4px;
    padding-bottom: 4px;
    font-weight: 500;
}

.pricing .table-title {
    text-align: left;
}

.pricing .commercial-use {
    margin: 114px 22px 0 23px;
    padding: 8px 25px 13px 26px;
    border-radius: 7px;
    border: solid 1px currentColor;
}

.pricing .commercial-use .feature-name {
    font-size: 14px;
    font-weight: 600;
    display: block;
}

.pricing .commercial-use .feature-description {
      font-size: 10px;
      font-weight: normal;
}


.newsletter-signup {
    border-radius: 10px;
    background-image: linear-gradient(78deg, #044d60 1%, #0082a3 100%);
    
    padding-top: 70px;
    padding-bottom: 70px;
    padding-left: 40px;
    padding-right: 40px;

    margin-bottom: 100px;

    color:  white;
}

.newsletter-signup h1 {
    font-size: 26px;
    color:  white;
    font-weight: bold;
}

.newsletter-signup p {
    font-size: 16px;
}

.newsletter-signup .form-control, .newsletter-signup .form-control:-webkit-autofill {
    background-color: transparent;
    border: 0;
    color:  white;
}

.newsletter-signup form {
    border:  2px solid white;
    border-radius: 4px;
    width: 100%;
}

.newsletter-signup input::placeholder {
    opacity: 0.7;
    color:  #fff;
}

.newsletter-signup .btn.btn-light {
    color: #007b9b
}

.newsletter-signup input:-webkit-autofill,
.newsletter-signup input:-webkit-autofill:hover, 
.newsletter-signup input:-webkit-autofill:focus, 
.newsletter-signup input:-webkit-autofill:active
{
  transition: background-color 5000s ease-in-out 0s;
  color: white !important;
}

.newsletter-signup input:-webkit-autofill {
    -webkit-text-fill-color: white !important;
}

.accordion {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.accordion h2 button {
    font-size:  16px;
    font-weight: 500;
    color: #0d0e0f;
    text-decoration: none !important;
}

.accordion .card {
    background-color: transparent;
    border:  0;
    transition: all 0.1s;
}

.accordion .card:hover {
    background-color: rgba(38, 117, 135, 0.4);
}
.accordion h2 button:hover {
    color: #0d0e0f;
}

.accordion .card .card-header {
    background-color: transparent;
}

@media screen and (min-width: 1170px) {
    .grid-lg-2 {
        grid-template-columns: auto auto;
    }
}

.btn.btn-github {
    background-color: rgb(36, 41, 46);
    position: relative;
}

.btn.btn-github:hover {
    background-color: rgba(36, 41, 46, 0.8);
}

.btn-github img {
    height: 1.25rem;
    position: absolute;
    left: 1rem;
    top: 14px;
}

.auth-provider-secondary {
    opacity: 0.75;
    font-weight: 600;
}

.auth-provider-secondary:hover {
    opacity: 1;
}.hub-app {
    width: 72px;
    height: 72px;
    display: block;
}
.hub-app img {
    width: 100%;
    height: 100%;
}

.hub-app#twitter img {
    border-radius: 22.5%;
    padding: 7px;
}


.onboarding-status {font-weight: 500;}
.onboarding-status .step-finished { color: #28a745; }
.onboarding-status .step-finished .step-description {
    text-decoration: line-through;
    opacity: 0.8;
}




#hub-community h2 {
    margin-top: 2rem;
    font-size: 1rem;
    font-weight: 700;
}.thread, .new-comment, .comment, .topic {
    max-width: 800px;
}

.thread {
    overflow: hidden;
}

.thread .thread-title, .topic .topic-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #073642;
    line-height: 1;
    margin-bottom: 0.5rem;
    display: block;
    font-weight: 600;
}

.thread .thread-body {
    color: hsla(192, 81%, 14%, 85%);
    display: block;
    margin-bottom: 0.5rem;
}

.thread .thread-body img, .comment .comment-body img {
    max-width: 100%;
}

.thread .thread-content {
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgb(7 54 66 / 0.2);
    border-radius: 8px;
    padding: 1rem;
}

.topic .topic-description {
    color: hsla(192, 81%, 14%, 85%);
    display: block;
}


.thread .thread-created-at, .comment .comment-meta, .comment .comment-meta a {
    font-size: 0.8rem;
    color: #839496;
}

.user-picture {
    width: 64px;
    height: 64px;
    border-radius: 100%;
}

.thread .user-picture {
    display: block;
    margin-bottom: 0.5rem;
}

.threads .thread {
    background-color: #fff;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 6px;
    margin-bottom: 36px;
    box-shadow: 2px 4px 12px 0 rgba(0, 0, 0, 0.1);
}

.threads .thread .thread-body img {
    width: 100%;
}

.threads .thread h1, .threads .thread h2, .threads .thread h3, .threads .thread h4, .threads .thread h5 {
    font-size: 1rem;
    font-weight: bold;
}

.community-layout textarea {
    min-height: 8rem;
}

#users-new {
    max-width: 600px;
}

.comment .comment-body {
    background-color: hsla(192, 81%, 5%, 0.04);
    padding: 1rem;
    border-radius: 8px;
}

.comment {
    margin-bottom: 3rem;
}

.comment .comment-meta, .comment .comment-meta a {
    margin-bottom: 0.25rem;
    font-size: 0.6rem;
}

.comment .comment-meta a {
    margin-left: 0.5rem;
}

.user-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: hsla(192, 81%, 26%, 0.8);
}

.user-col .user-picture {
    width: 32px;
    height: 32px;
}

.topic {
    margin-bottom: 2rem;
}

.topic .topic-meta {
    font-size: 0.8rem;
    color: hsla(192, 81%, 14%, 67%);
}

pre {
    background-color: rgba(0, 43, 54, 0.11);
    color: #002b36;
    padding: 1rem;
    border-radius: 3px;
}

code .cr {
  color: #073642 !important;
  font-weight: bold;
}

code.language-haskell .kw, code.language-sql .kw, code.language-html .kw { color: #859900; }
code.language-haskell .st { color: #2aa198; }

#ihp-cloud-logo {
    margin-top: 2rem;
    display: block;
}
#ihp-cloud-logo img {
    width: 200px;
}

.text-muted {
    color: hsla(192, 81%, 26%, 0.8) !important;
}


.btn.btn-primary {
    background-color: hsla(192, 81%, 26%, 1);
    color: hsla(196, 13%, 98%, 1);
    border: 1px solid hsla(192, 81%, 19%, 0.1);
    font-weight: 500;
}

.btn.btn-primary:active {
    background-color: hsla(192, 81%, 26%, 0.9) !important;
    color: hsla(196, 13%, 98%, 1) !important;
    border: 1px solid hsla(192, 81%, 19%, 0.1) !important;
}

.btn.btn-primary:hover {
    background-color: hsla(192, 81%, 26%, 0.8);
}

.btn.btn-secondary {
    background-color: transparent;
    color: hsla(192, 81%, 19%, 0.8);
    border: 1px solid hsla(192, 81%, 19%, 0.8);
    font-weight: 500;
}

.btn.btn-secondary:active {
    background-color: transparent;
    color: hsla(192, 81%, 19%, 0.8) !important;
    border: 1px solid hsla(192, 81%, 19%, 0.8) !important;
}

.btn.btn-secondary:hover {
    background-color: hsla(192, 81%, 19%, 0.1);
    color: hsla(192, 81%, 19%, 1);
}

.community-layout .nav-link.nav-title {
    color: #073642;
    font-weight: 600;
}

.community-layout .nav-link {
    padding:  0.25rem 1rem;
}

.community-welcome {
    background-color: white;
    box-shadow:  0 1px 2px 0 rgb(7 54 66 / 20%);
    border-radius: 6px;

    background:  linear-gradient(90deg, hsl(192 82% 25% / 1) 7%, hsl(192 80% 39% / 1) 53%, hsl(192 82% 24% / 1) 100%) !important;
    padding: 2rem;
    margin-bottom: 1rem;
}

.community-welcome h1, .community-welcome p {
    color: white;
}

.community-welcome p {
    font-size: 18px;
}

.thread-author {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.thread-author img {
    margin-right: 1rem;
    width:  42px;
    height: 42px;
    margin-bottom: 0 !important;
}

.thread-author .user-name {
    margin-right: 1rem;
    font-weight: bold;
}

.thread-author .user-name > a {
    display: flex;
    align-items: center;
}

.badge-pro, .badge-business {
    background-color: hsla(192, 81%, 26%, 0.8) !important;
    color: #fff;
}

.community-layout pre > code {
    background-color: transparent;
}

#forum-nav .nav-link {
    border-radius: 2px;
    color: #0d0e0f;
}

#forum-nav .nav-link.active {
    background-color: rgb(27 79 92 / 24%);
    border-left:  4px solid #1b4f5c;
    color:  #063642;
}

.community-sidebar-container {
    border-radius: var(--spacing-xs);
    background-color: var(--pure-white);
    padding: 20px 60px 15px 21px;
    padding: var(--spacing-m);
    box-shadow: 2px 4px 10px 0 rgba(0, 0, 0, 0.1);
}

.old-layout .community-sidebar-container.links a {
    color: #0d0e0f;
    opacity: 0.64;
    display: block;
    margin: 10px 48px 10px 0;
}

.btn-new-thread {
    background-color: #fff;
    box-shadow: 2px 4px 12px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 36px;
    color: rgb(13 14 15 / 50%);
    font-weight: 500;
    text-align: left;
    padding-top:  12px;
    padding-bottom: 12px;
    padding-left: 16px;
    position: relative;
}

.btn-new-thread .plus {
    background-color: #1b4f5c;
    position: absolute;
    right: 16px;
    top:  10px;
    width: 30px;
    height: 30px;
    color: white;
    border-radius: 5px;
    text-align: center;
    line-height: 30px;
}

.thread-topic {
    border: solid 1px rgba(120, 170, 4, 0.34);
    background-color: rgba(120, 170, 4, 0.26);
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.32px;
    color: #78aa04;
    transition: all 0.1s;
}

.thread-topic:hover {
    text-decoration: none;
    color: hsl(78deg 95% 20%);
}

.btn.btn-add-response {
    padding: 5px 13px 6px 14px;
    border-radius: 4px;
    background-color: #f3f3f3;
    border:  0;
    color: rgb(13 14 15 / 72%);
    font-size: 12px;
}

.btn.btn-add-response svg {
    height: 1rem;
    margin-right: 8px;
}

.btn.btn-add-response:active {
    background-color: #f3f3f3 !important;
}
.events .event {
    background-color: #fff;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 6px;
    margin-bottom: 36px;
    box-shadow: 2px 4px 12px 0 rgba(0, 0, 0, 0.1);
    display: flex;
    max-height: 12rem;
}

.event-thumbnail {
    width: 10rem;
    height: 10rem;
    background-size: cover;
    background-position: center;
}

.events .event .event-text {
    display: flex;
    flex-direction: column;
    width: min-content;
    flex-grow: 1;
}

.events .event .event-text .event-title {
    flex-grow: 1;
    font-size: x-large;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.events .event .event-text .event-description {
    color: #0d0e0f;
    opacity: 0.64;
    flex-grow: 1;
    overflow: hidden;
    position: relative;
}
.events .event .event-text .event-description::after {
    display: block;
    content: "";
    box-shadow: 0 -2rem 1rem -1.5rem white inset;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
}

.events .event .event-date {
    min-width: max-content;
    text-align: right;
    font-size: large;
    color: #0d0e0f;
    opacity: 0.8;
}

.event-type-badge {
    border: solid 1px rgba(120, 170, 4, 0.34);
    background-color: rgba(120, 170, 4, 0.26);
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.32px;
    color: #78aa04;
    transition: all 0.1s;
}

.event-type-badge:hover {
    text-decoration: none;
    color: hsl(78deg 95% 20%);
}

.event .rounded {
    border-radius: 1rem !important;
}

.event .opaque {
    opacity: 1;
}

.event .o-64 {
    opacity: 0.64;
}

.event .back-link {
    margin-bottom: 2rem;
    display: inline-block;
}

.event-header {
    width: 100%;
}

.event .h1 {
    font-weight: bold;
    font-size: x-large;
    color: #0d0e0f;
    margin-bottom: 2rem;
}

.event .h2 {
    font-weight: bold;
    font-size: large;
    color: #0d0e0f;
    margin-top: 1.5rem;
}

.event .h3 {
    font-weight: bold;
    font-size: medium;
    color: #0d0e0f;
    margin-top: 1.5rem;
}

.event p {
    color: #0d0e0f;
    opacity: 0.64;
}

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

.event .speakers .col-md-4 {
    padding: 0.5rem;
    margin-left: auto;
    margin-right: auto;
}

.speaker-image {
    width: 5rem;
    height: 5rem;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
}

.event .speakers .name {
    color: #0d0e0f;
    font-weight: bold;
}

.event .speakers .title {
    color: #0d0e0f;
    opacity: 0.64;
}

.event .signup-form {
    background-color: #1a4e5b;
    text-align: center;
    color: white;
    padding: 2rem;
}

.event .signup-form h2 {
    color: white;
}

.event .signup-form label {
    width: 100%;
    position: relative;
    margin: 0.5rem 0;
}

.event .signup-form .centered {
    margin-left: auto;
    margin-right: auto;
}

.event .signup-form input.box {
    background: none;
    border: 2px solid white;
    border-radius: 0.5rem;
    padding: 0.5rem;
    color: white;
    width: 100%;
}

.event .call-to-action {
    text-align: center;
    max-width: 25rem;
    margin-left: auto;
    margin-right: auto;
}

.event .call-to-action h2 {
    font-weight: bold;
}

.event .text-small {
    font-size: small;
}

.event .call-to-action .contact-email {
    font-size: x-large;
    font-weight: bold;
    display: block;
}
.feature-request {
    background-color: #fff;
    box-shadow: 2px 4px 12px 0 rgb(0 0 0 / 10%);
    padding: 1rem;
    border-radius: 6px;
}

.feature-request .is-upvoted {
    color: hsla(192, 81%, 26%, 0.8);
}

.feature-request h5 a {
    color: #073642;
}

.feature-request.is-completed {
    opacity: 0.6;
}.case-study {
    color: white;
    border-radius: 6px;
}


.case-study a {
    color: white;
}

.case-study h2 {
    color: white; 
    font-size: 26px;
    font-weight: bold;
}

.case-study p {
    font-size: 16px;
}

.case-study .btn-outline-light {
    border: 2px solid white;
}@import "./layout.css";
@import "./startpage.css";
@import "./showcase.css";
@import "./pricing.css";
@import "./sessions.css";
@import "./hub.css";
@import "./community.css";
@import "./events.css";
@import "./feature-requests.css";
@import "./case-studies.css";

.quote-link {
    display: block;
    margin-bottom: 1rem;
}

.quote-link img {
    width: 66%;
}

.post-body {
    font-size: 1.125rem;
    margin-bottom: 10rem;
}

.event-header {
    background: linear-gradient(90deg, hsl(192 82% 25% / 1) 7%, hsl(192 80% 39% / 1) 53%, hsl(192 82% 24% / 1) 100%) !important;
    font-size: 16px;
}

#post {
    max-width: 800px;
}

#post p {
    line-height: 32px;
}

#post h1 {
    font-weight: 800;
}

#post h2 {
    font-weight: bold;
}

#blog .post {
    color:  #073642;
}

#blog .post small {
    color: hsla(192, 81%, 26%, 0.8);
    font-weight: 600;
}

#blog .post .title {
    display: block;
    font-size:  24px;
    font-weight: 700;
}

#blog .post .user-picture {
    margin-top:  12px;
    width: 32px;
    height: 32px;
}

.code-change {
    background-color: #01313f;
    color:  #d0edf7;
    border-radius: 4px;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.code-diff div {
    white-space: pre;
}

.code-diff .line.remove {

}

.code-diff .line.add {
    background-color:  rgb(240, 255, 244);
    color:  rgb(34, 134, 58);
}

.code-diff .line {
    padding-left:  1rem;
    padding-right:  1rem;
}

.feature {
    margin-bottom: 32px;
}

.feature h2 {
    font-weight: bold;
    font-size: 24px;
}