@import url('https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500&display=swap');

:root {
    --font: 'Karla', sans-serif;
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #f92562;
    --red: #e1246d;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #ffff;
    --s: #1d2063;
    --light-1: #f5f6fa;
    --bg: #ecf0f4;
    --light-overlay: #eceefb;
    --mute: #9ba5ca;
    --border: #dee5f7;
    --err_red: linear-gradient(to bottom, #ff5959 0%, #ff3b3b 100%);
    --err_green: linear-gradient(to bottom, #0fce33 0%, #07bf29 100%);
    --bg-img: linear-gradient(to top, #4771bf 0%, #e1246d 100%);
    --dark-bg: #1b2531;
    --dark-card: #283142;
    --transparent-body: #2e2c3f;
    --cust:#5c3878a3;
}

body {
    font-family: var(--font);
    background: var(--bg);
    padding-top: 80px;
    transition: all 0.3s;

}

.susErr {
    background-color: #e0516f;
    color: #fff;
    padding: 6px;
}

.login_form h1 {
    font-size: 20px;
}

body.login {
    padding-top: 0px;
}

.side-menu li .fa {
    font-size: 13px;
    padding-top: 9px;
}

button.login {
    background: #5a172330;
    display: block;
    color: var(--light);
    width: 100%;
    border-radius: 40px;
    padding: 12px 0;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 32px;
    outline: none;
    border: 1px solid #360a0a0d;
    transition: all 0.2s;
}

button.login:hover {
    background: #ffffff52;
    color: var(--light);
    border: 1px solid #360a0a0d;
    box-shadow: 0px 0px 15px #0000002b;
    transition: all 0.2s;
}

button {
    outline: 0;
    border: 0;
}

.form-field {
    margin-bottom: 16px;
    width: 100%;
    position: relative;
}

.form-field .icon {
    position: absolute;
    background: var(--light);
    color: var(--gray);
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    height: 100%;
    width: 40px;
    justify-content: center;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
a.fg-button.ui-button.ui-state-default.ui-state-disabled {
    background: #d54c8a;
}
.previous,.next,.last,.first  {
    background: #9780a9!important;
}
.form-field .icon:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: 12px solid transparent;
    border-left: 12px solid var(--light);
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translateY(-50%);
}

.form-field input {
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-align: left;
    padding-left: 58px;
    border-radius: 5px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--light);
    outline: none;
    transition: all 0.2s;
}

.form-field input::placeholder {
    color: var(--light);
}

.form-field input:hover,
.form-field input:focus {
    background: var(--light);
    color: var(--pink);
    transition: all 0.2s;
}

.form-field input:hover::placeholder {
    color: var(--gray);
}

.login_content {
    width: 400px;
    border: 1px solid rgb(255 255 255 / 15%);
    box-shadow: 0px 5px 10px #40076a24;
    border-radius: 5px;
    background: #ffffff2b;
}

.login_content img {
    width: 140px;
    margin: 0 auto 15px auto;
    display: block;
}

.login_area {
    background-image: var(--bg-img);
}

.login_form {
    flex-flow: column;
}

.login_form .login_err span {
    color: var(--light) !important;
    margin-top: 15px;
    display: block;
    max-width: 400px;
    text-align: center;
}

.sidebar {
    width: 300px;
    height: 100vh;
    background-image: var(--bg-img);
    background-repeat: repeat-x;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    -webkit-box-shadow: 20px 0 20px -20px #d3d7e9;
    -moz-box-shadow: 20px 0 20px -20px #d3d7e9;
    box-shadow: 20px 0 20px -20px #d3d7e9;
    -webkit-transition: left .3s ease, width .3s ease;
    transition: left .3s ease, width .3s ease;
}

.navbar {
    justify-content: center;
    text-align: center;
}

.main_menu_side li,
.main_menu_side ul {
    list-style: none;
}

.main_menu_side ul {
    padding: 0;
}

.main_menu_side li a {
    color: var(--light) !important;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
}

.main_menu_side li {
    padding: 5px 10px;
    width: 100%;
    text-align: center;
}

.main_menu_side li a {
    display: flex;
    justify-content: space-between;
    transition: .3s;
}

.main_menu_side li a:hover {
    padding-left: 10px;
}

.main_menu_side ul.child_menu li a {
    font-size: 14px;
    font-weight: 400;
    padding: 10px 10px 10px 20px;
    border-radius: 4px;
    transition: .3s;
}

.main_menu_side ul.child_menu li a:hover {
    background: #ffffff38;
    padding-left: 10px;
}

.side-menu li .fa {
    font-size: 13px;
    padding-top: 9px;
    margin-right: 10px;
    transition: .3s;
}

.child_menu {
    display: none;
}

.side-menu .active .fa-chevron-right {
    transform: rotate(90deg);
}

.sidebar img {
    width: 120px !important
}

.profile_info {
    text-align: center;
    color: var(--light);
    line-height: 5px;
    padding: 20px 0 5px 0;
    background: rgb(0 0 0 / 15%);
}

.user-profile img {
    width: 40px;
    background-image: var(--bg-img);
    padding: 1px;
    border-radius: 50px;
    border: 2px solid #d5d5d5;
}

.navbar.nav_title {
    height: 60px;
    background: hsl(0deg 0% 100% / 14%);
}

.header-area {
    position: fixed;
    height: 50px;
    width: calc(100% - 320px);
    background: var(--light);
    right: 0;
    top: 0;
    transition: all .3s ease-in-out;
    box-shadow: 0px 3px 3px -1px rgb(10 22 70 / 10%), 0px 0px 1px 0px rgb(10 22 70 / 6%) !important;
    padding: 0 20px;
    margin: 10px;
    border-radius: 5px;
    z-index: 88;
    transition: all 0.3s;
}

.navbar-nav.navbar-right .dropdown-menu {
    top: 126% !important;
    border-radius: 6px;
    -webkit-box-shadow: 0 10px 30px 0 rgb(31 45 61 / 10%);
    box-shadow: 0px 3px 3px -1px rgb(10 22 70 / 10%), 0px 0px 1px 0px rgb(10 22 70 / 6%) !important;
    background: #fafafa;
    border: 1px solid #e0e6ed;
    z-index: 899;
    box-shadow: none;
    padding: 0.35rem 0;
    transition: top 0.3s ease-in-out 0s, opacity 0.3s ease-in-out 0s, visibility 0.3s ease-in-out 0s;
    display: block;
    width: 200px;
    right: 0;
    opacity: 0;
    visibility: hidden;
    display: block !important;
    transform: none !important;
    position: absolute;
}

.dropdown-toggle::after {
    display: none;
}

.dropdown-menu.dropdown-usermenu li {
    padding: 10px;
    border-bottom: 1px solid #d5d5d5;
}

.dropdown-menu.dropdown-usermenu li a {
    text-decoration: none;
    color: var(--gray-dark);
    font-size: 15px;
    font-weight: 500;
}

.overview img {
    width: 40px;
    border-radius: 50px;
    margin-right: 5px;
}
.noteExtraInfo{
    font-size: 10px;
}
.noteExtraInfo {
    font-size: 11px;
    position: relative;
    top: -5px;
    display: block;
    left: 6px;
}
#notificationItemsTabContent .dropdown-menu.dropdown-usermenu li {
    padding: 0px 10px;
    border-bottom: 1px solid #d5d5d5;
}
.overview {
    padding: 5px 10px !important;
    background-image: var(--bg-img);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: var(--light);
    position: relative;
    background: #233;
}

.navbar-nav.navbar-right .open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    top: 100% !important;
}

.nav-sm .sidebar {
    width: 0px;
}

.nav-sm .header-area {
    width: calc(100% - 20px);
}

.p_title_right_content {
    display: flex;
}

.p_title_right_content .db_right_item {
    display: flex;
    margin: 0 0 0 6px;
    padding: 0;
    height: auto;
    align-items: center;
}

.text-muted {
    color: var(--mute) !important;
}

.p_title_right_content .db_right_item button {
    padding: 0;
    margin: 0;
    width: 102px !important;
    background: var(--border);
    border-radius: 0 7px 7px 0;
    font-size: 12px;
    padding: 0.6rem 0.75rem;
    color: var(--gray-dark);
    font-weight: normal;
}

.db_right_item .icon {
    padding: 0.375rem 0.75rem;
    margin-bottom: 0;
    font-size: .9375rem;
    font-weight: 400;
    line-height: 1.6;
    color: #9ba5ca;
    text-align: center;
    white-space: nowrap;
    background-color: var(--border);
    color: var(--gray-dark);
    border: 1px solid var(--border);
    border-radius: 3px 0px 0px 3px;
    border-right: 1px solid #02020214;
}

.db_title_container.page_title_area h3 {
    margin: 0;
    font-weight: 400;
    color: var(--bs-gray);
    font-weight: 500;
    font-size: 16px;
}

.content_area {
    margin: 0 0px;
}

.noticationBtn .itembtn div {
    border: 1px solid var(--border);
    padding: 10px;
    border-radius: 5px;
    margin-right: 10px;
    background: var(--light);
    position: relative;
    min-width: 150px;
    text-align: center;
}

body.nav-md {
    margin-left: 300px;
}

body.nav-sm {
    margin-left: 0px;
}

.in_dta {
    margin-bottom: 24px;
    -webkit-box-shadow: 0px 3px 3px -1px rgb(10 22 70 / 10%), 0px 0px 1px 0px rgb(10 22 70 / 6%) !important;
    box-shadow: 0px 3px 3px -1px rgb(10 22 70 / 10%), 0px 0px 1px 0px rgb(10 22 70 / 6%) !important;
    display: flex;
    align-items: center;
    flex-flow: row-reverse;
    justify-content: space-between;
    padding: 10px 20px;
    background: var(--light);
    border-radius: 5px;
    transition: .3s all ease-in;
    cursor: pointer;
}

.dta_icon {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-image: var(--bg-img);
    color: var(--light);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-weight: 500;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    position: relative;
    height: 3rem;
    width: 3rem;
    overflow: hidden;
    border-radius: 50px;
    transition: 3s all ease-in;
}

.dta_icon:after,
.dta_icon:before {
    content: "";
    position: absolute;
    width: 8px;
    height: 54px;
    background-color: rgba(255, 255, 255, 0.1);
    left: 16px;
    -webkit-transform: rotate(32deg);
    transform: rotate(32deg);
    top: -5px;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
}

.dta_icon:after {
    left: -12px;
    width: 12px;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

.data_con h2 {
    font-size: 20px;
    margin: 0;
}

.data_con h3 {
    font-size: 15px;
}

.noticationBtn {
    margin-bottom: 15px;
}

.in_dta:hover {
    box-shadow: 0 0.75rem 1.5rem rgb(18 38 63 / 18%);
    transform: translate3d(2px, 2px, 2px);
}

.in_dta:hover .dta_icon {
    background-image: linear-gradient(45deg, #ff0034, #002aff);
}
.in_dta .allocated-business.dta_icon {
    background-image: linear-gradient(45deg, #ff0034, #002aff);
}

.dta_icon span {
    font-size: 18px;
}

.actionStatus {
    position: relative;
}

.actionStatus button {
    text-align: right;
    padding-right: 25px;
    color: var(--gray-dark);
    box-shadow: 0px 3px 3px -1px rgb(10 22 70 / 10%), 0px 0px 1px 0px rgb(10 22 70 / 6%) !important;
    background: var(--light);
    display: none;
}

#dropdownMenuButton span {
    margin-left: 10px;
    transition: .3s all ease-in;
}

#dropdownMenuButton.on span {
    transform: rotate(90deg);
}

.business_tab_info.dashiitem.on {
    top: 50px;
    visibility: visible;
    opacity: 1;
    pointer-events: all;
}

.dashboardCard {
    background: var(--light);
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    display: none;
    box-shadow: 0px 3px 3px -1px rgb(10 22 70 / 10%), 0px 0px 1px 0px rgb(10 22 70 / 6%) !important;
    overflow: auto;
}

.card-title {
    line-height: 1.2;
    text-transform: capitalize;
    font-weight: 500;
    letter-spacing: .01rem;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    position: relative;
}

#add_edit_dynamic_button_form h3,
#add_edit_payment_form h4 {
    font-size: 18px;
    font-weight: 600;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    margin: 0;
    padding: 10px 0;
}

#add_edit_dynamic_button_form input[type="submit"],
#add_edit_payment_form input[type="submit"] {
    margin-top: 10px;
}

.card-title:before {
    content: "";
    position: absolute;
    left: -10px;
    padding: 2px;
    height: 25px;
    background: var(--cust);
    top: 0px;
}

.dashboardCard table {
    width: 100%;
}

table thead th {
    font-weight: 600;
    font-size: 13px;
    border-bottom: 0;
    padding: 0.75rem;
    border-top: 1px solid #dee2e6;
}

.w-0 {
    min-width: 0 !important;
}

#add_edit_reservation_form label {
    margin-right: 10px !important;
}

table td {
    font-size: 14px;
    font-weight: 400;
    padding: 1rem;
    border-top: 1px solid #dee2e6;
    padding: 0.75rem;
    font-weight: 500;
}
.btn-check:focus+.btn, .btn:focus {
    outline: 0;
    box-shadow: unset;
}
span#slugcopytooltiptxtspan {
    background: #000000a3;
    color: #fff;
    padding: 8px 6px;
    position: relative;
    top: 9px;
    margin-left: 10px;
    border-radius: 5px;
}
#themelight,#darktheme,#transBg{
transition: all 0.15s ease-out 0s;
background: unset;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
border: unset;
color: unset; 
cursor: pointer;
display: unset;
margin-right: unset; 
outline: unset; 
position: unset; 
z-index: unset; 
outline: unset; 
border: 1px solid rgba(0,0,0,.5);
background-position: 0;
background-repeat: no-repeat;
}
#themelight:checked,#darktheme:checked,#transBg:checked {
    background: var(--cust);
    border-color: transparent;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    background-position: 100%;
    background-repeat: no-repeat;
}
.date.datepicker {
    position: relative!important;
}
.tableCard a {
    text-decoration: none;
    color: var(--text-grey);
    font-weight: 500;
}

.dashboardCard h2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dashboardCard button {
    padding: 10px 10px;
    margin: 0;
    background: var(--cust);
    font-size: 15px;
    transition: 0.3s all ease-in-out;
    color: #fff;
}
.user_avatar img {
    border-radius: 50%;
    /* background: red; */
    width: 70px;
}
.dashboardCard button:hover {
    box-shadow: inset -4px 5px 7px #00000047;
}

.cardInfoCards {
    padding: 25px;
    background: var(--light);
    box-shadow: 0px 3px 3px -1px rgb(10 22 70 / 10%), 0px 0px 1px 0px rgb(10 22 70 / 6%) !important;
    border-radius: 5px;
    margin-bottom: 30px;
}
.user_conversion_info {
    display: flex;
    align-items: center;
}
.user_avatar {
    margin-right: 10px;
}
.con_inf p {
    padding: 0;
    margin: 0;
    font-weight: 500;
}
.con_inf h5 {
    margin: 0;
    padding: 0;
}
.con_inf p span {
    /* margin: 11px 0; */
    /* background: #c2d2e194; */
    margin-right: 10px;
    margin-top: 3px;
    display: inline-block;
}
.con_inf p i {
    color: #ee7b93;
    vertical-align: middle;
}
.chatOne h3 {
    text-align: center;
    font-size: 15px;
    background: #7366af;
    padding: 10px;
    border-radius: 5px;
    color: #fff;
    margin-top: 20px;
}
.cardInfoCard {
    overflow: auto;
}

.tabCardItem {
    display: flex;
    flex-wrap: wrap;
}

.bslogo {
    width: 120px;
    height: 120px;
    object-fit: cover;
}

.topbar h2 {
    margin: 0 0 5px 0;
    font-size: 15px;
}

.iconCod.cash img {
    width: 40px;
}

.cardInfoCard h3 {
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
    margin: 0;
}

.tabCardView h3 span {
    font-weight: 400;
}

.tabCardView {
    width: calc(50% - 15px);
    display: flex;
    justify-content: space-between;
    padding: 10px;
    margin-right: 10px;
    border-top: 1px solid #dcdcdc;
    align-items: center;
}

.tabInfo img {
    width: 12px;
    vertical-align: middle
}

#optionoverview ul, .business_tab_info ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

#optionoverview ul span,
.business_tab_info ul a {
    background: transparent;
    border: 0;
    color: var(--text-grey);
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    display: block;
    border-left: 1px solid var(--border);
    border-radius: 0;
    padding: 15px 10px;
    white-space: nowrap;
}

.business_tab_info ul a {
    min-width: 100px;
}

#optionoverview,
.business_tab_info {
    background: var(--light);
    border-radius: 5px;
    box-shadow: 0px 3px 3px -1px rgb(10 22 70 / 10%), 0px 0px 1px 0px rgb(10 22 70 / 6%) !important;
    margin: 0 0 25px 0;
}

#optionoverview ul li.active span {
    background: var(--cust);
    color: var(--light);
}

.noticationBtn .itembtn div span {
    position: absolute;
    top: -12px;
    right: 12px;
    background: var(--cust);
    padding: 2px 0px;
    font-size: 14px;
    border-radius: 50px;
    color: var(--light);
    min-width: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
}

/* .dataTables_wrapper {
    padding: 0px 10px 10px 10px;
    background: var(--light);
    border-radius: 5px;
    box-shadow: 0px 3px 3px -1px rgb(10 22 70 / 10%), 0px 0px 1px 0px rgb(10 22 70 / 6%) !important;
    width: 100%;
    overflow: auto;
    max-height: 70vh;
} */

.x_content {
    padding: 10px 10px 10px 10px;
    background: var(--light);
    border-radius: 5px;
    box-shadow: 0px 3px 3px -1px rgb(10 22 70 / 10%), 0px 0px 1px 0px rgb(10 22 70 / 6%) !important;
    width: 100%;
}

/* .x_content .dataTables_wrapper,.x_content .dashboardCard,.x_content .cardInfoCard */
.x_content .x_content,
.cardunset {
    padding: 0;
    box-shadow: unset !important;
    width: 100%;
    overflow: unset;
    max-height: unset;
    border-radius: unset;
    background: transparent !important;
}

/* .transparent-mode .x_content .x_content,
.dark-mode .x_content .x_content,
.transparent-mode .x_content .dataTables_wrapper,
.transparent-mode .x_content .dashboardCard,
.transparent-mode .x_content .cardInfoCard
.dark-mode .x_content .dataTables_wrapper,
.dark-mode .x_content .dashboardCard,
.dark-mode .x_content .cardInfoCard{
    box-shadow: unset!important;
} */
.dataTables_wrapper {
    overflow: auto;
    padding-bottom: 30px;
    min-height: 50vh;
    max-height: calc(70vh - 35px);
}

.dataTables_wrapper .dataTables_length {
    margin-bottom: 20px;
    padding-top: 20px;
}
.laoderExtra img {
    width: 80px;
    padding: 50px 0;
}
ul.multiselect-container.dropdown-menu {
    z-index: -555;
}
.btn-group.open ul.multiselect-container.dropdown-menu {
    z-index: 55;
    top: 40px!important;
}
.modal textarea {
    height: 70px;
}
.modal .form-group label {
    margin: 0px 0 !important;
}
.by-btn {
    background: #d04860;
    border-radius: 10px;
    color: #fff;
    padding: 5px 20px;
    outline: none;
    border: 0;
}

.table_support {
    justify-content: end;
}
.loginLeftcontent {
    background: rgba(0, 0, 0, 0.28);
    padding: 3em;
    text-align: center;
    border-radius: 25px 0 0 25px;
    text-transform: uppercase;
    position: relative;
}
.loginLeftcontent h2, .loginLeftcontent .h2, .loginLeftcontent p {
    color: #fff;
}
.signLogo a {
    border: 1px solid #fff;
    color: #fff;
    margin-right: 10px;
}
.loginLeftcontent:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 5px;
    height: 100%;
    display: block;
    background: linear-gradient(to top, rgba(0, 128, 0, 0.7), rgba(0, 0, 255, 0.6), rgba(75, 0, 130, 0.6), rgba(238, 130, 238, 0.6), rgba(255, 0, 0, 0.6), rgba(255, 165, 0, 0.6), rgba(255, 255, 0, 0.6));
    background: -webkit-gradient(to top, rgba(0, 128, 0, 0.7), rgba(0, 0, 255, 0.6), rgba(75, 0, 130, 0.6), rgba(238, 130, 238, 0.6), rgba(255, 0, 0, 0.6), rgba(255, 165, 0, 0.6), rgba(255, 255, 0, 0.6));
    background: -ms-linear-gradient(to top, rgba(0, 128, 0, 0.7), rgba(0, 0, 255, 0.6), rgba(75, 0, 130, 0.6), rgba(238, 130, 238, 0.6), rgba(255, 0, 0, 0.6), rgba(255, 165, 0, 0.6), rgba(255, 255, 0, 0.6));
}
.loginRightcontent {
    padding: 3em;
    background: #fff;
    border-radius: 0 25px 25px 0;
}
.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}
.loginRightcontent .input-group-text {
    padding: 10px;
  }
  .loginRightcontent .input-group-text {
    color: #ffffff;
    background-color: #f72878;
    border: 1px solid #f62b79;
    border-radius: 0.25rem;
  }
#edit_business_content .mytable .btn-danger,
#edit_business_content .mytable .btn-success {
    border: 0;
    width: auto !important;
    padding: 0 0.75rem !important;
    display: inline-block;
    padding: 3px 5px 4px;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 50px;
    min-width: 100px;
    font-size: 15px;
    margin: 0;
}
.date.datetimepicke
#edit_business_content .mytable input.btn-primary {
    /* color: #fff !important; */
    /* background: var(--primary-bg-color) !important; */
    /* border-color: var(--primary-bg-color) !important; */
    width: auto !important;
    min-width: 150px;
    padding: 15px 0 !important;
    font-size: 15px;
    border: 0px;
    background: #d04860;
    color: #fff;
    margin: 0;
}

#edit_business_content .mytable input.btn-primary:focus {
    outline: none;
    box-shadow: unset;
}

#edit_business_content .mytable .btn-danger:focus,
#edit_business_content .mytable .btn-success:focus {
    outline: 0;
    box-shadow: unset;
}

#edit_business_content .mytable .btn-danger {
    color: #e82646 !important;
    background-color: rgba(255, 56, 43, 0.1) !important;
}

#edit_business_content .mytable .btn-success {
    background-color: rgba(0, 230, 130, 0.1) !important;
    color: #09ad95 !important;
}

.table_support button {
    width: auto;
}

.dataTables_filter {
    padding-top: 15px;
}
.btn-12 {
    position: relative;
    right: 20px;
    bottom: 20px;
    border: none;
    box-shadow: none;
    width: 130px;
    height: 40px;
    line-height: 42px;
    perspective: 230px;
}
.custom-btn {
    width: 130px;
    height: 40px;
    color: #fff;
    border-radius: 5px;
    padding: 10px 25px;
    font-family: "Lato", sans-serif;
    font-weight: 500;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    outline: none;
}
.btn-12 span:nth-child(1) {
    box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001;
    transform: rotateX(90deg);
    transform-origin: 50% 50% -20px;
}
.btn-12 span {
    background: #f72878;
    background: linear-gradient(0deg, #f72878 0%, #fb0262 100%);
    display: block;
    position: absolute;
    width: 100%;
    height: 40px;
    box-shadow: inset 2px 2px 2px 0px rgb(255 255 255 / 50%), 7px 7px 20px 0px rgb(0 0 0 / 10%), 4px 4px 5px 0px rgb(0 0 0 / 10%);
    border-radius: 5px;
    margin: 0;
    text-align: center;
    box-sizing: border-box;
    transition: all 0.3s;
}
.btn-12 span:nth-child(1) {
    box-shadow:
     -7px -7px 20px 0px #fff9,
     -4px -4px 5px 0px #fff9,
     7px 7px 20px 0px #0002,
     4px 4px 5px 0px #0001;
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-transform-origin: 50% 50% -20px;
    -moz-transform-origin: 50% 50% -20px;
    transform-origin: 50% 50% -20px;
  }
  .btn-12 span:nth-child(2) {
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transform: rotateX(0deg);
    -webkit-transform-origin: 50% 50% -20px;
    -moz-transform-origin: 50% 50% -20px;
    transform-origin: 50% 50% -20px;
  }
  .btn-12:hover span:nth-child(1) {
    box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
     7px 7px 20px 0px rgba(0,0,0,.1),
     4px 4px 5px 0px rgba(0,0,0,.1);
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  .btn-12:hover span:nth-child(2) {
    box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
     7px 7px 20px 0px rgba(0,0,0,.1),
     4px 4px 5px 0px rgba(0,0,0,.1);
   color: transparent;
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
  }
  .custom-btn:hover{
    color:#fff;
  }
.loginLeftcontent img {
    width: 130px;
    margin-bottom: 10px;
}
.modal.in {
    opacity: 1;
}

.dataTables_wrapper .dataTables_paginate {
    margin-top: 20px;
}

.heightfix {
    min-height: 400px;
}

.heightfix h2,
.extrafix h2 {
    justify-content: left;
}

.extrafix {
    height: 100%;
}

.row.order_detail_inn {
    margin-bottom: 30px;
}

.dataTables_paginate a {
    text-decoration: none;
    padding: 4px 0px;
    margin-left: 10px;
    background: var(--cust);
    color: var(--light);
    border-radius: 50px;
    min-width: 72px;
    display: inline-block;
    text-align: center;
    font-size: 15px;
}

tr.current-booking-row {
    background: var(--green);
    font-weight: 900;
}

.cancel-booking-row td {
    color: #a7a6a6;
}

.dark-mode .btn-group.open .dropdown-menu {
    background: var(--dark-bg);

}

.transparent-mode .btn-group.open .dropdown-menu {
    background: var(--transparent-body);
}

.transparent-mode .multiselect.dropdown-toggle,
.dark-mode .multiselect.dropdown-toggle {
    color: #fff;
}

.mytable .btn {
    background: transparent;
    color: #777;
    font-size: 18px;
    padding-top: 0;
    padding-bottom: 0;
    /* background: #2a3f54; */
    overflow: hidden;
    display: inline-block;
    padding: 2px 5px;
    height: 30px;
    border: 0;
    margin-left: 20px;
    border: 1px solid #777;
    padding: 5px;
    line-height: 0;
    text-align: center;
}
span.d-table-invoice-business-pay {
    background: #ffcc00;
    color: #000;
    padding: 3px 5px;
    border-radius: 2px;
}
span.d-table-invoice-bookyup-pay {
    background: #00c851;
    color: #fff;
    padding: 3px 5px;
    border-radius: 2px;
}
form#log_range_form {
    display: flex;
}

a.collapse-link {
    display: none;
}

.table_support button {
    margin: 0 20px 0 10px;
    background: #d74b64;
    border-color: #92293b;
    color:#fff;
}

.table_support input[type="file"] {
    width: 100px !important;
    border-radius: 0;
}
div#mainOdrDetailsLoaderContent {
    text-align: center;
    padding: 50px 0;
}

#mainOdrDetailsLoaderContent img {
    width: 80px;
}
.x_title h2 {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 16px !important;
    margin: 0;
    border-bottom: 1px solid #e9e9e9;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

/* .content_area form,
.card_wrapper {
    padding: 15px;
    background: var(--light);
    border-radius: 5px;
    box-shadow: 0px 3px 3px -1px rgb(10 22 70 / 10%), 0px 0px 1px 0px rgb(10 22 70 / 6%) !important;
} */

.card_wrapper {
    padding: 15px;
    background: var(--light);
    border-radius: 5px;
    box-shadow: 0px 3px 3px -1px rgb(10 22 70 / 10%), 0px 0px 1px 0px rgb(10 22 70 / 6%) !important;
}

.x_title.common_title {
    background: var(--light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px 10px 20px;
    box-shadow: 0px 3px 3px -1px rgb(10 22 70 / 10%), 0px 0px 1px 0px rgb(10 22 70 / 6%) !important;
    margin-bottom: 20px;
    border-radius: 5px;
}

.common_title h2 {
    padding: 0;
    margin: 0;
    border-bottom: none;
}

.table_support .nav {
    align-items: center;
}

.table_support input[type="button"] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.table_support input[type="file"]:focus {
    border-color: transparent;
    outline: 0;
    box-shadow: unset;
}

.modal {
    z-index: 888888;
}
.modal.fade.in:after {
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    background: #2c2c3030;
    top: 0;
    z-index: -4;
    backdrop-filter: blur(1px);
}
.tableCard {
    max-height: 50vh;
    overflow: auto;
}

.modal .close {
    position: absolute;
    width: auto;
    background: var(--red);
    color: var(--light);
    height: auto;
    padding: 1px 10px;
    right: -15px;
    top: -14px;
    font-size: 18px;
    box-shadow: 1px 2px 4px #00000014;
    border-radius: 50px;
}

.multiselect-search {
    padding: 10px !important;
    border-radius: 5px !important;
    /* position: sticky; */
    box-shadow: inset 2px 2px 3px #00000030;
}

.body {
    min-height: calc(100vh - 140px);
    margin-bottom: 20px;
    /* overflow: auto; */
}
footer {
    padding: 10px;
    background: var(--light);
    border-radius: 4px;
}
.review_extrax table tr td:nth-child(7),.extraReviw tr td:nth-child(2){
    width: 300px;
    white-space: normal;
}
.mytable .odd {
    background-color: transparent !important;
}

.table_support .nav a,
.card_com .x_content .x_title a {
    padding: 5px 9px;
    background: var(--cust);
    color: var(--light);
    /* border-radius: 100%; */
    color: #fff;
    margin-right: 10px;
    box-shadow: inset 0px 0px 10px #00000063;
    border-radius: 2px;
}

.szone {
    padding: 10px 20px;
    background-color: transparent !important;
    color: #09ad95 !important;
    margin-left: 10px;
    border-radius: 5px;
    border: 1px solid #09ad95;
    transition: .3s;
    cursor: pointer;
}
ul.tab_menu li.hidden.active {
    display: block;
}
.hidden {
	display: none;
}
ul.tab_menu li {
    min-width: 100px;
}
.main-tabs {
    display: flex;
}
.viewall{
    display: flex;
    justify-content: center;
}
.viewall b {
    width: 5px;
    height: 5px;
    background: #000;
    border-radius: 50%;
    display: block;
    margin-right: 2px;
}
.tabViewPart{
    position: relative;
}
a.extraView {
    padding: 15px 10px 0 10px;
    line-height: 15px;
    text-transform: capitalize;
    background: #3d2153a3;
    color: #fff;
    position: relative;
}
#item_list_extra ul {
    margin: 0;
    padding: 0;
    display: block;
}

#item_list_extra ul li a {
    background: transparent;
    border: 0;
    /* background: #000; */
}
div#item_list_extra {
    position: absolute;
    background: #d04860;
    right: 0px;
    top: 48px;
    z-index: 55;
    border-radius: 5px;
}
#item_list_extra ul li {
    display: block;
    background: transparent;
    padding: 6px 16px;
    border-bottom: 1px solid #f5f5f54a;
}
div#optionoverview ul {
    display: block !important;
}

#demo-form4 table th {
    position: unset;
}

#add_edit_zone_new_form .w-md-50 label input {
    position: absolute;
    opacity: 0;
}

#add_edit_zone_new_form .w-md-50 label:first-child {
    background: transparent;
    border: 0px solid var(--border);
}

table.dataTable thead th,
table.dataTable thead td {
    border-bottom: unset;
    padding: 10px 7px;
    white-space: nowrap;
}

.modal-header h3 {
    font-size: 20px;
}

.modal-header {
    padding: 10px 10px 0 10px;
}

table.dataTable tbody th,
table.dataTable tbody td {
    padding: 6px 7px;
    white-space: nowrap;
}


.nav-menu-list {
    height: 100%;
    overflow: hidden;
    transition: .3s all;
}

.nav-menu-list {
    overflow: auto;
}


::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 6px rgb(15 63 85);
    border-radius: 10px;
}

.nav-menu-list::-webkit-scrollbar-track,
.nav-menu-list::-webkit-scrollbar-thumb {
    box-shadow: unset
}

.nav-menu-list:hover::-webkit-scrollbar-track,
.nav-menu-list:hover::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

.card_com .x_content .x_title {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    background: var(--light);
    align-items: center;
    border-radius: 5px;
}

.card_touch {
    background: var(--light);
    min-height: 300px;
    margin: 20px 0;
    border-radius: 5px;
    padding: 20px 30px;
}

.card_touch h2 {
    font-size: 20px;
}

.card_touch p {
    margin: 0px;
    padding: 5px;
    border-bottom: 1px solid #ddd;
}

.modal-dialog {
    top: 10%;
}

.btn_a {
    background: none repeat scroll 0 0 #f5f5f5;
    border: 3px solid #ffffff;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
    color: #2f2f2f;
    font-family: Roboto;
    font-size: 12px;
    letter-spacing: 0.3px;
}

.extracardbtn .btn_a {
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
    color: #333;
    font-weight: 600;
}

.chbox h4 {
    padding: 10px;
    background: var(--light);
    margin-bottom: 0px;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 500;
    margin-top: 10px;
}
.conVe.user {
    display: flex;
    justify-content: start;
}
.conVe.admin {
    display: flex;
    justify-content: end;
}
.chbox h4.user {
    border-radius: 50px 50px 50px 0px;
}
.chbox h4.admin {
    border-radius: 50px 50px 0px 50px;
}
.mainCon strong {
    font-weight: 500;
    font-size: 15px;
    margin: 0 2px;
}
.conVe {
    display: flex;
    justify-content: space-between;
}

.form-group label {
    font-size: 16px;
    font-weight: 800;
    margin: 8px 0 !important;
}

.labelBtn {
    background: var(--light);
    padding: 10px 10px;
    border-radius: 5px;
    display: flex;
    justify-content: end;
    margin-bottom: 20px;
    align-items: center;
}

.form-group label span {
    color: var(--red);
    font-size: 14px;
}

.main_menu_side li ul {
    background: #5c3878a3;
    /* padding: 10px; */
    margin-top: 10px;
    border-radius: 5px;
}

.main_menu_side li ul li {
    padding: 0;
    border-bottom: 1px solid #dddddd26;
}

.form-group label {
    width: unset;
    min-width: 200px;
}

table th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fbfbfb !important;
}

a {
    color: #000000;
    text-decoration: none;
    cursor: pointer;
}

form .btn-success {
    color: #fff;
    /* background-color: var(--green);
    border-color: var(--green);
    padding: 10px;
    min-width: 200px; */
}

form h2 {
    font-size: 18px;
    margin-top: 20px;
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
}

span.bs-inactive-btn {
    border: 1px dashed #dc3545;
    color: #dc3545;
    padding: 3px;
    margin-left: 10px;
    border-radius: 4px;
}

span.bs-active-btn {
    border: 1px dashed #198754;
    color: #198754;
    padding: 3px;
    margin-left: 10px;
    border-radius: 4px;
}

.cardact {
    padding: 0 0 10px 0;
    border-bottom: 1px solid rgb(0 0 0 / 21%);
    /* border-top: 1px solid rgb(0 0 0 / 21%); */
    background: #ecf0f41f;
    /* box-shadow: 0px 0px 10px #d7d7d7; */
    margin-bottom: 20px;
}

form h4 {
    font-size: 15px;
    font-weight: 600;
    margin: 20px 0;
}

#add_edit_client_app_token_form {
    display: flex;
    align-items: center;
}

#add_edit_client_app_token_form input {
    padding: 9px;
}

#add_edit_client_app_token_form input[type="button"] {
    padding: 10px;
    border-radius: 0 2px 2px 0px;
}

button.owl-prev {
    position: absolute;
    left: 0;
    height: 100%;
    top: 0;
    background: var(--cust) !important;
    width: 50px;
    font-size: 50px;
}

button.owl-next {
    position: absolute;
    right: 0;
    height: 100%;
    top: 0;
    background: var(--cust) !important;
    width: 50px;
    font-size: 50px;
}

.owl-next span,
.owl-prev span {
    font-size: 30px;
    color: var(--light);
    line-height: 30px;
}

.open_close_card {
    background: transparent !important;
    padding: 0px;
}

.open_close_card .day_div {
    /* background: var(--light); */
    padding: 15px;
    margin-bottom: 15px;
    /* box-shadow: 0px 3px 3px -1px rgb(10 22 70 / 10%), 0px 0px 1px 0px rgb(10 22 70 / 6%) !important; */
    /* border-radius: 5px; */
}

ul.multiselect-container.dropdown-menu {
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-overflow-scrolling: touch;
    border-top-width: 0 !important;
    width: auto;
    outline: 0;
    margin: 0 -1px;
    min-width: calc(100% + 2px);
    width: calc(100% + 2px);
    border-radius: 0 0 0.28571429rem 0.28571429rem;
    box-shadow: 0 2px 3px 0 rgb(34 36 38 / 15%);
    -webkit-transition: opacity .1s ease;
    transition: .1s ease;
    display: block;
    opacity: 0;
    max-height: 0;
}

#demo-form2 input[type="submit"],
#demo-form2 input[type="button"],
#demo-form2 button,
#demo-form2 .btn {
    margin-top: 15px;
}

.switch_section button {
    width: 100%;
}

.btn-group.open .dropdown-menu {
    max-height: 16.02857142rem;
    width: 100%;
    top: 60px;
    opacity: 1;
    overflow-y: visible;
}

.multiselect.dropdown-toggle {
    border: 1px solid #ced4da;
    padding: 0.375rem 0.75rem;
}

#menuaccord {
    border: 1px solid #dddd;
    padding: 10px;
    border-radius: 5px;
}

.open_close_card .day_div h3 {
    font-size: 20px;
    font-weight: 600;
}

section.menucat_class {
    padding: 5px 10px;
    box-shadow: 0px 0px 10px #00000021;
    margin-bottom: 14px;
    padding: 10;
    border-radius: 5px;
    font-size: 15px;
}

#menuaccord a {
    text-decoration: none;
    color: #000;
    text-transform: capitalize;
    font-weight: 600;
}

#menuaccord input {
    margin-right: 10px;
}

.open_close_card_open_info {
    display: flex;
    justify-content: space-between;
    font-weight: 500;
    margin-bottom: 10px;
}

/* Shaft 2 */
/* Universal styling */
[class^=shaft-load] {
    margin: 50px auto;
    width: 60px;
    height: 30px;
}

[class^=shaft-load]>div {
    float: left;
    background: #39374e;
    height: 100%;
    width: 5px;
    margin-right: 1px;
    display: inline-block;
}

[class^=shaft-load] .shaft1 {
    -webkit-animation-delay: 0.05s;
    -moz-animation-delay: 0.05s;
    -o-animation-delay: 0.05s;
    animation-delay: 0.05s;
}

[class^=shaft-load] .shaft2 {
    -webkit-animation-delay: 0.1s;
    -moz-animation-delay: 0.1s;
    -o-animation-delay: 0.1s;
    animation-delay: 0.1s;
}

[class^=shaft-load] .shaft3 {
    -webkit-animation-delay: 0.15s;
    -moz-animation-delay: 0.15s;
    -o-animation-delay: 0.15s;
    animation-delay: 0.15s;
}

[class^=shaft-load] .shaft4 {
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -o-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

[class^=shaft-load] .shaft5 {
    -webkit-animation-delay: 0.25s;
    -moz-animation-delay: 0.25s;
    -o-animation-delay: 0.25s;
    animation-delay: 0.25s;
}

[class^=shaft-load] .shaft6 {
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    -o-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

[class^=shaft-load] .shaft7 {
    -webkit-animation-delay: 0.35s;
    -moz-animation-delay: 0.35s;
    -o-animation-delay: 0.35s;
    animation-delay: 0.35s;
}

[class^=shaft-load] .shaft8 {
    -webkit-animation-delay: 0.4s;
    -moz-animation-delay: 0.4s;
    -o-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

[class^=shaft-load] .shaft9 {
    -webkit-animation-delay: 0.45s;
    -moz-animation-delay: 0.45s;
    -o-animation-delay: 0.45s;
    animation-delay: 0.45s;
}

[class^=shaft-load] .shaft10 {
    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    -o-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

.shaft-load2>div {
    background-color: #433942;
    -webkit-animation: loading2 1.5s infinite ease-in-out;
    -moz-animation: loading2 1.5s infinite ease-in-out;
    -o-animation: loading2 1.5s infinite ease-in-out;
    animation: loading2 1.5s infinite ease-in-out;
    -webkit-transform: scaleY(0.05) translateX(-5px);
    -moz-transform: scaleY(0.05) translateX(-5px);
    -ms-transform: scaleY(0.05) translateX(-5px);
    -o-transform: scaleY(0.05) translateX(-5px);
    transform: scaleY(0.05) translateX(-5px);
}

.loader {
    padding: 50px 0;
}

ul.tab_menu li.active {
    background: var(--cust);
    color: #fff;
}

#settingthemes {
    background: var(--cust);
    padding: 11px 8px;
    /* margin-left: 21px; */
    position: relative;
    z-index: 444;
    color: #fff;
    top: 0 !important;
    border-radius: 10px 0px 0px 10px;
    line-height: 3px;
}

#settingthemes .fa {
    font-size: 20px;
}

.dropdown-toggle {
    text-decoration: none;
}

.demo_changer {
    z-index: 99999;
    position: fixed;
    right: -310px;
    font-weight: 400 !important;
    height: 100%;
}
.bgtrns{
    background: transparent!important;
    color: var(--gray-dark)!important;
    padding: 0!important;
}
.demo_changer {
    top: 0px;
}

.demo_changer,
.demo_changer p {
    color: #263871 !important;
}

.demo_changer .form_holder {
    background: #fff;
    border-radius: 0;
    cursor: pointer;
    float: right;
    font-size: 12px;
    padding: 0 7px;
    width: 270px;
    box-shadow: 0px 8px 14.72px 1.28px rgb(130 130 134 / 20%);
    border-left: 1px solid #e9edf4;
}

.switcher-wrapper:after {
    z-index: 900;
    position: absolute;
    /* content:"" */
    /* background: #ddd0; */
    width: 100%;
    height: 100%;
    top: 0;
    backdrop-filter: blur(10px);
}

.predefined_styles {
    padding: 0 5px;
    text-align: center;
}

.demo_changer h4 {
    font-size: 14px;
    padding-bottom: 0;
    text-align: left;
    padding: 10px;
    font-weight: 600;
    border-bottom: 1px solid #e9edf4;
    background: #ebeff8;
    border-top: 1px solid #e9edf4;
    margin: 10px 0 !important;
    text-transform: uppercase;
}

.switch_section {
    width: 100%;
    height: auto;
    list-style: none;
    font-size: 1.1em;
    margin: 0 auto;
    padding: 0px 22px;
}

.switch-toggle {
    padding: 3px 0;
    font-size: 16px;
}

.demo_changer .switch_section p {
    margin: 0px;
}

.customval {
    display: none;
}

.onoffswitch2-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    height: 15px;
    padding: 0;
    line-height: 16px;
    border: 1px solid #CCCCCC;
    border-radius: 15px;
    background-color: #FFFFFF;
    transition: background-color 0.3s ease-in;
}

.onoffswitch2-checkbox:checked+.onoffswitch2-label {
    background-color: #6c5ffc;
}

.dark-mode {
    background: var(--dark-bg);
    color: var(--light)
}
.x_title h2 .fa {
    margin-right: 10px;
}
.dark-mode .header-area,
.dark-mode .labelBtn,
.dark-mode .chbox h4,
.dark-mode .x_content,
.dark-mode .x_title.common_title,
.dark-mode .card_wrapper,
.dark-mode footer,
.dark-mode .cardInfoCards,
.dark-mode .business_tab_info,
.dark-mode .main_menu_side li ul,
.dark-mode .dashboardCard,
.dark-mode .noticationBtn .itembtn div,
.dark-mode .in_dta,
.dark-mode #optionoverview ul span,
.dark-mode .business_tab_info ul a,
.dark-mode #optionoverview,
.dark-mode .business_tab_info,
.dark-mode .demo_changer .form_holder,
.dark-mode .open_close_card .day_div {
    background: rgba(0, 0, 0, 0.2);
    border: inherit !important;
    box-shadow: 0 4px 25px 0 rgb(168 180 208 / 10%) !important;
}

.transparent-mode .mytable a,
.transparent-mode .mytable a {
    color: #fff;
}

.dark-mode .dta_icon {
    background: var(--bg-img);
}

.transparent-mode .order_all_details,
.dark-mode .order_all_details {
    background: transparent;
    box-shadow: unset !important;
}
.select_zone:checked+.szone {
    z-index: 1;
    background: rgb(25 135 84) !important;
    color: #fff!important;
}


#add_edit_zone_new_form {
    padding-top: 10px;
}

.transparent-mode .header-area,
.transparent-mode .chbox h4,
.transparent-mode .labelBtn,
.transparent-mode .x_content,
.transparent-mode .x_title.common_title,
.transparent-mode .card_wrapper,
.transparent-mode footer,
.transparent-mode .cardInfoCards,
.transparent-mode .business_tab_info,
.transparent-mode .main_menu_side li ul,
.transparent-mode .dashboardCard,
.transparent-mode .noticationBtn .itembtn div,
.transparent-mode .in_dta,
.transparent-mode #optionoverview ul span,
.transparent-mode .business_tab_info ul a,
.transparent-mode #optionoverview,
.transparent-mode .business_tab_info,
.transparent-mode .demo_changer .form_holder,
.transparent-mode .open_close_card .day_div {
    background: rgba(0, 0, 0, 0.2);
    border: inherit !important;
    box-shadow: 0 4px 25px 0 rgb(168 180 208 / 10%) !important;
}

.dark-mode .x_content .x_content,
.transparent-mode .x_content .x_content {
    background: transparent !important;
    box-shadow: unset !important;
}

.transparent-mode table,
.dark-mode table {
    color: var(--light);
    border-color: transparent;
}

.transparent-mode .dataTables_paginate a,
.dark-mode .dataTables_paginate a {
    background: transparent;
    color: #fff;

}

.transparent-mode table th,
.dark-mode .table th,
.transparent-mode #settingthemes .fa,
.dark-mode #settingthemes .fa {
    color: var(--cust) !important;
}

.transparent-mode .dta_icon {
    background: var(--cust);
}

.dark-mode .hamburger .line {
    background: #fff;
}
.dark-mode #themelight, .dark-mode #darktheme, .dark-mode #transBg,
.transparent-mode #themelight, .transparent-mode #darktheme
{
    border-color: #fff!important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.transparent-mode .hamburger .line{
    background: var(--bg-img);
}
.transparent-mode table th,
.dark-mode table th {
    background: rgba(255, 255, 255, 0.1) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
}

.dark-mode .mytable a,
.transparent-mode .mytable a {
    color: #fff;
    text-decoration: none;
}
.light-mode .sidebar {
    background-image: linear-gradient(to top, #4771bf 0%, #e1246d 100%);
}

.transparent-mode .sidebar,
.dark-mode .sidebar {
    background: transparent;
    box-shadow: 20px 0 20px -20px #000000cc;
    backdrop-filter: blur(15px);
}

.transparent-mode table.dataTable tbody tr,
.dark-mode table.dataTable tbody tr {
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0);
    border-bottom: 1px solid rgba(255, 255, 255, 0);
}

.mbtntable {
    margin-right: 5px;
}

.accept_order.btn.btn-success,
a.decline_order.btn.btn-danger,
.complete_order,
.reaccept_order,
.ready_to_delivery,
.accept_review,
.decline_review,
.send-email {
    color: #fff !important;
    width: auto !important;
    font-size: 15px !important;
    border: 0;
}

.ready_to_delivery {
    min-width: 180px !important;
}

.accept_order.btn.btn-success .fa,
a.decline_order.btn.btn-danger .fa,
.reaccept_order .fa,
.complete_order .fa,
.ready_to_delivery .fa,
.accept_review .fa {
    transition: .3s;
    margin-right: 5px;
}

.accept_order.btn.btn-success:hover .fa,
a.decline_order.btn.btn-danger:hover .fa,
.reaccept_order:hover .fa,
.complete_order:hover .fa,
.ready_to_delivery:hover .fa,
.accept_review:hover .fa:before {
    transform: rotate(360deg);
}

.accept_order.btn.btn-success:hover {
    border: 0;

}
.topbar h2 {
    margin: 0;
    font-weight: 500;
    color: #000;
}
.topbar {
    background: #8bc34a54;
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 6px;
}
.accept_order.btn.btn-success,
.complete_order,
.reaccept_order,
.ready_to_delivery,
.accept_review,
.send-email {
    background: var(--green) !important;
}

a.decline_order.btn.btn-danger,
.decline_review {
    background: var(--danger) !important;
}

.transparent-mode .form-control,
.dark-mode .form-control {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, .1);
    color: #fff;
}

.transparent-mode .form-control::placeholder,
.transparent-mode .dataTables_info,
.transparent-mode h3,
.dark-mode .form-control::placeholder,
.dark-mode .dataTables_info,
.dark-mode h3 {
    color: #fff !important;
}

.transparent-mode .demo_changer,
.transparent-mode .demo_changer p,
.dark-mode .demo_changer,
.dark-mode .demo_changer p {
    color: rgba(255, 255, 255, 0.8) !important;
}

.dataTables_filter input,
.dataTables_length select {
    background: rgba(255, 255, 255, 0.3);
}

.transparent-mode .demo_changer .form_holder,
.dark-mode .demo_changer .form_holder {
    background-color: transparent;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
}

.transparent-mode .demo_changer h4,
.dark-mode .demo_changer h4 {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
}

.transparent-mode table td,
.dark-mode table td {
    border-bottom: 1px solid rgb(255 255 255 / 10%) !important;
    border-top: 0px solid #dee2e6 !important;
}

.onoffswitch2-checkbox:checked+.onoffswitch2-label {
    background-color: var(--primary-bg-color);
}

body.transparent-mode {
    color: #fff;
    background: var(--transparent-body);
}

.multiselect-clear-filter {
    display: none;
}

.transparent-mode #settingthemes .fa,
.transparent-mode label,
.dark-mode #settingthemes .fa,
.dark-mode label {
    color: var(--light);
}

.transparent-mode h2,
.dark-mode h2 {
    color: #fff;
}

[data-headerbg="color_1"] .nav-header .hamburger.is-active .line,
[data-headerbg="color_1"] .nav-header .hamburger .line {
    background: var(--red) !important;
}

.hamburger .line:nth-child(1) {
    width: 20px;
}

.hamburger .line {
    background: var(--red);
    display: block;
    height: 3px;
    border-radius: 3px;
    margin-top: 6px;
    margin-bottom: 6px;
    margin-left: auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.hamburger .line:nth-child(1) {
    width: 20px;
}

.hamburger .line:nth-child(2) {
    width: 26px;
}

.hamburger .line:nth-child(3) {
    width: 22px;
}

.nav-sm .hamburger .line:nth-child(1) {
    -webkit-transform: translateY(4px) rotate(45deg);
    transform: translateY(4px) rotate(45deg);
}

.nav-sm .hamburger .line:nth-child(1),
.nav-sm .hamburger .line:nth-child(3) {
    width: 10px;
    height: 2px;
}

.nav-sm .hamburger .line:nth-child(3) {
    -webkit-transform: translateY(-4px) rotate(-45deg);
    transform: translateY(-4px) rotate(-45deg);
}

table {
    white-space: nowrap;
}

@keyframes rot {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

#zone_content label {
    min-width: auto;
}

.d-table-order-success,
.d-table-order-declined,
.d-table-order-placed,
.d-table-order-accepted,
.d-table-payment-success,
.d-table-payment-pending,
.d-table-order-pending,
.d-table-order-ready,
.d-table-order-refunded {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    font-weight: 600;
    padding: 0.3rem 0.5rem;
    line-height: 100%;
    vertical-align: middle;
    font-size: 13px;
    color: var(--light);
    display: inline-block;
    min-width: 80%;
    text-align: center;
}

.d-table-order-success,
.d-table-payment-success,
.d-table-order-accepted {
    background: #00bb42;
}

.d-table-order-ready {
    background: #00bb42;
}
.d-table-order-declined,
.d-table-order-refunded ,.d-table-payment-refunded{
    background: #ff3e3e;
    color: #fff;
    padding: 2px, 5px;
}
.d-table-order-part-refunded{
    font-weight: 400;
}
.spl_zone_main .btn-group {
    width: 100%!important;
}
.d-table-order-placed {
    background: var(--yellow);
}
.invoice_body_btn input {
    margin-left: 10px;
}
tr.low td {
    background: #ff860d8c;
    color: #fff;
}

.suspected_class td {
    background: #fc0f0f !important;
}

.mytable .suspect_cash_order_limit td {
    background: #435025;
}
.mytable .suspect_cash_order_limit a {
    color: #fff !important;
}
input[type="submit"],input[type="button"]{
    cursor: pointer!important;
}
tr.medium td {
    background: #ff000075;
    color: #fff;
}

.d-table-payment-pending {
    background: #0074d6;
}

.modal-dialog .btn {
    margin-top: 20px;
    margin-right: 10px;
}
div#optionoverview ul {
    display: flex!important;
}
span.modify-booking-link-class {
    font-weight: bold;
    color: #00f;
}
/* input[type=checkbox] {
    position: relative;
    cursor: pointer;
    width: 0px;
    height: 0px;
  }
  
  input[type=checkbox]:checked:before {
        content: "";
    display: block;
    position: absolute;
    width: 34px;
    height: 34px;
    border: 4px solid #FFCB9A;
    border-radius: 20px;
    background-color: #445768;  
    transition: all 0.2s linear;
  }
  
  
  input[type=checkbox]:before {
    content: "";
    display: block;
    position: absolute;
    width: 34px;
    height: 34px;
    border: 4px solid #FFCB9A;
    border-radius: 3px;
    background-color: #445768;
  }
  
  
  input[type=checkbox]:after {
    content: "";
    display: block;
    width: 0px;
    height: 0px;
    border: solid #FFCB9A;
    border-width: 0 0px 0px 0;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    position: absolute;
    top: 0px;
    left: 50px;
    transition: all 0.2s linear;
  }
  
  input[type=checkbox]:checked:after {
    content: "";
    display: block;
    width: 12px;
    height: 21px;
    border: solid #FFCB9A;
    border-width: 0 5px 5px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 2px;
    left: 14px;
  } */
.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1rem;
    overflow: auto;
    max-height: 80vh;
}

#menucatalog_model .form-group div {
    width: 100% !important;
}

#productModal div,
#subproductModal div,
#optionModal div {
    width: 100% !important;
}

#subproductModal .dropdown-backdrop {
    display: none;
}

.profile_info h2 {
    font-size: 19px;
    margin-top: 10px;
}

#zone_content .btn-group {
    width: 100% !important;
}

/* P-O-U-L-U*/


.dataTables_wrapper .dataTables_filter input {
    margin-left: 0.5em;
    margin-top: 5px;
}

.date.datepicker {
    margin-left: 6px;
}

span.dash {
    margin-top: 4px;
    margin-left: 5px;
    font-weight: 300;
    font-size: 20px !important;
}

.form-group {
    margin-left: 6px;
}

.newBtnb {
    display: flex;
}

.btn-success {
    color: #fff;
    background-color: #198754;
    border-color: #198754;
    margin-left: 5px;

}

a.btn.btnBn.btnNewCom {
    background: #198754;
    color: white;
    margin-left: 5px;
}

span.d-table-order-pending {
    background: var(--blue);
    color: var(--light);
}

@-webkit-keyframes loading2 {
    10% {
        background: #887386;
    }

    15% {
        -webkit-transform: scaleY(1.2) translateX(10px);
        -moz-transform: scaleY(1.2) translateX(10px);
        -ms-transform: scaleY(1.2) translateX(10px);
        -o-transform: scaleY(1.2) translateX(10px);
        transform: scaleY(1.2) translateX(10px);
        background: #887386;
    }

    90%,
    100% {
        -webkit-transform: scaleY(0.05) translateX(-5px);
        -moz-transform: scaleY(0.05) translateX(-5px);
        -ms-transform: scaleY(0.05) translateX(-5px);
        -o-transform: scaleY(0.05) translateX(-5px);
        transform: scaleY(0.05) translateX(-5px);
    }
}

@-moz-keyframes loading2 {
    10% {
        background: #887386;
    }

    15% {
        -webkit-transform: scaleY(1.2) translateX(10px);
        -moz-transform: scaleY(1.2) translateX(10px);
        -ms-transform: scaleY(1.2) translateX(10px);
        -o-transform: scaleY(1.2) translateX(10px);
        transform: scaleY(1.2) translateX(10px);
        background: #887386;
    }

    90%,
    100% {
        -webkit-transform: scaleY(0.05) translateX(-5px);
        -moz-transform: scaleY(0.05) translateX(-5px);
        -ms-transform: scaleY(0.05) translateX(-5px);
        -o-transform: scaleY(0.05) translateX(-5px);
        transform: scaleY(0.05) translateX(-5px);
    }
}

@-o-keyframes loading2 {
    10% {
        background: #887386;
    }

    15% {
        -webkit-transform: scaleY(1.2) translateX(10px);
        -moz-transform: scaleY(1.2) translateX(10px);
        -ms-transform: scaleY(1.2) translateX(10px);
        -o-transform: scaleY(1.2) translateX(10px);
        transform: scaleY(1.2) translateX(10px);
        background: #887386;
    }

    90%,
    100% {
        -webkit-transform: scaleY(0.05) translateX(-5px);
        -moz-transform: scaleY(0.05) translateX(-5px);
        -ms-transform: scaleY(0.05) translateX(-5px);
        -o-transform: scaleY(0.05) translateX(-5px);
        transform: scaleY(0.05) translateX(-5px);
    }
}

.multiselect-container {
    float: left;
    width: 100%;
    border-top: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px 20px;
    background: #fff;
    top: 54px !important;
    border: none;
    -webkit-box-shadow: 0 15px 30px 0 rgb(0 0 0 / 20%) !important;
    box-shadow: 0 15px 30px 0 rgb(0 0 0 / 20%) !important;
    border-radius: 0px !important;
}

.multiselect-container .multiselect-search {
    padding: 5px 10px;
    width: 100%;
    border: none;
    border-radius: 4px;
    background: rgba(0, 0, 0, .05);
}

.extx {
    min-width: unset !important;
    margin-right: 10px;
}

.multiselect-container label {
    position: relative;
}
.multiselect-container label::before {
    content: "\f0c8";
    font-family: "FontAwesome";
    position: absolute;
    color: rgb(15 14 14 / 30%);
    font-size: 20px;
    margin-top: -4px;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    margin-left: -20px;
}
.btn-check:focus+.btn-primary, .btn-primary:focus{
    box-shadow: unset!important;
}
.multiselect-container input[type="checkbox"] {
    display: none;
}

.multiselect-container li.active label:before {
    content: "\f14a";
    font-family: "FontAwesome";
    color: #dc3545;
    border: none;
}

input[type=checkbox],
input[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    top: 3px;
    right: 0;
    bottom: 0;
    left: 0;
    height: 15px;
    width: 15px;
    transition: all 0.15s ease-out 0s;
    background: #818a94;
    border: none;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin-right: 3px;
    outline: none;
    position: relative;
    z-index: 50;
    outline: none;
}

input[type="checkbox"]:checked::before,
input[type="radio"]:checked::before {
    height: 15px;
    width: 15px;
    position: absolute;
    content: "✔";
    display: inline-block;
    font-size: 15px;
    text-align: center;
    line-height: 15px;
}

input[type=checkbox]:checked::after,
input[type=radio]:checked::after {
    background: #dc3545;
    content: '';
    display: block;
    position: relative;
    z-index: 100;
}

input[type=checkbox]:checked,
input[type=radio]:checked {
    background: #dc3545;
}

.multiselect-container>li>a>label {
    padding-left: 20px;
}

@keyframes loading2 {
    10% {
        background: #887386;
    }

    15% {
        -webkit-transform: scaleY(1.2) translateX(10px);
        -moz-transform: scaleY(1.2) translateX(10px);
        -ms-transform: scaleY(1.2) translateX(10px);
        -o-transform: scaleY(1.2) translateX(10px);
        transform: scaleY(1.2) translateX(10px);
        background: #887386;
    }

    90%,
    100% {
        -webkit-transform: scaleY(0.05) translateX(-5px);
        -moz-transform: scaleY(0.05) translateX(-5px);
        -ms-transform: scaleY(0.05) translateX(-5px);
        -o-transform: scaleY(0.05) translateX(-5px);
        transform: scaleY(0.05) translateX(-5px);
    }
}

.order_detail_inn p,
.booking_details p {
    margin-bottom: 10px;
    font-size: 15px;
}

.order_detail_inn .cardInfoCard {
    min-height: 444px;
}

.booking_details .cardInfoCard {
    min-height: 351px;
}

.order_all_details {
    padding: 20px;
    background: var(--light);
    box-shadow: 0px 3px 3px -1px rgb(10 22 70 / 10%), 0px 0px 1px 0px rgb(10 22 70 / 6%) !important;
    border-radius: 5px;
    margin-bottom: 30px;
}

#search_order,
#refresh_order_panel,
#search_booking,
#refresh_booking_panel {
    margin: 0px 10px 10px 0px;

}

.mytable a {
    color: var(--bs-body-color);
    text-decoration: none;

}

.mytable a:hover {
    color: var(--red);
    text-decoration: underline;

}

.mytable a.btn:hover {
    color: #fff;
    text-decoration: none;
    background: var(--red);
    border-color: var(--red) !important;

}

.order_all_details form {
    padding: 0 !important;
    background: none !important;
    border-radius: 0px !important;
    box-shadow: none !important;
}

.booking_details form {
    padding: 0 !important;
    background: none !important;
    border-radius: 0px !important;
    box-shadow: none !important;
}

#deleteOrder input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}

#success_model textarea {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;

}

.modal input[type=text],
.modal input[type=number],
.modal select,
.modal textarea {
    width: 100% !important;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}

.modal input[type=button] {
    width: auto;
}
.date.datetimepicker{
    position: relative;
}
.modal {
    overflow: hidden;
}

.modal form {
    box-shadow: unset !important;
}

.modal-backdrop {
    z-index: 0 !important;
    backdrop-filter: brightness(0.5);
}

.methodHeader {
    display: block !important;
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    padding: 10px 10px;

    border-radius: 5px;
}

.method_content {
    background: rgba(0, 0, 0, .05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}

.transparent-mode .modal-content {
    background: var(--transparent-body)
}

.dark-mode .modal-content {
    background: var(--dark-bg);
}

.method_inner {
    display: flex;
    flex-flow: row-reverse;
}

#themelight:after,
#themelight::before,
#darktheme:before,
#darktheme:after,
#transBg:before,
#transBg:after {
    display: none !important;
}

.method_inner .method:nth-child(2) span {
    font-weight: 800;
}

.min-vh-70 {
    min-height: 70vh;
}

.unauthorized-padding {
    padding-top: 150px;
    padding-bottom: 150px;
}



#modal-container {
    position: fixed;
    display: table;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    transform: scale(0);
    z-index: 9999;
}

#modal-container.one {
    transform: scaleY(0.01) scaleX(0);
    animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.one .modal-background .modal {
    transform: scale(0);
    animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.one.out {
    transform: scale(1);
    animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.one.out .modal-background .modal {
    animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container .modal-background {
    display: table-cell;
    background: rgba(0, 0, 0, 0.8);
    text-align: center;
    vertical-align: middle;
}

#modal-container .modal-background .modal {
    background: #fff;
    padding: 50px;
    display: inline-block;
    border-radius: 3px;
    font-weight: 300;
    position: relative;
    width: 30%;
    height: 170px;
}
#modal-container .modal-background .modal .close{
    position: absolute;
    top: 0px;
    right: 0px;
    background: #c6435a;
    color: #fff;
    z-index: 88888;
    padding: 3px 11px;
    border-radius: 0;
    cursor: pointer;
    font-size: 21px;
    
}
#modal-container .modal-background .modal h2 {
    font-size: 25px;
    line-height: 25px;
    margin-bottom: 15px;
}

#modal-container .modal-background .modal p {
    font-size: 18px;
    line-height: 22px;
}

#modal-container .modal-background .modal .modal-svg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 3px;
}

#modal-container .modal-background .modal .modal-svg rect {
    stroke: #fff;
    stroke-width: 2px;
    stroke-dasharray: 778;
    stroke-dashoffset: 7
}
html.modal-active, body.modal-active {
    overflow: hidden;
  }
  .transparent-mode #settingthemes,.dark-mode #settingthemes  .transparent-mode #optionoverview ul li.active span,.transparent-mode .dta_icon,.transparent-mode .table_support .nav a, .transparent-mode .card_com .x_content .x_title a,.transparent-mode .overview {
    background: var(--bg-img);
}
.transparent-mode h2{
    color:var(--bg-img);
}
.transparent-mode table th {
    color:var(--bg-img)!important;
}
.transparent-mode .card_touch, .dark-mode .card_touch{
background:transparent
}

.productModalLoader img,.subproductModalLoader img {
    width: 100px;
}
.productModalLoader,.subproductModalLoader  {
    text-align: center;
    padding: 100px 50px;
}

div#inv_report_bs_name_div{
    padding-top: 15px;
    padding-bottom: 15px;
    height: 15vh;
    overflow-y: auto;
    border: solid 1px #888888;
    border-radius: 5px;
    display: none!important;
}
div#inv_report_div {
    height: 60vh;
    width: 100%;
    overflow: auto;
    margin-top: 20px;
}
input#btnMenuCache {
    margin-top: 10px;
}
.booking_spcl_close_checkbox_btn .btn-group, .booking_spcl_open_checkbox_btn .btn-group {
    width: 100%!important;
}
div#inv_report_bs_name_div ul li {
    width: calc(15% - 7.5px) !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    color: #222 !important;
    border: 1px solid #ebebeb !important;
    padding: 5px !important;
    text-align: center !important;
    margin: 0 10px 10px 0 !important;
    border-radius: 5px !important;
    display: inline-block;
}
.mytable .odd {
    background-color: #e3e3e3 !important;
}
.dark-mode .mytable .odd,transparent-mode .mytable .odd{
    background-color:rgba(0,0,0,0.4)!important
}
.nav-menu-list {
    padding-bottom: 140px;
}
.isHeaderBusiness {
    padding: 4px 10px;
    background: #ecf0f4;
    border-radius: 5px;
    max-height: 200px;
    overflow: auto;
}
.istableInfo table tbody tr:first-child th {
    background: #ecf0f4!important;
}
.isHeaderBusiness.bg-transparent {
    border-bottom: 1px solid #e5e8ec;
    border-radius: 0;
}
.isBodyDataItem {
    padding: 5px 10px;
    border-bottom: 1px solid #ecf0f4;
}
.isCard h5 {
    padding: 10px;
    background: #f2f2f2;
}
.maxCardBody strong {
    font-weight: 600;
    font-size: 14px;
}
.isbodyDataItem {
    width: calc(100% / 2);
    margin-right: 15px;
    /* background: #ddd; */
}
.istableInfo {
    /* padding: 5px 0; */
    /* background: #f8f8f8; */
    /* border: 1px solid #ffff; */
    box-shadow: 2px 4px 10px rgba(0, 0, 0, .05);
    border-radius: 5px;
    margin-bottom: 10px;
}
.istableInfo table {
    margin-bottom: 0;
}
.istableInfo th {
    font-weight: 500;
    background: #ffffff!important;
}
.istableInfo table tr td:nth-child(4) {
    text-align: right;
    padding-right: 20px;
}
.istableInfo table tr td:nth-child(2) {
    text-align: right;
}
ul.nav.nav-tabs.vbsa {
    background: transparent;
}
ul.nav.nav-tabs.vbsa li {
    background: #a22e6d;
    margin-left: 4px;
    border-radius: 5px;
}
.navbar-nav .icon{
    position: relative;
}
.navbar-nav .icon svg {
    width: 15px;
    height: 45px;
    margin-right: 10px;
}
.navbar-nav .icon .topbar-badge {
    top: 10px;
    right: 10px;
    padding: 4px 6px;
}
.main-menu-box {
    width: 320px;
    -webkit-box-shadow: 0 5px 10px #000;
    box-shadow: 0 5px 10px rgba(30, 32, 37, .12);
    -webkit-animation-name: DropDownSlide;
    animation-name: DropDownSlide;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    position: absolute;
    z-index: -1000;
    border: 0;
    inset: 0px 0px auto auto;
    opacity: 0;
    transform: translate(0px, 70px);
    transition: 0.3s;
    max-height: 0px;
    overflow: hidden;
    display: block;
}
.main-menu-box #notificationItemsTabContent a h6 {
    font-size: 13px;
}
.main-menu-box #notificationItemsTabContent p {
    font-size: 13px;
}
.main-menu-box button {
   /* padding: 10px;
    */
    background: #fde1e7;
    color: #e43b44;
}
.main-menu-box.on {
    transform: translate(0px, 45px);
    z-index: 50000;
    opacity: 1;
    max-height: 1000px;
    overflow: visible;
}
.main-menu-box .notification-item {
    padding: 0.75rem 1rem;
    white-space: inherit;
    position: relative;
}
@media (max-width: 900px) {
    .main-menu-box {
        width: 320px;
        inset: 0px -110px auto auto;
   }
}
.btn-check:focus + .btn, .btn:focus {
    box-shadow: unset;
}

@media (max-width: 900px) {
    .isBodyDataItem {
        display: block !important;
   }
    .isbodyDataItem {
        width: 100%;
   }
    .istableInfo {
        width: 100%;
        overflow: auto;
   }
    .Cardm {
        display: block !important;
   }
    .Cardm .table_support {
        justify-content: center;
        margin-top: 10px;
   }
}

#menucategoryTable tr td:nth-child(3) {
    max-width: 200px!important;
    white-space: break-spaces!important;
}
.digital_clock_p i{
    padding: 5px;
}

.booking_special_title {
    font-size: 18px;
    font-weight: 800;
    padding: 10px;
    background: #f2f2f2;
    padding: ma;
    margin: 0;
    border-radius: 5px;
}
div#ttl_bs_assign .owl-nav {
    display: block;
    padding: 0;
}

div#ttl_bs_assign button.owl-next, div#ttl_bs_assign button.owl-prev{
    height: 50px;
}
 .allocatedbs .owl-stage-outer{
    margin: 0 50px;
}
.input_up_down_fix input[type='checkbox'] {
    margin-bottom: 0;
}
.input_up_down_fix .btn-group{
    width: 100%!important;
}
@keyframes zoomIn {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes zoomOut {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}
@keyframes unfoldIn {
    0% {
      transform: scaleY(0.005) scaleX(0);
    }
    50% {
      transform: scaleY(0.005) scaleX(1);
    }
    100% {
      transform: scaleY(1) scaleX(1);
    }
  }
  @keyframes unfoldOut {
    0% {
      transform: scaleY(1) scaleX(1);
    }
    50% {
      transform: scaleY(0.005) scaleX(1);
    }
    100% {
      transform: scaleY(0.005) scaleX(0);
    }
  }
  #ttl_bs_assign .dta_icon {
    /* background: transparent; */
    color: #fff;
    width: 50px;
    height: 30px;
}
    #ttl_bs_assign 
  .spl_zone_main.dx {
    padding: 0px 0 20px 0;
    border-bottom: 1px solid #00000045;
    margin-bottom: 10px;
  }
  #ttl_bs_assign .in_dta {
      font-weight: 800;
 }
 #ttl_bs_assign .dta_icon span {
    font-size: 18px;
    font-weight: 800;
}
.newcard {
    display: flex;
}
.card_newtop {
    display: flex;
    align-items: center;
}
.card_newtop {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    margin-right: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
    border: 1px solid #ab2867;
}
.card_newtop h3 {
    margin-left: 20px;
    margin-bottom: 0;
    padding: 0;

}
.card_newtop h6 {
    padding: 0;
    margin: 0;
}
#ConfirmModal div#modalContent {
    min-height: 45vh;
}
#edit-other-inp {
    margin-top: 20px;
    height: 36px;
}
#myInput {
    float: right;
    margin-bottom: 20px;
}

/**tree**/
.tree {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .tree ul {
    margin: 0;
    padding: 0;
    list-style: none;
    margin-left: 1em;
    position: relative;
  }
  .tree ul ul {
    margin-left: 0.5em;
  }
  .tree ul:before {
    content: "";
    display: block;
    width: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-left: 1px solid;
  }
  .tree ul li:before {
    content: "";
    display: block;
    width: 10px;
    height: 0;
    border-top: 1px solid;
    margin-top: -1px;
    position: absolute;
    top: 1em;
    left: 0;
  }
  .tree ul li:last-child:before {
    background: #fff;
    height: auto;
    top: 1em;
    bottom: 0;
  }
  .tree li {
    margin: 0;
    padding: 0 1em;
    line-height: 2em;
    color: #369;
    font-weight: 700;
    position: relative;
  }
  .tree li .expand {
    display: block;
  }
  .tree li .collapse {
    display: none;
  }
  .tree li a {
    text-decoration: none;
    color: #369;
  }
  .tree li button {
    text-decoration: none;
    color: #369;
    border: none;
    background: transparent;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    outline: 0;
  }
  .tree li button:active {
    text-decoration: none;
    color: #369;
    border: none;
    background: transparent;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    outline: 0;
  }
  .tree li button:focus {
    text-decoration: none;
    color: #369;
    border: none;
    background: transparent;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    outline: 0;
  }
  
  .indicator {
    margin-right: 5px;
  }
  .mytable .duplicateOrder {
    background-color: #876dd7 !important;
    color: #fff;
  }
  .mytable .duplicateOrder a {
    color: #fff;
  }
  .mytable .fraud_list {
    background-color: blue !important;
    color: white !important;
}
.mytable .fraud_list a{
    color: white !important;
}
table#bus_log:before {
    display: none;
}
 #order_get_btn_design .btn {
    margin-top: 0px;
    margin-right: 0;
    margin-left: 0;
}
table#bus_log td {
    white-space: break-spaces !important;
    width: 200px;
    padding: 20px;
}
#pre_data .select2-container {
    box-sizing: border-box;
    display: inline-block;
    margin: 0;
    position: relative;
    vertical-align: middle;
    width: 100%!important;
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    margin-top: 10px;
}
#pre_data .select2-container--default .select2-selection--single{
    border:0;
}
.over-scroll-auto{
    overflow: auto;
}
.accord_item{
    display: none;
    width: 100%;
    overflow: auto;
}
.accordian_card {
    background: #fff;
    padding: 10px;
}
.accord_content h2 {
    padding: 10px;
    background: #ddd;
    margin: 0;
    font-size: 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    cursor: pointer;
}
.accord_item {
    padding: 10px;
    margin-bottom: 10px;
}
#order_view_details li {
    list-style: none;
    padding: 5px 10px;
    /* border-bottom: 1px solid #06060657; */
    box-shadow: 0px 0px 10px #0000002b;
    margin: 15px 0 15px 0;
}
.cloneArea h2 {
    font-size: 15px;
}
.cloneArea ul {
    margin: 0;
    padding: 0;
}
#disput_order_pop ul {
   display: none;
}
#disput_order_pop h3 {
    pointer-events: all;
    cursor: pointer;
}
.business_spcl_close_checkbox_btn.on button.multiselect.dropdown-toggle.btn.btn-default {
    border: 2px solid green !important;
}
.business_spcl_open_checkbox_btn.on button.multiselect.dropdown-toggle.btn.btn-default {
    border: 2px solid green !important;
}
.booking_spcl_close_checkbox_btn.on button.multiselect.dropdown-toggle.btn.btn-default {
    border: 2px solid green !important;
}
.booking_spcl_open_checkbox_btn.on button.multiselect.dropdown-toggle.btn.btn-default {
    border: 2px solid green !important;
}
#order_view_details .modal-header {
    border: 0;
}
.cloneArea table {
    width: 100%;
}
.cloneArea {
    background: #dddddd21;
    /* box-shadow: 0px 5px 10px #0000002b; */
    /* overflow: auto; */
    overflow: auto;
}
.cloneArea h4{
    font-size:16px;
}
.user_info_tb_data_disput {
    width: 100%;
}
tr.tb_header td {
    background: #f2f2f2;
    border-bottom: 1px solid #000;
}

.accord_title.active .fa {
    transform: rotate(180deg);
}

.color_bg {
    background: #837191 !important;
    color: #fff !important
}

.filter_date,
.search_sheader {
    display: none;
}
.modal-dialog.dispute-modal {
    max-width: 800px !important;
}
/* .error{
    border: red 4px solid;
} */
.red_border{
    border:2px solid red;
}
.card-tabs .nav-tabs {
    border-bottom: 0px;
    background: #a22e6d;
    padding: 5px;
    border-radius: 6px;
    flex-wrap: unset;
}

a.nav-link.active {
    color: #83244b !important;
}

.card-header-matrix {
    background: rgb(87 76 94 / 6%);
    border-bottom: 1px solid #ffe6e6;
}

div#productPriceUpdateDetailsTableDiv {
    margin-top: 20px;
}

.menuCatBox .menucat_class{
    margin: 10px 0;
    padding: 5px 0;
}

.menuCatBox input[type=checkbox], .menuCatBox input[type=radio]{
    margin-right: 10px;
}
.menuCatBox [data-control], .menuCatBox [data-content] > *{
    padding: 3px 0;
}
.menuCatBox article {
    margin-left: 20px;
}
section#proPriceListCkbox section.menucat_class ,#proPriceListCkbox  .pro_price_menucat_class{
    border-radius: 0;
    font-weight: 600;
    padding: 10px 0;
    box-shadow: 0px 0px 10px #00000021;

}
.card-tabs .nav-tabs .nav-link {
    border-radius: 6px;
    padding: 8px 12px;
    font-weight: 500;
    font-size: 14px;
    border: 0;  
    color: #fff;
}
.order-manage h4 {
    font-size: 15px;
}
.filter_resturant {     
    position: absolute;
    z-index: 5;
    background: #fff;
    padding: 10px;
    width: 300px;
    right: 0;
    box-shadow: 0px 0px 10px #0000003d;
    border-radius: 5px;
    transform: translate3d(0px, 100px, 0px);
    z-index: -58588888;
    transition: .5s all ease-in;
    opacity: 0;
}
.filter_resturant.on {
    transform: translate3d(0px, 60px, 0px);
    z-index: 555 ;
    opacity: 1;
}
.filter_resturant .btn-group{
    width: 100%;
    margin:0px 0 10px 0;
    max-width: 300px;
}
.filter_resturant .btn-success {
    margin: 0!important;
}
.cpyday_data {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
#add_edit_zone_new_form .w-md-50 label {
    margin: 0 0 25px 0;
}
@media (max-width:900px) {
    .filter_resturant.on {
        top: 90px;
    }
    #add_edit_zone_new_form .w-md-50 label {
        margin: 0 0 2px 0;
    }
}
@media (max-width:600px) {
    .filter_resturant.on {
        top: 36px;
    }
}
.itembtn div {
    cursor: pointer;
}
button#modify-booking-link-btn {
    padding: 2px 5px;
    font-size: 14px;
}
#manager_list_tbl tbody tr td {
    white-space: unset;
    text-wrap: wrap;
    max-width: 200px;
}
.modify-order-link-class{
    display: none;
}
.form-group.weekly_date_range1 .btn-group {
    width: 100%!important;
    margin: 0!important;
}
.form-group.weekly_date_range1 .multiselect {
    margin: 10px 0 0px 0!important;
}
.form-group.weekly_date_range2 .btn-group {
    width: 100%!important;
    margin: 0!important;
}
.form-group.weekly_date_range2 .multiselect {
    margin: 10px 0 0px 0!important;
}
.matrix-single-business-report-long-text{
    overflow-wrap: break-word!important;
}
.matrix-single-business-report-graph{
    min-height: 300px!important;
}
.matrix-single-bs-report-sub-container{
    border: #ece6e6 solid;
}
select#single_business_report_business_list {
    width: 220px;
}
.matrix-single-bs-report-sub-container .title{
    
    padding: 10px 15px 10px 15px;
    font-weight: 900;
}
.matrix-single-bs-report-sub-container .title span{
    color: #00f;
    font-size: 14px;
    font-weight: 600;
}

.matrix-single-bs-report-sub-container div{
    border: 1px #000 solid;
}
.matrix-single-bs-order-details-table table th td{
    border: 1px solid #000;
    border-collapse: collapse;
}
.x-panel-body{
    padding: 10px 20px 10px 20px;
}


/* business notes style */


.msger {
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
    width: 478px;
    max-width: 867px;
    margin: 0px 10px;
    height:100%;
    border: var(--border);
    border-radius: 5px;
    background: var(--msger-bg);
    box-shadow: 0 15px 15px -5px rgba(0, 0, 0, 0.2);
  }

  .msger-header {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: var(--border);
    background: #eee;
    color: #666;
  }

  .msger-chat {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
  }

  .msger-chat::-webkit-scrollbar {
    width: 6px;
  }

  .msger-chat::-webkit-scrollbar-track {
    background: #ddd;
  }

  .msger-chat::-webkit-scrollbar-thumb {
    background: #bdbdbd;
  }

  .msg {
    display: flex;
    align-items: flex-end;
    margin-bottom: 10px;
  }

  .msg:last-of-type {
    margin: 0;
  }

  .msg-img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
    background: #ddd;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 50%;
  }

  .msg-bubble {
    max-width: 260px;
    padding: 15px;
    min-width: 200px;
    border-radius: 15px;
    background: var(--left-msg-bg);
    position: relative;
  }
  .msg-bubble:after {
    bottom: 100%;
    left: 30px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: #86BB71;
    border-width: 10px;
    margin-left: -10px;
}
  .msg-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }

  .msg-info-name {
    margin-right: 10px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .msg-info-time {
    font-size: 0.85em;
  }

  .left-msg .msg-bubble {
    background: #dfdddddb;
    color: #000000;
    border-bottom-left-radius: 0;
  }

  .right-msg {
    flex-direction: row-reverse;
  }

  .right-msg .msg-bubble {
    background: #abfae6db;
    color: #000000;
    position: relative;
  }

  .right-msg .msg-img {
    margin: 0 0 0 10px;
  }
  .right-msg .msg-info-name span{
    background: #abfae6db;
  }
  .msger-inputarea {
    display: flex;
    padding: 10px;
    border-top: var(--border);
    background: #eee;
    align-items: center;
  }

  .msger-inputarea * {
    padding: 8px;
    border: none;
    border-radius: 3px;
    font-size: 1em;
  }

  .msger-input {
    flex: 1;
    background: #ddd;
  }

  .msger-send-btn {
    margin-left: 10px;
    background: rgb(0, 196, 65);
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.23s;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .msg-info-time {
    position: absolute;
    right: 10px;
    bottom: 3px;
    font-size: 12px;
    }
  .msger-send-btn:hover {
    background: rgb(0, 180, 50);
  }


div#business_notes_modal .modal-content {
    height: 460px;
}
.msg-info-name span {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #ddd;
    border-radius: 10px;
}
.left-msg .msg-bubble:after{
 border-bottom-color: #dfdddddb;
}
.right-msg .msg-bubble:after{
    border-bottom-color: #abfae6db;
}
.msg-bubble .fa-pencil {
    cursor: pointer;
}
.msg-text {
    padding: 0 0 10px 0;
}
@media (max-width:900px) {
  .msger{
    width: 100%;
  }
  .msg-bubble {
    max-width: 250px;
  }
}
.nav-brand-middle{
    width: 70%;
    color: #e1256d;
    font-size: 18px;
}
.dark-mode .nav-brand-middle{
    color:#fff;
}
.allowcatedBusiness .card_newtop {
    display: flex;
    align-items: center;
    padding: 3px 5px;
    margin-right: 10px;
    border-radius: 5px;
    margin-bottom: 9px;
    border: 1px solid #ab2867;
}
.allowcatedBusiness  .card_newtop h3 {

    font-size: 18px;
    font-weight: 600;
}
div#ttl_bs_assign h2 {
    font-size: 15px;
}
.aloActiveInactive {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.aloActiveInactive h3{
    color: #ff0034;
}
.aloActiveInactive  .owl-next span, .owl-prev span {
    font-size: 30px;
    height: 35px;
    line-height: 25px;
}
div#ttl_bs_assign button.owl-next, div#ttl_bs_assign button.owl-prev {
    height: 63px;
}
.aloActiveInactive h3:first-child {
    margin-right: 10px;
    color: #2a8b2a;
}
.in_dta.active{
    background: var(--cust);
    color: #fff;
}
.cardBooking  .booking_details {
    align-items: stretch;
    margin-bottom: 30px;
}
/* .dataList .list-element:nth-child(1) {
    display:none;
}

.dataList .list-element:nth-child(2) {
    display: block;
} */
/* .dataList .list-element:nth-child(n+3) {
    display:none;
} */
@media (max-width:900px) {
    .cardBooking  .booking_details {
        align-items: stretch;
        margin-bottom: 0;
    }
    .aloActiveInactive {
        display: block;
    }
    .aloActiveInactive h3{
        margin-bottom: 0;
    }
    svg#santa {
        display: none;
    }
    div#ttl_bs_assign button.owl-next, div#ttl_bs_assign button.owl-prev {
        height: 75px;
    }
  .msger{
    width: 100%;
  }
  .msg-bubble {
    max-width: 250px;
  }
    .newcard.allowcatedBusiness {
        flex-wrap: nowrap;
    }
    .allowcatedBusiness .card_newtop{
        display: block;
        text-align: center;
        margin-right: 2px;
    }
    .allowcatedBusiness .card_newtop h3{
        margin-left: 0;
    }
}