@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');

/***************************************
 ************ Pop Up Window ************
 ***************************************/
 /**
  *
  * Globale Varibalen 
  * Button
  * Input Fields  
  * Erfolgsmeldung bei Registrierung 
  *** Registrierungs- und Anmeldungsbutton
  *** Closebutton
  * Cookie-Accept Button  
  *
  */

/***************************************
* Globale Variablen                    *
****************************************/
:root {
    --white: #FBFBFC;
    --txt: #2A3033;
    --lightgrey: #B0C9C1;
    --darkgrey: #5C6467;
    --accent: #A40931;
    --light-accent: #C85C77;

    --cookie-border: #D9859B;
    --cookie-bg: #FDD8E1;

    --fullwidth: 100%;

    --font: 'Roboto', sans-serif;
}

#sidebar-id .pop-up-window {
    background-color: var(--white);
    font-family: var(--font);
}

.intro_label {
    color:  var(--txt);
    font-size: 0.9em;
	line-height: 1.4em;
	margin-bottom: 1em;
}

fieldset {
    border: none;
}

/* reCAPTCHA */
#sidebar-id .hidden {
    display: none;
}

/***************************************
 * Button                              *
 ***************************************/
/* Registrierungs- und Anmeldungsbutton */
#sidebar-id .button {
    width: var(--fullwidth);
    background-color: var(--accent);
    color: var(--white);
    border: none;
    padding: 0.75em;
    font-weight: bold;
}

#sidebar-id .button:hover,
#sidebar-id .button:active,
#sidebar-id .button:focus {
    background-color: var(--light-accent);
    color: var(--white);
    font-weight: bold;
}

#sidebar-id .button .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

/* Close Button */
#sidebar-id #close-btn-id {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 30px;
    height: 30px;
    font-size: 20px;
    color: var(--txt);
    background-color: transparent;
    box-shadow: none;
    border: none;
    margin: 10px 0 0 0;
    float: right; 
}

/***************************************
 * Input Fields und Labels             *
 ***************************************/
 #sidebar-id .input_box {
    position: relative;
    margin: 1.5em 0;
}

#sidebar-id .input-field {
    width: var(--fullwidth);
    height: 40px;
    padding: 1.25em 0.5em 0.5em;    /* Platz für das Label oben */
    box-sizing: border-box;
    border: none;
    border-bottom: 1px solid var(--accent);
    border-radius: 2px;
    outline: none;
    margin-bottom: 10px;
    background-color: var(--white);
    font-size: 0.9em;
}

#sidebar-id .input-field::placeholder {
    color: transparent;
}

#sidebar-id .input-label {
    position: absolute;
    top: 0.9em;
    left: 0.5em;
    font-size: 14px;
    color: var(--darkgrey);
    pointer-events: none;
    transition: transform .2s ease, font-size .2s ease, color .2s ease;
    transform-origin: left top;
}

/* Bewegung für Label */
#sidebar-id .input-field:focus + .input-label,
#sidebar-id .input-field:not(:placeholder-shown) + .input-label {
    transform: translateY(-70%) scale(.8); 
    color: var(--light-accent);
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #FFFFFF inset;
    -webkit-text-fill-color: var(--txt);
}

/***************************************
 * Erfolgsmeldung bei Registrierung    *
 ***************************************/
#sidebar-id .erfolgsmeldung {
    width: var(--fullwidth);
    height: 4em;
    color: var(--white);
    background-color: var(--lightgrey);
    font-weight: bold;
	text-shadow: 1px 1px 6px #2A303361;  
    display: flex; 
    flex-direction: column;
    align-content: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 15px;
}

/***************************************
 * Cookie Accept Meldung               *
 ***************************************/
.recaptcha-blocked {
    font-family: var(--font);
	background: var(--cookie-bg);
	padding: 1em;
	margin: 1em 0;
	border: 1px solid var(--cookie-border);
	border-radius: 2px;
	color: var(--txt);
	text-align: center;
	font-size: 0.9em;
    line-height: 1.4em;
}

#cookie-accept {
    color: var(--accent);
}

#cookie-accept:hover {
    color: var(--txt);
}