:root {
    --google-wallet-icon: url(./media/assets/googleWallet.png);
    --apple-wallet-icon: url(./media/assets/appleWallet.png);
    --uni-chat-font-sans: "Nunito Sans", serif;
}

@font-face {
    font-family: 'UniChat';
    src: url('/fonts/TTF/ClashDisplay-Variable.ttf') format('truetype');
}

.id-banner[show="true"] {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,0.25);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.id-banner[show="false"] {
    opacity: 0;
    bottom: 100%;
}

#uni-chat-id {
    position: fixed;
    bottom: -100%;
    width: calc(100% - 46px);
    max-width: 500px;
    background-color: #fff;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    padding: 20px;
    text-align: center;
    z-index: 9999;
    font-family: "UniChat";
    max-height: calc(95% - 40px);
    overflow-y: scroll;
    border-radius: 15px;
    box-shadow: 0px -3px 5px 3px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
}

#uni-chat-id::-webkit-scrollbar {
    background-color: transparent !important;
    width: 2px !important;
}

#uni-chat-id::-webkit-scrollbar-track {
    background-color: transparent !important;
}

#uni-chat-id::-webkit-scrollbar-thumb {
    background-color: #babac0 !important;
    border-radius: 16px !important;
    border: none !important;
}

#uni-chat-id::-webkit-scrollbar-button {
    display:none !important;
}

.uni-chat-id-transition {
    transition: bottom 0.5s ease-in-out;
}

#uni-chat-id.active {
    bottom: unset;
}

#profile-pic {
    width: calc(var(--smaller-side-images) * 6);
    height: calc(var(--bigger-side-images) * 6);
    border-radius: 10px;
    z-index: 1;
}

.watermark {
    position: absolute;
    width: calc(100% - 30px);
    max-width: 450px;
    z-index: 0;
    bottom: 50px;
}

#name {
    font-weight: 600;
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 28px;
    z-index: 1;
}

.id-field {
    margin-top: 2px;
    margin-bottom: 2px;
    z-index: 1;
}

#qr-code {
    margin: 30px auto 10px;
    width: 135px;
    height: 135px;
    padding: 5px;
    border: 1.5px solid rgba(var(--main-blue));
    border-radius: 7px;
    z-index: 1;
}

#wallet-btn {
    outline: none;
    border: none;
    width: 200px;
    height: 50px;
}

.apple-wallet {
    background: var(--apple-wallet-icon) no-repeat center center / contain;
    content: var(--apple-wallet-icon);
}

.google-wallet {
    background: var(--google-wallet-icon) no-repeat center center / contain;
    content: var(--google-wallet-icon);
}

@media screen and (max-width: 750px) {
    #uni-chat-id {
        border-radius: 15px 15px 0px 0px;
    }

    #uni-chat-id.active {
        bottom: 0;
    }
}