@charset "utf-8";



.mails .content {
    overflow-y: hidden;
}



.mails .zurueckknopf {
    display: none;
    background-color: #488925;
    color: #fff;
    padding: 4px;
    margin-bottom: 2px;
    cursor: pointer;
    overflow-x: hidden;
    white-space: nowrap;
}

.mails .zurueckknopf:hover {
    background-color: #63bc33;
}

.mails .zurueckknopf img {
    width: 24px;
    margin-right: 8px;
}

.mails .zurueckknopf span {
    position: relative;
    top: -6px;
}



.mails .konten {
    background-color: #fff;
    display: inline-block;
    margin-right: 2px;
    width: calc(15% - 10px);
    height: calc(100% - 8px);
    vertical-align: top;
    overflow-y: scroll;
}

.mails .liste {
    background-color: #fff;
    display: inline-block;
    margin-right: 2px;
    width: calc(35% - 10px);
    height: calc(100% - 8px);
    vertical-align: top;
    overflow-y: scroll;
    overflow-x: hidden;
}

.mails .suche {
    background-color: #ceceff;
    display: inline-block;
    margin-right: 2px;
    width: calc(35% - 10px);
    height: calc(100% - 8px);
    vertical-align: top;
    overflow-y: scroll;
}

.mails .anzeige {
    background-color: #fff;
    display: inline-block;
    width: calc(50% - 10px);
    height: calc(100% - 24px);
    vertical-align: top;
    overflow-y: scroll;
    padding: 8px;
}

.mails .anzeige iframe {
    border: none;
    width: 100%;
    height: 50%;
}



@media screen and (max-width: 1400px) {
    .mails .konten {
        width: calc(15% - 10px);
    }

    .mails .liste {
        width: calc(40% - 10px);
    }
    
    .mails .suche {
        width: calc(40% - 10px);
    }

    .mails .anzeige {
        width: calc(45% - 10px);
    }
}



@media screen and (max-width: 1200px) {
    .mails .konten {
        width: calc(100% - 4px);
        display: none;
    }

    .mails .liste {
        width: calc(100% - 4px);
        display: none;
    }

    .mails .suche {
        width: calc(100% - 4px);
        display: none;
    }

    .mails .anzeige {
        width: calc(100% - 4px);
        display: none;
    }
    
    .mails .zurueckknopf {
        display: block;
    }
}



.mails .hatfokus {
    display: inline-block;
}

.mails .versteckt {
    display: none !important;
}



.mails .anzeige .kopf {
    margin-bottom: 16px;
    padding-bottom: 8px;
}

.mails .anzeige .spalte {
    width: calc(50% - 34px);
    display: inline-block;
    vertical-align: top;
    margin-right: 16px;
}

@media screen and (max-width: 1300px) {
    .mails .anzeige .spalte {
        width: calc(100% - 16px);
        margin: 0px;
    }
}



.mails .anzeige .datei {
    width: 64px;
    padding: 8px;
    vertical-align: top;
    text-align: center;
    display: inline-block;
    cursor: pointer;
}

.mails .anzeige .datei:hover {
    background-color: #d3ffba;
}

.mails .anzeige .datei img {
    width: 32px;
    margin-bottom: 4px;
}

.mails .anzeige .datei div {
    font-size: 12px;
    width: 100%;
    overflow-wrap: break-word;
}



.mails .anzeige .hinweis {
    background-color: #fff4ba;
    padding: 4px;
    margin-bottom: 16px;
    font-size: 12px;
}

.mails .anzeige .hinweis a {
    font-size: 12px;
    color: #2d2589;
}



.mail_ai_bar {
    background-color: #e4ffe6;
    padding: 8px;
    border-radius: 8px;
    display: none;
}

.mail_ai_bar .ai_karte {
    background-color: #ffffffa8;
    padding: 8px;
    border-radius: 8px;
    max-width: 300px;
    display: inline-block;
    vertical-align: top;
    margin: 8px;
}

.mail_ai_bar .ai_karte.zusammenfassung {
    border-left: 5px solid #488925;
}

.mail_ai_bar .ai_karte.kontakt {
    border-left: 5px solid #812589;
}

.mail_ai_bar .ai_karte.aufgabe {
    border-left: 5px solid #892525;
}

.mail_ai_bar .ai_karte.termin {
    border-left: 5px solid #2c2589;
}

.mail_ai_bar .ai_karte div {
    font-size: 12px;
}

.mail_ai_bar .ai_karte ul {
    margin-bottom: 0px;
}

.mail_ai_bar .ai_karte li {
    font-size: 12px;
}

.mail_ai_bar .ai_karte .kleinbilduniknopf {
    margin: 8px 0px 0px 0px;
}



.mails .anzeige .toolbar {
    background-color: #f8f8f8;
    padding: 8px;
}

.mails .anzeige .toolbar div {
    background-color: #f8f8f8;
    display: inline-block;
    padding: 8px;
    cursor: pointer;
}

.mails .anzeige .toolbar div:hover {
    background-color: #ffffff;
}

.mails .anzeige .toolbar div img {
    width: 24px;
}

.mails .betreff {
    font-size: 16px;
    color: #488925;
    margin-bottom: 4px;
}

.mails .fett {
    font-weight: bold;
}



.mails .konten .konto {
    padding: 4px;
    margin-bottom: 2px;
    overflow-x: hidden;
    white-space: nowrap;
    cursor: pointer;
}

.mails .konten .konto img {
    height: 16px;
    vertical-align: middle;
}

.mails .konten .konto span {
    vertical-align: middle;
    font-weight: bold;
}



.mails .konten .mailSuchenKnopf {
    background-color: #d3ffba;
    padding: 4px;
    margin-bottom: 2px;
    cursor: pointer;
    overflow-x: hidden;
    white-space: nowrap;
}

.mails .konten .mailSuchenKnopf:hover {
    background-color: #adff7f;
}

.mails .konten .mailSuchenKnopf img {
    width: 24px;
    margin-right: 8px;
}

.mails .konten .mailSuchenKnopf span {
    position: relative;
    top: -6px;
}



.mails .konten .ordner {
    background-color: #d3ffba;
    padding: 4px;
    margin-bottom: 2px;
    cursor: pointer;
    overflow-x: hidden;
    white-space: nowrap;
    transition: all 0.2s;
}

.mails .konten .ordner:hover {
    background-color: #adff7f;
}

.mails .konten .selected {
    background-color: #adff7f;
}

.mails .konten .ordner img {
    width: 24px;
    margin-right: 8px;
}

.mails .konten .ordner span {
    position: relative;
    top: -6px;
}

.mails .konten .ordner.zugeklappt {
    height: 0px;
    padding: 0px;
    margin-bottom: 0px;
}



.mails .liste .nachricht {
    overflow-x: hidden;
    padding: 8px;
    cursor: pointer;
    border-bottom: 1px solid #a5a5a5;
    position: relative;
}

.mails .liste .nachricht:hover {
    background-color: #d3ffba;
}

.mails .liste .selected {
    background-color: #adff7f;
}

.mails .liste .datum {
    color: #5f5f5f;
    margin-bottom: 4px;
    font-size: 12px;
    float: right;
    display: inline-block;
}

.mails .liste .absender {
    margin-bottom: 8px;
}

.mails .liste .vorschau pre {
    font-size: 11px;
    color: #727272;
    overflow: hidden;
    white-space: nowrap;
}

.mails .liste .flags {
    float: right;
}

.mails .liste .flags img {
    margin-left: 8px;
    width: 20px;
    vertical-align: top;
}

.mails .liste .flags div {
    width: 20px;
    height: 20px;
    border-radius: 7px;
    display: inline-block;
    vertical-align: top;
    margin-left: 8px;
}

.mails .liste .status {
    color: #a80000;
    font-size: 10px;
}



.mails .suche .mailSuche {
    margin-bottom: 8px;
    width: calc(100% - 50px);
    font-size: 18px;
    padding: 16px 16px 16px 48px;
    background-image: url('../../img/lupe.png');
    background-position: 8px center;
    background-size: 32px;
    background-repeat: no-repeat;
}

.mails .suche .nachricht {
    overflow-x: hidden;
    padding: 8px;
    cursor: pointer;
    border-bottom: 1px solid #a5a5a5;
}

.mails .suche .nachricht:hover {
    background-color: #d3ffba;
}

.mails .suche .selected {
    background-color: #adff7f;
}

.mails .suche .datum {
    color: #5f5f5f;
    margin-bottom: 4px;
    font-size: 12px;
    float: right;
    display: inline-block;
}

.mails .suche .absender {
    margin-bottom: 8px;
}

.mails .suche .vorschau pre {
    font-size: 11px;
    color: #727272;
    overflow: hidden;
    white-space: nowrap;
}

.mails .suche .flags {
    float: right;
}

.mails .suche .flags img {
    margin-left: 8px;
    width: 20px;
}

.mails .suche .status {
    color: #a80000;
    font-size: 10px;
}



.mails .anzeige .karte {
    padding: 16px;
    margin-bottom: 16px;
    background-color: #ffffff;
    border: 1px solid #c9c9c9;
    cursor: pointer;
    overflow: hidden;
}

.mails .anzeige .karte:hover {
    border: 1px solid #727272;
}

.mails .anzeige .karte .name {
    font-size: 18px;
    margin-bottom: 8px;
    color: #488925;
    white-space: nowrap;
}

.mails .anzeige .karte .adresse {
    margin-bottom: 8px;
}



.mails .anzeige .nachricht {
    background-color: #fff;
    padding: 16px 8px 16px 8px;
    box-shadow: 2px 2px 10px #adadad;
}

.mails .anzeige .datum {
    margin-bottom: 8px;
    text-align: right;
}



.mails .anzeige .fuss {
    margin-top: 32px;
    padding-top: 8px;
}

.mails .anzeige .fuss .nachricht {
    opacity: 0.6;
}

.mails .anzeige .fuss .nachricht:hover {
    opacity: 1.0;
}



.mailneu .ergebnisse {
    position: absolute;
}

.mailneu .ergebnisse .karte {
    padding: 8px;
    margin-bottom: 2px;
    background-color: #ffffff;
    border: 1px solid #c9c9c9;
    cursor: pointer;
}

.mailneu .ergebnisse .karte:hover {
    border: 1px solid #727272;
}

.mailneu .ergebnisse .karte.selected {
    background-color: #d3ffba;
}

.mailneu .ergebnisse .karte .email {
    color: #488925;
}

.mailneu .ergebnisse .karte .name {
    
}



.mailneu .toliste select {
    width: calc(25% - 4px);
    margin-right: 2px;
    display: inline-block;
}

.mailneu .toliste input {
    width: calc(75% - 4px);
    display: inline-block;
}



.vorschausignatur {
    background-color: #fff;
    padding: 8px;
}

.vorschauzitat {
    background-color: #fff;
    padding: 8px;
}



.mailanzeige .inhalt {
    padding: 16px;
    background-color: #fff;
}

.mailanzeige iframe {
    border: 0px;
    width: 100%;
    height: 50%;
}

.mailanzeige .kopf {
    margin-bottom: 16px;
    padding-bottom: 8px;
}

.mailanzeige .spalte {
    width: calc(50% - 34px);
    display: inline-block;
    vertical-align: top;
    margin-right: 16px;
}

@media screen and (max-width: 1300px) {
    .mailanzeige .spalte {
        width: calc(100% - 16px);
        margin: 0px;
    }
}



.mailanzeige .datei {
    width: 64px;
    padding: 8px;
    vertical-align: top;
    text-align: center;
    display: inline-block;
    cursor: pointer;
}

.mailanzeige .datei:hover {
    background-color: #d3ffba;
}

.mailanzeige .datei img {
    width: 32px;
    margin-bottom: 4px;
}

.mailanzeige .datei div {
    font-size: 12px;
    width: 100%;
    overflow-wrap: break-word;
}



.mailanzeige .datum {
    color: #5f5f5f;
    margin-bottom: 8px;
    text-align: right;
}



.mailneu .anhangliste .datei {
    width: 96px;
    padding: 8px;
    vertical-align: top;
    text-align: center;
    display: inline-block;
    cursor: pointer;
}

.mailneu .anhangliste .datei:hover {
    background-color: #fff;
}

.mailneu .anhangliste .datei img {
    width: 64px;
    margin-bottom: 4px;
}

.mailneu .anhangliste .datei div {
    font-size: 11px;
    width: 100%;
    overflow-wrap: break-word;
}


.keinebilder {
    height: 32px;
    vertical-align: middle;
    padding-right: 5px;
}


.passwortvorschlag {
    margin: 4px;
    padding: 8px;
    border: 1px solid #727272;
    background-color: #fff;
    text-align: left;
}



.mailtermin {
    border: 4px solid #bdbdbd;
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 8px;
}



/* NEUE STYLES ZUM TEST */



.mails_neu .konten {
    background-color: #fff;
    display: inline-block;
    margin-right: 2px;
    width: 300px;
    height: calc(100% - 8px);
    vertical-align: top;
    overflow-y: scroll;
    overflow-x: hidden;
}

.mails_neu .suche {
    background-color: #ceceff;
    display: inline-block;
    margin-right: 2px;
    width: 600px;
    height: calc(100% - 8px);
    vertical-align: top;
    overflow-y: scroll;
    overflow-x: hidden;
}

.mails_neu .liste {
    background-color: #fff;
    display: inline-block;
    margin-right: 2px;
    width: 600px;
    height: calc(100% - 8px);
    vertical-align: top;
    overflow-y: scroll;
    overflow-x: hidden;
}

.mails_neu .anzeige {
    display: inline-grid;
    width: calc(100% - 930px);
    height: calc(100% - 8px);
    overflow-y: hidden;
    padding: 0px;
    background-color: unset;
    grid-auto-rows: 1fr;
    grid-template-columns: 200px auto 200px;
    grid-template-rows: min-content min-content auto min-content;
    gap: 6px 6px;
    grid-template-areas:
      "mail_anzeige_absender mail_anzeige_empfaenger mail_anzeige_empfaenger"
      "toolbar toolbar toolbar"
      "mail_anzeige_nachricht mail_anzeige_nachricht mail_anzeige_zusatz"
      "mail_anzeige_antwort mail_anzeige_antwort mail_anzeige_antwort"; 
}

.mails_neu .konten .konto {
    padding: 4px;
    margin-bottom: 2px;
    margin-top: 8px;
    overflow-x: hidden;
    white-space: nowrap;
    cursor: pointer;
}

.mails_neu .konten .konto span {
    vertical-align: middle;
    font-weight: bold;
    font-size: 13px;
}

.mails_neu .konten .ordner span {
    position: relative;
    top: -6px;
    font-size: 13px;
}

.mails_neu .liste .nachricht {
    overflow-x: hidden;
    padding: 8px;
    cursor: pointer;
    border-bottom: 1px solid #a5a5a5;
    display: grid;
    grid-template-columns: 300px auto 160px;
    grid-template-rows: auto auto auto;
    gap: 4px 4px;
    grid-template-areas: 
      "absender flags datum"
      "betreff betreff betreff"
      "vorschau vorschau vorschau";
}

.mails_neu .liste .betreff { 
    grid-area: betreff;
    font-size: 14px;
    color: #488925;
    margin: 0px;
}

.mails_neu .liste .vorschau {
    grid-area: vorschau;
    overflow: hidden;
}

.mails_neu .liste .vorschau pre {
    font-size: 11px;
    color: #727272;
    overflow: hidden;
    white-space: nowrap;
}

.mails_neu .liste .absender {
    grid-area: absender;
    font-size: 13px;
    margin: 0px;
    float: none;
}

.mails_neu .liste .flags {
    grid-area: flags;
    text-align: center;
    float: none;
}

.mails_neu .liste .flags img {
    margin: 0px 2px 0px 2px;
    width: 16px;
    vertical-align: middle;
}

.mails_neu .liste .datum {
    grid-area: datum;
    font-size: 11px;
    color: #5f5f5f;
    text-align: right;
    margin: 0px;
}

.mail_anzeige_absender {
    grid-area: mail_anzeige_absender;
    background-color: #fff;
    padding: 8px;
    border-radius: 8px;
}

.mail_anzeige_empfaenger {
    grid-area: mail_anzeige_empfaenger;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    background-color: #fff;
    padding: 8px;
    border-radius: 8px;
}

.mails_adressen_box {
    display: inline-block;
    padding: 8px;
    background-color: #448223;
    color: #fff;
    border-radius: 8px;
    margin: 4px;
    vertical-align: top;
}

.mails_adressen_box_name {
    font-weight: bold;
}

.mails_adressen_box_adresse {
    font-size: 13px;
}

.mails_adressen_box_domain {
    font-size: 13px;
}

.mails_adressen_box_typ {
    text-align: right;
}

.mails_adressen_box_typ span {
    display: inline-block;
    padding: 3px 6px;
    margin-top: 4px;
    background-color: #2a5115;
    border-radius: 4px;
    font-size: 11px;
}

.mails_neu .anzeige .toolbar {
    grid-area: toolbar;
    background-color: #fff;
    margin: 0px;
}

.mails_neu .anzeige .toolbar div {
    background-color: unset;
    padding: 0px;
}

.mails_neu .anzeige .toolbar .mails_toolbar_knopf {
    display: inline-block;
    padding: 8px;
    cursor: pointer;
    background-color: unset;
    transition: background-color 0.2s;
    border-radius: 4px;
}

.mails_neu .anzeige .toolbar .checkbox {
    background-color: unset;
    display: inline-block;
    padding: 8px;
    cursor: pointer;
    margin: 6px 0px 0px 0px;
}

.mails_neu .anzeige .toolbar .mails_toolbar_knopf:hover {
    background-color: #f8f8f8;
}

.mail_anzeige_nachricht {
    grid-area: mail_anzeige_nachricht;
    background-color: #fff;
    padding: 8px;
    border-radius: 8px;
    overflow-y: scroll;
}

.mail_anzeige_zusatz {
    grid-area: mail_anzeige_zusatz;
    background-color: #fff;
    padding: 8px;
    border-radius: 8px;
    overflow-y: scroll;
}

.mail_anzeige_antwort {
    grid-area: mail_anzeige_antwort;
    background-color: #fff;
    padding: 8px;
    border-radius: 8px;
}



.mails_neu .anzeige .datei {
    display: block;
    width: auto;
    padding: 4px;
    margin-bottom: 4px;
    text-align: left;
    border-radius: 4px;
    background-color: #f2f2f2;
}

.mails_neu .anzeige .datei:hover {
    background-color: #d3ffba;
}

.mails_neu .anzeige .datei img {
    width: 20px;
    margin: 0px 4px 0px 0px;
    vertical-align: middle;
}

.mails_neu .anzeige .datei div {
    font-size: 11px;
    width: calc(100% - 28px);
    display: inline-block;
    vertical-align: middle;
}



.mail_anzeige_antwort textarea {
    height: 50px;
    min-height: 0px;
    display: inline-block;
    width: calc(100% - 50px);
    min-width: 50px;
    vertical-align: bottom;
    margin: 0px;
    overflow: hidden;
    resize: none;
}

.mail_anzeige_antwort .bilduniknopf {
    vertical-align: bottom;
    margin: 0px;
}



.mails_neu .mail_ai_bar {
    padding: 0px;
    background-color: unset;
}

.mails_neu .mail_ai_bar .ai_karte {
    background-color: unset;
    max-width: none;
    display: block;
    margin: 8px 0px 0px 0px;
}

.mails_neu .mail_ai_bar .ai_karte.zusammenfassung {
    border: none;
    background-color: #fdd7ff;
}

.mails_neu .mail_ai_bar .ai_karte.zusammenfassung {
    border: none;
    background-color: #e5ffd7;
}

.mails_neu .mail_ai_bar .ai_karte.kontakt {
    border: none;
    background-color: #fff8db;
}

.mails_neu .mail_ai_bar .ai_karte.aufgabe {
    border: none;
    background-color: #ffd7d7;
}

.mails_neu .mail_ai_bar .ai_karte.termin {
    border: none;
    background-color: #e5ffd7;
}

.mails_neu .mail_ai_bar .ai_karte div {
    font-size: 12px;
}

.mails_neu .mail_ai_bar .ai_karte ul {
    margin: 0px;
}

.mails_neu .mail_ai_bar .ai_karte li {
    font-size: 12px;
    margin-left: 10px;
    margin-bottom: 4px;
}



.mails_neu .mail_antwort_vorschlaege {
    display: none;
}

.mails_neu .mail_antwort_vorschlaege .ai_antwort {
    display: inline-block;
    padding: 6px;
    margin: 0px 4px 8px 4px;
    background-color: #5a5a5a;
    color: #fff;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
}

.mails_neu .mail_antwort_vorschlaege .ai_antwort:hover {
    background-color: #323232;
}



@media screen and (max-width: 1200px) {
    .mails_neu .konten {
        width: calc(100% - 4px);
        display: none;
    }

    .mails_neu .suche {
        width: calc(100% - 4px);
        display: none;
    }

    .mails_neu .liste {
        width: calc(100% - 4px);
        display: none;
    }

    .mails_neu .anzeige {
        width: calc(100% - 4px);
        display: none;
    }

    .mails_neu .liste .nachricht {
        grid-template-columns: auto 60px 100px;
    }
}

.mails_neu .konten.hatfokus {
    display: inline-block;
}

.mails_neu .suche.hatfokus {
    display: inline-block;
}

.mails_neu .liste.hatfokus {
    display: inline-block;
}

.mails_neu .anzeige.hatfokus {
    display: inline-grid;
}

.mails_neu .versteckt {
    display: none !important;
}