@charset "utf-8";

/* -----------------------------------------------------------------
 * Common
 * ----------------------------------------------------------------- */
:root {
	--line-height: 35px;
}

 strong {font-weight:bold;}
.hide {display:none;}
.flex {display:flex;}
.page-break {page-break-after:always; break-after:always; display:block;}
.page-break-before {page-break-before:always; break-before:always; display:block;}
i.page-break:last-child {display:none;}

.word-break {word-break:break-word;}

/* 金額表記（円マーク） */
.money::before {font-family:'FontAwesome'; content:"\f157"; padding-right:3px;}
.post {padding-right:5px;}
.post::before {content:"〒";}


/* 郵便番号より住所検索 複数の場合 */
.multi-address-select > label {display:block; margin:8px;}
.multi-address-select > label i {margin:3px;}


/* ステータスマーク */
span.status {
    position: absolute;
    right: 1em;
    top: 1em;
    height: 6.5em;
    line-height: 6em;
    width: 6.5em;
    text-align: center;
    vertical-align: middle;
    background-color: #999;
    border-radius: 50%;
    color:#fff;
    font-weight: normal;
    font-size: .8em;
    border: 5px solid var(--gray-light);
}

.error {
	position:absolute;
	font-weight:lighter; 
	line-height:1.2em; text-align:left; 
    width: 360px;
    left: 50%;
    top: 50%;
    transform: translate(-40%, -50%);
}

.error #content {
	color:#000;
	text-decoration:none;
	display:flex;
}
.error #content:hover {color:var(--main-color);}

.error #content code {
	position: absolute;
    top: 50%;
    transform: translate(-100%, -50%);
    font-size: 1.5em;
    font-weight: bold;
	color: #000;
}
.error #content span{
	border-left: 1px solid;
    padding: .5em 1em;
    margin-left: 1em;
    font-size: .9em;
}


/* ----------------------------------------- 
 * Page
 * ----------------------------------------- */
.page {background:#fff;}
.page.A4-V {width:220mm; height:297mm;}
.page.A4-H {width:297mm; height:220mm;}


/* -----------------------------------------------------------------
 * Mask
 * ----------------------------------------------------------------- */
.mm .x-mask {background:#fff; opacity:.1; height:100%;}

.loading-mask {
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right:0;
  bottom:0;
  z-index: 1999;
  opacity: 1;
  touch-action:none;
}

.open-mask, .stop-mask, .edit-mask {
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right:0;
  bottom:0;
  z-index: 999;
  opacity: 0;
  visibility:hidden;
  /* transition: opacity 0.2s 0s;
  -webkit-transition: opacity .2s 0s; */
}
.stop-mask {z-index: 1002;}
.edit-mask {z-index: 11;}

.open .open-mask {visibility:visible; opacity: .4;}


/* -----------------------------------------------------------------
 * Loading Spin
 * ----------------------------------------------------------------- */
.loading-spin {
  position: absolute;
  width: 40px;
  height: 40px;
  left:48%;
  top:200px;
  z-index:3000;
  display:none:
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #505050;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}


.loading-wait {
	position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color:var(--gray);
    z-index: 3000;
    box-shadow: 0px 0px 30px #888;
    overflow: hidden;
	display:none;
}
.loading-wait .loading-content{
	padding: 30px 0 10px;
    line-height: 2em;
    font-size: .85em;
	color: var(--gray-thin);
}

/* -----------------------------------------------------------------
 * Waiting Spin
 * ----------------------------------------------------------------- */
.waiting-spin {
	margin: 20px auto 10px;
	width: 90px;
	text-align: center;
}

.waiting-spin span{
	width:16px;
	height:16px;
	border-radius:50%;
	display:inline-block;
	position:absolute;
	left:50%;
	margin-left:-10px;
	-webkit-animation:3s infinite linear;
	-moz-animation:3s infinite linear;
	-o-animation:3s infinite linear;
}

.waiting-spin span:nth-child(2){
  background:#E84C3D;
  -webkit-animation:kiri 1.2s infinite linear;
  -moz-animation:kiri 1.2s infinite linear;
  -o-animation:kiri 1.2s infinite linear;
}
.waiting-spin span:nth-child(3){
  background:#F1C40F;
  z-index:100;
}
.waiting-spin span:nth-child(4){
  background:#2FCC71;
  -webkit-animation:kanan 1.2s infinite linear;
  -moz-animation:kanan 1.2s infinite linear;
  -o-animation:kanan 1.2s infinite linear;
}


@-webkit-keyframes kanan {
    0% {-webkit-transform:translateX(20px);
    }
   
  50%{-webkit-transform:translateX(-20px);
  }
  
  100%{-webkit-transform:translateX(20px);
  z-index:200;
  }
}
@-moz-keyframes kanan {
    0% {-moz-transform:translateX(20px);
    }
   
  50%{-moz-transform:translateX(-20px);
  }
  
  100%{-moz-transform:translateX(20px);
  z-index:200;
  }
}
@-o-keyframes kanan {
    0% {-o-transform:translateX(20px);
    }
   
  50%{-o-transform:translateX(-20px);
  }
  
  100%{-o-transform:translateX(20px);
  z-index:200;
  }
}

@-webkit-keyframes kiri {
   0% {-webkit-transform:translateX(-20px);
  z-index:200;
    }
  50%{-webkit-transform:translateX(20px);
  }
  100%{-webkit-transform:translateX(-20px);
  }
}

@-moz-keyframes kiri {
     0% {-moz-transform:translateX(-20px);
  z-index:200;
    }
  50%{-moz-transform:translateX(20px);
  }
  100%{-moz-transform:translateX(-20px);
  }
}
@-o-keyframes kiri {
     0% {-o-transform:translateX(-20px);
  z-index:200;
    }
  50%{-o-transform:translateX(20px);
  }
  100%{-o-transform:translateX(-20px);
  }
}


/* -----------------------------------------------------------------
 * Button Loading
 * ----------------------------------------------------------------- */
button.btn-loading:after {
	position: absolute; letter-spacing:0; width:16px; height:16px; line-height:1em; font-size:1.1em;
	top:50%; margin-top:-8px; right:20px;
	font-family: 'FontAwesome'; content: "\f021"; opacity:.6;
	animation: fa-spin 1.5s infinite linear;
	display:none;
}
.loading button.btn.btn-loading:after {display:block;}


.loading-pin::after {
	position: absolute;
    letter-spacing: 0;
    /* width:10px; height:10px; */
    line-height: 1em;
    top: 50%;
    margin-top: -5px;
    right: 5px;
    font-size: 1.1em;
    font-family: 'FontAwesome';
    content: "\f021";
    opacity: .6;
    animation: fa-spin 1.5s infinite linear;
	display:none;
}

.pin-loading {padding-right:20px !important;}
.pin-loading .loading-pin::after {display:block;}


/* -----------------------------------------------------------------
 * Icon
 * ----------------------------------------------------------------- */
.mm-icon {position:relative; width:100%;}
.mm-icon input {padding-left:35px !important; width:100% !important;}
.mm-icon input[readonly] {color:#505050;}
.mm-icon::before {
	position: absolute;
    width: 35px;
    line-height:35px;
    top: 50%;
    left: 0px;
    text-align: center;
    z-index: 5;
	  font-family:'FontAwesome';
    transform: translateY(-48%);
}
.mm-icon input[readonly]:disabled {color:#999;}
.fa-postal::before {content: "〒"; font-weight:bold;}

.mm-date::before, .mm-month::before, .mm-year::before {
	content: "\f073";
	font-size:1.1em;
}

.mm-week::after {
	content: attr(data-week);
	position: absolute;
	right: 3%;
	z-index: 1;
	line-height:35px;
	font-size: .8em;
	background: var(--gray);
	border-radius: 50%;
	color: #fff;
	height: 25px;
	width: 25px;
	text-align: center;
	vertical-align: baseline;
	line-height: 23px;
	bottom: 15%;
}
.mm-week:not([data-week])::after, .mm-week[data-week='']::after {display:none;}
.mm-week[data-week='土']::after {background: var(--color-saturday);}
.mm-week[data-week='日']::after {background: var(--color-sunday);}

.mm-info {font-size:10pt; cursor:pointer; color:var(--yellow);}
.mm-info::before {font-family:'FontAwesome'; content:"\f05a"; padding-left:5px;}
.mm-info:hover {color:#000; opacity:1;}


/* -----------------------------------------------------------------
 * Form Controller
 * ----------------------------------------------------------------- */
.mm-radio {cursor:pointer; text-align:left;}
.mm-radio::before {content:"\f096"; font-family:'FontAwesome'; display:inline-block; width:16px;}
.mm-radio.checked::before {content:"\f14a";}
.mm-radio.disabled {opacity:.5;}

.mm-switch {cursor:pointer; text-align:left; margin:0 auto; color:#999; line-height:var(--line-height);}
.mm-switch::before {content:"\f204"; font-family:'FontAwesome'; display:inline-block; width:24px; font-size:1.2em;}
.mm-switch.checked {color:#000;}
.mm-switch.checked::before {content:"\f205"; color:#3f9472;}
.mm-switch.invalid.checked::before {color:var(--danger);}
.mm-switch.disabled {opacity:.75;}


/* ----------------------------------------- 
 * Datepicker
 * ----------------------------------------- */
.datepicker-days th.dow {border-bottom:1px solid var(--gray-thin);}
.datepicker-days th.dow, .datepicker-days td.day {border-radius:0;}
.datepicker-days td.day.sun {background:#FEF4F1;}
.datepicker-days td.day.sat {background:#EEF7F9;}


/* -----------------------------------------------------------------
 * Side Panel
 * ----------------------------------------------------------------- */
.side-panel {position:fixed; display:none; bottom:0; top:0; padding:0; background-color:#fff;  z-index:1001; box-shadow:0px 10px 20px #999; overflow-y:hidden; overflow-x:hidden;}
.side-panel .side-panel-container {position:relative; padding:0px 0px 20px;}
.side-panel iframe.side-panel-container {position:absolute; padding:0; margin:0; top:0; left:0; width:100%; height:100%; z-index:0;}
.frame .side-panel {top:45px; background-color:#8f8f8f; padding:20px; box-shadow:none; overflow-y:hidden;}

.side-panel button.btn.btn-default {color:#fff; background-color:#999;}
.side-panel button.btn.btn-default:hover {background-color:#666;}
.side-panel button.btn-close {right:20px; top:20px; position:absolute;}
.side-panel.googleDoc button.btn-close {width:100px; height:100px; background:#4c494c; right:0px; top:0px; border-radius:0 !important; border: 25px solid #d1d1d1;}
.side-panel.googleDoc button.btn-close i::before, 
.side-panel.googleDoc button.btn-close i::after {background: #ccc; left:13px;}
.side-panel.googleDoc button.btn-close:hover i::before,
.side-panel.googleDoc button.btn-close:hover i::after {background:#fff;}

.side-panel.office button.btn-close {width:45px; height:45px; background:#fff; right:50px; top:50px; border-radius:50% !important; border:4px solid #000; opacity:.2;}
.side-panel.office button.btn-close:hover {opacity:1;}
.side-panel.office button.btn-close i::before, 
.side-panel.office button.btn-close i::after {background:#000; left:6px;}

 body.open.open-side-panel {overflow:hidden;}

.side-panel h3 {text-align:center; padding:40px 0 20px; width:100%; background:transparent; margin:0; border-bottom:0px solid var(--main-color-medium);}
.side-panel h3 > b {border:0px solid; border-radius:20px; font-size:.85em; padding:0.5em 1.2em 0.4em 1.3em; letter-spacing:.1em;}
.side-panel [data-simplebar] {padding:5px 20px 0;}
.side-panel table[data-simplebar] {padding:5px 10px 0;}
.side-panel .action-panel .input-block {width:100%;}
.side-panel .action-panel .input-block input[type=text] {border:solid 1px var(--gray-thin); background:#fff;}
.side-panel .action-panel .bootstrap-select .btn.dropdown-toggle {background-color:#fff; border-color:var(--gray-thin);}

.side-panel .action-panel u {text-decoration:none; color:#333;}
.side-panel .action-panel u i::before {padding-right:5px;}

.side-panel .img {width:100%; margin-top:1em; aspect-ratio:4/3; background:var(--gray-thin) url(../images/bg_image_line.png) repeat;}
.side-panel .img figure {height:100%; width:100%; background-repeat:no-repeat; background-size:contain; background-position:center;}

.side-panel [mm-scrollbar] {overflow-y:auto; overflow-x:hidden; min-height:100px; padding:0 20px; height:calc(90vh);}


/* ----------------------------------------- 
 * data-selector (right slide sidebar)
 * ----------------------------------------- */
.pop-selection .action-panel {padding:0; background:transparent;}
.pop-selection .action-panel .filter-keyword {/*background:var(--main-color-light);*/ border-color:var(--gray-thin); border-style:solid; border-width:0 0 1px 0;}
.pop-selection .action-panel .filter-keyword::before {content:"\f002"; font-family:'FontAwesome'; position:absolute; left:20px; top:50%; transform: translateY(-50%); z-index:1; color:#666; font-size:1.5em;}
.pop-selection .action-panel .filter-keyword input {padding-left:60px; height:50px; background:transparent; border:0 !important;}
.pop-selection table {width:100%; font-size:.9em;}
.pop-selection table td {cursor:default;}
.pop-selection table tr:hover td {background-color:var(--main-color); color:#fff;}
.pop-selection table td {border-width:0 0 1px 0; border-style:solid; border-color:#fff; padding:8px 10px; letter-spacing:0px; font:menu; font-size:1em; background:#f0f0f0;}
.pop-selection table td:first-child {white-space:nowrap; width:1%;}
.pop-selection table td[data-key=hide] {display:table-cell; padding:2px;}

/* -----------------------------------------------------------------
 * pop-menu
 * ----------------------------------------------------------------- */
.pop-menu {position:absolute; background:var(--white); z-index:1; cursor:pointer; box-shadow:4px 4px 8px rgba(0,0,0,.1); border: 1px solid var(--gray-thin); font-size:.85rem; letter-spacing:.2em; border-radius:4px; padding:.3em;}
.pop-menu li a {display:block; padding:.25em 1.5em; width:100%; line-height:1.6em; min-width:120px;}
.pop-menu li a:not([disabled]):hover {background-color:#f0f0f0;}
.pop-menu li a[disabled] {opacity:.2; cursor:not-allowed;}
.pop-menu li a i.fa {width:24px; text-align:center; margin-left:-1em;}
.pop-menu li.divider::before {content:""; display:block; border-bottom: 1px dotted #e0e0e0; margin:.3em -.3em;}
.pop-menu li.danger {color:var(--danger);}


/* ----------------------------------------- 
 * msgBox
 * ----------------------------------------- */
 body.stop {overflow:hidden;}
 body.stop .stop-mask {visibility:visible; opacity: .4;}
 body.stop .msg-box {display:block;}

.msg-box {position:fixed; left:50%; top:50%; padding:20px; background-color:#fff;  z-index:1003; box-shadow:0px 0px 30px #888; overflow:hidden;}

.msg-box-buttons {text-align:center; white-space:nowrap;}

.msg-box .msg-box-title {line-height:1.2em;}
.msg-box .msg-box-buttons button.btn {display:block; width:100%; height:80px; margin:10px 0; text-align:left; }
.msg-box .msg-box-buttons button.btn small {font-size:9pt; font-weight:normal; display:block;}
.msg-box .msg-box-buttons button.btn.btn-outline-link {border:1px solid #ccc;}

.msg-box.msg-box-hori .msg-box-buttons {position:relative; width:100%;}
.msg-box.msg-box-hori .msg-box-buttons button.btn {display:inline-table; min-width:90px; margin:5px; text-align:center; height:45px;}
.msg-box.msg-box-hori .msg-box-buttons button.btn small {display:none;}
.msg-box.msg-box-hori .msg-box-buttons.btns-2 {width:48%;}
.msg-box.msg-box-hori .msg-box-buttons.btns-3 {width:30%;}
.msg-box.msg-box-hori .msg-box-buttons.btns-4 {width:24%;}
.msg-box.msg-box-hori .msg-box-title {display:none;}

.msg-box .msg-box-content {padding:10px 0; line-height:1.25em; font-size:.9em;}
.msg-box .msg-box-content li label {display: block; font-size: .9em; margin: .5em 0;}

.msg-box.msg-box-wait {background-color:var(--main-color-light); text-align:center;}

.msg-box.msg-box-alert {padding:20px 30px; white-space:nowrap;}
.msg-box.msg-box-alert .msg-box-buttons button.btn {display:inline-table; height:35px; max-width:150px; text-align:center;}
.msg-box.msg-box-alert .msg-box-buttons button.btn small {display:none;}

 body.stop .dropdown-menu {z-index:998;}
 body.stop .msg-box .form-control {border:1px solid #ccc;}
 body.stop .msg-box .form-control[readonly] {border-color:transparent transparent var(--gray-thin) !important;}


/* ----------------------------------------- 
 * notify
 * ----------------------------------------- */
.mm-notify {position:fixed; display:inline-table; font-weight:normal; font-size:.95em; left:50%; top:40%; padding:1.5em 2em 1.5em 3.5em; opacity:1; border-radius:4px; white-space:nowrap; z-index:9999; background:var(--danger); color:var(--white);}
.mm-notify::before {content:"\f071"; font-family: 'FontAwesome'; font-size:1.4em; position:absolute; left:1.5em; top:50%; transform:translateY(-50%);}
.mm-notify ul {padding-left:10px; line-height:1.1em;}
.mm-notify ul li {/*list-style-type:circle;*/ margin:5px 0;}

.mm-notify.info {background:var(--main-color);}
.mm-notify.info::before {content:"\f046";}

.mm-notify.danger {border-color:#CC0000; color:#CC0000;}


/* ----------------------------------------- 
 * Shortcuts
 * ----------------------------------------- */
#shortcut-frame a {width:175px; background:#f5f5f5; border:1px solid transparent; margin:10px 5px 0; text-align:center; display:inline-table; cursor:pointer; color:#505050; float:left; transition:background 0.3s ease; border-radius:8px;}
#shortcut-frame a i {display:block; height:80px; margin:0; padding: 25px 0 0 20px;; font-family: 'FontAwesome'; content: "\f0f6"; font-size:1.5em; text-align:left;}
#shortcut-frame a b {font-weight:normal; display:block; font-size:.8em; line-height:1.1em; height:45px; overflow:hidden; text-align:left; padding:0 15px;}
#shortcut-frame a:hover {background:transparent; border-color:#ccc; text-decoration:none;}
#shortcut-frame a b u {display:block; margin-top:2px; font:menu; text-decoration:none;}


/* ----------------------------------------- 
 * uploader
 * ----------------------------------------- */
.mm .qq-uploader input[type=file] {width:100%; height:100%; font-size:0;}
.mm .qq-upload-button {font-size:1em; width:auto; padding:0; border: 0; border-radius:0; line-height:60px; background-color:transparent;}
.mm .qq-upload-drop-area, .mm .qq-upload-extra-drop-area {position:fixed !important; opacity:.7; border:5px dashed #000; background-color:var(--main-color-medium); width:98%; height:calc(98vh - 50px); top:50px; left:1%;}
.mm .qq-upload-drop-area span {font-size:3em;}
.mm .qq-drop-processing {z-index:1; position:relative; color:#f00;}
.mm .qq-upload-list {z-index:1; position:relative; margin:0;}
.mm .qq-upload-list li {background-color:var(--main-color-light);}
.mm .qq-drop-processing, .mm .qq-upload-list {min-width:600px;}

ul.file {position: relative;}
ul.file > li {color:#000; padding:10px; position:relative; background:#f0f0f0; display:block; width:250px; height:60px; margin:10px 10px 10px 0; float:left;}
ul.file > li:hover {cursor:pointer; background:var(--gray-thin);}
ul.file > li > a {width:100%; height:100%; display:block; color:#333; line-height:1.2em;}
ul.file > li > a i {position:absolute; left:50px; top:10px; width:170px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
ul.file > li > a u {color:#666; position:absolute; left:50px; bottom:12px; text-decoration:none; font-size:.8em;}
ul.file > li > button {color:transparent; background:transparent; position:absolute; right:0; top:0; bottom:0; display:block; padding:6px; border:0;}
ul.file > li > button:hover {background:#ccc;}
ul.file > li:hover > button {color:#999;}
ul.file > li.attach-item:before {font-family: 'FontAwesome'; content: "\f0f6"; line-height:60px; font-size:2.4em; position:absolute; top:2px; opacity:.7;}
ul.file > li > .dropdown-menu {font-size:.9em;}
ul.file > li > .dropdown-menu li a {padding:5px 10px 5px 20px; display:flex;}
ul.file > li > .dropdown-menu li:hover {background-color:#f0f0f0;}
ul.file > li.btn-upload {background:#fff; padding:0; border:1px solid #888; width:70px;}
ul.file > li.btn-upload i.fa {font-size: 1.3em;}
ul.file > li.btn-upload:hover {background:var(--main-color-medium);}
ul.file > li > a.img-preview {display:none;}

ul.file > li[data-ext=pdf]:before {content: "\f1c1"; color:#990000;}
ul.file > li[data-ext=mp4]:before {content: "\f1c8"; color:#003366;}
ul.file > li[data-ext=doc]:before, ul.file > li[data-ext=docx]:before {content: "\f1c2"; color:#003399;}
ul.file > li[data-ext=xls]:before, ul.file > li[data-ext=xlsx]:before, ul.file > li[data-ext=xlsb]:before, ul.file > li[data-ext=xlsm]:before {content: "\f1c3"; color:#336633;}
ul.file > li[data-ext=ppt]:before, ul.file > li[data-ext=pptx]:before, ul.file > li[data-ext=ppsx]:before, ul.file > li[data-ext=pps]:before, ul.file > li[data-ext=ppsm]:before {content: "\f1c4"; color:#993300;}
ul.file > li[data-ext=zip]:before, ul.file > li[data-ext=rar]:before {content: "\f1c6"; color:#660099;}
ul.file > li[data-ext=jpg]:before, ul.file > li[data-ext=jpeg]:before, ul.file > li[data-ext=bmp]:before, ul.file > li[data-ext=gif]:before, ul.file > li[data-ext=png]:before {content: "\f1c5"; color:#996600;}

ul.file > li .dropdown-menu {right:0; left:0;}
ul.file > li .dropdown-menu li.del a {color:#CC0000; text-indent:2px;}

/*
ul.file > li .dropdown-menu li a:before {font-family: 'FontAwesome'; content: "\f014"; padding-right:4px; width:10px;}
ul.file > li .dropdown-menu li.download a:before {content: "\f019";}
ul.file > li .dropdown-menu li.del a:before {content: "\f00d";}
ul.file > li .dropdown-menu li.preview a:before {content: "\f06e";}
*/


/* ----------------------------------------- 
 * searchKeyword
 * ----------------------------------------- */
.action-panel .searchConditionMore {margin:0; width:100%; }
.action-panel .searchConditionMore > .input-block { padding:10px 0 0;}
.action-panel .searchKeyword a.pop, .action-panel .searchKeyword a.pop:before {line-height:calc(1.5em + 0.5rem + 2px);}

.searchConditionMore b {font-size: .875rem;}

.toggleConditionMore {cursor:pointer; opacity:.8;}
.toggleConditionMore:after {content:"More..."; font-size:.75em; padding:0 8px;}
.toggleConditionMore:hover {opacity:1;}

.searchKeyword {width:100%;}
.searchKeyword, .searchKeyword .key {position:relative; display:inline-block;}
.searchKeyword p {padding:3px 0 0;}
.searchKeyword input[type=text] {max-width:300px; padding-right:30px;}
.searchKeyword a.pop {display:none; position:absolute; right:0; top:0; border:0; cursor:pointer; padding:0px 6px; margin:0; z-index:1; background:var(--main-color); height:100%; color:#fff; font-size:.9em;}
.searchKeyword a.pop:before {font-family:'FontAwesome'; content:"\f002"; line-height:35px;}
.searchKeyword a.pop:hover {background:#245582; color:#fff;}
.searchKeyword .selectable a.pop {display:block;}
.searchKeyword.lock .selectable a.pop {display:none;}
.searchKeyword.lock .selectable input[type=text] {padding-right:0 !important;}

 button.btn-del-search-keyword:before {font-family: 'FontAwesome'; content: "\f00d"; font-size:.8em; display:block; line-height:1.8em;}
 button#addSearchKeyWord {font-size:.8em;}

.searchKeyword.show-label {background:#eee; overflow:hidden;}
.searchKeyword.show-label .selectable {position:absolute; z-index:1;}
.searchKeyword.show-label label {display:block; position:absolute; z-index:0; color:#999; font-size:.8em; bottom:0px; top:0px; line-height:35px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; width:100%; padding-left:90px; background: #fff; border-bottom: 1px solid var(--gray-thin);}
.searchKeyword.show-label input[type=text] {width:80px;}

.searchKeyword.show-label input.form-control[data-type=value] {display:none; width:100%; position:absolute; z-index:0; bottom:0; top:0;}
.searchKeyword.show-label.except input.form-control[data-type=value] {display:block;}
.searchKeyword.show-label.except label {display:none;}


/* -----------------------------------------------------------------
 * nav-tabs
 * ----------------------------------------------------------------- */
ul.nav {position:relative; border-bottom:none;}
ul.nav li.right {position:absolute; bottom:3px; right:0; font-size:8pt;}

ul.nav-tabs {background:transparent; margin-bottom:2px; padding:0; -ms-flex:100%; flex:100%%; max-width:100%;}
ul.nav-tabs > li {width:100%;}
ul.nav-tabs.col-1 {display:none;}
ul.nav-tabs.col-2 > li {width:50%;}
ul.nav-tabs.col-3 > li {width:33.3333%;}
ul.nav-tabs.col-4 > li {width:25%;}
ul.nav-tabs.col-5 > li {width:20%;}
ul.nav-tabs > li > a {display:block; text-align:center; margin:0 0 3px; padding:10px 2px; z-index:2; font-weight:normal; color:#666; line-height:1em;}
ul.nav-tabs > li > a, ul.nav-tabs > li > a.active, ul.nav-tabs > li > a.active:hover, ul.nav-tabs > li > a.active:focus {border-width:0 0 1px 0; border-style:solid; border-color:#eee; border-radius:0;}
ul.nav-tabs > li:first-child > a {border-left:0 !important;}
ul.nav-tabs > li > a:hover {transition: all 0.5s ease; text-decoration:none;}


/* ----------------------------------------- 
 * Form Layout
 * ----------------------------------------- */
.row.sub > div[title]::before {
  position: absolute;
  font-size: .8em;
  color: #999;
  top: -1.5em;
  z-index: 1;
  white-space: nowrap;
  content: attr(title);
}
.row.sub:empty {display:none;}
.edit .row.sub > div[title]::before {color:var(--main-color); font-size:.75em; margin-left:.5em;}