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;
}