﻿.callsign {
  font-weight: bold;
  color: navy;
}
#callLookupForm {
  display: flex;
  flex-flow: column nowrap;
  max-width: 400px;
  background: white;
  margin: 30px auto 20px auto;
  border: 1px solid #999999;
}

#callLookupForm > div {
  padding: 10px 15px;
  flex: 1;
}

  #callLookupForm > div:nth-child(2) {
    padding: 15px 15px 0 15px;
  }

#callLookupForm > div:nth-child(4) {
  padding: 0 15px;
}

  #callLookupForm select {
    width: 100%;
    padding: 3px;
    height: 35px;
  }

  #callLookupForm select option {
    border-width: 50px;
  }
  .select {
    padding: 10px 5px;
    border: 1px solid black;
  }
  .select i {
    float: right;
    margin: 6px 5px 0 0;
  }
#callLookupForm ul {
  padding: 0;
  margin: 2px;
  border: 1px solid #bbbbbb;
  cursor: pointer;
}

#callLookupForm li {
  border: 1px solid black;
  padding: 10px 5px;
  list-style-type: none;
  background-color: #eeeeee;
  margin-bottom: 1px;
  cursor: pointer;
}

#callLookupForm input[type="text"] {
  width: 100%;
  padding: 3px 5px;
  margin-bottom: 3px;
  height: 35px;
  text-transform: uppercase;
}

#callLookupForm .header {
  padding: 10px;
  text-align: left;
  font-family: Arial;
  font-weight: bold;
  font-size: 16px;
  color: Black;
  background: #A0C0E0;
  background: linear-gradient(to bottom, #BFD5EA, #6A9DD0);
}

#callLookupForm label {
  padding: 15px 10px 0 10px;
  margin-bottom: 5px;
}

#callLookupForm button {
  text-align: center;
  color: Black;
  background: #A0C0E0;
  background: linear-gradient(to bottom, #BFD5EA, #6A9DD0);
  padding: 5px 15px;
}

#callLookupForm span {
  color: red;
}

#callsignLookup a, #callsignLookup a:focus, #licenseHolders a, #licenseHolders a:hover {
  font-weight: bold !important;
}

#callsignLookup, #licenseHolders {
  color: Black;
  font-family: Courier New;
  font-size: 12px;
  display: flex;
  flex-flow: column wrap;
  margin: 20px auto 20px auto;
  background: white;
  border-top: none;
  border-left: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
  border-right: 1px solid #eeeeee;
  max-width: 400px;
}

#callHistoryStatus {
  color: red;
  padding: 5px;
  text-align: center;
}

  #callsignLookup > div, #licenseHolders > div {
    display: flex;
    flex-flow: column wrap;
    margin-bottom: 2px;
  }

  #callsignLookup > div:nth-child(2n+1), #licenseHolders > div:nth-child(2n+1) {
    background-color: #eeeeee;
  }

    #callsignLookup > div:first-child, #licenseHolders > div:first-child {
      padding: 3px 8px 3px 8px;
      color: black;
      background: white;
      background: linear-gradient(to bottom, #BFD5EA, #6A9DD0);
      text-align: center;
      flex: 1;
      justify-content: center;
      text-transform: uppercase;
      font-weight: bold;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14px;
    }

  #callsignLookup > div, #licenseHolders > div {
    flex: 1;
    border: 1px solid black;
  }

    #callsignLookup > div > div, #licenseHolders > div > div {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      flex: 1;
    }

    #callsignLookup > div:nth-child(2) > div, #licenseHolders > div:nth-child(2) > div {
      flex: 1;
    }

  #callsignLookup > div > div > div, #licenseHolders > div > div > div {
    flex: 1;
    border: 1px solid black;
    height: 35px;
    padding: 10px 5px;
  }

  #callsignLookup label, #licenseHolders label {
    padding: 10px 5px;
    background-color: #cfe4f8;
    flex: 1;
    justify-content: end;
    margin: 0;
    border: 1px solid black;
    height: 35px;
  }


#callsignData {
  max-width: 500px;
  color: Black;
  background: white;
  font-family: Courier New;
  font-size: 12px;
  margin: 20px auto 20px auto;
  display: flex;
  flex-flow: column wrap;
}

#callsignData > div:first-child 
{
  padding: 10px 8px 5px 12px;
  color: black;
  background: white;
  background: linear-gradient(to bottom, #BFD5EA, #6A9DD0);
  text-align: center;
  flex: 1;
  justify-content: center;
  text-transform: uppercase;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

  #callsignData > div:nth-child(2) {
    display: flex;
    flex-flow: row wrap;
  }

  #licenseHolder {
    display: flex;
    flex-flow: column wrap;
    flex: 1;
    border: 1px solid #428bca;
  }

    #licenseHolder > div:first-child {
      color: white;
      background-color: #475f8b;
      padding: 10px 5px 8px 5px;
      border-right: 1px solid white;
    }

    #licenseHolder > div {
      padding: 0 5px;
    }
    #licenseHolder > div:nth-child(2) {
      padding: 5px 5px 0 5px;
    }

#callData {
  display: flex;
  flex-flow: column nowrap;
  flex: 1;
  border: 1px solid #428bca;
  height: 153px;
}

#callData > div:first-child {
  color: white;
  background-color: #475f8b;
  padding: 10px 5px 8px 5px;
}

  #callData > div {
    padding: 0;
    display: flex;
    flex-flow: row wrap;
  }

  #callData > div > div {
    width: 50%;
    padding: 5px 5px;
    border: 1px solid #999999;
  }

    #callData > div > div:first-child {
      background-color: #cfe4f8;
    }

    #callDates {
      display: flex;
      flex-flow: column wrap;
    }

    #callDates {
      display: flex;
      flex-flow: column wrap;
      flex: 1;
    }

      #callDates > div {
        display: flex;
        flex-flow: row wrap;
      }


    #callDates > div:first-child {
      color: white;
      background-color: #475f8b;
      padding: 10px 5px 8px 5px;
      margin-top: 20px;
    }

    #callDates > div > div {
      display: flex;
      flex-flow: column wrap;
      flex: 1;
    }

    #callDates > div > div > div {
      display: flex;
      flex-flow: row wrap;
    }

    #callDates > div > div > div > div {
      flex: 1;
      padding: 6px 0 3px 8px;
      border: 1px solid #428bca;
      height: 30px;
    }
    #callDates > div > div > div > div:first-child {
      background-color: #cfe4f8;
    }


#callClassification {
  margin-top: 20px;
  display: flex;
  flex-flow: column nowrap;
  border: 1px solid #428bca;
}

#callClassification > div:first-child {
  color: white;
  background-color: #475f8b;
  padding: 10px 5px 8px 5px;
}

#callClassification > div {
  padding: 0;
  display: flex;
  flex-flow: row wrap;
}

  #callClassification > div > div {
    display: flex;
    flex-flow: column wrap;
    flex: 1;
  }

    #callClassification > div > div > div {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      flex: 1;
    }

      #callClassification > div > div > div > div:first-child {
        background-color: #cfe4f8;
      }

      #callClassification > div > div > div > div {
        padding: 6px 0 0 5px;
        border: 1px solid #428bca;
        margin: 0;
        height: 30px;
        flex: 1;
      }

#gmap {
  margin: 20px auto 0 auto;
  width: 100%;
  height: 300px;
}

.disabled-button {
  background: linear-gradient(to bottom, #eeeeee, #cccccc) !important;
  color: #aaaaaa !important;
}

@media (max-width: 600px) {
  #callData, #licenseHolder {
    min-width: 100%;
  }

  #callDates > div > div {
    min-width: 100%;
  }
  #callClassification > div > div {
    min-width: 100%;
  }
}
