html,
body {
    height: 100%;
    text-align: right;
    font-family: 'Cairo', sans-serif;
}

.body-bg {
    background-image: url(../imgs/bg.png);
    background-size: contain;
}

*:before,
*:after {
    box-sizing: border-box;
}

:focus {
    outline: none !important;
}

.mainHD.bg {
    background-image: url('../imgs/header-bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
}

.mainHD {
    width: 100%;
    padding: 5px 80px;

}

.navbar-light.mainNav .navbar-nav .nav-link {
    color: #363443;
    text-align: center;
}


.mainNav {
    color: #363443;
    width: 100%;
}

.mainNav .nav-link {
    color: #363443;
}

.navbar .nav-item {
    margin: auto 5px;
    font-weight: 600;
}

.nav-item.active a.nav-link {
    background: #D6F3E5;
    color: #7F83F3 !important;
    border-radius: 10px;
}


.dropdown-menu {
    left: unset;
    text-align: right;
    border-radius: 10px;
    background: #7F83F3;
}

.dropdown-menu a.active {
    background: white;
    color: #7F83F3;
}

.dropdown-item {
    color: white;
    padding: .5rem;
}

.dropdown-item:focus,
.dropdown-item:hover {
    color: #7F83F3;
    background-color: white;
}

.dropdown-toggle::after {
    color: #7F83F3;
}

.dropdown-menu.add {
    background: #FFB31C;
}

.dropdown-menu.add .dropdown-item {
    padding: .5rem;
}

.dropdown-menu.add .dropdown-item:focus,
.dropdown-menu.add .dropdown-item:hover {
    color: white;
    background-color: #ffa000;
}

.dropdown-menu.add .dropdown-item img {
    width: 25px;
}


.dropdown-menu.userMenu {
    background: #7F83F3;
}

.dropdown-menu.userMenu .dropdown-item {
    padding: .5rem;
}

.dropdown-menu.userMenu .dropdown-item:focus,
.dropdown-menu.userMenu .dropdown-item:hover {
    color: white;
    background-color: #77e4af;
}

.dropdown-menu.userMenu .dropdown-item img {
    width: 25px;
}

.signOut {
    background-color: #7F83F3;
    padding: .5rem !important;
    border-radius: 0 0 10px 10px;
}


.individuals .dropdown-toggle::after {
    display: none;

}

.searchIcon {
    background: #D6F8E7;
    padding: 8px;
    border-radius: 100%;
    width: 40px;
    height: 40px;
}

.searchIcon img {
    height: 22px;
}

#searchForm {
    margin-left: 5px;
}

#searchForm input {
    background-color: #D6F8E7 !important;
    color: #7F83F3 !important;
    border-radius: 20px;
    height: 40px !important;
}

#searchForm input.form-control:focus {
    box-shadow: unset;
}

.userProfile {
    background: #EAEAEA !important;
    width: 55px;
    height: 55px;
}

.userProfile img {
    height: 35px;
}

.userMenu {
    left: 0 !important;
}

.btn-outline-white {
    color: white;
    border: 1px solid white;
    background: transparent;
    border-radius: 20px;
    transition: all 0.5s ease 0s;
    padding: 8px 20px;
}

.btn-outline-white:hover {
    transition: all 0.5s ease 0s;
    background: white;
    color: #7F83F3;
}

.btn-green {
    background: #7F83F3;
    color: white;
    transition: all 0.5s ease 0s;
    border-radius: 25px;
    border: 1px solid #7F83F3;
    padding: 8px 20px;
}

.btn-green:hover {
    background: white;
    color: #7F83F3;
    transition: all 0.5s ease 0s;
    border: 1px solid #7F83F3;
}

.btn-green2 {
    background: #7F83F3;
    color: white;
    transition: all 0.5s ease 0s;
    border-radius: 25px;
    border: 1px solid #7F83F3;
    padding: 8px 20px;
}

.btn-green2:hover {
    background: #009e7c;
    color: #ffffff;
    transition: all 0.5s ease 0s;
    border: 1px solid #009e7c;
}


.btn-outline-green {
    color: #7F83F3;
    border: 1px solid #7F83F3;
    background: transparent;
    border-radius: 20px;
    transition: all 0.5s ease 0s;
    padding: 8px 20px;
}

.btn-outline-green:hover {
    transition: all 0.5s ease 0s;
    background: #7F83F3;
    color: white;
}

.btn-light {
    border: 1px solid white;
    background: white;
    padding: 8px 20px;
    border-radius: 20px;
    color: #7F83F3;
}

.btn-light:hover {
    transition: all 0.5s ease 0s;
    background: transparent;
    color: white;
    border: 1px solid white;
}

.btn-orange {
    border: 1px solid #FFB31C;
    background: #FFB31C;
    padding: 8px 20px;
    border-radius: 20px;
    color: #ffffff;
    font-weight: 600;
}

.btn-orange:hover {
    transition: all 0.5s ease 0s;
    background: #faa803;
    color: white;
    border: 1px solid #faa803;
}

.btn-lightOrange {
    border: 1px solid #F7EFDF;
    background: #F7EFDF;
    padding: 8px 20px;
    border-radius: 20px;
    color: #FFB31C;
}

.btn-lightOrange:hover {
    transition: all 0.5s ease 0s;
    background: #f5e5c5;
    color: #FFB31C;
    border: 1px solid #f5e5c5;
}

.btn-lightOrange2 {
    border: 1px solid #FFF3DA;
    background: #FFF3DA;
    padding: 8px 20px;
    border-radius: 20px;
    color: #FFB31C;
}

.btn-lightOrange2:hover {
    transition: all 0.5s ease 0s;
    background: #f5e5c5;
    color: #FFB31C;
    border: 1px solid #f5e5c5;
}

.btn-red {
    border: 1px solid #F00139;
    background: #F00139;
    padding: 8px 20px;
    border-radius: 20px;
    color: white;
}

.btn-red:hover {
    transition: all 0.5s ease 0s;
    background: #e40337;
    color: #fff;
    border: 1px solid #e40337;
}

.btn-lightRed {
    border: 1px solid #FDD9E1;
    background: #FDD9E1;
    padding: 8px 20px;
    border-radius: 20px;
    color: #F00139;
}

.btn-lightRed:hover {
    transition: all 0.5s ease 0s;
    background: #f8bac7;
    color: #F00139;
    border: 1px solid #f8bac7;
}

.btn-blue {
    border: 1px solid #283593;
    background: #283593;
    padding: 8px 20px;
    border-radius: 20px;
    color: #ffffff;
}

.btn-blue:hover {
    transition: all 0.5s ease 0s;
    background: #1f2c94;
    color: #fff;
    border: 1px solid #1f2c94;
}


.btn-dark {
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 600;
}

.btn-dark:hover {
    transition: all 0.5s ease 0s;

}
.header-slider img {
    width: 800px;
}

.header-slider h1 {
    font-weight: 600;
}

.header-slider p {
    border-right: 1px #ccc solid;
    padding-right: 20px;
    font-size: 18px;
}


.header-slider .slick-dotted.slick-slider {
    margin-bottom: 0px;
}

.header-slider .slick-dots {
    bottom: unset;
    top: 10%;
    text-align: right;
    right: 160px;

}

.header-slider .slick-dots li {
    display: unset;
    margin-right: 0;
    width: 6px;
    height: 6px;
    padding: 0;
}


.header-slider .slick-dots li button {
    font-size: 0;
    line-height: 12px;
    display: block;
    width: 6px;
    height: 6px;
    padding: 0px;

}

.header-slider .slick-dots li button:before {
    font-size: 14px;
    line-height: 12px;
    color: #757575;
    width: 10px;
    height: 10px;
    margin-left: 3px;

}

.header-slider .slick-dots li.slick-active button {
    padding: 6px;
}

.header-slider .slick-dots li.slick-active button:before {
    opacity: .75;
    border: 1px solid #7F83F3;
    border-radius: 100%;
    padding: 4px 16px 13px 1px;
    margin-left: 1px;
    color: #7F83F3;
}


/* ---------- inputs ------------ */
select.form-control,
input.form-control {
    height: 50px !important;
    padding: 0px 15px !important;
    background-color: #F6F6F6;
    border: 0;
    border-radius: 25px;
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 15px;
    color: #000;
    text-align: right;
}

textarea.form-control {
    padding: 10px 15px !important;
    background-color: #F6F6F6;
    border: 0;
    border-radius: 25px;
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 15px;
    color: #000;
}


@media screen and (min-width:1000px) {
    .navbar-nav.mr-auto {
        padding-right: 0;
    }
}

@media screen and (max-width:900px) {
    .mainHD {
        padding: unset !important;
    }

    .mainNav {
        padding: 0px 0 10px;
        top: 0;
        z-index: 10;
        background-color: white;
    }

    .navbar-nav li a.btn {
        background-color: #7F83F3 !important;
        color: white !important;
    }

    .header-slider {
        padding-bottom: 30px;
    }

    .header-slider img {
        width: 400px;
        margin: auto;
    }


    .header-slider h1 {
        font-weight: 400;
        font-size: 18px;
    }

    .header-slider p {
        border-right: 1px #000 solid;
        padding-right: 10px;
        font-size: 14px;
    }

    .header-slider .slick-dots {
        text-align: center !important;
        bottom: 15px !important;
        top: unset !important;
        right: unset !important;
    }

    .header-slider .slick-dots li {
        display: inline-block !important;
        margin: 0 20px !important;
    }


    .header-slider .slick-dots li button:before {

        color: #eeeeee !important;
        opacity: .75;


    }

    .header-slider .slick-dots li.slick-active button:before {
        opacity: 1 !important;
        border: 1px solid #ffffff !important;
        color: #ffffff !important;
    }

    .nav-item.d-flex {
        direction: ltr;
    }

    .nav-item.d-flex #searchForm {
        position: absolute;
        right: 60px;
    }

    #searchForm input {
        position: absolute;
        top: 55px;
        width: 200px;
        right: 12rem;
    }

}

@media screen and (max-width:426px) {
    #searchForm input {

        right: 0 !important;
    }
}

@media screen and (max-width:760px) {
    .header-slider img {
        width: 100%;
    }
}

/* ---------------------------------------- */


.greenTitle {
    border-right: 3px solid #7F83F3;
    color: #7F83F3;
    padding-right: 10px;
}

.greenTitle2 {
    border-right: 3px solid #7F83F3;
    color: #7F83F3;
    padding-right: 10px;
}





.box {
    background-color: #F8F8F8;
    padding: 0 0px 30px;
    border-radius: 30px;
}

.box .iconBox {
    display: inline-block;
    background-color: #7F83F3;
    color: white;
    margin-bottom: 22px;
    padding: 12px;
    border-radius: 0 30px;
    width: fit-content;
    position: relative;
}

.box .iconBox:before {
    content: ' ';
    position: absolute;
    display: block;
    top: 72%;
    right: 40%;
    bottom: 1px;
    left: 50%;
    height: 20px;
    width: 1px;
    transform: scale(1, 2);
    transform-origin: 50% -100%;
    border-left: 3px solid #7F83F3;
}

.box .title {
    color: #303030;
    margin-top: 20px;
}


.card {
    border-radius: 20px;
    border: 0;
    transition: all 0.5s ease 0s;
    background: #F8F8F8;
}

.card.categories img {
    margin-bottom: 30px;

}




.card.categories p {
    color: #6c757d;
    font-size: 12px;
}

.card.categories:hover p {
    color: white !important;
    transition: all 0.5s ease 0s;
}

.card.categories:hover {
    background-color: #7F83F3;
    color: white;
    top: 0;
    transition: all 0.5s ease 0s;

}

.card.categories:hover h5::after {
    border-color: white;
    transition: all 0.5s ease 0s;

}

.card.categories:hover img {
    display: none;
}

.card.categories:hover .displayImage {
    display: inline-block;
    transition: all 0.5s ease 0s;
}

#more {
    display: none;
}

.btn.btn-more {
    background-color: #ececec;
    border-color: #ececec;
    border-radius: 20px;
    float: left;
}

.card.categories:hover .btn-more {
    transition: all 0.5s ease 0s;
    color: #fff;
    background-color: #5FE2A2;
    border-color: #5FE2A2;

}

.displayImage {
    display: none;
}


/*-------------------------------
 ------------ home page -----------
------------------------------------- */
.home-slider {
    margin-top: 0 !important;
}

.home-slider img {
    /* height: 340px !important; */
}

.home-slider .sliderText {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-20%);
    color: white;
}

.home-slider .sliderText a {
    color: black;
    padding: 7px 30px;
    font-weight: 600;
}



.home-slider .slick-dots {
    position: absolute;
    top: 50%;
    right: 20px;
    left: unset !important;
    text-align: right;
    width: auto;
    transform: translateY(-50%) !important;
    bottom: unset !important;
}

.steps {
    background-color: #F6F6F6;
    padding: 20px 10px 15px;
    border-radius: 25px;
}

.steps ul {
    padding-right: 0;
    list-style: none;
}

.steps ul li {
    margin: 8px 0;
}

.steps ul a {
    color: black;
    font-weight: 600;
    font-size: 14px;
}

.steps ul a .listSquares {
    background-color: #DCDBDB;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    display: inline-block;
    vertical-align: sub;
    margin-left: 5px;
}

.badge-darkGray {
    background-color: #EAEAEA;
    color: #000;
    border-radius: 44px;
    padding: 5px 30px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}


.title-box3 {
    background-color: #F6F6F6;
    color: #303030;
    padding: 15px 30px;
    border-radius: 15px;
    font-weight: 700;
    margin: 20px 0;
}


/* ---------Services---------- */
.btn-lightgreen {
    color: #fff;
    background-color: #1AC4A0;
    border-color: #1AC4A0;
    border-radius: 44px;
}

.btn-lightgreen2 {
    color: #7F83F3;
    background-color: #E9FBF2;
    border-color: #E9FBF2;
    border-radius: 44px;
}

.btn-lightgreen3 {
    color: white;
    background-color: #7F83F3;
    border-color: #7F83F3;
    border-radius: 44px;
    font-weight: 600;
    padding: 8px 20px;
}

.btn-lightgreen3:hover {
    color: white;
}

.btn-lightGray {
    border: 1px solid #F2F2F2;
    background: #F2F2F2;
    padding: 6px 20px;
    border-radius: 44px;
    /* color: #7F83F3; */
}

.btn-lightGray:hover {
    border: 1px solid #303030;
    background: #303030;
    color: white;
}

.btn-lightGray:hover .displayImage {
    display: inline-block;
    transition: all 0.5s ease 0s;
}

.btn-lightGray:hover img {
    display: none;
}

.btn-darkGray {
    color: white;
    background-color: #303030;
    border-color: #303030;
    border-radius: 44px;
    font-weight: 600;
}

.btn-darkGray:hover {
    background-color: #000;
    color: white;
}


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

.fLinks a {
    color: white;
}

.fLinks a:hover {
    color: rgb(230 230 230);
    text-decoration: none;
}



/* --------services------------- */
.services {
    background-image: url('../imgs/servicesBG.png');
    background-size: contain;
    background-repeat: no-repeat;
    padding: 20px;
}

#services .slick-list.draggable {
    width: 70%;
}

#services .slick-next {
    right: 220px;
}

#services .slick-prev {
    z-index: 10;
    right: 300px;
    left: unset;
}

#services .slick-prev:before,
#services .slick-next:before {
    font-size: 50px;
    border: 1px solid white;
    border-radius: 50%;
    padding: 7px 3px 0px;
}

.servicesInfo {
    padding: 10px;
    position: relative
}

.servicesInfo img {
    position: relative;
    width: 100%;
}

.servicesInfo .textContent {
    position: absolute;
    top: 75%;
    right: 10%;
    color: white;
}

.servicesInfo .textContent span {
    font-size: 12px;
}

@media screen and (max-width:900px) {
    .services {
        background-size: cover;

    }

    #services .slick-prev:before,
    #services .slick-next:before {
        font-size: 20px;
        padding: 3px 2px 0px;
    }

    #services .slick-next {
        right: 20px;
    }

    #services .slick-prev {
        right: 50px;
    }

    .servicesInfo .textContent {
        top: 70%;
    }

    .projects h4 {
        margin: 10px 0;
    }
}

/* --------individuals------------- */

.individuals .slick-list.draggable {
    padding-top: 70px !important;
    padding-bottom: 70px;
}

.individuals .slick-slide {
    margin: 5px;
}

.individuals .slick-prev:before,
.individuals .slick-next:before {
    font-size: 40px;
    border: 1px solid #7F83F3;
    border-radius: 50%;
    padding: 6px 3px 0px;
    color: #7F83F3;
}

.individuals .slick-next {
    right: unset;
    left: -60px;
    top: 67%;
}

.individuals .slick-prev {
    left: -60px;
}

.individuals .card .users {
    background-color: white;
    padding: 6px;
    border-radius: 50%;
    width: 50%;
    position: absolute;
    top: -60px;
    right: 50%;
    transform: translateX(50%);
    box-shadow: 1px 3px 8px #dedede;
}

.individuals .card .card-body {
    margin-top: 50px;
}

.individuals .card-title {
    margin-bottom: .5rem;
}

.jobTitle {
    background: #E8E8E8;
    border-radius: 20px;
    padding: 4px 15px;
    font-size: 12px;
    margin-bottom: 5px;
    display: inline-block;
}



.jq-ry-container {
    margin: 0 auto 10px;
}


@media screen and (max-width:426px) {
    .individuals .card .card-body {
        margin-top: 130px !important;
    }
}

@media screen and (max-width:376px) {
    .individuals .card .card-body {
        margin-top: 100px !important;
    }
}

@media screen and (max-width:321px) {
    .individuals .card .card-body {
        margin-top: 80px !important;
    }
}

/* --------Projects------------- */
.projects .slick-list.draggable {
    padding-bottom: 70px;
}

.projects .slick-slide {
    margin: 5px;
}

.projects .slick-prev:before,
.projects .slick-next:before {
    font-size: 40px;
    border: 1px solid #7F83F3;
    border-radius: 50%;
    padding: 6px 3px 0px;
    color: #7F83F3;
}

.projects .slick-next {
    right: unset;
    left: -60px;
    top: 45%;
}

.projects .slick-prev {
    left: -60px;
    top: 28%;

}



.projects .info {
    color: #989999;
    display: inline-block;
}

.info svg {
    background-color: #D0F2E1;
    color: #7F83F3;
    border-radius: 100%;
    padding: 5px;
    font-size: 20px;
    width: 30px !important;
    height: 30px;
    vertical-align: middle;
}


@media only screen and (max-width:800px) {
    .card-body.projects>div {
        display: block !important;
    }
}


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



    .navbar .nav-item {
        margin: auto 0 auto 10px;
    }

    nav ul {
        padding-right: 16px;
    }

    nav ul.navbar-nav.mr-auto {
        display: block;
        text-align: center;
    }

    nav ul.navbar-nav.mr-auto li {
        display: inline-block !important;
        margin: auto;
    }

    .navbar-toggler {
        margin-left: 15px !important;
    }



    .row {
        padding: 0 !important;
    }

    .col-lg-7 {
        padding: 15px !important;
    }

}


.text-gray {
    color: #888787;
}

.text-lightGray {
    color: #EBEBEB;
}

.text-green {
    color: #7F83F3 !important;
}

.text-lightGreen {
    color: #7F83F3;
}

.text-red {
    color: #F00139 !important;
}

.text-orange {
    color: #FFB31C !important;
    font-weight: 600;
}



/* ---------- checkboxs&radio------------- */


.roundedCheckBox {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-weight: 700;
    font-size: 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: right;
    padding-right: 35px;
}

/* Hide the browser's default checkbox */
.roundedCheckBox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: -2px;
    right: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;

    border-radius: 15px;
}

/* On mouse-over, add a grey background color */
.roundedCheckBox:hover input~.checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.roundedCheckBox input:checked~.checkmark {
    background-color: #7F83F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.roundedCheckBox input:checked~.checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.roundedCheckBox .checkmark:after {
    left: 9px;
    top: 5px;
    width: 7px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


.greenDots {
    width: 5px !important;
    /* position: absolute !important;
    left: 15px !important;
    top: 81% !important; */
}


.projects .btn-group {
    margin-right: 20px;
}

.projects #btnGroupDrop1 {
    margin-top: 10px;
    width: 30px;

}



.tags {
    display: inline-block;
    background: #E8E8E8;
    border-radius: 25px;
    padding: 8px 15px;
    font-weight: 700;
    font-size: 13px;
    color: #5A5A5A;
    margin-bottom: 5px;
}


/* .serviceInfo .dropdown-item {
    color: #7F83F3;
    background-color: #fff;
    font-weight: 600;
} */
.serviceInfo .dropdown-menu {
    background-color: #ffffff !important;
    color: unset !important;
    border-radius: 0 15px 15px 15px;
    left: 25px !important;

}

.serviceInfo .dropdown-item:hover {
    background-color: #e0e7e5 !important;
    color: unset !important;
}


/* --------------------------------------
------ freelancers -----------------
------------------------------- */
.freelancers.card {
    box-shadow: 1px 3px 8px #dedede;
    width: 200px;
    margin: auto;
    margin-top: 70px;
}

.freelancers.card .users {
    background-color: white;
    padding: 6px;
    border-radius: 50%;
    width: 60%;
    position: absolute;
    top: -60px;
    right: 50%;
    transform: translateX(50%);
    box-shadow: 1px 3px 8px #dedede;
}

.freelancers.card .card-body {
    margin-top: 50px;
    text-align: center;
}

.dropdown-ex .freeRate {
    width: unset !important;
    display: inline-block;
}

.freeRate span.badge-gray {
    position: relative !important;
}

/* -----------------------------
------- work gallery ------------
------------------------------ */
.light-dropdown-menu {
    background-color: #ffffff !important;
    border-radius: 0 15px 15px 15px;
}

.light-dropdown-menu .dropdown-item {
    color: #7F83F3;
    font-weight: 700;
}

.light-dropdown-menu .dropdown-item:hover {
    background-color: #e0e7e5 !important;
    /* color: unset !important; */
}

/* -------------------------
------- my sales -----------
----------------------------- */
.sales-box {
    border-radius: 25px;
    padding: 10px;
    box-shadow: 1px 2px 13px #ededed;
    display: flex;
    margin: 20px 10px 0;
    align-items: center;
}

.sales-box img {
    border-radius: 20px;
    width: 100px;
}

/* ------------------------
----- credit ----------------
--------------------------- */
.title-box2 {
    background-color: #F6F6F6;
    color: #303030;
    padding: 20px;
    border-radius: 15px;
    font-weight: 700;
}

.textbox-n {
    height: 40px !important;
    padding: 0px 10px !important;
    background-color: #fff;
    border-radius: 25px;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 15px;
    color: #000;
    border: 0;
    width: 49%;
}

.modal .textbox-n {
    height: 50px !important;
    background-color: #F6F6F6;
    width: 100%;
}

.transactions {
    border-radius: 15px;
    padding: 10px;
    box-shadow: 1px 2px 13px #ededed;
    margin: 10px 10px 0;
}

.input-group>.input-group-append:last-child>.btn:not(:last-child):not(.dropdown-toggle),
.input-group>.input-group-append:last-child>.input-group-text:not(:last-child),
.input-group>.input-group-append:not(:last-child)>.btn,
.input-group>.input-group-append:not(:last-child)>.input-group-text,
.input-group>.input-group-prepend>.btn,
.input-group>.input-group-prepend>.input-group-text {
    border-bottom-left-radius: 25px;
    border-top-left-radius: 25px;
    border: 0;
    width: 50px;
    text-align: center;
    padding-left: 22px;
}

.modal .nav.nav-pills .nav-link {
    padding: 10px !important;
}

.credit {
    display: none;
    margin-bottom: 30px;
}

/* .creditLine{
    display: block;
} */
@media screen and (max-width:769px) {
    .credit {
        display: block;
    }

    .creditLine {
        display: none;
    }
}

/* -------------------------------
----------- cart ------------
--------------------------------- */
.grayTitle {
    background-color: #F9F9F9;
    color: #919191;
    border-radius: 25px;
    padding: 10px;
    text-align: center;
    font-weight: 600;
}

.redTitle {
    background-color: #FEEBEF;
    color: #F00139;
    border-radius: 25px;
    padding: 10px;
    text-align: center;
    font-weight: 600;
}

.payMethod::before,
.payMethod::after {
    content: "";
    border-top: 3px solid #D1F7E4;
    display: inline-block;
    width: 14rem;
    margin: 0 1rem;
    transform: translateY(-.1rem);
}

.show2 {
    transition: all 1s ease 1s !important;
    display: block !important;
}

.required {
    background-color: #EEEEEE;
    color: #303030;
    border-radius: 0 25px 25px 0;
    width: 100%;
    display: inline-block;
    padding: 5px 20px;
}

.fee {
    background-color: #EEEEEE;
    color: #303030;
    border-radius: 0;
    width: 100%;
    display: inline-block;
    padding: 5px 20px;
}

.totalAmount {
    background-color: #303030;
    color: white;
    border-radius: 25px 0 0 25px;
    width: 100%;
    display: inline-block;
    padding: 5px 20px;
}

/* -------------------------------
----------- messages ------------
--------------------------------- */
.msgs {
    background-color: #FAFAFA;
    border-radius: 25px;
    padding: 20px 30px;
}

.userImg {
    border: 2px solid #7F83F3;
    border-radius: 100%;
    padding: 2px;
    width: 80px;
    height: 80px;
}

.userName {
    font-weight: 600;
}

.status {
    padding: 0px 0px 0px 20px;
    border-radius: 20px;
    margin-right: 5px;
    font-size: 14px;
    display: inline-block;
}

.status img {
    width: 25px;
}

.online {
    background: #E9FBF2;
    color: #7F83F3;
}

.offline {
    background: #F0F0F0;
    color: #8F8F8F;
    font-size: 12px !important;
}

.onlineStatus img {
    width: 20px;
}

.msgs .msgDetails {
    color: #656565;
    font-weight: 600
}

.msgs .msgsCounter {
    color: white;
    background-color: #7F83F3;
    border-radius: 100%;
    padding: 2px;
    float: left;
    width: 30px;
    height: 30px;
    text-align: center;
    font-weight: 700
}

/* ---------- chat ------------- */
.sent {
    background-color: #7F83F3;
    width: fit-content;
    padding: 7px 10px;
    border-radius: 44px 27px 44px 44px;
    color: white;
    display: inline-block;
    margin-bottom: 20px;
    margin-right: 20px;
}

.received {
    background-color: #ededed;
    width: fit-content;
    padding: 7px 10px;
    border-radius: 27px 44px 44px 44px;
    display: inline-block;
    margin-bottom: 20px;
    margin-left: 20px;
}

.triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px 17px 9px 0;
    border-color: transparent transparent #7F83F3 transparent;
    position: absolute;
    right: 10px;
    top: -5px;
}

.text-left .triangle {
    border-color: transparent transparent #ededed transparent;
    left: 10px;
    right: unset;
    border-width: 4px 0px 14px 24px;
}

.chat {
    height: 400px;
    overflow: auto;
}

.chat::-webkit-scrollbar {
    width: 5px;
}

/* Track */
.chat::-webkit-scrollbar-track {
    box-shadow: 0 0 1px grey;
    border-radius: 10px;
}

/* Handle */
.chat::-webkit-scrollbar-thumb {
    background: rgb(184, 184, 184);
    border-radius: 10px;
}

/* Handle on hover */
.chat::-webkit-scrollbar-thumb:hover {
    background: #707070;
}


/* Compose */

.conversation-compose {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    /* overflow: hidden; */
    height: 50px;
    width: 100%;
    z-index: 2;
}

.conversation-compose div,
.conversation-compose input {
    background: #F6F6F6;
    height: 100%;
}



.conversation-compose .input-msg {
    border: 0;
    flex: 1 1 auto;
    font-size: 16px;
    margin: 0;
    outline: none;
    min-width: 50px;
    border-radius: 0 44px 44px 0;
    padding-right: 15px;
}

.conversation-compose .custom-file {
    width: 48px;
    border-radius: 44px 0 0 44px;
}

.conversation-compose .file-upload {
    width: 48px;
    height: 48px;
    padding: 0;
}

.conversation-compose .photo {
    flex: 0 0 auto;
    border-radius: 44px 0 0 44px;
    text-align: center;
    position: relative;
    width: 48px;
}


.conversation-compose .photo svg {
    /* display: block; */
    background-color: #303030;
    color: #fff;
    font-size: 24px;
    transform: translate(-50%, -50%);
    position: relative;
    top: 50%;
    left: 50%;
    border-radius: 100%;
    padding: 9px;
    width: 40px;
    height: 40px;
}



.conversation-compose .send {
    background: transparent;
    border: 0;
    cursor: pointer;
    flex: 0 0 auto;
    margin-left: 8px;
    margin-right: 8px;
    padding: 0;
    position: relative;
    outline: none;
}

.conversation-compose .send .circle {
    background: #008a7c;
    border-radius: 50%;
    color: #fff;
    position: relative;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.conversation-compose .send .circle i {
    font-size: 24px;
    margin-left: 5px;
}

/* Small Screens */

@media (max-width: 768px) {
    .marvel-device.nexus5 {
        border-radius: 0;
        flex: none;
        padding: 0;
        max-width: none;
        overflow: hidden;
        height: 100%;
        width: 100%;
    }

    .marvel-device>.screen .chat {
        visibility: visible;
    }

    .marvel-device {
        visibility: hidden;
    }

    .marvel-device .status-bar {
        display: none;
    }

    .screen-container {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .conversation {
        height: calc(100vh - 55px);
    }

    .conversation .conversation-container {
        height: calc(100vh - 120px);
    }
}

/* ----------- help ----------------- */
.help a {
    color: #303030;
    text-decoration: unset;
    font-weight: 600;
    display: block;
    border-radius: 44px;
    padding: 7px;
    margin-bottom: 10px;
}

.help a:hover,
.help a.active {
    background-color: #E0FAED;
    color: #7F83F3;
    padding: 7px 20px;
    transition: all 0.3s ease 0s;
}

.help a img {
    height: 30px;
    margin-left: 10px;
}

.helpLinks {
    background-color: #F4F4F4;
    color: #303030;
    padding: 5px 8px;
    border-radius: 44px;
    font-weight: 600;
    font-size: 14px;
    display: block;
}

.helpLinks:hover {
    color: #7F83F3;
    text-decoration: none;
}

.helpLinks span {
    background-color: #D5D5D5;
    color: #8B8B8B;
    border-radius: 100%;
    padding: 3px;
    width: 30px;
    height: 30px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    font-size: 14px;
}


/* ------ tickets ------------ */
.table.table-striped {
    background-color: #F8F8F8;
    border-radius: 25px;
}

.table.table-striped thead {
    background-color: #7F83F3;
    color: white;
}


.table.table-striped thead th:first-child {
    border-top-right-radius: 25px;
}

.table.table-striped thead th:last-child {
    border-top-left-radius: 25px;
}

.table.table-striped tbody tr:last-child td:first-child {
    border-bottom-right-radius: 25px;
}

.table.table-striped tbody tr:last-child td:last-child {
    border-bottom-left-radius: 25px;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #F8F8F8;
}

.table-striped tbody tr:nth-of-type(even) {
    background-color: #D8F1EB;
    color: #7F83F3;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
}

.table td,
.table th {
    border-top: 0;
}

.table thead th {
    vertical-align: bottom;
    border-bottom: 0;
}

.badge-orange {
    background-color: #FFF2D8;
    color: #FFB31C;
    border-radius: 44px;
    padding: 7px 30px;
    font-size: 14px;
    font-weight: 600;
    display: inline-block;
}






/* ------------- blogs ------------ */
.adviceNo {
    background-color: #7F83F3;
    color: white;
    border-radius: 5px;
    width: 25px;
    height: 25px;
    display: inline-block;
    text-align: center;
}

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