@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Noticia+Text:ital,wght@0,400;0,700;1,400;1,700&display=swap');

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {
    font-family: "Inter";
    margin: 0 !important;
}

:root {
    --Psychic-Purple: #33227D;
    --Aura-Red: #DB0900;
    --IO-Yellow: #FD8D03;
    --white: #fff;
}

ul {
    padding: 0px;
}

p {
    font-family: Inter;
}

/*::-webkit-scrollbar {
display: none;
}*/

/**/
.main-block {
    overflow: hidden;
}

.search-field {
    width: 100%;
    height: auto;
    padding: 0px;
    margin: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

    .search-field input[type="text"] {
        width: 100%;
        min-width: 15rem;
        max-width: 15rem;
        height: auto;
        padding: .125rem 1.155rem;
        margin: 0px;
        border: 1px solid rgb(173, 167, 203);
        border-radius: 3rem;
        outline: none;
        font-family: Inter;
        font-size: 1rem;
        font-weight: 500;
        transition: all 0.3s ease 0s;
    }

        .search-field input[type="text"]:focus {
            box-shadow: rgba(173, 167, 203, 0.2) 0px 0px 0px 3px;
        }

    .search-field button[type="submit"] {
        width: 2.5rem;
        height: 2.5rem;
        padding: 0px;
        margin: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: none;
        background-color: rgba(0, 0, 0, 0);
        color: rgb(51, 51, 51);
        position: absolute;
        right: 0px;
    }


.signup-cta-block {
    background-color: rgb(251, 230, 230);
}

.signup-cta-block-container .section-title-block {
    justify-content: center;
}

    .signup-cta-block-container .section-title-block p {
        margin: 0px;
        font-family: Inter;
        font-size: 1rem;
        font-weight: 400;
        line-height: 19.36px;
        text-align: center;
    }

.left-login {
    width: 50%;
    margin: 0px auto;
}

.login {
    overflow: hidden;
}

.heading {
    text-align: center;
}

button.SignIn.button {
    outline: none;
    background-color: var(--Psychic-Purple);
    color: var(--white);
    padding: 10px;
    width: 100%;
    font-size: 18px;
    border: none;
    border-radius: 0.9rem;
    background-clip: padding-box;
    transition: .1s ease all;
}

    button.SignIn.button:hover {
        box-shadow: 0 0 0 0.3rem rgba(112, 97, 197, 0.28);
    }

button.SignIn.button-back {
    outline: none;
    background-color: var(--IO-Yellow);
    color: var(--white);
    padding: 10px;
    width: 100%;
    font-size: 18px;
    border: 0.3rem solid rgba(112, 97, 197, 0.28);
    border-radius: 0.9rem;
    background-clip: padding-box;
}

button.Back.button {
    outline: none;
    background-color: var(--IO-Yellow);
    color: var(--white);
    padding: 10px;
    width: 100%;
    font-size: 18px;
    border: 0.3rem solid rgba(255, 209, 120, 0.28);
    border-radius: 0.9rem;
    background-clip: padding-box;
    text-decoration: none;
    text-align: center;
}

button.SignIn.button:disabled {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
    opacity: 0.5;
    border-color: #ccc;
}

.contactus {
    font-size: 15px;
}

    .contactus .contact {
        color: var(--Psychic-Purple);
        font-weight: 600;
    }

.about {
    background-image: linear-gradient(rgba(51, 34, 125, 0.5), rgba(51, 34, 125, 0.5)), url("/homeassets/images/milky-way-galaxy-night.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
}

.Future {
    font-family: "Noticia Text";
    font-size: 3rem;
    color: var(--white);
    padding-top: 1em;
    padding-bottom: 1em;
    position: relative;
    z-index: 1;
    margin-bottom: 0px;
}

.Futures {
    font-family: "Noticia Text";
    font-size: 3rem;
    color: var(--white);
    padding-top: 1em;
}

img.roadmap {
    width: 23%;
    margin: 8px auto;
}

.card-imag {
    position: absolute;
    z-index: 0;
}

.card-imag1 {
    position: absolute;
    right: 0px;
}

.footer {
    background-image: linear-gradient(rgba(51, 34, 125, 0.8), rgba(51, 34, 125, 0.8)), url("/homeassets/images/footermilky-way-galaxy-night.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.footer_icon {
    display: flex;
    gap: 15px;
    font-size: 12px;
}

.footer_footer {
    padding: 5px 0px;
}

.cardphysicie {
    background: rgba(48, 55, 165, 0.4);
    text-align: center;
    padding: 5px;
    width: 63%;
    color: var(--white);
    margin: 0px auto;
    border-radius: 12px;
}

.global-component_psychic-block--buttons_chat figure {
    width: 1.7rem;
    height: 1.5rem;
    background-image: url("../svg_icon/call.svg");
}

ul.global-component_psychic-block--buttons li {
    display: inline-block;
    text-align: center;
    margin: 11px;
}

.ga-button img {
    width: 2rem;
}

.image-user img {
    width: 100%;
    padding-top: 15px;
}

.phone {
    padding-bottom: 2px;
}

.image-user {
    width: 214px;
    margin: 12px auto;
}

.small-service-price {
    font-size: 11px;
    text-align: center;
}

.name h4 {
    font-size: 18px;
    margin-bottom: 0px;
}

.review span {
    font-size: 12px;
}

.cardphysicie.cardtwo {
    margin-top: 10em;
}

.cardphysicie.one {
    margin-top: 4em;
    border-radius: 10px;
}

.conected {
    position: relative;
}

.connected_heafing {
    position: absolute;
    top: 7em;
    color: var(--white);
    left: 10.5em;
}

    .connected_heafing h4 {
        color: var(--white);
    }

    .connected_heafing span {
        display: block;
    }

.heading {
    font-size: 3rem;
    z-index: 11;
    color: var(--Psychic-Purple);
    position: relative;
}

span.title-heading {
    text-align: center;
    color: rgb(221, 221, 221);
    position: relative;
    z-index: 1;
}

.about-img img {
    width: 100%;
}

.Astrology {
    font-family: "Noticia Text";
    text-align: center;
}

.aboutcont {
    line-height: 28px;
}

.testimonial-slider {
    padding: 2em 2em 3em;
}

.testimonial-title h2 {
    padding-left: 0.2em;
}

.card {
    margin: 0px 0.5em 12px;
    box-shadow: rgba(22, 22, 26, 0.18) 2px 6px 8px 0px;
    border: none;
}

.carousel-control-prev, .carousel-control-next {
    background-color: var(--white);
    width: 3em;
    height: 3em;
    border-radius: 5%;
    top: 60%;
    transform: translateY(-50%);
}

.sliderbtn {
    position: relative;
    top: 30px;
    left: 20px;
}

.left_img img {
    width: 100%;
    height: 100%;
}

.field-icon::after {
    content: "";
    position: absolute;
    inset: -7px -15px;
    border-left: 1px solid rgb(155, 155, 155);
    cursor: pointer;
}

.field-icon {
    float: right;
    margin-right: 12px;
    margin-top: -37px;
    position: relative;
    z-index: 2;
}

.createaccount {
    color: var(--Psychic-Purple);
}

.primary {
    color: rgb(182, 182, 182);
}

.gapping_area {
    width: 100%;
    height: auto;
    min-height: calc(100dvh - 458px);
    padding: 1.5rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(/images/login-img.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.inner-gapping {
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.customer.-withbg {
    width: 100%;
    height: auto;
    padding: 1rem;
    margin: 0 auto;
    background-color: rgb(124 124 124 / 25%);
    border: 1px solid #fff;
    border-radius: 1rem;
    backdrop-filter: blur(10px);
}

.customer-registration h1 {
    font-size: 1.85rem;
}

.right_img {
    border-radius: 6px;
}

.login_registration .login-1 {
    background-color: rgb(235, 235, 235);
    padding: 8px;
    width: 100px;
    text-align: center;
    border-radius: 5px;
    font-size: 18px;
    font-weight: 500;
}

.resend button {
    outline: none;
    padding: 8px 10px;
    background-color: var(--IO-Yellow);
    color: var(--white);
    border: 0.3rem solid rgba(255, 209, 120, 0.28);
    border-radius: 0.9rem;
    background-clip: padding-box;
    font-size: 14px;
}

i.fa-solid {
    font-family: FontAwesome;
}

::-webkit-input-placeholder {
    color: rgb(195, 195, 195);
}

.menu-list {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

.u-input {
    outline: 0px;
    border: 1px solid rgb(208, 208, 208);
    padding: 5px 10px;
    height: 35px;
    font-size: 12px;
    border-radius: 10px;
    background-clip: padding-box;
}

.tooltip {
    width: 120px;
}

.tooltip-inner {
    padding: 8px 10px;
    color: rgb(255, 255, 255);
    text-align: center;
    background-color: rgb(5, 24, 53);
    font-size: 12px;
    border-radius: 3px;
}

.tooltip-arrow {
    border-right-color: rgb(5, 24, 53) !important;
}

.hamburger-toggle {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0px;
    margin: 0px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
    position: relative;
    background-color: rgba(0, 0, 0, 0);
}

    .hamburger-toggle .bar-top, .hamburger-toggle .bar-mid, .hamburger-toggle .bar-bot {
        width: 100%;
        height: 3px;
        margin: 0px;
        padding: 0px;
        background-color: rgb(255, 255, 255);
        position: absolute;
        transition: all 0.3s ease-in-out 0.2s;
    }

    .hamburger-toggle .bar-top {
        top: 0px;
    }

    .hamburger-toggle.toggled .bar-top {
        width: 50%;
    }

    .hamburger-toggle .bar-mid {
        width: 65%;
        top: 50%;
        transform: translateY(-50%);
    }

    .hamburger-toggle.toggled .bar-mid {
        width: 100%;
    }

    .hamburger-toggle .bar-bot {
        bottom: 0px;
    }

    .hamburger-toggle.toggled .bar-bot {
        width: 50%;
    }

.header-icon {
    position: relative;
    display: flex;
    float: left;
    width: 70px;
    height: 100%;
    align-items: center;
    justify-content: center;
    line-height: 1;
    cursor: pointer;
}

    .header-icon i {
        font-size: 18px;
        line-height: 40px;
    }

    .header-icon:hover i {
        color: rgb(0, 0, 58);
    }

.top-header {
    z-index: 10;
    width: calc(100% - 220px);
    background: var(--Psychic-Purple);
    transition: all 0.3s ease-in-out 0s;
    float: right;
}

.sidebar-expanded .top-header {
    width: calc(100% - 60px);
}

.header-inner {
    width: 100%;
    display: flex;
    height: 70px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgb(204, 204, 204);
    border-top-color: rgb(204, 204, 204);
    border-right-color: rgb(204, 204, 204);
    border-left-color: rgb(204, 204, 204);
}

.sidebar {
    width: 220px;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 10;
    background: var(--Psychic-Purple);
    transition: all 0.3s ease-in-out 0s;
}

.sidebar-header {
    width: 100%;
    height: auto;
    padding: 0.89rem;
    margin: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-header__brand {
    width: auto;
    height: 41px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .sidebar-header__brand img {
        width: auto;
        height: 41px;
        transition: all 0.3s ease-in-out 0s;
    }

.sidebar-reduced .icon-lg {
    height: 0px;
    transform: scale(0);
    opacity: 0;
    visibility: collapse;
}

.sidebar-reduced .icon-sm {
    transform: scale(1);
    opacity: 1;
    visibility: visible;
}

.sidebar-expanded .icon-lg {
    transform: scale(1);
    opacity: 1;
    visibility: visible;
}

.sidebar-expanded .icon-sm {
    height: 0px;
    transform: scale(0);
    opacity: 0;
    visibility: collapse;
}

.sidebar-header__btn {
    width: 2.5rem;
    height: 1.5rem;
    margin: 0px;
    padding: 0px;
    display: none;
    justify-content: center;
    align-items: center;
    border: none;
    outline: none;
    color: var(--white);
    background-color: rgba(0, 0, 0, 0);
    font-size: 1.2rem;
}

.sidebar-menu {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
}

.sidebar-expanded .sidebar {
    width: 60px;
}

.menu-nav {
    width: 100%;
    height: calc(100% - 65px);
    padding: 0px;
    margin: 0px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
}

    .menu-nav > ul .menu-item {
        color: var(--white);
        max-width: 100%;
        overflow: hidden;
    }

    .menu-nav > ul .menu-item-inner {
        display: flex;
        flex-direction: row;
        align-items: center;
        min-height: 60px;
        position: relative;
        cursor: pointer;
        transition: all 0.5s ease-in-out 0s;
    }

        .menu-nav > ul .menu-item-inner::before {
            position: absolute;
            content: " ";
            height: 0px;
            width: 2px;
            left: 0px;
            top: 50%;
            margin-top: -18px;
            background-color: var(--white);
            opacity: 0;
            transition: all 0.5s ease-in-out 0s;
        }

    .menu-nav > ul .menu-item.is-active .menu-item-inner {
        border-left-color: rgb(95, 156, 253);
        background-color: rgb(119, 92, 239);
    }

        .menu-nav > ul .menu-item.is-active .menu-item-inner i {
            color: var(--white);
        }

        .menu-nav > ul .menu-item.is-active .menu-item-inner .menu-item-title span {
            color: var(--white);
        }

        .menu-nav > ul .menu-item.is-active .menu-item-inner::before {
            height: 36px;
            opacity: 1;
        }

    .menu-nav > ul .menu-item:not(.is-active):hover .menu-item-inner {
        background-color: rgb(119, 92, 239);
        border-left-color: rgb(119, 92, 239);
    }

    .menu-nav > ul .menu-item i {
        flex: 0 0 60px;
        font-size: 18px;
        font-weight: normal;
        text-align: center;
        transition: all 0.5s ease-in-out 0s;
    }

    .menu-nav > ul .menu-item .menu-item-expand {
        position: relative;
        left: 100px;
        padding-right: 20px;
        margin-left: auto;
        transition: all 1s ease-in-out 0s;
    }

.sidebar-expanded .menu-nav > ul .menu-item .menu-item-expand {
    left: 0px;
}

.menu-nav > ul .menu-item .menu-item-title {
    flex-basis: 100%;
    position: relative;
    transition: all 0.7s ease-in-out 0s;
}

    .menu-nav > ul .menu-item .menu-item-title span {
        font-weight: 400;
        font-size: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: all 0.5s ease-in-out 0s;
    }

.sidebar-expanded .menu-nav > ul .menu-item .menu-item-title {
    left: 0px;
    opacity: 1;
}

.menu-nav > ul .menu-item .menu-submenu {
    background-color: rgb(5, 24, 53);
    padding: 15px;
    font-size: 12px;
    display: none;
}

    .menu-nav > ul .menu-item .menu-submenu li {
        padding-bottom: 15px;
        margin-bottom: 15px;
        border-bottom: 1px solid rgb(7, 32, 72);
        border-top-color: rgb(7, 32, 72);
        border-right-color: rgb(7, 32, 72);
        border-left-color: rgb(7, 32, 72);
        color: rgb(95, 156, 253);
    }

        .menu-nav > ul .menu-item .menu-submenu li:last-child {
            margin: 0px;
            padding: 0px;
            border: 0px;
        }

.main-body {
    width: calc(100% - 220px);
    height: 100%;
    transition: all 0.3s ease-in-out 0s;
    float: right;
}

    .main-body .content-wrapper {
        padding: 15px 25px;
        height: 100%;
    }

        .main-body .content-wrapper .page-content {
            border-top: 1px solid rgb(208, 208, 208);
            padding-top: 25px;
        }

    .main-body .content-wrapper-bg .page-content {
        background: var(--white);
        border-radius: 3px;
        border: 1px solid rgb(208, 208, 208);
        padding: 25px;
    }

    .main-body .page-title {
        margin-top: 0px;
        margin-bottom: 25px;
        font-weight: 700;
        color: rgb(51, 34, 125);
    }

.sidebar-expanded main.main-body {
    width: calc(100% - 60px);
}

.close-sidebar {
    display: none;
}

.sidebar-bg {
    background-color: rgb(241, 241, 255);
    overflow-x: hidden;
}

.widget-price {
    color: rgb(0, 0, 0);
    font-weight: 700;
    font-size: 20px;
}

.widget-calldetail span {
    font-weight: 600;
    font-size: 18px;
}

.widget-calldetail {
    color: rgb(0, 0, 0);
}

    .widget-calldetail h3 {
        margin-top: 10px;
        margin-bottom: 10px;
        font-weight: 600;
    }

    .widget-calldetail p {
        margin-bottom: 8px;
        font-size: 15px;
        font-weight: 600;
    }

.video-btn a {
    background: rgb(31, 62, 227);
    padding: 9px;
    border-radius: 5px;
    text-decoration: none;
    color: var(--white);
    font-weight: 600;
}

.video-btn {
    display: flex;
    justify-content: end;
    margin-top: 6px;
}

#example {
    white-space: nowrap;
    width: 100% !important;
}

.dorpdown-right {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-right: 2rem;
    color: var(--white);
}

.avatar {
    vertical-align: middle;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.dropdown-menu {
    position: absolute;
    inset: 0px auto auto 0px;
    margin: 0px;
    transform: translate(-66px, 58px) !important;
}

.tableback {
    background: var(--white);
    padding: 20px;
    border-radius: 10px;
    overflow: hidden;
}

.checkbox-dropdown {
    border: 1px solid rgb(223, 222, 222);
    padding: 10px;
    position: relative;
    user-select: none;
    height: 50px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    background-color: var(--white);
    cursor: pointer;
}

    .checkbox-dropdown::after {
        font: var(--fa-font-solid);
        content: "";
        height: 0px;
        position: absolute;
        width: 0px;
        top: 40%;
        right: 25px;
    }

    .checkbox-dropdown.is-active::after {
        border-bottom-color: rgb(0, 0, 0);
        border-top-color: var(--white);
        margin-top: -9px;
    }

.checkbox-dropdown-list {
    background-color: var(--white);
    list-style: none;
    margin: 0px;
    padding: 0px;
    position: absolute;
    top: 100%;
    border-right: inherit;
    border-bottom: inherit;
    border-left: inherit;
    border-image: inherit;
    border-top: none;
    left: -1px;
    right: -1px;
    opacity: 0;
    transition: opacity 0.4s ease-in-out 0s;
    z-index: 999;
    height: 100px;
    overflow: hidden scroll;
    pointer-events: none;
}

.is-active .checkbox-dropdown-list {
    opacity: 1;
    pointer-events: auto;
    border-radius: 0.4rem;
}

.checkbox-dropdown-list li label {
    display: block;
    padding: 10px;
    transition: all 0.2s ease-out 0s;
}

    .checkbox-dropdown-list li label:hover {
        background-color: rgb(172, 172, 172);
        color: var(--white);
    }

    .checkbox-dropdown-list li label input {
        margin-right: 12px;
    }

.login-sec {
    background-color: rgb(245, 246, 250);
    border: 0.6rem solid rgba(112, 97, 197, 0.28);
    border-radius: 1.6rem;
    background-clip: padding-box;
}

.initial-data {
    position: relative;
    z-index: 9;
    max-width: 769px !important;
    width: 100% !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .initial-data::after {
        content: "";
        position: absolute;
        display: block;
        border: 0.1rem solid rgb(135, 131, 209);
        background-clip: padding-box;
        width: 82%;
        height: 1px;
        top: 25px;
        left: 43px;
        z-index: -1;
    }

    .initial-data .first1 {
        height: 50px;
        width: 50px;
        background-color: var(--IO-Yellow);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        font-weight: bold;
        border: 0.3rem solid rgba(255, 168, 0, 0.28);
        border-radius: 1.6rem;
        background-clip: padding-box;
    }

    .initial-data .second2 {
        height: 50px;
        width: 50px;
        background-color: var(--Psychic-Purple);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        font-weight: bold;
        border: 0.3rem solid rgba(131, 135, 209, 0.3);
        border-radius: 1.6rem;
        background-clip: padding-box;
    }

.footer_footer p {
    font-size: 0.9rem;
    padding: 0.5rem 0rem;
}

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

    .circle p {
        text-align: center;
        overflow-wrap: break-word;
        width: fit-content;
    }

.gndr-slct {
    overflow-wrap: normal;
    width: 100%;
    height: 50px;
    border-radius: 6px;
    border: 1px solid rgb(223, 222, 222);
    display: flex;
    align-items: center;
    padding: 0px 10px;
    background-color: var(--white);
    cursor: pointer;
}

    .gndr-slct select {
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
    }

.carousel-section-right {
    display: flex;
    justify-content: center;
    align-items: center;
}

.navbar-toggler {
    padding: 2px 4px;
    border: 2px solid var(--white);
    border-radius: 4px;
}

.Chief-Executive {
    padding: 15px;
}

.history-map-item h4 {
    padding-right: 2.2rem;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 150%;
    color: rgb(102, 100, 100);
    margin-top: 0px;
    position: relative;
    z-index: 2;
}

.banner.aboutus {
    height: auto;
    padding: 20px;
}

.sub_content.aboutu h2 {
    font-size: 38px;
}

.sub_content.aboutu {
    width: 100%;
    text-align: center;
}

.card.test-img.bgcolor {
    border: 1px solid rgb(221, 221, 221);
    box-shadow: none;
}

.timeline {
    position: relative;
    margin: 50px auto;
    padding: 40px 0px;
    width: 1000px;
    box-sizing: border-box;
}

    .timeline::before {
        content: "";
        position: absolute;
        left: 50%;
        width: 2px;
        height: 100%;
        background: rgb(197, 197, 197);
    }

    .timeline ul li {
        list-style: none;
        position: relative;
        width: 50%;
        padding: 20px 40px;
        box-sizing: border-box;
    }

        .timeline ul li:nth-child(2n+1) {
            float: left;
            text-align: right;
            clear: both;
        }

        .timeline ul li:nth-child(2n) {
            float: right;
            text-align: left;
            clear: both;
        }

.content {
    padding-bottom: 20px;
}

.timeline ul li:nth-child(2n+1)::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    top: 24px;
    right: -6px;
    background: rgb(31, 62, 227);
    border-radius: 50%;
    box-shadow: rgba(31, 62, 227, 0.2) 0px 0px 0px 3px;
}

.timeline ul li:nth-child(2n)::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    top: 24px;
    left: -4px;
    background: rgb(31, 62, 227);
    border-radius: 50%;
    box-shadow: rgba(31, 62, 227, 0.2) 0px 0px 0px 3px;
}

.timeline ul li h3 {
    padding: 0px;
    margin: 0px;
    font-weight: 600;
}

.timeline ul li p {
    margin: 10px 0px 0px;
    padding: 0px;
}

.timeline ul li .time h4 {
    margin: 0px;
    padding: 0px;
    font-size: 14px;
}

.timeline ul li:nth-child(2n+1) .time {
    position: absolute;
    top: 0px;
    right: -90px;
    margin: 0px;
    padding: 5px 13px;
    color: var(--white);
    border-radius: 50px;
    box-shadow: none;
    width: 56px;
    height: 56px;
    line-height: 44px;
}

.timeline ul li:nth-child(2n) .time {
    position: absolute;
    top: 0px;
    left: -110px;
    margin: 0px;
    padding: 5px 13px;
    color: var(--white);
    border-radius: 50px;
    box-shadow: none;
    width: 56px;
    height: 56px;
    line-height: 44px;
}

@media (max-width: 1000px) {
    .timeline {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .timeline {
        width: 100%;
        padding-bottom: 0px;
    }

    h1 {
        font-size: 40px;
    }

    .timeline::before {
        left: 20px;
        height: 100%;
    }

    .timeline ul li:nth-child(2n+1), .timeline ul li:nth-child(2n) {
        width: 100%;
        text-align: left;
        padding-left: 50px;
        padding-bottom: 50px;
    }

        .timeline ul li:nth-child(2n+1)::before, .timeline ul li:nth-child(2n)::before {
            top: -18px;
            left: 16px;
        }

        .timeline ul li:nth-child(2n+1) .time, .timeline ul li:nth-child(2n) .time {
            top: -30px;
            left: 50px;
            right: inherit;
        }
}

.history-map-timiline {
    background: padding-box padding-box rgb(245, 246, 250);
    padding: 15px;
    border-radius: 1.6rem;
    border: 0.6rem solid rgba(112, 97, 197, 0.28);
}

.info-map-item-box {
    border: 0.4rem solid rgba(30, 32, 210, 0.3);
    background-color: rgb(91, 92, 246);
}

.info-map-item.dark-blue.info-map-item1 span {
    color: var(--white);
    font-size: 14px;
}

.icon_img_about img {
    background: var(--white);
    padding: 7px 11px;
    border-radius: 50px;
    margin: 14px;
}

.icon_img_about img {
    background: var(--white);
    padding: 7px 11px;
    border-radius: 50px;
    width: 55px;
    height: 55px;
}

.info-map-item.dark-blue.info-map-item1 {
    padding: 15px;
}

.info-map-item-box.second {
    background-color: rgb(153, 154, 236);
}

.info-map-item-box.third {
    background-color: rgb(91, 183, 246);
}

.testimonial-slider.bg {
    padding-bottom: 80px;
    margin-bottom: 40px;
}

button.btn.joiner {
    background-color: var(--IO-Yellow);
    border: 2px solid rgb(255, 209, 120);
    padding: 10px;
    border-radius: 8px;
    color: var(--white);
}

.login_btn {
    outline: none;
    padding: 10px;
    border-radius: 0.9rem;
    font-size: 16px;
    background-color: var(--Psychic-Purple);
    min-width: 119px;
    border: none;
    background-clip: padding-box;
}

    .login_btn:hover {
        box-shadow: 0 0 0 0.3rem rgba(112, 97, 197, 0.28);
    }

.info-map-item-box {
    width: 29%;
    margin: 0px auto;
}

.iconinfo img {
    background: var(--white);
    padding: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    margin-bottom: 15px;
}

.info-map-item-dot-start {
    width: 4rem;
    height: 4rem;
    margin: 0px;
    position: absolute;
    top: -8rem;
    left: -10rem;
    background-image: url("../images/info-dot-start.e466b2a6.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% center;
}

.info-map-item-box {
    position: relative;
}

.info-map-item-dot {
    width: 4rem;
    height: 4rem;
    margin: 0px;
    position: absolute;
    top: 6rem;
    right: -10rem;
    background-image: url("/homeassets/images/info-dot1.f99eb0a3.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% center;
}

.info-map {
    margin-top: 10em;
}

.info-map-item-dot-start-tag {
    width: 0px;
    height: calc(50% + 6rem);
    margin: 0px;
    position: absolute;
    top: -5rem;
    left: -8rem;
    border-left: 1px solid rgb(91, 92, 246);
}

.info-map-item1::before {
    width: 8rem;
    height: 14px;
    left: -10rem;
    top: 8em;
    border-top: 1px solid rgb(91, 92, 246);
    content: "";
    position: absolute;
}

.info-map-item-box {
    position: relative;
    border-radius: 12px;
}

figure.info-map-item-icon {
    width: 0px;
    height: calc(12% + 6rem);
    margin: 0px;
    position: absolute;
    top: 10rem;
    left: 24rem;
    border-left: 1px solid rgb(91, 92, 246);
}

.info-map-item1::after {
    width: 8rem;
    height: 14px;
    left: 14rem;
    top: 8em;
    border-top: 1px solid rgb(91, 92, 246);
    content: "";
    position: absolute;
}

.info-map-item-box2 {
    border: 0.4rem solid rgba(30, 32, 210, 0.3);
    background-color: rgba(91, 92, 246, 0.74);
    position: relative;
    border-radius: 12px;
}

.info-map-item-box2 {
    width: 29%;
    margin: 43px auto;
}

.info-map-item-box2 {
    margin-right: 0px;
    margin-left: 34rem;
}

.info-map-item.blue.info-map-item2::before {
    width: 8rem;
    height: 14px;
    left: -9rem;
    top: 8em;
    border-top: 1px solid rgb(91, 92, 246);
    content: "";
    position: absolute;
}

.info-map-item.dark-blue.info-map-item2 span {
    color: rgb(255, 255, 255);
    font-size: 15px;
}

.info-map-item.blue.info-map-item2 span {
    color: rgb(255, 255, 255);
    font-size: 14px;
}

.info-map-item.blue.info-map-item2 {
    padding: 15px;
}

figure.info-map-item-icon2 {
    width: 0px;
    height: calc(24% + 6rem);
    margin: 0px;
    position: absolute;
    top: 8rem;
    left: -9rem;
    border-left: 1px solid rgb(91, 92, 246);
}

.info-map-item-box3 {
    border: 0.4rem solid rgba(30, 32, 210, 0.3);
    background-color: rgb(91, 194, 246);
    position: relative;
    border-radius: 12px;
}

.info-map-item-box3 {
    width: 29%;
    margin: 0px auto;
}

.info-map-item-box3 {
    margin-right: 0px;
    margin-left: 20rem;
}

.info-map-item.dark-blue.info-map-item3 span {
    color: var(--white);
    font-size: 15px;
}

.info-map-item.blue.info-map-item3 span {
    color: var(--white);
    font-size: 15px;
}

.info-map-item.blue.info-map-item3 {
    padding: 15px;
}

.cardphysicie.astrology_img {
    background: rgb(48, 55, 165);
    width: 85%;
    margin-top: 20px;
}

.aboutcard {
    padding: 40px;
    width: 85%;
}

.horoscope.mt-5 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.breadcrumbs a {
    color: var(--IO-Yellow);
}

.cardastrology .onlinepsychicn {
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    color: var(--Psychic-Purple);
}

.aboutmysticsence {
    text-align: center;
    font-size: 36px;
    font-weight: 600;
    color: var(--Psychic-Purple);
}

.aboutmysdoes > h4 {
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 150%;
    text-align: center;
    color: rgb(102, 100, 100);
    margin-top: 0px;
}

.horoscope .abouthoroscop {
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    color: var(--Psychic-Purple);
}

.centertext {
    padding: 0px 25px;
}

    .centertext > h4 {
        font-size: 36px;
        text-align: center;
        font-weight: 600;
        color: var(--Psychic-Purple);
    }

.abouttestimonias h4 {
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 150%;
    text-align: center;
    color: rgb(102, 100, 100);
}

.priviousnext {
    border: 2px solid rgb(0, 0, 0);
    border-radius: 6px;
}

.chooespsychics {
    padding: 15px;
    background-color: var(--white);
    border-radius: 20px;
}

.historypsychise {
    font-size: 36px;
    text-align: center;
    font-weight: 600;
    color: var(--Psychic-Purple);
    padding-bottom: 15px;
}

.contactusss {
    padding: 15px;
}

    .contactusss > p {
        font-size: 36px;
        text-align: center;
        font-weight: 600;
        color: var(--Psychic-Purple);
    }

.contact-item {
    padding: 15px;
}

.historymapitem > h4 {
    font-size: 26px;
    padding-bottom: 15px;
    text-align: center;
    font-weight: 600;
    color: var(--Psychic-Purple);
}

ul.pagination li {
    display: inline-block;
}

input.m-2.text-center.form-control.rounded.fw-bold {
    padding: 10px 0px;
}

.form-check-input:checked {
    background-color: var(--IO-Yellow);
    border-color: var(--IO-Yellow);
}

.blog_left_inner_1.clearfix {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--white);
    padding: 9px;
    border-radius: 5px;
}

.blog_left {
    margin-bottom: 15px;
}

.blog_left_inner_1_image img {
    width: 14rem;
    height: 10rem;
}

.blog_left_inner_1_text h4 a {
    color: var(--Psychic-Purple);
    text-decoration: none;
    font-size: 20px;
}

.blog_left_inner_1_text p {
    font-size: 15px;
}

.blog_left_inner_1_text {
    margin-left: 3em;
}

.headingtitle h6 {
    color: rgb(120, 120, 120);
    font-weight: 400;
}

.articalfull {
    float: right;
    font-weight: 500;
    text-decoration: none;
}

.productby {
    text-decoration: none;
}

.blog_left_inner_1_image img {
    width: 14rem;
    height: 10rem;
    border: 5px solid rgba(112, 97, 197, 0.28);
    border-radius: 0.8rem;
    background-clip: padding-box;
}

ul.filter-group-dropdown li {
    display: block;
    margin-bottom: 6px;
}

label h3 {
    font-size: 16px;
    font-weight: 400;
}

ul.filter-group-dropdown {
    margin: 13px 1px;
    background: var(--white);
    padding: 15px;
    border-radius: 12px;
}

.blog-data {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.filter-group_inner {
    border: 1px solid rgba(112, 97, 197, 0.5);
    border-radius: 0.4rem;
    background-clip: border-box;
}

.blog_right a {
    color: var(--Psychic-Purple);
}

.psychics {
    border: 1px solid rgba(112, 97, 197, 0.5);
    border-radius: 0.4rem;
    background-clip: border-box;
}

.accordion-item {
    border: 0px;
    position: relative;
}

.hidden {
    display: none;
}

.pagination-container {
    width: calc(100% - 2rem);
    display: flex;
    align-items: center;
    padding: 1rem 0px;
    justify-content: center;
}

.pagination-number, .pagination-button {
    font-size: 1.1rem;
    background-color: transparent;
    border: none;
    margin: 0.25rem;
    cursor: pointer;
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 0.2rem;
}

    .pagination-number:hover, .pagination-button:not(.disabled):hover {
        background: var(--white);
    }

    .pagination-number.active {
        color: var(--white);
        background: var(--IO-Yellow);
    }

.card.psych-img {
    padding: 10px 25px;
    background: padding-box padding-box rgb(48, 55, 165);
    border-radius: 20px;
    color: var(--white);
    border: 0.3rem solid rgba(92, 66, 236, 0.35);
}

.phoness {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 20px 0px;
}

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

button#prev-button {
    background: var(--IO-Yellow);
    color: var(--white);
}

button#next-button {
    background: var(--IO-Yellow);
    color: var(--white);
}

.onlinestaff {
    color: rgb(138, 138, 138);
}

.accept {
    background-color: rgb(102, 194, 13);
    padding: 10px;
    color: var(--white);
    text-decoration: none;
    border-radius: 6px;
}

.edit {
    background-color: rgb(82, 123, 241);
    padding: 10px;
    color: var(--white);
    text-decoration: none;
    border-radius: 6px;
}

.reject {
    background-color: var(--Aura-Red);
    padding: 10px;
    color: var(--white);
    text-decoration: none;
    border-radius: 6px;
}



.tableheading {
    font-size: 20px;
    font-weight: 600;
    color: var(--Psychic-Purple);
}

table.dataTable th.dt-type-numeric, table.dataTable th.dt-type-date, table.dataTable td.dt-type-numeric, table.dataTable td.dt-type-date {
    text-align: left !important;
}

span.badge.badge-pill.bg-soft-success {
    background-color: rgb(204, 245, 231);
}

span.badge.badge-pill.bg-soft-danger {
    background-color: rgb(255, 214, 224);
}

span.badge.badge-pill.bg-soft-success.text-success.me-2 {
    font-size: 12px;
}

.card-tabs .nav-tabs .nav-item .nav-link.active {
    background: rgb(135, 135, 135);
    color: var(--white);
}

.card-tabs .nav-tabs .nav-item .nav-link {
    border: 0px;
    border-radius: 0.625rem;
    margin: 0px;
    color: var(--text-gray);
    padding: 0.3rem 9px;
    font-weight: 500;
    font-size: 12px;
    text-align: center;
}

    .card-tabs .nav-tabs .nav-item .nav-link.active {
        color: var(--white);
        font-size: 12px;
    }

ul.nav.nav-tabs {
    border: 0px;
    background: rgba(235, 235, 235, 0.867);
    border-radius: 0.625rem;
    width: fit-content;
}

.card.mb-3.widget-content.bg-midnight-bloom {
    padding: 20px;
    margin: 0px;
}

.Site-Session {
    border-radius: 12px;
    border-left: 6px solid rgb(82, 123, 241);
}

.meeting-sch {
    border-radius: 12px;
    border-left: 6px solid rgb(242, 143, 79);
}

.Staff-Online {
    border-radius: 12px;
    border-left: 6px solid rgb(102, 194, 13);
}

.card-right-content {
    display: flex;
    flex-direction: column;
}

.card-left-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.view-all-btn button {
    background-color: var(--Psychic-Purple);
    color: var(--white);
}

    .view-all-btn button:hover {
        background-color: var(--Psychic-Purple);
        color: var(--white);
    }

.session-graph {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.toolti {
    position: relative;
    display: inline-block;
}

    .toolti > i {
        background-color: rgb(135, 135, 135);
        color: var(--white);
        height: 25px;
        width: 25px;
        line-height: 25px;
        text-align: center;
        border-radius: 100%;
    }

    .toolti .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: var(--Psychic-Purple);
        color: var(--white);
        text-align: center;
        border-radius: 6px;
        padding: 5px 0px;
        font-size: 14px;
        position: absolute;
        z-index: 1;
        left: 70px;
    }

    .toolti:hover .tooltiptext {
        visibility: visible;
    }

#chart {
    margin-top: 15px;
}

#chart1 {
    margin-top: 15px;
}

#chart2 {
    margin-top: 15px;
}

.nowrap {
    font-size: 1.45rem;
    font-weight: 600;
}

.sitesession p {
    font-size: 1.7rem;
    font-weight: 700;
    text-align: start;
    margin-bottom: 0px;
}

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

td.Action_btn {
    padding: 13px;
}

.email {
    background-color: rgb(102, 194, 13);
    padding: 10px;
    color: var(--white);
    text-decoration: none;
    border-radius: 6px;
}

.chat-icon {
    z-index: 9999;
}

    .chat-icon .fa-comments {
        font-size: 30px;
    }

#chating .outer-wrapper {
    position: fixed;
    inset: 0px 0px 0px auto;
    z-index: 999;
    flex-direction: row;
    display: flex;
    align-items: flex-end;
}

#chating ::-webkit-scrollbar-thumb {
    background: rgb(82, 123, 241);
    border-radius: 3px;
}

    #chating ::-webkit-scrollbar-thumb:hover {
        background: rgb(85, 85, 85);
    }

#chating .chat-icon {
    border: 1px solid var(--Psychic-Purple);
    width: 70px;
    height: 70px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: var(--white);
    background: var(--Psychic-Purple);
    position: fixed;
    right: 30px;
    bottom: 30px;
    box-shadow: 0 0 10px var(--Psychic-Purple);
    cursor: pointer;
    transition: all 0.3s ease-in-out 0s;
}

    #chating .chat-icon::after {
        width: 0px;
        height: 0px;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 10px solid var(--Psychic-Purple);
        content: "";
        position: absolute;
        transform: rotate(143deg);
        bottom: 0px;
        right: 3px;
        transition: all 0.3s ease-in-out 0s;
    }

    #chating .chat-icon:hover {
        color: var(--Psychic-Purple);
        background: var(--white);
    }

#chating .wrapper-list-chat {
    background-color: #efefef;
    padding: 0px;
    border: 1px solid var(--Psychic-Purple);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px;
    width: 340px;
    display: none;
}

    #chating .wrapper-list-chat.view {
        display: block;
    }

#chating.show .wrapper-list-chat {
    display: block;
}

#chating.show .chat-icon {
    display: none;
}

#chating .wrapper-list-chat h3 {
    font-size: 24px;
    font-weight: 300;
    color: var(--white);
    text-align: center;
    padding: 10px;
}

.header-chat {
    background: rgb(0, 73, 187);
    margin-top: -2px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 10px;
}

svg#close-compose {
    margin-left: auto;
}

.users {
    overflow: auto;
    margin: 5px 0px;
    padding: 5px;
}

    .users li:hover {
        background: rgb(200, 243, 238);
    }

    .users > ul {
        list-style: none;
        margin: 0px;
        padding: 0px;
    }

/*#chating .profile-pic {
    border: 1px solid rgb(158, 158, 158);
    width: 30px;
    height: 30px;
    display: flex;
    border-radius: 30px;
    margin-right: 5px;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: #fff;
}*/

/*.rob-chat-pro {
    width: 30px;
    height: 30px;
    border-radius: 30px;
}*/

#chating .user {
    display: flex;
    font-size: 12px;
    margin-bottom: 5px;
    padding: 0px 0px 5px;
    align-items: center;
    cursor: pointer;
    border-bottom: 1px solid rgb(82, 123, 241);
}

.user .profile-pic img {
    max-width: 100%;
    height: auto;
}

#chating .user span.user-name {
    color: rgb(158, 158, 158);
    font-weight: 600;
    font-size: 14px;
    display: block;
    padding-right: 5px;
}

#chating .user span.chat-disc {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 150px;
    font-size: 12px;
    display: block;
}

#chating .user .time {
    font-size: 10px;
    color: rgb(0, 0, 0);
    display: block;
    margin-left: auto;
}

#chating .user.active span.profile-pic::after {
    content: "";
    position: absolute;
    right: -2px;
    width: 8px;
    height: 8px;
    background: rgb(0, 150, 136);
    border-radius: 5px;
    bottom: 0px;
}

.user.active .profile-pic {
    border-color: rgb(82, 123, 241);
    box-shadow: rgb(82, 123, 241) 0px 0px 5px;
}

#chating .user .time small {
    display: -webkit-box;
}

#chating .user.active span.user-name {
    color: rgb(82, 123, 241);
    font-weight: 600;
}

.header-chat span.fa.fa-close {
    position: absolute;
    right: 9px;
    top: 16px;
    color: var(--white);
    cursor: pointer;
}

.wrapper-composer {
    width: 350px;
    background: rgb(204, 204, 204);
    border: 1px solid rgb(221, 221, 221);
    height: auto;
    position: relative;
    display: none;
}

    .wrapper-composer.view {
        display: block;
    }

/*.header-composer {
    background: var(--Psychic-Purple);
    display: flex;
    align-items: center;
    padding: 4px 12px;
    justify-content: space-between;
}*/

/*.header-composer-profiles {
    display: flex;
    gap: 10px;
    align-items: center;
}*/

svg#close-chat {
    margin-left: 54%;
    color: var(--white);
}

.header-composer span.name {
    color: var(--white);
}

/*#chating .header-composer .profile-pic {
    border-color: var(--white);
}*/

.header-composer .fa-close.fa {
    color: rgb(3, 63, 123);
    cursor: pointer;
}

.header-composer span.name span.status {
    display: block;
    font-size: 10px;
    color: var(--white);
}

.wrapper-type-text {
    border: 1px solid var(--Psychic-Purple);
    padding: 3px;
    display: flex;
    width: 97%;
    justify-content: space-between;
    background: var(--white);
    position: absolute;
    bottom: 0px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 5px;
    border-radius: 5px;
    margin-bottom: 2px;
}

    .wrapper-type-text > div.text {
        width: 100%;
        box-sizing: border-box;
    }

    .wrapper-type-text > div.trigger {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: var(--Psychic-Purple);
    }

    .wrapper-type-text > div.emozi {
        color: var(--IO-Yellow);
        font-size: 20px;
    }

    .wrapper-type-text > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        .wrapper-type-text > div.text .form-control {
            border: 0px;
            border-radius: 0px;
        }

        .wrapper-type-text > div.attachment {
            width: 30px;
            overflow: hidden;
            margin-right: 10px;
            position: relative;
            cursor: pointer;
        }

.attachment input {
    opacity: 0;
}

.wrapper-type-text > div.attachment::before {
    content: "";
    font: 20px / 1 FontAwesome;
    color: rgb(63, 81, 181);
    width: 10px;
    height: 10px;
    position: absolute;
    top: 11px;
    cursor: pointer;
}

.Rejectcall {
    background-color: var(--Aura-Red);
    color: var(--white);
    border: none;
    outline: none;
    padding: 10px;
    border-radius: 10px;
}

.Acceptcall {
    background-color: rgb(102, 194, 13);
    color: rgb(255, 255, 255);
    border: none;
    outline: none;
    padding: 10px;
    border-radius: 10px;
}

.modal-header {
    position: relative;
}

    .modal-header > button {
        position: absolute;
        right: 15px;
        top: 15px;
    }

.switch {
    height: 55px;
}

.switch__checkbox {
    opacity: 0;
    position: absolute;
    left: -9999px;
}

    .switch__checkbox + .switch__label {
        display: inline-block;
        height: 20px;
        width: 40px;
        position: relative;
        box-shadow: rgb(228, 228, 228) 0px 0px 0px 1.5px inset;
        border-radius: 60px;
        top: 17px;
        right: 60px;
        cursor: pointer;
    }

        .switch__checkbox + .switch__label::before {
            content: "";
            position: absolute;
            display: block;
            height: 20px;
            width: 20px;
            top: 0px;
            left: 0px;
            border-radius: 15px;
        }

        .switch__checkbox + .switch__label::after {
            content: "";
            position: absolute;
            display: block;
            height: 18px;
            width: 18px;
            top: 50%;
            margin-top: -9px;
            left: 1px;
            border-radius: 60px;
            background: var(--white);
            transition: all 0.35s cubic-bezier(0.54, 1.6, 0.5, 1) 0s;
        }

    .switch__checkbox:checked + .switch__label::before {
        width: 38px;
        background: rgb(102, 194, 13);
    }

    .switch__checkbox:checked + .switch__label::after {
        left: 21px;
    }

.switch__status-message {
    position: relative;
    left: 50px;
    font-size: 14px;
    color: var(--white);
}

.card-body-content {
    background-color: rgb(249, 249, 252);
    padding: 15px;
    display: flex;
    justify-content: center;
}

    .card-body-content span {
        border: none;
        outline: none;
        color: var(--white);
        background-color: var(--IO-Yellow);
        padding: 10px;
        border-radius: 6px;
        margin: 0;
        cursor: pointer;
        display: inline-block;
        text-align: center;
        line-height: 1;
        white-space: nowrap;
    }

.profile-details {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin-top: -50px;
}

.profile-details-bg {
    background-color: var(--white);
    margin: 20px;
    padding: 20px;
    border-radius: 12px;
}

.about-section p {
    position: relative;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 0px;
}

.profile-information p {
    font-size: 24px;
    font-weight: 600;
    color: var(--Psychic-Purple);
}

.save-btn {
    display: flex;
    justify-content: end;
    margin-top: 15px;
}

    .save-btn button {
        border: none;
        outline: none;
        color: var(--white);
        background-color: var(--IO-Yellow);
        padding: 10px;
        border-radius: 6px;
        max-width: 100%;
        width: 10%;
    }

.card-img-img img.img-fluid {
    cursor: pointer;
}

.dropdown-toggle::after {
    vertical-align: 0.18em;
}

input#form1Example23, input#form1Example40, input#form1Example24, input#form1Example27, input#form1Example25, input#form1Example26, input#form1Example29, input#form1Example28, input#form1Example92, input#form1Example30 {
    height: 50px;
}

.gapping_header {
    background-image: url("/homeassets/images/bg-login.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    padding: 25px 0px;
}

.gapping-center {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.role small {
    font-size: 13px;
}

.wizard .tabs .tab {
    display: none;
}

    .wizard .tabs .tab.active {
        display: block;
    }

.fileuploader {
    display: none;
}

button.fileuploader-btn {
    border: none;
    outline: none;
    background-color: var(--IO-Yellow);
    color: var(--white);
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
}

.video-main-wrapper {
    background-color: rgb(241, 241, 255);
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.main-video {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: var(--Psychic-Purple);
    color: var(--white);
}

.video_header {
    display: flex;
    align-items: center;
    gap: 20px;
}

.video-information {
    height: 20px;
    width: 20px;
    border-radius: 100%;
    border: 1px solid var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
}

.video_calling_img {
    display: flex;
    flex-wrap: wrap;
}

.left-video-left {
    position: relative;
}

.right-video-right {
    position: relative;
}

.video_calling_img .left-video p {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: var(--white);
    background-color: rgb(0, 0, 0);
    padding: 6px 15px;
    margin-bottom: 0px;
}

.video_calling_img .right-video p {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: var(--white);
    background-color: rgb(0, 0, 0);
    padding: 6px 15px;
    margin-bottom: 0px;
}

.left-video {
    border-right: 1px solid var(--white);
}

.right-video {
    border-left: 1px solid var(--white);
}

.video_calling_img img {
    width: 100%;
}

.video_footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    background-color: var(--Psychic-Purple);
    color: var(--white);
    padding: 15px;
}

.footer-mute-video {
    display: flex;
    gap: 20px;
    margin-bottom: 0px;
}

.video-footer-medium ul {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    list-style: none;
    margin: 0px;
}

.video-mute, .footer-video, .video-recorde, .video-share, .video-participent, .video-invite {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.footer-video-end button {
    border: none;
    outline: none;
    background-color: var(--Aura-Red);
    color: var(--white);
    padding: 8px 15px;
    border-radius: 6px;
}

li.video-invite span {
    height: 40px;
    width: 40px;
    background: var(--IO-Yellow);
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    font-size: 18px;
}

li.video-participent span, li.video-share span, li.video-recorde span {
    height: 40px;
    width: 40px;
    background: var(--white);
    color: rgb(83, 95, 122);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    font-size: 18px;
}

li.video-mute span, li.footer-video span {
    height: 40px;
    width: 40px;
    background: var(--IO-Yellow);
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    font-size: 18px;
}

.customer-registration img {
    height: 70px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.active > .page-link, .page-link.active {
    z-index: 3;
    color: var(--white);
    background-color: var(--Psychic-Purple);
    border-color: var(--Psychic-Purple);
}

.page-link:hover {
    z-index: 2;
    color: var(--white);
    background-color: var(--Psychic-Purple);
    border-color: var(--Psychic-Purple);
}

.pagination {
    --bs-pagination-color: var(--Psychic-Purple);
}

.titlecalling {
    display: inline-block;
    font-size: 18px;
    font-weight: 600;
}

.Browser_video {
    background-color: var(--IO-Yellow);
    color: var(--white);
    border: none;
    outline: none;
    padding: 10px;
    border-radius: 10px;
}

.preview-item {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .preview-item > img, video {
        width: -webkit-fill-available;
    }

.Acceptcall-cancel {
    outline: none;
    padding: 10px;
    border-radius: 10px;
    border: 1.5px solid rgb(102, 194, 13);
    color: rgb(102, 194, 13);
    background-color: rgb(238, 253, 222);
}

.star-rating {
    cursor: default;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-flow: row-reverse;
}

    .star-rating input[type="radio"] {
        display: none;
    }

    .star-rating label {
        color: rgb(187, 187, 187);
        font-size: 2rem;
        padding: 0px;
        cursor: pointer;
        transition: all 0.3s ease-in-out 0s;
    }

        .star-rating label:hover, .star-rating label:hover ~ label, .star-rating input[type="radio"]:checked ~ label {
            color: var(--IO-Yellow);
        }

.Rating i {
    color: var(--IO-Yellow);
}

.card-body-customer p {
    font-size: 20px;
    text-align: center;
    margin-top: 10px;
}

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

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

.Rating i {
    color: var(--IO-Yellow);
}

.customer-feedback-bg {
    background-color: rgb(241, 241, 255);
    border-radius: 12px;
    margin: 10px;
    padding: 10px;
}

.customer-info {
    background-color: var(--white);
    border-radius: 10px;
}

.breadcrumb-all {
    color: var(--Psychic-Purple) !important;
}

table, tbody, tr, td {
    color: red;
}

.row.mt-2.justify-content-md-center {
    overflow: auto;
}

.customer-heading {
    margin: 1.4rem 1.5rem 0px;
}

.customer-detailss {
    color: var(--Psychic-Purple);
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
}

.access-denied {
    height: 100vh;
}

.text-wrapper {
    width: 100%;
    max-width: 1080px;
    height: 100%;
    padding: 0px;
    margin: 0px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.title {
    font-size: 4rem;
    font-weight: 700;
    color: var(--Aura-Red);
}

.subtitle {
    font-size: 2rem;
    font-weight: 700;
    color: rgb(51, 34, 125);
    text-align: center;
}

.isi {
    font-size: 24px;
    text-align: center;
    margin: 0px;
    padding: 20px;
    color: rgb(51, 34, 125);
}

.buttons {
    font-weight: 600;
    border: 1.5px solid rgb(51, 34, 125);
    text-decoration: none;
    padding: 1rem 1.25rem;
    text-transform: uppercase;
    color: rgb(51, 34, 125);
    border-radius: 30px;
    transition: all 0.2s ease-in-out 0s;
    display: inline-block;
}

    .buttons:hover {
        background-color: rgb(51, 34, 125);
        color: var(--white);
    }

#Modalforfeedback .modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
}

    #Modalforfeedback .modal-footer button {
        margin: 0px !important;
    }

.password-field-wrapper {
    width: 100%;
    height: auto;
    padding: 0px;
    margin: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.form-control {
    height: 50px;
    padding-right: 2.5rem;
    position: relative;
}

.password-field-wrapper input::placeholder {
    position: absolute;
    top: 35%;
}

.password-field-wrapper i {
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    right: 0.5rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
}

.password-field-wrapper::after {
    content: "";
    width: 1px;
    height: 100%;
    padding: 0px;
    margin: 0px;
    position: absolute;
    top: 0px;
    right: 2.5rem;
    background-color: rgb(222, 226, 230);
}

#staffRegisterForm input {
    height: 50px;
    font-family: 'Inter' !important;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: normal;
}

    #staffRegisterForm input::placeholder {
        color: #0005;
        margin-top: -3px;
    }

    #staffRegisterForm input[type="checkbox"], #staffRegisterForm input[type="radio"] {
        height: auto;
    }
/* Testimonial Slider Section */
.testimonial-slider-inner .owl-prev, .testimonial-slider-inner .owl-next {
    width: 3rem;
    height: 3rem;
    padding: 0px;
    justify-content: center;
    align-items: center;
    margin: 0px !important;
    display: flex !important;
    background-color: rgb(255, 255, 255) !important;
    opacity: 1 !important;
    border-radius: 0.25rem !important;
}

.testimonial-slider-inner .owl-buttons {
    width: 100%;
    height: auto;
    padding: 0px;
    margin: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.connect-staff {
    cursor: pointer;
}

    .connect-staff.disabled {
        cursor: not-allowed;
    }


/* Chat */
/* CHAT BOX */
/* Chat box */
/* ^1 Chat Screen Start */
.chat-icon {
    z-index: 9999;
}

    .chat-icon .fa-comments {
        font-size: 30px;
    }

#chating .outer-wrapper {
    position: fixed;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 999;
    flex-direction: row;
    left: auto;
    display: flex;
    align-items: flex-end;
}

#chating ::-webkit-scrollbar-thumb {
    background: #527bf1;
    border-radius: 3px;
}

    #chating ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

#chating .chat-icon {
    border: 1px solid var(--Psychic-Purple);
    width: 70px;
    height: 70px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: var(--white);
    background: var(--Psychic-Purple);
    position: fixed;
    right: 30px;
    bottom: 30px;
    box-shadow: 0 0 10px var(--Psychic-Purple);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

    #chating .chat-icon:after {
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 10px solid var(--Psychic-Purple);
        content: '';
        position: absolute;
        transform: rotate(143deg);
        bottom: 0px;
        right: 3px;
        transition: all 0.3s ease-in-out;
    }

    #chating .chat-icon:hover {
        color: var(--Psychic-Purple);
        background: var(--white);
    }

#chating .wrapper-list-chat {
    background: #efefef;
    padding: 0;
    border: 1px solid var(--Psychic-Purple);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    width: 340px;
    display: none;
}

    #chating .wrapper-list-chat.view {
        display: block;
    }

#chating.show .wrapper-list-chat {
    display: block;
}

#chating.show .chat-icon {
    display: none;
}

#chating .wrapper-list-chat h3 {
    font-size: 24px;
    font-weight: 300;
    color: var(--white);
    text-align: center;
    padding: 10px;
}

.header-chat {
    background: #0049bb;
    margin-top: -2px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
}

svg#close-compose {
    margin-left: auto;
}

.users {
    overflow: auto;
    margin: 5px 0px;
    padding: 5px;
}

    .users li:hover {
        background: #c8f3ee;
    }

    .users > ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

/*#chating .profile-pic {
    border: 1px solid #9E9E9E;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;
    display: flex;
    border-radius: 30px;
    align-items: center;
    justify-content: center;
    position: relative;
    background: var(--white);
}*/

/*.rob-chat-pro {
    width: 30px;
    height: 30px;
    border-radius: 30px;
}*/

#chating .user {
    display: flex;
    font-size: 12px;
    margin-bottom: 5px;
    padding: 0 0 5px 0;
    align-items: center;
    cursor: pointer;
    border-bottom: 1px solid #527bf1;
}

.user .profile-pic img {
    max-width: 100%;
    height: auto;
}

#chating .user span.user-name {
    color: #9E9E9E;
    font-weight: 600;
    font-size: 14px;
    display: block;
    padding-right: 5px;
}

#chating .user span.chat-disc {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 150px;
    font-size: 12px;
    display: block;
}

#chating .user .time {
    font-size: 10px;
    color: #000;
    display: block;
    margin-left: auto;
}

#chating .user.active span.profile-pic:after {
    content: '';
    position: absolute;
    right: -2px;
    width: 8px;
    height: 8px;
    background: #009688;
    border-radius: 5px;
    bottom: 0px;
}

.user.active .profile-pic {
    border-color: #527bf1;
    box-shadow: 0 0 5px #527bf1;
}

#chating .user .time small {
    display: -webkit-box;
}

#chating .user.active span.user-name {
    color: #527bf1;
    font-weight: 600;
}

.header-chat span.fa.fa-close {
    position: absolute;
    right: 9px;
    top: 16px;
    color: var(--white);
    cursor: pointer;
}

/*  ^2 Compose box  */
.users.msg {
    max-height: 300px;
    padding: 5px 10px;
    margin-bottom: 50px;
}

.wrapper-composer {
    width: 350px;
    background: #cccccc;
    border: 1px solid #ddd;
    height: auto;
    position: relative;
    display: none;
}

    .wrapper-composer.view {
        display: block;
    }

/*.header-composer {
    background: var(--Psychic-Purple);
    display: flex;
    align-items: center;
    padding: 4px 12px;
    justify-content: space-between;
}*/

/*.header-composer-profiles {
    display: flex;
    gap: 10px;
    align-items: center;
}*/

svg#close-chat {
    margin-left: 54%;
    color: var(--white);
}

.header-composer span.name {
    color: var(--white);
}

/*#chating .header-composer .profile-pic {
    border-color: var(--white);
}*/

.header-composer .fa-close.fa {
    color: #033f7b;
    cursor: pointer;
}

.header-composer span.name span.status {
    display: block;
    font-size: 10px;
    color: var(--white);
}

#chating .message {
    width: 100%;
    height: auto;
    border-radius: 4px;
    font-size: 13px;
    margin-bottom: 1rem;
    border: 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: .5rem;
    background-color: transparent;
}

    #chating .message.out-going {
        flex-direction: row-reverse;
    }

    #chating .message.in-comming {
        flex-direction: row;
    }

    /*#chating .message .chat-content {
        max-width: calc(100% - 50px);
        height: auto;
        padding: .25rem;
        margin: 0;
        position: relative;
        border-radius: .25rem;
        word-break: break-all;
        display: flex;
        flex-direction: column;
        gap: .25rem;
        box-shadow: 0px 3px 3px #48484842;
    }*/

    #chating .message.out-going .chat-content {
        color: #fd8c09;
        background-color: #fff2e4 !important;
        border: 1px solid #fd8c09;
    }

    #chating .message.in-comming .chat-content {
        color: #000;
        background-color: #e7e1ff !important;
        border: 1px solid #33227d;
    }


.chat-content .time {
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    display: block;
    color: #000;
    font-size: .65rem;
}

#chating .message.out-going .chat-content .time {
    text-align: right;
}

#chating .message.in-comming .chat-content .time {
    text-align: left;
}

#chating .message.out-going .profile-pic {
    background-color: #f9fff2;
}

#chating .message.in-comming .profile-pic {
    background-color: #e7e1ff;
}


/*#chating .message.out-going .chat-content {
max-width: calc(100% - 50px);
border-radius: 5px 0 5px 5px;
border-right-width: 3px;
background: #f9fff2;
box-shadow: 0px 3px 3px #48484842;
overflow-wrap: anywhere;
text-align: right;
font-family: "Inter";
}*/

/*#chating .message .chat-content {
    max-width: calc(100% - 50px);
    border-radius: 5px 0 5px 5px;
    border-right-width: 3px;
    background: #f9fff2;
    box-shadow: 0px 3px 3px #48484842;
    overflow-wrap: anywhere;
    text-align: right;
    font-family: "Inter";
}*/

.out-going .chat-content:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-right: 5px solid #f9fff2;
    border-bottom: 5px solid transparent;
    right: -5px;
    top: 6px;
    transform: rotate(180deg);
}

.in-comming .chat-content:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-right: 5px solid var(--white);
    border-bottom: 5px solid transparent;
    left: -5px;
    top: 3px;
}



.message.out-going .chat-content {
    border-right-width: 3px;
}


#chating .outer-wrapper.static-chat-box {
    width: 100%;
    max-height: 100vh;
    padding: 0;
    margin: 0;
    position: static;
    display: flex;
    justify-content: center;
    align-items: center;
}

    #chating .outer-wrapper.static-chat-box .wrapper-list-chat {
        width: 100%;
    }


    /*#chating .outer-wrapper.static-chat-box #userMsgList {
        margin: 0;
    }*/

    #chating .outer-wrapper.static-chat-box .card-footer {
        padding: 1rem;
        text-align: right;
    }

.page-item .page-link:focus {
    box-shadow: 0px 0px 0px 3px #33227d55 !important;
}


.page-item.active .page-link {
    background-color: #33227d !important;
    border-color: #33227d !important;
}


/* */
.header-composer {
    width: 100%;
    height: auto;
    padding: 1rem;
    margin: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    background-color: #33227d;
}

.header-composer-profiles {
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
}

    .header-composer-profiles .profile-pic {
        width: 3rem;
        height: 3rem;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 3rem;
        overflow: hidden;
    }

        .header-composer-profiles .profile-pic > img {
            min-width: 100%;
            min-height: 100%;
            object-fit: cover;
        }

    .header-composer-profiles .name {
        font-size: 1.125rem;
        font-weight: 500;
    }

#userList {
    width: 100%;
    height: calc(100vh - 86px - 340px);
    padding: 1rem;
    margin: 0;
    position: relative;
}

#userMsgList {
    width: 100%;
    height: 100%;
    max-height: 100%;
    padding: 0;
    margin: 0;
    position: relative;
    overflow-x: hidden;
}

.nomsg-wrapper {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    display: none;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 400;
    color: #33227d55;
}

.body-composer {
    width: 100%;
    height: 100%;
    max-height: 100%;
    padding: 1rem;
    margin: 0;
    position: relative;
}

    .body-composer textarea {
        width: 100%;
        height: auto;
        padding: 1rem;
        margin: 0 auto;
        position: relative;
        border: 2px solid #33227d;
    }

        .body-composer textarea:focus {
            border-color: #33227d;
            box-shadow: 0px 0px 0px 5px #33227d33;
        }

.footer-composer {
    width: 100%;
    height: auto;
    padding: 0 1rem 1rem 0;
    margin: 0;
    display: flex;
    justify-content: flex-end;
}

    .footer-composer .cs-btn-onboard.-cancel {
        color: #d70903;
        border-color: #d70903;
    }



#userMsgList .message {
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0 0 1rem 0;
    position: relative;
}

    #userMsgList .message .profile-pic {
        width: 2.5rem;
        height: 2.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 3rem;
        font-size: 1.125rem;
        font-weight: 500;
        text-transform: uppercase;
        line-height: normal;
    }

    #userMsgList .message.in-coming .profile-pic {
        color: #fff;
        background-color: #33227d;
    }

    #userMsgList .message.out-going .profile-pic {
        color: #fff;
        background-color: #fd8c09;
    }

    #userMsgList .message .chat-content {
        width: auto;
        height: auto;
        padding: .5rem 1rem;
        margin: 0;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        color: #000;
        background-color: #e4deff;
        border-radius: .5rem;
    }

        #userMsgList .message .chat-content > span {
            color: #33227d;
            font-size: 1.125rem;
            font-weight: 500;
            word-break: break-all;
        }

        #userMsgList .message .chat-content .time span {
            color: #33227db5;
            font-size: small;
            font-weight: 500;
        }

    #userMsgList .message.out-going .chat-content > span {
        color: #fd8c09;
    }

    #userMsgList .message.in-comming .chat-content > span {
        color: #33227d;
    }

    #userMsgList .message.in-comming .chat-content .time span {
        color: #33227db5;
    }

    #userMsgList .message.out-going .chat-content .time span {
        color: #ffa339a8;
    }
.customGuideTitle {
    font-size: 1.75rem;
    color: rgb(31, 20, 75);
}