@charset "utf-8";

* {
    font-family: 'Microsoft JhengHei';
}

:root {
    --main-color: #c3af97;
    --background-color: #fff;
    --topBar_background: linear-gradient(to right, rgba(255, 255, 255, 0.9) 0%, rgba(172, 172, 172, 0.9) 50%, rgba(190, 190, 190, 0.9) 100%);
    --list-area-background: #e6e6e6;
    --list-background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(171, 171, 170, 1) 70%, rgba(190, 189, 189, 1) 100%);
    --menu-bg-hover: linear-gradient(to bottom, #999999 0%, #666666 70%, #bebdbd 100%);
    --user-color: #ebebeb;
    --service-color: linear-gradient(to top, #e0c5f9, #98c3f7);
    --alert-bg: rgba(0, 0, 0, 0.7);
    --pop-modal-bg: rgba(0, 0, 0, 0.8);
    --font-color: #666;
    --button-color: #808080;
    --div-shadow: 0px 1px 5px 0px #b3b3b3;
    --div-border: 1px solid #c0c0c0;
    --card_active: radial-gradient(ellipse at center, rgba(239, 237, 207, 1) 0%, rgba(185, 219, 131, 1) 50%, rgba(140, 198, 63, 1) 100%);
}

button {
    cursor: pointer;
    text-decoration: none;
}

button:focus {
    outline: none;
}

select:focus {
    border: 0;
    box-shadow: none;
}

body {
    background: var(--background-color);
    font-size: 15px;
    height: 100vh;
}

.myBtn_gray {
    color: #fff;
    border: 0;
    border-radius: 5px !important;
    cursor: pointer;
    vertical-align: middle;
    padding: 2px 15px;
}

.myBtn_gray.disabled:hover,
.myBtn_gray.disabled:active {
    background: rgb(221, 221, 221);
    cursor: no-drop;
}

.myBtn_gray:hover,
.myBtn_gray:active {
    background: #666;
}

.myBtn_gold {
    background: var(--main-color);
    color: #fff;
    border: 0;
    border-radius: 5px !important;
    cursor: pointer;
    vertical-align: middle;
    padding: 2px 15px;
}

.myBtn_outline {
    border: 1px solid #b3b3b3;
    background: #fff;
    color: var(--button-color);
}

.myBtn_outline:hover,
.myBtn_outline:active,
.myBtn_outline.active {
    background: #f2f2f2;
    color: var(--button-color);
}

.myScrollbar,
.noScrollbar {
    overflow-y: auto;
}

.myScrollbar::-webkit-scrollbar {
    height: 10px;
    width: 6px;
    background-color: transparent;
    padding: 2px;
}

.myScrollbar::-webkit-scrollbar-thumb {
    background-color: #fff;
    border-radius: 5px;
}

.myScrollbar::-webkit-scrollbar-track {
    background-color: transparent;
}

.noScrollbar::-webkit-scrollbar {
    display: none;
}

.card-body.p-0 {
    min-height: 1px;
}


/* login */

.cust_login_bg {
    position: fixed;
    background: url('/qsf/assets/img/signin/signin_bg_g.png') top left no-repeat, #4d4d4d;
    background-size: contain;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.h100 {
    height: inherit;
}

.sys_title {
    text-transform: uppercase;
    display: block;
    color: #000;
}

.sys_title>h3 {
    text-align: left;
    padding-bottom: 1.5rem;
}

.sys_title>h3>span {
    background: #a37c52;
    background: -webkit-gradient(linear, left top, right top, from(#a37c52), to(#f5eee3));
    background: linear-gradient(to right, #a37c52 0%, #f5eee3 100%);
    border-radius: 55px;
    padding: 2px 20px;
    font-size: 150%;
    color: #fff;
    position: relative;
}

.sys_title>h3>span::after {
    content: "";
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: -1px;
    right: -1px;
    background: -webkit-gradient(linear, left top, right top, from(#cbb79c), to(#7f551d));
    background: linear-gradient(to right, #cbb79c 0%, #7f551d 100%);
    border-radius: 55px;
    z-index: -1;
}

.sys_title>h2 {
    letter-spacing: 4px;
    font-size: 6rem;
    line-height: 1.2;
    text-align: left;
    margin-bottom: 2rem;
}

.sys_title>h4 {
    font-size: 1.6rem;
    letter-spacing: 4px;
    text-align: center
}

form.cust_sys_login {
    background: rgba(242, 242, 242, 0.9);
    border-radius: 25px;
    -webkit-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.3);
    position: relative;
    padding: 5rem 2rem 2rem;
}

form.cust_sys_login::before {
    content: "";
    position: absolute;
    top: -3rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100px;
    height: 100px;
    background: url('/qsf/assets/img/signin/icon_service.svg') center no-repeat;
    background-size: contain;
}

form.cust_sys_login label {
    font-weight: 700;
}

form.cust_sys_login .form-control {
    border-radius: 15px;
}

form.cust_sys_login .form-control::-webkit-input-placeholder {
    font-size: 0.5rem;
}

#acc {
    background: url('/qsf/assets/img/signin/icon_number.svg') 97% 50% no-repeat, #fff;
    background-size: auto 70%;
}

#password {
    background: url('/qsf/assets/img/signin/icon_password.svg') 97% 50% no-repeat, #fff;
    background-size: auto 70%;
}

#cust_verification_1 {
    background: url('/qsf/assets/img/signin/icon_code.svg') 95% 50% no-repeat, #fff;
    background-size: auto 80%;
}

#cust_verification_1.ok {
    background: url('/qsf/assets/img/signin/icon_code_a.svg') 95% 50% no-repeat, #fff;
    background-size: auto 80%;
}

.form-group input.error::-webkit-input-placeholder {
    color: red;
}

.modal-login input.form-control.error::-webkit-input-placeholder {
  color: red;
}

.was-validated .form-control:valid::-webkit-input-placeholder,
.form-control.is-valid::-webkit-input-placeholder,
.was-validated .custom-select:valid::-webkit-input-placeholder,
.custom-select.is-valid::-webkit-input-placeholder {
    color: #666;
}

.was-validated .form-control:invalid::-webkit-input-placeholder,
.form-control.is-invalid::-webkit-input-placeholder,
.was-validated .custom-select:invalid::-webkit-input-placeholder,
.custom-select.is-invalid::-webkit-input-placeholder {
    color: red;
}

.refresh {
    background: url('/qsf/assets/img/signin/icon_update.svg') 40% 50% no-repeat, #acacac;
    border-radius: 15px;
    height: inherit;
    width: 45px;
}

.cust_loginBtn {
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(90%, #acacac), to(#bebebe));
    background: linear-gradient(to bottom, #fff 0%, #acacac 90%, #bebebe 100%);
    border: 1px solid #fff;
    color: #fff;
    border-radius: 40px;
    width: 150px;
    text-align: center;
    display: block;
    margin: 1.5rem auto 0;
}




/* index */

.top_bar {
    background: rgb(73, 71, 68);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 55px;
    color: #fff;
}

.top_bar .bd-highlight {
    position: relative;
}

.pic {
    margin-right: 10px;
}

.pic a {
    display: block;
    width: 40px;
    height: 40px;
    background: #ccc url('/qsf/assets/img/00dialogue_header/Dialogue_header_button_Pic.svg') center no-repeat;
    background-size: 50%;
    border-radius: 50%;
}

.pic a:hover,
.pic a:active {
    background: #000 url('/qsf/assets/img/00dialogue_header/Dialogue_header_button_Pic.svg') center no-repeat;
    background-size: 50%;
}

.drop-down {
    position: relative;
    width: 180px;
    height: 35px;
}

.drop-down .sele_btn {
    background: rgb(235, 235, 235);
    border-radius: 25px;
    padding: 5px;
    position: relative;
    color: #fff;
    height: inherit;
    width: inherit;
}

.drop-down .sele_btn::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    background: url(/qsf/assets/img/00dialogue_header/Dialogue_header_button_arrow_of_Status.svg) center no-repeat;
    background-size: contain;
    position: absolute;
    right: 15px;
    top: 13px;
}

.drop-down a {
    text-decoration: none;
    width: 100%;
    height: 27px;
    display: block;
    text-align: center;
}

.drop-down a span {
    display: block;
    height: inherit;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    line-height: 26px;
    color: #000;
    font-size: 14px;
    letter-spacing: 1px;
    background-repeat: no-repeat;
    background-position: 5% 50%;
    background-size: 15px;
}

.drop-down select {
    display: none;
}

.drop-down .select-list {
    position: absolute;
    top: 45px;
    left: 0;
    right: 0;
    z-index: 1;
    padding: 0;
    list-style: none;
}

.drop-down .select-list li {
    display: none;
}

.drop-down .select-list li span {
    display: block;
    background-position: 5% 50%;
    background-repeat: no-repeat;
    background-size: 15px;
    vertical-align: middle;
    line-height: 2.5rem;
    text-align: center;
    color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    background-color: var(--alert-bg);
    padding: 5px 0;
}

.drop-down .select-list li span:hover,
.drop-down .select-list li span:focus {
    background-color: var(--pop-modal-bg);
}

.select_style {
    background: #666;
    border-radius: 7px;
    padding: 3px 10px;
    color: #fff;
    font-size: 1rem;
}

.select_style option {
    background: #000;
    color: #fff;
    font-size: 0.9rem;
}

.monitor {
    position: relative;
    display: block;
    width: 84px;
    height: 42px;
    margin: 0;
}

.monitor input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('/qsf/assets/img/00dialogue_header/Dialogue_header_button_closeeye.svg') 0% 50% no-repeat, url('/qsf/assets/img/00dialogue_header/Dialogue_header_button_openeye.svg') 100% 50% no-repeat, #b3b3b3;
    background-size: contain;
    -webkit-transition: .3s;
    transition: .3s;
    border-radius: 5px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 42px;
    width: 42px;
    left: 0px;
    bottom: 0px;
    background: #fff url('/qsf/assets/img/00dialogue_header/Dialogue_header_button_closeeye_a.svg') 0% 50% no-repeat;
    background-size: contain;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 5px 0 0 5px;
}

input:checked+.slider:before {
    -webkit-transform: translateX(42px);
    transform: translateX(42px);
    background: #fff url('/qsf/assets/img/00dialogue_header/Dialogue_header_button_openeye_a.svg') 0% 50% no-repeat;
    background-size: contain;
    border-radius: 0 5px 5px 0;
}

.new_task {
    display: block;
    width: 42px;
    height: 42px;
    background: url('/qsf/assets/img/00dialogue_header/Dialogue_header_button_handover_shortcut.svg') center no-repeat, #fff;
    background-size: 90%;
    border-radius: 5px;
    border: 0;
    position: relative;
}

.new_notice {
    display: block;
    width: 42px;
    height: 42px;
    background: url('/qsf/assets/img/00dialogue_header/Dialogue_header_button_announcement_shortcut.svg') center no-repeat, #fff;
    background-size: 90%;
    border-radius: 5px;
    border: 0;
    position: relative;
}

.logout_div {
    margin-left: 30px;
    position: relative;
}

.logout_div::before {
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    bottom: 0;
    left: -15px;
    width: 1px;
    height: 42px;
    background: #fff;
}

.logout {
    display: block;
    width: 42px;
    height: 42px;
    background: url('/qsf/assets/img/00dialogue_header/Dialogue_header_button_Signout.svg') center no-repeat, #fff;
    background-size: 90%;
    border-radius: 5px;
}

.header {
    background: url('/qsf/assets/img/page_background/Handover_background-01.png') 0% 50% no-repeat, url('/qsf/assets/img/page_background/Handover_background-02.png') 100% 50% no-repeat;
    background-size: contain;
    height: 125px;
    padding: 75px 0 15px;
}

.menu {
    list-style: none;
}

.menu li {
    margin: 5px 10px;
}

.menu li a,
.menu li a:not([href]):not([tabindex]) {
    text-decoration: none;
    background: linear-gradient(to bottom, #e2e2e2 0%, #ababab 30%, #868686 68%, #9c9c9c 100%);
    border: var(--div-border);
    border-radius: 55px;
    color: #fff;
    padding: 4px 30px;
    cursor: pointer;
    font-weight: bold;
}

.menu li a.active,
.menu li a:not([href]):not([tabindex]).active {
    background: linear-gradient(to bottom, #a0a0a0 0%, #777777 15%, #383838 68%, #6b6b6b 100%);
}

.menu li a:hover,
.menu li a:active,
.menu li a.active {
    background: var(--menu-bg-hover);
}

.admin-main {
    /* height: calc(99vh - 30px); */
    height: calc(100vh - 92px);
    overflow: hidden;
    background: none;
}

.admin-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    height: inherit;
    background: none;
    position: relative;
}

.left,
.center,
.right {
    height: inherit;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.left {
    flex: 1;
    transition: margin .2s;
}

.left.shorten {
    margin-left: -20%;
    transition: margin .2s;
}

.center {
    flex: 3;
    height: 100%;
}

.right {
    flex: none;
    width: 400px;
    transition: margin .2s;
}

.right.shorten {
    margin-right: -20%;
    transition: margin .2s;
}


.right .tab-content {
    flex: 1;
    /* height: 100%; */
    max-height: calc(100% - 65px);
}

#hot_key-tabContent,
#accounting-tabContent {
    max-height: calc(100% - 50px);
}

.right .tab-pane.active {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    height: 100%;
}

.body_content {
    flex-wrap: nowrap;
    height: calc(95vh - 125px);
}

.body_content .tab-content {
    height: 100%;
    flex: 1;
}

.body_content .tab-content .tab-pane {
    height: 100%;
}

.maxWidth {
    max-width: 245px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    flex-basis: auto;
}

.body_center {
    padding: 0;
}

.body_right {
    padding: 0;
}

.user_num {
    background: linear-gradient(to bottom, rgb(255, 255, 255), rgb(235, 235, 235));
    border: var(--div-border);
    text-align: center;
    color: var(--font-color);
    margin: 0;
    flex: none;
    height: 65px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    padding: 7px 10px;
    font-size: 13px;
}

.user_num_icon {
    display: inline-block;
    width: 40px;
    height: 25px;
    background: url('/qsf/assets/img/02dialogue_leftbody/Dialogue_leftbody_icon_servicelist.svg') center no-repeat;
    background-size: contain;
    vertical-align: middle;
}

.zoom_btn {
    width: 30px;
    display: inline-block;
    background: url('/qsf/assets/img/02dialogue_leftbody/Dialogue_leftbody_button_arrowleft.svg') center no-repeat;
    background-size: 25%;
    cursor: pointer;
    border: 0;
    border-left: var(--div-border);
}

.zoom_btn:hover,
.zoom_btn:active {
    background: url('/qsf/assets/img/02dialogue_leftbody/Dialogue_leftbody_button_arrowleft_a.svg') center no-repeat;
    background-size: 25%;
}

.client_list>div.wtfBtn {
    background-image: -webkit-linear-gradient(270deg, rgb(118, 214, 255), rgb(118, 214, 255));
    padding: 6px 5px;
    text-align: right;
    height: auto
}

button.shorten {
    width: 50px;
    height: 30px;
    border-radius: 5px;
    border: 1px solid #aaa;
    background: #fff url('/qsf/assets/img/02dialogue_leftbody/icon_shrink.svg') center no-repeat;
    background-size: auto 80%;
    box-shadow: none;
}

.right button.shorten {
    transform: rotate3d(0, 1, 0, 180deg);
    margin-right: 10px;
}

.client_manage {
    margin: 0;
    flex: 1 1 auto;
    background-color: #f3f3f3;
    height: 100%;
    border-top: 1px solid #bfbfbf;
}

.client_form {
    background: var(--main-color);
    padding: 3px;
}

.form-check {
    position: relative;
    padding: 0;
}

.client_form .form-check input {
    position: absolute;
    right: -25px;
    top: 30px;
    opacity: 0;
}

.client_form .form-check input+label {
    width: 61px;
    height: 61px;
    border-radius: 5px;
    cursor: pointer;
}

label[for="client_all"] {
    background: url('/qsf/assets/img/02dialogue_leftbody/Dialogue_leftbody_button_all.svg') center no-repeat,
        var(--main-color);
    background-size: 60%;
}

label[for="client_online"] {
    background: url('/qsf/assets/img/02dialogue_leftbody/Dialogue_leftbody_button_online.svg') center no-repeat,
        var(--main-color);
    background-size: 60%;
}

label[for="client_wait"] {
    background: url('/qsf/assets/img/02dialogue_leftbody/Dialogue_leftbody_button_wait.svg') center no-repeat,
        var(--main-color);
    background-size: 60%;
}

.client_form .form-check input:checked+label {
    background-color: #998675;
}

.client_list,
.organization_list {
    background: var(--list-area-background);
    overflow: auto;
    height: 100%;
}

.client_list::-webkit-scrollba,
.organization_list::-webkit-scrollbar {
    height: 10px;
    width: 6px;
    background-color: transparent;
    padding: 2px;
}


.client_list::-webkit-scrollbar-thumb,
.organization_list::-webkit-scrollbar-thumb {
    background-color: #fff;
    border-radius: 5px;
}

.client_list::-webkit-scrollbar-track,
.organization_list::-webkit-scrollbar-track {
    background-color: transparent;
}



.client_list>div,
.organization_list>div {
    background: #fff;
    height: 50px;
    vertical-align: middle;
    padding: 0;
    margin-bottom: 1px;
    -webkit-box-shadow: var(--div-shadow);
    box-shadow: var(--div-shadow);
    cursor: pointer;
    position: relative;
}

.client_list button.am-btn.active {
    background: rgb(255, 212, 121);
    color: #000;
}

.client_list button.am-btn span {
    display: block;
}

.client_list button.am-btn span.am-icon-phone-font {
    font-size: 12px;
}

.client_list>div.talking {
    background: url('/qsf/assets/img/02dialogue_leftbody/Dialogue_body_button_speaking.svg') 95% 50% no-repeat, var(--list-background);
    background-size: auto 50%, cover;
}

.organization_list>div.talking {
    background: var(--list-background);
    background-size: cover;
}

.organizationFormNotice {
    height: calc(2.25rem + 2px);
    margin-bottom: 1rem;
    line-height: 1rem;
    display: flex;
    text-align: left;
    color: red;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.time_light {
    border-radius: 50%;
    height: 13px;
    width: 13px;
    margin: auto 0;
    display: inline-block;
    border: 1px solid rgb(214, 214, 214);
}

.light_green {
    /*background: url('/qsf/assets/img/02dialogue_leftbody/dialogue_icon_colorlight_60s.svg')center no-repeat,
        #82c687;*/
    background: rgb(212, 251, 121);
    background-size: contain;
}

.light_yellow {
    background: url('/qsf/assets/img/02dialogue_leftbody/dialogue_icon_colorlight_120s.svg')center no-repeat,
        #e2c943;
    /*background: rgb(212, 251, 121);*/
    background-size: contain;
}

.light_red {
    /*background: url('/qsf/assets/img/02dialogue_leftbody/dialogue_icon_colorlight_180s.svg')center no-repeat,
        #e25f5f;*/
    background: rgb(255, 147, 0);
    background-size: contain;
}

.UserName {
    color: var(--font-color);
    font-weight: 700;
    margin: auto 0;
    padding: 0 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
}

.preview {
    display: block;
    color: #b3b3b3;
    font-size: 0.7rem;
    margin: auto 0px auto 5px;
    width: 90px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.unread {
    display: inline-block;
    background: #006dd9;
    border-radius: 50%;
    height: 10px;
    width: 10px;
    margin: auto;
    padding: 0 5px;
}

.body_center_top {
    border-top: var(--div-border);
    position: relative;
    height: 65px;
    padding: 0 20px;
    background: linear-gradient(to bottom, #e9ebed 0%,#f8f9f9 50%,#f8f9f9 50%,#f5f6f7 51%,#ffffff 100%);
    display: flex;
}
/*右上按鈕*/
.ru_btn.list-group {
    display: flex;
    flex-direction: initial;
    padding: 0 20px;
    margin-bottom: 0;
}


.user_title {
    background: url("/qsf/assets/img/chatroom/logo.png") 0% center no-repeat;
    background-size: auto 100%;
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    font-size: 8px;
    padding-top: 3px;
    line-height: 65px;
    padding-left: 13vh;
    line-height: 12px;
    text-align: left;
    display: flex;
    align-items: center;
}

.user_title::after {
    content: "TG智能客服服务";
    color: #5e5e5e;
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}
@media (max-width: 768px) {
    .user_title::after {
        content: "";
    }
}

.user_title>img {
    padding-right: 10px;
}

.body_center_top>button,
.body_center_top>a {
    background: #fff;
    border: var(--div-border);
    border-radius: 10px;
    margin: 0;
    cursor: pointer;
    color: var(--font-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-items: center;
    height: 100%;
    padding-left: 25px;
    font-size: 13px;
    letter-spacing: 1px;
}

.body_center_top>button:active,
.body_center_top>a:hover,
.body_center_top>a.active {
    background-color: #e6e6e6;
}

.body_center_top>.open_talk {
    border-left: var(--div-border);
}

.open_talk::before {
    content: "";
    display: inline-block;
    width: 35px;
    height: 35px;
    margin-right: 5px;
    background: url('/qsf/assets/img/01dialogue_body/Dialogue_body_button_speaking.svg') center no-repeat;
    background-size: contain;
    vertical-align: middle;
}

.transfer {
    flex: 0 1 auto;
    width: 145px;
}

.transfer::before {
    content: "";
    display: inline-block;
    width: 25px;
    height: 25px;
    margin-right: 5px;
    background: url('/qsf/assets/img/01dialogue_body/Dialogue_body_button_transvisiter.svg') center no-repeat;
    background-size: contain;
    vertical-align: middle;
}

.talk_content {
    background: url('/qsf/assets/img/chatroom/background-w.png') center fixed,#fff;
    background-size: cover;
    flex: 1;
    -webkit-box-shadow: inset var(--div-shadow);
    box-shadow: inset var(--div-shadow);
    position: relative;
    overflow: hidden;
    height: 100%;
}

/*.talk_content::-webkit-scrollbar {
    display: none;
}*/

.tallk_area::-webkit-scrollbar {
    display: block;
    width: 12px;
}

.tallk_area::-webkit-scrollbar-track {
    background: transparent;
}

.tallk_area::-webkit-scrollbar-thumb {
    background-image: linear-gradient(to right, #ededed , #fdfdfd);
    border: 1px solid #d5d6d8;
    border-radius: 20px;
}

.tallk_area::-webkit-scrollbar-thumb:hover {
    background: #fff;
}

.am-comment-main:after,
.am-comment-main:before {
    content: none;
}

.am-comment-main {
    border: 0;
    background: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0 !important;
    padding-bottom: 15px;
}

.am-comment-flip .am-comment-main {
    align-items: flex-end;
}

.am-comment-actions,
.am-comment-meta {
    padding: 8px 10px;
}

.am-comment-hd {
    border-radius: 5px 5px 0 0;
    background: none;
    border: 0;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.am-comment-bd {
    border-radius: 0 10px 10px 10px;
    background: var(--service-color);
    margin-top: 5px;
    padding: 15px 15px 10px;
    word-break: break-all;
    position: relative;
    overflow: visible;
}

.am-comment-bd img {
    cursor: pointer;
}

.am-comment-flip .am-comment-hd {
    flex-direction: row-reverse;
}

.am-comment-flip .am-comment-bd {
    border-radius: 10px 0 10px 10px;
    background: var(--user-color);
    max-width: 90%;
}

.am-comment-flip .am-comment-actions,
.am-comment-flip .am-comment-meta {
    text-align: right;
}

.am-comment-main:after {
    border-right-color: var(--user-color);
}

.am-comment-flip .am-comment-main:after {
    border-left-color: var(--service-color);
}

.am-text-success {
    margin-top: 2em;
}

.other {
    text-align: left;
    margin-bottom: 25px;
}

.mine {
  text-align: right;
  margin-bottom: 25px;
  overflow: hidden;
}

.content_info {
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}

.content_info p {
    margin: 0;
}


.photo,
.info {
    display: inline-block;
    vertical-align: middle;
    color: #999;
    line-height: 17px;
    padding: 0 5px;
    font-size: 80%;
}

.photo {
    width: 50px;
}

.mine .photo {
    width: 50px;
    float: right;
}

.content {
    display: block;
    color: #000;
    min-height: 35px;
    max-width: 70%;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-size: 85%;
    line-height: 150%;
    padding: 7px 15px;
    clear: both;
    word-break: break-word;
}

.other .content {
    background-color: #b4d381;
    border-radius: 0 10px 10px 10px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    display: table;
}

.mine .content {
    background-color: #b4dfe4;
    border-radius: 10px 0 10px 10px;
    float: right;
    text-align: left;
}

img.content {
    width: 40%;
    height: auto;
    padding: 5px;
    max-height: 250px;
    cursor: pointer;
}

.tools {
    flex: none;
    height: 50px;
    background: linear-gradient(to bottom, #ffffff,#ebebeb);
    margin: 0;
    position: relative;
    align-items: center;
    padding: 5px 10px;
    border: var(--div-border);
}

.fileupload_btn input:not(disabled)+label {
    width: 40px;
    height: 40px;
    margin: 0 5px 0 0;
    border-radius: 5px;
    cursor: pointer;
    background: url('/qsf/assets/img/01dialogue_body/Dialogue_body_button_Uploadfile_a.svg') center no-repeat, #fff;
    background-size: 60%;
    border: 1px solid #666;
    box-shadow: 1px 1px 1px 0 #ccc;
}

.fileupload_btn input[disabled]+label {
    background: url('/qsf/assets/img/01dialogue_body/Dialogue_body_button_Uploadfile.svg') center no-repeat, #e6e6e6;
    background-size: 60%;
    border-color: #ccc;
    color: #999;
    box-shadow: none;
}

.fileupload_btn>input {
    display: none;
}

.sticker {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    border: 0;
    cursor: pointer;
    /* background: url('/qsf/assets/img/01dialogue_body/Dialogue_body_button_stiker.svg') center no-repeat, #e6e6e6; */
    /* background-size: 60%; */
}

#emojiDiv {
    position: absolute;
    top: auto;
    left: 0;
    right: auto;
    bottom: 50px;
}

.emoji-menu {
    position: static;
    right: auto;
    top: auto;
}

.emoji:not(disabled) {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    border: 0;
    cursor: pointer;
    background: url('/qsf/assets/img/01dialogue_body/Dialogue_body_button_emoticon_a.svg') center no-repeat, #fff;
    background-size: 60%;
    border: 1px solid #666;
    box-shadow: 1px 1px 1px 0 #ccc;
}

.emoji[disabled] {
    background: url('/qsf/assets/img/01dialogue_body/Dialogue_body_button_emoticon.svg') center no-repeat, #e6e6e6;
    background-size: 60%;
    color: #999;
    cursor: default;
    box-shadow: none;
    border: 1px solid #ccc;
}

.end_talk:not(disabled) {
    width: 130px;
    height: 40px;
    color: #fff;
    border-radius: 5px;
    vertical-align: middle;
    background: linear-gradient(to top, #f0877e, #f9d487);
    border: 1px solid #d5d5d5;
    position: absolute;
    top: 4px;
    right: 10;
}

.end_talk::before {
    content: "";
    background: url(/qsf/assets/img/chatroom/button_sign_out.svg) 10% 50% no-repeat;
    background-size: cover;
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 2px;
}

.end_talk[disabled] {
    background: #e6e6e6;
    color: #999;
    cursor: default;
    border-color: #c0c0c0;
    box-shadow: none;
    position: absolute;
    top: 4px;
    right: 10;
}

.textarea {
    background: #fff;
    margin: 0;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    padding-right: 10px;
}

.textarea textarea,
.textarea .input_message {
    border: 0;
    max-height: 85px;
    word-break: break-word;
    padding: 10px 15px;
    flex: 1;
}

.textarea textarea:focus,
.textarea .input_message:focus {
    outline: 0px !important;
    -webkit-appearance: none;
}

.textarea textarea, .textarea .input_message {
    border: 0;
    height: 85px;
    word-break: break-word;
    padding: 10px 15px;
    flex: 1;
    display: inline-block;
    line-height: normal;
}

.textarea .am-btn:not(disabled) {
    margin: auto;
    font-size: 14px;
    background: url(/qsf/assets/img/chatroom/icon_send.svg) 10% 50% no-repeat,linear-gradient(to top, #7a7a7a, #c0c0c0);
    background-size: auto 70%,cover;
    color: #fff;
    border: 0;
    width: 100%;
    max-width: 120px;
    height: 40px;
    border-radius: 5px;
    padding-left: 25px;
    cursor: pointer;
    text-align: center;
    letter-spacing: 2px;
}

.textarea .am-btn[disabled] {
    opacity: .7;
}

@media (max-width: 768px) {
    .talk_content {
        background: url(/qsf/assets/img/chatroom/background.png) center no-repeat,#fff;
        background-size: cover;
    }

    .user_title {
        text-align: right;
    }
    
 

    .textarea .am-btn:not(disabled) {
        margin: auto;
        font-size: 0;
        background: url(/qsf/assets/img/chatroom/icon_send_s.svg) center no-repeat;
        background-size: cover;
        color: #fff;
        border: 0;
        width: 30px;
        height: 30px;
        border-radius: 5px;
        padding-left: 0;
        cursor: pointer;
        text-align: center;
        letter-spacing: 0;
    }
    
    .textarea .am-btn[disabled] {
        opacity: .7;
    }

    .sys_title {
        display: none;
    }

    form.cust_sys_login {
        background: rgba(242, 242, 242, 0.9);
        border-radius: 25px;
        -webkit-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.3);
        box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.3);
        position: relative;
        padding: 3.5rem 2rem 1rem;
        width: 85%;
    }

    form.cust_sys_login::before {
        content: "";
        position: absolute;
        top: -3rem;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 100px;
        height: 100px;
        background: url('/qsf/assets/img/signin/icon_service.svg') center no-repeat;
        background-size: contain;
    }

    .talk_content {
        background: url(/qsf/assets/img/chatroom/background.png) center no-repeat,#fff;
        background-size: cover;
    }

    .user_title {
        text-align: right;
    }

    .textarea textarea, .textarea .input_message {
        min-height: 30px;
        height: auto;
        max-height: 85px;
        word-break: break-word;
        padding: 10px 15px;
        flex: 1;
        border-radius: 30px;
        border: 1px solid #d6d6d6;
        margin: 5px;
        display: inline-block;
    }

    .textarea .am-btn:not(disabled) {
        margin: auto;
        font-size: 0;
        background: url(/qsf/assets/img/chatroom/icon_send_s.svg) center no-repeat;
        background-size: cover;
        color: #fff;
        border: 0;
        width: 30px;
        height: 30px;
        border-radius: 5px;
        padding-left: 0;
        cursor: pointer;
        text-align: center;
        letter-spacing: 0;
    }
    
    .textarea .am-btn[disabled] {
        opacity: .7;
    }

    .sys_title {
        display: none;
    }

    form.cust_sys_login {
        background: rgba(242, 242, 242, 0.9);
        border-radius: 25px;
        -webkit-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.3);
        box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.3);
        position: relative;
        padding: 3.5rem 2rem 1rem;
        width: 85%;
    }

    form.cust_sys_login::before {
        content: "";
        position: absolute;
        top: -3rem;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 100px;
        height: 100px;
        background: url('/qsf/assets/img/signin/icon_service.svg') center no-repeat;
        background-size: contain;
    }
}
/* .am-icon-commenting {
    display: block;
} */

.am-icon-commenting::before {
    font-size: 1.5em;
    margin-bottom: .2em;
}

.send {
    width: 156px;
    height: 64px;
    border-radius: 10px;
    background: url('/qsf/assets/img/01dialogue_body/Dialogue_body_button_sendmassage.svg') 10% 50% no-repeat, #ccc;
    color: #fff;
    border: 0;
    text-align: center;
    padding-left: 25px;
    letter-spacing: 2px;
    cursor: pointer;
}


.body_right_top {
    background: linear-gradient(to bottom, rgb(255, 255, 255), rgb(235, 235, 235));
    height: 65px;
    border: var(--div-border);
    color: var(--font-color);
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    flex: 0 0 auto;
    padding: 7px 10px;
}

.body_right_top>a {
    background: #fff;
    border: var(--div-border);
    color: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-decoration: none;
    border-radius: 10px;
    font-size: 13px;
    letter-spacing: 1px;
    margin: 0 3px;
}

.body_right_top>a.active {
    background: rgb(145, 145, 145);
    color: #fff;
    box-shadow: inset rgba(0, 0, 0, 0.5) 0px 0px 3px;
    overflow: hidden;
}

.body_right_top>a.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 5px;
    width: 100%;
    background: rgb(255, 212, 121);
}

.hot_key::before {
    content: "";
    display: inline-block;
    width: 23px;
    height: 23px;
    margin-right: 5px;
    background: url('/qsf/assets/img/03dialogue_rightbody/Dialogue_Rightbody_button_Fast_talk.svg') center no-repeat;
    background-size: contain;
    vertical-align: middle;
}

.accounting::before {
    content: "";
    display: inline-block;
    width: 23px;
    height: 23px;
    margin-right: 5px;
    background: url('/qsf/assets/img/03dialogue_rightbody/Dialogue_Rightbody_button_Accounting.svg') center no-repeat;
    background-size: contain;
    vertical-align: middle;
}

.hot_key_tab {
    background: rgb(255, 212, 121);
    margin: 0;
    flex: none;
    height: 50px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    padding: 15px 10px 0;
    flex-direction: row;
}

.hot_key_tab>a {
    background: #fae5b7;
    color: var(--font-color);
    text-align: center;
    text-decoration: none;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    position: relative;
    padding: 0;
    display: inline-block;
    width: 90px;
    height: 100%;
    border-radius: 5px 5px 0 0;
    padding-top: 5px;
    font-size: 13px;
    letter-spacing: 1px;
    z-index: 0;
    margin-right: 3px;
}

.hot_key_tab>a.active {
    background: #fff;
    font-weight: 700;
    z-index: 3;
}

.commonly_hotkey_tools {
    background: linear-gradient(to bottom, rgb(255, 255, 255), rgb(235, 235, 235));
    ;
    padding: 5px 10px;
    border-bottom: var(--div-border);
    flex: none;
    height: 55px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
}

.commonly_hotkey_tools button {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    border: 0;
    margin: 0 3px;
    flex: none;

}

.commonly_hotkey_tools button:not(disabled) {
    background-color: #fff;
    cursor: pointer;
    box-shadow: 1px 1px 2px 0px #c0c0c0;
}

.commonly_hotkey_tools button[disabled] {
    background-color: #e6e6e6;
    cursor: default;
    box-shadow: none;
}

.add {
    background: url('/qsf/assets/img/03dialogue_rightbody/Dialogue_Rightbody_button_Tool_added.svg') center no-repeat;
    background-size: 75%;
}

.edit {
    background: url('/qsf/assets/img/03dialogue_rightbody/Dialogue_Rightbody_button_Tool_editing.svg') center no-repeat;
    background-size: 75%;
}

.del {
    background: url('/qsf/assets/img/03dialogue_rightbody/Dialogue_Rightbody_button_Tool_removal.svg') center no-repeat;
    background-size: 75%;
}

/*
.search:valid {
    background: url('/qsf/assets/img/03dialogue_rightbody/Dialogue_Rightbody_button_icon_search.svg') 15px 50% no-repeat, #fff;
    background-size: auto 50%;
}*/
.search {
    background: url('/qsf/assets/img/03dialogue_rightbody/Dialogue_Rightbody_button_icon_search.svg') 15px 50% no-repeat, #fff;
    background-size: auto 50%;
    border-radius: 50px;
    height: 30px;
    border: 0;
    margin-right: 10px;
    padding-left: 40px;
}

/*
.search:focus {
    background: #fff;
    outline: none;
    border: 0;
}*/

.commonly_hotkey_list {
    background: rgb(192, 192, 192);
    flex: 1;
    overflow-x: hidden;
    overflow-y: scroll;
}
.commonly_hotkey_list::-webkit-scrollbar {
    -webkit-appearance: none;
}
.commonly_hotkey_list::-webkit-scrollbar:vertical {
    width: 11px;
}
.commonly_hotkey_list::-webkit-scrollbar:horizontal {
    height: 10px;
}
.commonly_hotkey_list::-webkit-scrollbar-track {
    background-color: #ddd;
}
.commonly_hotkey_list::-webkit-scrollbar-button {
    background: #fff url(/qsf/assets/img/03dialogue_rightbody/Dialogue_Rightbody_button_Layer_arrow_down.svg) 0% 60% no-repeat;
    background-size: contain;
}
.commonly_hotkey_list::-webkit-scrollbar-button:single-button:vertical:decrement {
    background: #fff url(/qsf/assets/img/03dialogue_rightbody/Dialogue_Rightbody_button_Layer_arrow_up.svg) 0% 60% no-repeat;
    background-size: contain;
}
.commonly_hotkey_list::-webkit-scrollbar-thumb {
    border-radius: 3px;
    border: 2px solid #ddd;
    background-color: #fff;
}

.commonly_hotkey_list .accordion {
    padding: 5px 0 5px 5px;
    background: none;
}

.commonly_hotkey_list .card {
  position: inherit;
  border: 0;
  background: none;
  margin-bottom: 5px;
  overflow: visible;
  min-width: 240px;
}

.commonly_hotkey_list .card-header {
    background: linear-gradient(to bottom, rgb(255, 255, 255), rgb(235, 235, 235));
    padding: 10px 5px;
    cursor: pointer;
    position: relative;
}


.commonly_hotkey_list .card-header h5.name {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    margin: 0;
    position: relative;
}

.commonly_hotkey_list .card-header .btn-link {
    text-align: left;
    padding: 0;
    color: #000;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-size: 14px;
    width: 100%;
}

/*
.commonly_hotkey_list .collapsing,
.commonly_hotkey_list .collapse.show {
    margin: -3px 0 3px;
}*/
.commonly_hotkey_list .card-header .btn-link.collapsed::before,
.handover_list .card-header .btn-link.collapsed::before {
    content: "";
    background: url('/qsf/assets/img/03dialogue_rightbody/Dialogue_Rightbody_button_Layer_arrow_right.svg') 0% 60% no-repeat;
    background-size: contain;
    padding: 10px;
    margin-right: 5px;
}

.commonly_hotkey_list .card-header .btn-link::before,
.handover_list .card-header .btn-link::before {
    content: "";
    background: url('/qsf/assets/img/03dialogue_rightbody/Dialogue_Rightbody_button_Layer_arrow_down.svg') 0% 60% no-repeat;
    background-size: contain;
    padding: 10px;
    margin-right: 5px;
}

.commonly_hotkey_list .list-group-item {
  border: 0;
  background: #fff;
  color: var(--font-color);
  border-radius: 0;
  cursor: pointer;
  position: inherit;
  text-overflow: ellipsis;
  width: 100%;
  font-size: 13px;
  border-bottom: var(--div-border);
  margin: 0;
}

.commonly_hotkey_list .list-group-item:last-child {
    border-radius: 0px 0px 5px 5px;
}

.commonly_hotkey_list .list-group-item:hover,
.commonly_hotkey_list .list-group-item.active,
.commonly_hotkey_list .list-group-item.edit_card_content {
    background: rgb(243, 236, 225);
}

#hot_key-tabContent input[name="titleStr"] {
    height: 100%;
    width: 135px;
    border: 1px solid #ccc;
    text-align: left;
    padding: 0;
}

.copyit {
    background: url('/qsf/assets/img/03dialogue_rightbody/Dialogue_Rightbody_button_Tool_copy.svg') center no-repeat, #e6e6e6;
    background-size: contain;
    height: 25px;
    width: 25px;
    position: absolute;
    top: 7px;
    right: 5px;
    border-radius: 50%;
    display: none;
}

.quick_send {
    background: url('/qsf/assets/img/01dialogue_body/Dialogue_body_button_speaking.svg') 10% 50% no-repeat;
    background-size: contain;
    height: 25px;
    width: 25px;
    position: absolute;
    top: 7px;
    right: 80px;
    border-radius: 50%;
    display: none;
}

.hotsup {
  background-color: transparent;
  background-image: url(/qsf/assets/img/03dialogue_rightbody/arrow-up.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50% auto;
  height: 26px;
  width: 26px;
  /* position: absolute;
  top: 4px;
  right: 20px; */
  border-radius: 50%;
  display: none;
  border: 1px solid #999999;
  float: right;
  margin-top: -4px;
  margin-left:5px;
}

.hotsdown {
  background-color: transparent;
  background-image: url(/qsf/assets/img/03dialogue_rightbody/arrow-down.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50% auto;
  height: 26px;
  width: 26px;
  /* position: absolute;
  top: 4px;
  right: 55px; */
  border-radius: 50%;
  display: none;
  border: 1px solid #999999;
  float: right;
  margin-top: -4px;
  margin-left:5px;
}

.list-group-item:hover .copyit{
    display: block;
}

.list-group-item:hover .quick_send{
    display: block;
}

.list-group-item:hover .hotsup{
    display: block;
}

.list-group-item:hover .hotsdown{
    display: block;
}

.edit_card_content form {
    background: #fff;
    border-radius: 5px;
    padding: 5px;
}

.edit_card_content textarea {
    border: 0;
    width: 100%;
}

.edit_card_content textarea::-webkit-input-placeholder {
    font-size: 50%;
}

.btnsgroup {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    justify-items: center;
}

.edit_card_content button {
   
}

.edit_card_content button:hover,
.edit_card_content button:active {
    background: #666;
}

.card_btn,
a.card_btn,
button.card_btn {
    background: var(--main-color);
    color: #fff;
    border: 0;
    border-radius: 5px !important;
    cursor: pointer;
    width: 45px;
    height: 25px;
    font-size: 12px;
    white-space: nowrap;
    word-break: keep-all;
    position: absolute;
    right: 0;
}

button.editCardHeader {
    right: 50px;
}

button.upP {
    right: 150px;
}

button.downP {
    right: 100px;
}

button.upH {
    right: 150px;
}

button.downH {
    right: 100px;
}
/*
.editCardHeader,
.delIt,
.edit_card_content {
    display: none;
}
*/

.add_card {
    flex: none;
    background: #fff;
    border-top: 1px solid #e6e6e6;
    padding: 10px 40px;
}

.add_card input {
    border: 0;
    background: #e6e6e6;
}

.add_card .input-group-append {
    margin-left: 1rem;
    border-radius: 5px;
}

.add_card .btn {
    background: var(--main-color);
    color: #fff;
    border: 0;
    border-radius: 5px !important;
    cursor: pointer;
}

.REDunread::after {
    content: "";
    background: #ff0000;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    position: absolute;
    right: -3px;
    bottom: -3px;
}

.pop_none {
    display: none;
}

.pop_task,
.pop_notice {
    position: absolute;
    padding-top: 10px;
    z-index: 99;
    width: 380px;
    left: 5px;
    top: 87%;
    font-size: 0.7rem;
    color: #ccc;
}

.pop_task::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 25%;
    border: 8px solid var(--alert-bg);
    border-color: transparent transparent var(--alert-bg) transparent;
}

.pop_notice::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 8.5%;
    border: 8px solid var(--alert-bg);
    border-color: transparent transparent var(--alert-bg) transparent;
}

.pop_content {
    width: 380px;
    height: auto;
    max-height: 400px;
    overflow-x: hidden;
    overflow-y: auto;
}

.pop_content>a {
    display: block;
    background: var(--alert-bg);
    padding: 10px;
    color: inherit;
    text-decoration: none;
    height: 80px;
}

.pop_content>a:hover,
.pop_content>a:active {
    background: rgba(0, 0, 0, 0.6);
}

.unread_info>div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pop_content img {
    width: 45px;
    height: 45px;
}

.pop_content p {
    color: #fff;
    font-size: 0.9rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pop_content .unread_doc {
    color: #ff0000;
    text-align: right;
    font-size: 0.7rem;
}

.pop_content .unread_doc::before {
    content: "";
    background: #ff0000;
    display: inline-block;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    margin-right: 5px;
}

.pop_content::-webkit-scrollbar {
    height: 10px;
    width: 6px;
    background-color: var(--alert-bg);
    padding: 2px;
}

.pop_content::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 5px;
}

.pop_content::-webkit-scrollbar-track {
    background-color: transparent;
}

.pop_img {
    position: absolute;
    background: var(--alert-bg);
    z-index: 99;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    padding: 1rem;
    text-align: center;
    color: #fff;
}

.img_zoom {
    position: absolute;
    text-align: center;
    cursor: default;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.img_zoom img,
.end_content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    max-height: 80%;
    max-width: 80%;
}


.zoominimg {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 60vh;
    margin-top: 1em;
}

.pop_end {
    position: absolute;
    background: var(--alert-bg);
    z-index: 99;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    padding: 1rem;
    text-align: center;
    color: #fff;
}

.pop_end .info_dl {
    width: 55%;
    margin: auto;
    text-align: left;
}

.pop_end .info_dl dl,
.pop_end .info_dl .form-group {
    margin-bottom: 0.2rem;
}

.pop_end .info_dl button {
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding-left: 2rem;
}

.pop_end .info_dl button.bt1 {
    background: url('/qsf/assets/img/01dialogue_body/Dialogue_body_button_leave.svg') 30% 50% no-repeat, var(--main-color);
    background-size: auto 60%, cover;
}

.pop_end .info_dl button.bt2 {
    background: url('/qsf/assets/img/01dialogue_body/Dialogue_body_button_handover.svg') 30% 50% no-repeat, var(--main-color);
    background-size: auto 60%, cover;
}

.pop_end .info_dl button.bt3 {
    background: url('/qsf/assets/img/01dialogue_body/Dialogue_body_button_finishtalk.svg') 30% 50% no-repeat, var(--main-color);
    background-size: auto 60%, cover;
}


.info_dl label {
    cursor: pointer;
}

.pop_transfer {
    position: absolute;
    background: var(--alert-bg);
    z-index: 99;
    color: #fff;
    right: 0;
    top: 100%;
    max-width: 270px;
    padding: 1rem 3rem;
}

.pop_transfer::before {
    content: "";
    position: absolute;
    top: -30px;
    right: 45%;
    border: 15px solid var(--alert-bg);
    border-color: transparent transparent var(--alert-bg) transparent;
}

.transfer_btn {
    background: var(--main-color);
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: 0.5rem 1rem;
}

.pop_list_info {
    position: absolute;
    background: var(--alert-bg);
    z-index: 99;
    color: #e6e6e6;
    padding: 1rem;
    width: 250px;
    font-size: 0.9rem;
    right: -75%;
}

.pop_list_info::before {
    content: "";
    position: absolute;
    top: 10px;
    left: -30px;
    border: 15px solid var(--alert-bg);
    border-color: transparent var(--alert-bg) transparent transparent;
}

.pop_list_info dt {
    font-weight: 500;
}

.pop_list_info dd {
    text-align: right;
    font-weight: 500;
}

.pop_ask_transfer {
    position: absolute;
    background: var(--alert-bg);
    z-index: 99;
    color: #e6e6e6;
    padding: 1rem;
    left: 0;
    right: 0;
    top: 85px;
    width: 30%;
    height: 150px;
    margin: 0 auto;
    text-align: center;
}

.pop_ask_transfer h3 {
    margin: 1rem auto;
}

.pop_transfer_fail {
    position: absolute;
    background: var(--alert-bg);
    z-index: 99;
    color: #e6e6e6;
    padding: 1rem;
    left: 0;
    right: 0;
    top: 85px;
    width: 30%;
    height: 150px;
    margin: 0 auto;
    text-align: center;
}

.pop_transfer_fail h3 {
    line-height: 120px;
}


.pop_confirm {
    position: absolute;
    background: var(--alert-bg);
    padding: 10px 2px;
    right: 15px;
    top: 30px;
    z-index: 99;
}

.pop_confirm::before {
    content: "";
    position: absolute;
    top: -16px;
    right: 15px;
    border: 8px solid var(--alert-bg);
    border-color: transparent transparent var(--alert-bg) transparent;

}

.pop_confirm>button {
    background: none;
    color: #fff;
    padding: 5px 10px;
    border: 0;
    border-left: 1px solid #8d8d8d;
    cursor: pointer;
}

.pop_confirm>button:first-child {
    border: 0;
}

/*
.accounting_table {
    height: 425px;
    background: #fff;
}*/

.autocomplete-items {
    background: #f3f3f3;
    padding: 5px;
}



.table-theme {
    font-size: 0.9rem;
}

.table-theme thead {
    background-color: var(--main-color);
    color: #fff;
}

.table-theme tbody {
    background: #fff;
    border-bottom: 10px solid var(--main-color);
}

.table-theme tbody tr:nth-of-type(odd) {
    background: #fff;
}

.table-theme td,
.table-theme th {
    border-color: #ccc;
    white-space: nowrap;
    word-break: break-all
}

.table-theme .success {
    color: #39b54a;
}

.table-theme .fail {
    color: #ff0000;
}

.table-theme-status tr:nth-of-type(odd) {
    background-color: var(--main-color);
    color: #fff;
}

.table-theme-status tbody {
    background-color: #fff;
}

.footer {
    height: 30px;
    /*background: url(/qsf/assets/img/page_background/Handover_background-03.png) center bottom no-repeat;*/
    /*background-size: auto;*/
    text-align: center;
}

.footer p {
    margin: 0;
    padding: .5em 0;
}









/*交接任務*/
.task_radio {
    height: 100%;
    padding: 0;
}

.task_radio label.btn {
    border-right: var(--div-border);
    height: 100%;
    border-radius: 0;
    line-height: 75px;
    color: var(--button-color);
    font-weight: 700;
}

.task_radio label.btn.active {
    background: #e6e6e6;
    color: #000;
}


.task_radio .REDunread::after {
    right: 14px;
    bottom: 14px;
}

button.note_edit {
    background: url('/qsf/assets/img/handover_body/button_edit_object.svg') 25% 50% no-repeat;
    background-size: auto 50%;
    padding-left: 6em;
    border-left: var(--div-border);
    
}

button.receive {
    background: url('/qsf/assets/img/handover_body/button_take.svg') 25% 50% no-repeat;
    background-size: auto 40%;
    letter-spacing: 1rem;
    padding-left: 6em;
}

button.note_edit.active,
button.note_edit:active {
    background: url('/qsf/assets/img/handover_body/button_edit_object_a.svg') 25% 50% no-repeat, var(--service-color);
    background-size: auto 50%, cover;
    color: #fff;
}

button.receive.active,
button.receive:active {
    background: url('/qsf/assets/img/handover_body/button_take_a.svg') 25% 50% no-repeat, var(--service-color);
    background-size: auto 40%, cover;
    letter-spacing: 1rem;
    color: #fff;
}

button[disabled].note_edit {
    background: url('/qsf/assets/img/handover_body/button_edit_object.svg') 25% 50% no-repeat;
    background-size: auto 50%, cover;
    color: #e6e6e6;
    cursor: no-drop;
}

button[disabled].receive {
    background: url('/qsf/assets/img/handover_body/button_take_d.svg') 25% 50% no-repeat;
    background-size: auto 40%, cover;
    color: #e6e6e6;
    cursor: no-drop;
}

.handover_list {
    background: var(--list-area-background);
    height: 101%;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
}

.handover_list::-webkit-scrollbar {
    display: none;
}

.handover_list .card {
    border: 0;
    -webkit-box-shadow: 0px 3px 3px 1px #b3b3b3;
    box-shadow: 0px 3px 3px 1px #b3b3b3;
}

.handover_list .card-header {
    padding: 0;
    border-radius: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: #fff;
}

.handover_list .card-header .col {
    padding: 0 1em 0 0;
    border-radius: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    height: 55px;
}

.handover_list .card-header .col.opening {
    background: var(--service-color);
}

.handover_list .card-header button {
    height: 100%;
    background: #fff;
    text-align: left;
    padding: 1rem .5rem;
    color: #000;
    font-weight: 700;
    border-radius: 0;
    border: 0;
}

.handover_list .card-header button:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.handover_list .card-header button.closureBtn {
    position: relative;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-right: 5px;
    padding: 8px 15px 8px 35px;
    cursor: pointer;
}

.handover_list .card-header button.closureBtn::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: url('/qsf/assets/img/handover_body/closureBtn-icon.png') center no-repeat;
    background-size: contain;
    position: absolute;
    left: 7px;
    top: 10px;
}

.handover_list .card-header h5 {
    font-size: 16px;
}

.handover_list button.collapsed {
    background: #fff;
}

.handover_list .card-header .date_time {
    padding-right: 0.5rem;
    color: red;
    font-size: 16px;
    align-self: center;
}

.handover_list ul {
    text-align: right;
}


.handover_right_top {
    background: #fff;
    margin: auto 0;
    height: 140px;
    border: var(--div-border);
    color: var(--font-color);
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}

.handover_right_calendar {
    -webkit-box-shadow: inset var(--div-shadow);
    box-shadow: inset var(--div-shadow);
    background: #fff;
    height: 485px;
    overflow-x: hidden;
    text-align: center;
    color: var(--font-color);
}

.handover_right_calendar::-webkit-scrollbar {
    height: 10px;
    width: 6px;
    background-color: var(--alert-bg);
    padding: 2px;
}

.handover_right_calendar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 5px;
}

.handover_right_calendar::-webkit-scrollbar-track {
    background-color: transparent;
}


.Month_list {
    padding: 0.3rem 0 1rem;
    clear: both;
}

.Month_list .Months {
    font-size: 1.2rem;
    padding: 0.5rem 0;
    border-bottom: var(--div-border);
    cursor: pointer;
}

.Month_list li {
    list-style: none;
    display: inline-block;
    width: 13%;
    height: 40px;
    line-height: 40px;
    font-size: 0.8rem;
    float: left;
    cursor: pointer;
}

.weeks,
.date,
.days {
    clear: both;
    padding: 0rem 4rem 1rem 6rem;
}

.weeks li {
    cursor: default;
}

.days li.active {
    background: var(--main-color);
    color: #fff;
}

.date li.active {
    background: var(--main-color);
    color: #fff;
}

#calendar_date h3.active {
    background: var(--main-color);
    color: #fff;
}

.pop_ps {
    position: absolute;
    background: var(--alert-bg);
    z-index: 99;
    padding: 2rem;
    top: 0;
    bottom: 0;
    right: 0;
}

.pop_ps textarea {
    border-radius: 5px;
    padding: 1rem;
    display: block;
}

.pop_ps button {
    display: block;
    margin-top: 1rem;
}

.pop_ps_content {
    background: #666;
    color: #fff;
    height: 130px;
    overflow-x: hidden;
}

.pop_ps_content h5 {
    font-size: 100%;
}

.btn-light {
    color: #999;
    background-color: #e6e6e6;
    border-color: #e6e6e6;
}

.pop_ps_content::-webkit-scrollbar {
    height: 10px;
    width: 6px;
    background-color: var(--alert-bg);
    padding: 2px;
}

.pop_ps_content::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 5px;
}

.pop_ps_content::-webkit-scrollbar-track {
    background-color: transparent;
}


#supervisor_staff_tab a {
    background: #e6e6e6;
    color: var(--font-color);
}

#supervisor_staff_tab a::after {
    content: none;
}

#supervisor_staff_tab a.active {
    background: #fff;
    color: #000;
}



label[for="m_allDay_shift"],
label[for="s_allDay_shift"] {
    background: url('/qsf/assets/img/organization/Organization_button_list_all.svg') center no-repeat,
        var(--main-color);
    background-size: 80%;
}

label[for="m_morning_shift"],
label[for="s_morning_shift"] {
    background: url('/qsf/assets/img/organization/Organization_button_list_morning.svg') center no-repeat,
        var(--main-color);
    background-size: 80%;
}

label[for="m_night_shift"],
label[for="s_night_shift"] {
    background: url('/qsf/assets/img/organization/Organization_button_list_afternoon.svg') center no-repeat,
        var(--main-color);
    background-size: 80%;
}

label[for="m_graveyard_shift"],
label[for="s_graveyard_shift"] {
    background: url('/qsf/assets/img/organization/Organization_button_list_night.svg') center no-repeat,
        var(--main-color);
    background-size: 80%;
}


a.array_block {
    background: url('/qsf/assets/img/organization/Organization_button_dissplaypart.svg') center no-repeat;
    background-size: contain;
    border-left: var(--div-border);
}

a.array_list {
    background: url('/qsf/assets/img/organization/Organization_button_dissplaydetail.svg') center no-repeat;
    background-size: contain;
}

a.add_newOne {
    background: url('/qsf/assets/img/organization/Organization_button_addnew.svg') center no-repeat;
    background-size: contain;
}

.organization_content {
    background: #e6e6e6;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}


.organization_content .card {
    border-radius: 0;
    cursor: pointer;
    text-align: center;
    margin-bottom: 1rem;
    -webkit-box-shadow: var(--div-shadow);
    box-shadow: var(--div-shadow);
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    width: 100%;
    flex-wrap: nowrap;
}

.organization_content .card .card-title {
    font-size: 1rem;
    word-break: keep-all;
    white-space: nowrap;
}

#list_array .card>form,
#newOne_add .card>form {
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    width: 100%;
    flex-wrap: nowrap;
    align-items: center;
}

#block_array .card {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 25%;
}

.organization_content .card.active .card-body:first-child {
    background: var(--card_active);
}

.organization_content .card>div {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.organization_content .card-body {
    position: relative;
    border: var(--div-border);
    padding-top: 10px;
    padding-bottom: 10px;
    color: var(--font-color);
}

.organization_content .card-body.form-check label {
    cursor: pointer;
    text-align: left;
    width: 40%;
    padding-left: 1rem;
}

.organization_content .card_img {
    border-radius: 50%;
    margin-bottom: 1rem;
    width: 100px;
    height: 100px;
}

.organization_content .list-group li {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    position: relative;
    display: block;
    padding: .5rem 1.25rem;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .125);
    height: 50px;
}

.organization_content .list-group li.authority {
    padding: 0;
    display: flex;
}

.organization_content .list-group li.authority>select {
    height: inherit;
    border: 0;
    width: 100%;
    padding: 0 1.25rem;
}

.organization_content .list-group li.online-shift {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    padding: 0;
}

.organization_content .list-group li.online-shift>div {
    flex: 1;
    line-height: 50px;
    padding: 0 5px;
    border-right: 1px solid #ccc;
}

.organization_content .list-group li.online-shift>select {
    flex: 1;
    line-height: 50px;
    border: 0;
    padding: 0 5px;
}

.organization_content .list-group li.online-shift>select:focus {
    border: 0;
    outline: none;
}

.organization_content .btn {
    margin-bottom: 1rem;
}

#block_array .organization_content .pop_confirm {
    right: 10px;
}

#list_array .organization_content .pop_confirm {
    top: auto;
    right: 40px;
}

.lock {
    position: relative;
    display: block;
    width: 60px;
    height: 30px;
    margin: 0 auto;
}

.lock input {
    opacity: 0;
    width: 0;
    height: 0;
}

.lockSlider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #b3b3b3;
    background-size: contain;
    -webkit-transition: .3s;
    transition: .3s;
    border-radius: 50px;
    border: 1px solid #ccc;
    vertical-align: middle;
}

.lockSlider:before {
    position: absolute;
    content: "";
    height: 30px;
    width: 30px;
    left: 0px;
    bottom: 0px;
    background: url('/qsf/assets/img/organization/Organization_icon_unluck.svg') 0% 50% no-repeat;
    background-size: contain;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.lockSlider:before {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
    left: 0;
    right: auto;
    background: url('/qsf/assets/img/organization/Organization_icon_luckon.svg') 0% 50% no-repeat;
    background-size: contain;
}

.lockSlider::after {
    content: "正常";
    position: relative;
    right: -4rem;
    top: 5px;
    bottom: 0;
}

input:checked+.lockSlider:after {
    content: "已锁定";
}

.organization_status {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 0.5rem;
    border: 1px solid #ccc;
    vertical-align: middle;
}

.online {
    background: url('/qsf/assets/img/00dialogue_header/Dialogue_header_icon_greenlight.svg') center no-repeat;
    background-size: contain;
    vertical-align: sub;
}

.busy {
    background: url('/qsf/assets/img/00dialogue_header/Dialogue_header_icon_orange_buzzy.svg') center no-repeat;
    background-size: contain;
    vertical-align: sub;
}

.offline {
    background: url('/qsf/assets/img/00dialogue_header/Dialogue_header_icon_gray_nosign.svg') center no-repeat;
    background-size: contain;
    vertical-align: sub;
}

.card_delBtn {
    background: url('/qsf/assets/img/organization/Organization_button_delete.svg') center no-repeat;
    background-size: contain;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 45px;
    height: 45px;
}


.organization_body_content .body_center_top {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}

.newone_img {
    background: #f4f4f4;
}

.newone_img .card_img {
    background: url('/qsf/assets/img/organization/Organization_button_addnew.svg') 50% 50% no-repeat, #e6e6e6;
    background-size: cover, cover;
    margin: auto;
}

.newone_img .card-title {
    margin-top: 1rem;
}

.team_shift {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}


.outOf_office_message,
.others_chat,
.auto_assign {
    line-height: 5;
    text-align: center;
}

.outOf_office_message::before,
.others_chat::before,
.auto_assign::before {
    content: "";
    display: inline-block;
    width: 35px;
    height: 35px;
    vertical-align: middle;
    margin-right: 1rem;
}

.outOf_office_message::before {
    background: url('/qsf/assets/img/setup/icon_reply.svg') 50% 50% no-repeat;
    background-size: contain;
}

.others_chat::before {
    background: url('/qsf/assets/img/setup/icon_channel.svg') 50% 50% no-repeat;
    background-size: contain;
}

.auto_assign::before {
    background: url('/qsf/assets/img/setup/icon_assort.svg') 50% 50% no-repeat;
    background-size: contain;
}

#setup_tabContent .tab-pane {
    height: 465px;
    background: #e6e6e6;
}

#setup_list_tabContent .tab-pane>* {
    height: auto;
    max-height: 100%;
    overflow-y: auto;
}

#setup_tabContent a {
    position: relative;
    color: inherit;
    text-decoration: none;
}

#setup_tabContent a,
#setup_tabContent li {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    position: relative;
    display: block;
    padding: .75rem 1.25rem;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .125);
}

#setup_tabContent a.active,
#setup_tabContent a:hover,
#setup_tabContent li:hover,
#setup_tabContent li.active {
    background: var(--service-color);
}

#setup_tabContent h5 {
    color: var(--font-color);
    font-size: 14px;
}

#setup_tabContent li.newOneMessages {
    background: #666;
    display: none;
}

#setup_tabContent li form {
    width: 100%;
    text-align: right;
}

#setup_tabContent li textarea {
    width: 100%;
    max-height: 100%;
    text-align: left;
}

#setup_tabContent p {
    display: inline-block;
    padding-left: 0rem;
    width: 100%;
    word-break: break-word;
}

#setup_tabContent a p {
    padding-left: 1.5rem;
    margin: 0.5rem auto;
}

.outOf_message_listGroup,
.divLabel {
    position: relative;
}

.power_switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 29px;
    margin: auto 10px;
    right: 0;
    top: 0;
    bottom: 0;
}

.divLabel .power_switch {
    position: absolute;
    top: auto;
    bottom: 20px;
}

input[name="messageStr"] {
    width: inherit;
}

.power_switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.power_switch_slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #b3b3b3;
    -webkit-transition: .3s;
    transition: .3s;
    border-radius: 50px;
}

.power_switch_slider:before {
    position: absolute;
    content: '';
    height: 25px;
    width: 25px;
    left: 3px;
    bottom: 2px;
    background: #fff;
    background-size: contain;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.power_switch_slider {
    background: rgb(255, 212, 121);
}

input:checked+.power_switch_slider:before {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
    left: 2px;
    right: auto;
}

#chat_others li,
#assign_auto li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

li span.wechat {
    display: inline-block;
    width: 35px;
    height: 35px;
    background: url('/qsf/assets/img/setup/icon_wechat.svg') center no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin-right: 1rem;
}

li span.qq {
    display: inline-block;
    width: 35px;
    height: 35px;
    background: url('/qsf/assets/img/setup/icon_qq.svg') center no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin-right: 1rem;
}

li:hover span.wechat {
    background: url('/qsf/assets/img/setup/icon_wechat_a.svg') center no-repeat;
    background-size: contain;
}

li:hover span.qq {
    background: url('/qsf/assets/img/setup/icon_qq_a.svg') center no-repeat;
    background-size: contain;
}


.myInput,
.mytextarea {
    background: #e6e6e6;
    border-radius: 5px;
    border: 0;
    padding: 0.5rem;
}

.myInput:focus,
.mytextarea:focus {
    outline: none;
}

#message_outOf_list2 li .pop_confirm {
    right: 228px;
    top: auto;
    bottom: 3px;
}

#message_outOf_list2 li .pop_confirm::before {
    right: -16px;
    top: 23px;
    border-color: transparent transparent transparent var(--alert-bg);
}

.redDoc {
    color: #ff0000;
    text-align: left;
    font-size: 0.7rem;
    margin-bottom: 0;
}

.redDoc::before {
    content: "";
    background: #ff0000;
    display: inline-block;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    margin-right: 5px;
}






/*history*/

.history_right_calendar {
    background: #fff;
    height: 550px;
    overflow-x: hidden;
    text-align: center;
    color: var(--font-color);
}

.history_right_calendar::-webkit-scrollbar {
    height: 10px;
    width: 6px;
    background-color: var(--alert-bg);
    padding: 2px;
}

.history_right_calendar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 5px;
}

.history_right_calendar::-webkit-scrollbar-track {
    background-color: transparent;
}

.history_right_search {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.history_right_search input {
    width: 40%;
    background: #b3b3b3;
    border: 0;
    padding: 0.2rem .5rem;
    outline: none;
}

.history_right_search input.dateStart {
    border-radius: 5px 0 0 5px;
    padding-right: 1rem;
}

.history_right_search input.dateEnd {
    border-radius: 0 5px 5px 0;
    padding-left: 1rem;
}

.history_right_search span {
    background: #b3b3b3;
    padding: 0.2rem 0;
}



.body_center_top .loginLog,
.body_center_top .historical,
.body_center_top .valid,
.body_center_top .monthly {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 5px;
}

.loginLog::before {
    content: "";
    display: inline-block;
    width: 33px;
    height: 33px;
    margin-right: 3px;
    background: url('/qsf/assets/img/history/icon_log.svg') center no-repeat;
    background-size: contain;
    vertical-align: middle;
}

.historical::before {
    content: "";
    display: inline-block;
    width: 33px;
    height: 33px;
    margin-right: 3px;
    background: url('/qsf/assets/img/history/icon_history.svg') center no-repeat;
    background-size: contain;
    vertical-align: middle;
}

.valid::before {
    content: "";
    display: inline-block;
    width: 33px;
    height: 33px;
    margin-right: 3px;
    background: url('/qsf/assets/img/history/icon_dialog.svg') center no-repeat;
    background-size: contain;
    vertical-align: middle;
}

.monthly::before {
    content: "";
    display: inline-block;
    width: 33px;
    height: 33px;
    margin-right: 3px;
    background: url('/qsf/assets/img/history/icon_count.svg') center no-repeat;
    background-size: contain;
    vertical-align: middle;
}

#historicalAccordion {
    height: 500px;
    background: #eee;
    -webkit-box-shadow: inset var(--div-shadow);
    box-shadow: inset var(--div-shadow);
}

#historicalAccordion .card {
    margin: 0 0 -1px;
    background: #666;
    color: #fff;
    border: 0;
    border-radius: 0;
}

.cardTableHead {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    font-size: .9em;
    min-height: 50px;
    background: #fff;
}

.cardTableHead>div {
    border-left: 1px solid #999;
    color: #999;
}

.cardTableHead>div:first-child {
    border: 0;
}

.cardTableHead.nav {
    background: #eee;
}

.cardTableHead.nav>a {
    background: #eee;
    padding: 1em;
    text-align: center;
}

.cardTableHead.nav>a.active {
    background: #fff;
}

#historicalAccordion a.cardTableBody {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    background: #666;
    border-color: #666;
    border-radius: 0;
    font-size: .9em;
    padding: 1em .5em;
    box-shadow: none;
    cursor: pointer;
}

.star_w {
    background: url('/qsf/assets/img/history/icon_star.svg') 50% 50% no-repeat;
    background-size: contain;
    padding: 5px;
}

.star_g {
    background: url('/qsf/assets/img/history/icon_score_h.svg') 50% 50% no-repeat;
    background-size: contain;
    padding: 5px;
}

#loginLogAccordion {
    height: 550px;
    background: #eee;
    -webkit-box-shadow: inset var(--div-shadow);
    box-shadow: inset var(--div-shadow);
}

#loginLogAccordion .card {
    margin: 0 0 -1px;
    border: 0;
    border-radius: 0;
}

#loginLogAccordion a.cardTableBody {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border-color: #fff;
    border-radius: 0;
    font-size: .9em;
    padding: 1em .5em;
    box-shadow: none;
    cursor: pointer;
}

#loginLogAccordion .card-body {
    padding: 0;
}

#loginLogAccordion .StatusList {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    background: #666;
    color: #fff;
    padding: 1em .5em;
    border-bottom: 1px solid #fff;
}







.tableTitle {
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    word-break: keep-all;
    border-top: var(--div-border);
    border-bottom: var(--div-border);
    padding: 0;
    margin: 0;
}

.tableTitle>span {
    font-size: .75em;
    margin: 0;
}

.tableTitle>.tableExport {
    border-left: var(--div-border);
    color: var(--font-color);
}

.tableTitle>.tableExport::after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url('/qsf/assets/img/history/icon_output.svg') 50% 50% no-repeat;
    background-size: contain;
    margin-left: 5px;
    vertical-align: middle;
}

.monthlyTable {
    width: 100%;
    text-align: center;
    margin-bottom: 1em;
    box-shadow: 0 5px 7px 1px #bcbcbc;
}

.monthlyTable th {
    background: #f2f2f2;
    color: #999;
    border: var(--div-border);
    padding: .3rem;
}

.monthlyTable td {
    background: #fff;
    color: #999;
    border: var(--div-border);
    padding: 1rem .3rem;
}

.monthlyTable td>span {
    margin: 0 5px;
}

#monthlyRecept,
#monthlyGuest {
    border-right: var(--div-border);
    border-left: var(--div-border);
}

#monthlyRecept .cardTableBody,
#monthlyGuest .cardTableBody {
    height: 485px;
    background: #eee;
    -webkit-box-shadow: inset var(--div-shadow);
    box-shadow: inset var(--div-shadow);
}


.chart {
    background: #fff;
    height: 450px;
}


#bulletinRefresh {
    background: url('/qsf/assets/img/billboard/icon_update.svg') 50% 50% no-repeat;
    background-size: 30%;
    border-radius: 0;
}








.bulletin_list {
    background: #e6e6e6;
    height: 138%;
    position: relative;
}

.bulletin_list .custom-checkbox label {
    cursor: pointer;
}

.bulletin_list .card-header {
    justify-content: space-between;
    align-items: center;
    background: #fff;
    margin-bottom: -1px;

    display: grid;
    grid-template-columns: 50px 2fr 3fr 1fr 1fr 1fr 40px;
    padding: 0;
}

.bulletin_list .card-header>* {
    border-radius: 0;
    padding-top: .75rem;
    padding-bottom: .75rem;
    text-align: center;
}

.bulletin_list .card-header .custom-control {
    grid-column: 1 / 1 span;
    padding: 0;
    height: 100%;
}
.bulletin_list .card-header .custom-control-label {
    width: 100%;
    height: 100%;
}
.bulletin_list .card-header .custom-control-label::after {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translate(-50%,-50%);
}

.bulletin_list .card-header .date_time {
    border-right: 1px solid #e6e6e6;
    border-left: 1px solid #e6e6e6;
    color: #808080;
    font-weight: 700;
    grid-column: 2 / 1 span;
    max-width: 100%;
}

.bulletin_list .card-header > a.btn.col {
    width: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    grid-column: 3 / 1 span;
}

.readNum {
    color: #808080;
}

.releaseDate {
    border-right: 1px solid #e6e6e6;
    grid-column: 4 / 1 span;

}

.more {
    border-left: 1px solid #e6e6e6;
    letter-spacing: 1px;
    color: #808080;
    font-size: 1.5em;
    font-weight: 700;
    background: url('/qsf/assets/img/billboard/icon_edit.svg') 50% 50% no-repeat;
    background-size: auto 35%;
    width: 2em;
    height: 2.2em;
    grid-column: 7 / 1 span;
}

.more:hover {
    outline: none;
    text-decoration: none;
    overflow: hidden;
}



.bulletinEditor {
    position: absolute;
    top: 85px;
    bottom: -85px;
    left: auto;
    right: 0;
    background: #fff;
    width: 80%;
    display: none;
    z-index: 99;
}


#bulletin_tab a {
    background: #e6e6e6;
    color: #666;
}

#bulletin_tab a::after {
    content: none;
}

#bulletin_tab a.active {
    background: #fff;
    color: #000;
}

.bulletin_manage {
    height: 490px;
    margin: 0;
}

.bulletinEditor .modal-header {
    background: linear-gradient(to bottom, #fff 0%, #aaaaa9 70%, #bebdbd 100%);
    color: #fff;
    margin-bottom: 0;
    padding: 10px;
}

.bulletinEditorTitle {
    display: block;
    width: 100%;
    border-top: 0;
    border-bottom: 0;
    padding: 10px;
}


.ck-rounded-corners .ck.ck-editor__main>.ck-editor__editable,
.ck.ck-editor__main>.ck-editor__editable.ck-rounded-corners {
    height: 355px;
    overflow-y: auto;
}

.btnGroup {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    border: 1px solid #e6e6e6;
    height: 75px;
    padding: 0 20px;
}

.bulletinEditor .modal-content,
.bulletinEditor .modal-footer {
    border-radius: 0;
}

.editorLegend {
    font-size: 1em;
    display: contents;
}

.bulletinEditor .form-check-label {
    cursor: pointer;
}


.group_card {
    font-size: .6em;
    letter-spacing: .5em;
    color: #666;
    text-align: center;
    margin: 1.5em;
}

.group_card::before,
.group_card::after {
    content: "";
    display: inline-block;
    border-top: 1px solid #666;
    width: 35%;
    margin: 0 1em;
    vertical-align: middle;
}

#OpenBulletinEditor {
    background: #fff;
    border: 1px solid #e6e6e6;
    color: #666;
}

#OpenBulletinEditor::before {
    content: "";
    padding: 15px;
    background: url('/qsf/assets/img/billboard/icon_announcement.svg') 5px 50% no-repeat;
    background-size: contain;
    margin-right: 5px;
}

#OpenBulletinEditor:active {
    background: #c3af97;
    border: #c3af97;
    color: #fff;
}

#OpenBulletinEditor:active::before {
    background: url('/qsf/assets/img/billboard/icon_announcement_a.svg') 5px 50% no-repeat;
    background-size: contain;
}

.bulletin_list .pop_confirm {
    display: flex;
    flex-direction: column;
}

.bulletin_list .pop_confirm>button {
    border: 0;
}

.bulletin_list .pop_confirm::before {
    right: 18px;
}

button[disabled].edit_end {
    background: url('/qsf/assets/img/todayRecord/TodayRecod_Button_finish.svg') 20% 50% no-repeat;
    background-size: auto 45%;
    padding-left: 7.5%;
    border-left: var(--div-border);
    text-align: center;
    color: #e6e6e6;
}


button.edit_end {
    background: url('/qsf/assets/img/todayRecord/TodayRecod_Button_finish.svg') 20% 50% no-repeat;
    background-size: auto 45%;
    padding-left: 7.5%;
    border-left: var(--div-border);
    text-align: center;
    color: #444444;
}

.custom-control-label::before {
    content: none;
}

.custom-control-label::after {
    background: url('/qsf/assets/img/billboard/icon_read.svg') center no-repeat;
    background-size: contain;
    border: 0;
    width: 1.2rem;
    height: 1.2rem;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::after {
    background: url('/qsf/assets/img/billboard/icon_read_a.svg') center no-repeat;
    background-size: contain;
}

/*todayRecord*/

#todayRecordList .talk_content {
    background: #fff;
    box-shadow: none;
}

span#transfer_showName {
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    word-break: keep-all;
    margin-left: -10px;
}

.pop_bg {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 99;
    /*  display: none;*/
}

#pop_uploading {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 99;
    /*  display: none;*/
}

.end {
    max-width: 100vw;
    margin: 0;
    padding: 25px 35px;
    text-align: center;
    color: #fff;
    font-size: 18px;
    cursor: default;
    min-height: 75vh;
    transform: translate(0%, 25%);  
}


.end_title {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 3%;
}

.end_content {
    color: #b4b3b3;
    line-height: 30px;
    padding: 0 5%;
    margin-bottom: 5%;
}

.star li {
    display: inline-block;
    width: 12%;
    height: 33px;
    line-height: 7.5;
    cursor: pointer;
    font-size: 12px;
    text-align: center;
}

.star li.w {
    background: url('/qsf/assets/img/chatroom/icon_star.svg') center no-repeat;
    background-size: contain;
}

.star li.g,
.star li:active {
    background: url('/qsf/assets/img/chatroom/icon_score_h.svg') center no-repeat;
    background-size: contain;
}

#chat-view>.chatShowClass {
    display: none;
    overflow-y: auto;
    /*width: 100%;*/
    padding: 20px;
    margin-bottom: 0;
    height: 100%;
    margin-right: 5px;
}

.chatShowClass::-webkit-scrollbar {
    display: block;
    width: 12px;
}

.chatShowClass::-webkit-scrollbar-track {
    background: transparent;
}

.chatShowClass::-webkit-scrollbar-thumb {
    background-image: linear-gradient(to right, #ededed , #fdfdfd);
    border: 1px solid #d5d6d8;
    border-radius: 20px;
}

.chatShowClass::-webkit-scrollbar-thumb:hover {
    background: #fff;
}

#chat-view>.active {
    display: block
}


/*訪客列表*/
.visitor-list {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    background: #fff;
    border-bottom: 1px solid #c0c0c0;
}

.badge-customer {
    padding: .3em .75em;
    color: #fff;
    background: linear-gradient(180deg, rgb(118, 214, 255), rgb(0, 150, 255));
    line-height: 1.25;
}

.badge-service {
    background: linear-gradient(0deg, #ed7559 0%, #e94927 50%, #e72b16 100%);
    color: #fff;
}

.talk-btn {
    width: 58px;
    height: 50px;
    border: 1px solid #bbb;
    cursor: pointer;
}

.talk-btn::before {
    content: "";
    display: block;
    height: 18px;
    width: 25px;
    background: #ccc;
    background-size: contain;
    margin: 3px auto 2px;
}

.talk-btn::after {
    content: "私聊";
    font-size: 12px;
}

.talk-btn.active::after {
    content: "接通";
}

.talk-btn.visitorTalkBtn {
    background: #EBEBEB;
}

.talk-btn.visitorTalkBtn.active {
    background: #D4FC79;
}

.talk-btn.visitorTalkBtn::before {
    background: url('/qsf/assets/img/02dialogue_leftbody/icon_callservice.svg') center no-repeat;
    background-size: contain;
}

.talk-btn.visitorTalkBtn.active::before {
    background: url('/qsf/assets/img/02dialogue_leftbody/icon_callservice_online.svg') center no-repeat;
    background-size: contain;
}

.talk-btn.visitorTalkBtn::after {
    color: #bbb;
}

.talk-btn.visitorTalkBtn.active::after {
    color: #555;
}

.talk-btn.serviceTalkBtn {
    background: none;
    border-radius: 10px;
}

.talk-btn.serviceTalkBtn::before {
    background: url('/qsf/assets/img/02dialogue_leftbody/icon_waiting.svg') center no-repeat;
    background-size: contain;
}

.talk-btn.serviceTalkBtn.active::before {
    background: url('/qsf/assets/img/02dialogue_leftbody/icon_online.svg') center no-repeat;
    background-size: contain;
}

.talk-btn.serviceTalkBtn::after {
    color: #555;
}

.talk-btn.serviceTalkBtn.active::after {
    color: #31ABE2;
}

.btns-order {
    position: absolute;
    top: 7px;
    right: 5px;
}

.btns-order>a.up,
.btns-order>a.down {
    border-color: #ddd;
}

.btns-order>a.up>div {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 6px 8px 6px;
    border-color: transparent transparent #ddd transparent;
}

.btns-order>a.down>div {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 6px 0 6px;
    border-color: #ddd transparent transparent transparent;
}

.btns-order>a.up:hover>div {
    border-color: transparent transparent #333 transparent;
}

.btns-order>a.down:hover>div {
    border-color: #333 transparent transparent transparent;
}

/* 撤回功能_2019 start */
/*收回留言 新的?
.reback {
    word-break: keep-all;
    position: absolute;
    top: -10px;
    left: -30px;
    background: none;
    color: #fff;
    border-radius: 10px;
    font-size: 12px;
}*/
/*收回留言*/
.reback {
    position: absolute;
    top: 50%;
    left: -5px;
    background: none;
    color: #fff;
    border-radius: 10px;
    font-size: 12px;
    transform: translate(-100%, -50%);
    word-break: keep-all;
}

/* 新增對話管理unsend */
.unsend {
    text-align: center;
    font-size: 12px;
    background: rgb(232, 235, 237);
    margin: 5px auto;
    border-radius: 50px;
    width: 9em;
    word-break: break-all;
    padding: 2px 5px;
}

/* 新增歷史紀錄已收回訊息unsended */
.am-comment-bd.unsended {
    color: rgb(179, 161, 138);
}

.reback .count {
    background: #fff;
    padding: 0px 15px 0px 30px;
    border: 1px solid #333;
    border-radius: 55px;
    color: #333;
    position: relative;
    z-index: 1;
}

.reback .count::before {
    content: "";
    background: url('/qsf/assets/img/chatroom/reply-solid.svg') center no-repeat;
    background-size: contain;
    display: inline-block;
    height: 15px;
    width: 15px;
    position: absolute;
    left: 7px;
    top: 2px;
    z-index: 1;
}

.reback .comfirm {
    padding: 2px 3px 2px;
    background: #333;
    border-radius: 5px;
    display: none;
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    font-size: 0;
    letter-spacing: -5px;
    word-spacing: -5px;
}

.reback .comfirm button {
    border: 0;
    background: none;
    margin: 0 0 1px;
    display: inline-block;
    word-break: keep-all;
    white-space: nowrap;
    width: 47%;
    text-align: center;
    font-size: 12px;
}

.reback .comfirm button:hover {
    background: #666;
    border-radius: 5px;
    color: #fff;
}

.reback .comfirm button:nth-of-type(1) {
    margin-right: 3px;
    position: relative;
}
.reback .comfirm button:nth-of-type(1)::after {
    content: "";
    position: absolute;
    top: 0;
    right: -2px;
    height: 100%;
    border-right: 1px solid #999;
}
.reback .comfirm::after {
    content: "";
    left: 0;
    right: 0;
    height: 25px;
    display: block;
    position: absolute;
    bottom: -21px;
    width: 100%;
    z-index: 1;
    background: #333;
    border-radius: 0 0 5px 5px;
}

    /* 新增歷史.今日已收回訊息unsended */
    .other.historyReback {
        position: relative;
    }

    .other.historyReback .content {
        color: rgb(155, 169, 154);
        background: #eaeaea;
        position: relative;
        display: block;
    }

    .other.historyReback .content::before {
        content: "訊息已收回";
        position: absolute;
        bottom: -22px;
        left: 50%;
        color: #a9a9a9;
        font-size: 12px;
        word-break: keep-all;
        width: 8em;
        text-align: center;
        display: block;
        transform: translateX(-50%);
        margin: auto;
    }

    .am-comment-bd.unsended::before {
        content: "訊息已收回";
        position: absolute;
        bottom: -22px;
        left: 50%;
        color: #a9a9a9;
        font-size: 12px;
        word-break: keep-all;
        width: 8em;
        text-align: center;
        display: block;
        transform: translateX(-50%);
        margin: auto;
    }
/* 撤回功能_2019 end */

.dropdownEnterBtn {
    background: #666;
    position: absolute;
    z-index: 1000;
    min-width: 10rem;
    padding: .5rem 0;
    margin: .125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: .25rem;
    top: -7px;
    right: -191px;
}

.dropdownEnterBtn .enterBtn-item {
    color: #fff;
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 20px;
    white-space: nowrap;
    text-decoration: none;
}

.dropdownEnterBtn .enterBtn-item.active {
    background: #333;
}

.dropdownEnterBtn .enterBtn-item:hover,
.dropdownEnterBtn .enterBtn-item:active {
    background: #000;
}




/*新的登入頁*/
.modal-bg {
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    /* display: block; */
}

.modal-login {
    align-self: center;
    flex: 1;
    justify-content: center;
    margin: auto;
}

.modal-login .modal-content {
    border-radius: .75rem;
    border: 0;
    background: none;
}

.modal-login .modal-header {
    background: linear-gradient(to bottom, #ffffff, #ececec);
    padding: .5rem 1rem;
    border-top-left-radius: .75rem;
    border-top-right-radius: .75rem;
    border-bottom: 1px solid rgba(0,0,0,.3);
}

.modal-login .modal-body {

    /* 圖片連結記得更改 */
    background: url(/qsf/assets/img/signin/login-background.png) center -10px no-repeat;
    background-size: cover;
    color: #5e5e5e;
    padding: 1rem 1.5rem 3rem;
}

.modal-login .modal-body .modal-title {
    font-size: 1.3rem;
    font-weight: bold;
    padding-left: 20px;
}

.modal-login .modal-body .modal-title small {
    font-weight: bold;
    padding-left: 20px;
}

.modal-login .input-group,
.modal-login .input-group-append {
    flex-wrap: nowrap;
    align-items: center;
}

.modal-login .input-group-append button {
    position: relative;
    height: 32px;
    width: 40px;
    font-size: 0;
    border: 1px solid #b4b4b4;
    background-image: linear-gradient(to bottom, #ffffff, #ebebeb);
}

.modal-login .input-group-append button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    background: url("/qsf/assets/img/signin/icon_update.svg") 40% 50% no-repeat;
    background-size: auto 50%;
    height: 32px;
    width: 40px;
}

.modal-login .input-group-text {
    background: #fff;
    font-size: 12px;
    border-radius: 55px;
    position: relative;
    border: 1px solid #b4b4b4;
}

.modal-login .input-group-text::after {
    content: "";
    width: 1px;
    height: 70%;
    background: #b4b4b4;
    position: absolute;
    right: 0;
}

.modal-login .form-control {
    border-radius: 55px;
    font-size: 12px;
    border: 1px solid #b4b4b4;
    border-left: 0;   
}

.modal-login div.form-control {
    border: 1px solid #b4b4b4;
}

.modal-login .form-control img {
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

.modal-login .no-ls {
    border-left: none;
}

.buttonChangeImage {
    background: #F6F6F6;
    border-radius: 55px;
    font-size: 12px;
    border: 0;
    cursor: pointer;
}

.modal-login .modal-footer {
    justify-content: center;
    color: #fff;
    font-weight: bold;
    letter-spacing: 2px;
    border: none;
    border-radius: 0;
    border-bottom-right-radius: .75rem;
    border-bottom-left-radius: .75rem;
    background-image: linear-gradient(to right, #e9e9e9, #aaaaaa);
}

.modal-login .visitorLogin {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-size: 12px;
    padding: 1rem 0;
}

.modal-login .visitorLogin p {
    margin: 0;
}

.modal-login .visitorLogin button {
    background: #c8a86e;
    color: #fff;
    border-radius: 55px;
    font-size: 15px;
    border: 3px solid #fff;
    padding: 12px 20px;
    letter-spacing: 2px;
    line-height: 14px;
}

#serviceinside404{
    /*background: url('/qsf/assets/img/404_v2.jpg') no-repeat;*/
    width: 100% ;
    height: 100% ;
    left:15%;
    right:15%;
    position:absolute;
}

#serviceing{
    width: 100% ;
    height: 100% ;
    left:15%;
    right:15%;
    position:absolute;
}

#hype_serviceing{
    pointer-events: auto;
    border-style: solid;
    background-color: rgba(255, 255, 255, 0.533);
    border-width: 1px;
    border-color: rgb(255, 255, 255);
    overflow: visible;
    z-index: 1;
    border-radius: 10px;
    width: 610px;
    height: 122px;
    transform-origin: 50% 50%;
    transform: translateX(0px) translateY(7px) rotateY(0deg);
    top:35%;
    left:16.3%;
    right:15%;
    position:absolute;

}


#visitorinside404{
    /*background: url('/qsf/assets/img/404_v4.jpg') no-repeat;*/
    width: 100% ;
    height: 100% ;
    left:15%;
    right:15%;
    position:absolute;
}

#hype_visitor{
    pointer-events: auto;
    position: absolute;
    border-style: none;
    background-color: rgba(255, 255, 255, 0.533);
    border-width: 0px;
    border-color: rgb(255, 255, 255);
    overflow: visible;
    z-index: -100;
    border-radius: 10px;
    width: 45%;
    height: 15%;
    transform-origin: 50% 50%;
    transform: translateX(-50%) translateY(150%) rotateY(0deg);
    top: 50%;
    bottom: auto;
    left: 50%;
    right: auto;
}


#hype_service{
    pointer-events: auto;
    border-style: solid;
    background-color: rgba(255, 255, 255, 0.533);
    border-width: 1px;
    border-color: rgb(255, 255, 255);
    overflow: visible;
    z-index: 1;
    border-radius: 10px;
    width: 630px;
    height: 122px;
    transform-origin: 50% 50%;
    transform: translateX(0px) translateY(7px) rotateY(0deg);
    top:25%;
    left:19%;
    right:15%;
    position:absolute;

}


.HYPE_inside{
    top:5%;
    left:5%;
    position:absolute;
}

#hype-obj-VZ6PK9WKKWWGFI72QNZV{
    pointer-events: auto; 
    position: absolute; 
    border-style: none; 
    background-color: rgba(255, 255, 255, 0.533);
    border-width: 0px; 
    border-color: rgb(255, 255, 255); 
    overflow: visible; 
    z-index: 1; 
    border-radius: 10px; 
    width: 631px; 
    height: 150px; 
    transform-origin: 50% 50%; 
    transform: translateX(-50%) translateY(-50%) rotateY(0deg);
    top: 80%;
    bottom: auto;
    left: 50%;
    right: auto;
}


#hype-obj-VZ6PK9WKKWWGFI72QNZP{
    pointer-events: auto; 
    position: absolute; 
    border-style: none; 
    background-color: rgba(0, 0, 0, 0.506); 
    border-width: 0px; 
    border-color: rgb(255, 255, 255); 
    overflow: visible; 
    z-index: 1; 
    border-radius: 10px; 
    width: 631px; 
    height: 415px; 
    transform-origin: 50% 50%; 
    transform: translateX(-50%) translateY(-50%) rotateY(0deg);
    top: 50%;
    bottom: auto;
    left: 50%;
    right: auto;
}

#hype-obj-Z19KM7T3LMHT1A3C8LVP1{
    pointer-events: auto;
    position: absolute;
    padding: 8px;
    color: rgb(33, 33, 33);
    display: inline;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
    overflow-wrap: break-word;
    font-weight: normal;
    overflow: visible;
    z-index: 3;
    text-shadow: none;
    width: 392px;
    height: 25px;
    transform-origin: 50% 50%;
    transform: translateX(103px) translateY(12px);
}

#hype-obj-Z19KM7T3LMHT1A3C8LVP2{
    
}

#hype-obj-Z19KM7T3LMHT1A3C8LSP1{
    pointer-events: auto;
    position: absolute;
    padding: 8px;
    color: rgb(255, 255, 255);
    display: inline;
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size: 96px;
    overflow-wrap: break-word;
    overflow: visible;
    white-space: nowrap;
    z-index: 4;
    text-shadow: rgb(255, 255, 255) 0px 0px 5px;
    transform-origin: 50% 50%;
    transform: translateX(230px) translateY(44px);
}


#hype-obj-Z19KM7T3LMHT1A3C8LSP2{
pointer-events: auto;
    position: absolute;
    padding: 8px;
    color: rgb(255, 255, 255);
    display: inline;
    font-family: Helvetica, Arial, sans-serif;
    letter-spacing: 1px;
    font-size: 24px;
    overflow-wrap: break-word;
    overflow: visible;
    white-space: nowrap;
    z-index: 5;
    text-shadow: rgb(255, 255, 255) 0px 0px 1px;
    transform-origin: 50% 50%;
    transform: translateX(236px) translateY(154px);
}    
    
#hype-obj-Z19KM7T3LMHT1A3C8LCA{
    pointer-events: auto; 
    position: absolute; 
    filter: drop-shadow(rgb(255, 255, 255) 0px 0px 2px); 
    background-image: url('/qsf/assets/img/404_v4/404_v4/404_v4.hyperesources/icon_warning.svg'); 
    background-repeat: no-repeat; 
    overflow: visible; 
    background-size: 100% 100%; 
    display: inline; 
    z-index: 8; 
    width: 91px;
    height: 91px; 
    transform-origin: 50% 50%; 
    transform: translateX(-50%) translateY(-40%) rotateY(0deg);
    top: 40%;
    bottom: auto;
    left: 50%;
    right: auto;
}


#hype-obj-Z19KM7T3LMHT1A3C8LUU{
    pointer-events: auto; 
    position: absolute; 
    filter: drop-shadow(rgb(255, 255, 255) 0px 0px 2px); 
    background-image: url('/qsf/assets/img/icon_fix.svg'); 
    background-repeat: no-repeat; 
    overflow: visible; 
    background-size: 100% 100%; 
    display: inline; 
    z-index: 8; 
    width: 91px;
    height: 91px; 
    transform-origin: 50% 50%; 
    transform: translateX(-50%) translateY(-40%) rotateY(0deg);
    top: 40%;
    bottom: auto;
    left: 50%;
    right: auto;
}

#hype-obj-LXAW0K7EE16G8Q4AXORE{
    pointer-events: auto; 
    position: absolute; 
    background-image: url('/qsf/assets/img/icon_fix-02.svg'); 
    background-repeat: no-repeat; 
    overflow: visible; 
    background-size: 100% 100%; 
    display: inline; 
    z-index: 9; 
    width: 311px; 
    height: 116px; 
    transform-origin: 50% 50%; 
    transform: translateX(805px) translateY(340px) rotateY(0deg);
}

#hype-obj-TYND1508KPASY653UDIM{
    pointer-events: auto;
    position: absolute;
    padding: 8px;
    color: rgb(255, 255, 255);
    display: inline;
    font-family: Helvetica, Arial, sans-serif;
    letter-spacing: 1px;
    font-size: 16px;
    line-height: 23px;
    overflow-wrap: break-word;
    overflow: visible;
    z-index: 3;
    text-shadow: rgb(0, 0, 0) 0px 0px 4px;
    text-align: center; 
    width: 400px;
    height: 39px;
    transform-origin: 50% 50%;
    transform: translateX(-50%) translateY(-55%) rotateY(0deg);
    top: 55%;
    bottom: auto;
    left: 50%;
    right: auto;
}

#hype-obj-TYND1508KPASY653UDIMVP{
    pointer-events: auto;
    position: absolute;
    padding: 8px;
    color: rgb(0, 0, 0);
    display: inline;
    font-family: Helvetica, Arial, sans-serif;
    letter-spacing: 1px;
    font-size: 15px;
    line-height: 25px;
    overflow-wrap: break-word;
    overflow: visible;
    z-index: 3;
    text-align: center; 
    width: 501px;
    height: 20px;
    transform-origin: 50% 50%;
    transform: translateX(-50%) translateY(-55%) rotateY(0deg);
    top: 15%;
    bottom: auto;
    left: 50%;
    right: auto;
}

/* 分頁列 */
.pageNav {
    margin: 0 auto;
    background: #fff;
    border-radius: 5px;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    padding: .5em;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #666;
}

.pageNav ul {
    list-style: none;
    flex: 0 1 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: 0 .5em;
    margin: 0;
}

.pageNav ul li {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    margin: auto .35em;
    cursor: pointer;
    transition: all .2s;
    position: relative;
    line-height: 2;
}

.pageNav ul li:hover {
    background: #efefef;
    border-radius: 50%;
    transform: scale(1.2);
    transition: all .2s;
}

.pageNav ul li:active {
    transform: scale(0.9);
    transition: all .1s;
}

.pageNav ul li.active {
    background: #FFD479;
    color: #222;
    font-weight: 700;
    border-radius: 50%;
}

.pageNav ul li.etc {
    margin: auto .75em;
    letter-spacing: 2px;
}

.pageNav ul li.prev, .pageNav ul li.next {
    font-size: 0;
}

.pageNav ul li.prev::after, .pageNav ul li.next::after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 900;
    color: #999;
}

.pageNav ul li.prev.prev::after, .pageNav ul li.next.prev::after {
    content: "<";
}

.pageNav ul li.prev.next::after, .pageNav ul li.next.next::after {
    content: ">";
}

.pageNav .pageJump {
    flex: 0 1 auto;
    padding: 0 .5em;
    margin-left: 2em;
}

.pageNav .pageJump input {
    margin: auto .25em;
    min-width: 50px;
    max-width: 70px;
    padding: .25em;
    text-align: center;
    font-size: 1.25em;
    border-radius: 5px;
    box-shadow: none;
    outline: none;
}

.pageNav .pageJump input[type="number"] {
    -moz-appearance: textfield;
}

.pageNav .pageJump input[type="number"]::-webkit-outer-spin-button, .pageNav .pageJump input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}

.pageNav .pageJump button {
    background: none;
    border: 0;
    border-radius: 50%;
    font-size: 1.25em;
    font-weight: 700;
    margin: 0;
    padding: 0;
    cursor: pointer;
    outline: none;
}

.pageNav .pageJump button:hover {
    transform: scale(1.2);
    transition: all .2s;
    outline: none;
}

.pageNav .pageJump button:active {
    transform: scale(0.9);
    transition: all .1s;
    outline: none;
}
/* 暫時注解, 因為KPI好像有自己的CSS
.kpi_loading_img {
    flex: 1;
    background: #fff;
    display: flex;
    justify-items: center;
    align-items: center;
}
*/

#sendto_ip {
    display: block;
}

#question_name {
    display: block;
}


.chatArrowBtn {
    position: absolute;
    right: 1rem;
    bottom: 3rem;
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    background: url('/qsf/assets/img/chatroom/chatArrowBtn.svg') center no-repeat;
    background-size: contain;
    cursor: pointer;
    z-index: 3;
}

/*= 留下讯息 ================================*/
.inputbox-message{
  margin: 0 auto;
  width: 100%;
  height: 20%;
  box-sizing: border-box;
  padding: 0 20%;
}

.inputbox-message textarea{
  outline: none;
  background-color: #ffffff;
  display: block;
  width: 100%;
  height: 100%;
  color: #212529;
  border: 0;
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 15px;
}

.inputbox-message input::placeholder{
  color: #cccccc;
}

.inputbox-message button{
  border: 0;
  outline: none;
  width: 150px;
  height: 45px;
  line-height: 45px;
  border-radius: 25px;
  background-color: rgba(0,0,0,0);
  transition: all .3s cubic-bezier(0.19, 1, 0.22, 1);
  float: right;
  padding: 0;
  margin: 10px;
}

.inputbox-message button:hover{
  background-color: #716F6F;
}

.inputbox-message button:active{
  background-color: #716F6F;
}

.inputbox-message button.submit{
  background: linear-gradient(to right, #66cdfd 4%, #327fd8);
}

.inputbox-message button.submit:hover{
  background: linear-gradient(to right, #47C9FA 4%, #5458FF);
}

.inputbox-message button.submit:active{
  background: linear-gradient(to right, #47C9FA 4%, #5458FF);
}

@media (max-width: 768px) {
  .inputbox-message{
    padding: 0;
  }
}

@media (max-width: 576px) {
  .inputbox-message button{
    float: none;
    display: block;
    margin: 0 auto;
    padding: 0;
    margin: 10px auto;
  }
}
/*= 留下讯息 = E N D ===============================*/