/* Styles just used by regional PV_Live page */
#map-chart-rhs {
    min-width: 450px; /* map width is 450px so use that here too */
    flex: 1; /* fill available width */
    max-width: 100vw;
    /*max-height: 90vh;*/  /* breaks layout in Chrome (chart controls overlap following text) */
}

#map-chart-container {
    display: flex;
    justify-content: space-around; /* centres map on narrow screens (single-column layout) */
    max-width: 100%;
    flex-wrap: wrap;
    text-align: center;
}

#map-container {
    height: 600px;
}

#map-div {
    height: 620px;
}

#regional-chart-container{
    height: 410px;
    position: relative; /* So that #select-range absolute positioning is relative to this container */
}

#regional-chart-filler {
    padding-top: 190px;
    padding-bottom: 190px;
}

#map-chart-controls-container {
    width: 100%;
}

#play-speed-input {
    width: 2.5em;
    text-align: center;
    line-height: 1.2;
    background-color: #f0f0f0;
}

/* make up/down visible in Chrome (not just when :hover triggered), */
#play-speed-input::-webkit-inner-spin-button,
#play-speed-input::-webkit-outer-spin-button {
   opacity: 1;
}

#error_message {
    padding-left: 60px;
    color: red;
}

#chart-range-controls {
    width: 100%;
    display: flex;
    align-items: center;
    align-content: space-between;
    visibility: hidden;
}

#chart-range-controls > div {
    padding: 0 10px;
}

#select-range {
    position: absolute; /* NB relative positioning of #regional-chart-container to be the 'nearest positioned ancestor' */
    right: 20px;
    display: flex;
    justify-content: flex-end;
}

#date-select-slider{
    width: 100% !important;
}

#date-input-container {
    position:relative;
    margin-top:60px;
    padding-left:30px;
    text-align: center;
}

#range-slider-container {
    width: 90%;
}

#graphControlsTitle {
    float: right !important;
}

#start-date-field, #end-date-field{
    display: inline;
    max-width: 23% !important;
    text-align: center;
}

.space-above { margin-top: 15px !important; }
.space-right { margin-right: 15px !important; }
.space-below { margin-bottom: 15px !important; }
.space-left  { margin-left: 15px !important; }

.select-style {
    border: 1px solid #ccc;
    border-radius: 3px;
    overflow: hidden;
/*    background: #fafafa url("img/icon-select.png") no-repeat 90% 50%; //Julian 16-may-2023 */
    height: 27px;
}

/* for Regional PV_Live page control panel adjacent to GB map to avoid breaking layout */
#map-chart-container * {
    box-sizing: border-box;
}

#map-chart-container input,
#map-chart-container p {
    padding: 0;
    margin: 0;
}

#map-chart-container label {
/* override Bootstrap's label settings, */
    font-weight: 400;
}

.flexy-stuff {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.flexy-group {
    flex: 1;
}

.controls-button-shorter-text {
    width: 21%;
    min-width: 70px;
}

.controls-button-longer-text {
    width: 26%;
    min-width: 80px;
}

.controls-button-shorter-text,
.controls-button-longer-text {
    white-space: normal !important;
    word-wrap: break-word;
} /* remove this stanza and apply .text-wrap with newer BS */