/*html {
    background: url(../Images/bg.jpeg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
*/
/*the Arabic font-face form company*/
@font-face {
    font-family: 'Cairo-Bold';
    src: url('../fonts/CairoArabic/Cairo-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Cairo-Regular';
    src: url('../fonts/CairoArabic/Cairo-Regular.ttf') format('truetype');
}
/*---------------------------------------------------------------------------------------*/
/*the English font-face form company*/
@font-face {
    font-family: 'Poppins-SemiBold';
    src: url('../fonts/PoppinsEnglish/Poppins-SemiBold.ttf') format('truetype');
}

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

@font-face {
    font-family: 'Poppins-Black';
    src: url('../fonts/PoppinsEnglish/Poppins-Black.ttf') format('truetype');
}
/*---------------------------------------------------------------------------------------*/
:root {
    scroll-behavior: smooth;
    --counter-color: #165081;
    --primary-color1: #F26F64;
    --primary-color1-light: #ee9a93;
    --primary-color1-hover: #f24c3e;
    --primary-color1-text: #F26F64;
    --primary-color1-menu-hover: #FFFFFF;
    --primary-color1-border: #ef3d2e;
    --primary-color2: #F8F5E3;
    --primary-color2-light: #fafafa;
    --primary-color2-hover: #f7efbd;
    --primary-color2-text: #F8F5E3;
    --primary-color2-menu-hover: #FFFFFF;
    --primary-color2-border: #f1e5a2;
    --secondary-color1: #5CC2E7;
    --secondary-color1-text: #5CC2E7;
    --secondary-color1-hover: #2cafde;
    --secondary-color1-border: #2cafde;
    --secondary-color2: #FFD662;
    --secondary-color2-text: #FFD662;
    --secondary-color2-hover: #f8c227;
    --secondary-color2-border: #f8c227;
    --secondary-color3: #84C774;
    --secondary-color3-light: rgba(132, 199, 116, 0.2);
    --secondary-color3-text: #84C774;
    --secondary-color3-hover: #76bb65;
    --secondary-color3-border: #76bb65;
    --dataTabel-color-text: #444444;
    --dataTabel-color-background: #F6F9FF;
    --accent-color: #AFCD58;
    --third-color: #444444;
    --background-color: #F6F9FF;
    --disabled-color: #A1B7B9;
    --orange-color: #F47522;
    --green-color: #14C20D;
    --blue-color: #337ab7;
    --white-color: #FFFFFF;
    --black-color: #000000;
    --default-button-font-size: 14px;
}

.siteBackGround {
    background-image: url(/Images/gradient_bg2.webp);
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
}

body {
    background-color: #989292;
}

.ar-font {
    font-family: 'Cairo-Regular';
}

.eng-font {
    font-family: 'Poppins-Regular';
}

.item-fast {
    color: #555555;
    background-color: #fff;
}

    .item-fast:hover {
        color: #fff;
        background-color: #f47522;
        border-color: #f47522;
        text-decoration: none;
        border-radius: 1.5rem;
    }

    .item-fast:focus, .item-fast.focus {
        box-shadow: 0 0 0 3px rgba(23, 162, 184, 0.5);
    }


/* Text Size 
--------------------------------*/
.text-fast-8 {
    font-size: 8px;
}

.text-fast-8B {
    font-size: 8px;
    font-weight: bold;
}

.text-fast-9 {
    font-size: 9px;
}

.text-fast-9B {
    font-size: 9px;
    font-weight: bold;
}

.text-fast-9 {
    font-size: 9px;
}

.text-fast-9B {
    font-size: 9px;
    font-weight: bold;
}

.text-fast-10 {
    font-size: 10px;
}

.text-fast-10B {
    font-size: 10px;
    font-weight: bold;
}

.text-fast-11 {
    font-size: 11px;
}

.text-fast-11B {
    font-size: 11px;
    font-weight: bold;
}

.text-fast-12 {
    font-size: 12px;
}

.text-fast-12B {
    font-size: 12px;
    font-weight: bold;
}

.text-fast-13 {
    font-size: 13px;
}

.text-fast-13B {
    font-size: 13px;
    font-weight: bold;
}

.text-fast-14 {
    font-size: 14px;
}

.text-fast-14B {
    font-size: 14px;
    font-weight: bold;
}

.text-fast-15 {
    font-size: 15px;
}

.text-fast-15B {
    font-size: 15px;
    font-weight: bold;
}

.text-fast-16 {
    font-size: 16px;
}

.text-fast-16B {
    font-size: 16px;
    font-weight: bold;
}

.text-fast-17 {
    font-size: 17px;
}

.text-fast-17B {
    font-size: 17px;
    font-weight: bold;
}

.text-fast-18 {
    font-size: 18px;
}

.text-fast-18B {
    font-size: 18px;
    font-weight: bold;
}

.text-fast-19 {
    font-size: 19px;
}

.text-fast-19B {
    font-size: 19px;
    font-weight: bold;
}

.text-fast-20 {
    font-size: 20px;
}

.text-fast-20B {
    font-size: 20px;
    font-weight: bold;
}

.text-fast-21 {
    font-size: 21px;
}

.text-fast-21B {
    font-size: 21px;
    font-weight: bold;
}

.text-fast-22 {
    font-size: 22px;
}

.text-fast-22B {
    font-size: 22px;
    font-weight: bold;
}

.text-fast-23 {
    font-size: 23px;
}

.text-fast-23B {
    font-size: 23px;
    font-weight: bold;
}

.text-fast-24 {
    font-size: 24px;
}

.text-fast-24B {
    font-size: 24px;
    font-weight: bold;
}
/* --------------------- End Text Size ------------------------------- */

/* Text Color 
--------------------------------*/
.text-fast-Blue {
    color: #337ab7 !important;
}

.text-fast-Red {
    color: #d9534f !important;
}

.text-fast-Orange {
    color: #f47522 !important;
}

.text-fast-Grey {
    color: #a1b7b9 !important;
}

.text-fast-GreyLight {
    color: #e2e3e4 !important;
}

.text-fast-White {
    color: #fff !important;
}

.text-fast-Green {
    color: #079a01 !important;
}

.text-fast-green2 {
    color: #6bbea3 !important;
}

.text-fast-purple {
    color: #747ed1 !important;
}

.text-fast-violet {
    color: #a07cc5 !important;
}

.text-fast-pink {
    color: #d16b86 !important;
}

.text-fast-yellow {
    color: #fab758 !important;
}

.text-fast-leaf {
    color: #7cb798 !important;
}

.text-fast-aqua {
    color: #54a8c7 !important;
}

.text-fast-navy {
    color: #343f52 !important;
}

.text-fast-ash {
    color: #9499a3 !important;
}

.text-fast-light {
    color: #fefefe !important;
}

.text-fast-gray {
    color: #f6f7f9 !important;
}

.text-fast-primary {
    color: #3f78e0 !important;
}

.text-fast-secondary {
    color: #aab0bc !important;
}

.text-fast-success {
    color: #6bbea3 !important;
}

.text-fast-info {
    color: #54a8c7 !important;
}

.text-fast-warning {
    color: #fab758 !important;
}

.text-fast-danger {
    color: #e2626b !important;
}

.text-fast-body {
    color: #60697b !important;
}

.text-fast-muted {
    color: #aab0bc !important;
}

.text-fast-inverse {
    color: #cacaca !important;
}

.text-fast-dark {
    color: #343f52 !important;
}

.text-fast-black-50 {
    color: rgba(0, 0, 0, 0.5) !important;
}

.text-fast-white-50 {
    color: rgba(255, 255, 255, 0.5) !important;
}

.text-fast-reset {
    color: inherit !important;
}

/* --------------------- End Text Color ------------------------------- */

/* BackGround Color 
--------------------------------*/
.bg-fast-Blue {
    background-color: #337ab7 !important;
}

.bg-fast-Red {
    background-color: #d9534f !important;
}

.bg-fast-Orange {
    background-color: #f47522 !important;
}

.bg-fast-Grey {
    background-color: #b7b7b7 !important;
}

.bg-fast-GreyLight {
    background-color: #e2e3e4 !important;
}

.bg-fast-White {
    background-color: #fff !important;
}

.bg-fast-Green {
    background-color: #14c20d !important;
}
/* --------------------- End BackGround Color ------------------------------- */

/* Border Color 
--------------------------------*/
.border-fast-Blue {
    border-color: #337ab7 !important;
    border-width: 1px;
}

.border-fast-Red {
    border-color: #d9534f !important;
    border-width: 1px;
}

.border-fast-Orange {
    border-color: #f47522 !important;
    border-width: 1px;
}

.border-fast-Grey {
    border-color: #a1b7b9 !important;
    border-width: 1px;
}

.border-fast-GreyLight {
    border-color: #e2e3e4 !important;
    border-width: 1px;
}

.border-fast-White {
    border-color: #fff !important;
    border-width: 1px;
}

.border-fast-Green {
    border-color: #14c20d !important;
    border-width: 1px;
}

.border-fast {
    border-radius: 20px;
    border-width: 1px;
}

.border-fast-image {
    border-radius: 0.75rem;
    border-width: 1px;
    border-color: #f47522;
}
/* ------------------------- End Border Color ------------------------------- */

/* -------------------------  Margin   ------------------------------- */
.m-0 {
    margin: 0 !important;
}

.m-1 {
    margin: 0.25rem !important;
}

.m-2 {
    margin: 0.5rem !important;
}

.m-3 {
    margin: 0.75rem !important;
}

.m-4 {
    margin: 1rem !important;
}

.m-5 {
    margin: 1.25rem !important;
}

.m-6 {
    margin: 1.5rem !important;
}

.m-7 {
    margin: 1.75rem !important;
}

.m-8 {
    margin: 2rem !important;
}

.m-9 {
    margin: 2.25rem !important;
}

.m-10 {
    margin: 2.5rem !important;
}

.m-11 {
    margin: 3rem !important;
}

.m-12 {
    margin: 3.5rem !important;
}

.m-13 {
    margin: 4rem !important;
}

.m-14 {
    margin: 4.5rem !important;
}

.m-15 {
    margin: 5rem !important;
}

.m-auto {
    margin: auto !important;
}

.mx-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.mx-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
}

.mx-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
}

.mx-3 {
    margin-right: 0.75rem !important;
    margin-left: 0.75rem !important;
}

.mx-4 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
}

.mx-5 {
    margin-right: 1.25rem !important;
    margin-left: 1.25rem !important;
}

.mx-6 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
}

.mx-7 {
    margin-right: 1.75rem !important;
    margin-left: 1.75rem !important;
}

.mx-8 {
    margin-right: 2rem !important;
    margin-left: 2rem !important;
}

.mx-9 {
    margin-right: 2.25rem !important;
    margin-left: 2.25rem !important;
}

.mx-10 {
    margin-right: 2.5rem !important;
    margin-left: 2.5rem !important;
}

.mx-11 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
}

.mx-12 {
    margin-right: 3.5rem !important;
    margin-left: 3.5rem !important;
}

.mx-auto {
    margin-right: auto !important;
    margin-left: auto !important;
}

.my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.my-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
}

.my-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.my-3 {
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
}

.my-4 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.my-5 {
    margin-top: 1.25rem !important;
    margin-bottom: 1.25rem !important;
}

.my-6 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.my-7 {
    margin-top: 1.75rem !important;
    margin-bottom: 1.75rem !important;
}

.my-8 {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
}

.my-9 {
    margin-top: 2.25rem !important;
    margin-bottom: 2.25rem !important;
}

.my-10 {
    margin-top: 2.5rem !important;
    margin-bottom: 2.5rem !important;
}

.my-11 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
}

.my-12 {
    margin-top: 3.5rem !important;
    margin-bottom: 3.5rem !important;
}

.my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
}

.mt-0 {
    margin-top: 0 !important;
}

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

.mt-2 {
    margin-top: 0.5rem !important;
}

.mt-3 {
    margin-top: 0.75rem !important;
}

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

.mt-5 {
    margin-top: 1.25rem !important;
}

.mt-6 {
    margin-top: 1.5rem !important;
}

.mt-7 {
    margin-top: 1.75rem !important;
}

.mt-8 {
    margin-top: 2rem !important;
}

.mt-9 {
    margin-top: 2.25rem !important;
}

.mt-10 {
    margin-top: 2.5rem !important;
}

.mt-11 {
    margin-top: 3rem !important;
}

.mt-12 {
    margin-top: 3.5rem !important;
}

.mr-0 {
    margin-right: 0 !important;
}

.mr-1 {
    margin-right: 0.25rem !important;
}

.mr-2 {
    margin-right: 0.5rem !important;
}

.mr-3 {
    margin-right: 0.75rem !important;
}

.mr-4 {
    margin-right: 1rem !important;
}

.mr-5 {
    margin-right: 1.25rem !important;
}

.mr-6 {
    margin-right: 1.5rem !important;
}

.mr-7 {
    margin-right: 1.75rem !important;
}

.mr-8 {
    margin-right: 2rem !important;
}

.mr-9 {
    margin-right: 2.25rem !important;
}

.mr-10 {
    margin-right: 2.5rem !important;
}

.mr-11 {
    margin-right: 3rem !important;
}

.mr-12 {
    margin-right: 3.5rem !important;
}

.mr-auto {
    margin-right: auto !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-1 {
    margin-bottom: 0.25rem !important;
}

.mb-2 {
    margin-bottom: 0.5rem !important;
}

.mb-3 {
    margin-bottom: 0.75rem !important;
}

.mb-4 {
    margin-bottom: 1rem !important;
}

.mb-5 {
    margin-bottom: 1.25rem !important;
}

.mb-6 {
    margin-bottom: 1.5rem !important;
}

.mb-7 {
    margin-bottom: 1.75rem !important;
}

.mb-8 {
    margin-bottom: 2rem !important;
}

.mb-9 {
    margin-bottom: 2.25rem !important;
}

.mb-10 {
    margin-bottom: 2.5rem !important;
}

.mb-11 {
    margin-bottom: 3rem !important;
}

.mb-12 {
    margin-bottom: 3.5rem !important;
}

.mb-auto {
    margin-bottom: auto !important;
}

.ml-0 {
    margin-left: 0 !important;
}

.ml-1 {
    margin-left: 0.25rem !important;
}

.ml-2 {
    margin-left: 0.5rem !important;
}

.ml-3 {
    margin-left: 0.75rem !important;
}

.ml-4 {
    margin-left: 1rem !important;
}

.ml-5 {
    margin-left: 1.25rem !important;
}

.ml-6 {
    margin-left: 1.5rem !important;
}

.ml-7 {
    margin-left: 1.75rem !important;
}

.ml-8 {
    margin-left: 2rem !important;
}

.ml-9 {
    margin-left: 2.25rem !important;
}

.ml-10 {
    margin-left: 2.5rem !important;
}

.ml-11 {
    margin-left: 3rem !important;
}

.ml-12 {
    margin-left: 3.5rem !important;
}

.ml-auto {
    margin-left: auto !important;
}
/* --------------------- End Margin ------------------------------- */

/* ---------------------  Padding ------------------------------- */
.p-0 {
    padding: 0 !important;
}

.p-1 {
    padding: 0.25rem !important;
}

.p-2 {
    padding: 0.5rem !important;
}

.p-3 {
    padding: 0.75rem !important;
}

.p-4 {
    padding: 1rem !important;
}

.p-5 {
    padding: 1.25rem !important;
}

.p-6 {
    padding: 1.5rem !important;
}

.p-7 {
    padding: 1.75rem !important;
}

.p-8 {
    padding: 2rem !important;
}

.p-9 {
    padding: 2.25rem !important;
}

.p-10 {
    padding: 2.5rem !important;
}

.p-11 {
    padding: 3rem !important;
}

.p-12 {
    padding: 3.5rem !important;
}

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

.px-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
}

.px-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
}

.px-3 {
    padding-right: 0.75rem !important;
    padding-left: 0.75rem !important;
}

.px-4 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
}

.px-5 {
    padding-right: 1.25rem !important;
    padding-left: 1.25rem !important;
}

.px-6 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
}

.px-7 {
    padding-right: 1.75rem !important;
    padding-left: 1.75rem !important;
}

.px-8 {
    padding-right: 2rem !important;
    padding-left: 2rem !important;
}

.px-9 {
    padding-right: 2.25rem !important;
    padding-left: 2.25rem !important;
}

.px-10 {
    padding-right: 2.5rem !important;
    padding-left: 2.5rem !important;
}

.px-11 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
}

.px-12 {
    padding-right: 3.5rem !important;
    padding-left: 3.5rem !important;
}


.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.py-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.py-3 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

.py-4 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.py-5 {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
}

.py-6 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.py-7 {
    padding-top: 1.75rem !important;
    padding-bottom: 1.75rem !important;
}

.py-8 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

.py-9 {
    padding-top: 2.25rem !important;
    padding-bottom: 2.25rem !important;
}

.py-10 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
}

.py-11 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.py-12 {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
}

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

.pt-1 {
    padding-top: 0.25rem !important;
}

.pt-2 {
    padding-top: 0.5rem !important;
}

.pt-3 {
    padding-top: 0.75rem !important;
}

.pt-4 {
    padding-top: 1rem !important;
}

.pt-5 {
    padding-top: 1.25rem !important;
}

.pt-6 {
    padding-top: 1.5rem !important;
}

.pt-7 {
    padding-top: 1.75rem !important;
}

.pt-8 {
    padding-top: 2rem !important;
}

.pt-9 {
    padding-top: 2.25rem !important;
}

.pt-10 {
    padding-top: 2.5rem !important;
}

.pt-11 {
    padding-top: 3rem !important;
}

.pt-12 {
    padding-top: 3.5rem !important;
}

.pr-0 {
    padding-right: 0 !important;
}

.pr-1 {
    padding-right: 0.25rem !important;
}

.pr-2 {
    padding-right: 0.5rem !important;
}

.pr-3 {
    padding-right: 0.75rem !important;
}

.pr-4 {
    padding-right: 1rem !important;
}

.pr-5 {
    padding-right: 1.25rem !important;
}

.pr-6 {
    padding-right: 1.5rem !important;
}

.pr-7 {
    padding-right: 1.75rem !important;
}

.pr-8 {
    padding-right: 2rem !important;
}

.pr-9 {
    padding-right: 2.25rem !important;
}

.pr-10 {
    padding-right: 2.5rem !important;
}

.pr-11 {
    padding-right: 3rem !important;
}

.pr-12 {
    padding-right: 3.5rem !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.pb-1 {
    padding-bottom: 0.25rem !important;
}

.pb-2 {
    padding-bottom: 0.5rem !important;
}

.pb-3 {
    padding-bottom: 0.75rem !important;
}

.pb-4 {
    padding-bottom: 1rem !important;
}

.pb-5 {
    padding-bottom: 1.25rem !important;
}

.pb-6 {
    padding-bottom: 1.5rem !important;
}

.pb-7 {
    padding-bottom: 1.75rem !important;
}

.pb-8 {
    padding-bottom: 2rem !important;
}

.pb-9 {
    padding-bottom: 2.25rem !important;
}

.pb-10 {
    padding-bottom: 2.5rem !important;
}

.pb-11 {
    padding-bottom: 3rem !important;
}

.pb-12 {
    padding-bottom: 3.5rem !important;
}

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

.pl-1 {
    padding-left: 0.25rem !important;
}

.pl-2 {
    padding-left: 0.5rem !important;
}

.pl-3 {
    padding-left: 0.75rem !important;
}

.pl-4 {
    padding-left: 1rem !important;
}

.pl-5 {
    padding-left: 1.25rem !important;
}

.pl-6 {
    padding-left: 1.5rem !important;
}

.pl-7 {
    padding-left: 1.75rem !important;
}

.pl-8 {
    padding-left: 2rem !important;
}

.pl-9 {
    padding-left: 2.25rem !important;
}

.pl-10 {
    padding-left: 2.5rem !important;
}

.pl-11 {
    padding-left: 3rem !important;
}

.pl-12 {
    padding-left: 3.5rem !important;
}

/* --------------------- End Padding ------------------------------- */

.table {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

    /*.table-responsive {
    display: table;
}
    tbody {
    width: 100%;
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}

*/

    .table th, .table td {
        padding: 0.5rem;
        vertical-align: middle;
        border-top: 0px;
    }
/* Tabel 
--------------------------------*/

/* --------------------- End Tabel ------------------------------- */
/* Set width on the form input elements since they're 100% wide by default */

.nav-link-left {
    padding: 2px 4px 2px 4px;
    color: #3cbded;
    background-color: white;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
}

.dropdown-menu {
    width: auto;
    min-width: 7rem;
    color: white;
}

.navbar-inverse .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > li > a:hover {
    color: #fff;
    background-color: #754eb9;
}

.bg-menu {
    background-color: #adc8db;
}

.confActive {
    color: #ff0000;
}

.remark {
    color: lightslategrey;
    font-size: small;
}

.content-desktop {
    display: block;
}

.content-mobile {
    display: none;
}

#myLogo {
    width: 35%;
}

@media (min-width: 768px) {
    .navbar .navbar-collapse {
        display: block !important;
    }
}

@media screen and (max-width: 768px) {

    .content-desktop {
        display: none;
    }

    .content-mobile {
        display: block;
    }

    #myLogo {
        width: 35%;
    }
}

.box-fast {
    padding: 0.5rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid #e2e3e4;
    border-left-width: .25rem;
    border-right-width: .25rem;
    border-radius: 2.5rem;
    text-align: center;
}

    .box-fast:hover {
        border-left-color: #f47522;
        border-right-color: #f47522;
    }

    .box-fast a {
        color: #444444;
        text-decoration: none;
        margin: 0px;
        font-weight: 600;
    }

    .box-fast:hover a {
        text-align: center;
        box-shadow: 4px 4px #6da0b5;
        background-color: #000;
        color: #f47522;
    }

.box-fastImage {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.box-fastTitle {
    font-size: large;
    font-weight: 800;
    margin-bottom: 5px;
}

.box-fastSubTitle {
    font-size: medium;
    font-weight: 500;
    margin-bottom: 5px;
}

.box-fastMore {
    margin: 30px 10px;
    padding: 5px;
    background-color: #17b2eb;
    color: #fff;
    width: auto;
}

.boxBorder-fast-Blue {
    border-left-color: #337ab7;
    border-right-color: #337ab7;
}

.boxBorder-fast-Green {
    border-left-color: #5cb85c;
    border-right-color: #5cb85c;
}

.boxBorder-fast-Red {
    border-left-color: #d9534f;
    border-right-color: #d9534f;
}

.boxBorder-fast-Orange {
    border-color: #f1ac7f;
}

.boxBorder-fast-Grey {
    border-color: #a1b7b9;
}

.boxBorder-fast-GreyLight {
    border-left-color: #e2e3e4;
    border-right-color: #e2e3e4;
}

.boxBorder-fast-White {
    border-left-color: #f2f2f2;
    border-right-color: #f2f2f2;
}

.use-hand {
    cursor: pointer;
}

/*----------------------------------------------Make the label inside textbox---------------------------------------------------------------*/
.form-label-group {
    position: relative;
}

    .form-label-group > label {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        margin-bottom: 0;
        color: #959ca9;
        border: 1px solid transparent;
        transition: all 0.1s ease-in-out;
        font-size: 0.70rem;
        text-align: left;
        padding: 0.6rem 0.6rem;
        pointer-events: none;
        font-family: 'Almarai' !important;
    }

    .form-label-group .form-control:-ms-input-placeholder {
        color: transparent;
    }

    .form-label-group .form-control::-moz-placeholder {
        color: transparent;
    }

    .form-label-group .form-control::placeholder {
        color: transparent !important;
    }

    .form-label-group .form-control:not(:-moz-placeholder-shown) {
        padding-top: calc(0.6rem + 0.6rem * (2 / 3));
        padding-bottom: calc(0.6rem / 3);
    }

    .form-label-group .form-control:not(:-ms-input-placeholder) {
        padding-top: calc(0.6rem + 0.6rem * (2 / 3));
        padding-bottom: calc(0.6rem / 3);
    }

    .form-label-group .form-control:not(:placeholder-shown) {
        padding-top: calc(0.6rem + 0.6rem * (2 / 3));
        padding-bottom: calc(0.6rem / 3);
    }

    .form-label-group .form-control:not(:-moz-placeholder-shown) ~ label {
        padding-top: calc(0.6rem / 3);
        padding-bottom: calc(0.6rem / 3);
        font-size: 0.6rem;
    }

    .form-label-group .form-control:not(:-ms-input-placeholder) ~ label {
        padding-top: calc(0.6rem / 3);
        padding-bottom: calc(0.6rem / 3);
        font-size: 0.6rem;
    }

    .form-label-group .form-control:not(:placeholder-shown) ~ label {
        padding-top: calc(0.6rem / 3);
        padding-bottom: calc(0.6rem / 3);
        font-size: 0.6rem;
    }

/* ---price filter css start--- */
.ui-widget-content {
    background: #d9d9d9;
    border: medium none;
    border-radius: 0;
    /*height: 4px;*/
    margin: 5px 0;
}

/*    .ui-widget-content .ui-state-default {
        background: #ffffff;
        border: 2px solid #db9664;
        border-radius: 50%;
        -webkit-box-shadow: none;
        box-shadow: none;
        color: #ffffff;
        cursor: pointer;
        font-weight: normal;
        height: 18px;
        width: 18px;
    }
*/

/*.ui-slider-horizontal .ui-slider-handle {
    top: -7px;
}

.ui-widget-content .ui-state-default:hover {
    background: rgb(219,150,100);
    background: linear-gradient(90deg, rgba(219,150,100,1) 0%, rgba(219,150,100,1) 36%, rgba(249,224,183,1) 100%);
}

.ui-widget-content .ui-slider-range:last-child {
    background: rgb(219,150,100);
    background: linear-gradient(90deg, rgba(219,150,100,1) 0%, rgba(219,150,100,1) 36%, rgba(249,224,183,1) 100%);
}
*/

.filter-price-cont {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 10px;
}

    .filter-price-cont .input-type input {
        border: medium none;
        font-size: 14px;
        font-weight: 400;
        width: 70%;
    }

/* ---price filter css end--- */

/* sidebar categories css start */
.filter-attribute-container li {
    margin-bottom: 10px;
}

.filter-attribute-container ul li a {
    color: #444;
    padding-left: 20px;
    position: relative;
}

    .filter-attribute-container ul li a::before {
        content: "\f096";
        font-family: fontawesome;
        left: 0;
        position: absolute;
    }

    .filter-attribute-container ul li a::after {
        content: "\f046";
        font-family: fontawesome;
        left: 0;
        position: absolute;
        opacity: 0;
        visibility: hidden;
    }

    .filter-attribute-container ul li:hover a,
    .filter-attribute-container ul li a.active {
        color: #db9664;
    }

        .filter-attribute-container ul li:hover a::after {
            opacity: 1;
            visibility: visible;
        }

        .filter-attribute-container ul li a.active::after {
            opacity: 1;
            visibility: visible;
        }

.sidebar-thumb:hover {
    opacity: 0.7;
}

/* ----sidebar categories css end---- */
/*-------------------------------------------------------------------------------------------------------------*/
/* cart */

.cart {
    width: 30px;
    height: 30px;
    padding: 0px;
    margin: 0px;
    position: relative;
    border: none;
    cursor: pointer;
}

    .cart:hover {
        -moz-box-shadow: inset 0 0 7px 0 rgba(0, 0, 0, 0.5);
        -webkit-box-shadow: inset 0 0 7px 0 rgba(0, 0, 0, 0.5);
        box-shadow: inset 0 0 7px 0 rgba(0, 0, 0, 0.5);
    }

        .cart:hover .popup {
            visibility: visible;
            opacity: 1;
            pointer-events: auto;
            -webkit-animation-duration: 200ms;
            -webkit-animation-name: show-popup;
            -webkit-animation-direction: normal;
            -webkit-animation-timing-function: cubic-bezier(1, 0.18, 1, 0.93);
            -moz-animation-duration: 200ms;
            -moz-animation-name: show-popup;
            -moz-animation-direction: normal;
            -moz-animation-timing-function: cubic-bezier(1, 0.18, 1, 0.93);
            -o-animation-duration: 200ms;
            -o-animation-name: show-popup;
            -o-animation-direction: normal;
            -o-animation-timing-function: cubic-bezier(1, 0.18, 1, 0.93);
            animation-duration: 200ms;
            animation-name: show-popup;
            animation-direction: normal;
            animation-timing-function: cubic-bezier(1, 0.18, 1, 0.93);
        }


.checkout {
    margin-top: 10px;
    padding-left: 20px;
}

.checkout-button {
    padding: 3px 5px;
    background: #e54040;
    -moz-box-shadow: inset 0 2px 7px 0 rgba(255, 255, 255, 0.3);
    -webkit-box-shadow: inset 0 2px 7px 0 rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 2px 7px 0 rgba(255, 255, 255, 0.3);
    border: 1px solid #e06b6b;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    color: #ffffff;
}

    .checkout-button:hover {
        background: #e54040;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .checkout-button:active {
        background: #e54040;
        -moz-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);
        box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    }
/*-------------------------------------------------------------------------------------------------------------*/

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.navbar-toggler {
    padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 0px solid transparent;
    border-radius: 0.25rem;
}

/* ------------------ Data Table  -------------------------------- */
table.dataTable.table > tbody > tr {
    background-color: var(--white-color);
}

    table.dataTable.table > tbody > tr.selected {
        background-color: var(--secondary-color2) !important;
    }

    table.dataTable.table > tbody > tr:hover {
        background-color: var(--secondary-color2);
    }


table.dataTable.table.table-striped > tbody > tr:nth-of-type(2n+1) {
    background-color: var(--primary-color2);
}

    table.dataTable.table.table-striped > tbody > tr:nth-of-type(2n+1):hover {
        background-color: var(--secondary-color2);
    }

div.dt-container div.dt-length select {
    width: 50px !important;
}

/* -------------------------------------------------- */
/* Sorting icons and positioning overrides */

/* Previously displayed two separate icons, hide first one */
table.dataTable thead .dt-column-order {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900; /* Needed for solid icons */
    font-size: 1.5em !important;
    margin-left: 5px !important;
    line-height: 1 !important;
}
    /* Remove default content */
    table.dataTable thead .dt-column-order:before,
    table.dataTable thead .dt-column-order:after {
        content: "" !important;
    }

/* Default light grey arrow when column is not sorted but hovered */
table.dataTable thead > tr > th.dt-orderable-asc:hover .dt-column-order:after,
table.dataTable thead > tr > th.dt-orderable-desc:hover .dt-column-order:after {
    content: "\f0dc" !important;
    color: var(--primary-color2) !important;
    opacity: 1;
    display: inline-block;
    padding: 4px;
    border-radius: 50%;
    top: 30%;
}

/* Show upward arrow when sorted ascending */
table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:after,
table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:after {
    content: "\f161" !important;
    color: #0b62ad !important;
    opacity: 1;
    display: inline-block;
    border-radius: 50%;
}

/* Show downward arrow when sorted descending */
table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after,
table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {
    content: "\f160" !important;
    color: #0b62ad !important;
    opacity: 1;
    display: inline-block;
    border-radius: 50%;
}

/* Hover effect: show light grey circle around the sorting icon */
table.dataTable thead > tr > th.dt-orderable-asc:hover span.dt-column-order:after,
table.dataTable thead > tr > th.dt-orderable-desc:hover span.dt-column-order:after,
table.dataTable thead > tr > th.dt-ordering-asc:hover span.dt-column-order:after,
table.dataTable thead > tr > th.dt-ordering-desc:hover span.dt-column-order:after {
    color: var(--primary-color2) !important;
    display: inline-block;
    border-radius: 50%;
    line-height: 1 !important;
}
/*-----------------------------------------------------------------------------------------
/* Collapsed row toggle - plus icon */

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f055"; /* fa-plus = Unicode 2b */
    font-size: 1rem;
    color: #337ab7;
    border: 1px solid #626262;
    display: inline-block;
    padding: 2px;
    border-radius: 100%;
    line-height: 1 !important;
    background: var(--white-color);
    margin: 0px 5px 0px 5px;
}

/* Expanded row toggle - minus icon */
table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > th.dtr-control:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f056"; /* fa-minus */
    font-size: 1rem;
    color: var(--primary-color1);
    border: 1px solid #626262;
    display: inline-block;
    border-radius: 100%;
    line-height: 1 !important;
    background: var(--white-color);
    margin: 0px 5px 0px 5px;
}

div.dt-processing > div:last-child > div {
    background: rgb(2, 117, 216) !important;
}
/* --------------------- End Tabel Styles ------------------------------- */