.message-title {
    grid-area: header;

    font-size: 1rem;
    font-weight: bold;
    color: #004070;

    padding-right: 0.5rem;

    border-bottom: 1px solid;
}

.message-status-and-date {
    grid-area: status;

    text-align: right;

    padding-left: 0.5rem;

    border-bottom: 1px solid;
}


.message-title, .message-status-and-date {
    padding-bottom: 0.5rem;
}

.message-description {
    grid-area: description;
    padding-right: 0.5rem;
}

.message-type-tags {
    border-left: 1px solid;

    padding-left: 0.5rem;
    grid-area: types;
}

.message-description, .message-type-tags {
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;

    border-bottom: 1px solid;
}

.message-creation-date {
    grid-area: footer;
}

.message-quick-edit {
    grid-area: quick-edit;
}

.message-edit {
    grid-area: edit;
}

.message-delete {
    grid-area: delete;
}

.message-change-status {
    grid-area: change-status;
}

.message-quick-edit, .message-edit, .message-delete, .message-change-status {
    padding-bottom: 0 !important;
}

.message-tags {
    grid-area: tags;
    padding-right: 0.5rem;
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;

    border-top: 1px solid;
}

.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
            "header header header header status status status"
            "description description description description description types types"
            "footer footer footer footer footer footer footer"
            "tags tags tags tags tags tags tags";
}

.button-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
            "quick-edit edit change-status delete";

    border-bottom: 1px solid #dee2e6;
    margin-bottom: 0.5rem;
    padding-bottom: 1rem;
}


.btn-tertiary-outline:hover, .btn-danger-outline:hover {
    color: white;
}

.btn-tertiary-outline:hover {
    background-color: #004070;
}

.btn-danger-outline:hover {
    background-color: #dc3545;
}

.disabled-area {
    background-color: #EDEDED !important;
}

.tag-button:hover, .tag-button:focus {
    background-color: #004070;
}

.tag-info {
    color: white !important;
}

.alert.alert-danger.message .card-body .activity-title {
    color: #c9575e !important;
}

.alert.alert-danger.message {
    box-shadow: 0 0 4px 0 #e9535382;
}

.alert.alert-warning.message .card-body .activity-title {
    color: #c29127 !important;
}

.alert.alert-warning.message {
    box-shadow: 0 0 4px 0 rgba(245, 167, 57, 0.51);
}

.activity-list {
    color: #067aac !important;
}

.no-status-messages-text {
    color: #004070;
    padding: 10px 0;
}

#description-nl, #description-en {
    height: 10rem;
    padding: .75rem .75rem;
}

#tech-message {
    height: 5rem;
}

#prevMessageBlock {
    border-radius: 1rem;
    padding: .75rem .75rem;
}

#post-title-link-styling {
    text-decoration: none;
}

a.message-title:hover #post-title-link-styling-title {
    text-decoration: underline;
}

a.message-title:hover .material-icons {
    text-decoration: none;
}


#priority-icon-in-results, #high-priority-icon-on-homepage, #high-priority-icon-on-detailpage {
    color: #d34950;
}

.tox-tinymce {
    border-radius: 0.8rem !important;
    border: 1px solid #ced4da;
}


.tox.tox-tinymce {
    height: 15rem !important;
}

.mce-container textarea::placeholder {
    font-family: Source Sans Pro, sans-serif;
    font-size: 1rem;
    color: #333333;
}

.compact-status-post {
    padding: 0.8rem !important;
    padding-left: 1rem !important;
    margin-bottom: 0.85rem !important;
    border-radius: 1rem;
    box-shadow: 0 0 3px 0 #868484;
}

.compact-status-title {
    margin-bottom: 0 !important;
    margin-top: 0.60rem !important;
}

.status-message-link-block {
    text-decoration: none !important;
    position: relative;
    z-index: 1;

}

.status-message-link-block:hover li.compact-status-post {
    transition: transform 0.5s ease-in-out;

    transform: scale(1.02);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}


.active-posts .card-body ul .status-message-link-block li {
    /*border: 2px solid #af1b22;*/
    /*box-shadow: 0 0 3px 1px #af1b22bf;*/
}

.scheduled-posts .card-body ul .status-message-link-block li {
    /*box-shadow: 0 0 3px 1px #daa42abf;*/
}

.active-posts .card-body .activity-title {
    color: #004070;
}

.scheduled-posts .card-body .activity-title {
    color: #004070;
}

.tox-tinymce {
    border-radius: 0.8rem !important;
    border: 1px solid #ced4da;
}

.mce-container textarea::placeholder {
    font-family: Source Sans Pro, sans-serif;
    font-size: 1rem;
    color: #333333;
}

#tech-message-below-info {
    color: #999999;
}

#linkInput {
    height: 25px !important;
    padding: 0.5rem !important;
    border: none;
    background-color: transparent;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#copyLinkBlock {
    background-color: #FFFFFF;
    height: min-content;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    border-radius: 1rem;
}

#copyButton, #openPublicPageButton {
    height: fit-content !important;
}

#copyButton {
    border-radius: 0;
}

#openPublicPageButton {
    padding-right: 1rem;
    margin-left: 0.05rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.material-symbols-outlined.medium-icon {
    font-size: initial !important;
}

#copyLinkBlock {
    margin-top: 0.8rem;
}

#detail-status-title-header {
    display: flex;
    justify-content: space-between;
}

@media screen and (max-width: 768px) {

    .wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        grid-template-areas:

            "header header"
            "description description"
             "status status"
            "types types"
            "footer footer"
            "tags tags";
    }

    .message-title {
        grid-area: header;

        font-size: 1rem;
        font-weight: bold;
        color: #004070;

        padding-top: 0.5rem;

        border-bottom: 1px solid;
    }

    .message-status-and-date {
        grid-area: status;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        grid-template-areas:
          "status status"
            "startdate enddate";


        padding: 0;
        text-align: left;
        border-bottom: 1px solid;
        align-items: end;
        gap: 0.5rem;

    }

    #start-date-tag {
        grid-area: startdate;
    }

    #end-date-tag {
        grid-area: enddate;
    }

    .status-tag {
        grid-area: status;
        width: fit-content;
    }

    .message-title, .message-status-and-date {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .message-description {
        grid-area: description;
        padding-right: 0.5rem;

    }

    .message-type-tags {
        grid-area: types;
    }

    .message-description, .message-type-tags {
        padding-bottom: 0.5rem;
        padding-top: 0.5rem;
        padding-left: 0;

        border-left: none;
        border-bottom: 1px solid;
    }


    .message-creation-date {
        grid-area: footer;
    }

    .message-edit, .message-change-status, .message-quick-edit, .message-delete {
        margin-bottom: 0.3rem;
    }

    .button-wrapper {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "quick-edit"
            "edit"
            "change-status"
            "delete";

        padding-bottom: 0.5rem;
        border-bottom: 1px solid #dee2e6;
        margin-bottom: 0;
    }

    .message-tags {
        grid-area: tags;
        padding-right: 0.5rem;
        padding-bottom: 0.5rem;
        padding-top: 0.5rem;

        border-top: 1px solid;
    }

    #description-nl, #description-en {
        height: 5rem;
        padding: .75rem .75rem;
        margin-bottom: 0.5rem;
    }


    #description-fields, #point-in-time-fields, #title-fields, #type-fields {
        flex-direction: column;
    }


    #point-in-time-enddate-div, #point-in-time-startdate-div, #title-nl-div, #title-en-div, #description-nl-div, #description-en-div, #types-div, #applications-div {
        width: 100% !important;
    }

    #point-in-time-enddate-div {
        margin-top: 1rem;
    }

    #end-date-options_specific-time, #end-date-options_no-time-open, #end-date-options_no-time-closed {
        position: absolute !important;
    }

    .status-post-form {
        padding: 30px;
    }

    #types-div {
        margin-bottom: 1rem;
    }

    .list-block {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .compact-list-title-div {
        width: 100%;
        justify-content: space-between;
    }

    span.more {
        margin-top: 0.5rem;
    }

    #description-en-div, #_title-en {
        margin-top: 0.5rem;
    }

    #tech-message-below-info {
        margin-top: 0.2rem;
    }

    #copyLinkBlock {
        margin-top: 0;
        margin-bottom: 1rem;
    }

    #detail-status-title-header {
        display: flex;
        flex-direction: column;
    }
}