/* Das Icon bei dem rechten Dropdown muss etwas kleiner sein */
.dropdown-menu-right img {
    width: 20px;
}

/* Der rechte Menü-Knopf soll ganz rechts liegen */
.dropdown-menu-right {
    margin-right: 0;
    margin-left: auto;
}

/* Spezifisch der rechte Menü-Knopf passt seine Breite an seinen Inhalt an.
Die Mindestbreite von 160px bleibt bestehen. */
#user-menu {
    width: fit-content;
    box-sizing: content-box;
    min-width: 160px;
    height: 24px;
}

/* Die Buttons im Header sollen alle eine gleiche Breite haben */
.header-tabs button:not(.share-button) {
    width: 160px;
}

/* Die Buttons und die Bilder sollen alle eine gleiche Höhe haben */
.home-link img {
    height: 50px;
}

/* Test, ob Helvetica-Schriftart funktioniert */
@font-face {
    font-family: "Helvetica";
    src: url("/javax.faces.resource/fonts/HelveticaNeue-LightCond.otf.xhtml?ln=agrar&v=1773409215520&fcp=agrar") format("opentype");
}

/* Der gesamte Body soll die von der Helaba vorgegebene Schriftart "Helvetica" haben */
body {
    font-family: Helvetica, Arial, sans-serif;
    background: #f7f7f7;
    padding-top: 86px;
}


/* Die Links im Header sollen weder blau noch unterstrichen sein */
.header a {
    text-decoration: none;
}

/* Die Überschrift links im Header soll schwarz sein */
.header h3 {
    color: #f7f7f7;
}

/* Die Header-Tabs sollen keinen unteren Rand haben */
.header-tabs {
    border: none !important;
    background: rgb(0, 107, 161);
    box-shadow: 0px 3px 10px grey;
}

/*
Das Hilfe-Icon zum Starten der Benutzerführung soll weiß sein, der Cursor soll eine Hand sein,
sobald der Benutzer drüber hovert
*/
.tutorial-icon {
    color: whitesmoke;
    cursor: pointer;
}

@import url('https://fonts.googleapis.com/css?family=Rubik');


/* Fügt dem Umfragenbutton einen kleinen Kreis hinzu, mit einer Zahl jenachdem wie viele Umfragen verfügbar sind*/
/*Start*/
.survey-badge-button {
    position: relative;
    border-radius: 4px;
    border: 2px solid white;
    padding: 15px 30px;
    color: white;
    background: rgba(0, 0, 0, .1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
    cursor: pointer;
    user-select: none;
    transition: all .3s;
}

.survey-badge-button:hover {
    transform: scale(1.03);
    background: rgba(0, 0, 0, .13);
    box-shadow: 0 2px 20px rgba(0, 0, 0, .15);
}

.survey-badge-button:active {
    transform: scale(.96);
}

.survey-badge-button:active .badge {
    transform: scale(1.2);
}

.survey-badge {
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: block;
    position: absolute;
    background: rgba(31, 206, 255, 1);
    border: 2px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -15px;
    right: -15px;
    transition: all .3s;
}

/*End*/

/*Ändert die Farbe des Logutbuttons in weiß*/
#logut-button {
    color: whitesmoke;
    rotation-point: left;
}


/*Ändert die Farbe des Menüs in schwarz*/
.fa-bars {
    color: white;
}

#logut-button-icon {
    transform: scaleX(-1);
}

.bg-white-meine-flaechen {
    height: 340px;
    background-color: white;
}

#meineFlaechenWartebereich {
    z-index: 1031;
}

.multipleConcurrentUser {
    background: rgb(255, 190, 92);
    text-align: center;
    padding-top: 10px;
    padding-bottom: 5px;
    position: relative;
}
.multipleConcurrentUser > span.multipleConcurrentUserClose{
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    font-size: 1.2rem;
}
#growl_container {
    margin-top: 85px !important
}

#share-id {
    padding: .25rem 1rem;
    min-width: 8rem;
}

#share-id > p {
    display: inline;
    color: #0645AD;
}

#share-dropdown {
    transform: translateY(2px);
    border-radius: 10px;
    display: none;
    width: 12rem;
}

#share-button.show {
    color: black;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}

.cblive div[role="main"][aria-label="Persönliche Daten"] {
    filter: blur(1.5rem);
}

.cblive :is(
    input[data-label-naming*="Postleitzahl"], input[data-label-naming*="PLZ"],
    input[data-label-naming*="Straße"], input[data-label-naming*="Hausnummer"],
    input[data-label-naming*="Ort"], input[data-label-naming*="Wohnort"],
    input[data-label-naming*="E-Mailadresse"], input[data-label-naming*="E-Mail-Adresse"],
    input[data-label-naming*="E-Mail"], input[data-label-naming*="Telefonnummer"],
    input[data-label-naming*="Vorname"], input[data-label-naming="Name"], input[data-label-naming="Name:"],
    input[data-label-naming*="IBAN"], input[data-label-naming*="BIC"]
) {
    filter: blur(0.5rem);
}

.filter-white,
.filter-white-solid,
.filter-black:hover,
button:hover .filter-black,
a:hover .filter-black,
.btn.show .filter-black{
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(267deg) brightness(108%) contrast(101%);
}

.filter-black,
.filter-black-solid,
.filter-white:hover,
button:hover .filter-white,
a:hover .filter-white,
.btn.show .filter-white{
    filter: brightness(0) saturate(100%) invert(0%) sepia(1%) saturate(16%) hue-rotate(58deg) brightness(101%) contrast(102%);
}

.pen-icon-header {
    height: 18px;
}