html {
    height: 100vh;
    height: -webkit-fill-available;
    overflow-x: hidden;
}

body {
    padding-right: 0 !important;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    background: #FAFBFF;
    font-family: "e-Ukraine", var(--bs-body-font-family), sans-serif;
}

body.modal-open {
  overflow: visible !important;
}

.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-control-plaintext ~ label::after,
.form-floating > .form-select ~ label::after {
    background-color: transparent;
    border-radius: 0;
}

.text-wrap-break {
    min-width: 0;
    word-wrap: break-word;
    word-break: break-all;
    overflow-wrap: break-word;
}

span.asteriskField {
    color: red;
    font-size: 1.2em;
    font-weight: bold;
}

.no-asterisk label span.asteriskField {
    display: none;
}

@media (min-width: 768px) {
    .vh-md-100 {
        height: 100vh;
    }

    .min-vh-md-0 {
        min-height: 0 !important;
    }
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #000;
    --bs-btn-border-color: #000;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #333333;
    --bs-btn-hover-border-color: #333333;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1a1a1a;
    --bs-btn-active-border-color: #1a1a1a;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #aaa;
    --bs-btn-disabled-bg: #666;
    --bs-btn-disabled-border-color: #666;
}

.btn-white {
    --bs-btn-color: #000; /* Text color is black */
    --bs-btn-bg: #fff; /* Background color is white */
    --bs-btn-border-color: #ccc; /* Light border */
    --bs-btn-hover-color: #000; /* Hover text color is black */
    --bs-btn-hover-bg: #f1f1f1; /* Hover background color is light gray */
    --bs-btn-hover-border-color: #bbb; /* Hover border color is slightly darker gray */
    --bs-btn-focus-shadow-rgb: 49, 132, 253; /* Focus shadow remains the same */
    --bs-btn-active-color: #000; /* Active text color is black */
    --bs-btn-active-bg: #e0e0e0; /* Active background color is a darker gray */
    --bs-btn-active-border-color: #bbb; /* Active border color is light gray */
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); /* Shadow remains the same */
    --bs-btn-disabled-color: #aaa; /* Disabled text color */
    --bs-btn-disabled-bg: #f5f5f5; /* Disabled background color */
    --bs-btn-disabled-border-color: #ddd; /* Disabled border color */
}

.btn-navigation-bar {
    --bs-btn-color: #000;
    --bs-btn-bg: #F3F4F5;
    --bs-btn-border-color: #F3F4F5;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #333333;
    --bs-btn-hover-border-color: #333333;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #000;
    --bs-btn-active-border-color: #1a1a1a;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #aaa;
    --bs-btn-disabled-bg: #666;
    --bs-btn-disabled-border-color: #666;
}

::placeholder {
    opacity: 0.4 !important;
}

.hamburger {
    width: 20px;
    height: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}

.hamburger span {
    height: 2px;
    background: #000;
    border-radius: 2px;
    transition: 0.3s;
}

.hamburger-btn.active .hamburger span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

.hamburger-btn.active .hamburger span:nth-child(2) {
    opacity: 0;
}

.hamburger-btn.active .hamburger span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

i.main-logo {
    display: inline-block;
    width: 180px;
    aspect-ratio: 180 / 45;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

i.main-logo.lang-en {
    background-image: url(images/logo/eVizitka-2025-black-en.svg);
}

i.main-logo.lang-uk {
    background-image: url(images/logo/eVizitka-2025-black-uk.svg);
}

i.main-logo {
    display: inline-block;
    width: 180px;
    aspect-ratio: 180 / 45;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

i.main-logo.lang-en {
    background-image: url(images/logo/eVizitka-2025-black-en.svg);
}

i.main-logo.lang-uk {
    background-image: url(images/logo/eVizitka-2025-black-uk.svg);
}

/* Styles for the business card header */

:root {
    --template-header-color: #000000;
}

#header-subscribe-btn {
    color: var(--template-header-color);
}

#header-qr-modal {
    color: var(--template-header-color);
}

#languageDropdown {
    color: var(--template-header-color);
}

#header-dots-btn {
    color: var(--template-header-color);
}

.business-card-main-logo {
    background-color: var(--template-header-color);
    display: inline-block;
    width: 180px;
    aspect-ratio: 180 / 45;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
}

i.business-card-main-logo.lang-en {
    mask-image: url('images/logo/eVizitka-2025-black-en.svg');
    -webkit-mask-image: url('images/logo/eVizitka-2025-black-en.svg');
}

i.business-card-main-logo.lang-uk {
    mask-image: url('images/logo/eVizitka-2025-black-uk.svg');
    -webkit-mask-image: url('images/logo/eVizitka-2025-black-uk.svg');
}

.evizitka-main-background {
    background: linear-gradient(107.91deg, #96DCFF 7.37%, #E3C9C3 95.19%);
}

.evizitka-folder-background {
    background: linear-gradient(360deg, #FFFF63 0%, #FFFFC4 100%);

}

.free-profile-background {
    background-color: #6c757d;
}

.premium-profile-background {
    background: linear-gradient(110deg, #CC8BF2 7.37%, #45D2C2 95.19%);
}

.h-200px {
    height: 200px;
}

.w-350px {
    width: 350px;
}

.w-300px {
    width: 300px;
}

.min-w-0 {
    min-width: 0 !important;
}

.min-h-0 {
    min-height: 0 !important;
}

.min-h-100 {
    min-height: 0 !important;
}

.min-h-50px {
    min-height: 50px !important;
}

@media (max-width: 575px) {
    .w-xs-100 {
        min-width: 300px;
        width: 100%;
    }
}

@media (max-width: 767px) {
    .w-sm-100 {
        min-width: 300px;
        width: 100%;
    }
}

.aspect-ratio-15-10 {
    aspect-ratio: 1.5 / 1;
}

.aspect-ratio-10-10 {
    aspect-ratio: 1 / 1;
}

.background-color-efefef {
    background-color: #efefef;
}

.background-color-cecece {
    background-color: #cecece;
}

.background-color-a5a5a5 {
    background-color: #a5a5a5;
}

.search-label {
    color: #757575;
}

.search-icon {
    color: #8D8D8D;
}

.fs-72px {
    font-size: 50px;
}

.hover-active-zoom:hover {
    transform: scale(1.01);
    transition: transform 0.2s ease-in-out;
}

.hover-active-zoom:active {
    transform: scale(1.02);
}

.card-photo {
    width: 70px;
    border-style: solid;
    border-radius: 50%;
    border-color: white;
    border-width: 1px;
    aspect-ratio: 1 / 1;
}

.button-business-card {
    --bs-btn-color: #8D8D8D;
    --bs-btn-bg: #efefef;
    --bs-btn-border-color: #efefef;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #333333;
    --bs-btn-hover-border-color: #333333;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1a1a1a;
    --bs-btn-active-border-color: #1a1a1a;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #aaa;
    --bs-btn-disabled-bg: #666;
    --bs-btn-disabled-border-color: #666;
    padding: 0.1rem 0.4rem;
}

.btn-success {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #24c077;
    --bs-btn-border-color: #24c077;

    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #1ea86a;
    --bs-btn-hover-border-color: #1ea86a;

    --bs-btn-focus-shadow-rgb: 36, 192, 119;

    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #198f5a;
    --bs-btn-active-border-color: #198f5a;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: #a8dbc3;
    --bs-btn-disabled-border-color: #a8dbc3;
}

.text-xs {
    font-size: .765625em;
}

.text-xss {
    font-size: .65em;
}

.card-remove {
    color: #FF6161;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: var(--bs-nav-pills-link-active-color);
    background-color: #000;
}

.inherited-border-radius {
    border-radius: inherit;
}

.content-locked {
    color: white;
    text-wrap: wrap;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.4);
    background-size: 100% 100%;
    align-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    padding: 0.5rem;
}

#ai-loader {
    position: fixed;
    left: 0;
    top: 0;
    background: black;
    opacity: 0.4;
    width: 100vw;
    height: 100vh;
    margin: 0;
    justify-content: center;
    align-items: center;
    z-index: 100000;
}

#ai-loader div {
    width: 150px;
    height: 150px;
}

.card-shadow-light {
    box-shadow: -3px 2px 13px 2px rgba(184, 184, 184, 0.5);
    -webkit-box-shadow: -3px 2px 13px 2px rgba(184, 184, 184, 0.5);
    -moz-box-shadow: -3px 2px 13px 2px rgba(184, 184, 184, 0.5);
}

.i-account::before {
    content: "";
    display: inline-block;
    aspect-ratio: 1 / 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 32px;
    height: 32px;
}

.i-account-free::before {
    background-image: url(business_cards/icons/account_types/free.svg);
}

.i-account-premium::before {
    background-image: url(business_cards/icons/account_types/premium.svg);
}

.i-account-government::before {
    background-image: url(business_cards/icons/account_types/government.svg);
}

i.i-oauth-logo {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

i.i-google-logo {
    background-image: url(users/images/logos/google.svg);
}

i.i-apple-logo {
    background-image: url(users/images/logos/apple.svg);

}

i.i-diia-logo {
    background-image: url(users/images/logos/diia.svg);
}

i.i-facebook-logo {
    background-image: url(users/images/logos/facebook.svg);
}

.custom-font[data-font-id="1"] {
    font-family: e-Ukraine, var(--bs-body-font-family), sans-serif;
!important;
}

.custom-font[data-font-id="2"] {
    font-family: Verdana, var(--bs-body-font-family), sans-serif;
!important;
}

.custom-font[data-font-id="3"] {
    font-family: Roboto, var(--bs-body-font-family), sans-serif;
!important;
}

.custom-font[data-font-id="4"] {
    font-family: Liter, var(--bs-body-font-family), sans-serif;
!important;
}

.custom-font[data-font-id="5"] {
    font-family: Oswald, var(--bs-body-font-family), sans-serif;
!important;
}

.custom-font[data-font-id="6"] {
    font-family: Ubuntu, var(--bs-body-font-family), sans-serif;
!important;
}

.custom-font[data-font-id="7"] {
    font-family: Bona Nova SC, var(--bs-body-font-family), sans-serif;
!important;
}

.custom-font[data-font-id="8"] {
    font-family: Pacifico, var(--bs-body-font-family), sans-serif;
!important;
}

#businesscards-list {
    grid-template-columns: repeat(auto-fit, 350px);
}