@charset "utf-8";
:root {
--head-bg-color1:#FF9966;     /* orange = F07F00  FF9966  blue = 3399FF  */
--head-bg-color2:#FFF;
--border:#CACBCF;
--shadow:#C4C4C4;
--black:#000000;
--white:#FFF;
--grey:#6D6D6D;
--lightgrey:#ECECEC;
--darkgrey:#333333;
--red:#F36;
--green:#00AA00;
--blue:#0080FF;
} 
* {
box-sizing:border-box;
font-family:"Lucida Grande","Lucida Sans Unicode","Lucida Sans","Geneva","Verdana","sans-serif";
font-size:1rem;
margin:0;
padding:0;
}
a {text-decoration:none;}
a:hover {
color:var(--blue);
cursor:pointer;
}
button:hover {color:var(--red);}
body {
background-color:var(--white);
width:100%;
}

input, textarea {width:100%;border:0;}

.red {color:var(--red);}
.green {color:var(--green);}
.hide {
display:none;
margin:0;
padding:0;
}
.back {
background-color:var(--white);
border:0;
color:var(--blue);
display:flex;
justify-content:flex-end;
margin:0em auto 0 auto;
}
.back button {
background-color:var(--white);
border:0;
color:var(--blue);
cursor:pointer;
display:flex;
width:auto;
}
.back button:hover {color:var(--red);}

.content {
color:var(--grey);
display:flex;
flex-direction:column; /* Richtet Elemente vertikal aus */
gap:1rem; /* Abstand zwischen den Elementen */
margin:0;
}
.header {
background-color:var(--blue);
height:3rem;
position:fixed;
top:0;
width:100%;
z-index:1000;
}
.header_left{
float:left;
margin:0.5rem 0.5rem 0.5rem 1rem;
text-align:left;
width:7rem;
}
.header_left .logo img{
height:2rem;
background-color:var(--white);
box-shadow:0.2rem 0.2rem 0.15rem 0rem rgba(50, 50, 50, 0.83);
width:6rem;
}
.header_middle {
color:var(--white);
font-size:1.5rem;
font-weight:normal;
margin:0.5rem 8rem 0.5rem 8rem;
text-align:center;
width:auto;
}
.header_right{
float:right;
margin:0em 0.5em 0.5em 0.5em;
text-align:right;
width:auto;
}
/* ------------------------------------------------------------------- */
.login {
background-color:var(--white);
border:1px solid var(--border);
box-shadow:4px 8px 4px 1px var(--shadow);
margin:4rem auto 0 auto;
top:auto;
width:350px;
}
.login h1 {
text-align:center;
color:var(--darkgrey);
font-size:24px;
padding:10px 0 10px 0;
border-bottom:1px solid var(--border);
}
.login form{
display:flex;
flex-wrap:wrap;
justify-content:center;
}
.login form label {
display:none;   /*  flex; */
justify-content:center;
align-items:center;
width:50px;
height:50px;
background-color:var(--blue);
color:var(--white);
}

.login form input {
width:310px;
height:50px;
border:1px solid var(--border);
margin-bottom:5px;                         /* 20 */
padding:0 15px;
}

.login form button {
width:310px;
padding:15px;
margin-top:10px;
margin-bottom:10px;
background-color:var(--blue);
border:0;
cursor:pointer;
font-weight:bold;
color:var(--white);
transition:background-color 0.2s;
}
.login form button:hover {
background-color:var(--blue);
transition:background-color 0.2s;
color:var(--red);
}
.login .inputadd  {    /* .. form button  */
width:310px;
padding:15px;
margin:0 auto;
justify-content:center;
padding:5px 5px;
display:flex;
flex-wrap:wrap;
}
.login .inputadd form {
margin:5px 0 5px 0;
}
.login .inputadd form button {
width:260px;
padding:5px;
margin:0;
background-color:var(--white); /* var(--blue)8c; */
border:1px solid var(--border);
cursor:pointer;
color:var(--darkgrey);
font-weight:normal;
transition:background-color 0.2s;
}
.login .inputadd form button:hover {
color:var(--red);
}
/* ------------------------------------------------------------------- */
.login form .digits label {display:none;}
.login form .digits input {
float:left;
display:block;
width:2em;
height:2em;
padding:0.5em;
margin:0.5em;
text-align:center;
color:var(--darkgrey);
font-weight:bold;
border:1px solid var(--border);
}
.login form .digits_1to6 input {
display:block;
width:auto;
height:2em;
padding:0.5em;
margin:0.5em;
text-align:center;
color:var(--darkgrey);
border:1px solid var(--border);
}
/* -------------------------------------- */
.login .message  {    /* .. form button  */
display:flex;
flex-wrap:wrap;
justify-content:center;
margin:0 auto;
padding:15px;
width:310px;
}
.login .message form {
margin:5px 0 5px 0;
}
.login .message form button {
background-color:var(--white); /* var(--blue)8c; */
border:1px solid var(--border);
color:var(--darkgrey);
cursor:pointer;
font-weight:normal;
margin:0;
padding:5px;
transition:background-color 0.2s;
width:260px;
}
.login .message form button:hover {color:var(--red);}
/* -------------------------------------- */
.profile_menu {
float:right;
font-size:80%;
justify-content:center;
margin:1rem auto 1rem auto;
text-align:center;
width:100%;
}
.profile_menu img {
height:0.7rem;
margin:0 0.3rem 0 0;
width:1rem;
}
.profile_menu a {
color:var(--darkgrey);
display:inline-block;
text-decoration:none;
}
.profile_menu ul {
list-style:none;
margin:0;
padding:0;
}
.profile_menu ul:hover {
cursor:pointer;
}
.profile_menu ul li {
background:var(--white);
border:1px solid var(--border);
color:var(--blue);
margin-right:0.5em;
padding:0.2em;
position:relative;
text-align:center;
width:auto;
}
.profile_menu ul li:hover ul {
cursor:pointer;
display:block;
}
.profile_menu ul li ul {
background:var(--white);
border-color:var(--border);
border-style:solid;
border-width:0.5px;
display:none;
margin-top:0.3em;
margin-right:0;
position:absolute;
right:0;   /* Rechtsbündig am LI ausrichten */
width:80%;
z-index:100;
}
.profile_menu ul li ul li {
background:var(--white);
display:block;
margin:0;
padding:0.3em;
text-align:left;
width:auto;
}
.profile_menu ul li ul li a:hover {
color:var(--red);
cursor:pointer;
}
/* -------------------------------------- */
.profile  {
box-shadow:4px 8px 4px 1px var(--shadow);
font-size:100%;
justify-content:center;
margin:4rem auto 0 auto;
top:auto;
width:600px;
}
.profile td {
border:1px solid var(--border);
padding:0.2em 0.2em 0.2em 0.2em;
height:2em;
}
.tbl_td_grey {
background:var(--lightgrey);
}
.profile .tbl_header {
background-color:var(--blue);
color:var(--white);
}
.profile .tbl_header_msg {
color:var(--red);
font-weight:normal;
padding:0.5em;
}
.profile_tbl_show {
border:1px solid var(--border);
border-collapse:collapse;
table-layout:fixed;
width:600px;
}
.profile_tbl_show form {
height:20px;
}
.profile .tbl_header th {
background-color:var(--blue);
border:1px solid var(--border);
color:var(--white);
font-size:100%;
padding:0.5em;
text-align:center;
width:100%;
}
.profile_tbl_show .tbl_col_0 {
width:30px;
}
.profile_tbl_show .tbl_col_1 {
vertical-align:top;
width:200px;
}
.profile_tbl_show .tbl_col_2 {
overflow-wrap:break-word;
vertical-align:top;
white-space:normal;
width:370px;
}

.profile .tbl_footer {
border:0;
border-collapse:separate ;
text-align:right;
}
.profile .tbl_footer_edit  {
background-color:var(--white);
border-collapse:separate ;
text-align:center;
}
.profile .tbl_footer_edit button {
background-color:var(--blue);
border:1px solid var(--border);
color:var(--white);
font-weight:bold;
height:100%;
padding:0.2em 0.2em 0.2em 0;
width:100%;
}
.profile .tbl_footer:hover, .profile button:hover {color:var(--red);}
.profile_tbl_edit {
border:1px solid var(--border);
border-collapse:collapse;
table-layout:fixed;
width:600px;
}
.profile_tbl_edit .tbl_col_1 {
vertical-align:top;
width:200px;
}
.profile_tbl_edit .tbl_col_2 {
margin:0 auto 0 auto;
vertical-align:top;
}
/* ------------------------------------------------------------------- */
.twofa {
border:1px solid var(--border);
font-size:100%;
justify-content:center;
margin:4rem auto 0 auto;
top:auto;
width:500px;
}
.twofa th  {
background-color:var(--blue);
border:1px solid var(--border);
color:var(--white);
font-size:100%;
padding:0.5em;
width:100%;
}
.twofa_qr_info {
margin:1em auto 1em auto;
text-align:center;
}
.twofa .twofa_qr {
background-color:var(--white);
border:0;
display:flex;
height:auto;
justify-content:center;
margin:0 auto 0 auto;         /*  margin:100px auto;   */
width:60%;
}
.twofa .twofa_url {
border:1px solid var(--border);
justify-content:center;
margin:0 auto 1em auto;
padding:0.5em;
text-align:center;
width:90%;
}
.twofa .tbl_footer_edit  {
background-color:var(--blue);
border:1px solid var(--border);
color:var(--white);
text-align:center;
width:50%;
}
.twofa .tbl_footer_edit button {
background-color:var(--blue);
border:0;
color:var(--white);
font-weight:bold;
margin:0.2em;
width:100%;
}
.twofa .tbl_footer_edit button:hover {color:var(--red);}
.twofa .copied {color:var(--green);}
/* ------------------------------------------------------------------- */
img[src*="eye_on"] {display:block;}
img[src*="eye_off"] {display:none;}
.eye-container {
display:flex;
position:relative;
width:100%;
}
.login form .eye-container input, .profile form .eye-container input {
border:1px solid var(--border);
border-right:0;
box-sizing:border-box;
margin-left:20px;
margin-right:50px;
width:280px;
}
.login form .eye-frame, .profile form .eye-frame {
border:1px solid var(--border);
border-left:0;
box-sizing:border-box;
height:50px;
position:absolute;
right:20px;
width:30px;
}
.login form .eye-container .eye, .profile form .eye-container .eye {
cursor:pointer;
height:20px;
padding:0 2px 0 2px;
position:absolute;
right:0px;
top:50%;
transform:translateY(-50%);
width:25px;
}

.profile form .eye-container input {
border:0;
margin-left:0px;
margin-right:30px;
width:550px;
}
.profile form .eye-frame {
border:0;
height:22px;
right:0px;
}
.profile form .eye-container .eye {
height:20px;
}
/* ------------------------------------------------------------------- */
.alert-box {
background-color:var(--white);
border:2px solid var(--red);
border-radius:5px;
box-shadow:0 4px 8px rgba(0,0,0,0.2);
color:var(--darkgrey);
display:none;
left:50%;
padding:20px;
position:fixed;
top:50%;
transform:translate(-50%, -50%);
width:320px;
z-index:2000;
}
.alert-box button {
background-color:var(--blue);
border:2px solid var(--border);
color:var(--white);
cursor:pointer;
height:2em;
justify-content:center;
line-height:2em;
margin-top:1em;
width:100%;
}
.alert-box button:hover {
color:var(--red);
}
/* -------------------------------------- */
.home {
font-size:100%;
margin:4rem auto 0 auto;
text-align:left;
top:auto;
width:auto;
}
/* -------------------------------------- */
.login form .checkbox-wrapper, .profile form .checkbox-wrapper  {
width:310px;
height:1.5em;
margin-bottom:10px;
margin-top:10px; /* 20 */
padding:0 15px;
}
.login form .checkbox-wrapper input[type="checkbox"], .profile form .checkbox-wrapper input[type="checkbox"] {
float:left;
height:1em;
margin-top:0.1em;                       /* 20 */
padding:0 15px;
width:1em;
}
.login form .checkbox-wrapper label, .profile form .checkbox-wrapper label {
background-color:var(--white);
color:var(--darkgrey);
display:block;
height:1em;
margin-left:1.5em;
width:auto;
}