/*#region Global Style */

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

:root {
    /*
    --xxl-min-width: 1660px;
    --xl-min-width: 1200px;
    --lg-min-width: 992px;
    --md-min-width: 768px;
    --sm-min-width: 576px;
    --xs-max-width: 575.98px;
*/
    /* 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;
        border: 2px #005B82 solid;
    }
}

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

/*@media (max-width: 767.98px) {
    .login .login-content {
        width: 22.5rem;
    }
}*/

/* 透明背景 */
.custom-transparent-card {
    background-color: #FFFFFF;
    padding: 2.1rem 2.75rem;
    border-radius: 1rem;
    box-shadow: 0px #f7f7f7c7;
}

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

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

/* 帳密文字輸入框icon */
.input-icongroup i {
   position: absolute;
    left: 15px;
    top: 47px;
    /*top: 15px;*/
    color: #767676 !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 */