* {
                box-sizing: border-box;
            }


            body {

                margin: 0;

                padding: 20px;

                font-family:
                    Arial,
                    Helvetica,
                    sans-serif;

                background: #f3f3f3;

            }


            .container {

                max-width: 1500px;

                margin: auto;

            }


            .panel {

                background: white;

                padding: 20px;

                margin-bottom: 15px;

                border-radius: 6px;

                box-shadow:
                    0 2px 6px
                    rgba(0,0,0,0.15);

            }


            h1 {

                margin:
                    0 0 15px 0;

            }


            #postcode {

                width: 240px;

                padding: 11px;

                font-size: 17px;

                border:
                    1px solid #aaa;

                border-radius: 4px;

            }


            button {

                padding:
                    11px 20px;

                font-size: 16px;

                margin-left: 5px;

                border: 0;

                border-radius: 4px;

                background: #333;

                color: white;

                cursor: pointer;

            }


            button:hover {

                background: #555;

            }


            #status {

                margin-top: 12px;

                line-height: 1.5;

                min-height: 24px;

            }


            .error {

                color: #b00000;

            }


            .loading {

                color: #555;

            }


            #map {

                height: 750px;

                width: 100%;

                background: #ddd;

                border-radius: 6px;

                box-shadow:
                    0 2px 6px
                    rgba(0,0,0,0.15);

            }


            /* ==================================================
               LEGEND
               ================================================== */

            .legend {

                background: white;

                padding: 12px;

                border-radius: 5px;

                box-shadow:
                    0 1px 5px
                    rgba(0,0,0,0.3);

                line-height: 24px;

            }


            .legend-title {

                font-weight: bold;

                margin-bottom: 5px;

            }


            .legend-row {

                display: flex;

                align-items: center;

            }


            .legend-box {

                width: 25px;

                height: 15px;

                margin-right: 8px;

                border: 2px solid;

            }


            .area-box {

                border-color: #555;

                background:
                    rgba(100,100,100,0.04);

            }


            .district-box {

                border-color: #0066cc;

                background:
                    rgba(0,102,204,0.12);

            }


            .unit-box {

                border-color: #e00000;

                background:
                    rgba(255,0,0,0.35);

            }


            .neighbour-box {

                border-color: #999;

                background:
                    rgba(150,150,150,0.03);

            }