@charset "UTF-8";
/*Topbar Colors*/
:root {
  --primary-bg-color: #2851a3;
  --primary-color: #ffffff;
}

/* Extra small devices (phones, 600px and down) */
/* Small devices (portrait tablets and large phones, 600px and up) */
/* Medium devices (landscape tablets, 768px and up) */
/* Large devices (laptops/desktops, 992px and up) */
/* Extra large devices (large laptops and desktops, 1200px and up) */
/*Topbar Colors*/
:root {
  --primary-bg-color: #2851a3;
  --primary-color: #ffffff;
}

/* Extra small devices (phones, 600px and down) */
/* Small devices (portrait tablets and large phones, 600px and up) */
/* Medium devices (landscape tablets, 768px and up) */
/* Large devices (laptops/desktops, 992px and up) */
/* Extra large devices (large laptops and desktops, 1200px and up) */
/*Custom fonts*/
@font-face {
  font-family: "clubpos";
  src: url("../fonts/clubpos.eot?fjyi9b");
  src: url("../fonts/clubpos.eot?fjyi9b#iefix") format("embedded-opentype"), url("../fonts/clubpos.woff2?fjyi9b") format("woff2"), url("../fonts/clubpos.ttf?fjyi9b") format("truetype"), url("../fonts/clubpos.woff?fjyi9b") format("woff"), url("../fonts/clubpos.svg?fjyi9b#clubpos") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
[class^=icon-], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "clubpos" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-automate:before {
  content: "\e908";
}

.icon-booking:before {
  content: "\e90d";
}

.icon-bookinghistory:before {
  content: "\e90e";
}

.icon-calendar:before {
  content: "\e90f";
}

.icon-cancelbooking:before {
  content: "\e910";
}

.icon-cloud-secure:before {
  content: "\e906";
}

.icon-create:before {
  content: "\e907";
}

.icon-customize:before {
  content: "\e903";
}

.icon-date:before {
  content: "\e911";
}

.icon-events:before {
  content: "\e912";
}

.icon-gym:before {
  content: "\e905";
}

.icon-home:before {
  content: "\e913";
}

.icon-invoices:before {
  content: "\e904";
}

.icon-invoices1:before {
  content: "\e914";
}

.icon-logout:before {
  content: "\e91a";
}

.icon-manage-events:before {
  content: "\e902";
}

.icon-membership:before {
  content: "\e919";
}

.icon-myprofile:before {
  content: "\e915";
}

.icon-pay:before {
  content: "\e916";
}

.icon-payments:before {
  content: "\e917";
}

.icon-players:before {
  content: "\e91b";
}

.icon-pricings:before {
  content: "\e901";
}

.icon-print:before {
  content: "\e91c";
}

.icon-products:before {
  content: "\e91f";
}

.icon-quickbooks:before {
  content: "\e900";
}

.icon-report:before {
  content: "\e920";
}

.icon-reports:before {
  content: "\e909";
}

.icon-score:before {
  content: "\e921";
}

.icon-search:before {
  content: "\e91d";
}

.icon-sms-email:before {
  content: "\e90b";
}

.icon-squash:before {
  content: "\e90a";
}

.icon-tennis:before {
  content: "\e90c";
}

.icon-tennis-table:before {
  content: "\e918";
}

.icon-transactions:before {
  content: "\e922";
}

.icon-uploadimage:before {
  content: "\e91e";
}

body {
  font-family: "Lato", sans-serif;
  margin: 0;
  background: #F0F4F9;
  font-size: 12px;
  font-weight: 400;
  color: black;
  line-height: 1.5;
}

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background-color: #ffffff;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #ffffff;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: var(--primary-bg-color);
}

/*Loader CSS*/
.ScreenLoader {
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  flex-direction: column;
}
.ScreenLoader p {
  color: var(--primary-color);
  font-weight: bold;
  font-size: 200%;
}
.ScreenLoader .lds-ripple {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.ScreenLoader .lds-ripple div {
  position: absolute;
  border: 4px solid var(--primary-bg-color);
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.ScreenLoader .lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}

@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}
/*Custom Fonts Added*/
@font-face {
  font-family: "costwatch";
  src: url("../fonts/custom/costwatch.eot?pvexzx");
  src: url("../fonts/custom/costwatch.eot?pvexzx#iefix") format("embedded-opentype"), url("../fonts/custom/costwatch.ttf?pvexzx") format("truetype"), url("../fonts/custom/costwatch.woff?pvexzx") format("woff"), url("../fonts/custom/costwatch.svg?pvexzx#costwatch") format("svg");
  font-weight: normal;
  font-display: swap;
  font-style: normal;
  font-display: block;
}
.qb {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "costwatch" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.qb:before {
  content: "슅";
}

.bg-primary-gradient {
  background-image: linear-gradient(58deg, #2952a4 0, #0d3a94 100%);
}

.text-primary {
  color: var(--primary-bg-color) !important;
}

.form-control.error,
.input-validation-error,
input.error {
  border-color: red !important;
}

.field-validation-error,
.error {
  color: red !important;
  font-size: 80%;
  display: initial;
}

.mb_0 {
  margin-bottom: 0px;
}

.card-body {
  padding: 10px;
}

.widgetBody {
  border-radius: 15px;
  background: #fff;
  -webkit-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
  -moz-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
  box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
}

.xp-leftbar {
  width: 200px;
}

.xp-rightbar {
  margin-left: 200px;
  overflow: visible;
}

.xp-logo {
  line-height: inherit;
  display: block;
  min-height: 50px;
  background: var(--primary-bg-color);
}
.xp-logo .img-fluid {
  width: 30%;
  min-height: 50px;
  padding: 10px 0px;
  color: var(--primary-color);
}

.xp-topbar {
  background-color: var(--primary-bg-color);
  position: relative;
  left: 0px;
  padding: 10px 20px;
}
.xp-topbar .xp-menu-hamburger {
  color: var(--primary-color);
}
.xp-topbar .xp-page-title.lg {
  display: inline-block;
  color: var(--primary-color);
  margin-left: 10px;
  font-size: 20px;
  margin-bottom: 0px;
}
@media (max-width: 768px) {
  .xp-topbar .xp-page-title.lg {
    display: none;
  }
}
.xp-topbar .xp-page-title.sm {
  display: none;
}
@media (max-width: 768px) {
  .xp-topbar .xp-page-title.sm {
    display: inline-block;
    color: white;
    line-height: 38px;
    margin-bottom: 0px;
    font-size: 120%;
  }
}
.xp-topbar .xp-userprofile a img {
  width: 30px;
}
.xp-topbar .xp-userprofile .dropdown-menu .dropdown-item:first-child {
  background-color: var(--primary-bg-color);
  background-image: none;
  padding: 10px !important;
  font-size: 100%;
}

@media (max-width: 768px) {
  .xp-topbar .xp-profilebar {
    display: inline-block;
    float: right;
  }
}
.mb_10 {
  margin-bottom: 10px;
}

.xp-vertical-menu {
  height: calc(100vh - 50px);
}

.xp-vertical-menu > li > a {
  padding: 5px 10px;
  color: var(--primary-bg-color);
  font-weight: bold;
}

.xp-vertical-menu > li:hover > a,
.xp-vertical-menu > li.active > a {
  background-color: var(--primary-bg-color);
  color: var(--primary-color);
  background-image: none;
}
.xp-vertical-menu > li:hover > a i.fa-angle-right,
.xp-vertical-menu > li.active > a i.fa-angle-right {
  color: white;
}

.xp-vertical-menu .xp-vertical-submenu > li > a {
  padding: 5px 10px 5px 25px;
  display: block;
  font-size: 90%;
  color: #8A98AC;
  font-weight: bold;
}

.xp-vertical-menu .xp-vertical-submenu > li > a:hover {
  color: var(--primary-bg-color);
  font-size: inherit;
}

.xp-vertical-menu .xp-vertical-submenu > li.active > a {
  color: var(--primary-bg-color);
  font-size: inherit;
}

.btn {
  font-size: 100%;
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary {
  color: var(--primary-color);
  background-color: var(--primary-bg-color) !important;
  border-color: var(--primary-bg-color) !important;
}

a {
  color: var(--primary-bg-color);
}
a.company-link {
  color: #ff5722;
}

a:hover {
  color: #8BC34A;
}

form-group label[id*=-error]:not(.error),
label[id*=-error]:not(.error) {
  display: initial !important;
}

label {
  margin-bottom: 0px;
  font-weight: bold;
  color: black;
  position: relative;
}
label.required:after {
  content: "*";
  color: red;
  margin-left: 2px;
  font-size: 170%;
  position: absolute;
  top: -5px;
}

.btn-danger:hover {
  background-color: #3e69bf;
  border-color: #3e69bf;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #160a59;
  border-color: #160a59;
}

.custom-control-label {
  user-select: none;
}

.nav-tabs .nav-link.active {
  color: var(--primary-bg-color);
}

.CloseBtn {
  background-color: #4a4a4a;
  border-color: #4a4a4a;
  box-shadow: 0 2px 6px 0 rgba(74, 74, 74, 0.49);
  color: white !important;
  cursor: pointer;
}

.CloseBtn:hover {
  background-color: #000000;
  border-color: #000000;
}

/*Badges CSS*/
.badge {
  background: #4CAF50;
  color: white;
  text-transform: capitalize;
}

.badge[title*=New] {
  background-color: blue;
}

.badge[title*=Paid],
.badge[title*=Closed] {
  background-color: green;
}

.badge[title*=Unpaid],
.badge[title*=Deleted] {
  background-color: red;
}

/*Badges CSS End*/
.ModalLayout .xp-rightbar {
  margin-left: 0px;
}

.ModalLayout .xp-contentbar {
  padding: 10px;
  margin-bottom: 0px;
}

.ModalLayout .xp-rightbar {
  min-height: auto !important;
}

.ModalLayout h5.card-title {
  color: #23b7e5 !important;
  margin-bottom: 0px !important;
}

.xp-contentbar {
  padding: 15px;
  margin-bottom: 0px;
}

@media (max-width: 768px) {
  .xp-contentbar {
    padding: 10px;
  }
}
.xp-breadcrumbbar {
  padding: 20px 20px 0 20px;
}

a[title=Delete]:hover {
  background: #ff4b5b !important;
  border-color: #ff4b5b !important;
}

.xp-container .xp-auth-box .xp-web-logo img {
  margin: 0px 0;
  height: auto;
  width: 100px;
}
.xp-container .custom-checkbox {
  padding-left: 0px;
  float: left;
}
.xp-container .custom-checkbox .custom-control-label {
  padding-left: 1.5rem;
}
.xp-container .custom-checkbox .custom-control-label:before {
  left: 0px;
}
.xp-container .forgot-psw {
  float: right;
}

.table td,
.table th {
  padding: 0.3rem;
}

.table .thead-dark th {
  color: #fff;
  background-color: #343a40;
  border-color: #454d55;
  line-height: 21px;
}

.AddBtn {
  background: #03A9F4;
  color: white !important;
  font-weight: bold;
  padding: 0px 10px;
}

select option {
  font-size: 100%;
  padding: 0px;
  line-height: 31px;
}

.xp-footerbar {
  position: initial;
  padding: 10px;
}

.xp-footerbar a {
  color: #ff5722;
}

/*New responsive grid css*/
.ResGrid {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  border-collapse: collapse;
  font-size: 100%;
}

.ResGrid th {
  background: #3d8090;
  color: white;
  font-weight: 600;
  text-align: center;
}

.ResGrid th,
.ResGrid td {
  vertical-align: middle !important;
  z-index: 1;
}

table.ResGrid tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}

table th a,
.headerRow th a {
  text-decoration: none;
  color: #8bc34a;
}

table th a:hover,
.headerRow th a:hover {
  color: #f78e3b;
}

table th .fa-arrow-up:before,
table th .fa-arrow-down:before {
  /*font-family: 'Font Awesome 5 Free';*/
}

.ResGrid tr.view:hover {
  background: #e4e4e4 !important;
}

.ResGrid > tbody > tr.view .expandIcon {
  transition: all 0.3s ease-in-out;
  margin-right: 5px;
  color: #2952a4;
  vertical-align: middle;
  user-select: none;
}

.ResGrid > tbody > tr.view .expandIcon:hover {
  cursor: pointer;
}

.ResGrid > tbody > tr.view .expandIcon:before {
  font-size: 23px;
}

.ResGrid > tbody > tr.view.open .expandIcon {
  transform: rotate(-180deg);
  color: #ff4b5b;
}

.ResGrid > tbody > tr.view .expandIcon.collapse:not(.show) {
  display: inline-block;
}

.ResGrid > tbody > tr.view .expandIcon.collapse.smallDevice,
.smallDevice {
  display: none;
}

.smShow {
  display: none;
}

.lgShow {
  display: block;
}

.ResGrid > tbody > tr.fold {
  display: none;
}

.ResGrid > tbody > tr.fold.open {
  display: table-row;
}

.ActionCell {
  text-align: center;
  white-space: nowrap;
}

.noWhite {
  text-align: center;
  white-space: nowrap;
}

.TableCell[data-label=Status],
.TableCell[data-label=Date],
.TableCell[data-label="Created By"],
.TableCell[data-label="Due Date"],
.TableCell[data-label=Active],
.TableCell[data-label=Hours] {
  white-space: nowrap;
  text-align: center;
}

.TableCell[data-label=Tag],
.TableCell[data-label="Task No"],
.TableCell[data-label=Reviewer] {
  text-align: center;
}

.ActionCell .dropbtn {
  display: none;
}

.ActionCell a {
  font-size: 130%;
  display: inline-block;
  width: 30px;
  height: 30px;
  padding: 3px;
  border-radius: 50%;
  color: var(--primary-bg-color);
  border: 1px solid var(--primary-bg-color);
  box-shadow: 0 2px 6px 0 rgba(6, 47, 148, 0.5);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  line-height: 21px;
}

.ActionCell a:hover {
  color: #ffffff;
  text-decoration: none;
  background-color: var(--primary-bg-color);
  border-color: var(--primary-bg-color);
}

.TopSearch {
  padding: 0px 0px 10px 0px;
}
.TopSearch [class^=col-] {
  padding-right: 5px;
}
.TopSearch .xp-button .btn {
  margin-bottom: 0px;
  font-size: 130%;
  padding: 4px 8px;
}
.TopSearch .xp-button .btn span {
  display: none;
}

.tab-pane .TopSearch {
  padding: 0px;
}

a.customdropdown:not([href]):not([tabindex]),
.customdropdown {
  color: #23b7e5;
}

a.customdropdown:not([href]):not([tabindex]):hover {
  color: white;
  cursor: pointer;
}

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

.customDropShow.dropdown-menu {
  left: -40px !important;
}

.customDropShow.dropdown-menu.show a {
  display: flex;
  padding: 0px 10px;
  border-radius: 0px;
  width: 100%;
  border: none;
  height: auto;
  color: black;
  box-shadow: none;
  font-size: 100%;
}

.form-group {
  margin-bottom: 10px;
}

.form-control {
  background-color: #f0f1f4;
  font-size: inherit;
  color: #000000;
  border: none;
  border-radius: 5px;
}
.form-control:focus {
  background-color: #e3eaf7;
  border-color: var(--primary-bg-color);
  box-shadow: none;
}
.form-control:disabled, .form-control[readonly] {
  background-color: #d5e0f5;
  color: black;
}

.IntraTable.table thead th {
  background: #3d808f;
}

.tvFooter {
  text-align: center;
  padding: 5px;
  color: white;
  background: #3e3e3e;
}
.tvFooter a {
  color: #FF9800;
}
.tvFooter a:hover {
  color: orangered;
}

@media only screen and (max-width: 600px) {
  .ResGrid {
    display: grid;
    border: 1px solid #e8e8e8;
  }
  .view {
    position: relative;
    display: block;
    border-bottom: 1px solid #ccc;
  }
  .headerRow {
    display: none;
  }
  .ResGrid > tbody > tr.view .expandIcon.collapse.smallDevice,
  .smallDevice {
    display: inline-block;
  }
  .smShow {
    display: unset;
  }
  .lgShow {
    display: none;
  }
  .TopSearch [class^=col-] {
    padding-right: 15px;
  }
  .TopSearch .form-control {
    margin-bottom: 10px;
  }
  .TopSearch .xp-button .btn {
    margin-bottom: 5px;
    font-size: 100%;
  }
  .TopSearch .xp-button .btn span {
    display: inline-block;
    margin-left: 5px;
  }
  .AdSearch {
    display: inline-block;
    background: transparent;
    color: #3d8090 !important;
    border: none;
    border-color: transparent;
    padding: 0px;
    margin-bottom: 5px;
    font-size: 23px;
  }
  .AdSearch:active {
    box-shadow: none;
  }
  .AdSearch i {
    line-height: 30px;
    font-size: 40px;
  }
  .AdSearch i:focus,
  .AdSearch i:hover {
    box-shadow: none;
    outline: 0;
  }
  #modal_body .topForm {
    display: block;
  }
  .topForm {
    display: none;
  }
  .TableCell {
    display: block;
    position: relative;
    height: auto;
    line-height: 18px;
    text-align: left;
  }
  .TableCell[data-label=Date],
  .TableCell[data-label="Created By"],
  .TableCell[data-label="Due Date"],
  .TableCell[data-label=Status],
  .TableCell[data-label=Active],
  .TableCell[data-label=Hours],
  .TableCell[data-label=Tag],
  .TableCell[data-label="Task No"],
  .TableCell[data-label=Reviewer] {
    white-space: nowrap;
    text-align: left;
  }
  .view .TableCell:nth-of-type(n+2) {
    display: none;
  }
  .view.open .TableCell:nth-of-type(n+2) {
    display: block;
    background: #eeeeee;
    border-bottom: 1px solid #bbbbbb;
    word-break: break-word;
  }
  .view.open .MainColumn ~ .TableCell:before {
    content: attr(data-label);
    width: 100%;
    border-radius: 0px;
    height: auto;
    line-height: 22px;
    color: #1b1b1b;
    display: block;
    font-size: 100%;
    font-weight: bold;
    font-family: inherit;
  }
  .ResGrid > tbody > tr.fold.open {
    display: grid;
    background: #eeeeee;
  }
  .view.open > .TableCell.ActionCell {
    top: 8.2%;
    position: absolute;
    right: 0px;
    width: auto;
    height: auto;
    text-align: center;
    padding-right: 10px;
    padding: 0px !important;
  }
  .ActionCell a {
    font-size: 21px;
  }
  .ActionCell .dropbtn {
    display: none;
    background: #3d8090;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    margin: 0px auto;
    color: white;
    border: 1px solid #0065bd;
    font-size: 18px;
    outline: 0;
  }
  .ActionCell .DropMenu {
    display: block;
    background: #aeaeae;
    padding: 5px 0px;
  }
  .ActionCell .dropbtn:hover .DropMenu {
    display: block;
  }
  .ActionCell .DropMenu a {
    color: white;
    display: block;
    position: relative;
    margin: 5px auto;
    padding: 0px;
    line-height: 1.8;
    background: #2852a4;
    font-size: 120%;
    width: 30px;
    height: 30px;
  }
  .ActionCell .DropMenu .LettersBtn {
    display: block;
    margin-bottom: 8px;
    top: 2px;
  }
  .ActionCell .DropMenu a:hover {
    color: #2852a4;
    background: white;
    border-color: white;
  }
  .TableCell.text-right,
  .TableCell.text-center,
  .TableCell.capitalCenter {
    text-align: left !important;
  }
  .TotalBlock {
    display: flex;
  }
  .TotalBlock td {
    width: -webkit-fill-available;
  }
  .xp-footerbar {
    left: 0px !important;
  }
}
.capital {
  text-transform: capitalize;
}

.NoWrap {
  white-space: nowrap;
}

.capitalCenter {
  text-transform: capitalize;
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.noPadding {
  padding-left: 0px;
  padding-right: 0px;
}

.inputTable .TableCell {
  padding: 0px !important;
}

.inlineBlock {
  display: inline-block;
}

.inputTable .TableCell input,
.inputTable .TableCell select {
  margin-bottom: 0px;
  padding: 3px;
  background: transparent;
}

.inputTable .bootstrap-select.form-control {
  margin-bottom: 0px !important;
}

.bootstrap-select > .dropdown-toggle {
  color: black;
}

@media only screen and (max-width: 760px) {
  .inputTable .MainColumn .fa {
    float: left;
    margin-top: 8px;
  }
  .inputTable .MainColumn input {
    width: 87%;
  }
}
.profileBlock {
  text-align: center;
}

.profileBlock img {
  width: 100%;
  margin-bottom: 10px;
}

.profileUL {
  padding: 0px;
}

.profileUL .list-group-item {
  background-color: transparent;
}

.ContactsList {
  margin-bottom: 0px;
}

.ContactsList .media:first-child {
  margin-top: 0px !important;
}

.ContactsList .media:last-child {
  margin-bottom: 0px !important;
}

.ContactsList .rounded-circle {
  width: 64px;
  height: 64px;
}

/*Datepicker CSS*/
.ui-datepicker {
  padding: 0px;
  border-radius: 5px;
  font-family: "Comfortaa", san-serif;
}

.ui-datepicker .ui-widget-header {
  border: 1px solid var(--primary-bg-color);
  background: var(--primary-bg-color);
  color: #ffffff;
  font-weight: bold;
  padding: 1px 5px;
}

.ui-datepicker .ui-datepicker-calendar {
  margin-bottom: 0px;
  padding: 2px;
  background: #ffffff;
  color: #16095c;
}

.ui-datepicker .ui-datepicker-title select {
  border-radius: 5px;
  padding: 1px 5px;
  margin-right: 5px;
  font-family: "Comfortaa", san-serif;
  border: 1px solid #3d8191;
  color: #000000;
}

.ui-datepicker .ui-widget-content {
  border: 1px solid #dddddd;
  background: #343a40;
  color: #ffffff;
}

.ui-datepicker .ui-state-default,
.ui-datepicker .ui-widget-content .ui-state-default {
  text-align: center;
  border: 1px solid #eaeaea;
  background: #eaeaea;
  border-radius: 5px;
  color: #080808;
}

.ui-datepicker .widget-content .ui-state-hover,
.ui-datepicker .ui-state-default.ui-state-hover {
  border: 1px solid #7b7b7b !important;
  background: #7b7b7b !important;
  font-weight: normal !important;
  color: #ffffff !important;
}

.ui-datepicker .ui-state-active,
.ui-datepicker .ui-widget-content .ui-state-active {
  border: 1px solid var(--primary-bg-color);
  background: var(--primary-bg-color);
  font-weight: normal;
  color: #ffffff;
}

.ui-datepicker .ui-state-highlight,
.ui-datepicker .ui-widget-content .ui-state-highlight,
.ui-datepicker .ui-widget-header .ui-state-highlight {
  border: 1px solid #343a40;
  background: #7b7b7b;
  color: #ffffff;
  font-weight: bold;
}

.recentHeading {
  margin-bottom: 0px;
  color: var(--primary-bg-color);
  font-size: 150%;
}

.pagination {
  display: block;
  padding: 5px 0px;
  margin-bottom: 0px;
  text-align: center;
}
.pagination li {
  display: inline-block;
}
.pagination li:last-child {
  float: right;
}

.pagination .page-item.active .page-link {
  color: #ffffff;
  background-color: var(--primary-bg-color);
  border-color: var(--primary-bg-color);
}

.modal-header {
  display: flex;
  position: relative;
  padding: 10px;
}

.modal-title {
  font-size: 120%;
  line-height: initial;
  color: var(--primary-bg-color);
}

.modal-header .close {
  padding: 0px;
  margin: 0px;
  position: absolute;
  right: 10px;
  top: 7px;
}

.btn:hover {
  cursor: pointer;
}

.UserPicBlock img {
  width: 100%;
  border-radius: 5px;
  border: 2px solid var(--primary-bg-color);
  margin-bottom: 5px;
  padding: 5px;
}

.SelectYear {
  display: flex;
  width: 200px;
  align-items: center;
  position: absolute;
  left: 40%;
  z-index: 99;
}

.SelectYear label {
  flex-basis: 160px;
}

.SelectYear select {
  flex-basis: 180px;
  padding: 4px 10px;
  height: auto;
}

input[type=password]::-ms-reveal {
  display: none;
}

input[type=password]::-ms-clear {
  display: none;
}

.passwordToggle {
  position: relative;
}
.passwordToggle i {
  position: absolute;
  top: 7px;
  right: 7px;
  font-size: 160%;
  cursor: pointer;
  transition: 0.5s ease-in-out;
}
.passwordToggle i.fa-eye {
  color: black;
}
.passwordToggle i.fa-eye-slash {
  color: red;
}

.ThemeSwitcher {
  padding: 0px;
  width: 40px;
  height: 40px;
  box-shadow: none;
  background: transparent;
  overflow: hidden;
  line-height: initial;
  border-color: #474747;
}

/*Toastr CSS*/
#toast-container > .toast {
  background-image: none !important;
  background: black;
  display: flex;
  align-items: center;
  font-family: inherit;
  font-weight: 500;
  font-size: 100%;
  padding: 8px;
  padding-left: 30px;
  box-shadow: none;
}

#toast-container > .toast:before {
  position: relative;
  font: normal normal normal 24px/1 "Material Design Icons";
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  float: left;
  margin-left: -1em;
  color: #FFF;
  margin-right: 0.5em;
  display: flex;
  width: 25px;
  height: 25px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 3px;
}

#toast-container > .toast-warning:before {
  content: "\f4a1";
  background: #ff9800;
}

#toast-container > .toast-error:before {
  content: "\f156";
  background: #b94a48;
}

#toast-container > .toast-info:before {
  content: "\f64e";
  background: #3a87ad;
}

#toast-container > .toast-success:before {
  content: "\f12d";
  background: green;
}

/*Captcha Box CSS*/
.captchaBox {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 10px 0px;
  flex-direction: inherit;
}
.captchaBox br {
  display: none;
}
.captchaBox #CaptchaImage {
  width: 120px;
  display: inline-flex;
}
.captchaBox #CaptchaInputText {
  background-color: #ffffff;
  border-color: #e7e8ec;
  border-radius: 3px;
  box-shadow: none;
  color: #1a7195;
  font-size: 100%;
  text-transform: uppercase;
  border-style: solid;
  width: 100px;
  text-align: center;
  font-weight: bold;
}
.captchaBox a[href="#CaptchaImage"] {
  color: #ffffff;
  font-weight: bold;
  background: #2851a3;
  font-size: 80%;
  padding: 2px 10px;
  border-radius: 0px;
  text-shadow: 1px 1px 1px black;
}

@media only screen and (max-width: 760px) {
  .captchaBox {
    flex-direction: column;
  }
  .captchaBox #CaptchaImage {
    width: 180px;
  }
}
/*CaptchaBox CSS End*/
/*Email Validation CSS*/
.EmailValidate {
  position: relative;
}
.EmailValidate i {
  position: absolute;
  top: 9px;
  right: 7px;
  font-size: 160%;
}
.EmailValidate i.fa-check-circle {
  color: green;
}
.EmailValidate i.fa-times-circle {
  color: red;
}
.EmailValidate #Response {
  color: red;
  text-align: center;
}

/*Email Validation CSS*/
/*Captcha*/
#dvCaptcha {
  display: flex;
  justify-content: center;
}

#rfvCaptcha {
  display: flex;
  justify-content: center;
  color: red;
}

.authPage .custom-control-label:after {
  left: 0;
}
.authPage .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #f68e3b;
  border-color: #f68e3b;
}
.authPage .forgot-psw a {
  color: #f68e3b;
}
.authPage .btnCust {
  background-color: #f68e3b !important;
  color: #fff;
}
.authPage .btnCust:hover {
  color: #fff;
  background-color: #f47916 !important;
  border-color: #f3720b;
}
.authPage .LinkAuth {
  color: #f68e3b !important;
}
.authPage label.required:after {
  content: "*";
  color: red;
  margin-left: 2px;
  font-size: 150%;
  position: relative;
  line-height: 1px;
  display: inline-block;
}

.MergerTransactions {
  display: flex;
  margin-bottom: 10px;
  justify-content: center;
}
.MergerTransactions input[type=button] {
  margin-left: 10px;
}

/*Photo Upload Block*/
.PicBlock {
  width: 100%;
  position: relative;
  background: #fff;
  box-shadow: 1px 2px 3px 0 #bfbfbf;
  padding: 2px;
  margin: 0px auto;
}
.PicBlock img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.PicBlock .PicLoading {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  background: #272727;
  text-align: center;
  border-radius: 50%;
}
.PicBlock .PicLoading i {
  position: relative;
  top: 40%;
  color: white;
  font-size: 360%;
}
.PicBlock .ChangePhotoBtn {
  display: inline-block;
  position: absolute;
  font-size: 13px;
  bottom: -22px;
  left: 40%;
  width: auto;
  transition: 0.3s;
  cursor: pointer;
  line-height: 28px;
}
.PicBlock .ChangePhotoBtn .PhotoUpload {
  clip-path: circle(50% at 50% 50%);
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
  font-size: 14px;
  background-color: var(--primary-bg-color);
  box-shadow: 1px 2px 3px 0 #bfbfbf;
  color: white;
}
.PicBlock .ChangePhotoBtn .PhotoUpload input.Upload[type=file],
.PicBlock .ChangePhotoBtn .PhotoUpload input.Upload[type=file]::-webkit-file-upload-button {
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity=0);
  width: 100%;
  height: 100%;
}
.PicBlock .ChangePhotoBtn .PhotoUpload input.Upload:hover {
  cursor: pointer;
}
.PicBlock .ChangePhotoBtn .PhotoUpload i {
  color: white;
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

/*Photo Upload Block End*/
.Features .check-box {
  display: inline-block;
  position: relative;
  top: 3px;
  margin-right: 5px;
}
.Features label {
  display: contents;
}

.VendorHeader {
  display: flex;
  padding: 30px 20px;
  align-items: center;
}
.VendorHeader .VendorLogoBox {
  width: 170px;
  margin-right: 20px;
}
.VendorHeader .VendorLogoBox .PicBlock {
  border-radius: 50%;
  box-shadow: 0px 0px 9px 0 #a3a3a3;
}
.VendorHeader .VendorInfo {
  display: flex;
  flex-direction: column;
}
.VendorHeader .VendorInfo h4 {
  color: black;
}
.VendorHeader .VendorInfo .ThemeControls {
  display: flex;
  justify-content: space-between;
}
.VendorHeader .VendorInfo .ThemeControls div {
  display: flex;
  align-items: center;
  margin-right: 60px;
}
.VendorHeader .VendorInfo .ThemeControls div input {
  user-select: none;
}
.VendorHeader .VendorInfo .ThemeControls div p {
  margin-bottom: 0px;
  margin-left: 10px;
  color: black;
  font-size: 120%;
}

.BookingCourts {
  padding: 0px;
}
.BookingCourts table thead tr th {
  text-align: center;
}
.BookingCourts table thead tr th:first-child {
  width: 10%;
}
.BookingCourts table tbody tr td {
  text-align: center;
  padding: 0px;
}
.BookingCourts table tbody tr td .BookStatus {
  font-size: 100%;
  font-weight: bolder;
  display: flex;
  border-radius: 0px;
  justify-content: center;
  align-items: center;
  height: 50px;
  box-shadow: none;
  text-transform: capitalize;
}
.BookingCourts table tbody tr td .BookStatus.Open {
  background-color: #f1f1f1 !important;
  border-color: #f1f1f1 !important;
  color: black !important;
}
.BookingCourts table tbody tr td .BookStatus.Open:hover {
  background-color: #bebebe !important;
  border-color: #bebebe !important;
}
.BookingCourts table tbody tr td .BookStatus.Blocked {
  background-color: #3A3A3A !important;
  border-color: #3A3A3A !important;
  color: black !important;
}
.BookingCourts table tbody tr td .BookStatus.Blocked:hover {
  background-color: #070707 !important;
  border-color: #070707 !important;
}
.BookingCourts table tbody tr td .BookStatus.Reserved {
  background-color: #3A3A3A !important;
  border-color: #3A3A3A !important;
  color: black !important;
}
.BookingCourts table tbody tr td .BookStatus.Reserved:hover {
  background-color: #070707 !important;
  border-color: #070707 !important;
}
.BookingCourts table tbody tr td .BookStatus.Booked {
  background-color: #D02128 !important;
  border-color: #D02128 !important;
  color: white !important;
}
.BookingCourts table tbody tr td .BookStatus.Booked:hover {
  background-color: #781317 !important;
  border-color: #781317 !important;
}
.BookingCourts table tbody tr td .BookStatus.In-Progress {
  background-color: #dafdb2 !important;
  border-color: #dafdb2 !important;
  color: black !important;
}
.BookingCourts table tbody tr td .BookStatus.In-Progress:hover {
  background-color: #aafa4f !important;
  border-color: #aafa4f !important;
}
.BookingCourts table tbody tr td .BookStatus.NA {
  background-color: white !important;
  border-color: white !important;
  color: black !important;
}
.BookingCourts table tbody tr td .BookStatus.NA:hover {
  background-color: #cccccc !important;
  border-color: #cccccc !important;
}

.PlayerDetails {
  color: black;
}
.PlayerDetails .card .card-body {
  /*#tbleteam tr:nth-of-type(odd),*/
}
.PlayerDetails .card .card-body .table-bordered {
  border: 0px !important;
}
.PlayerDetails .card .card-body #tbleplayers tr:nth-of-type(odd) {
  background-color: transparent !important;
}
.PlayerDetails .card .card-body #tbleplayers .form-control:disabled, .PlayerDetails .card .card-body #tbleplayers .form-control[readonly] {
  background-color: #f2f2f2;
  opacity: 1;
}
.PlayerDetails .card .card-body #tbleplayers td {
  border: 0px !important;
}
.PlayerDetails .card .card-body .playerItem {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.PlayerDetails .card .card-body .playerItem .playerImg img {
  width: 100%;
  height: 90px;
  object-fit: contain;
}
.PlayerDetails .card .card-body .playerItem .Details {
  margin-top: 20px;
  border-top: 1px solid #ccc;
  padding: 10px;
  padding-bottom: 0;
}
.PlayerDetails .card .card-body .playerItem .Details p {
  padding: 0;
  margin-bottom: 5px;
  font-size: 90%;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.PlayerDetails .card .card-body .playerItem .Details p i {
  width: 20px;
  height: 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #919191;
  border-radius: 5px;
  background: #919191;
  color: white;
  margin-right: 5px;
}

.Checkoutpage {
  padding: 0px 20px;
}
.Checkoutpage .card-body {
  padding: 20px;
}
.Checkoutpage .PayType .RadioGroup {
  display: flex;
  justify-content: space-between;
  width: 80%;
  padding: 10px 0px;
}
.Checkoutpage .PayType .RadioGroup div {
  display: flex;
}
.Checkoutpage .PayType .RadioGroup div input {
  width: 20px;
  height: 20px;
  position: relative;
  margin-right: 10px;
}
.Checkoutpage .PayType .RadioGroup div label {
  font-weight: 400;
}
.Checkoutpage .SavedCards {
  margin-top: 10px;
}
.Checkoutpage .SavedCards .CardList .saved-cards-box {
  border: 0 solid #dde5ec;
  padding: 0px 10px;
  margin-bottom: 10px;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
}
.Checkoutpage .SavedCards .CardList .saved-cards-box .saved-cards-box-btm {
  position: relative;
}
.Checkoutpage .SavedCards .CardList .saved-cards-box .saved-cards-box-btm input[type=radio] {
  width: 20px;
  height: 20px;
  top: 10px;
  position: relative;
  margin-right: 10px;
}
.Checkoutpage .SavedCards .CardList .saved-cards-box .saved-cards-box-btm .saved-cards-box-top {
  display: flex;
  justify-content: start;
  flex-direction: row;
}
.Checkoutpage .SavedCards .CardList .saved-cards-box .saved-cards-box-btm .saved-cards-box-top .saved-cards-box-center {
  width: 100%;
  display: flex;
}
.Checkoutpage .SavedCards .CardList .saved-cards-box .saved-cards-box-btm .saved-cards-box-top .saved-cards-box-center .saved-cards-box-left {
  width: 40px;
}
.Checkoutpage .SavedCards .CardList .saved-cards-box .card-number {
  color: #3d4152;
  font-size: 100%;
  font-weight: 600;
  margin-bottom: 5px;
  text-align: left;
  margin-left: 10px;
  margin-top: 5px;
}
.Checkoutpage .SavedCards .CardList .saved-cards-box .valid {
  color: #3d4152;
  font-size: 70%;
  font-weight: 600;
  margin-bottom: 5px;
  text-align: left;
  margin-left: 10px;
  margin-top: 5px;
}
.Checkoutpage .AddNewCard {
  margin-top: 10px;
}
.Checkoutpage .AddNewCard b {
  margin-bottom: 20px;
}
.Checkoutpage .AddNewCard .CardBox {
  padding: 20px;
  background-color: #d9d9d9;
  border-radius: 10px;
  margin-bottom: 10px;
}
.Checkoutpage .AddNewCard .CardBox label {
  font-weight: 400;
}
.Checkoutpage .AddNewCard .CardBox .form-control {
  background: white;
  border: 1px solid #8e8e8e;
  margin-bottom: 10px;
  color: black;
  font-size: 100%;
}
.Checkoutpage .AddNewCard .CardBox .flexrow {
  display: flex;
  justify-content: space-between;
}
.Checkoutpage .AddNewCard .CardBox .flexrow .exp-date {
  flex-basis: 30%;
}
.Checkoutpage .AddNewCard .CardBox .flexrow .cvv-box {
  flex-basis: 30%;
}
.Checkoutpage .AddNewCard .CardBox .CheckboxGroup {
  display: flex;
  align-items: center;
}
.Checkoutpage .AddNewCard .CardBox .CheckboxGroup input {
  margin-right: 10px;
}
.Checkoutpage .CheckoutDetails {
  user-select: none;
}
.Checkoutpage .CheckoutDetails .Image {
  border-radius: 10px;
  overflow: hidden;
  height: 250px;
  margin-bottom: 10px;
}
@media (max-width: 600px) {
  .Checkoutpage .CheckoutDetails .Image {
    margin-top: 20px;
    height: fit-content;
  }
}
.Checkoutpage .CheckoutDetails .Image img {
  width: 100%;
}
.Checkoutpage .CheckoutDetails .CheckoutContent {
  user-select: none;
}
.Checkoutpage .CheckoutDetails .CheckoutContent p {
  width: 49%;
  display: inline-block;
  line-height: 26px;
}
@media (max-width: 600px) {
  .Checkoutpage .CheckoutDetails .CheckoutContent p {
    width: 100%;
    display: inline-block;
    line-height: 26px;
  }
}
.Checkoutpage .CheckoutDetails .CheckoutContent p b {
  user-select: none;
}
.Checkoutpage .CheckoutDetails .CheckoutContent .table {
  user-select: none;
}
.Checkoutpage .ReservationSucess {
  text-align: center;
}
.Checkoutpage .ReservationSucess .Image {
  display: block;
  margin-bottom: 10px;
}
.Checkoutpage .ReservationSucess .Image img {
  width: 70%;
}
.VendorSetting {
  color: var(--primary-bg-color);
}
.VendorSetting h4 {
  display: block;
  width: 100%;
  font-size: 150%;
  margin: 0px 15px 9px;
  border-bottom: 1px solid var(--primary-bg-color);
}

.SubHeader {
  display: flex;
  padding: 10px 15px;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}
.SubHeader .LeftSide {
  display: flex;
}
.SubHeader .LeftSide .BackBtn {
  margin-right: 15px;
  display: inline-flex;
  align-items: center;
}
.SubHeader .LeftSide .BackBtn i {
  margin-right: 10px;
}
.SubHeader .Locations {
  display: flex;
  align-items: center;
}
.SubHeader .Locations p {
  margin: 0px 10px 0px 0px;
}
@media (max-width: 768px) {
  .SubHeader .Locations p {
    margin: 10px 10px 10px 0px;
  }
}
.SubHeader .Locations p b {
  font-weight: bold;
}
@media (max-width: 768px) {
  .SubHeader .Locations p b {
    display: block;
  }
}
.SubHeader .BookingDates {
  display: flex;
  align-items: center;
}
.SubHeader .BookingDates p {
  display: flex;
  align-items: center;
}
@media (max-width: 768px) {
  .SubHeader .BookingDates p {
    margin: 0px;
    justify-content: flex-end;
  }
}
.SubHeader .BookingDates p b {
  font-weight: bold;
  white-space: nowrap;
  margin-right: 10px;
}
.SubHeader .BookingDates p input {
  width: 50%;
  text-align: center;
}
.SubHeader .RightSide {
  user-select: none;
}
.SubHeader .RightSide .NotifyStatus {
  display: flex;
  background: white;
  padding: 10px 10px;
  border-radius: 10px;
  box-shadow: inset 0px 0px 0px 0px #c9c9c9;
}
@media (max-width: 768px) {
  .SubHeader .RightSide .NotifyStatus {
    margin-top: 10px;
    flex-wrap: wrap;
  }
}
.SubHeader .RightSide .NotifyStatus .StatusItem {
  margin-left: 30px;
  display: flex;
  align-items: center;
}
.SubHeader .RightSide .NotifyStatus .StatusItem:nth-child(1) {
  margin-left: 0px;
}
@media (max-width: 768px) {
  .SubHeader .RightSide .NotifyStatus .StatusItem {
    margin-bottom: 5px;
  }
}
.SubHeader .RightSide .NotifyStatus .StatusItem span {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  border: 1px solid #f1f1f1;
  border-radius: 30px;
}
.SubHeader .RightSide .NotifyStatus .StatusItem span.Selected {
  background-color: var(--primary-bg-color);
}
.SubHeader .RightSide .NotifyStatus .StatusItem span.Blocked {
  background-color: #3A3A3A;
}
.SubHeader .RightSide .NotifyStatus .StatusItem span.Open {
  background-color: #f1f1f1;
}
.SubHeader .RightSide .NotifyStatus .StatusItem span.Booked {
  background-color: #D02128;
}
.SubHeader .RightSide .NotifyStatus .StatusItem span.InProgress, .SubHeader .RightSide .NotifyStatus .StatusItem span.In-Progress {
  background-color: #dafdb2;
}
.SubHeader .RightSide .NotifyStatus .StatusItem p {
  margin: 0px;
  line-height: normal;
}
.SubHeader .RightSide .BookingActions {
  user-select: none;
}
.SubHeader .RightSide .BookingActions a {
  display: inline-block;
  color: black;
  margin-right: 30px;
  font-size: 200%;
}
.SubHeader .RightSide .BookingActions a i {
  user-select: none;
}
.SubHeader .RightSide .BookingActions a:last-child {
  margin-right: 0px;
}

.PlayerDetails {
  padding: 0px 20px;
}
.PlayerDetails .card .card-body .table-bordered {
  border: 0px !important;
}
@media (max-width: 768px) {
  .PlayerDetails .card .card-body .table-bordered {
    display: inline-table;
  }
}
.PlayerDetails .card .card-body #tbleplayers tr:nth-of-type(odd) {
  background-color: transparent !important;
}
.PlayerDetails .card .card-body #tbleplayers .form-control:disabled, .PlayerDetails .card .card-body #tbleplayers .form-control[readonly] {
  background-color: #f2f2f2;
  opacity: 1;
}
.PlayerDetails .card .card-body #tbleplayers td {
  border: 0px !important;
}
.PlayerDetails .card .card-body .col-lg-4 {
  border-right: 1px solid black;
}
.PlayerDetails .card .card-body .text {
  margin-bottom: 20px;
  font-size: 150%;
  font-weight: 900;
}
.PlayerDetails .card .card-body #dvfortwoplayer label {
  font-weight: normal;
}
.PlayerDetails .card .card-body .playerItem {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.PlayerDetails .card .card-body .playerItem .playerImg img {
  width: 100%;
  height: 90px;
  object-fit: contain;
}
.PlayerDetails .card .card-body .playerItem .Details {
  margin-top: 20px;
  border-top: 1px solid #ccc;
  padding: 10px;
  padding-bottom: 0;
}
.PlayerDetails .card .card-body .playerItem .Details p {
  padding: 0;
  margin-bottom: 5px;
  font-size: 90%;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.PlayerDetails .card .card-body .playerItem .Details p i {
  width: 20px;
  height: 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #919191;
  border-radius: 5px;
  background: #919191;
  color: white;
  margin-right: 5px;
}

.DeleteById {
  cursor: pointer;
}