* {
    font-family: 'Titillium Web';
}

:root {
    --primary-color: #41cd52;
    --primary-dark-color: #3ab849;
    --secondary-color: #ebffee;
    --secondary-dark-color: #b8d4bc;
    --bg-color: #ffffff;
    --primary-text-color: #000000;
    --primary-text-dark-color: #000000;
    --secondary-text-color: #ffffff;
    --secondary-text-dark-color: #ffffff;
    --default-radius: 3pt;

    --base-text-padding: 10pt;
}

body {
    background-color: var(--bg-color);
}

.mailHeader {
    background-color: var(--bg-color);
    border-bottom: 1px solid var(--primary-color);
    cursor: pointer;
    transition: background-color .3s;
}

.mailHeader:hover {
    background-color: var(--secondary-color);
}

.materialLevel1 {
    overflow: hidden;
    box-shadow: 0 1pt 3pt rgba(0, 0, 0, .6);
    border-radius: var(--default-radius);
}

.materialLevel2 {
    box-shadow: 0 2pt 6pt rgba(0, 0, 0, .6);
    border-radius: var(--default-radius);
}

.copyrights {
    color: var(--secondary-dark-color);
}

.primaryText {
    color: var(--primary-text-color);
    font-weight: bold;
    font-size: 12pt;
}

.secondaryText {
    color: #777777;
    font-weight: normal;
    font-size: 10pt;
}

#mailBody {
    border-radius: var(--default-radius);
    border-width: 1pt;
    border-style: solid;
    border-color: var(--primary-color);
    padding: 5pt;
}

.read {
    font-weight: normal;
}

.unread {
    font-weight: bold;
}

.iconBtn {
}

.iconBtn:hover {
}