/**
 * (en) Uniform design of form elements
 * (de) Einheitliche Standardformatierungen für Formular-Elemente
 *
 * @copyright			Copyright 2015, crossbase mediasolution GmbH
 * @version				1.0
 */

@media screen {

    /* (en) format form element label and containers */
    /* (de) Formatierung von Form-Element Bezeichnungen und Containern */
    /*------------------------------------------------------------------------------------------------------*/
    label {
        position: relative;
    }

    label.float-left {
        margin-right: 4px;
        float: left;
    }

    label.float-left + span,
    .select2-style-label {
        font-size: 20px;
        line-height: 28px;
    }

    .cat-nav label.float-left + span {
        font-size: 16px;
        line-height: 23px;
    }

    .select2-style-label {
        padding: 6px 0 0 0;
    }

    .select2-style-label label {
        display: inline;
    }

    .select2-style-input {
        display: block;
        position: relative;
        font-size: 100%;
        line-height: 24px;
        overflow: hidden;
        padding: 7px 10px 8px 10px;
        margin-bottom: 30px;
        background: #fff;
        color: #000;
        border: 1px solid #a5a6a8;
    }

    .select2-style-input.icon-button {
        padding-right: 44px;
    }

    /* (en) format info icons in form element containers	*/
    /* (de) Formatierung von Info-Icons in Form-Element Containern */
    /*------------------------------------------------------------------------------------------------------*/
    .select2-style-input.inline-icon {
        padding: 4px 8px 4px 32px;
    }

    .select2-style-input.inline-icon .fa {
        position: absolute;
        left: 12px;
        top: 6px;
    }

    /* (en) format radio und checkbox elements	*/
    /* (de) Formatierung von Radio- und Checkbox-Elementen */
    /*------------------------------------------------------------------------------------------------------*/
    label.checkbox,
    label.radio {
        margin: 0 15px 15px 0;
    }

    label.radio {
        width: 28px;
        height: 28px;
    }

    label.radio.image-select {
        margin-top: 120%;
    }

    input[type="radio"],
    input[type="checkbox"] {
        position: absolute;
        left: 4px;
        top: 4px;
        opacity: 0;
        cursor: pointer;
    }

    input[type="radio"] + span,
    input[type="checkbox"] + span {
        cursor: pointer;
    }

    input[type="radio"] + span:before,
    input[type="checkbox"] + span:before {
        font-family: 'FontAwesome';
        width: 23px;
        height: 23px;
        display: inline-block;
        border: 1px solid #a5a6a8;
        background-color: #fff;
        -webkit-transition: color 0.3s ease 0s;
        -moz-transition: color 0.3s ease 0s;
        -o-transition: color 0.3s ease 0s;
        transition: color 0.3s ease 0s;
        text-align: center;
    }

    .invalid input[type="radio"] + span:before,
    .invalid input[type="checkbox"] + span:before {
        background-color: #ff0000;
    }

    input[type="radio"] + span:hover:before,
    input[type="checkbox"] + span:hover:before {
        /* (de) nicht verwendet, da Mobile Safari Checkboxen im Hintergrund nicht erkennt */
        /* (de) not used because mobile safari does not recognize checkboxes in background */
        /*color: #ea6621;*/
    }

    input[type="radio"] + span:before {
        content: "\f111"; /* circle-blank */
        color: #fff;
        border-radius: 25px;
        font-size: 15px;
        line-height: 24px;
    }

    input[type="radio"]:checked + span:before {
        border-color: #ea6621;
        color: #ea6621;
    }

    input[type="radio"]:disabled + span:before {
        border-color: #a5a6a8;
        color: #e8e9ea;
        background-color: #e8e9ea;
    }

    input[type="radio"]:checked:disabled + span:before {
        border-color: #a5a6a8;
        color: #a5a6a8;
        background-color: #e8e9ea;
    }

    input[type="checkbox"] + span:before {
        content: "\f00c";
        font-size: 18px;
        line-height: 24px;
        color: #fff;
    }

    .invalid input[type="checkbox"] + span:before {
        color: #ff0000;
    }

    input[type="checkbox"]:checked + span:before {
        border-color: #ea6621;
        color: #ea6621;
    }

    input[type="checkbox"]:disabled + span:before {
        border-color: #a5a6a8;
        color: #e8e9ea;
        background-color: #e8e9ea;
    }

    input[type="checkbox"]:checked:disabled + span:before {
        border-color: #a5a6a8;
        color: #a5a6a8;
        background-color: #e8e9ea;
    }

    .cat-nav label.checkbox,
    .cat-nav label.radio {
        margin: 0 15px 0 0;
    }


    .cat-nav input[type="radio"] + span:before,
    .cat-nav input[type="checkbox"] + span:before {
        border: none;
        width: 25px;
        height: 25px;
    }

    .cat-nav input[type="checkbox"] + span:before {
        line-height: 26px;
    }

    /* (en) basic format of form elements */
    /* (de) Grundlagende Formatierung von Form-Elementen */
    /*------------------------------------------------------------------------------------------------------*/
    .input-box-group {
        margin-bottom: 30px;
    }

    .select2-style-input input,
    .select2-style-input input:focus,
    .select2-style-input input:hover,
    .select2-style-input select,
    .select2-style-input select:focus,
    .select2-style-input select:hover,
    .select2-style-input textarea,
    .select2-style-input textarea:focus,
    .select2-style-input textarea:hover {
        line-height: 24px;
        background: transparent;
        border: none;
        width: 100%;
        padding: 0;
        margin: 0;
        font-family: "TheSansExtraLight", "cnExtraLight", "Verdana", sans-serif;;
        font-size: 16px;
        color: #000;
    }

    .select2-style-input.textarea textarea,
    .select2-style-input.textarea:focus textarea,
    .select2-style-input.textarea:hover textarea {
        height: 100px;
    }

    .select2-style-input select,
    .select2-style-input select:focus,
    .select2-style-input select:hover {
        padding: 0;
        height: 24px;
        line-height: 24px;
    }

    .invalid,
    .invalid * {
        border-color: #ff0000 !important;
        color: #ff0000 !important;
    }

    /* (en) format of button elements */
    /* (de) Grundlagende Formatierung Schaltflächen-Elementen */
    /*------------------------------------------------------------------------------------------------------*/
    br + .button {
        margin-top: 6px;
    }

    a.button,
    button.button,
    span.button {
        display: inline-block;
    }

    .select2-style-button a.button,
    .select2-style-button button.button,
    .select2-style-button span.button {
        margin-right: 0;
    }

    .select2-style-button-box a.button,
    .select2-style-button-box button.button,
    .select2-style-button-box span.button {
        display: inline-block;
        margin: 0 24px 24px 0;
    }

    .select2-style-button-box-right {
        text-align: right;
    }

    .ym-g66 + .select2-style-button-box-right.position-bottom-right a.button,
    .ym-g66 + .select2-style-button-box-right.position-bottom-right button.button,
    .ym-g75 + .select2-style-button-box-right.position-bottom-right a.button,
    .ym-g75 + .select2-style-button-box-right.position-bottom-right button.button {
        margin: 0;
    }

    .select2-style-button-box-right a.button,
    .select2-style-button-box-right button.button,
    .select2-style-button-box-right span.button {
        display: inline-block;
        margin: 0 0 30px 30px;
        min-width: 244px;
        text-align: center;
    }

    .select2-style-button-box-right.position-bottom-right a.button,
    .select2-style-button-box-right.position-bottom-right button.button,
    .select2-style-button-box-right.position-bottom-right span.button {
        display: block;
        margin: 0 0 30px 0;
        min-width: 244px;
        text-align: center;
    }

    .select2-style-button-box-with-text a.button,
    .select2-style-button-box-with-text button.button,
    .select2-style-button-box-with-text span.button {
        display: inline-block;
        margin: 0 0 24px 0;
    }

    .select2-style-button-100-center {
        text-align: center;
        max-width: 270px;
        margin-bottom: 30px;
    }

    .select2-style-button-100-left a.button,
    .select2-style-button-100-left button.button,
    .select2-style-button-100-left span.button,
    .select2-style-button-100-center a.button,
    .select2-style-button-100-center button.button,
    .select2-style-button-100-center span.button {
        display: block;
        margin: 0;
    }

    .select2-style-button-with-input {
        display: inline-block;
        position: absolute;
        right: 0;
        top: 0;
    }

    a.button,
    button.button,
    span.button {
        font-family: "TheSansPlain", "Verdana", sans-serif;
        padding: 6px 12px;
        background: #ea6621;
        color: #ffffff;
        border: 1px solid #ea6621;
        -webkit-transition: background-color 0.3s ease 0s;
        -moz-transition: background-color 0.3s ease 0s;
        -o-transition: background-color 0.3s ease 0s;
        transition: background-color 0.3s ease 0s;
    }

    a.button.outline,
    button.button.outline,
    span.button.outline {
        padding: 6px 12px;
        background: transparent;
        color: #565656;
        border: 1px solid #a5a6a8;
        -webkit-transition: background-color 0.3s ease 0s;
        -moz-transition: background-color 0.3s ease 0s;
        -o-transition: background-color 0.3s ease 0s;
        transition: background-color 0.3s ease 0s;
    }

    a.button:hover,
    a.button:active,
    button.button:hover,
    button.button:active,
    span.button:hover,
    span.button:active {
        background: #ea6621;
        color: #ffffff;
    }

    a.button.outline:hover,
    a.button.outline:active,
    button.button.outline:hover,
    button.button.outline:active,
    span.button.outline:hover,
    span.button.outline:active {
        background: #a5a6a8;
        color: #ffffff;
    }


    span.button-inactive,
    a.button-inactive,
    button.button-inactive {
        padding: 4px 12px;
        background: #fff;
        color: #000;
        user-select: none;
        -o-user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        cursor: default;
    }

    span.inactive {
        color: #a5a6a8;
    }

    label.inactive {
        border: 1px solid #a5a6a8;
    }

    /* (en) format file upload element */
    /* (de) Formatierung des File-Upload Elements */
    /*------------------------------------------------------------------------------------------------------*/
    .select2-style-button-with-file-upload,
    .select2-style-button-with-file-upload a.button,
    .select2-style-button-with-file-upload button.button {
        display: inline-block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        max-width: 270px;
        padding: 8px 0;
        text-align: center;
        background: #fff;
        color: #565656;
    }

    .select2-style-button-with-file-upload a.button,
    .select2-style-button-with-file-upload button.button{
        border: none;
    }

    .select2-style-input.upload-button {
        max-width: 250px;
        padding: 7px 10px 8px 10px;
    }

    .select2-style-button-with-file-upload a.button:hover,
    .select2-style-button-with-file-upload button.button:hover {
        background: #a5a6a8;
        color: #fff;
    }

    .select2-style-input input#file-upload-element {
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
        padding: 0;
        font-size: 15px;
        height: 40px;
        opacity: 0;
        filter: alpha(opacity=0);
        cursor: pointer !important;
    }

    /* (en) format select element */
    /* (de) Formatierung des Select-Elements */
    /*------------------------------------------------------------------------------------------------------*/
    .custom-select {
        position: relative;
        z-index: 1;
        padding: 4px 8px;
        height: 24px;
        display: block;
    }

    .custom-select:before {
        display: block;
        font-family: 'FontAwesome';
        font-size: 1em;
        height: 100%;
        line-height: 2.4em;
        padding: 0 0.625em;
        position: absolute;
        top: 0;
        right: 0;
        text-align: center;
        width: 1em;
        z-index: -1;
        color: #000;
    }

    .custom-select select {
        background-color: transparent;
        display: inline-block;
        width: 100%;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .custom-select select::-ms-expand {
        display: none; /* to ie 10 */
    }

    .custom-select select:focus {
        outline: none;
    }

    :-moz-any(.custom-select):before {
        /* this is necessary for overcome the caret default browser */
        background: #fff;
        pointer-events: none; /* https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events	*/
        z-index: 1; /* this is necessary for overcome the pseudo element */
    }

    /* (en) format elements in form GUIs */
    /* (de) Formatierung von Elementen in Formular-GUIs */
    /*------------------------------------------------------------------------------------------------------*/
    .grid-nomargin-wrapper {
        margin: -24px -24px 0 -24px;
    }

    .grid-element-wrapper {
        margin: -12px -12px 0 -12px;
    }

    .grid-element-wrapper + h3 {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        margin-top: 0;
    }

    .grid-element-wrapper .float-col label,
    .grid-element-wrapper .float-col span,
    .grid-element-wrapper .select2-container,
    .grid-element-wrapper .select2-style-input,
    .grid-element-wrapper .select2-style-button .button,
    .grid-element-wrapper .select2-style-button-box .button,
    .grid-element-wrapper .select2-style-button-box-right .button,
    .grid-element-wrapper .select2-style-button-100-center .button {
        margin-bottom: 12px;
    }

    .grid-element-wrapper .select2-style-button .button,
    .grid-element-wrapper .select2-style-button-box .button,
    .grid-element-wrapper .select2-style-button-box-right .button,
    .grid-element-wrapper .select2-style-button-100-center .button {
        margin-left: 12px;
    }

    .grid-nomargin-wrapper .accordion,
    .grid-nomargin-wrapper .accordion .pane,
    .grid-nomargin-wrapper .accordion h3.h3accordion:last-of-type {
        margin-bottom: 0;
    }

    .grid-nomargin-wrapper .accordion > h3.h3accordion {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .grid-nomargin-wrapper .accordion .pane + h3.h3accordion,
    .grid-nomargin-wrapper .accordion .pane + h3.h3accordion.current {
        border-radius: 0;
    }

    .grid-element-wrapper .float-right {
        margin: 0;
    }

    .search-list .ym-wrapper.loading a.button,
    .search-list .ym-wrapper.loading button.button {
        width: 246px;
        margin: 0 auto;
        text-transform: uppercase;
    }

}

/*------------------------------------------------------------------------------------------------------*/
/* (en) Media Query 1279 */
/* (de) Media Query 1279 */
/*------------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 1279px) {

    label.float-left + span,
    .select2-style-label {
        font-size: 16px;
        line-height: 23px;
    }

    .select2-style-input {
        display: block;
        position: relative;
        font-size: 100%;
        line-height: 24px;
        overflow: hidden;
        padding: 5px 10px 5px 10px;
        margin-bottom: 30px;
        background: #fff;
        color: #000;
        border: 1px solid #a5a6a8;
    }

    .select2-style-button-box-right a.button,
    .select2-style-button-box-right span.button,
    .select2-style-button-box-right button.button,
    .select2-style-button-box-right.position-bottom-right a.button,
    .select2-style-button-box-right.position-bottom-right button.button,
    .select2-style-button-box-right.position-bottom-right span.button {
        margin: 0 0 30px 30px;
        min-width: 172px;
    }

    .select2-style-input.upload-button {
        max-width: 175px;
    }
}

/*------------------------------------------------------------------------------------------------------*/
/* (en) Media Query 979 */
/* (de) Media Query 979 */
/*------------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 979px) {

    .cat-nav .select2-style-button-100-center {
        margin: 122px 0 0 0;
    }

    a.button,
    span.button,
    button.button,
    a.button.outline {
        padding: 4px 12px 3px 12px;
    }

    label.float-left + span,
    .select2-style-label,
    .cat-nav label.float-left + span {
        font-size: 15px;
        line-height: 26px;
        margin-bottom: 0;
    }

    .select2-style-button-100-center,
    .select2-style-button-100-center.position-bottom-right {
        max-width: 215px;
    }

    .select2-style-input.upload-button {
        max-width: 195px;
        padding: 5px 10px;
    }

    .select2-style-button-box-right a.button,
    .select2-style-button-box-right button.button,
    .select2-style-button-box-right span.button,
    .select2-style-button-box-right.position-bottom-right a.button,
    .select2-style-button-box-right.position-bottom-right button.button,
    .select2-style-button-box-right.position-bottom-right span.button {
        margin: 0 0 15px 15px;
        min-width: 172px;
    }

    .select2-style-input.upload-button a.button.outline,
    .select2-style-input.upload-button button.button.outline {
        padding: 6px 0;
    }

    .select2-style-input,
    .input-box-group {
        margin-bottom: 15px;
    }

    label.checkbox, label.radio {
        margin: 0 15px 15px 0;
    }

}

/*------------------------------------------------------------------------------------------------------*/
/* (en) Media Query 759 */
/* (de) Media Query 759 */
/*------------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 759px) {


    .cat-nav .select2-style-button-100-center {
        margin: 15px 0 0 0;
    }

    .select2-style-button-100-center.position-bottom-right {
        position: static;
        margin: 0;
    }

    .select2-style-button-box-right {
        max-width: 215px;
    }

    .select2-style-button-box-right a.button,
    .select2-style-button-box-right span.button,
    .select2-style-button-box-right button.button,
    .select2-style-button-box-right.position-bottom-right a.button,
    .select2-style-button-box-right.position-bottom-right span.button,
    .select2-style-button-box-right.position-bottom-right button.button,
    .select2-style-button-box-right.position-bottom-right {
        margin: 0 0 15px 0;
        display: block;
        position: static;
    }

}

@media screen and (-webkit-min-device-pixel-ratio: 0) {


    input[type="radio"] + span:before {
        letter-spacing: -1px;
    }


}