/* Global */

html {
    font-size: 16px;
}

h1 {
    font-weight: bold;
    line-height: 1;
    margin: 0;
}

p {
    margin-bottom: 0;
}

a {
    text-decoration: underline;
}


/* Geocoder */

#geocoder {
    display: none;  /* Displayed programmatically. */
    width: 100%;
}

#geocoder h2 {
    font-size: 1.5rem;  /* 24px */
    font-weight: bold;
    margin-bottom: 1.875rem;  /* 30px */
    margin-top: 0;
}

#geocoder .progress {
    align-items: center;
    background: #eee;
    border-radius: 1.25rem;  /* 20px */
    box-shadow: none;
    display: flex;
    height: auto;
    justify-content: center;
    margin: 1.875rem auto 1.875rem;  /* 30px */
    padding: 1.25rem;  /* 20px */
}

#geocoder .progress > .circle {
    width: 11.25rem;  /* 180px */
}

#geocoder .progress > .circle > .label {
    align-items: center;
    background: #fff;
    border: 0.25rem solid #fff;  /* 4px */
    border-radius: 50%;
    color: #666;
    display: flex;
    font-size: 1.25rem;  /* 20px */
    height: 3.125rem;  /* 50px */
    justify-content: center;
    margin: auto;
    width: 3.125rem;  /* 50px */
}

#geocoder .progress > .circle.active > .label {
    background: #07b;
    color: #fff;
}

#geocoder .progress > .circle.done > .label {
    background: #6b2;
    color: #fff;
}

#geocoder .progress > .circle.err > .label {
    background: #d00;
    color: #fff;
}

#geocoder .progress > .circle > .title {
    color: #666;
    display: block;
    font-size: 0.875rem;  /* 14px */
    font-weight: bold;
    margin-top: 0.625rem;  /* 10px */
    text-align: center;
}

#geocoder .progress > .circle.active > .title {
    color: #07b;
}

#geocoder .progress > .circle.done > .title {
    color: #666;
}

#geocoder .progress > .circle.err > .title {
    color: #d00;
}

#geocoder .progress > .bar {
    background: #fff;
    display: block;
    height: 0.625rem;  /* 10px */
    margin: 0 -4.0625rem 0 -4.0625rem;  /* -65px */
    position: relative;
    top: -0.75rem;  /* -12px */
    width: 8.75rem;  /* 140px */
}

#geocoder .progress > .bar.active,
#geocoder .progress > .bar.done {
    background: #6b2;
}

#note {
    color: #490;
    margin-bottom: 1.875rem;  /* 30px */
    text-align: center;
}

#geocoder #waitLoader {
    display: block;
    margin: auto;
}

#geocoder .row {
    margin: 0;
}

#geocoder .form-group {
    margin: auto;
}

#geocoder .tab {
    display: none;  /* Displayed programmatically. */
}

#geocoder .tab > p:not(:last-child) {
    margin-bottom: 1.875rem;  /* 30px */
}

#geocoder .lead {
    font-size: 1.25rem;  /* 20px */
    font-weight: normal;
    line-height: 1;
    margin-bottom: 0;
}

#geocoder .error-message {
    color: #d00;
}

#geocoder #tab0 {
    margin: auto;
    width: 40rem;  /* 640px */
}

#geocoder .fileSelector {
    border: 0.125rem dashed #ddd;  /* 2px */
    border-radius: 1.25rem;  /* 20px */
    padding: 1.25rem;  /* 20px */
}

#geocoder .fileSelector > p:not(:last-child) {
    margin-bottom: 1.25rem;  /* 20px */
}

#geocoder .fileSelector input[type="file"] {
    display: none;
}

#geocoder .fileSelector.draggingOver {
    background: #eee;
}

#geocoder #tab1 {
    margin: auto;
    width: 40rem;  /* 640px */
}

#geocoder #tab1 th {
    background: #eee;
    line-height: 1;
    padding: 1.25rem;  /* 20px */
}

#geocoder #tab1 th:first-of-type {
    border-top-left-radius: 0.625rem;  /* 10px */
}

#geocoder #tab1 th:last-of-type {
    border-top-right-radius: 0.625rem;  /* 10px */
}

#geocoder #tab1 tbody tr:nth-of-type(even),
#geocoder #tab1 tbody tr:nth-of-type(odd) {
    background: #f7f7f7;
}

#geocoder #tab1 tbody tr.required {
    background: #def;
}

#geocoder #tab1 td {
    border-bottom: 0.0625rem solid #ddd;  /* 1px */
    border-top: 0;
    line-height: 1;
    padding: 0.625rem 1.25rem;  /* 10px 20px */
    vertical-align: middle;
}

#geocoder #tab1 td label {
    font-weight: normal;
    line-height: inherit;
    margin-bottom: 0;
}

#geocoder #tab1 td label.required::before {
    color: #d00;
    content: "*";
    margin-right: 0.3125rem;  /* 5px */
}

#geocoder #tab1 td select {
    border: 0.0625rem solid #ddd;  /* 1px */
    border-radius: 0.625rem;  /* 10px */
    box-shadow: none;
    color: inherit;
    font: inherit;
    height: auto;
    padding: 0.625rem;  /* 10px */
}

#geocoder #tab3 {
    margin: auto;
    width: 31.25rem;  /* 500px */
}

#geocoder #tab3 div {
    align-items: center;
    display: flex;
}

#geocoder #tab3 div:not(:last-child) {
    margin-bottom: 1.25rem;  /* 20px */
}

#geocoder #tab3 input {
    display: block;
    margin: 0 0.625rem 0 0;  /* 10px */
}

#geocoder #tab3 label {
    display: block;
    font-weight: normal;
    margin: 0;
}

#geocoder #tab4 #trackerProgress {
    background: #eee;
    border-radius: 0.625rem;  /* 10px */
    width: 100%;
}

#geocoder #tab4 #trackerBar {
    background: #07b;
    border-radius: 0.625rem;  /* 10px */
    color: #fff;
    font-weight: bold;
    height: 2.5rem;  /* 40px */
    line-height: 2.5rem;  /* 40px */
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
    width: 1%;
}

#geocoder .stepButtons {
    margin-top: 1.875rem;  /* 30px */
}

#geocoder .stepButtons > * {
    margin: 0 0.3125rem;  /* 5px */
}

#geocoder .btn {
    border: 0;
    border-radius: 0.625rem;  /* 10px */
    font: inherit;
    font-weight: bold;
    line-height: 1;
    padding: 0.9375rem;  /* 15px */
}

#geocoder .btn:active {
    box-shadow: none;
}

#geocoder .btn:active:focus,
#geocoder .btn:focus {
    outline: 0;
}

#geocoder .btn-primary {
    background: #07b;
    color: #eee;
}

#geocoder .btn-primary:active,
#geocoder .btn-primary:active:focus,
#geocoder .btn-primary:active:hover,
#geocoder .btn-primary:focus,
#geocoder .btn-primary:hover {
    background: #18c;
    color: #fff;
}

#geocoder .btn-primary:disabled,
#geocoder .btn-primary:disabled:hover {
    background: #999;
    opacity: 1;
}

#geocoder .btn-secondary {
    background: #07b;
    color: #eee;
}

#geocoder .btn-secondary:active,
#geocoder .btn-secondary:active:focus,
#geocoder .btn-secondary:active:hover,
#geocoder .btn-secondary:focus,
#geocoder .btn-secondary:hover {
    background: #18c;
    color: #fff;
}

#geocoder #btnNext::after {
    content: "\27a1";  /* Rightwards Arrow */
    margin-left: 0.625rem;  /* 10px */
}

#geocoder #btnPrev::before {
    content: "\2b05";  /* Leftwards Arrow */
    margin-right: 0.625rem;  /* 10px */
}

#geocoder #downloadlink {
    color: #eee;
    text-decoration: none;
}

#geocoder #downloadlink:hover {
    color: #fff;
}

#geocoder #snackbar {
    border-radius: 0.625rem;  /* 10px */
    bottom: 1.875rem;  /* 30px */
    display: flex !important;
    justify-content: center;
    left: 50%;
    margin-left: -15.625rem;  /* -250px */
    position: fixed;
    visibility: hidden;
    width: 31.25rem;  /* 500px */
    z-index: 1;
}

#geocoder #snackbar.show {
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

#geocoder #snackbar > p {
    background: #333;
    border-radius: 0.625rem;  /* 10px */
    color: #fff;
    padding: 0.625rem;  /* 10px */
}

#geocoder #csvDataCaptionDiv,
#geocoder #csvViewCaptionDiv {
    background: #eee;
    border-radius: 0.625rem;  /* 10px */
    margin: 0 auto 1.875rem;  /* 30px */
    padding: 1.25rem;  /* 20px */
    white-space: nowrap;
    width: 40.625rem;  /* 650px */
}

#geocoder #csvDataCaption span:not(:last-child),
#geocoder #csvViewCaption span:not(:last-child) {
    margin-right: 1.25rem;  /* 20px */
}

#geocoder #radCsvDataDiv,
#geocoder #radCsvViewDiv {
    align-items: center;
    display: flex;
    margin-bottom: 1.875rem;  /* 30px */
}

#geocoder #radCsvDataDiv .radTitleLabel,
#geocoder #radCsvViewDiv .radTitleLabel {
    font-weight: bold;
    margin: 0 1.25rem 0 0;  /* 20px */
}

#geocoder #radCsvViewDiv label:nth-of-type(6) {  /* A fragile magic-number hack required without adding additional markup. */
    margin-left: auto;
}

#geocoder #radCsvDataDiv .radLabel,
#geocoder #radCsvViewDiv .radLabel {
    font-weight: normal;
    margin: 0;
}

#geocoder #radCsvDataDiv .radLabel:not(:last-child),
#geocoder #radCsvViewDiv .radLabel:not(:last-child) {
    margin-right: 1.25rem;  /* 20px */
}

#geocoder #radCsvDataDiv input,
#geocoder #radCsvViewDiv input {
    margin: 0 0.3125rem 0 0;  /* 5px */
}

#geocoder #csvDataDiv,
#geocoder #csvViewDiv {
    overflow-x: auto;
    width: 100%;
}

#geocoder #csvData,
#geocoder #csvView {
    margin-bottom: 0;
}

#geocoder #csvData thead tr,
#geocoder #csvView thead tr {
    background: #eee;
}

#geocoder #csvData th,
#geocoder #csvView th {
    border: 0.0625rem solid #bbb;  /* 1px */
    padding: 0.9375rem;  /* 15px */
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

#geocoder #csvData th.addBackground,
#geocoder #csvView th.addBackground {
    background: inherit;
}

#geocoder #csvData th.oriBackground,
#geocoder #csvView th.oriBackground {
    background: #ddd;
}

#geocoder #csvData th.valBackground,
#geocoder #csvView th.valBackground {
    background: #ccc;
}

#geocoder #csvData tbody tr:hover,
#geocoder #csvView tbody tr:hover {
    background: rgba(0, 0, 0, 0.025);  /* #000 @ 2.5% */
}

#geocoder #csvData tbody tr.selected,
#geocoder #csvView tbody tr.selected {
    background: #def;
}

#geocoder #csvData tbody tr.rowError,
#geocoder #csvView tbody tr.rowError {
    color: #b00;
}

#geocoder #csvData tbody tr.rowSuccess,
#geocoder #csvView tbody tr.rowSuccess {
    color: #490;
}

#geocoder #csvData tbody tr.rowWarning,
#geocoder #csvView tbody tr.rowWarning {
    color: #d90;
}

#geocoder #csvData td,
#geocoder #csvView td {
    border: 0.0625rem solid #eee;  /* 1px */
    font-size: 0.875rem;  /* 14px */
    padding: 0.9375rem;  /* 15px */
    white-space: nowrap;
}

#geocoder #csvData td.rowNumber,
#geocoder #csvView td.rowNumber {
    text-align: right;
}

#geocoder #stopWatch {
    display: none !important;
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }
    to {
        bottom: 1.875rem;  /* 30px */
        opacity: 1;
    }
}

@keyframes fadeout {
    from {
        bottom: 1.875rem;  /* 30px */
        opacity: 1;
    }
    to {
        bottom: 0;
        opacity: 0;
    }
}