/* ###################################################### */
/* 수정중 */
/* transaction 거래내역 */


.category {
    width: 76px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}
.category .dropdown {
    background: transparent;
    border: 0 none;
    justify-content: center;
    padding-left: 0;
}
.category .dropdown::after {
    margin-left: 3px;
    position: relative;
    display: inline-block;
    top: 25%;
    right: 0;
    vertical-align: middle;
    transform: translateY(-100%);
}
.category .dropdown+.dropdown--item {
    min-width: 76px;
}

.sub.transaction .period .btn{
	width: 136px;
}

/* board */
.sub.transaction .board--body{
	width: 100%;
}

.sub.transaction .transaction--list{
	/* table-layout: fixed; */
	border-spacing: 0;
	width: 100%;
}

.sub.transaction .transaction--list thead:after{
	display: block;
	content:'';
	width: 100%;
	height: 1px;
}
.sub.transaction .transaction--list th {
	text-align: center; 
}
.sub.transaction .transaction--list th,
.sub.transaction .transaction--list td{
    height: 46px; 
	border: 0.35px solid #BDC4CB; 
	background-color: #f5f5f5; 
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	box-sizing: border-box;
}
.sub.transaction .transaction--list td .btn--cancal {
	width: auto;
	padding: 0 0.3rem;
	height: auto;
	line-height: 1.4rem;
	font-size: .7rem;
	background: var(--red-up);
	color: #fff;
}

/*230309 거래내역 CSS 가로스크롤 및 고정 변경 */
.historyTb{
	margin-top : 30px;
	overflow-x: auto;
	white-space: nowrap;
	max-width: 100%;
	
}

.historyTb .table-bordered > thead > tr > th,
.historyTb .table-bordered > thead > tr > td {
	background-color: #EEEEEE;
	border-bottom-width: 1px;
	width: 150px;
}

.historyTb .table-bordered > thead > tr > th,
.historyTb .table-bordered > tbody > tr > th,
.historyTb .table-bordered > tfoot > tr > th,
.historyTb .table-bordered > thead > tr > td,
.historyTb .table-bordered > tbody > tr > td,
.historyTb .table-bordered > tfoot > tr > td {
	border: 1px solid #E0E0E0;
	white-space: nowrap;
}

.historyTb .table > thead > tr > th {
	border-bottom: 1px solid #8b8b8b;
	vertical-align: bottom;
}

.historyTb .table thead th{min-width: 70px;}

.historyTb .table > thead > tr > th,
.historyTb .table > tbody > tr > th,
.historyTb .table > tfoot > tr > th,
.historyTb .table > thead > tr > td,
.historyTb .table > tbody > tr > td,
.historyTb .table > tfoot > tr > td {
	border-top: 1px solid #d3d5d6;
	line-height: 1.42857;
	/* padding: 5px 0px; */
	padding: 0.5rem 1rem;
	box-sizing: border-box;
	vertical-align: middle;
	white-space: nowrap;
}

.historyTb thead tr th {
	background-color: #f1f1f1;
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 14px;
	font-weight: 500 !important;
	font-style: normal;
	font-stretch: normal;
	letter-spacing: normal;
	text-align: center;
	color: #000000;
	border: 1px solid #cacaca;
	border-top: 1px solid #cacaca;
}

.historyTb tbody > tr > td {
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 13px;
	font-weight: normal;
	font-style: normal;
	font-stretch: normal;
	letter-spacing: normal;
	text-align: center;
	color: #3a3c41;
	border-bottom: 1px solid #cacaca;
}

.historyTb tbody tr.firstTr td {
	padding-top: 18px;
	padding-bottom: 18px;
}

.historyTb tbody tr td.no-data-row {
	font-size: 14px;
	height: 50px;
	line-height: 33px;
}

.historyTb tbody tr td.numberTd {
	padding-right: 20px;
}

.historyTb tbody tr td.mergeTd {
	font-weight: 500;
}

.historyTb tbody tr td.mergeTd.light {
	font-weight: normal;
}

.historyTb tbody tr td.mergeTd.symbol {
	text-align: left;
	vertical-align: middle;
	overflow:hidden;
	padding-left: 1rem;
	padding-right: 1rem;
	white-space: nowrap;
	min-width: 140px;
}
.historyTb tbody tr td.mergeTd.cord {
	/* text-align: left; */
	text-align: center;
	vertical-align: middle;
	overflow:hidden;
	/* padding:0 0.5rem; */
	/* padding:0.5rem; */
	white-space: nowrap;
}

.historyTb tbody tr td.numberDiv{
	text-align: center;
    vertical-align: middle;
    overflow: hidden;
    /* padding:0 0.5rem; */
	padding:0.5rem;
    white-space: nowrap;
}


.historyTb tbody tr td.title_td {
	font-size: 14px;
}

.historyTb tbody tr td .number_div {
	font-size: 14px;
	text-align: right;
	/* padding-right: 2rem; */
}

.historyTb tbody tr td .number_div.text-center{
	text-align: center;
	padding-right: 0;
}

.historyTb tbody tr td .number_div.number_plus { color: #e43335; }
.historyTb tbody tr td .number_div.number_minus { color: #064780; }

.historyTb tbody tr td .symbol_div {
	font-size: 12px;
	text-align: right;
	color: #596581;
	/* padding-right: 2rem; */
}

.historyTb thead tr th:first-child,
.historyTb tbody tr td:first-child {
	border-left: 1px solid #cacaca;
}

.historyTb thead tr th:last-child,
.historyTb tbody tr td:last-child {
	border-right: 1px solid #cacaca;
}

.historyTb tbody tr td.mergeTd .btnArea{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.historyTb .btn.btn-xs{
	padding: 6px 14px 6px;
	font-size: 10px;
}

.historyTb .btn-primary{
	background-color: var(--blue-dn);
	border-color: var(--blue-dn);
	color: #FFFFFF;
}
.historyTb .btn-danger{
	background-color: var(--red-up);
	border-color: var(--red-up);
    color: #FFFFFF;
}


/* dataTable 스타일 수정 */
/* top이 고정이라서 (+) 아이콘이 줄 안맞아요. auto로 풀어 줄맞춤합니다. */
table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before, 
table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before {
	top:auto !important; 
}
/* 숨겨진 요소 영역을 width: 100%로 꽉채워요 */
table.dataTable>tbody>tr.child ul.dtr-details {
	width: 100%;
}


.sub.transaction .transaction--list th:first-of-type{
	/* 첫번째 th */
	/* border-top-left-radius: 10px; */
}

.sub.transaction .transaction--list th:last-of-type{
	/* 마지막 th */
	/* border-top-right-radius: 10px; */
}

.sub.transaction .transaction--list th:not(:first-child),
.sub.transaction .transaction--list td:not(:first-child)
{
	border-left: none;
}

.sub.transaction .transaction--list td{
	background-color: transparent;
	height: auto;
	padding: 7px 10px;
}

.sub.transaction .transaction--list tr:not(:first-child) td{
	border-top: none;
}

.sub.transaction .transaction--list td:nth-of-type(1)
.sub.transaction .transaction--list td:nth-of-type(2),
.sub.transaction .transaction--list td:nth-of-type(6),
.sub.transaction .transaction--list td:nth-of-type(7),
.sub.transaction .transaction--list td:nth-of-type(8),
.sub.transaction .transaction--list td:nth-of-type(9),
.sub.transaction .transaction--list td:nth-of-type(10){
	/* white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; */
	word-break: break-all;
    white-space: break-spaces;
}

.sub.transaction .pc_period{
	flex-wrap: wrap;
}
.sub.transaction .top_area{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
	height: 40px;
	margin-bottom: 10px;
}

.sub.transaction .period_btnArea{
	display: flex;
}


.sub.transaction .symbol-select{
	border: 0.35px solid #DFDFDF;
	border-radius: 3px;
	width: 31%;
}


.sub.transaction .symbol-select .dropdown+.dropdown--item{
	min-width: initial;
}

.sub.transaction .symbol-select .dropdown+.dropdown--item input[name=search]{
	height: 40px;
	line-height: 40px;
	width: 100%;
}

.sub.transaction .symbol-select .dropdown::after{
	right: 5px;
}



.sub.transaction .period_text{
	width: 68px; 
	text-align: center; 
	margin:0 10px;
	font-size: 16px;
	font-weight: 500;
	align-items: center;
    justify-content: center;
	align-self: center;
}

.sub.transaction .period_btn{
	width: 60px;
	height: 40px;
	line-height: 40px;
}
.sub.transaction .period_btn:not(:last-child){
	margin-right: 10px;
}

.sub.transaction .datepicker{
	width: 68%;
}

.sub.transaction .daterange::before{
	display: none;
}

/* .sub.transaction .datepicker .blind{
	position: absolute; left: 0; top: 0; 
	width: 0; height: 0; font-size: 0; line-height: 0; 
	text-indent: -9999px; overflow: hidden; visibility: hidden;
} */
.sub.transaction .datepicker span{
	font-size: 16px;
	text-align: center;
	width: 6%;
	display: inline-block;
	font-weight: 500;
}
.sub.transaction .datepicker input[type="date"]{
	border: 0.35px solid #DFDFDF;
    border-radius: 3px;
	height: 40px;
	width: 46%;
	padding: 0 10px;
} 
.sub.transaction .desktop-only .btn.btn--red{
	width: calc(32% - 10px);
}


/* @media screen and (min-width: 801px) and (max-width: 1024px){
	.sub.transaction .transaction--list th{
		font-size: 12px;
	}
} */
/******  230309 mk 모바일용 그리드 추가 ***/
.historyTb{
		display: none;
		max-widht:100%;
	}
#transactionGrid2{
	min-width: 1200px;
	padding-right:16px;
}
#transactionGrid2_paginate{
	padding-right:16px;
}

@media screen and (max-width: 1400px){
	.historyTb{
		display: flex;
	}
	#transactionGrid2{
		flex: 1;
		min-width: 1080px;
	}
	#transactionGrid_wrapper{
		display: none;
	}
}

@media screen and (max-width: 800px){
	#transactionGrid2_wrapper .dataTables_info{
		display: inline- block;	
		width:10%;
	}
	#transactionGrid2_paginate{
		display: none;
	}
	
	.sub.transaction > header{display: none;}

	.sub.transaction .contents .contents--header{
		justify-content: flex-start;
		align-items: center;
	}

	.sub.transaction .contents--header > div{
		display: flex;
		align-items: center; 
	}
	.sub.transaction .contents--header > div .icon-alarm{
		background: url('../img/icon/icon-alarm.svg') no-repeat 50%;
		margin-right: 15px;
	}
	
	.sub.transaction .contents--header > div .icon-setting{
		background: url('../img/icon/icon-setting.svg') no-repeat 50%;
	}

	.sub.transaction .contents .contents--header h1{
		color: var(--red-up);
	}

	.sub.transaction .contents .icon-transaction{
		background: url('../img/icon/icon-transaction-red.svg') no-repeat 50%;
		background-size: contain;
	}
	.sub.transaction .contents h1.size--20.mobile-only > span{
		vertical-align: middle;
		padding-left: 10px;
		font-size: 20px;
	}
	
	.sub.transaction .desktop-only{display: none!important;}
	.sub.transaction .mobile-only{display: block!important;}

	.sub.transaction .period > div:nth-of-type(1) .dropdown-wrapper:nth-child(1){
		/* width: 140px; */
		width: calc(30% - 4px);
		padding-left: 0px;
	}

	.sub.transaction .period > div:nth-of-type(1) .dropdown-wrapper:nth-child(1) .dropdown+.dropdown--item input[name=search]{
		height: 40px;
		line-height: 40px;
		width: 100%;
	}

	.sub.transaction .period{
		padding-bottom:28px;
		border-bottom: 8px solid #f5f5f5;
	}
	.sub.transaction .period .dropdown-wrapper{
		width: 85px;
	}

	.sub.transaction .period .dropdown{
		padding: 0;
		/* padding-left: 10px; */
		justify-content: space-between;
	}
	.sub.transaction .period .dropdown:after,
	.sub.transaction .board--body .dropdown:after{
		width: 20px;
		height: 35px;
		position: static; 
		top: inherit;
		transform: none;
		background: transparent url(../img/btn-rolldown.svg) no-repeat 50% 50%;
		background-size: contain;
		mask-image: none;
		-webkit-mask-image: none;
	}
	
	.sub.transaction .period .mdatepicker{
		height: 44px;
		width: 64%;
	}
	.sub.transaction .period .mdatepicker span{
		font-size: 16px;
		text-align: center;
		width: 5%;
		display: inline-block;
		font-weight: 500;
	}

	.sub.transaction .period .mdatepicker input[type="date"]{
		border: 0.35px solid #DFDFDF;
		border-radius: 3px;
		height: 44px;
		width: 46%;
		padding: 0 10px;
	} 

	.sub.transaction .period .btn{
		width: 34%;
		border-radius: 5px;
	}
	
	@media screen and (max-width: 500px){
		.sub.transaction .range_btn{
			flex-direction: column;
		}
		.sub.transaction .period .mdatepicker{
			width: 100%;
		}
		.sub.transaction .period .btn{
			margin-top: 10px;
			width: 100%;
			border-radius: 5px;
		}
		.sub.transaction .period > div:nth-of-type(1) .dropdown-wrapper:nth-child(1){
			width: calc(47% - 5px);
		}
	}

	/* ########################################################################### */
	/* tab head */
	.sub.transaction .board--body .tab_bar .background{
		display: none;
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 1;
	}

	.sub.transaction .board--body .tab_bar .background.active{
		display: block;
	}

	.sub.transaction .board--body .tab_header{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.sub.transaction .board--body .refresh{
		width: 65px;
	}
	.sub.transaction .board--body .refresh-btn{
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		border: none;
		background: transparent;
		user-select: none;
		-webkit-user-drag: none;
		font-family: Inter;
		font-size: 14px;
		width: 100%;
		height: 40px;
		letter-spacing: -0.05em;
		color: #8B95A1;
	}

	.sub.transaction .board--body .refresh-btn:after{
		display: block;
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		border: 0 none;
		width: 24px;
		height: 40px;
		background: transparent url(../img/icon/icon-Refresh.svg) no-repeat 50% 50%;
	}



	.sub.transaction .board--body .dropdown{
		padding: 0;
		width: 70px;
		justify-content: space-between;
	}

	

	.sub.transaction .board--body .dropdown--item{
		display: none;
		position: fixed;
		top: inherit;
		bottom: 0;
		height: 359px;
		max-height: initial;
		border-radius:15px 15px 0 0;
		text-align: left;
		border:none;
	}
	.sub.transaction .board--body .dropdown.dropdown--open+.dropdown--item{
		display: block; 
	}

	.sub.transaction .board--body .dropdown--item .title{
		position: relative;
		width: 100%;
		padding-left: 27px;
		height: 82px;
		line-height: 82px;
		font-size: 18px;
		font-weight: 500;
		box-sizing: border-box;
	}

	.sub.transaction .board--body .dropdown--item .navigation--close{
		position: absolute;
		right: 31px;
		top: 31px;
	}

	.sub.transaction .board--body .dropdown--item ul{
		margin: 0;
		padding: 27px;
		padding-top: 0;
	}

	.sub.transaction .board--body .dropdown--item li:not(:last-child){
		margin-bottom:20px;
	}

	.sub.transaction .board--body .dropdown--item ul li button{
		box-sizing: border-box;
		width: 100%;
		text-align: left;
		font-size: 16px;
		font-weight: 400;
	}

	
	/* ############################################################################# */
	.m-transaction--list{
		width: 100%;
	}

	.m-transaction--list .date{
		font-size: 14px;
		font-weight: 400;
		color: #8B95A1;
		margin-bottom: 30px;
	}
	
	.m-transaction--list.accordion .accordion--item .accordion--header{
		height: 102px;
		padding-left: 0;
	}
	.m-transaction--list.accordion .accordion--item:not(.accordion--open) .accordion--header{
		border-radius: none;
	}
	
	.m-transaction--list.accordion .accordion--item:not(:last-child) {
		margin-bottom: 0;
	}
	.m-transaction--list.accordion .accordion--item {
		border: none;
		border-radius: initial;
		/* 전부변경 */
	}
	.m-transaction--list.accordion .accordion--item.accordion--open .accordion--header {
		border-bottom: none;
		border-radius: initial;
		/* 전부변경 */
	}

	.m-transaction--list.accordion .accordion--item .accordion--header {
		height: 102px;
		background: var(--white);
	}
	.m-transaction--list.accordion .accordion--item .accordion--header::after {
		right: 0px;
	}
	.m-transaction--list.accordion .accordion--item .accordion--header a {
		width: 80%;
		padding: 0 48px 0 0;
		justify-content: space-between;
	}

	.m-transaction--list.accordion .accordion--item .accordion--header .product{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.m-transaction--list.accordion .accordion--item .accordion--header .items{
		height: 45px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		font-size: 16px;
		font-weight: 500;
		color: #333;
	}

	.m-transaction--list.accordion .accordion--item .accordion--header .item{
		color:#8B95A1;
		font-size: 12px;
		font-weight: 400;
	}

	.m-transaction--list.accordion .accordion--item .accordion--contents {
		height: 0;
		padding: 0 16px 0 52px;
		background: #F9FAFB;
		border-radius: initial;
		-webkit-transition: all .12s cubic-bezier(0, 0, 1, 1);
		transition: all .12s cubic-bezier(0, 0, 1, 1);
		box-sizing: border-box;
		overflow: hidden;
		position: relative;
	}
	.m-transaction--list .accordion--item .accordion--contents ul li{
		list-style-type: none;
	}

	.m-transaction--list .accordion--item.accordion--open .accordion--contents {
		padding: 24px 12px 31px;
		height: auto;
		line-height: 14px;
	}
	
	.m-transaction--list .accordion--item.accordion--open .accordion--contents ul li{
		list-style-type: none;
		font-size: 14px;
		font-weight: 400;
		line-height: 14px;
	}

	.m-transaction--list .accordion--item.accordion--open .accordion--contents ul li:not(:last-child){
		margin-bottom: 20px;
	}

	.m-transaction--list .accordion--item.accordion--open .accordion--header {
		background: var(--white);
	}
	.m-transaction--list .accordion--item.accordion--open .accordion--contents ul li span{
		display: inline;
		float: right;
	}
}

@media screen and (max-width: 450px){
	.m-transaction--list.accordion .accordion--item .accordion--header .items{
		height: 65px;
	}
	
	.m-transaction--list.accordion .accordion--item .accordion--header .item{
		display: flex;
		flex-direction: column;
	}

	.m-transaction--list.accordion .accordion--item .accordion--header a .price{
		font-size: 16px;
	}
}

@media screen and (max-width: 380px){
	.m-transaction--list.accordion .accordion--item .accordion--header{
		height: 90px;
	}
	
	.sub.transaction .range_btn {
		flex-direction: column;
	}

	.sub.transaction .period .daterange{
		margin-bottom: 10px;
		margin-right: 0!important;
		width: 100%;
	}
	.m-transaction--list.accordion .accordion--item .accordion--header a{
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
	}
	.m-transaction--list.accordion .accordion--item .accordion--header a .price{
		font-size: 14px;
		align-self: flex-end;
	}
	.m-transaction--list.accordion .accordion--item .accordion--header .items .name{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 100px;
	}

	.sub.transaction .period .btn{
		width: 100%;
	}

	.m-transaction--list.accordion .accordion--item .accordion--header .items{
		height: 65px;
		justify-content: initial;
	}
	
	.m-transaction--list.accordion .accordion--item .accordion--header .item{
		display: flex;
		flex-direction: column;
	}
}