@font-face {
    font-family: "SF Compact Display";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/SF-Compact-Display-Regular.otf") format("opentype");
}
@font-face {
    font-family: "SF Compact Display";
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/SF-Compact-Display-Semibold.otf") format("opentype");
}

[x-cloak] {
    display: none;
}

.scrollbar-thin {scrollbar-width:thin}

.modal {
    --bs-modal-footer-gap: 0.25rem;
    --bs-modal-border-color: #9ca3af;
    --bs-modal-header-padding: 0.25rem 1rem;
}
.modal-sm {
    --bs-modal-width: 360px;
}
.modal-lg .modal-content {
    --bs-modal-border-radius: 0.25rem;
}
.modal-header {
    --bs-modal-header-border-color: transparent;
}
.modal-footer {
    padding: 0.5rem 1rem;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 450px white inset;
    /* -webkit-text-fill-color: transparent; */
}
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 450px white inset;
    /* -webkit-text-fill-color: #212121; */
}

.form-input-no-arrows::-webkit-inner-spin-button,
.form-input-no-arrows::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

.form-input-no-arrows {
    -moz-appearance: textfield;
}

.font-title {
    font-family: "Wix Madefor Display", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.btn-login-with-google {
    background-size: 32px;
    background-repeat: no-repeat;
    background-position: center left 4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z' fill='%234285F4'/%3E%3Cpath d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z' fill='%2334A853'/%3E%3Cpath d='M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z' fill='%23FBBC05'/%3E%3Cpath d='M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z' fill='%23EA4335'/%3E%3Cpath d='M1 1h22v22H1z' fill='none'/%3E%3C/svg%3E");
}

.toastify {
    background-color: #3c3c3c;
    background: -webkit-linear-gradient(180deg,#3c3c3c,#1c1c1c);
    background: linear-gradient(180deg,#3c3c3c,#1c1c1c);
}
.toastify.toast-error {
    background-color: #dc2626;
    background: #dc2626;
}
.toastify.toast-success {
    background-color: #16a34a;
    background: #16a34a;
}


#iphone-sms-box {
    bottom: 85px;
    left: 30px;
    right: 30px;
    border-radius: 8px 8px 0 8px;
}
#iphone-sms-box::before {
    content: "";
    top: 0;
    left: 0;
    right: 3px;
    bottom: 28px;
    position: absolute;
    border-radius: 6px;
    display: inline-block;
    background: linear-gradient(to right, #54bcf9, #72d2fc);
}
#iphone-sms-content {
    overflow-y: auto;
    max-height: 335px;
    background-size: 100%;
    border-radius: 6px 16px 0 0;
    padding: 8px 10px 24px 10px;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-image: url('/img/ui/msg-bg.png');
}