/* argon overwrite */
:root
{
    --primary: #455CC9;
    --primary-hover: #2942B7;
    --sky: #5E94E4;
    --sky-hover: #4079CF;
    --yellow:#F0B51D;
    --yellow-hover:#CD9503;
    --green:#27a16c;
    --green-hover:#198556;
    --pupple:#AE77F5;
    --pupple-hover:#844ECB;
    --orange:#E38B5A;
    --orange-hover:#D8753D;
    --red:#EB5050;
    --gray:#525F7F;
    --gray-light:#8898AA;
    --gray-dark:#565656;
    --pink:#F577E8;
    --body-color:#525F7F;
    --title-color:#172b4d;
    --secondary:#8090b7;
    --secondary-hover:#6d7c9f;
    --border:#e9ecef;
}
.pb-0, .py-0 {padding-bottom: 0 !important;}
.ml--5{margin-left:-2.5rem !important}
pre, code, kbd, samp{font-family:'Pretendard', 'Malgun Gothic', 'Apple SD Gothic Neo', 'Dotum', sans-serif}
.paginate_button a:not([href]) {
    text-decoration: none;
    color: #8898aa;
}
html {
    scrollbar-gutter: stable; /* 스크롤바 공간 예약 */
}
html::-webkit-scrollbar {
    width: 16px; /* 스크롤바 너비 */
}
html::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2); /* 스크롤바 색상 (투명도 적용) */
    border-radius: 8px; /* 둥근 모서리 */
}
html::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.4); /* hover 시 진한 색 */
}
html::-webkit-scrollbar-track {
    background-color: transparent; /* 스크롤바 트랙을 투명하게 */
}
.send-btn-group .btn:not(:last-child){margin:0}
textarea#msgDesc[readonly]{background-color: #ffffff; border: none;color: var(--title-color); font-size: 15px;resize:none}
textarea#msgDesc[readonly]:focus{box-shadow: none;}
/*=================================================================================================
 * HTML 태그
=================================================================================================*/
body {font-family:'Pretendard', 'Malgun Gothic', 'Apple SD Gothic Neo', 'Dotum', sans-serif; background:#fff; color:var(--body-color)}
iframe{display: block; border:none; height:100%; width:100%;}

/* 인풋 number 버튼삭제 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {-webkit-appearance:none; margin:0;}
input[type=text]::-ms-clear{display: none;}  /* IE10이상 x표시 제거 */
.custom-toggle-slider{min-width: 60px;}
.custom-toggle input:checked + .custom-toggle-slider:before{transform: translateX(34px);}
.custom-toggle input:checked + .custom-toggle-slider:after{left: 3px;}
a {color:var(--body-color)}
em {font-style:normal; color:var(--primary);}

/*=================================================================================================
 * 레이아웃
 - wrapper 1260 작업 시 스크롤 x:최소 해상도 1280px에서 스크롤이 발생하지 않도록 최소 너비는 스크롤바 너비를 제외한 1260px로 해야함
 - min-height 사용 이유:height 사용시 자식 height가 최대 100vh, 자식의 높이가 더 커질 경우 부모가 감쌀 수 없다
 - float 해제 방법:부모 element에 "overflow:hidden;" 추가 또는:after 요소를 활용하여 "clear:both;" 추가하여 float를 해제
 - 현재는 main-panel에 float:left; 를 삭제해서 float 해제 불필요
=================================================================================================*/
/********************* 메인 레이아웃 */
.wrapper {min-width:1260px; max-width:none !important; position:relative; top:0; min-height:100vh; padding-left:220px;transition: padding-left 0.3s ease;background:white;}

/********************** 왼쪽 메뉴 영역 */
.sidebar {position:fixed; top:0; bottom:0; left:0; z-index:50; width:220px; background:#fff; border:none;transition: width 0.3s ease;box-shadow: 0 0 2rem 0 rgba(136, 152, 170, 0.35);}
.sidebar .sidebar-wrapper {position:relative; height:100vh; overflow-y:auto ; overflow-x:hidden;  z-index:4;}
.sidebar .left-menu-btn{
    color: var(--sky);
    padding:0;
    width:40px;
    height:40px;
    font-size:16px;
    margin:5px 0 !important;
    &:hover{
        color: var(--sky-hover);
        background: #f6f6f6;
        box-shadow: none;
    }
    &:focus{
        box-shadow: none;
    }
    &:active{
        box-shadow: none !important;
    }
}
.sidebar .sidebar-wrapper::-webkit-scrollbar {width:10px;}
.sidebar .sidebar-wrapper::-webkit-scrollbar-thumb {background-color:#8898aa; border-radius:10px;}
.sidebar .sidebar-wrapper::-webkit-scrollbar-track {background-color:#adb5bd; border-radius:10px;}

.navbar-vertical .navbar-nav {margin:0;background:#fff;}
.navbar-vertical .navbar-nav .nav-item{border-bottom:1px solid #E8E8E8}
.navbar-vertical .navbar-nav .nav-item.active {background-color: #F6F7FF;}
.navbar-vertical .navbar-nav > .nav-item:first-child{border-top:1px solid #E8E8E8}
.navbar-vertical .navbar-nav > .nav-item .nav-item:last-child{border-bottom:0}
.navbar-vertical .navbar-nav .nav-link[data-toggle='collapse']:after{color: #626366;}
.navbar-vertical .navbar-nav .nav-link[data-toggle='collapse'][aria-expanded='true']:after{color: #626366;}
.navbar-vertical .navbar-nav .nav-link.active[data-toggle='collapse']:after{color: var(--primary);}

.navbar-vertical .navbar-nav .nav-link, .navbar-vertical .navbar-nav .nav-sm .nav-link, .navbar-vertical .navbar-nav .nav-link > i{font-size:16px;}
.navbar-vertical .navbar-nav .nav-item.active .show.on {background: rgb(237,239,250);background: linear-gradient(90deg, rgb(230 234 255) 1%, rgb(0 39 255) 100%);}
.navbar-vertical .navbar-nav .nav-item.active .nav-link.active{color:var(--primary);font-weight:700;}
.navbar-vertical .navbar-nav .nav-item.active .show.on .nav-link {position: relative;color:white;padding-left: 27px;background-color: var(--primary);margin-left: 20px;border-radius: 10px 0 0 10px;}
.navbar-vertical .navbar-nav .nav-item.active .show.on .nav-link::before {
    content:"";
    position: absolute;
    top: calc(50% - 7.5px);
    left: 10px;
    display: block;
    width: 6px;
    height: 15px;
    border-radius: 30px;
    background-color: #fff;
}
.navbar-vertical .navbar-nav .nav-item:hover > .nav-link{background-color: #F6F7FF;}
.navbar-vertical .navbar-nav .nav-item li:hover{background-color: #F6F7FF;}
.navbar-vertical .navbar-nav .nav-item.active li:hover{background-color: #DFE3FF;}
.navbar-vertical .navbar-nav .nav-item.active a:hover{color:var(--primary);}
.sidebar .nav-link {padding:.675rem 1.5rem; font-weight:500; color:#666;font-size:16px;}
.logo-area{display:flex;padding:1rem 10px;}
/* .sidebar .navbar-brand {padding:1.5rem;}
.sidebar .navbar-brand-sm{padding:1rem 10px;} */
.navbar-vertical .navbar-brand-img, .navbar-vertical .navbar-brand>img {max-width:100%; max-height:3rem;margin-left:10px;}


/********************** TOP 메뉴 영역 */
.logout-box{top: 10px; left: 0; right: 0; position: absolute;}
.logout > * {position:relative; display:inline-block; margin-left:14px; vertical-align:middle;}

/********************** 컨텐츠 영역 */
.main-panel {position:relative;}

/* headerTop 없을 경우 대응 1.5rem -> .1rem 2020.10.26*/
.main-panel > .container-fluid {margin-top:0 !important; padding-left:15px; padding-top:0 !important;}
.card {box-shadow:none; border:none; margin-bottom: 30px;}  /* IE-border,margin-bottom */
.card-header {padding: 0;border:0}
.container > .card .card-header{padding-bottom:10px;}

.container > .card > .card-header > .row{margin:0}
.card-header h3, .card-header h5 {font-size:1.375rem;position:relative;}
.card-header h3{padding-left:15px;}
.card-header h3::before{
    content: '';
    position: absolute;
    left: 0;
    top: calc(50% - 10px);
    width: 6px;
    height: 18px;
    border-radius: 30px;
    background: var(--gray);
}
.card-body {padding:0;}
#send-info-div .input-group > .custom-control-inline, #email-contents-div .form-input > .custom-control-inline{ top:3px }

/* pannel */
.pannel .card {background-color: transparent;}
.pannel .gridWrap .table,
.pannel .custom-form .form-group {background-color:#fff;}

/* 하단 버튼 영역 */
.card-footer.btn_area, .btn_area {text-align:center; border-top:none;}
.card-footer.btn_area .col {text-align:left;}
.card-footer.btn_area .col:last-child {text-align:right;}
.card-footer.btn_area .col:only-child {text-align:center;}
.card-footer.btn_area button {min-width:100px;}
.card-footer.btn_area .col-auto button {min-width:7em;}

/********************** 팝업 화면 */
.pop-card {height:100vh; min-height:100%; margin:0 !important;}
.pop-card .card-header {height:57px; /* padding:8px 24px 22px 24px; */ padding:0.5rem; font-size:1.125rem; border-bottom:1px solid #f2f2f2;}  /* IE-height */
.pop-card .card-header * {font-weight:bold; color:#172b4d;}
.pop-card .card-header > h5 {font-size:1.125rem;}  /* IE-> */
.pop-card .card-header em {margin-left:5px; font-weight:500; font-size:.875rem; color:#359bff;}
.pop-card .card-body {padding:8px 15px 8px 15px; -webkit-flex:1; flex:1; overflow:auto;}
.pop-card .card-body .form-group:last-child {margin-bottom:0;}
.pop-card .card-footer {text-align:center; border-top:none;}
.pop-card .card-footer button {padding:5px 25px; font-weight:bold; border-radius:50px;}
.card.pop-card{
	height:100vh;
  & > .card-header{margin: 0 7px;}
}
/********************** 모달 화면 */
.modal-backdrop.show {opacity:.0; }
.modal-backdrop.show ~ .modal-backdrop.show {opacity:.0;}
.modal-content {padding: 3px; border:1px solid #afb4b8; /*-webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none;*/}
.modal-title {font-size: 1.3rem;}
.modal-dialog {margin:0 auto;}
.modal-dialog-xs {max-width:30%; min-width:350px;}
.modal-dialog-sm {max-width:50%; min-width:800px;}
.modal-dialog-md {max-width:65%; min-width:1150px;}
.modal-dialog-lg {max-width:80%; min-width:1150px;}
.modal-header {padding: 10px 5px 10px 5px; -webkit-box-align:center; align-items:center; background:#f4f5f7;}
.modal-backdrop.show {opacity:75%;}
.modal-footer {display:block; text-align:center;}
.modal-footer button {min-width:120px; padding:10px; font-weight:bold; border-radius:50px;}
.modal.fade .modal-dialog {transition:transform .3s ease-out; transform:translateY(0px);}

/********************** 다이얼로그 화면 */
.ui-dialog {padding: .2em !important; border:1px solid #afb4b8; box-shadow: 0 15px 35px rgba(50, 50, 93, .2), 0 5px 15px rgba(0, 0, 0, .17); outline: medium none; z-index: 4;}
.ui-dialog .ui-dialog-titlebar {font-size: 16px; padding: 5px 15px; border: 0 0 0 1px solid; border-color: white; border-bottom: 1px solid #ccc;}
.ui-dialog .ui-dialog-buttonpane {margin: .5em 0 0 0; padding: 5px 15px 5px; border-top: 1px solid #ddd;}
.ui-widget-header {font-weight: bold; background-color: #f5f5f5; border-color: #dddddd; color: #333333;}

/********************** 툴바 영역 / 팝업창 타이틀 영역 */
.table_option {height:39px; -webkit-box-align:center; align-items:center; -webkit-justify-content:space-between; -moz-justify-content:space-between; -ms-justify-content:space-between; justify-content:space-between;}  /* IE-height */
.table_option .form-group {margin-bottom:0;}
.table_option .searchWrap {text-align:right;}
.table_option .searchWrap > * {display:inline-block; white-space:nowrap;}
.table_option select {min-width:60px; padding-left:0px !important; padding-right:0px !important;}
.table_option .btn:not(:last-child) {margin-right:0px;}
.table_option .form-control {display:inline-block; width:auto;}
.table_option .periodWrap {display:inline-flex;}
.table_option .periodWrap .datepicker-inline {width:140px;}
.table_option .periodWrap .btn {min-width:30px;}
.table_option.st02 .btn_area {-webkit-order:2; order:2;}
.table_option.st02 .searchWrap {-webkit-order:1; order:1; margin-bottom:10px; margin-left:auto;}

/*=================================================================================================
 * 그리드
=================================================================================================*/
@media screen and (min-width:1500px) {
    .col-xxl-auto {flex:0 0 auto; width:auto; max-width:100%;}
    .col-xxl-1 {flex:0 0 8.33333%; max-width:8.33333%;}
    .col-xxl-2 {flex:0 0 16.66667%; max-width:16.66667%;}
    .col-xxl-3 {flex:0 0 25%; max-width:25%;}
    .col-xxl-4 {flex:0 0 33.33333%; max-width:33.33333%;}
    .col-xxl-5 {flex:0 0 41.66667%; max-width:41.66667%;}
    .col-xxl-6 {flex:0 0 50%; max-width:50%;}
    .col-xxl-7 {flex:0 0 58.33333%; max-width:58.33333%;}
    .col-xxl-8 {flex:0 0 66.66667%; max-width:66.66667%;}
    .col-xxl-9 {flex:0 0 75%; max-width:75%;}
    .col-xxl-10 {flex:0 0 83.33333%; max-width:83.33333%;}
    .col-xxl-11 {flex:0 0 91.66667%; max-width:91.66667%;}
    .col-xxl-12 {flex:0 0 100%; max-width:100%;}
}

/*=================================================================================================
 * 테이블
=================================================================================================*/
.table-fixed {table-layout:fixed !important;}
.th-bg {background:#fafcfd !important;}
.th-right {font-weight:600 !important; color:#525f7f !important; text-align:right; background:#f7fafc; text-transform:none !important;}
.th-center {font-weight:600 !important; color:#525f7f !important; text-align:center; background:#f7fafc; text-transform:none !important;}
.bg-subtotal {background:#fbfbfb;}

.card .table {border-collapse:collapse !important;}
.card .table th {color:#495572; font-weight:bold;}
.card .table td, .card .table th {font-size: 13px; padding-left:12px; padding-right:12px; text-align:center; vertical-align:middle; border:0 solid #e9ecef; border-width:1px 1px 0 0; text-transform:none;}  /* IE-font-size */
.card .table tr > *:first-child {border-left:none;}
.card .table tr > *:last-child {border-right:none;position:relative}
.table thead th {font-size:.8125rem;}
.table thead tr:not(:first-child) > * {background:#fbfbfb;}
.table th .custom-control {padding-left:16px;}
.table th .custom-control-label::before, .table th .custom-control-label:after {left:-16px;}
.table .text-left a {display:block;}
.table-view {margin:0; border-width:1px 0;}
.table-view:only-child {margin:0 !important;}
.table.table-view th, .table.table-view td {padding:.5rem 12px; font-size:.875rem; text-align:left; white-space:normal;}
.table.table-view th {height:31px; vertical-align:middle; background:#f6f9fc;}
.table-view tr > *:first-child {border-left:none;}
.table-view tr > *:last-child {border-right:none;}
.table-view .btn-outline-secondary, .table-view .btn-outline-danger {min-width:60px;}
.table-view .form-row .btn {height:calc(.45em + 1.25rem + 5px);}
.table-view .form-row .btn-outline-secondary {border-color:#dee2e6;}
.table.table-view td {text-align:left;}
.table th {font-weight:500; white-space: inherit !important;}
.table td {white-space:normal;}
.table-responsive:first-child > table {margin-top:0 !important;}

.table-xs th, .table-xs td {padding:4px !important; line-height:21px !important; font-size:12px !important;}
.card .table-sm th, .card .table-sm td, .card .table.table-sm thead > tr > th {padding:7px;}
.table .form-group:last-child {margin-bottom:0;}
.table .form-group + .btn_area {margin-top:-10px;}
.table .btn_area:last-child {padding-bottom:10px;}

.card-body .table-responsive:last-child .dataTable:last-child {margin-bottom:0 !important;}

.table .table-active > * {font-weight:bold; color:#359bff;}
tr.link {cursor: pointer;}

/********************** 왼쪽 헤더 테이블 */
@media screen and (max-width:1350px) {
    .gridWrap .table th, .gridWrap .table td {padding:8px ;}
    .col-phone + div .gridWrap {letter-spacing:-1px;}
    .min-w250 {min-width:250px;}
}

.gridWrap .table {border-collapse:collapse !important;}
.gridWrap table.dataTable.table-sm>thead>tr>th {padding:8px 12px;}
.gridWrap .table th {font-size:.875rem; vertical-align:middle; border:0 solid #e9ecef; border-width:1px 1px 0 0; text-transform:none; font-weight:600; color:#525f7f; text-align:right; background:#f7fafc;}
.gridWrap .table td {text-align:left;}
.gridWrap .table td > * {vertical-align:middle;}
.gridWrap .table .align-text-top {line-height:31px;}
.gridWrap .table tbody > tr th{height: 45px;padding: 0 7px;}
/*=================================================================================================
 * FORM
=================================================================================================*/
.form-group dl {font-size:.875rem;}
.form-group dt {font-weight:600; color:#525f7f;}
.form-group dd {display:-webkit-box; display:flex; min-height:46px; margin:0; -webkit-box-align:center; align-items:center;}
.form-group dd .custom-control-label {vertical-align:middle;}
.form-group button {min-width:46px; height:46px; padding:5px 10px; vertical-align: top;}
.form-group button.btn-sm {height:31px;white-space:nowrap}
.form-group button.btn-xs {min-width: fit-content; height: fit-content; padding: 0 5px;}
.form-group .header {width: 150px;}
.form-group > .d-flex > .data {width: 200px;flex: 0 0 auto;min-height:46px; font-size:0.875rem} /* 행 높이 설정 */
#fallbackImageDiv.form-group .d-flex > .data{height:unset;}
.mainTempl_card-body > .custom-form .form-group:first-child{margin-top:0}
#templateViewForm .push-mt{margin-top:-1px}

.mainTempl_card-body{min-width:1500px}
.custom-form .form-group { margin: 0; }
.custom-form .form-group:first-of-type{ border: 1px solid #e9ecef;margin-top:-1px }
.custom-form .form-group:not(:first-of-type) { border-width: 0 1px 1px 1px; border-style: solid; border-color: #e9ecef; }
#fallback-info-div .form-group > .rcsFallback{border-top:1px solid #e9ecef}
.custom-form .form-group .form-label { display: flex; align-items: center; justify-content: flex-end; font-size: .875rem; font-weight:600 !important; color:#525f7f !important; background:#f7fafc; padding: 8px 8px 7px 8px; }
.email-type-name{width:165px;display: flex; align-items: center; justify-content: flex-end; font-size: .875rem; font-weight:600 !important; color:#525f7f !important; background:#f7fafc; padding: 8px; border:1px solid #e9ecef;border-right:0;border-bottom:0}
.email-type-form{padding:5px 8px;height:46px; border:1px solid #e9ecef;width:100%;border-left:0;border-bottom:0}
.email-type-form > div{margin:0}
.email-type-form .navbar{padding:0}
.email-type-form .nav-pills .nav-link{padding: 5px 15px;}
/* 20230629 */
.custom-form .form-group .form-label-left { font-size: .875rem; color:#525f7f !important; padding: .1rem; }
/* 끝 */
.custom-form .form-group .form-label button { min-width: fit-content; height: fit-content; padding: 0 5px; }
.custom-form .form-group .form-input { padding: 8px 8px 7px 8px;}
/*.custom-form .form-group .form-input { display: flex; align-items: center; }*/
.custom-form .form-group .form-input textarea { overflow-x: hidden; height: 220px; background: #f7fafc; word-break: break-all !important; margin-bottom: 8px; }
.custom-form .form-group .form-input textarea[type=text]{ overflow-x: hidden; height: 36px !important; background: #f7fafc; word-break: break-all !important; margin-bottom: 0px;}
.custom-form .form-group .form-input .subDesc { max-height: 70px; }

.custom-form .form-group .form-input button img { height: 100%;}
.custom-form .form-group .form-input .input-group .input-group-append .input-group-text { font-size: .750rem !important; padding: 0 .75rem }
.custom-form .form-group .form-input .custom-file { height: 31px; margin-bottom: 6px; }
.custom-form .form-group .form-input .custom-file label { margin-top: 0; }
.custom-form .form-group .form-text { font-size:12px; color:var(--gray-light);margin:0;position:relative}
.custom-form .form-group .form-text.size-memo{
	color:var(--red);padding-left: 10px;font-size:14px;
	&:after{
		content: '*';
        position: absolute;
        left: 0;
	}
}
.custom-form .form-group.page { border: 0px; }

/* RCS 스타일템플릿 관련 */
.custom-form .form-group #style-editor {padding:8px 0px 8px 0px; border: 1px solid #e9ecef;}
.custom-form .form-group #style-editor div {padding:0px;}
.custom-form .form-group #style-editor:not(:first-child) {border-width: 0 1px 1px 1px; border-style: solid; border-color: #e9ecef;}
.custom-form .form-group .form-input .row {margin-right: 0px; margin-left: 0px;}
.custom-form .form-group #style-template-container {margin-bottom: 8px;}
.custom-form .form-group #style-template-container .form-label {padding:8px 0px 8px 0px; text-align: center; border: 1px solid #e9ecef;}
.custom-form .form-group #style-template-container .rcs-style-edit-list {display: flex; flex-direction: row; justify-content: center; align-items: center;}
.custom-form .form-group #style-editor {text-align: center;}
.custom-form .form-group #style-editor .input-group-append {flex-grow : 1}
.custom-form .form-group #style-editor .input-group .input-group-append:last-child {margin-right : 0px}
.custom-form .form-group .form-input .styleDescription textarea { overflow-x: hidden; height: 35px !important; background: #f7fafc; word-break: break-all !important; margin-bottom: 0px; }
/* 스타일템플릿 관련 END*/


/* 이미지 템플릿 관련 */
.custom-form .form-group .form-input .detail_num {width: 100%; font-size: 16px; font-weight: 700; color: #000;padding-bottom: 5px}
.custom-form .form-group .form-input .detail_title {width: 80px}
.custom-form .form-group .form-input .detail_desc {width: 80%}
.custom-form .form-group .form-input .detail_cont {  width: calc(100% - 150px)}
.custom-form .form-group .form-input .detail_title .detail-text { display: flex; align-items: center; justify-content: flex-end; font-size: .875rem; font-weight:400 !important; color:#8898aa !important; padding: 0 8px 8px 8px; }
.custom-form .form-group .form-input .sm textarea { overflow-x: hidden; height: 60px !important; background: #f7fafc; word-break: break-all !important; margin-bottom: 8px; }
.custom-form .form-group .form-input .detail_wrap {display: -webkit-box;display: -ms-flexbox;display: flex;padding-bottom: 5px;padding-top: 5px}
/* 이미지 템플릿 관련 END */

.form_subcheckbox {position:relative; margin:0 20px 0 0;}
.form_subcheckbox::before {content:"("; position:absolute; left:-.6em; top:50%; height:1.2rem; margin-top:-.6rem; line-height:1.2rem;}
.form_subcheckbox::after {content:")"; position:absolute; right:-.5em; top:50%; height:1.2rem; margin-top:-.6rem; line-height:1.2rem;}

.col-form-label + div .row > div + div {padding-left:0;}
.control-text-sm {line-height:31px !important; vertical-align:middle !important; padding-top:8px !important; padding-bottom:8px !important;}
.form-control-sm {font-size: 14px !important; height:31px !important;}  /* IE-font-size */

.form-control-sm + .input-group-text { border-left:0; border-top-left-radius: 0; border-bottom-left-radius: 0;}

/* 필수입력 표시 */
.required {
    display: inline-block;
    width: 4px;
    height: 4px;
    margin-right: 5px;
    margin-bottom: 3px;
    vertical-align: middle;
    background: var(--primary);
    border-radius: 4px;
}

/*
 - 라벨이 없는 input 체크, 라디오에 height 값을 잡아 줄 수 없어 해당 인풋이 정상적으로 출력되지 않음.
 - ex, campaign/campaign_2step_mail_form.html 수신확인 체크박스
 - .custom-control.custom-radio, .custom-control.custom-radio label, .custom-control.custom-checkbox, .custom-control.custom-checkbox label {min-height:inherit; height:auto !important;}
*/
.custom-control-label {padding-top:3px !important;white-space: nowrap;}

/*=================================================================================================
 * UI 컴포넌트
=================================================================================================*/
/********************** 버튼 */
.option-button-container {
	position: absolute;right: 0;
	& .dropdown-menu{transition:none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;}
	& .btn:not(:disabled):not(.disabled):active{box-shadow:none !important;}
}
td > input ~ .option-button-container{position: relative;}
.btn-success.disabled, .btn-success:disabled{color: #fff; border-color: var(--green);background-color: var(--green);}
.button-container { display: flex; justify-content: center; width: 100%;}
.btn {font-weight:400; box-shadow: none;font-size:1rem;}
.btn.btn-sm{white-space:nowrap}
.btn-sm i.fas{margin-right:.5rem;}/* 아이콘은 텍스트 앞으로, 아이콘뒤 빈칸없어야 함 */
#editor-container .btn-sm i.fas, #messageStatisticsTable .btn-sm i.fas{margin:0} 
.btn.left-menu-btn i.fas{margin:0}
.btn-xs.btn-outline-danger i.fa-minus, .btn-sm.btn-outline-danger i.fa-minus{margin:0}

.btn:hover { transform: translateY(-2px); }
.btn-sm {min-height:30px;font-size:0.875rem;}
.btn-xs {padding:0px 5px; font-size:12px; line-height:20px; border-radius:3px;}
.btn-primary{background:var(--primary);}
.btn-primary:hover{background:var(--primary-hover);}
.unactive{
	opacity:0.5;
}
#title-editor .btn-primary.active{opacity:1}
#title-editor .btn-primary.active ~ .btn-primary{
	opacity:0.5;
}
#style-editor .btn-primary.active{opacity:1}
#style-editor .btn-primary.active ~ .btn-primary{
	opacity:0.5;
}
.btn-outline-primary {color:var(--primary); border:1px solid var(--primary);background-color:#fff;}
.btn-outline-primary:hover {color:#fff; background:var(--primary); border-color:var(--primary);}

.btn-outline-none {border:0;}
.btn-outline-secondary
{
    color: var(--secondary);
    border-color: var(--secondary);
    background-color: transparent;
    background-image: none;
}
.btn-outline-secondary.disabled, .btn-outline-secondary:disabled{
    color:var(--secondary);
    border-color: var(--secondary);
    background-color: white;
}
.btn.disabled:hover, .btn:disabled{
    pointer-events: none;
    opacity: .65;
}
.btn.disabled, fieldset:disabled .btn{
    pointer-events: none;
}
.btn-outline-info:not(:disabled):not(.disabled):active{
    color: #fff;
    border-color: var(--primary);
    background-color:var(--primary);
}

.btn-outline-secondary:hover{
    color: white;
    border-color: var(--body-color);
    background-color: var(--body-color);
}
.btn-info{
    border-color: var(--sky);
    background:var(--sky);
}
.btn-info:hover, .btn-info:not(:disabled):not(.disabled):active{
    border-color: var(--sky-hover);
    background:var(--sky-hover);
}
.btn-outline-info{
    color:var(--sky);
    border-color: var(--sky);
    background:white;
}
.btn-outline-info:hover{
    color:white;
    border-color: var(--sky-hover);
    background:var(--sky-hover);
}
.btn-secondary{
    color: white;
    border-color: var(--secondary);
    background:var(--secondary);
    &:hover{
	    color: white;border-color: var(--secondary-hover);background-color: var(--secondary-hover);
    }
}
.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle{
	color: white;border-color: #6d7c9f;background-color: #6d7c9f;
}
.btn-secondary.disabled, .btn-secondary:disabled {
    color: white;
    border-color:var(--secondary);
    background-color:var(--secondary);
}
.form-control:focus{
    border-color: var(--primary);
}
.btn-success
{
    color: #fff;
    border-color: var(--green);
    background-color: var(--green);
}
.btn-success:hover
{
    color: #fff;
    border-color: var(--green-hover);
    background-color: var(--green-hover);
}
.btn-outline-success
{
	color: var(--green);
    border-color: var(--green);
    background-color: transparent;
}
.btn-outline-success:hover
{
	color: white;
    border-color: var(--green);
    background-color: var(--green);
}
.btn-outline-success.disabled, .btn-outline-success:disabled{
	color: var(--green);
    background-color: transparent;
}
.custom-file-label{font-size: 14px; color:var(--primary);}
/********************** 검색 버튼 */
.searchWrap > * {padding-left:15px;}
.searchWrap > *:first-child {padding:0;}
.searchbox {margin-bottom:0; text-align:right;position:relative}
.searchbox > *, .searchbox .form-control {display:inline-block; width:auto; font-size:13px !important;}
.searchbox select:not(:first-child), .searchbox input:not(:first-child) {margin-left:0px;}
.search_input {position:relative; padding-right:48px;}
.search_input .form-control-label {display:inline-block; font-size:.8125rem;}
.search_input > * {display:inline-block; width:auto; vertical-align:middle;}
.search_input input {margin:0 5px;}
.search_input input:last-of-type {width:260px; margin-right:0; border-radius:.25rem 0 0 .25rem;}
.search_input .btn_search {position:absolute; right:0; top:0; width:55px; padding:2px; border-radius:0 .25rem .25rem 0;height:31px;}
.search_input .btn_search:hover{transform: translateY(0);}
.search_input .btn_search .btn-inner--text {margin-left:2px;}


.toolbar-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.toolbar-container > * { /* margin-right: 5px; */ font-size: 13px; }
.toolbar-container > .form-group > .form-control { width: auto; }
.left-toolbar > :last-child, .right-toolbar > :last-child { margin-right: 0; }
.left-toolbar, .right-toolbar { display: flex; flex-wrap: nowrap; align-items: center; margin-bottom: 0; }
.left-toolbar { margin-left: 0px; }
.right-toolbar { margin-right: 0px; }
.left-toolbar > *, .right-toolbar > * { margin-right: 8px; }

/********************** 검색 기간 */
.periodWrap {display:flex;}
.periodWrap .txt {width:16px; text-align:center; vertical-align:top;}  /* IE-vertical-align */
.periodWrap .date input {border-radius:.25rem 0 0 .25rem;}
.periodWrap .date .btn {height:100%;}
.date.datepicker, input[type='date'], input[type='time'], input[type='datetime-local'], input[type='month'] {max-width:150px;}

/********************** datepicker */
.input_datebox {display:inline-block; position:relative;cursor:pointer}
.form-control.datepicker{cursor:pointer}
.form-control.datepicker:disabled{cursor:default}
.input_datebox::after {content:"\f133"; position:absolute; right:0; top:50%; width:30px; font-family:"Font Awesome 5 Free"; font-weight:900; color:#495572; text-align:center; -webkit-transform:translateY(-50%); transform:translateY(-50%); cursor: default;}

.input_datebox input {width:110px; padding-right:25px; font-size: 13px !important;}
.input_datebox .form-control {width:110px; padding-right:25px;}
.ui-datepicker {display:none; position:fixed; left:50%; top:50%; width:400px; margin-left:-110px; padding:0; background:#fff; border:none !important; box-shadow:0 0 20px rgba(0,0,0,.5); -webkit-transform:translateY(-50%); transform:translateY(-50%); z-index:1000;}
.ui-datepicker-header {position:relative; height:50px; padding:0; font-weight:bold; color:#525f7f; text-align:center; line-height:50px; background:#525f7f; border:none !important; border-radius:0;}
.ui-datepicker-header > * {display:inline-block; font-weight:bold;}
.ui-datepicker .ui-datepicker-header a {position:absolute; left:0; top:0; width:40px; height:100%; text-align:left; cursor:pointer;}
.ui-datepicker .ui-datepicker-header a .ui-icon {display:inline-block; width:0; text-align:left; text-indent:-999em; overflow:hidden; opacity:0;}
.ui-datepicker .ui-datepicker-header a:hover, .ui-datepicker .ui-datepicker-header .ui-state-hover {background-color:#525f7f; border:none;}
.ui-datepicker .ui-datepicker-header a:before {content:"\f104"; position:absolute; left:0; top:0; width:100%; font-family:"Font Awesome 5 Free"; font-weight:bold; font-size:1rem; color:#fff; text-align:center;}
.ui-datepicker .ui-datepicker-header .ui-datepicker-next {left:auto; right:0;}
.ui-datepicker .ui-datepicker-header .ui-datepicker-next:before {content:"\f105";}
.ui-datepicker-close {position:absolute; right:0; top:0; width:55px; height:48px; text-indent:-999em;}
.ui-datepicker-calendar {width:100%;}
.ui-datepicker-calendar thead th {width:14.3%; padding:15px 2px 10px; font-size:.8125rem; text-align:center; background:#f3f6fb;}
.ui-datepicker-calendar thead th:first-child, .ui-datepicker-calendar thead th:last-child {width:14.25%;}
.ui-datepicker-calendar tbody tr:nth-child(even) {background:#f3f6fb;}
.ui-datepicker-calendar tbody tr td:hover {color:#fff; background-color:#3593fc;}
.ui-datepicker-calendar td {padding:10px 5px; font-size:.8757rem; text-align:center;}
.ui-datepicker-calendar .ui-state-disabled {opacity:.2;}
.ui-datepicker-calendar .ui-datepicker-other-month {opacity:.4;}
.ui-datepicker .ui-datepicker-calendar .ui-state-default {display:block; width:30px; height:30px; margin:0 auto; padding:0; text-align:center; line-height:30px; background:none; border-radius:30px; -webkit-box-sizing:border-box; border:0 solid #3593fc; box-sizing:border-box;}
.ui-datepicker .ui-datepicker-today a.ui-state-default {color:#fff; background:#3593fc;}
.ui-datepicker-current-day {background:#3593fc;}

.tui-calendar-today {background: #fde19a;}
.tui-datepicker {margin-top:1px; z-index:1100;}

.timepicker {font-size: 13px !important;}

.alert-text i{margin-right:.5rem}
/********************** 안내메시지 박스 */
.alert {/* padding:5px 15px; font-size:13px; */ padding:1rem; font-size:14px;}
.alert-warning {color:var(--title-color); background:none; border:1px solid #ececec}
.alert-icon {margin-right:10px;}
.alert .list-group-item {padding:8px !important;}

/********************** 파일 선택 */
.custom-file-input:lang(ko) ~ .custom-file-label::after {content:'파일 선택';}
.custom-file-input:lang(en) ~ .custom-file-label::after {content:'Choose file';}
.custom-file-input:lang(vn) ~ .custom-file-label::after {content:'Ch?n file';}
.custom-file-input {visibility:hidden;}
.custom-file.custom-file-xs {height:25px;}
.custom-file-label-xs {height:calc(1.25rem + 6px); padding-top:.25rem; padding-bottom:calc(.25rem + 2px); overflow:hidden; padding-left:.45em;}
.custom-file-label-xs::after {height:calc(1.25rem + 5px); padding-top:.25rem; padding-bottom:calc(.25rem + 2px); font-size:12px;}
.custom-file.custom-file-sm {height:32px;}
.custom-file-label-sm {cursor:pointer;height:calc(.45em + 1.25rem + 6px); padding-top:calc(.25rem + 2px); padding-bottom:calc(.25rem + 2px); overflow:hidden; padding-left:.45em;}
.custom-file-label-sm:hover{border: 1px solid var(--primary);}
.custom-file-label-sm:disabled{pointer-events: none;opacity: .65;}

.custom-file-label-sm::after {height:calc(.45em + 1.25rem + 6px); padding-top:calc(.25rem + 2px); padding-bottom:calc(.25rem + 2px); font-size:12px;}

/********************** 탭 */
.nav-tabs.tab01 {margin-bottom:10px; height: 33px;margin-top:15px;}  /* IE-height */
.nav-tabs.tab01 .nav-link {position:relative; min-width:100px; padding:5px 10px; margin:0 3px -1px; text-align:center; border-color:#e9ecef #e9ecef #dee2e6; font-size:14px; display: inline-block;}  /* IE-margin */
.nav-tabs.tab01 .nav-link.active, .nav-tabs.tab01 .nav-item.show .nav-link {position:relative; font-weight:bold; color:var(--primary);}
.nav-tabs.tab01 .nav-link.active:after {content:""; position:absolute; left:10px; right:10px; bottom:0; height:2px; background:var(--primary); border-radius:2px;}
.nav-tabs.tab01 .nav-item {flex:0 1 auto; display: inline;}  /* IE-display */

.nav-tabs.tab02 {flex-wrap:nowrap; border-bottom:none;}
.nav-tabs.tab02 .nav-link {position:relative; min-width:120px; padding:10px 10px 8px 10px; margin-right: 10px; color:#8f96a3; text-align:center; border:none; display: inline-block;}  /* IE-margin */
.nav-tabs.tab02 .nav-link:before {content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:#dde7fa; border-radius:4px;}
.nav-tabs.tab02 .nav-link.active, .nav-tabs.tab01 .nav-item.show .nav-link {font-weight:bold; color:var(--primary); background:#f8faff; border:none;}
.nav-tabs.tab02 .nav-link.active:before, .nav-tabs.tab01 .nav-item.show .nav-link:before {background:var(--primary);}
.nav-tabs.tab02 .nav-link:hover {color:var(--primary-hover);}
.nav-tabs.tab02 .nav-item {flex:0 1 auto; display: inline;}  /* IE-display */

.nav-tabs.tab03 { border: 0 none;}
.nav-tabs.tab03 .nav-link {position:relative; min-width:100px; padding:6px; margin:0; text-align:center; border-color:#e9ecef; border-radius: 0; border-left:0; font-size:.875rem; background-color:#fff; z-index: 0; display: inline-block;}  /* IE-margin */
.nav-tabs.tab03 .nav-item:first-child .nav-link {border-radius: 5px 0 0 5px; border-style: solid; border-left-width: 1px; border-left-color:#e9ecef;}
.nav-tabs.tab03 .nav-item:last-child .nav-link {border-radius: 0 5px 5px 0; }
.nav-tabs.tab03 .nav-link.active,
.nav-tabs.tab03 .nav-item.show .nav-link {position:relative; margin: 0 -1px; font-weight:normal; color:#fff; border-radius: 5px !important; border-color:transparent; background-color:#5e72e4; z-index:1}
.nav-tabs.tab03 .nav-item {flex:0 1 auto; display: inline;}  /* IE-display */

.nav-tabs.radio {border: 0 none;}
.nav-tabs.radio .nav-item {width: 50%;}
.nav-tabs.radio .nav-link {cursor:pointer; position:relative; padding-bottom:20px; text-align:center; color:var(--primary); opacity: 0.5; background:none; border:0 none;font-weight:700}
.nav-tabs.radio .nav-link.active,
.nav-tabs.radio .nav-link:hover {opacity: 1;}
.nav-tabs.radio .nav-link.active:after {
    position: absolute;    bottom: 15px;    left: calc(50% - 20px);    display: block;    content: '';    margin-left: 0;    width: 40px;    height: 4px;    border-radius: 4px;    background: var(--primary);
}

/********************** 트리 */
.treeWrap {border:1px solid #e9ecef;max-height:calc(100vh - 300px);min-height:350px}
#testerFrm .treeWrap{height:unset;}
.treeWrap.tree-shot{height:350px;}
.treeWrap > * {height:100%; overflow:auto;}
.treeWrap .overflow-auto {max-height:503px;}
.treeWrap .col-3 {border-right:1px solid #e9ecef;}
.treeWrap .col-4 {border-right:1px solid #e9ecef;}

/********************** 프로그래스바 */
.progress-label span {padding:5px 20px; font-size:.8125rem; color:#0060e2; background:#e7e7ed;}
#progressBar {padding-top:5px;}
#progressBarText {width:500px;margin-left:auto;margin-right:auto;}
#progressBarBox {width:500px;height:15px;border:1px;border-style:solid;background-color:#eeee;margin-left:auto;margin-right:auto;}
#progressBarBoxContent {background-color:red;height:15px;}

/********************** 드롭다운 */
.dropdown-menu { background-color: #ffffff; border: 1px solid #ddd; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
.dropdown-item { color: #333; }
.dropdown-item:hover { background-color: #f8f9fa; }

/********************** 툴팁 */
.tooltip { position: relative; display: inline-block; opacity: 1;font-family:'Pretendard', sans-serif;z-index:1 }
.tooltip .tooltip-content { visibility: hidden; width: 400px; background-color: black; color: white; text-align: left; border-radius: 6px; padding: 10px; position: absolute; z-index: 1; top: 100%; left: 50%; margin-left: -150px; opacity: 0; transition: opacity 0.3s; }
.tooltip:hover .tooltip-content { visibility: visible; opacity: 1; }
.tooltip-content ul { margin: 0; padding: 0; list-style-type: disc; padding-left: 20px; }
.tooltip-content ul li { margin-bottom: 5px; }
.tooltip-content ul .tooltip-li {white-space: pre-wrap; color: white;}
.bs-popover-right > .arrow::after{
	border-right-color: #000;
}

/********************** Alert */
.notification.alert { position: fixed; left:  50%; transform: translateX(-50%); top:  20px; z-index:  9999; width: auto; max-width: 500px; display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 0 10px; }
.notification.alert.alert-success { color: #fff; border-color: #4fd69c; background-color: #4fd69c; }
.notification.alert.alert-danger { color: #fff; border-color: #f75676; background-color: #f75676; }
.notification.alert.alert-warning { color: #fff; border-color: #fc7c5f; background-color: #fc7c5f; }
.notification.alert.alert-info { color: #fff; border-color: #37d5f2; background-color: #37d5f2; }
.notification.alert.alert-primary { color: #fff; border-color: #7889e8; background-color: #7889e8; }
.notification.alert-dismissible .close { margin-left: auto; margin-right: 0; padding-right: 10px; position: absolute; top: 50%; right: 0; transform: translateY(-50%); transition: all 0.15s ease; display: flex; align-items: center; justify-content: center; }
.notification.alert-dismissible .close > span { height: 100%; align-items: center; display: flex; justify-content: center; }
.alert > i{margin-right:.5rem}

/*=================================================================================================
 * 공통
=================================================================================================*/
/********************** 텍스트 */
/* 텍스트 크기 */
.font-size-12 {font-size:12px !important;}
.font-size-13 {font-size:13px !important;}

/* 텍스트 자간 */
.ls--1px {letter-spacing:-1px !important;}

/* 텍스트 스타일 */
.textarea-font-style {font-style:normal;}

/********************** Validation */
label.error {font-size: 13px; font-weight:600; font-style: italic; text-align: left; color: #a94442; display: block;}
.form-control.error {border: 1px dotted #a94442;}
.form-control.error:focus {border: 1px dotted #5e72e4;}

/********************** 설명 */
.notice-text {display:inline-block;}  /* IE-display */
.notice-text li {list-style:none; line-height:150%;}
.li-circle {display:inline-block; width:3px; height:3px; margin-right:3px; text-indent:-999em; font-size:.1em; vertical-align:middle; background:#4b4b4b;}

.txt_info01 {margin:5px 0; font-size:.8125rem; color:#359bff;}

.noti-list {}
.noti-list li {
    line-height: 1.6;
    font-size:13px;
}

/********************** 디스플레이 */
.hide {position:absolute !important; left:-999em !important; top:-999em !important; width:0; height:0 !important; text-indent:-999em; opacity:0;}
.dp-none {display:none;}
.dp-tag {display:none;}

.overflow-bg {background:#f6f9fc; font-weight:bold; color:#495572; font-size:.8125rem}
.overflow-bg-title {border-top:1px solid #e9ecef;}

.overflow-x-hidden {overflow-x:hidden !important;}
.overflow-y-hidden {overflow-y:hidden !important;}
.overflow-y-auto {overflow-y:auto !important;}

.w-80px {width: 80px !important;}
.w-100px {width: 100px !important;}

.max-w-200px {max-width: 200px !important;}

/********************** 템플릿 이미지 */
[class*='image-area'] img {min-width:100%; width: 100%; object-fit: cover;}
.vertical-image-area img {width:100%; height:100% ; object-fit: cover;}
.rcs_cont_detail_delete{ position: absolute; width: 26px; min-height: 26px; border-radius: 2px; border: 1px solid #e9e8e3; background: #fff; top: 5px; right: 5px; font-size: 15px;}
.rcs_cont_detail_delete:after{ content: "\00d7"; position: absolute; height: 26px; bottom: 5px; left: 5px; font-size: 25px;}

.thum_vertical .thum_img img{width: 68px;height: 68px;}

.thum_horizontal .thum_img{margin-right: 10px;}
.thum_horizontal .thum_img:last-child{margin-right:0;}
.thum_horizontal .thum_img img{width: 87px;height: 87px; }

.thum_text {line-height: 22px;font-weight: 400;color: #232323;padding-left: 12px;width: calc(100% - 68px);}
/********************** 서브항목 제목 */
.card h4.h3 em {font-size:.9375rem; color:#000;}
.card h4.h3 em:before {content:"|"; margin:0 .5em; font-weight:bold; font-size:.875rem; color:#8898aa;}

/********************** 채널 아이콘 */
.txt_channel {display:inline-block; width:20px; height:20px; margin:0 5px; font-style:normal; font-weight:500; font-size:12px; color:#fff; text-align:center; line-height:20px; vertical-align:middle; background: #e9e9e9; color: #757575; border-radius:2px; font-weight:700;}
.txt_channel.s {border:1px solid #4491fc; color:#4491fc;}
.txt_channel.m {border:1px solid #fd831f; color:#fd831f;}
.txt_channel.a {border:1px solid #fcd72c; color:#fcd72c;}
.txt_channel.b {border:1px solid #3c1e1e; color:#3c1e1e;}
.txt_channel.p {border:1px solid #dd3b41; color:#dd3b41;}
.txt_channel.f {border:1px solid #9b11fc; color:#9b11fc;}
.txt_channel.c {border:1px solid #fb6aa6; color:#fb6aa6;}
.txt_channel.r {border:1px solid #2dce89; color:#2dce89;}

.txt_channel.S {background: #d9e9ff; color: #4491fc;}
.txt_channel.M {color: #fd831f; background: #fff2e7;}
.txt_channel.A {background: #fff5c9; color: #ffb509;}
.txt_channel.B {border:1px solid #3c1e1e; color:#3c1e1e;}
.txt_channel.P {background: #fcdfff; color: #ea2dff;}
.txt_channel.F {background: #f2dfff; color: #9b11fc;}
.txt_channel.C {background: #ffe6f0;color: #fb6aa6;}
.txt_channel.R {background: #dcfdef; color: #2dce89;}

.txt_channel.XMS {background: #d9e9ff; color: #4491fc;}
.txt_channel.EMAIL {color: #fd831f; background: #fff2e7;}
.txt_channel.ALIMTALK {background: #fff5c9; color: #ffb509;}
.txt_channel.PUSH {background: #fcdfff; color: #ea2dff;}
.txt_channel.FAX {background: #f2dfff; color: #9b11fc;}
.txt_channel.FRIENDTALK {background: #ffe6f0;color: #fb6aa6;}
.txt_channel.RCS {background: #dcfdef; color: #2dce89;}
.txt_channel.E_DOCUMENT{ background: #e9e9e9; color: #757575;}

/********************** 템플릿타입(ASIS:채널) 아이콘: 가로 길이 제한 없는 버전 */
.txt-template-type {
	display:inline-block; padding:3px 5px; font-size:12px; font-style:normal; font-weight:500; color:#fff; text-align:center; vertical-align:middle; color:#1ac1e7; border-radius:4px;background:var(--sky);
}
.txt-template-type.XMS {background: #d9e9ff; color: #4491fc;}
.txt-template-type.EMAIL {color: #fd831f; background: #fff2e7;}
.txt-template-type.ALIMTALK {background: #fff5c9; color: #ffb509;}
.txt-template-type.PUSH { background: #fcdfff; color: #ea2dff;}
.txt-template-type.FAX {background: #f2dfff; color: #9b11fc;}
.txt-template-type.FRIENDTALK { background: #ffe6f0;color: #fb6aa6;}
.txt-template-type.RCS { background: #dcfdef; color: #2dce89;}
.txt-template-type.E_DOCUMENT{ background: #e9e9e9; color: #757575;}

/*=================================================================================================
 * IE10 이하 처리
=================================================================================================*/
/********************** 그리드 */
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11 {float: left;}
.col-12 {display: inline-block;}

/********************** FORM */
.custom-control-inline {display: inline-block !important;}
.form-row {display: inline-block !important; width: 100% !important;}

/********************** 테이블 */
table.dataTable {margin-bottom: 20px; border-bottom: 1px solid #e9ecef; width: 100% !important;margin-top:0.25rem !important}
.dataTables_empty {height: 36px !important;}
.scrolltbody thead tr th {
    position: sticky;
    top: 0;
    z-index: 1;
}
.table-sm .bg th {
    background-color:#fbfbfb;
}
.table.text-md td {
    padding:0.1rem 0.5rem;
    font-size: 12px;
}
.table.text-sm td {
    padding:0.1rem 0.5rem;
    font-size: 12px;
}
.dataTable td i.fa-file-alt{margin-right:.25rem;}
/********************** 페이징 */
.pagination {text-align: center;}
.pagination-sm .page-item {display: inline-block !important;}

.justify-content-end {text-align: right !important;}

.text-primary {color: var(--primary) !important;}
.text-secondary {color: var(--gray) !important;}
.text-success {color: #2dce89 !important;}
.text-info {color: var(--sky) !important;}
.text-warning {color: #fb6340 !important;}
.text-danger {color: #f5365c !important;}
.text-default {color: var(--title-color) !important;}
.text-body{color:var(--body-color) !important;}


.list-group-item {padding:16px;}

/*=================================================================================================
 * 개별 화면
=================================================================================================*/
/********************** 로그인 */
.main-color {background:#359bff;}
.login-box-wrap {width:450px; margin:0 auto;}
.login-box {border-radius:15px; box-shadow:0px 1px 20px rgb(0 0 0 / 25%); background:#fff;}
.login-box-footer {color:#495572; font-size:.85rem;}
.copyrights {font-size:.865rem;color:#4F5FB1;font-weight:400}

.input-icons i {position: absolute;}  /* IE */
.input-icons {width: 100%; margin-bottom: 10px;}  /* IE */
.icon {padding: 15px; min-width: 40px;}  /* IE */
.input-field {width: 100%; padding-left: 40px;}  /* IE */

/********************** 캠페인, 이케어 */
/* [1~3단계] 단계 표시 이미지 */
.stepWrap {position:relative; display:inline-block; margin:auto 0; padding:0; list-style:none; font-size:.8125rem; color:#fff;}
.stepWrap:before {content:""; position:absolute; left:8px; top:50%; right:8px; height:1px; background:#eee;}
.stepWrap > * {position:relative; display:inline-block; margin:0 5px;}
.stepWrap .box {
	text-align: center;
    border-radius: 25px;
    padding: 7px 30px;
    background: #afafaf;
}
.stepWrap .box .txt {position:absolute; left:-999em; top:-9999em; opacity:0;}
.stepWrap .current .box {
    font-weight: bold;
    font-size: .875rem;
    background: #5e72e4;
}
.stepWrap .current .box .txt {position:static; margin-right:.2em; opacity:1;}

/* [2단계] 선택된 대상자의 대상자수 */
.input-has-unit {position:relative; display:inline-flex; margin-right:20px;}
.input-has-unit input {padding-right:2em;}
.input-has-unit .unit {font-size:.875rem; padding:4px;}
.row > .input-has-unit .unit {right:25px;}

/* [2단계] 미리보기(팝업) */
.fax-mail-view {border:1px solid #efefef; padding:1rem; min-height:300px;}
.preview-content {font-size:13px; overflow:auto; white-space: pre-wrap;}

/* [2단계>저작기] 핸들러탭 - 기본 핸들러 선택 콤보박스 */
#handlerList {min-width:130px; width:auto;}

/* [2단계>저작기] 핸들러탭 - 스위치 */
.custom-control.custom-switch {padding-left:2.25rem;}
.custom-switch .custom-control-label::before {left:-2.25rem;}
.custom-switch .custom-control-label::after {left:calc(-2.25rem + 2px);}
.custom-switch .custom-control-input:checked~.custom-control-label::after {-webkit-transform:translateX(.75rem); transform:translateX(.75rem);}

/* [2단계>메일 저작기] 첨부파일 갯수 현황 */
.attrfiles_status {background:#f6f9fc;}

/* [2단계>메일 저작기] 수신거부링크 아이콘 */
.form-group button.btn_mail_reject{color:red;padding-left:30px;background: url(/images/button/btn_mail_reject.png) no-repeat 10% center;}
.form-group button.btn_mail_reject:hover {background-color:#ffd600;}

/* [2단계>문자/알림톡 저작기] 텍스트/이미지 템플릿 영역 */
.tmplWrap ul {margin:0 0 20px; padding:0; list-style:none; overflow:hidden;}
.tmplWrap ul li {float:left; width:240px; height:200px; margin:10px 19px 10px 0; background:#f6f9fc; border:1px solid #ccc; box-sizing:border-box;}
.tmplWrap .text-area {width:100%; height:100%; padding:1em; font-size:.875rem; overflow:auto; white-space:pre-wrap;}
.tmplWrap.tmpl-image li {width:200px; height:200px;}
.tmplWrap .image-area {display:-webkit-box; display:flex; -webkit-box-align:center; align-items:center; width:100%; height:100%;}
.tmplWrap img {max-width:100%;}

/* [2단계>문자/카카오톡 저작기] 바이트수/글자수 */
.chk-byte {width:100%;background:transparent;border-style:none; font-size:12px; text-align:center; height:inherit;}

/* [2단계>문자/카카오톡/PUSH 저작기] 휴대폰 */
.col-phone {width:280px; min-width:280px; max-width:280px;}
.phone_preview {position:relative; width:236px; height:415px; margin:0 auto; background:url("/images/phone/phone_bg.gif") no-repeat 0 0;}
.phone_preview .preview_box {position:absolute; left:7px; top:67px; display:-webkit-box; display:flex; -webkit-flex-direction:column; flex-direction:column; width:222px; height:309px; font-size:.875rem;}
.phone_preview .preview_box .tit {margin:0; padding:5px 15px; font-weight:bold;}
.phone_preview .preview_box .tit.form-group {padding:5px 15px; background:#f9f9f9; border-bottom:1px solid #ccc;}
.phone_preview .preview_box .preview-img img {background-size:contain; max-width:220px; max-height:149px; padding:.2rem; box-sizing:border-box;}
.phone_preview .preview_box .text {-webkit-flex:1; flex:1; height:309px;}  /* IE-height */
.phone_preview .preview_box .text > * {width:100%; height:100%; margin:0; border-radius:0;}
.phone_preview .preview_box .text iframe {border:none;}
.phone_preview .letter_count {position:absolute; left:7px; top:376px; width:222px; height:32px; padding:0 15px; font-size:.8125rem; line-height:32px; background:#f6f6f6; overflow:hidden;}

/* 폰 목업 */
.mockup-layout{
    display: flex; flex-wrap: nowrap; width:100%;
    min-width: calc(1554px - 1rem);
}
.mockup-layout > div:nth-child(1){
    width:400px;
}
.mockup-layout > div:nth-child(2){
    width:calc(100% - 400px); padding-left:20px;
}

.phone-mockup {
    width: 390px;
    margin: 0 auto;
    border-radius: 65px;
    border: 5px solid #DCDCDC;
    background: #fff;
    box-shadow: 0px 14px 9px -6px rgba(0, 0, 0, 0.06);
    position:relative; z-index:1;

}
.phone-line-deco{
    position: absolute;
    z-index: -1;
    border-radius: 60px;
    width: 100%;
    height: 100%;
    border: 5px solid #393939;
}
.phone-line-deco > div{
    position: absolute;
    z-index: 0;
    border-radius: 60px;
    width: 100%;
    height: 100%;
    border: 5px solid #F1F1F1;
}
.phone-mockup::before{
    content: '';
    width: 3px;
    height: 109px;
    background: url(/images/phone/deco_left_btn.png);
    position: absolute;
    left: -8px;
    z-index: 3;
    top: 200px;
}
.phone-mockup::after{
    content: '';
    width: 3px;
    height: 82px;
    background: url(/images/phone/deco_right_btn.png);
    position: absolute;
    right: -8px;
    z-index: 3;
    top: 230px;
}
.phone-mockup .phone-top {
    padding:20px; text-align:center; padding-bottom:0;
}
.phone-mockup .phone-top .deco_left{
    width:13px;
    height: 4px;
    position:absolute;
    background: #fff;
    opacity: 0.6;
    left:0;
    top:80px;
    z-index: 0;
}
.phone-mockup .phone-top .deco_right{
    width:13px;
    height: 4px;
    position:absolute;
    background: #fff;
    opacity: 0.6;
    right:0;
    top:80px;
    z-index: 0;
}
.phone-mockup .phone-top .deco_top{
    width:4px;
    height:13px;
    position:absolute;
    background: #fff;
    opacity: 0.6;
    right:74px;
    top:0;
    z-index: 0;
}

.phone-mockup .phone-cont {
    margin:0 10px;
}

.phone-cont .write-area {
    padding: 15px;
    background-color: #DAE5F1;
    overflow-y: auto;
    height: 400px;
}
.phone-cont .write-area.long-body{
    height:455px;
}
.phone-mockup .phone-cont .kakao-area {
    padding: 20px 20px 20px;
    background-color: #DAE5F1;
    max-height: 470px;
    overflow: auto;
    max-width: 360px;
    margin-right: -10px;
}

.kakao-area{
  & .title-bg-yellow{
        height: 40px;
        border-radius: 7px 7px 0px 0px;
        background-color: #ffeb00;
        padding: 10px 7px 10px 10px;
         & > div{
            font-size: 14px;
            font-weight: bold;
            color: #272727;
     }
 }
 & .kakao-body-text{
    position:relative; background-color:#fff;border-radius:0px 0px 7px 7px;
    overflow:auto;
     & .select-none{
        width: 100% !important;margin: 0 !important;
    }
    & #previewId_content_area{
        overflow: auto;
        max-width:100%; margin-right:-5px;
        height: 320px;
        padding:10px 15px 0px 15px;
        & textarea{
	        resize: none;
	        border: 1px solid #eee;
	        font-size: 14px;
	        padding:0; margin:0;
	        width:100%;
	        overflow:hidden;
	        min-height: 97%;        
        }
    }
 }
 & .text-describe{
    line-height: 1.6rem; font-size:14px; font-weight:normal; padding-left: 5px;
 }

}
#preview_image_area img{width: calc(100% + 30px); margin: -15px -15px 0 -15px;}
#previewId_image{width: calc(100% + 30px); margin: -15px -15px 0 -15px;}
.max-text{color:#8898aa}
/* 스크롤 디자인 */
#previewId_content_area::-webkit-scrollbar {width:5px;}
#previewId_content_area::-webkit-scrollbar-thumb {background-color:#b8c7d6;}
#previewId_content_area::-webkit-scrollbar-track {background-color:transparent;}

.kakao-bg::-webkit-scrollbar {width:5px;}
.kakao-bg::-webkit-scrollbar-thumb {background-color:#b8c7d6;}
.kakao-bg::-webkit-scrollbar-track {background-color:transparent;}

.kakao-area::-webkit-scrollbar {width:8px;}
.kakao-area::-webkit-scrollbar-thumb {background-color:#b8c7d6;}
.kakao-area::-webkit-scrollbar-track {background-color:transparent;}

#previewId_content::-webkit-scrollbar {width:5px;}
#previewId_content::-webkit-scrollbar-thumb {background-color:#b8c7d6;}
#previewId_content::-webkit-scrollbar-track {background-color:transparent;}

.write-area::-webkit-scrollbar {width:5px;}
.write-area::-webkit-scrollbar-thumb {background-color:#b8c7d6;}
.write-area::-webkit-scrollbar-track {background-color:transparent;}


.phone-mockup, .phone-sm, .emulator-wrap{
	color:#010101;
}

.nav-wrapper{
    padding:.5rem 0;
}
.col.write-area {
    max-width: 20%;
}
.write-area .balloon .textarea-font-style {
    font-size: 13px;
    text-align-last: left;
}
.phone-mockup .phone-cont .write-area .balloon {
    position: relative;
    padding:10px 15px;
    border-radius: 20px;
    background-color: #fff;
}
.phone-mockup .phone-cont .write-area > div.balloon:last-child{
    margin-bottom:unset;
}
.phone-mockup .phone-cont .write-area .balloon .arrow {
    position: absolute;
    width: 0;
    top: 0;
    left: -16px;
    height: 0;
}
.phone-mockup .phone-cont .write-area .balloon .arrow::after {
    content: "";
    position: absolute;
    border: 0 solid transparent;
    border-top: 9px solid #fff;
    border-radius: 0 20px 0;
    width: 15px;
    height: 30px;
    transform: rotate(145deg);
}
.phone-mockup .phone-cont .write-area .balloon input,
.phone-mockup .phone-cont .write-area .balloon textarea {
    width: 100%;
    max-height: 150px;
    font-size:14px;
    border:1px solid #eeeeee;
    border-radius:3px;
    resize:none;
    background-color: transparent;
}
.phone-mockup .phone-cont .write-area .balloon .row {
    margin-top:10px;
}

.phone-mockup .phone-cont .write-area .balloon textarea::-webkit-scrollbar {width:5px;}
.phone-mockup .phone-cont .write-area .balloon textarea::-webkit-scrollbar-thumb {background-color:#b8c7d6; border-radius:10px;}
.phone-mockup .phone-cont .write-area .balloon textarea::-webkit-scrollbar-track {background-color:transparent; border-radius:10px;}
.phone-mockup .phone-cont .btn-wht { background-color: #fff; border:1px solid #E6E6E6; font-weight:300 }

.write-area .balloon {
    position: relative;
    margin-bottom:20px;
    padding:7px 19px;
    border-radius: 20px;
    background-color: #e0eef8;
}
.write-area .balloon.sm {
    margin-top:10px;
    padding:10px 10px;
}
.write-area .balloon .arrow {
    position: absolute;
    width: 0;
    top: 0;
    left: -16px;
    height: 0;
}
.write-area .balloon > .image-area{margin-top:5px;}
.write-area .balloon .arrow::after {
    content: "";
    position: absolute;
    border: 0 solid transparent;
    border-top: 9px solid #e0eef8;
    border-radius: 0 20px 0;
    width: 15px;
    height: 30px;
    transform: rotate(145deg);
}
.write-area .balloon input,
.write-area .balloon textarea {
    width: 100%;
    max-height: 150px;
    font-size:14px;
    border:0 none;
    resize:none;
    background-color: transparent;
}

.write-area .balloon .textarea-font-style .count-text {
    color:#8898aa;
}
.write-area .balloon textarea::-webkit-scrollbar {width:5px;}
.write-area .balloon textarea::-webkit-scrollbar-thumb {background-color:#b8c7d6; border-radius:10px;}
.write-area .balloon textarea::-webkit-scrollbar-track {background-color:transparent; border-radius:10px;}
.write-area .btn-wht {
    margin-right:0;
    padding:0 2px;
    background-color: #fff;
}
.phone-mockup .phone-util {
    padding:10px;
    background: #f6f9fc;
    margin: 0 10px;
}
.phone-mockup .phone-util .nav-tabs.tab03 .nav-item {
    width: 25%;
}
.phone-mockup .phone-util .nav-tabs.tab03 .nav-link {
    min-width:80px;
    font-size:13px;
    border-left:1px solid #e9ecef;
    margin-bottom:0 !important;
}
.phone-mockup .phone-footer{
    display: flex;
    justify-content: space-between;
    padding: 0 30px 10px;
    flex-wrap: nowrap;
    box-shadow: 0px -1px 9px rgba(0, 0, 0, 0.05);
    border-radius: 0 0 55px 55px;
    position:relative;
}

.phone-mockup .phone-footer > div{
    text-align:center; width:33%; text-align:center;
}

.phone-footer .deco_left{
    width:10px;
    height: 4px;
    position:absolute;
    background: #fff;
    opacity: 0.6;
    left:0;
    bottom:150px;
    z-index: 0;
}
.phone-footer .deco_right{
    width:10px;
    height: 4px;
    position:absolute;
    background: #fff;
    opacity: 0.6;
    right:0;
    bottom:150px;
    z-index: 0;
}
.phone-mockup .phone-footer .btn {
    color:var(--gray-light);
    box-shadow:unset;
    font-size:14px; font-weight:600;
    height:100%;
}
.phone-mockup .phone-footer .btn:hover{
    color:var(--primary);
    box-shadow:unset !important;
}

/* 조회 > 발송이력 다시보기(popup) */
.phone-sm{
	background:url(/images/phone/phone_w300.png);
	width:300px; height:530px;font-size:13px;
}
.phone-sm.push{
	background:url(/images/phone/phone_w300_dark.png);
	& .phone-sm-logo{
		width: 18%;background: white;border-radius: 15px;margin: 3px 10px 0 10px;float: left;
		& img{width:100%}
	}
	& .text-body{
		overflow-y: auto;
   		max-height: 360px;

    	&::-webkit-scrollbar {width:5px;}
		&::-webkit-scrollbar-thumb {background-color:#b8c7d6;}
		&::-webkit-scrollbar-track {background-color:transparent;}

	}
	#previewId_title{white-space: pre-wrap; overflow: auto; max-height: 100px;}
	#previewId_content{white-space: pre-wrap;}
	
}

.push > div{
	margin-top:60px;
} 
.phone-sm .xml-bg{
	margin-top: 50px;
}
.phone-sm .kakao-bg{
	width: 270px;
    height: 430px;
    background-color: #DAE5F1;
    margin: 0 auto;
    margin-top:60px;
    overflow-y:auto;
}
.phone-sm .logo-area{
	padding-left: 5px;
}
.phone-logo{
	background-color: #FFFFFF;
    vertical-align: middle;
    width: 35px;
    height: 35px;
    margin-right: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    border: 1px solid #d7d7d7;
}
.phone-sm .body-area{
	margin-top:20px;    height: 370px;
	& #previewId_img{
		width:100%; height:100%; margin-top:10px; margin-bottom:10px;
	}
	& #previewId_title{
		font-size:13px; font-weight:bold;margin:0;
	}
	& .preview-content{
	    max-height: 310px !important;
	}
}
.phone-sm .body-area > div{
    height: 320px;
    background: #ffffff;
    border-radius: 9px;
    border: 1px solid #e9e9e9;
    overflow: auto;
    	&::-webkit-scrollbar {width:5px;}
		&::-webkit-scrollbar-thumb {background-color:#b8c7d6;}
		&::-webkit-scrollbar-track {background-color:transparent;}
}


/* [이케어 2단계] 핸들러 수정 사유 Layler */
.reasonWrap {position:absolute; height:330px; top:30%; left:30%; overflow:hidden;}
.reason-layer {z-index:100; width:500px; height:300px;}

/* [캠페인>캠페인 고객이력] 다시보기(팝업) */
.replayWrap {min-height:500px;}
.replayWrap .overflow-auto {max-height:830px;}

/* [이케어>컨텐츠 변경이력] 컨텐츠(템플릿/핸들러) 비교(팝업) */
/*.compare-row {margin-left:-10px; margin-right:-10px;}
.compare-row .col {padding-left:10px; padding-right:10px;}
.compareWrapper {padding:10px; border:1px solid #eee;}
.pop-card .compareWrapper {display:-webkit-box; display:flex; height:100%; -webkit-flex-direction:column; flex-direction:column;}
.pop-card .compareWrapper .text-area {-webkit-flex:1; flex:1;}
.pop-card .compareWrapper textarea {height:100% !important;}
.pop-card .compare-row, .pop-card .compare-row .col {height:100%;}*/

/********************** 간편발송 */

/********************** 템플릿 */
.textarea-mobile {overflow-x:hidden; height: 220px !important; background: #f7fafc; word-break: break-all !important;}

/* 모바일 화면 바이트수/글자수 */
.count-text, .quill-count-text {color:#5e72e4;}

/***** [템플릿>모바일 템플릿 리스트] 모바일 템플릿 내용조회 */
/*brandtalk-img 브랜드톡 등록*/
.notice-text.brandtalk-img li:first-child {height:220px; position:relative;}
.notice-text.brandtalk-img .brandtalk-img-text {display:inline-block; position:absolute; top:100px}
.notice-text.brandtalk-img .imgwrap {position:absolute; left:110px; display:inline-block; width:280px; height:200px; margin:10px 20px 10px 0; background:#f6f9fc; border:1px solid #ccc; box-sizing:border-box;}
.notice-text.brandtalk-img .imgwrap .image-area {display:-webkit-box; display:flex; -webkit-box-align:center; align-items:center; width:100%; height:100%;}

/*brandtalk-img 모바일템플릿 수정*/
.brandtalk-modify-img .imgwrap {width:280px; height:200px; background:#f6f9fc; border:1px solid #ccc; box-sizing:border-box;}
.brandtalk-modify-img .imgwrap .image-area {display:-webkit-box; display:flex; -webkit-box-align:center; align-items:center; width:100%; height:100%;}

/*친구톡 실패 시 mms*/
.brandtalk-modify-sms-img .imgwrap {width:220px; height:180px; background:#f6f9fc; border:1px solid #ccc; box-sizing:border-box;}
.brandtalk-modify-sms-img .imgwrap .image-area {display:-webkit-box; display:flex; -webkit-box-align:center; align-items:center; width:100%; height:100%;}
.brandtalk-img .imgwrap img {max-width:100%; max-height:100% ;}

/* [템플릿>브랜드톡 템플릿 등록, 템플릿>브랜드톡템플릿 리스트>내용조회] */
@keyframes spinner-border {to {transform:rotate(360deg);}}
.spinner {top:calc( 50% - (58px / 2 )); right:calc( 50% - (58px / 2 )); position:fixed;z-index:1031;}
.spinner-border {display:inline-block;width:3rem;height:3rem;vertical-align:text-bottom;border:.25em solid currentColor;border-right-color:transparent;border-radius:50%;-webkit-animation:spinner-border .75s linear infinite;animation:spinner-border .75s linear infinite;}
.spinner-border-sm {height:1rem;border-width:.2em;}

/* RCS 템플릿 에뮬레이터 */
.emulator-wrap {
    width: 345px;
    padding: 0;
    margin: 0;
    height: 616px;
    position: relative;
    background: url(/images/phone/bg_emulator-wrap.png);
    background-repeat:no-repeat;
  	background-position: center;
 	margin-left: auto !important;
    margin-right: auto !important;
}
.emulator-wrap .emulator-area {
    position: absolute;
    border: 0;
    overflow: auto;
    overflow-x: hidden;
    left: 16px;
    height: 496px;
    top: 66px;
    right: 16px;
}
.emulator-area .emulator-content {
    padding: 15px;
    background-color: #ffffff;
    min-height: 495px;
    font-size: 14px;
}
.p_descriptionContent{white-space: pre-wrap;font-size: 13px;}
.emulator-area .emulator-content .description { white-space: pre-wrap; min-height: 30px; font-size:13px;margin:0}
.emulator-area .emulator-content .image-area {
	box-sizing: border-box;position:relative
}
.image-area img{
	width: 285px ; height: 285px;
}
.vertical-image-area img{
	width: 285px; height: 380px;
}
.thumbnail-image-area img{
	width: 285px; height: 177px;
}
.sns-image-area img{
	width: 285px; height: 290px;
}
.sns-middleBtn-image-area img{
	width: 285px; height: 220px;overflow: hidden; 
}
.emulator-area .emulator-content .thumbnail-image-area{}
.emulator-area .emulator-content .sub-image-area {width: 285px; height: 68px;  display: flex; margin-bottom:10px;}
.emulator-area .emulator-content .horizontal-sub-image-area {width: 285px; height: 86px;  margin-bottom: 8px; display: flex }
.emulator-area .emulator-content .vertical-image-area {}
.emulator-area .emulator-content .sns-image-area {margin-bottom: 8px; }
.emulator-area .emulator-content .sns-middleBtn-image-area {}
.emulator-area .emulator-content .image-title { width: 90px; height: 30px; margin-bottom: 8px; }
.emulator-area .emulator-content .image-title img { height: 30px; }
.emulator-area .emulator-content .image-title img { height: 30px; }
.emulator-area .emulator-content .button-area { height: 35px; line-height: 35px!important; background: #f4f4f4; border-radius: 5px; vertical-align: middle; text-align: center; font-size: 14px; font-weight: 400;margin:0 8px; margin-top: 4px;}
.emulator-area .emulator-content .title-content { font-size: 14px; font-weight: 500; white-space: pre-wrap;margin:0;}
.emulator-area .emulator-content .title-emphasize-content { font-size: 19px; font-weight: bold; border-bottom: 2px solid black; margin: 0 0 8px 0; padding-bottom: 5px; white-space: pre-wrap;}

/* 카카오 템플릿 에뮬레이터 */
.kakao-emulator{
    max-height: 480px;
    background-color: #bdd1dc;
    position: absolute;
    left: 11px;
    right: 13px;
    top: 76px;
    padding: 20px;
    overflow-y:auto;
    & .kakao-header{
        height:40px;border-radius:7px 7px 0px 0px;background-color:#ffeb00;padding:7px;
        font-size:14px;padding-left: 8px; line-height: 27px;
    }
    & .kakao-body{
    	min-height:364px; background-color:#fff;border-radius:0px 0px 7px 7px;
	    padding: 15px;font-size:13px;
    }
    & .ad-area{
    	font-size:14px;
    }
    & .previewClass_KakaoBtn > button{
    	width:100%; background:#F1F2F4; border:none; min-height: 42px;
    	& > span{
    		font-size:13px;font-weight:normal;letter-spacing:-0.8px;color:#474749;
    	}
    }
}
.item-highlight{
	position:relative;
	border-bottom: 1px solid #eaeaea;
	& .hi-body{
		max-width: 161px;padding: 5px 0;
	}
	& .hi-body > .text-break{
	    height: 25px;line-height:25px;
	    &:nth-child(2){
	    	color: #a9a9a9;
	    }
	}
	& .hi-img{
		position:absolute;
		right:0;
		top:calc(50% - 20px);
		& > img{width:40px;}
	}
}
/* 카카오 부가 정보 */
#previewId_kakaoTmplEx{font-size:12px; color:darkgrey;white-space: pre-wrap;}

/* view 스크롤 */
.kakao-emulator *::-webkit-scrollbar {width:10px;}
.kakao-emulator *::-webkit-scrollbar-thumb {background-color:#8898aa;}
.kakao-emulator *::-webkit-scrollbar-track {background-color:#adb5bd;}
.emulator-wrap *::-webkit-scrollbar {width:10px;}
.emulator-wrap *::-webkit-scrollbar-thumb {background-color:#8898aa; }
.emulator-wrap *::-webkit-scrollbar-track {background-color:#adb5bd; }

/* RCS 슬라이드 페이지 */
.slide-page { margin: 10px 0; padding: 0; display: flex; align-items: center; justify-content: center; }
.slide-page .pagination { margin: 0; }
.slide-page .pagination .page-item:not(.active) { cursor:pointer; }

/********************** 대상자 */
/* [대상자>하위 대상자 등록] */
.fieldAddWrap {width:700px;}
.fieldAddWrap .table {margin:0 !important; background:#fff;}
.fieldAddWrap .table th {font-weight:bold; color:#74798c;}
.fieldAddWrap .form-row {display:block; overflow:hidden;}
.fieldAddWrap .form-row > * {float:left; padding-right:0;}
.fieldAddWrap .form-row > *:first-child {width:calc(100% - 35px);}
.fieldAddWrap .form-row > *:last-child {width:35px;}
.fieldAddWrap .btn_area {padding:10px;}
.fieldAddWrap .btn_area .btn {width:150px;}

/********************** 사용자 */
/* [사용자>사용자 등록/수정 (팝업), 사용자>부서 권한 관리] 권한리스트 */
.authorityWrap {min-height:300px;}
/* .authorityWrap .overflow-auto {max-height:240px;} */

/********************** 환경설정 */
/* [환경설정>공휴일 관리] */
.ui-datepicker-title {width:160px; font-size:.865rem!important;}
.ui-datepicker-title select {height:calc(.45em + 1.25rem + 5px); padding:.2rem .35rem; color:#555; font-weight:bold; width:45%!important;  font-size:0.925rem!important;}
.ui-datepicker-year {margin-right:.5rem!important;}
.ui-datepicker-title>select:focus {outline:0;}
.ui-datepicker-multi-4 .ui-datepicker-group{border-right: 1px solid var(--border);min-height: 280px;}
#datepicker_year {width:100%;}
#datepicker_year .ui-datepicker {display:block; position:inherit; margin-left:0px; -webkit-transform:translateY(0%); transform:translateY(0%); box-shadow:none; border:1px solid #e9ecef !important;}
#datepicker_year .ui-datepicker-header {height:35px; line-height:35px; background:#f6f9fc; font-size:.725rem; color:#495572;}
#datepicker_year .ui-datepicker-calendar thead th {font-size:.725rem; text-align:center; background:#fff;}
#datepicker_year .ui-datepicker-calendar td {padding:0; font-size:.725rem; text-align:center;}
#datepicker_year .ui-datepicker-inline.ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all.ui-datepicker-multi-4.ui-datepicker-multi {width:58em!important;}
#datepicker_year .ui-datepicker-calendar tbody tr:nth-child(even) {background:#fff;}
#datepicker_year .ui-datepicker .ui-datepicker-header a:before {content:"\f0a8"; color:#495572;}
#datepicker_year .ui-datepicker .ui-datepicker-header a:hover{background-color: rgba(0,0,0, 0.15);border: none;}
#datepicker_year .ui-datepicker .ui-datepicker-header .ui-datepicker-next:before {content:"\f0a9";}
#datepicker_year .ui-datepicker-current {display:block;}
#datepicker_year .ui-datepicker .ui-datepicker-today a.ui-state-default {color:#495572;  border:none;}
#datepicker_year .ui-state-block a {width:22px; height:22px; line-height:23px; background:red; color:#fff; border:none;}
#datepicker_year .ui-datepicker-inline.ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all.ui-datepicker-multi-4.ui-datepicker-multi{
	width:100% !important;
}
/* [시스템>템플릿 속성>푸시] */
/* div > custom toggle wrap */
.custom-toggle-wrap {display:flex; justify-content:center;}
.custom-toggle.grey .custom-toggle-slider{cursor:default;}
.custom-toggle.grey input:checked + .custom-toggle-slider:after {right:auto; left:0; content:attr(data-label-on); color:#ced4da;}
.custom-toggle.grey input:disabled:checked + .custom-toggle-slider:before {background-color:#e9ecef;}

/********************** wiseWatch */
/* [wiseWatch>프로세스 탭] LTS/MTS/ITS/BSE 프로세스 상태 출력 */
.content_box {margin-bottom:10px; padding:0 20px; font-size:.875rem; color:#000; border:1px solid #d8d8d9; border-radius:10px; box-shadow:1px 2px #f5f5f5;}
.content_box .group {border-top:1px dashed #ccc;}
.content_box .group:first-child {border-top:none;}
.content_box .cont_head {padding:12px 0 5px 0; overflow:hidden;}
.content_box .cont_head > dl {float:left; margin:0 15px 0 0; white-space:nowrap;}
.content_box .cont_head > dl > * {display:inline-block; padding-right:5px; line-height:30px;}
.content_box .cont_head dt {position:relative; padding-left:15px; font-weight:bold; font-size:.8125rem; color:#757575;}
.content_box .cont_head dt:before {content:""; position:absolute; left:0; top:50%; width:10px; height:10px; margin-top:-5px; border:3px solid #ccc; border-radius:10px;}
.content_box .cont_head dt:after {content:":"; margin-left:5px;}
.content_box .cont_head dd {margin:0;}
.content_box .cont_head button {min-width:50px; height:28px; min-height:28px; font-weight:500; font-size:.8125rem;}
.content_box .cont_head .status {display:inline-block; margin-right:10px; font-size:1rem; color:#0764ff;}
.content_box .cont_head .status.stop {color:#bdbdbd;}
.content_box .cont_head .r_btn {float:right;}
.content_box .cont_body {padding-bottom:20px;}
/* top 버튼 클릭시 상단으로 이동 */
#btn_goTop{position: fixed; right:40px; bottom:40px; }
.scrollToTop {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999999;
}

.scrollToTop.visible {
    opacity: 1;
    visibility: visible;
}

.scrollToTop > button{
	border-radius: 50%;
    width: 60px;
    text-align: center;
    height: 60px;
}
.accordion > .card > .card-header{border-radius:5px 5px 0 0}
.toogleEvt{
    background: rgb(255,255,255);
    
    background: linear-gradient(0deg, rgba(241,241,241,1) 0%, rgba(255,255,255,1) 100%);
    border-radius: 5px 5px 0 0;
    display: block;
    padding: 10px 10px;
    border-top: 1px solid #e9e9e9;
    border-left: 1px solid #e9e9e9;
    border-right: 1px solid #e9e9e9;
    &:hover{
        background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(241,241,241,1) 100%);

    }
}
.toogleEvt h5{
	font-size:16px;color:var(--body-color);
	&:hover{
		color:var(--title-color);
	}
}
.toogleEvt ~ div > .card-body{padding:0 10px;}

.accordion > .card{overflow: visible;}
.accordion .card-header{
    transition: all .5s cubic-bezier(.68, -.55, .265, 1.55);
}

.accordion .card-header:after{
	    transition: all .5s;
}
.section-title{
    margin-top:10px;
}
.section-title > a{
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(241,241,241,1) 0%, rgba(255,255,255,1) 100%);
    border-radius: 5px 5px 0 0;
    display: block;
    padding: 10px 10px;
    border-top: 1px solid #e9e9e9;
    border-left: 1px solid #e9e9e9;
    border-right: 1px solid #e9e9e9;
    &:hover{
        color:var(--title-color);
        background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(241,241,241,1) 100%);

    }
}
/* 
// 아코디언 감싸기 적용X
.accodion-con-box{
	border: 1px solid rgb(241 241 241); padding: 10px; border-radius: 0px 0px 10px 10px;
} 
*/

/* 챗버블 글씨 크기 축소 */
.kakaoButtonList > * > * {line-height:25px !important; font-size: 14px !important;}

/* .ofBar{ background:  #fdf5f2;z-index: 999999999;font-size: 16px;padding: 16px;font-weight: 400;display: flex;justify-content: space-between;align-items: center;position: fixed;bottom: 20px;
    width: 79%;left: 0;right: 0;margin-left: auto;margin-right: auto;box-shadow: 0 13px 27px -5px rgba(50,50,93,0.25), 0 8px 16px -8px rgba(0,0,0,0.3), 0 -6px 16px -6px rgba(0,0,0,0.025);
    border:3px solid #f8c5c3; box-sizing: border-box; border-radius: 10px; color: #dd4624} */
.ofBar {
    background: #fdf5f2;
    font-size: 16px;
    padding: 16px;
    font-weight: 400;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25), 0 8px 16px -8px rgba(0, 0, 0, 0.3), 0 -6px 16px -6px rgba(0, 0, 0, 0.025);
    border: 3px solid #f8c5c3;
    box-sizing: border-box;
    border-radius: 10px;
    color: #dd4624;
}
.buttonlistheader{background-color:rgb(246, 249, 252);}
.buttonlistheader th{text-align: center !important;}
br[data-mce-bogus="1"] {  display:none;}
.pre-line{ white-space: pre-line;}

.notiArea { background: #ffffff; height: 24px; padding: 0 }
.notiArea .menuIcon:after { content: ''; display: block; clear: both }
.notiArea .menuIcon { display: inline-block; list-style-type: none; padding: 0; }
.notiArea .menuIcon li { float: left; padding: 2px 2px 2px 2px }
.notiArea .menuIcon li a { display: block; position: relative; font-size: 0; line-height: 0; overflow: hidden; background: url(/images/dashboard/ico_topbar_total.png) no-repeat; width: 20px; height: 20px }
.notiArea .menuIcon li a.alarm { background-position: 0 -20px }
.notiArea .menuIcon li a.alarm span { display: block; box-sizing: content-box; width: 5px; height: 5px; border-radius: 50%; background: #fa4848; border: 1px solid #fff; position: absolute; top: 0; right: 0; padding: 0 }

/* dim */
/* 모달 창을 활성화 할때  wrapper형제 등급으로 맞춰야 함 */
.dim {
    display: none;
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-color:rgba(0,0,0,.3);
    z-index: 100;
}
/* 딤활성화때 show class추가 */
.dim.show {
    display: block;
}

/* bg box */
.pannel { padding:15px; background-color:#fbfbfb;}

/* modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0
}

.fade {
    transition: opacity .15s linear;
}
.modal-in-modal{
    top: 50px;
    position: absolute;
    z-index: 11;
    box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid #c1c1c1;
    & .pop-card{
        height:100%;
        max-height: 550px;
    }
}
.modal-close{
    cursor:pointer;
    width:16px;
}

#closeImg{
	width:16px;
}
@media (prefers-reduced-motion:reduce) {
    .fade {
        transition: none
    }
}

.fade:not(.show) {
    opacity: 0
}

/* 조작 이력 */
.no-result {
    padding:3rem;
    font-size:20px;
    text-align: center;
    border:1px solid #ececec;
}

/* 시나리오 발송 2단계 STEP3 발송 정보 > 발송스케줄 */
.custom-form .form-group.non-border-left-right {
    border-left: none;
    border-right: none;
}
.custom-form .form-group .header.non-color {
    background: none;
}

/* 시나리오 발송 2단계 STEP3 발송 정보 > 발송스케줄 > 반복 주기 */
.custom-form .form-group .form-input.align-items-center {
    display: flex;
    align-items: center;
}
.custom-form .form-group .form-input.w-39 {
    width: 38.7%;
}

/* 시나리오 발송 2단계 STEP3 발송 정보 > 발송스케줄 > 세부 설정: 매월 */
.checkbox-row.with-line {
    border: 0 solid #e9ecef;
    border-width: 1px 0 0 0;
    padding-top: 10px;
}
.checkbox-gap {
    width: 100%;
}

/* 이메일 발송 > 템플릿 에디터: 일반 HTML */
.form-control.h-300 {
    height: 300px !important;
}
.form-control.preview {
    overflow: auto;
}

/* 진승범 추가 */
.text-body-font{
    color:#525F7F !important;
}
.fw-400{
    font-weight:400 !important;
}
.fs-13{
    font-size:13px !important;
}
.fs-14{
    font-size:14px !important;
}
.fs-16{
    font-size:16px !important;
}
.fs-18{
    font-size:18px !important;
}
.fs-20{
    font-size:20px !important;
}
a:hover{
    color: var(--primary);
}
/* 로그인 */
.login-bg{
    background: #f7fafc;height:100vh
}
.login-bg-top {
    height: 45vh;
    position: absolute;
    z-index: 2;
    width: 100%;
    & img.logo-img{
    	height:45px; filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, .3));
    }
}
.login-box-wrap {
    width: 450px;
    position: absolute;
    left: calc(50% - 225px);
    top: calc(50% - 183px);
    z-index:2;
}
.bg-deco{
    position: absolute;
    height: 100vh;
    background: url(/images/bg/bg_full_15.png) no-repeat center;
    background-size: cover;
    left: 0;
    right: 0;
    top: 0;
    z-index:1;
}

#loginBtn.btn-primary{
    font-size:18px;
    padding:10px 48px !important;
    font-weight:800;
}
/* left 메뉴 버튼 클릭 시
1. 로고 변경
2. menu width 70px 변경, menu 내용도 안보이게
3. wrapper에 padding-left:70px로 변경
*/
.sidebar.collapsed {
    width:70px;
}
.sidebar.collapsed .nav-item{
    display:none;
}
#mainContent.collapsed {
  padding-left: 70px;
}

.top-icon{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: relative;
    display: inline-block;
    text-align: center;
    line-height: 27px;
    color: #525F7F;
    z-index:1;
    box-shadow:0px 1px 7px rgba(0, 0, 0, .25);
    border:none;
    background:white;
}
.top-icon.tooltip .tooltip-content{
    width: 100px;
    background-color: #525F7F;
    left: 50%;
    margin-left: -70px;
    text-align: center;
    line-height: 14px;
    top: 35px;
    font-weight: 300;
    letter-spacing: 1px;
}
.top-icon.tooltip .tooltip-content:after{
    content:'';
    width: 10px;
    height: 10px;
    position: absolute;
    background: #525F7F;
    transform: rotate(50deg);
    top: -4px;
    right: calc(50% - 25px);
}
.logout a:hover{
   color: #525F7F;
}
.container{
    max-width:1500px;
    &.mt-4{
    	margin-top: 2rem !important;
    }
}
.min-1400{min-width:1400px}
.min-1550{min-width:1550px}
@media (min-width: 1700px) {
    .container{
        max-width: 1600px;
    }
}

.layout-view{
    display:flex;
}
.layout-view > div:nth-child(1){
    width:calc(100% - 400px)
}
.layout-view > div:nth-child(2){
    width:400px;
}
/* bootstrap */
.shadow {
    box-shadow: 1px 1px 10px rgba(0, 0, 0, .15) !important;
}
/* email editor skin 변경 */
.tox-toolbar, .tox:not(.tox-tinymce-inline) .tox-editor-header{
    background: var(--primary) !important;
}
.tox-tinymce {border: 2px solid #d4daff !important;}

.add-query-btn{
	cursor: pointer;
    margin-top: 10px;
    display:flex;
    align-items:center;
    justify-content:center;
	padding:10px;
    border: 1px dotted #8898AA;
    border-radius: 5px;
    color: #76889c;
    background:#F6F6F6;
    font-weight:bold;
}

.add-query-btn:hover{
    background: #ececec;
}

/* jstree css 변경(원사이즈, 아이콘이 작으면 css 삭제하면 됨) */

.jstree-default.treeview_top.treeview_basic .jstree-themeicon{
    background: url(/images/tree/folder.png) no-repeat center center !important;
    background-size: 14px auto;
}

.contents-column {
  & > div{border:1px dotted #cecece}
}

/* form */
.form-check:not(.form-switch) .form-check-input[type=checkbox]:checked:after {
    opacity: 1;
}
.form-check:not(.form-switch) .form-check-input[type=checkbox]:after{
	transition: opacity .25s ease-in-out;
    font-family: FontAwesome;
    content: "\f00c";
    width: 100%;
    height: 100%;
    color: #fff;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .67rem;
    opacity: 0;
}

/* AB test */
#email-abtest-nav .nav-pills{
	    &{flex-wrap: nowrap;}
	    & .nav-item{
	    	padding-right:.5rem;
	    	
	    }
	    & #email-abtest-copy li{
	    	padding-right:.5rem;
	    }
}
#email-abtest-nav .nav-pills a.nav-link{
	&{
		width: max-content; padding:5px 12px;
		cursor:pointer;
	}
	&.disabled{
		opacity:0.5;
		cursor:unset;
	}
	&:hover{
		background:var(--primary-hover);
		color:white;
	}
}
.tui-calendar {
    position: relative;
    background-color: #fff;
    border: 1px solid #aaa;
    width: 274px;
    border-radius: 5px;
}
.tui-datepicker .tui-is-selectable.tui-is-selected, .tui-datepicker.tui-rangepicker .tui-is-selectable.tui-is-selected{
	background-color: #4b96e6;
    color: #fff;
}

/* wiseWatch */
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after{    
	right: 5px;    top: 10%;    content:"\f0de";
	font-family: "Font Awesome 5 Free";   font-weight:600;

	}
table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_desc_disabled:before{	
	right: 5px;    top: 16%;    content: "\f0dd";
	font-family: "Font Awesome 5 Free";   font-weight:600;
}

/* 설명글 */
.info-box{
	padding:15px;background:#f1f1f1; border-radius:5px; margin:10px 0; line-height:1.7;
	& a{
		padding: 5px 15px; background: #ffffff;
        font-weight: 500;
        border-radius: 5px;
        display: inline-block;
        margin-top: 5px;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.05);
	}	
}

/* input radio, checkbox checked */
.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'12\' height=\'12\' viewBox=\'-6 -6 12 12\'%3e%3ccircle r=\'5\' fill=\'%23fff\'/%3e%3c/svg%3e');
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'20\' height=\'20\' viewBox=\'0 0 20 20\'%3e%3cpath fill=\'%23fff\' d=\'M15 4l-7 7-4-4L2 9l6 6 10-10z\'/%3e%3c/svg%3e');
}
.custom-checkbox .custom-control-input ~ .custom-control-label::before {top: .32rem;}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after{top: .32rem;}

/* 주의 사항, 메뉴얼 */
.check-list{
	margin-top:-1px;
	&{
	    padding: 6px 15px 5px 15px;
	    background: #f7fafc;
	    border: 1px solid #e9ecef;
	}
	& span, a{padding: 5px 10px;font-size:14px;}
	& i{margin-right:.5rem}
}
/* popup 미리보기 데이터테이블 높이 스크롤 */
#viewList{
	height:300px;overflow:auto;
	& .table th{
		letter-spacing: -1px;
	}
	& .table td{
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		word-break: break-all;
    }
}

#check-list-info.modal{
	& .modal-dialog{
		font-size:16px; padding-top:14%;max-width:900px;
		& .modal-header{
			font-size:1rem;
			& .close > span:not(.sr-only){
				font-size:1.8rem;
			}
		}
		& .modal-body{
			padding:1rem;
		}
	}
	
	& li{
		&{padding-bottom:10px;color: var(--title-color);}
		&:last-child{
			padding:0;
		}
	}
}
.datatable-img{vertical-align:middle;margin-top: -4px;}

/* 넘버링 포인터 */
.pagination-sm .page-item .page-link, .pagination-sm .page-item span{cursor:pointer;}

/* table 정렬 */
.sorting-wise{
	&{position:relative;}
	& .top{
       position: absolute;
        top: 12px;
        height: 12px;
        width: 10px;
        right: 37px;
        /* background: red; */
        font-size: 16px;
        & i{left:0;top: 0;position: absolute;}
	}
	& .bottom{
		position: absolute;
        top: 11px;
        right: 50px;
        height: 12px;
        width: 10px;
        /* background: blue; */
        font-size: 16px;
        & i{left: 0;top:-6px;position: absolute;}
	}
}
#templateTable.dataTable.table-sm .sorting:after{top: 7px;}
#templateTable.dataTable.table-sm .sorting:before{top: 9px;right: 5px;}

/* fax,전자문서 border 추가 */
#tab-content .if-border-top{border-top:1px solid #e9ecef}

/* 사이즈 조절 */
select#headerfooterTemplateId{max-width:620px;}

/* popup overflow 조절 */
.overflow-pop-top{overflow:auto;height:345px}