html {
    overflow-x: hidden;
}

body {
    /*            background-color: #edf2fc;*/
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.tooltip {
    --bs-tooltip-padding-x: 0.5rem;
    --bs-tooltip-padding-y: 0.2rem;
    --bs-tooltip-color: #3f78e0;
    --bs-tooltip-bg: #e0e9fa;
    font-size: 10px;
}

.plr-12 {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.hm-wrapper {
    max-width: 400px;
    min-width: 400px;
    margin: 10px auto 10px auto;
    padding-top: 10px;
}

.hm-header, .hm-content {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    padding: 5px 0px 5px 0px;
}

.hm-header #hm-trade-btn {
    margin-left: 10px;
    font-size: 14px;
}

.hm-group-tl-btn {
    min-width: 13.8px;
}

.hm-group-title {
    width: 100%;
    padding: 3px;
    font-size: 12px;
    background-color: #eee;
    border-radius: 5px;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-around;
}

.hm-group-title.pudgy {
    background-color: #6294f5;
    color: #fff;
}

.hm-group-title.abs {
    background-color: #00cb6a;
    color: #fff;
}

.hm-group-title div {
    text-align: center;
}

.hm-group-title .collapse-toggle {
    cursor: pointer;
}

.hm-group-title .navbar-nav {
    --bs-nav-link-padding-x: 0px;
    --bs-nav-link-padding-y: 0px;
    --bs-nav-link-font-size: inherit;
    --bs-nav-link-font-weight: 0;
}

.hm-group-title .navbar-nav .dropdown-toggle:after {
    content: none;
    font-size: inherit;
    margin-right: 0px;
    margin-left: 0px;
}

.hm-group-title i {
    font-size: 14px;
}

.hm-group-title-text {
    min-width: 70%;
    text-align: center;
}

.hm-group-title-text img {
    max-width: 15px;
    border: 0px;
    margin-bottom: 3px;
}

.hm-collection-list {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

.hm-collection-list:last-child {
    margin-bottom: 40px;
}

.hm-bottom {
    background-color: #fff;
}

.hm-header {
    padding-top: 10px;
    min-height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hm-wallet-area {
    display: flex;
    align-items: center;
}

.hm-wallet-area .hm-logo {
    max-width: 50px;
    max-height: 50px;
}

.hm-wallet-area .hm-logo img {
    width: 100%;
    border-radius: 50%;
    border: 1px solid #efefef;
}

.hm-wallet-area .hm-brand {
    margin-left: 6px;
    font-size: 24px;
    font-weight: 600;
    font-family: inherit;
}

.hm-wallet {
    font-size: 26px;
}

.hm-address {
    padding-left: 5px;
}

.hm-address i {
    padding-left: 5px;
    font-size: 14px;
}

.hm-wallet-icon {
    font-size: 20px;
    background-color: #edf2fc;
    border-radius: 50%;
}

.hm-navbar {
    font-size: 26px;
}

.hm-teaser-container {
    position: relative;
}

.hm-teaser {
    display: flex;
    align-items: baseline;
}

.hm-teaser-blank {
    text-align: center;
    width: 100%;
    height: 60px;
    line-height: 60px;
}

.hm-content-value {
    font-size: 58px;
    color: #000;
    letter-spacing: -2px;
}

.hm-content-unit {
    margin-left: 14px;
    position: relative;
}

.hm-teaser-unit {
    font-size: 15px;
    color: #bbb;
}

.hm-teaser-but {
    width: 50%;
    text-align: center;
    padding: 5px;
}

.hm-teaser-but button {
    width: 100%;
    background-color: #e0e9fa;
    color: #3f78e0;
    border: 1px solid #e0e9fa;
}

.hm-teaser-bottom {
    position: absolute;
    bottom: -10px;
}

.hm-teaser-bottom .hm-crypto-price{
    padding-left: 6px;
    color: #333;
    font-size: 14px;
}

.hm-hr {
    position: relative;
    height: 2px;
    background-color: #e0e9fa;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    overflow: hidden;
}

.hm-hr::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-color: #dadada;
    transform-origin: right;
}

.hm-hr.animate::before {
    animation: countdownRightToLeft 9.5s linear forwards;
}

@keyframes countdownRightToLeft {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}

.hm-hr-sm {
    height: 1px;
    background-color: #edf2fc;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}

.list-body {
    /*    margin-bottom: 20px;*/
}

.list-header-row, .list-body-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left, .header-right {
    font-size: 14px;
    color: #aaa;
}

.header-right {
    text-align: right;
}

.list-body-row {
    margin-top: 14px;
    margin-bottom: 14px;
    color: #111;
}

.list-body-row.unverified {
    color: #aaa;
}

.list-body-left {
}

.list-body-l-content {
    display:flex;
    align-items: center;
    line-height: 20px;
}

.list-body-l-content-txt {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 170px;
}

.collection-img {
    position: relative;
}

.collection-img .featured-token {
    position:absolute; 
    right: -5px; 
    top: -5px;
}

.collection-img .featured-token img {
    max-width: 16px;
    border: 0px; 
}

.collection-img img {
    width: 50px;
    max-width: 50px;
    max-height: 50px;
    border-radius: 10px;
    border: 1px solid #ddd;
    margin-right: 12px;
}

.collection-token-img {
    position: relative;
}

.collection-token-img .featured-token {
    position:absolute; 
    right: -5px; 
    top: -5px;
}

.collection-token-img .featured-token img {
    max-width: 16px;
    border: 0px; 
}

.collection-token-img img {
    width: 50px;
    max-width: 50px;
    max-height: 50px;
    border-radius: 50%;
    border: 2px solid #80abff;
    margin-right: 12px;
}

#absDB .collection-token-img img {
    border: 2px solid #ddd;
}

#absDB .collection-token-img .featured-token img {
    max-width: 16px;
    border: 0px; 
}

.collection-qty, .collection-total {
    font-size: 12px;
    color: #aaa;
}

.collection-qty {
    display: flex;
    align-items: center;
}

.collection-qty-val {
    margin-left: 5px;
}

.list-body-right {
    line-height: 20px;
    text-align: right;
}

.offcanvas {
    background-color: #566; 
}

.offcanvas-desc {
    max-height: 150px;
    overflow-x: auto;
    font-size: 14px;
}

.offcanvas-backdrop {
    background-color: rgba(255, 255, 255, 0.6);    
}

.offcanvas .widget .option-row {
    margin-top: 3px;
    display: flex;
    gap: 18px;
    flex-wrap: nowrap;
}

.offcanvas .widget .option-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 5px;
    border: 0px;
    border-radius: 5px;
    background-color: #fff;
    color: #555;
}

.offcanvas .widget .option-pill img {
    max-width: 20px;
    height: auto;
    display: block;
}

.offcanvas .widget .option-pill:hover {
    background-color: #f0f0f0;
}

.offcanvas .widget .option-pill.selected {
    border: 1px solid #3f78e0;
    color: #3f78e0;
    font-weight: 600;
    background-color: #e0e9fa;
}

.abs-green {
    color: #00cb6a;
}

.msg {
    display: none;
    margin-top: 3px;
    padding: 8px;
    border-radius: 3px;
    border-color: #ffeeba;
    background-color: #fff3cd;
    color: #856404;
    font-size: 12px;
    position: absolute;
    width: 100%;
}

.widget-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-title {
    margin-bottom: 0px;
}

.text-inverse {
    color: #fff !important;
}

.bg-dark.text-inverse, .bg-dark.link-inverse, .bg-dark.text-inverse a:not(.btn):not([class*=link-]), .bg-navy.text-inverse, .bg-navy.link-inverse, .bg-navy.text-inverse a:not(.btn):not([class*=link-]), [class*=offcanvas-].text-inverse a:not(.btn):not([class*=link-]), .bg-navy.text-inverse .post-meta, .bg-dark.text-inverse .post-meta {
    color: #fff !important;
}

.hm-footer {
    position: fixed;
    width: 100%;
    height: 30px;
    bottom: 0px;
    background-color: #eee;
}

.hm-footer-content{
    max-width: 400px;
    min-width: 400px;
    min-height: 30px;
    margin: 0px auto 0px auto;
    padding: 0px 5px;
    display: flex;
    align-items: center;
    font-size: 10px;
    color: #000;
}

.hm-footer-content-l {
    width: 50%;
    display: flex;
    align-items: center;
}

.hm-footer-content-l .eth-logo, .hm-footer-content-l .sol-logo {
    max-width: 14px;
    margin-right: 4px;
}

.hm-footer-content-r {
    width: 50%;
    text-align: right;
}

.hm-footer-content-r a {
    color: inherit;
}

.popover {
    font-size: 14px !important;
}

.widget .nav .credit img {
    max-width: 22px;
}

.skeleton .loading {
    animation: skeleton-loading 1s linear infinite alternate;

    width: 100%;
    height: 25px;
    margin: 0px 0px;
    border-radius: 0.25rem;
}

.skeleton .loading:last-child {
    width: 50%;
}

@keyframes skeleton-loading {
    0% {
        background-color: hsl(200, 20%, 80%);
    }
    100% {
        background-color: hsl(200, 20%, 95%);
    }
}

.skeleton-bg {
    /* background-color: #eeeeee; */
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.skeleton-bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0; /* Stay in place */
    height: 100%;
    width: 150px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    transform: translateX(-150px);
    animation: skeleton-bg-loading 1s infinite;
}

@keyframes skeleton-bg-loading {
    0% {
        transform: translateX(-150px);
    }
    100% {
        transform: translateX(100%);
    }
}

.input-loading {
    background-image: url('/assets/img/spinner.gif');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 18px 18px;
}

#linked_wallet_area {
    display: none;
}

.dropdown-item {
    font-weight: 100; 
    letter-spacing: normal; 
}

.dropdown-toggle::after {
    color: #bbb;
    font-weight: 100 !important;
}

.modal-backdrop {
    background-color: rgba(30, 34, 40, 0.4);
}

.divider-icon:before, .divider-icon:after {
    width: calc(50% - 3rem);
}

.uil-sync.is-rotating {
  animation: uil-spin 1s linear infinite;
}

@keyframes uil-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 413px) {

    .hm-wrapper {
        width: 98%;
        max-width: 98%;
        min-width: 98%;
    }

    .hm-footer-content {
        width: 98%;
        max-width: 98%;
        min-width: 98%;
    }
}

.hm-message {
    padding: 3px;
    background-color: #eee;
    border-radius: 5px;
    color: #555;
}

.hm-brand {
    line-height: 18px;
    font-size: 17px !important;
}

.hm-brand small {
    margin-left: 2px;
    color: #555;
}

.dark-mode {
    background-color: #000;
    color: #e0e0e0;
}

.dark-mode .hm-message {
    background-color: #555;
    color: inherit;
}

.dark-mode .hm-brand small {
    color: #ccc;
}

.dark-mode #address {
    background-color: #ccc;
}

.dark-mode #captureArea {
    background-color: #000;
}

.dark-mode .hm-logo {
    filter: brightness(0.8) invert(0);
}

.dark-mode .teaser_price {
    color: #ddd;
}

.dark-mode .hm-navbar i {
    color: #ccc;
}

.dark-mode .list-body-row {
    color: #ddd;
    max-height: 50px;
}

.dark-mode .list-body-row.unverified {
    color: #555;
}

.dark-mode .collection-img img {
    border: 1px solid #555;
}

.dark-mode .collection-img .featured-token img {
    border: 0px;
}

.dark-mode .list-body-row img {
    filter: brightness(0.8) invert(0);
}

.dark-mode .offcanvas-backdrop {
    background-color: rgba(0, 0, 0, 0.7);
}

.dark-mode .hm-bottom,
.dark-mode .hm-footer {
    background-color: #000;
}

.dark-mode .hm-header,
.dark-mode .hm-content,
.dark-mode .hm-footer-content {
    color: #e0e0e0;
}

.dark-mode .hm-wallet-icon {
    background-color: #2c2c2c;
}

.dark-mode .popover,
.dark-mode .modal-content {
    background-color: #2a2a2a;
    color: #e0e0e0;
}

.dark-mode .option-pill {
    background-color: #333;
    border-color: #444;
    color: #eee;
}

.dark-mode .option-pill.selected {
    background-color: #444;
    border-color: #888;
    color: #fff;
}

.dark-mode .skeleton-bg {
    /* background-color: #eeeeee; */
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.dark-mode .skeleton-bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0; /* Stay in place */
    height: 100%;
    width: 150px;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.7), transparent);
    transform: translateX(-150px);
    animation: skeleton-bg-loading 1s infinite;
}

.dark-mode .modal h2 {
    color: #eee;
}

.dark-mode .hm-hr, .dark-mode .hm-hr-sm {
    background-color: #555;
}

.dark-mode .hm-hr::before {
    background-color: #666;
}

.dark-mode .eth-logo,
.dark-mode .sol-logo {
    filter: brightness(0) invert(1);
}

.dark-mode .hm-teaser-but button {
    background-color: #aaa;
    color: #000;
    border: 1px solid #aaa;
}

.dark-mode .hm-teaser-but button:active {
    background-color: #777;
    color: #fff;
    border: 1px solid #777;
}

.dark-mode .offcanvas {
    background-color: #222;
}

.dark-mode .offcanvas, .dark-mode .offcanvas nav a i, .dark-mode .offcanvas h3, .dark-mode .offcanvas h4 {
    color: #aaa !important;
}

.dark-mode .offcanvas .widget .option-pill {
    background-color: #aaa;
}

.dark-mode .offcanvas .widget .option-pill img {
    filter: brightness(0.8) invert(0);
}

.dark-mode .offcanvas .widget .option-pill:hover {
    background-color: #ccc;
}

.dark-mode .offcanvas .widget .option-pill.selected {
    border: 1px solid #555;
    color: #555;
    font-weight: 600;
    background-color: #ccc;
}

.dark-mode .form-select {
    background-color: #ccc;
    color: #555;
}

.dark-mode .modal input{
    background-color: #ccc;
}

.dark-mode .modal #linked_wallets img{
    filter: brightness(0) invert(1);
}

.dark-mode .modal #linked_wallets .wallet-icons img{
    filter: brightness(0.8) invert(0);
}

.dark-mode .widget input {
    background-color: #ccc;
}

.dark-mode .popover {
    background-color: #aaa;
}

.dark-mode .popover h3 {
    background-color: #aaa;
}

.dark-mode .popover-header, .dark-mode .popover-body {
    color: #555;
}

.dark-mode .hm-teaser-bottom .hm-crypto-price {
    color: #999;
}

.dark-mode .hm-bottom {
    border: none !important;
}

.dark-mode .hm-content {
    background-color: #000;
}

.dark-mode .hm-teaser {
    background-color: #000 !important;
    max-height: 98px;
}

.dark-mode .hm-group-title {
    background-color: #222;
    color: #ddd;
}

.dark-mode .hm-group-title img {
    filter: brightness(0.8) invert(0);
    border: 1px solid #eee;
}

.dark-mode .hm-group-title .navbar-nav .dropdown-menu {
    background-color: #222;
    border: 1px solid #111;
}

.dark-mode .hm-group-title .navbar-nav .dropdown-menu .dropdown-item {
    color: #ddd;
}

.dark-mode .tooltip {
    --bs-tooltip-padding-x: 0.5rem;
    --bs-tooltip-padding-y: 0.2rem;
    --bs-tooltip-color: #ddd;
    --bs-tooltip-bg: #555;
    font-size: 10px;
}

.dark-mode .page-loader {
    background-color: #000;
}

.dark-mode .page-loader:before, .swiper-hero:before, .gloader {
    border: 4px solid #888;
}