.custom_form_design {
position: relative;
overflow: hidden;
width: 100%;
display: inline-block;
float: right;
background-color: #fff;
background-image: url(https://oceanlodgehotel.dreamsites.io/wp-content/uploads/2023/05/background-g121bf4245_1920.jpg);
box-shadow: 0 0 16px 7px #cccccc30;
margin-bottom:100px;
}
.form_title {
background-color: #26519e;
padding: 10px 15px;
text-align: center;
font-size: 14px;
font-weight: 500;
color: #ffff;
}
.form_content {
padding: 5px 15px 25px;
}
.form_field {
display: block;
margin-bottom: 10px;
}
.half_width {
width: 48%;
display: inline-block;
}
input#checkindate:after {
content: "";
background: url(https://live.ipms247.com/themes/reservation/images/bookingbtn/calendar.png) no-repeat;
margin-left: 3px;
background-position: center;
width: 21px;
position: absolute;
height: 21px;
right: 5px;
top: 0;
background-size: contain;
}
.form_field input {
background-color: #fff;
border: none;
box-shadow: none;
border-bottom: 1px solid transparent;
border-radius: 30px;
padding: 3px 15px;
}
.form_field input.hasDatepicker {
background-image: url(https://oceanlodgehotel.dreamsites.io/wp-content/uploads/2023/05/calendar1.png);
background-repeat: no-repeat;
background-position: 98%;
background-size: 20px;
}
.form_field input:focus, .form_field input:active {
border-width: 0 0 1px 0 !important;
box-shadow: 2px 2px 3px 3px #26519e29;
border-bottom-color: #deaa3d;
outline: none !important;
}
.form_field label {
font-size: 13px;
font-weight: 500;
padding-bottom: 5px;
opacity: .9;
}
.submit_button {
border-radius: 30px;
width: 100%;
box-shadow: none !important;
border: none;
margin-top: 10px;
}
input.submit_button:hover, input.submit_button:focus, input.submit_button:active {
background-color: #26519e !important;
box-shadow: none !important;
border: none !important;
outline: none !important;
}
.ui-datepicker .ui-datepicker-header {
background-image: none !important;
background-color: #26519e !important;
border-color: #26519e !important;
}
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
background-color: #fff;
}
.ui-datepicker .ui-datepicker-title {
color: #fff;
}
.ui-datepicker table {
background-color: #fff;
}
.ui-datepicker .ui-datepicker-unselectable.ui-state-disabled span, .ui-datepicker table td a, .ui-datepicker table td {
background-image: none !important;
background: #2D94F212 !important;
text-align: center;
font-size: 14px;
}
.ui-datepicker .ui-datepicker-today .ui-state-highlight {
background-image: none !important;
background-color: #26519e !important;
color: #fff;
}
.ui-datepicker th span {
font-size: .8em;
}
.ui-datepicker th {
padding: 0.5em 0.2em;
}
.form_field input::placeholder { font-size: 13px;
opacity: 1; }
.form_field input:-ms-input-placeholder { font-size: 13px;
}
.form_field input::-ms-input-placeholder { font-size: 13px;
}
@media (max-device-width: 500px) {
.form_title {
font-size: 15px;
padding: 15px 10px;
}
.custom_form_design {
width: 100%;
}
.half_width {
width: 100%;
}
.form_field {
margin-bottom: 10px;
}
}