[x-cloak] { display: none !important; }

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

.pagy-nav {
  @apply flex justify-center items-center gap-x-6 sm:gap-x-8
}

.pagy-nav .page.active {
  @apply bg-emerald-200 text-emerald-600 rounded-md py-1 px-2
}


.iti {
  @apply w-full;
}

:root {
  --safe-area-inset-bottom: env(safe-area-inset-bottom);
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .safe-area {
    border: 0px;
    background: #ffffff;
    height: calc(var(--safe-area-inset-bottom) - 0.5rem);
  }
}

@layer components {
  .label {
    @apply block text-sm font-medium text-gray-700 dark:text-gray-100;
  }

  .input {
    @apply block w-full appearance-none rounded-xl font-jakarta border border-gray-300 px-3 py-2 placeholder-gray-500 focus:border-emerald-500 focus:outline-none focus:ring-emerald-500;
  }

  .card {
    @apply bg-white dark:bg-gray-800 rounded-md border border-gray-300 dark:border-gray-700 divide-y divide-gray-300 dark:divide-gray-700 overflow-hidden;
  }

  .card > .card-header,
  .card > .card-footer {
    @apply px-6 py-2;
  }

  .card > .card-body {
    @apply p-6;
  }

  .field-error-explanation {
    @apply mt-2 text-sm text-red-600 dark:text-red-400;
  }

  .quick-action {
    @apply items-center inline-flex gap-x-2 text-gray-500 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700 rounded-md border border-gray-300 dark:border-gray-700 px-2 py-1;
  }

  .annotation {
    @apply text-sm text-gray-500 dark:text-gray-200;
  }

  .dropzone {
    @apply rounded-md border-0 dark:text-gray-200 dark:bg-gray-800 p-0 min-h-fit !important;
  }

  .dropzone .dz-message {
    @apply py-8 m-0 !important;
  }

  .dropzone .dz-preview {
    @apply dark:bg-gray-800 dark:text-gray-200 !important;
  }

  .dropzone .dz-preview .dz-progress {
    @apply top-[70%] !important;
  }

  .slideover {
    @apply flex h-full flex-col divide-y divide-gray-200 bg-white px-2 pb-2;
  }

  .slideover .slideover-content {
    @apply flex min-h-0 flex-1 flex-col overflow-y-auto;
  }

  .slideover .slideover-header {
    @apply px-4 py-4 sticky top-0 z-40 bg-white border-b border-gray-300;
  }

  .slideover .slideover-body {
    @apply relative flex-1 px-4 sm:px-6 py-6;
  }

  .slideover .slideover-footer {
    @apply p-1 sticky bottom-0 z-40 bg-white bg-opacity-75 backdrop-blur backdrop-filter;
  }

  .slideover .slideover-header .slideover-title {
    @apply pr-10 text-3xl font-medium font-jakarta text-gray-900;
  }

  .slideover .slideover-header .slideover-subtitle {
    @apply pr-10 flex-wrap leading-7 flex items-center gap-x-2 mt-2 font-jakarta text-gray-700;
  }

  .slideover .slideover-header .slideover-hint {
    @apply mt-6 font-jakarta text-gray-900 text-lg pr-10 whitespace-nowrap flex-wrap leading-7 flex items-center gap-2;
  }

  .slideover .btn-primary {
    @apply text-lg bg-emerald-600 cursor-pointer text-emerald-100 dark:text-gray-200 whitespace-nowrap flex justify-center gap-x-4 items-center py-3 px-4 font-jakarta rounded-2xl;
  }

  .slideover .btn-text {
    @apply text-lg cursor-pointer text-emerald-900 whitespace-nowrap flex justify-center gap-x-4 items-center py-3 px-4 font-jakarta;
  }

  .slideover .btn-secondary {
    @apply px-2 py-1 rounded-lg border border-gray-300 flex gap-x-2 items-center;
  }

  .rich-input {
    @apply flex items-center gap-x-2 w-full py-2 px-4 justify-between font-medium text-gray-900 border border-gray-300 rounded-lg cursor-pointer;
  }

  .recurring_select {
    @apply block w-full appearance-none rounded-xl font-jakarta border border-gray-300 px-3 py-2 placeholder-gray-500 focus:border-emerald-500 focus:outline-none focus:ring-emerald-500;
  }

  .rs_dialog_holder {
    @apply backdrop-blur-sm bg-gray-500/40 transition-opacity !important;
  }

  .rs_dialog {
    @apply font-jakarta w-96 relative bg-white border-0 shadow-none overflow-hidden rounded-2xl p-6 !important;
  }

  .rs_dialog .controls {
    @apply flex items-center justify-end mt-6 !important;
  }

  .rs_dialog .controls input {
    @apply m-0 w-auto !important;
    background-image: none !important;
  }

  .rs_dialog .controls input {
    @apply font-jakarta bg-transparent border-none text-base font-normal h-auto px-4 py-2 rounded-lg !important;
  }

  .rs_dialog .controls .rs_save {
    @apply text-emerald-500 bg-transparent hover:text-emerald-700 hover:bg-emerald-300/10 hover:shadow-none hover:border-none !important;
  }

  .rs_dialog .controls .rs_cancel {
    @apply text-red-500 bg-transparent hover:text-red-700 hover:bg-red-300/10 hover:shadow-none hover:border-none !important;
  }

  .rs_dialog label {
    @apply text-gray-900 text-sm !important;
  }

  .rs_dialog p {
    @apply text-gray-900 text-sm !important;
  }

  .rs_dialog input,
  .rs_dialog select {
    @apply inline-block appearance-none rounded-xl font-jakarta border border-gray-300 px-3 py-2 placeholder-gray-500 focus:border-emerald-500 focus:outline-none focus:ring-emerald-500 !important;
  }

  .rs_frequency {
    @apply w-60 !important;
  }

  .rs_dialog input[type="radio"] {
    @apply rounded-full p-0 w-4 h-4 !important;
  }

  .rs_dialog input[type="radio"]:checked {
    @apply bg-emerald-500 !important;
  }

  .rs_dialog h1 {
    @apply text-xl text-gray-900 mb-6 !important;
  }

  .rs_interval {
    @apply w-12 mx-2 !important;
  }

  .rs_dialog_holder .rs_dialog .rs_dialog_content {
    @apply p-0 !important;
  }

  .rs_summary {
    @apply border-dashed !important;
  }

  .rs_summary,
  .rs_summary span {
    @apply font-normal !important;
  }

  .rs_dialog_holder .rs_dialog .rs_dialog_content .freq_option_section label {
    @apply font-normal !important;
  }

  .day_holder {
    @apply flex items-center gap-x-2 border-none !important;
  }

  .day_holder a {
    @apply w-7 h-7 rounded-full border-none p-0 flex items-center justify-center font-normal text-gray-900 bg-gray-100 shadow-none !important;
  }

  .day_holder a.selected {
    @apply shadow-none bg-emerald-500 text-emerald-50 !important;
    background-image: none !important;
  }

  .rs_calendar_day {
    @apply pr-12 !important;
  }

  .rs_calendar_day,
  .rs_calendar_week {
    @apply w-auto !important;
  }

  .rs_calendar_day a,
  .rs_calendar_week a {
    @apply w-7 h-7 inline-flex items-center justify-center p-0 font-normal text-gray-900 border-none rounded-full m-1.5 bg-gray-100 hover:bg-emerald-500/20 !important;
  }

  .rs_calendar_day a.selected,
  .rs_calendar_week a.selected {
    @apply font-medium shadow-none text-emerald-900 bg-emerald-500/50 !important;
    background-image: none !important;
    text-shadow: none !important;
  }

  .rs_calendar_day a.end_of_month,
  .rs_calendar_week a.end_of_month {
    @apply w-auto px-2 rounded-lg !important;
  }
}

.selectize-dropdown {
  @apply absolute bg-white w-full left-0 right-0 mt-3 z-50 p-0 h-60 overflow-y-auto !important;
}

.selectize-input {
  width: 100%;
  cursor: pointer;
}

.selectize-input input:focus {
  outline: 0 !important;
}

.selectize-control.multi > .selectize-input > div::after {
  content: ",\00a0";
}

.selectize-input.items {
  display: flex;
  flex-wrap: wrap;
  @apply bg-white !important;
}

.selectize-control {
  display: flex;
}

.selectize-dropdown-content .option {
  @apply py-2 px-3 text-sm cursor-pointer hover:bg-gray-100 !important;
}

.current-time-indicator {
  @apply w-full border-emerald-700 absolute z-[50000] border-b-2;
}

.selectize-control.multi > .selectize-input > div::after {
  content: "";
}

.selectize-control.multi .selectize-input a.remove {
  color: #f472b6;
  margin-left: 0.75rem;
}

/* .current-time-indicator:before {
  content: "";
  display: block;
  position: absolute;
  height: 12px;
  width: 12px;
  left: -6px;
  top: -6px;
  @apply bg-emerald-600 rounded-full;
} */

/* Web to generate those patterns: http://www.patternify.com/ */
.ooo-pattern {
  background-color: white;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAEhJREFUKFNj/Hfq1H8GAuDX8uUMjIQUghSxRUbiVwhTBLIQp4nIinAqRFeEVSE2RRgKcSlCUYhPEVwhIUVghT8KC/+DwokQAACZnj39c+GRsgAAAABJRU5ErkJggg==");
}

.ooo-pattern-blue {
  background-color: #dce8f8;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAEhJREFUKFNjnHz0738GAmDF3p8MjIQUghRFOLPjVwhTBLIQp4nIinAqRFeEVSE2RRgKcSlCUYhPEVwhIUVghdZN3/6DwokQAAChMTuxp1Kd7AAAAABJRU5ErkJggg==");
}

.ooo-bg-pattern {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAEhJREFUKFNjnLJ4x38GAmDzpo0MjIQUghT5+vnjVwhTBLIQp4nIinAqRFeEVSE2RRgKcSlCUYhPEVwhIUVghe6hmf9B4UQIAAC2wjdtEm9yqwAAAABJRU5ErkJggg==");
}

/* .profiler-results {
  display: none;
} */

.professionals-picker-grid {
  @apply relative gap-y-6 gap-x-2 grid grid-cols-3;
}

.professionals-picker-grid .professional-btn {
  @apply w-full font-jakarta text-gray-900 cursor-pointer inline-block items-center col-span-1;
}

.slot {
  @apply w-full py-2 px-4 flex justify-between items-center text-gray-900 rounded-xl font-jakarta border border-gray-300;
}

.calendar-carousel .day {
  @apply flex items-end p-4 text-gray-900 rounded-2xl w-28 h-28 cursor-pointer border border-gray-300;
}

.calendar-carousel .day.active {
  @apply border-2 border-emerald-500;
}

.calendar-carousel .day .number-container {
  @apply w-8 h-8 rounded-lg bg-emerald-100 flex items-center justify-center;
}

.calendar-carousel .day .number-container.active {
  @apply bg-emerald-500;
}

.calendar-carousel .day .number-container .number {
  @apply font-jakarta text-emerald-700;
}

.calendar-carousel .day .number-container .number.active {
  @apply text-emerald-50;
}

.calendar-carousel .day .weekday {
  @apply text-gray-700 mt-1 font-jakarta;
}

.calendar-carousel .day .month {
  @apply text-sm text-gray-500 font-jakarta;
}

.otp-container {
  @apply flex gap-x-2 items-center;
}

.otp-container .otp-input {
  @apply w-12 h-12 text-lg border border-gray-300 rounded-xl bg-transparent focus:outline-emerald-500 text-center font-jakarta placeholder:text-gray-300;
}

.safe-area-inset-bottom {
  padding-bottom: 40px;
}

.edit-link {
  @apply flex items-center gap-x-2 text-sm text-sky-700 bg-sky-50 rounded-md p-1;
}

.highlight {
  @apply bg-yellow-300;
}

.highlightable:has(.highlight) {
  display: inline-block;
}

.links a {
  @apply text-emerald-500 underline;
}

.hover\:z-\[50000\]:hover {
  z-index: 50000 !important;
}

.appearance-none {
  background-image: none;
}

.appearance-none::-webkit-calendar-picker-indicator {
  background: none;
  display: none;
}

.incoming-svg {
  color: #262d31;
  transform: scaleX(-1);
}

.single-message {
  background-color: #E9ECEC;
  white-space: pre-line;
  @apply font-sans;
}

.single-message a {
  color: #059669;
}

.single-message a:hover {
  text-decoration: underline;
}
.w-40per {
  width: 40%;
}
.w-60per {
  width: 60%;
}

.tooltip-container {
  position: relative;
  z-index: 50;
}

.tooltip-text {
  display: none;
  width: auto;
  min-width: 240px;
  max-width: 300px;
  background-color: #0F2E24;
  color: white;
  font-size: .875rem; 
  text-align: center;
  line-height: 1.25rem;
  padding: .625rem;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  left: 100%;
  margin-left: 10px;
  transform: translateY(-50%);
  z-index: 90;
}

.tooltip-text-over {
  left: 55% !important;
  right: auto !important;
  top: auto !important;
  bottom: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: translateX(-40%) translateY(-10px) !important;
  max-width: 280px !important;
  min-width: 150px !important;
  white-space: normal !important;
  word-break: break-word !important;
}

.tooltip-text-left {
  text-align: justify;
  text-justify: inter-word;
  display: none;
  width: auto;
  min-width: 240px;
  max-width: 300px;
  background-color: #0F2E24;
  color: white;
  font-size: .875rem; 
  text-align: center;
  line-height: 1.25rem;
  padding: .625rem;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  right: 100%;
  margin-left: 10px;
  transform: translateY(-50%);
  z-index: 90;
}

.tooltip-container:hover .tooltip-text {
  display: block;
}

.tooltip-container:hover .tooltip-text-left {
  display: block;
}

.free-trial-warning {
  text-align: center;
  position: relative;
  height:auto;
  color: white;
  font-family: 'Plus Jakarta Display';
  font-size: 14px; 
  padding-top: 9px;
  padding-bottom: 9px;
  z-index: 11;
  margin: 0px;
}
.max-w-4xl-or-90percent {
  max-width: min(56rem, 90%);
}

.spinner-core-2 {
  animation: rotate-core 1.6s linear infinite;
  transform-origin: 19.6px 20px; 
}
.spinner-core-1 {
  animation: rotate-core 1.2s linear infinite;
  transform-origin: 19.6px 20px; 
}
.spinner-outer {
  animation: rotate-outer 1.5s linear infinite;
  transform-origin: 19.6px 20px; 
}

@keyframes rotate-outer {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);  
  }
}

@keyframes rotate-core {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);  
  }
}


@keyframes fade-in {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}

.animate-fade-in {
  animation: fade-in 1s forwards;
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.2;
  }
}
.animate-fade-out {
  animation: fade-out 1s forwards;
}

.service-list-for-professionals {
  max-width: 400px;
  overflow: hidden;
  text-wrap: wrap;
  white-space: normal;
}

.btn-default {
  @apply py-3 px-5 bg-emerald-600 hover:bg-emerald-800 text-zinc-50 rounded-lg cursor-pointer;
}

.btn-default-disabled {
  @apply py-3 px-5 bg-gray-300 text-gray-500 rounded-lg cursor-not-allowed pointer-events-none;
}

.btn-default-secondary {
  @apply py-3 px-5 text-emerald-600 hover:text-zinc-50 hover:bg-emerald-800 border border-gray-400 rounded-lg cursor-pointer;
}

/* Notification bell animations */

@keyframes wiggle {
  0%, 100% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(10deg);
  }
}

.animate-wiggle {
  animation: wiggle 1s ease-in-out 4;
}

@keyframes dot-pulse{
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(2);
  }
  100% {
    transform: scale(1);
  }
}

.animate-dot-pulse {
  animation: dot-pulse 1s ease-in-out 4;
}

/* Effect bell priority level 3 */

@keyframes pulse {
  0%, 100% {
    opacity: 0.2;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.2);
  }
}

.animate-pulse {
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes softpulse {
  0%, 100% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.1);
  }
}

.animate-softpulse {
  animation: softpulse 2s ease-in-out infinite;
}

.pagy {
  @apply flex space-x-1 font-semibold text-sm text-gray-500;
  a:not(.gap) {
    @apply block rounded-lg px-3 py-1 bg-gray-200;
    &:hover {
      @apply bg-gray-300;
    }
    &:not([href]) { /* disabled links */
      @apply text-gray-300 bg-gray-100 cursor-default;
    }
    &.current {
      @apply text-white bg-gray-400;
    }
  }
  label {
    @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;
    input {
      @apply bg-gray-100 border-none rounded-md;
    }
  }
}

.details-phone-container {
  @apply flex justify-between items-center text-gray-900 text-sm my-2 w-full;
}

.details-phone-container .iti {
  @apply w-8/12;
}

.details-phone-container .iti__tel-input {
  @apply w-full text-sm text-gray-500 bg-transparent hover:bg-gray-100 border border-gray-100 focus:border-transparent rounded-lg px-2 py-1 focus:outline-none focus:ring-2 focus:ring-emerald-500;
}
.flatpickr-day.selected {
  background-color: #10b981 !important;
  color: white !important;
  border-color: #10b981 !important;
  box-shadow: none !important;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */

.client-header {
  background: #757f9a; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #d7dde8,
    #757f9a
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #d7dde8,
    #757f9a
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.appointment-box-smaller-text-hour {
  font-size: 0.65rem; /* Adjust the size as needed */
}

.appointment-box-smaller-text-service-name {
  font-size: 0.65rem; /* Adjust the size as needed */
}

.text-extra-small {
  font-size: 0.65rem; /* Adjust the size as needed */
}

.professional-name-text-available-slot {
  font-size: 0.85rem; /* Adjust the size as needed */
}

.swal2-html-container {
  font-family: 'Plus Jakarta Display';
}
.swal2-popup {
  border-radius: 1rem;
  margin-top: 0px;
  padding-top: 0px;
  font-family: 'Plus Jakarta Display';
}
.swal2-icon {
  margin-top: 10px;
  margin-bottom: 0px;
  scale: 0.7;
}
.swal2-title {
  margin-bottom: 20px;
  color: rgb(17, 24, 39);
  font-weight: 500;
}
.swal2-styled:focus {
  box-shadow: none;
}
.swal2-styled {
  font-family: 'Plus Jakarta Display';
  font-weight: 400;
  border-radius: 1rem;
  box-shadow: none;
}
.swal2-confirm {
  color: rgb(209, 250, 229);
  background-color: rgb(5 150 105);
}
.left-overflow-trunc {
  max-width: 100%;
  overflow: hidden;
  text-overflow: unset;
  text-wrap: auto;
  text-align: left;
  text-wrap-mode: wrap;
  overflow-x: hidden;
  align-items: start;
  -webkit-box-align: end;
}
#autocomplete-results {
  z-index: 1000;
  border-radius: 1rem;
  border-bottom: solid 1px #rgb(209 213 219);
  margin-bottom: 0px;
  color: #333;
  max-height: 200px;
  overflow-y: scroll;
}
#metrics-input {
  color: #333;
  width: 100%; min-width: 320px; max-width: 720px;
}
.search-box-ai {
  width: 640px;
  max-width: 100%;
  min-width: 320px;
}
.metrics-result-item:hover {
  background-color: #f7f7f7;
  color: rgb(6, 78, 59);
}
.search-suggestions {
  width: 100%;
}
.metrics-result-item {
  padding: 10px;
  color: #333;
  cursor: pointer;
  background-color: #ffffff;
}

.search-box-bg {
  background: rgb(2,0,36);
  background: linear-gradient(180deg, rgb(0 67 59) 0%, rgb(5 110 83) 15%, rgb(55 212 150) 100%);
}
.fade-animation {
  animation: fadeInOut 1s infinite;
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}
.iti__dropdown-content {
  z-index: 99!important;
}
/* -------- resets ---------------*/
.rs_dialog_holder {
  font-size: 14px;
  color: black; }
  .rs_dialog_holder a {
    color: black; }
  .rs_dialog_holder input[type=button] {
    font: small/normal Arial,sans-serif;
    background: #F5F5F5;
    color: #444;
    border: 1px solid #ccc;
    font-size: 11px;
    font-weight: bold;
    height: 27px;
    line-height: 27px;
    outline: none;
    padding: 0 8px;
    text-align: center;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    position: relative;
    background-image: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
    /* Chrome 10+, Saf5.1+ */
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f5f5f5), to(#f1f1f1));
    /* Saf4+, Chrome */
    background-image: -moz-linear-gradient(top, #f5f5f5, #f1f1f1);
    /* FF3.6 */
    background-image: -ms-linear-gradient(top, #f5f5f5, #f1f1f1);
    /* IE10 */
    background-image: -o-linear-gradient(top, #f5f5f5, #f1f1f1);
    /* Opera 11.10+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f5f5',EndColorStr='#f1f1f1'); }
    .rs_dialog_holder input[type=button]:hover {
      border-color: #aaa;
      color: #222;
      background-color: #f9f9f9;
      -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
      -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
      -ms-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
      -o-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); }
    .rs_dialog_holder input[type=button]:focus {
      border-color: #1E90FF; }
    .rs_dialog_holder input[type=button]:active {
      border-color: #1E90FF; }

/*------- defaults ------------ */
.rs_dialog_holder {
  font-family: helvetica, arial, 'san-serif';
  color: #222;
  font-size: 12px; }

/*------- specifics ------------ */
select option.bold {
  font-weight: bold;
  color: red; }

.rs_dialog_holder {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  padding-left: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  z-index: 50; }
  .rs_dialog_holder .rs_dialog {
    background-color: #f6f6f6;
    border: 1px solid #acacac;
    -webkit-box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.25);
    -ms-box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.25);
    -o-box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.25);
    box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.25);
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    display: inline-block;
    min-width: 200px;
    margin-left: -125px;
    overflow: hidden;
    position: relative; }
    .rs_dialog_holder .rs_dialog .rs_dialog_content {
      padding: 10px; }
      .rs_dialog_holder .rs_dialog .rs_dialog_content h1 {
        font-size: 16px;
        padding: 0px;
        margin: 0 0 10px 0; }
        .rs_dialog_holder .rs_dialog .rs_dialog_content h1 a {
          float: right;
          display: inline-block;
          height: 16px;
          width: 16px;
          background-image: url(/assets/recurring_select/cancel-471db6625d94439b9a9232192800d7155e5ca562d1b9b7c7e33aeda8fc3c31ec.png);
          background-position: center;
          background-repeat: no-repeat; }
      .rs_dialog_holder .rs_dialog .rs_dialog_content p {
        padding: 5px 0;
        margin: 0;
        line-height: 14px; }
        .rs_dialog_holder .rs_dialog .rs_dialog_content p label {
          margin-right: 10px; }
      .rs_dialog_holder .rs_dialog .rs_dialog_content a {
        -moz-box-sizing: content-box;
        -webkit-box-sizing: content-box;
        box-sizing: content-box; }
      .rs_dialog_holder .rs_dialog .rs_dialog_content .freq_option_section {
        display: none; }
        .rs_dialog_holder .rs_dialog .rs_dialog_content .freq_option_section label {
          font-weight: bold; }
        .rs_dialog_holder .rs_dialog .rs_dialog_content .freq_option_section .rs_interval {
          width: 30px;
          text-align: center;
          display: inline-block; }
        .rs_dialog_holder .rs_dialog .rs_dialog_content .freq_option_section .day_holder {
          border-left: 1px solid #ccc;
          position: relative;
          margin-top: 5px;
          height: 26px; }
          .rs_dialog_holder .rs_dialog .rs_dialog_content .freq_option_section .day_holder a {
            display: block;
            padding: 5px 7px;
            font-size: 14px;
            border-style: solid;
            border-color: #ccc;
            border-width: 1px 1px 1px 0px;
            float: left;
            text-decoration: none;
            font-weight: bold;
            -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1) inset;
            -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1) inset;
            -ms-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1) inset;
            -o-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1) inset;
            box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1) inset;
            background-color: #fff; }
            .rs_dialog_holder .rs_dialog .rs_dialog_content .freq_option_section .day_holder a.selected {
              background-color: #89a;
              color: #fff;
              -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) inset;
              -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) inset;
              -ms-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) inset;
              -o-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) inset;
              box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) inset;
              position: relative;
              background-image: -webkit-linear-gradient(top, #9ab, #789);
              /* Chrome 10+, Saf5.1+ */
              background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#9ab), to(#789));
              /* Saf4+, Chrome */
              background-image: -moz-linear-gradient(top, #9ab, #789);
              /* FF3.6 */
              background-image: -ms-linear-gradient(top, #9ab, #789);
              /* IE10 */
              background-image: -o-linear-gradient(top, #9ab, #789);
              /* Opera 11.10+ */ }
            .rs_dialog_holder .rs_dialog .rs_dialog_content .freq_option_section .day_holder a:hover {
              cursor: pointer;
              background-color: #dde; }
        .rs_dialog_holder .rs_dialog .rs_dialog_content .freq_option_section .rs_calendar_day, .rs_dialog_holder .rs_dialog .rs_dialog_content .freq_option_section .rs_calendar_week {
          width: 155px; }
          .rs_dialog_holder .rs_dialog .rs_dialog_content .freq_option_section .rs_calendar_day a, .rs_dialog_holder .rs_dialog .rs_dialog_content .freq_option_section .rs_calendar_week a {
            display: inline-block;
            text-align: center;
            width: 15px;
            padding: 5px 3px;
            font-size: 12px;
            border-style: solid;
            border-color: #ccc;
            border-width: 1px 1px 1px 1px;
            margin: -1px 0 0 -1px;
            line-height: 10px;
            background-color: #fff;
            font-weight: bold; }
            .rs_dialog_holder .rs_dialog .rs_dialog_content .freq_option_section .rs_calendar_day a.selected, .rs_dialog_holder .rs_dialog .rs_dialog_content .freq_option_section .rs_calendar_week a.selected {
              background-color: #89a;
              color: #fff;
              position: relative;
              background-image: -webkit-linear-gradient(top, #9ab, #789);
              /* Chrome 10+, Saf5.1+ */
              background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#9ab), to(#789));
              /* Saf4+, Chrome */
              background-image: -moz-linear-gradient(top, #9ab, #789);
              /* FF3.6 */
              background-image: -ms-linear-gradient(top, #9ab, #789);
              /* IE10 */
              background-image: -o-linear-gradient(top, #9ab, #789);
              /* Opera 11.10+ */
              -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2) inset;
              -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2) inset;
              -ms-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2) inset;
              -o-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2) inset;
              box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2) inset;
              text-shadow: 0 1px 1px #333; }
            .rs_dialog_holder .rs_dialog .rs_dialog_content .freq_option_section .rs_calendar_day a:hover, .rs_dialog_holder .rs_dialog .rs_dialog_content .freq_option_section .rs_calendar_week a:hover {
              cursor: pointer;
              background-color: #dde; }
          .rs_dialog_holder .rs_dialog .rs_dialog_content .freq_option_section .rs_calendar_day a.end_of_month, .rs_dialog_holder .rs_dialog .rs_dialog_content .freq_option_section .rs_calendar_week a.end_of_month {
            width: 81px; }
        .rs_dialog_holder .rs_dialog .rs_dialog_content .freq_option_section .rs_calendar_week {
          width: 191px; }
          .rs_dialog_holder .rs_dialog .rs_dialog_content .freq_option_section .rs_calendar_week span {
            display: inline-block;
            width: 35px; }
        .rs_dialog_holder .rs_dialog .rs_dialog_content .freq_option_section .monthly_rule_type span {
          margin-right: 15px; }
      .rs_dialog_holder .rs_dialog .rs_dialog_content .rs_summary {
        padding: 0px;
        margin-top: 15px;
        border-top: 1px solid #ccc; }
        .rs_dialog_holder .rs_dialog .rs_dialog_content .rs_summary span {
          font-weight: bold;
          border-top: 1px solid #fff;
          display: block;
          padding: 10px 0 5px 0; }
        .rs_dialog_holder .rs_dialog .rs_dialog_content .rs_summary.fetching {
          color: #999; }
          .rs_dialog_holder .rs_dialog .rs_dialog_content .rs_summary.fetching span {
            background-image: url(/assets/recurring_select/throbber_13x13-d78857ce33850fa1e233bcef159f2da7d7e119014f06755b97c90b0186c75d12.gif);
            background-position: center;
            background-repeat: no-repeat;
            display: inline-block;
            height: 13px;
            width: 13px;
            margin-top: -4px;
            padding-right: 5px; }
        .rs_dialog_holder .rs_dialog .rs_dialog_content .rs_summary label {
          font-weight: normal; }
      .rs_dialog_holder .rs_dialog .rs_dialog_content .controls {
        padding: 10px 0px 5px 0px;
        min-width: 170px;
        text-align: center; }
        .rs_dialog_holder .rs_dialog .rs_dialog_content .controls input[type=button] {
          margin: 0px 5px;
          width: 70px; }
          .rs_dialog_holder .rs_dialog .rs_dialog_content .controls input.rs_save[type=button] {
            color: #333; }
          .rs_dialog_holder .rs_dialog .rs_dialog_content .controls input.rs_cancel[type=button] {
            color: #666; }
          .rs_dialog_holder .rs_dialog .rs_dialog_content .controls input.disabled[type=button] {
            color: #aaa; }
    .rs_dialog_holder .rs_dialog.animated .controls {
      position: absolute;
      bottom: 10px;
      left: 10px; }
    .rs_dialog_holder .rs_dialog.animated .rs_summary, .rs_dialog_holder .rs_dialog.animated .freq_option_section {
      display: none; }