/* ============================================
 Projekt:      CENTER

 Datei:        04_CSX_FORMS.CSS

 Datum:        12.01.2016
 Version:      2.0
 Optimiert:    ab IE 9, FF, Chrome, Opera
 ================================================ */

/* ==================================================
        FUER UMBAU DER HTML STRUKTUR
===================================================== */
.csx-project-form {
    margin: 0;
    padding: 0;
}

/* FF Hack BG Yellow */
input:autofill {
    background: #fff;
}

.csx-project-form textarea,
.csx-project-form input[type="text"],
.csx-project-form input[type="email"],
.csx-project-form input[type="url"],
.csx-project-form input[type="password"] {
    float: left;
}

/* Bei readonly Ausgabe
 bsp. Step DTVP Editionen
*/
.csx-project-form--readonly .controls {
    margin: 0;
}

/* ==================================================
        (SONDERFAELLE)
===================================================== */
/* Bsp. Verwaltung der Unternehmensdaten */
p.right {
    float: left;
    font-weight: bold;
    margin: 0 19px 25px 0;
    padding-top: 6px;
    vertical-align: middle;
}

/* Info Icon danach */
p.right + span.toolLink-infoCompanyIdDetails {
    position: relative;
    top: 5px;
    right: -10px;
}

label[for="allowJoinEmail"] {
    width: 360px;
}

input[type="checkbox"][id="allowJoinEmail"] {
    position: relative;
    top: 5px;
}

/* CPV-Code Auswahl */
.cpvWizardForm label {
    width: auto;
}

/* CPV-CODE AUSWAHL */
.cpvWizardForm input[type="submit"],
.cpvWizardForm input[type="text"],
.cpvWizardForm input[type="checkbox"] {
    float: left;
    margin-right: 10px;
}

.cpvWizardForm input[type="checkbox"] {
    position: relative;
    top: 5px;
}

/* VERWALTUNG DER EIGENEN DATEN */
p.left {
    float: left;
    margin: 0 9px 25px 0;
    padding-top: 6px;
    vertical-align: middle;
    width: 200px;
}

/* SUCHPROFILE  hinzufuegen - bearbeiten */
/* createSearchProfile class des Fieldsets */
.createSearchProfile label {
    padding-top: 0 !important;
    width: 270px;
}

/* fieldset Profilbezeichnung */
.createSearchProfile label[for=discription] {
    padding-top: 5px !important;
}

.createSearchProfile .searchTypes input[type="checkbox"],
.createSearchProfile .searchTypes input[type="radio"] {
    float: left;
    margin-right: 8px;
}

.createSearchProfile .searchTypes label {
    float: left;
    padding: 0 !important;
    width: auto
}

.createSearchProfile .searchTypes ul {
    list-style-type: none !important;
}

.createSearchProfile .searchTypes ul li {
    margin: 0 !important;
}

.createSearchProfile .searchTypes ul li:after {
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}

.createSearchProfile .searchTypes .space,
.createSearchProfile .searchTypes .space2 {
    margin-bottom: 25px;
    width: 110px !important;
}

/* Benutzer hinzufuegen-bearbeiten */
.forms-left-right-box {

}

.forms-left-right-box input[type="radio"],
.forms-left-right-box input[type="checkbox"],
.forms-left-right-box label {
    float: left;
    margin: 0;
    padding: 0;
}

.forms-left-right-box label {
    margin-bottom: 10px;
    padding-left: 10px;
    width: auto;
}

.forms-left-right-box input[type="radio"],
.forms-left-right-box input[type="checkbox"] {
    position: relative;
    top: 3px;
}

/* ==================================================
        FORMELEMENTS
===================================================== */
label {
    display: block;
    font-weight: normal;
    line-height: 20px;
    margin-bottom: 5px;
}

label {
    float: left;
    padding-right: 10px;
    padding-top: 5px;
    text-align: left;
    width: 200px;
}

/* span 'label' innerhalb vom label bei checkboxen und radiobuttons - fuer spaeteres styling */
.label-inside-label {
    padding: 0;
}

/* span 'label' innerhalb vom label bei checkboxen und radiobuttons - steht in <li> Bsp. Modul Berichte*/
li .label-inside-label {
    position: relative;
    top: 2px;
}

select,
textarea,
input[type="text"],
input[type="password"] {
    color: #000;
    display: inline-block;
    height: 20px;
    padding: 4px 6px !important;
    line-height: 20px;
    margin-bottom: 10px !important;
    vertical-align: middle;
}

input[type="text"],
input[type="password"] {
    margin-bottom: 15px !important;
    width: 250px;
}

textarea {
    min-height: 300px !important;
    min-width: 450px
}

input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
    width: auto;
}

select,
input[type="file"] {
    height: 30px;
    line-height: 30px;
}

select[multiple],
select[size] {
    min-height: 150px !important;
}

.radio,
.checkbox {
    min-height: 20px;
    padding-left: 20px !important;
}

.radio input[type="radio"],
.checkbox input[type="checkbox"] {
    float: left;
    margin-left: -20px !important;
    margin-top: 2px !important;
    min-height: 15px;
    line-height: normal;
}

/* Inline Radio oder Checkboxen */
input[type="radio"].radio-inline + span.label-inside-label,
input[type="checkbox"].checkbox-inline + span.label-inside-label {
    margin-right: 10px !important;
}

.controls > .radio:first-child,
.controls > .checkbox:first-child,
.controls > .radio.inline-block-element,
.controls > .checkbox.inline-block-element {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding-top: 5px !important;
}

.control-group {
    clear: left;
    margin-bottom: 5px !important;
    *zoom: 1;
}

.control-group:before,
.control-group:after {
    content: "";
    display: table;
    line-height: 0;
}

.control-group:after {
    clear: both;
}

/* Main label */
.control-label,
.control-label-width-auto {
    float: left;
    padding-top: 5px !important;
    padding-right: 10px;
    text-align: left;
    width: 200px;
}

/* externe Projekte ex-ante - ex-post */

.exAnteIcon,
.exPostIcon {
    background-color: #cccccc;
    border-radius: 5px;
    color: #000;
    display: inline-block;
    font-size: 10px !important;
    letter-spacing: 0.5px;
    margin-right: 10px;
    min-width: 50px;
    padding: 2px 6px;
    text-align: center;
    text-transform: uppercase;
}

#projectRoomContent .control-label,
#projectRoomContent .control-label-width-auto {
    width: 220px;
}


#projectRoomContent .controls {
    margin: 0 0 0 230px; /* entspricht der Breite des .control-label + padding-right*/
}

.control-label-width-auto {
    min-width: 50px;
    width: auto;
}

.control-label-width-auto + .controls {
    margin: 0
}

.controls {
    margin: 0 0 0 210px; /* entspricht der Breite des .control-label + padding-right*/
}

.control-label-width-250 {
    width: 250px;
}

.control-label-width-250 + .controls {
    margin: 0 0 0 260px;
}

/* Anpassung groesse input[type=text] */
.input-mini {
    min-width: 60px;
    width: 60px !important;
}

.input-small {
    min-width: 90px;
    width: 90px !important;
}

.select-small {
    min-width: 80px;
    width: 80px !important;
}

.input-medium {
    min-width: 150px;
    width: 150px !important;
}

.select-medium {
    min-width: 180px;
    width: 180px !important;
}

.input-default {
    min-width: 250px;
    width: 250px !important;
}

.select-default {
    min-width: 263px;
    width: 263px !important;
}

.textarea-default {
    min-width: 460px;
}

.textarea-small {
    min-height: 150px !important;
    min-width: 450px;
}

.textarea-thin {
    min-height: 110px !important;
    min-width: 225px;
}

.input-xlarge {
    min-width: 350px;
    width: 350px !important;
}

.input-xxlarge {
    min-width: 460px;
    width: 460px !important;
}

.select-xxlarge {
    min-width: 474px;
    width: 474px !important;
}

.input-phone-fax-number {
    min-width: 215px;
    width: 215px !important;
}

.seperator {
    background-color: #bbb;
    height: 1px;
    margin: 20px 0 0 0;
    max-width: 80%;
}

.seperator:last-child {
    display: none;
}

/* ==================================================
         READONLY AUSGABE
===================================================== */
/* Readonly control-group wenn alle Werte als Read-Only ausgegeben werden sollen Abstand der Zeilen verringern */
.control-group.control-group-read-only,
.control-group.control-group-read-only label,
.control-group.control-group-read-only .controls .read-only {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 2px !important;
    margin-top: 0 !important;

}

/* Readonly Liste allgemein */
ul.read-only {
    margin: 0;
    padding: 8px 0 0 0;
}

ul.read-only li {
    font-weight: bold;
}

/* Textfelder und Textarea */
.controls span.read-only,
.float-left span.read-only,
.controls-float-none span.read-only,
.controls-float-none .controls span.read-only {
    display: block;
    font-weight: bold;
    line-height: 20px;
    margin: 0;
    padding: 5px 0 0 0;
}

.controls-float-none span.read-only,
.float-left span.read-only {
    padding: 0;
}

/* ==================================================
        ABSCHLUSS DIV BEIM FORMULAR
===================================================== */
.form-actions {
    height: 31px;
    margin-top: 20px !important;
    margin-bottom: 20px;
    padding: 19px 20px 20px 20px;
}

.form-actions,
.form-top {
    border-top: 2px solid #ddd;
}

/* Start DIV beim Formular */
.form-top {
    border-top: none;
    border-bottom: 2px solid #ddd;
}

.form-actions:before,
.form-actions:after {
    display: table;
    content: "";
    line-height: 0;
}

.form-actions:after {
    clear: both;
}

.form-actions input[type="button"],
.form-actions input[type="submit"] {
    float: left;
    margin-right: 25px !important;
}

/* ==================================================
         FIELDSET / LEGEND
===================================================== */
fieldset {
    background-color: #fff;
    border: 1px solid;
    margin: 15px 0 35px 0 !important;
    padding: 10px 20px;
}

legend {
    display: block;
    max-width: 90%;
    padding: 8px 15px !important;
}

/* ==================================================
         BUTTONS
===================================================== */
.btn,
.btn-link,
.btn-link[disabled],
.btn[disabled],
button,
button[disabled],
input[type="submit"],
input[type="submit"][disabled],
input[type="button"],
input[type="button"][disabled] {
    cursor: pointer;
    display: table-cell;
    height: 31px;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    min-width: 80px !important;
    padding: 0 12px !important;
    text-align: center;
    vertical-align: middle;
}

/* <a href> als Button */
.btn-link {
    display: table-cell;
    height: 29px;
}

table .btn-link {
    display: table;
    border-collapse: separate;
    line-height: 29px;
}

/* <a href> als Abstand da table-cell keine margin zulaesst */
.btn-link-space {
    display: table-cell;
}

/* jeweilige Abst�nde */
.width-15 {
    width: 15px;
}

.width-20 {
    width: 20px;
}

.width-25 {
    width: 25px;
}

.width-30 {
    width: 30px;
}

/* ======================================================
      BUTTONS / FORMS DISABLED
========================================================= */
.btn[disabled],
.btn-link[disabled],
button[disabled],
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
    background: #ddd !important;
    border: 1px solid #dadada !important;
    cursor: not-allowed !important;
}

input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"][readonly],
input[type="checkbox"][readonly] {
    background: none !important;
    border: none;
    opacity: 0.7;
}

.btn[disabled],
.btn-link[disabled],
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly],
#subNav li.disabled,
#subNav li li.disabled,
td a[disabled],
a.disabled {
    color: #6a6a6a !important;
    cursor: not-allowed !important;
}

/* Margin Abstaende */
.no-margin {
    margin: 0 !important;
}

/* bottom */
.margin-bottom-5 {
    margin-bottom: 5px !important;
}

.margin-bottom-10 {
    margin-bottom: 10px !important;
}

.margin-bottom-15 {
    margin-bottom: 15px !important;
}

.margin-bottom-20 {
    margin-bottom: 20px !important;
}

.margin-bottom-30 {
    margin-bottom: 30px !important;
}

/* left */
.margin-left-5 {
    margin-left: 5px !important;
}

.margin-left-10 {
    margin-left: 10px !important;
}

.margin-left-15 {
    margin-left: 15px !important;
}

.margin-left-20 {
    margin-left: 20px !important;
}

.margin-left-30 {
    margin-left: 30px !important;
}

/* right */
.margin-right-5 {
    margin-right: 5px !important;
}

.margin-right-10 {
    margin-right: 10px !important;
}

.margin-right-15 {
    margin-right: 15px !important;
}

.margin-right-20 {
    margin-right: 20px !important;
}

.margin-right-30 {
    margin-right: 30px !important;
}

/* top */
.margin-top-5 {
    margin-top: 5px !important;
}

.margin-top-10 {
    margin-top: 10px !important;
}

.margin-top-15 {
    margin-top: 15px !important;
}

.margin-top-20 {
    margin-top: 20px !important;
}

.margin-top-30 {
    margin-top: 30px !important;
}

/* padding left */
.padding-left-0 {
    padding-left: 0 !important;
}

.padding-left-5 {
    padding-left: 5px !important;
}

.padding-left-10 {
    padding-left: 10px !important;
}

.padding-left-15 {
    padding-left: 15px !important;
}

/* =====================================================
         SUCHE / ERWEITERTE SUCHE / SUCHPROFIL
======================================================== */
.criteriaBox {
    float: left;
    margin: 0;
    padding: 0;
}

.searchFieldHead {
    height: 30px;
}

/* Filterkriterien ein- ausblenden */
.searchFieldHead .criteriaBoxHideShow {
    float: right;
    padding: 0 0 15px 0;
    position: relative;
}

.searchFieldHead .criteriaBoxHideShow a {
    padding-right: 25px;
}

.searchFieldHead .criteriaBoxHideShow a.toggleHide:after {
    border-bottom: 8px solid;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    content: "";
    display: inline-block;
    height: 0;
    right: 0;
    position: absolute;
    top: 3px;
    width: 0;
}

.searchFieldHead .criteriaBoxHideShow a.toggleShow:after {
    border-top: 8px solid;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    content: "";
    display: inline-block;
    height: 0;
    right: 0;
    position: absolute;
    top: 3px;
    width: 0;
}

.searchContainer {
    border: 1px solid;
    min-width: 760px;
    overflow: hidden;
    padding: 10px 10px 0 10px;
    position: relative;
}

.searchContainerNoBorder {
    border-bottom: none;
}

.searchTypesRow {
    margin: 0 0 20px 0;
    overflow: hidden;
    padding: 0;
}

.searchTypes {
    float: left;
    margin: 0 10px 0 0;
    padding: 0;
}

/* Headlines*/
.searchTypesHeadlines,
.searchResultBoxLabel {
    background: #ddd;
    border: 1px solid #ddd;
    display: block;
    font-weight: bold;
    line-height: 2.3;
    min-height: 30px;
    padding: 0 8px;
}

.searchTypes ul {
    margin: 5px 10px 0 0 !important;
    padding: 0;
}

.searchTypes ul li {
    display: block;
    min-height: 25px;
    margin: 0 !important;
    position: relative;
}

.searchTypes ul li:after {
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}

.searchTypes ul li label {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none;
}

.searchTypes ul li input[type="checkbox"] {
    position: relative;
    top: 1px;
}

/* I. BOX 'SUCHBEGRIFF */
.filterBoxInput, /* Such in Unterkategorien */
.filterBoxInputExtended {
    margin: 0;
    padding-top: 5px;
    position: relative;
}

.filterBoxInput input[type=text],
.filterBoxInputExtended input[type=text] {
    margin: 0 !important;
    padding-right: 30px !important;
    width: 205px !important;
}

/* loeschen Button */
.filterBoxInput .clearSearchString,
.filterBoxInputExtended .clearSearchString {
    left: 223px;
    position: absolute;
    top: 10px;
}

/* II. BOX 'REGION */
.criteriaBox .table-box {
    margin: -10px 0 20px 0 !important;
    padding: 0 !important;
}

.criteriaBox .table-cell {
    height: 30px;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left;
    vertical-align: middle !important;
}

.criteriaBox .table-cell label {
    display: inline-block;
    float: none;
    padding: 0 !important;
    margin: 0 !important;
    width: auto;
}

.criteriaBox .circumference-column {
    width: 145px;
}

.criteriaBox .table-cell input[type="text"],
.criteriaBox .table-cell select {
    margin: 0 !important;
}

.filterBoxInputExtendedSmall {
    position: relative;
}

.filterBoxInputExtendedSmall input[type="text"] {
    padding-right: 30px !important;
    width: 70px;
}

.filterBoxInputExtendedSmall .clearSearchString {
    right: 5px;
    position: absolute;
    top: 5px;
}

/* III. BOX 'AUFTRAGSGEGENSTAND */
.searchTypesCPVBoxExtended .searchTypes {
    overflow: hidden;
    padding-right: 0;
}

.searchTypesCPVBoxExtended .searchTypes .resultBoxCPV {
    height: 150px !important;
}

/* Button Suche > 1280px */
.searchButtonsBoxExtended .btn {
    margin-left: 10px;
}

/* Button Suche < 1280px */
.searchButtonsBoxExtended.searchButtonsBoxExtended1280 .btn {
    bottom: 10px;
    float: right;
    position: absolute;
    right: 23px;
}

/* Button Suche  <= 1024px */
/* CPV BOX */
.searchButtonsBoxExtendedClear {
    clear: left;
    padding-bottom: 5px;
}

.searchButtonsBoxExtendedClear .searchTypes {
    width: 626px !important;
}

/* ==================================================
         SUCHFELDER / BUTTONS SUBMIT TEXTFELD LEEREN
===================================================== */
.clearSearchString {
    background-color: transparent;
    cursor: pointer;
    display: none;
    float: left;
    height: 16px;
    margin: 2px 0 0 0;
    padding: 0;
    width: 16px;
}

/* ============================================
         SUCHE CPV-CODE (AUFTRAGSGEGENSTAND)
================================================ */
/* CPV Code Auftragsgegenstand bei Suchprofil erstellen/bearbeiten */
.createSearchProfile .searchTypes .searchTypesCPVBox {
    width: 440px;
}

/* Link CPV-Code bearbeiten */
.searchTypesCPVBox a {
    display: block;
    float: right;
    padding-right: 0;
}

/* kein CPV-Code ausgewaehlt */
.searchTypesCPVBox .noCPVSelected {
    padding-bottom: 20px;
    padding-top: 10px;
    text-align: center;
}

/* CPV-Code Tabelle ausgewaehlt */
.cpvCodeChecked {
    display: inline-block;
    height: 16px;
    width: 16px;
}

.searchTypesCPVBox .resultBoxCPV {
    height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}

.searchTypesCPVBox .resultBoxCPV ul li {
    background-color: #fff;
    border-bottom: 1px solid;
    display: table;
    margin: 0 !important;
    padding-left: 8px;
    width: 100%;
}

/*zum Aufspannen, da table-cell keine min-height akzeptiert */
.searchTypesCPVBox .resultBoxCPV ul li:after {
    content: "";
    display: block;
    min-height: 40px;
    vertical-align: middle;
}

.searchTypesCPVBox .resultBoxCPV span.nameCPV {
    display: table-cell;
    line-height: 1.2;
    vertical-align: middle;
}

.searchTypesCPVBox .resultBoxCPV span.deleteCPV {
    cursor: pointer;
    display: table-cell;
    padding-left: 10px;
    padding-right: 25px;
    vertical-align: middle;
}

/* Box fuer Suchbutton  */
.searchButtonsBox {
    float: left;
}

/* ======================================================================
         FORMATIERUNG EXTERNER PROJEKTE/PROJEKTRAUM UNTERNEHMEN VERSION 3
========================================================================= */
/* Header - Projektheader */
#projectRoomTitleBox {
    background-color: #f2f2f2;
    border: 1px solid #bbb;
    border-radius: 5px;
    margin: 10px 0 25px 0;
    min-height: 25px;
    padding: 10px 0 0 0;
}

#projectRoomTitleText {
    font-weight: bold;
    height: 25px;
    padding-left: 10px;
}

.projectRoomTitleData {
    padding: 5px 10px 5px 10px;
}

.projectRoomTitleData table {
    border: none !important;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: none;
    display: inline-block;
    padding: 0;
    margin: 0;
    max-width: 1100px;
}

.projectRoomTitleData table td {
    border: none !important;
    background: none;
    height: 22px;
    line-height: 100%;
    padding: 0;
}

.projectRoomTitleData tr:hover {
    background: none !important;
}

.projectRoomTitleData .tdLabel {
    font-weight: bold;
    min-width: 80px !important;
    padding-right: 10px;
}

.projectRoomTitleData .tdSpace {
    padding: 2px 0 2px 0;
    width: 30px;
}

/* ============================================
        SHOW/HIDE PASSWORD
================================================ */
/* Hide MS Show/Hide Password Button */
::-ms-reveal {
    display: none;
}

/* Wrapper */
.password {
    display: inline-flex;
    position: relative;
}

/* Button */
.password__button {
    align-items: center;
    display: flex;
    height: 22px;
    justify-content: center;
    position: absolute;
    right:6px;
    width: 22px;
    top: 4px;
    z-index: 2;
    opacity: 0.5;
}

.password__button:focus {
    outline:0;
    box-shadow: none;
}

/* Icons */
.password__button.password__button--show {
    background-position: center -4px;
}

.password__button.password__button--hide {
    background-position: center -34px;
}

/* Textfield */
.password .password__input {
    min-width: 221px;
    width: 221px !important;
    padding-right: 35px!important;
}