/*:root {
  --body-width: 1200px;
  --body-height: 840px;

  --row1-height:40px;
  --row2-height:160px;
  --row3-height:48px;
  --row4-height:288px;
  --row5-height:200px;

  --hist_height:calc(var(--row2-height) + var(--row4-height) + var(--row5-height));
}*/
* {
  font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
  margin: 0; padding: 0;
}

body{
  background-color: #E6E6E6;
}

th{
  font-size:14px;
}

table, th, td {
  font-size:14px;
}

button{
  font-size:8px;
}

td.row1{
  width:100%;
/*  height:2%;*/
}

td.row2{
  width:100%;
/*  height:25%;*/
}

td.row3{
  width:100%;
/*  height:6%;*/
}

td.row4{
  width:100%;
/*  height:40%;*/
}

tr.row5{
  width:100%;
/*  height:25%;*/
}

.invitation {
  display: none;
  position: absolute;
  z-index: 9999;
  padding: 1rem;
  background: rgba(36, 199, 161, 0.94); /* IE11は16進のアルファ値不可 */
  border-radius: 0.5em;
  font-size: 1.25em;
}

.navigationHeader {
  background-color: white;
  text-align: center;
  padding: 2rem 2rem 0 2rem;
}

.navigationPanel {
  background-color: white;
  text-align: center;
  padding: 2rem;
}

.navigationButton {
  background: #032e43;
  color: white;
  padding: 1rem;
  display: inline-block;
  margin-top: 1rem;
}

.startButton {
  width:64px;
  height:32px;

  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
  align-items: center; /* 縦方向中央揃え */
  -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
  justify-content: center; /* 横方向中央揃え */


  background: white;
  cursor: pointer;
  border-radius: 5px;
  display: block;
}

.quitButton {
  width:64px;
  height:32px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
  align-items: center; /* 縦方向中央揃え */
  -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
  justify-content: center; /* 横方向中央揃え */


  background: white;
  cursor: pointer;
  border-radius: 5px;
  display: block;
}

.helpButton {
  width:64px;
  height:32px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
  align-items: center; /* 縦方向中央揃え */
  -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
  justify-content: center; /* 横方向中央揃え */


  background: white;
  cursor: pointer;
  border-radius: 5px;
  display: block;
}

div.dateDiv{
  height:100%;
/*  margin:1px;*/
}

div.infoDiv{
  height:90%;
/*  margin:1px;*/
}

#marketDiv td:nth-child(2) {
  padding-right: 1px;
}


div.marketDiv{
  height:90%;
/*  margin:1px;*/
}

td.positionTd{
  text-align: right;
/*  margin-left: auto;
  margin-right: 20px;*/
}

div.errorDiv{
  position: fixed;
  top:200px;
  left:240px;
  width:800px;
  height:400px;

  background: white;
}

th.marketTable{
  width:50%;
}

.marketTable td {
  height: 30px;
}

div.chartDiv1{
  height:100%;
}


.dateTable{
  padding: 0px;
}

.dateTable td {
  height: 30px;
}


td.orderTd{
  /* font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif; */
  font-size:14px;
  word-break: keep-all;
  text-align: center;
  border: none;
/*  margin: 1px;
  padding: 1px;*/
}

.priceInput{
  width:100%;
  height: 95%;
  text-align: right;
}

td.label{
  text-align: center;
  width: 20%;
}

td.date{
  text-align: right;
  width: 60%;
}

td.count{
  text-align: right;
  width: 20%;
}


.button.small { font-size: 80%; width:14px; height:12px; padding: 0px 0px; }
/*
thead.scrollHead,tbody.scrollBody{
  display:block;
}

tbody.scrollBody{
  overflow-y:scroll;
  width:100%;
}
*/
.orderHeaderTable{
  overflow: scroll;   /* スクロール表示 */
  width: 100%;
  height:85%;
}



.menuDiv{
  border: 1px solid #000000;
  background: white;
  cursor: pointer;
}

/*mouseover*/
.menuCell:hover{
  background:#EDAEAF;
}

div.scroll2  {
  overflow-x:hidden;
  overflow-y:scroll;
}

div.newsAlert{
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border: 0px inset #800000;
  background: lightgray;
  font-size: 12px;
  cursor: pointer;
}

@keyframes animBlinkNewsA {
  0%   {background-color: rgb(255,255,255);}
  5%   {background-color: rgb(255,192,192);}
  10%   {background-color: rgb(255,128,128);}
  15%   {background-color: rgb(255, 64, 64);}
  20%   {background-color: rgb(255,  0,  0);}
  50%   {background-color: rgb(255,  0,  0);}
  55%   {background-color: rgb(255, 64, 64);}
  60%   {background-color: rgb(255,128,128);}
  65%   {background-color: rgb(255,192,192);}
  70%   {background-color: rgb(255,255,255);}
  100%  {background-color: rgb(255,255,255);}
}

@keyframes stopBlinkNewsA {
  50%   {background-color: rgb(255,255,255);}
}

@keyframes animBlinkNewsB {
  0%   {background-color: rgb(255,255,255);}
  5%   {background-color: rgb(255,192,192);}
  10%   {background-color: rgb(255,128,128);}
  15%   {background-color: rgb(255, 64, 64);}
  20%   {background-color: rgb(255,  0,  0);}
  50%   {background-color: rgb(255,  0,  0);}
  55%   {background-color: rgb(255, 64, 64);}
  60%   {background-color: rgb(255,128,128);}
  65%   {background-color: rgb(255,192,192);}
  70%   {background-color: rgb(255,255,255);}
  100%  {background-color: rgb(255,255,255);}
}

@keyframes stopBlinkNewsB {
  50%   {background-color: rgb(255,255,255);}
}

.startBlinkNewsA{
  animation-name: animBlinkNewsA;
  animation-duration: 1s;
  animation-iteration-count: 6;
}

.stopBlinkNewsA{
  animation-name: stopBlinkNewsA;
  animation-duration: 1s;
  animation-iteration-count: 1;
}

.startBlinkNewsB{
  animation-name: animBlinkNewsB;
  animation-duration: 1s;
  animation-iteration-count: 6;
}

.stopBlinkNewsB{
  animation-name: stopBlinkNewsB;
  animation-duration: 1s;
  animation-iteration-count: 1;
}


@keyframes animNewsAlert {
   0%   {background-color: rgb(208,208,208);}
   5%   {background-color: rgb(224,156,156);}
  10%   {background-color: rgb(240,104,104);}
  15%   {background-color: rgb(255, 52, 52);}
  20%   {background-color: rgb(255,  0,  0);}
  50%   {background-color: rgb(255,  0,  0);}
  55%   {background-color: rgb(255, 52, 52);}
  60%   {background-color: rgb(255,104,104);}
  65%   {background-color: rgb(240,156,156);}
  70%   {background-color: rgb(224,208,208);}
  100%  {background-color: rgb(208,208,208);}
}

@keyframes stopNewsAlert {
  50%   {background-color: rgb(208,208,208);}
}

.blinkNewsAlert{
  animation-name: animNewsAlert;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

.stopNewsAlert{
  animation-name: stopNewsAlert;
  animation-duration: 1s;
  animation-iteration-count: 1;
}

@keyframes animStartButton {
  0%   {background-color: rgb(255,255,255);}
  5%   {background-color: rgb(255,192,192);}
  10%   {background-color: rgb(255,128,128);}
  15%   {background-color: rgb(255, 64, 64);}
  20%   {background-color: rgb(255,  0,  0);}
  50%   {background-color: rgb(255,  0,  0);}
  55%   {background-color: rgb(255, 64, 64);}
  60%   {background-color: rgb(255,128,128);}
  65%   {background-color: rgb(255,192,192);}
  70%   {background-color: rgb(255,255,255);}
  100%  {background-color: rgb(255,255,255);}
}

@keyframes stopStartButton {
  50%   {background-color: rgb(255,255,255);}
}

.blinkStartButton{
  animation-name: animStartButton;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

.stopStartButton{
  animation-name: stopStartButton;
  animation-duration: 1s;
  animation-iteration-count: 1;
}



@keyframes animBlinkCellA {
  0%   {background-color: rgb(255,255,255);}
  5%   {background-color: rgb(255,192,192);}
  10%   {background-color: rgb(255,128,128);}
  15%   {background-color: rgb(255, 64, 64);}
  20%   {background-color: rgb(255,  0,  0);}
  50%   {background-color: rgb(255,  0,  0);}
  55%   {background-color: rgb(255, 64, 64);}
  60%   {background-color: rgb(255,128,128);}
  65%   {background-color: rgb(255,192,192);}
  70%   {background-color: rgb(255,255,255);}
  100%  {background-color: rgb(255,255,255);}
}

@keyframes stopBlinkCellA {
  50%   {background-color: rgb(255,255,255);}
}

@keyframes animBlinkCellB {
  0%   {background-color: rgb(255,255,255);}
  5%   {background-color: rgb(255,192,192);}
  10%   {background-color: rgb(255,128,128);}
  15%   {background-color: rgb(255, 64, 64);}
  20%   {background-color: rgb(255,  0,  0);}
  50%   {background-color: rgb(255,  0,  0);}
  55%   {background-color: rgb(255, 64, 64);}
  60%   {background-color: rgb(255,128,128);}
  65%   {background-color: rgb(255,192,192);}
  70%   {background-color: rgb(255,255,255);}
  100%  {background-color: rgb(255,255,255);}
}

@keyframes stopBlinkCellB {
  50%   {background-color: rgb(255,255,255);}
}

.startBlinkCellA{
  animation-name: animBlinkCellA;
  animation-duration: 1s;
  animation-iteration-count: 5;
}

.stopBlinkCellA{
  animation-name: stopBlinkCellA;
  animation-duration: 1s;
  animation-iteration-count: 1;
}

.startBlinkCellB{
  animation-name: animBlinkCellB;
  animation-duration: 1s;
  animation-iteration-count: 5;
}

.stopBlinkCellB{
  animation-name: stopBlinkCellB;
  animation-duration: 1s;
  animation-iteration-count: 1;
}


.componentTd table{
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

.transparentFoot{
  fill:transparent;
  stroke:transparent;
  stroke-width:1;
}
.whiteFoot{
  fill:white;
  stroke:black;
  stroke-width:1;
}
.blackFoot{
  fill:black;
  stroke:black;
  stroke-width:1;
}

.resultTable{
  position: relative;
  table-layout: fixed;
  width:1280px;
  height:800px;
  border-collapse: collapse;
}

.resultRow1{
  height: 40px;
  background: dimgray;
}

.resultRow2{
  height: 55px;
}

.resultRow3{
  height: 745px;
}

#HistoryHeaderTable tr:nth-child(odd) {
  background-color: lightcyan;
}

.divResultChart{
  height:90%;
}

.tdHist1{
  width:20%;
  text-align: center;
}

.tdHist2{
  width:10%;
  text-align: center;
}

.tdHist3{
  width:10%;
  text-align: center;
}

.tdHist4{
  width:15%;
  text-align: right;
}

.tdHist5{
  width:15%;
  text-align: right;
}

.tdHist4{
  width:30%;
  text-align: right;
}

#Shell1{
  position:relative;
  table-layout: fixed;
  height: 100%;
  border-collapse: collapse;
}

#Shell1 table{
  border-spacing: 0;
}

.title {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
  align-items: center; /* 縦方向中央揃え */
  height:25px;
  font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
  font-size:16px;
  padding-left: 4px;
  font-weight: bold;

/*  -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
/*  justify-content: center; /* 横方向中央揃え */
}

.menuButton{
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
  align-items: center; /* 縦方向中央揃え */
  -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
  justify-content: center; /* 横方向中央揃え */
}

.rightBorderOn{
  border-color: transparent;
  border-right: 2px solid #525252;
}

.rightBorderOff{
  border-color: transparent;
}

.totalRiskValueV{
  border-top: 2px solid #525252;
  border-right: 2px solid #525252;
  background: white;
}

.totalRiskValueH{
  border-top: 2px solid #E6E6E6;
  border-right: 2px solid #E6E6E6;
  visibility: hidden;
  background: transparent;
}



.riskValue{
  border-top: 2px solid #525252;
  border-right: 2px solid #525252;
}

.buttonGroup input[type="radio"] {
  border-left: 4px #db0010; /* Old browsers */
  display: none;
}

.buttonGroup label{ /* 左に赤い帯のある書くコンテンツの見出し部分 */
  border-left: solid 4px #db0010; /* Old browsers */
  color:#A2A2A2;
}

.buttonGroup input[type="radio"]:checked + label {
  cursor:pointer;
  border:#db0010 1px solid;
  background:#EDAEAF;
  width:178px;
  height:25px;
  text-align:center;
  line-height:25px;
  font-weight:400;
  color:black;
}

td.straddle{
  background-color: aqua;
}
td.nonStraddle{
  background-color: transparent;
}

td.SQPrice {
  background-color: #EDAEAF;
}
td.nonSQPrice{
  background-color: transparent;
}



/* 全体の枠。ヘッダが入る分だけ上部を空けておく */
.container {
  position: relative;
  padding-top: 20px;
  border: 1px solid red;
}

/* .container からヘッダのスペースを除いた部分。ここがスクロール対象 */
.content {
  overflow: auto;
}

.scrollable {
  border-collapse: collapse;
}

/* ヘッダ部分。位置を .container の左上端に移動 */
.scrollable thead tr {
  position: absolute;
  top: 0;
  left: 0;
}

/* このheightと .container の padding-top を合わせる */
.scrollable thead th {
  height: 20px;
  border-color: blue;
  border-style: solid;
  border-width: 0px 1px 1px 0px;
}

.scrollable tbody td {
  height: 20px;
  border-color: black;
  border-style: solid;
  border-width: 1px 1px 0px 0px;
}

/* ---------- 表ごとに異なる値はclassを分ける ---------- */

.container1 {
  width: 200px;
}

.content1 {
  width: 200px;
  height: 80px;
}

/* 各カラムにはwidth を設定する必要がある */
.table1 th, .table1 td {
  padding: 0 3px 0 3px;
  width: 80px;
}

.table1 th {
  background-color: #ccc;
}

button.menuButton{
  height: 100%;
  margin: 0px;
  padding: 0px;
}

div.detail{
  font-size:14px;
}

select.orderTableSelect{
  font-size:14px;
}

td.orderTable{
  font-size:14px;
}

button.plusMinusButton{
  padding: 0px;
  font-size:10px;
}

button.orderButton{
  width: 100%;
  height: 22px;
  font-size:12px;
}

thead.scrollHead,tbody.scrollBody{
  display:block;
}

tbody.scrollBody{
  overflow-y:scroll;
  height:100px;
}


/*幅調整*/
td,th{
  table-layout:fixed;
}

td.orderNo,th.orderNo {
  width:9%;
}
td.orderPrdName,th.orderPrdName{
  width:16%;
}
td.orderBuySell,th.orderBuySell{
  width:8%;
}
td.orderQty,th.orderQty{
  width:8%;
}
td.orderPrice,th.orderPrice{
  width:13%;
}
td.orderStatus,th.orderStatus{
  width:8%;
}
td.orderDonePrice,th.orderDonePrice{
  width:14%;
}

div.detailHeader{
  background:PaleGreen;
  font-size:16px;
}

div.detailBody{
  font-size:14px;
}

button.alertButton {
  text-align: center;
  min-width: 100px;
  background: white;
  font-size: 14px;
}



.t_line_newshilightO { background-color:#c0ffc0; }
.t_line_newshilightE { background-color:#e0ffe0; }

.t_line_ordersellO { background-color:#90d0ff; }
.t_line_ordersellE { background-color:#b0e0ff; }

.t_line_orderbuyO { background-color:#ffd0e0; }
.t_line_orderbuyE { background-color:#ffe0f0; }

.t_lineE { background-color:#F0F0F6; }
.t_lineO { background-color:#FCFCFC; }

span.hilight0 {
  color:red;
}

span.hilight1 {
  color:mediumblue;
}

td.alert{
  background: red;
  color:white;
  font-size: 14px;
}

div.positionTitle{
  background: #525252; /* Old browsers */
  color:white;;
  text-align: center;
}

th.positionTitle{
  background: #525252; /* Old browsers */
  color:white;;
  text-align: center;
}

#GameMain {
  background-size: 100% 100%;
}

#productTable th{
  background: #525252; /* Old browsers */
  color:white;;
}

#productPositionTable th{
  background: #525252; /* Old browsers */
  color:white;
}

#productRiskParmTable th{
  background: #525252; /* Old browsers */
  color:white;;
}

#totalRiskvalueTable th{
  background: #525252; /* Old browsers */
  color:white;;
}

button.button0{
  font-size:12px;
  height:24px;
  width:80px;
  margin:0px;
  padding:0px;
}