.token-popup-container {
    display: none;
}

.mt2 {
    margin-top: 2px;
}

.create-token {
    display: flex;
    justify-content: center;
    align-items: center;
}

.fdc {
    flex-direction: column;
}

.aie {
    align-items: end;
}

.max-w-9xl {
    max-width: 95rem;
}

.tokenImg {
    height: 44px;
    width: 44px;
    /* background: #eef3fc; */
    
    margin-right: 12px;
    /* border-radius: .5rem; */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.tokenImg span {
    background: rgb(95 135 228);
    font-weight: 500;
        width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: hsla(0, 0%, 100%, 1);
            font-size: 14px;
}

.mtn4 {
    margin-top: -4px;
}

.spinner {
    width: 4.8px;
    height: 4.8px;
    border-radius: 4.8px;
    box-shadow: 12px 0px 0 0 rgba(255, 255, 255, 0.2), 9.7px 7.1px 0 0 rgba(255, 255, 255, 0.4), 3.7199999999999998px 11.4px 0 0 rgba(255, 255, 255, 0.6), -3.7199999999999998px 11.4px 0 0 rgba(255, 255, 255, 0.8), -9.7px 7.1px 0 0 #ffffff;
    animation: spinner-b87k6z 1.2s infinite linear;
    position: relative;
    right: -25px;
}

@keyframes spinner-b87k6z {
    to {
        transform: rotate(360deg);
    }
}


.show {
    display: block !important;
}

.hide {
    display: none !important;
}

.to-app-accent-dark {
    --tw-gradient-to: #0b8fca var(--tw-gradient-to-position);
}

.coming-soon {
    font-size: 12px;
    font-weight: normal;
    color: #2563EB;
}

.h-grid {
    display: grid;
    grid-template-columns: 222px 1fr 1fr 1fr 1fr 1fr 1fr;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
}

.blue-color {
    /* color: rgb(37 99 235 / var(--tw-bg-opacity, 1)); */
    color: rgb(71 119 227);
}

.red-color {
    color: red;
}

.green-color {
    color: rgb(34 197 94/var(--tw-text-opacity));
}

.h-symbol {
    font-size: 13px;
    text-align: left;
}

.h-tools {
    display: flex;
        /* flex-direction: row; */
        /* min-width: 76px; */
        /* padding: 5px 11px; */
        /* justify-content: space-between; */
        font-weight: normal;
        font-size: 13px;
        padding: 5px 11px;
            gap: 5px;
}
.down-arrow {
    width: 12px;
        padding-top: 3px;
}

.tokenName {
    overflow: hidden;
        /* make sure it hides the content that overflows */
        white-space: nowrap;
        /* don't break the line */
        text-overflow: ellipsis;
        /* give the beautiful '...' effect */
        width: 166px;
        text-align: left;
        font-size: 16px;
        /* color: rgb(71 119 227); */
}

.bg-white.p-3.rounded-xl.border.border-app-border.transition-all.duration-200.hover\:shadow-lg.px-4 {
    cursor: pointer;
}
/* .bg-white.p-3.rounded-xl.border.border-app-border.transition-all.duration-200.hover\:shadow-lg.px-4:hover {
    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1))
} */

.text-3xl {
    font-size: 1.65rem;
    line-height: 1.4rem;
}

.list-grid-buttons {
    display: flex;
    justify-content: end;
    margin-bottom: 30px;
}

.pointer {
    cursor: pointer;
}

.max-w-8xl {
    max-width: 75rem;
        margin-inline: auto;
}

.tool-tip {
    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.john {
    position: relative;
}
.john:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(/images/pattern.png) center / cover no-repeat;
    opacity: 0.18;
    z-index: 1;
}
footer .relative {
    position: relative;
    z-index: 2;
}
/* footer.john:before{
    opacity: 1;
} */

.token-grid .tokenImg {
    width:164px;
    height:164px;
}
.symbol {
    font-size: 14px;
}
.token-grid .tokenName {
    width: 169px;
}

.age {
    margin-left: 1px;
    font-weight: 500;
}

.h-grid .text-gray-900,
.token-grid .text-gray-900 {
    color: #475569;
}

.logo {
    width: 28px;
    margin-bottom: 8px;
}

.gap-2em {
    gap:.2em;
}

footer .logo {
    margin-left: -3px;
}

.w-500 {
    font-weight: 500;
}

.no-tokens-yet .logo {
    margin-bottom: 0;
}
/* 
::-webkit-scrollbar {
    width: 8px
}

::-webkit-scrollbar-track {
    background: rgba(168, 85, 247, .1)
}

::-webkit-scrollbar-thumb {
    background: rgb(37 99 235 / var(--tw-bg-opacity, 1));
    border-radius: 4px
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(37 99 235 / var(--tw-bg-opacity, 1));
} */

/* .flex-1 {
    flex: 1;
} */

button[disabled] {
    cursor: not-allowed;
}




/* input[type="file"] {
    display: none;
}

.custom-file-upload {
    display: inline-block;
    padding: 0.5rem 1rem;
    cursor: pointer;
    background-color: #4f46e5;
    color: white;
    border-radius: 0.5rem;
    font-weight: bold;
    transition: background 0.3s ease;
}

.custom-file-upload:hover {
    background-color: #4338ca;
} 
*/


input[type="file"] {
    display: none;
}

.custom-file-upload {
    display: inline-block;
    font-size: 13px;
        padding: 3px 12px;
    cursor: pointer;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
    color: white;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: background 0.3s ease;
    margin-right: 1rem;
}

.custom-file-upload.disabled,
.disabled .custom-file-upload {
    pointer-events: none;
        /* disables click */
}


.custom-file-upload:hover {
    --tw-translate-y: -.125rem;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        background-color: #2563ebe6;
        --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
        --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

#file-name {
    font-style: italic;
    color: #9ca3af;

    white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 213px;
        display: inline-block;
}
#file-name.gray {
    color: #475569;
}

.optional {
    color: #9ca3af;
    font-size: 12px;
}

.disabled {
    cursor: not-allowed;
/* pointer-events: none; */
    /* disables click */
}

.disabled .custom-file-upload {
    opacity: 0.5;
}

.earn {
    font-size: 14px;
    /* color: #555; */
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
    font-weight: 500;
}

.input {
    border-color:#ced6e0;
}

#clank label.text-sm {
    font-size: 15px;
}

/* .no-tokens-yet .create-new-token {
        position: relative;
        animation-duration: 5s;
        animation-iteration-count: 1;
        animation-timing-function: ease-in;
} */

.make-shake {
    position: relative;
        animation-duration: 5s;
        animation-iteration-count: 1;
        animation-timing-function: ease-in;
    animation-name: shake;
    animation-iteration-count: 1;
}

@keyframes shake {
    0% {
        left: 0
    }

    1% {
        left: -3px
    }

    2% {
        left: 5px
    }

    3% {
        left: -8px
    }

    4% {
        left: 8px
    }

    5% {
        left: -5px
    }

    6% {
        left: 3px
    }

    7% {
        left: 0
    }
}
@keyframes shakeAnim {
    0% {
        left: 0
    }

    1% {
        left: -3px
    }

    2% {
        left: 5px
    }

    3% {
        left: -8px
    }

    4% {
        left: 8px
    }

    5% {
        left: -5px
    }

    6% {
        left: 3px
    }

    7% {
        left: 0
    }
}



/**************************** connect popup *********************************/
.connect-popup-container {
    display: none;
    font-family: SFRounded,
        ui-rounded,
        "SF Pro Rounded",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol";
}
.connect-popup {
    border-radius: 24px;
}

.max-connect {
    width: 720px;
}

.connect-col-1 {
    width: 287px;
    border-right: 1px solid rgba(0, 0, 0, 0.06);
}

.connect-col-1 h2 {
    font-size: 18px;
        line-height: 24px;
        font-weight: 800;
        margin-left: 6px;
        padding: 2px 18px 8px 0px;
}

.px-5 {
    padding-inline: 18px;
}

.installed {
    margin: 16px 6px 8px 6px;
    color: #0e76fd;
    font-size: 14px;
        line-height: 18px;
        font-weight: 700;
}

.plugin-img {
    width: 28px;
    height: 28px;
}

.btn-mask,
.btn-phantom {
    padding: 5px;
    text-align: left;
}
.btn-mask:hover,
.btn-phantom:hover {
    background: rgba(60, 66, 66, 0.1)
}
.button-wrap {
    gap:4px;
}

.metamask,
.phantom {
    margin-top: -2px;
    font-weight: 700;
    font-size: 16px;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1))
}

.recent {
    line-height: 1;
        margin-top: -1px;
        color: #0e76fd;
        font-weight: 500;
        font-size: 12px;
}

.connect-close {
    width:28px;
    height:28px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 50%;
    color: rgba(60, 66, 66, 0.8);
    background: rgba(0, 0, 0, 0.06);
    transition: .125s ease;
}
.connect-close:hover {
    transform: scale(1.1);
}

.space-around {
    justify-content: space-around;
}

.connect-col-2 h2 {
    font-size: 18px;
    line-height: 24px;
    font-weight: 800;
}
.wallet-img-cont {
    background: rgb(208, 213, 222);
        width: 48px;
        height: 48px;
        border-radius: 10px;
        min-width: 48px;
        align-self: center;
}
.wallet-headline {
    color: #25292E;
        font-weight: 700;
        font-size: 14px;
            line-height: 18px;
}

.wallet-copy {
    color: rgba(60, 66, 66, 0.6);
    font-weight: 500;
    font-size: 14px;
        line-height: 18px;
}

.wallets-cont {
    margin: 20px 0;
    gap:32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.right-col-inner {
    min-height: 432px;
        max-width: 303px;
        align-self: center;
}

a.get-wallet {
    background: #0E76FD;
    transition: transform .125s ease;
    padding:4px 12px;
    text-align: center;
    border-radius: 9999px;
    display: block;
    cursor: pointer;
    font-weight: 500;
    color: #fff;
    font-size: 14px;
        line-height: 18px;

}
.get-wallet:hover,
.wallet-learn-more:hover {
    transform: scale(1.025);
}
.wallet-learn-more {
    color:#0E76FD;
    font-size: 14px;
        line-height: 18px;
        font-weight: 500;
        transition: transform .125s ease;
}
.m-10 {
    margin: 10px;
}

/* connect dropdown */
.wallet-button-wrapper {
    position: relative;
    display: inline-block;
}

.wallet-dropdown {
    background: #172033;
    /* unify look with your UI */
    border: 1px solid var(--border);
    /* consistent border */
    border-radius: 10px;
    /* nicer radius than .375rem */
    padding: 0;
    /* removes "3 bubble" look */
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    min-width: 170px;
    z-index: 999;
    overflow: hidden;
}

.wallet-dropdown button {
    background: none !important;
    border: none;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    /* more balanced padding */
    height: auto;
    /* remove fixed 37.5px bubble height */
    color: var(--text);
    font-size: 14px;
    border-radius: 0;
    /* ensures seamless stacked menu */
}
.wallet-dropdown button:hover {
    background: var(--sidebar-hover) !important;
    cursor: pointer;
}

.wallet-dropdown button span {
    padding-right: 6px;
    /* just enough breathing room */
}

.disconnect-btn,
.disconnect-btn span {
    color: #e77a75;
}

.wallet-dropdown img {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}


/**************************** end connect popup *********************************/

.sixteen {
    font-size: 16px;
}

.fifteen {
    font-size: 15px;
}

.weight-normal {
    font-weight: normal;
}

.mt-10 {
    margin-top: 10px;
}
.dark-blue {
    color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.mr-2px {
    margin-right: 2px;
}
.information a {
    text-decoration: underline;
}

.duration-200 {
    transition-duration: .2s;
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

.overflow-hidden {
    overflow: hidden;
}

.max-h-96 {
    max-height: 24rem;
}
.max-h-0 {
    max-height: 0px;
}


@keyframes pulse {
    50% {
        opacity: .5
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
}

.vault {

    background: rgb(244 247 250);
        padding: 9px;
        border-radius: 8px;
}
.f1,
.f-1 {
    flex: 1;
}

.pb-9 {
    padding-bottom: 2.5rem;
}

#file-preview {
    height: 25px;
        width: 25px;
        align-self: center;
}
.align-center {
    align-items: center;
}
#file-preview {
    display: none;
}

.opacity-50 {
    opacity: .5;
}

input:-internal-autofill-selected {
    appearance: menulist-button;
    background-image: none !important;
    background-color: none !important;
    color: fieldtext !important;
}

  /* Wallet button caret visibility */
  .connect-wallet-btn .wallet-caret {
      display: none;
  }

  .connect-wallet-btn[data-connected="true"] .wallet-caret {
      display: inline-flex;
  }