:root {
  --bs-link-color: #06c; 
  --bs-border-radius: 0;
}

@view-transition {
  navigation: auto;
}

.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-disabled-opacity: 0.5;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #448ccc;
  --bs-btn-border-color: #448ccc;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #3984c6;
  --bs-btn-hover-border-color: #3984c6;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #2f78b7;
  --bs-btn-active-border-color: #2f78b7;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #448ccc;
  --bs-btn-disabled-border-color: #448ccc;
 
}
.table {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--smx-grey-500);
}




html {
  height: 100%;
} 
body {
  height: 100%;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
main{
  /* background: linear-gradient(181.07deg, #CFE1FF -5.43%, #ffffff26 60.79%); */
  background-color: var(--smx-grey-100);
}
footer {
  background-color: var(--smx-grey-200);
}

a {
  color: var(--bs-link-color);
  text-decoration: none;
}
a:not(.btn):hover {
   text-decoration: underline;
}
a:has(svg) {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
}
a:has(svg) > span{
  margin-bottom: 0.15rem;
}
.btn:has(svg) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
hr {
  opacity: 0.5;
}

.scroll-area {
  contain: size;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

/*--------------Top navigation ---------------*/
.navbar > .container,
.navbar > .container-fluid {
  row-gap: 2px;
  column-gap: 0.75rem;
}

@media (width >= 992px) {
  .navbar-expand-lg .navbar-nav {
    align-items: center;
  }
}
.navbar-brand,
.section-title {
  font-size: calc(1rem + 0.2vw);
  font-weight: 600;
}
.navbar-toggler:focus {
  box-shadow: none;
}
.section-title {
  position: relative;
  margin-inline: 1rem;
  margin-bottom: 3px; /* manually tuned */
  padding-left: 2rem;
  display:flex;
  align-items: center;
  gap: 0.5rem;
  @media (width < 992px) {
    font-size: 1rem;
    flex-grow: 1;
    flex-basis: 100%;
    margin-inline: 0;
    padding-top: 0.25rem;
    padding-left: 0;
  }
}

.section-title::before {
  border-left: 2px solid #000;
  height: 26px;
  content: " ";
  position: absolute;
  left: 0;
  @media (width < 992px) {
    border-left: 0;
    height: 0;
    top: 0;
    border-top: 1px solid var(--bs-secondary-border-subtle);
    width: calc(100% + var(--bs-gutter-x) * 1.5);
    left: calc(var(--bs-gutter-x) * -1);
  }  
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/*----Mega menu styles----*/

.dropdown:has(.mega-menu){
  position: static;
}

.dropdown-menu.mega-menu {
  margin: 0;
  padding: 1rem;
  width: 100%;
  max-width: 100%;
  /*display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;*/
  border: 0;
  border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
  border-radius: 0;
  background-color: var(--smx-grey-100);
  box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.15);
}


/*---Icons---*/

.si {
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
  fill: currentcolor;
}
.si-24 {
  width: 1.5rem;
  height: 1.5rem;
}
.si-32 {
  width: 2rem;
  height: 2rem;
}
.si-36 {
  width: 2.5rem;
  height: 2.5rem;
}
.si-48 {
  width: 3.25rem;
  height: 3.25rem;
}

/* -------Typography ---------*/

.tracking-tighter {
  letter-spacing:-.025em
 }
 .tracking-tight {
  letter-spacing:-.01em
 }
 .tracking-normal {
  letter-spacing:0
 }
 .tracking-wide {
  letter-spacing:.01em
 }
 .tracking-wider {
  letter-spacing:.025em
 }
 .tracking-widest {
  letter-spacing:.1em
 }
 .nav-link {
  white-space: nowrap;
  }
  h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
    font-weight: 600;
  }
  .fs-6{
    font-size: 0.94rem;
  }
  .fs-7{
    font-size: 0.8rem;
  }
  .fs-8{
    font-size: 0.75rem;
  }


  /*Media scroller*/
  section:has(.media-scroller-container) { /* Prevent page horizontal scrolling */
    /*overflow-x: hidden;*/
  }

  .media-scroller.displays {
    --media-element-width: 66.3%;;
    padding-bottom: 1em;
  }
  .media-scroller.previews {
    --media-element-width: 30%;;
    padding-bottom: 1em;
  }
  .media-scroller.displays .media-element {
    --_spacer: 2em;
    --surface-2: linear-gradient(180deg, var(--smx-grey-200) 0%, var(--smx-grey-500) 100%);
    --radius-2: 1em;
    color: #fff;
    padding-bottom: 1.5rem;
  }
  .media-scroller.previews .media-element {
    background-color: var(--smx-grey-200);
    border-radius: 0 0 1em 1em;
    border-bottom: 1px solid var(--smx-grey-300);
    border-right: 1px solid var(--smx-grey-300);
  }
  .media-scroller.previews .media-element p {
    padding: 0.5rem 1rem 0.75rem 1rem;    
    border-top: 6px solid var(--smx-grey-600);    
  }

  .media-scroller.displays .media-element img { 
    border-bottom: 2px solid #fff;
    border-top: 1px solid #4b4b4b;
    aspect-ratio: 16 / 9.5;
  }
  .media-scroller.previews .media-element .title{
    font-size: 0.9em;
  }

  .media-scroller-container {
    position: relative;
    margin-bottom: 2rem;
  }
  


.scroll-controls {
    position: absolute;
    z-index: 1;
    bottom: 0;
    transform: translate(0, 3rem);    
    display: flex;
    gap: 0.5rem;
    @media (width >= 1400px) {
        right: calc((100vw  - 1320px)/2 + 8px);
    }
    @media (width < 1400px) {
        right: calc((100vw  - 1140px)/2 + 8px);
    }
}

  .media-scroller {
    --_spacer: var(--size-3);
    display: grid;
    gap: 16px;
    grid-auto-flow: column;
    grid-auto-columns: var(--media-element-width);
  
    padding: 0 var(--_spacer) var(--_spacer);
  
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    /*scrollbar-color: #448ccc transparent;*/
  }
  .media-scroller {
    @media (width >= 1400px) {
        padding-inline: calc((100vw  - 1320px)/2 + 8px);
    }
    @media (width < 1400px) {
        padding-inline: calc((100vw - 1140px)/2 + 8px);
    }
    @media (width < 1200px) {
        padding-inline: 12px;
    }
 }

  .media-scroller--with-groups {
    grid-auto-columns: 80%;
  }
  
  .media-group {
    display: grid;
    gap: var(--_spacer);
    grid-auto-flow: column;
  }
  
  .media-scroller .media-element {
    display: grid;
    grid-template-rows: min-content;
    gap: calc(var(--_spacer) / 2);
    padding: var(--_spacer);
    background: var(--surface-2);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-2);
    position: relative;
  }
  
  
  .media-scroller .media-element > img {
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: top;
    position: relative;
  }



/* Spinner as image placeholder. Enable in production---*/
/*  .media-element::before {
    content: "";
    position:absolute;
    top:50%;
    left: 50%;
    translate: -50% -50%;
      width: 50px;
      padding: 8px;
      aspect-ratio: 1;
      border-radius: 50%;
      background: #25b09b;
       --_m: 
        conic-gradient(#0000 10%,#000),
        linear-gradient(#000 0 0) content-box;
      -webkit-mask: var(--_m);
              mask: var(--_m);
      -webkit-mask-composite: source-out;
              mask-composite: subtract;
      animation: l3 1s infinite linear; 
    }
    @keyframes l3 {to{transform: rotate(1turn)}
  }*/



  .media-element .title {
    text-align: center;
    margin: 0;
    text-wrap: balance;
  }
  .media-element img { 
    cursor: zoom-in;
  }
  .media-element img.full { 
    cursor: zoom-out;
  }
  
  .snaps-inline {
    scroll-snap-type: inline mandatory;
    scroll-padding-inline: var(--_spacer, 1rem);
    scroll-behavior: smooth;
  }
  
  .snaps-inline > * {
    scroll-snap-align: start;
  }
  .media-element:first-child {
    scroll-snap-align: center;
 }

/*--------Full view on click--------*/

.media-element img.full {
    position: fixed;
    top: 0; left: 0; z-index: 999;
    width: 100vw; height: 100vh;
    object-fit: contain;
    background: #808e9db2;
    padding: 2em;
    backdrop-filter: blur(6px);
}
.media-element img.full:hover {
    z-index: 999;
    transform: none;
}
.media-element img:active {
    transform: scale(0.9);
    transition: transform ease 0.3s;
}

  

  /*---------Specification grid-----*/
  


.spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
    & hr.section-start {
    grid-column: 1/4;
    border-top: 2px solid rgb(75, 75, 75); 
    height: 4px; 
    margin: 1em 0 0.5em 0;
    opacity: 1;
    }
    & h4.section {
    grid-column: 1/2;
    margin: 0;
    font-size: 1.25em;
    line-height: 1;
    }
    & h4.section + hr {
      display: none;
    }
    & .label {
    grid-column: 2/3;
    }
    & .value {
    grid-column: 3/4;
    }
    & .value ul {
      padding-left: 1rem !important;
    }
    & hr  {
    grid-column: 2/4;
    margin: 0.5em 0
    }
}		
    
@media (width< 992px) {

  .spec-grid {
    grid-template-columns: 1fr 1fr;
      & hr.section-start {
      grid-column: 1/3;
      }
      & h4.section {
      grid-column: 1/3;
      margin-bottom: 0.75em;
      }
      & h4.section + hr {
        display: none;
      }
      & .label {
      grid-column: 1/2;
      }
      & .value {
      grid-column: 2/3;
      }
      & hr  {
      grid-column: 1/3;
      margin: 0.5em 0
      }
  }
}
   
    
 /*--------Page Hero section-------*/

.stack-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "stack";
    overflow-x: clip;
}
  .stack-container > * {
      grid-area: stack;
      /*z-index: 1;*/
  }
  .hero-image {
    justify-items: center;
  }
  
  .hero-image img {
      height: calc(100vh - 58px);
      max-height: 1200px;
      object-fit: contain;
      object-position: center;
      /*object-position: bottom;*/
  }
  .hero-overlay{
      opacity: 0;
      transform: scale(0.5);
  }

  body.hero-overlay-shown .hero-overlay{
      opacity: 1;
      transform: scale(1);
      transition: all 0.5s linear;
      /*backdrop-filter: blur(4px);*/
  }
  body.hero-overlay-shown .hero-image-main{
    opacity: 0.8;
  }
  .hero .hero-back {
      /*background-image: url('/assets/img/background-07.jpg');*/
      background-size: cover;
      background-position: center;
      background-color: #91a4af;
      height: calc(100vh - 58px);
      max-height: 1200px;
      width: 100%;
      @media (width< 992px) {
          height: 100%;
      }
  }

  .hero.hero-theme-light {
  & .hero-back {
    background: linear-gradient(to bottom,var(--smx-grey-300) 0%,var(--smx-grey-300) 59%,#fff 60%,#fff 100%);
    }
  & .heading,
  & aside.navbar {
    color: var(--smx-grey-900);
  } 
  & aside.navbar::before {
    background-color: rgb(from var(--smx-grey-400) r g b / 0.5);
    background: linear-gradient(90deg, rgb(from var(--smx-grey-75) r g b / 0.5) 0%,  rgb(from var(--smx-grey-600) r g b / 0.5) 100%);
  } 
    & .summary::before {
    background-color: rgb(from var(--smx-grey-400) r g b / 0.5);
    
  }  
  @media (width > 992px) {
    & aside.navbar::after,
    & .summary::after {
      content: "";
      position: absolute;
      border-left:1px solid rgba(255, 255, 255, 0.4);
      right:-20px;
      height:100%;      
      top: 0;
      width: 20px;
      /*background: linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.05) 100%);*/
    } 
  }
  & .navbar-toggler {
    border: 2px solid var(--smx-grey-900);
      color: var(--smx-grey-900);
  }
  & aside.navbar .btn,
  & aside.navbar hr {
    border-color: var(--smx-grey-900);
  } 
  & .page-sections a:hover:before {
    filter: none;
  }
}

  aside.navbar:before,
  .hero div.summary:before {
      content: "";
      position: absolute;
      top: 0;
      /* left: calc(-1 * var(--bs-gutter-x) * 0.5); */
      /* right: calc(-1 * var(--bs-gutter-x) * 0.5); */
      right: 0;
      height: 100%;
      backdrop-filter: blur(6px);
  }
  .hero div.summary{
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100vh;
      max-height: 1200px;
      @media (width< 992px) {
          height: auto;
      }
  }
   
  @media (width < 992px) {
    .hero div.summary::before {
      left: 0;
    }
  }
  @media (width > 992px) {
    header aside.navbar::before,
    .hero aside.navbar::before, 
    .hero div.summary::before {
      width: 40vw;
      }
    .hero aside.navbar {
      height: calc(100vh - 58px);
      max-height: 1200px;
    }
    .hero aside.navbar > * {
      position: relative;
    }
  }

.hero .heading {
  color: var(--heading-items-color);
}

aside.navbar {
    color: var(--aside-items-color);
    & * {
      border-color: var(--aside-items-color)
    }
    &:before {background-color: var(--aside-bg-color)}		 
    @media (width < 992px) {
      .navbar-collapse {
        background-color: var(--aside-bg-color);
      }
      .navbar-toggler {
        display: flex;
        align-items:center;
        width: 100%;
        border: 2px solid var(--aside-items-color);
        color: var(--aside-items-color);
        border-radius: 0;
      }
    } 
}

aside.navbar  {
  & .page-sections {
    padding-left: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  & .page-sections a:hover:before {
    content: url('/assets/img/arrow_downward.svg');
    position: absolute;
    left: 1rem;
    width: 1.5rem;
    filter: invert(100%);
}
  & .related-links {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  & a {
      color: inherit;
  }
}

.summary {
  &:before {
    background-color: var(--summary-bg-color);
  }
}


  .features-icons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    }
  .features-icons .si {
    font-size: 4rem;
  }  


  /*--------------SUMIX buttons-------------------------*/
.btn-outline-smx {
  color: var(--smx-teal-500);
  border-color: var(--smx-teal-500) !important;
  background-color: transparent;
}
.btn-outline-smx:hover {
    color: #fff !important;
    border-color: var(--smx-teal-500) !important;
    background-color: var(--smx-teal-500) !important;
    text-decoration: none;
}
.btn-outline-smx:active {
    color: #fff !important;;
    border-color: var(--smx-teal-700) !important;
    background-color: var(--smx-teal-700) !important;
}


/*-----------Shadow on scroll------------------*/
.scroll-shadows {
  background:
    /* Shadow Cover TOP */
    linear-gradient(
      white 30%,
      rgba(255, 255, 255, 0)
    ) center top,
    
    /* Shadow Cover BOTTOM */
    linear-gradient(
      rgba(255, 255, 255, 0), 
      white 70%
    ) center bottom,
    
    /* Shadow TOP */
    radial-gradient(
      farthest-side at 50% 0,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0)
    ) center top,
    
    /* Shadow BOTTOM */
    radial-gradient(
      farthest-side at 50% 100%,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0)
    ) center bottom;
  
  background-repeat: no-repeat;
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
  background-attachment: local, local, scroll, scroll;
}

/* ---- Link to top -----*/
.ltt {
  position: relative; 
  display: block; 
  width: 100%;
}
.ltt:after {
  content:"";
  position: absolute;
  width: 48px;
  height: 48px;
  right: 0.25rem;
  bottom:0;
  opacity: 0.7;
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24,4h0A20,20,0,1,1,10.54,9.21,20,20,0,0,1,24,4m0-2A22,22,0,1,0,40.27,9.19,21.92,21.92,0,0,0,24,2Z'/%3E%3Cpath d='M13,23l1.41,1.41L23,15.83V35h2V15.83l8.58,8.59L35,23,24,12Z'/%3E%3C/svg%3E");
}
.ltt.light:after {
  filter:invert();
}
.ltt:hover:after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M40.27,9.19a22,22,0,1,0-1.46,31.08A21.94,21.94,0,0,0,40.27,9.19ZM33.58,24.42,25,15.83V35H23V15.83l-8.59,8.58L13,23,24,12,35,23Z'/%3E%3C/svg%3E");
}


/*------------html <details> element -------------*/
details {
  margin-bottom: 1rem;
} 
summary {
  font-weight: 600
}
summary:focus {
  outline: none; 
  color: var(--smx-teal-600)}
details p {
  padding: 1rem 0 1rem 1rem;
} 
details[open] summary ~ * {
animation: sweep .3s ease-in-out;
}

@keyframes sweep {
0%    {opacity: 0; }
100%  {opacity: 1; }
}

/*------tables--------*/
.thead-sticked th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/*--------Tabs----*/
.nav-tabs {
  --bs-nav-tabs-border-color: var(--smx-grey-600);
  --bs-nav-tabs-link-hover-border-color: transparent transparent var(--smx-grey-600);
  --bs-nav-tabs-link-active-color: var(--bs-emphasis-color);
  --bs-nav-tabs-link-active-bg: var(--smx-grey-100);
  --bs-nav-tabs-link-active-border-color: var(--smx-grey-600) var(--smx-grey-600) var(--smx-grey-100);
}
.nav-tabs .nav-link {
    font-weight: 600;
    font-size: 1.125rem;
    padding: 1rem 2rem;
}