:root {
  --brand-green: #299c0a;
  --brand-blue: #00205c;
  --brand-light-blue: #1988ca;
}

.form-group.magic-label {
  position: relative;
}
.form-group.magic-label label {
  position: absolute;
  top: 9px;
  left: 21px;
  width: 1px;
  transition: all ease 0.3s;
  font-weight: 400;
  font-size: 14px;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  white-space: nowrap;
  text-align: right;
}
.form-group.magic-label.focus-or-filled label {
  width: calc(100% - (20px * 2) - 2px);
  opacity: 0.5;
}
.form-group.magic-label.required label:first-child::after {
  content: '*';
  position: relative;
  left: 5px;
  color: #c92a2a;
}

.way-offsides {
  position: absolute;
  left: -50000px;
}
#cms-form-area input {
  width: 80%;
  padding: 5px 10px;
}
#cms-form-area textarea {
  width: 80%;
  margin: 0 20% 0 0;
}
#cms-form-area input[type='submit'] {
  width: 40%;
  padding: 5px 10px;
}
#cms_overall .fdic-notice {
  display: none;
}

/* Replace this with the CSS that will not be modified by the web developer. */

.Table-Location {
  margin-top: 1em;
  margin-bottom: 1em;
}

.Table-Location,
.Table-Location > *,
.Table-Location > * > tr > td {
  display: block;
}

.Table-Location > * > tr {
  display: flex !important;
  flex-wrap: wrap;
}

.Table-Location > * > tr > * {
  padding-left: 2rem;
  vertical-align: top;
  flex-grow: 1;
}

.Table-Location > * > tr > *:first-child {
  padding-left: 0;
}

.Table-Location > * > tr > *:nth-child(2) {
  flex-grow: 2;
}

.Table-Location > * > tr > * > *:first-child {
  margin-top: 0;
  padding-top: 0;
}

.Table-Location > * > tr > * > img {
  max-width: 100%;
}

@media only screen and (max-width: 1000px) {
  .Table-Location > * > tr {
    flex-wrap: wrap;
  }

  .Table-Location > * > tr > *:last-child {
    flex-basis: 50%;
    padding-left: 0;
  }
}

@media only screen and (max-width: 820px) {
  .Table-Location > * > tr {
    flex-direction: column;
  }

  .Table-Location > * > tr > * {
    padding-left: 0 !important;
    padding-top: 1em !important;
  }
}

@media only screen and (max-width: 500px) {
  .Table-Location > * > tr:first-child > td:first-child {
    width: 100%;
    padding: 0em;
  }
}
body {
  overflow-x: hidden;
  font-size: unset;
}
@media only screen and (max-width: 1024px) {
  #gototop {
    display: none;
  }
}
.form-group {
  margin-bottom: 15px;
}
textarea.form-control {
  height: 100px;
}
.container,
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  max-width: 1200px;
  margin: 60px auto;
}
.container-fluid {
  width: 100%;
}
.fdic-wrapper {
  padding-top: 10px;
  padding-bottom: 10px;
}
.globalcmsnav ul.cms_admin li {
  padding-left: 0;
}

/* Blog Styling */

.blog-feed-post {
  display: block;

  img {
    max-width: 100%;
    margin-bottom: 20px;
    object-fit: cover;
  }
  .small {
    a {
      color: var(--brand-green);
      text-decoration: none;
      font-size: 14px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
    }
  }
  h2 {
    line-height: 24px;
    a {
      color: var(--brand-blue);
      font-size: 22px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      text-decoration: none;
    }
  }
}

#first-blog-post {
  padding: 0 30px;
  border-left: 1px solid #dfe1df;
}

.spotlight-section {
  display: grid;
  grid-template-columns: 285px 1fr;
  column-gap: 30px;
  margin-bottom: 60px;

  #blog-category-nav-heading {
    color: var(--brand-blue);
    font-size: 26px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }

  ul {
    padding-left: 0;
    li {
      padding: 10px 0;
      border-bottom: 1px solid #dfe1df;
      margin: 0 0 10px 0;
      a {
        color: var(--brand-blue);
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
      }
    }
    li:before {
      display: none;
    }
  }
}

@media only screen and (max-width: 700px) {
  .spotlight-section {
    grid-template-columns: 1fr;
    #blog-category-nav-heading {
      margin-bottom: 20px;
    }
    ul {
      margin-bottom: 20px;
    }
  }
}

.blog-landing {
  .blog-feed-post-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    row-gap: 60px;
    width: 100%;
    justify-items: center;
    margin-top: 30px;
    .blog-snippet {
      display: none;
    }
    .blog-feed-post {
      border-left: 1px solid #ddd;
      padding: 0 30px;
    }
    img {
      max-width: 100%;
      margin-bottom: 5px;
      height: 160px !important;
      object-fit: cover;
    }
  }
}

.category-landing {
  .blog-feed-post-wrapper {
    .blog-feed-post {
      border-bottom: 1px solid #ddd;
      padding: 30px 0;
      img {
        max-width: 100%;
        width: 100%;
        margin-bottom: 5px;
        height: 190px !important;
        object-fit: cover;
      }
      p.small {
        display: none;
      }
    }
    .blog-feed-post-header {
      display: grid;
      grid-template-columns: 285px 1fr;
      column-gap: 30px;
    }
  }
}

.CMS-Learning-Center-Wrapper {
  padding: 60px 0;
  .wysiwyg-wrapper {
    h2 {
      color: var(--brand-blue);
      font-size: 26px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }
    p {
      color: #333;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
    }
  }
}

body:not(.blog-landing, .category-landing) .blog-feed-post-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, 300px);
  row-gap: 60px;
  width: 100%;
  justify-items: center;
  margin: 40px 0;
  place-content: center;
  .blog-snippet {
    display: none;
  }
  .blog-feed-post {
    padding: 0 30px;
    border-left: 1px solid #ddd;

    & .small {
      margin: 0;
      a {
        color: var(--brand-blue);
      }
    }
  }
  img {
    max-width: 240px;
    margin-bottom: 5px;
    height: 160px !important;
    object-fit: cover;
  }
  h2 {
    color: var(--brand-blue);
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 0;
  }
}

.blog-post {
  .content-area {
    overflow: hidden;
  }
}

.blog-post-image {
  margin-bottom: 60px;
}

@media only screen and (max-width: 700px) {
  .category-landing .blog-feed-post-header {
    display: block;
  }
}

.btn-primary,
.btn-secondary:hover,
.btn-secondary:focus {
  border-color: var(--brand-green);
  background: white;
  color: var(--brand-green);
  border: solid 1px;
}

.btn-primary,
.btn-secondary,
.btn-tertiary {
  display: inline-block;
  padding: 0.25em 1.5em;
  box-sizing: border-box;
  border-radius: 1.5em;
  font-weight: 400;
  height: auto;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.43, -0.14, 0.31, 1.14);
  margin: 0 1rem 1rem 0;
  text-decoration: none !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-secondary {
  background: var(--brand-blue);
  color: #fff;
  border: solid 1px white;
}

.btn-tertiary {
  background: var(--brand-green);
  color: #fff;
  border: solid 1px transparent;
}

.btn-tertiary:hover,
.btn-tertiary:focus {
  background: var(--brand-blue);
  color: white;
  border: solid 1px white;
}

.subsection-color-content {
  h1 {
    color: #fff;
    font-size: 3.9rem;
    font-weight: 300;
    font-style: normal;
    line-height: normal;
  }
  .wysiwyg-wrapper {
    padding: 0;
  }
}
@media only screen and (min-width: 1025px) {
  section.subsection-color:first-of-type {
    padding-top: 14rem;
  }
}

nav#primary > div > ul > li > div div {
  min-width: 14rem;
}

.Button1,
.Button2,
.Subsection-Quicklinks-Table a {
  text-decoration: none !important;
}

.wysiwyg-wrapper:has(footer) {
  padding: 0;
}

/* WIZARD Styling */
.CMS-Wizard-Wrapper {
  background-color: var(--brand-blue);
  background-repeat: no-repeat;
  background-position: right;
  background-size: contain;
  color: white !important;
  transition: all ease 0.5s;

  &.question {
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%22529%22%20height%3D%22310%22%20viewBox%3D%220%200%20529%20310%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M290%20-134C129.848%20-134%200%20-4.1525%200%20156C0%20316.152%20129.848%20446%20290%20446C450.152%20446%20580%20316.152%20580%20156C580%20-4.1525%20450.152%20-134%20290%20-134Z%22%20fill%3D%22white%22%20fill-opacity%3D%220.07%22/%3E%3Cpath%20d%3D%22M271.628%20259.62C271.628%20265.29%20273.879%20270.728%20277.887%20274.738C281.896%20278.747%20287.332%20281%20293%20281C298.668%20281%20304.105%20278.747%20308.113%20274.738C312.121%20270.728%20314.373%20265.29%20314.373%20259.62C314.373%20256.812%20313.82%20254.032%20312.746%20251.438C311.672%20248.844%20310.097%20246.487%20308.113%20244.502C306.128%20242.517%20303.772%20240.942%20301.179%20239.868C298.586%20238.793%20295.807%20238.24%20293%20238.24C290.193%20238.24%20287.414%20238.793%20284.821%20239.868C282.228%20240.942%20279.872%20242.517%20277.887%20244.502C275.903%20246.487%20274.328%20248.844%20273.254%20251.438C272.18%20254.032%20271.628%20256.812%20271.628%20259.62ZM293%2031C252.766%2031%20210%2060.2469%20210%20114.465C210%20119.97%20212.186%20125.25%20216.078%20129.142C219.969%20133.035%20225.247%20135.222%20230.75%20135.222C236.253%20135.222%20241.531%20133.035%20245.422%20129.142C249.314%20125.25%20251.5%20119.97%20251.5%20114.465C251.5%2085.633%20273.018%2072.5144%20293%2072.5144C308.5%2072.5144%20334.5%2077.0603%20334.5%20107.553C334.5%20118.367%20331.657%20130.988%20310.658%20142.57C296.382%20150.396%20272.25%20170.717%20272.25%20197.058C272.25%20202.563%20274.436%20207.843%20278.328%20211.735C282.219%20215.628%20287.497%20217.815%20293%20217.815C298.503%20217.815%20303.781%20215.628%20307.672%20211.735C311.564%20207.843%20313.75%20202.563%20313.75%20197.058C313.75%20193.197%20321.967%20183.711%20330.661%20178.916C360.728%20162.352%20376%20138.336%20376%20107.553C376%2054.6632%20334.313%2031%20293%2031Z%22%20fill%3D%22%2300205C%22/%3E%3C/svg%3E');
  }
  &.answer {
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%22529%22%20height%3D%22310%22%20viewBox%3D%220%200%20529%20310%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M290%20-135C129.848%20-135%200%20-5.1525%200%20155C0%20315.152%20129.848%20445%20290%20445C450.152%20445%20580%20315.152%20580%20155C580%20-5.1525%20450.152%20-135%20290%20-135Z%22%20fill%3D%22white%22%20fill-opacity%3D%220.07%22/%3E%3Cpath%20d%3D%22M369.376%2075.7921L252.941%20192.228L215.713%20155C207.99%20147.277%20195.515%20147.277%20187.792%20155C180.069%20162.723%20180.069%20175.198%20187.792%20182.921L239.079%20234.208C246.802%20241.931%20259.277%20241.931%20267%20234.208L397.495%20103.713C405.218%2095.9901%20405.218%2083.5149%20397.495%2075.7921C389.772%2068.0693%20377.099%2068.0693%20369.376%2075.7921Z%22%20fill%3D%22%2300205C%22/%3E%3C/svg%3E');
  }

  h2 {
    color: white !important;
    font-size: 35px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .get-started-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 15px;
  }
  .intro-wrapper {
    padding-right: 30px;
    border-right: 1px solid #fff;
  }
  .wizard-answer-question-wrapper {
    padding-left: 30px;
  }

  .wizard-answer {
    background-color: var(--brand-green) !important;
    color: white !important;
    border: none;
    padding: 10px 20px 10px 10px;
    display: flex;
    align-items: center;
    &:hover,
    &:focus {
      color: var(--brand-green) !important;
      background-color: white !important;
    }
    svg {
      margin-right: 5px;
      & + svg {
        /* Fix for occasional double-check on buttons */
        display: none;
      }
    }
  }
  .wizard-back {
    margin: 0;
    padding: 7px 22px;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    height: 31px;
  }
  .wysiwyg-wrapper {
    float: none;
    width: auto;
    p {
      margin-bottom: 0;
      color: #fff;
      font-size: 26px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
    }
  }
  .wizard-answers-wrapper {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
  }
  .wizard-question-wrapper {
    margin-bottom: 30px;
  }
  .block-outer-wrapper {
    padding-left: 0;
  }
  .wysiwyg-wrapper {
    padding: 0;
  }
}

@media only screen and (max-width: 700px) {
  .CMS-Wizard-Wrapper {
    background-image: none !important;

    .get-started-wrapper {
      grid-template-columns: 1fr;
    }
    .intro-wrapper {
      padding-right: 0;
      border-right: none;
      border-bottom: 1px solid #fff;
      padding-bottom: 10px;
      margin-bottom: 10px;
    }
    .wizard-answer-question-wrapper {
      padding-left: 0;
    }
  }
}

/* Table Styles */
[class*='Table-'] > tbody > tr > th {
  padding: 0.5rem 1rem;
  border-left: solid 1px #b2b5b6;
  border-top: solid 1px #b2b5b6;
  text-align: left;
}

.Table-Style caption {
  text-align: center;
}

.comparison-table-wrapper,
.row-break {
  clear: both;
}

.Table-Product thead th {
  text-align: center;
}

.Table-Product .mobile-caption {
  display: none;
}

@media only screen and (max-width: 769px) {
  .Table-Product .mobile-caption {
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
  }
}

.row-break {
  margin: 15px 0;
  &.hr {
    border-bottom: 1px solid #999;
  }
}

.Table-Product > tbody > tr > th {
  background-color: rgba(0, 0, 0, 0.05);
  color: #00205c;
  line-height: 2rem;
  font-weight: 700;

  p {
    margin-bottom: 0;
  }
}

@media only screen and (max-width: 769px) {
  .Table-Product > tbody > tr > th {
    display: block;
  }
}

main > .subsection .subsection {
  padding: 0;
  clear: left;

  .subsection-content {
    padding: 0;
    border-left: 0;
  }
}

aside.disclaimer {
  margin-bottom: 20px;
  font-size: 12px;
  font-style: italic;
  a.btn {
    font-style: normal;
  }
}

.tutorial-box-wrapper-wrapper {
  display: grid;
  grid-template-columns: 300px 300px;
  gap: 10px;
  margin-bottom: 10px;
  clear: both;

  .video-thumbnail-link {
    display: block;
  }
}

@media only screen and (max-width: 700px) {
  .tutorial-box-wrapper-wrapper {
    grid-template-columns: 300px;
  }
}

section#hero .caption a {
  background-color: transparent;
}

.location-name {
  font-size: 24px !important;
  font-weight: 700 !important;
}

.location {
  .row {
    display: grid;
    grid-template-columns: 4fr 6fr 3fr;
    gap: 20px;
  }
  p {
    margin-bottom: 5px;
  }
  address {
    margin-bottom: 5px;
  }
  h4 {
    margin-bottom: 0;
  }
  table {
    margin-bottom: 10px;
  }
  th,
  td {
    text-align: left;
  }

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

@media only screen and (max-width: 900px) {
  .location .row {
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 1280px) {
  section {
    padding: 0 15px !important;

    &.subsection-color {
      padding: 220px 50px 50px !important;
      margin-bottom: 30px !important;
    }
  }
}
@media only screen and (max-width: 1024px) {
  .php {
    section {
      padding: 0 15px !important;

      &.subsection-color {
        padding: 50px !important;
      }
    }
  }
}

.video-player.vimeo {
  margin-bottom: 20px;
  min-height: 300px;
}

.vimeo-title {
  font-weight: 700;
}

/* Alerts styling */
.block-outer-wrapper {
  padding: 0;
}
.alert-message-box {
  padding: 10px 0;
  .container {
    margin: 0 auto;
    position: relative;
    max-width: 880px;

    p {
      margin: 0;
    }

    img {
      width: 40px;
    }

    button {
      position: absolute;
      top: 0;
      right: 15px;
      background: none;
      border: none;
      color: white;
      svg {
        width: 15px;
        height: 15px;
        fill: white;
      }
    }

    .alert-message {
      display: flex;
      gap: 20px;
    }

    .alert-message-text {
      display: flex;
      justify-content: center;
      flex-direction: column;
      .heading {
        font-weight: 700;
      }
    }
  }

  p {
    font-size: 16px;
  }

  &.notification {
    background-color: var(--brand-green);
    color: white;
  }
  &.warning {
    background-color: #782e2e;
    color: white;
  }
  &.maintenance {
    background-color: var(--brand-light-blue);
    color: white;

    img {
      filter: invert(1) brightness(2); /* Inverts the image and brightens it to appear white */
    }
  }
}

.alert-message-text {
  padding-right: 15px;
}

#cms_overall .alert-message-box {
  display: none;
}

#cms_overall .Table-Slide {
  display: block;
}

@media only screen and (max-width: 1024px) {
  body {
    padding-top: 0 !important;
  }
}

.Subsection-Grid-Table tr {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 20px;
  padding: 0 15px;

  td {
    width: auto !important;
  }
}

.Subsection-Grid-Table > tbody > tr > td {
  padding-left: 0 !important;
  border-left: none !important;
}

@media only screen and (max-width: 1024px) {
  .Subsection-Grid-Table tr {
    grid-template-columns: 1fr 1fr;
  }
}

@media only screen and (max-width: 768px) {
  .Subsection-Grid-Table tr {
    grid-template-columns: 1fr;
  }
  img.pull-right.img-responsive,
  img.pull-left.img-responsive {
    float: none !important;
  }
}

.cmselembox {
  width: calc(100% - 16px);
}

body:not(.home) #login {
  padding: 2rem;
  justify-content: center;
  align-items: center;
  display: flex;
  width: 100%;
  background-color: #343741;
  margin-bottom: 4rem;
  box-sizing: border-box;
  transition: all 0.5s cubic-bezier(0.43, -0.14, 0.31, 1.14);
  a {
    color: white;
  }
  ul li {
    margin-top: 20px;
  }
  ul li:last-child {
    margin-right: 0;
  }
}
@media only screen and (max-width: 800px) {
  h1,
  .h1 {
    font-size: 48px !important;
  }
}

@media only screen and (max-width: 768px) {
  body:not(.home) #login {
    form {
      margin-bottom: 20px;
    }
    ul li {
      margin-top: 0;
    }
  }
  nav#primary {
    max-height: 90vh;
    overflow-y: auto;
  }
}

.polaroid-box {
  clear: both;
}

#login input {
  color: #333;
}

.opennav {
  overflow: hidden;
  touch-action: none;
}

.location .street {
  a.btn {
    margin-top: 10px;
  }
}