.donate-match-container,
#company-profile-container,
#hepdata-no-results-message {
  text-align: center;
  margin-bottom: 60px;
}

.donate-match-container {
  input,
  datalist,
  .input-and-loader {
    width: 300px;
  }
  .input-and-loader {
    margin: auto;
    position: relative;

    input {
      height: 30px;
      padding: 3px;
      border-style: solid;
      text-align: center;
      font-weight: 600;
    }
    .load-container {
      display: none;
      height: 30px;
      width: 30px;
      overflow: hidden;
      position: absolute;
      top: 4px;
      right: -6px;

      .loader,
      .loader:before,
      .loader:after {
        background: $color-dark-purple;
        animation: load1 1s infinite ease-in-out;
        width: 1em;
        height: 4em;
      }
      .loader {
        color: $color-dark-purple;
        text-indent: -9999em;
        margin: 10px auto;
        position: relative;
        font-size: 4px;
        transform: translateZ(0);
        animation-delay: -0.16s;
      }
      .loader:before,
      .loader:after {
        position: absolute;
        top: 0;
        content: '';
      }
      .loader:before {
        left: -1.5em;
        animation-delay: -0.32s;
      }
      .loader:after {
        left: 1.5em;
      }
      @-webkit-keyframes load1 {
        0%,
        80%,
        100% {
          box-shadow: 0 0;
          height: 4em;
        }
        40% {
          box-shadow: 0 -2em;
          height: 5em;
        }
      }
      @keyframes load1 {
        0%,
        80%,
        100% {
          box-shadow: 0 0;
          height: 4em;
        }
        40% {
          box-shadow: 0 -2em;
          height: 5em;
        }
      }
    }
  }
  #company-option-list {
    width: 300px;
    margin: 0 auto;
    max-height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: $color-very-light-grey;
    border: $color-purple 1px solid;
    display: none;
    .company-option {
      word-wrap: break-word;
      padding: 5px 2px;
      &:hover {
        background-color: $color-green;
        color: $color-white;
      }
    }
  }
}

.donate-error-message {
  color: $color-light-grey;
  padding: 0 10%;
  word-break: break-all;
  text-align: center;
}

#company-profile-container {
  .profile {
    display: none;
    width: 75%;
    margin: auto;


    .row {
      margin: 20px 0;

      .company-property-label {
        width: 30%;
        text-align: right;
        font-weight: 700;

      }
      .company-property-value {
        text-align: left;
        width: 60%;

        &#summary-value {
          width: auto;
          font-size: 25px;
          line-height: 34px;
          text-align: center;
          .company {
            font-weight: 700;
            color: $color-purple;
          }
          .percent {
            font-weight: 700;
            color: $color-green;
          }
          .match-amount {
            font-weight: 700;
            color: $color-dark-purple;
          }
        }

        &#matchingGiftForm-value {
          width: auto;
        }

        &#lastUpdated-value {
          font-weight: 700;
          color: $color-light-grey;
        }

        &#matchingConditions-value {
          .ratio {
            font-weight: 700;
            color: $color-dark-purple;
          }
        }
        &#resources-value {
          width: auto;
        }
      }
    }
  }
  ul {
    margin-top: 0px;
  }
  li {
    margin-bottom: 10px;
  }
}
