.txt-nowrap{
    white-space: nowrap;
}

/* offcanvas modal */
.offcanvas-fullscreen {
    --bs-offcanvas-width: 56rem;
}

.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
    /* 3 equal-width columns */
}

/* LOGIN REGISTER PAGE START */
.log-page {
    display: flex;
    flex-wrap: wrap;
    padding: 24px 0;
    height: 100vh;
    background: url(../img/bg-log-page.jpg) no-repeat top center;
    background-size: cover;
}

.log-page-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;
    padding: 0 24px;
    width: 100%;
    height: 100%;
}

.log-container {
    display: block;
    width: 440px;
    max-width: 100%;
}

.log-container h2 {
    display: block;
    color: #1c1c1c;
    font-family: "Krona One", sans-serif;
    font-size: 22px;
    line-height: 30px;
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
    position: relative;
    padding: 2px 44px;
}

.log-container h2 .back-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid #E5DDD1;
    border-radius: 100px;
    background-color: #fff;
    font-size: 11px;
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    cursor: pointer;
    transition: 500ms;
}

.log-container h2 .back-icon:hover {
    color: #fff;
    background-color: #1c1c1c;
    border-color: #1c1c1c;
}

.log-container .tl-ttx {
    display: block;
    color: #555;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    text-align: center;
    margin: 10px 0 0 0;
}

.log-box {
    display: block;
    border: 1px solid #000;
    box-shadow: 0px 0px 41px 0px rgba(0, 0, 0, 0.08);
    padding: 32px 30px;
    border-radius: 12px;
    background-color: #fff;
}

.log-box:not(:first-child) {
    margin-top: 40px;
}

.log-box h3 {
    display: block;
    text-align: center;
    font-size: 30px;
    line-height: 33px;
    font-weight: 500;
}

.log-form-container {
    display: block;
}

.log-form-container:not(:first-child) {
    margin-top: 20px;
}

/* LOGIN REGISTER PAGE END */



/* ---------------------- */

.buttonset {
    display: block;
    margin: 30px 0 0 0;
}

/* ---------------------- */
.modal-backdrop {
    --bs-backdrop-bg: #1B1B1B;
    --bs-backdrop-opacity: 0.75;
}

/* ---------------------- */


.table.tbl-style-3 th {
    padding: 1em 0.75em;
}

.table.tbl-style-3 td {
    padding: 0.75em 0.75em;
}


.table.tbl-style-2 th,
.table.tbl-style-2 td {
    padding: 1em;
    font-size: 15px;
}

.table.tbl-style-2 th{    
    font-weight: 600;
}

.table.service-tbl-style th,
.table.service-tbl-style td {
    padding: 1em 0.5em;
}

.table.service-tbl-style {
    --bs-table-color-state: #5c5c5c;
}

.table.service-tbl-style thead {
    position: sticky;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    background-color: #fff;
}

.table.service-tbl-style thead th {
    color: #1c1c1c;
    font-weight: 600;
}

.table.service-tbl-style tfoot {
    position: sticky;
    bottom: -1px;
    inset-inline-start: 0;
    inset-inline-end: 0;
    background-color: #fff;
    box-shadow: -1px 0 1em 0 #bdbdbd9c;
}

/* ---------------------- */

body .select2-container {
    width: 100% !important;
    z-index: 1111;
}

body .select2-dropdown {
    border: none;
    box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.12);
    border-radius: 10px !important;
}

body .select2-container--default .select2-selection--single {
    display: grid;
    grid-template-columns: 1fr auto auto;
    height: 3em;
    border-color: #b7b7b7;
}

body .select2-container--default .select2-selection--single>* {
    grid-row: 1;
}

body .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #1D1D1D;
}

body .select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0.5em 1em;
    font-size: 1rem;
    grid-column: 1;
}

body .select2-container--default .select2-selection--single .select2-selection__arrow {
    position: static;
    width: 40px;
    height: auto;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xIDEuNUw2IDYuNUwxMSAxLjUiIHN0cm9rZT0iIzFDMUMxQyIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K");
    background-repeat: no-repeat;
    background-position: center center;
    grid-column: 3;
}

body .select2-container--default .select2-selection--single .select2-selection__clear {
    grid-column: 2;
    height: auto;
    margin-inline-end: 0;
    width: 40px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEuNDkzNzIgMC4yNTYyOTJDMS4xNTIwMSAtMC4wODU0MzA2IDAuNTk3OTk3IC0wLjA4NTQzMDYgMC4yNTYyOTIgMC4yNTYyOTJDLTAuMDg1NDMwNiAwLjU5Nzk5NyAtMC4wODU0MzA2IDEuMTUyMDEgMC4yNTYyOTIgMS40OTM3Mkw1Ljc2MjU4IDdMMC4yNTYyOTIgMTIuNTA2MkMtMC4wODU0MzA2IDEyLjg0OCAtMC4wODU0MzA2IDEzLjQwMiAwLjI1NjI5MiAxMy43NDM4QzAuNTk3OTk3IDE0LjA4NTQgMS4xNTIwMSAxNC4wODU0IDEuNDkzNzIgMTMuNzQzOEw3IDguMjM3NDNMMTIuNTA2MiAxMy43NDM4QzEyLjg0OCAxNC4wODU0IDEzLjQwMiAxNC4wODU0IDEzLjc0MzggMTMuNzQzOEMxNC4wODU0IDEzLjQwMiAxNC4wODU0IDEyLjg0OCAxMy43NDM4IDEyLjUwNjJMOC4yMzc0MyA3TDEzLjc0MzggMS40OTM3MkMxNC4wODU0IDEuMTUyMDEgMTQuMDg1NCAwLjU5Nzk5NyAxMy43NDM4IDAuMjU2MjkyQzEzLjQwMiAtMC4wODU0MzA2IDEyLjg0OCAtMC4wODU0MzA2IDEyLjUwNjIgMC4yNTYyOTJMNyA1Ljc2MjU4TDEuNDkzNzIgMC4yNTYyOTJaIiBmaWxsPSIjRkYxRjdFIi8+Cjwvc3ZnPgo=");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 0.55em;
}

body .select2-container--default .select2-selection--multiple .select2-selection__clear>span,
body .select2-container--default .select2-selection--single .select2-selection__clear>span,
body .select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}

body .select2-container--default .select2-results__group {
    font-size: 1.125rem;
    padding: 1em;
}

body .select2-results__options--nested {
    padding: 0 1em;
}

body .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #F9F9F9;
    color: inherit;
}

body .select2-container--default .select2-results__option--selected {
    background-color: #fff;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxOCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE4IDEuOTk5ODRMNiAxMy45OTk4TDAuNSA4LjQ5OTg0TDEuOTEgNy4wODk4NEw2IDExLjE2OThMMTYuNTkgMC41ODk4NDRMMTggMS45OTk4NFoiIGZpbGw9IiNGRjFGN0UiLz4KPC9zdmc+Cg==");
    background-repeat: no-repeat;
    background-position: center var(--inline-end) 1em;
}

body .select2-results__option {
    padding: 0.65em;
}

body .select2-container--default .select2-results>.select2-results__options {
    scrollbar-width: none;
}

body .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar {
    display: none;
    /* Safari and Chrome */
}



body .select2-container--default .select2-search--inline .select2-search__field {
    font-family: inherit;
    padding: 14px 16px 14px 16px;
    margin: 0;
    height: 52px;
    line-height: 1.5;
}

body .select2-container--default .select2-selection--multiple {
    padding-bottom: 0;
    padding-top: 0;
}

body .select2-container .select2-selection--multiple .select2-selection__rendered {
    display: inline-block;
    vertical-align: super;
}

body .select2-container--default .select2-selection--multiple .select2-selection__choice {
    vertical-align: inherit;
    float: left;
    background-color: #edf3c9;
    border: 1px solid #dce991;
    padding: 0.35em 0.5em;
    padding-inline-end: 20px;
    line-height: 1.1;
    font-weight: 500;
}

body .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    border-right: none;
    left: auto;
    inset-inline-end: 0;
    top: 0.35em;
}

body .select2-container--default .select2-selection--multiple .select2-selection__clear {
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEuNDkzNzIgMC4yNTYyOTJDMS4xNTIwMSAtMC4wODU0MzA2IDAuNTk3OTk3IC0wLjA4NTQzMDYgMC4yNTYyOTIgMC4yNTYyOTJDLTAuMDg1NDMwNiAwLjU5Nzk5NyAtMC4wODU0MzA2IDEuMTUyMDEgMC4yNTYyOTIgMS40OTM3Mkw1Ljc2MjU4IDdMMC4yNTYyOTIgMTIuNTA2MkMtMC4wODU0MzA2IDEyLjg0OCAtMC4wODU0MzA2IDEzLjQwMiAwLjI1NjI5MiAxMy43NDM4QzAuNTk3OTk3IDE0LjA4NTQgMS4xNTIwMSAxNC4wODU0IDEuNDkzNzIgMTMuNzQzOEw3IDguMjM3NDNMMTIuNTA2MiAxMy43NDM4QzEyLjg0OCAxNC4wODU0IDEzLjQwMiAxNC4wODU0IDEzLjc0MzggMTMuNzQzOEMxNC4wODU0IDEzLjQwMiAxNC4wODU0IDEyLjg0OCAxMy43NDM4IDEyLjUwNjJMOC4yMzc0MyA3TDEzLjc0MzggMS40OTM3MkMxNC4wODU0IDEuMTUyMDEgMTQuMDg1NCAwLjU5Nzk5NyAxMy43NDM4IDAuMjU2MjkyQzEzLjQwMiAtMC4wODU0MzA2IDEyLjg0OCAtMC4wODU0MzA2IDEyLjUwNjIgMC4yNTYyOTJMNyA1Ljc2MjU4TDEuNDkzNzIgMC4yNTYyOTJaIiBmaWxsPSIjRkYxRjdFIi8+Cjwvc3ZnPgo=");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 0.55em;
}

/* ---------------------- */

.chkbx-toggle {
    display: none;
}

.chkbx-toggle+label {
    position: relative;
    cursor: pointer;
    outline: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    width: 40px;
    height: 20px;
    background-color: #e4e4e4;
    border-radius: 60px;
    transition: background 0.4s;
}

.chkbx-toggle+label::before,
.chkbx-toggle+label::after {
    content: "";
    display: block;
    position: absolute;
}

.chkbx-toggle+label::before {
    inset-inline-end: 1px;
    inset-inline-start: 1px;
    top: 1px;
    bottom: 1px;
    background-color: #c3c3c3;
    border-radius: 60px;
    transition: background 0.4s;
}

.chkbx-toggle+label::after {
    top: 2px;
    inset-inline-start: 3px;
    width: 16px;
    height: 16px;
    background-color: #fff;
    border-radius: 100%;
    transition: transform 0.4s;
}

.chkbx-toggle:checked+label {
    background-color: #FF1F7E;
}

.chkbx-toggle:checked+label::before {
    background-color: #FF1F7E;
}

.chkbx-toggle:checked+label::after {
    transform: translateX(18px);
}

html[dir="rtl"] .chkbx-toggle:checked+label::after {
    transform: translateX(-18px);
}

.chkbx-toggle:disabled+label {
    opacity: 0.5;
    cursor: default;
}

/* ---------------------- */

.btn--circleArw {
    font-size: 1rem;
    display: inline-block;
}

.btn--circleArw svg {
    width: 3.25em;
    height: auto;
}

.btn--circleArw rect {
    fill: #EFEFEF;
}

.btn--circleArw path {
    fill: #373737;
}

.btn--circleArw:hover path {
    fill: #fff;
}

.btn--circleArw:hover rect {
    fill: var(--clr-pink);
}

/* ---------------------- */

.btn--pwdVisiblity svg {
    display: block;
}

.btn--pwdVisiblity.pwd-show::after {
    content: '';
    width: 1px;
    position: absolute;
    top: 30%;
    inset-inline-start: 50%;
    background-color: currentColor;
    height: 40%;
    transform: rotate(-45deg);
}



/* ---------------------- */


.grid-fluid {
    grid-column: 1/-1;
}

.grid-col-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.grid-col-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.grid-col-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
}

.grid-col-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
}

.grid-col-6 {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.5rem;
}

.grid-col-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min-width, 100px), 1fr));
    gap: 0.5rem;
}


/* DASHBOARD PAGE STRAT */
.dashboard-page {
    display: flex;
    flex-flow: column;
    height: 100vh;
}



.dash-logo {
    display: block;
    float: left;
}

.dash-logo img {
    display: block;
    float: left;
    height: 18px;
    width: auto;
}

.dash-header-right {
    display: block;
    float: left;
    padding-inline-start: 30px;
}

.dash-top-links {
    display: inline-flex;
    align-items: center;
}

.dash-top-links .links {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 100px;
    font-size: 1rem;
    color: #1C1C1C;
    transition: 500ms;
}

.dash-top-links>*:not(:first-child) {
    margin-inline-start: 1.5rem;
}

.dash-top-links .links:hover {
    background-color: #F4F4F4;
}

.dash-top-links .links.user {
    background-color: #F4D3E2;
    color: #D90865;
    font-size: 1rem;
    font-weight: 700;
    line-height: 20px;
    text-transform: uppercase;
}

.dashboard-body {
    display: flex;
    flex-wrap: nowrap;
    flex: 1;
    overflow: hidden;
}

.dash-left-container {
    display: flex;
    flex-wrap: wrap;
    white-space: nowrap;
    /* width: 14.375rem; */
    background-color: #fff;
    border-inline-end: 1px solid #D8D8D8;
    position: relative;
    z-index: 99;
    transition: 500ms;
}


.dash-nav-container {
    display: flex;
    flex-wrap: wrap;
    float: left;
    /* width: 14.375rem; */
    background-color: #fff;
    border-inline-end: 1px solid #D8D8D8;
    position: relative;
    transition: 500ms;
}

.dash-left-container.show-sub-nav .toggle-sub-nav {
    visibility: visible;
}

.dash-main-nav,
.sub-nav-area {
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.dash-main-nav {
    display: block;
    float: left;
    /* width: 14.375rem; */
    background-color: #1C1C1C;
    padding: 1.25rem 0.8rem;
    /* position: relative;
    z-index: 1; */

    scrollbar-width: thin;
    scrollbar-color: #D90865 transparent;
    
}
.dash-main-nav::-webkit-scrollbar{
    width:6px;
}
.dash-main-nav::-webkit-scrollbar-track{
    background: transparent;
}
.dash-main-nav::-webkit-scrollbar-thumb{
    background:#D90865;
    border-radius:10px;
}

/* .dash-main-nav:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: #1C1C1C;
} */

.dash-main-nav .main-nav-list {
    display: block;
    padding-inline-start: 0;
}

.dash-main-nav .main-nav-list>li {
    display: block;
}

.dash-main-nav .main-nav-list>li>a {
    display: flex;
    align-items: center;
    color: #B3B3B3;
    font-size: 0.875rem;
    font-weight: 500;
    min-width: 42px;
    width: 42px;
    height: 42px;
    /* line-height: 17px;
    padding: 6px 18px; */
    transition: 700ms;
    border-radius: 100px;

    position: relative;
    z-index: 2;
}

.dash-main-nav .main-nav-list>li>a>.icon {
    color: #B3B3B3;
    /* font-size: 24px; */
    /* margin: 0 8px 0 0; */
    flex: 0 0 3em;
    width: 3em;
    height: 3em;
    min-width: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7em;
    border-radius: 50%;
    transition: 700ms;
    /* background: #D90865; */
}


.dash-main-nav .main-nav-list>li>a>.icon img {
    max-width: 2em; filter: brightness(0) invert(1);
}

/* .sub-nav-area.showing-sub-nav-area{
    left: 100%;
} */

.sub-nav-grp:not(:last-child) {
    margin-bottom: 25px;
}
.sub-nav-grp{margin-top: 30px;}
.sub-nav-grp .close-submenu{
    width: 32px; height: 32px; border: 1px solid #ccc;
    border-radius: 100%; font-size: 28px; line-height: 28px;
    position: absolute; right: 15px; top: 15px;
}

.sub-nav-area h3 {
    display: block;
    font-size: 1.45rem;
    line-height: 24px;
    font-weight: 500;
}

.sub-nav-list {
    display: block;
    margin: 1em 0 0 0;
}

.sub-nav-list li {
    display: block;
}

.sub-nav-list li:not(:first-child) {
    margin-top: 10px;
}

.sub-nav-list li a {
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.1;
    padding: 0.8em 1.25em;
    border-radius: 100px;
    color: #fff;
    transition: 500ms;
}

.sub-nav-list li a .icon {
    margin-inline-end: 0.5em;
}


.sub-nav-list li a {
    color: #1C1C1C;
}

.sub-nav-area h3 {
    color: #000;
}


.sub-nav-list li a:hover,
.sub-nav-list li.active a {
    background-color: var(--clr-pink-400);
}


.toggle-sub-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 20px;
    inset-inline-end: -16px;
    z-index: 2;
    width: 32px;
    height: 32px;
    border: 1px solid #D8D8D8;
    background-color: #fff;
    border-radius: 100px;
    color: #1C1C1C;
    font-size: 12px;
    cursor: pointer;
    visibility: hidden;
    display: none;
}

/********************** SIDEBAR COLLAPSE **********************/


.below-submenu-list {
    padding: 1em;
    padding-inline-start: 4.25em;
    list-style: none;
    font-size: 13px;
}

.below-submenu-list li {
    font-size: inherit;
}

.below-submenu-list li a:hover,
.below-submenu-list li.active {
    color: #ff73b1;
}

.below-submenu-list li:not(:last-child) {
    margin-bottom: 1em;
}

.below-submenu>h3 {
    display: none;
}

.dash-nav-container:hover .below-submenu-list,
.dash-nav-container:hover .menu-name {
    display: block;
}


.filter-head_wrap .form-control.form-search,
.filter-head_wrap .form-control.flatpickr-input,
.filter-head_wrap .btn.btn-outline,
.filter-head_wrap .form-select.btn-rounded{
    border-radius: 30px;
}

.calendar-header #changeCalendarView,
.actions-area .dropdown .form-select,
.flatpickr-input,
.form-search{
    border-radius: 30px;
}



.table #team-members-body td .btn-dark{font-size: 14px; padding: 3px 15px; white-space: nowrap;} 

@media(min-width: 992px) {

    .dash-left-container{
        width: 68px;
        min-width: 68px;
    }

    .dash-left-container,
    .dash-nav-container {
        --collapsed-width: 4.7rem;
    }

    .sub-nav-area {
        flex-flow: column;
        position: absolute;
        top: 0;
        bottom: 0;
        inset-inline-start: var(--collapsed-width);
        width: 15rem;
        padding: 1.25rem 1rem;
        z-index: -1;
        background-color: #fff;
        opacity: 0;
        display: none;
        /*transition: 500ms;*/

        display: flex;
        opacity: 1;
        z-index: 1;
        position: fixed;
        top: 80px;
        transition: .5s;
        transform: translateX(-400px);
        box-shadow: 0px 5px 10px rgba(0, 0, 0, .1);
    }

    .sub-nav-area.showing-sub-nav-area{
        transform: translateX(0px);
    }


    .dash-left-container .menu-name {
        display: none;
    }

    .dash-left-container .dash-main-nav {
        width: var(--collapsed-width);
        transition: width 0.5s ease;
        min-width: 42px;
    }

    .has-submenu.active .sub-nav-area {
        display: flex;
        opacity: 1;
        z-index: 1;
    }

    .dash-left-container.show-sub-nav {
        /*width: 19rem;*/
    }

    .dash-main-nav .main-nav-list>li:not(:first-child) {
        margin: 1em 0 0 0;
    }

    /*.dash-left-container .dash-main-nav:hover {
        --collapsed-width: 15rem;
    }

    .dash-left-container .dash-main-nav:hover .sub-nav-area {
        display: flex;
    }


    .dash-left-container .dash-main-nav:hover .menu-name {
        display: inherit
    }

    .dash-left-container.show-sub-nav:hover {
        width: calc(calc(15rem + 19rem) - 4.65rem);
    }*/

    .dash-nav-container {
        width: var(--collapsed-width);
        overflow: hidden;
        white-space: nowrap;
    }

    .dash-nav-container .menu-name {
        padding-inline-end: 1.5em;
        display: none;
    }

    .dash-main-nav .main-nav-list>li>a:hover,
    .dash-main-nav .main-nav-list>li.active>a {
        color: #fff;
        background-color: #D90865;
    }

    .dash-main-nav .main-nav-list>li>a:hover>.icon,
    .dash-main-nav .main-nav-list>li.active>a>.icon {
        color: #fff;
    }

    .dash-main-nav .main-nav-list>li>a:hover>.icon img,
    .dash-main-nav .main-nav-list>li.active>a>.icon img {
        filter: brightness(0) invert(1);
    }


    .dash-nav-container:hover {
        width: 18rem;
    }

    .below-submenu-list {
        padding-inline-start: 3.25em;
        color: #fff;
        display: none;
    }
}


@media(max-height: 750px) and (min-width: 992px) {    

    .dash-left-container,
    .dash-nav-container {
        --collapsed-width: 5.7rem;
    }

    /*.dash-left-container.show-sub-nav {
        width: 20rem;
    }*/
    .dash-left-container{
        width: 4.7rem;
        --collapsed-width: 4.7rem;
    }
}

/********************** SIDEBAR COLLAPSE **********************/


.back-btn {
    display: block;
    color: #FD0071;
    padding: 1em;
    font-weight: 500;
}
.back-btn-text{visibility: hidden; opacity: 0; display: none;}

.toggle-back {
    display: inline-block;
    width: 32px;
    height: 32px;
    border: 1px solid #D8D8D8;
    background-color: #fff;
    border-radius: 100px;
    color: #1C1C1C;
    font-size: 12px;
    line-height: 2.5;
    cursor: pointer;
    text-align: center;
    margin-inline-end: 0.5em;
}


.dash-right-container {
    background-color: #fafafa;
    display: block;
    float: left;
    width: 100%;
    flex: 1;
    padding: 1.5rem;
    overflow: auto;
}

/* DASHBOARD PAGE END */


.dashboard__grid {
    display: grid;
    grid-template-columns: var(--dashboard-grid-col, repeat(2, minmax(0, 1fr)));
    gap: var(--dashboard-grid-gap, 1.5rem);
}


.dashboard__card {
    background-color: #FFFFFF;
    /*border: 1px solid #E2E2E2;
    border-radius: 10px;*/
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}


.is-selected:not(.fancybox__slide),
.dashboard__card-link:hover {
    border-color: var(--clr-pink) !important;
    background-color: var(--clr-lightpink) !important;
    transition: 0.5s ease;
}

.dashboard__card--body>*+*,
.dashboard__card>*+* {
    margin-top: 1.5rem;
}

.dashboard__card--header h6 {
    font-size: 1.45rem;
    font-weight: 500;
    color: #1c1c1c;
    line-height: 1.35;
}

.dashboard__card--header p {
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.35;
    color: #838383;
    margin-bottom: 0;
    margin-top: 0.35em;
}

.dashboard__card--inner {
    background: #FEF7F7;
    border-radius: 10px;
    padding: 1rem;
}

.dashboard__card--inner h6 {
    font-size: 1.5rem;
}

.dashboard__card--body {
    border-radius: inherit;
}

.dashboard__card--body-empty {
    text-align: center;
    max-width: 360px;
    margin: auto;
    border-radius: inherit;
}

.dashboard__card--body-empty h5 {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.1;
    margin-top: 1em;
}

.dashboard__card--body-empty p {
    font-size: 1.125rem;
    line-height: 1.25;
    color: #7c7c7c;
    margin-top: 0.5em;
}


.dashboard__card-inner-padding .dashboard__card--header {
    padding: 1.5rem;
    border-bottom: 1px solid #E4E4E4;
}

.dashboard__card-inner-padding .table.service-tbl-style th,
.dashboard__card-inner-padding .table.service-tbl-style td {
    padding: 1em 1.5em;
}

.dashboard__card-child-padding {
    padding: 0;
}

.dashboard__card-child-padding .dashboard__card--header {
    border-bottom: 1px solid #E4E4E4;
}

.dashboard__card-child-padding>* {
    padding: 1em 1.25em;
}


/* BREADCUMBS */
.dash-right-container .salon-hub__breadcrumbs-2 {
    white-space: nowrap;
    padding-bottom: 0.5em;
    overflow-x: auto;
}

.dash-right-container .dashboard__card--header p{
    font-size: 18px;
}

.salon-hub__breadcrumbs-2 {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    justify-content: start;
    gap: 0.5em;
    color: #5C5C5C;
    list-style: none;
}

.salon-hub__breadcrumbs-2>*:last-child {
    color: #1C1C1C;
}

.salon-hub__breadcrumbs-2>*+*::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #D9D9D9;
    border-radius: 50%;
    margin-inline-end: 0.5em;
}

.salon-hub__breadcrumbs-2 a:hover {
    color: var(--clr-pink) !important;
}



/* APPOINTMENT */
.appo__card {
    padding: 1.25rem;
    border-radius: 0.25rem;
    overflow: hidden;
}

.appo__card>*+* {
    margin-top: 0.35em;
}

.appo__card h6 {
    font-weight: 500;
    font-size: 1.3125rem;
    line-height: 120%;
    color: #1C1C1C;
}

.appo__card h5 {
    font-weight: 500;
    font-size: 1.1875rem;
    line-height: 1.25;
    color: #1C1C1C;
}

.appo__card p {
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.25;
    color: #1C1C1C;
}

.appo__card p strong {
    font-weight: 500;
    color: #5E5E5E;
}

.appo__card p b {
    font-weight: 500;
    color: #1C1C1C;
}


.appo__card time {
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.25;
    color: #5E5E5E;
}

.appo__card time .divi {
    font-size: 0.625rem;
    color: #c9c9c9;
    vertical-align: middle;
    margin: 0 0.5em;
}

/* NOTIFICATION */
.sidebar-panel {
    width: 100%;
    max-width: var(--sidebar-width, 43.75rem);
    position: fixed;
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    z-index: 11;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 1rem;
    transform: translateX(100%);
    transition: 500ms ease;
}

.sidebar-panel.is-showing {
    transform: translateX(0);
}

.client-details-panel {
    --sidebar-width: 55rem;
}


.sidebar-panel .tab-content {
    background: #F9F9F9;
}

.btn--sidebarPanelClose {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid #B5B5B5;
    box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.14);
    margin-top: 2em;
}

.btn--sidebarPanelClose:hover {
    background-color: #1c1c1c;
}

.btn--sidebarPanelClose:hover img {
    filter: brightness(0) invert(1);
}


/* 
.sidebar-panel-grid {
    display: grid;
    grid-template-columns: 0.5fr 1fr;
    height: 100%;
    box-shadow: 0px 0px 30px 0px #00000012;
    background-color: #fff;
}

.sidebar-panel-grid .nav,
.sidebar-panel-grid .tab-pane {
    padding: 1.5rem;
}

.sidebar-panel-grid .nav button {
    width: 100%;
    text-align: left;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.1;
    padding: 0.65em 1.15em;
    border-radius: 100em;
    margin-bottom: 0.5em;
    display: flex;
    justify-content: space-between;
    gap: 1em;
}


.sidebar-panel-grid .nav button:hover,
.sidebar-panel-grid .nav button.active {
    background: var(--clr-pink-400);
} */

.btn-offcanvas-side-actions {
    --side-btn-size: 2rem;
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-end: 15px;
    display: grid;
    gap: 0.85rem;
}


.btn-offcanvas-side-actions>button {
    width: var(--side-btn-size);
    height: var(--side-btn-size);
    border-radius: 50%;
    box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.14);
    background: #FFFFFF;
}

.btn-offcanvas-side-actions>button img {
    width: 0.75em;
    display: block;
    margin: auto;
}

.btn-offcanvas-side-actions>button:hover {
    background-color: #1c1c1c;
}

.btn-offcanvas-side-actions>button:hover img {
    filter: brightness(0) invert(1);
}

.btn-offcanvas-side-actions .btn-offcanvasBack {
    display: none;
}

@media(min-width: 992px) {
    .btn-offcanvas-side-actions {
        --side-btn-size: 3rem;
        inset-inline-end: auto;
        inset-inline-start: 0;
        margin-inline-start: calc(-1 * calc(var(--side-btn-size) * 1.5));
    }

    .offcanvas-grid {
        display: grid;
        grid-template-columns: var(--offcanvas-grid-col);
    }

    .offcanvas-grid-col--md-sm-lg {
        grid-template-columns: 0.65fr 0.55fr 1fr;
    }
}

.offcanvas-grid {
    box-shadow: 0px 0px 30px 0px #00000012;
    background-color: #fff;
}


.offcanvas-grid #v-clientDetails-tab button {
    width: 100%;
    text-align: start;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.1;
    padding: 0.65em 1.15em;
    border-radius: 100em;
    margin-bottom: 0.5em;
    display: flex;
    justify-content: space-between;
    gap: 1em;
}


.offcanvas-grid #v-clientDetails-tab button:hover,
.offcanvas-grid #v-clientDetails-tab button.active {
    background: var(--clr-pink-400);
}

.newappo-notify-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: start;
    padding: 1rem;
    background: #fff;
    border: 1px solid #E2E2E2;
    border-radius: 5px;
}

.newappo-notify-card:hover {
    background: #F5F5F5;
}

.newappo-notify-card h5 {
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.2;
    color: #1C1C1C;
}

.newappo-notify-card time {
    display: block;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.5;
    color: #8E8E8E;
    margin-top: 0.2em;
}

.newappo-notify-card .msg {
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #4A4A4A;
    margin-top: 0.5em;
}

.name-initial {

    font-size: 1.125rem;
    flex: 0 0 2.55em;
    width: 2.55em;
    height: 2.55em;
    border-radius: 50%;
    font-weight: 500;
    line-height: 1.5;
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding: 0.5em; */
    /* display: grid;
    place-content: center; */
    /* background: #D9D3F4;
    color: #4F3E9A; */

    background: #F4D3E2;
    color: #D90865;
    overflow: hidden;
}

.name-initial.blue-style {
    background: #D9D3F4;
    color: #4F3E9A;
}


.name-initial img:not([src$=".svg"]) {
    min-width: 1em;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.name-initial img[src$=".svg"] {
    max-width: 1.5em;
}

.name--card h6 {
    font-weight: 500;
}

.name--card a {
    font-size: 14px;
}



.date-filter-nav {
    display: -ms-inline-grid;
    display: inline-grid;
    grid-auto-flow: column;
    gap: 1em;
    align-items: center;
    justify-items: center;
    font-weight: 500;
    font-size: 1rem;
    color: #1C1C1C;
    background: #FFFFFF;
    border: 1px solid #C9C9C9;
    border-radius: 100em;
}

.date-filter-nav button {
    padding: 1em 1.25em;
    background: #fbfbfb;

}

.date-filter-nav button:nth-of-type(1) {
    border-start-start-radius: 100em;
    border-end-start-radius: 100em;
    border-inline-end: 1px solid #f0f0f0;
}

.date-filter-nav button:nth-of-type(2) {
    border-start-end-radius: 100em;
    border-end-end-radius: 100em;
    border-inline-start: 1px solid #f0f0f0;
}

.date-filter-nav button img {
    display: block;
}

/******** CATALOG ********/
.catelog--grid {
    display: grid;
    grid-template-columns: 18.75rem 1fr;
    gap: 1.5rem;
    align-items: start;
}

.catelog--grid-menu .sub-nav-list a {
    gap: 1em;
    justify-content: space-between;
}

.count--tag {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.6;
    background: #eee;
    vertical-align: text-bottom;
    margin-left: 0.5em;
}


.catelog--grp:not(:last-child) {
    margin-bottom: 3rem;
}

.catelog--grp h6 {
    font-size: 1.45rem;
    font-weight: 500;
}

.catelog--row {
    background: #FFFFFF;
    border: 1px solid #C7C7C7;
    border-radius: 10px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: start;
    gap: 2rem;
    padding: 1.25rem;
    margin-top: 1.25rem;
}

.catelog--row h5,
.catelog--row p {
    font-size: 1.125rem;
    color: #1C1C1C;
    font-weight: 500;
}

.catelog--row time {
    color: #7A7A7A;
}

.catelog--row>.dropdown [data-bs-toggle="dropdown"] {
    min-width: 2rem;
    padding-bottom: 1em;
}

#modal--addNewServices.modal {
    background-color: #fff;
}

/* #modal--addNewServices.modal.show ~ .modal-backdrop{
    --bs-backdrop-bg: #ffffff;
    --bs-backdrop-opacity: 1;
} */

.error {
    color: red;
}

fieldset+fieldset {
    padding-top: 2rem;
    margin-top: 2rem;
    border-top: 1px solid #DCDCDC;
}

.legend-title,
legend {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: #1C1C1C;
    margin-bottom: 0.85em;
    background: #fff;
    padding-right: 10px;
}

.flow-rootx2 .legend-title{
    font-size: 1.45;
    font-weight: 500;
}

.list-style-checked {
    padding-inline-start: 0;
    list-style: none;
}

.list-style-checked li {
    font-weight: 500;
    line-height: 1.25;
    margin-bottom: 1em;
    position: relative;
    padding-inline-start: 2rem;
}

.list-style-checked li::before {
    content: '';
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxNiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE1LjQ5OTMgMS4zMzMyTDUuNDk5MzUgMTEuMzMzMkwwLjkxNjAxNiA2Ljc0OTg3TDIuMDkxMDIgNS41NzQ4N0w1LjQ5OTM1IDguOTc0ODdMMTQuMzI0MyAwLjE1ODIwM0wxNS40OTkzIDEuMzMzMloiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1em;
    position: absolute;
    top: 0;
    inset-inline-start: 0;
}

.list-style-checked li.crossed::before {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KDTwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIEdlbmVyYXRvcjogU1ZHIFJlcG8gTWl4ZXIgVG9vbHMgLS0+DQo8c3ZnIHdpZHRoPSI4MDBweCIgaGVpZ2h0PSI4MDBweCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KPGcgaWQ9Ik1lbnUgLyBDbG9zZV9MRyI+DQo8cGF0aCBpZD0iVmVjdG9yIiBkPSJNMjEgMjFMMTIgMTJNMTIgMTJMMyAzTTEyIDEyTDIxLjAwMDEgM00xMiAxMkwzIDIxLjAwMDEiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4NCjwvZz4NCjwvc3ZnPg==");
}

.flex-li>li {
    display: flex;
    gap: 0.5em;
    flex-wrap: wrap;
    justify-content: space-between;
}

.rounded_avatar_block {
    text-align: center;
    font-size: 1.875rem;
    font-weight: 500;
}

.rounded_avatar_block figure img {
    display: inline-block;
    flex: 0 0 8rem;
    width: 8rem;
    height: 8rem;
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid currentColor;
    object-fit: cover;
}

.rounded_avatar_info>*:not(:last-child) {
    margin-bottom: 1em;
}

.rounded_avatar_info ul {
    padding-inline-start: 0;
    list-style: none;
}

.rounded_avatar_info ul li {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.85em;
    font-weight: 500;
    color: #515151;
}

.rounded_avatar_info ul li:not(:last-child) {
    margin-bottom: 0.5em;
}


.photo-upload {
    margin-bottom: 2rem;
}

.photo-upload-area {
    display: inline-block;
    position: relative;
    margin-bottom: 1rem;
}

.photo-upload-area figure {
    display: inline-block;
    width: 7rem;
    height: 7rem;
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid currentColor;
}

.photo-upload-area figure>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-upload-area label {
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid currentColor;
    background-color: #262626;
    line-height: 2.2;
    cursor: pointer;
    text-align: center;
    position: absolute;
    inset-block-end: 5px;
    inset-inline-end: 5px;
    place-content: center;
}

.photo-upload-area label img {
    width: 1.5rem;
    filter: brightness(0) invert(1);
    display: block;
    margin: auto;
}

.photo-upload-area label input[type="file"] {
    position: absolute;
    width: 0;
    height: 0;
    visibility: hidden;
}


.photo-upload-area-btn label {
    color: #262626;
    position: relative;
    padding: 0.5em 1em;
    border-radius: 0.5em;
    font-weight: 600;
    border: 2px solid #737373;
    cursor: pointer;
}

.photo-upload-area-btn label span {
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    line-height: 2.2;
    cursor: pointer;
    background: #dbdbdb;
    border-radius: 50%;
    text-align: center;
    margin-inline-end: 0.5em;
}

.photo-upload-area-btn label span img {
    width: 1.5rem;
}


.photo-upload-area-btn label input[type="file"] {
    position: absolute;
    width: 0;
    height: 0;
    visibility: hidden;
}


.admin-dashboard__card {
    background: var(--cardBgClr, #fff);
    border: 1px solid var(--cardBrdrClr, #E2E2E2);
    border-radius: 10px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.admin-dashboard__card h6 {
    font-weight: 700;
    font-size: 2.25rem;
    color: #1C1C1C;
}

.admin-dashboard__card--header {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--cardClr, #505050)
}

.admin-dashboard__card--header span {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    text-align: center;
    line-height: 2.5;
    font-size: 1.25rem;

    background-color: #fff;
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.04);
}

.rounded-arrow-link {
    display: inline-block;
    font-size: 14px;
    padding-block: 0.5em;
    /* top & bottom */
    padding-inline: 1em 2.65em;
    /* start (left) | end (right) */
    font-weight: 400;
    line-height: 1;
    color: #1C1C1C;
    background: #fff;
    border-radius: 100em;
    background-repeat: no-repeat;
    background-size: 1.15em;
    background-position: center var(--inline-end) 1em;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMS4zMTc2IDQuOTMyMkMxMS40MzQ0IDQuODE5NTIgMTEuNSA0LjY2NjcxIDExLjUgNC41MDczOEMxMS41IDQuMzQ4MDUgMTEuNDM0NCA0LjE5NTI1IDExLjMxNzYgNC4wODI1N0w3Ljc5MzM0IDAuNjgzNDM5QzcuNzM1ODcgMC42MjYwNSA3LjY2NzEzIDAuNTgwMjc0IDcuNTkxMTIgMC41NDg3ODNDNy41MTUxMiAwLjUxNzI5MiA3LjQzMzM3IDAuNTAwNzE2IDcuMzUwNjUgMC41MDAwMjNDNy4yNjc5MyAwLjQ5OTMyOSA3LjE4NTg5IDAuNTE0NTMyIDcuMTA5MzMgMC41NDQ3NDVDNy4wMzI3NyAwLjU3NDk1NyA2Ljk2MzIxIDAuNjE5NTc0IDYuOTA0NzEgMC42NzU5OTFDNi44NDYyMiAwLjczMjQwOSA2Ljc5OTk2IDAuNzk5NDk3IDYuNzY4NjQgMC44NzMzNDJDNi43MzczMSAwLjk0NzE4NyA2LjcyMTU1IDEuMDI2MzEgNi43MjIyNyAxLjEwNjA5QzYuNzIyOTkgMS4xODU4OCA2Ljc0MDE3IDEuMjY0NzIgNi43NzI4MiAxLjMzODAzQzYuODA1NDcgMS40MTEzNCA2Ljg1MjkzIDEuNDc3NjQgNi45MTI0NCAxLjUzMzA3TDkuMzczMjUgMy45MDY1MUwxLjEyMyAzLjkwNjUxQzAuOTU3OCAzLjkwNjUxIDAuNzk5MyAzLjk2OTgyIDAuNjgyNSA0LjA4MjVDMC41NjU2IDQuMTk1MTkgMC41IDQuMzQ4MDIgMC41IDQuNTA3MzhDMC41IDQuNjY2NzQgMC41NjU2IDQuODE5NTggMC42ODI1IDQuOTMyMjZDMC43OTkzIDUuMDQ0OTUgMC45NTc4IDUuMTA4MjUgMS4xMjMgNS4xMDgyNUw5LjM3MzI1IDUuMTA4MjVMNi45MTI0NCA3LjQ4MTdDNi43OTg5NSA3LjU5NTAyIDYuNzM2MTYgNy43NDY4IDYuNzM3NTggNy45MDQzNUM2LjczOSA4LjA2MTkgNi44MDQ1MiA4LjIxMjYgNi45MjAwMiA4LjMyNDAxQzcuMDM1NTMgOC40MzU0MiA3LjE5MTc5IDguNDk4NjEgNy4zNTUxMyA4LjQ5OTk4QzcuNTE4NDggOC41MDEzNSA3LjY3NTg1IDguNDQwNzggNy43OTMzNCA4LjMzMTMzTDExLjMxNzYgNC45MzIyWiIgZmlsbD0iIzI1QzA3RCIvPgo8L3N2Zz4K);
}


.card--sky {
    --cardBgClr: rgba(219, 244, 255, 0.5);
    --cardBrdrClr: #D3E5EC;
    --cardClr: #467183;
}


.card--orange {
    --cardBgClr: #FFF5E8;
    --cardBrdrClr: #F3E4D0;
    --cardClr: #996724;
}


.card--blue {
    --cardBgClr: #F0EEFF;
    --cardBrdrClr: #DBD8F2;
    --cardClr: #5346b6;
}

.card--pink {
    --cardBgClr: #FFEEF6;
    --cardBrdrClr: #EDCEDC;
    --cardClr: #a64975;
}


.min-h-300 {
    min-height: 300px;
}

.images-preview-div {
    border: 1px solid #d8d8d8;
    border-radius: 3px;
    overflow: hidden;
}

.images-preview-div img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    transition: opacity 0.5s;
}

.position-top-right {
    position: absolute;
    top: 0.5em;
    inset-inline-end: 0.5em;
}

.btn--remove {
    background-image: url("data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KDTwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIFRyYW5zZm9ybWVkIGJ5OiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiNmZmZmZmYiPgoNPGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiLz4KDTxnIGlkPSJTVkdSZXBvX3RyYWNlckNhcnJpZXIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgoNPGcgaWQ9IlNWR1JlcG9faWNvbkNhcnJpZXIiPiA8cGF0aCBkPSJNMTAgMTJWMTciIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4gPHBhdGggZD0iTTE0IDEyVjE3IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+IDxwYXRoIGQ9Ik00IDdIMjAiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4gPHBhdGggZD0iTTYgMTBWMThDNiAxOS42NTY5IDcuMzQzMTUgMjEgOSAyMUgxNUMxNi42NTY5IDIxIDE4IDE5LjY1NjkgMTggMThWMTAiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4gPHBhdGggZD0iTTkgNUM5IDMuODk1NDMgOS44OTU0MyAzIDExIDNIMTNDMTQuMTA0NiAzIDE1IDMuODk1NDMgMTUgNVY3SDlWNVoiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4gPC9nPgoNPC9zdmc+");
    background-repeat: no-repeat;
    width: 1.5em;
    height: 1.5em;
    background-size: 1em;
    background-color: #d60000;
    border-radius: 100%;
    background-position: center;
}

.images-preview-div:has(.btn--remove):hover img {
    opacity: 0.5;
}


#infowindow-content .title {
    font-weight: bold;
}

#infowindow-content {
    display: none;
}

#map #infowindow-content {
    display: inline;
}

.pac-card {
    background-color: #fff;
    border: 0;
    border-radius: 2px;
    box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
    margin: 10px;
    padding: 0 0.5em;
    font: 400 18px Roboto, Arial, sans-serif;
    overflow: hidden;
    font-family: Roboto;
    padding: 0;
}

#pac-container {
    padding-bottom: 12px;
    margin-inline-end: 12px;
}

.pac-controls {
    display: inline-block;
    padding: 5px 11px;
}

.pac-controls label {
    font-family: Roboto;
    font-size: 13px;
    font-weight: 300;
}

#pac-input {
    background-color: #fff;
    font-family: Roboto;
    font-size: 15px;
    font-weight: 300;
    margin-inline-start: 12px;
    padding-block: 0;
    /* top & bottom */
    padding-inline: 13px 11px;
    /* start (left) | end (right) */
    text-overflow: ellipsis;
    width: 400px;
}

#pac-input:focus {
    border-color: #4d90fe;
}

/* #title {
    color: #fff;
    background-color: #4d90fe;
    font-size: 25px;
    font-weight: 500;
    padding: 6px 12px;
} */


.report-link {
    background-image: url(./../img/icons/ico-barchart.svg);
    background-position: var(--inline-start) 1.25rem center;
    background-repeat: no-repeat;
    background-size: 2.5rem;
    padding-inline-start: 5rem;
}

.pagination {
    font-weight: 500;
    font-size: 0.85rem;
    background: #FFFFFF;
    border: 1px solid #C9C9C9;
    border-radius: 100em;
    color: #6B6B6B;
    display: grid;
    grid-auto-flow: column;
    overflow: hidden;
}

.pagination>* {
    padding: 0.5em 1em;
}

.pagination>*:not(:last-child) {
    border-inline-end: 1px solid #e9e9e9;
}

.pagination>*:hover {
    background: #000;
    color: #fff;
}

.salon__favourites_card {
    border: 1px solid #E4E4E4;
    border-radius: 0.5rem;
}

.salon__favourites_card .service_info {
    padding: 1.5rem;
}

.salon__favourites_card .badge-fav {
    width: 2rem;
    height: 2rem;
    position: absolute;
    top: 1rem;
    inset-inline-end: 1rem;
    display: grid;
    place-content: center;
}


.salon-earnings {
    border: 1px solid var(--clr-pink);
    background-color: var(--clr-lightpink);
    padding: 1.5rem;
    border-radius: 0.5rem;
    overflow: hidden;
}

.salon-earnings h6 {
    font-size: 1.5rem;
    line-height: 1.35;
}

.salon-earnings h5 {
    font-size: 2rem;
}

/* STRIPE ACCOUNT */
.stripe-create-account {
    max-width: 55rem;
    margin: auto;
}

.stripe-account-connected {
    max-width: 40rem;
    margin: auto;
}


/* PROMPT */
.prompt-msg {
    background: rgba(232, 232, 232, 0.5);
    padding: 1em;
    border-radius: 0.5em;
    max-width: 65%;
}

.prompt-result-icon {
    flex: 0 0 2em;
    width: 2em;
    height: 2em;
    border: 1px solid rgb(209 209 209);
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.prompt-result-icon svg {
    max-width: 100%;
    height: auto;
}

/* EMAIL TEMP */
.email-template-container {
    border-start-start-radius: 1.25rem;
    /* top-left in LTR */
    border-start-end-radius: 1.25rem;
    /* top-right in LTR */
    border-end-end-radius: 0px;
    /* bottom-right in LTR */
    border-end-start-radius: 0px;
    /* bottom-left in LTR */
    overflow: hidden;
    max-width: 50rem;
    margin-inline-start: auto;
    margin-inline-end: auto;
}

.email-template-header {
    background: #1C1C1C;
    padding: 1.25rem 2rem;
}


.email-template-header>span {
    width: 13px;
    height: 13px;
    margin-inline-end: 0.25em;
}

.email-template-body {
    padding: 2rem;
    border-radius: 0 0 1.25rem 1.25rem;
}

.email-template-body table strong {
    font-weight: 600 !important;
}


.progress-indicator span {
    flex: 1;
    background: #D9D9D9;
    height: 5px;
    border-radius: 100em;
}

#selected-emoji {
    font-size: 1.5rem;
    width: 2.15em;
    height: 2em;
    padding: 0.2em;
}

#selected-emoji:empty {
    background-image: url(./../img/icons/ico-smile.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1em;
}

.emoji-container {
    line-height: 1;
    height: 1.5em;
}

.rounded-icon {
    width: 4.25rem;
    height: 4.25rem;
    background: var(--clr-pink-400);
}




/* checkout sidebar */
@media(min-width: 992px) {
    .checkout-sidebar-start {
        flex: 1;
    }

    .checkout-sidebar-end {
        width: 31.25rem;
        flex: 0 0 31.25rem;
        border-inline-start: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    }
}


.offcanvas-body .nav-tab>*+*::before {
    content: '>';
    display: inline-block;
    margin: 0 0.5em;
}

.offcanvas-body .nav-tab .active {
    color: var(--clr-logo);
    font-weight: 500;
}


.w-150px {
    max-width: 150px;
}

.amount-type-tab-nav {
    background-color: #f2f2f2;
}

.amount-type-tab-nav button {
    border: 1px solid transparent;
}

.amount-type-tab-nav button.active {
    background: #fff;
    border: 1px solid #d9dfe6;
}

.numpad .btn {
    padding: 0.5em;
}

.numpad .btn:hover {
    --bs-btn-bg: #1c1c1c;
    --bs-btn-border-color: #1c1c1c;
    --bs-btn-color: #fff;
}

.numpad .btn svg {
    width: 1em;
    height: auto;
}

.rdio-chk-icon {
    transform: scale(0);
    transform-origin: center;
    transition: 0.1s ease;
}


.rdio-chk-icon img {
    width: 1.25rem;
}

.rdio-chk-label [type="radio"]:checked~.rdio-chk-icon {
    transform: scale(1);
}


.blockquote-card-style {
    background: #fff;
    border-inline-start: 2px solid #C8C8C8;
    transition: 0.2s ease;
}

.blockquote-card-style:hover {
    background: #f7f7f7;
    border-inline-start: 4px solid var(--clr-gry59);
}


.decoration-style {
    position: relative;
    margin-inline-start: 30px;
}


.decoration-style::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #c2c2c2;
    position: absolute;
    inset-inline-start: -22px;
    top: 0;
}

.decoration-style::after {
    content: '';
    width: 1px;
    background: #c2c2c2;
    position: absolute;
    inset-inline-start: -17px;
    top: 25px;
    bottom: 0;
}

.style--rdio-label-checked-border label img {
    width: 4rem;
}

.style--rdio-label-checked-border label:has([type="radio"]:checked) {
    --bs-btn-border-color: var(--clr-logo);
}


.service-grp .item>div:hover,
.service-grp:not(.owl-carousel)>div:hover {
    background: #fff4f9 !important;
}


.li-heading,
.general-tab-style li button,
.general-tab-style li a {
    width: 100%;
    display: flex;
    gap: 1em;
    justify-content: space-between;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.1;
    padding: 0.8em 1.25em;
    border-radius: 100px;
    text-align: start;
    transition: 500ms;
}

.general-tab-style li button.active,
.general-tab-style li a.active {
    background-color: var(--clr-pink-400);
}

#offcanvasPaymentSuccessfull .payment-sucessfull {
    background-position: top;
}

#offcanvasClientDetails .hide-offcanvasClientDetails,
#offcanvasClientDetails [data-bs-target="#offcanvasClientDetails"],
#offcanvasClientDetails [data-attr="remove-client"],
#offcanvasNewAppo [data-bs-target="#offcanvasNewAppo"],
#offcanvasNewAppo [data-bs-target="#offcanvasCheckout"],
#offcanvasNewAppo .hide-offcanvasNewAppo {
    display: none;
}

#offcanvasNewAppo .client-details-appo {
    display: none;
}

#modal--addTip {
    --bs-modal-width: 25rem;
}

#offcanvasServiceS2 .section--header.has-event {
    background: #1a1a1a;
    color: #fff;
}

#offcanvasServiceS2 .section--header.has-event .time-dropdown .dropdown-label,
#offcanvasServiceS2 .section--header.has-event .salon-hub__breadcrumbs-2>*:last-child {
    color: #fff;
}

#offcanvasServiceS2 .section--header.has-event .flatpickr-input,
#offcanvasServiceS2 .section--header.has-event [data-bs-toggle="dropdown"] img {
    filter: brightness(0) invert(1);
}

#offcanvasServiceS2 .section--header.has-event .status-dropdown {
    display: block !important;
}

.offcanvas.show~.ts-tour-div {
    display: none;
}

.service-grp .ico-container img {
    width: 2.5rem;
    height: auto;
}

ul.dropdown-menu {
    max-height: 25rem;
    overflow: auto;
}

@media(min-width: 768px) {
    .day-div-row {
        display: grid;
        gap: 1rem;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
    }

    .day-div {
        --border-style: 1px solid #E2E2E2;
        border: var(--border-style);
        border-radius: 0.5rem;
        overflow: clip;
        text-align: center;
        display: flex;
        flex-direction: column;
    }

    .day-div.day-closed {
        color: var(--clr-grey2);
        --label-bg: var(--clr-F1F1F1);
        --label-clr: var(--clr-373737);
    }

    .day-div--label {
        padding: 0.5em;
        background: var(--label-bg, var(--clr-lightpink));
        color: var(--label-clr, var(--clr-pink));
        font-weight: 600;
    }

    .day-div--timing {
        flex: 1;
        place-content: center;
        white-space: nowrap;
    }

    .day-div--timing > * {
        padding: 0.5em 0.25em;
        font-size: 0.825rem;
    }

    .day-div--timing p {
        margin-bottom: 0;
    }

    .day-div--timing>*+* {
        border-top: var(--border-style);
    }
}


@media(max-width: 767px) {
    .day-div-row>*+* {
        margin-top: 1rem;
    }

    .day-div {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        align-items: start;
    }

    .day-div--label {
        font-weight: 600;
    }

    .day-closed {
        color: var(--clr-grey2);
    }
}


.border-color-changed .form-check-lg {
    --bs-border-color: #e5e5e5;
}



.cut-mark {
    position: relative;
}

.cut-mark::before {
    content: '';
    position: absolute;
    top: -20px;
    bottom: -20px;
    left: 0;
    right: 0;
    width: 3px;
    background: #b3b3b3;
    box-shadow: 0 0 0 4px #fff;
    transform: rotate(45deg);
    margin-left: auto;
    margin-right: auto;
    border-radius: 1000px;
}


#addSeviceBeforeSave p {
    display: none;
}

#offcanvasServiceRight:has(#main-service-added-beforesave:empty) .section-bottom {
    pointer-events: none;
}

#offcanvasServiceRight:has(#main-service-added-beforesave:empty) .section-bottom>* {
    opacity: 0.4;
}

#offcanvasServiceRight:has(#main-service-added-beforesave:empty) #addSeviceBeforeSave {
    width: 100%;
    background-color: #fff;
    border-radius: var(--bs-border-radius-lg);
    padding-block-start: 3rem;
    padding-block-end: 3rem;
    padding-inline-end: 1rem;
    padding-inline-start: 1rem;
    border-radius: var(--bs-border-radius-lg);
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}

#offcanvasServiceRight:has(#main-service-added-beforesave:empty) #addSeviceBeforeSave p {
    display: block;
}

.section--header.has-event~.section--body .clientDiv {
    display: none !important;
}

.time-header {
    padding-inline-end: 2.8em;
}

#modal--addShift:not(:has(.time-row)) .time-header,
#modal--editShift:not(:has(.time-row)) .time-header {
    display: none !important;
}



@media(min-width: 991px) {
    #team-members .allshifts .btn {
        --bs-btn-font-size: 0.85rem;
    }
}


/* Deals Page */
.deals-page-wrap {
    max-width: 1100px;
    margin: auto;
    height: 100%;
    width: 100%;

    display: flex;
    flex-direction: row;
    gap: 50px;
    align-items: center;
    justify-content: center;
}

.deals-page-wrap .group-btn {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
}

.promotion-details {
    width: 100%;
    display: flex;
    gap: 20px;
    flex-direction: column;
    align-items: baseline;
}

.promotion-details h2 {
    font-size: 36px;
    line-height: 1.2;
    font-weight: 600;
}

.promotion-details p {
    font-size: 18px;
    line-height: 1.2;
    font-weight: 500;
}

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

.promotion-details ul li {
    padding: 5px 0 5px 24px;
    margin: 0;
    height: auto;
    width: auto;
    font-size: 16px;
    background-size: 16px;
    background-position: left top 10px;
    line-height: 1.4;
}

.promotion-details .tag-text {
    color: #1f8900;
    background: #edfbe9;
    border: 1px solid #d2f6c9;
    display: inline-block;
    border-radius: 100px;
    font-weight: 500;
    font-size: 12px;
    padding: 2px 8px;
    margin-bottom: -10px;
}

.promotion-img {
    width: 100%;
    position: relative;
    overflow-x: hidden;
}

.promotion-img .promotion-img-first {
    position: relative;
    left: 0;
    top: 0;
    z-index: 0;
    transition: .5s;
}

.promotion-img .promotion-img-second {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    transition: .5s;
    transform: translateX(-20px);
}

.promotion-img .promotion-img-third {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    transition: .5s;
    transform: translateX(20px);
}



@media(max-width: 1024px) {
    .dealsPage {
        overflow: inherit;
    }

    .deals-page-wrap {
        flex-direction: column;
        gap: 20px;
    }

    .promotion-details h2 {
        font-size: 30px;
    }
}

/* start: smartPricing-form-page */
.smartPricing-form-page .dash-right-container {
    padding-bottom: 1.5rem !important;
}

.flex-auto {
    flex: 1 !important;
}

.common-setp-progess-with-actions {
    padding: 12px 0 16px;
    display: flex;
    flex-direction: column;
    row-gap: 16px;
}

.common-setp-progess-with-actions .setp-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 12px;
}

.common-setp-progess-with-actions .setp-actions .action-row {
    display: flex;
    align-items: center;
    column-gap: 12px;
}

.common-setp-progess-with-actions .setp-actions .action-row.right {
    margin-left: auto;
}

.common-setp-progess-with-actions .setp-actions .action-row .back-btn {
    width: 48px;
    height: 48px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.common-setp-progess-with-actions .setp-actions .action-row .back-btn svg {
    width: 24px;
    height: auto;
}

.common-setp-progess-lists {
    display: flex;
    column-gap: 8px;
    align-items: center;
}

.common-setp-progess-lists .common-setp-progess-bar {
    flex: 1 1 auto;
    height: 4px;
    background-color: #f2f2f2;
    border-radius: 60px;
    position: relative;
}

.common-setp-progess-lists .common-setp-progess-bar .common-setp-progess-value {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 60px;
    background-color: #D90865;
}

.common-setp-progess-lists .common-setp-progess-bar .common-setp-progess-value.active {
    width: 100%;
}

.smartPricing-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 32px;
}

.smartPricing-form.size-sm {
    max-width: 600px;
}


.smartPricing-form.size-xl {
    max-width: 960px;
}

.smartPricing-form .form-header {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
}

.smartPricing-form .form-header h5 {
    color: rgb(118, 118, 118);
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
}

.smartPricing-form .form-header h2 {
    font-weight: 700;
    line-height: 44px;
    font-size: 40px;
    color: rgb(20, 20, 20);
}

.smartPricing-form .form-header h4 {
    color: rgb(118, 118, 118);
    font-size: 17px;
    line-height: 24px;
    font-weight: 400;
}

.input-with-text-btn {
    position: relative;
}

.input-with-text-btn:has(.text-btn.right) .form-control {
    padding-right: 42px !important;
}

.input-with-text-btn:has(.text-btn.left) .form-control {
    padding-left: 42px !important;
}

.input-with-text-btn .text-btn {
    color: rgb(118, 118, 118);
    font-weight: 400;
    font-size: 14px;
    background-color: transparent;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.input-with-text-btn button.text-btn,
.input-with-text-btn a.text-btn {
    color: #D90865;
}

.input-with-text-btn .text-btn.right {
    right: 13.6px;
}

.input-with-text-btn .text-btn.left {
    left: 13.6px;
}

.info-alert-box-s1 {
    display: flex;
    align-items: flex-start;
    column-gap: 8px;
    padding: 16px 20px 16px 12px;
    border-radius: 8px;
    background-color: #f0f0ff;
    box-shadow: inset 0 0 0 1px #dbddff;
}

.info-alert-box-s1 .info-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    color: #D90865;
}

.info-alert-box-s1 .info-icon svg {
    height: auto;
    width: 24px;
}

.info-alert-box-s1 .info-text {}

.info-alert-box-s1 .info-text p {
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    color: rgb(20, 20, 20);
}

/* end: smartPricing-form-page */

/* start: modal--Select-services */
.modal--Select-services {}

.modal--Select-services .modal-dialog {
    width: 100%;
    max-width: 720px;
}

.modal--Select-services .modal-content {
    border-radius: 16px;
}

.modal--Select-services .modal-header {
    padding: 32px 48px 16px;
    border: 0;
}

.modal--Select-services .modal-header .modal-title {
    color: rgb(20, 20, 20);
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    margin: 0;
}

.modal--Select-services .modal-header .btn-close {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0 0 0 auto;
    cursor: pointer;
}

.modal--Select-services .modal-body {
    padding: 16px 48px;
}

.modal--Select-services .modal-body h2 {
    font-size: 28px;
    font-weight: 600;
    line-height: 36px;
    color: rgb(20, 20, 20);
    margin: 0;
    padding: 0 0 16px;
}

.modal--Select-services .modal-body .serach-filter {
    margin: 0 -48px;
    padding: 16px 48px;
    position: sticky;
    top: 0;
    z-index: 5;
    left: 0;
    background-color: #fff;
}

.modal--Select-services .modal-body .serach-filter .form-control {
    background-image: url(../img/search-icon.svg);
    background-repeat: no-repeat;
    background-position: center left 10px;
    background-size: 16px;
    padding-left: 36px !important;
}

.modal--Select-services .modal-footer {
    justify-content: space-between;
    padding: 16px 48px;
    column-gap: 10px;
}

.modal--Select-services .modal-footer * {
    margin: 0 !important;
}

.modal--Select-services .modal-footer .btn {
    margin-left: auto !important;
}

.select-service-lists {
    display: flex;
    flex-direction: column;
}

.select-service-lists .select-service-box .form-check .form-check-input {
    margin-right: 0 !important;
}

.select-service-lists .select-service-box {
    display: flex;
    position: relative;
    align-items: center;
    min-height: 65px;
    transition: 0.3s;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    cursor: pointer;
    z-index: 1;
    border-radius: 8px;
}

.select-service-lists .select-service-box:hover {
    background-color: #1414140a;
}

.select-service-lists .select-service-box .form-check {
    display: flex;
    align-items: center;
    column-gap: 12px;
}

.select-service-lists .select-service-box .form-check .form-check-label {
    color: rgb(20, 20, 20);
    font-size: 17px;
    line-height: 24px;
    font-weight: 600;
}

.select-service-lists .select-service-box .form-check .counter {
    background-color: rgb(255, 255, 255);
    box-shadow: rgb(229, 229, 229) 0px 0px 0px 1px, rgb(255, 255, 255) 0px 0px 0px 2px;
    color: rgb(118, 118, 118);
    font-size: 13px;
    font-weight: 400;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.select-service-lists .select-service-item:not(:first-child) {
    border-top: 1px solid #e5e5e5;
}

.select-service-lists .select-service-item .select-service-box.has-child::after {
    content: '';
    clear: both;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    border-bottom: 1px solid #e5e5e5;
}

.select-service-lists .select-service-item .select-service-lists {
    padding-left: 16px;
}

.select-service-lists .select-service-box .form-check .form-check-label h5 {
    font-weight: 500;
    font-size: 15px;
    line-height: 20px;
}

.select-service-lists .select-service-box .price {
    margin-left: auto;
    display: flex;
    color: rgb(20, 20, 20);
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
}

.select-service-lists .select-service-box .form-check .form-check-label h6 {
    font-weight: 400;
    font-size: 15px;
    line-height: 20px;
    color: rgb(118, 118, 118);
}

/* end: modal--Select-services */
/* start: setupsmart-pricing-rules-table */
.setupsmart-pricing-rules-table {}

.setupsmart-pricing-rules-table .div-table-header {}

.setupsmart-pricing-rules-table .div-table-header .div-tr {
    display: flex;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    column-gap: 16px;
}

.setupsmart-pricing-rules-table .div-table-header .div-tr .div-th {
    font-size: 17px;
    color: rgb(20, 20, 20);
    font-weight: 600;
    line-height: 24px;
    padding: 16px 0;
}

.setupsmart-pricing-rules-table .for-day {
    width: 147px;
    min-width: 147px;
}

.setupsmart-pricing-rules-table .for-price-change {
    width: 174px;
    min-width: 174px;
}

.setupsmart-pricing-rules-table .div-table-body .div-tr {
    display: flex;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    min-height: 85px;
    align-items: center;
    column-gap: 16px;
}

.setupsmart-pricing-rules-table .div-table-body .div-tr .div-td {
    font-size: 15px;
    color: rgb(118, 118, 118);
    font-weight: 400;
    line-height: 20px;
    padding: 16px 0;
}

.setupsmart-pricing-rules-table .check-label {
    margin: 0;
}

.setupsmart-pricing-rules-table .check-label .form-check {
    display: flex;
    align-items: center;
    column-gap: 8px;
}

.setupsmart-pricing-rules-table .check-label .form-check .form-check-input {
    margin: 0 !important;
}

.setupsmart-pricing-rules-table .check-label .form-check .form-check-label {
    font-size: 17px;
    color: rgb(20, 20, 20);
    font-weight: 600;
    line-height: 24px;
}

.setupsmart-pricing-rules-table .div-table-body .div-tr .add-hour-row {
    display: flex;
    display: flex;
    align-items: center;
    column-gap: 16px;
}

.setupsmart-pricing-rules-table .div-table-body .time-interval-picker {
    display: flex;
    align-items: center;
    column-gap: 10px;
}

.setupsmart-pricing-rules-table .div-table-body .time-interval-picker .to {
    flex: 0 0 auto;
}

.setupsmart-pricing-rules-table .div-table-body .time-interval-picker .picker {
    width: 50%;
}

.setupsmart-pricing-rules-table .div-table-body .change-price-picker {
    position: relative;
}

.setupsmart-pricing-rules-table .div-table-body .change-price-picker .indicator {
    position: absolute;
    top: 50%;
    left: 13px;
    transform: translateY(-50%);
    display: flex;
}

.setupsmart-pricing-rules-table .div-table-body .change-price-picker .indicator svg {
    width: 16px;
    height: auto;
    transition: 0.2s;
}

.setupsmart-pricing-rules-table .div-table-body .change-price-picker .form-select {
    padding-left: 40px !important;
}

.setupsmart-pricing-rules-table .div-table-body .change-price-picker .indicator.increase svg {
    moz-transform: scale(-1, -1);
    -o-transform: scale(-1, -1);
    -webkit-transform: scale(-1, -1);
    transform: scale(-1, -1);
}

.input-type-number-upDown {
    position: relative;
}

.input-type-number-upDown .upDown-btns {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 13px;
    display: flex;
    flex-direction: column;
    row-gap: 2px;
    opacity: 0;
    transition: 0.1s;
}

.input-type-number-upDown:hover .upDown-btns {
    opacity: 1;
}

.input-type-number-upDown .upDown-btns .iconBtn {
    background-color: transparent;
    border: 0;
    display: flex;
    align-items: center;
}

.input-type-number-upDown .upDown-btns .iconBtn svg {
    height: auto;
    width: 13px;
}

.change-by-persentage-pickers {
    display: flex;
    align-items: center;
    column-gap: 16px;
}

.setupsmart-pricing-rules-table .icon-tab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(242, 242, 242);
    border: 1px solid rgb(229, 229, 229);
    border-radius: 0.2em;
    column-gap: 4px;
    padding: 3px;
}

.setupsmart-pricing-rules-table .icon-tab-btn .tab-btn {
    width: 36px;
    height: 36px;
    cursor: pointer;
    border-radius: 0.2em;
    display: flex;
    align-items: center;
    border: 1px solid transparent;
    background-color: transparent;
    justify-content: center;
}

.setupsmart-pricing-rules-table .icon-tab-btn .tab-btn svg {
    width: 24px;
    color: #000;
    height: auto;
}

.setupsmart-pricing-rules-table .icon-tab-btn .tab-btn.active {
    border: 1px solid rgb(229, 229, 229);
    background-color: #fff;
}

.setupsmart-pricing-rules-table .action-icon-btns {
    display: flex;
    align-items: center;
    column-gap: 10px;
}

.setupsmart-pricing-rules-table .action-icon-btns .icon-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    border-radius: 100%;
}

.setupsmart-pricing-rules-table .action-icon-btns .icon-btn svg {
    width: 24px;
    height: auto;
    color: #000;
}

.setupsmart-pricing-rules-table .action-icon-btns .icon-btn:hover {
    background-color: #1414140a;
}

.add-hour-row-lists {
    display: flex;
    flex-direction: column;
    row-gap: 8px;
}

.setupsmart-pricing-rules-table .add-text-btn {
    display: inline-block;
    font-weight: 500;
    font-size: 15px;
    line-height: 20px;
    color: #D90865;
    cursor: pointer;
    margin-top: 10px;
}

/* end: setupsmart-pricing-rules-table */
.common-page-info-header {
    margin-bottom: 24px;
}

.common-page-info-header h2 {
    font-weight: 500;
    font-size: 24px;
    line-height: 36px;
    color: rgb(20, 20, 20);
}

.common-page-info-header h4 {
    color: rgb(118, 118, 118);
    font-size: 18px;
    font-weight: 400;
    line-height: 20px;
    margin: 8px 0 0;
}

.common-page-info-header h4 a {
    color: #D90865;
}

.smart-pricing-details-container {
    width: 100%;
    /* max-width: 1100px; */
    padding: 20px 40px;
}

.smart-pricing-details-grid {
    display: flex;
    flex-wrap: wrap;
    margin: -20px -16px;
}

.smart-pricing-details-grid .smart-pricing-details-item {
    padding: 20px 16px;
    width: 100%;
}

.smart-pricing-details-grid.gap-sm {
    margin: -10px -8px;
}

.smart-pricing-details-grid.gap-sm .smart-pricing-details-item {
    padding: 10px 8px;
}

.smart-pricing-details-grid .smart-pricing-details-item.for-appointments {
    max-width: 30%;
}

.smart-pricing-details-grid .smart-pricing-details-item.for-DayOfWeek {
    max-width: 70%;
}

.smart-pricing-details-grid .smart-pricing-details-box {
    padding: 24px;
    border: 1px solid rgba(216, 216, 216, 1);
    border-radius: 16px;
    height: 100%;
}

.smart-pricing-details-grid .select-day-bar {
    background-color: #f9f9f9;
    display: flex;
    align-items: center;
    padding: 16px;
}

.form-control-div-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 8px;
    padding: 0 15px;
    height: 36px;
    font-size: 15px;
    font-weight: 400;
    line-height: 16.1px;
    color: rgb(20, 20, 20);
    border: 1px solid rgb(211, 211, 211);
    border-radius: 60px;
    background-color: rgb(255, 255, 255);
    transition: 0.3s;
}

.form-control-div-btn:hover {
    border-color: #bfbfbf;
    background-color: #f5f5f5;
}


.form-control-div-btn .icon svg {
    height: auto;
    width: 18px;
}

.smart-pricing-details-grid .smart-pricing-details-box.type1-widgets {
    display: flex;
    flex-direction: column;
    row-gap: 4px;
}

.smart-pricing-details-grid .smart-pricing-details-box.type1-widgets .top-info {}

.smart-pricing-details-grid .smart-pricing-details-box.type1-widgets .top-info h4 {
    color: rgb(20, 20, 20);
    font-size: 15px;
    font-weight: 400;
}

.smart-pricing-details-grid .smart-pricing-details-box.type1-widgets .top-info h3 {
    font-weight: 600;
    font-size: 24px;
    color: rgb(20, 20, 20);
    line-height: 32px;
    margin-top: 4px;
}

.smart-pricing-details-grid .smart-pricing-details-box.type1-widgets .bottom-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 66px;
}

.smart-pricing-details-grid .smart-pricing-details-box.type1-widgets .bottom-info h4 {
    color: rgb(118, 118, 118);
    font-size: 15px;
    font-weight: 400;
}

.smart-pricing-details-grid .smart-pricing-details-box .filter-header1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 10px;
}

.smart-pricing-details-grid .smart-pricing-details-box .filter-header1 h2 {
    color: rgb(20, 20, 20);
    font-size: 17px;
    font-weight: 600;
    line-height: 24px;
    margin: 0;
}

.smart-pricing-details-grid .chart-indicators {
    margin: auto 0 0;
    display: flex;
    align-items: center;
    column-gap: 16px;
    row-gap: 10px;
}

.smart-pricing-details-grid .chart-indicators .chart-indicator-item {
    display: flex;
    align-items: center;
    column-gap: 8px;
}

.smart-pricing-details-grid .chart-indicators .chart-indicator-item .dot {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border-radius: 100%;
}

.smart-pricing-details-grid .smart-pricing-details-box .chart-body {}

.smart-pricing-details-grid .smart-pricing-details-box .chart-body img,
.smart-pricing-details-grid .smart-pricing-details-box .chart-body svg {
    width: 100%;
}

.smart-pricing-details-grid .chart-indicators .chart-indicator-item .text {
    color: rgb(20, 20, 20);
    font-size: 14px;
    font-weight: 400;
}

.smart-pricing-details-grid .profile-info-div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    column-gap: 10px;
    padding: 16px;
    box-shadow: rgb(229, 229, 229) 0px 0px 0px 1px inset;
    background-color: rgb(249, 249, 249);
    border-radius: 8px;
}

.smart-pricing-details-grid .profile-info-div .rgdiv {
    margin-left: auto;
}

.smart-pricing-details-grid .profile-info-div .userName-with-status {
    display: flex;
    align-items: center;
    column-gap: 8px;
}

.smart-pricing-details-grid .profile-info-div .userName-with-status .name {
    color: rgb(20, 20, 20);
    font-weight: 600;
    font-size: 17px;
}

.smart-pricing-details-grid .profile-info-div .userName-with-status .status {
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    padding: 0 12px;
    border-radius: 60px;
}

.smart-pricing-details-grid .profile-info-div .userName-with-status .status.active {
    box-shadow: rgb(210, 246, 201) 0px 0px 0px 1px inset;
    color: rgb(31, 137, 0);
    background-color: rgb(237, 251, 233);
}

.smart-pricing-details-grid .profile-info-div .userName-with-status .status.inactive {
    box-shadow: #f6cac9 m0px 0px 0px 1px inset;
    color: rgb(137, 9, 0);
    background-color: rgb(251, 233, 233);
}

.smart-pricing-details-grid .profile-info-div .userProfile-with-text {
    display: flex;
    align-items: center;
    column-gap: 8px;
    margin-top: 10px;
}

.smart-pricing-details-grid .profile-info-div .userProfile-with-text .profileImg {
    flex: 0 0 auto;
    width: 31px;
    height: 31px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.smart-pricing-details-grid .profile-info-div .userProfile-with-text .profileImg .user {
    width: 100%;
    height: 100%;
}

.smart-pricing-details-grid .profile-info-div .userProfile-with-text .profileImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 100%;
}

.smart-pricing-details-grid .profile-info-div .userProfile-with-text .text {
    color: rgb(20, 20, 20);
    font-size: 15px;
    font-weight: 400;
}

.smart-pricing-details-grid .profile-info-div .userProfile-with-text .text a {
    color: #D90865;
}

.smart-pricing-details-grid .day-event-lists {
    margin: -8px;
    display: flex;
    flex-wrap: wrap;
    padding-top: 24px;
}

.smart-pricing-details-grid .day-event-lists .day-event-item {
    width: 100%;
    max-width: 14.28%;
    padding: 8px;
}

.smart-pricing-details-grid .day-event-lists .day-event-box {
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid rgb(211, 211, 211);
    cursor: pointer;
    border-radius: 10px;
}

.smart-pricing-details-grid .day-event-lists .day-event-box .event-header {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: rgb(240, 240, 255);
    color: rgb(105, 80, 243);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    line-height: 20px;
    padding: 12px;
}

.smart-pricing-details-grid .day-event-lists .day-event-box .event-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 4px;
}

.smart-pricing-details-grid .day-event-lists .day-event-box .event-body h4 {
    font-size: 13px;
    font-weight: 400;
    transition: 0.3s;
    color: rgb(118, 118, 118);
}

.smart-pricing-details-grid .day-event-lists .day-event-box .event-body .add-icon {
    color: #D90865;
    display: flex;
    transition: 0.3s;
}

.smart-pricing-details-grid .day-event-lists .day-event-box .event-body .add-icon svg {
    width: 24px;
    height: auto;
}

.smart-pricing-details-grid .day-event-lists .day-event-box:not(:hover) .event-body h4 {
    transform: translateY(10px);
}

.smart-pricing-details-grid .day-event-lists .day-event-box:not(:hover) .event-body .show-on-hover {
    opacity: 0;
}

.smart-pricing-details-grid .day-event-lists .day-event-box .event-body .event-info {
    padding: 8px;
    margin: 0 -4px;
}

.smart-pricing-details-grid .day-event-lists .day-event-box .event-body .event-info h5 {
    color: rgb(20, 20, 20);
    font-size: 13px;
    font-weight: 400;
    line-height: 16px;
}

.smart-pricing-details-grid .day-event-lists .day-event-box .event-body .event-info h6 {
    color: rgb(118, 118, 118);
    font-size: 13px;
    font-weight: 400;
    line-height: 16px;
}

.smart-pricing-details-grid .day-event-lists .day-event-box .event-body .event-info+.event-info {
    border-top: 1px solid rgb(164, 173, 186);
}

.modal--Select-services.size-1024px .modal-dialog {
    max-width: 1024px;
}

.modal--Select-services .modal-footer .multiple-btns.right {
    margin-left: auto !important;
}

.modal--Select-services .modal-footer .multiple-btns {
    display: flex;
    align-items: center;
    column-gap: 16px;
}

.ul-inside {
    list-style-position: inside !important;
}


/* ========================= start: ========================= */
.all-steps-wrap .steps-head {
    /* position: sticky; */
    /* top: 0px; */
    z-index: 9;
    background: #fff;
    padding: 24px 12px;
}

.deal-type-card {
    display: block;
    border: 2px solid #e5e5e5;
    border-radius: 10px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.deal-type-card:hover {
    background-color: #f5f5f5;
    border-color: var(--clr-pink);
}

.deal-type-card.active {
    border-color: var(--clr-pink);
    background-color: #f5f5f5;
}

.deal-type-card .icon-block {
    min-width: 35px;
    text-align: center;
}

.deal-type-card .info-block {
    min-width: 35px;
    flex: 1;
}

.deal-type-card .info-block h5 {
    font-size: 16px;
    font-weight: 600;
}

.deal-type-card .info-block p {
    font-size: 16px;
    line-height: 1.4;
    color: #767676;
}

.deal-type-input {
    display: none;
}

.apply-option-card {
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.apply-option-card:hover {
    border-color: #9d5cff;
}

.apply-option-card input[type="checkbox"] {
    transform: scale(1.2);
}

.step-content {
    width: 100%;
    max-width: 600px;
    margin: auto;
}

.step-content .form-label {
    margin-bottom: 5px;
    display: flex;
    gap: 5px;
    align-items: center;
    font-weight: 600;
}

.step-content .form-label span {
    color: #767676;
}

.step-content .form-label .left {
    margin-left: auto;
}

.step-content .days-wrap {
    gap: 8px !important;
    align-items: center;
}

.step-content .days-wrap .day-tag {
    border-radius: 60px;
    border: 1px solid #b7b7b7;
    padding: 5px 15px;
    min-width: 60px;
    text-align: center;
}

.step-content .days-wrap .day-tag:hover {
    background: #f2f2f2;
    border-color: #e5e5e5;
}

.step-content .days-wrap .day-tag.active {
    border-color: var(--clr-pink);
}

.step-content .days-wrap .day-tag.active:hover {
    background: #f2f2f2;
    border-color: var(--clr-pink);
}

.step-content .form-switch {
    padding-left: 0px;
}

.step-content .form-switch .form-check-input {
    margin-inline-start: 0;
}

.step-content .form-switch .form-check-input {
    width: 42px;
    height: 22px;
}

.step-content .form-switch .form-check-label {
    font-size: 16px;
    font-weight: 700;
}

.step-content .form-switch .small-text {
    font-size: 13px;
    color: #767676;
}

.form-group .discount-value {
    display: flex;
    align-items: baseline;
    gap: 8px;
    position: relative;
}

.form-group .discount-value .form-control {
    padding-left: 35px;
}

.form-group .discount-value .box-percent {
    position: absolute;
    left: 15px;
    top: 12px;
}

.form-group .small-text {
    font-size: 12px;
    color: #767676;
    display: block;
}

.form-group.cols-2 {
    display: flex;
    gap: 15px;
}

.form-group .full {
    width: 100%;
}

.step-content .icon-tab-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    border-radius: 5px;
    background: #f2f2f2;
    border: 1px solid #e5e5e5;
    padding: 5px;
}

.step-content .tab-btn {
    padding: 6px;
    border-radius: 5px;
}

.step-content .tab-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.step-content .tab-btn.active {
    background: #fff;
}

.step-header {
    margin-bottom: 30px
}

.step-header h5 {
    color: rgb(118, 118, 118);
    font-size: 15px;
    line-height: 20px;
    font-weight: 400;
    margin: 0 0 10px;
}

.step-header h2 {
    font-size: 36px;
    line-height: 1.2;
    font-weight: 600;
    margin-bottom: 16px;
}

.step-header .sub-head {
    font-size: 18px;
    line-height: 1.2;
    font-weight: 500;
    color: #767676;
}

.toggle-back.larg {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
}

.discount-available-info {
    display: flex;
    align-items: baseline;
    gap: 10px;
    background-color: #fff8fb;
    border: 1px solid #ffd0e5;
    padding: 10px;
    border-radius: 5px;
}

.discount-available-info h5 {
    font-size: 16px;
    font-weight: 600;
}

.discount-available-info p {
    font-size: 16px;
    line-height: 1.4;
}

.step-checkbox {
    font-weight: 600;
    font-size: 16px;
}

.step-checkbox .form-check-input {
    width: 20px;
    height: 20px;
}

.step-checkbox span {
    font-weight: 400;
    display: block;
    font-size: 13px;
}

.relative {
    position: relative;
}

.iconblock {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    margin: 0 auto 20px;
    padding: 15px;
    background: #ff8abe;
    background: radial-gradient(circle, rgba(255, 138, 190, 1) 0%, rgba(217, 8, 101, 1) 100%);
}

.thankyou-promotion {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    gap: 10px;
    flex-direction: column;
}

.thankyou-promotion h4 {
    font-size: 17px;
    font-weight: 700;
}

.thankyou-promotion ul {
    display: flex;
    gap: 10px;
    flex-direction: column;
    list-style: none;
}

.thankyou-promotion ul li {
    display: flex;
    gap: 10px;
    font-size: 16px;
    line-height: 1.2;
}


.ml-30 {
    margin-left: 30px;
}

.fs-body.fs-hidden {
    display: none;
}


/* greyed out block */
.fs-body.fs-disabled {
    opacity: 0.5;
    pointer-events: none;
}



/* pill style */
.day-tag {
    display: inline-block;
    border-radius: 999px;
    padding: 6px 14px;
    margin-right: 6px;
    margin-bottom: 6px;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid #6c4df6;
    background: #fff;
    color: #000;
}

/* active day */
.day-checkbox:checked+.day-tag {
    background: #6c4df6;
    color: #fff;
}



@media (max-width: 767px) {
    .step-header h2 {
        font-size: 30px;
        margin-bottom: 15px;
    }

    .step-header .sub-head {
        font-size: 17px;
    }
}

.setupsmart-pricing-rules-table {
    width: 100%;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.div-table-header {
    background: #fafafa;
    border-bottom: 1px solid #e5e5e5;
}

.div-tr {
    display: flex;
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
}

.div-th,
.div-td {
    padding: 4px 8px;
}

.for-day {
    width: 220px;
}

.for-price-change {
    width: 180px;
}

.add-hour-row {
    display: flex;
    gap: 20px;
    padding: 10px 0;
    align-items: center;
}

.time-interval-picker {
    display: flex;
    align-items: center;
    gap: 10px;
}

.change-price-picker select {
    width: 100%;
}

.change-by-persentage-pickers .input-with-text-btn {
    position: relative;
}

.change-by-persentage-pickers .text-btn.left {
    left: 10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.delete-interval {
    cursor: pointer;
    font-size: 18px;
    color: #d00;
}

.input-with-two-buttons {
    position: relative;
    display: flex;
    gap: 6px;
    align-items: center;
}

.type-btn {
    background: #f3f3f3;
    border: 1px solid #ddd;
    padding: 0 10px;
    border-radius: 6px;
    height: 40px;
    min-width: 40px;
    cursor: pointer;
}

.type-btn.active {
    background: #000;
    color: #fff;
    border-color: #000;
}

/* ========================= end: ========================= */
.dash-right-container.step-content {
    max-width: unset;
}

/* start: blast-campaigns-fees */
.blast-campaigns-fees {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 1px solid rgb(229, 229, 229);
    border-radius: 8px;
}

.blast-campaigns-fees .blast-campaigns-fee-item {}

.blast-campaigns-fees .blast-campaigns-fee-item:not(:last-child) {
    border-bottom: 1px solid rgb(229, 229, 229);
    padding-bottom: 16px;

}

.blast-campaigns-fees .blast-campaigns-fee-item:not(:first-child) {
    padding-top: 16px;

}

.blast-campaigns-fees .blast-campaigns-fee-item h3 {
    font-size: 20px;
    color: rgb(20, 20, 20);
    font-weight: 600;
    line-height: 28px;
}

.blast-campaigns-fees .blast-campaigns-fee-item p {
    font-size: 15px;
    color: rgb(20, 20, 20);
    font-weight: 400;
    line-height: 20px;
}

.blast-campaigns-fees .blast-campaigns-fee-item .h3-with-price {
    display: flex;
    align-items: flex-start;
    column-gap: 10px;
    justify-content: space-between;
    margin-bottom: 8px;
}

.blast-campaigns-fees .blast-campaigns-fee-item .price-tag {
    color: rgb(183, 87, 11);
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 60px;
    background-color: rgb(255, 247, 219);
}

.payment-bill-form-card-lists {
    display: flex;
    flex-direction: column;
    row-gap: 48px;
}

.payment-bill-form-card-lists .payment-bill-card {
    box-shadow: rgb(229, 229, 229) 0px 0px 0px 1px inset;
    border-radius: 16px;
    padding: 40px;
    background-color: #fff;
}

.input-with-card-pics {
    position: relative;
}

.input-with-card-pics .card-pics {
    position: absolute;
    top: 0;
    right: 12px;
    height: 100%;
    display: flex;
    align-items: center;
    column-gap: 10px;
}

.input-with-card-pics .card-pics img {
    width: 21px;
    height: auto;
}

.input-with-card-pics .form-control {
    padding-right: 70px !important;
}

.form-group .label-with-right-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.form-group .label-with-right-value .form-label {
    margin-bottom: 0 !important;
}

.input-with-left-icon {
    position: relative;
}

.input-with-left-icon .left-icon {
    display: flex;
    align-items: center;
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.input-with-left-icon .form-control {
    padding-left: 38px !important;
}

.input-with-left-icon .left-icon svg,
.input-with-left-icon .left-icon img {
    width: 18px;
}

/* end: blast-campaigns-fees */
/* start: appointment-preview-page */
.appointment-preview-page {
    background-color: #f9f9f9;
    min-height: 100vh;
}

.appointment-preview-page .preview-header .page-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 10px;
    min-height: 72px;
}

.appointment-preview-page .preview-header {
    border-bottom: 1px solid rgb(229, 229, 229);
    background-color: #fff;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 100;
}

.appointment-preview-page .preview-header h2 {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: rgb(20, 20, 20);
}

.appointment-preview-page .preview-header .right-div {
    margin-left: auto;
    display: flex;
    align-items: center;
    column-gap: 16px;
}

.appointment-preview-page .preview-body {
    width: 100%;
    max-width: 812px;
    margin: 0 auto;
    padding: 65px 0;
}

.appointment-preview-page .preview-tabs {
    background-color: #f2f2f2;
    border: 1px solid #e5e5e5;
    padding: 3px;
    border-radius: 8px;
    display: flex;
    margin-bottom: 32px;
}

.appointment-preview-page .preview-tabs .preview-tab-btn {
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    border: 1px solid transparent;
    flex: 1 1 auto;
    font-size: 15px;
    border-radius: 8px;
    font-weight: 500;
    color: rgb(20, 20, 20);
    transition: 0.3s;
}

.appointment-preview-page .preview-tabs .preview-tab-btn.active {
    background-color: #fff;
    border-color: rgb(211, 211, 211);
}

/* email-preview-frame-s1 */
.email-preview-frame-s1 {
    padding: 8px;
    border-radius: 18px;
    background: linear-gradient(203.14deg, #e7e8ff66 -8.1%, #a884fb66 31.51%, #d1d4ff66 105.9%);
}

.email-preview-frame-s1 .frame-header-bar {
    padding: 16px;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    background-color: #f6f6ff;
    display: flex;
    align-items: center;
    column-gap: 8px;
}

.email-preview-frame-s1 .frame-header-bar .dot {
    background: #ddceff;
    border-radius: 100%;
    width: 16px;
    height: 16px;
}

.email-preview-frame-s1 .divider-hr {
    border-bottom: 1px solid #e5e5e5;
}

.email-preview-frame-s1 .email-header {
    background-color: #fff;
    padding: 24px;
    display: flex;
    flex-direction: column;
    row-gap: 24px;
}

.email-preview-frame-s1 .email-header h3 {
    font-weight: 600;
    color: rgb(20, 20, 20);
    font-size: 20px;
}

.email-preview-frame-s1 .email-header .userWithText {
    display: flex;
    align-items: center;
    column-gap: 12px;
}

.email-preview-frame-s1 .email-header .userWithText .icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    flex: 0 0 auto;
    width: 48px;
    text-align: center;
    background-color: #f0f0ff;
    height: 48px;
    color: #6950f3;
}

.email-preview-frame-s1 .email-header .userWithText .icon-container svg {
    width: 24px;
    height: auto;
}

.email-preview-frame-s1 .email-header .userWithText .text-container {}

.email-preview-frame-s1 .email-header .userWithText .text-container h4 {
    font-size: 17px;
    font-weight: 600;
    line-height: 26px;
    color: rgb(20, 20, 20);
}

.email-preview-frame-s1 .email-header .userWithText .text-container h4 span {
    font-weight: 400;
    font-size: 15px;
    line-height: 18px;
}

.email-preview-frame-s1 .email-header .userWithText .text-container h5 {
    font-size: 15px;
    color: rgb(20, 20, 20);
    font-weight: 400;
    line-height: 18px;
}

.email-preview-frame-s1 .email-body {
    width: 100%;
    padding: 52px 42px;
    background-color: #f9f9f9;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
}

.email-preview-frame-s1 .appointment-reminder-area {
    padding: 64px;
    border-radius: 16px;
    border: 1px solid #e5e5e5;
    background-color: #ffffff;
    box-sizing: border-box;
}

.mj-column-per-50 {
    width: 50% !important;
    max-width: 50%;
}

.button-group-button {
    width: auto !important;
    margin-right: 12px !important;
}

.email-preview-frame-s1 .appointment-reminder-area h2 {}

.preview-content {
    display: none;
}

.preview-content.active {
    display: block;
}

.preview-tab-btn.active {
    font-weight: bold;
}

/* phone-frame-s1 */
.phone-frame-s1 {
    width: 360px;
    height: 720px;
    background: linear-gradient(203.14deg, #e7e8ff66 -8.1%, #a884fb66 31.51%, #d1d4ff66 105.9%);
    border-radius: 58px;
    padding: 10px;
    display: flex;
    margin: auto;
}

.phone-frame-s1 .inner-wrapper {
    flex: 1;
    border-radius: 58px;
    position: relative;
    z-index: 10;
}

.phone-frame-s1 .inner-wrapper .phone-bg {
    width: 100%;
    height: 100%;
    border-radius: 58px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.phone-frame-s1 .phone-notch {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 8px;
    padding: 16px;
}

.phone-frame-s1 .phone-notch .dot {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: #ddceff;
}

.phone-frame-s1 .phone-notch .bar {
    height: 10px;
    width: 53px;
    border-radius: 60px;
    background-color: #ddceff;
}

.phone-frame-s1 .time-date-widget1 {
    padding: 48px 0 24px;
    text-align: center;
}

.phone-frame-s1 .time-date-widget1 h5 {
    color: rgb(255, 255, 255);
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
}

.phone-frame-s1 .time-date-widget1 h1 {
    color: rgb(255, 255, 255);
    font-size: 85px;
    line-height: 85px;
    letter-spacing: 1.7px;
    font-weight: bold;
}

.phone-frame-s1 .notification-widget-s1 {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    padding: 36px 16px 24px;
}

.phone-frame-s1 .notification-widget-s1-item {
    padding: 16px 20px;
    background-color: #fff;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    row-gap: 8px;
}

.phone-frame-s1 .notification-widget-s1-item .headInfo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 10px;
}

.phone-frame-s1 .notification-widget-s1-item .headInfo figure {
    margin: 0;
    display: flex;
    align-items: center;
    column-gap: 8px;
}

.phone-frame-s1 .notification-widget-s1-item .headInfo figure .icon-container {
    background-color: rgb(118, 118, 118);
    width: 28px;
    height: 28px;
    border-radius: 100%;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.phone-frame-s1 .notification-widget-s1-item .headInfo figure .icon-container svg {
    width: 12px;
    height: auto;
}

.phone-frame-s1 .notification-widget-s1-item .headInfo figure figcaption {
    color: rgb(118, 118, 118);
    font-size: 13px;
    font-weight: 400;
    line-height: 16px;
}

.phone-frame-s1 .notification-widget-s1-item .headInfo figure .time {
    margin-left: auto;
    color: rgb(118, 118, 118);
    font-size: 13px;
    font-weight: 400;
    line-height: 16px;
}

.phone-frame-s1 .notification-widget-s1-item .text-content {}

.phone-frame-s1 .notification-widget-s1-item .text-content p {
    font-size: 15px;
    color: rgb(20, 20, 20);
    line-height: 20px;
    font-weight: 400;
}

/* phone-frame-s1.for-wp */
.phone-frame-s1.for-wp .phone-notch {
    background-color: #f6f6f6;
    border-top-left-radius: 58px;
    border-top-right-radius: 58px;
}

.phone-frame-s1.for-wp .wp-header {
    background-color: #f6f6f6;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    column-gap: 16px;
}

.phone-frame-s1.for-wp .wp-header .back-btn {
    display: flex;
    align-items: center;
    background-color: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    min-width: unset;
}

.phone-frame-s1.for-wp .wp-header .back-btn img {
    width: 11px;
}

.phone-frame-s1.for-wp .wp-header figure {
    display: flex;
    align-items: center;
    column-gap: 10px;
}

.phone-frame-s1.for-wp .wp-header figure .icon-container {
    width: 36px;
    border: 1px solid rgb(229, 229, 229);
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
}

.phone-frame-s1.for-wp .wp-header figure .icon-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 100%;
}

.phone-frame-s1.for-wp .wp-header figure figcaption {}

.phone-frame-s1.for-wp .wp-header figure .verified-mark {
    margin-left: -5px;
}

.phone-frame-s1.for-wp .inner-wrapper {
    display: flex;
    flex-direction: column;
}

.phone-frame-s1.for-wp .wp-footer {
    background-color: #f6f6f6;
    border-bottom-left-radius: 58px;
    border-bottom-right-radius: 58px;
    margin-top: auto;
    padding: 6px 16px 32px 12px;
}

.phone-frame-s1.for-wp .wp-footer .footer-inner-wrapper {
    display: flex;
    align-items: center;
    column-gap: 10px;
    justify-content: space-between;
}

.phone-frame-s1.for-wp .wp-footer .footer-inner-wrapper .action-btns {
    display: flex;
    align-items: center;
    column-gap: 10px;
}

.phone-frame-s1.for-wp .wp-footer .footer-inner-wrapper .action-btns .icon-btn {
    display: flex;
    align-items: center;
    background-color: transparent;
    border: 0;
    justify-content: center;
}

.phone-frame-s1.for-wp .wp-footer .footer-inner-wrapper .action-btns .icon-btn img {
    width: 18px;
    max-height: 18px;
}

.phone-frame-s1.for-wp .wp-footer .footer-inner-wrapper .input-area {
    flex: 1 1 auto;
    position: relative;
}

.phone-frame-s1.for-wp .wp-footer .footer-inner-wrapper .input-area .overlay-actions {
    display: flex;
    align-items: center;
    column-gap: 5px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
}

.phone-frame-s1.for-wp .wp-footer .footer-inner-wrapper .input-area .form-control {
    padding-right: 35px !important;
    height: 32px;
    padding: 0 10px;
    border-radius: 60px;
    font-size: 14px;
}

.phone-frame-s1.for-wp .wp-footer .footer-inner-wrapper .input-area .overlay-actions .icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 0;
}

.phone-frame-s1.for-wp .wp-footer .footer-inner-wrapper .input-area .overlay-actions .icon-btn img {
    width: 16px;
    max-height: 16px;
}

.phone-frame-s1 .wp-chat-lists {
    flex: 1 1 auto;
    display: flex;
    padding: 16px;
    flex-direction: column-reverse;
    overflow-x: hidden;
    overflow-y: auto;
    row-gap: 16px;
}

.phone-frame-s1 .wp-chat-lists .wp-chat-box {
    padding: 8px;
    color: rgb(20, 20, 20);
    background-color: #fff;
    border-radius: 8px;
    font-weight: 400;
    line-height: 20px;
    position: relative;
    font-size: 15px;
}

.phone-frame-s1 .wp-chat-lists .wp-chat-box .before-arow {
    width: 17px;
    height: 21px;
    position: absolute;
    bottom: 0;
    left: -10px;
}

.phone-frame-s1 .wp-chat-lists .wp-chat-box .font-default-body-2xs-regular {
    font-size: 11px;
    font-weight: 400;
    line-height: 12px;
}

/* end: appointment-preview-page */

.tooltip-inner {
  background-color: #D90865;  /* Your color */
  color: #fff;  font-size: 16px;
}

.tooltip .tooltip-arrow::before {
  border-top-color: #00000000 !important;
  border-bottom-color: #00000000 !important;
  border-left-color: #D90865 !important;
  border-right-color: #D90865 !important;
}


.dash-left-container.d-block.user-dash-left-container.profile-sidebar-wrap {
    width: auto !important;
}

.dash-left-container.d-block.user-dash-left-container.profile-sidebar-wrap .sub-nav-area{
    transform: none !important;
    box-shadow: none !important;
}


span#country_code-error{
    position: absolute;
}
span#phone-error{
    margin-top: 15px;
    display: block;
}

/* Add New CSS 22/04/2026 */
.mr-30{margin-right: 30px;}

.group-filter_nav{
    cursor: pointer; padding: 18px 16px; border-radius: 10px;
    display: flex; align-items: center; gap: 10px; width: 100%;
}
.group-filter_nav:hover{background-color: #1313130a;}

.group-filter_nav .filter_arrow img{transition: transform 0.3s ease; transform: rotate(0deg);}
.group-filter_nav.active .filter_arrow img{transform: rotate(180deg);}

.group-filter_nav .group-filter_nav_icon{width: 24px;}

.group-filter_nav .group-filter_nav_name{
    display: flex; align-items: center; gap: 5px;
    flex: 1; font-size: 17px; font-weight: 500; text-align: left;
}
.group-filter_nav .group-filter_nav_name span{
    background: #D84385; color: #fff; height: 22px; min-width: 22px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 100%; padding: 5px; font-size: 13px;
}

.group-filter_nav .group-filter_nav_edit{color: #D84385; font-weight: 600;}
.group-filter_nav .clear_text{color: #000000; font-weight: 500; margin-right: 10px;}
.group-filter_nav .clear_text:hover{text-decoration: underline;}

.group-filter_nav_list{position: relative; padding: 0 0 30px;}
.group-filter_nav_list ul{list-style: none;}
.group-filter_nav_list ul li{
    cursor: pointer; padding: 10px 10px 10px 50px; border-radius: 10px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.group-filter_nav_list ul li:hover{background-color: #1313130a;}
.group-filter_nav_list ul li.active{
    background-image: url(../img/icons/check-icon-b.svg);
    background-repeat: no-repeat;
    background-position: center right 12px;
    background-size: 16px;
}


.client_segments_filter .modal-content .modal-body{
    max-height: 600px; height: 60vh;
    overflow: auto;
}

/*--- END CSS ---*/

.btn-pink {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 12px 24px;
    border-radius: 50px;
    background: var(--clr-pink);
    color: #fff;
    border: 0;
    font-size: 18px;
}
.btn-pink:hover{
    opacity: 0.8;
}

#modal--manageAppointment .btn-dark,
#modal--manageAppointment .btn-pink{
    padding: 12px 24px;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap:10px;
}
#modal--manageAppointment .btn-dark img,
#modal--manageAppointment .btn-pink img{
    filter: brightness(0) invert(1);
    max-width: 26px;
}

#open-gallary.btn-pink{
    display: inline-flex; padding: 6px 15px;
    font-size: 14px; margin-top: 10px;
}

#modal--giftCardUpdate .modal-fullscreen .modal-body {
    margin-bottom: 70px;
    max-height: 80vh;
}





@media only screen and (max-width: 768px) {
    .tooltip-inner,
    .tooltip .tooltip-arrow::before{
        display: none;
    }
}