/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: Jun 14 2024 | 13:31:11 */
<style type="text/css">
        .input-area {
            margin-bottom: 1em;
            margin: auto;
           width: 40%;
        }

            .input-area > .input-field {
                display: inline-block;
                padding-right: 2em;
            }

        .results-area {
            display: table;
            table-layout: fixed;
        }

            .results-area > .product {
                padding: 0.75em 1em 1em 1em;
                display: table-cell;
                width: 50%;
                #background-color: #f3f7fb;
            }
#top label {
    font-weight: bold;
    font-size: 16px;
}
                .results-area > .product:first-of-type {

                }

                .results-area > .product > .product-label {
                    font-size: 1.25em;
                    margin-bottom: 0.75em;
                }

        .raid-levels {
            padding-top: 1em;
        }

        .raid-level {
            display: inline-table;
            width: 100%;
        }

            .raid-level:not(:last-of-type) {
                margin-bottom: 1em;
            }

            .raid-level > .raid-summary {
                display: table-cell;
                padding: 0.5em 0.5em 0 0;
                vertical-align: top;
                white-space: nowrap;
                min-width: 5em;
            }

                .raid-level > .raid-summary > .label {
                    font-weight: bold;
                    min-width: 6em;
                }

            .raid-level > .raid-details {
                display: table-cell;
                width: 100%;
            }

                .raid-level > .raid-details > .details {
                    min-height: 1em;
 
                }

        .raid-bar {
            display: inline-table;
            width: 100%;
        }

            .raid-bar > .bar-part {
                display: table-cell;
                height: 32px;
            }

                .raid-bar > .bar-part > .part-label {
                    font-weight: bold;
                    padding: 0 0.5em;
                    white-space: nowrap;
                }

            .raid-bar > .bar-part {
                display: table-cell;
                height: 32px;
                vertical-align: middle;
                transition: width 1s;
            }

            .raid-bar > .storage-part {
                background-color: #005AA3;
                color: #fff;
            }

            .raid-bar > .protection-part {
                background-color: #ccc;
                color: #444;
            }

            .raid-bar > .invalid-part {
                background-color: #ddd;
                color: #888;
            }
        
        #raid-calculator {
            font-family: 'Segoe UI', Verdana;
            font-size: 14px;
        }

        #raid-calculator select {
            padding: 0.25em 0.5em;
        }

        @media only screen and (max-width: 800px) {
            .results-area {
                display: block;
            }

                .results-area > .product {
                    display: block;
                    width: auto;
                }
        }
    </style>