/*
___  ___  ___   _____  _     
|  \/  | / _ \ |_   _|| |    
| .  . |/ /_\ \  | |  | |    
| |\/| ||  _  |  | |  | |    
| |  | || | | | _| |_ | |____
\_|  |_/\_| |_/ \___/ \_____/
                             
                             */

.mail-container {
  position: relative;
  height: 80%;
  width: 95%;
  top: 50%;
  left: 50%;

  transform: translate(-50%,-50%);
  color: black;
  text-align: left;
  border: 5px solid white;
  border-radius: 5px;
  display: flex;
  flex-direction: column;

}

.mail-menuzeile{
  position:relative;
  height: 60px;
  font-size: 1.5rem;
  background-color: white;
}

.mail-menuzeile p{
  position: absolute;
  padding-left: 1ch;
  top: 50%;
  transform: translate(0, -50%) ;
}

.mail-close::after{
  position: absolute;
  top: 50%;
  right: 5px;
  font-size: 60px;
  height: auto;
  cursor: pointer;
  color: black;
  content: "\00d7";
  transition: transform 0.5s ease-in-out;
  transform: translate(0, -50%);
}

.mail-close:hover{
  cursor: pointer;
}

.mail-window-content{
  position: relative;
  /* height: 100%; */
  overflow: auto;
}

.mail-header{
  position: relative;
  display: flex; 
  padding: 2ch;
  flex-direction: row;
  align-items: center;
  
  background-color: black;
  min-height: 100px;
}

.mail-inputs{
  position: relative;
  width: 100%;
}

.mail-input-wrapper {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items:flex-end;
  width: 80%;
}

.mail-header-element-titel{
  padding: 1rem; 
  border: 2px solid white;
  color: white; 
  display: inline-block;
  text-align: center;
  font-weight: bold;
  min-width: 10ch;
}

#bt-mail-senden {
  position: relative;
  height: 100px;
  width: 100px;

}

.mail-body {
  background: white;
  margin-top: .5rem;
  padding-block: 1rem;
  padding: 1rem;
}

.mail-body-text{
  color: black;
  display: inline-block;
  font-size: 1.2rem;
}

#mail-an,
#mail-betreff {
  color: white; 
  background-color: transparent;
}

.mail-header-element {
  /* padding: .5rem; */
  margin-left: 2rem;
  min-width: 30ch;
  bottom: 5px;
  padding-bottom: 3px;
}

#mail-body-keyword {
  width: 8ch;
  font-size: 1.2rem;
  font-weight: bold;
}

@media only screen and (max-width: 600px){
  
  .mail-container {
    height: 95%;
  }
  
  .mail-input-wrapper {
    width: 80%;
  }
  .mail-header{
    padding: 1ch;
  }
  .mail-header-element-titel{
    height: 1.5rem;
    padding: unset;
    font-size: 1rem;
    width: unset;
    min-width: 8ch;
  }

  .mail-header-element{
    padding: unset;
    bottom: unset;
    margin: unset;
    margin-left: 1ch;
    min-width: 18ch;
    font-size: smaller;
  }
  
  #mail-an{
    word-break: break-all;
  }

  #bt-mail-senden{
    height: 80px;
    width: 80px;
    top: unset;
    right: unset;
    transform: unset;
    position: relative;
  }

}