/* ======================================

    ResourceJobMonitor.css
    　資源別作業指示画面のスタイル

======================================== */

/*---------------------------------

  デフォルト

---------------------------------*/
#maincontent-wrap {
    overflow: hidden;
}
#DivListDown, input[type="submit"] {
    color: #f8f8f8;
    background-color: #222 !important;
    /*border: solid 1px #68d5db;*/
}
#DivListDown :hover{
    transition-duration: 0.3s;
    background-color: rgba(104, 213, 219, 0.4) !important;
}

#DivTopMenuRight
{
	position:relative;
	width:650px;
	height:32px;
	margin-left:auto;
}

#DivLineReschedule
{
	position:absolute;
	top:10px;
	right:352px;
}
#DivLineReload
{
	position:absolute;
	top:0px;
	right:264px;
}
#DivLineZoom
{
	position:absolute;
	top:0px;
	right:176px;
}
#DivLineReduce
{
	position:absolute;
	top:0px;
	right:88px;
}

#DivSystemSetting
{
	position:absolute;
	top:0px;
	right:0px;
}

#DivSelectResource
{
	position:absolute;
}
#PTopMenuTitle
{
	position:absolute;
	top: 4px;
	left:100px;
	margin:0px;
	font-size:3.0rem;
	width: calc(100% - 760px);
    overflow: hidden;
    height: 35px;
}
#DivPageMain
{
	position:relative;
	width:100%;
	height:100%;
	overflow:hidden; /*auto;*/
    margin: 15px 0 0 0;
}




#DivChartMain
{
	position:relative;
	width:calc(100% - 40px);
	height:275px;
	margin:0px 20px;

}

#DivChartContentBk
{
	position:relative;
	width:250px;
	height:250px;
	margin:0px;
	float:left;
    text-decoration: none;
    color: #f8f8f8;
    cursor: pointer;
}
#DivChartContentBk.historical {
    color: gray;
}
/* ガントチャート日付隠しカレンダー */
#DivChartMain .calendarControl {
    display: none;
}
#DivDayBk
{
	position:relative;
	width:100%;
	height:150px;
	padding:40px 0px 0px 0px;
	box-sizing:border-box;
	margin:0px;
	text-align: center;
}
#DivDayBk p
{
	font-size:8.0rem;
	margin:0px;
}
#DivChartValueBk
{
	position:relative;
	width:100%;
	height:100px;
	text-align: center;
}
#DivChartValueBk p
{
	font-size:3.6rem;
	margin:0px;
}

#DivChartValueBk .span-split {
    margin-left: 0.5vw;
}
#DivChartPrevBk
{
	position:relative;
	height:100%;
	width:50px;
	background-size:50px 150px;
	background-image: url('../images/prev2.png');
	background-repeat:no-repeat;
	background-position:center;
	float:left;

}
#DivChartPrevBk_w
{
	position:relative;
	height:100%;
	width:50px;
	background-size:50px 150px;
	background-image: url('../images/prev2_w.png');
	background-repeat:no-repeat;
	background-position:center;
	float:left;

}


#DivChartDataBk
{
	position:relative;
	height:100%;
	width:calc(100% - 380px);
	background-color:#444;
	padding:0px 20px;
	box-sizing:border-box;
	float:left;
	border-radius:10px 0px 0px 0px;

}
#DivChartDataBk_w
{
	position:relative;
	height:100%;
	width:calc(100% - 350px);
	background-color:#ccc;
	padding:0px 20px;
	box-sizing:border-box;
	float:left;
	border-radius:10px 0px 0px 0px;

}
#DivChartNextBk
{
	position:relative;
	height:100%;
	width:50px;
	background-size:50px 150px;
	background-image: url('../images/next2.png');
	background-repeat:no-repeat;
	background-position:center;
	float:left;
}
#DivChartNextBk_w
{
	position:relative;
	height:100%;
	width:50px;
	background-size:50px 150px;
	background-image: url('../images/next2_w.png');
	background-repeat:no-repeat;
	background-position:center;
	float:left;
}
#DivChartNow
{
	position:absolute;
	height:calc(100% - 40px);
	width:2px;
	background-color:#F00;
	left:100px;
	top:0px;
	margin:20px;

}
#DivChartHeader
{
	width:100%;
	height:20px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: left;
	-ms-flex-pack: left;
	justify-content: left;
	overflow:hidden;

}
#DivChartHeader div
{
	position:relative;
	height:15px;
	width:15px;
	margin-top:5px;
	margin-right:1px;
	box-sizing:border-box;
	font-size:0.9rem;
	font-style:italic;
	text-align:left;
	padding-top:2px;
	padding-left:1px;

}
#DivChartHeader div.base-time
{
	border-left:solid #ccc 1px;

}
.chart-line
{
	position:relative;
	width:100%;
	height:100px;
	margin:0px;
	background-color:#ddd;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: left;
	-ms-flex-pack: left;
	justify-content: left;
	overflow:hidden;

}
div.chart-line div.cell
{
	height:100px;
	width:20px;
	margin-left:1px;
	box-sizing:border-box;
	background-color:#fff;
	

}
div.chart-line.scale-small div.cell {
    width: 15px;
}
div.chart-line p
{
	position:absolute;
	width:140px;
	left:calc(100% - 150px);
	background:rgba(0,0,0,0.4);
	margin:25px 0px;
	font-size:3.6rem;
	font-style:italic;
	border-radius:10px;
	text-align: center;
    padding: 5px 0;

}
div.chart-line div.chart-line-over
{
	position:absolute;
	height:100%;
	width:100%;
	left:0px;
	top:0px;
	background-color:transparent;
	/*display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: left;
	-ms-flex-pack: left;
	justify-content: left;*/
	overflow:hidden;

}
div.chart-line-over div
{
    position: absolute;
	height:100px;
	box-sizing:border-box;
	background-color:transparent;
}

.chart-label{
	position: absolute;
    width: 140px;
    left: calc(100% - 170px);
    background: rgba(0,0,0,0.4);
    margin: 25px 0px;
    font-size: 3.6rem;
    font-style: italic;
    border-radius: 10px;
    text-align: center;
    padding: 5px 0;
    
}

.plan-label {
	top: 20px;
}

.result-label {
	top: 135px;
}
.chart-space
{
	position:relative;
	height:10px;
	width:100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: left;
	-ms-flex-pack: left;
	justify-content: left;
	overflow:hidden;
}
div.chart-space div
{
	position:relative;
	height:15px;
	width:20px;
	margin-right:1px;
	box-sizing:border-box;

}
div.chart-space div.base-time
{
	border-left:solid #ccc 1px;

}
#DivChartFooter
{
	position:relative;
	width:100%;
}

#DivListMenu
{
	position:relative;
	height:32px;
	width:calc(100% - 40px);
	margin:10px 20px 10px 20px;
}
#DivListMenuRight
{
	position:relative;
	width:400px;
	height:32px;
	margin-left:auto;
}
#DivListPrint
{
	position:absolute;
	top:0px;
	left:calc(100% - 80px);


}
#DivListDown
{
	position:absolute;
	top:0px;
	left:calc(100% - 170px);

}
#DivListSearch
{
	position:absolute;
	top:0px;
	left:calc(100% - 260px);

}
#DivListAdd
{
	position:absolute;
	left:230px;
}
#DivInputBarcode
{
	position:absolute;
	left:370px;
	height:32px;
	width: 25%;
}
#DivInputBarcode .icon-reader2
{
	position:absolute;
	top:2px;
	height:30px;
	width:30px;
    background-size: 32px 32px;
    background-repeat: no-repeat;
    background-image: url('../images/reader2_mini.png');
}
#DivInputBarcode input
{
	position:absolute;
	left:30px;
	top:2px;
	height:24px;
	width: 100%;

	ime-mode:disabled;
}
#LinkButtonNotyet
{
	position:absolute;
	left:0px;
}
#LinkButtonAll
{
	position:absolute;
	left:110px;
}
.btn-list
{
	width:100px;
	padding-top:2px;
	box-sizing:border-box;
	text-align: center;
    vertical-align: middle;
    text-decoration: none;
}

.btn-list span
{
	font-size:2.0rem;
}

.btn-list-check
{
	background-color:#68d5db !important;
	color:#222;
}

.btn-list-noncheck
{
	background-color:#222 !important;
	color:#68d5db;
}


.divListMainArea
{
	position:relative;
	width:100%;
	/*height:calc(100% - 340px);*/
    height:calc(87vh - 340px);
	overflow:auto;

}
.list-content-bk
{
	position:relative;
	width:calc(100% - 40px);
	height:40px;
	margin:0px 0px 5px 20px;
}
.list-content-btn
{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	text-indent:-999px;
	z-index:3;
}
.list-no-bk
{
	position:relative;
	width:40px;
	height:40px;
	margin-right:4px;
	box-sizing:border-box;
	float:left;
	border-radius:5px;
	color:#000;
	padding: 11.5px 0;
	text-align: center;
    vertical-align: middle;
}

.list-area-bk
{
	position:relative;
	width:calc(100% - 44px);
	height:40px;
	background-color:#222;
	box-sizing:border-box;
	border-left:solid 15px;
	border-top:solid 1px;
	border-right:solid 1px;
	border-bottom:solid 1px;
	border-radius:5px;
	float:left;
	overflow:hidden;
}
.list-area-bk_w
{
	position:relative;
	width:calc(100% - 44px);
	height:40px;
	background-color:#f8f8f8;
	box-sizing:border-box;
	border-left:solid 10px;
	border-top:solid 1px;
	border-right:solid 1px;
	border-bottom:solid 1px;
	border-radius:5px;
	float:left;
	overflow:hidden;
}
.list-area-bk_w.border-white
{
	border-color:#ccc !important;
	border-left:solid 1px;
	padding-left:10px;
}

.list-area-bk_w:after border-gray
{
	border-color:#949495 !important;
}


.list-area-ribbon
{
	height: 38px;
	width: 10%;
	float:left;
}

.list-area-ribbon:after 
{
	border-width: 19px 10px 19px 0px;
    border-color: transparent #444 transparent transparent;
}

.list-area-ribbon p
{
	position:absolute;
	margin-left:38px;
	margin-top:8px;
	font-size:1.6rem;
}

.list-area-icon
{
	position:absolute;
	width:30px;
	height:30px;
	margin:4px 0px;
	box-sizing:border-box;
	border-radius:5px;
	background-color:#222;
	background-size:25px 25px;
	background-repeat:no-repeat;
	background-position:center;
}
.icon-stop
{
	background-image: url('../images/stop_mini.png');
}
.icon-pause
{
	background-image: url('../images/pause_mini.png');
}
.icon-off
{
	background-image: url('../images/off_mini.png');
}
.icon-start
{
	background-image: url('../images/start_mini.png');
}
.icon-comp
{
	background-image: url('../images/comp4_mini.png');
}

.plan-content {
    float: left;
    height: 38px;
	width: 54%;
}

.result-content {
    float: left;
    height: 38px;
	width: 36%;
}

.list-area-content
{
	position:relative;
	float:left;
	height:100%;
	padding-left:10px;
	padding-right:5px;
	box-sizing:border-box;
}
.lac-gray
{
	background-color:#444;
}
.lac-gray_w
{
	background-color:#ccc;
}
.content-head
{
	position:relative;
	font-size:1.1rem;
	text-align:left;
	color:#aaa;
	margin:0px;
}
.content-value
{
	position:relative;
	text-align:left;
	font-size:1.6rem;
	font-style:italic;
	margin:0px;
}
.cv-red
{
	background-color:red;
}

.area-planstarttime
{
	width: 27%;
}
.area-cycletime
{
	width: 12%;
}
.area-orderno
{
	width: 14%;
}
.area-productcode
{
	width: 14%;
}
.area-jobcode
{
	width: 23%;
}
.area-quantity
{
	width: 10%;
}

.area-starttime
{
	width: 37%;
}
.area-endtime
{
	width: 37%;
}
.area-workerId
{
	width: 25%;
}

.list-hidden-barcode
{
	display:none;
}

/*チャート色表示*/

.dialog-setting-menu{

	height: 300px;

}
.dialog-add-job{
	width:	900px;
	height: 450px;
}

.dialog-search-job{
	width:	900px;
	height: 350px;
}

.dialog-system-setting{
	width:	1000px;
	height: 350px;

}


#DivListMenu {
    margin: 20px 20px 10px 20px;
    
}
#DivScrollBox {
	white-space: nowrap;
  	overflow-x: auto;
  	-webkit-overflow-scrolling: touch;
  	
  	display: inline-block;
    width: 100%;
}

#DivChartHeader {
	width:calc(56 * 18px);/*18時間分*/
	flex-wrap: nowrap;
    display: table;
    table-layout: fixed;
    
}
.chart-space {
	width: calc(56 * 18px);/*18時間分*/
	flex-wrap: nowrap;
	display: table;
    table-layout: fixed;
}

#DivChartHeader div {
	display: table-cell;
	width: 20px;
}
#DivChartHeader.scale-small div {
	display: table-cell;
	width: 15px;
}
.chart-space div {
	display: table-cell;
    width: 20px;
}
.chart-space.scale-small div {
	display: table-cell;
    width: 15px;
}

.chart-line {
	flex-wrap: nowrap;
    display: table;
    table-layout: fixed;
}

.cell {
    display: table-cell;
    border-left: 1px solid #ddd;
}

/*---------------------------------

  印刷用

---------------------------------*/
.print-off {
	display:none;
}

@media print {
	body {
		background-color: #fff;
	}
	#print {
		height: 100%;
		width: 100%;
	}
	.divListMainArea {
		height: 100%;
		overflow: visible;
	}
}


/*---------------------------------

  タブレット

---------------------------------*/
@media screen and (max-width: 1230px){
	
	html{
		font-size: 50.0%;
	}
	#DivTopMenu {
    	height: 50px;
    }
	
	#PTopMenuTitle {
    	top: 0px;
	    width: calc(100% - 460px);
	    overflow: hidden;
	    height: 30px;
    }
    
    #DivTopMenuRight {
    	width: 360px;
    }
    
    
    #DivLineReschedule {
    	top: 35px;
    	right:10px;
    }

	#DivInputBarcode
	{
	    left: auto;
	    right: 40%;
		width: 20%;
	}
    	
	#maincontent-wrap {
    	height: calc(100% - 70px);
        overflow: hidden;
    }
	.divListMainArea {
    	/*height: calc(100% - 400px);*/  
        height: calc(98vh - 400px);  
    }

	.list-content-bk {
    	height: 70px;
    }
	.list-no-bk {
		height: 70px;
		padding: 30px 0 0 0;
	}
	
	.list-area-bk {
		height: 70px;
		border-left: solid 10px;
		background: linear-gradient(90deg,#444 0%,#444 50%,#222 50%,#222 100%);
	}
	
	.list-area-ribbon {
	    height: 30px;
	    width: 120px;
	    float: none;
	}
	
	.list-area-icon {
	    width: 27px;
	    height: 27px;
	    margin: 1px 0px;
	    background-size: 24px 24px;
	}
	
	.list-area-ribbon p {
	    margin-top: 4px;
	}
	
	.list-area-ribbon:after {
    	border-width: 15px 10px 15px 0px;
    }
	
	
	.chart-label{
		width:100px;
	    left: calc(100% - 130px);
	    margin: 13px 0px;
	    font-size: 3.0rem;
	}

	.plan-label {
		top: 20px;
	}

	.result-label {
		top: 105px;
	}
	.plan-content {
    	margin-top: 4px;
		width: 50%;
    	height: auto;
	}
	
	.result-content {
    	margin-top: 4px;
	    height: auto;
	}
	#DivPageMain{
        margin: 0px;
	}
	#DivChartMain {
		height: 215px;
		width: 99%;
	}
	
	#DivChartContentBk {
		height: 120px;
		width: 14%;
		float: left;
	}
	
	#DivDayBk {
		height: 80px;
		margin: 0;
	}
	
    #DivChartValueBk {
		height: 40px;
		margin: 35px 0 0 0;
    }
	#DivChartValueBk p
	{
		font-size:2.8rem;
		margin:0px;
	}

    #DivChartPrevBk {
    	background-size: 40px 120px;
    }
    
    #DivChartNextBk {
    	background-size: 40px 120px;
    }
    
    #DivChartDataBk {
    	width: calc(100% - 290px);
    }
    
    .chart-line {
    	width: 100%;
    	height: 70px;
    }
    
    .chart-line .cell{
    	height: 70px !important;
    }
    
    div.chart-line-over div {
    	height: 70px;
    }
    
    div.chart-line p {
	    height: auto;
	    width: 100px;
	    left: calc(100% - 110px);
	    margin: 13px 0px;
	    font-size: 3rem;
    }
    
    #DivChartNow {
    	height: 70%;
    }
    
    .btn-m span {
    	font-size: 2.6rem;
    }
    
    .dialog-search-job {
		width:	700px;
		height: 400px;
	}
	
	.dialog-add-job {
		width:	700px;
		height: 400px;
	}
    .dialog-system-setting{
		width:	700px;
		height: 400px;

	}
}
/*---------------------------------

  タブレット(ipadpro縦)

---------------------------------*/
@media screen and (max-width: 1024px)
{
    #DivChartPrevBk {
    	margin-left: 50px;
    }
	#DivChartValueBk p
	{
		font-size: 2.2rem;
	}

	.list-content-bk {
    	height: 100px;
    }
	.list-no-bk {
		height: 100px;
		padding: 45px 0 0 0;
	}
	.list-area-bk {
    	height: 100px;
		background: linear-gradient(90deg,#444 0%,#444 50%,#222 50%,#222 100%);
	}
	.plan-content {
		width: 50%;
	}
	
	.result-content {
		width: 50%;
	    height: auto;
	}
	.area-planstarttime
	{
		width: 40%;
	}
	.area-cycletime
	{
		width: 18%;
	}
	.area-orderno
	{
		width: 20%;
	}
	.area-productcode
	{
		width: 20%;
	}
	.area-jobcode
	{
		width: 40%;
	}
	.area-quantity
	{
		width: 10%;
	}

	.area-starttime
	{
		width: 40%;
	}
	.area-endtime
	{
		width: 40%;
	}
	.area-workerId
	{
		width: 20%;
	}
}

/*---------------------------------

  タブレット(縦)

---------------------------------*/
@media screen and (max-width: 820px){
	
	.btn-list {
    	width: 10%;
    	padding-top: 8px;
    }
    .btn-list span {
	    font-size: 1.7rem;
	}
	#LinkButtonNotyet {
    	left: 0px;
    }
    #LinkButtonAll {
    	left: 11%;
    }
    #DivPageMain{
        margin: 0px;
	}
	#DivChartMain {
		width: 100%;
	}
	
	#DivChartValueBk p
	{
		font-size:2.6rem;
	}

	#DivInputBarcode
	{
	    left: auto;
	    right: 42%;
		width: 25%;
	}
    
    #DivListAdd {
	    left: 23%;
	    width: 10%;
	}
	
	#DivListMenuRight {
    	width: 100%;
    	right: 0px;
    }
    
    #DivListSearch {
	    left: auto;
	    width: 11%;
	    right: 24%;
	}
	
	#DivListDown {
	    left: auto;
	    width: 11%;
	    right: 12%;
	}
    
    #DivChartDataBk {
    	width: calc(100% - 270px);
    }
	
	.csvDownloadButton {
    	width: 100% !important;
    }
	
    #DivListPrint {
    	left: auto;
	    width: 11%;
	    right: 0px;
	}
}

/*---------------------------------

  スマートフォン(縦)

---------------------------------*/
@media screen and (max-width: 425px){

	html{
		font-size: 40.0%;
	}
	
	#maincontent-wrap {
    	height: calc(100% - 92px);
        overflow: hidden;
    }
    #DivPageMain{
        margin: 0px;
	}
	#DivChartMain {
	    height: 170px;
	    width:calc(100% - 10px);
		margin:0px 5px;
	}
	
	#DivChartContentBk {
	    height: 70px;
	    margin-bottom: 5px;
	}
	
	#DivDayBk {
    	height: 48px;
    }
	
	#DivDayBk p {
    	font-size: 4.5rem;
    }

    #DivChartValueBk {
    	height: 22px;
    }
    
    #DivChartValueBk p {
	    font-size: 1.3rem;
	}
    
    #DivChartPrevBk {
	    height: 160px;
	    width: 30px;
	    background-size: 25px 80px;
		margin-left: 10px;
	}
	
	#DivChartNextBk {
	    height: 160px;
	    width: 30px;
	    background-size: 25px 80px;
	}
	
	#DivChartDataBk {
	    height: 160px;
	    width: calc(100% - 130px);
	    padding: 0px 10px;
	}
	
	.chart-line {
	    height: 48px;
	}
	
	.chart-line .cell {
	    height: 48px !important;
	}
	
	div.chart-line-over div {
    	height: 48px;
    }
	
	.chart-label{
		width:60px;
	    left: calc(100% - 75px);
	    margin: 3px 0px;
	}

	.plan-label {
		top: 20px;
	}

	.result-label {
		top: 83px;
	}
    .chart-space {
    	/*height: 5px;*/
    }
    
    .chart-space div {
	    height: 10px !important;
    }
    
    div.chart-line p {
	    width: 60px;
	    left: calc(100% - 63px);
	    margin: 3px 0px;
    }
    
    #DivChartNow {
    	height: 100px;
    }
    
    #DivChartFooter {
    	/*height: 5px;*/
    }
    
    
    #DivListMenu {
	    width: calc(100% - 10px);
	    margin: 5px 5px;
		height:64px;
	}

	#DivInputBarcode
	{
		left:0px;
		top:35px;
		height:32px;
		width: 90%
	}
	#DivInputBarcode input
	{
		width: 100%
	}
	
	.btn-list {
    	width: 15%;
    	padding-top: 8px;
    }
    .btn-list span {
	    font-size: 1.7rem;
	}
	#LinkButtonNotyet {
    	left: 0px;
    }
    #LinkButtonAll {
    	left: 17%;
    }
    
    #DivListAdd {
	    left: 34%;
	    width: 15%;
	}
	
	#DivListMenuRight {
    	width: 100%;
    	right: 0px;
    }
    
    #DivListSearch {
	    left: auto;
	    width: 15%;
	    right: 34%;
	}
	
	#DivListDown {
	    left: auto;
	    width: 15%;
	    right: 17%;
	}
	
	.csvDownloadButton {
    	width: 100% !important;
    }
	
    #DivListPrint {
    	left: auto;
	    width: 15%;
	    right: 0px;
	}
	
	.divListMainArea {
    	/*height: calc(100% - 300px);*/ /*272px);*/
        height: calc(83vh - 300px);
    	width: calc(100% - 10px);
    	margin: 10px 5px;
    }
    
    .list-content-bk {
    	height: 100px;
    	width: 100%;
    	margin: 0px 0px 5px 0px;
    }
    
    .list-no-bk {
    	height: 50px;
    	width: 28px;
    	padding: 50px 0;
    }
    
    .list-area-bk {
    	height: 100px;
    	border-left: solid 7px;
    	width: calc(100% - 32px);
		background: linear-gradient(90deg,#444 0%,#444 60%,#222 60%,#222 100%);
    }
	.plan-content {
		width: 60%;
	}
	
	.result-content {
		width: 40%;
	}
	.area-planstarttime
	{
		width: 60%;
	}
	.area-cycletime
	{
		width: 40%;
	}
	.area-orderno
	{
		width: 60%;
	}
	.area-productcode
	{
		width: 40%;
	}
	.area-jobcode
	{
		width: 60%;
	}
	.area-quantity
	{
		width: auto;
	}

	.area-starttime
	{
		width: 100%;
	}
	.area-endtime
	{
		width: 100%;
	}
	.area-workerId
	{
		width: 100%;
	}
    
    #DivTopMenu {
    	height: 82px;
    }
    
    #PTopMenuTitle {
	    top: 3px;
	    left: 25.5%;
    	height: 27px;
    	width:auto;
	}
    
    #DivSelectResource {
    	width: 23.5%;
	}
	
	#DivTopMenuRight {
		width: 100%;
		top: 34px;
	}
	
	#DivLineReschedule {
	    top: 33px;
	    right: 10px;
	}
	
	#DivLineReload {
    	width: 23.5%;
    	left: 0%;
    }
    
    #DivLineZoom {
	    width: 23.5%;
    	left: 25.5%;
	}
	
	#DivLineReduce {
	    width: 23.5%;
    	left: 51%;
	}
	
	#DivSystemSetting {
	    width: 23.5%;
    	left: 76.5%;
	}
	
	.list-content-bk {
    	
    }
	.list-no-bk {
		
	}
	
	.list-area-bk {
		
	}
	
	.dialog-search-job {
		width:	300px;
		height: 480px;
	}
	
	.dialog-add-job {
		width:	300px;
		height: 480px;
	}
	
	.dialog-system-setting{
		width:	250px;
		height: 400px;

	}
	
	.dialog-select-resource{
		width:	250px;
		height: 400px;

	}
	
	.dialog-setting-menu{
		width:	250px;
		height: 400px;

	}
	
}

/*---------------------------------

  スマートフォン(横)

---------------------------------*/
@media screen and (max-height: 414px){
	
	#maincontent-wrap {
   		height: auto;
        overflow: hidden;
    }

    #DivListMenu {
		height:64px;
	}

	#DivInputBarcode
	{
		left:0px;
		top:35px;
		height:32px;
		width: 90%
	}
	#DivInputBarcode input
	{
		width: 100%
	}
    
	.btn-list {
    	width: 15%;
    	padding-top: 8px;
    }
    .btn-list span {
	    font-size: 1.9rem;
	}
	#LinkButtonNotyet {
    	left: 0px;
    }
    #LinkButtonAll {
    	left: 17%;
    }
    
    #DivListAdd {
	    left: 34%;
	    width: 15%;
	}
	
	#DivListMenuRight {
    	width: 100%;
    	right: 0px;
    }
    
    #DivListSearch {
	    left: auto;
	    width: 15%;
	    right: 34%;
	}
	
	#DivListDown {
	    left: auto;
	    width: 15%;
	    right: 17%;
	}
	
	.csvDownloadButton {
    	width: 100% !important;
    }
	
    #DivListPrint {
    	left: auto;
	    width: 15%;
	    right: 0px;
	}    
	
	.dialog-search-job{
		width:	480px;
		height: 300px;
	}
	
	.dialog-add-job {
		width:	550px;
		height: 300px;
	}
	
	.dialog-system-setting{
		width:	400px;
		height: 250px;

	}
	
	.dialog-select-resource{
		width:	500px;
		height: 250px;

	}
	
	.dialog-setting-menu{
		width:	500px;
		height: 250px;

	}
}