.BackToTop,
.burger-menu.open .line:nth-child(2),
.closer {
    opacity: 0
}

.menu ul li a,
li .LinksNav {
    font-weight: 400;
    color: var(--main-color);
    font-size: 14px;
    text-decoration: none
}

.menu ul,
ul li {
    list-style: none
}

.BackToTop span,
.IconLanguage {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}

.BackToTop span,
.BackgroundHero,
.IconLanguage {
    background-position: center
}

.ContentHero,
.LinkScrub,
.menu ul li a,
li .LinksNav {
    color: var(--main-color)
}

.BackToTop,
.Item,
.burger-menu {
    cursor: pointer
}

.BtnServices,
.menu ul li a,
a,
li .LinksNav {
    text-decoration: none
}

.After,
.BackToTop {
    right: 10px
}

.AR,
.Ar,
.Arabic,
.ConCardBlog.AllBlogs.rtl,
.rtl {
    direction: rtl
}

.DatePhotoBlog,
.Logo {
    vertical-align: middle
}

.After,
.Before,
.PN,
.SEOS p,
.deleteBlog,
.slider-container {
    user-select: none
}

:root {
    --main-color: #17756b;
    --margin: auto;
    --main_width: 100%;
    --border_radius: 6px;
    --gap: 1rem;
    --main_width_with_gap: calc(100% - var(--gap) * 2)
}

::-webkit-scrollbar {
    width: 5px
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px 6px #fff;
    background-color: #fff
}

::-webkit-scrollbar-thumb {
    background-color: #1c786f;
    outline: slategrey solid 0
}

.BackToTop,
.burger-menu .line,
.colorlib-bubbles li {
    background-color: var(--main-color)
}

body {
    margin: 0;
    padding: 60px 0 0;
    width: 100%;
    overflow-x: hidden;

}

main {
    overflow: hidden;
    max-width: 100vw
}

.rtl {
    font-size: 14px;
    text-align: right !important
}

.particletext,
section {
    position: relative
}

.particletext.bubbles>.particle {
    opacity: 0;
    position: absolute;
    background-color: #3cd27b;
    -webkit-animation: 3s ease-in infinite bubbles;
    animation: 3s ease-in infinite bubbles;
    border-radius: 100%;
    z-index: 999999
}

@keyframes bubbles {
    0% {
        opacity: 0
    }

    20% {
        opacity: .2;
        transform: translate(0, -20%)
    }

    100% {
        opacity: 0;
        transform: translate(0, -1000%)
    }
}

.colorlib-bubbles {
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    height: 100%;
    z-index: -1
}

.colorlib-bubbles li {
    position: absolute;
    list-style: none;
    display: block;
    width: 40px;
    height: 40px;
    opacity: .8;
    bottom: -160px;
    -webkit-animation: 20s infinite square;
    -moz-animation: 250s infinite square;
    -o-animation: 20s infinite square;
    -ms-animation: square 20s infinite;
    animation: 20s infinite square;
    -webkit-transition-timing-function: linear;
    -moz-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    -ms-transition-timing-function: linear;
    transition-timing-function: linear;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    opacity: .12
}

.colorlib-bubbles li:first-child {
    left: 10%
}

.colorlib-bubbles li:nth-child(2) {
    left: 20%;
    width: 80px;
    height: 80px;
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    -o-animation-delay: 2s;
    -ms-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-duration: 17s;
    -moz-animation-duration: 17s;
    -o-animation-duration: 17s;
    animation-duration: 17s
}

.colorlib-bubbles li:nth-child(3) {
    left: 25%;
    -webkit-animation-delay: 4s;
    -moz-animation-delay: 4s;
    -o-animation-delay: 4s;
    -ms-animation-delay: 4s;
    animation-delay: 4s
}

.colorlib-bubbles li:nth-child(4) {
    left: 40%;
    width: 60px;
    height: 60px;
    -webkit-animation-duration: 22s;
    -moz-animation-duration: 22s;
    -o-animation-duration: 22s;
    -ms-animation-duration: 22s;
    animation-duration: 22s;
    border: 1px solid var(--main-color)
}

.colorlib-bubbles li:nth-child(5) {
    left: 70%
}

.colorlib-bubbles li:nth-child(6) {
    left: 80%;
    width: 120px;
    height: 120px;
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    -o-animation-delay: 3s;
    -ms-animation-delay: 3s;
    animation-delay: 3s;
    border: 1px solid var(--main-color)
}

.colorlib-bubbles li:nth-child(7) {
    left: 32%;
    width: 160px;
    height: 160px;
    -webkit-animation-delay: 7s;
    -moz-animation-delay: 7s;
    -o-animation-delay: 7s;
    -ms-animation-delay: 7s;
    animation-delay: 7s
}

.colorlib-bubbles li:nth-child(8) {
    left: 55%;
    width: 20px;
    height: 20px;
    -webkit-animation-delay: 15s;
    -moz-animation-delay: 15s;
    animation-delay: 15s;
    -webkit-animation-duration: 40s;
    -moz-animation-duration: 40s;
    animation-duration: 40s
}

.colorlib-bubbles li:nth-child(9) {
    left: 25%;
    width: 10px;
    height: 10px;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-duration: 40s;
    animation-duration: 40s;
    border: 1px solid var(--main-color)
}

.colorlib-bubbles li:nth-child(10) {
    left: 90%;
    width: 160px;
    height: 160px;
    -webkit-animation-delay: 11s;
    animation-delay: 11s
}

@-webkit-keyframes square {
    0% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }

    100% {
        -webkit-transform: translateY(-700px) rotate(600deg);
        -moz-transform: translateY(-700px) rotate(600deg);
        -o-transform: translateY(-700px) rotate(600deg);
        -ms-transform: translateY(-700px) rotate(600deg);
        transform: translateY(-700px) rotate(600deg)
    }
}

@keyframes square {
    0% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }

    100% {
        -webkit-transform: translateY(-700px) rotate(600deg);
        -moz-transform: translateY(-700px) rotate(600deg);
        -o-transform: translateY(-700px) rotate(600deg);
        -ms-transform: translateY(-700px) rotate(600deg);
        transform: translateY(-700px) rotate(600deg)
    }
}

input,
textarea {
    outline: 0;
    border-style: solid
}

a {
    color: #000
}

.ContainerWidth {
    width: 80%;
    margin: auto
}

.BackToTop {
    position: fixed;
    bottom: 10px;
    padding: 12px;
    border-radius: 50%;
    z-index: 9999;
    transition: .3s;
    transform: translateY(50px)
}

.BackToTop.Active {
    opacity: 1;
    transform: translateY(0)
}

.BackToTop span {
    background-image: url(../Img/Icons/down-arrow.png);
    width: 20px;
    height: 20px;
    display: block;
    rotate: 180deg
}

.menu-container {
    position: relative;
    display: none;
    margin-right: 30px
}

.menu-container.rtl {
    margin-right: 0;
    margin-left: 30px
}

.burger-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    z-index: 10
}

.closer,
.menu {
    height: 100%;
    transition: .5s;
    position: fixed;
    top: 0
}

.burger-menu .line {
    height: 5px;
    width: 100%;
    transition: .3s;
    border-radius: 4px
}

.IconLanguageMinu {
    margin: 0 100px !important;
    display: inline-block
}

.NavBar,
ul {
    display: flex
}

.menu {
    left: -250px;
    width: 250px;
    background-color: #f6f6f6;
    z-index: 9999999999999;
    overflow-y: auto;
    border-right: 1px solid var(--main-color)
}

.menu.rtl {
    right: -250px;
    left: auto
}

.menu::-webkit-scrollbar {
    width: 1px;
    background-color: var(--main-color)
}

.menu ul {
    padding: 0;
    flex-direction: column;
    align-items: baseline
}

.closer {
    background-color: rgba(128, 128, 128, .527);
    width: 100%;
    z-index: 99999;
    pointer-events: none
}

.Closer.Active,
.PoupapDetails.Active,
.closer.open {
    opacity: 1;
    pointer-events: all
}

.menu ul li {
    text-align: left;
    width: 100%;
    border-bottom: 1px solid rgba(128, 128, 128, .562);
    transition: .3s;
    padding-top: 15px;
    padding-bottom: 15px
}

.menu ul li.rtl a,
div.AR,
textarea.AR {
    padding-left: 0;
    padding-right: 20px
}

.menu ul li a {
    transition: .3s;
    padding-left: 20px;
    width: 100%;
    display: block
}

.menu ul li a.Active {
    font-weight: 600
}

.menu ul li:hover {
    border-bottom: 1px solid var(--main-color)
}

.LogoMinu {
    margin: 20px auto !important;
    width: 50% !important
}

.LogoMinu img {
    max-width: 100%;
    display: block
}

.menu.open {
    left: 0
}

.menu.open.rtl {
    left: auto;
    right: 0
}

.burger-menu.open .line:first-child {
    transform: rotate(45deg);
    position: relative;
    top: 8px
}

.burger-menu.open .line:nth-child(3) {
    transform: rotate(-45deg);
    position: relative;
    top: -8px
}

.conatinerHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #17756b50;
    top: 0;
    position: fixed;
    z-index: 9999888;
    transition: .7s;
    background-color: #fff;
    width: 100%
}

.conatinerHeader.scrolled {
    transform: translateY(-100px)
}

.conatinerHeader.sticky {
    position: sticky;
    transform: translateY(0)
}

.LinkLogo.shrink {
    padding: 5px 0 !important;
    height: 35px !important;
    line-height: 30px !important
}

li .LinksNav {
    padding: 10px 20px;
    transition: .2s
}

.ContentHero h1,
.ContentHero h2,
.LinksNav.Active {
    font-weight: 700
}

.conatinerHeader.rtl li:first-of-type .LinksNav,
li:last-of-type .LinksNav {
    border-right: none
}

.LinksNav:hover {
    color: #26af98
}

.LinkLogo {
    margin: 0 30px;
    height: 60px;
    /* line-height: 60px; */
    padding: 15px 0
}

.Logo {
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto
}

.NavBar {
    align-items: center
}

.ChangLanguage {
    border-radius: 5px;
    margin: 0 30px
}

.En {
    padding: 5px 15px
}

.IconLanguage {
    width: 20px;
    height: 20px;
    display: inline-block
}

.Card,
.Cards,
.Container,
.ContentHero h1,
.Number,
.SectionTwo {
    display: flex
}

.EnglishIcon {
    background-image: url(../Img/us.png)
}

.ArabicIcon {
    background-image: url(../Img/arab.png)
}

.BackgroundHero {
    background-image: url(../Img/Property-1Default.svg);
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%
}

.Container {
    align-items: flex-start;
    justify-content: space-between;
    margin: 0 30px;
    padding-top: 6rem
}

.Container.rtl img,
.ContainerIntroServices.rtl img {
    transform: rotateY(180deg)
}

.Container.rtl .FrameImage {
    transform: translateX(-16rem)
}

.ContentHero {
    text-align: left;
    width: 60%
}

.ContentHero h1 {
    align-items: center;
    gap: 20px;
    line-height: 14px;
    letter-spacing: 0;
    font-size: 14px
}

.ContentHero h2 {
    line-height: 44px;
    letter-spacing: 0;
    font-size: 30px
}

.ContentHero p {
    line-height: 27px;
    letter-spacing: 0;
    font-weight: 400;
    font-size: 25px
}

.ContentHero.rtl p {
    line-height: 1.5 !important
}

.ContentHero p:last-of-type {
    line-height: 27px;
    letter-spacing: 0;
    font-weight: 600;
    font-size: 28px
}

.Card p,
.ContentSection,
.TitleBlog.rtl h1 {
    line-height: 1.5
}

.ContentHero h1::before {
    content: '';
    width: 30px;
    height: 2px;
    background-color: var(--main-color)
}

.ContentGap {
    padding-left: 60px;
    padding-top: 50px
}

.FrameImage {
    padding-top: 10rem
}

.HeroImage {
    position: relative;
    height: 100%;
    width: 100%
}

.ContainerSection.rtl .ContainerImage {
    display: flex;
    justify-content: end;
    margin-left: 50px
}

.TransformSection.rtl .RightContainer {
    border-radius: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, #fff 45%, #fff 100%);
    padding-left: 10%;
    padding-right: 6rem
}

.SectionTwo {
    background-color: var(--main-color);
    flex-direction: column;
    color: #fff;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 100px
}

.SectionTwo h2 {
    margin: 0;
    font-size: 14px
}

.SectionTwo .SecondTitle {
    font-size: 34px;
    margin: 0 0 50px;
    font-weight: 300
}

.SectionTwo .SecondTitle strong {
    margin-right: 8px;
    margin-left: 8px
}

.Cards {
    align-items: center;
    justify-content: center;
    gap: 70px;
    padding: 20px
}

.Card {
    flex-direction: column;
    text-align: left;
    padding: 15px
}

.SVGCard,
.SectionDeticated,
.TransformSection {
    text-align: center
}

.Number {
    align-items: center;
    gap: 5px;
    font-size: 100px !important;
    font-weight: 900;
    margin-bottom: -72px;
    opacity: .2
}

.Card p strong {
    font-size: 28px
}

.Number::after {
    width: 100px;
    height: 2px;
    background-color: #fff;
    display: inline-block
}

.SVGCard {
    margin-bottom: 30px
}

.SectionItems {
    padding-bottom: 100px
}

.SectionItems h2 {
    text-align: center !important;
    font-size: 36px;
    font-weight: 600;
    margin: 70px auto;
    display: block;
    padding: 4rem
}

.SectionItems h2.rtl {
    line-height: 1.8
}

.Items {
    display: flex;
    gap: 10px;
    align-items: baseline
}

.Item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid #6ba38D50;
    border-radius: 20px;
    padding: 25px 25px 0 20px;
    transition: .4s;
    background: #fff
}

.BgHandler,
.BookingWatsapp,
.BtnBookingNow,
.BtnServices,
.Icon,
.Item p,
.Sections div,
.Square,
.SubmiteBooking,
.SubmiteContact,
.deleteBlog,
.ourServices {
    transition: .3s
}

.Icon:hover,
.Item:hover {
    transform: translateY(-10px)
}

.Item h3 {
    margin: 0;
    font-size: 18px;
    line-height: 45px;
    font-weight: 600
}

.Item p {
    color: #565656;
    font-size: 16px;
    line-height: 28px;
    font-weight: 400
}

.Item:hover p,
.PWisher,
.TransformSection .ContentRightSection p {
    color: #000
}

.Items .Item {
    padding-bottom: 30px
}

.SectionDeticated p:first-child:not(.ContentSection p) {
    color: var(--main-color);
    font-size: 30px;
    margin: 0px;
}

.SectionDeticated p:nth-child(2):not(.ContentSection p) {
    font-size: 20px;
    margin: 0px;
}

.ContainerBtnBookingNow,
.ContainerSection {
    display: flex;
    justify-content: center;
    margin-top: 50px;
    margin-bottom: 50px
}

.LineAndContent,
.LineBetween,
.PBooking.Ar,
.partTwo {
    margin-top: 20px
}

.ContainerImage,
.LineAndContent {
    width: calc(100% /2)
}

/* .ContainerImage img {
    width: 75%
} */

.LineAndContent {
    display: flex;
    gap: 30px
}

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

.LineBetween span:not(:last-of-type)::after {
    content: '';
    width: 0;
    height: 6rem;
    border-left: 4px dotted var(--main-color);
    margin: 5px 0
}

.LineBetween span svg {
    fill: var(--main-color);
    width: 20px
}

.ContentSection {
    text-align: left;
    color: var(--main-color);
    font-weight: 600
}

.TransformSection {
    text-align: left;
    display: flex;
    align-items: center
}

.RightContainer {
    background-color: #e6e6e6;
    position: relative;
    border-top-left-radius: 32px;
    border-bottom-left-radius: 32px;
    width: calc(100%/3)
}

.ContentRightSection {
    background-position: left;
    background-size: cover;
    padding: 80px 50px 50px;
    color: #1e7970
}

.ContentRightSection h2 {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 14px;
    line-height: 21px;
    font-weight: 700
}

.ContentRightSection h2::before {
    content: '';
    width: 20px;
    height: 4px;
    border-radius: 5px;
    background-color: #1e7970;
    display: inline-block
}

.ContentRightSection h3 {
    font-size: 36px;
    line-height: 45px;
    font-weight: 600
}

.ContentRightSection p {
    font-size: 16px;
    line-height: 28px;
    font-weight: 400;
    margin-bottom: 20px
}

.BtnServices {
    border: 1px solid var(--main-color);
    color: #fff;
    padding: 18px 30px;
    background-color: var(--main-color);
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600
}

.BtnServices:hover,
.LinkBooking:hover {
    background-color: #fff;
    color: var(--main-color)
}

.LeftContainer {
    position: relative;
    width: calc((100% / 3)*2)
}

.slider-container {
    position: relative;
    height: 41rem;
    overflow: hidden
}

.After,
.Before,
.BgHandler,
.deleteBlog,
.image-wrapper,
.slider-handle {
    position: absolute
}

.image-wrapper {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.image-wrapper.second {
    clip-path: inset(0 50% 0 0)
}

.slider-handle {
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    background: #fff;
    z-index: 10;
    cursor: grab
}

.slider-handle.dragging {
    cursor: grabbing
}

.slider-handle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -15px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, .5);
    border: 2px solid #fff;
    border-radius: 50%
}

.BgHandler {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 8;
    background-color: rgba(0, 0, 0, .5)
}

.slider-container:hover .BgHandler.dragging {
    background-color: transparent
}

.After,
.Before {
    background: rgba(255, 255, 255, .2);
    line-height: 38px;
    padding: 0 20px;
    border-radius: 2px;
    color: #fff;
    font-size: 13px;
    letter-spacing: .1em;
    z-index: 9;
    top: 50%
}

.BGBooking,
.Icon,
.UploadImage {
    background-position: center
}

.BGBooking,
.ClientName,
.ContainerBlogsFront,
.Icon,
.IconBoxNumber,
.UploadImage,
.plus {
    background-repeat: no-repeat
}

.ContentIntroServices,
.LastSectionServices,
.List,
.STitleOfSection {
    color: var(--main-color)
}

.Before {
    left: 10px
}

.ContainerIntroServices {
    margin: 50px auto;
    display: flex;
    justify-content: center
}

.ContainerIntroServices img,
.imageBodyAbout {
    width: 50%
}

.ContentIntroServices {
    padding: 20px;
    text-align: left;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.ContentIntroServices h1 {
    order: 2;
    font-size: 51px;
    font-weight: 700;
    line-height: 56px;
    margin: 0 0 25px
}

.ContentIntroServices h2 {
    order: 1;
    margin: 0 0 25px;
    font-size: 48px;
    font-weight: 300;
    line-height: 54px
}

.ContentIntroServices h3 {
    order: 3;
    color: #56555a;
    font-size: 20px;
    font-weight: 400;
    line-height: 26px;
    margin: 0 80px 45px 0
}

.ContentIntroServices.rtl h3 {
    margin-right: 0 !important
}

.LastSectionServices {
    text-align: center;
    user-select: none
}

.LastSectionServices .FirstTitle {
    font-size: 38px;
    font-weight: 500;
    line-height: 30px
}

.LastSectionServices .SecondeTitle {
    font-size: 14px;
    line-height: 30px
}

.Squares {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-wrap: wrap
}

.InfoCustomer,
.Inputs,
.Links,
.Lists,
.Sections,
.Square {
    gap: 10px
}

.Square {
    width: calc((100% / 3) - 55px);
    display: flex;
    align-items: flex-start;
    text-align: left;
    padding: 35px 25px 35px 20px;
    border: 1px solid transparent
}

.Squares .Square:nth-child(3) {
    padding-bottom: 5px
}

.Square:hover {
    border-color: var(--main-color)
}

.Square span {
    font-size: 34px;
    line-height: 15px;
    font-weight: 100
}

.Square h3 {
    margin-top: 0;
    font-size: 18px
}

.Square p {
    color: #565656;
    font-size: 15px;
    font-weight: 500;
    line-height: 30px
}

.ContainerOfPrices {
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center
}

.PBooking,
.TitleOfSection {
    color: var(--main-color);
    font-size: 14px;
    font-weight: 700;
    margin: 0
}

.STitleOfSection {
    font-size: 50px;
    font-weight: 600;
    letter-spacing: -1px
}

.STitleOfSection span {
    display: block;
    font-size: 50%
}

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

.List {
    background-color: #f4f4f4;
    border-radius: 32px;
    padding: 40px;
    width: calc((100% / 4) - 30px);
    display: flex;
    flex-direction: column;
    justify-content: center
}

.List h3 {
    font-size: 24px;
    font-weight: 600;
    text-align: left;
    padding: 8px
}

.SectionFormAr div,
.SectionFormAr input,
.SectionFormAr textarea,
.rtl .List h3,
.rtl .List ul li .ItemOfList {
    text-align: right
}

.List:first-of-type {
    background-color: var(--main-color);
    color: #fff
}

.List ul {
    padding: 0;
    display: block !important
}

.List ul li .ItemOfList {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    font-weight: 500;
    text-align: left
}

.InfoCustomer,
.Inputs,
.Links {
    align-items: center;
    display: flex
}

.List ul li::after {
    content: "";
    width: 100%;
    border-bottom: 1px solid;
    border-color: #ddd;
    display: block
}

.List ul li svg {
    fill: var(--main-color);
    transition: fill .3s;
    width: 14px;
    height: 14px
}

.List ul li svg.rtl {
    transform: rotate(180deg)
}

.List:first-of-type ul li svg {
    fill: #FFFFFF;
    transition: fill .3s;
    width: 14px;
    height: 14px
}

.BGBooking {
    background-image: url(../Img/BookingBg.webp);
    background-attachment: fixed;
    background-size: cover;
    background-color: #f0f4f4;
    margin-bottom: 0;
    padding: 150px 0 250px;
    display: block;
    width: 100%;
    text-align: center
}

.BookingWatsapp,
.BtnBlogs,
.BtnBookingNow,
.SubmiteBooking,
.SubmiteContact,
.logout {
    background-color: var(--main-color)
}

.BGBooking h1,
.cardBlogs h1,
.cardBlogs h2 {
    margin: 0
}

.BGBooking h2 {
    font-weight: 700;
    margin: 0
}

.Form {
    /* width: 80%; */
    margin: -190px auto auto
}

/* .Form form {
    width: calc((100% / 3) * 2);
    margin: auto;
    padding: 60px 40px;
    background-color: #475d68;
    border-radius: 20px;
    color: #fff
} */

#TypeServices,
.Inputs input,
select {
    color: var(--main-color);
    padding: 10px;
    outline: 0
}

.Form form h3 {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600
}

/* .Form form input,
.Form form select {
    transition: .3s;
    border-color: transparent;
    border-style: solid
}

.Form form input:focus,
.Form form select:focus {
    color: #0089f7;
    background-color: #94e1d4;
    border-color: #77ffc3
} */

.HrForm {
    border: none;
    border-bottom: 1px solid #36383d
}

#TypeServices {
    width: 100%;
    margin: 15px 0 0
}

.Inputs {
    justify-content: center
}

.Inputs input,
select {
    width: calc((100% / 3) - 5px);
    margin: 15px 0
}

.Notes,
.NotesContainer,
.PoupapDetails table,
.imageBodyAbout img {
    width: 100%
}

.Inputs input::placeholder {
    color: var(--main-color);
    transition: .3s
}



.BookingWatsapp,
.SubmiteBooking {
    width: 100%;
    color: #fff;
    text-align: center;
    font-size: 15px;
    line-height: 15px;
    font-weight: 700;
    padding: 18px 30px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid var(--main-color)
}

.BookingWatsapp {
    /* margin-top: 30px */
}

.Notes {
    padding-left: 10px;
    padding-top: 10px;
    margin-bottom: 30px
}

.Notes::placeholder {
    color: var(--main-color)
}

.BookingWatsapp:hover,
.SubmiteBooking:hover {
    color: var(--main-color);
    background-color: #fff;
    border-color: var(--main-color)
}

.LastSectionInBooking {
    color: var(--main-color);
    width: 80%;
    margin: 30px auto auto;
    text-align: center
}

.LastSectionInBooking h3 {
    font-size: 28px;
    margin-bottom: 100px;
    text-align: center
}

.LastSectionInBooking img {
    width: 35%
}

.followUsInsta {
    margin-bottom: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 40px
}

.followUsInsta p {
    font-size: 18px;
    font-weight: 700
}

.Icon {
    background-size: contain;
    width: 40px;
    height: 40px;
    display: block
}

.WhatsIcon {
    background-image: url(../Img/Icons/whatsapp.png)
}

.LinkedInIcon {
    background-image: url(../Img/Icons/linkedin.png)
}

.InstaIcon {
    background-image: url(../Img/Icons/insta.png)
}

.GoogleMapIcon {
    background-image: url(../Img/Icons/google-maps.png)
}

.SnapIcon {
    background-image: url(../Img/Icons/snap.png)
}

.InfoCustomer input {
    width: calc((100% / 2) - 5px);
    padding: 10px
}

.InfoCustomer input::placeholder {
    color: var(--main-color)
}

.BtnBookingNow {
    text-align: center;
    padding: 10px 20px;
    border: 1px solid var(--main-color);
    color: #fff;
    border-radius: 10px;
    font-size: 22px
}

.BtnBookingNow:hover,
.LinkHead:hover {
    color: var(--main-color);
    background-color: #fff
}

.ContainerContact {
    text-align: center;
    color: var(--main-color);
    padding-top: 50px
}

.FindUs {
    font-size: 40px;
    font-weight: 500;
    margin-bottom: 15px
}

.DiscContact {
    color: #212323;
    font-size: 16px;
    padding: 0 352px;
    font-weight: 400
}

.ContactInfo {
    display: flex;
    align-items: center;
    margin-top: 80px;
    margin-bottom: 50px
}

.ContactInfo .ContentContactInfo {
    text-align: left;
    width: 50%;
    padding-left: 100px
}

.ContactInfo .ContentContactInfo h2 {
    font-size: 40px;
    margin-bottom: 1px
}

.ContactInfo .ContentContactInfo p {
    color: #212323;
    font-size: 16px;
    font-weight: 400;
    padding-right: 100px
}

.ContentContactInfo p.rtl,
.art.Ar {
    padding-right: 0
}

.ContactInfo form {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    width: 50%
}

.ContactInfo form.rtl {
    align-items: flex-start
}

.ContactInfo form input,
.ContactInfo form textarea {
    width: 80%;
    margin-bottom: 30px;
    outline: 0;
    padding: 10px;
    color: #17756b;
    background-color: #fff;
    border-color: var(--main-color);
    border-style: solid;
    border-width: 1px;
    border-radius: 8px
}

.ContactInfo form input::placeholder,
.ContactInfo form textarea::placeholder {
    opacity: .7;
    transition: .3s;
    font-weight: 400;
}

.SubmiteContact {
    color: #ffff;
    text-align: center;
    font-size: 15px;
    line-height: 15px;
    font-weight: 700;
    padding: 18px 30px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent
}

.Sections div:hover,
.UploadImage {
    color: var(--main-color);
    cursor: pointer
}

.SectionSYS {
    margin-top: 50px
}

.Sections {
    padding: 10px 10px 10px 0;
    display: flex;
    flex-direction: column
}

.Sections div {
    padding: 10px;
    border: 1px solid #000;
    border-radius: 10px
}

.BlogsForm,
.BlogsForm[SerialID] {
    border: 1px solid var(--main-color)
}

.Sections div:hover {
    border-color: var(--main-color)
}

.BlogsForm {
    width: 96%;
    margin: auto;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    border-radius: 20px;
    padding: 10px
}

.InputImage,
.KeywordsFront,
.SectionFormAr {
    display: none
}

.SectionFormAr.Arabic,
.UploadImage {
    display: block
}

.UploadImage {
    font-size: 80px;
    background-size: cover;
    overflow: hidden;
    background-image: url(../Img/Ticks/NewPhoto.webp);
    width: 40%;
    height: 360px;
    border-radius: 20px
}

.ContentBodyAbout ul li::before,
.IconBoxNumber {
    background-size: contain;
    background-position: center
}

.LastSectionAbout.rtl::after,
.NewEditor {
    height: 200px
}

.ADDLinks {
    display: flex;
    align-items: start;
    gap: 10px
}

.SectionInputs input {
    width: 100% !important
}

.ADDLinks input {
    width: 80% !important
}

.UploadImage img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.SectionInputs {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 60%
}

.ConCardBlog.AllBlogs .TitleBlog,
.SectionFormAr.Arabic,
.SectionFormEn {
    display: flex;
    flex-direction: column
}

.Articals .AR.FetchEditor,
.En_FB,
.ImageBlogCardPage.rtl img,
.Keywords .AR.FetchedKeywords {
    order: 1
}

.EnS_FB,
.ImageBlogCardPage.rtl .TitleBlog,
.cardBlogs h2 {
    order: 2
}

.EnA_FB,
.cardBlogs p {
    order: 3
}

.ADDLinks_FB {
    order: 4
}

.FetchEditor {
    order: 5
}

.FetchedKeywords {
    order: 6
}

.SectionFormAr textarea,
.SectionFormEn textarea {
    display: block;
    width: 100%;
    margin-top: 20px;
    border-radius: 10px;
    border: 1px solid var(--main-color);
    padding: 20px 0 0 20px
}

.SectionFormAr textarea::placeholder,
.SectionFormEn textarea::placeholder {
    color: var(--main-color)
}

.BtnBlogs {
    color: #fff;
    border: none;
    border-radius: 10px;
    width: 100%;
    text-align: center;
    padding: 10px 0;
    margin-top: 20px;
    cursor: pointer
}

.HrBetween {
    border: none;
    border-bottom: 1px solid var(--main-color);
    margin: 30px 0
}

.BlogsForm[SerialID] {
    margin-top: 30px;
    padding: 20px;
    border-radius: 10px;
    position: relative
}

.deleteBlog {
    top: 0;
    right: 5px;
    rotate: 45deg;
    font-size: 40px;
    color: var(--main-color);
    cursor: pointer;
    opacity: .4
}

.PN:hover .plus,
.deleteBlog:hover,
.plus:hover {
    opacity: 1
}

.NewEditor {
    width: 100%;
    border: 1px solid var(--main-color);
    outline: 0;
    border-radius: 10px;
    padding-left: 10px;
    padding-top: 10px;
    overflow: scroll
}

#add-link,
.link-input {
    border: 1px solid #17756b
}

.NewEditor::-webkit-scrollbar {
    width: 0
}

.LinksWords {
    font-weight: 700 !important;
    color: #17756b !important;
    text-decoration: underline !important
}

.cardBlogs,
.ourServices,
.webflow a {
    text-decoration: none
}

.link-input {
    padding: 10px
}

#add-link {
    padding: 10px 25px;
    font-size: 14px;
    background-color: #17756b;
    color: #fff;
    border-radius: 6px;
    width: 30%;
    cursor: pointer
}

.LogoutContainer {
    margin: 20px
}

.logout {
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 10px;
    color: #fff
}

.containerAboutUs {
    height: 50vh;
    background-color: #030303;
    position: relative;
    z-index: 2
}

.containerAboutUs h1 {
    font-size: 50px;
    line-height: 60px;
    color: #fff;
    font-weight: 600;
    margin: 19px 0 0;
    padding: 0;
    position: relative
}

.ContentContainerAbout {
    display: flex;
    flex-direction: column-reverse;
    align-items: start;
    justify-content: center;
    height: 100%;
    width: 70%;
    margin: auto
}

.webflow {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #fff;
    gap: 10px
}

.webflow a {
    color: var(--main-color);
    line-height: 26px
}

.webflow h2 {
    color: #fff;
    font-size: 18px;
    line-height: 26px;
    font-weight: 400
}

.bubbleContainer {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none
}

.bubbleContainer div[class^=bubble-] {
    height: 1px;
    width: 1px;
    position: absolute;
    background: url(../Img/bubbles.png) center center/cover no-repeat;
    border-radius: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    pointer-events: none
}

.bubble-1 {
    bottom: -14.6px;
    left: 70%;
    -webkit-animation: 4.5s ease-in -5.22s infinite bubble-animation;
    animation: 4.5s ease-in -5.22s infinite bubble-animation
}

.bubble-2 {
    bottom: -1.4px;
    left: 8%;
    -webkit-animation: 4.5s ease-in -3.58s infinite bubble-animation;
    animation: 4.5s ease-in -3.58s infinite bubble-animation
}

.bubble-3 {
    bottom: -62.6px;
    left: 21%;
    -webkit-animation: 4.5s ease-in -.64s infinite bubble-animation;
    animation: 4.5s ease-in -.64s infinite bubble-animation
}

.bubble-4 {
    bottom: -83px;
    left: 69%;
    -webkit-animation: 4.5s ease-in -7.05s infinite bubble-animation;
    animation: 4.5s ease-in -7.05s infinite bubble-animation
}

.bubble-5 {
    bottom: -80.6px;
    left: 15%;
    -webkit-animation: 4.5s ease-in -.7s infinite bubble-animation;
    animation: 4.5s ease-in -.7s infinite bubble-animation
}

.bubble-6 {
    bottom: -25.4px;
    left: 98%;
    -webkit-animation: 4.5s ease-in -5.67s infinite bubble-animation;
    animation: 4.5s ease-in -5.67s infinite bubble-animation
}

.bubble-7 {
    bottom: -104.6px;
    left: 22%;
    -webkit-animation: 4.5s ease-in -.84s infinite bubble-animation;
    animation: 4.5s ease-in -.84s infinite bubble-animation
}

.bubble-8 {
    bottom: -91.4px;
    left: 37%;
    -webkit-animation: 4.5s ease-in -5.99s infinite bubble-animation;
    animation: 4.5s ease-in -5.99s infinite bubble-animation
}

.bubble-9 {
    bottom: -73.4px;
    left: 70%;
    -webkit-animation: 4.5s ease-in -3.65s infinite bubble-animation;
    animation: 4.5s ease-in -3.65s infinite bubble-animation
}

.bubble-10 {
    bottom: -97.4px;
    left: 35%;
    -webkit-animation: 4.5s ease-in -7.43s infinite bubble-animation;
    animation: 4.5s ease-in -7.43s infinite bubble-animation
}

@keyframes bubble-animation {
    0% {
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
        height: 1px;
        width: 1px
    }

    100% {
        -webkit-transform: translate3d(-50%, -280px, 0);
        transform: translate3d(-50%, -280px, 0);
        height: 75px;
        width: 75px
    }
}

.BodyAbout {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 30px;
    margin: 0;
    width: 85%
}

.ContentBodyAbout {
    margin-top: 90px;
    width: 50%
}

.ContentBodyAbout h2,
.LastSectionAbout .Mission h2,
.LastSectionAbout .Vision h2 {
    color: var(--main-color);
    font-size: 36px;
    line-height: 46px;
    font-weight: 600;
    margin-top: 13px;
    margin-bottom: 3px
}

.ContentBodyAbout p,
.LastSectionAbout .Mission p,
.LastSectionAbout .Vision p {
    margin: 25px 0 0;
    color: #7b7b7b;
    font-size: 18px
}

.ContentBodyAbout ul {
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 0
}

.ContentBodyAbout ul li {
    font-size: 16px;
    line-height: 27px;
    color: #7b7b7b;
    display: flex;
    align-items: center;
    gap: 5px
}

.ContentBodyAbout ul li::before {
    content: '';
    background-image: url(../Img/Icons/check.png);
    width: 20px;
    height: 20px;
    display: inline-block
}

.NumbersAboutUs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: -50px;
    position: relative;
    z-index: 999
}

.BoxesNumber,
.Icons {
    display: flex;
    align-items: center
}

.BoxesNumber {
    justify-content: center;
    gap: 20px
}

.Icons {
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .205);
    justify-content: center;
    border-radius: 50%
}

.IconBoxNumber {
    width: 50px;
    height: 50px;
    display: block;
    text-align: center
}

.ShirtsWashed {
    background-image: url(../Img/Icons/shirt.png)
}

.WashingMachines {
    background-image: url(../Img/Icons/washing-machine.png)
}

.DryCleanedItems {
    background-image: url(../Img/Icons/towel.png)
}

.HappyCustomers {
    background-image: url(../Img/Icons/experience.png)
}

.Counter h2 {
    font-size: 42px;
    line-height: 1;
    color: #323232;
    font-weight: 600;
    margin: 0
}

.Counter p {
    font-size: 16px;
    line-height: 27px;
    margin-top: 5px
}

.BodyAboutRight {
    margin-left: 15%;
    align-items: center
}

.ourServices {
    color: #fff;
    background-color: var(--main-color);
    padding: 10px 20px;
    border-radius: 5px;
    border: 1px solid transparent
}

.ourServices:hover {
    color: var(--main-color);
    background-color: #ffffff94;
    border: 1px solid var(--main-color)
}

.OurAdvantages {
    text-align: center;
    margin-bottom: 50px
}

.OurAdvantages h2 {
    color: var(--main-color);
    font-size: 18px
}

.OurAdvantages h3 {
    color: #323232;
    font-size: 36px;
    line-height: 46px;
    font-weight: 600;
    margin-top: 13px
}

.CardsAboutus .IconBoxNumber {
    width: 35px;
    height: 35px
}

.SecondSection {
    margin-bottom: 50px !important
}

.Idea {
    background-image: url(../Img/Icons/idea.png)
}

.Sale {
    background-image: url(../Img/Icons/price-tag.png)
}

.Convenience {
    background-image: url(../Img/Icons/convenient.png)
}

.quality {
    background-image: url(../Img/Icons/badge.png)
}

.delivery {
    background-image: url(../Img/Icons/fast-delivery.png)
}

.ListOrder {
    background-image: url(../Img/Icons/check-list.png)
}

.ContainerOurAdvantages {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    text-align: left
}

.CardsAboutus {
    width: calc((100% / 3) - 20px);
    display: flex;
    align-items: flex-start;
    gap: 25px;
    cursor: default
}

.ConCardBlog,
.ExitTable,
.PN {
    cursor: pointer
}

.ContentOurAdvantages h4 {
    position: relative;
    display: inline-block;
    color: #323232;
    font-size: 20px;
    line-height: 30px;
    margin: 0
}

.ContentOurAdvantages p {
    color: #7b7b7b;
    font-size: 18px;
    line-height: 27px
}

.CardBlogAll:hover h1,
.CardsAboutus:hover h4,
.ContainerBlogsFront a,
.ContentFAQ h2,
.PN:hover,
.TitleBlog .READMORE,
.btnReadMore,
.cardBlogs h1 {
    color: var(--main-color)
}

.ContentOurAdvantages h4::before {
    content: "";
    display: block;
    position: absolute;
    bottom: -5px;
    width: 0%;
    height: 2px;
    margin: auto;
    left: 0;
    right: 0;
    background-color: #323232;
    -webkit-transition: width .2s linear;
    transition: width .2s linear
}

.CardBlogAll h1,
.LinkHead,
.PN,
.plus {
    transition: .3s
}

.CardsAboutus:hover h4::before {
    width: 100%;
    background-color: var(--main-color)
}

.LastSectionAbout {
    margin: auto auto 100px
}

.LastSectionAbout .Mission,
.LastSectionAbout .Vision {
    width: calc(50% - 20px)
}

.LastSectionAbout .Vision {
    order: 2;
    margin-left: 10px
}

.LastSectionAbout::after {
    content: '';
    width: 1px;
    height: 150px;
    order: 1;
    border-left: 1px solid var(--main-color)
}

.CardsBlog {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center
}

.cardBlogs {
    display: flex;
    flex-direction: column;
    width: 100%;
    color: #000;
    gap: 0
}

.DatePhotoBlog,
.LinkHead {
    color: #fff;
    background-color: var(--main-color)
}

.ResponseBlogs {
    margin: 50px auto
}

.ImageBlogCard {
    /* height: 74vh; */
    /* aspect-ratio: 1; */
    position: relative;
}

.ImageBlogCardPage {
    height: auto !important
}

.toolbar {
    margin-top: 10px !important
}

.DatePhotoBlog {
    position: absolute;
    bottom: -10px;
    left: -10px;
    padding-top: 20px;
    border-radius: 50%;
    text-align: center;
    aspect-ratio: 1/1;
    width: 60px;
    display: block;
    height: 40px
}

.ImageBlogCard img {
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    /* aspect-ratio: 1; */
    max-width: 100%;
}

.cardBlogs h1 {
    order: 1 !important;
    margin-top: 10px;
    margin-bottom: 0
}

.cardBlogs h1.Ar {
    margin-bottom: 10px !important;
    margin-top: 15px !important
}

.ContainerBlogsFront {
    background-image: url(../Img/HeroBg.webp);
    background-position: center;
    background-size: cover
}

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

.ContianerBlogPage .ContainerImage {
    /* height: 90vh; */
    /* width: 50%; */
    /* margin-top: 100px; */
    float: left;
    display: block;
    width: auto;
}

.ContianerBlogPage .ContainerImage img {
    /* height: 100%; */
    /* width: 100%; */
    object-fit: contain;
    transition: .3s;
    border-radius: 20px;
    max-width: 100%;
}

footer iframe {
    border-radius: 12px;
    overflow: hidden
}

.ContianerBlogPage .ImageBlogCard {
    position: relative;
    overflow: hidden;
    text-align: center
}

.AllBlog {
    margin: 30px 0
}

.TitleBlog.ltr {
    text-align: left !important
}

.TitleBlog.rtl {
    text-align: right !important
}

.TitleBlog .READMORE {
    margin: 0
}

.ConCardBlog.AllBlogs .TitleBlog h1 {
    font-size: 36px;
    line-height: 46px;
    font-weight: 600;
    color: var(--main-color);
    margin: 0;
    padding: 0;
    order: 1;
}

.ConCardBlog.AllBlogs .TitleBlog h1.rtl {
    margin-bottom: 10px
}

.ConCardBlog.AllBlogs .TitleBlog h2 {
    font-size: 20px;
    line-height: 30px;
    font-weight: 200;
    color: #323232;
    margin: 0;
    padding: 0;
    order: 2
}

.ConCardBlog.AllBlogs .TitleBlog .art {
    font-size: 16px;
    line-height: 27px;
    color: #7b7b7b;
    margin: 0;
    padding: 0;
    order: 3 !important;
    max-height: 200px;
    overflow: hidden;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.CardBlogPage {
    display: block !important;
    margin-bottom: 20px
}

.ImageBlogCardPage {
    display: flex !important;
    align-items: start !important;
    gap: 30px;
    aspect-ratio: unset !important;
    /* width: 100% */
}

.ImageBlogCardPage img {
    /* height: auto;
    aspect-ratio: 1;
    width: 100% */
    max-width: 300px;
}

.data {
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
    margin-top: 0px;
}

.LinkHead {
    font-size: 28px;
    font-weight: 800;
    padding: 20px 30px;
    border-radius: 10px;
    border: 1px solid var(--main-color);
    display: inline-block
}

.ContentFAQ {
    text-align: center;
    margin-top: 50px
}

.ContentFAQ h2 {
    font-size: 16px;
    line-height: 26px;
    font-weight: 600
}

.ContentFAQ h3 {
    color: #323232;
    font-size: 36px;
    line-height: 46px;
    font-weight: 600;
    margin: 0
}

.ContentFAQ p {
    color: #7b7b7b;
    font-size: 16px;
    line-height: 27px
}

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

.FirstPartFAQ h2 {
    font-size: 20px;
    line-height: 30px;
    color: #323232;
    font-weight: 200;
    margin: 0;
    padding: 0 0 15px
}

.RowBoxes {
    display: flex;
    gap: 10px;
    margin-bottom: 20px
}

.ContianerFAQ {
    display: flex;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 10px;
    width: 50%
}

.BoxFAQ {
    width: calc(100% - 60px);
    padding: 20px 27px;
    background-color: #fdfefe;
    box-shadow: 0 0 3px #c3c3c361;
    border-radius: 5px
}

.added {
    padding-bottom: 20px;
    padding-top: 20px;
    color: #7b7b7b
}

.PN {
    color: #323232;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.plus {
    background-image: url(../Img/Icons/plus.png);
    background-position: center;
    background-size: contain;
    width: 30px;
    height: 30px;
    display: inline-block;
    rotate: 45deg;
    transform: scale(.72);
    opacity: .72
}

.Closer,
.PoupapDetails {
    opacity: 0;
    pointer-events: none;
    transition: .3s
}

.plus.Rotate {
    rotate: 0deg
}

.orderOne {
    text-align: center !important;
    color: #323232 !important;
    font-size: 36px !important;
    line-height: 46px !important;
    font-weight: 600 !important
}

.BtnBookingFQA {
    display: flex;
    justify-content: center
}

.LinkBooking {
    margin-top: 20px;
    margin-bottom: 50px;
    padding: 20px 30px;
    font-size: 26px;
    border: 1px solid var(--main-color);
    background-color: #17756b;
    color: #fff;
    transition: .3s;
    border-radius: 5px
}

.CountsForAdmin,
.view-count {
    background-color: var(--main-color);
    margin-top: 10px;
    border-radius: 10px;
    color: #fff
}

.cardBlogs h1,
.cardBlogs h2,
.cardBlogs p {
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
    padding-left: 0
}

@keyframes ani {
    0% {
        -webkit-mask-position: 0 0;
        mask-position: 0 0
    }

    100% {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0
    }
}

.NewBG {
    background-image: url(../Img/newbg.webp);
    background-size: COVER;
    background-position: center;
    overflow: hidden
}

.SEOS p {
    color: #00000000;
    font-size: 10px;
    max-height: 100%;
    display: none
}

.TransformSection .RightContainer {
    background: linear-gradient(-90deg, rgba(255, 255, 255, 0) 0, #fff 45%, #fff 100%);
    width: 50%;
    min-width: 1000px;
    border-radius: 0 !important;
    padding-right: 10%
}

.BlogHome {
    order: 0 !important
}

.BlogHomeSecondTitle {
    font-size: 1rem;
    color: #000
}

.ConCardBlog {
    display: flex;
    flex-direction: column;
    width: calc(50% - 20px);
    max-width: 400px;
}

.ConCardBlog.AllBlogs {
    width: 100%;
    margin-top: 50px;
    flex-direction: row;
    gap: 20px
}

.ConCardBlog.AllBlogs h2 {
    margin-top: 0
}



.CardBlogPage {
    width: 20%
}

.AdminBody {
    padding-top: 0
}

.CountsForAdmin {
    padding: 20px;
    display: flex;
    flex-direction: column;
    width: 10%;
    margin-left: 10px;
    text-align: left;
    cursor: pointer
}

.CountBooking,
.CountFooter {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 30px;
    margin-top: 10px
}

.view-count {
    margin-right: 10px;
    padding: 10px;
    text-align: center !important
}

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

.Closer {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #00000073;
    z-index: 1;
    width: 100%;
    height: 100vh
}

.PoupapDetails {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    z-index: 2
}

.ExitTable {
    position: absolute;
    right: 10px;
    top: 10px;
    color: #fff
}

.PoupapDetails,
.PoupapDetails table {
    background-color: var(--main-color);
    color: #fff;
    font-size: 20px;
    border-radius: 10px;
    text-align: center;
    padding: 10px
}

.ourclientsTitle {
    text-align: center;
    color: var(--main-color);
    font-size: 40px
}

@media (max-width:1400px) {
    .CardBlogPage {
        width: 65%
    }

    .LeftContainer,
    .RightContainer {
        width: 100%
    }

    .RightContainer {
        border-bottom-left-radius: 0;
        border-top-right-radius: 32px
    }

    .TransformSection .RightContainer {
        padding-right: 50%
    }
}

@media (max-width:1200px) {
    .NavBar {
        display: none
    }

    .menu-container {
        display: block
    }

    .NumbersAboutUs {
        margin-top: 0
    }

    .TransformSection .RightContainer {
        min-width: 100%
    }

    .TransformSection.rtl .RightContainer {
        padding-left: 10%;
        padding-right: 1rem
    }
}

@media (max-width:1100px) {

    .ContainerIntroServices.rtl img,
    .ContentIntroServices.rtl {
        border-bottom-right-radius: 32px;
        border-top-left-radius: 32px
    }

    .Cards,
    .CardsBlog,
    .Items {
        flex-wrap: wrap
    }

    .LastSectionInBooking,
    .SectionDeticated .ContainerSection {
        flex-direction: column
    }

    .FrameImage,
    .LineBetween {
        display: none
    }

    .Container {
        padding-top: 3rem;
        margin-bottom: 50px
    }

    .Item {
        width: calc(50% - 60px)
    }

    .ContentHero {
        width: 80%
    }

    .ContactInfo .ContentContactInfo,
    .ContactInfo form,
    .ContainerImage,
    .ContainerImage img,
    .LastSectionInBooking h3,
    .LineAndContent {
        width: 100%
    }

    .ContainerIntroServices {
        flex-direction: column-reverse
    }

    .ContainerIntroServices.rtl img {
        width: 100%;
        border-bottom-left-radius: 32px
    }

    .ContentIntroServices.rtl {
        border-top-right-radius: 32px
    }

    .Square {
        width: calc((100% / 2) - 55px)
    }

    .LastSectionInBooking img {
        width: 50%
    }

    .colorlib-bubbles {
        width: 75%
    }

    .LastSectionInBooking {
        align-items: center
    }

    .followUsInsta {
        margin-left: 0
    }

    .ContactInfo .ContentContactInfo,
    .DiscContact {
        padding: 0
    }

    .ContactInfo {
        flex-direction: column;
        margin-bottom: 50px
    }

    .ContactInfo form input,
    .ContactInfo form textarea {
        width: 94%
    }

    .ItemOfList span {
        font-size: 10px
    }
}

@media (max-width:912px) {

    .BodyAbout,
    .CardBlogPage,
    .ConCardBlog,
    .ContianerFAQ,
    .imageBodyAbout {
        width: 100%
    }

    .RowBoxes {
        flex-direction: column
    }

    .BodyAbout {
        flex-direction: column
    }

    .CardsAboutus {
        width: calc((100% / 2) - 20px)
    }

    .NumbersAboutUs {
        flex-wrap: wrap;
        align-items: center;
        justify-content: center
    }

    .ContentBodyAbout {
        margin: 20px auto auto;
        width: 90%
    }

    .BodyAboutRight {
        margin-left: 0
    }

    .LastSectionAbout {
        flex-direction: row;
        width: 90%;
        margin: auto
    }

    .BtnServices {
        padding: 15px 10px
    }

    .Lists {
        align-items: baseline
    }

    .List h3 {
        font-size: 16px;
        height: 30px
    }

    .List {
        width: calc((100% / 2) - 45px);
        padding: 20px
    }

    .PN h3 {
        width: 65% !important
    }

    .CardBlogPage .TitleBlog h1 {
        font-size: 28px
    }

    .ConCardBlog.AllBlogs {
        flex-direction: column;
        gap: 10px
    }

    .ConCardBlog.AllBlogs .TitleBlog .art,
    .ConCardBlog.AllBlogs .TitleBlog h1,
    .ConCardBlog.AllBlogs .TitleBlog h2 {
        line-height: unset
    }

    .ConCardBlog.AllBlogs .TitleBlog h2 {
        font-size: 26px
    }

    .ConCardBlog.AllBlogs .TitleBlog h1 {
        font-size: 30px
    }

    .ConCardBlog .art .READMORE,
    .ConCardBlog.AllBlogs .TitleBlog .art {
        font-size: 20px
    }

    .ConCardBlog {
        width: 100%;
        max-width: unset
    }


}

@media (max-width:650px) {
    .ConCardBlog.AllBlogs .TitleBlog h2 {
        font-size: 20px
    }

    .ConCardBlog.AllBlogs .TitleBlog h1 {
        font-size: 24px
    }

    .ConCardBlog .art .READMORE,
    .ConCardBlog.AllBlogs .TitleBlog .art,
    .ContentHero p,
    .ContentHero p:last-of-type {
        font-size: 18px
    }

    .ImageBlogCardPage,
    .InfoCustomer,
    .Items,
    .LastSectionAbout {
        flex-wrap: wrap
    }

    .CardsAboutus,
    .ContainerIntroServices img,
    .ContentHero,
    .InfoCustomer input,
    .Inputs select,
    .Item,
    .LastSectionAbout .Mission,
    .LastSectionAbout .Vision,
    .Square,
    .cardBlogs {
        width: 100%
    }

    .ContainerOfPrices {
        width: 100% !important
    }

    .SectionItems h2 {
        font-size: 20px;
        padding: 0;
        margin: 30px auto;
        width: 80%
    }

    .List h3 {
        font-size: 10px
    }


    .ContentGap {
        padding-left: 0
    }

    .ContentRightSection h3 {
        font-size: 26px;
        line-height: 1 !important
    }

    .SecondTitle {
        padding-left: 10px;
        padding-right: 10px
    }

    .ContentFAQ h3,
    .ContentIntroServices h1 {
        font-size: 30px
    }

    .FirstPartFAQ,
    .OurAdvantages {
        width: 90%
    }

    .Inputs {
        flex-direction: column
    }

    .Inputs input {
        width: calc(100% - 25px)
    }

    #Date,
    #Location {
        margin: 0
    }

    #YourTime {
        margin-top: 0
    }

    #TypeServices {
        margin-bottom: 15px
    }

    .SubmiteBooking {
        margin-top: 15px
    }

    .ContentFAQ {
        margin-left: 15px;
        margin-right: 15px
    }

    .LastSectionAbout::after {
        display: none
    }

    .RightContainer {
        width: 70% !important
    }

    .TransformSection .RightContainer {
        padding-left: 0;
        padding-right: 0;
        width: 90%;
        margin: auto
    }

    .NewBG {
        background-image: none !important
    }

    .colorlib-bubbles {
        width: 35%;
        height: 120%
    }

    .TransformSection.rtl .RightContainer {
        padding: 0 !important
    }

    .ContentRightSection {
        padding-top: 40px;
        max-width: 80%;
        min-width: 80%;
        margin: auto;
        padding-right: 0 !important;
        padding-left: 0 !important
    }

    .ContentIntroServices h3 {
        font-size: 16px
    }

    .ContentIntroServices h2 {
        font-size: 34px
    }

    .PWisher {
        font-size: 12px;
        color: #000;
    }

    .ContentHero h2 {
        font-size: 24px !important
    }

    .Lists {
        gap: 0;
        flex-wrap: nowrap
    }

    .List {
        padding: 15px 0
    }

    .List ul li .ItemOfList {
        gap: 0 !important
    }

    .ItemOfList span {
        font-size: 8px !important
    }

    .Lists .List:first-child {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        padding: 10px
    }

    .Lists .List:nth-child(2),
    .Lists .List:nth-child(3) {
        border-radius: 0
    }

    .Lists .List:nth-child(4) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
    }

    .Lists.rtl .List:first-child {
        border-radius: 0 32px 32px 0
    }

    .Lists.rtl .List:nth-child(4) {
        border-radius: 32px 0 0 32px
    }

    .cardBlogs h1 {
        font-size: 1rem !important
    }

    .ConCardBlog .art {
        font-size: 14px
    }

    .cardBlogs h2 {
        font-size: .8rem
    }

    .data h1 {
        font-size: 1.2rem;
        margin: 0px;
    }

    .data h2 {
        font-size: 1rem;
        color: #17756b;
    }

    .ConCardBlog.AllBlogs .TitleBlog,
    .ImageBlogCardPage img {
        max-width: 100%;
        max-width: 100%;
    }

    .ourclientsTitle {
        font-size: 26px
    }
}

@media (max-width:400px) {
    .List h3 {
        height: 20px
    }

    .List,
    .cardBlogs {
        width: 100%
    }

    .closer {
        width: 98%
    }

    .ContentFAQ h3 {
        font-size: 26px
    }

    .ConCardBlog.AllBlogs .TitleBlog h2 {
        font-size: 16px
    }

    .ConCardBlog.AllBlogs .TitleBlog h1 {
        font-size: 18px
    }

    .ConCardBlog .art .READMORE,
    .ConCardBlog.AllBlogs .TitleBlog .art {
        font-size: 14px
    }
}

@media (max-width:320px) {
    .colorlib-bubbles {
        width: 30%;
        height: 120%
    }
}

.PartOfClients {
    display: flex;
    white-space: nowrap;
    padding: 50px 0;
    gap: 100px;
    overflow: hidden;
    position: relative;
    z-index: 2;
    mix-blend-mode: multiply
}

.SlideClients {
    display: flex;
    align-items: center;
    gap: 150px
}

.Left {
    animation: 55s linear infinite autoslider
}

.ClientName {
    background-position: center;
    background-size: contain;
    width: 199px;
    height: 120px;
    display: block
}

@keyframes autoslider {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-100%)
    }
}

@media(max-width:600px) {
    .SlideClients {
        gap: 70px
    }
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: Calibri, DroidKufi;
    -webkit-font-smoothing: antialiased;
    text-shadow: rgba(0, 0, 0, .01) 0 0 1px
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    line-height: 1
}

.HeadLine {
    font-size: 45px;
    color: #222327;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 0;
    text-align: left;
    letter-spacing: -1px;
    width: calc(100% + 10px);
    display: inline-block !important;
    background-image: url(Img/Icons/Marketing.png);
    background-repeat: no-repeat;
    background-position: 10px 17px;
    background-size: auto 42px;
    padding: 10px 40px 0 70px;
    line-height: 66px
}

.LinkName,
.ToChooseLi,
.delete-button,
td {
    font-weight: 400
}

#AddItemsForm,
.PaperOptions {
    text-align: center;
    overflow: hidden;
    margin-right: auto;
    margin-left: auto
}

.HeadLine span {
    font-size: 50%;
    width: auto;
    margin: 0;
    font-weight: 700;
    color: #050505
}

.HeadLine .ActionsCounter {
    font-size: 14px !important;
    margin-top: -3px;
    vertical-align: top;
    margin-right: -6px;
    margin-left: -6px;
    display: inline-block;
    height: 24px;
    line-height: 24px
}

.HeadLine .AddItemsButton {
    vertical-align: top;
    font-size: 30px;
    margin: -2px 10px 30px 8px;
    background-image: url(Img/Icons/ADD.png);
    background-size: contain;
    cursor: pointer;
    width: 20px;
    height: 20px;
    display: inline-block
}

#FinishAddButton {
    background-size: auto 35px;
    height: 50px
}

#FinishAddButton.Loading {
    background-image: url(Img/Icons/loader.GIF);
    pointer-events: none;
    -webkit-box-shadow: 0 0 2px rgba(14, 14, 14, .13);
    box-shadow: 0 0 2px rgba(14, 14, 14, .13)
}

#FinishAddButton.Ok {
    background-image: url(Img/Icons/true.png);
    pointer-events: none;
    -webkit-box-shadow: 0 0 2px rgba(14, 14, 14, .13);
    box-shadow: 0 0 2px rgba(14, 14, 14, .13)
}

.PaperOptions {
    width: 210mm;
    margin-bottom: 200px;
    padding: 5mm 10mm;
    max-height: 10px;
    transition-duration: .1s
}

.PaperOptions img {
    display: inline-block;
    width: auto;
    height: auto;
    transition-duration: .1s
}

.PaperOptions .delete-button {
    margin: 0;
    transition-duration: .2s
}

.PaperOptions.Active,
.suggesstion-box a:hover span {
    max-height: 100px
}

.PaperOptions.Active .delete-button {
    opacity: 1;
    pointer-events: auto
}

.DeletePaperButton {
    max-height: 25px;
    float: left;
    margin-top: -15px;
    margin-left: -30px
}

#AddItemsForm {
    width: 100%;
    padding-bottom: 0;
    max-height: 0;
    max-width: 1000px;
    margin-bottom: 0
}

#AddItemsForm.Active {
    padding-top: 50px;
    padding-bottom: 50px;
    margin-bottom: 50px;
    max-height: 500px
}

#AddItemsForm input {
    direction: ltr;
    width: 100%
}

.delete-button {
    display: inline-block;
    margin-top: 300px;
    height: 55px;
    width: 150px;
    line-height: 55px;
    border: 2px solid #cdcdcd;
    border-radius: 3px;
    color: #aaa;
    transition: .2s cubic-bezier(.63, 1.75, .22, .57);
    overflow: hidden;
    align-self: center;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.delete-button:hover {
    border: 2px solid #e03e28;
    color: #e03e28
}

.delete-button.activate {
    border: 2px solid #e03e28 !important;
    box-shadow: inset 0 55px 0 0 #f44336;
    color: #fff
}

.confirm {
    height: inherit;
    width: inherit;
    color: #fff;
    font-size: 16px
}

.button-face,
.confirm {
    transform: translate3d(0, -55px, 0);
    transition: -webkit-transform .2s cubic-bezier(.63, 1.75, .22, .57)
}

.LinkTD {
    background-repeat: no-repeat !important;
    text-align: left !important;
    padding-left: 50px !important;
    background-size: 22px auto !important;
    background-position: 20px 18px !important;
    line-height: 30px;
    overflow: hidden;
    padding-right: 20px !important
}

#AllFetchedSearch,
.EditLinkButton,
.StatusTD {
    background-repeat: no-repeat
}

.LinkTD[LinkTybe=facebook],
.MarketChItem[LinkTybe=facebook] {
    background-image: url("Img/Icons/Social/facebook.png")
}

.LinkTD[LinkTybe=Behance],
.MarketChItem[LinkTybe=Behance],
.ToChooseLi.PagesCounter.Behance {
    background-image: url("Img/Icons/Social/behance.png")
}

.LinkTD[LinkTybe=blogspot],
.ToChooseLi.PagesCounter.blogspot {
    background-image: url("Img/Icons/Social/blogger.png")
}

.LinkTD[LinkTybe=twitter],
.MarketChItem[LinkTybe=twitter],
.ToChooseLi.PagesCounter.twitter {
    background-image: url("Img/Icons/Social/twitter3.png")
}

.LinkTD[LinkTybe=instagram],
.MarketChItem[LinkTybe=instagram],
.ToChooseLi.PagesCounter.instagram {
    background-image: url("Img/Icons/Social/instagram2.png")
}

.LinkTD[LinkTybe=google] {
    background-image: url("Img/Icons/Social/Google.png");
    background-size: 26px auto !important
}

.LinkTD[LinkTybe=Youtube],
.MarketChItem[LinkTybe=youtube],
.ToChooseLi.PagesCounter.Youtube {
    background-image: url("Img/Icons/Social/youtube.png")
}

.LinkTD[LinkTybe=linkedin],
.ToChooseLi.PagesCounter.linkedin {
    background-image: url("Img/Icons/Social/linkedin.png")
}

.LinkTD[LinkTybe=yellowpages],
.ToChooseLi.PagesCounter.yellowpages {
    background-image: url("Img/Icons/Social/YellowPages.png")
}

.LinkTD[LinkTybe=Pinterest],
.ToChooseLi.PagesCounter.Pinterest {
    background-image: url("Img/Icons/Social/pinterest.svg")
}

.LinkTD[LinkTybe=New] {
    background-image: url("Img/Icons/New.png")
}

.LinkTD[LinkTybe=Other],
.MarketChItem[LinkTybe=Other] {
    background-image: url("Img/Icons/Marketing.png")
}

.LinkName {
    padding: 3px;
    color: #000
}

#FollowersCounter {
    font-size: 150% !important;
    width: 190px
}

#AllFetchedSearch {
    width: 300px;
    height: 40px;
    border-left-style: none;
    border-right-style: none;
    border-bottom: 2px solid #000;
    border-top-style: none;
    text-align: right;
    margin-bottom: 8px;
    border-radius: 0;
    padding-right: 40px;
    background-position: calc(100% - 5px) center;
    background-image: url(Img/Icons/Tag.png);
    background-size: 30px auto;
    line-height: 40px;
    font-size: 16px;
    display: block;
    -webkit-box-shadow: 0 0 rgba(255, 255, 255, 0);
    box-shadow: 0 0 rgba(255, 255, 255, 0);
    margin-left: 20px;
    float: right;
    text-transform: capitalize;
    margin-top: 10px
}

.MarketChSelectButton,
.sortable-placeholder {
    -webkit-box-shadow: -2px 2px 3px 1px rgba(0, 0, 0, .1)
}

.StatusTD {
    background-size: auto 33px;
    background-clip: padding-box;
    background-position: center center;
    color: rgba(255, 255, 255, 0) !important;
    font-size: 0px !important;
    user-select: none !important;
    transition-duration: .1s
}

.StatusTD[status=New] {
    background-image: url(Img/Icons/Neww.png);
    background-size: 32px auto
}

.StatusTD[status=Waiting] {
    background-image: url(Img/Icons/menu.png);
    background-size: 20px auto
}

.StatusTD[status=Pending] {
    background-image: url(Img/Icons/Pending.png)
}

.StatusTD[status=Alert] {
    background-image: url(Img/Icons/alert.png);
    background-size: 30px auto
}

.StatusTD[status=Check] {
    background-image: url(Img/Icons/CheckTany.png);
    background-size: 30px auto
}

.StatusTD[status=Done] {
    background-image: url(Img/Icons/true2.png)
}

.StatusTD[status=Reviewed] {
    background-image: url(Img/Icons/Reviewed.png)
}

.StatusTD[status=Nice] {
    background-image: url(Img/Icons/star3.png)
}

.StatusTD[status=Gold] {
    background-image: url(Img/Icons/FreeAds.png)
}

.StatusTD[status=Warning] {
    background-image: url(Img/Icons/alert.png)
}

.StatusTD[status=Minus] {
    background-image: url(Img/Icons/Limit.png);
    background-size: 30px auto;
    filter: grayscale(1)
}

.StatusTD.Loading {
    background-size: auto 0
}

.EditLinkButton {
    display: inline-block;
    background-position: center 5px;
    width: 22px !important;
    height: 16px;
    background-image: url(Img/Icons/menu.png);
    float: right;
    background-size: 15px auto;
    transition-duration: .2s;
    border-radius: 50%
}

#SaveKeywordsButton,
.sortable-placeholder {
    background-position: center center;
    background-repeat: no-repeat;
    font-size: 20px;
    opacity: 0
}

.ItemRow.Active .EditLinkButton {
    background-image: url(Img/Icons/Menu-wht.png)
}

.sortable-placeholder {
    box-shadow: -2px 2px 3px 1px rgba(0, 0, 0, .1);
    display: table-row;
    text-align: right;
    line-height: 50px;
    transition: .1s;
    border-radius: 3px;
    border: 2px dashed #000;
    background-color: #839ab7;
    direction: rtl;
    background-image: url(Img/Icons/Pointer.png);
    background-size: 25px auto;
    width: 100%;
    height: 40px
}

#KeywordsShowDIV {
    position: fixed;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    -ms-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    z-index: 99;
    width: 88%;
    left: 6%;
    right: 6%;
    bottom: 0;
    height: 100%;
    background-color: rgba(255, 255, 255, .95);
    padding: 100px 40px 100px 100px;
    text-align: left;
    display: block
}

#CustomerAddressDiv.Active,
#ImagesShowDIV.Active,
#KeywordsShowDIV.Active,
#MarketChDiv.Active,
#PaperIframe.Active,
#UsersSelectBox.Active {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1)
}

#KeywordsForm {
    width: 100%;
    height: auto;
    text-align: center;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: flex-start;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 20px
}

#KeywordsForm input:not(#SaveKeywordsButton) {
    border-radius: 0;
    background-color: #fff;
    border-left-color: rgba(255, 255, 255, 0);
    border-right-color: rgba(255, 255, 255, 0);
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    border-top-color: rgba(255, 255, 255, 0);
    height: 50px;
    -webkit-box-shadow: 0 0 rgba(255, 255, 255, 0);
    box-shadow: 0 0 rgba(255, 255, 255, 0);
    width: 100%;
    display: block;
    font-weight: 700;
    font-size: 18px;
    text-align: left;
    padding: 8px 15px;
    margin-bottom: 10px
}

#KeywordsForm #DetailstextArea {
    border-radius: 0;
    border-color: rgba(255, 255, 255, 0);
    display: block;
    direction: ltr;
    padding: 10px 15px 15px;
    text-align: center;
    text-indent: 30px;
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) 10px;
    background-size: 25px auto;
    font-weight: 400;
    width: 100%;
    line-height: 30px;
    background-color: #fff;
    color: #1874e1;
    background-image: none;
    text-indent: 0;
    -webkit-box-shadow: 0 0 rgba(255, 255, 255, 0);
    box-shadow: 0 0 rgba(255, 255, 255, 0);
    border-bottom: 1px dashed #000;
    direction: ltr !important
}

#SaveKeywordsButton {
    color: #fff;
    width: 100%;
    display: block;
    font-weight: 700;
    padding-right: 15px;
    padding-left: 15px;
    height: 0;
    margin: 0;
    border-radius: 1px;
    background-color: #2bbf7c;
    pointer-events: none;
    background-size: auto 20px
}

#SaveKeywordsButton.Active {
    height: 50px;
    padding-top: 8px;
    padding-bottom: 8px;
    opacity: 1;
    pointer-events: auto
}

#SaveKeywordsButton.Loading {
    background-color: #ffbe00;
    color: rgba(255, 255, 255, 0);
    background-image: url(Img/Icons/Menu-White.png);
    background-size: 20px auto
}

#SaveKeywordsButton.Done {
    background-color: #2bbf7c;
    color: rgba(255, 255, 255, 0);
    background-image: url(Img/Icons/Checked.png)
}

#SaveKeywordsButton.Warning {
    background-color: #f87a7a;
    color: rgba(255, 255, 255, 0);
    background-image: url(../Imgs/Icons/cancel.png)
}

.CheckListUL {
    margin: 0;
    display: inline-block;
    vertical-align: top;
    padding: 20px 0 0 10px;
    border-left: thin dashed #c5c5c5;
    width: calc(100% - 0px)
}

#LinksDiv,
#SearchBy,
.fb-like,
form span,
td {
    vertical-align: middle
}

.CheckListUL:first-of-type {
    border-left: none
}

.ToChooseLi {
    text-align: left;
    font-size: 18px;
    margin-bottom: 5px;
    color: #000;
    margin-right: 20px;
    transition-duration: .2s;
    transform-origin: left;
    line-height: 1;
    padding-left: 36px;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 30px auto;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 100%
}

.ToChooseLi:hover {
    color: #2766b0
}

.ToChooseLi.UserList {
    background-size: 36px auto;
    padding-left: 44px
}

.ToChooseLi h2 {
    margin: 0;
    width: calc(100% - 60px)
}

.ToChooseLi.Ninja {
    color: #000;
    cursor: default;
    background-image: url("Img/Icons/ninjaMan.png")
}

.ToChooseLi .count,
.ToChooseLi.PagesCounter {
    background-image: url(Img/Icons/Marketing.png)
}

.ToChooseLi .count {
    padding-left: 26px;
    background-size: 20px auto;
    background-repeat: no-repeat;
    background-position: left center;
    float: right
}

.ToChooseLi.PagesCounter h2 {
    text-align: left;
    font-size: 16px;
    font-weight: 900;
    margin: 0;
    padding: 0;
    line-height: 1;
    display: inline-block;
    text-transform: capitalize
}

.ToChooseLi.PagesCounter {
    background-size: 28px auto !important
}

.ToChooseLi.PagesCounter.facebook {
    background-image: url(Img/Icons/Social/facebook.png)
}

.ToChooseLi.PagesCounter.google {
    background-image: url("Img/Icons/Social/Google.png");
    background-size: 30px auto !important
}

.SectionTitle {
    font-size: 22px;
    color: #000;
    padding-left: 50px;
    background-image: url(Img/Icons/falling-star.png);
    background-repeat: no-repeat;
    background-position: left 2px;
    background-size: 40px auto;
    display: flow-root;
    padding-top: 3px;
    margin-left: 0;
    padding-bottom: 3px;
    margin-top: 0;
    margin-bottom: 30px;
    width: 100%;
    text-align: left;
    line-height: 1
}

.TableRow,
.TableRow a,
.dribbble {
    display: inline-block
}

.TableRow,
td {
    color: #000;
    text-transform: capitalize;
    text-align: left
}

.SectionTitle span {
    color: #fabe2c;
    font-size: 14px
}

.SectionTitle.BigyTitle {
    background-image: url(Img/Icons/Edrab-Nar.png);
    margin-left: -1px;
    background-size: 52px auto;
    margin-top: 0;
    padding-top: 40px;
    padding-bottom: 0;
    font-size: 30px;
    background-position: calc(50% + 5px) top;
    text-align: center
}

.TableRow {
    -webkit-box-shadow: -1px 1px 2px 1px rgb(255 79 0 / 10%);
    box-shadow: -1px 1px 2px 1px rgb(255 79 0 / 10%);
    padding: 7px 15px 7px 30px;
    margin: 5px auto 0;
    transition: .2s;
    border-radius: 8px;
    border: 1px solid rgba(200, 0, 255, 0);
    font-weight: 700;
    -webkit-box-shadow: -1px 1px 2px 1px rgba(0, 100, 255, .1);
    box-shadow: -1px 1px 2px 1px rgba(0, 100, 255, .1);
    width: calc(100% - 0px);
    line-height: 15px;
    position: relative
}

.AddNexes,
.DeleteFollowersRow {
    background-repeat: no-repeat;
    display: block;
    transition-duration: .2s
}

.FollowersNexes,
.dribbble {
    text-align: right;
    float: right
}

.TableRow:hover {
    border: 1px solid rgba(255, 79, 0, .2);
    -webkit-box-shadow: -2px 2px 3px 1px rgba(255, 79, 0, .13);
    box-shadow: -2px 2px 3px 1px rgba(255, 79, 0, .13)
}

.TableRow:hover .DeleteFollowersRow {
    pointer-events: auto;
    opacity: 1
}

.TableRow a {
    padding-right: 8px;
    color: #007cff;
    max-width: 480px;
    overflow: hidden;
    max-height: 25px;
    margin-bottom: -6px;
    font-size: 16px;
    line-height: 30px;
    max-width: calc(100% - 65px)
}

.TableRow a:hover {
    color: #ffb600
}

.DeleteFollowersRow {
    opacity: 0;
    pointer-events: 0;
    position: absolute;
    left: -16px;
    width: 30px;
    height: 30px;
    background-image: url(Img/Icons/Minus.png);
    background-position: center center;
    background-size: 15px auto;
    top: calc(50% - 15px)
}

#AddCustomerBigDiv,
#CustomerAddressDiv,
#IconsDiv,
#MarketChDiv,
#PaperIframe,
#ProductsSelectBox,
.NoHover,
.ParagraphOnNav p:after,
.SavedChecked,
.SocialMediaHead,
input[type=date]:after {
    pointer-events: none
}

#AddCustomerBigDiv,
#Footer5,
#IconsDiv,
#MarketChDiv,
.SavedChecked,
.dribbble {
    position: fixed
}

.DeleteFollowersRow:hover {
    transform: scale(1.1);
    filter: grayscale(0);
    background-size: 20px auto
}

.FollowersNexes {
    background-image: url("Img/Icons/User.png");
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 30px;
    color: #000;
    background-size: 20px auto;
    line-height: 30px;
    height: 30px;
    font-weight: 700
}

.dribbble,
.dribbble:hover {
    color: rgba(255, 255, 255, 0)
}

.AddNexes {
    width: 40px;
    border-radius: 50%;
    height: 40px;
    background-image: url(Img/Icons/ADD.png);
    background-position: center center;
    background-size: 30px auto;
    margin: -90px auto 20px
}

.fb-like,
.fb-page {
    display: inline-block !important
}

.fb-like {
    margin-left: 9px;
    margin-top: 18px !important;
    margin-bottom: 12px
}

.fb-page {
    width: 52px !important;
    margin-top: auto !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
    direction: ltr !important;
    height: 52px !important;
    padding-right: 0 !important;
    border-radius: 50% !important;
    -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .09) !important;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, .09) !important;
    transform: scale(1) !important;
    background-image: url(Img/loader.GIF) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 20px auto !important;
    transition-duration: .2s !important;
    border: 1px solid #fff !important;
    vertical-align: middle !important
}

.First,
table {
    overflow: hidden
}

table,
td {
    box-shadow: 0 0 transparent
}

.AddCustomerForm input,
.DisabledShow,
.NewCustomerTitle,
.dribbble {
    background-repeat: no-repeat
}

#PaperIframe,
.dribbble {
    transition-duration: .3s
}

.fb-page:hover {
    border: 1px solid #a4d0ff !important
}

.fb-like.Hidden,
.fb-page.Hidden {
    display: none !important
}

.fb_iframe_widget span {
    margin: -10px 0 0 -10px !important
}

.dribbble {
    padding-right: 0;
    width: 30px;
    background-size: contain;
    background-position: right center;
    background-image: url("Img/Icons/Like4Like.png");
    height: 50px;
    font-size: 0px;
    top: 55px;
    right: 40px;
    transform-origin: center center
}

.DisabledShow,
.Hovery {
    transition-duration: .2s
}

.First th img,
.SocialMediaHead {
    width: auto;
    height: auto;
    display: inline-block
}

.SocialMediaHead {
    max-width: 800px
}

.DisabledShow {
    background-color: #fff;
    background-position: 14px center;
    background-size: 22px auto;
    border-radius: 16px;
    padding: 10px 10px 10px 45px;
    border: 1px solid rgba(0, 0, 0, .1);
    background-image: url(Img/Icons/Limit.png);
    margin-top: 25px;
    margin-bottom: 25px;
    display: inline-block;
    width: auto;
    font-size: 14px
}

.DisabledShow.Active {
    background-color: #212121;
    color: #fff
}

::-webkit-scrollbar {
    width: 5px;
    background: #f3faff
}

::-webkit-scrollbar-track {
    border-radius: 0;
    border: 0 solid #c8c8c8
}

.First,
.First th {
    border-bottom: 1px solid rgba(0, 0, 0, .09)
}

::-webkit-scrollbar-thumb {
    border-radius: 0;
    background-color: #14222a;
    cursor: pointer
}

::-webkit-scrollbar-thumb:active {
    background-color: #1e90ff
}

input:-webkit-autofill,
select:-webkit-autofill,
textarea:-webkit-autofill {
    background-color: #f1f1f1;
    background-image: none;
    color: #134573
}



.First th,
tr {
    cursor: pointer
}

td:hover {
    background-color: rgba(0, 0, 0, .05)
}

.SmallHeigPad td,
.SmallHeigPad th {
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 15px !important;
    padding-left: 15px !important
}

tr {
    border: 1px solid transparent;
    padding: 10px 5px;
    border-radius: 8px;
    height: 40px
}

th:hover,
tr:hover {
    background-color: rgba(0, 0, 0, .05) !important
}

.First {
    font-weight: 700;
    color: #103b6f;
    font-size: 22px;
    text-transform: uppercase
}

#MarketingInput,
.ActionHeadLine,
.CustomerKindBar,
.MarketChItem,
.ReviewAddedBy,
.TrueOption {
    text-transform: capitalize
}

.First th {
    background-color: rgba(255, 255, 255, 0);
    color: #000;
    border-left: thin solid rgba(255, 255, 255, .11);
    border-right: thin solid rgba(255, 255, 255, .11);
    border-top: thin solid rgba(255, 255, 255, .11);
    text-align: left;
    font-size: 12px;
    padding: 15px 20px 10px
}

.First th.Active {
    color: #009bff
}

.First th:first-child {
    border-top-left-radius: 8px
}

.First th:last-child {
    border-top-right-radius: 8px
}

.First th img {
    max-height: 20px;
    vertical-align: bottom;
    margin-right: 8px
}

.ItemRow {
    background-color: #fff !important
}

.ItemRow.Active td {
    background-color: #326598 !important;
    color: #fff
}

.ItemRow.Active td a {
    color: #fff !important
}

.ItemRow.Active td:focus {
    color: #00a3ff !important
}

.ItemRow td:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px
}

.ItemRow td:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px
}

.ItemRow td span {
    margin: 5px 0;
    display: block
}

.Edity {
    cursor: text
}

.Hovery,
.Pointer,
.gotocustomer {
    cursor: pointer
}

.Edity:focus {
    color: #024596
}

.Eighty {
    font-size: 80% !important;
    margin: 2px 0 0 !important
}

.SmallSquareTD {
    width: 50px;
    text-align: center !important
}

.SmallSquareTD img {
    margin: 4px !important
}

.Bold {
    font-weight: 700 !important;
    margin: 0 !important
}

.DeleteCircleBut {
    width: 22px;
    height: 22px;
    display: inline-block
}

.DeleteCircleBut:hover {
    filter: grayscale(0)
}

.ItemRow td[kind=Followers],
.ItemRow td[kind=Power] {
    font-weight: 700;
    font-size: 22px;
    width: 100px
}

.ItemRow[status=Minus] {
    background-color: #ebebeb !important
}

.ItemRow td[kind=Power].Plus {
    color: #02a028
}

.ItemRow td[kind=Power].Minus {
    color: #a00101
}

.ItemRow td[kind=Power].TopPower {
    background-image: url(Img/Icons/light.svg);
    background-repeat: no-repeat;
    background-position: -27px center;
    background-size: auto 60px
}

.Fasel {
    display: block;
    border-bottom: 1px solid rgba(0, 0, 0, .11);
    width: 100%;
    margin: 0 12px 20px 5px
}

#CompassPopUp .Fasel {
    width: calc(90% - 24px);
    border-bottom: 2px dashed rgba(0, 0, 0, .11)
}

#FinalAddAction[disabled=disabled],
#FinalEditCustomer[disabled=disabled] {
    background-color: #2a2a2a;
    color: #fff
}

#FinalAddAction[disabled=disabled]:hover,
#FinalEditCustomer[disabled=disabled]:hover {
    background-color: #9a1a1d;
    color: #fff
}

#FetchCustomerBigDiv {
    cursor: default !important
}

.DeletingNow {
    width: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 10px !important;
    opacity: 0 !important;
    transform: scale(0) !important;
    transition-duration: .3s !important
}

#SearchBy,
#logo {
    width: auto;
    height: auto
}

#AddCustomerBigDiv.Active {
    opacity: 1;
    pointer-events: auto;
    border-radius: 0;
    transform: scale(1)
}

.AddCustomerForm input {
    background-size: 25px auto;
    background-position: 15px center;
    padding-left: 50px
}

.NewCustomerTitle {
    text-align: center;
    font-size: 40px;
    display: block;
    margin: 100px auto 20px;
    background-image: url(Img/Icons/customers-Add.png);
    background-position: center top;
    padding-right: 10px;
    width: auto;
    padding-top: 90px;
    padding-left: 10px;
    background-size: 80px auto
}

.MarketChItem,
.MarketChSelectButton {
    margin: 10px;
    text-align: left;
    background-size: 25px auto;
    background-repeat: no-repeat
}

.MarketChSelectButton {
    box-shadow: -2px 2px 3px 1px rgba(0, 0, 0, .1);
    transition: .1s;
    border-radius: 3px;
    border: 1px solid rgba(200, 0, 255, 0);
    font-weight: 700;
    color: #000;
    background-color: #fff;
    background-position: 15px center;
    background-image: url(Img/Icons/Marketing.png);
    padding: 15px 60px 14px 50px;
    cursor: pointer;
    height: auto !important
}

#MarketChDiv {
    background-color: #fff;
    opacity: 0;
    height: 100%;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    flex-wrap: wrap;
    padding: 150px;
    align-items: flex-start;
    align-content: flex-start;
    width: 100%;
    min-height: 100%;
    flex-wrap: wrap;
    margin: 0 auto;
    border: dashed rgba(187, 187, 187, .28)
}

.MarketChItem,
OPTION,
input,
select,
textarea {
    border-radius: 3px;
    font-weight: 700;
    display: inline-block
}

#MarketingInput {
    color: #221f1f;
    border-bottom: 2px solid rgba(0, 0, 0, .36);
    text-align: center;
    margin: 0 0 25px;
    border-radius: 15px;
    background-color: #f8f8f8;
    border-style: none;
    font-size: 26px;
    height: 80px;
    direction: ltr;
    width: 90%
}

.MarketChItem {
    -webkit-box-shadow: -2px 2px 3px 1px rgba(0, 0, 0, .1);
    box-shadow: -2px 2px 3px 1px rgba(0, 0, 0, .1);
    padding: 15px 60px 14px 80px;
    line-height: 25px;
    transition: .1s;
    cursor: pointer;
    border: 1px solid rgba(200, 0, 255, 0);
    float: right;
    color: #000;
    background-position: 22px center;
    width: 20%;
    background-color: #fff;
    font-size: 20px
}

#SearchBy,
.Choices {
    margin-right: 5px;
    cursor: pointer
}

#AddButton,
#load_more_button,
.SavedChecked,
.TrueOption,
label {
    background-size: contain
}

.MarketChItem[LinkTybe=google] {
    background-image: url("Img/Icons/Social/Google.png")
}

.MarketChItem[LinkTybe=website] {
    background-image: url("Img/Icons/Web.png")
}

.MarketChItem[LinkTybe=friend] {
    background-image: url("Img/Icons/heart.png")
}

.MarketChItem[LinkTybe=old] {
    background-image: url("Img/Icons/OlD.png")
}

.MarketChItem[LinkTybe=whatsapp] {
    background-image: url("Img/Icons/Social/whatsapp.svg")
}

.MarketChItem[LinkTybe=UN] {
    background-image: url("Img/Icons/Ask2.png")
}

#CloseProductsSelectBox:hover,
#CloseUsersSelectBox:hover,
.CloseDatePickerDiv:hover,
.MarketChItem:hover,
.NavAdddedByInput:hover {
    transform: scale(1.05)
}

#AddCustomerBigDiv {
    opacity: 0;
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    -ms-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    z-index: 51;
    width: calc(75% - 0px);
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    display: inline-block;
    background-color: #fff;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    -webkit-box-shadow: -7px 0 14px rgba(0, 0, 0, .19);
    box-shadow: -7px 0 14px rgba(0, 0, 0, .19);
    padding-bottom: 0;
    padding-top: 50px;
    transform-origin: right bottom
}

#AddCustomerBigDivContent {
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    background-color: #fff
}

.AddCustomerForm {
    display: block;
    margin-bottom: 0
}

#customerdiv {
    padding-right: 0;
    min-height: calc(100% - 200px)
}

.whatactionChoicesDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    margin-left: 0
}

.Choices {
    margin-left: 5px;
    padding: 5px;
    opacity: .5;
    transform: scale(.85);
    transition: .2s
}

.Choices h4 {
    margin-top: 8px;
    margin-bottom: 0
}

.Choices.Active,
.Choices:hover {
    opacity: 1;
    transform: scale(1)
}

#logo {
    max-width: 100px;
    display: inline-block
}

#SearchBy {
    display: inline-block;
    max-height: 32px
}

#load_more_button,
.ItemSelectButton .TableRowImg,
.MenuIcon,
.NotiDiv,
.NotiDiv p,
.spinner {
    vertical-align: top
}

.ActionHeadLine {
    margin: 0 0 10px;
    text-align: center;
    font-size: 30px;
    color: #000
}

.CustomerKindBar,
.CustomerKindBar.OnNav,
.ParagraphOnNav p {
    margin-right: auto;
    margin-left: auto
}

.TrueOption {
    font-size: 75%;
    background-image: url(../Img/Icons/true.png);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 22px;
    padding-right: 0
}

.SavedChecked,
.SavedChecked.Active {
    background-image: url(../Img/Icons/Saving2.gif)
}

.ParagraphOnNav p {
    font-size: 18px;
    direction: rtl;
    color: #002035;
    padding: 30px 40px 55px;
    border-radius: 7px;
    margin-bottom: 30px;
    position: relative;
    border: 1px solid rgba(0, 73, 126, .13);
    background-color: #ebf3ff;
    -webkit-box-shadow: 0 5px rgba(0, 73, 126, .13);
    box-shadow: 0 5px rgba(0, 73, 126, .13);
    text-align: right
}

#Footer5,
.CheckSpan,
.footer p,
OPTION,
input,
select,
textarea {
    text-align: left
}

.ParagraphOnNav p:after {
    bottom: 100%;
    right: 7%;
    border: 12px solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    border-bottom-color: rgba(0, 73, 126, .13);
    margin-left: -10px
}

.CustomerRecord {
    display: flex;
    height: 150px;
    padding-left: 15px;
    padding-right: 15px;
    marginre-bottom: 20px;
    margin-top: 20px;
    -webkit-box-shadow: -3px 3px 7px rgba(0, 0, 0, .1);
    box-shadow: -3px 3px 7px rgba(0, 0, 0, .1);
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid rgba(123, 123, 123, .25)
}

.SavedChecked {
    left: 44px;
    bottom: -5px;
    background-repeat: no-repeat;
    background-position: center center;
    width: 72px;
    height: 72px;
    display: block;
    opacity: 0;
    transition: 2.7s cubic-bezier(.25, 1, .5, 1);
    color: rgba(255, 255, 255, 0);
    cursor: progress;
    z-index: 99999;
    filter: hue-rotate(24deg);
    border-radius: 50%;
    mix-blend-mode: multiply
}

.SavedChecked.Active {
    opacity: 1;
    filter: hue-rotate(-24deg);
    transition-delay: 720ms
}

input[type=date]:after {
    content: "\25BC";
    right: 10px;
    top: 10px;
    position: absolute;
    transform: scaleY(.8);
    content: "\25BC";
    color: #555;
    padding: 0 5px
}

.animation_image_Notes .spinner>div,
.spinner>div {
    background-color: #20232a !important
}

#AddButton,
#SelectItemSearch,
.CustomerKindBar,
input[type=submit] {
    background-color: #fff
}

#PaperIframe {
    width: 210mm;
    height: 297mm;
    background: #fff;
    display: inline-block;
    border: 1px solid rgba(140, 140, 140, .21);
    -webkit-box-shadow: 3px 3px 1px rgba(99, 99, 99, .22);
    border-radius: 10px;
    box-shadow: 3px 3px 1px rgba(99, 99, 99, .22);
    margin-top: 0;
    margin-bottom: 0;
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    overflow: hidden;
    position: absolute;
    top: 150px;
    left: calc(50% - 105mm);
    opacity: 0;
    transform: scale(0);
    z-index: 1001
}

#CustomerAddressDiv {
    opacity: 0;
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    -ms-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    background-color: rgba(237, 245, 255, .98);
    z-index: 1001;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    position: fixed;
    padding: 10px;
    flex-wrap: wrap;
    height: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    cursor: pointer;
    color: #000
}

#CustomerAddressDiv .CustomerDetailsDivs {
    display: inline-block;
    margin-top: 15px;
    margin-bottom: 0;
    border-right: 0px solid rgba(0, 0, 0, .12) !important;
    text-align: right;
    background-color: #fff;
    -webkit-box-shadow: 3px 2px 3px rgba(0, 0, 0, .08);
    box-shadow: 3px 2px 3px rgba(0, 0, 0, .08);
    border-radius: 10px;
    padding: 35px 50px;
    transform: scale(1.2)
}

#CustomerAddressDiv .AccounName,
#CustomerAddressDiv .AccountDetails,
#CustomerAddressDiv .customerAddress,
#CustomerAddressDiv .customerArea {
    color: #000;
    max-height: 96%;
    cursor: default;
    background-position: right top;
    padding-left: 0;
    padding-right: 35px;
    text-align: right;
    height: auto;
    margin-top: 5px;
    padding-top: 0;
    vertical-align: top;
    min-height: 30px;
    white-space: pre-wrap;
    overflow: auto;
    text-overflow: inherit
}

#CustomerAddressDiv .AccounName {
    margin-right: 0;
    padding-right: 0;
    font-size: 24px
}

#CustomerAddressDiv .AccountInfooooooo {
    line-height: 35px;
    font-weight: 700;
    font-size: 16px;
    text-align: right;
    margin: 0
}

#CustomerAddressDiv .AccountInfooooooo:nth-child(3) {
    display: none !important;
    color: #fff
}

#CustomerAddressDiv .ArrabicAddress {
    background-position: right 5px;
    line-height: 28px
}

.ActionProductBar .ActionComment.AskComment {
    background-image: url(Img/Ask2.png)
}

.AskComment:focus,
.AskComment:hover {
    color: #2c55c4
}

input[type=checkbox],
input[type=radio] {
    height: 25px;
    width: 25px;
    -webkit-box-shadow: inset 0 0 rgba(0, 0, 0, .25);
    box-shadow: inset 0 0 rgba(0, 0, 0, .25);
    padding: 0;
    margin-top: 8px
}



.CustomerKindBar {
    width: 100%;
    height: 42px;
    margin-top: 10px !important;
    margin-bottom: 10px;
    border-radius: 16px;
    text-align: center;
    display: flex !important;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, .16);
    transition-duration: .2s;
    direction: rtl;
    flex-wrap: wrap;
    overflow: hidden;
    min-height: 42px;
    padding: 0;
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, .11);
    box-shadow: 0 2px 2px rgba(0, 0, 0, .11)
}

#header h1,
#navigation a,
.NoThing,
.footer p {
    text-transform: uppercase
}

#wrapper,
.panel {
    min-height: 100%
}

.ChooseBarItem {
    transition: .2s;
    border-bottom-style: none
}

#Footer5,
.CategoryHeadAndText {
    -webkit-transition: .2s;
    -o-transition: .2s
}

.ChooseBarItem.Active {
    border-left: none;
    border-right: none;
    border-top: none
}

.CustomerKindBar:not(.ChooseBarWarning) .ChooseBarItem:not(.Active) {
    flex-grow: 0.5;
    border: none;
    color: rgba(0, 0, 0, .2)
}

.CustomerKindBar:not(.ChooseBarWarning) .ChooseBarItem:not(.Active):hover {
    flex-grow: 0.5;
    border: none;
    color: rgba(0, 79, 187, .77)
}

.ChooseBarWarning .ChooseBarItem:not(.Active) {
    flex-grow: 1;
    border: thin solid rgba(0, 0, 0, .08)
}

.CustomerKindBar.OnNav {
    width: 300px;
    height: 40px;
    border-radius: 8px;
    min-height: 40px;
    margin-top: -35px !important
}

.CustomerKindBar.OnNav .ChooseBarItem {
    font-size: 14px;
    line-height: 40px;
    height: 40px
}

a {
    padding: 0
}

.Arabic {
    font-family: Calibri, sans-serif
}

.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
    color: #d41c15;
    font-size: 18px
}

input[type=submit].Form {
    margin-left: 120px
}

.Hidecode {
    color: #fff;
    cursor: not-allowed
}

.Hidecode:hover {
    color: #1a1a1a;
    cursor: not-allowed
}

#Footer5 {
    right: 50%;
    display: block;
    bottom: -100px;
    margin: 0;
    z-index: 9999;
    transition: .2s;
    width: 50%;
    padding: 80px 0 0;
    left: 30px
}

#header,
.panel {
    position: absolute
}

.footer p {
    font: lighter 11px Calibri;
    color: #111;
    letter-spacing: 0;
    padding: 10px;
    display: inline-block;
    margin-top: -20px
}

.NoHover {
    bottom: 0
}



input[type=submit] {
    font-family: Calibri;
    text-align: center;
    color: #0f0f0f;
    font-weight: 400;
    box-shadow: -3px 3px 14px rgba(0, 0, 0, .12);
    margin-top: 15px;
    -webkit-box-shadow: -3px 3px 14px rgba(0, 0, 0, .12);
    -webkit-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: .1s;
    -o-transition-duration: .1s;
    transition-duration: .1s;
    border-radius: 3px;
    border-style: none;
    font-size: 17px;
    margin-left: 100px;
    width: 280px;
    cursor: pointer;
    height: 42px
}

input[type=submit]:hover {
    -webkit-box-shadow: -1px 1px 4px rgba(14, 14, 14, .13);
    margin-top: 17px;
    box-shadow: -1px 1px 4px rgba(14, 14, 14, .13);
    color: #007cff;
    margin-left: 98px
}

input[type=submit]:active {
    -webkit-box-shadow: 0 0 2px rgba(14, 14, 14, .13);
    margin-top: 18px;
    box-shadow: 0 0 2px rgba(14, 14, 14, .13);
    color: #007cff;
    margin-left: 97px
}



input[type=file] {
    height: 35px;
    padding-left: 0;
    direction: ltr
}

textarea {
    /* height: 200px; */
    resize: vertical;
    padding-top: 8px
}

#header {
    z-index: 2000;
    top: 50px
}

#header h1 {
    font-size: 30px;
    font-weight: 400;
    color: rgba(255, 255, 255, .9);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
    padding: 20px;
    background: #000
}

#navigation {
    display: block;
    z-index: 3
}

#navigation a {
    color: #444;
    display: block;
    background: rgba(255, 255, 255, .9);
    line-height: 50px;
    padding: 0 10px;
    margin-bottom: 6px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, .2);
    font-size: 15px
}

#navigation a:hover {
    background: #ddd
}

.panel {
    width: 98%;
    background-color: #000;
    box-shadow: 4px -4px 4px rgba(0, 0, 0, .2);
    margin-left: -102%;
    z-index: 2;
    -webkit-transition: .6s ease-in-out;
    -moz-transition: .6s ease-in-out;
    -o-transition: .6s ease-in-out;
    -ms-transition: .6s ease-in-out;
    transition: .6s ease-in-out
}

#LinksDiv,
#wrapper,
.DeleteActionDiv,
.IconSelect {
    position: relative
}

#AddAction,
#LinksDiv,
.NoThing,
.reveal-if-active2,
.reveal-if-active3 {
    margin-right: auto;
    margin-left: auto
}

#MainContent_Panel1,
#MainContent_Panel3,
#MainContent_Panel4 {
    padding-left: 15%;
    padding-right: 15%;
    text-align: left
}

#NavNavNav {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
    flex-direction: column;
    align-items: center
}

#NavNavNav li {
    padding: 0;
    margin: 5px;
    display: inline-block
}

.NoThing {
    font-weight: 700;
    height: 100px;
    font-size: 45px;
    color: #d80000;
    padding-top: 22px;
    margin-top: 30px;
    -webkit-box-shadow: 0 0 10px 0 #ff0004;
    box-shadow: 0 0 10px 0 #ff0004;
    letter-spacing: -3px;
    width: 80%;
    display: block;
    text-align: center
}

#FinalAddAction,
.ActionDiv {
    -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, .33)
}

.CheckMobile a,
.IconSelect {
    text-align: left;
    font-size: 16px
}

.reveal-if-active {
    opacity: 0;
    max-height: 0;
    width: 0;
    overflow: hidden;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition: .5s;
    transition: .5s;
    -o-transition: .5s;
    display: flex;
    flex-direction: row;
    justify-content: center
}

#IconsDiv,
.calldiv {
    justify-content: center
}

.reveal-if-active2,
.reveal-if-active3 {
    opacity: 1;
    max-height: 300px;
    -webkit-transform: scale(1);
    transform: scale(1);
    overflow: visible;
    -webkit-transition: .5s;
    transition: .5s;
    -o-transition: .5s
}

input[type=checkbox]:checked~.reveal-if-active,
input[type=radio]:checked~.reveal-if-active {
    opacity: 1;
    max-height: 300px;
    -webkit-transform: scale(1);
    transform: scale(1);
    overflow: visible;
    margin-right: auto;
    margin-left: auto
}

input[type=checkbox]:checked~.reveal-if-active2,
input[type=radio]:checked~.reveal-if-active2 {
    opacity: 0;
    width: 0;
    max-height: 0;
    overflow: hidden;
    -webkit-transform: scale(0);
    transform: scale(0)
}

input[type=checkbox]:checked#Status~.reveal-if-active3 {
    opacity: 0;
    width: 0;
    max-height: 0;
    overflow: hidden;
    -webkit-transform: scale(0);
    transform: scale(0)
}


input[type=radio] {
    width: 25px;
    height: 25px;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 20px
}

.calldiv {
    display: flex;
    align-items: center;
    margin-top: 0;
    margin-bottom: 10px
}

.error {
    background-color: rgba(255, 0, 4, .75)
}

.ActionDiv {
    background-image: url(Img/Cond2.png);
    background-repeat: no-repeat;
    background-position: -100px 30px;
    padding: 25px 0;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .33);
    transition: .6s;
    -webkit-transition: .6s;
    -moz-transition: .6s;
    -o-transition: .6s;
    overflow: hidden;
    background-size: 250px auto
}

.CheckMobile a {
    color: #db1215;
    font-weight: 700;
    margin: 0;
    padding: 0;
    border-bottom-color: #df1d20
}

.NavAdddedByInput {
    background-color: rgba(255, 255, 255, 0);
    -webkit-box-shadow: 0 0 rgb(255 255 255 / 0%);
    box-shadow: 0 0 rgb(255 255 255 / 0%);
    border-style: none;
    background-position: left top;
    background-repeat: no-repeat;
    background-image: url(Img/Icons/User2.png);
    padding-left: 34px;
    margin: 10px 0 0 -10px;
    background-size: 26px auto;
    padding-right: 7px;
    display: inline-block;
    width: auto;
    line-height: 26px;
    text-transform: capitalize;
    cursor: pointer;
    transition: .1s;
    font-weight: 400;
    height: auto
}

.Category .SubCategories,
.IconSelect {
    background-image: url(../Img/Unknow.png);
    background-repeat: no-repeat
}

.Category,
.IconSelect {
    margin-right: 10px;
    margin-left: 10px
}

#FinalAddAction,
#load_more_button,
.Category .SubCategories,
.IconSelect {
    text-transform: uppercase
}

#FinalAddAction {
    background-color: rgba(58, 255, 0, .48);
    box-shadow: 0 2px 3px rgba(0, 0, 0, .33);
    height: 100px;
    font-weight: 700;
    font-size: 30px;
    margin-left: 0;
    width: 100%;
    margin-top: 0;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    margin-bottom: 0
}

#FinalAddAction:hover {
    background-color: rgba(100, 255, 243, .48)
}

#AddActionDiv {
    -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, .33);
    box-shadow: 0 2px 3px rgba(0, 0, 0, .33);
    display: block;
    height: 80px;
    background-color: rgba(255, 255, 255, .5);
    padding-top: 15px;
    padding-bottom: 15px;
    cursor: pointer
}

#AddAction,
.DeleteActionDiv img {
    width: auto;
    height: auto;
    display: block
}

#AddActionDiv:hover #AddAction,
.DeleteActionDiv:hover img,
.ProductSelectButton:hover,
.UserSelectButton.ToSelect:hover {
    transform: scale(1)
}

#AddAction {
    max-width: 50px;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s;
    transform: scale(.9)
}

.DeleteActionDiv {
    top: 5px;
    display: block;
    left: calc(100% - 70px);
    cursor: pointer
}

.DeleteActionDiv img {
    position: relative;
    top: 0;
    right: 0;
    max-width: 40px;
    transition: .2s;
    -webkit-transition: .2s;
    -moz-transition: .2s;
    -o-transition: .2s;
    transform: scale(.8)
}

.IconSelect {
    height: 70px;
    cursor: pointer;
    background-position: 10px center;
    background-size: 50px auto;
    width: 280px;
    padding: 3px 20px 0 90px;
    margin-bottom: 15px;
    color: #212121;
    display: inline-block;
    background-color: #f5f5f5;
    -webkit-box-shadow: inset -2px 2px 5px rgba(0, 0, 0, .11);
    border-radius: 4px;
    box-shadow: inset -2px 2px 5px rgba(0, 0, 0, .11);
    border: 1px solid #dbdbdb;
    font-weight: 700;
    direction: ltr
}

#AddButton,
#ProductsSelectBox,
#navmenu,
.CategoryHeadAndText {
    background-position: center center
}

#IconsDiv {
    background-color: rgba(255, 255, 255, .89);
    opacity: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    transform: scale(.2);
    flex-wrap: wrap;
    padding: 50px;
    overflow: auto
}

.center {
    justify-content: center;
    align-items: center
}

.column {
    flex-direction: column
}

.Category {
    justify-content: flex-start;
    padding-top: 15px;
    min-width: 200px
}

.CategoryHead {
    width: auto;
    height: auto;
    /* max-width: 70px; */
    cursor: pointer
}

.CategoryHead:hover {
    /* max-width: 75px */
}

.CategoryHeadAndText {
    margin: 0;
    cursor: pointer;
    width: 70px;
    height: 70px;
    background-repeat: no-repeat;
    background-size: 70px auto;
    transition: .2s
}

.CategoryHeadAndText:hover {
    width: 75px;
    height: 75px;
    background-size: 75px auto
}

.Category h3 {
    margin: 0;
    padding: 5px;
    line-height: 20px;
    cursor: pointer
}

.Category .SubCategories {
    background-position: 0 center;
    background-size: 25px auto;
    height: 40px;
    text-align: center;
    padding-left: 35px;
    padding-top: 10px;
    font-weight: 700;
    letter-spacing: -1px;
    color: #414141;
    font-size: 20px
}

#MakePhotoCardCover:hover,
.Category .SubCategories:hover {
    color: #006cff
}

#load_more_button {
    font-weight: 700;
    font-size: 26px;
    font-family: Calibri;
    margin: 25px auto 15px;
    border: 0 rgba(255, 255, 255, 0);
    cursor: pointer;
    text-align: center;
    color: #000;
    background-repeat: no-repeat;
    background-position: center 90%;
    padding: 30px;
    letter-spacing: -1px;
    background-color: rgba(0, 0, 0, 0);
    -webkit-transition: .2s;
    -o-transition: .2s;
    transition: .2s
}

#load_more_button:hover {
    color: #0092e7;
    -webkit-box-shadow: 0 0 transparent !important;
    box-shadow: 0 0 transparent !important
}

#load_more_button[disabled=disabled] {
    display: none;
    color: transparent;
    position: absolute;
    top: -150px;
    left: -9px;
    text-shadow: 0 0 rgba(255, 255, 255, 0);
    background: 0 0
}

.ActiveLink,
.ActiveLink:hover,
.LinksA:hover {
    background-image: none
}

.spinner {
    margin: -10px 0 25px;
    mqrgin-top: 15px;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center
}

.LinksA,
.MenuIcon,
.NotiDiv,
.NotiDiv p,
.spinner>div {
    display: inline-block
}

.spinner>div {
    width: 16px;
    height: 16px;
    border-radius: 100%;
    -webkit-animation: 1.7s ease-in-out infinite both sk-bouncedelay;
    animation: 1.7s ease-in-out infinite both sk-bouncedelay;
    margin-right: 5px;
    -webkit-box-shadow: 3px 3px 7px rgba(0, 0, 0, .16);
    box-shadow: 3px 3px 7px rgba(0, 0, 0, .16);
    background-color: #c0d3ff
}

.animation_image_Notes .spinner>div {
    background-color: #ffc600
}

.spinner .spinner__item1 {
    -webkit-animation-delay: -.6s;
    animation-delay: -.6s
}

.spinner .spinner__item2 {
    -webkit-animation-delay: -.4s;
    animation-delay: -.4s
}

.spinner .spinner__item3 {
    -webkit-animation-delay: -.2s;
    animation-delay: -.2s
}

@-webkit-keyframes sk-bouncedelay {

    0%,
    100%,
    80% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0
    }

    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

@keyframes sk-bouncedelay {

    0%,
    100%,
    80% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0
    }

    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

#ProductsSelectBox,
#UsersSelectBox {
    position: fixed;
    transform: scale(0);
    overflow-y: auto;
    overflow: auto;
    display: flex;
    align-content: flex-start
}

#AddButton {
    width: 36px;
    height: 36px;
    position: fixed;
    right: 36px;
    bottom: 36px;
    border-radius: 50%;
    cursor: pointer;
    background-image: url("Img/Icons/ADD.png");
    background-repeat: no-repeat;
    transition-duration: .2s;
    display: block
}

#LinksDiv {
    width: 100%;
    float: none;
    text-align: left;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    flex-direction: column
}

.LinksA {
    text-align: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 0 10px;
    color: #000;
    width: 100%;
    padding: 8px 18px;
    -webkit-box-shadow: 0 2px 0 rgba(0, 163, 255, .24);
    box-shadow: 0 2px 0 rgba(0, 163, 255, .24);
    -webkit-transition: .1s;
    -o-transition: .1s;
    transition: .1s;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    line-height: 20px
}

.ActiveLink,
.NotiDiv p {
    color: #fff;
    font-weight: 400
}

.LinksA:hover {
    -webkit-box-shadow: 0 2px 0 #00a3ff;
    box-shadow: 0 2px 0 #00a3ff
}

.NotiDiv {
    min-width: 20px;
    min-height: 20px;
    background-color: #fd0004;
    border-radius: 50%;
    width: auto;
    padding: 0;
    max-height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    margin-right: -20px;
    -webkit-box-shadow: -2px 2px 3px rgba(0, 0, 0, .13);
    box-shadow: -2px 2px 3px rgba(0, 0, 0, .13)
}

.NotiDiv p {
    font-size: 12px;
    padding: 1px;
    width: 100%;
    margin: 2px 0 0;
    text-align: center;
    letter-spacing: -1px;
    line-height: 14px
}

.MenuIcon {
    width: auto;
    height: auto;
    max-height: 30px;
    margin-right: 5px;
    margin-top: -5px
}

.MenuIcon.Smaller {
    max-height: 25px;
    margin-bottom: 3px;
    margin-top: -3px
}

.PagesLinks .MenuIcon {
    max-height: 27px !important
}

#ProductsSelectBox {
    opacity: 0;
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    -ms-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    z-index: 99;
    width: 80%;
    left: 10%;
    top: 0;
    background-color: rgba(255, 255, 255, .94);
    flex-direction: row-reverse;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 150px 80px;
    height: 100%;
    overflow-x: hidden;
    text-align: center;
    -webkit-box-shadow: -3px 3px 6px rgba(0, 0, 0, .13);
    box-shadow: -3px 3px 6px rgba(0, 0, 0, .13);
    border-radius: 5px;
    border: 1px solid rgba(124, 124, 124, .48);
    background-image: url(Img/loader.GIF);
    background-repeat: no-repeat
}

.ItemSelectButton,
.ProductSelectButton {
    transition: .2s;
    cursor: pointer;
    direction: rtl
}

#ProductsSelectBox.Active {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
    background-image: none
}

#CustomerFiltersDiv {
    display: flex;
    align-items: stretch;
    width: calc(100% + 150px);
    height: 50px;
    background-color: rgba(255, 255, 255, .1);
    margin-top: 0;
    -webkit-box-shadow: 0 0 rgba(255, 255, 255, 0);
    box-shadow: 0 0 rgba(255, 255, 255, 0)
}

#CloseProductsSelectBox {
    display: inline-block;
    max-height: 40px;
    width: auto;
    height: auto;
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
    transition-duration: .1s
}

#SelectItemSearch {
    width: 100%;
    height: 70px;
    text-align: center;
    font-size: 36px;
    margin-bottom: 8px;
    margin-top: -100px;
    direction: rtl;
    border-bottom: 3px solid #193251;
    border-radius: 0;
    -webkit-box-shadow: 0 0 rgba(255, 255, 255, 0);
    box-shadow: 0 0 rgba(255, 255, 255, 0);
    border-left-style: none;
    border-right-style: none;
    border-top-style: none
}

.hideIcon {
    max-height: 0 !important;
    margin: 0 !important;
    max-width: 0 !important;
    overflow: hidden;
    padding: 0;
    border: none
}

.ProductSelectButton {
    background-repeat: no-repeat;
    background-image: url(Img/Cond2.png);
    padding: 60px 20px 15px;
    background-position: center 15px;
    margin: 20px 0 25px;
    width: 400px;
    font-size: 20px;
    color: #212121;
    display: inline-block;
    background-color: #f5f5f5;
    border-radius: 3px;
    box-shadow: inset -2px 2px 5px rgba(0, 0, 0, .11);
    border: 1px solid #dbdbdb;
    font-weight: 700;
    text-align: center;
    background-size: 90px auto
}

.ItemSelectButton {
    width: calc(100% - 10px);
    border-radius: 15px;
    border: 1px solid rgba(0, 0, 0, .15);
    text-align: right;
    background-color: #fff
}

.ItemSelectButton:hover {
    border: 1px solid #006cff;
    -webkit-box-shadow: 0 0 3px rgba(0, 84, 255, .27);
    box-shadow: 0 0 3px rgba(0, 84, 255, .27);
    transform: scale(1.01);
    background-color: #eaf3ff
}

.ItemSelectButton .TableRowImg {
    width: auto;
    height: auto;
    display: inline-block;
    max-height: 70px;
    border-radius: 20%;
    margin: -8px 3px -15px;
    -webkit-box-shadow: -2px 2px 3px 1px rgba(0, 0, 0, .1);
    box-shadow: -2px 2px 3px 1px rgba(0, 0, 0, .1);
    border: 3px solid #fff
}

.ItemSelectButton span {
    display: inline-block;
    line-height: 50px;
    vertical-align: middle
}

.ItemSelectButton .ProductPrice {
    background-image: url(../Imgs/price.png);
    background-repeat: no-repeat;
    background-position: 10px center;
    float: left;
    text-align: left;
    color: #000;
    background-size: 25px auto;
    padding-left: 40px;
    direction: ltr;
    font-size: 18px;
    padding-right: 0;
    margin-right: -155px;
    width: 155px;
    -webkit-box-shadow: 0 0 rgba(255, 255, 255, 0);
    box-shadow: 0 0 rgba(255, 255, 255, 0);
    border-style: none;
    vertical-align: middle;
    height: 47px;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 15px;
    margin-top: 2px;
    line-height: 47px
}

.ActionProductBar .TrueOption,
.DigitalSpan,
.InverterSpan,
.PlasmaSpan {
    padding-left: 0;
    background-repeat: no-repeat;
    background-position: right center
}

.ItemSelectButton .ProductPrice.NOPRICE {
    background-image: url(../Img/Unknow.png);
    color: #3383ff
}

.ItemSelectButton .ProductPrice.IndstStop {
    background-image: url(../Img/Icons/IndstStop.png);
    color: rgba(35, 35, 35, .48);
    background-size: 28px auto;
    font-size: 12px;
    padding-left: 44px;
    width: 136px
}

.ActionProductBar .TrueOption {
    font-size: 18px;
    background-image: url(../Img/true.png);
    background-size: 20px auto;
    padding-right: 22px;
    text-transform: capitalize
}

.Bar .ByMeen {
    margin-right: -110px;
    float: right;
    text-align: left;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    width: 70px;
    margin-left: 25px;
    margin-top: 0;
    position: absolute;
    bottom: 0;
    right: 0
}

.Bar .EditStatusDiv {
    display: inline-block;
    width: 50px;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    float: right;
    position: absolute;
    right: -88px;
    top: 29px
}

.DigitalSpan,
.InverterSpan,
.PlasmaSpan {
    background-image: url(../Imgs/Icons/plazma.png);
    color: #0c1e39;
    margin: 0 7px 0 0;
    text-align: center;
    background-size: 18px auto;
    padding-right: 25px;
    font-size: 16px;
    vertical-align: middle;
    line-height: 30px
}

.DigitalSpan {
    background-image: url(../Imgs/Icons/Digital.png)
}

.InverterSpan {
    background-image: url(../Imgs/Icons/save.png)
}

.CoolHotSpan {
    font-size: 85% !important;
    margin-right: 8px !important
}

.ActionProductBar .DigitalSpan,
.ActionProductBar .InverterSpan,
.ActionProductBar .PlasmaSpan,
.ChooseBarItem {
    font-size: 16px
}

.ActionSecondSection {
    display: inline-block;
    vertical-align: top;
    padding-left: 25px;
    margin-left: 10px;
    margin-bottom: 10px
}

.ActionBottomDiv {
    float: right;
    margin-right: 60px
}

#ActionImgBox,
.ChooseBar,
.hide {
    margin-right: auto;
    margin-left: auto
}

.CustomerRecord .NotesCounter {
    background-image: url(../Img/Notes.png);
    width: 50px;
    height: 40px;
    position: relative;
    left: 0;
    margin-left: -40px;
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: left center;
    margin-top: 95px;
    padding-left: 32px;
    vertical-align: top;
    padding-top: 10px;
    font-weight: 700;
    text-align: left;
    color: #111;
    pointer-events: none
}

.IfActionNewImg {
    position: absolute;
    top: -25px;
    display: inline-block;
    width: auto;
    height: auto;
    max-height: 50px;
    left: calc(50% - 25px)
}

.hide {
    opacity: 0 !important;
    pointer-events: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important
}

.ChooseBar.Added {
    float: left
}

.ChooseBar {
    width: 900px;
    height: 50px;
    text-transform: capitalize;
    margin-top: 20px !important;
    margin-bottom: 30px;
    border-radius: 15px;
    background-color: #fff;
    text-align: center;
    box-shadow: inset -2px 2px 5px rgba(0, 0, 0, .11);
    display: flex !important;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, .16);
    transition-duration: .2s;
    direction: rtl;
    overflow: hidden;
    flex-wrap: wrap
}

.ChooseBarWarning {
    border-style: dashed !important;
    border-color: #ff0004 !important;
    -webkit-box-shadow: 0 0 0 2px #ff0004 !important;
    box-shadow: 0 0 0 2px #ff0004 !important
}

.ChooseBarItem {
    flex-grow: 1;
    display: inline-block;
    text-align: center;
    border-right: 1px solid rgba(0, 0, 0, .08);
    height: 100%;
    line-height: 50px;
    cursor: pointer;
    font-weight: 700
}

.ChooseBarItem:first-child {
    border-right-style: none
}

.ChooseBarItem.Active {
    color: #fff;
    font-weight: 700;
    background-color: #1948a7;
    border-color: #fff
}

.MaintainanceWarning,
.ProductWarning {
    background-image: url(Img/Warning.png);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 32px auto;
    padding-right: 40px;
    color: #ff0004
}

#SystemUsersHead,
#navmenu,
.UserSelectButton {
    background-repeat: no-repeat;
    background-size: 30px auto
}

.actionrecord[whataction=AfterSales] span[name=Name],
.actionrecord[whataction=Maintainance] span[name=Name] {
    margin-right: 7px
}

#UsersSelectBox {
    opacity: 0;
    pointer-events: none;
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    -ms-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    z-index: 99999;
    width: 800px;
    left: calc(50% - 400px);
    bottom: 0;
    top: calc(50% - 400px);
    background-color: #fff;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 60px 80px 40px;
    height: 800px;
    overflow-x: hidden;
    text-align: center;
    -webkit-box-shadow: -3px 3px 0 rgba(0, 0, 0, .07);
    box-shadow: -3px 3px 0 rgba(0, 0, 0, .07);
    border-radius: 36px;
    border: 1px solid rgba(213, 213, 213, .48);
    transform-origin: left center
}

#CloseUsersSelectBox,
.UserSelectButton {
    transition-duration: .1s;
    display: inline-block;
    cursor: pointer
}

#CloseUsersSelectBox {
    max-height: 30px;
    width: auto;
    height: auto;
    position: absolute;
    top: 15px;
    left: 20px
}

#SystemUsersHead {
    width: 100%;
    text-align: left;
    padding: 10px 25px 10px 40px;
    font-size: 32px;
    color: #060606;
    background-image: url("../Img/Icons/key.png");
    background-position: left 12px;
    margin-top: 25px
}

.UserSelectButton {
    margin-bottom: 10px;
    padding: 5px 20px 12px 42px;
    background-position: 10px 10px;
    text-align: left;
    border-bottom: thin solid rgba(41, 41, 41, .09);
    border-radius: 0;
    color: #2b2d32;
    text-transform: capitalize;
    font-weight: 700;
    font-size: 18px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, .91);
    width: 100%;
    line-height: 1;
    margin-top: 0
}

.UserSelectButton span {
    margin-left: 20px;
    display: inline-block
}

.UserSelectButton:hover {
    color: #007cff;
    border-bottom: thin solid #007cff
}

.UserSelectButton.ToSelect {
    padding: 60px 20px 15px;
    background-position: center 15px;
    margin: 20px 0 0;
    width: 456px;
    font-size: 20px;
    color: #212121;
    display: inline-block;
    background-color: #f5f5f5;
    -webkit-box-shadow: inset -2px 2px 5px rgba(0, 0, 0, .11);
    border-radius: 3px;
    box-shadow: inset -2px 2px 5px rgba(0, 0, 0, .11);
    border: 1px solid #dbdbdb;
    font-weight: 700;
    text-align: center;
    background-size: 40px auto
}

.LinksA span {
    padding-left: 40px;
    color: #00559b;
    font-size: 80%
}

.LinksA.Disapled {
    pointer-events: none;
    background-image: -webkit-linear-gradient(270deg, #fff 0, #ebebeb 100%);
    background-image: -moz-linear-gradient(270deg, #fff 0, #ebebeb 100%);
    background-image: -o-linear-gradient(270deg, #fff 0, #ebebeb 100%);
    background-image: linear-gradient(180deg, #fff 0, #ebebeb 100%)
}

#NavNavNav h4 {
    text-align: left;
    margin: 0;
    color: #121212;
    border-top: thin dashed rgba(0, 0, 0, .21);
    padding: 20px;
    display: none
}

#DatePickerDiv,
.TimePickerDiv {
    width: 500px;
    height: 400px;
    position: fixed;
    top: 340px;
    left: calc(50% - 250px);
    background-color: #fff;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .12);
    border-radius: 8px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .12);
    text-align: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transform: scale(0);
    transition-duration: .3s
}

#searchInput,
#searchInput:focus,
.suggesstion-box {
    background-color: rgba(255, 255, 255, 0)
}

#DatePickerDiv.Active,
.TimePickerDiv.Active {
    pointer-events: auto;
    opacity: 1;
    transform: scale(1)
}

#ActionImgBox,
#ChooseDate.hide,
#ImagesShowDIV,
.AreaForEdit,
.suggesstion-box {
    pointer-events: none
}

.CloseDatePickerDiv {
    position: absolute;
    top: 20px;
    right: 22px;
    max-height: 25px;
    width: auto;
    height: auto;
    display: block;
    cursor: pointer;
    transition-duration: .1s
}

.DatePickerDivIcon {
    width: auto;
    height: auto;
    max-height: 100px;
    display: block;
    text-align: center;
    position: relative;
    top: -50px;
    left: calc(50% - 50px)
}

#DatePickerDiv h3 {
    margin: -35px 8px 15px;
    color: #363636
}

#ChooseDate {
    width: 262px;
    position: relative;
    top: 0;
    left: 0;
    transition: .2s;
    transform: scale(1)
}

#navmenu,
.SesrchDiv {
    display: block;
    position: fixed;
    transition-duration: .2s
}

#ChooseDate.hide {
    transform: scale(0)
}

#ChooseDate:active,
#ChooseDate:focus {
    border: thin solid #004db7
}

input[type=date]:hover:after {
    color: #bf1400
}

input[type=date]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    color: transparent;
    background: 0 0
}

input[type=date]::-webkit-inner-spin-button {
    z-index: 1
}

input[type=date]::-webkit-clear-button {
    z-index: 1
}

.ActionDiv {
    max-height: 1200px
}

.ActionDiv textarea[namesource=comments] {
    background-image: url(../Img/Notes.png);
    background-repeat: no-repeat;
    background-size: 20px auto;
    background-position: calc(100% - 10px) 5px;
    text-align: right;
    direction: rtl;
    text-indent: 15px;
    line-height: 20px;
    font-size: 14px !important
}

.suggesstion-box a.NothingSearch,
.suggesstion-box a.SearchArea {
    background-position: calc(100% - 13px) 8px !important;
    background-size: 25px !important
}

#navmenu {
    right: 0;
    top: 0;
    cursor: pointer;
    padding-right: 36px;
    padding-top: 20px;
    background-image: url(../Img/Icons/menu.png);
    background-origin: content-box;
    width: 76px;
    height: 65px;
    transform-origin: bottom left;
    z-index: 999
}

#searchInput,
.suggesstion-box a {
    background-size: 25px;
    font-weight: 700;
    text-transform: uppercase
}

.SesrchDiv {
    max-width: 400px;
    margin: auto;
    top: 22px;
    right: 85px;
    width: 320px;
    z-index: 99
}

#searchInput {
    display: inline-block;
    font-size: 16px;
    height: 35px;
    line-height: 22px;
    padding: 8px 40px 8px 12px;
    margin: 1px auto 0;
    width: 100%;
    -webkit-transition: .1s;
    transition: .1s;
    -o-transition: .1s;
    border-radius: 0;
    text-align: right;
    border: 2px solid rgba(31, 35, 42, 0);
    -webkit-box-shadow: 0 0 rgb(0 0 0 / 0%);
    box-shadow: 0 0 rgb(0 0 0 / 0%);
    background-image: url(../Img/Icons/searchRight.png);
    background-position: calc(100% - 8px) 5px;
    background-repeat: no-repeat
}

.suggesstion-box,
.suggesstion-box a {
    color: #000;
    border-radius: 10px;
    text-align: right;
    display: block;
    width: 100%
}

#ActionImgBox,
#ImagesShowDIV nav span.nav-close {
    background-repeat: no-repeat;
    background-position: center center;
    top: 0;
    left: 0
}

#searchInput:focus {
    border-bottom: 2px solid rgba(0, 0, 0, .6);
    border-top-style: solid;
    border-right-style: solid;
    border-left-style: solid
}

.suggesstion-box {
    margin-top: 5px;
    padding: 1.5px 0;
    height: auto;
    background-size: cover;
    background-repeat: no-repeat;
    transition: .2s;
    margin-left: 0;
    -webkit-box-shadow: 0 0 transparent;
    box-shadow: 0 0 transparent;
    opacity: 0
}

.suggesstion-box.Active,
.suggesstion-box:focus,
.suggesstion-box:hover {
    background-color: #dcefff;
    pointer-events: auto;
    opacity: 1
}

.suggesstion-box a {
    margin: 2.5px;
    padding: 8px 50px 8px 10px;
    border-bottom: 0 hidden #fff;
    line-height: 25px;
    background-color: #fff;
    background-image: url("../Img/customers.png");
    background-position: calc(100% - 13px) 8px;
    background-repeat: no-repeat;
    overflow: hidden
}

.suggesstion-box a.SearchArea {
    background-image: url("../Img/Icons/Address.png")
}

.suggesstion-box a.NothingSearch {
    background-image: url("../Img/Unknow.png")
}

.suggesstion-box a.SearchAll {
    background-image: url("../Img/menu.png");
    background-size: 25px !important;
    background-position: calc(100% - 13px) 8px
}

.suggesstion-box a span {
    overflow: hidden;
    -webkit-transition: .1s;
    transition: .3s;
    -o-transition: .1s;
    text-align: right;
    direction: rtl;
    display: block;
    width: 100%;
    height: 25px;
    font-size: 15px;
    font-weight: 400;
    max-height: 0
}

.suggesstion-box a:hover {
    background-size: 35px;
    background-position: calc(100% - 8px) 18px
}

.suggesstion-box a.SearchAll:hover {
    background-position: calc(100% - 13px) 18px
}

OPTION,
select {
    font-size: 14px
}

.NavLogo {
    width: auto;
    display: inline-block;
    height: auto;
    margin-bottom: 44px;
    max-width: 45%;
    margin-top: 18px
}

.CheckMobile {
    color: #e01a1e;
    font-weight: 700;
    font-size: 17px;
    text-align: left;
    padding-top: 7px;
    margin-top: 10px;
    margin-left: 15px;
    width: 300px
}

.SubLink {
    float: right;
    margin-top: -47px;
    margin-right: 10px;
    transition-duration: .2s;
    position: relative;
    z-index: 5
}

#ImagesShowDIV {
    position: fixed;
    opacity: 0;
    transform: scale(.2);
    transition: .2s ease-in-out;
    z-index: 999999;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    height: 100%;
    overflow: auto;
    display: flex;
    background-color: rgba(0, 0, 0, .95);
    justify-content: center;
    align-items: center;
    align-content: flex-start;
    padding: 12px 12px 100px;
    flex-direction: column
}

#ImagesShowDIV img {
    height: auto;
    width: auto;
    max-width: 60%;
    display: inline-block;
    cursor: pointer;
    border-radius: 8px;
    transition: .1s ease-in-out;
    overflow: hidden;
    min-height: 500px;
    max-height: calc(90vh - 50px)
}

#ActionImgBox {
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0);
    height: 90%;
    width: 90%;
    background-image: url(../Imgs/Icons/photo-camera.png);
    display: inline-block;
    background-size: cover;
    text-align: center;
    color: transparent;
    border-radius: 0 !important;
    border-style: none;
    border-width: 0 !important;
    cursor: pointer;
    opacity: 0;
    position: absolute;
    right: 0;
    bottom: 0;
    float: left
}

#ActionImgBox::-webkit-file-upload-button {
    visibility: hidden;
    color: transparent
}

#ActionImgBox::before {
    content: "Select Photo";
    display: inline-block;
    background-position: top;
    outline: 0;
    white-space: nowrap;
    -webkit-user-select: none;
    cursor: pointer;
    width: 100%;
    text-align: center;
    height: 100%;
    text-transform: uppercase;
    padding-top: 10px;
    opacity: 0;
    color: transparent
}

#ChangePhoto,
#DeletePhoto,
#MakePhotoCardCover,
#PhotoChangeCard {
    font-size: 16px;
    display: inline-block;
    padding: 10px;
    margin: 20px 10px 10px;
    color: #fff;
    cursor: pointer;
    font-weight: 400
}

#DeletePhoto:hover {
    color: red
}

#PhotoChangeCard:hover {
    color: #ff7600
}

#ChangePhoto:hover {
    color: #0093ff
}

#ImagesShowDIV nav span {
    position: fixed;
    z-index: 1000;
    color: #fff;
    text-align: center;
    padding: 3%;
    cursor: pointer;
    font-size: 2.2em
}

#ImagesShowDIV nav span.nav-next,
#ImagesShowDIV nav span.nav-prev {
    top: 0;
    color: rgba(255, 255, 255, 0);
    transition-duration: .5s;
    height: 100%
}

#ImagesShowDIV nav span.nav-prev {
    left: 0;
    padding-left: 75px;
    padding-right: 75px;
    background-image: -webkit-linear-gradient(216deg, rgba(0, 163, 255, 0) 80.31%, rgba(0, 124, 255, 0) 100%);
    background-image: -moz-linear-gradient(216deg, rgba(0, 163, 255, 0) 80.31%, rgba(0, 124, 255, 0) 100%);
    background-image: -o-linear-gradient(216deg, rgba(0, 163, 255, 0) 80.31%, rgba(0, 124, 255, 0) 100%);
    background-image: linear-gradient(234deg, rgba(0, 163, 255, 0) 80.31%, rgba(0, 124, 255, 0) 100%)
}

#ImagesShowDIV nav span.nav-prev:hover {
    background-image: -webkit-linear-gradient(215deg, rgba(0, 163, 255, 0) 73.06%, rgba(0, 124, 255, .35) 100%);
    background-image: -moz-linear-gradient(215deg, rgba(0, 163, 255, 0) 73.06%, rgba(0, 124, 255, .35) 100%);
    background-image: -o-linear-gradient(215deg, rgba(0, 163, 255, 0) 73.06%, rgba(0, 124, 255, .35) 100%);
    background-image: linear-gradient(235deg, rgba(0, 163, 255, 0) 73.06%, rgba(0, 124, 255, .35) 100%)
}

#ImagesShowDIV nav span.nav-next {
    right: 0;
    padding-right: 100px;
    background-image: -webkit-linear-gradient(329deg, rgba(0, 163, 255, 0) 77.72%, rgba(0, 124, 255, 0) 100%);
    background-image: -moz-linear-gradient(329deg, rgba(0, 163, 255, 0) 77.72%, rgba(0, 124, 255, 0) 100%);
    background-image: -o-linear-gradient(329deg, rgba(0, 163, 255, 0) 77.72%, rgba(0, 124, 255, 0) 100%);
    background-image: linear-gradient(121deg, rgba(0, 163, 255, 0) 77.72%, rgba(0, 124, 255, 0) 100%)
}

#ImagesShowDIV nav span.nav-next:hover {
    background-image: -webkit-linear-gradient(329deg, rgba(0, 163, 255, 0) 79.27%, rgba(0, 124, 255, .35) 100%);
    background-image: -moz-linear-gradient(329deg, rgba(0, 163, 255, 0) 79.27%, rgba(0, 124, 255, .35) 100%);
    background-image: -o-linear-gradient(329deg, rgba(0, 163, 255, 0) 79.27%, rgba(0, 124, 255, .35) 100%);
    background-image: linear-gradient(121deg, rgba(0, 163, 255, 0) 79.27%, rgba(0, 124, 255, .35) 100%)
}

#ImagesShowDIV nav span.nav-close {
    padding: 3%;
    color: rgba(255, 255, 255, 0);
    background-image: url(Img/Icons/Back-White.png);
    background-size: 25px auto;
    z-index: 1001
}

.CompassBut {
    opacity: .5;
    cursor: pointer;
    z-index: 999
}

.AreaForEdit {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #0000008f;
    opacity: 0;
    transition: .3s
}

.EditMode {
    background-color: #fff !important;
    overflow-y: scroll;
    overflow-x: hidden;
    width: 80%;
    height: 80%;
    padding: 30px
}