@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,500;1,600&family=Cairo:wght@400;500;600;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');



:root {
    --whiteColor: #FFFFFF;
    --backGroundSideBar: #040815;
    --colorHoverSideBar: #E4E4E6;
    --colorLinkSidebarhHover: rgba(4, 8, 21, 1);
    --colorLinkHeader: rgba(0, 0, 0, 0.7);
    --colorBackgroundHeader: rgb(225, 220,232);
    --colorNumberCardDashboard: rgba(4, 8, 22, 1);
    --colorNumberParaghraphDashboard: rgba(4, 8, 22, 0.7);
    --backgroundCardsDashboard: rgba(255, 255, 255, 0.6);
    --borderBottomCardDashboard: rgba(0, 0, 0, 0.3);
    --colorHeadTableNewOrder: rgba(0, 0, 0, 1);
    --colorBackgroundNewOrderPaid: rgba(7, 89, 65, 0.15);
    --colorBackgroundNewOrderPending: rgba(229, 197, 17, 0.15);
    --colorStatusPaid: rgba(7, 89, 65, 1);
    --colorStatusPending: rgba(229, 197, 17, 1);
    --colorStatusAwating: rgba(0, 0, 0, 0.15);
    --ColorBackgroundBody: rgba(241, 241, 241, 1);
    --colorShowAllLink: rgba(84, 33, 152, 1); /****/
    --colorHoverLinkShowAll: rgb(172, 119, 241);
    --colorBackgroundRowOdd: rgba(255, 255, 255, 1);
    --colorBackgroundRowEven: rgba(248, 249, 250, 1);
    --colorBackgroundTableHead: rgba(248, 249, 250, 1);
    --colorBackgroundScroll: rgba(84, 33, 152, 1);
    --colorBackgroundAccordinationListDashBoard: rgba(228, 228, 230, 1);
    --colorBackgroundChangePass: rgba(84, 33, 152, 0.15);
    --colorBackgroundDeleteAccount: rgba(221, 0, 0, 0.15);
    --colorDeleteAccount: #FF0000;
    --colorBackgroundMyAccountSection: rgba(251, 251, 251, 1);
    --colorBackgroundInput: rgba(243, 243, 243, 1);
    --colorlable: rgba(69, 69, 69, 1);
    --colorBackgroundFilterTable: rgba(255, 255, 255, 0.7);
    --colorConfirmBtn: rgba(7, 165, 55, 1);
    --colorCancelBtn: rgba(255, 0, 0, 1);
    --colorCompletedBtn: rgba(0, 12, 33, 1);
    --colorApprovePaymentBtn: rgba(229, 197, 17, 1);
    --colorHeaderOnOrder: rgba(4, 8, 22, 0.5);
    --colorButtonSave: linear-gradient(to right, rgba(4, 8, 21, 1), rgba(26, 21, 50, 1), rgba(96, 61, 141, 1));
    --colorPlaceHolderSelected: rgba(0, 0, 0, 0.4);
    --colorCloseBtn: rgba(214, 0, 0, 1);
    --colorBackgroundDelete-btn: rgba(221, 0, 0, 1);
    --colorBackgroundDecrease: rgba(255, 217, 217, 1);
    --borderColor: rgba(0, 0, 0, 0.2);
    --colorBackgroundCards: rgba(241, 241, 241, 0.3);
    --colorBackgroungCheakedSeitch: rgba(30, 119, 0, 1);
    --colortrackPages: rgba(171, 183, 194, 1);
    --colorMyfavorite: rgba(0, 0, 0, 0.5);
    --fontWeight400: 400;
    --fontWeight500: 500;
    --fontWeight600: 600;
    --fontWeight700: 700;
    --fontSizeNewOrder: 12px;
    --bs-body-font-family: "Poppins", "Times New Roman";
}
html {
    --bs-body-font-family: "Poppins", "Times New Roman";
}

html[dir=rtl] {
  --bs-body-font-family: "Cairo", "Times New Roman";
    }
body {
    background-color: #f1f1f1;
}

textarea {
  direction: ltr;         
  padding-inline-start: 15px;    
  padding-top: 10px;      
  padding-bottom: 10px;   
}
input{
  direction: ltr;         
  padding: 10px 16px;
}
.dashed-custom {
  height: 2px; 
  margin-bottom: 24px;
  background: repeating-linear-gradient(
    to right,
    rgba(190, 190, 193, 0.5) 0 12px,
    transparent 8px 20px
  );
  transform: scaleY(0.5);
  transform-origin: top; 
}
.btn-save, .btn-cancel,
.yes-btn,
.no-btn {
    border-radius: 100px;
    padding: 8px 24px;
    border: none;
    color: var(--whiteColor);
}

.btn-save,
.yes-btn {
    background-color: var(--colorShowAllLink) !important;
}

.btn-cancel,
.no-btn {
    background-color: var(--colorBackgroundDelete-btn) !important;
}

/* ===============================
   Website-style dashed separator
   =============================== */
.dashed-8 {
    height: 2px;
    background: repeating-linear-gradient( to right, rgba(0, 0, 0, 0.30) 0 8px, transparent 8px 16px );
    transform: scaleY(0.5);
    transform-origin: top;
}

/* ===============================
   Website-style "Select country" modal
   =============================== */
.modal-select-country .select-country-card {
    border-radius: 16px;
    padding: 18px 18px 20px;
    border: none;
}

.select-country-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.select-country-title {
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(4, 8, 22, 1);
    margin: 0;
}

.select-country-close {
    background: transparent;
    border: 0;
    padding: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.select-country-close img {
    width: 22px;
    height: 22px;
}

.select-country-body {
    padding-top: 14px;
}

.select-country-label {
    display: block;
    color: var(--colorlable);
}

.select-country-label-text {
    display: block;
    font-size: 14px;
    margin-inline-start: 14px;
    margin-bottom: 6px;
}

.select-country-select-wrap {
    position: relative;
    display: block;
}

.select-country-select {
    width: 100%;
    border: none;
    border-radius: 999px;
    background: var(--colorBackgroundInput);
    padding: 14px 54px 14px 22px;
    outline: none;
    appearance: none;
}

.select-country-select:focus {
    box-shadow: 0 0 0 1px rgba(84, 33, 152, 0.6);
}

.select-country-caret {
    pointer-events: none;
    position: absolute;
    inset-inline-end: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: rgba(0, 0, 0, 0.7);
}

.select-country-footer {
    padding-top: 16px;
}

.btn-save-wide {
    width: 100%;
    padding: 14px 32px;
    border-radius: 999px;
    border: none;
    color: #fff;
    font-weight: 600;
    background: var(--colorButtonSave);
}



/* Website-like dropdown */
@media (min-width: 1024px) {
    .submenu {
        background: #fbfbfb;
        border-radius: 8px;
        padding: 16px;
        box-shadow: 0px 14px 44px 0px rgba(0,0,0,0.149);
        position: absolute;
        top: calc(100% + 13px);
        width: max-content;
    }
}

.submenu-link {
    font-size: 16px;
}

@media (min-width: 1024px) {
    .submenu-link {
        font-size: 12px;
    }
}