/* 
   v2023-03-20
   confirmed good with
 - palmetto/jja.nsf/DID/G8AI0APEPK - Device Intensive Lookup
 - palmetto/jja.nsf/DID/98PM4I5DTG - CDR Calculator
*/

@media only screen and (max-width: 480px) {
    .lookupcontainer {
        grid-template-columns: auto 50%;
    }
}

form {
  display: contents;
}

.lookupcontainer {
    background: rgba(0, 0, 0, .025);
    padding: 1.5em;
    border-radius: 3px;
    font-size: 1em;
    border: 1px solid #CCC;
    border-bottom-width: 5px;
    display: grid;
    grid-template-columns: auto 200px 1fr;
    grid-gap: .5em 1em;
    margin: 1em 0em
}

.lookupcontainer .toolheader {
    display: block;
    margin-bottom: 0.5em;
    font-size: 1.25em;
    font-family: "BryantPro";
    font-weight: bold;
    grid-column: 1/-1
}

.lookupcontainer label {
    grid-column: 1;
    font-weight: bold;
}

.lookupcontainer .note {
    grid-column: 3;
    font-style: italic;
}

.lookupcontainer button {
    grid-column: 2
}

.lookupcontainer input.error {
    border-color: #C00
}

.lookupcontainer .error {
    color: #C00
}

#resultswrapper {
    display: grid;
    grid-template-columns: 1fr 2fr;
    justify-content: center;
    align-items: center;
    padding: 1.5em;
    border: 1px solid #CCC;
    opacity: 0;
    box-shadow: 0em 0em 1em #0001
}

#resultswrapper h2 {
    margin-top: 0em;
}

#resultswrapper .grid {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: .5em 1em;
    padding: .5em;
}

.extra_info {
    margin: 1em auto;
}

#resultswrapperCDR {	
    display: grid;	
    grid-template-columns: 1fr;	
    justify-content: center;	
    align-items: center;	
    padding: 1.5em;	
    border: 1px solid #CCC;	
    opacity: 0;	
    box-shadow: 0em 0em 1em #0001;	
    font-weight: bold;	
    font-size: 18px;	
  }

#resultswrapper #cbsaUrbanRuralTarget {
    text-transform: capitalize;
}

#resultswrapper table {
    margin-top: 1em;
}

#resultswrapper table th,
#resultswrapper table td {
    text-align: left;
    padding: .5em
}

#resultswrapper table th:not(:first-child),
#resultswrapper table td:not(:first-child) {
    text-align: right
}

#resultswrapper th {
    border-bottom: 1px solid #CCC
}

#resultswrapper tr:nth-child(even) td {
    background: #f9f9f9
}

.btn-primary {
    margin-bottom: 3rem;
}

/* Setting font family */
.pageContent h1,
p,
li,
label {
    /* font-family: "BryantPro"; */
}

/*Search Input*/
.search_area {
    position: relative;
    width: 100%;
    height: 100%;
}

.search_area .icon {
    position: absoulte;
    top: 0px;
    left: 0px;
    width: 35px;
    height: 0px;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.search_area .icon::before {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    border: 3px solid #004357;
    border-radius: 50%;
    transform: translate(-4px, -4px);
    cursor: pointer;
}

.search_area .icon::after {
    content: '';
    position: absolute;
    width: 3px;
    height: 12px;
    background: #004357;
    transform: translate(6px, 6px) rotate(315deg);
}

.search_area .input {
    position: relative;
    left: 0px;
    width: auto;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.search_area .input input {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

.clear_search {
    position: absolute;
    top: 7.5px;
    right: -5px;
    transform: translate(-50%);
    width: 20px;
    height: 20px;
    background: #fff;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.clear_search::before {
    position: absolute;
    content: '';
    width: 1px;
    height: 15px;
    background: #999;
    transform: rotate(45deg);
}

.clear_search::after {
    position: absolute;
    content: '';
    width: 1px;
    height: 15px;
    background: #999;
    transform: rotate(315deg);
}

#codeType {
    padding: 8px 8px 6px;
}

.btn-primary {
    margin-bottom: 2rem;
}

#pdCodes {
    font-size: inherit;
}

#pdCodes::placeholder {
    font-size: 14px;
}

#search_pdCodes {
    display: block;
}

#error_message {
    display: block;
    width: 100%;
    grid-column: 1/-1;
}

/* Results */
#resultswrapper p {
    width: 100%;
}

#resultswrapperCDR div {
    font-weight: bold;
    margin: .5rem 0 1rem;
    padding: .5em;
    background-color: #f9f9f9;
    border: 1px solid #999;
    box-sizing: border-box;
    border-radius: 3px;
}

#resultswrapper div {
    font-weight: bold;
    margin: .5rem 0 1rem;
    padding: .5em;
    background-color: #f9f9f9;
    border: 1px solid #999;
    box-sizing: border-box;
    border-radius: 3px;
}

.resultsHeader {
    background-color: teal !important;
    color: #fff;
    text-transform: uppercase;
}

#error_message {	
  display: none;	
  width: 100%;	
  grid-column: 1/-1;	
}	
.displayError {	
  display: block !important;	
}