@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@100;300;400;600;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('../fonts/stylesheet.css');
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
/* html,
body {
    height: 100%;background-color: var(--warning);
} */
/* body {
    height: 100%;
} */
body {
    font-family: "Montserrat", sans-serif;
    background-color: var(--main-dark) !important;
}
.font-heading{
    font-family: 'HeadingNow 73';
}

.checkbox_gender label span  {
    font-size: 18px !important;
}
.checkbox_gender {
    padding-left: 5px !important;
}

.checkbox_member {
    padding-left: 5px !important;
}

.checkbox_member label span  {
    font-size: 18px !important;
    
}


:root {
    --dark: #151515;
    --secondary: #151515;
    --tertiary: #1f1f1f;
    --green: #617332;
    --light: #e6e3d9 !important;
    --muted: #ababab;
    --dark-tab: #ffffff;
    --slate: #474747;
    --drop-down: #1d1d1d;
    --border-light: #444444;
    --purple: #8893f8;
    --orange: #aa4722;
    --blue-grey: #263238;
    --dark-purple: #511d49;
    --danger: #cc0000;
    --faded: #888888;
    --faded-lighter: #444444;
    --primary: #213b97;
    --warning: #958817;
    --doc-red: #f44f4f;
    --dark-green: #617332;
    --info: #6087d4 !important;
    --red: #ff0000;
    --pink: #bc3081;
    --light-secondary: #C8C8C8;
    --primary-secondary: #22618A;
    --main-dark:#0b0b0b;
    --light-green:#98B943;
    --darktwo-color:#111111;
    --dayview-color:#111111;
}

/* placeholder for login */

.placeholder-light::-webkit-input-placeholder {
    color: #e7e7e7;
    opacity: 0.5;
    font-size: 14px;
}
.placeholder-light:-moz-placeholder {
    color: #e7e7e7;
    opacity: 0.5;
    font-size: 14px;
}
.placeholder-light::-moz-placeholder {
    color: #e7e7e7;
    opacity: 0.5;
    font-size: 14px;
}
.placeholder-light:-ms-input-placeholder {
    color: #e7e7e7;
    opacity: 0.5;
    font-size: 14px;
}
.placeholder-light::-ms-input-placeholder {
    color: #e7e7e7;
    opacity: 0.5;
    font-size: 14px;
}
.placeholder-light::placeholder {
    color: #e7e7e7;
    opacity: 0.5;
    font-size: 14px;
}

::placeholder {
    color: white;
    opacity: 1; /* Firefox */
  }
  
  ::-ms-input-placeholder { /* Edge 12-18 */
    color: white;
  }

  ::-webkit-input-placeholder { /* Edge 12-18 */
    color: white;
  }

.z-index-1{
    z-index: 1 !important;
}
.bg-dark {
    background-color: var(--dark) !important;
}
.bg-dark-three{
    background-color: var(--darktwo-color);
}
.bg-main-dark{
    background-color: var(--main-dark);
}
.bg-secondary {
    background-color: var(--secondary) !important;
}
.bg-dayview{
    background-color:var(--dayview-color);
}

.bg-dark-light{
    background-color: #1d1d1d !important;
}
.bg-info {
    background-color: var(--info) !important;
}
.bg-secondary {
    background-color: var(--secondary) !important;
}
.bg-success {
    background-color: var(--green) !important;
}
.bg-dark-green {
    background-color: var(--dark-green);
}
.bg-green {
    background-color: var(--green);
}
.bg-dark-tab {
    background-color: var(--dark-tab);
}
.bg-red {
    background-color: var(--red);
}
.bg-warning {
    background-color: var(--warning) !important;
}
.bg-doc-red {
    background-color: var(--doc-red);
}
.bg-primary-secondary{
    background: var(--primary-secondary) !important;
}
.text-dark-tab {
    color: var(--dark-tab);
}
.text-pink{
    color: var(--pink) !important;
}
.text-light-green{
    color:var(--light-green);
}
.btn-success {
    background-color: var(--green);
    border: 1px solid var(--green) !important;
}
.btn-success:hover {
    background-color: var(--green);
    border: 1px solid var(--green) !important;
}
.btn-success:focus {
    background-color: var(--green);
    border: 1px solid var(--green) !important;
    box-shadow: none;
}
.btn-success.btn:disabled {
    background-color: var(--green);
}

.btn-orange {
    background-color: var(--orange);
    border: 1px solid var(--orange) !important;
}
.btn-orange:hover {
    background-color: var(--orange);
    border: 1px solid var(--orange) !important;
}
.btn-orange:focus {
    background-color: var(--orange);
    border: 1px solid var(--orange) !important;
    box-shadow: none;
}

.btn-dark-tab {
    background-color: var(--dark-tab);
    border: 1px solid var(--dark-tab) !important;
}
.btn-dark-tab:hover {
    background-color: var(--dark-tab);
    border: 1px solid var(--dark-tab) !important;
}
.btn-dark-tab:focus {
    background-color: var(--dark-tab);
    border: 1px solid var(--dark-tab) !important;
    box-shadow: none;
}

.btn-blue-grey {
    background-color: var(--blue-grey);
    border: 1px solid var(--blue-grey) !important;
}
.btn-blue-grey:hover {
    background-color: var(--blue-grey);
    border: 1px solid var(--blue-grey) !important;
}
.btn-blue-grey:focus {
    background-color: var(--blue-grey);
    border: 1px solid var(--blue-grey) !important;
    box-shadow: none;
}

.btn-dark-purple {
    background-color: var(--dark-purple);
    border: 1px solid var(--dark-purple) !important;
}
.btn-dark-purple:hover {
    background-color: var(--dark-purple);
    border: 1px solid var(--dark-purple) !important;
}
.btn-dark-purple:focus {
    background-color: var(--dark-purple);
    border: 1px solid var(--dark-purple) !important;
    box-shadow: none;
}
.btn-transparent {
    background-color: transparent;
    border: none;
    font-size: 13px;
    color: var(--purple);
    text-decoration: underline;
}
.btn-transparent:hover {
    color: var(--purple);
}
.btn-transparent.show {
    color: var(--purple);
}

.btn.btn-primary {
    background-color: var(--primary) !important;
    border: none;
}

.faded-lighter {
    border-color: var(--faded-lighter) !important;
}
.border-light {
    border-color: var(--border-light) !important;
}
.border-success {
    border-color: var(--green) !important;
}
.border-muted {
    border-color: var(--slate) !important;
}
.border-light-secondary{
    border-color: var(--light-secondary) !important;
}
.text-light {
    color: var(--light) !important;
}
.text-muted {
    color: var(--muted) !important;
}
.text-purple {
    color: var(--purple);
}
.text-success {
    color: var(--green) !important;
}
.text-green {
    color: var(--green);
}
.text-info {
    color: var(--info) !important ;
}
.text-orange {
    color: var(--orange);
}
.text-danger {
    color: var(--danger) !important;
}
.text-faded {
    color: var(--faded);
}
.form-control {
    resize: none;
    font-weight: 300;
    padding: 0.75rem 1rem;
}
.form-control:focus {
    box-shadow: none !important;
}
.flex-1 {
    flex: 1 1 auto;
}
.btn-slate {
    background-color: var(--slate);
}
.btn-slate:hover {
    background-color: var(--slate);
}
.border-dark-tab {
    border-color: var(--dark-tab) !important;
}
.drop-down-bg {
    background-color: var(--drop-down);
}
.font-jost {
    font-family: "Jost", sans-serif;
}
.opacity-60 {
    opacity: 0.6;
}
.table_btn {
    font-size: 11px;
    min-height: 25px;
    min-width: 80px;
}
.border-radius-20 {
    border-radius: 20px;
}
.input-50 {
    height: 50px;
}
.border-2 {
    border-width: 2px;
}
.fs-10 {
    font-size: 10px;
}
.fs-11 {
    font-size: 11px;
}
.fs-12 {
    font-size: 12px;
}
.fs-13 {
    font-size: 13px;
}
.fs-14 {
    font-size: 14px;
}
.fs-15 {
    font-size: 15px;
}
.fs-16 {
    font-size: 16px !important;
}
.fs-18 {
    font-size: 18px;
}
.btn {
    font-size: 0.8rem !important;
    border:none;
}
.rounded-10 {
    border-radius: 10px;
}
/* font weight */
.fw-100 {
    font-weight: 100;
}
.fw-200 {
    font-weight: 200;
}
.fw-300 {
    font-weight: 300;
}
.fw-400 {
    font-weight: 400;
}
.fw-500 {
    font-weight: 500;
}
.fw-600 {
    font-weight: 600;
}
.fw-700 {
    font-weight: 700;
}
/* font weight */
/* white placeholder */
.white ::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #fff;
}
.white ::-moz-placeholder {
    /* Firefox 19+ */
    color: #fff;
}
.white :-ms-input-placeholder {
    /* IE 10+ */
    color: #fff;
}
.white :-moz-placeholder {
    /* Firefox 18- */
    color: #fff;
}
/* white placeholder */

/* white placeholder */
.white_small ::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #fff;
    font-size: 12px;
}
.white_small ::-moz-placeholder {
    /* Firefox 19+ */
    color: #fff;
    font-size: 12px;
}
.white_small :-ms-input-placeholder {
    /* IE 10+ */
    color: #fff;
    font-size: 12px;
}
.white_small :-moz-placeholder {
    /* Firefox 18- */
    color: #fff;
    font-size: 12px;
}
/* white placeholder */

/* white placeholder */
.white_small ::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #fff;
    font-size: 12px;
}
.white_small ::-moz-placeholder {
    /* Firefox 19+ */
    color: #fff;
    font-size: 12px;
}
.white_small :-ms-input-placeholder {
    /* IE 10+ */
    color: #fff;
    font-size: 12px;
}
.white_small :-moz-placeholder {
    /* Firefox 18- */
    color: #fff;
    font-size: 12px;
}
/* white placeholder */

/* grey placeholder */
.grey ::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: var(--dark-tab);
}
.grey ::-moz-placeholder {
    /* Firefox 19+ */
    color: var(--dark-tab);
}
.grey :-ms-input-placeholder {
    /* IE 10+ */
    color: var(--dark-tab);
}
.grey :-moz-placeholder {
    /* Firefox 18- */
    color: var(--dark-tab);
}
/* grey placeholder */

/* grey placeholder */
.grey_small ::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: var(--dark-tab);
    font-size: 14px;
}
.grey_small ::-moz-placeholder {
    /* Firefox 19+ */
    color: var(--dark-tab);
    font-size: 14px;
}
.grey_small :-ms-input-placeholder {
    /* IE 10+ */
    color: var(--dark-tab);
    font-size: 14px;
}
.grey_small :-moz-placeholder {
    /* Firefox 18- */
    color: var(--dark-tab);
    font-size: 14px;
}
/* grey placeholder */

/* Shadow */
.shadow-dark { box-shadow: 0 0.125rem 0.55rem rgba(0,0,0,.7)!important; }

/* Sidebar Toggle Styles */
#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#wrapper.toggled {
    padding-left: 0;
}
#sidebar-wrapper {
    overflow-y: hidden !important;
    z-index: 1000;
    position: fixed;
    left: 249px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    background: #111111;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}
#wrapper.toggled #sidebar-wrapper {
    width: 250px;
}
#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -249px;
}

::-webkit-scrollbar {
    /* width: 2px; */
    /* border-radius: 50px; */
    /* scrollbar-width: thin; */
}
/* 
/* ::-webkit-scrollbar-track {
    background: var(--green); 
  

::-webkit-scrollbar-thumb {
    background-color: var(--dark-tab); 
    border-radius: 20px;
    border: 2px solid var(--dark-tab); 
} */
/* Sidebar Styles */
.dataTables_paginate {
    visibility: hidden;
}

.toggled .sidebar-nav {
    display: none;
}
.toggled .hidden {
    display: none !important;
}
.sidebar-nav {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    /* overflow-y: scroll; */
}
.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #626262;
    font-size: 14px;
}
.sidebar-nav li a:hover {
    text-decoration: none;
    color: #fff;
    /* background: #363636; */
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
    height: 65px;
    font-size: 18px;
    line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
    color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
    color: #fff;
    background: none;
}
.sidebar-nav li a.active {
    border-radius: 0px 30px 30px 0px;
    color: #ffffff;
    border-left: 3px solid white;
}
.sidebar-nav li a.active svg {
    fill: white;
    margin-left: -3px;
}
.sidebar-nav li a svg {
    fill: #626262;
    width: 25px;
}
.sidebar-nav li a:hover svg{
    fill:white;
    transition: 0.3s ease-in-out;
}
.sidebar-nav li a:hover {
    /* background-color: #363636; */
    border-radius: 0px 30px 30px 0px;
    transition: 0.3s ease-in-out;
}
.sidebar-nav li a {
    border-radius: 0px 30px 30px 0px;
    display: flex;
    align-items: center;
    min-width: 220px;
    justify-content: flex-start;
    border-radius: 0px;
    margin-bottom: 5px;
    font-weight: 500;
    padding-left: 45px;
}
.sidebar-nav li{
    padding: 12px 0px;
}
#sidebar-wrapper li a.active .dot {
    /* border: 1px solid transparent; */
    /* background-color: #eee; */
}
#sidebar-wrapper li a .dot {
    /* border: 1px solid var(--muted); */
    width: 12px;
    height: 12px;
    display: inline-block;
    border-radius: 50px;
}
#sidebar-wrapper li a:hover .dot {
    border-color: #fff;
}
#sidebar-wrapper.active {
    margin-left: -251px;
}
#menu-toggle {
    visibility: hidden;
    position: absolute;
    top: 60px;
    z-index: 9999;
    right: -33px;
}
.toggled #menu-toggle {
    transform: rotate(180deg) !important;
    right: -35px;
}
#menu-toggle {
    transform: rotate(360deg) !important;
}
#menu-toggle:focus {
    box-shadow: none;
}
/*dropdown animation*/
/*dropdown animation*/
.arrowRemove::after {
    border: none !important;
}
.customArrow::after {
    content: url(../images/chevron-down.svg);
    border: none !important;
}
.avatar {
    width: 40px;
    height: 40px;
}
.dropdown-item:focus,
.dropdown-item:hover {
    background-color: transparent !important;
    color: var(--light);
}
.badge-notifcation {
    width: 10px;
    height: 10px;
    left: 35px;
    border: 1px solid #fff;
}
.w-h-62 {
    width: 50px;
    height: 50px;
    background-color: var(--dark);
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 0.5)' stroke-width='1' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
/* datatable */
.form-select {
    background-image: url("../images/select_arrow.svg");
    background-size: 20% 25%;
}
.form-select.custom_select {
    background-image: url("../images/select_arrow.svg");
    background-size: 6% 27% !important;
}
.myGoalTable thead tr td {
    border: 1px solid #fff !important;
}
.myGoalTable {
    color: var(--light) !important;
}
.myGoalTable tr.odd,
.myGoalTable tr.even {
    color: var(--light) !important;
}
.myGoalTable tr.odd td,
.myGoalTable tr.even td {
    color: #E7E7E7;
}

/* .tableScroll .boocking-table {
    height: ;
} */

/* Data table loading */

.brand-loading {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    top: 0;
    left: 0;
    z-index: 9999;
}

 .indicate-box-two { 
  animation-name: indicateOne;
  animation-duration: 0.4s;
  animation-iteration-count: infinite;
  /* animation-timing-function: ease-in-out; */
}
.indicate-box-one{
    animation-name: indicateTwo;
    animation-duration: 0.4s;
    animation-iteration-count: infinite;
    /* animation-timing-function: ease-in-out; */
}

.indicate-box-one {
    width: 14px;
    height: 14px;
    background-color: var(--light-green);
    border-radius: 50%;
}
.indicate-box-two {
    width: 14px;
    height: 14px;
    background-color: var(--light-green);
    border-radius: 50%;
}

.brand-loading > .loding-container {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -55px;
    right: 0;
    margin: auto;
}

@keyframes indicateOne {
  /* from {background-color: var(--light-green);} */
  /* to {background-color: var(--green);} */
  0%   {background-color: var(--light-green);}
  25%  {background-color: var(--light-green);}
  50%  {background-color: var(--green);}
  100% {background-color: var(--green);}
}
@keyframes indicateTwo {
  /* from {background-color: var(--light-green);} */
  /* to {background-color: var(--green);} */
  0%   {background-color: var(--green);}
  25%  {background-color: var(--green);}
  50%  {background-color: var(--light-green);}
  100% {background-color: var(--light-green);}
}

.hover-info {
    position: relative;
    display: inline-block;
    z-index: 9999;
}

.hover-info .info-tooltip {
    visibility: hidden;
    width: 200px;
    background-color: #555;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 5px;
    padding-left: 10px;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Position the tooltip above the icon */
    left: 50%;
    margin-left: -100px; /* Center the tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

.hover-info .info-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.hover-info:hover .info-tooltip {
    visibility: visible;
    opacity: 1;
}

.tableScroll .boocking-table .table tbody td {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.tableScroll .boocking-table thead th:first-child, .tableScroll .boocking-table tbody td:first-child {
    padding-left: 20px !important;
}

.dataTables_length label,
.dataTables_filter label {
    color: var(--light) !important;
}
.dataTables_info {
    color: var(--light) !important;
}
/* Style the x button (clear button in search input) */
.dataTables_filter input[type="search"]::-webkit-search-cancel-button {
    color: grey;
    cursor: pointer;
}
.table > :not(caption) > * > * {
    border-bottom-color: #6262624D !important;
    padding: 1rem 0.5rem !important;
}
.dataTables_length select {
    margin: 0 10px !important;
}
.dataTables_length select,
.dataTables_filter input {
    background-color: transparent !important;
    border-color: var(--border-light) !important;
    color: var(--light) !important;
}
.dataTables_wrapper > div {
    margin-bottom: 20px !important;
}

/* Credits page */
.fixed-head-datatable .dataTables_wrapper > div { margin-bottom: 0 !important; }
.fixed-head-datatable .dataTables_wrapper .dataTables_filter { display: none; }
.fixed-head-datatable .dataTables_wrapper > .row { margin-right: 0 !important; margin-left: 0 !important; }
.fixed-head-datatable .dataTables_wrapper > .row div[class*="col-"]{padding: 0;}
.fixed-head-datatable table.dataTable { margin-top: 0 !important; }
.dtfh-floatingparenthead {height: auto !important; border-bottom: 1px solid var(--border-light);}
.dtfh-floatingparenthead, 
.dtfh-floatingparenthead .fixedHeader-floating > thead > tr th{ background-color: var(--secondary); } 
table.dataTable.nowrap th, table.dataTable.nowrap td { white-space: normal; word-wrap: break-word;  }
.table.fixedHeader-locked { background-color: var(--secondary); }
.table.dataTable { margin-top: 0 !important; margin-bottom: 0 !important; }


.dataTables_wrapper select {
    padding: 0.375rem 2.25rem 0.375rem 0.75rem !important;
    font-size: 1rem !important;
}
.dataTables_wrapper input {
    padding: 0.375rem 0.75rem !important;
    font-size: 1rem !important;
}
.dataTable th,
.table th {
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    font-size: 14px;
    padding: 0.9rem 0.5rem !important;
}
.dataTable th:first-child,
.table th:first-child {
    border-left: 1px solid var(--border-light);
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.dataTable th:last-child,
.table th:last-child {
    border-right: 1px solid var(--border-light);
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.table thead th {
    background-color: var(--charcol);
}
.table tbody td {
    font-size: 14px;
}
.myGoalTable td,
th {
    vertical-align: middle;
    font-size: 14px;
}
.imageSec {
    width: 80px;
    height: 70px;
}
.dataTables_paginate ul.pagination li {
    margin: 0 3px;
}
.dataTables_paginate ul.pagination li.paginate_button a {
    background-color: transparent !important;
    border-color: var(--border-light) !important;
    border-radius: 5px;
    color: #fff !important;
}
.dataTables_paginate ul.pagination li.paginate_button.active a {
    background-color: var(--slate) !important;
    border-color: var(--slate) !important;
}
.dataTables_paginate ul.pagination li.paginate_button.disabled a {
    color: var(--muted) !important;
}
.btnMaxW {
    max-width: 70px;
    width: 70px;
}
th.dow {
    padding: 5px;
    font-weight: 300;
}
.datepicker table tr td.active.active {
    background-image: var(--green) !important;
    background-color: var(--green) !important;
    border-radius: 50px;
}
.datepicker table tr td span {
    color: var(--light);
}
.datepicker table tr td span.active.active {
    background-color: var(--green);
    background-image: var(--green);
    color: var(--light);
}
.datepicker table tr td span.focused,
.datepicker table tr td span:hover {
    background-color: var(--green);
    background-image: var(--green);
    color: var(--light);
}
.datepicker table tr td span.focused.active {
    background-color: var(--green);
    background-image: var(--green);
    color: var(--light);
}
.datepicker .datepicker-switch {
    color: var(--light);
}
.datepicker .datepicker-switch:hover {
    color: var(--dark);
}
.calendarSection .select2-container--default .select2-selection--single {
    background-color: transparent;
    border-color: var(--border-light);
}
.calendarSection
    .select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    color: var(--light);
}
.locationMap .select2-container--default .select2-selection--single {
    padding-left: 30px;
}
.locationIcon {
    top: 7px;
    left: 7px;
}

/* Use the appropriate color value */
.collapse.navbar-collapse {
    background-color: transparent; /* Change this to your desired color */
    /* height: 0px; */
    margin-left: 0px;
    padding-left: 0px;
  }

/* globally select2 styles */
.select2-dropdown {
    background-color: var(--dark);
    border-color: var(--border-light);
}
.select2-container--open .select2-dropdown--below {
    background-color: var(--dark);
    border-color: var(--border-light);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: transparent;
    border-color: var(--border-light);
}
.select2-container--default
    .select2-results__option--highlighted[aria-selected] {
    background-color: var(--secondary) !important;
    color: var(--light) !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--dark) !important;
}
.select2-results__option[aria-selected] {
    color: var(--light);
}
.select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    line-height: 42px !important;
}
.select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
    height: 42px !important;
}
.select2-container .select2-selection--single {
    height: 42px !important;
}
.select2-container .select2-selection--single .select2-selection__rendered {
    font-size: 14px !important;
}
/* globally select2 styles */
.max-w-100 {
    max-width: 100% !important;
}
.day_selected{
    background-color: var(--green) !important;
}
.slots_carousal button:hover {
    background-color: #131313;
    border-radius: 3px;
}
.slots_carousal button label {
    display: none;
}
/* datatable */
.notification-drop {
    max-width: 250px;
    width: 250px;
    max-height: 300px;
    overflow-y: auto;
}
.booking_bg .btn {
    margin: 0 5px; /* Adjust the space between buttons */
    width: calc(100% - 10px); /* Adjust the button width */
}
.notification-drop li {
    padding: 5px 10px 5px 10px;
}
.notification-drop li a {
    border-bottom: 1px solid var(--border-light);
    padding: 0 0 10px 0;
}
.notification-drop li:last-child a {
    border-bottom: none;
    padding: 0;
}
.datepicker-dropdown {
    background-color: #282828 !important;
    border: 1px solid var(--border-light);
    padding: 20px;
    border:none;
    border-radius: 10px;
}
.datepicker td, .datepicker th {
    padding: 8px;
}
.datepicker .datepicker-switch{
    font-weight: 600;
}
.datepicker-days .old.day {
    color: var(--muted) !important;
}
.datepicker-days .day {
    color: var(--light) !important;
    font-weight: 400;
    padding: 8px 10px;
}
.datepicker-days .day:hover {
    color: white !important;
    border-radius: 50px;
}
.datepicker table tr td.day:hover {
    background:#F04D23;
}
.datepicker-days .active.day:hover {
    color: var(--light) !important;
}
.datepicker-dropdown:before {
    display: none;
}
.datepicker-dropdown:after {
    display: none;
}
.datepicker-days .table-condensed thead th {
    color: var(--light) !important;
}
.datepicker-days .table-condensed thead th:hover {
    color: var(--dark) !important;
}
.datepicker-days .table-condensed thead th.dow:hover {
    color: var(--light) !important;
}
.avatar-upload {
    position: relative;
    max-width: 300px;
}
.avatar-upload .avatar-edit {
    position: absolute;
    left: 0;
    z-index: 1;
    top: 0;
}
.avatar-upload .avatar-edit input {
    display: none;
}
.avatar-upload .avatar-edit input + label {
    display: inline-block;
    margin-bottom: 0;
    cursor: pointer;
    font-weight: normal;
    transition: all 0.2s ease-in-out;
    width: 300px;
    height: 251px;
}
.avatar-upload .avatar-preview {
    width: 100%;
    height: 251px;
    position: relative;
    border: 1px dashed var(--muted);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}
.avatar-upload .avatar-preview > div {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    cursor: pointer;
}
.goalIMG {
    opacity: 0.1;
}
.opacity-1 {
    opacity: 1;
}
.myBookings {
    color: var(--muted);
}
.myBookings:hover {
    background-color: #fff;
    color: var(--green) !important;
}
.myBookings.active {
    background-color: #fff;
    color: var(--green) !important;
}
.calenderIconBg {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.calenderGiftBg {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.cursor-pointer {
    cursor: pointer;
}
.threeDot:hover {
    color: var(--light) !important;
}
.userDetails {
    margin: 0 !important;
    position: fixed;
    right: 0;
    max-width: 500px;
    width: 500px;
}
.userDetails .modal-content {
    min-height: 100vh;
}
.userDetails .modal-body {
    overflow-y: auto;
}
.userDetailsPop.fade, .membershipModal.show{
    background-color: rgb(0 0 0 / 50%) !important;
}
.modal.fade{
    background-color: rgb(0 0 0 / 50%) !important;
}
.modal.show{
    background-color: rgb(0 0 0 / 50%) !important;
}
.filterByLocation {
    max-width: 370px;
    width: 370px;
}
/* .filterByType {
    max-width: 250px;
    width: 250px;
} */
.filterByLocation .filterSearchList {
    max-height: 279px;
    overflow-y: auto;
}
.filterByLocation li {
    font-size: 14px;
}
.filters .input-group-text {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.filterByType .form-check-input {
    background-color: transparent;
    border-color: var(--border-light);
}
.filterByType .form-check-input:checked {
    background-color: var(--green) !important;
    border-color: var(--green);
}
.filterByType .form-check-input:focus {
    box-shadow: none !important;
}
.form-select.bg-transparent {
    color: #5e5e5e;
    background-size: 6% 20%;
}
.dataTable {
    overflow-x: auto;
}
#bookingActive_wrapper .dataTables_scrollBody thead,
#bookingComplete_wrapper .dataTables_scrollBody thead,
#bookingCancelled_wrapper .dataTables_scrollBody thead,
#packages_wrapper .dataTables_scrollBody thead,
#all_gym_wrapper .dataTables_scrollBody thead {
    display: none;
}
/* #example_wrapper .row.dt-row .col-sm-12{overflow-y: auto;} */
.btn_height_48 {
    min-height: 48px;
    line-height: 34px;
}
.hstack {
    align-items: start !important;
}
.hstack .vr {
    padding: 0 !important;
}
.or {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid var(--border-light);
    line-height: 0.1em;
    margin: 10px 0 20px;
}

.or span {
    background: var(--secondary);
    padding: 0 10px;
    color: var(--dark-tab);
}
.check_right {
    padding-left: 0;
    padding-right: 1.5em;
}
.check_right .form-check-input {
    float: right;
    margin-right: -1.5em;
    background-color: var(--secondary);
    border-color: var(--green);
    width: 1.2em;
    height: 1.2em;
}
.check_right .form-check-input:checked {
    background-color: var(--green);
}
.check_right .form-check-input:focus {
    box-shadow: none;
}
.custom_btn {
    min-width: 90px;
    font-size: 14px;
}
.dobRadius {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.customW_dob {
    width: 200px;
    max-width: 200px;
    margin-left: auto;
}
.animate {
    animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
}
@keyframes slideIn {
    0% {
        transform: translateY(1rem);
        opacity: 0;
    }
    100% {
        transform: translateY(0rem);
        opacity: 1;
    }
    0% {
        transform: translateY(1rem);
        opacity: 0;
    }
}
@-webkit-keyframes slideIn {
    0% {
        -webkit-transform: transform;
        -webkit-opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        -webkit-opacity: 1;
    }
    0% {
        -webkit-transform: translateY(1rem);
        -webkit-opacity: 0;
    }
}
.slideIn {
    -webkit-animation-name: slideIn;
    animation-name: slideIn;
}

/* day list tabs */
.dayTab {
    border-radius: 5px 0 0 5px !important;
    border-color: transparent;
    color: #E7E7E7;
    background-color: #282828;
    font-weight: 600;
    padding: 8px 30px;
}
.newBookingTab .dayTab, .newBookingTab .listTab{
    padding: 10px 60px !important;
}
.listTab {
    border-radius: 0 5px 5px 0 !important;
    border-color: var(--green) !important;
    background-color: #282828;
    padding: 10px 30px;
    font-weight: 600;
}
.credtit_giftTab{
    border-radius: 5px 0px 0px 5px !important;
}
.credtit_giftTab.active{
    background-color: var(--green);
}
.credit_packageTab{
    border-radius: 0px 5px 5px 0px !important;
}
.day-view-select{
    background-size: 10% 25%;
    background-color: #282828;
}
.dayTab.active,
.listTab.active,
.dayTab:hover,
.listTab:hover {
    background-color: var(--green);
}
.arrow_down[aria-expanded="true"] img {
    transform: rotate(180deg);
}
/* .myBookingContent .dataTables_wrapper  .row{flex-flow: column;} */
.myBookingContent .dataTables_wrapper .row .col-sm-12.col-md-6 {
    width: 50%;
}
/* .dataTables_filter {float: left !important;} */
.clearboth {
    clear: both;
}
.dataTables_info {
    float: left;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    padding-left: 15px;
}
div.dataTables_wrapper div.dataTables_info {
    padding-top: 15px;
    font-size: 14px;
    padding-bottom: 20px;
}
.dataTables_paginate {
    padding-top: 0.85em;
}
.dropdown.bootstrap-select {
    margin-left: auto !important;
    margin-bottom: 15px;
}
.dropdown.bootstrap-select .dropdown-toggle {
    background-color: transparent;
    border-color: var(--border-light);
    color: var(--border-light);
}
.bootstrap-select .dropdown-toggle:focus {
    outline: none !important;
    outline-offset: 0 !important;
}
.selectpicker + .dropdown-toggle + .dropdown-menu {
    background-color: var(--dark);
    border-color: var(--dark-tab);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
.selectpicker + .dropdown-toggle + .dropdown-menu ul.dropdown-menu.inner {
    background-color: transparent;
}
.selectpicker + .dropdown-toggle + .dropdown-menu ul.dropdown-menu.inner li a {
    border-bottom: 1px solid #3e3e3e;
    padding: 10px 0;
    margin: 0 15px;
    width: auto;
    font-size: 13px;
    font-weight: 600;
}
.selectpicker
    + .dropdown-toggle
    + .dropdown-menu
    ul.dropdown-menu.inner
    li:last-child
    a {
    border-bottom: none;
}
.selectpicker
    + .dropdown-toggle
    + .dropdown-menu
    ul.dropdown-menu.inner
    li
    a
    span {
    color: var(--light);
}
.selectpicker
    + .dropdown-toggle
    + .dropdown-menu
    ul.dropdown-menu.inner
    li
    a.active {
    background-color: transparent !important;
}
.selectpicker
    + .dropdown-toggle
    + .dropdown-menu
    ul.dropdown-menu.inner
    li
    a:hover {
    background-color: transparent !important;
}
.selectpicker
    + .dropdown-toggle
    + .dropdown-menu
    ul.dropdown-menu.inner
    li.no-results {
    background-color: var(--dark);
    color: var(--light);
}
.selectpicker + .dropdown-toggle + .dropdown-menu input[type="search"] {
    background-color: transparent;
    color: var(--light);
    border-color: var(--border-light);
}
.selectpicker + .dropdown-toggle + .dropdown-menu .bs-searchbox {
    padding: 10px 15px !important;
}
.modify-drop_down {
    background-color: var(--dark);
    border-color: var(--dark-tab);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
.modify-drop_down li a {
    border-bottom: 1px solid #3e3e3e;
    padding: 10px 0;
    margin: 0 15px;
    width: auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--light);
}
.modify-drop_down li:last-child a {
    border-bottom: none;
}

.p-absolute {
    position: absolute;
}
.btn:first-child:active {
    background-color: inherit;
}
.dataTables_filter input[type="search"] {
    width: 350px !important;
    color: var(--border-light) !important;
    font-weight: 400;
}
.calendarSection {
    max-width: 350px;
}
/* day list tabs */

/* custom checkbox button */
.checkbox_btn {
    background-color: transparent;
    border-radius: 5px;
    border: none;
    flex: 0 1 auto; /* This allows the button to grow and shrink but respects the min-width */
    /* overflow: hidden; */
    float: left;
    white-space: nowrap;
}
.seatSize{
    gap: 1rem;
}
.seatSize .checkbox_btn{
    background-color: #617332;
}
.seatSize .checkbox_btn label span {
    padding: 15px 30px !important;
    background-color: #262626;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: #262626 !important;
    border-radius: 0;
    min-width: 94px;
  }
.seatSize .checkbox_btn label span small{
    font-weight: bold;
}
.checkbox_btn label {
    float: left;
    border-radius: 5px;
}
.checkbox_btn label span {
    text-align: center;
    padding: 5px 12px !important;
    display: inline-block;
    font-size: 11px;
    cursor: pointer;

    /* border: 1px solid var(--green) !important; */
    border-radius: 5px;
}
.filters .checkbox_btn label span{
    padding: 8px 16px !important;
    font-size: 12px !important;
    font-weight: 500;
    color: #dddddd !important;
    min-width: 90px;

}
.filters .checkbox_btn label input + span {
    color: white;
    /* background-color: #0B0B0B; */
}
.filters {
    display: grid !important;
    grid-auto-flow: row dense;
    grid-template-columns: repeat(auto-fill, minmax(90px, max-content)); /* Change to 'auto-fill' and adjust width */
    grid-auto-rows: max-content;
    padding: 5px 0;
    overflow-x: hidden; 
    -webkit-overflow-scrolling: touch;
    gap: 0.2rem;
    justify-content: start; /* Align grid items to the start (left) */
}
.protocolFilter{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: grid !important;
    grid-auto-flow: column;
    grid-template-rows: auto;
    padding: 0 5px;
    grid-auto-columns: max-content;  
    visibility: hidden;
}
.checkbox_btn label input {
    position: absolute;
    display: none;
    color: var(--light) !important;
}
.checkbox_btn label input + span {
    color: var(--light);
    background-color: #252525;
}

.user-tags label input + span {
    color: var(--light);
    background-color: #3c611a !important;
    opacity: 50%;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.checkbox_btn .tags label input:checked  + span {
    color: var(--light);
    background-color: #252525;
}

.checkbox_btn input:checked + span {
    color: var(--light);
}
.filled input:checked + span {
    background-color: var(--green) !important;
    opacity: 1 !important;
}
.cards-height{
    max-height: 300px;
}
.filters_blue .checkbox_btn {
    margin: 4px;
    background-color: transparent;
    border-radius: 4px;
    border: 1px solid var(--primary);
    /* overflow: hidden; */
    float: left;
    white-space: nowrap;
}
.filters_blue .checkbox_btn label {
    float: left;
}
.filters_blue .checkbox_btn label span {
    text-align: center;
    padding: 5px 15px;
    display: block;
    font-size: 10px;
    cursor: pointer;
}
.filters_blue .checkbox_btn label input {
    position: absolute;
    display: none;
    color: var(--light) !important;
}
.filters_blue .checkbox_btn label input + span {
    color: var(--light);
}
.filters_blue .checkbox_btn input:checked + span {
    color: var(--light);
}
.filters_blue .filled input:checked + span {
    background-color: var(--primary);
}

.slots_carousal .owl-stage {
    display: flex;
    align-items: center;
}
.slotDot {
    width: 6px;
    height: 6px;
    padding: 3px;
}
button{
    border: none;
}
.item_selected {
    background-color: #262626;
}
.item_selected h5, .item_selected h4{
    color:var(--green) !important; 
}
.protocolCard{
    background-color: #181818 !important;
    border: 2px solid #181818;
}
.filter_profile {
    width: 114px;
    height: 103px;
    border-radius: 22px;
}
.protocol_pop_up thead th,
.protocol_pop_up tbody td {
    padding-left: 60px !important;
}
.form-label {
    font-size: 14px;
}
.userSeachImg {
    margin-top: -80px;
}
.mw-100 {
    max-width: 100% !important;
}
.clientDetails {
    max-width: 700px;
}
.filters_pos {
    position: absolute;
    top: -1px;
    right: 0;
}
.img-cover {
    object-fit: cover; /* Cover the container without losing aspect ratio */
    width: 100%; /* Ensure it covers horizontally */
    height: auto; /* Ensure it covers vertically */
}
div.dataTables_processing>div:last-child>div { display: none }
div.dataTables_processing.card { background-color: transparent !important }

#calendar {
    position: relative;
    top: 0;
    /* max-height: 500px; */
    left: 0;
    right: 0;
    height: 100vh;
    bottom: 0;
    border: 0px solid #626262;
    border-radius: 10px;
    overflow: visible;
    margin-right: -20px;
}
.timeline {
    position: absolute;
    top: 0;
    bottom: 0px;
    left: 0px;
    width: 100px;
    background-color: #1f1f1f;
    border-right: 1px solid #626262;
    overflow: hidden;
    z-index: 3;
}
.mb-0 {
    margin: 0;
}
.label-time {
    height: 25px;
    border-bottom: 1px solid transparent;
}
.timeSlot {
    border-bottom: 1px solid #626262;
}
.label-time p.time {
    position: relative;
    color: #fff;
    text-align: center;
}
.cal-wrapper {
    position: absolute;
    top: 0;
    left: 101px;
    bottom: 0px;
    right: 0px;
    background-color: #1f1f1f;
    overflow: scroll;
}
.cal-date {
    position: absolute;
    top: 0px;
    border-right: none;
    width: 182px;
    left: 101px;
}
.cal-date1 {
    left: 282px;
}
.cal-date2 {
    left: 364px;
}
.cal-date3 {
    left: 546px;
}
.cal-date4 {
    left: 728px;
}
.cal-date5 {
    left: 910px;
}
.cal-date6 {
    left: 1092px;
}
.cal-time {
    height: 25px;
    border-bottom: 1px solid #626262;
}
.firstBox {
    cursor: pointer;
    border: 0 !important;
    border-radius: 0 !important;
    position: absolute;
    inset: 0 !important;
    z-index: 9999999;
    display: flex;
    flex-direction: column;
    border-right: 3px solid var(--dark) !important;
    padding: 0 5px 0px 0;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: 1px;
    justify-content: start;
    /* max-width: 250px; */
}

/* Hide some of the children */
#calendar > div.fc-view-harness.fc-view-harness-active > div > table > tbody > tr > td > div > div > div > div.fc-timegrid-slots > table > tbody > tr:nth-child(1) > td.fc-timegrid-slot.fc-timegrid-slot-label.fc-scrollgrid-shrink > div > div {
    display: none;
}

#calendar > div.fc-view-harness.fc-view-harness-active > div > table > tbody > tr > td > div > div > div > div.fc-timegrid-slots > table > tbody > tr:nth-last-child(1) > td.fc-timegrid-slot.fc-timegrid-slot-label.fc-scrollgrid-shrink > div > div {
    display: none;
}

#calendar > div.fc-view-harness.fc-view-harness-active > div > table > tbody > tr > td > div > div > div > div.fc-timegrid-slots > table > tbody > tr:nth-last-child(2) > td.fc-timegrid-slot.fc-timegrid-slot-label.fc-scrollgrid-shrink > div > div {
    display: none;
}

#calendar > div.fc-view-harness.fc-view-harness-active > div > table > tbody > tr > td > div > div > div > div.fc-timegrid-slots > table > tbody > tr:nth-last-child(3) > td.fc-timegrid-slot.fc-timegrid-slot-label.fc-scrollgrid-shrink > div > div {
    display: none;
}

.inProgress {
    background-color: #324A1B !important;
}
.notStarted {
background-color: #12150A !important;
}
.completed {
/* background-color: #0E0B1D; */
background-color: #323232;
}
.noShow {
    background-color: #3B0004 !important;
}
.current {
    background-color: #81B100 !important;
}
.firstBox-data-row .col {
    display: flex;
    justify-content: end;
}
.firstBoxstatus {
    display: flex;
    text-align: end;
    justify-content: end;
}
.firstBox-status {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    justify-content: start;
    padding: 0px 0px 5px 10px;
}
.firstBoxtoggle {
    background-color: #8893f8;
    width: 25px;
    height: 30px;
    border-radius: 5px 5px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.firstBoxstatus span {
    padding: 10px 5px 10px 5px;
    font-size: 10px;
    border-radius: 5px 5px 0 0;
    height: 30px;
    width: 25px;
}
.statusdanger {
    background-color: #ff0000;
}
.statussuccess {
    background-color: var(--green);
}
.firstBox::-webkit-scrollbar {
    width: 2px; /* Adjust the width as needed */
}
.firstBox::-webkit-scrollbar-thumb {
    background-color: var(--green); /* Adjust thumb color */
}

.firstBox::-webkit-scrollbar-track {
    background-color: #100f1b; /* Adjust track color */
}
.firstboxtruncatetext {
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
    width: 100px;
    white-space: nowrap;
}
.firstBox-main-div {
    padding: 0px 0px 0px 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.firstBox-data-two {
    font-size: 10px;
}
.firstBox-list {
    width: 25px;
    height: 20px;
}
.firstBox-data-two svg {
    width: 20px;
    height: 20px;
}
.firstbox-booking-size svg {
    width: 8px;
    height: 8px;
}
.firstbox-cancel svg {
    width: 16px;
    height: 13px;
}
.firstBox-flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 5px 0px 0px 8px;
    z-index: 999;
    position: relative;
    gap: 10px;
}
.firstBox-data {
    font-size: 11px;
}
.day-btn {
    border: navajowhite;
    font-size: 9px;
    padding: 5px 5px;
    border-radius: 3px;
}
.vertical_or {
    height: 150px;
    width: 50px;
    display: inline-block;
    text-align: center;
    padding-top: 106px;
    position: relative;
    color: #fff;
}

.vertical_or:before {
    border-left: 1px solid var(--border-light);
    content: "";
    display: block;
    height: 105px;
    left: 25px;
    position: absolute;
    top: -30px;
    width: 1px;
    z-index: 0;
}

.vertical_or:after {
    border-left: 1px solid var(--border-light);
    content: "";
    display: block;
    height: 105px;
    left: 25px;
    position: absolute;
    top: 160px;
    width: 1px;
    z-index: 0;
}

/* bootstrap-tagsinput.css file - add in local */

.bootstrap-tagsinput {
    background-color: transparent;
    border: 1px solid var(--border-light);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    display: inline-block;
    padding: 4px 6px;
    color: var(--light);
    vertical-align: middle;
    border-radius: 4px;
    max-width: 100%;
    line-height: 22px;
    cursor: text;
    font-size: 13px;
}
.bootstrap-tagsinput input {
    border: none;
    box-shadow: none;
    outline: none;
    background-color: transparent;
    padding: 0 6px;
    margin: 0;
    width: auto;
    max-width: inherit;
    color: var(--light);
}
.bootstrap-tagsinput input:focus {
    border: none;
    box-shadow: none;
}
.bootstrap-tagsinput .tag {
    margin-right: 2px;
    color: white;
    padding: 4px 5px;
    border-radius: 3px;
    font-size: 10px;
}
.bootstrap-tagsinput .tag [data-role="remove"] {
    margin-left: 8px;
    cursor: pointer;
}
.bootstrap-tagsinput .tag [data-role="remove"]:after {
    content: "x";
    padding: 0px 2px;
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 1px 2px rgba(0, 0, 0, 0.05);
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover:active {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.label-info {
    background-color: var(--primary);
}
.graphLeft {
    margin-left: -65px;
}

#calendar {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0px solid #626262;
    border-radius: 10px;
    overflow: visible;
}
.timeline {
    position: absolute;
    top: 0;
    bottom: 0px;
    left: 0px;
    width: 100px;
    background-color: #1f1f1f;
    border-right: 1px solid #626262;
    overflow: hidden;
    z-index: 3;
}
.mb-0 {
    margin: 0;
}
.label-time {
    height: 25px;
    border-bottom: 1px solid transparent;
}
.timeSlot {
    border-bottom: 1px solid #626262;
}
.label-time p.time {
    position: relative;
    color: #fff;
    text-align: center;
}
.cal-wrapper {
    position: absolute;
    top: 0;
    left: 101px;
    bottom: 0px;
    right: 0px;
    background-color: #1f1f1f;
    overflow: scroll;
}
.cal-date {
    position: absolute;
    top: 0px;
    border-right: none;
    width: 182px;
    left: 101px;
}
.cal-date1 {
    left: 282px;
}
.cal-date2 {
    left: 364px;
}
.cal-date3 {
    left: 546px;
}
.cal-date4 {
    left: 728px;
}
.cal-date5 {
    left: 910px;
}
.cal-date6 {
    left: 1092px;
}
.cal-time {
    height: 25px;
    border-bottom: 1px solid #626262;
}
.vertical_or {
    height: 150px;
    width: 50px;
    display: inline-block;
    text-align: center;
    padding-top: 106px;
    position: relative;
    color: #fff;
}

.vertical_or:before {
    border-left: 1px solid var(--border-light);
    content: "";
    display: block;
    height: 105px;
    left: 25px;
    position: absolute;
    top: -30px;
    width: 1px;
    z-index: 0;
}

.vertical_or:after {
    border-left: 1px solid var(--border-light);
    content: "";
    display: block;
    height: 105px;
    left: 25px;
    position: absolute;
    top: 160px;
    width: 1px;
    z-index: 0;
}

/* bootstrap-tagsinput.css file - add in local */

.bootstrap-tagsinput {
    background-color: transparent;
    border: 1px solid var(--border-light);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    display: inline-block;
    padding: 4px 6px;
    color: var(--light);
    vertical-align: middle;
    border-radius: 4px;
    max-width: 100%;
    line-height: 22px;
    cursor: text;
    font-size: 13px;
}
.bootstrap-tagsinput input {
    border: none;
    box-shadow: none;
    outline: none;
    background-color: transparent;
    padding: 0 6px;
    margin: 0;
    width: auto;
    max-width: inherit;
    color: var(--light);
}
.bootstrap-tagsinput input:focus {
    border: none;
    box-shadow: none;
}
.bootstrap-tagsinput .tag {
    margin-right: 2px;
    color: white;
    padding: 4px 5px;
    border-radius: 3px;
    font-size: 10px;
}
.bootstrap-tagsinput .tag [data-role="remove"] {
    margin-left: 8px;
    cursor: pointer;
}
.bootstrap-tagsinput .tag [data-role="remove"]:after {
    content: "x";
    padding: 0px 2px;
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 1px 2px rgba(0, 0, 0, 0.05);
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover:active {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.label-info {
    background-color: var(--primary);
}
.graphLeft {
    margin-left: -65px;
}
.loader {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 999999999;
}
.spinner {
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    position: absolute;
}
.spinner-grow {
    width: 4rem;
    height: 4rem;
}
.thumbImg {
    width: 50px;
    height: 50px;
}
.dropDSearch .bootstrap-select > .dropdown-toggle {
    padding: 9px 10px;
}
.selectedCard {
    border: 2px solid var(--green);
}
.dataTables_scroll {
    overflow: auto;
    width: 100%;
}
.white-close {
    background: transparent
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 8-1.414z'/%3e%3c/svg%3e")
        center/1em auto no-repeat;
}
#email-error,
#password-error {
    display: none !important;
}


/* Marshal CSS - Dec 18 2023 */
.paymentTabs,
.paymentTabs1 {
    margin: 0;
    padding: 0;
    list-style: none;
}
.paymentTabs li,
.paymentTabs1 li {
    display: inline-block;
    border: 0px;
    background-color: var(--tertiary);
    margin: 0 !important;
    padding: 0;
}
.paymentTabs li:first-child,
.paymentTabs1 li:first-child {
    border-right: 0;
    border-radius: 3.05px 0px 0px 3.05px !important;
}
.paymentTabs li:last-child,
.paymentTabs1 li:last-child {
    border-left: 0;
    border-radius: 0 3.05px 3.05px 0 !important;
}
.paymentTabs li a,
.paymentTabs1 li a {
    font-family: "Open Sans";
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 0px;
    text-align: center;
    padding: 10px 30px;
    display: block;
    color: #E7E7E7;
    text-decoration: none;
    cursor: pointer;
}

.paymentTabs li:first-child a.active,
.paymentTabs1 li:first-child a.active {
    background-color: #617332;
    cursor: default;
    pointer-events: none;
    border-radius: 3.05px 0px 0px 3.05px !important;
}

.paymentTabs li:last-child a.active,
.paymentTabs1 li:last-child a.active {
    background-color: #617332;
    cursor: default;
    pointer-events: none;
    border-radius: 0 3.05px 3.05px 0 !important;
}



.paymentTabContent,
.paymentTabContent1 {
    display: none;
}
.paymentTabContent.show,
.paymentTabContent1.show {
    display: unset;
}
.paymentTabs li:not(first-child),
.paymentTabs1 li:not(first-child) {
    margin-left: -4px !important;
}



/* #email-error,#password-error{color: var(--doc-red); font-size: 12px;} */
@media (min-width: 768px) {
    #wrapper {
        padding-left: 250px;
    }
    #wrapper.toggled {
        padding-left: 0;
    }
    #sidebar-wrapper {
        width: 250px;
    }
    #wrapper.toggled #sidebar-wrapper {
        width: 0;
    }
    #page-content-wrapper {
        padding: 15px 20px 15px 40px;
        position: relative;
    }
    #wrapper.toggled #page-content-wrapper {
        position: relative;
        margin-right: 0;
    }
}
/* Sidebar Toggle Styles */
@media (max-width: 1385px) {
    .filters_pos {
        position: static;
        margin-left: auto;
    }
}
@media (max-width: 1199px) {
    .hstack .vr {
        display: none;
    }
    .dataTables_filter input[type="search"] {
        width: 250px !important;
    }
}
@media (max-width: 991px) {
    .mob-nav {
        background-color: var(--secondary);
        padding: 10px 20px;
        margin-top: 5px;
    }
    .badge-notifcation {
        left: 25px;
    }
    #menu-toggle {
        top: 54px;
    }
    .dataTables_wrapper .col-sm-12.col-md-6 {
        width: 100%;
        text-align: center;
        margin-bottom: 15px;
    }
    .dataTables_wrapper .col-sm-12.col-md-6 .dataTables_filter {
        text-align: center;
    }
    .dataTables_wrapper .col-sm-12.col-md-5 {
        text-align: center;
        width: 100%;
        margin-bottom: 15px;
    }
    .dataTables_wrapper .col-sm-12.col-md-7 {
        margin: auto;
    }
    .notification-drop {
        width: 100%;
        max-width: 100%;
    }
    .p-absolute {
        position: static;
    }
    .dropdown.bootstrap-select {
        margin-left: 0 !important;
        width: 100% !important;
    }
    .dataTables_info {
        float: none;
    }
    .showDataTable {
        margin-right: 15px;
    }
    .searchDataTable {
        margin-left: 0 !important;
    }
}
@media (max-width: 768px) {
    #menu-toggle {
        transform: rotate(180deg) !important;
        top: 5px;
        position: absolute;
        right: -45px;
    }
    .toggled #menu-toggle {
        transform: rotate(360deg) !important;
        right: -35px;
    }
    .dataTables_length,
    .dataTables_info {
        margin-bottom: 15px;
    }
    .form-select.bg-transparent {
        background-size: 4% 15%;
    }
    .address {
        font-size: 14px;
    }
    .userDetails {
        left: 0;
        right: auto;
    }
    .toggled .sidebar-nav {
        display: block;
    }
    #sidebar-wrapper{display: none;}
}
@media (max-width: 575px) {
    .border-sm-none {
        border-color: transparent !important;
    }
    div#example_filter label input {
        width: 100%;
        float: left;
        margin-left: 0;
        margin-top: 5px;
    }
    .vertical_or {
        display: none !important;
    }
    .customW_dob {
        margin-left: revert;
        width: 100%;
        max-width: 100%;
    }
}
@media (max-width: 768px) {
    #menu-toggle {
        transform: rotate(180deg) !important;
        top: 5px;
        position: absolute;
        right: -45px;
    }
    .toggled #menu-toggle {
        transform: rotate(360deg) !important;
        right: -35px;
    }
    .dataTables_length,
    .dataTables_info {
        margin-bottom: 15px;
    }
    .form-select.bg-transparent {
        background-size: 4% 15%;
    }
    .address {
        font-size: 14px;
    }
    .userDetails {
        left: 0;
        right: auto;
    }
    .toggled .sidebar-nav {
        display: block;
    }
}
@media (max-width: 575px) {
    .border-sm-none {
        border-color: transparent !important;
    }
    div#example_filter label input {
        width: 100%;
        float: left;
        margin-left: 0;
        margin-top: 5px;
    }
    .vertical_or {
        display: none !important;
    }
    .customW_dob {
        margin-left: revert;
        width: 100%;
        max-width: 100%;
    }
}
#bookingsTable tr:hover td,
#usersListTable tr:hover td,
#transactionTable tr:hover td {
    background: #303030;
    cursor: pointer;
}
.modal-content .dataTables_filter input[type="search"] {
    width: auto !important;
}

.addImageLogo {
    height: 100%;
    width: 100%;
    position: absolute;
    object-fit: cover !important;
}
#calenderBookingDate {
    background: #000;
    padding: 8px 20px;
    border-radius: 20px;
    border: 1px solid var(--green);
    display: flex;
    align-items: center;
}
#calenderBookingDate input::placeholder {
    color: #d6d6d6;
}
#calenderBookingDate input {
    margin-top: 6px;
    box-shadow: none;
    background: unset;
    color: #fff;
    border: 0;
    width: 117px;
    font-size: 18px;
    outline: none !important;
    display: block !important;
}
td.disabled:hover {
    color: #999 !important;
}
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
    background: 0 0;
    color: #999 !important;
    cursor: default;
    opacity: 0.35 !important;
}
.fc-theme-standard td,
.fc-theme-standard th {
    text-align: center;
    width: 90%;
}

fc-timegrid-slot-lane {
    background-color: #000;
}
.fc .fc-timegrid-axis-frame {
    justify-content: center !important;
    padding: 30px;
    color: white;
    text-align: center;
    width: 100%;
}

.fc .fc-timegrid-slot-label-cushion {
    padding-right: 0px;
}

.fc-direction-ltr .fc-timegrid-slot-label-frame {
    text-align: right;
    padding: 0px 9px 0px 30px;
    display: flex;
    justify-content: end;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
    text-align: end;
    color: white;
    min-height: 50px;
    align-items: start;
    line-height: 3px;
}
.fc .fc-toolbar .fc-header-toolbar {
    margin-bottom: 0;
    padding: 00px;
    height: 0px;
    color: white;
}

.fc-toolbar {
    height: 0px !important;
}

.fc-theme-standard .fc-scrollgrid {
    border: none !important;
}
.fc .fc-timegrid-now-indicator-line {
    border-color: #617332;
    border-style: dashed;
}
.fc .fc-timegrid-now-indicator-arrow{
    color:#617332;
    border-color: transparent;
}
.fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 0;
    color: white;
    border-bottom: 1px solid rgba(255,255,255, 0.3) !important;
    width: 100%;
    margin: 0;
    margin-left: auto;
}

.fc-theme-standard td, .fc-theme-standard th {
    border: 1px dashed rgba(255,255,255, 0.3);
    border-left: 1px solid rgba(255,255,255, 0.3);
}
.fc .fc-col-header-cell-cushion {
    color: white !important;
}
.fc .fc-toolbar-title {
    font-size: 22px;
    position: absolute;
    left: 1.7rem;
    text-align: center;
    top: -145px;
    width: fit-content;
    margin: 0 auto;
    font-weight: 900;
    display: none;
    font-family: "HeadingNow 74";
}
/* #selectedDate { 
    font-size: 22px;
    font-weight: 500;
    font-family: "HeadingNow 75";
 } */
/* .th7-goto-today { position: absolute; top: -18px; left: 255px } */
.th7-goto-today .btn { font-size: 15px !important; font-family: "HeadingNow 74"; }
div#totalBookings { top: 12px; left: 35px; font-family: 'HEADINGNOW 74'; }

#renderGiftCardsContainer .card-purchase-btn{ position: absolute; bottom: 20px; right: 20px }
.card-description-height { min-height: 80px; }
.fc-col-header-cell .fc-scrollgrid-sync-inner {
    padding: 20px !important;
}
.fc .fc-daygrid-day.fc-day-today {
    background-color: var(--secondary) !important;
}
.fc .fc-timegrid-slot {
    background-color: #040404 !important;
}
.fc-v-event {
    background-color: transparent;
    border: 0 !important;
    /* display: block; */
    /* box-shadow: none !important; */
}
.fc-v-event .fc-event-main-frame {
    display: flex;
    flex-direction: column;
    text-align: center;
    background-color: var(--green);
    justify-content: center;
}
.fc .fc-timegrid-slot {
    height: 55px !important;
}
.fc-v-event .fc-event-title-container {
    flex-grow: 0;
}

.arrow-left svg path {
    stroke: white;
}

.arrow-datepicker {
    background-color: #313131b2;
}
.fc-timegrid-event-harness-inset .fc-timegrid-event,
.fc-timegrid-event.fc-event-mirror,
.fc-timegrid-more-link {
    box-shadow: unset !important;
}
.firstBox.disable * div.rounded,
.firstBox.disable * button,
.firstBox.disable * svg g rect {
    background: #424242 !important;
    fill: #424242 !important;
}
.firstBox.disable {
    pointer-events: none;
    opacity: 0.5;
    background-color: #0f0f0f;
    color: #454545 !important;
    background-blend-mode: saturation;
}
.btn-primary-1 {
    background-color: #281da8;
}
.firstBox.disable * h6 {
    color: #4a4a4a !important;
}

.profileModal {
    max-width: 800px;
}
.guest_bookingbox{
    max-height: 160px;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 160px;
}
.h-50{
    height: 50px !important;
}
.iti--separate-dial-code.iti--show-flags .iti__selected-dial-code {
    color: white;
}
.form-control-two{
    background-color: #1B1B1B !important;
    border:1px solid #282727;
}
.status_bookingbox{
    max-height: 120px;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 120px;  
}
.transactionPopup{
    max-width: 900px;
}
.filters_blue .checkbox_btn label span {
    font-size: 11px;
}
.btn-not-arrived {
    background-color: #0d2e0d;
    color: white;
}
.btn-arrived {
    background-color: #511d49;
    color: white;
}
.btn-due,
.btn-due:hover {
    background-color: #f44f4f;
}
.btn-cancelled {
    background-color: #ff0000;
}
.btn-complete {
    background-color: var(--green);
}
.visit-btn {
    background-color: #aa904c;
}
.tags-btn {
    background-color: var(--primary);
    font-size: 10px;
    color: white;
    border: none;
    padding: 5px 20px;
    border-radius: 3px;
}
.textarea-bg:focus {
    color: var(--dark);
}
.textarea-bg {
    background-color: #171717;
    color: rgba(255, 255, 255, 0.5);
}
.tags-button {
    font-size: 12px;
    border-radius: 3px;
    flex: 1;
    text-wrap: nowrap;
}
.footer-btn .custom_btn {
    min-width: 115px;
    padding: 8px 10px;
    border-radius: 3px;
}
.inActive {
    opacity: 50;
}
.bg-packages {
    background: #151515;
}
.form-floating input {
    background: transparent;
    color: rgba(255, 255, 255, 0.5) !important;
    border-radius: 14px;
    border-color: rgba(255, 255, 255, 0.3) !important;
    font-size: 17px;
}
.form-floating label {
    color: rgba(255, 255, 255, 0.5) !important;
}
.form-control:focus {
    color: #6c757d !important;
}
.form-control:focus {
    background-color: #181818 !important;
    box-shadow: unset !important;
}
.payment__cards {
    border-color: #4c4c4c !important;
}
.payment__cards li {
    border-left: 1px solid #4c4c4c;
}
.payment__cards .nav-pills .nav-link.active,
.payment__cards .nav-pills .show > .nav-link {
    background-color: #617332 !important;
}
.form-floating input {
    background: transparent;
    color: rgba(255, 255, 255, 0.5) !important;
    border-radius: 14px;
    border-color: rgba(255, 255, 255, 0.3) !important;
    font-size: 17px;
}
.form-floating label {
    color: rgba(255, 255, 255, 0.5) !important;
}
.form-control:focus {
    color: #6c757d !important;
}
.payment__cards {
    border-color: #4c4c4c !important;
}
.payment__cards li {
    border-left: 1px solid #4c4c4c;
}
.payment__cards .nav-link.active {
    background: #617332;
    border-radius: 0;
}
.payment__cards .nav-link {
    color: #fff;
    font-size: 11px;
}
.refund-modal [type="radio"]:checked,
.refund-modal [type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
.refund-modal [type="radio"]:checked + label,
.refund-modal [type="radio"]:not(:checked) + label {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #fff;
}
.refund-modal [type="radio"]:checked + label:before,
.refund-modal [type="radio"]:not(:checked) + label:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 2px solid #ddd;
    border-radius: 100%;
    border-radius: 5px;
}
.refund-modal [type="radio"]:checked + label:after,
.refund-modal [type="radio"]:not(:checked) + label:after {
    content: "";
    width: 17px;
    height: 17px;
    background: #617332;
    position: absolute;
    top: 0.5px;
    left: 0.5px;
    border-radius: 5px;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.refund-modal [type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.refund-modal [type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}
.refund-modal {
    width: 80% !important;
    margin: 0 auto;
}

/* New-css */
.header-main {
    padding: 0 30px !important;
}
.footerNav li a {
    font-size: 13px;
    font-weight: 300;
    color: white;
}
.footer {
    background-color: #0c0c0c !important;
}
.footer {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.footer-bottom {
    padding: 40px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.book-header-btn:hover {
    background-color: var(--success) !important;
    color: white;
}
.header-top {
    background-color: rgb(0 0 0 / 10%);
    position: fixed !important;
    left: 0;
    right: 0;
    top: 0;
    z-index: 999;
    transition: 0.5s ease-in-out;
}
.scroll-up {
    background-color: #090909 !important;
    -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.1) !important;
    position: fixed !important;
    left: 0;
    right: 0;
    top: 0;
    z-index: 999;
    transition: 0.5s ease-in-out;
}
.nav-link:hover {
    cursor: pointer;
}
.fc-theme-standard td,
.fc-theme-standard th {
    color: white;
    width: 90vh;
}
.fc-timegrid-slot  {
    min-width: 200px !important;
}

#addBooking > .datepicker-dropdown {
    position: fixed;
}

.fc .fc-timegrid-axis-frame {
    padding: 30px;
    text-align: center;
}
.error {
    display: block;
}
.waiver-hover-effect:hover {
    background-color: var(--success);
    color: white;
    transition: 0.5s ease-in-out;
}
.flatpickr-calendar,
.flatpickr-months .flatpickr-month,
span.flatpickr-weekday {
    background-color: #000 !important;
}
.flatpickr-calendar input,
.flatpickr-calendar span.select2-selection.select2-selection--single,
.flatpickr-calendar select,
.flatpickr-calendar .select2-dropdown {
    background: transparent !important;
}

.alertify-notifier .ajs-message {
    text-align: left;
    border-radius: 5px;
    font-family: 'Montserrat', sans-serif; /* Add this line for Montserrat font */
    font-size: 12px;
    font-weight: 500;
    min-width: 265px; /* Set minimum width to 200px */
    line-height: 2; /* Adjust line spacing here */
}

/* Customize padding for Alertify notification content */
.alertify-notifier .ajs-message .ajs-content {
    padding: 50px; /* Adjust the padding as needed */
    transition: fade !important;
}

.alertify-notifier .ajs-message.ajs-success.ajs-visible {
    color: #fff;
    background: rgba(38, 58, 43);
}
/* Custom fade-in animation with a delay */
@keyframes customFadeIn {
    0%, 50% { /* Adjust this percentage to control the delay duration */
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes customFadeOut {
    0% { /* Adjust this percentage to control the delay duration */
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}


.alertify-notifier .ajs-message { 
    transform: none !important; /* Prevent sliding in from the right */
    background-color: #111111fe !important;
    color: #fff;
    position: relative; /* Needed for positioning the close button */
}

/* Adding a close (X) button at the top right */
.alertify-notifier .ajs-message::after {
    content: '×'; /* The X character */
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 30px; /* Increase font size */
    font-weight: 300; /* Decrease font weight for thinner appearance */
    cursor: pointer;
}

.alertify-notifier .ajs-message.ajs-warning {
    background: rgba(252, 248, 215, 0.95);
    border-color: #999;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: black !important;
}
.select2-container--default
    .select2-results__option--highlighted[aria-selected] {
    background-color: var(--success) !important;
    color: white;
}
.header-banner {
    margin-top: 300px;
}
/* booking profile modal */
.btn-not-arrived {
    background-color: #0f2910;
    color: white;
}
.btn-arrived {
    background-color: #3c611a;
    color: white;
}
.btn-due,
.btn-due:hover {
    background-color: #f44f4f;
}
.btn-cancelled {
    background-color: #ff0000;
}
.btn-complete {
    background-color: #3b3a45;
}
.btn-noShow{
    background-color: #721919;
}

.btn-lg {
    min-width: 130px;
}

.visit-btn {
    background-color: #aa904c;
}
.tags-btn {
    background-color: var(--green);
    font-size: 10px;
    color: white;
    border: none;
    padding: 5px 20px;
    border-radius: 3px;
}
.bg-dark-two {
    background-color: #101010;
}
  .fc-timegrid-body, .fc-timegrid-body table{
    width: 100% !important;
  }
  .dayview-datepicker{
    width: auto !important;
  }
  .admin-datepicker{
    width: 60% !important;
  }
.fc-scrollgrid-shrink{
    border: none !important;
}
.fc-timegrid-slot{
    border-bottom:1px solid rgba(255,255,255, 0.3);  
}



.th7-table-scroll {
    overflow-y: scroll;
    height: calc(100vh - 210px);
    -webkit-overflow-scrolling: touch; /* Enable scroll bounce effect */
}


.booking_floating_btn{
    position: fixed;
    right: 45px;
    bottom: 30px;
    z-index: 9999;
}
.amountModal{z-index: 1056}
.amountModal::before{background-color: rgba(0, 0, 0, 0.5); content: ''; width: 100%; height: 100%; top: 0; left: 0; bottom: 0; right: 0; position: absolute;}
.amountModal .modal-dialog{z-index: 1057; max-width: 400px;}
.confirmCancelModal .modal-dialog{z-index: 1057; max-width: 360px;}
.checkBack{background-color: #121212; padding: 13px; cursor: pointer; position: relative;}
.customRadio {position: relative;}
.customRadio .checkBack input[type="radio"] {position: absolute;opacity: 0;}
.customRadio .checkBack .checkmark {position: absolute;top: 15px;right: 15px;height: 15px;width: 15px;border: 2px solid var(--green);border-radius: 50%;}
.customRadio .checkBack .customRadio:hover input~.checkmark {background-color: var(--green);}
.customRadio .checkBack .customRadio input:checked~.checkmark {border: 2px solid var(--green);}
.customRadio .checkBack .checkmark:after {content: "";position: absolute;display: none;}
.customRadio input:checked~.checkmark:after {display: block;}
.customRadio .checkBack .checkmark:after {top: -1px;left: -1px;width: 13px;height: 13px;border-radius: 50%;background: var(--green);}
.loaderDotted{background-color: rgba(0, 0, 0, 0.5); content: ''; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; position: absolute; z-index: 9999; display: flex; align-items: center; justify-content: center;}
.loaderDotted img{margin-top: -50px;}
.inputGreen.form-control:focus{background-color: var(--green) !important; border-color: var(--green) !important; color:#fff !important}


/* gift card designs gym admin */
.yourBookingsModal .btn-close {
    background: transparent
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e")
        center/1em auto no-repeat;
    left: 10px;
    top: 10px;
    z-index: 999;
    opacity: 1;
}
.yourBookingsModal {
    max-width: 800px;
}

/*  dot loader */
.dot-loader {
    left: -15px;
    position: relative;
    width: 15px;
    height: 15px;
    border-radius: 15px;
    background-color: #A1CA37;
    color: #9880ff;
    animation: dot-flashing 1s infinite linear alternate;
    animation-delay: 0.5s;
  }
  .dot-loader::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 25px;
    width: 15px;
    height: 15px;
    border-radius: 15px;
    background-color: #A1CA37;
    color: #A1CA37;
    animation: dot-flashing 1s infinite alternate;
    animation-delay: 1s;
  }
  @keyframes dot-flashing {
    0% {
      background-color: #A1CA37;
    }
    50%, 100% {
      background-color: rgba(161, 202, 55, .5)
    }
  }

  @media (min-width: 1300px) and (max-width: 1399.98px) { 
    .fc .fc-toolbar-title{
        font-size: 20px;
        left: 33px;
    }
   }
   @media (max-width: 1299.98px) {
    .fc .fc-toolbar-title{
        top: 0px;
    }
   }

   
#addBookingModal .modal-dialog {
    max-width: 200px !important;
    height: 200px !important;
    max-height: 200px !important;
}

#addBookingModal .modal-content {
    width: 100% !important;
    /* height: 100% !important; */
}

/* Style the link container */
.link-container {
    position: absolute;
    background-color: #ffffff;
    border: 1px solid #ccc;
    padding: 10px;
    z-index: 9999;
  }
  

  /* Marshal CSS */
  .customCard {
    min-height:310px; 
    max-width: 250px;
    min-width: 200px;

    box-shadow: 0px 4.658165454864502px 4.658165454864502px 0px #00000080;
  }
  .customCardDetailsHead {
    font-size: 11px;
    line-height: 13px;
    font-weight: 600;
  }
  .customCardInput {
    font-size: 12px;
    font-weight: 500;
    line-height: 10px;
    letter-spacing: 0px;
    background: linear-gradient(0deg, #131313, #131313), linear-gradient(0deg, #1B1B1B, #1B1B1B);
    border: 0.51px solid #1B1B1B !important;
    height: 45px;
    border-radius: 3px;
}
  .customCardMainHeading {
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: 0px;
    text-align: left;
  }
  .mt-genCoupon {
    margin-top: 219px;
  }
.confirmModalButtton {
    border-top: 0.5px solid #FFFFFF4D;
}
.p15 {
    padding: 15px;
}
.text-right {
    text-align: right;
}
.m0 {
    margin: 0 !important;
}
div#confirmCustomCard {
    z-index: 9999;
}
#transactionTable .details-control{
    padding-left: 0 !important;
}

/* Marshal CSS Jan 10 2023 */
#myChart1,
#myChart2,
#myChart3,
.myRow {
    width:calc(100% - 30px);
}

#myChart3 {
   margin-bottom: 30px;
}
.myRow {
    position: relative;
}
.myLoader img,
.myLoader1 img {
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
    -webkit-animation:rotating 3s linear infinite;
    -moz-animation:rotating 3s linear infinite;
    animation:rotating 3s linear infinite;
    position: relative;
    top: 50%;
    left: 50%;
}
@-moz-keyframes spin { 100% { -moz-transform:  rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); } }

@keyframes rotating {
    from {
        transform: translate(-50%,-50%) rotate(0deg);    
    }
    to {
        transform: translate(-50%,-50%) rotate(360deg);  
    }
}

.myLoader,
.myLoader1 {
    position: absolute;
    left: 0px;
    top: 45px;
    width: 100%;
    height: calc(100% - 45px);
    background-color: #151515;
    /* text-align: center; */
    box-sizing: border-box;
    z-index: 9;
}
.redText {
    color: red;
}
.GymFixedheader{
    position: sticky;
    top: 0;
    z-index: 999;
}
/* .Gymmainheader{
    padding-bottom: 100px !important;
} */
.GymTable tbody{
    background-color: #000;
}
.GymTable .table thead{
    position: sticky;
    top: 224px;
    width: 100%;
    left: 0;
    right: 0;
    background-color: #111111;
    z-index: 9;
}
.GymTable .table th {
    border:0 !important;
}
.GymTable thead::after{
    position: absolute;
    content: '';
    height: 2px;
    width: 100%;
    left: 0;
    bottom:0;
    right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.GymTable tbody td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 15px 10px 15px 15px !important;
}
.GymTable thead th{
    padding: 15px 10px 15px 15px !important;
}
.tableScroll tbody td:first-child, .tableScroll thead th:first-child{
    padding-left: 50px !important;
}
.tableScroll .table tbody td {
    padding-top: 22px !important;
    padding-bottom: 22px !important;
}
.dtfh-floatingparenthead .table thead th:first-child{
    padding-left: 50px !important;
}
.tableScroll tbody td:last-child, .tableScroll thead th:last-child{
    padding-right: 20px !important;
}
.notes-card{
    height: 250px;
    background-color: var(--dark);

    border-radius: 0 0 5px 5px;
    overflow-y: auto;
}
.booking-notes-card{
    height: 100px !important;
}
/* Marshal CSS Jan 15 2024 */
.loadingWrapper {
    position: relative;
}
.graphWrapper.loadingWrapper {
    min-height: 300px;
    position: relative;
}
.graphWrapper.loadingWrapper .myLoader,
#clinicNotes .myLoader1,
.top-year-card .myLoader,
.top-month-card .myLoader {
    height: 100%;
    top: 0px;
}

-webkit-scrollbar {
    width: 10px; /* Width of the scrollbar */
    background-color: transparent; /* Background color of the scrollbar track */
}

.tableScroll div.dataTables_filter label {
   padding-right: 50px !important;
   position: relative;
}
.tableScroll div.dataTables_filter input[type="search"] {
    height: 50px;
    background-color: #1A1A1A !important;
    border: none;
    border-radius: 3px !important;
    padding-left: 50px !important;
}
.tableScroll div .dataTables_wrapper div.dataTables_filter label::after{
    position: absolute;
    content: '';
    background-image: url('data:image/svg+xml,<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_411_1562)"><path d="M0 6.16847C0 9.51363 2.72175 12.2354 6.06691 12.2354C7.38977 12.2354 8.59859 11.8096 9.59453 11.095L13.335 14.8431C13.5099 15.0179 13.738 15.1016 13.9812 15.1016C14.4982 15.1016 14.8555 14.7138 14.8555 14.2044C14.8555 13.9612 14.7643 13.7407 14.6047 13.581L10.887 9.84055C11.67 8.82179 12.1338 7.55214 12.1338 6.16847C12.1338 2.82331 9.41207 0.101562 6.06691 0.101562C2.72175 0.101562 0 2.82331 0 6.16847ZM1.30005 6.16847C1.30005 3.53794 3.43638 1.40161 6.06691 1.40161C8.69742 1.40161 10.8338 3.53794 10.8338 6.16847C10.8338 8.79898 8.69742 10.9353 6.06691 10.9353C3.43638 10.9353 1.30005 8.79898 1.30005 6.16847Z" fill="white" fill-opacity="0.85"/></g><defs><clipPath id="clip0_411_1562"><rect width="14.8555" height="15" fill="white" transform="translate(0 0.101562)"/></clipPath></defs></svg>');
    height: 20px;
    width: 30px;
    z-index: 9999;
    display: block;
    visibility: visible;
    background-repeat: no-repeat;
    left: 85px;
    top: 18px;
}
.dropdown-toggle::after{
    position: absolute;
    content: '';
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/></svg>');
    height: 17px;
    width: 30px;
    z-index: 9999;
    display: block;
    visibility: visible;
    filter: invert(1);
    background-repeat: no-repeat; 
    border: none !important;
    right: -35px;
    top:1px;
}
/* #clientsTable.table tbody tr td:last-child{
    display: flex;
    flex-direction: column;
    gap: .5rem;
    text-align: right;
} */
.dataTable th:first-child, .table th:first-child {
    border-left: none !important;
}
/* .tableScroll .table thead{
    position: fixed;
    top: 14.5rem;
    z-index: 9999;
} */
.dtfh-floatingparenthead {
    /* top: 160px !important; */
    z-index: 999 !important;
    background-color: #0a0a0a;
}
table.fixedHeader-floating {
    background-color: transparent !important;
}
.tableScroll .dataTable th:first-child, .tableScroll .datatable th:first-child {
    border-left: none;
}
.tableScroll .dataTables_length{
    display: none;
}
.tableScroll .dataTable th:first-child{
    border-left: none;
}
.tableScroll .dataTable tbody tr td:first-child{
    border-left: none;
}
.tableScroll .dataTable th, .table th {
    border-top: none;
    border-bottom: none;
}
.tableScroll .dataTable th:last-child, .table th:last-child {
    border-right: none;
}
.transactionDetail p{
    margin-bottom: 0;
}
.loginPage {
    max-width: 900px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}


/* Marshal CSS - Jan172024 */
.GymFixedheaderMasked:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 9;
    cursor: no-drop;
}



.expandedNotes {
    min-height: 300px; /* Adjust based on your needs */
}

#clientNotesField {
    background: transparent;
    border: 0;
    width: 100%;
    height: auto;
    min-height: 60px; /* You can adjust this value if needed */
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Montserrat', sans-serif; /* Use Montserrat font */
    resize: none;
}


#clientNotesField:focus {
    outline: none !important;
}
.posRelative {
    position: relative;
}
#notesUpdateStatus {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #e6e3d9;
}


/* Marshal - Feb072024 */
.customRadio .checkBack input:checked ~ .checkBack + span {color: var(--green);}
/* Reschedule Booking Changes */
.filter-right_image img {
    border-radius: 0 0.5rem 0 0;
    width: 250px;
    object-fit: cover;
    object-position:center;
    height: 100%;
}
.locationText{
    color: #96AD58;
}
.bookedSlot {
    background-color: var(--dark-green) !important;
}
.w-h-200 {
    width: 300px;
    /* height: 200px; */
    object-fit: cover;
}
input, span.select2-selection.select2-selection--single, select, .select2-dropdown {
    background: #222222 !important;
}

.schedule-sidebar {
    position: relative;
    top: 0;
    bottom: 0;
    padding: 1.4vh;
    overflow-y: hidden; /* Enable scrolling if content overflows */
    overflow-x: visible; /* Enable scrolling if content overflows */

}

.schedule-sidebar-title {
    margin-top: 0;
}

.schedule-sidebar-list {
    list-style-type: none;
    border: none;
    padding: 0;
}


.schedule-sidebar-list li {
    overflow: visible;
    margin-bottom: 10px;
    text-align: right; /* Align text to the right */
}

.schedule-sidebar-padding {
    min-height: 100vh; /* Adjust this as needed */
}


.time-list-container {
    overflow-x: hidden; /* Hide horizontal scrollbar if not needed */
    white-space: nowrap; /* Ensure list items stay in a horizontal line */
    height: 100%; /* Match height of its container */
    width: 100%; /* Use the full width of its parent */
}


.time-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    width: 2000%; /* Adjusted to accommodate all segments */
}

.time-list-pools {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    width: 2000%; /* Adjusted to accommodate all segments */
}

.time-entry {
    font-size: 18px;
    font-weight: 500;
}

.time-entry-pools {
    font-size: 2.2vh;
    font-weight: 500;
}
.bottom-right-box {
    position: absolute;
    bottom: 3vh; /* Adjust the distance from the bottom */
    right: 3vh; /* Adjust the distance from the right */
    /* width: 43vh; Adjust width as needed */ 
    /* height: 20vh; Adjust height as needed */
    z-index: 9999;
    padding-right: 2vh;
    padding-top: 1.5vh;
    padding-bottom: 1.5vh;
    background-color: var(--secondary); /* Color of the box */
    border-radius: 1vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.time-list li {
    display: inline-flex;
    padding:0;
    justify-content: flex-start; /* Align text to the left */
    align-items: center; /* Vertically center the text */
    min-width: 215px; /* Each segment takes up 10% of the viewport width */
    color: white; /* Ensure text color is white, can also be set here if needed */
}
.column-cell {
    align-items: center  !important;
    justify-content: center !important;
}

.time-list-pools li {
    display: inline-flex;
    padding:0;
    justify-content: flex-start; /* Align text to the left */
    align-items: center; /* Vertically center the text */
    min-width: 300px; /* Each segment takes up 10% of the viewport width */
    color: white; /* Ensure text color is white, can also be set here if needed */
}

.schedule-sidebar {
    padding-left: 0px;
    margin-left: 0px;
    left: -1px;
    overflow: visible;
    background-color: var(--dayview-color);
    position: relative; /* or 'absolute' depending on your layout needs */
    z-index: 2; /* Higher than the bookingsDisplayArea */
}

.delay-box {
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: center;
    width: 70px;
    padding: 6px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-radius: 3px;
    background-color: #222222;
}

.delay-input {
    width: 100%;
    border: none;
    background-color: #222222;
    text-align: center;
    border-radius: 3px;
    color: white; /* text color */
    outline: none; /* remove focus outline */
}
.delay-input:focus {
    
    color: white; /* text color on focus */
}

.delay-value {
    font-size: 12px;
    font-weight: 500;
    padding-bottom: 2px;;

    color: var(--light);
}


/* Media query for phones */
/* Media query for phones */
@media only screen and (max-height: 1000px) {
    .time-list-pools li {
        min-width: 140px; /* Minimum width for phone screens */
    }
    .arrow-indicator-pools {
        top: -5vh;
    }
}

.sidebar-grey-line {
    position: relative; /* or 'absolute' depending on your layout needs */
    z-index: 2; /* Higher than the bookingsDisplayArea */

}

#bookingsDisplayArea {
    position: relative; /* Ensure it is positioned for z-index to work */
    z-index: 1; /* Lower than the sidebar */
}
    
.ajs-message{
    background-color: #141414 !important;
    padding: 20px 30px !important;
}

/* Booking-radio-buttons */

  .radio-tile-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
  }
  .radio-tile-group .input-container {
    position: relative;
    height: 45px;
    width: 130px;
}
.radio-tile-group .input-container:first-child .radio-tile{
    border-radius: 5px 0 0 5px;
}
.radio-tile-group .input-container:last-child .radio-tile{
    border-radius: 0 5px 5px 0;
}
  .radio-tile-group .input-container .radio-button {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    cursor: pointer;
  }
  .radio-tile-group .input-container .radio-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0px;
    background-color: #282828;
}
.radio-tile-group .input-container .radio-tile-label {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: white;
}
  .radio-tile-group .input-container .radio-button:checked + .radio-tile {
    background-color: var(--green);
    border: 2px solid var(--green);
    color: white;
  }
  .radio-tile-group .input-container .radio-button:checked + .radio-tile .radio-tile-label {
    color: white;
    background-color: var(--green);
  }
  .no_result{
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
  }
  

.client_table > :not(caption) > * > * {
    border-bottom-color: #6262624D !important;
    padding: 0.5rem 1rem !important;
    vertical-align: middle;
}

.client_table td {
    max-width: 170px;
    word-wrap: break-word; /* Allow long words to be able to break and wrap onto the next line */
    white-space: normal; /* Override the default table cell behavior to allow wrapping */
}

.client_table th {
    border-bottom-color: #6262624D !important;
    padding: 1.3rem 1rem !important; /* Increased padding */
    vertical-align: bottom;
}

.h-45{
    height: 45px;
}
.customRadiobutton .form-check-input[type=radio] {
    border-color: var(--green);
}
.customRadiobutton .form-check-input:checked {
    background-color: var(--green) !important;
    border: none !important;
    box-shadow: none;
}
.addon-img:after {
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    background-image: linear-gradient(rgb(0 0 0 / 50%), rgb(0 0 0 / 20%));
}
.addon-img img {
    border-radius: 10px 10px 0 0;
    object-fit: cover;
    height: 120px;
    width: 100%;
}
.text-ellipse{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden;   
}
.text-ellipse-reschedule{
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;  
    overflow: hidden;   
}
.zindex-9 {
    z-index: 9;
}
.cusror-pointer{
    cursor: pointer;
}
.slide-cards, .gift-cards{
    margin: 0 5px 0 5px;
    border-radius: 5px !important; 
    max-width: 200px;
}

#addOnsdiv {
    margin-bottom: 12px !important; 
}

#selectedAddOns {
    min-height: 210px;
}

.addonSlider .slick-slide {
    margin: 5px;
    padding-bottom: 0px !important; 
}
.addonSlider .slick-slide h6 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;  
    overflow: hidden;
  }
.slide-cards h6 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;  
    overflow: hidden;
  }
  .slick-dots1 li button{
    position: relative;
  }
  .slick-dots1 li button:before {
    font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: -15px;
    left: 0;
    width: 20px;
    height: 20px;
    content: '•';
    text-align: center;
    opacity: .25;
    color: #000;
    height: 10px !important;
    font-size: 0 !important;
    opacity: 1 !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 50px;
    width: 10px !important;
}
  .slick-dots1 {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 1rem 0;
    list-style-type: none;
  }
  .slick-dots1 li button:before {
    font-size: 6px;
    opacity: 1 !important;
    color: white !important;
    border-radius: 50px;
}
.slick-next, .slick-prev{
    visibility: hidden;
}
.slick-dotted{
    overflow: visible !important;
}
.slick-dots1 li.active button:before {
    opacity: 1 !important;
    color: transparent !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}
.btn-wrap{
    gap: 4rem;
}
.slick-dots1 li {
    width: 12px !important;
    height: 12px !important;
    margin: 0 0px !important;
    cursor: pointer;
}
/* .slick-dots {
    overflow: hidden;
    max-width: 50px;
} */



.slick-dots {
    bottom: 0 !important;
    width: fit-content !important;
    list-style: none;
    text-align: end !important;
    position: absolute;
    top: -35px;
    right: 34px;
    z-index: 99;
    display: flex !important;
    justify-content: end;
    display: none !important;
}

#selectedAddOns .slick-dots {
    top: -22px !important;
}

.slots_carousal .owl-dots, .slots_carousal .owl-nav {
    display: none;
}
.booking_bg {
    background-color: #1E1E1E;
    border-radius: 10px 0 0 0;
    padding: 20px;
}
.booking_bg .item h5, .booking_bg .item h4{
    font-size: 13px;
    font-weight: 700;
}
.booking_bg .owl-item .btn{
    padding: 8px 0px;
    border-radius: 5px;
}
.booking_bg .owl-item .item{
    display: flex;
    flex-direction: column;
 }

 /* Marshal CSS Feb 20 2024 */
/* TOGGLE STYLING */
.toggle, .toggle * {
    outline: none !important;
}
.newBookingtoggle input + label {
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 7px 30px !important;
  }
.toggle {
    margin: 0;
    box-sizing: border-box;
    font-size: 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: stretch;
  }
  .toggle input {
    width: 0;
    height: 0;
    position: absolute;
    left: -9999px;
  }
  .toggle input + label {
    margin: 0;
    padding:10px 50px;
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    border: solid 1px #222222;
    background-color: #222222;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    /* ADD THESE PROPERTIES TO SWITCH FROM AUTO WIDTH TO FULL WIDTH */
    /*flex: 0 0 50%; display: flex; justify-content: center; align-items: center;*/
    /* ----- */
    color: #FFF;
  }
  .toggle input + label:first-of-type {
    border-radius: 6px 0 0 6px;
    border-right: none;
  }
  .toggle input + label:last-of-type {
    border-radius: 0 6px 6px 0;
    border-left: none;
  }
  .toggle input:hover + label {
    border-color: var(--green);
  }
  .toggle input:checked + label {
    background-color: var(--green);
    color: #FFF;
    box-shadow: 0 0 10px rgba(97, 115, 50, 0.5);
    border-color: var(--green);
    z-index: 1;
  }
  .toggle input:focus + label {
    outline: dotted 1px #CCC;
    outline-offset: 0.45rem;
  }
  .protocolFilterOuter {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }
  .protocolFilterOuter .checkbox_btn {
    display: inline-block;
    float: unset !important;
    margin-right: 5px;
  }

  .protocolFilterOuter .checkbox_btn label input + span {
    font-size: 12px;
    font-weight: 600;
    color: white;
    background-color: #222222;
    border: 1px solid #222222 !important;
    border-radius: 0px !important;
    opacity: .5;
  }
  .protocolFilterOuter .checkbox_btn:last-child {
    margin-right: 0px;
  }
  .opacClass {
    opacity: 0.5;
    position: relative;
  }
  .opacClass:before {
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: transparent;
    position: absolute;
    z-index: 9;
}
#selectedIncDec path {
    fill: #fff;
}
.slick-list {
    z-index: 998;
}
button[disabled] {
    cursor: not-allowed;
}
  @media (max-width: 800px) {
    .toggle input + label {
      padding: 0.75rem 0.25rem;
      flex: 0 0 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }


/* Marshal CSS March 06 2024 */
.noPointers {
    pointer-events: none;
}
div#sendPaymentLinkModal {
    z-index: 99999;
}
.overlayedUnavailable {
    position: absolute;
    z-index: 9;

    color: #fff;
    left: 50%;
    transform: translateX(-55%);
    top: 60px;
}
.split-dot {
    width: 4px;
    height: 4px;
    background-color: var(--light-green);
    border-radius: 50%;
    display: inline-block;
}
.userImage {
    height: 26px;
    width: 26px;
    background-color: var(--tertiary);
    position: relative;
    overflow: hidden;
    min-width: 26px;
    border-radius: 100%;
}
.userImage img {
    width: 100%;
    height: auto;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}
.openUserPop {
    cursor: pointer;
}
#replaceEditGuest {
    z-index: 9999;
}
#userDetailsModal, #guestUserDetailsModal {
    z-index: 99999;
}
#replaceUserModal, #noShowNotMember, #noShowMember, #addNewGuest, #clearDues {
    z-index: 9999;
}
#usersTable tbody {
    max-height: 300px;
    overflow-y: auto;
    /* display: block; */
}
#usersTable_wrapper > .row:first-child > div:first-child, #usersTable_info {
    display: none;
}
#usersTable_filter {
    text-align: left;
}
#usersTable_filter label {
    position: relative;
    padding-left: 10px;
    top: 10px;
}
#usersTable_filter input {
    position: absolute;
    left: 0px;
    margin-left: 0px;
    top: -6px;
}
.selectToReplace.activeButton {
    pointer-events: none;
    opacity: 0.5;
}
.profile-pic-container img {
    position: relative;
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 50%;
}

.profile-pic {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 5px 10px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.overlay:hover {
    opacity: 1;
}

#profilePicInput {
    display: none;
}

.seach_result {
    position: relative; /* Positioning context for the absolute positioning of the thead */
    height:320px;
    overflow-y: scroll;
    background-color: #111111;
  }
  
  .client_table table {
    width: 100%; /* Full width of the container */
    border-collapse: collapse; /* Collapse borders */
  }
  .client_table {
    margin-top: -2px !important;
  }
  .client_table thead {
    position: sticky; /* Make thead sticky */
    z-index: 1; /* Ensure thead appears above tbody */
    background: #151515;
    top: -1px !important;
  }

  .client_table tr.selected {
    background-color: var(--tertiary); /* Light yellow background */
    font-weight: bold; /* Bold text */
    position: sticky;
    top: 60px;
    z-index: 1;
  }

  .AddonsList {
    min-height: 150px;
  }
  #replaceUserModal .clientDetails {
    max-width: 800px;
  }
  .hidden {
    display: none !important;
  }
  .client_table thead:before {
    content: "";
    width: 100%;
    height: 1px;
    z-index: 99;
    left: 0px;
    bottom: 0px;
    position: absolute;
}
/* .client_table tr.selected:before {
    content: "";
    width: 100%;
    height: 1px;
    background: #2c2c2c;
    z-index: 99;
    left: 0px;
    bottom: 0px;
    position: absolute;
} */

/* Position search input at the top */
#replaceUserModal #usersTable_wrapper .dataTables_filter {
    position: sticky;
    top: 0;
    z-index: 1;
    /* background-color: #fff; Optional: Add a background color */
    padding: 10px; /* Optional: Add padding */
}

/* Adjust width and margin of the search input */
#replaceUserModal #usersTable_wrapper .dataTables_filter input[type="search"] {
    width: 200px; /* Adjust the width as needed */
    margin-right: 10px; /* Add space between search input and pagination */
}

/* Position pagination controls at the bottom */
#replaceUserModal #usersTable_wrapper .dataTables_paginate {
    position: sticky;
    bottom: 0;
    z-index: 1;
    /* background-color: #fff; Optional: Add a background color */
    padding: 10px; /* Optional: Add padding */
}
#usersTable_wrapper > .row:nth-child(2) {
    height: 45vh;
    overflow-y: auto;
}

.Gymmainheader *:disabled,
.noPointers {
    opacity: 0.4;
}
.profile-pic-container {
    width: 100px;
    height: 100px;
}

#prevBookingTable_length {
    display: none;
}

#prevBookingTable_filter {
    transform: translateY(-30px);
    height: 0px;
}
/* .toggle input[type="radio"]:disabled + label,
.toggle input[type="radio"]:disabled:checked + label {
    opacity: 0.4 !important;
    background-color: red !important;
} */

@media (max-width: 768px) {

    .myRow {
        width: 100vw !important;
    }
    .myRow > * {
        margin-bottom: 0px; /* Adds vertical space below each child element */
        margin-right: 5px !important; /* Adds vertical space below each child element */
        width: 40vw;
    }
    #service-graph-container {
        transform: translateY(-120px);
    }

    .myRow > * > * {
        margin-bottom: 10px; /* Adds vertical space below each child element */
        
        width: 40vw;
    }
    
    .myRow > * > #reviewsList {
        margin-bottom: 10px; /* Adds vertical space below each child element */
        
        width: 100vw;
    }
    
    #compare-services{
        transform: translateY(-60px) !important;
    }
    #revenueChartContainer{
        transform: translateY(-50px);
    }
    #revenueChart {
        min-height: 500px !important;
    }
    #seatsChart  {
        min-height: 500px !important;
    }
    .padding_div_id {
        padding-top: 0px !important;
    }

    .loginPage {
        box-shadow: none !important;
    }

    #login_bg {
        background-color: var(--secondary);
    }
    #analyticsTopBar {
        flex-direction: column;
        align-items: start !important;
    }

    #analyticsFilters {
        width: 100% !important; 
    }

    #analyticsPeriod {
        width: 110px !important;
    }

    #analyticsLocation {
        width: 110px !important;
    }
    
    .GymFixedheader {
        background-color: transparent !important;
        position: relative;
    }

    .action-item {
        display: flex; /* Aligns children inline */
        align-items: center; /* Aligns children vertically in the middle */
        gap: 10px; /* Adds space between items */
    }
    
    .close-btn, .tick-btn {
        padding: 5px 10px; /* Padding inside the buttons */
        cursor: pointer; /* Pointer cursor on hover */
        border: none; /* No border for a cleaner look */
        background-color: transparent; /* Transparent background */
    }
    
    .close-btn:hover, .tick-btn:hover {
        background-color: #f0f0f0; /* Light grey background on hover for feedback */
    }
    
}

#clientNotesField::placeholder {
    color: #aaa; /* Dark grey color */
    opacity: 1; /* Override any default opacity to make sure the color is solid */
}
#clinicNotes .dataTables_length, /* Hide row selection dropdown */
#clinicNotes .dataTables_filter label { /* Hide search label */
  display: none;
}
.customRadio input[type="radio"]:disabled + label {
  opacity: 0.5 !important; /* Adjust the opacity to visually indicate the disabled state */
  pointer-events: none !important; /* Prevent interaction with the disabled label */
  /* Optionally, you can add other styling for the disabled label */
}