/* first reset everything */
@import url('sanitize.css');

/* set up my standards */

/**
 * Add relative to all tags.  The default of "fixed" is worthless. (opinionated).
 */
*,
::before,
::after {
  position: relative;
}

/**
 * iframes of course should not be inline! (opinionated).
 */
iframe {
  display: block;
}


/* custom scrollbar */
::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #d6dee1;
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
}

/* mobile styles */

@media (max-device-height: 400px) {
  body {
    height: auto !important;
    overflow: scroll !important;
  }
  div#client.current-annuitySearch div#clientFrameContainer,
    div#client.current-annuitySearch iframe#clientFrame {
    height: 10000px !important;
  }
}


/* app styles */

html {
  height: 100%;
  font-family: sans-serif;
}

  body {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

    div#annuitySearchPrintMessage {
      position: absolute;
      z-index: 10000;
      top:0;
      left:0;
      bottom:0;
      right:0;
      background-color: white;
      display: none;
      font-size: 1.5em;
      text-align: center;
      padding-top: 1em;
    }
    @media print {
      body.page-annuitySearch div#annuitySearchPrintMessage {
        display: block;
      }
    }

      #annuitySearchPrintMessage img {
        display: inline;
        margin-left: 3em;
      }

    /***************************************************************************/
    div#mobileMenu {
      height: 2rem;
      display: none;
      border-bottom: .1rem solid #f3f3f3;
    }
    body.mobile div#mobileMenu {
      display: flex;
    }
    @media print {
      div#mobileMenu {
        display: flex;
      }
    }

      div#menuButton {
        cursor: pointer;
        width: 2rem;
        height: 2rem;
      }
      @media print {
        div#menuButton {
          display: none;
        }
      }
      div#menuButton:hover {
        background-color: rgb(170, 199, 253);
      }
      div#menuButton:active:hover {
        background-color: rgb(149, 186, 255);
      }

        div#menuButton img {
          position: absolute;
          display: block;
          width: 1.5rem;
          height: 1.5rem;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
        }

      div#mobileCurrentMenuItem {
        display: flex;
        align-items: center;
        min-width: 10rem;
        margin-left: .5em;
        font-size: 110%;
        color: rgb(24, 117, 171);
        text-shadow: 1px 1px 2px #c9c9c9;
        font-weight: 400;
      }

    /***************************************************************************/
    div#outer {
      min-height: 0;
      display: flex;
      flex-direction: row;
      flex-grow: 1;
    }

      div#sideMenu {
        width: 15rem;
        border-right: solid .01rem silver;
        display: flex;
        flex-direction: column;
        background-color: white;
      }
      body.mobile div#sideMenu {
        display: none;
      }
      @media print {
        div#sideMenu {
          display: none;
        }
      }


      body.mobile.showingMenu div#sideMenu {
        display: flex;
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: 1000;
      }

        div#menuLogo {
          padding: 1rem;
        }

          div#menuLogo img {
            width: 100%
          }

        div#menuSocialMedia {
          margin: 1.5rem 0 0 .5rem;
          display: flex;
          flex-direction: row;
        }

          div#menuSocialMedia a {
            display: block;
            width: 1.2rem;
            height: 1.2rem;
            margin-left: .5rem;
            mask-repeat: no-repeat;
            mask-position: center;
            -webkit-mask-repeat: no-repeat;
            -webkit-mask-position: center;
            background-color: gray;
          }
          div#menuSocialMedia a:hover {
            background-color: rgb(0, 0, 0);
          }
          div#menuSocialMedia a:first-child{
            margin-left: 0;
          }


          a.facebook {
            mask-image: URL('/cw/images/f.svg');
            -webkit-mask-image: URL('/cw/images/f.svg');
          }

          a.twitter {
            mask-image: URL('/cw/images/t.svg');
            -webkit-mask-image: URL('/cw/images/t.svg');
          }

          a.linkedIn {
            mask-image: URL('/cw/images/l.svg');
            -webkit-mask-image: URL('/cw/images/l.svg');
          }

          a.youTube {
            mask-image: URL('/cw/images/y.svg');
            -webkit-mask-image: URL('/cw/images/y.svg');
          }


        div#menu {
          overflow-y: auto;
          flex-grow: 1;
          padding: 1rem;
        }

          a.menuItem {
            display: block;
            cursor: pointer;
            z-index: 1;
            padding: .1rem 0 .4rem;
            color: inherit; /* blue colors for links too */
            text-decoration: inherit; /* no underline */
          }
          a.menuItem:hover {
            color: rgb(105, 105, 105);
          }

          a.menuItem.selected {
            cursor: default;
            color: rgb(24, 117, 171);
          }

            a.menuItem span::after {
              position:absolute;
              left:0;
              top: 0;
              width: 0;
              bottom: -.2rem;
              border-bottom: .15rem solid rgb(207, 207, 207);
              z-index: -1;
              content: '';
              transition: width 200ms;
            }
            a.menuItem:hover span::after {
              width: 100%;
              border-bottom-color: rgb(151, 151, 151);
            }

            a.menuItem.selected span::after {
              width: 100%;
              border-bottom-color: rgb(148 172 197);
            }

      div#menuGlass {
        position: absolute;
        top:0; left:0; right:0; bottom:0;
        background-color: black;
        opacity: 10%;
        z-index: 998;
      }

      div#client {
        flex-grow: 1;
        overflow: auto;
      }

        div#disclaimerGlass {
          position: absolute;
          top:0; left:0; right:0; bottom:0;
          background-color: black;
          opacity: 50%;
          z-index: 998;
        }

        div#securitiesDisclaimer {
          position: absolute;
          height: 10.8rem;
          width: 40rem;
          background-color: antiquewhite;
          z-index: 999;
          top: 5rem;
          left: 50%;
          transform: translateX(-50%);
          padding: 1.2rem;
          text-align: justify;
        }

          div.title {
            font-weight: bold;
            text-align: center;
            margin-bottom: 0.8rem;
          }

          div.continue {
            font-weight: bold;
            text-align: center;
            margin-top: 0.5rem;
          }

            div.continue input {
              width: 1rem;
              height: 1rem;
              vertical-align: text-top;
              margin-left: 0.2rem;
            }

            div.continue button {
              position: absolute;
              right: 10px;
              top: 2px;
            }



        div#client.current-annuitySearch div#clientFrameContainer {
          height: 100%;
        }

          /**
            iFrames can not be stretched using absolute, right, and bottom.  Only with absolute, top, left, width and height.
          */
          iframe#clientFrame {
            position: relative;
            width: 932px;
            margin: 0 auto;
            height: 320rem;
          }
          div#client.current-annuitySearch iframe#clientFrame {
            height: 100%;
          }




/* for local client pages */

div#photoHeader {
  height: 15rem;
  width: 932px;
  margin: 1em auto;
  z-index: 0;
}

div#photoHeader::before {
  position: absolute;
  background-color: rgb(38 93 162);
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  opacity: 50%;
  z-index: 1;
  content: '';
}

  div#photoHeader div {
    z-index: 2;
  }

  div#headerText {
    position: absolute;
    width: 100%;
    left: 50%;
    top: 4.6rem;
    transform: translateX(-50%);
    text-align: center;
    text-transform: uppercase;

    font-size: 190%;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: .2rem;
    color: white;
    text-shadow: 0px 0px 30px #000000;

  }

  div.caretLeft, div.caretRight {
    position: absolute;
    width: 50%;
    height: 0;
    border-bottom: 3rem solid white;
    bottom: 0;
  }

  div.caretLeft {
    left: 0;
    border-right: 3rem solid transparent;
  }

  div.caretRight {
    right: 0;
    border-left: 3rem solid transparent;
  }

  div#headerMessage {
    width: 50rem;
    margin: 1rem auto 2rem;
    text-align: justify;
    font-size: 110%;
    color: rgb(102, 102, 102);
  }

  div#frameContainer {
    overflow: hidden;
  }

    iframe#externalFrame {
      position: relative;
      width: 932px;
      margin: 0 auto;
      height: 320rem;
    }

div#footerMessage {
  width: 50rem;
  margin: 3rem auto 2rem;
  text-align: center;
  font-size: 110%;
  color: rgb(102, 102, 102);
}