.mc-device
{
    max-width : 720px;
    margin    : 0 auto;
    padding   : 24px 16px;
    color     : var(--TnTMovieClubSecondaryColor, #fff);
}

.mc-device .mc-device-card
{
    padding       : 24px;
    border        : 1px solid #555;
    border-radius : 16px;
    background    : var(--TnTMovieClubDarkGray, #1f1f1f);
}

.mc-device .mc-device-actions
{
    display   : flex;
    flex-wrap : wrap;
    gap       : 12px;
}

.mc-device button
{
    min-height    : 48px;
    padding       : 12px 20px;
    border        : 1px solid transparent;
    border-radius : 8px;
    background    : var(--TntMovieClubPrimaryColorDark, #96222a);
    color         : #fff;
    cursor        : pointer;
}

.mc-device button:disabled
{
    opacity : 0.55;
    cursor  : not-allowed;
}

.mc-device button:focus-visible
{
    outline        : 3px solid #fff;
    outline-offset : 3px;
}

.mc-device [data-device-message],
.mc-device [data-device-name],
.mc-device [data-device-browser-help]
{
    overflow-wrap : anywhere;
}

.mc-device [data-device-browser-help][hidden]
{
    display : none;
}

.mc-device [data-device-browser-help] a
{
    color           : #fff;
    text-decoration : underline;
}

.mc-device [data-device-message]:empty
{
    display : none;
}

.mc-device .mc-device-settings
{
    margin: 24px 0 0;
    padding: 20px;
    border: 1px solid #555;
    border-radius: 16px;
    min-width: 0;
    background: var(--TnTMovieClubDarkGray, #1f1f1f);
}

.mc-device .mc-device-settings label
{
    display: block;
    margin-bottom: 20px;
}

.mc-device [data-device-brightness]
{
    display: block;
    width: 100%;
    min-height: 44px;
    accent-color: var(--TntMovieClubPrimaryColorLight, #d43f49);
}

.mc-device .mc-device-power
{
    min-height: 44px;
    cursor: pointer;
}

.mc-device .mc-device-settings:disabled
{
    opacity: 0.6;
}

.mc-device .mc-device-settings input:focus-visible
{
    outline: 3px solid #fff;
    outline-offset: 3px;
}

@media (max-width: 480px)
{
    .mc-device
    .mc-device-card
    {
        padding : 16px;
    }

    .mc-device
    .mc-device-actions button
    {
        width : 100%;
    }
}