/* 
------------------------------------------------------------------------
form2.css
------------------------------------------------------------------------
*/

.form-grid .y1 {
    height: 18px
}

.form-grid .y2 {
    height: 36px
}

.form-grid .y3 {
    height: 54px
}

.form-grid .y4 {
    height: 72px
}

.form-grid .y5 {
    height: 90px
}

.form-grid .y6 {
    height: 108px
}

.form-grid .y7 {
    height: 126px
}

.form-grid .y8 {
    height: 144px
}

.form-grid .y9 {
    height: 162px
}

.form-grid .y10 {
    height: 204px
}

.touch .form-grid .y10 {
    height: 54px
}

.form-grid .x1 {
    min-width: 216px
}

.form-grid .x2 {
    min-width: 456px
}

.form-grid .x3 {
    min-width: 696px
}

.form-grid .x4 {
    min-width: 936px
}

.form-grid {
    margin: 18px 0
}

.ajaxcomponent .form-grid {
    margin: 0
}

.form-one-column {
    max-width: 240px
}

.form-two-columns {
    max-width: 480px
}

.form-three-columns {
    max-width: 720px
}

.form-four-columns {
    max-width: 960px
}

.form-grid .components {
    margin-right: 0
}

.form-grid .components.centred {
    text-align: center
}

.form-grid .component {
    float: left;
    margin-right: 24px;
    margin-bottom: 12px;
    position: relative;
    text-align: left
}

.form-grid .component.hidden {
    display: none
}

.form-grid .after-last-component {
    clear: both
}

label {
    padding-bottom: 5px;
    font-weight: 500;
    font-size: 16px;
    color: #79797b
}

.form-not-editable .label {
    font-weight: bold
}

.form-editable .label {
    font-weight: bold;
    padding-bottom: 4px;
}

.form-grid .content {
    float: left;
    margin-right: 20px;
    margin-top: 2px;
    font-weight: 400;
    font-size: 16px;
    color: #79797b;
    position: relative
}

.form-not-editable .content,
.form-editable .text .content {
    height: 26px;
    width: 100%;
    border-width: 1px;
    background: #fff;
    color: #242424;
    border: none;
    padding: 0;
    font-size: 18px ;
    margin-top: 3px
}

.form-not-editable .content input:placeholder-shown + .content {
    border-color: red;
  }

.form-not-editable .content.nocontentbackground {
    background: #fff;
    color: #79797b
}

.form-not-editable .content.nocontentbackground textarea.readonly {
    color: #79797b
}

.text .content span {
   
}

.form-not-editable .text .content span {
    padding-left:0!important;
}

.form-grid .textfield.x1 input,
.form-grid .textfield.x1 textarea,
.form-grid .selectfield.x1 select {
    width: 204px
}

.form-grid .textfield.x2 input,
.form-grid .textfield.x2 textarea,
.form-grid .selectfield x2 select {
    width: 444px
}

.form-grid .textfield.x3 input,
.form-grid .textfield.x3 textarea,
.form-grid .selectfield x3 select {
    width: 684px
}

.form-grid .textfield.x4 input,
.form-grid .textfield.x4 textarea,
.form-grid .selectfield x4 select {
    width: 924px
}

.form-grid .multiselect {
    margin-bottom: 8px
}

div.component div.hint.required,
div.component.invalid div.hint.numeric {
    position: absolute;
    right: -10px;
    bottom: -4px;
    width: 19px;
    height: 16px;
    background: url('../images/forms/field-sprite.png') no-repeat transparent;
    background-position: 0 0;
    z-index: 3
}

div.component.datefield div.hint.required,
div.component.invalid div.hint.numeric {
    right: 14px;
    bottom: -10px
}

div.component.invalid div.hint.required,
div.component.invalid div.hint.numeric {
    background-position: -19px 0
}

div.component.multiselect div.hint.required {
    right: 6px;
    bottom: 0
}

@-moz-document url-prefix() {
    div.component.multiselect div.hint.required {
        right: -42px;
        bottom: -2px
    }
}

#firstStepOfProcessForm .button-bar,
#secondStepOfProcessForm .button-bar,
#thirdStepOfProcessForm .button-bar,
#fourthStepOfProcessForm .button-bar {
    border-top: none !important
}

.button-bar {
    border-top: 1px solid #ddd;
    padding-top: 3px;
    margin-top: 6px;
    text-align: center
}

.centredColumnForm .button-bar {
    text-align: left;
    border-top: 0
}

.form input.readonly,
.form textarea.readonly {
    background: #fff;
    color: #242424!important;
    border: 1px solid #fff!important;
    padding: 0!important;
    font-size: 18px !important;
}

.form input.readonly.black {
    background: black
}

.form input.readonly.white {
    background: white
}

.form input.readonly.grey {
    background: grey
}

.form input.readonly.green {
    background: green
}

.form input.readonly.amber {
    background: amber
}

.form input.readonly.red {
    background: red
}

.form input.readonly.pink {
    background: pink
}

.form input.readonly.blue {
    background: blue
}

.form input.readonly.lime {
    background: lime
}

.form input.readonly.orange {
    background: orange
}

.form input.readonly.aqua {
    background: aqua
}

.form input.readonly.bisque {
    background: bisque
}

.form input.readonly.plum {
    background: plum
}

.form input.readonly.yellow {
    background: #ffff80
}

.form .component input.fontsizelarge {
    font-size: 125%
}

.form .component input.fontweightbold {
    font-weight: bold
}

.rollableFormArea {
    display: block;
    clear: both
}

.rollerblind {
    background-color: #999;
    clear: both;
    margin-right: 24px;
    height: 10px;
    margin-bottom: 22px;
    text-align: center;
    line-height: 10px
}

.rollerblind a img {
    border: 0;
    height: 10px
}

.form-grid .compressed-button {
    float: left;
    position: relative;
    margin-right: 24px
}

.ajaxcomponent .form-grid .compressed-button {
    float: none
}

.form-grid .compressed-button input,
.form-grid .compressed-button button {
    margin-top: 18px
}

#search_bean #query {
    margin-top: 2px
}

.component input[type=text],
.content input[type=checkbox],
.content input[type=password],
.content input[type=number] {
    border: 1px solid #9b9b9b;
    padding: 4px;
    font-size: 16px;
    color: #58585a;
    border-radius: 4px;
}

.component input[type=text]:hover, .content input[type=checkbox]:hover, .content input[type=password]:hover, .content input[type=number]:hover, .component select:hover {
    border-color:#000;
}
.component input[type=text]:focus, .content input[type=checkbox]:focus, .content input[type=password]:focus, .content input[type=number]:focus, .component select:focus {
    box-shadow: inset 0px 0px 0px 2px #378ADF;
    border-color: #378ADF;
}

.content input[type=checkbox] {
    width: 20px
}

.component .form input[type=text].readonly,
.component .form textarea.readonly {
    background: #ddd;
    color: #003
}

.component select {
    border: 1px solid #9b9b9b;
    line-height: 25px;
    background: #fff;
    height: 29px;
    font-size: 16px;
    color: #58585a;
    padding: 4px;
    border-radius: 4px;
}

.component select[multiple] {
    height: auto
}

.touch .component select[multiple] {
    height: 25px
}

button,
input[type="submit"],
input[type="button"],
a.icon {
    height: 29px;
    padding: 0 30px;
    margin-right: 4px;
    margin-left: 10px
}

button:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
a.icon:focus {
    box-shadow: inset 0px 0px 0px 2px #378adf;
}

#search_bean a.icon,
#search_bean input[type="submit"] {
    margin-right: 0;
    margin-left: 0
}

.button-bar button,
.button-bar input[type="submit"],
.button-bar input[type="button"],
.button-bar a.icon {
    margin-bottom: 4px
}

.collapse input[type="submit"] {
    margin: 0
}

td input[type="submit"] {
    margin-top: 0
}

button,
input {
    vertical-align: middle
}

img.button {
    vertical-align: middle;
    margin-top: 18px;
    cursor: hand;
    cursor: pointer
}

fieldset.radiobox,
fieldset.checkbox {

}

.content fieldset.radiobox input[type=radio],
.content fieldset.checkbox input[type=checkbox] {
    margin-right: 6px
}

.component.checkbox.widget .content {
    width: 100%
}

.component.checkbox.widget {
    margin-bottom: 20px
}

.ui-autocomplete {
    max-height: 200px;
    overflow-y: scroll;
    overflow-x: hidden
}

.centredColumnForm {
    margin: 0 auto;
    width: 300px
}

.centredColumnForm .form-grid .component {
    margin-bottom: 10px
}

div.part-thumb img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto
}

#cboxLoadedContent img {
    max-width: 100%;
    max-height: 100%
}

.signature-input {
    margin-top: 5px;
    border-style: solid;
    border-width: 2px
}

div.image-display div.content {
    height: 100%;
    width: 100%
}

div.image-display img {
    max-height: 100%;
    max-width: 100%
}

.form label {
    margin: 0
}

.form input.readonly.no-border {
    border-width: 0
}

div.area.dynamic-size {
    display: table-cell
}