.widget-area {
    page-break-inside: avoid;
    .hbox();

    .widget-subarea {
        padding: 0.44em 0.4em 0.4em 1px;
        margin-left: 6px;
        .border-box-sizing();
        .vbox();
        .box-flex2();

        .widget-hlabel {
            min-width: 10ex;
            padding-right: 8px;
            text-align: right;
            vertical-align: text-top;
            padding-top: 3px;
        }

        .widget-vlabel {
            text-align: center;
            vertical-align: text-bottom;
            padding-bottom: 5px;
        }

        .widget-hslider {
            padding-left: 8px;
            padding-right: 5px;
            margin-top: 11px;

            width: 348px;
            height: 5px !important;
            overflow: visible !important;

            border: 1px solid #CCCCCC;
            background: #FFFFFF;
            .corner-all();

            .ui-slider {
                border: 0px !important;
                background: none !important;

                .ui-slider-handle {
                    width: 14px !important;
                    height: 28px !important;

                    margin-top: -7px !important;
                }
            }
        }

        .widget-vslider {
            border: 1px solid #CCCCCC;
            background: #FFFFFF;
            width: 5px;
            margin-left: 12px;
            padding-bottom: 14px;
            .corner-all();
            height: 250px;

            .ui-slider {
                border: 0px !important;
                background: none !important;
                margin-left: -4px;
                margin-top: 5px;
                height: 100%;

                .ui-slider-handle {
                    width: 28px !important;
                    height: 14px !important;
                    margin-left: -15px;
                }
            }
        }

        .widget-text {
            width: 350px;
            margin-bottom: 0px;
        }

        .widget-numeric-text {
            width: 150px;
        }

        .widget-progress {
            width: 363px;

            /* Disable progress bar animation */
            .bar {
                -webkit-transition: none;
                -moz-transition: none;
                -ms-transition: none;
                -o-transition: none;
                transition: none;
            }
        }

        .widget-combo-btn {
            min-width: 138px; /* + 26px drop arrow btn = 164px */
            height: 30px;
        }

        .widget-container {
            .border-box-sizing();
        }

        .widget-box {
            .start();
            .widget-container();
            margin: 5px;
        }

        .widget-hbox {
            .widget-box();
            .hbox();
        }

        .widget-hbox-single {
            .widget-hbox();
            height: 30px;
        }

        .widget-vbox-single {
            .widget-box();
            .vbox();
            width: 30px;
        }
    }
}