form fieldset div.field > label,
form fieldset div.field .fieldgroup-field > .fieldholder-small > label {
    font-size:0.9rem;
    display:inline-block;
    margin-bottom:4px;
}

/* 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="date"]:not(.form-control),
form input[type="time"]: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),
form input[type="url"]:not(.form-control),
form input[type="datetime-local"]: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"]:not([readonly="readonly"]):focus,
form input[type="date"]:not([readonly="readonly"]):focus,
form input[type="time"]:not([readonly="readonly"]):focus,
form input[type="number"]:not([readonly="readonly"]):focus,
form input[type="password"]:not([readonly="readonly"]):focus,
form input[type="search"]:not([readonly="readonly"]):focus,
form input[type="tel"]:not([readonly="readonly"]):focus,
form input[type="text"]:not([readonly="readonly"]):focus,
form input[type="url"]:not([readonly="readonly"]):focus,
form input[type="datetime-local"]:not([readonly="readonly"]):focus,
form textarea:not([readonly="readonly"]):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;
    outline: none;
}

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

form label {
    user-select:none;
}

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 6px 25px;
    line-height:1em;
    position:relative;
}
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;
    top:2px;
    margin-left:-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 0 8px;
}
/* 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 {
}
form .field.checkbox label {
    display:inline-block;
    line-height:1em;
    font-size:1rem;
}
form .field.checkbox label,
form .field.checkbox .description {
    padding-left:25px;
}
form .field.checkbox input[type="checkbox"]{
    position:absolute;
    margin:5px 0 0 0;
    line-height:1em;
}

/* field descriptions, right titles, etc */
form .field .description,
form .right-title,
form label.right {
    font-size:0.85em;
    display:block;
    font-weight:normal;
    margin-top:5px;
    user-select:none;
}
form .field .description,
form .right-title {
    color:#999;
}
form label.right {
    color:#666;
}

/* 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;
    }
}

/*
    Inline fields (flexbox style)
*/
form .field.fieldgroup.inline-flex > .middleColumn .fieldgroup-field,
form .field.userformsgroup.inline-flex > .middleColumn .fieldgroup-field {
    margin-bottom:15px;
}
@media (min-width: 576px) {
    form .field.fieldgroup.inline-flex > .middleColumn,
    form .field.userformsgroup.inline-flex > .middleColumn {
        display:flex;
        --bs-gutter-x: 1rem;
        margin:0 calc(-.5 * var(--bs-gutter-x));
    }
    form .field.fieldgroup.inline-flex > .middleColumn .fieldgroup-field,
    form .field.userformsgroup.inline-flex > .middleColumn .field {
        flex-grow:5;
        margin:0 calc(var(--bs-gutter-x) * .5);
        width:50%;
    }
    form .field.fieldgroup.inline-flex > .middleColumn .fieldgroup-field:has(.no-grow),
    form .field.userformsgroup.inline-flex > .middleColumn .field:has(.no-grow) {
        flex-grow:0;
        width:auto;
    }
    form .field.optionset.inline-flex .middleColumn ul {
        display:flex;
        flex-wrap:wrap;
        --bs-gutter-x: 0.75rem;
        margin:0 calc(-.5 * var(--bs-gutter-x));
        width:100%;
    }
    form .field.optionset.inline-flex .middleColumn ul li {
        padding-left:25px;
        margin:0 calc(var(--bs-gutter-x) * .5) calc(var(--bs-gutter-x) * .5);
        width:45%;
    }
    form .field.optionset.inline-flex.inline-flex-cols-3 .middleColumn ul li {
        width:31%;
    }
    form .field.optionset.inline-flex.inline-flex-cols-4 .middleColumn ul li {
        width:22%;
    }
}

/*
    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 .inline-pair .middleColumn.fieldgroup,
form .inline-tripple .middleColumn.fieldgroup {
    overflow:hidden;
}
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%;
}

form .field.fieldgroup.inline-tripple.small-first .fieldgroup-field {
    width:40%;
}
form .field.fieldgroup.inline-tripple.small-first .fieldgroup-field.first {
    width:20%;
}


@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;
}

form .btn-toolbar {
}

/*
    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-form {
    display:flex;
    width:100%;
}
form.inline-form div.btn-toolbar {
    margin:0;
}
form.inline-form fieldset,
form.inline-form div.field {
    margin:0;
    flex-grow:1;
}
form.inline-form div.field input[type="text"] {
    border-radius:6px 0 0 6px !important;
}
form.inline-form div.btn-toolbar input[type="submit"] {
    margin-top:0;
    padding:0 .75rem;
    border-radius:0 6px 6px 0;
    border:none;
}
div.field.file.drag-and-drop:not(.show-label) label {
    display:none;
}
div.field.file.drag-and-drop input[type="file"] {
    padding: 30px 20px 30px 70px;
    background-color: #F9F9F9;
    border: 2px dashed #CCC;
    border-radius: 14px;
    width: 100%;
    margin-bottom: 5px;
    background-image: url('../images/file-upload-field.png');
    background-position: 15px center;
    background-repeat: no-repeat;
    background-size: 44px;
}
div.field.file.drag-and-drop input[type="file"],
div.field.file.drag-and-drop input[type="file"] * {
    cursor: pointer;
}
div.field.file.drag-and-drop input[type="file"]:hover {
    border-color:#999;
}
div.field.file.drag-and-drop input[type="file"]::file-selector-button {
    display:none;
}

/* user forms fixes */
.userformsgroup {
    border:none !important;
    padding:0 !important;
    border-radius:0;
    background:none;
}