body {
    display: grid;
    grid-template-columns: repeat(56, 1fr);
    grid-template-rows: repeat(32, 1fr);
    height: 100vh;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
	background-image: url('/static/images/background_image4.png');
	background-size: 55% auto;
	background-position: bottom right;
	background-repeat: no-repeat;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', sans-serif;
}

/* Apply different weights */
.light-text {
    font-weight: 300;
}

.regular-text {
    font-weight: 400;
}

.medium-text {
    font-weight: 500;
}

.bold-text {
    font-weight: 700;
}

/* Apply italic style */
.italic-text {
    font-style: italic;
}

.disabled {
    pointer-events: none;
    opacity: 0.5;
}

.title {
    display: none; /* Hide the list initially */
    grid-column: 2 / 18;
    grid-row: 3 / 4;
    font-size: 1vw;
}

.file-work-button {
    display: none; /* Hide the list initially */
    grid-column: 2 / 9;
    grid-row: 6 / 7;
    font-size: 0.8vw;
}

.upload-title-1 {
    grid-column: 22 / 37;
    grid-row: 5 / 9;
    font-size: 1vw;
	text-align: center;
}

.file-upload-form-1 {
    grid-column: 22 / 37;
    grid-row: 8 / 13;
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
    background-color: #f0f0f0;
    padding: 20px;
    font-size: 0.8vw;
	text-align: center; /* Align text to center */
}

.custom-file-upload {
    position: relative;
    z-index: 10;
    padding: 10px 20px;
    cursor: pointer;
    background-color: #FFDD2D;
    color: #3C3933;
    border-radius: 8px;
    border: 1px solid #FFDD2D;
	box-shadow:  4px 4px 12px #d9bc26,
             -4px -4px 12px #fffe34;
    font-size: 0.8vw;
}

.custom-file-upload:hover {
    background: #FFCD33; /* Color on hover */
    box-shadow: 4px 4px 12px #d9ae2b, -4px -4px 12px #ffec3b;
}

#file-upload1 {
    display: none;
}

.bg {
    position: absolute;
    top: 5px;
    left: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    z-index: 2;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(24px);
    border-radius: 10px;
    overflow: hidden;
    outline: 2px solid white;
}

.blob {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: #ff0000;
    opacity: 1;
    filter: blur(12px);
    animation: blob-bounce 5s infinite ease;
}

@keyframes blob-bounce {
    0% {
        transform: translate(-100%, -100%) translate3d(0, 0, 0);
    }
    25% {
        transform: translate(-100%, -100%) translate3d(100%, 0, 0);
    }
    50% {
        transform: translate(-100%, -100%) translate3d(100%, 100%, 0);
    }
    75% {
        transform: translate(-100%, -100%) translate3d(0, 100%, 0);
    }
    100% {
        transform: translate(-100%, -100%) translate3d(0, 0, 0);
    }
}

.choose-files-1 {
    display: none; /* Hide the default text */
	grid-column: 25 / 34;
    grid-row: 11 / 13;
    font-size: 0.8vw;
	
}

.file-list-1 {
    display: none; /* Hide the list initially */
    grid-column: 39 / 45;
    grid-row: 8 / 10;
    font-size: 0.8vw;
    list-style-type: decimal; /* Ensure list items are numbered */
    padding-left: 5px; /* Adjust as necessary to position numbers correctly */
}

.file-list-1 ol {
    list-style-type: none; /* Remove default list styling */
    padding: 0; /* Remove default padding */
}

.file-list-1 li {
    margin-bottom: 10px; /* Space between items */
    border-bottom: 1px solid black; /* Underline each item */
    padding-bottom: 5px; /* Add padding for better visual separation */
    display: flex;
    justify-content: space-between; /* Ensure button aligns to the right */
    align-items: center; /* Vertically center items */
}

.delete-button-1 {
    grid-column: 46 / 47;
    grid-row: 8 / 10;
}

.upload-title-2 {
    grid-column: 22 / 37;
    grid-row: 15 / 17;
    font-size: 1vw;
	text-align: center;
}

.file-upload-form-2 {
    grid-column: 22 / 37;
    grid-row: 19 / 24;
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
    background-color: #f0f0f0;
    padding: 20px;
    font-size: 0.8vw;
    text-align: center; /* Align text to center */
}

.custom-file-upload2 {
    position: relative;
    z-index: 10;
    padding: 10px 20px;
    cursor: pointer;
    background-color: #FFDD2D;
    color: #3C3933;
    border-radius: 8px;
    border: 1px solid #FFDD2D;
	box-shadow:  4px 4px 12px #d9bc26,
             -4px -4px 12px #fffe34;
    font-size: 0.8vw;
}

.custom-file-upload2:hover {
    background: #FFCD33; /* Color on hover */
    box-shadow: 4px 4px 12px #d9ae2b, -4px -4px 12px #ffec3b;
}

#file-upload2 {
    display: none;
}

.bg {
    position: absolute;
    top: 5px;
    left: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    z-index: 2;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(24px);
    border-radius: 10px;
    overflow: hidden;
    outline: 2px solid white;
}

.blob {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: #ff0000;
    opacity: 1;
    filter: blur(12px);
    animation: blob-bounce 5s infinite ease;
}

@keyframes blob-bounce {
    0% {
        transform: translate(-100%, -100%) translate3d(0, 0, 0);
    }
    25% {
        transform: translate(-100%, -100%) translate3d(100%, 0, 0);
    }
    50% {
        transform: translate(-100%, -100%) translate3d(100%, 100%, 0);
    }
    75% {
        transform: translate(-100%, -100%) translate3d(0, 100%, 0);
    }
    100% {
        transform: translate(-100%, -100%) translate3d(0, 0, 0);
    }
}

.choose-files-2 {
    display: none; /* Hide the default text */
	grid-column: 25 / 34;
    grid-row: 22 / 24;
    font-size: 0.8vw;
	
}

.file-list-2 {
    display: none; /* Hide the list initially */
    grid-column: 39 / 45;
    grid-row: 19 / 24;
    font-size: 0.8vw;
	list-style-type: decimal; /* Ensure list items are numbered */
    padding-left: 5px; /* Adjust as necessary to position numbers correctly */
}

.file-list-2 ol {
    list-style-type: none; /* Remove default list styling */
    padding: 0; /* Remove default padding */
}

.file-list-2 li {
    margin-bottom: 10px; /* Space between items */
    border-bottom: 1px solid black; /* Underline each item */
    padding-bottom: 5px; /* Add padding for better visual separation */
    display: flex;
    justify-content: space-between; /* Ensure button aligns to the right */
    align-items: center; /* Vertically center items */
}

.delete-button-2 {
    grid-column: 46 / 47;
    grid-row: 19 / 24;
}

.turnover-title {
    display: none; /* Hide the list initially */
    grid-column: 47 / 54;
    grid-row: 16 / 16;
	text-align: center;
	font-size: 1vw;
}

.turnover-3-months {
    display: none; /* Hide the list initially */
    grid-column: 47 / 54;
    grid-row: 18 / 18;
    font-size: 0.8vw;
}

.turnover-6-months {
    display: none; /* Hide the list initially */
    grid-column: 47 / 54;
    grid-row: 19 / 19;
    font-size: 0.8vw;
}

.turnover-12-months {
    display: none; /* Hide the list initially */
    grid-column: 47 / 54;
    grid-row: 20 / 20;
    font-size: 0.8vw;
}

.checkbox-section {
    grid-column: 22 / 37;
    grid-row: 26 / 27;
    display: flex;
    align-items: center;
    font-size: 0.8vw;
}

.container {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
}

.container input {
    position: relative;
    cursor: pointer;
    height: 20px;
    width: 20px;
    box-shadow: -2px -2px 5px rgba(255,255,255,0.5),
                2px 2px 5px rgba(0,0,70,0.12);
    border-radius: 50%;
    border: 2px solid #ececec;
    outline: none;
    transition: 0.5s;
    -webkit-appearance: none;
    display: grid;
    place-items: center;
    background-color: #fff;
}

.container input::after {
    content: '';
    width: 0.35em;
    height: 0.7em;
    border: solid #7a7a7a;
    border-width: 0 0.15em 0.15em 0;
    transform: rotate(45deg);
    display: none; /* Initially hidden */
    transition: 0.5s;
}

.container input:checked {
    box-shadow: -2px -2px 5px rgba(255,255,255,0.5),
                2px 2px 5px rgba(70,70,70,0.12),
                inset -2px -2px 5px rgba(255,255,255,0.5),
                inset 2px 2px 5px rgba(70,70,70,0.12);
    transition: 0.5s;
}

.container input:checked::after {
    display: block; /* Show the check mark when checked */
    border-color: #15e38a;
}

.container label {
    cursor: pointer;
}

.hidden {
    display: none !important;
}

.email_and_promocode-text {
	grid-column: 22 / 37;
    grid-row: 28 / 28;
	text-align: center;
	font-size: 0.8vw;
}

.phone-text {
	grid-column: 22 / 37;
    grid-row: 28 / 28;
	text-align: center;
	font-size: 0.8vw;
}

.email-input-container {
    grid-column: 22 / 28;
    grid-row: 30 / 30;
    align-items: center;
    justify-content: center;
    padding: 0.2rem;
    border-radius: 0.2rem;
    background: #e8e8e8;
    box-shadow: 4px 4px 12px #c5c5c5, -4px -4px 12px #ffffff;
    transition: 0.3s;
}

.email-input {
    font-size: 0.8vw;
    border: none;
    padding: 0.2rem;
    border-radius: 0.2rem;
    background: #e8e8e8;
    box-shadow: 4px 4px 12px #c5c5c5, -4px -4px 12px #ffffff;
    outline: none; /* Remove default outline */
    transition: 0.3s;
    width: 100%;
}

.email-input:focus {
    outline-color: #e8e8e8;
	background: #e8e8e8;
	box-shadow: inset 4px 4px 12px #c5c5c5,
		inset -4px -4px 12px #ffffff;
	transition: 0.3s;
}

.phone-input-container {
	grid-column: 22 / 28;
    grid-row: 30 / 30;
    align-items: center;
    justify-content: center;
    padding: 0.2rem;
    border-radius: 0.2rem;
    background: #e8e8e8;
    box-shadow: 4px 4px 12px #c5c5c5, -4px -4px 12px #ffffff;
    transition: 0.3s;
}

.phone-input {
    font-size: 0.8vw;
    border: none;
    padding: 0.2rem;
    border-radius: 0.2rem;
    background: #e8e8e8;
    box-shadow: 4px 4px 12px #c5c5c5, -4px -4px 12px #ffffff;
    outline: none; /* Remove default outline */
    transition: 0.3s;
    width: 100%;
}

.phone-input:focus {
    outline-color: #e8e8e8;
	background: #e8e8e8;
	box-shadow: inset 4px 4px 12px #c5c5c5,
		inset -4px -4px 12px #ffffff;
	transition: 0.3s;
}

.continue-button {
    grid-column: 31 / 37;
    grid-row: 30 / 30;
    font-size: 0.8vw;
	border-radius: 8px;
	background: #FFDD2D;
	box-shadow:  4px 4px 12px #d9bc26,
             -4px -4px 12px #fffe34;
	border: none;
	color: #383833;
}

.continue-button:hover {
    background: #FFCD33; /* Color on hover */
    box-shadow: 4px 4px 12px #d9ae2b, -4px -4px 12px #ffec3b;
}

.continue-button:active {
    background: #F2BD1D; /* Color on click */
    box-shadow: inset 4px 4px 12px #cea119, inset -4px -4px 12px #ffd921;
}

.get-sms-code-button {
	grid-column: 31 / 37;
    grid-row: 30 / 30;
    font-size: 0.8vw;
	border-radius: 8px;
	background: #FFDD2D;
	box-shadow:  4px 4px 12px #d9bc26,
             -4px -4px 12px #fffe34;
	border: none;
	color: #383833;
}

.get-sms-code-button:hover {
    background: #FFCD33; /* Color on hover */
    box-shadow: 4px 4px 12px #d9ae2b, -4px -4px 12px #ffec3b;
}

.get-sms-code-button:active {
    background: #F2BD1D; /* Color on click */
    box-shadow: inset 4px 4px 12px #cea119, inset -4px -4px 12px #ffd921;
}

.code-text {
    grid-column: 22 / 37;
    grid-row: 28 / 28;
	text-align: center;
	font-size: 0.8vw;
}

.promo-input-container {
    grid-column: 22 / 28;
    grid-row: 32 / 32;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem;
    border-radius: 0.2rem;
    background: #e8e8e8;
    box-shadow: 4px 4px 12px #c5c5c5, -4px -4px 12px #ffffff;
    transition: 0.3s;
}

.promo-input {
    font-size: 0.8vw;
    border: none;
    padding: 0.2rem;
    border-radius: 0.2rem;
    background: #e8e8e8;
    box-shadow: 4px 4px 12px #c5c5c5, -4px -4px 12px #ffffff;
    outline: none; /* Remove default outline */
    transition: 0.3s;
    width: 100%;
}

.promo-input:focus {
    outline-color: #e8e8e8;
	background: #e8e8e8;
	box-shadow: inset 4px 4px 12px #c5c5c5,
		inset -4px -4px 12px #ffffff;
	transition: 0.3s;
}

.code-input-container {
	grid-column: 22 / 28;
    grid-row: 30 / 30;
    align-items: center;
    justify-content: center;
    padding: 0.2rem;
    border-radius: 0.2rem;
    background: #e8e8e8;
    box-shadow: 4px 4px 12px #c5c5c5, -4px -4px 12px #ffffff;
    transition: 0.3s;
}

.code-input {
    font-size: 0.8vw;
    border: none;
    padding: 0.2rem;
    border-radius: 0.2rem;
    background: #e8e8e8;
    box-shadow: 4px 4px 12px #c5c5c5, -4px -4px 12px #ffffff;
    outline: none; /* Remove default outline */
    transition: 0.3s;
    width: 100%;
}

.code-input:focus {
    outline-color: #e8e8e8;
	background: #e8e8e8;
	box-shadow: inset 4px 4px 12px #c5c5c5,
		inset -4px -4px 12px #ffffff;
	transition: 0.3s;
}

.continue-button {
	grid-column: 31 / 37;
    grid-row: 30 / 30;
    font-size: 0.8vw;
	border-radius: 8px;
	background: #FFDD2D;
	box-shadow:  4px 4px 12px #d9bc26,
             -4px -4px 12px #fffe34;
	border: none;
	color: #383833;
}

.continue-button:hover {
    background: #FFCD33; /* Color on hover */
    box-shadow: 4px 4px 12px #d9ae2b, -4px -4px 12px #ffec3b;
}

.continue-button:active {
    background: #F2BD1D; /* Color on click */
    box-shadow: inset 4px 4px 12px #cea119, inset -4px -4px 12px #ffd921;
}

.confirm-code-button {
	grid-column: 31 / 37;
    grid-row: 30 / 30;
    font-size: 0.8vw;
	border-radius: 8px;
	background: #FFDD2D;
	box-shadow:  4px 4px 12px #d9bc26,
             -4px -4px 12px #fffe34;
	border: none;
	color: #383833;
}

.confirm-code-button:hover {
    background: #FFCD33; /* Color on hover */
    box-shadow: 4px 4px 12px #d9ae2b, -4px -4px 12px #ffec3b;
}

.confirm-code-button:active {
    background: #F2BD1D; /* Color on click */
    box-shadow: inset 4px 4px 12px #cea119, inset -4px -4px 12px #ffd921;
}

.account-title {
    display: none; /* Hide the list initially */
    grid-column: 4 / 18;
    grid-row: 16 / 16;
	text-align: center;
	font-size: 0.8vw;
}

.file-list-3 {
    display: none; /* Hide the list initially */
    grid-column: 4 / 18;
    grid-row: 19 / 24;
    font-size: 0.6vw;
    list-style-type: decimal; /* Ensure list items are numbered */
    padding-left: 5px; /* Adjust as necessary to position numbers correctly */
}

.file-list-3 ol {
    list-style-type: none; /* Remove default list styling */
    padding: 0; /* Remove default padding */
    text-align: right; /* Align text to the right */
}

.file-list-3 li {
    margin-bottom: 10px; /* Space between items */
    border-bottom: 1px solid black; /* Underline each item */
    padding-bottom: 5px; /* Add padding for better visual separation */
    font-size: 0.6vw;
    text-align: right; /* Align text to the right */
    direction: rtl; /* Set direction to right-to-left */
}


.delete-button-3 {
    grid-column: 27 / 28;
    grid-row: 19 / 24;
}

.delete-button {
    background-color: transparent;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: red;
    font-size: 0.8vw;
    cursor: pointer;
}

.image-container-passports {
    grid-column: 39 / 42; /* Adjust grid columns to position the image */
    grid-row: 2 / 3;     /* Adjust grid rows to position the image */
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-passports {
    max-width: 100%;
    height: auto;
    /*border-radius: 8px;*/
    /*box-shadow: 4px 4px 12px #c5c5c5, -4px -4px 12px #ffffff;*/
}

.image-container-modul-logo {
    grid-column: 3 / 8; /* Adjust grid columns to position the image */
    grid-row: 2 / 3;     /* Adjust grid rows to position the image */
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-modul-logo {
    max-width: 100%;
    height: auto;
    /*border-radius: 8px;*/
    /*box-shadow: 4px 4px 12px #c5c5c5, -4px -4px 12px #ffffff;*/
}

.image-container-skolkovo-logo {
    grid-column: 36 / 41; /* Adjust grid columns to position the image */
    grid-row: 3 / 3;     /* Adjust grid rows to position the image */
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-skolkovo-logo {
    max-width: 100%;
    height: auto;
    /*border-radius: 8px;*/
    /*box-shadow: 4px 4px 12px #c5c5c5, -4px -4px 12px #ffffff;*/
}

.image-container-wb-logo {
    grid-column: 18 / 23; /* Adjust grid columns to position the image */
    grid-row: 3 / 3;     /* Adjust grid rows to position the image */
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-wb-logo {
    max-width: 100%;
    height: auto;
    /*border-radius: 8px;*/
    /*box-shadow: 4px 4px 12px #c5c5c5, -4px -4px 12px #ffffff;*/
}

.image-container-cbrf-logo {
    grid-column: 25 / 35; /* Adjust grid columns to position the image */
    grid-row: 3 / 3;     /* Adjust grid rows to position the image */
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-cbrf-logo {
    max-width: 100%;
    height: auto;
    /*border-radius: 8px;*/
    /*box-shadow: 4px 4px 12px #c5c5c5, -4px -4px 12px #ffffff;*/
}

.image-container-stamp {
    grid-column: 7 / 17; /* Adjust grid columns to position the image */
    grid-row: 4 / 14;     /* Adjust grid rows to position the image */
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-stamp {
    max-width: 100%;
    height: auto;
    transform: rotate(315deg);
    /*border-radius: 8px;*/
    /*box-shadow: 4px 4px 12px #c5c5c5, -4px -4px 12px #ffffff;*/
}

/* Loading overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
}

.container-loading {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
    filter: url("#goo");
    animation: rotate-move 2s ease-in-out infinite;
}

.dot {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #000;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.dot-3 {
    background-color: #ff1717;
    animation: dot-3-move 2s ease infinite, index 6s ease infinite;
}

.dot-2 {
    background-color: #0051ff;
    animation: dot-2-move 2s ease infinite, index 6s -4s ease infinite;
}

.dot-1 {
    background-color: #ffc400;
    animation: dot-1-move 2s ease infinite, index 6s -2s ease infinite;
}

@keyframes dot-3-move {
    20% {
        transform: scale(1);
    }
    45% {
        transform: translateY(-18px) scale(0.45);
    }
    60% {
        transform: translateY(-90px) scale(0.45);
    }
    80% {
        transform: translateY(-90px) scale(0.45);
    }
    100% {
        transform: translateY(0px) scale(1);
    }
}

@keyframes dot-2-move {
    20% {
        transform: scale(1);
    }
    45% {
        transform: translate(-16px, 12px) scale(0.45);
    }
    60% {
        transform: translate(-80px, 60px) scale(0.45);
    }
    80% {
        transform: translate(-80px, 60px) scale(0.45);
    }
    100% {
        transform: translateY(0px) scale(1);
    }
}

@keyframes dot-1-move {
    20% {
        transform: scale(1);
    }
    45% {
        transform: translate(16px, 12px) scale(0.45);
    }
    60% {
        transform: translate(80px, 60px) scale(0.45);
    }
    80% {
        transform: translate(80px, 60px) scale(0.45);
    }
    100% {
        transform: translateY(0px) scale(1);
    }
}

@keyframes rotate-move {
    55% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    80% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes index {
    0%,
    100% {
        z-index: 3;
    }
    33.3% {
        z-index: 2;
    }
    66.6% {
        z-index: 1;
    }
}

/* Styles for INN Input Popup */
.inn-popup {
  display: none; /* Hide initially */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
  z-index: 2000; /* Ensure it's on top of other elements */
}

.inn-popup-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  width: 300px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.inn-popup-content h3 {
  margin-bottom: 15px;
}

.inn-popup-content input {
  width: calc(100% - 20px);
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.inn-popup-content button {
  padding: 10px 15px;
  margin: 5px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.inn-popup-content button:hover {
  background-color: #f0f0f0;
}

/* Styles for Passport Input Popup */
.passport-popup {
  display: none; /* Hide initially */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
  z-index: 2000; /* Ensure it's on top of other elements */
}

.passport-popup-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  width: 320px; /* Adjusted width to accommodate multiple inputs */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  max-height: 90vh; /* Prevent overflow */
  overflow-y: auto; /* Add scroll if content exceeds max height */
}

.passport-popup-content h3 {
  margin-bottom: 15px;
}

.passport-popup-content input,
.passport-popup-content select {
  width: calc(100% - 20px);
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.passport-popup-content button {
  padding: 10px 15px;
  margin: 5px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.passport-popup-content button:hover {
  background-color: #f0f0f0;
}


@media (max-width: 480px) {
    body {
        grid-template-columns: repeat(32, 1fr); /* 32-column grid */
		grid-template-rows: repeat(56, 1fr);
        height: 100vh;
		margin: 0;
		font-family: 'Open Sans', sans-serif;
		background-image: url('/static/images/background_image4.png');
		background-size: 55% auto;
		background-position: bottom right;
		background-repeat: no-repeat;
		}
	
h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', sans-serif;
}

/* Apply different weights */
.light-text {
    font-weight: 300;
}

.regular-text {
    font-weight: 400;
}

.medium-text {
    font-weight: 500;
}

.bold-text {
    font-weight: 700;
}

/* Apply italic style */
.italic-text {
    font-style: italic;
}

.disabled {
    pointer-events: none;
    opacity: 0.5;
}

.title {
    display: none; /* Hide the list initially */
    grid-column: 2 / 18;
    grid-row: 3 / 4;
    font-size: 1vw;
}

.file-work-button {
    display: none; /* Hide the list initially */
    grid-column: 2 / 9;
    grid-row: 6 / 7;
    font-size: 0.8vw;
}

.upload-title-1 {
    grid-column: 4 / 27;
    grid-row: 5 / 9;
    font-size: 3vw;
	text-align: center;
}

.file-upload-form-1 {
    grid-column: 4 / 27;
    grid-row: 11 / 18;
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
    background-color: #f0f0f0;
    padding: 20px;
    font-size: 3vw;
	text-align: center; /* Align text to center */
}

.custom-file-upload {
    position: relative;
    z-index: 10;
    padding: 10px 20px;
    cursor: pointer;
    background-color: #FFDD2D;
    color: #3C3933;
    border-radius: 8px;
    border: 1px solid #FFDD2D;
	box-shadow:  4px 4px 12px #d9bc26,
             -4px -4px 12px #fffe34;
    font-size: 3vw;
}

.custom-file-upload:hover {
    background: #FFCD33; /* Color on hover */
    box-shadow: 4px 4px 12px #d9ae2b, -4px -4px 12px #ffec3b;
}

#file-upload1 {
    display: none;
}

.bg {
    position: absolute;
    top: 5px;
    left: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    z-index: 2;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(24px);
    border-radius: 10px;
    overflow: hidden;
    outline: 2px solid white;
}

.blob {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: #ff0000;
    opacity: 1;
    filter: blur(12px);
    animation: blob-bounce 5s infinite ease;
}

@keyframes blob-bounce {
    0% {
        transform: translate(-100%, -100%) translate3d(0, 0, 0);
    }
    25% {
        transform: translate(-100%, -100%) translate3d(100%, 0, 0);
    }
    50% {
        transform: translate(-100%, -100%) translate3d(100%, 100%, 0);
    }
    75% {
        transform: translate(-100%, -100%) translate3d(0, 100%, 0);
    }
    100% {
        transform: translate(-100%, -100%) translate3d(0, 0, 0);
    }
}

.choose-files-1 {
    display: none; /* Hide the default text */
	grid-column: 4 / 27;
    grid-row: 13 / 16;
    font-size: 3vw;
	
}

.file-list-1 {
    display: none; /* Hide the list initially */
    grid-column: 39 / 45;
    grid-row: 8 / 10;
    font-size: 0.8vw;
    list-style-type: decimal; /* Ensure list items are numbered */
    padding-left: 5px; /* Adjust as necessary to position numbers correctly */
}

.file-list-1 ol {
    list-style-type: none; /* Remove default list styling */
    padding: 0; /* Remove default padding */
}

.file-list-1 li {
    margin-bottom: 10px; /* Space between items */
    border-bottom: 1px solid black; /* Underline each item */
    padding-bottom: 5px; /* Add padding for better visual separation */
    display: flex;
    justify-content: space-between; /* Ensure button aligns to the right */
    align-items: center; /* Vertically center items */
}

.delete-button-1 {
    grid-column: 46 / 47;
    grid-row: 8 / 10;
}

.upload-title-2 {
    grid-column: 4 / 27;
    grid-row: 20 / 23;
    font-size: 3vw;
	text-align: center;
}

.file-upload-form-2 {
    grid-column: 4 / 27;
    grid-row: 25 / 32;
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
    background-color: #f0f0f0;
    padding: 20px;
    font-size: 3vw;
    text-align: center; /* Align text to center */
}

.custom-file-upload2 {
    position: relative;
    z-index: 10;
    padding: 10px 20px;
    cursor: pointer;
    background-color: #FFDD2D;
    color: #3C3933;
    border-radius: 8px;
    border: 1px solid #FFDD2D;
	box-shadow:  4px 4px 12px #d9bc26,
             -4px -4px 12px #fffe34;
    font-size: 3vw;
}

.custom-file-upload2:hover {
    background: #FFCD33; /* Color on hover */
    box-shadow: 4px 4px 12px #d9ae2b, -4px -4px 12px #ffec3b;
}

#file-upload2 {
    display: none;
}

.bg {
    position: absolute;
    top: 5px;
    left: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    z-index: 2;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(24px);
    border-radius: 10px;
    overflow: hidden;
    outline: 2px solid white;
}

.blob {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: #ff0000;
    opacity: 1;
    filter: blur(12px);
    animation: blob-bounce 5s infinite ease;
}

@keyframes blob-bounce {
    0% {
        transform: translate(-100%, -100%) translate3d(0, 0, 0);
    }
    25% {
        transform: translate(-100%, -100%) translate3d(100%, 0, 0);
    }
    50% {
        transform: translate(-100%, -100%) translate3d(100%, 100%, 0);
    }
    75% {
        transform: translate(-100%, -100%) translate3d(0, 100%, 0);
    }
    100% {
        transform: translate(-100%, -100%) translate3d(0, 0, 0);
    }
}

.choose-files-2 {
    display: none; /* Hide the default text */
	grid-column: 4 / 27;
    grid-row: 27 / 30;
    font-size: 3vw;
	
}

.file-list-2 {
    display: none; /* Hide the list initially */
    grid-column: 39 / 45;
    grid-row: 19 / 24;
    font-size: 0.8vw;
	list-style-type: decimal; /* Ensure list items are numbered */
    padding-left: 5px; /* Adjust as necessary to position numbers correctly */
}

.file-list-2 ol {
    list-style-type: none; /* Remove default list styling */
    padding: 0; /* Remove default padding */
}

.file-list-2 li {
    margin-bottom: 10px; /* Space between items */
    border-bottom: 1px solid black; /* Underline each item */
    padding-bottom: 5px; /* Add padding for better visual separation */
    display: flex;
    justify-content: space-between; /* Ensure button aligns to the right */
    align-items: center; /* Vertically center items */
}

.delete-button-2 {
    grid-column: 46 / 47;
    grid-row: 19 / 24;
}

.turnover-title {
    display: none; /* Hide the list initially */
    grid-column: 47 / 54;
    grid-row: 16 / 16;
	text-align: center;
	font-size: 1vw;
}

.turnover-3-months {
    display: none; /* Hide the list initially */
    grid-column: 47 / 54;
    grid-row: 18 / 18;
    font-size: 0.8vw;
}

.turnover-6-months {
    display: none; /* Hide the list initially */
    grid-column: 47 / 54;
    grid-row: 19 / 19;
    font-size: 0.8vw;
}

.turnover-12-months {
    display: none; /* Hide the list initially */
    grid-column: 47 / 54;
    grid-row: 20 / 20;
    font-size: 0.8vw;
}

.checkbox-section {
    grid-column: 4 / 27;
    grid-row: 34 / 35;
    display: flex;
    align-items: center;
    font-size: 3vw;
}

.container {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
}

.container input {
    position: relative;
    cursor: pointer;
    height: 20px;
    width: 20px;
    box-shadow: -2px -2px 5px rgba(255,255,255,0.5),
                2px 2px 5px rgba(0,0,70,0.12);
    border-radius: 50%;
    border: 2px solid #ececec;
    outline: none;
    transition: 0.5s;
    -webkit-appearance: none;
    display: grid;
    place-items: center;
    background-color: #fff;
}

.container input::after {
    content: '';
    width: 0.35em;
    height: 0.7em;
    border: solid #7a7a7a;
    border-width: 0 0.15em 0.15em 0;
    transform: rotate(45deg);
    display: none; /* Initially hidden */
    transition: 0.5s;
}

.container input:checked {
    box-shadow: -2px -2px 5px rgba(255,255,255,0.5),
                2px 2px 5px rgba(70,70,70,0.12),
                inset -2px -2px 5px rgba(255,255,255,0.5),
                inset 2px 2px 5px rgba(70,70,70,0.12);
    transition: 0.5s;
}

.container input:checked::after {
    display: block; /* Show the check mark when checked */
    border-color: #15e38a;
}

.container label {
    cursor: pointer;
}

.hidden {
    display: none !important;
}

.email_and_promocode-text {
	grid-column: 4 / 27;
    grid-row: 37 / 37;
	text-align: center;
	font-size: 3vw;
}

.phone-text {
	grid-column: 4 / 27;
    grid-row: 37 / 37;
	text-align: center;
	font-size: 3vw;
}

.email-input-container {
    grid-column: 4 / 17;
    grid-row: 38 / 38;
    align-items: center;
    justify-content: center;
    padding: 0.2rem;
    border-radius: 0.2rem;
    background: #e8e8e8;
    box-shadow: 4px 4px 12px #c5c5c5, -4px -4px 12px #ffffff;
    transition: 0.3s;
}

.email-input {
    font-size: 3vw;
    border: none;
    padding: 0.2rem;
    border-radius: 0.2rem;
    background: #e8e8e8;
    box-shadow: 4px 4px 12px #c5c5c5, -4px -4px 12px #ffffff;
    outline: none; /* Remove default outline */
    transition: 0.3s;
    width: 100%;
}

.email-input:focus {
    outline-color: #e8e8e8;
	background: #e8e8e8;
	box-shadow: inset 4px 4px 12px #c5c5c5,
		inset -4px -4px 12px #ffffff;
	transition: 0.3s;
}

.phone-input-container {
	grid-column: 4 / 17;
    grid-row: 38 / 38;
    align-items: center;
    justify-content: center;
    padding: 0.2rem;
    border-radius: 0.2rem;
    background: #e8e8e8;
    box-shadow: 4px 4px 12px #c5c5c5, -4px -4px 12px #ffffff;
    transition: 0.3s;
}

.phone-input {
    font-size: 3vw;
    border: none;
    padding: 0.2rem;
    border-radius: 0.2rem;
    background: #e8e8e8;
    box-shadow: 4px 4px 12px #c5c5c5, -4px -4px 12px #ffffff;
    outline: none; /* Remove default outline */
    transition: 0.3s;
    width: 100%;
}

.phone-input:focus {
    outline-color: #e8e8e8;
	background: #e8e8e8;
	box-shadow: inset 4px 4px 12px #c5c5c5,
		inset -4px -4px 12px #ffffff;
	transition: 0.3s;
}

.continue-button {
	grid-column: 18 / 27;
    grid-row: 38 / 38;
    font-size: 3vw;
	border-radius: 8px;
	background: #FFDD2D;
	box-shadow:  4px 4px 12px #d9bc26,
             -4px -4px 12px #fffe34;
	border: none;
	color: #383833;
}

.continue-button:hover {
    background: #FFCD33; /* Color on hover */
    box-shadow: 4px 4px 12px #d9ae2b, -4px -4px 12px #ffec3b;
}

.continue-button:active {
    background: #F2BD1D; /* Color on click */
    box-shadow: inset 4px 4px 12px #cea119, inset -4px -4px 12px #ffd921;
}

.get-sms-code-button {
	grid-column: 18 / 27;
    grid-row: 38 / 38;
    font-size: 3vw;
	border-radius: 8px;
	background: #FFDD2D;
	box-shadow:  4px 4px 12px #d9bc26,
             -4px -4px 12px #fffe34;
	border: none;
	color: #383833;
}

.get-sms-code-button:hover {
    background: #FFCD33; /* Color on hover */
    box-shadow: 4px 4px 12px #d9ae2b, -4px -4px 12px #ffec3b;
}

.get-sms-code-button:active {
    background: #F2BD1D; /* Color on click */
    box-shadow: inset 4px 4px 12px #cea119, inset -4px -4px 12px #ffd921;
}

.code-text {
	grid-column: 4 / 27;
    grid-row: 37 / 37;
	text-align: center;
	font-size: 3vw;
}

.promo-input-container {
	grid-column: 4 / 17;
    grid-row: 40 / 40;
    align-items: center;
    justify-content: center;
    padding: 0.2rem;
    border-radius: 0.2rem;
    background: #e8e8e8;
    box-shadow: 4px 4px 12px #c5c5c5, -4px -4px 12px #ffffff;
    transition: 0.3s;
}

.promo-input {
    font-size: 3vw;
    border: none;
    padding: 0.2rem;
    border-radius: 0.2rem;
    background: #e8e8e8;
    box-shadow: 4px 4px 12px #c5c5c5, -4px -4px 12px #ffffff;
    outline: none; /* Remove default outline */
    transition: 0.3s;
    width: 100%;
}

.promo-input:focus {
    outline-color: #e8e8e8;
	background: #e8e8e8;
	box-shadow: inset 4px 4px 12px #c5c5c5,
		inset -4px -4px 12px #ffffff;
	transition: 0.3s;
}

.code-input-container {
    grid-column: 4 / 17;
    grid-row: 38 / 38;
    align-items: center;
    justify-content: center;
    padding: 0.2rem;
    border-radius: 0.2rem;
    background: #e8e8e8;
    box-shadow: 4px 4px 12px #c5c5c5, -4px -4px 12px #ffffff;
    transition: 0.3s;
}

.code-input {
    font-size: 3vw;
    border: none;
    padding: 0.2rem;
    border-radius: 0.2rem;
    background: #e8e8e8;
    box-shadow: 4px 4px 12px #c5c5c5, -4px -4px 12px #ffffff;
    outline: none; /* Remove default outline */
    transition: 0.3s;
    width: 100%;
}

.code-input:focus {
    outline-color: #e8e8e8;
	background: #e8e8e8;
	box-shadow: inset 4px 4px 12px #c5c5c5,
		inset -4px -4px 12px #ffffff;
	transition: 0.3s;
}

.confirm-code-button {
	grid-column: 18 / 27;
    grid-row: 38 / 38;
    font-size: 3vw;
	border-radius: 8px;
	background: #FFDD2D;
	box-shadow:  4px 4px 12px #d9bc26,
             -4px -4px 12px #fffe34;
	border: none;
	color: #383833;
}

.confirm-code-button:hover {
    background: #FFCD33; /* Color on hover */
    box-shadow: 4px 4px 12px #d9ae2b, -4px -4px 12px #ffec3b;
}

.confirm-code-button:active {
    background: #F2BD1D; /* Color on click */
    box-shadow: inset 4px 4px 12px #cea119, inset -4px -4px 12px #ffd921;
}

.account-title {
    display: none; /* Hide the list initially */
    grid-column: 4 / 18;
    grid-row: 16 / 16;
	text-align: center;
	font-size: 0.8vw;
}

.file-list-3 {
    display: none; /* Hide the list initially */
    grid-column: 4 / 18;
    grid-row: 19 / 24;
    font-size: 0.6vw;
    list-style-type: decimal; /* Ensure list items are numbered */
    padding-left: 5px; /* Adjust as necessary to position numbers correctly */
}

.file-list-3 ol {
    list-style-type: none; /* Remove default list styling */
    padding: 0; /* Remove default padding */
    text-align: right; /* Align text to the right */
}

.file-list-3 li {
    margin-bottom: 10px; /* Space between items */
    border-bottom: 1px solid black; /* Underline each item */
    padding-bottom: 5px; /* Add padding for better visual separation */
    font-size: 0.6vw;
    text-align: right; /* Align text to the right */
    direction: rtl; /* Set direction to right-to-left */
}


.delete-button-3 {
    grid-column: 27 / 28;
    grid-row: 19 / 24;
}

.delete-button {
    background-color: transparent;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: red;
    font-size: 0.8vw;
    cursor: pointer;
}

.image-container-passports {
    grid-column: 39 / 42; /* Adjust grid columns to position the image */
    grid-row: 2 / 3;     /* Adjust grid rows to position the image */
    display: none;
    align-items: center;
    justify-content: center;
}

.image-passports {
    max-width: 100%;
    height: auto;
	display: none;
    /*border-radius: 8px;*/
    /*box-shadow: 4px 4px 12px #c5c5c5, -4px -4px 12px #ffffff;*/
}

.image-container-modul-logo {
    grid-column: 3 / 8; /* Adjust grid columns to position the image */
    grid-row: 2 / 3;     /* Adjust grid rows to position the image */
    display: none;
    align-items: center;
    justify-content: center;
}

.image-modul-logo {
    max-width: 100%;
    height: auto;
	display: none;
    /*border-radius: 8px;*/
    /*box-shadow: 4px 4px 12px #c5c5c5, -4px -4px 12px #ffffff;*/
}

.image-container-skolkovo-logo {
    grid-column: 24 / 29; /* Adjust grid columns to position the image */
    grid-row: 3 / 3;     /* Adjust grid rows to position the image */
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-skolkovo-logo {
    max-width: 100%;
    height: auto;
    /*border-radius: 8px;*/
    /*box-shadow: 4px 4px 12px #c5c5c5, -4px -4px 12px #ffffff;*/
}

.image-container-wb-logo {
    grid-column: 4 / 9; /* Adjust grid columns to position the image */
    grid-row: 3 / 3;     /* Adjust grid rows to position the image */
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-wb-logo {
    max-width: 100%;
    height: auto;
    /*border-radius: 8px;*/
    /*box-shadow: 4px 4px 12px #c5c5c5, -4px -4px 12px #ffffff;*/
}

.image-container-cbrf-logo {
    grid-column: 12 / 22; /* Adjust grid columns to position the image */
    grid-row: 3 / 3;     /* Adjust grid rows to position the image */
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-cbrf-logo {
    max-width: 100%;
    height: auto;
    /*border-radius: 8px;*/
    /*box-shadow: 4px 4px 12px #c5c5c5, -4px -4px 12px #ffffff;*/
}

.image-container-stamp {
    grid-column: 7 / 17; /* Adjust grid columns to position the image */
    grid-row: 4 / 14;     /* Adjust grid rows to position the image */
    display: none;
    align-items: center;
    justify-content: center;
}

.image-stamp {
    max-width: 100%;
    height: auto;
    transform: rotate(315deg);
	display:none;
    /*border-radius: 8px;*/
    /*box-shadow: 4px 4px 12px #c5c5c5, -4px -4px 12px #ffffff;*/
}

/* Loading overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
}

.container-loading {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
    filter: url("#goo");
    animation: rotate-move 2s ease-in-out infinite;
}

.dot {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #000;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.dot-3 {
    background-color: #ff1717;
    animation: dot-3-move 2s ease infinite, index 6s ease infinite;
}

.dot-2 {
    background-color: #0051ff;
    animation: dot-2-move 2s ease infinite, index 6s -4s ease infinite;
}

.dot-1 {
    background-color: #ffc400;
    animation: dot-1-move 2s ease infinite, index 6s -2s ease infinite;
}

@keyframes dot-3-move {
    20% {
        transform: scale(1);
    }
    45% {
        transform: translateY(-18px) scale(0.45);
    }
    60% {
        transform: translateY(-90px) scale(0.45);
    }
    80% {
        transform: translateY(-90px) scale(0.45);
    }
    100% {
        transform: translateY(0px) scale(1);
    }
}

@keyframes dot-2-move {
    20% {
        transform: scale(1);
    }
    45% {
        transform: translate(-16px, 12px) scale(0.45);
    }
    60% {
        transform: translate(-80px, 60px) scale(0.45);
    }
    80% {
        transform: translate(-80px, 60px) scale(0.45);
    }
    100% {
        transform: translateY(0px) scale(1);
    }
}

@keyframes dot-1-move {
    20% {
        transform: scale(1);
    }
    45% {
        transform: translate(16px, 12px) scale(0.45);
    }
    60% {
        transform: translate(80px, 60px) scale(0.45);
    }
    80% {
        transform: translate(80px, 60px) scale(0.45);
    }
    100% {
        transform: translateY(0px) scale(1);
    }
}

@keyframes rotate-move {
    55% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    80% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes index {
    0%,
    100% {
        z-index: 3;
    }
    33.3% {
        z-index: 2;
    }
    66.6% {
        z-index: 1;
    }
}

/* Styles for INN Input Popup */
.inn-popup {
  display: none; /* Hide initially */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
  z-index: 2000; /* Ensure it's on top of other elements */
}

.inn-popup-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  width: 300px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.inn-popup-content h3 {
  margin-bottom: 15px;
}

.inn-popup-content input {
  width: calc(100% - 20px);
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.inn-popup-content button {
  padding: 10px 15px;
  margin: 5px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.inn-popup-content button:hover {
  background-color: #f0f0f0;
}

/* Styles for Passport Input Popup */
.passport-popup {
  display: none; /* Hide initially */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
  z-index: 2000; /* Ensure it's on top of other elements */
}

.passport-popup-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  width: 320px; /* Adjusted width to accommodate multiple inputs */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  max-height: 90vh; /* Prevent overflow */
  overflow-y: auto; /* Add scroll if content exceeds max height */
}

.passport-popup-content h3 {
  margin-bottom: 15px;
}

.passport-popup-content input,
.passport-popup-content select {
  width: calc(100% - 20px);
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.passport-popup-content button {
  padding: 10px 15px;
  margin: 5px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.passport-popup-content button:hover {
  background-color: #f0f0f0;
}