/*===================================== uses: .element { @include prefixer(transform, scale(1.5), ms webkit spec); } =======================================*/ /*===================================== uses: .element { @include transform(scale(1.5)); } =======================================*/ /*===================================== uses: .element { @include transition(all 300ms ease); } =======================================*/ /*===================================== uses: .element { font-size:em(20px); } =======================================*/ /*===================================== uses: .element { line-height:lh(20px,24px); } =======================================*/ #form-page-layout { display: flex; justify-content: space-between; align-items: flex-start; } #form-page-layout > * { display: block; width: 100%; } #form-page-layout .form-page-left { max-width: 45%; } #form-page-layout .form-page-right { max-width: 50%; } .form_full, .centeredForm { width: 700px; max-width: 100%; margin: 0px auto; clear: both; } .form_full:after, .centeredForm:after { content: "."; display: block; height: 0; clear: both; zoom: 1; visibility: hidden; } fieldset { border: none; padding: 0; margin: 0; width: 100%; } .formMessage { font-weight: bold; text-align: center; margin-bottom: 20px; } .formSubMessage { font-weight: bold; text-align: left; margin: 20px 0 5px 95px; } .form-error { border: 2px solid #c00000; background: #f0f0f0; color: #c00000; padding: 20px; font-size: 16px; font-weight: bold; } div.required > label:after { content: " *"; color: #c00000; margin-right: -10px; font-size: 1.5em; line-height: 35%; display: inline-block; } div.field { margin-bottom: 8px; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; } div.field > * { display: block; width: 100%; } div.field > label { max-width: 30%; line-height: 18px; color: #353231; margin: 0px; padding-top: 10px; } div.field > label.left { text-align: right; } div.field > .description { display: block; margin-left: 35%; font-size: 0.9em; max-width: 65%; } div.field > div { max-width: 65%; min-height: 30px; } div.field > div select, div.field > div textarea, div.field > div input[type=text], div.field > div input[type=email], div.field > div input[type=number], div.field > div input[type=password] { width: 100%; height: auto; min-height: 43px; padding: 0 10px; border: 1px #ccc solid; color: #353231; margin-bottom: 2px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } div.field > div select { padding-top: 10px; padding-bottom: 10px; } div.field > div input[type=text]:focus, div.field > div input[type=email]:focus, div.field > div input[type=number]:focus, div.field > div input[type=password]:focus, div.field > div select:focus, div.field > div textarea:focus { border-color: #999; outline: none; box-shadow: 0 0 3px 1px #999; } div.field > div option { background: #FFF; } div.field > div textarea { resize: vertical; padding: 10px; } div.field > div .optionset { list-style: none; margin: 0; padding: 0; } div.field > div .optionset li { margin: 0; padding: 0; display: flex; align-items: flex-start; } div.field > div .optionset li > input { display: block; margin: 6px 0 0; } div.field > div .optionset li > label { display: block; flex-grow: 1; padding-left: 10px; } div.field.checkbox { justify-content: flex-start; flex-wrap: nowrap; } div.field.checkbox > input { margin-left: 35%; margin-right: 0; width: auto; } div.field.checkbox > label { text-align: left !important; max-width: none; padding-top: 0px; padding-left: 10px; } div.field.form-group--no-label { justify-content: flex-end; } input.text.readonly, input.text.readonly:focus, input.text.readonly:active, input.text.readonly:hover { box-shadow: none !important; border: none !important; outline: none !important; cursor: default; } .field.full-width-field > div { max-width: none; } span.readonly { display: block; width: auto; min-height: 30px; padding-top: 6px; line-height: 18px; font-size: 14px; color: #039; } /* input.currency { background:url(/resources/themes/mysite/images/icons/money_dollar.png) no-repeat center left #ffffff !important; text-indent:15px !important; } */ .hpf { display: none; } .radio_input { float: left; width: auto; padding-right: 30px; height: 30px; line-height: 30px; } .radio_input:last-child { padding-right: 0px !important; } .radio_input input { margin: 8px 5px 0px 0px !important; padding: 0px !important; float: left !important; } .radio_input label { width: auto !important; clear: none !important; cursor: pointer; } .checkbox_ct > label { margin-bottom: -22px; margin-left: 30px; } .checkbox_ct > input { float: left; clear: both; } span.message.required { color: #c00000; display: block; clear: both; text-align: left; } label.error { color: #c00000; } .message { text-align: center; font-weight: 700; font-size: 0.8823529412em; margin-bottom: 20px; display: block; clear: both; } .message.good { color: #757c5d; } .message.bad { color: #892516; } .Actions, .btn-toolbar { margin-left: 35%; } input[type="submit"] { color: #FFF; font-size: 16px; outline: none; border: none; padding: 8px 15px; background: #666; margin-bottom: 3px; } input[type="submit"]:hover, input[type="submit"]:focus { cursor: pointer; background: #000; } .middleColumn label { font-size: 16px; } .stacked > .fieldgroup, .fieldgroup-field > .stacked { min-height: auto; } .stacked > .fieldgroup > .fieldholder-small, .stacked > .fieldgroup > .fieldgroup-field, .fieldgroup-field > .stacked > .fieldholder-small, .fieldgroup-field > .stacked > .fieldgroup-field { width: 100%; max-width: none; } .stacked > .fieldgroup label.right, .fieldgroup-field > .stacked label.right { font-style: italic; margin: 0; text-align: left !important; font-size: 14px; float: none; display: block; } .stacked > .fieldgroup input.required + label.right:after, .stacked > .fieldgroup select.required + label.right:after, .stacked > .fieldgroup textarea.required + label.right:after, .fieldgroup-field > .stacked input.required + label.right:after, .fieldgroup-field > .stacked select.required + label.right:after, .fieldgroup-field > .stacked textarea.required + label.right:after { content: " *"; color: #c00000; } /* Headers */ .form-header { clear: both; width: 65%; float: right; padding: 0 0 5px 0; margin: 20px 0 5px 0; border-bottom: solid 1px #2b3966; } /* Responsive Code */ .ui-widget { z-index: 500 !important; } @media (max-width: 800px) { #form-page-layout { flex-direction: column; } #form-page-layout .form-page-left, #form-page-layout .form-page-right { max-width: none; } #form_page_left, #form_page_right { max-width: none; } } @media (max-width: 600px) { div.field > * { max-width: none !important; text-align: left !important; } div.checkbox > input { margin-left: 0; float: left; } div.checkbox > label { padding-top: 0px !important; float: none; clear: none; padding-left: 20px; } h3.form-header { width: 100% !important; float: left !important; margin-bottom: 0px !important; } .stacked input.required + label.right { overflow: hidden; white-space: nowrap; font-size: 11px !important; } .Actions, .btn-toolbar { margin-left: 0; } } @media (min-width: 451px) { .stacked > .fieldgroup, .fieldgroup-field > .stacked { display: flex; flex: 1 1 0px; } .stacked > .fieldgroup > .fieldholder-small, .stacked > .fieldgroup > .fieldgroup-field, .fieldgroup-field > .stacked > .fieldholder-small, .fieldgroup-field > .stacked > .fieldgroup-field { margin-left: 2%; flex-grow: 1; } .stacked > .fieldgroup > .fieldholder-small:first-child, .stacked > .fieldgroup > .fieldgroup-field:first-child, .fieldgroup-field > .stacked > .fieldholder-small:first-child, .fieldgroup-field > .stacked > .fieldgroup-field:first-child { margin-left: 0; } } @media (max-width: 450px) { .centeredForm { width: 100% !important; } } /*# sourceMappingURL=/assets/_css/themes-mysite-css-form.css.map */