:root{--login-page-width:320px;--message-width:320px}center-content{display:flex;width:100%;justify-content:center}login-screen{width:var(--login-page-size);display:flex;flex-direction:column;gap:var(--gap-medium)}login-screen div{width:100%;display:flex;justify-content:space-between;gap:var(--gap-medium)}login-screen button{align-self:flex-end}.small-button{background-color:transparent}@media(max-width:500px){login-screen{width:unset}center-content{width:unset}login-screen div{flex-wrap:wrap}}existing-case,new-message{display:flex;flex-direction:column;gap:var(--gap-medium)}new-message{margin-top:var(--gap-medium);gap:var(--gap-small)}new-message #send-message{align-self:flex-end}case-row{display:flex;flex-direction:column;gap:var(--gap-small)}case-row label{text-transform:uppercase;border-bottom:1px solid var(--color-accent);color:oklch(from currentColor l c h / 50%)}case-row info{min-height:1lh}#logout{position:absolute;right:var(--gap-medium);margin-top:calc(-1 * var(--gap-medium))}@media(max-width:800px){#logout{position:unset}}messages{display:flex;flex-direction:column;gap:.75rem;padding:1rem}messages message{max-width:70%;width:fit-content;display:grid;justify-items:start;grid-template-rows:auto 1fr;gap:.3rem}messages message header{display:flex;gap:.5rem;font-size:.75rem;opacity:.55;flex-direction:row}messages message header time{margin-left:auto}messages message bubble{padding:.75rem 1rem;border-radius:18px;background:var(--background-color-input);border:1px solid var(--line);color:var(--color-text);line-height:1.4;text-align:left;display:flex;flex-direction:column;gap:var(--gap-small)}messages message:has(author[data-author-type="Reporter"]){align-self:flex-end;justify-items:end;text-align:right}messages message:has(author[data-author-type="Reporter"]) header{justify-content:flex-end}messages message:not(:has(author[data-author-type="Reporter"])){align-self:flex-start}messages message:has(author[data-author-type="Reporter"])+message:has(author[data-author-type="Reporter"]) header{display:none}messages message:has(author[data-author-type="Admin"])+message:has(author[data-author-type="Admin"]) header{display:none}messages message:has(author[data-author-type="Reporter"]) bubble{border-bottom-right-radius:2px}messages message:not(:has(author[data-author-type="Reporter"])) bubble{border-bottom-left-radius:2px}#file-list{display:flex;flex-direction:column;gap:var(--gap-small)}.file-element,#uploading{display:flex;gap:var(--gap-medium);justify-content:space-between}.file-element:hover,.file-element:hover>p,#uploading:hover{font-weight:bold}#issue-file{display:none}#issue-file-display>label{display:flex;align-items:center;flex-direction:column;cursor:pointer;padding:var(--gap-medium)}#issue-file-display>label.drag-over{outline:1px dotted var(--color-accent)}#issue-file-display>label svg{fill:var(--color-text)}#issue-file-display>label:hover>svg{fill:var(--color-accent) !important}postbox{width:100%}message-files{display:flex;flex-wrap:wrap;gap:var(--gap-medium)}message-files>fieldset{border:none}message-files first{min-width:200px;flex:1;display:flex;gap:var(--gap-small);flex-direction:column}message-files p{opacity:.5;margin:var(--gap-small);max-width:10ch}message-files>fieldset legend{display:none}#top-image {
                    background-image: image-set(
                        url('/top-image-follow-case-1920.avif') type('image/avif'),
                        url('/top-image-follow-case-1920.jxl') type('image/jxl'),
                        url('/top-image-follow-case-1920.jpg') type('image/jpeg')
                    );
                    background-size: cover;
                    background-position-y: -100px;
                    height: 700px;
                    align-content: end;
                    background-position: center;
}

@media (max-width: 1200px)
{
# top-image {
        background-image: image-set(
        url('/top-image-follow-case-1200.avif') type('image/avif'),
        url('/top-image-follow-case-1200.jxl') type('image/jxl'),
        url('/top-image-follow-case-1200.jpg') type('image/jpeg')
    );

    height: 500px;
    }
}

@media (max-width: 1000px)
{
# top-image {
        background-image: image-set(
        url('/top-image-follow-case-1000.avif') type('image/avif'),
        url('/top-image-follow-case-1000.jxl') type('image/jxl'),
        url('/top-image-follow-case-1000.jpg') type('image/jpeg')
    );
    }
}

@media (max-width: 800px)
{
# top-image {
    background-image: image-set(
        url('/top-image-follow-case-800.avif') type('image/avif'),
        url('/top-image-follow-case-800.jxl') type('image/jxl'),
        url('/top-image-follow-case-800.jpg') type('image/jpeg')
    );
    }
}