/*#region Global Style */

/**
 * ====================================================
 * Global Style
 * ====================================================
 */

:root {
  /* Custom */
  --login-body-bg-color: #1f283a; /* body背景顏色 */
  --btn-login-bg-color: #4469a0; /* 登入按鈕背景顏色 */
  --btn-login-text-color: #fff; /* 登入按鈕文字顏色 */
  --btn-login-hover-bg-color: #0a8391; /* 登入按鈕背景顏色:hover */
  --btn-login-hover-text-color: #fff; /* 登入按鈕文字顏色:hover */
  --line-decoration-bg-color: #058179; /* 底部裝飾線顏色 */
}

/* HTML */
html {
  position: relative;
  min-height: 100%;
  font-size: 18px;
  overflow-x: hidden !important;
}

/* 螢幕 >= md Size (手機、平板) */
@media (min-width: 768px) {
  /* HTML */
  html {
    font-size: 18px;
  }
}

/* BODY */
body {
  background-color: var(--login-body-bg-color) !important;
  background-image: url("../img/bg/login-bg.png");
  background-size: cover;
  background-position: center;
  overflow-x: hidden !important;
}

@media (max-height: 668px) {
  .app {
    padding-top: 1rem;
  }
}

@media (min-height: 668px) and (max-height: 1023px) {
  .app {
    padding-top: 2rem;
  }
}

@media (min-height: 1024px) and (max-height: 1079px) {
  .app {
    padding-top: 3rem;
  }
}

@media (min-height: 1080px) and (max-height: 1439px) {
  .app {
    padding-top: 5rem;
  }
}

@media (min-height: 1440px) {
  .app {
    padding-top: 7rem;
  }
}
/*#endregion */

/*#region Content Style */

/**
 * ====================================================
 * Content Style
 * ====================================================
 */

/* Register區塊 */
.register {
  position: center;
  padding-top: 0;
}

img {
  max-width: 90%;
  height: auto;
}

@media (max-width: 1199px) {
  .register .register-content {
    max-width: 80%;
  }
}

@media (min-width: 1200px) {
  .register .register-content {
    max-width: 55%;
  }
}

@media (max-width: 767.98px) {
  .register .register-content {
    max-width: 100%;
  }
}

/* 透明背景 */
.custom-transparent-card {
  background-color: #ffffff;
  box-shadow: 0px 0px 4px 0px #00000030;
}

.register-title {
  color: #144594;
  height: 60px;
  font-weight: bold;
  font-size: 45px;
}

.input-title {
  font-weight: bold;
  font-size: 18px;
}

@media (min-width: 1200px) {
  .btn-register {
    width: 50%;
    height: 40px;
  }

  .btn-scroll-top {
    display: none;
  }
}

@media (max-width: 1199px) {
  .btn-register {
    width: 100%;
    height: 40px;
  }
}

/*#endregion */