#firecast-modal
{
    position: fixed;
    top: var(--navHeight, 0px);
    left: 0;
    z-index: 1000;

    display: grid;
    width: 100%;
    min-height: calc(100vh - var(--navHeight, 0px));

    background: rgba(0,0,0, .8);
}

#firecast-modal .firecast-modal-container
{
    display: grid;
    grid-template-rows: auto 1fr;
    width: fit-content;
    height: fit-content;
    max-height: 90vh;
    margin: auto;
    background: #303030;
}

#firecast-modal .firecast-modal-content
{
    overflow-y: auto;
}

#firecast-modal .firecast-modal-header
{
    display: grid;
    grid-template-columns: 1fr 40px;
    grid-template-areas:
        "title close";

    background: #171717;
    background: #2e2e2e;
    padding: 6px 0;
}

#firecast-modal .firecast-modal-header .firecast-modal-title
{
    grid-area: title;

    color: #ffffff;
    font-family: "Oswald", sans-serif;
    font-size: 24px;
    margin-left: 20px;
    text-transform: uppercase;
}

#firecast-modal .firecast-modal-header button[name="close"]
{
    grid-area: close;

    all: unset;
    background: #454545;
    width: 100%;
    height: 100%;
    color: #ffffff;
    font-family: monospace;
    font-size: 24px;
    text-align: center;
    cursor: pointer;
}

#firecast-modal .firecast-modal-content iframe
{

    width: 100%;
    height: 100%;
    background: rgba(0,0,0, .8);
    border: 0;
}





#firecast-modal:has(.firecast-modal-container[data-name="messenger"])
{
	position: fixed;
	top: var(--top);
	height: calc(100dvh - var(--top));
	min-height: unset;
    
    --top: calc(82px);
}

#firecast-modal .firecast-modal-container[data-name="messenger"]
{
    width: 100vw;
    height: calc(100dvh - var(--top));
    max-height: unset;
}