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

    ManagementJob.css
    　作業別管理画面のスタイル

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

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

  デフォルト

---------------------------------*/
#select-date
{
	position:absolute;
	left:92px;
}
#back-monitor
{
	position:absolute;
	top:0px;
	left:0px;
}
#top-menu-title
{
	position:absolute;
	top:-5px;
	left:100px;
	margin:0px;
	font-size:3.0rem;

}

#menu-setting
{
	position:absolute;
	top:0px;
	right: 0px;
}
#proc-add
{
	position:absolute;
}
#list-search
{
	position:absolute;
	top:0px;
	left:184px;
}

#monitor-proc
{
	position:relative;
	width:100%;
	height:140px;
	overflow:auto;
}
#monitor-proc p
{
	margin:0px;
}
.cv-red
{
	background-color:red;
}
.cv-yellow
{
	background-color:yellow;
}

.proc-area-bk
{
	position:relative;
	width:calc(100% - 23px);
	height:125px;
	margin:4px 0px 8px 20px;
	background-color:#222;
	float:left;
	box-sizing:border-box;


}
.proc-data-box-bk
{
	position:absolute;
	top:0;
	left:0;	
	width:1000px;
	background-color:#444;
	height:100%;
	
	border-left: solid 15px;
    border-top: solid 1px;
    border-bottom: solid 1px;
    
	border-top-left-radius: 10px; 
    -webkit-border-top-left-radius: 10px; 
    -moz-border-radius-topleft: 10px;
    border-bottom-left-radius: 10px; 
    -webkit-border-bottom-left-radius: 10px; 
    -moz-border-radius-bottomleft: 10px;
    border-top-right-radius: 0px;
    -webkit-border-top-right-radius: 0px;
    -moz-border-radius-topright: 0px;
    border-bottom-right-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;
}
.proc-title
{
	padding:5px 5px;
	font-size:2.0rem;
}

.proc-status-btn
{
	margin:3px 0px 3px 5px;
	position:relative;
	width:276px;
	height:45px;
	border:solid 1px #68d5db;
	border-radius: 6px;
	background-color:#222222;
}
.proc-status-image
{
	position:absolute;
	width:45px;
	height:45px;
	top:0px;
	left:15px;
	background-color:transparent;

	background-size:32px 32px;
	background-repeat:no-repeat;
	background-position:center;
}
.comp
{
	background-image: url('../images/comp4_mini.png');
}
.stop
{
	background-image: url('../images/stop_mini.png');
}
.start
{
	background-image: url('../images/start_mini.png');
}
.off
{
	background-image: url('../images/off_mini.png');
}

.proc-status-value
{
	padding-left:70px;
	text-align:left;
	font-size:2.2rem;
}
.pad-top
{
	padding-top:7px;
}
.status-font-small
{
	font-size:2.0rem;
}
.scroll 
{
	position:absolute;
	top:26px;
	margin-left: 70px;
	width      : 200px;
	text-align : center;
	overflow   : hidden;
	font-size:1.5rem;
}
.scroll p
{
	display     : inline-block;
	padding-left: 100%;
	white-space : nowrap;
	animation   : scrollAnime 5s linear infinite;
}
@keyframes scrollAnime
{
    0% { transform: translateX(0)}
  100% { transform: translateX(-100%)}
}

.proc-menu-bk
{
	position:relative;
	margin-left:auto;
	margin-top:25px;
	width:100px;

}
.proc-menu-move
{
	position:relative;
	margin:10px 0px;
}

.proc-graph-box
{
	position:absolute;
	top:0;
	left:1000px;
	margin-left:15px;
	height:100%;
	width:calc(100% - 1030px);
	
	border-right: solid 1px;
    border-top: solid 1px;
    border-bottom: solid 1px;
    
    border-top-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topright: 10px;
    border-bottom-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    border-top-left-radius: 0px;
    -webkit-border-top-left-radius: 0px;
    -moz-border-radius-topleft: 0px;
    border-bottom-left-radius: 0px;
    -webkit-border-bottom-left-radius: 0px;
    -moz-border-radius-bottomleft: 0px;
}
.proc-data-box
{
	position:absolute;
	top:0;
	left:300px;
	height:100%;
	width:calc(100% - 300px);
}
.proc-data-box-caption-1
{
	position:relative;
	text-align:left;
	width:100px;
	font-size:1.6rem;
	z-index:2;
	float:left;
	top:13px;
}

.proc-data-box-caption-2
{
	position:relative;
	text-align:left;
	width:100px;
	font-size:1.6rem;
	z-index:2;
	float:left;
	top:13px;
}

.proc-data-box-value-1
{
	position:relative;
	width:250px;
	text-align:left;
	font-size:1.6rem;
	z-index:2;
	float:left;
	top:13px;
}

.proc-data-box-value-2
{
	position:relative;
	width:250px;
	text-align:left;
	font-size:1.6rem;
	z-index:2;
	float:left;
	top:13px;
}

#monitor-main
{
	position:relative;
	width:100%;
	height:calc(100% - 140px);
}
#monitor-main p
{
	margin:0px;
}
#monitor-job
{
	position:relative;
	width:99%;
	height:50%;
	overflow:auto;
	text-align:center;
	margin-bottom: 5px;
}
.job-btn
{
	position:relative;
	float:left;
	width:calc((100% - 112px) / 5);
	height:calc((100% - 90px) / 4);
	margin:10px 0px 10px 20px;
	border:solid 1px #68d5db;
	border-radius: 6px;
	background-color:#222;

}

/* 完了時 詳細作業ステータス */
.job-btn.sts-comp:hover {
    cursor: default;
    background-color: #222 !important;
}

#monitor-job p
{
	font-size:2.0rem;
	position: absolute;
	top: 50%;
	left: 0;
	width:100%;
	text-align:center;
	transform: translateY(-50%);
	-webkit- transform: translateX(-50%);
}


#monitor-list
{
	position:relative;
	width:100%;
	height:49%;
	overflow:auto;
}

.list-area-bk
{
	position:relative;
	width:calc(100% - 35px);
	height:calc(100% - 20px);
	margin:10px 0px 8px 20px;
	background-color:#444;
	float:left;
	box-sizing:border-box;
    	border-left: solid 15px;
	border-top:solid 1px;
	border-bottom:solid 1px;
	border-right:solid 1px;
	border-radius: 10px;
}
.list-title
{
	padding:10px 5px 0px 0px;
	font-size:2.0rem;
}

#history_body
{
	position:absolute;
	top:0px;
	left:0px;
	width:calc(100% - 80px);
	height:calc(100% - 70px);
	margin:60px 40px 10px 40px;
	border-collapse:collapse;
	table-layout:fixed;
}
#history_body thead,tbody
{
	display:block;
	width:100%;
	margin:0px;
	padding:0px;
}
#history_body tbody
{
	overflow-x:hidden;
	overflow-y:scroll;
	height:calc(100% - 35px);
}
#history_body td,th
{
	height:20px;
	margin:0px;
	padding:0px;
}

#history_body th:nth-child(1) {
    width: 15vw;
}
#history_body th:nth-child(2) {
    width: 10vw;
}
#history_body th:nth-child(3) {
    width: 34vw;
}
#history_body th:nth-child(4) {
    width: 34vw;
}
#history_body th:nth-child(5) {
    width: 7vw;
}

#history_body th:nth-of-type(6)
{	
	width:25px;
	color:#444;
}
#history_body td
{
	border:1px solid #999;
	background-color:#fff;
	text-align:left;
	color:#000;
	padding-left:5px;

}

#history_body td:nth-child(1) {
    width: 15vw;
    text-align:center;
}
#history_body td:nth-child(2) {
    width: 12vw;
}
#history_body td:nth-child(3) {
    width: 34vw;
}
#history_body td:nth-child(4) {
    width: 32vw;
}
#history_body td:nth-child(5) {
    width: 7vw;
}
#history_body td:nth-of-type(5)
{	
	background-color:#444;
	text-align:center;
}

.line-setting-btn
{
	display:block;
	position:relative;
	margin:0 auto;
	height:18px;
	width:50px;
	border:solid 1px #68d5db;
	border-radius: 5px;
	background-size:15px 15px;
	background-repeat:no-repeat;
	background-position:center;
	background-color: transparent !important;
}
.ribbon-70 {
	width:285px;
}

.ribbon-50 {
	width:250px;
}

.title-ribbon:after {
	    border-color: transparent #444 transparent transparent;
}

.dialog-job-setting {
	width:	350px;
	height: 170px;
}

.dialog-change-job-status {
	width:	640px;
	height: 210px;
}

.dialog-change-job-detail-status {
	width:	420px;
	height: 210px;
}

.dialog-edit-job-detail {
	width:	500px;
	height: 250px;
}

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

  タブレット

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

	html{
		font-size: 50.0%;
	}
	#top-menu-title {
    	top: 0px;
    }
	#monitor-proc {
	    height: 265px;
	}
	
	.proc-area-bk {
	    height: 250px;
	    margin: 4px 0px 8px 13px;
	}
	
	.proc-data-box-bk {
	    width: calc(100% - 20px);
	    height: 50%;
	    border-right: solid 1px;
	    
	    border-bottom-left-radius: 0px;
	    -webkit-border-bottom-left-radius: 0px;
	    -moz-border-radius-bottomleft: 0px;
	    border-top-right-radius: 10px;
	    -webkit-border-top-right-radius: 10px;
	    -moz-border-radius-topright: 10px;
	}
	
	.proc-graph-box {
	    position: absolute;
	    top: 125px;
	    left: 0;
	    margin-left: 0;
	    height: 50%;
	    width: calc(100% - 20px);
	    border-top: 0;
	    border-left: solid 15px;
	    
	    border-top-right-radius: 0px;
	    -webkit-border-top-right-radius: 0px;
	    -moz-border-radius-topright: 0px;
	    border-bottom-left-radius: 10px;
	    -webkit-border-bottom-left-radius: 10px;
	    -moz-border-radius-bottomleft: 10px;
	}
	.ribbon-70 {
	    width: 28%;
	}
	
	.proc-title {
	    padding: 10px 3px;
	
	}
	.pad-top {
	    padding-top: 10px;
	}
	.proc-status-btn {
	    width: 28%;
	}
	
	
	.proc-data-box {
	    left: 31%;
	    width: calc(100% - 31%);
	}
	
	.proc-data-box-caption-1 {
	    width: 20%;
	    left: 4px;
	}
	
	.proc-data-box-caption-2 {
	    width: 15%;
	}
	
	.proc-data-box-value-1 {
	    width: 40%;
	}
	
	.proc-data-box-value-2 {
	    width: 25%;
	}
	
	.job-btn {
	    margin: 10px 0px 10px 17px;
	}
	
	#monitor-job p {
    	font-size: 1.3rem;
    }
    
	
	.list-area-bk {
    	width: calc(100% - 27px);
    	margin: 10px 0px 8px 13px;
    }
}

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

  スマートフォン(縦)

---------------------------------*/
@media screen and (max-width: 425px){
	html{
		font-size: 30.0%;/*40.0%;*/
	}

	#top-menu-title {
		top:3px;
	    left: 22%;
	    height:27px;
	    font-size: 4.0rem
	}
	
	#back-monitor {
	    width: 20%;
	}
	
	#top-menu-right {
	    /*left: 80%;
	    width: 20%;
	    margin-left: 0;*/
	}
	
	#menu-setting {
		width: 20%;
	    right: 0;
	}
	
	#monitor-proc {
	    height: 225px;
	    width: 100%;
	}
	
	.proc-area-bk {
	    height: 220px;
	    width: 100%;
	    margin:0;
	}
	
	.proc-data-box-bk {
	    height: 136px;
	    border-left: solid 8px;
	    width: calc(100% - 10px);
	}
	
	.ribbon-70 {
	    height: 50px;
    	width: 50%;
	}
	
	.ribbon-70:after {
		border-width: 25px 10px 25px 0px;
	}
	
	.proc-title {
	    font-size: 1.2rem;
	    padding: 10px 3px;
	}
	
	.proc-status-btn {
	    width: 47%;
    	margin: 4px 0px 1px 3px;
    	height: 40px;
    	top: -50px;
    	left: 50%;
	}
	
	.proc-status-image {
	    width: 30px;
	    height: 30px;
	    background-size: 32px 32px;
	    top: 5px;
	}
	
	.proc-status-value {
	    font-size: 2.5rem;
	    padding-left: 65px;
	}
	
	.proc-data-box {
		top: 50px;
	    left: 0px;
	    width: 100%;
	    height: 85px;
	    border-color:#028760 !important;
	    background-color: #444;
	}
	
	.proc-graph-box {
	    top: 137px;
	    height: 80px;
	    border-left: solid 8px;
	    width: calc(100% - 10px);
	}
	
	#monitor-main {
    	height: 100%;
    }
	
	#monitor-job p {
    	font-size: 1.2rem;
    }
    
    .job-btn {
	    width: calc((100% - 50px) / 5);
	    height: calc((100% - 45px) / 4);
	    margin: 5px;
	}
    
    .list-area-bk {
    	width: 100%;
    	margin:0px;
    	border-left: solid 8px;
    	height: 100%;
    }
    
    .ribbon-50 {
	    height: 30px;
	    width: 240px;
	    width: 35%;
	}
	
	.ribbon-50:after {
	    border-width: 15px 10px 15px 0px;
	}
	
    .list-title {
	    padding: 5px 5px 0px 5px;
	}
	
	#history_body {
		width: calc(100% - 20px);
    	height: calc(100% - 45px);
   		margin: 35px 10px 10px 10px;
	}
	
	#history_body tbody {
	    height: calc(100% - 25px);
	}
	
	#history_body th:nth-child(1) {
	    width: 18vw;
	}
	#history_body th:nth-child(2) {
	    width: 12vw;
	}
	#history_body th:nth-child(3) {
	    width: 27vw;
	}
	#history_body th:nth-child(4) {
	    width: 26vw;
	}
	#history_body th:nth-child(5) {
	    width: 17vw;
	}
	
	#history_body th:nth-of-type(6) {
		/*display: none;*/
	}
	
	#history_body td {
	    padding-left: 3px;
	}
	
	#history_body td:nth-child(5) {
		padding-left: 1px;
	}
	
	#copyright {
    	width: 300px;
    }
    
    .dialog-job-setting {
		width:	300px;
	}
	.dialog-change-job-status {
		width:	300px;
	}

	.dialog-change-job-detail-status {
		width:	300px;
	}

	.dialog-edit-job-detail {
		width:	300px;
		height: 250px;
	}
}

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

  スマートフォン(横)

---------------------------------*/
@media screen and (max-height: 414px){

	#monitor-main {
    	height: 600px;
    }
    
    .dialog-change-job-status {
		width:	300px;
	}
	
}