/* Inputs */
.SearchHotels.SearchMode-WBHotelListKeystone .ARNSortItem,
.SearchHotels.SearchMode-WBHotelListKeystone #HotelNameContainer input,
.enterpriseHeader .languageContainer select,
.SinglePropDetail.WBPropertyDetailViewKeystone .SimpleSearch .CheckIn,
.SinglePropDetail.WBPropertyDetailViewKeystone .SimpleSearch .CheckOut,
.SinglePropDetail.WBPropertyDetailViewKeystone .ArnAdultsChildren,
.SinglePropDetail.WBPropertyDetailViewKeystone .ArnCurrency,
.CheckOutForm.CheckoutMode-WBCheckoutFormKeystone input.text,
.CheckOutForm.CheckoutMode-WBCheckoutFormKeystone input {
    height: auto;
    max-height: var(--input-max-height);
    border-radius: var(--semantic-radius-input-radius);
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-fg);
    padding: 4px var(--input-default-padding-side);
}

.SearchHotels.SearchMode-WBHotelListKeystone .ARNSortItem,
.SearchHotels.SearchMode-WBHotelListKeystone #HotelNameContainer input,
.enterpriseHeader .languageContainer select,
.CheckOutForm.CheckoutMode-WBCheckoutFormKeystone input.text,
.CheckOutForm.CheckoutMode-WBCheckoutFormKeystone input {
    height: auto;
    line-height: 24px;
    padding: var(--input-default-padding-top) var(--input-default-padding-side);
    text-align: left;
}

.enterpriseHeader .languageContainer select {
    padding-right: 9px;
}

.SearchHotels.SearchMode-WBHotelListKeystone #HotelNameContainer input {
    padding: var(--input-default-padding-top) var(--input-default-padding-side) var(--input-default-padding-top) 36px;
}

.SearchHotels.SearchMode-WBHotelListKeystone #HotelNameContainer input::placeholder {
    font-weight: normal;
    color: var(--input-placeholder);
}

.SearchHotels.SearchMode-WBHotelListKeystone .ArnSecondarySearchOuterContainer select {
    display: flex;
    padding: var(--select-alt-padding-top) var(--select-default-padding-side);
    justify-content: center;
    align-items: center;
    gap: var(--select-gap);
    align-self: stretch;

    border-radius: var(--semantic-radius-input-radius);
    border: 1px solid var(--select-border);
}

.CheckOutForm.CheckoutMode-WBCheckoutFormKeystone select,
.ArnSubPage .FormFields select {
    display: flex;
    height: 48px;
    padding: 12px 16px 13px;
    justify-content: center;
    align-items: center;
    gap: var(--select-gap);
    align-self: stretch;
    border-radius: var(--semantic-radius-input-radius);
    border: 1px solid var(--select-border);
    background: var(--select-bg);
}

.SearchHotels.SearchMode-WBHotelListKeystone .ARNSortItem,
.enterpriseHeader .languageContainer select,
.SearchHotels.SearchMode-WBHotelListKeystone .ArnSecondarySearchOuterContainer select,
.ArnSubPage .FormFields select {
    line-height: 24px;
    height: auto;
    padding: var(--select-default-padding-top, 10px) var(--select-default-padding-side, 16px);
    padding-right: calc(var(--select-default-padding-side, 16px) + 24px);
    appearance: none;
    background-image: url('data:image/svg+xml,<svg width="13" height="8" viewBox="0 0 13 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.49997 7.98935L0.235596 1.7331L1.38935 0.579346L6.49997 5.6981L11.6106 0.579346L12.7643 1.7331L6.49997 7.98935Z" fill="%2336382E"/></svg>');
    background-repeat: no-repeat;
    background-position: right var(--select-default-padding-side) center;
}

.CheckOutForm.CheckoutMode-WBCheckoutFormKeystone select, .ArnSubPage .FormFields select {
    line-height: 26px;
}

#theCouponFieldset button {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

#theSpecialRequestsAjax textarea {
    padding: var(--input-default-padding-top) var(--input-default-padding-side);
    border-radius: var(--semantic-radius-input-radius);
    line-height: 26px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-fg);
}

.enterpriseHeader .languageContainer select {
    max-width: 176px;
}

.SearchHotels.SearchMode-WBHotelListKeystone #HotelNameContainer svg {
    top: 15px;
    left: 16px;
}

.ArnAcdParentLable {
    color: var(--input-fg);
}

/* Login and registration */
.WBLoginFormContainer.ArnSubPage #theWBLoginForm .formField:not(.checkbox),
.WBLoginFormContainer.ArnSubPage #theWBLoginForm .formField:not(.checkbox):focus,
.WBValidatedRegistrationFormContainer.ArnSubPage .FormFields input,
.ArnSubPage.WBForgotPasswordFormContainer .FormFields .formField,
.ArnSubPage.WBForgotPasswordFormContainer .FormFields .text {
    padding: var(--input-default-padding-top) var(--input-default-padding-side) !important;
    border-radius: var(--semantic-radius-input-radius);
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-fg);

    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
}

.WBLoginFormContainer.ArnSubPage #theWBLoginForm label,
.WBValidatedRegistrationFormContainer.ArnSubPage .FormFields label,
.WBForgotPasswordFormContainer .FormFields label {
    position: static;
    color: var(--input-label);

    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.WBLoginForm .Required label:after {
    display: initial;
}

.Required label:after {
    color: var(--input-asterix);
}

/* star rating */
.ArnPropertyClassesContainer svg,
.ArnPropClass svg,
.customRatingImageSpan svg {
    height: 17px;
    margin: 0 var(--star-rating-gap) 0 0;
    vertical-align: text-top;
}

.ArnPropertyClassesContainer svg path,
.ArnPropClass svg path,
.customRatingImageSpan svg path {
    fill: var(--star-rating-active-bg);
    stroke-width: 1px;
    stroke: var(--star-rating-active-border, var(--star-rating-active-bg));
}

.ArnPropertyClassesContainer svg.inactive path,
.ArnPropClass svg.inactive path,
.customRatingImageSpan svg.inactive path {
    fill: var(--star-rating-bg);
    stroke-width: 1px;
    stroke: var(--star-rating-border, var(--star-rating-bg));
}

/* checkboxes */
.WBLoginFormContainer.ArnSubPage #theWBLoginForm .formField.checkbox,
.SearchHotels.SearchMode-WBHotelListKeystone .ArnSecondarySearchOuterContainer .ArnIndividualSearchContainer input.checkbox,
.CheckOutForm.CheckoutMode-WBCheckoutFormKeystone #theMemberIsGuestAjax .checkbox,
.CheckOutForm.CheckoutMode-WBCheckoutFormKeystone #theConfirmCheckboxesAjax .checkbox {
    position: relative;
    width: var(--checkbox-small);
    height: var(--checkbox-small);
    min-height: var(--checkbox-small);
    min-width: var(--checkbox-small);
    margin: 0 var(--checkbox-gap) 0 0;
    padding: 0;
    border-radius: var(--checkbox-radius);
    border: 1px solid var(--checkbox-border-color);
    background: var(--checkbox-bg);

    -webkit-appearance: none;
    appearance: none;
}

.SearchHotels.SearchMode-WBHotelListKeystone .ArnSecondarySearchOuterContainer .ArnIndividualSearchContainer input.checkbox#refundableFilter {
    margin: 0;
}

.WBLoginFormContainer.ArnSubPage #theWBLoginForm .formField.checkbox:hover,
.SearchHotels.SearchMode-WBHotelListKeystone .ArnSecondarySearchOuterContainer .ArnIndividualSearchContainer input.checkbox:hover,
.CheckOutForm.CheckoutMode-WBCheckoutFormKeystone #theMemberIsGuestAjax .checkbox:hover,
.CheckOutForm.CheckoutMode-WBCheckoutFormKeystone #theConfirmCheckboxesAjax .checkbox:hover {
    background: var(--checkbox-hover-bg);
    border: 1px solid var(--checkbox-hover-border-color);
}

.WBLoginFormContainer.ArnSubPage #theWBLoginForm .formField.checkbox:before,
.SearchHotels.SearchMode-WBHotelListKeystone .ArnSecondarySearchOuterContainer .ArnIndividualSearchContainer input.checkbox:before,
.CheckOutForm.CheckoutMode-WBCheckoutFormKeystone #theMemberIsGuestAjax .checkbox:before,
.CheckOutForm.CheckoutMode-WBCheckoutFormKeystone #theConfirmCheckboxesAjax .checkbox:before {
    position: absolute;
    top: 4px;
    left: 3px;
    content: "";
    width: 15px;
    height: 12px;
    clip-path: polygon(10% 40%, 0% 55%, 35% 100%, 100% 15%, 90% 0%, 35% 75%);
    background: transparent;
}

.WBLoginFormContainer.ArnSubPage #theWBLoginForm .formField.checkbox:before {
    width: 10px;
    height: 9px;
}

.WBLoginFormContainer.ArnSubPage #theWBLoginForm .formField.checkbox:checked,
.SearchHotels.SearchMode-WBHotelListKeystone .ArnSecondarySearchOuterContainer .ArnIndividualSearchContainer input.checkbox:checked,
.CheckOutForm.CheckoutMode-WBCheckoutFormKeystone #theMemberIsGuestAjax .checkbox:checked,
.CheckOutForm.CheckoutMode-WBCheckoutFormKeystone #theConfirmCheckboxesAjax .checkbox:checked {
    background-color: var(--checkbox-active-bg);
    border: 1px solid var(--checkbox-active-border-color);
}

.WBLoginFormContainer.ArnSubPage #theWBLoginForm .formField.checkbox:checked:before,
.SearchHotels.SearchMode-WBHotelListKeystone .ArnSecondarySearchOuterContainer .ArnIndividualSearchContainer input.checkbox:checked:before,
.CheckOutForm.CheckoutMode-WBCheckoutFormKeystone #theMemberIsGuestAjax .checkbox:checked:before,
.CheckOutForm.CheckoutMode-WBCheckoutFormKeystone #theConfirmCheckboxesAjax .checkbox:checked:before {
    background: var(--checkbox-checkmark);
}

.WBLoginFormContainer.ArnSubPage #theWBLoginForm .formField.checkbox:disabled,
.SearchHotels.SearchMode-WBHotelListKeystone .ArnSecondarySearchOuterContainer .ArnIndividualSearchContainer input.checkbox:disabled,
.CheckOutForm.CheckoutMode-WBCheckoutFormKeystone #theMemberIsGuestAjax .checkbox:disabled,
.CheckOutForm.CheckoutMode-WBCheckoutFormKeystone #theConfirmCheckboxesAjax .checkbox:disabled {
    background-color: var(--checkbox-disabled-bg);
    border: 1px solid var(--checkbox-disabled-border-color);
    cursor: not-allowed;
}

.WBLoginFormContainer.ArnSubPage #theWBLoginForm .formField.checkbox:disabled:checked,
.SearchHotels.SearchMode-WBHotelListKeystone .ArnSecondarySearchOuterContainer .ArnIndividualSearchContainer input.checkbox:disabled:checked,
.CheckOutForm.CheckoutMode-WBCheckoutFormKeystone #theMemberIsGuestAjax .checkbox:disabled:checked,
.CheckOutForm.CheckoutMode-WBCheckoutFormKeystone #theConfirmCheckboxesAjax .checkbox:disabled:checked {
    background-color: var(--checkbox-disabled-fg);
    border: 1px solid var(--checkbox-disabled-fg);
}

.WBLoginFormContainer.ArnSubPage #theWBLoginForm div.checkboxView label,
.SearchHotels.SearchMode-WBHotelListKeystone .ArnIndividualSearchContainer .ArnSearchField div span {
    color: var(--checkbox-fg);
    margin: 0;

    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.SearchHotels.SearchMode-WBHotelListKeystone .ArnSecondarySearchOuterContainer .ArnIndividualSearchContainer input.checkbox,
.CheckOutForm.CheckoutMode-WBCheckoutFormKeystone #theMemberIsGuestAjax .checkbox,
.CheckOutForm.CheckoutMode-WBCheckoutFormKeystone #theConfirmCheckboxesAjax .checkbox {
    width: var(--checkbox-large);
    height: var(--checkbox-large);
    min-width: var(--checkbox-large);
    min-height: var(--checkbox-large);
}

.SearchHotels.SearchMode-WBHotelListKeystone .ArnIndividualSearchContainer .ArnSearchField div span,
.CheckOutForm.CheckoutMode-WBCheckoutFormKeystone .confirmationAgreement {
    font-size: 16px;
    line-height: 26px;
}

.WBLoginFormContainer.ArnSubPage #theWBLoginForm #theRememberMeAjax {
    display: flex;
}

.SearchHotels.SearchMode-WBHotelListKeystone .ArnIndividualSearchContainer .ArnSearchField div>span {
    display: inline;
    margin: 0;
}

/* Buttons */
/* TODO remove all !important when launch to keystone */
/* general buttons */
.ds-primary,
.ds-secondary,
.ds-primary.submit,
.ds-secondary.submit,
.WBPurchaseMembership .submit,
.ArnSubPage .FormActions .submit,
.WBLoginFormContainer.ArnSubPage #theWBLoginForm .submit,
.RootBody .ArnPrimarySearchOuterContainer .submit,
#searching .submit,
.SearchHotels.SearchMode-WBHotelListKeystone #theSubmitButton,
.SearchHotels.SearchMode-WBHotelListKeystone #theOtherSubmitButton2,
.SearchHotels.SearchMode-WBHotelListKeystone #theOtherSubmitButton,
.SinglePropDetail.WBPropertyDetailViewKeystone .SimpleSearch form>input.submit,
.SinglePropDetail.WBPropertyDetailViewKeystone .bookRoom,
.searchOptionsControls button.doneSearchOptions.submit,
.SinglePropDetail.WBPropertyDetailViewKeystone a.showRoomsLink,
.staticWidgetPage .topContainer .titleContainer .topSearch .submit,
.search-promo-banner .externalbutton a,
.page.home .freeTrial .content a.submit,
.page .dashboard div.sectionContainer .content .details .freeTrialMember a,
.page .dashboard .submit, .page a.submit.light,
#theConfirmationContainer .submit {
    width: min-content;
    height: initial;
    padding: var(--button-default-padding-l-top, 10px) var(--button-default-padding-l-side, 32px);
    border-radius: var(--button-radius, 4px);

    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
}

.internationalLanguage.SearchHotels.SearchMode-WBHotelListKeystone #theSubmitButton,
.internationalLanguage.SearchHotels.SearchMode-WBHotelListKeystone #theOtherSubmitButton2,
.internationalLanguage.SearchHotels.SearchMode-WBHotelListKeystone #theOtherSubmitButton {
    padding: 10px;
}

.ds-primary,
.ds-primary.submit,
.WBPurchaseMembership .submit,
.searchOptionsControls button.doneSearchOptions.submit,
.staticWidgetPage .topContainer .titleContainer .topSearch .submit,
.search-promo-banner .externalbutton a,
.page.home .freeTrial .content a.submit,
.page .dashboard div.sectionContainer .content .details .freeTrialMember a,
.WBLoginFormContainer.ArnSubPage #theWBLoginForm .submit,
#theConfirmationContainer .submit,
.contact-usPage .submit {
    border: 2px solid var(--button-primary-fill-border-color) !important;
    background-color: var(--button-primary-fill-bg) !important;
    color: var(--button-primary-fill-fg) !important;
}

.ds-primary:hover,
.ds-primary:focus,
.ds-primary.submit:hover,
.WBPurchaseMembership .submit:hover,
.searchOptionsControls button.doneSearchOptions.submit:hover,
.staticWidgetPage .topContainer .titleContainer .topSearch .submit:hover,
.search-promo-banner .externalbutton a:hover,
.page.home .freeTrial .content a.submit:hover,
.page .dashboard div.sectionContainer .content .details .freeTrialMember a:hover,
.WBLoginFormContainer.ArnSubPage #theWBLoginForm .submit:hover,
#theConfirmationContainer .submit:hover,
.contact-usPage .submit:hover {
    border: 2px solid var(--button-primary-fill-hover-bg) !important;
    background-color: var(--button-primary-fill-hover-bg) !important;
    color: var(--button-primary-fill-hover-fg) !important;
}

.btn-loading.ds-primary:hover,
.btn-loading.ds-primary:focus,
.btn-loading.ds-primary.submit:hover,
.btn-loading.searchOptionsControls button.doneSearchOptions.submit:hover,
.btn-loading#theConfirmationContainer .submit:hover {
    border: 2px solid var(--button-primary-fill-border-color) !important;
    background-color: var(--button-primary-fill-bg) !important;
    color: var(--button-primary-fill-fg) !important;
}

.ds-secondary,
.ds-secondary.submit,
.ArnSubPage .FormActions .submit,
.page .dashboard .submit,
.page a.submit.light,
#searching .submit {
    border: 2px solid var(--button-secondary-fill-border-color) !important;
    background-color: var(--button-secondary-fill-bg) !important;
    color: var(--button-secondary-fill-fg) !important;
}

.ds-secondary:hover,
.ds-secondary:focus,
.ds-secondary.submit:hover,
.ArnSubPage .FormActions .submit:hover,
.page .dashboard .submit:hover,
.page a.submit.light:hover,
#searching .submit:hover {
    border: 2px solid var(--button-secondary-fill-hover-bg) !important;
    background-color: var(--button-secondary-fill-hover-bg) !important;
    color: var(--button-secondary-fill-hover-fg) !important;
}

.ds-tertiary,
.searchOptionsControls button.clearSearchOptions.submit,
.staticWidgetPage .topContainer .titleContainer .topSearch .submit.clearSearchOptions {
    background-color: transparent !important;
    border-color: 2px solid var(--button-tertiary-line-border-color) !important;
    color: var(--button-tertiary-line-fg) !important;
}

.ds-tertiary:hover,
.searchOptionsControls button.clearSearchOptions.submit:hover,
.staticWidgetPage .topContainer .titleContainer .topSearch .submit.clearSearchOptions:hover {
    background-color: transparent !important;
    border: 2px solid var(--button-tertiary-line-hover-border-color) !important;
    color: var(--button-tertiary-line-hover-fg) !important;
}

a.btn-loading:after, .loaderCheckRates {
    background-color: var(--button-primary-fill-hover-bg);
}

/* login buttons */
.WBLoginFormContainer.ArnSubPage #theWBLoginForm .submit {
    width: 100%;
}

.page.home .freeTrial .content a.submit {
    white-space: nowrap;
    line-height: 26px;
}

/* search buttons */
.RootBody .ArnPrimarySearchOuterContainer .submit,
.searchOptionsControls button.clearSearchOptions.submit,
.searchOptionsControls button.doneSearchOptions.submit,
.RootBody.alphaSkin .searchOptionsControls button.doneSearchOptions.submit,
.RootBody.alphaSkin .searchOptionsControls button.clearSearchOptions.submit {
    width: auto !important;
    padding: var(--button-alt-padding-l-top, 10px) var(--button-alt-padding-l-side, 32px) !important;
    border-radius: var(--button-alt-radius, 32px) !important;
}

.RootBody.alphaSkin .ArnPrimarySearchOuterContainer .submit {
    padding: var(--button-default-padding-l-top, 10px) var(--button-default-padding-l-side, 32px) !important;
    border-radius: var(--button-radius, 4px) !important;
    height: 55px;
}

.internationalLanguage.RootBody .ArnPrimarySearchOuterContainer .submit {
    padding: 10px 20px !important;
}

.SearchHotels.SearchMode-WBHotelListKeystone #theOtherSubmitButton2,
.SearchHotels.SearchMode-WBHotelListKeystone #theOtherSubmitButton {
    height: initial;
    width: 100%;
}

/* HDP buttons */
.SinglePropDetail.WBPropertyDetailViewKeystone .SimpleSearch form>input.submit {
    line-height: 28px;
}

.SinglePropDetail.WBPropertyDetailViewKeystone a.showRoomsLink {
    width: auto;
}

/* static page */
.staticWidgetPage .topContainer .titleContainer .topSearch {
    max-width: none;

    .ArnSearch {
        padding: 0 5px;
    }

    .ArnSearchHolderBoth .ArnAcdParent {
        overflow: hidden;
    }

    .ArnCheckOutContainer>input,
    .ArnCheckInContainer>input {
        color: var(--input-fg);
    }

    .the-submit-button-area {
        height: auto;
        width: auto;
        max-width: none;
    }

    .ArnSearchHolderBoth {
        max-width: 250px;
    }
}

/* to put in keystone with the second design token site */
.SinglePropDetail.WBPropertyDetailViewKeystone .SimpleSearch .CheckIn input,
.SinglePropDetail.WBPropertyDetailViewKeystone .SimpleSearch .CheckOut input {
    padding: 0;
    line-height: 26px;
}

.SinglePropDetail.WBPropertyDetailViewKeystone .SimpleSearch .ArnAdultChildDropdown {
    padding: 0;
}

.SinglePropDetail.WBPropertyDetailViewKeystone .ArnAcdParent {
    line-height: 26px;
}

.CheckOutForm.CheckoutMode-WBCheckoutFormKeystone input.text,
.CheckOutForm.CheckoutMode-WBCheckoutFormKeystone input {
    height: auto;
    line-height: 26px;
}

.CheckOutForm.CheckoutMode-WBCheckoutFormKeystone #theExpirationMonthAjax select {
    min-width: 100px;
}

.CheckOutForm.CheckoutMode-WBCheckoutFormKeystone #theExpirationYearAjax select {
    min-width: 100px;
}

.SearchHotels.SearchMode-WBHotelListKeystone #HotelNameContainer {
    padding: 0 0 24px 0;
}

.SearchHotels.SearchMode-WBHotelListKeystone .ArnPagerResult {
    margin: 0;
    padding-top: 0;
}

.SearchHotels.SearchMode-WBHotelListKeystone #pagerTopAjax {
    padding-top: 12px;
}

.SinglePropDetail.WBPropertyDetailViewKeystone .SimpleSearch .ArnCurrency select {
    line-height: 26px;
    height: auto;
    padding: 0 calc(var(--select-default-padding-side) + 8px) 0 0;
    appearance: none;
    background-image: url('data:image/svg+xml,<svg width="13" height="8" viewBox="0 0 13 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.49997 7.98935L0.235596 1.7331L1.38935 0.579346L6.49997 5.6981L11.6106 0.579346L12.7643 1.7331L6.49997 7.98935Z" fill="%2336382E"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0 center;
}

.CheckOutForm.CheckoutMode-WBCheckoutFormKeystone #theConfirmCheckboxesAjax p {
    align-items: center;
}

@media screen and (max-width: 500px) {
    #theConfirmationContainer .submit {
        width: 100%;
        white-space: normal;
        max-height: initial;
    }

    .SearchHotels.SearchMode-WBHotelListKeystone .ARNSortItem {
        background-position: right 10px center;
        padding-right: initial !important;
        padding: 4px var(--input-default-padding-side);
    }

}

/* end put in keystone */