@charset "utf-8";


/*


// 111 activity.thomaswill.de/style.css
// Gemeinsame Datei

Theme Name: activity


*/


body {
  width: 100%;
  margin: 0;
  padding: 0;
  background: #DDDDDD;
}

.file-list a {
  display: block;
  margin: 5px 0;
  color: #007BFF;
  text-decoration: none;
}

.file-list a:hover {
  text-decoration: underline;
}

textarea {
  width: 100%;
  height: 60vh;
  font-size: 1em;
}

.buttons {
  margin-top: 10px;
}

.buttons button {
  padding: 8px 16px;
  font-size: 1em;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.buttons .save {
  background: #28a745;
  color: white;
}

.buttons .cancel {
  background: #dc3545;
  color: white;
  margin-left: 10px;
}

.message {
  margin-bottom: 1em;
  font-weight: bold;
}

.csrf-token {
  display: none;
}

.headerbox,
.contentbox {
  padding: 20px;
  max-width: 600px;
  margin: auto;
  width: 100%;
  color: #000000;
  box-shadow: 10px 10px 0px grey;
}

.headerbox {
  background: #2a4861;
}

.contentbox {
  background: #FFFFFF;
}

.two-columns {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.left-column {
  flex: 1;
}

.right-column-left {
  margin-left: 0; /* Removes auto-margin, pushes it to the left */
}

.right-column-right {
  margin-left: auto; /* Pushes to far right */
}

.main-title {
  font-size: 1.5em;
  font-weight: bold;
  margin: 0;
}

.send-button-login,
.send-button-logout {
  padding: 3px 8px;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

.send-button-login {
  background-color: #00FF00;
}

.send-button-logout {
  background-color: #FF0000;
}

.send-button-login:hover {
  background-color: #2E7D32; /* Dark green */
}

.send-button-logout:hover {
  background-color: #660000;
}

.button-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}

.button-grid form,
.button-grid button {
  flex: 1 1 45%; /* zwei Spalten bei großer Breite */
  max-width: 230px;
  min-width: 100px;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 500px) {
  .button-grid form,
  .button-grid button {
    flex: 1 1 100%; /* bei kleiner Breite einspaltig */
    max-width: 100%;
  }
}

/* Button-Grunddesign */
button {
  padding: 10px 20px;
  font-size: 1em;
  margin: 5px 0;
  cursor: pointer;
}

/* Farbklassen */
.green {
  background: green;
  color: white;
}

.grey {
  background: grey;
  color: white;
}

.yellow {
  background: yellow;
  color: black;
}

.orange {
  background: orange;
  color: black;
}

.red {
  background: red;
  color: white;
}

.black {
  background: black;
  color: white;
}

/* Handy-Optimierung: eine Spalte bei schmalem Viewport */
@media (max-width: 500px) {
  .button-container button {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

.status-message {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 10px 15px;
  border-radius: 6px;
  font-family: Arial, sans-serif;
  color: #333;
  margin: 1em 0;
  white-space: pre-line;
}

.hinweisgruen,
.hinweisrot {
  margin: 0;
  cursor: pointer;
  padding: 10px 18px;
  max-width: 560px;
  border: none;
  text-align: left;
  outline: none;
  color: #FFFFFF;
  font-weight: bold;
  transition: background-color 0.2s ease;
  user-select: none;
  display: flex;
  justify-content: space-between;
  margin-bottom: 2px;
}

.hinweisgruen {
  background-color: #4DFF4D;
}

.hinweisrot {
  background-color: #FF6666;
}

/* Accordion Style */
.accordion,
.accordion2 {
  margin: 0;
  background-color: #eee;
  cursor: pointer;
  padding: 10px 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 0.8em;
  transition: background-color 0.2s ease;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}

.accordion,
.accordion2 {
  background-color: #ccc;
}

.accordion:hover,
.accordion2:hover {
  background-color: #aaa;
}

.accordion:after {
  content: "+";
  font-weight: bold;
  font-size: 1.0em;
  color: #444;
  transition: transform 0.2s ease;
}

.accordion.active:after {
  content: "–";
}

.panel {
  padding: 0 18px 12px 18px;
  display: none;
  background-color: white;
  border: 1px solid #ddd;
  border-top: none;
  font-size: 0.8em;
  margin: 0;
  margin-bottom: 10px;
}

.panel form input[type=password],
.panel form button {
  margin: 5px 0;
  padding: 7px;
  font-size: 0.8em;
  width: 100%;
  box-sizing: border-box;
}

.file-list {
  margin-top: 10px;
}

.file-list a {
  display: block;
  padding: 5px 0;
  color: #007BFF;
  text-decoration: none;
}

.file-list a:hover {
  text-decoration: underline;
}

a:link {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}