form label {
    font-size:0.85rem;
}

/* silverstripe field hoders */
form .field {
    margin-bottom:20px;
}
form .field.nocaptcha .g-recaptcha:not([data-size="invisible"]) {
    min-height:78px;
}
form .field.slidernoui {
    padding-bottom:1px;
}

form ::-webkit-input-placeholder {
   color: #999;
}
form :-moz-placeholder { /* Firefox 18- */
    color: #999; 
    opacity:1; 
}
form ::-moz-placeholder {  /* Firefox 19+ */
    color: #999;  
    opacity:1;
}
form :-ms-input-placeholder {  
   color: #999;  
}

/* the basics */
form input[type="email"]:not(.form-control),
form input[type="number"]:not(.form-control),
form input[type="password"]:not(.form-control),
form input[type="search"]:not(.form-control),
form input[type="tel"]:not(.form-control),
form input[type="text"]:not(.form-control),
input[type="text"].force-form:not(.form-control),
form input[type="url"]:not(.form-control),
form input[type="date"]:not(.form-control),
form input[type="time"]:not(.form-control),
form textarea:not(.form-control),
form select:not(.form-control),
form .field.text-fake:not(.form-control),
form .StripeElement:not(.form-control) {
    color:#666;
    border:1px solid #D3D3D3;
    border-radius:4px;
    padding:12px;
    width:100%;
    background-color:#F9F9F9;
}

/* focus */
form input[type="email"]:focus,
form input[type="number"]:focus,
form input[type="password"]:focus,
form input[type="search"]:focus,
form input[type="tel"]:focus,
form input[type="text"]:focus,
form input[type="url"]:focus,
form input[type="date"]:focus,
form input[type="time"]:focus,
form textarea:focus,
form select:focus {
    color:#333;
    border:1px solid #999;
    background-color:#FFFFFF;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

/* text area resizing */
form textarea,
form textarea.form-control {
    resize:vertical;
    min-height:100px;
    height:180px;
    max-height:400px;
}

form select {
    -webkit-appearance: none;
}

form form .Actions input {
    margin-bottom:15px;
}
form .Actions input:not(:last-child){
    margin-right:15px;
}


form p#ForgotPassword {
    display:inline-block;
    margin:0;
    padding:0;
}
form p#ForgotPassword a {
    font-size:.9rem;
    line-height:2rem;
    display:block;
    padding:.5rem .5rem;
    margin-left:.75em;
}


/* SS optionset */
form ul.optionset, 
form ul.optionset li {
    margin:0;
    padding:0;
    list-style:none;
}
form ul.optionset li {
    margin:0 0 2px 25px;
}
form ul.optionset li label,
form label.checkboxfield-small {
    font-weight:normal;
    cursor:pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
form ul.optionset li label,
form label.checkboxfield-small,
form .field.radio label,
form .field.checkbox label {
    min-height:0;
}
form ul.optionset input[type="radio"],
form ul.optionset input[type="checkbox"] {
    position:absolute;
    margin:5px 0 0 -25px;
}
form ul.optionset.inline {
    overflow:hidden;
}
form ul.optionset.inline li {
    float:left;
    margin:0 20px 2px 25px;
}

/* column style */
form ul.optionset.column-style {
    position:relative;
    overflow:hidden;
}
form ul.optionset.column-style li {
    float:left;
    padding-left:25px;
    padding-right:20px;
    box-sizing:border-box;
    margin:0;
}
/* two col */
form ul.optionset.column-style.two li {
    width:50%;
}
/* three col */
form ul.optionset.column-style.three li {
    width:33%;
}
/* four col */
form ul.optionset.column-style.four li {
    width:25%;
}
/* five col */
form ul.optionset.column-style.five li {
    width:20%;
}

@media only screen and (max-width : 992px) {
    /* three col */
    form ul.optionset.column-style.three li {
        width:50%;
    }
    /* four col */
    form ul.optionset.column-style.four li {
        width:33%;
    }
    /* five col */
    form ul.optionset.column-style.five li {
        width:25%;
    }
}
@media only screen and (max-width : 767px) {
    form ul.optionset.column-style.two li {
        width:100%;
    }
    /* four col */
    form ul.optionset.column-style.four li {
        width:50%;
    }
    /* five col */
    form ul.optionset.column-style.five li {
        width:33%;
    }
}
@media only screen and (max-width : 480px) {
    /* three col */
    form ul.optionset.column-style.three li,
    form ul.optionset.column-style.four li {
        width:100%;
    }
    /* five col */
    form ul.optionset.column-style.five li {
        width:50%;
    }
}


/* checkbox style fix */
form .field.checkbox label {
    display:inline-block;
    padding-left:5px;
    line-height:1.5rem;
    font-size:1rem;
}
form .field.checkbox input[type="checkbox"]{
    margin-left:0;
    line-height:1.5rem;
}

/* field descriptions, right titles, etc */
form .field .description,
form .right-title,
form label.right {
    font-size:0.85em;
    color:#777;
    display:block;
    font-weight:normal;
    margin-top:2px;
}

/* USERFORMS */
/* step navigation for userforms module */
#userform-progress {
    font-size:1em;
    position:relative;
    margin-bottom:1.2em;
}
#userform-progress .step-buttons {
    position:absolute;
    margin-top:-18px;
    width:100%;
}
#userform-progress .step-buttons .step-button-wrapper button {
    background:#CED5E1;
    border:none;
    color:#334259;
    padding:0 8px;
    line-height:26px;
    border-radius:6px;
}
#userform-progress .step-buttons .step-button-wrapper.current button {
    color:#FFF;
    background:#334259;
}
nav#step-navigation,
nav#step-navigation ul,
nav#step-navigation li {
    margin:0;
    padding:0;
    list-style:none;
    font-size:0.00rem;
}
nav#step-navigation li {
}
nav#step-navigation button {
    margin-right:10px;
    min-width:auto;
}
/* userforms field groups */
.userformsgroup {
    padding:0 15px !important ;
    background:#EEE;
    box-sizing:border-box;
}
.userformsgroup.inline > .middleColumn > .field {
    width:50%;
    float:left;
}
.userformsgroup.inline > .middleColumn > .field:nth-child(odd) {
    padding-right:8px;
}
.userformsgroup.inline > .middleColumn > .field:nth-child(even) {
    padding-left:8px;
}
@media only screen and (max-width : 480px) {
    .userformsgroup.inline > .middleColumn > .field {
        width:100%;
        float:none;
        clear:left;
    }
    .userformsgroup.inline > .middleColumn > .field:nth-child(odd) {
        padding-right:0;
    }
    .userformsgroup.inline > .middleColumn > .field:nth-child(even) {
        padding-left:0;
    }
}

/*
    CUSTOM : inline-pair class for 2 forms in line
    add the class .non-responsive to .inline-pair to disable 
    col-md-8 style functionality to force inline on mobile.
*/
form .inline-pair,
form .inline-tripple {
    overflow:hidden;
    margin-bottom:20px;
}
form .field.fieldgroup.inline-tripple {
    margin-left:-10px;
    margin-right:-10px;
}
form .field.fieldgroup.inline-pair .fieldgroup-field,
form .field.fieldgroup.inline-tripple .fieldgroup-field,
form .field.confirmedpassword.inline-pair .field.text.password {
    float:left;
}
form .field.fieldgroup.inline-pair .fieldgroup-field,
form .field.confirmedpassword.inline-pair .field.text.password {
    width:50%;
}
form .field.fieldgroup.inline-tripple .fieldgroup-field {
    width:33.333%;
    padding-left:10px;
    padding-right:10px;
}
form .field.fieldgroup.inline-pair.small-left .fieldgroup-field.last,
form .field.fieldgroup.inline-pair.small-right .fieldgroup-field.first {
    width:70%;
}
form .field.fieldgroup.inline-pair.small-left .fieldgroup-field.first,
form .field.fieldgroup.inline-pair.small-right .fieldgroup-field.last {
    width:30%;
}
form .field.fieldgroup.inline-pair.medium-left .fieldgroup-field.last,
form .field.fieldgroup.inline-pair.medium-right .fieldgroup-field.first {
    width:60%;
}
form .field.fieldgroup.inline-pair.medium-left .fieldgroup-field.first,
form .field.fieldgroup.inline-pair.medium-right .fieldgroup-field.last {
    width:40%;
}
form .field.fieldgroup.inline-pair .fieldgroup-field.first,
form .field.confirmedpassword.inline-pair .middleColumn .field.text.password:first-child {
    padding-right:10px;
}
form .field.fieldgroup.inline-pair .fieldgroup-field.last,
form .field.confirmedpassword.inline-pair .middleColumn .field.text.password:last-child {
    padding-left:10px;
}

form .field.fieldgroup.inline-tripple.large-left .fieldgroup-field {
    width:25%;
}
form .field.fieldgroup.inline-tripple.large-left .fieldgroup-field.first {
    width:50%;
}
form .field.fieldgroup.inline-tripple.large-right .fieldgroup-field {
    width:25%;
}
form .field.fieldgroup.inline-tripple.large-right .fieldgroup-field.last {
    width:50%;
}
form .field.fieldgroup.inline-tripple.large-middle .fieldgroup-field.first,
form .field.fieldgroup.inline-tripple.large-middle .fieldgroup-field.last {
    width:25%;
}
form .field.fieldgroup.inline-tripple.large-middle .fieldgroup-field {
    width:50%;
}


@media only screen and (max-width : 480px) {
    form .field.fieldgroup.inline-pair:not(.non-responsive) .fieldgroup-field.first,
    form .field.confirmedpassword.inline-pair:not(.non-responsive) .fieldgroup-field.first,
    form .field.fieldgroup.inline-pair.small-right:not(.non-responsive) .fieldgroup-field.first,
    form .field.fieldgroup.inline-pair.small-left:not(.non-responsive) .fieldgroup-field.first,
    form .field.fieldgroup.inline-pair.medium-right:not(.non-responsive) .fieldgroup-field.first,
    form .field.fieldgroup.inline-pair.medium-left:not(.non-responsive) .fieldgroup-field.first,
    form .field.fieldgroup.inline-tripple:not(.non-responsive) .fieldgroup-field,
    form .field.fieldgroup.inline-tripple:not(.non-responsive) .fieldgroup-field.first,
    form .field.fieldgroup.inline-tripple:not(.non-responsive) .fieldgroup-field.last {
        margin-bottom:20px;
    }
    form .field.fieldgroup.inline-pair:not(.non-responsive) .fieldgroup-field,
    form .field.confirmedpassword.inline-pair:not(.non-responsive) .field.text.password,
    form .field.fieldgroup.inline-pair.small-right:not(.non-responsive) .fieldgroup-field.first,
    form .field.fieldgroup.inline-pair.small-right:not(.non-responsive) .fieldgroup-field.last,
    form .field.fieldgroup.inline-pair.small-left:not(.non-responsive) .fieldgroup-field.first,
    form .field.fieldgroup.inline-pair.small-left:not(.non-responsive) .fieldgroup-field.last,
    form .field.fieldgroup.inline-pair.medium-right:not(.non-responsive) .fieldgroup-field.first,
    form .field.fieldgroup.inline-pair.medium-right:not(.non-responsive) .fieldgroup-field.last,
    form .field.fieldgroup.inline-pair.medium-left:not(.non-responsive) .fieldgroup-field.first,
    form .field.fieldgroup.inline-pair.medium-left:not(.non-responsive) .fieldgroup-field.last,
    form .field.fieldgroup.inline-tripple:not(.non-responsive) .fieldgroup-field,
    form .field.fieldgroup.inline-tripple:not(.non-responsive) .fieldgroup-field.first,
    form .field.fieldgroup.inline-tripple:not(.non-responsive) .fieldgroup-field.last {
        float:none;
        width:100%;
    }
    form .field.fieldgroup.inline-pair:not(.non-responsive) .fieldgroup-field.first,
    form .field.fieldgroup.inline-pair:not(.non-responsive) .fieldgroup-field.last,
    form .field.confirmedpassword.inline-pair:not(.non-responsive) .middleColumn .field.text.password:first-child,
    form .field.confirmedpassword.inline-pair:not(.non-responsive) .middleColumn .field.text.password:last-child,
    form .field.fieldgroup.inline-tripple:not(.non-responsive) .fieldgroup-field,
    form .field.fieldgroup.inline-tripple:not(.non-responsive) .fieldgroup-field.first,
    form .field.fieldgroup.inline-tripple:not(.non-responsive) .fieldgroup-field.last {
        padding-right:0;
        padding-left:0;
    }
    form .field.fieldgroup.inline-tripple {
        margin-right:0;
        margin-left:0;
    }
}

/* fix for the jquery time picker */
form .ui-timepicker-table * {
    box-sizing:content-box;
}
form .ui-autocomplete {
    height:200px; 
    overflow-y:scroll; 
    overflow-x:hidden;
}

/* fix for datetimepicker field */
form .field.datetime.fieldgroup {
    overflow-y:hidden;
}
form .field.datetime.fieldgroup .middleColumn {
    float:none;
    width:100%;
    overflow:hidden;
}
form .field.datetime.fieldgroup .middleColumn .field {
    width:50%;
    float:left;
    padding-left:10px;
}
form .field.datetime.fieldgroup .middleColumn .field:first-child {
    padding-right:10px;
    padding-left:0;
}

/*
    Silverstripe Form:
    1) add a single search field and a single action
    2) setAttribute("src",'< 32x32 icon url >') on the action
    3) addExtraClass('simple-search-form') on the form
*/
.simple-search-form {
    position:relative;
}
.simple-search-form fieldset {
    margin-right:46px;
}
.simple-search-form .btn-toolbar {
    position:absolute;
    right:0;
    top:5px;
    padding:0;
    margin:0;
}

/* 
    inline field icons
    icons for text fields - use 24 pixel images
*/
form input.field-icon,
form input.date[data-showcalendar="data-showcalendar"],
form input.timepicker {
    background-position:10px center;
    background-repeat:no-repeat;
    padding-left:44px;
}
form input.field-icon.title {
    background-image:url('../images/field-icons/title.png');
}
form input.field-icon.address {
    background-image:url('../images/field-icons/address.png');
}
form input.field-icon.google {
    background-image:url('../images/field-icons/google.png');
}
form input.field-icon.facebook {
    background-image:url('../images/field-icons/facebook.png');
}
form input.field-icon.search {
    background-image:url('../images/field-icons/search.png');
}
form input.field-icon.act {
    background-image:url('../images/field-icons/act.png');
}
form input.field-icon.date,
form input.date[data-showcalendar="data-showcalendar"] {
    background-image:url('../images/field-icons/date.png');
}
form input.field-icon.time,
form input.timepicker {
    background-image:url('../images/field-icons/time.png');
}
form input.field-icon.link {
    background-image:url('../images/field-icons/link.png');
}
form input.field-icon.price {
    background-image:url('../images/field-icons/price.png');
}



form.inline-flex-form {
    display:flex;
    width:100%;
    margin-bottom:15px;
}
form.inline-flex-form .field {
    margin:0 15px 0 0 ;
}
form.inline-flex-form .field input,
form.inline-flex-form .actions input {
    border-radius:6px !important;
}
form.inline-flex-form.flex-va .field {
}


form.form-inline {
    margin-bottom:15px;
    width:100%;
}
form.form-inline,
form.form-inline fieldset,
form.inline-flex-form,
form.inline-flex-form fieldset {
    display:flex;
}
form.form-inline fieldset,
form.form-inline .field,
form.inline-flex-form fieldset,
form.inline-flex-form .field {
    flex-grow: 1;
}
form.form-inline .field,
form.inline-flex-form .field {
    margin:0 15px 0 0 ;
}
form.form-inline .actions,
form.form-inline .btn-toolbar,
form.inline-flex-form .actions,
form.inline-flex-form .btn-toolbar {
    flex-grow: 0;
}


ul.optionset.self-highlighted {
}
ul.optionset.self-highlighted li {
    margin:0 8px 0 0 !important;
}
div.field.checkbox.self-highlighted input,
ul.optionset.self-highlighted input {
    display:none;
}
div.field.checkbox.self-highlighted label,
ul.optionset.self-highlighted label {
    color:#444;
    border:1px solid #AAA;
    background:#F4F4F4;
    padding:4px 12px;
    border-radius:8px;
    cursor:pointer;
    display:inline-block;
}
div.field.checkbox.self-highlighted input:checked + label,
ul.optionset.self-highlighted input:checked + label {
    color:#28a745;
    border-color:#28a745;
    background:#edfff1;
}
div.field.checkbox.self-highlighted.self-highlighted-red input:checked + label,
ul.optionset.self-highlighted.self-highlighted-red input:checked + label {
    color:#de1f1f;
    border-color:#de1f1f;
    background:#f9dfdf;
}