@font-face {
    font-family: 'yknbkh';
    src: url('/assets/fonts/Yekan_Bakh_Fanum_Regular.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'yknbkh';
    src: url('/assets/fonts/Yekan_Bakh_Fanum_Bold.TTF') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

* {
    font-family: "yknbkh", sans-serif !important;
    direction: rtl;
}


/**::-webkit-scrollbar {*/
/*    width: 10px;*/
/*    height: 10px;*/
/*}*/
/**::-webkit-scrollbar-track {*/
/*    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);*/
/*    -webkit-border-radius: 10px;*/
/*    border-radius: 10px;*/
/*}*/

/**::-webkit-scrollbar-thumb {*/
/*    -webkit-border-radius: 10px;*/
/*    border-radius: 10px;*/
/*    background: rgba(255, 255, 255, 0.3);*/
/*    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);*/
/*}*/

/**::-webkit-scrollbar-thumb:window-inactive {*/
/*    background: rgba(255, 255, 255, 0.3);*/
/*}*/


body, html {
    unicode-bidi: isolate;
    font-feature-settings: 'lnum', 'tnum';
}

input, textarea {
    unicode-bidi: normal;
    font-feature-settings: normal;
    box-shadow: none;
}

#LoginRegisterModal input[type="text"],
#LoginModal input[type="text"],
#RegisterModal input[type="text"] {
    text-align: left;
    direction: ltr;
}

body.HomePage {
    padding: 0 !important;
    background-color: var(--background-color);
    color: var(--text-color);
}

.PopularSectionServices {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    gap: 25px;
}

p {
    margin: 0;
}

a {
    text-decoration: none !important;
    /* color: var(--text-color) */
}

.ProfileSubMenu a {
    color: var(--text-color)
}


:root {
    --background-color: #fcfcfc;
    --bottomNavbarBack-color: #ffffff;
    --text-color: black;
    --SelectFileAreaTitleColor: #31326F;
    --SelectFileAreaDescriptionColor: #31326F;
    --nav-link-color: black;
    --nav-bg-link-active: #e0eefb;
    --MobilePackagesPage-bg: #F8F9FA;;
    --bg-MobilePackageBox: #f7f7f7;
    --bg-nav-item: #f5f5f5;
    --SelectFileSection-bg: #FFF;
    --SelectFileSection-shadow: 0 5px 9px 0 rgb(240 240 240);
    --SelectFileHelp--color: #CECECE;
    --filepond--item-panel-bg: white;
    --filepond--file-border: 1px solid #f3f3f3;
    --info-text-color: #8D8D8D;
    --osen-menu-item-padding-x: 15px;
    --osen-menu-item-padding-y: 13px;
}

.dark-mode {
    --background-color: #262626;
    --bottomNavbarBack-color: #ffffff;
    --text-color: white;
    --SelectFileAreaTitleColor: #ffffff;
    --SelectFileAreaDescriptionColor: #ffffff;
    --nav-link-color: #ffffff;
    --nav-bg-link-active: #1f1f1f;
    --MobilePackagesPage-bg: #262626;
    --bg-MobilePackageBox: #3d3d3d;
    --bg-nav-item: #3d3d3d;
    --SelectFileSection-bg: #3d3d3d;
    --SelectFileSection-shadow: 0 5px 9px 0 #262626;
    --SelectFileHelp--color: #CECECE;
    --filepond--item-panel-bg: #3d3d3d;
    --filepond--file-border: none;
}


.ModalInputSection {
    position: relative;
}


.ValidIcon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #198754;
    font-size: 1.2rem;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.InvalidIcon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: red;
    font-size: 1.2rem;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.form-control.is-valid ~ .ValidIcon {
    opacity: 1;
}


.BtnLoadingConvert {
    border: 1px solid #fb8e8e;
    border-radius: 5px;
    background-color: white;
    color: #57faf2;
    font-size: 13px;
    height: 30px;
    width: 90px;
    font-weight: bold;
}

.Stroke7 {
    -webkit-text-stroke: 0.7px;
}

.lgNavServicesArrow {
    -webkit-text-stroke: 0.5px;
    font-size: 10px;
    margin-right: 3px;
}

.preparing-style {
    border: 1px solid #36dee5;
    border-radius: 5px;
    background-color: white;
    color: #36dee5;
    font-size: 13px;
    height: 30px;
    width: 115px;
    font-weight: bold;
}

.preparing-style {
    border: 1px solid #36dee5;
    border-radius: 5px;
    background-color: white;
    color: #36dee5;
    font-size: 13px;
    height: 30px;
    width: 115px;
    font-weight: bold;
}

.processing-style {
    position: relative;
    height: 40px;
    width: 140px;
    border-radius: 5px;
    background-color: white;
    color: #3478f8;
    font-size: 13px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
}

.processing-style::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 5px;
    padding: 2px;
    background: linear-gradient(90deg, #3478f8, #34f8c8, #f83478, #f8b834, #3478f8);
    background-size: 300% 100%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: gradient-slide 3s linear infinite;
}

.processing-style::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 5px;
    background: linear-gradient(90deg, #3478f8, #34f8c8, #f83478, #f8b834, #3478f8);
    background-size: 300% 100%;
    filter: blur(12px);
    opacity: 0.6;
    z-index: -1;
    animation: gradient-slide 3s linear infinite;
}

@keyframes gradient-slide {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 300% 50%;
    }
}

.processing-style span {
    position: relative;
    z-index: 1;
}


.in_queue-style {
    border: 1px solid #fdcf2f;
    border-radius: 5px;
    background-color: white;
    color: #fdcf2f;
    font-size: 13px;
    height: 40px;
    width: 115px;
    font-weight: bold;
}

.cancel-style {
    border: 1px solid #fb8e8e;
    border-radius: 5px;
    background-color: white;
    color: #d20000;
    font-size: 13px;
    height: 30px;
    width: 115px;
    font-weight: bold;
}


.BtnAttAction {
    border: none;
    background-color: transparent;
    font-weight: bold;
    font-size: 0.8rem;
    color: #4A4A4A;
}

.AttTextSectionCard {
    border: none;
    box-shadow: 0px 5px 9px 0px rgb(240 240 240);
}

.BtnAttCancel {
    color: red;
    text-align: right;
}

.progress-bar {
    width: 100%;
    font-size: 10px;
    padding-top: 2px;
}

.AttTextareaOutput {
    color: #525252;
    border: none;
    background: #fff !important;
    font-size: 12px;
    margin-bottom: 10px;
    text-align: justify;
    height: 90px;
    overflow: auto;
}

.AttProgress {
    width: 30%;
    height: 15px;
}

.AttOutputTextarea {
    color: #565656;
}

.BtnConvert:hover {
    background-color: #0087D2;
    color: white;
}

.BtnCancelConvert {
    border: 1px solid #fb8e8e;
    background-color: white;
    color: #d20000;
}

.BtnCancelConvert:hover {
    background-color: #d20000;
    color: white;
}


.BtnActionButton {
    border: none;
    outline: 1px solid #8ED4FB;
    border-radius: 5px;
    background-color: white;
    color: #0087D2;
    font-size: 13px !important;
    height: 30px;
    width: 90px;
    font-weight: bold;
    transition: 0.2s all;
}

.BtnActionButton:hover {
    border: none;
    outline: 1px solid #0087D2;
    border-radius: 5px;
    background-color: #0087D2;
    color: #ffff;
    font-size: 13px !important;
    height: 30px;
    width: 90px;
    font-weight: bold;
}

.BlurElement {
    backdrop-filter: blur(1px);
}


.Error {
    color: red;
    background-color: #ffcdcd;
    border-radius: 5px;
}

.toast-header .btn-close {
    margin-left: 0;
}


.BtnSelectAllPage {
    font-size: 13px;
    padding-right: 1.25rem;
}

.selectPageInput {
    margin-bottom: 1rem;
}

.selectPageRules {
    font-size: 12px;
}

#flush-headingOne .accordion-button::after,
#flush-headingTwo .accordion-button::after {
    display: none;
}

.selectPageCheck {
    direction: rtl;
}

.selectPageCheck {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.selectPageCheck .form-check-label {
    margin-right: 10px;
    margin-left: 0;
}

.selectPageCheck .form-check-input {
    margin-left: 5px;
}

.accordion-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.form-check-input {
    margin-left: 10px;
}

.selectPageHelp {
    font-size: 12px;
}


/* nav-link setting
*/

#TopNavBar .nav-link, #BottomNavbar .nav-link {
    color: var(--nav-link-color);
    font-size: 15px;

}

.nav-link:hover {
    cursor: pointer;
}

.nav-fill .nav-item, .nav-fill > .nav-link {
    background-color: var(--bg-nav-item);
}

.nav-fill .nav-item, .nav-fill > .nav-link {
    background-color: var(--bg-nav-item);
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: var(--nav-bg-link-active);
    color: #0d6efd !important;
    border-radius: 15px;
    /* width: auto; */
    margin-right: 5px;
}

.nav-fill .nav-item, .nav-fill > .nav-link {
    border-radius: 0;
}


/* Form control */


/* navbar setting */
.SubMenuItem {
    font-size: 14px;
    padding: 10px 5px;
    border-radius: 7px;
}

.SideBarMenu {
    margin: 1rem 0;
    padding-right: 3px;
}

.ServiceMenu {
    display: inline-block;
}

.SubMenu {
    max-width: 1350px;
    margin-top: -1rem;
    visibility: hidden;
    width: 90vw;
    padding: 1rem 1rem 1rem 1rem;
    position: absolute;
    background-color: white;
    min-width: 160px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1);
    z-index: 10;
    opacity: 0;
    list-style: none;
    border-radius: 10px;
    transition: all 0.5s ease 0s;
    filter: blur(5px);
    right: 5rem;
    left: 5rem;
}


.ServiceMenu:hover .SubMenu {
    visibility: visible;
    opacity: 1;
    margin-top: 0;
    filter: blur(0px);
}

.SubMenuItemText {
    margin-top: 3px;
}

.ApiIconBox {
    margin-left: 10px;
    font-size: 30px;
    color: #676767;
}

.ApiTitle {
    font-size: 16px;
    font-weight: bold;

}

.ApiDesc {
    font-size: 12px;
    color: #6c6c6c;
}


.SubMenuItemBox {
    display: flex;
    align-items: center;
    border-radius: 10px;
}

.SubMenuOrderIcon {
    background-color: #2ecc71;
    border-radius: 10px;
    color: white;
    width: 10px;
    height: 10px;
    margin-left: 5px;
}

.SubMenuPDFIcon {
    background-color: #c0392b;
    border-radius: 10px;
    color: white;
    width: 10px;
    height: 10px;
    margin-left: 5px;
}

.SubMenuWordIcon {
    background-color: #3498db;
    border-radius: 10px;
    color: white;
    width: 10px;
    height: 10px;
    margin-left: 5px;
}

.SubMenuAudioIcon {
    background-color: #f39c12;
    border-radius: 10px;
    color: white;
    width: 10px;
    height: 10px;
    margin-left: 5px;
}

.SubMenuApiSection {
    padding: 1rem 0;
    display: flex;
    align-items: center;
}

.SubMenuTitle {
    font-size: 16px;
    font-weight: bold;
}


.nav-tabs {
    --bs-nav-tabs-link-active-border-color: #ffffff #ffffff #0023ff91;
}


.TopNavBar {
    text-align: right;
    position: absolute;
    width: 100%;
    -webkit-text-stroke: 0.2px #2D2D54;
    z-index: 1000;
}

.MenuIcon {
    background-color: transparent;
    color: #9c9c9c;
    border: none;
    font-size: 30px;
    padding: 0;
}


.NavbarLogo {
    width: 60px;
}

.nav-item {
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 15px;
    font-weight: 500;
}


.BtnLoginRegister {
    font-size: 15px;
    font-weight: 700;
    padding: 0.375rem 1.3rem;
    color: #2D2D54;
    margin-left: 10px;
    -webkit-text-stroke: 0;
}

#ConvertSection .btn-link {
    text-decoration: none;
    color: black;
}

.BtnPackages {
    padding: 0.375rem 1.3rem;
    border-radius: 0;
    border-right: 1px solid #cfcfcf;
    color: #2D2D54 !important;
    -webkit-text-stroke: 0.2px #2D2D54;
    transition: all 0.2s;
}

.BtnPackages:hover {
    border-right: 1px solid #cfcfcf;
}

.BtnPrices {
    color: #2D2D54;
    -webkit-text-stroke: 0.2px #2D2D54;
    padding: 0.375rem 1.3rem;
}

.Btn:focus {
    outline: none !important;

}

.NavbarIcon {
    margin-left: 2px;
    margin-right: 5px;
}

.btn .badge {
    position: relative;
    top: -1px;
}

.badge {
    -webkit-text-stroke: 0 !important;
}

.badge-Free {
    top: -6px !important;
    font-weight: 500;
    font-size: 9px;
    color: #9f9f9f;
    transition: 0.5s all;
}

.green-badge-Free {
    font-size: 10px;
    font-weight: 400;
    color: #5BE94F;
    padding: 2px 4px;
    margin-right: 4px;
    border-radius: 4px;
    margin-top: -4px;
}

.NavbarButton:hover {
    color: #0a53be !important;
}

.NavbarServiceArrow {
    font-size: 10px;
    margin-right: 3px;
}

.PriceList {
    -webkit-text-stroke: 0.2px #2D2D54;
}

.BtnHelp {
    font-size: 14px;
    color: #585858
}

.MobileSiteMenu {
    width: 60% !important;
}


.nav-dropdown {
    text-align: right;
    background: white;
    border-radius: 12px;
    padding: 2rem 2rem 1rem 2rem;
}

.menu-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 2rem;
}

.menu-section {
    flex: 1;
    min-width: max-content;
}

.nav__title {
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 10px;
    padding-bottom: 10px;
    -webkit-background-clip: text;
    background-clip: text;
    border-bottom: 1px solid #2980b9;
}

.menu-items {
    list-style: none;
    width: max-content;
    padding-left: 0;
    padding-right: 0;
}

.menu-items li {
    margin-bottom: 5px;
}

.menu-items a {
    display: flex;
    color: #495057;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s ease;
    font-size: 14px;
    padding: 5px;
    align-items: center;
}

.menu-items a:hover {
    background-color: #e3f2fd;
    color: #1976d2;
    transform: translateX(-3px);
}

.menu-items a.active {
    background-color: #2196f3;
    color: white;
}

.ico {
    width: 30px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ico-text {
    color: #e17055;
}

.ico-order {
    color: #0984e3;
}

.ico-word {
    color: #2196F3;
}

.ico-from-pdf {
    color: #45B7D1;
}

.ico-to-pdf {
    color: #ff7675;
}

.ico-other {
    color: #6c5ce7;
}

.ico-pdf-organize {
    color: #00b894;
}

.menu-section {
    animation: fadeInUp 0.6s ease-out;
}

.menu-section:nth-child(1) {
    animation-delay: 0.1s;
}

.menu-section:nth-child(2) {
    animation-delay: 0.2s;
}

.menu-section:nth-child(3) {
    animation-delay: 0.3s;
}

.menu-section:nth-child(4) {
    animation-delay: 0.4s;
}

.menu-section:nth-child(5) {
    animation-delay: 0.5s;
}

.menu-section:nth-child(6) {
    animation-delay: 0.6s;
}

@media (max-width: 480px) {
    .nav-dropdown {
        padding: 20px 15px;
    }

    .menu-section {
        padding: 15px;
    }

    .nav__title {
        font-size: 14px;
    }

    .menu-items a {
        font-size: 13px;
        padding: 6px 10px;
    }
}

.nav-item .dropdown-toggle::after {
    display: none;
}

.service-dropdown {
    width: 60vw;
    right: -100px !important;
}


/* Upload Section */

.PackagePurchase.disabled, .CreditPurchase.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.spinner-border {
    --bs-spinner-width: 1rem;
    --bs-spinner-height: 1rem;
    --bs-spinner-vertical-align: -0.125em;
    --bs-spinner-border-width: 0.15em;
    --bs-spinner-animation-speed: 0.75s;
    --bs-spinner-animation-name: spinner-border;
    border: var(--bs-spinner-border-width) solid #cfcfcf;
    border-right-color: transparent;
}

.loader {
    --text: #6C7486;
    --page: rgba(255, 255, 255, 0.36);
    --page-fold: rgba(255, 255, 255, 0.52);
    --duration: 3s;
    width: 40px;
    height: 28px;
    position: relative;
}

.loader:before, .loader:after {
    --r: -6deg;
    content: "";
    position: absolute;
    bottom: 8px;
    width: 120px;
    top: 80%;
    box-shadow: 0 16px 12px var(--shadow);
    transform: rotate(var(--r));
}

.loader:before {
    left: 4px;
}

.loader:after {
    --r: 6deg;
    right: 4px;
}

.loader div {
    width: 100%;
    height: 100%;
    border-radius: 13px;
    position: relative;
    z-index: 1;
    perspective: 600px;
    box-shadow: 0 4px 6px var(--shadow);
    background-image: var(--background);
}

.loader div ul {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
}

.loader div ul li {
    --r: 180deg;
    --o: 0;
    --c: var(--page);
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 100% 50%;
    color: var(--c);
    opacity: var(--o);
    transform: rotateY(var(--r));
    -webkit-animation: var(--duration) ease infinite;
    animation: var(--duration) ease infinite;
}

.loader div ul li:nth-child(2) {
    --c: var(--page-fold);
    -webkit-animation-name: page-2;
    animation-name: page-2;
}

.loader div ul li:nth-child(3) {
    --c: var(--page-fold);
    -webkit-animation-name: page-3;
    animation-name: page-3;
}

.loader div ul li:nth-child(4) {
    --c: var(--page-fold);
    -webkit-animation-name: page-4;
    animation-name: page-4;
}

.loader div ul li:nth-child(5) {
    --c: var(--page-fold);
    -webkit-animation-name: page-5;
    animation-name: page-5;
}

.loader div ul li svg {
    width: 20px;
    height: 25px;
    display: block;
}

.loader div ul li:first-child {
    --r: 0deg;
    --o: 1;
}

.loader div ul li:last-child {
    --o: 1;
}

.loader span {
    display: block;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 20px;
    text-align: center;
    color: var(--text);
}

.ConvertActionBtn {
    padding: 5px 5px;
    border-radius: 5px;
    margin-left: 10px;
    font-weight: bold;
    color: #0086d0;
    font-size: 14px;
}

.FilesCheckIcon {
    font-size: 14px;
    color: #c9c9c9;
}

.FileNameText {
    font-weight: bold;
    color: #555555;
    font-size: 16px;
    width: 100%;
}

.FilePageCount {
    font-weight: bold;
    color: #808080;
    font-size: 14px;
    width: 100%;
}

.BtnSettings {
    font-weight: bold;
    color: #0ba909;
    font-size: 14px;
    border-top-right-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
}

.BtnSettings:hover {
    background: #0ba909;
}

.HomePageSlider {
    margin-bottom: 2rem;
    text-align: center;
}

.carousel-indicators {
    margin-bottom: 0;
}

.carousel {
    max-width: 500px;
    margin: auto;
}

.carousel-indicators [data-bs-target] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.carousel-control-next, .carousel-control-prev {
    width: 8%;
    padding: 0;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
    width: 1rem;
    height: 1rem;
}

.carousel-inner {
    margin: auto;
}

.SelectFileAreaMobileTest {
    margin-top: 2rem;
    font-size: 14px;
    text-align: center;
}

.UploadSection {
    min-height: 100vh;
    display: flex;
}

.UploadSectionContent {

    width: 100%;
    padding: 0 3rem;
    border-radius: 20px;
}

.UploadSectionRow {
    height: 100%;
}

.SelectFileArea {
    margin-top: 33vh;
    position: relative;
    z-index: 0;
}


.SelectFileAreaContent {
    padding: 0 2rem 0;
    position: relative;
    width: 50%;
    text-align: center;
}


.SelectFileAreaTitle {
    text-align: center;
    font-size: 25px;
    font-weight: bold;
    color: var(--SelectFileAreaTitleColor);
    margin-bottom: 0;
}


.SelectFileAreaDescription {
    text-align: center;
    font-weight: 500;
    color: var(--SelectFileAreaDescriptionColor);
    font-size: 14px;
    margin-top: 5px;
    line-height: 2;
}


.SelectFileSection {
    background: var(--SelectFileSection-bg);
    margin-top: 2rem;
    display: flex;
    align-items: center;
    padding: 13px 15px;
    border-radius: 16px;
    z-index: 10;
    box-shadow: var(--SelectFileSection-shadow);
    position: relative;

}


.BtnSelectFile {
    animation: shadow-pulse 2s infinite;
    background: #EF4056;
    color: #fff;
    height: 48px;
    width: 165px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 9px;
    animation: shadow-pulse 2s infinite;
    display: flex;
    justify-content: center;
    align-items: center;
}

.RemoveImageBackgroundSelectFile{
    margin-top: 24vh !important;
}


.BtnEnterPassword{
    font-size: 12px !important;
}

.BtnAddFile {
    background-color: #ed3f55;
    height: 48px;
    width: 165px;
    border: none;
    font-size: 15px;
    font-weight: 700;
    border-radius: 9px;
    color: white;
    transition: all 0.2s;
}


.BtnSelectFile:hover {
    transition: all 0.2s;
    background-color: #c43346;
    color: white;
    cursor: pointer;
}


#BtnPurchaseConvert {
    width: fit-content;
    direction: rtl;
    display: none;
    font-weight: bold;
    font-size: 1rem;
    margin-right: auto;
    height: 55px;
    padding: 0 20px;
    border-radius: 9px;
}


.SelectFileIcon {
    -webkit-text-stroke: 0.3px #ffffff;
    font-size: 20px;
    line-height: 1;
}


.SelectFileTest {
    color: var(--info-text-color);
    font-weight: 100;
    font-size: 14px;
    flex: 1;
    text-align: center;
}


.SelectFileHelp {
    color: var(--SelectFileHelp--color);
    font-size: 14px;
    margin-left: 5px;
    cursor: pointer;
    width: 150px;
    text-align: left;
    margin-right: auto;
}

.HelpLink {
    color: var(--SelectFileHelp--color);
}


.HomePageUploader .UploaderInput {
    z-index: 0;
    width: 95%;
    margin: auto;
    /*border: 2px dashed #e9e9e9;*/
    /*border-bottom-right-radius: 16px;*/
    /*border-bottom-left-radius: 16px;*/
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%23DEDEDEFF' stroke-width='2' stroke-dasharray='5%2c 9' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    border-radius: 16px;
    margin-top: -10px;
    min-height: 70px;
}

.AudioToTextSection .UploaderInput {
    z-index: 0;
    width: 95%;
    margin: auto;
    border: 2px dashed #e9e9e9;
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 16px;
}


.DragAndDropText {
    font-weight: 100;
    color: #CECECE;
    -webkit-text-stroke: 0.1px #CECECE;
    font-size: 14px !important;
    padding-top: 3px;
}


.spn-drag-and-drop {
    margin-top: 10px;
    font-size: 14px !important;
    font-weight: 100;
    color: #CECECE;
    -webkit-text-stroke: 0.1px #CECECE;
}


.HomePagePriceText {
    text-align: center;
}


.HomePagePriceText {
    font-size: 14px;
}


/* popular section*/

.MobileSiteStatics {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 5rem;
    padding: 0;
    font-size: 12px;
    color: #a6a6a6;
}

.div-popular-section {
    height: 25vh;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    width: 50%;
    margin: auto;

}

.MobileSiteStaticsItems {
    width: 60%;
}

.PopularSectionTitle {
    color: #31326F;
    display: flex;
    align-items: center;
    padding-left: 3rem;
}

.PopularSection {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 20px;
    padding: 0;
}

.PopularSectionItem {
    display: flex;
    align-items: center;
}

.SiteStaticItem {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.PopularSectionItems {
    display: flex;
    justify-content: space-between;
    align-items: end;
    font-size: 15px;
    color: #31326F;
}

.PopularSectionTitleText {
    font-size: 16px;
    margin-right: 5px;
    font-weight: bold;
}

.PopularSectionTitleShowAll {
    color: #31326F;
    font-size: 12px;
    margin-right: 5px;
}

.PopularSectionTitleShowAll:hover {
    cursor: pointer;
}

.spn-PopularIcon {
    margin: 5px;
}

.PopularSectionItemText {
    color: #757575;
    font-size: 14px;
    margin-top: 3px;
}

.LandingStaticsBorder {
    border-left: 1px solid #e9e9e9;
    flex-direction: column;
}


/* filepond settings */

.OrderUploaderSection .filepond--list-scroller {
    max-height: 10rem;
}

.filepond--root .filepond--list-scroller {
    margin: 0;
}

.filepond--file .filepond--progress-indicator {
    color: #e74c3c;
    margin-bottom: 3px;
}

.filepond--file-action-button {
    background: rgba(255, 201, 196, 0.55);
    color: #e74c3c;
}

.filepond--file .filepond--file-status {
    margin-left: 2rem;
}

.filepond--drop-label {
    border-radius: 16px;
    background-color: transparent;
    height: 55px;
}

.filepond--root .filepond--drop-label {
}

.filepond--file-info {
    text-align: justify;
}

.filepond--file {
    border: var(--filepond--file-border);
    position: static;
    padding: 15px 15px 15px 12px;
    color: var(--text-color);
    border-radius: 0.5em;
    height: auto;

}

.filepond--file-info {
    margin-right: 2rem;
}

.filepond--root {
    max-height: 50vh;
}

.filepond--root .filepond--list-scroller {
    direction: ltr;
    margin-top: 1em;
    margin-bottom: 1em;
}

.filepond--file-wrapper {
    border-radius: 16px;
}

[data-filepond-item-state*='error'] .filepond--file-wrapper {
    color: white;
}

[data-filepond-item-state*='error'] .filepond--file {
    color: white;

}

[data-filepond-item-state='cancelled'] .filepond--file-info, [data-filepond-item-state*='invalid'] .filepond--file-info, [data-filepond-item-state*='error'] .filepond--file-info {
    margin-right: 5.0em;
    color: white;
}

[data-filepond-item-state='processing-complete'] .filepond--file {
}

[data-filepond-item-state='processing-complete'] .filepond--item-panel {
    background-color: var(--filepond--item-panel-bg);
}

.filepond--panel-root {
    border-radius: 0.5em;
    background-color: transparent;
}

.filepond--item-panel {
    background-color: transparent;
}

.filepond--root .filepond--drop-label {
    min-height: 4.75em;
}

.filepond--file-status .filepond--file-status-main {
    line-height: 2.2;
}

.filepond--file-status-sub {
    display: none;
}

.fileDot {
    padding-left: 8px;
    padding-right: 10px;
    font-size: 4px !important;
    color: #0067ff;
}


/* Site Info Section */

.div-SiteInfoSection {
    background: #F7F9FB;
    padding: 3rem 3rem 1rem;
    text-align: right;
}

.div-SiteInfoSectionContent {

}

.div-SiteInfoSectionItem {
    margin-bottom: 4rem;
    width: 50%;
}

.div-SiteInfoSectionIcon {
    font-size: 30px;
    width: 48px;
    color: #5d647b;
    height: 48px;
    text-align: center;
    line-height: 47px;
    border-radius: 12px;
    margin-bottom: 15px;
    text-shadow: none;
}

.div-SiteInfoSectionTitle {
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 15px;
    color: #5d647b;
}

.div-SiteInfoSectionDescription {
    font-weight: 100;
    font-size: 12px;
    margin-top: 5px;
    color: #5d647b;
}


/* Home Page Orders Section */

.OrdersSection {
    padding-bottom: 160px;
    background-color: white;
}

.OrderTitle {
    font-weight: bold;
    color: var(--text-color);
    text-align: right;
    font-size: 2rem;
    font-weight: bold;
}

.OrdersSectionContent {

}

.OrdersSectionTitle {
    text-align: center;
    height: 10rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #777777;
}

.OrderRedWord {
    color: #EF4056;
}

.OrdersTypeSection {
    margin: auto;
    position: relative;
    padding: 0;
}

.OrderSectionBox {
    padding: 3rem 1rem 3rem 1rem;
    background-color: white;
    border-radius: 16px;
    border: 1px solid #EFF0F6;
    position: relative;
    transition: all 0.5s;
    box-shadow: 0 24px 44px 0 rgba(0, 20, 20, 0.04);

}

.OrderSectionBox:hover {
    cursor: pointer;
    box-shadow: 0px 0px 20px -5px rgb(209 209 209);
}

.OrderSectionBoxItem {
    margin: auto;
    height: 90%;
}

.OrderSectionBoxItemIcon {
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.OrderSectionBoxItemTitle {
    font-size: 20px;
    color: #4A4A4A;
    margin-bottom: 1rem;
    font-weight: bold;
}

.OrderSectionBoxItemDescription {
    margin: auto;
    color: #9A9A9A;
    font-size: 16px;
    width: 81%;
}

.BtnRegisterOrder {
    margin-top: 1rem;
}

.Box {
    width: 160px;
    height: 130px;
    background-color: #F3F3F3;
    position: absolute;
    top: -3vh;
    right: -2vh;
    transform: rotate(40deg);
}


/* All Tools Section */

.AllToolsSection {
    background-color: #F7F9FB;
    padding-bottom: 7rem;
}

.AllToolsSectionContainer {
    margin: auto;
    width: 75%;
}

.AllToolsSectionTitle {
    text-align: center;
    height: 10rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #777777;
    font-size: 25px;
    font-weight: bold;
}

.AllToolsItems {
    margin: auto;
}

.ToolItemBox {
    margin: auto;
    min-height: 435px;
    max-width: 300px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 24px 44px 0 rgba(0, 20, 20, 0.04);
    position: relative;
    text-align: right;
    padding-top: 1rem;
    padding-right: 20px;
    padding-left: 13px;
    color: #656565;


}

.ToolsTitle {
    font-size: 17px;
    font-weight: bold;
    padding-bottom: 10px;
    border-bottom: 1px solid #f3f3f3;
}

.ToolText {
    font-size: 15px;
    font-weight: 400;
}

.ToolsItemsSection {
    margin-top: 10px;
}

.ToolsItems {
    padding: 10px 5px;
    align-items: center;
    cursor: pointer;
    border-radius: 5px;
    background-color: #ffffff;

}

.ToolsItems:hover {
    align-items: center;
    border-radius: 5px;
    background-color: #fafafa;
    transition: all 0.5s;
}


/* ---------------App Section------------*/

.AppSection {
    padding-bottom: 6rem;
    padding-top: 6rem;
    background-color: #FFFFFF;
}

.AppSectionPage {
    padding-bottom: 10rem;
    padding-top: 10rem;
}

.AppDownloadPageInfo {
    padding: 3rem 3rem 3rem;
    margin-top: 3rem;
}

.MobileAppIconDiv {
    background-color: #F0F0F0;
    height: 75px;
    width: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    margin-bottom: 1rem;
}

.MobileAppImage {
    width: 70%;
}

.AppDownloadArea {
    padding-left: 4rem;
    margin: auto;
}

.AppDownloadTitle {
    font-weight: 900;
    font-size: 2.1rem;
    padding-top: 1rem;
    white-space: pre-line;
    color: #0C0C0C;
}

.AppFree {
    color: #EF4056;
}

.AppDownloadDesc {
    color: #717171;
    font-weight: 400;
    font-size: 16px;
    margin-top: 1rem;
    line-height: 2;
}

.SendAppLinkSection {

    border-radius: 8px;
}

.SendAppLinkSectionGroup {
    direction: ltr;
    margin-top: 2rem;
}

.AppDownloadLinkSection {
    margin-top: 2rem;
    font-size: 14px;
}

.AppScreenShots {
    margin: 0 5px;
    height: 450px;
}

.BtnAppDownload {
    display: flex;
    justify-content: right;
    align-items: center;
    border-radius: 50px;
    width: max-content;
    text-align: right;
    color: #6A6A6A;
    font-size: 15px;
    padding: 5px 5px 5px 20px;
    margin-bottom: 1rem;
    border: none;
}

.BtnAppDownloadIcon {
    width: 40px;
    margin-top: 2px;
}

.BtnAppDownloadText {
    margin-right: 10px;
}

.AppIconLogo {
    width: 60px;
}

.DirectDownloadIcon {
    height: 30px;
}

.GooglePlayIcon {
    font-size: 20px;
    color: #4210ff;
}

.BazarIcon {
    height: 22px;
}

.InputMobileAppLink {
    border-radius: 5px !important;
}

.InputMobileAppLink::placeholder {
    color: #c4c4c4;
    font-size: 14px;
}

.BtnSendLink {
    margin-right: 5px;
    border-radius: 9px !important;
    background-color: #EF4056 !important;
    padding: 7px 20px;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.25);
}

.BtnSendLinkText {
    font-size: 14px;
}


/* ---------------Contact Section-----------*/

.ContactContent {
    background-color: #F7F9FB;
    padding: 5rem 0;
}

.ContactText {
    font-weight: bold;
}

.ContactDesc {
    margin-top: 2rem;
    margin-bottom: 2rem;
    line-height: 30px;
    text-align: justify;
}

.ContactUsLogo {
    font-size: 10rem;
    color: #42af43;
}


/* ----------About Us---------------- */

.AboutUsSection {
    padding: 6rem 2rem;
}

.AboutUsTitle {
    text-align: right;
    font-weight: bold;
    font-size: 25px;
}

.AboutUsDesc {
    margin-top: 4rem;
}

.AboutUsDescItem {
    margin-bottom: 4rem;
}

.AboutUsDescDescription {
    font-size: 15px;
}

.AboutUsDescTitle {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 8px;
}


/*-------------Our Customers Section---------------*/

.OurCustomersSection {
    background-color: #F7F9FB;
    padding-bottom: 3rem;

}

.OurCustomers {
    padding-top: 3rem;
    padding-bottom: 1rem;
}

.OurCustomersTitle {
    font-weight: bold;
    font-size: 25px;
    text-align: center;
}

.OurCustomersDesc {
    margin-top: 1rem;
    text-align: center;
    font-size: 13px;
}

.CustomersLogoSection {
    width: 90%;
}

.CustomersLogoSectionRow {
    margin-top: 1rem;
}

.CustomerItem {
    margin-bottom: 1rem;
}


/*---------Our Weblog Section --------------*/

.OurWeblogSection {
    background-color: white;
    padding-top: 10rem;
    padding-bottom: 10rem;
    text-align: center;


}

.OurWeblogSectionTitle {
    font-size: 25px;
    text-align: center;
    font-weight: 700;
}

.OurWeblogSectionDesc {
    color: #666666;
    font-size: 13px;
    line-height: 25px;
    margin-bottom: 5rem;
}

.WeblogPostBox {
    background-color: white;
    border: 1px solid #e5e5e5;
    padding: 2rem 25px 1rem 25px;
    border-radius: 10px;
    transition: all 1s;
}

.WeblogPostBox:hover {
    box-shadow: 0 0 17px 0 rgb(0 0 0 / 10%);

}

.WeblogPostTitle {
    text-align: right;
    font-weight: bold;
    font-size: 17px;
    margin: 25px 0 15px;
    color: #000000;
}

.WeblogPostDesc {
    text-align: right;
    color: #666666;
    font-size: 13px;
    margin: 15px 0;
    line-height: 25px;
}


.WeblogPostPicture {
    border-radius: 10px;
    width: 100%;
    object-fit: fill;
}

.BtnViewWeblogPost {
    width: 100%;
    text-align: left;
    color: #888888;
}

.EnterTheWeblog {
    margin-top: 5rem;
    font-weight: bold;
    font-size: 17px;
    color: #31326F;
}


/* ----------How To Use Section ---------------*/
.HowToUseSection {
    background-color: #F7F9FB;
}

.HowToUseTitle {
    font-weight: bold;
    font-size: 25px;
}

.HowToUseDesc {
    text-align: right;
    font-weight: bold;
    font-size: 20px;
    margin: 15px 0 15px;
    color: #666666;
}

.HoToUseItem {
    font-size: 15px;
    color: #666666;

}

.HowToUseSectionRow {
    padding: 2rem 0;
    margin: auto;
}

.HelpVideo {
    height: 100px;
    width: 200px;
}

.IndexVideooHelpVideoFile {
    border-radius: 10px;
    height: 180px;
}

.HowToUseVideoSection {
    margin-top: 1rem;
}

@media (max-width: 1332px) {
    .HowToUseSectionRow {
        padding: 2rem 5rem;
    }
}

@media (max-width: 1090px) {
    .HowToUseSectionRow {
        padding: 2rem 2rem;
    }
}

@media (max-width: 990px) {
    .HowToUseTitle {
        font-weight: bold;
        font-size: 20px;
    }

    .HowToUseDesc {
        font-size: 18px;
    }

    .HoToUseItem {
        font-size: 14px;
    }
}

@media (max-width: 833px) {
    .HowToUseTitle {
        font-weight: bold;
        font-size: 18px;
    }

    .HowToUseDesc {
        font-size: 16px;
    }

    .HoToUseItem {
        font-size: 12px;
    }
}


/* ----------Footer Section ---------------*/

.FooterSection {
    background: #FFF;
    padding: 2rem 3rem 10px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top: 2px solid #f5f5f5;
}

.FooterIcons {
    font-size: 28px;
    color: #ee2556;
    margin-left: 1rem;
}

.FooterText {
    margin-bottom: 1rem;
    font-size: 14px;
}

.FooterTel {
    margin: 20px 0;
    display: flex;
    align-items: center;

}

.FooterTitle {
    font-weight: bold;
    color: #ee2556;
    margin-bottom: 25px;
}

.FooterItems {
    list-style: none;
    padding: 0;
}

.FooterItemsText {
    text-decoration: none;
    color: #393939;
    font-size: 14px;
}

.FooterInstagramBox {
    color: #ee2556;
    align-items: center;
    border: 2px solid #ee2556;
    border-radius: 10px;
    padding: 10px 10px;
}

.FooterTelegramBox {
    color: #0c8fff;
    align-items: center;
    border: 2px solid #0c8fff;
    border-radius: 10px;
    padding: 10px 10px;
    margin-right: 1rem;

}

.FooterSocialIcon {
    font-size: 28px;
}

.FooterSocialText {
    margin-right: 5px;
}

.FooterSocial {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.FooterIconsDot {
    font-size: 20px;
    color: #e7e7e7;
}

.FooterSocialIcon {
    font-size: 28px;
}

.FooterItems li {
    margin-bottom: 15px;
}

.FooterAboutUs {
    margin-top: 70px;
}

.FooterAboutUsText {
    font-size: 0.9rem;
    color: #6b6b6b;
    text-align: justify;
}

.FooterHrCopyRight {
    margin-top: 70px;
}

.FooterCopyRight {
    font-size: 14px;
    color: #919191;
}

.FooterDivider {
    margin-bottom: 2rem;
}

@media (max-width: 1201px) {
    .FooterSection {
        padding-bottom: 5rem;
    }
}

@media (max-width: 992px) {
    .FooterContactUsCol {
        margin-bottom: 1rem;
    }

}


/* ---------- Bottom Navbar Section -----------------*/

.BottomNavbarSection {
    background: var(--bottomNavbarBack-color);
    border-top: 1px solid rgba(151, 151, 151, 0.24);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    z-index: 1001;
    padding: 10px 0;
    border-top: 1px solid #e0e0e0;
    width: 100%;
}

.BottomNavbar {


    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;

}

.BottomNavText {
    font-size: 12px;
    font-weight: bold;
}

.BottomNavbarIcon {
    color: #a1a3a8;
    font-size: 20px;
}

.BottomNavActive {
    color: #005bff;
    font-size: 20px;
}

.BottomNavBtn {

}


/* all tools mobile page */

.ServicesSection {
    max-height: 80vh;
    overflow-y: scroll;

}

.ServicesSection::-webkit-scrollbar {
    display: none;
}


.MobileServicesSection {
    padding: 7rem 4rem 4rem 0;
}

#ALlServiceTabMobile {
    padding: 4rem 20px 5rem;
}


.MobileServicesDot {

    font-size: 25px;
    color: #d4d4d4;

}


.MobileServicesDivider {
    width: 80%;
    color: #d4d4d4;
}


.MobileServicesMainTitle {
    font-size: 20px;
    color: var(--text-color);
    font-weight: bold;
    margin-right: 5px;
}

.MobileServiceTitleSection {
    margin-bottom: 1.3rem;
}

.MobileServicesItems {
    font-size: 16px;
    margin-bottom: 1rem;
}

.MobileServicesItemTitle {
    margin-top: 3px;
    margin-right: 5px;
    font-size: 14px;
    color: var(--text-color);
    -webkit-text-stroke: 0.2px #4f4f4f;
}

.MobilePdfToolsIconBox {
    background-color: #ff2842;
    width: 23px;
    height: 23px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 500;
    font-size: 12px;
}

.MobileAudioToolsIconBox {
    background-color: #ff962b;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
}

.WordToolsIconBox {
    background-color: #2f84ff;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
}

.ImageToolsIconBox {
    background-color: #3bcf26;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
}

@media (max-width: 750px) {
    .MobileServicesSection {
        padding: 5vh 1rem 0 1rem;
    }

    .MobileServicesMainTitle {
        font-size: 14px;
    }

    .MobileServicesItemTitle {

        font-size: 13px;

    }
}

@media (max-width: 680px) {
    .MobileServicesItemTitle {
        font-size: 12px;
    }
}


@media (max-width: 410px) {
    .MobileServicesSection {
        padding: 10vh 1rem 2rem 1rem;
    }

    .MobileServices {
        max-height: 80vh;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    .MobileServiceTitleSection {
        margin-bottom: 20px;
    }
}

@media (max-width: 380px) {

    .MobileServiceTitleSection {
        margin-bottom: 10px;
    }
}


/* Mobile Package Page*/

.MobilePackagesPage {
    background-color: var(--MobilePackagesPage-bg);
    padding-top: 4rem;
}

.PackagesTitleSection {
    border-bottom: 1px solid #E9ECEF;
    margin-left: 1rem;
    margin-right: 1rem;
    line-height: 2;
    align-items: center;
    text-align: center;
    color: white;
    padding: 10px 20px 20px 20px;
    background: linear-gradient(30deg, #063b98 0%, #626fff 100%);
    border-radius: 11px;
    top: 20px;
    left: 15px;
    right: 15px;

}

.PackageTabsNav {
    top: 13rem;
    position: absolute;
    left: 15px;
    right: 15px;
    z-index: 1000;
}

.MobilePackageBox {
    background-color: var(--bg-MobilePackageBox);
    margin-bottom: 10px;
    border-radius: 10px;
}

.MobilePackagesSection {
    margin: auto;
    position: absolute;
    top: 17rem;
    max-height: 60vh;
    overflow-y: scroll;
}

.MobilePackagesSection::-webkit-scrollbar {
    display: none;
}

.PackagesSectionIcon {
    text-align: right;
    font-size: 20px;
}

.PackagesSectionTitle {
    text-align: right;
    font-size: 16px;
}

.PackagesSectionDesc {
    text-align: justify;
    font-size: 10px;
}

.GiftPageLogo {
    min-width: 50px;
}

.PackagesPageTabs {
    font-size: 14px;
    height: 70px;
}

#MobilePackagePage {

    padding-top: 70px;

    padding-bottom: 100px;

}

#OcrPackagesTab {
    padding: 2rem 3rem 2rem 3rem;
    overflow-y: scroll;
}

#OcrPackagesTab::-webkit-scrollbar {
    display: none;
}

#AudioPackagesTab {
    color: #2C4471;
    padding: 2rem 2rem;
    margin: auto;
}

.AudioPackageItem {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.PackagesIconBox {
    color: #0c8fff;
    background-color: #f2f3f6;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    font-size: 17px;
}

.AudioPackages {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: #FAFAFA;
    padding: 1rem 1rem;
    border-radius: 16px;
    margin: auto;
    margin-top: 1rem;
}

.PackageTitle {
    font-size: 14px;
    margin-bottom: 3px;
    text-align: right;
}

.PackageDesc {
    text-align: right;
    font-size: 12px;
    color: #6c757d;
}

.PackageTitle {
    font-size: 16px;
    font-weight: bold;
}

.PackagePrice {
    font-size: 16px;
    font-weight: bold;
    margin-left: 3px;
}

.PackageInfoSection {
    margin-right: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 700px ) {
    #OcrPackagesTab {
        padding: 1rem 2rem 2rem 2rem;
    }

    .PackageTitle {
        font-size: 14px;
    }

    .PackagePrice {
        font-size: 14px;
    }
}

@media (max-width: 567px ) {
    #OcrPackagesTab {
        padding: 2rem 1rem 2rem 1rem;
    }

    .PackagesPageTabs {
        font-size: 10px;
        height: 50px;
    }
}

@media (max-width: 425px ) {
    #OcrPackagesTab {
        padding: 2rem 0 4rem 0;
    }

    .PackageTitle {
        font-size: 14px;
    }

    .PackagePrice {
        font-size: 14px;
    }

    .PackagesIconBox {
        width: 40px;
        height: 40px;
    }

    .PackageDesc {
        font-size: 12px;
    }

}

/* Mobile Profile Page*/

.ProfileMenuSection a {
    color: black;
}

.ProfileBadge {
    top: 18px !important;
    left: 70px;
    text-align: center;
}

.MobileProfileArea {
    margin: auto;
    line-height: 2;
    align-items: center;
    text-align: center;
    padding: 6rem 2rem 5rem;
    /* border-radius: 25% 25% 25% 25% / 0 0 7% 7%; */
    background: linear-gradient(30deg, #063b98 0%, #626fff 100%);
}

.BtnEditProfile {
    font-size: 23px;
    color: white;
    text-align: right;

}

.ShowProfile {

    position: relative;
    padding-left: 12px;
    padding-right: 13px;
}

.BtnEditShowProfileSection {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ShowProfileEmail {
    font-size: 18px;
    color: white;
    margin-left: 10px;
    text-align: left;
}

.ShowProfileNumber {
    font-size: 12px;
    color: white;
    margin-left: 10px;
    text-align: left;
    margin-top: -10px;

}

.BtnEmailIcon {
    font-size: 45px;
    color: white;
}

.bi::before, [class*=" bi-"]::before, [class^=bi-]::before {
    vertical-align: middle;
}


.ProfileInfoBox {
    position: absolute;
    background-color: #ffffff;
    top: 5rem;
    right: 1rem;
    left: 1rem;
    bottom: -10rem;
    border-radius: 16px;
    box-shadow: 0 1px 4px 0 rgba(0, 20, 20, 0.04);
}

.ProfileIconBox {
    padding: 1rem 1rem;
    font-size: 25px;
    color: white;
    height: 50px;
    width: 50px;
    background-color: #4e63e8;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ProfileInfoTitle {
    font-size: 10px;
    color: #727272;
    margin-top: -6px;

}

.ProfileInfoValue {
    font-size: 15px;
    margin-top: 5px;
    color: #727272;

}

.ProfileSubMenu {
    border: 1px solid #e1e1e1;
    padding: 1rem 1rem 1rem 1rem;
    width: 20rem;
    visibility: hidden;
    position: absolute;
    background-color: white;
    z-index: 10;
    opacity: 0;
    top: 45px;
    left: -1px;
    list-style: none;
    border-radius: 10px;
    transition: all 0.5s ease 0s;
    color: black;
}

.ProfileMenu {
    position: relative;
    background-color: transparent;
    border: none;

    border-radius: 5px;
    color: #2980b9;
    cursor: pointer;
    transition: all 0.3s;
    padding: 5px 10px;
}


.ProfileMenu:hover .ProfileSubMenu {
    visibility: visible;
    opacity: 1;
}

.ProfileSubMenuTitle {
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 15px;
}

.ProfileSubMenuItem {
    padding: 10px 10px;
    font-size: 14px;
    border-radius: 10px;
    transition: all 0.3s;

}

.ProfileSubMenuItemIcon {
    margin-left: 1rem;
}

.ProfileSubMenuItem:hover {
    background-color: #f6f6f6;
}

.ProfileMenuSection {
    padding-top: 6rem;
    width: 80%;
    color: #727272;
    overflow-y: scroll;
    padding-bottom: 6rem;
}

.ProfileMenuSection::-webkit-scrollbar {
    display: none;
}


.ProfileMenuItemsCol {
    border-radius: 10px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px 10px 10px;
    margin-bottom: 10px;
    border: 1px solid #ebebeb;
}

.ProfileMenuItemsExit {
    border-radius: 10px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px 10px 10px;
    margin-top: 10px;
    border: 1px solid #ebebeb;
}

.ProfileMenuItemTitle {
    font-size: 14px;
}

.ProfileMenuItemInfo {
    font-size: 14px;
}


.ProfileMenuItemDivider {
    color: #dcdcdc;
}

.ProfileInfoIcon {
    width: 40px;
}

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

.notification-badge {
    padding-top: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    background-color: #e92437;
    color: white;
    font-size: 16px;
    font-weight: bold;
    border-radius: 50%;
}

.BadgeValue {
    font-size: 10px;
}

.MobileProfilePageDivider {
    color: #d7d7d7;
    margin: 0;
}

@media (min-height: 888px) {

}


/* Modals */

.ModalBtnBack {
    color: #4c9dec;
}


.modal {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    border: none;
    box-shadow: 0 0 18px 1px rgb(0 0 0 / 7%);
    padding-right: 0 !important;
}


.CustomModal .modal-header {
    border: none;

}

.CustomModal .modal-content {
    border: none;
    display: flex;
    flex-direction: column;

}

.CustomModal .modal-title {
    color: #000000;
    font-size: 20px;
    font-weight: 900;
}

#NewMessageModal .modal-title {
    color: white;
    font-size: 20px;
    font-weight: 900;
}

.CustomModal .modal-footer {
    border: none;
    padding-top: 0;
    padding-bottom: 15px;
}

.CustomModal .SelectPagesHelp {
    padding: 15px 15px 0px 5px;
    margin: 0;
    font-size: 12px;
    color: #2f2f2f;
    line-height: 25px;
}

.CustomModal .BtnModalConfirm {
    font-weight: 600;
    font-size: 1rem;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.BtnModalConfirmLoading {
    font-weight: 600;
    font-size: 1rem;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #b8b8b8;
    border: none;
}

.CustomModal .BtnModalConfirm:hover {
    background: #3d71a4;
    color: white;


}

.CustomModal .ModalBtnClose {
    color: #F84C62;
    font-size: 18px;
    padding-left: 0;
    border: none;
    background-color: transparent;
}

.ModalBtnClose {
    color: #F84C62;
    font-size: 18px;
    padding-left: 0;
    border: none;
    background-color: transparent;
}

.CustomModal .modal-dialog-centered {
    display: flex;
    min-height: calc(100% - var(--bs-modal-margin) * 2)
}

/* Login Register modal */


.ModalTitle i {
    margin-right: 6px;
    vertical-align: middle;
}

#LoginModal .ModalBox {
    width: 70%;
}

#verification-modal .ModalBox {
    width: 70%;
}

#LoginRegisterModal .ModalBox {
    width: 70%;
}

#LoginRegisterModal .modal-body {
    padding: 2rem 1rem;
}

#LoginRegisterModal {
    padding-right: 0 !important;
}

.CustomModal .ModalTitle {
    font-weight: 600;
    font-size: 19px;
}

.ModalBtn {
    font-size: 14px;
}

.ModalBox {
    margin: auto;
    border: none;
    /*width: 80%;*/
    padding: 10px;
}

.ModalTitleSection {
    margin-bottom: 1rem;
}

.LoginRegisterHelpText {
    font-size: 14px;
    margin-bottom: 20px;
    font-weight: 600;
}

.ModalInputSection {
    margin-bottom: 20px;
    position: relative;
}

.ErrorSection {
    margin-bottom: 1rem;
    margin-top: 1rem;
    font-size: 14px;
}

.LoginRegisterInputText {
    height: 45px;
    border-radius: 8px;
    font-size: 14px;
    color: #000;
    -webkit-text-stroke: 0.2px;
}

#LoginRegisterInputText {
    height: 45px;
    border-radius: 8px;
    font-size: 14px;
    color: #000;
    -webkit-text-stroke: 0.2px;
}

.LoginRegisterInputText, .page-input::placeholder {
    text-align: left;
    font-size: 14px;
}


.form-control.is-valid:focus, .was-validated .form-control:valid:focus {
    box-shadow: none;
    border: 1px solid #2b63ef;
    background-color: transparent;
}

.form-control:focus {
    background-color: transparent;
}


/* register modal */


.RegisterNumberEmail {
    margin-bottom: 1rem;
    color: #495057;
    font-size: 12px;
    transition: All 0.2s;
    position: relative;
}

.RegisterNumberEmail::placeholder {
    text-align: right;
}

.RegisterSectionEmailNumber {
    width: 90%;
    overflow-wrap: anywhere;
    direction: rtl;
    text-align: start;
}

.UserEmailNumberTitle {
    font-size: 14px;
}

.ErrorSection {
    margin-bottom: 1rem;
    font-size: 12px;
}


.BtnModalBack {
    padding: 0;
    margin-left: 5px;
    font-size: 20px;
}

.BtnChange {
    padding: 0;
    margin-left: 5px;
    color: #0a53be;
    font-size: 12px;
}

.BtnChange:focus {
    --bs-btn-border-width: none !important;
}

.BtnRegisterBack:focus {
    --bs-btn-border-width: none !important;
}

.btn-close {
    box-shadow: none !important;
}

.EmailNumberSection {
    margin-bottom: 10px;
}

.OrderCalItems {
    margin: 5px 0;
    padding: 0 5px;
}

.OrderCalcPriceSelect {
    font-size: 0.9rem;
}

/*Login Modal */

#LoginModal {
    padding-right: 0 !important;
    animation-name: puff-in-center;
}

.LoginText {
    font-size: 13px;
    margin-bottom: 20px;
    font-weight: 600;
    background-color: #e6f3ff;
    padding: 15px 15px;
    border-radius: 8px;
    color: #003a71;
}

.LoginWithCode {
    font-size: 0.9rem;
    margin-top: 20px;
    line-height: 30px;
    font-weight: 600;
}

.ChangeUserPassword {
    font-size: 0.9rem;
    line-height: 30px;
    font-weight: 600;
}

.BtnShowPassword {
    position: absolute;
    z-index: 1;
    top: 8px;
    left: 10px;
}

.LoginIcons {
    -webkit-text-stroke: 0.3px;
    margin-left: 5px;
}

.LoginPasswordInput {

    direction: ltr;
    color: #495057;
    font-size: 14px;
    height: 40px;
    transition: All 0.2s;
    padding-left: 2rem;
    font-weight: bold;

}


.CaptchaInput {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 513px) {

    .ModalBox {
        width: 100%;
        margin: 0;
        margin-top: auto !important;
        border-bottom-left-radius: 0px;
    }

    .modal {
        --bs-modal-margin: 0rem;
    }


}

/* package modal */
#PackagesModal {
    background: rgba(255, 255, 255, 0.5);
}

.PackagesModalBox {
    width: 100%;
    margin: auto;
    border: none;
}

.ModalPackagesSection {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.PackagesBuyNotic {
    font-size: 13px;
    text-align: right;
    background: #ffffff;
    border-radius: 5px;
    margin: 20px 10px 0 0;
    width: 100%;
}

.PackageItem {
    padding: 1rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ModalPackageTitle {
    font-size: 14px;
    font-weight: bold;
}

.ModalPackageDesc {
    font-size: 13px;
}

.ModalPackagePrice {
    font-size: 14px;
    font-weight: 600;
    color: cadetblue;
}

.ModalPackagePriceDesc {
    font-weight: 200;
    font-size: 10px;
}

.BtnModalBuyPackage {
    border: none;
    outline: 1px solid #8ED4FB;
    border-radius: 5px;
    background-color: white;
    color: #0087D2;
    font-size: 13px;
    height: 30px;
    width: 60px;
    font-weight: bold;
    transition: all 0.2s;
}

.BtnModalBuyPackage:hover {
    background-color: #0087D2;
    color: white;
}

.PackagesIcon {
    margin-left: 5px;
    font-size: 15px;
}

.ActivePackageSectionTitle {
    margin-top: 1rem !important;
}

.ActivePackagesWarning {
    text-align: center;
    margin-bottom: 2rem;
    margin-top: 1rem;
    font-size: 12px;
}

/* price modal */
.PriceItem {
    padding: 1rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.CalculatePrice {
    direction: ltr;
}

.CalculatePriceSection {
    margin-top: 1rem;
    padding: 1rem 1rem;

}

.ModalCalcInput {
    margin-top: 1rem;
    direction: ltr;
}

.ModalPriceTitleSection {
    font-weight: bold;
    background-color: #f7f9fb;
    border-radius: 5px;
    color: #2c3e50;
}

.OrderPriceList td {
    font-size: 0.9rem;
    padding: 10px;
}

.OrderPriceListTitle {
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 15px;
}

.CalcItem {
    font-size: 14px;
    height: 40px;
}

.CalcItem::placeholder {
    font-size: 14px;
}

/* Purchase Section */

.PurchaseSection {
    padding: 8rem 3rem 10rem 3rem;
    display: flex;
    min-height: 100vh;
}

.PurchaseSectionContent {
    max-width: 1500px;
    min-height: 10rem;
}

.PurchasePayMethodSection {
    background-color: white;
    border-radius: 10px;
    border: 1px #EAEAEA solid;
    height: 100%;
    padding-bottom: 1rem;
}

.PurchasePayTitleSection {
    display: flex;
    align-items: center;
    color: #7f7f7f;
    padding: 1rem;
}

.PurchasePayMethodSectionIcon {
    font-size: 20px;
    margin-left: 10px;
}

.PurchasePayMethodSectionTitle {
    font-size: 18px;
    font-weight: bold;
}


.BtnPurchaseEditFiles {
    font-size: 16px;
    font-weight: bold;

}


.FullPageDivider {
    padding: 0;
    margin: 0;
    color: #EAEAEA;
    opacity: 1;
}

.PurchasePayMethods {
    padding: 1rem 3rem;
}

.PurchaseMethodIcon {
    font-weight: bold;
    font-size: 20px;
    margin-left: 10px;
}

.ConvertSectionFooter {
    margin-top: auto;
}

.PurchaseMethodText {
    font-size: 16px;
    font-weight: bold;
}

.IncreaseWalletCredit {
    color: red;
    font-size: 14px;
    font-weight: bold;
}

.WalletDesc {
    margin-top: 10px;
    font-size: 14px;
    color: #6A6A6A;
}

.CreditPurchase {
    margin-top: 15px;
    border: 1px solid #F7F7F7;
    padding: 10px 15px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.5s;
}


.CreditPurchase:hover {
    margin-top: 15px;
    border: 1px solid #517eff2b;
    cursor: pointer;
}

.PackagePurchase {
    margin-top: 15px;
    border: 1px solid #F7F7F7;
    padding: 10px 15px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.5s;
}

.PackagePurchase:hover {
    margin-top: 15px;
    border: 1px solid #517eff2b;
    cursor: pointer;
}

.BtnUseCredit {
    border: 1px solid #8ED4FB;
    border-radius: 5px;
    background-color: white;
    color: #0087D2;
    font-size: 13px;
    height: 30px;
    width: 90px;
    font-weight: bold;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
}

.BtnUseCredit:hover {
    background-color: #0087D2;
    color: white;
    transition: all 0.4s;
}


.BtnBuyNewPackage {
    border: 1px solid #8ED4FB;
    border-radius: 5px;
    background-color: white;
    color: #0087D2;
    font-size: 13px;
    height: 30px;
    width: 90px;
    font-weight: bold;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
}

.BtnBuyNewPackage:hover {
    background-color: #0087D2;
    color: white;
    transition: all 0.4s;
}

.ConvertFileNameSection {
    padding: 20px 15px;

}

#PdfToExcelPage .ConvertFileNameSection, #PdfToExcelPage .FileNameText {

    text-align: center;
}


.BtnUsePackage {
    border: 1px solid #8ED4FB;
    border-radius: 5px;
    background-color: white;
    color: #0087D2;
    font-size: 13px;
    height: 30px;
    width: 90px;
    font-weight: bold;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
}

.BtnUsePackage:hover {
    background-color: #0087D2;
    color: white;
    transition: all 0.4s;
}


.PackageSection {
    margin-top: 2rem;
}

.PurchaseMethodItemBalanceText {
    font-size: 14px;
    font-weight: bold;
    color: #7f7f7f;
    margin-left: auto;
}

.CreditPurchaseLabel {
    display: flex;
    align-items: center;
}

.PackagePurchaseLabel {
    display: flex;
    align-items: center;
}

.PurchaseMethodItemBalance {
    font-size: 16px;
    font-weight: bold;
    color: #7f7f7f;
}

.PurchasePageDescSection {
    margin-top: 5px;
}

.PurchasePageDesc {
    margin-top: 5px;
    font-size: 12px;
}

.PurchasePaySection {
    background-color: #ffffff;
    border-radius: 10px;
    border: 1px #EAEAEA solid;
    margin-right: 1rem;
    justify-content: space-between;
    display: flex;
    flex-direction: column;
}


.PurchasePayInfo {
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    font-size: 14px;
    color: #6A6A6A;
    font-weight: 700;
}

.PurchaseOffCodeSection {
    padding-top: 2rem;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    color: #7f7f7f;
    display: flex;
    justify-content: space-between;
}

.BtnOffCodeApply {
    border: none;
    border-radius: 5px;
    background-color: white;
    color: #0087D2;
    height: 30px;
    font-weight: bold;
    padding-top: 5px;
    padding-left: 7px;
    padding-right: 7px;
}


.PayWarningSection {
    padding: 0 2rem;
    font-size: 14px;
    text-align: justify;
}

.PayWarningSectionContent {

    display: flex;
    align-items: center;
    padding: 10px 10px;
    border-radius: 10px;
    line-height: 20px;
}

.PayWarningIcon {
    font-size: 30px;
    margin-left: 5px;
}

.PayFinalPriceSection {
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    padding: 1rem;
}

.BtnPaySection {
    padding: 1rem 4rem 1rem;
}


.LabelCheckbox {
    border: none !important;
}

.lowPriceDesc{
    font-size: 13px;
    text-align: justify;
}

.BtnPay {
    width: 100%;
    background-color: #EF4056;
    text-align: center;
    border-radius: 5px;
    color: white;
    padding: 10px 0;
    border: none;
    font-weight: bold;
}

.OffCodeInputSection {
    width: 50%;
    margin: auto;
}

.OffCodeInput {
    height: 30px;
}

.PurchaseSectionDivider {
    padding: 0;
    margin: 0;
    color: #EAEAEA;
    opacity: 1;
    width: 80%;
    margin: auto;
}

.CreditUncheckedIcon {
    color: #dfdfdf;
}


/* */
/* Convert PDF To Word Section */

.ConvertSection {
    padding: 6rem 3rem 10rem 3rem;
    min-height: 85vh;
}

.ConvertSettingText {
    font-size: 12px;
    color: #108ed3;
}

.ConvertSettingsMobile {
    margin-right: 18px;
}

.SelectConvertOptionsTitle {
    padding-left: 15px;
}

.StartConvertSection {
    box-shadow: 0px 3px 9px 0px rgb(129 129 129 / 5%);
    background-color: white;
    border-radius: 10px;
    border: 1px #F7F4F4 solid;
    position: relative;
    min-height: 60vh;
    display: flex;
    flex-direction: column;

}

.ConvertTitleSection {
    display: flex;
    align-items: center;
    color: #7f7f7f;
    padding: 15px 10px 15px 0;
}

.ConvertPageDivider {
    padding: 0;
    margin: 0;
    color: #EAEAEA;
    opacity: 1;
}


.ConvertSectionTitle {
    font-size: 16px;
    font-weight: bold;
}

.ConvertSectionIcon {
    font-size: 25px;
    margin-left: 10px;
}

.ConvertRows {

    font-weight: bold;
    color: #555555;
    font-size: 14px;
}

.ConvertRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    border: none;
    padding: 20px 0;
    text-align: right;
    font-weight: bold;
    color: #525252;
    border-radius: 8px;
}

.TitleConvertRow {
    display: flex;
    justify-content: space-between;
    padding: 20px 15px;
    background-color: #f8f8f8;
    align-items: center;
}

.ConvertRowConvertMethod {
    text-align: center;
    width: 55%;
}

.SettingIcon {
    margin-left: 5px;
}

.ConvertSectionIcon {
    font-size: 20px;
    margin-left: 5px;
}

.CheckBoxSection {
    margin-left: 15px;
}

.ConvertSectionContent {
    position: relative;
    z-index: 1;
}

.ConvertBox {
    position: absolute;
    background-color: #f3f3f3;
    top: -25px;
    bottom: 0;
    right: -25px;
    z-index: -1;
    width: 99px;
    height: 100px;
    border-radius: 16px;
    transform: rotate(107deg);

}

.ConvertPageBar {
    position: absolute;
    background-color: #418cff;
    top: 17px;
    bottom: 0;
    right: -1px;
    z-index: 0;
    width: 4px;
    height: 25px;
    border-radius: 20px;
}

.accordion-button {
    font-size: 13px !important;
}

.accordion-button::after {
    margin-left: 0 !important;
    margin-right: auto;
}

.accordion-body {
    font-size: 13px;
}

.ConvertFaqSection {
    border: 1px #F7F4F4 solid;
    position: relative;
    background-color: #ffffff;
    border-radius: 10px;
    margin-right: 1rem;
    height: 100%;
    box-shadow: 0px 3px 9px 0px rgb(129 129 129 / 5%);

}

.accordion-button:focus {
    box-shadow: none;
}

.ConvertRowTitles {
    padding-bottom: 1rem;
}

.ConvertRowFile {
    padding-top: 1rem;
    padding-bottom: 1rem;
}


#ImageCompressPage .BtnConvert {

    background-color: transparent;
    border: none;
    border-radius: 5px;
    border: 1px solid #0087D2;
    color: #0087D2;
    font-size: 13px;
    height: 40px;
    width: 110px;
    font-weight: bold;
}

.BtnConvert {
    background-color: transparent;
    border: none;
    border-radius: 5px;
    border: 1px solid #0087D2;
    color: #0087D2;
    font-size: 13px;
    height: 40px;
    width: 140px;
    font-weight: bold;
}

.BtnInQueue {
    border: 1px solid #ffc585;
    border-radius: 5px;
    background-color: white;
    color: #ffc585;
    font-size: 13px;
    height: 40px;
    width: 140px;
    font-weight: bold;
    transition: all 0.2s;
}

.BtnInQueue:hover {
    border: 1px solid #ffc585;
    border-radius: 5px;
    background-color: #ffc585;
    color: #ffffff;
    font-size: 13px;
    height: 40px;
    width: 115px;
    font-weight: bold;

}

.BtnConvertDone {
    background-color: transparent;
    border: none;
    border-radius: 5px;
    border: 1px solid #44a606;
    color: #44a606;
    font-size: 13px;
    height: 40px;
    width: 110px;
    font-weight: bold;


}

.BtnConvertDone:hover {
    background-color: #44a606;
    color: white;
    transition: all 0.4s;
}

.BtnConvert:hover {
    background-color: #0087D2;
    color: white;
    transition: all 0.4s;
}

.BtnCancelConvert:hover {
    background-color: #d20000;
    color: white;
    transition: all 0.4s;
}

.BtnConvert, .BtnCancelConvert {
    transition: all 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

.convertDoneGroup {
    height: 40px;
    width: 140px;
}

.BtnCancelConvert {
    position: relative;
    display: inline-block;
    background-color: white;
    cursor: pointer;
    overflow: hidden;
    border-radius: 5px;
    /* background-color: white; */
    color: rgb(255, 0, 0);
    font-size: 13px;
    height: 40px;
    width: 140px;
    font-weight: bold;
    border: 2px solid rgb(255, 0, 0);
}

.BtnCancelConvert:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: rgba(255, 0, 0, 0.3);
    width: var(--progress);
    transition: width 0.4s ease;
}

.BtnCancelConvert:after {
    content: attr(data-progress);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    color: rgb(255, 255, 255);
    font-size: 18px;
    z-index: 1;
}

.ConvertCol {
    padding-bottom: 1rem;
    padding-top: 1rem;
}

.OtherServicesSection {
    box-shadow: 0px 3px 9px 0px rgb(129 129 129 / 5%);
    margin-top: 1rem;
    background-color: white;
    border-radius: 10px;
    border: 1px #F7F4F4 solid;
    height: 100%;
    position: relative;
}

.OtherServicesItems {
    padding: 20px 20px;
}

.OtherServicesItemsSection {
    padding: 20px 1rem;
    display: flex;
    justify-content: space-between;
}

.OtherServicesItem {
    color: #878787;
    font-size: 12px;
    -webkit-text-stroke: 0.2px #878787;
    display: flex;
    align-items: center;
    padding: 0;
}

.OtherServiceIcon {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.accordion {
    --bs-accordion-btn-icon-width: 14px;
}

.ConvertRequestSection {
    display: flex;
    justify-content: space-between;
    padding: 1rem 1rem 1rem 1rem;
    color: #666666;
}

.SelectConvertMethod {
    text-align: center;
}

.ConvertRequestText {
    font-size: 12px;
    display: flex;
    align-items: center;
}

.ConvertRequestIcon {
    margin-left: 5px;
}

.BtnConvertRequest {
    font-size: 12px;
    color: #0087D2;
}

.SelectConvertOptions {
    text-align: left;
}

.SelectAllFileCheck:hover {
    cursor: pointer;
    color: #1e1e1e;
    transition: all 0.5s;
}

@media (max-width: 1503px) {


    .SelectConvertMethod {
        text-align: center;
    }

    .BtnConvertRequest {
        padding-right: 16px;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .ConvertRequestSection {
        display: flex;
        flex-direction: column;
        align-items: start;
    }

    .ConvertSection {
        padding: 7rem 1rem 10rem 1rem;
    }
}

@media (max-width: 1240px) {
    .ConvertRowConvertMethod {
        width: 60%;
    }

    .OtherServicesForXl {
        display: none;
    }
}

@media (max-width: 1150px) {
    .ConvertRowConvertMethod {
        width: 65%;
    }

    .accordion-button {
        font-size: 10px !important;
    }

}

@media (max-width: 992px) {

    .filepond--list-scroller {

        max-height: 10rem;

    }

    html, body {
        height: 100%;
        overflow-x: hidden;
        position: relative;
    }

    .PopularSectionTitle {
        /*padding-bottom: 1rem;*/
    }

    #ALlServiceTabMobile {
        padding: 5rem 20px 5rem;
    }

    .TopNavBar {
        position: fixed;
        background: #fcfcfc;
    }

    .ConvertFaqSection {
        margin-right: 0;
        margin-top: 1rem;
    }

    .SelectConvertMethod {
        text-align: center;
    }

    .SelectConvertOptions {
        text-align: left;
    }

    .BtnConvert,
    .BtnCancelConvert,
    .ProcessInQueue,
    .BtnConvertDone {
        width: 140px;
    }


    .accordion-button {
        font-size: 14px !important;
    }

}

@media (max-width: 575px) {

    .ConvertSection {
        padding: 5rem 1rem 10rem 1rem;
    }

    .SelectConvertMethod {
        text-align: center;
    }

    .OtherServicesItemsSection {
        display: flex;
        flex-wrap: wrap;
        align-items: start;
    }

}

@media (min-width: 1920px) {


}


/* ---------- Orders Page ---------------- */

.OrderUploaderSection .UploaderInput {
    border: none;
}


.SelectFileLeftOrderArea {
    margin: auto 0;
    margin: 23vh 0 0;
}

.OrderDesc {
    margin-top: 10px;
    color: #303030;
    line-height: 230%;
    font-size: 14px;
    font-weight: 400;
    text-align: justify;
    width: 90%;
}

.OrderDescArea {
    margin-top: 4rem;
    margin: auto;
    margin: 25vh 0 0;
    padding-left: 150px;
}

.BtnOrderBack {
    font-size: 30px;
    color: #0c0c0c;
    padding-left: 1rem;
}

.BtnOrderBack:hover {
    cursor: pointer;
}

.OrderPricingForm {
    background: rgb(255, 255, 255);
    background: linear-gradient(90deg, rgb(252 252 252) 0%, rgb(252 252 252) 50%, rgb(255 239 252) 100%);
    font-weight: bold;
    color: #A63489;
    padding: 6px 15px;
    border-radius: 10px;
    text-align: right;
}

.OrderPricingIcon {
    font-size: 22px;
}

.OrderPricingFormText {
    margin-right: 10px;
}

.IndexFileAreaSpecsIcon {
    font-size: 28px;
    color: #c4c4c4;
}

.IndexFileAreaSpecsText {
    margin-right: 10px;
    font-size: 15px;
    color: #303030;
}

.IndexFileAreaSpecsText {
    margin-right: 10px;
    font-size: 15px;
    color: #303030;
}

.MyBreadCrumbContent {
    padding-left: 30px;
    background: #fcfcfc;
    font-size: 18px;
}

.OrderFormArea {
    padding: 15px;
    border-radius: 7px;
    padding-right: 0;
}

.MyBreadCrumbNewProject {
    width: 98%;
    border-bottom: 1px solid #F0F0F1;
    line-height: 0.1em;
    margin: 25px 0 25px;
    font-weight: bold;
    text-align: right;
}

.OrderShowRules {
    color: #0275ff;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
}

.OrderShowRules {
    color: #0275ff;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
}

.OrderSelectFileSection {
    background: #ffffff;
    padding: 30px 0 0;
    border: 1px dashed #ced4da;
    border-radius: 10px;
}

.OrderDragDropText {
    font-size: 13px;
    color: #d9d9d9;
}

.BtnOrderSelectFile {
    margin: auto;
    animation: none;
    background: #ffffff;
    color: #007bff;
    height: 40px;
    border-radius: 5px;
    width: fit-content;
}

.OrderSubmitBtn {
    font-size: 16px;
    width: 120px;
    height: 45px;
    font-weight: bold;
}

.OrderSubmitArea {
    text-align: left;
}

.landingindexarea {
    height: 100%;
}

.OrderSelectFileArea {

}

.OrderPageSection {
    width: 100%;
    border-radius: 20px;
    min-height: 100vh;
}

.SelectOrderTime {
    height: 45px;
    border-radius: 8px;
    font-size: 14px;
    color: #000;
    -webkit-text-stroke: 0.2px;
}

.BtnOrderSelectFile:hover {
    background: #007bff;
    color: #ffffff;
    cursor: pointer;
}

.OrderPriceListButton:hover {
    cursor: pointer;
}

.OrderPriceCalcButton:hover {
    cursor: pointer;
}

.ErrorBox {
    position: absolute;
    top: 50px;
    right: -110px;
    top: 0;

}

.ErrorBoxHeader {
    background-color: red;
    color: white;
}

.ErrorBoxContent {
    background-color: #fbfbfb;
}

.OrderRules {
    font-size: 14px;
    display: flex;
    align-items: center;
    align-content: center;
}

.uploaderToast {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    background: white;
    z-index: 1;
}

.ToastUploadFiles {
    max-height: 10rem;
    overflow-y: scroll;
    direction: ltr;
}

.ToastFileName {
    width: 30%;
}

.ToastUploadFiles a {
    text-decoration: none !important;
    color: #4a3fff;
    background: aliceblue;
    border-radius: 5px;
    padding: 5px;
    font-size: 10px;
}

textarea::-webkit-scrollbar-track {
    background-color: #ffffff;
    border-radius: 10px;
}

textarea::-webkit-scrollbar {
    width: 5px;
    background-color: #ffffff;

}

textarea::-webkit-scrollbar-thumb {
    background-color: #d8e7ff;
    border-radius: 10px;

}


.ToastUploadFiles::-webkit-scrollbar-track {
    background-color: #ffffff;
    border-radius: 10px;
}

.ToastUploadFiles::-webkit-scrollbar {
    width: 5px;
    background-color: #ffffff;

}

.ToastUploadFiles::-webkit-scrollbar-thumb {
    background-color: #f8fafd;
    border-radius: 10px;

}


.ToastUploadItem {
    padding-right: 1rem;
    padding-left: 0rem;
}


.EditingUniDocLabel {
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    padding: 12px;
    border-radius: 6px;
    color: #856404;
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.orderCategory {
    border: 2px solid #e9ecef;
    border-radius: 8px;
}

.orderCategory:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.progress-circle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}


.progress-circle svg {
    transform: rotate(-90deg); /* Rotate to start progress from the top */
}

.progress-circle__background {
    fill: none;
    stroke: #e0e0e0; /* Background color */
    stroke-width: 5;
    stroke-dasharray: 125.66; /* Updated circumference */
}

.progress-circle__foreground {
    fill: none;
    stroke: #007fff; /* Progress color */
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 125.66; /* Updated circumference */
    stroke-dashoffset: 125.66; /* Start fully hidden */
    transition: stroke-dashoffset 0.5s ease;
}

/* Example: Set to 100% progress */
.progress-circle[data-progress="100"] .progress-circle__foreground {
    stroke-dashoffset: 0; /* Fully reveal the stroke */
}

/* Example: Set to 50% progress */
.progress-circle[data-progress="50"] .progress-circle__foreground {
    stroke-dashoffset: calc(125.66 * (1 - 0.5)); /* 50% progress */
}

.progress-circle__text {
    position: absolute;
    font-size: 20px;
    color: #111;
}

.toast {
    --bs-toast-border-radius: 10px !important;
    border: none;
    --bs-toast-bg: rgb(255 255 255 / 100%);
}

.ToastUploadItem:hover {
    background-color: rgb(248, 249, 250);
    transition: 0.5s all;
}

.progress-circle__checkmark {
    position: absolute;
    font-size: 20px;
    color: #28a745;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    right: 0;
    left: 0;
}

#progress-circle__checkmark {
    position: absolute;
    font-size: 20px;
    color: #28a745;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    right: 18px;
    left: unset;
}


.BtnToastAccordion {
    width: 50px;
    --bs-accordion-btn-icon-width: 17px;
    --bs-accordion-btn-padding-x: 1rem;
    --bs-accordion-btn-padding-y: 1rem;
    opacity: 0.7;
}

.accordion-button:hover {
    background-color: rgb(248, 249, 250);
}

.accordion-button:not(.collapsed) {
    background-color: transparent;
    box-shadow: none;

}

.BtnBackToUpload {
    margin-right: 5px;
    font-size: 12px;
    color: #0a58ca;
    cursor: pointer;
}

.CloseToastBtn {
    width: 5px;
    height: 5px;
    margin-left: 1rem;
}

.btnCloseToast {
    padding: 1.25rem;
    font-size: 10px;
}

.btnCloseToast:hover {
    background-color: rgb(248, 249, 250);
    cursor: pointer;
}

@media (max-width: 992px) {
    .OrderDescArea {
        width: 100%;
        margin: 10vh 0 0;
    }

    .AboutUsText {
        text-align: justify;
    }

    .uploaderToast {
        bottom: 5rem;
        right: 4rem;
    }

    .SelectFileLeftOrderArea {
        margin: 2vh 0 0;
    }
}

@media (max-width: 460px) {
    .uploaderToast {
        bottom: 73px;
        right: 0;
        left: 0;
        width: 100%;
    }

    .ModalBox {
        border-radius: 20px 20px 0px 0px;

    }


}

/* Add this CSS to your stylesheet */


@keyframes puff-in-center {
    0% {
        margin-top: 2rem;
        -webkit-filter: blur(4px);
        filter: blur(4px);
        opacity: 0;
    }
    50% {
        margin-top: 0;
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
    100% {
        margin-top: 0;
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }

}

@keyframes puff-in-right {
    0% {
        margin-left: 2rem;
        -webkit-filter: blur(4px);
        filter: blur(4px);
        opacity: 0;
    }
    100% {
        margin-left: 0;
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

.RadioSelectPage {
    font-size: 14px;
    border: none;
    padding: 15px 10px;
    text-align: right;
    font-weight: bold;
    color: #949494;
    border-radius: 8px;
}

.RadioSelectTime {
    font-size: 14px;
    border: none;
    padding: 15px 10px;
    text-align: right;
    font-weight: bold;
    color: #949494;
    border-radius: 8px;
}


.TextInput {
    padding: 10px;
    font-size: 14px;
}

.firstSelectPageRange {
    margin-bottom: 24px;
}

.firstSelectTimeRange {
    margin-bottom: 24px;
}

.repeatedSelectPage {
    border: 1px solid red;
}

#FilePageCount {
    font-size: 11px;
    text-align: left;
    color: #b6b6b6;
    border-right: 1px solid #ced4da;
    background: #ffffff;
}


.FreeConvertHelp {
    font-size: 10px;
    text-align: right;
    background: #ffffff;
    border-radius: 5px;
    margin: 10px 5px 0px;
    color: #6c757d;
    width: 100%;
}

.FreeConvertModalContent {
    margin: auto;
    width: 70%;
}

.TestConvertDesc {
    font-size: 13px;
    margin-bottom: 20px;
    font-weight: 600;
    background-color: #e6f3ff;
    padding: 15px 10px;
    border-radius: 8px;
    color: #003a71;
}


#SelectSomePage:checked + .RadioSelectPage {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

#selectSomeTimeInput:checked + .RadioSelectPage {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.BtnRemovePageRange:hover {
    cursor: pointer;
}

.selectPageCheckedIcon {
    color: #4D9EEE;
    margin-left: 5px;
}

.CheckIcon {
    margin-left: 5px;
    color: #cdcdcd;
}

.CheckedIcon {
    color: #4D9EEE;
    margin-left: 5px;
}

.UncheckedIcon {
    margin-left: 5px;
    color: #cdcdcd;
}

.ActiveRadioIcon {
    color: #4D9EEE;
    margin-left: 5px;
}

#SelectTimeModal .btn-check:checked +,
#SelectTimeModal .btn.active,
#SelectTimeModal .btn:first-child:active,
#SelectTimeModal :not(.btn-check) + .btn:active,
#SelectTimeModal .content-wrapper {
    color: black;
    background-color: #F7F9FB;
    border: none;
    font-weight: bold;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;

}


#SelectPageModal .btn-check:checked + .btn,
#SelectPageModal .btn.active,
#SelectPageModal .btn.show,
#SelectPageModal .btn:first-child:active,
#SelectPageModal :not(.btn-check) + .btn:active {
    color: black;
    background-color: #F7F9FB;
    border-color: transparent;
    font-weight: bold;
}


.selectPageCheckedIcon {
    display: none;
    color: #4D9EEE;
}

.selectPageUncheckedIcon {
    margin-left: 5px;
    color: #cdcdcd;
}


input[type="radio"]:checked + label .selectPageCheckedIcon {
    display: inline-block;
}

input[type="radio"]:checked + label .selectPageUncheckedIcon {
    display: none;
}


.SelectSomePageDiv .content-wrapper {
    padding: 0 10px 1rem 10px;
    background: #f7f9fb;
    border-radius: 0 0 8px 8px;
}

#SelectTimeModal .content-wrapper {
    padding: 0 10px 1rem 10px;
    background: #f7f9fb;
    border-radius: 0 0 8px 8px;
}

.page-range-container {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.SelectPageRanges {
    margin-bottom: 2rem;
    --bs-gutter-x: 1.1rem;
}

.page-range-inputs {
    background-color: #fff;
    padding: 5px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: 400px;
}

.page-input {
    border-radius: 6px;
    border: none;
    text-align: center;
}

.page-input::placeholder {
    text-align: center !important;
    color: #C0C0C0;
}

.SelectPageModalContent {
    margin: auto;
    width: 65%;
}

.SelectPageRanges {
    margin-bottom: 2rem;
    --bs-gutter-x: 1.1rem;

    max-height: 200px;
    overflow-y: scroll;
    overflow-x: hidden;
}


.SelectPageRanges::-webkit-scrollbar {
    color: #0a53be;
    border-radius: 20px;
    width: 2px;
    margin-left: 5px;
}

.SelectPageRanges::-webkit-scrollbar-thumb {
    background-color: #dedede;
    border-radius: 20px;
    width: 2px;
    margin-left: 5px;

}

.time-range-inputs {
    display: flex;
    align-items: center;
    gap: 5px;
}

.time-input {
    width: 30px;
    text-align: center;
    padding: 0;
    border: none;
    color: #555555;
}

.time-input::placeholder {
    color: #b7b7b7;
}

.time-label {
    font-size: 18px;
    font-weight: 300;
    color: #8b8b8b;
}

.time-range-inputs {
    background-color: #fff;
    padding: 10px;

    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: 400px;
}

.SelectSomeTimeRanges {
    max-height: 200px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.SelectSomeTimeRanges::-webkit-scrollbar {
    color: #0a53be;
    border-radius: 20px;
    width: 2px;
    margin-left: 5px;
}

.SelectSomeTimeRanges::-webkit-scrollbar-thumb {
    background-color: #dedede;
    border-radius: 20px;
    width: 2px;
    margin-left: 5px;

}


.BtnRemovePageRange {
    font-weight: bold;
    background: #ffe5e5;
    padding: 0px 6px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    color: #d50000;
    font-size: 11px;
    margin-right: auto;
    margin-left: 6px;
    margin-top: 0;
    text-align: right;
    width: auto;
}

.BtnRemoveTimeRange {
    font-weight: bold;
    background: #ffe5e5;
    padding: 0px 6px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    color: #d50000;
    font-size: 11px;
    margin-right: auto;
    margin-left: 6px;
    margin-top: 0;
    text-align: right;
    width: auto;
}

.BtnRemoveTimeRange:hover {
    cursor: pointer;
}

.Icon5x {
    margin-left: 5px;
}

.Icon2x {
    margin-left: 5px;
}

.selectPageArrow {
    color: #4d9eee;
}

.BtnAddPageRange {
    border: 1px solid #4d9eee;
    background-color: transparent;
    border-radius: 5px;
    font-size: 12px;
    padding: 7px;
    color: #4d9eee;
    transition: all 0.3s;
}

.BtnAddTimeRange {
    border: 1px solid #4d9eee;
    background-color: transparent;
    border-radius: 5px;
    font-size: 12px;
    padding: 7px;
    color: #4d9eee;
    transition: all 0.3s;
}

.BtnAddPageRange:hover {
    border: 1px solid #4d9eee;
    background-color: #4d9eee;
    border-radius: 5px;
    font-size: 12px;
    padding: 7px;
    color: #ffffff;
}

.BtnAddTimeRange:hover {
    border: 1px solid #4d9eee;
    background-color: #4d9eee;
    border-radius: 5px;
    font-size: 12px;
    padding: 7px;
    color: #ffffff;
}

.selectedPagesSection {
    max-height: 10rem;
    overflow-y: scroll;

}

.FirstPageRange {
    margin: 0 0 1rem 0;

}


.BtnFreeConvert {
    background: white;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 13px !important;
    color: #3f84f6;
    border: 1.5px solid #7aacff;
    margin-right: 15px;
    font-weight: bold;
}

.BtnFreeAudioConvert, .BtnSelectPage, .BtnSelectTime {
    background: white;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 13px !important;
    color: #3f84f6;
    border: 1.5px solid #7aacff;
    margin-right: 15px;
    font-weight: bold;
}

.BtnSelectTime:hover, .BtnSelectPage:hover {
    background: #3f84f6;
    color: white;
}

.BtnFreeAudioConvert:hover, .BtnFreeConvert:hover {
    background: #3f84f6;
    color: white;
}

.checkbox {
    position: relative;
}

.BtnDeletePageRange:hover {
    color: red;
    cursor: pointer;
}

.CheckBoxPopover {
    position: absolute;
    animation-name: puff-in-center;
    animation-iteration-count: 1;
    animation-duration: 1s;
}

.OrderDescSectionPopover {
    position: absolute;
    animation-name: puff-in-right;
    animation-iteration-count: 1;
    animation-duration: 1s;
}


@media (max-width: 420px) {

    .PurchaseSection {
        padding: 5rem 1rem 3rem 1rem;
    }

    .PurchasePayInfo {
        padding: 1rem 1rem;
    }
}


/*animations */
@-webkit-keyframes page-2 {
    0% {
        transform: rotateY(180deg);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    35%, 100% {
        opacity: 0;
    }
    50%, 100% {
        transform: rotateY(0deg);
    }
}

@keyframes page-2 {
    0% {
        transform: rotateY(180deg);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    35%, 100% {
        opacity: 0;
    }
    50%, 100% {
        transform: rotateY(0deg);
    }
}

@-webkit-keyframes page-3 {
    15% {
        transform: rotateY(180deg);
        opacity: 0;
    }
    35% {
        opacity: 1;
    }
    50%, 100% {
        opacity: 0;
    }
    65%, 100% {
        transform: rotateY(0deg);
    }
}

@keyframes page-3 {
    15% {
        transform: rotateY(180deg);
        opacity: 0;
    }
    35% {
        opacity: 1;
    }
    50%, 100% {
        opacity: 0;
    }
    65%, 100% {
        transform: rotateY(0deg);
    }
}

@-webkit-keyframes page-4 {
    30% {
        transform: rotateY(180deg);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    65%, 100% {
        opacity: 0;
    }
    80%, 100% {
        transform: rotateY(0deg);
    }
}

@keyframes page-4 {
    30% {
        transform: rotateY(180deg);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    65%, 100% {
        opacity: 0;
    }
    80%, 100% {
        transform: rotateY(0deg);
    }
}

@-webkit-keyframes page-5 {
    45% {
        transform: rotateY(180deg);
        opacity: 0;
    }
    65% {
        opacity: 1;
    }
    80%, 100% {
        opacity: 0;
    }
    95%, 100% {
        transform: rotateY(0deg);
    }
}

@keyframes page-5 {
    45% {
        transform: rotateY(180deg);
        opacity: 0;
    }
    65% {
        opacity: 1;
    }
    80%, 100% {
        opacity: 0;
    }
    95%, 100% {
        transform: rotateY(0deg);
    }
}


.FileItemBox {
    background-color: white;
    width: 90%;
    margin: auto;
    margin-bottom: 10px;
    border-radius: 5px;
}

.NotificationSettingItem {
    background-color: white;
    margin: auto;
    border-radius: 5px;
    padding: 10px 0;

}

.AutoConvertFileSection {
    border-radius: 10px;
    padding: 10px;
    padding-bottom: 1rem;
    background-color: #F7F9FB;
}

.SelectFileTitle {
    font-weight: bold;
    color: #555555;
    padding: 10px 0 15px 0;
    font-size: 14px;
}

.FileItemLabel {
    font-size: 14px;
    font-weight: 500;
    padding: 15px 10px;
}


#AutoConvertModal .ModalBox {
    width: 80%;
}

#OcrFreeConvert .ModalBox {
    width: 70%;
}

.SelectAllFileCheck {
    font-size: 12px;
    font-weight: bold;
    color: #959595;
    text-align: right;
    padding: 0 20px 10px 0;
}

.filesSection {
    max-height: 15rem;
    overflow-y: scroll;
}

.filesSection::-webkit-scrollbar {
    color: #0a53be;
    border-radius: 20px;
    width: 2px;
    margin-left: 5px;
}

.filesSection::-webkit-scrollbar-thumb {
    background-color: #dedede;
    border-radius: 20px;
    width: 2px;
    margin-left: 5px;

}

.NotificationItemTitle {
    font-size: 12px;
    font-weight: bold;

}

.NotificationItemDescription {
    font-size: 12px;
}

.AutoConvertMethod {
    border: 1px solid #eaeaea;
    color: #595959;
    font-size: 11px;
    font-weight: bold;
    padding-right: 7px;
    padding-left: 4px;
    background-color: white;
    width: 80px;
    text-align: right;
}

.selectMethodSection {
    padding: 10px 0;
}

.NotificationSettings {
    padding: 10px 0;

}

.selectMethodSection .btn-check + .btn:hover {
    background-color: #ffffff;
    border: 1px solid #77bbff;
}


.FileItemBox .btn-check:checked + .btn,
.FileItemBox .btn.active,
.FileItemBox .btn.show,
.FileItemBox .btn:first-child:active,
.FileItemBox :not(.btn-check) + .btn:active {
    background-color: #ffffff;
    border: 1px solid #77bbff;
}

.selectMethodSection .btn-check:checked + .btn,
.selectMethodSection .btn.active,
.selectMethodSection .btn.show,
.selectMethodSection .btn:first-child:active,
.selectMethodSection :not(.btn-check) + .btn:active {
    background-color: #ffffff;
    border: 1px solid #77bbff;
    color: #0a58ca;
}

.NotificationSettingItem .btn-check:checked + .btn,
.NotificationSettingItem .btn.active,
.NotificationSettingItem .btn.show,
.NotificationSettingItem .btn:first-child:active,
.NotificationSettingItem :not(.btn-check) + .btn:active {
    background-color: white;
    border-color: transparent;
}

#SelectTimeModal .btn-check:checked + .btn,
#SelectTimeModal .btn.active,
#SelectTimeModal .btn.show,
#SelectTimeModal .btn:first-child:active,
#SelectTimeModal :not(.btn-check) + .btn:active,
#SelectPageModal .btn-check:checked + .btn,
#SelectPageModal .btn.active,
#SelectPageModal .btn.show,
#SelectPageModal .btn:first-child:active,
#SelectPageModal :not(.btn-check) + .btn:active {
    background: #f7f9fb;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}


.selectMethodSectionItems {
    width: 90%;
    margin: auto;
}


#AutoConvertModal .ModalBox {
    width: 80%;
}

.AutoConvertNotificationSection {
    border-radius: 10px;
    padding: 10px;
    padding-right: 0;
    padding-bottom: 1rem;
    background-color: #ffffff;
}

.Icon3x {
    margin-left: 3px;
}

.BtnConfirmAutoConvert {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 150px;
    margin-left: 30px;
}

.AutoConvertNotificationTitle {
    font-weight: bold;
    color: #555555;
    padding: 10px 0 15px 0;
    font-size: 14px;
    padding-bottom: 0px;
}


@media (max-width: 1150px) {
    #AutoConvertModal .ModalBox {
        width: 90%;
    }
}

@media (max-width: 992px) {

    .OrderDescArea {
        padding-left: 0;
    }

    #OcrFreeConvert .ModalBox {
        width: 100%;
    }

    #AutoConvertModal .ModalBox {
        width: 100%;
    }

    .selectMethodSectionItems {
        margin: 0;
    }

    .ConfirmSection {
        margin-top: 5rem;
    }

    .AutoConvertMethod {

        width: 130px;
        height: 37px;

    }

    .selectMethodSectionItems {
        margin: auto;
    }


}

@media (max-width: 770px) {

    .AutoConvertMethod {

        width: 110px;
        height: 37px;
    }
}

@media (max-width: 625px) {

    .AutoConvertMethod {
        border: 1px solid #ccc;
        color: #595959;
        font-size: 11px;
        font-weight: bold;
        padding-right: 5px;
        padding-left: 7px;
        background-color: white;
        width: 80px;
        height: 37px;
    }
}

@media (max-width: 513px) {
    #AutoConvertModal .ModalBox {
        width: 100%;
    }

    .ModalBox {
        width: 100% !important;
        padding-top: 1rem;
        padding-bottom: 2rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

}

.scale-up-center {
    -webkit-animation: scale-up-center 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: scale-up-center 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes scale-up-center {
    0% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes scale-up-center {
    0% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.selectLanguage {
    width: 120px;
    margin: auto;
}

.selectLanguage .form-select {
    font-size: 14px;
}

#AudioFreeConvert .ModalBox {
    width: 70%;
}

#AudioFreeConvert .firstSelectTimeRange {
    margin-top: 20px;
    margin-bottom: 5px;
}

#AudioFreeConvert .SelectPagesHelp {
    padding-top: 10px;
    padding-right: 0;
    color: #0f467a;
}


#AudioFreeConvert .firstSelectTimeRange {
    margin-top: 20px;
    margin-bottom: 5px;
}

#AudioFreeConvert .SelectPagesHelp {
    padding-top: 10px;
    padding-right: 0;
    color: #0f467a;
}

#AudioFreeConvert .TestConvertDesc {
    font-size: 13px;
    margin-bottom: 20px;
    font-weight: 600;
    background-color: #f7f9fb;
    padding: 25px 15px;
    border-radius: 8px;
    color: #003a71;
}

#AudioFreeConvert .selectTimeArrow {
    color: #4d9eee;
    font-size: 18px;
}

/* Profile section */

.side-nav .side-nav-title {
    letter-spacing: 0;
    font-family: "YekanBakh", sans-serif;
    padding-top: 15px;
    padding-bottom: 15px;
}

.page-content {
    padding: 1.75rem 0.75rem;
}

.side-nav .side-nav-item .side-nav-link {
    font-weight: 600 !important;
}

.table-responsive {
    text-align: center;
}

.side-nav > .side-nav-item.active .side-nav-link.active {
    align-items: baseline;
}

.side-nav .side-nav-item .side-nav-link {
    align-items: baseline;

}

.menu-arrow::before {
    content: none;
}

.menu-icon {
    -webkit-text-stroke: 0.3px #727272;
}

.sub-menu .side-nav-link::before {
    content: "\2022";
    font-size: 60px;
}


.bi::before, [class*=" bi-"]::before, [class^=bi-]::before {
    vertical-align: middle;
}


.app-topbar {
    border-right: 1px solid beige;

}

.MarketingCard {
    display: flex;
    align-items: center;
    min-height: 180px;
}

.MarketingCardInfo {
    min-height: 180px;
}

.TablePlaceholder {
    height: 50px;
}


.table-responsive {
    position: relative;
}

.LoadingOverlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    font-size: 1.5rem;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.74);
    backdrop-filter: blur(4px);
    border-radius: 10px;
}

.SelectFileArea .LoadingOverlay {
    top: -10%;
    left: 25%;
    right: 25%;
    background: rgb(255 255 255 / 0%);
    backdrop-filter: blur(5px);
    border-radius: 25px;
}

.CreditPurchase .LoadingOverlay,
.PackagePurchase .LoadingOverlay {
    background: rgb(255 255 255 / 80%);
    backdrop-filter: blur(5px);
    border-radius: 25px;
}

.BtnPay .LoadingOverlay {
    background: rgb(237, 63, 85);
    backdrop-filter: blur(5px);
    border-radius: 5px;
}

.RedirectLoadingOverlay {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: rgba(255, 255, 255, 0.69);
    align-items: center;
    justify-content: center;
    z-index: 1000;
    font-size: 1.5rem;
    color: #ffffff;
    backdrop-filter: blur(5px);
    border-radius: 5px;
}

.endedTicket {
    position: relative;
}

.TicketSubject{
    font-size: 12px;
    font-weight: bold;
}
.TicketDate{
    font-size: 10px;
}
.content-to-blur {
    filter: blur(3px);
    pointer-events: none; /* جلوگیری از کلیک روی فرم */
}

.overlay {
    z-index: 1000;

}


.spinner-border {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-width: 0.3rem;
}

.AdminOrderDesc {
    line-height: 25px;
}

.AdminOrderTitle {
    font-weight: 600;
    padding-top: 25px;
}

.placeholder {
    border-radius: 10px;
    color: #f0f1f5;
}

.OrderDetailFileDesc {
    color: #c5c5c5;
}

.NewMessagesBG {
    background: beige;
}


/* ticket area */

.TicketPageCard {
    margin-bottom: 0;
}


html[data-sidenav-size=condensed]:not([data-layout=topnav]) .sidenav-menu .side-nav .side-nav-item .side-nav-link {

    padding: calc(var(--osen-menu-item-padding-y) * 1) var(--osen-menu-item-padding-x);
}

.operator-chat-message {
    background: #EEF2F7 !important;
    color: black !important;
}

.user-message {
    background: #1c6af2 !important;
    color: white !important;
}

.user-message *::selection {
    background: #ffffff !important;
    color: #1c69f0 !important;
}

.user-message *::-moz-selection {
    background: #ff0000 !important;
    color: #ffffff !important;
}

.TicketText {
    white-space: pre;
    text-wrap: auto;
    font-size: 14px;
    text-align: justify;
}

.TicketUploader .filepond--drop-label {
    display: none;
}

.BtnTicket {
    width: auto;
    padding: 10px;
}

#TickedUploaderSection .filepond--file-info .filepond--file-info-main {
    width: 50px;
}

#TickedUploaderSection .filepond--item {
    width: 8rem;
    height: 5rem;
}

#TickedUploaderSection [data-filepond-item-state='processing-complete'] .filepond--file {
    height: 4rem;
}


#TickedUploaderSection .filepond--file-status {
}

#TickedUploaderSection [data-filepond-item-state='cancelled'] .filepond--file-info, [data-filepond-item-state*='invalid'] .filepond--file-info, [data-filepond-item-state*='error'] .filepond--file-info {
    margin-right: 4rem;
}

#TickedUploaderSection [data-filepond-item-state='cancelled'] .filepond--file-info, [data-filepond-item-state*='invalid'] .filepond--file-info, [data-filepond-item-state*='error'] .filepond--file-info {
    direction: rtl;
}

#TickedUploaderSection .filepond--list.filepond--list {
    position: absolute;
    top: 0px;
    /* margin: 0px; */
    /* right: 106rem; */
    left: 20px;
    padding: 0;
    width: 100%;
    list-style-type: none;
    will-change: transform;
    direction: ltr;
    /* width: 50%; */
    background: bisque;
}

#TickedUploaderSection [data-filepond-item-state*='error'] .filepond--file {
    color: white;
    padding: 15px 15px 41px 12px;
    display: flex;
    flex-direction: column-reverse;
}

[data-filepond-item-state*='invalid'] #TickedUploaderSection .filepond--item-panel,
[data-filepond-item-state*='error'] #TickedUploaderSection .filepond--item-panel {
    background-color: #EF4056;
    height: 2rem;
}

#TickedUploaderSection .filepond--file-status {
    margin: 0;
    text-align: center;
    width: 100%;
}

#TickedUploaderSection .filepond--file-status-main {
    margin: auto;
}

#TickedUploaderSection .filepond--root {
    max-height: 30vh;
    margin-bottom: 0;
    top: 10px;
}


.chat-message {
    display: flex;
    flex-direction: column;
    padding: 20px 20px !important;
    line-height: 30px;
    border-radius: 10px !important;
    text-align: right;
}

.MessageFileSection {
    background: #45c14f;
    border-radius: 50%;
    color: white;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.TicketDownloadIcon {
    font-size: 13px;
    color: white;
}

.TicketFileName {
    font-size: 13px;
    direction: ltr;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.TicketAttachedFilesSection {

    gap: 14px;
}

.BtnFileDownload {
    align-items: center;
    border-radius: 50px;
    border: 1px solid #ffffff;
    color: #000000;
    transition: all 0.5s;
    cursor: pointer;
    padding: 4px 10px 4px 5px;
    background: #ffffff;
    margin-top: 1rem;
}

.BtnFileDownload:hover {
    background: #ffffff;
    color: #465DFF;

    .TicketDownloadIcon {
        font-size: 13px;
        color: #ffffff;
        background: #465DFF;
    }

}

#ChatSection {
    overflow-y: scroll;
    overflow-x: hidden;
}

.users-list {
    overflow-y: scroll;
    overflow-x: hidden;
}


.list-scroll::-webkit-scrollbar {
    display: none;
}

.chat-scroll {
    overflow-y: scroll;
}

.chat-scroll::-webkit-scrollbar {
    display: none;
}


.TicketDownloadIcon {
    width: 30px;
    height: 30px;
    display: inline-block;
    text-align: center;
    border-radius: 50px;
    background: #1c69f0;
    display: flex;
    align-items: center;
    justify-content: center;
}


.TicketSearchSection {
    width: 60%;
}

.TicketTopSection {
    padding: 20px 0;
}


.TicketTimeSection {
    text-align: left;
    color: #c1d3f3;
}

.ActiveTicket {
    background: rgb(238, 242, 247);
}


.chat-scroll {
    height: calc(108vh - 420px);
}

.MessageSection {
    background: white;
}

@media (max-width: 576px) {

    .list-scroll {
        height: 100vh;
    }

    .chat-scroll {
        height: calc(105vh - 430px);

    }

    .MessageSection {

        padding-bottom: 0 !important;

    }

}


@media (min-width: 1200px) {

    .list-scroll {
        height: calc(112vh - 306px);
    }

    .chat-scroll {
        height: calc(107vh - 392px);
    }
}


@media (min-width: 1600px) {
    .list-scroll {
        height: calc(105vh - 306px);
    }

    .chat-scroll {
        height: calc(105vh - 392px);
    }
}


.modal-open {
    overflow-y: auto;
}

@media (max-width: 992px) {
    #TickedUploaderSection {
        transform: translate3d(0px, 0px, 0px);
        width: 100%;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        margin-left: 0;
    }


}

.ticket-sidenav-toggle-button {
    border: none;
    background: transparent;
    color: red;
    font-size: 20px;
}

.BtnNewTicket {
    cursor: pointer;
}

.NotSelectedTicketSection {
    height: 88vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.ChatListLoader {
    width: 28px;
    aspect-ratio: 1;
    --_c: no-repeat radial-gradient(farthest-side, #25b09b 92%, #0000);
    background: var(--_c) top, var(--_c) left, var(--_c) right, var(--_c) bottom;
    background-size: 8px 8px;
    animation: l7 1s infinite;
}

@keyframes l7 {
    to {
        transform: rotate(.5turn)
    }
}

@media (max-width: 575.98px) {
    .app-topbar .dropdown .dropdown-menu {
        width: 95%;
        right: -10px !important;
        left: 10px !important;
    }
}

@media (min-width: 576px) {
    .dropdown-menu-lg {
        width: 406px;
        right: -151px !important;
    }
}

.input-group-text {
    width: 80px;
}

.ProfilePlaceHolder {
    height: 50px;
}


.walletInfoSection .card {
    height: 95%;
}

.ShowPriceSection {
    height: 45px;
    display: flex;
    align-items: center;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 6px;
}


/* Custom class to make the alert smaller */
.small-alert {
    font-size: 12px; /* Adjust font size */
    padding: 10px; /* Adjust padding */
    width: 20rem; /* Adjust the width */
    height: 10rem;
}

.small-alert .swal2-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 14px;
    padding-top: 0 !important;
}

.simple-notification-close-btn {
    color: white;
}


.PurchaseOffCodeSection {
    display: flex;
    gap: 10px;
    margin: 15px 0;
    padding: 10px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.PurchaseOffCodeSection.offcode-applied {
    background-color: #e8f5e9;
    border: 1px solid #c8e6c9;
}

.OffCodeInputSection {
    flex-grow: 1;
}

.OffCodeInput {
    width: 100%;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid #ddd;
    transition: all 0.3s ease;
}

.OffCodeInput:disabled {
    background-color: #f0f0f0;
    color: #666;
}


.BtnOffCodeApply {
    border: 1px solid #8ED4FB;
    border-radius: 5px;
    background-color: white;
    color: #0087D2;
    font-size: 13px;
    height: 35px;
    width: 100px;
    font-weight: bold;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
}

.BtnOffCodeApply:hover {
    background-color: #1976D2;
    color: white;
}

.BtnOffCodeApply:disabled {
    opacity: 0.7;
    cursor: wait;
}

.remove-offcode {
    padding: 5px 10px;
}

.remove-offcode {

    border: 1px solid #8ED4FB;
    border-radius: 5px;
    background-color: white;
    color: #0087D2;
    font-size: 13px;
    height: 30px;
    width: 90px;
    font-weight: bold;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
}

.remove-offcode:hover {
    background-color: #D32F2F;
    color: white;
}

/* استایل بخش نمایش تخفیف */
.discountSection {
    background-color: #e8f5e9;
    padding: 10px;
    border-radius: 8px;
    border: 1px dashed #4CAF50;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.discountAmount {
    font-weight: bold;
    color: #4CAF50;
}

.removeDiscount {
    cursor: pointer;
    transition: all 0.3s ease;
}

.removeDiscount:hover {
    transform: scale(1.1);
}

.disabled-credit-section {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.disabled-label {
    cursor: not-allowed !important;
}

.section-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* نیمه‌شفاف */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    border-radius: 12px; /* اختیاری، برای زیبایی */
}


.convert-detail-container {
    color: #333;
    direction: rtl;
    text-align: right;
    max-height: 70vh;
    overflow-y: auto;
    padding-right: 5px;
    padding-top: 1rem;
    padding-left: 1rem;
}

.convert-section {
    margin-bottom: 24px;
    background-color: #fff;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.convert-section-title {
    font-size: 18px;
    color: #3498db;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid #f4f6f9;
    display: flex;
    align-items: center;
}

.convert-section-title i {
    margin-left: 8px;
}

.info-row {
    display: flex;
    margin-bottom: 12px;
    align-items: center;
}

.info-label {
    min-width: 120px;
    font-weight: bold;
    color: #555;
}

.info-value {
    flex: 1;
}

.file-item {
    background-color: #f4f6f9;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 10px;
    border-right: 3px solid #3498db;
}

.payment-method-item {
    background-color: #f8f9fa;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 8px;
}

.badge {
    display: inline-block;
}

.total-row {
    border-top: 1px dashed #ddd;
    margin-top: 15px;
    padding-top: 15px;
    font-weight: bold;
}

@media (max-width: 768px) {
    .info-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .info-label {
        margin-bottom: 4px;
    }
}

.download-icon {
    width: 40px;
    height: 40px;
    background: #4c9dec;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-item-box {
    text-align: left;
    padding: 5px;
    border-radius: 50px;
}

.package-select {
    width: auto;
}

.custom-swal-popup {
    background-color: white !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    padding: 0 !important;
    position: relative !important;
}

.swal2-html-container .card {

    box-shadow: none;
}

.info-item {
    transition: all 0.3s ease;
}


.payment-item {
    transition: all 0.3s ease;
    border: 1px solid transparent;
}


.card {
    transition: all 0.3s ease;
}


.btn {
    transition: all 0.3s ease;
}

.btn:hover {
}

.UserOrderDesc {
    text-align: right;
    white-space: pre-line;
    font-size: 16px;

}

.admin-order-purchase {
    padding: 24px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}


.payment-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}


.payment-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}


.bg-gradient-primary {
    background: #455cfd;
    color: white;
    border-radius: 15px;
}

.bg-gradient-success {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
    border-radius: 15px;
}

.payment-content {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
}

.payment-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-left: 20px;
    flex-shrink: 0;
}

.payment-info {
    flex: 1;

}

.payment-title {
    margin: 0 0 8px 0;
    font-weight: 500;
    opacity: 0.9;
    font-size: 16px;
}

.payment-amount {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.amount-number {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

.currency {
    font-size: 14px;
    opacity: 0.8;
    font-weight: 400;
}

.btn-payment {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    cursor: pointer;
    white-space: nowrap;
    backdrop-filter: blur(10px);
}

.btn-payment:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.btn-payment:active {
    transform: scale(0.98);
}

.btn-payment i {
    font-size: 16px;
}

@media (max-width: 768px) {
    .payment-content {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .payment-icon {
        margin: 0 auto 16px auto;
    }

    .btn-payment {
        width: 100%;
        padding: 14px 24px;
    }
}

/* انیمیشن لودینگ برای دکمه‌ها */
.btn-payment.loading {
    position: relative;
    color: transparent;
}

.btn-payment.loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-top: 2px solid white;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: spin 1s linear infinite;
}


.userEmail::placeholder {
    text-align: right;
}

/* استایل‌های مربوط به جستجوی کاربر */
.selected-user-card {
    transition: all 0.3s ease;
}

.selected-user-card:hover {
    background-color: #f8f9fa !important;
    border-color: #dee2e6;
}

#ProfileNotificationSection .dropdown-menu.show {
    display: block;
    overflow-y: auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #dee2e6;
}

.dropdown-item {
    text-align: right;
}

.userSearch:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* برای جستجوی بهتر در موبایل */
@media (max-width: 768px) {
    #ProfileNotificationSection .dropdown-menu.show {
        position: fixed !important;
        top: auto !important;
        left: 15px !important;
        right: 15px !important;
        width: calc(100% - 30px) !important;
        max-height: 200px;
    }
}


.chat-body-highlight {
    animation: chatBodyGlow 2s ease-in-out;
    position: relative;
    overflow: hidden;
}

.chat-body-highlight::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.15), transparent);
    animation: shimmer 1.5s ease-in-out;
    z-index: 1;
}

@keyframes chatBodyGlow {
    0% {
        box-shadow: 0 0 0 rgba(59, 130, 246, 0);
        transform: scale(1);
    }
    25% {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
        transform: scale(1.01);
    }
    75% {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.1);
        transform: scale(1.005);
    }
    100% {
        box-shadow: 0 0 0 rgba(59, 130, 246, 0);
        transform: scale(1);
    }
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.NewMessagesBG {
    animation: subtleHighlight 3s ease-in-out;
    position: relative;
    overflow: hidden;
}

.NewMessagesBG::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, #3b82f6, #60a5fa);
    animation: fadeInOut 3s ease-in-out;
}

@keyframes subtleHighlight {
    0%, 100% {
        transform: translateX(0);
        box-shadow: none;
    }
    5% {
        transform: translateX(2px);
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
    }
    10% {
        transform: translateX(0);
        box-shadow: 0 1px 4px rgba(59, 130, 246, 0.05);
    }
}

@keyframes fadeInOut {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

.new-chat-body-animation {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}


.chat-list .chat-group .chat-message {
    margin-bottom: 0 !important;
}


.bg-gradient {
    background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
}

.card-header {
    border-radius: 12px 12px 0 0 !important;
}

.input-group-text {
    font-size: 0.85rem;
    min-width: 80px;
    justify-content: center;
}

.form-control:focus {
    box-shadow: none;
    border-color: #80bdff;
}

.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.header-title {
    font-size: 1.2rem;
}


#settings-page .input-group-text {
    width: 150px;
}


/* */

.logo-lg img {
    height: 30px;
}


#notification-dropdown {
    min-height: 25rem;
}


.BtnEndTicket {
    width: 100%;
    margin-top: 1rem;
}

.error-section {
    width: 100%;
    margin-top: .25rem;
    font-size: 10px;
    font-weight: bold;
}


.ltr {
    direction: ltr;
}

/* voice to text */

.WhiteSection {
    margin-bottom: 5rem;
    /* background-color: #000; */
    min-height: 100vh;
    display: flex;
}

.WhiteArea {
    width: 100%;
    padding: 0 3rem;
    border-radius: 20px;
}

.landingindexarea {
    height: 100%;
}

.SpeechRecognitionArea {
    margin: 22vh 0 0;
}

.LandingSelectFileContent {
    padding: 0rem 2rem 0;
    position: relative;
    width: 70%;
}

.LandingConvertTitle {
    font-weight: bold;
    font-size: 25px;
    color: #31326F;
}

.LandingConvertDesc {
    font-weight: 500;
    color: #31326F;
    font-size: 14px;
    margin-top: 5px;
}

.preview-typing {
    resize: none;
    direction: rtl;
    border-radius: 6px;
    border: none;
    box-shadow: none !important;
    text-align: center;
    background: 0 0;
    font-size: 18px;
    margin-top: 15px;
}

.text-editor-area {
    width: 95%;
    margin: 0 auto;
    margin-top: 5px;
}


.ChangeLangArea {
    padding: 0 0 8px;
}

.tox-tbtn__select-label {
    font-weight: bold !important;
}

.tox-tbtn:hover {
    cursor: pointer;
!important;
}


.tox-toolbar__primary .tox-toolbar__group:last-child {
    margin-right: auto !important;
}

/* استایل پایه دکمه میکروفون */
.listen {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px auto;
    transition: all 0.3s ease;

    box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
}

.listen-button {
    width: 30px;
    height: 30px;
    background: white;
    border-radius: 8px;
    position: relative;
}

.listen-button::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 16px;
    background: #667eea;
    border-radius: 4px;
}

.listen-button::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 8px;
    border: 2px solid #667eea;
    border-top: none;
    border-radius: 0 0 8px 8px;
}

.listen.listening {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
    animation: pulse-red 1.5s infinite;
    box-shadow: 0 0 20px rgba(255, 107, 107, 0.5);
}

.listen.listening .listen-button::before,
.listen.listening .listen-button::after {
    background: #ff4757;
    border-color: #ff4757;
}

@keyframes pulse-red {
    0% {
        transform: scale(1);
        box-shadow: 0 0 20px rgba(255, 107, 107, 0.5);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 30px rgba(255, 107, 107, 0.8);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 20px rgba(255, 107, 107, 0.5);
    }
}

.smallshadow-sm,
.largeshadow-lg {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255, 107, 107, 0.3);
    opacity: 0;
}

.listening .smallshadow-sm {
    width: 100px;
    height: 100px;
    animation: sound-wave 2s infinite;
}

.listening .largeshadow-lg {
    width: 120px;
    height: 120px;
    animation: sound-wave 2s infinite 0.5s;
}

/* انیمیشن امواج صدا */
@keyframes sound-wave {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 0;
        transform: scale(1.2);
    }
}


@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

@media (max-width: 768px) {

    .LandingSelectFileContent {
        width: 100%;
    }

    .LandingSelectFileContent {
        padding: 0;
    }

    .WhiteArea {
        padding: 0 1rem;
    }

    .LandingConvertDesc {
        font-size: 13px;
    }

    .SelectFileLeftArea {
        margin-top: 5rem;
    }

}


.TableDeleteRow {
    text-align: center;
}

.ConvertHistoryTable {
    min-height: 50vh;
}

#AutoConvertModal .ModalBox {
    min-height: 28rem;

}

.PayWarningNote {
    text-align: justify;
}

.PageCount, .totalTimeCount {
    font-size: 14px;
}

#SelectPageModal .ModalBox, #SelectTimeModal .ModalBox {
    width: 85%;

    border: none;
}

.OrderNewTitle {
    font-size: 2rem;
    color: #0C0C0C;
    font-weight: bold;
    margin-bottom: 20px;
}

.selectfileare {
    text-align: right;
}

.ContactUsText {
    font-size: 16px;
    line-height: 30px;
    list-style: none;
    padding: 0 20px 0 0;
    text-align: right;
}

.AboutUsText {
    font-size: 16px;
    line-height: 30px;
}

.IndexFileAreaSpecsText {
    margin-right: 10px;
    font-size: 15px;
    color: #303030;
}

.mybreadcrumbnewproject {
    width: 98%;
    border-bottom: 1px solid #F0F0F1;
    line-height: 0.1em;
    margin: 25px 0 25px;
    font-weight: bold;
    text-align: right;
}

.OrderFormNotic {
    background: rgb(255, 255, 255);
    background: linear-gradient(90deg, rgb(252 252 252) 0%, rgb(252 252 252) 50%, rgb(255 239 252) 100%);
    font-weight: bold;
    color: #A63489;
    padding: 6px 15px;
    border-radius: 10px;
    text-align: right;
}

.convertareadesc {
    margin-top: 10px;
    color: #303030;
    line-height: 230%;
    font-size: 14px;
    font-weight: 400;
    text-align: justify;
}

.HireContractorDownloadFormLabel {
    text-align: right;
    margin-top: 20px;
    font-size: 14px;
}

.HireContractorDownloadFormDownloadLink {
    font-weight: bold;
    color: #e03333;
}

.indexajaxarea {
    background: #ffffff;
    padding: 30px 0;
    border: 1px dashed #ced4da;
    border-radius: 10px;
}

.ProfileItemCard {
    height: 11rem;
}

.form-check-input:focus {
    box-shadow: none;
}

.checkbox-custom {
    margin: 0;
}

.dot-loader {
    display: flex;
!important;
    gap: 4px;
    align-items: center;
    justify-content: center;
}

.dot-loader .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #FFFFFF;
    animation: dot-pulse 1.4s infinite ease-in-out both;
}

.dot-loader .dot:nth-child(1) {
    animation-delay: -0.32s;
}

.dot-loader .dot:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes dot-pulse {
    0%, 80%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    40% {
        opacity: 1;
        transform: scale(1);
    }
}

.OrderRulesTitle {
    font-size: 15px;
    font-weight: bold;
    margin: 0 0 15px;
    padding: 20px 24px 16px;
}

.RulesAllItems {
    font-size: 14px;

}


.convertBtnGroup {
    width: 140px;
}

.disabled {
    cursor: not-allowed;
    color: #8a8a8a;
    font-size: 12px;
}

#register-request-page .ModalBox {
    width: 100%;
}


.section-desc {
    text-align: center;
    color: #666;
    margin-bottom: 20px;
    font-size: 14px;
}

.package-item {
    border-radius: 8px;
    padding: 5px 15px;
    margin-bottom: 10px;
    background: #ffffff;
    border: 1px solid #dbdbdb;
}

.package-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

.package-icon-wrapper {
    position: relative;
    flex-shrink: 0;
    color: #0a53be;
}

.package-icon {
    width: 40px;
    height: 40px;
}

.package-icon-text {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #007bff;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 600;
}

.package-info {
    flex: 1;
}

.package-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}

.package-desc {
    font-size: 12px;
    color: #666;
}

.package-price-wrapper {
    text-align: center;
    flex-shrink: 0;
}

.package-price {
    font-size: 14px;
    color: #EF6020;
    font-weight: 600;
}

.package-currency {
    font-size: 12px;
    color: #666;
}

.btn-buy {
    background: #007bff;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
}

.btn-buy:hover {
    background: #0056b3;
}

.user-packages-section {
    margin-top: 30px;
}

.user-packages-title {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
}

.warning-message {
    text-align: center;
    color: #dc3545;
    font-size: 14px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.active-package-item {
    background: #f8f9fa;
    border-color: #28a745;
}

.active-package-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.remaining-days {
    font-size: 12px;
    color: #28a745;
    font-weight: 500;
}

.remaining-pages {
    font-size: 12px;
    color: #666;
}

.notice-section {
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    font-size: 12px;
    color: #666;
    line-height: 1.6;

}

.notice-section i {
    margin-left: 5px;
}

.package-type-label {
    background: #e9ecef;
    color: #495057;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    margin-bottom: 10px;
    display: inline-block;
}

@media (max-width: 576px) {
    .package-row {
        gap: 10px;
    }

    .package-info {
        min-width: 0;
    }

    .package-title {
        font-size: 13px;
    }

    .package-price {
        font-size: 14px;
    }
}

#PackagesModal .modal-content {
    width: 70%;
}

#PackagesModal .modal-header {
    padding-bottom: 0;
}

.packages-section {
    /* max-height: 30rem;
     overflow-y: scroll;
     */
}

.packages-section::-webkit-scrollbar {
    display: none;
}

.BtnBuyPackage {
    font-size: 14px;
    color: #0044f4;
    border-radius: 5px;
    cursor: pointer;
    width: fit-content;
    padding: 3px 5px;
    margin-right: auto;

}

.carousel-container {
    width: 90%;
    height: 100px;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
}

.carousel {
    position: relative;
    touch-action: pan-y pinch-zoom;
    height: 100px;
}

.carousel-inner {
    border-radius: 10px;
    overflow: hidden;
    height: 100px;
}

.carousel-item {
    position: relative;
    height: 100px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease-in-out;
}

.carousel-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1));
    z-index: 1;
}

.carousel-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    padding: 0.5rem;
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.carousel-caption h5 {
    font-size: 1rem;
    font-weight: bold;
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.carousel-caption p {
    display: none;
}

.carousel-control-prev,
.carousel-control-next {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    top: 50%;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.4);
}

.carousel-control-prev {
    left: 8px;
}

.carousel-control-next {
    right: 8px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 12px;
    height: 12px;
}

.carousel-indicators {
    bottom: 8px;
    margin-bottom: 0;
}

.carousel-indicators [data-bs-target] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin: 0 3px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
}

.carousel-indicators [data-bs-target].active {
    background: white;
    transform: scale(1.3);
}

/* بهبود عملکرد لمس */
.carousel-item {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.carousel-inner {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

/* انیمیشن‌های بهتر */
.carousel.slide .carousel-item {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* پاسخگو برای موبایل */


.title {
    text-align: center;
    color: white;
    margin-bottom: 2rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.slide1 {
    background-image: linear-gradient(45deg, #ff6b6b, #feca57), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400"><rect fill="%23ff6b6b" width="800" height="400"/><circle fill="%23feca57" cx="200" cy="100" r="80" opacity="0.3"/><circle fill="%23ff9ff3" cx="600" cy="300" r="120" opacity="0.2"/></svg>');
}

.slide2 {
    background-image: linear-gradient(45deg, #74b9ff, #0984e3), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400"><rect fill="%2374b9ff" width="800" height="400"/><polygon fill="%230984e3" points="0,400 200,200 400,400" opacity="0.3"/><circle fill="%2300b894" cx="600" cy="150" r="100" opacity="0.2"/></svg>');
}

.slide3 {
    background-image: linear-gradient(45deg, #a29bfe, #6c5ce7), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400"><rect fill="%23a29bfe" width="800" height="400"/><ellipse fill="%236c5ce7" cx="400" cy="200" rx="300" ry="150" opacity="0.3"/><rect fill="%23fd79a8" x="100" y="100" width="150" height="150" rx="20" opacity="0.2"/></svg>');
}

.slide4 {
    background-image: linear-gradient(45deg, #00b894, #00cec9), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400"><rect fill="%2300b894" width="800" height="400"/><path fill="%2300cec9" d="M0,200 Q400,100 800,200 L800,400 L0,400 Z" opacity="0.3"/><circle fill="%23fdcb6e" cx="150" cy="80" r="60" opacity="0.2"/></svg>');
}


#BtnPurchaseConvert {
    margin-bottom: 0 !important;
}

.HomePageUploader {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


#ImageToTextModal .modal-content {
    border-radius: 20px;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

#ImageToTextModal .modal-header {
    color: white;
    border-radius: 20px 20px 0 0;
    border-bottom: none;
    padding: 24px;
}

#ImageToTextModal .modal-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    text-align: center;
    width: 100%;
}

#ImageToTextModal .modal-body {
    padding: 32px;
}

#ImageToTextModal .processing-section {
    text-align: center;
    padding: 40px 0;
}

#ImageToTextModal .processing-title {
    font-size: 18px;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 24px;
}

#ImageToTextModal .progress-container {
    position: relative;
    margin-bottom: 24px;
}

#ImageToTextModal .progress {
    height: 10px;
    background-color: #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}

#ImageToTextModal .progress-text {
    position: absolute;
    top: -25px;
    right: 0;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
}

#ImageToTextModal .result-section {
    margin-bottom: 16px;
}

#ImageToTextModal .result-title {
    font-size: 16px;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 12px;
}

#ImageToTextModal .result-textarea {
    min-height: 300px;
    padding: 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
    direction: rtl;
}

#ImageToTextModal .output-options {
    margin-bottom: 24px;
}

#ImageToTextModal .output-title {
    font-size: 16px;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 16px;
}

#ImageToTextModal .radio-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#ImageToTextModal .radio-item {
    display: flex;
    align-items: center;
    padding: 16px;
    background: #f9fafb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

#ImageToTextModal .radio-item:hover {
    background: #f3f4f6;
}

#ImageToTextModal .radio-item.selected {
    background: #f3f4f6;
    border-color: #a6c4ff;
}

#ImageToTextModal .form-check-input {
    margin-left: 12px;
    width: 20px;
    height: 20px;
    accent-color: #6b7280;
    margin-top: 0;
}

#ImageToTextModal .form-check-label {
    font-size: 15px;
    font-weight: 500;
    color: #4b5563;
    cursor: pointer;
}

#ImageToTextModal .info-note {
    background: #fef3c7;
    border: 1px solid #fbbf24;
    border-radius: 10px;
    padding: 12px;
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #92400e;
    margin-top: 16px;
}

#ImageToTextModal .info-note::before {
    content: "ℹ️";
    margin-left: 8px;
    font-size: 16px;
}

#ImageToTextModal .error-message {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #dc2626;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    margin-top: 8px;
    display: none;
}

#ImageToTextModal .modal-footer {
    border-top: 1px solid #e5e7eb;
    padding: 20px 32px;
}

@media (max-width: 480px) {
    #ImageToTextModal .modal-body {
        padding: 24px 20px;
    }

    #ImageToTextModal .modal-footer {
        padding: 16px 20px;
    }
}

#ImageToTextModal .radio-item:has(input:checked) {
    background: #f3f4f6;
    border-color: #a6c4ff;
}

#ImageToTextModal .radio-item input:checked + .form-check-label {
    color: #1f2937;
}

#ImageToTextModal .radio-item input:checked {
    accent-color: #a6c4ff;
}


.IndexHelpVideo {
    background-color: #EE2556;
    border-bottom: 9px solid #B5183E;
    padding: 2rem 5rem;
    margin: auto;
    background-image: url(../../assets/images/indexhelpredbackground.svg);
    background-repeat: no-repeat;
    background-size: cover;
}

.IndexVideoHelpTitle {
    font-weight: bold;
    font-size: 22px;
    margin-bottom: 1rem;
    color: #fff;
}

.VideoHelpSteps {
    color: #fff;
    font-size: 14px;
    line-height: 30px;
    margin-bottom: 0;
}

.OCVideoHelpLink {
    color: #fff;
    font-size: 16px;
    text-decoration: underline;
}


.download-btn, .download-final-btn {
    background: #007aff;
    color: white;
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.download-final-btn {
    background: #34c759;
}

.user-description {
    text-align: justify;
    line-height: 25px;
}

.Uploader-Help-Icon {
    margin-left: 2px;
}

.Uploader-Help-Text {
    font-size: 15px;
}

.navbar > .container-fluid {
    padding-top: 5px;
}

#TopNavBar .nav-link {
    color: #2D2D54;
}

.NavGiftIconColor {
    color: #2D2D54;
}

@keyframes shadow-pulse {
    0% {
        box-shadow: 0 0 0 0px rgba(255, 0, 0, 0.5);
    }
    100% {
        box-shadow: 0 0 0 11px rgba(0, 0, 0, 0);
    }
}

.filepond--file-info .filepond--file-info-main {
    font-size: 15px;
    font-weight: bold;
    color: #4f4f4f;
    margin-left: 1px;
}

.filepond--file-info .filepond--file-info-sub {
    font-size: 12px;
}

.Uploader-Select-Page {
    -webkit-text-stroke: 0.3px currentColor;
}

.Uploader-Free-Test {
    margin-left: 1px;
}

.ModalLoginWays {
    font-size: 0.9rem;
    line-height: 30px;
}

.ModalLoginWaysItems {
    cursor: pointer;
}

.ModalLoginWaysItems:hover {
    color: #0c8fff;
}


.floating-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    border: none;
    border-radius: 50%;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
    cursor: pointer;
    z-index: 1050;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    overflow: hidden;
}

.floating-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 12px 35px rgba(102, 126, 234, 0.6);
}

.floating-btn:active {
    transform: translateY(0) scale(0.95);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.floating-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.floating-btn:hover::before {
    opacity: 1;
}

.floating-btn i {
    transition: transform 0.3s ease;
}

.floating-btn:hover i {
    transform: rotate(360deg);
}

/* انیمیشن پالس */
.floating-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(102, 126, 234, 0.3);
    animation: pulse 2s infinite;
    z-index: -1;
}

@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

@media (max-width: 768px) {
    .floating-btn {
        bottom: 20px;
        right: 20px;
        width: 56px;
        height: 56px;
        font-size: 20px;
    }
}

.floating-btn-tooltip {
    position: absolute;
    right: 75px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.floating-btn-tooltip::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: rgba(0, 0, 0, 0.8);
}

.floating-btn:hover .floating-btn-tooltip {
    opacity: 1;
    visibility: visible;
    right: 70px;
}

.RegisterLoginBack {
    font-size: 13px;
    line-height: 30px;
    font-weight: 500;
}

.LoginStep2PassTitle {
    font-size: 13px;
    margin-bottom: 20px;
    font-weight: 600;
    background-color: #e6f3ff;
    padding: 15px 15px;
    border-radius: 8px;
    color: #003a71;
}


.floating-btn {
    display: none;
}

@media (max-width: 1200px) {
    .floating-btn {
        display: block;
    }
}


.modal-title-custom {
    font-weight: 600;
    color: #1d1d1f;
    font-size: 18px;
    margin: 0;
}

.btn-close-custom {
    margin: 0;
    opacity: 0.6;
}

.file-container {
    background: #fbfbfd;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #f2f2f7;
}

.file-title {
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 16px;
    font-size: 15px;
}

.file-list {
    background: white;
    border-radius: 10px;
    padding: 16px;
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid #f2f2f7;
}

.nav-link-custom {
    color: #1d1d1f;
    font-weight: 500;
    font-size: 14px;
}

.file-row {
    border-radius: 8px;
    padding: 15px 16px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.file-row-hover:hover {
    background-color: #f8f9fa;
}

.file-row-selected {
    background-color: #f0f8ff;
}

.file-row-disabled {
    background-color: #f9f9f9;
    opacity: 0.7;
    cursor: not-allowed;
}

.checkbox-custom {
    border: 1.5px solid #d1d1d6;
    border-radius: 4px;
}

.file-name {
    color: #1d1d1f;
    font-weight: 500;
    font-size: 14px;
}

.badge-done {
    background: #34c759;
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.badge-processing {
    background: #ff9500;
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.badge-queue {
    background: #8e8e93;
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.badge-default {
    background: #f2f2f7;
    color: #8e8e93;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.progress-bar-wrapper {
    width: 60px;
    height: 3px;
    background: #f2f2f7;
    border-radius: 2px;
    margin-top: 6px;
    overflow: hidden;
}

.progress-bar-inner {
    height: 100%;
    background: #ff9500;
    transition: width 0.3s ease;
}

.no-files {
    padding: 40px 0;
    color: #8e8e93;
    text-align: center;
}

.no-files-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.no-files-text {
    margin: 0;
    font-size: 14px;
}

.method-section {
    margin-top: 20px;
}

.method-title {
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 16px;
    font-size: 15px;
}

.method-checkbox-wrapper {
    position: relative;
    display: block;
}

.method-checkbox {
    display: none;
}

.method-label {
    display: block;
    border-radius: 8px;
    padding: 12px 16px;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s ease;
    cursor: pointer;
    text-align: center;
    border: 1px solid #efefef;
    background: white;
    color: #1d1d1f;
}

.method-checkbox:checked + .method-label {
    background: #007aff !important;
    color: white !important;
    border-color: #007aff !important;
}

.notify-section {
    padding-left: 12px;
}

.notify-container {
    padding-top: 20px;
    padding-right: 20px;
}

.notify-title {
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 16px;
    font-size: 15px;
}

.notify-checkbox-wrapper {
    display: flex;
    width: 100%;
    border-radius: 10px;
    padding: 5px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    /* border: 1px solid #f2f2f7; */
    background: white;
}

.notify-checkbox-wrapper:hover {
    background: #f8f9fa;
}


.notify-label {
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 6px;
    font-size: 14px;
}

.notify-description {
    color: #8e8e93;
    font-size: 13px;
    line-height: 1.4;
}

.confirm-button {
    margin: auto;
    width: 50%;
    border: none;
    border-radius: 10px;
    padding: 16px;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.2s ease;
}

.confirm-enabled {
    background: #007aff;
    color: white;
    cursor: pointer;
}

.confirm-disabled {
    background: #f2f2f7;
    color: #8e8e93;
    cursor: not-allowed;
}

.confirm-note {
    color: #8e8e93;
    text-align: center;
    margin-top: 12px;
    font-size: 13px;
}

.spinner-space {
    margin-left: 8px;
}

.select-all-wrapper {
    border-bottom: 1px solid #f2f2f7;
    margin-bottom: 12px;
    padding-bottom: 12px;
}

.CompressionLevelComboBox {
    height: 40px;
    width: -webkit-fill-available;
    border-radius: 8px;
    font-size: 14px;
    color: #000;
    -webkit-text-stroke: 0.2px;
    margin: auto;
    font-weight: 300;
}

.discount-code-container {
    margin: 15px 0;
}

.discount-code-wrapper {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.discount-code {
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    padding: 8px 15px;
    border-radius: 5px;
    font-family: 'Courier New', monospace;
    font-size: 16px;
    font-weight: bold;
    flex: 1;
    text-align: center;
    letter-spacing: 1px;
}

.copy-btn {
    background: #3498db;
    border: none;
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

.copy-btn:hover {
    background: #2980b9;
    transform: translateY(-1px);
}

.copy-btn i {
    margin-left: 5px;
}

.prize-notice {
    list-style: none;
    font-size: 14px;
}

.prize-notice a {
    c: #2980b9;

}


.demo-container {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    max-width: 400px;
    width: 100%;
}

.demo-title {
    font-size: 24px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 10px;
}

.demo-description {
    font-size: 16px;
    color: #6e6e73;
    margin-bottom: 30px;
    line-height: 1.5;
}

.demo-button {
    background: linear-gradient(135deg, #007AFF 0%, #0056CC 100%);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);
    margin: 5px;
}

.demo-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 122, 255, 0.4);
}

.demo-button.success {
    background: linear-gradient(135deg, #34C759 0%, #28A745 100%);
    box-shadow: 0 4px 15px rgba(52, 199, 89, 0.3);
}

.demo-button.success:hover {
    box-shadow: 0 6px 20px rgba(52, 199, 89, 0.4);
}

.demo-button.warning {
    background: linear-gradient(135deg, #FF9500 0%, #FF8C00 100%);
    box-shadow: 0 4px 15px rgba(255, 149, 0, 0.3);
}

.demo-button.warning:hover {
    box-shadow: 0 6px 20px rgba(255, 149, 0, 0.4);
}

.demo-button.error {
    background: linear-gradient(135deg, #FF3B30 0%, #DC3545 100%);
    box-shadow: 0 4px 15px rgba(255, 59, 48, 0.3);
}

.demo-button.error:hover {
    box-shadow: 0 6px 20px rgba(255, 59, 48, 0.4);
}

/* Custom SweetAlert2 Styles */
.swal2-popup {
    border-radius: 20px !important;
    border: none !important;
    backdrop-filter: blur(20px) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
}

.AlertSwal .swal2-title {
    font-size: 22px !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
}

.swal2-html-container {
    font-size: 16px !important;
    color: #6e6e73 !important;
    font-weight: 400 !important;
}

.swal2-confirm {
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 24px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    margin: 5px !important;
}

.swal2-confirm:hover {


}

.swal2-cancel {
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 24px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    margin: 5px !important;
}

.swal2-cancel:hover {

}


.swal2-backdrop {
    backdrop-filter: blur(10px) !important;
}

.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}


.loading-dots {
    color: #4A4A4A;
    font-size: 14px;
    pointer-events: none;
    width: 100px;
    text-align: right;
}

.dots::after {
    content: '.';
    animation: dots 1.5s steps(3, end) infinite;
}

@keyframes dots {
    0% {
        content: '.';
    }
    33% {
        content: '..';
    }
    66% {
        content: '...';
    }
}


.ConvertActionSection {
    margin-right: auto;
    padding-right: 10px;
}

.TranscribeTextAreaButtonsSpliter {
    background: #F1F1F1;
    width: 2px;
    height: 15px;
}

.convertActionSection {
    display: flex;
    width: 220px;
    justify-content: space-between;
}

.Stroke3 {
    -webkit-text-stroke: 0.3px;
}

.ModalLoginWays {
    font-size: 0.9rem;
    line-height: 30px;
    font-weight: 600;
}


.ModalLoginWaysText {
    margin-right: 5px;
}

.OCConvertAgainBtn {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    padding: 7px;
}

.thumbnail-container {
    width: 70px;
    height: 70px;
    min-width: 40px;
}

.thumbnail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid #ddd;
}

.NavProfileWalletValue {
    font-size: 12px;
    margin-right: 4px;
    color: #b50000;
    font-weight: 700;
}

.NotificationDropDownMenusIcon {
    color: #e9e9e9;
}


.OcrFreeConvertModal {
    transition: all 0.3s ease;
}

.OcrFreeConvertModal.show-content {
    animation: modalContentFadeIn 0.6s ease-out forwards;
}


.LoginModalTitle {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    width: 100%;
    text-align: center;
}

.OCRSettingSelectbox {
    border-radius: 8px;
    border: 1px solid #ddd;
    padding: 10px;
    font-size: 13px;
}

.OCRSettingSelectboxNotic {
    font-size: 0.85rem;
    color: #666;
    background: #f8f9fa;
    padding: 8px 12px;
    border-radius: 4px;
    border-right: 3px solid #17a2b8;
}

.OCCheckSubmit {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: bold;
}

.OCCheckSubmit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ConvertSettingsSelect {
    font-size: 13px;
    text-align: right;
    background: #ffffff;
    border-radius: 5px;
    color: #6c757d;
    padding: 5px;
    text-align: justify;
}

.OCDownloadWordLink {
    text-decoration: underline;
    cursor: pointer;
}

.OCDownloadWordLink:hover {
    color: #0056b3 !important;
}

code {
    background: #f1f3f4;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}

#OcrPriceModal .ModalBox {
    width: 100%;
}

#VerificationCodeModal .ModalBox {
    width: 80%;
}

.modal-content {
    border: none;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.modal-header {
    background: #FFFFFF;
    border: none;
    /*padding: 20px 24px 16px;*/
    position: relative;
}

.modal-title {
    font-size: 20px;
    font-weight: 600;
    color: #1D1D1F;
    text-align: center;
    width: 100%;
}

/*.btn-close {*/
/*    position: absolute;*/
/*    left: 16px;*/
/*    top: 16px;*/
/*    background: none;*/
/*    border: none;*/
/*    font-size: 18px;*/
/*    color: #8E8E93;*/
/*    opacity: 1;*/
/*    width: 32px;*/
/*    height: 32px;*/
/*    border-radius: 50%;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    transition: all 0.2s ease;*/
/*}*/

/*.btn-close:hover {*/
/*    background: #F2F2F7;*/
/*    color: #F84C62;*/
/*}*/

/*.modal-body {*/
/*    padding: 0 24px 24px;*/
/*}*/

.price-table {
    background: #F8F9FA;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 20px;
}

.table-header {
    background: #E5E5EA;
    padding: 16px;
    display: flex;
}

.table-header > div {
    flex: 1;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: #1D1D1F;
}

.table-row {
    display: flex;
    border-bottom: 1px solid #E5E5EA;
    transition: background-color 0.2s ease;
}

.table-row:last-child {
    border-bottom: none;
}

.table-row:hover {
    background: #F2F2F7;
}

.table-cell {
    flex: 1;
    padding: 14px;
    text-align: center;
    font-size: 15px;
}

.table-cell:first-child {
    color: #8E8E93;
    font-weight: 500;
}

.table-cell:last-child {
    color: #1D1D1F;
    font-weight: 600;
}

.calc-section {
    background: #F8F9FA;
    border-radius: 16px;
    padding: 20px;
}

.calc-title {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    font-size: 15px;
    font-weight: 500;
    color: #1D1D1F;
}

.calc-icon {
    color: #007AFF;
    font-size: 18px;
    margin-left: 8px;
}

/*.input-group {*/
/*    border-radius: 12px;*/
/*    overflow: hidden;*/
/*    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);*/
/*}*/

.form-control {
    font-size: 16px;
    color: #1D1D1F;
}

.form-control:focus {
    box-shadow: none;
    background: #FFFFFF;
}

.form-control::placeholder {
    color: #8E8E93;
}


.notice {
    background: #E3F2FD;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
}

.notice-icon {
    color: #007AFF;
    font-size: 16px;
    margin-left: 8px;
    flex-shrink: 0;
}

.notice-text {
    font-size: 14px;
    color: #1D1D1F;
    font-weight: 500;
    line-height: 1.4;
}

.result {
    background: #E8F5E8;
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
    text-align: center;
    display: none;
}

.result-text {
    font-size: 18px;
    font-weight: 600;
    color: #34C759;
}

.result-detail {
    font-size: 14px;
    color: #8E8E93;
    margin-top: 4px;
}

.error {
    background: #FFEBEE;
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
    text-align: center;
    display: none;
}

.BtnCalc {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.error-text {
    font-size: 16px;
    font-weight: 600;
    color: #FF3B30;
}

#ConvertPriceModal .ModalBox {
    width: 100%;
}

#ConvertPriceModal .input-group {

    height: 50px;
}

.modal-content {
    border: none;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

#ConvertPriceModal .modal-header {
    background: #FFFFFF;
    border: none;
    padding: 20px 24px 16px;
    position: relative;
}

.modal-title {
    font-size: 20px;
    font-weight: 600;
    color: #1D1D1F;
    text-align: center;
    width: 100%;
}

#ConvertPriceModal .btn-close {
    position: absolute;
    left: 16px;
    top: 16px;
    background: none;
    border: none;
    font-size: 18px;
    color: #8E8E93;
    opacity: 1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

#ConvertPriceModal .btn-close:hover {
    background: #F2F2F7;
    color: #1D1D1F;
}

.price-table {
    background: #F8F9FA;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 20px;
}

.table-header {
    background: #E5E5EA;
    padding: 16px;
    display: flex;
}

.table-header > div {
    flex: 1;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: #1D1D1F;
}

.table-row {
    display: flex;
    border-bottom: 1px solid #E5E5EA;
    transition: background-color 0.2s ease;
}

.table-row:last-child {
    border-bottom: none;
}

.table-row:hover {
    background: #F2F2F7;
}

.calc-title {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    font-size: 15px;
    font-weight: 500;
    color: #1D1D1F;
}

.calc-icon {
    color: #007AFF;
    font-size: 18px;
    margin-left: 8px;
}

.notice {
    background: #E3F2FD;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
}

.notice-icon {
    color: #007AFF;
    font-size: 16px;
    margin-left: 8px;
    flex-shrink: 0;
}

.notice-text {
    font-size: 14px;
    color: #1D1D1F;
    font-weight: 500;
    line-height: 1.4;
}

.CalculateResult {
    background: #E8F5E8;
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
    text-align: center;
    display: none;
}

.result-text {
    font-size: 18px;
    font-weight: 600;
    color: #34C759;
}

.result-detail {
    font-size: 14px;
    color: #8E8E93;
    margin-top: 4px;
}

.error {
    background: #FFEBEE;
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
    text-align: center;
    display: none;
}

.BtnCalc {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.error-text {
    font-size: 16px;
    font-weight: 600;
    color: #FF3B30;
}

.mobile-services-top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    z-index: 1000;
}

.mobile-services-menu-icon {
    background: none;
    border: none;
    font-size: 20px;
    color: #007aff;
    padding: 8px;
}

.mobile-services-logo {
    font-size: 18px;
    font-weight: 600;
    color: #007aff;
}

.mobile-services-nav-actions {
    display: flex;
    gap: 12px;
}

.mobile-services-nav-btn {
    background: none;
    border: none;
    color: #007aff;
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 6px;
}


.mobile-services-section {
    margin-bottom: 24px;
}

.mobile-services-section-title {
    /* text-align: center; */
    margin: auto;
    width: 100%;
    /* padding-top: 20px; */
    /* text-align: right; */
    padding: 15px 25px;
    border-bottom: 1px solid #f1f3f4;
    /* display: flex
; */
    align-items: center;
    text-decoration: none;
    color: #212529;
    min-height: 50px;
    transition: background-color 0.15s ease;
    /* text-align: center; */
    background: #ffffff;

    font-size: 16px;
    font-weight: 600;
    /* color: #8e8e93; */
    padding-top: 1rem;
    padding-right: 1rem;
    text-align: center;
}

.mobile-services-settings-group {
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e9ecef;
}

.mobile-services-settings-item {
    padding: 14px 16px;
    border-bottom: 1px solid #f1f3f4;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #212529;
    min-height: 50px;
    transition: background-color 0.15s ease;
}

.mobile-services-settings-item:last-child {
    border-bottom: none;
}

.mobile-services-settings-item:active {
    background-color: #f1f3f4;
}

.mobile-services-icon-container {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 12px;
    flex-shrink: 0;
}

/*.mobile-services-icon {*/
/*    font-size: 16px;*/
/*    color: white;*/
/*}*/

.mobile-services-item-title {
    font-size: 16px;
    font-weight: 400;
    flex: 1;
}

.mobile-services-chevron {
    font-size: 14px;
    color: #c7c7cc;
    margin-right: 8px;
}

/* Bottom Navigation */
.mobile-services-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 68px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding-bottom: env(safe-area-inset-bottom);
}

.mobile-services-bottom-nav-content {
    display: flex;
    width: 100%;
    max-width: 400px;
    justify-content: space-around;
    align-items: center;
}

.mobile-services-nav-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    text-decoration: none;
    color: #8e8e93;
    transition: color 0.2s ease;
    min-width: 60px;
}

.mobile-services-nav-tab.active {
    color: #007aff;
}

.mobile-services-nav-tab i {
    font-size: 20px;
}

.mobile-services-nav-text {
    font-size: 10px;
    font-weight: 500;
}

/* Icons using Unicode symbols */
.mobile-services-pdf-symbol::before {
    content: "📄";
}

.mobile-services-image-symbol::before {
    content: "🖼️";
}

.mobile-services-merge-symbol::before {
    content: "⧉";
    color: red;
}

.mobile-services-repair-symbol::before {
    content: "⚙️";
}

.mobile-services-split-symbol::before {
    content: "✂️";
}

.mobile-services-unlock-symbol::before {
    content: "🔓";
}

.mobile-services-lock-symbol::before {
    content: "🔒";
}

.mobile-services-word-symbol::before {
    content: "📝";
}

.mobile-services-type-symbol::before {
    content: "⌨️";
}

.mobile-services-translate-symbol::before {
    content: "🌐";
}

.mobile-services-edit-symbol::before {
    content: "✏️";
}

.mobile-services-custom-symbol::before {
    content: "⭐";
}

.mobile-services-audio-symbol::before {
    content: "🎵";
}

.mobile-services-compress-symbol::before {
    content: "📦";
}

@keyframes modalContentFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.OcrFreeConvertModal .modal-header {
    opacity: 0;
    transform: translateX(-20px);
    animation: slideInFromRight 0.2s ease-out 0.1s forwards;
}

.OcrFreeConvertModal .modal-body {
    opacity: 0;
    transform: translateY(20px);
    animation: slideInFromBottom 0.2s ease-out 0.2s forwards;
}

.OcrFreeConvertModal .TestConvertDesc {
    opacity: 0;
    transform: translateX(-20px);
    animation: slideInFromRight 0.2s ease-out 0.2s forwards;
}

.OcrFreeConvertModal .input-group {
    opacity: 0;
    transform: translateY(15px);
    animation: slideInFromBottom 0.2s ease-out 0.2s forwards;
}

.OcrFreeConvertModal .error-section {
    opacity: 0;
    transform: translateX(-20px);
    animation: slideInFromRight 0.2s ease-out 0.2s forwards;
}

.OcrFreeConvertModal .modal-footer {
    opacity: 0;
    transform: translateY(20px);
    animation: slideInFromBottom 0.2s ease-out 0.2s forwards;
}

.OcrFreeConvertModal .BtnModalConfirm {
    opacity: 0;
    transform: translateY(15px);
    animation: slideInFromBottom 0.2s ease-out 0.2s forwards;
    transition: all 0.3s ease;
}

.OcrFreeConvertModal .FreeConvertHelp {
    opacity: 0;
    transform: translateX(-20px);
    animation: slideInFromRight 0.2s ease-out 0.2s forwards;
}


.ReloadCaptchaArrow {
    -webkit-text-stroke: 1px;
    color: #0055b0;
    font-size: 20px;
    margin-right: 10px;
    cursor: pointer;
}

@keyframes slideInFromRight {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromBottom {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes scaleIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.OcrFreeConvertModal .bi-files,
.OcrFreeConvertModal .bi-info-circle {
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.OcrFreeConvertModal .error-section.show {
    animation: errorShake 0.2s ease-in-out;
}

@keyframes errorShake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    75% {
        transform: translateX(5px);
    }
}

#OcrFreeConvert .main-content {
    min-height: 50px;
}

.discount-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.discount-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.discount-card-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.copy-section {
    display: flex;
    justify-content: flex-end;
}

.copy-btn {
    background: #f3f4f6;
    border: none;
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    color: #6b7280;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.copy-btn:hover {
    background: #e5e7eb;
    color: #374151;
}

.copy-btn:active {
    background: #d1d5db;
    transform: scale(0.95);
}

.code-display {
    text-align: center;
    margin: 8px 0;
}

.discount-code {
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 12px 20px;
    font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    letter-spacing: 1px;
    display: inline-block;
}

.discount-amount {
    text-align: center;
}

.amount-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #059669;
    margin-bottom: 4px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.ImageTotextNoLimitLabel {
    font-size: 14px;
    color: rgb(187, 187, 187);
    text-align: center;
    margin: 10px 0px 0px;
}

.amount-label {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

.time-remaining {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    color: #9ca3af;
    font-weight: 500;
}

.time-remaining svg {
    opacity: 0.7;
}

.usage-type {
    margin-top: 10px;
    text-align: center;
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
    padding: 6px 12px;
    background: #f9fafb;
    border-radius: 6px;
    border: 1px solid #f3f4f6;
}


.blog-section {
    margin: 0 auto;
    padding: 60px 20px;
}

.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 15px;
}

.section-description {
    font-size: 1.1rem;
    color: #6c757d;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.posts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-bottom: 50px;
}

.post-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
    display: flex;
    flex-direction: column;
    height: 100%;
}


.post-image {
    width: 100%;
    height: 180px;
    transition: transform 0.3s ease;
}


.post-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.post-title {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 15px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-description {
    color: #6c757d;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 1;
}

.read-more {
    color: #495057;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.3s ease;
    margin-top: auto;
}

.read-more:hover {
    color: #2c3e50;
}

.read-more::after {
    content: '←';
    transition: transform 0.3s ease;
}

.read-more:hover::after {
    transform: translateX(-3px);
}

.blog-link {
    text-align: center;
}

.blog-button {
    display: inline-block;
    padding: 15px 40px;
    background-color: #2c3e50;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.blog-button:hover {
    background-color: #34495e;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(44, 62, 80, 0.3);
}

.OCFaqHelpQuestion {
    font-size: 20rem;
    color: #ededed;
}

@media (prefers-color-scheme: dark) {
    .discount-card {
        background: #1f2937;
        border-color: #374151;
        color: #f9fafb;
    }

    .discount-card:hover {
        border-color: #4b5563;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .copy-btn {
        background: #374151;
        color: #9ca3af;
    }

    .copy-btn:hover {
        background: #4b5563;
        color: #f3f4f6;
    }

    .discount-code {
        background: #3f7cff;
        border-color: #4b5563;
        color: #f3f4f6;
    }

    .amount-value {
        color: #10b981;
    }

    .amount-label {
        color: #9ca3af;
    }

    .time-remaining {
        color: #6b7280;
    }

    .usage-type {
        background: #111827;
        border-color: #374151;
        color: #9ca3af;
    }
}

.package-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    height: 100%;
}

.package-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.package-card-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
}

.package-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.package-icon {
    background: #f3f4f6;
    border-radius: 10px;
    padding: 10px;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
}

.package-actions {
    display: flex;
    gap: 8px;
}

.favorite-btn {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.favorite-btn:hover {
    background: #f9fafb;
}

.package-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.package-name {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    line-height: 1.4;
    text-align: center;
}

.package-expiry {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

.package-expiry svg {
    opacity: 0.7;
}

.remaining-section {
    margin: 8px 0;
}

.remaining-value {
    text-align: center;
}

.value-number {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 4px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.value-unit {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

.progress-section {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.progress-track {
    background: #f3f4f6;
    border-radius: 6px;
    height: 6px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    border-radius: 6px;
    transition: all 0.3s ease;
    position: relative;
}

.progress-percentage {
    text-align: center;
    font-size: 12px;
    color: #6b7280;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
    .package-card {
        background: #1f2937;
        border-color: #374151;
        color: #f9fafb;
    }

    .package-card:hover {
        border-color: #4b5563;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .package-icon {
        background: #374151;
        color: #9ca3af;
    }

    .favorite-btn:hover {
        background: #374151;
    }

    .package-name {
        color: #f9fafb;
    }

    .package-expiry {
        color: #9ca3af;
    }

    .value-number {
        color: #f9fafb;
    }

    .value-unit {
        color: #9ca3af;
    }

    .progress-track {
        background: #374151;
    }

    .progress-percentage {
        color: #9ca3af;
    }
}

.favorite-btn svg {
    transition: all 0.2s ease;
}

.favorite-btn:active svg {
    transform: scale(0.9);
}

[dir="rtl"] .package-header {
    flex-direction: row-reverse;
}

[dir="rtl"] .package-expiry {
    flex-direction: row-reverse;
}

@media (max-width: 768px) {
    .package-card {
        padding: 16px;
    }

    .value-number {
        font-size: 24px;
    }
}

.downloadDropDown {
    padding: 10px 10px;
}

.low-price-section {
    border: 1px dashed #dddddd;
    background: white;
    margin: auto;
    text-align: center;
    padding: 10px;
    width: 70%;
    border-radius: 8px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.low-price-credit {
    color: #00b700;
    font-weight: 600;
}

.low-price-value {
    font-weight: 600;
}

.low-price-icon {
    font-size: 25px;
}

.sort:hover {
    cursor: move;
}

#wheelCanvas {
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: transform 0.1s ease;
    max-width: 100%;
    height: auto;
}

.MobileNotificationDropdown {
    min-height: 2rem;
    min-width: 20rem;
    padding: 15px;
}

.mobile-dropdown-item {
    padding: 15px;
}

.MobileNotificationItem {
    padding: 10px 15px;
}

.BuyPackageDropdown {
    width: 50vw;
    text-align: right;
    padding: 10px 10px;
}

.BuyPackageDropdownItem {
    padding: 10px 10px;
}


.low-price-alert {
    background: #f9f9f9;
    line-height: 25px;
    border: none;
    color: black;

}

.SubMenuApiSection a {

    color: black;
}

.invoice-wrapper {

    display: flex;
    align-items: center;
    justify-content: center;
}

.invoice-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 1000px;
    overflow: hidden;
}

.card-header {
    border-bottom: 1px solid #dee2e6;
    padding: 20px;
    text-align: center;
}

.header-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #495057;
    margin: 0;
}

.invoice-subtitle {
    color: #6c757d;
    font-size: 0.9rem;
    margin-top: 5px;
}

.card-body {
    padding: 30px;
}

.company-section {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.company-name {
    font-size: 1.3rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 10px;
}

.company-address {
    color: #6c757d;
    font-size: 0.85rem;
    line-height: 1.6;
}

.details-row {
    margin-bottom: 25px;
}

.detail-card {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    height: 100%;
}

.detail-title {
    font-size: 1rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 15px;
    border-bottom: 2px solid #dee2e6;
    padding-bottom: 8px;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e9ecef;
}

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

.detail-label {
    color: #6c757d;
    font-size: 0.9rem;
}

.detail-value {
    color: #495057;
    font-weight: 500;
    font-size: 0.9rem;
}

.table-responsive {
    background: white;
    border-radius: 8px;
    margin-bottom: 25px;
}

.table {
    margin: 0;
}

.table th {
    background: #f8f9fa;
    border: none;
    font-weight: 600;
    color: #495057;
    padding: 15px;
    font-size: 0.9rem;
    text-align: center;
}

.table td {
    border: none;
    padding: 15px;
    color: #495057;
    font-size: 0.9rem;
    text-align: center;
    vertical-align: middle;
}

.table tbody tr {
    border-bottom: 1px solid #e9ecef;
}

.table tbody tr:last-child {
    border-bottom: none;
}

.table tbody tr:hover {
    background-color: #f8f9fa;
}

.total-card {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
}

.total-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e9ecef;
}

.total-item:last-child {
    border-bottom: none;
    padding-top: 15px;
    margin-top: 10px;
    font-weight: 600;
    font-size: 1rem;
}

.total-label {
    color: #6c757d;
    font-size: 0.9rem;
}

.total-value {
    color: #495057;
    font-weight: 500;
}

.final-total .total-label,
.final-total .total-value {
    color: #495057;
    font-weight: 600;
}

.signature-section {
    margin-top: 30px;
}

.signature-box {
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.signature-label {
    color: #6c757d;
    font-size: 0.85rem;
    margin-top: 10px;
}

.footer {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #dee2e6;
    color: #6c757d;
    font-size: 0.8rem;
}

.section-title {
    font-size: 16px;
    font-weight: 600;
    padding-top: 1rem;
    padding-right: 1rem;
    text-align: center;

}

.settings-group {
    border-radius: 12px;
    overflow: hidden;
    padding: 0 10px;
}

.settings-item {
    border: 1px solid #f3f3f3;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    min-height: 50px;
    transition: background-color 0.15s ease;
}

.settings-item:active {
    background-color: #f1f3f4;
}

.icon-container {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 12px;
    flex-shrink: 0;
    color: #0d6dfb;

}

.icon {
    font-size: 16px;
    color: white;
}

.item-title {
    font-size: 14px;
    font-weight: 500;
    /* color: #8e8e93; */
    /* padding-top: 1rem; */
    /* padding-right: 1rem; */
    -webkit-text-stroke: black 0.3px;

}


.ios-segmented-control {
    background: #F2F2F7;
    border-radius: 10px;
    padding: 2px;
    display: flex;
    position: relative;
    margin: auto;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 5px;
    margin-left: 0;
    margin-right: 0;

}

.ios-tab-button {
    flex: 1;
    background: transparent;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    color: #8e8e93;
    transition: all 0.2s ease;
}

.ios-tab-button.active {
    background: #fff;
    color: #000;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.package-item {
    flex-wrap: wrap;
    gap: 12px;
}

.package-desc {
    font-size: 14px;
    color: #8e8e93;
    margin: 0;
}

#MobilePackagePage .package-price {
    text-align: left;
    font-size: 16px;
    font-weight: 500;
    color: #212529;
}

.price-unit {
    font-size: 12px;
    color: #8e8e93;
    margin-right: 4px;
}

.btn-buy-package {
    font-size: 14px;
    font-weight: 600;
    color: #0d6efd;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.2s ease;
}


.btn-buy-package:active {
    background: #005bb5;
}

/* Icons from the first page */
.pdf-symbol::before {
    content: "📄";
}

.audio-symbol::before {
    content: "🎵";
}

.PackageSeparator {
    border: none;
    border-top: 1px dashed #ccc;
    margin: 1rem 0;
}


#MobilePackagePage .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: var(--nav-bg-link-active);
    border-radius: 10px;
    margin-right: 0;
}


.ios-tabs-container {
    font-size: 14px;
    font-weight: 600;
    background: #FFFFFF;
    padding: 12px 16px 0 16px;
    border-bottom: 0.5px solid rgba(60, 60, 67, 0.12);
}

.ios-segmented-control {
    background: #F2F2F7;
    border-radius: 10px;
    padding: 2px;
    display: flex;
    position: relative;
    margin: auto;
    width: 95%;
    background: #F2F2F7;
    border-radius: 10px;
    padding: 2px;
    display: flex;
    margin: auto;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 15px;

}

#MobilePackagePage .nav-item {
    width: 50%;
}

#MobilePackagePage .ios-tab-button {
    width: 100%;
    flex: 1;
    background: transparent;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.2s ease;
    position: relative;
    z-index: 2;
    font-size: 14px;
    font-weight: 600;
}

#MobilePackagePage .ios-tab-button.active {
    background: #FFFFFF !important;
    color: #000000;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

#MobilePackagePage .ios-tab-button:not(.active) {
    color: #8E8E93;
}

#MobilePackagePage .ios-tab-button:hover:not(.active) {
    color: #000000;
}

.BtnShowAllMessage {
    width: auto !important;
}

.ServicesFreeBadge {
    font-size: 10px;
    font-weight: 400;
    color: #5BE94F;
    border: 1px solid #d3ffcf;
    padding: 2px 4px;
    margin-right: 4px;
    border-radius: 4px;
    margin-top: -4px;
}

#WheelOfFortune::-webkit-scrollbar {
    display: none;

}

.wheel-container {
    text-align: center;
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 30px;
}

.wheel-wrapper {
    position: relative;
    display: inline-block;
    margin: 20px 0;
}

#wheelCanvas {
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: transform 0.1s ease;
}

#wheelCanvas:hover {
    transform: scale(1.02);
}

.pointer {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 30px solid #ff4757;
    z-index: 10;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.result {
    margin-top: 20px;
    padding: 15px 25px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 15px;
    font-size: 18px;
    font-weight: 500;
    color: #333;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.result.show {
    opacity: 1;
    transform: translateY(0);
}

.spin-button {
    background: linear-gradient(45deg, #ff6b6b, #ee5a52);
    border: none;
    color: white;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 25px;
    cursor: pointer;
    margin: 20px 0;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);
}

.spin-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
}

.spin-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.title {
    color: white;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    margin-bottom: 20px;
}

/* انیمیشن کنفتی */
.confetti {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
}

.confetti-piece {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #ff6b6b;
    animation: confetti-fall 3s linear infinite;
}

@keyframes confetti-fall {
    0% {
        transform: translateY(-100vh) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

.winner-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: white;
    color: white;
    padding: 15px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    z-index: 1001;
    text-align: center;
    max-width: 400px;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.winner-popup.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.winner-popup h2 {
    font-size: 32px;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.winner-popup .prize-text {
    font-size: 14px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.2);
    padding: 15px 25px;
    border-radius: 15px;
    margin: 20px 0;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.winner-popup .close-btn {
    background: rgb(49 166 191);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 12px 25px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 20px;
    transition: all 0.3s ease;
}

.winner-popup .close-btn:hover {
    background: rgb(41, 160, 187);
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
}

.overlay::-webkit-scrollbar {
    display: none;
}

.overlay.show {
    opacity: 1;
    visibility: visible;
}

.firework {
    position: fixed;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    animation: firework 1.5s ease-out infinite;
}

.low-price-alert  ul {

    padding-right: 20px;
    list-style: none;
    padding-left: 15px;
    margin-bottom: 0;

}


.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    background-color: rgba(255, 255, 255, 0.5);
}

#worker-order-detail {
    min-height: 100vh;
    padding: 20px;
}

.WorderOrderDetailTitle{
    font-size: 16px;
}

#worker-order-detail .main-container {
    max-width: 1200px;
    margin: 0 auto;
}

#worker-order-detail .card-body {
    padding: 0 !important;
}

#worker-order-detail .info-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#worker-order-detail .info-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

#worker-order-detail .info-icon {
    width: 32px;
    height: 32px;
    background: #f2f2f7;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#worker-order-detail .info-icon i {
    font-size: 14px;
    color: #007aff;
}

#worker-order-detail .info-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

#worker-order-detail .info-label {
    font-size: 13px;
    color: #8e8e93;
    font-weight: 400;
}

#worker-order-detail .info-value {
    font-size: 15px;
    color: #1d1d1f;
    font-weight: 500;
}

#worker-order-detail .action-section {
    padding-top: 20px;
    border-top: 1px solid #f2f2f7;
    margin-top: 4px;
}

#worker-order-detail .btn-primary {
    background-color: #007aff;
    border-color: #007aff;
    transition: all 0.2s ease;
}

#worker-order-detail .btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
    transform: translateY(-1px);
}

#worker-order-detail .ios-confirmation-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    min-height: 280px;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Vazir', sans-serif;
}

#worker-order-detail .ios-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 0;
    width: 100%;
    max-width: 320px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

#worker-order-detail .ios-header {
    padding: 24px 20px 20px 20px;
    text-align: center;
    border-bottom: 1px solid #f2f2f7;
}

#worker-order-detail .ios-title {
    font-size: 18px;
    font-weight: 600;
    color: #1c1c1e;
    margin: 0 0 8px 0;
}

#worker-order-detail .ios-subtitle {
    font-size: 14px;
    font-weight: 400;
    color: #8e8e93;
    margin: 0;
    line-height: 1.4;
}

#worker-order-detail .ios-buttons {
    display: flex;
    flex-direction: column;
}

#worker-order-detail .ios-btn {
    width: 100%;
    padding: 16px 20px;
    border: none;
    background: none;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

#worker-order-detail .ios-btn:not(:last-child) {
    border-bottom: 1px solid #f2f2f7;
}

#worker-order-detail .ios-btn-primary {
    color: #007aff;
    font-weight: 600;
}

#worker-order-detail .ios-btn-primary:hover {
    background-color: rgba(0, 122, 255, 0.04);
}

#worker-order-detail .ios-btn-primary:active {
    background-color: rgba(0, 122, 255, 0.08);
}

#worker-order-detail .ios-btn-secondary {
    color: #ff3b30;
}

#worker-order-detail .ios-btn-secondary:hover {
    background-color: rgba(255, 59, 48, 0.04);
}

#worker-order-detail .ios-btn-secondary:active {
    background-color: rgba(255, 59, 48, 0.08);
}

#worker-order-detail .ios-btn:focus {
    outline: none;
}

#worker-order-detail .ios-btn:active {
    transform: scale(0.98);
}

#worker-order-detail [dir="rtl"] .ios-card {
    direction: rtl;
}

#worker-order-detail .upload-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    height: 100%;
}

#worker-order-detail .upload-content {
    text-align: center;
    width: 100%;
}

#worker-order-detail .upload-icon {
    width: 48px;
    height: 48px;
    background: #f2f2f7;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: #8e8e93;
}

#worker-order-detail .upload-title {
    font-size: 17px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 4px 0;
}

#worker-order-detail .upload-subtitle {
    font-size: 13px;
    color: #8e8e93;
    margin: 0 0 20px 0;
}

#worker-order-detail .description-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

#worker-order-detail .description-header i {
    color: #007aff;
    font-size: 16px;
}

#worker-order-detail .description-header span {
    font-size: 15px;
    font-weight: 600;
    color: #1d1d1f;
}

#worker-order-detail .description-content {
    font-size: 14px;
    line-height: 1.5;
    color: #3a3a3c;
    min-height: 120px;
}

#worker-order-detail .filepond--root {
    border: 1px dashed #d1d1d6;
    border-radius: 8px;
    background: #fbfbfd;
    font-family: inherit;
}

#worker-order-detail .filepond--root:hover {
    border-color: #007aff;
}

#worker-order-detail .filepond--panel-root {
    background: transparent;
    border: none;
}

#worker-order-detail .filepond--drop-label {
    color: #8e8e93;
    font-size: 14px;
}

#worker-order-detail .filepond--label-action {
    color: #007aff;
    text-decoration: none;
    font-weight: 500;
}

#worker-order-detail .filepond--item-panel {
    background: #ffffff;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
}

#worker-order-detail .filepond--file-info-main {
    color: #1d1d1f;
    font-weight: 500;
    font-size: 14px;
}

#worker-order-detail .filepond--file-info-sub {
    color: #8e8e93;
    font-size: 12px;
}

#worker-order-detail .filepond--file-action-button {
    background: #f2f2f7;
    border-radius: 6px;
}

#worker-order-detail .filepond--file-action-button:hover {
    background: #e5e5ea;
}


@keyframes firework {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    50% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.pointer.pulse {
    animation: pulse 0.5s ease-in-out 3;
}

@keyframes pulse {
    0% {
        transform: translateX(-50%) scale(1);
    }
    50% {
        transform: translateX(-50%) scale(1.3);
    }
    100% {
        transform: translateX(-50%) scale(1);
    }
}

@media (max-width: 768px) {

    .invoice-wrapper {
        padding: 10px;
    }

    .card-body {
        padding: 20px;
    }

    .company-section {
        padding: 15px;
    }

    .detail-card {
        padding: 15px;
        margin-bottom: 15px;
    }

    .table th, .table td {
        padding: 10px 5px;
        font-size: 0.8rem;
    }

    #wheelCanvas {
        width: 300px !important;
        height: 300px !important;
    }

    .wheel-container {
        padding: 15px;
    }
}

@media (max-width: 480px) {
    #wheelCanvas {
        width: 250px !important;
        height: 250px !important;
    }

    .pointer {
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-top: 24px solid #ff4757;
    }

    .title {
        font-size: 22px;
    }

    .spin-button {
        padding: 12px 24px;
        font-size: 16px;
    }
}

@media (max-width: 360px) {
    #wheelCanvas {
        width: 220px !important;
        height: 220px !important;
    }
}

@media (max-width: 1496px) {
    .div-SiteInfoSectionItem {
        width: 90%;
    }
}

@media (max-width: 1485px) {
    .PurchasePayInfo {
        padding: 1rem 2rem;
    }

    .PayWarningSection {
        padding: 1rem 2rem;
    }

}

@media (max-width: 1435px) {

    .service-dropdown {
        width: 85vw;
        right: -100px !important;
    }

    .SubMenu {
        width: 90vw;
        left: 1rem;
        right: 1rem;
    }

    .SubMenuItem {
        font-size: 12px;
    }
}

@media (max-width: 1400px) {
    .SelectFileAreaContent {
        width: 70%;
    }

}

@media (max-width: 1397px) {
    .ContactContent {
        padding: 2rem 7rem;
    }

    .SelectFileAreaContent {
        width: 75%;
    }
}

@media (max-width: 1385px) {
    .PurchasePayInfo {
        padding: 1rem 1rem;
    }

    .PayWarningSection {
        padding: 1rem 10px;
    }

}

@media (max-width: 1381px) {
    .OrdersTypeSection {
        width: 90%;
    }
}

@media (max-width: 1380px) {
    .PopularSectionItems {
        /*width: 90%;*/
    }
}

@media (max-width: 1332px) {
    .WeblogPostTitle {
        font-size: 14px;
    }

    .WeblogPostDesc {
        font-size: 11px;
    }

    .BtnViewWeblogPost {
        font-size: 12px;
    }

}

@media (max-width: 1312px) {
    .AppDownloadArea {
        padding-left: 10rem;
    }
}

@media (max-width: 1300px) {

    .OffCodeInputSection {
        width: 80%;
    }

    .PurchaseOffCodeSection {
        flex-direction: column;
    }

    .navbar-nav {
        padding-right: 0;
    }
}

@media (max-width: 1261px) {
    .ContactContent {
        padding: 2rem 5rem;
    }
}

@media (max-width: 1257px) {
    .PopularSectionItems {
        /*width: 100%;*/
    }
}

@media (max-width: 1251px) {
    .SubMenu {
        width: 100vw;
        left: 0;
        right: 0;
    }

}

@media (max-width: 1247px) {
    .PurchaseSection {
        padding: 7rem 3rem 3rem 3rem;
    }

    .PurchasePayMethods {
        padding: 1rem 1rem;
    }

}

@media (max-width: 1225px) {
    .OrdersTypeSection {
        width: 100%;
    }

    .Box {
        width: 70px;
        height: 80px;
        top: -2vh;
        right: 2vh;
    }

    .nav-link {
        font-size: 16px;
        font-weight: bold;
    }
}

@media (min-width: 1200px) {
    .menu-section {
        flex: 0 1 calc(10% - 25px);
        max-width: calc(10% - 25px);
    }

    .service-dropdown {
        width: 80vw;
        right: -100px !important;
    }
}


@media (max-width: 1185px) {
    .navbar-nav {
        padding-right: 0;
    }

    .nav-item {
        padding-left: 0;
        padding-right: 0;
        font-size: 13px;
        font-weight: 500;
    }


}

@media (max-width: 1145px) {


    .PurchaseOffCodeSection {
        font-size: 13px;
    }

}

@media (min-width: 1130px) {
    .menu-section {
        flex: 0 1 calc(10% - 25px);
        max-width: calc(10% - 25px);
    }
}

@media (max-width: 1101px) {


    .OrdersTypeSection {
        width: 100%;
    }

    .OrderSectionBox {
        padding: 1rem 1rem;
    }

    .OrderSectionBoxItemIcon {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .OrderSectionBoxItemTitle {
        font-size: 18px;
    }

    .OrderSectionBoxItemDescription {
        font-size: 14px;
    }

    .OrderSectionBox {
        padding: 2rem 0;
    }
}

@media (max-width: 1090px) {
    .SelectFileAreaContent {
        width: 80%;
    }

}

@media (max-width: 1080px) {
    .AppDownloadArea {
        padding-left: 5rem;
    }
}

@media (max-width: 1024px) {
    .posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {

    .posts-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .post-content {
        padding: 20px;
    }
}

@media (max-width: 1000px) {

}

@media (max-width: 992px) {

    .SelectFileArea .LoadingOverlay {
        top: -15px;
        left: 0;
        right: 0;
    }

    .BtnFreeConvert {
        /*margin-right: 0px;*/
    }

    .OCFaqHelpQuestion {
        display: none;
    }

    .IndexHelpVideo {
        padding: 2rem 1rem;
    }

    .IndexVideooHelpVideoFile {
        margin-top: 1rem;
    }

    .AllToolsSectionContainer {
        width: 100%;
    }

    .SelectFileAreaMobileTest {

        margin-top: 1rem;
    }

    .MobileAppImage {
        width: 50%;
    }

    .MobileAppIconDiv {
        margin: auto;
    }

    .AppDownloadArea {
        margin-top: 2rem;
        text-align: center;
        padding-left: 5rem;
        padding-right: 5rem;
    }

    .navbar-brand {
        width: 40px;
        padding: 0;
        margin-left: auto;
    }

    .TopNavBar {
        text-align: right;
        width: 100%;
        -webkit-text-stroke: unset;
        z-index: 1000;
        box-shadow: 1px 1px 9px #e5e5e5;
        position: fixed;
    }

    .NavbarLogo {
        margin-left: 10px;
        width: 40px
    }

    .page-container {
        padding: 0;
    }

    .BtnTicket {
        width: 100% !important;
    }

    .NotSelectedTicketSection {

        height: 100vh !important;

    }

    .WeblogPostBox {
        padding: 0;
    }

    .filepond--root {
        max-height: 30vh;
    }

    .PurchaseOffCodeSection {

    }

    .filepond--file {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: auto;
    }

    .filepond--file .filepond--progress-indicator {
    }

    .filepond--file-action-button {
        background: rgba(255, 201, 196, 0.55);
        color: #e74c3c;
    }

    .filepond--drop-label {
        border-radius: 16px;
        background-color: transparent;
        height: 55px;
    }

    .filepond--root .filepond--drop-label {
    }

    .tab-content .filepond--file-info {
        transform: translate3d(0px, 0px, 0px);
        width: 100%;
        flex-direction: row;
        justify-content: center;
        text-align: center;
        margin-left: 2rem;
        gap: 10px;

    }

    .tab-content .filepond--file-info-main {

    }

    .tab-content .filepond--file-info-sub {
        display: none;
    }

    .filepond--file {
        border: var(--filepond--file-border);
        position: static;
        padding: 15px 15px 15px 12px;
        color: var(--text-color);
        border-radius: 0.5em;

    }

    .filepond--root {
        max-height: 30vh;
    }

    .filepond--item {
        touch-action: manipulation;
        top: 20px;
    }

    .filepond--root .filepond--list-scroller {
        direction: ltr;
        margin-top: 0;
        margin-bottom: 0;
    }

    .filepond--file-wrapper {
        border-radius: 16px;
    }

    [data-filepond-item-state*='error'] .filepond--file-wrapper {
        color: white;
    }

    [data-filepond-item-state*='error'] .filepond--file {
        color: white;

    }

    [data-filepond-item-state='cancelled'] .filepond--file-info, [data-filepond-item-state*='invalid'] .filepond--file-info, [data-filepond-item-state*='error'] .filepond--file-info {
        margin-right: 5.0em;
        color: white;
    }

    [data-filepond-item-state='processing-complete'] .filepond--file {
        background: white;
    }

    [data-filepond-item-state='processing-complete'] .filepond--item-panel {
        background-color: var(--filepond--item-panel-bg);
    }

    .filepond--panel-root {
        border-radius: 0.5em;
        background-color: transparent;
    }

    .filepond--item-panel {
        background-color: transparent;
    }

    .filepond--root .filepond--drop-label {
        min-height: 3.75em;
    }

    .filepond--file-status .filepond--file-status-main {
        line-height: 2.2;
    }

    .filepond--file-status-sub {
        display: none;
    }

    .tab-content .filepond--file-info .filepond--file-info-main {
        font-size: 0.75em;
        line-height: 1.2;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        margin-bottom: 13px;
        width: auto;
        font-weight: 600;
    }

    .row.g-2 > .col-md-4 {
        margin-bottom: 0.5rem;
    }

    .navbar > .container, .navbar > .container-fluid, .navbar > .container-lg, .navbar > .container-md, .navbar > .container-sm, .navbar > .container-xl, .navbar > .container-xxl {
        justify-content: flex-start;
    }

    .SelectFileArea {
        margin-top: 8rem;
    }

    .HomePageSlider {
        margin-bottom: 4vh;
    }

    .SelectFileSection {
        background: none;
        box-shadow: none;
        flex-direction: row;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        margin-bottom: 1rem;
        padding: 0;
        width: 70%;
        margin: auto;
    }

    .BtnSelectFile {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .UploaderInput {
        border: none;
    }

    .DragAndDropText {
        display: none;
    }

    .DragAndDropSection {
        background-image: none;
        width: 80%;
        min-height: 0;
        margin: auto;
    }

    .SelectFileHelp {
        display: none;
    }

    .SelectFileTest {
        display: none;
    }

    .SelectFileTestMobile {
        text-align: center;
        margin-bottom: 1rem;
        font-size: 16px;
        font-weight: 500;
        color: #444;
        margin-top: 4rem;
    }

    .SelectFilebtn {
        width: 250px;
    }

    .SelectFileAreaContent {
        width: 100%;
        padding: 0;
    }

    .UploadSectionContent {
        padding: 0;
    }

    .PopularSection {
        margin-bottom: 70px;
    }

}

@media (max-width: 990px) {

    .PurchaseSection {
        padding: 7rem 2rem 3rem 2rem;
    }


    .PurchasePayMethodSectionTitle {
        font-size: 16px;
    }

    .PurchaseOffCodeSection {
        font-size: 13px;
    }

    .BtnPurchaseEditFiles {
        font-size: 14px;
    }

    .WalletDesc {
        font-size: 12px;
    }

    .PurchaseMethodItemBalanceText {
        font-size: 12px;
    }

    .PurchaseMethodItemBalance {
        font-size: 12px;
    }

    .BtnUseCredit {
        font-size: 12px;
    }

    .PayFinalPriceSection {
        font-size: 14px;
    }

    .BtnPaySection {
        padding: 0rem 4rem 1rem;
    }

    .BtnOffCodeApply {
        font-size: 14px;
    }

}

@media (max-width: 987px) {
    .SelectFileAreaTitle {
        margin-bottom: 1rem;
    }

    .DragAndDropText {
        display: none;
    }

    .HomePageUploader .UploaderInput {
        background-image: none;
    }


}

@media (max-width: 970px) {

    .WeblogPostDesc {
        font-size: 10px;
    }

    .WeblogPostTitle {
        font-size: 12px;
    }

}

@media (max-width: 920px) {

}

@media (max-width: 880px) {
    .ToolsTitle {
        font-size: 18px;
    }

    .ToolText {
        font-size: 12px;
    }

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

@media (max-width: 870px) {
    .PopularSectionItems {
        padding: 0;
        flex-direction: column;
        text-align: center;
        align-items: flex-start;
        /*padding-right: 40px;*/
        margin-bottom: 15px;

    }
}

@media (max-width: 808px) {
    .WeblogPostDesc {
        font-size: 11px;
        margin: 0;
        line-height: 15px;
    }

}

@media (max-width: 817px) {

    .AppDownloadArea {
        margin-top: 2rem;
        text-align: center;
        padding-left: 3rem;
        padding-right: 3rem;
    }

    .AppDownloadArea {
        margin-top: 2rem;
        text-align: center;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (max-width: 802px) {
    .ContactContent {
        padding: 2rem 3rem;
    }
}

@media (max-width: 800px) {
    .DragAndDropSection {
        width: 90%;
    }

}

@media (min-width: 768px) and (max-width: 1199px) {
    .menu-section {
        flex: 0 1 calc(20% - 20px);
        max-width: calc(20% - 20px);
    }
}

@media (max-width: 768px) {

    .PopularSectionItem:nth-child(3) {
        display: none;
    }

    .OrderSectionBox {
        margin-bottom: 1rem;
    }

    .OrderSectionBoxItemTitle {
        font-size: 15px;
    }

    .OrderSectionBoxItemDescription {
        font-size: 12px;
    }

    .carousel-control-prev,
    .carousel-control-next {
        width: 25px;
        height: 25px;
    }

    .carousel-control-prev {
        left: 5px;
    }

    .carousel-control-next {
        right: 5px;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 10px;
        height: 10px;
    }

    .carousel-caption h5 {
        font-size: 0.85rem;
    }

    #ProfileNotificationSection .dropdown-menu.show {
        position: fixed !important;
        top: -1px !important;
        left: 15px !important;
        right: 15px !important;

        width: 95% !important;

        max-height: 200px;
    }

    .SafeLogo {
        width: 25%;
        margin-top: 2rem;
    }

    .AboutUsTitle {
        margin-top: 4rem;
    }

    #ProfileNotificationSection .mobileLogOut .dropdown-menu.show {
        position: fixed !important;
        top: -1px !important;
        left: 15px !important;
        right: 240px !important;

        width: 35% !important;

        max-height: 200px;
    }
}

@media (max-width: 767px) {
    .ToolsTitle {
        font-size: 20px;
    }

    .ToolText {
        font-size: 12px;
    }

    .ToolItemBox {
        margin-bottom: 2rem;
        padding-right: 15px;
        padding-left: 13px;
    }


}

@media (max-width: 767px) {
    .menu-grid {
        gap: 20px;
    }

    .menu-section {
        flex: 0 1 calc(50% - 10px);
        max-width: calc(50% - 10px);
        min-width: max-content;
    }
}

@media (max-width: 767px) {

    .PurchaseSection {
        padding: 5rem 8rem 3rem 8rem;
    }

    .PurchasePayInfo {
        padding: 1rem 5rem;
    }
}

@media (max-width: 767px) {
    .PurchasePaySection {
        margin-right: 0;
        margin-top: 2rem;
    }

    .PurchasePageDescSection {
        margin-top: 3rem;
    }

    .PurchaseMethodItem {
        margin-right: 0;
        margin-left: 0;
    }
}

@media (max-width: 700px) {

    .div-SiteInfoSection {
        padding: 3rem 1rem 0;;
    }
}

@media (max-width: 688px) {
    .AboutUsSection {
        padding: 2rem 2rem;
    }
}

@media (max-width: 680px) {
    .PurchaseSection {
        padding: 5rem 5rem 3rem 5rem;
    }
}

@media (max-width: 676px) {
    .ContactContent {
        padding: 2rem 2rem;
    }

    .freeConvert .btn-group {
        width: 125px;
    }
}

@media (max-width: 600px) {

    .PurchaseOffCodeSection {
        flex-direction: column;
    }

    .OffCodeInputSection {
        width: 100% !important;
    }

    .DragAndDropSection {
        width: 100%;
    }

    .SelectFileSection {
        width: 80%;
    }

    #BtnPurchaseConvert {
        font-size: 12px;

    }
}

@media (max-width: 590px) {

    .PurchaseSection {
        padding: 5rem 1rem 3rem 1rem;
    }

    .PurchasePayInfo {
        padding: 1rem 1rem;
    }

    .PurchasePayMethodSectionTitle {
        font-size: 14px;
    }

    .BtnPurchaseEditFiles {
        font-size: 14px;
    }

    .PurchaseMethodText {
        font-size: 14px;
    }

    .IncreaseWalletCredit {
        font-size: 12px;
    }

    .WalletDesc {
        font-size: 12px;
    }


    .StartConvertSection {
        box-shadow: 0px 3px 9px 0px rgb(129 129 129 / 5%);
        background-color: white;
        border-radius: 10px;
        border: 1px #F7F4F4 solid;
        position: relative;
        min-height: 38vh;
        display: flex;
        flex-direction: column;

    }

    .ConvertTitleSection {
        display: flex;
        align-items: center;
        color: #7f7f7f;
        padding: 15px 10px 15px 0;
    }

    .ConvertPageDivider {
        padding: 0;
        margin: 0;
        color: #EAEAEA;
        opacity: 1;
    }


    .ConvertSectionTitle {
        font-size: 16px;
        font-weight: bold;
    }

    .ConvertSectionIcon {
        font-size: 25px;
        margin-left: 10px;
    }

    .ConvertRows {

        font-weight: bold;
        color: #555555;
        font-size: 14px;
    }

    .ConvertRow {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        border: none;
        padding: 20px 15px;
        text-align: right;
        font-weight: bold;
        color: #525252;
        border-radius: 8px;
    }

    .TitleConvertRow {
        display: flex;
        justify-content: space-between;
        padding: 20px 15px;
        background-color: #f8f8f8;
        align-items: center;
    }

    .ConvertRowConvertMethod {
        text-align: center;
        width: 55%;
    }

    .SettingIcon {
        margin-left: 5px;
    }

    .ConvertSectionIcon {
        font-size: 20px;
        margin-left: 5px;
    }

    .CheckBoxSection {
        margin-left: 15px;
    }

    .ConvertSectionContent {
        position: relative;
        z-index: 1;
    }

    .ConvertBox {
        position: absolute;
        background-color: #f3f3f3;
        top: -25px;
        bottom: 0;
        right: -25px;
        z-index: -1;
        width: 99px;
        height: 100px;
        border-radius: 16px;
        transform: rotate(107deg);

    }

    .ConvertPageBar {
        position: absolute;
        background-color: #418cff;
        top: 17px;
        bottom: 0;
        right: -1px;
        z-index: 0;
        width: 4px;
        height: 25px;
        border-radius: 20px;
    }

    .accordion-button {
        font-size: 13px !important;
    }

    .accordion-button::after {
        margin-left: 0 !important;
        margin-right: auto;
    }

    .accordion-body {
        font-size: 13px;
    }


    .accordion-button:focus {
        box-shadow: none;
    }

    .ConvertRowTitles {
        padding-bottom: 1rem;
    }

    .ConvertRowFile {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }


    .BtnConvert:hover {
        background-color: #0087D2;
        color: white;
        transition: all 0.4s;
        touch-action: auto;
    }


    .ConvertCol {
        padding-bottom: 1rem;
        padding-top: 1rem;
    }

    .OtherServicesSection {
        box-shadow: 0px 3px 9px 0px rgb(129 129 129 / 5%);
        margin-top: 1rem;
        background-color: white;
        border-radius: 10px;
        border: 1px #F7F4F4 solid;
        height: 100%;
        position: relative;
    }

    .OtherServicesItemsSection {
        padding: 20px 1rem;
        display: flex;
        justify-content: end;
        align-items: center;
        gap: 1rem;

    }

    .OtherServicesItem {
        color: #878787;
        font-size: 12px;
        -webkit-text-stroke: 0.2px #878787;

    }

    .OtherServiceIcon {
        margin-left: 5px;
    }

    .accordion {
        --bs-accordion-btn-icon-width: 14px;
    }

    .ConvertRequestSection {
        display: flex;
        justify-content: space-between;
        padding: 1rem 1rem 1rem 1rem;
        color: #666666;
    }

    .ConvertRequestText {
        font-size: 12px;
        display: flex;
        align-items: center;
    }

    .ConvertRequestIcon {
        margin-left: 5px;
    }

    .BtnConvertRequest {
        font-size: 12px;
        color: #0087D2;

    }

    .PurchaseMethodItemBalanceText {
        font-size: 12px;
    }

    .PurchaseMethodItemBalance {
        font-size: 12px;
    }

    .BtnUseCredit {
        font-size: 12px;
    }

}

@media (max-width: 575.98px) {
    .app-topbar .dropdown .dropdown-menu {
        width: 100%;
        right: -10px !important;
        left: 0px !important;
    }
}

@media (max-width: 575.98px) {
    .app-topbar .dropdown .dropdown-menu {
        width: 95%;
        right: -10px !important;
        left: 0px !important;
    }
}

@media (max-width: 575.98px) {
    .mobileLogOut .app-topbar .dropdown .dropdown-menu {
        width: 100%;
        right: -10px !important;
        left: 0px !important;
    }

    .page-content {
        padding: 0.75rem 12px 0.75rem;
    }
}

@media (max-width: 575.98px) {
    .mobileLogOut .app-topbar .dropdown .dropdown-menu {
        width: 100%;
        right: -10px !important;
        left: 0px !important;
    }
}

@media (max-width: 575px) {

    .ToolItemBox {
        height: auto;
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 24px 44px 0 rgba(0, 20, 20, 0.04);
        position: relative;
        text-align: right;
        padding: 1rem 20px 2rem;
        margin: auto auto 1rem;
    }

    .AllToolsSectionTitle {
        height: 10rem;
    }

    .ToolsTitle {

        font-size: 17px;

    }

    .ToolText {
        font-size: 15px;
        font-weight: 400;
    }

    .ToolsItemsSection {
        margin-top: 1rem;
    }

    .AppDownloadLinkSection {
        margin-top: 3rem;
    }

    .BtnDownloadFromBazarIcon {
        margin-top: 1rem;
    }

    .BazarDownloadBtn {
        margin-top: 2rem;
    }

    .AppDownloadTitle {
        font-size: 1.5rem;
    }
}

@media (max-width: 478px) {
    .AboutUsSection {
        padding: 0;
    }

}

@media (max-width: 454px) {

    #BtnPurchaseConvert, .BtnSelectFile {
        width: 200px;
        margin: auto;
        font-size: 15px;
    }

    .HomePageUploader .UploaderInput {
        width: 100%;
        position: absolute;
        top: 15rem;
    }

    .SelectFileSection {
        gap: 10px;
        margin-top: 2rem;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .SelectFileAreaDescription {
        font-size: 15px;
    }

    .SelectFileAreaTitle {
        font-size: 24px;
    }

    .SelectFileAreaMobileTest {
        font-size: 15px;
    }

    .HomePagePriceText {
        font-size: 11px;
    }

}

@media (max-width: 450px) {
    .BtnAppDownload {
        margin-top: 1rem;
    }

    #WheelOfFortune .ModalBox {
        width: 75%;
    }
}

@media (max-width: 416px) {
    .div-SiteInfoSection {
        padding: 5rem 1rem 2rem;
    }
}

@media (max-width: 390px) {

    .PopularSectionItemText {
        font-size: 12px;
    }

    .freeConvert .btn-group {
        width: 110px;
    }

    .BtnTryAgain {
        padding: 6px;
    }
}

@media (max-width: 342px) {

    .PopularSectionItemText {
        font-size: 10px;
    }


}

@media (max-width: 310px) {
    .BtnAppDownload {
        font-size: 10px;
    }


}