/* wwwroot/css/site.css */
@font-face {
    font-family: Vazir;
    src: url('../Fonts/vazir-font-v16.1.0/Vazir.eot');
    src: url('../Fonts/vazir-font-v16.1.0/Vazir.eot?#iefix') format('embedded-opentype'), url('../Fonts/vazir-font-v16.1.0/Vazir.woff') format('woff'), url('../Fonts/vazir-font-v16.1.0/Vazir.ttf') format('truetype');
    font-weight: normal;
}

@font-face {
    font-family: Vazir;
    src: url('../Fonts/vazir-font-v16.1.0/Vazir-Bold.eot');
    src: url('../Fonts/vazir-font-v16.1.0/Vazir-Bold.eot?#iefix') format('embedded-opentype'), url('../Fonts/vazir-font-v16.1.0/Vazir-Bold.woff') format('woff'), url('../Fonts/vazir-font-v16.1.0/Vazir-Bold.ttf') format('truetype');
    font-weight: bold;
}

@font-face {
    font-family: Vazir;
    src: url('../Fonts/vazir-font-v16.1.0/Vazir-Light.eot');
    src: url('../Fonts/vazir-font-v16.1.0/Vazir-Light.eot?#iefix') format('embedded-opentype'), url('../Fonts/vazir-font-v16.1.0/Vazir-Light.woff') format('woff'), url('../Fonts/vazir-font-v16.1.0/Vazir-Light.ttf') format('truetype');
    font-weight: 300;
}

html, body {
    font-family: Vazir !important;
    overflow-x: hidden !important;
}
/* RTL Support */
.rtl {
    direction: rtl;
    text-align: right;
}

.ltr {
    direction: ltr;
    text-align: left;
}

/* RTL fixes for MudBlazor */
/*[dir="rtl"] .mud-icon-button,
[dir="rtl"] .mud-icon-root {
    transform: scaleX(-1);
}

.rtl-fix .mud-icon-button,
.rtl-fix .mud-icon-root {
    transform: scaleX(1) !important;
}
*/
.rtl .mud-navmenu .mud-nav-link {
    padding-right: 16px;
    padding-left: 8px;
}

.rtl .mud-nav-link .mud-nav-link-icon {
    margin-left: 12px;
    margin-right: 0;
}

/* Custom styles for select boxes */
.mud-select-input {
    font-size: 16px !important; /* Prevent zoom on mobile */
}

.iran-provinces-select {
    fill: #fbaf33 !important;
}

.border-radius-16 {
    border-radius: 16px !important;
    border: 1px;
}

.padding-top-64 {
    padding-top: 64px
}

.padding-top-24 {
    padding-top: 24px;
}

.padding-top-12 {
    padding-top: 12px;
}

.padding-top-16 {
    padding-top: 16px;
}

.padding-top-6 {
    padding-top: 6px;
}

.padding-top-bottom-6 {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.padding-top-80 {
    padding-top: 80px;
}

.padding-bottom-12 {
    padding-bottom: 12px;
}

.padding-right-12 {
    padding-right: 12px;
}

.padding-right-19 {
    padding-right: 19px;
}

.padding-right-32 {
    padding-right: 32px;
}

.padding-top-77 {
    padding-top: 77px
}

.margin-top-40 {
    margin-top: 40px
}

.margin-8 {
    margin: 8px !important;
}

.margin-top-16 {
    margin-top: 16px !important;
}

.margin-bottom-16 {
    margin-bottom: 16px !important;
}

.margin-bottom-22 {
    margin-bottom: 22px !important;
}

.margin-bottom-40 {
    margin-bottom: 40px
}

.padding-left-30 {
    padding-left: 30px !important;
}

.padding-right-30 {
    padding-right: 30px !important;
}

.padding-left-0 {
    padding-left: 0px !important;
}

.padding-top-0 {
    padding-top: 0px !important;
}

.custom-rounded .mud-input-outlined-border {
    border-radius: 16px !important;
}

.text-align-center {
    text-align: center !important;
}

.padding-top-10 {
    padding-bottom: 10px !important;
}

.padding-24 {
    padding: 24px !important;
}

.line-height-1-6 {
    line-height: 1.6;
}

.light-grey-lighter {
    background-color: #F8F8F8 !important;
    border-radius: 4px !important;
}

.change-password-component {
    height: 52px;
    opacity: 1;
    border-radius: 8px;
    padding: 20px 20px 20px 20px !important;
    background-color: #fbfbfb;
}

.operator-img {
    filter: grayscale(100%);
    opacity: 0.6;
    transition: filter 0.3s, opacity 0.3s;
    width: 39px;
    height: 41px;
}

.operator-img-active {
    width: 39px;
    height: 41px;
    background-color: #F3F3F3;
}

.operator-mudRadio {
    width: 72px;
    height: 72px;
    min-width: 71px;
    justify-content: space-between;
    padding: 16px 16px 16px 16px;
}

.operator-mudRadioactive {
    width: 72px;
    height: 72px;
    min-width: 71px;
    justify-content: space-between;
    border-radius: 8px;
    padding: 16px 16px 16px 16px;
    background: #F3F3F3;
}

.custom-upload-excel-btn-fff {
    height: 52px;
    gap: 8px;
    border-radius: 12px;
    padding-top: 12px;
    padding-right: 24px;
    padding-bottom: 12px;
    padding-left: 24px;
    background: var(--Color-Primary-main, #fff) !important;
    border: 1px solid var(--Color-Primary-main, #DC8904);
    color: #DC8904 !important;
}

.color-DC8904 {
    color: #DC8904 !important;
}

.color-FBAF33 {
    color: #FBAF33 !important;
}

.color-6E7072 {
    color: #6E7072 !important;
}

.border-bottom {
    border-bottom: 1px solid #ABABAB;
}

.change-password-drawer {
    gap: 48px;
    opacity: 1;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    /*    padding-top: 40px;*/
    padding-right: 16px;
    /*    padding-bottom: 40px;*/
    padding-left: 16px;
}

.custom-btn-delete-fff {
    height: 52px;
    padding-top: 12px;
    padding-right: 24px;
    padding-bottom: 12px;
    padding-left: 24px;
    gap: 8px;
    opacity: 1;
    border-radius: 12px;
    background: var(--Color-Error-main, #fff);
    color: #DF2040 !important;
    border: 1px solid var(--Color-Error-main, #DF2040)
}

.custom-btn-delete {
    height: 52px;
    padding-top: 12px;
    padding-right: 24px;
    padding-bottom: 12px;
    padding-left: 24px;
    gap: 8px;
    opacity: 1;
    border-radius: 12px;
    background: var(--Color-Error-main, #DF2040);
    color: #fff !important;
}

.order-status-pending {
    min-width: 20px;
    gap: 8px;
    opacity: 1;
    border-radius: 24px;
    padding-top: 4px;
    padding-right: 8px;
    padding-bottom: 4px;
    padding-left: 8px;
    background: var(--Warning-Background, #FFF6E5);
    color: var(--Warning-Dark, #F4A400);
}

.order-status-in-delivery-process {
    min-width: 20px;
    gap: 8px;
    opacity: 1;
    border-radius: 24px;
    padding-top: 4px;
    padding-right: 8px;
    padding-bottom: 4px;
    padding-left: 8px;
    background: var(--Info-Background, #E5E5E5);
    color: var(--Info-mian, #242424);
}

.order-status-pending-delivery-process {
    min-width: 20px;
    gap: 8px;
    opacity: 1;
    border-radius: 24px;
    padding-top: 4px;
    padding-right: 8px;
    padding-bottom: 4px;
    padding-left: 8px;
    background: var(--Info-Background, #E5F2FF);
    color: var(--Info-mian, #007BFF);
}

.order-status-pending-pickup {
    min-width: 20px;
    gap: 8px;
    opacity: 1;
    border-radius: 24px;
    padding-top: 4px;
    padding-right: 8px;
    padding-bottom: 4px;
    padding-left: 8px;
    background: var(--Warning-Background, #FFF6E5);
    color: var(--Warning-Dark, #ae7c16);
}

.order-status-completed {
    min-width: 20px;
    gap: 8px;
    opacity: 1;
    border-radius: 24px;
    padding-top: 4px;
    padding-right: 8px;
    padding-bottom: 4px;
    padding-left: 8px;
    background: var(--Secondary-Background-tonal-button, #EBF5E9);
    color: var(--Secondary-main, #4A853D);
}

.order-status-cancelled {
    min-width: 20px;
    gap: 8px;
    opacity: 1;
    border-radius: 24px;
    padding-top: 4px;
    padding-right: 8px;
    padding-bottom: 4px;
    padding-left: 8px;
    background: var(--Error-background, #FFE5E5);
    color: var(--Error-main, #DF2040);
}

.order-status-unfinished {
    min-width: 20px;
    gap: 8px;
    opacity: 1;
    border-radius: 24px;
    padding-top: 4px;
    padding-right: 8px;
    padding-bottom: 4px;
    padding-left: 8px;
    background: var(--Info-Background, #E5F2FF);
    color: var(--Info-mian, #00caff);
}

.info-box {
    gap: 24px;
    opacity: 1;
    border-radius: 8px;
    padding-top: 8px;
    padding-right: 16px;
    padding-bottom: 8px;
    padding-left: 16px;
    background: var(--Info-Background, #E5F2FF);
}

.background-EAEBEB33 {
    background: #EAEBEB33;
    border-radius: 16px;
    padding-top: 24px;
    padding-right: 32px;
    padding-bottom: 16px;
    padding-left: 32px;
    gap: 32px;
    opacity: 1;
}

.custom-btn-1E1E1F-2 {
    border-radius: 12px !important;
    padding-top: 12px;
    padding-right: 24px;
    padding-bottom: 12px;
    padding-left: 24px;
    border: 1px solid var(--Color-Secondary-1000, #1E1E1F);
    color: #1E1E1F !important;
    background: #EAEBEB33;
}

.custom-btn-1E1E1F {
    border-radius: 12px !important;
    padding-top: 12px;
    padding-right: 24px;
    padding-bottom: 12px;
    padding-left: 24px;
    border: 1px solid var(--Color-Secondary-1000, #1E1E1F);
    color: #1E1E1F !important;
}

.custom-btn-FBAF33 {
    height: 52px;
    gap: 8px;
    border-radius: 120px !important;
    padding-top: 12px;
    padding-right: 24px;
    padding-bottom: 12px;
    padding-left: 24px;
    background: var(--Color-Primary-main, #fff) !important;
    border: 1px solid var(--Color-Primary-main, #FBAF33);
    color: #000 !important;
}

.custom-login-btn-fff {
    height: 52px;
    gap: 8px;
    border-radius: 12px;
    padding-top: 12px;
    padding-right: 24px;
    padding-bottom: 12px;
    padding-left: 24px;
    background: var(--Color-Primary-main, #fff) !important;
    border: 1px solid var(--Color-Primary-main, #DC8904);
    color: #DC8904 !important;
}

.custom-login-btn {
    height: 52px;
    gap: 8px;
    border-radius: 12px;
    padding-top: 12px;
    padding-right: 24px;
    padding-bottom: 12px;
    padding-left: 24px;
    background: var(--Color-Primary-main, #FBAF33) !important;
    color: #000 !important;
}

.mud-btn-warning {
    height: 52px;
    gap: 8px;
    border-radius: 12px;
    padding-top: 12px;
    padding-right: 24px;
    padding-bottom: 12px;
    padding-left: 24px;
    background: var(--Color-Primary-main, #FBAF33) !important;
    color: #000 !important;
}

.mud-btn-warning-2 {
    height: 52px;
    gap: 8px;
    border-radius: 12px;
    padding-top: 12px;
    padding-right: 24px;
    padding-bottom: 12px;
    padding-left: 24px;
    background: var(--Color-Primary-main, #FBAF33) !important;
    color: #000 !important;
}

.text-color-FF9800 {
    color: #FF9800 !important;
}

.mud-btn-default {
    height: 52px;
    gap: 8px;
    border-radius: 12px;
    padding-top: 12px;
    padding-right: 24px;
    padding-bottom: 12px;
    padding-left: 24px;
    color: #000 !important;
}

.text-align-justify {
    text-align: justify;
}

.postal-package-image {
    display: flex !important;
}

.justify-content-center {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.align-items-center {
    display: flex !important;
    align-items: center !important;
}

.width-95-percentage {
    width: 95%;
}

.profile-span-box {
    max-width: 230px;
    opacity: 1;
    gap: 10px;
    border-radius: 8px;
    padding: 24px;
    margin-left: 6px;
    background: #EDEDEDB2;
    color: var(--Surface-500, #808080);
    justify-content: center !important;
    align-items: center !important;
}

.login-image-background {
    width: 655px;
    height: 928px;
    border-radius: 16px;
    background: conic-gradient(from 51.46deg at 33.55% 52.26%, #145A91 -85.69deg, #145A91 0.8deg, #EC9404 0.89deg, #145A91 274.31deg, #145A91 360.8deg);
}

.custom-btn {
    width: 100%;
    height: 52px;
    gap: 8px;
    padding-top: 12px;
    padding-right: 24px;
    padding-bottom: 12px;
    padding-left: 24px;
    border-radius: 12px;
    background: var(--Color-Primary-main, #FBAF33) !important;
    color: #000 !important;
}

.custom-btn-2 {
    height: 52px;
    gap: 8px;
    padding-top: 12px;
    padding-right: 24px;
    padding-bottom: 12px;
    padding-left: 24px;
    border-radius: 12px;
    background: var(--Color-Primary-main, #FBAF33) !important;
    color: #000 !important;
}

.custom-btn-3 {
    height: 52px;
    gap: 8px;
    padding-top: 12px;
    padding-right: 24px;
    padding-bottom: 12px;
    padding-left: 24px;
    border-radius: 12px;
    background: var(--Color-Primary-main, #FBAF33) !important;
    color: #000 !important;
}

.custom-btn-2-fff {
    height: 52px;
    gap: 8px;
    padding-top: 12px;
    padding-right: 24px;
    padding-bottom: 12px;
    padding-left: 24px;
    border-radius: 12px;
    background: var(--Color-Primary-main, #fff) !important;
    border: 1px solid var(--Color-Primary-main, #FBAF33);
    color: #FBAF33 !important;
}

.dialog-workshop-select-city {
    border-radius: 6px;
    border: 1px solid var(--Color-Primary-main, #cecece);
    margin-bottom: 10px;
    padding-right: 5px;
    padding-top: 0px !important;
    max-height: 400px;
    overflow: auto;
}

.dialog-workshop-selected-city {
    border-radius: 6px;
    border: 1px solid var(--Color-Primary-main, #cecece);
    margin-bottom: 10px;
    padding-right: 5px;
    padding-top: 0px !important;
    max-height: 200px;
    overflow: auto;
}

.dialog-workshop-mudRadio {
    border-radius: 6px;
    border: 1px solid var(--Color-Primary-main, #cecece);
    margin-bottom: 10px;
    padding-right: 5px;
    padding-top: 0px !important;
}

.dialog-workshop-mudRadio-active {
    border-radius: 6px;
    border: 1px solid var(--Color-Primary-main, #FBAF33);
    margin-bottom: 10px;
    padding-right: 5px;
    padding-top: 0px !important;
}

.step-component {
    display: flex;
}

.step-component-tablet {
    display: none;
}

.postpackage-button {
    justify-content: left !important;
}


.receiverType-mudRadio {
    border-radius: 12px;
    border: 1px solid var(--Color-Primary-main, #cecece);
    margin: 10px;
}

.receiverType-mudRadioactive {
    border-radius: 12px;
    border: 1px solid var(--Color-Primary-main, #EC9404);
    margin: 10px;
}

.profileType-mudRadio {
    border-radius: 12px;
    border: 1px solid var(--Color-Primary-main, #cecece);
    margin: 10px;
    box-shadow: 1px 0px 8px gray;
}

.profileType-mudRadioactive {
    border-radius: 12px;
    border: 1px solid var(--Color-Primary-main, #EC9404);
    margin: 10px;
    box-shadow: 1px 0px 8px #EC9404;
}

.order-status-mudRadio {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-width: 100px;
    border-radius: 24px;
    padding-top: 4px;
    padding-right: 8px;
    padding-bottom: 4px;
    padding-left: 8px;
    gap: 8px;
    opacity: 1;
    border-width: 1px;
    background: var(--Surface-50, #FFFFFF);
    border: 1px solid var(--Surface-300, #CCCCCC);
    margin: 5px;
    height: 35px;
}

.order-status-mudRadioactive {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-width: 100px;
    border-radius: 24px;
    padding-top: 4px;
    padding-right: 8px;
    padding-bottom: 4px;
    padding-left: 8px;
    gap: 8px;
    opacity: 1;
    border-width: 1px;
    background: var(--Color-Primary-200, #FFF8EC);
    border: 1px solid var(--Color-Primary-900, #DC8904);
    margin: 5px;
    height: 35px;
}


.postpackage-mudRadio {
    border-radius: 12px;
    border: 1px solid var(--Color-Primary-main, #cecece);
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 10px;
}

.postpackage-mudRadioactive {
    border-radius: 12px;
    border: 1px solid var(--Color-Primary-main, #EC9404);
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 10px;
}


.workshop-mudRadio {
    border-radius: 12px;
    border: 1px solid var(--Color-Primary-main, #cecece);
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.workshop-mudRadioactive {
    border-radius: 12px;
    border: 1px solid var(--Color-Primary-main, #EC9404);
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background-color: #FBAF33;
}

.complete-profile-mudRadio {
    border-radius: 12px;
    border: 1px solid var(--Color-Primary-main, #cecece);
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.complete-profile-mudRadioactive {
    border-radius: 12px;
    border: 1px solid var(--Color-Primary-main, #EC9404);
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background-color: #FBAF33;
}

.custom-btn-2 {
    height: 52px;
    gap: 8px;
    padding-top: 12px;
    padding-right: 24px;
    padding-bottom: 12px;
    padding-left: 24px;
    border-radius: 12px;
    background: var(--Color-Primary-main, #FBAF33) !important;
    color: #000 !important;
}

.custom-btn-fff-2 {
    height: 52px;
    gap: 8px;
    padding-top: 12px;
    padding-right: 24px;
    padding-bottom: 12px;
    padding-left: 24px;
    border-radius: 12px;
    background: var(--Color-Primary-main, #fff) !important;
    border: 1px solid var(--Color-Primary-main, #FBAF33);
    color: var(--Color-Primary-main, #FBAF33);
}

.custom-btn-DF2040 {
    height: 52px;
    gap: 8px;
    padding-top: 12px;
    padding-right: 24px;
    padding-bottom: 12px;
    padding-left: 24px;
    border-radius: 12px;
    background: var(--Color-Primary-main, #fff) !important;
    border: 1px solid var(--Color-Error-main, #DF2040);
    color: var(--Color-Error-main, #DF2040);
}


.custom-footer-btn {
    width: 100%;
    height: 52px;
    gap: 8px;
    padding-top: 12px;
    padding-right: 24px;
    padding-bottom: 12px;
    padding-left: 24px;
    border-radius: 12px;
    background: var(--Color-Primary-main, #FBAF33) !important;
    color: #000 !important;
}

.custom-footer-input {
    border-radius: 16px !important;
    background: var(--Color-Surface-100, #FDFDFD);
    color: #000;
}

    .custom-footer-input .mud-input-outlined-border {
        height: 48px;
        padding-right: 12px;
        border-radius: 16px !important;
        border-width: 1px;
        border: 1px solid var(--Color-Surface-400, #ABABAB);
    }


.customOtpInput {
    width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 4px !important;
    justify-content: space-between !important;
    padding: 12px !important;
    margin-right: 10px !important;
    margin-left: 10px !important;
    border-width: 1px !important;
    background: var(--Surface-50, #FFFFFF) !important;
    border: 1px solid var(--Color-Surface-400, #ABABAB) !important;
    text-align: center !important;
    text-align: center !important;
}

.visibility-hidden {
    visibility: hidden;
}

.mud-app-bar {
    height: 110.3622055053711px;
    justify-content: space-between;
    padding-top: 24px;
    padding-right: 70px;
    padding-bottom: 24px;
    padding-left: 70px;
    background: #FFFFFF;
}

.mud-app-bar-responsive {
    height: 72px;
    justify-content: space-between;
    padding: 16px;
    background: #FFFFFF;
}

.mud-icon-menu {
    gap: 8px;
    border-radius: 8px;
    padding-top: 9px !important;
    padding-right: 12px !important;
    padding-bottom: 9px !important;
    padding-left: 12px !important;
    border-width: 1px;
    border: 1px solid var(--Color-Secondary-1000, #1E1E1F);
    color: #1E1E1F !important;
}

.mud-app-bar-login-nav {
    gap: 8px;
    border-radius: 8px;
    background: var(--Color-Secondary-900, #3C3D3E);
    color: #fff !important;
}

.mud-app-bar-login-btn {
    gap: 8px;
    border-radius: 8px;
    padding-top: 9px;
    padding-right: 12px;
    padding-bottom: 9px;
    padding-left: 12px;
    background: var(--Color-Secondary-900, #3C3D3E);
    color: #fff;
}

.marginauto {
    margin: auto;
}

.mud-link-arrow-back {
    color: #000 !important;
}

.mud-link-mud-app-bar {
    gap: 8px;
    border-radius: 12px;
    padding-top: 12px;
    padding-right: 12px;
    padding-bottom: 12px;
    padding-left: 12px;
    color: #000 !important;
}

.background-color-EAEBEB33 {
    background: #EAEBEB78;
    min-height: 361px;
    border-radius: 16px;
    gap: 40px;
    opacity: 1;
    padding: 24px !important;
}

.mud-item-file-upload {
    margin-top: 16px;
    height: 199px;
    border-radius: 8px;
    padding-top: 56px;
    padding-bottom: 56px;
    gap: 10px;
    opacity: 1;
    background: #FFFFFF;
}

.color-6F6C90 {
    color: #6F6C90;
}

.index-baner-mud-button {
    width: 163px;
    height: 49px;
    gap: 8px;
    border-radius: 12px;
    padding-top: 12px;
    padding-right: 24px;
    padding-bottom: 12px;
    padding-left: 24px;
    background: var(--Color-Secondary-900, #3C3D3E);
    color: #fff;
}

.index-baner-mud-button-en {
    width: 200px;
    height: 49px;
    gap: 8px;
    border-radius: 12px;
    padding-top: 12px;
    padding-right: 24px;
    padding-bottom: 12px;
    padding-left: 24px;
    background: var(--Color-Secondary-900, #3C3D3E);
    color: #fff;
}

.about-us-yaa-post {
    background-color: var(--Color-Warning-light, #FFDAB9);
    background-image: url("../images/pattern/YaaPost-Pattern-528px.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 190px;
    background-position: right;
    background-blend-mode: soft-light;
}


.index-what-direct-mail-baner {
    height: 456px;
    top: 3px;
    background-image: url("../images/baner/Whatisdirectmail.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.index-what-direct-mail-baner-en {
    height: 456px;
    top: 3px;
    background-image: url("../images/baner/Whatisdirectmail-en.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.about-us-baner {
    top: 3px;
}

.about-us-baner-mud-grid {
    padding-top: 85px;
    padding-right: 109px;
}

.contact-us-baner-mud-grid {
    padding-top: 85px;
    padding-right: 109px;
}

.contact-us-grid {
    border-radius: 8px;
    border-width: 4px;
    padding-right: 16px;
    border: 4px solid var(--Color-Primary-400, #FDD89B)
}

.contact-us-social-network {
    gap: 10px;
    border-radius: 8px;
    padding: 16px;
    background: linear-gradient(87.41deg, #F2F3E2 -28.48%, #FCF3E1 107.4%);
}

.contact-us-consulting {
    gap: 1px;
    border-radius: 16px;
    border-width: 1px;
    padding: 16px;
    background: #FFFFFF;
    border: 1px solid var(--Color-Surface-200, #E5E5E5)
}

.index-baner-en {
    height: 590px;
    top: 3px;
    background-image: url("../images/baner/desktop-en.svg");
    background-size: cover;
    background-repeat: no-repeat;
}

    .index-baner-en .mud-grid {
        padding-top: 85px;
        padding-right: 109px;
    }

.index-baner {
    height: 590px;
    top: 3px;
    background-image: url("../images/baner/desktop.svg");
    background-size: cover;
    background-repeat: no-repeat;
}

    .index-baner .mud-grid {
        padding-top: 85px;
        padding-right: 109px;
    }

.index-mud-paper {
    height: 216px;
    border-radius: 16px;
    top: 497px;
    left: 346px;
    background: #FFFFFF;
    margin-top: -85px;
}


.color-F09605 {
    color: var(--Color-Primary-800, #F09605);
}

.footer {
    background: var(--Color-Secondary-200, #EAEBEB);
    top: 3759.42px;
    left: -5px;
    background-image: url("../images/pattern/YaaPost-Pattern-1440px.png");
    padding-bottom: 20px;
}

.footer-tablet-and-mobile {
    display: none;
    background: var(--Color-Surface-200, #E5E5E5);
    background-image: url("../images/pattern/YaaPost-Pattern-1440px.png");
}

.display-tablet-and-mobile {
    display: none;
}

.footer-link {
    padding-right: 8px;
    padding-bottom: 14px;
    color: #000 !important;
}

.footer-image {
    background-image: url("../images/pattern/YaaPost-Pattern-408px.png");
    background-size: cover;
    background-repeat: no-repeat;
    gap: 1px;
    top: 3295.21px;
    left: 131px;
    border-radius: 16px;
    padding: 16px;
    height: 222px;
    /*    background: var(--Color-Secondary-200, #EAEBEB);*/
}

.index-yaapost-values {
    width: 100%;
    height: 391px;
    background-image: url("../images/pattern/YaaPost-Pattern-1440px.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.footer-scial-media {
    height: 88px;
    top: 3557.21px;
    left: 131px;
    justify-content: space-between;
    background: var(--Color-Secondary-200, #EAEBEB);
}

.policy-baner {
    height: 262px;
    top: 3px;
    background-color: var(--Color-Warning-light, #fbaf33);
    background-image: url("../images/pattern/YaaPost-Pattern-1440px.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.element-filter-btn {
    gap: 8px !important;
    border-width: 1px !important;
    padding-top: 4px !important;
    padding-right: 8px !important;
    padding-bottom: 4px !important;
    padding-left: 8px !important;
    border-radius: 24px !important;
    margin: 10px;
    background: var(--Surface-50, #FFFFFF) !important;
    border: 1px solid var(--Surface-300, #CCCCCC) !important;
}

.element-filter-btn-active {
    gap: 8px !important;
    border-width: 1px !important;
    padding-top: 4px !important;
    padding-right: 8px !important;
    padding-bottom: 4px !important;
    padding-left: 8px !important;
    border-radius: 24px !important;
    margin: 10px;
    background: var(--Surface-50, #FFFFFF) !important;
    border: 1px solid var(--Color-Primary-900, #DC8904) !important;
}

.element-filter-item {
    height: 57px !important;
    justify-content: space-between !important;
    border-width: 1px !important;
    border-radius: 8px !important;
    padding: 16px !important;
    border: 1px solid var(--Color-Surface-300, #CCCCCC) !important;
}

.choose-area-workshop-list-mud-item {
    opacity: 1;
    gap: 8px;
    border-radius: 16px;
    padding-top: 16px;
    padding-left: 8px;
    background: var(--Color-Surface-200, #E5E5E5);
}

.choose-area-workshop-list {
    min-height: 400px;
    opacity: 1;
    gap: 8px;
    border-radius: 16px;
    border-width: 1px;
    padding: 8px !important;
    background: var(--Color-Surface-100, #FDFDFD);
    border: 1px solid var(--Color-Surface-300, #CCCCCC);
    margin: 8px !important;
}

.choose-area-workshop-list-2 {
    border-radius: 16px;
    padding: 8px !important;
    border: 1px solid var(--Color-Surface-300, #CCCCCC);
    max-height: 400px;
    overflow: auto;
}

.choose-area-workshop-list-3 {
    opacity: 1;
    gap: 8px;
    border-radius: 16px;
    border-width: 1px;
    padding: 8px !important;
    background: var(--Color-Surface-100, #FDFDFD);
    border: 1px solid var(--Color-Surface-300, #CCCCCC);
    margin: 8px !important;
}


.choose-area-workshop-list-border-bottom {
    opacity: 1;
    border-bottom-width: 1px !important;
    border-bottom: 1px solid var(--Color-Surface-300, #CCCCCC);
}

.horizontal-collapse {
    width: 0;
    overflow: hidden;
    transition: width 0.3s ease;
    white-space: nowrap;
}

    .horizontal-collapse.expanded {
        width: 250px; /* desired expanded width */
    }

.border-left {
    opacity: 1;
    border-bottom-width: 1px !important;
    border-left: 1px solid var(--Color-Surface-300, #CCCCCC);
}

.border-right {
    opacity: 1;
    border-bottom-width: 1px !important;
    border-right: 1px solid var(--Color-Surface-300, #CCCCCC);
}

.province-area-dialog {
    opacity: 1;
    gap: 40px;
    border-radius: 16px;
    padding: 16px;
    background: var(--Color-Surface-200, #E5E5E5);
}

.province-area-dialog-data {
    width: 100% !important;
    opacity: 1;
    border-radius: 16px;
    border-width: 1px;
    padding: 8px !important;
    background: var(--Color-Surface-100, #FDFDFD);
    border: 1px solid var(--Color-Surface-300, #CCCCCC);
    margin-top: 0px;
}
/*media*/
@media (min-width: 962px) {
    .index-yaapost-values {
        height: 391px;
    }

    .hidden-in-min-962-px {
        display: none;
    }
}

@media (max-width: 962px) {
    .index-mud-paper {
        border-radius: 16px;
        background: #FFFFFF;
        margin-top: 0px;
        height: 100%;
    }

    .postal-package-image {
        display: none !important;
    }

    .postpackage-button {
        justify-content: center !important;
    }

    .hidden-in-max-962-px {
        display: none;
    }
}

@media (max-width: 896px) {
    .mud-app-bar {
        height: 110.3622055053711px;
        justify-content: space-between;
        padding-top: 24px;
        padding-right: 15px;
        padding-bottom: 24px;
        padding-left: 15px;
        background: #FFFFFF;
    }

    .mud-link-mud-app-bar {
        gap: 8px;
        border-radius: 12px;
        padding-top: 12px;
        padding-right: 5px;
        padding-bottom: 12px;
        padding-left: 5px;
        color: #000 !important;
    }
}

@media (min-width: 745px) {
    .mud-app-bar-responsive {
        display: none !important;
    }

    .mud-app-bar {
        display: flex !important;
    }
}

@media (max-width: 745px) {
    .profile-span-box {
        max-width: 230px;
        opacity: 1;
        gap: 10px;
        border-radius: 8px;
        padding: 24px;
        margin-bottom: 10px;
        background: #EDEDEDB2;
        color: var(--Surface-500, #808080);
        justify-content: center !important;
        display: flex !important;
        align-items: center !important;
    }

    .md-display-grid {
        display: grid !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .mud-app-bar-responsive {
        display: flex;
    }

    .step-component {
        display: none;
    }

    .hidden-in-tablet-mode {
        display: none;
    }


    .step-component-tablet {
        display: flex;
    }

    .policy-baner {
        height: 195px;
    }

    .index-what-direct-mail-baner {
        height: 395px;
        width: 100%; /* or set a specific width as needed */
        background-size: cover;
        background-repeat: no-repeat;
        background-size: 395px; /* or use contain, or set specific size if needed */
        background-image: url("../images/baner/Whatisdirectmailtablet.png");
    }

    .index-what-direct-mail-baner-en {
        height: 395px;
        width: 100%; /* or set a specific width as needed */
        background-size: cover;
        background-repeat: no-repeat;
        background-size: 395px; /* or use contain, or set specific size if needed */
        background-image: url("../images/baner/Whatisdirectmailtablet-en.png");
        background-position: right;
    }

    .about-us-yaa-post {
        background-color: var(--Color-Warning-light, #FFDAB9);
        background-image: url("../images/pattern/YaaPost-Pattern-528px.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-size: 300px;
        background-position: right;
        background-blend-mode: soft-light;
    }

    .happy-delivery-man {
        display: none;
    }

    .login-image-background {
        display: none !important;
    }

    .custom-login-btn {
        margin-top: 180px !important;
    }

    .about-us-baner-mud-grid {
        padding-top: 25px;
        padding-right: 0px;
    }

    .contact-us-baner-mud-grid {
        padding-top: 25px;
        padding-right: 0px;
    }


    .index-yaapost-values {
        width: 100%;
        height: 100%;
        background-image: url("../images/pattern/YaaPost-Pattern-1440px.png");
        background-size: cover;
        background-repeat: no-repeat;
    }

    .index-baner-en {
        height: 773px;
        background-image: url("../images/baner/tablet-en.svg");
        background-size: cover;
        background-repeat: no-repeat;
    }

        .index-baner-en .mud-grid {
            padding-top: 40px;
            padding-right: 38px;
        }

    .index-baner {
        height: 773px;
        background-image: url("../images/baner/tablet.svg");
        background-size: cover;
        background-repeat: no-repeat;
    }

        .index-baner .mud-grid {
            padding-top: 40px;
            padding-right: 38px;
        }

    .mud-app-bar {
        display: none !important;
    }

    .display-non-745 {
        display: none;
    }

    .footer {
        display: none;
    }

    .footer-tablet-and-mobile {
        display: flex;
        height: 100%;
        background: var(--Color-Surface-200, #E5E5E5);
        background-image: url("../images/pattern/YaaPost-Pattern-1440px.png");
    }

    .display-tablet-and-mobile {
        display: block;
    }

    .footer-link {
        padding-right: 0px;
        padding-bottom: 28px;
        color: #000 !important;
    }
}

@media (min-width: 600px) {
    .mud-toolbar-gutters {
        padding-left: 0px;
        padding-right: 0px;
    }
}

@media (max-width: 585px) {
    .height-380 {
        height: 380px;
    }

    .login-image-background {
        display: none !important;
    }

    .custom-login-btn {
        margin-top: 180px !important;
    }

    .mud-btn-warning {
        height: 52px;
        gap: 8px;
        border-radius: 12px;
        padding-top: 12px;
        padding-right: 24px;
        padding-bottom: 12px;
        padding-left: 24px;
        background: var(--Color-Primary-main, #FBAF33) !important;
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .mud-btn-warning-2 {
        height: 52px;
        gap: 8px;
        border-radius: 12px;
        padding-top: 12px;
        padding-right: 24px;
        padding-bottom: 12px;
        padding-left: 24px;
        background: var(--Color-Primary-main, #FBAF33) !important;
        bottom: 0;
        left: 0;
    }
}

@media (max-width: 470px) {
    .font-size-23-px {
        font-size: 23px !important;
    }

    .responsice-logo {
        width: 72px !important;
    }

    .mud-grid-spacing-xs-6 > .mud-grid-item > .custom-btn-2 > .mud-button-label {
        font-size: 10px !important;
    }

    .padding-top-mobile-384 {
        padding-top: 384px;
    }

    .index-yaapost-values {
        width: 100%;
        height: 100%;
        background-image: url("../images/pattern/YaaPost-Pattern-375px.png");
        background-size: cover;
        background-repeat: no-repeat;
    }

    .hidden-in-mobile-mode {
        display: none;
    }

    .index-baner {
        height: 650px;
        top: 3px;
        background-image: url("../images/baner/mobile1.svg");
        background-size: cover;
        background-repeat: no-repeat;
    }

        .index-baner .mud-grid {
            padding-top: 63px;
            padding-right: 10px;
        }

    .index-baner-en {
        height: 650px;
        top: 3px;
        background-image: url("../images/baner/mobile1-en.svg");
        background-size: cover;
        background-repeat: no-repeat;
    }

        .index-baner-en .mud-grid {
            padding-top: 63px;
            padding-right: 10px;
        }

    .index-baner-mud-button {
        width: 100% !important;
    }

    .index-mud-paper {
        border-radius: 16px;
        background: #FFFFFF;
        margin-top: 0px;
        height: 100%;
    }

    .about-us-yaa-post {
        background-color: var(--Color-Warning-light, #FFDAB9);
        background-image: url("../images/pattern/YaaPost-Pattern-528px.png");
        background-repeat: no-repeat;
        background-size: cover;
    }
}

.iran-map {
    width: 100% !important;
}

@media (min-width: 576px) {
    .iran-map {
        width: 90% !important;
    }
}

@media (min-width: 768px) {
    .iran-map {
        width: 80% !important;
    }
}

@media (min-width: 992px) {
    .iran-map {
        width: 110% !important;
    }
}

@media (min-width: 1200px) {
    .iran-map {
        width: 86% !important;
    }
}

@media (min-width: 1400px) {
    .iran-map {
        width: 60% !important;
    }
}