.group.school_locator-group {
  .row.school_locator-row {
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    .school_locator {
      & > .header {
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;

        padding-right: calculateRem(50);
        padding-left: calculateRem(50);

        .title-paragraph {
          text-align: center;

          @include breakpoint(laptop) {
            max-width: 50%;
          }
        }
      }
      .list-map {
        .list {
          .search-filter {
            display: flex;
            flex-flow: column nowrap;

            padding-top: calculateRem(25);
            padding-right: calculateRem(25);
            padding-bottom: calculateRem(25);
            padding-left: calculateRem(25);

            background-color: $dark-gray;
            color: $light;

            .tabs-container {
              background-color: $dark-gray;
              color: $light;
            }

            .radio-input-container {
              display: flex;
              flex-flow: row nowrap;

              margin-bottom: calculateRem(20);

              & > div {
                &:first-child {
                  margin-right: calculateRem(20);
                }
                input[type=radio] {
                  display: none;

                  & + label {
                    font-weight: 400;
                    text-transform: none;
                  }
                  &:checked + label:before {
                    border-color: $mid-gray;
                    box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0);
                  }
                  &:checked + label {
                    color: white;
                  }
                  &:checked + label:after {
                    transform: scale(1);
                  }
                  & + label {
                    color: $mid-gray;
                    position: relative;
                    // display: inline-block;
                    padding-right: calculateRem(25);
                    padding-left: calculateRem(25);
                    margin-bottom: 0;
                    cursor: pointer;
                    vertical-align: bottom;
                    &:before, &:after {
                      position: absolute;
                      content: '';
                      border-radius: 50%;
                      transition: all .3s ease;
                      transition-property: transform, border-color;
                    }
                    &:before, &:after {
                      @if ($font-size-multiplier == 0.77) {
                        margin-top: calculateRem(2);
                      }
                      @else {
                        margin-top: calculateRem(5);
                      }
                    }
                    &:before {
                      top: 0;
                      left: 0;
                      width: calculateRem(12);
                      height: calculateRem(12);

                      border: 1px solid $mid-gray;
                    }
                    &:after {
                      top: calculateRem(4);
                      left: calculateRem(4);
                      width: calculateRem(6);
                      height: calculateRem(6);

                      transform: scale(0);
                    }
                  }
                }
              }
            }

            .search {
              display: flex;
              flex-flow: row nowrap;
              width: 100%;

              margin-bottom: calculateRem(20);

              .input-container {
                flex-grow: 80;
                .search-input {
                  flex-grow: 100;

                  min-height: 0;
                  height: 100%;

                  border: none;

                  padding-top: calculateRem(10);
                  padding-right: calculateRem(10);
                  padding-bottom: calculateRem(10);
                  padding-left: calculateRem(10);

                  background-color: $light;
                }
              }

              .button-container {
                .icon-button {
                  display: block;

                  height: 100%;
                }
              }
            }

            .filter-search {
              margin-bottom: calculateRem(20);

              .input-container {
                .filter-input {
                  min-height: 0;
                  height: 100%;

                  border: none;

                  padding-top: calculateRem(10);
                  padding-right: calculateRem(10);
                  padding-bottom: calculateRem(10);
                  padding-left: calculateRem(10);

                  background-color: $light;
                }
              }
            }

            .reset-filter {
              .reset-map:not(:hover) {
                color: $mid-gray;
              }
              .filter {
                align-self: flex-end;

                margin-right: 0;

                background-color: $dark-gray;
                .dropdown {
                  background-color: $dark-gray;
                }
              }
            }
          }
          .schools-list {
            .empty-state {
              padding-top: calculateRem(20);
              text-align: center;
            }
            .school-info {
              border-bottom-width: 1px;
              border-bottom-style: solid;

              padding-top: calculateRem(35);
              padding-right: calculateRem(30);
              padding-bottom: calculateRem(35);
              padding-left: calculateRem(30);

              cursor: pointer;

              .body {
                margin-top: calculateRem(15);

                .grades-website {
                  display: flex;
                  flex-flow: row nowrap;
                  justify-content: space-between;

                  align-items: center;
                }
              }
            }
          }
        }
        .school_locator_map {
          color: $dark;
        }
      }
    }
  }
}
