/* Override Colour Scheme */
/* https://stackoverflow.com/questions/46484826/can-not-override-bootstrap-active-class-for-button */

/* define colours */
:root {
    --bim-blue: #004A63;    /* e.g., color: var(--bim-blue); */
    --bim-green: #8DC745;
}

/* primary button (blue with green hover) */
.btn.btn-primary {
    background-color: var(--bim-blue);
    border-color: var(--bim-blue);
}
.btn.btn-primary:active, .btn-primary:hover{
    background-color: var(--bim-green);
    border-color: var(--bim-blue);
}

/* primary outline button (white with blue hover, green check) */
.btn.btn-outline-primary {
    background-color: white;
    border-color: var(--bim-blue);
    color: var(--bim-blue);
}
.btn.btn-outline-primary:hover{
    background-color: var(--bim-blue);
    border-color: var(--bim-blue);
    color: white;
}
.btn.btn-outline-primary:active{
    background-color: var(--bim-green);
    border-color: var(--bim-blue);
}

/* secondary button (green with blue hover) - not used */
.btn.btn-secondary {
    background-color: var(--bim-green);
    border-color: var(--bim-green);
    color: var(--bim-blue);
}
.btn.btn-secondary:active, .btn-secondary:hover{
    background-color: var(--bim-blue);
    border-color: var(--bim-blue);
    color: var(--bim-green);
}

/* secondary outline button (white with blue hover, green check) */
.btn.btn-outline-secondary {
    text-align: left;
    background-color: white;
    border-color: #ddd;
    color: black;
}
.btn.btn-outline-secondary:hover{
    border-color: var(--bim-blue);
}
.btn.btn-outline-secondary:active{
    border-color: var(--bim-green);
}

/* focus halo around the active form control */
.form-control:focus, .form-select:focus, .btn.btn-primary:focus, .btn.btn-outline-primary:focus, .btn.btn-outline-secondary:focus {   
  border-color: var(--bim-green);
  box-shadow: 0px 0px 1px 3px rgb(141, 199, 69, 0.35);
  outline: 0 none;
} 


/* Layout */

.row {
    padding-bottom: 10px;
}

.container {
    padding: 10px;
}

.copyright {
    font-size: small;
    text-align:center;
}

#validation_result {
    font-size: large;
}

#percentage {
    font-weight: bold;
}

h1 {
    text-align: center;
}

/* Map */

#map { 
    width: 100%;
    height: 600px;
    border: 1px var(--bim-blue) solid;
}

/* #infobox {
    background-color: white;
    padding: 5px;
    font-size: large;
    border-radius: 8px;
    pointer-events: none;
} */

#info {
    font-size: large;
}

#imgbox {
    pointer-events: none;
}

#ctrlpanel {
    background-color: white;
    padding: 5px;
    border-radius: 8px;
}

#commentBox {
    height: 100px;
}

.mono {
    font-family: 'Courier New', Courier, monospace;
}

.modal-body-check {
    text-align: left;
    padding-left: 33%;
}
.modal-body-help {
    text-align: left;
    font-size: small;
}