/* =====================================================
   FLANGO FACEBOX FIX + MODERN DESIGN
   ===================================================== */

/* Overlay */
#facebox-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:99998;
}

/* Hauptfenster */
#facebox{
    position:fixed !important;
    left:0 !important;
    top:0 !important;
    width:100% !important;
    height:100% !important;
    z-index:99999 !important;
    display:none;
    overflow:auto;
    padding:18px 8px;
    box-sizing:border-box;
}

/* altes Facebox-Tabellenlayout neutralisieren */
#facebox .popup,
#facebox table,
#facebox tbody,
#facebox tr,
#facebox td{
    display:block !important;
    width:100% !important;
    height:auto !important;
    border:0 !important;
    background:none !important;
    padding:0 !important;
    margin:0 !important;
}

#facebox .tl,
#facebox .tr,
#facebox .bl,
#facebox .br,
#facebox .b{
    display:none !important;
}

/* Popup Box */
#facebox .popup,
.flango-facebox-popup{
    position:relative !important;
    width:94% !important;
    max-width:520px !important;
    margin:45px auto !important;
    background:#fff !important;
    border-radius:16px !important;
    border:1px solid #c8dcef !important;
    box-shadow:0 16px 45px rgba(0,0,0,.35) !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
}

/* Kopfbereich */
#facebox .popup::before,
.flango-facebox-popup::before{
    content:"";
    display:block;
    height:42px;
    background:linear-gradient(
        to bottom,
        #b7cbe4 0%,
        #d7e8f8 55%,
        #eef8ff 100%
    );
    border-bottom:1px solid #adc5df;
}

/* Body / Content */
#facebox .body,
#facebox .content,
.flango-facebox-content{
    display:block !important;
    width:100% !important;
    padding:16px !important;
    background:#fff !important;
    color:#222 !important;
    font-family:Arial,Helvetica,sans-serif !important;
    font-size:14px !important;
    box-sizing:border-box !important;
}

/* Footer */
#facebox .footer{
    display:block !important;
    width:100% !important;
    padding:10px 16px 14px 16px !important;
    background:#fff !important;
    border-top:1px solid #ddd !important;
    text-align:right !important;
    box-sizing:border-box !important;
}

/* Schließen */
#facebox .close,
.flango-facebox-close{
    position:absolute !important;
    top:7px !important;
    right:10px !important;
    width:30px !important;
    height:30px !important;
    border:0 !important;
    border-radius:50% !important;
    background:#fff !important;
    color:#1f6fbd !important;
    font-size:0 !important;
    line-height:30px !important;
    text-align:center !important;
    text-decoration:none !important;
    cursor:pointer !important;
    box-shadow:0 1px 5px rgba(0,0,0,.25) !important;
    z-index:2 !important;
}

#facebox .close::before,
.flango-facebox-close::before{
    content:"×";
    font-size:25px;
    line-height:28px;
    font-weight:bold;
}

#facebox .close img,
#facebox .close_image{
    display:none !important;
}

/* Titel im Popup */
#facebox .content .titel,
#facebox .content .title,
#facebox .content h1,
#facebox .content h2,
.flango-facebox-content h1,
.flango-facebox-content h2{
    margin:0 0 14px 0 !important;
}

/* Formulare */
#facebox input[type="text"],
#facebox input[type="email"],
#facebox input[type="password"],
#facebox select,
#facebox textarea,
.flango-facebox-content input[type="text"],
.flango-facebox-content input[type="email"],
.flango-facebox-content input[type="password"],
.flango-facebox-content select,
.flango-facebox-content textarea{
    width:100% !important;
    max-width:100% !important;
    height:36px !important;
    padding:0 9px !important;
    border:1px solid #aaa !important;
    border-radius:8px !important;
    background:#fff !important;
    color:#222 !important;
    box-sizing:border-box !important;
    font-size:14px !important;
}

#facebox textarea,
.flango-facebox-content textarea{
    height:auto !important;
    min-height:120px !important;
    padding:8px 9px !important;
}

/* Formularzeilen im alten Tabellenformular */
#facebox form table tr{
    display:block !important;
    margin-bottom:9px !important;
}

#facebox form table td{
    display:block !important;
    width:100% !important;
    padding:3px 0 !important;
}

/* Buttons */
#facebox input[type="submit"],
#facebox button,
#facebox .formbutton,
.flango-facebox-content input[type="submit"],
.flango-facebox-content button,
.flango-facebox-content .formbutton{
    display:inline-block !important;
    width:auto !important;
    min-width:120px !important;
    height:auto !important;
    padding:9px 16px !important;
    border:0 !important;
    border-radius:9px !important;
    background:linear-gradient(#55a9f0,#2f83cf) !important;
    color:#fff !important;
    font-weight:bold !important;
    cursor:pointer !important;
    text-decoration:none !important;
}

/* Links */
#facebox a,
.flango-facebox-content a{
    color:#3f8fd6 !important;
    text-decoration:none !important;
}

#facebox a:hover,
.flango-facebox-content a:hover{
    text-decoration:underline !important;
}

/* Loading */
#facebox .loading,
.flango-facebox-loading{
    padding:40px !important;
    text-align:center !important;
}

/* Bilder */
#facebox img{
    max-width:100%;
    height:auto;
}

/* Mobile */
@media(max-width:700px){

    #facebox{
        padding:10px 4px !important;
    }

    #facebox .popup,
    .flango-facebox-popup{
        width:96% !important;
        margin:32px auto !important;
        border-radius:14px !important;
    }

    #facebox .body,
    #facebox .content,
    .flango-facebox-content{
        padding:14px !important;
        font-size:14px !important;
    }

    #facebox .footer{
        padding:8px 14px 12px 14px !important;
    }
}