@import url('variables.css');

.message_header{
  position: relative;
  display:flex;
  align-items: center;      /* vertically center, optional */
  gap: var(--spacing-small, 6px);
}

.message_pin{
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-100%, -75%); /* centers over the corner */
  width: var(--spacing-extra-large, 24px);
  height: var(--spacing-extra-large, 24px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.message_pin.message_pin_show{
  display:flex; /* nur dann funktionieren align-items / justify-content */
}

.message_chevron{
  flex: 0 0 auto;
  margin-left: var(--spacing-small, 6px);
  cursor:pointer;
}

.message_title{
  flex: 1 1 auto;
  font-weight:bold;
}

.message_subtitle{
  font-size: var(--font-size-subheader, 0.8em);
  padding-bottom:  var(--spacing-small, 6px);
  margin-left: var(--spacing-extra-large, 24px);
}

.message_action_container{
  margin-left: var(--spacing-medium, 12px);
}

.message_action_icon{
  font-size: var(--font-size-base, 8pt);
  margin-left: var(--spacing-small, 6px);
  height: 1em;
  width: auto;
  vertical-align: middle;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.message:hover .message_action_icon{
  opacity: 1;
}

div.message_content {
  margin-left:24px;
}

* html div.message_content {
  margin-left: 30px;
}

.linie1_note,.linie2_note,.linie3_note,.linie4_note,.linie1_warning,.linie2_warning,.linie3_warning,.linie4_warning,.linie1_error,.linie2_error,.linie3_error,.linie4_error,.linie1_blackbox,.linie2_blackbox,.linie3_blackbox,.linie4_blackbox{
  display:block;
  /*overflow:hidden;*/
  font-size:1px;
}

.linie1_note,.linie2_note,.linie3_note,.linie1_warning,.linie2_warning,.linie3_warning,.linie1_error,.linie2_error,.linie3_error,.linie1_blackbox,.linie2_blackbox,.linie3_blackbox{
  height:1px;
}

.linie1_note,.linie1_warning,.linie1_error,.linie1_blackbox{
  margin:0 5px;
}

.linie2_note,.linie2_warning,.linie2_error,.linie2_blackbox{
  margin:0 3px;
  border-width:0 2px 0 2px;
}

.linie3_note,.linie3_warning,.linie3_error,.linie3_blackbox{
  margin:0 2px;
}

.linie4_note,.linie4_warning,.linie4_error,.linie4_blackbox{
  height:2px;
  margin:0 1px 0 1px;
}


/*Nachricht*/

.message_container_note{
  border-left:1px solid #00D000;
  border-top:1px solid #00D000;
  border-right:1px solid #00D000;
  border-bottom:1px solid #00D000;
  padding:0.5em;
  background-color:#F8FEF8;
}

.linie3_note, .linie4_note {
  background:#F8FEF8;
  border-left:1px solid #00D000;
  border-right:1px solid #00D000;
}

.linie2_note{
  background:#FEF8F8;
  border-left:2px solid #00D000;
  border-right:2px solid #00D000;
}

.linie1_note{
  background:#00D000;
}

/*Warnung*/

.message_container_warning{
  border-left:1px solid #FFD201;
  border-top:1px solid #FFD201;
  border-right:1px solid #FFD201;
  border-bottom:1px solid #FFD201;
  padding:0.5em;
  background-color:#FFFEF8;
}

.linie3_warning, .linie4_warning {
  background:#FFFEF8;
  border-left:1px solid #FFD201;
  border-right:1px solid #FFD201;
}

.linie2_warning{
  background:#FEF8F8;
  border-left:2px solid #FFD201;
  border-right:2px solid #FFD201;
}

.linie1_warning{
  background:#FFD201;
}


/*Fehler*/

.message_container_error{
  border-left:1px solid #D00000;
  border-top:1px solid #D00000;
  border-right:1px solid #D00000;
  border-bottom:1px solid #D00000;
  padding:0.5em;
  background-color:#FEF8F8;
}

.linie3_error, .linie4_error {
  background:#FEF8F8;
  border-left:1px solid #D00000;
  border-right:1px solid #D00000;
}

.linie2_error{
  background:#FEF8F8;
  border-left:2px solid #D00000;
  border-right:2px solid #D00000;
}

.linie1_error{
  background:#D00000;
}


/*Blackbox*/

.message_container_blackbox{
  border-left:1px solid #000000;
  border-top:1px solid #000000;
  border-right:1px solid #000000;
  border-bottom:1px solid #000000;
  padding:0.5em;
  background-color:#333333;
  color:#aaaaaa;
}

.linie3_blackbox, .linie4_blackbox {
  background:#222222;
  border-left:1px solid #000000;
  border-right:1px solid #000000;
}

.linie2_blackbox{
  background:#111111;
  border-left:2px solid #000000;
  border-right:2px solid #000000;
}

.linie1_blackbox {
  background:#000000;
}