@import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');

* {
    font-family: 'Nunito';
}

:root {
    --primary-color: #41cd52;
    --primary-dark-color: #3ab949;
    --secondary-color: #e6ffe9;
    --secondary-dark-color: #b8d4bc;
    --inactive-color: #cfcfcf;
    --bg-color: #ffffff;
    --bg-dark-color: #e6ffe9;
    --primary-text-color: #000000;
    --primary-text-dark-color: #000000;
    --secondary-text-color: #ffffff;
    --secondary-text-dark-color: #666666;
    --default-radius: 5px;
    --invalid-color: #f0ad4e;
    --bad-color: #c62d2a;

    --base-text-padding: 10px;
    --base-border-padding: 8px;
    --small-text-padding: 6px;
    --tiny-text-padding: 3px;

    --small-text-size: 14px;
    --normal-text-size: 16px;
    --big-text-size: 18px;
    --huge-text-size: 24px;

    --text-shadow: 0px 2px 2px rgba(0, 0, 0, .3);
    --level1-shadow: 0 2px 5px rgba(0, 0, 0, .6);
    --level2-shadow: 0 4px 9px rgba(0, 0, 0, .6);
}

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: var(--level1-shadow);
    border-radius: var(--default-radius);
}

.materialLevel2 {
    box-shadow: var(--level2-shadow);
    border-radius: var(--default-radius);
}

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

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

.secondaryText {
    color: #777777;
    font-weight: normal;
    font-size: var(--small-text-size);
}

#mailBody {
    padding: var(--base-border-padding);
}

.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)
}

.toEmail.valid {
    background-color: var(--primary-dark-color);
    color: var(--secondary-text-color);
}

.toEmail.invalid {
    background-color: var(--invalid-color);
    color: var(--primary-text-color);
}

.hiddenInput {
    border: none;
    margin: 8px 0;
    font-size: var(--normal-text-size);
}

.toast {
    background-color: var(--bg-color);
    box-shadow: var(--level2-shadow);
    border-bottom-left-radius: var(--default-radius);
    border-bottom-right-radius: var(--default-radius);
}