/**
* CSS for the login page.
*/

/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
*    user zoom.
* Montserrat - Google Font
* https://fonts.google.com/specimen/Montserrat?selection.family=Montserrat:400,500,600,700
* Regular 400
* Medium 500
* Semi-Bold 600
* Bold 700
*/
html {
    font-family: "Montserrat", sans-serif; /* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
    font-display: fallback;
  }
  
  /**
  * Remove default margin.
  */
  body {
    margin: 0;
  }
  
  h2 {
    color: #666;
    font-size: 20px;
    font-weight: 500;
  }
  
  h3 {
    color: #666;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
  }
  
  h4 {
    color: #666;
    font-weight: 700;
    font-size: 12px;
  }
  
  /**
  * Begin modal agreement popup styles.
  */
  .modalBackground {
    position: fixed; /* Stay in place */
    z-index: 50; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: #f1f2f2;
  }
  .modalWrapper {
    height: 100%;
    width: 100%;
    z-index: 100;
    position: absolute;
  }
  .modal {
    background-color: #ffffff;
    margin: 100px auto 0 auto;
    width: 42rem;
  }
  .modalTop {
    background: #24316c url("../customer/1810_cce-alert.png")
      no-repeat 1em center;
    color: #ffffff;
    font-weight: 400;
    font-size: 1.25em;
    height: 45px;
    line-height: 45px;
    letter-spacing: 0.1rem;
    padding-left: 57px;
  }
  .modalBody {
    color: #251833;
    padding: 38px 21px;
  }
  .modalBody h1,
  .modalBody h2,
  .modalBody ul {
    font-color: #1a0c28;
  }
  /* like h2 */
  .modalBody h1 {
    color: #666;
    font-size: 20px;
    font-weight: 500;
    margin: 0;
  }
  
  .modalBody h2 {
    font-size: 1rem;
    font-weight: 400;
    margin: 2rem 0;
  }
  
  .modalBody ul {
    font-size: 0.875rem;
    line-height: 1.6em;
    list-style: none;
    padding: 0;
  }
  
  .modalBody ul li {
    margin: 0 0 1em 1.5em;
  }
  
  .modalBody ul li::before {
    color: #24316c;
    content: "\25c6\a0";
    font-size: 1.3em;
    position: absolute;
    margin: -1px 0 0 -18px;
  }
  
  .modalFooter {
    text-align: center;
  }
  
  /**
  * End modal agreement popup styles.
  */
  
  /**
  * Begin login page styles.
  */

  .loginSectionContainer {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: visible;
  }

  .imageSide {
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    -webkit-transition: background 1.5s linear;
    -moz-transition: background 1.5s linear;
    -o-transition: background 1.5s linear;
    -ms-transition: background 1.5s linear;
    transition: background 1.5s linear;
    background-image: url("1809_af1.jpeg"), url("1809_af2.jpeg"), url("1809_af3.jpeg"), url("1809_af4.jpeg"), url("1809_af5.jpeg"), url("1809_af6.jpeg"),url("1809_af7.jpeg");
    background-repeat: no-repeat;
    max-width: 100%;
    max-height: 100%;
    animation-name: backswitch;
    animation-duration: 70s;
    animation-iteration-count: infinite;
  }

  @keyframes backswitch {
    0% {
      background-image: url("1809_af1.jpeg");
    }
    15% {
      background-image: url("1809_af2.jpeg");
    }
    30% {
      background-image: url("1809_af3.jpeg");
    }
    45% {
      background-image: url("1809_af4.jpeg");
    }
    60% {
      background-image: url("1809_af5.jpeg");
    }
    75% {
      background-image: url("1809_af6.jpeg");
    }
    100% {
      background-image: url("1809_af7.jpeg");
    }
  }

  #welcomeText {
    width: 100%;
    text-align: center;
    color: white;
    text-transform: uppercase;
    font-weight: bolder;
    letter-spacing: -2px;
    font-size: 40px;
    cursor: default;
    -webkit-user-select: none;  
    -moz-user-select: none;
    -ms-user-select: none; 
    user-select: none; 
    margin: 0;
  }

  .loginSide {
    width: 60%
  }


  .cacSectionWrapper{
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cacSection{
    display: flex;
    width: 80%;
    align-items: center;
    justify-content: center;
  }
  
  #mainContent {
    margin: 0 8rem;
    max-width: 1280px;
  }
  
  .titleSection {
    position: relative;
    text-align: center;
  }
  
  .loginTitle {
    color: #555;
    margin: 10vh 0 35px 0;
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -2px;
    text-transform: uppercase;
  }
  
  .cceImage {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
  }
  
  /* Tab Navigator Styles */
  .header {
    border-top: 1px solid #979797;
    height: 20px;
    position: relative;
  }
  
  ul.tabnav {
    padding-left: 0;
    height: 25px;
    position: absolute;
    top: -53px;
  }
  
  ul.tabnav li {
    background-color: #fff;
    border: 1px solid #979797;
    border-bottom: none;
    color: #000000;
    float: left;
    font-size: 12px;
    height: 25px;
    padding-top: 11px;
    width: 115px;
    text-align: center;
    list-style: none;
    margin-right: 10px;
  }
  ul.tabnav li:hover {
    cursor: pointer;
  }
  
  ul.tabnav li.inactive {
    background-color: #c8cdd3;
    color: #24316c;
    border-bottom: 1px solid #979797;
    padding-top: 10px;
  }
  
  /* End Tab Navigator Styles */
  
  .contentSection {
    margin: 0 0 25px 0;
    display: inline-block;
    width: 100%;
  
    text-align: center;
  }
  
  .loginSection {
    float: left;
    width: 28%;
    margin-top: 1.75rem;
    min-width: 300px;
  }
  
  .loginSection h4 {
    margin: 0;
  }
  
  .loginSection p {
    color: #1a0c28;
    font-size: 0.7rem;
    font-weight: 400;
    line-height: 1.5em;
    margin-top: 2em;
  }
  
  .cacImageWrapper {
    display: block;
    margin: auto;
    position: absolute;
    left: 110px;
    top: 365px;
  }

  .cacImageWrapper > img {
    width: 6vw;
  }
  
  .cac-login-wrapper {
    position: relative;
    margin: 0;
    max-width: 70%;
    padding-bottom: 40px;
  }
  
  .cceBlackImage {
    float: left;
    padding: 0.6rem 0.5rem 0 1rem;
    width: 5rem;
  }
  
  .passInput {
    border: none;
    border-bottom: 1px solid #777777;
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 2rem;
    padding-bottom: 0.4rem;
    width: 100%;
  }
  
  .passwordlinks {
    font-size: x-small;
  }
  /* keep .akam-button the same as
     Akamai injects this (please see readme) */
  /* keep .akam-button the same as
     Akamai injects this (please see readme) */
  .akam-button,
  .button-small {
    background-color: #003361;
    font-size: 1.1rem;
    min-width: 80px;
    width: 15.5rem;
    height: 4.6rem;
    padding: 4px 20px 6px 20px;
    transition: background 0s;
    color: rgb(255, 255, 255);
    cursor: pointer;
    margin-bottom: 8px;
  
    -ms-user-select: none;
    -moz-transition: background 0s;
    -webkit-transition: background 0s;
    -o-transition: background 0s;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
  
    border: none;
    border-style: solid;
    border-width: 1px;
  
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
  }
  
  .btn-primary {
    background-color: rgb(36, 49, 108);
    font-size: 1.1rem;
    width: 10.5rem;
    height: 2.6rem;
    padding: 0px 0px 0px 0px;
    transition: background 0s;
    color: rgb(255, 255, 255);
    cursor: pointer;
    margin-bottom: 8px;
  
    -ms-user-select: none;
    -moz-transition: background 0s;
    -webkit-transition: background 0s;
    -o-transition: background 0s;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
  
    border: none;
    border-style: solid;
    border-width: 0px;
  
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
  }
  
  .btn-secondary {
    background-color: white;
    font-size: 1.1rem;
    width: 10.5rem;
    height: 2.6rem;
    padding: 0px 0px 0px 0px;
    transition: background 0s;
    color: rgb(36, 49, 108);
    cursor: pointer;
    margin-bottom: 8px;
    border-color: rgb(36, 49, 108);
  
    -ms-user-select: none;
    -moz-transition: background 0s;
    -webkit-transition: background 0s;
    -o-transition: background 0s;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
  
    border-style: solid;
  
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
  }
  
  .btn-primary:active {
    background-color: rgb(36, 49, 108);
  }
  
  .button-small {
    font-size: 0.875rem;
    font-weight: 400;
    height: 3.4rem;
    width: 11rem;
  }
  
  .akam-button:hover,
  .button-small:hover {
    background: #00519c;
  }
  
  hr {
    color: #d5d5d5;
  }
  
  .supportSection {
    margin-top: 0px;
    margin-left: 8vw;
  
    @media screen and (max-width: 50px) {
      float: left;
      width: 80%;
    }
  }
  
  .supportSection h3 {
    color: #666;
    font-size: 12px;
    font-weight: 700;
    margin: 0;
  }
  
  .supportSection ul {
    list-style: none;
    padding-left: 0;
  }
  
  .supportSection ul li {
    color: #7099ed;
    margin-bottom: 7px;
  }
  
  .supportSection ul li a {
    font-weight: 500;
  }

  .securityStatement{
    margin-left: 8vw;
    font-size: small;
    color: grey;
    width: 80%;
    margin-bottom: 10vh;
  }
  
  a {
    color: #2f4cb3;
  }
  
  a:hover {
    color: #24316c;
  }
  
  .linkInline {
    text-decoration: none;
  }
  
  fieldset {
    display: none;
  }
  
  .infoinput {
    float: left;
    line-height: 25px;
  }
  
  footer {
    clear: both;
    background-color: #ededed;
    color: #251833;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5em;
    padding: 16px 0 38px 0;
    text-align: center;
  }
  
  .footerSection {
    margin: 38px 8rem 2em 8rem;
    text-align: left;
    max-width: 1280px;
  }
  
  footer ul {
    padding-left: 2.5em;
  }
  
  footer ul li {
    margin-bottom: 1em;
  }

  .welcomeContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .welcomeContainer > img {
    width: 20vw;
  }
  
  /* Larger than Desktop HD */
  @media (min-width: 1200px) {
    #mainContent {
      margin: 0 10rem;
    }
  }
  
  /* Larger than Desktop HD */
  @media (min-width: 1300px) {
  }
  
  /* Larger than Desktop HD */
  @media (min-width: 1640px) {
    #mainContent {
      margin: 0 auto;
    }
  
    .footerSection {
      margin: 38px auto 2em auto;
    }
  }

  @media screen and (max-width: 1640px) {
    .cacImageWrapper > img {
        display: none !important;
    }
  }

  @media screen and (max-width: 1200px) {
    .imageSide{
      position: relative;
      width: 100vw;
      height: 30vh;
    }

    .loginSectionContainer {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: auto;
    }

    .loginSide{
      width: 100%;
    }
  }

  @media screen and  (max-width: 950px) {
    #globalNavTitle{
      font-size: 6vw;
      white-space: normal;
      padding-left: 2vw;
    }

  }