.invalid-field {
    border-color: red;
    border-width: 2px;
}
.alert-box {
    min-width: 320px;
    max-width: 680px;
    margin: 20px auto;
    padding: 10px;
    border-radius: 3px;
    font-size: small;
    border-width: 1px;
    border-style: solid;
}

.alert-box-error {
    border-color: darkred;
    background-color: #F9D7DA;
    color: darkred;
}

.alert-box-success {
    border-color: darkgreen;
    background-color: #D1E7DD;
    color: darkgreen;
}

.status-badge {
    font-size: small;
    padding: 1px 4px;
    border-radius: 3px;
    color: #fff;
    font-weight: bold;
}

.status-test {
    background-color: green;
}

.status-pre-registration {
    background-color: chocolate;
}

.status-day-registration {
    background-color: orangered;
}

.status-open {
    background-color: red;
}

.status-close {
    background-color: darkgray;
}

.status-publish {
    background-color: blue;
}

.status-preparing {
    background-color: blue;
}

.status-draft {
    background-color: grey;
}

.status-ondemand {
    background-color: purple;
}

.status-paid {
    background-color: green;
}

.status-unpaid {
    background-color: red;
}

.status-canceled {
    background-color: black;
}

.role-admin {
    background-color: red;
}
.role-society-edit {
    background-color: blue;
}
.role-society-accept {
    background-color: rgba(0, 170, 255, 0.824);
}
.role-event-edit {
    background-color: darkgreen;
}
.role-event-accept {
    background-color: rgba(79, 181, 6, 0.936);
}





/* ----- 2023-08-01-ADD-223 ----- */
.status-badge {
    font-size:11px;
    line-height:1;
    font-weight:normal;
    padding:0.2em .75em 0.3em;
    margin:0.2em 0.2em 0.2em 0;
    border-radius:0;
}

.link {
    margin-bottom:0.75em;
}

article .detail ul,
article .detail ol  {
    margin:1.5rem 0;
}

article .detail ul li,
article .detail ol li {
    list-style:decimal;
    margin-bottom:0.25em;
    margin-left:1.75em;
}


article .detail ul li {
    list-style:disc;
}

header h4 {
    display:block;
    width:max-content;
    background:black;
    color:yellow;
    padding:0.5em 1em;
    position:fixed;
    top:0;
    left:0;
    font-size:1.2rem;
    line-height:1;
    font-weight:600;
}


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

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

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

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

@media screen and (max-width: 420px) {
    .status-badge {
        font-size:10px;
    }
}

@media screen and (max-width: 375px) {
    .status-badge {
        font-size:9px;
    }
}