@charset "utf-8";
/*CSS Info ======================================================================
File Name: AI_Customer.css
Editor: Eliam
CreateDate:2023/03/20
Last Editor: Rebecca
LastDate: 2023/05/24
Version: 4.0
---------------------------
【 Table of Contents 】
	DIV XHTML頁面
	Free Style
	使用jQuery
=================================================================================*/

/*===============================================================================
                         Pages typography setting
=================================================================================*/

/*    Environment analysis setting
================================================== */
section {
    margin: 1rem 1rem 5rem 1rem;
    padding: 0;
}
.chatArea {
    width: 100%;
}
.govLinkArea {
    width: 20%;
}
.chatBox {
    padding: 2rem;
    border: 1px solid #1C768B;
    height: 500px;
    overflow-y: auto;
}
.systemReply {
    display: flex;
}
.userAsk {
    text-align: right;
}
.avatar {
    margin-right: 1rem;
    text-align: center;
}
.avatar img {
    width: 5rem;
}
.replyBox {
    max-width: 80%;
    display: inline-block;
}

    .txtBar {
        padding: 0.8rem 0.8rem 0.5rem 0.8rem;
        border: 1px solid var(--mainColor3);
        border-radius: 8px;
        font-size: 1.2rem;
        background-color: #DFEEFF;
        display: block;
        width: fit-content;
        margin: 8px 0 8px auto;
        /*    white-space: pre-wrap;
    word-break: break-word;*/
    }

    .replyBox .txtBar p {
        margin-bottom: 0.3rem;
    }
        .replyBox .time {
            font-size: 0.8rem;
            color: #888;
        }

.replyBox table {
    border: solid 1px var(--mainColor3);
}
.replyBox th, .replyBox td {
    padding: 0.5rem 1rem;
    border: solid 1px var(--mainColor3);
}
.replyBox th {
    background-color: var(--mainColor3);
    color: #fff;
}

.inputArea {
    margin: 1rem 0;
    display: flex;
    gap: 1rem;
}
    .inputArea textarea {
        resize: none;
        overflow: auto;
    }

    .govLinkArea a {
        display: block;
        text-align: center;
        padding: 1rem;
        border: 2px solid #DFEEFF;
        background-color: #DFEEFF;
        margin-bottom: 1rem;
        color: #1C768B;
        font-size: 1.2rem;
    }
    .govLinkArea a img {
        width: 50%;
        padding-bottom:1rem;
        margin: auto;
        display: block;
    }
    .govLinkArea a:hover {
        border: 2px solid #1C768B;
        font-weight: bold;
    }
label.userInput {
    opacity: 0;
    position: absolute;
    z-index: -1;
}

@media only screen and (min-width: 76.25em) and (max-width: 86.1875em) { /*1220~1379*/

}

@media only screen and (min-width: 61.0525em) and (max-width: 76.1875em) { /*977~1219*/

}


@media only screen and (min-width: 48em) and (max-width:61em) { /*768~976*/
    .flexBox {
        display: block;
    }

    .chatBox {
        padding: 0.8rem;
    }

    .chatArea, .govLinkArea {
        width: unset;
    }

        .govLinkArea a img {
            width: 20%;
        }

    .avatar img {
        width: 3rem;
        margin: 8px 0;
    }

    .avatar p {
        display: none;
    }

    .replyBox .time {
        margin-bottom: 0.5rem;
    }

}

@media only screen and (max-width: 47.9735em) { /*767↓*/
    .flexBox {
        display: block;
    }

    .chatBox {
        padding: 0.8rem;
    }
    .chatArea, .govLinkArea {
        width: unset;
    }
        .govLinkArea a img {
            width: 20%;
        }
    .avatar img {
        width: 3rem;
        margin:8px 0;
    }
    .avatar p {
        display: none;
    }
    .replyBox .time {
        margin-bottom:0.5rem;
    }
}

@media only screen and (max-width: 23.4375em) { /*375↓*/
    .chatBox {
        padding: 0.8rem;
        height: 400px;
    }
}