@charset "iso-8859-2";
@font-face {
    font-family: Roboto;
    src: url("https://www.xylemanalytics.com/File Library/fonts/Roboto-Regular.eot?1.0");
    src: url("https://www.xylemanalytics.com/File Library/fonts/Roboto-Regular.eot?1.0") format("embedded-opentype"),url("https://www.xylemanalytics.com/File Library/fonts/Roboto-Regular.woff?1.0") format("woff"),url("https://www.xylemanalytics.com/File Library/fonts/Roboto-Regular.ttf?1.0") format("truetype"),url("https://www.xylemanalytics.com/File Library/fonts/Roboto-Regular.svg#roboto-italic?1.0") format("svg");
    font-style: normal;
    font-display: swap;
    font-style: italic
}

.button-link.gradient--dark {
    color: #fff !important;
    background: linear-gradient(#003e51, #003e51) padding-box, linear-gradient(to right, #67dfff, #61d604) border-box;
    border-radius: 9999px;
    border: 2px solid transparent;
}
.button-link.gradient, a.gradient {
    background: #0085ad;
    border-radius: 9999px;
    color: #003e51 !important;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, #67dfff, #61d604) border-box;
    border: 2px solid transparent;
}

.button-link
{  
    padding: .5em 1em;
    position: relative;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    transition: all 200ms ease-in-out;
    outline: 0;

}
.stem-flex-container {
  display:flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-items: center;
    padding-bottom: 50px;
   
}
@media (min-width: 600px) 
{
.stem-flex-item {
    flex: 0 1 20%;
}
}

@media (max-width: 600px) {
.stem-flex-item {
flex: 0 1 auto;
}
}
.button.stem {
    color: oklch(33.88% 0.0647310623 225.8963228899);
    transition: all 200ms ease-in-out;
    position: relative;
    background: 0 0;
    border-color: transparent;
    background-color: transparent;
    font-family: Roboto, Inter, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
    letter-spacing: -.01em;
    font-weight: 700;
    line-height: 1.125em;
    display: inline-flex;
    flex-wrap: wrap;
    gap: .5em;
    align-items: center;
    align-self: flex-start;
  /*  padding-block: .5625em; */
    padding-inline: 1.5em;
    min-height: 2.5em;
    border-radius: 9999px;
    border-width: 2px;
    border-style: solid;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
    transition-property: border-color, background-color, color;
    cursor: pointer;
    text-decoration: none;
    margin: 0;
    text-transform: unset;
    overflow: unset;
    outline: 0;
    -webkit-tap-highlight-color: transparent;
    mask-composite: exclude;
    
    
   
}

.button.stem::before {
        background: linear-gradient(90deg in oklch, oklch(84.69% .1157866516 218.0470324589) 0, oklch(77.67% .235 137.15) 100%) border-box;
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    padding-inline: 2em;
    /*border: 2px solid transparent;*/
    background: linear-gradient(90deg, oklch(84.69% .1157866516 218.0470324589) 0, oklch(77.67% .235 137.15) 100%) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    }

.button.stem:hover {
    text-decoration: none;
}
svg:not(:host).svg-inline--fa, svg:not(:root).svg-inline--fa {
    overflow: visible;
    box-sizing: content-box;
}

.svg-inline--fa {
    display: var(--fa-display, inline-block);
    height: 1em;
    overflow: visible;
    vertical-align: -.125em;
}
svg:not(:host).svg-inline--fa, svg:not(:root).svg-inline--fa {
    overflow: visible;
    box-sizing: content-box;
}


.button.stem:has(svg) span {
    -webkit-transform: translate(.75em);
    -ms-transform: translate(.75em);
    transform: translate(.75em);
    
}
    
    .button.stem:has(svg) svg {
        font-size: 1.25em;
    opacity: 0;
        -webkit-transform: translate(1em);
    -ms-transform: translate(1em);
    transform: translate(1em);
       transition:  all 200ms ease-in-out;
         -webkit-transition:  all 200ms ease-in-out;
    }
.button.stem:has(svg):hover svg {
    opacity: 1;
    font-size: 1.25em;
    transform: translate(0, 0);
}
.button.stem:has(svg):hover span {
    -webkit-transform: translate(0);
    -ms-transform: translate(0);
    transform: translate(0);
    
}
.button.stem:has(svg) span, body.newui .button.stem:has(svg) svg {
    transition: all 200ms ease-in-out;}
.button.stem:has(svg) svg {
    transition: all 200ms ease-in-out;
    transform: translate(.75em, 0);
    opacity: 0;
    font-size: 1.25em;
}

    
img.stem {
    border-radius: 26px 0;
   
}

span.stem-underline
{
      background: linear-gradient(90deg, oklch(84.69% .1157866516 218.0470324589) 0, oklch(77.67% .235 137.15) 100%) left bottom #ffffff no-repeat;
        background-size: 100% 3px;
           
    font-family: 'Roboto';
    font-weight: bold;
        color:#003d52;
    font-size: 1.3em;
}

.roboto-black{
     font-family: 'Roboto';
    color:#000;
    
}
.roboto {
     font-family: 'Roboto';
}
.roboto-teal{
     font-family: 'Roboto';
    color:#0085ad;
    
}

.stem-dash {
    position: relative;
    margin-bottom: 1.5em
}

.stem-dash hr {
    margin-block:0}

.stem-dash:before {
    background: linear-gradient(to right, #67dfff, #61d604);
    content: '\00a0';
    height: 5px;
    min-width: 36px;
    position: absolute;
    top: -2px;
    width: 25%;
    z-index: 1
}


p.stem-line
{
            border-bottom: 1px solid #eeeeee;
}


.gradient-top-to-bottom {
    background-image: linear-gradient(#0085ad, #003E51);
}


.button.stem.gradient--dark{
background: linear-gradient(#003e51, #003e51) padding-box, linear-gradient(to right, #67dfff, #61d604) border-box;
color:#fff;}