openfoodfoundation/openfoodnetwork

#registration-modal {
  @media only screen and (max-width: 640px) {
    margin: 0 15px;
  }

  header {
    text-align: center;

    @media all and (max-width: 64em) {
      text-align: left;
    }
  }

  .container {
    background-color: #ffffff;
  }

  i {
    font-size: 150%;
  }

  .field {
    margin-bottom: 1em;
  }

  .chunky {
    padding: 8px;
    font-size: 1rem;
    margin: 0;
    width: 100%;
  }

  label.indent-checkbox {
    display: block;
    padding-left: 20px;
    text-indent: -17px;

    input {
      margin: 0px;
    }
  }

  label {
    margin-bottom: 3px;
  }

  ol, ul, p {
    font-size: 0.875rem;
  }

  ol, ul {
    padding: 0;
    margin: 0;
  }

  ol {
    list-style-type: decimal;
  }

  .highlight-box {
    background: white;
    padding: 1rem 1.2rem;

    @media all and (max-width: 64em) {
      margin-top: 1rem;
    }
  }

  #progress-bar {
    margin-bottom: 15px;

    .item {
      font-size: 0.75rem;
      padding: 10px 0px;
      text-transform: uppercase;
      text-align: center;
      background-color: $clr-blue;
      border: 2px solid $clr-blue;
      color: #fff;
    }

    .item.active {
      background-color: $disabled-light;
      border: 2px solid $clr-blue;
      color: $clr-blue;
      font-weight: 700;

      @include box-shadow(inset 0 0 1px 0 #fff);
    }
  }

  .image-select {
    label {
      font-size: 18px;
      padding: 21px 0px;
    }

    #logo-select {
      display: none;
    }
  }

  #image-over {
    font-size: 18px;
    padding: 41px 0px;
    border: 3px dashed #494949;
    text-align: center;
    font-weight: bold;
    color: #494949;

    &.nv-file-over {
      background-color: #78cd91;
    }
  }

  #or {
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    padding: 21px 0px;

    &.horizontal {
      padding: 41px 0px;
    }
  }

  #image-placeholder {
    font-size: 18px;
    font-weight: bold;
    color: #373737;
    background-color: #f1f1f1;
    text-align: center;
    border: 3px dashed #494949;
    margin-left: auto;
    margin-right: auto;

    .spinner {
      width: 100px;
    }

    &.logo {
      .message {
        padding-top: 6em;
      }

      .loading {
        padding-top: 4em;
      }

      width: 306px;
      height: 306px;
    }

    &.promo {
      .message {
        padding-top: 4em;
      }

      .loading {
        padding-top: 1em;
      }

      width: 726px;
      height: 166px;
    }
  }

  .map-container--registration {
    width: 100%;
    height: 244px;
    margin-bottom: 1em;

    map, .angular-google-map-container, google-map, .angular-google-map {
      display: block;
      height: 220px;
      width: 100%;
    }
  }

  .center {
    justify-content: center;
  }

  .button.primary {
    border-radius: 0;
  }
}

#registration-type {
  #enterprise-types {
    a.btnpanel {
      display: block;
      padding: 1rem;
      margin-bottom: 1rem;
      background-color: #efefef;
      color: black;
      text-align: center;
      border: 1px solid transparent;

      i {
        font-size: 3rem;
      }

      h4 {
        margin-top: 1rem;
      }

      &:hover {
        background-color: #fff;
      }

      &#producer-panel:hover {
        border: 1px solid $clr-turquoise;

        &, & * {
          color: $clr-turquoise;
        }
      }

      &#hub-panel:hover, &#both-panel:hover {
        border: 1px solid $clr-brick;

        &, & * {
          color: $clr-brick;
        }
      }

      &.selected {
        &, & * {
          color: #fff;
        }

        &#hub-panel, &#both-panel {
          background-color: $clr-brick-bright;

          &:hover {
            &, & * {
              color: white;
            }
          }
        }

        &#producer-panel {
          background-color: $clr-turquoise-bright;

          &:hover {
            &, & * {
              color: white;
            }
          }
        }
      }

      p {
        clear: both;
        font-size: 0.875rem;
      }
    }
  }
}