/* Value changed by window width */ 
._header-side { width: 100px; }
._header-user-img { width: 27px; height: 27px; }
._header-btn-icon { width: 24px; height: 27px; }
.dollar_sign_space { padding-left: 21px; }
.leverage_width { width: 80px; }

@media ( min-width : 992px) {
  html { font-size: 18px; }
  ._header-side { width: 152px; }
  ._header-user-img { width: 33px; height: 33px; }
  ._header-btn-icon { width: 30px; height: 33px; }
  .dollar_sign_space { padding-left: 23px; }
  .leverage_width { width: 100px; }
}
/* Value changed by window width END */

/* Hide scrollbar for Chrome, Safari and Opera */
.nav-underline::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.nav-underline {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* nav link font color */
.nav-underline .nav-link {
  color: var(--bs-dark); 
  border-color: rgba(0, 0, 0, 0); 
}
.nav-underline .nav-link.active, .nav-underline .show > .nav-link {
  color: var(--bs-red); 
  border-bottom: 3px solid var(--bs-red); 
}
/* nav link font color END */

select._unselected {
  /*font-size: 0.8rem; */
  color: #adb5bd; /* #6c757d */
}

._max-width-lg { max-width: 992px; }


/* sweetalert2 btn no shadow */
/* .swal2-popup .swal2-styled:focus { box-shadow: none !important; } */
/* sweetalert2 btn no shadow END */

.ss { border: 1px solid var(--bs-red); }

.fixed-top {
  z-index: 1040;
}

.sidenav {
  z-index: 1040;
  box-shadow: 0 20px 30px -1px rgb(0 0 0 / 30%), 0 10px 20px -1px rgb(0 0 0 / 18%);
}

.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* fix Safari select style missing */
.form-select {
  -moz-appearance: none;
  -webkit-appearance: none;
  background-position: right 13px center;
}

.custom-select {
  -moz-appearance: none;
  -webkit-appearance: none;
}
/* END fix Safari select style missing */

/* keep form check valid input style unchanged and skip some invalid input style */
:root {
	--bs-body-color: #344767;
  --input-border-color: #d2d6da;
  --form-feedback-valid-color: #e91e63;
}

.was-validated .form-check-input:valid~.form-check-label, 
.was-validated .form-check-input:invalid~.form-check-label, 
.form-check-input.is-valid~.form-check-label,
.form-check-input.is-invalid~.form-check-label {
  color: var(--bs-body-color);
}

.was-validated .form-check-input:valid, 
.form-check-input.is-valid {
  border-color: var(--input-border-color);
}

.was-validated .form-check-input:invalid:checked, 
.form-check-input.is-invalid:checked {
  background-color: var(--form-feedback-valid-color);
}

.was-validated .form-control:valid, 
.form-control.is-valid {
  border-color: var(--input-border-color);
  background-image: none;
}

.was-validated .form-select:valid,
.was-validated .form-select:valid:not([multiple]):not([size]), 
.was-validated .form-select:valid:not([multiple])[size="1"], 
.form-select.is-valid:not([multiple]):not([size]), 
.form-select.is-valid:not([multiple])[size="1"] {
  border-color: var(--input-border-color);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-position: right 13px center;
}

.dark-version .was-validated .form-select:valid,
.dark-version .was-validated .form-select:valid:not([multiple]):not([size]), 
.dark-version .was-validated .form-select:valid:not([multiple])[size="1"], 
.dark-version .form-select.is-valid:not([multiple]):not([size]), 
.dark-version .form-select.is-valid:not([multiple])[size="1"] {
  border-color: rgba(255, 255, 255, 0.4)
}

.form-switch .form-check-input:checked {
  border-color: #e91e63;
  background-color: #e91e63;
}

.was-validated .form-check:not(.form-switch) .form-check-input:valid:checked, 
.form-check:not(.form-switch) .form-check-input.is-valid:checked {
	border-color: #e91e63;
  background-color: #e91e63;
}

.was-validated .form-check-input:valid:checked, 
.form-check-input.is-valid:checked {
	border-color: #e91e63;
  background-color: #e91e63;
}

.form-check:not(.form-switch) .form-check-input[type="checkbox"],
.form-check:not(.form-switch) .form-check-input[type="radio"] {
  background-color: transparent;
}

.dark-version .form-check:not(.form-switch) .form-check-input[type="checkbox"],
.dark-version .form-check:not(.form-switch) .form-check-input[type="radio"] {
  border-color: rgba(255, 255, 255, 0.4);
}

.was-validated .form-check:not(.form-switch) .form-check-input[type="checkbox"]:invalid, 
.was-validated .form-check:not(.form-switch) .form-check-input[type="radio"]:invalid,
.form-check:not(.form-switch) .form-check-input[type="checkbox"].is-invalid,
.form-check:not(.form-switch) .form-check-input[type="radio"].is-invalid {
  border-color: #fd5c70;
}	
/* END keep form check valid input style unchanged and skip some invalid input style */

/* fix material-dashboard dark mode */
.dark-version .text-success {
  color: #5DC887 !important;
}

.dark-version .text-danger {
  color: #ff5361 !important;
}

.dark-version .text-secondary {
  color: #c3c3c3 !important;
}

.dark-version .text-warning {
  color: #fb8c00 !important;
}

.dark-version .card p.text-danger {
  color: #ff5361 !important;
}

.btn-close {
  color: #344767;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23344767'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat
}

.form-label {
  color: #344767; font-weight: 700;
}

.dark-version .btn-close {
  color: #fff;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat
}

.dark-version .alert-dismissible .btn-close {
  background-image: none;
}

.form-select:focus {
  border: 1px solid #d2d6da;
}

.dark-version .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23D3D4D8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  color: rgba(255, 255, 255, 0.8) !important
}

.dark-version .form-select option {
    color: #495057 !important; /* 文字颜色 */
}
.dark-version .form-select option:hover {
    
}

.dark-version .form-switch .form-check-input {
  background-color: #42424a;
}

.dark-version .form-switch .form-check-input:checked {
  background-color: #e91e63;
}
	
.dark-version .form-control::placeholder { 
  color: #666769;
}

.input-group .input-group-text {
  padding: 0.5rem 0.75rem;
}
.dark-version .input-group .input-group-text {
  color: rgba(255, 255, 255, 0.8) !important;
}

.dark-version .modal-content {
  background: #202940;
  box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 20%), 0 1px 5px 0 rgb(0 0 0 / 12%);
}

.dark-version .modal-header,
.dark-version .modal-footer {
  border-color: #585B5D;
}

.dark-version .navbar .sidenav-toggler-inner .sidenav-toggler-line {
	background-color: #fff !important;
}

.bg-white-to-dark {
	background-color: #fff;
}

.dark-version .bg-white-to-dark {
  background-color: #202940;
}

.btn-group ul.bg-light {
	background-color: #fff !important;
}

.input-group> :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  border-top-left-radius: 0.375rem !important;
  border-bottom-left-radius: 0.375rem !important;
}

.dark-version .dropdown-menu,
.dark-version .dropdown-item {
  color: #adb5bd !important;
}

.dark-version .form-label {
	color: #fff;
}

.dark-version .nav.nav-pills {
    background: #344767;
}

.dark-version .nav-pills {
    --bs-nav-pills-link-active-bg: #202940;
}

.dark-version .nav.nav-pills .nav-link {
    color: #888;
}
.dark-version .nav.nav-pills .nav-link:hover:not(.active) {
    color: #c3c3c3;
}
.nav.nav-pills .nav-link {
    color: #7b809a;
}
.dark-version .nav.nav-pills a.active {
    color: #fff;
}
.nav.nav-pills a.active {
    color: #344767;
}

.dark-version .moving-tab .nav-link.active {
    box-shadow: 0px 1px 5px 1px #ffffff11;
    background: #202940;
}

.dark-version .progress {
	  background-color: #344767 !important
}

.dark-version .form-control[disabled],
.dark-version .form-control[readonly] {
	 background-color: #344767 !important;
}

/* END fix material-dashboard dark mode */

/* fix select2 dark mode */
.dark-version .select2-container--bootstrap-5 .select2-dropdown {
  background-color: #202940;
  color: #fff;
}

.dark-version .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
  background-color: #202940;
  color: #fff;
}

.dark-version .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
	background-color: #45547F;
  color: #fff;
}

.select2-container--bootstrap-5 .select2-selection {
  background-color: transparent !important;
  font-size: 0.875rem !important;
  border-radius: 0.375rem !important;
  min-height: calc(1.75em + 1rem + 2px) !important;
}

.dark-version .select2-container--bootstrap-5 .select2-selection {
  border-color: rgba(255, 255, 255, 0.4)
}


.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option {
	font-size: 0.875rem !important;
}

.dark-version .select2-container--bootstrap-5 .select2-selection--single {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23D3D4D8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}


.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered, 
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered{
  line-height: 1.5rem !important;
}

.dark-version .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  color: rgba(255, 255, 255, 0.8);
}

.dark-version .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
	font-size: unset;
	 color: rgba(255, 255, 255, 0.8);
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder,
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__placeholder {
  color: #adb5bd !important;
  opacity: 1 !important;
  font-size: 0.875rem !important;
  line-height: 1.5rem !important;
}

.dark-version .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder,
.dark-version .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__placeholder { 
  color: #666769 !important;
}

.select2-container--bootstrap-5 .select2-selection--single,
.select2-container--bootstrap-5 .select2-selection--multiple {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
/* END fix select2 dark mode */

/* collapse with spin arrow btn */
.panel-heading {
  padding: 0;
  border:0;
}
.panel-title>a, .panel-title>a:active{
  display:block;
  font-size:16px;
  font-weight:bold;
  text-transform:uppercase;
  letter-spacing:1px;
  word-spacing:3px;
  text-decoration:none;
}

.panel-heading a:before {
  display: inline-flex;
  content: '';
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-size: 100%;
  height: 16px;
  width: 16px;
  transition: all 0.5s;
}

.dark-version .panel-heading a:before {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23D3D4D8' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.panel-heading.active a:before {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
} 

.pl-0 {
  padding-left : 0px;
}
/* END collapse with spin arrow btn */

/* landing page */
.hero {
	height: auto !important;
	padding: 0;
	background: linear-gradient(168deg, rgba(0,0,0,0) 40%, rgba(154,79,162,0.8) 60%, rgba(182,75,128,1) 70%);
}

.hehe {
  height: auto !important;
  padding: 0;
  background: linear-gradient(168deg, rgba(0,0,0,0) 55%, rgba(154,79,162,0.2) 70%, rgba(182,75,128,1) 90%);
}

.hype {
  height: auto !important;
  padding: 0;
  background: linear-gradient(170deg, rgba(0,0,0,0) 30%, rgba(182,75,128,1) 45%, rgba(14,12,26,1) 63%);
}

.arbi {
  height: auto !important;
  padding: 0;
  background: linear-gradient(165deg, rgba(0, 0, 0, 0) 30%, rgba(213, 151, 52, 1) 40%, rgba(21, 3, 41, 1) 55%);
}

@media ( min-width : 992px) {
	.hero {
	  min-height: 600px;
    height: 75% !important;
	}
	
	.hehe {
    min-height: 600px;
    height: 85% !important;
  }
  
  .hype {
    min-height: 600px;
    height: 90% !important;
  }
  
  .arbi {
    min-height: 600px;
    height: 90% !important;
  }
}

.hero-right {
  background-image: url("../../img/hero-bg.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: right bottom; 
}

.hype-right {
  background-image: url("../../img/hype-wide.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: right bottom; 
}

.arbi-right {
  background-image: url("../../img/arbi-bg.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: right bottom; 
}

.btn-hero {
    padding: 0.75rem 2.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    border-radius: 10rem;
}

.hero-wave {
  position: absolute; 
  left: 0%; 
  top: auto; 
  right: 0%; 
  bottom: -1px; 
  z-index: 1; 
  width: 100%; 
  height: 4vw; 
  padding: 0;
  background-color: #fff; /* #f0f2f5 bg-light, #fff bg-white */
  -webkit-mask: url("../../img/wave-bottom_1930.svg") no-repeat center bottom;
  mask: url("../../img/wave-bottom_1930.svg") no-repeat center bottom;
  background-size: cover;
  mask-size: cover;
  -webkit-mask-size: cover;
}

.dark-version .hero-wave {
  background-color: #1a2035; /* #2C3750 bg-light, #1a2035 bg-white */
}

.hehe-wave {
	position: absolute; 
	left: 0%; 
	top: auto; 
	right: 0%; 
	bottom: -1px; 
	z-index: 1; 
	width: 100%; 
	height: 4vw; 
	padding: 0;
	background-color: #fff; /* #f0f2f5 bg-light, #fff bg-white */
  -webkit-mask: url("../../img/wave-bottom_1930.svg") no-repeat center bottom;
  mask: url("../../img/wave-bottom_1930.svg") no-repeat center bottom;
  background-size: cover;
  mask-size: cover;
  -webkit-mask-size: cover;
}

.dark-version .hehe-wave {
  background-color: #1a2035; /* #2C3750 bg-light, #1a2035 bg-white */
}

.hype-wave {
  position: absolute; 
  left: 0%; 
  top: auto; 
  right: 0%; 
  bottom: -1px; 
  z-index: 1; 
  width: 100%; 
  height: 4vw; 
  padding: 0;
  background-color: #f0f2f5; /* #f0f2f5 bg-light, #fff bg-white */
  -webkit-mask: url("../../img/wave-bottom_1930.svg") no-repeat center bottom;
  mask: url("../../img/wave-bottom_1930.svg") no-repeat center bottom;
  background-size: cover;
  mask-size: cover;
  -webkit-mask-size: cover;
}

.dark-version .hype-wave {
  background-color: #2C3750; /* #2C3750 bg-light, #1a2035 bg-white */
}

.arbi-wave {
  position: absolute; 
  left: 0%; 
  top: auto; 
  right: 0%; 
  bottom: -1px; 
  z-index: 1; 
  width: 100%; 
  height: 4vw; 
  padding: 0;
  background-color: #f0f2f5; /* #f0f2f5 bg-light, #fff bg-white */
  -webkit-mask: url("../../img/wave-bottom_1930.svg") no-repeat center bottom;
  mask: url("../../img/wave-bottom_1930.svg") no-repeat center bottom;
  background-size: cover;
  mask-size: cover;
  -webkit-mask-size: cover;
}

.dark-version .arbi-wave {
  background-color: #2C3750; /* #2C3750 bg-light, #1a2035 bg-white */
}

.bg-gradient-purple {
    background-image: linear-gradient(195deg, #a15fea 0%, #7b39c1 100%);
}
.shadow-purple {
    box-shadow: 0 4px 20px 0 rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(123 57 194 / 40%) !important;
}

.bg-gradient-yellow {
    background-image: linear-gradient(195deg, #f3ba40 0%, #fda724 100%);
}
.shadow-yellow {
    box-shadow: 0 4px 20px 0 rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(255 152 0 / 40%) !important;
}

.h-sm-only-100 { 
    height: auto !important;
}
@media (min-width: 576px) {
  .h-sm-only-100 { 
    height: 100% !important;
  }
}

#backpackIcon {
	transform: scale(1.8);
	margin:0.2em 0.2em 0 0.2em;
}
@media ( min-width : 576px) {
  #backpackIcon {
    transform: scale(2.4);
    margin:0.35em 0.2em 0 0.2em;
  }
}

#edgexIcon {
  transform: scale(1.8);
  margin:0.2em 0.2em 0 0.2em;
}
@media ( min-width : 576px) {
  #edgexIcon {
    transform: scale(2.4);
    margin:0.35em 0.2em 0 0.2em;
  }
}

#paradexIcon {
  transform: scale(1.8);
  margin:0.2em 0.2em 0 0.2em;
}
@media ( min-width : 576px) {
  #paradexIcon {
    transform: scale(2.4);
    margin:0.35em 0.2em 0 0.2em;
  }
}

#extendedIcon {
  transform: scale(1.8);
  margin:0.2em 0.2em 0 0.2em;
}
@media ( min-width : 576px) {
  #extendedIcon {
    transform: scale(2.4);
    margin:0.35em 0.2em 0 0.2em;
  }
}

#bybitIcon {
  transform: scale(1.8);
  margin:0.2em 0.2em 0 0.2em;
}
@media ( min-width : 576px) {
  #bybitIcon {
    transform: scale(2.4);
    margin:0.35em 0.2em 0 0.2em;
  }
}

#binanceIcon {
  transform: scale(1.8);
  margin:0.2em 0.2em 0 0.2em;
}
@media ( min-width : 576px) {
  #binanceIcon {
    transform: scale(2.4);
    margin:0.35em 0.2em 0 0.2em;
  }
}

#okxIcon {
  transform: scale(1.8);
  margin:0.2em 0.2em 0 0.2em;
}
@media ( min-width : 576px) {
  #okxIcon {
    transform: scale(2.4);
    margin:0.35em 0.2em 0 0.2em;
  }
}

#cryptoIcon {
  transform: scale(1.8);
  margin:0.2em 0.2em 0 0.2em;
}
@media ( min-width : 576px) {
  #cryptoIcon {
    transform: scale(2.4);
    margin:0.35em 0.2em 0 0.2em;
  }
}

#lighterIcon {
  transform: scale(1.8);
  margin:0.2em 0.2em 0 0.2em;
}
@media ( min-width : 576px) {
  #lighterIcon {
    transform: scale(2.4);
    margin:0.35em 0.2em 0 0.2em;
  }
}

#hypeBlob {
	width: 55px;
	margin: 0px 0px 0px -5px;
}
.dark-version #hypeBlob {
  width: 35px;
  margin: 5px;
}
@media ( min-width : 576px) {
  #hypeBlob {
    width: 110px;
    margin: 0px 0px 0px -15px;
  }
  .dark-version #hypeBlob {
    width: 70px;
    margin: 20px 5px;
  }
}

#hypeTitle {
  color: #102623;
}
.dark-version #hypeTitle {
  color: #AFFAE5;
}

/*
.iphone-demo {
  width: 350px; 
  height: 432px;
  background: url("../../img/iphone_1x_light.png") no-repeat 100% 100%; 
  z-index: 1;
}
.dark-version .iphone-demo {
  background: url("../../img/iphone_1x_dark.png") no-repeat 100% 100%; 
}
*/
.iphone-demo-dark {
	display: none;
}
.dark-version .iphone-demo-dark {
	display: block;
}
.dark-version .iphone-demo-light {
	display: none;
}
	
.circle {
	position: absolute;
  fill: url(#circleGradient);
}
.circle .gradient-init-color {
  stop-color: #f3ba40;
}
.circle .gradient-start-color {
  stop-color: #d53e7b;
}
.circle .gradient-end-color {
  stop-color: #7b39c1;
}
/* END landing page */

/** datetimepicker header color */
.ui-widget-header {
    /* background: rgb(255, 203, 179); */
}

/** dataTables */
.dark-version .dataTables_wrapper .page-item .page-link, .page-item span{
  background-color: #344767;
}

.dataTables_wrapper.no-footer {
  display: table;
  width: 100%;
}

div.dataTables_wrapper .table thead th{
	padding: 0.2rem;
	white-space: inherit;
  font-size: 0.8rem;
}

div.dataTables_wrapper .table {
  text-transform: capitalize;
}

.table-hightlight tbody tr:last-child td {
	font-weight: 700;
	background-color: #f8f9fa;
}

.dark-version .table-hightlight tbody tr:last-child td {
  background-color: #344767;
}

.dataTables_wrapper .dataTables_paginate li.active a.page-link {
  background-color: #d53e7b !important;
  border-color: #d53e7b !important;
}

.dataTables_wrapper .dataTables_length label {
  font-size: 0.75rem;
  margin-left: 0;
}

.dataTables_wrapper .dataTables_length select.form-select {
	border-radius: 0.375rem !important;
  text-align: center;
  padding: 0.05rem 1.2rem 0.05rem 0.2rem;
  background-position: right 5px center;
}

.dataTables_wrapper .dataTables_info {
	color: #7b809a;
}

.dark-version .dataTables_wrapper .dataTables_info {
  color: #c3c3c3 !important;
}

.creditcard-text {display: inline-block; height: 30px; width: 300px; border: 1px #cfcfcf solid; padding: 5px;}
.ic-gray-visa{ background-image: url(../../img/creditcard/ic_visa_gray@2x.png); }
.ic-visa{ background-image: url(../../img/creditcard/ic_visa@2x.png); }
.ic-gray-master{ background-image: url(../../img/creditcard/ic_master_gray@2x.png); }
.ic-master{ background-image: url(../../img/creditcard/ic_master@2x.png); }
.ic-gray-jcb{ background-image: url(../../img/creditcard/ic_jcb_gray@2x.png); }
.ic-jcb{ background-image: url(../../img/creditcard/ic_jcb@2x.png); }
.tappay_card_kind i{display: inline-block;background-size: 28px 17px; border-radius: 3px; border: 1px solid rgba(0,0,0,.09); width: 40px; height: 28px; background-position: center;background-repeat: no-repeat; margin-right: 3px;}

@media (max-width: 576px) {
  div.dataTables_wrapper div.dataTables_length, div.dataTables_wrapper div.dataTables_filter, div.dataTables_wrapper div.dataTables_info, div.dataTables_wrapper div.dataTables_paginate {
    text-align: left !important;
  }
  div.dataTables_wrapper div.dataTables_paginate {
    display: flex;
  }
}

@media (max-width: 767px) {
  div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    margin: 10px 0 !important;
  }
}
/** END dataTables */

.textarea-title {
  border: 1px solid #d2d6da;
  border-bottom-width: 0;
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}

.dark-version .textarea-title {
  border-color: rgba(255, 255, 255, 0.4);
}

textarea.have-title {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.smartbot-icon {
  width: 20px;
  height: 20px;
  background-image: url(../../img/smartbot-icon.png);
  background-size: 20px 20px;
}

.tradingview-logo {
  width: 20px;
  height: 20px;
  background-image: url(../../img/tradingview-logo.png);
  background-size: 20px 20px;
}

input {
  accent-color: #e91e63;
}

.selected-items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.tag .btn-close {
  font-size: 0.75rem;
  margin-left: 0.5rem;
  cursor: pointer;
}

.btn-sm {
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-padding-x: 0.5rem;
}

.bg-light .table> :not(caption)>*>* {
    border-color: #d2d6da;
    color: var(--bs-list-group-color);
}

.bg-light .table> :not(:last-child)> :last-child>* {
    border-bottom-color: #d2d6da;
}

tr.hideBorder td {
  border-width: 0;
}

.bg-cornsilk{
  background: cornsilk !important;
}

.lowercase-text {
  text-transform: lowercase;
}

.uppercase-text {
  text-transform: uppercase;
}

.flex-shrink-2 {
    flex-shrink: 2 !important;
}

.flex-shrink-3 {
    flex-shrink: 3 !important;
}

.input-group.prefix .input-group-text{
    left: 0;
}
.input-group.prefix .form-control{
    padding-left: 1.5rem;
}

.list-group-item:first-child {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

.list-group-item:last-child {
    border-bottom-right-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;	
}

.radio-checked-bg {
	background-color: #e91e6310;
}

.table> :not(caption)>*>* {
    padding: 0.2rem;
}

.col .active{border : 2px solid #E91D63; }

.form-check:not(.form-switch) .form-check-input[type="radio"]:after {
    width: 0.75rem;
    height: 0.75rem;
}

.card .card-body {
    font-family: -apple-system,BlinkMacSystemFont,Trebuchet MS,Roboto,Ubuntu,sans-serif;
}

ul.plains {
	padding-left: 0.3rem;
}

ul.plains li::marker {
  content: '•';
  color: #7b809a; 
}

ul.plains li {
	padding-left: 0.3rem;
}

div.tpfield-outline {
    width: 100%;
    padding: 0 0.5rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5rem;
    color: #495057;
    background-color: transparent;
    background-clip: padding-box;
    border: 1px solid #d2d6da;
    appearance: none;
    border-radius: 0.375rem;
    transition: 0.2s ease;
}

.dark-version div.tpfield-outline {
    color: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.4);
}
    
div.tpfield {
    display: block;
    width: 100%;
    height: 40px;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5rem;
}

:root {
  --bs-body-font-family:  -apple-system,BlinkMacSystemFont,Trebuchet MS,Roboto,Ubuntu,sans-serif;
}

/** show scrollbar in table-responsive **/
.table-responsive::-webkit-scrollbar {
    -webkit-appearance: none;
}

.table-responsive::-webkit-scrollbar:vertical {
    width: 4px;
}

.table-responsive::-webkit-scrollbar:horizontal {
    height: 4px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .4);
    border-radius: 10px;
    /* border: 2px solid #ffffff; */
}
.dark-version .table-responsive::-webkit-scrollbar-thumb {
	  background-color: rgba(255, 255, 255, .3);
}
	
.table-responsive::-webkit-scrollbar-track {
    border-radius: 10px;  
    /* background-color: #ffffff; */ 
}
/** END show scrollbar in table-responsive **/

/** fix intlTelInput **/
div.iti {
	width: 100%;
}

ul.iti__country-list {
  max-width: 350px;
}

.dark-version ul.iti__country-list {
	background-color: #202940;
}
/** END fix intlTelInput **/

/* 基本checkbox */
input.basic-checkbox[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  margin-top: 0.25rem;
  width: 1.23em;
  height: 1.23em;
  vertical-align: top;
  border: 1px solid #d2d6da;
  background-color: transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

input.basic-checkbox[type="checkbox"]:checked {
  background-color: #e91e63;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><polyline points="4 11 8 15 16 6" stroke="white" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
}

.dark-version input.basic-checkbox[type="checkbox"] {
  border-color: rgba(255, 255, 255, 0.4);
}
/* END 基本checkbox */

.video-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 的長寬比 (9 / 16 * 100%) */
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}