/*

* demo.css

* File include item demo only specific css only

******************************************************************************/



/* loader */



#pageloader-overlay {

  opacity: 0;

  top: 0px;

  left: 0px;

  position: fixed;

  background-color: rgba(0, 0, 0, 0.7);

  height: 100%;

  width: 100%;

  z-index: 9998;

  -webkit-transition: opacity 0.2s linear;

  -moz-transition: opacity 0.2s linear;

  transition: opacity 0.2s linear;

}



#pageloader-overlay.visible {

  opacity: 1;

}



#pageloader-overlay.hidden {

  opacity: 0;

  height: 0px;#5C9345
#5C9345
  width: 0px;#5C9345

  z-index: -10000;

}



#pageloader-overlay .loader-wrapper-outer {

  background-color: transparent;

  z-index: 9999;

  margin: auto;

  width: 100%;

  height: 100%;

  overflow: hidden;

  display: table;

  text-align: center;

  vertical-align: middle;

}



#pageloader-overlay .loader-wrapper-inner {

  display: table-cell;

  vertical-align: middle;

}



#pageloader-overlay .loader {

  margin: auto;

  font-size: 10px;

  position: relative;

  text-indent: -9999em;

  border-top: 8px solid #5B9044;

  border-right: 8px solid #5B9044;

  border-bottom: 8px solid #5B9044;

  border-left: 8px solid #295C31;

  -webkit-transform: translateZ(0);

  -ms-transform: translateZ(0);

  transform: translateZ(0);

  -webkit-animation: pageloader 1.1s infinite linear;

  animation: pageloader 1.1s infinite linear;

}



#pageloader-overlay .loader,

#pageloader-overlay .loader:after {



  border-radius: 50%;

  width: 50px;

  height: 50px;

}



@-webkit-keyframes pageloader {

  0% {

    -webkit-transform: rotate(0deg);

    transform: rotate(0deg);

  }



  100% {

    -webkit-transform: rotate(360deg);

    transform: rotate(360deg);

  }

}



@keyframes pageloader {

  0% {

    -webkit-transform: rotate(0deg);

    transform: rotate(0deg);

  }



  100% {

    -webkit-transform: rotate(360deg);

    transform: rotate(360deg);

  }

}



.light-style .menu .app-brand.demo {

  height: 64px;

}



.dark-style .menu .app-brand.demo {

  height: 64px;

}



.app-brand-logo.demo svg {

  width: 38px;

  height: 20px;

}



.app-brand-text.demo {

  font-size: 1.25rem;

  letter-spacing: 0.15px;

}
#5C9345


/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */

.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {

  padding-top: 64px !important;

}



/* Navbar page z-index issue solution */

.content-wrapper .navbar {

  z-index: auto;

}



/*

* Content

******************************************************************************/



.demo-blocks>* {

  display: block !important;

}



.demo-inline-spacing#5C9345

  margin: 1rem 0.375rem 0 0 !important;

}



/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */

.demo-vertical-spacing>* {

  margin-top: 1.25rem !important;

  margin-bottom: 0 !important;

}



.demo-vertical-spacing.demo-only-element> :first-child {

  margin-top: 0 !important;

}



.demo-vertical-spacing-lg>* {

  margin-top: 1.875rem !important;

  margin-bottom: 0 !important;

}



.demo-vertical-spacing-lg.demo-only-element> :first-child {

  margin-top: 0 !important;

}



.demo-vertical-spacing-xl>* {

  margin-top: 5rem !important;

  margin-bottom: 0 !important;

}



.demo-vertical-spacing-xl.demo-only-element> :first-child {
#5C9345
  margin-top: 0 #5C9345ant;

}



.rtl-only {

  display: none !important;

  text-align: left !important;

  direction: ltr !important;

}



[dir='rtl'] .rtl-only {

  display: block !important;

}



/* Dropdown buttons going out of small screens */

@media (max-width: 576px) {

  #dropdown-variation-demo .btn-group .text-truncate {

    width: 300px;

    position: relative;

  }

#5C9345
#5C9345
  #dropdown-variation-demo .btn-group .text-truncate::after {

    position: absolute;

    top: 45%;

    right: 0.65rem;

  }

}



/*

* Layout demo

******************************************************************************/



.layout-demo-wrapper {

  display: -ms-flexbox;

  display: flex;

  -ms-flex-align: center;

  align-items: center;

  -ms-flex-direction: column;

  flex-direction: column;

  margin-top: 1.25rem;

}



.layout-demo-placeholder img {

  width: 900px;

}



.layout-demo-info {

  text-align: center;

  margin-top: 1.25rem;

}





/* Table Design For Booking slots */

.table-container {

  width: 100%;

  /* Full width */

  overflow-x: auto;

  /* Enable horizontal scrolling */

}



.slot-table-contents {

  padding-right: 1rem;

  padding-left: 1rem;

}



.table-container.slots-interface thead {

  /* background-color: #5B9044;

  color: white; */

  padding: 1rem;

}



.table-container.slots-interface thead tr th {

  padding: 1rem;

  border-right: 1px solid white;

  border-radius: 20px !important;

  margin-right: 10px !important;

}



.table-container.slots-interface thead tr th:last-child {

  border-right: none;

}



.table-container.slots-interface tbody tr td {

  /* padding: 2rem; */

}



.table-container.slots-interface tbody tr td:first-child {

  border-radius: 10px !important;

}



.table-container.slots-interface tbody tr td .btn-slot {

  font-size: 1rem;

  background-color: #EEEEEE;

  height: 4rem;

  width: 6rem;

  border-radius: 10px;

  border: none;

}



.table-container.slots-interface tbody tr td .btn-slot.active {

  background-color: #295C31;

  color: white;

}



.table-container.slots-interface tbody tr td .btn-slot.booked {

  background-color: #5B9044;

  color: white;

}



.table-container.slots-interface tbody tr td .btn-slot.manager_cancelled {

  background-color: #f1cb34;

  color: white;

}



.table-container.slots-interface tbody tr td .btn-slot.customer_cancelled {

  background-color: #f19634;

  color: white;

}



.table-container.slots-interface tbody tr td .btn-slot.cancelled {

  background-color: #ef3b0a;

  color: white;

}



.bg-active {

  background-color: #295C31;

}



.bg-manager_cancelled {

  background-color: #f1cb34;

}



.bg-customer_cancelled {

  background-color: #f19634;

}



.bg-cancelled {

  background-color: #ef3b0a;

}



.bg-none {

  background-color: #EEEEEE;

  color: grey;

}



.text-green {

  color: #295C31;

}



.bg-label-green {

  color: #295C31;

  background-color: #d9f3ae;

}



.btn-green {

  color: #fff;

  background-color: #295C31;

  border-color: #295C31;

}



.btn-green:hover {

  color: #fff !important;

  background-color: #5B9044 !important;

  border-color: #5B9044 !important;

}



.dataTables_wrapper .dt-buttons {

  margin-left: 1rem !important

}



.dataTables_wrapper .dataTables_filter {

  margin-top: 0 !important;

  margin-right: 1rem !important

}



.dataTables_wrapper .dataTables_paginate {

  margin-right: 1rem !important

}



.dataTables_wrapper .dataTables_info {

  margin-left: 1rem !important

}



.dataTables_wrapper.no-footer .dataTables_scrollBody {

  border-bottom: transparent !important

}



.dataTables_wrapper .thead,

.dataTables_wrapper .tbody {

  border-color: transparent !important;

  border-bottom: transparent !important

}



.dataTables_wrapper .btn-group>.btn,

.btn-group-vertical>.btn {

  flex: unset;

}



.dataTables_wrapper .buttons-copy {

  background: transparent !important;

  border-radius: 25px !important;

  border: 2px solid #5B9044 !important;

  color: #5B9044 !important;

  font-weight: bold !important;

  font-size: 12px !important;

  padding: 1rem !important;

  margin-right: .5rem !important;

  height: 0.375px !important;

}



.dataTables_wrapper .buttons-excel {

  background: transparent !important;

  border-radius: 25px !important;

  border: 2px solid #295C31 !important;

  color: #295C31 !important;

  font-weight: bold !important;

  font-size: 12px !important;

  padding: 1rem !important;

  margin-right: .5rem !important;

  height: 0.375px !important;

}



.dataTables_wrapper .buttons-pdf {

  background: transparent !important;

  border-radius: 25px !important;

  border: 2px solid #f81e00 !important;

  color: #f81e00 !important;

  font-weight: bold !important;

  font-size: 12px !important;

  padding: 1rem !important;

  margin-right: .5rem !important;

  height: 0.375px !important;

}



.dataTables_wrapper .buttons-print {

  background: transparent !important;

  border-radius: 25px !important;

  border: 2px solid #40a0ee !important;

  color: #40a0ee !important;

  font-weight: bold !important;

  font-size: 12px !important;

  padding: 1rem !important;

  height: 0.375px !important;

}



.dataTables_wrapper .dataTables_filter input {

  border-radius: 5px !important;

  padding: .5rem !important;

  border-color: #cfd0d6 !important;

}



@media (max-width: 768px) {

  .dataTables_wrapper .dt-buttons {

    margin-left: 0rem !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

  }



  .dataTables_wrapper .dataTables_filter {

    margin-top: 1.25rem !important;

    margin-right: 0rem !important

  }



  .dataTables_wrapper .dataTables_paginate {

    margin-right: 0rem !important

  }



  .dataTables_wrapper .dataTables_info {

    margin-left: 0rem !important

  }

}



.vh-50 {

  height: 50vh !important;

}



.float-right {

  float: right;

}



.bg-promo {

  background-color: #0049B7;

}



.bg-warning {

  background-color: #fbb912;

}



.bg-black {

  background-color: #000000;

}

.bg-white {

  background-color: #ffffff;

}

.table-td-fix-width {

  max-width: 400px !important;

  white-space: normal !important;

}

.td-white {

  background: white !important;

  z-index: 100 !important;

}