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

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, .thothRootContainer > .topSearch > .searchBox > .search, .thothRootContainer > .thothRootList > ul > li > .thothRootMenuBox > .thothRootMenu > .thothRootTitle > p, .thothRootContainer > .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 {
    font-size: 13px;
}

.fontXl, .thothUserContainer > .thothUserHead > h1 {
    font-size: 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: 1px solid #5f62dd;
            color: #fff;
        }

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

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

    .checkRadioBoxType1 > label {
        width: 20px;
        height: 20px;
        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;
    }

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

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

        .checkRadioBoxType1 > label:hover {
            border: 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;
            }

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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        .thothRootContainer > .thothRootList > ul {
            /*width: 100%;*/
        }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

                    .thothRootContainer > .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: auto;
    /*overflow:overlay;*/
}

    .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: 25px;
        margin-bottom: 20px;
    }

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

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

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

        .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: 15px;
                    border-bottom: 2px solid #1b1c1f;
                    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;
                }

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

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

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

            #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 {
    position: relative;
    /*display: flex;*/
    align-items: center;
    color: var(--color,var(--color-sub1,#323130))
}

    .person-root .user-avatar.small {
        width: 24px; /*var(--avatar-size-s,var(--avatar-size,24px));*/
        height: 24px; /*var(--avatar-size-s,var(--avatar-size,24px));*/
    }

    .person-root .user-avatar.large {
        width: 90px; /*var(--avatar-size-s,var(--avatar-size,24px));*/
        height: 90px; /*var(--avatar-size-s,var(--avatar-size,24px));*/
    }

    .person-root .PersonCardWrapper {
        position: relative;
        top: 0px;
        left: 0px;
        background: #f0f2f5;
        display: none;
    }

        .person-root .PersonCardWrapper.show {
            display: inline-block;
            position: fixed;
            z-index: 999;
            width: 270px;
            height: auto;
            overflow-y: auto;
            padding: 10px;
            border-radius: 2%;
        }

        .person-root .PersonCardWrapper .PersonCard {
            width: 250px;
            table-layout: fixed;
            border-collapse: collapse;
        }

            .person-root .PersonCardWrapper .PersonCard td {
                height: 35px;
                color: #666;
                border: 1px solid #4043C4;
                text-align: left;
                font-weight: bold;
                font-size: 12px;
                vertical-align: middle;
            }

    .person-root .user-avatar.large .img-wrapper {
        height: 100%;
        width: 100%;
        display: flex;
        overflow: hidden;
        border: var(--avatar-border,0);
        border-radius: 0;
        position: relative;
        box-sizing: border-box;
    }

    .person-root .user-avatar .img-wrapper, mgt-person .person-root .user-avatar .img-wrapper {
        height: 100%;
        width: 100%;
        display: flex;
        overflow: hidden;
        border: var(--avatar-border,0);
        border-radius: var(--avatar-border-radius,50%);
        position: relative;
        box-sizing: border-box;
    }

        .person-root .user-avatar .img-wrapper img, mgt-person .person-root .user-avatar .img-wrapper img {
            position: absolute;
            display: block;
            inset: -100%;
            margin: auto;
            height: 100%;
            width: 100%;
            object-fit: cover;
            object-position: center top;
        }

    .person-root .user-avatar.small .user-presence, mgt-person .person-root .user-avatar.small .user-presence {
        left: calc(var(--avatar-size-s,var(--avatar-size,24px)) - 8px);
        top: calc(var(--avatar-size-s,var(--avatar-size,24px)) - 8px);
        width: 8px;
        height: 8px;
        margin: 0px;
        position: absolute;
        border: 2px solid var(--presence-background-color,var(--background-color,#fff));
        border-radius: 50%;
    }

        .person-root .user-avatar.small .user-presence .presence-basic, mgt-person .person-root .user-avatar.small .user-presence .presence-basic {
            width: 4px;
            height: 4px;
            border-radius: 4px;
            padding: 0px;
            border-style: solid;
            border-width: 2px;
            margin: 0px;
            font-size: calc(var(--avatar-size,var(--avatar-size-s,48px)) * 0.14);
            vertical-align: top;
            display: flex;
            align-items: center;
        }

    .person-root .user-avatar .user-presence .presence-basic.presence-available, mgt-person .person-root .user-avatar .user-presence .presence-basic.presence-available {
        background-color: rgb(107, 183, 0);
        border-color: rgb(107, 183, 0);
    }

    .person-root .user-avatar .user-presence .presence-basic.presence-dnd, mgt-person .person-root .user-avatar .user-presence .presence-basic.presence-dnd {
        background-color: rgb(197, 15, 31);
        border-color: rgb(197, 15, 31);
    }

    .person-root .user-avatar .user-presence .presence-basic.presence-away, mgt-person .person-root .user-avatar .user-presence .presence-basic.presence-away {
        background-color: rgb(255, 170, 68);
        border-color: rgb(255, 170, 68);
    }

    .person-root .user-avatar .user-presence .presence-basic.presence-offline, mgt-person .person-root .user-avatar .user-presence .presence-basic.presence-offline {
        background-color: var(--presence-background-color,var(--background-color,#fff));
        border-color: rgb(138, 136, 134);
    }

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