@import "../variables.scss";

  // Header Exp Status Style
.chai-mode{
  .modal-error-window{
    .modal-dialog{
      position: absolute;
      right: 0;
      top: 60px;
      width: 360px;
      margin: 0;

      .modal-content{
        border-color: #333;
        border-radius: 0 0 2px 2px;
        padding: 20px 20px 10px;
      }
    }

    .close-wrapper .close{
      float: right;
      color: #fff;
      margin-right: -10px;
      margin-top: -10px;
      font-weight: lighter;
      width: 12px;
      height: 12px;
      display: block;

      img{
        display: block;
      }
    }
  }

  .header-exp-status{
    position: relative;
    z-index: 10;

    &.standard-exp{
      .header-bar{
        background: $dark-gray;
        &.in-progress {
          background: -moz-linear-gradient(left, #63b02d 0%, #63b02d 46%, #5d8329 46%, #5d8329 100%);
          /* FF3.6-15 */
          background: -webkit-linear-gradient(left, #63b02d 0%, #63b02d 46%, #5d8329 46%, #5d8329 100%);
          /* Chrome10-25,Safari5.1-6 */
          background: linear-gradient(to right, #63b02d 0%, #63b02d 46%, #5d8329 46%, #5d8329 100%);
          /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        }
        &.complete {
          background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIj48ZGVmcz48cGF0dGVybiBpZD0icGF0dGVybiIgd2lkdGg9IjUiIGhlaWdodD0iNSIgdmlld0JveD0iMCAwIDQwLDQwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBwYXR0ZXJuVHJhbnNmb3JtPSJyb3RhdGUoMTIwKSAiPjxyZWN0IGlkPSJwYXR0ZXJuLWJhY2tncm91bmQiIHdpZHRoPSI0MDAlIiBoZWlnaHQ9IjQwMCUiIGZpbGw9InJnYmEoNTEsIDUxLCA1MSwxKSI+PC9yZWN0PiA8cGF0aCBmaWxsPSJyZ2JhKDAsIDAsIDAsMSkiIGQ9Ik0wIDIwIHYtMyBoMjAgdjYgaDIwIHYtMyB6Ij48L3BhdGg+PHBhdGggZmlsbD0icmdiYSgwLCAwLCAwLDEpIiBkPSJNMCAyMCB2MyBoMjAgdi02IGgyMCB2MyB6Ij48L3BhdGg+PC9wYXR0ZXJuPiAgPC9kZWZzPiA8cmVjdCBmaWxsPSJ1cmwoI3BhdHRlcm4pIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIj48L3JlY3Q+PC9zdmc+") #333;
        }      
      }
    }
    .header-bar{
      background: $black;
      height: 60px;
      width: 100%;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);

      display: flex;
      justify-content: space-between;
      padding: 0 40px;
      color: $white;

      .left-content{
        display: flex;
        height: 60px;
        justify-content: flex-start;
        align-items: center;
        max-width: 100%;

        .exp-name{
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          text-shadow: 0px 2px 1px rgba(51, 51, 51, 0.67);
          line-height: 30px;
        }        
      }

      .right-content{
        display: flex;
        height: 60px;
        justify-content: flex-start;
        align-items: center;
        opacity: 0;

        .button-header{
          background: $black;
          border: 1px solid;
          border-radius: 2px;
          padding: 3px 10px 5px;
          text-align: center;
          cursor: pointer;
          outline: none;
          min-width: 130px;
        }

        .button-header-o{
          background: $black;
          border: 1px solid;
          border-radius: 2px;
          padding: 3px 10px 5px;
          text-align: center;
          cursor: pointer;
          outline: none;
          position: relative;
          display: block;
          &:hover, &:active, &.active{
            color: $black;
            background: $white;
          }
        }

        .button-he{
          background-color: #66cc32;
          border: 1px solid;
          border-radius: 2px;
          padding: 3px 10px 5px;
          text-align: center;
          cursor: pointer;
          outline: none;
          color: #fff;
          min-width: 130px;
        }
      }

      .failed{
        background-color: $link-text-color;
        color: $white;
        margin-right: 10px;
        padding: 3px 10px 5px;
        border-radius: 2px;
      }

      .detail{
        position: relative;

        .error-box{
          position: absolute;
          right: 0;
          padding: 20px 15px 15px;
          background: #222;
          width: 250px;
          z-index: -1;
          border-radius: 2px;
          text-align: center;
          opacity: 0;
          top: 0;

          &.opened{
            opacity: 1;
            top: 44px;
            transition: all 0.2s ease-in;
          }          

          .close-button{
            float: right;
            margin-right: -3px;
            margin-top: -8px;
            width: 10px;
            height: 10px;
            display: block;
            cursor: pointer;
            img{
              display: block;
            }
          }
        }
      }

      .completed{
        background-color: #66cc32;
        color: $white;
        margin-right: 10px;
        padding: 3px 10px 5px;
        border-radius: 2px;        
      }

      &.in-progress {
        background: -moz-linear-gradient(left, #63b02d 0%, #63b02d 46%, #5d8329 46%, #5d8329 100%);
        /* FF3.6-15 */
        background: -webkit-linear-gradient(left, #63b02d 0%, #63b02d 46%, #5d8329 46%, #5d8329 100%);
        /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right, #63b02d 0%, #63b02d 46%, #5d8329 46%, #5d8329 100%);
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      }
      &.complete {
        background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIj48ZGVmcz48cGF0dGVybiBpZD0icGF0dGVybiIgd2lkdGg9IjUiIGhlaWdodD0iNSIgdmlld0JveD0iMCAwIDQwLDQwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBwYXR0ZXJuVHJhbnNmb3JtPSJyb3RhdGUoMTIwKSAiPjxyZWN0IGlkPSJwYXR0ZXJuLWJhY2tncm91bmQiIHdpZHRoPSI0MDAlIiBoZWlnaHQ9IjQwMCUiIGZpbGw9InJnYmEoNTEsIDUxLCA1MSwxKSI+PC9yZWN0PiA8cGF0aCBmaWxsPSJyZ2JhKDAsIDAsIDAsMSkiIGQ9Ik0wIDIwIHYtMyBoMjAgdjYgaDIwIHYtMyB6Ij48L3BhdGg+PHBhdGggZmlsbD0icmdiYSgwLCAwLCAwLDEpIiBkPSJNMCAyMCB2MyBoMjAgdi02IGgyMCB2MyB6Ij48L3BhdGg+PC9wYXR0ZXJuPiAgPC9kZWZzPiA8cmVjdCBmaWxsPSJ1cmwoI3BhdHRlcm4pIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIj48L3JlY3Q+PC9zdmc+") #333;
      }      
    }

    .home-link{
      height: 30px;
      border: 1px solid $white;
      border-radius: 2px;
      color: $white;
      margin-right: 20px;
      line-height: 26px;
      padding: 0 10px 0 5px;
      cursor: pointer;
      width: 152px;

      img{
        height: 24px;
        width: 30px;
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 2px;
      }
    }

    .stripes{
      cursor: context-menu;
      margin-right: 20px;
      img{
        width: 31px;
      }
    }

    .text-shadow{
      text-shadow: 0px 2px 1px rgba(51, 51, 51, 0.67);      
    }
  }
}