.wtb-col--1 {
  flex-basis: calc( (100% * (1 / 12)) - 16px);
  width: calc((100% * (1 / 12)) - 16px); }

@media screen and (max-width: 1239px) {
  .wtb-col--1 {
    flex-basis: 100%;
    width: 100%; } }

.wtb-col--2 {
  flex-basis: calc( (100% * (2 / 12)) - 16px);
  width: calc((100% * (2 / 12)) - 16px); }

@media screen and (max-width: 1239px) {
  .wtb-col--2 {
    flex-basis: 100%;
    width: 100%; } }

.wtb-col--3 {
  flex-basis: calc( (100% * (3 / 12)) - 16px);
  width: calc((100% * (3 / 12)) - 16px); }

@media screen and (max-width: 1239px) {
  .wtb-col--3 {
    flex-basis: 100%;
    width: 100%; } }

.wtb-col--4 {
  flex-basis: calc( (100% * (4 / 12)) - 16px);
  width: calc((100% * (4 / 12)) - 16px); }

@media screen and (max-width: 1239px) {
  .wtb-col--4 {
    flex-basis: 100%;
    width: 100%; } }

.wtb-col--5 {
  flex-basis: calc( (100% * (5 / 12)) - 16px);
  width: calc((100% * (5 / 12)) - 16px); }

@media screen and (max-width: 1239px) {
  .wtb-col--5 {
    flex-basis: 100%;
    width: 100%; } }

.wtb-col--6 {
  flex-basis: calc( (100% * (6 / 12)) - 16px);
  width: calc((100% * (6 / 12)) - 16px); }

@media screen and (max-width: 1239px) {
  .wtb-col--6 {
    flex-basis: 100%;
    width: 100%; } }

.wtb-col--7 {
  flex-basis: calc( (100% * (7 / 12)) - 16px);
  width: calc((100% * (7 / 12)) - 16px); }

@media screen and (max-width: 1239px) {
  .wtb-col--7 {
    flex-basis: 100%;
    width: 100%; } }

.wtb-col--8 {
  flex-basis: calc( (100% * (8 / 12)) - 16px);
  width: calc((100% * (8 / 12)) - 16px); }

@media screen and (max-width: 1239px) {
  .wtb-col--8 {
    flex-basis: 100%;
    width: 100%; } }

.wtb-col--9 {
  flex-basis: calc( (100% * (9 / 12)) - 16px);
  width: calc((100% * (9 / 12)) - 16px); }

@media screen and (max-width: 1239px) {
  .wtb-col--9 {
    flex-basis: 100%;
    width: 100%; } }

.wtb-col--10 {
  flex-basis: calc( (100% * (10 / 12)) - 16px);
  width: calc((100% * (10 / 12)) - 16px); }

@media screen and (max-width: 1239px) {
  .wtb-col--10 {
    flex-basis: 100%;
    width: 100%; } }

.wtb-col--11 {
  flex-basis: calc( (100% * (11 / 12)) - 16px);
  width: calc((100% * (11 / 12)) - 16px); }

@media screen and (max-width: 1239px) {
  .wtb-col--11 {
    flex-basis: 100%;
    width: 100%; } }

.wtb-col--12 {
  flex-basis: calc( (100% * (12 / 12)) - 16px);
  width: calc((100% * (12 / 12)) - 16px); }

@media screen and (max-width: 1239px) {
  .wtb-col--12 {
    flex-basis: 100%;
    width: 100%; } }

.wtb-col--12 {
  flex-basis: 100%;
  width: 100%; }

.wtb-col--offset--1 {
  margin-left: 8.33333333% !important; }

.wtb-col--centered {
  margin-left: auto;
  margin-right: auto; }

@media screen and (max-width: 1239px) {
  .wtb-col--offset--1 {
    margin-left: 0 !important; } }

ul#menu > li {
  float: left;
  list-style-type: none; }

.login-menu__section-label {
  position: relative;
  display: block;
  padding: 0 18px 0 0px;
  color: white;
  font-family: avenir book;
  font-size: 0.75rem;
  line-height: 2; }

.login-menu__label {
  position: relative;
  display: flex;
  padding: 0 18px 0 12px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  transition: background 0.3s;
  cursor: pointer;
  color: white;
  font-family: avenir heavy;
  font-size: 1.25rem;
  line-height: 1.2; }

.login-menu_label-chevron {
  content: "";
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  background-image: url("/images/icons/up-1x1.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  transform: rotate(180deg); }
  .login-menu_label-chevron--up {
    top: -10px;
    background-image: url("/images/icons/up-1x1.svg");
    background-repeat: no-repeat;
    transform: rotate(0deg); }

/*hide the inputs*/
#login-control {
  opacity: 0;
  position: absolute; }

#login-control--mobile {
  opacity: 0;
  position: absolute; }

/*set tab focus outline for the label*/
#login-control:focus-visible + .login-menu__label {
  outline: auto; }

.login-control__container {
  height: 100%; }

/*style for the second level menu*/
ul.submenu {
  visibility: hidden;
  max-height: 0;
  padding: 0 10px;
  overflow: hidden;
  list-style-type: none;
  background: rgba(0, 65, 99, 0.95);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
  transition: max-height 0.35s ease-out;
  position: absolute;
  min-width: 100%;
  right: 0;
  top: 100%;
  margin-top: 0;
  position: absolute;
  z-index: 10; }
  ul.submenu--login-menu-open {
    max-height: 735px;
    overflow-y: auto;
    transition: max-height 0.35s ease-in;
    animation: hide-scroll 1s backwards;
    position: absolute;
    z-index: 10;
    visibility: visible; }

@keyframes hide-scroll {
  from,
  to {
    overflow: hidden; } }

ul.submenu li > div {
  display: block;
  padding: 12px;
  color: #ddd;
  text-decoration: none;
  box-shadow: 0 -1px rgba(0, 0, 0, 0.5) inset;
  transition: background 0.2s;
  white-space: nowrap; }

.login-dialog__container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 20em;
  z-index: 5; }
  .login-dialog__container span:not(:first-child) {
    margin-top: 1rem; }

.business-form {
  display: none;
  margin-top: -0.5em; }

.wealth-management-form {
  display: none;
  margin: -0.5em 0; }

.business-link__container {
  display: flex;
  flex-direction: column; }

.link-container {
  margin-top: 0.25rem; }
  .link-container > a {
    color: white; }

.business-banking__link {
  border-bottom: 1px solid white; }

.login-dropdown__link {
  color: white; }

.login-dialog__container div > .PS_LoginWrapper {
  height: 100%; }
  .login-dialog__container div > .PS_LoginWrapper > .login-box {
    display: flex;
    align-items: center;
    flex-direction: column; }
    .login-dialog__container div > .PS_LoginWrapper > .login-box > div {
      width: 100%;
      height: 100%; }
      .login-dialog__container div > .PS_LoginWrapper > .login-box > div > div {
        width: 100%;
        margin: 0; }
        .login-dialog__container div > .PS_LoginWrapper > .login-box > div > div > input {
          font-size: 1rem;
          padding: 0.6rem;
          border: none;
          border: solid 1px #ccc;
          font-family: "Avenir Book";
          border-radius: 1em;
          width: 100%;
          margin-top: 0.5rem;
          line-height: 1; }
          .login-dialog__container div > .PS_LoginWrapper > .login-box > div > div > input:focus {
            outline-color: transparent;
            outline-style: none; }
    .login-dialog__container div > .PS_LoginWrapper > .login-box > input {
      background-color: #8dc8e8;
      border-color: black;
      border-style: solid;
      border-width: 0;
      color: #041c2c;
      font-family: "Avenir Book";
      font-size: 1rem;
      font-weight: 900;
      height: 48px;
      width: 100%;
      margin: 1rem 0;
      content: "WTB Online Login"; }
      .login-dialog__container div > .PS_LoginWrapper > .login-box > input:hover {
        background-color: rgba(141, 200, 232, 0.8);
        cursor: pointer; }
      .login-dialog__container div > .PS_LoginWrapper > .login-box > input:focus {
        background-color: rgba(141, 200, 232, 0.8);
        border-color: #041c2c;
        border-style: solid;
        border-width: 0; }

.wtb-login_bar__control-container {
  align-items: center;
  flex-direction: column;
  justify-content: space-around; }

.login-button, .portfolio-login-button, .login-button--business {
  background-color: #8dc8e8;
  border-color: black;
  border-style: solid;
  border-width: 0;
  color: #041c2c !important;
  font-family: "Avenir Book";
  font-size: 1rem;
  font-weight: 900;
  width: 100%;
  margin: 1rem 0;
  content: "WTB Online Login";
  white-space: initial; }
  .login-button--business {
    background-color: #8dc8e8; }
  .login-button:hover, .portfolio-login-button:hover, .login-button--business:hover {
    background-color: rgba(141, 200, 232, 0.8);
    cursor: pointer; }
  .login-button:focus, .portfolio-login-button:focus, .login-button--business:focus {
    background-color: rgba(141, 200, 232, 0.8);
    border-color: #041c2c;
    border-style: solid;
    border-width: 0; }
  .login-button .strong, .portfolio-login-button .strong, .login-button--business .strong {
    font-weight: bold;
    text-transform: uppercase;
    font-family: "Avenir Medium";
    margin-right: 0.25rem; }

.portfolio-login-button {
  background-color: #8dc8e8; }

.login-bar__label {
  color: #004163;
  font-weight: bold;
  font-size: 1.5em; }

.login-bar__enroll-link,
.login-bar__password-link {
  color: #004163;
  font-weight: 600; }

.select {
  font-size: 1rem;
  position: relative;
  display: inline-block;
  margin-bottom: 10px; }

.select .arr {
  background: #000000;
  bottom: 5px;
  position: absolute;
  right: 5px;
  top: 5px;
  width: 50px;
  height: 29px;
  pointer-events: none; }

.select .arr:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -5px;
  pointer-events: none;
  border-top: 10px solid white;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent; }

.select .arr:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  margin-top: -5px;
  pointer-events: none;
  border-top: 6px solid #000000;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent; }

.select select:focus {
  border-color: #1a70ff; }

.select select:focus + .arr:before {
  border-top-color: #1a70ff; }

.login-dropdown {
  font-size: 1rem;
  padding: 0.5rem;
  border: none;
  border: solid 1px #ccc;
  width: 100%;
  font-family: "Avenir Book";
  background-color: #000000;
  color: white;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  line-height: 1.2; }

/* Mobile styles */
@media screen and (max-width: 1239px) {
  /*show mobile second level menu*/
  .login-dropdown--mobile > ul.submenu {
    max-height: 650px;
    transition: max-height 0.35s ease-in;
    transition: height 0.5s ease-in;
    position: absolute;
    z-index: 10; }
  /*style for the second level menu*/
  ul.submenu {
    visibility: hidden;
    display: flex;
    justify-content: center;
    width: 100%;
    max-height: 0;
    padding: 0;
    overflow: hidden;
    list-style-type: none;
    background: rgba(0, 65, 99, 0.95);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
    transition: max-height 0.35s ease-out;
    position: absolute;
    min-width: 100%;
    position: absolute;
    z-index: 10;
    right: 0; }
    ul.submenu--login-menu-open {
      max-height: 550px;
      overflow-y: auto;
      transition: max-height 0.35s ease-in;
      animation: hide-scroll 1s backwards;
      position: absolute;
      z-index: 10;
      visibility: visible; }
  @keyframes hide-scroll {
    from,
    to {
      overflow: hidden; } }
    ul.submenu li {
      display: flex;
      width: 100%;
      justify-content: center; }
  ul.submenu li > div {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 12px;
    color: #ddd;
    text-decoration: none;
    box-shadow: 0 -1px rgba(0, 0, 0, 0.5) inset;
    transition: background 0.2s;
    white-space: nowrap; }
  .link-container > a {
    color: white; }
  .login-bar__enroll-link {
    color: white; }
  .login-dialog__container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding: 12px;
    z-index: 5; }
    .login-dialog__container span:not(:first-child) {
      margin-top: 1rem; }
    .login-dialog__container .link-container {
      white-space: initial; }
      .login-dialog__container .link-container__mobile-apps {
        display: flex;
        flex-wrap: wrap; }
  .wtb-login_bar {
    display: none; }
  .desktop-login .wtb-login_bar {
    display: flex;
    flex-direction: column; }
  .desktop-login .wtb-login_bar__control-container {
    width: 100%; }
  .desktop-login .wtb-login_bar > div > .PS_LoginWrapper {
    width: 100%; }
  .desktop-login .wtb-login_bar > div > .PS_LoginWrapper > .login-box {
    flex-direction: column; }
  .desktop-login .wtb-login_bar > div > .PS_LoginWrapper > .login-box > div > div > input {
    margin-bottom: 16px;
    width: 100%; } }

/*# sourceMappingURL=wtb-login_dialog.css.map */