main, .main {
    background-color:#f1f1f0;
}
  
#dannairousel {
    /* width: 900px; */
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    flex-direction: row !important;
    scroll-behavior: smooth;
    scroll-snap-type: both mandatory;
    overscroll-behavior-x: contain;

    margin-top: -1em;
    /* height: 0px;
    visibility: hidden; */
    /* scroll-snap-type: none; */
}
.dannairousel-unlock {
    overflow-x: scroll  !important;
    scroll-snap-type:  both mandatory  !important;
}
.dannairousel-lock {
    overflow-x: scroll  !important;
    scroll-snap-type: none  !important;
}

.dannairousel-item {
    flex: 0 0 400px;
    height: 230px;
    cursor: pointer;

    /* scroll-snap-align: center; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 5px;
    padding: 1rem;
    margin: 1rem;
    margin-bottom: 1rem;
    background-color: var(--overlay-background-color);
    width: calc(50% - 2rem);
    color: var(--overlay-font-color);
    box-sizing: border-box;
    transition-duration: .15s;
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}
/* For WebKit browsers (Chrome, Safari) */
/* Customize the track */
::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Customize the handle or thumb */
  ::-webkit-scrollbar-thumb {
    background-color: rgba(76, 175, 80, 0.5); /* Use rgba for transparency */
    border-radius: 5px; /* Round the corners */
  }
  
  /* Customize the track when the handle is being dragged */
  ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(76, 175, 80, 0.7); /* Change the color on hover with transparency */
  }
  
  /* Customize the track */
  ::-webkit-scrollbar-track {
    background-color: transparent; /* Use transparent for the track background */
  }
  
  /* For Firefox */
  /* Customize the track */
  ::-moz-scrollbar {
    width: 10px;
  }
  
  /* Customize the handle or thumb */
  ::-moz-scrollbar-thumb {
    background-color: rgba(76, 175, 80, 0.5);
    border-radius: 5px;
  }
  
  /* Customize the track when the handle is being dragged */
  ::-moz-scrollbar-thumb:hover {
    background-color: rgba(76, 175, 80, 0.7);
  }
  
  /* Customize the track */
  ::-moz-scrollbar-track {
    background-color: transparent;
  }
  
@font-face {
    font-family: JetBrains Mono;
    font-style: normal;
    font-weight: 200;
    font-display: block;
    src: url(/fonts/JetBrainsMono-ExtraLight.woff2) format("woff2");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: JetBrains Mono;
    font-style: normal;
    font-weight: 200;
    font-display: block;
    src: url(/fonts/JetBrainsMono-ExtraLight.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: JetBrains Mono;
    font-style: normal;
    font-weight: 800;
    font-display: block;
    src: url(/fonts/JetBrainsMono-ExtraBold.woff2) format("woff2");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: JetBrains Mono;
    font-style: normal;
    font-weight: 800;
    font-display: block;
    src: url(/fonts/JetBrainsMono-ExtraBold.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

html {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth
}



h1,
h2,
h3,
h4,
h5 {
    font-family: var(--title-font-family);
    color: var(--title-color);
    scroll-margin-top: 2rem
}

h2.ingress {
    font-size: 1.15rem;
    font-weight: 300;
    font-family: var(--font-family);
    color: var(--font-color)
}

a {
    color: var(--link-color) !important;
    text-decoration: none
}

a:hover {
    color: var(--dark-blue)
}

main,

.main {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding-left: 3rem;
    padding-right: 3rem;
    box-sizing: border-box;
    height: 100dvh;
    /* margin-right: 17px; */
}
footer {
    position: absolute;
    bottom: 0px;
    position: relative;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}
/* @media (min-width: 1172px) {

nav {
    margin: 0 -200px;
}
} */
html {
    overflow-y: scroll;
  }
._footer_cont64{
    display: inline-block;
    margin-top: 4rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
    border-top: 1px solid var(--overlay-background-color)
}
/* @media (min-width: 1024px) {
    nav {
        margin: 0 -100px;
    }

} */
@media (min-width: 1624px) {
    nav {
        margin: 0 -100px;
    }
    main,
    /* footer, */
    .main {
        width: 80vw
    }
}
article {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding-left: 3rem;
    padding-right: 3rem;
    box-sizing: border-box
}

@media (min-width: 1024px) {
    article {
        width: 720px
    }
}

p {
    line-height: 1.4
}

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

article img {
    border-radius: 5px;
    margin: 2rem auto;
    box-sizing: border-box;
    display: block
}

article p.imageText {
    font-size: .8rem;
    text-align: center;
    font-style: italic;
    margin-bottom: 4rem
}

article p.metaText {
    font-size: .8rem;
    font-style: italic;
    margin-bottom: 4rem
}

article blockquote {
    font-style: italic;
    line-height: 1.4;
    border-left: 1px solid var(--font-color);
    padding-left: 1rem;
    margin-left: 2rem;
    margin-top: 2rem;
    margin-bottom: 2rem
}

.breadcrumbs {
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 0;
    margin-bottom: 3rem;
    padding-left: 0
}

.breadcrumbs li {
    display: flex
}

.breadcrumbs li .chevron {
    background-image: url(/images/chevron-right-solid.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 30px;
    height: 14px;
    margin-top: 3px
}

.breadcrumbs li:last-child {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block
}

:root {
    --black: #101010;
    --dark-grey: #252525;
    --grey: #404040;
    --silver: #bababa;
    --almost-white: #eaeaea;
    --white: #fefefe;
    --light-blue: #277cdd;
    --blue: #1a6ece;
    --dark-blue: #003f87;
    --red: #d60e30;
    --light-red: #f43f5e;
    --orange: #984d10;
    --light-orange: #fb923c;
    --purple: #9936fc;
    --light-purple: #c084fc;
    --green: #12873d;
    --light-green: #16a34a;
    --light-yellow: #ffda8a;
    --green-100: #dcfce7;
    --green-400: #4ade80;
    --green-700: #15803d;
    --green-950: #052e16;
    --red-100: #fee2e2;
    --red-400: #f87171;
    --red-700: #b91c1c;
    --red-950: #450a0a;
    --purple-100: #f3e8ff;
    --purple-400: #c084fc;
    --purple-700: #7e22ce;
    --purple-950: #3b0764;
    --orange-100: #ffedd5;
    --orange-400: #fb923c;
    --orange-700: #c2410c;
    --orange-950: #431407;
    --neutral-100: #f5f5f5;
    --neutral-300: #d4d4d4;
    --neutral-400: #a3a3a3;
    --neutral-700: #404040;
    --neutral-800: #262626;
    --neutral-950: #0a0a0a;
    --background-color: #f1f1f0;
    --font-color: var(--neutral-700);
    --link-color: var(--blue);
    --title-color: var(--black);
    --overlay-background-color: var(--neutral-300);
    --overlay-dark-background-color: var(--neutral-400);
    --overlay-font-color: var(--neutral-800);
    --title-font-family: "JetBrains Mono", "Helvetica", "Arial", "sans-serif";
    --font-family: "JetBrains Mono", "Helvetica", "Arial", "sans-serif"
}

/* @media (prefers-color-scheme: dark) {
    :root {
        --background-color: var(--neutral-950);
        --font-color: var(--neutral-400);
        --link-color: var(--light-blue);
        --title-color: var(--neutral-100);
        --overlay-background-color: var(--neutral-800);
        --overlay-dark-background-color: var(--neutral-700);
        --overlay-font-color: var(--neutral-400)
    }
} */

._footer_col64 {
    margin-top: 4rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
    border-top: 1px solid var(--overlay-background-color)
}

._footer_col64 ._bottomFeederContainer_col70 {
    margin: 0 auto;
    width: 48px;
    text-align: center
}

._footer_col64 ._bottomFeederContainer_col70 ._bottomFeederLink_col75 {
    display: inline-block;
    margin-top: 3rem
}

._footer_col64 ._bottomFeederContainer_col70 ._bottomFeederLink_col75>svg>path {
    fill: var(--silver)
}

._responsiveContainer_col64 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 2rem;
}

@media (max-width: 600px) {
    ._responsiveContainer_col64 {
        flex-direction: column
    }
    #dannairousel {
        width: 130%;
    } 
}

._productInformation_col1 {
    display: flex;
    flex-direction: column;
    /* width: 300px; */
    margin-top: 1rem;
}

._informationRow_col7 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* width: 300px; */
    margin-bottom: 1rem
}

._informationRow_col7 ._informationRowTitle_col14 {
    width: 40%;
    font-weight: 700
}

._informationRow_col7 ._informationRowValue_col18 {
    /* width: 60%; */
    text-align: right;
    text-transform: capitalize;
}

._informationRow_col7 ._informationRowValue_col18._noFormat_col23 {
    text-transform: none
}
.postTitle {
    display: block;
    font-size: 3.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
}

/* @media (prefers-color-scheme: dark) {
    :root {
        --background-color: var(--neutral-950);
        --font-color: var(--neutral-400);
        --link-color: var(--light-blue);
        --title-color: var(--neutral-100);
        --overlay-background-color: var(--neutral-800);
        --overlay-dark-background-color: var(--neutral-700);
        --overlay-font-color: var(--neutral-400)
    }
} */

._fadeTheShiza_50 {
    animation: _fadeIn_1 ease .05s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards
}


._fadeTheShiza_100 {
    animation: _fadeIn_1 ease .1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards
}


._fadeTheShiza_200 {
    animation: _fadeIn_1 ease .2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards
}

._fadeTheShiza_300 {
    animation: _fadeIn_1 ease .3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards
}

._fadeTheShiza_400 {
    animation: _fadeIn_1 ease .4s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards
}
/* This class is toggled on the target line/element */
.highlight-active {
    background-color: yellow; /* or your highlight color */
    transition: background-color 0.3s ease;
  }
._fadeTheShiza_500 {
    animation: _fadeIn_1 ease .5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards
}
.jumpto-link {
    display: inline-block; /* Ensures the height is applied */
    height: 140px;
    line-height: 140px; /* Centers text vertically */
    margin-top: -140px;
    text-decoration: none;
  }
canvas {
    animation: _fadeInVis_1 ease 1.5s;
    position: relative;

}
@keyframes _fadeInVis_1 {
    0% {
        visibility: hidden
    }

    to {
        opacity: 1;
        visibility: visible;
    }
}
@keyframes _fadeIn_1 {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
        
    }
}
a._productCard_col64.dannairousel-item {
    overflow: hidden;
}
._productCard_col64 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 5px;
    padding: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    background-color: var(--overlay-background-color);
    width: calc(50% - 2rem);
    color: inherit !important; 
    box-sizing: border-box;
    transition-duration: .15s;
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);

}
._productCard_col64_blank {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 5px;
    padding: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    width: calc(50% - 2rem);
    color: rgba(255, 255, 255, 0);
    box-sizing: border-box;
    transition-duration: .15s;
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}
@media (max-width: 600px) {
    ._productCard_col64 {
        width: 100%;
        margin-left: 0
    }
}


._productCard_col64:hover {
    color: var(--overlay-font-color);
    transform: translate(0) rotate(0) skew(0) skewY(0) scaleX(1.05) scaleY(1.05)
}

._productCard_col64:hover ._title_col90 {
    color: var(--link-color);
    transition: all .2s
}

._productCard_col64:hover ._readMore_col94 ._readMoreArrow_col94 {
    transform: translate(.75rem);
    opacity: 1;
    transition: all .5s
}

._productCard_col64 ._title_col90 {
    line-height: 1.1;
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 600;
}

._productCard_col64 ._description_col103 {
    margin-bottom: 1rem
}

._productCard_col64 ._readMore_col94 {
    display: flex;
    align-items: center;
    font-weight: 700;
    font-family: var(--title-font-family);
    letter-spacing: .5px;
    margin-bottom: 0;
    padding-bottom: 0
}

._productCard_col64 ._readMore_col94 ._readMoreArrow_col94 {
    margin-left: .5rem;
    opacity: 0
}

  
  :root {
    --background: #fff;
    --foreground: #000;
    --divider: #dcdcdc;
    --overlay: #888;
  }
/*   
  @media (prefers-color-scheme: dark) {
    :root {
      --background: #000;
      --foreground: #fff;
      --divider: #333;
    }
  }
   */

  
  button,
  input,
  textarea,
  [contenteditable="true"] {
    box-sizing: border-box;
    padding: 1rem;
  
    border-radius: 1rem;
    border: 0.0625rem solid var(--divider);
  
    font-family: inherit;
    font-size: 1rem;
  
    background: var(--background);
    color: var(--foreground);
  }
  
  textarea {
    resize: none;
  }
  
  button {
    cursor: pointer;
  }
  
  .sheet {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
  
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    visibility: visible;
    transition: opacity 0.5s, visibility 0.5s;

  }
  
  .sheet[aria-hidden="true"] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  
  .sheet .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: var(--overlay);
    opacity: 0.5;
  }
  
  .sheet .contents {
    display: flex;
    flex-direction: column;
  
    border-radius: 1rem 1rem 0 0;
  
    background: var(--background);
  
    overflow-y: hidden;
  
    --default-transitions: transform 0.5s, border-radius 0.5s;
  
    transition: var(--default-transitions);
    transform: translateY(0);
  
    max-width: 80%;
    max-height: 100vh;
    height: 30vh;
  
    box-sizing: border-box;
  }
  
  .sheet .contents:not(.not-selectable) {
    transition: var(--default-transitions), height 0.5s;
  }
  
  .sheet .contents.fullscreen {
    border-radius: 0;
  }
  
  .sheet[aria-hidden="true"] .contents {
    transform: translateY(100%);
  }
  
  .sheet .controls {
    display: flex;
  }
  
  .sheet .draggable-area {
    width: 3rem;
    margin: auto;
    padding: 1rem;
    cursor: grab;
  }
  
  .sheet .draggable-thumb {
    width: inherit;
    height: 0.25rem;
    background: var(--divider);
    border-radius: 0.125rem;
  }
  
  .sheet .close-sheet {
    border: none;
    padding: 0.7rem;
  }
  
  .sheet .bodz {
    flex-grow: 1;
    /* height: 100%; */
  
    display: flex;
    flex-direction: column;
/*   
    /* overflow-y: auto; */
    gap: 1rem;
  
    padding: 1rem; 
    box-sizing: border-box;
  }

  /* TODO FIX BODZ on MOBILE */
  
  form {
    gap: 1rem;
  }
  body {
    background-color: var(--background-color);
    font-size: 14px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 2rem;
    margin-bottom: 2rem;
    font-family: var(--font-family);
    font-weight: 300;
    color: var(--font-color)
}

.iframe-mode {
    overflow-y: scroll;
  }
  
  /* Transparent Scrollbar Styles */
  .iframe-mode::-webkit-scrollbar {
    width: 0px;
  }
  
  .iframe-mode::-webkit-scrollbar-thumb {
    background-color: rgba(76, 175, 80, 0.0) !important; /* Fully transparent */
    border-radius: 0px !important;
  }
  
  .iframe-mode::-webkit-scrollbar-track {
    background: transparent;
  }
  
  /* For Firefox */
  .iframe-mode {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  p {
    font-size: 16px;
    line-height: 1.5;
    
  }
  .hover-underline:hover {
    text-decoration: underline;
  }
  .header-logo {
    color: white !important;
  }
  .searchResultLinkText {
    color: rgb(135, 183, 238) !important;
    font-size: 16px;
  }