@-webkit-keyframes glow {
  0% {
    -webkit-box-shadow: 0 0 -8px rgba(86, 165, 216, 0.85);
            box-shadow: 0 0 -8px rgba(86, 165, 216, 0.85); }
  20% {
    -webkit-box-shadow: 0 0 12px rgba(86, 165, 216, 0.98);
            box-shadow: 0 0 12px rgba(86, 165, 216, 0.98); }
  80% {
    -webkit-box-shadow: 0 0 12px rgba(86, 165, 216, 0.98);
            box-shadow: 0 0 12px rgba(86, 165, 216, 0.98); }
  100% {
    -webkit-box-shadow: 0 0 -8px rgba(86, 165, 216, 0.85);
            box-shadow: 0 0 -8px rgba(86, 165, 216, 0.85); } }

@keyframes glow {
  0% {
    -webkit-box-shadow: 0 0 -8px rgba(86, 165, 216, 0.85);
            box-shadow: 0 0 -8px rgba(86, 165, 216, 0.85); }
  20% {
    -webkit-box-shadow: 0 0 12px rgba(86, 165, 216, 0.98);
            box-shadow: 0 0 12px rgba(86, 165, 216, 0.98); }
  80% {
    -webkit-box-shadow: 0 0 12px rgba(86, 165, 216, 0.98);
            box-shadow: 0 0 12px rgba(86, 165, 216, 0.98); }
  100% {
    -webkit-box-shadow: 0 0 -8px rgba(86, 165, 216, 0.85);
            box-shadow: 0 0 -8px rgba(86, 165, 216, 0.85); } }

@-webkit-keyframes marker-glow {
  0% {
    -webkit-box-shadow: 0 0 -8px rgba(86, 165, 216, 0.85);
            box-shadow: 0 0 -8px rgba(86, 165, 216, 0.85);
    background-color: rgba(86, 165, 216, 0.1); }
  20% {
    -webkit-box-shadow: 0 0 16px rgba(86, 165, 216, 0.99);
            box-shadow: 0 0 16px rgba(86, 165, 216, 0.99);
    background-color: rgba(86, 165, 216, 0.5); }
  80% {
    -webkit-box-shadow: 0 0 16px rgba(86, 165, 216, 0.99);
            box-shadow: 0 0 16px rgba(86, 165, 216, 0.99);
    background-color: rgba(86, 165, 216, 0.5); }
  100% {
    -webkit-box-shadow: 0 0 -8px rgba(86, 165, 216, 0.85);
            box-shadow: 0 0 -8px rgba(86, 165, 216, 0.85);
    background-color: rgba(86, 165, 216, 0.1); } }

@keyframes marker-glow {
  0% {
    -webkit-box-shadow: 0 0 -8px rgba(86, 165, 216, 0.85);
            box-shadow: 0 0 -8px rgba(86, 165, 216, 0.85);
    background-color: rgba(86, 165, 216, 0.1); }
  20% {
    -webkit-box-shadow: 0 0 16px rgba(86, 165, 216, 0.99);
            box-shadow: 0 0 16px rgba(86, 165, 216, 0.99);
    background-color: rgba(86, 165, 216, 0.5); }
  80% {
    -webkit-box-shadow: 0 0 16px rgba(86, 165, 216, 0.99);
            box-shadow: 0 0 16px rgba(86, 165, 216, 0.99);
    background-color: rgba(86, 165, 216, 0.5); }
  100% {
    -webkit-box-shadow: 0 0 -8px rgba(86, 165, 216, 0.85);
            box-shadow: 0 0 -8px rgba(86, 165, 216, 0.85);
    background-color: rgba(86, 165, 216, 0.1); } }

/* proto.esri.com patterns: detailed-list */
@-webkit-keyframes animateGradient {
  0% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 50%; }
  100% {
    background-position: 0% 50%; } }
@keyframes animateGradient {
  0% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 50%; }
  100% {
    background-position: 0% 50%; } }

.proto-card-container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: stretch;
      align-items: stretch;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }

.proto-card {
  background: #ffffff;
  -ms-flex: 0 1 0%;
  flex: 0 1 0%;
  -ms-flex: 1 1 calc(33% - 1rem);
  flex: 1 1 calc(33% - 1rem);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  min-width: calc(33% - 1rem);
  max-width: calc(33% - 1rem);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  margin: 0 0.5rem 1rem;
  border: 1px solid #cccccc;
  -webkit-transition: 150ms linear;
  transition: 150ms linear; }
  .proto-card.proto-card-wide {
    min-width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0; }
  @media screen and (max-width: 1023px) {
    .proto-card {
      -ms-flex: 0 1 0%;
      flex: 0 1 0%;
      -ms-flex: 1 1 calc(50% - 1rem);
      flex: 1 1 calc(50% - 1rem);
      min-width: calc(50% - 1rem);
      max-width: calc(50% - 1rem); } }
  @media screen and (max-width: 690px) {
    .proto-card {
      -ms-flex: 1 1 100%;
          flex: 1 1 100%;
      max-width: 100%; } }
  @media screen and (min-width: 1023px) {
    .proto-card-2-up .proto-card {
      -ms-flex: 1 1 calc(50% - 1rem);
      flex: 1 1 calc(50% - 1rem);
      min-width: calc(50% - 1rem);
      max-width: calc(50% - 1rem); }
      .proto-card-2-up .proto-card:nth-child(odd) {
        margin-left: 0; }
      .proto-card-2-up .proto-card:nth-child(even) {
        margin-right: 0; }
    .proto-card-4-up .proto-card {
      -ms-flex: 1 1 calc(25% - 1rem);
      flex: 1 1 calc(25% - 1rem);
      min-width: calc(25% - 1rem);
      max-width: calc(25% - 1rem); }
    .proto-card-5-up .proto-card {
      -ms-flex: 1 1 calc(20% - 1rem);
      flex: 1 1 calc(20% - 1rem);
      min-width: calc(20% - 1rem);
      max-width: calc(20% - 1rem); }
    .proto-card-6-up .proto-card {
      -ms-flex: 1 1 calc(16.666% - 1rem);
      flex: 1 1 calc(16.666% - 1rem);
      min-width: calc(16.666% - 1rem);
      max-width: calc(16.666% - 1rem); } }
  .proto-card:hover {
    text-decoration: none;
    border-color: #0079c1; }
    .proto-card:hover .proto-card-img > .svg-icon {
      -webkit-transform: scale(1.1);
              transform: scale(1.1); }
    .proto-card:hover .on-hover {
      opacity: 1;
      -webkit-transform: translateX(0.25rem);
              transform: translateX(0.25rem); }
  .proto-card.proto-card-wide {
    margin: 2rem auto; }
    .proto-card.proto-card-wide .flex-1-half {
      -ms-flex-order: 1;
          order: 1; }
    @media screen and (min-width: 860px) {
      .proto-card.proto-card-wide {
        -ms-flex: 1 1 100%;
        flex: 1 1 100%;
        -ms-flex-direction: row;
            flex-direction: row;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap; }
        .proto-card.proto-card-wide > * {
          padding: 2rem; } }
    @media screen and (min-width: 860px) {
      .proto-card.proto-card-wide .proto-card-img {
        -ms-flex: 1 1 50%;
            flex: 1 1 50%;
        -ms-flex-order: 1;
            order: 1; } }
    @media screen and (min-width: 860px) {
      .proto-card.proto-card-wide:nth-child(even) .proto-card-img {
        -ms-flex-order: 0;
            order: 0; } }
  .proto-card-4-up .proto-card .shorten,
  .proto-card-5-up .proto-card .shorten,
  .proto-card-6-up .proto-card .shorten {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px; }
  .proto-card > * {
    max-width: 100%; }

.proto-card-img {
  position: relative;
  -ms-flex-preferred-size: 132px;
      flex-basis: 132px;
  height: 132px;
  max-height: 132px;
  margin-bottom: 1rem;
  overflow: hidden;
  line-height: 0; }
  @media screen and (min-width: 860px) {
    .proto-card-4-up .proto-card-img {
      -ms-flex-preferred-size: 119px;
          flex-basis: 119px;
      height: 119px;
      max-height: 119px; }
    .proto-card-5-up .proto-card-img,
    .proto-card-6-up .proto-card-img {
      -ms-flex-preferred-size: 79px;
          flex-basis: 79px;
      height: 79px;
      max-height: 79px; } }
  .proto-card-img img {
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
    min-width: 100%; }
  .proto-card-img .svg-icon {
    -webkit-transition: 150ms linear;
    transition: 150ms linear;
    -webkit-transform: scale(1);
            transform: scale(1); }

.proto-card-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin-top: 0rem;
  margin-bottom: 0rem;
  padding: 0.25rem 1rem;
  background-color: rgba(255, 255, 255, 0.9);
  color: #4c4c4c;
  font-weight: 700;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.12em;
  line-height: 1.1;
  text-transform: uppercase; }
  @media screen and (min-width: 860px) {
    .proto-card-4-up .proto-card-caption {
      padding: 0.25rem 1rem; }
    .proto-card-5-up .proto-card-caption {
      padding: 0.25rem 1rem;
      font-size: 0.75rem;
      line-height: 1.5;
      line-height: 1.1; }
    .proto-card-6-up .proto-card-caption {
      padding: 0.25rem 1rem;
      font-size: 0.75rem;
      line-height: 1.5;
      line-height: 1.1; } }

.proto-card-header {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -ms-flex-order: 1;
      order: 1;
  padding-right: 1rem;
  padding-left: 1rem; }

.proto-card-product {
  -ms-flex: 0 1 calc(48px + $column-gutter * 2);
  flex: 0 1 calc(48px + $column-gutter * 2);
  -ms-flex-order: 1;
      order: 1;
  margin-bottom: 0;
  padding-left: 0.5rem;
  padding-right: 1rem; }
  .proto-card-product .svg-icon {
    height: 48px;
    width: 48px;
    color: #6e6e6e; }

.proto-card-content {
  -ms-flex-positive: 1;
      flex-grow: 1;
  -ms-flex-order: 1;
      order: 1;
  padding: 0 1rem;
  color: #595959;
  font-weight: 300;
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.5; }
  @media screen and (min-width: 860px) {
    .proto-card-4-up .proto-card-content {
      padding: 0 1rem;
      font-size: 0.8125rem;
      line-height: 1.5; }
    .proto-card-5-up .proto-card-content {
      padding: 0 1rem;
      font-size: 0.8125rem;
      line-height: 1.5; }
    .proto-card-6-up .proto-card-content {
      padding: 0 1rem;
      font-size: 0.8125rem;
      line-height: 1.5; } }
  .proto-card-content p {
    margin-top: 0rem;
    margin-bottom: 0rem; }

.proto-card-title {
  margin-bottom: 0.375rem;
  color: #323232;
  font-weight: 400;
  font-style: normal;
  font-size: 1.414rem;
  line-height: 1.5;
  word-wrap: break-word; }
  @media screen and (max-width: 859px) {
    .proto-card-title {
      font-size: 1.33rem; } }
  @media screen and (max-width: 479px) {
    .proto-card-title {
      font-size: 1.25rem; } }
  @media screen and (min-width: 860px) {
    .proto-card-4-up .proto-card-title {
      font-size: 1rem;
      line-height: 1.5; }
    .proto-card-5-up .proto-card-title {
      font-size: 1rem;
      line-height: 1.5; }
    .proto-card-6-up .proto-card-title {
      font-size: 1rem;
      line-height: 1.5; } }

.proto-card-subtitle {
  margin-bottom: 0.99rem;
  color: #6e6e6e;
  font-size: 0.8125rem;
  line-height: 1.5;
  line-height: 1.25; }
  @media screen and (min-width: 860px) {
    .proto-card-4-up .proto-card-subtitle {
      font-size: 0.75rem;
      line-height: 1.5; }
    .proto-card-5-up .proto-card-subtitle {
      font-size: 0.75rem;
      line-height: 1.5; }
    .proto-card-6-up .proto-card-subtitle {
      font-size: 0.75rem;
      line-height: 1.5; } }

.proto-card-footer {
  -ms-flex-order: 5;
      order: 5;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  margin-top: 1rem;
  padding: 0.66rem 1rem 0.66rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  line-height: 1;
  color: #4c4c4c;
  border-top: 1px solid #cccccc; }
  *:hover > .proto-card-footer {
    border-color: #0079c1; }
  @media screen and (min-width: 860px) {
    .proto-card-4-up .proto-card-footer {
      padding: 0.5rem 1rem 0.5rem;
      font-size: 0.875rem;
      line-height: 1.5; }
    .proto-card-5-up .proto-card-footer {
      padding: 0.5rem 1rem 0.5rem;
      font-size: 0.875rem;
      line-height: 1.5; }
    .proto-card-6-up .proto-card-footer {
      padding: 0.5rem 1rem 0.5rem;
      font-size: 0.875rem;
      line-height: 1.5; } }
  .proto-card-footer > * {
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    white-space: nowrap; }
    .proto-card-footer > *:last-child {
      color: #0079c1; }
  .proto-card-footer .on-hover {
    opacity: 0;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-transition: 150ms linear;
    transition: 150ms linear; }

devlabs-rollup-card {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column; }

.proto-card-list {
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  display: -ms-grid;
  display: grid;
      grid-template-areas: "img header footer" "img content footer";
  -ms-grid-columns: calc(64px + 2vw) 1vw 1fr 1vw -webkit-max-content;
  -ms-grid-columns: calc(64px + 2vw) 1vw 1fr 1vw max-content;
  grid-template-columns: calc(64px + 2vw) 1fr -webkit-max-content;
  grid-template-columns: calc(64px + 2vw) 1fr max-content;
  /* autoprefixer: ignore next */
  -ms-grid-rows: max-content 0 1fr;
  grid-template-rows: max-content 1fr;
  /* autoprefixer: ignore next */
  grid-gap: 0 1vw;
  background-color: #f1f2fa;
  color: #4c4c4c;
  outline: 1px solid #a9a9a9;
  -webkit-transition: 150ms linear;
  transition: 150ms linear; }
  @media screen and (max-width: 500px) {
    .proto-card-list {
          grid-template-areas: "img" "header" "content" "footer";
      -ms-grid-columns: 1fr 0.5vw -webkit-max-content;
      -ms-grid-columns: 1fr 0.5vw max-content;
      grid-template-columns: 1fr -webkit-max-content;
      grid-template-columns: 1fr max-content;
      /* autoprefixer: ignore next */
      -ms-grid-rows: ;
      grid-template-rows: repeat(auto-fill, max-content);
      grid-gap: 0 0.5vw; } }
  .proto-card-list header {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    grid-area: header;
    margin-top: 0.5rem; }
    @media screen and (max-width: 500px) {
      .proto-card-list header {
        margin-top: 0;
        margin-left: 0.5rem; } }
    .proto-card-list header h5 {
      margin-top: 0rem;
      margin-bottom: 0rem; }
  .proto-card-list > div {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
    grid-area: content;
    margin-bottom: 0.5rem;
    color: #6e6e6e;
    font-size: 0.9375rem;
    line-height: 1.5; }
    @media screen and (max-width: 500px) {
      .proto-card-list > div {
        margin-left: 0.5rem; } }
    .proto-card-list > div > * {
      margin: 0; }
  .proto-card-list figure {
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
    -ms-grid-column: 1;
    grid-area: img;
    margin: 0;
    align-self: stretch;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    position: relative;
    max-width: calc(54px + 2vw);
    padding: 0.5rem 1vw;
    overflow: hidden; }
    @media screen and (max-width: 500px) {
      .proto-card-list figure {
        max-width: 100%; } }
    .proto-card-list figure .svg-icon {
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
      height: auto;
      max-height: 54px;
      width: 100%;
      max-width: 54px;
      padding-right: 0;
      color: #6e6e6e; }
    .proto-card-list figure figcaption {
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
      max-width: 100%;
      margin: 0.25rem 0 0;
      font-style: normal;
      font-size: 0.8125rem;
      line-height: 1.5;
      line-height: 1.15;
      text-align: center; }
    .proto-card-list figure .is-new {
      position: absolute;
      top: 4px;
      left: -22px;
      z-index: 4;
      display: block;
      padding: 0.25rem 1.25rem;
      color: #f8f8f8;
      font-size: 0.75rem;
      line-height: 1.5;
      font-weight: 700;
      font-style: normal;
      line-height: 1;
      text-transform: uppercase;
      background-color: #007ac2;
      -webkit-box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.05);
              box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.05);
      -webkit-transform: rotate(-45deg);
              transform: rotate(-45deg); }
  .proto-card-list footer {
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
    -ms-grid-column: 5;
    grid-area: footer;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: justify;
        justify-content: space-between;
    -ms-flex-align: start;
        align-items: flex-start;
    padding: 0.5rem 1rem 0.5rem 0; }
    @media screen and (max-width: 500px) {
      .proto-card-list footer {
        -ms-flex-direction: row;
            flex-direction: row;
        padding: 0.5rem; } }
    .proto-card-list footer > * {
      -ms-flex: 0 1 auto;
          flex: 0 1 auto; }
      .proto-card-list footer > *:first-child {
        color: #6e6e6e; }
      .proto-card-list footer > *:last-child {
        color: #007ac2; }
  .proto-card-list .on-hover {
    opacity: 0;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-transition: 150ms linear;
    transition: 150ms linear; }
  .proto-card-list:hover, .proto-card-list:focus, .proto-card-list:active {
    background-color: #d2e9f9;
    text-decoration: none;
    outline: 1px solid #007ac2; }
    .proto-card-list:hover figure .svg-icon, .proto-card-list:focus figure .svg-icon, .proto-card-list:active figure .svg-icon {
      color: #004575; }
    .proto-card-list:hover .on-hover, .proto-card-list:focus .on-hover, .proto-card-list:active .on-hover {
      opacity: 1;
      -webkit-transform: translateX(0.25rem);
              transform: translateX(0.25rem); }
  .proto-card-list > div {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    -ms-grid-rows: max-content 1rem max-content;
    /* autoprefixer: ignore next */
    grid-template-rows: max-content max-content;
    /* autoprefixer: ignore next */
    align-content: space-between;
    /* autoprefixer: ignore next */
    grid-gap: 1rem;
    -ms-grid-row-align: stretch;
        align-self: stretch; }
  .proto-card-list figure {
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
    -ms-grid-column: 1;
    grid-area: img;
    -ms-flex-direction: column;
        flex-direction: column;
    text-align: center;
    margin: 0; }
  @media screen and (max-width: 500px) {
    .proto-card-list header {
    -ms-grid-row: 3;
    -ms-grid-column: 1; }
    .proto-card-list > div {
    -ms-grid-row: 5;
    -ms-grid-column: 1; }
    .proto-card-list figure {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1; }
    .proto-card-list footer {
    -ms-grid-row: 7;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1; }
    .proto-card-list figure {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1; } }
  .proto-card-list .lab-products {
    -ms-grid-row-align: end;
        align-self: end;
    -ms-grid-row: 3;
    /* autoprefixer: ignore next */
    grid-row: 2;
    display: block; }
    .proto-card-list .lab-products .label {
      letter-spacing: 0em;
      font-family: "Consolas", "Andale Mono", "Lucida Console", "Monaco", monospace;
      font-weight: 400;
      font-style: normal;
      font-size: 0.8rem;
      color: #6e6e6e; }
      .proto-card-list .lab-products .label b, .proto-card-list .lab-products .label strong {
        font-weight: 400; }