/*
    顏色一律寫成 var(--odd-xxx, 原本的色碼)：
    沒載 css/2nd/odd_theme_2nd.css 的專案取後面的 fallback，顏色與過去完全相同；
    有載的就會跟著深淺色主題走。

    標題列這個淺藍在通用色票裡沒有對應的項目，硬套別的會改到淺色外觀，
    所以在這裡自己定義一組：淺色值照抄原本的色碼，只有深色值是新的。
*/

@supports (color: light-dark(#000000, #ffffff)) {

:root {
    --odd-blockui-header-bg: light-dark(rgba(178, 215, 233, 1), #2f4a58);

    /* 視窗本體的底色與陰影寫在 jquery.blockUI.customer-2.js 的 inline style 裡，
       inline style 吃得到 css 變數，所以一併定義在這裡 */
    --odd-blockui-surface: light-dark(#F8F8F8, #263238);
    --odd-blockui-shadow: light-dark(rgb(0, 0, 0, .3), rgb(0, 0, 0, .6));
}

}

@media all {
    div#blockui {
        display : none;
        width   : 100%;
        height  : 100%;
        overflow: hidden;
        position: relative;
    }

    div.blockui_header_odd {
        width     : calc(100% - 2em);
        position  : absolute;
        top       : 0;
        left      : 0;
        padding   : .5em 1em;
        background: var(--odd-blockui-header-bg, rgba(178, 215, 233, 1));
        text-align: left;

        button {
            float     : right;
            margin-top: 4px;
        }
    }

    div.blockui_main_odd {
        width     : calc(100% - 2em);
        height    : calc(100% - 4.5em);
        margin-top: 2.5em;
        padding   : 1em;
        overflow-x: hidden;
        overflow-y: scroll;

        div.blockui_mainHeader_odd {
            width: 100%;

            div.blockui_title_odd {
                float: left;
            }

            div.blockui_btnArea_odd {
                text-align: right;
                float     : right;
            }
        }
    }

    div#blockuiLoading {
        width : 100%;
        height: 100%;

        div.process {
            width     : calc(100% - 100px);
            height    : calc(100% - 50px - 95px);
            margin    : 95px 50px 50px 50px;
            text-align: center;

            span.process {
                width    : 100%;
                margin   : .5em 0;
                color    : white;
                font-size: 1.3em;
            }
        }
    }


}

@media (min-width: 0) {
    div.blockui_mainHeader_odd {

        div.blockui_title_odd {
            width: 100%;
        }

        div.blockui_btnArea_odd {
            width        : 100%;
            margin-top   : .5em;
            margin-bottom: .5em;
        }
    }
}

@media (min-width: 1000px) {
    div.blockui_mainHeader_odd {

        div.blockui_title_odd {
            width: auto;
        }

        div.blockui_btnArea_odd {
            width: auto;
        }
    }
}