.modalFrame{ padding:0; }
.modalFrame iframe{ z-index:1; position:relative; height:100vh; max-height:750px; }
.modalFrame .modal-dialog{ max-width:1200px; min-height:100%; }
.modalFrame .modal-dialog .modal-close-btn{ width:25px; height:25px; }
.modalFrame .modal-dialog .modal-content .modal-spinner{ z-index:0; position:absolute; top:0; bottom:0; left:0; right:0; display:flex; justify-content:center; align-items:center; }
.modalFrame .modal-dialog .modal-content .modal-spinner i{ opacity:.2; font-size:15vh; animation:modal_spinner 3s ease-in-out infinite; }
@keyframes modal_spinner{ from { transform:rotate(0deg); } to { transform:rotate(360deg); } }

.modal-backdrop.show{ opacity:0.6; background-color:#000000; }


.subModal{ display:flex; flex-direction:column; height:100vh; background-color:var( --bg-color ); }
.subModal .modal-content{ background:transparent; border:none; box-shadow:none; }

.subModal .modal-dialog{ max-width:1200px; padding:0 10px; }
.subModal .modal-dialog .modal-close-btn{ width:25px; height:25px; }


.subModal .modal-head .modal-menu{ width:100%; height:60px; margin:0 0 20px; padding:0 60px 0 0; background-color:#fff; border-bottom:solid 1px var( --white-10 ); }
.subModal .modal-head .modal-menu li{ height: 100%; }
.subModal .modal-head .modal-menu li a{ height: 100%; font-weight: bold; color: var( --black ); font-family: var( --boxedlight ); padding: 0 10px; position: relative; font-size:14px; white-space:nowrap; }
.subModal .modal-head .modal-menu li a:after{ width: 0; height: 2px; background-color: #6b1a94; bottom: -1px; left: 0; right: 0; opacity: 0; }
.subModal .modal-head .modal-menu li a:hover:after{ width: 100%; opacity: 1; }
.subModal .modal-head .modal-menu li a.active:after{ width: 100%; opacity: 1; }
.subModal .modal-head .modal-menu li a.active{ color: #b461de; font-weight: bold; }


.subModal .modal-head .subpg-nav{ margin:0 0 20px; padding:0; }
.subModal .modal-head .subpg-nav > a{ width:auto; margin:5px 5px; padding:0 30px; }
.subModal .modal-head .subpg-nav > a+a{ margin-left:0; }

.subModal .modal-body{ height:600px; overflow-y:auto; color:var( --white); }
.subModal .modal-body:before{ display:none; }
.subModal .modal-body .section-header{ padding:0; border:none; }
.subModal .modal-body .section-header:after{ display:none; }
.subModal .modal-body .section-header .title{ display:inline-block; position:relative; padding:0 15px 10px; }
.subModal .modal-body .section-header .title{ display:none; }
.subModal .modal-body .section-header .title:after{ content:""; position:absolute; bottom:-2px; left:0; width:100%; height:3px; background-color:var( --orange ); }
.subModal .modal-body .section-header .list-tab{ display:flex; flex-wrap:wrap; justify-content:flex-start; width:100%; }
.subModal .modal-body .section-header .list-tab a{ display:block; margin:2px; padding:5px 15px; color:var( --white); font-size:13px; background-color:var( --white-10 ); border-radius:5px; white-space:nowrap; }
.subModal .modal-body .section-header .list-tab a i{ margin-left:5px; padding:2px 5px; font-style:normal; font-size:11px; background-color:var( --orange); border-radius:20px; }
.subModal .modal-body .section-header .list-tab a:hover,
.subModal .modal-body .section-header .list-tab a:active,
.subModal .modal-body .section-header .list-tab a.active{ color:#ffffff; background-color:var( --blue); }
.subModal .modal-body .section-header .list-tab a:hover i,
.subModal .modal-body .section-header .list-tab a:active i,
.subModal .modal-body .section-header .list-tab a.active i{ color:var( --blue); background-color:#ffffff; }
.subModal .modal-body .title{ font-size:16px; }
.subModal .modal-body .form-container{ max-width:unset; }
.subModal .modal-body .form-container.scrollbar-x{ overflow-x:auto; }
.subModal .modal-body .form-container.scrollbar-x::-webkit-scrollbar{ height:8px; }
.subModal .modal-body .form-container.scrollbar-x .bs-table{ white-space:nowrap; }
.subModal .modal-body .description{ word-break:keep-all; color:var(--black) }

.subModal .modal-body .form-container .bs-table tr:last-child td:first-child:last-child{ border-radius:0 0 10px 10px; }
.subModal .modal-body .form-container .bs-table thead th{ padding:0 5px; white-space:nowrap; }
.subModal .modal-body .form-container .bs-table thead tr:first-child th[colspan]{ border:none; }
.subModal .modal-body .form-container .bs-table.with-depth thead th{ border-radius:0; }
.subModal .modal-body .form-container .bs-table.with-depth thead th:first-child{ border-radius:10px 0 0 10px; }
.subModal .modal-body .form-container .bs-table.with-depth thead th:last-child{ border-radius:0 10px 10px 0; }
.subModal .modal-body .form-container .bs-table tr td{ max-width:40%; word-break:keep-all; }

.subModal .modal-body .btn-grp{ display:flex; }

.subModal .form-container .form-group .infos .btn-grp{ display:flex; float:none; width:100%; }
.subModal .form-container .form-group .infos .btn-grp div{ width:100%; padding:0 2px 4px; }
.subModal .form-container .form-group .infos .btn-grp div button{ width:100%; float:none; margin:0; padding:0 10px; white-space:nowrap; }


/* betting-list */
.subModal .modal-body .form-container .bs-table.betting-list thead th{ border-bottom:solid 4px var( --bg-color-light); }
.subModal .modal-body .form-container .bs-table.betting-list thead tr:first-child th[colspan]{ border-bottom:solid 4px var( --bg-color-light); }
.subModal .modal-body .form-container .bs-table.betting-list tbody tr:last-child td{ border-bottom:solid 4px var( --bg-color-light); }
.subModal .modal-body .form-container .bs-table.betting-list .betting-list-total{ display:flex; justify-content:center; align-items:center; }
.subModal .modal-body .form-container .bs-table.betting-list .betting-list-total > div{ padding:0 5px; }
/* betting-list */

/* exchange-list */
.subModal .modal-body .form-container .bs-table.exchange-list thead tr th{ height:22px; }
.subModal .modal-body .form-container .bs-table.exchange-list thead tr:last-child th{ border-radius:0; }
/* exchange-list */


.subModal .form-section { background-color:#fff; padding:20px;}
/* exchange */
.exchange-cash-head{ width:100%; }
.exchange-cash-head > div{ display:flex; justify-content:space-between; align-items:center; width:100%; height:80px; margin:0 0 20px; }
.exchange-cash-head > div > div{ display:flex; align-items:center; justify-content:space-evenly; height:100%; text-shadow:0 1px 1px rgba(0, 0, 0, 0.7); }
.exchange-cash-head > div > div .icon i{ font-size:40px; transition:all 0.5s ease-in-out; transform:rotate(0deg); color:var( --white); }
.exchange-cash-head > div > div.right .icon i{ transform:rotate(720deg); color:var( --orange); }
.exchange-cash-head > div > div h3{ margin:0; padding:0 10px; font-size:14px; font-weight:bold; transition:all 0.3s ease-in-out, font-size 0.1s; color:var( --white); }
.exchange-cash-head > div > div h3 span{ display:block; padding:2px 0; }
.exchange-cash-head > div > div h3 span.cash{ color:var( --orange); }
.exchange-cash-head > div .right .icon{ order:1; }
.exchange-cash-head > div .right h3{ text-align:right; }
.exchange-cash-head > div .center button{ position:relative; width:60px; height:60px; overflow:hidden; border:none; border-radius:100%; background:transparent; background-image:linear-gradient(0deg, #8c280b, #ff7e58); box-shadow:3px 5px 10px rgba(0, 0, 0, 0.3); }
.exchange-cash-head > div .center button i{ transition:all 0.3s ease-in-out; transform:rotate(0deg); animation:arrowLoop 1s ease-in-out infinite; }
.exchange-cash-head > div .center button i{ font-size:30px; color:var( --white); text-shadow:0 1px 1px rgba(0, 0, 0, 0.7); }
.exchange-cash-head .cash-info > div{ width:100%; max-width:45%; box-shadow:inset 0 0 30px rgba(0, 0, 0, 0.3); border-radius:40px; }
.exchange-cash-head .cash-direction{ justify-content:space-evenly; box-shadow:inset 0 0 30px rgba(0, 0, 0, 0.3); border-radius:40px; cursor:pointer; }
.exchange-cash-head .cash-direction div{ width:calc(100% / 3); }
.exchange-cash-head .cash-direction .left h3{ color:var( --white); font-size:12px; }
.exchange-cash-head .cash-direction .right h3{ color:var( --orange); font-size:16px; }

.exchange-cash-head.reverse .cash-info .left .icon i{ transform:rotate(720deg); color:var( --orange); }
.exchange-cash-head.reverse .cash-info .right .icon i{ transform:rotate(0deg); color:var( --white); }
.exchange-cash-head.reverse .cash-direction .left h3{ color:var( --orange); font-size:16px; }
.exchange-cash-head.reverse .cash-direction .right h3{ color:var( --white); font-size:12px; }
.exchange-cash-head.reverse .cash-direction .center button{ background-image:linear-gradient(0deg, #00357e, #0167a8); }
.exchange-cash-head.reverse .cash-direction .center button i{ transform:rotate(-180deg); }

@keyframes arrowLoop{
	0%{ margin-left:-10px; }
	50%{ margin-left:10px; }
	100%{ margin-left:-10px; }
}

@media (max-width: 800px){
	.exchange-cash-head > div > div .icon i{ font-size:24px; }
	.exchange-cash-head > div > div h3{ font-size:12px; }
	.exchange-cash-head > div .center button{ width:50px; height:50px; }
	.exchange-cash-head > div .center button i{ font-size:24px; }

	.subModal .modal-dialog{ margin:0 auto; padding:0; }
	.subModal .modal-dialog .modal-close-btn{ top:5px; right:5px; width:20px; height:20px; }
	.subModal .modal-dialog-centered{ align-items:stretch; }

	.subModal .modal-head .modal-menu{ display:flex; flex-wrap:wrap; height:auto; margin:20px 15px 20px; padding:0; }
	.subModal .modal-head .modal-menu li{ width:25%; height:50px; padding:0 5px; }
	.subModal .modal-head .modal-menu li a{ font-size:12px; }
	.subModal .modal-head .modal-menu li a:not(.active):after{ opacity:0.2; width:100%; }
	.subModal .modal-head .modal-menu li a:hover:after{ opacity:1; width:100%; }

	.subModal .modal-head .subpg-nav{ margin:0 0 5px; }
	.subModal .modal-head .subpg-nav a{ padding:0 20px; }
	.subModal .modal-head .subpg-nav a.active{ background-color:var( --orange ); color:var( --white); }

	.subModal .modal-body .section-header .title{ padding:0 5px 5px; }
	.subModal .modal-body .section-header .list-tab a{ min-width:calc((100% / 4) - 4px); padding:5px 5px; font-size:12px; }
	.subModal .modal-body .section-header .list-tab a i{ margin-left:3px; }
	.subModal .modal-body .form-container{ margin-top:10px; }
	.subModal .modal-body .description{ font-size:12px; }

}
@media (max-width: 600px){
	.subModal .modal-body .section-header .list-tab a{ min-width:calc((100% / 3) - 4px); margin:1px; font-size:11px; }
	.subModal .modal-body .section-header .list-tab a i{ padding:1px 3px; }
	
	.subModal .form-container .form-group .infos .btn-grp{ flex-wrap:wrap; }
	.subModal .form-container .form-group .infos .btn-grp div{ width:calc(100% / 5); }
}
@media (max-width: 500px){
	.exchange-cash-head > div{ height:60px; }
	.exchange-cash-head .cash-info > div{ max-width:calc(50% - 5px); }

	.subModal .modal-body .section-header .list-tab a{ letter-spacing:-1px; }

}