.smartdialog {

    position : fixed;

    left : 50%; top : 50%;
    transform : translate(-50%,-50%) scale(0,0);
    color: black;
    background-color: beige;
    font-family : Tahoma;
    font-size : 14pt;
    border: 3px solid silver;
    border-radius : 10px;
    transition : 1s;
    opacity : 0;
    cursor: pointer;
    display: block;
    z-index: 300;
    padding : 6px;
    min-width : 130px;
    max-width : 100dvw; 
    max-height: 95dvh;
    overflow-y: auto;

    &.smarthtml {

        --oben-height: calc(50% - 54px);
        --mitte-height:  calc(50% - 54px);
        --unten-height: 40px;

        --oben-width: 100%;
        --mitte-width: 100%;
        --unten-width: 100%;

        --oben-display: block;
        --mitte-display: block;
        --unten-display: block;

        --abstand-x : 0px;
        --abstand-y : 0;


        &.nuroben {

            --oben-height: calc(100% - 102px);
            --anstand-y : 40px;
            --mitte-display : none;
            --abstand-y : 14px;
        }
        &.split {

            --oben-height : calc(100% - 102px);
            --mitte-height : calc(100% - 96px);
            --oben-width : calc(50% - 10px);
            --mitte-width: calc(50% - 10px);
            --oben-display: inline-block;
            --mitte-display: inline-block;
            --abstand-x: 10px;
        }

        width : 100dvw; 
        height : 100dvh; 
        transition : 0s;
        border : 0;
    
        & #oben {

            display : var(--oben-display);
            margin-top : 50px; 
            text-align: left;
            width : var(--oben-width);
            height : var(--oben-height);
            margin-bottom :10px;
            margin-right: var(--abstand-x);

        }
        & #mitte {

            display : var(--mitte-display);
            width : var(--mitte-width);
            height : var(--mitte-height);
            margin-bottom:10px;

        }
        & #unten {

            margin-top: var(--abstand-y);
            display : var(--unten-display);
            width : var(--unten-width);
            height : var(--unten-height);

        }
    }
  
    &:hover { border-color: red; }
    &.vollbild { border-color: silver; }
    &.da {

        opacity : 1;
        transform : translate(-50%,-50%) scale(1,1);
    }
    &.resize {

        resize: both;
        overflow : auto;
        border-radius : 0;
        transition: 0s;
    }
    &.move { 

       cursor : move;
       transition: 0s;
    }
    &.fehler { animation: 500ms smartdialog-fehler infinite; } 
    & .leer { --background-color: orange; }

    & #editor {

        font-size : 14pt;
        width: calc(100% - 4px); 
        height: 100%;
        resize : none;
    }

    & #html {

        width : 100%;
        height : 100%; 
        background-color : white; 
        border : 1px solid black; 
        text-align : left;
        overflow: hidden auto;
    }

    & #main {

        position: absolute;
        left: auto; top: -10px; right: 2px;

        &.editor {

            display   : inline-block;
            white-space : nowrap;
            width : 99.5%;
            top: -4px;
            text-align : right;
            overflow-x : auto;
        }
        & #sb { text-align: center; }
    }
    & button { 
        
        --hell: silver;
        --dunkel: black;
        margin : 1px; 
        font-size : 16pt; 
        margin-right: 3px;
        border-radius: 5px;
        background-color: silver;
        border: 2px solid var(--dunkel);
        border-left: 2px solid var(--hell);
        border-top: 2px solid var(--hell);
        color: black;
        cursor: pointer;
        min-height: 36px;

        &.bild { transform: translate(0,2px); }

        &:hover { background-color: white; --hell: black; --dunkel: silver; }
    
    }
    & #menue {

        white-space: nowrap;
        display: inline-block;
        width : calc(100% - 8px);
        text-align: right;
        margin-right: 4px;

        & button { 
            
            border : 1px solid black; transform: translate(0,1px);
            &.bild { transform: translate(0,3px); }
        }
    }
    & input[type=text] { 
        
        width: 98%; 
        height: 26px;
        border-radius : 4px;
        font-size: 14pt;
        border: 1px solid black;
        background-color: silver;
       
        &:hover { background-color: white }
        &.leer { background-color: orange; }
    }
    & table { width: 100%; background-color: var(--background-color); }
    & td { text-align: left; padding : 0}

    & #deckel {

        display : none;
        position: absolute;
        left: 0; top: 0; right: 0; bottom : 0;
        opacity : 0.3;
        background-color: black;

    }
    & #move {

        --hell: silver;
        --dunkel: black;
        position : relative;
        width : 30px;
        height : 30px;
        background-color: silver;
        border: 2px solid var(--dunkel);
        border-left : 2px solid var(--hell);
        border-top : 2px solid var(--hell);
        margin-right: 2px;
        font-size: 24pt;
        overflow : hidden;
        
        color: black;
        cursor: pointer;
        border-radius: 4px;
        transform: translate(0,10px);

        & div { color : red; transform: translate(-1px,-9px);}

        &:hover { background-color: white; --hell: black; --dunkel: silver; }
    }
    & #vollbildbutton {

        --hell: silver;
        --dunkel: black;
        position : relative;
        width : 30px;
        height : 30px;
        background-color: silver;
        border: 2px solid var(--dunkel);
        border-left : 2px solid var(--hell);
        border-top : 2px solid var(--hell);
        
        color: black;
        cursor: pointer;
        border-radius: 4px;
        transform: translate(0,10px);
        display: inline-block;

        &:hover { background-color: white; --hell: black; --dunkel: silver; }

    }
    & #sb {

        --hell: silver;
        --dunkel: black;
        position : relative;
        width : 30px;
        height : 30px;
        background-color: silver;
        border: 2px solid var(--dunkel);
        border-left : 2px solid var(--hell);
        border-top : 2px solid var(--hell);
        transform: translate(2px,-2px);
        
        color: black;
        cursor: pointer;
        border-radius: 4px;
        display: inline-block;

        &:hover { background-color: white; --hell: black; --dunkel: silver; }


    }
}

/* 
    @keyframes:
    Eine Kapselung scheint leider NICHT möglich zu sein. 
    Ich verwende daher den Namen-Prefix "smartdialog-" 
*/

@keyframes smartdialog-fehler {

    to {  --border-style: dotted; --border-color: red; }
}