* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background: #fafafa;
color: #333;
text-align: center;
}   .pp-container {
max-width: 80%;
margin: 0 auto;
display: flex;
gap: 10px !important;
flex-direction: column;
flex-wrap: wrap;
align-content: stretch;
align-items: stretch;
}   .pp-form-group {
display: flex;
max-width: 450px;
margin: 20px auto;
border: 1px solid #ccc;
border-radius: 6px;
overflow: hidden;
background: #fff;
}
.pp-form-group input {
flex: 1;
padding: 12px;
font-size: 16px;
border: none;
outline: none;
background: #fff;
text-align: center;
}
.pp-form-group button {
background-color: #000000;
color: #fff;
padding: 12px 20px;
font-size: 16px;
border: none;
cursor: pointer;
transition: background-color 0.2s ease;
}
.pp-form-group button:hover {
background-color: #333333;
}   .pp-result {
display: none;
flex-direction: column;
align-items: center;
max-width: 450px;
margin: 20px auto;
}
.pp-link-teilen {
width: 40%;
display: flex;
align-items: center;
flex-direction: row;
align-content: center;
flex-wrap: nowrap;
justify-content: flex-start;
padding-top: 10px;
}
input#pp-link-field {
border-radius: 4px 0 0 4px;
}
button#pp-copy-link {
border-radius: 0 4px 4px 0;
background-color: #000000;
border: 0;
}
button#pp-load-password-btn {
border-radius: 4px;
}
.pp-field-and-button {
display: flex;
flex-direction: row-reverse;
justify-content: center;
align-items: center;
gap: 0;
}
div#pp-password-display {
display: flex;
width: 300px;
border: 0.5px solid #DDDDDD;
align-items: center;
padding-left: 10px;
background-color: #f9f9f9;
}
.pp-field {
height: 40px;
}
.pp-load-group {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
button#pp-copy-password {
border-radius: 4px 0 0 4px;
}
button#pp-copy-password,
button#pp-load-password-btn {
background-color: #000000;
border: none;
}
.pp-link-container {
display: flex;
width: 100%; max-width: 450px;
margin: 0 auto;
border: 1px solid #ccc;
border-radius: 6px;
overflow: hidden;
background: #fff;
}
.pp-link-container input {
flex: 1;
padding: 12px;
font-size: 16px;
border: none;
outline: none;
background: #fff;
text-align: center;
}
.pp-link-container button {
background-color: #3498db;
color: #fff;
padding: 12px 20px;
font-size: 16px;
border: none;
cursor: pointer;
transition: background-color 0.2s ease;
}
.pp-link-container button:hover {
background-color: #2980b9;
}   @media only screen and (max-width: 768px) {
body .pp-container form#pp-password-form label[for="pp-password-input"] {
display: none !important;
}
}   #pp-qrcode {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
padding: 10px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 6px;
}
.pp-qr-hint {
font-size: 14px;
color: #555;
margin-top: 15px;
text-align: center;
}   #pp-password-qrcode-container {
display: none; margin-top: 20px;
text-align: left;
}
#pp-password-qrcode {
display: inline-block; padding: 10px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 6px;
}
.pp-password-qr-hint {
font-size: 14px;
color: #555;
margin-top: 10px;
text-align: left;
}