﻿/*符號*/

.k-i-reset {
    /*ie*/
    color: #2fb2aa;
    color: var(--mainColor);
}

.k-i-reset:hover,
.login-bullet button:hover,
.boardItem:hover {
    cursor: pointer;
}

.login-body {
    height: 100vh;
    display: flex;
    align-items: flex-start;
    padding: 20px;
}

.login-area>div+div,
.natural-area>div+div {
    margin-top: 20px;
}

.login-body:after {
    content: "";
    display: inline-block;
    background: url(../../Images/explainBg3.svg) no-repeat;
    /* explainBg.svg為樣式0 */
    /*background: url(../../Images/explainBg1.svg) no-repeat;
    /* explainBg1.svg為樣式1 */
    /*background: url(../../Images/explainBg2.svg) no-repeat;*/
    /* explainBg.svg為樣式2 */
    /*background: url(../../Images/explainBg3.svg) no-repeat;
    /* explainBg.svg為樣式3 */
    width: calc(100% - 40px);
    position: absolute;
    height: calc(100vh - 40px);
    border-radius: 20px;
    box-shadow: 0 0 4px inset #00000080;
    left: 20px;
    top: 20px;
    background: url(../../Images/explainBg.svg) no-repeat;
    background-size: cover;
    left: 0;
    top: 0;
    border-radius: 0;
    width: calc(100%);
    height: calc(100vh);
}


/*左側*/

.leftTitle {
    font-weight: bold;
    font-size: 1.8rem;
    letter-spacing: 0.1em;
    text-align: center;
    width: 100%;
    color: white;
    text-shadow: 0px 0px 6px rgb(14 42 0 / 29%);
}

.leftTitle p:nth-child(2) {
    /*ie*/
    color: #2fb2aa;
    color: var(--mainColor);
}

.leftContent:after {
    background-size: cover;
    content: "";
    width: 100%;
    height: 100%;
    display: inline-block;
    bottom: 0px;
    right: 0px;
    position: absolute;
    z-index: -1;
    background-position: right bottom;
}

.leftContent {
    padding: 40px 20px 60px 30px;
    width: 60%;
    display: inline-block;
    z-index: 1;
    /* ie */
    background: none !important;
    background: unset !important;
}

.rightContent {
    background: white;
    width: 40%;
    display: inline-block;
    box-shadow: 0px 0px 6px rgb(14 42 0 / 29%);
    padding: 40px 40px 60px 40px;
    z-index: 1;
    margin: 60px 30px 0px 20px;
    min-height: calc(100vh - 240px);
    /* ie */
    border-radius: 8px;
    border-radius: var(--borderR);
}


/*按鈕*/

.loginBtn {
    vertical-align: middle;
}

.loginBtn span {
    display: inline-block;
    width: 2px;
    height: 14px;
    vertical-align: middle;
    /* ie */
    background: #00c9ac;
    background: var(--mainChromaColor);
}

.loginBtn .btn-link:first-child {
    padding-left: 0;
}


/*說明*/

.useDesc {
    font-size: 1.125rem;
    vertical-align: middle;
    font-weight: bold;
    cursor: pointer;
}

.useDesc span {
    vertical-align: middle;
    top: -2px;
    margin-right: 10px;
    /*ie*/
    color: #2fb2aa;
    color: var(--mainColor);
}


/*登入清除按鈕*/

.buttonGroup div {
    margin: 0;
}

.buttonGroup>div+div {
    margin-left: 16px;
}


/*小logo*/

.HealthFukube {
    display: block;
    right: 40px;
    bottom: 40px;
    position: absolute;
    font-size: 1.25rem;
    vertical-align: middle;
    font-weight: bold;
    /*ie*/
    color: #616161;
    color: var(--grayText);
}

.HealthFukube img {
    width: 22px;
    height: 22px;
    vertical-align: middle;
    bottom: 1px;
}


/*左側公告*/

.login-bullet {
    width: 100%;
}

.login-bullet button {
    border: white 1px solid;
    color: white;
    font-size: 1.125rem;
    padding: 12px;
    width: calc((100% - 100px) / 4);
    margin: 14px 0 10px 0;
    /* ie */
    background: none;
    background: unset;
    border-radius: 8px;
    border-radius: var(--borderR);
}

.login-bullet button:not(:last-of-type) {
    margin-right: 20px;
}

.login-bullet button.act,
.login-bullet button:hover {
    background: white;
    border-width: 0;
    font-weight: bold;
    border: white 1px solid;
    /* ie */
    color: #2caaa2;
    color: var(--mainColor);
}


/*公告*/

#listView {
    list-style: none;
    padding: 14px;
    background: white;
    margin-top: 10px;
    height: calc(100vh - 340px);
    overflow: auto;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    /* ie */
    border: none;
    border: unset;
    border-radius: 8px;
    border-radius: var(--borderR);
}

.boardType {
    background: url(../../Images/Announcement.svg);
    width: 40px;
    height: 40px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 20px;
}

.boardType.systemType {
    background: url(../../Images/System.svg);
}

.boardText {
    /* ie */
    color: #616161;
    color: var(--grayText);
}

.boardTitle,
.boardText {
    width: calc(100% - 80px);
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.boardInfo div {
    margin-bottom: 10px;
}

.boardInfo .boardTitle,
.boardContentArea .boardTitle {
    width: 8rem;
}

.boardInfo .boardText,
.boardContentArea .boardText {
    width: calc(100% - 9rem);
    vertical-align: middle;
}

.boardContentArea {
    margin-bottom: 20px;
}

.time,
.boardTitle {
    margin: 0;
}

#listView .boardText {
    width: 100%;
}

.boardTitle {
    font-weight: bold;
    vertical-align: middle;
    /* ie */
    color: #383838;
}

.boardContent {
    width: calc(100% - 65px);
    display: inline-block;
    vertical-align: middle;
    font-size: 1.125rem;
}

#listView .boardItem:hover .boardTitle,
#listView .boardItem:hover .boardText {
    /* ie */
    color: #336562;
    color: var(--colorText);
}

#listView .boardItem {
    vertical-align: middle;
    background: white;
    padding: 11px 20px 10px 20px;
}

#listView .boardItem+.boardItem {
    /* ie */
    border-top: 1px solid #e6e6e6;
    border-top: 1px solid var(--grayBg);
}

.time {
    text-align: right;
    width: 70px;
    display: inline-block;
    font-size: 0.8rem;
    vertical-align: top;
    /* ie */
    color: #b1b1b1;
    color: var(--lightGrayText);
}

.VerifiableCodeInput {
    width: calc(100% - 128px);
}

.k-state-selected .boardTitle,
.k-state-selected .boardText {
    /* ie */
    color: #336562;
    color: var(--colorText);
}


/*選擇公告或登入*/

.menuType,
.natural-area {
    display: none;
}


/*登入切換*/

.loginMenu {
    display: inline-block;
    font-size: 1.125rem;
    margin-bottom: 20px;
    /* ie */
    background: #d6f5ee;
    background: var(--lightColor);
    border-radius: 8px;
    border-radius: var(--borderR);
}

.loginMenu button {
    font-weight: bold;
    border-width: 0;
    /* ie */
    color: #336562;
    color: var(--colorText);
    background: #d6f5ee;
    background: var(--lightColor);
    padding: 5px 12px;
    padding: var(--btnHPadding) var(--btnWPadding);
    border-radius: 8px;
    border-radius: var(--borderR);
}

.loginMenu button.act {
    color: white;
    /* ie */
    background: #2caaa2;
    background: var(--mainColor);
}


/*驗證碼*/

#VerifiableCode {
    width: calc(100% - 8rem - 14px);
}


/*footer*/

.loginFooter {
    position: absolute;
    z-index: 2;
    background: white;
    width: 60%;
    color: white;
    bottom: 0;
    padding: 12px 140px 12px 12px;
    text-align: left;
    vertical-align: middle;
    clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
    left: 20px;
    bottom: 0px;
}

.loginFooter img {
    width: 40px;
    height: 40px;
    vertical-align: middle;
}

.loginFooter p {
    display: inline-block;
    vertical-align: middle;
    font-size: 1.2rem;
    font-weight: bold;
    /* ie */
    color: #616161;
    color: var(--grayText);
}


/*響應式*/

@media screen and (max-width: 1023px) {
    .login-body {
        display: inline-block;
        height: calc(100vh - 20px);
        width: 100%;
    }
    .leftContent {
        width: 100%;
        padding: 20px;
        position: relative;
    }
    .rightContent {
        width: calc(100% - 40px);
        min-height: auto;
        position: relative;
        padding: 20px 20px 60px 20px;
        max-height: calc(100% - 260px);
        top: 0;
        overflow: auto;
        margin-top: 0px;
        margin: 0px 20px;
        /* ie */
        box-shadow: none;
        box-shadow: unset;
    }
    .login-bullet button {
        font-size: 1rem;
        width: calc((100% - 50px) / 3);
    }
    .main #listView {
        height: calc(100vh - 300px);
    }
    /*選擇公告或登入*/
    .menuType {
        display: block;
        margin: 30px 0 10px;
        background: white;
        padding: 2px;
        border-radius: 50px;
        font-weight: bold;
        /* ie */
        color: #336562;
        color: var(--colorText);
    }
    .menuType>div {
        width: calc(50% - 11px);
        display: inline-block;
        text-align: center;
        padding: 14px;
    }
    .menuType>div.act,
    .menuType>div:hover {
        border-radius: 50px;
        color: white;
        /* ie */
        background: #2caaa2;
        background: var(--mainColor);
    }
    .menuType>div:hover {
        cursor: pointer;
        color: white;
        /* ie */
        background: #2caaa2;
        background: var(--mainColor);
    }
    .menuType>div+div {
        margin-left: 16px;
    }
    .loginFooter p {
        font-size: 0.6rem;
    }
    /*公告*/
    .login-bullet {
        display: none;
    }
    /*board*/
    #listView .boardItem {
        padding: 11px 14px 10px 14px;
    }
    .boardType {
        margin-right: 14px;
    }
    #listView {
        height: calc(100vh - 365px);
    }
    .login-bullet button:not(:last-of-type) {
        margin-right: 14px;
    }
    .loginFooter img {
        width: 10px;
        height: 10px;
    }
}

@media screen and (min-width: 720px) {
    .boardInfo .boardTitle {
        width: 8rem;
    }
    .boardInfo .boardText {
        width: 10rem;
        vertical-align: middle;
    }
    .boardInfo div {
        margin: 0 0 10px 0;
    }
    .boardInfo div:not(:first-child) {
        width: 48%;
        display: inline-block;
    }
}


/*input*/

input.k-textbox {
    height: 52px;
}

@media screen and (max-width: 767px) {
    .loginFooter img {
        display: none;
    }
}

@media screen and (max-height: 805px) {
    .leftContent:after {
        background-position: center;
    }
}

@media screen and (max-height: 805px) and (min-width: 1023px) {
    #listView {
        height: calc(100vh - 300px);
    }
}


/* 20210413 更改密碼 */

.form-title {
    line-height: 3rem;
    margin: 6px 10px 7px 10px;
    border-bottom: 2px solid #5fb9dc;
    color: #35bcdb !important;
    font-size: 1.3em;
    font-weight: 700;
}


/*.iconcss {
    color: #86c7a0;
    font-size: 1.6em;
}*/

.linecss {
    margin: 10px 10px 10px 10px;
    border-bottom: 1px solid #5fb9dc;
}

.labelcss {
    color: #535c68 !important;
    font-size: 1.3em;
    font-weight: 700;
    text-align: left;
    min-width: 150px;
    margin-right: 10px;
}


/*.glyphicon {
    font-weight: 600;
}*/

.VerifiableCodeText,
.NewPasswordText,
.AgainInputPasswordText {
    position: relative;
}

.VerifiableCodeText::before {
    position: absolute;
    content: "\f502";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 23px;
    color: #666;
    left: 12px;
    z-index: 1;
    color: #86c7a0;
}

.NewPasswordText::before {
    position: absolute;
    content: "\f023";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 23px;
    color: #666;
    left: 12px;
    z-index: 1;
    color: #86c7a0;
}

.AgainInputPasswordText::before {
    position: absolute;
    content: "\f560";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 23px;
    color: #666;
    left: 12px;
    z-index: 1;
    color: #86c7a0;
}

.VerifiableCodeText input,
.NewPasswordText input,
.AgainInputPasswordText input {
    padding-left: 50px;
    border: #009997 1px solid;
    border-radius: 3px;
}


/* 20210413 忘記密碼 */

.messagecss {
    color: red;
    font-weight: 600;
}


/*.labelcss {
    min-width: 155px;
    text-align: left;
    color: #535c68 !important;
    font-weight: 600;
}*/

.spancss {
    margin-bottom: 8px;
    text-align: center;
}

.SignOnIDText,
.EmailText {
    position: relative;
}


/*.SignOnIDText::before {
        position: absolute;
        content: "\f2bd";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-size: 23px;
        color: #666;
        left: 4px;
        z-index: 1;
        color: #8691c7;
    }*/

.EmailText::before {
    position: absolute;
    content: "\f0e0";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 23px;
    color: #666;
    left: 4px;
    z-index: 1;
    color: #8691c7;
}

.SignOnIDText input,
.EmailText input {
    padding-left: 50px;
    border: #009997 1px solid;
    border-radius: 3px;
}


/* 新帳號申請 */

.newAccountContent .form-inline label {
    width: 8rem;
    margin-right: 8px;
    text-align: right;
}

.nac-passwordMsgText {
    font-size: smaller;
}

.nac-text-verifiable {
    width: 12rem !important;
}

.nac-btn-bar {
    margin-top: 20px;
}

.nac-selectDeptNo {
    display: inline-block;
    width: 100% !important;
}

.nac-selectDeptNo .k-dropdown {
    width: 39%;
}

.login-area {
    display: block;
}

.login {
    float: left;
}

.login-main:before {
    display: none;
}