/*#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-position: center;
  overflow-x: hidden !important;
}

/*#endregion */

/*#region Content Style */

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

/* 取消APP內距 */
.app {
  padding-top: 0rem;
}

/* Header */
.app-header {
  background-color: transparent !important;
  box-shadow: none !important;
  position: absolute;
}

/* Header內部選單 */
.app-header .menu .menu-item .menu-link {
  height: 40px;
  padding: 0px 20px;
}

/* Login區塊 */
.login {
  padding: 0.75rem;
}

/* Login內容區塊 */
@media (min-width: 768px) {
  .login .login-content {
    max-width: 27.5rem;
  }
}

/* Login內容區塊 */
@media (max-width: 767.98px) {
  .login .login-content {
    max-width: 100%;
  }
}

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

@media (max-width: 767.98px) {
  .custom-transparent-card {
    padding: 2.1rem 1.25rem;
  }
}

/* 帳密文字輸入框群組 */
.input-icongroup {
  position: relative;
}

/* 帳密文字輸入框左側內距 */
.input-icongroup > input {
  padding-left: 40px !important;
}

/* 帳密文字輸入框icon */
.input-icongroup i {
  position: absolute;
  left: 15px;
  top: 51px;
  color: #767676 !important;
}

.input-icongroup .fa-eye-slash {
  right: 15px !important;
  left: unset !important;
}

/* 帳密文字輸入框焦點 */
.input-icongroup > .login-input:focus + i {
  color: #000;
}

/* 圖形驗證碼區塊 */
.botdetect {
  height: 42px;
  background-color: #fff;
}

/* 登入按鈕 */
.btn-login {
  background-color: var(--btn-login-bg-color);
  color: var(--btn-login-text-color);
  border-radius: 0px;
  height: 45px;
  font-size: 19px;
  font-weight: bold;
}

/* 登入按鈕:hover */
.btn-login:hover {
  background-color: var(--btn-login-hover-bg-color);
  color: var(--btn-login-hover-text-color);
}

/* 登入按鈕:focus :active */
.btn-login:focus,
.btn-login:active {
  box-shadow: 0 0 0 0.2rem rgba(0, 159, 159, 0.5) !important;
}

/* 語言選擇框 */
.language {
  position: absolute;
  top: 10px;
  right: 10px;
}

/* 語言選擇框外觀 */
.language-dropdown {
  background-color: #45495499;
  border-radius: 20px;
  white-space: nowrap;
}

/* 下拉選單 */
.dropdown-menu {
  -webkit-box-shadow: 0 8px 16px rgb(58 58 58 / 45%);
  box-shadow: 0 8px 16px rgb(58 58 58 / 45%);
}

/* 選單倒三角箭頭 */
@media (min-width: 0px) {
  .custom-downarrow {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 6px 6px 0px 6px;
    border-color: var(--custom-downarrow-border-color) transparent transparent transparent;
    position: absolute;
    right: 1.2rem;
    top: 1rem;
  }
}

/* 裝飾底線 */
.login-bottom-decoration {
  position: absolute;
  height: 0px;
  width: 0%;
  right: 0px;
  bottom: 0px;
  background-color: var(--line-decoration-bg-color);
}

/*#endregion */