/* poppins */
@import url('https://fonts.googleapis.com/css2?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');
/* lato */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&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');
/* Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&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 {
    /* colors */
    --bg: #CCFFEA;
    --black: #000000;
    --gray: #4A4A4A;
    --admin-border: #7DCABC;
    --admin-icon: #004A87;
    --navy: #003058;
    --white: #FFFFFF;
    --package: #ACAEB1;
    --extra-light-gray: #D4D4D4;
    --light-grey: #BCBCBC;
    --login-btn-bg: #2D2D2D;
    --dark-blue: #2B345A;
    --form-text: #767676;
    --dark-green: #081D14;
    --charcoal-brown: #3D3D3D;
    --medium-green: #2A7C59;
    --mint-white: #EBFFF7;
    --sandy-white: #F8F8F8;
    --card-comments: #9E9E9E;
    --deep-brown: #2F1F01;
    --zinc: #1E3950;
    --charcoal-gray: #6B7280;
    --pale-white: #F9FAFB;
    --dusky-navy: #111827;
    --medium-mint: #7EFFC9;
    --violet: #4F46E5;
    --pale-grey: #A4A4A4;
    --dark-ocean: #357266;
    --dark-zinc: #05152A;
    --blue-grey: #74797E;
    --red-grey: #4F4F4F;
    --white-green: #CEFFEA;
    --bright-green: #9BF0CCC7;
    /* gradient */
    --greenGradient: linear-gradient(179deg, #D0FFEB 0.62%, #45FFB0 107.45%);
    --bright-gradient: linear-gradient(130deg, #D0FFEB -35.26%, #45FFB0 112.44%);
    /* fonts */
    --poppins: "Poppins", sans-serif;
    --lato: "Lato", sans-serif;
    --Inter: "Inter", sans-serif;

}
.green{
    color:#081D14;
}
.duskyNavy {
    color: #111827;
}

.charcoalGrey {
    color: #6B7280;
}

.poppins {
    font-family: "Poppins", sans-serif;
}

.lato {
    font-family: "Lato", sans-serif;
}

.inter {
    font-family: "Inter", sans-serif;
}

li {
    list-style: none;
}

/* font sizes */
.fs-42 {
    font-size: 42px;
}

.fs-36 {
    font-size: 36px;
}

.fs-30 {
    font-size: 30px;
}

.fs-28 {
    font-size: 28px;
}

.fs-24 {
    font-size: 24px;
}

.fs-22 {
    font-size: 22px;
}

.fs-20 {
    font-size: 20px;
}

.fs-18 {
    font-size: 18px;
}

.fs-16 {
    font-size: 16px;
}

.fs-15 {
    font-size: 15px;
}

.fs-14 {
    font-size: 14px;
}

.fs-12 {
    font-size: 12px;

}

/* font weights */
.bold {
    font-weight: 700;
}

.semibold {
    font-weight: 600;
}

.medium {
    font-weight: 500;
}

.regular {
    font-weight: 400;
}

.light {
    font-weight: 300;

}

/* line-height */
.line-40 {
    line-height: 40px;
}

.line-30 {
    line-height: 30px;
}

.line-27 {
    line-height: 27px;
}

.line-24 {
    line-height: 24px;
}

.line-20 {
    line-height: 20px;
}

.line-16 {
    line-height: 16px;
}

.line-n {
    line-height: normal;
}

/* headings */
h1 {
    font-family: var(--lato);
    font-size: 42px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

h2 {
    font-family: var(--lato);
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

h3 {
    font-family: var(--lato);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

h4 {
    font-family: var(--Inter);
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

h5 {
    font-family: var(--lato);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

h6 {
    font-family: var(--Inter);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.roundedButton {
    display: flex;
    width: 160px;
    padding: 10px 12px;
    justify-content: center;
    align-items: center;
    gap: 24px;
    border-radius: 40px;
    border: 1px solid var(--login-btn-bg);

}

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




/* sidebar */
[data-kt-app-layout=dark-sidebar] .app-sidebar {
    background: var(--greenGradient);
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .app-sidebar-logo {
    border-bottom: none;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu>.menu-item .menu-link .menu-title {
    color: var(--medium-green);
    font-family: var(--Inter);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;

}

.menu-item .menu-link {
    padding: .7rem .1rem;
    transition: 0.2s ease-in;

}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu>.menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-title {
    color: var(--medium-green);
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu>.menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon i {
    color: var(--medium-green);
}

.menu-item .menu-link:hover {
    background: var(--white);
    transition: 0.2s ease-in;

}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu>.menu-item .menu-link.active {
    background: var(--white);
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu>.menu-item .menu-link.active .menu-title,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu>.menu-item .menu-link.active .menu-icon i {
    color: var(--medium-green);

}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu>.menu-item .menu-link .menu-icon i {
    color: var(--medium-green);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.app-sidebar-menu .menu {
    padding: 10px 12px;
}

.app-sidebar-menu .menu>.menu-item {
    border-bottom: 1px solid var(--medium-green);
    padding-top: 1.3rem;
}

a.log-out {
    display: flex;
    padding: 10px 12px;
    align-items: center;
    gap: 24px;
    border-radius: 40px;
    background: var(--mint-white);
    color: var(--medium-green);
    font-style: normal;
    transition: .2s ease-in;
}

a.log-out:hover {
    background: #fff;
    transition: .2s ease-in;

}

i[class*=" fa-"] i[class*=" fa-"] {
    color: var(--medium-green);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/* signin */
.body#kt_body {
    background: var(--bg);
}

.sign-In-btn {
    width: 100%;
}

.p-lg-20 {
    padding: 14rem 5rem !important;

}

.credential-form {
    border-radius: 20px;
    border: 1px solid #000;
    background: #FFF;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10);
    display: flex;
    padding: 30px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.register-link {
    color: var(--gray);
}

.primary-link {
    color: var(--dark-blue);
    text-decoration: underline;
}

.forget-password {
    text-decoration: none;
    padding-bottom: 10px ;
}
.register-link .primary-link:focus,
.register-link .primary-link:hover,
.register-link .primary-link:active{
    text-decoration: underline !important;
}
/* user index */
.user-home-heading{
    color: var(--Black-900, var(--dark-zinc));
}
.user-home-heading-span{
    color: var(--Black-500, var(--package));

}
.expire-date{
    color: var(--login-btn-bg);
}
.user-notifications{
    border-radius: 10px;
border: 1px solid #E2E2E2;
background: #FFF;
}
.user-notifications .noti-cards{
padding: 2rem 1.25rem;
}
.card-body.card-body-home.card-user-home {
    padding-top: 0;
    padding-bottom: 20px;
}
/* Admin index */
.main-form-start {
    border-radius: 20px;
    border: 1px solid #000;
    background: #FFF;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10);
}

.form-logo {
    width: 126px;
    height: 107px;
}

.form-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.admin-page-date {
    color: var(--navy);
}

.admin-page-welcome {
    color: var(--navy);
    padding: 12px;
}
.password{
    position: relative;
}
.password i.fas.fa-eye,
.password i[class*=" fa-"] {
    line-height: 1;
    font-size: 16px;
    color: var(--login-btn-bg);
    cursor: pointer;
    width: 10px;
    position: absolute;
    bottom: 16px;
    right: 20px;
}

.details-box {
    border-radius: 50px;
    background: var(--sandy-white);
    padding: 10px 27px;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.details-box i.bi {
    color: var(--admin-icon);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;

}

.admin-contacts {
    padding: 10px 20px 10px 5px;
}

.admin-contacts-border {
    border-right: 1px solid var(--admin-border);
}

.admin-contacts-details {
    gap: 15px;
}

.details-box .details-box-text {
    color: var(--deep-brown);
    font-style: normal;
}

.details-box-subtext {
    color: var(--zinc);
}

.admin-contactList.d-flex.flex-row {
    padding: 20px 0;
}

.card .card-body-home {
    padding: 0;
    padding-top: 20px;
}

.card .card-body-home .home-cards {
    border-radius: 15px;
    margin-bottom: 14px;

}

.card .card-body-home .home-cards .card-box {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    border: 1.5px solid var(--medium-mint);

}

.card .card-body-home .home-cards .card-box .user-msg {
    color: var(--deep-brown);
    padding-bottom: 10px;

}

.card .card-body-home .home-cards .card-box .msg-time {
    color: var(--pale-grey);
    padding-left: 30px;

}

.card .card-body-home .home-cards .card-box .msg-details {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    color: var(--dark-ocean);
    text-overflow: ellipsis;
    max-width: 500px;
    padding-top: 10px;
}

.card .card-body-home .home-cards .card-box .view-details-btn {
    width: 112px;
    padding: 8px 5px;
}

/* userManagement */
.card {
    border: 0;
    background-color: transparent;
    box-shadow: none;
}

.nav-line-tabs .nav-item .nav-link {
    padding: 10px 12px;
    border: 1px solid var(--login-btn-bg);
    background: transparent;
    color: var(--login-btn-bg);
    font-family: var(--Inter);
}

.nav-line-tabs .nav-item .nav-link.active,
.nav-line-tabs .nav-item .nav-link:hover:not(.disabled) {
    background: var(--black);
    color: var(--white);
    transition: .2s ease-in;
    border: 1px solid var(--black);

}


.nav-line-tabs .nav-item .nav-link.active,
.nav-line-tabs .nav-item .nav-link:hover:not(.disabled) {
    border-bottom: none;

}

.nav-tabs .nav-link {
    transition: .2s ease-in;
    border-radius: 40px;
}

.nav-link:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .25rem rgb(17 18 19 / 7%);
}

.nav-line-tabs {
    border: none;
}

.card .card-header {
    border-bottom: none;
    min-height: unset;
    padding-bottom: 20px;

}

.card-body.table-responsive {
    padding-top: .7rem;
}

/* table */
.table {
    border-radius: 8px;
    border: 1px solid var(--gray-200, #E5E7EB);
    background: var(--white, var(--white));
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
}

.table tr:nth-child(even),
.table:not(.table-bordered)>:not(:last-child)>:last-child>* {
    background: var(--pale-white);
    /* background-color: rebeccapurple; */

}

.table:not(.table-bordered) td:first-child,
.table:not(.table-bordered) th:first-child,
.table:not(.table-bordered) tr:first-child {
    padding-left: 45px;
}

.tab-content .table tbody td {
    font-family: var(--lato);
    font-size: 14px;
    font-style: normal;
    line-height: 20px;
    font-weight: 400;
    color: var(--charcoal-gray);

}

.tab-content #kt_tab_pane_1 .table tbody td:nth-child(3) {
    font-weight: 600;
    color: var(--charcoal-gray);
}

.tab-content #kt_tab_pane_1 .table tbody td:nth-child(1),
.tab-content #kt_tab_pane_1 .table tbody td:nth-child(2) {
    color: var(--dusky-navy);
    font-weight: 600;

}

.table tbody td:nth-child(1) {
    color: var(--dusky-navy);
    font-weight: 600;
}

.statusbutton {
    display: flex;
    width: 65px;
    padding: 5px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 5px;
    transition: 0.2s ease-in;

}

.statusbutton.activeStatus {
    border: 1px solid var(--medium-green);
    color: var(--medium-green);
}

.statusbutton.activeStatus:hover {
    background-color: var(--medium-green);
    color: var(--white);
    transition: 0.2s ease-in;
}

.statusbutton.deactiveStatus {
    border: 1px solid var(--charcoal-brown);
    color: var(--charcoal-brown);

}

.statusbutton.deactiveStatus:hover {
    background-color: var(--charcoal-brown);
    color: var(--white);
    transition: 0.2s ease-in;
}

i[class*=" fa-"] {
    line-height: 1;
    font-size: 1.5rem;
    color: var(--charcoal-gray);
}

.table:not(.table-bordered)>:not(:first-child) {
    font-family: var(--lato);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.btn:not(.btn-outline):not(.btn-dashed):not(.btn-bordered):not(.border-hover):not(.border-active):not(.btn-flush):not(.btn-icon) {
    padding: 10px 12px;
}

tr .btn:not(.btn-outline):not(.btn-dashed):not(.btn-bordered):not(.border-hover):not(.border-active):not(.btn-flush):not(.btn-icon) {
    border: none;
}

.menu-state-bg-light-primary .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) {
    transition: color .2s ease;
    background-color: var(--mint-white);
    color: var(--medium-green);
}

/* subscriptions */
.subscription-cards-box{
    gap: 10px;
}
.subscription-cards-box .card-body {
    flex: unset;
    padding: .7rem 0.5rem;
}

.subscription-box {
    display: flex;
    gap: 25px;
}
.subscription-box .subscriptio-card {
    display: flex;
    /* padding: 24px 25px 33px 25px; */
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    display: flex;
    width: 270px;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 8px;
    border: 1px solid #66FFBE;
    background: var(--white, #FFF);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    height: 100%;
}

.subscription-box .subscriptio-card .package-box {
    padding: 24px 25px 24px 25px;
    width: 100%;
    border-bottom: 1px solid var(--Black-700, var(--blue-grey));
}

.subscription-box .subscriptio-card .package-includes {
    padding: 8px 25px 24px 25px;
    width: 100%;
    color: var(--Black-700, var(--blue-grey));
}

.subscription-box .subscriptio-card .package-box .duration-box {
    padding-bottom: 22px;
}

.subscription-box .subscriptio-card .package-box .duration-box i {
    padding: 7.083px;
    border-radius: 5.667px;
    background: var(--login-btn-bg);
    color: var(--white);
    font-size: 20px;
}

.subscription-box .subscriptio-card .package-box .duration-box .duration {
    color: var(--Black-900, var --dark-zinc);
}

.package-duration,
.included-items i {
    color: var(--Black-500, var(--package));
}

.subscription-box .subscriptio-card.included-items {
    gap: 15px;
}

/* notifications */
.notifications-box .card-body {
    padding: .7rem 2rem;
}

.notification-cards {
    margin-bottom: 14px;
}

.card .card-box {
    padding: 1.7rem;
    color: var(--bs-card-color);
    display: flex;
    gap: 10px;
    border-radius: 10px;
    background: #FFF;
    width: 100%;
    transition: .2s ease-in;
}

.card-body-notification .card-box {
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10);

}

.card-body-notification .card-box:hover {
    background: var(--medium-green);
    transition: .2s ease-in;

}

.card .card-box .username {
    color: var(--black);
    font-style: normal;
}

.card .card-box .comments {
    color: #9E9E9E;
    font-style: normal;
}

.card .card-box .comments-age {
    color: var(--medium-green);
    font-style: normal;
}



.card-body-notification .card-box:hover .comments-age,
.card-body-notification .card-box:hover .comments,
.card-body-notification .card-box:hover .username {
    color: var(--white);
}

/* profile setting */
.profile-setting-card {
    display: flex;
    width: 786px;
    padding: 30px;
    flex-direction: column;
    align-items: flex-start;
    /* gap: 20px; */
    border-radius: 20px;
    border: 1px solid #E5E7EB;
    background: #FFF;
}

.profile-setting-card .card-body {
    width: 100%;
}

.profile-setting-card .card-header {
    padding-bottom: 0;
}

.profile-setting-card .card-body-profile .form-control {
    border-radius: 50px;
    border: 1px solid var(--form-text);
    padding: 15px;
    align-items: center;
    gap: 10px;
    color: var(--red-grey);
    font-style: normal;

}

.profile-setting-card .card-body-profile .form-label {
    color: var(--black);
    font-style: normal;

}

.btn:not(.btn-outline):not(.btn-dashed):not(.btn-bordered):not(.border-hover):not(.border-active):not(.btn-flush):not(.btn-icon) {
    border: 1px solid var(--login-btn-bg);
}

.profile-setting-card .card-body-profile .form-control:focus-visible {
    outline: none;
}

.form-buttons-box {
    display: flex;
    gap: 20px;
    justify-content: flex-end;
    align-items: center;
}

.card-body-profile .form-buttons-box {
    margin-top: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    transition: .2s ease-in;
}

.card-body-profile .form-buttons-box button:hover {}

/* contact list inner */
.contactlistInner-parent_card .card-header {
    padding: 0;
    padding-bottom: 20px;
}

.contactlistInner-parent_card .contact-card {
    gap: 15px;
}

.contactlistInner-parent_card .contact-card-box {
    border-radius: 5px;
    background: var(--white-green);
    padding: 20px;
}

.contactlistInner-parent_card .contact-card-box h5 {
    color: var(--medium-green);

}

.contactlistInner-parent_card .contact-card-box h6 {
    color: var(--gray-500, var(--charcoal-gray));
    font-style: normal;
    line-height: 20px;
    /* 142.857% */
}

.contactlistInner-parent_card .contact-header-button {
    padding-top: 30px;
}

/* ===================templates=================== */
/* subscription modal */
div#subs,
div#cont,
div#asgNo {
    background-color: rgba(155, 240, 204, 0.78);

}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--bs-modal-header-padding);
    padding-bottom: 0;
    border-bottom: none;

}

.modal-content .modal-title {
    color: var(--medium-green);

}

.modal-content {
    display: flex;
    flex-direction: column;
    background-color: var(--bs-modal-bg);
    background-clip: padding-box;
    border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
    border-radius: var(--bs-modal-border-radius);
    box-shadow: var(--bs-modal-box-shadow);
    border-radius: 10px;
    border: 5px solid #2A7C59;
    background: #FFF;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10);
    padding: 10px;
    flex-direction: column;
    gap: 10px;
}

.modal-content i.fas.fa-times {
    background-color: var(--medium-green);
    color: var(--white);
    font-size: 17px;
    padding: 7px;
    border-radius: 5px;

}

.modal-content i.fas.fa-times:hover {
    color: var(--white);


}

.modal-body .roundedButton {
    margin-top: 26px;
    width: unset;
}

.modal-body label {
    color: var(--black);
}

.form-control {
    width: 100%;
    padding-left: 10px;
    color: var(--bs-gray-700);
    background-clip: padding-box;
    border: 1px solid var(--bs-gray-300);
    box-shadow: false;
    border-radius: 50px;
    border: 1px solid #D4D4D4;
    background: #FFF;
    box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.05);

}


/* .modal-body .form-control input { */
input {
    color: var(--gray-900, var(--dusky-navy));
}


/* .modal-body .form-control input::placeholder { */
input::placeholder {
    color: var(--light-grey);
}

.modal-body .currency .currency-field {
    position: relative;
}

.modal-body .currency i {
    position: absolute;
    color: #333;
    font-family: var(--lato);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    top: 143px;
    right: 34px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* add contact */