/*全体*/
body {
  background-color: #E9E9E9;
  color:#333333;
  /*width:800px;*/
}
/*タイトルバー*/
#titlebar {
  background: linear-gradient(
	  to bottom,
	  #5db3ed 0%,
	  #318ce1 100%
  );
  box-shadow:5px 5px 15px -3px #222736;
  -moz-box-shadow:5px 5px 15px -3px #222736;
  -webkit-box-shadow:5px 5px 15px -3px #222736;
  color: #E0E0E0;
  padding:5px;
}

#FldName {
  flex:0.5;
  font-size:1.5rem;
  padding-top:10px;
  padding-left:30px;
}

/*タイトル文字*/
#title {
  font-size:2rem;
  flex:0.5;
}

/*タイトルバー上の現在時刻*/
#titlebar .value {
  text-align:right;
  flex:0.5;
  font-size:1.5rem;
  padding-top:10px;
}

/*タイトル以外の全体*/
#datafield {
    display: flex;
}

/*左側全体*/
#left {
    width:160px;
}

/*左側の値全体*/
#pilesetting .value{
  text-align:right;
  font-size:1.5rem;
  padding-right:10px;
}
/*左側の値全体*/
#slurry .value{
  text-align:right;
  font-size:1.5rem;
}

/*設定値全体*/
#pilesetting{
  background: #c2e1f8;
}

/*設定値配下の各文字列*/
#pilesetting div{
  padding:3px;
}

/*スラリーエリア全体*/
#slurry {
  margin-top:20px;
}

#slurry span {
  font-size:0.8rem;
}

/*スラリー目盛数値部分*/
#slurryScaleValue {
  text-align:center;
  width:150px;
  display:flex;
  font-size:0.8rem;
}

/*スラリー目盛数値*/
#slurryScaleValue div {
  flex:0.2;
}

/*スラリー目盛線*/
#slurryScale{
  margin-left:13px;
  width:120px;
  display:flex;
  height:3px;
}

/*スラリー目盛の各線*/
#slurryScale div{
  flex:0.25;
  border-bottom: 1px solid #000000;
  border-right: 1px solid #000000;
  border-left: 1px solid #000000;
}

/*スラリーグラフの1項目分*/
#slurryGraph .grouping {
  display:flex;
  margin-top:10px;
}

#slurryGraph .graphFrame{
  margin-left:10px;
  border:3px solid #AAFFFF;
  background:#DDFFFF;
  width:120px;
  height:30px;
  position:relative;
}

#slurryGraph .graph{
  height:100%;
  opacity:0.8;
  background:linear-gradient(
    to bottom,
    #88DDFF 0%,
    #DDFFFF 40%,
    #88DDFF 100%
  );
}

#slurryGraph .value{
  position:absolute;
  bottom:3px;
  right:10px;
}

/*スラリー表全体*/
#slurryTable div{
  padding:3px;
  font-size:0.8rem;
}

/*スラリー表1項目分*/
#slurryTable .grouping{
  position:relative;
}

/*スラリー表の値*/
/*項目名と同一領域に右寄せで表示する*/
#slurryTable .value{
  position:absolute;
  right:5px;
  top:0px;
}

/*右側全体*/
#right {
    flex:1;
}

/*右側上部パラメータの項目名*/
#time div {
  background: #c2e1f8;
  padding:10px;
  display:flex
}

/*右側上部パラメータの項目名*/
#time span{
  text-align:right;
}

/*右側上部パラメータの値*/
#time .value{
  background:#ffffff;
  font-size:1.5rem;
}

/*瞬時値エリア*/
#syunjichi  {
  background: -webkit-linear-gradient(
  	top,
  	#e3f1fd 0%,
  	#8dbff4 100%
  );
  display: flex;
}

/*瞬時値1項目分*/
#syunjichi .grouping {
    flex:0.25;
    padding:5px;
    padding-left:10px;
    box-shadow:5px 5px 15px -3px #222736;
    -moz-box-shadow:5px 5px 15px -3px #222736;
    -webkit-box-shadow:5px 5px 15px -3px #222736;
}

/*瞬時値項目名*/
#syunjichi span{
  font-weight:bold;
}

/*瞬時値の値*/
#syunjichi .value {
  background: #E0E0E0;
  text-align:right;
  padding-right:5px;
  font-size:2.8rem;
}


/*瞬時値エリア*/
#syunjichi2  {
  background: -webkit-linear-gradient(
  	top,
  	#e3f1fd 0%,
  	#8dbff4 100%
  );
  display: flex;
}

/*瞬時値1項目分*/
#syunjichi2 .grouping {
    flex:0.25;
    padding:5px;
    padding-left:10px;
    box-shadow:5px 5px 15px -3px #222736;
    -moz-box-shadow:5px 5px 15px -3px #222736;
    -webkit-box-shadow:5px 5px 15px -3px #222736;
}

/*瞬時値項目名*/
#syunjichi2 span{
  font-weight:bold;
}

/*瞬時値の値*/
#syunjichi2 .value {
  background: #E0E0E0;
  text-align:right;
  padding-right:5px;
  font-size:2.8rem;
}


/*瞬時値エリア*/
#syunjichiSly  {
  background: -webkit-linear-gradient(
  	top,
  	#e3f1fd 0%,
  	#8dbff4 100%
  );
  display: flex;
  flex:0.35;
}

/*瞬時値項目名*/
#syunjichiSly span{
  font-weight:bold;
}

/*瞬時値の値*/
#syunjichiSly .value {
  background: #E0E0E0;
  text-align:right;
  padding-right:5px;
  font-size:2.8rem;
}

/*瞬時値1項目分*/
#syunjichiSly .grouping {
    padding:5px;
    padding-left:10px;
    box-shadow:5px 5px 15px -3px #222736;
    -moz-box-shadow:5px 5px 15px -3px #222736;
    -webkit-box-shadow:5px 5px 15px -3px #222736;
  width:50%;
}

/*グラフ領域のテーブル全て*/
table{
  font-size:1rem;
  border-collapse:collapse;
  text-align:left;
  margin-top:20px;
}

/*テーブルヘッダの各セル*/
th{
  font-size:0.8rem;
  text-align: center;
  font-weight:bold;
  color:#003399;
  padding:3px;
}

/*深度グラフ*/
.depthScale{
  border-right:1px solid #000000;
  border-bottom:1px solid #000000;
}

#depthScaleFirst{
  border-top:1px solid #000000;
  width:5px;
}

.depthAGraph{
  width:100%;
  background:linear-gradient(
    to right,
    #00FF44 0%,
    #88FFAA 40%,
    #00FF44 100%
  );
}

.depthEGraph{
  position:absolute;
  background:#0044FF;
  opacity:0.2;
  top:0;
  left:0;
  width:100%;
}

/*メイングラフのテーブルの各セル*/
#progresTableBody td{
  background: linear-gradient(
    to right,
    #cccccc 0%,
    #eeeeee 69.4%,
    #222222 69.8%,
    #eeeeee 70.2%,
    #ffffff 100%);
  position:relative;
}

.depthTable{
  text-align:right;
  padding-right:22px;
}

.workProgress{
  opacity:0.8;
  background:linear-gradient(
    to right,
    #00AAFF 0%,
    #0044AA 100%
  );
}

.spinProgress{
  height:30px;
  opacity:0.8;
  background:linear-gradient(
    to bottom,
    #FF8800 0%,
    #FFDD88 40%,
    #FF8800 100%
  );
}

.spinProgress2{
  position:absolute;
  top:1px;
  height:30px;
  opacity:0.8;
  background:linear-gradient(
    to bottom,
    #FF6622 0%,
    #FFBBAA 40%,
    #FF6622 100%
  );
}

.slyProgress{
  height:30px;
  opacity:0.8;
  background:linear-gradient(
    to bottom,
    #0088FF 0%,
    #88DDFF 40%,
    #0088FF 100%
  );
}


.progressValue{
  position:absolute;
  bottom:1px;
  left:10px;
}

.progressValue2{
  position:absolute;
  bottom:1px;
  right:10px;
  text-align:right;
}


/*深度グラフのセル*/
#depthTableBody td{
  height:29px;
  text-align:right;
  position:relative;
}

/*深度グラフの目盛値*/
#depthTableBody div{
  position:absolute;
  right:0px;
  font-size:0.8rem;
  padding-top:5px;
}

.stdmk{
  position:absolute;
  top:0;
  text-align:center;
}

#modal-overlay{
  z-index:1;
  display:none;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  background-color:rgba(0,0,0,0.75);
}

#modal-content{
  display:none;
  width:50%;
  margin:1.5em auto 0;
  padding:10px 20px;
  border:2px solid #aaa;
  background:#fff;
  z-index:2;
}