/* login, login-otp페이지 */
#login {display: flex; justify-content: center; align-items: center; margin: 0; }
#login .nxl-content {position: relative; min-width: 420px; display: flex; flex-direction: column; padding: 4rem; background-color: #fff; border-radius: 24px; /*box-shadow: -10px -10px 20px #fafbff, 10px 10px 20px #161b1d29;*/}
#login .logo-img {max-width: 120px;}
#login .login {display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem;}
#login .login form {display: flex; flex-direction: column; gap: 1rem; width: 100%;}
#login .login form button.fs-6 {background-color: #2f9e7d; color: #fff;}
#login .login form button.fs-6:hover {background-color: #51bd9d;}
#login input[type=text],
#login input[type=password],
#login button {min-height: 42px;}
#login label[for=idSave] span {cursor: pointer;}

#login .otp .logo-img {max-width: 180px; margin: auto;}
#login .login.otp form {display: flex; flex-direction: column; gap: 0.5rem;}
#login .login.otp form button.copy {border: none;}
#login .login.otp form button.copy:hover {color: unset; border: none;}
#login .num {grid-template-columns: repeat(6, 42px);}
#login .num input {text-align: center;}
#login .btn-copy:focus {color: #283c50;}
#login #keyInput {position: relative; z-index: 20;}
/*#login .footer-logo {max-height: 15px; width: auto; margin-top: 25px;}*/

@media screen and (max-width: 460px) {
  body:has(.login) {background-color: #fff !important;}
}
.card,
.table>:not(caption)>*>*,
.table-responsive .table,
.table-responsive .table tfoot th, 
.table-responsive .table thead th,
body {font-size: 12px; color: #676767; font-family: Inter, sans-serif;}
.table-responsive .table tfoot th:first-child, 
.table-responsive .table thead th:first-child,
.table-responsive .table tr td:first-child {padding-left: 0;}

.form-control:focus,
.form-control:active {border-color: #dce1e8 !important;}

.custom-file, 
.custom-select, 
.form-control, 
.form-select, 
input {padding: 3px 6px; font-size: 0.85rem;}

.form-select,
.custom-select,
input[type='date'] {cursor: pointer; min-width: 100px;}

input.text-start {min-width: 180px;}

/* Chrome, Safari, Edge, Opera input번호 화살표 지우기 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
/* Firefox input번호 화살표 지우기  */
input[type='number'] {-moz-appearance: textfield;}
.form-switch #inspectionOff:checked {border-color: #5a5a5a !important; background-color: #5a5a5a;}
.form-switch #inspectionOff:checked ~ label[for="inspectionOff"] {color: #5a5a5a !important;}
.form-switch .form-check-input:checked {border-color: #2f9e7d !important; background-color: #2f9e7d;}
.form-switch .form-check-input:checked ~ .form-check-label {color: #2f9e7d !important;}

a:hover {color: unset;}
p {margin-bottom: 0;}
ul {margin-bottom: 0;}
button {white-space: nowrap;}
.h-webkit-fill {height: -webkit-fill-available;}
.h100 {height: 100%;}
.h-45px {height: 45px;}
.w-fit {width: fit-content;}
.w-18px {width: 18px;}
.w100 {width: 100% !important;}
.w100px {width: 100px;}
.w80px {width: 80px;}
.max-80 {max-width: 80px;}
.max-100 {max-width: 100px;}
.max-160 {max-width: 160px;}
.max-240 {max-width: 240px;}
.max-320 {max-width: 320px;}
.min-56 {min-width: 56px;}
.min-80 {min-width: 80px;}
.min-100 {min-width: 100px;}
.min-120 {min-width: 120px;}
.min-160 {min-width: 160px;}
.min-240 {min-width: 240px;}
.square-56 {min-width: 56px; min-height: 56px; line-height: 1.6;}
.square-65 {min-width: 65px; min-height: 65px; line-height: 1.6;}
.rounded-0 {border-radius: 0 !important;}
.border-0 {border: none;}
.border-bottom-first,
.border-top-first {position: relative;}
.border-bottom-first::before,
.border-top-first::before {content: ""; position: absolute; width: 100%; height: 1px; left: 0; top: 0; background-color: #d0d0d0; z-index: 1;}
.border-bottom-first::before {top: unset; bottom: 0;}
.border-end {border-color: #e9ecef !important;}
.border-b-op3 {border-bottom: 1px solid #f7f7f7;}
.ps-11 {padding-left: 11px !important;}
.ps-30 {padding-left: 30px !important;}
.d-1024-none,
.d-864-none {display: none !important;}
.nxl-container {top: 0;}
.nxl-navigation .m-header {height: 65px; justify-content: space-between;}
.page-header {min-height: 64px;}
svg.feather {width: 16px; height: 16px;}
img {width: 100%; border-radius: 0;}
.hover:hover {background-color: #f3f4f6;}

.text-dainger {color: #ea4d4d;}
.bg-none {background-color: unset;}
.bg-white {background-color: white;}
.text-bg-light,
.bg-text-light {background-color: #f4f4f5 !important;}
.btn-white {background-color: #fff; color: #717171 !important;}
.btn-white:hover {background-color: #6a6a6a; color: #fafafa !important;}
.bg-gray {background-color: #e7e7e7; color: #3e4349;}
.bg-gray-dark {background-color: #525252; color: #fff; border: 1px solid #525252;}
.bg-gray-subtle {background-color: #f4f4f5; color: #3e4349;}
.bg-dark {background-color: #272c2b !important;}
.bg-dark-outline {color: #283c50; border: 1px solid #283c50 !important;}
.btn-success-un {background-color: #686767; color: #fff;}
.btn-success-un:hover {background-color: #237a60 !important; color: #fff !important;}
.bg-success,
.btn-success {background-color: #2f9e7d !important; border-color: #2f9e7d !important;}
.btn-success:hover {background-color: #237a60 !important;  border-color: #237a60 !important;}
.bg-success-dark {background-color: #00694C; color: #F6F6F6;}
.bg-success-300 {background-color: #237a60 !important;  border-color: #237a60 !important;}
.btn-dainger {background-color: #ea4d4d; color: #fff;}
.btn-dainger:hover {background-color: #d13636; border-color: #d13636;}
.btn-dainger:active:active,
.btn-dainger:focus:focus {background-color: #d13636; color: #fff;}
.btn-light {background-color: #e3e5e7; color: #333; border-color: transparent;}
.btn-sm {white-space: nowrap;}
.btn-full {width: 120px; height: auto !important;}
.btn.unPage {background-color: #dce1e8 !important; color: #5c626a !important; border: 1px solid #dce1e8 !important;}
.btn.unPage:hover {background-color: #2f9e7d !important; color: #fff !important; border: 1px solid #2f9e7d !important;}
.badge {border-radius: 0; font-weight: normal; font-size: 12px;}
.avatar-text {cursor: auto;}
.dark-border-end {position: relative;}

/* 버튼 색상 참고 */
.btn_style.black {background:#36393f;color:#fff!important}
.btn_style.white {background:#fff;color:#111!important}
.btn_style.gray {background:#f6f6f7;color:#7c7c7e!important}
.btn_style.nomalgray {background:#eee !important;color:#333!important; position: relative;}
.dark-border-end::before,
.btn_style.nomalgray::before {content: ""; position: absolute; width: 1px; height: 100%; right: -1px; top: 0; background-color: #ddd; z-index: 1;}
.btn_style.deepgray {background:#e1e1e1;color:#333!important}
.btn_style.darkgray {background:#5a5a5a;color:#fff!important}
.btn_style.navy {background:#1a2c3e;color:#fff!important}
.btn_style.green {background:#00c85d;color:#fff!important}
.btn_style.darkgreen {background:#0ea175;color:#fff!important}
.btn_style.blue {background:#513cbb;color:#fff!important}
.btn_style.deepblue {background:#37259e;color:#fff!important}
.btn_style.purple {background:#8a2ae3;color:#fff!important}
.btn_style.red {background:#e14b4c;color:#fff!important}
.btn_style.yellow {background:#ffc300;color:#381c1c!important}
.btn_style.txLink {color:#5c5c5e!important}

.btn_style.submit:hover {background:#1b2c3e}
.btn_style.gray:hover  {background:#ececec;color:#333!important}
.btn_style.deepgray:hover {background:#c7c7c7;color:#111!important}
.btn_style.darkgray:hover {background:#36393f}
.btn_style.white:hover {background:#1a2c3e;color:#fff!important}
.btn_style.darkgreen:hover {background:#00c85d;color:#fff!important}
.btn_style.txLink:hover {color:#212121;text-decoration:underline}
.btn_style.red:hover {background:#ee2a2b}

.text_style.black {color:#36393f!important}
.text_style.white {color:#fff!important}
.text_style.gray {color:#a2a7ad!important}
.text_style.nomalgray {color:#efefef!important;}
.text_style.deepgray {color:#e1e1e1!important}
.text_style.darkgray {color:#5a5a5a!important}
.text_style.navy {color:#1a2c3e !important}
.text_style.green {color:#00c85d!important}
.text_style.darkgreen {color:#0ea175!important}
.text_style.blue {color:#513cbb!important}
.text_style.deepblue {color:#3a3ad0!important}
.text_style.purple {color:#8a2ae3!important}
.text_style.red {color:#e14b4c!important}
.text_style.yellow {color:#ffc300!important}
.text_style.txLink {color:#5c5c5e!important}

.col-xxl-2-5 {width: 20%;}

svg.analytics-mail {width: 28px; height: 28px;}
.stroke-primary {stroke: #3454d1;}
.stroke-warningy {stroke: #3454d1;}

.card {overflow: hidden; border: none; margin-bottom: 20px;}
.footer a:hover,
.card-body a:has(i):hover,
.page-header .page-header-right-items a:hover {color: #198754;}
.card-body a:has(i):hover i {transform: scale(1.4); transition: 0.6s;}
.page-header .breadcrumb .breadcrumb-item a:hover,
.page-header .breadcrumb a,
.page-header .breadcrumb {font-weight: normal; color: #4d545c;}
.page-header .breadcrumb .breadcrumb-item:last-child {font-weight: 500; opacity: 1; color: #212529;}

.nxl-navigation .b-brand img {width: 100%;}
.nxl-navigation .navbar-content .nxl-link:has(.collapse) a {display: flex; width: 100%; align-items: center;}
.nxl-navigation .navbar-content .nxl-link:has(.nxl-micon) {display: grid; grid-template-columns: auto 1fr auto; align-items: center;}
.nxl-navigation .navbar-content .nxl-link .nxl-mtext {width: 100%;}
.nxl-navigation .navbar-content .nxl-submenu .nxl-submenu .nxl-link:has(.d-grid) {display: grid; grid-template-columns: auto 1fr auto; align-items: center;}
.nxl-navigation .navbar-content .nxl-item.on > a {background-color: #f3f4f6;}
.nxl-navigation .navbar-content .nxl-submenu .nxl-link {font-weight: 500;}

.page-header {position: sticky; top: 0; white-space: nowrap;}

.d-1024-none:has(.nxl-navigation-toggle) a {display: inline-flex; margin-top: 5px;}

.nxl-container {min-height: 100vh;}
.coin-move .main-content {height: calc(100vh - 125px);}

.card:has(.border-top-first) {border-radius: 0 0 10px 10px;}
.card .card-header {padding-top: 0; padding-bottom: 0; border-bottom-color: #d5d5d5;}
.card h5.card-title {font-size: 14px !important; color: #283c50; padding: 11px 20px 11px 0; white-space: nowrap;}
/* .card .card-body .d-grid {border-top: 1px solid #d5d5d5;} */

.coin-holding-status .card-body {padding: 8px}
.coin-holding-status .card-body > div > div > div {margin: 0.5rem 0 !important; padding: 0 0.5rem !important;}
.coin-holding-status .card-body > div > div > div span {cursor: context-menu;}
.coin-holding-status .card-body.d-grid > div {border-bottom: none;}
.coin-holding-status .card-body.d-grid > div:nth-child(3n) {border-right: none;}
.coin-holding-status .card-header .btn_style.gray {color: #333 !important;}

/*메인 nav 모바일 css설정*/
body:has(.page-header .d-1024-none.is-active) .nxl-navigation {left: 0;}
.minimenu:has(.page-header .d-1024-none.is-active) .nxl-navigation .d-1024-none {position: fixed; left: 100px; background-color: #fff; padding-right: 1rem; border-right: 1px solid #ddd; height: 64px; align-content: center;}
html.minimenu .nxl-navigation .navbar-content .nxl-mtext {display: inline-block; color: transparent; line-height: 2px; visibility: hidden; transition: 0.3;}
html.minimenu .nxl-navigation:hover .navbar-content .nxl-mtext {color: #283c50; visibility: visible; transition-delay: 0.4s;}
.nxl-navigation .navbar-content .nxl-submenu .nxl-submenu .nxl-link.ms-25 {margin-left: 25px !important;}
.nxl-navigation .navbar-content .nxl-hasmenu.nxl-trigger .nxl-submenu .nxl-trigger>.nxl-link>.nxl-arrow {transform: rotate(90deg);}

.page-header-right:has(.page-header-right-close) .d-md-none .page-header-right-open-toggle {display: flex; align-items: center;}
.page-header-right:has(.page-header-right-close) .d-md-none .page-header-right-close-toggle,
.page-header-right .d-md-none .page-header-right-close-toggle {display: none;}
.page-header-right:has(.page-header-right-open) .d-md-none .page-header-right-open-toggle {display: none;}
.page-header-right:has(.page-header-right-open) .d-md-none .page-header-right-close-toggle {display: flex; align-items: center;}

.badge.xl {min-width: 105px;}
.badge.lg {min-width: 90px;}
.badge.m {min-width: 50px;}

.col-4 .coin-profit,
.col-4 .gas-coin {height: calc(100% - 20px);}

.report-details-title .card-header,
.gas-coin .card-header,
.coin-profit .card-header,
.coin-holding-status .card-header {border: none;}
.coin-holding-status .card-body {grid-template-columns: repeat(3, 1fr);}
.coin-holding-status .card-body .hstack {border-bottom: 1px dashed #e3e7ed; padding: 0 20px;}
.coin-holding-status .card-body > div:nth-child(n+7) .hstack {border: none;}
.coin-holding-status .card-body .hstack div {width: 100%; justify-content: space-between;}

.gas-coin .d-grid {grid-template-columns: repeat(3, 1fr);}
.form-check,
.form-switch .form-check-input,
.form-check label {cursor: pointer;}
.form-switch .form-check-input {width: 2.5em; height: 1.5em;}
.form-switch .form-check-input:checked ~ .form-check-label {color: #3454d1; font-weight: 700;}

tbody, td, tfoot, th, thead, tr {border-color: #f3f3f3;}
.modal .table-responsive {overflow: hidden; border-top: 1px solid #e7e7e7; border-bottom: 1px solid #e7e7e7;}
.modal .table-responsive th {background: #f4f4f5 !important; border-left: 1px solid #e5e7eb; border-bottom: 1px solid #e2e4eb; font-weight: 700;}
.table-responsive .table.table-hover>tbody>tr:hover>*,
.table-responsive .table tfoot th, 
.table-responsive .table thead th {align-content: center; background-color: #f4f4f5 !important; white-space: nowrap;}
.table-responsive .table tbody tr:last-child td input {border-bottom: 1px solid #e5e7eb;}
.table-responsive .table tbody tr:last-child td input:checked {border-bottom-color: #0d6efd;}

.table-responsive .table tfoot th, 
.table-responsive .table thead th,
.table-responsive .table td {padding: 6px 5px !important;}
.table-responsive .table td .btn {margin: auto;}
.table-responsive .table p {margin: 0;}
.table-responsive .table.table-hover>tbody>tr:hover>* {--bs-table-bg-state: #f9fafa;}

.table-responsive .table td .form-select,
.table-responsive .table td .form-control {width: 100%;}

.table-responsive:has(.sticky) {overflow: auto; /*max-height: calc(100vh - 345px);*/} /*.sticky가 붙으면 자동 높이 계산 add.js*/
.table-responsive .sticky thead {top: 0; position: sticky; background-color: #fff; z-index: 999;}
/* .table-responsive .sticky thead::before {content: ""; position: absolute; width: 100%; height: 1px; background-color: #e5e7eb; bottom: 0; left: 0;} */
.table-active {background: #ffe792 !important;}
.table-responsive td,
.table-responsive th {position: relative;}
.table-responsive th::before {content: ""; position: absolute; right: -1px; top: 0; width: 1px; height: 100%; background-color: #e9ecef; z-index: 1;}
.table-responsive th::after {content: ""; position: absolute; right: 0; bottom: -1px; width: 100%; height: 1px; background-color: #e9ecef; z-index: 1;}
.table-responsive th.dark-border::before,
.table-responsive td.dark-border::before {content: ""; position: absolute; right: -1px; top: 0; width: 1px; height: 100%; background-color: #e7e7e7; z-index: 1;}

.table-responsive th,
.table-responsive td {border-right: 1px solid #f3f3f3 !important;}
.table-responsive .table tr td span {word-break: auto-phrase; white-space: wrap;}
.table-responsive .table.table-hover>tbody>tr:hover>* {white-space: normal;}

/*.modal .table-responsive td {border-color: #fff;}*/
.modal .table-responsive td.bg-gray:first-child {background-color: #e9ecef;}
.modal .modal-title {font-size: 15px;}
.modal-backdrop {opacity: 0.4; background-color: #212529;}
/*common-modal backdrop*/
body:has(.blur) nav,
body:has(.blur) main  {filter: blur(2px);}

.form-control,
.form-select,
.btn {width: auto; height: 30px; line-height: 25px; font-size: 12px; font-weight: normal; padding: 2px 8px;}
.dropdown .dropdown-menu {width:fit-content;}
.btn:active:active {color: unset;}

.edit-view {overflow-y: auto; max-height: calc(100vh - 260px); height: 100vh; position: sticky; padding: 26px 35px;}
.edit .card-body,
.edit-post .card-body {padding: 12px 26px;}

.col-grid-set .d-grid.top {grid-template-columns: repeat(7, 1fr); gap: 0 1.5rem;}
.col-grid-set .col-2,
.col-grid-set .col-3,
.my-market .col-2,
.rebort-details .col-2,
.coin-deposit-details .col-2 {width: 100%;}
.col-grid-set .col-2 .card,
.col-grid-set .col-3 .card,
.my-market .col-2 .card,
.rebort-details .col-2 .card,
.coin-deposit-details .col-2 .card {height: auto; margin-bottom: 10px;}
.col-grid-set .d-grid.bottom {grid-template-columns: repeat(5, 1fr); gap: 0 1.5rem;}
.col-grid-set .d-grid .badge,
.coin-withdrawal-history .badge {min-width: unset;}

.rebort-details .d-grid {grid-template-columns: repeat(6, 1fr); gap: 0 1.5rem;}
.my-market .d-grid,
.coin-deposit-details .d-grid {grid-template-columns: repeat(4, 1fr); gap: 0 1.5rem;}

.card:has(.d-grid) .card-header {border-color: #d5d5d5;}
.card-body .d-grid {width: calc(100% + 1px); margin-top: 1px;}
.card-body .d-grid > div {margin-top: -1px;}
.d-grid > div {border-right: 1px solid #e9ecef; border-bottom: 1px solid #e9ecef;}

.my-request .card .d-grid > div > div > div > span:nth-child(2),
.request-received .card .d-grid > div > div > div > span:nth-child(2),
.coin-withdrawal-history div > span:nth-child(2),
.card-body .d-flex div > span:nth-child(2),
.card-body .d-grid div > span:nth-child(2) {font-size: 15px; padding: 12px !important; color: #333;}
.card-body .d-flex div > span:nth-child(1),
.card-body .d-grid div > span:nth-child(1) {color: #857d7d;}
.card-body .d-flex div > span:nth-child(1).fc-3,
.card-body .d-grid div > span:nth-child(1).fc-3 {color: #333;}
.coin-holding-status .card-body .fs-13 {font-size: 13px !important;}
span.counter.big-text {font-size: 1.5rem !important; padding: 0px !important;}
span.gun {font-size: 13px !important; margin-top: 2px;}
.fs-12 {font-size: 12px !important;}
.fs-13 {font-size: 13px !important;}
.card .fc-3 {color: #333 !important;}
.card .fc-5f {color: #5f5f5f !important;}
.card .fc-85 {color: #857d7d !important;}


.col-grid-1 {grid-template-columns: repeat(1, 1fr);}
.col-grid-2 {grid-template-columns: repeat(2, 1fr);}
.col-grid-3 {grid-template-columns: repeat(3, 1fr);}
.col-grid-4 {grid-template-columns: repeat(4, 1fr);}
.col-grid-5 {grid-template-columns: repeat(5, 1fr);}
.col-grid-6 {grid-template-columns: repeat(6, 1fr);}
.col-grid-7 {grid-template-columns: repeat(7, 1fr);}
.col-grid-9 {grid-template-columns: repeat(9, 1fr);}
.col-grid-3-ratio {grid-template-columns: 0.5fr 1.5fr 0.5fr;}

.d-grid:has(.badge) > .d-flex > .d-flex > .d-flex {border-right: 1px solid #e9ecef;}
.d-grid:has(.badge) > .d-flex > .d-flex > .d-flex:last-child {border-right: none;}


.page-link:hover {color: #676767;}
.page-link:focus {color: #676767; box-shadow: none;}
.page-link {color: #676767;}
.active>.page-link {background-color: #676767; border-color: #676767; color: #fff;}

.copy-set {position: relative;}
.copy-set div {position: absolute; right: 10px; top: 50%; transform: translateY(-50%);}

.membership-modal .modal-body {padding: 20px 30px;}

@media screen and (max-width: 1680px) {
  .col-grid-5.grid-wrap {grid-template-columns: repeat(3, 1fr);}
}

@media screen and (max-width: 1300px) {
  .coin-withdrawal-history .col-2,
  .coin-withdrawal-history .col-3,
  .coin-withdrawal-history .col-4 {width: 50%;}
}

@media screen and (max-width: 1240px) {
  .coin-gas-management .col-4 {width: 100%;}
  .col-grid-4 {grid-template-columns: repeat(2, 1fr);}
  .col-grid-4.sm-col {grid-template-columns: repeat(4, 1fr);}
  .col-grid-9 {grid-template-columns: repeat(5, 1fr);}
  .md-1240-col-grid-1 {grid-template-columns: repeat(1, 1fr);}
  .col-grid-6-1240 {grid-template-columns: repeat(3, 1fr);}
  
}

@media screen and (max-width: 1024px) {
  .col-xxl-2-5 {width: 50%;}
  .d-1024-none {display: block !important;}
  .pc-2024-none {display: none;}
  .card .card-header {flex-wrap: wrap; gap: 10px 0;}

  .col-grid-set .d-grid.top {grid-template-columns: repeat(4, 1fr);}
  .col-grid-set .d-grid.bottom {grid-template-columns: repeat(2, 1fr);}
  .col-grid-3-ratio {grid-template-columns: repeat(2, 1fr);}
  .col-grid-3-ratio > div:nth-child(2) {grid-column: span 2; order: 2;}
  .col-grid-3-ratio > div:first-child {order: -1;}
  .col-grid-5.grid-wrap {grid-template-columns: repeat(2, 1fr);}

}

@media screen and (max-width: 992px) {
  .coin-holding-status .card-body.d-grid > div:nth-child(3n) {border-right: 1px solid #e9ecef;}
  .coin-holding-status .card-body.d-grid > div:nth-child(2n) {border-right: none;}
  .coin-holding-status .card-body > div > div > div {padding: 0 0.5rem 0 1rem !important;}

  .coin-holding-status .card-body .hstack {padding: 0;}
  .coin-holding-status .card-header {flex-direction: column; width: 100%; align-items: flex-start;}
  .coin-holding-status .card-header > .d-flex {width: 100%;}
  .coin-holding-status .card-header > .d-flex > .d-flex {flex-direction: column; width: 100%;}
  .coin-holding-status .card-header .badge {width: 100%;}

  .coin-holding-status .card-body {grid-template-columns: repeat(2, 1fr);}
  .coin-holding-status .card-body > div:nth-child(n+7) .hstack {border-bottom: 1px dotted #e5e7eb;;}
  .coin-holding-status .card-body > div:last-child .hstack {border: none;}

  .table-responsive:has(.sticky) {max-height: calc(100vh - 340px);}

  .col-grid-3 {grid-template-columns: repeat(1, 1fr); gap: 0 !important;}
  .col-grid-3.sm {grid-template-columns: repeat(3, 1fr);}
  
  .col-grid-5 {grid-template-columns: repeat(3, 1fr);} 
  .col-grid-7 {grid-template-columns: repeat(4, 1fr);}

  .col-12-992 {width: 100%;}
}

@media screen and (max-width: 864px) {
  .d-864-none {display: flex !important;}
  .pc-864-none {display: none !important;}

  .coin-move .col-6 {width: 100%;}


  .gas-coin .d-grid {grid-template-columns: 1fr;}
  .coin-withdrawal-history .col-2,
  .coin-withdrawal-history .col-3,
  .coin-withdrawal-history .col-4 {width: 100%;}

  .rebort-details .d-grid {grid-template-columns: repeat(3, 1fr);}

  .col-grid-6 {grid-template-columns: repeat(3, 1fr);}
}

@media screen and (max-width: 768px) {
  .page-header-right-items {height: auto !important; max-width: 240px;}
  .page-header-right-items a {padding: 0.5rem; width: 100%; text-align: center; border-radius: 5px;} 
  .page-header-right-items a:hover {background-color: #eaebef; color: #283c50;}

  .coin-holding-status .card-body {grid-template-columns: repeat(1, 1fr);}

  .my-market .d-grid,
  .coin-deposit-details .d-grid {grid-template-columns: repeat(2, 1fr);}

  .coin-holding-status .card-body.d-grid > div {border-right: none !important;}

  .col-grid-7 {grid-template-columns: repeat(3, 1fr);}
  .col-grid-2,
  .col-grid-4 {grid-template-columns: repeat(1, 1fr);}
  .col-grid-4.sm-col {grid-template-columns: repeat(2, 1fr);}
  .col-grid-5.grid-wrap {grid-template-columns: repeat(1, 1fr);}
  .col-grid-9 {grid-template-columns: repeat(3, 1fr);}

  .coinMain .card-body .coinMain.modal .modal-header,
  .coinMain .card-body .coinMain.modal .modal-body,
  .coinMain .card-body .coinMain.modal .modal-footer {padding: 1rem 0.5rem;}

}

@media screen and (max-width: 480px) {
  .my-request .card .d-grid > div > div > div > span:nth-child(2), 
  .request-received .card .d-grid > div > div > div > span:nth-child(2), 
  .coin-withdrawal-history div > span:nth-child(2), 
  .card-body .d-flex div > span:nth-child(2), 
  .card-body .d-grid div > span:nth-child(2) {padding: 8px !important;}

  .coin-holding-status .card-header > .d-flex {flex-direction: column;}
  .coin-holding-status .card-header > .d-flex > .d-flex {flex-direction: row; justify-content: space-between;}
  .coin-holding-status .card-header .badge {width: auto;}
  .coin-holding-status .card-body > div > div > div {padding: .5rem 0.8rem !important;}

  .col-grid-set .d-grid.top {grid-template-columns: repeat(2, 1fr);}
  .col-grid-set .d-grid.bottom {grid-template-columns: repeat(1, 1fr);}
  .col-grid-5 {grid-template-columns: repeat(2, 1fr);} 
  .col-grid-7 {grid-template-columns: repeat(2, 1fr);}
  .col-grid-9 {grid-template-columns: repeat(2, 1fr);}
  .col-grid-3.sm {grid-template-columns: repeat(1, 1fr);}
}

@media screen and (max-width: 420px) {
  .col-xxl-2-5 {width: 100%;}
  .card-body {padding: 1.5rem 1rem;}
  .badge {font-size: 11px; padding: 5px 3px;}

  .col-grid-6 {grid-template-columns: repeat(2, 1fr);}
}