/*
* This file contains common variables used throughout the entire application.
* To reference this file put the following at the top of your .css.scss file:
*
*   @import 'palette';
*
*/
.highlight-bg, .highlight-action {
  background-color: #046a38;
  color: #fff; }

.highlight-dark-bg, .highlight-action:active {
  background-color: #02391e;
  color: #fff; }

.highlight-light-bg, .highlight-action:hover {
  background-color: #069b52;
  color: #fff; }

.highlight-fg, .highlight-link {
  color: #046a38; }

.highlight-dark-fg, .highlight-hover:active, .highlight-link:active {
  color: #02391e; }

.highlight-light-fg, .highlight-hover:hover, .highlight-link:hover {
  color: #069b52; }

.highlight-action {
  cursor: pointer; }

.highlight-link {
  text-decoration: none; }

/*
* This file contains common mixins used throughout the entire application.
* To reference this file put the following at the top of your .css.scss file:
*
*   @import 'mixins';
*
*/
/*$mq-mobile-portrait   : 20em !default;*/
/*$mq-mobile-landscape  : 30em !default;*/
/*$mq-tablet-portrait   : 48em !default;*/
/*$mq-tablet-landscape  : 64em !default;*/
/*$mq-desktop           : 86.375em !default;*/
/*$mq-offset            : 0.001;*/
#login-page {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0em;
  left: 0em;
  right: 0em;
  overflow: auto;
  background-image: url(https://assets-pbi.s3.amazonaws.com/images/desktop_login_background_gradient.png), url(https://assets-pbi.s3.amazonaws.com/images/desktop_login_background.png);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }
  @media only screen and (max-width: 768px) {
    #login-page {
      background-image: url(https://assets-pbi.s3.amazonaws.com/images/mobile_login_background.png); } }
  #login-page .content-container {
    height: 100%;
    width: 50%;
    min-width: 600px; }
    @media only screen and (max-width: 768px) {
      #login-page .content-container {
        width: 100%;
        min-width: auto;
        flex-direction: column;
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        display: -webkit-box;
        /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;
        /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;
        /* TWEENER - IE 10 */
        display: -webkit-flex;
        /* NEW - Chrome */
        display: flex;
        /* NEW, Spec - Opera 12.1, Firefox 20+ */
        justify-content: center;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        -ms-flexbox-justify-content: center;
        align-items: center;
        -webkit-align-items: center;
        -moz-align-items: center;
        -ms-flexbox-align-items: center;
        -ms-flex-align: center;
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        -ms-flex-line-pack: center;
        -webkit-justify-content: center;
        -webkit-box-align: center;
        -moz-box-align: center;
        -ms-flex: 0 1 auto; } }
    #login-page .content-container .floating-box {
      flex-direction: column;
      -webkit-flex-direction: column;
      -moz-flex-direction: column;
      -ms-flex-direction: column;
      display: -webkit-box;
      /* OLD - iOS 6-, Safari 3.1-6 */
      display: -moz-box;
      /* OLD - Firefox 19- (buggy but mostly works) */
      display: -ms-flexbox;
      /* TWEENER - IE 10 */
      display: -webkit-flex;
      /* NEW - Chrome */
      display: flex;
      /* NEW, Spec - Opera 12.1, Firefox 20+ */
      justify-content: center;
      -webkit-justify-content: center;
      -moz-justify-content: center;
      -ms-flexbox-justify-content: center;
      align-items: center;
      -webkit-align-items: center;
      -moz-align-items: center;
      -ms-flexbox-align-items: center;
      -ms-flex-align: center;
      -webkit-box-pack: center;
      -moz-box-pack: center;
      -ms-flex-pack: center;
      -ms-flex-line-pack: center;
      -webkit-justify-content: center;
      -webkit-box-align: center;
      -moz-box-align: center;
      -ms-flex: 0 1 auto;
      height: 100%; }
      @media only screen and (max-width: 768px) {
        #login-page .content-container .floating-box {
          width: 100%;
          max-width: 320px;
          height: auto;
          margin-left: auto;
          margin-right: auto;
          padding-top: 20px;
          padding-bottom: 20px;
          background-color: #FFFFFF;
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); } }
    #login-page .content-container .image-container {
      width: 100%; }
      #login-page .content-container .image-container .image-content {
        width: 100%;
        height: 100%;
        display: -webkit-box;
        /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;
        /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;
        /* TWEENER - IE 10 */
        display: -webkit-flex;
        /* NEW - Chrome */
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-align-items: center;
        -webkit-justify-content: center;
        -moz-align-items: center;
        -moz-justify-content: center;
        -ms-flexbox-align-items: center;
        -ms-flexbox-justify-content: center;
        -webkit-box-pack: center;
        -webkit-box-align: center;
        -moz-box-pack: center;
        -moz-box-align: center;
        -ms-flex-pack: center;
        -ms-flex-align: center;
        flex-direction: column;
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        -ms-flex-direction: column; }
        #login-page .content-container .image-container .image-content .logo {
          max-width: 60%;
          height: auto;
          margin: auto; }
          @media only screen and (max-width: 768px) {
            #login-page .content-container .image-container .image-content .logo {
              max-width: 50%; } }
          #login-page .content-container .image-container .image-content .logo img {
            width: 100%;
            max-width: 100%;
            -o-transition: 0.5s;
            -ms-transition: 0.5s;
            -moz-transition: 0.5s;
            -webkit-transition: 0.5s;
            transition: 0.5s; }
    #login-page .content-container .input-container {
      width: 100%;
      max-width: 500px;
      margin-left: auto;
      margin-right: auto; }
      #login-page .content-container .input-container .button-container {
        width: 65%;
        margin-left: auto;
        margin-right: auto; }
        @media only screen and (max-width: 768px) {
          #login-page .content-container .input-container .button-container {
            width: 85%; } }
      #login-page .content-container .input-container .login-btn {
        font-family: "Arial, sans-serif", "Roboto", sans-serif !important;
        text-decoration: none;
        border: none;
        background: #046a38;
        color: #fff;
        padding: 10px 100px;
        font-size: 18px;
        width: 100%;
        cursor: pointer;
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -o-border-radius: 4px;
        -ms-border-radius: 4px;
        -khtml-border-radius: 4px;
        -o-transition: 0.3s;
        -ms-transition: 0.3s;
        -moz-transition: 0.3s;
        -webkit-transition: 0.3s;
        transition: 0.3s; }
      #login-page .content-container .input-container .login-btn:not(.disabled):hover {
        cursor: pointer;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
      #login-page .content-container .input-container .login-btn.disabled {
        opacity: 0.5;
        cursor: default; }
      #login-page .content-container .input-container .error-message {
        width: 100%;
        text-align: center;
        font-size: 14px;
        color: #cc0000; }
      #login-page .content-container .input-container .group {
        position: relative;
        width: 75%;
        margin: 30px auto;
        /* active state */
        /* HIGHLIGHTER ================================== */
        /* active state */
        /* ANIMATIONS ================ */ }
        @media only screen and (max-width: 768px) {
          #login-page .content-container .input-container .group {
            width: 85%; } }
        #login-page .content-container .input-container .group .sub-text {
          text-align: left;
          font-size: 14px;
          padding-top: 5px;
          color: #a4a4a4; }
        #login-page .content-container .input-container .group input {
          font-size: 18px;
          padding: 10px 10px 4px 0px;
          display: block;
          width: 100%;
          border: none;
          border-bottom: 1px solid #757575;
          border-radius: 0;
          -webkit-appearance: none;
          background: none; }
        #login-page .content-container .input-container .group input:focus {
          outline: none; }
        #login-page .content-container .input-container .group label {
          color: #999;
          font-size: 18px;
          font-weight: normal;
          position: absolute;
          pointer-events: none;
          left: 5px;
          top: 10px;
          transition: 0.2s ease all;
          -moz-transition: 0.2s ease all;
          -webkit-transition: 0.2s ease all; }
        #login-page .content-container .input-container .group input:focus ~ label, #login-page .content-container .input-container .group input:valid ~ label {
          top: -20px;
          font-size: 14px;
          color: #046a38; }
        #login-page .content-container .input-container .group .bar {
          position: relative;
          display: block;
          width: 100%; }
        #login-page .content-container .input-container .group .bar:before, #login-page .content-container .input-container .group .bar:after {
          content: '';
          height: 2px;
          width: 0;
          bottom: 1px;
          position: absolute;
          background: #046a38;
          transition: 0.2s ease all;
          -moz-transition: 0.2s ease all;
          -webkit-transition: 0.2s ease all; }
        #login-page .content-container .input-container .group .bar:before {
          left: 50%; }
        #login-page .content-container .input-container .group .bar:after {
          right: 50%; }
        #login-page .content-container .input-container .group input:focus ~ .bar:before, #login-page .content-container .input-container .group input:focus ~ .bar:after {
          width: 50%; }
        #login-page .content-container .input-container .group .highlight {
          position: absolute;
          height: 60%;
          width: 110px;
          top: 25%;
          left: 0;
          pointer-events: none;
          opacity: 0.5; }
        #login-page .content-container .input-container .group input:focus ~ .highlight {
          -webkit-animation: inputHighlighter 0.3s ease;
          -moz-animation: inputHighlighter 0.3s ease;
          animation: inputHighlighter 0.3s ease; }
@-webkit-keyframes inputHighlighter {
  from {
    background: #046a38; }
  to {
    width: 0;
    background: transparent; } }
@-moz-keyframes inputHighlighter {
  from {
    background: #046a38; }
  to {
    width: 0;
    background: transparent; } }
@keyframes inputHighlighter {
  from {
    background: #046a38; }
  to {
    width: 0;
    background: transparent; } }

/*# sourceMappingURL=pbi-custom-landing-studio.css.map */