/* New Entry */

.newcard {
    font-family: sans-serif;
    border: 1px solid black;
    box-sizing: border-box;
    padding: 10px;
}

.newcard .content {
    display: grid;
    align-items: end;
}

.card_link {
    color: #FED9A9;
}

@media screen and (min-width: 480px) {
    .newcard .content {
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
        grid-template-areas:
            "email	 ."
            "from    to"
            "num     tutorium"
            "message message";
    }
}

@media screen and (max-width: 480px) {
    .newcard .content {
        grid-template-columns: auto;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "email"
            "num"
            "from"
            "to"
            "tutorium"
            "message";
    }
}

.newcard .content input {
    margin-left: 0;
    margin-right: 0;
}

.newcard .content span {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto;
    align-items: center;
    justify-items: end;
    margin: 0;
    padding: 0;
}

/* Delete Entry */

.deletecard {
    display: grid;
    font-family: sans-serif;
}

@media screen and (min-width: 480px) {
    .deletecard {
        grid-template-columns: auto auto;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
            "description description"
            "email       reason"
            "subject     .";
        max-width: 100%;
        overflow: hidden;
    }
}

@media screen and (max-width: 480px) {
    .deletecard {
        grid-template-columns: auto;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
            "description"
            "email"
            "reason"
            "subject";
    }
}

/* Search Results */

.foundcard {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto auto;
    grid-template-areas:
    "time		 time"
    "num_text	 tut_text"
    "from_text   to_text"
    "from        to"
    "message	 message"
    "reply_area	 reply_area";
    font-family: sans-serif;
    border: 1px solid black;
    box-sizing: border-box;
    padding: 10px;
}

/* Reply Area Stuff */

.reply_area {
    grid-area: reply_area;
    display: block;
    margin-top: 10px;
}

.reply_box {
    grid-area: reply_box;
    display: grid;

    background: #EFEFEF;
    
    max-height: 0;
    overflow: hidden;
    
    -webkit-transition: max-height 0.5s 0.1s, padding 0.3s;
       -moz-transition: max-height 0.5s 0.1s, padding 0.3s;
        transition: max-height 0.5s 0.1s, padding 0.3s;
}

@media screen and (min-width: 480px) {
    .reply_box {
    grid-template-columns: auto 10px 10em;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "reply_text	 reply_text	  reply_text"
        "reply_email .		  reply_submit "
        "reply_info	 reply_info	  reply_info";
    }
}

@media screen and (max-width: 480px) {
    .reply_box {
    grid-template-columns: auto;
        grid-template-rows: auto auto auto auto;
    grid-template-areas:
        "reply_text"
        "reply_email"
        "reply_submit"
        "reply_info";
    }
}

.reply_box.active {
    max-height: 15em;
    padding: 10px;
}

.reply_box > * {
    margin: 0;
    margin-bottom: 5px;
}

.tutorium {
    grid-area: tutorium;
}

.reply_button {
    grid-area: reply_button;
}

.reply_text {
    grid-area: reply_text;
}

.reply_email {
    grid-area: reply_email;
}

.reply_submit {
    grid-area: reply_submit;
}

.tut_text {
    grid-area: tut_text;
}

.reply_info {
    grid-area: reply_info;
    text-align: right;
    font-size: 8pt;
    color: #AAA;
}

/* Other */

.from {
    grid-area: from;
}

.to {
    grid-area: to;
}

.email {
    grid-area: email;
}

.description {
    grid-area: description;
}

.subject {
    grid-area: subject;
}

.reason {
    grid-area: reason;
}

.reply_button {
    grid-area: reply_button;
    text-align: center;
    margin: auto;
}

.num_text {
    grid-area: num_text;
}

.time {
    grid-area: time;
}

.message {
    grid-area: message;
    padding: 1em;
    margin: 0;
    background: #EFEFEF;
}

.biginput {
    resize: none;
    width: auto;
}

.attention {
    color: red;
}