@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

ol,
ul {
    list-style: none;
}

#toast {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px;
    background-color: #333;
    color: white;
    border-radius: 5px;
}




.jstree-anchor {
    position: relative; /* 부모 노드를 상대 위치로 설정 */
}


blockquote,
q {
    quotes: none;
}

    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
        content: "";
        content: none;
    }

table {
    border-collapse: collapse;
    border-spacing: 0;
}

.fontXs, .thothForwardingContainer > .inside > .thothForwardingList > .thothForwardingBox > .thothBoxHead > .right > a, .thothForwardingContainer > .inside > .thothForwardingList > .thothForwardingBox > .thothForwardingUserBox > .forwardingProfile > p, .thothForwardingContainer > .inside > .thothForwardingList > .thothForwardingBox > .thothForwardingUserBox > .forwardingPosition > p {
    font-size: 11px;
}

.fontSm, .purpleButton, .purpleButtonType2, .topSearch > .searchBox > .search, .thothRootList > ul > li > .thothRootMenuBox > .thothRootMenu > .thothRootTitle > p, .thothRootList > ul > li > .thothRootMenuBox > .thothRootMenu > .thothLastDepth > ul > li, .thothUserContainer > .thothRowContainer > .thothRowhead > ul > li, .thothUserContainer > .thothRowContainer > .thothRowListData > .thothRowData > ul > li, .thothUserContainer > .thothRowContainer > .thothRowListData > .thothRowData > ul > .RightClickPopup > ul > li > p, .thothForwardingContainer > .inside > .topTabs > ul > li, .thothForwardingContainer > .inside > .thothForwardingList > .thothForwardingBox > .thothBoxHead > .left > h1, .person-root, .ui-tooltip > .ui-tooltip-content, .thothCardUserListHead {
    font-size: 13px;
}

.fontXl, .thothUserContainer > .thothUserHead > h1 {
    font-size: 20px;
}

.fontXl, .thothUserContainer > .thothUserHead > div > h1 {
    font-size: 15px; /*20px;*/
}

.marginLeftXxs {
    margin-left: 5px;
}

.marginTopXs, .thothLeftMenu > .leftMenuList > ul > li > .secondDepth > ul {
    margin-top: 10px;
}

.marginLeftXs {
    margin-left: 10px;
}

.marginRightXs, .contextMenuType1 > ul > li > .ico {
    margin-right: 10px;
}

.marginBottomXs {
    margin-bottom: 10px;
}

.marginTopSm {
    margin-top: 15px;
}

.marginLeftSm {
    margin-left: 15px;
}

.marginRightSm {
    margin-right: 15px;
}

.marginBottomSm {
    margin-bottom: 15px;
}

.marginTopMd {
    margin-top: 20px;
}

.marginLeftMd {
    margin-left: 20px;
}

.marginRightMd, .thothSidePopupcontent > .content > .popupDataWrapper > .dataType1 > .contentWrapper > ul > li, .thothTopTabs > ul > li {
    margin-right: 20px;
}

.marginBottomMd, .thothSidePopupcontent > .content > .popupDataWrapper > .dataType1 > .contentWrapper > ul, .thothLeftMenu > .leftMenuList > ul > li {
    margin-bottom: 10px;
}

.marginTopLg {
    margin-top: 30px;
}

.marginBottomLg, .thothLeftMenuCollapsed > .leftMenuList > ul > li {
    margin-bottom: 30px;
}

.marginLeftLg {
    margin-left: 30px;
}

.marginRightLg {
    margin-right: 30px;
}

.paddingTopXs, .thothLeftMenu > .leftMenuList > ul > li > .secondDepth > ul > li {
    padding-top: 10px;
}

.paddingBottomXs, .thothLeftMenu > .leftMenuList > ul > li > .secondDepth > ul > li {
    padding-bottom: 10px;
}

.paddingLeftXs {
    padding-left: 10px;
}

.paddingRightXs {
    padding-right: 10px;
}

.paddingTopSm, .contextMenuType1 > ul, .thothProfile, .thothLeftMenu > .leftMenuList > ul > li > .secondDepth > ul > .active, .thothLeftMenu > .leftMenuList > ul > li > .secondDepth > ul > li:hover {
    padding-top: 15px;
}

    .paddingBottomSm, .contextMenuType1 > ul > li, .contextMenuType1 > ul, .thothProfile, .thothLeftMenu > .leftMenuList > ul > li > .secondDepth > ul > .active, .thothLeftMenu > .leftMenuList > ul > li > .secondDepth > ul > li:hover {
        padding-bottom: 15px;
    }

.paddingLeftSm, .contextMenuType1 > ul, .thothProfile {
    padding-left: 15px;
}

.paddingRightSm, .contextMenuType1 > ul, .thothProfile {
    padding-right: 15px;
}

.paddingTopMd, .thothLeftMenu > .leftMenuList {
    padding-top: 20px;
}

.paddingBottomMd, .thothLeftMenu > .leftMenuList {
    padding-bottom: 20px;
}

    .paddingLeftMd, .thothLeftMenu > .leftMenuList > ul > li > .firstDepth > .right {
        padding-left: 20px;
    }

.paddingRightMd {
    padding-right: 20px;
}

.paddingTopLg {
    padding-top: 30px;
}

.paddingBottomLg {
    padding-bottom: 30px;
}

.paddingLeftLg, .thothSidePopupcontent > .content > .popupDataWrapper > .dataType1 > .contentWrapper {
    padding-left: 15px;
}

.paddingRightLg, .thothSidePopupcontent > .content > .popupDataWrapper > .dataType1 > .contentWrapper {
    padding-right: 15px;
}

.paddingLeftXl {
    padding-left: 45px;
}

.paddingRightXl {
    padding-right: 45px;
}

.paddingLeftXxl {
    padding-left: 60px;
}

.paddingRightXxl {
    padding-left: 60px;
}

.purpleButton, .purpleButtonType2 {
    width: 100%;
    padding: 15px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 30px;
    background: #5f62dd;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #fff;
    cursor: pointer;
    -webkit-transition: background .2s ease-in-out;
    transition: background .2s ease-in-out;
}

    .purpleButton > img, .purpleButtonType2 > img {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-right: 10px;
    }

    .purpleButton:hover, .purpleButtonType2:hover {
        background: #4043C4;
    }

.purpleButtonType2 {
    border-radius: 5px;
}

.checkRadioBoxType1 {
    cursor: pointer;
    /*display: -webkit-box;*/
    /*display: -ms-flexbox;*/
    display: flex;
    /*-webkit-box-align: center;*/
    /*-ms-flex-align: center;*/
    align-items: center;
}

    .checkRadioBoxType1 > input {
        display: none;
    }

        .checkRadioBoxType1 > input:checked + label {
            background: #fff;
            border: 1.5px solid #455FD5; /*1px solid #5f62dd;*/
            color: #fff;
        }

            .checkRadioBoxType1 > input:checked + label > .iconHover {
                display: none;
            }

            .checkRadioBoxType1 > input:checked + label > .iconChecked {
                display: block;
            }

    .checkRadioBoxType1 > label {
        width: 17px;
        height: 17px;
        padding: 0 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border: 1.5px solid #C2C3C4; /*1px solid #e5e8eb;*/
        background: #fff;
        font-size: 10px;
        font-weight: 400;
        border-radius: 0; /*100px;*/
        -webkit-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        display: inline-block;
        position: relative;
    }

        .checkRadioBoxType1 > label > .iconHover {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        .checkRadioBoxType1 > label > .iconChecked {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        .checkRadioBoxType1 > label:hover {
            border: 1.5px solid #C2C3C4; /*1px solid #e5e8eb;*/
        }

            .checkRadioBoxType1 > label:hover > .iconHover {
                display: block;
            }

.checkRadioBoxType2 {
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

    .checkRadioBoxType2 > input {
        display: none;
    }

        .checkRadioBoxType2 > input:checked + label {
            background: #fff;
            border: 1px solid #5f62dd;
            color: #fff;
        }

            .checkRadioBoxType2 > input:checked + label > .iconHover {
                display: none;
            }

            .checkRadioBoxType2 > input:checked + label > .iconChecked {
                display: block;
            }

    .checkRadioBoxType2 > label {
        width: 16px;
        height: 16px;
        padding: 0 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border: 1px solid #e5e8eb;
        background: #fff;
        font-size: 10px;
        font-weight: 400;
        border-radius: 100px;
        -webkit-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        display: inline-block;
        position: relative;
    }

        .checkRadioBoxType2 > label > .iconHover {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -55%);
            transform: translate(-50%, -55%);
        }

        .checkRadioBoxType2 > label > .iconChecked {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -55%);
            transform: translate(-50%, -55%);
        }

        .checkRadioBoxType2 > label:hover {
            border: 1px solid #e5e8eb;
        }

            .checkRadioBoxType2 > label:hover > .iconHover {
                display: block;
            }

.checkRadioBoxType3 {
    height: 25px;
    margin-right: 10px;
    padding: 1px 10px 1px 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 30px;
    background: #F4F7F9;
    border: 1.5px solid #F4F7F9;
    color: #4c4f57;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    -webkit-transition: background .2s ease-in-out;
    transition: background .2s ease-in-out;
}
    .checkRadioBoxType3:hover {
        background: #d0d7fc;
        border: 1.5px solid #d0d7fc;
        color: #000;
    }

        .checkRadioBoxType3:hover > label > .iconHover {
            display: block;
        }

        .checkRadioBoxType3.selected {
            background: #F4F7F9;
            border: 1.5px solid #4346b8;
        }

    .checkRadioBoxType3 > input {
        display: none;
    }

        .checkRadioBoxType3 > input:checked + label {
            background: #fff;
            border: 1px solid #5f62dd;
            color: #fff;
        }

            .checkRadioBoxType3 > input:checked + label > .iconHover {
                display: none;
            }

            .checkRadioBoxType3 > input:checked + label > .iconChecked {
                display: block;
            }

    .checkRadioBoxType3 > label {
        width: 12px;
        height: 12px;
        padding: 0 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border: 1px solid #e5e8eb;
        background: #fff;
        font-size: 10px;
        font-weight: 400;
        border-radius: 0px;
        -webkit-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        display: inline-block;
        position: relative;
    }

        .checkRadioBoxType3 > label > .iconHover {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -55%);
            transform: translate(-50%, -55%);
        }

        .checkRadioBoxType3 > label > .iconChecked {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -55%);
            transform: translate(-50%, -55%);
        }

        .checkRadioBoxType3 > label:hover {
            border: 1px solid #e5e8eb;
        }

            .checkRadioBoxType3 > label:hover > .iconHover {
                display: block;
            }

    .checkRadioBoxType3 > input:checked + label {
        background: #fff;
        border: 1px solid #455FD5; /*1px solid #5f62dd;*/
        color: #fff;
    }

    .checkRadioBoxType3 > input:checked + label > .iconHover {
        display: none;
    }

    .checkRadioBoxType3 > input:checked + label > .iconChecked {
        display: block;
    }

    /* width */
    ::-webkit-scrollbar {
        width: 15px;
        /*height: 5px;*/
    }

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 10px 10px transparent;
    box-shadow: inset 0 0 10px 10px transparent;
    border: solid 3px transparent;
}

::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 10px 10px rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 0 10px 10px rgba(0, 0, 0, 0.15);
    border: solid 3px transparent;
    border-radius: 10px;
}

    ::-webkit-scrollbar-thumb:hover {
        -webkit-box-shadow: inset 0 0 10px 10px rgba(0, 0, 0, 0.25);
        box-shadow: inset 0 0 10px 10px rgba(0, 0, 0, 0.25);
    }

* {
    font-family: Pretendard, "Noto Sans KR", sans-serif;
}

input,
button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    padding: 0;
    margin: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #FFFFFF;
}

.thothWrapper {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

#bookmarktree .jstree-leaf .jstree-ocl {
    display: none;
}

.vakata-context {
    margin: 0 !important;
    padding: 2px !important;
    position: absolute !important;
    background: #FFF !important;
    box-shadow: 0px 10px 20px 5px rgba(0, 0, 0, 0.10) !important;
}

    .vakata-context .vakata-context-menu {
        padding: 0;
        margin: 0;
        list-style: none;
    }

        .vakata-context .vakata-context-menu .vakata-context-hover,
        .vakata-context .vakata-context-hover > a {
            /*background-color: #e0e0e0;*/
        }

        .vakata-context .vakata-context-menu li {
            padding: 5px 10px;
        }

            .vakata-context .vakata-context-menu li a {
                display: block;
                color: #333;
                text-decoration: none;
            }

                .vakata-context .vakata-context-menu li a:hover {
                    background-color: #d0d0d0;
                }

    .vakata-context .vakata-context-separator {
        border-top: 1px solid #ccc;
        margin: 4px 0;
    }

.vakata-contextmenu-sep {
    display: none !important;
}

.thothRootContainer {
    width: 20%;
    min-width: 250px;
    max-width: 280px;
    height: calc(100% - 55px); /*100%;*/
    background: #f7f8fa;
    margin-right: 15px;
    overflow-y: scroll;
    /*overflow-y: overlay;*/
}

    .SelectCompany {
        /*width: 100%;*/
        padding: 20px 15px 0px 15px;
    }

        .SelectCompany > .thothSelectBoxType1 {
            display: block;
            width: 100%;
            padding: 0.375rem 2.25rem 0.375rem 0.75rem;
            -moz-padding-start: calc(0.75rem - 3px);
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            color: #212529;
            background-color: #fff;
            background-image: url(/img/select_box_arrow.svg);
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
            background-size: 16px 12px;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
            transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
        }

    .topSearch {
        width: 100%;
        padding: 15px 15px; /*20px 15px;*/
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

        .topSearch > .searchBox {
            width: 100%;
            position: relative;
        }

            .topSearch > .searchBox > .search {
                width: 100%;
                padding: 15px 70px 15px 15px;
                border-radius: 5px;
                position: relative;
                /*background: url(/img/search_ico_gray.svg) #e5e8eb no-repeat center right 12px;*/
                background: #e5e8eb no-repeat center right 12px;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
            }

                .topSearch > .searchBox > .search::-webkit-input-placeholder {
                    color: #808286;
                }

                .topSearch > .searchBox > .search:-ms-input-placeholder {
                    color: #808286;
                }

                .topSearch > .searchBox > .search::-ms-input-placeholder {
                    color: #808286;
                }

                .topSearch > .searchBox > .search::placeholder {
                    color: #808286;
                }

            .topSearch > .searchBox > .button {
                position: absolute;
                top: 6px;
                left: 6px;
                background: #1b1c1f1f;
                padding: 8px 8px;
                border-radius: 30px;
                /*cursor: pointer;*/
                -webkit-transition: background .2s ease-in-out;
                transition: background .2s ease-in-out;
            }

            .topSearch > .searchBox > .SearchBoxClear {
                position: absolute;
                top: 18px;
                right: 35px;
                width: 20px;
                height: 10px;
                background: url(/img/delete_ico.svg) center center no-repeat;
                background-size: 50%;
                border: none;
                outline: none;
                cursor: pointer;
                -webkit-transition: background .2s ease-in-out;
                transition: background .2s ease-in-out;
                display: none;
            }

            .topSearch > .searchBox > .SearchBoxButton {
                position: absolute;
                top: 12px;
                right: 6px;
                width: 35px;
                height: 20px;
                background: url(/img/search_ico_gray.svg) center center no-repeat;
                background-size: 50%;
                border: none;
                outline: none;
                cursor: pointer;
                -webkit-transition: background .2s ease-in-out;
                transition: background .2s ease-in-out;
            }

            .topSearch > .searchBox > .visible {
                display: block;
            }

            .topSearch > .searchBox > .button:hover {
                /*background: #5f62dd;*/
            }

            .topSearch > .searchBox > .button > img {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
            }

    .thothRootList {
        width: 100%;
        /*height: calc(100% - 90px);*/
        /*overflow: auto;*/
    }

        .thothRootList > ul {
            width: 100%;
        }

            .thothRootList > ul > li {
                width: 100%;
                padding: 15px;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                border-top: 1px solid #dcdee5;
            }

                .thothRootList > ul > li > .thothRootMenuBox {
                    width: 100%;
                    margin-bottom: 15px;
                }

                    .thothRootList > ul > li > .thothRootMenuBox:last-child {
                        margin-bottom: 0;
                    }

                    .thothRootList > ul > li > .thothRootMenuBox > .thothRootMenu {
                        width: 100%;
                        margin-bottom: 10px;
                        -webkit-box-sizing: border-box;
                        box-sizing: border-box;
                        cursor: pointer;
                    }

                        .thothRootList > ul > li > .thothRootMenuBox > .thothRootMenu:last-child {
                            margin-bottom: 0;
                        }

                        .thothRootList > ul > li > .thothRootMenuBox > .thothRootMenu > .thothRootTitle {
                            width: 100%;
                            display: -webkit-box;
                            display: -ms-flexbox;
                            display: flex;
                            -webkit-box-align: center;
                            -ms-flex-align: center;
                            align-items: center;
                            color: #8d8e93;
                        }

                            .thothRootList > ul > li > .thothRootMenuBox > .thothRootMenu > .thothRootTitle > img {
                                margin-right: 10px;
                            }

                        .thothRootList > ul > li > .thothRootMenuBox > .thothRootMenu > .thothLastDepth {
                            width: 100%;
                            margin-top: 10px;
                        }

                            .thothRootList > ul > li > .thothRootMenuBox > .thothRootMenu > .thothLastDepth > ul {
                                width: 100%;
                            }

                                .thothRootList > ul > li > .thothRootMenuBox > .thothRootMenu > .thothLastDepth > ul > li {
                                    width: 100%;
                                    background: #f0f2f5;
                                    padding: 10px;
                                    -webkit-box-sizing: border-box;
                                    box-sizing: border-box;
                                    color: #8d8e93;
                                    border-radius: 5px;
                                    margin-bottom: 5px;
                                    cursor: pointer;
                                }

                                    .thothRootList > ul > li > .thothRootMenuBox > .thothRootMenu > .thothLastDepth > ul > li:last-child {
                                        margin-bottom: 0;
                                    }

                                .thothRootList > ul > li > .thothRootMenuBox > .thothRootMenu > .thothLastDepth > ul > .active {
                                    border: 1px solid #1b1c1f;
                                    color: #1b1c1f;
                                }

                    .thothRootList > ul > li > .thothRootMenuBox > .active > .thothRootTitle {
                        color: #1b1c1f;
                    }

                    .thothRootList > ul > li > .thothRootMenuBox > .depthTop {
                        margin-bottom: 15px;
                    }

                    .thothRootList > ul > li > .thothRootMenuBox > .depthSecond {
                        padding-left: 10px;
                    }

                    .thothRootList > ul > li > .thothRootMenuBox > .depthThird {
                        padding-left: 20px;
                    }

                    .thothRootList > ul > li > .thothRootMenuBox > .depthFourth {
                        padding-left: 30px;
                    }

.thothUserContainer {
    width: 100%;
    height: 100%;
    background: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
}

    .thothUserContainer > .thothUserHead {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin-top: 5px; /*25px;*/
        margin-bottom: 0px;/*20px;*/
    }

        .thothUserContainer > .thothUserHead > h1 {
            margin-right: 10px;
        }

            .thothUserContainer > .thothUserHead > h1:last-child {
                margin-right: 0;
            }

        .thothUserContainer > .thothUserHead > .thothUserHeadTitle:first-child {
            width: 100%;
            display: flex;
        }
        /*.thothUserContainer > .thothUserHead > .thothUserListViewWrapper {
            display:flex;
            width: 100px;*/
        /*height: 100%;*/
        /*border: 1px solid #dcdee5;
            border-radius: 10px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;*/
        /*background: #f7f8fa;*/
        /*position: relative;
            padding: 10px
        }*/
        .thothUserContainer > .thothUserHead > .thothUserHeadTitle > h1 {
            margin-right: 10px;
        }

            .thothUserContainer > .thothUserHead > .thothUserHeadTitle > h1:last-child {
                margin-right: 0;
            }

        .thothUserContainer > .thothUserHead > .thothUserListViewWrapper {
            width: 500px;
            height: 35px;
            display: flex;
            justify-content: flex-end;
        }

            .thothUserContainer > .thothUserHead > .thothUserListViewWrapper > ul {
                display: flex;
                align-items: center;
            }

                .thothUserContainer > .thothUserHead > .thothUserListViewWrapper > ul > li {
                    height: 35px;
                    display: flex;
                }

                    .thothUserContainer > .thothUserHead > .thothUserListViewWrapper > ul > li:first-child {
                        width: 150px;
                    }

                    .thothUserContainer > .thothUserHead > .thothUserListViewWrapper > ul > li > .thothUserListViewLeft {
                        cursor: pointer;
                        border: 1px solid #dcdee5;
                        width: 25px;
                        height: 25px;
                        border-top-left-radius: 5px;
                        border-bottom-left-radius: 5px;
                        background: url(/img/view-l-disable.svg) no-repeat 5px 5px;
                        background-size: 15px 15px;
                    }

                        .thothUserContainer > .thothUserHead > .thothUserListViewWrapper > ul > li > .thothUserListViewLeft:hover {
                            background: url(/img/view-l.svg) no-repeat 5px 5px;
                            background-size: 15px 15px;
                        }

                        .thothUserContainer > .thothUserHead > .thothUserListViewWrapper > ul > li > .thothUserListViewLeft.selected {
                            background: url(/img/view-l.svg) no-repeat 5px 5px #dcdee5;
                            background-size: 15px 15px;
                        }

                    .thothUserContainer > .thothUserHead > .thothUserListViewWrapper > ul > li > .thothUserListViewRight {
                        cursor: pointer;
                        /*border: 1px solid;*/
                        border-top: 1px solid #dcdee5;
                        border-right: 1px solid #dcdee5;
                        border-bottom: 1px solid #dcdee5;
                        width: 25px;
                        height: 25px;
                        border-top-right-radius: 5px;
                        border-bottom-right-radius: 5px;
                        background: url(/img/view-c-disable.svg) no-repeat 4.5px 5px;
                        background-size: 15px 15px;
                    }

                        .thothUserContainer > .thothUserHead > .thothUserListViewWrapper > ul > li > .thothUserListViewRight:hover {
                            background: url(/img/view-c.svg) no-repeat 4.5px 5px #dcdee5;
                            background-size: 15px 15px;
                        }

                        .thothUserContainer > .thothUserHead > .thothUserListViewWrapper > ul > li > .thothUserListViewRight.selected {
                            background: url(/img/view-c.svg) no-repeat 4.5px 5px #dcdee5;
                            background-size: 15px 15px;
                        }

    .thothUserContainer > .thothRowContainer {
        width: 100%;
        /*padding-bottom: 100px;*/
        height: calc(100% - 130px);
        /*overflow: auto;*/
        overflow-y: auto;
        overflow-x: hidden;
    }

        .thothUserContainer > .thothRowContainer > .thothRowhead {
            width: 100%;
        }

            .thothUserContainer > .thothRowContainer > .thothRowhead > ul {
                width: 100%;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
            }

                .thothUserContainer > .thothRowContainer > .thothRowhead > ul > li {
                    width: 100%;
                    padding: 5px 15px;
                    border-bottom: 1.5px solid #cdcfd3;
                    position: relative;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    font-weight: 400;
                    cursor: pointer;
                    height: 26px;
                }

                    .thothUserContainer > .thothRowContainer > .thothRowhead > ul > li > .sortButton {
                        width: 10px;
                        height: 10px;
                        margin-left: 15px;
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        -webkit-box-pack: center;
                        -ms-flex-pack: center;
                        justify-content: center;
                        -webkit-box-align: center;
                        -ms-flex-align: center;
                        align-items: center;
                        cursor: pointer;
                    }

                        .thothUserContainer > .thothRowContainer > .thothRowhead > ul > li > .sortButton > i.TableUpArrowIco {
                            display: -webkit-box;
                            display: -ms-flexbox;
                            display: flex;
                            width: 9px;
                            height: 5px;
                            background: url(/img/table_up_arrow_ico.svg) no-repeat 0px 0px;
                            background-size: 9px;
                        }

                        .thothUserContainer > .thothRowContainer > .thothRowhead > ul > li > .sortButton > i.TableDownArrowIco {
                            width: 9px;
                            height: 5px;
                            background: url(/img/table_down_arrow_ico.svg) no-repeat 0px 0px;
                            background-size: 9px;
                        }

                        .thothUserContainer > .thothRowContainer > .thothRowhead > ul > li > .sortButton > img {
                            display: -webkit-box;
                            display: -ms-flexbox;
                            display: flex;
                        }

        .thothUserContainer > .thothRowContainer > .thothRowData {
            width: 100%;
            font-size: 13px;
        }

            .thothUserContainer > .thothRowContainer > .thothRowData > ul {
                width: 100%;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                background: #fff;
                position: relative;
            }

                .thothUserContainer > .thothRowContainer > .thothRowData > ul > li {
                    width: 100%;
                    padding: 15px;
                    border-bottom: 1px solid #dcdee5;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    word-break: break-all;
                    font-weight: 500;
                    -webkit-transition: background 0.2s ease-in-out;
                    transition: background 0.2s ease-in-out;
                }

                    .thothUserContainer > .thothRowContainer > .thothRowData > ul > li > .thothThumbnail {
                        padding-right: 5px;
                    }

                    .thothUserContainer > .thothRowContainer > .thothRowData > ul > li > .thothThumbnailContainer {
                        display: flex;
                    }

                        .thothUserContainer > .thothRowContainer > .thothRowData > ul > li > .thothThumbnailContainer > .thothThumbnail {
                            width: 30px;
                            height: 30px;
                            border-radius: 15px;
                            overflow: hidden;
                            margin-right: 5px;
                        }

                            .thothUserContainer > .thothRowContainer > .thothRowData > ul > li > .thothThumbnailContainer > .thothThumbnail > img {
                                width: 100%;
                                height: 100%;
                                -o-object-fit: cover;
                                object-fit: cover;
                            }

                        .thothUserContainer > .thothRowContainer > .thothRowData > ul > li > .thothThumbnailContainer > .thothUserName {
                            padding-top: 5px;
                        }

                    .thothUserContainer > .thothRowContainer > .thothRowData > ul > li > .teamsUser {
                        padding-left: 3px;
                    }

                .thothUserContainer > .thothRowContainer > .thothRowData > ul > .RightClickPopup {
                    position: absolute;
                    top: 50px;
                    left: 50px;
                    width: 140px;
                    padding: 15px;
                    background: #fff;
                    border: 1px solid #dcdee5;
                    border-radius: 10px;
                    z-index: 999;
                    -webkit-box-shadow: 0px 10px 20px 5px rgba(0, 0, 0, 0.1);
                    box-shadow: 0px 10px 20px 5px rgba(0, 0, 0, 0.1);
                }

                    .thothUserContainer > .thothRowContainer > .thothRowData > ul > .RightClickPopup > ul {
                        width: 100%;
                    }

                        .thothUserContainer > .thothRowContainer > .thothRowData > ul > .RightClickPopup > ul > li {
                            width: 100%;
                            display: -webkit-box;
                            display: -ms-flexbox;
                            display: flex;
                            -webkit-box-align: center;
                            -ms-flex-align: center;
                            align-items: center;
                        }

                            .thothUserContainer > .thothRowContainer > .thothRowData > ul > .RightClickPopup > ul > li > img {
                                margin-right: 5px;
                            }

                            .thothUserContainer > .thothRowContainer > .thothRowData > ul > .RightClickPopup > ul > li > p {
                                font-weight: 500;
                            }

                        .thothUserContainer > .thothRowContainer > .thothRowData > ul > .RightClickPopup > ul > .divider {
                            width: 100%;
                            height: 1px;
                            background: #dcdee5;
                            margin: 10px 0;
                        }

                .thothUserContainer > .thothRowContainer > .thothRowData > ul:hover > li {
                    background: #f7f8fa;
                }

            .thothUserContainer > .thothRowContainer > .thothRowData > .selected > li {
                background: #f0f2f5; /*#f7f8fa;*/
            }

            .thothUserContainer > .thothRowContainer > .thothRowData > .selected:hover > li {
                background: #f0f2f5;
            }

            .thothUserContainer > .thothRowContainer > .thothRowData.selected > ul > li {
                background: #f0f2f5; /*#f7f8fa;*/
            }

            .thothUserContainer > .thothRowContainer > .thothRowData.selected:hover > ul > li {
                background: #f0f2f5;
            }

        .thothUserContainer > .thothRowContainer > .thothCardUserListHead {
            width: 100%;
            height: auto;/*40px;*/
            /*background: #eaedf2;*/
            display: flex;
            align-items: center;
            /*margin-bottom: 15px;*/
            /*border-radius: 5px;*/
            padding: 5px;
            /*-webkit-box-sizing: border-box;*/
            /*box-sizing: border-box;*/
            border-bottom: 1.5px solid #cdcfd3;
        }

            .thothUserContainer > .thothRowContainer > .thothCardUserListHead > .thothCardUserListHeadButton1 {
                width: 100px;
                margin-left: 10px;
                padding: 5px;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                border-radius: 30px;
                background: #fff;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                color: #717171;
                cursor: pointer;
                -webkit-transition: background .2s ease-in-out;
                transition: background .2s ease-in-out;
            }

                .thothUserContainer > .thothRowContainer > .thothCardUserListHead > .thothCardUserListHeadButton1:hover {
                    background: #5f62dd;
                    color: #fff;
                }

                .thothUserContainer > .thothRowContainer > .thothCardUserListHead > .thothCardUserListHeadButton1.selected {
                    background: #5f62dd;
                    color: #fff;
                }

            .thothUserContainer > .thothRowContainer > .thothCardUserListHead > .checkArea {
                display: flex;
            }

                .thothUserContainer > .thothRowContainer > .thothCardUserListHead > .checkArea > .thothCardUserListHeadCheckBox {
                    height: 25px;
                    margin-right: 10px;
                    padding: 1px 10px 1px 10px;
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    border-radius: 30px;
                    background: #F4F7F9;
                    border: 1.5px solid #F4F7F9;
                    color: #4c4f57;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-pack: center;
                    -ms-flex-pack: center;
                    justify-content: center;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    cursor: pointer;
                    -webkit-transition: background .2s ease-in-out;
                    transition: background .2s ease-in-out;
                }

                    .thothUserContainer > .thothRowContainer > .thothCardUserListHead > .checkArea > .thothCardUserListHeadCheckBox > .checkBoxButton {
                        width: 15px;
                        /*height: 10px;*/
                        margin-right: 10px;
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        -webkit-box-pack: center;
                        -ms-flex-pack: center;
                        justify-content: center;
                        -webkit-box-align: center;
                        -ms-flex-align: center;
                        align-items: center;
                        cursor: pointer;
                    }

                    .thothUserContainer > .thothRowContainer > .thothCardUserListHead > .checkArea > .thothCardUserListHeadCheckBox:hover {
                        /*background: #beebff;*/
                        /*color: #fff;*/
                        background: #D0D7FC;
                        border: 1.5px solid #D0D7FC;
                        color: #000;
                        /*padding: 1px 10px 1px 10px;*/
                    }

                    .thothUserContainer > .thothRowContainer > .thothCardUserListHead > .checkArea > .thothCardUserListHeadCheckBox.selected {
                        background: #fff;
                        border: 1.5px solid #4346b8;
                        color: #000;
                    }

                        .thothUserContainer > .thothRowContainer > .thothCardUserListHead > .checkArea > .thothCardUserListHeadCheckBox.selected > .checkBoxButton > i {
                            display: -webkit-box;
                            display: -ms-flexbox;
                            display: flex;
                            width: 15px;
                            height: 20px;
                            /*background: url(/img/table_up_arrow_ico.svg) no-repeat 0px 0px;*/
                            background: url(/img/all_select.svg) no-repeat 0px 3.5px;
                            background-size: 20px;
                        }

            .thothUserContainer > .thothRowContainer > .thothCardUserListHead > .sortArea {
                display: flex;
            }

                .thothUserContainer > .thothRowContainer > .thothCardUserListHead > .sortArea > .thothCardUserListHeadSortBtn {
                    /*width: 100px;*/
                    height: 25px;
                    margin-left: 10px;
                    padding: 1px 10px 1px 10px;
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    border-radius: 30px;
                    background: #F4F7F9; /*#fff;*/
                    border: 1.5px solid #F4F7F9;
                    color: #4c4f57;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-pack: center;
                    -ms-flex-pack: center;
                    justify-content: center;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    cursor: pointer;
                    -webkit-transition: background .2s ease-in-out;
                    transition: background .2s ease-in-out;
                }

                    .thothUserContainer > .thothRowContainer > .thothCardUserListHead > .sortArea > .thothCardUserListHeadSortBtn > .sortButton {
                        /*width: 10px;*/
                        /*height: 10px;*/
                        margin-left: 10px;
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        -webkit-box-pack: center;
                        -ms-flex-pack: center;
                        justify-content: center;
                        -webkit-box-align: center;
                        -ms-flex-align: center;
                        align-items: center;
                        cursor: pointer;
                    }

                        .thothUserContainer > .thothRowContainer > .thothCardUserListHead > .sortArea > .thothCardUserListHeadSortBtn > .sortButton > i.TableUpArrowIco {
                            display: -webkit-box;
                            display: -ms-flexbox;
                            display: flex;
                            width: 15px;
                            height: 20px;
                            /*background: url(/img/table_up_arrow_ico.svg) no-repeat 0px 0px;*/
                            background: url(/img/order_ascending.svg) no-repeat 0px 3.5px;
                            background-size: 20px;
                        }

                        .thothUserContainer > .thothRowContainer > .thothCardUserListHead > .sortArea > .thothCardUserListHeadSortBtn > .sortButton > i.TableDownArrowIco {
                            width: 15px;
                            height: 20px;
                            /*background: url(/img/table_down_arrow_ico.svg) no-repeat 0px 0px;*/
                            background: url(/img/order_descending.svg) no-repeat 0px 3.5px;
                            background-size: 20px;
                        }

                        .thothUserContainer > .thothRowContainer > .thothCardUserListHead > .sortArea > .thothCardUserListHeadSortBtn > .sortButton > img {
                            display: -webkit-box;
                            display: -ms-flexbox;
                            display: flex;
                        }

                    .thothUserContainer > .thothRowContainer > .thothCardUserListHead > .sortArea > .thothCardUserListHeadSortBtn:hover {
                        /*background: #beebff;*/
                        /*color: #fff;*/
                        background: #D0D7FC;
                        border: 1.5px solid #D0D7FC;
                        color: #000;
                        /*padding: 1px 10px 1px 10px;*/
                    }

                    .thothUserContainer > .thothRowContainer > .thothCardUserListHead > .sortArea > .thothCardUserListHeadSortBtn.selected {
                        /*background: #beebff;*/
                        /*color: #fff;*/
                        background: #fff;
                        border: 1.5px solid #4346b8;
                        color: #000;
                        /*padding: 1px 3px 1px 10px;*/
                    }

        .thothUserContainer > .thothRowContainer > .thothCardRowContainer, .thothUserContainer > .thothUserList > .thothCardRowContainer {
            width: 100%;
            /*padding-bottom: 100px;*/
            display: flex;
            flex-wrap: wrap;
            height: auto;
            overflow-y: auto;
        }

            .thothUserContainer > .thothRowContainer > .thothCardRowContainer > .thothUserCard, .thothUserContainer > .thothUserList > .thothCardRowContainer > .thothUserCard {
                width: 340px;
                /*height: 100%;*/
                border: 1px solid #dcdee5;
                border-radius: 10px;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                /*background: #f7f8fa;*/
                position: relative;
                margin: 15px 0px 0px 15px;
                padding: 15px 15px 15px 15px;
            }

                .thothUserContainer > .thothRowContainer > .thothCardRowContainer > .thothUserCard > ul, .thothUserContainer > .thothUserList > .thothCardRowContainer > .thothUserCard > ul {
                    width: 100%;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                }

                .thothUserContainer > .thothRowContainer > .thothCardRowContainer > .thothUserCard:hover, .thothUserContainer > .thothUserList > .thothCardRowContainer > .thothUserCard:hover {
                    background: #f7f8fa; /*#f0f2f5;*/
                }

                .thothUserContainer > .thothRowContainer > .thothCardRowContainer > .thothUserCard.selected, .thothUserContainer > .thothUserList > .thothCardRowContainer > .thothUserCard.selected {
                    background: #f0f2f5;
                }

.checkAll {
    display: flex;
    align-items: center;
    width: 100%;
}

.d-none {
    display: none;
}

.thothtableWidth1 {
    min-width: 30px;
    max-width: 30px;
    /*width: none;*/
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.thothtableWidth2 {
    width: 100%;
    min-width: 90px;
    max-width: 170px;
}

.thothtableWidth3 {
    width: 100%;
    min-width: 90px;
    max-width: 170px;
}

.thothtableWidth4 {
    width: 100%;
    min-width: 80px;
    max-width: 90px;
}

.thothtableWidth4 {
    width: 100%;
    min-width: 80px;
    max-width: 90px;
}

.thothtableWidth5 {
    width: 100%;
    min-width: 120px;
}

.thothtableWidth6 {
    width: 100%;
    min-width: 70px;
}

.thothtableWidth7 {
    width: 100%;
    min-width: 70px;
    max-width: 170px;
}

.thothtableWidth8 {
    width: 100%;
    min-width: 70px;
    max-width: 70px;
}

.thothtableWidth380 {
    width: 100%;
    min-width: 70px;
    max-width: 70px;
}

.thothForwardingContainer {
    width: 20%;
    min-width: 320px;
    max-width: 350px;
    height: 100%;
    padding: 15px 15px 15px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-left: 15px;
}

    .thothForwardingContainer > .inside {
        width: 100%;
        height: 100%;
        border: 1px solid #dcdee5;
        border-radius: 10px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background: #f7f8fa;
        position: relative;
    }

        .thothForwardingContainer > .inside > .topTabs {
            width: 100%;
            border-bottom: 1px solid #dcdee5;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            background: #fff;
        }

            .thothForwardingContainer > .inside > .topTabs > ul {
                width: 100%;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
            }

                .thothForwardingContainer > .inside > .topTabs > ul > li {
                    width: 100%;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    -webkit-box-pack: center;
                    -ms-flex-pack: center;
                    justify-content: center;
                    padding: 20px 0;
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    border-bottom: 2px solid #fff;
                    font-weight: 500;
                    color: #8d8e93;
                    position: relative;
                    -webkit-transition: border 0.2s ease-in-out;
                    transition: border 0.2s ease-in-out;
                    cursor: pointer;
                }

                    .thothForwardingContainer > .inside > .topTabs > ul > li > img {
                        margin-right: 10px;
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                    }

                    .thothForwardingContainer > .inside > .topTabs > ul > li > i.TabChatImg {
                        width: 23px;
                        height: 20px;
                        background: url(/img/chat_ico.svg) no-repeat 4px 3px;
                        background-size: 15px;
                        margin-right: 5px;
                    }

                        .thothForwardingContainer > .inside > .topTabs > ul > li > i.TabChatImg.active {
                            background: url(/img/chat_ico_active.svg) no-repeat 4px 3px;
                        }

                    .thothForwardingContainer > .inside > .topTabs > ul > li > i.TabMailImg {
                        width: 23px;
                        height: 20px;
                        background: url(/img/mail_ico.svg) no-repeat 4px 3px;
                        background-size: 15px;
                        margin-right: 5px;
                    }

                        .thothForwardingContainer > .inside > .topTabs > ul > li > i.TabMailImg.active {
                            background: url(/img/mail_ico_active.svg) no-repeat 4px 3px;
                        }

                    .thothForwardingContainer > .inside > .topTabs > ul > li > i.TabCalendarImg {
                        width: 23px;
                        height: 20px;
                        background: url(/img/calendar_ico.svg) no-repeat 4px 3px;
                        background-size: 15px;
                        margin-right: 5px;
                    }

                        .thothForwardingContainer > .inside > .topTabs > ul > li > i.TabCalendarImg.active {
                            background: url(/img/calendar_ico_active.svg) no-repeat 4px 3px;
                        }

                    .thothForwardingContainer > .inside > .topTabs > ul > li:hover {
                        border-bottom: 2px solid #5f62dd;
                    }

                    .thothForwardingContainer > .inside > .topTabs > ul > li > .thothNoti {
                        width: 6px;
                        height: 6px;
                        background: #5f62dd;
                        border-radius: 3px;
                        position: absolute;
                        top: 10px;
                        right: 10px;
                        display: none;
                    }

                    .thothForwardingContainer > .inside > .topTabs > ul > li > .thothNotiVisible {
                        display: block;
                    }

                .thothForwardingContainer > .inside > .topTabs > ul > .active {
                    border-bottom: 2px solid #5f62dd;
                    color: #1b1c1f;
                }

        .thothForwardingContainer > .inside > .thothForwardingList {
            width: 100%;
            height: calc(100% - 60px);
            padding: 15px;
            overflow-y: auto;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            position: relative;
        }

            .thothForwardingContainer > .inside > .thothForwardingList > .thothForwardingBox {
                width: 100%;
                margin-bottom: 15px;
                background: #eaedf2;
                border-radius: 5px;
                padding: 15px;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
            }

                .thothForwardingContainer > .inside > .thothForwardingList > .thothForwardingBox.active {
                    background: #e8ebfa;
                }

                .thothForwardingContainer > .inside > .thothForwardingList > .thothForwardingBox:last-child {
                    margin-bottom: 0;
                }

                .thothForwardingContainer > .inside > .thothForwardingList > .thothForwardingBox > .thothBoxHead {
                    width: 100%;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    margin-bottom: 10px;
                }

                    .thothForwardingContainer > .inside > .thothForwardingList > .thothForwardingBox > .thothBoxHead > .left {
                        width: 100%;
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        -webkit-box-align: center;
                        -ms-flex-align: center;
                        align-items: center;
                    }

                        .thothForwardingContainer > .inside > .thothForwardingList > .thothForwardingBox > .thothBoxHead > .left > h1 {
                            margin-right: 10px;
                        }

                            .thothForwardingContainer > .inside > .thothForwardingList > .thothForwardingBox > .thothBoxHead > .left > h1:last-child {
                                margin-right: 0;
                            }

                    .thothForwardingContainer > .inside > .thothForwardingList > .thothForwardingBox > .thothBoxHead > .right {
                        width: 100%;
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        -webkit-box-pack: end;
                        -ms-flex-pack: end;
                        justify-content: flex-end;
                        -webkit-box-align: center;
                        -ms-flex-align: center;
                        align-items: center;
                    }

                        .thothForwardingContainer > .inside > .thothForwardingList > .thothForwardingBox > .thothBoxHead > .right > a {
                            color: #808286;
                            text-decoration: underline;
                        }

                .thothForwardingContainer > .inside > .thothForwardingList > .thothForwardingBox > .thothForwardingUserBox {
                    width: 100%;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    border: 1px solid #dcdee5;
                    border-radius: 5px;
                    background: #fff;
                    margin-bottom: 5px;
                }

                    .thothForwardingContainer > .inside > .thothForwardingList > .thothForwardingBox > .thothForwardingUserBox:last-child {
                        margin-bottom: 0;
                    }

                    .thothForwardingContainer > .inside > .thothForwardingList > .thothForwardingBox > .thothForwardingUserBox > .forwardingCheckBox {
                        width: 0%; /* DH */
                        padding: 10px 10px 10px 12px;
                        -webkit-box-sizing: border-box;
                        box-sizing: border-box;
                    }

                    .thothForwardingContainer > .inside > .thothForwardingList > .thothForwardingBox > .thothForwardingUserBox > .forwardingProfile {
                        width: 38%; /* DH */
                        padding: 10px 10px 10px 0;
                        -webkit-box-sizing: border-box;
                        box-sizing: border-box;
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        -webkit-box-align: center;
                        -ms-flex-align: center;
                        align-items: center;
                    }

                        .thothForwardingContainer > .inside > .thothForwardingList > .thothForwardingBox > .thothForwardingUserBox > .forwardingProfile > .thothThumbnail {
                            width: 22px;
                            height: 22px;
                            border-radius: 15px;
                            overflow: hidden;
                            margin-right: 5px;
                        }

                            .thothForwardingContainer > .inside > .thothForwardingList > .thothForwardingBox > .thothForwardingUserBox > .forwardingProfile > .thothThumbnail > img {
                                width: 100%;
                                height: 100%;
                                -o-object-fit: cover;
                                object-fit: cover;
                            }

                    .thothForwardingContainer > .inside > .thothForwardingList > .thothForwardingBox > .thothForwardingUserBox > .forwardingPosition {
                        width: 37%; /* DH */
                        padding: 10px 0 10px 0;
                        -webkit-box-sizing: border-box;
                        box-sizing: border-box;
                    }

                    .thothForwardingContainer > .inside > .thothForwardingList > .thothForwardingBox > .thothForwardingUserBox > .forwardingDelete {
                        width: 15%;
                        padding: 10px 12px 10px 10px;
                        -webkit-box-sizing: border-box;
                        box-sizing: border-box;
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        -webkit-box-pack: end;
                        -ms-flex-pack: end;
                        justify-content: flex-end;
                    }

                        .thothForwardingContainer > .inside > .thothForwardingList > .thothForwardingBox > .thothForwardingUserBox > .forwardingDelete > i {
                            width: 10px;
                            height: 10px;
                            background: url(/img/delete_ico.svg) no-repeat 0px 0px;
                            background-size: 10px;
                            cursor: pointer;
                        }

                        .thothForwardingContainer > .inside > .thothForwardingList > .thothForwardingBox > .thothForwardingUserBox > .forwardingDelete > img {
                            display: -webkit-box;
                            display: -ms-flexbox;
                            display: flex;
                            cursor: pointer;
                        }

            .thothForwardingContainer > .inside > .thothForwardingList > .thothForwardingButtons {
                width: 100%;
                padding: 15px 0;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                position: -webkit-sticky;
                position: sticky;
                left: 0;
                bottom: 0;
            }

                .thothForwardingContainer > .inside > .thothForwardingList > .thothForwardingButtons > ul {
                    width: 100%;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    margin-bottom: 10px;
                }

                    .thothForwardingContainer > .inside > .thothForwardingList > .thothForwardingButtons > ul:last-child {
                        margin-bottom: 0;
                    }

                    .thothForwardingContainer > .inside > .thothForwardingList > .thothForwardingButtons > ul > li {
                        width: 100%;
                        margin-right: 10px;
                    }

                        .thothForwardingContainer > .inside > .thothForwardingList > .thothForwardingButtons > ul > li:last-child {
                            margin-right: 0;
                        }

.bottomOptionContainer {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
}

    .bottomOptionContainer > .floatingButton {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        position: absolute;
        top: -95px;
        right: 0;
    }

        .bottomOptionContainer > .floatingButton > .button {
            width: 60px;
            height: 60px;
            border-radius: 30px;
            border: 1px solid #5f62dd;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            margin: 0 25px 25px 0;
            background: #fff;
            -webkit-box-shadow: 0px 10px 15px 10px rgba(95, 98, 221, 0.15);
            box-shadow: 0px 10px 15px 10px rgba(95, 98, 221, 0.15);
            position: relative;
            cursor: pointer; /* DH */
        }

            .bottomOptionContainer > .floatingButton > .button > .floatingButtonImage {
                width: 21px;
                height: 15px;
                background: url(/img/side_menu_ico.svg) no-repeat;
            }

            .bottomOptionContainer > .floatingButton > .button > .notiDot {
                width: 5px;
                height: 5px;
                background: #5f62dd;
                border-radius: 5px;
                position: absolute;
                top: 12px;
                right: 12px;
                display: none; /* DH */
            }

            .bottomOptionContainer > .floatingButton > .button > .notiDotVisible {
                display: block; /* DH */
            }

    .bottomOptionContainer > .moveUserContainer {
        width: 100%;
        padding: 20px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background: #2C2D31;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

        .bottomOptionContainer > .moveUserContainer > .left {
            width: 30%;
        }

            .bottomOptionContainer > .moveUserContainer > .left > h1 {
                color: #fff;
                font-size: 13px;
            }

        .bottomOptionContainer > .moveUserContainer > .right {
            width: 70%;
        }

            .bottomOptionContainer > .moveUserContainer > .right > ul {
                width: 100%;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: end;
                -ms-flex-pack: end;
                justify-content: flex-end;
            }

                .bottomOptionContainer > .moveUserContainer > .right > ul > li {
                    margin-right: 15px;
                }

                    .bottomOptionContainer > .moveUserContainer > .right > ul > li:last-child {
                        margin-right: 0;
                    }

.selectBoxTablet {
    width: 100%;
    min-width: 150px;
    padding: 15px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url(/img/table_down_arrow_ico.svg) #fff no-repeat center right 15px;
}

.toastMessage {
    width: 100%;
    bottom: 60px;
    left: 0;
    position: fixed;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    z-index: 999999;
}

    .toastMessage > .msg {
        background: rgba(0, 0, 0, 0.7);
        color: #fff;
        padding: 15px 25px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: 60px;
    }
/*# sourceMappingURL=style.css.map */

#context-menu {
    position: fixed;
    z-index: 10000;
    width: 150px;
    background: #fff;
    border-radius: 10px;
    transform: scale(0);
    transform-origin: top left;
    border: 1px solid #dcdee5;
    padding: 15px;
    -webkit-box-shadow: 0px 10px 20px 5px rgba(0, 0, 0, 0.10);
    box-shadow: 0px 10px 20px 5px rgba(0, 0, 0, 0.10);
}

    #context-menu.visible {
        transform: scale(1);
        transition: transform 200ms ease-in-out;
    }

    #context-menu ul {
        width: 100%;
    }

        #context-menu ul div.divider {
            width: 100%;
            height: 1px;
            background: #dcdee5;
            margin: 10px 0;
        }

        #context-menu ul li {
            width: 100%;
            display: flex;
            align-items: center;
            cursor: pointer;
        }

            #context-menu ul li i.ContextImg {
                width: 20px;
                height: 20px;
                background: url(/img/add_people_ico.svg) no-repeat 4px 3px;
                background-size: 15px;
                margin-right: 5px;
            }

            /* #region BookmarkJdh: Context Menu */
            #context-menu ul li i.ContextImgAddGroup {
                width: 20px;
                height: 20px;
                background: url(/img/bookmark-add.svg) no-repeat 4px 3px;
                background-size: 15px !important;
                margin-right: 5px;
            }

            #context-menu ul li i.ContextImgRemoveGroup {
                width: 20px;
                height: 20px;
                background: url(/img/bookmark-remove.svg) no-repeat 4px 3px;
                background-size: 15px !important;
                margin-right: 5px;
            }
            /* #endregion */

            #context-menu ul li i.ContextImgCc {
                width: 20px;
                height: 20px;
                background: url(/img/add_cc_ico.svg) no-repeat 4px 3px;
                background-size: 15px;
                margin-right: 5px;
            }

            #context-menu ul li i.ContextImgBcc {
                width: 20px;
                height: 20px;
                background: url(/img/add_bcc_ico.svg) no-repeat 4px 3px;
                background-size: 15px;
                margin-right: 5px;
            }

            #context-menu ul li p {
                font-weight: 500;
            }

            #context-menu ul li img {
                margin-right: 5px;
            }

    #context-menu .item {
        padding: 8px 10px;
        font-size: 15px;
        color: #eee;
        cursor: pointer;
        border-radius: inherit;
    }

        #context-menu .item:hover {
            background: #343434;
        }

.lPadding-5 {
    padding-left: 5px;
}

.rPadding-5 {
    padding-right: 5px;
}

.person-root {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: var(--person-background-color,transparent);
    border-radius: var(--person-border-radius,4px);
    padding-left: 10px;
}

    .person-root.fourlines .avatar-wrapper, :host .person-root.vertical .avatar-wrapper {
        min-width: var(--person-avatar-size,72px);
        width: var(--person-avatar-size,72px);
        height: var(--person-avatar-size,72px)
    }

    .person-root .details-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        min-width: var(--person-details-wrapper-width,168px);
        /*margin-inline-start: var(--person-details-left-spacing,12px);*/
        /* margin-block-end: var(--person-details-bottom-spacing,0);*/
        margin: 0 12px 0 12px;
    }

        .person-root .details-wrapper .line1 {
            font-size: var(--person-line1-font-size,ms-font-size-14);
            font-weight: var(--person-line1-font-weight,600);
            color: var(--person-line1-text-color,var(--neutral-foreground-rest));
            text-transform: var(--person-line1-text-transform,inherit);
            line-height: var(--person-line1-text-line-height,20px);
            padding-bottom: .5em;
            word-break: break-word;
        }

        .person-root .details-wrapper .line2 {
            font-size: var(--person-line2-font-size,var(--email-font-size,ms-font-size-12));
            font-weight: var(--person-line2-font-weight,400);
            color: var(--person-line2-text-color,var(--secondary-text-color));
            text-transform: var(--person-line2-text-transform,inherit);
            line-height: var(--person-line2-text-line-height,16px);
            padding-bottom: .5em;
            word-break: break-word;
        }

        .person-root .details-wrapper .line3 {
            font-size: var(--person-line3-font-size, var(--email-font-size, ms-font-size-12));
            font-weight: var(--person-line3-font-weight, 400);
            color: var(--person-line3-text-color, var(--secondary-text-color));
            text-transform: var(--person-line3-text-transform, inherit);
            line-height: var(--person-line3-text-line-height, 16px);
            padding-bottom: .5em;
            word-break: break-word;
        }

        .person-root .details-wrapper .line4 {
            font-size: var(--person-line4-font-size, var(--email-font-size, ms-font-size-12));
            font-weight: var(--person-line4-font-weight, 400);
            color: var(--person-line4-text-color, var(--secondary-text-color));
            text-transform: var(--person-line4-text-transform, inherit);
            line-height: var(--person-line4-text-line-height, 16px);
            padding-bottom: .5em;
            word-break: break-word;
        }

.thothButtonOption {
    width: 100%;
}

    .thothButtonOption > ul {
        display: flex;
        align-items: center;
    }

        .thothButtonOption > ul > li {
            /*cursor: pointer;*/
            display: flex;
            align-items: center;
        }

            .thothButtonOption > ul > li > p {
                transition: color 0.2s ease-in-out;
                white-space: nowrap;
            }

            .thothButtonOption > ul > li > .divider {
                width: 1px;
                height: 15px;
                background: #EFF1F4;
            }

            .thothButtonOption > ul > li:last-child {
                margin-right: 0;
            }

.thothSidePopupType1 {
    width: 400px;
    /*height: 700px;*/
    position: fixed;
    z-index: 1045;
    /*min-width: 600px;*/
    top: 0;
    right: 0;
    display: none;
}

    .thothSidePopupType1 > .thothSidePopupcontent {
        width: 100%;
    }

.thothSidePopupType2 {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1045;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: flex-end;
}

    .thothSidePopupType2 > .thothSidePopupcontent {
        width: 40%;
        min-width: 600px;
    }

.thothSidePopupcontent {
    height: 100%;
    background: #fff;
    box-shadow: 0px 0px 30px 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}

    .thothSidePopupcontent > .topButtons {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        display: flex;
    }

        .thothSidePopupcontent > .topButtons > ul {
            width: 100%;
            display: flex;
        }

        .thothSidePopupcontent > .topButtons > .right {
            justify-content: flex-end;
        }

    .thothSidePopupcontent > .content > .popupProfile {
        width: 100%;
        display: flex;
        box-sizing: border-box;
    }

        .thothSidePopupcontent > .content > .popupProfile > .thumbnail {
            width: 60px;
            min-width: 60px;
            height: 60px;
            border-radius: 50%;
            overflow: hidden;
        }

            .thothSidePopupcontent > .content > .popupProfile > .thumbnail > img {
                width: 100%;
                height: 100%;
                -o-object-fit: cover;
                object-fit: cover;
            }

        .thothSidePopupcontent > .content > .popupProfile > .info {
            width: 100%;
        }

            .thothSidePopupcontent > .content > .popupProfile > .info > .name {
                width: 100%;
            }

                .thothSidePopupcontent > .content > .popupProfile > .info > .name > h1 {
                    font-weight: 700;
                }

    .thothSidePopupcontent > .popupTitle {
        width: 100%;
    }

        .thothSidePopupcontent > .popupTitle > h1 {
            font-weight: 700;
        }

    .thothSidePopupcontent > .content {
        width: 100%;
        height: calc(100% - 23px);
    }

        .thothSidePopupcontent > .content > .popupDataWrapper {
            width: 100%;
            height: calc(100% - 185px);
            overflow-y: auto;
            border-radius: 0 0 5px 5px;
        }

            .thothSidePopupcontent > .content > .popupDataWrapper > .dataType1 {
                width: 100%;
            }

                .thothSidePopupcontent > .content > .popupDataWrapper > .dataType1 > .head {
                    width: 100%;
                    box-sizing: border-box;
                }

                    .thothSidePopupcontent > .content > .popupDataWrapper > .dataType1 > .head > h1 {
                        font-weight: 500;
                    }

                .thothSidePopupcontent > .content > .popupDataWrapper > .dataType1 > .contentWrapper {
                    width: 100%;
                    background: #dbdbdb; /*rgba(242, 243, 245, 0.8);*/
                    box-sizing: border-box;
                    overflow-y: auto;
                }

                    .thothSidePopupcontent > .content > .popupDataWrapper > .dataType1 > .contentWrapper > ul {
                        width: 100%;
                        display: flex;
                    }

                        .thothSidePopupcontent > .content > .popupDataWrapper > .dataType1 > .contentWrapper > ul:last-child {
                            margin-bottom: 0;
                        }

                        .thothSidePopupcontent > .content > .popupDataWrapper > .dataType1 > .contentWrapper > ul > li {
                            background: #fff;
                            border: 1px solid #EFF1F4;
                            box-sizing: border-box;
                            border-radius: 5px;
                        }

                        .thothSidePopupcontent > .content > .popupDataWrapper > .dataType1 > .contentWrapper > ul.highlights > li {
                            background: #4e73f5;
                            color: white;
                            font-weight: 800;
                        }

                        .thothSidePopupcontent > .content > .popupDataWrapper > .dataType1 > .contentWrapper > ul > li.highlights {
                            background: #4e73f5;
                            color: white;
                            font-weight: 800;
                        }

                        .thothSidePopupcontent > .content > .popupDataWrapper > .dataType1 > .contentWrapper > ul > li:last-child {
                            margin-right: 0;
                        }

                        .thothSidePopupcontent > .content > .popupDataWrapper > .dataType1 > .contentWrapper > ul > li > .contentType1 {
                            width: 100%;
                        }

                            .thothSidePopupcontent > .content > .popupDataWrapper > .dataType1 > .contentWrapper > ul > li > .contentType1 > .head {
                                width: 100%;
                                display: flex;
                                align-items: center;
                            }

                                .thothSidePopupcontent > .content > .popupDataWrapper > .dataType1 > .contentWrapper > ul > li > .contentType1 > .head > h1 {
                                    font-weight: 800;
                                }

                        .thothSidePopupcontent > .content > .popupDataWrapper > .dataType1 > .contentWrapper > ul > li > .contentType2 {
                            width: 100%;
                            display: flex;
                            align-items: center;
                        }

                        .thothSidePopupcontent > .content > .popupDataWrapper > .dataType1 > .contentWrapper > ul > .col100 {
                            width: 100%;
                        }

                        .thothSidePopupcontent > .content > .popupDataWrapper > .dataType1 > .contentWrapper > ul > .col50 {
                            width: 50%;
                        }

                        .thothSidePopupcontent > .content > .popupDataWrapper > .dataType1 > .contentWrapper > ul > .col33 {
                            width: 33.3%;
                        }

    .thothSidePopupcontent > .popupDataWrapper > .dataType2 {
        width: 100%;
        height: 100%;
        display: flex;
    }

        .thothSidePopupcontent > .popupDataWrapper > .dataType2 > .left {
            width: 200px;
            height: 100%;
            background: rgba(242, 243, 245, 0.8);
            overflow-y: auto;
        }

            .thothSidePopupcontent > .popupDataWrapper > .dataType2 > .left > ul {
                width: 100%;
            }

                .thothSidePopupcontent > .popupDataWrapper > .dataType2 > .left > ul > li {
                    transition: all 0.2s ease-in-out;
                    box-sizing: border-box;
                    border-bottom: 1px solid #e0e3e5;
                }

                    .thothSidePopupcontent > .popupDataWrapper > .dataType2 > .left > ul > li:hover {
                        background: #EFEFF0;
                    }

                .thothSidePopupcontent > .popupDataWrapper > .dataType2 > .left > ul > .active, .thothLeftMenu > .leftMenuList.thothSidePopupcontent > ul.popupDataWrapper > li.dataType2 > .secondDepth.left > ul > li:hover {
                    background: #EFEFF0;
                }

        .thothSidePopupcontent > .popupDataWrapper > .dataType2 > .right {
            width: calc(100% - 200px);
            height: 100%;
            background: white;
        }

    .thothSidePopupcontent .popupInputWrapper {
        height: calc(100% - 265px);
    }

/* spinner css */
.preloader-wrapper {
    /*pos        ition: fixed;*/
    /*top: 0;*/
    /*left: 0;*/
    width: 100%;
    height: 100%;
    background: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .4s ease;
}

.fade-out-animation {
    opacity: 0;
    display: none;
}
/* spinner css */

.ESW-Hidden {
    display: none;
}

.show {
    display: block;
}


span.sidebtn {
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
}
/** 좌우 버튼 **/
span.pg {
    text-align: center;
    margin: 0px 40px 0px 40px;
}

span.nm {
    padding: 2px 15px 2px 15px;
    margin-right: 1px;
    color: #313031;
    text-decoration: none;
    line-height: normal;
    font-weight: bold;
    font-family: tahoma;
    font-size: 12px;
    vertical-align: middle;
    background: white;
    display: inline-block;
    cursor: pointer;
}

span.cnum {
    color: #F30 !important;
    cursor: default;
}

span.btn {
    margin-left: 10px;
    cursor: pointer;
}

.thothPaging {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, 0);
}


/* #region BookmarkJdh */

/* custom - bsong */

#dialog-bookmark-usergroup-control {
    background-color: #edf1f5;
    border-radius: 10px;
    padding: 20px;
}

.ui-dialog:has(#dialog-bookmark-usergroup-control) {
    padding: 0;
    border: none;
    width: auto !important;
    border-radius: 10px;
    box-shadow: 1px 1px 20px 0px #9fa0a254;
}

#dialog-bookmark-usergroup-control .dialog-titlebar {
    background-color: transparent;
    border-bottom: none;
    padding: 0;
}

input#add-usergroup-input {
    border: none;
    border-radius: 100px;
    font-family: inherit;
    font-size: 15px;
    padding: 5px 10px;
    outline: none;
}

div#add-usergroup-container {
    border-bottom: 1px solid #888;
    padding-bottom: 15px;
}

ul#dialog-usergroup-list {
    margin-top: 10px;
}

ul#dialog-usergroup-list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: none;
    padding-right: 0;
    overflow-y: auto;
    max-height: 200px;
    min-height: 200px;
}

.ai-button {
    top: 4px;
    margin-top: 14px;
    margin-right: 2px;
    position: absolute;
    width: 18px;
    height: 18px;
    right: 10px;
    cursor: pointer;
    float: right;
    padding: 4px;
    content: '';
    display: block;
    background-image: url(/img/ai-star-ico.svg);
    background-size: 56px;
    background-repeat: no-repeat;
    background-position-x: -31px;
    background-position-y: -11px;
}
    .ai-button:hover {
        background-image: url('/img/ai-star-ico-hover.svg');
    }

    .ai-button.selected {
        background-image: url('/img/ai-star-ico-selected.svg');
    }

.jstree-dnd-marker {
    position: absolute;
    height: 1.5px;
    z-index: 1000;
    width: 100%;
    background-color: gray;
}

.dialog-titlebar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #ccc;
    background-color: #ffffff;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    margin-bottom: 10px;
}

.dialog-title {
    font-size: 16px;
    font-weight: bold;
}

.dialog-close-button {
    width: 32px;
    height: 32px;
    border: none;
    background-image: url(/img/close-ico.svg);
    background-color: transparent;
    background-size: 68px;
    background-repeat: no-repeat;
    background-position-x: -37px;
    background-position-y: -10px;
}

    .dialog-close-button:focus {
        outline: none; /* 포커스 시 외곽선 제거 */
    }

#add-usergroup-confirm-button {
    width: 28px;
    height: 28px;
    border: none;
    background-image: url(/img/bookmark-confirm-ico.svg);
    background-color: transparent !important;
    background-size: 68px;
    background-repeat: no-repeat;
    background-position-x: -42px;
    background-position-y: -12px;
}

    #add-usergroup-confirm-button:focus {
        outline: none; /* 포커스 시 외곽선 제거 */
    }

#add-usergroup-cancel-button {
    width: 28px;
    height: 28px;
    border: none;
    background-image: url(/img/bookmark-cancel-ico.svg);
    background-color: transparent !important;
    background-size: 68px;
    background-repeat: no-repeat;
    background-position-x: -42px;
    background-position-y: -12px;
}

    #add-usergroup-cancel-button:focus {
        outline: none; /* 포커스 시 외곽선 제거 */
    }


#add-confirm-button {
    width: 28px;
    height: 28px;
    border: none;
    background-image: url(/img/bookmark-confirm-ico.svg);
    background-color: transparent !important;
    background-size: 68px;
    background-repeat: no-repeat;
    background-position-x: -42px;
    background-position-y: -12px;
}

    #add-confirm-button:focus {
        outline: none; /* 포커스 시 외곽선 제거 */
    }

#add-cancel-button {
    width: 28px;
    height: 28px;
    border: none;
    background-image: url(/img/bookmark-cancel-ico.svg);
    background-color: transparent !important;
    background-size: 68px;
    background-repeat: no-repeat;
    background-position-x: -42px;
    background-position-y: -12px;
}

    #add-cancel-button:focus {
        outline: none; /* 포커스 시 외곽선 제거 */
    }

#edit-save-button {
    border: none;
    background-image: url(/img/bookmark-confirm-ico.svg);
    background-color: transparent !important;
    background-size: 42px;
    background-repeat: no-repeat;
    background-position-x: -26px;
    background-position-y: -8px;
    margin-left:5px;
    width: 16px;
    height: 16px;
}

    #edit-save-button:focus {
        outline: none; /* 포커스 시 외곽선 제거 */
    }

#edit-cancel-button {
    border: none;
    background-image: url(/img/bookmark-cancel-ico.svg);
    background-color: transparent;
    background-size: 42px;
    background-repeat: no-repeat;
    background-position-x: -26px;
    background-position-y: -8px;
    margin-left: 5px;
    width: 16px;
    height: 16px;
}

    #edit-cancel-button:focus {
        outline: none; /* 포커스 시 외곽선 제거 */
    }

#edit-node-input {
    border: 1px solid #dcdee5;
    border-radius: 5px;
    padding: 2px;
    margin-top: 2px;
    width: calc(100% - 55px);
    max-width: 168px;
}

.add-node-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.add-node-input {
    width: calc(100% - 80px);
    padding: 5px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.dialog-usergroup-list {
    max-height: 300px;
    overflow-y: scroll;
    padding: 0;
    list-style-type: none;
    border: 1px solid #ccc;
}

    .dialog-usergroup-list li:hover {
        border: 1px solid #564aca;
    }

    .dialog-usergroup-list li {
        padding: 10px;
        background-color: #fff;
        border: 1px solid #fff;
        padding: 6px 10px;
        font-size: 15px;
        transition: all .2s;
    }

        .dialog-usergroup-list li:last-child {
            border-bottom: none;
        }


.context-icon-bookmark {
    background: url(/img/bookmark-add.svg) no-repeat center center !important;
    background-size: 16px !important;
}

.context-icon-remove-bookmark {
    background: url(/img/bookmark-remove.svg) no-repeat center center !important;
    background-size: 16px !important;
}

.context-icon-add-group {
    background: url(/img/plus_black.svg) no-repeat center center !important;
}

.context-icon-modify-group {
    background: url(/img/bookmark-edit-group.svg) no-repeat center center !important;
    background-position-x: -12px !important;
    background-position-y: 4px !important;
}

/* jstree context menu item 스타일 재정의 */
.jstree-contextmenu a {
    padding-left: 20px; /* 아이콘과 텍스트 사이에 여백 추가 */
}

.jstree-contextmenu .context-icon-bookmark:before,
.jstree-contextmenu .context-icon-remove-bookmark:before {
    content: '';
    display: inline-block;
    width: 16px; /* 아이콘 크기 */
    height: 16px; /* 아이콘 크기 */
    margin-right: 8px; /* 아이콘과 텍스트 사이 여백 */
    vertical-align: middle; /* 텍스트와 아이콘을 수직 정렬 */
}

.cursor-pointer{
    cursor: pointer;
}

/* #endregion */

/* 휴가 정보 ICON css - wyjung */
.vacation20 {
    content: url("/img/AbsentCustomImg/color/20px/vacation.svg");
    width: 20px;
    height: 20px;
}

.Gvacation20 {
    content: url("/img/AbsentCustomImg/color/20px/Gvacation.svg");
    width: 20px;
    height: 20px;
}

.Ahalfvacation20 {
    content: url("/img/AbsentCustomImg/color/20px/Ahalfvacation.svg");
    width: 20px;
    height: 20px;
}

.Phalfvacation20 {
    content: url("/img/AbsentCustomImg/color/20px/Phalfvacation.svg");
    width: 20px;
    height: 20px;
}

.vacation32 {
    content: url("/img/AbsentCustomImg/color/32px/vacation.svg");
    width: 24px;
    height: 24px;
}


.Gvacation32 {
    content: url("/img/AbsentCustomImg/color/32px/Gvacation.svg");
    width: 24px;
    height: 24px;
}

.Ahalfvacation32 {
    content: url("/img/AbsentCustomImg/color/32px/Ahalfvacation.svg");
    width: 24px;
    height: 24px;
}


.Phalfvacation32 {
    content: url("/img/AbsentCustomImg/color/32px/Phalfvacation.svg");
    width: 24px;
    height: 24px;
}

/* 대우건설 */
.person-root .details-wrapper .line1 .addJobTitle {
    color: #043b72;
}