/* 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; }

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; }

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


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

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

.flex_jc_start { justify-content: flex-start; }
.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%; }

/* 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; }


/* 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; }

.p_5 { padding:5px !important; }

.mar_l_10 { margin-left:10px; }

.w_100_proz { width:100%; }
.w_50 { width:50px; }

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

/* 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:1.1em; }
.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; }

button.logout { position:fixed; right:0px; top:0px; border-radius:0px; border-bottom-left-radius:25px; fill:#FFF; color:#FFF; background-color:#C00; transition:all 0.25s ease; width:200px; }
button.logout:hover { fill:#C00; color:#C00; background-color:#CCC; border-color:#CCC; }

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

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

.text { line-height:1.3em; }

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