@font-face {
   font-family: 'VazirMatn';
   src: url('/fonts/Vazirmatn-Regular.ttf') format('truetype');

}


body {
   margin: 0;
   font-family: 'VazirMatn', Arial, sans-serif;
   background-color: white;
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   overflow: hidden;
}





.loginErrors {
   color: red;
   text-align: center;
   font-size: 12px;
   height: 20px;
   margin: 10px 0;
   visibility: hidden;
   height: 20px;
   line-height: 20px;
}

.loginErrors.show {
   visibility: visible;
   opacity: 1;
   transition: opacity 0.3s ease;
}

header#idsrch {
   background-color: #3496cd;
   width: 100%;
   height: 60px;
   background-image: url('/images/modals/idsrcheader.png');
   background-repeat: no-repeat;
   background-position: center center;
   background-size: 400px auto;
   margin-bottom: 5px;
   position: relative;
   z-index: 1000;
}

#idsrch {
   cursor: pointer;
}

main {
   flex: 1;
   padding: 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   position: relative;
}



/**********************************************/

.search-container {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 20px;
   position: relative;
   z-index: 997;
   top: 15px;
}

#search-input {
   width: 240px;
   height: 18px;
   padding: 5px;
   font-size: 15px;
   font-family: 'Arial', Arial, sans-serif;
   border: 1px solid #ccc;
   border-radius: 0;
   outline: none;
   text-align: center;
   color: #000000;
   text-align: center;
   direction: rtl;
   unicode-bidi: plaintext;
}

#search-input::placeholder {
   color: rgb(218, 216, 216);
}

#search-button,
#help-button {
   width: 70px;
   height: 30px;
   font-size: 15px;
   border: none;
   cursor: pointer;
   font-family: 'B Roya Bold';
}

#search-button {
   background-color: #3496cd;
   color: white;
   border-radius: 0 5px 5px 0;
}

#search-button:hover {
   background-color: #45a049;
}

#help-button {
   background-color: #28a745;
   color: white;
   border-radius: 5px 0 0 5px;
}

#help-button:hover {
   background-color: #218838;
}
/**********************************************/


/**********************************************
.search-container {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 20px;
   position: relative;
   z-index: 997;
   top: 15px;
}

#search-button {
   width: 70px;
   height: 30px;
   font-size: 15px;
   border: none;
   cursor: pointer;
   font-family: 'B Roya Bold';
   background-color: #3496cd;
   color: white;
   border-radius: 0 5px 5px 0;
}

#search-button:hover {
   background-color: #2677a5;
}

#search-input {
   width: 215px;
   height: 18px;
   padding: 5px;
   font-size: 15px;
   font-family: 'Arial', Arial, sans-serif;
   border: 1px solid #ccc;
   border-radius: 0;
   outline: none;
   text-align: center;
   color: #000000;
   text-align: center;
   direction: rtl;
   unicode-bidi: plaintext;
}

#search-input::placeholder {
   color: rgb(218, 216, 216);
}

#help-button {
   background-color: #28a745;
   color: white;
   border-radius: 0px;
   width: 50px;
   height: 30px;
   font-size: 15px;
   border: none;
   cursor: pointer;
   font-family: 'B Roya Bold';
}
#help-button:hover {
   background-color: #218838;
}

#checkhelp {
   background-color: #28a745;
   border-radius: 5px 0 0 5px;
   width: 45px;
   height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-right: 0px;
   cursor: pointer;
}
#checkhelp input[type="checkbox"] {
   width: 15px;
   height: 15px;
   cursor: pointer;
   
}
**********************************************/




/**********************************************/
.autocomplete-container {
   display: flex;
   justify-content: center;
   align-items: center;
   position: fixed;
   top: 105px;
   left: 50%;
   transform: translateX(-50%);
   max-width: 400px;
   z-index: 899;
   background-color: transparent;
   padding: 0;
}

.form-group {
   position: relative;
   margin: 0 3px;
}

.autocomplete {
   width: 91px;
   height: 30px;
   font-size: 15px;
   font-family: 'B Roya Bold';
   border: 1px solid #ccc;
   text-align: center;
   padding: 0;
   color: rgb(0, 0, 0);
   direction: rtl;
}

.autocomplete::placeholder {
   color: rgb(219, 216, 216);
}

.suggestions-container {
   position: absolute;
   top: 100%;
   left: 0;
   right: 0;
   max-height: 350px;
   overflow-y: auto;
   background-color: white;
   z-index: 999;
   border: 1px solid #ccc;
   direction: rtl;
}

.suggestion-item {
   padding: 5px;
   cursor: pointer;
   width: 91px;
   padding: 4px;
   line-height: 15px;
   font-size: 14px;
   width: 100%;
}

.suggestion-item:hover {
   background-color: #f0f0f0;
}




















#results-frame {
   font-size: 14px;
   position: fixed;
   top: 140px;
   left: 50%;
   transform: translateX(-50%);
   width: 370px;
   height: 700px;
   background-color: white;
   border: 1px solid #ccc;
   font-family: 'B Roya Bold';
   border-radius: 5px;
   padding: 10px;
   padding-top: 40px;
   overflow-y: auto;
   z-index: 900;
}

#results-frame::after {
   content: "";
   display: block;
   height: 300px;
   visibility: hidden;
}

/****************یافته های جستجو**/

.result-item {
   padding: 10px;
   border-bottom: 1px solid #ddd;
   margin-bottom: 5px;
   cursor: pointer;
   transition: background-color 0.3s;
   padding: 1px;
   border-bottom: 1px solid #ddd;
   margin-bottom: 2px;
   direction: rtl;
   font-size: 13px;
}

.result-item:hover {
   background-color: #9FC5E8;
}

.result-item:last-child {
   border-bottom: none;
}

.blue-highlight {
   color: blue;
   font-weight: bold;
}

.red-highlight {
   color: red;
   font-weight: bold;
}

.result-item.selected {
   background-color: #FFE599;
}

#results-frame-pic {
   width: 367px;
   height: 650px;
   overflow-y: auto;
   padding: 10px;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: repeat(20, auto);
   gap: 10px;
   border: 1px solid #ccc;
   background-color: white;
   z-index: 1000;
   top: 138px;
   position: fixed;

}
/* فضای سفید انهای تصاویر */
#results-frame-pic::after {
   content: "";
   display: block;
   height: 350px;
   grid-column: 1 / -1;
 }


#results-frame-pic img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 8px;
   transition: transform 0.3s ease, opacity 0.3s ease;
   cursor: pointer;
}

#results-frame-pic img:hover {
   transform: scale(1.1);
   opacity: 0.8;
}

.image-wrapper {
   position: relative;
   display: inline-block;
   width: 100%;
   height: 100%;
}

.image-id {
   position: absolute;
   bottom: 0;
   width: 100%;
   text-align: center;
   font-size: 14px;
   padding: 1px 0;
   margin: 0;
   box-sizing: border-box;
   font-family: Arial, sans-serif;
   height: auto;
   line-height: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 0 0 8px 8px;
   overflow: hidden;
}

footer#footer {
   position: fixed;
   bottom: 0;
   width: 100%;
   height: 50px;
   background-color: #3496cd;
   z-index: 1000;
   text-align: center;
   color: white;
   line-height: 50px;
}

.button-footer {
   height: 25px;
   font-size: 14px;
   font-family: 'B Roya Bold', sans-serif;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   text-align: center;
   padding: 0;
   box-sizing: border-box;
   margin: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   line-height: 25px;
   background-color: #fff;
   width: 90px;
   color: blue;
}

.button-footer:hover {
   background-color: #064975;
   color: white;
}


.btn-footer-business {
   height: 25px;
   font-size: 14px;
   font-family: 'B Roya Bold', sans-serif;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   text-align: center;
   padding: 0;
   box-sizing: border-box;
   margin: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   line-height: 25px;
   background-color: #fff;
   width: 68px;
   color: blue;
}

.btn-footer-business:hover {
   background-color: #064975;
   color: white;
}



#new-container {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 395px;
   height: 90px;
   margin: 0 auto;
}

/* ********************************************** مدال نمایش  جزییات در ایندکس */
.myModal {
   display: none;
   position: fixed;
   bottom: 50px;
   left: 50%;
   transform: translateX(calc(-50% - 120px));
   width: 140px;
   height: 280px;
   background-color: #FFF;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   z-index: 3000;
   border-radius: 8px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   align-items: center;
   direction: rtl;
   text-align: center;
   font-size: 12px;
   color: #000;
   padding: 10px 5px;
   cursor: pointer;
   line-height: 1.4;
   gap: 8px;
   position: relative; /* برای قرار گرفتن دکمه بستن */
}

#mySpecialCloseBtn {
   position: absolute;
   top: 5px;
   right: 5px;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background-color: red;
   color: white;
   font-size: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   border: none;
   z-index: 4000;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

#mySpecialCloseBtn:hover {
   background-color: darkred;
}





















/* در موبایل موقعیت فقط از پایین تنظیم میشه تا انسجام حفظ شه */
@media (max-width: 600px) {
   .myModal {
      width: 140px;
      bottom: 60px;
   }
}


.modal-image {
   width: 110px;
   height: 9110px;
   object-fit: cover;
   border-radius: 6px;
   margin: 0 auto;       /* حذف فاصله اضافی پایین */
   display: block;
   border: 4px solid #fff;
}


.modal-small-image {
   width: 20px;
   height: 20px;
   position: absolute;
   top: 10px;
   right: 10px;
   border-radius: 50%;
   border: 2px solid #fff;
}

#search-count {
   margin: 10px;
   padding: 10px;
   background-color: #f5f5f5;
   border-radius: 5px;
   text-align: center;
}

.result-count {
   font-size: 18px;
   font-family: 'Arial', Arial, sans-serif;
   color: #3496cd;
   position: fixed;
   top: 20px;
   left: calc(50% - 150px);
   transform: translateX(-50%);
   z-index: 1000;
}

#text-frame-help-page {
   width: 100%;
   height: 100%;
   border: none;
   font-family: 'Arial', sans-serif;
   font-size: 16px;
   padding: 10px;
   box-sizing: border-box;
   background-color: #fff;
   color: #333;
   line-height: 1.5;
   overflow: hidden;
}

#Container-index {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 20px;
   border: 0px solid #ddd;
   max-width: 400px;
   margin: 0 auto;
}

#Container-index .image-frame {
   width: 200px;
   height: 200px;
   border-radius: 10px 10px 0 0;
   margin-bottom: 20px;
}

#Container-index .button {
   display: block;
   width: 100%;
   height: 20px;
   padding: 10px 20px;
   margin-bottom: 10px;
   font-size: 16px;
   font-family: 'B Roya Bold', sans-serif;
   color: white;
   background-color: #3496cd;
   border: none;
   border-radius: 5px;
   text-align: center;
   text-decoration: none;
   cursor: pointer;
   transition: background-color 0.3s ease;
}

#Container-index .button:hover {
   background-color: #148a30;
}

.custom-modal {
   display: none;
   position: fixed;
   z-index: 1000;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,0.4);
   box-shadow: 0 4px 8px rgba(0,0,0,0.5);
   justify-content: center;
   align-items: center;
   overflow: hidden;
}

.custom-modal-content {
   width: 310px;
   height: auto;
   background-color: #ffffff;
   border: 1px solid #888;
   border-radius: 10px;
   padding: 20px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
   text-align: center;
   position: relative;
   box-sizing: border-box;
}

.custom-close {
   position: absolute;
   top: 10px;
   right: 10px;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background-color: red;
   color: white;
   font-size: 20px;
   font-weight: bold;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   border: none;
   z-index: 1100;
}

.custom-close:hover {
   background-color: darkred;
}

.custom-modal-image {
   width: 100%;
   height: auto;
   border-bottom: 1px solid #ffffff;
   cursor: pointer;
   margin-bottom: 15px;
}



.custom-modal-content {
   background-color: #ffffff;
   margin: 15% auto;
   padding: 20px;
   border: 1px solid #888;
   border-radius: 8px;
   max-width: 400px;
}

.custom-close {
   color: rgb(255, 255, 255);
   float: right;
   font-size: 30px;
   font-weight: bold;
   cursor: pointer;
}

.custom-modal-image {
   width: 100%;
   height: auto;
   margin-bottom: 10px;
}

.input-container {
   display: flex;
   flex-direction: column;
   gap: 2px;
   padding: 15px;
   background-color: #ffffff;
   border-radius: 8px;
 /*  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);*/
   max-width: 400px;
   margin: auto;
}

.input-group {
   display: flex;
   align-items: center;
   justify-content: center;
}

.custom-input {
   font-family: 'Vazirmatn-Regular';
   width: 150px;
   height: 30px;
   padding: 0;
   border: 1px solid #ccc;
   border-radius: 5px;
   font-size: 16px;
   text-align: center;
   margin: 0;
}

.custom-modal-button {
   padding: 0 15px;
   background-color: #3496cd;
   color: white;
   border: none;
   border-radius: 5px;
   font-size: 16px;
   font-weight: bold;
   cursor: pointer;
   height: 30px;
   margin-left: 10px;
}

#message-container {
   display: none;
   padding: 5px 0;
   font-size: 12px;
   margin-top: 10px;
   color: blue;
   display: none;
   text-align: center;
}

.message {
   margin-top: 10px;
   font-size: 13px;
}

.login-modal {
   display: none;
   position: fixed;
   z-index: 1000;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,0.4);
   box-shadow: 0 4px 8px rgba(0,0,0,0.5);
   justify-content: center;
   align-items: center;
   overflow: hidden;
}

.login-modal-content {
   width: 310px;
   height: auto;
   background-color: #ffffff;
   border: 1px solid #888;
   border-radius: 10px;
   padding: 20px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
   text-align: center;
   position: relative;
   box-sizing: border-box;
}

.login-close {
   position: absolute;
   top: 10px;
   right: 10px;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background-color: red;
   color: white;
   font-size: 30px;
   font-weight: bold;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   border: none;
   z-index: 1100;
}

.login-close:hover {
   background-color: darkred;
}

.login-modal-image {
   width: 100%;
   height: auto;
   border-bottom: 1px solid #ccc;
   cursor: pointer;
   margin-bottom: 15px;
}

.login-input-container {
   display: flex;
   flex-direction: column;
   gap: 2px;
   padding: 15px;
   background-color: #f9f9f9;
   border-radius: 8px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   max-width: 400px;
   margin: auto;
}

.login-input-group {
   display: flex;
   align-items: center;
   justify-content: center;
}

input[type="tel"] {
   width: 150px;
   height: 30px;
   padding: 0;
   border: 1px solid #ccc;
   border-radius: 5px;
   font-size: 16px;
   margin: 0;
   text-align: center;
}

#login-verify-code[type="text"] {
   width: 150px;
   height: 30px;
   padding: 0;
   border: 1px solid #ccc;
   border-radius: 5px;
   font-size: 16px;
   margin: 0;
   text-align: center;
}

#submit-button {
   padding: 0 15px;
   background-color: #3496cd;
   color: white;
   border: none;
   border-radius: 5px;
   font-size: 16px;
   font-weight: bold;
   cursor: pointer;
   height: 30px;
   margin-left: 10px;
   opacity: 0.5;
   cursor: not-allowed;
}

#login-submit-button {
   padding: 0 15px;
   background-color: #3496cd;
   color: white;
   border: none;
   border-radius: 5px;
   font-size: 16px;
   font-weight: bold;
   cursor: pointer;
   height: 30px;
   margin-left: 10px;
}

#login-verify-send {
   padding: 0 15px;
   background-color: #3496cd;
   color: white;
   border: none;
   border-radius: 5px;
   font-size: 16px;
   font-weight: bold;
   cursor: pointer;
   height: 30px;
   margin-left: 10px;
}

.page {
   font-family: Arial, sans-serif;
   text-align: center;
   margin-top: 50px;
   background-color: #f0f0f0;
   padding: 20px;
}

.form {
   width: 300px;
   margin: auto;
   padding: 20px;
   border-radius: 10px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   background-color: #ffffff;
}

.form-input {
   width: 90%;
   padding: 8px;
   margin: 10px 0;
   border: 1px solid #ccc;
   border-radius: 5px;
}

.form-button {
   background-color: #007BFF;
   color: white;
   padding: 10px;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   width: 100%;
}

.captcha {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 10px;
}

.captcha-display {
   font-size: 20px;
   font-weight: bold;
   background-color: #ddd;
   display: inline-block;
   padding: 5px 10px;
   border-radius: 5px;
   letter-spacing: 3px;
   user-select: none;
}

.captcha-refresh {
   margin-left: 10px;
   cursor: pointer;
   background-color: transparent;
   border: none;
   font-size: 18px;
}

#captchaInput {
   font-size: 18px;
}

.captcha-display {
   font-size: 20px;
   font-weight: bold;
   background-color: white;
   display: inline-block;
   padding: 5px 10px;
   border-radius: 5px;
   letter-spacing: -1px;
   user-select: none;
}

#custom-background-image,
#custom-overlay-image,
#custom-interactive-map {
   position: absolute;
   top: -10px;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

#custom-interactive-map {
   z-index: 1;
   pointer-events: none;
}

#results-frame img {
   position: absolute;
   top: 40%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 230px;
   height: 230px;
}

.column35-overlay {
   position: absolute;
   top: 8%;
   left: 13%;
   line-height: 1;
   transform: translate(-40%, -50%);
   background-color: #3496cd;
   color: white;
   padding: 1px 3px;
   border-radius: 3px;
   font-size: 11px;
   font-weight: normal;
}

.image-wrapper {
   position: relative;
   display: inline-block;
}

.column8-overlay {
   position: absolute;
   top: 0px;
   left: 65%;
   transform: translateX(-50%);
   background-color: rgba(0, 0, 0, 0.7);
   color: white;
   padding: 2px 4px;
   font-size: 11px;
   line-height: 1;
   border-radius: 3px;
   z-index: 10;
   display: flex;
   align-items: center;
   gap: 5px;
}

.column8-overlay i {
   font-size: 12px;
}





.modal-help {
   display: none;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 300px;
   height: 512px; 
   background-color: rgba(0, 0, 0, 0.8);
   justify-content: center;
   align-items: center;
   z-index: 2100;
}

.modal-help img {
   width: 100%;
   height: 100%;
   object-fit: cover; 
   cursor: pointer;
}


/*
.modal-help2 {
   display: none;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 300px;
   height: 512px; 
   background-color: rgba(0, 0, 0, 0.8);
   justify-content: center;
   align-items: center;
   z-index: 10000 !important;
}

.modal-help2 img {
   width: 100%;
   height: 100%;
   object-fit: cover; 
   cursor: pointer;
}*/


/*****************************/
#modal-help2 {
   background-color: transparent;
   justify-content: center;
   display: flex;
   z-index: 2000;
}

#modal-content {
   background: #3496cd;
   padding: 20px;
   padding-top: 0px;
   border-radius: 8px;
   width: 345px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   text-align: center;
   overflow-y: auto;
   max-height: 500px;
   height: 600px; 
   position: absolute;
   bottom: 50px;
   left: 50%;
   transform: translateX(-50%);
   transition: opacity 0.6s ease, transform 0.6s ease, height 0.6s ease;
   font-family: 'B Roya Bold';
}

#close-help2 {
   position: fixed;
   bottom: 208px; 
   left: 50%; 
   transform: translateX(-50%); 
   background-color: red;
   border: none;
   border-radius: 50%;
   width: 35px;
   height: 35px;
   font-size: 30px;
   display: none; 
   justify-content: center;
   align-items: center;
   cursor: pointer;
   z-index: 9999;
   color: white;
   font-family: 'B Roya Bold';
}

#close-help2:hover {
   background-color: darkred;
}
/****************************/



.search-sample, .search-sample-text {
   cursor: pointer;
   padding: 2px;
   font-size: 14px;
   border: none;
   background-color: #f1f1f1;
   border-radius: 5px;
   transition: background-color 0.3s ease;
   font-family:  'Vazirmatn', sans-serif;
   font-weight:400;
   height: 18px;
   display: flex;
   align-items: center;
}

.search-sample:hover, .search-sample-text:hover {
   background-color: #9fc5e8;
}

.sample-pair {
   display: flex;
   gap: 3px;
}
 
#sample-phrases .search-sample {
   flex: 0 0 40%;
}
 
#sample-phrases .mini-sample {
   flex: 0 0 15%;
   padding: 2px;
   font-size: 14px;
   border: none;
   background-color: #e0e0e0;
   border-radius: 5px;
   cursor: pointer;
   font-family: 'B Roya Bold';
   transition: background-color 0.3s ease;
   height: 20px;
   display: flex;
   align-items: center;
}
 
#sample-phrases .mini-sample:hover {
   background-color: #ccc;
}



       /*********************************/
       

       .info-modal {
         background-color: rgba(0, 0, 0, 0.8);
         justify-content: center;
         display: flex;
         z-index: 2000;
         position: fixed;
         width: 100%;
         height: 100%;
         top: 0;
         left: 0;
       }
       
       #info-modal-content {
         background: #fdfdfc;
         padding: 20px 20px 10px;
         border-radius: 8px;
         width: 345px;
         max-height: 525px;
         height: 450px;
         box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
         text-align: center;
         overflow-y: auto;

         position: absolute;
         bottom: 50px;
         left: 50%;
         transform: translateX(-50%);
         opacity: 0;
         transition: opacity 0.6s ease, transform 0.6s ease;
       }
       
       #close-info-modal {
         position: fixed;
         bottom: 515px;
         left: 50%;
         transform: translateX(125px);
         background-color: red;
         border: none;
         border-radius: 50%;
         width: 35px;
         height: 35px;
         font-size: 30px;
         display: flex;
         justify-content: center;
         align-items: center;
         cursor: pointer;
         z-index: 9999;
         color: white;
       }
       
       #close-info-modal:hover {
         background-color: darkred;
       }
       .info-line-R {
         color: red;
         font-size: 13.5px;
         direction: rtl;
         text-align: justify;
         margin: 0;
         padding: 0;
       }
       
       .info-line-B {
         color: black;
         font-size: 13px;
         direction: rtl;
         text-align: justify;
         margin: 0;
         padding: 0;
       }
       
       .info-line-G {
         color: green;
         font-size: 13px;
         direction: rtl;
         text-align: justify;
         margin: 0;
         padding: 0;
       }
 
/*//////////////////////////*/

.button-container {
    width: 390px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 108px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 970;
    background-color: #f9f9f9;
    padding: 5px 0;
    border-radius: 5px;
    direction: rtl;
    box-sizing: border-box;
}

.nav-btn {
    width: 96px;
    height: 25px;
    font-size: 14px;
    border: none;
    cursor: pointer;
    font-family: 'B Roya Bold', Arial, sans-serif;
    background-color: #d3d6d8;
    color: rgb(88, 87, 87);
    border-radius: 5px;
    margin: 0;
    box-sizing: border-box;
    transition: background-color 0.3s, color 0.3s;
}

.nav-btn:nth-child(1),
.nav-btn:nth-child(2) {
    margin-left: 2px;
}

.nav-btn:nth-child(3),
.nav-btn:nth-child(4) {
    margin-right: 2px;
}

.nav-btn:hover {
    background-color: #3496cd;
    color: white;
}

.new-button-container {
    width: 390px;
    display: none;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 137px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 960;
    background-color: #f9f9f9;
    padding: 5px 0;
    border-radius: 5px;
    direction: rtl;
    box-sizing: border-box;
    opacity: 0;
    transform: translate(-50%, -20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.new-button-container.visible {
    display: flex;
    opacity: 1;
    transform: translate(-50%, 0);
}

.new-nav-btn {
    width: 96px;
    height: 25px;
    font-size: 14px;
    border: none;
    cursor: pointer;
    font-family: 'B Roya Bold', Arial, sans-serif;
    background-color: #b9bbbd;
    color: black;
    border-radius: 5px;
    margin: 0;
    box-sizing: border-box;
    transition: background-color 0.3s, color 0.3s;
}

.new-nav-btn:nth-child(3),
.new-nav-btn:nth-child(4),
.new-nav-btn:nth-child(5) {
    margin-right: 2px;
}

.split-btn-container {
    display: flex;
    width: 96px;
    margin-left: 2px;
}

.new-nav-btn.split-btn {
    width: 47px;
    margin-right: 2px;
}

.new-nav-btn.split-btn:last-child {
    margin-right: 0;
}

.new-nav-btn:hover {
    background-color: BLACK;
    color: white;
}

 /*******************برای دسترس پذیریه صفحه خوانها********/
 .sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
 }
  /***************************/
/**نمایش فارسی شغل اصلی رو تصویر یافته***/
.column92-overlay {
   position: absolute;
   bottom: 15px; /* ۲۰ پیکسل بالاتر از پایین */
   left: 0;
   width: 100%;
   text-align: center;
   background-color: rgba(0,0,0,0.4);
   color: white;
   padding: 0px 0;
   font-size: 8px;
   pointer-events: none;
   user-select: none;
   box-sizing: border-box;
}
/*********************************/
.modal-container {
   width: 350px;
   height: 800px;
   background-color: white;
   position: absolute;
   top: 175px; 
   left: 50%;
   transform: translateX(-50%); 
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
   padding: 10px;
   z-index: 1000;
   cursor: pointer; 
 }

.modal-container img {
   max-width: 60%;
   max-height: 60%;
   object-fit: contain;
   margin-top: 5px; 
 }

.modal-container p {
   width: 100%;          
   text-align: center;     
   font-size: 14px;       
   margin: 2px 0;         
   box-sizing: border-box;
   padding: 0 5px;        
}



#chatModal,
#chatModal * {
    font-family: 'Vazirmatn', Arial, sans-serif !important;
}

#loginModal,
#loginModal * {
    font-family: 'Vazirmatn', Arial, sans-serif !important;
}