/*********** TAG SELECTORS ***********/
body {
    font-family: sans-serif;
    font-size: medium;
    margin: 0 auto;
    padding: 25px;
    background-color: #dfe6e9;
}
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
  }
/*********** CLASS SELECTORS : .xxx {} ***********/
.heading {
    text-align: center;
    font-size: 2em;
    color: #2d3436;
  }
.bold {
    font-weight: bold; 
  }
.underline {
    text-decoration-line: underline;
  }
.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: repeat(10, auto  );
    color: #444;
  }

.box-header {
    grid-column-start: 1;
    grid-column-end: 9;
    background-color: #f4f9f9;
  }
.box-login {
    grid-column-start: 1;
    grid-column-end: 9;
    background-color: #90CAF9;
    }
.box-stats {
    grid-column-start: 1;
    grid-column-end: 5;
    background-color: #64B5F6;
    }
.box-selectUI {
    grid-column-start: 5;
    grid-column-end: 9;
    background-color: #64B5F6;
    }
.box-srcdata {
    grid-column-start: 1;
    grid-column-end: 5;
    background-color: #ccf2f4;
    text-align: left;
    }
.box-bestdata {
    grid-column-start: 5;
    grid-column-end: 9;
    background-color: #a4ebf3;
    text-align: left;
}

.box-previous {
    grid-column-start: 1;
    grid-column-end: 3;
    background-color: #ccf2f4;
    /* margin: auto; */
    }  
.box-addressRepresentationSrc {
    grid-column-start: 3;
    grid-column-end: 5;
    /* justify-self: end; */
    background-color: #ccf2f4;
    padding-left: 150px;
    padding-right: 5px;
}
.box-addressRepresentationBest {
    grid-column-start: 5;
    grid-column-end: 7;
    /* justify-self: start; */
    background-color: #a4ebf3;
}
.box-next {
    grid-column-start: 7;
    grid-column-end: 9;
    background-color: #a4ebf3;
    /* margin: auto;     */
}
.box-mappingDecision {
    grid-column-start: 1;
    grid-column-end: 9;
    background-color: #90CAF9;
    text-align: center;
}
.box-mapping {
    grid-column-start: 1;
    grid-column-end: 5;
    background-color: #90CAF9;
}
.box-decision {
    grid-column-start: 5;
    grid-column-end: 9;
    background-color: #90CAF9;
}
.box-download {
    grid-column-start: 1;
    grid-column-end: 9;
    background-color: #ccf2f4;
}   
.box-footer {
    grid-column-start: 1;
    grid-column-end: 9;
    background-color: #f4f9f9;
    }  
.box-input {
    width: 500px;
}
.id {
    width: 285px;
}
.postcode {
  width: 275px;
}
.idAPostcode {
  width: 45px;
}
.gridDoubles {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 2fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: repeat(50, auto  );
    color: #444;
  }
.box-double-idA {
    grid-column-start: 1;
    grid-column-end: 2;
    background-color: #f4f9f9;
  }
.box-double-postcode {
  grid-column-start: 2;
  grid-column-end: 3;
  background-color: #f4f9f9;
  overflow-x: auto;
}
.box-double-streetcode {
  grid-column-start: 3;
  grid-column-end: 4;
  background-color: #f4f9f9;
  overflow-x: auto;
}
.box-double-street {
  grid-column-start: 4;
  grid-column-end: 5;
  background-color: #f4f9f9;
  overflow-x: auto;
}
.box-double-hs {
    grid-column-start: 5;
    grid-column-end: 6;
    background-color: #f4f9f9;
  }
.box-double-bx {
    grid-column-start: 6;
    grid-column-end: 7;
    background-color: #f4f9f9;
  }
.box-double-radioButton {
    grid-column-start: 7;
    grid-column-end: 8;
    background-color: #f4f9f9;
  }
.box-double-checkBox {
    grid-column-start: 8;
    grid-column-end: 9;
    background-color: #f4f9f9;
  }

.box-double-updStatus {
    grid-column-start: 9;
    grid-column-end: 10;
    background-color: #f4f9f9;
  }
.double-header {
    font-weight: bold; 
    color: white;
    background-color: purple;
  }
/*********** ID SELECTORS: #xxx {} ***********/