@import url("./main.css");

.section-title {
    font-family: Recoleta !important;
    font-size: 34px;
}

.section-desc {
    font-size: 15px !important;
    color: grey !important;
}

.login-section {
    min-height: 100vh;
}

.login-banner-area {
    padding: 26px !important;
    min-height: 100vh;
    display: table-cell;
    vertical-align: top;
}

.login-strip {
    background-color: var(--primary);
    height: 50vh;
    background-image: url("../assets/login-back.png");
    background-size: cover;
    background-position-y: center;
    background-repeat: no-repeat;
}

.login-strip h1 {
    text-shadow: 1px 2px 2px var(--darker);
    color: white;
    margin-bottom: 0px !important;
}

.login-card {
    width: 380px;
    padding: 30px;
    background: white;
    border: 2px solid #80808033;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(126, 142, 177, 0.3);
    margin-top: -161px;
}

.page-title {
    /* color: #383e46; */
    color: var(--dark-grey);
}

.table-card {
    border-radius: 6px !important;
    /* box-shadow: 0 2px 4px rgba(126, 142, 177, 0.3) !important; */
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

.table-img {
    height: 70px;
    width: 71px;
    object-fit: contain;
    margin: 5px 0px;
}

.ub-card {
    border-radius: 15px !important;
    /* box-shadow: 0 2px 4px rgba(126, 142, 177, 0.3) !important; */
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px 0px !important;
    padding: 15px !important;
    background-color: white !important;
}

.address-card {
    padding: 15px;
    border-radius: 10px;
    background: var(--light-back);
}

.company-avatar {
    height: 120px;
    width: 120px;
    object-fit: cover;
    border-radius: 1000px;
    background-color: var(--light-back);
}

.sms-logo {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.header-area {
    background-color: #f5f5f5;
    padding: 15px;
}

.header-area img {
    height: 66px;
    width: 100%;
    object-fit: contain;
}

.header-area h2 {
    text-shadow: 1px 2px 4px #111;
    color: white;
    margin-bottom: 0px !important;
}

.header-area h2 span {
    color: var(--primary) !important;
}

/* Forntend CSS */

.front-header {
    width: 100%;
    /* background-color: var(--darker); */
    padding: 13px 10px;
}

.front-logo h2 {
    color: var(--darker);
    font-size: 26px;
    margin-bottom: 0;
}

.front-logo h2 span {
    font-family: myFontMed !important;
    color: var(--primary) !important;
}

.front-logo img {
    height: 43px;
}

.front-header-ul {
    list-style-type: none;
    padding: 0 !important;
    margin-right: 15px;
    display: flex;
    margin-bottom: 0px;
}

.front-header-ul li a {
    color: #000;
    font-size: 15px;
    font-weight: 500;
    padding: 11px;
}

.front-header-ul li a:hover {
    color: var(--primary);
}

/* Banner Section */
.desk-header-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.mobile-header-nav {
    display: none;
    text-align: end;
}

.banner-section {
    background-color: var(--primary-dark);
    width: 100%;
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-image: url("../assets/banner-bg.png"); */
    background-size: cover;
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
}

.banner-section h1 {
    color: white;
    font-family: Recoleta !important;
    font-size: 50px;
}

.banner-section p {
    color: #ffffffad;
    font-size: 17px;
}

/* Payment Methods */
.payment-card {
    width: 100%;
    background: white;
    padding: 15px;
    border-radius: 10px;
    position: relative;
    box-shadow: 12px 12px 16px 0 rgba(0, 0, 0, 0.25),
        -8px -8px 12px 0 rgba(255, 255, 255, 0.3);
    background-image: linear-gradient(
        to left,
        var(--primary),
        var(--primary-dark)
    );
}

.payment-card p {
    margin-bottom: 6px !important;
    color: #eaeaea;
    font-size: 15px;
}

.payment-card h3 {
    color: white;
    margin-top: 14px;
}

.payment-m-action {
    position: absolute !important;
    top: 11px;
    right: 6px;
}

.payment-m-select {
    position: absolute !important;
    top: 11px;
    right: 30px;
}

/* Subscription */
.subscription-card {
    width: 100%;
    background: white;
    padding: 15px;
    border-radius: 10px;
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
}

.subscription-card h1 span {
    font-size: 18px;
    color: gray;
}

.current-plan-label {
    margin-bottom: 5px !important;
    font-size: 14px;
    color: gray;
}

/* Email Utilities */
.emailSection {
    cursor: pointer;
}

.emailSection:hover {
    color: var(--primary);
}

.gallery-img-div {
    position: relative;
}

.gallery-images {
    width: 100%;
    height: 180px;
    object-fit: cover;
    cursor: pointer;
}

.company-images {
    width: 100%;
    height: 100px;
    object-fit: cover;
    cursor: pointer;
}

.gallery-com-images {
    width: 100%;
    height: 80px;
    object-fit: cover;
    cursor: pointer;
}

.color-pick {
    width: 100%;
}

.selectedcheck {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 5 !important;
}

.media-colum {
    border-right: 1px solid #d6d6d6;
}

/* Features Section */
.features-section {
    padding: 50px 15px;
    background-color: #edeef0;
    background-image: url("../assets/patren.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: lighten;
}

.feature-card {
    background-color: white;
    border-radius: 15px;
    display: flex;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
        rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
    transition: transform 0.2s;
}

.feature-card:hover {
    transform: scale(1.05);
}

.feature-card img {
    height: 182px;
    width: 200px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    background-color: grey;
    object-fit: cover;
}

.feature-card .features-detail {
    padding: 20px;
    width: 100%;
    position: relative;
}

.feature-card .features-detail .desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    margin-bottom: 0 !important;
}

.feature-card .features-detail .feature-action {
    position: absolute;
    bottom: 15px !important;
    left: 20px !important;
    margin-bottom: 0px !important;
    color: var(--primary);
    font-size: 15px;
    font-weight: 600;
}

.feature-card .features-detail .feature-action i {
    font-size: 18px !important;
    color: var(--primary) !important;
}

/* Pricing Section */
.pricing-section {
    padding: 50px 15px;
    background-image: url("../assets/pricing-bg.svg");
    background-size: cover;
    background-repeat: no-repeat;
}

.price-card {
    background: white;
    border: 2px solid #dbdbdb;
    border-radius: 10px;
    height: 500px;
    position: relative;
    transition: transform 0.2s;
    margin-bottom: 20px;
}

.price-card:hover {
    transform: scale(1.05);
    border: none;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
        rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
        rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

.primary-border {
    border: 2px solid var(--primary);
}

.price-card .price-header-area {
    padding: 20px 15px;
    text-align: center;
}

.price-card .price-header-area h2 {
    color: #646464;
    font-size: 22px;
}

.price-card .price-header-area h1 span {
    font-size: 20px !important;
}

.price-card .price-header-area p {
    font-size: 13px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.price-card .v-divider {
    border: 1px solid #dbdbdb !important;
}

.price-card .price-details {
    padding: 20px 15px;
}

.price-card .price-details i {
    color: var(--primary) !important;
    font-size: 19px !important;
}

.price-card .price-details p {
    margin-bottom: 0px !important;
}

.price-card .price-details p span {
    font-size: 17px;
    font-family: myFontBold !important;
    font-weight: bold;
}

.price-card .my-price-btn {
    padding: 11px;
    background: var(--primary-dark);
    text-align: center;
    color: white;
    font-weight: bold;
    position: absolute;
    bottom: -22px;
    right: 0;
    left: 0;
    margin: auto;
    width: 149px;
    border-radius: 10px;
    font-size: 13px;
    cursor: pointer;
}

.price-card .recommended-badge {
    padding: 7px;
    background: var(--primary-dark);
    text-align: center;
    color: white;
    font-weight: bold;
    position: absolute;
    top: -16px;
    right: 0;
    left: 0;
    margin: auto;
    width: 131px;
    border-radius: 10px;
    font-size: 10px;
}

.price-card .admin-actions {
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    bottom: -21px;
    display: flex;
    justify-content: center;
    width: 100%;
}

.price-card .price-delete-btn {
    padding: 8px;
    background: var(--red);
    text-align: center;
    color: white;
    font-weight: bold;
    width: 90px;
    border-radius: 10px;
    font-size: 13px;
    cursor: pointer;
}

.price-card .price-edit-btn {
    padding: 8px;
    background: var(--primary-dark);
    text-align: center;
    color: white;
    font-weight: bold;
    width: 90px;
    border-radius: 10px;
    font-size: 13px;
    cursor: pointer;
}

/* Contact Section */

.contact-section {
    background-color: #edeef0;
    width: 100%;
}

.contact-section .contact-form {
    padding: 50px 30px !important;
}

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

/* Footer Section */
.footer-section {
    padding: 0px 15px;
    background-image: url("../assets/patren.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: lighten;
}

.footer-section-con {
    padding: 35px 35px !important;
    background-color: white !important;
}

.footer-desc {
    margin-top: 15px;
    font-size: 13px;
    color: #595959;
}

.footer-title {
    font-size: 18px;
    font-weight: 600;
    font-family: Recoleta !important;
}

.footer-section ul {
    list-style-type: none;
    padding: 0px !important;
}

.footer-section ul li {
    margin-bottom: 5px;
}

.footer-section ul li a {
    font-size: 15px;
    color: #595959;
}

.footer-section ul li a:hover {
    color: var(--primary);
    font-weight: 600;
}

.footer-section ul li p {
    font-size: 15px;
    color: #595959;
    margin-bottom: 8px !important;
    cursor: pointer;
}

.footer-section ul li p:hover {
    color: var(--primary);
    font-weight: 600;
}

/* Dashboard CSS ////// */
.dash-parent-card {
    background: var(--darker);
    padding: 30px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px,
        rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}

.dash-card {
    padding: 15px;
    border-radius: 10px;
    cursor: pointer;
    background-color: #ffffff29;
    transition: transform 0.2s;
}

.dash-card-active {
    padding: 15px;
    border-radius: 10px;
    cursor: pointer;
    background-color: #0053f0;
    transition: transform 0.2s;
}

.dash-card:hover {
    transform: scale(1.05);
    background-color: var(--primary);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
        rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
        rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

.dash-card p {
    margin-bottom: 7px !important;
    color: white;
}

.dash-card h2 {
    margin-bottom: 0px !important;
    color: white;
}

/* Dash card 2 */
.dash-parent-card2 {
    background: var(--primary-dark);
    padding: 30px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px,
        rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}

.dash-card2 {
    padding: 15px;
    border-radius: 10px;
    cursor: pointer;
    background-color: #ffffff29;
    transition: transform 0.2s;
}

.dash-card2:hover {
    transform: scale(1.05);
    background-color: var(--primary);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
        rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
        rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

.dash-card2 p {
    margin-bottom: 7px !important;
    color: white;
}

.dash-card2 h2 {
    margin-bottom: 0px !important;
    color: white;
}

/* Tickets */

.ticket-header-card {
    padding: 15px;
    background: #f0f0f0;
    display: flex;
    align-items: flex-start;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
}

.ticket-header-card p {
    margin-bottom: 0px !important;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.subject-card {
    margin-bottom: 0px !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ticket-card {
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
        rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    position: relative;
    border-radius: 10px;
    padding: 15px;
}

.ticket-card .desc {
    font-size: 13px;
    color: gray;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ticket-card h5 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ticket-card h5 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ticket-detail {
    display: flex;
    margin-bottom: 8px;
}

.ticket-detail i {
    font-size: 21px !important;
    color: #464646 !important;
}

.ticket-detail p {
    margin-bottom: 0px !important;
    font-size: 14px;
    color: #6f6f6f;
    font-weight: 600;
}

.ticket-card-action {
    position: absolute !important;
    top: 11px !important;
    right: 5px !important;
}

.all-tickets {
    background-color: #3085f91c !important;
}

.opened-tickets {
    background-color: #4caf501c !important;
}

.closed-tickets {
    background-color: #f443361c !important;
}

.reopened-tickets {
    background-color: #0d47a11c !important;
}

.waiting-tickets {
    background-color: #e651001c !important;
}

.waiting-tickets {
    background-color: #e651001c !important;
}

.inreview-tickets {
    background-color: #7955481c !important;
}

/* No Data Widget  */
.ub-no-result {
    height: 300px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.ub-no-result img {
    height: auto;
    width: 356px;
}

.ub-no-result h2 {
    font-size: 16px;
    color: grey;
}

.admin-plan-card h3 {
    font-size: 22px;
}

.admin-plan-card h2 span {
    font-size: 18px;
}

.admin-plan-card .desc {
    font-size: 14px;
    color: grey;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.admin-plan-card .plans-features {
    margin-left: 8px;
}

.admin-plan-card .plans-features span {
    font-weight: 600;
    font-family: myFontMed !important;
}

/*///////////// Chat Section Css */

.chat-box {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 11px;
    border: 1px solid #1c1c1c0f;
    padding: 1.5rem;
    height: 85vh;
}

.chat-top-bar {
    animation: 0.35s ease-in-out 0s 1 slideInFromTop;
    padding: 1rem 1.25rem;
    align-items: center;
    display: flex;
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.043137254901960784);
    background-color: rgba(255, 255, 255, 1);
    border-radius: 0.375rem;
    border: 1px solid #80808040;
}

.partic-detail {
    display: flex;
    align-items: center;
    margin-right: auto;
}

.partic-detail img {
    height: auto;
    width: 3rem;
    object-fit: cover;
    border-radius: 1000px;
}

.partic-detail a {
    font-size: 15px;
    line-height: 1.5rem;
    font-weight: 600;
    color: black !important;
}

.partic-detail p {
    font-size: 13px;
    margin-bottom: 0px !important;
    color: rgba(113, 128, 150, 1);
}

.overflow-hidden {
    overflow: hidden;
}

.w-full {
    width: 100%;
}

.clear-both {
    clear: both;
}

/* Ticket Section CSS */

/* FAQ SECTION */
.faq-header {
    text-align: center;
    padding: 40px 15px;
}

.faq-header h1 {
    font-family: Recoleta !important;
    font-weight: bold;
}

.faq-card {
    background-color: white;
    padding: 15px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
        rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    border-radius: 6px;
    cursor: pointer;
}

.faq-card:hover {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
}

.faq-card:hover h4 {
    color: var(--primary);
}

.faq-card h4 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--darker);
}

.faq-card p {
    margin-bottom: 0px !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-helpful {
    padding: 40px 15px;
    margin-top: 30px;
    background-color: #ececee;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    text-align: center;
}

.article-helpful h4 {
    font-family: Recoleta !important;
    font-weight: bold;
}

.article-helpful i {
    font-size: 37px !important;
    transition: transform 0.2s;
}

.article-helpful i:hover {
    transform: scale(1.1);
}

.article-helpful .happy-icon {
    color: var(--primary-dark) !important;
}

.article-helpful .happy-icon:hover {
    color: var(--primary) !important;
}

.article-helpful .sad-icon {
    color: var(--icon-grey) !important;
}

.article-helpful .sad-icon:hover {
    color: var(--red) !important;
}

.admin-search {
    width: 400px;
    margin-left: 46px;
    animation: 0.35s ease-in-out 0s 1 slideInFromTop;
}

.time-now {
    color: gray;
    font-size: 15px;
    font-weight: bold;
}

/* Announcement-bar */

/* Notification Bar */
.notification-bar .notific-sticky-header {
    position: absolute;
    background-color: white;
    width: 100%;
    top: 0;
    padding-top: 10px;
    z-index: 2;
}

.notification-bar .notific-sticky-footer {
    position: absolute;
    background-color: white;
    width: 100%;
    bottom: 0;
    padding-top: 10px;
}

.notific-card-section {
    z-index: 1;
    margin-top: 75px;
    margin-bottom: 75px;
    padding: 0px 8px;
}

.notific-card {
    display: flex;
    background: white;
    padding: 9px 8px;
    border-radius: 10px;
    cursor: pointer;
}

.notific-card:hover {
    background-color: #ededed;
}

.notific-card-section h6 {
    font-size: 14px;
    margin-bottom: 3px;

    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notific-card-section p {
    font-size: 12px;
    margin-bottom: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ticket-history {
    height: 300px;
    overflow: scroll;
}

/* All Notifications Css */

.all-noti-mail {
    font-size: 12px;
    font-weight: 600;
    color: gray;
}

.search_on_mobile {
    display: none !important;
}

/* Page not found */

.page-not-found {
    padding: 40px 15px;
}

.page-not-found h2 {
    font-family: soraSemiBold !important;
    font-weight: 600 !important;
}

.page-not-found p {
    font-size: 15px;
    margin: 15px 0px !important;
}

.page-not-found img {
    width: auto;
    height: 400px;
    margin-top: 30px;
}

/* 2 Auth Css */
.two-auth-card {
    background-color: white;
    padding: 26px;
    border-radius: 6px;
    width: 100%;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px,
        rgba(17, 17, 26, 0.05) 0px 8px 32px;
}

.two-auth-card p {
    font-size: 15px;
    color: gray;
    font-weight: 600;
}

.plan-summary h1 span {
    font-size: 22px !important;
}

.plan-summary-desc {
    font-size: 13px;
    margin-bottom: 0 !important;
    color: gray;
}

/* Payment Success */
.payment-success {
    padding: 40px 15px;
}

.payment-success img {
    height: 200px;
    width: auto;
}

.payment-success-card {
    text-align: center;
}

.payment-success-card p {
    font-size: 13px;
}

/* Dev Mode CSS */
.dev-mode-json-card {
    padding: 15px;
    background: #f2f2f2;
    border-radius: 15px;
}

.banner-setting-avatar {
    height: 149px;
    width: 300px;
    object-fit: cover;
    border-radius: 10px;
    background-color: var(--light-back);
}

.website-setting-avatar {
    height: 149px;
    width: 300px;
    object-fit: contain;
    border-radius: 10px;
    background-color: var(--light-back);
    padding: 15px;
}

/* Feature Card New */
.feature-card-2 {
    padding: 20px;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.2s;
}

.feature-card-2:hover {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
        rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
        rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    transform: scale(1.02);
}

.feature-card-2 .feature-icon {
    height: 40px;
    margin-bottom: 10px;
}

.feature-card-2 .feature-image {
    width: 100%;
    height: 350px;
    object-fit: contain;
    object-position: right;
    margin-bottom: -47px;
    margin-left: 47px;
}

.notes-card {
    background-color: white !important;
    padding: 15px !important;
    box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px,
        rgba(9, 30, 66, 0.31) 0px 0px 1px !important;
    margin-bottom: 20px;
}

.announcement-bar .notific-sticky-header {
    position: absolute;
    background-color: white;
    width: 100%;
    height: 200px;
    top: 0;
    padding-top: 10px;
    z-index: 2;
}