@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

:root {
    --primary: #a996d8;
    --primary-bg: #f1efff;
    --primary-bg-dark: #cab5ff;
    --light-white: #efefef;
    --bg-white: #fafafa;
    --full-black: #000000;
    --full-white: #ffffff;
    --border-grey: #e4e4e7;
    --grey-title: #a0aec0;
    --grey-text: #718096;
    --green-text: #007a4d;
    --green-background: #cef8e0;
    --red-text: #d31510;
    --red-background: #ffebe7;
    --header-title: #121212;
    --light-grey: #55565a1f;
    --primary-background: #edeeff;
    --purple: #686df4;
    --orange-background: #ffd6b2;
    --orange-text: #ff9131;
    --border-dark-grey: #424242;
    --stroke: #9e9e9e;
    --body-color: #f6f9fc;
    --icon: #b9bec1;
    --icon-bg: #ebeff0;
    --card-first-bg: #dad2eb;
    --card-first-icon-color: #ceacff;
    --card-second-bg: #96aed9;
    --card-second-icon-color: #b8d1fe;
    --card-third-bg: #d596d9;
    --card-third-icon-color: #e0b1fe;
    --card-fourth-bg: #bf96d9;
    --card-fourth-icon-color: #e0b1fe;
    --yellow-background: #f7dc6f;
}

/* global */
* {
    font-family: "Open Sans", sans-serif;
    box-sizing: border-box;
}

body {
    zoom: 1;
}

main {
    width: 100%;
    height: 100%;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
    transition: background-color 0s 600000s, color 0s 600000s !important;
}

body::-webkit-scrollbar {
    width: 10px;
    background-color: var(--full-white);
}

body::-webkit-scrollbar-thumb {
    background-color: var(--primary);
    border-radius: 10px;
}

body::-webkit-scrollbar-track {
    background-color: var(--full-white);
}

.statics-card {
    /* box-shadow: rgba(0, 0, 0, 0.05) 0px -1px 2px,
        rgba(0, 0, 0, 0.03) 0px 1px 2px, rgba(0, 0, 0, 0.03) 0px 2px 4px,
        rgba(0, 0, 0, 0.03) 0px 4px 8px, rgba(0, 0, 0, 0.03) 0px 8px 16px,
        rgba(0, 0, 0, 0.03) 0px 16px 32px, rgba(0, 0, 0, 0.03) 0px 32px 64px; */
    padding: 2rem;
    border-radius: 10px;
    background-color: #fff;
    margin-bottom: 1rem;
}

.badge-c {
    font-size: 0.8rem;
    padding: 5px 20px;
    text-transform: capitalize;
}

.badge-pending {
    color: var(--green-text);
    background-color: var(--green-background);
}

.badge-completed {
    color: var(--red-text);
    background-color: var(--red-background);
}

.badge-dot {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    width: fit-content;
}

.badge-dot::before {
    width: 7px;
    height: 7px;
    border-radius: 10px;
    content: "";
    display: inline-block;
}

.badge-dot-green {
    color: var(--green-text);
    background-color: var(--green-background);
}

.badge-dot-green::before {
    background-color: var(--green-text);
}

.badge-dot-primary {
    color: var(--primary);
    background-color: var(--primary-background);
}

.badge-dot-primary::before {
    background-color: var(--primary);
}

.badge-dot-danger {
    color: var(--red-text);
    background-color: var(--red-background);
}

.badge-dot-danger::before {
    background-color: var(--red-text);
}

.badge-dot-secondary {
    color: var(--orange-text);
    background-color: var(--orange-background);
}

.badge-dot-secondary::before {
    background-color: var(--orange-text);
}

.dots-dropdown-container {
    position: relative;
    display: inline-block;
}

.dots-dropdown-container svg {
    cursor: pointer;
    font-size: 24px;
}

.dot-dropdown-menu {
    position: absolute;
    top: 30px;
    right: 0;
    background: white;
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.dot-dropdown-menu a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: black;
}

.dot-dropdown-menu a:hover {
    background: #f0f0f0;
}

.border-select {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}

.border-select select {
    padding: 5px 10px;
    border: solid 2px var(--grey-title);
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    background-color: transparent;
}

.divder {
    width: 100%;
    height: 2px;
    background-color: var(--border-grey);
    margin-bottom: 1rem;
}

.timeline {
    max-width: 600px;
    width: 100%;
    position: relative;
    z-index: 1;
}

.timeline::before {
    content: "";
    position: absolute;
    width: 2px;
    height: 100%;
    border-right: dashed 2px var(--border-grey);
    left: 20px;
    top: 0;
}

.timeline-item {
    margin-bottom: 30px;
    position: relative;
    padding-left: 15px;
}

.timeline-item::before {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    left: 13px;
    top: 3px;
    background-color: var(--primary);
}

.timeline-content {
    padding: 0 20px;
}

.timeline-item:last-child .timeline-content {
    border: none;
}

.timeline-title {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 5px;
    color: var(--full-black);
}

.timeline-subtitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    text-transform: capitalize;
}

.timeline-subtitle .timeline-desc,
.timeline-subtitle .timeline-amount {
    font-size: 0.9rem;
    font-weight: normal;
    color: var(--grey-text);
    text-transform: capitalize;
}

.btn-outline-primary {
    border-color: var(--primary);
    color: var(--primary);
    text-transform: capitalize;
}

.btn-outline-primary:hover {
    background-color: var(--primary);
    border-color: var(--primary);
}

.custom-checkbox {
    display: inline-block;
    position: relative;
    cursor: pointer;
    font-size: 16px;
    user-select: none;
}

.custom-checkbox-input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.custom-checkbox-label {
    display: inline-block;
    padding-left: 30px;
    position: relative;

    text-transform: capitalize;
}

.custom-checkbox-icon {
    display: inline-block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 1px solid var(--border-grey);
    border-radius: 4px;
    background-color: transparent;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.custom-checkbox-icon svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    opacity: 0;
    transition: opacity 0.3s ease;
    stroke: var(--stroke);
}

.custom-checkbox-input:checked+.custom-checkbox-label .custom-checkbox-icon {
    background-color: var(--border-grey);
    border-color: var(--border-grey);
}

.custom-checkbox-input:checked+.custom-checkbox-label .custom-checkbox-icon svg {
    opacity: 1;
}

.form-items {
    position: relative;
}

.form-items button {
    all: unset;
    position: absolute;
    top: 50%;
    right: 2%;
    transform: translateY(-50%);
}

.form-items button svg {
    color: var(--border-grey);
}

.form-items label {
    position: absolute;
    top: 0;
    left: 10px;
    background-color: var(--bg-white);
    padding: 0 15px;
    font-size: 1rem;
    text-transform: capitalize;
    font-weight: 500;
    color: var(--border-dark-grey);
    transform: translateY(-50%);
}

.form-items input {
    border: none;
    outline: none;
    width: 100%;
    border: solid var(--border-grey) 2px;
    border-radius: 1rem;
    padding: 15px 20px;
}

.form-items input:focus {
    border-color: var(--border-dark-grey);
}

.btn-primary,
.btn-primary:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    border-radius: 1rem;
}

.divider-with-text {
    width: 100%;
    height: 2px;
    text-align: center;
    position: relative;
    margin: 1rem 0;
    background-color: var(--border-grey);
}

.divider-with-text span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--bg-white);
    padding: 0 1rem;
    font-size: 1rem;
    text-transform: capitalize;
    font-weight: 500;
    color: var(--full-black);
}

input.invalid {
    border-color: var(--red-background) !important;
    background-color: var(--red-background) !important;
}

.my-table td {
    padding: 1rem 0;
}

.my-table tr {
    border-bottom: 1px solid var(--border-grey) !important;
}

.my-table tr:hover {
    background-color: var(--primary-bg) !important;
    cursor: pointer;
}

/* end global */
/* starting navbar */
.sidebar {
    width: 95px;
    height: 100vh;
    border-right: solid 1px var(--light-white);
    padding: 10px;
    position: sticky;
    top: 0;
    left: 0;
    background-color: var(--full-white);
    display: flex;
    flex-direction: column;
}

.sidebar .logo {
    padding: 2rem 0;
}

.sidebar .logo img {
    display: block;
    width: 90%;
    margin: 0 auto;
    object-fit: cover;
}

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

.sidebar ul li {
    margin-top: 10px;
}

.sidebar ul li button {
    all: unset;
    width: 90%;
    margin: 0 auto;
    cursor: pointer;
}

.sidebar ul li a,
.sidebar ul li button {
    text-decoration: none;
    color: var(--full-black);
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 1rem;
    padding: 0.3rem;
    transition: all 0.3s ease-in-out;
    position: relative;
    min-height: 50px;
    justify-content: center;
}

@media (max-width: 768px) {

    .sidebar ul li a,
    .sidebar ul li button {
        flex-direction: row;
        align-items: center;
        justify-content: start;
        padding: 1rem;
        font-size: 1.2rem;
        margin-left: 30px;
        margin-right: 30px;
    }

    .sidebar ul li a svg,
    .sidebar ul li button svg {
        margin-right: 10px;
    }
}

.sidebar ul li a:hover,
.sidebar ul li button:hover,
.sidebar ul li button.active,
.sidebar ul li a.active {
    background-color: var(--primary);
}

.sidebar ul li a svg,
.sidebar ul li button svg {
    transition: all 0.3s ease-in-out;
}

.sidebar ul li a:hover svg,
.sidebar ul li button:hover svg,
.sidebar ul li a.active svg,
.sidebar ul li button.active svg {
    stroke: var(--full-white);
}

.sidebar ul li a,
.sidebar ul li button {
    width: 75px;
    height: 70px;
}

.sidebar ul li a i,
.sidebar ul li button i {
    font-size: 1.5rem !important;
    color: #4c4c4c;
}

@media (max-width: 768px) {

    .sidebar ul li a,
    .sidebar ul li button {
        width: 100%;
        height: 50px;
    }

    .sidebar ul li a i,
    .sidebar ul li button i {
        font-size: 2rem !important;
        color: #4c4c4c;
        margin-left: 10px;
        margin-right: 10px;
    }

    .sidebar ul li a span,
    .sidebar ul li button span {
        font-size: 1.5rem !important;
    }
}

.sidebar ul li a .nav-item,
.sidebar ul li button .nav-item {
    margin-top: 0.1rem;
    font-weight: 600;
    text-transform: capitalize;
    transition: all 0.3s ease-in-out;
    font-size: 0.7rem;
    color: #3b3b3b;
    /* display: none; */
}

.sidebar ul li a:hover .nav-item,
.sidebar ul li button:hover .nav-item,
.sidebar ul li a.active .nav-item,
.sidebar ul li button.active .nav-item,
.sidebar ul li a.active i {
    color: var(--full-white);
}

.sidebar ul li a.active .nav-item,
.sidebar ul li button.active .nav-item {
    display: block;
}

.sidebar .nav-ul {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.sidebar ul li a.active::after,
.sidebar ul li button.active::after {
    position: absolute;
    content: "";
    top: 0;
    left: -110%;
    width: 100%;
    height: 80%;
    background-color: var(--primary);
    border-radius: 1rem;
    transform: translateY(7px);
    box-shadow: var(--primary) 2px 0px 36px 0px;
}

/* end navbar */
/* starting header */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 2rem;
    padding-right: 2rem;
}

.header .breadcrumb-c {
    display: flex;
    align-items: center;
}

.header .breadcrumb-c ol {
    list-style: none;
}

.header .breadcrumb-c ol li {
    display: inline-block;
}

.header .breadcrumb-c ol li a {
    text-decoration: none;
    color: var(--grey-title);
    font-size: 1.6rem;
    text-transform: capitalize;
    font-weight: 600;
}

.header .breadcrumb-c ol li:not(:last-child) a::after {
    content: "/";
    padding: 0 5px;
}

.header .breadcrumb-c ol li:last-child a {
    color: var(--full-black);
}

.header .header-actions ul {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 0 2rem;
}

.header .header-actions ul li a {
    text-decoration: none;
    color: var(--grey-text);
    display: flex;
    align-items: center;
    gap: 0 5px;
}

.header .header-actions ul li a svg {
    stroke: var(--grey-text);
}

header .header-actions ul li a span {
    font-size: 1.3rem;
    text-transform: capitalize;
    font-weight: 700;
}

/* end header */
/* starting statics */
.dashboard-statics {
    padding: 0 2rem;
    margin-top: 2rem;
}

.dashboard-statics .statics-card h3 {
    font-size: 1rem;
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 0.5rem;
    color: var(--grey-title);
}

.dashboard-statics .statics-card p {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--full-black);
}

.dashboard-statics .statics-card .currency {
    font-size: 1rem;
    font-weight: 600;
    color: var(--grey-title);
    padding-left: 5px;
    text-transform: uppercase;
}

.dashboard-statics .statics-card select,
.dashboard-statics .statics-card select:focus,
.dashboard-statics .statics-card select:active {
    border: none;
    outline: none;
    background-color: transparent;
    box-shadow: none;
    font-size: 1rem;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--full-black);
}

.dashboard-statics .statics-card select option {
    font-size: 1rem;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--full-black);
}

/* end statics */
/* upload invoice */
.side-statics.statics-card {
    padding: 0;
}

.side-statics.statics-card .uploader {
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
}

.statics-card .uploader .icon {
    border-radius: 50%;
    padding: 10px;
}

.statics-card .uploader .icon svg {
    border: solid 2px var(--light-white);
}

.statics-card .uploader .text h3 {
    font-size: 1.6rem;
    margin: 0;
    margin-left: 1rem;
    color: var(--full-black);
    font-weight: 600;
    text-transform: capitalize;
}

.statics-card .uploader p {
    margin: 0;
    margin-left: 1rem;
    color: var(--grey-title);
    font-weight: 600;
}

.side-statics.statics-card form {
    padding: 1rem;
}

.side-statics.statics-card .form-wrapper {
    border: dashed 3px var(--light-white);
    border-radius: 1rem;
    min-height: 200px;
    text-align: center;
}

.side-statics.statics-card .form-wrapper input {
    display: none;
}

.side-statics.statics-card .form-wrapper {
    width: 100%;
    cursor: pointer;
}

.form-wrapper h3 {
    font-size: 1.6rem;
    margin: 0;
    margin-left: 1rem;
    color: var(--full-black);
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 1rem;
}

.form-wrapper svg {
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.form-wrapper p {
    margin: 0;
    margin-left: 1rem;
    color: var(--grey-title);
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

/* end upload invoice */
/* supplier card */
.supplier-card-custom .supplier-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.supplier-card-custom .supplier-image img {
    display: block;
    width: 100%;
    border-radius: 1rem;
}

.supplier-card-custom .supplier-details {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
}

.supplier-card-custom .supplier-details .name {
    font-size: 1.2rem;
    font-weight: 400;
    text-transform: capitalize;
    color: var(--grey-text);
}

.supplier-card-custom .supplier-details .price {
    font-size: 1.6rem;
    font-weight: 600;
}

.supplier-card-custom .card-dates {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.supplier-card-custom .card-dates .date {
    color: var(--grey-title);
    font-size: 1rem;
    font-weight: 400;
}

/* end supplier card */
/* dashborad search styling */
.dashboard-header {
    margin-top: 1rem;
}

.dashboard-header .info h3 {
    color: var(--header-title);
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.dashboard-header .info p {
    color: var(--grey-text);
    font-size: 1rem;
    font-weight: 400;
}

.dashboard-header .search {
    flex-grow: 1;
    /* padding-left: 10%; */
}

.dashboard-header .search .search-card {
    box-shadow: rgba(0, 0, 0, 0.03) 0px 1px 2px, rgba(0, 0, 0, 0.03) 0px 2px 4px,
        rgba(0, 0, 0, 0.03) 0px 4px 8px, rgba(0, 0, 0, 0.03) 0px 8px 16px,
        rgba(0, 0, 0, 0.03) 0px 16px 32px, rgba(0, 0, 0, 0.03) 0px 32px 64px;
    padding: 10px 1rem;
    border-radius: 10px;
    display: flex;
    gap: 0 0.5rem;
}

.dashboard-header .search .search-card .icon svg {
    stroke: var(--grey-text);
}

.dashboard-header .search .search-card input {
    all: unset;
    padding: 5px 20px;
    flex-grow: 1;
}

.dashboard-header .search .search-card .border-select {
    border-left: solid 2px var(--grey-title);
}

/* end dasboard search styling */
/* start dasboard table */
.dashboard-table {
    margin-top: 1rem;
}

.dashboard-table .table-header {
    display: flex;
    gap: 0 25px;
    border-bottom: solid 1px var(--light-grey);
}

.dashboard-table .table-header .table-header-item {
    color: var(--grey-title);
    font-size: 1.3rem;
    font-weight: 400;
    text-transform: capitalize;
    padding-bottom: 1rem;
    cursor: pointer;
}

.dashboard-table .table-header .radio {
    display: none;
}

.radio:checked+.table-header-item {
    color: var(--header-title);
    border-bottom: solid 2px var(--header-title);
}

.dashboard-table .table {
    margin-top: 1rem;
}

.dashboard-table .table tbody tr td {
    padding: 15px;
}

.dashboard-table .table .invoice_id {
    font-weight: 700;
    color: var(--primary);
}

.dashboard-table .table svg {
    cursor: pointer;
}

/* end dasboard table */
/* dasboard table footer */
.table-footer .result {
    display: flex;
    align-items: center;
}

.table-footer .custom-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.table-footer .custom-pagination .page-item {
    padding: 10px 5px;
}

.table-footer .custom-pagination .page-item .page-link {
    color: var(--grey-title);
    font-size: 1.5rem;
    font-weight: 600;
    border-radius: 10px;
}

.table-footer .custom-pagination .page-item.active .page-link {
    background-color: var(--primary-background);
    border-color: var(--purple);
    color: var(--purple);
}

/* end dasboard table footer */
/* start show invoice */
.showInvocie .title {
    font-weight: bold;
    font-size: 1.5rem;
    text-transform: capitalize;
}

.showInvocie .description-item {
    font-size: 1rem;
    text-transform: capitalize;
    color: var(--grey-text);
}

.item-card .item-card-title,
.items-table .item-card-title {
    font-weight: bold;
    font-size: 2rem;
    text-transform: capitalize;
}

.information-cards .information-card {
    border-radius: 1rem;
    border: 1px solid var(--border-grey);
    width: 100%;
    padding: 5px 10px;
    height: 100%;
}

.information-cards .information-card-sub-title {
    text-transform: capitalize;
    color: var(--grey-text);
}

.information-cards .information-card-title {
    font-weight: 500;
    text-transform: capitalize;
    font-size: 1.2rem;
    margin-top: 10px;
}

.items-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.items-table table thead tr th {
    border-bottom: solid 2px var(--primary);
    border-top: solid 2px var(--primary);
    padding: 15px 1rem;
    text-transform: capitalize;
    font-weight: 600;
    font-size: 1rem;
    white-space: nowrap;
}

.items-table table thead tr th:last-child {
    border-right: solid 2px var(--primary);
    border-top-right-radius: 2rem;
    border-bottom-right-radius: 2rem;
}

.items-table table thead tr th:first-child {
    border-left: solid 2px var(--primary);
    border-top-left-radius: 2rem;
    border-bottom-left-radius: 2rem;
}

.items-table table tbody tr td {
    /* border-bottom: solid 2px var(--border-grey); */
    /* border-top: solid 2px var(--border-grey); */
    padding: 10px 5px;
    text-transform: capitalize;
    font-weight: 600;
    font-size: 1rem;
    /* margin-top: 1rem; */
}

.invoice-summery ul {
    list-style: none;
}

.invoice-summery ul li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.invoice-summery ul li .description-item {
    font-size: 1rem;
    text-transform: capitalize;
    color: var(--grey-text);
    font-weight: 500;
}

.invoice-summery ul li .amount {
    font-size: 1rem;
    text-transform: capitalize;
    color: var(--full-black);
    font-weight: 700;
}

.invoice-summery ul li:last-child .description-item {
    color: var(--full-black);
    font-weight: 700;
}

.invoice-summery ul li:last-child .amount {
    color: var(--full-black);
    font-weight: 800;
}

.transactions .transcation-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    flex-wrap: wrap;
}

.transactions .transcation-card-head h3 {
    font-size: 1rem;
    text-transform: capitalize;
    font-weight: bold;
}

.transactions .transcation-card-sub-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    flex-wrap: wrap;
}

.transactions .transcation-card-sub-head .sub-head,
.transactions .transcation-card-sub-head .sub-amount {
    font-size: 1rem;
    text-transform: capitalize;
    font-weight: bold;
}

.transactions.statics-card {
    height: 100%;
}

.invoice-image {
    width: 100%;
}

.invoice-image img {
    width: 100%;
    display: block;
    object-fit: cover;
}

.dashboard-btn,
.dashboard-btn:hover {
    border-radius: 1rem;
    width: 50%;
    padding: 2rem 0;
    border: dashed 2px var(--border-grey);
}

.transactions .allowance-placeholder {
    color: var(--grey-text);
    text-transform: capitalize;
    font-size: 1rem;
}

.pop-input {
    border-radius: 1rem;
    border: solid 2px var(--border-grey);
    padding: 10px 10px;
    margin: 1rem 0;
}

.pop-input label {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--grey-text);
    text-transform: capitalize;
}

.pop-input input {
    all: unset;
    font-size: 1rem;
    font-weight: 400;
    color: var(--grey-text);
    width: 100%;
}

/* end show invoice */
/* start auth */
.auth {
    height: 100vh;
}

.auth::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("/imgs/auth-bg.png");
    background-size: cover;
    background-position: center;
    z-index: -1;
    /* Places it behind the content */
}

.auth .text-side {
    margin-top: 10%;
}

.auth .text-side .logo {
    text-align: center;
}

.auth .text-side .logo img {
    width: 40%;
    margin: 0 auto;
}

.auth .text-side .carousel {
    margin: 0 auto;
    margin-top: 4rem;
}

.auth .carousel .carousel-item h3 {
    font-weight: 700;
    font-size: 1.6rem;
    text-transform: capitalize;
    color: var(--full-white);
    margin-bottom: 1rem;
}

.auth .carousel .carousel-item p {
    font-weight: 400;
    font-size: 1rem;
    text-transform: capitalize;
    color: var(--full-white);
}

.auth .carousel .carousel-indicators {
    justify-content: flex-start;
    margin-right: 0;
    margin-bottom: -10%;
    margin-left: 0;
    margin-top: 3rem;
}

.auth .carousel .carousel-indicators button {
    width: 30px;
    height: 5px;
}

.auth .carousel .carousel-indicators .active {
    width: 50px;
}

.login-form .actions {
    margin-bottom: 1.5rem;
}

.login-form .actions a {
    color: var(--full-black);
    text-transform: capitalize;
    font-size: 1rem;
    display: block;
    text-decoration: none;
}

.auth .form-side {
    height: 120vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.auth .form-side .form-card {
    width: 100%;
    padding: 2rem;
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
    background-color: var(--bg-white);
    min-height: 90%;
    height: fit-content;
}

.auth .form-side .form-card .lets {
    color: var(--full-black);
    text-transform: uppercase;
    font-size: 1.2rem;
    display: block;
    font-weight: 500;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}

.auth .form-side .form-card h3 {
    color: var(--full-black);
    text-transform: capitalize;
    font-size: 2.5rem;
    display: block;
    font-weight: 500;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}

.auth .socail {
    padding-top: 1rem;
}

.auth .socail .col-12 a {
    width: 100%;
    padding: 10px 1rem;
    color: var(--full-black);
    text-transform: capitalize;
    font-size: 1.2rem;
    text-decoration: none;
    border: 1px solid var(--border-grey);
    border-radius: 1rem;
    margin-bottom: 1rem;
    display: block;
}

.auth .socail .col-12 a img {
    margin: 0 20px;
}

.auth .bottom-text {
    color: var(--full-black);
    text-transform: capitalize;
    font-size: 1rem;
    display: block;
    margin-bottom: 1rem;
    text-align: center;
    margin-top: 1rem;
}

.auth .bottom-text a {
    font-weight: 700;
    color: var(--full-black);
}

/* end auth */
/* start plans page */
.plans .plan-title {
    text-align: center;
    margin-top: 3rem;
    font-weight: bold;
    font-size: 2.5rem;
}

.plans .plan-title::first-letter {
    text-transform: capitalize;
}

.plans .plan-description {
    text-align: center;
    margin-top: 1rem;
    color: var(--grey-text);
    font-weight: normal;
    font-size: 1.4rem;
}

.plans .plan-card-container {
    margin: 4rem 0;
    border-radius: 1rem;
    background-color: var(--full-white);
    padding: 1rem;
}

.plans .plan-card-container .col-lg-3 {
    position: relative;
}

.plans .plan-card-container .plan-card {
    height: 100%;
    border-radius: 1rem;
    padding: 1rem;
    border: solid 1px var(--border-grey);
    transition: all 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
}

.plans .plan-card-container .plan-card.plan-card-popular {
    border: solid 16px var(--primary-bg);
    border-radius: 2rem;
    transform: translateY(-10%);
    background-color: var(--primary);
}

.plans .plan-card h3 {
    text-transform: capitalize;
    font-weight: 600;
    font-size: 1.5rem;
    margin: 1rem 0;
    display: flex;
    justify-content: space-between;
}

.plans .plan-card.plan-card-popular h3 {
    color: var(--full-white);
}

.plans .price {
    margin: 1rem 0;
    display: flex;
    align-items: center;
}

.plans .price .price-val {
    font-weight: 700;
    padding-right: 1rem;
    font-size: 2.5rem;
}

.plans .plan-card.plan-card-popular .price .price-val {
    color: var(--full-white);
}

.plans .price .price-description {
    color: var(--grey-title);
    font-weight: 400;
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
}

.plans .plan-card.plan-card-popular .price .price-description {
    color: var(--full-white);
}

.plans .plan-card .items {
    list-style: none;
    padding: 0;
    flex-grow: 1;
}

.plans .plan-card button {
    margin-top: auto;
}

.plans .plan-card .items li {
    display: flex;
    margin-bottom: 1rem;
}

.plans .plan-card .items li .icon {
    border-radius: 50%;
}

.plans .plan-card .items li .icon svg {
    color: var(--icon);
    fill: var(--icon-bg);
}

.plans .plan-card.plan-card-popular .items li .icon svg {
    fill: var(--primary-bg-dark);
    color: var(--full-white);
}

.plans .plan-card .items li span {
    margin-left: 1rem;
}

.plans .plan-card.plan-card-popular .items li span {
    color: var(--full-white);
}

.plans .plan-card .btn-theme-primary {
    background-color: var(--primary-bg);
    color: var(--primary);
    font-size: 1.3rem;
    font-weight: bold;
    text-transform: capitalize;
    border-radius: 1rem;
}

.plans .plan-card.plan-card-popular .btn-theme-primary {
    background-color: var(--primary-bg-dark);
    color: var(--full-white);
}

.plans .plan-card .btn-theme-primary:hover {
    background-color: var(--primary-bg-dark);
    color: var(--full-white);
}

.plans .plan-card.plan-card-popular .btn-theme-primary:hover {
    background-color: var(--primary-bg);
    color: var(--primary-bg-dark);
}

.plans .plan-card .badge-popular {
    font-size: 1rem;
    background-color: var(--full-white);
    color: var(--full-black);
    padding: 10px 20px;
    border-radius: 1rem;
}

.user-plan-card {
    /* border: 1px solid #ccc; */
    padding: 3rem 2rem;
    margin: 1rem auto;
    border-radius: 1rem;
    /* width: 80%; */
    box-shadow: rgba(0, 0, 0, 0.05) 0px -1px 2px,
        rgba(0, 0, 0, 0.03) 0px 1px 2px, rgba(0, 0, 0, 0.03) 0px 2px 4px,
        rgba(0, 0, 0, 0.03) 0px 4px 8px, rgba(0, 0, 0, 0.03) 0px 8px 16px,
        rgba(0, 0, 0, 0.03) 0px 16px 32px, rgba(0, 0, 0, 0.03) 0px 32px 64px;
    background-color: var(--full-white);
}

.user-plan-card .user_name {
    font-size: 2rem;
    font-weight: 700;
    color: var(--full-black);
    text-transform: capitalize;
    margin-bottom: 1rem;
}

.user-plan-card .duration {
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid var(--border-grey);
}

.user-plan-card .duration .plan_title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--full-black);
    text-transform: capitalize;
}

.user-plan-card .duration .duration_left {
    font-size: 1rem;
    font-weight: 600;
    color: var(--full-black);
    text-transform: capitalize;
}

.user-plan-card .duration .price-description {
    color: var(--full-black);
    text-transform: capitalize;
}

.user-plan-card .duration .benefit svg {
    fill: var(--primary-bg-dark);
    color: var(--full-white);
}

.user-plan-card .duration .benefit-title {
    padding-left: 5px;
    margin-bottom: 1rem;
}

.row .equal {
    height: 100%;
}

/* end plans page */
/* prushase page */

.purshase .statics-card h3 {
    font-size: 1.6rem;
    font-weight: bold;
    text-transform: capitalize;
    margin: 0 1rem;
    padding: 1rem 0;
}

.purshase .divider {
    height: 2px;
    background-color: var(--border-grey);
}

.purshase .statics-card h4 {
    font-size: 1rem;
    font-weight: bold;
    text-transform: capitalize;
}

.purshase .statics-card .payment-form-items {
    margin: 0 1rem;
    padding: 1rem 0;
}

.purshase .statics-card .methods {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.purshase .statics-card .methods label {
    border: solid 1px var(--border-grey);
    border-radius: 1rem;
    display: flex;
    gap: 1rem;
    padding: 1rem 1.2rem;
    flex-wrap: wrap;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.purshase .statics-card .methods label:has(input:checked) {
    border: solid 1px var(--primary);
}

.purshase .statics-card .methods label p {
    margin: 0;
    font-size: 0.9rem;
    text-transform: capitalize;
    color: var(--grey-text);
}

.purshase .statics-card .methods label h5 {
    margin: 0;
    margin-bottom: 5px;
    font-size: 1rem;
    font-weight: bold;
    text-transform: capitalize;
    color: var(--full-black);
}

.purshase .statics-card .methods label input {
    display: none;
}

.purshase .statics-card .methods .custom-checkmark {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--full-white);
    border: solid 1px var(--border-grey);
    display: flex;
    justify-content: center;
    align-items: center;
}

.purshase .statics-card .userInfo {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.purshase .statics-card .userInfo .input-wrapper label {
    font-size: 0.9rem;
    text-transform: capitalize;
    color: var(--full-black);
}

.purshase .statics-card .userInfo .input-wrapper {
    margin-right: 1rem;
}

.purshase .statics-card .userInfo .input-wrapper label {
    font-size: 1rem;
    text-transform: capitalize;
    color: var(--full-black);
    font-weight: bold;
}

.purshase .statics-card .userInfo .input-wrapper input {
    all: unset;
    border: solid 1px var(--border-grey);
    padding: 10px 20px;
    border-radius: 1rem;
    font-size: 0.9rem;
    /* text-transform: capitalize; */
    color: var(--grey-text);
    width: 90%;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.purshase .statics-card .btn-primary {
    font-weight: bold;
    display: block;
    padding: 1rem 2rem;
    margin-bottom: 1rem;
}

.purshase .statics-card input['type=checkbox'] {
    accent-color: var(--primary);
}

.purshase .statics-card .custom-checkbox-icon svg {
    stroke: var(--light-white);
}

.purshase .statics-card .custom-checkbox-input:checked+.custom-checkbox-label .custom-checkbox-icon {
    background-color: var(--primary);
    border-color: var(--primary);
}

.purshase .statics-card .custom-checkbox-label {
    cursor: pointer;
}

.purshase .statics-card .info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
}

.purshase .statics-card .info .pricing {
    font-size: 3rem;
    font-weight: bold;
}

.purshase .statics-card .info .name {
    font-size: 1.2rem;
    font-weight: 400;
    text-transform: capitalize;
}

.purshase .statics-card .info .description {
    font-size: 0.9rem;
    font-weight: 400;
    text-transform: capitalize;
    color: var(--grey-text);
}

.purshase .statics-card .belling ul {
    list-style: none;
    padding: 0;
    margin: 1rem;
    padding-bottom: 2rem;
}

.purshase .statics-card .belling ul li {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.purshase .statics-card .payment-btn {
    margin: 1rem auto;
    margin-bottom: 2rem;
    width: 50%;
}

/* end prushase page */
/* start payment history */
.history h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.history .statics-card .card-header {
    width: 100%;
}

.history .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.history .card-header .head-items {
    margin: 0 1rem;
}

.history .card-header .head-items h4 {
    font-size: 1rem;
    font-weight: 600;
    text-transform: capitalize;
    display: inline;
}

.history .card-header .head-items .search_wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.history .card-header .head-items .search_label {
    display: flex;
    margin-bottom: 1rem;
    border: solid 1px var(--border-grey);
    border-radius: 1rem;
    flex-grow: 1;
    padding: 10px;
    gap: 1rem;
}

.history .card-header .head-items.grow {
    flex-grow: 1;
}

.history .card-header .head-items .search_label input {
    all: unset;
    flex: 1;
    font-size: 1.2rem;
    color: var(--grey-text);
}

.history .card-header .head-items .search_label input::placeholder {
    color: var(--grey-title);
    font-size: 1rem;
    text-transform: capitalize;
}

.history .card-header .head-items .search_label svg {
    stroke: var(--grey-title);
}

.history .card-header .head-items .date_label {
    display: flex;
    margin-bottom: 1rem;
    border: solid 1px var(--border-grey);
    border-radius: 1rem;
    flex-grow: 1;
    padding: 10px;
    gap: 1rem;
}

.history .card-header .head-items .date_label input {
    /* display: none; */
    all: unset;
}

.history .card-header .head-items .date_label input::placeholder {
    color: var(--full-black);
    font-size: 1rem;
    font-weight: 500;
    text-transform: capitalize;
}

.history .card-header .head-items span {
    font-size: 1.4rem;
    font-weight: bold;
    text-transform: capitalize;
    margin-bottom: 1rem;
    margin-right: 1rem;
}

.history table {
    width: 100%;
}

.history table .supscriptio-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.history table .supscriptio-item .name {
    font-size: 1rem;
    font-weight: 400;
    text-transform: capitalize;
    color: var(--grey-title);
}

.history table .supscriptio-item .value {
    font-size: 1.3rem;
    font-weight: 500;
    text-transform: capitalize;
    color: var(--full-black);
}

/* end payment history */
/* start cards */
.custom-static-card {
    margin-bottom: 20px;
}

.custom-static-card .statics-card {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 20px;
    overflow: hidden;
    color: black;
    /* Content color */
    z-index: 1;
    background-color: #a996d8;
}

.custom-static-card .statics-card::before {
    content: "";
    position: absolute;
    top: 80px;
    left: 240px;
    right: 0;
    bottom: 0;
    background-image: url("/card-image.png");
    background-size: cover;
    opacity: 0.1;
    z-index: -1;
}

.custom-static-card .card-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    position: relative;

    svg {
        width: 70%;
        height: auto;
    }
}

.custom-static-card .card-text {
    color: white;
    font-family: inherit;
    font-weight: 600;
}

.custom-static-card .card-first-bg {
    background: var(--card-first-bg) !important;

    .card-icon {
        background-color: var(--card-first-icon-color);
    }
}

.custom-static-card .card-second-bg {
    background-color: var(--card-second-bg);

    .card-icon {
        background-color: var(--card-second-icon-color);
    }
}

.custom-static-card .card-third-bg {
    background-color: var(--card-third-bg);

    .card-icon {
        background-color: var(--card-third-icon-color);
    }
}

.custom-static-card .card-fourth-bg {
    background-color: var(--card-fourth-bg);

    .card-icon {
        background-color: var(--card-fourth-icon-color);
    }
}

.custom-static-card .currency {
    color: white;
}

.side-statics.statics-card.uploader-card {
    background-color: var(--primary-bg);
}

.card-items-statics {
    width: 100%;
    background-color: var(--primary-bg);
    text-align: center;
    color: var(--primary);
    border-radius: 10px;
    margin-bottom: 1rem;
    height: 100%;

}

.card-items-statics.green {
    background-color: var(--green-background);
    color: var(--green-text);
    /* box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.04), 0px 8px 16px 0px #cef8e0; */
}

.card-items-statics.orange {
    background-color: var(--orange-background);
    color: var(--orange-text);
    /* box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.04), 0px 8px 16px 0px #fed6b2; */
}

.card-items-statics.red {
    background-color: var(--red-background);
    color: var(--red-text);
    /* box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.04), 0px 8px 16px 0px #ffece8; */
}

.card-items-statics .card-items-header {
    font-size: 1.3rem;
    font-weight: 700;
    text-transform: capitalize;
    padding: 10px;
}

.card-items-statics .card-items-content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px;
}

.card-items-statics .card-items-content .card-items-content-single {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.card-items-statics .card-items-content .card-items-content-single .number {
    font-size: 1rem;
    font-weight: 600;
}

.card-items-statics .card-items-content .card-items-content-single .description {
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
}

/* end cards */
/* start top bar */
.top-wrapper {
    display: none;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
    background-color: var(--full-white);
}

.top-wrapper .top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

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

.top-wrapper .items .profile img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

/* end top bar */
/* start bottom bar */
.bottom-wrapper {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
    background-color: var(--full-white);
    box-shadow: 0px -10px 10px rgba(0, 0, 0, 0.1);
}

.bottom-wrapper .bottom-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
}

.bottom-wrapper .bottom-nav-list {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    max-height: 10vh;
    padding-left: 0;
}

.bottom-wrapper .bottom-nav-list li a {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: var(--full-black);
}

.bottom-wrapper .bottom-nav-list li a span {
    font-size: .8rem;
    font-weight: 500;
    text-transform: capitalize;
}

.bottom-nav .logo {
    transform: translateY(-30%);
}

/* end bottom bar */
.hide-date {
    display: none !important;
}

.close-icon {
    position: fixed;
    left: 210vh;
    top: 10%;
    width: 50px;
    height: 50px;
    z-index: 9999;
    background-color: rgba(255, 255, 255, .7);
    border-radius: 50%;

    transition: all ease-in-out 0.5s;
}

/* start responsive */
@media only screen and (max-width: 768px) {
    html {
        font-size: 10px;
    }

    body {
        min-height: 100vh;
        zoom: 1;
    }

    .website-container {
        display: block !important;
    }

    main {
        margin-top: 5vh;
        padding-bottom: 10vh;
    }

    .custom-checkbox-label {
        font-size: 1rem;
    }

    .form-items input {
        font-size: 1.3rem;
    }

    .login-form .actions a {
        margin-top: 5px;
    }

    .sidebar {
        width: 70%;
        position: fixed;
        transform: translateX(100vh);
        z-index: 999999;
        top: 0;
        bottom: 0;
        height: 100vh !important;
        /* Use viewport height instead of percentage */
        transition: all ease-in-out 0.5s;
    }

    .sidebar.side-active {
        transform: translateX(45%) !important;
    }

    .close-icon.active-close {
        left: 10%;
    }

    .sidebar ul li a.active::after,
    .sidebar ul li button.active::after {
        display: none !important;
    }

    .sidebar .logo {
        display: none;
    }

    .sidebar .nav-ul {
        justify-content: flex-start;
    }

    .sidebar ul li a .nav-item,
    .sidebar ul li button .nav-item {
        display: block;
    }

    .search-container-flex {
        flex-wrap: wrap;
    }


    .dashboard-header .search {
        padding-left: 0% !important;
        width: 100% !important;
    }

    .dashboard-table .table-header {
        /* flex-direction: column; */
        margin-bottom: 1rem;
    }

    .sahp-bottom {
        bottom: -35% !important;
        right: -50% !important;
    }

    .sahp-top {
        top: -33%;
        left: -55%;
    }


    .plans .col-lg-3 {
        margin-bottom: 1rem !important;
    }

    .plans .plan-card-container .plan-card.plan-card-popular {
        transform: translateY(0%) !important;
    }

    .history .card-header {
        flex-wrap: wrap;
    }

    .history .card-header .head-items .search_wrapper {
        flex-direction: column;
    }

    .history .statics-card .card-header {
        flex-grow: 1;
    }

    .history .card-header .head-items {
        width: 100%;
    }

    .history .card-header .head-items.with-span {
        display: block !important;
        text-align: center;
    }

    .history table .supscriptio-item .name,
    .history table .supscriptio-item .value {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .history table .supscriptio-item {
        margin: 10px;
    }

    .card-items-statics .card-items-content .card-items-content-single .number {
        font-size: 1.5rem;
    }

    .card-items-statics .card-items-header {
        font-size: 1.3rem;
    }

    .card-header .head-items {
        width: 100%;
    }

    .top-wrapper,
    .bottom-wrapper {
        display: block;
    }

    .dashboard-table .table tbody tr td {
        padding: 5px;
    }

    .dashboard-table .table tbody tr td span {
        white-space: nowrap;
        text-overflow: ellipsis;
    }

}


.custom-card {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0px 0px 10px #f1effe;
    border: 1px solid #cbc3e4;
}


.table-items-value {
    padding: .5rem;
}




/* --------------------------------------------------------------------------------------------------------
Edites-----------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------- */
.c-table th,
.c-table td {
    padding: 12px;
    text-align: center;
}

.c-table th {
    background: #009495;
    color: #ffffff;
    font-size: 16px;
}

.c-table td {
    font-size: 16px;
    color: #333;
}

.c-table tbody tr:nth-child(even) {
    background: #f4f7fc;
}

.scroll-container {
    max-height: 200px;
    overflow: auto;
}

.action-phone {
    display: inline-flex;
    color: #001d3d;
    border-radius: 5px;
    font-weight: 600;
    letter-spacing: 1px;
    text-decoration: none;
    font-size: 14px;
    transition: 0.3s;
}

.action-phone:hover {
    color: #009495;
    text-decoration: underline;
}

.action-mail {
    display: inline-flex;
    color: #003566;
    border-radius: 5px;
    font-weight: 600;
    letter-spacing: 1px;
    text-decoration: none;
    font-size: 14px;
    transition: 0.3s;
}

.action-mail:hover {
    color: #009495;
    text-decoration: underline;
}

.dept {
    display: inline-flex;
    padding: 3px 10px;
    font-size: 12px;
    border-radius: 5px;
    color: #fff;
    margin-top: 2px;
    margin-bottom: 2px;
}

.color-1 {
    background-color: #ef476f;
}

.color-2 {
    background-color: #ffd166;
    color: #000;
}

.color-3 {
    background-color: #06d6a0;
    color: #000;
}

.color-4 {
    background-color: #118ab2;
}

.color-5 {
    background-color: #073b4c;
}

.c-table td::before {
    content: attr(data-label);
    font-weight: bold;
    display: none;
    margin-right: 10px;
}


.text-capitalize {
    text-transform: capitalize;
}
@media screen and (max-width: 767px) {

    .c-table,
    .c-table tbody,
    .c-table tr,
    .c-table td,
    .c-table th {
        display: block;
        width: 100%;
        padding: 0;
    }

    .table-center>.c-table {
        display: none;
    }

    .c-table th {
        display: none;
    }

    .simplebar-content .c-table tr {
        overflow: hidden;
    }

    .simplebar-content .c-table tr td {
        padding-left: 20px;
        padding-right: 20px;
        width: calc(100% - 40px);
    }

    .c-table td {
        text-align: left;
    }

    .c-table td::before {
        display: inline-block;
        color: #009495;
    }

    .c-table tr {
        padding: 10px 0px;
        border-bottom: 2px solid #009495;
    }

    .simplebar-content .c-table tbody tr:last-child {
        border: 0;
    }
}
@media (min-width: 768px) {
	.auth .logo {
		position: absolute;
		top: 11%;
		width: 500px;
		left: -67px;
	}

	.auth .carousel {
		position: absolute;
		top: 23%;
		left: 83px;
		width: 35%;
	}
}