.child-form-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    gap: 30px;
    padding: 10px 15px;
    overflow-x: auto;
    scroll-behavior: smooth;
}
.child-form-tabs input {
    width: 100%;
    outline: 0;
    border: 1px solid #B7B2B2;
    text-align: center;
    border-radius: 6px;
    background-color: #ffffff;
    cursor: pointer;
    padding: 15px;
}
#TravelForm input#YourInformationEmailConfirm,
#TravelForm input#YourInformationFirstNameConfirm,
#TravelForm input#YourInformationLastNameConfirm,
#TravelForm input#website,
#TravelForm input#YourInformationComments {
    display: none;
}

.request-notes small {
    display: block;
}

#TravelForm label[for="YourInformationEmailConfirm"],
#TravelForm label[for="YourInformationFirstNameConfirm"],
#TravelForm label[for="YourInformationLastNameConfirm"],
#TravelForm label[for="website"],
#TravelForm label[for="YourInformationComments"] {
    display: none;
}

#YourInformation fieldset.YourInformationComments,
#YourInformation fieldset.YourInformationEmailConfirm,
#YourInformation fieldset.YourInformationFirstNameConfirm,
#YourInformation fieldset.YourInformationLastNameConfirm,
#YourInformation fieldset.website,
#YourInformation fieldset.websiteConfirm,
#YourInformation fieldset.website-referrer{
    display: none;
}

#YourInformation select {
    width: 100%;
}

#TravelForm {
    background-color: #F5F5F5;
    /* min-height: 525px; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 15px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border: 1px solid #EAE4E4;
}

#TravelForm #VacationPackagesForm,
#TravelForm #GroupTravelForm,
#TravelForm #GuidedToursForm {
    order: 3;
}

#TravelForm #VacationPackagesForm .form-content,
#TravelForm #GroupTravelForm .form-content,
#TravelForm #GuidedToursForm .form-content {
    order: 9;
    gap: 15px;
}

#TravelForm #GuidedToursForm .form-content,
#TravelForm #MultiDestinationForm .form-content {
    width: 100%;
}

#TravelForm .tab-buttons {
    display: flex;
    flex-direction: row;
    position: absolute;
    left: 10px;
    flex-wrap: nowrap;
    margin: 10px 0;
    justify-content: space-between;
    align-items: center;
    width: 98%;
    text-align: left;
    gap: 30px;
}

#TravelForm .tab-buttons input {
    border: 1px solid #B7B2B2;
    text-align: center;
    padding: 10px;
    border-radius: 6px;
    background-color: #ffffff;
    cursor: pointer;
}

#TravelForm .tab-buttons input:hover {
    border: 1px solid #744184;
    color: #fff;
    background-color: #744184;
}

#TravelForm #LocationsDates {
    order: 2;
}

#TravelForm button[type=submit] {
    order: 6;
}

#TravelForm .active {
    background-color: #955da7 !important;
    color: #fff;
}

/* #TravelForm .radio label,
#TravelForm .radio input {
    display: block;
} */

#TravelForm .radio input[type="radio"] {
    opacity: 0.01;
    z-index: 100;
    height: 0;
    z-index: 100;
    margin: 0;
}

/* #TravelForm button:not(.open-button) {
    border: 0;
    background: #744184;
    color: white;
    border-radius: 6px;
    padding: 5px 15px;
} */
#TravelForm .radio label {
    /* padding: 5px; */
    /* border: 1px solid #F5F5F5; */
    cursor: pointer;
    z-index: 90;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
}
#TravelForm .radio label.tab-radio-label {
    font-size: 18px;
}
/*controls the google api autofill results */
.pac-container,
.ui-datepicker {
    z-index: 9999 !important;
}

/*gform datepicker styles*/
.gravity-theme.ui-datepicker {
    background: #fff;
    border: 1px solid #d0d1d3;
    border-radius: 3px;
    box-shadow: 0 .0625rem .25rem rgba(0,0,0,.11),0 0 .25rem rgba(18,25,97,.0405344);
    color: #607382;
    font-size: .8125rem;
    font-weight: var(--gform-theme-font-weight-medium);
    margin-top: 5px;
    max-width: 400px;
    padding: 18px 15px;
    width: auto
}

.gravity-theme.ui-datepicker table,.gravity-theme.ui-datepicker td,.gravity-theme.ui-datepicker th,.gravity-theme.ui-datepicker thead,.gravity-theme.ui-datepicker tr {
    background: 0 0;
    border: 0;
    margin: 0
}

.gravity-theme.ui-datepicker td,.gravity-theme.ui-datepicker th {
    padding: 5px;
    text-shadow: none;
    text-transform: none
}

.gravity-theme.ui-datepicker .ui-datepicker-header {
    border: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 0 0 5px;
    padding: 0;
    position: relative;
    width: 100%
}

.gravity-theme.ui-datepicker .ui-datepicker-header .ui-datepicker-next,.gravity-theme.ui-datepicker .ui-datepicker-header .ui-datepicker-prev {
    align-items: center;
    background: 0 0;
    border: 0;
    color: #607382;
    cursor: pointer;
    display: flex;
    font-family: "Font Awesome 6 Pro" !important;
    font-size: 12px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 30px;
    justify-content: center;
    line-height: 1;
    position: absolute;
    speak: never;
    text-decoration: none;
    top: 50%;
    transform: translateY(-50%);
    transition: color .3s ease-in-out,background-color .3s ease-in-out,border-color .3s ease-in-out;
    width: 30px
}

.gravity-theme.ui-datepicker .ui-datepicker-header .ui-datepicker-next:focus,.gravity-theme.ui-datepicker .ui-datepicker-header .ui-datepicker-next:hover,.gravity-theme.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:focus,.gravity-theme.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:hover {
    color: #2f4054
}

.gravity-theme.ui-datepicker .ui-datepicker-header .ui-datepicker-next .ui-icon,.gravity-theme.ui-datepicker .ui-datepicker-header .ui-datepicker-prev .ui-icon {
    display: none
}

.gravity-theme.ui-datepicker .ui-datepicker-header .ui-datepicker-next::before,.gravity-theme.ui-datepicker .ui-datepicker-header .ui-datepicker-prev::before {
    border: 0;
    height: auto;
    position: static;
    transform: none;
    width: auto
}

.gravity-theme.ui-datepicker .ui-datepicker-header .ui-datepicker-prev {
    left: 0
}

.gravity-theme.ui-datepicker .ui-datepicker-header .ui-datepicker-prev::before {
    content: "\f053"
}

.gravity-theme.ui-datepicker .ui-datepicker-header .ui-datepicker-next {
    right: 0
}

.gravity-theme.ui-datepicker .ui-datepicker-header .ui-datepicker-next::before {
    content: "\f054"
}

.gravity-theme.ui-datepicker .ui-datepicker-header select {
    -webkit-appearance: none;
    background-color: transparent;
    background-image: url(down-arrow.svg);
    background-position: 100% 50%;
    background-repeat: no-repeat;
    background-size: 24px 24px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #585e6a;
    cursor: pointer;
    display: inline-block;
    font-size: .875rem;
    font-weight: var(--gform-theme-font-weight-medium);
    height: auto;
    min-height: 0;
    padding: 0 22px 0 0;
    width: auto
}

.gravity-theme.ui-datepicker .ui-datepicker-header select.ui-datepicker-month {
    margin-right: 20px;
    -moz-text-align-last: right;
    text-align-last: right
}

.gravity-theme.ui-datepicker .ui-datepicker-calendar {
    table-layout: fixed;
    width: 100%
}

.gravity-theme.ui-datepicker .ui-datepicker-calendar a,.gravity-theme.ui-datepicker .ui-datepicker-calendar span {
    font-weight: var(--gform-theme-font-weight-normal)
}

.gravity-theme.ui-datepicker .ui-datepicker-calendar th span {
    align-items: center;
    color: #2f4054;
    display: flex;
    font-size: .8125rem;
    font-weight: var(--gform-theme-font-weight-medium);
    height: 40px;
    justify-content: center;
    width: 40px
}

.gravity-theme.ui-datepicker .ui-datepicker-calendar td {
    font-size: .8125rem;
    height: 50px;
    width: 50px
}

.gravity-theme.ui-datepicker .ui-datepicker-calendar .ui-state-default {
    align-items: center;
    background: 0 0;
    border: 1px solid transparent;
    border-radius: 100%;
    box-shadow: none;
    color: #2f4054;
    display: flex;
    height: 40px;
    justify-content: center;
    text-decoration: none;
    transition: color .3s ease-in-out,background-color .3s ease-in-out,border-color .3s ease-in-out;
    width: 40px
}

.gravity-theme.ui-datepicker .ui-datepicker-calendar .ui-state-default:focus,.gravity-theme.ui-datepicker .ui-datepicker-calendar .ui-state-default:hover {
    background: 0 0;
    border-color: #607382;
    outline: 0
}

.gravity-theme.ui-datepicker .ui-datepicker-calendar .ui-state-default:active {
    background: #f2f3f5;
    border-color: #607382
}

.gravity-theme.ui-datepicker .ui-datepicker-calendar .ui-datepicker-current-day .ui-state-default {
    background: #607382;
    border-color: #607382;
    box-shadow: 0 .125rem .125rem rgba(58,58,87,.0596411);
    color: #fff
}

.gravity-theme.ui-datepicker .ui-datepicker-calendar .ui-datepicker-current-day .ui-state-default:focus,.gravity-theme.ui-datepicker .ui-datepicker-calendar .ui-datepicker-current-day .ui-state-default:hover {
    border-color: #607382
}

.gravity-theme.ui-datepicker .ui-datepicker-calendar .ui-state-disabled {
    background: 0 0
}

.gravity-theme.ui-datepicker .ui-datepicker-calendar .ui-state-disabled .ui-state-default {
    align-items: center;
    background: #f2f3f5;
    border: 1px solid rgba(32,32,46,.079);
    border-radius: 100%;
    box-shadow: 0 .125rem .125rem rgba(58,58,87,.0596411);
    color: #686e77;
    cursor: text;
    display: flex;
    height: 40px;
    justify-content: center;
    text-decoration: none;
    width: 40px
}

@media (max-width: 640px) {
    .gravity-theme.ui-datepicker {
        max-width:235px
    }

    .gravity-theme.ui-datepicker .ui-datepicker-header {
        margin-bottom: 10px
    }

    .gravity-theme.ui-datepicker td,.gravity-theme.ui-datepicker th {
        padding: 3px
    }

    .gravity-theme.ui-datepicker .ui-datepicker-calendar th span {
        height: 20px;
        width: 20px
    }

    .gravity-theme.ui-datepicker .ui-datepicker-calendar td {
        height: 30px;
        width: 30px
    }

    .gravity-theme.ui-datepicker .ui-datepicker-calendar .ui-state-default {
        height: 20px;
        width: 20px
    }

    .gravity-theme.ui-datepicker .ui-datepicker-calendar .ui-state-disabled .ui-state-default {
        height: 20px;
        width: 20px
    }
}

html[dir=rtl] #ui-datepicker-div.gform-theme-datepicker[style] {
    right: auto!important
}




#TravelForm .radio
#TravelForm .radio:hover {
    color: #744184;
    /* background: #DDD; */
    /* border-bottom: 5px solid #BB282D; */
}

#TravelForm .tab .the-active-tab label {
    color: #744184;
}
#TravelForm .tab label {
    color: #707070;
}

#TravelForm .radio:hover .tab-radio-label {
    color: #744184;
}

#TravelForm .form-tab-row .tab-container {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    width: 100%;
    margin: 0;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
    position: relative;
    /* margin-bottom: 7.5%; */
    height: 100%;
    background: #ffffff;
    overflow-x: auto;
    scroll-behavior: smooth;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

#TravelForm.TravelFormVacationPackages .form-tab-row .tab-container,
#TravelForm.TravelFormGroupTravel .form-tab-row .tab-container {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

#TravelForm .button-radio {
    border: 0;
    border-radius: 6px;
    color: #707070;
    background-color: #707070;
    border: 1px solid #707070;
}

#TravelForm .button-radio:checked+label {
    color: #744184 !important;
    border-radius: 6px;
    border: 1px solid #744184;

}

#TravelForm .form {
    display: none;
    padding: 10px 15px;
}

#TravelForm .radio label,
#TravelForm .radio input {
    display: block;
    position: relative;
    width: 100%;
    padding: 10px 5px;
}
#TravelForm .radio input {
    padding: 0;
}
#TravelForm .radio input[type="radio"] {
    opacity: 0.01;
    z-index: 100;
}

/* #TravelForm .radio input[type="radio"]:checked+label,
#TravelForm .Checked+label {
    background: yellow;
} */

#TravelForm.radio label {
    padding: 5px;
    border: 1px solid #CCC;
    cursor: pointer;
    z-index: 90;
}

#TravelForm .tab {
    display: block;
    width: 25%;
    /* height: 35px; */
}

#TravelForm .radio {
    width: 100%;
    display: block;
    /* height: 35px; */
}

#TravelForm span {
    cursor: pointer;
}

#TravelForm button:not(.open-button):not(.button-submit) {
    border: 0;
    background: #744184;
    color: white;
    border-radius: 6px;
    padding: 15px;
    width: 23%;
    text-align: center;
    cursor: pointer;
}
#TravelForm i {
    font-size: 15px !important;
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-style: normal;
    margin-right: 5px;
}
#TravelForm i.icon-vowrenewal {
    font-size: 12px !important;
}
#VacationPackagesFormRoomHolderAlert,
#GuidedToursFormRoomHolderAlert,
#GroupTravelFormRoomHolderAlert,
#MultiDestinationFormRoomHolderAlert,
#CruisesFormCabinHolderAlert {
    background-color: #C62939;
    color: white;
    font-weight: 800;
    text-transform: uppercase;
}

.error {
    color: red;
    border: 2px solid red;
}

.minus,
.plus {
    width: auto;
    height: auto;
    background: #f2f2f2;
    border-radius: 33px;
    padding: 5px 10px;
    border: 1px solid #ddd;
    display: inline;
    vertical-align: middle;
    text-align: center;
}

span.minus {
    padding: 3px 10px;
}

span.plus {
    padding: 3px 8px;
}

.number input {
    height: 34px;
    width: 40px;
    text-align: right;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    border: 0;
}

.number {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

/*popup form */
/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
    background-color: transparent;
    color: #2F3034;
    /* padding: 20px; */
    border: none;
    cursor: pointer;
    opacity: 0.8;
    /* height: 85px; */
}

/* The popup form - hidden by default */
.form-popup {
    inset-block-start: 65%;
    display: none;
    z-index: 9;
    height: auto;
    overflow-y: auto;
    border-radius: 6px;
    position: absolute;
    padding: 25px 10px;
    background: rgb(255, 255, 255);
    width: 33%;
    box-shadow: 0px 0.5rem 1rem 0px rgba(0, 0, 0, 0.24);
}

.age-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

span.form-popup-title {
    font-size: 20px;
    font-weight: 800;
}

button.remove-room,
button.remove-cabin {
    margin-top: 10px;
    margin-left: auto;
    display: block;
}

button#add-room,
button#add-cabin {
    float: right;
}

.age-container select {
    flex: 49%;
    /* or - flex: 0 50% - or - flex-basis: 50% - */
    /*demo*/
    margin: 5px 0;
    max-width: 49%;
}

.age-container select:nth-child(odd) {
    margin-right: 5px;
}

.group-travelbtn {
    height: auto;
    overflow: hidden;
}

button#VacationPackages-done-button,
button#GroupTravelForm-done-button,
button#GuidedToursForm-done-button,
button#MultiDestinationForm-done-button,
button#CruisesForm-done-button {
    width: 100%;
    margin-top: 15px;
    cursor: pointer;
    font-weight: 500;
    padding: 10px 0 !important;
}

/* Add styles to the form container */
.form-container {
    max-width: 300px;
    padding: 10px;
    background-color: white;
}

/* Full-width input fields */
.form-container input[type=text],
.form-container input[type=password] {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    border: none;
    background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus,
.form-container input[type=password]:focus {
    background-color: #ddd;
    outline: none;
}

/* Set a style for the submit/login button */
.form-container .btn {
    background-color: #04AA6D;
    color: white;
    padding: 16px 20px;
    border: none;
    cursor: pointer;
    width: 100%;
    margin-bottom: 10px;
    opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
    background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover,
.open-button:hover {
    opacity: 1;
}

.form-popup-room-conatiner,
.form-popup-cabin-conatiner {
    background: #ffffff;
}

#TravelForm .form-popup-room-conatiner label,
#TravelForm .form-popup-cabin-conatiner label {
    width: unset;
}


.autoComplete_wrapper>ul,
.Cruises-autoComplete_wrapper>ul {
    position: absolute;
    max-height: 226px;
    overflow-y: scroll;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0;
    z-index: 1;
    list-style: none;
    border-radius: 0;
    background-color: #fff;
    border: 1px solid rgba(33, 33, 33, 0.07);
    box-shadow: 0 3px 6px rgb(149 157 165 / 15%);
    outline: none;
    transition: opacity 0.15s ease-in-out;
    -moz-transition: opacity 0.15s ease-in-out;
    -webkit-transition: opacity 0.15s ease-in-out;
    -ms-overflow-style: none;
    scrollbar-width: none;
    max-width: 350px;
}

.autoComplete_wrapper>ul::-webkit-scrollbar,
.Cruises-autoComplete_wrapper>ul::-webkit-scrollbar {
    display: none;
    /* Safari and Chrome */
}

.autoComplete_wrapper ul li::before,
.Cruises-autoComplete_wrapper ul li::before {
    font-size: 15px !important;
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f3c5";
    width: 15px;
    height: 15px;
    margin: 0 5px;
    color: #dedada;
}

.autoComplete_wrapper>ul[hidden],
.autoComplete_wrapper>ul:empty,
.Cruises-autoComplete_wrapper>ul[hidden],
.Cruises-autoComplete_wrapper>ul:empty {
    display: block;
    opacity: 0;
    transform: scale(0);
}

.autoComplete_wrapper>ul>li,
.Cruises-autoComplete_wrapper>ul>li {
    margin: 0;
    padding: 0.3em;
    text-align: left;
    font-size: .9rem;
    color: #212121;
    border-radius: 0;
    background-color: rgba(255, 255, 255, 1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s ease;
}

.autoComplete_wrapper>ul>li mark,
.Cruises-autoComplete_wrapper>ul>li mark {
    background-color: transparent;
    color: #000000;
    font-weight: bold;
}

.autoComplete_wrapper>ul>li:hover,
.Cruises-autoComplete_wrapper>ul>li:hover {
    cursor: pointer;
    background-color: rgba(245, 245, 245, 0.75);
}

.autoComplete_wrapper>ul>li[aria-selected="true"],
.Cruises-autoComplete_wrapper>ul>li[aria-selected="true"] {
    background-color: rgba(245, 245, 245, 0.75);
}

#GroupTravelFormTheCouple1 input,
#GroupTravelFormTheCouple2 input {
    margin-bottom: 5px;
}

fieldset.vacation-button-pop {
    margin-right: 30px;
    margin-top: 20px;
}

/* Make circles that indicate the steps of the form: */
.step {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbbbbb;
    border: none;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
}

/* Mark the active step: */
.step.active {
    opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
    background-color: #04AA6D;
}

/* Mark input boxes that gets an error on validation: */
input.invalid {
    background-color: #ffdddd;
}


#TravelForm .radio {
    border-bottom: 5px solid transparent;
}

#TravelForm select {
    background: white;
    outline: transparent;
    border: 1px solid #B7B2B2;
    line-height: 20px;
    padding: 0 15px;
}

#TravelForm .the-active-tab {
    color: #744184;
    border-bottom: 5px solid #744184;
    padding-top: 10px;
    padding-bottom: 8px;
}

#TravelForm .the-active-tab:hover {
    color: #744184;
    border-bottom: 5px solid #744184;

}
#TravelForm  label {
    color: #744184;
}
.form-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}



#VacationPackagesTab .tab-buttons {
    margin-top: 36px;
}

#TravelForm label {
    font-weight: 800;
    display: block;
    font-size: 14px;
    width: 70%;
    line-height: 20px;
}

#TravelForm input[type="text"],
#TravelForm input[type="tel"],
#TravelForm input[type="email"],
#TravelForm select {
    font-size: 14px;
    height: 35px;
}

#TravelForm input[type="text"],
#TravelForm input[type="tel"],
#TravelForm input[type="email"] {
    border: 1px solid #B7B2B2;
}

fieldset.departuredate,
fieldset.returndate,
fieldset.vacation-select,
fieldset.vacation-text,
fieldset.honeymoonWeddingDate {
    width: 17%;
    margin-right: 30px;
    margin-top: 20px;
}

fieldset.vacation-select select,
fieldset.vacation-text input {
    width: 100%;
}

fieldset.destination-field,
div.autoComplete_wrapper,
fieldset.vacation-radio,
div.Cruises-autoComplete_wrapper {
    width: 23%;
    margin-right: 30px;
    margin-top: 20px;
}


div.room,
div.cabin,
.group-travelbtn .form-popup-room-conatiner {
    border: 1px solid #F5F5F5;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 5px;
}


#GroupTravelTab .tab-buttons {
    margin-top: 36px;
}

.guided-destination {
    width: 100%;
    margin-right: 10px;
}


fieldset#GuidedToursDestinations {
    width: 100%;
    margin: 5px 0;
}

fieldset#GuidedToursDestinations fieldset {
    width: 35%;
    display: inline-block;
}

fieldset#GuidedToursOthers {
    width: 100%;
}

fieldset#GuidedToursOthers fieldset {
    width: 60%;
}

fieldset#GuidedToursOthers {
    display: flex;
}

#GuidedToursOthers fieldset {
    margin: 5px 0;
}

fieldset#MultiDestinationDestinations {
    width: 100%;
    margin-bottom: 15px;
}

fieldset#GuidedToursOthers fieldset {
    width: 20%;
}

#MultiDestinationForm fieldset.vacation-button-pop {
    margin: 5px 0;
}

select#GuidedToursFormTripBudget {
    width: 90%;
}

#TravelForm div#YourInformation.form {
    padding: 10px 35px;
}

#CruisesFormSpecificDateFields {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

#CruisesForm fieldset.departuredate,
#CruisesForm fieldset.returndate,
#CruisesForm fieldset.vacation-select,
#CruisesForm fieldset.vacation-text {
    width: 20%;
    margin-right: 30px;
    margin-top: 20px;
}

#MultiDestinationDestination1 select,
#MultiDestinationDestination2 select,
#MultiDestinationDestination3 select,
#MultiDestinationDestination4 select {
    margin-left: 5px;
    width: 25%;
    display: inline-block;
}

#MultiDestinationDestination1 input,
#MultiDestinationDestination2 input,
#MultiDestinationDestination3 input,
#MultiDestinationDestination4 input {
    width: 70%;
    display: inline-block;
}

#AddDestination4,
#RemoveDestination3 {
    width: auto;
}

fieldset#GuidedToursDestinations fieldset#MoreDestinations {
    width: 100%;
    display: inline-flex;
}

button.add-destination,
button.remove-destination {
    width: 17%;
}

button#RemoveDestination4,
button#AddDestination3 {
    width: auto;
}

/*submit button*/


#CruisesFormSpecificDate,
#CruisesFormSpecificDateFields {
    width: 23%;
}


button#nextBtn,
button#prevBtn {
    font-size: 20px;
    cursor: pointer;
    font-family: 'Nunito';
    font-weight: 500;
}

button#nextBtn {
    float: right;
}

button#nextBtn .fontawesome-icon.fusion-text-flow {
    float: none;
}

button#prevBtn {
    float: left;
}

button#nextBtn,
button#prevBtn {
    border: 0;
    background: #5DA4B4;
    color: white;
    border-radius: 6px;
    padding: 5px 15px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    text-align: left;
}

button#nextBtn i,
button#prevBtn i {
    color: #fff;
}

fieldset#MultiDestinationDestinations fieldset {
    margin: 5px 0;
    width: 35%;
    display: inline-block;
}

fieldset#MultiDestinationDestinations fieldset#MultiDestinationAddMore {
    width: 100%;
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    margin-bottom: 15px;
}

#GuidedToursForm.form,
#MultiDestinationForm.form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px 15px;
}

span#VacationPackages-close-x,
span#GroupTravel-close-x,
span#GuidedTours-close-x,
span#MultiDestination-close-x,
span#Cruises-close-x {
    position: absolute;
    top: 0px;
    right: 5px;
    font-size: 22px;
    font-weight: 800;
}

#YourInformation fieldset {
    width: 49%;
    display: inline-block;
    width: 47%;
    display: inline-block;
    margin-right: 30px;
    margin-top: 20px;
}

#YourInformation fieldset.request-notes {
    width: 98%;
    display: block;
}

#YourInformation fieldset.request-notes textarea {
    width: 99%;
    height: 80px;
    border: 1px solid #B7B2B2;
}


.nav-btns-container {
    width: 94%;
    margin: 0 auto;
}

.nav-btns-container button {
    z-index: 999;
}

@-webkit-keyframes rotating {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes rotating {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

#submit-container {
    position: absolute;
    bottom: 10px;
    right: 90px;
    margin-left: -65px;
    margin-top: -20px;
    width: auto;
    height: 50px;
    text-align: center;
}

.button-submit {
    outline: none;
    height: 50px;
    text-align: center;
    width: 200px;
    border-radius: 33px;
    background: #5DA4B4;
    border: 0px solid #744184;
    color: #fff;
    letter-spacing: 1px;
    text-shadow: 0;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.25s ease;
    float: right;
    font-size: 20px;
    cursor: pointer;
    font-family: 'Nunito';
    font-weight: 500;
}

.button-submit:hover {
    color: white;
    background: #744184;
}

.button-submit:active {
    letter-spacing: 2px;
}

.button-submit:after {
    content: "Start Planning";
}

.onclic {
    width: 50px;
    border-color: #bbbbbb;
    border-width: 3px;
    font-size: 0;
    border-left-color: #744184;
    -webkit-animation: rotating 2s 0.25s linear infinite;
    animation: rotating 2s 0.25s linear infinite;
}

.onclic:after {
    content: "";
}

.onclic:hover {
    color: #744184;
    background: white;
}

.validate {
    font-size: 13px;
    color: white;
    background: #744184;
}

.validate:after {
    font-family: "Font Awesome 5 Pro";
    content: "\f00c";
}

.validateerror {
    font-size: 13px;
    color: white;
    background: #744184;
}

.validateerror:after {
    font-family: "Font Awesome 5 Pro";
    content: "\f071";
}

#prevBtn,
#nextBtn {
    background: #5DA4B4 !important;
    color: white !important;
    border: 2px solid #5DA4B4 !important;
    border-radius: 33px !important;
}

#prevBtn:hover,
#nextBtn:hover {
    background: #5DA4B4 !important;
    border: 2px solid #744184 !important;
}


.DestinationWeddings fieldset, .VowRenewals fieldset {
    width: 18%;
    display: block;
    margin: 0px;
}
.DestinationWeddings .autoComplete_wrapper,
.VowRenewals .autoComplete_wrapper {
    order: 0;
    width: 19%;
}
.DestinationWeddings fieldset#GroupTravelFormExactDate,
.VowRenewals fieldset#GroupTravelFormExactDate,
.DestinationWeddings .destinationweddingdates, 
.VowRenewals .destinationweddingdates {
    order: 1;
}
#TravelForm .top-form.DestinationWeddings label,
#TravelForm .top-form.VowRenewals label {
    width: 100%;
    display: block;
    margin: 0px 5px;
}
.DestinationWeddings .form-content,
.VowRenewals .form-content {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
}

.DestinationWeddings #GroupTravelFormGroupFlight,
.VowRenewals #GroupTravelFormGroupFlight {
    width: 40%;
}
.DestinationWeddings .autoComplete_wrapper,
.VowRenewals .autoComplete_wrapper {
    width: 30%;
    margin-right: 20px;
    margin-top: 0;
}
.DestinationWeddings .destination-field,
.VowRenewals .destination-field {
    width: 30%;
    margin-right: 3%;
}

.HoneyMoons.biggerFields .destination-field,
.HoneyMoons.biggerFields .departuredate,
.HoneyMoons.biggerFields .returndate,
.Getaways.biggerFields .destination-field,
.Getaways.biggerFields .departuredate,
.Getaways.biggerFields .returndate {
    width: 30%;
} 

#VowRenewalsForm .form-content,
#DestinationWeddingsForm .form-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
#TravelForm button#nextBtn, 
#TravelForm button#prevBtn {
    padding: 10px;
    width: 15%;
}
.DestinationWeddings #GroupTravelFormExactDate,
.VowRenewals #GroupTravelFormExactDate {
    width: 20%;
}
.DestinationWeddings .destinationweddingdates,
.VowRenewals .destinationweddingdates {
    display: flex;
    width: 75%;
}
label[for="GroupTravelFormExactWeddingDate"] {
    display: block;
    width: 100%;
}
#TravelForm .top-form.DestinationWeddings label[for="GroupTravelFormExactWeddingDate"],
#TravelForm .top-form.VowRenewals label[for="GroupTravelFormExactWeddingDate"] {
    width: 27%;
    align-self: center;
}
#TravelForm .top-form.DestinationWeddings label[for="GroupTravelFormWeddingMonth"],
#TravelForm .top-form.DestinationWeddings label[for="GroupTravelFormWeddingYear"],
#TravelForm .top-form.VowRenewals label[for="GroupTravelFormWeddingMonth"],
#TravelForm .top-form.VowRenewals label[for="GroupTravelFormWeddingYear"] {
    width: 55%;
    align-self: center;
}
.DestinationWeddings #GroupTravelFormGroupFlight,
.VowRenewals #GroupTravelFormGroupFlight {
    width: 60%;
}
.DestinationWeddings fieldset.destinationwedding,
.VowRenewals fieldset.destinationwedding {
    margin-top: 20px;
}
label[for="DestinationWeddingsFormWeddingWillChildren"],
label[for="VowRenewalsFormWeddingWillChildren"] {
    width: 100% !important;
}

#DestinationWeddingsFormTheCouple1FirstName,
#DestinationWeddingsFormTheCouple2FirstName,
#VowRenewalsFormTheCouple1FirstName,
#VowRenewalsFormTheCouple2FirstName {
    margin-top: 5px;
    margin-bottom: 10px;
}


@media only screen and (max-width: 600px) {

    .autoComplete_wrapper>input,
    .autoComplete_wrapper>input:focus {
        width: 18rem;
    }
}

/*mobile*/
@media only screen and (max-width: 900px) {

    #TravelForm input[type="text"],
    #TravelForm input[type="tel"],
    #TravelForm input[type="email"],
    #TravelForm select {
        font-size: 16px;
        height: 35px;
    }

    #TravelForm {
        padding: 0;
        padding-bottom: 10px;
    }

    #TravelForm.TravelFormVacationPack .form-tab-row,
    #TravelForm.TravelFormVacationPack .form-tab-row {
        height: 100px;
    }

    #TravelForm.TravelFormGuidedTours .form-tab-row,
    #TravelForm.TravelFormMultiDestination .form-tab-row,
    #TravelForm.TravelFormCruises .form-tab-row {
        height: auto;
    }

    div#LocationsDates {
        margin-top: unset;
    }

    #TravelForm .form-tab-row .tab-container {
        align-items: flex-start;
        height: auto;
    }
    #TravelForm .tab-container .tab {
        overflow-x: scoll;
    }
    .form-tab-row {
        position: relative;
        z-index: 2;
        height: 105px;
        /* overflow-y: hidden;
        scroll-behavior: smooth; */
        overflow: hidden;
    }

    .tab-container {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1.5rem;
        padding-left: 0;
        margin-block: 0;
        /* overflow-x: auto;
        overflow-y: hidden; */
        overflow: hidden;
        list-style: none;
        text-align: center;
        white-space: nowrap;
    }

    .tab-container label {
        display: block;
        padding: 0.5rem 0.75rem;
    }

    .tab-container::-webkit-scrollbar {
        display: none;
    }

    #TravelForm .tab {
        width: 100%;
        margin: 0;
    }

    #VacationPackagesTab .tab-buttons {
        margin-top: 20px;
    }

    fieldset.departuredate,
    fieldset.returndate,
    fieldset.vacation-select,
    fieldset.vacation-text {
        width: 100%;
        margin: 0px;
        padding: 0;
        margin-top: 15px;
    }

    fieldset.destination-field,
    div.autoComplete_wrapper,
    fieldset.vacation-radio,
    div.Cruises-autoComplete_wrapper {
        width: 100%;
        margin-right: 10px;
        padding: 0;
    }

    #TravelForm .tab-buttons {
        position: absolute;
        display: flex;
        flex-wrap: nowrap;
        margin-block: 0;
        /* overflow-x: auto; */
        text-align: left;
        white-space: nowrap;
        align-items: center;
        justify-content: flex-start;
        height: 60px;
        left: 0px;
        padding: 0 15px;
        scroll-behavior: smooth;
        overscroll-behavior: contain;
        overflow-x: auto;
    }
    #TravelForm .form-tab-row {
        overscroll-behavior: contain;
    }

    #TravelForm .tab-buttons input {
        padding: 10px 15px;
    }

    #CruisesFormSpecificDate,
    #CruisesFormSpecificDateFields {
        width: 100%;
    }

    fieldset#MultiDestinationDestinations fieldset {
        width: 100%;
        margin-top: 15px;
        display: block;
    }

    fieldset#GuidedToursDestinations fieldset {
        width: 100%;
        padding: 0;
        display: block;
        margin-top: 15px;
    }

    fieldset#GuidedToursOthers {
        display: block;
        margin-top: 15px;
    }

    fieldset#GuidedToursOthers fieldset {
        width: 100%;
        margin: 0px;
        padding: 0;
        display: block;
        margin-top: 15px;
    }

    .add-destination {
        margin: 0;
        margin-top: 15px;
    }

    #TravelForm.TravelFormMultiDestination fieldset.vacation-button-pop,
    #TravelForm.TravelFormMultiDestination .vacation-select {
        margin: 0;
        margin-top: 15px;
    }

    #GuidedToursOthers select {
        width: 100%;
    }

    .number {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .form-popup {
        left: 6px;
        width: 100%;
        transition: visibility 0s, opacity 0.5s linear;

    }

    span#VacationPackages-close-x,
    span#GroupTravel-close-x,
    span#GuidedTours-close-x,
    span#MultiDestination-close-x,
    span#Cruises-close-x {
        position: absolute;
        top: -5px;
        right: 5px;
        font-size: 32px;
        font-weight: 800;
    }

    .number input {
        width: 20px;
        display: inline-block;
    }
    #CruisesForm fieldset.departuredate, #CruisesForm fieldset.returndate, #CruisesForm fieldset.vacation-select, #CruisesForm fieldset.vacation-text {
        width: 100%;
        margin: 0;
        margin-top: 15px;
    }
    span.minus {
        font-size: 17px;
    }
    #TravelForm .the-active-tab {
        padding-top: 0;
        padding-bottom: 0;
    }

    #YourInformation fieldset {
        width: 100%;
        display: block;
    }

    div#submit-container {
        display: block;
        margin: 0 auto;
        margin-top: 15px;
    }

    .nav-btns-container {
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }
    button#nextBtn {
        margin-right: 15px;
    }
    button#prevBtn {
        display: block;
        margin-left: 35px;
        float: unset;
        margin: 0 auto;
        text-align: center;
    }
    #submit-container {
        position: static;
        right: auto;
        bottom: auto;
    }
    .button-submit {
        float: unset;
        margin: 0 auto;
    }
    .DestinationWeddings .destination-field, .VowRenewals .destination-field {
        width: 100%;
    }
    .DestinationWeddings #GroupTravelFormGroupFlight, .VowRenewals #GroupTravelFormGroupFlight {
        width: 100% !important;
    }
    .DestinationWeddings .autoComplete_wrapper, .VowRenewals .autoComplete_wrapper {
        width: 100%;
        margin-right: 0;
        margin-top: 0;
    }
    .DestinationWeddings #GroupTravelFormExactDate, .VowRenewals #GroupTravelFormExactDate {
        width: 100%;
    }
    .DestinationWeddings .destinationweddingdates, .VowRenewals .destinationweddingdates {
        display: block;
        width: 100%;
    }
    #TravelForm button#nextBtn, #TravelForm button#prevBtn {
        padding: 10px;
        width: 33%;
    }
    fieldset.departuredate, fieldset.returndate, fieldset.vacation-select, fieldset.vacation-text, fieldset.honeymoonWeddingDate {
        width: 100%;
        margin-right: 0;
    }
    .autoComplete_wrapper>input, .autoComplete_wrapper>input:focus {
        width: 100%;
    }
    #TravelForm button.tab-button {
        width: auto !important;
        min-width: 200px;
    }
    #TravelForm .top-form.DestinationWeddings label[for="GroupTravelFormExactWeddingDate"], #TravelForm .top-form.VowRenewals label[for="GroupTravelFormExactWeddingDate"] {
        width: 100%;
    }
    .form-tab-row {
        height: auto;
    }
    .HoneyMoons.biggerFields .destination-field,
    .HoneyMoons.biggerFields .departuredate,
    .HoneyMoons.biggerFields .returndate,
    .Getaways.biggerFields .destination-field,
    .Getaways.biggerFields .departuredate,
    .Getaways.biggerFields .returndate {
        width: 100%;
    }
}