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

/* 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;
}

.form {
    /* Footer Height */
    /*padding-bottom: 46px;*/
}

html, .form {
    height: 100%;
}

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_footer {
}

.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 {
    }

        .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;
    }

        .page-toolbar .item > h1 .title {
            /*color: #fff;
                font-weight: 600;
                text-align: left;
                font-size: 16px;
                color: #1583d1;
                letter-spacing: 2px;
                vertical-align: sub;
                padding: 3px 8px;
                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: 120px; 20240301*/
        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;
    /*border-left: 3px solid #eee;*/
    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;
    }

/**, ::after, ::before {
    box-sizing: content-box !important;
}*/

.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;
        ss
    }

    .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: 120px; 20240301*/
            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;
        /*border-left: 3px solid #eee;*/
        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: 120px; 20240301*/
                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;
    /*width: 100%;*/
}

.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;
    }

.addaccount .flip {
}




@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 #TurnoverStep1, .addaccount #TurnoverStep2 {
    display:;
}

.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;
}

#turnOverMenu {
    display:;
}

#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, .todomodal .noticeitem {
}

    .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;
}

#todotype1 {
    display:;
}

#todotype2 {
    display:;
}

#todotype3 {
    display:;
}

.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;
            /*opacity: 0.9;*/
        }

.homecontent .biconstytle {
    background: #e7f4ff;
    padding: 10px;
    width: 60px;
    margin: 10px 10px 5px 10px;
    border-radius: 20px;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#eff7ff+0,e8f3ff+50,ddeeff+52,edf7ff+100 */
    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;
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#eff7ff+0,d6eaff+50,cce5ff+52,e2f2ff+100 */
        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;
    /*opacity: 0.9;*/
    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;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#faf4ff+0,f5eaff+51,f3e5ff+54,faf4ff+100 */
    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;
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f7efff+0,efe0ff+43,e8d6ff+53,faf4ff+100 */
        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;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#dab6f2+0,be78e7+100 */
    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;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fdf3e6+0,fceddb+50,fdf3e6+52,fdf3e6+100 */
    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;
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fceede+0,f9e6cf+50,fceddb+50,fdf3e6+52,fceddb+100 */
        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;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fdd8a8+0,feb13b+100 */
    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;
    }
}

#navc {
}

#navd {
}

.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);
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#59b4ff+0,1696ff+53,42aaff+100 */
    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;
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#35a4ff+0,0072ff+52,28a2ff+100 */
        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 {
    flex-grow: 2;
    padding: 0px 0px 0px 10px;
}

        .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;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 200px;
    overflow: hidden;
    margin: 1px 0px;
}

    .adbook-favorite {
        flex-grow: 1;
        display: grid;
    }

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

        .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 10px;
    }

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

        .ad-btnon img {
            padding: 0px 3px;
            width: 16px;
        }

    .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: #4ea4d6;
            color: #fff;
            font-size: 13px;
            border-top-left-radius: 0px;
            border-top-right-radius: 0px;
        }

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

        .calendar__date {
            display: block;
            background: #fff;
            width: 100%;
            padding: 5px 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: 5px;
            font-size: 13px;
        }

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

        .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: 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%;
            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: 8px 0px;
            margin: 0 auto;
            justify-content: center;
        }

        .calendar__body .searchbar-right {
            display: flex;
            align-items: center;
            font-size: 13px;
            white-space: nowrap;
            justify-content: center;
            background: #fff;
            padding: 5px 0px;
        }


        .calendar__body .month {
            font-size: 20px;
            color: #2d2d2d;
            margin: 0px 20px;
            font-weight: 600;
        }

        .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;
            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;
    /*height: 43px !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: baseline !important;
}