/* These styles are generated from project.scss. */

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

.white-bkgrd {
  background-color: white;
}

.hz-orange {
  color: #f99c1b !important;
}

.hz-blue {
  color: #4745a5;
}

.hz-light-blue {
  color: #7877a5;
}

.hz-blue-bkgrd {
  background-color: #b3b0fa;
}

.hz-orange-bkgrd {
  background-color: #f99c1b;
}

.font-xx-small {
  font-size: xx-small !important;
}

.btn-hz-orange {
  background: #f99c1b;
  border-color: #f99c1b;
}

.btn.btn-xxs {
  font-size: .6875rem;
  padding: 1px 1px;
}

.logo-grey {
  color: #999;
}

.logo-light-grey {
  color: #cecdcd;
}

.logo-red {
  color: #f91b26;
}

.textred {
  color: #f91b26 !important;
}

/* icon colors */
.icon-add {
  color: #03d42d;
}

.icon-delete {
  color: #d40303;
}

.icon-edit {
  color: #f99c1b;
}


.move-down {
  margin-top: 30px;
}

.move-down-8 {
  margin-top: 8px;
}

.move-down-10 {
  margin-top: 10px;
}

.move-down-14 {
  margin-top: 14px;
}

.move-down-17 {
  margin-top: 17px;
}

.move-down-18 {
  margin-top: 18px;
}

.pull-up-15 {
  margin-top: -15px;
}

.headline-title {
  margin-left: 1rem;
  margin-bottom: 0.6rem;
  margin-top: 0.6rem;
  /* color: #4444 */
}

.bg-bisque {
  background-color: bisque !important;
}

.bg-antiquiewhite {
  background-color: antiquewhite !important;
}


.check-in-done {
  background-color: #52504d !important;
}

.no-checkin {
  background-color: #ee6363 !important;
}

.checked-in {
  background-color: #e2efe8 !important;
}

.old-booking {
  background-color: #c9caca !important;
}

.red {
  color: #ee6363;
}

.font-fat {
  font-weight: 800;
}

.font-x-small {
  font-weight: 400;
  font-size: x-small;
}

.pl-3em {
  padding-left: 3em;
}

.pad-top-1em {
  padding-top: 1em;
}

.padbox {
  padding-left: 1.2rem !important;
  padding-right: 1.2rem !important;
  padding-bottom: 0.9rem !important;
  padding-top: 0.9rem !important;
}

.app-header .navbar-brand {
  padding: 10px 20px;
  height: 50px;
  font-weight: 100;
  font-size: 18px;
  line-height: 30px;
  text-decoration: none;
  margin: 0;
  color: var(--app-header-color);
  align-items: center;
  display: flex;
  margin-right: auto;
}

.django-id {
  display: none;
}

/* dark mode adjustments */
/* a {
  color: #f2ce99;
  text-decoration: underline;
} */

/* booking notes colors */
.guest-note {
  color: #f99c1b !important;
}

.owner-note {
  color: #5c5cf9 !important;
}

.internal-note {
  color: #f91b26 !important;
}

/* header background black */
.app-header .navbar-header {
  display: flex;
  align-items: center;
  background-color: black;
}

.app-header .navbar-nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
  background-color: black;
}

.select-box {
  width: 200px !important;
}

.template-select {
  /* width: 11rem; */
  padding-right: 2px !important;
  padding-left: 5px !important;
  padding-top: 1px !important;
  padding-bottom: 1px !important;
}

/* select.template-select:not([size]):not([multiple]) {
  height: auto !important;
} */

.add-button {
  margin-left: 20px;
}

.panel-margin-right {
  margin-right: 20px;
}

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

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

/* textarea for sticky notes */
.stickynotes {
  width: 100%;
}

.textwrapper {
  border: 1px solid #999999;
  margin: 5px 0;
  padding: 3px;
}


/* CSS for modal */
.ismodal {
  display: none;

  /* Add other styles like position, z-index, etc. */
}

.isshow {
  display: block;
  /* Add any necessary styles for showing the modal */
}

.feature-img {
  height: 300px;
  /* Set the desired height for the images */
  object-fit: cover;
  /* Maintain image aspect ratio and cover container */
}

.modal-backdrop {
  opacity: 0.6;
  /* Adjust this value to your desired transparency (0.0 to 1.0) */
  background-color: rgba(0, 0, 0, 0.5);
  /* Use rgba for background color with transparency */
}

/* logos */
.logo {
  width: -webkit-fill-available;
  height: 200px;
}

/* different colors for service companies 
        SERVICE_CHOICES=((CLEANING, 'House Cleaning'),
          (LAWN_CARE, 'Lawn Care'),
          (PEST, 'Pest Control'),
          (POOL, 'Pool Service'),
          (HANDY, 'Handy man'),
          (OTHER, 'other')
*/
.service-cleaning {
  background-color: #c6e0fb !important;
}

.service-lawn {
  background-color: #ccfcd5 !important;
}

.service-pest {
  background-color: #fad0d2 !important;
}

.service-pool {
  background-color: #cafaf1 !important;
}

.service-handy {
  background-color: #faf5d7 !important;
}

.service-plumber {
  background-color: #cac8bb !important;
}

.service-electrician {
  background-color: #beb6f5 !important;
}

.service-other {
  background-color: #4a4948 !important;
}

/* spinner */
.custom-loader {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 8px solid;
  border-color: #F49726 #0000;
  animation: s1 1s infinite;
  position: absolute;
  top: 30%;
  left: 50%;
}

@keyframes s1 {
  to {
    transform: rotate(.5turn)
  }
}

/* Center the loader within a container */
.loader-container {
  position: relative;
  width: 100%;
  height: 100vh;
}

/* #footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 10px;
  font-size: 10px;
} */

/* .fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: auto;
  z-index: 1030;
} */

/* accounting */
.debit {
  background-color: #f8dcb3;
}

.credit {
  background-color: #d2d9fd;
}

/* intro js help system */
.customTooltip * {
  color: #4a4a4a;
  font-size: 18px
}

.customTooltip .introjs-tooltip-title {
  color: #4745a5;
}

.introjs-tooltip-title {
  color: #4745a5;
}

.customTooltip .introjs-skipbutton {
  display: none !important;
}

.introjs-skipbutton {
  display: none !important;
}

.introjs-button {
  background-color: #f99c1b !important;
  color: rgb(255, 255, 255) !important;
}

.big-icon {
  width: 4em;
  font-size: 4em;
  /* font-size: 40px; */
  /* display: flex; */
  align-items: center;
  justify-content: center;
}

#browserWarning {
  display: none;
  background-color: rgb(138, 2, 2);
  /* Red background */
  color: white;
  /* White text */
  padding: 5px;
  text-align: center;
}

.header-divider {
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 20px;
}

#warningText {
  font-size: 1em;
  font-weight: bold;
}

.sub-header {
  font-size: 0.7em;
  color: gray;
}

.data-header {
  font-size: 1.4em;
}

.sticky-div {
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 0;
  /* Adjust this value based on your header's height or desired spacing */
  z-index: 1000;
  /* Ensure it's above other content */
}