html, body {
			height: 100%;
			margin: 0;
			body: black;
		}

		#autocomplete-container {
            width: 100%;
            margin: 10px 0;
            text-align: left;
        }
        
        #vb .leaflet-control-layers-list {
            padding-top: 0px !important;
            padding-bottom: 0px !important;
        }
        
        #vb .layer-color {
            display: inline-block;
            width: 12px;
            height: 12px;
            margin-right: 7px;
            border: 1px solid rgba(0, 0, 0, 0.35);
            border-radius: 2px;
            vertical-align: -1px;
        }
        
        #static-map-renderer {
            position: fixed;
            left: -10000px;
            top: -10000px;
        
            width: 300px;
            height: 300px;
        
            pointer-events: none;
        }
        
        .static-map-image {
                border-radius: 5px;
        }
        
        
        #vb .card {
            border: none;
            transition: all 0.3s;
        }
        
		gmp-place-autocomplete {
		    width: 100%;
            background-color: #ffffcc;
            display: block;
            width: 100%;
        }

        #vb.w3-container {
            width:80%;
            margin-left: auto;
            margin-right: auto;
        }
        
        #vb a {
            text-decoration-line: underline;
            text-decoration-color: black;
            color: black;
        }
        
        #vb a:hover {
            text-decoration-line: underline;
            text-decoration-color: black;
            color: black;
        }

		#vb .leaflet-container {
			height: 400px;
			width: 600px;
			max-width: 100%;
			max-height: 100%;
		}

        #vb .card:hover {
          box-shadow: 0 8px 8px 0 rgba(0,0,0,0.6);
        }
        
        #vb .cropped-image {
            width: 200px;
            height: 250px;
            object-fit: cover;
            object-position: top center;
            border-radius: 6px;
        }
        
        #vb picture.cropped-image img {
            width: 200px;
            height: 250px;
            object-fit: cover;
            object-position: top center;
            border-radius: 6px;
        }
        
        #vb img.cropped-image-questions {
            max-width: 200px;
            object-fit: cover;
            object-position: top center;
            margin-left: auto;
            margin-right: auto;
        }
        
        
        #vb .tight-headings h2 {
            margin-bottom: 8px;
        }

        #vb .tight-headings h3 {
            margin-top: 0;
        }
        
        #vb .party-label svg {
            vertical-align: middle;
        }
        
        #vb .candidate-office {
            min-height: clamp(2em, 2.5, 4.6em);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: clamp(16px, 4vw, 24px);
        }
        
        #vb .candidate-party {
            min-height: 2.2em;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            font-size: clamp(12px, 4vh, 24px);
        }
        
        #vb .candidate-number {
            min-height: 1.5em;
        }
        
        #vb .newsButton svg {
            fill: #000;
            transform: scale(1);
            transition:
                fill 0.2s ease,
                opacity 0.2s ease,
                transform 0.2s ease;
        }
        
        #vb .newsButton.active svg {
          fill: #666;
          opacity: 1;
          transform: scale(1.1);
        }
        
        
        #vb .candidate-grid {
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            justify-items: center;
        }
        
        /* Horizontal profile layout */
        
        #vb .candidate-h-parent {
            display: grid;
            grid-template-columns: auto 1fr;
            grid-template-rows: auto auto auto;
            column-gap: 8px;
            row-gap: 0;
            margin: 10px;
            border-radius: 6px;
            max-width: 50%;
            min-width: 900px;
            color: black;
        }
        
        #vb .candidate-h-parent h2,
        #vb .candidate-h-parent h3 {
            color: black;
        }
        
        /* TUSA */
        
        #vb tusa-race-stage-summary {
            --max-width:900px;
        }
        
        #vb .candidate-h-div1 {
            grid-row: 1 / 4;
            padding-right: 12px;
            /*border-right: 2px solid #815E0E;*/
        }
        
        #vb .candidate-h-div2 {
            grid-column: 2;
            grid-row: 1;
        }
        
        #vb .candidate-h-div3 {
            grid-column: 2;
            grid-row: 2;
        }
        
        #vb .candidate-h-div4 {
            grid-column: 2;
            grid-row: 3;
        }
        
        #vb .candidate-h-div5 {
            grid-column: 2;
            grid-row: 4;
        }
        
        #vb .candidate-h-parent > [id^="newsContainer"] {
            grid-column: 1 / -1;
            width: 100%;
        }
        
        #vb .candidate-h-icons {
            grid-template-columns:auto auto auto auto auto auto auto auto auto auto;
            justify-items: center;
            text-align: center;
            column-gap: 10px;
            margin-right: 10px;
            color: black;
        }
        
        #vb .candidate-h-icons svg {
            transition: transform .2s;
            width:38px;
            height: 38px;
        }
            
        #vb .candidate-h-icons svg:hover {
            transform: scale(1.5);
        }
        
        /* Date Boxes at the Top of the Page */
        
        #vb .date-boxes {
            margin-bottom: 20px;
            grid-template-columns:auto auto auto;
            row-gap:30px;
            justify-items: center;
        }
        
        #vb .date-box {
            background: #ecbf55;
            padding: 10px !important;
            margin: 10px;
            border-radius: 5px;
        }
        
        /* UI Selector, Geocoding and Map */
        
        
        #vb .ui-parent {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
        }
        
        #vb .ui-ballot-selector {
            grid-row: span 2 / span 2;
        }
        
        #vb .ui-ballot-selector-tool {
            text-align: left;
            width: 100%;
        }

        #vb .ui-section-selector {
            grid-row-start: 2;
        }
        
        /* Info Box */
        
        #vb .info-box {
            max-width:50%;
            min-width:900px;
            padding:10px;
            margin:50px 10px;
            background:#E8E9EB;
            display: block;
            border-radius: 5px;
        }
        
        /* Back to Top button */
        
        #backToTop {
            position: fixed;
            bottom: 25px;
            right: 125px;
            z-index: 999;
        
            width: 50px;
            height: 50px;
            border: none;
            border-radius: 50%;
        
            background: #333;
            color: white;
            font-size: 28px;
            cursor: pointer;
        
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
        
            transition:
                opacity 0.3s ease,
                transform 0.3s ease,
                visibility 0.3s;
        }
        
        
        
        #backToTop.visible {
            opacity: 0.8;
            visibility: visible;
            transform: translateY(0);
        }
        
        #backToTop:hover {
            opacity: 1;
            transform: scale(1.1);
        }
        
        
        
        
        #map {
            width: 80%;
            height: 400;
        }
        
        #address-form {
            width: 100%;
            align-items: center;
        }
        
        #address-form button {
            height: 40px;
            min-height: 0;
            padding: 5px;
            line-height: normal;
            background-color: #ecbf55;
            border-radius: 3px;
        }
        
        #map-ballot-form button {
            height: 40px;
            min-height: 0;
            padding: 5px;
            line-height: normal;
            background-color: #ecbf55;
            border-radius: 3px;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        

        /* Tablet size screens */
    @media (min-width: 701px) and (max-width: 1200px) {
            
        #vb {
            
            .static-map-image {
                display: block;
                max-width: 100%;
                height: auto;
                margin: 0 auto;
                border-radius: 5px;
            }
            
            .candidate-grid {
                grid-template-columns: 1fr;
                justify-items: center;
            }
        
            .card {
                width: 80%;
                max-width: 80% !important;
                margin-inline: auto;
                box-sizing: border-box;
            }

            .candidate-h-icons {
                grid-template-columns: repeat(5, auto);
            }
            
            .candidate-h-icons svg {
                width: 38px;
                height: 38px;
                transition: transform .2s
            }
            
            .candidate-h-icons svg:hover {
                  transform: scale(1.5);
            }
            
            .candidate-h-parent {
                clear: both;
                grid-template-columns: minmax(0, 1fr);
                grid-template-rows: auto auto auto auto auto;
            
                width: 60%;
                max-width: 60%;
                min-width: 60%;
            
                margin: 10px auto;
            
                column-gap: 0;
                box-sizing: border-box;
            }
        
            .candidate-h-div1 {
                grid-column: 1;
                grid-row: 1;
                padding-right: 0;
                border-right: none;
                text-align: center;
                margin-top: 10px;
            }
        
            .candidate-h-div2 {
                grid-column: 1;
                grid-row: 2;
                padding: 0 12px;
                text-align: center;
            }
        
            .candidate-h-div3 {
                grid-column: 1;
                grid-row: 3;
                padding: 0 12px;
                text-align: center;
            }
        
            .candidate-h-div4 {
                grid-column: 1;
                grid-row: 4;
                padding: 0 12px 12px;
            }
        
            .candidate-h-div5 {
                grid-column: 1;
                grid-row: 5;
            }
        
            .candidate-h-parent > [id^="newsContainer"] {
                grid-column: 1;
                width: 100%;
            }
        
            .candidate-h-icons {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 12px;
                justify-items: center;
                align-items: center;
            }
        
            .cropped-image {
                width: 100%;
                max-width: 220px;
                height: auto;
                aspect-ratio: 4 / 5;
                object-fit: cover;
            }
            
            .candidate-h-icons svg {
                width: 38px;
                height: 38px;
                transition: transform .2s
            }
            
            .candidate-h-icons svg:hover {
                  transform: scale(1.5);
            }
            
            .ui-parent {
                display: grid;
                grid-template-columns: 1fr;
                gap: 8px;
            }
            
            .ui-ballot-selector {
                grid-row: auto;
            }
            
            .ui-ballot-selector-tool {
                text-align: left;
                width: 100%;
            }
    
            .date-box {
                margin: 10px;
            }
            
            
            .info-box {
                max-width:100%;
                min-width:200px;
                padding:10px;
                margin:50px 10px;
                background:#E8E9EB;
                display: block;
                margin-left: auto;
                margin-right: auto;
            }
        
            }
        }
            
            #map {
                    width: 100%;
                    height: 400;
                }

        
        /* Phone size screens*/
        @media (max-width: 700px) {
            
            
        #autocomplete-container {
            flex: 1 1 auto;
            min-width: 0;
            margin: 10px 0 !important;
        }
        
        #vb.w3-container {
            width:95%;
            margin-left: auto;
            margin-right: auto;
        }
            
        #vb {
        
            /* Not used in horizontal layout */
            .candidate-grid {
                grid-template-columns: 1fr;
                justify-items: center;
            }
            
            .static-map-image {
                display: block;
                max-width: 100%;
                height: auto;
                margin: 0 auto;
                border-radius: 5px;
            }
        
            .leaflet-control-layers {
                    display: none;
                }
        
            .card {
                width: 100%;
                max-width: 100% !important;
                margin-inline: auto;
                box-sizing: border-box;
            }
        
            .candidate-h-parent {
                grid-template-columns: minmax(0, 1fr);
                grid-template-rows: auto auto auto auto auto;
            
                width: calc(100% - 20px);
                max-width: calc(100% - 20px);
                min-width: 0;
            
                margin: 10px auto;
            
                column-gap: 0;
                box-sizing: border-box;
            }
        
            .candidate-h-div1 {
                grid-column: 1;
                grid-row: 1;
                padding-right: 0;
                border-right: none;
                text-align: center;
            }
            
            .candidate-h-div2 {
                grid-column: 1;
                grid-row: 2;
                padding: 0 12px;
            }
            
            .candidate-h-div2 h2 {
                font-size: 24px;
            }
        
            .candidate-h-div3 {
                grid-column: 1;
                grid-row: 3;
                padding: 0 12px;
            }
            
            .candidate-h-div3 h3 {
                font-size: 20px;
            }
        
            .candidate-h-div4 {
                grid-column: 1;
                grid-row: 4;
                padding: 0 12px 12px;
                font-size: 13px;
            }
            
            .amendment-text {
                font-size: 16px;
            }

            .candidate-h-div5 {
                grid-column: 1;
                grid-row: 5;
            }
        
            .candidate-h-parent > [id^="newsContainer"] {
                grid-column: 1;
                width: 100%;
            }
        
            /*.candidate-h-icons {*/
            /*    display: grid;*/
            /*    grid-template-columns: repeat(3, 1fr);*/
            /*    gap: 12px;*/
            /*    justify-items: center;*/
            /*    align-items: center;*/
            /*}*/
            
            .candidate-h-icons {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
                gap: 12px;
                width: 100%;
                min-width: 0;
                justify-items: center;
                align-items: center;
            }
        
            .cropped-image {
                width: 100%;
                max-width: 220px;
                height: auto;
                aspect-ratio: 4 / 5;
                object-fit: cover;
            }
            
            .candidate-h-icons svg {
                width: 38px;
                height: 38px;
            }
            
            .date-boxes {
                margin-bottom: 20px;
                grid-template-columns:auto;
                row-gap:30px;
                justify-items: center;
            }
            
            .ui-parent {
                display: grid;
                grid-template-columns: 1fr;
                gap: 8px;
            }
            
            .ui-parent {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
                gap: 8px;
            }
            
            .ui-parent > * {
                min-width: 0;
            }
            
            
            /*.info-box {*/
            /*    max-width:100%;*/
            /*    min-width:200px;*/
            /*    padding:10px;*/
            /*    margin:50px 10px;*/
            /*    background:#E8E9EB;*/
            /*    display: block;*/
            /*    margin-left: auto;*/
            /*    margin-right: auto;*/
            /*}*/
            
            .info-box {
                width: 600px;
                max-width: 100%;
                min-width: 200px;
                padding: 10px;
                /*margin: 50px auto;*/
                background: #E8E9EB;
                display: block;
                box-sizing: border-box;
            }
            
            
        }
        
        #map {
            width: 100%;
            height: 400;
        }
        
        
        /* Back to Top button */
        
        #backToTop {
            position: fixed;
            bottom: 25px;
            /*right: 125px;*/
            right: 5%;
            z-index: 999;
        
            width: 50px;
            height: 50px;
            border: none;
            border-radius: 50%;
        
            background: #333;
            color: white;
            font-size: 28px;
            cursor: pointer;
        
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
        
            transition:
                opacity 0.3s ease,
                transform 0.3s ease,
                visibility 0.3s;
        }
        
        
        
        #backToTop.visible {
            opacity: 0.8;
            visibility: visible;
            transform: translateY(0);
        }
        
        #backToTop:hover {
            opacity: 1;
            transform: scale(1.1);
        }
            
        }