/* ── Cairo: Arabic + Latin ─────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap'); /* Apply Cairo font to body and all its children, but NOT (Unison uses head's font-family for breakpoints) */ body, body * { font-family: 'Cairo', sans-serif !important; } /* ── Hader Brand Variables ──────────────────────────────────────────────── */ :root { --hader-orange : #FF6B00; --hader-yellow : #FFC300; --hader-gradient: linear-gradient(135deg, #FFC300 0%, #FF6B00 100%); /* Override Vuexy primary */ --bs-primary : #FF6B00; --bs-primary-rgb : 255, 107, 0; --bs-link-color : #FF6B00; } /* ── Primary buttons & links ────────────────────────────────────────────── */ .btn-primary, .btn-primary:focus { background: var(--hader-gradient) !important; border-color: var(--hader-orange) !important; color: #fff !important; box-shadow: 0 4px 18px rgba(255,107,0,.30) !important; } .btn-primary:hover { background: linear-gradient(135deg, #e5ae00 0%, #e55a00 100%) !important; box-shadow: 0 6px 22px rgba(255,107,0,.40) !important; } .btn-outline-primary { color: var(--hader-orange) !important; border-color: var(--hader-orange) !important; } .btn-outline-primary:hover { background: var(--hader-gradient) !important; color: #fff !important; } /* ── Sidebar brand colors ───────────────────────────────────────────────── */ /* Active nav item */ .main-menu.menu-light .navigation > li.active > a, .main-menu.menu-light .navigation > li.active > a:hover { background: var(--hader-gradient) !important; box-shadow: 0 0 10px 1px rgba(255,107,0,.35) !important; border-radius: 6px; color: #fff !important; } .main-menu.menu-light .navigation > li.active .menu-title, .main-menu.menu-light .navigation > li.active > a svg, .main-menu.menu-light .navigation > li.active > a i { color: #fff !important; } /* Hover on nav items */ .main-menu.menu-light .navigation > li > a:hover .menu-title, .main-menu.menu-light .navigation > li > a:hover i, .main-menu.menu-light .navigation > li > a:hover svg { color: var(--hader-orange) !important; } /* Sub-menu active dot */ .main-menu.menu-light .navigation li.active > a .menu-item::before { background-color: var(--hader-orange) !important; } /* Collapse toggle icon — keep sidebar toggle button styled */ .text-primary { color: var(--hader-orange) !important; } /* Only color content-area links, not navbar/sidebar nav-links */ .app-content a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge) { color: var(--hader-orange); } .app-content a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge):hover { color: var(--hader-yellow); } /* ── Sidebar logo ───────────────────────────────────────────────────────── */ .navbar-header .brand-logo img { height: 42px; width: auto; max-width: 160px; object-fit: contain; object-position: left center; } /* ── Sidebar menu icons: match size consistently ────────────────────────── */ /* Target ONLY menu nav items inside the sidebar content, not the toggle button */ .main-menu-content .nav-item > a > svg, .main-menu-content .nav-item > a > .menu-icon { width: 22px !important; height: 22px !important; min-width: 22px; flex-shrink: 0; } /* ── Form focus ring ────────────────────────────────────────────────────── */ .form-control:focus, .form-select:focus { border-color: var(--hader-orange) !important; box-shadow: 0 0 0 .2rem rgba(255,107,0,.20) !important; } /* ── Badges ─────────────────────────────────────────────────────────────── */ .badge-light-primary, .badge.bg-primary { background: rgba(255,107,0,.12) !important; color: var(--hader-orange) !important; } .bg-primary { background: var(--hader-gradient) !important; } .view-record, .edit-record, .delete-record { margin: 0 5px; } .avatar-upload { position: relative; max-width: 192px; margin: auto; } .avatar-upload .avatar-edit { position: absolute; right: calc(50% - 19px); z-index: 1; bottom: -15px; } .avatar-upload .avatar-edit input { opacity: 0; position: absolute; width: 100%; height: 100%; } .avatar-upload .avatar-edit label { display: inline-block; width: 34px; height: 34px; margin-bottom: 0; border-radius: 100%; background: #FFFFFF; border: 1px solid transparent; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); cursor: pointer; font-weight: normal; transition: all 0.2s ease-in-out; position: relative; } .avatar-upload .avatar-edit label:hover { background: #f1f1f1; border-color: #d6d6d6; } .avatar-upload .avatar-edit label svg{ width: 20px; height: 20px; position: absolute; top: calc(50% - 10px); left: calc(50% - 10px); } .avatar-upload .avatar-preview { width: 192px; height: 192px; position: relative; border-radius: 100%; border: 6px solid #F8F8F8; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1); } .avatar-upload .avatar-preview > div { width: 100%; height: 100%; border-radius: 100%; background-image: url('../../assets/images/default_image.png'); background-size: auto; background-repeat: no-repeat; background-position: center; background-color: #fff; } .avatar-upload .avatar-preview .drop-zoon__preview-image { border-radius: 50%; z-index: 0; } .upload-area__drop-zoon { position: relative; min-height: 50px; display: flex; justify-content: center; align-items: center; flex-direction: column; border: 2px dashed #000; border-radius: 15px; cursor: pointer; transition: border-color 300ms ease-in-out; background-color: #fff; padding: 20px; } .drop-zoon__paragraph { font-size: 14px; color: #444; margin: 10px 0; transition: opacity 300ms ease-in-out; } .drop-zoon:hover .drop-zoon__icon, .drop-zoon:hover .drop-zoon__paragraph { opacity: 0.7; } .drop-zoon__icon svg { fill: none; width: 60px; height: 60px; } .drop-zoon__icon svg path { stroke: #000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.3; } .drop-zoon__loading-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; color: #000; z-index: 10; } .drop-zoon__preview-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; padding: 0.3125rem; border-radius: 10px; display: none; z-index: 1000; transition: opacity 300ms ease-in-out; background-color: #fff; } .drop-zoon:hover .drop-zoon__preview-image { opacity: 0.8; } .drop-zoon__file-input { opacity: 0; position: absolute; width: 100%; height: 100%; z-index: 1001; } .upload-area .error { display: flex; justify-content: center; margin: 5px auto; } .drop-zoon--over { border-color: rgb(63, 134, 255); } .drop-zoon--over .drop-zoon__icon, .drop-zoon--over .drop-zoon__paragraph { opacity: 0.7; } .drop-zoon--Uploaded .drop-zoon__icon, .drop-zoon--Uploaded .drop-zoon__paragraph { display: none; } .upload-area__file-details { height: 0; visibility: hidden; opacity: 0; text-align: left; transition: none 500ms ease-in-out; transition-property: opacity, visibility; transition-delay: 500ms; } .file-details--open { height: auto; visibility: visible; opacity: 1; } .uploaded-file { display: flex; align-items: center; padding: 0.625rem 0; visibility: hidden; opacity: 0; transition: none 500ms ease-in-out; transition-property: visibility, opacity; } .uploaded-file--open { visibility: visible; opacity: 1; } .uploaded-file__icon-container { position: relative; margin-right: 0.3125rem; } .uploaded-file__icon { font-size: 3.4375rem; color: rgb(63, 134, 255); } .uploaded-file__info { position: relative; top: -0.3125rem; width: 100%; display: flex; justify-content: space-between; } .uploaded-file__name { width: 100%; max-width: 180px; display: inline-block; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; direction: ltr; } .modal .modal-content{ padding: 10px; } .disabled .form-control, .disabled .select2{ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; } .card .card-header { background-color: #ff7f00; border-radius: 0.25rem; padding: 20px; margin-bottom: 20px; color: rgb(20, 20, 20); } .dashboard .col-lg-2 img { width: 65% !important; } .card .card-header{ background-color: transparent; color: rgb(15, 14, 14); } .card .card-header .card-title{ color: #444; } #chart { max-width: 100%; opacity: 0.9; padding-bottom: 25px; } #chart1 { max-width: 100%; height: 398px; margin: 35px auto; opacity: 0.9; } #chart3 { max-width: 100ù; margin: 35px auto; } #chart3, .chart-box { padding-bottom: 25px; padding-top: 20px; padding-left: 10px; background: #fff; border: 1px solid #ddd; box-shadow: 0 22px 35px -16px rgb(0 0 0 / 10%); } .seller_rating span { color: #fabf35; font-size: 21px; font-weight: 500; } .seller_rating svg { width: 25px; height: 23px; } #div-bill{ padding: 10px; } .title-pdf{ text-align: center; } .title-pdf h2{ padding-top: 40px; } .container-fluid{ background-color: white !important; } .avatar-square label { font-size: 16px; margin-bottom: 12px; color: #ff7f00; } /**************************[Begin Custom AZ-Fulfilment]*********************************************/ .main-menu.menu-light .navigation > li ul { background-color: #f3f3f3 !important; margin: 0px 15px 0px 15px !important; } /**************************[End Custom AZ-Fulfilment]*********************************************/ .codexMultiPreviewImage { position: relative; margin: 25px auto; } .codexMultiPreviewImage div { position: relative; } .codexMultiPreviewImage img { width: 100%; box-shadow: 0 0 10px #ccc; height: 100%; max-height: 140px; object-fit: contain; object-position: center; border-radius: 12px; } .removePic { position: absolute; right: -8px; top: -8px; font-size: 14px; font-weight: 600; background-color: #fff; width: 32px; height: 32px; text-align: center; box-shadow: 0px 1px 20px #ccc; border-radius: 50%; line-height: 32px; cursor: pointer; transition: linear .3s all; font-family: 'Font Awesome 5 Free'; } .removePic:hover { transform: scale(1.15); } .codexMultiPreviewImage p { font-size: 15px; color: var(--lighter-text); width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 8px; } .custom-option { padding-left: 0; border: 1px solid #dbdade; border-radius: .375rem } .custom-option:hover { border: 1px solid #c9c8ce } .custom-option.custom-option-image { border-width: 1px !important } .custom-option.custom-option-image .custom-option-body img { border-radius: .375rem } .custom-option .custom-option-content { cursor: pointer; width: 100% } .custom-option-basic .custom-option-content { padding: 2px 8px; } .custom-option-basic .custom-option-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: .25rem } .custom-option-icon.checked i,.custom-option-icon.checked svg { color: #ff7f00 } .custom-option-icon .custom-option-content { text-align: center; padding: 1.07em } .custom-option-icon .custom-option-body { display: block; margin-bottom: .5rem } .custom-option-icon .custom-option-body i { font-size: 1.75rem; margin-bottom: .5rem; display: block } .custom-option-icon .custom-option-body svg { height: 38px; width: 38px; margin-bottom: .25rem } .custom-option-icon .custom-option-body .custom-option-title { display: block; font-size: .9375rem; font-weight: 500; color: #5d596c } .custom-option-icon .form-check-input { float: none !important; margin: 0 !important } .custom-option-image { border-width: 1px } .custom-option-image .custom-option-content { padding: 0 } .custom-option-image .custom-option-body img { height: 100%; width: 100% } .custom-option-image.custom-option-image-radio .form-check-input { display: none } .custom-option-image.custom-option-image-check { position: relative } .custom-option-image.custom-option-image-check .form-check-input { position: absolute; top: 16px; right: 16px; margin: 0; border: 0; opacity: 0 } .custom-option-image.custom-option-image-check .form-check-input:checked { opacity: 1 } .custom-option-image.custom-option-image-check:hover .form-check-input { border: inherit; border-width: 2px; opacity: 1 } .custom-option-image.custom-option-image-check:not(.checked):hover .form-check-input { background-color: rgba(0,0,0,0) } .custom-option.checked { border: 1px solid #ff7f00; } [dir=rtl] .custom-option { padding-right: 0 } [dir=rtl] .custom-option-basic .custom-option-content { padding-right: 2.77em; padding-left: 1.07em } [dir=rtl] .custom-option-image.custom-option-image-check .form-check-input { right: auto; left: 10px } .custom-option-basic.custom-option { border-radius: 30px; } /*.custom-option-basic.custom-option:first-child {*/ /* border-top-left-radius: 8px;*/ /* border-bottom-left-radius: 8px;*/ /*}*/ /*.custom-option-basic.custom-option:last-child {*/ /* border-top-right-radius: 8px;*/ /* border-bottom-right-radius: 8px;*/ /*}*/ .custom-option-basic.checked { background-color: #ff7f00; color: #fff; } .list-group .list-group-item img { border-radius: 14px; } /********* quantity box *********/ .quantity { display: block; margin-bottom: 5px; } .quantity .input-text.qty{ width: 30px; height: 35px; padding: 0 5px; text-align: center; background-color: transparent; border: 1px solid #ccc; font-size: 14px; color: var(--third-color); -moz-appearance: textfield; } .quantity.buttons_added { text-align: left; position: relative; white-space: nowrap; vertical-align: top; } .quantity.buttons_added input { display: inline-block; margin: 0; vertical-align: top; box-shadow: none; } .quantity.buttons_added .minus,.quantity.buttons_added .plus { padding: 5px 7px 5px; height: 35px; background-color: #ffffff; border: 1px solid #ccc; cursor:pointer; color: var(--third-color); transition: .3s; } .quantity.buttons_added .minus { border-right: 0; border-top-left-radius: 12px; border-bottom-left-radius: 12px; } .quantity.buttons_added .plus { border-left: 0; border-top-right-radius: 12px; border-bottom-right-radius: 12px; } .quantity.buttons_added .minus:hover,.quantity.buttons_added .plus:hover { background: #ff7f00; color: #fff; border-color: #ff7f00; } .quantity input[type=number]::-webkit-outer-spin-button, .quantity input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; -moz-appearance: none; margin: 0; } input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .quantity.buttons_added .minus:focus, .quantity.buttons_added .plus:focus { outline: none; } /************* quantity box ***************/ .product_price, .product_price *{ color: var(--bs-primary); } .product_name{ transition: linear .3s all; } .product_name:hover { transform: scale(1.1); } .product_price.input-group:not(.bootstrap-touchspin):focus-within, .product_price input:focus { box-shadow: none; } .img_payment { width: 50%; height: 50%; } .active_card { color: #1145f1 !important; background-color: rgba(20, 56, 197, 0.12) !important; border-color: #4645fa !important; cursor: pointer !important; } .col-12.col-lg-4.card_payment { flex: 0 0 auto; width: calc(50% - 10px); margin: 0 5px; color: #979797; cursor: not-allowed; background-color: rgba(0, 0, 0, 0.12); border-color: #ebebeb; padding-top: 15px; } @media (max-width: 991.98px) { .col-12.col-lg-4.card_payment { width: 100%; margin: 0; margin-bottom: 5px; } } .toggle-vis { padding: 5px 8px; margin: 2px; } .dataTables_scrollHead { overflow: visible !important; } .dataTables_scrollBody { overflow: visible !important; } .dataTables_scroll { overflow: auto; } .table-responsive { /* overflow-x: unset;*/ } body { font-weight: bold !important; color: #000 !important; }