@charset "utf-8";

/* -------------------------------------------------------------------
/* Table of Contents
----------------------------------------------------------------------

	01. Common ......................
	02. Relation
	02-1. String.TextArea
	02-2. String.Email
	02-3  Boolean.Radio
	02-4. String.Text.Ip
	02-5. String.Single.File
	02-6. String.Multi.File
	02-7. String.Multi.Emp
	03. Form
	03-1. Entity.Employee, Code.Search.Select
	03-2. Code.Radio
	03-3. Entity.CM.Multi
	03-4. String.jqxEditor
	03-5. Date.TM.ST.ET
	03-6. String.Multi.CheckBox
	03-7. String.File
	03-8. Custom.History
	03-9. Custom.Employees
	04. Autocomplete
	05. searchList
	06. addAssigner
	07. SelectAdress
	08. JSON.Point2.Convert
 */


/* 01.  Common
------------------------------------- */

.atiom-guide-text {
    border: 1px solid #cdcdcd;
    padding: 20px;
    margin-bottom: 10px;
    border-radius: 3px;
    background: #fdfdfd;
    border-left: 3px solid darkgrey;
}

.atiom-guide-text ul li {
    list-style: none;
}

.atiom-guide-text ul li:nth-child(1) {
    float: left;
}

.atiom-guide-pre {
    background: #fcfcfc;
    border: 1px solid #dfdfdf;
    font-size: 13px;
    /* 	height: 500px; */
}

div.div_atom {
    width: 100%;
}

.atom-group {
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.atom-group .atom-group-addon-text {
    font-size: 13px;
    font-weight: 400;
    line-height: 0;
    padding: 8px 8px 4px;
    text-align: center;
    cursor: default;
}

.atom-group .atom-group-addon {
    background-color: #fff;
    border: 1px solid #dbdbdb;
    border-radius: 1px;
    color: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 0;
    padding: 8px 8px 4px;
    text-align: center;
    cursor: pointer;
    min-width: 30px;
}

.atom-group .atom-group-addon:hover {
    background-color: #f3f3f4;
}

.atom-group .atom-group-addon.all:hover,
.atom-group .atom-group-addon.left.hoverNo,
.atom-group .atom-group-addon.right.hoverNo,
.atom-group .atom-group-addon.hoverNo {
    background-color: #fff;
    cursor: default;
}

.atom-group .atom-group-addon.left {
    border-right: 0;
    border-radius: 3px 0 0 3px;
}

.atom-group .atom-group-addon.right {
    border-left: 0;
    /* 	margin-right : 5px; */
    border-radius: 0 3px 3px 0;
}

.atom-group .atom-group-addon.all,
.atom-group .atom-group-addon.all_input {
    border-left: 0;
    border-right: 0;
}

.atom-group .atom-group-addon.right.left {
    border-left: 1px solid #dbdbdb;
    border-right: 1px solid #dbdbdb;
}

.atom-group .atom-group-addon.active {
    background-color: #f3f3f4;
}

/*.atom-group >.atom-control:not(:first-child){
	border-top-left-radius : 0;
	border-bottom-left-radius: 0;
}*/

.atom-group > .atom-control.all,
.text-group .atom-control.all {
    border-radius: 0;
}

.atom-group > .atom-control.right,
.text-group > .atom-control.right {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.atom-group > .atom-control.left,
.text-group > .atom-control.left {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}


.atom-group .atom-ui-item:nth-last-child(3).atom-control,
.atom-group .atom-ui-item:nth-last-child(5).atom-control {
    border-radius: 0;
}

.atom-group .atom-group-addon.all.hover-l {
    border-left: 1px solid #dbdbdb;
}

.atom-group .atom-group-addon.all.hover-l:hover,
.atom-group .atom-group-addon.all.hover:hover {
    background-color: #f3f3f4;
    cursor: pointer;
}

.atom-group > .atom-control {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    margin-bottom: 0;
}

.atom-control {
    background-color: #fff;
    background-image: none;
    padding: 3px 12px;
}

.atom-group-prepend {
    margin-right: -1px;
    display: flex;
}

.atom-group-prepend.field_ro,
.relation-atom-icon.field_ro {
    pointer-events: none;
}

.div-ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.toStyle {
    line-height: 10px;
}

/* 02.  Relation
------------------------------------- */
.content > .relation-content {
    margin-top: 20px;
    padding: 20px;
}

.relation input, .relation input[type="text"], .relation input[type="password"], .relation input[type="email"], .relation input[type="number"], .relation textarea, .relation select {
    height: 30px;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.relation input.field_rq, .relation textarea.field_rq, .relation select.field_rq {
    border: 1px solid #dbdbdb !important;
}

.relation .grid_area .data div._r {
    color: #ff5f45;
}

.relation .grid_area .data div._g {
    color: #1ab394;
}

.relation .grid_area .data div._b {
    color: #009fde;
}

.relation .grid_area .data a {
    color: inherit;
}

.uiitem.relation {
    width: 100%;
}

.clearfix::after {
    display: block;
    clear: both;
    content: "";
}

.relation-content .grid {
    width: 100%;
    overflow-y: clip;
    background-color: #ffffff;
}

.relation-content .grid-main {
    overflow-x: auto;
}

.relation-content .grid_area {
    position: relative;
}

.grid-main > .grid-main-area {
    /* overflow: auto; */
    /*margin: 0px 20px 20px 20px;*/
    margin: 0px 1px 1px 1px; /*11.30 JW*/
    border: 1px solid #f5f5f5;
    background-color: #fff;
    /*border-top: 2px solid #efefef;
    box-shadow: 1px 1px 4px 3px #dedede*/
}

.grid-main > .grid-main-area > div.rel-middle {
    width: 100%;
    border-top: 2px solid #efefef;
}

.grid-main-area .data-area div.data {
    clear: both;
    display: flex;
    border-bottom: 1px solid #e4e8e9;
}

.grid-main-area .rel-header .fixed-columns {
    float: left;
}

.grid-main-area .rel-header .scroll-columns {
    flex: 1;
}

.grid-main-area .data-area div.data .fixed-columns {
    float: left;
}

.grid-main-area .data-area div.data .scroll-columns {
    flex: 1;
    width: 100%;
}


.grid-main-area .data-area div.data:nth-child(2n+1) {
    background: #e6e6e67d;
}

.grid-main-area .data-area .data .field .link {
    cursor: pointer;
    text-decoration: underline;
}

/*가운데 정렬 위함*/
.rel-vertical-middle {
    display: inline-block;
    content: "";
    vertical-align: middle;
}

/* 릴레이션 체크박스 높이 적용하기 위해서 주석처리함
.rel-middle-before:before {
	display:inline-block;
	content: "";
	height: 100%;
	vertical-align: middle;
} */

.rel-vertical-middle .fa {
    font-size: 14px;
    padding: 0px 3px;
}

/*Rel Top 영역*/
.rel-top {
    width: 100%;
    /* padding: 5px 6px 9px 16px; */
    background-color: #fff;
    padding: 5px 15px;
    line-height: 27px;
    /*margin-bottom: 10px;*/ /*11.30 JW*/
    /* border-top: 1px solid #d0d0d0;
    border-bottom: 1px solid #d0d0d0; */
    /*box-shadow: 0px 3px 5px 1px #dedede*/
}

.rel-top > .dev {
    width: 4%;
    color: #333333;
    min-width: 50px;
}

.rel-top > .page {
    width: 20%;
    font-weight: 600;
    font-size: 11px;
    color: #333333;
    min-width: 200px;
}

.rel-top > .pagelink {
    width: 60%;
    padding-top: 2px;
    min-width: 200px;
}

.rel-top .button {
    /*min-width: 100px;*/
    position: static;
    top: 5px;
    right: 16px;
}

/*Relation Row에 상세 필드 관련*/
.rel-row-sub {
    width: 100%;
    height: 30px;
    text-align: center;
    /* display: table; */
}

.rel-row-merge-sub {
    width: 100%;
    height: 60px;
    text-align: center;
    display: table;
}

/**/
.rel-row-sub-chk {
    height: 30px;
    text-align: center;
    display: table;
    width: 50px;
}

.rel-row-sub-data {
    text-align: center;
    /* display: table; */
}

.data.ellipse .rel-row-sub-data {
    height: 35px;
}

.rel-row-sub-nodata {
    width: 100%;
    height: 35px;
    text-align: center;
    padding: 2px 10px 0px;
    display: table;
    background: #e6e6e67d;
}

.rel-row-sub-chk-data {
    width: 50px;
    height: 35px;
    text-align: center;
    display: table;
}

/*Row Cell 영역 가운데 정렬*/
.rel-row-sub-center {
    /* display: table-cell; */
    vertical-align: middle;
    padding: 3px;
    line-height: 20px;
}

.rel-field-info {
    width: 100%;
    border-color: #dbdbdb;
    border-style: solid;
    border-width: 0px 0px 2px 0px;
    background: #fff;
    display: flex;
}

.rel-field-info > div {
    font-weight: bold;
    color: #444444;
}

.rel-bottom > div {
    width: 100%;
}

.rel-bottom > div.data {
}

.relation .data-area {
    /* overflow: hidden; */
    font-size: 0.95rem;
}

/*릴레이션 헤더 필수 필드 표시*/
.grid_header_lb_require:before {
    content: "*";
    color: red;
    margin-left: -12px;
    margin-right: 5px;
    vertical-align: middle;
}

/*합계 영역*/
.sum-grid {
    background: #ccccccbd;
    height: 40px;
}

.sum-grid > div {
    height: 100%;
}

.sum-grid > .sum-title {
}

.sum-grid > .sum-row {
    text-align: center;
    display: table;
    color: #444444;
    font-weight: 600;
    font-size: 14px;
}

.sum-grid > .sum-row > .sum-row-center {
    display: table-cell;
    vertical-align: middle;
    padding: 0px 5px;
}

.sum-grid .sum-input {
    text-align: right;
    border: 0;
    font-weight: bold;
}

.rel-header {
    padding: 0px;
}

.rel-header > div {
}

.rel-header > .root-header {
    /* border-color: #c5c5c5; */
    border-color: #e0e0e0;
    border-style: solid;
    border-width: 1px;
}

.rel-header > .sub-header {
    /* border-color: #c5c5c5; */
    border-color: #e0e0e0;
    border-style: solid;
    border-width: 1px;
}

.rel-border {
    border-right: 1px solid #e0e0e0;
}

.rel-two-header .rel-merge {
    height: 60px;
}

.root-header > .rel-row-sub {
    border-bottom: 1px solid #e0e0e0;
}

.rel-vertical-middle .jqx-grid-pager-number {
    background: #fff;
}

.rel-vertical-middle .jqx-fill-state-pressed {
    background: #fff;
    color: #444444 !important;
    border-color: #aaa;
}

#jqxWidget-page-first.rel-jqx-page-first {
    padding: 0px;
    width: 27px;
    margin: 0px 2px 0px 2px;
    float: left;
    cursor: pointer;
}

#jqxWidget-page-first.rel-jqx-page-first > div {
    width: 15px;
    height: 20px;
    margin-left: 6px;
}

#jqxWidget-page-previous {
    padding: 0px;
    width: 27px;
    height: 20px;
    margin: 0px 5px 0px 2px;
    float: left;
    cursor: pointer;
}

#jqxWidget-page-previous > div {
    width: 15px;
    height: 20px;
    margin-left: 6px;
}

#jqxWidget-page-last {
    padding: 0px;
    width: 27px;
    height: 20px;
    margin: 0px 2px 0px 5px;
    float: left;
    cursor: pointer;
}

#jqxWidget-page-last > div {
    width: 15px;
    height: 20px;
    margin-left: 6px;
}

#jqxWidget-page-next {
    padding: 0px;
    width: 27px;
    height: 20px;
    margin: 0px 2px 0px 5px;
    float: left;
    cursor: pointer;
}

#jqxWidget-page-next > div {
    width: 15px;
    height: 20px;
    margin-left: 6px;
}

.rel-pre-page {
    margin-right: 3px;
    float: left;
}

#jqxWidget-page-last.rel-jqx-page-last {
    padding: 0px;
    width: 27px;
    margin: 0px 2px 0px 2px;
    float: left;
    cursor: pointer;
}

#jqxWidget-page-last.rel-jqx-page-last > div {
    width: 15px;
    height: 20px;
    margin-left: 6px;
}

/* 02-1.  String.TextArea
------------------------------------- */
.relation textarea {
    height: 30px !important;
}

.atom-textarea .textarea {
    padding-left: 0px;
    padding-right: 10px;
}

.atom-textarea .popup {
    height: 30px;
}

/* 02-2.  String.Email
------------------------------------- */
.atom-string-email #at {
    cursor: default;
}

/* 02-3.  Boolean.Radio
------------------------------------- */
.atom-boolean-radio .radioboxes > label {
    font-size: 12px !important;
    line-height: 18px !important;
    margin-right: 10px;
}

/* 02-4.  String.Text.IP
------------------------------------- */

.atom-textIp .text-ip {
    display: inline-block;
    /* width: 22%; */
    width: 40px;
}

.atom-textIp .ip-dot {
    font-size: 20px;
    font-weight: 600;
    padding-top: 5px;
    padding-left: 1px;
    padding-right: 1px;
}

/* 02-5.  String.Single.File
------------------------------------- */
.atom-string-single-file {
    justify-content: center;
}

/* 02-6.  String.Multi.File
------------------------------------- */
.atom-string-multi-file {
    justify-content: center;
    align-content: center;
    flex-direction: column;
}

.atom-string-multi-file .row {
    display: flex;
}

.atom-string-multi-file .cell {
    display: flex;
}

.atom-string-multi-file .cell .list-box-icon {
    font-size: 20px;
}

/* 02-7.  String.Multi.Emp
------------------------------------- */
.atom-string-multi-emp {
    justify-content: center;
    align-content: center;
    flex-direction: column;
}

.atom-string-multi-emp .row {
    display: flex;
}

.atom-string-multi-emp .cell {
    display: flex;
}

.atom-string-multi-emp .cell .list-box-icon {
    font-size: 20px;
}

/* 03-1. Entity.Employee, Code.Search.Select
------------------------------------- */
/*.relation .entity_detail_info {
	transform : none;
	-ms-transform: none;
}

.relation .entity_detail_info:after {
	transform : none;
	-ms-transform: none;
	content:"\f0d8";
	top: -13px;
	left: 10%;
}*/

.entity_detail_info {
    position: absolute;
    left: 0px;
    top: -67px;
    font-size: 12px;
    font-weight: normal;
    /*
    transform: translate(-50%, calc(-100% - 20px));
    -ms-transform: translate(-50%, -100%);
    */
    background: #333;
    color: #fff;
    padding: 5px 10px;
    max-width: 200px;
    cursor: pointer;
    z-index: 1;
    border-radius: 4px;
    line-height: 19px;
    transition: all 0.3s;
}

.entity_detail_info:after {
    font-family: "FontAwesome";
    content: "\f0dd";
    position: absolute;
    bottom: 3px;
    left: 15%;
    font-size: 22px;
    color: #333;
    transform: translate(-50%, 50%);
}

.emp_detail_info2 {
    width: 100%;
    border: 1px solid #dbdbdb;
    height: 88px;
    background-color: #fff;
    border-top: none;
    padding: 4px 10px;
    font-size: 12px;
}


.entity_detail_info3 {
    position: absolute;
    left: 50%;
    top: 33px;
    font-size: 12px;
    font-weight: normal;
    transform: translate(-50%, calc(-100% - 20px));
    -ms-transform: translate(-50%, -100%);
    background: #333;
    color: #fff;
    padding: 5px 10px;
    max-width: 200px;
    cursor: pointer;
    z-index: 1;
    border-radius: 4px;
    line-height: 19px;
    transition: all 0.3s;
}

/*
* 화살표 없는 info box
**/
.relation .detail_info {
    transform: none;
    -ms-transform: none;
}

.relation .detail_info:after {
    transform: none;
    -ms-transform: none;
    top: -13px;
    left: 10%;
}

.detail_info {
    position: absolute;
    left: 0px;
    top: -87px;
    font-size: 13px;
    font-weight: normal;
    background: #333;
    color: #fff;
    padding: 13px 15px;
    min-width: 200px;
    max-width: 200px;
    cursor: pointer;
    z-index: 1;
    border-radius: 4px;
    line-height: 19px;
    transition: all 0.3s;
}

.detail_info:after {
    position: absolute;
    bottom: 3px;
    left: 15%;
    font-size: 22px;
    color: #333;
    transform: translate(-50%, 50%);
}

.jqx-tooltip .jqx-fill-state-normal {
    text-align: left;
    background: #333;
    color: #fff;
    border: 0;
    font-size: 12px;
    font-weight: 300;
    line-height: 19px;
}

/********************************/

.search_emp_ui,
.search_code_ui {
    position: absolute;
    border: 1px solid #999999;
    background: #fff;
    top: 29px;
    right: 0;
    z-index: 10;
    padding: 0;
}

.search_code_ui {
    width: 98%;
    top: 34px;
    right: 6px;
}

.searchEmp .divTable {
    display: table;
    width: 100%;
    padding: 0px 3px 3px;
}

.searchEmp .divTableRow {
    display: table-row;
}

.searchEmp .divTableCell {
    display: table-cell;
    padding: 3px 10px;
    font-size: 12px;
}

.searchEmp .divTableCell a {
    text-decoration: underline;
}

.searchEmp .divTableBody {
    display: table-row-group;
}

.emp_form_header,
.search_code_header {
    text-align: right;
    background: #293846;
    padding-right: 6px;
    z-index: 10;
}

.emp_form_header span,
.search_code_header span {
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    padding-right: 5px;
}

.search_code_content {
    padding: 4px;
    width: 100%;
    overflow-y: scroll;
}

.searchEmp .divTableRow > div.divTableCell:nth-child(1),
.searchEmp .divTableRow > div.divTableCell:nth-child(4),
.searchEmp .divTableRow > div.divTableCell:nth-child(5) {
    width: 20%;
}

.searchEmp .divTableRow > div.divTableCell:nth-child(2) {
    width: 25%;
}

.searchEmp .divTableRow > div.divTableCell:nth-child(3) {
    width: 15%;
}

.divTableRow.header > div.divTableCell {
    border-top: 2px solid #999999;
    background: #fff;
    color: #444;
    font-weight: bold;
}

.searchEmp .divTableBody > div.divTableRow:nth-child(even) {
    background: #e6e6e67d
}

.searchEmpCntNo {
    background: #f3f3f3;
    text-align: center;
    padding: 10px;
}

.searchEmp h5 {
    padding: 0 10px;
    font-weight: bold;
    margin-top: 10px;
}

.searchEmp input {
    margin-top: 3px;
}

/*03-2. Code.Radio
------------------------------------- */
.radioboxes_border {
    border: 1px solid #e0e0e0;
    padding: 10px;
    margin-bottom: 10px;
}

.radioboxes.code label {
    line-height: 12px;
}

.radioboxes.code label span {
    color: #1e1e1e;
}

/* 03-3. Entity.CM.Multi
------------------------------------- */
.cmMultiSelect {
    float: left;
    border: 1px solid #dbdbdb;
    padding: 2px 10px;
    border-radius: 4px;
    margin-left: 4px;
    cursor: pointer;
}

.cmMultiSelect02 {
    float: right;
    border: 1px solid #dbdbdb;
    padding: 0px 5px;
    border-radius: 4px;
    margin: 0 2px;
    cursor: pointer;
    width: 23px;
    text-align: center;
}

.cmMultiSelect:hover,
.cmMultiSelect02:hover {
    background: #293846;
    color: #fff;
}

.cmMultiBox {
    border: 1px solid #dbdbdb;
    padding: 2px 10px;
    border-radius: 4px;
    margin-left: 4px;
    overflow: auto;
}

.cmMultiBox_ro {
    border: 1px solid #dbdbdb;
    background-color: #fafafa;
}

.cmMultiInlineTitle {
    display: inline-block;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}


/* 03-4. String.jqxEditor
------------------------------------- */
.jqxEditor_ro {
    padding: 0 10px !important;
    min-height: 100px;
    color: #2a2a2a !important;
    font-size: 13px;
}

/* 03-5. Date.TM.ST.ET
------------------------------------- */
.tmLine {
    float: right;
    padding: 0 10px;
    border-right: 0;
    border-left: 0;
    font-weight: bold;
}

/* Grid ToolTip
------------------------------------- */
.relation .rel-tooltip {
    position: absolute;
    display: none;
    transition: all 0.15s ease;
    padding: 5px;
    transition: bottom .3s ease-in-out, opacity .3s ease-in-out;
    background-color: rgba(0, 0, 0, 0.8);
    box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
    border-radius: 5px;
    color: #FFFFFF;
    font-size: 12px;
    z-index: 1;
}

.relation .rel-tooltip > a {
    color: #FFFFFF !important;
}

/* 03-6. String.Multi.CheckBox
------------------------------------- */
.checkboxes.multi label span {
    color: #333333;
    font-size: 13px;
}

/* sla indicator atom css */
.no-padding {
    padding: 0 !important;
}

.indicator-atom {
    width: 100%;
}

.indicator-atom .item {
    padding-bottom: 5px;
    align-items: center;
}

.indicator-atom .item-box {
    display: flex;
}

.indicator-atom .item > div,
.indicator-atom .item-box > div {
    margin: 0px 5px;
}

.indicator-atom .item > div:first-child,
.indicator-atom .item-box > div:first-child {
    margin-left: 0px;
}

.indicator-atom .item > div:last-child,
.indicator-atom .item-box > div:last-child {
    margin-right: 0px;
}

.indicator-atom span.label {
    font-weight: 600;
}

.indicator-atom .item-title {
    width: 110px;
}

.indicator-atom .full-width {
    flex: 1;
}

.indicator-atom input[type=checkbox] + label {
    margin-right: 0px;
    vertical-align: middle;
}

.indicator-atom input[type=radio] + label {
    line-height: 12px;
}


/* 03-7. String.File
------------------------------------- */

.inner-booking-list.file {
    height: 100%;
}

.inner-booking-list.file a.rate-review {
    border-radius: 20px;
    padding: 0px 10px;
    margin: 10px 5px;
    cursor: pointer;
}

.inner-booking-list.file a.rate-review:hover {
    color: #fff;
}

.inner-booking-list.file a.rate-review.color-red:hover {
    background-color: #ff5f45;
}

.inner-booking-list.file .list-box-icon.fa.fa-paperclip {
    height: 38px;
    width: 38px;
    color: #777;
    text-align: center;
    line-height: 37px;
    border-radius: 50%;
    transition: 0.3s;
    display: inline-block;
    background-color: #eee;
}

/* 03-8. Custom.History
------------------------------------- */
.history-control-section {
    width: 100%;
    margin-bottom: 5px;
}

.history-edit-section {
    width: 100%;
}

.history-written-section {
    width: 100%;
    margin-top: 2px;
}

.history-written-section .written-box {
    border: 1px solid #dbdbdb;
    background-color: #f9f9f9;
    margin-bottom: 2px;
}

.history-info {
    background-color: #dbdbdb;
}

.history-value {
    white-space: pre-wrap;
    word-break: break-all;
}

.history-info,
.history-value {
    padding: 0px 5px;
}

.history-written-section .written-box.selected {
    border: 1px solid #1ab394;
    background-color: #FFFFFF;
}

.written-box.selected .history-info {
    background-color: #1ab394;
}

.history-icon {
    cursor: pointer;
}

.history-icon:hover {
    color: #777777;
}

/*03-9. Custom.Employees*/
.customEmpMultiData {
    display: inline-block;
    padding-right: 10px;
}

.customEmpMultiSelect {
    float: right;
    border: 1px solid #dbdbdb;
    padding: 0px 5px;
    border-radius: 4px;
    margin: 0 2px;
    cursor: pointer;
    width: 23px;
    text-align: center;
}

.customEmpMultiSelect:hover {
    background-color: #f3f3f4;
}

.customEmpMultiInlineTitle {
    display: inline-block;
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* 04. Autocomplete
------------------------------------- */
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
    border: 1px solid #1ab394;
    background: #1ab394;
    font-weight: 600;
    color: #fffff;
}

.ui-widget.ui-widget-content {
    border-radius: 0px;
}

/* 05. searchList
------------------------------------- */
ul.atom-search-list-box {
    position: absolute;
    z-index: 999;
    background-color: #fff;
    border: 1px solid #dbdbdb;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    display: inline-block;
    margin: 0px;
    padding: 0px;
    border-top: 0px;
    box-shadow: 0 0 8px rgb(0 0 0 / 30%);
}

ul.atom-search-list-box.up {
    bottom: 32px;
    border-bottom: 0px;
    border-top: 1px solid #dbdbdb;
    box-shadow: 0 0 8px rgb(0 0 0 / 30%);
}

ul.atom-search-list-box > li {
    border: 1px solid #fff;
    padding: 0px 5px;
    list-style: none;
    font-weight: normal;
    cursor: default;
    line-height: 27px;
}

ul.atom-search-list-box > li:hover,
ul.atom-search-list-box > li.selected-item {
    border-color: #1ab394;
    background-color: #1ab394;
    color: #ffffff;
}

/* multi */
.multi-atom-wrap {
    margin-top: -2px;
    display: flex;
}

ul.atom-search-list-box.multi > li.choose-item {
    border-color: #ffffff;
    background-color: inherit;
    color: #d4d4d4;
}

.multi-atom-wrap ul.atom-search-list-box {
    top: 32px;
}

.selected-items {
    min-height: 32px;
    border-radius: 3px;
    padding: 1px;
    margin: 0 0px 1px 0px;
    border: 1px solid #dadada;
}

.selected-items .item {
    background-color: #1ab394;
    padding: 0px 5px;
    margin: 2px 1px;
    border-radius: 5px;
    color: #fff;
    display: inline-block;
    cursor: default;
}

/* 06. addAssigner
------------------------------------- */
.add-assign .assigner-list {
    width: 100%;
    text-align: left;
}

.assigner-list > .assigner {
    display: inline-block;
    border: 1px solid #dbdbdb;
    padding: 0px 5px;
    margin-right: 10px;
    margin-top: 5px;
    border-radius: 4px;
    cursor: default;
}

.assigner-list > .assigner:hover {
    background-color: #f3f3f4;
}

.assigner > span.title {
    margin-right: 5px;
}

.assigner > i {
    cursor: pointer;
}

.relation-atom .content-box {
    flex: 1;
    background: #ffffff;
    border: 1px solid #dbdbdb !important;
    padding: 1px 0 0;
}

.relation-atom .text-ip {
    flex: 1;
}

.file-group {
    list-style: none;
}

.file-group .file-item {
    position: relative;
}

.file-group .file-item .atom-file-info {
    width: calc(100% - 37px);
}

.file-group .file-item .file-info {
    padding-right: 50px;
}


.file-group .file-item .file-controls {
    position: absolute;
    top: 5px;
    right: 0;
}

.custom-submit-section {
    margin-bottom: 10px;
}

/* 07. SelectAdress
------------------------------------- */
.inAdressValue:hover, .outAdressValue:hover {
    background-color: #f3f3f4;
    cursor: pointer;
}


/* 08. JSON.Point2.Convert
------------------------------------- */
.jsonPointConvert .cvrt-value {
    max-height: 250px;
    overflow: auto;
}

.jsonPointConvert .cpoint_rows {
    display: flex;
    border-bottom: 1px solid #f5f5f5;
    padding: 5px 0px 5px 0px;
}

.jsonPointConvert .grade-point, .grade-cvrt, .grade-header {
    display: flex;
    border-bottom: 1px solid #f5f5f5;
    height: 40px;
    align-items: center;
}

/* atom-signature-pad */
.atom-signature-pad .atom-button {
    min-height: 32px;
    line-height: 30px;
    outline: none;
    font-size: 13px;
    color: #2a2a2a;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #dbdbdb;
    width: 100%;
    text-align: center;
    margin-top: -1px;
    border-radius: 0px 0px 3px 3px;
    padding: 0 5px;
    cursor: pointer;
}

.atom-signature-pad .atom-button:hover {
    background-color: #fafafa;
}

/* customCodeMulti */
.checkbox-modal-wrap {
    padding: 15px;
    height: 100%;
}

.checkbox-modal-wrap input[type="checkbox"] + label,
.atom-custom-code-multi input[type="checkbox"] + label {
    width: 140px;
    vertical-align: top;
}

/* Activity */

/*
	업무 내용 atom
*/
.activityArea {
    width: 100%;
}

.register {
    margin-bottom: 100px;
}

.wh-input2 {
    resize: none;
}

.activity-box {
    margin-bottom: 15px;
}

.fa-solid {
    cursor: pointer;
}

.actAddBtn {
    margin-bottom: 20px;
    border: 0;
    cursor: pointer;
    background-color: #4E89AE;
    color: #fff;
    border-radius: 3px;
    font-size: 15px;
    padding: 5px 10px;
}


.reUpdateBtn {
    display: none;
}

.cancelBtn {
    display: none;
}

.update-textarea {
    display: none;
    margin: 10px 0 10px 0;
    resize: none;


}

.update-textarea-post {
    display: none;
    margin: 10px 0 10px 0;
    resize: none;
}


.hist-contents2 {
    white-space: pre;
}

.btn-modal {

    display: none;
    /* display: flex;
    flex-direction: column; */
    margin-top: 10px;


}

.fa-regular {
    cursor: pointer;
}

.first {
    display: flex;
    justify-content: space-between;
    padding: 10px;
}

.f-left > span {
    padding: 5px;
    margin-right: 30px;
}

.content-box {
    padding: 10px 10px 40px 10px;
    border-bottom: 1px solid #908f8f;
}


#reply {
    width: 680px;
    border: 2px solid rgb(188, 184, 184);
    border-radius: 10px;
    margin-right: 23px;
    margin-left: 10px;
    margin-top: 15px;
    margin: 15px 23px 15px 10px;
    padding-left: 5px;

}

#reply-register {
    border: 0;
    width: 50px;
}

.reply-box {
    display: none;
    margin-bottom: 15px;
    margin-left: 5px;


}

.reply-content {
    display: flex;


    padding-bottom: 10px;
    margin: 10px;
    border: 2px solid rgb(64, 145, 231);
    border-radius: 5px;

}

.left-con {
    white-space: pre;
}

.replies {
    display: flex;

    padding-bottom: 10px;
    margin: 10px 10px 20px 50px;
    border: 2px solid rgb(180, 208, 237);
    border-radius: 5px;


}

.replies-area {
    display: none;
    margin-top: 10px;
    align-items: center;
    gap: 5px;
}

.replies-area .input-replies {
    height: 40px;
    background-color: #dbdbdb;
    border-radius: 25px;
    text-align: left;
    font-size: 0.9rem;
    text-indent: 10px;
    margin: 0;
    border-radius: 10px;
}

.replies-area .input-replies:focus {
    background-color: #fff;
}

.replies-btn {
    border: 0;
    background-color: #30475E;
    color: #fff;
    width: 44px;
    height: 40px;
    border-radius: 10px;
}

.replies-btn:hover {
    background-color: #dfe7eb;
}


.activityArea .left {
    display: flex;
    flex-direction: column;
    flex-basis: 70%;
    padding: 10px;

}


.activityArea .right {
    display: flex;
    flex-direction: column;
    flex-basis: 30%;
    padding: 10px;
}

.btn-area {
    display: flex;

}

.btn-area button {
    border: 0;
    background-color: white;

}

.btn-area button:hover {
    background-color: #dfe7eb;

}

.reply-update {
    width: 40px;
    height: 30px;
    border: 0;

    margin-right: 5px;

}

.reply-delete {
    width: 40px;
    height: 30px;
    border: 0;

    margin-right: 5px;
}

.reply-reUpdate {
    width: 70px;
    height: 35px;
    margin-top: 43px;
    border: 0;

    display: none;
}

.reply-replies {
    width: 40px;
    height: 30px;
    border: 0;
}

.alarm {
    border: 1px solid black;
    width: 50px;
    height: 50px;
}

.ck.ck-editor {
    height: 100%;
    overflow: hidden;
}

.ck.ck-editor__main {
    height: 100%;
    padding-top: 40px;
    margin-top: -40px;
    overflow: auto;
}

.ck.ck-editor__editable_inline {
    height: 500px;
}

.ck.ck-content {
    /*max-width: 1280px;*/
    margin: auto;
    border-color: transparent !important;
}

/* 업무 목록 css */

.actDataList {
    border: 1px solid #cfcfcf;
    border-radius: 3px;
    padding: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.actDataList .item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-bottom: 20px;
}

.actDataList .item-body {
    font-size: 0.9rem;
    max-width: 900px;


    overflow: hidden;
    text-overflow: ellipsis;

    line-height: 1.5;
    /* 요소의 표시 방법을 -webkit-box로 표시 */
    display: -webkit-box;
    /* webkit-box로 표시된 자식 요소들의 배치 방법 결정 (여기서는 수직) */
    -webkit-box-orient: vertical;
    /* 요소 내 텍스트를 지정한 라인수까지만 표시 */
    -webkit-line-clamp: 4;


}


.item-top .userArea {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    line-height: 1.4;
}

.item-top .userArea .profile {
    display: block;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    overflow: hidden;
}

.item-top .userArea .profile img {
    width: 100%;
    height: 100%;
}

.item-top .userArea .date {
    display: block;
    font-size: 0.8rem;
    color: #888;
}

.item-top .userArea .mod-dttm,
.comment-list .comment-item .mod-dttm {
    display: inline-block;
    margin-left: 5px;
    background-color: #e9e9e9;
    border-radius: 15px;
    padding: 2px 7px 0;
}

.item-top .userArea .mod-dttm,
.comment-list-replies .comment-item-replies .mod-dttm {
    display: inline-block;
    margin-left: 5px;
    background-color: #e9e9e9;
    border-radius: 15px;
    padding: 2px 7px 0;
}

.menuBtn button {
    border: 0;
    background: transparent;
}

.menuBtn .reUpdateBtn {
    border: 0;
    background: transparent;
}

.menuBtn button .hide-menu-btn {
    display: block;
}

.hide-menu-box {
    display: none;
    width: 150px;
    font-size: 0.9rem;
    position: absolute;
    top: 30px;
    right: 10px;
    border-radius: 5px;
    background: #fff;
    border: 1px solid #e5e5e5;
    box-shadow: 1px 1px 0px rgb(0 0 0 / 8%);
    z-index: 102;
    padding: 5px;
}

.hide-menu-box a {
    display: block;
    color: #222;
    text-align: left;
    padding: 3px !important;
    border-radius: 3px;
    margin: 3px 0;
    transition: all 0.2s ease;
}

.hide-menu-box a:hover {
    color: #30475E;
    background-color: #dfe7eb;
}

.menuBtn .hide-menu-box {
    display: none;
    width: auto;
    min-width: 60px;
}

.menuBtn .hide-menu-box a {

    text-align: center;
    cursor: pointer;
    text-decoration: none;
}

.comment-box {
    margin-top: 20px;
    display: none;
}

.comment-write {
    display: flex;
}


.comment-register {
    width: 62px;
    height: 44px;

    margin-left: 20px;

    border: 0;
    border-radius: 3px;
    background-color: #30475E;
    color: white;

}


/* 댓글 작성 input */
.comment-btn-area {
    border: 2px solid #dfe7eb;
    margin-bottom: 10px;

    width: 80%;

    background-color: #e6f0f9;


    text-align: left;
    font-size: 0.9rem;
    text-indent: 10px;
    overflow: auto;
}

.comment-btn-area button:hover {
    border-color: #30475E;
    background-color: #fff;
}

.comment-list {
    /* display: none; */
}

.comment-list .comment-item {
    display: flex;
    gap: 15px;
    margin-top: 15px;
    padding: 15px;
    background-color: #f3f3f3;
    border-radius: 3px;
    font-size: 0.9rem;
}

.comment-list .comment-item-replies {
    display: flex;
    gap: 15px;
    margin: 10px 0 10px 50px;
    padding: 15px;
    background-color: #f1f1f1;
    border-radius: 3px;
    font-size: 0.9rem;
}

.comment-area {
    flex: 1;
    padding-top: 10px;
}

/* .comment-txt{
	white-space: pre;
} 화면 깨져서 삭제*/

.comment-list .comment-item .user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: 10px;
}

.comment-list .comment-item-replies .user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: 10px;
}

.comment-list .comment-item .profile {
    display: block;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    overflow: hidden;
}

.comment-list .comment-item-replies .profile {
    display: block;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    overflow: hidden;
}

.comment-list .comment-item .profile img {
    width: 100%;
    height: 100%;
}

.comment-list .comment-item-replies .profile img {
    width: 100%;
    height: 100%;
}

.comment-list .comment-item .date {
    display: block;
    text-align: right;
    font-size: 0.8rem;
    color: #888;
}

.comment-list .comment-item-replies .date {
    display: block;
    text-align: right;
    font-size: 0.8rem;
    color: #888;
}

.comment-list .comment-item .date:before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #4E89AE;
    margin: 0px 7px 2px 0;
}

.comment-list .comment-item-replies .date:before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #4E89AE;
    margin: 0px 7px 2px 0;
}

/* 게시글 업데이트 등록 영역 */
.post-register-btnArea {
    display: flex;
    float: right;

    margin-top: 10px;
}

/* 업데이트 작성 input */
.update-input-area {
    width: 100%;
}

.update-input-area input:hover {
    border-color: #30475E;
    background-color: #fff;
}

.update-input-area input {
    border: 2px solid #dfe7eb;
    background-color: #dfe7eb;
    margin-bottom: 50px;
    border-radius: 40px;
    width: 100%;
    text-align: left;
    font-size: 0.9rem;
    text-indent: 10px;
    cursor: pointer;
}

/* ckeditor */
.uiitem.atom.ckeditor {
}

/* ckeditor, 업데이트등록 버튼 컨테이너 */
.ckEditorBox {
    display: none;
    margin-bottom: 50px;

    width: 100%;
}

/* Read More 버튼 div */
.more-btn-area {
    display: flex;
    justify-content: center;
    position: relative;
}

.more-btn-area:before {
    content: '';
    position: absolute;
    top: -90px;
    left: 0;
    width: 100%;
    height: 90px;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff 70%);
}

.more-btn-area._open:before {
    display: none;
}

/* Read more button */
.more-btn {
    border: 2px solid #30475E;
    background-color: #fff;
    border-radius: 20px;
    color: #30475E;
    font-size: 0.9rem;
    padding: 0 10px;
}

.more-btn:hover {
    background-color: #30475E;
    color: #fff;
}

/* 접기 버튼 div */
.hide-btn-area {
    display: flex;
    justify-content: center;
}

/* 접기 버튼 */
.hide-btn {
    display: none;
    border: 0;
    background-color: white;
    color: #858585;
}

.hide-btn:hover {
    color: #30475E;
}

/* Like, comment 영역 */
.like-comment-area {
    display: flex;
    margin: 20px 0 10px 0;
    gap: 5px;
    position: relative;
    justify-content: flex-end;
}

/* like */
.like-area,
.reply-area {
    display: flex;
    flex: 0 0 120px;
    font-size: 0.95rem;
    cursor: pointer;
    justify-content: center;
    border: 1px solid #e5e5e5;
    background-color: #f3f3f3;
    border-radius: 5px;
    color: #7f7e7e;
    padding: 0 10px;
}

.like-area {
    padding-right: 0px;
}

.like-area:hover,
.reply-area:hover {
    background-color: #dfe7eb;
    border-color: #dfe7eb;
    color: #30475E;
}


.like-area > :nth-child(1) {
    display: flex;
    flex-basis: 80%;

    justify-content: center;
}

.like-area > :nth-child(2) {
    display: flex;
    flex-basis: 20%;
    margin-left: 5px;
    justify-content: center;
}

.like-area span {
    margin-right: 5px;
}

.empty-like {
    margin-top: -2px;
}

.like-user-area .like-counts {
    color: #3788d8;
}

/* Reply */
.comment-icon {
    margin-right: 5px;
}

/* 댓글 개수 */
.reply-count {
    margin-left: 5px;
}

/* 캡쳐사진 첨부 시 엑박 부모요소 숨기기 */
.ck-widget__type-around {
    display: none;
}

/* 사진만 첨부시 공백부분 가려주기 */
.ck-reset_all.ck-widget__resizer {
    display: none;
}

/* comment up 버튼 div */
.comment-up-area {
    display: none;
    justify-content: flex-end;
    margin-top: 10px;
    width: 100%;
}

.comment-up-area span {
    margin: 5px 0 5px 0px;
    color: #7f7e7e;
}

/* 누른 좋아요 아이콘 */
.full-like {
    display: none;
}

/* 좋아요 버튼 영역 */
/* .like-count-area {
    margin-left: 60px;
} */

/* 좋아요 인원 영역 */
.like-user-area {

}

/* 좋아요 한 사람 영역 */
.userName-area {
    border: 1px solid #cfcfcf;
    border-radius: 5px;
    background-color: #fff;
    width: 150px;
    /*height: 200px;*/
    position: absolute;
    top: 30px;
    right: 95px;
    z-index: 999;

    overflow: auto;

    display: none;
    flex-direction: column;
}

/* 좋아요 누른사람 한 줄 영역 */
.likedUser-area {
    display: flex;

    margin: 5px 0 5px 0;

}

.likedUser-area img {
    width: 30px;
    height: 30px;

    margin: 3px 10px 3px 10px;
}

.userName {
    margin-top: 5px;
    font-size: 0.9rem;
}

/* 좋아요 리스트 버튼 */
.userList-btn {
    border: 0;
    border-radius: 3px;

    background-color: white;
}

.userName-close {
    display: none;

    position: absolute;
    top: 30px;
    left: 580px;
}

/* 언급 시 color 입히기 */
.ck-mention {
    background-color: rgb(241, 213, 213);
}

/* comment-textarea */
.comment-textarea {
    height: 75px;
    width: 100%;
}