#easyota-form-plugin-react {
   --easyota-base-color: #131741;
   --easyota-search-color: #131741;
   --easyota-tabs-color: #131741;
   --easyota-tabs-active-color: #131741;
   --popup-z-index: 1000000;
   font-size: 16px;
   box-sizing: border-box;
   width: min(100%, max(80%, 70em));
   margin: 0 auto;
}

.easyota-form-plugin {
   background: transparent;
   display: flex;
   justify-content: center;
   padding: 1em 0;
   position: relative;
}

.easyota-form-plugin .form-wrap {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: auto 1fr;
   padding: 0.4em;
   gap: 0.4em;
   width: 100%;
}

.easyota-form-plugin .form-wrap .form {
   /* background: rgba(255, 255, 255, 1); */
   display: flex;
   flex-direction: column;
   gap: 1.2em;
   border-radius: 0.4em;
   position: relative;
}

.easyota-form-plugin .form-wrap .form input {
   margin: 0;
}
.easyota-form-plugin .trip-type {
   display: flex;
   gap: 2em;
}
.easyota-form-plugin .trip-type label {
   display: flex;
   gap: 0.4em;
}

.easyota-form-plugin .flex {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.easyota-form-plugin .flex .gap-1 {
   gap: 0.5em;
}

.easyota-form-plugin .fields {
   --fields-gap: 0;
   display: flex;
   gap: var(--fields-gap);
   flex-basis: auto;
}

.easyota-form-plugin .fields .date-from-to-wrap {
   display: flex;
   gap: var(--fields-gap);
}
.easyota-form-plugin #search-form {
   display: flex;
   justify-content: space-evenly;
}
.easyota-form-plugin #search-form .fields {
   flex: 1;
   display: flex;
   align-items: stretch;
}
.easyota-form-plugin #search-form .fields .date-from-to-wrap .btn.clear {
   position: absolute;
   right: 0.7em;
   top: 50%;
   transform: translateY(-50%);
   width: 24px;
   height: 24px;
   background: #777;
   color: #fff;
   padding: 0;
   border-radius: 50%;
   font-size: 1em;
   font-weight: 100;
}

.easyota-form-plugin #search-form .fields .date-from-to-wrap .btn.clear span {
   transform: rotate(45deg);
}

.easyota-form-plugin .fields .field {
   --field-padding: 0.7em;
   background: #ffffff;
   border: 1px solid rgba(0, 0, 0, 0.1);
   padding: 0;
   flex: 1;
}

.easyota-form-plugin .fields .field:not(:focus-within) {
   border-right: none;
}

.easyota-form-plugin .fields .field:last-of-type {
   border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.easyota-form-plugin .fields .field > label {
   display: flex;
   flex-direction: column;
   padding: var(--field-padding);
   height: auto;
   text-align: left;
}
.easyota-form-plugin .fields .field > label input {
   flex: 1;
   padding: 0.5em 0 0;
   width: 100%;
}
.easyota-form-plugin .fields .field:last-of-type {
   border-top-right-radius: 0.4em;
   border-bottom-right-radius: 0.4em;
}
.easyota-form-plugin .fields .field:first-of-type {
   border-top-left-radius: 0.4em;
   border-bottom-left-radius: 0.4em;
}

.easyota-form-plugin .fields .field label:focus-within {
   outline: 2px solid #77f;
   border-radius: 0.2em;
   border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.easyota-form-plugin .fields .date-from-to-wrap:not(:first-of-type) .field:first-of-type {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
}

.easyota-form-plugin .fields .date-from-to-wrap:not(:last-of-type) .field:last-of-type {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
}

.easyota-form-plugin .fields .date-from-to-wrap .field .label {
   display: flex;
   flex-direction: column;
   cursor: pointer;
}
.easyota-form-plugin .fields .date-from-to-wrap .field input {
   cursor: pointer;
}

.easyota-form-plugin .fields select {
   padding: 0.6em;
   border: 1px solid #ddf;
   border-radius: 0.2em;
   max-width: 10em;
}

.easyota-form-plugin .fields input {
   outline: none;
   border: none;
   padding: 0.2em 0 0;
}
.easyota-form-plugin .fields input.date {
   padding: 0.2em 0 0;
}

.easyota-form-plugin .p-1 {
   padding: 0.4em;
}
.easyota-form-plugin #search-form .btn {
   background: var(--easyota-search-color);
   color: #fff;
   display: flex;
   border: 1px solid #ddf;
   border-radius: 0.7em;
   padding: 0.7em 1.4em;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   font-weight: bold;
}

.easyota-form-plugin .tabs {
   display: flex;
   gap: 0.4em;
}

.easyota-form-plugin .tabs button.item {
   padding: 0.7em 1em;
   border: none;
   background: var(--easyota-tabs-color);
   display: flex;
   flex-direction: column;
   gap: 0.2em;
   align-items: center;
   color: #ffffff;
   position: relative;
   border-radius: 0.4em 0.4em 0 0;
   outline: none;
   cursor: pointer;
}
.easyota-form-plugin .tabs button.item.active {
   background: var(--easyota-tabs-active-color);
}

.easyota-form-plugin #search-form {
   display: flex;
   gap: 0.4em;
}
.easyota-form-plugin .travel-class select {
   border: none;
   font-weight: bolder;
}

.easyota-form-plugin .select-dropdown {
   display: none;
   position: absolute;
   background: #ffffff;
   min-width: 100%;
   border-radius: 0.4em;
   top: calc(100% + 0.4em);
   left: 0;
   margin: 0;
   padding: 0.4em 0;
   list-style: none;
   border: 1px solid #eee;
   max-height: 10em;
   overflow-y: auto;
   overflow-x: hidden;
   box-shadow: 0 0 5px #8798ad;
   z-index: var(--popup-z-index);
}
.easyota-form-plugin .select-dropdown li.group {
   padding: 0;
}
.easyota-form-plugin .select-dropdown li.group span {
   padding: 0.7em 0.4em 0.4em;
   font-weight: bold;
   display: flex;
}
.easyota-form-plugin .select-dropdown li.group ul {
   list-style: none;
   padding: 0;
}
.easyota-form-plugin .select-dropdown li {
   padding: 0.5em 0.7em;
   border-bottom: 1px solid #d1e3e6;
   cursor: pointer;
   white-space: nowrap;
}
.easyota-form-plugin .select-dropdown li:last-child {
   border-bottom: none;
}

.easyota-form-plugin .select-dropdown li:hover {
   background: #f2f2f2;
}
.easyota-form-plugin .select-dropdown li.group:hover {
   background: transparent;
}

.easyota-form-plugin .select-dropdown.show {
   display: block;
}

.easyota-form-plugin .multi-items-select .select-wrap {
   display: flex;
}

.easyota-form-plugin .multi-items-select .select-wrap .select-trigger {
   color: #aaa;
   cursor: pointer;
   width: 100%;
   display: flex;
   align-items: center;
}

.easyota-form-plugin .multi-items-select .select-wrap .select-trigger.valued {
   color: #000;
}

.easyota-form-plugin .multi-items-select ul {
   list-style: none;
   margin: 0;
   padding: 0 1em 1em 1em;
   position: absolute;
   top: calc(100% + 0.2em);
   left: 0;
   background: #fff;
   box-shadow: 0px 0px 1px #333;
   border-radius: 0.2em;
}
.easyota-form-plugin .multi-items-select ul li {
   display: flex;
   gap: 1em;
   /* border-bottom: 1px solid #ddd; */
   padding: 0.7em 0;
}
.easyota-form-plugin .multi-items-select ul li:last-child {
   border-bottom: none;
   padding-bottom: 0;
}
.easyota-form-plugin .multi-items-select ul li .count {
   display: flex;
   gap: 0.4em;
   align-items: center;
}

.easyota-form-plugin .fields .field > label .count input {
   padding-top: 0;
   width: 1em;
   text-align: center;
}

.easyota-form-plugin .w-full {
   width: 100%;
}

.easyota-form-plugin .multi-items-select li .count > button {
   background: #f2f2f2;
   color: #000;
   width: 1.4em;
   height: 1.4em;
   border-radius: 0.4em;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 1.2em;
   border: none;
   cursor: pointer;
}
.easyota-form-plugin .multi-items-select li .description {
   display: flex;
   flex-direction: column;
   line-height: 0.9em;
   gap: 0.4em;
   font-size: 0.8em;
   flex: 1;
}
.easyota-form-plugin .multi-items-select li .description p {
   margin: 0;
   font-weight: bold;
   white-space: nowrap;
}
.easyota-form-plugin .multi-items-select li .description span {
   display: flex;
   width: 100%;
   font-size: 0.8em;
}
.easyota-form-plugin .multi-items-select ul li input {
   width: 0.7em;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 1.4em;
   border-radius: 0;
   padding: 0;
   justify-content: center;
   align-items: center;
   font-weight: 100;
}

.easyota-form-plugin .multi-items-dropdown {
   display: none;
   box-shadow: 0 0 5px #8798ad;
   z-index: var(--popup-z-index);
}
.easyota-form-plugin .multi-items-dropdown.show {
   display: block;
}

.easyota-form-plugin .date-select {
   position: absolute;
   top: calc(100% + 0.4em);
   display: none;
   left: 0;
   background: white;
   z-index: var(--popup-z-index);
}

.easyota-form-plugin .date-select.show,
.easyota-form-plugin .date-select:has(select:invalid) {
   display: block;
}
.easyota-form-plugin .date-select .invalid-time {
   color: #f33;
   display: none;
}
.easyota-form-plugin .date-select:has(select:invalid) .invalid-time {
   display: block;
}
.easyota-form-plugin .date-select select:invalid {
   border: 1px solid #f33;
}

.easyota-form-plugin .date-toolbar {
   padding: 0.5em 0.7em;
   margin-bottom: 0.7em;
   border-bottom: 1px solid #eee;
   display: flex;
   gap: 1em;
   max-width: 100%;
}

.easyota-form-plugin .date-toolbar button {
   background: rgba(0, 0, 0, 0.1);
   border: 1px solid rgba(0, 0, 0, 0.1);
   outline: none;
   border-radius: 0.2em;
   padding: 0.4em 0.4em;
   cursor: pointer;
}

.pos-relative {
   position: relative;
}

.easyota-form-plugin .loading {
   color: #333;
}

.easyota-form-plugin .rmdp-wrapper {
   display: flex;
   flex-direction: column-reverse;
   position: relative;
}

.easyota-form-plugin .rmdp-wrapper:has(.footer-wrap) {
   --calender-footer-height: 3em;
   padding-bottom: var(--calender-footer-height);
}

.easyota-form-plugin .rmdp-wrapper .footer-wrap {
   position: absolute;
   bottom: 0;
   display: flex;
   justify-content: space-around;
   align-items: center;
   max-width: 100%;
   gap: 1em;
   padding: 0 0 0.4em;
   left: 50%;
   transform: translateX(-50%);
}

/* .easyota-form-plugin .flex-1 {
   flex: 1;
} */
.easyota-form-plugin .flex-2 {
   flex: 2;
}
.easyota-form-plugin .fields .field .rmdp-input:focus {
   box-shadow: none;
}
.easyota-form-plugin .fields .timepicker-field {
   display: flex;
   align-items: center;
   gap: 0.2em;
   flex-direction: column;
}
.easyota-form-plugin .fields .timepicker-field .select-wrap {
   display: flex;
}

.easyota-form-plugin .fields .timepicker-field select {
   padding: 0.2em 0;
   font-size: 0.7em;
}
.easyota-form-plugin .fields .timepicker-field select optgroup {
   font-size: 1em;
}

.easyota-form-plugin .date-select .rmdp-top-class {
   display: flex;
   justify-content: center;
}

.easyota-form-plugin .fields .select-time {
   padding: 0 0 0.2em;
   /* font-size: 0.3em; */
}

.easyota-form-plugin .fields .select-time label {
   font-size: 0.8em;
   white-space: nowrap;
}

@keyframes placeHolderShimmer {
   0% {
      background-position: -468px 0;
   }
   100% {
      background-position: 468px 0;
   }
}

.easyota-form-plugin .animated-background .fields .field {
   animation-duration: 1.5s;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   animation-name: placeHolderShimmer;
   background: #f6f7f8;
   background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
   background-size: 800px 104px;
   position: relative;
   display: flex;
   align-items: center;
}
.easyota-form-plugin .animated-background .fields .field input {
   background: transparent;
}

.easyota-form-plugin .background-masker {
   background: #fff;
   position: absolute;
}

.easyota-form-plugin p {
   margin: 0;
}
.loading.error {
   padding: 0.4em 1em;
   color: red;
   background: #ffffff;
   border-radius: 0.4em;
}

@media only screen and (max-width: 600px) {
   .easyota-form-plugin .fields .field:first-of-type {
      border-radius: 0;
      /* border-right: 1px solid rgba(0, 0, 0, 0.1); */
      border-top-left-radius: 0.7em;
      border-top-right-radius: 0.7em;
   }
   .easyota-form-plugin .fields .field:last-of-type {
      border-radius: 0;
      /* border-right: 1px solid rgba(0, 0, 0, 0.1); */
      border-bottom-left-radius: 0.7em;
      border-bottom-right-radius: 0.7em;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   }
   .easyota-form-plugin .fields,
   .easyota-form-plugin .fields .date-from-to-wrap,
   .easyota-form-plugin #search-form {
      flex-direction: column;
   }
   #easyota-form-plugin-react {
      font-size: 14px;
      position: relative;
      width: 90vw;
      margin: 0 auto;
   }
   .easyota-form-plugin .fields .field:not(:focus-within) {
      border-right: 1px solid rgba(0, 0, 0, 0.1);
   }

   .easyota-form-plugin .fields .date-from-to-wrap .field {
      max-width: 100%;
      border-radius: 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   }
   .easyota-form-plugin .rmdp-day-picker {
      flex-direction: column;
   }

   .easyota-form-plugin .date-select {
      top: calc(50% + 0.4em);
   }

   .easyota-form-plugin .fields .field:not(:focus-within) {
      border-bottom: none;
      border-right: 1px solid rgba(0, 0, 0, 0.1);
   }
}