/* ========== Forms ========== */

.form h5 {
}

/* Position the "* = Required Field" seen at top of forms */
.form-legend {
    float: right;
    display: inline-block;
    margin-bottom: 1em;
}

.form .fields {
    width: 100%;
}

.form .fields {
    clear: both;
    margin-bottom: 1em;
}

.form .fields.no-margin {
    clear: both;
    margin-top: 0;
}

.form .fields label {
   cursor: pointer;
   width: 241px;
}

.form .fields input, .form .fields .chosen-container {
    margin-bottom: 1em;
}

/* individual form fields go in an element with the "item" class */
.form .fields .item {
    width: 208px;
    margin-right: 1.5em;
    vertical-align: top;
    display: inline-block;
}

.form .fields .item.wide {
    width: 300px;
}
.form .fields .item.widest {
    /* .stretch goes 100% without the calc */
    width: calc(100% - 0.5em);
}



/* specific form field widths */

.form .fields .email, .form .fields .email input {
    width: 240px;
}

.form .fields .email input {
    width: calc(240px - 12px)
}

.form .fields .email:last-of-type {
    margin-right: 0;
}

.form .fields .password, .form .fields .password input {
    width: 240px;
}

    .form .fields .password:last-of-type {
        margin-right: 0;
    }

.form .fields .phone-country {
    width: 120px;
}

.form .fields .phone-country input {
    width: 50px;
}

.form .fields .phone-extension input {
    width: 70px;
}

.form .fields .phone input {
    width: 150px;
}

.form .fields .number-staterooms{
    width: 170px;
}

.form .fields .number-staterooms > div, .form .fields .number-guests > div{
    width: 50px;
}

.form .fields .stateroom-category > div {
    width: 200px;
}

.form .fields .salutation {
    width: 100%;
}


.form .fields .salutation .chosen-container {
    width: 190px !important;
}

.form .fields .first-name {
    clear: both;
    width: 150px;
}

.form .fields .first-name, .form .fields .first-name input {
    width: 150px;
}

.form .fields .middle-name {
    clear: both;
    width: 150px;
}

.form .fields .middle-name, .form .fields .middle-name input {
    width: 150px;
}

.form .fields .last-name, .form .fields .last-name input {
    width: 200px;
}

.form .fields .suffix, .form .fields .suffix .chosen-container {
    margin-right: 0;
    width: 100px !important;
}

.form .fields .full-name {
    width: 275px;
}


.form .fields .club-num {
    width: 250px;
}

/* ========== date & time fields ========== */

.form .fields .month, .form .fields .month .chosen-container {
    width: 150px !important; 
}

.form .fields .day, .form .fields .day .chosen-container {
    width: 100px !important; 
}

.form .fields .year, .form .fields .year .chosen-container {
    width: 100px !important;
}


.form .fields .hour, .form .fields .hour .chosen-container, .form .fields .hour input {
    width: 100px !important;
}

.form .fields .minute, .form .fields .minute .chosen-container {
    width: 100px !important;
}


/* ========== personal ========== */
.form .fields .gender {
    width: 70px;
}




/* address fields */
.form .fields .address {
    width: 300px;
}

.form .fields .city {
    width: 130px;
    display: inline-block;
}

.form .fields .state, .form .fields .state .chosen-container {
    width: 150px !important;
    display: inline-block;
}

.form .fields .zip {
    width: 110px;
    display: inline-block;
}

.form .fields .country, .form .fields .country .chosen-container {
    width: 300px !important;
}

/* other fields (comments, questions, etc. */
.form .fields .comments {
    width: 100%;
}

.form .fields .comments textarea {
    height: 5em;
    width: 100%;
}


.form .fields .voyage-dd, .form .fields .voyage-dd .chosen-container {
    width: 626px !important;
}


.form .fields .preferred-date, .form .fields .preferred-region {
    width: 240px;
}

.form .fields .preferred-region{
    margin-right: 0px;
}

.form .fields .preferred-itinerary, 
.form .fields .preferred-itinerary > div {
    width: 100%;
}

.form .fields .number-guests > div{
    width: 50px;
}

.form .fields .stateroom-category,
.form .fields .stateroom-category > div{
    width: 230px;
}

input.short-input {
    width: 50px;
}

.form .fields .person-budget input[type="text"] {
    width: 150px !important;
}

.form .fields .file-upload {
}


.form button {
    margin-top: 1.5em;
}

/* make an "item" stretch to 100% if needed - intended for checkbox fields where there is a long phrase */
.form .fields .item.stretch {
    width: 100%;
}

/* get rid of the default bold styling on labels used with checkboxes/radio buttons */
.form .check-label, .form-radio-label {
    font-weight: normal;
}

/* error messages */

/* put border around field */
.form label.invalid,
.form input[type="text"].invalid,
.form input[type="password"].invalid,
.form input[type="email"].invalid,
.form textarea.invalid,
.form select.invalid
.form div.invalid {
    border: 1px solid #820000;
    background-color: #ffd4d4;
}

.form .invalid+.chosen-container {
    border: 1px solid #820000;
    background-color: #ffd4d4;
}

.form input.invalid + label {
    border: 1px solid #820000;
    background-color: #ffd4d4;
}

.form span.label {
    font-size: 16px;
    font-weight: bold;
}

.form span.value {
    font-size: 16px;
    margin-left: 1em;
}

input[type="text"].disabled
{
    pointer-events: none;
    cursor: default;
    opacity: 0.7;
    color: #7d7d7d;
}