@import url('https://fonts.googleapis.com/css2?family=Open%20Sans:wght@400;500;700&display=swap');
:root {
  /* Generated from Material Theme Builder Figma plugin
     or `material-color-utilities`. */
  --md-sys-color-primary: #006A6A;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #6FF7F6;
  --md-sys-color-on-primary-container: #002020;
  --md-ref-typeface-plain: system-ui;
  font-size: 18px;
}

/* Usage in custom components */
.primary {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

body {
  font-family: 'Rubik'!important;
  font-weight: 550;
}

/* Hintergrundfarbe */
div.mdl-layout__header-row,
div.mdl-layout__drawer-button,
header.mdl-layout__header,
header.is-casting-shadow {
  background-color: #006A6A;
  font-family: 'Rubik';
  font-weight: 550;
}

/* Eingabefeldcontainer */
div.cpinp {
  width: 342px;
  max-width: 90%;
}

/* Löschen-Button */
button.clear {
  float: right;
  font-weight: bold;
  -webkit-tap-highlight-color: transparent; /* Touch-Highlight deaktivieren */
}

/* Textarea Styles */
textarea.inputfield {
  height: 210px;
  max-width: 97%;
  border: 3px solid rgb(63, 81, 181)!important;
  border-radius: 20px;
  padding-left: 5px!important;
  padding-right: 5px;
  font-weight: bold;
  font-family: 'Rubik';
  outline: none;
  padding: 3px;
  resize: none;
  -webkit-resize: none; /* Sicherstellen, dass resize funktioniert */
  -webkit-transition: border 0.2s;
}

textarea:focus {
  border: 3px solid rgb(88, 109, 228) !important;
}

textarea.inputstyle {
  transition: 0.2s;
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

textarea.disabled {
  transition: 0.2s;
  -webkit-transition: 0.2s;
  border: 2.5px solid #585858 !important;
}

.settings {
  max-width: 80%;
}
.checkboxes {
  max-width: 55%;
}

.switch-row {
  display: flex;
  justify-content: space-between; /* Label links, Switch rechts */
  align-items: center;
}

/* Labels */
.switch-label {
  font-size: 20px; /* Standardgröße, einfach ändern */
  text-align: left;
  flex: 1; /* sorgt dafür, dass Labels links bündig bleiben */
}

/* Allgemeine Button Styles */
button.mdl-button {
  border-radius: 8px;
  font-weight: bold;
}

/* Kopieren-Button */
button.copy {
  margin-top: 5px;
}

/* Kill-Button */
button.kill {
  background-color: rgb(205, 50, 84) !important;
  color: white !important;
  font-weight: bold;
  border-radius: 10px;
  border: 1.5px solid black;
  width: 20px !important;
  float: right;
  margin-right: 10px;
}

/* Menü-Button */
button.menub {
  margin-top: 5px;
  max-width: 75%;
  padding-left: 15px;
  margin-left: 15px;
}

/* Titel */
span.mdl-layout-title {
  font-weight: bold;
}
span.mdl-switch__label {
  font-weight: bold;
}

/* Update Header */
h4.updateheader {
  max-width: 80%;
  border-radius: 25px;
}

.rb {
  background-image: linear-gradient(
    to left,
    violet,
    rgb(107, 21, 168),
    rgb(49, 49, 255),
    green,
    rgb(252, 252, 29),
    orange,
    red
  );
}

h5.changelog {
  background-color: #416b3c54;
  max-width: 90%;
  border-radius: 25px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding-top: 8px;
  padding-bottom: 2px;
}