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

:root {
    --primary-color: #41cd52;
    --primary-dark-color: #3ab849;
    --secondary-color: #ebffee;
    --secondary-dark-color: #b8d4bc;
    --bg-color: #ffffff;
    --bg-dark-color: #ebffee;
    --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);
}


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

.mailHeaderContainer: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 {
}

.dropdown-content a {
    color: var(--primary-text-color);
    background-color: var(--bg-color);
    transition: background-color .3s;
}

.dropdown-content a:hover, a:focus {
    background-color: var(--bg-dark-color);
}

.mailControlPanel {
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, var(--bg-color) 20%, var(--bg-color) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0, 0, 0,0)), color-stop(90%,var(--bg-color)), color-stop(100%,var(--bg-color))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, var(--bg-color) 20%, var(--bg-color) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(0, 0, 0, 0) 0%, var(--bg-color) 20%, var(--bg-color) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 0%, var(--bg-color) 20%, var(--bg-color) 100%); /* IE10+ */
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, var(--bg-color) 20%, var(--bg-color) 100%); /* W3C */
}

#copyrightBox {
    color: var(--secondary-dark-color)
}