html { background-color: #D7E2E2; color: #000F0F; font-family: 'Roboto', sans-serif; overflow-y: scroll; text-align: center; } body { margin: 0; } h1 { padding: 16px; margin: 0 0 20pt 0; text-align: center; color: #D7E2E2; background-color: #013A3A; } h2 { background-color: #013A3A; padding: 12pt 0 12pt 0; margin-top: 0; } h3 { color: #5E9292; text-align: center; padding: 12pt; font-size: x-large; opacity: 0; } p { text-align: center; } a { color: #000F0F; } input[type=text].search-bar { color: #404040; font-size: 1.6em; padding: 5pt 8pt 5pt 8pt; margin-top: 8pt; margin-bottom: 8pt; margin-left: 20pt; width: 70%; border: 1px solid grey; } .filter-container p { text-align: left; font-size: 10px; margin: 2px; } .filter-container { width: 30%; display: inline-block; border: 1px #226666 solid; color: #D7E2E2; background-color: #226666; } .filter-container ul { display: flex; justify-content: stretch; list-style: none; margin: 0; padding: 0; } .filter-container li { flex: 1; font-size: 0.8em; } input[type=checkbox]{ display: none; } input[type=range] { } input[type=checkbox] + label.toggle-btn { padding:10px 0 10px 0; display: block; color: rgba(94,146,146, 0.5); background-color: #D7E2E2; transition: 0.2s; -webkit-transition: 0.2s; } input[type=checkbox]:checked + label.toggle-btn { color: #D7E2E2; background-color: #226666; } .shadow { background-color: black; display: none; height: 100%; left: 0; opacity: 0.0; position: fixed; top: 0; width: 100%; z-index: 200; } .overlay { background-color: #226666; color: #D7E2E2; display: none; height: 90%; padding: 0; position: fixed; margin:auto; left:0; right:0; top:0; min-width: 60%; width:900px; z-index: 201; text-align: center; opacity: 0.0; } .calculateoverlay { background-color: #226666; color: #D7E2E2; display: none; height: 90%; padding: 0; position: fixed; margin:auto; left:0; right:0; top:0; min-width: 60%; width:900px; z-index: 201; text-align: center; opacity: 0.0; } .round-button { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 28px; font-size: 32px; background-color: #5E9292; box-shadow: 2pt 1pt 8pt black; } .round-button a{ color: #D7E2E2; } .small-square-button { position: absolute; top: 5px; right: 10px; font-size: 40px; } .small-square-button a { color: #D7E2E2; } .round-floating-button { display: flex; align-items: center; justify-content: center; position: fixed; bottom: 20px; right: 20px; width: 56px; height: 56px; border-radius: 28px; font-size: 32px; background-color: #5E9292; box-shadow: 2pt 1pt 8pt black; } .round-floating-button a{ color: #D7E2E2; } #calculate-button { right: 76px; margin-right: 8px } #datasheet-info p { font-size: 12pt; } #results { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; border-collapse: collapse; margin-top: 1em; } #results th { background-color: #226666; color: #D7E2E2; padding: 5pt; border-right: 2px solid #D7E2E2; border-left: 2px solid #D7E2E2; } #results tr:nth-child(odd) { background-color: #5E9292; } #results td { padding: 4pt; cursor: pointer; text-align: left; } #results #type { width: 18%; } #results #partno { /*width: 20%;*/ } #results #description { width: 70%; } #results #docs { width: 5%; } #info-container { width: 35%; height: 85%; display: flex; flex-direction:column; justify-content:space-between; } #details { width: 100%; } #results { width: 100%; } #magical_autofill{ font-size: small; } a.small_link{ text-decoration: none; color: #B0B0B0; font-weight: 600; } .details-header { color: #013A3A; } .details-content td{ padding-top:6pt; padding-bottom:16pt; } .results-header { color: #013A3A; } .results-content td{ padding-top:6pt; padding-bottom:16pt; } td p { margin: 0; padding: 0; } .button-container { display: flex; justify-content: space-evenly; } .map { position: absolute; right: 5%; /*margin-top: 4%;*/ max-height: calc(90% - 42pt); max-width: 60%; } .pinfo-input { display: none; width: 90%; } .nothidden{ display: initial !important; }