/* Event booking form */

body {
    font-family: 'Roboto', Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 100;
}

.eventBookingContainer {
    width: 100%;
}

.eventBookingContainer .form-group {
    margin: 0 0 20px 0;
}

.eventBookingContainer .form-group label {
    display: inline-block;
    margin:0 5px 10px 0;
}

.eventBookingContainer .form-group label.fixedWidth {
    width: 25%;
    vertical-align: middle;
    margin-bottom: 0;
}

.eventBookingContainer .form-group .form-control {
    padding: 10px;
    height: 25px;
    line-height: 22px;
    vertical-align: middle;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 300;
    border: 1px solid #303030;
    width: calc(100% - 22px);
}

.eventBookingContainer .form-group textarea.form-control {
    height: 100px;
}

.eventBookingContainer .form-group select {
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 300;
    height: 40px;
}

.eventBookingContainer .form-group select::-ms-expand {
    display: none;
}

.eventBookingContainer .form-group select option {
    color: #000;
    background: #fff;
}

.eventBookingContainer input[type="checkbox"],
.eventBookingContainer input[type="radio"] {
    display: inline-block;
    margin-right: 7px;
}

.selectDate,
.selectTime,
.selectEvent,
.selectLanguage,
.selectNumbersOfVisitors {
    background: transparent;
    padding: 7px 30px 7px 7px;
    line-height: 1.2;
    border: 0;
    height: 32px;
    color: #fff;
    font-size: 13px;
    -webkit-border-radius: 0;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}

.selectTime,
.selectEvent,
.selectLanguage,
.selectNumbersOfVisitors {
    color: #484848;
}

.styledSelect {
    display: inline-block;
    background: url(/hotelnoblehouse/EventBooking/images/arrow-down.png) no-repeat 90% 50% #333;
}

.styledSelectAlt {
    display: inline-block;
    background: url(/hotelnoblehouse/EventBooking/images/arrow-down-black.png) no-repeat 90% 50% #e9e9e9;
}

.ui-datepicker-trigger {
    vertical-align: middle;
    margin: 0 0 0 5px;
}

.form-group .description {
    display: block;
    font-size: 12px;
    color: #888;
    margin: 3px 0 0 0;
}

.form-group .requiredText {
    font-size: 12px;
}

.submitBtn {
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-size: 16px;
    color: #fff;
    display: block;
    float: right;
    background: #333;
    border: none;
    padding: 10px 20px;
    outline: 0;
    -webkit-appearance: none;
    border-radius: 0;
}

.PaymentAddressContainer {
    margin: 15px 0 0 0;
    padding: 15px 20px;
    border-left: 8px solid #f1f1f1;
}

/* Date picker */

.ui-widget {
    font-family: Arial, sans-serif !important;
    font-size: 13px !important;
}

.ui-widget-header {
    background: #333 !important;
    color: #fff !important;
    border-radius: 0 !important;
    border: none !important;
    font-weight: normal !important;
}

.ui-icon-circle-triangle-w {
    background: url(/EventBooking/images/arrow-left.png) no-repeat 50% 50% !important;
}

.ui-icon-circle-triangle-e {
    background: url(/EventBooking/images/arrow-right.png) no-repeat 50% 50% !important;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
    border: 1px solid #333 !important;
    background: none !important;
}

.ui-state-default,
.ui-widget-content .ui-state-default, 
.ui-widget-header .ui-state-default {
    border: 1px solid #e1e1e1 !important;
    background: #efefef !important;
    color: #000 !important;
}

.ui-state-default:hover,
.ui-widget-content .ui-state-default:hover, 
.ui-widget-header .ui-state-default:hover {
    background: #e1e1e1 !important;
}

.ui-state-active, 
.ui-widget-content .ui-state-active, 
.ui-widget-header .ui-state-active {
    background: #fffddd !important;
    border: none !important;
}

.ui-state-active:hover, 
.ui-widget-content .ui-state-active:hover, 
.ui-widget-header .ui-state-active:hover {
    background: #fffaa4 !important;
}

@media (max-width : 640px) {

	/* Event booking form */

	.eventBookingContainer .form-group label.fixedWidth {
		display: block;
		width: 100%;
		margin: 0 0 10px 0;
	}

	.eventBookingContainer .ui-datepicker-trigger {
		display: none;
	}
}