@charset "utf-8";
/* CSS Document */

html{
	height:100%;}
html.js-scrl{
  scroll-padding-top:120px;
  scroll-behavior: smooth;
  -webkit-scroll-padding-top:120px;}

body{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background-color:#f9f8f7;
	color:#000;
    font-size:13px;
	line-height:1.43;
	height:100%;}

.bg-body{
	background-color:#f9f8f7 !important;}
.white{
	background-color:#fff !important;}
.kclr{
	color:#2D83D0;}
.kclrb{
	background-color:#2D83D0;}
a{
	color:#2D83D0;}
.bclr{
	color:#000;}


.wrapper {
    max-width: 1920px;
	height:100%;
    margin: 0 auto;}
.container{
	height:100%;}
.container.hauto{height: auto;}
.js-on .wrapper{
    display: none;}
.-half > .flx {
    width: 100%;
    align-items: stretch;}
.-half .Bg {
    transition: all .1s;
    animation-delay: 0.1s;
    animation: taadaa 1s;
    background-size:auto 1256px;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;}
#zerosign .-half .Bg{
    background-image: url(../img/zerosign/back002.svg);
    background-position:center center;
background-size: 100% auto;}
#zerosign .-half .Bg{
    transition: all 0s;}
/*************************************************************************************************/
/*************************************************************************************************/
#docuflow .-half .Bg{
    background-image: url(../img/lback03.jpg);
    background-position:center center;}
@media screen and (max-width:1920px){
#docuflow .-half .Bg{
    background-position:center 0;
    background-size:auto 100%;}
}
@media screen and (max-width:788px){
#docuflow .-half .Bg{
	background-position: -80px -320px;
    background-size: auto 540px;}
}
@media screen and (max-width:580px){
#docuflow .-half .Bg{
	background-position: -80px -250px;
    background-size: auto 440px;}
}
/*************************************************************************************************/
/*************************************************************************************************/
#bind .-half .Bg{
    background-image: url(../img/bind/backn01.jpg);
    background-position:center center;}
@media screen and (max-width:1920px){
#bind .-half .Bg{
    background-size:auto 980px;}
}
@media screen and (max-width:580px){
#bind .-half .Bg{
    background-position:-70px center;
    background-size:auto 380px;}
}
/*************************************************************************************************/
/*************************************************************************************************/
#builmendx .-half .Bg{
    background-image: url(../img/builmendx/back03.jpg);
    background-position:center center;}

/*************************************************************************************************/
/*************************************************************************************************/
#invoice .-half .Bg{
    background-image: url(../img/invoice/back002.jpg);
    background-position:-300px 0;}
@media screen and (max-width:1920px){
#invoice .-half .Bg{
    background-position:-200px 0;
    background-size:auto 980px;}
}
@media screen and (max-width:1280px){
#invoice .-half .Bg{
    background-position:-350px 0;}
}
@media screen and (max-width:900px){
#invoice .-half .Bg{
    background-position:-370px 0;
    background-size:auto 880px;}
}
@media screen and (max-width:788px){
#invoice .-half .Bg{
    background-position: -50px -110px;
	background-size: auto 540px;}
}
@media screen and (max-width:407px){
#invoice .-half .Bg{
	background-position:-30px -40px;
    background-size: auto 310px;}
}
/*************************************************************************************************/
/*************************************************************************************************/
#shoko .-half .Bg{
	background-position:center center;
	background-color:#ea1f69;
	background-size:600px auto;
    background-image: url(../img/shoko/back002.png);}
/*************************************************************************************************/
#opencalendar .-half .Bg{
	background-position:center center;
	background-color:#ea1f69;
	background-size:cover;
    background-image: url(../img/opencalendar/sign-back.png);}
/*************************************************************************************************/
/*************************************************************************************************/
#support .-half .Bg {
    background-image: url(../img/support/back001.jpg);
    background-position: center center;
}
#support .sprt-top-btn{padding: 20px 20px 0 20px;}
@media screen and (max-width: 702px){
#support .sprt-top-btn{
	-webkit-justify-content: center;
	justify-content:center;}
#support .sprt-top-btn > .right{
    margin-left:0;
	-webkit-justify-content: center;
	justify-content:center;}
}
@keyframes taadaa {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
.-half .Bg.board{
	background-image:none;}
.-half .Bg.board:before{
	display:none;}
#zerosign .-half .Bg.board > .flx .col-50 img{
	max-width:120px;}

@media screen and (max-width:788px){
.-half .Bg{
	width:100%;
	height:140px;}
#zerosign .-half .Bg.board {
	width:100%;
	height:220px;
	display:flex;
	justify-content:center;
	align-items: center;}
#zerosign .-half .Bg.board > .copy{
	display:none;}
#zerosign .-half .Bg.board > .flx .col-50{
	width:25%;
	padding:0 5px;}
#zerosign .-half .Bg{
	height:160px;}
#zerosign .-half .Bg.board > .flx .col-50 .f_r1{
	font-size:0.7rem;}

}

.centerin{
    display: inline-block;
    width: 100%;
    padding: 30px;
    line-height: 1.66;
    vertical-align: middle;}
.auth .logo,
.auth .body,
.auth .txt{
    text-align: left;
    width: 100%;}
.auth .body{}
.auth .body .nav-tabs .nav-item{
	width:50%;
	border:none;
	margin:0;}
.auth .body .nav-tabs .nav-item:first-child .nav-link{
	border-radius:8px 0 0 0;}
.auth .body .nav-tabs .nav-item:last-child .nav-link{
	border-radius:0 8px 0 0;}
.auth .body .nav-tabs .nav-item .nav-link{
	background-color:#ddd;
	box-shadow:inset -1px -1px 20px rgba(0,0,0,0.1);
	text-align:center;}
.auth .body .nav-tabs .nav-item.active .nav-link{
	box-shadow:none;
	background-color:#fff;}
.auth .body .tab-contents{
	background-color:#fff;
	border-radius:0 0 8px 8px;}
.auth .body .nav-tabs .nav-item:not(.active):hover .nav-link{
	background-color:#eee;}
.auth .body .nav-tabs .nav-item .nav-link{
	padding:15px 5px;}
.auth .body .tab-contents > .tab-pane{
	border:none;
	margin-top:0;
	padding:30px;}
.auth .input{
	outline: none;
    color: #333333;
    line-height: 1.2;
    font-size: 20px;
    display: block;
    width: 100%;
    background:#fff;
    height: 60px;
    padding: 0 10px 0 70px;}
.auth .icip{
	position:relative;
	margin-bottom:13px;}
.auth .icip > span{
	position: absolute;
    left: 1px;
    top: 1px;
    height: 58px;
    width: 58px;
    background-color: #eee;
    border-radius: 1px 0 0 1px;}
.auth .icip.err > span{
	background-color:#FFE8E8;}
.auth .icip > span i{
	font-size:1.6rem;}
.auth .icip > span i.icon-tie{
	font-size:1.8rem;}
.auth .body .btn{
	width:100%;
	font-size:1.1rem;
	font-weight:bold;}


.cont-inner {
    padding:25px;
    position: relative;
    margin: 0 auto;}
.cont-inner.widev{
	padding-left:0 !important;
	padding-right:0 !important;}
.cont-inner.wideh{
	padding-bottom:0 !important;}
.cont-inner.pd_a13{
	padding:13px;}
aside .cont-inner{
    padding: 13px;}
aside.left .simplebar-content > .cont-inner .m-in + .list .list-i:first-child{
	margin-top:-15px;}
@media screen and (max-width:771px){
aside.left .simplebar-content > .cont-inner .m-in + .list .list-i:first-child{
	margin-top:0px;}
.cont-inner{
    padding:13px;}
.pd_a25{padding: 13px !important;}
}
body > main {
    flex: 1;
    -ms-flex: 1;
    overflow: hidden;}
body > main > .board{
    min-height: 100vh !important;
    padding: 54px 0 0;
    background-color: #009CF0;
    text-align: center;}
body.cover > main > .board{
    background-color:transparent;}
.intro .cover{
    height: 700px;
    padding: 30px;
    background-image: url(../img/backg03.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: relative;
    z-index: 1;}
.cover {
    max-width: 1920px;
    margin: 0 auto;
	background-color:#fff;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 1;
    position: relative;
    overflow: hidden;}
.cover header{
	border-bottom:none;}
.cover.cvv1{
    background-image: url(../img/back02.jpg);}
.cover.cvv2{
    background-image: url(../img/nback01.jpg);}
.cover.cvv3{
    background-image: url(../img/nback02.jpg);}
.fullst > .container{
    min-height: 100vh;
	padding:25px;}
@media screen and (max-width:440px){
.fullst > .container{
    min-height: 100vh;
	padding:15px;}}
.fullst.-half > .container{
	padding:0px;}
.fullst > header + .container{
	padding-top:64px;}
.fullst > header + .container{
    min-height:calc(100vh - 64px);}

.openside > .container > .left{
	padding:30px;}
.openside > .container .auth{
	width:100%;
	max-width:480px;
	background-color:#fff;
	padding:30px;
	border-radius:10px;
	box-shadow:0 0 30px rgba(0,0,0,0.3);}
.-half.openside > .container .auth{
	box-shadow: none;}
.-half.openside > .container .auth .logo{
	margin-bottom: 50px; margin-top: -10px;}
@media screen and (max-width: 788px){
.-half.openside > .container .auth .logo{
	margin-bottom:30px; margin-top:0px;}

}
@media screen and (max-width:505px){
.openside > .container .auth{
	padding:18px;}
}
.openside > .container .auth.st02{
	box-shadow:none;
	border:solid 1px #ddd;}

.dbwrap {
    overflow: hidden;
    flex-wrap: wrap;
    align-items: stretch;
    box-shadow: 0px 2px 4px rgb(0 0 0 / 55%);}
.box .dbwrap{
	box-shadow:none;}
.dbwrap .db-contents {
    padding:20px;
    flex-wrap: wrap;
	background-color:#fff;}
.BIND .dbwrap {
    width:870px;}
.BIND .db-contents.wp30{
	color:#fff;}
.BIND .db-contents.wp30{
	background-color:rgba(38, 209, 240, 0.2);}
.BIND .db-contents.wp30 .logo{
	padding-left:0;
	margin-top:50px;
	margin-bottom:50px;}
@media screen and (max-width:580px){
.cover .dbwrap{
	flex-wrap: wrap;}
.db-contents.wp30,
.db-contents.wp70{
	width:100%;}
.db-contents.wp30 .logo{
	margin-top:0px;
	margin-bottom:10px;}
}

#support .cover.openside{
	background-color: #f7ce4d;
	background-size: 500px auto;
	background-position: 150px bottom;
    background-image: url(../img/support/backbg2.png);}
@media screen and (max-width:788px){
#support .cover.openside{
    background-image:none;}
}
#opencalendar .cover.openside{
    background-image: url(../img/opencalendar/back01.jpg);}
#docuflow .cover.openside{
    background-image: url(../img/n-bg01.jpg);}
#invoice .cover.openside{
    background-image: url(../img/invoice/back001.jpg);}
#bind .cover.openside{
    background-image: url(../img/bind/cover02.png);}
#builmendx .cover.openside{
    background-image: url(../img/builmendx/back02.jpg);}
#zerosign .cover.openside{
    background-image: url(../img/zerosign/back001.svg);
	background-size:auto 420px;
	background-position:200px center;}
#shoko .cover.openside{
    background-image: url(../img/shoko/folder.png);
	background-size:auto 420px;
	background-position:100px center;}
#zerosign .openside > .container section .auth,
#shoko .openside > .container section .auth{
	box-shadow:none;
	background-color:rgba(255,255,255,0.7);}
.cover.-half{
	background:none !important;}
@media screen and (max-width:788px){
.cover.openside > .container.flx:not(.center){
	-webkit-flex-direction: column;
     flex-direction:column;}
.openside > .container > .left{
	flex:none;
	margin-right:0;
    padding: 30px 0;}
.openside > .container > .right{
	flex:none;
	margin-left:0;}
.openside > .container > .left{}

#zerosign .cover.openside {
	background: none;}
#zerosign .openside > .container .auth{box-shadow: none;}
}
header + .topmenu-dropdown-wrap + .container > .cont-inner.hd,
header + .topmenu + .container > .cont-inner.hd{
	padding-top:72px;}
header + .topmenu-dropdown-wrap + .container > .cont-inner.hdoff,
header + .topmenu + .container > .cont-inner.hdoff{
	padding-top:15px;}
@media screen and (max-width:771px){
header + .topmenu-dropdown-wrap + .container > .cont-inner.hd,
header + .topmenu + .container > .cont-inner.hd{
	padding-top:52px;}

}

.gate{
	display:grid !important;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	grid-auto-rows: 1fr;
	gap:15px;}
.gate::before {
  content: '';
  width: 0;
  padding-bottom: 100%;
  grid-row: 1 / 1;
  grid-column: 1 / 1;}
.gate > .ani-btn:first-child{
  grid-row: 1 / 1;
  grid-column: 1 / 1;}
.gate > .ani-btn > .flx{
	height:100%;}
.gate > .ani-btn > .flx .fx-cnt-in{
	height:100%;}
.gate > .ani-btn:before	{
	border-radius:6px;}
.gate-wrap .title{
	font-size:1.8rem;
	text-shadow:#fff 2px 0 3px;
	width:100%;}
.gate > .ani-btn h3,
.gate > .ani-btn .subt{
	font-weight: bold;
	padding-left:5px;
	padding-right:5px;
	font-size:1.1rem;
	letter-spacing:-1px;
	line-height:1;
	height:39%;
	display:flex;
	-webkit-justify-content: center;
	justify-content:center;
	-webkit-align-items: center;
	align-items: center;}
.gate > .ani-btn h3 i{
	margin-right:6px;}
.gate > .ani-btn .num{
	position:absolute;
	bottom:10px;
	right:10px;}
.gate .notice{
	font-size:2rem;}
.gate .notice i{
	font-size:2.6rem;}
.gate.st02{display: flex !important;}
.gate.st02:before{display: none;}
.gate.st02 .ani-btn{width: 140px; height: 140px;}
.gate.def .ani-btn{width: 140px; height: auto; min-height: 70px;}
.gate.def > .ani-btn{padding: 10px;}
.gate.def > .ani-btn h3,
.gate.def > .ani-btn .subt{
	height: auto;}
.gate.def > .ani-btn > .flx .fx-cnt-in{height: auto;}
.container + footer{
    z-index:1238;
    border-top: solid 1px #ddd;
    background-color: #fff;
    width: 100%;
    left: 0;
    bottom: 0;
    position: fixed;}
header,
.topmenu{
    background-color: #fff;
    width: 100%;
    left: 0;
    top: 0;
    position: fixed;
    -webkit-transition: ease .2s;
    transition: ease .2s;}
header {
    z-index:1238;
    border-bottom: solid 1px #ddd !important;}
header a {
    color: #000;}
header > .cont-inner {
    padding:0px 15px 0px 15px;}
header > .cont-inner > .flx{
    height: 47px;}
@media screen and (max-width:771px){
.ld-temp-right main > .cont-inner{
	margin-top:0px !important;}
.dblock > aside:not(.right,.nrr2,.nrr1){
	top:44px !important;
	width:100% !important;}
header + .topmenu-dropdown-wrap + .container > .dblock > aside.left{
	top:calc(48px + 42px)!important;}
header + .topmenu-dropdown-wrap.ftst + .container > .dblock > aside.left,
header + .container > .dblock > aside.left{
	top:calc(48px)!important;}/*/bind/message.html  docuflow/format-newCreat-tempcrt.html */
.nonavi .flxclm.top .dblock > aside.left{
	top:37px !important;}
.topmenu.slidest + .container .dblock > aside:not(.right,.nrr2,.nrr1){
	top:calc(48px + 42px) !important;}
}
.logo {}
.logo > a{display: inline-block;}
.elli .logo > a.txtv{display:block;}
.logo img{vertical-align: middle;}
.logo img + .txt{
	color: #000;
	font-weight: bold;
    line-height: 1;
    font-size:1.5rem;
    margin-left:7px;
    margin-top:6px;}
@media screen and (max-width:470px){
.logo.builmendx.-customer img{height: 20px !important;}
}
header .logo.txt{
	padding-left:0;
	line-height:1;}
header .logo.txtv{
	letter-spacing: -1px;
    font-weight: bold;
    font-size: 1.4rem;
    margin-top: 5px;}
header .logo.wtxt{
    text-indent: 0;
    padding-left: 40px;
	padding-top:5px;
    font-size: 1.2rem;
    font-weight: bold;
    display: flex;
    -webkit-align-items: center;}
.hd-r-menu{
	align-items: center;}
.hd-r-menu > li > a{
	margin-left:13px;
    display:flex;
	align-items: center;
	justify-content:center;
	border-radius: 38px;
    position: relative;}
.hd-r-menu > li > a:not(.btn){
    width:38px;
	height:38px;
    color: #009CF0;}
.hd-r-menu > li > a:not(.btn):hover{
	background-color: #efefef;}
.subst[class^="bg-"] .hd-r-menu > li > a:not(.btn):hover,
.subst[class*=" bg-"] .hd-r-menu > li > a:not(.btn):hover{
	background-color: #fff;}
.hd-r-menu > li.current > a,
.hd-r-menu > li > a.active {
	background-color:#DAF7F9;}
.hd-r-menu > li a i {
	margin-top: 2px;
	color:#009CF0;
    font-size: 1.5rem;}
.hd-r-menu > li a i.icon-more-horizontal{
    font-size:1.6rem;}
.hd-r-menu > li a i.icon-menus{
	font-size:1.3rem;}
.hd-r-menu > li a .num {
    position: absolute;
    bottom: 0px;
    right: -5px;}
@media screen and (max-width:510px){
.hd-r-menu > li > a{
    width: 28px;
    height: 28px;
    border-radius: 28px;
	margin-left:5px;}
.hd-r-menu > li a .num{
    width:16px;
    height:16px;
    border-radius:16px;
    line-height:16px;}
}
.hd-r-menu > li > .pic{
	width: 35px;
	margin-top:0px;
	margin-left:13px;}
.hd-r-menu > li > .pic .img {
	height: 35px;}
.hd-txt-menu{
	margin-top: 15px;}
.hd-txt-menu > li > a{padding: 3px;}
.hd-txt-menu > li > a:hover{
	background-color: #efefef;}
.hd-txt-menu > li{margin-left:20px;}
header li a.btn{
	width:auto;
	line-height:1;}
header li a.btn i{
	font-size:.95rem;
	margin-right:8px;}
@media screen and (max-width:510px){
header li > a.btn{
	font-size:0.7rem;
	margin-top:4px;}
header li > a.btn i{
	font-size:0.7rem;
	margin-right:3px;}
}
.header-rlt.active{
	background-color:transparent;}
.header-rlt.active > .cont-inner {
	padding:0;}
.header-rlt.active > .cont-inner > .flx{
	background-color:#fff;
	padding:0 15px;}
.header-rltmenu{
	display:none;}
.header-rltmenu li:first-child a{
	border-top:solid 1px #ddd;}
.header-rltmenu li a{
	margin-left:0;
	padding:5px 15px;
	border-bottom:solid 1px #999;
	background-color:rgba(0,0,0,0.7);
	color:#fff;}
.header-rltmenu li:hover a{
	background-color:#009CF0;
	color:#fff;}
.header-rltmenu li a img{
	width:30px;
	margin-right:10px;}
@media screen and (max-width: 771px){
.header-rlt .cont-inner .flx > .left{flex:1;}
.header-rlt .left .icon-chevron-down,
.header-rlt .left .icon-chevron-up{
    margin-left: auto;}
}/*https://staff.builmendx.com/~lee/design/bind/message.html*/
.num {
	border: solid 1px #fff;
    background-color: #FE272D;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    display: inline-block;
    color: #fff;
    font-size: 0.8rem;
    letter-spacing: -1px;
    text-align: center;
    line-height:20px;
    margin-left: -1px;}
@media screen and (max-width:771px){
header.subst .cont-inner > .flx > .left{width: auto;}
header.subst + .container > .dblock > aside.left {
    top: calc(48px)!important;}
}
header.subst .cont-inner > .flx > .left,
header.subst .cont-inner > .flx > .right{
    position: absolute;}
header.subst .cont-inner > .flx > .left{left: 15px;}
header.subst .cont-inner > .flx > .right{right: 15px;}
.num .i{
	font-size:0.8rem;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;}
.num.bv{
	background-color:#009CF0;}
.num.txtv{
	border:none;
	color:#000;
	width:auto;
	height:auto;
	line-height:1;
	margin-left:0;
	background-color:transparent;}
.topmenu-dropdown-wrap{position: relative;}
.topmenu-dropdown-wrap.slideoff [data-simplebar]{
	position: inherit;}
.topmenu-dropdown-wrap.slideon [data-simplebar],
.topmenu-dropdown-wrap [data-simplebar].slideon{
	position:relative;}
.topmenu-dropdown-wrap.-onlyft .topmenu{display: none;}
@media screen and (max-width: 771px){
.topmenu-dropdown-wrap.-onlyft .topmenu{display:block;}}
.topmenu-dropdown-wrap .topmenu{
	height: 42px;}
.topmenu-dropdown-wrap .topmenu [data-simplebar].escape{}
.topmenu-dropdown-wrap .topmenu .scrolla ul li{position:inherit;
cursor:default;}
.topmenu {
    z-index:1236;
    top: 48px;
    padding-left:15px;
    padding-right:15px;
    border-bottom: solid 1px #ddd;}
.topmenu.slidest{overflow: hidden;}
.topmenu.slidest:has(>.escape){overflow:visible;}
.topmenu.top0{
    top: 0px;}
.topmenu.plain{
    height:42px;}
.topmenu:not(.plain) a {
	font-size: 14px;
    color: #3C4B53;
    line-height: 1;
    display: block;
    height:41px;
    border-bottom: 4px solid rgba(0,0,0,0);
    padding: 4px 15px 0px 15px;}
.topmenu:not(.plain) li:hover a:not(.dropdown-menu a){
	background-color:var(--hoverclr) !important;}
.topmenu .current a{
	font-weight:bold;
	border-bottom:4px solid #009CF0;}
.topmenu .current .num{
	font-weight:normal;}
.topmenu:not(.plain) i{
    display: none;}
.topmenu.sub{
    padding-left:0px;
    padding-right:0px;
	background-color:#f7f7f7;}
.topmenu.sub a{
	border-bottom:none;
	padding:4px 15px;}
.topmenu.sub li:hover a{
	border-bottom:none;
	background-color:#e0e0e0;}
.topmenu.sub .current a,
.topmenu.sub .current:hover a{
	font-weight:bold;
	border-bottom:none;
	background-color:#C6F7F3;}
header + .topmenu-dropdown-wrap + .container,
header + .topmenu + .container{
    padding-top:calc(48px + 42px);}
header + .topmenu-dropdown-wrap.-onlyft + .container,
header + .container{
    padding-top:48px;}
.topmenu .scrolla .simplebar-track.vertical{
	display: none;}
.topmenu .scrolla ul{
	width:calc( (14px * 4) +  (14px * 4) +  (14px * 4) +  (14px * 5) +  (14px * 7) +  (14px * 4) +  (14px * 4) +  (14px * 4)  +  (14px * 4)  +  (14px * 4) + (30px * 10));}
.topmenu .scrolla ul.mbm{
	width:calc( (14px * 5) +  (14px * 2) +  (14px * 2) +  (14px * 2) +  (14px * 4) +  (14px * 3) +  (14px * 4) +  (14px * 4) + (30px * 8));}
.topmenu .scrolla ul.mbmbldg{
	width:calc( (14px * 4) +  (14px * 4) +  (14px * 7) +  (14px * 2) +  (14px * 6) +  (14px * 2) +  (14px * 4) +  (14px * 7) +  (14px * 4) +  (14px * 4) + (30px * 10));}
.topmenu .scrolla ul.msi{
	width:calc( (14px * 2) +  (14px * 4) +  (14px * 4) +  (14px * 7) +  (14px * 8) +  (14px * 3) +  (14px * 4) +  (14px * 6) + (30px * 8));}/*font length13 */
.topmenu .scrolla ul.mac{
	width:calc( (14px * 2) +  (14px * 2) +  (14px * 7) +  (14px * 2) +  (14px * 4) +  (14px * 4) +  (14px * 2) +  (14px * 4) +  (14px * 6) + (30px * 9));}/*font length13 */
.topmenu .scrolla ul.mts{
	width:calc( (14px * 4) +  (14px * 4) +  (14px * 7) +  (14px * 3) +  (14px * 4) +  (14px * 4) +  (14px * 2) +  (14px * 6) + (30px * 8));}/*font length13 */
.topmenu .scrolla ul.inv{
	width:calc( (14px * 2) +  (14px * 2) +  (14px * 4) +  (14px * 4) + (14px * 3) + (14px * 4) + (14px * 2) + (14px * 6) + (30px * 8));}/*font length13 */
.topmenu .scrolla ul.inv.wpath{
	width:calc( (14px * 5) +  (14px * 5) +  (14px * 3) + (14px * 4) + (14px * 2) + (14px * 10) + (30px * 6));}/*font length13 */
.topmenu .scrolla ul.inv-bm{
	width:calc( (14px * 4) +  (14px * 4) +  (14px * 4) +  (14px * 5) + (14px * 5) + (14px * 5) + (14px * 5) + (14px * 6) + (30px * 8));}/*font length13 *//* 14px * 6 temp menu estimate.html */
.topmenu .scrolla ul.inv-bm2{
	width:calc( (14px * 4) +  (14px * 4) +  (14px * 4) +  (14px * 5) + (14px * 5) + (14px * 5) + (14px * 5) + (14px * 4) + (14px * 6) + (30px * 9));}/*font length13 *//* 14px * 6  */
.topmenu .scrolla ul.inv-bm.wpath{
	width:calc( (14px * 4) +  (14px * 4) +  (14px * 4) +  (14px * 4) +  (14px * 4) + (14px * 5) + (14px * 10) + (30px * 7));}/*font length13 */
.topmenu .scrolla ul.docuflow{
	width:calc( (14px * 3) +  (14px * 4) +  (14px * 3) + (14px * 2) + (30px * 4));}/*font length13 */
.topmenu .scrolla ul.bind{
	width:calc( (14px * 5) +  (14px * 3) +  (14px * 2) +  (14px * 6) +  (14px * 6) + (30px * 5));}/*font length13 */
.topmenu .scrolla ul.serviceplatform{
	width:calc( (14px * 4) +  (14px * 4) +  (14px * 5) +  (14px * 4) + (14px * 8) + (14px * 4) + (14px * 7) + (30px * 7));}/*font length13 */
.topmenu .scrolla ul.wsp{
	width:calc( (14px * 5) +  (14px * 6) +  (14px * 5) + (14px * 9) + (14px * 4) +  (14px * 6) + (14px * 5) + (30px * 7));}/*font length13 */
.topmenu .scrolla ul.hotelmng{
	width:calc( (14px * 5) +  (14px * 4) +  (14px * 4) +  (14px * 7) +  (14px * 4) +  (14px * 5) + (30px * 6));}/*font length13 */
.topmenu .scrolla ul.haken{
	width:calc( (14px * 7) + (14px * 4) + (14px * 7) + (14px * 5) + (14px * 4) +  (14px * 2) + (30px * 6));}/*font length13 */
.topmenu .scrolla ul.kintai{
	width:calc( (14px * 4) + (14px * 5) + (14px * 4) + (14px * 2) + (14px * 5) + (14px * 2) + (30px * 6));}/*font length13 */

@media screen and (max-width:771px){
.topmenu-dropdown-wrap.ftst .topmenu .scrolla ul{width: 100% !important;}
}
.topmenu .topmenusubR{
	border-radius:0;}
.topmenu .topmenusubR a{
	padding:10px !important;
	height:auto;
	border-bottom:none;}
.topmenu .topmenusubR .current a{
	background-color:#FFCC33;}
.topmenu .topmenusubR a:hover{
	background-color:#ddd;}
.topmenu li:hover .topmenusubR a{
    border-bottom:none;}

.topmenu .scrolla ul li{
	position:relative;}
.topmenu .scrolla ul .num{
	position:absolute;
	right:-4px;
	top:4px;}
.topmenu .scrolla ul li a p.pr_parent .num{
	right:-16px;
	top:2px;}

.topmenu .scrolla .horizontal.simplebar-track .simplebar-scrollbar{
	top:auto;
    bottom: 0;
    height:5px;
    opacity:0.1;
	background-color:#666;}
.topmenu .scrolla .simplebar-track:hover .simplebar-scrollbar {
    opacity: 0.2;}
.on_mobile .topmenu .scrolla .simplebar-scrollbar{
	display:none;}
@media screen and (max-width:771px){
header.m-out + .container{
    padding-top:0px;}
}
.top-dropdown-p.crnt-act{background: #EEFAFD;}
.top-dropdown-p.current.crnt-act > a{
    border-bottom: solid 4px #009CF0 !important;}
.top-dropdown{
	display: none;
    position:absolute;
    border: solid 1px #d5d9e0 !important;
	border-bottom: none !important;
    width: auto !important;
    min-width:130px;}
.top-dropdown-p:last-child .top-dropdown{right:0;}
.top-dropdown.open{display: block;}
.top-dropdown li{position: relative !important;}
.top-dropdown a{
    height: auto !important;
    padding: 10px !important;
    border-bottom: solid 1px #d5d9e0 !important;
    background: #fff;}
.top-dropdown a:hover{
	background: #d5d9e0;}
.top-dropdown .current a{
	background: #009CF0;
	color: #fff;}
.topmenu .wpath > .path{
	color: #009CF0;
	display: flex;
	align-items: center;}
.topmenu .wpath > .path i{
	font-size:1rem;
	display: block !important;
    margin-right: 10px;}
.topmenu li > .dropdown-menu a{
	height: auto;
    padding: 10px 15px;
    border-bottom:solid 1px #ddd;}
.topmenu li:hover > .dropdown-menu a{
    border-bottom:solid 1px #ddd;}
.topmenu li > .dropdown-menu a:hover{
	background-color: #eee;}
.topmenu li > .dropdown-menu a.current{
	background-color:#009CF0;
	color: #fff;}
@media screen and (max-width:771px){
header .left .m-in > .flx{
	line-height:1;
	font-size:1rem;
	font-weight:bold;}
header .left .m-in > .flx span.flx{
	width:25px;
	height:25px;
	font-size:1.5rem;
	margin-right:8px;}
header .left .m-in > .flx span.flx i.icon-userG{
	font-weight:bold;
	font-size:1.7rem;}
header .left .m-in > .flx span.flx i.icon-triangle{
	font-weight:bold;}
header .left .m-in > .flx img{
	width:25px;}
header + .topmenu.m-out + .container{
    padding-top:56px;
	padding-bottom:0px;}
header.m-out + .topmenu.m-out + .container{
    padding-top:0px;
	padding-bottom:0px;}
.container > .cont-inner {
    padding:15px;}
.topmenu:not(.slidest){
	border-top:solid 1px #ddd;
	border-bottom:none;
	height:auto;
	padding-left:0;
	padding-right:0;
	top:auto;
	bottom:0;}
.ftst .topmenu .simplebar-track{display: none !important;}
.ftst .topmenu .simplebar-scroll-content{
	margin-bottom: 0 !important;
	padding-right: 0 !important;
	overflow: hidden !important;}
.ftst .topmenu .simplebar-content{
	padding-bottom:0 !important;
    margin-right:0 !important;
	overflow: hidden !important;}
.topmenu:not(.slidest) a{
	height:auto;
	position:relative;
	font-size:0.56rem;
	padding:9px 2px 9px 2px;
	border-bottom:none;}
.topmenu:not(.slidest) a .num{
	position:absolute;
	right:50%;
	margin-right:-28px;
	top:4px;
    width:15px;
    height:15px;
    line-height:20px;
    font-size:0.6rem;}
.topmenu:not(.slidest) li{
	flex:1;}
.topmenu:not(.slidest) span.flx{
	height:30px;
	width:30px;
	margin-bottom:5px;}
.topmenu:not(.slidest) i{
	display:block;
	font-size:1.3rem;}
.topmenu .bind .icon-group1{
    font-size: 2.2rem;}
.topmenu .bind .icon-cog{
    font-size:1.9rem;}
.topmenu:not(.slidest) i.icon-userG,
.topmenu:not(.slidest) i.icon-triangle{
	font-weight:bold;}
.topmenu:not(.slidest) i.icon-userG{
	font-size:2rem;}
.topmenu:not(.slidest) a.flx{
	-webkit-flex-direction: column;
     flex-direction:column;}
.topmenu:not(.slidest) > .flx > .flx.left,
.topmenu:not(.slidest) > .flx > .flx.right{
	width:100%;
	margin-left:0;
	margin-right:0;}
.topmenu:not(.slidest) > .flx > .flx.left .trg0{
	display:block;}
.topmenu:not(.slidest) > .flx > .flx.right{
	display:none !important;}
.topmenu:not(.slidest) .current a,
.topmenu:not(.slidest) .current:hover a {
	color:#fff;
    font-weight: bold;
	border-bottom:none;
	background-color:#009CF0;}
.topmenu:not(.slidest) li:hover a	{
	border-bottom:none;
	background-color:rgba(0,0,0,0.1);}
}

.flxclm-wrapper .topmenu{
	position:relative;
	top:0;}
@media screen and (max-width: 771px){
.web-v-m .main-topmenu{
    width: calc(100%);}
}
.main-topmenu > .flx{
    flex-wrap: wrap;}
.main-topmenu > .flx > .left.flx-o > .flx .inlb input{
	height:28px;}
.main-topmenu > .flx > .right.flx-o {
	padding-right:15px;}
.main-topmenu > .flx > .left.flx-o > .flx{
	height:47px;}
.main-topmenu > .flx > .left.flx-o > .flx .toparrlink{
	padding:0;
    position: absolute;
    left: 10px;}
.main-topmenu > .flx > .left.flx-o > .flx .toparrlink + .inlb{
    width: 100%;
    text-align: center;}
.main-topmenu.noright > .flx > .left.flx-o > .flx .toparrlink + .inlb{
    padding-right:0px;}
.main-topmenu.noleft > .flx > .left.flx-o > .flx .toparrlink + .inlb{
    padding-left:0px;}
.main-topmenu.fullst > .flx > .left.flx-o > .flx .toparrlink + .inlb{
    padding-right:0px;
	padding-left:0;}
.main-topmenu > .flx > .left.flx-o > .flx .toparrlink + .inlb .title-edit,
.main-topmenu > .flx > .left.flx-o > .flx .toparrlink + .inlb .title-editR{
    max-width:700px;
    margin: 0 auto;
	font-size:1.15rem;}
.main-topmenu > .flx > .left.flx-o > .flx .toparrlink + .inlb .title-edit.flx.sts{
    margin: 0;
    margin-left:50px;}
@media screen and (max-width: 680px){
.main-topmenu > .flx > .left.flx-o > .flx .toparrlink + .inlb .title-edit{
    max-width: 400px;}
}
@media screen and (max-width: 543px){
.popW .main-topmenu > .flx > .left.flx-o > .flx .toparrlink + .inlb .title-edit{
    max-width: 280px;
	margin:0;}
.popW .main-topmenu > .flx > .left.flx-o > .flx .toparrlink + .inlb{
	padding-left:10px;}
}
@media screen and (max-width: 1046px){
.main-topmenu > .flx > .left.flx-o > .flx .toparrlink + .inlb{
    padding-left: 100px;
    padding-right: 280px;}

}
@media screen and (max-width: 771px){
.main-topmenu > .flx > .left.flx-o > .flx .toparrlink + .inlb{
    padding-left:50px;
    padding-right:50px;}
.main-topmenu > .flx > .left.flx-o > .flx .toparrlink + .inlb.wrightadd{
    padding-right:200px;}
}
.main-topmenu .hd-r-menu{
	margin-right: 15px;}
.main-topmenu > .flx > .left.flx-o > .flx .chatpT,
.main-topmenu > .flx > .left.flx-o > .flx .dropbox.right{
	width: 27px;
	height: 27px;
	margin-left: 15px;
	position: relative;}
.main-topmenu > .flx > .left.flx-o > .flx .chatpT i,
.main-topmenu > .flx > .left.flx-o > .flx .dropbox.right i{
	font-size: 1.5rem;}
.main-topmenu > .flx > .left.flx-o > .flx .chatpT .num{
	position:absolute;
    bottom: -7px;
    right: -9px;}
.main-topmenu > .flx > .left.flx-o > .flx > .dropbox{
	right:0;
	position: relative;
	opacity:1;}
.main-topmenu > .flx > .left.flx-o > .flx > .dropboxR{
	top: 35px;
	z-index: 12345;}
.main-topmenu > .flx > .left.flx-o > .flx .select-wrap{
	height:29px;
	color:#000;}
.main-topmenu > .flx > .left.flx-o a,
.main-topmenu > .flx > .left.flx-o i{
	color:#000;}
.main-topmenu > .flx > .left.flx-o i:not(.icon-chevron-left){
	color:#009CF0;}

.main-topmenu i,
.main-topmenu a{
	color:#fff;}
.main-topmenu.white {
	color:#000;
	border-bottom: solid 1px #ccc;}
.main-topmenu.white a,
.main-topmenu.white i{
	color:#000;}
.top-g-menu a{
	margin-left:20px;}
@media screen and (min-width:772px) and (max-width:870px){
.top-g-menu a{
	margin-left:10px;
	margin-right:10px;}

}
@media screen and (max-width:516px){
.top-g-menu a{
	margin-left:10px;
	margin-right:10px;}
.main-topmenu .ctrl .bt{
	width:24px;
	height:24px;}
.main-topmenu .ctrl .bt > .flx{
	width:22px;
	height:22px;}
.main-topmenu .ctrl .bt i{
	font-size:1rem;}
.main-topmenu .ctrl input[type="text"]{
	width:30px;
	height:24px;}
}
@media screen and (max-width:375px){
.main-topmenu > .flx > .center.flx-o{
	padding-left:10px;}
.main-topmenu > .flx > .center.flx-o > .flx.center{
	-webkit-justify-content:start;
    justify-content:start;}
.main-topmenu > .flx > .right.flx-o .dropbox{
	width:40px;}
}
.ctrlbar{
	background-color: #000;}
.ctrlbar > .flx{height: 38px;}
.head {
    margin-bottom: 15px;}
.path + .head {
	margin-top: -10px;}
.paper{
	max-width:740px;
	margin:0 auto;}
.board{}
.board > .cont-inner{
	padding:25px 35px !important;}
@media screen and (max-width: 771px){
.board > .cont-inner{
	padding:17px !important;}
.board > .cont-inner.pd_a13{
	padding:13px 17px !important;}

}
.pagetitle{
	font-weight:normal;
	font-size:1.6rem;}
.pagetitle i{
	font-size:2rem;
	margin-right:10px;}
.dblock{
	overflow:hidden;
	position:relative;
    min-height: 100%;}/* content that is shorter than wrapper length */
.dblock:has(#scrlbar-st){
	overflow:visible;}
.dblock > .left{
	margin-right:15px;}
.dblock > .right{
	flex:1;}
.dblock > main{
	width:100%;}
.dblock > main.minhv{
	min-height: calc(100vh - 48px);}

/*https://staff.builmendx.com/~lee/design/invoice/order-estimate-wrt.html*/
.mainCslidewrap{overflow-x: hidden;}
.mainCslide{
	width: 100%;
	min-width: calc(100vw - 153px - 350px - 40px);
    transition: ease .2s;}
.mainCslide.goawR{
    transform: translate(0%,0%);}
.mainCslide.goawR.on{
    transform: translate(-200%,0%);}
.mainCslide.uinR{
    position: absolute;
	width: calc(100% - 153px - 350px - 20px);
    top:10px;
    left: 200%;}
.right-ocR .mainCslide.uinR{
	width: calc(100% - 153px - 20px);}
.mainCslide.uinR.on{
    left:163px;}

.dblock.cont > .left{
	width:24%;
	margin-right:2%;
	word-break:break-all;}
.dblock.cont > .right{
	flex:none;
	width:74%;}
.dblock > main,
.dblock > aside,
.cont-footer,
.mhead{
    -webkit-transition: ease .2s;
    transition: ease .2s;}
.dblock > aside{
	position:fixed;
	background-color:#fff;
	border-right: solid 1px #ddd;
	z-index:999;
	left:0;
	top:0;
    height: 100%;}
.fixC.cont-inner-head + .dblock > aside{
	position:relative;
	order:1;
	margin-right:0;}
.dblock > aside .maintitle{
	background-color:#000;
	color:#fff;
	padding:10px 10px 7px 10px;}
.flxclm.top .dblock{
	height:100%;}
.flxclm.top .dblock main .cont-inner{
	height:100%;}
header + .container .dblock > aside{
	top:calc(48px);}
header + .topmenu-dropdown-wrap + .container .dblock > aside,
header + .topmenu-dropdown-wrap + .container .flxclm.top0 + .flxclm.top .dblock > aside.right{
	top:calc(48px + 42px);}
header + .topmenu-dropdown-wrap.-onlyft + .container .dblock > aside{
	top:calc(48px);}
aside.right{
    left: auto;
    right: 0;
    width:350px;
	border-left:solid 1px #ddd;
	border-right:none;}
aside.right.wide{
    width:420px;}
aside.right > .cont-inner .btn.rbtm{
	position:absolute;
	bottom:0;}
aside.left{
	font-size:14px;
    left: 0;
    width:300px;
	border-right:solid 1px #ddd;
	border-left:none;}
.wide aside.left{
    width:360px;}
.cont-inner-head  + aside.left{}
.dblock.leftside > main{
	padding-left:300px;}
.dblock.leftside.wide > main{
	padding-left:360px;}
.dblock.rightside > main{
    padding-right:350px;}
.dblock.rightside.wide > main{
    padding-right:420px;}
aside.darkv{
	color:#fff;
	background-color:#23293b;
	border-right:none;}
aside.darkv .select-wrap,
aside.darkv .box{
	color:#000;}
aside.darkv .defmenu li > a,
aside.darkv .defmenu li > p,
aside.darkv .defmenu li .title{
	color:#fff;
	border-bottom:solid 1px #131724;}
aside.darkv.nrr2{
	border-left:solid 1px #131724;}
aside.darkv li:hover,
aside.darkv .defmenu li:hover > a,
aside.darkv .defmenu li.current > a{
	color:#000;}
aside.nrr{}

aside.nrr2{
    width:153px;}
.dblock.leftside.nrr-nrr2-right aside.left.nrr2{
	left:280px;}
.dblock.leftside.nrr-nrr2-right > main{
	padding-left:calc(280px + 153px);
    padding-right:350px;}
aside.nrr .list .list-i.box	{
    padding: 5px;}
aside.nrr .list .list-i.box .pic-box{
	padding:0;}
.dblock.leftside.right > main{
	padding-left:calc(0px);
    padding-right:350px;}
.dblock.leftside.wide-right > main{
	padding-left:calc(340px);
    padding-right:350px;}
.dblock.leftside.nrr-right > main{
	padding-left:calc(280px);
    padding-right:350px;}
.dblock.leftside.nrr2-right > main{
	padding-left:calc(153px);
    padding-right:350px;}
.dblock.leftside.nrr2 > main{
	padding-left:calc(153px);}
.dblock.leftside.nrr > main{}
.dblock.leftside.left-ocR aside.nrr2{
	left:-100% !important;}
.dblock.leftside.wide.left-oc2R aside.left{
	left:-300px !important;}
.dblock.leftside.left-ocR > main{
	padding-left:calc(280px) !important;}
.dblock.leftside.nrr2-right.left-ocR > main{
	padding-left:calc(0px) !important;}
.dblock.leftside.nrr1-nrr2-right.left-ocR > main{
	padding-left:calc(130px) !important;}
.dblock.leftside.left-oc2R > main{
	padding-left:calc(0px) !important;}
.dblock.right-ocR aside.right{
	right:-350px;}
.dblock.right-ocR > main{
	padding-right:0 !important;}
.dblock main.leftfull{
	padding-left:0 !important;}
.col3st .dblock > main{
	padding-left:230px;
    padding-right:350px;}
.col2st .dblock > main{
	padding-left:230px;
    padding-right:0px;}
aside.right .scrolla.escape .simplebar-track{
	bottom:70px;}
aside.right .scrolla.escape .simplebar-track.vertical{
	top: 50px;}
@media screen and (max-width:771px){
.web-v-m .dblock.leftside aside.right{
	right:-350px;}
.web-v-m .dblock.leftside > main{
	padding-right:0;}
.web-v-m .dblock.leftside.right-ocR aside.right{
	right:0px;}
.web-v-m .dblock.leftside.open-sideR aside.left.nrr{
	left:0px;}
.web-v-m .dblock.leftside .right-oc.switch .flx,
.web-v-m .dblock.leftside.right-ocR .right-oc.switch .flx{
	transform: scaleX(-1);}
.web-v-m .dblock.leftside.right-ocR .right-oc.switch .flx.trans-flip{
	transform:none;}

.dblock.leftside.nrr-nrr2-right aside.right{
	right:-350px;}
.dblock.leftside.nrr-nrr2-right.right-ocR aside.right{
	right:0px;}
.panelActive.panelActiveLeft .dblock.leftside.nrr-nrr2-right aside.right .switch{
	display:block;}
.panelActive.panelActiveLeft .dblock.leftside aside.left.nrr2{
	left:0% !important;}
.dblock.leftside aside.left.nrr2{
	left:-100% !important;}
.dblock.leftside aside.left.nrr2.pop{
	left:-153px !important;}
.left-oc-popR.dblock.leftside aside.left.nrr2.pop{
	left:0px !important;
	margin-left:0px;}
/*left.nrr2.pop https://staff.builmendx.com/~lee/design/kintai/staffmaster_detail.html */
.dblock.leftside.left-ocR aside.left.nrr2{
	left:0% !important;}
.dblock.leftside > aside.left.nrr2{
	z-index:331;}
.panelActive.panelActiveLeft .flxclm.btm.cont-footer{
	transform: translateX(0%);}

.panelActive.panelActiveLeft .main-topmenu > .flx > .center,
.panelActive.panelActiveLeft .main-topmenu > .flx > .right{
	display:block;}
}
.dblock.fxst > .block.right {
    flex: 1;
    width: 100%;}
.dblock.fxst > .block.left.pdf-side {
    margin-right: 0px;
    width: 145px;}


.dblock.split{}
.dblock.split aside.left{
	order:1;
	position:relative;
	top:0 !important;
	margin-right:0 !important;
	border-right:none;
	z-index:11;
    -webkit-transition: ease 0s;
    transition: ease 0s;}
.dblock.split main{
	position:relative;
	order:3;
	flex:1;
	padding-left:0;
    -webkit-transition: ease 0s;
    transition: ease 0s;}
.dblock.split .split_bar{
	order:2;
  background-color:#ddd;
  width:2px;
  height: 100vh;
  cursor: col-resize;}

.dbcon > .left{
	width:300px;
	margin-right:15px;}
.dbcon > .right{
	flex:1;}
@media screen and (max-width:980px){
.dbcon{
	-webkit-flex-direction: column;
     flex-direction:column;}
.dbcon > .left,
.dbcon > .right{
	width:100% !important;
	flex:none;}
.dbcon > .left{
	margin-bottom:15px;}
}
.open-side,
.close-side,
.toparrlink{
	height: 100%;
	padding: 0 15px;}
.mhead .open-side{
	margin-left:-15px;}
.open-side .f_r2,
.close-side .f_r2,
.toparrlink .f_r2{
	font-size:1.4rem !important;}
.backlink{height: 47px;}
.backlink .icon-chevron-left{
	margin-right:5px;
	font-size:1.3rem;}
.open-side.right{
	margin-left:0;
    margin-right: -25px;}
aside.right.pop .modal_close{
	display:none;}
@media screen and (max-width:771px){

.dblock.leftside > aside.left .scrolla {
    width:100%;}
.ld-temp-right header,
.ld-temp-right .topmenu,
.panelActive.panelActiveLeft header.m-slide,
.panelActive.panelActiveLeft .topmenu.m-slide{
	left:-100%;}
.panelActiveRight .right.open-side{
	display:none !important;}
.dblock > main {
    padding-left: 0px !important;
    padding-right: 0px !important;}
.dblock.leftside > aside{
    left: 0px;
    z-index: 333;
    border-right: none;}
.m-view-main header,
.m-view-main .topmenu{left:-100%;}
.m-view-main.m-view-mainLeft header,
.m-view-main.m-view-mainLeft .topmenu{left:0%;}
.m-view-main .dblock.leftside > .mhead{
    top:calc(0px);}
.m-view-main header + .topmenu-dropdown-wrap + .container,
.m-view-main header + .topmenu + .container{
    padding-top:calc(40px);}



.ld-temp-right .dblock.leftside > aside,
.panelActive.panelActiveLeft .dblock.leftside > aside,
.dblock.leftside.m-out-nrr > aside.left{
	left: -100%;}
.ld-temp-right .dblock > main,
.panelActive.panelActiveLeft .dblock > main{
	/*margin-left:0;*/
	transform: translateX(0%);
    padding-left: 0px !important;
    padding-right: 0px !important;}


.col3st .dblock aside.right,
.dblock.rightside > aside.right{
    right: -100%;
	border-left:none;}

.panelActive  .dblock > .main{
	-webkit-transform: translateX(0px);
    transform: translateX(0px);}
.panelActive.panelActiveRight .dblock.rightside > aside{
    right: 0px;
    z-index: 333;}
.panelActive.panelActiveRight .dblock.rightside > main{
	-webkit-transform: translateX(-400px);
    transform: translateX(-400px);}

.sideActive{
    position: relative;
	overflow:hidden;}
.sideActive:before {
	z-index: 1234;
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
	background-color:rgba(0,0,0,0.7);}
.sideActive .dblock > aside.left.drop{
	z-index:12345;
	width:300px !important;
	height:400px;
	overflow:auto;
	left:50%;
	margin-left:-150px;
	background-color:#fff;
	border-radius:9px;
	box-shadow:0 0 4px 2px rgba(0,0,0,0.2);}

.sideActive .dblock > aside.left.drop li.section > p,
.sideActive .dblock > aside.left.drop li ul li{
	display:block;}
.sideActive .dblock > aside.left.drop li:current:after{
	display:none;}
.sideActive .dblock > .side.drop .sub.current a:first-child{
	border-bottom:none;}
.sideActive .dblock > .side.drop .sub .c-chk{
	display:block;}
.sideActive .dblock > .side.drop .arr{
	display:none !important;}
.sideActive .dblock > aside.left.drop li a{
    padding:6px 10px 4px 20px;}
.sideActive .dblock > aside .tree li.current > p > a{
	background-color:#FFD91D;
	border-bottom:none !important;	}

.sideActive .dblock > aside.left.drop li ul li {
    display:block !important;}
.sideActive .dblock > aside.left.drop li.section > p{
	display:flex  !important;}


.sideActive .side-close{
    font-size: 2rem;
    display: block !important;
    z-index: 12345;
    color: #fff;
    top:15px;
	left:50%;
	margin-left:-150px;
    width: 300px;
    position: fixed;
    cursor: pointer;
    text-align: right;}
.sideActive .dropside.dblock > .main {
    padding-top:0px;}
.sideActive .dblock > .side.drop .scrolla{
    height: -webkit-calc(100% - 10px);
    height: calc(100% - 10px);}



	}
.switch{
	z-index: 123;
	cursor:pointer;
	position: absolute;
    left: -30px;
	top:78px;
    width:30px;
    height: 40px;
	background-color:rgba(158,162,173, 0.6);
    border-radius:5px 0 0 5px;
    border: solid 1px #ddd;}
aside.left .switch{
	left:auto;
    right: -30px;
    top:52px;
    border-radius: 0px 5px 5px 0px;
	background-color:rgba(255,255,255, 0.6);
	border-left:none;}
.switch .flx{
    width:100%;
    height: 40px;
    font-size:15px;
    color: #000;}
.switch.open-side{
    border-radius:0 5px 5px 0;
    left: calc(100%);
    top: 7px;}
aside .num:not(.def),
.side .sideRlink {
    position: absolute;
    top:52%;}
aside .num:not(.def){
    letter-spacing:-1px;
	padding: 0 2px;
    margin-top: -13px;
    width: auto;
    min-width: 24px;
    height: 24px;
    line-height: 24px;}

aside .num {
    bottom: 0;
    right:0px;}
aside .defmenu .num{
    right:14px;}
aside .nav-item .num{
    position: absolute;
	top:0;
	right:0;}
aside .num.txtv{
	font-size:0.8rem;
	font-weight:bold;
	top:50%;
	margin-top:-13px;}
aside .list-i .pic-box .box-in .title{
	font-size:0.91rem;
	margin-bottom:3px;
    padding-right:38px;}
aside .list-i .pic-box .box-in .title.right0,
aside .list-i .pic-box .box-in > .flx >.title{
    padding-right:0px;}
aside .list-i .pic-box .box-in .title.elli{
	line-height: 1.25;}
aside .list-i .pic-box .box-in > .txt {
    position: relative;
	margin-bottom:3px;
    padding-right:38px;}

aside.right .defmenu{
	margin-left:-11px;
	margin-right:-11px;}
aside.right div.tree{
    padding:8px 11px 15px 11px;}
aside .defmenu > li{
    border-bottom: solid 1px #ddd;}
aside .cont-inner .defmenu > li{
    margin: 0px -13px;}
aside .defmenu > li > a.btn{
	position: absolute;
    top: 10px;
    right: 10px;
	color:#fff;}
aside .defmenu > li > a.btn.sq.sml,
aside .defmenu > li > a.btn.rnd.sml{width:27px; height: 27px;}
aside .defmenu > li > a,
aside .defmenu > li > .tree > li > a,
aside .defmenu > li .title:not(.pic-box .title){
    padding:14px 16px 11px 16px;
    position: relative;
	color:#000;}
aside .defmenu > li .title .flx .btn.sys{
	position: absolute;
	right:12px;}
aside .defmenu li a.wicon{
    padding: 9px 16px 6px 12px !important;}
aside .defmenu li.sub > a{padding-left:24px;}
aside .defmenu a:not(.btn){
	color:#000;}
aside .defmenu li.back > a{
	background-color:#f7f7f7;
    padding:7px 16px 6px 16px;}
aside .defmenu li > .winp{
    padding:7px 16px 8px 16px;}
aside .defmenu li > .sub{
    padding:14px 16px 11px 32px;}
aside .defmenu li > .sub.winp{
    padding:7px 16px 8px 28px;}
aside .defmenu li .title:not(.pic-box .title){
	font-size: 14px;
	color:#7f8585;}
aside .defmenu:not(.plain) .atag{
	word-break:break-all;
	padding-right:60px;}
aside .defmenu .atag.pr0{
	padding-right:10px;}
aside .defmenu li .title.link{
	padding:0;
    border-bottom:none;}
aside .defmenu li > a > span.flx{
	width:30px;
	height:30px;
	margin-right:5px;}
aside .defmenu li > a i:not(.icon-folder):not(.icon-folder-open):not(.icon-window-restore):not(.icon-chevron-left){
	font-size:1.3rem;
	color:#009CF0;}
aside .defmenu li > a i.icon-pen{font-size:1.2rem !important;}
aside .defmenu li > a i.icon-hourglass-2,
aside .defmenu li > a i.icon-u-turn{font-size:1.1rem !important;}
aside .defmenu li > a i.icon-search{
	font-size:1.5rem !important;
	position:absolute;
	right:15px;
    top: 50%;
    transform: translateY(-50%);}
.mhead i.icon-u-turn.f_r16{
	font-size:1.2rem;}
aside .defmenu li .title.link:hover{
	background-color:inherit;}
aside .defmenu li .title:not(.pic-box .title){
	background-color:#A1A2AA;
    color: #fff;
    padding:8px 16px 7px 16px;}
aside.right .defmenu li .title:not(.pic-box .title){
    border-bottom: none;
    color: #000;
    padding: 10px 15px 8px 15px;
    background: transparent;
    font-size: 1rem;}
@media screen and (max-width:771px) {
aside .defmenu > li > a:not(.pic-box),
aside .defmenu > li > .tree > li > a,
aside .defmenu > li .title:not(.pic-box .title){
    font-size: 1rem;}
}
/*aside .defmenu > li.current > a:not(.btn):before {
      position: absolute;
      height:4px;
      width:100%;
	  left:0;
	  bottom:0;
	  background-color:#009CF0;
      display: block;
      content: '';}*/


/*https://staff.builmendx.com/~lee/design/invoice/order-prcsv.html */
.defmenu.flow-wrap{}
.defmenu.flow-wrap .item{
	z-index: 125;
	position: absolute;
    top:50%;
	left:20px;
    margin-top:-10px;}
.defmenu.flow-wrap > li:before{
	z-index: 123;
    position: absolute;
    height: 46px;
    width: 3px;
    left:28px;
    top: 30px;
    background-color: #009CF0;
    display: block;
    content: '';}
.defmenu.flow-wrap.orngst > li:before{
	background: #FF7E00;}
.defmenu.flow-wrap > li.flowoff:before,
.defmenu.flow-wrap > li.flowfin:before{
    display:none;}
.defmenu.flow-wrap li.sub > a {
    padding-left: 50px;}



aside .footer{
	position:fixed;
	width:339px;
	bottom:0;}
aside.nrr2  .footer{
    width: 153px;}
aside.right .footer{
    width: 350px;
	right:0;
	-webkit-transition: ease .3s;
    transition: ease .3s;}
.flxclm.top	 aside .footer.wfooter{
	bottom:53px}
.dblock.leftside.right-ocR aside.right .footer.wfooter{
	right: -350px;}
aside .winp input{
	height:31px;}

aside .footer > a{
	padding: 15px 15px 13px 15px;}
.dblock.rightside aside .footer{
	right:0;
	width:399px;}
.dblock.rightside aside .footer .messageSend{
	height:57px;}
.dblock.rightside aside .footer .messageSend .msg-area textarea {
    max-height: 50px;}
@media screen and (max-width:771px){
aside .footer{
	width:100%;
	bottom:59px;}

}
aside:not(.darkv) .footer{
	border-top:solid 1px #ccc;
	background-color: #eee;}
aside:not(.darkv) .footer:hover{
	background-color: #ddd;}
aside .footer a{
	font-weight: bold;
    color:#000;}

aside.right .clmst dl.table dt{
	font-size:0.9rem;}

.title{
	font-weight:bold;}
.list .title{
	font-size:1rem;
	margin-bottom:6px;}
.list.rowst .title.pd_r30{
	padding-right:0px !important;}
main > .scrolla .simplebar-track.horizontal{
	display: none;}/*submAdmin-d.html */
main.footer-in > .cont-inner{
	padding-bottom:100px;}
.cont-inner-head{
	padding:10px 25px;
	border-bottom:solid 1px #ddd;}
.list .pic-box .box-in .f_r08.elli2l{
	font-size:0.74rem;}

.m-in,
.mhead {
    display: none;}
.mhead {
	z-index:1234;
    font-size: .95rem;
    font-weight: bold;
	background-color: #ddd;
    border-bottom: solid 1px #ccc;}
.mhead.pcv{
	display: block;
	position: fixed;
	left: 360px;
	width: calc(100% - 360px) !important;}
.mhead.pcv .open-side{display: none !important;}
.mhead.white{
    border-bottom: solid 1px #ddd;}
.mhead .top{
	height: 39px;
	padding:0px 8px;}
.on_mobile .m-out{
    display: none !important;}
h1.pagetitle{
	font-weight: bold;
    font-size: 1.4rem;
    margin-bottom: 10px;}
h1.pagetitle + .info{
	margin-top: -5px;
    margin-bottom:15px;}
@media screen and (max-width:771px){
.m-out{
    display: none !important;}
h1.pagetitle{
    margin-top:-5px;}
.topmenu.m-slide + .container .mhead + main > .cont-inner{
	padding-top:calc(40px + 13px);}

.mhead,
.m-in{
    display: block;}
.left > .scrolla .simplebar-content > .m-in{
	padding:10px;}
.mhead{
	position:fixed;
	width:100%;}
}
@media screen and (max-width:420px){
main > .cont-inner{
	padding-bottom:76px;}
main > .cont-inner.pd_0{
	padding:0px;
	padding-bottom:76px !important;}
}
.defheight.scrolla{
	height:calc(100vh - 48px - 54px);}
main.pd_a10 .defheight{
	min-height:calc(100vh - 48px - 54px - 20px);}
.flxclm-wrapper{
	position:relative;
	height: 100%;
    overflow: hidden;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;}
.flxclm-wrapper.-showlist{
    overflow:visible;}/*dropdwon menu list inside ~wrapper */
/*https://staff.builmendx.com/~lee/invoice/client.html*/
.dblock .flxclm-wrapper.st02{
	max-height:calc(100vh - 48px - 42px);}
/*https://staff.builmendx.com/~lee/design/haken/hakensaki.html */
.flxclm-wrapper.-def{height:calc(100vh - 48px - 42px);}
.subst + .container .dblock .flxclm-wrapper.st02{
	max-height:calc(100vh - 48px);}
.flxclm-wrapper.box{
	height:100% !important;}
.container main .flxclm-wrapper .flxclm.top .cont-inner.pd_a0{
	height:100%;}
header + .container main .flxclm-wrapper{
	height: calc(100vh - 48px);}
.flxclm.top{
    flex: 1;
	/*flex:1 1 auto;*/
    overflow: auto;}
.flxclm.top.wif{overflow: hidden;}
.flxclm.top.ovv{overflow: visible;}
.scrolla {
    height: 100%;}
aside.left .scrolla{
    height: calc(100vh - 48px - 42px - 2px);}
.-onlyft + .container .dblock aside.left .scrolla,
header + .container .dblock aside.left .scrolla
/*.subst + .container .dblock aside.left .scrolla*/{
    height: calc(100vh - 48px - 2px);}
aside.left.wad .scrolla{
    height: calc(100vh - 89px - 110px);}
aside.left.wad.st02 .scrolla{
    height: calc(100vh - 89px - 260px);}
aside.left.wfter .scrolla{
    height: calc(100vh - 89px - 50px);}
aside.left.wtab .scrolla{
    height: calc(100vh - 89px - 44px);}
aside.left .pd_a10 + .scrolla{
    height: calc(100vh - 48px - 42px - 54px);}

aside .scrolla .simplebar-track.horizontal{visibility: hidden !important;}
/* only searchinput in pd_a10 */

aside .adA img{
	width:100%;}
.left.wad .adA{
	height: 110px;}
.left.wad.st02 .adA{
	height: 260px;}

.wrapper > .container:nth-child(1) > .dblock > aside.left .scrolla{
	height:100%;}	/* https://staff.neu.co.jp/~lee/bmdx/bldg-detail.html */


@media screen and (max-width:771px){
aside.left .scrolla{
    height: calc(100vh - 48px - 60px);}
aside.left.wad .scrolla{
    height: calc(100vh - 48px - 60px);}
aside.left.wfter .scrolla{
    height: calc(100vh - 48px - 60px - 50px);}
}

header + .topmenu-dropdown-wrap + .container .dblock aside.right .scrolla{height: calc(100% - 48px - 42px);}






.flxclm.top main .scrolla.fullst .simplebar-content{
	padding:0;}
.flxclm.top main .scrolla:not(.cellfix) .simplebar-content{
	padding:25px;}
@media screen and (max-width:884px){
.flxclm.top main .scrolla .simplebar-content{
	padding:15px;}
}
@media screen and (max-width:420px){
.flxclm.top main .scrolla .simplebar-content{
	padding:10px;}
}


.flxclm-wrapper.dblock.leftside.wide .flxclm.top .dblock > aside.left:not(.nrr):not(.nrr2){
	z-index: 1234;
	position:fixed;
	top:0;}
.flxclm-wrapper.dblock.leftside.wide{
	padding-left:340px;}
.flxclm-wrapper.dblock.leftside.wide .flxclm.top0 .main-topmenu > .flx > .left.flx-o{
	width:calc(100% - 340px);
	left:340px;}
.on_mobile .flxclm-wrapper.dblock.leftside.wide{
	padding-left:0px;}
.on_mobile .flxclm-wrapper.dblock.leftside.wide .flxclm.top0 .main-topmenu > .flx > .left.flx-o{
	width:calc(100% );
	left:0px;}
@media screen and (max-width: 771px){
.web-v-m .flxclm-wrapper.dblock.leftside.wide{
	padding-left:0px;}
.web-v-m .flxclm-wrapper.dblock.leftside.wide .flxclm.top0 .main-topmenu > .flx > .left.flx-o{
	width:calc(100% );
	left:0px;}
}


.footer-inR{/*invoice/docuMng.html */
    transition: ease .2s;
	position: fixed;
    z-index: 1234;
    width: calc(100% - 340px);
    bottom: 0;
    left: 340px;
	background: #fff;
    border-top: solid 1px #ccc;
    padding: 15px;}
.footer-inR.btm{
	bottom:-100%;}
.footer-inR.btm.up{
    bottom: 0;}
.footer-inR-in{
	display:block;
	height:50px;
	padding-bottom:65px;}
@media screen and (max-width: 771px){
.footer-inR{
	left:0;
    width: calc(100%);
    transform: translateX(200%);}
.footer-inR.btm.up{
    transform: translateX(0%);}
}
.defHbox{
	height:calc(100vh - 210px);}
.container-A4{
	width:100%;}
.container-A4 .page {
	margin:0 auto;
  display: block;
  /*width: calc(100 / 60 * 21vw);
  height: calc(100 / 60 * 29.7vw);*/
  border: 1px #D3D3D3 solid;
  border-radius:1px;
  background: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);}
.flxclm.top .scrolla .container-A4 .page.-strict{
	height: calc(100vh - 47px - 55px);
    width:700px;}
.flxclm.top0.ctrlbar + .flxclm.top .scrolla .container-A4 .page.-strict{
	height: calc(100vh - 47px - 55px - 38px);}
.container-A4 .page.-bdrst{
	background-color: transparent;
	border:solid 3px #fff;
	color:#fff;}


.container-A4 .page.prntdoc{
  border:none;
  border-radius:0px;
  box-shadow:none;}
.multilink > .file.linkbox{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
	right:0;
	margin:auto;
  width: calc(100 / 60 * 21vw);
  height: calc(100 / 60 * 29.7vw);
    z-index: 123;}
.container-A4.mainfixst .page{
  width:auto;
  height:auto;
    min-height: calc(100vh - 130px);}
@media screen and (max-width:771px){
.container-A4 .page {
  width: calc(100 / 25 * 21vw);
  height: calc(100 / 25 * 29.7vw);}
}
@page {
  size: A4;
  margin: 0;}
@media print {
.container-A4 .page {
    margin: 0;
    border: initial;
    border-radius: initial;
    width: initial;
    min-height: initial;
    box-shadow: initial;
    background: initial;
    page-break-after: always;  }
}
.document{
	position: relative;
	max-width:740px;
	padding:18px;
	color:#000;
	font-size:13px;}
.container-A4.landscape .document{
	max-width:1047px;}
.document .line{
	line-height: 1.1;
	border-bottom:solid 1px #000;}
.document .xlf{
	font-size:18px;}
.document .lf{
	font-size:13px;}
.document .sf{
	font-size:9px;}
.document .overview{
	width:59%;}
.document .overview .dl-set dl.table{min-height: 17px;}
.document .overview .dl-set dt{font-weight: normal;}
.document .overview .dl-set dd .editf input[type="text"]{margin-top: -2px;}
.document .logoA{
	margin-left:3%;
	width:38%;}
.document .editable{
	background-color:rgba(248,196,220,0.5);}
.document .editf input[type="text"],
.document .editf textarea{
	border:none;
	height: auto;
    background-color: transparent;}
.document .editf:hover input[type="text"],
.document .editf:hover textarea{
	background-color:#EDFBFF;}
.document .form,
.document .maininfo{
	width:70%;}
.document .form .mr_b5{
	margin-bottom:2px !important;}
.document  input[type="text"]{
	height:15px;
	padding:1px;}
.document table{
	font-size:9px;
	border-top:solid 1px #000;
	border-left:solid 1px #000;}
.document table th{
	background-color:#fff;}
.document table th,
.document table td{
	padding:2px;
	border-right:solid 1px #000;
	border-bottom:solid 1px #000;}
.document table.-wide th,
.document table.-wide td{
	padding:6px 8px;}
.document table.-wide .space td{height: 31px;}
.document table .space td{height:20px;}
.document table.doc-in{
	width: calc(60px * 2 + 10px);}
.document table.doc-in.in3{
	width: calc(60px * 3 + 10px);}
.document table.doc-in.in4{
	width: calc(60px * 4 + 10px);}
.document table.doc-in.in5{
	width: calc(60px * 5 + 10px);}
.document table.doc-in td{height:54px;}
.document table.doc-in th{
	font-size: 0.8rem;
	text-align: center;}
.document table .btn{
	border-radius:2px;
	padding:3px 4px;}
/*https://staff.builmendx.com/~lee/design/invoice/edit_estimate.html*/
/*https://staff.builmendx.com/~lee/design/bmdx/devdoc-mitsumori.html*/
.document .dochead{margin-bottom:30px;}
.document .dochead h1{
	font-size: 2rem;
    font-weight: normal;}
.document .dochead .doc-num{
	position: absolute;
    top:20px;
    right:20px;}
.document .stampA{position: relative;}
.document .stampA .r-stamp{
    position: absolute;
    opacity: 0.3;
    width: 80px;
    bottom: 0;
    left: 50%;}
.xsf{
    transform: scale(0.75);
    display: inline-block;
    width: 130%;
    margin-left: -15%;}
.bdrdd{border-right:double 2px #000 !important;}
.bdrdd-b{border-bottom:double 2px #000 !important;}
.flxclm.btm{
	z-index:999;}
.cont-footer{
	position:relative;
	width:100%;
	background-color:#fff;
    border-top: solid 1px #ddd;
	padding:10px;}
.cont-footer.fxst{
	z-index: 123;
	bottom:0;
	position:fixed;}
.cont-footer.fxst .-close{
	cursor: pointer;
	position: absolute;
	display: flex;
	justify-content:center;
	align-items: center;
	top: 0px;
    right:0px;
    width:30px;
    height:30px;}
.cont-footer.fxst:has(.cont-inner){
	padding:0px;}
.cont-footer.fxst .cont-inner{
	padding-top:10px;
	padding-bottom: 10px;}
.flxclm.btm.cont-footer{
	z-index:1002;}
.flxclm.btm.cont-footer.upmodal{
	z-index:88890;}
.cont-footer ul li.right{
	position:absolute;
	right:10px;}
@media screen and (max-width:1175px){
.cont-footer ul li.right{
	position:relative;
	right:0;}

}
@media screen and (max-width:771px){
.cont-footer:not(.box .cont-footer):not(.flxclm.btm.cont-footer){
	position:fixed;
	width:100%;
	bottom:0;}
.col3st .cont-footer{
	position:relative;
	transform: translateX(200%);}
.panelActive.panelActiveLeft .col3st .cont-footer{
    margin-left: 0;
    transform: translateX(0%);	}

.cont-footer ul li.left .open-side{
	height:32px;}
.cont-footer ul li.right .btn.icon-eye,
.cont-footer ul li.right .btn.icon-printer{
	width:32px;
	height:32px;
	text-align:center;
	padding:0 !important;}
.cont-footer ul li.right .btn.icon-eye:before,
.cont-footer ul li.right .btn.icon-printer:before{
	left:5px;
	font-size:1.3rem;}
.cont-footer .open-side,
.cont-footer .close-side {
    padding: 0 10px;
    margin-left: -10px;}
.cont-footer .open-side.right {
    margin-right: -10px;}
.panelActiveRight .cont-footer .open-side{
	display:none !important;}
.cont-footer .btnA .btn{
	margin-left:5px;
	margin-right:5px;}
.cont-footer .btn.w160{
	width:auto !important;}

}
@media screen and (max-width:380px){
.cont-footer .btn{
	font-size:0.75rem;}
}

@media screen and (max-width:771px){
.flxclm.top .dblock > main > .cont-inner.pd_a0 object{
	height:calc(100vh - 132px);}/*177-45 */
}

.hover{
	position:relative;
	cursor:pointer;}
.hover.-notclk{
	cursor:default;}
.hover:hover,
.hover.active-toggle:hover,
.hover.active{
	background-color:var(--hoverclr) !important;}
.hover.active-toggle{
	background-color:#fff !important;}

.hover.current{
	font-weight:bold;
	background-color:#c9edf5 !important;}
.selected{
	background-color:#4fdfff !important;}
.hover.active .hover-out,
.on_hover .hover-out{
    display: none;}
.on_mobile .hoverR,
.on_hover .hoverR,
.hoverR.active{
	display:block;}
.hoveroff,
.hoveroff:hover{
	cursor:default;
	background-color:transparent !important;}
.hoveroff.box,
.hoveroff.box:hover{
	cursor:default;
	background-color:#fff !important;}
.hoverI{
	color:#000;}
.hoverI:hover{
	color:#2D83D0;
	font-weight:bold;}

.hoverOpa.cred:hover{
	color:red;}
.dropbox{
	opacity:0.3;
	color:#000;
    cursor: pointer;
    position: absolute;
	right:10px;
    top:0px;
	bottom:0;
	display:none;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;}
.ARitem .dropbox{
	opacity:1;}
.list .list-i.box .dropbox,
.box .list .list-i .dropbox{
	top: 0px;
    right: 0px;
    bottom: auto;
    width:35px;
    height:35px;
    align-items: center;}
.dropbox.st02{
	top: 5px;
    bottom: auto;
	right: 5px;}
.box.hoveroff .box-top-title .dropbox{
	top:9px;
	bottom:auto;}
.list .list-i.box .dropbox + .dropbox{
	right:40px;}
.list .list-i.box .dropbox > .btn.rnd{
	margin-top:15px;
	width:30px;
	height:30px;}/*invoice/clientAddCng.html*/
.cont-inner-head .dropbox{
    right:25px;
	top:15px;
	bottom:auto;}
.cont-inner-head .dropboxR{z-index: 1238;}
aside.right .cont-inner > .dropbox{
    top: 10px;
    bottom: auto;
    z-index: 123;}
.sort-i	.dropbox{
	right:-5px;}
.dropbox:hover,
.dropbox.opav{
	opacity:1;}
.on_hover .dropbox,
.on_mobile .dropbox,
.dropbox.active{
	display:flex;}
.dropbox.viewst{
	display:flex;}
.dropbox.viewstB{
	display:block;}
.dropbox.viewstI{
	display:inline;}
.dropbox.viewstIB{
	display:inline-block;}
.dropbox.space{
	opacity:1;
	left:0;
	right:0;
	top:0;
	bottom:0;
    position: relative;}
.dropbox.btn{
	color:#fff;}
.on_mobile .hover-outS,
.hover-outR,
.hover-out:hover .hover-outB{
	display:none;}
.hover-out:hover .hover-outR{
	display:block;}
.hover:hover .Dhover,
.hover-in .hover-inR{display: none;}
.hover:hover .hover:hover .Dhover,
.hover-in:hover .hover-inR{display:block;}
.dropboxR{
	position:absolute;
	top:100%;
	right:0;
	display:none;
	font-size:0.8rem;
	background-color:#fff;
	border:solid 1px #ccc;
	border-radius:5px;
	box-shadow:1px 1px 0 1px rgba(0,0,0,0.1);
    z-index: 1000;
	max-height:220px;
	overflow:auto;}
.dropdownR{
	right:auto;
    left: 0;}
.dropdownR.show{display: block;}
.popper-modal.datalist{min-width: 200px;}
.dropboxR.-modal{
	display:block;}
.dropboxR.-list{
	right:0;
	top:35px;
	max-height:180px;
	border-radius:1px;}
.dropboxR.-list.datalist{
	width: 100%;
	left: 0;
    right:auto;}
.dropboxR.wlgst{
	top:44px;}
.dropboxR.lst{
	left:5px;right:auto;}
.-modal{
	top:auto;
	right:auto;
	left:auto;
	z-index:1234;
	position:fixed;
	opacity: 0;
	filter: alpha(opacity=0);
	transition: all 0.3s ease-in-out;
   transform: translate(0%, 0%) scale(0);}
.-modal.rightst{
	transform-origin:left top;}
.-modal.downst,
.-modal.upst{
	-ms-transform:none;/* IE 9 */
   -webkit-transform:none; /* Safari */
   transform:none;
   height: 0;
	overflow:hidden;}
.-modal.upst{
	height:130px;}
.-modal.upst.fh{
	height:auto;
	max-height:none;}
.-modal.upst.fh .tab-wrapper .scrolla{
	height:320px;}
.modal-on.downst.datalistR{}
.modal-on.downst.datalistR .box > .scrolla{
	max-height:130px; }
.active.downst.calcngR{
	height:120px;}
.topmenusubR{
	z-index:1001;}
.modal-on.topmenusubR{
	max-height:none;}
.modal-on.topmenusubR.m5{
	height:calc(33px * 5);}
.-modal.w309{
	width:309px;}
.-modal.w319{
	width:319px;}
.modal-on,
.-modal.show,
.-modal.active{
	opacity: 1;
	filter: alpha(opacity=100);
   transform: translate(0%, 0%) scale(1);}
.-modal.go1{
    transform: translate(0%, -50%) scale(0,0);
    opacity: 0 !important;
    transition: all .8s;
    z-index: 1235;}
.dropboxR.td-data-detail{
    min-height: 140px;
    padding: 5px;}
.linkbox.dropbox ~  .dropboxR{
	top: 100%;
    left: 0;
    max-height: none;
    width: 100%;
	min-width:300px;}
.dropboxR p.mr_b5{
	margin-bottom:0px !important;}
.dropboxR .disable,
.dropboxR .disable a{
	background-color:#ddd;
	color:#bbb;
	cursor:default;}
.dropboxR a:not(.btn):not(.txtbtn){
	padding:5px;
	cursor:pointer;}
.dropboxR a:hover{
	background-color:#FFCC33;}
.dropboxR .disable:hover,
.dropboxR .disable a:hover{
	background-color:#ddd;}
.on_hover .dropboxR.on_hover,
.on_mobile .dropboxR.on_hover,
.dropboxR.active{
	display:block;}
.dropboxR .txtbtn{
	padding-right:15px;
    padding-left: 35px;
	padding-top:5px;
	padding-bottom:5px;}
.dropboxR .txtbtn.txto{padding-left: 15px;}
.dropboxR .txtbtn:hover{background-color: #eee !important;}
.dropboxR .txtbtn.disa{
	background-color:#f7f7f7;
	color:#ccc !important;
	cursor:not-allowed;}
.dropboxR .txtbtn.disa.-o{
	background-color:#fff;}
.on_pop .dropboxR.-modal{
    z-index: 88890 !important;}

.dropboxR.-modal .tab-wrapper .nav-link:hover{
	background-color:transparent;}
.dropboxR.-modal.gone{
    display:none;}
.dropboxR.-modal.gone.modal-on{
    display:block;}
.datalistR{
	left:auto;
	top:auto;
    opacity:0;
	height: 0;}
.datalistR.modal-on,
.datalistR.active{
    opacity:1;
    height: auto;}
.datalistR.modal-on.short,
.datalistR.active.short{
	height:100px;}
.dropboxR.arrbox{
	overflow: visible;}
.dropboxR .dropboxR-in{
	position: relative;}
.dropboxR-in:after,
.dropboxR-in:before {
    top: 5px;
    left: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;}
.dropboxR-in:after {
	border-top-color: #FFF;
    border-top: 8px solid transparent;
    border-left: 16px solid #fff;
    border-bottom: 8px solid transparent;
    top: 7px;}
.dropboxR-in:before {
	border-top-color: #ccc;
    border-top: 10px solid transparent;
    border-left: 20px solid #ccc;
    border-bottom: 10px solid transparent;}
.rightbtn{
    width:40px;
    height:40px;
    position: absolute;
    top:0px;
    right:5px;
	display:flex;
	-webkit-justify-content: center;
	justify-content:center;
	-webkit-align-items: center;
	align-items: center;}
.rightbtn i{
	font-size:1.4rem;}
.multilink{
	position:relative;}
.multilink > .linkbox,
.multilink > .linkbox.dropbox,
.scrolla .linkbox{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	z-index:123;}
.multilink .toggle,
.multilink .leftspc,
.multilink .btnA,
.multilink .dropbox,
.multilink .scrolla .simplebar-track,
.multilink .linkO{
	z-index:124;
	cursor:pointer;}
.multilink .checkradio,
.multilink .toggle-btn,
.multilink .btn,
.multilink .link{
	z-index:125;
	position:relative;}
.multilink .dropboxR{
	z-index:126;}
.linkbox > .arrlink{
	position: absolute;
    right:3px;
    top: 50%;
    margin-top: -15px;
    font-size:1.4rem;
    color:#aaa;}
/*<a class="linkbox"><span class="arrlink w30 h30 flx center-h"><i class="icon-chevron-right"></i></span></a> */

/*higher z-index than parent or p sibling */
.z0{
	z-index:calc(127 + 0);}
.z1{
	z-index:calc(127 + 1);}
.z2{
	z-index:calc(127 + 2);}
.z3{
	z-index:calc(127 + 3);}
.z4{
	z-index:calc(127 + 4);}
.z5{
	z-index:calc(127 + 5);}

.list-i .leftspc{order: 1;}
.list-i .rightspc{order: 3;}
.list-i .pic-box{flex:1; order: 2;}
.list-i .list-item{order: 4;}
.list-i .leftspc.nrr{min-width: 33px;}
.list-i .leftspc.nrr.dot{min-width:13px;}
.list-i .pic-box.w75st ~ .leftspc,
.list-i .pic-box.w75st ~ .rightspc{height:75px;}
.list-i .pic-box.w50st ~ .leftspc,
.list-i .pic-box.w50st ~ .rightspc{height:50px;}
.leftspc.space,
.rightspc.space{height:auto !important;}
.list-i .rightspc{
	order:2;
    height:100%;
	padding: 0 11px 0 11px;
    margin-right: -16px;}
.list-i.box .rightspc{
	padding: 0 12px 0 12px;
    margin-right: -12px;}

.leftspc.wpic i{margin-top: 31px}
.leftspc .tggbtn{margin-top: 2px;}/*https://staff.builmendx.com/~lee/design/docuflow/formalities.html*/
.wleftspc{
	padding-left:-10px;}
.box{
	overflow: visible;
	word-break:break-all;
	box-shadow:0 0px 1px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.15);
    background: #fff;
    border-radius:6px;
    box-sizing: border-box;
    position: relative;
    vertical-align: top;
    white-space: normal;}
.box.ani-btn{
	border:none;}
.box.ani-btn.-bluest{
	border:solid 2px #09F;
	box-shadow:none;}
.brrblr{
    border-radius:0 0 6px 6px;}
.brrtlr{
    border-radius:6px 6px 0 0 ;}
.box > .brrbtm{
    border-radius:0 0 6px 6px;}
.box-wrap{
	padding-top:1px;}/*for display top-shodow-line */
.box.dft{box-shadow:
		rgb(9 9 9 / 27%) 0px 0px 0px 1px;}
.pd_shadow{padding:1px 4px 8px 4px;}
.box.pd_a20,
.box .box-top-title ~ .pd_a20,
.box .box-bynd-title + .pd_a20,
li.col-50 > .pd_a20,
.pd_a16{
	padding:16px !important;}
.box hr{background-color: #dedede;}
.box.pd_a20 hr.widest{
	margin-left: -16px;
	width: calc(100% + 32px);}
.box.pd_a20 hr.divi{
	margin-top: 16px;
	margin-bottom: 16px;}
.box .box-top-title ~ .pd_a20{
	padding:10px 16px 16px 16px !important;}
.box .box-top-title[class^="bg-"] ~ .pd_a20,
.box .box-top-title[class*=" bg-"] ~ .pd_a20{
	padding:14px 16px 16px 16px !important;}
.pd_a20b{
	padding:16px !important;
	padding-bottom: 0 !important;}
.pd_a20t{
	padding:16px !important;
	padding-top: 0 !important;}
.mr_11{margin: 16px !important;}
.mr_11t0{margin: 0 16px 16px 16px !important;}
.mr_11b0{margin: 16px 16px 0px 16px !important;}

.pd_a0{
	padding:0px !important;}
.mr_20{
	margin:20px !important;}
.pd_b0{
	padding-bottom: 0 !important;}
.pd_t0{
	padding-top: 0 !important;}
.brr{
    border-radius:6px;}
.brr0{
    border-radius:0px !important;}
.shadow0{
	box-shadow:none !important;}
.box.def{
	box-shadow:none;
	border:solid 1px #89B7CA;}
.box.clr-red{
	border:solid 1px #FF6699;}
.box.clr-ylw{
	border:solid 1px #D8BE5E;}
.box.clr-orng{
	border:solid 1px #FF9F20;}
.box.clr-grn{
	border:solid 1px #54C822;}
.box-top-title{
	line-height: 1;
	font-size: 1.2rem;
    border-radius:5px 5px 0 0;
	padding:16px 16px 8px 16px;}
.box-top-title.-pmst{min-height: 50px;}
.box-top-title .tag.tagst.midst{margin-top: -6px;}
.box .box-top-title[class^="bg-"],
.box .box-top-title[class*=" bg-"]{
	padding:8px 16px 6px 16px;}
.box-top-title-sub{
    padding:10px 0;
	margin-bottom:20px;
	text-align: center;}
.box-top-title + .box-top-title-sub{margin-top: -10px;}
.box-top-title-sub{
	position: relative;
	border-bottom:solid 1px #009CF0;}
.box-top-title-sub span{
	position: absolute;
	left: 50%;
	top:50%;
	transform: translate(-50% , 0%);
	min-width: 70px;
	margin: 0 auto;
	text-align: center;
	display: inline-block;
	background-color: #fff;
	color:#009CF0;
	border:solid 1px #009CF0;
	border-radius:50px;
	padding:2px 5px 1px 5px;
	font-size: 0.8rem;}
.list-i .box-top-title{
    margin: 0 -13px;
    margin-top: -13px;
    margin-bottom: 10px;}
.box-top-title.bg-white.hoveroff{
	background-color:#fff !important;}
.box-top-title.pd_a5{
	padding:3px 3px 0px 3px !important;}
.box-top-title.st02{
	background-color:#d1ECEC;}
.box-top-title.bg-blue,
.box-top-title.bg-blue .dropbox{
	color:#fff;}
.box-top-title.stepst.bg-white{
	border:solid 2px #009CF0;}
.box-top-title.stepst.bg-blue{
	background-color:#009CF0 !important;}
.box-top-title.stepst.bg-gray{
	background-color:#ccc !important;}
.box-top-title .btn:not(.sys){
	font-weight: normal;
	font-size:.85rem;
	height:30px;
	margin-top:-7px;}
.box-top-title > .flx.center-h > .btn{
	margin-top:0px;}
.box-top-title .select-wrap{
    height: 28px;
    font-size: .8rem;}
.mr_b30 + .box-bynd.box{
	margin-top:65px;}
.colset.mr_b30 + .box-bynd{
	margin-top:50px;}

.pic-box,
.pic-box > a,
.pic-box > .atag{
	width:100%;
	position:relative;
	display:flex;}
.pic{
	color:#fff;
	text-align:center;
	position:relative;}
.pic .frame{
	border:solid 1px #888;}
.pic{
	width:70px;}
.pic .img {
	position:relative;
    height:70px;
    width:100%;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;}
.pic .img i{
	font-size:2.65rem;}
.pic .img.txt{
	font-size:1.8rem;
	line-height:1;
	padding-right:0;
	min-height:inherit;
	flex-wrap: wrap;}
.pic .img.txt.ch2{
	font-size:1.1rem;}
.pic .img.txt.chm{
	font-size:0.75rem;
	line-height:1.1;}
.pic .img.txt .main{
    width: 100%;
	font-size:1rem;
	letter-spacing:-2px;}
.pic .img.txt .sub{
	font-size:.7rem;
	letter-spacing:-2px;}
.w30st .pic .img.txt{
	font-size:1rem;}
.w75st .pic .img.txt{
	font-size:2.4rem;}
.w100st .pic .img.txt{
	font-size:3rem;}
.w100st .pic .img.txt .main{
	font-size:2rem;}
.w100st .pic .img.txt .sub{
	font-size:1.4rem;}


.img {
    overflow: hidden;
    position: relative;}
.img img {
    width: auto;
    position: absolute;
    max-height: 100%;
    max-width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;}
.img img.hmax{
	max-width:none;}
.img img.max{
	max-height:none;}
.imgsub{
	position:absolute;
	top:1px;
	right:1px;
	font-weight:bold;
	color:#000;}
.imgsub.rb{
	right:0;}
.w50st .imgsub.rb{
	top:30px;}
.w63st .imgsub.rb{
	top:40px;}
.w75st .imgsub.rb{
	top:50px;}
.imgsub img{
	height:22px;
	position:relative;}
.right-x{
	width:20px;
	height:20px;
	background-color:rgba(255,255,255,0.4);
	display:block;
	position:absolute;
	right:0;
	top:0;
	text-align:center;
	cursor:pointer;}
.right-x i{
	font-size:1.1rem;
	line-height:20px;}
.divide .img{
	flex-wrap: wrap;}
.divide .img img{
    position:relative;}
.divide .img [class^="d0"],
.divide .img [class*=" d0"]{
	overflow:hidden;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
	width:50%;
	height:50%;
	position:absolute;}
.divide .d01{
	top:0;
	left:0;}
.divide .d02{
	top:0;
	right:0;}
.divide .d03{
	right:0;
	top:0;}
.divide .d04{
	right:0;
	bottom:0;}
.divide.divi3 .d01{
	height:100%;}
.divide.divi2 .img [class^="d0"],
.divide.divi2 .img [class*=" d0"]{
	height:100%;}
.divide .img img,
.rnd .img img {
	width:auto;
	height:100%;
	max-width:none;
	max-height:none;}
.divide .img img.max,
.rnd .img img.max{
	width:100%;
	height:auto;}

.pic .sts {
    color: #fff;
    font-size: 0.7rem;
    font-weight: bold;
    position: absolute;
	top:30px;
    right: 0px;
    left: 0;
    height: 20px;
	line-height: 20px;
    width: 100%;
    text-align: center;
    display: flex !important;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;}
.w63st .pic .sts {
	top:43px;}
.pic .sts.center{
	top:0;
	left: 0;
    width: 100%;
	height: 100%;}
.pic .sts.st01{
	width:20px;
	height:20px;
	background-color:rgba(255,255,255,0.6);
	top:0;
	left:0;
	right:auto;}
.pic .sts.st01 i{
	font-size:1.3rem;}
.pic .sts.st01 i.icon-u-turn{
	font-size:1.15rem;}
.pic .sts.diagonal{
	background-color:rgba(255,255,255,0.3);
	width:75px;
	height:75px;
	top:0 !important;
	left:0;}
.w50st .pic .sts.diagonal{
	width:50px;
	height:50px;}
.pic .sts.diagonal + .sts.diagonal{
	background-color:transparent;
	transform: scaleX(-1);}
.diagonal-d{
  background: linear-gradient(to bottom right, transparent calc(50% - 1px), #cccccc , transparent calc(50% + 1px) )}
/* td class="diagonal-d" */
.pic .img + .center{
	position:absolute;
	top:55%;
	left:50%;
	transform: translate(-50%,-55%);
	z-index:12;}
.pic .img + .center.playst{
	display:flex;
	-webkit-justify-content: center;
	justify-content:center;
	-webkit-align-items: center;
	align-items: center;
	border-radius:50%;
	width:60px;
	height:60px;
	background-color:rgba(255,255,255,0.5);}
.pic .img + .center.playst i{
	font-size:2rem;
	color:#F00;}

.tag {
	border-radius:3px;
    height:22px;
    text-align: center;
    border-radius:24px;
    padding:1px 4px 1px 4px;
    color: #fff;
    line-height:22px;
    font-size: 0.7rem;
	display:inline-block;}
.tag.lgst{
    padding:7px 10px 6px 10px;
	height:auto;
	line-height:inherit;
	font-size:inherit;}
.tag.midst{
    padding:5px 10px 4px 10px;
	height:auto;
	line-height:inherit;
	font-size:inherit;}
.tag.mini{
	font-size: 0.65rem;
	min-width:0  !important;
	height:auto !important;
	min-height:0 !important;
    padding: 2px !important;
    line-height: 1 !important;}
.tagst{
	border-radius:3px;
    padding:1px 4px 1px 4px;
    line-height:20px;
    min-height:22px;
    font-size: 0.75rem;}
.tagst.hrnd{
	border-radius:30px;}
.tagst.bg-linest{
    padding:0px 3px 0px 3px;}
.tagst.linest{
	border-width: 1px;
	color:#009CF0;
	line-height:18px;}
.tagst.linest.l-orange{
	border-color:#ff8700;
	color:#ff8700;}
.tagst.linest.l-water{
	border-color:#8fe1ff;
	color:#8fe1ff;}
.tagst.linest.l-black{
	border-color:#000;
	color:#000;}
.tagst.linest.l-gray{
	border-color:#666;
	color:#666;}
.tagst.linest.l-grn{
	border-color:#02C800;
	color:#02C800;}
.tagst.linest .icon-x:hover{color:#aaa;}
.tagst:not(.multi) *{
	line-height:22px !important;}
.tagst .pic-box .box-in{
    padding-left:5px;}
.tagst .pic{
	width:19px;
	margin-top:1px;}
.tagst .pic .brr{border-radius:2px;}
.tagst .pic .img{
	height:19px;}
.tagst .pic .img.txt{line-height: 19px !important;}
.tagst .pic .img i{
	font-size:0.7rem;}
.tagst .pic .img.txt{
	font-size:.7rem;
	padding-top:0 !important;}
.tagst .elli2l{
	line-height:1 !important;}
.w20st > .pic{
	width:20px;}
.w20st > .pic  .img{
	height:20px;
	min-width:20px;}
.w20st > .pic .img i{
	font-size:.8rem;}
.w20st > .pic .img.txt{
	font-size:.7rem;}
.w20st.pic-box .box-in {
    padding-left:7px;}

.w30st > .pic{
	width:30px;}
.w30st > .pic  .img{
	height:30px;
	min-width:30px;}
.w30st > .pic .img i{
	font-size:1rem;}
.w30st > .pic .img i.icon-group1{
	font-size:1.6rem;}
.w30st > .pic .img.txt{
	font-size:.9rem;}
.w30st.pic-box .box-in {
    padding-left:9px;}
.w50st > .pic{
	width:50px;}
.w50st > .pic .img{
	height:50px;
	min-width:50px;}
.w50st > .pic .img i{
	font-size:1.7rem;}
.w50st > .pic .img.onlyi i{
	font-size:2.2rem;}
.w50st > .pic .img.txt{
	font-size:1.1rem;}
.w63st > .pic{
	width:63px;}
.w63st > .pic .img{
	height:63px;
	min-width:63px;}
.w63st > .pic .img i{
	font-size:1.85rem;}
.w63st > .pic .img.onlyi i{
	font-size:2.4rem;}
.w75st > .pic{
	width:75px;}
.w75st > .pic .img{
	height:75px;}
.w75st > .pic .sts{
	top:55px;}
.w75st > .pic .frame + .sts{
	top:57px;}
.rowst .w75st > .pic .frame + .sts{
	top:112px;}
.w100st > .pic{
	width:100px;}
.w100st > .pic .img{
	height:100px;}
.w100st > .pic .img i{
	font-size:3.5rem;}
.w120st > .pic {
	width:120px;}
.w120st > .pic .img{
	height:120px;}
.w120st > .pic .img i{
	font-size:4.6rem;}
.w150st > .pic {
	width:150px;}
.w150st > .pic .img{
	height:150px;}
.w150st > .pic .img i{
	font-size:5rem;}
.w150st > .pic .img.txt{
	font-size:3.3rem;}
.w180st > .pic {
	width:180px;}
.w180st > .pic .img{
	height:180px;}
.w180st > .pic .img i{
	font-size:5.5rem;}
.w200st > .pic{
	width:200px;}
.w200st > .pic .img{
	height:200px;
	min-width:200px;}
.w200st > .pic .img i{
	font-size:6rem;}
.w240st > .pic{
	width:240px;}
.w240st .pic .img{
	height:240px;}
.w240st > .pic .img i{
	font-size:6rem;}
.w300st > .pic{
	width:300px;}
.w300st > .pic .img{
	height:300px;}
@media screen and (max-width:580px){
.w150st > .pic {
	width:75px;}
.w150st > .pic .img{
	height:75px;}
.w150st > .pic .img.txt{
    font-size:1.8rem;}

.w300st > .pic{
	width:150px;}
.w300st > .pic .img{
	height:150px;}
.w300st + .w300{
	width:150px  !important;}
.ani-btn.w300.h300{
	width:150px !important;
	height:150px !important;}
.ani-btn.w300.h300 img.w120{
	width:60px !important;}
.ani-btn.w300.h300 p.mr_b20{
	margin-bottom:10px !important;}
.ani-btn.w300.h300 .h40.f_r1{
	font-size:0.9rem;
	line-height:1.1;}
}

.ani-btn.pic-box .pic .frame {
    border:none;}
.ani-btn.pic-box .pic [class^="bg-"],
.ani-btn.pic-box .pic [class*=" bg-"] {
    border-radius:4px;}
.ani-btn.pic-box:hover .pic [class^="bg-"],
.ani-btn.pic-box:hover .pic [class*=" bg-"] {
	background: #FFD91D !important;
	transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;}
.ani-btn.pic-box:hover .pic img{opacity: 0.88;}
.maxst .pic{
	width:100%;}
.maxst .pic .img{
	width : 100% ;
	padding-top : 100%;}
.pic .rnd {
    border-radius:100%;
    overflow: hidden;}
.pic .brr:not(.btn){
    border-radius:9px;
    overflow: hidden;}
.w20st .pic .brr,
.w30st .pic .brr{
    border-radius:3px;}
.pic .edit-img.on{
	position:relative;}
.pic .edit-img.on .file_up{
	opacity:1;
	position:absolute;
	top:75%;
	left:50%;
	transform: translate(-50%,-75%);
	z-index:1;}
.pic .img .btn.rnd{
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);}
.pic .img .btn.rnd i{
	font-size:1rem;}
.pic-box .box-in {
	line-height:1.25;
    flex: 1;
    padding-left: 13px;
	word-break:break-all;}
.pic-box.mirror .box-in{
    padding-right: 13px;
    padding-left:0px;}
.pic-box .box-in.wslider{
	overflow:hidden;}
.pic-box.clm{
	-webkit-flex-direction: column;
    flex-direction: column;}
.pic-box.clm > .left,
.pic-box.clm > .right {
    margin-left: 0;
    margin-right: 0;}
.pic-box.clm .pic{
	margin:0 auto;}
.pic-box.clm .box-in {
    flex: none;
    padding-left: 0;
    margin-top:20px;
    width: 100%;}
.pic-box.current .pic > .flx{
    border: solid 3px #1A7BD5;}
.w50st.pic-box.current .pic > .flx{
	height:50px;}
.pic-box .box-in .right.msgbtn .btn.rnd{
	width:44px;
	height:44px;
	margin-left:5px;}
.pic-box .box-in .right.msgbtn .btn.rnd:before{
	font-size:1.6em !important;}

.pic-box .progress{
	position: absolute;
    width: 90%;
    left: 50%;
    transform: translate(-50%, 0%);
    bottom: 0px;
	background-color: rgba(255,255,255,0.8);
    border: solid 1px #ccc;
	height:14px;}
.pic-box .progress-bar{
	height:13px;}
.pic-box .done{
    position: absolute;
    left: -5px;
    top: -5px;}
.pic-box .done i{
	margin-right:4px;}
.pic-box .msg{
    position: absolute;
    background-color: rgba(0,0,0,0.6);
    color: #fff;
    padding: 3px;
    bottom:0;}
/* single class */
.date-line {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    text-align: center;
    border-bottom: 1px solid #bbb;
    line-height: 0.1em;
    margin:20px 0;
    text-transform: uppercase;}
.date-line span{
    color: #999;
    padding: 0 10px;
    font-size: 13px;
	background-color: #ededed;}
.box .date-line span {
    background: #fff;}
.message{
	margin-bottom:15px;}
.message .pic-box.w50st + .flx{
	margin-left:60px;}
.chat-wr .info + .searchA{
	display:none;}
.chat-board{}
.dblock main .chat-board{
    height: calc(100vh - 48px - 42px);}
.dblock .mhead.pcv + main .chat-board{
	padding-top:40px;}
@media screen and (max-width: 771px){
.m-view-main .dblock main .chat-board{
    height: calc(100vh - 40px) !important;}
.m-view-main .mhead.pcv {
    left: 0px;
    width: calc(100%) !important;}
.m-view-main .mhead.pcv .open-side {
    display:flex !important;}
.dblock .mhead.pcv + main .chat-board{
	margin-top: 0 !important;
	padding-top:0px;}
}
.chat-member-icons{
    font-size: 0.7rem;
    font-weight: normal;}
.chat-member-icons .memb:first-child{z-index: 10;}
.chat-member-icons .memb:not(:first-child){margin-left: -2px;}
.chat-member-icons .memb:nth-child(2){z-index: 9;}
.chat-member-icons .memb:nth-child(3){z-index: 8;}
.chat-member-icons .memb:nth-child(4){z-index: 7;}
.chat-member-icons .memb:nth-child(5){z-index: 6;}
.chat-member-icons .memb:nth-child(6){z-index: 5;}
.chat-member-icons .memb:nth-child(7){z-index: 4;}
.chat-member-icons .memb:nth-child(8){z-index: 3;}
.chat-member-icons .memb:nth-child(9){z-index: 2;}
.chat-member-icons .memb:nth-child(10){z-index: 1;}
.chat-top{
	flex:1;
	overflow:auto;
	background-color:#ededed;}
.chat-top .chat-wr{
	padding-top:5px;
	padding-left:5px;
	padding-right:5px;}
aside.right .chat-top .chat-wr{
	padding:0px;}
.chat-board.box .chat-top .head{
	display:block;}
.chat-board .chat-top .head .searchA{
	display:none;}
.chat-top .scrolla{
    height:100%;}
.chat-board.box .chat-top .scrolla{
    height: calc(100% - 50px);}
.date-line:first-child{
	margin-top:7px;}


.flxclm.btm.chat-btm{
	padding-top:0;}
.messageSend{
	display: flex;
    align-items:end;
	width:100%;
	position:relative;
	background-color:#fff;
	border-top:solid 1px #ccc;
	padding:9px 0 18px 0;}
aside.right .footer .messageSend{border-top:none;}
aside.right .footer .messageSend .msg-area textarea{
	max-height:27px;}
.messageSend .scrolla{
    max-height: calc(100vh - 500px);}
.messageSend .msg-area{
	border:solid 1px #ccc;
	background-color:#fff;
	border-radius:9px;
	padding:0px;
    order: 2;
    flex: 1;}
.messageSend .msg-area textarea{
	background:none;
	border:none;
	width:100%;
	height: 32px;
	resize: none;
    padding-top:5px;
    padding-left:5px;}
.messageSend .edit-i{
	width:44px;
	height:35px;
	line-height:35px;
	opacity:0.5;
	color:inherit;
	font-size:1.3rem;
	padding:0 10px;}
.messageSend .left.edit-i{
	order: 1;}
.messageSend .right.edit-i {
	order: 3;
	right:0;}
.messageSend .edit-i:hover{
	opacity:1;}
.messageSend .active.icon-send{
	opacity:1;
	color:#1A7BD5;}
.messageSend .msg-area .simplebar-scroll-content{
	margin-bottom:0 !important;}
.messageSend .msg-area .simplebar-content{
	overflow:hidden !important;
	padding-bottom:0 !important;}

.chat-board.box{}
.chat-board.box .searchA{
	margin-top:8px;}
.chatConversation{
	max-width:600px;
	clear:both;
	float:left;
	position:relative;
	margin-bottom:20px;}
.chatConversation  .intro{
	margin-bottom:10px;
	padding-left:54px;
	position:relative;}
.chatConversation  .intro .box{
	padding:6px 10px 4px 10px;
	font-size:0.7rem;
	text-align:center;
	flex:1;}
.chatConversation  .intro .date{
	position:relative;
	margin-left:5px;}
.chatConversation .chatSet{
	width:100%;
	position:relative;
	padding-left:45px;
	padding-right:47px;}
.chatConversation .chatSet .w50st .pic{
    width:40px;}
.chatConversation .chatSet .w50st .pic .img {
    height:40px;}
.chatConversation .chatSet .w50st .pic .img i {
    font-size: 1.4rem;}
.chatConversation.alt{
	float:right;}
.chatConversation.alt .chatSet{
	padding-left:47px;
	padding-right:0px;}
.chatConversation.alt .intro{
	padding-left:0;
	padding-right:14px;}
.chatConversation.alt .intro .date{
	order:1;
	margin-left:0px;
	margin-right:5px;}
.chatConversation.alt  .intro .box{
	order:2;}
.chatConversation .date{
	width:42px;
	font-size:0.7rem;
	line-height:1.2;
	position:absolute;
	right:0;
	bottom:4px;}
.alt .date{
	left:0;}
.chatSet .pic-box.w50st{
	position:absolute;
	top:0;
	left:0;
	width:50px;}
.chatSet .user-name{
	font-weight: bold;
    margin-left: 20px;
    padding-bottom:3px;}
.bubble {
	font-size:0.85rem;
	min-width:200px;
	min-height: 30px;
    position: relative;
    background: #fff;
    border-radius:13px;
    color: #000;
	margin-left:14px;
    padding:10px 15px;
    border-radius:16px;}
.bubble:hover{
	background-color: #f9f9f9;}
.bubble:hover:after{
    border-top-color: #f9f9f9;}
.alt .bubble:hover{
	background-color: #c9feff;}
.alt .bubble:hover:after{
    border-top-color: #c9feff;}
.bubble > p,
.bubble > .filebox{}
.fileboxtitle{
	display: flex;
    align-items: center;
	height: 13px;
	font-size: 0.7rem;}
.fileboxtitle i{
	font-size: 0.4rem; margin-left: 20px;}
.fileboxtitle.on i{transform: rotate(90deg);}
.fileboxtitle + .filebox{
	display: none;
    margin-top: 10px;}
.fileboxtitle.on + .filebox{display: block;}
.filebox{
	position: relative;
    overflow: hidden;
	background: #fff;
    margin: 0 -13px -8px -13px;
    border-radius:8px 8px 16px 16px;}
.filebox .file-hd{
	padding: 10px;}
.filebox .file-bd{
	padding: 10px;
    max-height:200px;}
.filebox .file-bd.single{padding: 0;}
.filebox .filename{
	word-break: break-all;
	font-weight: bold;}
.filebox .filecate{
	word-break: break-all;
	color:#aaa;
	font-size: 0.7rem;}
.bbl-dnld{
	display: none;
    position: absolute;
    top: 10px;
    right: 10px;}
.bbl-dnld.filetopon{
	top:-8px;
	right:-8px;}
.filebox.on .bbl-dnld.filehdon,
.bubble.on .bbl-dnld.filetopon,
.on_hover .bbl-dnld.filetopon{display: block;}
.list-i .bbl-dnld.filetopon{
    right: 10px;
    bottom: 10px;
    top: auto;}
.bbl-dnld .btn{
	color:#bbb;
	background-color: #fff;
	border:solid 1px #ccc;}
.bbl-dnld .btn:hover{
	color:#777;}
.bubble img{
	width:100%;}
.bubble.pic{
	padding:0;}
.bubble.pic:after {
    z-index: -2;}
.bubble.pic .img{
	width:auto;
	height:auto;
	margin:0;
    border-radius:16px;}
.bubble.pic .img img{
	position:relative;}
.bubble:after {
    border-radius: 20px / 5px;
    content: '';
    display: block;
    position: absolute;}
.bubble:after{
	width: 30px;
	height: 30px;
    z-index: -1;
	content:url("../img/bind/cb-tip.svg");
    top:6px;
    left: -17px;}
.box .bubble{
	z-index:1;}
.alt .bubble{
	margin-left:0px;
	margin-right:14px;
	border:none;
	color:#000;
	background-color:#ACFBFD;}
.alt .bubble:before{
	display:none;}
.alt .bubble:after{
	content:url("../img/bind/cb-tip-rv.svg");
    left: auto;
    right: -17px;}
.typing {
  display: flex;
  justify-content: center;
  align-items: center;}
.circle {
  display: block;
  height:5px;
  width:5px;
  border-radius: 50%;
  background-color: #757575;
  margin: 3px;}
.circle.scaling {
  animation: typing 1000ms ease-in-out infinite;
  animation-delay: 3600ms;
}
.circle.bouncing {
  animation: bounce 1000ms ease-in-out infinite;
  animation-delay: 3600ms;
}

.circle:nth-child(1) {
  animation-delay: 0ms;
}

.circle:nth-child(2) {
  animation-delay: 333ms;
}

.circle:nth-child(3) {
  animation-delay: 666ms;
}

@keyframes typing {
  0% {
    transform: scale(1);
  }
  33% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  33% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}


@media screen and (max-width:771px){
.chat-board {
    height: calc(100vh - 45px);}
.topmenu-dropdown-wrap + .container .dblock .mhead + main .cont-inner.pd_a0 .chat-board,
.topmenu + .container .dblock .mhead + main .cont-inner.pd_a0 .chat-board{
    height: calc(100vh - 45px);}

.chat-wr .info + .searchA{
	display:block;}
.flxclm.top.chat-top .scrolla{
    height: calc(100% - 0px);}


.chat-top .chat-wr{
	padding-top:0;}
.chat-board.box .chat-top .head .searchA{
	display:block;}
.chat-board.box .chat-top .scrolla{
    height: calc(100% - 100px);}
.chat-board.box .chat-top .head{
	margin-bottom:15px;}

	}

.chat-tool {
	min-width:230px;
	min-height:200px;
    position: fixed !important;
    bottom:3px;
    right:3px;
    width:340px;
    height:420px;
    z-index: 99997;
    background: #fff;
    border-radius:6px;
	border:solid 1px #ccc;
    box-shadow:0px 0px 13px rgb(0 0 0 / 33%);}
.chat-tool.wftr{
	bottom:30px;
    right: 160px;}
@media screen and (max-width:420px){
.chat-tool {
	width:94%;
    right:0;
	left:10px;
	margin:auto;}
}
.chat-tool .messageSend{
    border-radius:0 0 5px 5px;}
.chat-tool .chat-btm .messageSend textarea{
	height:27px;
	max-height:85px;}
.chat-tool .onlinests{
	font-size:.9rem;
    line-height: 1;}
.chat-tool .onlinests.txt{
	font-size:0.6rem;
	color:#666;}
.chat-tool .onlinests.on{
	color:#00CC66;}
.chat-tool .chat-top .chat-wr{
	padding-top:5px;}
.chat-tool .chat-board{
	height:100%;}
.chat-tool .chat-board > .top0{
	border-bottom:solid 1px #ddd;}
.chat-tool .chat-board > .top0 .chat-top-parent{
	padding: 8px;}
.chat-tool .chat-board > .top0 > .flx > .right > .flx{
	width:22px;
	height:22px;
	margin-right: 8px;}
.chat-tool .chat-board > .top0 > .flx > .right > .flx i{
	font-size:1.5rem;
	color:#0B93F6;}
.chat-tool .chat-board > .top0 .pic-box .pic .onlinests{
	position: absolute;
    bottom: -2px;
    right: -2px;}
.chat-tool .chatConversation .chatSet{
	padding-left:0;}
.chat-tool .chatConversation.alt .chatSet{
    padding-left: 47px;}
.chat-tool .chatConversation .chatSet .pic-box.w50st{
	display:none;}
.chat-tool .bubble{
	max-width:250px;
    min-width:90px;
    margin-left:0px;}
.chat-tool .alt .bubble{
	margin-right:0;
	background-color:#ACFBFD;}
.chat-tool .bubble:after{
	display:none;}
.chat-tool .messageSend .msg-area input{
    line-height: 1.28;
    background: none;
    border: none;
    padding: 0px;
    width: 100%;
    height: 27px;}
.chat-tool .chat-list{
	display:none;}
.chat-tool .chat-list > ul > li{
	border-top:solid 1px #ddd;}
.chat-tool .chat-list > ul > li:hover{
	background-color:#eee;}
.chat-tool .chat-list > ul > li:first-child{
    border-radius:6px 6px 0 0 ;}
.chat-tool.minimumV{
	min-height:inherit;
	max-height:140px;}
.chat-tool.minimumV .chat-list{
	display:block;}
.chat-tool.minimumV .chat-board{
	display:none;}
.chat-tool.minimumV .datalist + .datalistR.drop.c-active{
	top:-150px;
    display: block;}
.chat-tool.minimumV .datalist + .datalistR .box {
    height: 150px;}
/*https://staff.builmendx.com/~lee/design/hotelmng/staff-detail.html */
.chat-plugin{
	border:solid 1px #ddd;}
.chat-plugin .mhead.pcv{
	position: relative;
	left: 0;
	width: 100% !important;}
.chat-plugin .chat-board{
	height:480px;}
#ghostpane {
	position: absolute;
	margin: 0;
	padding: 0;
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;}
.chatpR ~ .datalistR{
    z-index: 99998;}
.icon-folder-open,
.icon-folder{
	color:#F3B612;}
.tree .current .icon-folder-open,
.tree .current .icon-folder,
.icon-folder.-open{
	color:#FF3F00;}
.tree li .atag:hover{
	cursor:pointer;}
.tree > li > p{
	padding-top:0;
	display: block;}
.tree.start > li{
	background-image:none;
	padding-left:0;}
.tree > li.current > p{
	background-color:#C6F7F3;}
.treelist{}
.treelist .trigger{
	position:relative;
	border-bottom:solid 1px #ddd;}
.treelist .tp{
	flex:1;
	width:100%;
	padding:14px 10px 13px 7px;
	padding-right:60px;
	position:relative;}
.treelist .atag{
	padding:14px 10px 13px 7px;
	padding-right:60px;}
.treelist .winp{
	padding:8px 10px 8px 7px;
	padding-right:60px;}
.treelist .trigger .logo-img{
	width:25px;
	height:25px;
	margin-left:10px;}
.treelist .trigger .treeicon{
	padding-left:25px;}
.treelist .trigger .Rtrg + .treeicon{
	padding-left:0px;}
.treelist .trigger .treeicon i{
	font-size:1.4rem;}
.treelist .trigger .icon-chevron-left{
	font-size:1.5em;
	transform: rotate(-45deg);}
.tree > li .icon-sitemap{
	color:#36F;}
.tree > li .icon-star:not(.txtbtn){
	color:#DDAD0B;}
.tree > li .icon-group1{
	color:#009999;}
.tree > li .right.hover-out{
	position:absolute;
	right:10px;
	top:50%;
	margin-top:-10px;}
.tree li .tp.atag{
	border-bottom:none;}
.tree li .tp.atag:hover{
	background-color:transparent;}


.tree{
  display: none;}
.tree.open {
  display: block;}
.tree   li .btn.sq{
	width:17px;
	height:17px;
	border-radius:0;}
.tree   li .btn.sq.mono{border-width: 1px;}
.tree   li .btn.sq i{
	font-size:.7rem;
	color:#000;}
.tree   li .atag{
	position:relative;
	border-bottom:solid 1px #ddd;}

.tree > li > .trigger{
	padding-left:20px !important;}
.tree > li > .trigger + ul .atag:not(.tp),
.tree > li > .trigger + ul .trigger{
	padding-left:35px !important;}
.tree > li > .trigger + ul .trigger + ul .atag:not(.tp),
.tree > li > .trigger + ul .trigger + ul .trigger{
	padding-left:50px !important;}
.tree > li > .trigger + ul .trigger + ul .trigger + ul .atag:not(.tp),
.tree > li > .trigger + ul .trigger + ul .trigger + ul .trigger{
	padding-left:65px !important;}
.tree > li > .trigger + ul .trigger + ul .trigger + ul .trigger + ul .atag:not(.tp),
.tree > li > .trigger + ul .trigger + ul .trigger + ul .trigger + ul .trigger{
	padding-left:80px !important;}
.tree > li > .trigger + ul .trigger + ul .trigger + ul .trigger + ul .trigger + ul .atag:not(.tp),
.tree > li > .trigger + ul .trigger + ul .trigger + ul .trigger + ul .trigger + ul .trigger{
	padding-left:95px !important;}
.depthN .tree > li > .trigger{
	padding-left:0px !important;}
.depthN.treelist .trigger .treeicon{
	padding-left:10px;}
.depthN.treelist{
	margin-left:0;}
.tree li .atag:hover{
	cursor:pointer;}
.tree > li.current > p{
	background-color:#C6F7F3;}

.treelist.mm{
	font-size:0.8rem;}
.treelist.mm .trigger{
	border:none;}
.treelist.mm .trigger.close{
	background-color:transparent;}
.treelist.mm .tp{
    padding:9px 10px 8px 10px;}
.treelist.mm .atag{
    padding:9px 10px 8px 10px;
	padding-right:50px;}
.treelist.mm .winp{
    padding:5px 10px 5px 10px;
	padding-right:50px;}
.treelist.mm .winp input{
	height:24px;}
.treelist.-linecate .tree li{
    position: relative;}
.treelist.-linecate .tree li:before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -.5em;
    display: block;
    width: 0;
    border-left: 1px solid #777;
    content: "";}
.treelist.-linecate > li > .tree > li > .trigger{
	padding-left: 0 !important;}
.treelist.-linecate .tree li .trigger{
	position: relative;}
.treelist.-linecate .tree li .trigger::after {
    position: absolute;
    top: 10px;
    left:-.5em;
    display: block;
    height: 0.5em;
    width: 1em;
    border-bottom: 1px solid #777;
    border-left: 1px solid #777;
    content: "";}
.treelist.-linecate .tree li .trigger + .tree{
    margin-left: 30px;}
.treelist.-linecate .tree.-fh li .trigger{
	padding-left: 20px !important;}
.treelist.-linecate .tree.-fh .tp{
	height: 36px;
    display: flex;
	align-items: center;
    padding: 0 !important;}
.arrow_box {
    opacity: 0;
	margin:auto;
	position:absolute;
	z-index:111;
	bottom:70%;
    left: 50%;
    transform: translateX(-50%);
	animation:arrow_box-tb 300ms ease-out forwards;}
.arrow_box.def{
	z-index:unset;
	position: relative;
	bottom: 0;
	left: 0;
    transform: translateX(0%);}
@keyframes arrow_box-tb{
  to {
    opacity: .9;
	bottom:100%;
  }
}
.arrow_box.leftst{
	left:-16px;
	transform: translate(0%, 0%);}
.arrow_box_in {
	display:block;
	position: relative;
	background: #FFF;
	border:1px solid #aaa;
	padding:8px;
	border-radius:4px;
	font-weight:normal;}
.arrow_box_in:after,
.arrow_box_in:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;}
.leftst .arrow_box_in:after,
.leftst .arrow_box_in:before {
	top: 100%;
	left:10%;}
.arrow_box_in:after {
	border-top-color: #FFF;
	border-width: 6px;
	margin-left: -6px;}
.arrow_box_in:before {
	border-top-color: #aaa;
	border-width: 8px;
	margin-left: -8px;}
.arrow_box.rvs{
	top:100%;}
.arrow_box.rvs.st01{
	width:90%;
    top:90%;}
.arrow_box.pr_parent,
.arrow_box.rvs.pr_parent{
	position:relative;
	top:0;
	left:0;
	margin-left:0;}
.arrow_box.rvs .arrow_box_in:after,
.arrow_box.rvs .arrow_box_in:before {
	top:auto;
	bottom:100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;}
.arrow_box.rvs .arrow_box_in:after {
	border-bottom-color: #FFF;
	border-width: 6px;
	margin-left: -6px;}
.arrow_box.rvs .arrow_box_in:before {
	border-bottom-color: #aaa;
	border-width: 8px;
	margin-left: -8px;}

.arrow_box.chatst .arrow_box_in:after,
.arrow_box.chatst .arrow_box_in:before {
	top:20%;
	bottom:auto;
	right:100%;
	left: auto;}
.arrow_box.chatst .arrow_box_in:after {
	border-right-color: #FFF;
	border-top-color: transparent;
	border-width: 6px;
	margin-top: -6px;}
.arrow_box.chatst .arrow_box_in:before {
	border-right-color: #aaa;
	border-top-color: transparent;
	border-width: 8px;
	margin-top: -8px;}
.arrow_box_call{
	position:relative;}
.arrow_box_call .arrow_box_callR{
	display:none;}
.arrow_box_call:hover .arrow_box_callR{
	display:block;}
.view.arrow_box_callR{
	display:block;}

.scrolla .arr-fl .arrow_box{
    top: -40px;
    width: 100px;
	min-width:inherit;}
.scrolla .arr-fl .arrow_box_in{
    height:70px;}/* docuflow format-app-d.html or main list sample */
@media screen and (max-width:480px){
.popW_body .arrow_box.w240{
    left:auto;
    right: 0;
    transform: translate(0%, 0%);}
.popW_body .arrow_box_in:after,
.popW_body .arrow_box_in:before {
    left: auto;
    right: 0%;}
}
.tipst-p{
	position:relative;}
.tipst{
	display:none;
    text-align: left;
	top: -116px;
    left:50%;
	width:140px !important;
	margin-left:-70px;
	min-width:inherit;}
.tipst-p:hover .tipst{
	display:block;}
.tipst-p.defp .tipst{
	bottom: auto;
    top: 100%;
    left: 0;
    margin-left: 0;
    transform: none;
    margin: 0;}
.tipst-p.defp .arrow_box_in{
	border:solid 1px #aaa;
	padding:3px;
	font-size: .7rem;}
.tipst-p.defp .arrow_box_in:after,
.tipst-p.defp .arrow_box_in:before{
	display:none;}

/* START TOOLTIP STYLES */
[tooltip],
.tooltipW{
	display:block;
  position: relative;}
[tooltip]::before,
[tooltip]::after,
.tooltipR{
  z-index:1;
  font-size: .7rem;
  position: absolute;
  opacity:0;
  display:none;}
[tooltip]::after,
.tooltipR.active{
  content: attr(tooltip);
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height:14px;
  line-height:16px;
  background: #fff;
  border:solid 1px #ddd;
  color: #000;
  text-align:center;}
.tooltipR.active.link{
  position: absolute;}
[tooltip]:hover::before,
[tooltip]:hover::after,
.tooltipR.active{
  display: block;}
.tooltipR.active:hover{
	background-color:#CF9;}

[tooltip='']::before,
[tooltip='']::after {
  display: none !important;}
/* FLOW: DOWN */
[tooltip][flow^="down"]::before,
.tooltipR{
  top: 100%;
}
[tooltip][flow^="down"]::after,
.tooltipR.active{
  top: calc(100%);
}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after,
.tooltipR,
.tooltipR.active{
  left: 50%;
  transform: translate(-50%, .5em);
}


/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}

/* FX All The Things */
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after,
.tooltipR,
.tooltipR.active{
  animation: tooltips-vert 300ms ease-out forwards;
}
.tippy-tooltip.titletip-theme {
	padding: 2px;
	font-size: .7rem;
  background-color: #FFFFFF;
  border: 1px solid #ccc;
  color: black;
  box-shadow: 0 4px 30px lightgray;}

.tippy-tooltip.titletip-theme .tippy-backdrop {
  background-color: #FFFFFF;
}



.tippy-popper[x-placement^=top] .tippy-tooltip.titletip-theme .tippy-arrow {
  border-top: 7px solid #bbb;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
}
.tippy-popper[x-placement^=top] .tippy-tooltip.titletip-theme .tippy-arrow:after{
	position: absolute;
	content: '';
	top:-7px;
	left: -6px;
  border-top:6px solid #fff;
  border-right:6px solid transparent;
  border-left:6px solid transparent;}

.tippy-popper[x-placement^=bottom] .tippy-tooltip.titletip-theme .tippy-arrow {
  border-bottom: 7px solid #bbb;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
}
.tippy-popper[x-placement^=bottom] .tippy-tooltip.titletip-theme .tippy-arrow:after{
	position: absolute;
	content: '';
	bottom:-7px;
	left: -6px;
  border-bottom:6px solid #fff;
  border-right:6px solid transparent;
  border-left:6px solid transparent;}

.tippy-popper[x-placement^=left] .tippy-tooltip.titletip-theme .tippy-arrow {
  border-left: 7px solid #bbb;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
.tippy-popper[x-placement^=left] .tippy-tooltip.titletip-theme .tippy-arrow:after{
	position: absolute;
	content: '';
	left:-7px;
	top: -6px;
  border-left:6px solid #fff;
  border-bottom:6px solid transparent;
  border-top:6px solid transparent;}


.tippy-popper[x-placement^=right] .tippy-tooltip.titletip-theme .tippy-arrow {
  border-right: 7px solid #bbb;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
.tippy-popper[x-placement^=right] .tippy-tooltip.titletip-theme .tippy-arrow:after{
	position: absolute;
	content: '';
	right:-7px;
	top: -6px;
  border-right:6px solid #fff;
  border-bottom:6px solid transparent;
  border-top:6px solid transparent;}
.tippy-tooltip.left-align-theme {
  text-align: left;
}

.toggle{
	border:solid 1px #ccc;}
.toggle-btn{
	color:#bbb;
	text-align:center;
	cursor:pointer;
	flex:1;
	background-color:#fff;
    -webkit-transition: ease-out 0.1s;
    -moz-transition: ease-out 0.1s;}
.toggle-btn a{
	color:#bbb;}
.toggle-btn:hover{
	background-color:#C6F7F3;}
.toggle-btn.-off:hover{
	background-color:#eee;}
.toggle-btn.orngst:hover{
	background-color:#FFEEDD;}
.toggle-btn.active{
	background-color:#009CF0;
	color:#fff !important;}
.toggle-btn.active.-off{
	background-color:#aaa;}
.toggle-btn.active.orngst,
.toggle-btn.orngst ~ .active{
	background-color:#FF7E00;}
.toggle-btn.active.redst{
	background-color:#EA0003;}
.toggle-btn.active a{
	color:#fff;}
.toggle.def{
	border:none;
    border-radius: 35px;}
.toggle.def .toggle-btn{
	border:solid 1px #ccc;}
.toggle.def .toggle-btn > .flx{
	width:20px;
	height:20px;}
.toggle.def .toggle-btn{
	padding:6px 10px 6px 10px;}
.toggle.def .toggle-btn + .toggle-btn{border-left: none;}
.toggle.def .toggle-btn:first-child{
	padding:6px 6px 6px 10px;
    border-radius: 35px 0 0 35px;}
.toggle.def .toggle-btn:last-child{
	padding:6px 10px 6px 6px;
    border-radius: 0 35px 35px 0;}
.toggle.brr .toggle-btn{
	padding:6px 7px 6px 7px;}
.toggle.brr .toggle-btn:first-child{
    border-radius:3px 0 0 3px;}
.toggle.brr .toggle-btn:last-child{
    border-radius: 0 3px 3px 0;}
.toggle.def.brr0 .toggle-btn:first-child,
.toggle.def.brr0 .toggle-btn:last-child{
    border-radius: 0;
	padding:6px 7px;}
.toggle .toggle-btn i{
	font-size:1.2rem;}
.toggle .toggle-btn i.icon-calendar{
	font-size:1.4rem;}
.toggle.ynst .toggle-btn:first-child.active,
.toggle.ynst .toggle-btn:first-child:hover{
	background-color:#E4272C;}
.toggle.ynst .toggle-btn:last-child.active,
.toggle.ynst .toggle-btn:last-child:hover{
	background-color:#25C035;}
.toggle.ynst.rb .c0.toggle-btn.active,
.toggle.ynst.rb .c0.toggle-btn:hover{
	background-color:#E4272C !important;}
.toggle.ynst.rb .c1.toggle-btn.active,
.toggle.ynst.rb .c1.toggle-btn:hover{
	background-color:var(--bgbluekey) !important;}
.toggle.ynst .toggle-btn:hover{
	color:#fff;}
.toggle.offst .toggle-btn:first-child.active,
.toggle.offst .toggle-btn:first-child:hover{}
.toggle.offst .toggle-btn:last-child.active,
.toggle.offst .toggle-btn:last-child:hover{
	background-color:#bbb;
	color:#333;}
.toggle.ynst .toggle-btn:hover{
	color:#fff;}
.toggle.mini{
	font-size:0.7rem;
    height:20px;}
.toggle.mini .toggle-btn{
	line-height:19px;
	padding:0px !important;}
.toggle.mid{
    height:25px;}
.toggle.mid .toggle-btn{
	line-height:23px;
	padding:0px !important;}
.toggle.rnd .toggle-btn:first-child{
	border-radius:50px 0 0 50px;}
.toggle.rnd .toggle-btn:last-child{
	border-radius:0 50px 50px 0 ;}
.toggle.rnd{
	border-radius:50px;}

.toggle-switch{
  display: inline-block;
  height:24px;
  position: relative;
  width:24px;}
.toggle-switch.-sldst{
	width:42px;}
.toggle-switch input {
  display:none;}
.toggle-switch span{
  background-color: #ccc;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .4s;}
.toggle-switch.-sldst .round:before {
  background-color: #fff;
  bottom: 4px;
  content: "";
  height:16px;
  left: 4px;
  position: absolute;
  transition: .4s;
  width:16px;}
.toggle-switch span.round{
	border-radius: 24px;}
.toggle-switch span.round:before {
  border-radius: 50%;}
.toggle-switch span i{
	font-size: 1.2rem;
	color:#fff;
	opacity: .6;}
.toggle-switch input:checked + span{
  background-color: #66bb6a;}
.toggle-switch input:checked + span i{
  opacity: 1;}
.toggle-switch.-sldst input:checked + .round:before {
  transform: translateX(18px);}
/* <label class="toggle-switch -sldst" for="checkbox1">
    <input type="checkbox" id="checkbox1" checked>
    <span class="round"></span>
</label> */

.btngate{
	width:1000px;
	margin:0 auto;}
.btngate a{
	text-align:center;
    width:180px;
    height:180px;
    padding:15px;
	margin:10px;}
.btngate a:hover{
	background-color:#C6F7F3;}
.btngate a .img{
	flex:1;}
.btngate a .title{
	flex:1;
	font-size:1.1rem;}
.btngate a i{
	font-size:3.3rem;}
.btngate{
	width:1000px;
	margin:0 auto;}
@media screen and (max-width:1030px){
.btngate{
	width:800px;}}
@media screen and (max-width:830px){
.btngate{
	width:600px;}}
@media screen and (max-width:630px){
.btngate{
	width:400px;}}
@media screen and (max-width:430px){
.btngate{
	width:280px;}
.btngate a{
    width:130px;
    height:130px;
	margin:5px;}
.btngate a i{
	font-size:2rem;}
.btngate a .title{
	font-size:.9rem;}
}
.color-paletteW{
	width:200px;
	height:200px;
	position:relative;}
.color-paletteW.free{
	width:auto;
	height:auto;}
.color-palette.uget{
	width:182px;
	position:absolute;
	top:0px;
	left:100px;}
.free .color-palette.uget{
	position:relative;
	left:0;}
.color-palette.uget li {
	float:left;
	width:30px;
	height:30px;}
.color-palette.uget li span{
	width:100%;
	height:100%;
	display:block;}
.color-palette.uget li input{
	border:none;
	border-radius:0;
	width:100%;
	height:100%;}
.color-palette.uget.mini{
	width:90px;}
.color-palette.uget.mini li{
	width:15px;
	height:15px;}
.color-paletteR{}
.color-paletteR .color-palette li input{
	width:200px;
	height:200px;}


.color-translate .hex input {
  width:100%;
  outline:none;
  box-sizing:border-box;
  padding:0;
  border:none;
  font-family:'RobotoDraft';
  background-color:transparent;}
.color-translate input[type=color] {
  width:64px;
  height:32px;
  box-sizing:border-box;
  background-color:transparent;
  border:none;
  cursor:pointer;
  outline:none;
  transition:box-shadow 0.5s ease;}
.color-translate input[type=color]:active,
.color-translate input[type=color]:focus {
  box-shadow:0 5px 30px rgba(0,0,0,0.25),
    0px -5px 10px rgba(0,0,0,0.25);}
.color-translate {
	display:none;}
.color-translate.pickm{
	display:block;}


/*bmdx/products-detail.html
invoice/edit_templatebk.html#tt01
*/
.color-picker {
	width:150px;
	box-shadow:0 2px 5px rgba(0,0,0,0.25);
	background-color:#eee;}
.color-picker ul{
	width:150px;
	height:100px;}
.color-picker ul li{
	width:25px;
	height:25px;
	cursor:pointer;}
.color-picker ul li.transparent{
	border:1px solid #333;
	box-sizing:border-box;
	background-image:linear-gradient(-45deg, transparent, transparent 48%, red 49%, red 51%, transparent 52%, transparent);}

.red {
  background-color:#F44336;
}

.pink {
  background-color:#E91E63;
}

.purple {
  background-color:#9C27B0;
}

.deep-purple {
  background-color:#673AB7;
}

.indigo {
  background-color:#3F51B5;
}

.blue {
  background-color:#2196F3;
}

.light-blue {
  background-color:#03A9F4;
}

.cyan {
  background-color:#00BCD4;
}

.teal {
  background-color:#009688;
}

.green {
  background-color:#4CAF50;
}

.light-green {
  background-color:#8BC34A;
}

.lime {
  background-color:#CDDC39;
}

.yellow {
  background-color:#FFEB3B;
}

.amber {
  background-color:#FFC107;
}

.orange {
  background-color:#FF9800;
}

.deep-orange {
  background-color:#FF5722;
}

.brown {
  background-color:#795548;
}

.gray {
  background-color:#9E9E9E;
}

.blue-gray {
  background-color:#607D8B;
}

.black {
  background-color:#000000;
}

.white {
  background-color:#fff;
}

#color-close {
  background-color:#eee;
  display:flex;
  align-items:center;
  justify-content:center;
  user-select:none;
  color:#333;
}

.stamp{
	width:100px;
	height:100px;
	border-radius:100px;
	border:solid 6px #D23;
	text-align:center;
	color:#D23;
	font-weight:bold;
	font-size:30px;
	font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	-webkit-mask-image: url('../img/grunge.png');
	-webkit-mask-size: 944px 604px;
	mix-blend-mode: multiply;}
.stamp.sq{
	border-radius:10px;}
.stamp.sq > span{
	height: 20px;
	display: block;
	font-size: 17px;}
.schedule-list{}
.schedule-list > li{
	width:100%;
	margin-bottom:30px;}
.schedule-list li.monp{
    font-weight: bold;
    font-size: 1.3rem;
    padding: 20px 0;}
.schedule-list li a{
    padding: 13px;
	margin-bottom:10px;}
.schedule-list li a:last-child{
	margin-bottom:0;}
.schedule-list .days{
    width: 50px;
	font-size:0.9rem;
	font-weight:bold;
    text-align:center;}
.schedule-list .sday{
	color:#0033FF;}
.schedule-list .hday{
	color:#FF0000;}
.schedule-list .sc-detail{
	position:relative;
	flex:1;}
.schedule-list .sc-detail .d-time{
	font-size:0.9rem;
	margin-bottom:5px;}
.schedule-list .sc-detail.wtime{
	padding-left:60px;}
.schedule-list .time{
	color:#666;
	font-weight:bold;
	position:absolute;
	top:0;
	left:0;}
.maindate .date-ym{
	font-weight:bold;
	font-size: 1.2rem;
	width:125px;
	text-align:center;}

.scrolla .status-fl,
.scrolla .arr-fl{
	max-width: 1800px;}
.arr-fl li {
    position: relative;
	flex:1;
	min-width:180px;
    line-height: 1;
	padding-right:10px;}
.arr-fl li:last-child {
    padding-bottom: 0;
	padding-right:0px;}
.arr-fl li:last-child:before{
	display:none !important;}


.data-form{}
.data-form li{
	margin-bottom:5px;}
.data-form .elli{
	width:125px;}
.data-form .auto-num{
	padding-top:3px;
	width:30px;
	text-align:left;}
.data-form .form{
	flex:1;}
@media screen and (max-width:1100px){
.data-form.rowst.col2 .list-i{
	width:100%;
	margin-bottom:10px;}
}



.editFtable table.def th,
.editFtable table.def td{
	padding:1px;}
.editFtable input{
	width:100%;}
.editFtable input:hover {
    background-color: #eee;}
.editFtable input:focus {
    background-color: #ccf;}
.editFtable input:not(:focus) {
    text-align: right;}



.ddform{
	box-shadow:none !important;
	border:none !important;
	background-color:transparent !important;
	background-image: repeating-linear-gradient(0deg, #fff, #fff 15px,
	                  transparent 15px, transparent 28px, #fff 28px),
					  repeating-linear-gradient(90deg, #fff, #fff 15px,
					  transparent 15px, transparent 28px, #fff 28px),
					  repeating-linear-gradient(180deg, #fff, #fff 15px,
					  transparent 15px, transparent 28px, #fff 28px),
					  repeating-linear-gradient(270deg, #fff, #fff 15px,
					  transparent 15px, transparent 28px, #fff 28px)  !important;
background-size: 6px 100%, 100% 6px, 6px 100% , 100% 6px  !important;
background-position: 0 0, 0 0, 100% 0, 0 100%  !important;
background-repeat: no-repeat  !important;
	padding:30px;}
.ddform.st02{
	box-shadow:none !important;
	border:none !important;
	background-color:transparent !important;
	background-image: repeating-linear-gradient(0deg, #ddd, #ddd 15px,
	                  transparent 15px, transparent 28px, #ddd 28px),
					  repeating-linear-gradient(90deg, #ddd, #ddd 15px,
					  transparent 15px, transparent 28px, #ddd 28px),
					  repeating-linear-gradient(180deg, #ddd, #ddd 15px,
					  transparent 15px, transparent 28px, #ddd 28px),
					  repeating-linear-gradient(270deg, #ddd, #ddd 15px,
					  transparent 15px, transparent 28px, #ddd 28px)  !important;
background-size: 6px 100%, 100% 6px, 6px 100% , 100% 6px  !important;
background-position: 0 0, 0 0, 100% 0, 0 100%  !important;
background-repeat: no-repeat  !important;}
.ddform:hover,
.multilink:hover .ddform{
	background-image: repeating-linear-gradient(0deg, #ffea00, #ffea00 15px,
	                  transparent 15px, transparent 28px, #ffea00 28px),
					  repeating-linear-gradient(90deg, #ffea00, #ffea00 15px,
					  transparent 15px, transparent 28px, #ffea00 28px),
					  repeating-linear-gradient(180deg, #ffea00, #ffea00 15px,
					  transparent 15px, transparent 28px, #ffea00 28px),
					  repeating-linear-gradient(270deg, #ffea00, #ffea00 15px,
					  transparent 15px, transparent 28px, #ffea00 28px)  !important;}

.draggableBox{
	top:50px;
	right:50px;}
.draggableBox2{
	top:350px;
	left:10px;}
.draggable{
	position:relative;
	cursor:move;
	background-color:#eee;
	padding:0px 3px;}
.draggable.-pdthin{
	padding: 0 1px;}
.-title .draggable{cursor: default; background-color: transparent;}
.-title .draggable:hover{background-color: transparent;}
.draggable.on{
	background-color:rgba(246,240,150,0.5);}
.draggable.off{
	background-color:#ddd;
	color:#bbb;}
.draggable.wide{
	padding:10px 13px;}
.draggable .dropboxR{
	top:24px;}
.draggable .dropboxR + .dropboxRR{
	position: absolute;
    top: 33px;
    left: -5px;
    width: 300px;
	z-index:1234;}
.connected-sortable{
	border:solid 1px #ccc;}
.marginst .connected-sortable{
	border:none;}
.marginst .sort-i{
	border:solid 1px #ccc;
	margin-bottom:5px;}
.marginst .sort-i.-title{border:none;}
.marginst .sort-i.ui-sortable-helper{
	border:none;}
.marginst .sort-i:not(.-title):last-child{
	border-bottom:solid 1px #ccc;
	margin-bottom:0px;}
.draggable ~ .sort-i-editR .title-inp{height: 34px;}

/*/invoice/set-costs.html*/
/*format-newCreat-nv0.html#rs-tab02*/
.inplist .sort-i{
	border:none;}
.inplist .sort-i:last-child{
	border-bottom:none;}
.marginst .sort-i,
.inplist .sort-i input,
.h34{
	height:34px;}
.drag-sib{
	background: #eee;
    border-top: solid 1px #ccc;
    border-bottom: solid 1px #ccc;}
.drag-sib.fins{
    border-right: solid 1px #ccc;}
.marginst .sort-i input,
.marginst .sort-i .btn:not(.sys){height: 30px;}
.marginst .sort-i .draggable{height: 100%;}
.marginst.mini .sort-i,
.inplist.mini .sort-i input{
	height:22px;}
.sort-wrapper.mini .sort-num > p{
	height:22px;
    line-height:22px;}
.gatemenust{
	border:none;}
.gatemenust .draggable.on{
	background-color:transparent;}
.gatemenust .ui-sortable-placeholder{
	background-color:#ddd;}
.gatemenust .ui-sortable-helper{
	min-width:inherit !important;}
.gatemenust .ui-sortable-helper .draggable{
	height:auto;}

.sort-iB .cate{
	padding-left:6px;
	padding-right:6px;}
.sort-i{
	border-bottom:solid 1px #ccc;}
.sort-i:last-child{
	border-bottom:none;}
.ui-sortable-placeholder{
	background-color:#f7f7f7;
	visibility:visible !important;}
.ui-sortable-helper{
	min-width:180px !important;}
.ui-sortable-helper .draggable{
	height:37px;}
.ui-sortable-helper .draggable .w20.h20,
.ui-sortable-helper .draggable .w80.f_r07,
.ui-sortable-helper .draggable .link.del.flx{
	display:none !important;}
.sort-wrapper{}
.sort-wrapper .sort-num{
	text-align:right;
	width:30px;}
.sort-wrapper .sort-num > p{
	height:32px;
	line-height:32px;
	letter-spacing:-1px;
	margin-bottom:5px;
	font-size:0.8rem;}
.sort-wrapper .sort-num.h57 > p{
	height:57px;
	line-height:57px;}
.sort-wrapper.panelst .sort-i{
	border-bottom:none;}
.sort-wrapper.panelst .connected-sortable{
	border:none;}
.sort-wrapper.panelst .sort-num > p{
	height:80px;
	line-height:80px;
	margin-bottom:10px;}
.sort-wrapper.panelst .draggable{
	border-radius:4px;
	height:80px;
	margin-bottom:10px;
	padding:0;}
.draggable:hover{
	background-color:rgba(250,239,194,1);}

.nrw.marginst .sort-i,
.nrw .inplist .sort-i input{
	height: 24px;}
.nrw .link.h30{
	height: 22px !important;}
.nrw.sort-wrapper .sort-num.w30{
	width: 22px !important;}
.nrw.sort-wrapper .sort-num > p{
    height: 24px;
    line-height:24px;}
.nrw .ui-sortable-helper .draggable{
	height:22px;}

.marginst .sort-i.editact,
.sort-wrapper .sort-num > p.sort-i-edit-num.act{
    height:auto;}
/*https://staff.builmendx.com/~lee/design/invoice/edit_template.html#tt01 right side */
.marginst .sort-i.sort-i-editTP.editact .draggable{
	padding: 0;
	height: 33px;
	border-bottom:solid 1px #ddd;}
.marginst .sort-i.sort-i-editTP.editact .draggable .title-inp{
	width:calc(100% - 4px);
	margin-left: 2px;
	height: 30px;
    padding:1px;}
.sort-i-editR{
    margin: -1px;
    background: #fff;}
.wnum .sort-i{
	margin-left: 30px;
	position: relative;}
.wnum .sort-i .sort-num0{
    position: absolute;
    top: 7px;
    left: -30px;}
.transparent.connected-sortable{
	border:none;}
.transparent .draggable{
	background-color:transparent;}
.transparent .draggable:hover{
	background-color:transparent;}
.transparent .ui-sortable-placeholder{}
.sqst .ui-sortable-placeholder{
	position:relative;}
.sqst .ui-sortable-placeholder:after{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-33px;
	margin-left:-33px;
	width:65px;
    height:65px;
    border-radius: 10px;
	background-color:#ddd;
	border:dotted 2px #ccc;}
.toolst{
	position:relative;
	background-color:#fff;
	width:100%;}
.toolst .m-m{
	display:none;}
.toolst .m-m span{
	width:37px;
	height:37px;
	font-size:1.3rem;
	cursor:pointer;}

.toolst.toolbox{
	position: absolute;
    z-index: 12;
    width: calc(38px * 2 + 1px);}
.toolst.toolbox .icon-plt{
	display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    background: #eee;
	border:none;
    padding-bottom: 1px;}
.toolst.toolbox .icon-plt a{
    border: none;
    margin: 1px 1px 0 0;
    box-shadow: 1px 1px 1px rgb(0 0 0);}
.toolst.toolbox .toolst-head{
	border-radius: 0;
	border:none;
	border-bottom: solid 1px #000;
    width: 100%;
	left: 0;
    position: relative;
    height: 20px;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f7f7f7+0,cccccc+100 */
background: #f7f7f7; /* Old browsers */
background: -moz-linear-gradient(top,  #f7f7f7 0%, #cccccc 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #f7f7f7 0%,#cccccc 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #f7f7f7 0%,#cccccc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
}
.toolst.toolbox .toolst-head span{
    height: 4px;
    width: calc(100% - 13px);
    border: 4px;
    border-style: none none dotted none;}
.toolst.toolbox .toolst-head + .icon-plt-in{
    margin-top: -1px;
	margin-left:1px;
	max-height: calc(100% - 20px);}
.toolst.toolbox .toolst-head + .icon-plt-in li{}
.toolst.toolbox .icon-plt > li:last-child::after, .toolst.toolbox .icon-plt > li.toolR.last::after {
	display: none;}
.toolst .toolst-head{
	border-radius: 3px;
	position:absolute;
	left: -1px;
	width:16px;
	height:100%;
	border:solid 1px #000;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f7f7f7+0,cccccc+100 */
background: #f7f7f7; /* Old browsers */
background: -moz-linear-gradient(left,  #f7f7f7 0%, #cccccc 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #f7f7f7 0%,#cccccc 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #f7f7f7 0%,#cccccc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#cccccc',GradientType=1 ); /* IE6-9 */


}


.icon-plt{
    background: #fff;
	position:relative;}
.icon-plt.toolbox-wrap{
    background: transparent;
    height:0px;}
.toolpanel a{
    border:none;
    margin:0px;
    background-color:transparent;
    color: #000;
    width: 35px;
    height: 35px;}
.toolpanel a:hover{
	background-color:#FFCC00;}
.toolst-head {
    border-radius: 3px;
    position: absolute;
    left: -1px;
    width: 16px;
    height: 100%;
    border: solid 1px #000;
    background: #f7f7f7;
    background: -moz-linear-gradient(left, #f7f7f7 0%, #cccccc 100%);
    background: -webkit-linear-gradient(left, #f7f7f7 0%,#cccccc 100%);
    background: linear-gradient(to right, #f7f7f7 0%,#cccccc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#cccccc',GradientType=1 );}
.toolst-head span {
    display: block;
    width: 4px;
    height: calc(100% - 13px);
    border:4px;
    border-style: none dotted none none;}
.toolbox .toolst-head {
    border-radius: 0;
    width: calc(100% + 1px);
    left: -1px;
    height: 20px;
    background: -moz-linear-gradient(top, #f7f7f7 0%, #cccccc 100%);
    background: -webkit-linear-gradient(top, #f7f7f7 0%,#cccccc 100%);
    background: linear-gradient(to bottom, #f7f7f7 0%,#cccccc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#cccccc',GradientType=0 );}
.toolbox .toolst-head span{
    height: 4px;
    width: calc(100% - 13px);
    border-style: none none dotted none;}
.icon-plt a i{
	font-size:1.3rem;}
.icon-plt span.line{
	width:27px;
	display:block;
	background-color:#000;}
.icon-plt span.line.th01{
	height:1px;}
.icon-plt span.line.th02{
	height:3px;}
.icon-plt span.line.th03{
	height:5px;}
.icon-plt span.clrbox{
	width:27px;
	height:27px;
	display:block;}
.toolpanel{
    padding-left:15px;
    background-color: #fff;
    display: grid;
    grid-template-rows: repeat(1, minmax(36px, min-content));
    grid-template-columns: repeat(auto-fill, 36px);
    grid-template-columns: repeat(auto-fit, 36px);
    grid-template-columns: repeat(auto-fit,minmax(36px, 1fr));
    grid-auto-rows: 36px;
    max-width: calc(36px * 25 + 15px);}
.toolpanel.st02{
	grid-auto-rows: 0px;
    max-width: calc(36px * 9 + 15px);}
.toolpanel.st02.tool-opt,
.toolpanel.st02.toolbox{grid-auto-rows: 36px;}
.toolpanel.st02.tool-opt{max-height: 72px;}
.toolpanel.st02.tool-opt.toolbox{max-height:none;}
.toolpanel .tool-i{
  box-shadow: -1px -1px 0px #000, -1px -1px 0 #000 inset;
  color: white;
  font-family: sans-serif;
  background-color: #fff !important;}

.toolpanel .handle{display: none;}
.toolpanel.toolbox .handle{display: block;}
.toolpanel.toolbox .ui-resizable-e {
    cursor: se-resize;}
.toolpanel.toolbox{
	z-index: 123;
	padding-top: 20px;
	padding-left: 0;
    width: calc(36px * 2);}
.htmleditor{
	background: #fff;
	border:solid 1px #000;
	padding:3px;}
.htmleditor .toolpanel{
	padding-left: 0;
    grid-auto-rows:auto;}
.htmleditor textarea{
	margin-top: 3px;}
.pane-drop{
    width: 100%;
    height:100%;
    position: absolute;}
.pane-drop.pane-drop-on.ui-state-active{
	height: 50px;
	border:dashed 1px rgba(255,255,255,0.8);
	background:rgba(255,255,255,.0.4);}
.pane-drop-on + .icon-plt .ui-draggable-dragging.toolbox .toolst-head{
    border-radius: 3px;
    left: -1px;
    width: 16px;
    height: 100%;
    background: -moz-linear-gradient(left, #f7f7f7 0%, #cccccc 100%);
    background: -webkit-linear-gradient(left, #f7f7f7 0%,#cccccc 100%);
    background: linear-gradient(to right, #f7f7f7 0%,#cccccc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#cccccc',GradientType=1 );
}
.pane-drop-on + .icon-plt .ui-draggable-dragging.toolbox .toolst-head span {
    width: 4px;
    height: calc(100% - 13px);
    border-style: none dotted none none;}
.pane-drop-on + .icon-plt .ui-draggable-dragging.toolpanel.toolbox {
    z-index: 123;
    padding-top:0px;
    padding-left:15px;
    width: calc(100%);}
aside.right .icon-plt{}
aside.right .icon-plt .toolpanel{
	background: #000;
    padding-left:0px;
    grid-template-rows: repeat(1, minmax(22px, min-content));
    grid-template-columns: repeat(auto-fill, 22px);
    grid-template-columns: repeat(auto-fit, 22px);
    grid-template-columns: repeat(auto-fit,minmax(22px, 1fr));
    grid-auto-rows: 22px;
    max-width: calc(22px * 25 + 15px);}
aside.right .icon-plt .toolpanel a {
    width:21px;
    height: 21px;}
aside.right .icon-plt  a i {
    font-size:.9rem;}
aside.right .icon-plt > li:last-child::after{
	display:none;}
.ctrl{
	position:relative;}
.ctrl .bt{
	display:block;
	width:30px;
	height:30px;
	border-radius:5px;
	border:solid 1px #555;}
.ctrl .bt i{
	font-size:1.2rem;}
.ctrl .bt > .flx{
	width:28px;
	height:28px;}
.ctrl .bt.active{
	background-color:#FFCC33;}
.ctrl .bt.active i{
	color:#000;}
.ctrl .bt:hover{
	background-color:rgba(0,0,0,0.05);}
.ctrl .bt.active:hover{
	background-color:#FFCC33 !important;}


.ctrl .view-f{}
.icon-plt .ctrl{
	padding:3px 3px 2px 3px;
	border-bottom:solid 1px #ccc;}
.icon-plt .ctrl.darkv{
	border-bottom:none;
	padding:3px;}
.ctrl input[type="text"]{
	color:#000;
	text-align:right;
	height:30px;
	width:32px;
	padding:2px;
	font-size: 0.9rem;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
.ctrl .searchAin input[type="text"]{
	text-align:left;}

.darkv.ctrl{
	color:#fff;
	background-color:#000;}
.darkv.ctrl input[type="text"]{
	background-color:rgba(255,255,255,0.6);
	color:#fff;
	border:none;}
.darkv.ctrl .bt:hover{
	background-color:rgba(255,255,255,0.3);}

.bf-chk-imp{
	position:absolute;}
.cont-footer .bf-chk-imp{
	left:50%;
	transform:translateX(-50%);
	bottom:40px;}

.arrck-scrl{
	width:100%;
	overflow:hidden;}
.arrck-scrl .arrck-scrl-clk{
	position:absolute;
	background-color:#fff;
	z-index:111;
	width: 30px;
    height:40px;
    right: 0px;
    top: 50%;
	margin-top:-15px;}
.arrck-scrl .arrck-scrl-clk.left{
	left:0px;
	right:auto;}
.arrck-scrl .arrck-scrl-clk:hover{
	background-color:#eee;}
.arrck-scrl .menust.nav{
	width:460px;
	transition: all 0.3s ease;}
.arrck-scrl .menust.nav-tabs .nav-item{
	width:115px;}
.arrck-scrl.active{
	padding-left:40px;}
.arrck-scrl.active .menust.nav{
	margin-left:-150px;}


/****/

/****/
.ARback{
    position: absolute;
    z-index: -1;
	width:100%;
	height:100%;
    min-height: 100vh;
 /** background-size:210px 136px;
  background-image:
    linear-gradient(to right, grey 1px, transparent 1px),
    linear-gradient(to bottom, grey 1px, transparent 1px); **/}
.ApprovalRoute{}
.ApprovalRoute-N-wrap {}
.ApprovalRoute-N{
    display: flex;
	position:relative;
	border-left: solid 6px #0CF;}
.ApprovalRoute-N1{
	margin-top:-78px;
    padding-bottom: 78px;}
.ApprovalRoute-N1 + .ApprovalRoute-N2{
	margin-top:-78px;
    padding-bottom: 78px;}
.ApprovalRoute-N2 + .ApprovalRoute-N2{
	margin-top:-78px;
    padding-bottom: 78px;}
.ApprovalRoute-N2.hline{
	margin-top:-156px;
    padding-bottom:156px;}
.ApprovalRoute-N1.hline{
    padding-bottom:156px;}
.ARfin{
	padding-bottom:0;}
.ARp68{
	padding-bottom:78px;}
.ARp136{
	padding-bottom:156px;}
.ApprovalRoute-N1:before,
.ApprovalRoute-N2:last-child:after{
	content:"";
	position:absolute;
    left: -8px;
    width: 13px;
    height: calc(50% - 3px);
    background-color: #f9f8f7;}
.popW .ApprovalRoute-N1:before,
.popW .ApprovalRoute-N2:last-child:after{
	background-color:#fff;/*bg color */}
.ApprovalRoute-N1:before{
    top: 0;
    height:75px;}
.ApprovalRoute-N2:last-child:after{
	height:100%;
	top:78px;}
.ApprovalRoute-N1 > .ARnode,
.ApprovalRoute-N2 > .ARnode{
	height:auto;
    position: unset;}
.ApprovalRoute-N1 > .ARnode .line,
.ApprovalRoute-N2 > .ARnode .line{
    margin-top: 0;
	top:30px;
    left:0px;
	max-width:150px;}
.ApprovalRoute-N2 > .ARnode .line:nth-child(2){
	top:40px;}
.ApprovalRoute-N > .txt{
	font-size:0.7rem;
    position: absolute;
    left:-59px;
    top:40px;
    position: absolute;
    width: 113px;
    z-index: 12;
	color:#B15FE2;
	background-color:#fff;
    border:solid 1px #B15FE2;
    line-height: 1;
    text-align: center;}
.ApprovalRoute-N > .txt + .AR{
	margin-left:-6px;}
.AR .txt{
	width:70px;
    font-size: 0.7rem;}
.ARitem{
    position: relative;
	width:70px;
	z-index:1;
	display: flex;
    flex-direction: column;
    align-items: center;}
.nodrecst .ARnode .AR-aN > .btn{
    transform: rotate(45deg);}
.nodrecst .ARnode .AR-aN > .btn i{
    transform: rotate(-45deg);}
.nodrecst .ARitem{width: 140px;}
.nodrecst .ARitem > .ARitem-icon{width: 140px;}
.nodrecst .AR-slide-wrap.ARitem{width:auto;}
.nodrecst .AR-slide-wrap.ARitem > .ARitem-icon{width:auto;}
.flatst{}
.flatst .ApprovalRoute-N1{
	margin-top: 0;}
.flatst .ApprovalRoute-N2 + .ApprovalRoute-N2{
	padding-bottom: 0;}
.flatst .ApprovalRoute-N .AR.aU .AR-set .ARnode:first-child{display: block;}
.flatst .ApprovalRoute-N .AR.aU + .AR.aU .AR-set .ARnode:first-child{display:none;}
.flatst .AR-slide-wrap.ARitem > .ARitem-icon{
    height: 120px;
    margin-top:15px;}
.slider-flow.AR-slide{padding-left: 30px;}
.nodrecst.flatst .AR-slide .ARnode{
	width: 50px;
	height: 50px;
    margin-top:calc(22px + 5px);}
.nodrecst.flatst .ARnode .AR-aN + .txt{
    top: calc(50% - 55px);}
.nodrecst.flatst .AR-slide .ARitem{
	width:50px;}
.nodrecst.flatst .AR-slide .ARitem > .ARitem-icon{
	width: 50px;
	height: 50px;}
.nodrecst.flatst .AR-slide .ARitem > .ARitem-icon .icon-user2{
    font-size: 1.2rem;
    margin-top: -15px;}
.nodrecst.flatst .AR-slide .ARitem > .ARitem-icon .icon-group1{
    font-size:2.2rem;
    margin-top: -15px;}
.nodrecst.flatst .AR-slide .ARitem > .ARitem-icon > .txt{
	font-size: 0.6rem;
    height: 18px;
    line-height: 18px;}
.nodrecst.flatst .AR-slide .ARitem > .txt{
	font-size: 0.6rem;
	height: 22px;}
.nodrecst.flatst .AR-slide .ARitem > .txt .block.elli {
    line-height: 1.1;}
.nodrecst.flatst .AR-slide .ARitem > .txt .block {height: 11px;}
.nodrecst.flatst .AR-slide .ARitem > .btn.bg-red{top: 53px;}
.nodrecst.flatst .AR-slide .ARitem > .btn.bg-red i{
    margin-top:0px;
    font-size: 1rem;}
.AR.smini .ARitem{
	width: 30px;
    height: 30px;}
.AR.smini .ARitem-icon{
	width: 30px;
    height: 30px;
    margin-top:0px;}
.AR.smini .ARitem-icon i{
    margin-top: 0px;
    font-size:1rem;}
.AR.smini .ARnode {
    width:15px;
    height: 30px;
    margin-top:0px;}
.AR.smini .ARnode.line{
    height: 3px;}
.AR-slide .AR.aU .AR-set .ARnode:first-child {
    display: none !important;}
.AR-slide .AR .AR-set .ARnode:last-child .line{
	width: 100% !important;}
.AR-slide .AR:last-child .AR-set .ARnode:last-child .line{
	width:0% !important;}
.AR-slide.FinContinue .AR:last-child .AR-set .ARnode:last-child .line{
    transition: .5s;
	width:0%  !important;}
.AR-slide.FinContinue .AR:last-child .AR-set .ARitem.active + .ARnode:last-child .line,
.AR-slide.FinContinue .AR:last-child .AR-set .ARnode:last-child .line.active-l{
	width:100%  !important;}
.AR-slide .vgroup .AR:last-child .AR-set .ARnode:last-child .line,
.AR-slide .vgroup.AR:last-child .AR-set .ARnode:last-child .line{
	width:100% !important;}
.AR-slide .vgroup.AR:last-child .start.AR-set .ARnode:last-child{
	width: 40px;}
.AR-slide .vgroup.AR:last-child .start.AR-set .ARnode:last-child .line{
	width:20px !important;}
.AR-slide .vgroup.AR:last-child .AR-set.start .ARitem + .ARnode:after {
    left: calc(100% - 22px);}

.AR{position: relative;}
.AR > .label{
	text-align: center;
	color:#fff;
    position: absolute;
	top:-30px;
    left: -5px;
    width: 100px;
    margin-left: -10px;
    font-size: .75rem;
    padding: 3px;}
.slider-flow.wlabel  .AR{margin-top: 40px;}
.AR-slide .AR.vgroup .AR-set{position: relative;}
.AR-slide .AR.vgroup .AR-set.start:before,
.AR-slide .AR.vgroup .AR-set.start .ARitem:after{
	content: "";
    position: absolute;
    top: 0px;
    width: 6px;
    height: 65px;
    background-color: #f9f8f7;
    z-index: 1;}
.AR-slide .AR.vgroup .AR-set.start:before{
    left: -24px;}
.AR-slide .AR.vgroup .AR-set.start .ARitem:after{
    left: calc(100% + 24px - 6px);}

.AR-slide .AR.vgroup .AR-set .ARitem + .ARnode:before,
.AR-slide .AR.vgroup .AR-set .ARitem + .ARnode:after{
	content: "";
    position: absolute;
    width:6px;
	height: 130px;
    background-color:#0CF;}
.AR-slide .AR.vgroup .AR-set .ARitem + .ARnode:before{
    left:calc(-70px - 24px);}
.AR-slide .AR.vgroup .AR-set .ARitem + .ARnode:after{
    left:calc(100% - 6px);}
.AR-slide .AR.vgroup .AR-set.start .ARitem + .ARnode:after{
    left:calc(100% - 62px);}
.AR-slide .AR.vgroup .AR-set:not(.start) {
	margin-left: -24px;}
.AR-slide .AR.vgroup .AR-set:not(.start) .ARitem{height:100px;}
.AR-slide .AR.vgroup .AR-set:not(.start) .ARitem > .ARitem-icon{margin-top:10px;}
.AR-slide .AR.vgroup .AR-set:not(.start) .ARnode{width: 24px; margin-top:6px;}
.AR-slide .AR.vgroup .AR-set:not(.start) .ARnode:first-child{
	display: block !important;}

.AR-slide .AR.vgroup .AR-set:last-child:before,
.AR-slide .AR.vgroup .AR-set:last-child .ARitem:after{
	content: "";
    position: absolute;
    width: 6px;
    height: 100%;
    background-color: #f9f8f7;
    z-index: 2;}
.AR-slide .AR.vgroup .AR-set:last-child:before{
    left: calc(0px);
    top: calc(100% - 56px);}
.AR-slide .AR.vgroup .AR-set:last-child .ARitem:after{
    left: calc(100% + 24px - 6px);
	top:44px;}
.simplelist.onlyicon .ARitem{
    height:110px;}
.ARitem.active{
	z-index:13;}
.ARitem .dropboxR{
    top: 95px;
    left:0px;
    width:240px;
    padding:5px;}
.ARitem > .btn.bg-red{
    position: absolute;
	top:83px;
    right: -10px;
	width:27px;
	height:27px;}
.ARitem > .txt{
	text-align: center;
	width:110px;
	height:28px;
	background-color:transparent;
	z-index:12;}
.ARitem > .ARitem-icon + .txt{
	transform: scale(.85);
    height: 24px;}
.ARitem > .txt.l1{
	height:17px;}
.ARitem > .txt .block{
	height:14px;}
.ARitem > .txt .block.elli{
	line-height:1.4;}
.ARitem > .txt.-sl .block{
	height:28px;
	line-height: 28px;}

.ARitem > .txt .label{
	text-align:center;
	padding:0 2px;
	width:80px;
	border-radius:3px;
	margin:0 auto;
	display:block;}
.ARitem > .ARitem-icon{
	margin-top:40px;}
.ARitem > .txt + .ARitem-icon{
	margin-top:5px;}
.ARitem.active:hover > .txt{
	width:140px;}
.simplelist	.ARitem.active:hover > .txt{
	width:100px;}
.ARitem-icon{
	width:70px;
	height:70px;
    border-radius: 80px;
    overflow: hidden;
	color:#fff;
	position:relative;}
.nodrecst .ARitem-icon.box{
    border-radius:8px;
	font-size: 0.7rem;
	color:#000;}
.ARitem-icon:hover{
	background-color: aliceblue;
	box-shadow: rgb(9 9 9 / 25%) 0px 4px 8px -2px,
		rgb(9 9 9 / 10%) 0px 0px 2px 1px,
		rgb(3 248 252 / 50%) 0px 0px 6px 1px;}
.nodrecst .ARitem-icon.box.start{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e1ffff+0,cefffe+100 */
background: #e1ffff; /* Old browsers */
background: -moz-linear-gradient(top,  #e1ffff 0%, #cefffe 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #e1ffff 0%,#cefffe 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #e1ffff 0%,#cefffe 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1ffff', endColorstr='#cefffe',GradientType=0 ); /* IE6-9 */}

.nodrecst .ARitem-icon.box.start{
	text-shadow: 1px 1px 0px rgba(255,255,255,0.4);
	color: #0CF;
    font-size:.9rem;
    font-weight: bold;}
.nodrecst .ARitem-icon.box.start i{
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 5px;}
.nodrecst .ARitem-icon.box .title{
    border-radius:8px 8px 0 0;
    padding: 5px;}

.nodrecst .ARitem-icon.box .info{
    border-radius:0 0 8px 8px;
    padding: 5px;}
.ARitem-icon img{
	width:100%;}
.simplelist .ARitem.active .ARitem-icon{
	box-shadow:none;}
.ARitem-icon > .flx{}
.ARitem-icon i{
    margin-top: -20px;
    display: block;
	font-size:2rem;}
.ARitem-icon i.icon-group1{
	font-size:3rem;}
.ARitem .del{
	display:none;
    position: absolute;
    top:25px;
    right:-10px;
	border-radius:0;
    padding:3px;
	z-index:123;}
.nodrecst .ARitem .del{
    top:20px;
    right:-8px;}
.nodrecst .ARitem.AR-slide-wrap .del{
    top:-5px;
    right:-5px;}
.fixnohv .ARitem .del{display: none !important;}
.ARitem i.icon-x{
    font-size: 0.9rem;
	color:#bbb;}
.ARitem:hover .del{
	display:flex;
    justify-content: center;
    align-items: center;}
.ARitem .del:hover{
    background-color:rgba(0,0,0,0.2);}
.ARitem .del:hover i.icon-x{
	color:#fff;}
.ARitem-icon > .txt{
	width:100%;
	font-size:0.65rem;
	text-align:center;
	background-color:rgba(0,0,0,0.4);
	border-radius:0 0 10px 10px;
	height:22px;
    line-height: 22px;
    position: absolute;
    bottom: 0;}
.ARitem-icon .txt.bg-red{
	background-color: rgba(228,39,44,0.7) !important;}
.ARitem-icon .txt.bg-orange{
	background-color: rgba(255, 135, 0,0.7) !important;}
.ARitem-icon .txt.bg-grn{
	background-color: rgba(37, 192, 53,0.7) !important;}
.ARitem-icon .txt.bg-blue{
	background-color: rgba(0, 156, 240,0.7) !important;}
.ARitem-icon .txt.bg-lblue{
	background-color: rgba(134, 228, 247,0.7) !important;}
.ARnode{
	width:80px;
	height:70px;
	margin-top:33px;
	position:relative;}
.nodrecst .ARnode{
	margin-top:40px;}
@media screen and (max-width:771px){
.simplelist .ARnode{
	width:40px;}

}
.AR.aU .AR-set .ARnode:first-child{
	display:none;}
.ApprovalRoute-N-wrap .ApprovalRoute-N > .txt + .AR.aU .AR-set .ARnode:first-child,
.andor-branch.node + .AR.aU .AR-set .ARnode:first-child,
.andor-branch.AR.aU .AR-set .ARnode:first-child{
	display:block;}
.AR:last-child .AR-set .ARnode:last-child .line{
    transition: .5s;
	width:0px;}
.AR:last-child .AR-set .ARnode:last-child:hover .line,
.AR:last-child .AR-set .ARnode:last-child.active .line{
	width:100%;}
.simplelist .AR:last-child .AR-set .ARnode:last-child .line{
	display:none;}
.slide.simplelist .AR:last-child .AR-set .ARnode:last-child .line{
	display:block;
    transition:0s;
	width:100%;}
.slide.simplelist:last-child .AR:last-child .AR-set .ARnode:last-child .line{
	display:none;}
/*.AR:last-child .AR-set .ARnode:last-child:hover .AR-aU  > .btn,
.AR:last-child .AR-set .ARnode:last-child .AR-aU.active  > .btn{
    left:auto;
    right: calc(-16px - 3px);}	*/
.ARnode p > .btn{
	position:absolute;
    top: 50%;
    left: 50%;
    margin-top: -16px;
    margin-left: -16px;
	width:32px;
	height:32px;
    z-index: 2;}
.AR.aN .ARnode .AR-aN > .btn{
    left:auto;
    right: calc(-16px - 3px);}
.ARnode .AR-aUN{
	position:absolute;
    z-index:15;
    width:150px;
	border:solid 2px #009CF0;
	background-color: #fff;
	border-radius:5px;
    top: calc(50% + 17px);
    left: calc(50% - 17px);}
.AR-aN,
.AR-aU,
.AR-aUN{
	display:none;}
.AR.aU .ARnode:hover .AR-aU,
.AR-aU.active,
.AR-aUN.active,
.AR.aN .ARnode:last-child .AR-aN,
.AR.aN .ARnode:first-child:hover .AR-aU{
	display:block;}
.fixnohv .AR-aU{display: none !important;}
.ApprovalRoute-N1 > .ARnode p > .btn{
    left: 45px;
    top: 33px;}
.ApprovalRoute-N2 > .ARnode p > .btn{
    left: 46px;
    top: 43px;}
.ARnode .AR-aN + .txt{
	display:none;
    position: absolute;
    right: calc(-56px - 3px);
    top: calc(50% - 32px - 18px);
    width: 113px;
    font-weight: bold;
    z-index: 12;
    padding:2px 2px 1px 2px;
    color: #fff;
    line-height: 1;
    text-align: center;}
.AR.aN .ARnode:last-child .AR-aN + .txt{
	display:block;}
.ARnode .AR-aUN li{
	cursor:pointer;
	padding:3px;
	width:100%;}
.ARnode .AR-aUN li a{
	color:#000;}
.ARnode .AR-aUN li a:hover{
	color:#fff;}
.ARnode .AR-aUN li:hover{
	background-color:#009CF0;
	color:#fff;}
.ARnode .AR-aUN li i{
	margin-right:5px;}
.ARnode .AR-aUN .AR-aNS.dropboxR{
	display:block;
	width: 240px;
    padding: 5px;
	max-height:none;
    top:0px;
    left: 0;}
.ARnode .AR-aUN .AR-aNS.dropboxR:hover{
	background-color:#fff;
	color:#000;}
.ARnode .line{
	position:absolute;
	height:6px;
	width:100%;
	top:50%;
	left:0px;
    transform: translate(0%, -50%);
	background-color:#0CF;}
.ApprovalRoute .AR:not(.andor-branch):last-child .ARitem:hover + .ARnode .btn,
.ApprovalRoute .AR:not(.andor-branch):last-child .ARnode.active .btn,
.ApprovalRoute .AR.andor-branch:not(.node) .AR-set:first-child .ARitem:hover + .ARnode .btn,
.ApprovalRoute .AR.andor-branch:not(.node) .AR-set:first-child .ARnode.active .btn{
	display:flex;}
.list-i.box .ApprovalRoute{
	padding-left:20px;}
.andor{
	position: absolute;
    width: 100%;
    height: 20px;
    line-height: 20px;
    text-align: center;
    left: 50%;
    top: calc(50% + 5px);
    left: 50%;
    transform: translateX(-50%);
    font-weight: bold;
    border-radius: 5px;}
.andor.and,
.label.and{
	color:#fff;
	background-color:#FF3333;}
.andor.or,
.label.or{
	color:#fff;
	background-color:#1152B3;}
.andor-branch .AR-set{
	border-left: solid 6px #0CF;
    border-right: solid 6px #0CF;}
.andor-branch .AR-set:first-child .ARitem:before,
.andor-branch .AR-set:first-child .ARitem:after,
.andor-branch .AR-set:last-child .ARitem:before,
.andor-branch .AR-set:last-child .ARitem:after{
	content: "";
    position: absolute;
    background-color: #ededed;
    width:13px;
    height: 68px;
    left: -86px;
    top:68px;}
.andor-branch .AR-set:first-child .ARitem:before,
.andor-branch .AR-set:first-child .ARitem:after{
	top:-6px;}
.andor-branch .AR-set:first-child .ARitem:after,
.andor-branch .AR-set:last-child .ARitem:after{
    left: calc(80px + 70px + 0px);}
.andor-branch.AR:last-child .AR-set .ARnode:last-child .line{
	width:100%;}
.ARitem-active-back{}
.ARitem-active-back .ARback{
	z-index:2;}
.ARitem-active-back .ARback:after{
	content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.6);
	z-index:2;}
.ARitem-active-back .ARitem{
	z-index:auto;}
.ARitem-active-back .ApprovalRoute-N > .txt,
.ARitem-active-back .ARnode .AR-aN + .txt,
.ARitem-active-back .main-scrn-tool,
.ARitem-active-back .ARitem .txt{
	z-index:1;}
.ARitem-active-back .ARitem.active-d .ARitem-icon,
.ARitem-active-back .btn.ARitem-active{
	z-index:3;}

/* added by mrsako */
.AR:last-child .AR-set .ARnode:last-child:hover .line,
.AR:last-child .AR-set .ARnode:last-child.active .line{
	width:50% !important;}
/* added by mrsako */

.approval_route{}/*format-prv.*/
.approval_route{
	width:1587px;}
.approval_route li{
	font-size:0.7rem;
	position:relative;
	text-align:center;
	width:70px;
    margin-right:40px;}
.approval_route > li:not(.branch){
	height:110px;}
.approval_route li:after{
    z-index: 13;
    content: "";
    display: block;
    position: absolute;
    top:60px;
    left:70px;
    right: -40px;
    height:2px;
    background-color: #000;}
.approval_route li .title{
	font-size:0.7rem;
	font-weight:normal;
	height:26px;
	margin-bottom: 5px;}
.approval_route li .pic-box .pic{
	margin:5px auto;}
.approval_route li i{
	font-size:1.1rem;
	position:absolute;
	bottom:10px;
	right:-5px;}
.approval_route li.branch{
	width:120px;}
.approval_route li.branch li{
	width:100%;
	height:80px;
	border-left:solid 2px #000;
	border-right:solid 2px #000;
    margin-right: 0px;}
.approval_route li.branch li:after{
    left:0px;
    right:0px;
	top:29px;}
.approval_route li.branch li:first-child:before,
.approval_route li.branch li:last-child:before{
    z-index: 15;
	position:absolute;
    left:-2px;
	content:"";
	background-color:#fff;
    width: 120px;}
.approval_route li.branch li:first-child:before{
    top:-5px;
    height: 34px;}
.approval_route li.branch li:last-child:before{
    bottom:0px;
    height:49px;}
.approval_route li.branch li .branch-c{
	width:70px;
	height:78px;
	position:absolute;
	background-color:#fff;
    z-index: 16;
    left: 23px;}
.approval_route > li:last-child:after{
	display:none;}
.approval_route > li.branch:last-child{
	width:90px;}

.approval_route > li .tag{
    position: absolute;
    z-index: 20;
    top: 20px;
    left: -20px;
    width: 36px;
    min-width: inherit;
    font-size: 0.6rem;
    line-height: 18px;
    height: auto;}
.vtst{}
.vtst .approval_route{
	width:auto;}
.vtst .approval_route > li{
	margin-bottom: 55px;}
.vtst .approval_route > li:not(.branch){
	width:auto;
	height:auto;
	text-align:left;
	margin-right:0;}
.vtst .approval_route li:after{
	bottom:5px;
    left:85px;
    height:40px;
    width: 2px;}
.vtst .approval_route li.branch{
	width:auto;}
.vtst .approval_route li.branch .flx .flx-o{
	width:100px;}
.vtst .approval_route li.branch:after{
	top: 105%;}
.vtst .approval_route > li.branch ul{
	margin-left: 25px;
	display:flex;}
.vtst .approval_route li .pic-box .pic{
	margin:0 auto;}
.vtst .approval_route li.branch li {
    width:120px;
	min-width:120px;
    height:120px;
    border-bottom: solid 2px #000;
    border-top: solid 2px #000;
	margin-right:0;}
.vtst .approval_route li.branch li .branch-c{
    width: 80px;
    height: 80px;
    left: -40px;
    top: 20px;
    padding: 5px;}
.vtst .approval_route li.branch li:first-child:before,
.vtst .approval_route li.branch li:last-child:before{
	display:none;}
.vtst .approval_route li.branch li:last-child:after{
	width: 50px;
    background: #fff;
    width: 120px;
    height: 120px;
    top: -2px;
    left: 0;}
.vtst .approval_route li.branch li{
	border-left:solid 1px #000;
	border-right:solid 1px #000;}
.vtst .approval_route li.branch li:first-child{
	border-left:solid 2px #000;}
.vtst .approval_route > li .tag	{
	top: -10px;
    left: 70px;}



.list-chk :checked + .list-chk-i .bg-gray,
.list-chk .hover:hover .bg-gray:not(.tag):not(.btn){
	background-color:transparent !important;}
.list-chk input[type="checkbox"]:not(.checkradio input[type="checkbox"]){
	width: 100%;
    height: 100%;
	position: absolute;
	top:0;
	left:0;
    z-index: 11;}
.list-chk .list-chk-i:before {
  background-color: white;
  color: white;
  content: " ";
  display: block;
  border-radius: 50%;
  position: absolute;
  top: -5px;
  right: -5px;
  width:33px;
  height:33px;
  text-align: center;
  line-height:33px;
  transition-duration: 0.4s;
  transform: scale(0);}
.list-chk img {
  transition-duration: 0.2s;}
.list-chk :checked + .list-chk-i img {
  transform: scale(0.95);}
.list-chk .list-chk-i{
	border:solid 2px transparent;}
.list-chk :checked + .list-chk-i{
	border:solid 2px #09F;}
.list-chk .box.active{
	background-color:#bbb;
	border: solid 1px #1A7BD5;}
.list-chk-file-inp > .icon-x{
	font-size:1.6rem;
	position:absolute;
	top:2px;
	right:2px;
	z-index:123;}
.file-drop-area .list-chk-file-inp{
	z-index:123;}
.fwd-set{
    border-top: solid 1px #ccc;
    font-size: 0.6rem;
    text-align: center;
    padding: 10px 0;
    background: #eee;}
.fwd-set-btn .btnst{
	width:60px;
	height:60px;
	border-radius:10px;
	margin-bottom:5px;}
.fwd-set-btn .btnst img{
	width:40px;}
.b-mail .btnst{/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b2e1ff+0,66b6fc+100;Blue+3D+%236 */
background: rgb(178,225,255); /* Old browsers */
background: -moz-linear-gradient(45deg,  rgba(178,225,255,1) 0%, rgba(102,182,252,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg,  rgba(178,225,255,1) 0%,rgba(102,182,252,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg,  rgba(178,225,255,1) 0%,rgba(102,182,252,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2e1ff', endColorstr='#66b6fc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.b-line .btnst{/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#8fc800+0,2fbc00+100 */
background: rgb(143,200,0); /* Old browsers */
background: -moz-linear-gradient(45deg,  rgba(143,200,0,1) 0%, rgba(47,188,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg,  rgba(143,200,0,1) 0%,rgba(47,188,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg,  rgba(143,200,0,1) 0%,rgba(47,188,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc800', endColorstr='#2fbc00',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.b-fb .btnst{/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#258dc8+0,2260b7+100 */
background: rgb(37,141,200); /* Old browsers */
background: -moz-linear-gradient(45deg,  rgba(37,141,200,1) 0%, rgba(34,96,183,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg,  rgba(37,141,200,1) 0%,rgba(34,96,183,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg,  rgba(37,141,200,1) 0%,rgba(34,96,183,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#258dc8', endColorstr='#2260b7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.b-slack .btnst{/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fb83fa+0,e93cec+100;Pink+3D+%232 */
background: rgb(251,131,250); /* Old browsers */
background: -moz-linear-gradient(45deg,  rgba(251,131,250,1) 0%, rgba(233,60,236,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg,  rgba(251,131,250,1) 0%,rgba(233,60,236,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg,  rgba(251,131,250,1) 0%,rgba(233,60,236,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb83fa', endColorstr='#e93cec',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.b-gd .btnst{/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffaf4b+0,ff8c00+100 */
background: rgb(255,175,75); /* Old browsers */
background: -moz-linear-gradient(45deg,  rgba(255,175,75,1) 0%, rgba(255,140,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg,  rgba(255,175,75,1) 0%,rgba(255,140,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg,  rgba(255,175,75,1) 0%,rgba(255,140,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4b', endColorstr='#ff8c00',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.flxclm.prv{
	display:none;}
.prv .pic{width: 100%;}
.prv .pic .img{
	height:calc(100vh - 400px);}
.pp-send1R .flxclm.prv{
	display:flex;}
.pp-send1R .w230st .pic{
	width:110px;}
.pp-send1R .w230st .pic .img{
	height:110px;}
.pp-send1R .list-chk .list-chk-i:before{
    right: -8px;
    width: 23px;
    height: 23px;
    line-height: 23px;}
.pp-send1R .list-chk :checked + .list-chk-i:before{
	font-size:1rem !important;}
/*/format-app-d.html*/
@media screen and (max-width:771px){
.flow-spe{
	margin-bottom:20px;}
.flow-spe colgroup{
	display:none;}
.flow-spe tr th:not(:nth-child(2)),
.flow-spe tr td:not(:nth-child(2)){
	display:none;}
.flow-spe tr td:nth-child(2){
    width: 100%;
    display: block;}
table.def.flow-spe,
table.def.flow-spe th,
table.def.flow-spe td{
	border:none;}
table.def.flow-spe th{
	padding:0 0 10px 0;
	background-color: transparent;
	font-size:1rem;
	text-align: left;}
}

.flow-line td{
	position:relative;}
.flow-line td .fw-line{
	position: absolute;
    background:#009CF0;
    width:6px;
    height: 105%;
    display: block;
    top:50%;	}
.flow-line tr:last-child td .fw-line{
    top: 0;
    height: calc(50%);}
.flow-line tr:last-child td .fw-line:after{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    bottom:-15px;
    left:-7px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top:15px solid #009CF0;}


.pageList > li .hoverR.pa_topright5{
    top: 0px !important;
    right: 0px !important;
    background: rgba(255,255,255,.5);
    padding: 3px;
    z-index: 123;
    width: 20px;
    height: 20px;}
.pageList > li.on_hover .hoverR.pa_topright5{
    display: flex;
    align-items: center;
    justify-content: center;}
.pageList > li .hoverR.pa_topright5 .icon-x{
	font-size: 1.4rem !important;}
.page-add{
	opacity: 0;
    height: 25px;
	position:relative;}
.active > .page-add,
.page-add.hover:hover{
	opacity:1;}
.page-add hr{
	background-color:#fff;
	position:absolute;
	top:50%;
	left:0;
	width:100%;
	height:1px;}
.page-add{
	border-left:solid 1px #fff;
	border-right:solid 1px #fff;  }
.page-add.hover:hover,
.page-add:hover{
	background-color:#666 !important;}
.page-add:hover hr{
	display:block;}
.page-add.hover:hover{
	background-color:transparent;}
.page-add .hoverR{
	z-index:2;}
.page-add.view{
    height:10px;}
.page-add.view hr{
	display:block;
	background-color:#ccc;}
.page-add.view.hover:hover{
	background-color:#eee !important;}
.page-add .btn{
	width:23px;
	height:23px;}
.page-add .btn i{
	font-size:0.85rem;}
/*https://staff.builmendx.com/~lee/design/docuflow/request.html */
.dblock.nrr2-right .postBox{left:200px;bottom:20px;}
.dblock.nrr2-right.left-ocR .postBox{
    -webkit-transition: ease .2s;
    transition: ease .2s;
	left:20px;}
.postBox.flexmove{
    width:300px;
    font-size: 0.8rem;
	z-index: 123;}
.postBox.flexmove .inscrl{
    height: calc(100% - 30px);}

.postChk{
	padding:7px;
	margin-bottom: 7px;
	border:solid 1px #FFF9C6;
    background-color:#FFF9C6;}
.postChk:hover{
    background-color: #FFF9C6;}
[class~='postChk']:last-of-type {
	margin-bottom:0px;}
.postcor-p,
.postcor-p:hover{
	border:solid 1px #FFE2ED;
    background-color:#FFE2ED;}
.postcor-g,
.postcor-g:hover{
	border:solid 1px #DCFFDD;
    background-color:#DCFFDD;}
.postcor-b,
.postcor-b:hover{
	border:solid 1px #DCF9FF;
    background-color: #DCF9FF;}
.postcor-v,
.postcor-v:hover{
	border:solid 1px #eac7ff;
    background-color: #eac7ff;}
.postcor-b1,
.postcor-b1:hover{
	border:solid 1px #999;
    background-color: #999;}
.postcor-b2,
.postcor-b2:hover{
	border:solid 1px #ccc;
    background-color: #ccc;}
.postChk:hover{
	opacity: 0.8;}
.postChk.onChk{
	color:#ccc;
	background-color: #fff;
	border:solid 1px #ddd;}
.postChk.onChk img{opacity: 0.4;}
.postView.flexmove{
	border:none;
	background-color: unset;
    width:320px;
    height:82px;}
.postView .post-close {
	z-index: 123;
    display: none;
    position: absolute;
    top:3px;
    right: 5px;}
.postView:hover .post-close{
	display: block;}
.postView .postChk{
    width:100%;
    height:100%;}
.postView .postChk:hover{opacity: 1;}
.postView .txt{
    padding-right: 10px;
	position: relative;
    word-break: break-all;
    line-height: 1.3;
    display: block;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;}
.sdwR:after,
.sdwL:after{
	z-index: -1;
    position: absolute;
    content: "";
    min-width: 250px;
    min-height: 50px;
    background: #777;
    box-shadow: 0 0.8em 0.6em #666;
	transform: rotate(-2deg);
    left: 0.5em;
    bottom: 0.7em;}
.sdwL:after{
    transform: rotate(2deg);
    right: 0.5em;}
/*  unnecessary CLASS post-label ~~~ */
.post-label{
	font-size:1.2rem;
    position: absolute;
    z-index: 123;
	top:10px;
	left:10px;}
.post-label.test{
	top:160px;
	left:180px;}
.post-label.postNaddR{
	top:30px;
	left:30px;}
.post-label .txt{
  position: relative;
  display:block;
  text-align: center;
  width:320px;
  height:90px;
  min-width:320px;
  min-height:90px;
  background-color: #fff1a3;}
.post-label-clr{
  background-color: #fff1a3;
  color: #F8E57C;}
.post-label.st02 .txt{
	background-color:#FDB9E3;}
.post-label .txt:hover .post-close{
	display:block;}
.post-label .txt .post-close{
	display:none;
	position:absolute;
	top:3px;
	right:5px;}
.post-label textarea {
  border:0;
  padding:5px;
  background: transparent;
  min-width:320px;
  min-height:90px;}
.Seffect {
  position: relative;}
.Seffect:before,
.Seffect:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 1em;
  min-width:250px;
  min-height:50px;
  background: #777;
  box-shadow: 0 0.8em 0.6em #777;}
.Seffect:before {
  transform: rotate(-3deg);
  left: 0.5em;
  bottom: 0.5em;}
.Seffect:after {
  transform: rotate(5deg);
  right: 0.5em;}



.resizable .resizers{
  width: 100%;
  height: 100%;}
.resizable .resizers .resizer{
  width: 10px;
  height: 10px;
  position: absolute;
  display:block;}
.resizable .resizers .resizer.top-left {
  left: -5px;
  top: -5px;
  cursor: nwse-resize; /*resizer cursor*/
}
.resizable .resizers .resizer.top-right {
  right: -5px;
  top: -5px;
  cursor: nesw-resize;
}
.resizable .resizers .resizer.bottom-left {
  left: -5px;
  bottom: -5px;
  cursor: nesw-resize;
}
.resizable .resizers .resizer.bottom-right {
  right: -5px;
  bottom: -5px;
  cursor: nwse-resize;
}


.kintai-wrap{max-width: 1000px; margin: 0 auto;}
.kintai-time-chk{
	padding: 30px 15px;
	text-align: center;}
.kintai-time-chk .date{
	font-size:2rem;}
.kintai-time-chk .msg{
	font-weight: bold;
	font-size:3rem;
	margin:20px 0 30px 0;}
.kintai-time-chk .mem-div{
  font-size:2rem;}
.kintai-time-chk .btnA{flex-wrap: nowrap;}
.kintai-time-chk.-menulink .btnA{flex-wrap: wrap;}
.kintai-time-chk.-menulink .btnA .btn i{margin-right: 10px;}
.kintai-time-chk .btnA .btn{
	font-size:1.5rem;
    padding: 13px 30px 10px 30px; }
@media screen and (max-width:440px){
.kintai-time-chk .btnA .btn{
	font-size:1.2rem;
    padding: 13px 20px 10px 20px; }
.kintai-time-chk.-menulink{padding: 0;}
.kintai-time-chk.-menulink .btnA{
	display: grid;
	gap:10px;
	grid-template-columns: repeat(3,1fr);}
.kintai-time-chk.-menulink .btnA li .btn{
	flex-direction: column;
    border-radius: 8px;
	width: 100% !important;
	margin:0 !important;}
.kintai-time-chk.-menulink .btnA .btn i{font-size: 3rem; margin-bottom: 10px; margin-right: 0;}
.kintai-time-chk.-menulink .btnA .btn i + span{
	display: flex;
    align-items: center;
    height: 40px;
    font-size: 1.1rem;}
}
#clock {
  font-family:Arial, Helvetica, sans-serif;
  color:#000;
  font-size:98px;
  text-align: center;}
@media screen and (max-width:540px){
#clock {
  font-size:68px;}

}
@media screen and (max-width:440px){
.kintai-time-chk .date {
    font-size: 1.5rem;}
.kintai-time-chk .msg {
    font-size:2rem;
    margin: 20px 0 20px 0;}
.kintai-time-chk .mem-div {
    font-size:1.2rem;}
}
.attendanceMngA{
	width:680px;
	margin:0 auto;}
.popW .popW_body .attendanceMngA .btnA{
	margin-top:15px;
    justify-content:space-between;}
.attendanceMngA .btnA .btn{
	margin:0;
	width:24%;}
@media screen and (max-width:540px){
.attendanceMngA .btnA .btn{
	font-size:0.7rem;
	padding:9px 7px;}

}




@media screen and (max-width:771px){
.mb-Nst01 .topmenu.slidest + .container .dblock > aside{
	top:45px !important;
	border-bottom: solid 1px #ddd;}
.mb-Nst01 .topmenu-dropdown-wrap + .container .mhead + main > .cont-inner,
.mb-Nst01 .topmenu + .container .mhead + main > .cont-inner{
	padding-top:13px;}
.mb-Nst01 .topmenu.m-slide + .container .mhead + main > .cont-inner{
	padding-top:56px;}
.mb-Nst01 .dblock > aside{
	height:38px;}
.mb-Nst01 aside .defmenu{
	font-size:13px;
	display:flex;}
.mb-Nst01 aside .defmenu li > a{
	border-bottom:none;}
.mb-Nst01 aside .defmenu a{
    line-height:38px;
    display: block;
    height: 38px;
	padding:0px 15px 0px 15px;}
.mb-Nst01 aside .defmenu{
	width:calc( (14px * 6) +  (14px * 6) +  (14px * 4) +  (14px * 4) +  (14px * 6) +  (14px * 4) +  (14px * 2) +  (14px * 5) +  (14px * 3) + (30px * 9));}
.mb-Nst01 aside .defmenu.msi-client{
	width:calc( (14px * 4) +  (14px * 4) +  (14px * 4) +  (14px * 4) + (30px * 4));}
.mb-Nst01 aside .scrolla{
	height:auto;}
.mb-Nst01 .dblock > aside .scrolla .simplebar-track.horizontal{
	display:block;}
.mb-Nst02 aside{
	display:none;}
}
.steps{}
.steps > li{
    flex: 1;}
.steps > li .step-in {
    margin-right: 0px;
    margin-left: -2px;
    height: 60px;
	font-size:.9rem;
    color: #000;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
    border: 2px solid transparent;
    background-color: #fff;
    border-color:#009CF0;
    position: relative;}
.steps.orngst > li .step-in {
	border-color: #FF7E00;}
.steps > li.current .step-in{
	color: #fff;
	background-color: #009CF0;}
.steps.orngst > li.current .step-in {
    background-color: #FF7E00;}
.steps > li:first-of-type .step-in{
    margin-left:0px;}
.steps > li:last-of-type .step-in{
    border-right: 2px solid #009CF0;}
.steps.orngst > li:last-of-type .step-in {
    border-right: 2px solid #FF7E00;}
.steps > li:last-of-type .step-in:after{display: none;}
.steps > li .step-d {
    z-index: 2;
    height: 100%;;}
.steps > li .step-in:before,
.steps > li .step-in:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    border: 0 solid #009CF0;
    left: 100%;
    top: 50%;
    margin-top: -28px;
    z-index: 3;}
.steps > li:first-child .step-in:before {
    border: none !important;}
.steps > li:not(:last-child) .step-in:before,
.steps > li:first-child .step-in:before {
    border-top: 28px solid transparent !important;
    border-bottom: 28px solid transparent !important;
    border-left: 14px solid #009CF0 !important;
    margin-left: 2px;}
.steps.orngst > li:not(:last-child) .step-in:before,
.steps.orngst > li:first-child .step-in:before {
    border-left: 14px solid #FF7E00 !important;}
.steps > li .step-in:after {
    border-color: transparent;
    border-left-color: #fff;}
.steps > li:not(:last-child) .step-in:after {
    border-top: 28px solid transparent !important;
    border-bottom: 28px solid transparent !important;
    border-left: 14px solid white !important;}
.steps > li.current .step-in:after {
    border-left: 14px solid #009CF0 !important;}
.steps.orngst > li.current .step-in:after {
    border-left: 14px solid #FF7E00 !important;}
.steps > li .step-in .num{
	width: auto;
	padding: 0 3px;
	position: absolute;}
.steps > li:not(.current) .step-in:hover{
	background-color: #D4FFF9;}
.steps.orngst > li:not(.current) .step-in:hover{
	background-color: #FFEEDD;}
.steps > li:not(.current) .step-in:hover:after{
    border-left: 14px solid #D4FFF9 !important;}
.steps.orngst > li:not(.current) .step-in:hover:after{
    border-left: 14px solid #FFEEDD !important;}
.steps.-only > li .step-in{border-radius: 3px;}
.steps.-only > li .step-in:after,
.steps.-only > li .step-in:before{display: none !important;}/*bmdx/spot.html*/
	/* */
.minirec .steps li{
	flex:none;}
.minirec .step-in{
	border-radius:2px !important;
	width:15px;
	height:15px;}
.minirec .step-in:after,
.minirec .step-in:before{
	display:none;}
.minirec .step-in.bg-blue-line{
	background-color:#fff !important;
	border:solid 1px #009CF0;}
table td .minirec .steps{
	margin-bottom:-2px;}
table td .minirec .steps li{
	margin-bottom:2px;}
.status-fl{}
.status-fl,
.status-fl a{
	color: #bbb;
	line-height:1;}
.status-fl li{
	flex:1;
	text-align:center;
	position:relative;
	padding-bottom:30px;}
.status-fl li label{
	width:100%;
	max-width:160px;
	margin:0 auto;
	text-align:center;
	font-size:.9rem;
	line-height:1;
	display:block;
	height:100%;}
.status-fl li label a,
.status-fl li label span{
	width:100%;
	text-align:center;}
.status-fl li i{
	z-index:123;
	position:absolute;
	bottom:0;
	left:50%;
	transform:translateX(-50%);
	font-size:1.4rem;
	border-left:solid #fff 0.4em;
	border-right:solid #fff 0.4em;
	background-color:#fff;}
.status-fl li.complete i,
.status-fl li.complete label,
.status-fl li.complete label a,
.status-fl li.complete label span,
.status-fl li.now i,
.status-fl li.now label,
.status-fl li.now label a,
.status-fl li.now label span{
	color:#009CF0;
	font-weight:bold;}
.status-fl li.complete{
	font-weight:bold;
	color:#009CF0;}
.status-fl li:not(:first-child)::before {
	z-index:13;
    content: "";
    display: block;
    position: absolute;
	bottom:10px;
    left: -50%;
    right: 50%;
    height: 5px;
    background-color: #ccc;}
.status-fl li.complete:not(:first-child):before,
.status-fl li.now:not(:first-child):before{
	background-color:#009CF0;}

.status-fl li .subt{
	display:none;
	font-size:0.88rem;
	font-weight:bold;
	color:#FF0033;
	position:absolute;
	bottom:-17px;
    left: 50%;
    transform: translateX(-50%);}
.status-fl li .subt.title{
	left:0;
    transform: translateX(0%);}
.v-flow{
	margin-left:10px;}
.v-flow > li{
	position:relative;
	padding-left:20px;
	padding-bottom:30px;
	border-left:solid 5px #009CF0;}
.v-flow.noline > li{
	border-left:solid 5px transparent;}
.v-flow > li:last-child{
	padding-bottom:0px;}
.v-flow > li:last-child:after{
    content: "";
    position: absolute;
    top: 25px;
    left: -7px;
    background: #fff;
    width: 20px;
    height: calc(100% - 25px);}
.v-flow > li > .fi{
	display: block;
    width: 25px;
    height: 25px;
    border-radius: 100%;
    background-color: #009CF0;
    border: solid 2px #009CF0;
    position: absolute;
    top: -1px;
    left: -15px;}
.v-flow > li > .fi + .icon-checkmark{
    position: absolute;
    left: -10px;
    top: 0px;
    font-size: 1.35rem;}
.v-flow > li:last-child > .fi{
	top:0;}
.v-flow > li > .fi.ny{
    background-color: #fff;}
.v-flow > li .title{
	font-size: 1.1rem;
    margin-bottom: 10px;}
.coli.coli4 .box .v-flow > li .title{
	font-size:0.95rem;}
.coli.coli4 .box .v-flow > li{
	padding-bottom:5px;}
.slider.SaleP{}
.slider.SaleP .slide{
	padding:0 2px;}
.slider.SaleP .base{
	margin-bottom:5px;}
.slider.SaleP .list .list-i{
	margin-bottom:5px;}
.slider.SaleP .list .list-i.box{
	padding:8px;}
.slider.SaleP .list .scrolla{
	height:calc(100vh - 285px);}
.slider.SaleP .base{
	margin-left:-5px;}
.slider.SaleP .base.start{
	margin-left:0px;}
.slider.SaleP .base.fin{
    width: calc(100% + 2px);}
.slider.SaleP .slide:hover .base .base-in,
.slider.SaleP .slide:hover .box{
	background-color:#DCFEE3;}
.slider.SaleP .slide:hover .base:not(.fin):after{
    border-left: 14px solid #DCFEE3 !important;}
.flow-pic {
    max-width: calc(30px * 30);
	height:30px; overflow: hidden;}
.flow-pic li{
    margin-left:-5px;}
.flow-pic.-sprt li{
    margin-left:5px;}
.flow-pic li:first-child{
    margin-left:0% !important;}
.flow-pic .pic{
	width:30px;}
.flow-pic .pic:first-child{margin-left: 0;}
.flow-pic .pic .img{
	height:30px;
	min-width:30px;}
.flow-pic .pic.grpt:before{
	width: 30px;
	height: 30px;
	border-radius: 30px;
	background-color: rgba(0,0,0,0.3);
    position: absolute;
    content: "";
    top:0px;
    left:0px;
    z-index: 1;}
.flow-pic.-big{height: 45px;}
.flow-pic.-big .pic{
	width:45px;}
.flow-pic.-big .pic .img{
	height:45px;
	min-width:45px;}
.flow-pic.-big .pic.grpt:before{
	width: 45px;
	height: 45px;}
.flow-pic .pic.grpt .icon-check1{
    z-index: 2;
	color: #fff;
	position: absolute;
	font-weight: bold;
    font-size:1.45rem;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);}


.gantt {
  display: grid;
  border: 0;
  border-radius: 13px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  border:solid 1px #ddd}
.gantt__row {
  display: grid;
  grid-template-columns: 150px 1fr;
  background-color: #fff;}
.gantt__row:nth-child(odd) {
  background-color: #f5f5f5;}
.gantt__row:nth-child(odd) .gantt__row-first {
  background-color: #f5f5f5;}
.gantt__row:nth-child(3) .gantt__row-bars {
  border-top: 0;}
.gantt__row:nth-child(3) .gantt__row-first {
  border-top: 0;}
.gantt__row--empty {
  background-color: #ffd6d2 !important;
  z-index: 1;}
.gantt__row--empty .gantt__row-first {
  border-width: 1px 1px 0 0;
}
.gantt__row--lines {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: transparent;
  grid-template-columns: 150px repeat(12, 1fr);
}
.gantt__row--lines span {
  display: block;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.gantt__row--lines span.marker {
  background-color: rgba(10, 52, 68, 0.13);
  z-index: 2;
}
.gantt__row--lines:after {
  grid-row: 1;
  grid-column: 0;
  background-color: #1688b345;
  z-index: 2;
  height: 100%;
}
.gantt__row--months {
  color: #fff;
  background-color: #0a3444 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  grid-template-columns: 150px repeat(12, 1fr);
}
.gantt__row--months .gantt__row-first {
  border-top: 0 !important;
  background-color: #0a3444 !important;
}
.gantt__row--months span {
  text-align: center;
  font-size: 13px;
  align-self: center;
  font-weight: bold;
  padding: 20px 0;
}
.gantt__row-first {
  background-color: #fff;
  border-width: 1px 0 0 0;
  border-color: rgba(0, 0, 0, 0.1);
  border-style: solid;
  padding: 15px 0;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
}
.gantt__row-bars {
  list-style: none;
  display: grid;
  padding: 9px 0;
  margin: 0;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 8px 0;
  border-top: 1px solid rgba(221, 221, 221, 0.8);
}
.gantt__row-bars li {
  font-weight: 500;
  text-align: left;
  font-size: 14px;
  min-height: 15px;
  background-color: #55de84;
  padding: 5px 13px;
  color: #fff;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  border-radius: 20px;
}
.gantt__row-bars li.stripes {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255, 255, 255, 0.1) 5px, rgba(255, 255, 255, 0.1) 13px);
}
.gantt__row-bars li:before, .gantt__row-bars li:after {
  content: "";
  height: 100%;
  top: 0;
  z-index: 4;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.3);
}
.gantt__row-bars li:before {
  left: 0;
}
.gantt__row-bars li:after {
  right: 0;
}


.progress {
  background-color: #ddd;
  border-radius:24px;
  height:24px;}
.progress-bar{
  background-color: #2196F3;
  border-radius:24px;
  height:24px;}
.progress-bar{position:relative;}
.progress-bar .txt{
	line-height: 24px;
    display: block;
    text-align: center;
    width: 100%;
    font-weight: bold;
	color: #fff;}
.ARnode .progress-bar{
	border-radius:0;}

/*<div class="progress progress-striped active">
      <div role="progressbar " style="width: 90%;" class="progress-bar bg-blue"><span></span></div>
</div>*/

@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
.progress.active .progress-bar,
.progress-bar.active {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
  -o-animation: progress-bar-stripes 2s linear infinite;
  animation: progress-bar-stripes 2s linear infinite;
}

.progress-striped .progress-bar,
.progress-bar-striped {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 40px 40px;
}

.fixCmenu{
	width: calc(100% + 50px);
    border-top: solid 1px #ddd;
    background: #fff;
	padding: 0 25px;
    margin: 10px -25px -10px -25px;}
.fixC.active .fixCmenu{
    margin:15px -25px -10px -25px;}
.fixCmenu .topmenu{
    border-bottom:none;
	top:0;
	position: relative;}
.fixCmenu .topmenu a{
    height: 42px;}

.fixC .cntA,
.fixC.active .cntB,
.fixC.active .hd-r-menu{
	display:none !important;}
.fixC.active .cntA{
	display:block !important;}
.fixC.active,
.fixC.active .cntC{
	display: flex;
    -webkit-align-items: center;
    align-items: center;}
.fixC.active .cntC .cntC-i{margin-right: 10px;}
.fixC.active .cntC .title + .cntC-i{margin-left: 10px; margin-right: 0;}
.fixC.active .cntC .cntC-i.mr_b5{margin-bottom: 0 !important;}
.fixC.active .backlink{
	height: 22px;}
.fixC.active .backlink .f_r12{font-size: 1.4rem !important;}
.fixC.active .fixCOFF{
    -webkit-align-items: center;
    align-items: center;}
@media screen and (max-width:771px){
.fixC.active .title-nu,
.fixC.active .title-na{display: none !important;}
.fixC.active .title-t{max-width:190px;}
}
@media screen and (max-width:460px){
.fixC.active .title-t{max-width:80px;}
}
.fixC.active .cntA.flx{
	display:flex !important;}
.fixC.active{
	position:fixed;
	width:100%;
	top:0;
	left:0;
	z-index:333;}
.dblock.nrr2 main .fixC.active{
	left:153px;
    width:calc(100% - 153px);}
.dblock.nrr main .fixC.active{
	left:300px;
    width:calc(100% - 300px);}
header + .container .dblock .fixC.active{top:48px;}
.web-v-m header + .container .dblock .fixC.active{top:calc(48px + 48px);}
.left-oc-popR.dblock.nrr2 main .fixC.active{
	left:0px;
    width:calc(100%);}
.fixC.cont-inner-head{
	padding-top: 0;
    -webkit-transition: ease .2s;
    transition: ease .2s;}
.fixC.cont-inner-head .arrback > a{
	margin-left: -15px;}
.fixC.cont-inner-head .arrback .hd-r-menu{
	margin-right: -10px;}
.panelActive.panelActiveLeft.web-v-m .fixCwrap{
	overflow:visible;}
.panelActive.panelActiveLeft.web-v-m .fixC.cont-inner-head{
    transform: translateX(0%);}
.panelActive.panelActiveLeft .dblock > main  .fixC .cntA,
.panelActive.panelActiveLeft .dblock > main  .fixC.active .cntB{
	display:block !important;}
.web-v-m  .fixC.cont-inner-head + .dblock > aside{
	position:fixed;}
.fixC.cont-inner-head .fixCOFF > .right .dropbox.viewstB + .dropboxR{top:25px;}
.fixC.cont-inner-head + .dblock main{
    order: 2;
    flex: 1;
	padding-left:0 !important;}
.fixC.active .pic-box .pic{
	display:none;}
.fixC.active .pic-box .box-in{
	padding-left:0;}

.fixC.active{
	display:flex;
    flex-wrap: wrap;}
.fixC.active.cont-inner-head .arrback > .right{
    position: absolute;
    right: 25px;
    top: 3px;
    z-index: 11;}
.fixC.active .cntC.mr_t10{
	margin-top:0 !important;
	margin-left:10px;
    flex: 1;}
.fixC.active .box-in .tagst,
.fixC.active .box-in .tagst ~ .title{
	display: inline-block;}
.fixC.active .title{
	height: 20px!important;
	margin:0 !important;
	padding:0 !important;
	font-size:1rem !important;}
.fixC.active .title .btn{
	height: 20px;}
.fixC.active .arrback.flx.center-h{
    -webkit-align-items:start;
    align-items:start;}
.fixC.active .arrback{}
.fixC.active .cntC .col-50.bdrr{
	width:100%;
	border:none;}
.fixC.active .slider{
	margin-top:10px;}
.fixC.active.cont-inner-head	{
	padding:10px 25px;}
.fixC.active .colwrap [class^="col-"].bdrr,
.fixC.active .colwrap [class*=" col-"].bdrr{
	padding-bottom:0;}
.fixC.active .dropboxR{
	top: 0px;
    right: 30px;}


/* Styles for Accordion */
.accordion:last-child {
	border-bottom: 1px solid #ddd;}
.accordion .accor-title{
    cursor: pointer;
	font-size:1.4rem;
	position: relative;
    padding: 25px 25px 14px;
	border-top: 1px solid #dddddd;
	margin-bottom: 6px;}
.accordion .accor-txt{
	font-size:1rem;
	padding: 7px 25px 10px 25px;
	display: none;
	margin: -7px 0 6px;}



/* new style invoice top */
.NumData{
	display: grid;
	grid-template-columns: repeat(5,1fr);
	grid-template-rows: 1fr;
	gap:18px 24px;}
.NumData .h60.lh-1{
	height:45px !important;}
.NumData .h60.lh-1 + .lh-1.mt_t10{
	margin-top:5px !important;}
.NumData.ND7{
	grid-template-columns: repeat(7,1fr);}
.NumData.ND6{
	grid-template-columns: repeat(6,1fr);}
.NumData.ND5{
	grid-template-columns: repeat(5,1fr);}
.NumData.ND4{
	grid-template-columns: repeat(4,1fr);}
.NumData .box{
	padding:5px;}
.NumData .box:before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: -19px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-left: 10px solid #666;
    border-bottom: 10px solid transparent;}
.NumData.noarr .box:before{
	display:none;}
.NumData .box:last-child:before{
	display:none;}
.NumData .box.flx.center{
    -webkit-justify-content:start;
    justify-content:start;}
.NumData a{
	color:#000;
	word-break:break-all;}
.NumData a.darkv{
	color:#fff;}
.NumData a.box.faint:hover{
	opacity:0.5;}
.NumData .data{
	word-break:break-all;
	margin-top:10px;
	font-weight:bold;
	font-size:1.8rem;
	line-height:1;}
.NumData .data span{
	font-size:1.2rem;}
.NumData .arrow_box_callR .arrow_box{
	width:100%;}


@media screen and (max-width:1010px){
.container > .dblock > main > .cont-inner .NumData.ND5{
	grid-template-columns: repeat(4,1fr) !important;
	padding-right:13px !important;}
.container > main > .cont-inner .NumData.ND7{
	grid-template-columns: repeat(5,1fr) !important;
	padding-right:13px !important;}
}
@media screen and (max-width:608px){
.container > main > .cont-inner .NumData.ND7{
	grid-template-columns: repeat(3,1fr) !important;}
}
@media screen and (max-width:480px){
.container > main > .cont-inner .NumData.ND7{
	grid-template-columns: repeat(2,1fr) !important;}
}


@media screen and (max-width:1264px){
.container > .dblock > main > .cont-inner .NumData.ND7{
	grid-template-columns: repeat(5,1fr) !important;
	padding-right:13px !important;}
}
@media screen and (max-width:950px){
.container > .dblock > main > .cont-inner .NumData.ND7{
	grid-template-columns: repeat(3,1fr) !important;}
}
@media screen and (max-width:416px){
.container > .dblock > main > .cont-inner .NumData.ND7{
	grid-template-columns: repeat(2,1fr) !important;}
}


@media screen and (max-width:955px){
.container > .dblock > main > .cont-inner .NumData.ND5{
	grid-template-columns: repeat(3,1fr) !important;
	padding-right:13px !important;}
}
@media screen and (max-width:620px){
.container > .dblock > main > .cont-inner .NumData.ND5{
	grid-template-columns: repeat(2,1fr) !important;}
}
@media screen and (max-width:425px){
.container > .dblock > main > .cont-inner .NumData.ND5{
	grid-template-columns: repeat(1,1fr) !important;}
.container > .dblock > main > .cont-inner .NumData.ND5{
	padding-right: 0 !important;
    gap: 33px 24px;}
.container > .dblock > main > .cont-inner .NumData.ND5 .box:before {
    border-left: 20px solid transparent;
    border-top: 20px solid #666;
    border-right: 20px solid transparent;
	top:auto;
    bottom: -35px;
    left: 0;
    right: 0;}
}


.container > .cont-inner > .colset.colis2 .coli .pd_a20 .NumData.ND4{
	grid-template-columns: repeat(4,1fr) !important;
	padding-right:13px !important;}
.container > .cont-inner > .colset.colis2 .coli .pd_a20 .NumData.ND4.noarr{
	padding-right:0px !important;}
@media screen and (max-width:1130px){
.container > .cont-inner > .colset.colis2 .coli .pd_a20 .NumData.ND4{
	grid-template-columns: repeat(3,1fr) !important;}
}
@media screen and (max-width:886px){
.container > .cont-inner > .colset.colis2 .coli .pd_a20 .NumData.ND4{
	grid-template-columns: repeat(2,1fr) !important;}
}
@media screen and (max-width:640px){
.container > .cont-inner > .colset.colis2 .coli .pd_a20 .NumData.ND4{
	grid-template-columns: repeat(3,1fr) !important;}
}
@media screen and (max-width:450px){
.container > .cont-inner > .colset.colis2 .coli .pd_a20 .NumData.ND4{
	grid-template-columns: repeat(2,1fr) !important;}
}


@media screen and (max-width:1244px){
.colset.colis2 .box .NumData.ND4{
	grid-template-columns: repeat(3,1fr) !important;}
}

@media screen and (max-width:966px){
.colset.colis2 .box .NumData.ND4{
	grid-template-columns: repeat(2,1fr) !important;}
}
@media screen and (max-width:640px){
.colset.colis2 .box .NumData.ND4{
	grid-template-columns: repeat(3,1fr) !important;}
}
@media screen and (max-width:478px){
.colset.colis2 .box .NumData.ND4{
	grid-template-columns: repeat(2,1fr) !important;}
}


@media screen and (max-width:937px){
.dblock  main .cont-inner .NumData.ND6{
  grid-template-columns:repeat(3,1fr) !important;}
}
@media screen and (max-width:828px){
.dblock  main .cont-inner .box .NumData.ND7{
  grid-template-columns:repeat(3,1fr) !important;}
}
@media screen and (max-width:446px){
.dblock  main .cont-inner .box .NumData.ND7{
  grid-template-columns:repeat(2,1fr) !important;}
}


@media screen and (max-width:560px){
.NumData .data{
	font-size:1.3rem;
	line-height:1;}
.NumData .data span{
	font-size:0.9rem;}
.NumData .box:before{
	right:-15px;}
}
.NumData-0{
	background-color:#C8F9D9;
	border:solid 2px #999 !important;}
.NumData-1{
	background-color:#B6DAFE;
	border:solid 2px #999 !important;}
.NumDataClrinfo{
	border:none !important;
	display:inline-block;
	width:30px;
	height:20px;}
.NumData .faint{
	opacity:0.6;
	border:none !important;}

.Carpet{}/*wtd.html*/
.Carpet-Here{
	position:fixed;
	width:50px;
	height:50px;
    top: 0;
    right: 0;}
.CarpetR{
	transition: all 1s ease 0s;}
.CarpetR.appear{
	display:block !important;}
.CarpetR.appear.active{
    position: fixed !important;
    right: 10px !important;
    left: auto !important;
    top: 10px !important;
    z-index: 1234;
	background-color:#fff;
    width: 0px !important;
    height: 0px;}
.CarpetR.appear.active .popW_body{
	animation: rv-taadaa .9s;
    opacity: 0;
	height:0px;
	overflow:hidden;}
@keyframes rv-taadaa {
  0% {
    opacity: 1;
	height:auto;
  }

  100% {
    opacity: 0;
	height:0px;
  }
}


.icon-movst-wrap{
  container-type: inline-size;}
.icon-movst{
	margin:0 auto;
	width:calc((116px * 10) + (40px * 9));}
.grid-top-gate .gatemenust{
    display: grid;
    gap:20px 40px;
    grid-template-columns: repeat(10,1fr);}
.icon-movst .gatemenust .-img{
	background-color: #fff;
	height:116px;
	width:116px;
    border: solid 1px rgba(0,0,0,0.15);
    border-radius:23px;
	overflow: hidden;
    box-shadow: 0px 0px 8px rgba(0,0,0,0.15);}
.icon-movst  .app-sts{
	position: absolute;
    color: #000;
	background-color: #ccc;
	top:calc(116px - 40px);
    width: 100%;
    height:40px;
    line-height:40px;
	font-size: 1rem;
	letter-spacing: -1px;
	font-weight: bold;
    text-align: center;
	border-radius: 0 0 22px 22px;}
.icon-movst  .app-sts.-lows{
	top:calc(116px - 30px);
    height:30px;
    line-height:30px;}
.icon-movst  .app-sts.-c01{
	background-color:#4BB5FC;}
.icon-movst  .app-sts.-c02{
	background-color:#F5B100;}
.icon-movst  .app-sts.-c03{
	background-color:var(--kclr-cng-grn) !important;}
.icon-movst  .app-sts.-c04{
	color:#fff;
	background-color:#105B99;}
.icon-movst  .app-sts.-c05{
	background-color:#76DFFF;}
.icon-movst  .del {
	position: absolute !important;
    right: 0;
    top:-15px;}
@container (max-width:1610px){
.icon-movst{
	width:calc((116px * 9) + (40px * 8));}
.grid-top-gate .gatemenust{
    grid-template-columns: repeat(9,1fr);}
}
@container (max-width:1454px){
.icon-movst{
	width:calc((116px * 8) + (40px * 7));}
.grid-top-gate .gatemenust{
    grid-template-columns: repeat(8,1fr);}
}
@container (max-width:1278px){
.icon-movst{
	width:calc((116px * 7) + (40px * 6));}
.grid-top-gate .gatemenust{
    grid-template-columns: repeat(7,1fr);}
}
@container (max-width:1112px){
.icon-movst{
	width:calc((116px * 6) + (40px * 5));}
.grid-top-gate .gatemenust{
    grid-template-columns: repeat(6,1fr);}
}
@container (max-width:946px){
.icon-movst{
	width:calc((116px * 5) + (40px * 4));}
.grid-top-gate .gatemenust{
    grid-template-columns: repeat(5,1fr);}
}
@container (max-width:780px){
.icon-movst{
	width:calc((116px * 4) + (40px * 3));}
.grid-top-gate .gatemenust{
    grid-template-columns: repeat(4,1fr);}
}
@container (max-width:614px){
.icon-movst{
	width:calc((116px * 3) + (40px * 2));}
.grid-top-gate .gatemenust{
    grid-template-columns: repeat(3,1fr);}
}
@container (max-width:448px){
.icon-movst{
	width:calc((116px * 2) + (40px * 1));}
.grid-top-gate .gatemenust{
    grid-template-columns: repeat(2,1fr);}
}




.grid-top-gate .gatemenust .draggable{padding: 0;}
.grid-top-gate .gatemenust a{
	position:relative;}
.grid-top-gate .gatemenust a .num{
    position: absolute;
    right: 20px;
    bottom: 50px;
    height: 30px;
    min-width: 30px;
    line-height: 33px;
    font-size:.9rem;}

.icon-mvst  .coli .draggable {
    background-color:transparent;
    padding: 0px ;}
.icon-mvst  .coli img{
	width: 100%;}
.icon-mvst  .coli .-img{
	max-width: 100px;}
.sqbdr.icon-mvst  .coli img{
	border:solid 1px rgba(0,0,0,0.15);
	border-radius:26px;
	box-shadow:0px 0px 8px rgba(0,0,0,0.15);}
.icon-mvst  .coli .title{
	text-align: center;
	font-size: 1rem;
	margin-top: 8px;
	line-height: 1;
	word-break: break-all;}
.icon-mvst  .coli.hover:hover{
    background:transparent !important;}

.icon-mvst .arrow_box {
    bottom: 30%;
    animation:arrow_box-tb2 300ms ease-out forwards;
    }
@keyframes arrow_box-tb2{
  to {
    opacity:1;
	bottom:50%;
  }
}
.icon-mvst .arrow_box_in{
	width:240px;
	padding: 10px;}
.hd-r-menu > li .dropboxR{
    position: fixed;}
.hd-r-menu.dft> li .dropboxR,
.hd-r-menu> li .dropboxR.dft{
    position:absolute;
    top:50px;
    right:5px;}
.fixC .hd-r-menu > li .dropboxR{
	top: 50px;}
.hd-r-menu > li .dropboxR.gridst{
    top: 50px;
    right: 20px;
    width: 290px;
	padding:15px;
    max-height: 360px;}
.hd-r-menu > li .dropboxR .icon-mvst .gatemenust .coli a{padding: 0;}
.hd-r-menu > li .dropboxR a:hover{
	background-color:transparent;}
.main-topmenu .hd-r-menu > li .dropboxR{
	z-index: 1001;}
.icon-movst .gatemenust .draggable.on{
	background-color:transparent;}

.icon-movst .gatemenust .-img:hover{
    box-shadow: 0px 0px 1px rgba(0,0,0,0.2);}
.icon-movst .gatemenust .-img img{width:80px;}
.icon-movst .gatemenust .-img.-oi{
    position: relative;
	box-shadow: none;
    border:none;}
.icon-movst .gatemenust .-img.-oi img{width: 100%;}
.icon-movst .gatemenust .-img.-oi:before {
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  content: "";
  display: block;
  height: 100%;
  left: -75%;
  position: absolute;
  top: 0;
  transform: skewX(-25deg);
  width: 50%;
  z-index: 2;}
.icon-movst .gatemenust .-img.-oi:hover:before,
.icon-movst .gatemenust .-img.-oi:focus::before {
  -webkit-animation: shine 0.85s;
          animation: shine 0.85s;
}
@-webkit-keyframes shine {
  100% {
    left: 125%;
  }
}
@keyframes shine {
  100% {
    left: 125%;
  }
}

.icon-movst .gatemenust .title{
    width: 100%;
    text-align: center;
	font-size:.85rem;
    margin-top: 13px;
    height:35px;
    word-break: break-all;
    line-height: 1.2;
    display: block;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;}
.icon-movst .coli .btn.rnd{
	position:absolute;
    right: 5px;
    top: 5px;
    width: 25px;
    height: 25px;}
.popW .grid-top-gate .colis4{
    margin-left:-8px !important;}
.popW .grid-top-gate .colis4 > .coli {
    margin-left:8px !important;
    margin-bottom:8px  !important;
    width: calc(25% - 8px) !important;}



.user-add{
	position:relative;}
.user-add .icon-plus{
    position: absolute;
    left: 18px;
    bottom: 4px;
    z-index: 2;
    font-size: 0.8rem;
    color: darkorange;}/*opencalendar/top.html*/
.gradient-view{
	overflow:hidden;
	position:relative;}/*invoice/top.html*/
.gradient-view-link{
	position:absolute;
    width: 100%;
    bottom:0px;
	background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );}
.gradient-view.h400 .gradient-view-link:not(.btm){
    height:200px;}
.gradient-view-link.btm{
	background-color:#fff;
	height:20px;
    bottom: 0;}
.gradient-view-link.btm + .gradient-view-link{
    bottom:20px;}

.pdfjs_view canvas{
    width: 100%;
    display: block;}
main.pdfjs{overflow-y: hidden;}
.pdfjs_i{
    width: 100%;
    height: calc(100vh - 102px);}

.rate i{
	overflow: hidden;
    font-size: 1rem;
    color: coral;
    margin-left:2px;}

/*invoice top */
.flow-top > .box{
	background:#e1f2f1;
	border-radius:15px;
	padding: 20px;}
.flow-top .box-in{
	background:#e1f2f1;
	border-radius:15px;
	padding: 10px;
    border:solid 1px #999;}

.flow-top .grid .box-in{
	max-width:140px;
    margin: 0 auto;}
.flow-top .grid .box-in.st03{
	max-width:210px;}
.flow-top li.title{width:90px;}
.flow-top li.title .space{height: 30px;}
.flow-top li.flx-o{overflow: hidden;}
@media screen and (max-width:889px){
.flow-top li.title .space0{height: 30px;}
.flow-top .sts.txt.titletrg{display: grid;}

}
.updwnarrset .start{
	display: block;
    width:14px;
    height:14px;
    border-radius: 100%;
	background:#0F65BD;}
.updwnarrset .start[class^="icon-"],
.updwnarrset .start[class*=" icon-"]{
	font-size: 1.2rem;
	display: flex;
	justify-content:center;
	align-items: center;
    width:30px;
    height:30px;
	color:#fff;
    border:solid 1px #0F65BD;}
.updwnarrset .txt{
	color: #000;
	display:flex;
	justify-content:center;
	align-items: center;
	height:40px;}
.updwnarrset .start[class^="icon-"] ~.txt,
.updwnarrset .start[class*=" icon-"] ~.txt{
	height:24px;}
.updwnarrset.st02 .txt{
	height:32px;}
.updwnarrset.st02 .start[class^="icon-"] ~.txt,
.updwnarrset.st02 .start[class*=" icon-"] ~.txt{
	height:16px;}
.updwnarrset.st01 .txt{order:3;}
.updwnarrset.st01 .start{order:2;}
.updwnarrset.st01 .arr-d{order:1;}
.updwnarrset.st02 .txt{order:1;}
.updwnarrset.st02 .start{order:2;}
.updwnarrset.st02 .arr-d{order:3;}
.updwnarrset.st03 .txt{order:3;}
.updwnarrset.st03 .start{order:1;}
.updwnarrset.st03 .arr-d{order:2;}
.flow-top .set .listing{
	width: 100%;
    height: 30px;
    text-align: center;}
.flow-top .set .contents{
	position: relative;
	height: 170px;}
.flow-top .set .contents .box-in{height: 100%;}
.flow-top .set .contents .box-in > div{
	width:60px;
    position: relative;}
.flow-top .set .item-list{
	width: 70px;
    z-index: 2;}
.flow-top .set .item{
	position: absolute;
    left: 50%;
    margin-left: -35px;}
.flow-def .flow-top .set .item{
	position: relative;
	margin-top: 15px;
    margin-left: 0;
    left: 0;}
.flow-top .set .item.st01{
	top:6px;}
.flow-top .set .item.st02,
.flow-top .set .item.st03{
	bottom:6px;}
.flow-def .flow-top .set .item.st01,
.flow-def .flow-top .set .item.st02,
.flow-def .flow-top .set .item.st03{
	top:0;
	bottom:0;}
.flow-top .set .updwnarrset{
	position: absolute;
    width: 100%;
    z-index: 3;}
.flow-top .set .updwnarrset.st01{
    top: calc(35px + 10px + 2px);}/*70half arrhead half line2px */
.flow-top .set .updwnarrset.st02{
    bottom: calc(35px + 10px + 2px);}
.flow-top .set .left .updwnarrset{left: 0;}
.flow-top .set .right .updwnarrset{right: 0;}
/* rounditems:70pxhalf,arrow head:20pxhalf,arrow line:2px */
.flow-top .set .updwnarrset .arr-d{
    height: calc(200px - 30px - 35px - 2px - 35px - 2px - 20px);}
/* wrap:200px,line:2px ,itemround 70pxdouble  arrowhead 20px*/
.flow-top .set .updwnarrset [class^="icon-"] ~ .arr-d,
.flow-top .set .updwnarrset [class*=" icon-"] ~ .arr-d{
    height: calc(200px - 30px - 35px - 2px - 35px - 2px - 20px - 15px);}/*icon 30pxhlaf */
.flow-top .set .updwnarrset.st01 .start{
	margin-top: -8px;}
.flow-top .set .updwnarrset.st02 .start{
    margin-bottom: -8px;}
.flow-top .set .updwnarrset.st01 .start[class^="icon-"],
.flow-top .set .updwnarrset.st01 .start[class*=" icon-"]{
    margin-top:0px;}
.flow-top .set .updwnarrset.st02 .start[class^="icon-"],
.flow-top .set .updwnarrset.st02 .start[class*=" icon-"]{
    margin-bottom:0px;}
.flow-top .set .updwnarrset.st03 .start{
	margin-top:10px;}
.flow-top .set .updwnarrset.st03 .txt{
	margin-top:36px;}
.flow-wrap{position: relative;}
.flow-wrap > .right .flow-top .set li {
	margin-right:0px;}
.flow-wrap > .right .item-list{
	width:90px;}
.flow-wrap > .center{
    padding:0 40px;}
.flow-wrap > .center .set{
	margin: 0 auto;
	width:calc(147px + 147px + 147px + 147px + 82px + 147px + (20px * 5));}
.flow-wrap > .center .grid.set{
    display: grid;
    gap:0;
    grid-template-columns: repeat(7,1fr);
	margin: 0;
	width: 100%;}
.flow-wrap > .center .grid.set.g6{
    grid-template-columns: repeat(6,1fr);}
.flow-wrap > .center .grid.set.g5{
    grid-template-columns: repeat(5,1fr);}
.flow-wrap > .center .set li{
	margin-right:10px;
	margin-left: 10px;}
.flow-wrap > .center .arr-d.fline{
    position: absolute;
    top: 66px;
	left: -40px;
    z-index: 1;}
.flow-wrap > .center .arr-d.fline.top{
    top: 66px;}
.flow-wrap > .center .arr-d.fline.btm{
    top: 162px;}
.flow-wrap > .center .arr-d.fline:after {
    right: -2px;
    border-left: 20px solid #00B8FF;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;}
.flow-wrap > .center .arr-d.fline.top:after {
	top:-9px;}
.flow-wrap > .center .arr-d.fline.btm:after {
    bottom:-9px;}
.flow-wrap .arr-d{
	display: block;
	position: relative;
    width: calc(100% + 80px);
	height:2px;
	background-color: #00B8FF;}
.flow-wrap .arr-d.st02{
	height:50px;
	width:4px;
	background-color:#0F65BD;}
.flow-wrap .arr-d.st02.dash{
	background-color: transparent;
	border:dashed 2px #0F65BD;}
.flow-wrap .arr-d:after{
    content:"";
    position: absolute;
    width: 0;
    height: 0;}
.flow-wrap .arr-d.st01:after{
    top: -9px;
    right: -2px;
    border-left: 20px solid #00B8FF;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;}
.flow-wrap .arr-d.st02.up:after{
    top: -20px;
    left:-8px;
   border-bottom:20px solid #0F65BD;
   border-left: 10px solid transparent;
   border-right: 10px solid transparent; }
.flow-wrap .arr-d.st02.down:after{
    bottom: -20px;
    left:-8px;
   border-top:20px solid #0F65BD;
   border-left: 10px solid transparent;
   border-right: 10px solid transparent; }
.flow-wrap .arr-d.st02.dash:after{
	left:-10px;}
.flow-wrap .arr-d.st02.up.dash:after{
	top:-22px;}
.flow-wrap .arr-d.st02.down.dash:after{
	bottom:-22px;}
.flow-wrap .updwnarrset:hover .arr-d.st02{
	background-color: #5cacff;}
.flow-wrap .updwnarrset:hover .arr-d.st02.up:after{
    border-bottom: 20px solid #5cacff;}
.flow-wrap .updwnarrset:hover .arr-d.st02.down:after{
    border-top: 20px solid #5cacff;}
.flow-wrap .updwnarrset:hover .start{
	background: #5cacff;}
.updwnarrset:hover .start[class^="icon-"], .updwnarrset:hover .start[class*=" icon-"]{
    borderx:1px solid #5cacff;}
.flow-wrap .updwnarrset:hover .arr-d.st02.dash {
    background-color: transparent;
    border: dashed 2px #5cacff;}
.flow-wrap .item{
	font-size: 1rem;
	width:70px;
	height:70px;}
.flow-wrap .item.st01{
	color:#fff;}
.flow-wrap .item.st02{
	color:#00B8FF;}
.flow-wrap.orngst .item.st02 {
    color: #FF7E00;}
.flow-wrap.grngst .item.st02 {
    color: #11D800;}
.flow-wrap .item.st03{
	background: #aaa;
	color:#fff;}
.flow-wrap .flow-line .item{
	z-index: 15;
	width:70px;
	height:70px;}
.flow-wrap .flow-line .midi .item{
	width:60px;
	height:60px;}
.flow-wrap .flow-line .mini .item{
	position: relative;
	width:48px;
	height:48px;}
.flow-wrap .flow-line .item:before{
	content: "";
	position: absolute;
	border-radius: 100%;}
.flow-wrap .flow-line .item:before{
	width:50px;
	height:50px;}
.flow-wrap .flow-line .midi .item:before{
	width:40px;
	height:40px;}
.flow-wrap .flow-line .mini .item:before{
	width:28px;
	height:28px;}
.flow-wrap .flow-line .mini .item.st01:before{
	background-color:#00B8FF;}
.flow-wrap.orngst .flow-line .mini .item.st01:before{
	background-color:#FF7E00;}
.flow-wrap.grnst .flow-line .mini .item.st01:before{
	background-color:#11D800;}
.flow-wrap .flow-line .mini .item.st02:before{
	background-color:#fff;
	border:solid 3px #00B8FF;}
.flow-wrap.orngst .flow-line .mini .item.st02:before{
	background-color:#fff;
	border:solid 3px #FF7E00;}
.flow-wrap.grnst .flow-line .mini .item.st02:before{
	background-color:#fff;
	border:solid 3px #11D800;}
.flow-wrap .flow-line .item:hover::before{
	transition: ease .2s;
    transform: scale(1.3);}
.flow-wrap .flow-line .title{width: 60px;}
.flow-wrap .flow-line .title-m{margin-top: -20px;}
.flow-wrap .flow-line .flow-set{
	display: flex;}
.flow-wrap .flow-line .flow-set{min-width: 660px;}
.flow-wrap .flow-line .flow-set.-single{min-width:120px;}
.flow-wrap .flow-line .flow-set .date{
	height: 17px;
	margin-bottom: 3px;}
.flow-wrap .flow-line .flow-set .txt{
	height: 31px;
	text-align: center;
	margin-top: 5px;}
.flow-wrap .flow-line .flow-set .txt.upst{
	line-height: 1.1;
	font-size:0.9rem;
	margin-top:0px;
    height: auto;}
.flow-wrap .flow-line .flow-set .date.dnst{
	white-space: nowrap;
	margin-bottom:0px;
    height: auto;}
.flow-wrap .flow-line .flow-set .txt span{
	font-size: 0.7rem;
	display: block;}
.flow-wrap .flow-line .flow-set > li{
    flex: 1;
    position: relative;}
.flow-wrap .flow-line .flow-set > li:before{
    z-index: 13;
    content: "";
    display: block;
    position: absolute;
    left: -50%;
    right: 50%;
	top:50%;
	margin-top: -5px;
    height:6px;
    background-color:#00B8FF;}
.flow-wrap .flow-line .flow-set.-txt2 > li:before{
	top:37px;
	margin-top: 0px;}
.flow-wrap.orngst .flow-line .flow-set > li:before{
    background-color:#FF7E00;}
.flow-wrap.grnst .flow-line .flow-set > li:before{
    background-color:#11D800;}
.flow-wrap .flow-line .flow-set > li.flow-fin:before,
.flow-wrap .flow-line .flow-set > li.flow-start-nxt:before{display: none;}
.flow-wrap .flow-line .flow-set > li:first-child:before{display: none;}
.flow-wrap.leftst{}
.flow-wrap.leftst .flow-line .flow-set > li:before {
    width: 100%;
    left: 0;
	right:auto;}
.flow-wrap.leftst .flow-line .flow-set > li:first-child:before{display: block;}
.flow-wrap.leftst .flow-line .flow-set .txt.upst,
.flow-wrap.leftst .flow-line .flow-set .dnst{
    transform: translateX(calc(-50% + 20px));
    text-align: center;}
.flow-wrap.leftst .flow-line .flow-set > .flx.clm.center .txt.upst,
.flow-wrap.leftst .flow-line .flow-set > .flx.clm.center .dnst{
    transform:none;}
.flow-grt-set.fullst{
	min-width: 1114px;}
.flow-grt-set .center .scrolla .flow-top .grid{min-width: 1000px;}
.flow-grt-set .center .scrolla .flow-top .grid.mwst02{min-width: 700px;}
.list-i.box .flow-grt-set{margin:0 10px;}
.flow-def .flow-wrap > .center {
    overflow: hidden;
    padding: 0px;}
.flow-def .flow-top .set .contents{
    height: auto;}
.flow-def .flow-top .set .contents a{
    min-height:90px;
    margin:1px 0 8px 0;}
.flow-def.flow-wrap > .center {
	padding: 0 0px 0 10px;}
.flow-def.grid{
    display: grid;
    gap:20px;
    grid-template-columns: repeat(7,1fr);
    margin: 0;
    width: 100%;}
.flow-def.grid.g8{
    grid-template-columns: repeat(8,1fr);}
.flow-def .box{min-width:110px; padding: 10px;}
@media screen and (max-width:1120px){
.flow-def.grid {
    gap:15px;}
.flow-def .box {
    padding:10px 5px;}
.flow-def .box .ls-1 {
    letter-spacing: -2px;}
.flow-def .box .f_r07{
	font-size: 0.7rem;}
}
@media screen and (max-width:958px){
.flow-def.grid{
    grid-template-columns: repeat(5,1fr) !important;}
}
@media screen and (max-width:700px){
.flow-def.grid{
    grid-template-columns: repeat(3,1fr) !important;}
}
@media screen and (max-width:600px){
.flow-def.grid{
    grid-template-columns: repeat(2,1fr) !important;}
}
@media screen and (max-width:400px){
.flow-def.flow-wrap > .center .set li{
    margin-right:5px;
    margin-left: 5px;}
.flow-def .center .flow-def .box {
    min-width: 100px;
    padding:5px;}
}
.flow-wrap.xmin{}
.flow-wrap.xmin .date,
.flow-wrap.xmin .txt,
.flow-wrap.xmin a i{
	display: none !important;}
.flow-wrap.xmin .flow-line .flow-set{min-width:0;}
.flow-wrap.xmin .flow-line .item{width: 13px; height: 13px;}
.flow-wrap.xmin .flow-line .flow-set > li:before {
    margin-top: -2px;
    height:3px;}
/*https://staff.builmendx.com/~lee/invoice/edit_template.html#rs-tab01*/
.pane{
	border-radius: 10px;
	background: #fff;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 6px 12px 0px, rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
}
.pane-resize .handle{
    width: 0;
    height: 0;
    border-bottom: 13px solid #777;
    border-left: 13px solid transparent;
    position: absolute;
    bottom: 0;
    right: 0;}
.panetitle{
	border-radius: 10px 10px 0 0;
	height: 30px;
	background: #f7f7f7;
	border-bottom: solid 1px #aaa;
	padding: 5px;}
.panetitle + .scrolla {
    height: calc(100% - 30px );}
.flexmove{
	font-size: 0.7rem;
	z-index:9999;
	right:10px;
	width:260px;
    height: 330px;
	position: absolute;}
.flexmove .inscrl{
	height: calc(100% - 40px);
	overflow-y: scroll;}/*invoice/edit_template.html*/
.flexmove.ui-resizable{
	position: absolute;}/*invoice/edit_template.html#rs-tab01*/


/*docuflow/edit_template.html*/
.docueditBox{height:320px !important;}
.docueditBox .inscrl{
	height: calc(100% - 40px);}
.pane-drag.dropboxR.-modal.gone.ui-draggable-dragging{
    display:block;}

/*invoice/order-project.html */
.edittxt:hover{
	cursor: pointer;
	opacity: 0.65;}
/*https://staff.builmendx.com/~lee/invoice/client.html*/
.mainmsg{
	padding: 10px;
	background-color:#c9f6ff;
	border-bottom: solid 1px #a3ccd4;}
.mainmsg.st02{
	background-color: #FF474A;
	border-bottom: solid 1px #E30003;}
.mainmsg.st03{
	background-color: #666;
	border-bottom: solid 1px #666;}
.mainmsg a{color: #fff;}



/* https://staff.builmendx.com/~lee/design/docuflow/edit.html   style layout */
.flxclm-wrapper{}
.flxclm-wrapper > .flxclm.top0 .main-topmenu{}
.flxclm-wrapper > .flxclm.top0 .main-topmenu > .flx > .left.flx-o{
	flex:none;
	width: 100%;}
.flxclm-wrapper > .flxclm.top0 + .flxclm.top{}
.flxclm-wrapper > .flxclm.top0 + .flxclm.top > .dblock{display: flex;}
.flxclm-wrapper > .flxclm.top0 + .flxclm.top > .dblock > main{
	 order:2;
     flex:1;
     padding: 0;
     overflow-x: auto;}
.flxclm-wrapper > .flxclm.top0 + .flxclm.top > .dblock > aside.left{
	 order:1;
     margin-right: 0;}
.flxclm-wrapper > .flxclm.top0 + .flxclm.top > .dblock > aside.right{
	 flex:none;
	 order:3;}
.flxclm-wrapper > .flxclm.top0 + .flxclm.top > .dblock > aside{
	position: relative;}

/*order-prcsv-nv2.html only this */
header + .topmenu-dropdown-wrap + .container > .flxclm-wrapper > .flxclm.top0 + .flxclm.top > .dblock > aside.left{top:0;}
@media screen and (max-width: 771px){
header + .topmenu-dropdown-wrap + .container > .flxclm-wrapper > .flxclm.top0 + .flxclm.top > .dblock > aside.left{
	top:0 !important;
	margin-left: 0;}
header + .topmenu-dropdown-wrap + .container > .flxclm-wrapper > .flxclm.top0 + .flxclm.top > .dblock > main{
	transform: translateX(200%) !important;}
.panelActive.panelActiveLeft header + .topmenu-dropdown-wrap + .container > .flxclm-wrapper > .flxclm.top0 + .flxclm.top > .dblock > aside.left{
	position: absolute;
	left: -100% !important;}
.panelActive.panelActiveLeft header + .topmenu-dropdown-wrap + .container > .flxclm-wrapper > .flxclm.top0 + .flxclm.top > .dblock > main{
	transform: translateX(0%) !important;}
}



.flxclm-wrapper > .flxclm.top0 + .flxclm.top > .dblock > aside.left .scrolla{height: 100% !important;}
.flxclm-wrapper > .flxclm.top0 + .flxclm.top > .dblock > aside.right .scrolla{height: 100% !important;}
.flxclm-wrapper > .flxclm.top0 + .flxclm.top > .dblock > aside.right .tab-wrapper .scrolla{height: calc(100% - 41px) !important;}
/*https://staff.builmendx.com/~lee/design/invoice/edit_template.html */
.flxclm-wrapper > .flxclm.top0 + .flxclm.top > .dblock > aside.right .tab-wrapper .scrolla.escape{height: calc(100% - 39px) !important;}
.flxclm-wrapper > .flxclm.top0 + .flxclm.top > .dblock > aside.right .tab-wrapper .scrolla.escape .simplebar-track{bottom:-5px;}
/* */
.flxclm-wrapper > .flxclm.top0 + .flxclm.top > .dblock.left-ocR > main{
	margin-left: -153px;
	padding-left:153px !important;}
.flxclm-wrapper > .flxclm.top0 + .flxclm.top > .dblock.left-ocR > aside.left{
	margin-left: -153px;
    left: 0% !important;}
.flxclm-wrapper > .flxclm.top0 + .flxclm.top > .dblock.right-ocR > main{
	margin-right: -350px;
	padding-right: 350px !important;}
.flxclm-wrapper > .flxclm.top0 + .flxclm.top > .dblock.right-ocR > aside.right{
	margin-right: -350px;
    right: 0% !important;}

@media screen and (max-width: 771px){
.flxclm-wrapper > .flxclm.top0 + .flxclm.top > .dblock > aside.left{
	margin-left: -153px;
    left: 0% !important;}
.flxclm-wrapper > .flxclm.top0 + .flxclm.top > .dblock > aside.right{
	margin-right: -350px;
    right: 0% !important;}
.flxclm-wrapper > .flxclm.top0 + .flxclm.top > .dblock.left-ocR > aside.left{
	margin-left:0px;}
.flxclm-wrapper > .flxclm.top0 + .flxclm.top > .dblock.right-ocR > aside.right{
	margin-right:0px;}
.flxclm-wrapper > .flxclm.top0 .main-topmenu > .flx > .center.flx-o {
    padding-right: 0px;
	padding-left: 0;}
}

.web-v-m.panelActive.panelActiveLeft .topmenu-dropdown-wrap + .container,
.web-v-m header + .container {
    padding-top: calc(48px);}




/*https://staff.builmendx.com/~lee/design/bmdx/supply_detail_v2.html*/
.drop-zone.dash{
	padding: 10px;
    border:dashed 1px #ddd;}
.drop-zone.dash.sq{
    border:dashed 3px #ddd;
	width: 100px; height: 100px;}
.drop-zone--over.dash.sq .drop-info{opacity: 0;}
.drop-zone.dash.sq i{font-size: 3rem;}
.drop-zone--over.dash.sq{
    border:dashed 3px #aaa;
	background-color: #F2FCFF; }
.drop-zone--over.dash{
    border:dashed 1px #aaa;
	background-color: #F2FCFF; }

.drop-zone.dash .upld:hover{
	background-color: #F2FCFF;
	border: dashed 2px #aaa;}

/*https://staff.builmendx.com/~lee/design/bmdx/bldg.html import btn->modal* new dropzonejs */
/*https://staff.builmendx.com/~lee/design/invoice2/docsend-mass.html */
.-fieldst .dropzone{
	border:dashed 5px #ddd;}
.-fieldst .dropzone:hover{
	border:dashed 5px #aaa;}
.-fieldst .dropzone .upld{
	width: auto;
	height: auto;
	border:none !important;}
.-fieldst .dropzone.wrapst.dz-clickable .dz-message{font-size: 2rem; color: #666;}
.dropzone {}
.dropzone-msg{
	font-size: 2rem;
    color: silver;}
.dropzone.wrapst.dz-clickable .dz-message,
.dropzone.wrapst.dz-drag-hover .dz-message{
	border:none;}
.dropzone.dz-clickable .dz-message {
	border:dashed 5px transparent;}
.dropzone.dz-clickable .dz-message.wbdr{
	border:dashed 5px #ddd;}
.dropzone.dz-clickable .dz-message.wbdr:hover{
	border:dashed 5px #31D3FF;
	background-color:#F3FDFF;}
.dropzone.dz-clickable .dz-message.wbdr:hover .upld{
	color:#00b8eb;}
.dropzone.dz-clickable .dz-message.wbdr .upld{border:none !important;}
.dropzone.dz-clickable .dz-drag-hover .dz-message.wbdr{
	border:dashed 5px #C3EFEC;}
.dropzone.dz-started .dz-message {}
.dropzone.dz-drag-hover .dz-message{
	border:dashed 5px #ddd;}
.dropzone.dz-drag-hover .dropzone-back{
	opacity: 0.3;}
.dropzone .drop-info{display: none;}
.dropzone.dz-drag-hover .drop-info{display:block;}
.dropzone .drop-info{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: 0px;
    margin-top: -150px;
	opacity: 0;}
.dropzone.dz-drag-hover .drop-info{
    z-index: 1;
	opacity: 1;}
.dropzone .dz-preview {
	margin: 5px;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 140px;
  height: 210px;
  margin: 0 13px 13px 0;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.dropzone .dz-preview.dz-complete.dz-error {
  order: 1;
}
.dropzone .dz-preview .dz-remove {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  padding: 0 0 13px 0;
  font-size: 13px;
  text-align: center;
  background-image: linear-gradient(#fff 0, #fff 21px, transparent 36px);
}
.dropzone .dz-preview.dz-complete.dz-error .dz-remove {
  display: block;
}
.dropzone .dz-preview .dz-image {
  position: relative;
  display: block;
  overflow: hidden;
}
.dropzone .dz-preview .dz-image img {
  display: block;
}
.dropzone .dz-preview.dz-processing .dz-progress {
  opacity: 1;
  transition: all 0.2s linear;
}
.dropzone .dz-preview.dz-complete .dz-progress {
  opacity: 0;
  transition: opacity 0.4s ease-in;
}
.dropzone .dz-preview .dz-progress {
  opacity: 1;
  z-index: 1000;
  pointer-events: none;
  position: absolute;
  height: 16px;
  left: 50%;
  top: 50%;
  margin-top: -8px;
  width: 80px;
  margin-left: -40px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid;
  -webkit-transform: scale(1);
  border-radius: 8px;
  overflow: hidden;
}
.dropzone .dz-preview .dz-progress .dz-upload {
  background: #333;
  background-image: linear-gradient(to bottom, #8bc34a, #689f38);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
}
.dropzone .dz-preview .dz-error-message {
  display: none;
  padding: 6px;
  line-height: 16px;
  font-size: 13px;
  background: linear-gradient(to bottom, #be2626, #a92222);
  color: #fff;
}
.dropzone .dz-preview.dz-complete.dz-error .dz-error-message {
  display: block;
}
.dropzone .dz-preview .dz-filename {
  font-size: 13px;
  padding: 6px;
  line-height: 16px;
  text-align: center;
}
/*https://staff.builmendx.com/~lee/design/bmdx/estimate-d-edit.html*/
.upld-hv:hover{
	background-color: #aaa !important;}
.upld-hv-msg{
	color: #fff;
	text-shadow: 1px 1px 3px rgba(0,0,0,.5);
	font-size: 1.5rem;
    font-weight: bold;
    width: 100%;
    height: 100%;
	top:0;
	left: 0;
    position: absolute;
    align-items: center;
    justify-content: center;
	display: none;}
.upld-hv-msg > span{z-index: 1234;}
.upld-hv:hover .upld-hv-msg{
    display: flex;}




.upld{
	height:70px;
	width:70px;
	border:dashed 4px #ddd !important;}
.upld label .icon-plus{color: #666;}
.upld:has(.icon-plus):hover{
	border:dashed 4px #ccc !important;}
.upld:has(.icon-plus):hover i.icon-plus{
	color: #333;}
.upld:has(label):hover{
	border:dashed 4px #ccc !important;}
.upld.-hover{
	color:#00b8eb;
	background-color:#EAFDFF;
	border:dashed 4px #C1E8EF !important;}
/*  $(".upld").hover(function(){
    $(this).toggleClass('-hover');
  }); shoko*/
.upld i{font-size: 1.3rem;}
.upld.lgst{
	height:120px;
	width:120px;}
.upld.lgst i{font-size: 2rem;}
/* <p class="file_up inlinkL">
    <label for="file_up" class="file flx center clm hmax">
    <i class="icon-plus"></i><input type="file" id="file_up" tabindex="-1">
    <span class="block taCenter mr_t10">ファイル</span>
    </label>
    </p>
*/
/* add by mr yamasaki rqst */
.file-drag{
    background-image: repeating-linear-gradient(0deg, #ffea00, #ffea00 15px,
                      transparent 15px, transparent 28px, #ffea00 28px),
                      repeating-linear-gradient(90deg, #ffea00, #ffea00 15px,
                      transparent 15px, transparent 28px, #ffea00 28px),
                      repeating-linear-gradient(180deg, #ffea00, #ffea00 15px,
                      transparent 15px, transparent 28px, #ffea00 28px),
                      repeating-linear-gradient(270deg, #ffea00, #ffea00 15px,
                      transparent 15px, transparent 28px, #ffea00 28px)  !important;}



.flowchart{}
.flowchart-box{
	word-break: break-all;
	height:calc(5px * 7 * 2 + 5px);
	width:220px;
	overflow-y:auto;
	display: inline-block;
	position: relative;
    border-radius:4px;
	padding: 10px;
	background-color:#fff;
	border: solid 1px #aaa;}
li.start{padding-left: 220px;}
.start.flowchart-box{
	position: absolute;
    top: 50%;
	left: -220px;
    margin-top: -40px;}
.flowchart-box > .set li{margin:1px; font-size: 0.75rem;}
.flowchart-box > .set li input,
.flowchart-box > .set li .select-wrap{height: 24px;}
.flowchart-box > .set li .select-wrap:before{
    margin-top: -5px;
    background-size: 10px 10px;
    width: 10px;
    height: 10px;}

.flow-tree .flow-tree-set{
	position: relative;
    transition: all 0.5s;
	-webkit-transition: all 0.5s;}
.flow-tree .flow-tree-set:before{
	content: "";
    position: absolute;
    left:0%;
    width:40px;
    height:5px;
    background-color:#bbb;
	animation:flowborder .5s linear forwards;}
.flow-tree .flow-tree-set:first-child::before{
	display: none;}
.flow-tree .flow-tree-set > li:only-child::after,
.flow-tree .flow-tree-set > li:only-child::before {
	display: none;}
.flow-tree .flow-tree-set > li{
	display: flex;
    position: relative;
    padding-left: calc(40px + 40px + 5px);
    transition: all 0.5s;
	-webkit-transition: all 0.5s;}
.flow-tree > .flow-tree-set:first-child > li{
    padding-left: calc(0px);}
.flow-tree .flow-tree-set > li:before,
.flow-tree .flow-tree-set > li:after{
    content:"";
    position: absolute;
    left:40px;
    top: 0%;
    border-left:5px solid #bbb;
    border-bottom:5px solid #bbb;
	width:40px;
    border-radius:0 0 0 8px;}
.flow-tree .flow-tree-set > li:before{
    top: auto;
    bottom:0%;
    border-bottom:none;
    border-top:5px solid #bbb;
    border-radius:8px 0 0 0;
	animation-delay:1;}
.flow-tree .flow-tree-set > li:first-child::after,
.flow-tree .flow-tree-set > li:last-child::before{
    border: 0 none;}
.flow-tree .flow-tree-set > li .drct{
    position: absolute;
    font-size: 1.4rem;
    left: 60px;}
.flow-tree .flow-tree-set > li.up > .drct{
    top: -40px;}
.flow-tree .flow-tree-set > li.dn > .drct{
    bottom: -40px;}
.dn.branch.-depthU2 > .flowchart-box {
	transform: translateY(250%);}
.dn.branch.-depthU2D2 > .flowchart-box {
	transform: translateY(350%);}

.flowchart-box {
	height: calc(70px + 5px);}/*calc(5px * 7 * 2 + 5px)*/
.dn > .flowchart-box {
    transform: translateY(35px);}
.flow-tree-set > li:before{
    height: calc(35px);}
.flow-tree-set > li:after{
    height: calc(35px * 2);}
.flow-tree-set:before{
    top: calc(5px * 7 * 2 + 5px + 5px * 3);}
.flow-tree-set > li.only{
    padding-left: calc(40px);}
.flowDth03> li.only > .flowchart-box {
    transform: translateY(calc(35px * 1 + 5px * 4));}
.flowDth02.flow-tree-set:before {
    top: calc(35px * 5 + 5px * 5);}
.flowDth02 > li.up.branch > .flowchart-box {
    transform: translateY(calc(35px * 4 + 5px * 5));}
.flowDth01.flow-tree-set:before{
    top: calc(35px * 5 + 5px * 5);}
.flowDth01.flow-tree-set > li.up.branch > .flowchart-box {
    transform: translateY(calc(35px + 5px * 4));}
.flowDth01.flow-tree-set > li.dn.branch > .flowchart-box {
    transform: translateY(calc(35px * 3 + 5px * 4));}
.flowDth01.flow-tree-set > li.dn.branch > .flowchart-box + .flow-tree-set{
    transform: translateY(calc(5px * 7 * 2));}
.flowDth01.flow-tree-set > li.up:before{
	height: calc(35px + 5px * 4);}
.flowDth01.flow-tree-set > li.dn:after{
	height: calc(35px * 4 + 5px * 4);}

/*https://staff.builmendx.com/~lee/design/bmdx/estimate-d.html*/
.target-rightOn {}
.right-click {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
  padding: 2vw;
  border-radius: 1vw;
  font-size: 2.4vw;
  background-color: #fff;
}

/* Context Menu */
.contextMenu {
  --menu-border: rgba(255, 255, 255, 0.08);
  --menu-bg: linear-gradient(
    45deg,
    rgba(10, 20, 28, 0.2) 0%,
    rgba(10, 20, 28, 0.7) 100%
  );
  --item-border: rgba(255, 255, 255, 0.1);
  --item-color: #fff;
  --item-bg-hover: rgba(255, 255, 255, 0.1);
  height: 0;
  overflow: hidden;
  background: var(--menu-bg);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  position: fixed;
  top: var(--top);
  left: var(--left);
  -webkit-animation: menuAnimation 0.4s 0s both;
          animation: menuAnimation 0.4s 0s both;
  transform-origin: left;
  list-style: none;
  margin: 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  z-index: 999999999;
  box-shadow: 0 0 0 1px var(--menu-border), 0 2px 2px rgba(0, 0, 0, 0.03), 0 4px 4px rgba(0, 0, 0, 0.04), 0 10px 8px rgba(0, 0, 0, 0.05), 0 15px 15px rgba(0, 0, 0, 0.06), 0 30px 30px rgba(0, 0, 0, 0.07), 0 70px 65px rgba(0, 0, 0, 0.09);

  --menu-bg: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.85) 100%
  );
  --menu-border: rgba(0, 0, 0, 0.08);
  --item-border: rgba(0, 0, 0, 0.1);
  --item-color: rgb(10, 20, 28);
  --item-bg-hover: rgba(10, 20, 28, 0.09);
}
.contextMenu-item {
  padding: 4px;
}
.contextMenu-item[data-divider=top] {
  border-top: 1px solid;
}
.contextMenu-item[data-divider=bottom] {
  border-bottom: 1px solid;
}
.contextMenu-item[data-divider=top-bottom] {
  border-top: 1px solid;
  border-bottom: 1px solid;
}
.contextMenu-item[data-divider] {
  border-color: var(--item-border);
}
.contextMenu-button {
  color: var(--item-color);
  background: 0;
  border: 0;
  white-space: nowrap;
  width: 100%;
  border-radius: 4px;
  padding: 6px 24px 6px 7px;
  text-align: left;
  display: flex;
  align-items: center;
  width: 100%;
  -webkit-animation: menuItemAnimation 0.2s 0s both;
          animation: menuItemAnimation 0.2s 0s both;
  cursor: pointer;
	font-size: .95rem;
}
.contextMenu-button i{margin-right:8px;}
.contextMenu-button:hover {
  background-color: var(--item-bg-hover);
}

@-webkit-keyframes menuAnimation {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    height: var(--height);
    opacity: 1;
    border-radius: 8px;
    transform: scale(1);
  }
}

@keyframes menuAnimation {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    height: var(--height);
    opacity: 1;
    border-radius: 8px;
    transform: scale(1);
  }
}
@-webkit-keyframes menuItemAnimation {
  0% {
    opacity: 0;
    transform: translateX(-10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes menuItemAnimation {
  0% {
    opacity: 0;
    transform: translateX(-10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}



/* link location new version */
.hoverR{
    display: none;}
.on_mobile .hoverR,
.on_hover .hoverR,
.show .hoverR:not(.pageList > li .hoverR.pa_topright5){
	display:block;}
.on_mobile .hoverR.-flx,
.on_hover .hoverR.-flx,
.show .hoverR.-flx,
.hoverR.-flx.-view{
	display:flex;}
.hoverOpa{
	opacity:0.35;}
.hoverOpa:hover{
	opacity:1;}
.hoverOpa-rv:hover{
	opacity:.75;}
.dropdownP{
	position: relative;}
.dropdown-menu {
    max-height:200px;
    overflow-y:auto;
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
	z-index: 1999;
    font-size: 0.8rem;
    background-color: #fff;
    border: solid 1px #ccc;
    border-radius: 5px;
    box-shadow: 1px 1px 0 1px rgba(0,0,0,0.1);}
.dropdown-menu:has(.-box){
    overflow:hidden;
	border:none;
	background-color: transparent;
	box-shadow: none;}
.dropdown-menu .-box{
    overflow-y:auto;
    box-shadow: 1px 1px 0 1px rgba(0,0,0,0.1);
    background-color: #fff;
    border: solid 1px #ccc;
	border-bottom: none;
    border-radius:5px 5px 0 0;}
.dropdown-menu .-box + .btn{
	padding: 7px 5px;
    border-radius:0 0 5px 5px;}
.popW_body .dropdown-menu{
    z-index: 23457;}
.dropdown-menu.-mxhn{max-height: none;}
.dropdown-menu.-linest{border:solid 1px #009CF0;}
.list .list-i.box .dropdown-menu{left: -40px !important;}/*haken/staff.html*/
.fixC.cont-inner-head .dropdown-menu{left: -20px !important;}/*invoice/supply_detail.html*/
.dropdown-menu.show {
    display: block;}
.dropdown-menu > p.mr_b5{margin-bottom: 0 !important;}
.dropdown-menu .txtbtn[class^="icon-"]:before,
.dropdown-menu .txtbtn[class*=" icon-"]:before{
	font-size:1rem;}
.dropdown-menu .txtbtn.icon-cancel:before,
.dropdown-menu .txtbtn.icon-user2:before,
.dropdown-menu .txtbtn.icon-view-set04:before,
.dropdown-menu .txtbtn.icon-envelope:before{
	font-size: .85rem;}
.dropdown-menu .txtbtn.icon-arrow-up-thick:before,
.dropdown-menu .txtbtn.icon-arrow-down-thick:before{
	font-size:1.3rem;}
.dropdown-menu .txtbtn.icon-attach_file:before{
	font-size:1.15rem;
	font-weight:bold;}
.dropdown-menu .txtbtn.icon-link1:before{
	font-size:1.3rem;
	font-weight:bold;}
.dropdown-menu .txtbtn {
    padding-right: 15px;
    padding-left: 35px;
    padding-top: 5px;
    padding-bottom: 5px;}
.dropdown-menu .txtbtn.txto{padding-left: 15px;}
.dropdown-menu .txtbtn:hover{background-color: #eee;}
.dropdown-menu.-dialog-arrd{
	overflow: visible;
	max-height: none;}
.dropdown-menu.-dialog-arrd .dropdown-menu-in{
    overflow-y: auto;
	position: relative;
    max-height: 100%;}
.dropdown-menu.-dialog-arrd:after,
.dropdown-menu.-dialog-arrd:before {
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;}

.dropdown-menu.-dialog-arrd.-lefttop:after {
	top:10px;
	left:-10px;
	border-width:10px 10px 10px 0;
	border-color: transparent #fff transparent transparent;}
.dropdown-menu.-dialog-arrd.-lefttop:before {
	top:8px;
	left:-12px;
	border-width:12px 12px 12px 0;
	border-color: transparent #ccc transparent transparent;}

.dropdown-menu.-dialog-arrd.-leftbtm:after {
	bottom:10px;
	left:-10px;
	border-width:10px 10px 10px 0;
	border-color: transparent #fff transparent transparent;}
.dropdown-menu.-dialog-arrd.-leftbtm:before {
	bottom:8px;
	left:-12px;
	border-width:12px 12px 12px 0;
	border-color: transparent #ccc transparent transparent;}

.dropdown-menu.-dialog-arrd.-righttop:after {
	top:10px;
	right:-10px;
	border-width:10px 0 10px 10px;
	border-color: transparent transparent transparent #fff;}
.dropdown-menu.-dialog-arrd.-righttop:before {
	top:8px;
	right:-12px;
	border-width:12px 0 12px 12px;
	border-color: transparent transparent transparent #ccc;}

.dropdown-menu.-dialog-arrd.-rightbtm:after {
	bottom:10px;
	right:-10px;
	border-width:10px 0 10px 10px;
	border-color: transparent transparent transparent #fff;}
.dropdown-menu.-dialog-arrd.-rightbtm:before {
	bottom:8px;
	right:-12px;
	border-width:12px 0 12px 12px;
	border-color: transparent transparent transparent #ccc;}

.dropdown-menu.-dialog-arrd.-topleft:after {
	top:-10px;
	left:12px;
	border-width:0 10px 10px 10px;
	border-color: transparent transparent #fff transparent;}
.dropdown-menu.-dialog-arrd.-topleft:before {
	top:-12px;
	left:10px;
	border-width:0 12px 12px 12px;
	border-color: transparent transparent #ccc transparent ;}

.dropdown-menu.-dialog-arrd.-topright:after {
	top:-10px;
	right:12px;
	border-width:0 10px 10px 10px;
	border-color: transparent transparent #fff transparent;}
.dropdown-menu.-dialog-arrd.-topright:before {
	top:-12px;
	right:10px;
	border-width:0 12px 12px 12px;
	border-color: transparent transparent #ccc transparent ;}

.dropdown-menu.-dialog-arrd.-topcenter:after {
	top:-10px;
	left:calc(50% - 10px);
	border-width:0 10px 10px 10px;
	border-color: transparent transparent #fff transparent;}
.dropdown-menu.-dialog-arrd.-topcenter:before {
	top:-12px;
	left:calc(50% - 12px);
	border-width:0 12px 12px 12px;
	border-color: transparent transparent #ccc transparent ;}



.dropdown-menu.-dialog-arrd.-btmleft:after {
	bottom:-10px;
	left:12px;
	border-width:10px 10px 0 10px;
	border-color:#fff transparent transparent transparent;}
.dropdown-menu.-dialog-arrd.-btmleft:before {
	bottom:-12px;
	left:10px;
	border-width:12px 12px 0 12px;
	border-color:#ccc transparent transparent transparent ;}

.dropdown-menu.-dialog-arrd.-btmright:after {
	bottom:-10px;
	right:12px;
	border-width:10px 10px 0 10px;
	border-color:#fff transparent transparent transparent;}
.dropdown-menu.-dialog-arrd.-btmright:before {
	bottom:-12px;
	right:10px;
	border-width:12px 12px 0 12px;
	border-color:#ccc transparent transparent transparent ;}

.dropdown-menu.-dialog-arrd.-btmcenter:after {
	bottom:-10px;
	left:calc(50% - 10px);
	border-width:10px 10px 0 10px;
	border-color:#fff transparent transparent transparent;}
.dropdown-menu.-dialog-arrd.-btmcenter:before {
	bottom:-12px;
	left:calc(50% - 12px);
	border-width:12px 12px 0 12px;
	border-color:#ccc transparent transparent transparent ;}

.dropdown-menu .arrow_box{
	width: 100%;
	position: relative;
	top:0;
	left: 0;
	bottom:0;
	right: 0;
	transform: none;}

/*https://staff.builmendx.com/~lee/design/bmdx/caseMng-d-v2.html* toolip tippy */



/* 各リスト項目のパディング設定 *//* 別の開発会社からの依頼 */
.ui-menu .ui-menu-item-wrapper {
  position: relative; padding: 3px 1em 3px .4em;
	border-bottom: solid 1px #ccc!important;
}
/*.ui-widget-content {
	width:300px !important;
  height:200px !important;
}* 山崎さんご依頼autocompleteで影響が出ているので　/
/* 各リスト項目のパディング設定 *//*  別の開発会社からの依頼　*/
/* 各リスト項目のパディング設定 *//*  別の開発会社からの依頼　によるスタイルバグ修正　関連追記*/
.ui-widget-content.ui-datepicker {
  width:200px !important;
  height:auto !important;
}
.ui-datepicker .ui-widget-header{
	border:none;
	border-bottom: solid 1px #ddd;}
/* 各リスト項目のパディング設定 *//*  別の開発会社からの依頼　によるスタイルバグ修正　関連追記*/


.list .list-i .hoverR.-flx,
aside .tree li .hoverR.-flx{
	align-items: center;
	justify-content: center;
	position: absolute;
	width:30px;
	height:30px;
	top:0;
	right:0;
	color: #000;}
aside .tree li .hoverR.-flx{position: relative;}



/*table generator */
.dropdown-menu.-TableGenerator{width:170px; height: 185px;}
.TableGenerator{color:#000;}
.TableGenerator .TGtopbar{padding: 5px;}
.TableGenerator .TGtopbar form > span{
	padding: 0 5px;
    font-size: 1rem;}
.SizeChooser {
  position: relative;}

.SizeChooser table {
	margin: 0 auto;
  width: auto;
  border-collapse: separate;
  border-spacing: 3px;}

.SizeChooser td {
  cursor: pointer;
  border: 1px #ccc solid;
  height:12px;
  min-width:12px;
  line-height:12px;}

.SizeChooser-selected {
  border: 1px #333 solid !important;}

.SizeChooser-hover {
  background-color: #DEF;}

.SizeChooser form span {
  background-color: #fff;
  border: 1px #ccc solid;
  width: 30px;
  display: inline-block;}

.SizeChooser form {
  margin: 5px 0 0 3px;}


/*https://staff.builmendx.com/~lee/design/invoice/order.html */
/*.MultiLevelMenu li{padding-left: 20px;}*/
.accor-Ncld{
	display: none;
	font-weight: normal;
    background-color:#fff;}
.accor-Ncld > li > a{
	padding:8px 16px 5px 16px;}
.accor-Ncld > li.sub-current{
	background-color:#e3f6fa !important;}
.defmenu .accor-Ncld > li > a.wicon{
	padding:3px 16px 0px 26px !important;}
.defmenu .accor-Ncld .accor-Ncld > li > a.wicon{
	padding:3px 16px 0px 36px !important;}
.accor-Nprnt.wicon i,
.accor-Ncld > li > a.wicon i{
	font-size: 1.1rem !important;}
.accor-Ncld > li > a.wicon i.icon-trash{
	margin-top: -3px;}
.defmenu i.icon-trash{color:#8B3E14 !important;}
.accor-Nprnt.current > .accor-Ncld,
.accor-Nprnt.hover.active > .accor-Ncld{
	background-color: #fff;
    font-weight: normal;}
.accor-Ncld.-monthly{}
.defmenu .accor-Ncld.-monthly > li >a{
    padding: 2px 20px 2px 72px !important;}


/*https://staff.builmendx.com/~lee/design/bmdx/owner_top.html*//*normal rightside page */
.dblock.rightside.def{}
.dblock.rightside.def aside.right .right-oc.switch{display: none;}
@media screen and (max-width: 771px){
.dblock.rightside.def aside.right{
    border-left:solid 1px #ddd;
    margin-right: -350px;
    right: 0% !important;}
.dblock.rightside.def aside.right.wide{
    margin-right: -420px;}
.dblock.rightside.def.right-ocR aside.right,
.dblock.rightside.def.right-ocR aside.right.wide{
    margin-right:0px;}
.dblock.rightside.def aside.right .right-oc.switch{display:block;}
}
@media screen and (max-width: 480px){
.dblock.rightside.def aside.right{
	width:300px !important;}
.dblock.rightside.def aside.right{
    margin-right: -300px !important;}
.dblock.rightside.def.right-ocR aside.right{
    margin-right:0px !important;}

}

/***https://staff.builmendx.com/~lee/design/bmdx/spot-calv.html*****/
.defplain aside{top:0 !important;}
.defplain aside .list{padding: 0 !important;}
.defplain aside .list li{
	border-bottom: solid 1px #bbb;
	padding:7px 10px;}
.defplain aside .list li .draggable{
    background-color:unset;
    padding: 0px;}


/*https://staff.builmendx.com/~lee/design/bmdx/deposit-offset.html*/
.slide-panel{
	display: flex;
    overflow: hidden;}
.slide-panel .main{
	transition: ease .2s;
	flex:1;}
.slide-panel .slide-panel-i{
	transition: ease .2s;}
.slide-panel .sld2Left{
	width: 280px;
    margin-right: -280px;}
.slide-panel.-act .sld2Left.hide0{
	margin-right: 0px;}


/******************************************************************************************************************************************************* version mng ************************************/
.kclr-cng-grn{}

/**/
#pages-bmdx{}
#pages-bmdx textarea:focus,
#pages-bmdx input:focus{
  border: 1px solid #009CF0;
  outline: 1px solid #009CF0;}
#pages-bmdx .select-wrap{
	padding:0 !important;
	background-color: transparent;
	border:none;}
#pages-bmdx .select-wrap.bg-white select{
	background-color: #fff;}
#pages-bmdx .select-wrap select{
    background-color: #f7f7f7;
	border: 1px solid #ccc;}
#pages-bmdx .select-wrap select:focus{
    border: 1px solid #009CF0;
    outline: 1px solid #009CF0;}

/**/
.invV2 .topmenu{
    border-bottom: solid 1px #ccc;}
.invV2 .wrapper{
	max-width: none;}
.invV2 .topmenu .current a {
    border-bottom: 4px solid var(--kclr-invV2);}
.invV2 .menust.nav-tabs .nav-link.active + .line, .invV2 .menust.nav-tabs .nav-item:hover + .line {
    background-color:var(--kclr-invV2);}
.invV2 .dblock.leftside.indef aside{
	width:280px !important;}
.invV2 .dblock.leftside.indef > main {
    padding-left:280px !important;}
.invV2 .btn:not(.rnd):not(.sq):not([class^="w"]):not([class*=" w"]):not(.panel-btm-head .btn){
	min-width: 80px;}
.invV2 .btn{padding: 7px 9px 6px 9px;}
.invV2 .btn.linest.thin {
    padding:6px 8px 5px 8px;}
.invV2 .box-top-title .btn{height: 27px;}
.invV2 .btn:not(.linest):not(.bg-gray):not(.panel-btm-head .btn){
	background-color:var(--kclr-invV2) !important;}
.invV2 .hd-r-menu > li > a:not(.btn) {
    color:var(--kclr-invV2) !important;}
.invV2 .hd-r-menu > li a i {
    color:var(--kclr-invV2) !important;}
.invV2 .linest {
    border-color:var(--kclr-invV2) !important;}
.invV2 a:not(.btn):not(){
    color:var(--kclr-invV2);}
.invV2 .toggle-btn.active {
    background-color:var(--kclr-invV2) !important;}
.invV2 .toggle-btn.active.-off{
	background-color: #aaa !important;}
.invV2 .resizable-tab-col {
    padding: 0px;
    background-color:#eee;}
.invV2 table.listfullmod{
	border:none;}
.invV2 table.listfullmod th,
.invV2 table.listfullmod td{
	font-size: .8rem;}
.invV2 table.listfullmod thead th,
.invV2 table.listfullmod tbody th {
    border-top: solid 1px #ccc;
    border-right: solid 1px #eee;
    border-bottom: solid 1px #ccc;
    background-color:#fff;
    box-shadow:none;}
.invV2 table.listfullmod td{
	border-bottom: none;
	padding:4px 6px;}
.invV2 table.def.-form th {
    background-color:#FFEEEF;}
table.def.-form th,
table.def.-form td{
	padding:6px 8px;}
table.def.-form td:has(input){
	padding:1px 1px;}
table.def.-form td:has(input) .txt{
	padding:4px 6px;}
table.def.-form td input[type="text"]{
    border: none;
	height:28px;}
table.def.-form th.must{top:0;}
.invV2 aside.left {
    border-right: solid 1px #ccc;}
.invV2 aside .defmenu > li{
	border-bottom: none;}
.invV2 aside .defmenu li .title:not(.pic-box .title){
	background: #fff;
	color: #000;
	padding:7px 14px;}
.invV2 aside .defmenu:not(.plain) .atag{
	padding-right: 0;}
.invV2 aside .defmenu > li > a,
.invV2 aside .defmenu > li > .tree > li > a, aside .defmenu > li .title:not(.pic-box .title){
	padding: 7px 14px 7px 24px;}
.panel-vertical{
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: calc(100vh - 48px - 42px);}
.panel-horizontal{
    display: flex;
	overflow:hidden;
    height: calc(100vh - 48px - 42px);}
.panel-scrl{
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    flex: 0 0 auto;}
.panel-scrlf{
	overflow: hidden;
    flex: 1;}
.panel-mv{
	background: #fff;
	flex: 1 1 auto;
	overflow:auto;}
.panel-vertical .panel-scrl{
    width: 100%;
    height: calc(100vh - 48px - 42px - 480px);
	min-height: 270px;}
.panel-horizontal .panel-scrl{
	overflow-y: auto;
    min-width: 320px;}
.panel-scrlf .resizable-tab-col{
	height: 100%;}
.splitter-horizontal,
.splitter-vertical {
	z-index:3;
	flex: 0 0 auto;}
.splitter-horizontal{
	height:20px;
    cursor: row-resize;}
.splitter-vertical{
	width:20px;
	cursor: col-resize;}
.panel-vertical .splitter-horizontal + div{
	margin-top: -20px;
	z-index:2;
	border-top: solid 1px #ccc;}
.panel-horizontal .splitter-vertical + div{
	margin-left: -20px;
	z-index:2;
	border-left: solid 1px #ccc;}
.panel-horizontal .panel-mv:has(.resizable-tab-col){
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;}
.panel-btm-head{
	padding: 10px;
	border-bottom: solid 1px #ccc;
	background-color: #f7f7f7;}
.panel-btm-head .btn{
	min-width:0;
	color: #000;
	background-color: #ddd !important;
	border:solid 1px #aaa;}
.panel-i7{
	width: 70%;}
.panel-i3{
	width: 30%;}
@media (max-height:630px) {
.panel-vertical{height: auto;}
}
/**/
:root{
  --kclr-cng-grn :#11D800;
  --kclr-invV2 :#e61f19;
}

/* */
footer.mv-fix{
	z-index: 123;
	background-color: #fff;
    border-top: solid 1px #ddd;
    width: 100%;
    left: 0;
    bottom: 0;
	padding: 0;
    position: fixed;}
footer.mv-fix > ul > li{
	position: relative;
	margin-right: 0;
    flex: 1;}
footer.mv-fix > ul > li .num{
    position: absolute;
    bottom:3px;
    right:3px;}
footer.mv-fix > ul > li a{
	height: 100%;
    color: #000;
    flex-direction: column;
    position: relative;
    font-size: 0.56rem;
     padding: 9px 2px 0px 2px;}
footer.mv-fix > ul > li.current a{
        color: #fff;
        font-weight: bold;
        border-bottom: none;
        background-color: #009CF0;}
footer.mv-fix > ul > li span.flx {
        height: 30px;
        width: 30px;
        margin-bottom:7px;}
footer.mv-fix > ul > li i {
        display: block;
        font-size: 1.7rem;}



.defmenu.-tree .title{
	background-color: #f7f7f7 !important;
	padding:10px !important;}
.defmenu.-tree .tree > li > .trigger {
	border-bottom: none;
    padding-left:10px !important;}
.defmenu.-tree ul.-fin{
	position: relative;
	margin-left: 20px;
    padding-left:0px !important;}
.defmenu.-tree ul.-fin:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1px;
    border-left: 1px solid #666;}
.defmenu.-tree ul.-fin > li{
    position: relative;
    padding-left: 1.5em;}
.defmenu.-tree ul.-fin > li:before {
    content: "";
    position: absolute;
    top: 1em;
    left: 0;
    width: 1em;
    height: 1px;
    border-top: 1px solid #666;}
.defmenu.-tree ul.-fin > li:last-child:before {
    background-color: white;
    height: auto;
    top: 1em;
    left: -1px;
    bottom: 0;}
.defmenu.-tree ul.-fin > li:last-child:hover:before{
    background-color:var(--hoverclr) !important;}
.defmenu.-tree ul.-fin > li .treeicon i{
    font-size: 1.2rem;}
.defmenu.-tree ul.-fin > li .tp{
    padding: 7px 10px 7px 7px;
    padding-right: 60px;}
.defmenu.-tree .tree > li > .trigger .Rtrg i{
	font-size:1.1rem;}
aside .defmenu.-tree .tree > li .num:not(.def){
	font-size: .65rem;
    height: 20px;
    line-height: 20px;
    padding: 0 4px;}
li:has(>.hover.current) .trigger{
    background-color: #c9edf5 !important;}



.-open.DetaildataT > td{
	border-top:solid 5px #bbb;}
.-open.DetaildataR > td{
	border-bottom:solid 5px #bbb;}
.-open.DetaildataT > td:first-of-type,
.-open.DetaildataR > td:first-of-type{
	border-left:solid 5px #bbb;}
.-open.DetaildataT > td:last-of-type,
.-open.DetaildataR > td:last-of-type{
	border-right:solid 5px #bbb;}


/**あとで別ファイルに移す**/

/* 複数選択チェックボックススタイル */
.js-multi-select-container {
    position: relative;
}

.js-month-checkboxes {
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    font-size: 12px;
}

.js-month-checkbox {
    display: block;
    margin: 2px 0;
    padding: 2px 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.js-month-checkbox:hover {
    background-color: #f5f5f5;
}

.js-month-checkbox input[type="checkbox"] {
    margin-right: 5px;
}

.js-month-checkbox input[type="checkbox"]:checked + span {
    font-weight: bold;
    color: #2D83D0;
}

.js-selected-months-display {
    font-size: 11px;
    color: #666;
    margin-top: 3px;
    line-height: 1.2;
}