/*
==========================================================
Tiny Werk Order Center

Datei:
twoc-modal.css

Aufgabe:
Bild-Modal für Motivvorschau
==========================================================
*/

.twoc-dialog{

    width:min(92vw,720px);

    max-width:720px;

    padding:1.5rem;

    border:0;

    border-radius:12px;

    text-align:center;

    overflow:visible;
}

.twoc-dialog::backdrop{

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

.twoc-dialog-image{

    display:block;

    max-width:100%;

    max-height:70vh;

    margin:0 auto 1.25rem auto;
}

.twoc-dialog-title{

    margin:0 0 .75rem;

    font-size:1.45rem;

    font-weight:700;
}

.twoc-dialog-description{

    margin:0;

    line-height:1.55;

    color:#444;

    white-space:pre-wrap;
}

.twoc-dialog-close{

    position:absolute;

    right:.6rem;

    top:.45rem;

    width:42px;

    height:42px;

    border:0;

    background:transparent;

    font-size:2rem;

    line-height:1;

    cursor:pointer;
}

.twoc-dialog-close:hover{

    opacity:.65;
}

@media(max-width:700px){

    .twoc-dialog{

        width:95vw;

        padding:1rem;
    }

    .twoc-dialog-title{

        font-size:1.2rem;
    }

    .twoc-dialog-image{

        max-height:60vh;
    }
}