/**
 * Copyright (c) 2022 - present TinyVue Authors.
 * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
 *
 * Use of this source code is governed by an MIT-style license.
 *
 * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
 * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
 * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
 *
 */
.tiny-popup__wrapper {
  z-index: 2147483647 !important;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;

  //错误提示页
  .tiny-errortips__box {
    position: absolute;
    width: 800px;
    min-height: 450px;
    max-height: 600px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    overflow: hidden;
    background: #fff;
    border: 1px solid transparent;
    box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2);
    text-align: center;
    overflow-y: auto;

    .tiny-errortips__body {
      height: 100%;
      text-align: initial;
      padding: 20px;
      color: #5a5e66;
      font-size: 14px;
      display: table;
      margin: auto;

      .errortips {
        text-align: center;
        display: table-cell;
        vertical-align: middle;

        .error-code {
          font-size: 100px;
          color: #9ac7ef;
          margin: 0 auto -45px;
          text-shadow:
            0px 2px 0 #fff,
            -2px 0px 0 #fff,
            2px 0px 0 #fff;
        }

        .error-img {
          width: 260px;
          height: 180px;
          margin: 0 auto;
          background: url(./images/errortips-bg.png) no-repeat;
        }

        .error-content {
          font-size: 16px;
          margin: 24px 0;
          font-weight: bold;
        }

        .error-bottom {
          a {
            font-weight: 800;
            cursor: pointer;
          }

          span {
            padding-right: 15px;
          }
        }
      }
    }
  }

  //sso 登录
  .tiny-sso__box {
    position: absolute;
    background: #fff;
    border: 1px solid transparent;
    box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .tiny-sso__body {
      text-align: initial;
      padding: 20px;
      color: #5a5e66;
      line-height: 32px;
      font-size: 14px;
      .tiny-sso__body-iframe {
        width: 350px;
        height: 350px;
        height: 460px\9; //兼容ie9-ie10
        overflow: hidden;

        //兼容ie10-ie11
        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
          height: 460px;
        }

        //兼容edge
        @supports (-ms-ime-align: auto) {
          height: 460px;
        }
      }
    }
  }

  //非 sso 登录
  &.login-not-sso {
    background: #dcdfe4;
    background-size: cover;

    .tiny-not-sso__box {
      width: 100%;
      height: 100%;
      overflow: hidden;

      .tiny-not-sso__body {
        width: 650px;
        height: 400px;
        background: #f4f5f9;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        border: 1px solid #d4d5d7;
        box-shadow: 0px 2px 4px #989a9e;

        .title {
          background: #ecedf1;
          background: linear-gradient(to bottom, #ecedf1, #dadde2);
          border-bottom: 1px solid #b6babf;
          padding: 16px 20px;
          font-size: 20px;
        }

        .tbl-login {
          width: 100%;
          border-collapse: collapse;
          border-spacing: 0;
          font-size: 16px;
          margin-top: 28px;

          .form-item {
            height: 60px;
            line-height: 60px;

            td.label {
              width: 30%;
              text-align: right;
              color: #5a5e66;
            }

            td.cell {
              width: 70%;
              text-align: left;
              padding-left: 12px;

              input {
                border: 1px solid #bfbfbf;
                border-radius: 2px;
                outline: none;
                width: 75%;
                height: 40px;
                line-height: 40px;
                padding: 0 8px;
                background: transparent;
                color: #5a5e66;

                &::-webkit-input-placeholder {
                  color: #999;
                }

                &:hover {
                  border-color: #999;
                }

                &:focus::-webkit-input-placeholder {
                  color: #d9d9d9;
                }

                &.text-danger {
                  border-color: var(--ti-input-border-color-error);
                }
              }

              button {
                width: 75%;
                height: 40px;
                line-height: 40px;
                padding: 0 24px;
                text-align: center;
                color: #fff;
                background-color: var(--ti-common-color-line-active);
                border: none;
                border-radius: 2px;
                transition: 0.3s;
                outline: 0;

                &:hover {
                  background-color: #40a9ff;
                }
              }

              .errmessage {
                color: #f00;
                line-height: 20px;
              }
            }
          }
        }
      }
    }
  }
}
