@charset "utf-8";
/* Author : PULIP COMMUNICATIONS, Smart Media Group */

/* search */
.searchSimple {
    position: relative;
    zoom: 1;
}

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

.searchSimple > h4 {
    float: left;
    padding: 0 0 0 12px;
    margin: 7px 18px 0 0;
    font-weight: bold;
    text-align: left;
    vertical-align: top;
    line-height: 12px;
    white-space: nowrap;
    background: url(../images/common/bl_item_point.png) no-repeat left 4px;
}

.searchSimple > div {
    float: left;
    margin: 0 40px 0 0;
}

.searchSimple .chk {
    margin: 11px 0 0 0;
}

.searchSimple > div .sizeS {
    width: 112px !important;
}

.searchSimple > div .sizeM {
    width: 240px !important;
}

.searchSimple > div .selectSchedule {
    width: 250px !important;
}

.triggerActionInfoContents .checkboxListType1 {
    margin-top: 24px;
}

.searchSimpleTriggerAction {
    height: 30px;
}

.searchSimpleTriggerAction > ul > li {
    float: left;
    position: relative;
    width: 25%;
    padding: 0 8px 0 80px;
}

.searchSimpleTriggerAction > ul > li.col2 {
    width: 50%;
}

.searchSimpleTriggerAction > ul > li > h4 {
    position: absolute;
    left: 0;
    top: 9px;
    padding: 0 0 0 12px;
    margin: 0;
    font-weight: bold;
    text-align: left;
    vertical-align: top;
    line-height: 12px;
    white-space: nowrap;
    background: url(../images/common/bl_item_point.png) no-repeat left 4px;
}

.searchSimpleTriggerAction > ul > li .input {
    width: 90%;
}

.searchSimpleTriggerAction > ul > li .select {
    width: 100px;
}

.searchSimpleTriggerAction > ul > li .selectSchedule {
    width: 70%;
}

/* poupSearch */
.poupSearch {
    height: 35px;
}

.poupSearch .search {
    float: left;
    position: relative;
}

.poupSearch .search .input {
    border: 1px solid #919191;
}

.poupSearch .search .iconClose {
    display: block;
    position: absolute;
    left: 143px;
    top: 1px;
    padding: 6px 8px 10px 8px;
}

.poupSearch .search .btnSearch {
    display: inline-block;
    width: 34px;
    height: 31px;
    vertical-align: top;
    text-indent: -9999px;
    background-image: url(../images/common/sp_button.png);
    background-position: 0 -153px;
    background-repeat: no-repeat;
}

.poupSearch .search .btnSearch:hover, .poupSearch .search .btnSearch:focus {
    background-position: -68px -153px;
}

.poupSearch .search .btnSearch:active {
    background-position: -102px -153px;
}

.poupSearch .search .btnSearch.disabled {
    background-position: -34px -153px;
}

.poupSearch .pagination, .poupSearch .paging {
    float: right;
    margin: 0 0 0 0;
    cursor: pointer;
}

.boardCtrl {
}

.boardCtrl .pagination, .boardCtrl .paging {
    float: left;
    /*margin: 3px 7px 0 0;*/
    /*cursor: pointer;*/
}

.boardCtrl .pagination {
    float: left;
    margin: 3px 7px 0 0;
}

.boardCtrl .boardSearch {
    float: right;
}

/* table */
.tableList {
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #a49c9e;
    z-index: 10;
}

.tableList table {
    width: 100%;
}

.tableList thead th {
    height: 43px;
    padding: 0 10px 0 10px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    border-left: 1px solid #988f90;
    background: #a49c9e;
}

.tableList thead th:first-child {
    border-left: 0;
}

.tableList tbody td {
    height: 36px;
    padding: 11px 10px 10px 10px;
    text-align: left;
    border-top: 1px solid #ebebeb;
    background: #fff;
}

.tableList tbody tr:first-child td {
    border-top: 1px solid #8c8282;
}

.tableList tbody tr td mark.number {
    margin-top: -2px;
    margin-bottom: -2px;
}

.tableList tbody .noData {
    height: 360px;
    font-size: 1.333em;
    text-align: center;
}

.tableList tbody tr:hover .noData, .tableList tbody tr:focus .noData {
    background: #fff;
}

/* align */
.tableList.ac tbody td {
    text-align: center;
}

/* bg */
.tableList tbody tr:nth-of-type(even) td {
    background: #fafafa;
}

.tableList tbody tr:hover td, .tableList tbody tr:focus td {
    background: #f7f2c0;
}

.tableList tbody tr.selection td {
    border-top: 1px solid #fff;
    background: #dcf1f2;
}

.tableList tbody tr.selection + tr td {
    border-top: 1px solid #fff;
}

/* icon */
.tableList .iconFinger {
    margin-top: -6px;
}

/*
    .tableList .iconMaster, .tableList .iconSlaver{display:inline-block;float:right;width:16px;height:16px;padding:3px 0 0 0;margin-top:-2px;font-size:11px;color:#fff;font-weight:bold;text-align:center;vertical-align:top;}
    .tableList .iconMaster{background:#594b4f;}
    .tableList .iconSlaver{background:#a49c9e;}
*/
[field="device_type_id"] .iconMaster, [field="device_type_id"] .iconSlave {
    display: inline-block;
    float: right;
    width: 16px;
    height: 16px;
    line-height: 9px;
    padding: 4px 0 0 0;
    margin-top: 0px;
    font-size: 11px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    vertical-align: top;
}

[field="device_type_id"] .iconMaster {
    background: #594b4f;
}

[field="device_type_id"] .iconSlave {
    background: #a49c9e;
}

/* schedule */
.tableList .scheduleTxt {
    float: left;
    margin: 2px 0 0 0;
}

.tableList .scheduleSmall {
    float: right;
    margin-top: -4px;
    margin-bottom: -4px;
}

.tableListTypeA {
    border: 1px solid #a49c9e;
}

.tableListTypeA > div > table,
.tableListTypeA > table {
    table-layout: fixed;
    width: 100%;
}

.tableListTypeA > div > table > thead > tr > th, .tableListTypeA > div > table > tbody > tr > td,
.tableListTypeA > table > thead > tr > th, .tableListTypeA > table > tbody > tr > td {
    text-align: center;
}

.tableListTypeA > div > table > thead > tr > th,
.tableListTypeA > table > thead > tr > th {
    height: 36px;
    padding: 0 12px;
    color: #fff;
    font-weight: bold;
    border-left: 1px solid #b2acad;
    border-top: 1px solid #a49c9e;
    background: #a49c9e;
}

.tableListTypeA > div > table > thead > tr > th,
.tableListTypeA > table > thead > tr > th {
    padding: 5px;
    line-height: 1.2em;
    word-break: break-word;
}

.tableListTypeA table > thead > tr > th > div[ngbss-sortable-column] {
    padding: 0 12px 0 6px;
    color: #fff;
    font-weight: bold;
}

.tableListTypeA > div > table > thead > tr:first-child > th,
.tableListTypeA > table > thead > tr:first-child > th {
    border-top: 0;
}

.tableListTypeA > div > table > tbody > tr > td,
.tableListTypeA > table > tbody > tr > td {
    height: 35px;
    padding: 12px 12px 11px 12px;
    border-left: 1px solid #ebebeb;
    border-top: 1px solid #ebebeb;
    background: #fff;
}

.tableListTypeA.inputModuleTable> div > table > tbody > tr > td,
.tableListTypeA.inputModuleTable> table > tbody > tr > td {
    padding: 5px 25px 5px 25px !important;
}

.tableListTypeA.searchDevice > div > table > tbody > tr > td,
.tableListTypeA.searchDevice > table > tbody > tr > td {
    padding: 5px;
    line-height: 1.2em;
    word-break: break-word;
}

.tableListTypeA.noColumnLine > div > table > tbody > tr > td,
.tableListTypeA.noColumnLine > table > tbody > tr > td {
    border-left: none;
}

.tableListTypeA > div > table > tbody > tr:first-child > td,
.tableListTypeA > table > tbody > tr:first-child > td {
    border-top: none;/*1px solid #a49c9e;*/
}

.tableListTypeA > div > table > thead > tr > th:first-child,
.tableListTypeA > div > table > tbody > tr > td:first-child,
.tableListTypeA > div > table > tbody > tr.selection > td:first-child,
.tableListTypeA > div > table > tbody > tr.inTable thead th:first-child,
.tableListTypeA > table > thead > tr > th:first-child,
.tableListTypeA > table > tbody > tr > td:first-child,
.tableListTypeA > table > tbody > tr.selection > td:first-child,
.tableListTypeA > table > tbody > tr.inTable thead th:first-child {
    border-left: none;
}

.tableListTypeA table > tbody > tr > td .iconDelete img {
    margin-top: -3px;
    margin-bottom: -1px;
}

.tableListTypeA .chkChange[type="checkbox"] + label {
    margin-top: -3px;
    margin-bottom: -3px;
}

.tableListTypeA mark.number {
    margin-top: -3px;
    margin-bottom: -3px;
}

/*  */
.tableListTypeA table > tbody > tr > td.space {
    padding: 0;
}



.tableListTypeA table > tbody > tr > td.spaceInput {
    padding: 0px 4px;
}

.tableListTypeA [class*="ibtn"] {
    cursor: pointer;
    margin-top: -1px;
    margin-bottom: -1px;
}

.tableListTypeA .btnTableIn {
    margin-top: -3px;
    margin-bottom: -3px;
}

.tableListTypeA .timespinner {
    display: inline-block;
}

/* bg */
.tableListTypeA > div > table > tbody > tr:hover > td,
.tableListTypeA > div > table > tbody > tr:hover > td .inputEdit,
.tableListTypeA > div > table > tbody > tr:hover > td .fileBrowserS input,
.tableListTypeA > div > table > tbody > tr:focus > td,
.tableListTypeA > div > table > tbody > tr:focus > td .inputEdit,
.tableListTypeA > div > table > tbody > tr:focus > td .fileBrowserS input,
.tableListTypeA > table > tbody > tr:hover > td,
.tableListTypeA > table > tbody > tr:hover > td .inputEdit,
.tableListTypeA > table > tbody > tr:hover > td .fileBrowserS input,
.tableListTypeA > table > tbody > tr:focus > td,
.tableListTypeA > table > tbody > tr:focus > td .inputEdit,
.tableListTypeA > table > tbody > tr:focus > td .fileBrowserS input {
    background: #f7f2c0;
}

.tableListTypeA.disabled > table > tbody > tr:hover > td {
    background: #fff !important;
}

.tableListTypeA table > tbody > tr.selection td {
    border-left: 1px solid #cde0e1;
    border-top: 1px solid #cde0e1;
    background: #dcf1f2;
}

.tableListTypeA table > tbody > tr.selection > td .inputEdit {
    background: #dcf1f2;
}
.tableListTypeA table > tbody > tr.selection > td .inputEdit:focus,
.tableListTypeA table > tbody > tr.selection > td .inputEdit:active {
    background: #fff;
}


.tableListTypeA table > tbody > tr.selection + tr td {
    border-top: 1px solid #cde0e1;
}
/* 스크롤 테이블 */
.tableListTypeA.scrollable {
    box-sizing: border-box;
    position: relative;
    padding: 36px 0 0;
    background: #a49c9e;
}

.tableListTypeA.scrollable.searchDevice {
    padding: 42px 0 0;
}

.tableListTypeA.scrollable > .inner {
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
    max-height: 300px;
    background: #fff;
}
.tableListTypeA.scrollable > div > table,
.tableListTypeA.scrollable > table {
    table-layout: fixed;
}
.tableListTypeA.scrollable > div > table > thead > tr,
.tableListTypeA.scrollable > table > thead > tr {
    position: absolute;
    top: 0;
    left: 0;
}
/*@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {*/
    /*.tableListTypeA.scrollable table > thead > tr {*/
        /*left: 0;*/
    /*}*/
/*}*/

    /* tableAct */
.tableAct {
    display: block;
    background: url(../images/common/arr_intable_close.png) no-repeat right center;
}

.tableAct.open {
    display: block;
    background: url(../images/common/arr_intable_open.png) no-repeat right center;
}

/* form */
.tableListTypeA .scheduleTxt {
    float: left;
    margin: 2px 0 0 0;
}

.tableListTypeA .scheduleSmall {
    float: right;
    margin-top: -5px;
    margin-bottom: -5px;
}

/* inTable */
tr.inTable:hover td, tr.inTable:focus td {
    background: #fdfbed !important;
}

tr.inTable > td {
    display: none;
    padding: 0;
    background: #fdfbed;
}

tr.inTable.open > td {
    display: table-cell;
    border-top: 1px solid #a49c9e;
}

tr.inTable.open + tr td {
    border-top: 1px solid #a49c9e;
}

tr.inTable table {
    border: 0;
}

tr.inTable thead th {
    color: #5a5a5a;
    border-left: 1px solid #ebebeb;
    border-top: 1px solid #a49c9e;
    background: #fdfbed;
}

tr.inTable thead tr:first-child th {
    border-top: 0;
}

tr.inTable tbody td {
    color: #5a5a5a;
    border-left: 1px solid #ebebeb;
    border-top: 1px solid #ebebeb;
    background: #fdfbed;
}

tr.inTable tbody tr:first-child td {
    border-top: 1px solid #a49c9e;
}

tr.inTable.al tbody td {
    padding-left: 30px;
    text-align: left;
}

tr.inTable.al thead th:first-child,
tr.inTable.al tbody td:first-child {
    border-left: 0;
}

.inTableBtn {
    padding: 10px 0;
    border-top: 1px solid #eae9de;
}

.inTableBtn > a {
    min-width: 88px;
}

.tableInfo {
    border: 1px solid #a49c9e;
}

.tableInfo table {
    width: 100%;
}

.tableInfo tbody th {
    height: 36px;
    padding: 10px 10px 0 10px;
    color: #fff;
    font-weight: bold;
    line-height: 1.2;
    vertical-align: top;
    border-bottom: 1px solid #988f90;
    background: #a49c9e;
}

.tableInfo tbody tr:last-child th {
    border-bottom: 0;
}

.tableInfo tbody td {
    height: 36px;
    padding: 10px 12px 10px 12px;
    line-height: 1.2;
    vertical-align: top;
    border-bottom: 1px solid #ebebeb;
    background: #fff;
}

.tableInfo tbody tr:last-child th {
    border-bottom: 0;
}

.tableInfo tbody tr:last-child td {
    border-bottom: 0;
}

.tableInfo tbody .detail th, .tableInfo tbody .detail td {
    height: 80px;
}

.tableInfo tbody td.space {
    padding: 0;
}

/* subBox */
.subBoxHalf {
    overflow: hidden;
}

.subBoxHalf .subBox {
    float: left;
    width: 49.5%;
}

.subBoxHalf .subBox:nth-of-type(2) {
    float: right;
}

.subBox {
    position: relative;
    padding: 24px 25px 15px 25px;
    margin: 26px 0 0 0;
    border: 1px solid #b4b4b4;
    zoom: 1;
}

.subBox.first {
    margin-top: 5px;
}

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

.subBox .tit {
    display: inline-block;
    position: absolute;
    left: 17px;
    top: -6px;
    padding: 0 10px;
    font-size: 1.083em;
    font-weight: bold;

    background: #fff;
}

.formBox .subBox .tit {
    left: 27px;
}

.subBox.SignalBox {
    height: 190px;
    padding: 0px 15px 5px 15px;
    margin: 26px 16px 10px 0px;
}

.SignalBox .layoutDouble > div {
    float: left;
    min-height: 150px;
}

/* form box */
.formBox {
    margin: 0 0 16px 0;
    border-radius: 8px;
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
    border: 1px solid #b4b4b4;
    background: #fff;
}

.formBox.formBoxClose {
    overflow: hidden;
}

.formBox .title {
    height: 38px;
    padding: 0 25px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom: 1px solid #dad8d8;
    background: #eeeded;
    cursor: pointer;
}

.formBox .title.disabled {
    cursor: none;
    pointer-events: none;
    background: #e6e6e6;

}

.formBox .title.disabled h3 {
    color: #b4b4b4;
}

.formBox.formBoxClose .title {
    border-radius: 8px;
}

.formBox .title h1,
.formBox .title h3 {
    float: left;
    margin: 12px 0 0 0;
    font-size: 1.250em;
    font-weight: bold;
}

.formBox .title > button,
.formBox .title > a {
    display: inline-block;
    float: right;
    min-height: 6px;
    padding: 0 22px 0 0;
    margin: 13px 0 0 0;
    white-space: nowrap;
    border: none;
    background-color: transparent;
    background-image: url(../images/common/arr_dark_open.png);
    background-repeat: no-repeat;
    background-position: right center;
}

.formBox .title > button.btnFormEdit, .formBox.formBoxClose .title > button.btnFormEdit,
.formBox .title > a.btnFormEdit, .formBox.formBoxClose .title > a.btnFormEdit {
    display: inline-block;
    float: left;
    width: 34px;
    height: 31px;
    padding: 0 22px 0 0;
    margin: 3px 10px 0 -10px;
    white-space: nowrap;
    background-image: url(../images/common/sp_button.png);
    background-repeat: no-repeat;
    background-position: 0 -198px;
}

.formBox .title > button.btnFormEdit:hover, .formBox .title > button.btnFormEdit:focus,
.formBox.formBoxClose .title > button.btnFormEdit:hover, .formBox.formBoxClose .title > button.btnFormEdit:focus,
.formBox .title > a.btnFormEdit:hover, .formBox .title > a.btnFormEdit:focus,
.formBox.formBoxClose .title > a.btnFormEdit:hover, .formBox.formBoxClose .title > a.btnFormEdit:focus {
    background-position: -68px -198px;
}

.formBox .title > button.btnFormEdit:active, .formBox .title > button.btnFormEdit.pressed,
.formBox.formBoxClose .title > button.btnFormEdit:active, .formBox.formBoxClose .title > button.btnFormEdit.pressed,
.formBox .title > a.btnFormEdit:active, .formBox .title > a.btnFormEdit.pressed,
.formBox.formBoxClose .title > a.btnFormEdit:active, .formBox.formBoxClose .title > a.btnFormEdit.pressed{
    background-position: -101px -198px;
}

.formBox .title > button.btnFormEdit.disabled, .formBox.formBoxClose .title > button.btnFormEdit.disabled,
.formBox .title > a.btnFormEdit.disabled, .formBox.formBoxClose .title > a.btnFormEdit.disabled {
    background-position: -33px -198px;
}

.formBox .title .invisibleAct {
    display: inline-block;
    float: right;
    padding: 0 22px 0 0;
    margin: 13px 0 0 0;
    background-image: url(../images/common/arr_dark_close.png);
    background-repeat: no-repeat;
    background-position: right center;
}

.formBox .title .invisibleAct.open {
    background-image: url(../images/common/arr_dark_open.png);
}

.formBox.formBoxClose .title > a {
    background-image: url(../images/common/arr_dark_close.png);
}

.formBox .cnt {
    position: relative;
}

.formBox.formBoxClose .cnt {
    display: none;
}

.formBox .cnt > ul {
    min-height: 28px;
    padding: 12px 18px 24px 120px;
    zoom: 1;
}

.formBox .cnt > ul:after {
    content: "";
    display: block;
    clear: both;
}

.formBox .cnt > ul.invisibleCnt {
    display: none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background: #fdfbed url(../images/common/border_dashed.png) repeat-x left top;
}

.formBox .cnt > ul.invisibleCnt.open {
    display: block;
}

.formBox .cnt > ul > li {
    float: left;
    position: relative;
    width: 50%;
    min-height: 28px;
    padding: 0 100px 0 145px;
    margin: 12px 0 0 0;
}

.formBox .deviceFace .cnt > ul > li{
    padding: 0 100px 0 250px;
}

.formBox .cnt > ul > li.mustNextRow {
    clear: both;
}

.formBox .cnt > ul > li > h5 {
    position: absolute;
    left: 0;
    top: 6px;
    padding: 0 0 0 12px;
    font-weight: bold;
    vertical-align: top;
    line-height: 14px;
    background: url(../images/common/bl_item.png) no-repeat left 5px;
}

.formBox .cnt > ul > li > h5.redMark{
    background: url(../images/common/bl_item_point.png) no-repeat left 5px !important;
}

.cnt > ul > div > li > h5 {
    left: 0;
    top: 6px;
    padding: 0 0 0 12px;
    font-weight: bold;
    vertical-align: top;
    line-height: 14px;
    background: url(../images/common/bl_item.png) no-repeat left 5px;
}

#felica_block_list .tableListTypeA {
     width: 70%;
 }

#felica_block_list > table > tbody > tr > td > .spinner{
    height : 29px!important;
    width : 90% !important;
}

#felica_block_list > table > tbody > tr > td > span >span{
    margin: 0px!important;
    width : 11% !important;
}

#felica_block_list > table > tbody > tr > td > span >input {
    height : 29px!important;
    width : 89%!important;
}

.felica_block_list .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top:6px;
    left:20px;
    transform:translate(25px,-50%) ;
    z-index: 100;
    width: 50px;
}

.felica_block_list .icon > .message-box{
    position: absolute;
    padding:10px;
    transform-origin: bottom;
    bottom:130%;
    display: block;
    background: black;
    z-index: 999;
    color:white;
    word-break: break-all;
}

.felica_block_list .icon > .message-box > span{
    white-space: pre;
}


.felica_block_list .icon > .message-box > .triangle{
    width: 0px;
    height: 0px;
    border-bottom: 6px solid black;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    position: absolute;
    bottom:-7px;
    left:50%;
    transform: translate(-50%,-50%)  rotateZ(180deg);
}

.formBox .cnt > ul > li > h6 {
    position: absolute;
    left: 0;
    top: 6px;
    padding: 0 0 0 12px;
    font-weight: bold;
    vertical-align: top;
    line-height: 14px;
    background: url(../images/common/bl_item_point.png) no-repeat left 5px;
}
.formBox .cnt > ul > li > h7 {
    position: absolute;
    left: 0;
    top: 6px;
    padding: 0 0 0 12px;
    font-weight: bold;
    vertical-align: top;
    line-height: 14px;
    background: url(../images/common/bl_item_gray.png) no-repeat left 5px;
    color: #c5c5c5;
}
.formBox .cnt > ul > li > h5 .star {
    display: inline-block;
    vertical-align: top;
    margin-top: 3px;
}

.formBox .cnt > ul > li > h5 .chkChange[type="checkbox"] + label {
    margin-top: -2px;
    margin-left: 6px;
    vertical-align: top;
}

.formBox .cnt > ul > li > h5 .chkChange.alignR[type="checkbox"] + label {
    margin-left: 0;
    font-weight: bold;
}

.formBox .cnt .onlyText {
    display: inline-block;
    margin-top: 6px;
}

.formList .onlyText {
    display: inline-block;
    margin-top: 8px;
}

.formList.onlyTextList ul li > div,
.formList.onlyTextList ul li {
    overflow: hidden;
    min-height: 12px;
    max-height: 50px;
}

.formList.onlyTextList ul.spaceS li {
    margin-top: 8px;
    padding-left: 97px;
}

.formList.onlyTextList ul li {
    padding-left: 80px;
}

.formList.onlyTextList ul li h5 {
    top: 7px;
}

.formList.onlyTextList ul li > div {
    display: inline-block;
    margin-top: 6px;
}

.formList.onlyTextList ul li > div > p {
    line-height: 1.2em;
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;
    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.formList .onlyText mark.number {
    vertical-align: middle;
    margin-top: -2px;
}
.formBox .cnt > ul > li > div {
    position: relative;
    min-height: 28px;
    zoom: 1;
    padding-top: 1px;
    margin-top: -1px;
}

.formBox .cnt > ul > li > div:after {
    content: "";
    display: block;
    clear: both;
}

.formBox .cnt > ul > li > div + div {
    margin-top: 6px;
}

.formBox .cnt > ul > li.multiDiv > div + div {
    margin-top: 0;
}

/* photoTypeA */
.formBox .cnt.photoTypeA > ul {
    padding-left: 214px;
}

.formBox .cnt.photoTypeA > ul > li {
    padding-right: 65px;
}

.formBox .cnt.photoTypeA > .photo {
    position: absolute;
    left: 69px;
    top: 24px;
    width: 108px;
}

.formBox .cnt.photoTypeA > .photo figure {
    width: 108px;
    height: 144px;
    border: 1px solid #a69ea0;
    background: url(../images/common/member_photo.png) no-repeat center center;
}

.formBox .cnt.photoTypeA > .photo figure img {
    width: 106px;
    height: 142px;
}

.formBox .cnt.photoTypeA > .photo .sm-btn {
    overflow: hidden;
    margin: 6px 0 0 0;
}

.formBox .cnt.photoTypeA > .photo .sm-btnA a {
    width: 100%;
}

.formBox .cnt.photoTypeA > .photo .sm-btnB a {
    float: left;
    min-width: 52px;
    text-align: center;
}

.formBox .cnt.photoTypeA > .photo .sm-btnB a:nth-of-type(2) {
    float: right;
}

.formBox .cnt.photoTypeA > .photo .sm-btnB a img {
    margin: 0;
    margin-top: 5px;
}

.formBox .cnt.photoTypeA > ul > li.leftM {
    left: -145px;
}

.formBox .cnt.photoTypeA .userCustomField {
    margin-top: -12px;
    padding-top: 0;
    padding-bottom: 24px;
    background: #fdfbed;
    border-top: dashed 1px #e3e1d5;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.formBox .cnt.photoTypeA .userCustomField {

}

.formBox .cnt.photoTypeA .userCustomField > li > h5 {
    width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.formBox .cnt.logoTypeA > .logo {
    width: 144px;
}

.formBox .cnt.logoTypeA > .logo figure {
    width: 144px !important;
    height: 108px !important;
}

.formBox .cnt.logoTypeA > .logo figure img {
    width: 142px !important;
    height: 106px !important;
}

/*input configuration*/
.inputConfigurationBox {
    margin: 40px;
}

/* relayBox */
.relayBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding : 30px 48px 44px 48px;
}

.relayBox .relaySubBox {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.relayBox .relaySubBox .relaySetting {
    border: 1px solid #e6e6e6;
}

.relaySetting {
    margin-right: 30px;
    padding: 31px 22px;
    position: relative;
}

.relaySetting.right {
    margin-right: 48px;
}

.relaySetting.left {
    margin-right: 0px;
}

.relaySetting .leftBox{
    display: inline-block;
    position: absolute;
    font-size: 1.083em;
    font-weight: bold;
    top: -5px;
    left: 30px;
    background: #fff;
}

.relaySetting .rightBox{
    display: inline-block;
    position: absolute;
    font-size: 1.083em;
    font-weight: bold;
    top: -5px;
    left: 30px;
    background: #fff;
}

.relaySetting h5 {
    margin: 20px 20px 20px 20px;
    padding: 0 0 0 12px;
    font-weight: bold;
    vertical-align: top;
    line-height: 14px;
    background: url(../images/common/bl_item.png) no-repeat left 5px;
}

.relaySetting table th{
    text-align: center;
}

.relaySetting table td{
    text-align: center;
}

.relaySetting .tableListTypeA {
    margin: 20px 20px 20px 20px;
}
/* subBox */
.formBox .subBox {
    padding: 0;
    min-height: 30px;
    margin: 0 46px 26px 46px;
    border: 1px solid #e6e6e6;
}

.formBox .subBox:first-child {
    margin-top: 28px;
}

.formBox .subBox .subBoxAct {
    display: block;
    position: absolute;
    right: 10px;
    top: 8px;
    width: 20px;
    height: 12px;
    background: url(../images/common/arr_dark_close.png) no-repeat center center;
    z-index: 50;
}

.formBox .subBox .subBoxAct.open {
    border: none;
    background: url(../images/common/arr_dark_open.png) no-repeat center center;
}

.formBox .subBox .subBoxCnt {
    display: none;
    position: relative;
}

.formBox .subBox .subBoxCnt.open {
    display: block;
}

.formBox .subBox .cnt > ul {
    padding: 12px 0 22px 73px;
    margin-right: -29px;
}

.formBox .subBox .subBoxCnt.open > ul > li > div > .icon,
.popCnt > .addAccessLevel > .osdpDeviceType > ul > div > li > .icon{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top:50%;
    right:0;
    transform:translate(25px,-50%) ;
}
.popCnt > .addAccessLevel > .osdpDeviceType > ul > div > li > .icon{
    top:50%;
    right:0;
    transform:translate(20%,0%);
}
.formBox .subBox .subBoxCnt.open > ul > li > div > .icon > .message-box,
.popCnt > .addAccessLevel > .osdpDeviceType > ul > div > li > .icon > .message-box,
.formBox .subBox .subBoxCnt.open > ul > li > div > .icon > .message-box,
.formBox .cnt .list .sub > ul > li > .icon > .message-box{
    display: none;
    position: absolute;
    padding:10px;
    transform-origin: bottom;
    bottom:130%
}
.formBox .cnt .list .sub > ul > li > .icon > .message-box{
    left:-12px;
}

.formBox .subBox .subBoxCnt.open > ul > li > div > .icon > .message-box > span,
.popCnt > .addAccessLevel > .osdpDeviceType > ul > div > li > .icon > .message-box > span,
.formBox .cnt .list .sub > ul > li > .icon > .message-box > span{
    white-space:pre;
}


.formBox .subBox .subBoxCnt.open > ul > li > div > .icon:hover .message-box,
.popCnt > .addAccessLevel > .osdpDeviceType > ul > div > li > .icon:hover .message-box,
.formBox .cnt .list .sub > ul > li > .icon:hover > .message-box{
    display: block;
    background: black;
    z-index: 999;
    opacity: 0.85;
    color:white;
    word-break: break-all;
}

.formBox .subBox .subBoxCnt.open > ul > li > div > .icon > .message-box > .triangle,
.popCnt > .addAccessLevel > .osdpDeviceType > ul > div > li > .icon > .message-box > .triangle,
.formBox .cnt .list .sub > ul > li > .icon > .message-box > .triangle{
    width: 0px;
    height: 0px;
    border-bottom: 6px solid black;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    position: absolute;
    bottom:-7px;
    left:50%;
    transform: translate(-50%,-50%)  rotateZ(180deg);
}
.formBox .cnt .list .sub > ul > li > .icon.tomIcon{
    position: relative;
}
.formBox .cnt .list .sub > ul > li > .icon.tomIcon > .message-box.tom-message-box {
    transform: translate(-50%, -10%);
    left: 10px;
}
.colAD .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top:50%;
    right:0;
    bottom: -10px;
    transform:translate(25px,-50%) ;
    z-index: 100;
    width: 50px;
}

.colAD .icon > .message-box{
    position: absolute;
    padding:10px;
    transform-origin: bottom;
    bottom:130%;
    display: block;
    background: black;
    z-index: 999;
    color:white;
    word-break: break-all;
}

.colAD .icon > .message-box > span{
   white-space: pre;
}


.colAD .icon > .message-box > .triangle{
    width: 0px;
    height: 0px;
    border-bottom: 6px solid black;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    position: absolute;
    bottom:-7px;
    left:50%;
    transform: translate(-50%,-50%)  rotateZ(180deg);
}

/* form style */
/* .formBox .cnt .time .select{float:left;width:64px;}
	.formBox .cnt .time .dash{float:left;width:22px;padding:8px 0 0 0;font-weight:bold;text-align:center;} */
.formBox .cnt .cardID .input {
    float: left;
    width: 108px;
    vertical-align: top;
}

.formBox .cnt .typeB .cardID .input {
    width: 107px;
}

.formBox .cnt .cardID .dash {
    display: inline-block;
    float: left;
    width: 18px;
    padding: 8px 0 0 0;
    margin: 0;
    color: #474747;
    text-align: center;
}

.formBox .cnt .typeB .cardID .dash {
    width: 17px;
}

.formBox .cnt .sm-slider {
    margin: 6px 0 0 0;
}

.formBox .cnt .btnTypeA {
    float: left;
}

.formBox .cnt .btnTypeA + .input, .formBox .cnt .btnTypeA + .select {
    float: right;
    width: 40%;
}

.formBox .cnt div .check {
    display: inline-block;
    position: absolute;
    right: 10px;
    top: 7px;
}

.formBox .cnt div .warningMessage, div.formList ul li div .warningMessage {
    position: absolute;
    z-index: 30;
    right: 0;
    top: -30px;
    line-height: 1.2em;
}

.formBox .cnt div .warningMessage.left,
.warningMessage.left {
    left: 0;
    right: auto;
}

.warningMessage.right {
    left: auto;
    right: 0;
}

.formList .changeInformation div .warningMessageLeft {
    position: absolute;
    left: 0;
    top: -30px;
    line-height: 1.2em;
    padding: 7px 13px 7px 18px;
    color: #9d870e;
    white-space: nowrap;
    border: 1px solid #ede381;
    background: #f7f2c0;
}

.formBox .cnt div .warningMessageLeft {
    position: absolute;
    left: 0;
    top: -30px;
    line-height: 1.2em;
    padding: 7px 13px 7px 18px;
    color: #9d870e;
    white-space: nowrap;
    border: 1px solid #ede381;
    background: #f7f2c0;
}

.formBox .cnt div .toggleTxt {
    overflow: hidden;
}

.formBox .cnt div .toggleTxt .txt {
    float: left;
    width: 148px;
    margin: 10px 0 0 0;
}

.formBox .cnt div .toggleTxt .btnToggle {
    float: left;
}

.formBox .cnt div .btnFixS {
    width: 246px;
}

.formBox .cnt div .btnFixS .btnToggle {
    float: left;
}

.formBox .cnt div .btnFixS .btnText {
    float: right;
}

.formBox .cnt div .btnTxt {
    float: left;
    margin: 3px 10px 0 0;
}

.formBox .cnt div b.txt {
    display: inline-block;
    float: left;
    margin: 10px 10px 0 0;
}

/* space */
.formBox .cnt .chk {
    padding: 7px 0 0 0;
}

.formBox .cnt .btnToggle {
    padding: 5px 0 0 0;
}

.formBox .cnt .chkChange[type="checkbox"] + label, .formBox .cnt > ul > li .radioChange[type="radio"] + label {
    margin: 6px 0 0 0;
}

.formBox .cnt .chkChange.mlS[type="checkbox"] + label, .radioChange.mlS[type="radio"] + label {
    margin-left: 10px;
}

.formBox .cnt .radioChange[type="radio"] + label + .radioChange[type="radio"] + label {
    margin-left: 25px;
}

.formBox .cnt .chkChange[type="checkbox"].posR + label, .formBox .cnt > ul > li .radioChange[type="radio"].posR + label {
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: 10px;
}

.formBox .cnt .tableADD, .formBox .cnt .btnPosition {
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: 10px;
}
.formBox .cnt .selectBoxtableADD {
    position: absolute;
    right: 10px;
    top: 0;
}

.formBox .cnt .txtTypeA {
    float: left;
    margin: 9px 0 0 0;
}

.formBox .cnt .txtTypeA + .fl {
    margin-left: 30px;
}

.formBox .cnt .select + .btnFunc {
    margin-left: 4px;
}

.formBox .cnt .btnSpecial {
    margin-right: 6px;
}

/* span */
.formBox .cnt .normal {
    padding-left: 0;
}

.formBox .cnt .noMargin {
    margin-left: -145px;
}

.formBox .cnt .col {
    width: 100%;
}
.formBox .cnt .noRightPadding {
    padding-right: 31px;
}

.formBox .cnt .emptyCol {
    margin-right: 50%;
}

.formBox .cnt [class*="colSize"] {
    width: 100%;
    padding-right: 0;
}

.formBox .cnt .colAD {
    /* padding-left: 175px; */
    width: 100%;
}

.formBox .cnt .colSizeM > div {
    width: 505px;
}

.formBox .cnt .colSizeL > div {
    width: 655px;
}

.formBox .cnt .typeC .colSizeL > div {
    width: 547px;
}

.formBox .cnt .colSizeXl > div {
    width: 737px;
}

.formBox .cnt .colSizeSound > div {
    width: 497px;
}

.formBox .cnt .row3 {
    height: 108px;
}

.formBox .cnt .lineBreaks {
    width: 100%;
    padding: 28px 100px 0 11px;
}

/* type A */
.formBox .cnt > ul.typeA {
    padding-left: 30px;
}

.formBox .cnt > ul.typeA > li {
    padding-right: 10px;
}

/* type B */
.formBox .cnt > ul.typeB {
    padding-left: 50px;
}

.formBox .cnt > ul.typeB > li {
    padding-right: 30px;
}

/* type C */
.formBox .cnt > ul.typeC {
    padding-left: 70px;
}

/* type D */
.formBox .cnt > ul.typeD {
    padding-left: 70px;
}

.formBox .cnt > ul.typeD > li {
    padding-right: 35px;
}

/* form size */
.formBox .cnt .input, .formBox .cnt > ul > li .select, .formBox .cnt > ul > li .tableListTypeA {
    width: 100%;
}

.formBox .cnt .inputTime {
    width: 72px !important;
}

.formBox .cnt .inputDate {
    width: 106px !important;
}

.formBox .cnt .inputLicense {
    max-width: 170px !important;
}

.formBox .cnt .sizeXs {
    width: 20% !important;
}

.formBox .cnt .sizeS {
    width: 33% !important;
}

.formBox .cnt .sizeM {
    width: 48% !important;
}

.formBox .cnt .sizeL {
    width: 60% !important;
}

.formBox .cnt .sizeCustomL {
    width: 65% !important;
}

.formBox .cnt .sizeXl {
    width: 80% !important;
}

.formBox .cnt .sizeFull {
    width: 100% !important;
}

section.contents .formBox .cnt > ul > li.guideMessage {
    width: 100%;
    margin: 26px 0 0 0;
    padding-left: 0;
}

.formBox .cnt > ul > li.guideMessage .warning {
    color: #ff0033;
}

.formBox .guideList {
    position: relative;
    border-top: 1px solid #e8e8e8;
    padding: 35px 0 20px 85px;
    margin: 10px 120px 10px 120px;
}

.formBox .guideList:before {
    content: '';
    position: absolute;
    left: 0;
    top: 32px;
    width: 60px;
    height: 60px;
    background: url(../images/common/sp_layout.png) 0px -500px no-repeat;
}

.formBox .guideList > ul {
    margin: 15px 0 0;
    padding: 0;
}

.formBox .guideList > ul > li {
    float: none;
    width: auto;
    color: #828282;
    min-height: 28px;
    margin: 0;
    padding: 0;
}

.formBox .guideList > ul > li p {
    margin-top: 5px;
    color: #828282;
}

.formBox .guideList > h1 {
    padding: 0 0 0 12px;
    font-weight: bold;
    background: url(../images/common/bl_item_point.png) no-repeat left 3px;
}

.empty-box {
    padding: 200px 0;
}
.empty-box .empty-title {
    width: 100%;
    padding: 20px 0;
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
}
.empty-box .description {
    width: 100%;
    padding: 20px 0;
    text-align: center;
    font-size: 16px;
}

.formList {
    position: relative;
}

.formList > .tit {
    height: 14px;
    padding: 0 0 0 0;
    margin: 12px 0 12px 0;
    font-weight: bold;
}

.formList > .tit:first-child {
    margin-top: 0;
}

.formList > ul {
    min-height: 28px;
    padding: 0;
    margin-top: -12px;
    zoom: 1;
}

.formList > ul:after {
    content: "";
    display: block;
    clear: both;
}

.formList > ul > li {
    float: left;
    position: relative;
    width: 50%;
    min-height: 28px;
    padding: 0 0 0 145px;
    margin: 12px 0 0 0;
}

.formList > ul > li.about {
    float: left;
    position: relative;
    width: 50%;
    min-height: 28px;
    padding: 0 0 0 145px;
    margin: 0 0 0 0;
}

.formList > ul > li > h5 {
    position: absolute;
    left: 0;
    top: 8px;
    padding: 0 0 0 12px;
    margin: 0;
    font-weight: bold;
    vertical-align: top;
    line-height: 13px;
    background-image: url(../images/common/bl_item_point.png);
    background-repeat: no-repeat;
    background-position: left 5px;
}

.formList > ul > li > h5 .chkChange[type="checkbox"] + label {
    margin-top: -2px;
    vertical-align: top;
    font-weight: bold;
}

.guideMessage {
	padding-top: 20px;
	margin-bottom: -10px;
}
.guideMessage div {
	line-height: 1.5em;
}

.guideMessage:after {
	padding-bottom: 0;
	height: 0;
}

.popCnt .formList > ul > li > h5,
.inTable .formList > ul > li > h5 {
    background-image: url(../images/common/bl_item.png);
}

.formList > ul.fn > li > h5,
.inTable .formList > ul > li > h5 {
    font-weight: normal;
}

.formList > ul > li > div {
    position: relative;
    min-height: 28px;
    margin: 0 0 10px 0;
}

.formList > ul > li > div:last-child {
    margin-bottom: 0;
}

.formList > ul > li .btnEdit {
}

/* form size */
.formList .input, .formList .select {
    width: 100%;
}

.formList .sizeXs {
    width: 20% !important;
}

.formList .sizeS {
    width: 35% !important;
}

.formList .sizeL {
    width: 60% !important;
}

.formList .sizeXl {
    width: 80% !important;
}

/*.popCnt .formList .input, .popCnt .formList .select {*/
/*width: 240px;*/
/*}*/

.popCnt .formList .input {
    width: 240px;
}

.popCnt .formList .select {
    width: auto;
}


.popCnt .formList .sizeXxs {
    width: 70px !important;
}

.popCnt .formList .sizeXs {
    width: 140px !important;
}

.popCnt .formList .sizeS {
    width: 170px !important;
}

.popCnt .formList .sizeM {
    width: 300px !important;
}

.popCnt .formList .sizeF {
    width: 100% !important;
}

/* form style */
.formList .sm-slider, .formList .xslider {
    margin-left: 3px;
}

.formList .sm-slider {
    margin: 7px 0 0 0;
}

.formList .port .select {
    float: left;
    width: 270px;
    margin: 0 10px 0 0;
}

.formList .port .input {
    float: left;
    width: 90px;
}

/* space */
.formList > ul > li.col {
    width: 100%;
}
.formList.free {
    overflow: hidden;
    margin-top: 15px;
}
.formList.free.popupOption {
    margin: 15px 5px 0;
}
.formList.free > ul > li {
    float: none;
    width: 100%;
    padding: 0;
}
.formList.free > ul > li h5 {
    position: relative;
    left: auto;
    top: auto;

}

.formList.free > ul > li h5 + div {
    margin: 10px 0 0 7px;
}

.subBox .formList > ul > li.odd {
    width: 54%;
}

.subBox .formList > ul > li.even {
    width: 46%;
}

.formList > ul.special > li {
    padding-right: 23px;
}

.formList > ul.spaceXs > li {
    padding-left: 100px;
}

.formList > ul.spaceS > li {
    padding-left: 120px;
}

.formList > ul.spaceS > li.tomSwitch{
    padding-left:180px;
}

.formList > ul.spaceS > li > .tomAuthMode{
}

.formList > ul.spaceS > li > .tomAuthMode > .authMode > table{
    width:380px;
}

.formList > ul.spaceL > li {
    padding-left: 180px;
}

.subBox .formList .col {
    padding-right: 0px;
}

.formList .ml {
    margin-left: 60px;
}

.formList > ul > li > div.toggleSpace {
    min-height: 20px;
}

/* span */
.formList > ul > li.emptyCol {
    margin-right: 50%;
}

.formList > ul > li.lineBreaks {
    width: 100%;
    padding: 28px 0 0 11px;
}

/* popup */
.popCnt .formList > ul > li.odd {
    width: 48%;
    margin-right: 2%;
}

.popCnt .formList > ul > li.even {
    width: 48%;
    margin-left: 2%;
}

/* formModify */
.formList > .formModify {
}

.formList > .formModify > li > div {
    padding-left: 36px;
}

.formList > .formModify > li .btnFormEdit {
    position: absolute;
    left: 0px;
    top: 0px;
    padding: 0;
    margin: 0;
}

/* changeInformation */
.formList > .changeInformation {
}

.formList > .changeInformation > li {
    float: left;
    width: 100%;
}

.formList > .changeInformation > li.odd {
    width: 450px !important;
    margin-right: 0 !important;
}

.formList > .changeInformation > li.even {
    width: 170px !important;
    margin-left: 35px !important;
}

.formList > .changeInformation > li > div {
    padding-left: 36px;
}

.formList > .changeInformation > li .btnFormEdit {
    position: absolute;
    left: 0px;
    top: 0px;
    padding: 0;
    margin: 0;
}

.formList > .changeInformation > li.fl {
    width: 478px;
    padding-right: 55px;
}

.formList > .changeInformation > li.fl + .fl {
    width: 165px;
    padding-right: 0;
}

/* outputSignal */
.outputSignal {
    padding: 20px 8px 20px 8px;
}

.outputSignal .event .select {
    width: 246px !important;
}

.outputSignal .setting .select {
    float: left;
    width: 140px !important;
    margin: 0 10px 0 0;
}

.outputSignal .setting .input {
    float: left;
    width: 62px;
    padding: 0 10px;
}

.outputSignal .setting .txt {
    float: left;
    text-align: left;
}

.outputSignal .setting .chkChange + label {
    float: left;
}

.outputSignal .setting .txt {
    width: 49px;
    padding: 7px 5px 0 5px;
}

.outputSignal .setting .txtCounts {
    width: 75px;
    padding: 7px 5px 0 5px;
}

.outputSignal .btnToggle.fl {
    margin-right: 54px;
}

.outputSignal .toggleTxt {
    display: inline-block;
    height: 20px;
    float: left;
    width: 80px;
    padding: 8px 0 0 0;
}

/* selectUserList */
.selectUserList {
}

.selectUserList > [class*="cntType"] {
    float: left;
    position: relative;
    width: 100%;
    margin-left: -1px;
    border: 1px solid #a49c9e;
    background: #fff;
}

.selectUserList.length3 > [class*="cntType"] {
    width: 33%;
}

.selectUserList.length2 > [class*="cntType"] {
    width: 50%;
}

.selectUserList > [class*="cntType"]:first-child {
    margin-left: 0;
}

.formBox .cnt > ul > li .selectUserList .chkChange[type="checkbox"] + label {
    margin: 0;
    z-index: 20;
}

.selectUserList > .cntTypeA {
    z-index: 10;
}

.selectUserList > .cntTypeB {
    z-index: 10;
}

.selectUserList > .cntTypeC {
    z-index: 30;
}

.selectUserList > .cntTypeA h6,
.selectUserList > .cntTypeB h6 {
    position: relative;
    height: 36px;
    padding: 12px 0 0 0;
    color: #fff;
    font-weight: bold;
    text-align: center;
    background: #a49c9e;
}

.selectUserList > .cntTypeA h6:after,
.selectUserList > .cntTypeB h6:after {
    display: block;
    content: "";
    position: absolute;
    right: 11px;
    top: 13px;
    width: 10px;
    height: 7px;
    /*background: url(../images/common/arr_white_open.png) no-repeat left top;*/
}

.selectUserList > .cntTypeA h6 > a,
.selectUserList > .cntTypeB h6 > a {
    display: block;
    position: absolute;
    right: 28px;
    top: 10px;
}

/* scroll */
.selectUserList .cntTypeA .scrollY {
    max-height: 432px;
}

.selectUserList .cntTypeB .scrollY {
    max-height: 431px;
}

.selectUserList .cntTypeC .scrollY {
    max-height: 432px;
}

/* select view */
.selectUserList > .cntTypeA.selectView h6:after,
.selectUserList > .cntTypeB.selectView h6:after {
    background: url(../images/common/arr_white_close.png) no-repeat left top;
}

.selectUserList > .cntTypeA.selectView li {
    display: none;
}

.selectUserList > .cntTypeA.selectView li.checked {
    display: block;
}

.selectUserList > .cntTypeB.selectView .treeTypeGrid a {
    display: none;
}

.selectUserList > .cntTypeB.selectView .treeTypeGrid a.checked {
    display: block;
}

/* cntTypeA */
.selectUserList > .cntTypeA ul.listForCheck > li {
    position: relative;
    overflow: hidden;
    height: 35px;
    padding: 12px 12px 0 50px;
    margin: 0;
    color: #6e6e6e;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-top: 1px solid #ebebeb;
}


.selectUserList > .cntTypeA ul.listForView > li, li.noData {
    position: relative;
    overflow: hidden;
    height: 35px;
    padding: 11px 12px 0 12px;
    margin: 0;
    /*color: #6e6e6e;*/
    white-space: nowrap;
    text-overflow: ellipsis;
    border-top: 1px solid #ebebeb;
}

ul.listForView > li .btnContainer {
    padding: 8px 8px;
    top: -22px;
    position: relative;
    right: -11px;
    float: right;
    cursor: pointer;
}

ul.listForView > li .btnContainer:hover > .ibtnDelete, ul.listForView > li .btnContainer:focus > .ibtnDelete {
    background-position: -20px -31px;
}

ul.listForView > li .btnContainer:active > .ibtnDelete, ul.listForView > li .btnContainer.on > .ibtnDelete {
    background-position: -30px -31px;
}

ul.listForView.addItem > li {
    cursor: pointer;
}

.selectUserList > .cntTypeA ul.listForCheck > li:before {
    display: block;
    content: "";
    position: absolute;
    left: 38px;
    top: 0;
    width: 1px;
    height: 100%;
    background: #ebebeb;
}

.selectUserList > .cntTypeA ul.listForCheck > li:first-child {
    border-top: 0;
}

.selectUserList > .cntTypeA ul.listForCheck > li:hover, .selectUserList > .cntTypeA ul.listForCheck > li:focus {
    background: #f7f2c0;
}

.selectUserList > .cntTypeA ul.listForCheck > li.selection {
    background: #dcf1f2;
}

.selectUserList > .cntTypeA ul.listForCheck > li .chkChange[type="checkbox"] + label {
    position: absolute;
    left: 11px;
    top: 10px;
}

.selectUserList > .cntTypeA .sm-btn {
    margin-left: -1px;
    margin-bottom: -1px;
}

.selectUserList > .cntTypeA .sm-btn a {
    display: block;
    height: 37px;
    font-weight: bold;
    text-align: center;
    line-height: 35px;
    margin: 0;
}

/* cntTypeB */
.selectUserList > .cntTypeB .search input {
    text-align: center;
}

.selectUserList > .cntTypeB .tabTypeA {
    margin-top: -1px;
    margin-left: -1px;
    margin-right: -1px;
}

/* cntTypeC */
.selectUserList > .cntTypeC {
    border: 1px solid #594b4f;
}

.selectUserList > .cntTypeC h6 {
    position: relative;
    height: 36px;
    padding: 12px 0 0 0;
    color: #fff;
    font-weight: bold;
    text-align: center;
    background: #a49c9e;
}

.selectUserList > .cntTypeC h6:before {
    display: block;
    content: "";
    position: absolute;
    left: 39px;
    top: 0;
    width: 1px;
    height: 100%;
    background: #b2acad;
}

.selectUserList > .cntTypeC h6 .chkChange[type="checkbox"] + label {
    position: absolute;
    left: 12px;
    top: 10px;
}

.selectUserList > .cntTypeC h6 .chkChange[type="checkbox"]:checked + label:before {
    background-position: -32px 0;
}

.selectUserList > .cntTypeC h6 b {
    display: block;
    position: absolute;
    right: 15px;
    top: 9px;
    width: 29px;
    height: 18px;
    padding: 0 1px 0 0;
    font-size: 0.917em;
    color: #5a5a5a;
    font-weight: bold;
    letter-spacing: -1px;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
    z-index: 20;
}

.selectUserList > .cntTypeC table {
    width: 100%;
    border: 0;
}

.selectUserList > .cntTypeC table tbody td {
    height: 33px;
    text-align: center;
    border-left: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
    background: #fdfbed;
}

.selectUserList > .cntTypeC table tbody td:first-child {
    border-left: 0;
}

.selectUserList > .cntTypeC table tbody tr:hover td, .selectUserList > .cntTypeC table tbody tr:focus td {
    background: #f7f2c0;
}

.selectUserList > .cntTypeC table tbody tr.selection td {
    background: #dcf1f2;
}

/* cntTypeC */
.selectUserList > .cntTypeC.noChkbox h6:before {
    display: none;
}

/* accessRule */
.selectUserList.accessRule > .cntTypeA {
    width: 24em;
    margin: 0 7em 10em 0;
}

.selectUserList.accessRule > .cntTypeB {
    width: 24em;
    margin: 0 7em 10em 0;
}

.selectUserList.accessRule > .cntTypeC {
    width: 24em;
    margin: 0 7em 10em 0;
}

/* clearAPB */
.selectUserList.clearAPB > .cntTypeA {
    width: 20em;
    margin: 0 7em 2em 0;
}


/* noData */
.selectUserList > .cntTypeA ul.listForCheck > li.noData {
    padding-left: 14px;
    color: #b4b4b4;
}

.selectUserList > .cntTypeA ul.listForCheck > li.noData:before {
    display: none;
}

/* gridView */
.gridView {
    overflow: hidden;
    border-radius: 8px;
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
    border: 1px solid #a49c9e;
    border-top: 0;
    background: #a49c9e;
}

.gridView.length4 > ul > li {
    width: 25%;
}

.gridView.length5 > ul > li {
    width: 20%;
}

.gridView > ul > li {
    position: relative;
    overflow: hidden;
    float: left;
    height: 240px;
    background: #fff;
    z-index: 20;
}

.gridView > ul > li:before {
    display: block;
    content: "";
    position: absolute;
    left: 0px;
    top: 0;
    width: 1px;
    height: 100%;
    background: rgba(0, 0, 0, 0.13);
    z-index: 30;
}

.gridView > ul > li h5 {
    position: relative;
    height: 34px;
    padding: 12px 0 0 0;
    color: #fff;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid #8c8282;
    background: #a49c9e;
}

.gridView > ul > li h5 [class*="ibtn"] {
    display: none;
    position: absolute;
    top: 9px;
    height: 14px;
    text-indent: -9999px;
}

.gridView > ul > li h5 .ibtnEdit {
    right: 36px;
}

.gridView > ul > li h5 .ibtnDelete {
    right: 16px;
}

.gridView > ul > li .cnt {
    height: 176px;
    padding: 10px 0 0 0;
}

.gridView > ul > li .cnt > ul {
    height: 50px;
}

.gridView > ul > li .cnt > ul > li {
    overflow: hidden;
    padding: 4px 12px;
    margin: 0;
    font-size: 0.917em;
    line-height: 12px;
    color: #6e6e6e;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.gridView > ul > li .cnt > ul > li span {
    display: inline-block;
    margin: 0 0 0 4px;
}

.gridView > ul > li .cnt > ul > li:hover, .gridView > ul > li .cnt > ul > li:focus {
    background: #f7f2c0;
}

.gridView > ul > li .cnt > ul > li.selection {
    background: #dcf1f2;
}

.gridView > ul > li .cnt figure {
    overflow: hidden;
    height: 131px;
    margin: 0 12px;
    text-align: center;
    border: 1px solid #e8e3e0;
    background: #f7f5f4;
}

.gridView > ul > li .cnt figure img {
    height: 100%;
}

.gridView > ul > li .sm-btn {
    overflow: hidden;
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 37px;
    padding: 4px 0 0 0;
    text-align: center;
    border-top: 1px solid #f0f0f0;
    background: #fff;
}

.gridView > ul > li .sm-btn a {
    display: inline-block;
    margin: 5px;
}

.gridView > ul > li.addSecteor {
    padding: 18px 12px;
    border-top: 1px solid #dddddd;
}

.gridView > ul > li.addSecteor a {
    display: block;
    height: 203px;
    background: #f7f5f4 url(../images/contents/gridview_addsecteor.png) no-repeat center center;
}

/* hover */
.gridView > ul > li:hover, .gridView > ul > li:focus {
    border: 1px solid #ad9824;
}

/* open */
.gridView > ul > li.open {
    border: 1px solid #594b4f;
}

.gridView > ul > li.open:before, .gridView > ul > li:hover:before, .gridView > ul > li:focus:before {
    display: none;
}

.gridView > ul > li.open h5, .gridView > ul > li:hover h5, .gridView > ul > li:focus h5 {
    color: #5a5a5a;
    border-bottom: 1px solid #f0f0f0;
    background: #f0f0f0;
}

.gridView > ul > li.open h5 [class*="ibtn"], .gridView > ul > li:hover h5 [class*="ibtn"], .gridView > ul > li:focus h5 [class*="ibtn"] {
    display: inline-block;
}

.gridView > ul > li.open .sm-btn, .gridView > ul > li:hover .sm-btn, .gridView > ul > li:focus .sm-btn {
    display: block;
}

/* line */
.gridView > ul > li:first-child {
    border-top-left-radius: 8px;
}

.gridView.length4 > ul > li:nth-of-type(4) {
    border-top-right-radius: 8px;
}

.gridView.length4 > ul > li:nth-of-type(9) {
    border-bottom-left-radius: 8px;
}

.gridView.length4 > ul > li:nth-of-type(12) {
    border-bottom-right-radius: 8px;
}

.gridView.length4 > ul > li:nth-of-type(4n+1):before {
    display: none;
}

.gridView.length5 > ul > li:nth-of-type(5n+1):before {
    display: none;
}

/* FullScreen */
.FullScreen .gridView > ul > li {
    height: 277px;
}

.FullScreen .gridView > ul > li .cnt figure {
    height: 167px;
}

.FullScreen .gridView > ul > li .cnt > ul > li {
    font-size: 1em;
}

.FullScreen .gridView > ul > li .sm-btn a {
    margin-left: 10px;
    margin-right: 10px;
}

/* addGrid */
.addGrid {
    overflow: hidden;
    border-radius: 8px;
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
    border: 1px solid #a49c9e;
    border-top: 0;
    background: #fff;
}

.addGrid.length4 > ul > li {
    width: 25%;
}

.addGrid.length5 > ul > li {
    width: 20%;
}

.addGrid > ul > li {
    position: relative;
    overflow: hidden;
    float: left;
    height: 240px;
    background: #fff;
    z-index: 20;
}

.addGrid > ul > li:before {
    display: block;
    content: "";
    position: absolute;
    left: 0px;
    top: 0;
    width: 1px;
    height: 100%;
    background: rgba(0, 0, 0, 0.13);
    z-index: 30;
}

.addGrid > ul > li {
    padding: 18px 12px;
    border-top: 1px solid #dddddd;
}

.addGrid > ul > li a {
    display: block;
    height: 203px;
    background: #f7f5f4 url(../images/contents/gridview_addsecteor.png) no-repeat center center;
}

.addAccessLevel {
    position: relative;
    margin: 22px 66px 0 0;
}

.addAccessLevel > .tableWrapper {
    background: #a49c9e;
    border:1px solid #a49c9e
}
.addAccessLevel > .tableWrapper > .activatedDeviceListHeader{
    display: flex;
    height: 36px;

}
.addAccessLevel > .tableWrapper > .activatedDeviceListHeader > div {
    background: transparent;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    border-left: 1px solid #a49c9e;
    word-break: break-word;
    text-align: center;
    padding:5px;
    line-height: 1.2em;
}

.addAccessLevel > .tableWrapper > #activatedDeviceListItem > .activatedDeviceNotFound{
    width:100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white !important;
    line-height: 50px;
    font-size: 1.333em;
    padding:10px;
}

.addAccessLevel > .tableWrapper > #activatedDeviceListItem > .listItem {
    display: flex;
    background: white;
    -ms-overflow-style: none;
}
.addAccessLevel > .tableWrapper > #activatedDeviceListItem::-webkit-scrollbar{
    display: flex;
    width: 5px;
}
.addAccessLevel > .tableWrapper > #activatedDeviceListItem::-webkit-scrollbar-thumb{
    background: #a49c9e;
}

.addAccessLevel > .tableWrapper > #activatedDeviceListItem > .listItem:not(:first-child){
    border-top: 1px solid #ebebeb;
}

.addAccessLevel > .tableWrapper > #activatedDeviceListItem > .listItem > div{
    flex-grow: 1;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 12px 11px 12px;
    color: inherit;
}

.addAccessLevel > .tableWrapper > #activatedDeviceListItem > .listItem > div:not(:last-child){
    border-right: 1px solid #ebebeb;
}

.formBox .addAccessLevel {
    position: relative;
    margin: 0;
}

.addAccessLevel .tableADD {
    position: absolute;
    right: -66px;
    top: 0;
}

.addCardTemplate {
    position: relative;
    margin: 22px 66px 0 0;
}

.formBox .addCardTemplate {
    position: relative;
    margin: 0;
}

.addCardTemplate .tableADD {
    position: absolute;
    right: -66px;
    top: 0;
}

.cardPressoSetting .formBox .cnt > ul {
    padding-left: 50px;
}

.cardPressoSetting .formBox .cnt > ul > li {
    padding-left: 180px;
}

.formBox .cnt > ul > li .cardTemplate .select {
    width: 50%;
}

.formBox .cnt > ul > li .btnTestPrint {
    float: left;
}

#cameraIntegrationDlg .formList > ul.spaceS > li {
    padding-left: 145px;
}

#printCardDlg .formList > ul.spaceS > li {
    padding-left: 145px;
}

/* scheduleZoom */
.scheduleZoom {
    padding: 32px 35px 25px 35px;
}

.scheduleZoom .schedule {
    min-width: 485px;
}

.scheduleZoom .schedule li {
    overflow: hidden;
    margin: 0 0 10px 0;
}

.scheduleZoom .schedule li:last-child {
    margin-bottom: 0;
}

.scheduleZoom .schedule li h5 {
    float: left;
    width: 29px;
    height: 18px;
    margin: 0 20px 0 0;
    font-size: 0.917em;
    font-weight: bold;
    text-align: center;
}

.scheduleZoom .schedule li > div {
    overflow: hidden;
    float: left;
    width: 432px;
    height: 18px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 2px 3px 0 rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 2px 3px 0 rgba(0, 0, 0, 0.15);
    background: #ebebeb;
}

.scheduleZoom .schedule li > div span {
    display: inline-block;
    float: left;
    position: relative;
    width: 6px;
    height: 18px;
}

.scheduleZoom .schedule li > div span:nth-of-type(3n+4):before {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background: rgba(255, 255, 255, 0.4);
}

.scheduleZoom .schedule li > div span.on {
    background: -moz-linear-gradient(top, #f9b45f 0%, #eaaa5a 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9b45f), color-stop(100%, #eaaa5a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f9b45f 0%, #eaaa5a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f9b45f 0%, #eaaa5a 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f9b45f 0%, #eaaa5a 100%); /* IE10+ */
    background: linear-gradient(to bottom, #f9b45f 0%, #eaaa5a 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9b45f', endColorstr='#eaaa5a'); /* IE6-9 */
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9b45f', endColorstr='#eaaa5a'); /* IE6-9 */
}

.scheduleZoom .schedule li > div span:nth-of-type(3n+4).on:before {
    background: rgba(255, 255, 255, 0.2);
}

.scheduleZoom .timeline {
    padding: 8px 0 14px 49px;
}

.scheduleZoom .timeline li {
    float: left;
    position: relative;
    width: 18px;
    height: 4px;
    margin: 3px 0 0 0;
    border-left: 1px solid #d9d9d9;
}

.scheduleZoom .timeline li span {
    display: block;
    position: absolute;
    left: -8px;
    bottom: -14px;
    width: 14px;
    font-size: 0.833em;
    text-align: center;
}

.scheduleZoom .timeline li:nth-of-type(3n+1) {
    height: 8px;
    margin-top: 0;
}

.scheduleZoom .timeline li:last-child {
    width: 1px;
}

.authMode {
    overflow: hidden;
}

.toggleTxt + .authMode {
    margin: 14px 0 0 0;
}

.authMode table {
    float: left;
    width: 540px;
    border: 1px solid #a49c9e;
    margin-right: 10px;
}

.authMode table.ng-hide + a{
    margin-top: 3px;
}

.authModeByWriteCard, .authModeByReadCard{
    padding: 4px 0 0 20px;
}

.authModeByWriteCard table {
    width: 470px;
}

.authModeByReadCard table {
    width: 532px;
}

.authMode table tr td {
    padding: 9px 0 6px 0;
    text-align: center;
    border-right: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
}

.authMode table tr td:last-child {
    border-right: 0;
}

.authMode table tr:last-child td {
    border-bottom: 0;
}

.authMode [class*="authModeType"] {
    display: inline-block;
    vertical-align: middle;
}

.authMode [class*="authModeType"] > div {
    overflow: hidden;
    display: inline-block;
    float: left;
    width: 105px;
}

.authMode [class*="authModeType"] span {
    float: left;
    width: 52px;
}

.authMode [class*="authModeType"] .biometric,
.authMode [class*="authModeType"] .fingerface,
.authMode [class*="authModeType"] .finger,
.authMode [class*="authModeType"] .password,
.authMode [class*="authModeType"] .fingerByCard {
    float: left;
}

.authMode [class*="authModeType"] .biometric,
.authMode [class*="authModeType"] .fingerface {
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
    width: 92px;
    height: 33px;
}

.authMode [class*="authModeType"] .finger,
.authMode [class*="authModeType"] .card,
.authMode [class*="authModeType"] .face,
.authMode [class*="authModeType"] .password,
.authMode [class*="authModeType"] .id,
.authMode [class*="authModeType"] .fingerByCard {
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
    width: 52px;
    height: 33px;
}
.authMode [class*="authModeType"] .face{
    width:91px;
}

.authMode [class*="authModeType"] .fingerface {
    background: url(../images/common/authmode_icon_fingerface.png) no-repeat left top;
}

.authMode [class*="authModeType"] .biometric {
    background: url(../images/common/authmode_icon_biometric.png) no-repeat left top;
}

.authMode [class*="authModeType"] .finger {
    background: url(../images/common/authmode_icon_finger.png) no-repeat left top;
}

.authMode.userAuthModeShift [class*="authModeType"] .finger {
    background: url(../images/common/authmode_icon_finger.png) no-repeat left top;
    width: 52px;
}

.authMode [class*="authModeType"] .fingerByCard {
    background: url(../images/common/authmode_icon_finger.png) no-repeat left top;
}

.authMode [class*="authModeType"] .card {
    background: url(../images/common/authmode_icon_card.png) no-repeat left top;
}

.authMode [class*="authModeType"] .face {
    background: url(../images/common/authmode_icon_face.png) no-repeat left top;
}

.authMode [class*="authModeType"] .biometric {
    background: url(../images/common/authmode_icon_fingerface.png) no-repeat left top;
}

.authMode .authModeTypeA > span {
    margin-top: 16px;
}

.authMode [class*="authModeType"] .password {
    background: url(../images/common/authmode_icon_password.png) no-repeat left top;
}

.authMode [class*="authModeType"] .id {
    background: url(../images/common/authmode_icon_id.png) no-repeat left top;
}

.authMode [class*="authModeType"] [class*="plus"] {
    float: left;
    width: 32px;
    height: 8px;
    height: 66px;
    background: url(../images/common/authmode_icon_plus.png) no-repeat center center;
    margin: 0;
}

.authMode .authModeType .plusA {
    height: 30px;
}

.authMode .txt {
    display: inline-block;
    width: 125px;
    text-align: left;
    vertical-align: middle;
    line-height: 1.4em;
    padding: 0 5px 0 10px;
}
.authMode td.time > p.txt {
    width: 100%;
    word-wrap: break-word;
}
.authMode .scheduleSmall {
    display: inline-block;
    padding: 0 10px 0 0;
    vertical-align: middle;
}

.authMode .btnTextS {
    float: left;
    /*margin: 0 0 0 10px;*/
}

.fingerCtrl {
}

.fingerCtrl > .cnt:after, .faceCtrl > .cnt:after, .visualFaceCtrl > .cnt:after {
    content: ' ';
    display: block;
    clear: both;
}

.fingerCtrl .sm-btnL, .faceCtrl .sm-btnL, .visualFaceCtrl .sm-btnL {
    float: left;
    width: 55px;
    /*height: 277px;*/
}

.fingerCtrl .sm-btnL a, .faceCtrl .sm-btnL a, .visualFaceCtrl .sm-btnL a{
    width: 100%;
    min-height: 25px;
    padding: 5px 0;
    margin: 0 0 3px 0;
    font-size: 0.917em;
}

.fingerCtrl .imgArea {
    float: left;
    width: 238px;
    /*height: 277px;*/
    margin: 0 9px 0 40px;
}

.faceCtrl .imgArea {
    float: left;
    width: 193px;
    /*height: 277px;*/
    margin: 0 9px 0 40px;
}

.visualFaceCtrl .imgArea {
    float: left;
    width: 193px;
    /*height: 277px;*/
    margin: 0 9px 0 40px;
}

.fingerCtrl .imgArea .cContainer > div {
    width: 110px;
    height: 140px;
    border: 1px solid #bbb;
}

.faceCtrl .imgArea .cContainer > div {
    width: 144px;
    height: 144px;
    border: 1px solid #bbb;
}

.visualFaceCtrl .imgArea .cContainer > div {
    width: 144px;
    height: 144px;
    border: 1px solid #bbb;
}

.fingerCtrl .imgArea div img, .faceCtrl .imgArea div img {
    width: 96%;
    /*height: 100%;*/
}

.fingerCtrl .imgArea .fingerImg {
    margin-bottom: 41px;
    background: url(../images/contents/bg_fingerprint.png) #f9f9f9 no-repeat center center;
}

.faceCtrl .imgArea .faceImg {
    margin-bottom: 41px;
    background: url(../images/contents/bg_face.png) #f9f9f9 no-repeat center center;
}

.visualFaceCtrl .imgArea .visualFaceImg {
    margin-bottom: 41px;
    background: url(../images/contents/bg-visual-face.png) #f9f9f9 no-repeat center center;
}

.faceCtrl .imgArea .hideFacesImg {
    margin-bottom: 41px;
    background: url(../images/contents/bg-hide-face.png) #f9f9f9 no-repeat center center;
}

.visualFaceCtrl .imgArea .hideFacesImg {
    margin-bottom: 41px;
    background: url(../images/contents/bg-hide-visual-face.png) #f9f9f9 no-repeat center center;
}

.visualFaceImg .templateExPicture {
    text-align: center;
    max-width: 144px;
    max-height: 144px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    border-top: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    image-orientation: from-image;
}

.visualFaceImg .dragAndDropImage {
    color: rgb(90, 90, 90);
    font: 500 12px Roboto;
    padding-top: 120px;
}

.visualFaceImg .dragAndDropImage.dragover {
    color: #7d5ac3;
}

.visualFaceImgDropZone {
    display: none;
    position: absolute;
    z-index: 10000;
}

.visualFaceImgDropZone.dragover {
    display: inline;
    background-color: rgba(178,178,178,0.4) !important;
    border: 4px dashed #7d5ac3 !important;
}

.fingerCtrl .imgArea .rawImg, .faceCtrl .imgArea .rawImg, .visualFaceCtrl .imgArea .rawImg {
    background: url(../images/contents/finger_raw_img.png) #f9f9f9 no-repeat center center;
}

.fingerCtrl .imgArea .cContainer{
    position: relative;
    float: left;
    margin: 0 9px 0 0;
}

.faceCtrl .imgArea .cContainer {
    position: relative;
    float: left;
    margin: 0 0 0 9px;
}

.visualFaceCtrl .imgArea .cContainer {
    position: relative;
    float: left;
    margin: 0 0 0 9px;
}

.fingerCtrl .imgArea .cContainer > button, .faceCtrl .imgArea .cContainer > button, .visualFaceCtrl .imgArea .cContainer > button {
    position: absolute;
    top: 144px;
    left: 0;
    width: 100%;
}

.fingerCtrl .imgSize, .faceCtrl .imgSize, .visualFaceCtrl .imgSize {
    text-align: center;
}

.fingerCtrl .imgSize > span, .faceCtrl .imgSize > span, .visualFaceCtrl .imgSize > span{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.fingerCtrl .sm-btnR {
    overflow: hidden;
    float: left;
    position: relative;
    width: 110px;
}

.faceCtrl .sm-btnR {
    overflow: hidden;
    float: left;
    position: relative;
    width: 155px;
}

.visualFaceCtrl .sm-btnR {
    overflow: hidden;
    float: left;
    position: relative;
    width: 155px;
}

.fingerCtrl .sm-btnR button,
.fingerCtrl .sm-btnR a,
.faceCtrl .sm-btnR button,
.faceCtrl .sm-btnR a,
.visualFaceCtrl .sm-btnR button,
.visualFaceCtrl .sm-btnR a{
    width: 100%;
    margin: 0 0 4px 0;
    font-size: 0.917em;
}

.fingerCtrl .sm-btnR a.btnVerify, .faceCtrl .sm-btnR a.btnVerify, .visualFaceCtrl .sm-btnR a.btnVerify {
    margin-top: 59px;
}

.fingerCtrl .sm-btnR label, .faceCtrl .sm-btnR label, .visualFaceCtrl .sm-btnR label {
    position: relative;
    margin-top: 4px;
    font-weight: normal;
}

.cardTemeplate {
    height: 134px;
    border: 1px solid #b4b4b4;
    background: #faf9f9;
}

.cardTemeplate + .chkChange[type="checkbox"] + label {
    margin-top: 10px;
}

.backgroundImgType {
}

.backgroundImgType .select {
    float: left;
    width: 246px !important;
}

.backgroundImgType .wavFileList {
    float: left;
    width: 218px;
    margin: 0 0 0 33px;
}

.backgroundImgType .preview {
    float: left;
    width: 154px;
    height: 81px;
    margin: 0 0 0 86px;
    border: 1px solid #a79fa1;
    background: url(../images/contents/background_images_preview.gif) no-repeat left top;
}

.timeSlotArea {
    padding: 33px 32px 26px 32px;
    border: 1px solid #e1e1e1;
}
.addScheduleDlg .timeSlotArea {
   min-height: 291px;
}

.timeSlotArea .timeLineAdd {
    position: absolute;
    right: 5px;
    top: 5px;
    float: right;
}

.timeSlotArea .timeSlot > li {
    position: relative;
    height: 18px;
    /*padding: 0 106px 0 88px;*/
    padding: 0 0 0 88px;
    margin: 12px 0 0 0;
    zoom: 1;
}

.timeSlotArea .timeSlot > li:after {
    content: "";
    display: block;
    clear: both;
}

.timeSlotArea .timeSlot > li:first-child {
    margin-top: 0;
}

.timeSlotArea h6 {
    position: absolute;
    left: 0;
    top: 0;
    width: 65px;
    height: 18px;
}

.timeSlotArea h6 > b {
    display: inline-block;
    float: left;
    padding: 4px 0 0 0;
    font-size: 0.917em;
    text-align: center;
    white-space: nowrap;
}

.timeSlotArea h6 > button {
    display: inline-block;
    float: right;
    margin: 1px 0 0 0;
}

.timeSlotArea .timeline {
    width: 720px;
    float: left;
    margin: 0 8px 0 0;
    position: relative;
    height: 18px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 2px 3px 0 rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 2px 3px 0 rgba(0, 0, 0, 0.15);
    background: #ebebeb;
}

.timeSlotArea .timeline.typeB{
    width: 576px;
}

/* select Attribute */
.timeSlotArea .timeline.disabled {
    -webkit-box-shadow: none;
    box-shadow: none;
    background: #e6e6e6;
}

.timeSlotArea .timeline .on {
    position: absolute;
    top: 0;
    height: 18px;
    background: -moz-linear-gradient(top, #f9b45f 0%, #eaaa5a 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9b45f), color-stop(100%, #eaaa5a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f9b45f 0%, #eaaa5a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f9b45f 0%, #eaaa5a 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f9b45f 0%, #eaaa5a 100%); /* IE10+ */
    background: linear-gradient(to bottom, #f9b45f 0%, #eaaa5a 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9b45f', endColorstr='#eaaa5a'); /* IE6-9 */
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9b45f', endColorstr='#eaaa5a'); /* IE6-9 */
}

.timeSlotArea .timeline .box {
    display: none;
    position: absolute;
    top: 0;
    width: 92px;
    height: 18px;
    z-index: 15;
    /*border: 1px solid red;*/
}

.timeSlotArea .timeline .box.focus {
    display: block;
    /*z-index:9999;*/
    /*color: #fff;*/
    /*text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);*/
    /*border: 1px solid #19a5a0;*/
    /*-webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 2px 4px 0 rgba(0, 0, 0, 0.3);*/
    /*box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 2px 4px 0 rgba(0, 0, 0, 0.3);*/
    background: -moz-linear-gradient(top, #7dcace 0%, #6db9be 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7ecace), color-stop(100%, #6db9be)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #7ecace 0%, #6db9be 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #7ecace 0%, #6db9be 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #7ecace 0%, #6db9be 100%); /* IE10+ */
    background: linear-gradient(to bottom, #7ecace 0%, #6db9be 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7ecace', endColorstr='#6db9be'); /* IE6-9 */
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7ecace', endColorstr='#6db9be'); /* IE6-9 */
}
.timeSlotArea .timeline .timeController > .toastPopup {
    display: none;
    position: absolute;
    top: 53px;
    width: 180px;
    height: 35px;
    z-index: 50;
}

.timeSlotArea .timeline .timeController > .toastPopup > span > input {
    width: 50px;
    text-align: center;
    border: 1px solid white;
}

.timeSlotArea .timeline .timeController > .toastPopup > span > input.disabled {
    background: #fff;
    color: #333;
}

.timeSlotArea .timeline .timeController > .toastPopup > span > input:focus {
    border: 1px solid;
}

.timeSlotArea .timeline .timeController > .toastPopup.focus {
    display: block;
    z-index: 9999;
}

.timeSlotArea .timeline .left, .timeSlotArea .timeline .right {
    display: none;
    position: absolute;
    top: -27px;
    width: 92px;
    height: 27px;
    z-index: 50;
}



.timeSlotArea .timeline .focus .left, .timeSlotArea .timeline .focus .right {
    display: block;
    z-index:9999;
}

.timeSlotArea .timeline .left {
    left: -92px;
    background: url(../images/contents/timeslot_left.png) no-repeat left top;
}

.timeSlotArea .timeline .right {
    right: -92px;
    background: url(../images/contents/timeslot_right.png) no-repeat right top;
}

.timeSlotArea .timeline .left a, .timeSlotArea .timeline .right a {
    display: block;
    float: left;
    width: 21px;
    height: 23px;
    color: #fff;
    text-align: center;
    line-height: 21px;
}

.timeSlotArea .timeline .left a:hover, .timeSlotArea .timeline .left a:focus, .timeSlotArea .timeline .right a:hover, .timeSlotArea .timeline .right a:focus {
    color: #e1c855;
}

.timeSlotArea .timeline .left input, .timeSlotArea .timeline .right input {
    display: inline-block;
    float: left;
    width: 50px;
    height: 23px;
    padding: 0;
    margin: 0;
    font-size: 10px;
    color: #fff;
    font-weight: normal;
    line-height: 23px;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-appearance: none;
    border: 0;
    border-radius: 0;
    background: none;
}

.timeSlotArea .timeline .left input:focus, .timeSlotArea .timeline .right input:focus {
    border: 0;
}

.timeSlotArea .timeline .dragLeft, .timeSlotArea .timeline .dragRight {
    display: block;
    position: relative;
    width: 5px;
    height: 18px;
    cursor: e-resize;
    z-index: 50;
}

.timeSlotArea .timeline .dragLeft {
    float: left;
}

.timeSlotArea .timeline .dragRight {
    float: right;
}

.timeSlotArea .timeline .startTime {
    position: absolute;
    top: -10px;
}

.timeSlotArea .graduation {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 18px;
    z-index: 20;
}

.timeSlotArea .graduation span {
    display: inline-block;
    float: left;
    width: 4.166666%;
    height: 18px;
    border-right: 1px solid rgba(255, 255, 255, 0.7);
}

.timeSlotArea div.actionBtn {
    /*float: left;*/
    margin-left: 8px;
}

.timeSlotArea .time {
    position: absolute;
    right: 0;
    top: 0;
    padding: 4px 0 0 0;
    font-size: 0.917em;
    font-weight: bold;
}

.timeSlotArea a.delete {
    position: absolute;
    right: -20px;
    top: 1px;
}

.timeSlotArea .txt {
    position: absolute;
    right: 0;
    top: 0;
    width: 120px;
    padding: 4px 0 0 0;
    font-size: 0.917em;
    font-weight: bold;
    text-align: left;
}

.timeSlotArea .cntR {
    position: absolute;
    right: 0;
    top: 0;
    width: 155px;
    text-align: left;
}

.timeSlotArea .cntR span {
    display: inline-block;
    width: 115px;
    padding: 4px 0 0 0;
    font-size: 0.917em;
    font-weight: bold;
    text-align: left;
}

.timeSlotArea .cntR .btnLoad {
    display: inline-block;
    margin: 1px 0 0 0;
}

.timeSlotArea .timeGuideTop {
    width: 720px;
    position: relative;
    height: 14px;
    margin: 1px 106px 0 88px;
}

.timeSlotArea .timeGuideTop.typeB{
    width: 576px;
}

.timeSlotArea .timeGuideBottom {
    width: 720px;
    position: relative;
    height: 22px;
    margin: 0px 106px 0 88px;
}

.timeSlotArea .timeGuideBottom.typeB{
    width: 576px;
}

.timeSlotArea .timeGuideTop li {
    float: left;
    position: relative;
    width: 4.166666%;
    height: 8px;
    margin: 3px 0 0 0;
}
.timeSlotArea .timeGuideBottom li {
    float: left;
    position: relative;
    width: 4.166666%;
    height: 8px;
    margin: 0 0 0 0;
    /*border-left: 1px solid #d9d9d9;*/
    border-right: 1px solid #d9d9d9;
}
.timeSlotArea .timeGuideBottom li:first-child {
    float: left;
    position: relative;
    width: 4.166666%;
    height: 8px;
    margin: 0 0 0 0;
    border-left: 1px solid #d9d9d9;
}

.timeSlotArea .timeGuideTop li span {
    display: block;
    position: absolute;
    left: -8px;
    /*bottom: -14px;*/
    width: 14px;
    font-size: 0.87em;
    text-align: center;
}
.timeSlotArea .timeGuideBottom li span {
    display: block;
    position: absolute;
    left: -8px;
    bottom: -14px;
    width: 14px;
    font-size: 0.87em;
    text-align: center;
}

.timeSlotArea .timeGuide li:nth-of-type(3n+1) {
    height: 12px;
    margin-top: 0;
}

.timeSlotArea .timeGuideTop li:last-child, .timeSlotArea .timeGuideBottom li:last-child {
    position: absolute;
    right: 0;
    width: 0;
}

/* timeSlotNew */
.timeSlotArea.typeA .timeSlot > li {
    padding-left: 150px;
}

.timeSlotArea.typeA h6 {
    width: 134px;
    text-align: left;
}

.timeSlotArea.typeA h6 > b {
    text-align: left;
}

.timeSlotArea.typeA .timeGuideTop, .timeSlotArea.typeA .timeGuideBottom {
    margin-left: 150px;
}

.timeSlotArea.typeB .timeSlot > li {
    padding-left: 48px;
    padding-right: 166px;
}

.timeSlotArea.typeB .timeGuide {
    margin-left: 48px;
    margin-right: 166px;
}

.timeSlotArea.typeC .timeSlot > li {
    padding-left: 100px;
    padding-right: 0;
}

.timeSlotArea.typeC h6 {
    width: 90px;
    text-align: left;
}

.timeSlotArea.typeC h6 > b {
    text-align: left;
}

.timeSlotArea.typeC .timeGuide {
    margin-left: 100px;
    margin-right: 0;
}

.searchOption {
}

.searchOption li {
    overflow: hidden;
    margin: 14px 0 0 0;
}

.searchOption li:first-child {
    margin-top: 0;
}

.searchOption li b {
    float: left;
    display: block;
    padding: 0 0 0 10px;
    margin: 9px 8px 0 0;
    font-weight: normal;
    background: url(../images/common/bl_item.png) no-repeat left 5px;
}

.searchOption li .input {
    float: left;
    width: 54px;
}

.settingArea {
    position: relative;
    padding: 20px;
    border: 1px solid #a49c9e;
    background: #fdfbed;
}

.layoutDouble > .settingArea {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    border-left: 0;
}

.layoutDouble > .tableListTypeA tbody tr:last-child td {
    border-bottom: 1px solid #ebebeb;
}

.layoutDouble > div > .datagrid {
    min-height: 300px;
}

.layoutDouble > div > .datagrid tbody tr:last-child td {
    border-bottom: 1px solid #ebebeb;
}

.authModeDragDrop {
    position: relative;
    border: 1px solid #e1e1e1;
}

.authModeDragDrop .drag {
    height: 100px;
    padding: 20px 18px 17px 18px;
    border-bottom: 1px dashed #e5e5e5;
    background: #fcfcfc;
}

.authModeDragDrop .drag li {
    position: relative;
    float: left;
    width: 122px;
    height: 61px;
    margin: 0 8px 0 0;
}

.authModeDragDrop .authModeDragPannel {
    cursor: pointer;
    position: relative;
    z-index: 1;
    width: 122px;
    height: 61px;
}

.authModeDragDrop .drag li .bgLabel,
.authModeDragDrop .authModeDragPannel > span {
    display: inline-block;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 39px;
    width: 100%;
    height: 61px;
    text-align: center;
    color: #594b4f;
    font-size: 1.1em;
}
.authModeDragDrop .drag li .bgLabel {
    color: #cacaca;
}
.authModeDragDrop .drag li img {
    cursor: pointer;
}

.authModeDragDrop .drag li:last-child {
    margin-right: 0;
}

.authModeDragDrop .drag .finger {
    background: url(../images/contents/icon_auth_finger_bg.png) no-repeat center top;
}

.authModeDragDrop .drag .biometric {
    background: url(../images/contents/icon_auth_biometric_bg.png) no-repeat center top;
}

.authModeDragDrop .drag .fingerface {
    background: url(../images/contents/icon_auth_fingerface_bg.png) no-repeat center top;
}

.userAuthModeShift .authModeDragDrop .drag .finger {
    background: url(../images/contents/icon_auth_finger_bg.png) no-repeat center top;
}

.userAuthModeShift .authModeDragDrop .drag .fingerByCard {
    background: url(../images/contents/icon_auth_finger_bg.png) no-repeat center top;
}

.authModeDragDrop .drag .card {
    background: url(../images/contents/icon_auth_card_bg.png) no-repeat center top;
}

.authModeDragDrop .drag .face {
    background: url(../images/contents/icon_auth_face_bg.png) no-repeat center top;
}

.authModeDragDrop .drag .id {
    background: url(../images/contents/icon_auth_id_bg.png) no-repeat center top;
}

.authModeDragDrop .drag .password {
    background: url(../images/contents/icon_auth_password_bg.png) no-repeat center top;
}

.authModeDragDrop .drag .pin {
    background: url(../images/contents/icon_auth_pin_bg.png) no-repeat center top;
}

.authModeDragDrop .drop {
    width: 470px;
    height: 245px;
    padding: 20px 0 20px 0;
    margin: 0 auto;
}
.authModeDragDrop .drop .bgLabel {
    display: none;
}

.authModeDragDrop .drop .item {
    width: 122px;
    height: 62px;
    margin-bottom: 10px;
    /*background: url(../images/contents/auth_drop_bg.png) no-repeat center top;*/
}

.authModeDragDrop .drop .empty {
    border: 1px dashed dimgray;
    border-radius: 5px;
}

.authModeDragDrop .drop .solo {
    position: relative;
    top: 70px;
}

.authModeDragDrop .drop .delete {
    width: 22px;
    height: 22px;
    position: relative;
    top: -68px;
    left: 106px;
    /*border: 1px solid black;*/
    cursor: pointer;
    z-index: 50;
}

.authModeDragDrop .drop .finger {
    float: left;
    /*margin: 31px 0 0 0;*/
}

.authModeDragDrop .drop .password {
    float: left;
    /*position: relative;*/
    /*margin: 31px 0 0 51px;*/
}

.authModeDragDrop .drop .mix {
    float: left;
    position: relative;
    height: 100%;
    display: inline-block;
    /*margin: 0 0 0 51px;*/
}

.authModeDragDrop .drop .plus {
    float: left;
    position: relative;
    margin: 0 0 0 51px;
}

.authModeDragDrop .drop .plus:before
/*, .authModeDragDrop .drop .password:before */
 {
    display: block;
    content: "";
    position: absolute;
    left: -32px;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    background: url(../images/contents/auth_drop_plus.png) no-repeat left top;
}

.authModeDragDrop .dragOver {
    position: absolute;
    left: 50%;
    top: 30%;
}

/* wavFileList */
.wavFileList {
    position: relative;
}

.wavFileList ul {
    width: 100%;
    border: 1px solid #a49c9e;
}

.wavFileList ul li {
    overflow: hidden;
    position: relative;
    height: 27px;
    padding: 0 15px 0 15px;
    line-height: 26px;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-top: 1px solid #ebebeb;
}

.wavFileList ul li:first-child {
    border-top: 0;
}

/* btnDel */
.wavFileList ul.btnAct li {
    padding-right: 40px;
}

.wavFileList ul li > a {
    position: absolute;
    top: 6px;
    right: 11px;
}

.wavFileList ul li > a:after {
    display: block;
    content: "";
    position: absolute;
    right: 22px;
    top: -6px;
    bottom: -6px;
    width: 1px;
    background: #ebebeb;
}

.triggerAction {
    margin: 12px 0 0 0;
    overflow: visible !important;
}

.triggerAction > div:first-child {
    padding-right: 3px;
}

.triggerAction > div:last-child {
    padding-left: 3px;
}

.triggerAction .layout {
    border: 1px solid #a49c9e;
    overflow: visible !important;
    height: 488px;
    z-index: 9999
}

.triggerAction .layout > .cnt {
    float: left;
    width: 50%;
    height: 449px;
}

.triggerAction .layout > .cnt:last-child {
    border-left: 1px solid #ebebeb;
}

.triggerAction .radioListA {
    margin: 20px 20px 0 20px;
}

.triggerAction .formList {
    margin: 0 20px 0 20px;
}

.triggerAction .formList > ul {
    margin-top: 0;
}

.triggerAction .btnAction {
    margin: 20px 20px 0 20px;
}

.triggerAction .tit {
    height: 37px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    line-height: 37px;
    background: #a49c9e;
}

.triggerAction .cnt-right .selectChkList {
    max-height: 333px;
    overflow-x: auto;
}

.triggerAction .cnt-right .selectChkList li .chkChange[type="radio"] + label{
    font-weight: normal!important;
}
/* form */
.triggerAction .formList .input, .triggerAction .formList .select {
    width: 100%;
}

.notice {
}

.notice .info {
    overflow: hidden;
    margin: 12px 0 0 0;
}

.notice .info .cntTitleS {
    display: inline-block;
    width: 120px;
    margin: 9px 0 0 0;
}

.notice .info span {
    display: inline-block;
    width: 70px;
    margin: 9px 10px 0 0;
    line-height: 13px;
    vertical-align: top;
}

.notice .info .btnFunc {
    float: right;
}

.mapView {
    overflow: hidden;
    padding: 85px 80px 75px 60px;
}

.mapView figure img {
    width: 100%;
}

.mapView .door {
    position: absolute;
}

.mapView .door .info {
    position: absolute;
    top: -7px;
    min-width: 185px;
    padding: 15px 0 15px 0;
    border: 2px solid #1aa69f;
    background: #fff;
    cursor: pointer;
}

.mapView .door .info b {
    display: block;
    margin: 0 13px 0 15px;
    min-height: 11px;
    white-space: nowrap;
}

.mapView .door .info span {
    display: block;
    min-height: 11px;
    padding: 0 20px 0 0;
    margin: 9px 13px 0 15px;
    color: #fa4b37;
    white-space: nowrap;
    background-image: url(../images/common/arr_dark_close.png);
    background-repeat: no-repeat;
    background-position: right 3px;
}

.mapView .door .info .sm-btn {
    display: none;
    height: 35px;
    padding: 6px 0 0 0;
    margin: 10px 0 0 0;
    text-align: center;
    border-top: 1px solid #ede381;
    background: #f7f2c0;
}

.mapView .door .info .sm-btn a {
    display: inline-block;
    padding: 3px;
}

/* position */
.mapView .door.left .info {
    right: 45px;
}

.mapView .door.right .info {
    left: 45px;
}

/* hover */
.mapView .door .info:hover, .mapView .door .info:focus {
    padding-bottom: 0;
}

.mapView .door .info:hover span, .mapView .door .info:focus span {
    background-image: url(../images/common/arr_dark_open.png);
}

.mapView .door .info:hover .sm-btn, .mapView .door .info:focus .sm-btn {
    display: block;
}

.selectDoorIcon {
    position: absolute;
}

.selectDoorIcon .sm-close {
    position: absolute;
    right: -7px;
    top: -6px;
}

.selectDoorIcon p {
    margin: 8px 0 0 0;
    color: #594b4f;
    font-weight: bold;
    text-align: center;
}

[class*="filterType"] {
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #a49c9e;
    background: url(../images/contents/filter_bg.png) repeat center center;
}

.filter-result-row {
    outline: 1px solid #a49c9e;
    background: url(../images/contents/filter_bg.png) repeat center center;
}

[class*="filterType"] .filter-header {
    width: 100%;
}

[class*="filterType"] .filter-header > ul {
    height: 43px;
}

[class*="filterType"] .filter-header > ul > li {
    float: left;
    position: relative;
}

[class*="filterType"] .filter-header > ul > li > p.item {
    height: 43px;
    padding: 16px 0 0 0;
    color: #fff;
    font-weight: bold;
    text-align: center;
    border-left: 1px solid #988f90;
    background: #a49c9e;
}

[class*="filterType"] .filter-header > ul > li:first-child p.item {
    border-left: 0;
}

[class*="filterType"] .filter-header > ul > li > p.item.icon {
    padding-top: 14px;
}

[class*="filterType"] .filter-header > ul > li .ibtnFilter {
    display: inline-block;
    position: absolute;
    right: 8px;
    top: 16px;
    margin: 0;
}

/* filterTypeA */
.filterTypeA .filter-header {
    width: 100%;
}

/* filterTypeB */
.filterTypeB .filter-header > ul > li {
    width: 25%;
}

/* filter */
[class*="datagridType"] .filter {
    display: none;
    position: absolute;
    top: 44px;
    max-height: 300px;
    padding: 0 0 1px 0;
    border: 1px solid #a49c9e;
    border-top: 0;
    -webkit-box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.1);
    background: #fdfbed;
    z-index: 100;
}

[class*="datagridType"] .filter.left {
    left: 0px;
}

[class*="datagridType"] .filter.right {
    right: -1px;
}

[class*="datagridType"] .filter > ul > li:last-child {
    height: 26px;
    border-bottom: 0;
}

[class*="datagridType"] .filter-header > ul > li.open .filter {
    display: block;
}

[class*="datagridType"] .filter.left .searchSelect.typeClear {
    background: #fdfbed;
}

/* filterList */
[class*="datagridType"] .filter .filterList > li {
    height: 27px;
    padding: 9px 10px 0 10px;
    font-size: 11px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid #f0eee1;
    cursor: pointer;
}

[class*="datagridType"] .filter .filterList > li:hover, [class*="datagridType"] .filter .filterList > li:focus {
    background: #f7f2c0;
}

[class*="datagridType"] .filter .filterList > li.selection {
    background: #dcf1f2;
}

/* filterResult */
.filterResult {
    display: inline-block;
    margin-right: 1px;
    margin-left: 1px;
    margin-bottom: 10px;
    border: 1px solid #a49c9e;
    border-top: 0;
    -webkit-box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.1);
    background: #fdfbed;
    max-height: 140px;
}

.filterResult > ul > li {
    overflow: hidden;
    position: relative;
    height: 27px;
    padding: 9px 25px 0 10px;
    font-size: 11px;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-bottom: 1px solid #f0eee1;
    cursor: pointer;
}

.filterResult > ul > li:last-child {
    height: 26px;
    border-bottom: 0;
}

.filterResult > ul > li:hover, .filterResult > ul > li:focus {
    background: #f7f2c0;
}

.filterResult > ul > li .btnDel {
    display: block;
    position: absolute;
    right: 3px;
    top: 3px;
    width: 20px;
    height: 20px;
    background-image: url(../images/contents/btn_delete_filter.png);
    background-repeat: no-repeat;
    background-position: center center;
}

.filterResult > ul > li .btnDel:hover, .filterResult > ul > li .btnDel:focus {
    background-image: url(../images/contents/btn_delete_filter_hover.png);
}

.filterResult > ul > li.searchSelect.typeInput {
    padding: 4px 5px 4px 7px;
    background: none;
}

[class*="datagridType"] .searchSelect.typeInput input[type="text"] {
    display: block;
    height: 19px;
    line-height: 19px;
    font-size: 11px;
    padding: 0 20px 0 8px;
}

[class*="datagridType"] .searchSelect.typeInput .btnClose {
    display: block;
    top: 8px;
    right: 13px;
}

/* filterChkList */
.filterResult > ul.filterChkList > li {
    padding-top: 5px;
}

[class*="datagridType"] .filterChkList > li .chkChange[type="checkbox"] + label {
    margin-top: 0px;
}

[class*="datagridType"] .filterChkList > li .chkChange[type="checkbox"] + label .txt {
    padding-top: 1px;
}

/* tableList */
[class*="datagridType"] .tableList {
    clear: both;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border: 0;
}

[class*="datagridType"] .datagridTypeA, [class*="datagridType"] .datagridTypeA .datagrid {
    clear: both;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border: 0;
}

[class*="datagridType"] .datagridTypeA .datagrid-header {
    display: none;
}

[class*="datagridType"] .datagridTypeA .datagrid-body tr:first-child td {
    border-width: 1px 1px 0 0;
    border-color: #8c8282 #fff #fff #fff;
}
.markNumber {
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    overflow : hidden;
    max-width: calc(100% - 60px);
    vertical-align: top;
}

[class*="datagridType"].noBg {
    background: none;
    border: 0;
}

[class*="datagridType"].noBg .filterResult {
    margin-right: 0;
}

/* dataFilterList */
.dataFilterList {
    overflow: hidden;
}

.dataFilterList > div {
    float: left;
    width: 148px;
    border: 1px solid #a49c9e;
    margin-left: -1px;
}

.dataFilterList > div:first-child {
    margin-left: 1px;
}

.dataFilterList > div h6 {
    position: relative;
    height: 43px;
    padding: 16px 0 0 0;
    color: #fff;
    font-weight: bold;
    text-align: center;
    background: #a49c9e;
}

.dataFilterList > div h6 .ibtnFilter {
    display: block;
    position: absolute;
    right: 8px;
    top: 16px;
    margin: 0;
}

.showImageLayer {
    position: fixed;
    left: 79px;
    bottom: 32px;
    width: 242px;
    border: 1px solid #b0aba9;
    background: #fdfbed;
    z-index: 200;
}

.showImageLayer > div {
    position: relative;
    width: 240px;
    padding: 21px 22px 20px 22px;
}

.showImageLayer .sm-close {
    position: absolute;
    right: 10px;
    top: 10px;
}

.showImageLayer figure {
    width: 108px;
    height: 144px;
    margin: 0 auto;
    border: 1px solid #a69ea0;
}

.showImageLayer figure img {
    width: 106px;
    height: 142px;
}

.showImageLayer .info {
    margin: 18px 0 0 0;
}

.showImageLayer .info li {
    position: relative;
    padding: 0 0 0 67px;
    margin: 0 0 7px 0;
    font-size: 11px;
    color: #6e6e6e;
    line-height: 1;
}

.showImageLayer .info li b {
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 0 0 12px;
    color: #5a5a5a;
    font-weight: normal;
    background: url(../images/common/bl_item_small_point.png) no-repeat left 5px;
}

.showImageLayer .sm-btn {
    margin: 19px 0 0 0;
    text-align: center;
}

.showImageLayer .sm-btn a {
    margin: 0 1px;
}

.showImageLog {
}

.showImageLog figure {
    float: left;
    width: 216px;
    height: 288px;
    border: 1px solid #a49c9e;
}

.showImageLog figure img {
    width: 214px;
    height: 286px;
}

.showImageLog .info {
    float: left;
    margin: 100px 0 0 20px;
}

.showImageLog .info li {
    position: relative;
    padding: 0 0 0 72px;
    margin: 0 0 7px 0;
    font-size: 11px;
    color: #6e6e6e;
    line-height: 1;
}

.showImageLog .info li b {
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 0 0 12px;
    color: #5a5a5a;
    font-weight: bold;
    background: url(../images/common/bl_item_small_point.png) no-repeat left 5px;
}
.triggerActionInfoContents > form > .btnR > button {
    vertical-align: top;
}
.checkboxListType1 {
    zoom: 1;
}

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

.checkboxListType1 [class*="content-type"] {
    float: left;
    width: 25%;
    padding: 0 12px 0 0;
}

.checkboxListType1 [class*="content-type"]:last-child {
	padding-right: 0;
}

.checkboxListType1 [class*="content-type"] h6 {
    height: 37px;
    padding: 13px 0 0 0;
    font-weight: bold;
    text-align: center;
    border: 1px solid #b4b4b4;
    background: #f9f9f9;
}

.checkboxListType1 .multiRow[class*="content-type"] h6 {
    margin-top: -1px;
}

.checkboxListType1 .multiRow[class*="content-type"] h6:first-child {
    margin-top: 0;
}

.checkboxListType1 [class*="content-type"] .scrollArea {
    height: 526px;
    border: 1px solid #b4b4b4;
    border-top: 0;
}

.content-typeB .checkboxListType1 {
}

.content-typeC .checkboxListType1 {
    width: 50%;
}

.content-typeD .checkboxListType1 [class*="content-type"] {
    width: 33%;
}

.content-typeC .checkboxListType1 .content-type .scrollArea.containedBox {
    padding: 15px 12px 10px;
}

.content-typeC .checkboxListType1 .content-type .scrollArea > [class*="content-type"] {
    width: 50%;
}

.content-typeC .checkboxListType1 .content-type .scrollArea {
    height: 424px;
}
.checkboxListType1 .tabAct > .scrollArea {
    display: none;
}
.checkboxListType1 .biostarAction {
}
.checkboxListType1 .bioStarAction  .ngbssEmailAddDeleteList {
    /*display: none;*/
}
.checkboxListType1 .addEmailForm {
    display: none;
}
.checkboxListType1 .bioStarAction .btnSearchOption {
    width: auto;
    position: absolute;
    right: 13px;
    top: -7px;
}

.checkboxListType1 .bioStarAction .tableListTypeA td {
    text-align: center;
}

.action-set-list [class*="content-type"] h6 {
    height: 37px;
    padding: 13px 0 0 0;
    font-weight: bold;
    text-align: center;
    border: 1px solid #b4b4b4;
    background: #f9f9f9;
}
.action-set-list [class*="content-type"] .scrollArea {
    height: 526px;
    border: 1px solid #b4b4b4;
    border-top: 0;
}
.action-set-list [class*="content-type"] {
    float: left;
    width: 50%;
    padding: 0 12px 0 0;
}

.action-set-list [class*="content-type"]:last-child {
    padding-right: 0;
}
.popCnt .action-set-list [class*="content-type"] .scrollArea {
    height: 342px;
}

.settingMain {
    max-width: 940px;
}
.settingMain ul:after {
    content: '';
    display: block;
    clear: both;
}

.settingMain li {
    float: left;
    width: 179px;
    height: 179px;
    margin: 0 8px 8px 0;
    /*text-indent: -9999px;*/
    border: 2px solid #b4b4b4;
    border-radius: 8px;
    background-color: #fff;
}

.settingMain li a {
    display: block;
    width: 179px;
    height: 179px;
    background-repeat: no-repeat;
}
.settingMain li a:hover {
    color: #19a5a0;
}
.settingMain li a > span {
    display: inline-block;
    width: 100%;
    margin-top: 130px;
    text-align: center;
    font-weight: 900;
    font-size: 1.25em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.settingMain li.account a {
    background-image: url(../images/contents/setting_menu_account.png);
    background-position: center 43px;
}

.settingMain li.ad a {
    background-image: url(../images/contents/setting_menu_ad.png);
    background-position: center 25px;
}

.settingMain li.preference a {
    background-image: url(../images/contents/setting_menu_preference.png);
    background-position: center 41px;
}

.settingMain li.backup a {
    background-image: url(../images/contents/setting_menu_backup.png);
    background-position: center 31px;
}

.settingMain li.card a {
    background-image: url(../images/contents/setting_menu_card.png);
    background-position: center 51px;
}

.settingMain li.cardformat a {
    background-image: url(../images/contents/setting_menu_cardformat.png);
    background-position: center 51px;
}

.settingMain li.server a {
    background-image: url(../images/contents/setting_menu_server.png);
    background-position: center 42px;
}

.settingMain li.triggerAction a {
    background-image: url(../images/contents/setting_menu_triggerAction.png);
    background-position: center 32px;
}

.settingMain li.schedule a {
    background-image: url(../images/contents/setting_menu_schedule.png);
    background-position: center 37px;
}

.settingMain li.usbdevices a {
    background-image: url(../images/contents/setting_menu_usbdevices.png);
    background-position: center 33px;
}

.settingMain li.badging a {
    background-image: url(../images/contents/setting_menu_badging.png);
    background-position: center 44px;
}

.settingMain li.https a {
    background-image: url(../images/contents/setting_menu_https.png);
    background-position: center 44px;
}

.settingMain li.cloud a {
    background-image: url(../images/contents/setting_menu_cloud.png);
    background-position: center 44px;
}

.settingMain li.bioMini a {
    background-image: url(../images/contents/setting_menu_biomini.png);
    background-position: center 42px;
}

.settingMain li.faceGroupMatching a {
    background-image: url(../images/contents/setting_menu_facegm.png);
    background-position: center 42px;
}

.settingMain li.auditTrail a {
    background-image: url(../images/contents/setting_menu_audit_trail.png);
    background-position: center 30px;
}

.settingMain li.video a {
    background-image: url(../images/contents/setting_menu_video.png);
    background-position: center 33px;
}

.settingMain li.dst a {
    background-image: url(../images/contents/setting_menu_dst.png);
    background-position: center 33px;
}

.settingMain li.systemSecurity a {
    background-image: url(../images/contents/setting_menu_syssecurity.png);
    background-position: center 33px;
}

.settingMain li.imageLog a {
    background-image: url(../images/contents/setting_menu_badging.png);
    background-position: center 44px;
}

.settingMain li.triggerAction {
    /*clear: both;*/
}
.settingMain li.alert {
    padding: 0;
}
.settingMain li.alert a {
    background-image: url(../images/contents/setting_menu_alert.png);
    background-position: center 36px;
}

.settingMain li.mobileCredential a {
    background-image: url(../images/contents/setting_menu_mobile.png);
    background-position: center 30px;
}

.settingMain li.emailContent a {
    background-image: url(../images/contents/setting_menu_mailsend.png);
    background-position: center 30px;
}

.settingMain li.license a {
    background-image: url(../images/contents/setting_menu_license.png);
    background-position: center 35px;
}

.settingMain li.cardPrinter a {
    background-image: url(../images/contents/setting_menu_cardprinter.png);
    background-position: center 30px;
}

.settingMain li.customInterface a {
    background-image: url(../images/contents/setting_menu_quickaction.png);
    background-position: center 30px;
}

.settingMain li.customInterface:hover a, .settingMain li.customInterface:focus a, .settingMain li.customInterface:active a {
    background-image: url(../images/contents/setting_menu_quickaction_hover.png);
}

.settingMain li.account:hover a, .settingMain li.account:focus a, .settingMain li.account:active a {
    background-image: url(../images/contents/setting_menu_account_hover.png);
}

.settingMain li.ad:hover a, .settingMain li.account:focus a, .settingMain li.ad:active a {
    background-image: url(../images/contents/setting_menu_ad_hover.png);
}

.settingMain li.preference:hover a, .settingMain li.preference:focus a, .settingMain li.preference:active a {
    background-image: url(../images/contents/setting_menu_preference_hover.png);
}

.settingMain li.backup:hover a, .settingMain li.backup:focus a, .settingMain li.backup:active a {
    background-image: url(../images/contents/setting_menu_backup_hover.png);
}

.settingMain li.card:hover a, .settingMain li.card:focus a, .settingMain li.card:active a {
    background-image: url(../images/contents/setting_menu_card_hover.png);
}

.settingMain li.cardformat:hover a, .settingMain li.cardformat:focus a, .settingMain li.cardformat:active a {
    background-image: url(../images/contents/setting_menu_cardformat_hover.png);
}

.settingMain li.server:hover a, .settingMain li.server:focus a, .settingMain li.server:active a {
    background-image: url(../images/contents/setting_menu_server_hover.png);
}

.settingMain li.triggerAction:hover a, .settingMain li.triggerAction:focus a, .settingMain li.triggerAction:active a {
    background-image: url(../images/contents/setting_menu_triggerAction_hover.png);
}

.settingMain li.schedule:hover a, .settingMain li.schedule:focus a, .settingMain li.schedule:active a {
    background-image: url(../images/contents/setting_menu_schedule_hover.png);
}

.settingMain li.usbdevices:hover a, .settingMain li.usbdevices:focus a, .settingMain li.usbdevices:active a {
    background-image: url(../images/contents/setting_menu_usbdevices_hover.png);
}

.settingMain li.badging:hover a, .settingMain li.badging:focus a, .settingMain li.badging:active a {
    background-image: url(../images/contents/setting_menu_badging_hover.png);
}

.settingMain li.alert:hover a, .settingMain li.alert:focus a, .settingMain li.alert:active a {
    background-image: url(../images/contents/setting_menu_alert_hover.png);
}

.settingMain li.https:hover a, .settingMain li.https:focus a, .settingMain li.https:active a {
    background-image: url(../images/contents/setting_menu_https_hover.png);
}

.settingMain li.cloud:hover a, .settingMain li.cloud:focus a, .settingMain li.cloud:active a {
    background-image: url(../images/contents/setting_menu_cloud_hover.png);
}

.settingMain li.bioMini:hover a, .settingMain li.bioMini:focus a, .settingMain li.bioMini:active a {
    background-image: url(../images/contents/setting_menu_biomini_hover.png);
}

.settingMain li.faceGroupMatching:hover a, .settingMain li.faceGroupMatching:focus a, .settingMain li.faceGroupMatching:active a {
    background-image: url(../images/contents/setting_menu_facegm_hover.png);
}

.settingMain li.auditTrail:hover a, .settingMain li.auditTrail:focus a, .settingMain li.auditTrail:active a {
    background-image: url(../images/contents/setting_menu_audit_trail_hover.png);
}

.settingMain li.video:hover a, .settingMain li.video:focus a, .settingMain li.video:active a {
    background-image: url(../images/contents/setting_menu_video_hover.png);
}

.settingMain li.imageLog:hover a, .settingMain li.imageLog:focus a, .settingMain li.imageLog:active a {
    background-image: url(../images/contents/setting_menu_badging_hover.png);
}

.settingMain li.dst:hover a, .settingMain li.dst:focus a, .settingMain li.dst:active a {
    background-image: url(../images/contents/setting_menu_dst_hover.png);
}

.settingMain li.systemSecurity:hover a, .settingMain li.systemSecurity:focus a, .settingMain li.systemSecurity:active a {
    background-image: url(../images/contents/setting_menu_syssecurity_hover.png);
}

.settingMain li.visitorManagement a {
    background-image: url(../images/visitor/setting_menu_visitor.png);
    background-position: center 33px;
}

.settingMain li.visitorManagement:hover a, .settingMain li.visitorManagement:focus a, .settingMain li.visitorManagement:active a {
    background-image: url(../images/visitor/setting_menu_visitor_hover.png);
}

.settingMain li.mobileCredential:hover a, .settingMain li.mobileCredential:focus a, .settingMain li.mobileCredential:active a {
    background-image: url(../images/contents/setting_menu_mobile_hover.png);
}

.settingMain li.emailContent:hover a, .settingMain li.emailContent:focus a, .settingMain li.emailContent:active a {
    background-image: url(../images/contents/setting_menu_mailsend_hover.png);
}

.settingMain li.license:hover a, .settingMain li.license:focus a, .settingMain li.license:active a {
    background-image: url(../images/contents/setting_menu_license_hover.png);
}

.settingMain li.cardPrinter:hover a, .settingMain li.cardPrinter:focus a, .settingMain li.cardPrinter:active a {
    background-image: url(../images/contents/setting_menu_cardprinter_hover.png);
}

/* hover */
.settingMain li:hover, .settingMain li:focus {
    border: 2px solid #19a5a0;
}

/* active */
.settingMain li:active {
    border: 2px solid #19a5a0;
    background: #dcf1f2;
}

/* reportPrint */
.reportPrint {
    width: 1125px;
    margin: 0 auto;
}

.reportPrint .reportPrintTop {
    overflow: hidden;
    height: 38px;
}

.reportPrint .reportPrintTop .fr a {
    margin: 0 0 0 1px;
}

.reportPrint .reportPrintTop .fr [class*="btnZoom"] {
    margin: 3px 0 0 0;
}

.reportPrint .reportPrintTop .fr .btnZoomOut {
    margin-right: 7px;
}

.reportPrint .cnt figure {
    margin: 0 0 20px 0;
    text-align: center;
    border: 1px solid #b4b4b4;
}

.reportPrint .cnt figure:last-child {
    margin-bottom: 0;
}

.parities {
}

.parities > div {
    overflow: hidden;
    position: relative;
    float: left;
    width: 180px;
    height: 115px;
}

.parities > div > p {
    position: absolute;
    top: 0;
    width: 16px;
}

.parities > div > p span {
    display: block;
    height: 15px;
    padding: 2px 0 0 0;
    margin: 0 0 5px 0;
}

.parities .left {
    padding: 0 0 0 25px;
    margin: 0 15px 0 0;
}

.parities .left > p {
    left: 0;
    text-align: right;
}

.parities .right {
    padding: 0 25px 0 0;
    margin: 0 0 0 15px;
}

.parities .right > p {
    right: 0;
    text-align: left;
}

.parities ul {
    overflow: hidden;
    width: 160px;
    height: 115px;
}

.parities ul li {
    float: left;
    margin: 0 5px 5px 0;
}

.parities ul li a {
    display: block;
    width: 15px;
    height: 15px;
    background-color: #ebebeb;
}

.parities ul li.selection a, .parities ul li a:active {
    -webkit-box-shadow: inset 2px 2px 3px 0 rgba(0, 0, 0, 0.2);
    box-shadow: inset 2px 2px 3px 0 rgba(0, 0, 0, 0.2);
}

.BadgingPreview {
    overflow: hidden;
    padding: 0 0 20px 0;
}

.BadgingPreview .front, .BadgingPreview .back {
    float: left;
    position: relative;
    width: 301px;
    height: 186px;
    padding: 24px 20px 0 20px;
    margin: 0 0 0 9px;
    border: 1px solid #b4b4b4;
    border-radius: 5px;
}

.BadgingPreview .description {
    position: absolute;
    left: 0px;
    bottom: -20px;
    width: 100%;
    color: #6e6e6e;
    text-align: center;
}

.BadgingPreview .front {
    padding-left: 93px;
}

.BadgingPreview .front figure {
    position: absolute;
    left: 20px;
    top: 24px;
    border: 1px solid #b9b9b9;
}

.BadgingPreview .front figure img {
    width: 56px;
    height: 75px;
}

.BadgingPreview .front dl {
    height: 135px;
    padding: 5px 0 0 0;
}

.BadgingPreview .front dt {
    position: relative;
    padding: 0 0 0 9px;
    color: #6e6e6e;
    font-weight: bold;
}

.BadgingPreview .front dt:before {
    display: block;
    content: "";
    position: absolute;
    left: 0px;
    top: 5px;
    width: 2px;
    height: 1px;
    background: #6e6e6e;
}

.BadgingPreview .front dd {
    padding: 0 0 0 9px;
    margin: 5px 0 14px 0;
    color: #6e6e6e;
}

.BadgingPreview .front .copyright {
    margin: 0 0 0 7px;
}

.BadgingPreview .back h3 {
    height: 18px;
}

.BadgingPreview .back figure {
    margin: 0 0 0 45px;
}

.TimeSegmentCtrl {
    padding: 14px 30px;
    text-align: left;
}

.TimeSegmentCtrl li {
    position: relative;
    min-height: 28px;
    margin: 0 0 12px 0;
    zoom: 1;
}

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

.TimeSegmentCtrl > ul > li {
    padding: 0 0 0 255px;
}

.TimeSegmentCtrl .chkChange[type="checkbox"] + label {
    position: absolute;
    left: 0;
    top: 0;
}

.TimeSegmentCtrl .input {
    width: 68px !important;
    vertical-align: top;
}

.TimeSegmentCtrl [class*="txt"] {
    display: inline-block;
    line-height: 1.1;
    vertical-align: top;
}

.TimeSegmentCtrl .txtA {
    width: 67px;
    padding: 8px 0 0 0;
}

.TimeSegmentCtrl .txtB {
    width: 74px;
    padding: 8px 0 0 0;
    margin: 0 0 0 42px;
}

.TimeSegmentCtrl .txtC {
    width: 120px;
    padding: 8px 0 0 0;
}

.TimeSegmentCtrl .txtD {
    width: 120px;
}

.TimeSegmentCtrl .timeCtrl, .TimeSegmentCtrl .timespinner, .TimeSegmentCtrl .spinner {
    display: inline-block;
    line-height: 1.1;
    vertical-align: top;
}

.overtimeCtrl {
}

.overtimeCtrl > li, .overtimeCtrl > li > ul > li {
    display: block;
    min-height: 28px;
    margin: 0 0 12px 0;
    zoom: 1;
}

.overtimeCtrl > li:after, .overtimeCtrl > li > ul > li:after {
    display: block;
    content: "";
    clear: both;
}

.overtimeCtrl > li > .chkChange[type="checkbox"] + label {
    min-width: 170px;
}

.overtimeCtrl > li > ul {
    display: none;
    padding: 18px 0 0 0;
}

.overtimeCtrl > li > ul.open {
    display: block;
}

.overtimeCtrl .default {
}

.overtimeCtrl span {
    display: block;
    float: left;
    padding: 9px 0 0 0;
    color: #6e6e6e;
}

.overtimeCtrl .default span:nth-of-type(1) {
    width: 39px;
}

.overtimeCtrl .default span:nth-of-type(2) {
    width: 87px;
    margin: 0 0 0 4px;
}

.overtimeCtrl .default span:nth-of-type(3) {
    width: 55px;
    margin: 0 0 0 4px;
}

.overtimeCtrl .default .input {
    float: left;
    width: 68px;
}

.overtimeCtrl .default .select {
    float: left;
    width: 240px !important;
}

.overtimeCtrl .max span {
    width: 95px;
}

.overtimeCtrl .max .input {
    float: left;
    width: 68px;
}

.overtimeCtrl .max span:nth-of-type(2) {
    margin: 0 0 0 4px;
}

div.triggerAction_list {
    height: inherit;
    overflow-y: auto !important;
}

div.triggerAction_list > ul > li span {
    width: 202px;
    overflow: hidden;
    word-wrap: break-word;
    text-overflow: ellipsis;
}

/* 장치 Relay 출력 */
.addOutputSignalDlg > .formList > ul.spaceS > li {
    padding-left: 70px;
}
.addOutputSignalDlg > .formList > ul.spaceS > li input {
    width: 100%;
}
.addOutputSignalDlg .subBox .formList li {
    width: 50%;
    padding-left: 90px;
}
.addOutputSignalDlg .subBox .formList input {
    width: 100px;
}
.smtpSetupDlg .tableListTypeA td {
    text-align: left;
}

/*smtp setup dialog*/
.smtpSetupDlg .formList > ul.spaceS > li {
    padding-left: 160px;
}

.smtpSetupDlg .formList ul.spaceS li input {
    width: 100%;
}

.smtpSetupDlg .popCnt .formList .input {
    width: auto;
}


/*add output ttl dialog*/
.addNewOutputTtlDlg .indentList {
    display: inline-block;
    width: 100%;
}
.addNewOutputTtlDlg li.outputTtlName input[type="text"] {
    width: 100%;
}
.addNewOutputTtlDlg .indentList li {
    margin-top: 7px;
}
.addNewOutputTtlDlg .indentList li:first-child {
    margin-top: 0;
}
.addNewOutputTtlDlg .indentList .btnToggle {
    display: inline-block;
    margin-left: 20px;
}
.addNewOutputTtlDlg .indentList li > * {
    vertical-align: middle;
}
.addNewOutputTtlDlg .indentList .toggleBtnLabel {
    display: inline-block;
}
.addNewOutputTtlDlg .indentList .select {
    display: inline-block;
}
.addNewOutputTtlDlg .indentList .period {
    margin-left: 10px;
}
.addNewOutputTtlDlg .indentList .period .input.second {
    width: 45px;
    margin-left: 5px;
    padding-right: 5px;
    padding-left: 5px;
}
.addNewOutputTtlDlg .indentList .chkOption {
    float: right;
    margin-top: 7px;
}
/* setting > alert */
.alertContents .selectChkList li .chkChange[type="checkbox"] + label {
    width: calc(100% - 50px);
}
.alertContents .selectChkList li .chkChange[type="checkbox"] + label .txt {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    width: calc(100%);
    text-overflow: ellipsis;
    padding-bottom: 1px;
}
.alertContents .selectChkList li .chkChange[type="checkbox"] + label .txt:first-letter {
}




 /*ng-invalid 관련*/
form.ng-invalid {
 border: none;
}
.ng-invalid {
    /*border: solid 1px #f47971;*/
}

.invalidInputContainer {
    display: inline-block;
    position: relative;
}

table .invalidInputContainer,
.invalidInputContainer.fitWidth {
    width: 100%;
}
.invalidInputContainer > input[type="text"] {
    width: 100%;
}

/*column setting dialog*/
.columnSettingPopupDlg {

}
.columnSettingPopupDlg .btnTableTop .titleType1 {
    margin-top: 10px;
}








/*server stting*/
.serverSetting {

}
.serverSetting .serverUpgrade {
    width: 100%;
}

.serverSetting .serverUpgrade .btnFunc.withToggle {
    position: absolute;
    left: 150px;
    top: 0;
}
.serverSetting .formBox .cnt > ul > li {
    padding-left: 170px;
}

.serverSetting .formBox .cnt.longTitle > ul > li {
  padding-left: 250px;
}

.serverSetting .serverMatching .cnt.longTitle > ul > li:nth-child(odd)  {
    padding-left: 350px;
}

.serverSetting .formBox .cnt > ul > li.normal {
    padding-left: 0;
}
.serverSetting .formBox .cnt > ul > li.ssl {
}
.serverSetting .formBox .cnt > ul > li.ssl .btnFunc {
    position: absolute;
    left: 165px;
    top: 0;
}
.serverSetting .formBox .cnt > ul > li.ssl .radioListA li:first-child {
    margin-left: 0;
}
.serverSetting .formBox .cnt > ul > li.ssl .radioListA li {
    display: inline-block;
    margin-left: 5px;
    margin-bottom: 0;
}
.serverSetting .formBox .cnt > ul > li.ssl .radioListA li label {
    font-weight: bold;
}
.serverSetting .userDeviceManagement h5 {
    width: 130px;
}

.cardIssueTable tr:first-child td {
    border-top: 1px solid #ebebeb !important;
}


/* systemSecurity */

.systemSecurity .formBox .cnt > ul > li {
    padding-left: 170px;
}

.systemSecurity .formBox .cnt.longTitle > ul > li {
    padding-left: 250px;
}

.systemSecurity .AdvancedSecurity .cnt.longTitle > ul {
    margin-bottom: 0px;
}

.systemSecurity .AdvancedSecurity .cnt.longTitle > ul > li:nth-child(odd)  {
    padding-left: 350px;
}



/* setting > https */
.infomationBox .cnt {
    position: relative;
    padding-bottom: 70px;
}

.detailPara {
    margin: 25px 25px;
    line-height: 1.5em;
}

.infomationBox .btnC {
    position: absolute;
    bottom: 20px;
    width: 100%;
}

/*프린트 팝업*/
.printOptionPopupDlg {

}
.printOptionPopupDlg li.title input[type="text"] {
    width: 65%;

}
.printOptionPopupDlg li.title label {
    margin: -2px 0 0 5px;
}
.printOptionPopupDlg li.groupBy label {
    margin: 5px 0 0 7px;
}
.printOptionPopupDlg li.footer label {
    margin: 5px 0 0 0;
}
.printOptionPopupDlg li.footer p {
    margin-right: 7px;
}
.printOptionPopupDlg li.footer input.comment {
    width: 68%;
}




/* user > detail > card*/
.cardRegistrationDlg {

}
.cardRegistrationDlg .subBox .formList .col {
    padding-left: 105px;
}
.cardRegistrationDlg .subBox .formList .col .btnText {
    /*width: 105px;*/
}

.cardRegistrationDlg .cardRegister .subBox .formList .col input[type="text"] {
    width: 245px;
}

/* monitoring */
.filterTreeType1 > li > ul > li .tree-title > span {
    width: calc(100% - 82px);
}

.filterTreeType1 > li > ul > li input.tree-editor {
    width: calc(100% - 85px) !important;
}


/* setting > alert > modify popup */
.eventTypeModifyDlg .formList textarea {
    height: 10em;
}

span.lnbMenuItem {
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: calc(100% - 1em);
    overflow-x: hidden;
    overflow-y: hidden;
    height: 14px;
    line-height: 13px;
    text-align: left;
}

.tableCell {
    width: 100%;
    height: 1.5em;
    line-height: 1.5em;
    display: inline-block;
    white-space: nowrap;
    /*word-wrap: break-word;*/
    text-overflow: ellipsis;
    overflow: hidden;
}



.errorPage_50x {
    padding-bottom: 30px;
}

.errorPage_50x > .wrapper {
    height: 100%;
    background: #f8f7f6 url(../images/contents/login_shape.png) no-repeat center bottom;
}
.errorPage_50x > .wrapper > footer {
    width: 100%;
    position: absolute;
    bottom: -7px;
    background: #cc3399;
    color: #fff;
    font-weight: bold;
}

.errorPage_50x > .wrapper > footer .copyright {
    height:37px;
    padding:6px 0 0 0;
    font-size:1.083em;
    color:#fff;
    text-align:center;
}

.errorPage_50x article {
    width: 60%;
    margin: 0 auto 0;
    padding: 15% 0 0 120px;
}
.errorPage_50x article h1 {
    color: #948a84;
    position: relative;
    border-bottom: solid 1px #ccc;
    font-size: 5em;
    letter-spacing: -.03em;
    line-height: 0.75em;
}
.errorPage_50x article h1:before {
    content: '';
    position: absolute;
    left: -105px;
    top: 0;
    width: 101px;
    height: 88px;
    background: url(../images/contents/errorpage.png) no-repeat;
}
.errorPage_50x article .detailInfo {
    margin-top: 8px;
    line-height: 1.3em;
    color: #777;
}
.errorPage_50x article .btnArea {
    margin: 10% 0 0 0;
    text-align: right;
}

.licenseText {
    display: inline-block;
    padding-top: 8px;
}

.licenseText a {
    cursor: pointer
}

.productText {
    padding-left: 0 !important;
}

.productText span {
    display: inline-block;
    padding-top: 8px;
}

.licenseFileDiv {
    top: 90px;
    position: absolute;
    display: none;
}

/*라이센스*/
.licenseManualActivationDlg .popupDlg > .popCnt {
    height: 382px;
}

.licenseManualActivationDlg .changeInformation {
    border-bottom: solid 1px #e6e6e6;
    padding-bottom: 25px;
}

.licenseManualActivationDlg .guideList {
    margin: 35px 40px 0;
}

.licenseManagement .licenseInfo {
    margin: 10px 20px;
    padding: 20px;
}

/* add zone dialog */
.addZoneDialog .treeTypeZone {
    border-top: solid 1px #b4b4b4;
}

.cardRegistrationDlg .smartCard .popCnt .formList .input {
    width: 100%;
}

.cardRegistrationDlg .smartCard .popCnt .subBox {
    margin-bottom: 30px;
}

.selectFingerprintIntoCard {
    margin: 20px 0 20px;
}

.selectFingerprintIntoCard.noFingerprint > .fingerprintTemplates {
    float: right;
    margin: 0 0 -10px 0;
}

.selectFingerprintIntoCard:after {
    content: ' ';
    display: block;
    clear: both;
}
.selectFingerprintIntoCard .cContainer {
    overflow: hidden;
    position: relative;
}

.selectFingerprintIntoCard .cContainer:after {
    content: ' ';
    display: block;
    clear: both;
}

.selectFingerprintIntoCard .aFewSecond {
    float: left;
    margin: 0 0 0 4px;
    width: 95px;
}

.selectFingerprintIntoCard .aFewSecond .chkChange + label {
    height: auto;
    padding: 0 0 0 21px;
}

.selectFingerprintIntoCard .aFewSecond .chkChange + label:before {
    margin-top: 6px;
}

.selectFingerprintIntoCard .aFewSecond .selectButton .btnText {
    width: 55px;
}

.selectFingerprintIntoCard .aFewSecond .selectButton {
    margin-top: 3px;
}

.selectFingerprintIntoCard .aFewSecond .selectButton:first-child {
    margin-top: 0;
}

.selectFingerprintIntoCard .fingerprintTemplates {
    float: left;
    overflow-y: auto;
    width: 407px;
    height: 245px;
    padding: 20px 30px;
    border: solid 1px #b4b4b4;
}

.selectFingerprintIntoCard .fingerprintTemplates ul li {
    opacity: .6;
    position: relative;
    min-width: 150px;
    min-height: 203px;
    display: inline-block;
    /*text-align: center;*/
    padding: 5px;
    margin: 20px 0 0 28px;
}

.selectFingerprintIntoCard .fingerprintTemplates ul li:nth-child(2n+1) {
    margin-left: 0;
}

.selectFingerprintIntoCard .fingerprintTemplates ul li:nth-child(1),
.selectFingerprintIntoCard .fingerprintTemplates ul li:nth-child(2) {
    margin-top: 0;
}

.selectFingerprintIntoCard .fingerprintTemplates ul li .title {
    display: inline-block;
    margin: 0 0 7px 3px;
    color: #594b4f;
    font-weight: bold;
}

/*.selectFingerprintIntoCard .fingerprintTemplates ul li:before {*/
/*content: ' ';*/
/*display: inline-block;*/
/*position: absolute;*/
/*z-index: 1;*/
/*left: 0;*/
/*top: 0;*/
/*width: 100%;*/
/*height: 100%;*/
/*background: #aaa;*/
/*opacity: .3;*/
/*}*/
.selectFingerprintIntoCard .fingerprintTemplates ul li.on {
    opacity: 1;
}

.selectFingerprintIntoCard .fingerprintTemplates .imgArea {
    display: inline-block;
    width: 138px;
    height: 155px;
    vertical-align: middle;
    border: 1px solid #bbb;
    background: url(../images/contents/bg_fingerprint.png) #f9f9f9 no-repeat center center;
}

.selectFingerprintIntoCard .fingerprintTemplates .imgArea img {
    display: inline-block;
    width: 120px;
    height: 133px;
    margin: 10px 8px 10px 8px;
}

.selectFingerprintIntoCard .fingerprintTemplates .duress {
    display: inline-block;
    margin-top: 5px;
    width: 100%;
    text-align: left;
}

.selectFingerprintIntoCard .fingerprintTemplates .duress label {
    margin-left: 3px;
    padding-left: 20px;
}

.selectFaceIntoCard {
    margin: 20px 0 20px;
}

.selectFaceIntoCard.noFace > .visualFaceTemplates {
    float: right;
    margin: 0 0 -10px 0;
}

.selectFaceIntoCard:after {
    content: ' ';
    display: block;
    clear: both;
}
.selectFaceIntoCard .cContainer {
    overflow: hidden;
    position: relative;
}

.selectFaceIntoCard .cContainer:after {
    content: ' ';
    display: block;
    clear: both;
}

.selectFaceIntoCard .aFewSecond {
    float: left;
    margin: 0 0 0 4px;
    width: 95px;
}

.selectFaceIntoCard .aFewSecond .chkChange + label {
    height: auto;
    padding: 0 0 0 21px;
}

.selectFaceIntoCard .aFewSecond .chkChange + label:before {
    margin-top: 6px;
}

.selectFaceIntoCard .aFewSecond .selectButton .btnText {
    width: 55px;
}

.selectFaceIntoCard .aFewSecond .selectButton {
    margin-top: 3px;
}

.selectFaceIntoCard .aFewSecond .selectButton:first-child {
    margin-top: 0;
}

.selectFaceIntoCard .visualFaceTemplates {
    float: left;
    overflow-y: auto;
    width: 407px;
    height: 245px;
    padding: 20px 30px;
    border: solid 1px #b4b4b4;
}

.selectFaceIntoCard .visualFaceTemplates ul li {
    opacity: .6;
    position: relative;
    min-width: 150px;
    min-height: 203px;
    display: inline-block;
    /*text-align: center;*/
    padding: 5px;
    margin: 20px 0 0 28px;
}

.selectFaceIntoCard .visualFaceTemplates ul li:nth-child(2n+1) {
    margin-left: 0;
}

.selectFaceIntoCard .visualFaceTemplates ul li:nth-child(1),
.selectFaceIntoCard .visualFaceTemplates ul li:nth-child(2) {
    margin-top: 0;
}

.selectFaceIntoCard .visualFaceTemplates ul li .title {
    display: inline-block;
    margin: 0 0 7px 3px;
    color: #594b4f;
    font-weight: bold;
}

/*.selectFaceIntoCard .visualFaceTemplates ul li:before {*/
/*content: ' ';*/
/*display: inline-block;*/
/*position: absolute;*/
/*z-index: 1;*/
/*left: 0;*/
/*top: 0;*/
/*width: 100%;*/
/*height: 100%;*/
/*background: #aaa;*/
/*opacity: .3;*/
/*}*/
.selectFaceIntoCard .visualFaceTemplates ul li.on {
    opacity: 1;
}

.selectFaceIntoCard .visualFaceTemplates .imgArea {
    display: inline-block;
    width: 138px;
    height: 155px;
    vertical-align: middle;
    border: 1px solid #bbb;
    background: url(../images/contents/bg-visual-face.png) #f9f9f9 no-repeat center center;
}

.selectFaceIntoCard .visualFaceTemplates .hideFacesImg {
    display: inline-block;
    width: 138px;
    height: 155px;
    vertical-align: middle;
    border: 1px solid #bbb;
    background: url(../images/contents/bg-hide-visual-face.png) #f9f9f9 no-repeat center center;
}

.selectFaceIntoCard .visualFaceTemplates .faceScanImageArea {
    display: inline-block;
    width: 138px;
    height: 155px;
    vertical-align: middle;
    border: 1px solid #bbb;
    background: url(../images/contents/bg-visual-face-scan.png) #f9f9f9 no-repeat center center;
}

.selectFaceIntoCard .visualFaceTemplates .imgArea img {
    display: inline-block;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

.imgProfileView {
    display: none;
    position: absolute;
    z-index: 10;
    width: 100%;
    left: 0;
    bottom: 0;
}

.off > .imgProfileView {
    display: none !important;
}

.imgProfileView > .cContainer {
    position: relative;
    width: 100%;
    min-height: 260px;
    padding-bottom: 50px;
    background: #fff;
}

.imgProfileView h1 {
    padding: 15px 35px 15px 15px;
    background: #a49c9e;
    color: #fff;
}

.imgProfileView figure {
    position: relative;
    width: 80%;
    margin: 25px auto 15px;
    text-align: center;
}

.imgProfileView figure > img {
    width: 100%;
}

.imgProfileView .btnArea {
    position: absolute;
    width: 100%;
    bottom: 0;
    padding: 0 0 20px;
    text-align: center;
}

.imgProfileView .btnArea button {
    min-width: 80px;
}

.imgProfileView .detailList {
    width: 80%;
    margin: 20px auto;
}

.imgProfileView .detailList ul li {
    position: relative;
    margin: 7px 0;
    display: inline-block;
}

.imgProfileView .detailList ul li h2 {
    position: absolute;
    left: 0;
    width: 65px;
    padding: 0 0 0 12px;
    font-weight: bold;
    vertical-align: top;
    line-height: 1.2em;
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    background: url(../images/common/bl_item_point.png) no-repeat left 5px;
}

.imgProfileView .detailList ul li p {
    width: calc(100% - 65px);
    margin-left: 65px;
    line-height: 1.2em;
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.imgProfileView .closeBtn {
    width: 14px;
    height: 14px;
    margin: 0;
    position: absolute;
    right: 10px;
    top: 12px;
    text-indent: -2000px;
    background: url(../images/common/popup_close.png) no-repeat left top;
}

.imageLogContents .addAccessLevel {
    margin-top: 0;
}

.imageLogContents .addCardTemplate {
    margin-top: 0;
}

.imageLogBtn {
    display: inline-block;
    width: 25px;
    height: 20px;
    margin: 0 auto;
    background: url(../images/common/imagelog_a2.png) no-repeat center center;
    text-indent: -2000px;
}

.veImageLogBtn {
    display: inline-block;
    width: 25px;
    height: 20px;
    margin: 0 auto;
    background: url(../images/video/monitoring_evlog_icon_img.png) no-repeat center center;
    text-indent: -2000px;
}

.veVideoLogBtn {
    display: inline-block;
    width: 25px;
    height: 20px;
    margin: 0 auto;
    background: url(../images/video/monitoring_evlog_icon_video.png) no-repeat center center;
    text-indent: -2000px;
}

.veImageDeletedLogBtn {
    display: inline-block;
    width: 35px;
    height: 20px;
    margin: 0 auto;
    background: url(../images/video/monitoring_evlog_icon_img_error.png) no-repeat center center;
    text-indent: -2000px;
}

.veVideoDeletedLogBtn {
    display: inline-block;
    width: 35px;
    height: 20px;
    margin: 0 auto;
    background: url(../images/video/monitoring_evlog_icon_video_error.png) no-repeat center center;
    text-indent: -2000px;
}

.veLoadImageLogBtn {
    display: inline-block;
    width: 25px;
    height: 20px;
    margin: 0 auto;
    background: url(../images/video/monitoring_evlog_icon_img_loading.gif) no-repeat center center;
    text-indent: -2000px;
}

.veLoadVideoLogBtn {
    display: inline-block;
    width: 25px;
    height: 20px;
    margin: 0 auto;
    background: url(../images/video/monitoring_evlog_icon_video_loading.gif) no-repeat center center;
    text-indent: -2000px;
}

.veLoadFailImageLogBtn {
    display: inline-block;
    width: 35px;
    height: 20px;
    margin: 0 auto;
    background: url(../images/video/monitoring_evlog_icon_img_loading_error.png) no-repeat center center;
    text-indent: -2000px;
}

.veLoadFailVideoLogBtn {
    display: inline-block;
    width: 35px;
    height: 20px;
    margin: 0 auto;
    background: url(../images/video/monitoring_evlog_icon_video_loading_error.png) no-repeat center center;
    text-indent: -2000px;
}

.popCnt.imageLogRealSizeViewDialog .imgContainer {
    margin-bottom: 20px;
    width: 100%;
    height: 100%;
}

.popCnt.imageLogRealSizeViewDialog {
    min-height: 582px;
}

.imageLogRealSizeViewDialog figure {
}

.imageLogRealSizeViewDialog figure > img {
    width: 100%;
}

.cardIssueHistoryDlg .popCnt {
    max-height: 500px;
    overflow-y: auto;
    margin-bottom: 30px;
}

.timespinners > .spinner {
    margin-left: 5px;
}

.timespinners > .spinner:first-child {
    margin-left: 0;
}

.boardBtn .searchSimple .searchMonth {
    width: 200px;
}

.dlgDeviceBatchEdit {
    width: 735px;
}

.dlgDeviceBatchEdit_extend{
    width: 793px;
}

.dlgDeviceBatchEdit_extend .select{
    width: 447px !important;
}

.boxDeviceOperators.popup {
    display: inline-block;
}

.boxDeviceOperators.popup .ngbssUserSearchBox {
    position: relative;
}

.boxDeviceOperators.popup .cnt li {
    overflow: hidden;
    margin-top: 13px;
}

.boxDeviceOperators.popup .cnt li:first-child {
    margin-top: 0;
}

.boxDeviceOperators.popup .ngbssUserSearchBox .tableListTypeA {
    float: left;
    width: calc(100% - 54px);
}

.boxDeviceOperators.popup .ngbssUserSearchBox .tableListTypeA:after {
    content: ' ';
    display: block;
    clear: both;
}

.boxDeviceOperators.popup .selectBoxtableADD {
    float: right;
    /*position: absolute;*/
    /*top: -27px;*/
    /*right: 0;*/
}
.csvImportDlg {
    width: 486px;
}

.keyChangeDlg {
    width: 800px;
}

.dlgFirmwareUpgrade table td .btnFuncDark {
    width: 250px;
}

.dlgFrmLanguageResource table td .btnFuncDark {
    width: 250px;
}

/* import csv */
.mappingCsvTable .btnTableTop {
    margin-top: -15px;
}
.mappingCsvTable button.autoMapping {
    min-width: 90px;
}

.certFileWrap button{
  float: left;
}

.certFileWrap div{
  float: left;
  height: 28px;
  line-height:28px;
  margin-left: 5px;
  width: 110px;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.deviceStatus{
  overflow: hidden; word-break:normal; text-overflow: ellipsis;
}

.ngbssFloorLevelSelectBoxTypeCheckList .listForFloorLevelAddArea {
    display: none;
}

.ngbssFloorLevelSelectBoxTypeCheckList .listForFloorLevelAddArea.open {
    display: block;
}

.overCnt{
    font-weight: bold;
    color: red;
}

#filterTable th h5 {
    /*position: absolute;*/
    left: 0;
    top: 6px;
    padding: 0 0 0 12px;
    font-weight: bold;
    vertical-align: top;
    line-height: 14px;
    background: url(../images/common/bl_item_point.png) no-repeat left 5px;
}

/* device - managerUsersInDeviceDlg */
.iconCard-managerUser {
    margin: 0 0 0 15px;
    padding: 0 0 0 24px;
    background: url(../images/contents/icon_card.png) no-repeat;
}

.iconFace-managerUser {
    margin: 0 0 0 15px;
    padding: 0 0 0 24px;
    background: url(../images/contents/icon_face.png) no-repeat;
    background-size: 20px 16px;
}

.iconFinger-managerUser {
    margin: 0 0 0 15px;
    padding: 0 0 0 24px;
    background: url(../images/contents/icon_finger.png) no-repeat;
    background-size: 19px 16px;
}

.iconUser-managerUser {
    margin: 0 0 0 -10px;
    padding: 0 0 0 24px;
    background: url(../images/contents/icon_user.png) no-repeat;
}

.mobileDeviceTable {
    max-height: 370px;
    overflow-y: auto;
}

.mobileDeviceLabel {
    width: auto;
    display: block;
}

/*#mobileDeviceSection {*/
/*    display: none;*/
/*}*/

/*#mobileDeviceSection.show {*/
/*    display: initial;*/
/*}*/

.mobileDeviceTableHeader.withData {
    display: block;
    margin-bottom: 36px;
}

.mobileDeviceTableHeaderElements.withData {
    position: absolute;
}

.emailContentSetting .emptyCol div, .emailContentSetting .emptyCol .sm-btnA {
    margin-left: 10%;
}

.cardPressoSetting .emptyCol div, .cardPressoSetting .emptyCol .sm-btnA {
    margin-left: 10%;
}

.cardPressoSetting .info-text {
    font-size: 17px;
    font-weight: 700;
    margin: 20px 10px 20px 10px;
    padding: 20px 0 20px 214px;
}

#cameraIntegrationDlg {
    overflow: visible !important;
}

#printCardDlg {
    overflow: visible !important;
}


/*#IframeWrapper {*/
/*    background-color: white;*/
/*    opacity: 0;*/
/*}*/

.smtpTestWarning {
    color: red;
    background: url(../images/common/bl_item_point.png) no-repeat left 5px;
    padding-left: 12px;
    font-weight: bold;
    line-height: 14px;
}

.smtpTestDone {
    background: url(../images/common/bl_item.png) no-repeat left 5px;
    padding-left: 12px;
    font-weight: bold;
    line-height: 14px;
}

#testEmailTo {
  width: 40%;
  display: inline-block;
}
.formBox .cnt > ul > .list-wrapper{
    padding: 0 100px 0 0px;
}
.cnt > ul > li > .list-box{
    width:100%;
}
.cnt > ul > li > .list-box > h5{
    position: absolute;
    left: 0;
    top: 6px;
    padding: 0 0 0 12px;
    font-weight: bold;
    vertical-align: top;
    line-height: 14px;
    background: url(../images/common/bl_item.png) no-repeat left 5px;
}
.cnt > ul > li > .list-box > .list-box-input{
    position: relative;
    min-height: 28px;
    zoom: 1;
    padding-top: 1px;
    margin-top: -1px;
    margin-left:145px

}
#buzzer > .buzzer-body{
    padding:28px 83px 49px 120px;
}
#buzzer > .buzzer-body > ul{
    display: flex;
}
#buzzer > .buzzer-body > ul > li:nth-child(1) > div{
    display: flex;
    align-items: center;
}
.buzzer-controller-title > div > span:nth-child(1),
#buzzer > .buzzer-body > ul > li > div > span:nth-child(1),
#buzzer > .buzzer-body > ul > li:nth-child(2) > .buzzer-controller > ul > li > .buzzer-controller-title > span:nth-child(1){
    width: 4px;
    height: 4px;
    font-family: Gulim;
    font-size: 4px;
    border-radius: 2px;
    display: inline-block;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    text-align: left;
    background-color: #fb4b38;
}
.buzzer-controller-title > div > span:nth-child(2),
#buzzer > .buzzer-body > ul > li > div > span:nth-child(2),
#buzzer > .buzzer-body > ul > li:nth-child(2) > .buzzer-controller > ul > li > .buzzer-controller-title > span:nth-child(2){
    height: 10px;
    margin-left:8px;
    font-family: Roboto;
    font-size: 12px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    text-align: left;
    color: #5a5a5a;
    width:100px;
}
.buzzer-controller-title{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top:9px;
}
.buzzer-controller-title > div{
    display: flex;
    align-items: center;
}
#buzzer > .buzzer-body > ul > li:nth-child(1) > div > span:nth-child(2){
    width:139px;
}
#buzzer > .buzzer-body > ul > li:nth-child(2){
    display: flex;
    border:1px solid #b4b4b4;
    width:100%;
    margin-left:16px;
}
#buzzer > .buzzer-body > ul > li:nth-child(2) > .buzzer-nav{
    border-right: solid 1px #a69fa1;
}
#buzzer > .buzzer-body > ul > li:nth-child(2) > .buzzer-nav > ul{
    width:240px;
    border:1px solid #b4b4b4;
}
#buzzer > .buzzer-body > ul > li:nth-child(2) > .buzzer-nav > ul > li{
    height: 39px;
    background-color: #a49c9e;
    width:100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#buzzer > .buzzer-body > ul > li:nth-child(2) > .buzzer-controller {
    width:100%;
    padding: 39px 0 100px 28px;
}
#buzzer > .buzzer-body > ul > li:nth-child(2) > .buzzer-controller > ul > li{
    display: flex;
    gap:5px;
    justify-content: space-between;
}
#buzzer > .buzzer-body > ul > li:nth-child(2) > .buzzer-controller > ul > li > div > .list{
    margin-bottom: 10px;
}
#buzzer > .buzzer-body > ul > li:nth-child(2) > .buzzer-controller > ul > li > .buzzer-controller-title{
    display: flex;
    align-items: center;
}
#buzzer > .buzzer-body > ul > li:nth-child(2) > .buzzer-controller > ul > li > .buzzer-user-controller{
    width:100%;
    padding-right: 120px;
}
#buzzer > .buzzer-body > ul > li:nth-child(2) > .buzzer-controller > ul > li > .buzzer-user-controller > .list {
    width:100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#buzzer > .buzzer-body > ul > li:nth-child(2) > .buzzer-controller > ul > li > .buzzer-user-controller > .list> div:nth-child(1){

    font-family: Roboto;
    font-size: 12px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    text-align: left;
    color: #5a5a5a;
}

.buzzer-controller > ul > li > .buzzer-user-controller > .list > .buzzer-user-controller-input > input{
    width: 63px;
    height: 28px;
    padding: 10px 43px 9px 13px;
    border-radius: 4px;
    box-shadow: inset 0px 3px 2px 0 rgba(49, 49, 49, 0.13);
    border: solid 1px #b4b4b4;
    background-color: #fff;
}
.buzzer-controller > ul > li > .buzzer-user-controller > .list > .buzzer-selectBox{
}
.buzzer-controller > ul > li > .buzzer-user-controller > .list > .buzzer-selectBox > select{
    width: 140px;
    height: 28px;
    border-radius: 4px;
    box-shadow: 0px 2px 2px 0 rgba(0, 0, 0, 0.08);
    border: solid 1px #b4b4b4;
    background-image: linear-gradient(to top, #e6e6e6, #fff);
}

.titleAct2 {
    display: flex !important;
    flex-wrap: wrap !important; /* Allow items to wrap to the next line if needed */
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 20px !important;
}

.titleGroup2 {
    overflow: hidden !important;
    height: 32px !important;
}

.dynamicTitle2 {
    order: 1 !important; /* Initially on the left */
    flex: 1 !important; /* Take up available space on the row */
}

.usersContentsCtrl2 {
    order: 2; /* Initially on the right */
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to the next line if needed */
    margin-right: 5px;
}

.cntTitle2 {
    font-size: 2.000em;
    color: #464646;
    vertical-align: top;
    margin: 0; /* Remove default margin on h2 element */
    height: 32px !important;
    padding: 0px !important;
}

.usersContentsCtrl {
    width: calc(100% - 900px);
}

.usersContentsCtrl .boardSearch {
    float: right;
    right: 126px;
}

.advancedSearchElmContainer {
    float: right;
}

.btnAdvancedSearch {
    min-width: 120px;
    left: 5px;
}

.advancedSearchPopUp {
    position: absolute;
    right: 0;
    margin-top: 5px;
    margin-right: 25px;
    float: right;
    z-index: 120;
    width: 426px;
    height: auto;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid grey;
    padding: 10px;
}

.advancedSearchForm {
    margin-top: 25px;
}

.advancedSearchInfo {
    margin-bottom: -10px;
}

.containerAdvSearchInfoHeader {
    position: relative;
    display: inline-flex;
}

.advInfoIcon {
    width: 4%;
}

.advInfoText {
    width: 95%;
    bottom: 4px;
}

.advancedSearchImgHeader {
    width: 14px;
    height: 14px;
}

.advancedSearchImg, .quickActionImg {
    width: 18px;
    height: 18px;
}
  
.containerAdvSearchInfo img,
.containerAdvSearchInfo span {
    display: inline;
}

.containerAdvSearchInfo span {
    margin-left: 10px;
}

.spanHeader {
    margin-left: 2px;
    line-height: 14px;
}


#granularDoor {
    width: 130px !important;
    height: 28px;
    text-align: left;
    padding-left: 10px;
    font-family: Roboto;
}

#granularDoorUp {
    border: 1px solid #b4b4b4;
}

.firmwareOld {
    background-color: red;
    color: white;
    padding: 2px 4px;
    border-radius: 3px;
    margin-right: 5px;
    font-weight: bold;
}

.door-settings {
    display: flex;
    align-items: center;
}

.door-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Adjust spacing as needed */
}

.closeAdvancedSearchButton {
    float: right;
}

.advancedSearchForm .advSearchUl {
    padding-left: 5px; /* Adjust the spacing between dot and content */
}

.advancedSearchForm .advSearchLi {
    vertical-align: top; /* Align elements vertically */
    margin: 12px 5px; /* Adjust spacing between elements */
}

.advSearchLi {
    list-style: disc !important;
    margin-left: 12px !important;
}

.advancedSearchForm .asfCol1 {
    width: 25%;
    display: inline-grid;
}

.advancedSearchForm .asfCol2 {
    width: 73%;
    display: inline-grid;
}

/* Style for h5 and input elements within li */
.advancedSearchForm li span {
    display: inline-grid; /* Display h5 and input elements inline */
}

.advancedSearchForm li .select-data {
    width: 100%;
}

.advancedSearchButtons {
    float: right;
    margin-right: 13px;
}

.advancedSearchTooltipContainer {
    display: inline-flex;
}

.advancedSearchTooltip {
    display: inline-flex;
    margin: 0 4px;
    z-index: 999;
    bottom: 4px;
}

.serverPrivateMessage {
    display: inline-block; margin-top:5px;
}

.advancedSearchTooltip .tool-tip__general {
    left: -133px !important;
}
.quickActionTooltip .tool-tip__general
{
    width: 372px !important;
    left: -165px !important;
    bottom: calc(100% + 10px);
    top: unset !important;
}
.quickActionTooltip .tool-tip__general span.general__title{
    letter-spacing: normal;
}
.qaButton {
    width: 130px;
    white-space: nowrap; /* Prevent text from wrapping to the next line */
    overflow: hidden;    /* Hide the overflowing text */
    text-overflow: ellipsis;
}

.actionListTable {
    width: 100%;
}

.actionListTd1 {
    width: 90%;
    padding: 13px 0 11px 10px;
}

.actionListTd2 {
    width: 10%;
    padding: 5px 9px 5px 0;
    text-align: right;
}

.actionListTr {
    border-bottom: 1px solid #ebebeb;
}

.triggerActionInfoContents mark.number {
    line-height: 18px;
}

.popCnt .formList > ul > li > h5.required {
    background-image: url(../images/common/bl_item_point.png);
}

#customInterfaceDlg .popFooter {
    text-align: center;
}

.quickActionLayout .tableListTypeA.sortable table td:first-child {
    padding-right: 0px;
}

.quickActionTooltip {
    display: inline-flex;
    margin: 0 4px;
    z-index: 999;
}

.advancedSearchText {
    white-space: nowrap; /* Prevent text from wrapping to the next line */
}

.clearAdvSearchButton {
    width: 100px;
    height: 28px;
    margin-right: 5px;
    color: #594b4f !important;
}

.advSearchButton {
    width: 100px;
    height: 28px;
}

.custom-field-document {
    width: 100%;
    height: 28px;
    display: flex;
    justify-content: space-between;
}

.custom-field-document .buttons {
    position: absolute;
    right: 10px;
    top: 0;
    height: 28px;
    display: flex;
    align-items: center;
}
.ibtnDownload {
    background-image: url(../images/contents/setting_menu_biomini.png);
    width: 16px;
    height: 14px;
    background-size: cover;
    background-position: center;
}
.ibtnDownload:hover {
    background-image: url(../images/contents/setting_menu_biomini_hover.png);
}

.custom-field-document .file-info-area {
    align-items: center;
    height: 28px;
    padding: 0 14px;
    margin-right: 3px;

    background-color: #fff;
    border: 1px solid #b4b4b4;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.2);
    width: 100vw;
    display: flex;
    justify-content: space-between;
}

.custom-field-document .file-info-area[disabled] {
    background-color: #e6e6e6;
    border: 1px solid #c5c5c5;
    color: #b4b4b4;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.custom-field-document .file-info-area .filename {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
    padding-right: 5px;
    color: #6e6e6e;
    font-weight: 500;

    white-space: nowrap;
    overflow-x: clip;
    text-overflow: ellipsis; 
}

.custom-field-document .file-info-area[disabled] .filename {
    color: #b4b4b4;
}

.custom-field-document .file-info-area .filesize {
    max-width: 80px;
    color: #b4b4b4;
    font-weight: 500;
    white-space: nowrap;
    flex-grow: 0;
    flex-shrink: 0;
}

.custom-field-document .upload-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color: #a4cfd4;
    border-radius: 2px;

}

.custom-field-document .btnFlex {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    border: 1px solid #b4b4b4;
    min-height: 28px;
    border-radius: 4px;
}

.custom-field-document #editDownloadWrapper button:first-child {
    margin-right: 2px;
}

.customFieldData .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
}

.customFieldData .icon > .message-box {
    display: none;
    position: absolute;
    padding: 9px 11px 9px 7px;
    transform-origin: bottom;
    bottom: 130%;
    width: 288px;
    text-align: left;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: normal;
    text-align: left;
    word-break: unset;
    -moz-hyphens: manual;
    -webkit-hyphens: manual;
    hyphens: manual;
    word-wrap: break-word;
}

.customFieldData .icon:hover > .message-box {
    display: block;
    background: black;
    z-index: 9999;
    opacity: 0.85;
    color: white;
}
.customFieldData .icon .message-box .triangle{
    width: 0;
    height: 0;
    border-bottom: 8px solid #000;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translate(-50%, -50%) rotateZ(180deg);
}

.customFieldData.userDetail .icon > .message-box {
    width: 365px;
    padding: 8px 9px 12px 7px;
}
ul#userCustomField li:nth-child(even) .customFieldData.userDetail .icon > .message-box {
    left: -300px;
}
ul#userCustomField li:nth-child(even) .customFieldData.userDetail .icon > .message-box .triangle {
    left: 312px;
}