.modal {
  &.el-dialog {
    background: fade(#121d1c, 95);
    border: 1px solid fade(@green, 50);
    box-shadow: 0px 8px 17px 1px rgba(5, 187, 76, 0.3);

    .el-dialog__header {
      padding: 10px 0;
      border-bottom: 1px solid #323b3c;
      margin: 0 24px;
      .el-dialog__title {
        font-size: 16px;
        color: fade(@white, 75);
      }
    }

    &.el-dialog--center .el-dialog__body,
    .el-dialog__body {
      padding: 16px 24px;
    }

    &.hide-header {
      .el-dialog__header {
        border: none;
        .el-dialog__title {
          display: none;
        }
      }
    }
  }
}

.el-overlay {
  .el-message-box {
    background: fade(#121d1c, 95);
    border: 1px solid fade(@green, 50);
    box-shadow: 0px 8px 17px 1px rgba(5, 187, 76, 0.3);
  }
  .el-message-box__header {
    .el-message-box__title {
      color: @gray;
    }
  }

  .el-message-box__content {
    color: @white;
  }

  .el-message-box__btns {
    .el-button {
      height: 30px;
      flex: 0 0 auto;
      background: transparent;
      border: 1px solid @gray;
      padding: 0 1.481vh;
      color: @gray;
      font-size: 1.296vh;
      cursor: pointer;

      &.el-button--primary {
        border-color: @green;
        color: @green;
        background: fade(@green, 20);
      }
    }
  }
}

.el-message {
  &.el-message--info {
    border-color: @gray;
    background-color: fade(@gray, 20);
    color: @gray;
  }
  &.el-message--success {
    border-color: @green;
    background-color: fade(@green, 20);
    color: @green;
  }

  &.el-message--warning {
    border-color: @yellow;
    background-color: fade(@yellow, 20);
    color: @yellow;
  }

  &.el-message--error {
    border-color: @red;
    background-color: fade(@red, 20);
    color: @red;
  }
}