/**
 * Theme Name: Helper SNS
 * Author: Helper SNS
 * Author URI: https://imtusher.com/
 * Description: Helper SNS-The Cheapest SMM Panel & Cost Effective Social Media Growth Solutions!
 * Developed by: Go2TopIT &  Tanvirul Islam Tusher
 * Developer URI: https://www.linkedin.com/in/tanvirul-islam-tusher-87982789/
 * Tags: smm panel, custom smm panel
*/

html,
body {
    width: 100%;
    overflow-x: hidden !important;
    letter-spacing: -0.02em;
    padding: 0;
}

:root {
    --bd-violet-rgb: 17, 103, 178;
    --bd-accent-rgb: 208, 240, 255;
    --bd-pink-rgb: 166, 250, 178;
    --nav-padding: 141px;
    --bs-link-color: #4a4a4a;
    --bs-light-rgb: 248, 249, 253;
    --bs-body-font-size: 0.95rem;
    --theme-tomato: #8ad700;
}

.bg-main {
    background-color: var(--bs-link-color);
}
.btn-main {
    background-color: var(--bs-link-color);
    color: #ffffff;
}
.text-main {
    color: var(--bs-link-color);
}
.text-second {
    color: #ff5701;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #8ad700;
    --bs-btn-border-color: #8ad700;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #8ad700;
    --bs-btn-hover-border-color: #8ad700;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #8ad700;
    --bs-btn-active-border-color: #8ad700;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #8ad700;
    --bs-btn-disabled-border-color: #8ad700;
}

.btn-outline-primary {
    --bs-btn-color: #8ad700;
    --bs-btn-border-color: #8ad700;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #8ad700;
    --bs-btn-hover-border-color: #8ad700;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #8ad700;
    --bs-btn-active-border-color: #8ad700;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #8ad700;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #8ad700;
    --bs-gradient: none;
}

::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #d4d4e9;
}
::-webkit-scrollbar-thumb {
    background: #4a4a4a;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #8ad700;
}

.y-g-bg {
    background: #8ad700;
}

.smm-cta {
    background: #8ad700;
    font-weight: 600;
    --bs-btn-padding-x: 1.55rem;
    text-transform: uppercase;
    border: 0;
    transition: all 0.5s ease;
}
.smm-cta:hover {
    background: #7ec200;
}

.btn-light i {
    color: #8ad700;
}

.form-select {
    background-color: #fafafa;
}

.cursor-pointer {
    cursor: pointer;
}

.bg-yellow {
    background: #4a4a4a !important;
    color: #fff;
}

.bg-blue {
    background: #8ad700 !important;
}

.dropdown-menu {
    --bs-dropdown-link-hover-bg: #e6f7ff;
    --bs-dropdown-link-active-bg: #e6f7ff;
}

.nav-pt {
    padding-top: var(--nav-padding) !important;
}

a {
    color: #8ad700;
    text-decoration: none;
}

.form-control:focus,
.form-check-input:focus {
    border-color: #8ad700;
    box-shadow: none !important;
}

@media screen and (min-width: 1200px) {
    .py-5 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
    .guest-body .container-fluid {
        padding-left: 25px;
        padding-right: 25px;
    }
}

/* navbar */
.navbar {
    background: #ffffff;
    padding: 1rem 0;
    -webkit-transition: all 0.15s ease;
    transition: all 0.15s ease;
}
.navbar.bg-white-o {
    background: #ffffff;
    padding: 0.5rem 0;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}
.navbar .offcanvas {
    background-color: #f5f5f5;
}
.navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
    color: #fff;
}
.nav-singup {
    border: 2px solid #8ad700 !important;
    border-radius: 8px;
    color: #fff;
}
.nav-singup:hover {
    background-color: #8ad700;
    color: #fff !important;
}

.navbar-toggler {
    background-color: #4a4a4a;
    border-color: #4a4a4a;
    color: #fff;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.offcanvas-header .btn-close {
    background-color: #fff;
}

@media screen and (max-width: 768px) {
    .nav-singup {
        padding: 10px 15px;
    }
}

@media screen and (min-width: 1200px) {
    .nav-dropdown {
        width: 830px;
        left: -300px !important;
    }
    .nav-dropdown li {
        width: 24%;
        display: inline-block;
        margin-bottom: 7px;
    }
    .nav-dropdown li:first-child {
        width: 100%;
        text-align: center;
    }
    .offcanvas-body .dropdown-item {
        font-size: 14px;
        font-weight: 600;
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

.offcanvas.offcanvas-end {
    border-left: none;
}

.dropdown-item.active,
.dropdown-item:active {
    color: #444;
}

/* home hero section */
.home-hero-section {
    padding: 100px 0;
    background: #f8fcff;
}
/* .bg-color {
    background-image: linear-gradient(180deg, rgba(var(--bs-body-bg-rgb), 0.01), rgba(var(--bs-body-bg-rgb), 1) 85%),radial-gradient(ellipse at top left, rgba(var(--bd-accent-rgb), 0.5), transparent 50%),radial-gradient(ellipse at top right, rgba(var(--bs-primary-rgb), 0.5), transparent 50%),radial-gradient(ellipse at center right, rgba(var(--bd-violet-rgb), 0.5), transparent 50%),radial-gradient(ellipse at center left, rgba(var(--bd-pink-rgb), 0.5), transparent 50%);
} */
.hero-h1 {
    font-size: 2.2rem;
    line-height: 1.2;
}
@media screen and (min-width: 1200px) {
    .home-hero-section .container {
        padding-top: 3rem;
        padding-bottom: 2rem;
    }
}
@media screen and (min-width: 1400px) {
    .home-hero-section .container {
        padding-top: 4rem;
        padding-bottom: 3rem;
    }
}
@media screen and (max-width: 768px) {
    .home-hero-section {
        margin-top: 40px;
    }
    .home-hero-section .container {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    .hero-h1 {
        font-size: 25px;
    }
}
.home-login {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#effaff+0,d0f0ff+100 */
    background: rgb(239, 250, 255); /* Old browsers */
    background: -moz-linear-gradient(
        top,
        rgba(239, 250, 255, 1) 0%,
        rgba(208, 240, 255, 1) 100%
    ); /* FF3.6-15 */
    background: -webkit-linear-gradient(
        top,
        rgba(239, 250, 255, 1) 0%,
        rgba(208, 240, 255, 1) 100%
    ); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(
        to bottom,
        rgba(239, 250, 255, 1) 0%,
        rgba(208, 240, 255, 1) 100%
    ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#effaff', endColorstr='#d0f0ff',GradientType=0 ); /* IE6-9 */
    border: 2px solid #4a4a4a;
    border-bottom: 4px solid #4a4a4a;
}
.form-check {
    padding-left: 2.3em;
}

.btn.google {
    background: #fff !important;
    color: #444;
    border: 1px solid #8ad700;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    /* max-width: 295px; */
}
.btn.twitter {
    background: #00acee !important;
    color: #fff;
}

.top-sec-img-wrap {
    position: relative;
}

#top-sec {
    padding: 140px 0 50px;
    position: relative;
}
.top-img-1 {
    position: absolute;
    left: 35%;
    top: 10%;
    -webkit-animation: hero-thumb-sm-2-animation 4s linear infinite alternate;
    animation: hero-thumb-sm-2-animation 4s linear infinite alternate;
}

.top-img-2 {
    position: absolute;
    right: 7%;
    bottom: 28%;
    -webkit-animation: hero-thumb-sm-animation 3s linear infinite alternate;
    animation: hero-thumb-sm-animation 3s linear infinite alternate;
}

@keyframes hero-thumb-sm-2-animation {
    0% {
        transform: translateY(-30px);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes hero-thumb-sm-animation {
    0% {
        transform: translateY(-20px) translateX(30px);
    }

    to {
        transform: translateY(-20px) translateX(0);
    }
}
.top-sec-img {
    -webkit-animation: hero-thumb-animation 2s linear infinite alternate;
    animation: hero-thumb-animation 2s linear infinite alternate;
}
@keyframes hero-thumb-animation {
    0% {
        transform: translateY(-20px);
    }

    to {
        transform: translateY(0);
    }
}

@media screen and (max-width: 768px) {
    .top-sec-img-wrap {
        margin-top: 20px;
    }
    .top-img-1 {
        left: 34%;
        top: 5%;
        width: 50px;
    }

    .top-img-2 {
        position: absolute;
        right: 10%;
        bottom: 18%;
        width: 50px;
    }
}

.info-ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
}
.info-ul p {
    font-size: 14px;
    font-weight: 400;
    color: #1d1d1d;
    position: relative;
    padding-left: 29px;
}
.info-ul p::after {
    content: "";
    position: absolute;
    background-image: url("../images-n/he5bpfee6o1fn2dk.webp");
    width: 26px;
    height: 29px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-size: 26px 29px;
}
.info-ul li {
    flex: 0 0 33.33%;
    max-width: 33.33%;
}

#social-sec {
    padding: 50px 0;
    background: #d6efd8;
}
.social-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
    align-content: center;
    justify-content: space-between;
}

#cheapest {
    padding: 80px 0;
}
.cheapest-img-1 {
    position: absolute;
    top: 30%;
    left: 0;
    -webkit-animation: hero-thumb-sm-2-animation 2s linear infinite alternate;
    animation: hero-thumb-sm-2-animation 2s linear infinite alternate;
}
.cheapest-img-2 {
    position: absolute;
    top: 7%;
    right: 0;
    -webkit-animation: hero-thumb-sm-2-animation 4s linear infinite alternate;
    animation: hero-thumb-sm-2-animation 4s linear infinite alternate;
}

@media screen and (max-width: 768px) {
    .cheapest-img-1 {
        left: 7%;
        width: 100px;
    }

    .cheapest-img-2 {
        right: 0;
        width: 90px;
    }
}

/* choose */
.why-choose-info {
    padding: 20px 20px;
    background-color: #f4f9fd;
}

.service-section .service-info {
    padding: 20px 20px;
    min-height: 266px;
}

.service-section .service-info h5 {
    font-size: 17px;
}

.specials-inner {
    background-color: #4a4a4a;
    border: 1px solid #3f428a;
}

@media screen and (min-width: 1200px) {
    .specials-inner > .row > .col-md-3:nth-child(1),
    .specials-inner > .row > .col-md-3:nth-child(2),
    .specials-inner > .row > .col-md-3:nth-child(3) {
        border-right: 1px solid #6567a5;
    }
}

@media screen and (max-width: 768px) {
    .specials-inner > .row > .col-md-3:nth-child(1),
    .specials-inner > .row > .col-md-3:nth-child(2),
    .specials-inner > .row > .col-md-3:nth-child(3) {
        border-right: 0;
        border-bottom: 1px solid #6567a5;
    }
}

.speciality-section .specials-inner h5 {
    font-size: 30px;
    margin-bottom: 15px;
}

.why-choose-info.benefits-inner {
    position: relative;
}

@media screen and (min-width: 1200px) {
    .why-choose-info.benefits-inner {
        min-height: 313px;
    }
}

@media screen and (min-width: 1400px) {
    .why-choose-info.benefits-inner {
        min-height: 291px;
    }
}

@media screen and (max-width: 768px) {
    .why-choose-info.benefits-inner {
        margin-bottom: 45px;
    }
}

.why-choose-info.benefits-inner h5 {
    background: #1a1c56;
    color: #fff;
    padding: 35px;
    font-size: 18px;
    border-radius: 4px;
    position: absolute;
    width: calc(100% - 39px);
    top: -45px;
}
.why-choose-section .why-choose-info p {
    text-align: justify;
    margin-top: 45px !important;
}
/* @media screen and (min-width: 1200px) {
    .why-choose-info {
        min-height: 434px;
    }
}
@media screen and (min-width: 1400px) {
    .why-choose-info {
        min-height: 388px;
    }
} */

.icon-effective {
    display: block;
    height: 70px;
    width: 70px;
    text-align: center;
    line-height: 66px;
    border-radius: 50%;
    color: #fff;
    margin: 0 auto;
}

.cta-div2 {
    background-color: #8ad700;
    color: #fff;
}

.cta-div .btn:hover {
    background: #fff;
    border-color: #fff;
}

.services-div {
    transition: all 0.3s ease;
}

@media screen and (min-width: 1200px) {
    .services-div:hover {
        -webkit-transform: translateY(-2px);
        -moz-transform: translateY(-2px);
        -ms-transform: translateY(-2px);
        transform: translateY(-2px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    }
}

.review-users-img {
    width: 50px !important;
    height: 50px;
    border: 2px solid #4a4a4a;
}
.review-user-info {
    line-height: 1;
}
.review-user-name {
    font-size: 14px;
}
.review-user-followers {
    font-size: 12px;
    color: #6bab3b;
}
.verified-text {
    color: #4a4a4a;
    font-size: 14px;
}

/* footer */
.social-icons {
    height: 30px;
    width: 30px;
    text-align: center;
    line-height: 26px;
    border-radius: 50%;
    color: #fff;
    background: #4a4a4a;
    display: block;
}
.social-icons:hover {
    color: #fff;
    background: #8ad700;
}
.footer-infos p,
.footer-infos ul li a {
    color: rgb(33, 37, 41) !important;
    font-size: 14px;
}
.copyright-menu {
    display: flex;
    justify-content: flex-end;
    list-style: none;
    padding: 0;
    margin: 0;
}
.copyright-menu li {
    margin-right: 10px;
}
.copyright-menu li:last-child {
    margin-right: 0px;
}
.copyright-menu li a {
    color: rgb(33, 37, 41) !important;
    text-decoration: none;
    font-size: 14px;
}
.single-review.card h4 {
    font-size: 20px;
}
.review-text p {
    font-size: 14px;
}

.special-price .slide {
    text-align: center;
}
.special-price .slide .fragment__sale {
    display: inline-block;
    background: #74b23c;
    color: #fff;
    padding: 2px 8px;
    border: 1px solid #74b23c;
    border-bottom: 0 none;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    font-size: 17px;
}
.special-price .slide .fragment-package {
    background-color: #fff;
    border: 1px solid #cdcdde;
    border-radius: 7px;
    padding: 24px 22px 28px;
    min-height: 100%;
}
.fragment-package .fragment__head {
    text-align: center;
    font-size: 15px;
    line-height: 1.2;
    color: #a5a7b0;
    font-weight: 600;
    margin-bottom: 18px;
}
.fragment-package .fragment__head strong {
    display: block;
    font-size: 17px;
    line-height: 1.11;
    color: #626470;
    font-weight: 500;
}
.fragment-package .fragment__price {
    background: #178ec4;
    text-align: center;
    color: #fff;
    margin: 0 -22px;
    padding: 10px 22px;
}
.fragment-package .fragment__price p {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0;
}
.fragment-package .fragment__price span {
    display: block;
    font-size: 16px;
    padding: 0 2px;
}
.fragment-package .fragment__price strong {
    display: block;
    font-size: 25px;
    line-height: 1;
    font-weight: 500;
}
.fragment-package .fragment__price span:last-child {
    font-size: 14px;
}
span.star-icon {
    color: #178ec4;
}
.fragment-package .fragment__list {
    text-align: left;
    padding: 18px 0;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    word-break: break-word;
}
.fragment-package .fragment__list ul {
    list-style: none;
    font-size: 14px;
}

.top-header {
    background: #444b54;
}
.top-header a {
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    display: inline-block;
    padding: 10px 0 15px;
}

/*
============================================
            Dashboard Layouts
============================================
*/

:root {
    --primary-gradient: #8ad700;
    --cta-btn: #1e61bb;
    --font-medium: 600;
    --nav-bg: #ffffff;
    --nav-acitve: #43b9fe;
    --nav-box-shadow: 0px 4px 17px rgba(0, 0, 0, 0.11);
    --dark-body-bg: #111826;
    --dark-box-bg: #131e30;
    --dark-btn-bg: #1a2c48;
}

.auth_body {
    background: #f3f3f9;
    transition: 0.54s;
}

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

.auth_body .main__page__area {
    display: flex;
}

.auth_body .content__area .container {
    width: 100%;
    min-width: 100%;
}

.auth_body textarea.form-control {
    padding-top: 10px !important;
    min-height: 200px;
}

.auth_body .main__page__area .sidebar__area {
    position: fixed;
    width: 250px;
    height: 100%;
    background: #242424;
    z-index: 9;
    transition: 0.5s ease;
}
.auth_body .main__page__area .sidebar__area .sidebar_inner_div {
    height: 100vh;
    padding: 15px;
    overflow-y: auto;
}
.auth_body .main__page__area .sidebar__area .sidebar__brand {
    margin-bottom: 15px;
    background: var(--hero-bg-color);
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: 8px;
}

.auth_body .main__page__area .sidebar__area .sidebar__brand img {
    height: 40px;
    width: auto;
}

.sidebar__area .sidebar__user {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 0px 15px;
    margin-bottom: 15px;
}
.sidebar__area .sidebar__user .user__balance {
    font-size: 18px;
    font-weight: 600;
}
.sidebar__area .sidebar__user .user__avatar img {
    width: 40px;
}

.sidebar-profile .username {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
    text-align: center;
}

.sidebar-profile .user-balance {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 130px;
    width: 130px;
    border: 5px solid #e1500f;
    border-radius: 50%;
    color: #fafafa !important;
    font-size: 14px;
    font-weight: 300;
    text-decoration: none !important;
    margin: 0 auto;
}

#user_balance_update {
    font-size: 18px;
    font-weight: 400;
}

.sidebar__menu {
    padding: 0px 15px;
}

.sidebar__menu > ul {
    display: flex;
    flex-direction: column;
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    gap: 3px;
    /* height: calc(100vh - 117px); */
    margin-bottom: 20px;
    overflow: auto;
}

@media only screen and (max-width: 768px) {
    .sidebar__menu > ul {
        margin-bottom: 50px;
    }
}

.sidebar__menu > ul::-webkit-scrollbar {
    display: none;
}
.sidebar_close_btn {
    display: none;
    position: absolute;
    width: 45px;
    height: 45px;
    background: #e34e10;
    color: #ffffff;
    font-size: 25px;
    border-radius: 10px;
    border: none;
    right: -45px;
}

.sidebar__menu > ul .sidebar__menu__item .sidebar__menu__link {
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 10px 20px;
    align-items: center;
    border-radius: 50px;
}

.sidebar__menu > ul .nav-link {
    color: #d8d8d8;
    padding: 0.5rem 0;
    font-size: 14px;
}

.sidebar__menu > ul .nav-link:hover {
    color: #fbe5da;
}

.sidebar__menu > ul .dropdown .btn-toggle {
    width: 100%;
    color: #d8d8d8;
    padding: 0.5rem 0;
    font-size: 14px;
}

#orders-collapse ul li a {
    color: #d8d8d8;
    font-size: 14px;
}

.sidebar__menu > ul .dropdown .btn-toggle::after {
    width: 1.25em;
    line-height: 0;
    box-sizing: border-box;
    content: "+";
    font-weight: 500;
    transition: transform 0.35s ease;
    transform-origin: 0.5em 50%;
    margin-left: 60%;
}

.sidebar__menu > ul .nav-link.active {
    color: #fff;
}

.auth_body .main__page__area .main__content__area {
    margin-left: 250px;
    width: 100%;
    /* width: calc(100% - 250px); */
    transition: 0.5s ease;
}

.auth_body
    .main__page__area
    .main__content__area
    .top__bar__area
    .tob__bar__left
    .button__bar {
    width: 50px;
    height: 50px;
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: var(--primary-gradient);
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

.auth_body
    .main__page__area
    .main__content__area
    .top__bar__area
    .tob__bar__left
    .button__bar
    > span {
    width: 50%;
    height: 3px;
    background: #fff;
    border-radius: 5px;
}
.auth_body
    .main__page__area
    .main__content__area
    .top__bar__area
    .tob__bar__left {
    display: flex;
    gap: 15px;
}
.auth_body .main__page__area .main__content__area .top__bar__area {
    display: flex;
    position: fixed;
    top: 0;
    align-items: center;
    width: calc(100% - 250px);
    justify-content: space-between;
    padding: 10px 20px;
    height: 100px;
    background: #fff;
    z-index: 999;
    transition: 0.5s ease;
}
.auth_body
    .main__page__area
    .main__content__area
    .top__bar__area
    .tob__bar__left
    .welcome__text
    h3 {
    font-size: 20px;
    font-weight: 600;
    color: #222;
    margin-bottom: 3px;
}
.auth_body
    .main__page__area
    .main__content__area
    .top__bar__area
    .tob__bar__left
    .welcome__text
    p {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 0px;
}

.tob__bar__right .desktop__shows {
    display: flex;
    align-items: center;
    gap: 10px;
}

.channel__area > a > img {
    width: 60px;
}

.auth-top-items a {
    height: 40px;
    width: 40px;
    background-color: #8ad700;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 8px;
    font-size: 20px;
    text-decoration: none !important;
    box-shadow: 0 0 15px 0 #8ad70070;
}

.tob__bar__right .accounts__dropdwon .btn_account {
    display: flex;
    gap: 5px;
    align-items: center;
    background: #f4f7ff;
    border: 1px solid #ebebeb;
    border-radius: 37px;
}
.tob__bar__right .accounts__dropdwon .btn_account .account__user {
    display: flex;
    align-items: center;
    gap: 5px;
}
.tob__bar__right
    .accounts__dropdwon
    .btn_account
    .account__user
    .user__avatar
    > img {
    width: 30px;
}
.tob__bar__right
    .accounts__dropdwon
    .btn_account
    .account__user
    .user__text
    h4 {
    font-size: 14px;
    margin-bottom: 2px;
    text-align: left;
    color: #222;
}
.tob__bar__right .accounts__dropdwon .btn_account .account__user .user__text p {
    font-size: 14px;
    margin-bottom: 0px;
    color: #515151;
}

.two__factor .card-body {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 90px;
}
.account__card__title {
    font-size: 20px;
    font-weight: 700;
    color: #222;
}

.account__timezone .card-body form {
    display: grid;
    grid-template-columns: 0.5fr 3fr 1.1fr;
    gap: 30px;
    align-items: center;
}
.account__timezone .time__zone__select {
    position: relative;
}
.account__timezone .time__zone__select .form-control {
    width: 100%;
    height: 50px;
    border-radius: 50px;
    background: #f0f1f5;
    border: 1px solid #ddd;
    color: #595c63;
    font-weight: 400;
    margin-bottom: 0px;
}

.time__zone__select .help-block {
    position: absolute;
    top: 26px;
    left: 25px;
    color: #8f8f8f;
}

.content__area {
    padding-top: 100px;
}

/*
    toggle sidebar
*/

.main__page__area.toggle_sidebar .sidebar__area {
    transform: translateX(-100%);
}

.main__page__area.toggle_sidebar .main__content__area {
    margin-left: 0px;
}

.auth_body
    .main__page__area.toggle_sidebar
    .main__content__area
    .top__bar__area {
    width: 100%;
}

/* NEW ORDER PAGE */

.user__statistic .statstics__card {
    background: #fff;
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 20px;
    gap: 15px;
    box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.07);
}
.user__statistic .statstics__card .st_icon {
    max-width: 85px;
    height: 85px;
    background: #f1dfff;
    padding: 15px;
    border-radius: 15px;
}
.user__statistic .statstics__card .st_icon > img {
    width: auto;
    max-height: 100%;
}
.user__statistic .st_content {
    text-align: left;
}

.user__statistic .st_content .st_top_txt {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
}

.user__statistic .st_content .st_main_txt {
    font-size: 20px;
    font-weight: bold;
}

.anouncement_card .card.card_v2 {
    border-radius: 12px;
    background: #fff;
    box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.07);
    border: none;
    z-index: 0;
}

.announcement_inner {
    display: flex;
    padding: 10px 0px;
    justify-content: space-between;
}

.announcement_inner .left_ann h4 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 3px;
}

.announcement_inner .left_ann p {
    font-size: 18px;
    color: #222;
}

.announcement_inner .left_ann p a {
    color: var(--cta-btn);
    font-weight: bold;
    text-decoration: underline;
}

.btn_announcement {
    border-radius: 10px;
    background: #f0ecfc;
    font-size: 18px;

    font-weight: 600;
    transition: 0.5s;
}

.btn_announcement:hover {
    background: #d4c6fe;
}

.service_filter_wrap.neworder {
    padding: 25px 0px;
}

.service_filter_btn_wrap {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
}

@media only screen and (max-width: 992px) {
    .service_filter_btn_wrap {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

.service_filter_wrap.neworder .service_filter_btn_wrap {
    gap: 12px;
}

.card.card_v3 {
    border-radius: 20px;
    border: none;
}

.card.card_v3 .card-header {
    background: #fbfbfb;
    background-repeat: no-repeat;
    background-position: right center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px 20px 0px 0px;
    padding: 15px;
    height: auto;
}

.card.card_v3 .card-header .text-dark {
    color: #838383 !important;
}

.card.card_v3 .card-body {
    background: #fbfbfb;
    border-top: 1px solid #ddd;
    border-top: none;
    border-radius: 0px 0px 20px 20px;
}

.card.card_v3 .card_header_title {
    color: #333;
    font-weight: 600;
    line-height: 1.2;
    font-size: 16px !important;
    font-style: normal;
}

.card.card_v3 .card_header_dsc {
    font-size: 16px;
    color: #333;
    font-weight: 400;
    line-height: 1.3;
}

.btn_scondary:hover {
    background: #0dc258;
    color: #fff;
}

.new__order__nav__tabs li button {
    background: #fff;
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50px !important;
    margin-left: 5px;
    transition: 0.5s ease !important;
}

.new__order__nav__tabs li:first-child button {
    margin-left: 0px;
}

.new__order__nav__tabs li button.active {
    background: #fff !important;
    width: auto !important;
}
.new__order__nav__tabs li button .icon {
    width: 20px;
    height: 40px;
    line-height: 40px;
}

.new__order__nav__tabs li button .txt {
    font-size: 16px;
    font-weight: 600;
    display: none;
    color: #222;
    transition: 0.5s ease !important;
}

.new__order__nav__tabs li button.active .txt {
    display: block;
}
.mid__logo {
    text-align: center;
}
.mid__logo > img {
    max-width: 190px;
}
.user__access_btn {
    outline: none;
    border: none;
    background: transparent;
}
.user__access_btn .user__avatar > img {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    object-fit: cover;
    object-position: top;
    border: 1px solid var(--nav-acitve);
}
.tob__bar__right .phone__shows,
.tob__bar__mid {
    display: none;
}

.search_new_box {
    display: block;
    position: relative;
    flex-direction: row;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
}
.search_new_box .search_new_input {
    flex-grow: 1;
    display: block;
    height: 50px;
    padding: 5px 13px;
    border-radius: 15px 0px 0px 15px;
    border: 1px solid #f0f1f5;
    background: #f0f1f5;
}

.search_new_box .search_new_input:active,
.search_new_box .search_new_input:focus {
    border-color: transparent !important;
    outline: none !important;
}

.search_new_box .search_new_btn {
    width: 50px;
    height: 50px;
    font-size: 20px;
    border: none;
    color: #232323;
    border-radius: 0px 15px 15px 0px;
    cursor: pointer;
    background: #f0f1f5;
    transition: background 0.5s ease-in-out;
}

.search_new_box .search_new_btn:hover {
    color: #fff;
    background: var(--primary-gradient);
}
.auth_body .form-group {
    position: relative;
}

.auth_body .form-group > label {
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    color: #838383;
    margin-bottom: 5px;
}

small.help-block.min-max {
    position: absolute;
    top: 2px;
    left: 80px;
    font-size: 14px;
    font-weight: bold;
    color: #092251;
}
small.help-block.min-max::after {
    content: ")";
}
small.help-block.min-max::before {
    content: "(";
}
/* .auth_body .form-control,
    .auth_body .form-group > .form-control{
        font-size: 16px;
        background:#f2f2f2;
        color: #838383;
        height: 50px;
        padding: 5px 13px;
        font-weight: 400;
        outline: none;
        box-shadow: none;
        border-radius: 15px;
        border: none;
    } */

.select2-container--default .select2-selection--single {
    font-size: 16px;
    display: flex !important;
    align-items: center;
    background: #f2f2f2;
    color: #838383;
    height: 50px !important;
    padding: 5px 13px;
    font-weight: 400;
    outline: none;
    box-shadow: none;
    border-radius: 15px;
    border: none;
    margin-bottom: 0px;
}

.select2-container .select2-selection__id {
    background: none;
    min-width: 52px;
    min-width: auto;
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: normal;
    color: #333;
}

.services__name {
    font-size: 20px;
    color: #fff;
    font-weight: 500;
    line-height: normal;
    text-align: left;
}

/* .services_details{
        padding: 10px;
    } */

.link__box {
    display: flex;
    justify-content: space-between;
    background: #f0f1f5;
    height: 50px;
    align-items: center;
    padding: 10px 15px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.link__box span > img {
    width: 25px;
}

.utilites_wraper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 30px;
    margin-bottom: 15px;
}

.utilites_wraper .utilites_box {
    display: flex;
    background: #f0f1f5;
    height: 50px;
    align-items: center;
    gap: 5px;
    padding: 10px 13px;
    border-radius: 17px;
}

.services__desc h6,
.example__link h6,
.utilites_wraper .utilites_item h6 {
    font-size: 16px;
    color: #222;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 5px;
}

.services__desc .descriptions_full {
    background: #fff;
    padding: 10px 13px;
    border-radius: 17px;
    border: 1px solid #ddd;
}
.utilites_wraper .utilites_box span > img {
    width: 35px;
}

.utilites_wraper .utilites_box span {
    font-size: 16px;
    font-weight: 400;
    color: #222;
}

/* Order Page */
.search___form {
    position: relative;
}

.search___form .search_input_box {
    height: 45px;
    border: 1px solid #d1d5db;
    background: #f4f7ff;
}
.search___form .search_input_box {
    margin-bottom: 0px;
}
.search___form .search__btn {
    position: absolute;
    border: none;
    background: none;
    font-size: 20px;
    top: 7px;
    right: 20px;
    color: var(--cta-btn);
}

@media only screen and (max-width: 768px) {
    .search___form .search__btn {
        top: 4px;
    }
}

/* Mobile user accessibility */
.user__mobile_canvas {
    width: 85%;
    max-width: 85%;
}

.website---logo > img {
    max-width: 170px;
}
.user__canv__box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #f1f1f1;
    padding: 20px 20px;
    border-radius: 10px;
}
.user__canv__box .user__avatar > img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    object-position: top;
    border: 1px solid var(--cta-btn);
    border-radius: 50px;
    margin-bottom: 5px;
}

.user__canv__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.user__canv__info .user_name {
    font-size: 20px;
    font-weight: bold;
}
.user__canv__info .user_balance {
    font-size: 18px;
    background-color: var(--cta-btn);
    padding: 5px 30px;
    border-radius: 50px;
    color: #fff;
    margin-bottom: 10px;
}
.user__canv__access {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 7px;
}
.user__canv__access .btn__acc {
    width: 100%;
    background: #f1f1f1;
    border: none;
    color: #222;
    transition: 0.5s;
}
.user__canv__access .btn__acc:hover {
    background: var(--primary-gradient);
    color: #fff;
}
.user__canv__access .btn__logout {
    width: 100%;
    color: #fff !important;
    border: none;
    background: #dc3545 !important;
}
.user__canv__accessBtn {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}
.user__canv__accessBtn .notification {
    padding-left: 5px;
}
.user__canv__currency,
.user__canv__currency .filter_currency {
    width: 100%;
    margin: 0;
}

.user__canv__currency .filter_currency > button {
    padding: 10px 20px;
}

.off_canv_currencyChange {
    max-height: 220px;
    overflow: auto;
}

/*
        Account Page codes
    */

.account__name .account_left .icon > img {
    width: 60px;
}
.account__name .account_left .text h5 {
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    color: #222;
    margin-bottom: 0px;
}
.account__name .account_left .text h4 {
    color: #6b7280;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 0px;
}

.account__name .account_right {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.account__name .account_right .user_status {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e7ecf9;
    padding: 10px 20px;
    border-radius: 50px;
    min-height: 50px;
    font-size: 18px;
    font-weight: bold;
    color: #222;
}

.account__name .account_right .gender_btn {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    border: none;
    font-size: 22px;
    background: #e7ecf9;
    color: var(--nav-acitve);
}

.account__name .account_right .gender_btn.active {
    background: var(--primary-gradient);
    color: #fff;
}

.account__password .password_change_wraper {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(4, 1fr);
}

.account_control {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 17px;
    font-size: 16px;
    margin: 0;
    outline: none !important;
    box-shadow: none !important;
    min-height: 50px;
    background: #f0f1f5;
}

.account_btn {
    transform: translateY(0px) !important;
    padding: 10px 20px;
    min-height: 50px;
    height: 50px;
    max-height: 50px;
}

.input--round {
    border-radius: 50px;
}

/* Dashboard Design*/

.dashboard__user__info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.dashboard__user__info .user__info__item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    padding: 20px 22px;
    border-radius: 15px;
    box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.07);
}

.dashboard__user__info .user__info__item .user__info__icon {
    width: 60px;
}
.dashboard__user__info .user__info__item .user__info__icon.myorder_icon {
    width: 53px;
}
.dashboard__user__info .user__info__item .user__info__text h5 {
    font-size: 18px;
    margin-bottom: 5px;
    color: #222;
    font-weight: 600;
}
.dashboard__user__info .user__info__item .user__info__text h4 {
    font-size: 22px;
    color: #6b7280;
    font-weight: 600;
    margin-bottom: 0;
}
.account_status_wraper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    margin: 5px;
}

.account_status_wraper .account_staus_btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: #f0f1f5;
    border-radius: 50px;
    min-height: 60px;
    height: 60px;
}

.account_status_wraper .account_staus_btn.active {
    background: var(--primary-gradient);
}

.account_status_wraper .account_staus_btn.passed {
    background: #8ad700;
}

.account_status_wraper .account_staus_btn .status_icon {
    width: 25px;
}

.account_status_wraper .account_staus_btn.passed .status_icon,
.account_status_wraper .account_staus_btn.active .status_icon {
    filter: brightness(0) invert(1);
}

.account_status_wraper .account_staus_btn .status_text {
    font-size: 18px;

    font-weight: var(--font-medium);
    margin-bottom: 0;
}

.account_status_wraper .account_staus_btn .status_text small {
    font-size: 10px;
    opacity: 0.2;
    transition: 1s;
}

.account_status_wraper .account_staus_btn:hover .status_text small {
    opacity: 1;
}

.account_status_wraper .account_staus_btn.passed .status_text,
.account_status_wraper .account_staus_btn.active .status_text {
    color: #fff;
}

.status_btn__badges {
    top: 0px;
    right: -20px;
}

.benifit_item {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 11fr;
    gap: 10px;
    margin-bottom: 17px;
}
.benifit_item .icon {
    width: 25px !important;
}
.benifit_item .icon .accont_benifit_active,
.benifit_item .icon .accont_benifit_loading,
.benifit_item .icon .accont_benifit_available {
    display: none;
}
.benifit_item .benifit_text {
    font-size: 18px;
    color: #222;
    font-weight: var(--font-medium);
}

.benifit_item .icon.active .accont_benifit_active {
    display: block;
}

.benifit_item .icon.available .accont_benifit_available {
    display: block;
}

.benifit_item .icon.loading .accont_benifit_loading {
    display: block;
}
.account_benifits_title {
    font-size: 24px;
    font-weight: 600;
    margin-top: 5px;
    margin-bottom: 25px;
}
.benifit__section .card.card_v2 {
    height: 100%;
}
/* Affiliate Page */
#topCard {
    position: relative;
}

#topCard.affiliate_card .topCard_inner {
    background: var(--hero-bg-color);
    background-size: contain;
}

#topCard.child_panel_card .topCard_inner {
    background: var(--hero-bg-color);
    background-size: contain;
}

#topCard.massorder_card .topCard_inner {
    background: var(--hero-bg-color);
    background-size: contain;
}

#topCard.create_invoice .topCard_inner {
    background: var(--hero-bg-color);
    background-size: contain;
}

#topCard .topCard_inner {
    position: relative;
    background-color: rgb(185, 185, 185);
    padding: 70px 70px;
    min-height: 500px;
    border-radius: 15px;
    overflow: hidden;
}

.topCard_inner .topCard_title {
    font-size: 45px;
    font-weight: 600;
}

.topCard_inner .def_image {
    margin: 0 auto;
    max-width: 70%;
    max-height: 250px;
}

.topCard_inner .def_image.img-invoice {
    max-width: 400px;
    width: 400px;
}

.topCard_inner .topCard_text {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
}

.topCard_inner .btn-secondary.btn_top_card {
    font-size: 16px;
    font-weight: 600;
    padding: 8px 30px;
    border-color: #8ad700;
    background: #8ad700;
    border-radius: 50px;
}
/* .topCard_inner  .affiliates_image::after{
        content: '';
        position: absolute;
        width: 300px;
        height: 300px;
        background: rgb(255, 255, 255);
        filter: blur(100px);
        left: 0;
        z-index: 0;
    } */
.text_has__bg {
    font-size: 16px;
    background: #fff;
    padding: 10px 15px;
    margin: 10px 5px;
    border-radius: 15px;
}
.topCard_inner .affiliates_image {
    position: absolute;
    right: 200px;
    bottom: 70px;
    width: 420px;
    height: 350px;
}
.topCard_inner .affiliates_image > img {
    width: 100%;
}

.affiliates_infos .affiliate_users_data {
    display: grid;
    grid-template-columns: 250px repeat(3, max-content) !important;
    gap: 15px;
}

.affiliates_infos.second_info .affiliate_users_data {
    display: grid;
    grid-template-columns: 170px repeat(6, max-content) !important;
    gap: 15px;
}

.affiliates_infos .affiliate_users_data .aff_item:first-child {
    width: 250px;
}
.affiliates_infos .affiliate_users_data .aff_item {
    display: flex;
    align-items: center;
    gap: 5px;
}
.affiliates_infos .affiliate_users_data .aff_item .aff_item_left {
    width: 100px;
    height: 100px;
}
.affiliates_infos .affiliate_users_data .aff_item .aff_item_left.avatar_itme {
    padding: 15px;
}
.affiliates_infos .affiliate_users_data .aff_item .aff_item_right h4 {
    color: #222;

    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 3px;
}
.affiliates_infos .affiliate_users_data .aff_item .aff_item_right h5 {
    color: #7e7f81;

    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 0px;
}

.card.card_v2 {
    border-radius: 12px;
    background: #fff;
    box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.07);
    border: none;
    z-index: 0;
}

/* Child Panel Order Page */

.accordion__auth .accordion-item {
    background: #f0f1f5;
    margin-bottom: 15px;
    border-radius: 10px !important;
    border: none !important;
}

.accordion__auth .accordion-item button {
    font-size: 18px;
    font-weight: var(--font-medium);
    color: #222;
    min-height: 50px;
    background: transparent;
    box-shadow: none;
}

.accordion__auth .accordion-item button::after {
    background: url(https://res.cloudinary.com/ddyxrxcom/image/upload/v1691207424/snf_asset/down-arrow-auth_murae1.png);
}

/* Ticket Page */

.ticket_history .tickets_his_item {
    display: grid;
    grid-template-columns: 70px repeat(3, 1fr);
    background: #f0f1f5;
    gap: 15px;
    padding: 20px 15px;
    margin-bottom: 15px;
    border-radius: 15px;
}

.ticket_history .tickets_his_item h5 {
    font-size: 18px;
    color: #222;
    font-weight: 400;
    margin-bottom: 0;
}

.ticket_history .tickets_his_item .tickets_his_id::before {
    content: "Id";
}
.ticket_history .tickets_his_item .tickets_his_sub::before {
    content: "Subject";
}

.ticket_history .tickets_his_item .tickets_his_status::before {
    content: "Status";
}

.ticket_history .tickets_his_item .tickets_his_lastUpdate::before {
    content: "Last Update";
}

.ticket_history .tickets_his_item .payment_methods_name::before {
    content: "Payment Methods";
}
.ticket_history .tickets_his_item .payment_amount::before {
    content: "Amount";
}
.ticket_history .tickets_his_item .payment_time::before {
    content: "Date";
}

.ticket_history .tickets_his_item .payment_methods_name::before,
.ticket_history .tickets_his_item .payment_amount::before,
.ticket_history .tickets_his_item .payment_time::before,
.ticket_history .tickets_his_item .tickets_his_id::before,
.ticket_history .tickets_his_item .tickets_his_sub::before,
.ticket_history .tickets_his_item .tickets_his_status::before,
.ticket_history .tickets_his_item .tickets_his_lastUpdate::before {
    display: block;
    font-size: 16px;
    margin-bottom: 5px;
    font-weight: 700;
    color: #6b7280;
}

.ticket_history .tickets_his_item .payment_amount,
.ticket_history .tickets_his_item .tickets_his_status {
    text-align: center;
}

/* Add Fund Page CSS */
#paymentMethodBanner .payment_method_inner {
    padding: 40px 20px;
}

#paymentMethodBanner .payment_method_inner h2 {
    font-size: 45px;
    color: #222;
    font-weight: 600;
}

#paymentMethodBanner .payment_method_inner p {
    font-size: 18px;
    color: #222;
    font-weight: 400;
}

#paymentMethodBanner .payment_method_inner .payment__banner__img {
    margin-left: -22px;
    width: 90%;
    pointer-events: none;
}

#paymentMethodBanner .payment_method_inner .payment_method_img {
    max-width: 450px;
    margin: 0 auto;
}

.payment_logo {
    max-width: 200px;
    margin-top: 20px;
    margin-left: 20px;
}

/* Create Invoice Page */
.crate_invoice_content h2 {
    color: #222;

    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.crate_invoice_content p {
    color: #222;

    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.crate_invoice_content .has__bg__grey {
    background: #f0f1f5;
    font-size: 18px;
    font-weight: 600;
    padding: 15px;
    border-radius: 15px;
}

.invoice_table .invoice_title {
    font-weight: 700;
    font-size: 35px;
    margin-bottom: 25px;
    color: #222;
}

/* View Ticket page  */

.ticket_conv_title {
    display: flex;
    align-items: center;
    flex-direction: row;
}

.ticket_conv_title h3 {
    font-size: 30px;

    margin-bottom: 0px;
    font-weight: 400;
}

.conversations {
    min-height: 600px;
}

.conversations .user_conv {
    text-align: right;
}

.conversations .user_conv .msg {
    background: #8ad700;
    color: #fff;
    width: 80%;
    float: right;
    display: block;
    text-align: left;
    padding: 25px;
    margin-bottom: 10px;
    border-radius: 0px 50px;
}

.conversations .user_conv .user_info {
    display: block;
    float: right;
    font-size: 15px;
}

.conversations .admin_conv .msg {
    background: linear-gradient(180deg, #43b9fe 0%, #207cfe 100%);
    color: #fff;
    width: 80%;
    float: left;
    display: block;
    text-align: left;
    padding: 25px;
    margin-bottom: 10px;
    border-radius: 0px 50px;
}

.conversations .admin_conv .user_info {
    display: block;
    float: left;
    font-size: 15px;
}

.conversation__box .reply_box {
    display: block;
    position: relative;
    align-items: center;
}

.ticket_info_card {
    background: url(https://res.cloudinary.com/ddyxrxcom/image/upload/v1691207488/snf_asset/Background-Pattern-1_eq1zjh.png),
        linear-gradient(#cdefff, #cdefff) !important;
    background-size: contain;
}
.ticket_info_card .ticket_id {
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    color: #222;
}
.ticket_info_card h2 {
    font-size: 40px;
    font-weight: 600;
    color: #222;
}
.ticket_info_card p {
    font-size: 18px;
    color: #222;
    font-weight: 400;
    margin-bottom: 35px;
}

.caps_item {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 30px;
}

.caps_item .caps_left {
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    background: #fff;
    padding: 15px 0px 15px 20px;
    border-radius: 50px 0px 0px 50px;
    min-height: 60px;
    display: flex;
    align-items: center;
}

.caps_item .caps_right {
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    padding: 0px 0px 0px 0px;
    border-radius: 0px 50px 50px 0px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.caps_item.caps_subject .caps_right {
    background: #207cfe;
}
.caps_item.caps_priority .caps_right {
    background: #ff5721;
}
.caps_item.caps_time .caps_right {
    background: #13cc7e;
}

.conversation__box .reply_box .reply_form_control {
    border-radius: 50px;
    height: 57px;
    box-shadow: none;
    border-color: var(--primary-border-color);
    padding-left: 20px;
    padding-right: 150px;
    box-shadow: 0px 0px 22px 0px rgba(0, 0, 0, 0.07);
}

.conversation__box .reply_box .submit_btn {
    position: absolute;
    right: 0;
    top: 0;
}

.service_filter {
    margin-top: 20px !important;
}

.service_filter_wraper {
    border-radius: 15px;
    padding: 25px 20px;
}

.filter_services .filter_btn {
    padding: 10px 15px;
    margin-bottom: 10px;
}

.filter_currency > button {
    padding: 10px 15px;
    margin-bottom: 10px;
}
.serv_search {
    padding: 10px 15px;
}

.service_filter_wraper .col-lg-4.col-md-6.col-12.mb-md-3 {
    margin-bottom: 0px !important;
}

.service_filter_wrap {
    padding: 30px 0px;
}

.youtube_video .youtube__iframe {
    width: 100%;
    height: 400px;
}

/* Order Page */

.orders__filter__btn {
    margin: 25px 0px;
}
.orders__filter__btn .order__filters {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.orders__filter__btn .order__filters .btn__orders__filter {
    background: #fff;
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-radius: 10px;
    gap: 10px;
    border: none;
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.13);
}
.orders__filter__btn .order__filters .btn__orders__filter.bg-danger {
    background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity));
}

.orders__filter__btn .order__filters .btn__orders__filter.active {
    background: var(--primary-gradient);
    color: #fff;
}

.orders__filter__btn .order__filters .btn__orders__filter .icon {
    width: 30px;
}

.orders__filter__btn .order__filters .btn__orders__filter.active .icon,
.orders__filter__btn .order__filters .btn__orders__filter.bg-danger .icon {
    filter: brightness(100);
}

.orders__filter__btn .order__filters .btn__orders__filter .text {
    color: #143360;

    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.orders__filter__btn .order__filters .btn__orders__filter.active .text,
.orders__filter__btn .order__filters .btn__orders__filter.bg-danger .text {
    color: #fff;
}

/* Order Page Table */
.subs__table,
.refill__table,
.subs__table,
.refill__table,
.order__table {
    margin-bottom: 50px;
}

.refill__table .refill_table_head,
.refill__table .refill_table_row,
.refill__table .refill_table_head,
.refill__table .refill_table_row,
.order__table .order_table_head,
.order__table .order_table_row {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    /* grid-template-columns: 4em 5em 3fr 6em 7em 6em 6em 17em 12em 1fr; */
    width: 100%;
    gap: 10px;
    text-align: left;
    margin-bottom: 20px;
    border: 1px solid #d9d9d9;
    background: #fafbff;
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.03);
    padding: 15px;
    border-radius: 15px;
}

.subs__table .subs_table_head > div,
.refill__table .refill_table_head > div,
.order__table .order_table_head > div {
    font-size: 14px;
    font-weight: 600;
    color: #575b62;
}

.subs__table .subs_table_row > div,
.refill__table .refill_table_row > div,
.order__table .order_table_row > div {
    font-size: 15px;
    color: #222;
    font-weight: normal;
}

.subs__table .subs_table_row .body__id > span,
.refill__table .refill_table_row .body__id > span,
.order__table .order_table_row .body__id > span {
    display: inline-block;
    font-size: 16px;
    background: #8ad700;
    color: #fff;
    padding: 5px 15px;
    border-radius: 10px;
}

.order__table .order_table_head .head__link,
.order__table .order_table_row .body__link {
    width: 25em;
}

.refill__table .refill_table_row .body__link .link__order,
.order__table .order_table_row .body__link .link__order {
    display: inline;
    color: var(--cta-btn);
}

.refill__table .refill_table_row .body__link .link__order > a,
.order__table .order_table_row .body__link .link__order > a {
    color: #222;
    text-decoration: underline;
    font-weight: 600;
    word-break: break-all;
}

.order__table .order_table_row .body__quantity,
.order__table .order_table_row .body__price {
    font-weight: 600;
}

.order__table .order_table_head .head__price,
.order__table .order_table_row .body__price {
    text-align: center;
}

.order__table .order_table_head .head__services,
.order__table .order_table_row .body__services {
    width: 20em;
}

.order__table .order_table_head .head__status,
.order__table .order_table_row .body__status {
    width: 8em;
}

.order__table .order_table_row .body__quickaction > .dropdown > .btn-action {
    background: var(--primary-gradient);
    border: none;
    border-radius: 50px;
    color: #fff;
    padding: 6px 15px;
}

.subs__table .subs_table_head .body__status > .status_capsule,
.subs__table .subs_table_row .body__status > .status_capsule,
.refill__table .refill_table_row .body__status > .status_capsule,
.order__table .order_table_row .body__status > .status_capsule {
    background: var(--dark-box-bg);
    color: #fff;
    padding: 6px 15px;
    border-radius: 50px;
    text-align: center;
}

.status_capsule.status_Completed {
    background: #1cb474 !important;
}

.status_capsule.status_Active {
    background: #795af6 !important;
}

.status_capsule.status_Pending {
    background: #eda417 !important;
}

.status_capsule.status_Processing {
    background: #795af6 !important;
}

.status_capsule.Rejected,
.status_capsule.status_Canceled {
    background: #ec3d3d !important;
}

.status_capsule.status_Partial {
    background: #d116bf !important;
}

.status_capsule.status_Paused {
    background: #ff5721 !important;
}
.status_capsule.status_Expired {
    background: #795af6 !important;
}

.status_capsule.status_Error {
    background: #878f99;
}
/* ###### Order Page Table */

/* Refill page table */
.refill__table .refill_table_head,
.refill__table .refill_table_row {
    grid-template-columns: repeat(6, minmax(auto, 1fr));
    gap: 25px;
}

.refill__table .refill_table_head .head__link,
.refill__table .refill_table_row .body__link {
    width: 25em;
}
.refill__table .refill_table_head .head__services,
.refill__table .refill_table_row .body__services {
    width: 25em;
}
.refill__table .refill_table_head .head__status,
.refill__table .refill_table_row .body__status {
    width: 8em;
}

/* ### Refill page table */

/* Subscriptions */
.subs__table .subs_table_head,
.subs__table .subs_table_row {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    width: 100%;
    gap: 15px;
    text-align: left;
    margin-bottom: 20px;
    border: 1px solid #d9d9d9;
    background: #fafbff;
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.03);
    padding: 15px;
    border-radius: 15px;
}

.subs__table .subs_table_head .head__id,
.subs__table .subs_table_row .body__id {
    width: 5em;
}

.subs__table .subs_table_head .head__username,
.subs__table .subs_table_row .body__username {
    width: 13em;
}

.subs__table .subs_table_head .head__services,
.subs__table .subs_table_row .body__services {
    width: 15em;
}

.subs__table .subs_table_head .head__action,
.subs__table .subs_table_row .body__action {
    width: auto;
}
.subs__table .subs_table_head .body__details,
.subs__table .subs_table_row .body__details {
    width: 7rem;
}

.subs__table .subs_table_row .body__details .btn__details {
    border: 1px solid var(--cta-btn);
    color: var(--cta-btn);
    border-radius: 50px;
    padding: 5px 15px;
    cursor: pointer;
    transition: 0.5s ease-in-out;
}

.subs__table .subs_table_row .body__action .actions__btn {
    display: inline-flex;
    gap: 5px;
    background: var(--primary-gradient);
    border: none;
    color: #fff;
    border-radius: 50px;
    padding: 5px 15px;
    cursor: pointer;
    transition: 0.5s ease-in-out;
}

.subs__table .subs_table_row .body__action .btn__cancel {
    display: inline-flex;
    gap: 5px;
    border: 1px solid var(--dark-btn-bg);
    color: var(--dark-btn-bg);
    border-radius: 50px;
    padding: 5px 15px;
    cursor: pointer;
    transition: 0.5s ease-in-out;
}

.subs__table .subs_table_row .body__details .btn__details:hover {
    background: var(--cta-btn);
    color: #fff;
}
/* ### Subscriptions */

/* Update Page */

.update_table .update__card {
    border-radius: 20px;
    border: 1px solid #d9d9d9;
    background: #fafbff;
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.03);
}

.filter_services .filter_btn {
    padding: 10px 15px;
    margin-bottom: 10px;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    border-radius: 8px;
}

.dropdown-menu.v2 {
    width: 100%;
    border: none;
    padding: 10px 5px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.357);
}

.dropdown-menu.v2 .drop_dwon_items {
    max-height: 350px;
    overflow: auto;
}

.dropdown-menu.v2 .dropdown-item {
    color: #111;
    font-weight: 400;
    display: flex;
    justify-content: baseline;
    width: 98%;
    gap: 10px;
    padding: 5px 10px;
    font-size: 16px;
    cursor: pointer;
}

.dropdown-menu.v2 .dropdown-item.active,
.dropdown-menu.v2 .dropdown-item:hover,
.dropdown-menu.v2 .dropdown-item:active {
    background: var(--primary-gradient);
    color: #fff;
    border-radius: 5px;
}

.update_table .update__card .table .update_capsul {
    background: #e8e8e8;
    padding: 8px 15px;
    border-radius: 8px;
}

.update_table .update__card .table .update_capsul.rate_increase {
    background: rgba(255, 146, 146, 0.44);
}
.update_table .update__card .table .update_capsul.rate_decreased {
    background: #9bf4cf;
}
.update_table .update__card .table .update_capsul.serv_disabled {
    background: #ff8f8f;
}
.update_table .update__card .table .update_capsul.serv_enabled {
    background: #7eff9b;
}
.update_table .update__card .table .update_capsul.new_service {
    background: #95c0f8;
}
.select2-dropdown.dropdown-menu {
    margin-top: 10px !important;
    border-radius: 10px !important;
}
.select2-container--default .select2-selection--single {
    border-radius: 10px !important;
}
.select2-results__option {
    margin: 2px 8px;
    border-radius: 5px;
    padding: 5px 3px;
}
.select2-container .dropdown-menu > li > a {
    white-space: inherit;
    padding: 3px 5px;
    display: flex;
    align-items: center;
    gap: 3px;
}
.select2-results__option.active {
    background: var(--primary-gradient) !important;
    color: #fff !important;
}
.select2-results__option.active .select2-selection__id,
.select2-results__option.active a {
    color: #fff !important;
}

.select2-results__option.select2-results__option--highlighted {
    background: #3073f017;
}
.avatar_images {
    border-radius: 100px;
}
/*
  *
  *
  *
  * Dashboard Responsive Area
  *
  *
  *
  */

/* Screen Less than 1550px laptop and tablet Responsive*/
@media only screen and (max-width: 1550px) {
    .auth_body .main__page__area .sidebar__area {
        width: 270px;
        padding: 10px;
        z-index: 999;
    }
    .auth_body .main__page__area .main__content__area .top__bar__area {
        width: calc(100% - 270px);
    }
    .auth_body .main__page__area .main__content__area {
        margin-left: 269px;
    }

    .auth_body .main__page__area.toggle_sidebar .main__content__area {
        margin-left: 0px;
    }
    .sidebar__menu {
        padding: 0px 10px;
    }
    .sidebar__menu > ul .sidebar__menu__item .sidebar__menu__link {
        padding: 8px 20px;
    }
    .order__table .order_table_head .head__link,
    .order__table .order_table_row .body__link {
        width: 14rem;
    }
}
/*
    Screen Fixer when someone visito from old laptop and smaller laptop screen
*/

@media only screen and (max-width: 1300px) {
    .auth_body .main__page__area .main__content__area {
        width: 100%;
    }
    .main__page__area .sidebar__area {
        transform: translateX(-100%);
    }
    .main__page__area.toggle_sidebar .sidebar__area {
        transform: translateX(0%);
    }

    .auth_body .main__page__area .main__content__area {
        margin-left: 0px !important;
    }

    .auth_body .main__page__area .main__content__area .top__bar__area {
        width: 100%;
    }
    .main__page__area.toggle_sidebar .sidebar_close_btn {
        display: block;
    }
    .main__page__area.toggle_sidebar .main__content__area .top__bar__area,
    .main__page__area.toggle_sidebar .main__content__area .content__area {
        pointer-events: none;
        filter: blur(5px);
    }
    .main__page__area.toggle_sidebar .main__content__area .top__bar__area {
        z-index: 9;
    }
}

/* Screen below 992px and lower than that*/
@media only screen and (max-width: 992px) {
    .welcome__text {
        display: none;
    }
    .user__statistic .statstics__card {
        padding: 14px 14px;
        border-radius: 15px;
        gap: 20px;
        margin-bottom: 15px;
    }

    .user__statistic .statstics__card .st_icon {
        width: 50px;
        height: 50px;
    }
    .service_filter_wrap.neworder .service_filter_btn_wrap {
        gap: 8px;
    }
    .user__statistic .st_content .st_main_txt {
        font-size: 20px;
    }

    .card.card_v3 .card-header {
        padding: 15px;
        height: auto;
        min-height: 100px;
    }

    .announcement_inner .left_ann h4 {
        font-size: 18px;
    }
    .announcement_inner .left_ann p {
        font-size: 14px;
    }
    .btn_announcement {
        font-size: 16px;
    }
    .new__order__nav__tabs li button {
        padding: 5px 10px;
    }

    .services__name {
        font-size: 14px;
    }
    .auth_body .form-group > label {
        margin-bottom: 7px;
    }
    .services_details {
        padding: 0px;
    }
    .utilites_wraper {
        gap: 10px 10px;
    }

    #topCard .topCard_inner {
        padding: 40px;
        min-height: auto;
    }

    #topCard .topCard_inner .col-lg-2 {
        display: none;
    }
    .default__card__wraper.my-5 {
        margin-top: 20px !important;
    }
    .btn.btn-primary.account_btn {
        font-size: 12px;
    }
    .account__password .password_change_wraper {
        gap: 10px;
    }
    .towFa_cont p {
        font-size: 14px;
    }
    .orders__filter__btn .order__filters {
        gap: 10px;
    }

    /* Order Table */
    .order_table_row .body__id {
        grid-area: id;
        text-align: center;
    }
    .order_table_row .body__date {
        grid-area: date;
        text-align: center;
    }
    .order_table_row .body__link {
        grid-area: link;
        width: 100% !important;
    }
    .order_table_row .body__price {
        grid-area: price;
        text-align: center;
    }
    .order_table_row .body__price::before {
        content: "Charges";
    }
    .order_table_row .body__startcount {
        grid-area: statcount;
        text-align: center;
    }
    .order_table_row .body__startcount::before {
        content: "Start Count";
    }
    .order_table_row .body__quantity {
        grid-area: quantity;
        text-align: center;
    }
    .order_table_row .body__quantity::before {
        content: "Quantity";
    }
    .order_table_row .body__remain {
        grid-area: remain;
        text-align: center;
    }
    .order_table_row .body__remain::before {
        content: "Remain";
    }

    .order_table_row .body__services {
        grid-area: services;
        width: 100% !important;
        text-align: center;
    }
    .order_table_row .body__status {
        grid-area: status;
        text-align: center;
    }
    .order_table_row .body__quickaction {
        grid-area: actions;
        text-align: center;
    }
    .order__table .order_table_head {
        display: none;
    }
    .order__table {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    .order__table .order_table_row {
        margin-bottom: 0;
    }

    .subs__table .subs_table_row .body__newpost,
    .subs__table .subs_table_row .body__quantity,
    .order_table_row .body__price,
    .order_table_row .body__remain,
    .order_table_row .body__startcount,
    .order_table_row .body__quantity {
        position: relative;
        padding-top: 20px;
    }

    .subs__table .subs_table_row .body__newpost::before,
    .subs__table .subs_table_row .body__quantity::before,
    .order_table_row .body__price::before,
    .order_table_row .body__remain::before,
    .order_table_row .body__startcount::before,
    .order_table_row .body__quantity::before {
        font-size: 12px;
        color: #5c5c5c;
        position: absolute;
        text-align: center;
        top: 0px;
        width: 100%;
        margin: 0;
        padding: 0;
        left: 0;
    }

    .refill__table .refill_table_head,
    .refill__table .refill_table_row,
    .refill__table .refill_table_head,
    .refill__table .refill_table_row,
    .order__table .order_table_head,
    .order__table .order_table_row {
        grid-template-areas:
            "id id id id id id id id id id id id "
            "date date date date date date date date date date date date"
            "link link link link link link link link link link link link"
            "price price price statcount statcount statcount quantity quantity quantity remain remain remain"
            " services services services services services services services services services services services services"
            "status status status status status status actions actions actions actions actions actions";
        gap: 10px;
    }

    .dripfeed__table .order_table_row .body__startcount::before {
        content: "Quantity";
    }

    .dripfeed__table .order_table_row .body__quantity::before {
        content: "Total quantity";
    }

    .dripfeed__table .order_table_row .body__remain::before {
        content: "Runs ~ Interval";
    }

    .refill__table .order_table_row .body__price::before {
        content: "Order Id";
    }

    .refill__table .order_table_row .body__price {
        grid-column: span 12;
    }

    .refill__table .order_table_row .body__status {
        width: 100%;
        grid-column: span 12;
    }

    .dripfeed__table .order_table_row .body__status {
        width: 100%;
        grid-column: span 12;
    }

    .orders__filter__btn .order__filters .btn__orders__filter .icon {
        width: 20px;
    }

    .subs__table .subs_table_head {
        display: none;
    }

    .subs__table .subs_table_row .body__id {
        grid-area: subId;
        width: auto;
    }
    .subs__table .subs_table_row .body__username {
        grid-area: subUsername;
        width: 100%;
    }
    .subs__table .subs_table_row .body__quantity {
        grid-area: subquan;
    }
    .subs__table .subs_table_row .body__newpost {
        grid-area: subpost;
    }
    .subs__table .subs_table_row .body__services {
        grid-area: subserv;
        width: 100%;
    }
    .subs__table .subs_table_row .body__status {
        grid-area: substatus;
    }
    .subs__table .subs_table_row .body__details {
        grid-area: subsdetail;
    }
    .subs__table .subs_table_row .body__action {
        grid-area: subaction;
    }

    .subs__table .subs_table_row .body__quantity::before {
        content: "Quantity";
    }

    .subs__table .subs_table_row .body__newpost::before {
        content: "New posts";
    }

    .subs__table {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .subs__table .subs_table_row {
        grid-template-columns: none;
        text-align: center;
        grid-template-areas:
            "subId subId subId subId subId subId"
            "subUsername subUsername subUsername subUsername subUsername subUsername"
            "subquan subquan subquan subpost subpost subpost"
            "subserv subserv subserv subserv subserv subserv"
            "substatus substatus subsdetail subsdetail subaction subaction";
    }
    .dashboard__user__info {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .dashboard__user__info .user__info__item .user__info__text h4 {
        font-size: 16px;
    }

    .btn {
        padding: 10px 20px;
        font-size: 16px;
    }

    .auth_body .form-group > label {
        font-size: 14px;
    }
    .utilites_wraper .utilites_box span,
    .auth_body .form-control,
    .auth_body .form-group > .form-control,
    .select2-container--default .select2-selection--single,
    .services__desc h6,
    .example__link h6,
    .utilites_wraper .utilites_item h6 {
        font-size: 14px;
    }
    .services__desc .descriptions_full {
        font-size: 12px;
    }

    #paymentMethodBanner .payment_method_inner .payment_method_img {
        display: none;
    }

    #paymentMethodBanner .payment_method_inner .payment__banner__img {
        width: 70%;
        margin: 0 auto;
    }
    .topCard_inner .affiliates_image {
        width: 50%;
        right: 30px;
        bottom: 0px;
    }
    .topCard_inner .topCard_title {
        font-size: 25px;
    }
    .topCard_inner .topCard_text {
        font-size: 14px;
    }
    .account__name .account_right .user_status,
    .account__name .account_left .text h5,
    .crate_invoice_content h2,
    .card-header .card_header_title {
        font-size: 16px !important;
    }

    .crate_invoice_content p,
    .card-header .card_header_text {
        font-size: 12px !important;
        margin-bottom: 0px;
    }

    .card.card_v3 .card-header {
        min-height: 80px;
    }
    .crate_invoice_content .has__bg__grey {
        font-size: 14px;
        margin-top: 10px;
    }
    .accordion__auth .accordion-item button,
    .text_has__bg {
        font-size: 14px !important;
    }
    .accordion__auth .accordion-body {
        font-size: 14px !important;
    }
    .youtube_video .youtube__iframe {
        height: 250px;
    }
    .affiliates_infos .affiliate_users_data {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .affiliates_infos.second_info .affiliate_users_data {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .card.card_v3 {
        border-radius: 10px;
        margin-bottom: 30px;
    }
    .card.card_v3 .card-header {
        border-radius: 10px 10px 0px 0px;
    }
}

/* Screen below 768px and lower than that*/
@media only screen and (max-width: 768px) {
    .dashboard__user__info {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* Screen below 550px and lower than that*/
@media only screen and (max-width: 550px) {
    .tob__bar__mid {
        display: block;
    }
    .auth_body .main__page__area .main__content__area .top__bar__area {
        padding: 8px 20px;
        height: 60px;
    }
    .content__area {
        padding-top: 60px;
    }
    .auth_body
        .main__page__area
        .main__content__area
        .top__bar__area
        .tob__bar__left
        .button__bar {
        width: 45px;
        height: 40px;
        gap: 3px;
    }
    .user__access_btn .user__avatar > img {
        width: 45px;
        height: 45px;
        background: #24689d;
    }
    .welcome__text {
        display: none;
    }
    /* .tob__bar__right .desktop__shows{
    display: none;
   }
   .tob__bar__right .phone__shows{
    display: block;
   } */
    .sidebar__area .sidebar__user {
        display: none;
    }
    .main__page__area.toggle_sidebar .top__bar__area {
        position: fixed !important;
    }
    .card.card_v2 {
        border-radius: 8px;
    }
    /* New Order Page */
    .user__statistic.mt-4 {
        margin-top: 10px !important;
    }
    .user__statistic .statstics__card {
        padding: 10px 12px;
        gap: 8px;
        border-radius: 10px;
        /* flex-direction: column; */
        margin-bottom: 15px;
    }

    .user__statistic .row .col-6:last-child .statstics__card,
    .user__statistic .row .col-6:nth-child(3) .statstics__card {
        margin-bottom: 0px;
    }

    .user__statistic .statstics__card .st_icon {
        max-width: 40px;
        height: 40px;
        padding: 5px;
    }

    .user__statistic .st_content .st_top_txt {
        font-size: 14px;
        text-align: left;
    }

    .user__statistic .st_content .st_main_txt {
        font-size: 20px;
        text-align: left;
    }

    .announcement_inner {
        flex-direction: column;
        gap: 10px;
        padding: 0px;
    }

    .announcement_inner .left_ann h4 {
        font-size: 16px;
    }
    .announcement_inner .left_ann p {
        font-size: 12px;
    }
    .btn_announcement {
        font-size: 14px;
    }
    /* section.filter_section .service_filter_btn_wrap{
    grid-template-columns: repeat(6, 1fr);
   } */
    section.filter_section
        .service_filter_wrap.neworder
        .service_filter_btn_wrap {
        gap: 5px;
    }

    section.filter_section .service_filter_btn {
        display: flex;
        padding: 10px 10px;
        justify-content: center;
        box-shadow: none;
        border: 1px solid #e2e1e1;
        align-items: center;
    }

    section.filter_section .service_filter_btn .text {
        display: none;
    }

    section.filter_section .service_filter_wrap.neworder {
        padding: 10px 0px;
    }
    .search_new_box
        .search-dropdown.select2-container--default.select2-container--below {
        width: 100%;
    }
    .new__order__nav__tabs li button {
        width: 40px;
        height: 40px;
    }

    .services__desc .descriptions_full,
    .utilites_wraper .utilites_box,
    .link__box,
    .auth_body .form-control,
    .auth_body .form-group > .form-control,
    .select2-container--default .select2-selection--single {
        border-radius: 6px;
    }

    .help-block.min-max {
        top: 7px;
        font-size: 10px;
        left: 64px;
    }
    .new__order__nav__tabs li button .icon {
        width: 20px;
        height: 35px;
        line-height: 35px;
    }
    .search_new_box {
        display: inline-flex;
        width: 100% !important;
    }
    .new__order__nav__tabs li button {
        padding: 5px 8px;
    }
    .search_new_box .search_new_input {
        width: 80%;
    }
    .new__order__nav__tabs li button .txt {
        font-size: 14px;
    }

    .auth_body .btn-primary {
        font-size: 18px;
        min-width: 200px;
    }

    .card.card_v3 .card-header {
        padding: 15px;
        height: auto;
        min-height: 80px;
    }

    .card.card_v3 .card-header {
        border-radius: 15px 15px 0px 0px;
    }

    .card.card_v3 .card-body {
        border-radius: 0px 0px 15px 15px;
    }
    .default__card__wraper.my-3 {
        margin-top: 5px !important;
    }

    .btn,
    .btn-banner-all {
        margin-bottom: 15px;
    }

    .default__card__wraper .card {
        margin-bottom: 15px;
    }

    .services__name {
        font-size: 14px;
    }

    .services_details {
        padding: 0px;
    }

    .link__box {
        font-size: 14px;
        margin-bottom: 5px;
    }

    .utilites_wraper {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .utilites_wraper .utilites_box span {
        font-size: 14px;
    }

    #service_description > .panel-body {
        font-size: 14px;
    }

    #topCard .topCard_inner {
        padding: 25px 20px;
        min-height: auto;
    }

    .topCard_inner .topCard_title {
        font-size: 28px;
    }

    .topCard_inner .topCard_text {
        font-size: 14px;
    }

    .topCard_inner .def_image {
        display: none;
    }

    .default__card__wraper.my-5 {
        margin-top: 15px !important;
    }

    .card-header .card_header_text {
        margin-bottom: 0px;
    }
    #paymentMethodBanner .payment_method_inner {
        padding: 20px 5px;
    }
    #paymentMethodBanner .payment_method_inner h2 {
        font-size: 30px;
    }
    #paymentMethodBanner .payment_method_inner .payment__banner__img {
        width: 100%;
        margin-left: 5px;
    }
    #paymentMethodBanner .payment_method_inner .payment_method_img {
        display: none;
    }
    #paymentMethodBanner .payment_method_inner p {
        font-size: 16px;
    }
    .auth_body #api_page {
        margin: 20px 0px;
    }
    .topCard_inner .affiliates_image {
        display: none;
    }
    .affiliates_infos .affiliate_users_data {
        grid-template-columns: 1fr !important;
        gap: 5px;
    }
    .affiliates_infos .affiliate_users_data .aff_item:first-child {
        width: 100%;
    }
    .affiliates_infos .affiliate_users_data .aff_item .aff_item_left {
        width: 70px;
        height: 70px;
    }
    .affiliates_infos .affiliate_users_data .aff_item .aff_item_right h4 {
        font-size: 18px;
        margin-bottom: 0px;
    }
    .affiliates_infos .affiliate_users_data .aff_item .aff_item_right h5 {
        font-size: 14px;
    }
    .affiliates_infos.second_info .affiliate_users_data {
        grid-template-columns: 1fr;
    }
    .affiliates_infos.second_info .affiliate_users_data {
        grid-template-columns: 1fr !important;
    }
    .text_has__bg {
        font-size: 12px;
    }
    .youtube_video .youtube__iframe {
        width: 100%;
        height: 200px;
    }
    .accordion__auth .accordion-item button {
        font-size: 16px;
    }
    .accordion__auth .accordion-item button::after {
        zoom: 0.6;
    }

    .ticket_history .tickets_his_item {
        grid-template-areas:
            "tickId tickId tickId tickId tickId tickId"
            "ticketSub ticketSub ticketSub ticketSub ticketSub ticketSub"
            "ticketStatus ticketStatus LastUpdate LastUpdate LastUpdate LastUpdate";
        gap: 20px 5px;
    }

    .ticket_history .tickets_his_id {
        grid-area: tickId;
        text-align: center;
    }
    .payment_methods_name,
    .ticket_history .tickets_his_sub {
        grid-area: ticketSub;
        text-align: center;
    }
    .payment_amount,
    .ticket_history .tickets_his_status {
        grid-area: ticketStatus;
        text-align: center;
    }
    .payment_time,
    .ticket_history .tickets_his_lastUpdate {
        grid-area: LastUpdate;
        text-align: center;
    }
    .ticket_history .tickets_his_item .payment_methods_name::before,
    .ticket_history .tickets_his_item .payment_amount::before,
    .ticket_history .tickets_his_item .payment_time::before,
    .ticket_history .tickets_his_item .tickets_his_id::before,
    .ticket_history .tickets_his_item .tickets_his_sub::before,
    .ticket_history .tickets_his_item .tickets_his_status::before,
    .ticket_history .tickets_his_item .tickets_his_lastUpdate::before {
        font-size: 14px;
    }
    .ticket_history .tickets_his_item h5 {
        font-size: 15px;
    }
    .account__timezone .card-body form,
    .two__factor .card-body,
    .account__password .password_change_wraper {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .account__name .d-flex.justify-content-between.align-items-center {
        flex-direction: column;
        justify-content: left !important;
        align-items: flex-start !important;
        gap: 7px;
    }

    .order__table {
        grid-template-columns: 1fr;
    }

    .orders__filter__btn .order__filters .btn__orders__filter {
        padding: 6px 15px;
        border-radius: 7px;
        gap: 5px;
    }

    .orders__filter__btn .order__filters .btn__orders__filter .text {
        font-size: 16px;
    }

    .orders__filter__btn .order__filters .btn__orders__filter .icon {
        width: 16px;
    }

    .serv_category_card {
        margin-bottom: 20px;
    }
    .serv_category_card .serv_cat_card_body .service_item.service {
        position: relative;
    }

    .serv_category_card .serv_cat_card_body .service_item .fav {
        position: absolute;
        top: 5px;
        font-size: 18px;
    }

    .service_filter_wraper {
        padding: 15px 5px;
    }

    .subs__table {
        display: grid;
        grid-template-columns: 1fr;
    }

    .subs__table .subs_table_row {
        grid-template-columns: none;
        text-align: center;
        grid-template-areas:
            "subId subId subId subId subId subId"
            "subUsername subUsername subUsername subUsername subUsername subUsername"
            "subquan subquan subquan subpost subpost subpost"
            "subserv subserv subserv subserv subserv subserv"
            "substatus substatus substatus substatus substatus substatus"
            " subsdetail subsdetail  subsdetail subaction subaction subaction";
    }

    .dashboard__user__info .user__info__item {
        padding: 15px 15px;
        border-radius: 10px;
    }
    .dashboard__user__info .user__info__item .user__info__text h5 {
        font-size: 16px;
    }
    .dashboard__user__info .user__info__item .user__info__text h4 {
        font-size: 14px;
    }
    .dashboard__user__info .user__info__item .user__info__icon {
        width: 35px;
    }
    .dashboard__user__info .user__info__item .user__info__icon.myorder_icon {
        width: 30px;
    }
    .dashboard__user__info {
        gap: 7px;
    }
    .account_benifits_title {
        font-size: 18px;
        margin-bottom: 10px;
    }
    .account_status_wraper .account_staus_btn {
        min-height: 45px;
        height: 45px;
    }
    .account_status_wraper {
        gap: 5px;
    }
    .benifit_item .icon {
        width: 20px !important;
    }
    .benifit_item .benifit_text {
        font-size: 14px;
    }
    #paymentMethodBanner .payment_method_inner h2 {
        font-size: 18px;
    }

    #paymentMethodBanner .payment_method_inner p {
        font-size: 12px;
    }

    .accordion__auth .accordion-item {
        border-radius: 6px !important;
        margin-bottom: 7px;
    }
    .accordion__auth .accordion-item button {
        min-height: 40px;
        padding: 5px 10px;
    }
}

/*
============================================
            Dashboard Layouts Ends
============================================
*/