/* 控制項套用樣式檔 */

/* Layout */
html, body, .form {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif,"Helvetica","Microsoft JhengHei","微軟正黑體";
    -webkit-text-size-adjust: 100%;
}

body {
    position: relative;
    min-height: 100%;
    padding-top: 1px;
    margin-top: -1px;
}

html, .form {
    height: 100%;
}
/*AI文件機器 */
.dxChrome.dxWindowsPlatform.dxWebKitFamily.dxBrowserVersion-121 {
    background: #eee !important;
    overflow: hidden;
}
/*AI文件機器 END*/
a {
    outline: none; /* for Firefox */
    hlbr: expression(this.onFocus=this.blur()); /* for IE */
}

.list-btn {
    border-spacing: revert !important;
    border-radius: 7px !important;
}

    .list-btn .dxeButtonEditButtonHover_Office365, .list-btn .dxeButtonEditButtonPressed_Office365 {
        background: #eee !important;
        border-radius: 7px !important;
    }

/* 控制項 */
.button_e {
    background-color: #3695d8;
    border-radius: 5px;
}

.hover {
    border-radius: 5px;
}

.button_r {
    background-color: #e8e8e8;
    border-radius: 5px;
}

.textbox_e {
    border-radius: 5px;
    border: 1px solid #c7c7c7;
    margin: 1px 0px;
    padding: 3px;
}

.textbox_r {
    border: 0px;
    border-bottom: 1px solid #ddd;
    margin: 1px 0px;
    padding: 3px;
}

.textbox_m {
    border-radius: 5px;
    border: 1px solid #3695d9;
    margin: 1px 0px;
    padding: 3px;
}

.dateedit_e {
    border-radius: 5px;
    margin: 1px 0px;
    padding: 3px;
}

.dateedit_r {
    border: 0px;
    border-bottom: 1px solid #ddd;
    margin: 1px 0px;
    padding: 3px;
}

.dateedit_m {
    border-radius: 5px;
    border: 1px solid #3695d9;
    margin: 1px 0px;
    padding: 3px;
}

.buttonedit_e {
    border-radius: 5px;
    margin: 1px 0px;
    padding: 3px;
}

.dxgvControl_Office365 .dxgvTable_Office365 .dxgvFocusedRow_Office365 a, .dxgvControl_Office365 .dxgvTable_Office365 .dxgvFocusedGroupRow_Office365 a {
    color: #3695d9 !important;
    font-weight: 600;
}

.buttonedit_r {
    border: 0px;
    border-bottom: 1px solid #ddd;
    margin: 1px 0px;
    padding: 3px;
}

.buttonedit_m {
    border-radius: 5px;
    border: 1px solid #3695d9;
    margin: 1px 0px;
    padding: 3px;
}

.dropdownlist_e {
    border-radius: 5px;
    margin: 1px 0px;
    padding: 3px;
}

.dropdownlist_r {
    border: 0px;
    border-bottom: 1px solid #ddd;
    margin: 1px 0px;
    padding: 3px;
}

.dropdownlist_m {
    border-radius: 5px;
    border: 1px solid #3695d9;
    margin: 1px 0px;
    padding: 3px;
}

/* 唯讀下拉清單，點選時不顯示下拉清單 */
.dxpclW .dxeReadOnly_Office365 {
    display: none;
    visibility: hidden;
}

.memo_e {
    border-radius: 3px;
    margin: 1px 0px;
    padding: 3px;
}

.memo_r {
    border-radius: 3px;
    border: 1px solid #eee;
    margin: 1px 0px;
    padding: 3px;
}

.checkbox_e {
    border-radius: 3px;
}

.checkbox_r {
    border-radius: 3px;
}

.checkboxr {
    border: 1px solid #ddd;
    background: #fff;
}

.checkboxm {
    border: 1px solid #3695d9;
    background: #fff;
}

.checkboxlist_e {
    border-radius: 5px;
    border: 1px solid #c7c7c7;
}

.checkboxlist_r {
    border-radius: 5px;
    border: 1px solid #ddd;
}

.checkboxlistr {
    border: 1px solid #ddd;
    opacity: .5;
}

.checkboxlist_m {
    border-radius: 5px;
    border: 1px solid #3695d9;
}

/* GroupHeader */
.groupheader {
    background-color: #f1f1f1;
    display: flex;
    padding: 8px 15px;
    margin: 0px 20px;
    border-radius: 5px;
}

.groupheader_text {
    font-weight: 600;
    margin-right: 5px;
    color: #333;
    display: flex;
    align-items: center;
}

.groupheader_icon {
    width: 22px;
    margin: 0px 5px;
    cursor: pointer;
}

.layoutgroup {
    padding: 0px !important;
    margin: 0px;
}

.layoutgroupbox {
    margin: 0px;
}

    .layoutgroupbox .dxflHLSys {
        display: none;
    }

.layoutgroupbox_caption {
    background-color: #f1f1f1;
    display: block;
    padding: 8px 15px;
    border-radius: 5px;
    left: 0;
    font-weight: 600;
    color: #333;
}

.pagetoolbar_caption {
    background-color: #ffffff;
    height: 46px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 48px !important;
    border-top: 0px solid #d4d4d4;
    border-right: 1px solid #d4d4d4;
    border-bottom: 3px solid #ffffff;
    border-bottom-radius: 10px;
    border-top-right-radius: 10px;
    z-index: 999;
    border-top-left-radius: 10px;
}

.flowsignal {
    width: 25px;
    vertical-align: middle;
    margin-bottom: 3px;
}

/* 必填欄位標題 */
.caption_required {
    color: #2392e2 !important;
    font-weight: 600;
}

/* 欄位標題斷行 */
.caption_wrap {
    white-space: pre !important;
    word-wrap: break-word !important;
}

/* 唯讀欄位標題 */
.caption_readonly {
    color: #0929a6 !important;
}
/* 特定按鈕 */
.btn-blue {
    background-color: #2A5FA3;
    border-radius: 6px;
}

.btn-orange {
    background-color: #F25C2F;
    border-radius: 6px;
}

.btn-gray {
    background-color: #B2B2B2;
    border-radius: 6px;
}

.btn-red {
    background-color: #FC3945;
    border-radius: 6px;
}

/* grid */
.grid_header {
    text-align: center;
    border-top: 1px solid #c7c7c7;
    border-bottom: 2px solid #c7c7c7;
    color: #666;
    font-weight: 600;
}

.grid_row {
    background: #fff;
}

.grid_selectedrow {
    background: #e6f2fa !important;
    color: #333 !important;
    font-weight: 600;
}

.grid_focusedrow {
    background: #e6f2fa !important;
    color: #333 !important;
    font-weight: 600;
}

.grid_emptydatarow {
    color: #666;
    letter-spacing: 2px;
    font-weight: 600;
}

/* Leftmenu */
.menusection {
    position: relative;
}

.section-caption {
    margin: 0px 0px 10px 0px;
    letter-spacing: 3px;
}

.menuicon {
    position: absolute;
    border-style: solid;
    border-width: 8px 8px 0 8px;
    border-color: #3695d9 transparent transparent transparent;
    line-height: 0px;
    _border-color: #3695d9 #000000 #000000 #000000;
    left: 110px;
    _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}

.navbar {
    background: none !important;
    margin: 0 auto !important;
    float: none !important;
}

.navbar_item {
    margin: 0px !important;
    padding: 0px !important;
}

    .navbar_item a {
        background: #fff !important;
        color: #333 !important;
        border-bottom: 1px solid #eee !important;
    }

        .navbar_item a:hover {
            background: #fffced !important;
            font-weight: 600;
            border-bottom: 1px solid #eee !important;
        }


    .navbar_item .dxnb-itemSelected {
        background: #fff !important;
        border-bottom: 1px solid #eee !important;
    }

.navbar_groupheader {
    background: #fff !important;
    border: 0px !important;
    border-bottom: 0px solid #eee !important;
    padding: 13px 5px !important;
    border-radius: 10px !important;
    margin: 10px 10px 0px 8px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 28px !important;
}

.left-panel {
    background: #d9f2f7 !important;
    border: none !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) !important;
}

/* Left Panel For ChatAI */
.left-panel-chat {
    background: #d9f2f7 !important;
    border: none !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) !important;
    width: 650px !important;
}

.dxnb-left {
    margin: -2px 10px 0px 8px !important;
    border-radius: 10px !important;
}

.addaccount .panel, .addaccount .panel2, .addaccount .panel3 {
    margin-bottom: 20px;
    background-color: #fff;
    border-radius: 4px;
    width: 98%;
    margin: 0px auto;
    border: 0px solid transparent;
    border-radius: 0px;
    -webkit-box-shadow: 0 0px 0px rgb(0 0 0 / 0%) !important;
    box-shadow: 0px rgb(0 0 0 / 0%) !important;
}

/* password change */
.changePassword {
    width: 350px;
    min-height: 100%;
    color: #666;
    line-height: 30px;
    font-size: 15px;
    margin: 8% auto 0px auto;
    padding: 30px 60px;
    background: #fff;
    border: 2px solid #eee;
    border-radius: 10px;
}

    .changePassword h1 {
        width: 100%;
        font-size: 20px;
        text-align: center;
        letter-spacing: 2px;
        color: #3695d9;
        border-bottom: 3px solid #3695d9;
        padding: 0px 0px 8px 0px;
        margin-bottom: 25px;
    }

    .changePassword .passwordform {
        width: 100%;
        padding: 10px 0px;
        margin: 0 auto;
        display: flex;
    }

    .changePassword .formlabel {
        width: 40%;
        padding: 0px 30px 0px 0px;
        font-weight: 600;
    }

    .changePassword .formcontrol {
        width: 60%;
        padding: 12px;
        color: #0c87d2;
        border-radius: 5px;
        border: 1px solid #999;
    }

    .changePassword .passwordbtn {
        width: 100%;
        margin-top: 10px;
        padding: 12px;
        font-size: 16px;
        border-radius: 5px;
        border: 0px;
        color: #fff;
        font-weight: 600;
        letter-spacing: 2px;
        background: #3695d9;
    }

    .changePassword .formerror {
        color: #ff8d00;
        text-align: center;
        font-weight: 600;
        padding: 6px;
    }

.passwordform .textbox_e {
    padding: 6px 5px;
    width: 100%;
}

.passwordform .button_e {
    width: 100% !important;
    padding: 6px !important;
}

@media (max-width: 599px) {
    .changePassword .passwordform {
        width: 100%;
        padding: 10px 0px;
        margin: 0 auto;
        display: block;
    }

    .accountform .textbox_e {
        width: 90% !important;
    }

    .passwordform .textbox_e {
        padding: 6px 5px;
        width: 100%;
    }

    .passwordform .button_e {
        width: 100% !important;
        padding: 6px !important;
    }

    .changePassword {
        width: 90%;
        min-height: 100%;
        color: #666;
        line-height: 30px;
        font-size: 15px;
        margin: 30px auto 0px auto;
        padding: 10px;
        background: #fff;
        border: 0px solid #eee;
        border-radius: 0px;
    }

        .changePassword .formlabel {
            width: 90%;
            padding: 0px 30px 0px 0px;
            font-weight: 600;
        }

        .changePassword .formcontrol {
            width: 92%;
            padding: 12px;
            color: #0c87d2;
            border-radius: 5px;
            border: 1px solid #999;
        }

    .addaccount .accountselect-ais {
        width: 90%;
    }
}

/* Formreport */
.formreportprint {
    width: 380px;
    min-height: 100%;
    color: #666;
    line-height: 30px;
    font-size: 15px;
    margin: 1% auto 0px auto;
    padding: 10px 40px 30px 40px;
    background: #fff;
    border: 2px solid #eee;
    border-radius: 10px;
}

    .formreportprint h1 {
        width: 100%;
        font-size: 20px;
        text-align: center;
        letter-spacing: 2px;
        color: #3695d9;
        border-bottom: 3px solid #3695d9;
        padding: 0px 0px 8px 0px;
        margin-bottom: 25px;
    }

    .formreportprint .formreport {
        width: 95%;
        padding: 10px;
        margin: 10px auto 10px auto;
        background: #f4f4f4;
        border-radius: 8px;
        display: flex;
    }

    .formreportprint .formreportlabel {
        width: fit-content !important;
        white-space: nowrap !important;
        padding: 0px 10px 0px 0px !important;
        margin-top: 8px !important;
        font-weight: 600 !important;
    }


    .formreportprint .formreportcontrol {
        display: inline-flex;
        color: #3695d9;
        border-radius: 5px;
        border: 0px solid #999;
    }

    .formreportprint .formreportbtn {
        width: 100% !important;
        margin-top: 5px;
        padding: 10px;
        font-size: 16px;
        border-radius: 5px;
        border: 0px;
        color: #fff;
        font-weight: 600;
        letter-spacing: 2px;
        background: #3695d9;
    }

    .formreportprint .reportcontrol {
        width: 150px;
        padding: 12px 8px;
        border-radius: 5px;
        border: 1px solid #999;
    }

    .formreportprint .formselect {
        width: 100%;
        padding: 12px 8px;
        border-radius: 5px;
        border: 1px solid #999;
    }

@media (max-width: 599px) {
    .formreportprint {
        min-height: 100%;
        color: #666;
        line-height: 30px;
        font-size: 15px;
        background: #fff;
        border: 0px solid #eee;
        border-radius: 10px;
        padding: 0px;
    }

        .formreportprint h1 {
            font-size: 20px;
            text-align: center;
            letter-spacing: 2px;
            color: #3695d9;
            border-bottom: 3px solid #3695d9;
            padding: 0px 0px 8px 0px;
            margin-bottom: 25px;
        }

        .formreportprint .formreport {
            width: 95%;
            margin: 10px auto 10px auto;
            background: #f4f4f4;
            border-radius: 8px;
        }
}

/* Toolbar */
.page-toolbar {
    background-color: #f6f6f6 !important;
    border: none !important;
    font-size: 15px !important;
    height: auto;
    border-bottom: 1px solid #e1e1e1 !important;
}

.pagetoolbar_item {
    width: 45px;
}

    .pagetoolbar_item:hover {
        background: #fff !important;
        color: #333;
        border-bottom: 0px solid #999;
    }

/*關連子選單*/
.pagetoolbar_subitem {
    background: #fafafa;
    padding: 8px 10px;
    margin: 0px auto;
    font-size: 15px;
    color: #333;
}

    .pagetoolbar_subitem.dxm-hovered {
        color: #fff !important;
        background: #666666; /* Old browsers */
        background: -moz-linear-gradient(top, #666666 0%, #333333 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, #666666 0%,#333333 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, #666666 0%,#333333 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#333333',GradientType=0 ); /* IE6-9 */
    }

    .pagetoolbar_subitem.dxm-content {
        color: #333;
    }

.page-toolbar .item > h1 {
    font-size: 16px;
    color: #1583d1 !important;
    font-weight: 600 !important;
    letter-spacing: 2px;
    margin: auto 0;
    line-height: 40px;
    padding: 0 17px;
    width: max-content;
}

    .page-toolbar .item > h1 .title {
        font-size: 16px;
        color: #1583d1 !important;
        font-weight: 600 !important;
        letter-spacing: 2px;
        margin: auto 0;
        line-height: 40px;
        padding: 0px;
    }

.page-toolbar .item .dxm-disabled .dxm-image {
    opacity: 0.3;
}

.page-toolbar .item {
    display: flex;
}

    .page-toolbar .item .searchicon {
        display: none;
    }

    .page-toolbar .item:hover {
        color: #333;
        border-bottom: 0px solid #999;
    }

    .page-toolbar .item .dxm-disabled .dxm-image {
        opacity: 0.3;
    }

.formcontent {
    margin-left: 4px;
}

    .formcontent .formpagetoolall {
        display: flex;
    }

    .formcontent .formpagetoolall-block {
        display: inline-block;
    }

    .formcontent .formpagetool {
        padding: 5px 17px;
        background: #fff;
        font-size: 15px;
        margin: 5px;
        color: #666;
        font-weight: 600;
        border-radius: 8px;
        display: flex;
        border: 1px solid #e3e3e3;
    }

    .formcontent .formpagetool2 {
        width: auto;
        padding: 0px 5px;
        background: #fff;
        font-size: 15px;
        margin: 5px 5px;
        color: #666;
        font-weight: 600;
        border-radius: 8px;
        display: flex;
        align-items: center;
    }

    .formcontent .formpagetool3 {
        display: inline-block;
    }

    .formcontent .formpageblock {
        padding: 35px;
        background: #fff;
        font-size: 15px;
        margin: 30px auto;
        color: #666;
        font-weight: 600;
        border-radius: 8px;
        display: block;
        width: 70%;
        border: 1px solid #e3e3e3;
        text-align: center;
    }

.formpageblock .fileupload {
    padding: 10px 0px;
    margin: 10px 0px;
    background: #fff;
    border-radius: 10px;
    text-align: center;
}

.formcontent .pagetoollabel {
    padding: 0px 3px 0px 0px;
    margin: auto 0px;
    font-weight: 600;
    white-space: nowrap;
}

.formcontent .tablecontent {
    padding: 3px 5px 3px 5px;
    display: flex;
}

.formcontent .pagetoolselect {
    margin: 0px 10px 0px 5px;
    padding: 2px;
    color: #1583d1;
    border: 1px solid #acacac;
}

.formcontent .formcontrol {
    width: 160px;
    padding: 7px;
    margin: 0px 5px;
    color: #0c87d2;
    font-size: 15px;
    border-radius: 5px;
    border: 1px solid #999;
}

.formcontent .formblock {
    display: flex;
    margin: 3px 0px;
}

.formcontent .pagetoolcheck {
    width: 16px;
    height: 16px;
    vertical-align: sub;
}

.formcontent .formreportbtn {
    margin: auto 5px;
    padding: 2px 5px;
    font-size: 15px;
    border-radius: 5px;
    border: 0px;
    color: #fff;
    font-weight: 600;
    letter-spacing: 2px;
    background: #ff6c00;
}

    .formcontent .formreportbtn:hover {
        background: #ff7f21;
    }

.formcontent .formreportbtn2 {
    margin: 3px;
    padding: 2px 5px;
    font-size: 15px;
    border-radius: 5px;
    border: 0px;
    color: #fff;
    font-weight: 600;
    letter-spacing: 2px;
    background: #3695D9;
}

    .formcontent .formreportbtn2:hover {
        background: #46a8ef;
    }

.formcontent .pagetoolinput {
    margin: 0px 10px 0px 10px;
    padding: 3px;
    color: #999;
    border-radius: 5px;
    border: 1px solid #acacac;
    width: 180px;
}

.formcontent .pagetoolspec {
    background: #efefef;
    padding: 3px 8px;
    border-radius: 8px;
    display: inline-block;
    margin: 0px 10px;
}

.formcontent .pagetoolspec-color {
    color: #ff6c00;
}

/* 螢幕縮小 框線不見 start*/
.dxWeb_edtCheckBoxUnchecked_Office365 {
    border: 0.1px solid #666;
}
/* 螢幕縮小 框線不見  end*/


@media (max-width: 840px) {
    .page-toolbar {
        background-color: #f6f6f6;
        border: none;
        font-size: 15px;
        height: auto;
        padding: 0px 0px 0px 0px;
        border-bottom: 1px solid #e1e1e1 !important;
    }

        .page-toolbar .item {
            display: inline;
        }

    .formcontent {
        margin-left: 0px !important;
    }

        .formcontent .formpagetoolall {
            display: contents;
        }

        .formcontent .formpagetool {
            padding: 8px 8px;
            background: #fff;
            border-radius: 0px;
            font-size: 15px;
            color: #666;
            font-weight: 600;
            border-radius: 0px;
            margin: 3px 0px;
            display: block;
        }

        .formcontent .formpagetool2 {
            padding: 5px 5px;
            background: #fff;
            font-size: 15px;
            margin: 5px;
            color: #666;
            font-weight: 600;
            border-radius: 8px;
            display: block;
            align-items: center;
        }

        .formcontent .formpagetool3 {
            display: block;
        }

        .formcontent .formpagetoolall-block {
            display: block;
        }

        .formcontent .formpageblock {
            padding: 35px;
            background: #fff;
            font-size: 15px;
            margin: 20px auto;
            color: #666;
            font-weight: 600;
            border-radius: 8px;
            display: block;
            width: 70%;
            border: 1px solid #e3e3e3;
        }

    .page-toolbar .item > h1 {
        color: #fff;
        font-weight: 600;
        text-align: left;
        font-size: 16px;
        color: #1583d1;
        letter-spacing: 2px;
        vertical-align: sub;
        margin: auto 0;
    }

    .formcontent .pagetoollabel {
        padding: 5px 3px;
        font-weight: 600;
        line-height: 25px;
        white-space: nowrap;
    }

    .formcontent .pagetoolselect {
        margin: 0px 3px;
        width: inherit;
    }

    .formcontent .formreportbtn {
        margin: 5px 1px;
    }

    .formcontent .searchicon {
        display: inline-block;
        text-align:;
        background: #ffffff;
        padding: 5px 10px;
        float: right;
        border-radius: 10px 10px;
        margin-top: -38px;
        margin-right: 10px;
        border: 0px;
        color: #ff6c00;
        font-weight: 600;
    }

        .formcontent .searchicon:hover {
            border: 1px solid #ff6c00;
        }

        .formcontent .searchicon img {
            vertical-align: bottom;
        }

    .formcontent .pagetoolspec {
        margin: 6px 0px;
        padding: 0px 5px;
    }

    .formcontent .pagetoolinput {
        margin: 3px;
        padding: 3px;
        color: #999;
        border-radius: 5px;
        border: 1px solid #acacac;
        width: 90%;
    }

    .addaccount .main-container .steps-container .step .label {
        position: absolute;
        top: 20px !important;
        filter: none;
        z-index: 2000;
        font-size: 14px;
        color: var(--color-label-default);
        transition: all 200ms ease;
        font-weight: 700;
        width: 100px !important;
        line-height: normal;
        text-align: center;
    }

    .addaccount .main-container .steps-container .line {
        transition: all 200ms ease;
        height: 2px;
        flex-grow: 1;
        max-width: 25%;
        background: var(--color-timeline-default);
    }
}

@media (max-width: 599px) {
    .page-toolbar .item > h1 .title {
        max-width: 150px;
    }

    .formcontent .formpagetool2 {
        padding: 5px 5px;
        background: #fff;
        font-size: 15px;
        margin: 5px;
        color: #666;
        font-weight: 600;
        border-radius: 8px;
        display: block;
        align-items: center;
    }

    .formcontent .formpagetool3 {
        display: block;
    }
}

/*attschedulermonth*/
.attschmon-style {
    background: #fff;
    padding: 15px;
    margin: 10px;
    border-radius: 8px;
}

.attschmon-display {
    display: block;
}

.attschmon-left {
    width: 20%;
}

.attschmon-right {
    width: 80%;
}

.attschmon-date {
    width: 100%;
}

/*worksetting*/
.worksettingblock {
    background: #f8f8f8;
}

.worksetting {
    padding: 20px 20px 0px 20px;
    display: block;
}

    .worksetting .pagetoollabel {
        font-weight: 600;
    }

    .worksetting .pagetoolselect {
        display: table-cell;
        width: 100%;
    }

    .worksetting .blue-btn {
        margin: 10px 0px;
        padding: 2px 0px;
        font-size: 15px;
        border-radius: 5px;
        border: 0px;
        color: #fff;
        font-weight: 600;
        letter-spacing: 2px;
        background: #3695d9;
    }

        .worksetting .blue-btn:hover {
            background: #257dbc;
        }

@media (max-width: 840px) {
    .attschmon-display {
        display: block;
    }

    .attschmon-left {
        width: 100%;
        display: block;
    }

    .attschmon-right {
        width: 100%;
        display: block;
    }

    .attschmon-date {
        width: 80%;
    }

    /*worksetting*/
    .worksettingblock {
        background: #f8f8f8;
    }

    .worksetting {
        padding: 20px 20px 0px 20px;
        display: block;
    }

        .worksetting .blue-btn {
            margin: 10px 0px;
            padding: 2px 0px;
            font-size: 15px;
            border-radius: 5px;
            border: 0px;
            color: #fff;
            font-weight: 600;
            letter-spacing: 2px;
            background: #3695d9;
        }

            .worksetting .blue-btn:hover {
                background: #257dbc;
            }

        .worksetting .pagetoollabel {
            font-weight: 600;
        }

        .worksetting .pagetoolselect {
            display: table-cell;
            width: 100%;
        }
}

.btn-blue {
    background: #3695d9 !important;
}

.bg-blue {
    background: rgb(237 247 255) !important;
}

.bg-blue2 {
    background: #1583d1 !important;
}

.bg-gray {
    background: #f8f8f8 !important;
}

.bg-w {
    background: #fff !important;
}

.bg-gray-c {
    font-size: 35px;
    background: #f7f7f7 !important;
    padding: 10px;
    border-radius: 999em;
    width: 85px;
    height: 85px;
    display: inherit;
    margin: 0px auto;
}

    .bg-gray-c i {
        text-align: center;
        margin-top: 12px;
        color: #3695d9;
    }

.bg-b {
    background: #d5edff !important;
}

.bg-y {
    background: #fff7ef !important;
}

.line-br {
    border-right: 2px solid #d5edff;
}

.fs15 {
    font-size: 15px;
}

.borderblue {
    border: 1px solid #0982d8 !important;
    width: 100% !important;
    padding: 0px !important;
    text-align: center !important;
}

.dxeButton {
    color: #999 !important;
}

.gridstyle {
    color: #666;
    background-color: #f6f6f6;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    margin: 0px auto 0px auto;
    padding: 8px;
    width: 98%;
    height: 100%;
}

@media (max-width: 840px) {
    .gridstyle {
        color: #666;
        background-color: #fff;
        border-bottom-right-radius: 15px;
        border-bottom-left-radius: 15px;
        border-top-right-radius: 15px;
        border-top-left-radius: 15px;
        margin: 0px auto;
        padding: 0px;
        width: 100%;
        height: 100%;
    }
}

.scslogo {
    margin: 0px auto;
    padding: 20px 0px 0px 0px;
}

    .scslogo img {
        width: 300px;
        height: auto;
        padding: 0px 10px 0px 0px;
    }

.scsfont {
    position: absolute;
    right: 0px;
    font-size: 18px;
    top: 50px;
    font-weight: 600;
    color: #b0b0b0;
    letter-spacing: 1px;
    background: #f7f7f7;
    padding: 15px 35px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.scslogofont {
    color: #008add;
    font-size: 18px;
    border-radius: 20px;
    background: #e7f5fc;
    font-weight: 600;
    height: fit-content;
    padding: 10px 20px;
    margin: 0px 0px 0px 10px;
}

/* Addaccount */
:root {
    --background-modal-color: #fff;
    --body-color: #fff;
    --color-timeline-default: #D2D3D8;
    --color-step-completed: #5C6174;
    --color-checkmark-completed: #fff;
    --color-in-progress: #ff8400;
    --color-label-default: var(--color-timeline-default);
    --color-label-completed: var(--color-step-completed);
    --color-label-loading: #ff8400;
    --color-icon-completed: var(--color-step-completed);
    --color-icon-default: var(--color-timeline-default);
}

    :root.dark-mode {
        --color-checkmark-completed: #fff;
        --background-modal-color: #5C6174;
        --color-timeline-default: #9799A3;
        --color-checkmark-completed: var(--background-modal-color);
        --body-color: #fff;
        --color-step-completed: #fff;
    }

.addaccounttop {
    position: relative;
    width: auto;
    max-width: 1100px;
    margin: auto;
}

.scslogo {
    margin: 0px auto;
    padding: 20px 0px 0px 0px;
    text-align: left;
}

.addaccount {
    width: auto;
    max-width: 1100px;
    background: #f7f7f7;
    border-radius: 15px;
    margin: 20px auto;
    padding: 15px;
}

    .addaccount.widthall {
        width: 95% !important;
        max-width: 95%;
    }

    .addaccount.addmodal {
        width: 95%;
        margin: 20px auto;
    }

    .addaccount.addmodal2 {
        width: 100%;
        margin: 0px auto;
    }

    .addaccount.divmsgtext {
        border: 1px solid #3695d9 !important;
        width: 60%;
        left: 20%;
        height: auto !important;
        max-height: 500px !important;
        overflow: auto;
        margin: 8% auto 0% auto !important;
        z-index: 2;
        padding: 0px !important;
        background-color: white;
    }

    .addaccount .nav-tabs {
        border-bottom: 1px solid #ddd;
        list-style: none;
    }

        .addaccount .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
            font-size: 16px;
            font-weight: 600;
            color: #fff;
            cursor: default;
            background-color: #1f89e4;
            padding: 12px;
            border: 1px solid #ddd;
            border-bottom-color: transparent;
            list-style: none;
        }

        .addaccount .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
            color: #fff !important;
            cursor: default;
            font-size: 16px !important;
            padding: 12px !important;
            font-weight: 600 !important;
            background-color: #1f89e4 !important;
            border: 1px solid #ddd !important;
            border-bottom-color: transparent !important;
            list-style: none;
        }

        .addaccount .nav-tabs > li > a {
            color: #999 !important;
            cursor: default;
            padding: 12px !important;
            font-size: 16px !important;
            font-weight: 600 !important;
            background-color: #fff !important;
            border: 1px solid #ddd !important;
            border-bottom-color: transparent !important;
            list-style: none;
            display: block;
        }

    .addaccount > h1 {
        display: block;
        font-size: 20px;
        color: #3695d9;
        font-weight: 600;
        text-align: center;
        padding: 0.5em 0em;
        letter-spacing: 1px;
    }

    .addaccount .accountform {
        border-radius: 15px;
        padding: 20px;
        background: #fff;
        margin: 10px;
        font-size: 15px;
        color: #555;
        line-height: 30px;
        letter-spacing: .6px;
    }

    .addaccount .accountform-consent {
        height: 300px;
        -webkit-overflow-scrolling: touch;
        overflow: auto;
        border-radius: 5px;
        border: 1px solid #eee;
        padding: 15px;
    }

    .addaccount .editnews {
        height: auto;
        max-height: 350px;
        -webkit-overflow-scrolling: touch;
        overflow: auto;
        border-radius: 5px;
        border: 5px solid #f2f2f2;
        padding: 15px;
    }

    .addaccount .accountform > h1, .addaccount .accountform2 > h1 {
        font-size: 16px;
        color: #3695d9;
        font-weight: 600;
        letter-spacing: 1px;
        border-left: 5px solid #f5d500;
        padding-left: 10px;
        margin: 15px 0px;
        line-height: normal;
    }


    .addaccount .cassistantlogo {
        text-align: center;
        font-size: 22px;
        padding-top: 10px;
        padding: 15px;
        font-weight: 600;
        color: #666;
    }

        .addaccount .cassistantlogo img {
            width: 160px;
            vertical-align: middle;
        }

    .addaccount .ca-welcome {
        width: 90%;
        margin: 0 auto;
        font-size: 16px;
        letter-spacing: 1px;
        border-top: 2px solid #eee;
        padding-top: 10px;
    }

    .addaccount .ca-qrcode {
        text-align: center;
        display: inline-grid;
        padding: 0px 20px;
    }

    .addaccount .ca-email {
        width: fit-content;
        text-align: center;
        margin: 0 auto;
        font-size: 15px;
        letter-spacing: 1px;
        border-top: 2px solid #eee;
        padding-top: 10px;
        line-height: 32px;
    }

    .addaccount .ca-email2 {
        width: 90%;
        text-align: left;
        margin: 0 auto;
        font-size: 15px;
        letter-spacing: 1px;
        border-top: 2px solid #eee;
        padding-top: 10px;
        line-height: 32px;
    }

    .addaccount .ca-email3 {
        text-align: left;
        margin: 0 auto;
        font-size: 15px;
        letter-spacing: 1px;
        border-top: 2px solid #eee;
        padding-top: 10px;
        line-height: 32px;
    }

    .addaccount .accountbtn {
        padding: 10px;
        text-align: center;
        margin: 0 auto;
        width: 100%;
    }

    .addaccount .accountbtn-blue {
        padding: 12px 5px !important;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        color: #fff;
        border: 2px solid #eee;
        margin: 5px 10px;
        outline: none;
        background: #0d7fe0;
        background: -moz-linear-gradient(45deg, #0d7fe0 0%, #75b9f2 100%);
        background: -webkit-linear-gradient(45deg, #0d7fe0 0%,#75b9f2 100%);
        background: linear-gradient(45deg, #0d7fe0 0%,#75b9f2 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d7fe0', endColorstr='#75b9f2',GradientType=1 );
    }

        .addaccount .accountbtn-blue:hover {
            outline: none;
            border: 2px solid #fff;
            background: #0d7fe0;
            background: -moz-linear-gradient(45deg, #0d7fe0 0%, #005dac 100%);
            background: -webkit-linear-gradient(45deg, #0d7fe0 0%,#005dac 100%);
            background: linear-gradient(45deg, #0d7fe0 0%,#005dac 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d7fe0', endColorstr='#005dac',GradientType=1 );
        }

    .addaccount .accountbtn-none {
        padding: 12px 35px !important;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        color: #0982d8;
        border: 0px solid #eee;
        margin: 5px 10px;
        outline: none;
        background: none;
    }

        .addaccount .accountbtn-none:hover {
            outline: none;
            border: 0px solid #fff;
            background: none;
            color: #000;
        }

    .addaccount .accountbtn-gray {
        padding: 12px 35px !important;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        color: #fff;
        border: 2px solid #eee;
        margin: 5px 10px;
        outline: none;
        background: #ddd;
    }

        .addaccount .accountbtn-gray:hover {
            outline: none;
            border: 2px solid #fff;
            background: #ddd;
        }

    .addaccount .account-radio {
        margin: 0px 10px;
        display: inline;
    }

    .addaccount .account-list {
        padding: 6px;
    }

    .addaccount .account-list2 {
        padding: 6px;
        display: flex;
    }

    .addaccount .account-list3 {
        padding: 0px;
        display: flex !important;
    }

.accountform .companyInit3l {
    border: none;
    padding: 0px;
    text-align: left;
    width: 60%;
    height: 320px;
    display: inline-block;
}

.accountform .companyInit3la {
    border: 1px solid #333;
    padding: 0px;
    text-align: left;
    width: 100%;
    height: 300px;
}

.accountform .companyInit3r {
    border: 1px solid #333;
    padding: 0px;
    text-align: left;
    width: 40%;
    height: 320px;
    overflow: scroll;
}

.addaccount .account-list-bg {
    padding: 6px 10px;
    background: rgb(237 247 255);
    border-radius: 10px;
    margin: 15px 6px;
}

.addaccount .account-list-bg2 {
    border-radius: 10px;
    border: 1px solid #eee;
}

.addaccount .account-list-wbg {
    padding: 6px 10px;
    background: #fff;
    border-radius: 10px;
    margin: 15px 6px;
}

.addaccount .account-checkbox {
    padding: 0px 10px;
    display: inline-block;
}

.addaccount .account-checkboxflex {
    display: flex;
    align-items: center;
    padding: 0px 50px;
}

.addaccount .account-checkboxbr {
    padding: 0px;
}

.addaccount .stepmenu {
    display: flex;
    justify-content: center;
    margin: 10px auto;
    padding: 0px 0px;
    list-style: none!important;
}

.addaccount .stepmenutodo {
    display: flex;
    justify-content: left;
    margin: 10px auto;
    position: relative;
}

.addaccount .stepfont {
    background: #3695d9;
    padding: 10px 35px;
    margin: 10px;
    border-radius: 50px;
    font-size: 18px;
    letter-spacing: 1px;
    color: #ffffff !important;
    font-weight: 600;
    border: 0px solid #fff;
    background: rgb(109,179,242); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(109,179,242,1) 0%, rgba(84,163,238,1) 50%, rgba(54,144,240,1) 51%, rgba(30,105,222,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(109,179,242,1) 0%,rgba(84,163,238,1) 50%,rgba(54,144,240,1) 51%,rgba(30,105,222,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(109,179,242,1) 0%,rgba(84,163,238,1) 50%,rgba(54,144,240,1) 51%,rgba(30,105,222,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); /* IE6-9 */
}

.addaccount .stepno {
    background: #ebebeb;
    border: 2px solid #ebebeb;
    padding: 10px;
    margin: 10px;
    border-radius: 100%;
    width: 20px;
    height: 20px;
    text-align: center;
    font-size: 18px;
    color: #b6b6b6;
    font-weight: 600;
    border: 2px solid #ebebeb;
}

.addaccount .stepfontno {
    border-radius: 100%;
    background: #fff;
    color: #1f89e4;
    padding: 2px 6px;
}

.addaccount .stepicon {
    width: 15px;
    height: 15px;
    vertical-align: middle;
    margin-bottom: 3px;
    margin-left: 5px;
}

.addaccount .stepicon2 {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-bottom: 3px;
    margin-left: 5px;
}

.addaccount .stepicon3 {
    width: 30px;
    height: 30px;
    vertical-align: middle;
    margin-bottom: 3px;
    margin-left: 5px;
}

.addaccount .stepicon4 {
    width: 40px;
    height: 40px;
    vertical-align: middle;
    margin-bottom: 3px;
    margin-left: 5px;
}

.addaccount .accountlabel {
    font-weight: 600;
    width: 130px;
    min-width: 180px;
    line-height: 18px;
    text-align: start;
}

.addaccount .accountlabel2 {
    font-weight: 600;
    width: auto;
    min-width: 150px;
    display: block;
}

.addaccount .accountlabel3 {
    font-weight: 600;
    padding: 0px 5px 0px 0px;
    display: flex;
    white-space: nowrap;
    align-items: center;
}

.addaccount .accounttitle {
    font-weight: 600;
}

.addaccount .accountinput {
    padding: 3px 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    color: #0982d8;
    font-size: 16px;
    line-height: inherit;
}

.addaccount .accountselect {
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    color: #0982d8;
    font-size: 16px;
    background: #fff;
}

.addaccount .accountselect-ais {
    padding: 1px 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    color: #0982d8;
    font-size: 16px;
    background: #fff;
}

.addaccount .verificationbtn {
    padding: 5px 20px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    border: 2px solid #eee;
    outline: none;
    background: #ff8400;
    letter-spacing: 1px;
}

    .addaccount .verificationbtn:hover {
        color: #fff;
        outline: none;
        background: #e57700;
    }

.addaccount .noticesearchbtn {
    padding: 5px 20px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    border: 0px solid #eee;
    outline: none;
    background: #1583d1;
    letter-spacing: 1px;
}

    .addaccount .noticesearchbtn:hover {
        color: #fff;
        outline: none;
        background: #2296e8;
    }

.addaccount .sampleicon {
    background: #ffffff;
    color: #ff8400;
    font-size: 14px;
    font-weight: 600;
    padding: 0px 10px;
    display: inline-block;
    border-radius: 8px;
    border: 1px solid #ff8400;
    position: absolute;
}

.addaccount a {
    text-decoration: none !important;
}

.addaccount .sampleicon:hover {
    text-decoration: none;
    background: #ff8400;
    color: #fff;
}

.addaccount .editicon {
    background: #ffffff;
    color: #1885e2;
    font-size: 13px;
    font-weight: 600;
    margin: 0px 5px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid #bfdef7;
}

.addaccount .main-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 200ms ease;
    height: 110px;
    margin: 10px 0px 10px 0px;
    flex-grow: 1;
}

    .addaccount .main-container .steps-container {
        padding: 40px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .addaccount .main-container .steps-container .step {
            z-index: 1;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 200ms ease;
            flex-grow: 0;
            height: 15px;
            width: 15px;
            border: 4px solid var(--color-timeline-default);
            border-radius: 50%;
        }

            .addaccount .main-container .steps-container .step .preloader, body .main-container .steps-container .step svg {
                display: none;
            }

            .addaccount .main-container .steps-container .step.completed {
                width: 18px;
                height: 18px;
                background: var(--color-step-completed);
                border: none;
            }

                .addaccount .main-container .steps-container .step.completed svg {
                    transition: all 200ms ease;
                    display: block;
                    height: 10px;
                    width: 10px;
                    fill: var(--color-checkmark-completed);
                }

            .addaccount .main-container .steps-container .step.in-progress {
                width: 18px;
                height: 18px;
                background: var(--color-in-progress);
                border: none;
            }

                .addaccount .main-container .steps-container .step.in-progress .preloader {
                    display: block;
                    height: 10px;
                    width: 10px;
                    border: 2px solid #fff;
                    border-radius: 50%;
                    border-left-color: transparent;
                    animation-name: spin;
                    animation-duration: 2000ms;
                    animation-iteration-count: infinite;
                    animation-timing-function: linear;
                }

            .addaccount .main-container .steps-container .step .label {
                position: absolute;
                top: 20px;
                filter: none;
                z-index: 2000;
                color: var(--color-label-default);
                transition: all 200ms ease;
                font-weight: 700;
                width: max-content;
            }

                .addaccount .main-container .steps-container .step .label.completed {
                    color: var(--color-label-completed);
                }

                .addaccount .main-container .steps-container .step .label.loading {
                    color: #ff8400;
                }

            .addaccount .main-container .steps-container .step .icon {
                font-size: 26px;
                position: absolute;
                top: -50px;
                color: var(--color-icon-default);
                transition: color 200ms ease;
            }

                .addaccount .main-container .steps-container .step .icon.completed {
                    color: var(--color-icon-completed);
                }

                .addaccount .main-container .steps-container .step .icon.in-progress {
                    color: #ff8400;
                }

        .addaccount .main-container .steps-container .line {
            transition: all 200ms ease;
            height: 2px;
            flex-grow: 1;
            max-width: 25%;
            background: var(--color-timeline-default);
        }

            .addaccount .main-container .steps-container .line.completed {
                background: var(--color-step-completed);
            }

            .addaccount .main-container .steps-container .line.completed2 {
                background: #dfdfdf;
            }

            .addaccount .main-container .steps-container .line.next-step-uncomplete {
                background: linear-gradient(to right, var(--color-step-completed), var(--color-timeline-default));
            }

            .addaccount .main-container .steps-container .line.next-step-in-progress {
                background: linear-gradient(to right, var(--color-step-completed), var(--color-in-progress));
            }

            .addaccount .main-container .steps-container .line.prev-step-in-progress {
                background: linear-gradient(to right, var(--color-in-progress), var(--color-timeline-default));
            }

.account-list-bg .btn > button {
    line-height: normal !important;
}

.addaccount .notelist {
    margin: 20px 30px;
    font-size: 16px;
}

    .addaccount .notelist a {
        color: #0982d8;
    }

        .addaccount .notelist a:hover {
            color: #333;
        }

.addaccount .onboard-bg {
    background: #feffff;
    display: inline-block;
    border-radius: 10px;
    margin: 10px 20px;
    padding: 5px 0px;
}

.addaccount .onboard-bg2 {
    background: #feffff;
    border-radius: 10px;
    margin: 10px 10px;
    padding: 15px 0px;
    text-align: center;
}

.addaccount .onboard-bg3 {
    background: #feffff;
    border-radius: 10px;
    margin: 0px;
    padding: 15px 0px;
    text-align: center;
}

.addaccount .onboard-bg4 {
    display: inline-flex;
    border-radius: 10px;
    margin: 10px 20px;
    padding: 5px 0px;
    width: 93%;
    border: 1px solid #ddd;
}

.addaccount .salary-bgm {
    background: #fff;
    display: flex;
    border-radius: 5px;
    margin: 5px auto;
    padding: 10px;
    width: 100%;
}

.addaccount .salary-bg {
    background: #fff;
    display: flex;
    border-radius: 5px;
    margin: 3px auto;
    padding: 5px;
    width: 100%;
}

/*step1*/
.addaccount .account-list-spec {
    width: max-content;
    display: flex;
    margin: 0px auto;
}

.addaccount .account-spec {
    margin: 5px 20px;
    text-align: left;
    padding: 2px 25px;
    border-radius: 15px;
    position: relative;
    line-height: 23px;
    margin-top: -15px;
}

.addaccount .account-stepicon {
    font-size: 30px;
    text-align: center;
    padding-top: 30px;
    font-weight: 600;
}

.addaccount .checkicon {
    position: absolute;
    top: -10px;
    left: 40%;
    font-size: 26px;
}

.addaccount .nexticon {
    position: absolute;
    top: 50%;
    right: -20%;
    font-size: 22px;
    z-index: 99;
}

.addaccount .spectext {
    display: block;
}

.addaccount .sampleimg {
    width: 100%;
}


.addaccount .tableoverflow {
    display: block;
    overflow-x: auto;
}

.addaccount .titlestyle {
    display: block;
    padding: 10px;
    color: #ff8400;
    background: #fff7ef;
    font-weight: 600;
    margin: 0px 33px;
}

.addaccount .btnicon{
    width: 38px !important;
    padding: 5px 0px;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 840px) {
    .addaccount {
        width: 90%;
        background: #f7f7f7;
        border-radius: 15px;
        margin: 30px auto;
        padding: 15px;
        overflow: hidden;
    }

        .addaccount > h1 {
            display: block;
            font-size: 20px;
            color: #3695d9;
            font-weight: 600;
            text-align: center;
            padding: 0.5em 0em;
            letter-spacing: 1px;
        }

        .addaccount .accountform {
            border-radius: 0px;
            padding: 20px;
            background: #fff;
            margin: 0px 0px;
            font-size: 15px;
            color: #555;
            line-height: 32px;
            letter-spacing: .8px;
        }

        .addaccount .accountform2 {
            width: 100%;
        }

            .addaccount .accountform > h1, .addaccount .accountform2 > h1 {
                font-size: 16px;
                color: #3695d9;
                font-weight: 600;
                letter-spacing: 1px;
                border-left: 5px solid #f5d500;
                padding-left: 10px;
                margin: 15px 10px;
                line-height: normal;
            }

        .addaccount .stepmenu {
            background: #fff;
            overflow-x: auto;
            overflow-y: hidden;
            webkit-overflow-scrolling: touch;
            -ms-overflow-style: -ms-autohiding-scrollbar;
        }

        .addaccount .stepmenutodo {
            display: flex;
            justify-content: left;
            margin: 10px auto;
        }

        .addaccount .stepfont {
            background: #3695d9;
            font-size: 15px;
            padding: 8px 10px;
            margin: 0px;
            border-radius: 50px;
            letter-spacing: 1px;
            font-weight: 600;
            border: 0px solid #fff;
            background: rgb(109,179,242);
            background: -moz-linear-gradient(top, rgba(109,179,242,1) 0%, rgba(84,163,238,1) 50%, rgba(54,144,240,1) 51%, rgba(30,105,222,1) 100%);
            background: -webkit-linear-gradient(top, rgba(109,179,242,1) 0%,rgba(84,163,238,1) 50%,rgba(54,144,240,1) 51%,rgba(30,105,222,1) 100%);
            background: linear-gradient(to bottom, rgba(109,179,242,1) 0%,rgba(84,163,238,1) 50%,rgba(54,144,240,1) 51%,rgba(30,105,222,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 );
        }

        .addaccount .stepno {
            background: #ebebeb;
            border: 2px solid #ebebeb;
            padding: 5px;
            margin: 1px;
            border-radius: 100%;
            width: 18px;
            height: 18px;
            text-align: center;
            font-size: 18px;
            color: #b6b6b6;
            font-weight: 600;
            border: 2px solid #ebebeb;
        }

        .addaccount .stepfontno {
            border-radius: 100%;
            background: #fff;
            color: #3695d9;
            padding: 2px 6px;
            display: none;
        }

        .addaccount .stepicon {
            display: none;
        }

        .addaccount .stepicon2 {
            width: 20px;
            height: 20px;
            vertical-align: middle;
            margin-bottom: 3px;
            margin-left: 5px;
        }

        .addaccount .stepicon3 {
            width: 30px;
            height: 30px;
            vertical-align: middle;
            margin-bottom: 3px;
            margin-left: 5px;
        }

        .addaccount .stepicon4 {
            width: 40px;
            height: 40px;
            vertical-align: middle;
            margin-bottom: 3px;
            margin-left: 5px;
        }

        .addaccount.divmsgtext {
            border: 1px solid #3695d9 !important;
            width: 80%;
            left: 10%;
            height: auto !important;
            max-height: 500px !important;
            overflow: auto;
            margin: 8% auto 0% auto !important;
            z-index: 2;
            padding: 0px !important;
            background-color: white;
        }

        .addaccount .account-list {
            padding: 8px;
            display:block;
        }

        .addaccount .account-list2 {
            padding: 6px;
            display: block;
        }

        .addaccount .account-list3 {
            padding: 6px;
            display: block;
        }

    .accountform .companyInit3l {
        border: none;
        padding: 0px;
        text-align: left;
        width: 100%;
        height: 320px;
        display: inline-block;
    }

    .accountform .companyInit3la {
        border: 1px solid #333;
        padding: 0px;
        text-align: left;
        width: 100%;
        height: 300px;
    }

    .accountform .companyInit3r {
        border: 1px solid #333;
        padding: 0px;
        text-align: left;
        width: 100%;
        height: 320px;
        overflow: scroll;
    }

    .addaccount .accountinput {
        padding: 6px 8px;
        border: 1px solid #ddd;
        border-radius: 5px;
        color: #0982d8;
        font-size: 15px;
        line-height: inherit;
    }

    .addaccount .cassistantlogo {
        text-align: center;
        font-size: 22px;
        padding-top: 10px;
        font-weight: 600;
        color: #666;
        letter-spacing: 0px;
    }

        .addaccount .cassistantlogo img {
            width: 160px;
            vertical-align: middle;
        }

    .addaccount .accountlabel {
        font-weight: 600;
        width: 100% !important;
        text-align: left;
    }

    .scsfont {
        display: none;
    }

    .scslogo {
        margin: 0px auto;
        padding: 20px 0px 0px 0px;
        text-align: center;
    }

    .notelist {
        margin: 15px 30px;
        font-size: 17px;
        display: block;
    }

    /*step1*/
    .addaccount .account-list-spec {
        width: max-content;
        display: contents;
        margin: 0px auto;
    }

    .addaccount .account-spec {
        margin: 10px 10px;
        text-align: left;
        padding: 10px 25px;
        border-radius: 15px;
        position: relative;
        line-height: initial;
    }

    .addaccount .account-stepicon {
        font-size: 20px;
        text-align: center;
        padding-top: 15px;
        font-weight: 600;
    }

    .addaccount .checkicon {
        position: absolute;
        top: -10px;
        left: 45%;
        font-size: 26px;
    }

    .addaccount .nexticon {
        position: absolute;
        top: 50%;
        right: -5%;
        font-size: 22px;
        z-index: 99;
    }

    .addaccount .spectext {
        display: contents;
    }
}

@media (max-width: 414px) {
    .addaccount {
        width: 100%;
        background: #f9f9f9;
        border-radius: 0px;
        margin: 10px auto;
        padding: 5px 0px;
        overflow: hidden;
        border-top: 1px solid #eee;
    }

        .addaccount > h1 {
            display: block;
            font-size: 18px;
            color: #3695d9;
            font-weight: 600;
            text-align: center;
            padding: 0.5em 0.6em;
            letter-spacing: 1px;
        }

        .addaccount .accountform {
            width: 95%;
            padding: 3px;
            background: #fff;
            margin: 6px auto;
            font-size: 15px;
            color: #555;
            line-height: 26px;
            letter-spacing: .6px;
        }

        .addaccount .accountform2 {
            width: 100%;
            padding: 10px 0px;
        }

            .addaccount .accountform > h1, .addaccount .accountform2 > h1 {
                font-size: 17px;
                color: #3695d9;
                font-weight: 600;
                letter-spacing: 1px;
                border-left: 5px solid #f5d500;
                padding-left: 10px;
                margin: 15px 5px;
                line-height: normal;
            }

        .addaccount .stepmenu {
            background: #fff;
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
            webkit-overflow-scrolling: touch;
            -ms-overflow-style: -ms-autohiding-scrollbar;
        }

        .addaccount .stepfont {
            background: #3695d9;
            font-size: 15px;
            padding: 6px 8px;
            margin: 0px;
            border-radius: 50px;
            letter-spacing: 1px;
            font-weight: 600;
            border: 0px solid #fff;
            background: rgb(109,179,242);
            background: -moz-linear-gradient(top, rgba(109,179,242,1) 0%, rgba(84,163,238,1) 50%, rgba(54,144,240,1) 51%, rgba(30,105,222,1) 100%);
            background: -webkit-linear-gradient(top, rgba(109,179,242,1) 0%,rgba(84,163,238,1) 50%,rgba(54,144,240,1) 51%,rgba(30,105,222,1) 100%);
            background: linear-gradient(to bottom, rgba(109,179,242,1) 0%,rgba(84,163,238,1) 50%,rgba(54,144,240,1) 51%,rgba(30,105,222,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 );
        }

        .addaccount .stepno {
            background: #ebebeb;
            border: 2px solid #ebebeb;
            padding: 5px;
            margin: 1px;
            border-radius: 100%;
            width: 15px;
            height: 15px;
            text-align: center;
            font-size: 15px;
            color: #b6b6b6;
            font-weight: 600;
            border: 2px solid #ebebeb;
        }

        .addaccount .stepfontno {
            border-radius: 100%;
            background: #fff;
            color: #3695d9;
            padding: 2px 6px;
            display: block;
            text-align: center;
        }

        .addaccount .stepicon {
            display: none;
        }

        .addaccount .stepicon2 {
            width: 20px;
            height: 20px;
            vertical-align: middle;
            margin-bottom: 3px;
            margin-left: 5px;
        }

        .addaccount .stepicon3 {
            width: 30px;
            height: 30px;
            vertical-align: middle;
            margin-bottom: 3px;
            margin-left: 5px;
        }

        .addaccount .stepicon4 {
            width: 40px;
            height: 40px;
            vertical-align: middle;
            margin-bottom: 3px;
            margin-left: 5px;
        }

        .addaccount .accountbtn-blue {
            padding: 8px 25px!important;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            color: #fff;
            border: 2px solid #eee;
            margin: 0px;
            outline: none;
            background: #0d7fe0;
            background: -moz-linear-gradient(45deg, #0d7fe0 0%, #75b9f2 100%);
            background: -webkit-linear-gradient(45deg, #0d7fe0 0%,#75b9f2 100%);
            background: linear-gradient(45deg, #0d7fe0 0%,#75b9f2 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d7fe0', endColorstr='#75b9f2',GradientType=1 );
        }

        .addaccount.divmsgtext {
            border: 1px solid #3695d9 !important;
            width: 80% !important;
            height: auto !important;
            max-height: 500px !important;
            overflow: auto;
            margin: 0% auto 0% auto !important;
            z-index: 2;
            padding: 0px !important;
            background-color: white;
            left: 10% !important;
            border-radius: 15px !important;
        }

    .formcontent .tablecontent {
        padding: 3px 5px 3px 5px;
        display:block;
    }


    .addaccount .accountbtn {
        padding: 10px 0px 20px 0px;
        text-align: center;
        margin: 0 auto;
        width: 100%;
    }

    .addaccount .account-list {
        padding: 3px 6px;
    }

    .addaccount .account-list2 {
        padding: 6px;
        display: block;
    }

    .addaccount .account-list3 {
        padding: 0px;
        display: contents !important;
    }

    .accountform .companyInit3l {
        border: none;
        padding: 0px;
        text-align: left;
        width: 100%;
        height: 320px;
        display: inline-block;
    }

    .accountform .companyInit3la {
        border: 1px solid #333;
        padding: 0px;
        text-align: left;
        width: 100%;
        height: 300px;
    }

    .accountform .companyInit3r {
        border: 1px solid #333;
        padding: 0px;
        text-align: left;
        width: 100%;
        height: 320px;
        overflow: scroll;
    }

    .addaccount .accountinput {
        padding: 6px 8px;
        border: 1px solid #ddd;
        border-radius: 5px;
        color: #0982d8;
        font-size: 15px;
        line-height: inherit;
        width: 95%;
    }

    .addaccount .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
        font-size: 13px;
        font-weight: 600;
        color: #fff;
        cursor: default;
        background-color: #1f89e4;
        padding: 5px;
        border: 1px solid #ddd;
        border-bottom-color: transparent;
        border-bottom: 5px solid #1f89e4 !important;
        list-style: none;
    }

    .addaccount .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
        color: #1f89e4 !important;
        cursor: default;
        font-size: 13px !important;
        padding: 5px !important;
        font-weight: 600 !important;
        background-color: #fff !important;
        border: 0px solid #ddd !important;
        border-bottom-color: transparent !important;
        border-bottom: 5px solid #1f89e4 !important;
        list-style: none;
    }

    .addaccount .nav-tabs > li > a {
        color: #999 !important;
        cursor: default;
        padding: 5px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        background-color: none !important;
        border: 0px solid #ddd !important;
        border-bottom-color: none !important;
        border-bottom: 5px solid #eee !important;
        list-style: none;
        display: block;
    }

    .addaccount .cassistantlogo {
        text-align: center;
        font-size: 20px;
        padding-top: 10px;
        font-weight: 600;
        color: #666;
        letter-spacing: 0px;
    }

        .addaccount .cassistantlogo img {
            width: 150px;
            vertical-align: middle;
        }

    .addaccount .accountlabel {
        font-weight: 600;
        width: 100% !important;
        text-align: left;
    }

    .addaccount .ca-qrcode {
        text-align: center;
        display: inline-grid;
        padding: 0px 20px;
    }

    .addaccount .ca-email {
        width: fit-content;
        text-align: center;
        margin: 10px auto;
        font-size: 15px;
        letter-spacing: 1px;
        border-top: 2px solid #eee;
        padding: 10px;
        line-height: 28px;
    }

    .addaccount .ca-email2 {
        width: fit-content;
        text-align: left;
        margin: 10px auto;
        font-size: 15px;
        letter-spacing: 1px;
        border-top: 2px solid #eee;
        padding: 10px;
        line-height: 28px;
    }

    .addaccount .main-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        transition: all 200ms ease;
        height: 100px;
        margin: 10px 0px 0px 0px;
        flex-grow: 1;
        margin-top: 25px;
    }

    .addaccount .accountselect {
        padding: 8px 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
        color: #0982d8;
        font-size: 16px;
        background: #fff;
        width: 95%;
    }

    .scsfont {
        display: none;
    }

    .scslogo {
        padding: 20px 0 0px 0;
        text-align: center;
    }

        .scslogo img {
            width: auto;
            height: 60px;
            margin-top: -20px;
        }

    .scslogofont {
        color: #787878;
        font-size: 16px;
        border-radius: 30px;
        background: #f2f2f2;
        font-weight: 600;
        height: fit-content;
        padding: 10px 20px;
        margin: 0px 0px 0px 10px;
    }

    .addaccount .main-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        transition: all 200ms ease;
        height: 100px;
        margin: 10px 0px 10px 0px;
        flex-grow: 1;
    }

        .addaccount .main-container .steps-container {
            padding: 22px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .addaccount .main-container .steps-container .step {
                z-index: 1;
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 200ms ease;
                flex-grow: 0;
                height: 15px;
                width: 15px;
                border: 4px solid var(--color-timeline-default);
                border-radius: 50%;
            }

                .addaccount .main-container .steps-container .step .preloader, body .main-container .steps-container .step svg {
                    display: none;
                }

                .addaccount .main-container .steps-container .step.completed {
                    width: 18px;
                    height: 18px;
                    background: var(--color-step-completed);
                    border: none;
                }

                    .addaccount .main-container .steps-container .step.completed svg {
                        transition: all 200ms ease;
                        display: block;
                        height: 10px;
                        width: 10px;
                        fill: var(--color-checkmark-completed);
                    }

                .addaccount .main-container .steps-container .step.in-progress {
                    width: 18px;
                    height: 18px;
                    background: var(--color-in-progress);
                    border: none;
                }

                    .addaccount .main-container .steps-container .step.in-progress .preloader {
                        display: block;
                        height: 10px;
                        width: 10px;
                        border: 2px solid #fff;
                        border-radius: 50%;
                        border-left-color: transparent;
                        animation-name: spin;
                        animation-duration: 2000ms;
                        animation-iteration-count: infinite;
                        animation-timing-function: linear;
                    }

                .addaccount .main-container .steps-container .step .label {
                    position: absolute;
                    top: 20px;
                    filter: none;
                    z-index: 2000;
                    font-size: 14px;
                    color: var(--color-label-default);
                    transition: all 200ms ease;
                    font-weight: 700;
                    width: 100px !important;
                    line-height: normal;
                    text-align: center;
                }

                    .addaccount .main-container .steps-container .step .label.completed {
                        color: var(--color-label-completed);
                    }

                    .addaccount .main-container .steps-container .step .label.loading {
                        color: #ff8400;
                    }

                .addaccount .main-container .steps-container .step .icon {
                    font-size: 22px;
                    position: absolute;
                    top: -40px;
                    color: var(--color-icon-default);
                    transition: color 200ms ease;
                }

                    .addaccount .main-container .steps-container .step .icon.completed {
                        color: var(--color-icon-completed);
                    }

                    .addaccount .main-container .steps-container .step .icon.in-progress {
                        color: #ff8400;
                    }

            .addaccount .main-container .steps-container .line {
                transition: all 200ms ease;
                height: 2px;
                flex-grow: 1;
                max-width: 25%;
                background: var(--color-timeline-default);
            }

                .addaccount .main-container .steps-container .line.completed {
                    background: var(--color-step-completed);
                }


                .addaccount .main-container .steps-container .line.completed2 {
                    background: #dfdfdf;
                }

                .addaccount .main-container .steps-container .line.next-step-uncomplete {
                    background: linear-gradient(to right, var(--color-step-completed), var(--color-timeline-default));
                }

                .addaccount .main-container .steps-container .line.next-step-in-progress {
                    background: linear-gradient(to right, var(--color-step-completed), var(--color-in-progress));
                }

                .addaccount .main-container .steps-container .line.prev-step-in-progress {
                    background: linear-gradient(to right, var(--color-in-progress), var(--color-timeline-default));
                }

    .addaccount .editnews {
        height: auto;
        max-height: 400px;
        -webkit-overflow-scrolling: touch;
        overflow: auto;
        border-radius: 5px;
        border: 5px solid #f2f2f2;
        padding: 15px;
    }

    .addaccount .editicon {
        margin: 10px 5px;
    }

    .addaccount .addmodal {
        width: 90%;
        margin: 20px auto;
    }

    .addaccount .onboard-bg {
        background: #f8fcff;
        display: inline-block;
        border-radius: 10px;
        margin: 10px 10px;
        padding: 5px 0px;
    }

    .notelist {
        margin: 15px 30px;
        font-size: 17px;
        display: block;
    }

    .addaccount .fromstyle {
        display:;
    }

    .todomenu .todomenu0, .todomenu .todomenu1, .todomenu .todomenu2, .todomenu .todomenu3 {
        margin: 8px 0px!important;
        padding: 5px 0px;
    }
}

.tipicon {
    width: 16px;
    height: 16px;
    font-size: 13px;
    background: rgb(249 160 160);
    border-radius: 999em;
    padding: 2px 7px;
    color: #fff;
}

.tipicon1 {
    width: 16px;
    height: 16px;
    font-size: 13px;
    background: rgb(249 160 160);
    border-radius: 999em;
    padding: 2px 8px;
    color: #fff;
}

.qaicon {
    width: 16px;
    height: 16px;
    font-size: 13px;
    background: rgb(93 217 205);
    border-radius: 100% 100%;
    padding: 2px 6px;
    color: #fff;
}

.notebg {
    background: #f4f4f4;
    border-radius: 20px;
    padding: 5px 25px;
}

.notebg2 {
    background: #dfeffc;
    border-radius: 15px;
    padding: 7px 20px;
    border: 1px solid #fff;
    line-height: 22px;
    display: block;
}

.notebg3 {
    background: #eaf6ff;
    border-radius: 15px;
    padding: 15px 20px;
    border: 1px solid #fff;
    line-height: 22px;
    display: block;
    margin: 10px auto;
}

.notebg4 {
    background: #fff;
    padding: 15px 5px;
    line-height: 30px;
    display: block;
    text-align: left;
}

.fc-gray {
    color: #666;
}

.fc-gray-999 {
    color: #999;
}

.fc-gray-c9 {
    color: #c9c9c9;
}

.fc-gray-dcdcdc {
    color: #dcdcdc;
}

.fc-blue {
    color: #0982d8;
}

.fc-w {
    color: #fff;
}

.fc-orange {
    color: #ff8400;
}

.fc-yellow {
    color: #f5d500;
}

.fc-red {
    color: #e62d2a;
}

.fw-600 {
    font-weight: 600;
}

.fw-500 {
    font-weight: 500;
}

.fs-13 {
    font-size: 13px;
}

.fs-14 {
    font-size: 14px;
}

.fs-15 {
    font-size: 15px;
}

.fs-16 {
    font-size: 16px;
}

.fs-18 {
    font-size: 18px;
}

.fs-20 {
    font-size: 20px;
}

.fs-40 {
    font-size: 40px;
}

.fls {
    letter-spacing: 1px;
}

.p10 {
    padding: 10px;
}

.p20 {
    padding: 20px;
}

.p30 {
    padding: 30px;
}

.p40 {
    padding: 40px;
}

.pl10 {
    padding-left: 10px;
}

.pl20 {
    padding-left: 20px;
}

.pl30 {
    padding-left: 30px;
}

.pr10 {
    padding-right: 10px;
}

.pr20 {
    padding-right: 20px;
}

.pr30 {
    padding-right: 30px;
}

.p0 {
    padding: 0px;
}

.ptb10 {
    padding: 10px 0px;
}

.ptb20 {
    padding: 20px 0px;
}

.ptb30 {
    padding: 30px 0px;
}

.pt10 {
    padding-top: 10px;
}

.pt20 {
    padding-top: 20px;
}

.pt30 {
    padding-top: 30px;
}

.pb10 {
    padding-bottom: 10px;
}

.pb20 {
    padding-bottom: 20px;
}

.pb30 {
    padding-bottom: 30px;
}

.lh10 {
    line-height: 10px;
}

.lh20 {
    line-height: 20px;
}

.lh30 {
    line-height: 30px;
}

.w10 {
    width: 10px;
}

.w15 {
    width: 15px;
}


.w20 {
    width: 20px;
}

.w25 {
    width: 25px;
}

.w30 {
    width: 30px;
}

.w60 {
    width: 60px;
}

.w60per {
    width: 60%;
}

.w70 {
    width: 70px;
}

.w65per {
    width: 65%;
}

.w80per {
    width: 80%;
}

.w90per {
    width: 90%;
}

.w95per {
    width: 95%;
}

.wfit {
    width: fit-content;
}

.margin0 {
    margin: 0px auto;
}

.m10 {
    padding: 10px;
}

.m20 {
    padding: 20px;
}

.m30 {
    padding: 30px;
}

.m40 {
    padding: 40px;
}

.ml10 {
    padding-left: 10px;
}

.ml20 {
    padding-left: 20px;
}

.ml30 {
    padding-left: 30px;
}

.mr10 {
    padding-right: 10px;
}

.mr20 {
    padding-right: 20px;
}

.mr30 {
    padding-right: 30px;
}

.textcenter {
    text-align: center;
}

.inline-block {
    display: inline-block;
}

.block {
    display: block;
}

.discontent {
    display: contents!important;
}

.grid {
    display: grid;
}

.flex {
    display: flex;
}

.border {
    border: 1px solid #ddd;
    border-radius: 10px;
}

.noborder {
    border: 0px!important;
}

.maxwidth100 {
    max-width: 100px;
    width: 100%;
}

.maxwidth250 {
    max-width: 250px;
    width: 100%;
}

.maxwidth300 {
    max-width: 300px;
    width: 100%;
}

#editNews, #noNews {
    display: none;
}

.wbg {
    background: rgb(255 255 255 / 68%);
}

.bluebg {
    background: rgb(237 247 255);
}

.graybg {
    background: rgb(248 248 248);
}

.displayno {
    display: none;
}

/*onboard*/
.addaccount .onboard {
    display: flex;
    width: 93%;
    text-align: center;
    margin: 20px auto;
}

.onboard .onboardbtn {
    width: 31%;
    margin: 0px 10px;
    display: grid;
    text-align: center;
}

.onboard .onboardbtn2 {
    width: 50%;
    margin: 0px 10px;
    display: grid;
    text-align: center;
}

    .onboard .onboardbtn i, .onboard .onboardbtn2 i {
        font-size: 25px;
        line-height: 40px;
    }


.addaccount .onboard-list-bg {
    padding: 6px 10px;
    background: rgb(237 247 255);
    border-radius: 10px;
    display: inline-block;
}

.addaccount .onboard-list-bg2 {
    padding: 6px 10px;
    border-radius: 10px;
    display: inline-block;
    width: 100%;
}


.addaccount .onboard-list {
    padding: 3px 8px;
    display: flex;
    width: 48%;
    float: left;
    align-items: center;
}

    .addaccount .onboard-list p {
        display: contents;
        color: #3695d9;
        font-weight: 600;
    }

.addaccount .onboard-list2 {
    padding: 3px 8px;
    display: flex;
    width: 100%;
    float: left;
    align-items: center;
}

    .addaccount .onboard-list2 p {
        display: contents;
        color: #3695d9;
        font-weight: 600;
    }

.addaccount .onboard-list3 {
    padding: 5px 8px;
    display: flex;
    width: 48%;
    align-items: center;
}

    .addaccount .onboard-list3 p {
        display: contents;
        color: #3695d9;
        font-weight: 600;
    }

.addaccount .todoform.type1, .addaccount .todoform2.type1 {
    border-left: 6px solid #f1f1f1 !important;
}

.addaccount .todoform.type2, .addaccount .todoform2.type2 {
    border-left: 6px solid #e5cff3 !important;
}

.addaccount .todoform.type3, .addaccount .todoform2.type3 {
    border-left: 6px solid #caeed5 !important;
}

/*turnover*/
.addaccount .turnover {
    display: flex;
    width: 93%;
    text-align: center;
    margin: 20px auto;
    position: relative;
}

.turnover .turnoverbtn {
    width: 49%;
    margin: 0px auto;
    display: grid;
    text-align: center;
    height: fit-content;
}

    .turnover .turnoverbtn i {
        font-size: 25px;
        line-height: 40px;
    }

.turnover .nav {
    display: block;
    width: 90%;
    background: #fff;
    border-radius: 8px;
    padding: 10px;
    margin: 10px auto;
    text-align: left;
    border: 1px solid #eee;
}

.turnover li {
    list-style-type: none;
}

.turnover .turnoverbtnicon {
    position: absolute;
    border-style: solid;
    border-width: 8px 8px 0 8px;
    border-color: #3695d9 transparent transparent transparent;
    line-height: 0px;
    _border-color: #3695d9 #000000 #000000 #000000;
    left: 24%;
    top: 100px;
    _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}

/*當月排班通知*/
.addaccount .shift {
    display: flex;
    width: 93%;
    text-align: center;
    margin: 20px auto;
}

.shift .shiftbtncol {
    width: 25%;
}

.shift .shiftbtncol33 {
    width: 33%;
}

.shift .shiftbtn {
    font-weight: 600;
    margin: 0px 10px;
    display: grid;
    text-align: center;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #d7ebfb;
    color: #3695d9;
    padding: 5px 10px;
    line-height: 25px;
}

    .shift .shiftbtn:hover {
        background: #3695d9;
        color: #fff;
    }

@media (max-width: 840px) {
    .addaccount .onboard {
        margin: 10px auto;
        display: block;
        width: 100%;
        text-align: center;
    }

    .onboard .onboardbtn, .onboard .onboardbtn2 {
        width: 90%;
        margin: 20px 10px;
        display: grid;
        text-align: center;
    }

        .onboard .onboardbtn i, .onboard .onboardbtn2 i {
            font-size: 22px;
            line-height: 35px;
        }

    .addaccount .onboard-list-bg {
        padding: 6px 10px;
        background: rgb(237 247 255);
        border-radius: 10px;
        margin: 0px 6px;
        display: inline-block;
    }

    .addaccount .onboard-list-bg2 {
        padding: 6px 10px;
        border-radius: 10px;
        margin: 0px 6px;
        display: inline-block;
    }

    .addaccount .onboard-list, .addaccount .onboard-list2 {
        padding: 3px 8px;
        display: grid;
        width: 100%;
        float: left;
    }

        .addaccount .onboard-list p, .addaccount .onboard-list2 p {
            display: contents;
            color: #3695d9;
            font-weight: 600;
        }

    .addaccount .onboard-list3 {
        padding: 0px 8px;
        display: block;
        width: 100%;
    }


    /*turnover*/
    .addaccount .turnover {
        display: block;
        width: 100%;
        text-align: center;
        margin: 20px auto;
        position: relative;
    }

    .turnover .turnoverbtn {
        width: 100%;
        margin: 10px auto;
        display: grid;
        text-align: center;
    }

        .turnover .turnoverbtn i {
            font-size: 25px;
            line-height: 40px;
        }

    .turnover li {
        list-style-type: none;
    }

    .turnover .turnoverbtnicon {
        position: absolute;
        border-style: solid;
        border-width: 8px 8px 0 8px;
        border-color: #3695d9 transparent transparent transparent;
        line-height: 0px;
        _border-color: #3695d9 #000000 #000000 #000000;
        left: 48%;
        top: 87px;
        _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
    }

    .turnover .turnoverbtnicon {
        top: 100px;
    }

    /*當月排班通知*/
    .addaccount .shift {
        width: 100%;
        margin: 0px auto;
        display: grid;
        text-align: center;
    }

    .shift .shiftbtn {
        font-weight: 600;
        width: 90%;
        margin: 8px auto;
        display: grid;
        text-align: center;
        background: #fff;
        border-radius: 8px;
        padding: 5px 10px;
        border: 1px solid #d7ebfb;
        color: #3695d9;
    }

    .shift .shiftbtncol, .shift .shiftbtncol33 {
        width: 100%;
    }

    .addaccount .titlestyle {
        padding: 10px;
        color: #ff8400;
        background: #fff7ef;
        font-weight: 600;
        margin: 0px 15px;
    }
}


@media (max-width: 414px) {
    .addaccount .onboard-list {
        padding: 3px 8px;
        display: block !important;
        width: 100%;
        float: left;
    }

    .addaccount .onboard-list2 {
        padding: 3px 8px;
        display: block !important;
        width: 100%;
        float: left;
    }

    .addaccount .onboard-list3 {
        padding: 5px 8px;
        display: block !important;
        width: 100%;
    }

    .addaccount .onboard-list-bg {
        padding: 6px 10px;
        background: rgb(237 247 255);
        border-radius: 10px;
        margin: 0px 6px;
        display: inline-block;
    }


    .addaccount .onboard-list-bg2 {
        padding: 6px 10px;
        border-radius: 10px;
        margin: 0px 6px;
        display: inline-block;
    }

    .turnover .turnoverbtnicon {
        top: 90px;
    }

    .addaccount .account-checkboxflex {
        align-items: center;
        display: block;
    }

    /*當月排班通知*/
    .addaccount .shift {
        width: 100%;
        margin: 0px auto;
        display: grid;
        text-align: center;
    }

    .shift .shiftbtn {
        font-weight: 600;
        width: 90%;
        margin: 8px auto;
        display: grid;
        text-align: center;
        background: #fff;
        border-radius: 8px;
        padding: 5px 10px;
        border: 1px solid #d7ebfb;
        color: #3695d9;
    }

    .shift .shiftbtncol {
        width: 100%;
    }

    .addaccount .titlestyle {
        padding: 10px;
        color: #ff8400;
        background: #fff7ef;
        font-weight: 600;
        margin: 0px 15px 15px 15px;
    }
}

.addaccount .grayline {
    display: inherit;
    height: 1px;
    width: 100%;
    background: #c3e4ff;
    margin: 10px auto;
    text-align: center;
}

.addaccount .grayline2 {
    display: inherit;
    height: 1px;
    width: 100%;
    background: #eee;
    margin: 10px auto;
    text-align: center;
}

.addaccount .checkstyle {
    padding: 3px 6px;
    margin: 0px 5px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #ffd090;
}

.topline {
    border-bottom: 1px solid #f3f3f3;
    height: 8px;
    width: 100%;
    outline: none;
    background: #f8f8f8;
}

.bottomline {
    display: inherit;
    height: 1px;
    width: 100%;
    background: #ddd;
    margin: 10px auto;
    text-align: center;
}

.addaccount .turnoverform {
    width: 100%;
}

.addaccount .turnoverbg {
    background: #f1f1f1;
    padding: 8px;
    font-weight: 600;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom: 1px solid #d2d2d2;
    line-height: initial;
}

.addaccount .turnoverlist {
    padding: 2px 5px;
    border-bottom: 1px solid #e1e1e1;
    color: #333;
    border-right: 3px solid #fff;
}

.addaccount .turnovericon {
    background: #ffffff;
    color: #ff8400;
    font-size: 14px;
    font-weight: 600;
    padding: 0px 10px;
    margin: 0px 3px 3px 6px;
    display: inline-block;
    border-radius: 8px;
    border: 1px solid #ff8400;
    outline: none;
}

    .addaccount .turnovericon:hover {
        background: #ff8400;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        padding: 0px 10px;
        margin: 0px 3px 3px 6px;
        display: inline-block;
        border-radius: 8px;
        border: 1px solid #ff8400;
        outline: none;
    }

.addaccount .turnoverfont {
    color: #0982d8;
}

.addaccount a.turnoverfont:hover, .addaccount a.turnoverfont:active {
    color: #4cb4ff;
}

.addaccount .turnovercheck {
    margin-left: -25px;
    padding: 5px;
}

@media (max-width: 840px) {
    .addaccount .turnoverlist {
        padding: 1px 3px;
        border-bottom: 1px solid #e1e1e1;
        color: #333;
        border-right: 3px solid #fff;
        display: flow-root;
    }
}

.addaccount #TurnoverStep1Check, .addaccount #TurnoverStep2Check {
    display: none;
}

.modal-content {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3rem;
    outline: 0;
}

@media (min-width: 992px) {
    .modal-lg {
        max-width: 800px;
    }

    .addaccount .tableoverflow {
        display: block;
        overflow-x: auto;
    }
}

#turnOver2 {
    display: none;
    margin-top: 10px;
    padding-bottom: 10px;
}

#turnOver {
    display: none;
}

.addaccount .turnoverwbg {
    background: #fff;
    display: flow-root;
    border-radius: 5px;
    border: 0px;
    margin: 10px auto;
    padding: 20px 10px;
    width: 100%;
    text-align: center;
}

.addaccount .searchbg {
    background: #fff;
    display: flow-root;
    border: 0px;
    margin: 5px;
    padding: 5px;
    width: 100%;
    border-radius: 15px;
    position: relative;
    border: 2px solid #dedede;
}

.addaccount .searchinput {
    width: 80%;
    border: 0px;
    padding: 5px 20px;
    margin-left: 12px;
    border-left: 1px solid #ddd;
    font-size: 18px;
    color: #666;
}

input {
    outline: none;
}

.addaccount .searchinputbtn {
    right: 0px;
    position: absolute;
    padding: 6px 25px;
    border: 0px;
    margin: 0px 10px;
    border-radius: 8px;
    font-size: 16px;
    color: #717171;
    background: #efefef;
    font-weight: 600;
}

    .addaccount .searchinputbtn:hover {
        color: #fff;
        background: #3695d9;
    }

    .addaccount .noticeitem h1 {
        font-size: 15px;
        font-weight: 600;
        padding: 10px 10px 0px 10px;
        color: #3695d9;
    }

.todomodal .todoitem h1 {
    font-size: 15px;
    font-weight: 600;
    padding: 20px 10px 0px 25px;
    color: #3695d9;
}

/*TODO待辦*/
.addaccount .todoform {
    padding: 6px 10px;
    font-size: 14px;
    color: #555;
    line-height: 25px;
    letter-spacing: .2px;
    border-bottom: 1px solid #e8e8e8;
    margin: 0px 0px 5px 0px;
}

    .addaccount .todoform:hover {
        border-bottom: 1px solid #e8e8e8;
        background: #f6f6f6;
    }

.addaccount .todoform2 {
    padding: 6px 10px;
    font-size: 14px;
    color: #555;
    line-height: 25px;
    letter-spacing: .2px;
    border-bottom: 1px solid #e8e8e8;
    background: #fff;
    margin: 0px 0px 5px 0px;
}

.addaccount .todotop {
    padding: 0px 10px;
    display: contents;
}

.addaccount .todo-title {
    font-size: 15px;
    font-weight: 600;
    color: #1583d1;
    line-height: 25px;
}

.addaccount .form-title {
    font-size: 15px;
    font-weight: 500;
    color: #6b6b6b;
    line-height: 25px;
}

.addaccount .todo-date {
    font-size: 14px;
    color: #b3b3b3;
    text-align: right;
    line-height: 22px;
}

.addaccount .todo-content {
    color: #7d7d7d;
    padding: 3px 5px 3px 0px;
    display: block;
    line-height: 22px;
}

.addaccount .todo-noread {
    color: #ff8400;
    background: #f6f6f6;
    border-radius: 5px;
    padding: 3px 5px;
    font-size: 13px;
    display: inline-block;
}

.addaccount .todo-read {
    color: #3695d9;
    background: #d7eeff !important;
    border-radius: 99rem;
    padding: 0px 5px;
    font-size: 13px;
    display: none;
}

.addaccount .todocontent {
    position: relative;
    outline: hidden !important;
}

.addaccount .todomenu {
    padding: 0px 15px 5px 15px;
    color: #1f89e4;
    font-weight: 600;
    font-size: 15px;
    border-radius: 15px;
    text-align: center;
    background: #fff;
    margin: 5px 0px;
}

.todomenu button {
    outline: none;
    border: 0px;
}

.todomenu .todomenu0, .todomenu .todomenu1, .todomenu .todomenu2, .todomenu .todomenu3 {
    margin: 8px 5px;
    padding: 5px 0px;
}

.todomenu .todomenu0 {
    color: #767676;
    background: #fff;
    border: 0px;
    border-radius: 3px;
    border-bottom: 5px solid #1f89e4 !important;
}

.todomenu .todomenu1 {
    color: #767676;
    background: #fff;
    border: 0px;
    border-bottom: 5px solid #f1f1f1 !important;
    border-radius: 3px;
}

.todomenu .todomenu2 {
    color: #767676;
    background: #fff;
    border: 0px;
    border-bottom: 5px solid #e5cff3 !important;
    border-radius: 3px;
}

.todomenu .todomenu3 {
    color: #767676;
    background: #fff;
    border: 0px;
    border-bottom: 5px solid #caeed5 !important;
    border-radius: 3px;
}

.addaccount .noticetitle {
    font-size: 15px;
    font-weight: 600;
    color: #ff8400;
    line-height: 20px;
    border-left: 1px solid #ddd;
    padding-left: 20px;
    margin-left: 20px;
}

.addaccount .noticetitle2 {
    font-size: 15px;
    font-weight: 600;
    color: #5f5f5f;
    line-height: 25px;
}

.addaccount .notice-content {
    color: #7d7d7d;
    padding: 0px 5px 0px 0px;
    display: block;
    line-height: 18px;
    font-size: 13px;
}

@media (max-width: 414px) {
    .addaccount .todoform {
        padding: 6px;
        background: #fff;
        font-size: 15px;
        color: #555;
        line-height: 30px;
        letter-spacing: .6px;
        border: 1px solid #eee;
    }

        .addaccount .todoform:hover {
            border: 1px solid #1f89e4;
            background: #fff;
        }

    .addaccount .todo-title {
        font-size: 15px;
        font-weight: 600;
        color: #1583d1;
        line-height: 20px;
    }

    .addaccount .todo-date {
        font-size: 14px;
        color: #b3b3b3;
        text-align: left;
        line-height: 20px;
    }

    .addaccount .todo-content {
        font-size: 14px;
        color: #878787;
        padding: 3px 10px;
        display: block;
        line-height: 20px;
    }

    .addaccount .todo-read {
        color: #3695d9;
        background: #d7eeff !important;
        border-radius: 99rem;
        padding: 0px 5px;
        font-size: 13px;
        display: none;
    }

    .addaccount .todo-noread {
        color: #ff8400;
        background: #f6f6f6;
        border-radius: 5px;
        padding: 3px 5px;
        font-size: 13px;
        display: inline-block;
    }

    .addaccount .tableoverflow {
        display: block;
        overflow-x: auto;
    }
}

/*通知*/
.addaccount .noticform {
    border-radius: 15px;
    padding: 5px;
    background: #f6f6f6;
    margin: 5px 5px 0px 5px;
    font-size: 15px;
    color: #555;
    line-height: 30px;
    letter-spacing: .6px;
    border: 1px solid #eaeaea;
    height: fit-content;
    display: flex;
    position: relative;
}

    .addaccount .noticform:hover {
        border: 1px solid #878787;
        background: #fff;
    }

.addaccount .noticemodal {
    padding: 5px 0px 20px 0px;
}

.noticeline {
    position: absolute;
    top: 0px;
    height: 5px;
    width: 70px;
    background: #3695d9;
}

.todoline {
    position: absolute;
    top: 0px;
    left: 20px;
    height: 5px;
    width: 70px;
    background: #3695d9;
}

.addaccount .noticform2 {
    border-radius: 15px;
    background: #fff;
    margin: 5px 5px 0px 5px;
    font-size: 15px;
    color: #555;
    line-height: 30px;
    letter-spacing: .6px;
    border: 1px solid #eaeaea;
    display: flex;
    padding: 2px 12px;
    position: relative;
}

    .addaccount .noticform2:hover {
        border: 1px solid #b1b1b1;
        background: #fff;
    }

.addaccount .notice {
    text-align: center;
    margin: auto 0px;
    line-height: 22px;
    font-size: 13px;
    background: #fff8f1;
    border-radius: 15px;
    padding: 5px 5px;
    margin-right: 5px;
    display: contents;
}


.addaccount .noticeread {
    text-align: center;
    line-height: 22px;
    font-size: 13px;
    background: #f9f9f9;
    border-radius: 15px;
    color: #bababa;
    padding-top: 2%;
    margin-right: 5px;
    display: none;
}

.addaccount .noticenoread {
    text-align: center;
    line-height: 22px;
    font-size: 13px;
    background: #f9f9f9;
    border-radius: 15px;
    padding: 5px;
    padding-top: 1%;
    color: #fe8400;
}

.addaccount .noticeno {
    font-size: 28px;
    text-align: center;
    margin: 5px 5px 0px 20px;
    padding: 0px;
    line-height: 24px;
    color: #ff8400;
}

.addaccount .noticecontent {
    margin: auto 5px;
}

.addaccount .noticedown {
    text-align: center;
    margin: auto 0px;
    padding: 4px 0px;
    line-height: 22px;
    font-size: 16px;
    border-left: 1px solid #eee;
    position: absolute;
    right: 18px;
}

.addaccount .noticedel {
    text-align: center;
    margin: auto 0px;
    padding: 14px 0px;
    line-height: 22px;
    font-size: 16px;
    border-left: 1px solid #eee;
    position: absolute;
    right: 8px;
}

    .addaccount .noticedel a, .addaccount .noticedown a {
        color: #999;
    }

    .addaccount .noticedel i:hover, .addaccount .noticedown i:hover {
        color: #d85f5c;
    }


.payConfirm .table thead th {
    vertical-align: bottom;
    padding: 0.2rem;
    border-bottom: 0px solid #dee2e6;
}

.payConfirm .table td, .table th {
    padding: 0.2rem;
    vertical-align: top;
    border-top: 0px solid #dee2e6;
}

.text-nowrap {
    white-space: nowrap !important;
}

.small, small {
    font-size: 80%;
    font-weight: 400;
}

#aItem, #bItem, #cItem {
    display: none;
}

.downicon1 {
    position: relative;
    width: 100%;
    height: 15px;
}

.downicon {
    -webkit-animation-duration: 1.5s;
    -moz-animation-duration: 1.5s;
    -webkit-animation-name: slidein;
    -moz-animation-name: slidein;
    position: absolute;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/*新增捷徑*/
.add-director {
    border: 1px solid #e8e8e8;
    border-radius: 20px;
    margin: 10px auto;
    padding: 10px;
}

    .add-director h1 {
        font-size: 15px;
        font-weight: 600;
        color: #ff8400;
        padding: 0px 10px;
        margin: 6px;
        border-left: 4px solid #ff8400;
    }

#addlikelist input[type=checkbox] + span {
    border: 1px solid #ddd;
    border-radius: 55px;
    display: inline-block;
    padding: 6px 10px;
    margin: 2px;
    font-weight: 600;
    background: #fff;
    font-size: 13px;
    color: #7e7e7e;
}

#addlikelist input[type=checkbox]:checked + span {
    background: #3695d9;
    color: #fff;
    font-weight: 600;
}

#addlikelist input[type=checkbox] {
    display: none;
}

@keyframes slidein {
    0% {
        top: 0;
        opacity: 0.1;
    }

    100% {
        top: 25px;
        opacity: 0.9;
    }
}

/*home_style*/
.home {
    background-color: #f6f6f6;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}

.homecontent {
    padding: 15px;
    position: relative;
}

    .homecontent .homeblock1 {
        display:;
        margin: 0px 5px;
        border-radius: 15px;
        background: #fff;
        -moz-box-shadow: 0 3px 3px rgb(234 234 234);
        -webkit-box-shadow: 0 3px 3px rgb(234 234 234);
        box-shadow: 0 3px 3px rgb(234 234 234);
    }

    .homecontent .homeblock1-left {
        margin: auto;
        text-align: center;
    }

    .homecontent .homeblock1-right {
        padding: 10px;
        margin: 0px 0px;
    }

    .homecontent .titlefont {
        font-size: 15px;
        color: #666;
        letter-spacing: 0.5px;
        font-weight: 400;
        text-align: center;
        border-right: 1px solid #eaeaea;
        padding: 0px;
    }

        .homecontent .titlefont:last-child {
            border-right: 0px solid #eaeaea;
        }

    .homecontent .titlefontnum {
        font-size: 36px;
        color: #3695d9;
        letter-spacing: 0.5px;
        text-align: center;
        margin: 0px 5px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        display: block;
        font-weight: 500;
    }

        .homecontent .titlefontnum:hover {
            color: #f5d500;
        }

    .homecontent .iconstytle {
        vertical-align: bottom;
        width: 20px;
    }

    .homecontent .qlink {
        border-radius: 15px;
        border: 2px solid #f3f3f3;
        margin: 0px 5px;
        display: flex;
    }

    .homecontent .qlinktitle {
        background: #fafafa;
        text-align: center;
        width: 80px;
        height: 110px;
        padding: 10px;
        border-bottom-left-radius: 15px;
        border-top-left-radius: 15px;
        color: #666;
        letter-spacing: 0.5px;
        padding-top: 25px;
        border-right: 1px solid #eee;
    }

    .homecontent .qlinkicon {
        font-size: 18px;
        color: #f5d500;
        line-height: 30px;
    }

    .homecontent .qlinkfont {
        display: block;
        font-size: 14px;
    }

    .homecontent .homeblock2 {
        margin: 5px 0px;
        border-radius: 15px;
        padding-right: 0px;
        padding-left: 0px;
        display: flex;
        flex-direction: column-reverse;
    }

    .homecontent .homeblock2a {
        padding-right: 0px !important;
        padding-left: 0px !important;
        margin: 10px 5px;
        border-radius: 15px;
        background: #fff;
        -moz-box-shadow: 0 3px 3px rgb(234 234 234);
        -webkit-box-shadow: 0 3px 3px rgb(234 234 234);
        box-shadow: 0 3px 3px rgb(234 234 234);
        padding-bottom: 10px;
    }

.homeblock2 .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    padding-left: 0px !important;
}

.homecontent li > a, .homecontent a {
    text-decoration: none;
}

.homecontent .bottommenu {
    display: none;
}

@media (max-width: 576px) {
    .homecontent {
        padding: 8px;
        position: relative;
    }

        .homecontent .bottommenu {
            position: fixed;
            bottom: 0px;
            z-index: 99;
            background: #fff;
            display: block;
            width: 100%;
            padding: 5px 10px 15px 10px;
            border-top: 1px solid #eee;
        }

        .homecontent .maenufont {
            width: 20%;
            display: grid;
            text-align: center;
            font-size: 12px;
            color: #333;
        }

        .homecontent .tipicon {
            position: absolute;
            right: 30px;
            background: bottom;
            top: -3px;
        }

        .homecontent .menubtn {
            position: relative;
            padding: 0px;
            margin: 0px;
            border: 0px;
            background: #fff;
            display: contents;
        }

        .homecontent .menuiconstytle {
            vertical-align: bottom;
            width: 22px;
            margin: 5px auto;
        }

    .addaccount .noticecontent {
        display: contents;
    }

    .homeblock2 {
        display: flex;
        flex-direction: column;
    }

    .homecontent .homeblock1-left {
        padding-top: 10px;
        margin: auto;
        text-align: center;
        padding-right: 0px;
    }

    .addaccount .todo-date {
        font-size: 14px;
        color: #b3b3b3;
        text-align: left;
        line-height: 20px;
    }

    .dxgvCSD::-webkit-scrollbar-track {
        background-color: #f1f1f1 !important;
    }

    .dxgvCSD::-webkit-scrollbar {
        height: 12px !important;
    }

    .dxgvCSD::-webkit-scrollbar-thumb {
        background-color: #c1c1c1 !important;
    }
}

.nava {
    min-height: fit-content;
    padding: 0px 10px;
}

    .nava .nav-tabs {
        border-bottom: 1px solid #e9e9e9 !important;
    }

        .nava .nav-tabs > li.active > a, .nava .nav-tabs > li.active > a:focus, .nava .nav-tabs > li.active > a:hover {
            font-size: 15px !important;
            font-weight: 600 !important;
            color: #333 !important;
            cursor: default;
            background-color: #fff !important;
            padding: 12px 10px !important;
            margin: 0px 2px !important;
            text-decoration: auto;
            border-bottom: 4px solid #737373 !important;
            border-top: 0px !important;
            border-left: 0px !important;
            border-right: 0px !important;
        }

        .nava .nav-tabs > li > a {
            color: #999 !important;
            cursor: default;
            padding: 12px 10px !important;
            margin: 0px 2px !important;
            font-size: 15px !important;
            font-weight: 600 !important;
            background-color: #fff !important;
            text-decoration: auto;
            border-bottom: 4px solid #ddd !important;
            border-top: 0px !important;
            border-left: 0px !important;
            border-right: 0px !important;
        }

            .nava .nav-tabs > li > a:hover {
                border-bottom: 3px solid #b5b5b5 !important;
            }

    .nava .navlsit, .navb .navlsit, .navc .navlsit, .navd .navlsit {
        padding: 5px 0px 0px 0px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        flex-wrap: inherit;
    }

    .nava .navlsitcontent {
        width: 100%;
        margin: 10px auto 10px auto;
        display: block;
        font-size: 15px;
        line-height: 25px;
    }

    .nava.tab-content > .active, .navd.tab-content > .active {
        display: block;
    }

    .nava .fade:not(.show), .navb .fade:not(.show), .navd .fade:not(.show) {
        opacity: 0;
    }

    .nava .fade.in, .navb .fade.in, .navd .fade.in {
        opacity: 1;
    }

#todolist.fade:not(.show), #todolistok.fade:not(.show) {
    opacity: 1;
}

.todomodal {
    width: 95% !important;
    margin: 20px auto !important;
}

.todomodal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 18px;
    color: #aeaeae;
    border: 0px;
    background: none;
}

.nava .moreline {
    height: 1px;
    width: 98%;
    margin: 10px 20px 40px 10px;
    background: #e9e9e9;
    font-size: 12px;
    text-align: right;
    line-height: 30px;
    font-weight: 600;
    color: #999;
}

    .nava .moreline a {
        text-decoration: none;
        color: #999;
    }

.navb {
    min-height: fit-content;
    padding: 0px 10px;
}

    .navb .nav-tabs {
        border-bottom: 1px solid #e9e9e9 !important;
    }

        .navb .nav-tabs > li.active > a, .navb .nav-tabs > li.active > a:focus, .navb .nav-tabs > li.active > a:hover {
            font-size: 15px !important;
            font-weight: 600 !important;
            color: #399df0 !important;
            cursor: default;
            background-color: #fff !important;
            padding: 12px !important;
            text-decoration: auto;
            border-bottom: 4px solid #399df0 !important;
            border-top: 0px !important;
            border-left: 0px !important;
            border-right: 0px !important;
        }

        .navb .nav-tabs > li > a {
            color: #6db7f3 !important;
            cursor: default;
            padding: 12px !important;
            font-size: 15px !important;
            font-weight: 600 !important;
            background-color: #fff !important;
            border: 3px solid #ddd !important;
            text-decoration: auto;
            border-bottom: 4px solid #ddd !important;
            border-top: 0px !important;
            border-left: 0px !important;
            border-right: 0px !important;
        }

            .navb .nav-tabs > li > a:hover {
                border-bottom: 3px solid #a0cef5 !important;
            }

    .navb .navlsitcontent {
        width: 96%;
        margin: 10px auto;
        display: block;
        font-size: 15px;
    }

        .navb .navlsitcontent a {
            color: #727272;
            text-decoration: none;
        }

.homecontent .biconstytle {
    background: #e7f4ff;
    padding: 10px;
    width: 60px;
    margin: 10px 10px 5px 10px;
    border-radius: 20px;
    background: rgb(239,247,255); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(239,247,255,1) 0%, rgba(232,243,255,1) 50%, rgba(221,238,255,1) 52%, rgba(237,247,255,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(239,247,255,1) 0%,rgba(232,243,255,1) 50%,rgba(221,238,255,1) 52%,rgba(237,247,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(239,247,255,1) 0%,rgba(232,243,255,1) 50%,rgba(221,238,255,1) 52%,rgba(237,247,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eff7ff', endColorstr='#edf7ff',GradientType=0 ); /* IE6-9 */
}

    .homecontent .biconstytle:hover {
        background: #ddefff;
        padding: 10px;
        width: 60px;
        margin: 10px 10px 5px 10px;
        border-radius: 20px;
        background: rgb(239,247,255); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(239,247,255,1) 0%, rgba(214,234,255,1) 50%, rgba(204,229,255,1) 52%, rgba(226,242,255,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(239,247,255,1) 0%,rgba(214,234,255,1) 50%,rgba(204,229,255,1) 52%,rgba(226,242,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(239,247,255,1) 0%,rgba(214,234,255,1) 50%,rgba(204,229,255,1) 52%,rgba(226,242,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eff7ff', endColorstr='#e2f2ff',GradientType=0 ); /* IE6-9 */
        box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    }

.homecontent .bicon {
    text-align: center;
    display: inline-block;
}

.homecontent .cicon {
    text-align: center;
    display: inline-block;
}

.homecontent .bicon, .homecontent .cicon, .homecontent .dicon {
    color: #727272;
}

.homecontent .qlinkallicon a {
    color: #727272;
    text-decoration: none;
    outline: none;
}

.navc {
    padding: 10px;
    background: #f7f7f7;
    margin: 20px;
    border-radius: 20px;
}

    .navc .navlsitcontent {
        width: 96%;
        margin: 10px auto;
        display: block;
        font-size: 15px;
    }

        .navc .navlsitcontent a {
            color: #727272;
            text-decoration: none;
        }

.homecontent .ciconstytle {
    background: #e7f4ff;
    padding: 10px;
    width: 60px;
    margin: 10px 10px 5px 10px;
    border-radius: 20px;
    background: rgb(250,244,255); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(250,244,255,1) 0%, rgba(245,234,255,1) 51%, rgba(243,229,255,1) 54%, rgba(250,244,255,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(250,244,255,1) 0%,rgba(245,234,255,1) 51%,rgba(243,229,255,1) 54%,rgba(250,244,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(250,244,255,1) 0%,rgba(245,234,255,1) 51%,rgba(243,229,255,1) 54%,rgba(250,244,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#faf4ff', endColorstr='#faf4ff',GradientType=0 ); /* IE6-9 */
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.0);
}

    .homecontent .ciconstytle:hover {
        background: #ddefff;
        padding: 10px;
        width: 60px;
        margin: 10px 10px 5px 10px;
        border-radius: 20px;
        background: rgb(247,239,255); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(247,239,255,1) 0%, rgba(239,224,255,1) 43%, rgba(232,214,255,1) 53%, rgba(250,244,255,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(247,239,255,1) 0%,rgba(239,224,255,1) 43%,rgba(232,214,255,1) 53%,rgba(250,244,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(247,239,255,1) 0%,rgba(239,224,255,1) 43%,rgba(232,214,255,1) 53%,rgba(250,244,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7efff', endColorstr='#faf4ff',GradientType=0 ); /* IE6-9 */
        box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    }

.homecontent .ctitle {
    position: absolute;
    top: 20px;
    left: 45px;
    text-align: center;
    width: 42px;
    padding-top: 15px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background: rgb(218,182,242);
    background: -moz-linear-gradient(top, rgba(218,182,242,1) 0%, rgba(190,120,231,1) 100%);
    background: -webkit-linear-gradient(top, rgba(218,182,242,1) 0%,rgba(192 133 226,1) 100%);
    background: linear-gradient(to bottom, rgb(238 213 255) 0%,rgb(192 133 226) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dab6f2', endColorstr='#be78e7',GradientType=0 ); /* IE6-9 */
}

.homecontent .ctitlefont {
    position: absolute;
    font-size: 16px;
    left: 95px;
    padding-top: 5px;
    font-weight: 600;
    color: #a26ec7;
}

.homecontent .director, .homecontent .director2 {
    background: #fff;
    width: 96%;
    border-radius: 15px;
    margin: 40px auto 20px auto;
    display: flow-root;
    padding: 5px 0px 10px 0px;
}

    .homecontent .director a, .homecontent .director2 a {
        text-decoration: none;
        color: #727272;
        font-size: 15px;
        /*opacity: 0.9;*/
    }

.navd {
    padding: 10px;
    background: #f7f7f7;
    margin: 20px;
    border-radius: 20px;
}

    .navd .navlsitcontent {
        width: 96%;
        margin: 10px auto;
        display: block;
        font-size: 15px;
    }

.navc .navlsitcontent a {
    color: #727272;
    text-decoration: none;
}

.homecontent .niconstytle {
    padding: 10px;
    width: 60px;
    margin: 10px 10px 5px 10px;
    border-radius: 20px;
    background: #f6f6f6;
}


.homecontent .diconstytle {
    padding: 10px;
    width: 60px;
    margin: 10px 10px 5px 10px;
    border-radius: 20px;
    background: rgb(253,243,230); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(253,243,230,1) 0%, rgba(252,237,219,1) 50%, rgba(253,243,230,1) 52%, rgba(253,243,230,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(253,243,230,1) 0%,rgba(252,237,219,1) 50%,rgba(253,243,230,1) 52%,rgba(253,243,230,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(253,243,230,1) 0%,rgba(252,237,219,1) 50%,rgba(253,243,230,1) 52%,rgba(253,243,230,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdf3e6', endColorstr='#fdf3e6',GradientType=0 ); /* IE6-9 */
}

    .homecontent .diconstytle:hover {
        padding: 10px;
        width: 60px;
        margin: 10px 10px 5px 10px;
        border-radius: 20px;
        background: rgb(252,238,222); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(255,237,213,1) 0%, rgba(255,237,214,1) 50%, rgba(255,231,200,1) 50%, rgba(253,231,199,1) 52%, rgba(253,231,199,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(255,237,213,1) 0%,rgba(255,237,214,1) 50%,rgba(255,231,200,1) 50%,rgba(253,231,199,1) 52%,rgba(253,231,199,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgb(255 237 213) 0%,rgb(255 237 214) 50%,rgb(255 231 200) 52%,rgb(255 231 199) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceede', endColorstr='#fceddb',GradientType=0 ); /* IE6-9 */
    }

.homecontent .dicon {
    text-align: center;
    display: inline-block;
}

.homecontent .dtitle {
    position: absolute;
    top: 20px;
    left: 45px;
    text-align: center;
    width: 42px;
    padding-top: 15px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background: rgb(253,216,168); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(253,216,168,1) 0%, rgba(254,177,59,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(253,216,168,1) 0%,rgba(254,177,59,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(253,216,168,1) 0%,rgba(254,177,59,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdd8a8', endColorstr='#feb13b',GradientType=0 ); /* IE6-9 */
}

.homecontent .dtitlefont {
    position: absolute;
    font-size: 16px;
    left: 95px;
    padding-top: 5px;
    font-weight: 600;
    color: #ff9c00;
}

.navd .nav-tabs {
    border-bottom: 0px solid #e9e9e9 !important;
    list-style-type: none;
}

    .navd .nav-tabs > li.active > a, .navd .nav-tabs > li.active > a:focus, .navd .nav-tabs > li.active > a:hover {
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #4b4b4b !important;
        cursor: default;
        background-color: transparent !important;
        padding: 8px 0px !important;
        margin: 0px 15px;
        text-decoration: auto;
        border-bottom: 4px solid #fea700 !important;
        border-top: 0px !important;
        border-left: 0px !important;
        border-right: 0px !important;
    }

    .navd .nav-tabs > li > a {
        color: #888888 !important;
        cursor: default;
        padding: 8px 0px !important;
        margin: 0px 15px;
        font-size: 15px !important;
        font-weight: 600 !important;
        background-color: transparent !important;
        border: 3px solid #ddd !important;
        text-decoration: auto;
        border-bottom: 0px solid #ddd !important;
        border-top: 0px !important;
        border-left: 0px !important;
        border-right: 0px !important;
    }

        .navd .nav-tabs > li > a:hover {
            border-bottom: 4px solid #ffd483 !important;
        }

.navd .navlsitcontent {
    width: 96%;
    margin: 10px auto;
    display: block;
    font-size: 15px;
}

    .navd .navlsitcontent a {
        color: #727272;
        text-decoration: none;
    }

.navd .navlsitcontent {
    width: 95%;
    margin: 10px auto 10px auto;
    display: block;
    font-size: 15px;
}


.navd .navdul {
    padding: 5px;
    margin-left: 155px;
}

.homecontent .iconfont {
    font-size: 14px;
    display: block;
    text-align: center;
}

.homeblock2 .ablock {
    display: inline-flex;
}

.homeblock2 .bblock {
    display: inline-flex;
    padding-bottom: 70px;
}

.homecontent .qlinkallicon {
    padding: 6px;
    padding: 6px;
    width: -webkit-fill-available;
    overflow-x: auto;
    overflow-y: hidden;
    webkit-overflow-scrolling: touch;
    white-space: nowrap;
}

.addaccount.todoul {
    margin: 0px !important;
    padding: 10px 20px 20px 20px;
    background: #fff;
    width: 100%;
}

@media (max-width: 576px) {
    .navb {
        min-height: fit-content;
    }

    .navc {
        min-height: fit-content;
        background: #f7f7f7;
        margin: 10px;
        border-radius: 20px;
    }

    .navd {
        min-height: fit-content;
        background: #f7f7f7;
        margin: 10px;
        border-radius: 20px;
    }

    .homecontent .ctitle, .homecontent .dtitle {
        padding-top: 10px;
    }

    .homecontent .ctitle, .homecontent .dtitle {
        top: 0px;
        left: 10px;
    }

    .homecontent .ctitlefont, .homecontent .dtitlefont {
        padding-top: 0px;
        left: 60px;
        margin-top: -8px;
    }

    .navd .nav-tabs > li > a {
        margin: 0px 12px;
    }

    .navd .nav-tabs > li.active > a, .navd .nav-tabs > li.active > a:focus, .navd .nav-tabs > li.active > a:hover {
        margin: 0px 12px;
    }

    .nava .moreline {
        width: 95%;
    }

    .homecontent .iconfont {
        font-size: 13px;
        display: block;
        text-align: center;
    }

    .homecontent .director2 {
        background: #fff;
        width: 100%;
        border-radius: 15px;
        margin: 30px auto 20px auto;
        display: flow-root;
        padding: 5px 0px 10px 0px;
    }

        .homecontent .director2 a {
            text-decoration: none;
            color: #727272;
            font-size: 15px;
        }

    .nava .nav-tabs > li.active > a, .nava .nav-tabs > li.active > a:focus, .nava .nav-tabs > li.active > a:hover {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #333 !important;
        cursor: default;
        background-color: #fff !important;
        padding: 10px 6px !important;
        margin: 0px 2px !important;
        text-decoration: auto;
        border-bottom: 4px solid #737373 !important;
        border-top: 0px !important;
        border-left: 0px !important;
        border-right: 0px !important;
    }

    .nava .nav-tabs > li > a {
        color: #999 !important;
        cursor: default;
        padding: 10px 6px !important;
        margin: 0px 2px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        background-color: #fff !important;
        text-decoration: auto;
        border-bottom: 4px solid #ddd !important;
        border-top: 0px !important;
        border-left: 0px !important;
        border-right: 0px !important;
    }

    .navb .nav-tabs > li.active > a, .navb .nav-tabs > li.active > a:focus, .navb .nav-tabs > li.active > a:hover {
        padding: 10px 6px !important;
    }

    .navb .nav-tabs > li > a {
        padding: 10px 6px !important;
    }

    .navb .navlsitcontent {
        width: 100%;
        margin: 0px auto;
        display: block;
    }

    .homecontent .bicon {
        text-align: center;
        display: inline-block;
    }

    .homeblock2 .ablock, .homeblock2 .bblock {
        display: block;
    }

    .homecontent .homeblock1-right {
        padding: 5px;
        margin: 0px 0px;
    }

    .homecontent .titlefont {
        font-size: 13px;
    }

    .homecontent .titlefontnum {
        font-size: 26px;
    }

    .homecontent .qlink {
        border-radius: 15px;
        border: 2px solid #f6f6f6;
        margin: 0px 5px;
        display: flex;
    }

    .homecontent .qlinkallicon {
        padding: 0px 6px;
        width: -webkit-fill-available;
        overflow-x: auto;
        overflow-y: hidden;
        webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .homecontent .qlinktitle {
        background: #fafafa;
        text-align: center;
        width: 56px;
        height: 100px;
        padding: 10px;
        border-bottom-left-radius: 15px;
        border-top-left-radius: 15px;
        color: #666;
        letter-spacing: 0.5px;
        padding-top: 25px;
        border-right: 1px solid #eee;
    }

    .homecontent .qlinkicon {
        font-size: 18px;
        color: #f5d500;
        line-height: 30px;
    }

    .homecontent .qlinkfont {
        display: block;
        font-size: 13px;
    }

    .homecontent .iconfont {
        font-size: 13px;
        display: block;
        text-align: center;
    }

    .homecontent .homeblock2a {
        padding-right: 0px !important;
        padding-left: 0px !important;
        margin: 5px 5px;
        border-radius: 15px;
        background: #fff;
        -moz-box-shadow: 0 3px 3px rgb(234 234 234);
        -webkit-box-shadow: 0 3px 3px rgb(234 234 234);
        box-shadow: 0 3px 3px rgb(234 234 234);
        padding-bottom: 10px;
    }

    .homecontent .director {
        background: #fff;
        width: 100%;
        border-radius: 15px;
        margin: 30px auto 0px auto;
        display: flow-root;
        padding: 5px 0px 10px 0px;
    }

    .homecontent .director2 {
        background: #fff;
        width: 100%;
        border-radius: 15px;
        margin: 20px auto 0px auto;
        display: flow-root;
        padding: 5px 0px 10px 0px;
    }

    .qlinkallicon .bicon, .qlinkallicon .cicon, .qlinkallicon .dicon {
        padding: 0px 0px !important;
    }

    .navd .navdul {
        margin-top: 25px!important;
        padding: 0px;
        margin-left: 0px;
        display: flex;
    }

    .homecontent .message {
        display: none;
    }

    .addaccount.todoul {
        margin: 0px !important;
        padding: 10px 10px 0px 10px;
        background: #fff;
    }

    .noticeline {
        position: absolute;
        top: 0px;
        height: 5px;
        width: 70px;
        background: #3695d9;
        display:none;
    }

    .todoline {
        position: absolute;
        top: 0px;
        left: 20px;
        height: 5px;
        width: 70px;
        background: #3695d9;
        display: none;
    }

    .addaccount .noticeitem h1 {
        font-size: 15px;
        font-weight: 600;
        padding: 10px 10px 0px 10px;
        color: #3695d9
    }

    .todomodal .todoitem h1 {
        font-size: 15px;
        font-weight: 600;
        padding: 20px 10px 0px 15px;
        color: #3695d9
    }

    .addaccount .noticedown {
        display: block;
        text-align: end;
        padding: 8px 0px;
        width: fit-content;
        border-left: 0px solid #eee;
        right: 20px;
    }

    .addaccount .noticedel {
        width: 40px;
        border-radius: 15px;
        line-height: 0px;
        font-size: 16px;
        border-left: 0px solid #eee;
        position: absolute;
        right: 0px;
        top: 0px;
    }

    .addaccount .noticform {
        border-radius: 15px;
        padding: 0px;
        background: #f6f6f6;
        margin: 12px 5px 0px 5px;
        font-size: 15px;
        color: #555;
        line-height: 30px;
        letter-spacing: .6px;
        border: 1px solid #eaeaea;
        height: fit-content;
        display: flex;
        position: relative;
    }

        .addaccount .noticform:hover {
            border: 1px solid #878787;
            background: #fff;
        }

    .addaccount .noticform2 {
        position: relative;
        padding: 8px;
        display: grid;
    }

    .addaccount .noticetitle {
        font-size: 15px;
        font-weight: 600;
        color: #ff8400;
        line-height: 25px;
        text-align: center;
        padding: 5px 15px;
    }

    .addaccount .noticetitle2 {
        font-size: 15px;
        font-weight: 600;
        color: #5f5f5f;
        line-height: 22px;
    }

    .addaccount .notice-content {
        color: #7d7d7d;
        padding: 0px 32px 3px 0px;
        display: block;
        line-height: 18px;
        font-size: 13px;
    }

    .addaccount .notice {
        text-align: center;
        margin: auto 0px;
        line-height: 33px;
        font-size: 13px;
        background: #fff8f1;
        border-radius: 15px;
        padding: 5px;
        margin-right: 5px;
        display: contents;
    }

    .addaccount .noticeread {
        text-align: start;
        line-height: 0px;
        font-size: 13px;
        background: #fff;
        border-radius: 0px;
        color: #bababa;
        margin-right: 5px;
        padding: 5px 0px 0px 0px;
        display: none;
    }

    .addaccount .noticenoread {
        text-align: start;
        line-height: 0px;
        font-size: 13px;
        background: #fff;
        border-radius: 0px;
        padding: 5px 0px 8px 0px;
        color: #fe8400;
    }

    .addaccount .noticeno {
        font-size: 23px;
        text-align: center;
        margin: 5px 0px 0px 10%;
        padding: 0px 3px;
        line-height: 24px;
        color: #ff8400;
    }

    .addaccount .searchbg {
        background: #fff;
        display: flow-root;
        border: 0px;
        margin: 3px;
        padding: 3px;
        width: 100%;
        border-radius: 15px;
        position: relative;
        border: 1px solid #dedede;
    }

    .addaccount .searchinput {
        width: 65%;
        border: 0px;
        padding: 5px 10px;
        margin-left: 12px;
        border-left: 1px solid #ddd;
        font-size: 15px;
        color: #666;
    }

    input {
        outline: none;
    }

    .addaccount .searchinputbtn {
        right: 0px;
        position: absolute;
        padding: 6px 15px;
        border: 0px;
        margin: 0px 10px;
        border-radius: 8px;
        font-size: 14px;
        color: #717171;
        background: #efefef;
        font-weight: 600;
    }

        .addaccount .searchinputbtn:hover {
            color: #fff;
            background: #3695d9;
        }

    .addaccount .form-title {
        font-size: 14px;
        font-weight: 500;
        color: #6b6b6b;
        line-height: 25px;
    }

    .navd .nav-tabs > li.active > a, .navd .nav-tabs > li.active > a:focus, .navd .nav-tabs > li.active > a:hover {
        font-size: 14px !important;
    }

    .navd .nav-tabs > li > a {
        font-size: 14px !important;
    }

    .homecontent .dtitlefont, .homecontent .ctitlefont {
        font-size: 15px;
        left: 60px;
    }

    .addaccount .onboard-bg4 {
        display: inline-block;
        border-radius: 10px;
        margin: 0px;
        border: 1px solid #ddd;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    .navd .navdul {
        margin-top: 50px;
        padding: 0px;
        margin-left: 0px;
        display: flex;
    }

    .navb {
        min-height: fit-content;
    }

    .navc {
        min-height: fit-content;
        background: #f7f7f7;
        margin: 10px;
        border-radius: 20px;
    }

    .navd {
        min-height: fit-content;
        background: #f7f7f7;
        margin: 10px;
        border-radius: 20px;
    }

    .homecontent .ctitle, .homecontent .dtitle {
        top: 0px;
        left: 25px;
    }

    .homecontent .ctitlefont, .homecontent .dtitlefont {
        padding-top: 0px;
        left: 75px;
    }

    .navd .nav-tabs > li > a {
        margin: 0px 12px;
    }

    .navd .nav-tabs > li.active > a, .navd .nav-tabs > li.active > a:focus, .navd .nav-tabs > li.active > a:hover {
        margin: 0px 12px;
    }

    .nava .moreline {
        width: 95%;
    }

    #nava {
        display: block;
    }

    .homecontent .director {
        width: 100%;
    }

    .homecontent .director2 {
        background: #fff;
        width: 100%;
        border-radius: 15px;
        margin: 30px auto 20px auto;
        display: flow-root;
        padding: 5px 0px 10px 0px;
    }

        .homecontent .director2 a {
            text-decoration: none;
            color: #727272;
            font-size: 15px;
        }

    .nava .nav-tabs > li.active > a, .nava .nav-tabs > li.active > a:focus, .nava .nav-tabs > li.active > a:hover {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #333 !important;
        cursor: default;
        background-color: #fff !important;
        padding: 10px 6px !important;
        margin: 0px 2px !important;
        text-decoration: auto;
        border-bottom: 4px solid #737373 !important;
        border-top: 0px !important;
        border-left: 0px !important;
        border-right: 0px !important;
    }

    .nava .nav-tabs > li > a {
        color: #999 !important;
        cursor: default;
        padding: 10px 6px !important;
        margin: 0px 2px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        background-color: #fff !important;
        text-decoration: auto;
        border-bottom: 4px solid #ddd !important;
        border-top: 0px !important;
        border-left: 0px !important;
        border-right: 0px !important;
    }

    .navb .navlsitcontent {
        width: 100%;
        margin: 0px auto;
        display: block;
    }

    .homecontent .bicon {
        text-align: center;
        display: inline-block;
    }

    .homecontent .homeblock2 {
        margin: 5px 0px;
        border-radius: 15px;
        padding-right: 0px;
        padding-left: 0px;
        display: flex;
        flex-direction: column-reverse;
    }

    .homeblock2 .ablock, .homeblock2 .bblock {
        display: block;
    }

    .homeblock2 .bblock {
        padding-bottom: 20px;
    }

    .homecontent .titlefont {
        font-size: 13px;
    }

    .homecontent .homeblock1 {
        display: flex;
    }

    .homecontent .titlefontnum {
        font-size: 36px;
    }

    .homecontent .homeblock1-right {
        width: 100%;
    }

    .homecontent .homeblock1-left {
        width: 100%;
        padding: 15px 10px 0px 10px;
    }
}

@media (max-width: 1095px) {
    .navd .navdul {
        margin-top: 40px;
        padding: 0px;
        margin-left: 0px;
        display: flex;
    }

    .homecontent .homeblock1 {
        display: flex!important;
    }

}

.qlinkallicon .bicon, .qlinkallicon .cicon, .qlinkallicon .dicon {
    padding: 0px 8px;
}

.homecontent .message {
    display: none;
    position: fixed;
    width: 70px;
    height: 70px;
    border-radius: 999em;
    background-color: #3aa5ff;
    bottom: 40px;
    right: 40px;
    z-index: 9;
    box-shadow: 3px 3px 5px rgb(213 213 213);
    background: rgb(89,180,255); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(89,180,255,1) 0%, rgba(22,150,255,1) 53%, rgba(66,170,255,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(89,180,255,1) 0%,rgba(22,150,255,1) 53%,rgba(66,170,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(89,180,255,1) 0%,rgba(22,150,255,1) 53%,rgba(66,170,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59b4ff', endColorstr='#42aaff',GradientType=0 ); /* IE6-9 */
}

    .homecontent .message:hover {
        background-color: #289dff;
        background: rgb(53,164,255); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(53,164,255,1) 0%, rgba(0,114,255,1) 52%, rgba(40,162,255,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(53,164,255,1) 0%,rgba(0,114,255,1) 52%,rgba(40,162,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(53,164,255,1) 0%,rgba(0,114,255,1) 52%,rgba(40,162,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35a4ff', endColorstr='#28a2ff',GradientType=0 ); /* IE6-9 */
    }

.homecontent .messageicon {
    width: 80px;
    height: 80px;
    text-align: center;
    color: #fff;
    padding-right: 8px;
    margin-top: 16px;
    font-size: 35px;
}

.homecontent .todobtn {
    padding: 0px;
    margin: 0px;
    border: 0px;
    background: #fff;
    display: contents;
}

.homecontent .fade-in {
    animation: fadeIn ease 3s;
    -webkit-animation: fadeIn ease 3s;
    -moz-animation: fadeIn ease 3s;
    -o-animation: fadeIn ease 3s;
    -ms-animation: fadeIn ease 3s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-o-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-ms-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


/* The animation code */
@keyframes fade-left {
    0% {
        opacity: 0;
        left: 50px;
        top: 0px;
    }
    100% {
        opacity: 1;
        left: 0px;
        top: 0px;
    }
}

/* The element to apply the animation to */
.homecontent .fade-left {
    display: block;
    position: relative;
    opacity: 1;
    animation-name: fade-left;
    animation-duration: 2s;
}


/* The animation code */
@keyframes fade-top {
    0% {
        opacity: 0;
        left: 0px;
        top: 30px;
    }

    100% {
        opacity: 1;
        left: 0px;
        top: 0px;
    }
}

/* The element to apply the animation to */
.homecontent .fade-top {
    display: block;
    position: relative;
    opacity: 1;
    animation-name: fade-top;
    animation-duration: 1s;
}

/* Clear floats after the tab */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.homecontent .tabcontent {
    display: none;
}

/*grid樣式*/
.accountform2 .account-tablestyle {
    overflow: hidden;
    width: 100%;
}

.hei40 {
    height: 40px;
}

/*單行多選 手機換行*/
.accountform .muselectline {
    display: flex!important;
    flex-wrap: wrap!important;
    align-items: center;
}

.formcontent .tablecontent2 {
    padding: 3px 5px 3px 5px;
    display:flex;
}

/*閉合選單按鈕*/
@media screen and (max-width: 799px) {
    .menubtndisplay {
        margin: 0px 5px 5px 5px;
        padding: 5px 8px;
        font-size: 15px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        border: 0px;
        color: #fff;
        font-weight: 500;
        letter-spacing: 2px;
        background: #7f7f7f;
        opacity: 80%;
        z-index: 9;
    }

    .menubtndisplay2 {
        margin: 40px 5px 5px 5px;
        padding: 5px 8px;
        font-size: 15px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        border: 0px;
        color: #fff;
        font-weight: 500;
        letter-spacing: 2px;
        background: #ff6c00;
        opacity: 100%;
        z-index: 9;
    }
}

@media screen and (min-width: 800px) {
    .menubtndisplay {
        margin: 0px 5px 5px 5px;
        padding: 5px 8px;
        font-size: 15px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        border: 0px;
        color: #fff;
        font-weight: 500;
        letter-spacing: 2px;
        background: #7f7f7f;
        opacity: 80%;
        z-index: 9;
    }

    .menubtndisplay2 {
        margin: 40px 5px 5px 5px;
        padding: 5px 8px;
        font-size: 15px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        border: 0px;
        color: #fff;
        font-weight: 500;
        letter-spacing: 2px;
        background: #ff6c00;
        opacity: 100%;
        z-index: 9;
    }
}

.hei60vh .dxgvCSD {
    height: 53vh !important;
}



/* 雲助理通訊錄 */
.adbook-container {
    display: flex;
    padding: 7px 0px 7px 8px;
    margin: 0px;
    align-items: center;
    border-bottom: 1px solid #eee;
}

.adbook-photo {
    flex-grow: 1;
    text-align: center;
    display: contents;
}

    .adbook-photo img {
        width: 75px;
    }

.adbook-info {
    width: -webkit-fill-available;
}

    .adbook-info p {
        line-height: 6px;
        font-size: 15px;
        letter-spacing: 0.5px;
        color: #333;
    }

.adbook-name {
    color: #00a5f1;
    font-weight: 700;
    padding-right: 6px;
    font-size: 15px;
}

.adbook-mobile {
    background: #f3f3f3;
    border-radius: 10px;
    padding: 0px 10px;
    line-height: 2;
    font-size: 14.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin: 1px 0px;
}

    .adbook-favorite img {
        width: 18px;
    }

    .adbook-favorite .dxbButton_Office365 div.dxb {
        padding: 5px 12px 5px 5px !important;
        border: 0px dotted transparent;
    }

.adbookbtnon {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding: 0px 8px;
}

.ad-btnon {
    padding: 12px 0px;
    background: #fff;
    color: #008DDB;
    border: 0px;
    border-bottom: 3px solid #008DDB;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
}

    .ad-btnon img {
        padding: 0px 2px;
        width: 14px;
    }

.ad-btn {
    padding: 12px 5px;
    background: #fff;
    color: #999;
    border: 0px;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
}

/*行事曆*/
    .calendar__body {
    width: 90%;
    margin: 0px auto;
}

.calendar__days {
    display: flex;
    justify-content: space-around;
    padding: 10px 0px;
    background: #4ea4d6;
    color: #fff;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.calendar__dates {
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid #ebebeb;
}

.calendar__date {
    display: block;
    background: #fff;
    width: 100%;
    padding: 10px 0px;
    border-right: 1px solid #ebebeb;
    height: 10vh;
}

    .calendar__date.date-grey {
        background: #f0f0f0 !important;
        color: #c0c0c0;
    }

    .calendar__date.date-yellow {
        background: #fff9e9 !important;
    }

    .calendar__date.date-yellow2 {
        background: #ffebb5 !important;
    }

    .calendar__date.date-pink {
        background: #ffeaee !important;
    }

    .calendar__date.date-pink2 {
        background: #ffe3e8 !important;
    }

    .calendar__date.date-red {
        background: #ffbeb8 !important;
    }

    .calendar__date.date-green {
        background: #c4f797 !important;
    }

    .calendar__date.date-purple {
        background: #ebdff6 !important;
    }

    .calendar__date.date-purple2 {
        background: #e1cbf5 !important;
    }

.borderright0 {
    border-right: 0px solid #ddd;
}

.date_number {
    display: flex;
    justify-content: flex-start;
    padding-left: 10px;
}

.date_number2 {
    display: flex;
    justify-content: flex-start;
    padding-left: 10px;
    font-weight: 600;
}

.date-content {
    display: flex;
    align-items: flex-start !important;
    justify-content: flex-start;
    border: 0px;
    padding: 0px 10px 50px 10px;
    margin: 0px auto;
    width: 100%;
    font-size: 14px;
    background: none;
    text-align: left;
    line-height: 17px;
    white-space: normal;
    height: 100%;
    font-weight: 500;
}

.date-content2 {
    display: flex;
    align-items: flex-start !important;
    justify-content: flex-start;
    border: 0px;
    padding: 0px 10px 50px 10px;
    margin: 0px auto;
    width: 100%;
    font-size: 14px;
    background: none;
    text-align: left;
    line-height: 17px;
    white-space: normal;
    height: 100%;
    font-weight: 500;
    cursor: pointer;
}

.date-content-none {
    opacity: 0;
}

.calendar__body .searchbar {
    border-radius: 20px;
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.calendar__body .searchbar-left {
    display: flex;
    align-items: center;
    padding: 10px;
}

.calendar__body .searchbar-right {
    display: flex;
    align-items: center;
    padding: 10px;
    flex-grow: 1;
    justify-content: end;
}

.calendar__body .month {
    font-size: 28px;
    color: #2d2d2d;
    padding: 0px 20px;
}

.calendar__body .lastmonth, .nextmonth {
    background: #4ea4d6;
    border-radius: 50%;
    font-size: 16px;
    padding: 12px;
    color: #fff;
    height: 12px;
    width: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 20px;
    border: 0px;
    cursor: pointer;
    font-family: cursive;
    font-weight: 600;
}

    .calendar__body .lastmonth:hover, .nextmonth:hover {
        background: #333;
        transition: all 0.5s;
    }

    .calendar__body .lastmonth img, .nextmonth img {
        width: 15px;
    }

.searchbar-right .color-red {
    background: #ffbeb8;
    border-radius: 50%;
    height: 15px;
    width: 15px;
    margin: 0px 5px 0px 25px;
    border: 1px solid #ddd;
}

.searchbar-right .color-green {
    background: #c4f797;
    border-radius: 50%;
    height: 15px;
    width: 15px;
    margin: 0px 5px 0px 25px;
    border: 1px solid #ddd;
}

.searchbar-right .color-pink {
    background: #ffeaee;
    border-radius: 50%;
    height: 15px;
    width: 15px;
    margin: 0px 5px 0px 25px;
    border: 1px solid #ddd;
}

.searchbar-right .color-pink2 {
    background: #ffe3e8;
    border-radius: 50%;
    height: 15px;
    width: 15px;
    margin: 0px 5px 0px 25px;
    border: 1px solid #ddd;
}

.searchbar-right .color-purple {
    background: #ebdff6;
    border-radius: 50%;
    height: 15px;
    width: 15px;
    margin: 0px 5px 0px 25px;
    border: 1px solid #ddd;
}

.searchbar-right .color-purple2 {
    background: #e1cbf5;
    border-radius: 50%;
    height: 15px;
    width: 15px;
    margin: 0px 5px 0px 25px;
    border: 1px solid #ddd;
}

.searchbar-right .color-yellow {
    background: #fff9e9;
    border-radius: 50%;
    height: 15px;
    width: 15px;
    margin: 0px 5px 0px 25px;
    border: 1px solid #ddd;
}

.searchbar-right .color-yellow2 {
    background: #ffebb5;
    border-radius: 50%;
    height: 15px;
    width: 15px;
    margin: 0px 5px 0px 25px;
    border: 1px solid #ddd;
}

.searchbar-right .color-w {
    background: #fff;
    border-radius: 50%;
    height: 15px;
    width: 15px;
    margin: 0px 5px 0px 25px;
    border: 1px solid #ddd;
}

/*行事曆-手機*/
@media (max-width: 600px) {
    .calendar__body {
        width: 100%;
        margin: 0px auto;
    }

    .calendar__days {
        display: flex;
        justify-content: space-around;
        padding: 5px 0px;
        background: #ffffff;
        color: #0d7fe0;
        font-weight: 700;
        font-size: 14px;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border-top: 1px solid #d7d7d7;
        border-right: 1px solid #f6f6f6;
        border-bottom: 1px solid #d7d7d7;
    }

    .calendar__dates {
        display: flex;
        justify-content: space-around;
        border-bottom: 1px solid #ebebeb;
    }

    .calendar__date {
        display: block;
        background: #fff;
        width: 100%;
        padding: 0px 0px 8px 0px;
        border-right: 1px solid #ebebeb;
        height: 10vh;
        color: #444;
    }

    .calendar__date.date-grey {
        background: #f2f2f2 !important;
        color: #c0c0c0;
    }

        .calendar__date.date-yellow {
            background: #fff9e9 !important;
        }

        .calendar__date.date-yellow2 {
            background: #ffebb5 !important;
        }

        .calendar__date.date-pink {
            background: #ffeaee !important;
        }

        .calendar__date.date-pink2 {
            background: #ffe3e8 !important;
        }

        .calendar__date.date-red {
            background: #ffbeb8 !important;
        }

        .calendar__date.date-green {
            background: #c4f797 !important;
        }

        .calendar__date.date-purple {
            background: #ebdff6 !important;
        }

        .calendar__date.date-purple2 {
            background: #e1cbf5 !important;
        }

    .borderright0 {
        border-right: 0px solid #ddd;
    }

    .date_number {
        display: flex;
        justify-content: flex-start;
        padding: 3px 8px 3px 8px;
        font-size: 13px;
    }

    .date_number2 {
        display: flex;
        justify-content: flex-start;
        padding: 0px 5px;
        font-size: 15px;
        font-weight: 600;
        color: #444;
        margin-top: 3px !important;
    }

    .date-content {
        display: flex;
        justify-content: flex-start;
        border: 0px;
        padding: 0px 3px 40px 3px;
        margin: 0px auto;
        width: 100%;
        font-size: 12px;
        background: none;
        text-align: left;
        line-height: 15px;
        font-weight: 600;
        white-space: normal;
        height: 100%;
    }

    .date-content2 {
        display: block;
        justify-content: flex-start;
        border: 0px;
        padding: 8px 0px 5px 8px;
        margin: -10px auto 0px auto;
        width: fit-content;
        font-size: 12px;
        background: none;
        text-align: left;
        line-height: 15px;
        font-weight: 600;
        white-space: normal;
        height: 100%;
        cursor: pointer;
        color: #904bd9 !important;
    }

    .searchbar #ddlWorkClass.dropdownlist_e {
        width: max-content!important;
        padding: 0px 3px !important;
        margin-top: 3px !important;
        border: 1px solid #50ADFF !important;
        font-size: 14px;
    }

    .searchbar .dxbButton_Office365.button_e.dxbButtonSys.dxbTSys {
        width: 96px;
        letter-spacing: 0.01em;
        background: linear-gradient(135deg, #8D7CF5 0%, #55A9FB 100%) !important;
        font-size: 15px !important;
        font-weight: 600;
    }

    .date-content-none {
        opacity: 0;
    }

    .calendar__body .searchbar {
        border-radius: 20px;
        width: 100%;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    .calendar__body .searchbar-left {
        display: flex;
        align-items: center;
        padding: 6px 0px;
        margin: 0 auto;
        justify-content: center;
        background: linear-gradient(135deg, #EFF2FF 0%, #EBF9FF 100%);
        box-shadow: 0px 3px 3px #eee;
        z-index: 9;
        width: inherit;
    }

    .calendar__body .searchbar-right {
        display: flex;
        align-items: center;
        font-size: 13px;
        white-space: nowrap;
        justify-content: space-between;
        background: #fff;
        padding: 5px 10px;
        background: #fff !important;
        margin: 0px 0px;
        width: -webkit-fill-available;
    }

    .calendar__body .month {
        font-size: 19px;
        color: #444;
        letter-spacing: 0.5px;
        margin: 0px auto;
        font-weight: 600;
    }

    .calendar__body .lastmonth, .nextmonth {
        background: linear-gradient(135deg, #55A9FB 0%, #8D7CF5 100%);
        border-radius: 50%;
        font-size: 16px;
        padding: 12px;
        color: #fff;
        height: 12px;
        width: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0px;
        cursor: pointer;
        font-family: cursive;
        font-weight: 600;
    }

        .calendar__body .lastmonth:hover, .nextmonth:hover {
            background: #333;
            transition: all 0.5s;
        }

    .searchbar-right .color-red {
        background: #ffbeb8;
    }

    .searchbar-right .color-green {
        background: #c4f797;
    }

    .searchbar-right .color-pink {
        background: #ffeaee;
    }

    .searchbar-right .color-pink2 {
        background: #ffe3e8;
    }

    .searchbar-right .color-purple {
        background: #ebdff6;
    }

    .searchbar-right .color-purple2 {
        background: #e1cbf5;
    }

    .searchbar-right .color-yellow {
        background: #fff9e9;
    }

    .searchbar-right .color-yellow2 {
        background: #ffebb5;
    }

    .searchbar-right .color-w {
        background: #fff;
    }

    .searchbar-right .color-blue, .searchbar-right .color-pink, .searchbar-right .color-red, .searchbar-right .color-green, .searchbar-right .color-yellow, .searchbar-right .color-w {
        border-radius: 50%;
        height: 13px;
        width: 13px;
        margin: 0px 5px 0px 12px;
        border: 1px solid #ddd;
    }
}

/*RWD左邊選單捲軸顯示*/
.dxpnlControl_Office365.dxpnl-edge .dxpnl-scc {
    padding: 8px;
    /*overflow: overlay !important;*/
    -ms-overflow: auto !important;
    -moz-overflow: auto !important;
    -webkit-overflow: overlay !important;
    -o-overflow: auto !important;
    overflow-x: hidden !important;
    width: 260px;
}

/*操作導引*/
.guide-h1 {
    display: flex;
    position: fixed;
    width: 100%;
    top: 0px;
    background: #f0f0f0;
    z-index: 999;
}

.guide-info {
    width: 97%;
    color: #333;
    font-size: 15px;
    padding: 20px;
    margin: 10px auto;
    line-height: 28px;
    background: #fff;
    letter-spacing: 0.5px;
    border-radius: 10px;
}

    .guide-info a, .guide-info a:hover {
        color: #0094ff;
    }

.guidefont-blue {
    color: #0094ff;
}

.guidefont-red {
    color: #ff8400;
}

.guidefont-gray {
    color: #999;
}

.guide-wrapper {
    display: grid;
    border: 1px solid #eee;
    padding: 2px;
    text-align: center;
    background: #fff;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

    .guide-wrapper a {
        color: #ff6a00;
    }

.guide-wrapper2 {
    display: grid;
    border: 1px solid #eee;
    padding: 2px;
    text-align: center;
    background: #f6f6f6;
    grid-template-columns: 1fr 1fr 1fr;
}

.guide-flip {
    margin: 0px;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    line-height: 45px;
    padding: 0px 30px 0px 20px;
    align-items: flex-end;
    font-size: 15px;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #0094ff;
    background: #ebebeb;
}

.guide-panel {
    margin: 0px;
    text-align: center;
    display: none;
    position: absolute;
    z-index: 99;
    width: 100%;
    background: #f1f1f1;
    padding: 0px 10px 20px 10px;
    border-bottom: 1px solid #ddd;
}

.guide-btn {
    background: #0091e6;
    color: #fff;
    display: inline-block;
    padding: 0px 10px;
    border-radius: 15px;
}

.guide-title {
    height: 50px;
    color: #333;
    font-size: 16px;
    font-weight: 600;
    line-height: 45px;
    width: 100%;
    padding: 0px 10px 0px 30px;
    align-items: flex-start;
}

.borderbottom {
    border-bottom: 1px solid #eee;
    text-align: left;
    padding: 0px 30px;
}

#guide-content {
    width: auto;
    max-width: 96%;
    background: #ffffff;
    border-radius: 15px;
    margin: 50px auto 10px auto;
    padding: 15px;
}

.guide-menu2 {
    display: block;
    overflow: auto;
    width: 100%;
    height: 600px;
    border: 1px solid #ddd;
}

#guide-content .nav-tabs > li > a {
    color: #999 !important;
    cursor: default;
    padding: 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    background-color: #fff !important;
    border: 1px solid #ddd !important;
    border-bottom-color: transparent !important;
    list-style: none;
}

#guide-content .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
    color: #fff !important;
    cursor: default;
    font-size: 16px !important;
    padding: 12px !important;
    font-weight: 600 !important;
    background-color: #1f89e4 !important;
    border: 1px solid #ddd !important;
    border-bottom-color: transparent !important;
    list-style: none;
}

.borderright1 {
    border-right: 1px solid #ddd;
}

@media (max-width: 600px) {
    .guide-info {
        width: 95%;
        color: #333;
        font-size: 15px;
        padding: 15px;
        margin: 10px auto;
        line-height: 25px;
        background: #fff;
        letter-spacing: 0px;
        border-radius: 10px;
    }

    .guide-wrapper {
        display: grid;
        border: 1px solid #eee;
        padding: 2px;
        text-align: center;
        background: #fff;
        grid-template-columns: 1fr 1fr 1fr;
    }

    .guide-wrapper2 {
        display: grid;
        border: 1px solid #eee;
        padding: 2px;
        text-align: center;
        background: #f6f6f6;
        grid-template-columns: 1fr;
    }

    #guide-content .nav {
        display: flex !important;
    }
}

    /* 20231215 downlist 樣式*/
    @media (max-width: 600px) {
        dxflBreakpointGroupSys > [class*='dxflGroupCell'] > .dxflGroupBoxSys > .dxflGroupSys > div, .dxflBreakpointGroupSys > [class*='dxflGroupCell'] > .dxflGroupSys > div, .dxflBreakpointGroupSys.dxflGroupSys > div {
            display: inline-table !important;
        }
    }

    @media (min-width: 601px) {
        dxflBreakpointGroupSys > [class*='dxflGroupCell'] > .dxflGroupBoxSys > .dxflGroupSys > div, .dxflBreakpointGroupSys > [class*='dxflGroupCell'] > .dxflGroupSys > div, .dxflBreakpointGroupSys.dxflGroupSys > div {
        }
    }

    div.dxflGroupSys > div {
        display: table !important;
    }

    .dxeButtonEditSys.dxeButtonEdit {
        height: 36px !important;
        border-radius: 5px !important;
        margin: 2px 0px 1px 0px !important;
        padding: 3px !important;
        border-radius: 7px !important;
        border: 1px solid #c7c7c7 !important;
    }

    .dxflNestedControlCell_Office365 .buttonedit_e {
        margin: 3px 0px !important;
    }

    .dxeButtonEditButton, .dxeCalendarButton, .dxeSpinIncButton, .dxeSpinDecButton, .dxeSpinLargeIncButton, .dxeSpinLargeDecButton, .dxeColorEditButton {
        background-color: white !important;
        background-image: none !important;
        vertical-align: middle !important;
        cursor: pointer !important;
        text-align: center !important;
        white-space: nowrap !important;
        border: none !important;
    }

    .dxeButtonEditButtonHover, .dxeSpinIncButtonHover, .dxeSpinDecButtonHover, .dxeSpinLargeIncButtonHover, .dxeSpinLargeDecButtonHover {
        background-color: #3695D9 !important;
        color: #fff !important;
    }

    .dxeButton dxeButtonEditButton .dxeButtonEditButtonHover {
        color: #fff !important;
    }

    .dxcaRefreshButtonHover .dxEditors_caRefresh, .dxdd-root.dxmodalSys .dxeButtonEditButtonHover .dxEditors_edtClear, .dxdd-root.dxmodalSys
    .dxEditors_edtCalendarFNNextPeriod, .dxdd-root.dxmodalSys .dxEditors_edtCalendarFNPrevPeriod, .dxdd-root.dxmodalSys .dxEditors_edtCalendarNextMonth,
    .dxdd-root.dxmodalSys .dxEditors_edtCalendarNextYear, .dxdd-root.dxmodalSys .dxEditors_edtCalendarPrevMonth, .dxdd-root.dxmodalSys .dxEditors_edtCalendarPrevYear,
    .dxdd-root.dxmodalSys .dxEditors_edtClear, .dxeButtonEditButtonHover .dxEditors_edtClear, .dxeButtonEditButtonHover .dxEditors_edtDropDown,
    .dxeButtonEditButtonHover .dxEditors_edtEllipsis, .dxeButtonEditButtonPressed .dxEditors_edtDropDown, .dxeButtonEditButtonPressed
    .dxEditors_edtEllipsis, .dxEditors_caRefresh, .dxEditors_ddapply, .dxEditors_ddclose, .dxEditors_edtBinaryImageDelete,
    .dxEditors_edtBinaryImageOpenDialog, .dxEditors_edtCalendarFastNavBackToPrevMode, .dxEditors_edtCalendarFastNavBackToPrevModeRtl,
    .dxEditors_edtCalendarFNNextPeriod, .dxEditors_edtCalendarFNNextYear, .dxEditors_edtCalendarFNPrevPeriod, .dxEditors_edtCalendarFNPrevYear,
    .dxEditors_edtCalendarNextMonth, .dxEditors_edtCalendarNextMonthDisabled, .dxEditors_edtCalendarNextYear, .dxEditors_edtCalendarNextYearDisabled,
    .dxEditors_edtCalendarPrevMonth, .dxEditors_edtCalendarPrevMonthDisabled, .dxEditors_edtCalendarPrevYear, .dxEditors_edtCalendarPrevYearDisabled,
    .dxEditors_edtClear, .dxEditors_edtDETSClockFace, .dxEditors_edtDETSHourHand, .dxEditors_edtDETSMinuteHand, .dxEditors_edtDETSSecondHand,
    .dxEditors_edtDropDown, .dxEditors_edtDropDownDisabled, .dxEditors_edtEllipsis, .dxEditors_edtEllipsisDisabled, .dxEditors_edtError,
    .dxEditors_edtListBoxFilterBtn, .dxEditors_edtListBoxFilterBtnDisabled, .dxEditors_edtListBoxHideFilterBtn, .dxEditors_edtListBoxHideFilterBtnDisabled,
    .dxEditors_edtListBoxHideFilterBtnRtl, .dxEditors_edtListBoxHideFilterBtnRtlDisabled, .dxEditors_edtRadioButtonChecked,
    .dxEditors_edtRadioButtonCheckedDisabled, .dxEditors_edtRadioButtonUnchecked, .dxEditors_edtRadioButtonUncheckedDisabled,
    .dxEditors_edtSpinEditDecrementImage, .dxEditors_edtSpinEditDecrementImageDisabled, .dxEditors_edtSpinEditIncrementImage,
    .dxEditors_edtSpinEditIncrementImageDisabled, .dxEditors_edtSpinEditLargeDecImage, .dxEditors_edtSpinEditLargeDecImageDisabled,
    .dxEditors_edtSpinEditLargeIncImage, .dxEditors_edtSpinEditLargeIncImageDisabled, .dxEditors_edtTBDecBtn, .dxEditors_edtTBIncBtn,
    .dxEditors_edtTokenBoxTokenRemoveButton, .dxEditors_edtTokenBoxTokenRemoveButton.dxeTokenRemoveButtonHover, .dxEditors_edtTokenBoxTokenRemoveButtonDisabled,
    .dxEditors_fcadd, .dxEditors_fcaddhot, .dxEditors_fcgroupaddcondition, .dxEditors_fcgroupaddgroup, .dxEditors_fcgroupand, .dxEditors_fcgroupnotand,
    .dxEditors_fcgroupnotor, .dxEditors_fcgroupor, .dxEditors_fcgroupremove, .dxEditors_fcopany, .dxEditors_fcopavg,
    .dxEditors_fcopbegin, .dxEditors_fcopbetween, .dxEditors_fcopblank, .dxEditors_fcopcontain, .dxEditors_fcopcount,
    .dxEditors_fcopend, .dxEditors_fcopequal, .dxEditors_fcopexists, .dxEditors_fcopgreater,
    .dxEditors_fcopgreaterorequal, .dxEditors_fcopless, .dxEditors_fcoplessorequal, .dxEditors_fcoplike,
    .dxEditors_fcopmax, .dxEditors_fcopmin, .dxEditors_fcopnotany, .dxEditors_fcopnotbetween,
    .dxEditors_fcopnotblank, .dxEditors_fcopnotcontain, .dxEditors_fcopnotequal, .dxEditors_fcopnotlike,
    .dxEditors_fcopsum, .dxEditors_fcoptypefield, .dxEditors_fcoptypefieldhot, .dxEditors_fcoptypevalue,
    .dxEditors_fcoptypevaluehot, .dxEditors_fcremove, .dxEditors_fcremovehot, .dxeSpinDecButtonHover
    .dxEditors_edtSpinEditDecrementImage, .dxeSpinDecButtonPressed .dxEditors_edtSpinEditDecrementImage,
    .dxeSpinIncButtonHover .dxEditors_edtSpinEditIncrementImage, .dxeSpinIncButtonPressed
    .dxEditors_edtSpinEditIncrementImage, .dxeSpinLargeDecButtonHover .dxEditors_edtSpinEditLargeDecImage,
    .dxeSpinLargeDecButtonPressed .dxEditors_edtSpinEditLargeDecImage, .dxeSpinLargeIncButtonHover
    .dxEditors_edtSpinEditLargeIncImage, .dxeSpinLargeIncButtonPressed .dxEditors_edtSpinEditLargeIncImage,
    .dxeTBDecBtnHover.dxEditors_edtTBDecBtn, .dxeTBDecBtnPressed.dxEditors_edtTBDecBtn,
    .dxeTBIncBtnHover.dxEditors_edtTBIncBtn, .dxeTBIncBtnPressed.dxEditors_edtTBIncBtn,
    .dxeTrackBar.dxeDisabled .dxEditors_edtTBDecBtn, .dxeTrackBar.dxeDisabled
    .dxEditors_edtTBIncBtn, .dxgvFocusedRow .dxEditors_edtRadioButtonChecked {
        background-image: url(/DXR.axd?r=0_4840-7Hilr&p=50730ac5) !important;
        background-repeat: no-repeat !important;
        background-color: transparent !important;
    }

    .dxeButton .dxEditors_edtDropDown {
        background-position: -412px -264px !important;
        background-size: 538px auto !important;
        width: 10px !important;
        height: 10px !important;
    }

        .dxeButton .dxeButtonEditButton:hover, .dxeButton .dxEditors_edtDropDown:hover, .dxeButton .dxeButtonEditButton:focus, .dxeButton .dxEditors_edtDropDown:focus, .dxeButton .dxeButtonEditButton:active, .dxeButton .dxEditors_edtDropDown:active {
            background-position: -396px -260px !important;
            background-size: 538px auto !important;
            width: 10px !important;
            height: 10px !important;
        }


    .dxeButtonEditButton {
        padding: 0.4em !important;
    }

    .dxeDropDownWindow {
        background-color: white !important;
        border: 1px solid #eee !important;
    }

    /*20240126_功能列調整折行*/
    @media (max-width: 600px) {
        .list-pc {
            display: none;
        }

        .list-mobile {
            display: block;
        }

        .list-mobile-section {
            background: #f1f1f1;
        }

        .list-mobile .dxmLite_Office365 .dxm-main {
            width: 100%;
            border: 0px;
        }

        .list-mobile .list-mobile-section {
            background: none !important;
            border-top: 1px solid #e2e2e2 !important;
        }
    }

    @media (min-width: 601px) {
        .list-pc {
            display: block;
        }

        .list-mobile {
            display: none;
        }

        .list-pc .dxmLite_Office365 .dxm-main {
            width: 100%;
            border: 0px;
        }

        .list-pc .list-pc-section {
            background: none !important;
            border-top: 1px solid #e2e2e2 !important;
        }
    }


    /*20240126_燈號*/
    /*<div class="formstatus0">未核(底稿)</div>*/
    .formstatus0 {
        background-color: #c8c8c8;
        border-radius: 15px 15px;
        color: #fff;
        font-size: 14px;
        display: inline;
        letter-spacing: 0.2px;
        padding: 2px 10px;
        font-family: 微軟正黑體;
    }

    /*<div class="formstatus1">核准</div>*/
    .formstatus1 {
        background-color: #55c968;
        border-radius: 15px 15px;
        color: #fff;
        font-size: 14px;
        display: inline;
        letter-spacing: 0.2px;
        padding: 2px 10px;
        font-family: 微軟正黑體;
    }

    /*<div class="formstatus2">送審中</div>*/
    .formstatus2 {
        background-color: #f7dd6d;
        border-radius: 15px 15px;
        color: #fff;
        font-size: 14px;
        display: inline;
        letter-spacing: 0.2px;
        padding: 2px 10px;
        font-family: 微軟正黑體;
    }

    /*<div class="formstatus3">作廢</div>*/
    .formstatus3 {
        background-color: #e24d4d;
        border-radius: 15px 15px;
        color: #fff;
        font-size: 14px;
        display: inline;
        letter-spacing: 0.2px;
        padding: 2px 10px;
        font-family: 微軟正黑體;
    }

    /*<div class="formstatus4">撤銷中</div>*/
    .formstatus4 {
        background-color: #498bdb;
        border-radius: 15px 15px;
        color: #fff;
        font-size: 14px;
        display: inline;
        letter-spacing: 0.2px;
        padding: 2px 10px;
        font-family: 微軟正黑體;
    }

    /*佈告欄主旨換行  未確認
.dxic .dxeEditAreaSys {
    padding: 0px 1px 0px 0px;
    overflow: hidden;
    height: 16px;
    resize: none;
}

@media (max-width: 580px) {
    .dxic .dxeEditAreaSys {
        padding: 0px 1px 0px 0px;
        overflow: hidden;
        height: auto;
        resize: none;
    }
}
*/

    /*English*/
    .engtext {
        display: contents !important;
        width: 100% !important;
    }

.dxeBase_Office365 .dxichCellSys, .dxeBase_Office365.dxichCellSys {
    padding: 0.35em 0.25em 0.25em 0.25em;
    vertical-align: middle!important;
}


    /*支出申請APP樣式調整*/
    @media (max-width: 580px) {
        .dxgvFocusedRow_Office365 .dxGridView_gvShowAdaptiveDetailButton_Office365 {
            background-position: -54px -48px !important;
            background-size: 538px auto !important;
            width: 16px;
            height: 16px;
        }

        .dxgvDetailRow_Office365 td.dxgvDetailCell_Office365, .dxgvAdaptiveDetailRow_Office365 td.dxgvAdaptiveDetailCell_Office365 {
            padding: 16px 0px 6px 8px !important;
        }

        .dxgvHeader_Office365.dxgvAIC {
            padding-left: 0px !important;
            padding-right: 0px !important;
        }

        .dxeButtonEditButton_Office365.dxeButtonEditClearButton_Office365, .dxeButtonEditButton_Office365.dxeButtonEditClearButton_Office365:hover {
            display: none !important;
        }
    }


    /*APP2.0薪資查詢篩選頁面日期選擇顯示不完全   */
    #gvList_DXHFP_PWC-1, #TGV_SalPayroll_DXHFP_PWC-1, #TGV_SalPayroll_DXHFP_PW-1 {
        min-height: calc(330px) !important;
    }

        #gvList_DXHFP_PWC-1 .dxpc-contentWrapper {
            height: calc(280px) !important;
        }

        #TGV_SalPayroll_DXHFP_PWC-1 .dxpc-contentWrapper, #TGV_SalPayroll_DXHFP_PW-1 .dxpc-contentWrapper {
            height: calc(280px) !important;
        }

    /*APP2.0/web 薪資查詢/待覆核 篩選頁面選項顯示不完全 */
    #gvList_DXHFP_PW-1 .dxpcLite_Office365 .dxpc-footer, #gvList_DXHFP_PW-1 .dxdpLite_Office365 .dxpc-footer {
        margin-top: 50px !important;
    }

    #gvList_DXHFP_PW-1 .dxpc-contentWrapper {
        height: calc(300px) !important;
    }


    #TGV_SalPayroll_DXHFP_PW-1 .dxpcLite_Office365 .dxpc-footer, #TGV_SalPayroll_DXHFP_PW-1 .dxdpLite_Office365 .dxpc-footer {
        margin-top: 50px !important;
    }

    #TGV_SalPayroll_DXHFP_PW-1 .dxpc-contentWrapper {
        height: calc(320px) !important;
    }



    /*APP 樣式調整*/
    #gridContainer .dxcvControl {
        border: 0px;
    }

    #gridContainer .dxcvCard, #gridContainer .dxcvFlowCard, #gridContainer .dxcvBreakpointsCard, #gridContainer .dxcvEmptyCard {
        border: 1px solid #e5e5e5;
        border-radius: 10px;
        background-color: #fafafa;
        width: auto;
        height: auto;
        font: 14px 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif,Arial,'Helvetica','Microsoft JhengHei','微軟正黑體';
        color: #666;
        font-weight: inherit;
        padding: 0px;
    }

    #gridContainer .dxcvFilterBar {
        border-top: 0px !important;
        background: none !important;
        height: 50px;
    }

        #gridContainer .dxcvFilterBar a {
            font-size: 14px;
            font-weight: 600;
            padding-left: 8px;
        }

    #gridContainer .dxcv {
        padding: 0px;
    }

    .dxcvTable {
        background-color: #f2f2f2;
        border-width: 0;
        border-collapse: separate !important;
        overflow: hidden;
        padding: 20px;
    }

    #gridContainer .dxcvGroupRow, #gridContainer .dxcvFlowCard, #gridContainer .dxcvBreakpointsCard, #gridContainer div.dxcvEmptyCard {
        margin: 3px 10px; /*全部內容列表*/
    }

.dxcvControl .dxcvTable.dxcvBPT { /*全部內容列表*/
    padding: 0;
    margin-top: 6px;
    margin-bottom: 50px;
}

    .contact-container {
        display: flex;
        padding: 1px 6px 1px 6px;
        margin: 0px;
        align-items: center;
    }

    .dxcvFocusedCard {
        outline: none;
    }


    /*搜尋列*/
    .dxcvSearchPanel > table {
        width: 100% !important;
        display: contents !important;
    }

    #CardView_DXSearchPanel .dxeButtonEdit_Office365 {
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 6px;
    }

    .dxcvSearchPanel {
        padding: 8px;
        border-bottom: 1px solid #e2e2e2 !important;
    }

    .dxeTextBox_Office365 td.dxic, .dxeButtonEdit_Office365 td.dxic, .dxeButtonEdit_Office365[cellspacing="0"] td.dxic {
        padding: 0.5em 0.5em 0.5em 0.5em !important;
    }

    #CardView_DXSearchPanel a {
        border: 0px solid #e5e5e5;
        border-radius: 6px;
        font-size: 14px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        color: #fff;
        text-decoration: none;
        display: inline-block;
        padding: 7px 18px;
        background: linear-gradient(135deg, #50adff 0%,#008ddb 100%);
    }

    /*類別列*/
#gridContainer .dxcvGroupRow, #gridContainer2 .dxcvGroupRow, #gridContainer3 .dxcvGroupRow {
    font-size: 14px;
    color: #fff;
    background: linear-gradient(145deg, #2093fb 0%, #00cdeb 86%, #19d8f6 20%, #00e6e6 100%);
    padding: 7px 10px;
    border-radius: 6px;
    text-shadow: 0px 0px 5px #007db3b3;
}
    
    .dxcvGroupRow .dxcvGRB {
        display: inline-block;
        margin-right: 5px;
        position: relative;
        top: 3px;
        display: none !important;
    }

    .dxbplc {
        margin: -6px 0px 0px 0;
    }

    #gridContainer .dxcvCard, #gridContainer .dxcvFlowCard, #gridContainer .dxcvBreakpointsCard, #gridContainer .dxcvEmptyCard {
        border: 0px solid #e5e5e5;
        border-radius: 0px;
        background-color: #ffffff;
        width: auto;
        height: auto;
        border-bottom: 1px solid #dddddd;
        font: 14px 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif, Arial, 'Helvetica', 'Microsoft JhengHei', '微軟正黑體';
        color: #666;
    }



    /*頁數 */
    .dxcvPagerBottomPanel {
    background: #ffffff;
    width: 100%;
    border-radius: 0px;
    margin: 0px auto 0px auto;
    border-top: 1px solid #ddd;
    text-align: center;
    position: fixed;
    bottom: 0px;
}

.dxpLite .dxp-num {
    color: #9d9d9d;
    text-decoration: none;
    margin: 0px 7px;
    font-size: 15px;
    font-family: Arial;
}

    .dxcvControl .dxpLite, .dxcvDisabled .dxpLite {
        padding-top: 4px;
        margin-left: -10px;
    }

.dxpLite .dxp-current {
    color: #0089ff;
    margin: 0px 7px;
    font-weight:700;
    background-color: transparent;
}



    /*沒有資料*/
    #gridContainer div.dxcvEmptyCard {
        background-image: url(../Content/Images/nodataimg.png);
        background-size: contain;
        background-position: bottom;
        margin: 50px auto 20px auto;
        width: 200px;
        height: 200px;
        display: flow;
        justify-content: center;
    }

    div.dxcvAGLECW, div.dxcvFLECW {
        display: grid;
        padding-top: 0px;
        height: 100%;
        width: 100%;
        font-size: 15px;
        font-weight: 400;
    }

    .adbook-app-id {
        line-height: 15px !important;
        color: #949494 !important;
        border: 1px solid #eee !important;
        border-radius: 5px !important;
        display: table !important;
        padding: 0px 4px !important;
        font-size: 13px !important;
        margin-bottom: -4px !important;
    }

    .adbook-app-name {
        color: #008DDB !important;
        font-weight: 600 !important;
        font-size: 15px !important;
    }

    .adbook-app-name2 {
        color: #565656 !important;
        font-weight: 600 !important;
        padding: 6px 4px 10px 8px;
        font-size: 15px !important;
        border-left: 2px solid #ffce00d6;
        line-height: 8px;
    }

    .adbook-app-departname {
        line-height: 13px !important;
        font-size: 14px !important;
        color: #555555 !important;
        margin-top: -3px !important;
    }

    .adbook-app-photo {
        padding: 3px 0px;
    }



/*2024 展開搜尋窗*/
.formcontent-app {
    margin-left: 0px !important;
}

    .formcontent-app .formpagetool {
        padding: 5px 15px;
        margin: 0px 0px;
        border: 0px;
        background: #fff;
        border-radius: 0px;
        font-size: 15px;
        color: #666;
        font-weight: 600;
        border-radius: 0px;
        display: block;
    }

    .formcontent-app .pagetoolinput {
        margin: 3px;
        padding: 3px;
        color: #999;
        border-radius: 5px;
        border: 1px solid #acacac;
        width: 98%;
    }

    .formcontent-app .formreportbtn {
        margin: 5px;
        padding: 3px;
        font-size: 15px;
        border-radius: 5px;
        border: 0px;
        width: -webkit-fill-available !important;
        background: linear-gradient(135deg, #8d7cf5 1%, #55dffb 100%) !important;
    }

/*表單按鈕自適應時切換樣式*/
@media (max-width: 579px) {
    .btnMargin {
        cursor: pointer;
        padding: 6px 15px 6px 15px;
        display: table-cell;
        vertical-align: middle;
        text-decoration: inherit;
        letter-spacing: 0.01cm;
        border-spacing: 0;
        border-collapse: separate;
        margin: 5px 0px 5px 5px;
        width: 40px;
        height: 40px;
        border-radius: 50% 50%;
        background-image: url(../Content/Images/icon-filter.png);
        background-size: inherit;
        background-repeat: no-repeat;
        background-position: center;
        border: 0px;
        color: #ffffff00;
    }
}
@media (min-width: 580px) {
    .btnMargin {
        margin: auto 5px;
        padding: 2px 5px;
        font-size: 15px;
        border-radius: 5px;
        border: 0px;
        color: #fff;
        font-weight: 600;
        letter-spacing: 2px;
        background: #ff6c00;
    }
}



/*List附件樣式 APP*/
@media (max-width: 580px) {
    #pnlAttach_Attach_gvAttach_DXHeadersRow0 {
        display: none;
    }

    #pnlAttach_Attach_gvAttach_DXMainTable {
        table-layout: auto;
    }
    
    #pnlAttach_Attach_gvAttach .dxgvTable_Office365 {
        border: 0px solid rgba(0, 0, 0, 0.1);
    }

    #pnlAttach_Attach .dxgvEditFormDisplayRow_Office365 td.dxgv, #pnlAttach_Attach .dxgvDetailCell_Office365 td.dxgv, #pnlAttach_Attach .dxgvAdaptiveDetailCell_Office365 td.dxgv, #pnlAttach_Attach .dxgvDataRow_Office365 td.dxgv, #pnlAttach_Attach .dxgvAdaptiveDetailRow_Office365 td.dxgvAIC {
        border: 0px solid rgba(0, 0, 0, 0.1);
    } 
}


/*List簽核流程樣式 APP*/
@media (max-width: 580px) {
    #pnlFlowHistory_FlowHistory_gvFlowHistory_DXHeadersRow0 {
        display: none;
    }

    #pnlFlowHistory_FlowHistory_gvFlowHistory .dxgvTable_Office365 {
        border: 0px solid rgba(0, 0, 0, 0.1);
    }

    #pnlFlowHistory_FlowHistory_gvFlowHistory .dxgvEditFormDisplayRow_Office365 td.dxgv, #pnlFlowHistory_FlowHistory_gvFlowHistory .dxgvDetailCell_Office365 td.dxgv, #pnlFlowHistory_FlowHistory_gvFlowHistory .dxgvAdaptiveDetailCell_Office365 td.dxgv, #pnlFlowHistory_FlowHistory_gvFlowHistory .dxgvDataRow_Office365 td.dxgv, #pnlFlowHistory_FlowHistory_gvFlowHistory .dxgvAdaptiveDetailRow_Office365 td.dxgvAIC {
        border: 0px solid rgba(0, 0, 0, 0.1);
        border-right: 0px;
    }

    #pnlFlowHistory_FlowHistory_gvFlowHistory_DXMainTable {
        display: block;
    }
}


/*20250225 佈告欄編輯器框線樣式*/
.dxheContentArea {
    padding: 0px;
    padding-bottom: 0px;
    background-color: #c9c9c9;
    border-radius: 5px;
}

.dxheControl {
    font: 12px Tahoma, Geneva, sans-serif;
    border: Solid 1px #c7c7c7;
    border-radius: 5px;
    background-color: #ffffff !important;
}

.dxtbControl {
    background-color: #fff !important;
    border-bottom: Solid 1px #c7c7c7;
}

.dxheViewArea {
    border: Solid 0px #c7c7c7;
    border-radius: 5px;
}


/*20250326 差旅紀錄*/
#pnlForm_ctl03_FormLayout_SGPSADDRESS_B2:hover, #pnlForm_ctl03_FormLayout_EGPSADDRESS_B2:hover {
    color: #fff !important;
}

@media (max-width: 660px) {
    #pnlForm_ctl03_FormLayout .dxflTextItemSys .dxflNestedControlCell_Office365 {
        line-height: 16px;
        margin-top: -15px !important;
    }
}

/*20250326 POPUP視窗圓弧邊*/
.dxpcLite_Office365 .dxpc-header, .dxdpLite_Office365 .dxpc-header {
    color: #666;
    background-color: transparent;
    font-size: 1.27em;
    padding: 8px 10px 8px 12px;
    white-space: nowrap;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.dxpcLite_Office365 .dxpc-mainDiv, .dxpcLite_Office365.dxpc-mainDiv, .dxdpLite_Office365 .dxpc-mainDiv, .dxdpLite_Office365.dxpc-mainDiv {
    top: 0;
    left: 0;
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
}




/* 20250407 批次評核作業(睛姿) 客製表格調整*/
#FormPanel_ctl03_FormLayout_WHUM0043322Sub_DXMainTable {
    border-collapse: collapse !important;
}

    #FormPanel_ctl03_FormLayout_WHUM0043322Sub_DXMainTable td {
        border-bottom: 1px solid #ccc !important;
    }

/* header row 內所有底線樣式 */
#FormPanel_ctl03_FormLayout_WHUM0043322Sub_DXHeadersRow0 td,
#FormPanel_ctl03_FormLayout_WHUM0043322Sub_DXHeadersRow0 td * {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* <a> 標籤底線 */
#FormPanel_ctl03_FormLayout_WHUM0043322Sub_DXHeadersRow0 a {
    text-decoration: none !important;
    border-bottom: none !important;
}

#FormPanel_ctl03_FormLayout_WHUM0043322Sub_DXHeadersRow0 {
    border-bottom: 1px solid #ccc !important;
}