@charset "utf-8";

.positive {background-color: #d30;}
.negative {background-color: #03d;}

.chart-canvas {position: relative;}

.chart-canvas .price-wrapper { position: absolute; right: 0; height: 100%; width: 50px; }
.chart-canvas .price-wrapper span {position: absolute;right: 5px;font-size: 11px;}

.chart-canvas .x-line, .chart-canvas .y-line {position: absolute;z-index: 2;display: none;}
.chart-canvas .x-line {top:0;width:1px;height:100%;border-left:1px dashed rgb(0, 0, 0);}
.chart-canvas .y-line {left:0;width:100%;height:1px;border-top:1px dashed rgb(0, 0, 0); } 

.chart-canvas .candle-wrapper {position: relative;width: calc(100% - 30px);overflow: hidden;height: 70%;padding:1px 0;z-index: 2;box-sizing:border-box;}
.chart-canvas .candle-wrapper .h-line {position:absolute;left:0;width:100%;height:2px;background-color:#333;opacity:0.75;z-index:0;display:none;transition:top .1s;}
.chart-canvas .candle-wrapper .h-line.drag {transition:none;}
.chart-canvas .candle-wrapper .resistance-line-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.chart-canvas .candle-wrapper .resistance-line-wrapper span {display: block;background-color: rgba(150,250,50,0.25);}
.chart-canvas .candle-wrapper .resistance-line-wrapper span ~ span {margin-top:1px;}
.chart-canvas .candle-wrapper .resistance-line-wrapper span.current {border:1px solid;}

.chart-canvas .candle-wrapper p {position:relative;display:inline-block;height:100%;}
.chart-canvas .candle-wrapper p .candle {position:absolute;top:0;left:0;width: 100%;height: 10px;z-index: 2;}

.chart-canvas {display: flex;width: 50%;height: 600px;border: 1px solid #000;padding: 35px 10px 0px 10px;vertical-align: top;overflow-x: scroll;overflow-y: hidden;flex-wrap: wrap;align-content: space-between;}
.chart-canvas::-webkit-scrollbar {display: none;}

.chart-canvas .line-wrapper {position:absolute;display: flex;top:0;left:0;padding: 5px 4px;box-sizing: border-box;width: 100%;justify-content: space-between;z-index: 2;}
.chart-canvas .line-wrapper span:before {
	content:'';
	display: inline-block;
	vertical-align: middle;
	margin-right: 2px;
	height: 3px;
	width: 20px;
	background-color:#000;
}

.chart-canvas .line-wrapper span.line5:before {background-color: #f00;}
.chart-canvas .line-wrapper span.line10:before {background-color: #f70;/* background-color: #fd0; */}
.chart-canvas .line-wrapper span.line20:before {background-color: #fd0;}
.chart-canvas .line-wrapper span.line60:before {background-color: #0a0;}
.chart-canvas .line-wrapper span.line120:before {background-color: #00c;}
.chart-canvas .line-wrapper a {background-color: #333;color: #fff;padding: 3px 10px;font-weight: 400;}

.chart-canvas .line-wrapper .resistance-button {
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none
}

.chart-canvas .candle-wrapper  {
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none
}

.chart-canvas .candle-wrapper p {z-index: 1;}
.chart-canvas .candle-wrapper p .wick {position:absolute;width: 1px;background-color:#000;z-index: 1;}
.chart-canvas .candle-wrapper p .candle.positive + .wick {background-color:red;}
.chart-canvas .candle-wrapper p .candle.negative + .wick {background-color:blue;}
.chart-canvas .candle-wrapper p [class^=sma] {position:absolute;left: 50%;width:0;height:0;transform: translateX(-50%);}
.chart-canvas .candle-wrapper p .sma5 {background-color:red}
.chart-canvas .candle-wrapper p .sma20 {background-color: #FF8A00;}
.chart-canvas .candle-wrapper p .sma60 {background-color:#ffd200;}
.chart-canvas .candle-wrapper p .sma120 {background-color:green;}
.chart-canvas .sma-canvas {position: absolute;top: 0;left: 0;height:100%;width: 100%;z-index: 0;/* background: #fff; */}
.chart-canvas .sma-canvas div {position:absolute;width: 2px;background: orange;height: 1px;}
.chart-canvas .volume-wrapper {position:relative;width: calc(100% - 30px);height: 27.5%;border-top: 1px solid #ccc;background-color: #fff;padding-top: 5px;z-index: 1;}
.chart-canvas .volume-wrapper p {position: relative;display: inline-block;height: 100%;}
.chart-canvas .volume-wrapper p span {position: absolute;width: 100%;left: 0;bottom: 0;}
.chart-canvas #btnPass {display:none;position: absolute;right: 3px;bottom: 3px;width: 42px;height: 45px;border-radius: 25%;font-size: 13px;align-items: center;justify-content: center;background-color: #333;color: #fff;font-weight: 400;z-index: 1;}
.chart-canvas #btnPass:active {background-color:#777;color:#fff;}

.trading-area {vertical-align: top;margin-left: 15px;width: 585px;}
.trading-area .trading-top , .trading-area .trading-bottom {display:none;}
.trading-area .after-show {display:none;}
.trading-area.start .trading-top , 
.trading-area.start .trading-bottom {display:block;}

.trading-area.complete .buy-and-sell {display:none;}
.trading-area.complete .refresh-stock {display:block;}
.trading-area.complete .first-show {display:none;}
.trading-area.complete .after-show {display:inline-block;}

.trading-area .start-area {margin-bottom: 10px;}
.trading-area.start .start-area {opacity: 0;content-visibility: hidden;transition: all .3s;}
.trading-area.start.complete .start-area {opacity: 1;content-visibility: visible;}
.trading-area .start-area table tr ~ tr th {border-top:1px solid #ddd;}
.trading-area .start-area table tr th:last-child {border-bottom:none;}

.trading-area .start-area table tr td {text-align: left;padding-left: 1vw;padding: 6px 10px;}
.trading-area .start-area table tr td select,
.trading-area .start-area table tr td input {padding:5px;box-shadow: 0px 0px 5px #ccc;border: 1px solid #333;width:50%}

.finance a {display: inline-block;font-size: 12px;font-weight: 400;padding: 7px 10px;box-sizing:border-box;/* min-width: 4vw; */border-radius: 4px;box-shadow: 1px 1px 2px #777;text-align: center;font-weight: 500;}
.trading-area .stock-info a.hide {display:none;}
.trading-area .stock-info span {display:block;}
.trading-area a:active,
.trading-area a.selected{background-color:#333;color:#fff;}
.trading-area .start-area a {border:1px solid #000;vertical-align: bottom;}
.trading-area .start-area td:has(.btnTurn) a:nth-child(n+3) {margin-top: 5px;}

.trading-area.start.complete .start-area .btnTurn  {display:none;}
.trading-area.start.complete .start-area .btnTurn.selected  {display:inline-block;}
.trading-area .start-area .btnStart {padding: 0.5vw 2vw;}

.trading-area table {border-spacing:0;border:1px solid #aaa;border-collapse: collapse;width: 100%;margin-bottom: 5px;font-size: 13px;}
.trading-area .assets table {margin-top: 5px;}
.trading-area table tr th {font-weight:500;background-color:#eee;min-width: 30px;}
.trading-area table tr td {font-weight:400;text-align: right;}
.trading-area table tr td.center {text-align:center;}
.trading-area table tr th,
.trading-area table tr td {padding: 4px 10px;/* font-size: 13px; */}
.trading-area table tr:first-child td {border-top: 1px solid #aaa;}

.trading-area .buy-and-sell {font-size:0;margin-top: 5px;flex-wrap: wrap;}
.trading-area .buy-and-sell .amounts {display:flex;}
.trading-area .buy-and-sell .amounts .amount {position: relative;margin-top: 5px;width: 50%;justify-content: left;align-items: center;padding: 5px 5px;box-sizing: border-box;color: #fff;}

.trading-area .buy-and-sell .amounts .buy {background-color: #c77;}
.trading-area .buy-and-sell .amounts .sell {background-color: #77c;}

.trading-area .buy-and-sell .amounts .amount input[name$="Count"] {width: 65px;}
.trading-area .buy-and-sell .amounts .amount input[name$="Amount"] {width: 100px;}
.trading-area .buy-and-sell .amounts .amount span {font-size:12px;}
.trading-area .buy-and-sell .amounts .amount span:first-child {
    display: inline-block;
}
.trading-area .buy-and-sell .amounts .amount span ~ span {margin-left: 5px;}

.trading-area input {padding: 5px;border: 1px solid #ddd;display: inline-block;font-size: 13px;margin-left: 5px;}
.trading-area table td {border-top: 1px solid #ddd;}
.trading-area .trading-bottom {
    /* display: flex; */
    margin-top: 10px;
    height: 260px;
    overflow: hidden;
    overflow-y: scroll;
}
.trading-area .trading-bottom table {display: inline-table;width: 49%;border-spacing:0;margin: 0;table-layout: fixed;}
.trading-area  table th,
.trading-area table tr td {border-right:1px solid #ccc;}

.percent-area {display: flex;justify-content: space-between;}
.percent-area .percent-button {width: 50%;}
.percent-area .bs-button  {width: 49.5%;}
.percent-area .percent-button, .percent-area .bs-button {display: inline-flex;justify-content: space-around;}
.percent-area .percent-button a {border: 1px solid #000;flex: 1 1 auto;width: 20%;text-align: center;align-content: center;}
.percent-area .percent-button a ~ a {margin-left:2px;}
.percent-area .percent-button a[class*=calc] {color:#fff;border:transparent;width: 15%;}
.percent-area .percent-button a.calc-buy {background-color: #d30;}
.percent-area .percent-button a.calc-sell {background-color: #03d;}
.percent-area .percent-button a.selected {background-color:#000;color:#fff;}
.percent-area .bs-button a {color:#fff;width: 32%;padding: 6px 0;align-content: center;} 
.percent-area .bs-button a.pass {background-color: #777;}

@media screen and (max-width:768px) {
	#contents.finance {flex-wrap:wrap;}
	.chart-canvas {width: 100%;height: 50vw;font-size: 11px;}
	.chart-canvas .x-line, .chart-canvas .y-line {display:none;}
	.chart-canvas .line-wrapper {font-size: 10px;}
	.chart-canvas .line-wrapper span:before {width: 15px;}
	.chart-canvas .line-wrapper a {font-size:9px;padding: 3px 5px;}
	.chart-canvas:has(+.trading-area.start) #btnPass {display: flex;}
	
	.trading-area table {font-size:11px;}
	.trading-area table tr th, .trading-area table tr td {padding: 3px;}
	.trading-area {width: 100%;margin-left: 0;margin-top: 10px;}
	.trading-area .buy-and-sell .amounts .amount input[name$="Count"] {width: 25%;}
	.trading-area .buy-and-sell .amounts .amount input[name$="Amount"] {width: 42%;}
	.trading-area .mobile-none {display:none;}
	.finance a {padding: 1vw 1.5vw;font-size: 10px;}
	.percent-area .bs-button a {width:49%;}
}