/* Mobile */
@media (max-width: 575.98px) {
    :root {
        --fontSizeMultiplier: 2.5;
        --marpadMultiplier: 2;
        --widthMultiplier: 1;
        --heightMultiplier: 1;
    }
}

/* Mobile (Landscape) & Tablet*/
@media (min-width: 576px) and (max-width: 1199.98px) {
    :root {
        --fontSizeMultiplier: 1.2;
        --marpadMultiplier: 1;
        --widthMultiplier: 0.8;
        --heightMultiplier: 0.8;
    }
}

/* Laptop */
@media (min-width: 1200px) {
    :root {
        --fontSizeMultiplier: 1;
        --marpadMultiplier: 0.8;
        --widthMultiplier: 0.5;
        --heightMultiplier: 0.5;
    }
}

/* Desktop */
@media (min-width: 1400px) {
    :root {
        --fontSizeMultiplier: 0.8;
    }
}


/* font-sizes and height common */
:root {
    --heightBig: calc(5 * 1vh * var(--heightMultiplier));
    --bodyFontSize: calc(1vw * var(--fontSizeMultiplier));
}

body {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(67, 89, 113, 0);
    text-rendering: optimizeLegibility;
    font-family: 'Public Sans', sans-serif;
    font-weight: 400;
    font-size: var(--bodyFontSize);
}

.breadcrumb-item+.breadcrumb-item::before {
    padding-top: .2rem;
}

.select2-container--bootstrap .select2-results__option .select2-results__option {
    font-size: 0.875rem;
}

html.team .loggedin h1 {
    font-size: calc(0.5rem + var(--bodyFontSize));
    font-weight: 600;
}

html.team .loggedin h2,
html.team .loggedin h3 {
    font-size: calc(0.2rem + var(--bodyFontSize));
    font-weight: 600;
}

html.team .loggedin h4 {
    font-size: calc(0.1rem + var(--bodyFontSize));
    font-weight: 600;
}

html.team .loggedin h5,
html.team .loggedin h6 {
    font-size: var(--bodyFontSize);
    font-weight: 600;
}

html.team .container {
    max-width: 1320px;
    margin-right: auto;
    margin-left: auto;
}

html.team body.fix-header .page-wrapper {
    padding-top: calc(5 * 1vmax * var(--marpadMultiplier));
}

html.team body.loggedin .page-wrapper .page-wrapper-overlay {
    transform: translateX(-2rem);
}

/*******************
sidebar navigation
******************/
html.team .left-sidebar-custom {
    width: 220px;
    padding-left: 5px;
}

html.team .left-sidebar .sidebar-nav {
    position: relative;
    padding-right: 5px;
    padding-left: 10px;
    padding-top: 1vh;
    background: transparent;
}

.collapse.in {
    transition: all 0.3s ease;
}

html.team .sidebar-nav ul li {
    position: relative;
    margin-top: 0.5rem;
}

html.team .sidebar-nav ul li a {
    padding: 7px 15px 7px 6px;
    font-weight: 600;
    font-size: var(--bodyFontSize);
}

html.team .sidebar-nav>ul>li>a i {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 2.6rem;
    height: 2.5rem;
}

html.team .sidebar-nav>ul>li>a i.mdi::before {
    font-size: 1.8rem;
    background: -webkit-linear-gradient(var(--secondary), var(--blue));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #000;
}

html.team .sidebar-nav ul li a:hover {
    font-weight: 600;
}

html.team .sidebar-nav ul li a:hover i,
html.team .sidebar-nav>ul>li.active>a i {
    padding: 4px 8px;
    border-radius: .5rem;
    box-shadow: 0 .3125rem .625rem 0 rgba(0, 0, 0, .12) !important;
    background-image: linear-gradient(180deg, #20aee3, cornflowerblue);
    background-color: #fff;
    text-align: center;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out
}

html.team .sidebar-nav ul li a:hover i.mdi::before,
html.team .sidebar-nav>ul>li.active>a i.mdi::before {
    color: #fff;
    -webkit-text-fill-color: white;
}

html.team .sidebar-nav>ul>li.active>a {
    padding-bottom: 10px;
    font-weight: 600;
    background-color: #fff;
    box-shadow: 0px 10px 25px 0px rgb(0 0 0 / 12%);
    border-radius: .5rem;
    border-color: transparent;
}

html.team .sidebar-nav .sidenav-submenu a {
    padding-left: 3.5rem;
}

html.team .sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out
}

html.team .sidebar-nav ul li ul {
    padding-left: 0px;
}

html.team .sidebar-nav ul li ul li a {
    position: relative;
    border-right: 0;
    padding: 7px 15px 7px 40px;
}

html.team .sidebar-nav ul li ul li a::before {
    border-radius: 50%;
    content: "";
    width: .375rem;
    height: 0.375rem;
    top: .9rem;
    left: 1.25rem;
    position: absolute;
    background-color: #b4bdc6;
}

html.team .sidebar-nav ul li ul li a.active::before {
    width: .625rem;
    height: .625rem;
    top: 0.8rem;
    left: 1.25rem;
    position: absolute;
    background-color: #20aee3 !important;
    border: 1px solid #e7e7ff !important;
    box-shadow: 0 0 0 2px #dfdedb;
    transition: all 0.3s ease;
}

html.team .sidebar-nav .has-arrow::after {
    display: none;
}

html.team .sidebar-nav .active>.has-arrow::after,
html.team .sidebar-nav li>.has-arrow.active::after,
html.team .sidebar-nav .has-arrow[aria-expanded=true]::after {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-width: 2px 0 0 2px;
    border-color: rgb(147, 146, 146);
    right: 12px;
    top: 50%;
}

html.team .loggedin.settings .sidebar-nav ul li ul li a {
    padding: 7px 15px 7px 20px;
}

html.team .loggedin.settings .sidebar-nav ul li ul li a::before {
    top: .9rem;
    left: .25rem;
}

hr.horizontal {
    background-color: transparent;
}

hr.horizontal.dark {
    background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .4), transparent);
}

span.icon-wrapper {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 2.6rem;
    height: 2.5rem;
    border-radius: 0.5rem;
}

span.icon-wrapper .icon-zns {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.3rem;
    object-fit: cover;
}

html.team .sidebar-nav ul li a:hover .icon-wrapper .icon-zns,
html.team .sidebar-nav ul li.active a .icon-wrapper .icon-zns {
    width: 2.6rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    transition: all 0.1s ease-in-out;
}

/*******************
 Topbar
*******************/
html.team .loggedin .topbar .profile-pic {
    white-space: nowrap;
    padding-left: 15px;
    border-left: 0;
}

html.team .loggedin .topbar .profile-pic span {
    font-size: var(--bodyFontSize);
}

html.team .loggedin .topbar .profile-pic img {
    width: calc(1.2rem + (1vw * var(--widthMultiplier)));
    height: auto;
    border-radius: 50%;
    object-fit: cover;
}

html.team .topbar.topbar-custom {
    background: transparent;
}

html.team .topbar .top-navbar {
    min-height: 60px;
    max-height: 5vh;
    padding: 0px;
}

html.team .topbar .top-navbar .navbar-header {
    line-height: 60px;
}

html.team .topbar .top-navbar .navbar-header .navbar-brand {
    padding-top: 10px;
}

html.team .loggedin .topbar.topbar-custom.topbar-shadow {
    background: #fff;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
    z-index: 50;
}

html.team .loggedin.settings .topbar.topbar-custom.topbar-shadow {
    background: #2d4356;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
    z-index: 50;
}

html.team .topbar.topbar-custom .navbar-header {
    background: inherit;
}

html.team .topbar .top-navbar .navbar-nav>.nav-item>.nav-link {
    font-size: calc(var(--bodyFontSize) + 0.3rem);
    line-height: 4vw;
}

html.team .loggedin.campaigns .topbar .top-navbar .navbar-nav>.nav-item>.nav-link {
    font-size: calc(var(--bodyFontSize) + 0.3rem);
    line-height: 1vw;
}

html.team .topbar .top-navbar .navbar-nav .nav-item .mdi-plus-circle-multiple-outline {
    font-size: calc(var(--bodyFontSize) + 0.6rem);
}

html.team .topbar.topbar-custom .navbar-light .navbar-nav .nav-item>a.nav-link {
    color: #20aee3 !important;
}

html.team .topbar.topbar-custom .notify {
    top: -2vw;
}

html.team .loggedin.campaigns .topbar.topbar-custom .notify {
    top: -0.5rem;
}

/*******************
shadow
*******************/
.shadow-primary {
    border-radius: 1rem !important;
    background-color: rgb(255, 255, 255);
    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    box-shadow: rgba(145, 158, 171, 0.08) 0px 0px 2px 0px,
        rgba(145, 158, 171, 0.08) 0px 12px 24px -4px !important;
}

.shadow-secondary {
    border-radius: 1.25rem !important;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px !important;
}

.shadow-info {
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px !important;
}

.shadow-inset {
    box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, var(--white) 0px 0px 6px 1px inset !important;
}

/*******************
text style
*******************/
html.team .loggedin.default .text-theme {
    color: darkcyan !important;
}

.text-gradient {
    background-image: linear-gradient(90deg, #20aee3, cornflowerblue);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-count {
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 50%;
    border: 1px solid gainsboro;
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

.label {
    font-size: 80%;
    font-weight: 500;
    padding: 4px 6px;
}

.label-rounded {
    border-radius: 3px;
}

.text-small {
    font-size: calc(var(--bodyFontSize) - 0.1rem) !important;
}

/*******************
Background Colors
*******************/
.bg-darkcyan {
    background-color: darkcyan !important;
}

.bg-coral {
    background-color: coral;
}

.bg-profile {
    background-color: rgb(221, 241, 242);
}

.bg-form-control {
    background-color: rgb(241 254 254);
}

.bg-gradient {
    background-image: linear-gradient(rgb(246, 249, 250) 18.6%, rgb(195 223 224) 110%);
}

.bg-transparent {
    background-color: transparent !important;
}

.label-light-default {
    background-color: #ebeef0;
    color: #8592a3;
}

.label-light-lime {
    background-color: #f8fbdb;
    color: #f0d102;
}

.label-outline-default {
    color: var(--gray-dark);
    background-color: #e5e4e4;
}

/*******************
input header search & list actions button
*******************/
.header-search-custom {
    max-width: 40vw;
}

.header-search-custom i {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: bold;
    top: 0.75rem;
    color: #20aee3;
}

.header-search-custom input.form-control {
    width: 30vw;
}

.header-search-custom input.list-actions-search {
    background-color: #fff !important;
    border-radius: 15px;
    border-bottom: 1px solid gainsboro;
}

.header-search-custom input.form-control:focus {
    min-width: 35vw;
    background-color: transparent !important;
    border-radius: 0;
    border: none;
    border-bottom: 2px solid #20aee3;
    transition: all 0.3s ease;
    transform: translateX(-0.5rem);
}

.header-search-custom:focus-within i {
    display: none;
}

html.team .loggedin #list-page-actions .col-sm-12:last-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

html.team .loggedin #list-page-actions .btn-sm {
    height: calc(1.2rem + var(--bodyFontSize));
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: var(--bodyFontSize);
}

html.team .loggedin #list-page-actions .btn-sm i {
    font-size: calc(0.3rem + var(--bodyFontSize));
}

html.team .loggedin #list-page-actions .btn-sm.btn-warning {
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

.list-actions-button.btn-text {
    font-size: var(--bodyFontSize);
    font-weight: 600;
    padding-left: 12px;
    padding-right: 12px;
    vertical-align: middle;
    color: var(--secondary) !important;
    height: 2rem;
}

.list-actions-button-custom {
    height: calc(1.2rem + var(--bodyFontSize));
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: calc(0.3rem + var(--bodyFontSize));
    color: white !important;
    background-color: #20aee3 !important;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    padding: 2px 6px 1px 6px;
    margin-bottom: 0;
}

.list-actions-button-custom span {
    font-size: var(--bodyFontSize);
}

.list-actions-button-custom.btn-text {
    background-color: #cfecfe !important;
    color: #20aee3 !important;
    font-size: var(--bodyFontSize);
    font-weight: 500;
    padding-left: 10px;
    padding-right: 10px;
    vertical-align: middle;
}

.list-actions-button-custom.btn-text:hover,
.list-actions-button-custom.btn-text:focus,
.list-actions-button-custom.btn-text:active {
    background-color: #20aee3 !important;
    color: white !important;
}

.list-actions-button-custom.btn-primary {
    background-color: #6772e5 !important;
    color: white !important;
}

.list-actions-button-custom.btn-warning {
    background-color: #ff9041 !important;
    color: white !important;
}

.list-actions-button-custom.btn-secondary {
    background-color: #f6f9fa !important;
    color: #526066 !important;
}

.list-actions-button-custom:hover {
    color: #20aee3 !important;
    background: transparent !important;
    border: none;
}

html.team .loggedin .profile-tab li a.nav-link,
.customtab li a.nav-link {
    padding: 0.5rem 1rem;
    margin: 0 0.2rem;
}

html.team .loggedin .profile-tab li a.nav-link:hover,
html.team .loggedin .profile-tab li a.nav-link.active,
html.team .loggedin .customtab li a.nav-link:hover,
html.team .loggedin .customtab li a.nav-link.active {
    border-bottom: none;
    color: white;
    background-color: #20aee3;
    border-radius: 5px;
}

.fx-kaban-sorting-dropdown-container {
    width: 100%;
    padding-top: 4px;
    border-bottom: solid 2px bisque;
    font-size: 0.875rem;
    font-weight: 600;
    padding-bottom: 6px;
}

/*******************
 Table
*******************/
.documents-side-panel-billing-body #add-item-button-products {
    display: inline-block !important;
}

.kanban .kanban-wrapper .boards .board .board-body .board-heading-custom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.8rem 1rem 1rem 1rem;
    background: linear-gradient(60deg, rgb(238 248 250) 70%, rgba(245, 249, 238, 1) 94%);
    border-bottom-left-radius: 2rem;
    border-bottom-right-radius: 2rem;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.kanban.project .kanban-wrapper .boards .board .board-body .board-heading-custom,
.kanban.tasks .kanban-wrapper .boards .board .board-body .board-heading-custom {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: rgb(149 157 165 / 33%) 0px 8px 24px;
}

.card-content {
    display: flex !important;
    justify-content: start;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: 0.2px;
}

.card-modal .card-right-panel .x-element-focus {
    border-color: #FFEB3B;
    background-color: #FFEB3B;
}

.table-custom {
    min-height: fit-content;
    max-height: 70vh;
}

.table-custom table th {
    position: sticky;
    top: 0;
    font-weight: 600;
    align-content: center;
    background: linear-gradient(180deg, var(--white) 50%, #c1dcf8 150%);
    border-bottom: 2px solid #e8f2fb !important;
    z-index: 1;
}

.table-custom .table td {
    padding-top: 1vmin;
    padding-bottom: 1vmin;
    padding-right: 1vmax;
}

.table-custom table th a {
    color: #526066;
}

.table-custom .sorting-icons {
    font-size: calc(var(--bodyFontSize) - 0.1rem);
}

html.team .table-custom table tbody tr {
    border-bottom: 2px;
    border-color: transparent;
}

html.team .table-custom table.table-hover tr:hover {
    background: aliceblue !important;
}

html.team .table-config-icon {
    position: absolute;
    right: -0.2rem;
    top: 0.3rem;
    width: calc(1rem + var(--bodyFontSize));
    padding: 2px 0px 2px 4px;
    font-size: var(--bodyFontSize);
    color: white;
    background: #20aee3;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    z-index: 2;
}

html.team .table-config-icon:hover {
    background: whitesmoke;
    color: #20aee3;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
}

html.team .table-config-icon span {
    opacity: 1;
}

.card-embed-fix .table-custom {
    height: auto;
}

.lead-tooltip {
    position: relative;
    display: inline-flex;
    justify-content: space-between;
    align-content: center;
    padding-left: 0.5rem;
}

.lead-tooltip .mdi {
    font-size: calc(var(--bodyFontSize) + 0.3rem);
}

.lead-tooltip .lead-details {
    display: none;
}

.lead-tooltip:hover .lead-details {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 1.6rem;
    left: -3rem;
    background-color: white;
    border-radius: 0.3rem;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    width: 11.875rem;
    padding: 0.6rem;
    font-size: var(--bodyFontSize);
    transition: color .15s ease-in-out,
        background-color .15s ease-in-out,
        box-shadow .15s ease-in-out;
    cursor: default;
    z-index: 1;
}

/*******************
button
*******************/
html.team .loggedin .list-table-action {
    font-size: inherit;
}

.list-table-action-custom .btn {
    width: calc(var(--bodyFontSize) + 0.8rem);
    height: calc(var(--bodyFontSize) + 0.6rem);
    font-size: calc(var(--bodyFontSize) + 0.3rem);
}

.list-table-action-custom .btn-outline-primary,
.list-table-action-custom .btn-outline-success,
.list-table-action-custom .btn-outline-info,
.list-table-action-custom .btn-outline-warning,
.list-table-action-custom .btn-outline-danger,
.list-table-action-custom .btn-outline-default {
    background: transparent;
    padding: 0;
}

.list-table-action-custom .btn-outline-primary:hover i,
.list-table-action-custom .btn-outline-success:hover i,
.list-table-action-custom .btn-outline-info:hover i,
.list-table-action-custom .btn-outline-warning:hover i,
.list-table-action-custom .btn-outline-danger:hover i,
.list-table-action-custom .btn-outline-default:hover i {
    font-size: calc(var(--bodyFontSize) + 0.5rem);
    transition: all 0.3s ease-in-out;
}

.invoice .invoice-wrapper .invoice-item-actions.invoice-item-actions-custom .btn:hover,
.invoice .invoice-wrapper .invoice-item-actions.invoice-item-actions-custom .btn:active,
.invoice .invoice-wrapper .invoice-item-actions.invoice-item-actions-custom .btn:focus,
.estimate .invoice-wrapper .invoice-item-actions.invoice-item-actions-custom .btn:hover,
.estimate .invoice-wrapper .invoice-item-actions.invoice-item-actions-custom .btn:active,
.estimate .invoice-wrapper .invoice-item-actions.invoice-item-actions-custom .btn:focus,
.invoice-item-actions.invoice-item-actions-custom .btn:hover,
.invoice-item-actions.invoice-item-actions-custom .btn:active,
.invoice-item-actions.invoice-item-actions-custom .btn:focus {
    background-color: #20aee3 !important;
    color: #ffffff !important;
    border-color: #20aee3 !important;
}

.invoice-item-actions.invoice-item-actions-custom .btn:hover i {
    color: #ffffff !important;
}

.list-table-action-custom .btn.btn-outline-default.disabled {
    opacity: 0.5;
}

.btn-shadow-primary {
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

.btn-darkcyan {
    padding: 2px 10px 0px 10px;
    font-size: 1.2rem;
    color: darkcyan;
}

.btn-darkcyan:hover,
.btn-darkcyan:focus,
.btn-darkcyan:active {
    color: white;
    background-color: darkcyan;
    outline: none;
}

.btn-modal {
    min-width: 6rem;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 1.5rem;
    padding: 0.5rem 1.5rem;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

.stepper {
    display: flex;
    justify-content: center;
    padding: 0;
    position: relative;
}

.stepper::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: calc(100% - 30px);
    background: linear-gradient(90deg, #317F9F 0%, #317F9F 73%, lightgrey 73%, lightgray 100%);
    z-index: 1
}

.stepper-item {
    display: flex;
    width: 16rem;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 0.5rem 0.875rem 0;
    margin: 0 0 0 calc(calc(-1 * 30px) + 1px);
    -webkit-clip-path: polygon(30px 50%, 0% 0%, calc(100% - 30px) 0%, 100% 50%, calc(100% - 30px) 100%, 0% 100%);
    border-top: 1px solid lightgrey;
    border-bottom: 1px solid lightgrey;
}

.stepper-item.current {
    background: -webkit-linear-gradient(0deg, #317F9F 40%, #20aee3);
    font-weight: bold;
    color: white;
    border-top: 1px solid #317F9F;
    border-bottom: 1px solid #317F9F;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out
}

.stepper-item.complete {
    background: white;
    border-top: 1px solid lightblue;
    border-bottom: 1px solid lightblue;
}

.stepper-item:first-child {
    -webkit-clip-path: polygon(0% 0%, calc(100% - 30px) 0%, 100% 50%, calc(100% - 30px) 100%, 0% 100%);
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-left: 1px solid #317F9F;
}

.stepper-item:hover {
    background: #317F9F;
    color: white;
}

.stepper-item:last-child {
    -webkit-clip-path: polygon(30px 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%);
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.stepper-item.disabled {
    background: whitesmoke;
    color: var(--secondary);
    border: none;
    pointer-events: none;
}

/*******************
Charts linear
*******************/
#itemsWidget {
    height: 300px;
    width: 100%;
    text-align: center;
}

#itemsWidget.c3 text {
    fill-opacity: 1;
}

#itemsWidget .c3-chart-arc text {
    font-size: 14px;
}

#itemsWidget .ct-series-a .ct-area {
    fill: #6772e5;
    opacity: 0.5;
}

.incomeexpenses .ct-series-a .ct-area {
    opacity: 1;
}

.itemsales {
    position: relative;
    height: 250px;
}

.itemsales .chartist-tooltip {
    width: auto;
    background: #363636;
    color: #ffffff;
    border-radius: 4px;
    padding: 4px 15px;
    font-size: 12px;
    margin-bottom: 10px;
    margin-left: 20px;
    position: absolute;
    font-weight: 400;
    display: none;
}

.itemsales .ct-series-a .ct-area {
    fill: #6772e5;
    opacity: 0.5;
}

.itemsales .ct-series-a .ct-line,
.itemsales .ct-series-a .ct-point {
    stroke: #6772e5;
    stroke-width: 2px;
}

.itemsales .ct-series-a .ct-point {
    stroke-width: 6px;
}

.itemsales.c3 line {
    stroke: #cecdcd;
    stroke-dashoffset: inherit;
}

.itemsales.c3 text {
    fill-opacity: 0.6;
}

.itemsales.c3 .c3-legend-item {
    translate: 0 0.5rem;
}

.itemsales.ct-charts .c3-grid line {
    stroke: #cecdcd;
    stroke-dasharray: 2 2;
    stroke-dashoffset: inherit;
}

.itemsales.c3 .c3-axis.c3-axis-x .domain {
    stroke: #cecdcd;
    stroke-dashoffset: inherit;
}

.itemsales.c3 .c3-axis.c3-axis-y text {
    font-size: 0.75rem;
    transform: translateY(2px);
}

.itemsales.c3 .c3-axis.c3-axis-y .domain {
    stroke: #cecdcd;
    stroke-dashoffset: inherit;
}

.dashboard-events .timeline .x-description {
    background-color: #e2f2f3;
}

.input-group-text-custom {
    padding: 0.15rem .5rem;
    font-weight: 600;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
}

.input-date-range {
    width: 7rem;
    padding: .25rem .5rem;
    border-radius: 0;
}

/*******************
avatar
*******************/
.avatar {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.avatar img {
    display: block;
    width: 80%;
    height: 80%;
    object-fit: cover;
}

.avatar-sm {
    height: 2.5rem;
    width: 2.5rem;
}

.avatar-md {
    height: 3.375rem;
    width: 3.375rem;
}

html.team .loggedin .logo-small,
html.team .loggedin .logo-large {
    border-radius: 3px;
}

html.team .loggedin .logo-small {
    max-width: calc(50px + var(--widthMultiplier));
}

.profile_header-custom {
    background: #f4f8f9;
    padding: 1.5rem 1rem;
    border-bottom: 1px solid #e7e7ff;
}

.img-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    width: 6rem;
    height: 5rem;
}

.img-container img {
    max-width: 80%;
    display: inline-block;
    vertical-align: bottom;
    object-fit: cover;
}

.img-flag {
    object-fit: cover;
    width: 1.8rem;
    height: 1.6rem;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    border-right: 2px solid rgba(0, 0, 0, 0.1);
}

html.team .loggedin.ticket #tickets-table-wrapper .x-message .x-body img {
    max-width: 100%;
    height: auto;
}

/*******************
Confirm Box
*******************/
html.team .jconfirm .jconfirm-box.jconfirm-type-red {
    border-top: solid 6px lightseagreen;
}

html.team .jconfirm .jconfirm-box div.jconfirm-title-c {
    padding-bottom: 0;
}

html.team .jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-content {
    margin-bottom: 0px;
}

html.team .jconfirm .jconfirm-box .jconfirm-buttons button {
    padding: 0.3rem 1rem !important;
    font-size: 0.9rem !important;
    border-radius: 1rem;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

html.team .loggedin.contracts .bill_col_quantity i {
    display: none;
}

html.team .loggedin.contracts .shw-rside .bill_col_quantity i {
    display: contents;
}

html.team .loggedin.contracts .shw-rside .invoice-wrapper .table {
    width: 115%;
}

html.team .loggedin.contracts.modal-open .modal-backdrop.show {
    z-index: 50;
}

/****************
    grid card
*****************/

html.team .loggedin.home .card .card-title {
    font-weight: 500;
}

.card-stats {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    padding-bottom: 1.8rem;
    padding-top: 1.8rem;
}

.card-stats-inset {
    border-radius: .25rem !important;
    box-shadow: rgb(231 231 231) 1px 1px 6px 3px inset, rgba(255, 255, 255, 0.5) 0px 0px 2px 1px inset !important;
}

html.team .loggedin .grid-card .grid-card-content.project-card {
    height: 200px;
}

html.team .loggedin .card-group {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

/****************
    ticket
*****************/
html.team .loggedin .ticket .ticket-panel .x-top-header {
    font-size: 1.15rem;
    padding: 1rem;
    padding-bottom: 0.85rem;
    font-weight: 400;
    background-color: #20aee3;
    color: white;
}

html.team .loggedin .ticket .ticket-panel .x-list .x-name {
    font-size: 0.8rem;
    line-height: 1.5;
}

html.team .loggedin .ticket .ticket-panel .x-list .x-details {
    font-size: 1rem;
}

html.team .loggedin.leads.modal-open .modal.show .select2-selection--multiple input.select2-search__field {
    padding-top: .285rem !important;
}

/****************
    zns template
*****************/
.template-wrapper {
    max-width: 430px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.template-wrapper .template-heading {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(155deg, #00BCD4 10%, rgba(0, 90, 167, 1) 60%);
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    position: relative;
}

.template-wrapper .template-content {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem 1rem 3rem 1rem;
    font-weight: 500;
    background: #fff;
    box-shadow: rgb(204, 219, 232) 3px 3px 6px 2px inset,
        var(--white) 0px 3px 6px 1px inset !important;
    position: relative;
    overflow: auto;
}

.template-wrapper .template-heading .x-title {
    position: absolute;
    top: 0.65rem;
    right: -5px;
}

.template-wrapper .template-heading .x-title span {
    font-weight: bold;
}

/* ----------------------------------------------------------
 * FORM BUILDER
 * --------------------------------------------------------*/
html.team .loggedin.settings .form-wrap.form-builder .frmb-control li {
    margin: 0 0 5px 0;
}

html.team .loggedin.settings .form-wrap.form-builder .frmb .form-elements {
    padding: 10px 15px 10px 10px;
}

html.team .loggedin.settings .webform-builder-container .stage-wrap .form-field {
    background-color: white !important;
    padding-bottom: 10px !important;
    margin-bottom: 10px !important;
}

html.team .loggedin.settings .webform-builder-container .stage-wrap .form-field:hover {
    padding-bottom: 20px !important;
    margin-bottom: 20px !important;
    transition: all 0.3s ease;
}

html.team .loggedin.settings .webform-builder-container .stage-wrap h1 {
    color: #20aee3;
}

html.team .loggedin.settings .webform-builder-container .stage-wrap h1,
html.team .loggedin.settings .webform-builder-container .stage-wrap p {
    text-align: center;
}

html.team .loggedin.settings .webform-builder-container .stage-wrap .form-field .field-label {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
}

html.team .loggedin.settings .webform-builder-container .stage-wrap .form-field .prev-holder .form-control {
    cursor: default;
}

html.team .loggedin.settings .webform-builder-container .stage-wrap .form-field .field-actions .btn.formbuilder-icon-cancel {
    color: #FF5722 !important;
}

html.team .loggedin.settings .webform-builder-container .stage-wrap .form-field .field-actions .btn.formbuilder-icon-pencil {
    color: #20aee3 !important;
}

html.team .loggedin.settings .form-wrap.form-builder .frmb li .close-field {
    bottom: 2px;
    padding: 2px 8px;
    background: #20aee3;
    color: #fff;
    font-weight: 500;
}

/* ----------------------------------------------------------
 * PANEL COLLAPSE
 * --------------------------------------------------------*/
html.team .loggedin .panel-collapse>td {
    background: rgba(0, 0, 0, .03);
    padding-left: 0.875rem;
}

/* ----------------------------------------------------------
 * LOGIN
 * --------------------------------------------------------*/
 .logged-out body {
    justify-content: center;
 }

 .login-background {
    background-image: url("/public/images/background/background-blue-logo.png");
    background-repeat: no-repeat;
    background-size: cover;
 }

.logged-out body #main-wrapper {
    padding-top: 0;
}

 .login-box-container {
    width: 100%;
    max-width: 800px;
     margin-left: auto;
     margin-right: auto;
     background-color: #fbfcfd;
     z-index: 4;
     position: relative;
     box-shadow: rgba(0, 0, 0, 0.1) 0 0 10px;
     -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 0 10px;
     -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 0 10px;
     border-radius: 3px;
 }

.welcome-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 30px;
    padding-bottom: 30px;
    background: radial-gradient(circle, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

 .welcome-wrapper img {
     width: 90%;
     padding: 5px;
     object-fit: cover;
 }

 .form-login-wrapper {
    min-height: 60vh;
    display: flex;
    align-items: center;
    padding: 2rem;
 }

  .form-login-wrapper .form-horizontal {
    width: 90%;
    margin: auto;
  }

.box-title {
    text-align: center;
    text-transform: uppercase;
    color: #1586b0;
    font-weight: 600;
    margin-bottom: 25px;
 }

/********************************************* MIDNIGHT THEME CUSTOM *********************************************/

html.team body.loggedin.midnight.client {
    color: #272c33;
}

html.team .midnight.home h1,
html.team .midnight.home h2,
html.team .midnight.home h3,
html.team .midnight.home h4,
html.team .midnight.home h5,
html.team .midnight.home h6,
html.team .midnight.home .text-default {
    color: var(--secondary) !important;
}

html.team .loggedin.midnight.home .card {
    color: var(--secondary);
}

html.team .midnight .sidebar-nav>ul>li>a i.mdi::before {
    background: -webkit-linear-gradient(var(--light), var(--blue));
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

html.team .midnight .sidebar-nav ul li a:hover i.mdi::before,
html.team .midnight .sidebar-nav>ul>li.active>a i.mdi::before {
    color: #fff;
    -webkit-text-fill-color: white;
}

html.team .midnight.mini-sidebar .sidebar-nav #sidebarnav>li>ul {
    background: #edf0f5;
}

html.team .midnight.mini-sidebar .sidebar-nav .has-submenu a {
    color: #6c757d;
}

html.team .midnight .topbar.topbar-custom.topbar-shadow {
    background: #383f48;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
    z-index: 50;
}

html.team .midnight .dashboard-projects-admin a .mail-contnet .mail-desc {
    color: #20aee3;
}

html.team .midnight.home .table td,
html.team .midnight.home .table th {
    border-color: #d9e0e4;
}

html.team .loggedin.midnight .text-theme {
    color: var(--light);
}

html.team .loggedin.midnight .board-heading-custom .text-default {
    color: var(--secondary) !important;
}

html.team .midnight .table.table-hover tr:hover td {
    color: var(--light);
    background-color: #012a53 !important;
}

html.team .loggedin.midnight .topbar ul.dropdown-user li .dw-user-box .u-text .btn:hover,
html.team .loggedin.midnight .topbar ul.dropdown-user li .dw-user-box .u-text .btn:hover:focus,
html.team .loggedin.midnight .topbar ul.dropdown-user li .dw-user-box .u-text .btn:hover:focus:active {
    color: #ffffff;
    padding: 5px 10px;
    display: inline-block;
    background-color: rgb(36, 27, 97) !important;
}

/********************************************* PRESTIGE THEME CUSTOM *********************************************/

html.team .loggedin.prestige h1,
html.team .loggedin.prestige h2,
html.team .loggedin.prestige h3,
html.team .loggedin.prestige .text-info {
    color: darkcyan !important;
}

html.team .loggedin.prestige h4,
html.team .loggedin.prestige h5,
html.team .loggedin.prestige h6 {
    color: var(--secondary) !important;
}

html.team .loggedin.prestige #topnav_username,
html.team .loggedin.prestige .text-success {
    color: #35bcbf !important;
}

html.team .loggedin.prestige .text-gradient {
    background-image: linear-gradient(180deg, rgb(7, 185, 185), darkcyan);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

html.team .loggedin.prestige .x-meta span {
    color: #037d4a !important;
}

html.team .loggedin.prestige .topbar.topbar-custom.topbar-shadow {
    background-image: linear-gradient(rgb(246, 249, 250) 18.6%, rgb(195 223 224) 110%);
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
    z-index: 50;
}

html.team .loggedin.prestige .left-sidebar {
    background: #012c2c;
}

html.team .loggedin.prestige .sidebar-nav ul li.has-submenu.active a,
html.team .loggedin.prestige .sidebar-nav ul li a {
    color: #ced4da;
}

html.team .loggedin.prestige .sidebar-nav ul li.sidenav-submenu a {
    color: var(--secondary);
}

html.team .loggedin.prestige .sidebar-nav>ul>li>a i.mdi::before {
    background: -webkit-linear-gradient(rgb(115 252 252), #fff);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

html.team .loggedin.prestige .sidebar-nav ul li a:hover i,
html.team .loggedin.prestige .sidebar-nav>ul>li.active>a i {
    background-image: linear-gradient(180deg, rgb(7, 185, 185), darkcyan);
    background-color: #fff;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out
}

html.team .loggedin.prestige .sidebar-nav ul li a:hover span,
html.team .loggedin.prestige .sidebar-nav>ul>li.active>a span {
    color: darkcyan;
}

html.team .loggedin.prestige .sidebar-nav ul li a:hover i.mdi::before,
html.team .loggedin.prestige .sidebar-nav>ul>li.active>a i.mdi::before {
    color: #fff;
    -webkit-text-fill-color: white;
}

html.team .loggedin.prestige.mini-sidebar .sidebar-nav #sidebarnav>li>ul {
    background: #edf0f5;
}

html.team .loggedin.prestige .sidebar-nav ul li ul li a.active::before {
    background-color: darkcyan !important;
}

html.team .loggedin.prestige .topbar.topbar-custom .navbar-light .navbar-nav .nav-item>a.nav-link {
    color: darkcyan !important;
}

html.team .loggedin.prestige .btn-info {
    background-color: darkcyan !important;
    color: white !important;
}

html.team .loggedin.prestige .list-actions-button-custom {
    background-color: #35bcbf !important;
}

html.team .loggedin.prestige .list-actions-button-custom.btn-text {
    background-color: #cfecfe !important;
    color: darkcyan !important;
}

html.team .loggedin.prestige .list-actions-button-custom.btn-text:hover,
html.team .loggedin.prestige .list-actions-button-custom.btn-text:focus,
html.team .loggedin.prestige .list-actions-button-custom.btn-text:active {
    background-color: darkcyan !important;
    color: white !important;
}

html.team .loggedin.prestige .list-actions-button-custom.btn-primary {
    background-color: #6772e5 !important;
    color: white !important;
}

html.team .loggedin.prestige .list-actions-button-custom.btn-warning {
    background-color: #ff9041 !important;
    color: white !important;
}

html.team .loggedin.prestige .list-actions-button-custom:hover,
html.team .loggedin.prestige .list-actions-button-custom:focus,
html.team .loggedin.prestige .list-actions-button-custom.active {
    color: darkcyan !important;
    background: transparent !important;
    border: none;
}

html.team .loggedin.prestige .table-config-icon {
    background: darkcyan;
}

html.team .loggedin.prestige .table-config-icon:hover {
    background: whitesmoke;
    color: darkcyan;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
}

html.team .loggedin.prestige .table-custom table th {
    background: linear-gradient(#ffffff 48.6%, rgb(195 223 224) 130%);
}

html.team .loggedin.prestige .table-custom th a {
    color: #21174a;
}

html.team .loggedin.prestige .table-custom tbody td a span {
    color: #5b676d;
}

html.team .loggedin.prestige.client .list-actions-button-custom {
    background-color: transparent !important;
    color: darkcyan !important;
    box-shadow: none;
}

html.team .loggedin.prestige.client .list-actions-button-custom:hover {
    color: white !important;
    background: darkcyan !important;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

html.team .loggedin.prestige .header-search-custom i {
    color: #35bcbf;
}

html.team .loggedin.prestige .header-search-custom input.form-control:focus {
    border-bottom: 2px solid #35bcbf;
}

html.team .loggedin.prestige .profile-tab li a.nav-link:hover,
html.team .loggedin.prestige .profile-tab li a.nav-link.active,
html.team .loggedin.prestige .customtab li a.nav-link:hover,
html.team .loggedin.prestige .customtab li a.nav-link.active {
    border-bottom: none;
    color: white;
    background-color: darkcyan;
}

html.team .loggedin.prestige .right-sidebar .rpanel-title {
    color: white;
    background: darkcyan;
}

html.team .loggedin iframe.iframe-wrapper {
    width: 100%;
    min-height: 55vh;
    border: none;
}

/********************************************* RESPONSIVE BREAKPOINT *********************************************/

@media(max-width: 450px) {
    html.team body.fix-header .page-wrapper {
        padding-bottom: 0;
        padding-left: 0;
    }

    html.team .loggedin.home .container-fluid {
        padding-top: 0;
    }

    .docs-main-wrapper {
        margin-top: 0;
    }

    html.team hr {
        margin-bottom: 0;
        border-top: 0;
    }

    html.team .sidenav-menu-item {
        border-bottom: none;
    }

    html.team .loggedin.client .w-100 {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    html.team .loggedin .table-custom table th {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    html.team .loggedin .table-custom table td {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    #header-search {
        width: 30vw !important;
    }

    #list-page-actions .px-3 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .invoice .invoice-wrapper,
    .estimate .invoice-wrapper {
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
        background-color: #fbfcfd;
        padding: 1.25rem;
    }

    .invoice .invoice-wrapper .invoice-table-wrapper .invoice-table th.x-description,
    .estimate .invoice-wrapper .invoice-table-wrapper .invoice-table th.x-description {
        width: auto;
        min-width: 250px;
    }

    .invoice .invoice-wrapper .invoice-table-wrapper .invoice-table th.x-quantity,
    .estimate .invoice-wrapper .invoice-table-wrapper .invoice-table th.x-quantity {
        min-width: 100px;
    }

    html.team .loggedin.contracts .shw-rside .invoice-wrapper .table {
        width: 220%;
    }

    .documents-side-panel-billing-body .invoice-table .bill_col_description {
        width: 50vw;
    }

    html.team .loggedin.project .tab-body-embedded {
        padding-top: 10px !important;
        padding-left: 15px;
        padding-right: 15px;
    }

    html.team .loggedin.loggedin.campaigns .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    html.team .loggedin.loggedin.campaigns .container.py-4 {
        padding-top: 0.25rem !important;
        padding-bottom: 0 !important;
    }

    html.team .loggedin.campaigns #createCampaignForm .px-5 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    html.team .loggedin.campaigns #createCampaignForm .py-5 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .stepper-item {
        padding: 0.4rem 0.2rem 0.4rem 1.2rem;
    }

    .stepper-item span {
        font-size: 0.6rem;
        width: 4rem;
    }

    .stepper-item:first-child {
        -webkit-clip-path: polygon(0% 0%, calc(100% - 30px) 0%, 100% 50%, calc(100% - 30px) 100%, 0% 100%);
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        border-left: 1px solid #317F9F;
    }
}

@media(max-width: 990px) {

    html.team .loggedin .shw-rside.sidebar-md,
    html.team .loggedin .shw-rside.sidebar-xl {
        width: 100vw;
    }

    .project-timeline {
        position: relative;
        min-height: 60vh;
    }

    .form-login-wrapper {
        min-height: 50vh;
    }

    .form-login-wrapper .form-horizontal {
        margin-top: 0;
    }
}

@media (min-width: 768px) {

    html.team .page-titles .breadcrumb {
        text-transform: capitalize;
    }

    html.team .loggedin.client .page-wrapper {
        background: transparent;
        background-image: linear-gradient(to bottom, var(--light), rgb(189 226 251 / 25%)), url(../images/background/sea-3d.jpg);
        background-size: cover;
        background-repeat: no-repeat;
    }

    html.team body.fix-header .page-wrapper {
        padding-left: 1rem;
        padding-bottom: 1rem;
    }

    /****************
    When click on sidebar toggler and also for tablet
    *****************/
    html.team .topbar-custom .navbar-header {
        width: 220px;
    }

    html.team .mini-sidebar .left-sidebar.left-sidebar-custom {
        width: 95px;
    }

    html.team .mini-sidebar .top-navbar .navbar-header {
        width: 95px;
    }

    html.team .mini-sidebar .sidebar-nav #sidebarnav li {
        border-radius: .5rem;
    }

    html.team .mini-sidebar .sidebar-nav ul li ul li a:hover {
        background-color: aliceblue;
    }

    html.team .mini-sidebar .sidebar-nav #sidebarnav>li.has-submenu:hover>a {
        width: 16.875rem;
    }

    html.team .mini-sidebar .sidebar-nav #sidebarnav>li.has-submenu span.hide-menu.w-px-100 {
        width: auto;
    }

    html.team .mini-sidebar .sidebar-nav #sidebarnav>li.has-submenu:hover>a,
    html.team .mini-sidebar .sidebar-nav #sidebarnav>li.has-submenu:hover>a .hide-menu {
        background-color: #edf0f5;
        color: #1586b0;
        border-radius: 0;
    }

    html.team .mini-sidebar .sidebar-nav #sidebarnav>li>ul {
        padding-bottom: .5rem;
        padding-right: .5rem;
        width: 12.2rem;
    }

    html.team .mini-sidebar .sidebar-nav #sidebarnav>li>a {
        width: 4rem;
        border-radius: .5rem;
        padding: 0.4rem 0.5rem;
        text-align: center;
    }

    html.team .mini-sidebar .sidebar-nav #sidebarnav>li>a:hover {
        border-radius: .5rem;
        background-color: transparent;
    }

    html.team .mini-sidebar .sidebar-nav #sidebarnav>li:hover {
        box-shadow: 0px 10px 25px 0px rgb(0 0 0 / 12%);
    }

    html.team .mini-sidebar .sidebar-nav #sidebarnav>li.active>a {
        box-shadow: none;
    }

    html.team .mini-sidebar .sidebar-nav ul li ul li a {
        padding: 0.375rem 0.5rem;
        background-color: #edf0f5;
    }

    html.team .mini-sidebar .sidebar-nav ul li ul li a::before {
        display: none;
        border-radius: .5rem;
    }

    html.team .mini-sidebar .sidebar-nav #sidebarnav>li:hover>a {
        color: #1586b0;
    }

    html.team .mini-sidebar .left-sidebar .ps__rail-y .ps__thumb-y {
        width: .25rem;
    }
}

@media(min-width: 992px) {

    .table-custom {
        min-height: fit-content;
        max-height: 75vh;
    }

    /*******************
    input header search & list actions search
    *******************/

    html.team .loggedin #list-page-actions .col-sm-12:last-child {
        display: block;
    }

    html.team .loggedin #js-trigger-home-admin-wrapper .text-align {
        text-align: right;
    }

    .list-actions-button-custom {
        padding: 2px 10px 1px 10px;
    }

    .list-actions-button-custom.btn-text {
        font-size: 1rem;
        padding-left: 12px;
        padding-right: 12px;
    }

    .header-search-custom i {
        font-weight: bold;
        top: 10px;
        color: #20aee3;
    }

    html.team .loggedin .card-group {
        display: flex;
        flex-direction: row;
        gap: 0.2rem;
    }

    html.team .loggedin.campaigns .page-titles .col-md-12.col-lg-5 {
        flex: 0 0 100%;
        max-width: 100%;
    }

}

@media(min-width: 1200px) {
    html.team body.fix-header .page-wrapper {
        padding-left: 2rem;
    }
}

/*font Variables*/
/*Color Variables*/
#progressbar {
    margin-bottom: 30px;
    overflow: visible;
}

#progressbar li {
    list-style-type: none;
    color: #99a2a8;
    font-size: 9px;
    width: calc(100%/3);
    float: left;
    position: relative;
    font: 500 13px/1 'Roboto', sans-serif;
}

#progressbar li:nth-child(2):before {
    content: "\f12f";
}

#progressbar li:nth-child(3):before {
    content: "\f457";
}

#progressbar li:before {
    content: "\f1fa";
    font: normal normal normal 30px/50px Ionicons;
    width: 50px;
    height: 50px;
    line-height: 50px;
    display: block;
    background: #eaf0f4;
    border-radius: 50%;
    margin: 0 auto 10px auto;
    cursor: pointer;
}

#progressbar li:after {
    content: '';
    width: 100%;
    height: 10px;
    background: #eaf0f4;
    position: absolute;
    left: -25%;
    top: 21px;
    z-index: -1;
}

#progressbar li:last-child:after {
    width: 150%;
}

#progressbar li.active {
    color: #5cb85c;
}

#progressbar li.active:before,
#progressbar li.active:after {
    background: #5cb85c;
    color: white;
}

#msform {
    text-align: center;
    position: relative;
    padding-top: 50px;
    margin-bottom: 50px;
    background: transparent;
    z-index: 1;
}

.step-link {
    cursor: pointer;
}

.vertical-center {
    display: flex;
    align-items: center;
}
.navbar-top-right{
    #topbav-leadcare{
        width: 30px;
        a{
            padding-left: 5px !important;
            width: 35px;
            position: relative;
            .count_number_lead_care{
                display: inline-flex;
                align-items: center;
                justify-content: center;
                background-color: #ff0000;
                color: #fff;
                font-size: 10px;
                width: 15px;
                height: 15px;
                border-radius: 50%;
                margin-left: 5px;
                vertical-align: middle;
                position: absolute;
                top: 33%;
                right: 5px;
            }
            .rocket-animation {
                display: inline-block;
                animation: rocket-launch 3s ease-in-out infinite;
                position: relative;
            }
        }
    }
}
@keyframes rocket-launch {
    0% {
        transform: translate(-50px, 50px);
        opacity: 0.5;
    }
    40% {
        transform: translate(0);
        opacity: 1;
    }
    50% {
        transform: translate(5px, -5px);
    }
    60% {
        transform: translate(0);
    }
    100% {
        transform: translate(100px, -100px);
        opacity: 0;
    }
}

#settings-wrapper{
    #embed-content-container{
        .input-group{
            max-width: 180px;
            span.input-group-text{
                background: #eaf0f4;
                border: 1px solid #eaf0f4;
                border-radius: 0.25rem 0 0 0.25rem;
                color: #5b676d;
            }
            input{
                width: 4rem;
            }
        }
    }
}
.right-sidebar{
    .input-group{
        span{
            background: #eaf0f4;
            border: 1px solid #eaf0f4;
            border-radius: 0.25rem 0 0 0.25rem;
            color: #5b676d;
        }
    }
}

/*----------------------------------------------------------
 *  2FA
 *--------------------------------------------------------*/
.twofa-form-login{
    max-width: 400px; 
    margin-left: auto; 
    margin-right:auto;
}
.input-2fa-login{
    font-size: 1.4rem; 
    letter-spacing: 0.4em;
}
.secretKey2fa{
    font-family: monospace; 
    word-wrap: break-word;
}
.modal-2fa{
    font-size: 16px;
}
#title-modal-2fa{
    font-size: 18px;
}
.secret-key-display {
    display: inline-block;
    padding: 6px 12px; 
    background-color: #fafaff;
    border: 1px solid #e9ecee;
    border-radius: .25rem;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 1.1rem;
    color: #455A64; 
    word-break: break-all;
    margin-right: 8px; 
    line-height: 1;
  }
  
  .copy-button {
    padding: 4px 9px;
    vertical-align: baseline; 
    border: none;
  }
    #copy-status-message {
      vertical-align: baseline; /* Căn theo dòng với mã và nút */
      font-weight: 500;
  }
/*----------------------------------------------------------
 *  NOTIFY 2FA
 *--------------------------------------------------------*/
 #wrapper-2fa-banner-container{
    border: 1px solid #ffeeba;
    border-radius: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
    overflow: hidden; 
    background-color: #fff3cd;
}

.user-notification-enabled2fa {
  color: #455A64;
  padding: 0.5rem 1rem;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 0; 
  display: flex;
  align-items: center;
  justify-content: space-between; 

  position: relative;
  padding-right: 45px; 
  border: none;
  background-color: transparent;
}

/* Cột Icon */
.user-notification-enabled2fa .banner-icon-col {
  margin-right: 15px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.user-notification-enabled2fa .banner-icon-img {
  width: 50px; 
  height: 50px; 
  object-fit: contain;
}

.user-notification-enabled2fa .banner-text-col {
  flex-grow: 1;
  margin-right: 15px;
}

.user-notification-enabled2fa .banner-text-col h3 {
  margin-top: 0;
  margin-bottom: 3px;
  font-size: 1rem;
  font-weight: 600;
  color: inherit;
}

.user-notification-enabled2fa .banner-text-col p {
  margin-bottom: 0;
  font-size: 0.85rem;
  opacity: 0.9;
}

.user-notification-enabled2fa .banner-button-col {
  flex-shrink: 0;
    a{
        font-size: 14px;
        font-weight: 500;
    }
}

.user-notification-enabled2fa .close {
  position: absolute;
  top: -25px;
  right: -20px;
  z-index: 10; 
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1;
  color: inherit;
  text-shadow: none;
  opacity: 0.6;
  background: transparent;
  border: 0;
  padding: 0.5rem; 
  cursor: pointer;
}
.user-notification-enabled2fa .close:hover {
    opacity: 0.9;
}

@media (max-width: 767px) {
    .user-notification-enabled2fa {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding-right: 1rem;
        padding-left: 1rem;
        padding-bottom: 1rem;
    }
    .user-notification-enabled2fa .banner-icon-col {
        margin-right: 0;
        margin-bottom: 10px;
    }
     .user-notification-enabled2fa .banner-text-col {
         margin-right: 0;
         margin-bottom: 15px;
     }
     .user-notification-enabled2fa .close {
         top: 5px;
         right: 5px;
     }
}