/*
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}*/

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

:root {
    --vz-vertical-menu-hover-and-active: #6674A1;
    --vz-vertical-menu-hover-and-active-dark: #32373D;
}

.navbar-menu .navbar-nav .nav-sm {
    padding-left: 0;
}

.form-switch input[type="checkbox"]:not(:checked) + span:before {
    content: attr(data-off);
}

.form-switch input[type="checkbox"]:checked + span:before {
    content: attr(data-on);
}

/* light mode nav menu styling */

/*main menu item vertical line when active*/
[data-layout=vertical][data-sidebar=dark][data-layout-mode=light] .navbar-nav .nav-link[data-bs-toggle=collapse][aria-expanded=true]:not(.active) + .collapse.show + .nav-item > .nav-link.active::before,
[data-layout=vertical][data-sidebar=dark][data-layout-mode=light] .navbar-nav .nav-link[data-bs-toggle=collapse][aria-expanded=true].active::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 4px;
    background-color: #fff;
}

/*main menu item background-colour when active*/
[data-layout=vertical][data-sidebar=dark][data-layout-mode=light] .navbar-nav .nav-link[data-bs-toggle=collapse][aria-expanded=true]:not(.active) + .collapse.show + .nav-item > .nav-link.active,
[data-layout=vertical][data-sidebar=dark][data-layout-mode=light] .navbar-nav .nav-link[data-bs-toggle=collapse][aria-expanded=true].active {
    background-color: var(--vz-vertical-menu-hover-and-active);
}

/*sub menu item background-colour when active*/
[data-layout=vertical][data-sidebar=dark][data-layout-mode=light] .navbar-nav .nav-sm .nav-link.active {
    background-color: var(--vz-vertical-menu-hover-and-active);
}

/*main menu item when the menu is closed but there is an active tab inside of it background-colour*/
[data-layout=vertical][data-sidebar=dark][data-layout-mode=light] .navbar-nav .nav-link.active {
    background-color: var(--vz-vertical-menu-hover-and-active);
}

    /*main menu item when the menu is closed but there is an active tab inside of it - vertical line*/
    [data-layout=vertical][data-sidebar=dark][data-layout-mode=light] .navbar-nav .nav-link.active:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 4px;
        background-color: #fff !important;
    }

/*all menu items hover background colour*/
[data-layout-mode=light] .nav-link:not(.active):hover {
    background-color: var(--vz-vertical-menu-hover-and-active);
    color: #fff !important;
}

    /*all menu items hover vertical line*/
    [data-layout-mode=light] .nav-link:not(.active):hover:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 4px;
        background-color: #fff !important;
    }

/* dark mode nav menu styling */

/*main menu item vertical line when active*/
[data-layout=vertical][data-sidebar=dark][data-layout-mode=dark] .navbar-nav .nav-link[data-bs-toggle=collapse][aria-expanded=true]:not(.active) + .collapse.show + .nav-item > .nav-link.active::before,
[data-layout=vertical][data-sidebar=dark][data-layout-mode=dark] .navbar-nav .nav-link[data-bs-toggle=collapse][aria-expanded=true].active::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 4px;
    background-color: #fff;
}

/*main menu item background-colour when active*/
[data-layout=vertical][data-sidebar=dark][data-layout-mode=dark] .navbar-nav .nav-link[data-bs-toggle=collapse][aria-expanded=true]:not(.active) + .collapse.show + .nav-item > .nav-link.active,
[data-layout=vertical][data-sidebar=dark][data-layout-mode=dark] .navbar-nav .nav-link[data-bs-toggle=collapse][aria-expanded=true].active {
    background-color: var(--vz-vertical-menu-hover-and-active-dark);
}

/*sub menu item background-colour when active*/
[data-layout=vertical][data-sidebar=dark][data-layout-mode=dark] .navbar-nav .nav-sm .nav-link.active {
    background-color: var(--vz-vertical-menu-hover-and-active-dark);
}

/*main menu item when the menu is closed but there is an active tab inside of it background-colour*/
[data-layout=vertical][data-sidebar=dark][data-layout-mode=dark] .navbar-nav .nav-link.active {
    background-color: var(--vz-vertical-menu-hover-and-active-dark);
}

    /*main menu item when the menu is closed but there is an active tab inside of it - vertical line*/
    [data-layout=vertical][data-sidebar=dark][data-layout-mode=dark] .navbar-nav .nav-link.active:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 4px;
        background-color: #fff !important;
    }

/*all menu items hover background colour*/
[data-layout-mode=dark] .nav-link:not(.active):hover {
    background-color: var(--vz-vertical-menu-hover-and-active-dark);
    color: #fff !important;
}

    /*all menu items hover vertical line*/
    [data-layout-mode=dark] .nav-link:not(.active):hover:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 4px;
        background-color: #fff !important;
    }

.page-title-left {
    flex: 1;
    margin-left: 10px;
}

.day-toggle {
    width: 120px;
}

.delete-button {
    padding-left: 10px;
}

    .delete-button a:active {
        color: #fff !important;
        border-color: #00000000 !important;
        background-color: #f06548 !important;
    }

    .delete-button a:hover {
        color: #fff !important;
        border-color: #00000000 !important;
        background-color: #f06548 !important;
    }

    .delete-button a:focus {
        color: #f06548 !important;
    }

.bin {
    display: flex;
    align-items: flex-end;
}

.discover-item {
    flex: 0 0 calc(20% - 20px); /* 20% width with 20px spacing between items */
    margin: 10px; /* Add some spacing between items */
    box-sizing: border-box; /* Include padding and border in the width calculation */
}

.discover-blocks {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to the next row when there's not enough space */
    justify-content: center;
}

.discover-block {
    /*border-radius: 10px;*/
    border-radius: 30px;
    width: 100%;
    padding-top: 100%; /* Set the height equal to the width */
    background-color: white;
    /*box-shadow: 0px 2px 14px rgba(0, 0, 0, 0.09);*/
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
    color: #fff;
    font-size: 17px;
}

.discover-inner {
    flex: 0 0 calc(15% - 20px); /* Set the width of each square with margin */
    margin: 10px; /* Add margin to create space between squares */
    display: flex;
    align-items: center;
    justify-content: center;
}

.discover-block span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.discover-block:hover {
    transform: translateY(-5px);
}

.discover-icon {
    width: 70%;
    height: auto;
    display: block;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-title {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #495057;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media (max-width: 991.98px) {
    .discover-item {
        flex: 0 0 calc(50% - 20px); /* 50% width with 20px spacing between items */
    }
}

/*START Upload file css*/
.dropzone-external {
    width: 200px;
    height: 200px;
    background-color: rgba(183, 183, 183, 0.1);
    border-width: 2px;
    border-style: dashed;
    padding: 10px;
}

    .dropzone-external > * {
        pointer-events: none;
    }

    .dropzone-external.dropzone-active {
        border-style: solid;
    }

.widget-container > span {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 16px;
}

.dropzone-image {
    max-width: 100%;
    max-height: 100%;
    align-self: center;
}

.dropzone-text > span {
    font-weight: 100;
    opacity: 0.5;
}

.upload-progress {
    display: flex;
    margin-top: 10px;
}

.flex-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dropzone-text {
    text-align: center;
}

/*END Upload file css*/
.flex {
    display: flex;
}

.input-group-prepend {
    /*position: absolute;*/
    display: flex;
}

    .input-group-prepend span {
        padding: .18rem .5rem;
        border-radius: var(--vz-border-radius-sm);
        justify-content: center;
    }

.width-100 {
    width: 100%;
}

.holder-padding .form-control {
    padding-left: 32px;
}

.extra-holder-padding .form-control {
    padding-left: 46px;
}

.align-bottom {
    display: flex;
    align-items: flex-end;
}

.prepend-right {
    right: calc(var(--vz-gutter-x)*.5);
}

.validation-summary-errors {
    padding-top: 16px;
    color: red;
}

.field-validation-error {
    color: red;
    /*position: absolute;*/
}

.form-section {
    display: flex;
    margin-bottom: 5px;
}

.form-section-stacked {
    margin-bottom: 5px;
}

.form-heading {
    flex: 0 0 150px; /* Adjust the width as needed */
    font-weight: 600;
}

.form-info {
    flex: 1;
    overflow-x: auto;
}

.toggle-info {
    padding-left: 10px;
}

.vert-center {
    display: flex;
    display: flex;
    align-items: center;
}

.vert-center-cell {
    display: table-cell;
}

.day-height {
    min-height: 52px;
}

.dx-field-value {
    width: 100% !important;
}

.discover-name {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0px;
}

.custom-table .dx-datagrid-filter-row .dx-editor-cell .dx-editor-with-menu .dx-menu {
    background-color: transparent;
}

.custom-table .dx-datagrid-rowsview .dx-row > td {
    border-bottom: none;
    border-right: none;
}

.custom-table .dx-datagrid .dx-column-lines > td {
    border-left: none;
    border-right: none;
}

.custom-table .dx-datagrid-rowsview .dx-datagrid-table {
    border-collapse: separate !important;
    border-spacing: 0 15px !important;
}

.custom-table .dx-datagrid-rowsview {
    border-left: none;
    border-right: none;
}

.custom-table .dx-data-row {
    height: 50px;
    -webkit-filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.09));
    /*box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.09);*/
    background-color: #fff;
}

.custom-table td {
    vertical-align: middle !important;
    text-align: left !important;
}

.custom-table .dx-datagrid {
    background-color: transparent;
}

.custom-table .dx-datagrid-text-content {
    font-size: 14px;
}

.custom-table .dx-datagrid .dx-row-lines > td {
    font-size: 12px;
    text-align: left !important;
}

.custom-table .dx-datagrid-rowsview .dx-datagrid-table {
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
    padding-right: 10px;
    padding-left: 10px;
}

/*table header*/
.custom-table .dx-datagrid-headers {
    background-color: #fff;
    border-top: none !important;
    border-bottom: none !important;
    margin-right: 10px !important;
    margin-left: 10px !important;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.09);
    /*box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);*/
    border-left: none;
    border-right: none;
    background-color: #f9fbfc;
    border-left: none;
    border-right: none;
}

    .custom-table .dx-datagrid-headers .dx-datagrid-table .dx-row > td {
        border-bottom: none !important
    }

.custom-table .dx-datagrid-borders .dx-datagrid-rowsview, .dx-datagrid-headers + .dx-datagrid-rowsview, .dx-datagrid-rowsview.dx-datagrid-after-headers {
    border-top: none !important;
    border-left: none;
    border-right: none;
}

/*.custom-table .dx-datagrid-rowsview {
    border-left: none;
    border-right: none;
}*/

.custom-table .dx-editor-cell .dx-texteditor, .dx-editor-cell .dx-texteditor .dx-texteditor-input {
    background-color: transparent !important;
}

/*footer part*/
.custom-table .dx-datagrid-borders > .dx-datagrid-filter-panel {
    border-top-width: 0;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
}

.custom-table .dx-datagrid-pager {
    border-top: none;
}

.custom-table .dx-datagrid-borders > .dx-datagrid-rowsview, .dx-datagrid-borders > .dx-datagrid-total-footer {
    border-bottom: none;
}

.confirmed-badge {
    outline-color: #65D382 !important;
    background-color: #65D382;
}

.rejected-badge {
    outline-color: #FF4040 !important;
    background-color: #FF4040;
}

.cancelled-badge {
    outline-color: #FF4097 !important;
    background-color: #FF4097;
}

.pending-badge {
    outline-color: #FFC60E !important;
    background-color: #FFC60E;
}

.in-progress-badge {
    outline-color: #00BEFF !important;
    background-color: #00BEFF;
}

.completed-badge {
    outline-color: #9747FF !important;
    background-color: #9747FF;
}

.alert-badge {
    color: #fff;
    outline: solid;
    font-weight: 700;
    outline-width: 2px;
    font-size: 10px;
    border-radius: 8px;
    text-transform: uppercase;
}

.pay-container {
    display: grid;
    place-items: end;
}

.buttons-end {
    display: grid;
    place-items: end;
}

.pending-payment {
    color: #f06548;
    font-weight: 700;
}

.paid-payment {
    color: #0ab39c;
    font-weight: 700;
}

.completed-booking {
    color: #975dee;
    font-weight: 700;
}

.booked-booking {
    color: #4bb543;
    font-weight: 700;
}

.cancelled-booking {
    color: #ff4097;
    font-weight: 700;
}

.highlight-grid-text {
    color: #975dee;
    font-weight: 600;
}

.bg-soft-purple {
    background-color: rgba(151, 71, 255, 0.18);
}

.bg-soft-green {
    background-color: rgba(101, 211, 130, 0.18);
}

.bg-soft-yellow {
    background-color: rgba(255, 198, 14, 0.18);
}

.bg-soft-blue {
    background-color: rgba(0, 190, 255, 0.18);
}

.bg-soft-red {
    background-color: #fde8e4;
}

.text-purple {
    color: #9747FF !important;
}

.text-green {
    color: #65D382 !important;
}

.text-yellow {
    color: #FFC60E !important;
}

.text-blue {
    color: #00BEFF !important;
}

.text-red {
    color: #f06548;
}

.width-100 {
    width: 100%;
}

.pr-2 {
    padding-right: 2px;
}

.pl-2 {
    padding-left: 2px;
}

.mr-2 {
    margin-right: 2px;
}

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

.remove-label label {
    display: none;
}

.bin {
    display: flex;
    align-items: flex-end;
    margin-bottom: 1px;
}

.vert-mid {
    vertical-align: middle;
}

.readonly {
    background: #f1f1f1;
}

.error {
    color: red;
    font-size: 12px;
}

.timeslots-message {
    font-size: 12px;
    color: #405189;
}

.add-pet-btn {
    height: 28px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.unavailable label {
    background: #e3e3e3;
    border-color: #e3e3e3;
    color: #b9b9b9;
}

    .unavailable label:hover {
        background: #e3e3e3;
        border-color: #e3e3e3;
        color: #b9b9b9;
    }

.active-booking {
    background-color: #9add95 !important;
    border-color: #9add95 !important;
    color: #fff !important;
}

.unavailable label.active-booking, .unavailable label.active-booking:hover {
    background-color: #9add95 !important;
    border-color: #9add95 !important;
    color: #fff !important;
}

.unavailable-dropdown {
    background: #e3e3e3;
    border-color: #e3e3e3;
    color: #b9b9b9;
}

.vue-readonly input {
    background: #f1f1f1;
}

    .vue-readonly input:focus {
        background: #f1f1f1;
    }

:root[data-sidebar=dark] {
    --vz-vertical-menu-bg: #e3fff6;
    --vz-vertical-menu-border: #e3fff6;
    --vz-vertical-menu-title-color: #56a698;
    --vz-vertical-menu-item-color: #5b7884;
    --vz-vertical-menu-sub-item-color: #5b7884;
}

:root {
    --vz-vertical-menu-hover-and-active: #8DE8D0;
    --vz-vertical-menu-hover-and-active-dark: #FFEFF8;
}

.navbar-menu .navbar-nav .nav-sm .nav-link {
    color: #5b7884;
}

.navbar-menu .navbar-nav .nav-link[data-bs-toggle=collapse][aria-expanded=true] {
    color: #5b7884;
}

[data-layout=vertical][data-sidebar=dark][data-layout-mode=light] .navbar-nav .nav-link.activebefore {
    background-color: #5b7884 !important;
}

.navbar-menu .navbar-nav .nav-link.active {
    color: #5b7884;
}

.navbar-menu .navbar-nav .nav-sm .nav-link.active {
    color: #5b7884;
}

[data-layout-mode=light] .nav-link:not(.active):hover {
    background-color: var(--vz-vertical-menu-hover-and-active);
    color: #5b7884 !important;
}

.navbar-menu .navbar-nav .nav-sm .nav-link {
    color: #5b7884;
}

.navbar-menu .navbar-nav .nav-link[data-bs-toggle=collapse][aria-expanded=true] {
    color: #5b7884;
}

    .navbar-menu .navbar-nav .nav-link[data-bs-toggle=collapse][aria-expanded=true]:after {
        transform: rotate(90deg);
        color: #5b7884;
    }


.navbar-menu .navbar-nav .nav-link[data-bs-toggle=collapse]:after {
    color: #5b7884;
}

.navbar-menu .navbar-nav .nav-link:hover {
    color: #5b7884;
}

[data-layout=vertical][data-sidebar=dark][data-layout-mode=light] .navbar-nav .nav-link.active:before {
    background-color: #5b7884 !important;
}

.btn-primary {
    --vz-btn-bg: var(--vz-success);
    --vz-btn-border-color: var(--vz-success);
    --vz-btn-hover-bg: var(--vz-success-text-emphasis);
    --vz-btn-hover-border-color: var(--vz-success-text-emphasis);
    --vz-btn-focus-shadow-rgb: var(--vz-success-rgb);
    --vz-btn-active-bg: var(--vz-success-text-emphasis);
    --vz-btn-active-border-color: var(--vz-success-text-emphasis);
}

.serviceDetails p {
    color: #0C9D7C;
    font-size: 0.95rem;
    font-weight: 600;
    margin-top: 0rem;
    margin-bottom: 0rem;
}

.serviceDetails label {
    font-size: 0.7rem;
    font-weight: 500;
}

.grid-btn {
    display: inline-block;
    padding: 3px 12px;
    margin: 0px 3px 0px 3px !important;
    font-size: 0.8em;
    font-weight: bold;
    letter-spacing: 0.5px;
    line-height: 1.5;
    color: var(--vz-badge-color);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    cursor: pointer;
}

.summary-column {
    width: 16.6%;
}

.summary-column-2 {
    width: 14.2857%;
}

.summary-column-3 {
    width: 12.5%;
}