/*

    jquery.box.css.css

    basic styles thickbox need to run...

    author:     joachim.wendenburg@sixt.de
    created:    10.11.2009

    updated:    14.09.2015
    items:      use position fixed and percentual sizes for responsive use

 */

    #box-window {
        position: fixed;
        left: 50%;
        top: 50%;

        background: #fff;
        z-index: 1001;
        border: 2px solid #e9800f;
        text-align: left;

        -moz-border-radius: 5px;
        -khtml-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px 5px;
    }

    #box-header {
        overflow: hidden;
        zoom: 1;
        background: #ffae04;
    }

    #box-image-header {
        padding: 10px 0 0 30px;
        float: left;
    }

    #box-back,
    #box-next,
    #box-close {
        float: right;
        border: 1px solid #a2a2a2;
        -moz-border-radius: 2px;
        -khtml-border-radius: 2px;
        -webkit-border-radius: 2px;
        border-radius: 2px 2px;
        margin: 6px 6px 6px 6px;
        padding: 1px 5px 2px 5px;
        background: #fff;
        cursor: pointer;
        cursor: hand;
        color: #666;
    }

    #box-title {
        clear: none;
        margin: 0 0 0 0;
        padding: 6px 3px 6px 10px;
        font-size: 14px;
        color: #000;
        font-weight: normal;
        font-family: verdana, arial, sans-serif;
    }

    #box-iframe {
        width: 100%;
        margin-top: -3px;
    }

    #box-content {
        clear: both;
        padding: 0 10px 0 10px;
        margin: 10px 0 10px 0;
        overflow: auto;
    }

    #box-image-content {
        clear: both;
        padding: 0 30px 20px 30px;
        margin: 0;
    }

    #box-image-content img {
        border: 1px solid #333333;
    }

    #box-image-title {
        padding: 6px 0 0 0;
        text-align: center;
    }

    #box-overlay {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #000 url(/common/img/app/reservation/default/bg/bg-box-loading.gif) no-repeat 50% 50%;
        opacity: 0.5;
        filter: alpha(opacity=50);
        z-index: 32000;
    }

    .jalert-button-wrapper {
        overflow: hidden;
        zoom: 1;
        padding: 0 0 20px 0;
    }

    .jalert-button-gray {
        font: normal 11px Verdana,Arial,Helvetica,Geneva,sans-serif;
        line-height:15px;
        text-decoration: none;
        color: #333;
        cursor: pointer;
        cursor: hand;
        background: transparent url("/common/img/app/base/buttons/very-small-button-sprites.gif") no-repeat 0 0;
        background-position: 0 0;
        padding:0 10px 2px 20px;
        margin: 5px 0 5px 10px;
        font-weight: bold;
    }

    .jalert-button-gray:hover {
       background-position: 0 -60px;
        text-decoration: underline;
        color: #000;
    }

    /* ++++++++++++++++++++++++++++++++++++++
    // responsive hack for small breakpoints
    // set box sizes by percent
    ++++++++++++++++++++++++++++++++++++++ */
    @media (max-width: 799px) {
        #box-window {
            left: 15% !important;
            top: 15% !important;
            margin: 0 !important;
            width: 70% !important;
            height: 70% !important;
            overflow: auto;
        }

        #box-content {
            height: auto !important;
        }

        /* ++++++++++++++++++++++++++++++++++++
        // in case of iframe
        // we set all heights by percent
        // assuming 90% is ok for box-content
        // regarding headers height...
        ++++++++++++++++++++++++++++++++++++ */
        #box-window.box-window-iframe {
            overflow: hidden;
        }

        #box-window.box-window-iframe #box-content {
            height: 90% !important;
            overflow: hidden;
            margin-bottom: 0;
        }

        .box-window-iframe #box-content > div,
        .box-window-iframe #box-content #box-iframe {
            height: 100% !important;
            padding: 0 !important;
            margin: 0 !important;
        }
    }
    @media (max-width: 499px) {
        #box-window {
            left: 5% !important;
            top: 5% !important;;
            width: 90% !important;
            height: 90% !important;
        }
    }