/* CSS Document */

* { margin: 0px; padding: 0px; box-sizing: border-box; }
html { width:100%; height:100%; }
body {width:100%; font-size: 16px; font-family:Arial, Helvetica, sans-serif; color:#000; }

a { display:inline-block; text-decoration:none; vertical-align:middle; line-height:1rem; }
a:hover { text-decoration:none; }
div { vertical-align: middle; }
input { padding:5px; border-radius:5px; border:1px solid; }
textarea { padding:5px; border-radius:5px; border:1px solid; }
select { padding:5px; border-radius:5px; border:1px solid; }
button { padding:10px; border-radius:5px; border:1px solid; cursor:pointer; }
button:hover { background-color:#CCC; }

.cursor_click { cursor:pointer; }

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}


input:disabled,
select:disabled,
textarea:disabled,
button:disabled {
    outline: none;
	background-color:#FFF; 
	color:#CCC;
}


/* Klassen für Hauptelemente */
.overlay { position:fixed; left:0px; top:0px; bottom:0px; right:0px; width:100%; height:100%; background-color:#CCCCCC; opacity:.75; filter:alpha(opacity = 75); z-index:999999999999; }
.abblenden_opacity { opacity:.75; filter:alpha(opacity = 75); background-color:#999; }
.abblenden_kasten { position:fixed; left:0px; top:0px; bottom:0px; right:0px; width:100%; height:100%; display:flex; flex-direction:row; justify-content:center; align-items:center; z-index:1000; }
.abblenden_innen { background-color:#FFF; border:1px solid #FFF; border-radius:5px; padding:20px; min-width:300px; min-height:50px; max-height:90%; -webkit-box-shadow: 1px 1px 7px 1px rgba(0,0,0,0.6); box-shadow: 1px 1px 7px 1px rgba(0,0,0,0.6); position:relative; transition:opacity 2s ease-in-out; opacity:1; }

.disp_block { display:block; }

.kreis { border-radius:50%; border:1px solid; }
.bold { font-weight:bold; }

.but_lighter { opacity:0.3; transition:all 0.25s ease-in-out; }
.but_lighter:hover { opacity:1; transform:scale(1.1, 1.1); }

/* Flexklassen */
.flex_row_default { display:flex; flex-direction:row; }

.flex_column_default { display:flex; flex-direction:column; }

.flex_jc_start { justify-content: flex-start !important; }
.flex_jc_end { justify-content: flex-end; }
.flex_jc_center { justify-content: center; }
.flex_jc_between { justify-content: space-between; }

.flex_ai_center { align-items: center; }
.flex_ai_stretch { align-items: stretch; }
.flex_ai_end { align-items: flex-end; }

.flex_as_center { align-self: center; }
.flex_as_stretch { align-self: stretch; }
.flex_as_end { align-self: flex-end; }

.flex_no_gr_sh { flex-grow: 0; flex-shrink: 0; }

.flex_wrap { flex-wrap:wrap; }

.flex_half_abs { width:47%; flex:0 0 47%; }
.flex_half_abs:nth-child(even) { margin-left:3%; }
.flex_half_abs:nth-child(odd) { margin-right:3%; }

.half_table { display:flex; flex-direction:row; justify-content:flex-start; align-items:stretch; flex-wrap:wrap; }
.half_table > * { width:50%; flex:0 0 50%; padding:5px; }

/* SVG Klassen */
.svg_white { fill:#FFF; transition:0.25s all; }
.svg_white:hover { fill:#333; }

.svg_black { fill:#333; transition:0.25s all; }
.svg_black:hover { fill:#CB0000; }

.svg_red { fill:#900; }
.svg_green { fill:#090; }

/* Farben */
.rot { color:#900; }


/* paddings, margins */
.m_o_5 { margin-top:5px; }
.m_o_10 { margin-top:10px; }
.m_o_15 { margin-top:15px; }
.m_o_25 { margin-top:25px; }

.m_r_10 { margin-right:10px; }
.m_r_20 { margin-right:20px; }
.m_r_40 { margin-right:40px; }

.m_u_40 { margin-bottom:40px; }

.p_2 { padding:2px !important; }
.p_5 { padding:5px !important; }

.m_l_10 { margin-left:10px; }
.m_l_20 { margin-left:20px; }
.m_l_50 { margin-left:50px !important; }
.mar_l_10 { margin-left:10px; }

.w_100_proz { width:100%; }
.w_50 { width:50px; }
.w_300 { width:300px; }
.w_800 { width:800px; max-width:100%; }
.w_200 { width:200px; flex:0 0 200px; }

.hidden { visibility:hidden; }
.show {visibility:visible !important; }

/* Uploader CSS */
.uploader_table { display:inline-block; }
.uploader_img { padding-top:7px; margin-right:10px; }

/* Input Klasse für hübsch animierte Inputs mit animierten Placeholdern */
.form_feld_kasten { position:relative; }
.form_feld_label { position:absolute; margin-top:12px; padding:7px; padding-left:15px; padding-bottom:0px; left:0px; top:0px; color:#AAA; width:100%; font-weight:normal; line-height:1.5em; border-radius:5px 5px 0px 0px; border:1px solid #000; border-bottom-width:0px; background-color:#FFF; transition:all; transition-duration:0.5s; z-index:1; pointer-events:none; }
.form_feld_text { padding:10px; margin-top:12px; border-radius:5px; border:1px solid #000; font-weight:normal; width:100%; font-size:1rem; }
.form_feld_select { padding-left:5px; }

.form_feld_text:focus ~ .form_feld_label { top:-12px; padding-top:0px; padding-bottom:0px; padding-left:10px; color:#000; font-size:0.85em; }
.form_feld_label_not_empty { top:-12px; padding-top:0px; padding-bottom:0px; padding-left:10px; color:#000; font-size:0.85em; }


.button_medium_black { background-color:#231f20; font-size:1.2em; color:#FFF; border:1px solid #231f20; min-width:250px; transition:all 0.25s ease; }
.button_medium_black:hover { background-color:#555; border:1px solid #555; }

.button_medium_grey { background-color:#EFEFEF; font-size:1.2em; color:#231f20; border:1px solid #231f20; min-width:250px; transition:all 0.25s ease; }
.button_medium_grey:hover { background-color:#DFDFDF; border:1px solid #555; }

.button_grey { background-color:#EFEFEF; font-size:1.2em; color:#231f20; border:1px solid #231f20; transition:all 0.25s ease; }
.button_grey:hover { background-color:#DFDFDF; border:1px solid #555; }

.logo { margin-top:16vh; max-width:320px; }
.login_form { width:320px; }

.small_form { width:320px; }
.small_box { width:320px; }

.text { line-height:1.3em; }
.text_mittig { text-align:center; }

.error { color:#C00; border:1px solid #C00; padding:15px; border-radius:15px; transition:all 0.25s ease; min-width:310px; text-align:center; }