/* START FORMS */

option{cursor: pointer;}
option[aria-selected="true"]{
    background-color: #ccc;
}

.cover {
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:8;
}

.colorPickerHolder > .colorPickerTrigger{
    width: 30px;
    height: 30px;
    font-size: 0;
    display:inline-block;
    vertical-align:middle;
    border-radius:3px;
    box-shadow:1px 1px 3px #666;
}
.colorPickerHolder div.sketch-picker,
.colorPickerHolder div.chrome-picker{position:absolute;z-index:9;}

.form fieldset{
    border:1px solid #ccc;
    border-radius: 5px;
    padding:15px;
    box-shadow: -2px 2px 3px #ccc;
    width: 100%;
}
.form fieldset > legend{
    display: inline-block;
    padding: 0 10px;
    width:auto; 
    background: #fff;
}

.form fieldset.alert{
    border-color: red;
}

.form fieldset.alert legend{
    color: red;
}

.form .moneyHolder{position: relative;}
.form .moneyHolder:after{
    content:"€";
    position: absolute;
    left: 0;
    bottom: 6px;
}
.form .moneyHolder > div > label[data-shrink="false"],
.form .moneyHolder > div > div,
.form .moneyHolder input{text-indent:12px;}

.form .gramsHolder, .form .millilitersHolder {position: relative;}
.form .gramsHolder:after{
    content:"gr";
    position: absolute;
    right: 40px;
    bottom: 6px;
}

.form .millilitersHolder:after{
    content:"ml";
    position: absolute;
    right: 40px;
    bottom: 6px;
}

.form .perHolder{position: relative;}
.form .perHolder:after{
    content:"%";
    position: absolute;
    left: 0;
    bottom: 6px;
}
.form .perHolder input{text-indent:15px;}

.form .clearField{
    position: absolute;
    bottom: 5px;
    right: 15px;
    z-index: 1;
    cursor: pointer;
    width: 30px;
    text-align: center;
    background: #fff;
}

.form .radioButton{width:50%;margin:0;}
.form .radioButton > div > div{text-align: center;}

.form .noFont{font-size:0;}

/*.form .fieldHolder.selectField{max-height:72px;margin-top:10px;}
.form .fieldHolder.selectField label{margin-bottom:0;}
.form .fieldHolder.selectField > div{margin-top:-3px;}*/

.form .fieldHolder.hasError hr,
.form .fieldHolder.hasError input[type=text].error,
.form input[type=text].error,
.form .fieldHolder.hasError input[type=password].error,
.form input[type=password].error,
.form .fieldHolder.hasError input[type=email].error,
.form input[type=email].error,
.form .fieldHolder.hasError .fakeFile,
.form .fieldHolder.hasError input[type=file].error,
.form input[type=file].error,
.form .fieldHolder.hasError input[type=radio].error,
.form input[type=radio].error,
.form .fieldHolder.hasError input[type=checkbox].error,
.form input[type=checkbox].error,
.form .fieldHolder.hasError input[type=radio].error + div,
.form input[type=radio].error + div,
.form .fieldHolder.hasError input[type=checkbox].error + div,
.form input[type=checkbox].error + div,
.form .fieldHolder.hasError select.error,
.form select.error,
.form .fieldHolder.hasError textarea.error,
.form textarea.error{
    border-color:red !important;
}
.form .fieldHolder.hasError label{color:red !important;}
.form label{color:#aaa;}

/* - START Error Message */

.form .fieldHolder.hasError{
    position:relative;
}

.errorMessage,
.form .fieldHolder.hasError .errorMessage{
    padding: 0 0 0 10px;
    color: red;
    font-size: 12px;
    margin:0;
    bottom:-18px;
    position:absolute;
    white-space: nowrap;
}

.errorMessageHolder
{
    position:relative;
}

.errorMessageHolder > .errorMessage
{
    position: absolute;
    width: auto;
    background:red;
    height:auto;
    padding:3px 10px;
    font-size:12px;
    border-radius:4px;
    color: #fff;
    box-shadow: 1px 1px 2px #575757;
}

.errorMessageHolder > .errorMessage:after
{
    content: "\f0d7";
    font-family:"FontAwesome";
    bottom: -12px;
    font-size: 20px;
    position: absolute;
    color: red;
    text-shadow: 1px 1px 1px #575757;
}

.errorMessageHolder > .errorMessage > p
{
    margin:0;
    white-space:nowrap;
}

/* - END Error Message */

/* END FORMS */